/* ============================================================
   Novara — Intelligent Systems Studio
   Shared stylesheet for index / services / about + Menu overlay
   ============================================================ */

/* ---------- Reset / base ---------- */
*{ box-sizing:border-box; margin:0; padding:0 }
html{ font-size:16px; scroll-behavior:smooth }
body{ background:#000000; color:#f2f2f0; font-family:'Inter',sans-serif; overflow-x:hidden; -webkit-font-smoothing:antialiased }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer }
ul{ list-style:none }
img,svg{ max-width:100%; display:block }
:focus-visible{ outline:2px solid #ff6a3d; outline-offset:2px }

/* ---------- Tokens ---------- */
:root{
  --bg:#000000;            --bg-panel:#0a0a0c;
  --ink:#f2f2f0;           --muted:rgba(242,242,240,.6);   --faint:rgba(242,242,240,.35);
  --card-bg:rgba(255,255,255,.03);   --card-border:rgba(255,255,255,.08);
  --particle-blue:#4a7dff; --particle-blue-soft:#7ea3ff;
  --particle-orange:#ff6a3d; --particle-orange-soft:#ff9466;
  --gradient-hero: radial-gradient(circle at 50% 50%, var(--particle-orange) 0%, transparent 45%),
                   radial-gradient(circle at 50% 100%, var(--particle-blue) 0%, transparent 45%);
  --font-mono:'IBM Plex Mono', monospace;
  --radius-pill:9999px;
  --radius-card:1rem;
  --container-shell:75rem;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-reveal:cubic-bezier(.215,.61,.355,1);
}

/* ---------- Page fade-in ---------- */
html.js body{ opacity:0; transition:opacity .8s ease }
html.js body.is-ready{ opacity:1 }

/* ---------- Shell ---------- */
.shell{ max-width:var(--container-shell); margin-inline:auto }

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position:fixed; inset-inline:0; top:0; z-index:50;
  padding:1.5rem 2rem;
  display:flex; align-items:center; justify-content:space-between;
}
.page-static .site-header{
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--card-border);
}
.wordmark{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:1.125rem; font-weight:600; letter-spacing:-.01em;
}
.wordmark svg{ width:1.25rem; height:1.25rem; color:var(--particle-orange) }

.menu-trigger{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid rgba(255,255,255,.15); border-radius:var(--radius-pill);
  padding:.5rem 1.25rem;
  font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em;
  transition:background .25s var(--ease-out), transform .25s var(--ease-out);
}
.menu-trigger svg{ width:.875rem; height:.875rem }
.menu-trigger:hover{ background:rgba(255,255,255,.08); transform:scale(1.04) }

/* ============================================================
   Shared components
   ============================================================ */

/* --- PillBadge --- */
.pill-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-radius:var(--radius-pill);
  padding:.5rem 1rem;
  font-size:.8125rem; font-weight:500; color:var(--muted);
}
.pill-badge svg{ width:.875rem; height:.875rem; color:var(--particle-orange-soft) }

