
/* =========================================================
   PHASE 4 — Production polish, typography and interactions
   ========================================================= */

:root{
  --header-height:72px;
  --text-xs:12px;
  --text-sm:14px;
  --text-md:16px;
  --text-lg:18px;
  --focus-ring:0 0 0 4px rgba(124,58,237,.22);
  --primary:#7048e8;
}


.desktop-nav a[aria-current="page"], .mobile-menu a[aria-current="page"] {
    color: var(--primary);
}

/* Header height and alignment fix */
.site-header{
  min-height:var(--header-height);
}
.header-inner{
  height:var(--header-height);
  min-height:var(--header-height);
}
.brand{
  display:flex;
  align-items:center;
  flex:0 0 auto;
}
.brand img{
  width:150px;
  max-height:100%;
  object-fit:contain;
}

.logo-light{
    display:block;
}

.logo-dark{
    display:none;
}

html[data-theme="dark"] .logo-light,
html[data-theme="dark"] .logo-light{
    display:none;
}

html[data-theme="dark"] .logo-dark,
html[data-theme="dark"] .logo-dark{
    display:block;
}
.desktop-nav{
  height:100%;
}
.desktop-nav>a,.nav-dropdown-trigger{
  min-height:44px;
  padding:10px 0;
  font-size:14px;
  line-height:1;
}
.header-actions{
  min-height:44px;
}
.header-cta{
  min-height:42px;
}
.mega-menu{
  top:100%;
}

/* Global readability corrections */
body{
  font-size:16px;
}
p{
  text-wrap:pretty;
}
.section-intro>p,
.hero-description,
.service-copy>p,
.case-copy>p,
.industry-copy>p,
.faq-heading p,
.final-cta-inner>p{
  font-size:clamp(15px,1.25vw,18px);
}
.eyebrow,
.industry-kicker,
.cta-kicker{
  font-size:12px;
}
.button,.btn{
  font-size:14px;
  display: inline-flex;
    align-items: center;
    gap: 7px;
}
.text-link,.case-link,.insight-copy a,.insight-card a{
  font-size:13px;
}
.mega-link strong{
  font-size:15px;
}
.mega-link small{
  font-size:12px;
}
.mega-menu-intro p{
  font-size:15px;
}
.service-copy small,
.case-meta,
.technology-detail small,
.why-content small,
.insight-meta,
.footer-column h3,
.footer-newsletter h3{
  font-size:11px;
}
.service-copy li,
.process-card p,
.technology-detail p,
.why-content p,
.insight-copy p,
.newsletter-card p,
.faq-answer p{
  font-size:14px;
}
.case-services span,
.industry-tags span,
.technology-tags span{
  font-size:11px;
}
.case-results span,
.industry-result span,
.why-metric span{
  font-size:10px;
}
.case-results strong{
  font-size:30px;
}
.industry-item span,
.why-index,
.testimonial-count,
.footer-bottom{
  font-size:10px;
}
.industry-ui-card.small small,
.testimonial-person span,
.newsletter-card>small,
.footer-column a,
.footer-column span,
.footer-newsletter p{
  font-size:11px;
}
.industry-ui-card.small strong,
.testimonial-person strong{
  font-size:13px;
}
.testimonial-person>b{
  font-size:11px;
}
.insight-meta{
  font-size:11px;
}
.footer-brand p{
  font-size:13px;
}
.footer-newsletter input,
.newsletter-form input{
  font-size:12px;
}

/* Keep miniature dashboard interface typography compact but readable */
.dashboard-window,
.service-mockup,
.case-visual,
.industry-visual{
  --mini-copy:9px;
}
.dashboard-heading span,.dashboard-heading button,
.metric-card small,.metric-trend,
.card-heading small,.card-heading>span,
.chart-labels,.workflow-list small{
  font-size:var(--mini-copy);
}
.metric-card strong{
  font-size:16px;
}
.workflow-list strong{
  font-size:10px;
}

