/* ============================================================
   UFUQTECHS — Growth Infrastructure Company
   Design System v4 — light theme (core), with a living cosmic
   layer: dark star specks + soft aurora drifting on light.
   Ufuq = horizon. Dark navy is reserved for proof sections,
   the contact authority strip, and the footer — like the core.
   ============================================================ */

/* ---------- DESIGN TOKENS ---------- */
:root {
  /* Locked color system (core) */
  --primary-blue: #1E3A8A;
  --teal-light:   #2EC4B6;
  --teal-dark:    #1CA7A6;
  --dark-blue:    #0B1F3A;

  --bg-light:     #F3F4F6;
  --white:        #FFFFFF;
  --text-dark:    #111827;
  --text-muted:   #6B7280;
  --border:       #E5E7EB;

  --gradient-main: linear-gradient(90deg, #1E3A8A, #2EC4B6);
  --gradient-soft: linear-gradient(135deg, rgba(30,58,138,.06), rgba(46,196,182,.10));

  /* dark-section surfaces */
  --glass:   rgba(255,255,255,.04);
  --glass-b: rgba(255,255,255,.10);

  /* Typography */
  --font-head: 'Sora', 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Grid */
  --max-width: 1200px;
  --gutter: 24px;
  --section-pad: 80px;

  /* Effects */
  --radius-btn: 8px;
  --radius-card: 12px;
  --shadow-card: 0 1px 2px rgba(17,24,39,.04), 0 8px 24px rgba(17,24,39,.04);
  --shadow-hover: 0 18px 40px rgba(30,58,138,.10), 0 0 0 1px rgba(46,196,182,.18), 0 0 32px rgba(46,196,182,.18);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg-light); }
body {
  font-family: var(--font-body);
  background: transparent;            /* cosmos canvas shows through */
  color: var(--text-dark);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ---------- COSMOS BACKGROUND (sitewide infinite animation) ---------- */
#cosmos {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 100%;
}
main, header, section, footer { position: relative; z-index: 1; }

/* ---------- TYPOGRAPHY ---------- */
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.12; letter-spacing: -0.02em; color: var(--text-dark); }
h1 { font-size: clamp(38px, 5.4vw, 56px); font-weight: 700; }
h2 { font-size: clamp(30px, 4vw, 40px); font-weight: 600; }
h3 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; }
.small { font-size: 14px; }

.t-blue { color: var(--primary-blue); }
.t-teal { color: var(--teal-light); }
.t-grad {
  background: var(--gradient-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hl { color: var(--teal-dark); font-weight: 600; }

/* ---------- LAYOUT ---------- */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.section { padding: var(--section-pad) 0; position: relative; }
.section-head { max-width: 780px; margin: 0 auto 56px; text-align: center; }
.section-head .eyebrow { margin-bottom: 14px; }
.section-head p { color: var(--text-muted); font-size: 18px; margin-top: 16px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 600; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal-dark);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--gradient-main); border-radius: 2px; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-head); font-weight: 600; font-size: 16px;
  padding: 14px 28px; border-radius: var(--radius-btn);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  will-change: transform;
}
.btn svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn-primary { background: var(--gradient-main); color: #fff; box-shadow: 0 8px 22px rgba(46,196,182,.28); }
.btn-primary:hover { transform: scale(1.05); box-shadow: 0 12px 30px rgba(46,196,182,.45), 0 0 0 1px rgba(46,196,182,.4); }
.btn-primary:hover svg { transform: translateX(4px); }
.btn-secondary { border: 1.6px solid var(--primary-blue); color: var(--primary-blue); background: rgba(255,255,255,.6); }
.btn-secondary:hover { transform: scale(1.04); background: rgba(30,58,138,.06); }
.btn-ghost { color: var(--teal-dark); font-weight: 600; padding: 10px 4px; display: inline-flex; align-items: center; gap: 7px; }
.btn-ghost:hover svg { transform: translateX(4px); }
.btn-lg { padding: 17px 34px; font-size: 17px; }
.btn-light { background: #fff; color: var(--primary-blue); }
.btn-light:hover { transform: scale(1.05); box-shadow: 0 12px 30px rgba(0,0,0,.25); }

/* ---------- NAVBAR ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), backdrop-filter .35s var(--ease), padding .35s var(--ease);
  padding: 18px 0;
}
.nav.scrolled {
  background: rgba(243,244,246,.82);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 rgba(17,24,39,.06);
  padding: 12px 0;
}
.nav .container { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-head); font-weight: 700; font-size: 20px; letter-spacing: -.01em; }
.brand .mark { width: 34px; height: 34px; flex: none; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links > a, .nav-drop > button { font-weight: 500; font-size: 15px; color: var(--text-dark); transition: color .2s; position: relative; font-family: var(--font-body); }
.nav-links > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px;
  background: var(--gradient-main); border-radius: 2px; transition: width .25s var(--ease);
}
.nav-links > a:not(.btn):hover { color: var(--primary-blue); }
.nav-links > a:not(.btn):hover::after { width: 100%; }
.nav-toggle { display: none; }

/* Systems dropdown */
.nav-drop { position: relative; }
.nav-drop > button { display: inline-flex; align-items: center; gap: 6px; }
.nav-drop > button svg { width: 13px; height: 13px; transition: transform .25s var(--ease); }
.nav-drop.open > button svg, .nav-drop:hover > button svg { transform: rotate(180deg); }
.nav-drop > button:hover { color: var(--primary-blue); }
.drop-menu {
  position: absolute; top: calc(100% + 16px); left: 50%; transform: translate(-50%, 8px);
  min-width: 290px; padding: 10px;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 24px 56px rgba(17,24,39,.16);
  opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.nav-drop:hover .drop-menu, .nav-drop.open .drop-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.drop-menu a {
  display: block; padding: 11px 14px; border-radius: 9px; font-size: 14.5px; color: var(--text-dark);
  transition: background .2s, color .2s;
}
.drop-menu a span { display: block; font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.drop-menu a:hover { background: rgba(46,196,182,.08); color: var(--teal-dark); }

/* ---------- HERO ---------- */
.hero { position: relative; padding-top: 150px; padding-bottom: 90px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-bg::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(620px 420px at 78% 18%, rgba(46,196,182,.16), transparent 70%),
    radial-gradient(560px 460px at 8% 4%, rgba(30,58,138,.12), transparent 70%);
}
/* the Ufuq horizon — a soft arc of light along the hero's base */
.hero::after {
  content: ""; position: absolute; left: 50%; bottom: -260px; transform: translateX(-50%);
  width: 160%; height: 340px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(46,196,182,.16), rgba(30,58,138,.05) 55%, transparent 72%);
  filter: blur(6px);
  pointer-events: none; z-index: 0;
  animation: horizonBreath 9s var(--ease) infinite;
}
@keyframes horizonBreath { 50% { opacity: .6; transform: translateX(-50%) scaleY(1.12); } }
.blur-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; }
.orb-1 { width: 340px; height: 340px; background: rgba(46,196,182,.5); top: 8%; right: 6%; animation: float1 14s ease-in-out infinite; }
.orb-2 { width: 300px; height: 300px; background: rgba(30,58,138,.45); bottom: -8%; left: -4%; animation: float2 18s ease-in-out infinite; }
@keyframes float1 { 50% { transform: translate(-30px, 26px) scale(1.08); } }
@keyframes float2 { 50% { transform: translate(34px, -22px) scale(1.06); } }

.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hero-copy .eyebrow { margin-bottom: 22px; }
.hero h1 { margin-bottom: 22px; }
.hero-sub { font-size: 18px; color: var(--text-muted); max-width: 560px; margin-bottom: 14px; }
.hero-sub b, .hero-sub strong { color: var(--text-dark); font-weight: 600; }
.hero-sub.lead { font-size: 20px; color: var(--text-dark); font-weight: 500; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 26px; }

/* trust bar — ✓ items, exact from docs */
.trustbar { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 38px; }
.trustbar span { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text-muted); font-weight: 500; }
.trustbar span::before {
  content: "✓"; display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  font-size: 11px; font-weight: 700; color: #fff;
  background: var(--teal-light); box-shadow: 0 0 0 4px rgba(46,196,182,.16);
}

.hero-visual { position: relative; aspect-ratio: 1 / 1; width: 100%; }
#hero-canvas, .scene-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- ANIMATED CIRCLE VISUAL (service heroes, exact doc metrics) ---------- */
.circle-visual { position: absolute; inset: 0; display: grid; place-items: center; }
.circle-visual::before {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 64%; height: 64%; border-radius: 50%;
  background: radial-gradient(circle, rgba(46,196,182,.22), transparent 70%);
  filter: blur(10px); animation: sunPulse 6s var(--ease) infinite;
}
@keyframes sunPulse {
  0%, 100% { opacity: .72; transform: translate(-50%,-50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%,-50%) scale(1.13); }
}
.cv-ring {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  border-radius: 50%; border: 1px solid rgba(30,58,138,.13);
}
.cv-ring.r1 { width: 46%; height: 46%; }
.cv-ring.r2 { width: 72%; height: 72%; border-style: dashed; border-color: rgba(30,58,138,.10); animation: hookSpin 46s linear infinite; }
.cv-ring.r3 { width: 97%; height: 97%; border-color: rgba(30,58,138,.06); }
@keyframes hookSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.cv-core {
  position: relative; z-index: 3; text-align: center;
  width: 158px; height: 158px; border-radius: 50%;
  display: grid; place-items: center; align-content: center; gap: 2px;
  background: var(--gradient-main);
  border: none;
  box-shadow: 0 24px 60px rgba(30,58,138,.32), 0 0 0 8px rgba(46,196,182,.10);
  animation: hookPulse 5s var(--ease) infinite;
  padding: 18px;
}
.cv-core strong { font-family: var(--font-head); font-size: 15.5px; line-height: 1.3; color: #fff; font-weight: 600; }
@keyframes hookPulse { 50% { transform: translateY(-7px); } }

.cv-orbit {
  position: absolute; top: 50%; left: 50%; border-radius: 50%;
  width: 86%; height: 86%; margin: -43% 0 0 -43%;
  z-index: 4; pointer-events: none;
  animation: orbitSpin 56s linear infinite;
}
.cv-orbit.o2 { animation-delay: -14s; }
.cv-orbit.o3 { animation-delay: -28s; }
.cv-orbit.o4 { animation-delay: -42s; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
.cv-card {
  position: absolute; top: 0; left: 50%;
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 11px 15px; box-shadow: var(--shadow-card); white-space: nowrap;
  animation: cardUpright 56s linear infinite;
}
.cv-orbit.o2 .cv-card { animation-delay: -14s; }
.cv-orbit.o3 .cv-card { animation-delay: -28s; }
.cv-orbit.o4 .cv-card { animation-delay: -42s; }
@keyframes cardUpright {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(-360deg); }
}
.cv-ic {
  flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: var(--gradient-soft); border: 1px solid rgba(46,196,182,.22);
  font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--teal-dark);
}
.cv-body { display: flex; flex-direction: column; line-height: 1.3; }
.cv-label { font-size: 11.5px; color: var(--text-muted); }
.cv-num { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--text-dark); }
.cv-sub { font-size: 10.5px; color: var(--text-muted); opacity: .85; }
.circle-visual.is-paused .cv-orbit,
.circle-visual.is-paused .cv-card,
.circle-visual.is-paused .cv-ring.r2 { animation-play-state: paused; }