/* --- PillButton --- */
.btn{
  display:inline-flex; align-items:center; gap:.75rem;
  border-radius:var(--radius-pill);
  padding:.875rem 1.5rem;
  transition:transform .3s var(--ease-out), background .3s var(--ease-out), border-color .3s var(--ease-out);
}
.btn:hover{ transform:translateY(-2px) }
.btn-solid{ background:#f2f2f0; color:#000; font-weight:600 }
.btn-solid .arrow{
  width:1.75rem; height:1.75rem; border-radius:var(--radius-pill);
  background:#000; color:#fff;
  display:grid; place-items:center;
  margin-right:-.375rem;
}
.btn-solid .arrow svg{ width:.8rem; height:.8rem }
.btn-ghost{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:#fff; font-weight:500;
}
.btn-ghost:hover{ background:rgba(255,255,255,.1) }

/* --- StatCard --- */
.stat-card{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
  padding:1.5rem 1.75rem;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  max-width:18rem;
}
.stat-card .eyebrow-label{
  font-family:var(--font-mono); font-size:.6875rem;
  text-transform:uppercase; letter-spacing:.08em; color:var(--faint);
}
.stat-card .value{
  font-size:3rem; font-weight:700; letter-spacing:-.02em; line-height:1.15;
  background:linear-gradient(90deg,var(--particle-orange-soft),var(--particle-blue-soft));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-card .desc{
  margin-top:.5rem; font-size:.875rem; color:var(--muted); line-height:1.5;
}

/* --- ScrollRail --- */
.scroll-rail{
  position:fixed; right:1.5rem; top:50%; transform:translateY(-50%);
  width:2px; height:6rem;
  background:rgba(255,255,255,.15); border-radius:var(--radius-pill);
  z-index:40; pointer-events:none;
}
.scroll-rail .thumb{
  position:absolute; left:0; top:0%;
  width:100%; height:20%;
  background:#fff; border-radius:var(--radius-pill);
}

/* --- SectionEyebrow --- */
.section-eyebrow{
  font-family:var(--font-mono); font-size:.75rem;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--particle-orange-soft);
  display:inline-flex; align-items:center; gap:.5rem;
}
.section-eyebrow::before{
  content:""; width:.375rem; height:.375rem;
  border-radius:var(--radius-pill); background:currentColor;
}

/* ============================================================
   Reveal utilities
   ============================================================ */
html.js [data-reveal]{
  opacity:0; transform:translateY(10px);
  transition:opacity .9s var(--ease-reveal), transform .9s var(--ease-reveal);
}
html.js .is-in [data-reveal],
html.js [data-reveal].is-in{ opacity:1; transform:none }

/* line reveals: <h1 class="lines"><span class="line"><span>…</span></span></h1> */
.lines .line{ display:block; overflow:hidden }
.lines .line > span{ display:block }
html.js .lines .line > span{
  transform:translateY(110%); opacity:0;
  transition:transform .9s var(--ease-reveal), opacity .9s var(--ease-reveal);
}
html.js .is-in .lines .line > span,
html.js .lines.is-in .line > span{ transform:none; opacity:1 }
.lines .line:nth-child(1) > span{ transition-delay:0ms }
.lines .line:nth-child(2) > span{ transition-delay:100ms }
.lines .line:nth-child(3) > span{ transition-delay:200ms }
/* delay helpers */
.d-200{ transition-delay:.2s !important }
.d-300{ transition-delay:.3s !important }
.d-400{ transition-delay:.4s !important }
.d-500{ transition-delay:.5s !important }
.d-600{ transition-delay:.6s !important }

/* ============================================================
   Home — particle scene + beats
   ============================================================ */
.scene-canvas{
  position:fixed; inset:0; z-index:1; pointer-events:none;
}
.scene-canvas canvas{ width:100%; height:100% }

main{ position:relative; z-index:2 }

/* Hero */
.hero{
  height:100vh; position:relative;
  display:grid; place-items:center; text-align:center;
  overflow:hidden;
  padding:0 2rem;
}
.hero-inner{ display:flex; flex-direction:column; align-items:center }
.hero h1{
  max-width:20ch; font-size:3.5rem; font-weight:600;
  letter-spacing:-.02em; line-height:1.05;
  margin-top:1.5rem;
}
.hero .subhead{
  max-width:34ch; margin-top:1.5rem;
  font-size:1.0625rem; color:var(--muted); line-height:1.6;
}
.cta-row{
  display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap;
  margin-top:2rem;
}

/* Scene beats */
.scene-beat{ position:relative; height:150vh }
.scene-beat.tall{ height:200vh }
.beat-sticky{
  position:sticky; top:0; height:100vh;
  display:grid; place-items:center;
  padding:0 2rem;
  overflow:hidden;
}

/* Stats / helix */
.stats-row{
  width:100%; max-width:var(--container-shell);
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.5rem; align-items:center;
  justify-items:center;
}
html.js .stat-card[data-slide]{
  opacity:0;
  transition:opacity .9s var(--ease-reveal), transform .9s var(--ease-reveal);
}
html.js .stat-card[data-slide="left"]{ transform:translateX(-40px) }
html.js .stat-card[data-slide="right"]{ transform:translateX(40px) }
html.js .stat-card[data-slide="up"]{ transform:translateY(40px) }
html.js .stat-card.is-in{ opacity:1; transform:none }

/* Growth wave */
.growth-grid{
  width:100%; max-width:var(--container-shell);
  display:grid; grid-template-columns:1.2fr 1fr;
  gap:3rem; align-items:center;
}
.growth-grid h2{
  max-width:14ch; font-size:2.75rem; font-weight:600;
  letter-spacing:-.01em; line-height:1.1;
  margin-top:1.25rem;
}
.growth-copy p{
  max-width:32ch; font-size:1rem; color:var(--muted); line-height:1.6;
}
.growth-copy .cta-row{ justify-content:flex-start }

/* Black hole caption */
.focus-caption{
  position:absolute; bottom:3rem; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:.75rem;
  text-transform:uppercase; letter-spacing:.08em; color:var(--faint);
  white-space:nowrap;
  opacity:0;
}

/* Ecosystem */
.eco-inner{
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.eco-inner h2{
  max-width:18ch; font-size:2.75rem; font-weight:600;
  letter-spacing:-.01em; line-height:1.1;
  margin-top:1.5rem;
}
.eco-inner p{
  max-width:40ch; margin:1.5rem auto 0;
  font-size:1rem; color:var(--muted); line-height:1.6;
}

/* ============================================================
   Static pages (Services / About)
   ============================================================ */
.page-hero{
  position:relative;
  padding:8rem 2rem 4rem;
  text-align:center;
  overflow:hidden;
}
.page-hero .hero-inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center }
.page-hero h1{
  max-width:20ch; font-size:2.75rem; font-weight:600;
  letter-spacing:-.02em; line-height:1.1;
  margin-top:1.5rem;
}
.page-hero .subhead{
  max-width:40ch; margin-top:1.5rem;
  font-size:1.0625rem; color:var(--muted); line-height:1.6;
}
.ambient-canvas{
  position:absolute; inset:0; z-index:0; pointer-events:none;
}
.ambient-canvas canvas{ width:100%; height:100% }

/* Services grid */
.services-grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1.5rem;
  max-width:var(--container-shell);
  margin:2rem auto; padding:0 2rem;
  position:relative; z-index:2;
}
.service-card{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:1.25rem;
  padding:2rem;
  display:flex; flex-direction:column; gap:1rem;
  transition:transform .35s var(--ease-out), border-color .35s var(--ease-out);
}
.service-card:hover{ transform:translateY(-6px); border-color:rgba(255,255,255,.2) }
.service-card svg{ width:2rem; height:2rem; color:var(--particle-orange-soft) }
.service-card h3{ font-size:1.375rem; font-weight:600 }
.service-card p{ color:var(--muted); line-height:1.6; flex:1 }
.service-card .learn-more{
  font-size:.875rem; font-weight:500; color:var(--particle-orange-soft);
  display:inline-flex; gap:.35rem; align-items:center;
  transition:transform .3s var(--ease-out);
}
.service-card .learn-more:hover{ transform:translateX(4px) }