/* Strong focus states */
:where(a,button,input,textarea,select):focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
}
:where(a,button):focus-visible{
  border-radius:10px;
}
::selection{
  color:#fff;
  background:var(--primary);
}

/* Preloader */
.site-preloader{
  position:fixed;
  inset:0;
  z-index:99999;
  display:grid;
  place-items:center;
  overflow:hidden;
  color:#fff;
  background:#070811;
  transition:opacity .65s ease,visibility .65s ease;
}
.site-preloader.is-hidden{
  opacity:0;
  visibility:hidden;
}
.preloader-aurora{
  position:absolute;
  width:900px;
  height:900px;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 35%,rgba(124,58,237,.76),transparent 32%),
    radial-gradient(circle at 68% 42%,rgba(14,165,233,.36),transparent 28%),
    radial-gradient(circle at 55% 72%,rgba(236,72,153,.24),transparent 26%);
  filter:blur(90px);
  animation:preloaderDrift 6s ease-in-out infinite alternate;
}
@keyframes preloaderDrift{
  to{transform:translate3d(4%,-3%,0) scale(1.08)}
}
.preloader-content{
  position:relative;
  z-index:2;
  width:min(520px,calc(100% - 48px));
}
.preloader-mark{
  width:64px;
  height:64px;
  display:grid;
  padding:10px;
  place-items:center;
  margin-bottom:30px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:20px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(20px);
  font:800 20px var(--font-heading);
}
.preloader-words{
  height:76px;
  overflow:hidden;
  font:800 clamp(43px,8vw,72px)/1.05 var(--font-heading);
  letter-spacing:-.055em;
}
.preloader-words span{
  display:block;
  height:76px;
  animation:preloaderWords 2.4s cubic-bezier(.76,0,.24,1) both;
}
@keyframes preloaderWords{
  0%,18%{transform:translateY(0)}
  27%,43%{transform:translateY(-76px)}
  52%,68%{transform:translateY(-152px)}
  77%,100%{transform:translateY(-228px)}
}
.preloader-track{
  height:2px;
  margin-top:34px;
  overflow:hidden;
  background:rgba(255,255,255,.15);
}
.preloader-track span{
  display:block;
  width:0;
  height:100%;
  background:linear-gradient(90deg,#8b5cf6,#38bdf8);
}
.preloader-meta{
  display:flex;
  justify-content:space-between;
  margin-top:13px;
  color:#afb3c3;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
}
body.is-loading{
  overflow:hidden;
}

/* Custom cursor */
.custom-cursor{
  position:fixed;
  z-index:9999;
  left:0;
  top:0;
  width:16px;
  height:16px;
  display:grid;
  place-items:center;
  border:1px solid rgba(124,58,237,.72);
  border-radius:999px;
  background:rgba(124,58,237,.16);
  backdrop-filter:blur(8px);
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-50%);
  transition:width .25s ease,height .25s ease,background .25s ease,opacity .2s ease;
}
.custom-cursor.is-visible{
  opacity:1;
}
.custom-cursor.is-active{
  width:92px;
  height:92px;
  color:#fff;
  border-color:rgba(255,255,255,.25);
  background:rgba(90,57,190,.78);
}
.custom-cursor span{
  opacity:0;
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
  transition:opacity .2s ease;
}
.custom-cursor.is-active span{
  opacity:1;
}
@media(pointer:fine){
  [data-cursor]{
    cursor:none;
  }
}

