/* ============================================================
   MADRIGAL — Liquid Intelligence
   ============================================================ */

:root{
  --bg:#060A14;
  --bg2:#0A1226;
  --surface:rgba(18,30,56,0.55);
  --hairline:rgba(120,170,255,0.14);
  --cyan:#23B4EC;
  --blue:#1379C2;
  --deep:#0C5FB0;
  --accent:#6E8BFF;
  --text:#EAF2FF;
  --muted:#9DB2D8;

  --grad:linear-gradient(120deg,#23B4EC 0%,#1379C2 46%,#0C5FB0 72%,#6E8BFF 100%);
  /* On-dark text variant: bright cyan/accent dominate; the deep #0C5FB0 never
     terminates a text gradient (which measured only ~3:1 on the page bg). */
  --grad-text:linear-gradient(120deg,#56C8F5 0%,#23B4EC 40%,#4D8FE6 70%,#8AA0FF 100%);
  --glow:0 0 40px rgba(35,180,236,0.35);
  --glow-soft:0 0 24px rgba(35,180,236,0.30);

  --maxw:1200px;
  --r:18px;
  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:88px;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:var(--cyan);text-decoration:none;transition:color .2s,opacity .2s;}
a:hover{color:#7fd6ff;}

::selection{background:rgba(35,180,236,0.35);color:#fff;}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--bg2);color:var(--text);padding:.7rem 1.1rem;border-radius:0 0 10px 0;
}
.skip-link:focus{left:0;}

/* Visually-hidden but available to assistive tech (e.g. canvas descriptions). */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:6px;
}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.2rem,4vw,2.5rem);}