/* CTA band */
.cta-band{
  padding:6rem 2rem; text-align:center;
  border-top:1px solid var(--card-border);
  position:relative; z-index:2;
}
.cta-band h2{
  font-size:2.25rem; font-weight:600; letter-spacing:-.01em;
  margin-bottom:2rem;
}

/* About — story */
.story-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:3rem;
  max-width:var(--container-shell);
  margin:4rem auto; padding:0 2rem;
  position:relative; z-index:2;
}
.story-copy p{
  font-size:1rem; color:var(--muted); line-height:1.7;
}
.story-copy p + p{ margin-top:1.25rem }
.story-stats{ display:flex; flex-direction:column; gap:1.5rem; align-items:flex-start }

/* About — team */
.team-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
  max-width:var(--container-shell);
  margin:4rem auto; padding:0 2rem;
  position:relative; z-index:2;
}
.team-card{ text-align:center }
.team-card .avatar{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius-pill);
  aspect-ratio:1; width:100%; max-width:11rem;
  margin:0 auto 1rem;
  display:grid; place-items:center;
  font-size:1.75rem; font-weight:600; color:var(--faint);
  background-image:radial-gradient(circle at 30% 25%, rgba(126,163,255,.12), transparent 60%),
                   radial-gradient(circle at 70% 80%, rgba(255,148,102,.1), transparent 60%);
}
.team-card .name{ font-weight:600; font-size:1rem }
.team-card .role{ font-size:.8125rem; color:var(--muted); margin-top:.25rem }