/* ---------- PROBLEM REFRAME ---------- */
.reframe { text-align: center; }
.reframe .eyebrow { margin-bottom: 16px; }
.reframe .big {
  font-family: var(--font-head); font-weight: 700; line-height: 1.18;
  font-size: clamp(28px, 4.2vw, 46px); max-width: 940px; margin: 0 auto; letter-spacing: -.02em;
}
.reframe .lead { max-width: 700px; margin: 26px auto 0; color: var(--text-muted); font-size: 18px; }
.reframe .lead b { color: var(--text-dark); }
.problem-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
  max-width: 880px; margin: 46px auto 0; text-align: left;
}
.problem-grid.cols-3 { grid-template-columns: repeat(3, 1fr); max-width: 960px; }
.problem-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 26px 24px; box-shadow: var(--shadow-card);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.problem-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.problem-card .x {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
  background: rgba(229,72,77,.09); color: #E5484D; margin-bottom: 16px;
}
.problem-card .x svg { width: 19px; height: 19px; }
.problem-card h3 { font-size: 18px; margin-bottom: 8px; }
.problem-card p { color: var(--text-muted); font-size: 15px; }
.problem-solution {
  margin-top: 44px; font-family: var(--font-head); font-size: clamp(18px,2.2vw,22px);
  line-height: 1.55; color: var(--text-muted); max-width: 820px; margin-left: auto; margin-right: auto;
}
.problem-solution b { color: var(--text-dark); font-weight: 600; }
.solution-kick {
  display: inline-block; margin-bottom: 14px; font-family: var(--font-head); font-weight: 700;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--teal-dark);
}