/* ---------- Gradient text ---------- */
.gradient-text{
  background:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.gradient-text--drift{
  background-size:220% 220%;
  -webkit-background-clip:text;background-clip:text;
  animation:hueDrift 9s ease-in-out infinite;
  text-shadow:0 0 38px rgba(35,180,236,0.25);
  filter:drop-shadow(0 0 22px rgba(35,180,236,0.20));
}
@keyframes hueDrift{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:0 0 1.1rem;
}
.index{
  font-family:var(--font-mono);
  font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cyan);margin:0 0 1.2rem;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:500;font-size:.98rem;
  padding:.9rem 1.6rem;border-radius:999px;border:1px solid transparent;
  cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s;
  letter-spacing:.01em;
}
.btn--gradient{
  background:var(--grad);background-size:160% 160%;color:#fff;
  box-shadow:var(--glow);
}
.btn--gradient:hover{transform:translateY(-2px);box-shadow:0 0 54px rgba(35,180,236,0.55);background-position:100% 50%;color:#fff;}
.btn--ghost{
  background:var(--surface);color:var(--text);
  border:1px solid var(--hairline);backdrop-filter:blur(10px);
}
.btn--ghost:hover{transform:translateY(-2px);box-shadow:var(--glow-soft);border-color:rgba(120,170,255,0.4);color:var(--text);}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(6,10,20,0.55);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .3s,background .3s;
}
.nav.scrolled{
  border-bottom-color:var(--hairline);
  background:rgba(6,10,20,0.8);
  box-shadow:0 8px 40px rgba(0,0,0,0.4);
}
.nav__inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;gap:1.5rem;
  padding:.85rem clamp(1.2rem,4vw,2.5rem);
}
.nav__logo{
  height:50px;width:auto;
  /* Keep the original blue brand logo; lift it off the near-black nav with a soft cyan glow. */
  filter:drop-shadow(0 0 16px rgba(35,180,236,0.45)) drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.nav__links{display:flex;gap:1.6rem;margin:0 auto;}
.nav__links a{
  color:var(--muted);font-size:.95rem;font-weight:500;position:relative;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;
  background:var(--grad);transition:width .3s;border-radius:2px;
}
.nav__links a:hover{color:var(--text);}
.nav__links a:hover::after{width:100%;}
.nav__cta{padding:.65rem 1.3rem;font-size:.92rem;}

.nav__toggle{
  display:none;flex-direction:column;gap:5px;
  background:none;border:0;cursor:pointer;padding:8px;margin-left:auto;
}
.nav__toggle span{width:24px;height:2px;background:var(--text);border-radius:2px;transition:transform .3s,opacity .3s;}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-menu{
  display:none;
  border-top:1px solid var(--hairline);
  background:rgba(6,10,20,0.95);backdrop-filter:blur(18px);
  /* visibility:hidden removes the collapsed links from the tab order (belt-and-braces
     alongside the inert attribute toggled in JS). */
  max-height:0;overflow:hidden;visibility:hidden;transition:max-height .35s ease,visibility 0s linear .35s;
}
.mobile-menu.open{max-height:min(480px,85vh);overflow-y:auto;visibility:visible;transition:max-height .35s ease,visibility 0s;}
.mobile-menu nav{display:flex;flex-direction:column;padding:1rem clamp(1.2rem,4vw,2.5rem) 1.6rem;gap:.3rem;}
.mobile-menu a{color:var(--text);padding:.85rem 0;font-size:1.05rem;border-bottom:1px solid rgba(120,170,255,0.08);}
.mobile-menu .btn{margin-top:1rem;}

/* ============================================================
   AURORA / BACKGROUND PLANES
   ============================================================ */
.aurora{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;}
/* Vignette: frame the hero by darkening the edges down to deep black so the
   focal blob behind the headline reads as a bright core rather than an even wash. */
.aurora::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 75% 70% at 32% 38%,transparent 0%,transparent 42%,rgba(4,7,15,0.55) 78%,#04070F 100%);
}
.blob{
  position:absolute;border-radius:50%;
  filter:blur(90px);opacity:.55;
  will-change:transform;
}
/* blob--1 is the focal hotspot: tighter, brighter, sits behind the headline. */
.blob--1{width:34vw;height:34vw;left:4vw;top:-6vw;background:radial-gradient(circle,#3FD0FF,#23B4EC 38%,transparent 68%);filter:blur(70px);opacity:.72;animation:drift1 26s ease-in-out infinite;}
/* The rest recede: larger, softer, lower opacity, deeper hues. */
.blob--2{width:46vw;height:46vw;right:-10vw;top:0;background:radial-gradient(circle,#6E8BFF,transparent 70%);opacity:.3;animation:drift2 32s ease-in-out infinite;}
.blob--3{width:44vw;height:44vw;left:16vw;bottom:-16vw;background:radial-gradient(circle,#0C5FB0,transparent 70%);opacity:.32;animation:drift3 30s ease-in-out infinite;}
.blob--4{width:34vw;height:34vw;right:12vw;bottom:-10vw;background:radial-gradient(circle,#1379C2,transparent 70%);opacity:.34;animation:drift1 36s ease-in-out infinite reverse;}
.blob--5{width:28vw;height:28vw;left:40vw;top:22vw;background:radial-gradient(circle,#0C5FB0,transparent 70%);opacity:.24;animation:drift2 28s ease-in-out infinite;}

@keyframes drift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(6vw,4vw) scale(1.12);}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-5vw,5vw) scale(1.08);}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(4vw,-4vw) scale(1.15);}}

.grid-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(rgba(120,170,255,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(120,170,255,0.06) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 80%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 80%);
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  padding:120px 0 60px;overflow:hidden;
}
.hero__dust{position:absolute;inset:0;z-index:1;pointer-events:none;}
/* Ambient network artwork behind the hero — subtle, never competes with the headline. */
.hero__accent{
  position:absolute;z-index:0;pointer-events:none;
  right:-6%;top:50%;transform:translateY(-50%);
  width:min(52vw,720px);height:auto;opacity:.4;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 55%,transparent 80%);
  mask-image:radial-gradient(ellipse at center,#000 55%,transparent 80%);
}
@media (max-width:980px){ .hero__accent{opacity:.22;right:-20%;width:90vw;} }
.hero__inner{
  position:relative;z-index:2;
  width:100%;max-width:var(--maxw);margin:0 auto;
  padding:0 clamp(1.2rem,4vw,2.5rem);
  display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;
}
.hero__title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.6rem,6.5vw,5.4rem);
  line-height:1.04;letter-spacing:-.02em;margin:0 0 1.4rem;
}
.hero__sub{font-size:clamp(1.1rem,2vw,1.4rem);font-weight:500;color:var(--text);margin:0 0 2rem;max-width:54ch;}
.hero__cta{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2.6rem;}
.hero__stats{
  list-style:none;margin:0;padding:1.6rem 0 0;
  border-top:1px solid var(--hairline);
  display:flex;flex-wrap:wrap;gap:2.4rem;
}
.hero__stats li{display:flex;flex-direction:column;}
.hero__stat-v{font-family:var(--font-display);font-weight:700;font-size:1.5rem;}
.hero__stat-l{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:.35rem;}

/* ---------- Intelligence Orbit ---------- */
.orbit{
  position:relative;aspect-ratio:1;width:100%;max-width:560px;margin:0 auto;
  display:grid;place-items:center;
}
.orbit canvas{position:absolute;inset:0;width:100%;height:100%;}
.orbit__core{
  position:relative;z-index:3;
  width:34%;aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle,rgba(35,180,236,0.28),rgba(10,18,38,0.6) 70%);
  box-shadow:0 0 60px rgba(35,180,236,0.45),inset 0 0 30px rgba(35,180,236,0.25);
  animation:coreBreath 4s ease-in-out infinite;
}
.orbit__core-mark{width:74%;filter:drop-shadow(0 0 18px rgba(35,180,236,0.75)) drop-shadow(0 0 6px rgba(35,180,236,0.5));}
@keyframes coreBreath{0%,100%{box-shadow:0 0 50px rgba(35,180,236,0.4),inset 0 0 26px rgba(35,180,236,0.22);}50%{box-shadow:0 0 80px rgba(35,180,236,0.6),inset 0 0 36px rgba(35,180,236,0.32);}}

.orbit__tooltip{
  position:absolute;z-index:5;pointer-events:none;
  background:rgba(10,18,38,0.92);border:1px solid var(--hairline);
  color:var(--text);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;
  padding:.5rem .8rem;border-radius:10px;white-space:nowrap;
  opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;
  box-shadow:var(--glow-soft);
}
.orbit__tooltip.show{opacity:1;transform:translateY(0);}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  position:relative;overflow:hidden;padding:1.6rem 0;
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  background:var(--bg2);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee__track{display:flex;white-space:nowrap;animation:scrollx 38s linear infinite;}
.marquee__track span{
  font-family:var(--font-mono);font-weight:500;font-size:1rem;letter-spacing:.12em;
  color:var(--muted);padding-right:.5rem;
}
@keyframes scrollx{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{position:relative;padding:clamp(4.5rem,9vw,8rem) 0;}
.section--alt{background:var(--bg2);}
.section--flagship{
  background:radial-gradient(ellipse 120% 80% at 50% 0%,#0A1430 0%,#04070F 70%);
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
}
.section__head{max-width:880px;margin:0 auto 3.5rem;}
.section--cta .section__head,.section__cta{text-align:center;}
.section__title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.06;letter-spacing:-.02em;
  margin:0 0 1.2rem;
}
/* Crescendo: the flagship AI section is the visual peak — bump its title noticeably
   above the others and let its head breathe wider than the standard column. */
.section--flagship .section__head{max-width:980px;}
.section--flagship .section__title{font-size:clamp(2.4rem,5.6vw,4.4rem);}
/* Quiet vs loud rhythm: the manifesto and contact read as large centered statements;
   the numbered sections stay left-aligned working blocks. */
.manifesto .section__title{font-size:clamp(2.2rem,5vw,4rem);}
/* Oversized translucent index behind numbered section heads for depth/variety. */
.section__head{position:relative;}
.index{position:relative;display:inline-block;}
.index::before{
  content:attr(data-num);
  position:absolute;left:-.1em;top:-1.7em;
  font-family:var(--font-display);font-weight:700;font-size:5.5rem;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(120,170,255,0.14);
  pointer-events:none;white-space:nowrap;
}
@media (max-width:760px){.index::before{display:none;}}
.section__lead{font-size:clamp(1.05rem,1.8vw,1.3rem);color:var(--text);font-weight:500;margin:0 0 1.2rem;}
.section__body{color:var(--muted);font-size:1.04rem;max-width:72ch;margin:0;}
.section__body--center{margin:0 auto;}
.section__cta{margin-top:3rem;}

/* Inline stat bands hold a variable number of items (3 or 4); use a centered flex
   row so an odd count (e.g. the 3-item Global band) stays centered, not left-shifted.
   Double-class selector (.band__grid.band__grid--inline) raises specificity so it
   beats the base .band__grid grid rule that appears later in this file. */
.band__grid.band__grid--inline{
  margin-top:4rem;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:2rem 3.2rem;
}
.band__grid.band__grid--inline .band__item{flex:0 1 220px;}

/* ---------- Manifesto cards ---------- */
.manifesto__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem;}

/* ---------- Glass cards ---------- */
.glass-card{
  position:relative;
  background:
    linear-gradient(160deg,rgba(35,90,170,0.16),rgba(18,30,56,0.5) 55%),
    var(--surface);
  border:1px solid rgba(120,170,255,0.2);
  border-radius:var(--r);padding:2rem;backdrop-filter:blur(12px);
  /* Crafted resting state: top-edge highlight + soft outer shadow even before hover. */
  box-shadow:inset 0 1px 0 rgba(120,170,255,0.18),0 10px 30px rgba(0,0,0,0.3);
  transition:transform .3s,box-shadow .3s,border-color .3s;
  transform-style:preserve-3d;overflow:hidden;
}
.glass-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(35,180,236,0.16),transparent 60%);
  opacity:0;transition:opacity .3s;
}
.glass-card:hover{border-color:rgba(120,170,255,0.5);box-shadow:inset 0 1px 0 rgba(120,170,255,0.28),0 18px 60px rgba(0,0,0,0.45),var(--glow-soft);}
.glass-card:hover::before{opacity:1;}
.glass-card h3{font-family:var(--font-display);font-weight:500;font-size:1.25rem;margin:0 0 .7rem;}
.glass-card p{color:var(--muted);font-size:.98rem;margin:0;}