.section-head{
  max-width:var(--container-shell);
  margin:5rem auto 0; padding:0 2rem;
  position:relative; z-index:2;
}
.section-head h2{
  font-size:2rem; font-weight:600; letter-spacing:-.01em; margin-top:1rem;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  background:#000;
  border-top:1px solid var(--card-border);
  padding:4rem 2rem 2rem;
  position:relative; z-index:2;
}
.footer-cols{
  display:grid; grid-template-columns:2fr 1fr 1fr;
  gap:3rem;
}
.footer-brand .wordmark{ margin-bottom:1rem }
.footer-brand p{ font-size:.875rem; color:var(--muted); max-width:26ch; line-height:1.6 }
.footer-col h4{
  font-family:var(--font-mono); font-size:.6875rem;
  text-transform:uppercase; letter-spacing:.08em; color:var(--faint);
  margin-bottom:1rem; font-weight:500;
}
.footer-col li{ margin-bottom:.6rem }
.footer-col a, .footer-col button{
  font-size:.9rem; color:var(--muted);
  transition:color .25s var(--ease-out), transform .25s var(--ease-out);
  display:inline-block;
}
.footer-col a:hover, .footer-col button:hover{ color:#fff; transform:translateX(4px) }
.social-chips{ display:flex; gap:.5rem; flex-wrap:wrap }
.social-chips a{
  border:1px solid rgba(255,255,255,.15); border-radius:var(--radius-pill);
  padding:.4rem 1rem; font-size:.75rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
  transition:background .25s var(--ease-out), transform .25s var(--ease-out), color .25s var(--ease-out);
}
.social-chips a:hover{ background:rgba(255,255,255,.08); transform:scale(1.04); color:#fff }
.legal-bar{
  border-top:1px solid var(--card-border);
  margin-top:3rem; padding-top:1.5rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.75rem; color:var(--faint);
}
.legal-bar a{ transition:color .25s }
.legal-bar a:hover{ color:#fff }
.legal-links{ display:flex; gap:1.25rem }

/* ============================================================
   Menu overlay
   ============================================================ */
.menu-overlay{
  position:fixed; inset:0; z-index:100;
  background:#000; color:#fff;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility 0s linear .35s;
}
.menu-overlay.open{
  opacity:1; visibility:visible;
  transition:opacity .35s ease;
}
.menu-topbar{
  padding:1.5rem 2rem;
  display:flex; align-items:center; justify-content:space-between;
}
.menu-nav{
  flex:1; display:flex; flex-direction:column; justify-content:center;
  padding:0 2rem;
}
.menu-nav ul{ max-width:var(--container-shell); width:100%; margin-inline:auto }
.menu-nav li{
  border-top:1px solid var(--card-border);
  opacity:0; transform:translateY(1rem);
  transition:opacity .5s var(--ease-reveal), transform .5s var(--ease-reveal);
}
.menu-nav li:first-child{ border-top:none }
.menu-overlay.open .menu-nav li{ opacity:1; transform:none }
.menu-nav a{
  display:flex; align-items:baseline; gap:1.5rem;
  padding-block:.5rem;
  font-size:3rem; font-weight:600; letter-spacing:-.02em;
  color:var(--muted);
  transition:color .3s var(--ease-out);
}
.menu-nav a:hover, .menu-nav a:focus-visible{ color:#fff }
.menu-nav .idx{
  font-family:var(--font-mono); font-size:.8125rem; font-weight:400;
  color:var(--faint);
  transition:color .3s var(--ease-out);
}
.menu-nav a:hover .idx, .menu-nav a:focus-visible .idx{ color:var(--particle-orange-soft) }
.menu-bottombar{
  border-top:1px solid var(--card-border);
  padding:1.5rem 2rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.75rem; color:var(--faint);
}
.menu-bottombar .socials{ display:flex; gap:1.5rem }
.menu-bottombar a{ display:inline-block; transition:transform .25s var(--ease-out), color .25s var(--ease-out) }
.menu-bottombar a:hover{ transform:translateX(4px); color:#fff }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1024px){
  .growth-grid{ grid-template-columns:1fr; gap:2rem }
  .growth-grid h2{ font-size:2.25rem }
  .story-grid{ grid-template-columns:1fr }
  .stats-row{ grid-template-columns:1fr 1fr }
  .team-grid{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:768px){
  .hero h1{ font-size:2.25rem }
  .eco-inner h2, .growth-grid h2{ font-size:1.875rem }
  .page-hero h1{ font-size:2rem }
  .services-grid{ grid-template-columns:1fr }
  .stats-row{ grid-template-columns:1fr; gap:1rem }
  .stat-card{ max-width:22rem }
  .menu-nav a{ font-size:2rem }
  .footer-cols{ grid-template-columns:1fr; gap:2rem }
}
@media (max-width:640px){
  .team-grid{ grid-template-columns:1fr }
  .cta-band h2{ font-size:1.75rem }
}
@media (max-width:480px){
  .menu-trigger .label{ display:none }
  .menu-trigger{ padding:.5rem .75rem }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
  html{ scroll-behavior:auto }
  html.js body{ opacity:1 }
  html.js [data-reveal],
  html.js .lines .line > span,
  html.js .stat-card[data-slide],
  .menu-nav li{ opacity:1 !important; transform:none !important }
}