/* ---------- SYSTEM PANEL / HOW IT WORKS ---------- */
.system-panel {
  background: var(--gradient-soft); border: 1px solid var(--border); border-radius: 24px;
  padding: clamp(34px, 5vw, 60px) clamp(22px, 4vw, 54px);
  position: relative; z-index: 1;
}
.system-panel { background-color: rgba(255,255,255,.72); }
.system-panel .section-head { margin-bottom: 50px; }
.step-tag {
  display: block; font-family: var(--font-head); font-weight: 700; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 6px;
}
.flow-wrap { position: relative; }
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; z-index: 2; }
.flow-line { position: absolute; top: 46px; left: 12%; right: 12%; height: 3px; z-index: 1; border-radius: 3px; overflow: visible; background: linear-gradient(90deg, rgba(46,196,182,.28), rgba(30,58,138,.20)); }
.flow-line::after {
  content: ""; position: absolute; top: 50%; left: 0; width: 24%; height: 5px; transform: translateY(-50%);
  border-radius: 6px;
  background: linear-gradient(90deg, transparent, var(--teal-light) 40%, #6fe9db 50%, var(--teal-light) 60%, transparent);
  box-shadow: 0 0 16px 3px rgba(46,196,182,.7);
  animation: flowGlow 3.6s var(--ease) infinite alternate;
}
@keyframes flowGlow { from { left: 0%; } to { left: 76%; } }
.flow-step { text-align: center; }
.flow-icon {
  width: 92px; height: 92px; margin: 0 auto 20px; border-radius: 24px;
  display: grid; place-items: center; background: #fff; border: 1px solid var(--border);
  box-shadow: var(--shadow-card); position: relative; transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.flow-icon svg { width: 38px; height: 38px; color: var(--primary-blue); transition: color .3s; }
.flow-step:hover .flow-icon { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.flow-step:hover .flow-icon svg { color: var(--teal-dark); }
.flow-num { position: absolute; top: -10px; right: -10px; width: 28px; height: 28px; border-radius: 50%; background: var(--gradient-main); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 13px; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(46,196,182,.4); }
.flow-step h3 { font-size: 21px; margin-bottom: 6px; }
.flow-step p { font-size: 15px; color: var(--text-muted); }

/* step layers with bullet lists (service pages) */
.layer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.layer {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 30px; box-shadow: var(--shadow-card);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.layer:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.layer .step-tag { margin-bottom: 4px; }
.layer h3 { font-size: 22px; margin-bottom: 10px; }
.layer > p { color: var(--text-muted); font-size: 15.5px; margin-bottom: 14px; }
.layer ul { display: grid; gap: 10px; }
.layer li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-muted); font-size: 15.5px; }
.layer li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 8px; border-radius: 50%; background: var(--gradient-main); }

/* ---------- CARDS / WHAT WE BUILD ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 30px 26px; box-shadow: var(--shadow-card);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.card-icon {
  width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 20px;
  background: var(--gradient-soft); border: 1px solid rgba(46,196,182,.22);
}
.card-icon svg { width: 27px; height: 27px; color: var(--primary-blue); transition: color .3s; }
.card:hover .card-icon svg { color: var(--teal-dark); }
.card h3 { font-size: 20px; margin-bottom: 10px; }
.card p { color: var(--text-muted); font-size: 15.5px; flex: 1; margin-bottom: 18px; }
.card p:last-child { margin-bottom: 0; }
.card .btn-ghost { align-self: flex-start; font-size: 15px; }

/* ---------- DARK SECTIONS (results / proof — like the core) ---------- */
.dark { background: var(--dark-blue); color: #fff; position: relative; overflow: hidden; }
.dark::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(700px 380px at 88% 12%, rgba(46,196,182,.18), transparent 70%);
  pointer-events: none;
}
.dark > .container { position: relative; z-index: 1; }
.dark h2, .dark h3 { color: #fff; }
.dark .eyebrow { color: var(--teal-light); }
.dark .section-head p { color: rgba(255,255,255,.72); }

.results { position: relative; z-index: 2; }
.results .section-head { margin-bottom: 46px; }
.results-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 58px; }
.result-stat {
  background: var(--glass); border: 1px solid var(--glass-b);
  border-radius: var(--radius-card); padding: 28px 22px; text-align: center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.result-stat:hover { transform: translateY(-4px); }
.result-num {
  display: block; font-family: var(--font-head); font-weight: 700; line-height: 1;
  font-size: clamp(34px, 4vw, 46px);
  background: linear-gradient(90deg, #7FA4FF, #4FE3D4);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.result-label { display: block; margin-top: 12px; font-weight: 600; font-size: 15px; color: #fff; }
.result-sub { display: block; margin-top: 3px; font-size: 13px; color: rgba(255,255,255,.55); }

.case-head { text-align: center; margin-bottom: 26px; }
.case-head span {
  font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
}
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.case-card {
  background: var(--glass); border: 1px solid var(--glass-b);
  border-radius: var(--radius-card); padding: 24px;
}
.case-tag {
  display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--teal-light); margin-bottom: 14px;
}
.case-row { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; }
.case-row + .case-row { border-top: 1px solid rgba(255,255,255,.08); }
.case-row p { font-size: 14.5px; color: rgba(255,255,255,.82); }
.case-k {
  flex: none; font-family: var(--font-head); font-weight: 700; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px; margin-top: 1px;
}
.case-k.before { color: #FCA5A5; background: rgba(229,72,77,.16); }
.case-k.after { color: #6EE7D6; background: rgba(46,196,182,.16); }

/* ---------- WHY (homepage 2-col) ---------- */
.why2 { display: grid; grid-template-columns: .92fr 1.08fr; gap: 56px; align-items: start; }
.why2-intro .eyebrow { margin-bottom: 16px; }
.why2-intro h2 { font-size: clamp(34px, 4.4vw, 48px); margin-bottom: 18px; }
.why2-intro p { color: var(--text-muted); font-size: 18px; margin-bottom: 30px; max-width: 420px; }
.why2-cards { display: grid; gap: 18px; }
.why-card {
  display: flex; gap: 18px; align-items: flex-start;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 24px; box-shadow: var(--shadow-card);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.why-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.why-card .ic { flex: none; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--gradient-soft); border: 1px solid rgba(46,196,182,.22); }
.why-card .ic svg { width: 23px; height: 23px; color: var(--teal-dark); }
.why-card h3 { font-size: 18px; margin-bottom: 6px; }
.why-card p { color: var(--text-muted); font-size: 15px; }
.why-card { cursor: default; width: 100%; text-align: left; -webkit-tap-highlight-color: transparent; }
.why-card[role="button"] { cursor: pointer; }
.why-card:focus-visible { outline: 2px solid var(--teal-dark); outline-offset: 3px; }
.why-card-body { flex: 1; min-width: 0; }
.why-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.why-chev {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  color: var(--teal-dark); border: 1.5px solid var(--border); margin-top: 1px;
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.why-chev svg { width: 14px; height: 14px; }
.why-card:hover .why-chev { border-color: rgba(46,196,182,.5); }
.why-card.open .why-chev { transform: rotate(180deg); background: var(--gradient-main); color: #fff; border-color: transparent; }
.why-detail { max-height: 0; overflow: hidden; transition: max-height .42s var(--ease); }
.why-detail-inner { padding-top: 12px; }
.why-detail-inner p { color: var(--text-muted); font-size: 14.5px; line-height: 1.7; }

/* why grid (4 tiles, service pages) */
.why-grid4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 920px; margin: 0 auto; }

/* ---------- VALUE TILES (light default, dark override below) ---------- */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.value-tile {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 26px 24px; box-shadow: var(--shadow-card);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.value-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.value-tile h3 { font-size: 18px; margin-bottom: 8px; color: var(--teal-dark); }
.value-tile p { color: var(--text-muted); font-size: 15px; }
.dark .value-tile { background: var(--glass); border-color: var(--glass-b); box-shadow: none; }
.dark .value-tile h3 { color: var(--teal-light); }
.dark .value-tile p { color: rgba(255,255,255,.72); }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius-card); background: #fff; margin-bottom: 14px; overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.faq-item.open { border-color: rgba(46,196,182,.5); box-shadow: var(--shadow-card); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px; text-align: left; font-family: var(--font-head); font-weight: 600; font-size: 18px; color: var(--text-dark); }
.faq-icon { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1.6px solid var(--border); position: relative; transition: all .3s var(--ease); }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; background: var(--primary-blue); border-radius: 2px; transition: all .3s var(--ease); }
.faq-icon::before { width: 11px; height: 2px; }
.faq-icon::after { width: 2px; height: 11px; }
.faq-item.open .faq-icon { background: var(--gradient-main); border-color: transparent; transform: rotate(180deg); }
.faq-item.open .faq-icon::before, .faq-item.open .faq-icon::after { background: #fff; }
.faq-item.open .faq-icon::after { height: 0; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq-a-inner { padding: 0 24px 24px; color: var(--text-muted); font-size: 16.5px; }

/* ---------- FINAL CTA ---------- */
.final-cta { position: relative; text-align: center; color: #fff; padding: 96px 0; overflow: hidden; }
.final-cta::before { content: ""; position: absolute; inset: 0; background: var(--gradient-main); z-index: 0; }
.final-cta::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(600px 300px at 50% -10%, rgba(255,255,255,.25), transparent 70%); }
.final-cta .container { position: relative; z-index: 2; }
.final-cta .eyebrow { color: #CFF6F1; margin-bottom: 14px; }
.final-cta .eyebrow::before { background: #CFF6F1; }
.final-cta h2 { color: #fff; max-width: 820px; margin: 0 auto 18px; }
.final-cta p { color: rgba(255,255,255,.9); font-size: 19px; max-width: 640px; margin: 0 auto; }
.final-cta p + p { margin-top: 6px; }
.final-cta .hero-cta { justify-content: center; margin-top: 32px; }
.final-cta .glow-orb { position: absolute; width: 360px; height: 360px; border-radius: 50%; background: rgba(255,255,255,.16); filter: blur(70px); z-index: 1; }
.final-cta .glow-orb.a { top: -120px; left: -60px; }
.final-cta .glow-orb.b { bottom: -160px; right: -40px; }
.cta-notes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 28px; position: relative; z-index: 2; }
.cta-notes span { font-size: 14px; color: rgba(255,255,255,.85); display: inline-flex; align-items: center; gap: 8px; }
.cta-notes span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #CFF6F1; }
.final-cta .trustbar { justify-content: center; }
.final-cta .trustbar span { color: rgba(255,255,255,.88); }
.final-cta .trustbar span::before { color: var(--teal-dark); background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.18); }
.final-cta .btn-secondary { background: transparent; }

/* ---------- FOOTER (dark, like the core) ---------- */
.footer { background: var(--dark-blue); color: rgba(255,255,255,.7); padding: 60px 0 34px; position: relative; overflow: hidden; }
.footer-particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .55; }
.footer .container { position: relative; z-index: 1; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.footer .brand { color: #fff; margin-bottom: 16px; }
.footer p { font-size: 15px; max-width: 320px; }
.footer h4 { color: #fff; font-family: var(--font-head); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 18px; }
.footer-col a { display: block; font-size: 14.5px; margin-bottom: 11px; transition: color .2s; }
.footer-col a:hover { color: var(--teal-light); }
.footer-col span.fc-text { display: block; font-size: 14.5px; margin-bottom: 11px; }
.footer-bottom { margin-top: 46px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 14px; }
.footer-curated { position: relative; z-index: 1; text-align: center; margin-top: 18px; font-size: 13.5px; color: rgba(255,255,255,.5); }
.footer-curated a { color: var(--teal-light); font-weight: 600; transition: color .2s; }
.footer-curated a:hover { color: #fff; text-decoration: underline; }

/* ---------- WELCOME POPUP ---------- */
.popup-overlay {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 22px;
  background: rgba(11,31,58,.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s;
}
.popup-overlay.show { opacity: 1; visibility: visible; }
.popup {
  width: 100%; max-width: 920px; max-height: 90vh; overflow: hidden;
  background: #fff;
  border: 1px solid var(--border); border-radius: 22px;
  box-shadow: 0 40px 100px rgba(17,24,39,.34);
  transform: translateY(22px) scale(.97); transition: transform .4s var(--ease);
  position: relative;
}
.popup.split { display: grid; grid-template-columns: 1.05fr .95fr; }
.popup-overlay.show .popup { transform: none; }
.popup-form-side { padding: 40px 38px; overflow-y: auto; max-height: 90vh; }
.popup-close {
  position: absolute; top: 16px; right: 16px; z-index: 3; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.18); transition: all .25s var(--ease);
}
.popup-close:hover { color: #fff; border-color: var(--teal-light); transform: rotate(90deg); }
.popup-close svg { width: 15px; height: 15px; }
.popup .eyebrow { margin-bottom: 12px; }
.popup h3 { font-size: 23px; margin-bottom: 10px; line-height: 1.25; }
.popup .sub { color: var(--text-muted); font-size: 14.5px; margin-bottom: 18px; }
.popup-points { display: grid; gap: 8px; margin-bottom: 20px; }
.popup-points span { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-dark); }
.popup-points span::before {
  content: "✓"; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
  flex: none; font-size: 10px; font-weight: 700; color: #fff; background: var(--teal-light);
}
.popup-form { display: grid; gap: 11px; }
.popup-form .pf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.popup-form .btn { width: 100%; margin-top: 4px; }
.popup-secondary { text-align: center; margin-top: 14px; font-size: 14px; }
.popup-secondary a { color: var(--teal-dark); font-weight: 600; }
.popup-trust { text-align: center; margin-top: 14px; font-size: 12px; color: var(--text-muted); }
.popup-thanks { text-align: center; padding: 18px 0 6px; }
.popup-thanks .tick {
  width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center; background: var(--gradient-main);
  box-shadow: 0 0 0 10px rgba(46,196,182,.12);
}
.popup-thanks .tick svg { width: 28px; height: 28px; color: #fff; }
.popup-thanks p { color: var(--text-muted); font-size: 15px; margin-bottom: 10px; }

/* ---- popup right: dark branded visual ---- */
.popup-visual-side {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(160deg, #14306e 0%, #0B1F3A 60%, #08152b 100%);
  padding: 34px 30px; display: flex; flex-direction: column; align-items: center; text-align: center;
}
.popup-visual-side::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(440px 300px at 78% 6%, rgba(46,196,182,.22), transparent 70%);
}
.popup-visual-side > * { position: relative; z-index: 1; }
.pv-brand { font-family: var(--font-head); font-weight: 700; font-size: 19px; letter-spacing: -.01em; margin-bottom: 8px; }
.pv-brand span { color: var(--teal-light); }
.pv-orbit { position: relative; width: 220px; height: 220px; margin: 14px auto 6px; }
.pv-ring { position: absolute; inset: 14%; border-radius: 50%; border: 1px dashed rgba(126,180,226,.28); animation: hookSpin 36s linear infinite; }
.pv-ring.r2 { inset: 0; border-style: solid; border-color: rgba(126,180,226,.16); animation-duration: 60s; }
.pv-core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: 30px; color: #fff;
  background: var(--gradient-main); box-shadow: 0 12px 30px rgba(46,196,182,.4), 0 0 0 6px rgba(46,196,182,.12);
  animation: hookPulse 5s var(--ease) infinite;
}
.pv-node {
  position: absolute; display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 9.5px; color: rgba(233,240,252,.78); width: 64px; left: 50%; top: 50%; margin: -32px 0 0 -32px;
}
.pv-node:nth-child(3) { transform: translate(0, -104px); }      /* top */
.pv-node:nth-child(4) { transform: translate(104px, 0); }       /* right */
.pv-node:nth-child(5) { transform: translate(0, 104px); }       /* bottom */
.pv-node:nth-child(6) { transform: translate(-104px, 0); }      /* left */
.pv-ic {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(13,27,52,.85); border: 1px solid rgba(126,180,226,.28); color: var(--teal-light);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
.pv-ic svg { width: 19px; height: 19px; }
.pv-tag { font-family: var(--font-head); font-size: 15px; margin: 10px 0 16px; color: rgba(233,240,252,.9); }
.pv-tag strong { color: #fff; }
.pv-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-bottom: auto; }
.pv-stats span {
  font-size: 11px; font-weight: 600; padding: 9px 6px; border-radius: 9px; color: rgba(233,240,252,.82);
  background: rgba(255,255,255,.05); border: 1px solid rgba(126,180,226,.16);
}
.pv-foot { font-size: 10.5px; color: rgba(154,168,196,.85); margin-top: 18px; line-height: 1.5; }

/* ---------- FORMS ---------- */
.field { display: grid; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; color: var(--text-dark); font-family: var(--font-head); }
.field input, .field select, .field textarea, .popup-form input, .newsletter-form input {
  width: 100%; padding: 13px 15px; border-radius: 10px; font-size: 15px; font-family: var(--font-body);
  background: #fff; border: 1px solid var(--border); color: var(--text-dark);
  transition: border-color .25s, box-shadow .25s; outline: none; appearance: none;
}
.field textarea { min-height: 120px; resize: vertical; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.field input::placeholder, .field textarea::placeholder, .popup-form input::placeholder { color: rgba(107,114,128,.6); }
.field input:focus, .field select:focus, .field textarea:focus, .popup-form input:focus, .newsletter-form input:focus {
  border-color: var(--teal-light); box-shadow: 0 0 0 3px rgba(46,196,182,.15);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .field.full { grid-column: 1 / -1; }
.form-panel {
  background: #fff; border: 1px solid var(--border); border-radius: 22px; padding: clamp(26px, 4vw, 44px);
  box-shadow: var(--shadow-card);
}
.form-note { font-size: 13.5px; color: var(--text-muted); margin-top: 14px; text-align: center; }

/* hero with a panel on the right (contact) */
.hero-split { position: relative; z-index: 2; display: grid; grid-template-columns: 1.02fr .98fr; gap: 48px; align-items: center; }
.hero-split .hero-copy .eyebrow { margin-bottom: 18px; }
.hero-split .hero-copy h1 { margin-bottom: 18px; }

/* dark form panel (contact hero, per mockup) */
.form-panel.dark-panel {
  background: linear-gradient(160deg, #14306e, #0B1F3A 65%); border-color: rgba(126,180,226,.18);
  box-shadow: 0 30px 70px rgba(2,8,22,.4); padding: clamp(24px, 3vw, 36px);
}
.dark-panel .field label { color: rgba(233,240,252,.9); }
.dark-panel .field input, .dark-panel .field select, .dark-panel .field textarea {
  background: rgba(8,16,32,.55); border-color: rgba(126,180,226,.2); color: #fff;
}
.dark-panel .field input::placeholder, .dark-panel .field textarea::placeholder { color: rgba(154,168,196,.6); }
.dark-panel .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239AA8C4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.dark-panel .field select option { color: #111827; }
.dark-panel .form-note { color: rgba(154,168,196,.85); }
.dark-panel #form-done h3 { color: #fff; }
.dark-panel #form-done p { color: rgba(233,240,252,.72); }

/* ---------- AMBIENT AUDIO TOGGLE (reactive) ---------- */
.audio-toggle {
  position: fixed; right: 22px; bottom: 22px; z-index: 250;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 18px 11px 15px; border-radius: 999px;
  background: rgba(255,255,255,.92); border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(17,24,39,.14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--text-muted); font-size: 13px; font-weight: 600; font-family: var(--font-head);
  transition: border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.audio-toggle:hover { border-color: var(--teal-light); color: var(--text-dark); transform: translateY(-2px) scale(1.03); }
.audio-toggle:active { transform: translateY(0) scale(.97); }
.audio-toggle.playing {
  color: var(--teal-dark); border-color: rgba(46,196,182,.5);
  box-shadow: 0 10px 30px rgba(17,24,39,.14), 0 0 22px rgba(46,196,182,.35);
}
/* breathing glow ring while it plays */
.audio-toggle::after {
  content: ""; position: absolute; inset: -3px; border-radius: 999px;
  border: 1.5px solid rgba(46,196,182,.5); opacity: 0; pointer-events: none;
}
.audio-toggle.playing::after { animation: audioPulse 2s var(--ease) infinite; }
@keyframes audioPulse {
  0%   { opacity: .55; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.32); }
  100% { opacity: 0;   transform: scale(1.32); }
}
.eq { display: flex; align-items: flex-end; gap: 2.5px; width: 21px; height: 17px; }
.eq i { flex: 1; border-radius: 2px; background: currentColor; height: 22%; transition: height .09s linear; }
/* fallback CSS animation only if the AnalyserNode is unavailable */
.audio-toggle.playing.no-analyser .eq i { animation: eqBounce 1.05s ease-in-out infinite; transition: none; }
.audio-toggle.playing.no-analyser .eq i:nth-child(2) { animation-delay: .14s; }
.audio-toggle.playing.no-analyser .eq i:nth-child(3) { animation-delay: .28s; }
.audio-toggle.playing.no-analyser .eq i:nth-child(4) { animation-delay: .42s; }
.audio-toggle.playing.no-analyser .eq i:nth-child(5) { animation-delay: .56s; }
@keyframes eqBounce { 0%, 100% { height: 22%; } 50% { height: 96%; } }

/* auto-dismiss hint bubble */
.audio-hint {
  position: fixed; right: 22px; bottom: 70px; z-index: 250;
  max-width: 220px; padding: 9px 14px; border-radius: 12px;
  background: rgba(11,31,58,.94); color: #fff; font-size: 12.5px; font-weight: 500; font-family: var(--font-body);
  box-shadow: 0 14px 34px rgba(2,8,22,.4); border: 1px solid rgba(126,180,226,.2);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.audio-hint.show { opacity: 1; transform: translateY(0); }
.audio-hint::after {
  content: ""; position: absolute; right: 26px; bottom: -6px; width: 10px; height: 10px;
  background: inherit; border-right: 1px solid rgba(126,180,226,.2); border-bottom: 1px solid rgba(126,180,226,.2);
  transform: rotate(45deg);
}

/* ---------- ABOUT: TEAM / CERTS / STORY ---------- */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.team-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 28px 24px; text-align: center; box-shadow: var(--shadow-card);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.avatar {
  width: 84px; height: 84px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 26px; color: #fff;
  background: var(--gradient-main);
  box-shadow: 0 8px 24px rgba(30,58,138,.22);
}
.team-card h3 { font-size: 18px; margin-bottom: 2px; }
.team-role { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 12px; }
.team-card p { font-size: 13.5px; color: var(--text-muted); margin-bottom: 14px; }
.team-card .mail { font-size: 13px; color: var(--primary-blue); word-break: break-all; }
.team-card .mail:hover { color: var(--teal-dark); }

.cert-slider { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 18px; overflow-x: auto; padding: 6px 6px 18px; scroll-snap-type: x mandatory; }
.cert-slider::-webkit-scrollbar { height: 6px; }
.cert-slider::-webkit-scrollbar-thumb { background: rgba(46,196,182,.45); border-radius: 3px; }
.cert-slider::-webkit-scrollbar-track { background: rgba(255,255,255,.12); border-radius: 3px; }
.cert-card {
  scroll-snap-align: start;
  background: var(--glass); border: 1px solid var(--glass-b); border-radius: var(--radius-card);
  padding: 26px 22px;
}
.cert-card .badge {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px;
  background: rgba(46,196,182,.14); border: 1px solid rgba(46,196,182,.3); color: var(--teal-light);
}
.cert-card .badge svg { width: 22px; height: 22px; }
.cert-card h3 { font-size: 16.5px; margin-bottom: 8px; color: #fff; }
.cert-card p { font-size: 13.5px; color: rgba(255,255,255,.66); }
.cert-card p b { color: rgba(255,255,255,.92); font-weight: 600; }

.story { max-width: 800px; margin: 0 auto; }
.story h2 { margin-bottom: 20px; }
.story p { color: var(--text-muted); font-size: 17.5px; margin-bottom: 14px; }
.story p.kick { color: var(--text-dark); font-family: var(--font-head); font-weight: 600; font-size: 19px; }
.story .mission {
  margin-top: 26px; padding: 26px 30px; border-left: 3px solid var(--teal-light); border-radius: 0 14px 14px 0;
  background: rgba(46,196,182,.08); color: var(--text-dark); font-family: var(--font-head); font-weight: 600; font-size: 19px;
}

/* ---------- CONTACT: AUTHORITY STRIP (Dark Navy Section per doc) ---------- */
.authority {
  background: var(--dark-blue); color: #fff;
  border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06);
  position: relative; overflow: hidden;
}
.authority::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(700px 380px at 88% 12%, rgba(46,196,182,.16), transparent 70%);
  pointer-events: none;
}
.authority .container { position: relative; z-index: 1; }
.authority .eyebrow { color: var(--teal-light); }
.authority-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; margin-top: 44px; }
.auth-stat { text-align: center; padding: 18px 8px; }
.auth-stat .num { display: block; font-family: var(--font-head); font-weight: 700; font-size: clamp(24px, 2.6vw, 34px); background: linear-gradient(90deg, #7FA4FF, #4FE3D4); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.auth-stat .label { display: block; margin-top: 8px; font-size: 13px; color: rgba(255,255,255,.6); }
.authority .small-line { text-align: center; margin-top: 30px; color: rgba(255,255,255,.6); font-size: 14.5px; }

.info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.info-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 26px 24px; text-align: center; box-shadow: var(--shadow-card);
}
.info-card .ic { width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 12px; display: grid; place-items: center; background: var(--gradient-soft); border: 1px solid rgba(46,196,182,.22); color: var(--teal-dark); }
.info-card .ic svg { width: 22px; height: 22px; }
.info-card h3 { font-size: 15px; margin-bottom: 6px; }
.info-card p { font-size: 14px; color: var(--text-muted); }
.info-card a { color: var(--primary-blue); }
.info-card a:hover { color: var(--teal-dark); }

/* ---------- VERTICAL STEPS ---------- */
.steps-v { max-width: 720px; margin: 0 auto; display: grid; gap: 0; }
.step-v { display: flex; gap: 22px; position: relative; padding-bottom: 34px; }
.step-v:last-child { padding-bottom: 0; }
.step-v::before { content: ""; position: absolute; left: 23px; top: 50px; bottom: 4px; width: 2px; background: linear-gradient(180deg, rgba(46,196,182,.5), rgba(30,58,138,.15)); }
.step-v:last-child::before { display: none; }
.step-v .n {
  flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: 16px; color: #fff;
  background: var(--gradient-main); box-shadow: 0 0 0 6px rgba(46,196,182,.12), 0 8px 20px rgba(46,196,182,.3);
  position: relative; z-index: 1;
}
.step-v h3 { font-size: 19px; margin: 10px 0 5px; }
.step-v p { color: var(--text-muted); font-size: 15.5px; }
.dark .step-v p { color: rgba(255,255,255,.7); }

/* ---------- CAREERS ---------- */
.position-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.position-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 28px 26px; box-shadow: var(--shadow-card);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  display: flex; flex-direction: column;
}
.position-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.position-card h3 { font-size: 21px; margin-bottom: 12px; }
.position-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.position-meta span {
  font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px;
  background: rgba(30,58,138,.06); border: 1px solid var(--border); color: var(--text-muted);
}
.position-meta span.hot { background: rgba(46,196,182,.10); border-color: rgba(46,196,182,.3); color: var(--teal-dark); }
.position-card p { color: var(--text-muted); font-size: 15px; flex: 1; margin-bottom: 18px; }
.position-card .btn { align-self: flex-start; padding: 11px 22px; font-size: 14.5px; }

.quote-block { max-width: 760px; margin: 0 auto; text-align: center; }
.quote-block blockquote { font-family: var(--font-head); font-weight: 600; font-size: clamp(21px, 2.6vw, 28px); line-height: 1.45; color: var(--text-dark); }
.quote-block cite { display: block; margin-top: 18px; font-style: normal; color: var(--teal-dark); font-size: 15px; font-weight: 600; }

.check-list { display: grid; gap: 12px; max-width: 560px; margin: 0 auto; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--text-dark); }
.check-list li::before {
  content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  flex: none; margin-top: 3px; font-size: 11px; font-weight: 700; color: #fff;
  background: var(--teal-light); box-shadow: 0 0 0 4px rgba(46,196,182,.14);
}

/* ---------- BLOG ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.blog-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 30px 26px; box-shadow: var(--shadow-card);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.blog-card .tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 12px; }
.blog-card h3 { font-size: 19px; margin-bottom: 10px; }
.blog-card p { color: var(--text-muted); font-size: 14.5px; }
.empty-state {
  max-width: 620px; margin: 0 auto; text-align: center; padding: 54px 30px;
  border: 1px dashed rgba(30,58,138,.25); border-radius: 22px; background: rgba(255,255,255,.6);
}
.empty-state h3 { margin-bottom: 12px; }
.empty-state p { color: var(--text-muted); }
.newsletter { max-width: 620px; margin: 0 auto; text-align: center; }
.newsletter-form { display: flex; gap: 12px; margin-top: 26px; }
.newsletter-form input { flex: 1; }

/* ---------- LEGAL PROSE ---------- */
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { font-size: 24px; margin: 40px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--text-muted); font-size: 16px; margin-bottom: 12px; }
.prose p b { color: var(--text-dark); }
.prose ul { display: grid; gap: 8px; margin: 6px 0 14px; }
.prose li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-muted); font-size: 15.5px; }
.prose li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 9px; border-radius: 50%; background: var(--gradient-main); }
.prose a { color: var(--teal-dark); }
.effective { display: inline-block; padding: 7px 16px; border-radius: 999px; background: rgba(46,196,182,.1); border: 1px solid rgba(46,196,182,.3); color: var(--teal-dark); font-size: 13px; font-weight: 600; margin-bottom: 26px; }

/* ---------- HOMEPAGE HOOK (orbiting U system — core look) ---------- */
.hook { position: absolute; inset: 0; display: grid; place-items: center; }
.hook::before {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 66%; height: 66%; border-radius: 50%;
  background: radial-gradient(circle, rgba(46,196,182,.22), transparent 70%);
  filter: blur(10px); z-index: 0;
  animation: sunPulse 5s var(--ease) infinite;
}
.hook-core {
  position: relative; z-index: 3;
  width: 116px; height: 116px; border-radius: 28px;
  background: var(--gradient-main);
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: 54px; color: #fff;
  box-shadow: 0 24px 60px rgba(30,58,138,.32), 0 0 0 8px rgba(46,196,182,.10);
  animation: hookPulse 5s var(--ease) infinite;
}
.hook-core span { line-height: 1; transform: translateY(-2px); }
.hook-ring {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  border-radius: 50%; border: 1px solid rgba(30,58,138,.13); z-index: 1;
}
.hook-ring.r1 { width: 50%; height: 50%; }
.hook-ring.r2 { width: 75%; height: 75%; border-color: rgba(30,58,138,.10); border-style: dashed; animation: hookSpin 40s linear infinite; }
.hook-ring.r3 { width: 100%; height: 100%; border-color: rgba(30,58,138,.06); }

.orbit {
  position: absolute; top: 50%; left: 50%; border-radius: 50%;
  z-index: 2; pointer-events: none;
  animation-name: orbitSpin; animation-timing-function: linear; animation-iteration-count: infinite;
}
.orbit-p1 { width: 50%; height: 50%; margin: -25% 0 0 -25%; animation-duration: 16s; }
.orbit-p2 { width: 74%; height: 74%; margin: -37% 0 0 -37%; animation-duration: 24s; }
.orbit-p3 { width: 96%; height: 96%; margin: -48% 0 0 -48%; animation-duration: 34s; animation-direction: reverse; }
.planet { position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%); border-radius: 50%; }
.p-teal { width: 13px; height: 13px; background: var(--teal-light); box-shadow: 0 0 12px 2px rgba(46,196,182,.7); }
.p-blue { width: 15px; height: 15px; background: var(--primary-blue); box-shadow: 0 0 14px 2px rgba(30,58,138,.55); }
.p-soft { width: 9px; height: 9px; background: #fff; border: 1px solid rgba(46,196,182,.6); box-shadow: 0 0 10px 2px rgba(46,196,182,.5); }

.hook-card {
  position: absolute; z-index: 4; display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 12px 16px; box-shadow: var(--shadow-card); white-space: nowrap;
}
.hook-card .hc-ic {
  flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: var(--gradient-soft); border: 1px solid rgba(46,196,182,.22); color: var(--primary-blue);
}
.hook-card .hc-ic.up { color: var(--teal-dark); }
.hook-card .hc-ic svg { width: 20px; height: 20px; }
.hc-body { display: flex; flex-direction: column; line-height: 1.25; }
.hc-label { font-size: 12px; color: var(--text-muted); }
.hc-num { font-family: var(--font-head); font-weight: 700; font-size: 19px; color: var(--text-dark); }
.orbit-c1, .orbit-c2, .orbit-c3 { z-index: 4; width: 72%; height: 72%; margin: -36% 0 0 -36%; animation-duration: 42s; }
.orbit-c1 { animation-delay: 0s; }
.orbit-c2 { animation-delay: -14s; }
.orbit-c3 { animation-delay: -28s; }
.orbit-c1 > .hook-card, .orbit-c2 > .hook-card, .orbit-c3 > .hook-card {
  top: 0; left: 50%; right: auto; bottom: auto;
  animation: cardUpright42 42s linear infinite;
}
.orbit-c1 > .hook-card { animation-delay: 0s; }
.orbit-c2 > .hook-card { animation-delay: -14s; }
.orbit-c3 > .hook-card { animation-delay: -28s; }
@keyframes cardUpright42 {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(-360deg); }
}
.hook.is-paused .orbit,
.hook.is-paused .orbit > .hook-card,
.hook.is-paused .hook-ring.r2 { animation-play-state: paused; }

/* services icon glow */
#services .card-icon { animation: svcIconGlow 3.8s var(--ease) infinite; }
#services .card:nth-child(2) .card-icon,
#services .card:nth-child(5) .card-icon { animation-delay: 1.25s; }
#services .card:nth-child(3) .card-icon,
#services .card:nth-child(6) .card-icon { animation-delay: 2.5s; }
@keyframes svcIconGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46,196,182,0); border-color: rgba(46,196,182,.22); }
  50%      { box-shadow: 0 0 18px 2px rgba(46,196,182,.5); border-color: rgba(46,196,182,.6); }
}
#services .card .btn-ghost svg { animation: svcArrow 1.9s var(--ease) infinite; }
@keyframes svcArrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

/* ---------- DARK HERO (inner pages, per mockups) ---------- */
.hero.dark-hero { background: linear-gradient(165deg, #0E2350 0%, #0B1F3A 55%, #08152b 100%); }
.hero.dark-hero::after {
  background: radial-gradient(closest-side, rgba(46,196,182,.26), rgba(30,58,138,.10) 55%, transparent 72%);
}
.hero.dark-hero .hero-copy h1 { color: #fff; }
.hero.dark-hero .hero-sub { color: rgba(233,240,252,.7); }
.hero.dark-hero .hero-sub.lead { color: #fff; }
.hero.dark-hero .hero-sub b { color: #fff; }
.hero.dark-hero .trustbar span { color: rgba(233,240,252,.72); }
.hero.dark-hero .btn-secondary { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); }
.hero.dark-hero .btn-secondary:hover { background: rgba(255,255,255,.12); border-color: var(--teal-light); }
.hero.dark-hero .blur-orb { opacity: .32; }

/* ---------- NODE CLUSTER (dark-hero right visual) ---------- */
.node-cluster { position: absolute; inset: 0; display: grid; place-items: center; }
.nc-ring {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  border-radius: 50%; border: 1px dashed rgba(126,180,226,.22);
  width: 56%; height: 56%; animation: hookSpin 44s linear infinite;
}
.nc-ring.r2 { width: 82%; height: 82%; border-style: solid; border-color: rgba(126,180,226,.13); animation-duration: 70s; }
.nc-ring.r3 { width: 104%; height: 104%; border-color: rgba(126,180,226,.07); }
.node-cluster::before {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 60%; height: 60%; border-radius: 50%;
  background: radial-gradient(circle, rgba(46,196,182,.20), transparent 70%); filter: blur(12px);
  animation: sunPulse 6s var(--ease) infinite;
}
.nc-core {
  position: relative; z-index: 2; width: 104px; height: 104px; border-radius: 28px;
  display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 48px; color: #fff;
  background: var(--gradient-main);
  box-shadow: 0 24px 60px rgba(30,58,138,.4), 0 0 0 8px rgba(46,196,182,.10), 0 0 44px rgba(46,196,182,.3);
  animation: hookPulse 5s var(--ease) infinite;
}
.nc-node {
  position: absolute; z-index: 3; top: 50%; left: 50%;
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: 110px; margin: -34px 0 0 -55px;
  font-size: 12px; font-weight: 600; text-align: center;
}
.nc-node em { font-style: normal; }
.nc-node.n1 { transform: translateY(-150px); }
.nc-node.n2 { transform: translate(150px, 0); }
.nc-node.n3 { transform: translateY(150px); }
.nc-node.n4 { transform: translate(-150px, 0); }
.nc-ic {
  width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
  background: rgba(13,27,52,.85); border: 1px solid rgba(126,180,226,.28); color: var(--teal-light);
  box-shadow: 0 12px 26px rgba(0,0,0,.4);
}
.nc-ic svg { width: 24px; height: 24px; }
/* light hero (About) variant — white chips, dark labels */
.hero:not(.dark-hero) .nc-node { color: var(--text-dark); }
.hero:not(.dark-hero) .nc-ic { background: #fff; border-color: var(--border); color: var(--primary-blue); box-shadow: var(--shadow-card); }
.hero:not(.dark-hero) .nc-ring { border-color: rgba(30,58,138,.16); }
.hero:not(.dark-hero) .nc-ring.r2 { border-color: rgba(30,58,138,.10); }
.hero.dark-hero .nc-node { color: rgba(233,240,252,.86); }

/* ---------- BLOG: topic circles ---------- */
.topic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 18px; }
.topic { text-align: center; }
.topic-ic {
  width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  box-shadow: 0 12px 26px rgba(17,24,39,.12); transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.topic:hover .topic-ic { transform: translateY(-5px) scale(1.05); box-shadow: 0 18px 34px rgba(17,24,39,.18); }
.topic-ic svg { width: 30px; height: 30px; }
.topic-ic.c1 { background: linear-gradient(135deg, #4F7CFF, #1E3A8A); }
.topic-ic.c2 { background: linear-gradient(135deg, #2EC4B6, #1CA7A6); }
.topic-ic.c3 { background: linear-gradient(135deg, #7C5CFC, #4F3BD0); }
.topic-ic.c4 { background: linear-gradient(135deg, #F59E0B, #D97706); }
.topic-ic.c5 { background: linear-gradient(135deg, #EC4899, #BE185D); }
.topic-ic.c6 { background: linear-gradient(135deg, #10B981, #059669); }
.topic-ic.c7 { background: linear-gradient(135deg, #06B6D4, #0E7490); }
.topic h3 { font-size: 16px; margin-bottom: 6px; }
.topic p { font-size: 13.5px; color: var(--text-muted); max-width: 240px; margin: 0 auto; }

/* ---------- BLOG: featured band ---------- */
.featured-band {
  display: grid; grid-template-columns: 1.4fr .6fr; gap: 30px; align-items: center;
  background: rgba(255,255,255,.04); border: 1px solid var(--glass-b); border-radius: 22px;
  padding: clamp(28px, 4vw, 48px);
}
.featured-copy .eyebrow { color: var(--teal-light); margin-bottom: 14px; }
.featured-copy h2 { color: #fff; margin-bottom: 14px; }
.featured-copy p { color: rgba(255,255,255,.72); font-size: 16.5px; margin-bottom: 24px; }
.featured-visual { position: relative; aspect-ratio: 1/1; display: grid; place-items: center; }
.featured-visual .nc-ring { width: 70%; height: 70%; }
.featured-visual .nc-ring.r2 { width: 96%; height: 96%; }
.fv-core {
  position: relative; z-index: 2; width: 88px; height: 88px; border-radius: 24px; display: grid; place-items: center;
  background: var(--gradient-main); color: #fff; box-shadow: 0 0 44px rgba(46,196,182,.4);
  animation: hookPulse 5s var(--ease) infinite;
}
.fv-core svg { width: 40px; height: 40px; }

/* ---------- LEGAL: shield hero visual ---------- */
.shield-visual { position: absolute; inset: 0; display: grid; place-items: center; }
.shield-visual .nc-ring { width: 56%; height: 56%; }
.shield-visual .nc-ring.r2 { width: 80%; height: 80%; }
.shield-visual .nc-ring.r3 { width: 102%; height: 102%; }
.shield-visual::before {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 54%; height: 54%; border-radius: 50%;
  background: radial-gradient(circle, rgba(46,196,182,.24), transparent 70%); filter: blur(14px);
  animation: sunPulse 6s var(--ease) infinite;
}
.shield {
  position: relative; z-index: 2; width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 34% 28%, rgba(79,124,255,.4), rgba(11,31,58,.9) 72%);
  border: 1px solid rgba(126,180,226,.3); color: var(--teal-light);
  box-shadow: 0 24px 60px rgba(2,8,22,.5), 0 0 50px rgba(46,196,182,.25);
  animation: hookPulse 5s var(--ease) infinite;
}
.shield svg { width: 74px; height: 74px; }
.legal-hero { padding-bottom: 70px; }

/* ---------- SCROLL REVEAL ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }
.reveal[data-d="5"] { transition-delay: .40s; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .authority-grid { grid-template-columns: repeat(3, 1fr); }
  .info-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 981px) and (max-width: 1199px) {
  .orbit-c1, .orbit-c2, .orbit-c3 { width: 58%; height: 58%; margin: -29% 0 0 -29%; }
  .cv-orbit { width: 76%; height: 76%; margin: -38% 0 0 -38%; }
}
@media (max-width: 980px) {
  :root { --section-pad: 64px; }
  .hero-grid, .hero-split { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { max-width: 460px; margin: 0 auto; order: -1; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
  .flow-line { display: none; }
  .layer-grid, .why-grid4, .position-grid { grid-template-columns: 1fr; }
  .problem-grid, .problem-grid.cols-3 { grid-template-columns: 1fr; max-width: 480px; }
  .results-metrics { grid-template-columns: repeat(2, 1fr); }
  .case-grid, .blog-grid, .value-grid { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
  .topic-grid { grid-template-columns: repeat(2, 1fr); max-width: 560px; margin: 0 auto; }
  .featured-band { grid-template-columns: 1fr; text-align: center; }
  .featured-visual { max-width: 240px; margin: 0 auto; order: -1; }
  .why2 { grid-template-columns: 1fr; gap: 38px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hook-card { padding: 10px 13px; }
  .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column; position: absolute; top: 100%; left: 16px; right: 16px;
    background: #fff; padding: 20px; border-radius: 14px; box-shadow: var(--shadow-hover); gap: 16px; align-items: flex-start;
    max-height: 76vh; overflow-y: auto;
  }
  .nav-links.open .drop-menu {
    position: static; transform: none; opacity: 1; visibility: visible; min-width: 0; width: 100%;
    border: none; background: transparent; box-shadow: none; padding: 4px 0 0 12px; display: none;
  }
  .nav-links.open .nav-drop.open .drop-menu { display: block; }
  .nav-toggle { display: grid; gap: 5px; padding: 8px; }
  .nav-toggle span { width: 22px; height: 2px; background: var(--text-dark); border-radius: 2px; }
  .grid-3 { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; }
  .results-metrics { gap: 14px; }
  .footer-grid, .team-grid, .info-grid { grid-template-columns: 1fr; }
  .authority-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-cta { width: 100%; }
  .hero-cta .btn { flex: 1; }
  .hook-core { width: 96px; height: 96px; font-size: 44px; border-radius: 24px; }
  .hook-card { padding: 9px 12px; gap: 9px; }
  .hook-card .hc-ic { width: 32px; height: 32px; }
  .hc-num { font-size: 17px; }
  .hc-label { font-size: 11px; }
  .orbit-c1, .orbit-c2, .orbit-c3 { width: 66%; height: 66%; margin: -33% 0 0 -33%; }
  .cv-core { width: 128px; height: 128px; padding: 14px; }
  .cv-core strong { font-size: 13px; }
  .cv-card { padding: 8px 11px; gap: 8px; }
  .cv-ic { width: 30px; height: 30px; font-size: 12px; }
  .cv-num { font-size: 15px; }
  .cv-orbit { width: 78%; height: 78%; margin: -39% 0 0 -39%; }
  .newsletter-form { flex-direction: column; }
  .audio-toggle { right: 14px; bottom: 14px; padding: 10px 14px 10px 12px; }
  .audio-hint { right: 14px; bottom: 60px; }
  .topic-grid { grid-template-columns: 1fr; max-width: 320px; }
  .nc-core { width: 84px; height: 84px; font-size: 38px; border-radius: 22px; }
  .nc-node { font-size: 11px; }
  .nc-node.n1 { transform: translateY(-118px); }
  .nc-node.n2 { transform: translate(118px, 0); }
  .nc-node.n3 { transform: translateY(118px); }
  .nc-node.n4 { transform: translate(-118px, 0); }
  .nc-ic { width: 44px; height: 44px; }
}

@media (max-width: 820px) {
  .popup.split { grid-template-columns: 1fr; max-width: 480px; }
  .popup-visual-side { display: none; }
  .popup-form-side { padding: 34px 26px; }
  .popup-form .pf-row { grid-template-columns: 1fr; }
  .popup-close { color: var(--text-muted); border-color: var(--border); background: #fff; }
  .popup-close:hover { color: var(--text-dark); }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .orbit, .orbit > .hook-card, .cv-orbit, .cv-card { animation: none !important; }
  .orbit-c1 { transform: rotate(-20deg); }
  .orbit-c2 { transform: rotate(110deg); }
  .orbit-c3 { transform: rotate(235deg); }
  .orbit-c1 > .hook-card { transform: translate(-50%, -50%) rotate(20deg); }
  .orbit-c2 > .hook-card { transform: translate(-50%, -50%) rotate(-110deg); }
  .orbit-c3 > .hook-card { transform: translate(-50%, -50%) rotate(-235deg); }
  .cv-orbit.o1 { transform: rotate(-30deg); }
  .cv-orbit.o2 { transform: rotate(60deg); }
  .cv-orbit.o3 { transform: rotate(150deg); }
  .cv-orbit.o4 { transform: rotate(240deg); }
  .cv-orbit.o1 .cv-card { transform: translate(-50%,-50%) rotate(30deg); }
  .cv-orbit.o2 .cv-card { transform: translate(-50%,-50%) rotate(-60deg); }
  .cv-orbit.o3 .cv-card { transform: translate(-50%,-50%) rotate(-150deg); }
  .cv-orbit.o4 .cv-card { transform: translate(-50%,-50%) rotate(-240deg); }
}