/* ============================================================
   AI GRID
   ============================================================ */
.ai-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;}
.ai-card{display:flex;flex-direction:column;gap:1rem;}
.ai-card__glyph{
  width:54px;height:54px;border-radius:14px;
  display:grid;place-items:center;
  background:rgba(35,180,236,0.08);border:1px solid var(--hairline);
  box-shadow:var(--glow-soft);
}
.ai-card__glyph svg{width:30px;height:30px;}
.ai-card__glyph svg [stroke]{stroke:var(--cyan);}
.ai-card .tag{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);
}
.manifesto-line{
  font-family:var(--font-display);font-weight:700;text-align:center;
  font-size:clamp(1.8rem,4vw,3rem);margin:4rem 0 0;
}

/* ---------- Pitch banner ("any software, your idea -> reality") ---------- */
.pitch{
  margin-top:3.5rem;text-align:center;
  padding:clamp(2.2rem,5vw,3.5rem) clamp(1.2rem,4vw,3.5rem);
  border-radius:var(--r);
  background:
    radial-gradient(700px circle at 50% 0%,rgba(35,180,236,0.14),transparent 60%),
    linear-gradient(160deg,rgba(35,90,170,0.18),rgba(18,30,56,0.5) 60%),
    var(--surface);
  border:1px solid rgba(120,170,255,0.24);
  box-shadow:inset 0 1px 0 rgba(120,170,255,0.2),0 18px 60px rgba(0,0,0,0.4);
}
.pitch .manifesto-line{margin:.6rem 0 1.1rem;}
.pitch__sub{color:var(--text);max-width:66ch;margin:0 auto;font-size:clamp(1rem,1.4vw,1.12rem);line-height:1.75;opacity:.92;}
.pitch .section__cta{margin-top:2rem;}