/* Scroll progress */
.scroll-progress{
  position:fixed;
  z-index:800;
  top:50%;
  right:22px;
  display:grid;
  gap:17px;
  transform:translateY(-50%);
}
.scroll-progress-line{
  position:absolute;
  top:8px;
  bottom:8px;
  left:5px;
  width:1px;
  background:var(--line);
}
.scroll-progress-line i{
  display:block;
  width:100%;
  height:0;
  background:var(--primary);
}
.scroll-progress a{
  position:relative;
  width:11px;
  height:11px;
  border:2px solid var(--bg);
  border-radius:50%;
  background:var(--muted);
  box-shadow:0 0 0 1px var(--line);
  transition:.25s ease;
}
.scroll-progress a span{
  position:absolute;
  right:20px;
  top:50%;
  padding:5px 8px;
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--text);
  background:var(--surface-glass);
  backdrop-filter:blur(14px);
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
  opacity:0;
  transform:translateY(-50%) translateX(5px);
  transition:.22s ease;
}
.scroll-progress a:hover span{
  opacity:1;
  transform:translateY(-50%);
}
.scroll-progress a.active{
  background:var(--primary);
  transform:scale(1.35);
}

/* Reveal and living interface polish */
[data-case-study],
.industry-panel,
.insight-card,
.insight-featured,
.newsletter-card,
.why-panel,
.faq-item{
  will-change:transform,opacity;
}
html.phase-4-ready [data-case-study]:not(.in-view){
  opacity:.35;
  transform:translateY(28px);
}
html.phase-4-ready [data-case-study]{
  transition:opacity .7s ease,transform .7s ease;
}
.chart-line,
.health-chart path{
  stroke-dasharray:700;
  stroke-dashoffset:700;
}
.in-view .chart-line,
.industry-panel.active .health-chart path{
  animation:drawLine 1.5s .2s ease forwards;
}
@keyframes drawLine{
  to{stroke-dashoffset:0}
}
.metric-card,
.case-float-card,
.industry-ui-card.small{
  transition:transform .3s ease,box-shadow .3s ease;
}
.metric-card:hover,
.case-float-card:hover,
.industry-ui-card.small:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-md);
}

/* Header shrinks slightly after scroll */
.site-header.scrolled .header-inner{
  height:64px;
  min-height:64px;
}
.site-header.scrolled{
  --header-height:64px;
}
.site-header .header-inner,
.site-header .brand img{
  transition:height .28s ease,min-height .28s ease,width .28s ease;
}
.site-header.scrolled .brand img{
  width:138px;
}

/* Accessibility */
@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .site-preloader{
    display:none;
  }
  body.is-loading{
    overflow:auto;
  }
  .custom-cursor{
    display:none;
  }
}

@media(max-width:1100px){
  .scroll-progress{
    display:none;
  }
  .custom-cursor{
    display:none;
  }
}

@media(max-width:700px){
  :root{
    --header-height:66px;
  }
  .header-inner{
    height:66px;
    min-height:66px;
  }
  .site-header.scrolled{
    --header-height:60px;
  }
  .site-header.scrolled .header-inner{
    height:60px;
    min-height:60px;
  }
  .brand img{
    width:132px;
    max-height:100%;
  }
  .site-header.scrolled .brand img{
    width:124px;
  }
  .menu-toggle{
    width:42px;
    height:42px;
  }
  .mobile-menu{
    top:var(--header-height);
    max-height:calc(100dvh - var(--header-height));
  }
  .mobile-menu-inner>a,.mobile-services-toggle{
    min-height:56px;
    font-size:16px;
  }
  .mobile-services-panel a{
    min-height:46px;
    font-size:14px;
  }
  .eyebrow,
  .industry-kicker,
  .cta-kicker{
    font-size:10px;
  }
  .service-copy li,
  .process-card p,
  .technology-detail p,
  .why-content p,
  .insight-copy p,
  .newsletter-card p,
  .faq-answer p{
    font-size:14px;
  }
  .case-services span,
  .industry-tags span,
  .technology-tags span{
    font-size:10px;
  }
  .footer-column a,.footer-column span,.footer-newsletter p{
    font-size:12px;
  }
  .preloader-words,
  .preloader-words span{
    height:58px;
  }
  .preloader-words{
    font-size:46px;
  }
  @keyframes preloaderWords{
    0%,18%{transform:translateY(0)}
    27%,43%{transform:translateY(-58px)}
    52%,68%{transform:translateY(-116px)}
    77%,100%{transform:translateY(-174px)}
  }
}