/* ============================================================
   SERVICE ROWS
   ============================================================ */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline);}
.row{
  border-bottom:1px solid var(--hairline);
  transition:background .3s;
}
.row__top{
  /* Real <button> reset so the accordion is keyboard-operable yet looks unchanged. */
  width:100%;background:none;border:0;cursor:pointer;
  font:inherit;color:inherit;text-align:left;
  padding:1.8rem 0;
  display:grid;grid-template-columns:auto 1fr auto;gap:1.5rem;align-items:baseline;
}
.row__idx{font-family:var(--font-mono);font-size:.85rem;color:var(--cyan);}
.row__title{font-family:var(--font-display);font-weight:500;font-size:clamp(1.4rem,3vw,2.2rem);line-height:1.1;margin:0;transition:color .3s;}
.row__plus{font-family:var(--font-display);font-size:1.6rem;color:var(--muted);transition:transform .3s,color .3s;line-height:1;}
.row:hover .row__title{color:#7fd6ff;}
.row:hover{background:linear-gradient(90deg,rgba(35,180,236,0.06),transparent 60%);}
.row__body{
  max-height:0;overflow:hidden;transition:max-height .4s ease;
  color:var(--muted);
}
.row__body p{margin:1rem 0 0;max-width:70ch;padding-left:2.2rem;}
.row.open .row__plus{transform:rotate(45deg);color:var(--cyan);}
.row.open .row__body{max-height:420px;}
/* Keyboard focus for the accordion trigger (it's a reset <button>). */
.row__top:focus-visible{outline:2px solid var(--cyan);outline-offset:-4px;border-radius:8px;}

/* ============================================================
   WHY GRID
   ============================================================ */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;}

/* ============================================================
   PROCESS FLOW
   ============================================================ */
.flow{
  list-style:none;margin:0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;
}
.flow::before{
  content:"";position:absolute;top:18px;left:6%;right:6%;height:2px;
  background:rgba(120,170,255,0.15);z-index:0;
}
.flow__fill{
  position:absolute;top:18px;left:6%;height:2px;width:0;
  background:var(--grad);z-index:1;box-shadow:var(--glow);transition:width 1.2s ease;
}
.flow__node{position:relative;z-index:2;padding-top:2.6rem;}
.flow__dot{
  position:absolute;top:8px;left:0;width:20px;height:20px;border-radius:6px;
  background:var(--bg);border:2px solid var(--cyan);box-shadow:var(--glow-soft);
  transform:rotate(45deg);
}
.flow__idx{font-family:var(--font-mono);font-size:.8rem;color:var(--cyan);letter-spacing:.1em;}
.flow__title{font-family:var(--font-display);font-weight:500;font-size:1.3rem;margin:.4rem 0 .6rem;}
.flow__node p{color:var(--muted);font-size:.95rem;margin:0;}

/* ============================================================
   GLOBAL REACH
   ============================================================ */
.reach{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;}
.reach__map{
  position:relative;aspect-ratio:16/11;border-radius:var(--r);overflow:hidden;
  background:radial-gradient(ellipse at 50% 50%,#0A1430,#05080F);
  border:1px solid var(--hairline);box-shadow:inset 0 0 60px rgba(0,0,0,0.5);
}
.reach__map canvas{width:100%;height:100%;display:block;}
.reach__cards{display:flex;flex-direction:column;gap:1rem;}
.reach__cards .glass-card{padding:1.4rem 1.6rem;}
.reach__cards h3{font-size:1.1rem;}

/* ============================================================
   CONTACT
   ============================================================ */
.section--cta{
  background:radial-gradient(ellipse 100% 80% at 50% 50%,#0A1530 0%,#05080F 75%);
  text-align:center;overflow:hidden;
}
.section--cta .container{position:relative;z-index:2;}
.aurora--soft .blob{opacity:.4;}
.cta-core{
  width:120px;height:120px;margin:0 auto 2rem;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle,rgba(35,180,236,0.3),transparent 70%);
  box-shadow:0 0 70px rgba(35,180,236,0.5);
  animation:coreBreath 4s ease-in-out infinite;
}
.cta-core img{width:84px;filter:drop-shadow(0 0 20px rgba(35,180,236,0.75)) drop-shadow(0 0 6px rgba(35,180,236,0.5));}

.contact-form{
  max-width:760px;margin:3rem auto 0;text-align:left;
  display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;
}
.field{display:flex;flex-direction:column;gap:.5rem;}
.field--full{grid-column:1/-1;}
.field label{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.field input,.field textarea{
  background:rgba(10,18,38,0.6);border:1px solid var(--hairline);border-radius:12px;
  padding:.9rem 1rem;color:var(--text);font-family:var(--font-body);font-size:1rem;
  transition:border-color .25s,box-shadow .25s;resize:vertical;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--cyan);box-shadow:var(--glow-soft);}
.field input::placeholder,.field textarea::placeholder{color:#8294B8;}
.field input:invalid:not(:placeholder-shown){border-color:rgba(255,120,120,0.5);}
.contact-form__actions{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;}
.contact-form__note{font-family:var(--font-mono);font-size:.8rem;color:var(--muted);margin:0;}

.contact-meta{
  list-style:none;margin:3.5rem auto 0;padding:2rem 0 0;max-width:880px;
  border-top:1px solid var(--hairline);
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;text-align:left;
}
.contact-meta li{min-width:0;}
.contact-meta a,.contact-meta span:not(.contact-meta__k){overflow-wrap:anywhere;font-size:.95rem;}
.contact-meta__k{display:block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:.4rem;}
.tagline{font-family:var(--font-display);font-weight:700;font-size:clamp(1.4rem,3vw,2.2rem);margin:3.5rem 0 0;}

/* ============================================================
   LANGUAGE SWITCH
   ============================================================ */
.lang-switch{
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--font-mono);font-size:.82rem;letter-spacing:.06em;
}
.lang-switch__btn{
  background:none;border:0;cursor:pointer;padding:.2rem .35rem;
  color:var(--muted);font:inherit;border-radius:6px;
  transition:color .2s,text-shadow .2s;
}
.lang-switch__btn:hover{color:var(--text);}
.lang-switch__btn[aria-pressed="true"]{
  color:var(--cyan);text-shadow:0 0 14px rgba(35,180,236,.5);font-weight:700;
}
.lang-switch__sep{color:rgba(120,170,255,0.4);}
.lang-switch--mobile{
  margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(120,170,255,0.08);
  font-size:1rem;gap:.6rem;
}

/* ============================================================
   ANTHROPIC ACADEMY PILL + TRUST STRIP
   ============================================================ */
.academy-pill{
  display:inline-flex;align-items:center;gap:.55rem;
  margin:0 0 2rem;padding:.5rem 1rem .5rem .85rem;
  border-radius:999px;border:1px solid rgba(120,170,255,0.3);
  background:linear-gradient(120deg,rgba(35,180,236,0.12),rgba(110,139,255,0.08));
  box-shadow:var(--glow-soft);
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;
  color:var(--text);
}
.academy-pill__dot{
  width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  background:var(--cyan);box-shadow:0 0 10px rgba(35,180,236,.9);
  animation:academyPulse 2.4s ease-in-out infinite;
}
@keyframes academyPulse{0%,100%{opacity:.55;transform:scale(.85);}50%{opacity:1;transform:scale(1.15);}}
.academy-pill--inline{margin:1.6rem 0 0;}

.trust-strip{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 1.6rem;
  margin-top:3rem;padding:1.5rem clamp(1.2rem,3vw,2rem);
  border-radius:var(--r);
  background:linear-gradient(160deg,rgba(35,90,170,0.16),rgba(18,30,56,0.5) 60%),var(--surface);
  border:1px solid rgba(120,170,255,0.24);
  box-shadow:inset 0 1px 0 rgba(120,170,255,0.18),0 12px 40px rgba(0,0,0,0.3);
}
.trust-strip__badge{
  display:inline-flex;align-items:center;gap:.6rem;flex:0 0 auto;
  padding:.6rem 1.05rem;border-radius:999px;
  background:rgba(35,180,236,0.1);border:1px solid rgba(120,170,255,0.4);
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.08em;
  color:var(--cyan);text-transform:uppercase;white-space:nowrap;
  box-shadow:var(--glow-soft);
}
.trust-strip__badge svg{width:18px;height:18px;flex:0 0 auto;}
.trust-strip__text{margin:0;color:var(--muted);font-size:.98rem;flex:1 1 280px;min-width:0;}

/* ============================================================
   SECTION FIGURES (photography accents)
   ============================================================ */
.section-figure{
  margin:0 0 3rem;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--hairline);
  box-shadow:inset 0 1px 0 rgba(120,170,255,0.18),0 18px 60px rgba(0,0,0,0.4);
  position:relative;
}
.section-figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,10,20,0.15),rgba(6,10,20,0.55)),
    radial-gradient(120% 80% at 50% 0%,rgba(35,180,236,0.12),transparent 60%);
}
.section-figure img{
  width:100%;height:clamp(220px,32vw,420px);object-fit:cover;display:block;
  filter:saturate(.85) brightness(.92);
  transition:filter .5s ease,transform .6s ease;
}
.section-figure:hover img{filter:saturate(1.05) brightness(1);transform:scale(1.03);}
.figure-row{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-bottom:3rem;}
.figure-row .section-figure{margin:0;}
.section-figure--split img{height:clamp(180px,24vw,300px);}

/* ============================================================
   OFFICE CARDS (Global Reach)
   ============================================================ */
.offices{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem;
}
.office-card{
  position:relative;border-radius:var(--r);overflow:hidden;
  border:1px solid rgba(120,170,255,0.2);
  background:var(--surface);
  box-shadow:inset 0 1px 0 rgba(120,170,255,0.18),0 12px 40px rgba(0,0,0,0.35);
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.office-card:hover{
  transform:translateY(-4px);
  border-color:rgba(120,170,255,0.5);
  box-shadow:inset 0 1px 0 rgba(120,170,255,0.28),0 20px 60px rgba(0,0,0,0.5),var(--glow-soft);
}
.office-card__media{position:relative;height:170px;overflow:hidden;}
.office-card__media img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.8) brightness(.85);
  transition:filter .5s,transform .6s;
}
.office-card:hover .office-card__media img{filter:saturate(1.05) brightness(1);transform:scale(1.06);}
.office-card__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,10,20,0.1),rgba(6,10,20,0.85));
}
.office-card__skyline{
  position:absolute;left:1.1rem;bottom:.7rem;width:96px;height:auto;z-index:2;
  opacity:.92;filter:drop-shadow(0 0 10px rgba(35,180,236,.5));
}
.office-card__body{padding:1.3rem 1.4rem 1.5rem;}
.office-card__role{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);margin:0 0 .35rem;
}
.office-card__city{font-family:var(--font-display);font-weight:500;font-size:1.3rem;margin:0 0 .5rem;}
.office-card__line{color:var(--muted);font-size:.92rem;margin:0;}

/* ============================================================
   SCALE BAND
   ============================================================ */
.band{padding:clamp(3rem,6vw,5rem) 0;background:var(--bg2);position:relative;}
.band__divider{height:2px;width:120px;margin:0 auto 3rem;background:var(--grad);box-shadow:var(--glow);border-radius:2px;}
.band__grid{
  list-style:none;margin:0 auto;padding:0;max-width:var(--maxw);
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:center;
  padding-left:clamp(1.2rem,4vw,2.5rem);padding-right:clamp(1.2rem,4vw,2.5rem);
}
.band__item{display:flex;flex-direction:column;gap:.6rem;min-width:0;}
.band__v{font-family:var(--font-display);font-weight:700;font-size:clamp(1.8rem,4vw,2.8rem);line-height:1;}
.band__l{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{position:relative;background:#04070F;border-top:1px solid var(--hairline);overflow:hidden;}
.footer__stars{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;}
.footer__inner{position:relative;z-index:1;display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:2rem;padding-top:4rem;padding-bottom:3rem;}
.footer__logo{height:48px;width:auto;filter:drop-shadow(0 0 14px rgba(35,180,236,0.4)) drop-shadow(0 1px 2px rgba(0,0,0,0.5));margin-bottom:1rem;}
.footer__brand p{color:var(--muted);max-width:34ch;font-size:.95rem;}
.footer__col h3{font-family:var(--font-display);font-weight:600;font-size:1rem;margin:0 0 1rem;}
.footer__col a{display:block;color:var(--muted);font-size:.92rem;padding:.3rem 0;}
.footer__col a:hover{color:var(--cyan);}
.footer__addr{color:var(--muted);font-size:.92rem;margin:0 0 .8rem;}
.footer__social{display:flex;gap:.7rem;margin-top:1.2rem;}
.footer__social a{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--hairline);transition:transform .25s,box-shadow .25s;
}
.footer__social a:hover{transform:translateY(-2px);box-shadow:var(--glow-soft);}
.footer__social svg{width:18px;height:18px;fill:var(--muted);transition:fill .25s;}
.footer__social a:hover svg{fill:var(--cyan);}
.footer__bar{
  position:relative;z-index:1;border-top:1px solid var(--hairline);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;
  max-width:var(--maxw);margin:0 auto;padding:1.4rem clamp(1.2rem,4vw,2.5rem);
}
.footer__bar p{margin:0;color:var(--muted);font-size:.85rem;}
.footer__fine{font-family:var(--font-mono);letter-spacing:.04em;}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease;}
.reveal.in{opacity:1;transform:none;}

/* Staggered reveal: card/list children cascade in rather than popping together,
   which reads as deliberate choreography. Children enter the viewport roughly
   in sync (same grid), so the per-item delay produces the cascade. */
.manifesto__cards>.reveal:nth-child(2),.ai-grid>.reveal:nth-child(2),.why-grid>.reveal:nth-child(2),.offices>.reveal:nth-child(2),#serviceRows>.reveal:nth-child(2){transition-delay:.07s;}
.manifesto__cards>.reveal:nth-child(3),.ai-grid>.reveal:nth-child(3),.why-grid>.reveal:nth-child(3),.offices>.reveal:nth-child(3),#serviceRows>.reveal:nth-child(3){transition-delay:.14s;}
.ai-grid>.reveal:nth-child(4),.why-grid>.reveal:nth-child(4),#serviceRows>.reveal:nth-child(4){transition-delay:.21s;}
.ai-grid>.reveal:nth-child(5),#serviceRows>.reveal:nth-child(5){transition-delay:.28s;}
.ai-grid>.reveal:nth-child(6),#serviceRows>.reveal:nth-child(6){transition-delay:.35s;}
.ai-grid>.reveal:nth-child(7){transition-delay:.42s;}
.ai-grid>.reveal:nth-child(8){transition-delay:.49s;}
.ai-grid>.reveal:nth-child(9){transition-delay:.56s;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .nav__links,.nav__cta{display:none;}
  .nav__toggle{display:flex;}
  .mobile-menu{display:block;}
  .hero__inner{grid-template-columns:1fr;gap:3.5rem;}
  .orbit{max-width:440px;}
  .manifesto__cards,.ai-grid,.why-grid{grid-template-columns:1fr;}
  .reach{grid-template-columns:1fr;}
  .flow{grid-template-columns:1fr 1fr;}
  .flow::before,.flow__fill{display:none;}
  .band__grid,.band__grid--inline{grid-template-columns:1fr 1fr;}
  .footer__inner{grid-template-columns:1fr 1fr;}
}
/* Tablet tuning (portrait tablets ~768px sit between the 980 and 600 breakpoints). */
@media (max-width:768px){
  .band__grid,.band__grid--inline{gap:1rem;}
  .band__v{overflow-wrap:break-word;}
  .contact-form{grid-template-columns:1fr;}
  .contact-meta{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .contact-meta{grid-template-columns:1fr;}
  .band__grid,.flow{grid-template-columns:1fr;}
  .footer__inner{grid-template-columns:1fr;}
  .hero__stats{gap:1.4rem;}
  /* Prevent the service-row title from forcing horizontal overflow on small phones:
     let the 1fr track shrink and the long words wrap. */
  .row__top{gap:.8rem;}
  .row__title{min-width:0;overflow-wrap:anywhere;}
  /* Long service descriptions can exceed the desktop cap on a narrow column. */
  .row.open .row__body{max-height:70vh;overflow-y:auto;}
  .band__v{font-size:clamp(1.5rem,7vw,2.2rem);}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  .blob{animation:none;}
  .marquee__track{animation:none;}
  .gradient-text--drift{animation:none;}
  .orbit__core,.cta-core{animation:none;}
  .reveal{opacity:1;transform:none;}
  /* Static fallback for the canvas-driven reach map (no animation = no canvas paint):
     fake a glowing Hong Kong hub + global nodes so the frame is never empty. */
  .reach__map{background:
    radial-gradient(circle at 50% 52%, rgba(35,180,236,.6) 0, rgba(35,180,236,.14) 8%, transparent 15%),
    radial-gradient(circle at 26% 36%, rgba(110,139,255,.22) 0, transparent 20%),
    radial-gradient(circle at 78% 40%, rgba(19,121,194,.22) 0, transparent 20%),
    radial-gradient(circle at 70% 70%, rgba(35,180,236,.18) 0, transparent 18%),
    radial-gradient(ellipse at 50% 50%,#0A1430,#05080F);}
  .reach__map::after{content:"HONG KONG · SWITZERLAND · ITALY";position:absolute;left:50%;top:60%;
    transform:translateX(-50%);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;
    color:var(--cyan);opacity:.9;white-space:nowrap;text-shadow:0 0 12px rgba(35,180,236,.6);}
}