/* ════════════════════════════════════════════════════════════════
   DATA MASTERY · Landing Page
   Premium Tech Minimalist — light dominant, dark hero/CTA accents
   Brand tokens locked from Brand Guidelines
   ════════════════════════════════════════════════════════════════ */

:root{
  /* ── Brand palette ── */
  --ink:        #0B1E5C;
  --ink-2:      #0E2C7A;
  --deep:       #07112E;
  --blue:       #2D6DDB;
  --cyan:       #5CCDE8;
  --sky:        #38BDF8;
  --wire:       #7EC4E3;
  --whisper:    #F6F8FC;
  --paper:      #FFFFFF;
  --mute:       rgba(11,30,92,0.55);
  --mute-2:     rgba(11,30,92,0.72);
  --line:       rgba(11,30,92,0.10);
  --line-2:     rgba(11,30,92,0.18);

  /* ── Fonts ── */
  --display: 'Space Grotesk', system-ui, sans-serif;
  --body:    'DM Sans', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ── TWEAKABLE: accent (default sky) ── */
  --accent: #38BDF8;
  --accent-soft: color-mix(in srgb, var(--accent) 14%, white);
  --accent-ink: #0B1E5C;

  /* ── TWEAKABLE: density tokens ── */
  --sec-py: 132px;       /* vertical section padding */
  --gap: 28px;           /* default grid gap */
  --card-pad: 36px;
  --maxw: 1180px;
}

/* Density: compact */
[data-density="compact"]{
  --sec-py: 88px;
  --gap: 20px;
  --card-pad: 28px;
}

/* keep accent-soft in sync when accent changes via JS (set inline too) */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background:var(--accent); color:var(--ink); }

/* ── Reusable bits ── */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 40px; }
.eyebrow{
  font-family:var(--mono); font-size:12.5px; font-weight:500;
  letter-spacing:0.26em; text-transform:uppercase; color:var(--accent);
  display:inline-flex; align-items:center; gap:10px; margin:0 0 22px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; opacity:.7; }
.section-title{
  font-family:var(--display); font-weight:600; letter-spacing:-0.025em;
  font-size:clamp(34px, 4.6vw, 56px); line-height:1.04; margin:0; color:var(--ink);
  text-wrap:balance;
}
.lede{ font-size:clamp(18px,1.6vw,21px); line-height:1.55; color:var(--mute-2); max-width:60ch; }
.mono-tag{
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--mute);
}

/* ── Buttons ── */
.btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--display); font-weight:600; font-size:16px; letter-spacing:-0.01em;
  padding:15px 26px; border-radius:12px; border:1px solid transparent;
  transition:transform .25s cubic-bezier(.3,.7,.4,1), box-shadow .25s, background .2s, color .2s;
  white-space:nowrap;
}
.btn .arr{ transition:transform .25s cubic-bezier(.3,.7,.4,1); }
.btn:hover .arr{ transform:translateX(4px); }
.btn-primary{
  background:var(--ink); color:#fff;
  box-shadow:0 1px 2px rgba(11,30,92,.2), 0 10px 30px -12px rgba(11,30,92,.5);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 1px 2px rgba(11,30,92,.2), 0 18px 40px -14px rgba(11,30,92,.55); }
.btn-accent{ background:var(--accent); color:var(--ink); }
.btn-accent:hover{ transform:translateY(-2px); box-shadow:0 16px 36px -14px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn-ghost:hover{ background:var(--whisper); border-color:var(--ink); }
.on-dark .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.28); }
.on-dark .btn-ghost:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.6); }
.on-dark .btn-primary{ background:#fff; color:var(--ink); }

/* ── Generic card; style controlled by [data-card] ── */
.card{
  border-radius:20px; padding:var(--card-pad);
  transition:transform .3s cubic-bezier(.3,.7,.4,1), box-shadow .3s, border-color .3s, background .3s;
  position:relative;
}
/* outline (thin border) */
[data-card="outline"] .card{
  background:var(--paper); border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(11,30,92,.03);
}
[data-card="outline"] .card:hover{ border-color:var(--line-2); box-shadow:0 12px 34px -18px rgba(11,30,92,.28); transform:translateY(-3px); }
/* solid (filled whisper) */
[data-card="solid"] .card{
  background:var(--whisper); border:1px solid transparent;
}
[data-card="solid"] .card:hover{ background:#eef2fa; transform:translateY(-3px); box-shadow:0 14px 34px -20px rgba(11,30,92,.3); }
/* glass */
[data-card="glass"] .card{
  background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 14px 44px -22px rgba(11,30,92,.3);
}
[data-card="glass"] .card:hover{ transform:translateY(-3px); box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 22px 54px -22px rgba(11,30,92,.4); }

/* Dark-section cards (always glass-on-navy regardless of tweak) */
.on-dark .card,
.section.dark .card{
  background:rgba(255,255,255,.045);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:none;
}
.on-dark .card:hover{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.2); transform:translateY(-3px); }

/* ── Sections ── */
.section{ padding:var(--sec-py) 0; position:relative; }
.section.dark{
  background:linear-gradient(168deg, #07112E 0%, #0B1E5C 58%, #07112E 100%);
  color:#fff;
}
.section.dark .section-title{ color:#fff; }
.section.dark .lede{ color:rgba(255,255,255,.78); }
.section.dark .mono-tag{ color:rgba(255,255,255,.5); }
.section.whisper{ background:var(--whisper); }

/* ── Scroll reveal ── */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
.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; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ════════════════ NAV ════════════════ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  transition:background .3s, box-shadow .3s, border-color .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--line);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:80px; }
.brand{ display:flex; align-items:center; gap:14px; }
.brand .cube{ width:42px; height:48px; flex-shrink:0; }
.brand .cube svg{ width:100%; height:100%; display:block; }
.brand .name{
  font-family:var(--body); font-weight:900; font-size:21px;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--ink); line-height:1; white-space:nowrap;
}
.brand .est{ font-family:var(--mono); font-size:10px; letter-spacing:0.18em; color:var(--mute); margin-top:3px; }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{
  font-size:15px; font-weight:500; color:var(--mute-2); position:relative; padding:4px 0;
  transition:color .2s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background:var(--accent); transition:width .25s cubic-bezier(.3,.7,.4,1);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:18px; }
.nav .btn{ padding:11px 20px; font-size:15px; }
.nav-burger{ display:none; }

/* ════════════════ HERO ════════════════ */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(170deg, #07112E 0%, #0B1E5C 56%, #081637 100%);
  color:#fff; padding-top:160px; padding-bottom:120px;
}
.hero-grid-bg{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(124,196,227,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,196,227,.07) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 30%, #000 0%, transparent 75%);
          mask-image:radial-gradient(ellipse 80% 70% at 70% 30%, #000 0%, transparent 75%);
}
.hero-glow{
  position:absolute; width:620px; height:620px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 38%, transparent) 0%, transparent 65%);
  top:-160px; right:-120px; filter:blur(30px); opacity:.55; pointer-events:none;
}
.hero-inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:60px; align-items:center;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:13.5px; font-weight:600; letter-spacing:0.1em;
  padding:11px 20px; border-radius:999px;
  background:rgba(56,189,248,.12); border:1.5px solid rgba(56,189,248,.45);
  color:#fff; margin-bottom:14px;
  box-shadow:0 0 0 4px rgba(56,189,248,.07), 0 4px 20px rgba(0,0,0,.2);
}
.hero-announce{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:30px;
}
.hero-announce .hero-badge{
  margin-bottom:0; font-size:13.5px; font-weight:600; letter-spacing:.08em;
  padding:11px 20px;
}
.hero-eb-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:13.5px; font-weight:600; letter-spacing:.08em;
  padding:11px 20px; border-radius:999px;
  background:rgba(185,28,28,.18); border:1.5px solid rgba(252,165,165,.35);
  color:#fca5a5; white-space:nowrap;
  box-shadow:0 0 0 4px rgba(185,28,28,.06), 0 4px 20px rgba(0,0,0,.2);
}
.hero-eb-badge .eb-pct{ font-weight:800; color:#fff; }
.hero-cd{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:-0.01em;
  color:#fff;
}
.hero-cd-unit{ text-align:center; }
.hero-cd-num{ display:block; line-height:1; }
.hero-cd-sep{ color:rgba(255,255,255,.4); font-weight:400; margin-bottom:2px; }
.hero-badge .dot{ width:8px; height:8px; border-radius:50%; background:#34d399; box-shadow:0 0 0 0 rgba(52,211,153,.7); animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(52,211,153,.6);} 70%{ box-shadow:0 0 0 8px rgba(52,211,153,0);} 100%{ box-shadow:0 0 0 0 rgba(52,211,153,0);} }
.hero h1{
  font-family:var(--display); font-weight:700; letter-spacing:-0.035em;
  font-size:clamp(38px, 4.4vw, 62px); line-height:1.05; margin:0 0 28px;
}
.hero h1 .it{ font-style:italic; color:var(--accent); font-weight:500; }
.hero h1 .ln{ display:block; opacity:0; transform:translateY(30px); animation:lineUp .9s cubic-bezier(.2,.7,.3,1) forwards; }
.hero h1 .ln:nth-child(1){ animation-delay:.1s; }
.hero h1 .ln:nth-child(2){ animation-delay:.24s; }
.hero h1 .ln:nth-child(3){ animation-delay:.38s; }
@keyframes lineUp{ to{ opacity:1; transform:none; } }
.hero-sub{
  font-size:clamp(17px,1.5vw,20px); line-height:1.6; color:rgba(255,255,255,.8);
  max-width:54ch; margin:0 0 38px; opacity:0; animation:lineUp .9s cubic-bezier(.2,.7,.3,1) .54s forwards;
}
.hero-sub strong{ color:#fff; font-weight:600; }
/* homepage hero: keep each headline line unbroken */
.hero-home h1{ font-size:clamp(34px, 3.6vw, 50px); }
.hero-home h1 .it{ font-style:normal; }
@media (min-width:981px){ .hero-home h1 .ln{ white-space:nowrap; } }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; opacity:0; animation:lineUp .9s cubic-bezier(.2,.7,.3,1) .66s forwards; }

/* Hero cube visual */
.hero-visual{ position:relative; display:flex; align-items:center; justify-content:center; }
.hero-cube-stage{ width:min(420px, 80%); aspect-ratio:240/280; position:relative; will-change:transform; }
.hero-cube-stage svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 30px 60px rgba(0,0,0,.4)); }
.hero-cube-stage.spin{ animation:cubeFloat 9s ease-in-out infinite; }
@keyframes cubeFloat{ 0%,100%{ transform:translateY(0) rotate(-1deg);} 50%{ transform:translateY(-16px) rotate(1deg);} }
.hero-float-tag{
  position:absolute; font-family:var(--mono); font-size:11px; letter-spacing:0.1em;
  color:rgba(255,255,255,.7); padding:7px 12px; border-radius:9px;
  background:rgba(255,255,255,.06); border:1px solid rgba(124,196,227,.22);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); white-space:nowrap;
}
.hero-float-tag.t1{ top:8%; left:-4%; }
.hero-float-tag.t2{ bottom:14%; right:-6%; }
.hero-float-tag .c{ color:var(--accent); }

/* Hero pillars */
.hero-pillars{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  margin:0 0 32px; opacity:0; animation:lineUp .9s cubic-bezier(.2,.7,.3,1) .6s forwards;
}
.hero-pillar{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.04em;
  color:rgba(255,255,255,.9); padding:7px 13px; border-radius:9px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
}
.hp-no{ color:var(--accent); font-weight:700; font-size:10px; }
.hero-pillar-sep{ color:rgba(255,255,255,.3); font-size:13px; font-family:var(--mono); }

/* hero sub now above pillars */
.hero-sub{ margin:0 0 22px; }
[data-hero="center"] .hero-inner{ grid-template-columns:1fr; text-align:center; justify-items:center; gap:44px; }
[data-hero="center"] .hero-badge{ margin-left:auto; margin-right:auto; }
[data-hero="center"] .hero-sub{ margin-left:auto; margin-right:auto; }
[data-hero="center"] .hero-ctas{ justify-content:center; }
[data-hero="center"] .hero-visual{ order:-1; }
[data-hero="center"] .hero-cube-stage{ width:min(300px,60%); }
[data-hero="center"] .hero-float-tag.t1{ left:2%; }
[data-hero="center"] .hero-float-tag.t2{ right:2%; }

/* ════════════════ TRUST BAR ════════════════ */
.trust{
  background:var(--ink); color:#fff; padding:54px 0;
  position:relative; z-index:3;
}
.trust-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.trust-item{ padding:8px 40px; border-left:1px solid rgba(255,255,255,.12); }
.trust-item:first-child{ border-left:none; padding-left:0; }
.trust-num{
  font-family:var(--display); font-weight:700; font-size:clamp(44px,5vw,64px);
  line-height:1; letter-spacing:-0.03em; color:var(--accent); margin-bottom:10px;
}
.trust-label{ font-size:15px; line-height:1.45; color:rgba(255,255,255,.72); max-width:30ch; }

/* ════════════════ PAINPOINTS ════════════════ */
.head-block{ max-width:760px; margin-bottom:62px; }
.col-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
/* pain card — white bg, dark strong */

/* ════════ Pain illustrations ════════ */
.pain-illus{
  width:100%; height:148px; border-radius:14px; overflow:hidden; margin-bottom:26px;
  background:color-mix(in srgb, var(--accent) 7%, white);
  display:flex; align-items:center; justify-content:center;
}
.pain-illus svg{ width:100%; height:100%; }

.pain-card .pain-no{
  font-family:var(--mono); font-size:12px; font-weight:800; letter-spacing:.12em;
  color:#fff; margin-bottom:20px;
  display:inline-flex; align-items:center; gap:0;
  background:#0B1E5C; border:1.5px solid #0B1E5C;
  border-radius:6px; padding:5px 12px;
}
.pain-card .pain-no::after{ display:none; }
.pain-card p{ font-size:17px; line-height:1.65; color:var(--ink); margin:0; font-weight:500; }
.pain-card .x-mark{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:#ef4444; border:none;
  margin-bottom:26px; color:#fff; font-size:20px; font-weight:800;
}

/* ════════════════ VALUES ════════════════ */
.value-card .v-icon{
  width:54px; height:54px; border-radius:14px; display:grid; place-items:center;
  font-size:26px; margin-bottom:24px;
  background:linear-gradient(150deg, color-mix(in srgb, var(--accent) 22%, white), color-mix(in srgb, var(--cyan) 16%, white));
}
.value-card h3{ font-family:var(--display); font-weight:600; font-size:22px; letter-spacing:-0.01em; margin:0 0 12px; }
.value-card p{ font-size:16px; line-height:1.6; color:var(--mute-2); margin:0; }
.section.dark .value-card .v-icon{ background:rgba(255,255,255,.08); }
.section.dark .value-card p{ color:rgba(255,255,255,.74); }

/* ════════════════ COURSE DETAIL ════════════════ */
.course-grid{ display:grid; grid-template-columns:360px 1fr; gap:60px; align-items:start; }
.course-aside{ position:sticky; top:104px; }
.course-name{ font-family:var(--display); font-weight:700; font-size:34px; letter-spacing:-0.025em; line-height:1.06; margin:18px 0 16px; }
.course-blurb{ font-size:16px; line-height:1.6; color:var(--mute-2); margin:0 0 30px; }
.meta-box{ border-radius:18px; overflow:hidden; border:1px solid var(--line); }
.meta-row{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 22px; border-bottom:1px solid var(--line); }
.meta-row:last-child{ border-bottom:none; }
.meta-row .k{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); }
.meta-row .v{ font-weight:600; font-size:15.5px; text-align:right; }
.meta-row .v.soon{ font-weight:500; color:var(--mute); font-style:italic; }
.tag-live{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px;
  letter-spacing:.08em; padding:7px 14px; border-radius:999px;
  background:color-mix(in srgb, #34d399 14%, white); color:#0a7a52; border:1px solid color-mix(in srgb, #34d399 35%, white);
}
.tag-live .dot{ width:7px; height:7px; border-radius:50%; background:#22c55e; }
.outcome{ display:flex; gap:22px; padding:30px 0; border-bottom:1px solid var(--line); }
.outcome:first-of-type{ border-top:1px solid var(--line); }
.outcome .num{
  font-family:var(--display); font-weight:700; font-size:30px; color:var(--accent);
  line-height:1; flex-shrink:0; width:48px; letter-spacing:-0.02em;
}
.outcome h4{ font-family:var(--display); font-weight:600; font-size:21px; letter-spacing:-0.01em; margin:0 0 9px; }
.outcome p{ font-size:16px; line-height:1.58; color:var(--mute-2); margin:0; }
.result-box{
  margin-top:38px; padding:34px 38px; border-radius:20px; position:relative; overflow:hidden;
  background:linear-gradient(150deg, #07112E, #0B1E5C); color:#fff;
}
.result-box .rb-label{ font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.result-box p{ font-size:20px; line-height:1.5; font-family:var(--display); font-weight:500; letter-spacing:-0.01em; margin:0; }
.result-box .rb-glow{ position:absolute; right:-60px; bottom:-80px; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb,var(--accent) 40%, transparent), transparent 70%); filter:blur(20px); opacity:.5; }

/* instructor badge */
.course-instructor{
  display:inline-flex; align-items:center; gap:14px;
  background:var(--whisper); border:1px solid var(--line);
  border-radius:14px; padding:12px 18px;
}
.ci-avatar{
  width:64px; height:64px; border-radius:50%; flex-shrink:0;
  overflow:hidden; border:2px solid rgba(45,109,219,.25);
}
.ci-label{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); margin-bottom:3px; }
.ci-name{ font-family:var(--display); font-weight:700; font-size:16px; color:var(--ink); letter-spacing:-0.01em; }
.ci-role{ font-family:var(--mono); font-size:11.5px; color:var(--mute); margin-top:2px; letter-spacing:.02em; }

/* ════════════════ SYLLABUS 3-PANE GRID ════════════════ */
.syllabus-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start;
}
.syl-pane{
  border-radius:18px; overflow:hidden;
  background:linear-gradient(170deg, #07112E 0%, #0d1f4a 100%);
  border:1px solid rgba(92,205,232,.18);
  box-shadow:0 8px 32px rgba(0,0,0,.25);
  display:flex; flex-direction:column;
}
.syl-pane-2{ border-color:rgba(45,109,219,.28); }
.syl-pane-3{ border-color:rgba(124,58,237,.28); }
/* syl-pane-head with visual */
.syl-pane-head{ padding:22px 20px 14px; border-bottom:1px solid rgba(255,255,255,.07); position:relative; }
.syl-pane-head-inner{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.syl-pane-head-text{ flex:1; min-width:0; }
.syl-visual{ width:96px; height:80px; flex-shrink:0; opacity:.9; }
.syl-phase-label{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.4); margin-bottom:12px; display:flex; align-items:center; gap:8px;
}
.syl-phase-label::before{ content:"●"; color:var(--accent); font-size:7px; }
.syl-phase-label span{ color:rgba(255,255,255,.6); }
.syl-phase-num{
  font-family:var(--display); font-weight:800; font-size:52px; line-height:1;
  color:var(--accent); letter-spacing:-0.04em; margin-bottom:6px;
}
.syl-phase-title{
  font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:-0.01em;
  color:#fff; margin-bottom:10px; line-height:1.2;
}
.syl-phase-meta{ display:flex; align-items:center; gap:7px; margin-bottom:14px; }
.syl-badge{
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.08em;
  color:var(--accent); background:rgba(56,189,248,.12); border:1px solid rgba(56,189,248,.25);
  padding:4px 10px; border-radius:6px;
}
.syl-badge-ai{ color:#a78bfa; background:rgba(167,139,250,.1); border-color:rgba(167,139,250,.25); }
.syl-dot{ color:rgba(255,255,255,.3); }
.syl-phase-meta span:last-child{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:rgba(255,255,255,.45); }
.syl-desc{ font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.65); margin:0; }
.syl-lessons{ padding:6px 0; flex:1; }
.syl-lesson{
  display:flex; align-items:flex-start; gap:12px; padding:11px 20px;
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:background .2s;
}
.syl-lesson:last-child{ border-bottom:none; }
.syl-lesson:hover{ background:rgba(255,255,255,.03); }
.syl-ln{
  font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.06em;
  color:var(--accent); background:rgba(56,189,248,.1); border:1px solid rgba(56,189,248,.18);
  padding:3px 7px; border-radius:5px; flex-shrink:0; margin-top:1px;
}
.syl-ln-ai{ color:#a78bfa; background:rgba(167,139,250,.1); border-color:rgba(167,139,250,.2); }
.syl-lt{ font-family:var(--display); font-weight:600; font-size:13.5px; color:#fff; margin-bottom:3px; }
.syl-lt-empty{ font-family:var(--mono); font-weight:400; font-size:12px; color:rgba(255,255,255,.28); font-style:italic; }
.syl-ld{ font-family:var(--body); font-size:12px; line-height:1.5; color:rgba(255,255,255,.5); }
.syl-placeholder .syl-lt{ color:rgba(255,255,255,.3); }
.syl-result{
  margin:0; padding:14px 20px; background:rgba(56,189,248,.06);
  border-top:1px solid rgba(56,189,248,.14);
}
.syl-result-label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); margin-bottom:8px;
}
.syl-result p{ font-size:13px; line-height:1.55; color:rgba(255,255,255,.72); margin:0; }
.syl-result strong{ color:#fff; font-weight:700; }
.syl-new{
  display:inline-block; font-family:var(--mono); font-size:9px; font-weight:700;
  letter-spacing:.08em; color:#a78bfa; background:rgba(167,139,250,.15);
  border:1px solid rgba(167,139,250,.3); padding:2px 6px; border-radius:4px;
  margin-left:6px; vertical-align:middle;
}
@media(max-width:900px){ .syllabus-grid{ grid-template-columns:1fr; } }

/* ════════════════ BENEFITS ════════════════ */
.benefits-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap); }
.benefit-card{ display:flex; flex-direction:column; gap:16px; }
.benefit-icon{ font-size:36px; line-height:1; }
.benefit-title{ font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-0.01em; color:var(--ink); margin:0; }
.benefit-desc{ font-size:16px; line-height:1.65; color:var(--mute-2); margin:0; }
@media(max-width:640px){ .benefits-grid{ grid-template-columns:1fr; } }

/* ════════ 3-COLUMN PRICING ════════ */
.pricing-3-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:54px; align-items:start;
}
.p3-card{
  border-radius:20px; padding:32px 28px; display:flex; flex-direction:column; gap:0;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  transition:border-color .3s, background .3s; position:relative; overflow:hidden; min-height:560px;
}
.p3-card:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); }
.p3-featured{
  background:rgba(255,255,255,.09); border:1.5px solid var(--accent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent), 0 24px 60px rgba(0,0,0,.3);
  transform:translateY(-8px);
}
.p3-featured:hover{ background:rgba(255,255,255,.12); }
.p3-featured-badge{
  position:absolute; top:0; left:0; right:0;
  background:var(--accent); color:var(--ink);
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.1em;
  text-align:center; padding:8px 0; text-transform:uppercase;
}
.p3-label{
  font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:12px; margin-top:0;
}
.p3-featured .p3-label{ margin-top:38px; }
.p3-price{
  font-family:var(--display); font-weight:800; font-size:clamp(28px,3vw,38px);
  letter-spacing:-0.03em; color:#fff; line-height:1; margin-bottom:6px;
}
.p3-curr{ font-size:.52em; font-weight:600; color:rgba(255,255,255,.7); }
.p3-saving{ font-family:var(--mono); font-size:11.5px; color:rgba(255,255,255,.5); margin-bottom:12px; }
.p3-saving strong{ color:#34d399; }
.p3-desc{ font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.65); margin-bottom:16px; }
.p3-divider{ height:1px; background:rgba(255,255,255,.1); margin:16px 0; }
.p3-features{ list-style:none; padding:0; margin:0 0 20px; display:flex; flex-direction:column; gap:9px; }
.p3-features li{ font-size:14px; color:rgba(255,255,255,.82); display:flex; align-items:center; gap:9px; }
.p3-features li::before{
  content:"✓"; width:18px; height:18px; border-radius:50%; flex-shrink:0;
  background:rgba(56,189,248,.15); color:var(--accent); font-weight:800; font-size:10px;
  display:grid; place-items:center;
}
.p3-meta{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; padding:14px; border-radius:12px; background:rgba(255,255,255,.05); }
.p3-meta-row{ display:flex; justify-content:space-between; align-items:center; font-size:13px; color:rgba(255,255,255,.65); gap:8px; }
.p3-meta-row strong{ color:#fff; font-weight:600; text-align:right; }
@media(max-width:900px){ .pricing-3-grid{ grid-template-columns:1fr; } .p3-featured{ transform:none; } }

/* ════════════════ PRICING (old) ════════════════ */
.pricing-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:center; }
.pricing-card{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  border-radius:24px; padding:36px 38px;
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
}
.pricing-original{
  display:flex; align-items:center; gap:12px; margin-bottom:8px;
  font-size:17px; color:rgba(255,255,255,.45);
}
.pricing-original s{ color:rgba(255,255,255,.4); font-size:18px; }
.pricing-badge-off{
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.06em;
  background:#b91c1c; color:#fff; padding:3px 10px; border-radius:6px;
}
.pricing-price{
  font-family:var(--display); font-weight:800; font-size:clamp(44px,5vw,60px);
  line-height:1; letter-spacing:-0.03em; color:#fff; margin-bottom:16px;
}
.pricing-curr{ font-size:.5em; font-weight:500; color:rgba(255,255,255,.7); }
.pricing-deadline{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.04em;
  color:rgba(255,255,255,.7); background:rgba(185,28,28,.15);
  border:1px solid rgba(185,28,28,.3); border-radius:9px; padding:8px 14px; margin-bottom:24px;
}
.pricing-deadline strong{ color:#fca5a5; }
.pricing-includes{ display:flex; flex-direction:column; gap:12px; margin-bottom:28px; }
.pricing-row{ display:flex; align-items:center; gap:11px; font-size:15.5px; color:rgba(255,255,255,.82); }
.pricing-ck{
  width:22px; height:22px; border-radius:50%; background:var(--accent); color:var(--ink);
  display:grid; place-items:center; font-size:11px; font-weight:700; flex-shrink:0;
}
.pricing-meta-row{ display:flex; gap:0; flex-wrap:wrap; margin-bottom:20px; border:1px solid rgba(255,255,255,.1); border-radius:12px; overflow:hidden; }
.pricing-meta-item{ flex:1; min-width:0; padding:12px 16px; border-right:1px solid rgba(255,255,255,.1); }
.pricing-meta-item:last-child{ border-right:none; }
.pricing-meta-k{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:4px; }
.pricing-meta-v{ font-family:var(--display); font-weight:600; font-size:14px; color:#fff; }
.pillar{
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  transition:border-color .25s, box-shadow .25s;
}
.pillar:hover{ border-color:var(--line-2); box-shadow:0 4px 20px rgba(11,30,92,.08); }
.pillar.open{ border-color:color-mix(in srgb,var(--accent) 40%,white); box-shadow:0 4px 24px rgba(11,30,92,.1); }
.pillar-header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 26px; cursor:pointer; user-select:none;
  transition:background .2s;
}
.pillar-header:hover{ background:var(--whisper); }
.pillar.open .pillar-header{ background:color-mix(in srgb,var(--accent) 6%,white); }
.pillar-left{ display:flex; align-items:center; gap:18px; }
.pillar-no{
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.12em;
  color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,white);
  padding:5px 10px; border-radius:7px; flex-shrink:0;
}
.pillar-no-ai{
  color:#7c3aed; background:rgba(124,58,237,.1);
}
.pillar-title{ font-family:var(--display); font-weight:600; font-size:19px; letter-spacing:-0.01em; color:var(--ink); }
.pillar-sub{ font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--mute); margin-top:4px; }
.pillar-toggle{
  width:30px; height:30px; border-radius:50%; border:1.5px solid var(--line-2);
  display:grid; place-items:center; font-size:18px; color:var(--mute); flex-shrink:0;
  transition:transform .3s cubic-bezier(.3,.7,.4,1), background .2s, color .2s;
  font-weight:300;
}
.pillar.open .pillar-toggle{ transform:rotate(45deg); background:var(--accent); color:var(--ink); border-color:var(--accent); }
.pillar-body{ height:0; overflow:hidden; transition:height .35s cubic-bezier(.3,.7,.4,1); }
.pillar-body-inner{ padding:0 26px 24px; }
.pillar-placeholder{
  font-family:var(--mono); font-size:13px; letter-spacing:.06em; color:var(--mute);
  padding:20px 0; border-top:1px dashed var(--line);
}
.pillar-arrow{
  text-align:center; font-size:22px; color:var(--accent); opacity:.5;
  font-family:var(--mono); line-height:1; padding:4px 0;
}
/* ════════════════ AUDIENCE CARDS ════════════════ */
.audience-card{ display:flex; flex-direction:column; gap:0; }
.aud-badge{
  font-family:var(--mono); font-size:11.5px; font-weight:800; letter-spacing:.14em;
  color:#fff; background:var(--ink); border-radius:6px; padding:5px 12px;
  display:inline-block; margin-bottom:18px;
}
.aud-icon{ font-size:32px; margin-bottom:14px; }
.aud-title{
  font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-0.02em;
  color:var(--ink); margin:0 0 12px; line-height:1.2;
}
.aud-desc{ font-size:15.5px; line-height:1.65; color:var(--mute-2); margin:0 0 20px; }
.aud-checks{
  list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px;
  margin-top:auto; padding-top:18px; border-top:1px solid var(--line);
}
.aud-checks li{
  font-size:14px; line-height:1.5; color:var(--ink); font-weight:500;
  display:flex; align-items:flex-start; gap:9px;
}
.aud-checks li::before{
  content:"✓"; flex-shrink:0; width:20px; height:20px; border-radius:50%;
  background:color-mix(in srgb, var(--accent) 18%, white);
  color:var(--blue); font-weight:800; font-size:11px;
  display:grid; place-items:center; margin-top:1px;
}
.audience{ text-align:center; }
.audience .big{
  font-family:var(--display); font-weight:600; letter-spacing:-0.025em;
  font-size:clamp(28px,3.6vw,48px); line-height:1.18; max-width:18ch; margin:30px auto 0; text-wrap:balance;
}
.audience .big mark{ background:none; color:var(--accent); }
.audience .big .u{ position:relative; white-space:nowrap; }

/* ════════════════ SOCIAL PROOF ════════════════ */
.testi-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap); margin-bottom:64px; }
.testi-card{ display:flex; flex-direction:column; }
.testi-card .quote-mark{ font-family:var(--display); font-size:54px; line-height:0.6; color:var(--accent); height:30px; }
.testi-card blockquote{ font-family:var(--display); font-weight:500; font-size:21px; line-height:1.45; letter-spacing:-0.01em; margin:20px 0 28px; color:var(--ink); }
.testi-author{ display:flex; align-items:center; gap:14px; margin-top:auto; }
.testi-avatar{ width:48px; height:48px; border-radius:50%; flex-shrink:0; background:linear-gradient(140deg, var(--blue), var(--ink)); display:grid; place-items:center; color:#fff; font-family:var(--display); font-weight:600; }
.testi-author .a-name{ font-weight:600; font-size:15.5px; }
.testi-author .a-role{ font-family:var(--mono); font-size:11.5px; color:var(--mute); letter-spacing:.04em; }
.proof-header{ font-family:var(--mono); font-size:13px; letter-spacing:.14em; color:var(--mute); margin-bottom:24px; }
.proof-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.proof-img{ position:relative; }
.proof-img .ph{ aspect-ratio:4/5; border-radius:16px; }
.proof-img .cap{ font-family:var(--mono); font-size:10.5px; line-height:1.5; letter-spacing:.04em; color:var(--mute); margin-top:12px; }

/* image placeholder (striped) */
.ph{
  background:
    repeating-linear-gradient(135deg, rgba(11,30,92,.05) 0 10px, rgba(11,30,92,.02) 10px 20px),
    var(--whisper);
  border:1px solid var(--line); border-radius:16px;
  display:grid; place-items:center; position:relative; overflow:hidden;
}
.ph .ph-label{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); text-align:center; padding:12px; }
.ph .ph-ico{ position:absolute; top:14px; left:14px; width:9px; height:9px; border-radius:2px; background:var(--accent); opacity:.6; }

/* ════════════════ COMING SOON ════════════════ */
.soon-card{
  position:relative; overflow:hidden; border-radius:26px; padding:64px clamp(32px,5vw,80px);
  background:linear-gradient(150deg, #07112E 0%, #0B1E5C 60%, #07112E 100%); color:#fff;
  display:grid; grid-template-columns:1fr auto; gap:48px; align-items:center;
}
.soon-card .soon-grid-bg{
  position:absolute; inset:0; opacity:.4; pointer-events:none;
  background-image:linear-gradient(rgba(124,196,227,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(124,196,227,.08) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 20% 50%, #000, transparent 80%);
          mask-image:radial-gradient(ellipse 70% 80% at 20% 50%, #000, transparent 80%);
}
.soon-badge{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px;
  letter-spacing:.1em; padding:8px 15px; border-radius:999px; margin-bottom:22px;
  background:rgba(255,255,255,.07); border:1px solid rgba(124,196,227,.3); color:rgba(255,255,255,.9);
}
.soon-card h3{ font-family:var(--display); font-weight:700; font-size:clamp(30px,3.6vw,44px); letter-spacing:-0.03em; margin:0 0 18px; position:relative; z-index:1; }
.soon-card p{ font-size:17px; line-height:1.6; color:rgba(255,255,255,.78); max-width:56ch; margin:0; position:relative; z-index:1; }
.soon-card .soon-cta{ position:relative; z-index:1; }
.soon-cube{ width:200px; position:relative; z-index:1; flex-shrink:0; }

/* ════════════════ FAQ ════════════════ */
.faq-wrap{ max-width:860px; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item:first-child{ border-top:1px solid var(--line); }
.faq-q{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:28px 6px; font-family:var(--display); font-weight:600; font-size:clamp(18px,2vw,23px);
  letter-spacing:-0.01em; color:var(--ink); transition:color .2s;
}
.faq-q:hover{ color:var(--blue); }
.faq-ico{ flex-shrink:0; width:26px; height:26px; position:relative; }
.faq-ico::before, .faq-ico::after{ content:""; position:absolute; background:var(--accent); border-radius:2px; transition:transform .3s cubic-bezier(.3,.7,.4,1); }
.faq-ico::before{ left:50%; top:4px; width:2.4px; height:18px; transform:translateX(-50%); }
.faq-ico::after{ top:50%; left:4px; height:2.4px; width:18px; transform:translateY(-50%); }
.faq-item.open .faq-ico::before{ transform:translateX(-50%) scaleY(0); }
.faq-a{ overflow:hidden; height:0; transition:height .35s cubic-bezier(.3,.7,.4,1); }
.faq-a-inner{ padding:0 6px 30px; font-size:17px; line-height:1.65; color:var(--mute-2); max-width:64ch; }

/* ════════════════ TEAM ════════════════ */
.team-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); }
.team-card{ display:flex; flex-direction:column; }
.team-photo .ph{ aspect-ratio:3/4; border-radius:20px; }
.team-body{ padding:24px 0 0; }
.team-name{ font-family:var(--display); font-weight:700; font-size:24px; letter-spacing:-0.02em; margin:0 0 5px; }
.team-role{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--blue); font-weight:500; margin:0; line-height:1.4; }
.team-prev{ font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--mute); margin:0 0 20px; }
.team-divider{ width:40px; height:2px; background:var(--accent); margin:0 0 18px; border:0; }
.team-creds{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.team-creds li{ display:flex; align-items:flex-start; gap:10px; font-size:15px; line-height:1.5; color:var(--mute-2); }
.team-creds li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0; margin-top:7px; }

/* Industry tags */
.team-industries{ display:flex; gap:7px; flex-wrap:wrap; margin:14px 0 16px; }
.team-ind{
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; padding:4px 10px; border-radius:6px;
  background:color-mix(in srgb, var(--blue) 10%, white); color:var(--blue);
  border:1px solid color-mix(in srgb, var(--blue) 22%, white);
}
.team-ind-cyan{
  background:color-mix(in srgb, var(--cyan) 12%, white); color:#0e7490;
  border-color:color-mix(in srgb, var(--cyan) 28%, white);
}

/* Stats row */
.team-stats{ display:flex; gap:24px; margin-bottom:18px; }
.team-stat{ flex:1; }
.team-stat-n{
  font-family:var(--display); font-weight:800; font-size:32px; letter-spacing:-0.03em;
  color:var(--blue); line-height:1; margin-bottom:4px;
}
.team-stat-l{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--mute); line-height:1.5; }

/* Card differentiation */
.team-card-nhi{ background:var(--whisper); }

@media(max-width:680px){ .team-grid{ grid-template-columns:1fr; } }

/* ════════════════ CTA + FORM ════════════════ */
.cta-form-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:start; }
.cta-copy h2{ font-family:var(--display); font-weight:700; font-size:clamp(34px,4.4vw,52px); letter-spacing:-0.03em; line-height:1.04; margin:0 0 22px; }
.cta-copy .lede{ color:rgba(255,255,255,.8); }
.cta-copy .cta-points{ list-style:none; padding:0; margin:36px 0 0; display:flex; flex-direction:column; gap:16px; }
.cta-copy .cta-points li{ display:flex; align-items:center; gap:13px; color:rgba(255,255,255,.85); font-size:15.5px; }
.cta-copy .cta-points .ck{ width:22px; height:22px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; background:var(--accent); color:var(--ink); font-size:12px; font-weight:700; }
.form-card{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:24px; padding:clamp(28px,3vw,42px);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
}
.field{ margin-bottom:20px; }
.field label{ display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.65); margin-bottom:9px; }
.field label .req{ color:var(--accent); }
.field input, .field select, .field textarea{
  width:100%; font-family:var(--body); font-size:16px; color:#fff;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.16); border-radius:11px;
  padding:14px 16px; transition:border-color .2s, background .2s, box-shadow .2s; outline:none;
}
.field input::placeholder, .field textarea::placeholder{ color:rgba(255,255,255,.4); }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--accent); background:rgba(255,255,255,.07);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.field select option{ color:#0B1E5C; }
.field textarea{ resize:vertical; min-height:96px; line-height:1.5; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-card .btn{ width:100%; justify-content:center; margin-top:6px; }
.form-note{ font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:rgba(255,255,255,.5); text-align:center; margin-top:18px; }
.form-success{
  display:none; text-align:center; padding:30px 10px;
}
.form-success.show{ display:block; animation:lineUp .6s cubic-bezier(.2,.7,.3,1); }
.form-success .ok{ width:60px; height:60px; border-radius:50%; background:var(--accent); color:var(--ink); display:grid; place-items:center; margin:0 auto 22px; font-size:28px; }
.form-success h4{ font-family:var(--display); font-weight:600; font-size:24px; margin:0 0 12px; }
.form-success p{ color:rgba(255,255,255,.75); font-size:16px; margin:0; }

/* ════════════════ FOOTER ════════════════ */
.footer{ background:var(--deep); color:#fff; padding:72px 0 40px; }
.footer-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer .brand .name{ color:#fff; }
.footer .brand .est{ color:rgba(255,255,255,.5); }
.footer-tag{ font-family:var(--mono); font-size:13px; letter-spacing:.1em; color:rgba(255,255,255,.55); margin-top:18px; }
.footer-links{ display:flex; gap:28px; flex-wrap:wrap; }
.footer-links a{ font-size:15px; color:rgba(255,255,255,.7); transition:color .2s; }
.footer-links a:hover{ color:var(--accent); }
.footer-bottom{ padding-top:30px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:rgba(255,255,255,.4); }

/* ════════════════ RESPONSIVE ════════════════ */
@media (max-width: 980px){
  :root{ --sec-py:84px; }
  .hero-inner{ grid-template-columns:1fr; gap:48px; }
  .hero-visual{ order:-1; }
  .hero-cube-stage{ width:min(280px,60%); }
  .course-grid{ grid-template-columns:1fr; gap:44px; }
  .course-aside{ position:static; }
  .founder-grid{ grid-template-columns:1fr; gap:40px; }
  .cta-form-grid{ grid-template-columns:1fr; gap:44px; }
  .soon-card{ grid-template-columns:1fr; gap:32px; }
  .soon-cube{ display:none; }
}
/* keep the full link bar on laptops/preview — collapse to menu button only on small screens */
@media (min-width:921px) and (max-width:1080px){
  .nav-links{ gap:18px; }
  .nav-links a, .nav-drop-trigger{ font-size:14px; }
  .nav .btn{ padding:10px 15px; font-size:14px; }
  .nav-inner{ height:72px; }
  .brand .name{ font-size:17px; letter-spacing:.1em; }
  .brand .cube{ width:34px; height:40px; }
}
@media (max-width:920px){
  .nav-links{ display:none; }
  .nav-burger{ display:grid; }
}
@media (max-width: 480px){
  .col-3{ grid-template-columns:1fr; }
  .trust-grid{ grid-template-columns:1fr; gap:30px; }
  .trust-item{ border-left:none; padding:0; border-top:1px solid rgba(255,255,255,.12); padding-top:26px; }
  .trust-item:first-child{ border-top:none; padding-top:0; }
  .testi-grid{ grid-template-columns:1fr; }
  .proof-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 480px){
  .wrap{ padding:0 22px; }
  body{ font-size:16px; }
  .field-row{ grid-template-columns:1fr; }
  .proof-grid{ grid-template-columns:1fr; }
  .hero{ padding-top:130px; }
}

/* Nav transparent-on-dark state */
.nav:not(.scrolled) .brand .name{ color:#fff; }
.nav:not(.scrolled) .brand .est{ color:rgba(255,255,255,.55); }
.nav:not(.scrolled) .nav-links a{ color:rgba(255,255,255,.75); }
.nav:not(.scrolled) .nav-links a:hover{ color:#fff; }
.nav:not(.scrolled) .nav-links a::after{ background:#fff; }
.nav:not(.scrolled) .btn-primary{ background:#fff; color:var(--ink); box-shadow:0 10px 30px rgba(0,0,0,.25); }
.nav:not(.scrolled) .nav-burger span{ background:#fff; }
.nav:not(.scrolled) .nav-burger{ border-color:rgba(255,255,255,.3); }
.mobile-menu{
  position:fixed; inset:0; z-index:1100; background:rgba(7,17,46,.97);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  display:flex; flex-direction:column; justify-content:center; gap:8px; padding:40px;
  transform:translateY(-100%); transition:transform .4s cubic-bezier(.3,.7,.4,1); visibility:hidden;
}
.mobile-menu.open{ transform:none; visibility:visible; }
.mobile-menu a{ font-family:var(--display); font-weight:600; font-size:32px; color:#fff; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.mobile-menu .mm-close{ position:absolute; top:28px; right:28px; background:none; border:0; color:#fff; font-size:32px; cursor:pointer; }
.nav-burger{ width:42px; height:42px; border:1px solid var(--line-2); border-radius:11px; background:none; cursor:pointer; place-items:center; gap:4px; }
.nav-burger span{ display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; }

/* ════════════════ HERO V2 VISUAL ════════════════ */
.hero-v2-stage{
  position:relative; width:min(640px,100%); user-select:none; padding-bottom:42px;
}

/* badge row */
.hv-badges{ display:flex; gap:12px; margin-bottom:16px; }
.hv-badge{
  display:flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15);
  border-radius:12px; padding:9px 16px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.hv-badge-icon{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex-shrink:0; }
.hv-badge-label{ font-family:var(--mono); font-size:14px; font-weight:600; letter-spacing:.08em; color:#fff; }

/* SQL editor window — WHITE theme */
.hv-sql-win{
  border-radius:14px; overflow:hidden;
  background:#ffffff;
  border:1px solid rgba(11,30,92,.13);
  box-shadow:0 24px 60px rgba(11,30,92,.18), 0 1px 0 rgba(255,255,255,.9) inset;
}
.hv-win-bar{
  display:flex; align-items:center; gap:6px; padding:11px 16px;
  background:#f3f5f9; border-bottom:1px solid rgba(11,30,92,.08);
}
.hv-dot{ width:11px; height:11px; border-radius:50%; display:inline-block; }
.hv-win-title{ font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:rgba(11,30,92,.38); margin-left:8px; }
.hv-code{ padding:14px 0 10px; background:#fff; }
.hv-line{
  display:flex; align-items:baseline; gap:0;
  font-family:var(--mono); font-size:13.5px; line-height:2; padding:0 18px;
}
.hv-ln{ width:24px; flex-shrink:0; color:rgba(11,30,92,.22); font-size:11px; text-align:right; margin-right:14px; }
.hv-kw{ color:#2D6DDB; font-weight:700; }
.hv-fn{ color:#0e7490; }
.hv-tbl{ color:#7c3aed; }
.hv-col{ color:#0B1E5C; }
.hv-str{ color:#16a34a; }
.hv-num{ color:#d97706; }
.hv-op{ color:rgba(11,30,92,.35); }
.hv-cursor{ color:#2D6DDB; animation:blink .9s step-end infinite; font-weight:300; }
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:0} }
.hv-cursor-line{ background:rgba(45,109,219,.05); border-radius:3px; }

/* result table — light */
.hv-result{ border-top:1px solid rgba(11,30,92,.08); }
.hv-result-bar{
  display:flex; align-items:center; gap:8px; padding:7px 16px;
  background:#f8fafc; font-family:var(--mono); color:rgba(11,30,92,.4);
}
.hv-res-dot{ width:7px; height:7px; border-radius:50%; background:#22c55e; display:inline-block; }
.hv-trow{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:0;
  font-family:var(--mono); font-size:12.5px; padding:6px 18px; color:rgba(11,30,92,.7);
}
.hv-thead{ color:rgba(11,30,92,.38); font-size:10.5px; letter-spacing:.06em; border-bottom:1px solid rgba(11,30,92,.07); padding-top:7px; }
.hv-trow-muted{ opacity:.5; }
.hv-num-cell{ color:#2D6DDB; font-weight:600; }

/* AI panel — DARK contrast */
.hv-ai-panel{
  position:absolute; bottom:-28px; right:-28px;
  width:268px;
  background:linear-gradient(150deg, #07112E 0%, #0B1E5C 100%);
  border:1px solid rgba(92,205,232,.22);
  border-radius:16px; overflow:hidden;
  box-shadow:0 20px 54px rgba(0,0,0,.45), 0 0 0 1px rgba(92,205,232,.08) inset;
}
.hv-ai-header{
  display:flex; align-items:center; gap:8px; padding:11px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(90deg, rgba(56,189,248,.12), transparent);
}
.hv-ai-dot{ color:#38BDF8; font-size:14px; }
.hv-ai-title{ font-family:var(--display); font-weight:700; font-size:13px; color:#fff; }
.hv-ai-status{
  margin-left:auto; font-family:var(--mono); font-size:10px; letter-spacing:.06em;
  color:#34d399; background:rgba(52,211,153,.14); padding:3px 8px; border-radius:999px; border:1px solid rgba(52,211,153,.25);
}
.hv-ai-prompt{ padding:12px 14px; display:flex; flex-direction:column; gap:9px; }
.hv-ai-msg{ font-size:12.5px; line-height:1.5; border-radius:9px; padding:8px 11px; }
.hv-ai-msg.user{ background:rgba(255,255,255,.08); color:rgba(255,255,255,.75); align-self:flex-end; font-style:italic; font-family:var(--body); }
.hv-ai-msg.ai{ background:rgba(56,189,248,.1); border:1px solid rgba(56,189,248,.25); font-family:var(--mono); font-size:11.5px; line-height:1.55; }
.hv-ai-tag{ color:#38BDF8; font-weight:700; margin-right:4px; }
.hv-ai-input{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 14px; border-top:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.hv-ai-placeholder{ font-family:var(--mono); font-size:11px; color:rgba(255,255,255,.35); letter-spacing:.03em; }
.hv-ai-send{
  width:26px; height:26px; border-radius:8px; background:var(--accent);
  color:var(--ink); display:grid; place-items:center; font-size:13px; flex-shrink:0; font-weight:700;
}

/* override hero visual layout for v2 */
.hero-visual{ align-items:flex-start; padding-top:20px; }


/* 4-badge adjustments */
.hv-badges{ display:flex; gap:9px; margin-bottom:16px; flex-wrap:nowrap; }
.hv-badge{ padding:7px 13px; gap:8px; flex-shrink:0; }
.hv-badge-icon{ width:38px; height:38px; border-radius:10px; }
.hv-badge-label{ font-size:12.5px; }

/* Power BI dashboard card */
.hv-pbi-card{
  position:absolute; bottom:-22px; left:-26px;
  width:272px;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(11,30,92,.10);
  border-radius:16px; overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.8) inset;
}
.hv-pbi-header{
  display:flex; align-items:center; gap:7px; padding:10px 13px;
  border-bottom:1px solid rgba(11,30,92,.07);
  background:linear-gradient(90deg, rgba(242,200,17,.1), transparent);
}
.hv-pbi-icon{ display:flex; align-items:center; }
.hv-pbi-title{ font-family:var(--display); font-weight:700; font-size:12px; color:var(--ink); flex:1; }
.hv-pbi-date{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--mute); }
.hv-pbi-kpis{ display:flex; gap:0; padding:10px 13px 6px; }
.hv-kpi{ flex:1; }
.hv-kpi-val{ font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:-0.02em; color:var(--ink); }
.hv-kpi-up{ color:#16a34a; font-size:14px; }
.hv-kpi-lbl{ font-family:var(--mono); font-size:9.5px; letter-spacing:.04em; color:var(--mute); margin-top:2px; }
.hv-pbi-chart{ padding:4px 13px 12px; }

/* AI panel position */
.hv-ai-panel{
  right:-22px; bottom:60px;
}


/* PBI rich charts */
.hv-pbi-kpis{ display:flex; gap:0; padding:8px 13px 4px; }
.hv-kpi{ flex:1; border-right:1px solid rgba(11,30,92,.07); padding-right:8px; margin-right:8px; }
.hv-kpi:last-child{ border-right:none; }
.hv-kpi-val{ font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:-0.02em; color:var(--ink); }
.hv-pbi-charts-grid{
  display:grid; grid-template-columns:1fr 1fr 1.2fr;
  gap:6px; padding:6px 13px 12px;
}
.hv-chart-block{ display:flex; flex-direction:column; gap:3px; }
.hv-chart-block-wide{ grid-column:span 1; }
.hv-chart-lbl{ font-family:var(--mono); font-size:8.5px; letter-spacing:.04em; color:rgba(11,30,92,.4); text-transform:uppercase; }
.hv-pbi-donut-row{ display:flex; align-items:center; gap:6px; margin-top:2px; }
.hv-donut-legend{ display:flex; flex-direction:column; gap:3px; }
.hv-dleg{ display:flex; align-items:center; gap:4px; font-family:var(--mono); font-size:8px; color:rgba(11,30,92,.6); }
.hv-dleg-dot{ width:6px; height:6px; border-radius:50%; flex-shrink:0; }

.syl-pane-2 .syl-phase-num{ color:#F59E0B; }
.syl-pane-2 .syl-phase-label::before{ color:#F59E0B; }
.syl-pane-2 .syl-ln{ color:#F59E0B; background:rgba(245,158,11,.1); border-color:rgba(245,158,11,.25); }
.syl-pane-2 .syl-badge{ color:#F59E0B; background:rgba(245,158,11,.1); border-color:rgba(245,158,11,.25); }
.syl-pane-2 .syl-result{ background:rgba(245,158,11,.06); border-top-color:rgba(245,158,11,.2); }
.syl-pane-2 .syl-result-label{ color:#F59E0B; }
.syl-pane-3 .syl-phase-num{ color:#34d399; }
.syl-pane-3 .syl-phase-label::before{ color:#34d399; }
.syl-pane-3 .syl-ln-ai{ color:#34d399; background:rgba(52,211,153,.1); border-color:rgba(52,211,153,.25); }
.syl-pane-3 .syl-badge-ai{ color:#34d399; background:rgba(52,211,153,.1); border-color:rgba(52,211,153,.25); }
.syl-pane-3 .syl-result{ background:rgba(52,211,153,.06); border-top-color:rgba(52,211,153,.2); }
.syl-pane-3 .syl-result-label{ color:#34d399; }
.syl-pane-3 .syl-phase-title{ color:#fff; }

/* ════════════════ CONTACT ════════════════ */
.contact-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
.contact-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  text-decoration:none;
}
.contact-icon{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  font-size:24px; background:linear-gradient(140deg, color-mix(in srgb,var(--accent) 18%,white), color-mix(in srgb,var(--cyan) 12%,white));
  color:var(--ink); flex-shrink:0;
}
.contact-label{ font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); }
.contact-value{ font-family:var(--display); font-weight:600; font-size:17px; letter-spacing:-0.01em; color:var(--ink); }
.contact-card:hover .contact-value{ color:var(--blue); }
@media(max-width:768px){ .contact-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .contact-grid{ grid-template-columns:1fr; } }


.countdown-grid{
  display:flex; align-items:center; gap:8px; margin-bottom:22px;
}
.cd-block{
  flex:1; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  border-radius:12px; padding:12px 8px; text-align:center;
  transition:border-color .3s;
}
.cd-block:hover{ border-color:rgba(255,255,255,.25); }
.cd-num{
  font-family:var(--display); font-weight:800; font-size:clamp(26px,2.8vw,36px);
  line-height:1; letter-spacing:-0.03em; color:#fff;
  transition:transform .15s cubic-bezier(.3,.7,.4,1);
}
.cd-num.tick{ transform:scale(1.08); color:var(--accent); }
.cd-label{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:rgba(255,255,255,.4); margin-top:5px; text-transform:uppercase; }
.cd-sep{ font-family:var(--display); font-weight:700; font-size:28px; color:rgba(255,255,255,.28); line-height:1; padding-bottom:20px; flex-shrink:0; }


/* Power BI coming soon box — red highlight, separated from SQL demo */
.hv-coming-soon{
  position:absolute; left:0; right:0; bottom:-28px;
  display:flex; align-items:center; gap:14px; justify-content:center;
  background:linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  border-radius:14px; padding:13px 22px;
  box-shadow:0 12px 32px rgba(220,38,38,.45);
  z-index:10;
}
.hv-cs-icon{
  width:36px; height:36px; border-radius:9px;
  background:#fff;
  border:1px solid rgba(255,255,255,.5);
  display:grid; place-items:center; flex-shrink:0;
}
.hv-cs-icon img{ mix-blend-mode:multiply; filter:none; }
.hv-cs-text{ display:flex; align-items:center; gap:12px; }
.hv-cs-title{
  font-family:var(--display); font-weight:700; font-size:15px;
  letter-spacing:-0.01em; color:#fff; white-space:nowrap;
}
.hv-cs-badge{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.35);
  border-radius:999px; padding:4px 12px; display:inline-block; white-space:nowrap;
}


/* ════════ SOLUTION BADGE (mirrors pain-no) ════════ */
.value-card .sol-no{
  font-family:var(--mono); font-size:12px; font-weight:800; letter-spacing:.12em;
  color:#fff; margin-bottom:20px;
  display:inline-flex; align-items:center; gap:0;
  background:#1F8A5B; border:1.5px solid #1F8A5B;
  border-radius:6px; padding:5px 12px;
}
.value-card h3{ font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-0.01em; margin:8px 0 12px; color:var(--ink); }
.value-card p{ font-size:16px; line-height:1.65; color:var(--mute-2); margin:0; font-weight:400; }
.value-card .v-icon{
  width:50px; height:50px; border-radius:13px; display:grid; place-items:center;
  font-size:24px; margin-bottom:6px;
  background:linear-gradient(150deg, color-mix(in srgb, #1F8A5B 18%, white), color-mix(in srgb, #38BDF8 12%, white));
}

/* connector between painpoints → values */
.pain-solution-connector{
  display:flex; align-items:center; justify-content:center;
  padding:8px 0 0; pointer-events:none;
}
.pain-solution-connector svg{ opacity:.4; }


/* ════════ 3-COLUMN PRICING ════════ */
.pricing-3-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:54px; align-items:start;
}
.p3-card{
  border-radius:20px; padding:32px 28px; display:flex; flex-direction:column; gap:0;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  transition:border-color .3s, background .3s; position:relative; overflow:hidden; min-height:540px;
}
.p3-card:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); }
.p3-featured{
  background:rgba(255,255,255,.09); border:1.5px solid var(--accent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent), 0 24px 60px rgba(0,0,0,.3);
  transform:translateY(-8px);
}
.p3-featured:hover{ background:rgba(255,255,255,.12); }
.p3-featured-badge{
  position:absolute; top:0; left:0; right:0;
  background:var(--accent); color:var(--ink);
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.1em;
  text-align:center; padding:8px 0; text-transform:uppercase;
}
.p3-label{
  font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:14px; margin-top:36px;
}
.p3-featured .p3-label{ margin-top:44px; }
.p3-card:not(.p3-featured) .p3-label{ margin-top:0; }
.p3-price{
  font-family:var(--display); font-weight:800; font-size:clamp(30px,3.2vw,40px);
  letter-spacing:-0.03em; color:#fff; line-height:1; margin-bottom:6px;
}
.p3-curr{ font-size:.5em; font-weight:600; color:rgba(255,255,255,.7); }
.p3-saving{
  font-family:var(--mono); font-size:11.5px; color:rgba(255,255,255,.55); margin-bottom:12px;
}
.p3-saving strong{ color:#34d399; }
.p3-desc{ font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.65); margin-bottom:16px; }
.p3-divider{ height:1px; background:rgba(255,255,255,.1); margin:16px 0; }
.p3-features{ list-style:none; padding:0; margin:0 0 20px; display:flex; flex-direction:column; gap:10px; }
.p3-features li{ font-size:14px; color:rgba(255,255,255,.82); display:flex; align-items:center; gap:9px; }
.p3-features li::before{
  content:"✓"; width:18px; height:18px; border-radius:50%; flex-shrink:0;
  background:rgba(56,189,248,.2); color:var(--accent); font-weight:800; font-size:10px;
  display:grid; place-items:center;
}
.p3-meta{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; padding:14px; border-radius:12px; background:rgba(255,255,255,.05); }
.p3-meta-row{ display:flex; justify-content:space-between; align-items:center; font-size:13px; color:rgba(255,255,255,.7); }
.p3-meta-row strong{ color:#fff; font-weight:600; }
@media(max-width:900px){ .pricing-3-grid{ grid-template-columns:1fr; } .p3-featured{ transform:none; } }


/* ════════════════ COURSES CATALOG GRID ════════════════ */
.courses-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:54px; align-items:start;
}
.crs-card{
  border-radius:22px; padding:32px 28px; display:flex; flex-direction:column; gap:0;
  border:1px solid rgba(255,255,255,.1); position:relative; overflow:hidden;
  transition:border-color .3s, background .3s, transform .3s;
  min-height:580px;
}
.crs-card:hover{ transform:translateY(-4px); }
.crs-open{
  background:rgba(255,255,255,.07); border-color:rgba(56,189,248,.35);
  box-shadow:0 0 0 1px rgba(56,189,248,.12), 0 20px 50px rgba(0,0,0,.3);
}
.crs-open:hover{ background:rgba(255,255,255,.1); border-color:var(--accent); }
.crs-soon{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1); }
.crs-soon:hover{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.2); }
.crs-planned{ background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.08); }
.crs-planned:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); }
.crs-status{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 13px; border-radius:999px; margin-bottom:22px; width:fit-content;
}
.crs-status-open{ background:rgba(52,211,153,.15); color:#34d399; border:1px solid rgba(52,211,153,.3); }
.crs-dot{ width:7px; height:7px; border-radius:50%; background:#34d399; animation:pulse 2.4s infinite; }
.crs-status-soon{ background:rgba(56,189,248,.12); color:var(--accent); border:1px solid rgba(56,189,248,.25); }
.crs-status-planned{ background:rgba(255,255,255,.07); color:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.15); }
.crs-num{
  font-family:var(--display); font-weight:800; font-size:52px; letter-spacing:-0.04em;
  line-height:1; color:rgba(255,255,255,.08); margin-bottom:10px; user-select:none;
}
.crs-open .crs-num{ color:rgba(56,189,248,.18); }
.crs-name{
  font-family:var(--display); font-weight:700; font-size:clamp(22px,2.2vw,26px);
  letter-spacing:-0.025em; line-height:1.1; color:#fff; margin:0 0 10px;
}
.crs-tagline{
  font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  color:var(--accent); margin:0 0 16px; opacity:.85;
}
.crs-soon .crs-tagline, .crs-planned .crs-tagline{ color:rgba(255,255,255,.5); opacity:1; }
.crs-desc{ font-size:15px; line-height:1.65; color:rgba(255,255,255,.72); margin:0 0 20px; }
.crs-highlights{
  list-style:none; padding:14px; margin:0 0 20px;
  display:flex; flex-direction:column; gap:8px;
  border-radius:12px; background:rgba(255,255,255,.04);
}
.crs-highlights li{
  font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  color:rgba(255,255,255,.65); display:flex; align-items:center; gap:8px;
}
.crs-highlights li::before{ content:"›"; color:var(--accent); font-weight:700; font-size:16px; line-height:1; }
.crs-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:24px; }
.crs-tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  color:rgba(255,255,255,.6); background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12); border-radius:6px; padding:4px 10px;
}
@media(max-width:980px){ .courses-grid{ grid-template-columns:1fr; } }


/* AI Header — dynamic animations */
.hv-ai-dot-spin{
  display:inline-block;
  animation:aiDotSpin 3s ease-in-out infinite;
}
@keyframes aiDotSpin{
  0%,100%{ transform:rotate(0deg) scale(1); opacity:1; }
  25%{ transform:rotate(90deg) scale(1.2); opacity:.8; }
  50%{ transform:rotate(180deg) scale(1); opacity:1; }
  75%{ transform:rotate(270deg) scale(1.15); opacity:.9; }
}
.ai-status-dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:#34d399; margin-right:5px; vertical-align:middle;
  animation:aiStatusPulse 1.8s ease-in-out infinite;
}
@keyframes aiStatusPulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.4; transform:scale(.7); }
}
/* thinking dots */
.hv-ai-thinking{
  display:flex; align-items:center; gap:6px; padding:7px 14px 0;
  opacity:0; transition:opacity .4s;
}
.hv-ai-thinking.show{ opacity:1; }
.hv-think-dot{
  width:5px; height:5px; border-radius:50%; background:rgba(56,189,248,.7);
  animation:thinkBounce 1.2s ease-in-out infinite;
}
.hv-think-dot:nth-child(2){ animation-delay:.18s; }
.hv-think-dot:nth-child(3){ animation-delay:.36s; }
@keyframes thinkBounce{
  0%,100%{ transform:translateY(0); opacity:.5; }
  50%{ transform:translateY(-5px); opacity:1; }
}
.hv-think-label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  color:rgba(255,255,255,.45); margin-left:2px;
  overflow:hidden; white-space:nowrap;
}
/* Glowing border on ai panel when "thinking" */
.hv-ai-panel.thinking{
  border-color:rgba(56,189,248,.45);
  box-shadow:0 20px 54px rgba(0,0,0,.45), 0 0 0 1px rgba(56,189,248,.15) inset, 0 0 18px rgba(56,189,248,.12);
  transition:box-shadow .5s, border-color .5s;
}


.hv-ai-msg{ transition:opacity .35s, transform .35s cubic-bezier(.2,.7,.3,1); }
.hv-ai-msg.fade-out{ opacity:0; transform:translateY(-6px); }
.hv-ai-msg.fade-in{ animation:msgFadeIn .4s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes msgFadeIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.hv-ai-cursor{ display:inline-block; width:2px; height:1em; background:#38BDF8; margin-left:2px; vertical-align:middle; animation:cursorBlink .7s step-end infinite; }
@keyframes cursorBlink{ 0%,100%{ opacity:1;} 50%{ opacity:0;} }


/* ════════ TESTIMONIALS — enhanced ════════ */
.testi-grid{ display:grid !important; grid-template-columns:repeat(2,1fr) !important; align-items:start !important; }
.testi-avatar-img{ padding:0; overflow:hidden; }

/* Proof section */
.testi-proof{ margin-top:8px; border-top:1px solid var(--line); padding-top:16px; }
.testi-proof-label{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--mute); margin-bottom:12px; }

/* Chat UI */
.testi-chat{ border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#f5f5f5; }
.chat-header{ background:#fff; padding:10px 14px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); }
.chat-avatar{ width:30px; height:30px; border-radius:50%; background:#ddd; flex-shrink:0; }
.chat-name{ font-family:var(--body); font-weight:600; font-size:13px; color:var(--ink); }
.chat-body{ padding:12px; display:flex; flex-direction:column; gap:8px; max-height:260px; overflow-y:auto; }
.chat-date{ text-align:center; font-size:11px; color:#aaa; font-family:var(--mono); }
.chat-bubble{ max-width:82%; padding:9px 13px; border-radius:16px; font-size:13.5px; line-height:1.5; }
.chat-in{ background:#fff; color:var(--ink); border-radius:4px 16px 16px 16px; align-self:flex-start; border:1px solid var(--line); }
.chat-out{ background:#0B84FF; color:#fff; border-radius:16px 4px 16px 16px; align-self:flex-end; }
.chat-time{ font-size:10px; opacity:.55; margin-top:3px; text-align:right; }

/* Dashboard preview */
.testi-portfolio-link{ text-decoration:none; display:block; }
.testi-dashboard-preview{
  border-radius:14px; border:1px solid var(--line); overflow:hidden;
  background:#f8faff; transition:border-color .2s, box-shadow .2s;
}
.testi-portfolio-link:hover .testi-dashboard-preview{
  border-color:var(--accent); box-shadow:0 8px 24px rgba(45,109,219,.12);
}
.tdp-header{ background:#fff; padding:10px 14px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); }
.tdp-dots{ display:flex; gap:5px; }
.tdp-dots span{ width:10px; height:10px; border-radius:50%; background:#e5e7eb; }
.tdp-dots span:first-child{ background:#ef4444; }
.tdp-dots span:nth-child(2){ background:#f59e0b; }
.tdp-dots span:last-child{ background:#22c55e; }
.tdp-title{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--mute); }
.tdp-body{ padding:14px 16px; display:flex; flex-direction:column; gap:12px; }
.tdp-kpi{ display:flex; gap:10px; }
.tdp-kpi-box{ flex:1; background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 8px; text-align:center; }
.tdp-kpi-n{ font-family:var(--display); font-weight:800; font-size:20px; letter-spacing:-0.02em; }
.tdp-kpi-l{ font-family:var(--mono); font-size:9px; letter-spacing:.06em; color:var(--mute); margin-top:3px; text-transform:uppercase; }
.tdp-chart{ display:flex; align-items:flex-end; gap:5px; height:70px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px; }
.tdp-bar{ flex:1; border-radius:4px 4px 0 0; }
.tdp-footer{ padding:10px 16px; font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--mute); border-top:1px solid var(--line); text-align:center; }


/* Testimonial compact layout */
.testi-card blockquote{ font-size:15.5px !important; }
.testi-proof{ margin-top:12px !important; padding-top:12px !important; }
.testi-grid{ gap:24px !important; margin-bottom:40px !important; }


/* Testimonial — bolder text per comments */
[data-comment-anchor="0ca161e270-div"],
[data-comment-anchor="8ba0e57352-div"]{ font-weight:700 !important; color:var(--ink) !important; font-size:12.5px !important; }
[data-comment-anchor="a627e77d04-div"],
[data-comment-anchor="8a4ca29237-div"]{ font-weight:700 !important; color:var(--ink) !important; }


/* Student dashboard + presentation grids */
.student-dash-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.student-dash-grid .proof-img:nth-child(4),
.student-dash-grid .proof-img:nth-child(5){
  grid-column:span 1;
}
/* Make last 2 span wider on a second row */
.student-dash-grid{ grid-template-columns:repeat(3,1fr); }

.student-present-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
@media(max-width:768px){
  .student-dash-grid{ grid-template-columns:repeat(2,1fr); }
  .student-present-grid{ grid-template-columns:1fr; }
}
@media(max-width:480px){
  .student-dash-grid{ grid-template-columns:1fr; }
}



/* ---- block 2 ---- */

.soc-float{
  position:fixed; bottom:84px; right:20px; z-index:999;
  display:flex; flex-direction:column; gap:10px; align-items:center;
  pointer-events:none;
}
.soc-btn{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  color:#fff; text-decoration:none; pointer-events:auto;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  transition:transform .2s cubic-bezier(.3,.7,.4,1), box-shadow .2s;
}
.soc-btn:hover{ transform:scale(1.12); box-shadow:0 8px 20px rgba(0,0,0,.32); }
.soc-messenger{ background:linear-gradient(135deg,#0099ff,#a033ff); }
.soc-zalo{ background:linear-gradient(135deg,#0068ff,#00c6ff); }

/* ════════════════════════════════════════════════════════════════
   GLOBAL SITE ADDITIONS — multi-page nav, dropdown, new sections
   ════════════════════════════════════════════════════════════════ */

/* ── active nav state ── */
.nav-links a.is-active{ color:var(--ink); }
.nav-links a.is-active::after{ width:100%; }
.nav:not(.scrolled) .nav-links a.is-active{ color:#fff; }

/* ── Khóa học ▾ dropdown ── */
.nav-drop{ position:relative; }
.nav-drop-trigger{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.nav-drop-trigger .caret{ font-size:10px; transition:transform .25s var(--ease-standard,cubic-bezier(.4,0,.2,1)); opacity:.7; }
.nav-drop:hover .nav-drop-trigger .caret,
.nav-drop.open .nav-drop-trigger .caret{ transform:rotate(180deg); }
.nav-drop-panel{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(8px);
  width:340px; background:var(--paper); border:1px solid var(--line);
  border-radius:16px; padding:10px; box-shadow:0 24px 60px -24px rgba(11,30,92,.4), 0 2px 8px rgba(11,30,92,.06);
  opacity:0; visibility:hidden; transition:opacity .22s var(--ease-standard,ease), transform .22s var(--ease-standard,ease);
  z-index:1200;
}
.nav-drop:hover .nav-drop-panel,
.nav-drop.open .nav-drop-panel{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.nav-drop-panel::before{ content:""; position:absolute; top:-14px; left:0; right:0; height:14px; } /* hover bridge */
.nav-drop-item{
  display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border-radius:11px;
  transition:background .18s; position:relative;
}
.nav-drop-item::after{ display:none; }
.nav-drop-item:hover{ background:var(--whisper); }
.nav-drop-ic{
  flex-shrink:0; width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  font-size:15px; background:var(--whisper); border:1px solid var(--line); margin-top:1px; overflow:hidden;
}
.nav-drop-ic img{ width:22px; height:22px; object-fit:contain; display:block; }
.nav-drop-ic-cube{ padding:5px; }
.nav-drop-ic-cube svg{ width:100%; height:100%; display:block; }
.nav-drop-tx{ display:flex; flex-direction:column; gap:2px; }
.nav-drop-name{ font-family:var(--body); font-weight:600; font-size:14.5px; color:var(--ink); line-height:1.25; }
.nav-drop-meta{ font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--mute); }
.nav-drop-st{ font-size:11px; }
.nav-drop-all{ border-top:1px solid var(--line); margin-top:4px; padding-top:6px; }
.nav-drop-all .nav-drop-name{ color:var(--blue); }

/* ── Mobile menu: submenu ── */
.mm-sub{ width:100%; }
.mm-sub-trigger{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  font-family:var(--display); font-weight:600; font-size:32px; color:#fff; background:none; border:0;
  padding:14px 0; border-bottom:1px solid rgba(255,255,255,.1); cursor:pointer; text-align:left;
}
.mm-sub-trigger .caret{ font-size:18px; transition:transform .25s ease; opacity:.7; }
.mm-sub.open .mm-sub-trigger .caret{ transform:rotate(180deg); }
.mm-sublinks{ display:none; flex-direction:column; padding:6px 0 10px 16px; }
.mm-sub.open .mm-sublinks{ display:flex; }
.mm-sublinks a{ font-size:20px !important; color:rgba(255,255,255,.78) !important; padding:11px 0 !important; border-bottom:1px solid rgba(255,255,255,.07) !important; }

/* ════════════════ HOMEPAGE: ROUTE TEASER ════════════════ */
.route-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); margin-top:48px; position:relative; }
.route-card{
  position:relative; border-radius:18px; padding:30px 28px 28px; display:flex; flex-direction:column; gap:14px;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); transition:transform .3s var(--ease-standard,ease), border-color .3s, background .3s;
}
.route-card:hover{ transform:translateY(-4px); border-color:rgba(124,196,227,.4); background:rgba(255,255,255,.07); }
.route-step{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.route-logo{ width:48px; height:48px; border-radius:12px; background:#fff; display:grid; place-items:center; padding:9px; box-shadow:0 4px 14px rgba(0,0,0,.22); align-self:flex-start; }
.route-logo img{ width:100%; height:100%; object-fit:contain; display:block; }

/* ════════════════ HERO PHOTO MOSAIC (5 ảnh) ════════════════ */
.hero-mosaic{
  position:relative; width:min(560px,100%); margin-left:auto; aspect-ratio:1/1;
  display:grid; grid-template-columns:repeat(6,1fr); grid-template-rows:repeat(6,1fr); gap:10px;
}
.hm{
  margin:0; position:relative; border-radius:12px; overflow:hidden; background:#07112E;
  border:1px solid rgba(124,196,227,.26); box-shadow:0 18px 40px -22px rgba(0,0,0,.55);
}
.hm img{ width:100%; height:100%; object-fit:cover; display:block; }
.hm-dash{ grid-column:1 / 5; grid-row:1 / 5; border-color:rgba(124,196,227,.42); }
.hm-dash img{ object-position:center 30%; }
.hm-a{ grid-column:5 / 7; grid-row:1 / 4; }
.hm-a img{ object-position:center 18%; }
.hm-b{ grid-column:5 / 7; grid-row:4 / 7; }
.hm-b img{ object-position:center 22%; }
.hm-c{ grid-column:1 / 3; grid-row:5 / 7; }
.hm-d{ grid-column:3 / 5; grid-row:5 / 7; }
.hm-d img{ object-position:center 42%; }
.hm-dash figcaption{
  position:absolute; left:9px; right:9px; bottom:9px; display:flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10px; letter-spacing:.01em; color:#fff;
  background:rgba(7,17,46,.74); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(124,196,227,.25); border-radius:8px; padding:6px 9px; line-height:1.3;
}
.hc-dot{ width:6px; height:6px; border-radius:50%; background:#5CCDE8; flex-shrink:0; box-shadow:0 0 0 3px rgba(92,205,232,.22); }
.hc-bracket{ position:absolute; width:20px; height:20px; z-index:2; pointer-events:none; }
.hc-bracket.tl{ top:8px; left:8px; border-top:2px solid var(--cyan); border-left:2px solid var(--cyan); border-top-left-radius:4px; opacity:.85; }
.hc-cube{
  position:absolute; left:-26px; top:42%; width:74px; height:86px; z-index:5;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.55)); animation:heroCubeFloat 7s ease-in-out infinite;
}
.hc-cube svg{ width:100%; height:100%; display:block; }
@keyframes heroCubeFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@media (max-width:980px){ .hero-mosaic{ width:min(480px,92%); margin:0 auto; } }
@media (max-width:480px){ .hc-cube{ left:-14px; width:60px; height:70px; } }
@media (prefers-reduced-motion: reduce){ .hc-cube{ animation:none; } }

/* ════════════════ COURSES HERO — tool flow visual ════════════════ */
.course-flow{
  position:relative; width:min(440px,100%); margin-left:auto; display:flex; flex-direction:column; gap:13px;
  padding:30px 28px; border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  border:1px solid rgba(124,196,227,.24); box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
}
.cf-node{ display:flex; align-items:center; gap:16px; padding:19px 20px; border-radius:14px; background:rgba(7,17,46,.5); border:1px solid rgba(124,196,227,.2); }
.cf-think{ border-color:rgba(92,205,232,.42); }
.cf-ai{ border-color:rgba(56,189,248,.42); background:linear-gradient(135deg, rgba(45,109,219,.28), rgba(7,17,46,.5)); }
.cf-ic{ width:52px; height:52px; border-radius:12px; display:grid; place-items:center; font-size:26px; background:rgba(255,255,255,.07); border:1px solid rgba(124,196,227,.25); flex-shrink:0; }
.cf-label{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.cf-name{ font-family:var(--display); font-weight:600; font-size:21px; color:#fff; letter-spacing:-.01em; margin-top:4px; }
.cf-arrow{ text-align:center; color:var(--cyan); font-size:16px; line-height:1; opacity:.8; }
.cf-toolwrap{ display:flex; flex-direction:column; gap:10px; }
.cf-toolcap{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.55); text-align:center; }
.cf-tools{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.cf-tool{ display:flex; flex-direction:column; align-items:center; gap:11px; padding:18px 8px; border-radius:13px; background:#fff; border:1px solid rgba(124,196,227,.2); box-shadow:0 8px 20px -12px rgba(0,0,0,.45); }
.cf-tool img{ width:42px; height:42px; object-fit:contain; display:block; }
.cf-tool span{ font-family:var(--body); font-weight:600; font-size:15px; color:var(--ink); }
@media (max-width:980px){ .course-flow{ width:min(440px,94%); margin:0 auto; } }
.route-name{ font-family:var(--display); font-weight:700; font-size:23px; line-height:1.12; color:#fff; letter-spacing:-.02em; }
.route-name .tool{ display:block; font-size:15px; font-weight:500; color:var(--cyan); font-family:var(--mono); letter-spacing:.02em; margin-top:6px; }
.route-status{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.04em; padding:7px 13px; border-radius:999px; }
.route-status.open{ background:rgba(56,189,248,.14); border:1px solid rgba(56,189,248,.4); color:#cdeeff; }
.route-status.soon{ background:rgba(124,196,227,.08); border:1px solid rgba(124,196,227,.22); color:rgba(255,255,255,.66); }
.route-desc{ font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.7); flex:1; }
.route-link{ font-family:var(--display); font-weight:600; font-size:14.5px; color:var(--cyan); display:inline-flex; align-items:center; gap:7px; }
.route-link .arr{ transition:transform .25s var(--ease-standard,ease); }
.route-card:hover .route-link .arr{ transform:translateX(4px); }
@media(max-width:860px){ .route-grid{ grid-template-columns:1fr; } }

/* ════════════════ HOMEPAGE: TEAM TEASER ════════════════ */
.teamteaser-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); margin-top:44px; }
.teamteaser-card{ display:flex; gap:22px; align-items:center; padding:24px; }
.teamteaser-photo{ flex-shrink:0; width:104px; height:124px; border-radius:14px; overflow:hidden; border:1px solid var(--line); }
.teamteaser-photo img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
.tt-name{ font-family:var(--display); font-weight:700; font-size:21px; color:var(--ink); letter-spacing:-.02em; }
.tt-role{ font-size:14px; color:var(--mute-2); margin-top:4px; line-height:1.45; }
.tt-role .co{ color:var(--blue); font-weight:600; }
.tt-tags{ display:flex; gap:7px; flex-wrap:wrap; margin-top:12px; }
.tt-tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--mute); background:var(--whisper); border:1px solid var(--line); border-radius:999px; padding:4px 10px; }
@media(max-width:760px){ .teamteaser-grid{ grid-template-columns:1fr; } }

/* ════════════════ HOMEPAGE: RESOURCES INVITE BAND ════════════════ */
.invite{ position:relative; overflow:hidden; }
.invite-card{
  position:relative; border-radius:24px; padding:64px 56px; overflow:hidden;
  background:linear-gradient(135deg,#0B1E5C 0%, #07112E 60%, #0E2C7A 100%); color:#fff;
  display:grid; grid-template-columns:1.3fr .7fr; gap:40px; align-items:center;
}
.invite-card .hero-grid-bg{ opacity:.4; }
.invite-eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--cyan); margin-bottom:18px; }
.invite h2{ font-family:var(--display); font-weight:600; font-size:clamp(28px,3.4vw,40px); line-height:1.06; letter-spacing:-.025em; margin:0 0 16px; color:#fff; }
.invite p{ font-size:17px; line-height:1.6; color:rgba(255,255,255,.78); max-width:48ch; margin:0 0 28px; }
.invite-visual{ display:flex; flex-direction:column; gap:12px; position:relative; z-index:2; }
.invite-doc{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); font-size:14px; color:rgba(255,255,255,.85); }
.invite-doc .di{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; background:rgba(56,189,248,.16); flex-shrink:0; }
@media(max-width:840px){ .invite-card{ grid-template-columns:1fr; padding:44px 28px; } .invite-visual{ order:-1; } }

/* ════════════════ HOMEPAGE: SOCIAL ════════════════ */
.social-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); margin-top:44px; }
.social-card{ display:flex; flex-direction:column; gap:16px; padding:30px 28px; text-decoration:none; }
.social-ic{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; color:#fff; }
.social-ic svg{ width:26px; height:26px; }
.social-tiktok{ background:#010101; }
.social-fb{ background:#1877F2; }
.social-ig{ background:linear-gradient(135deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5); }
.social-name{ font-family:var(--display); font-weight:600; font-size:19px; color:var(--ink); }
.social-handle{ font-family:var(--mono); font-size:12.5px; color:var(--blue); letter-spacing:.02em; }
.social-desc{ font-size:14px; line-height:1.55; color:var(--mute-2); }
.social-go{ margin-top:auto; font-family:var(--display); font-weight:600; font-size:14px; color:var(--ink); display:inline-flex; align-items:center; gap:7px; }
.social-card:hover .social-go .arr{ transform:translateX(4px); }
.social-go .arr{ transition:transform .25s var(--ease-standard,ease); }
@media(max-width:780px){ .social-grid{ grid-template-columns:1fr; } }

/* ════════════════ ABOUT: STORY / PRINCIPLES ════════════════ */
.story-wrap{ max-width:780px; }
.story-wrap p{ font-size:19px; line-height:1.72; color:var(--mute-2); margin:0 0 26px; }
.story-wrap p strong{ color:var(--ink); font-weight:600; }
.principles-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); margin-top:48px; }
.principle-card{ padding:32px 30px; display:flex; flex-direction:column; gap:14px; }
.principle-no{ font-family:var(--display); font-weight:700; font-size:30px; color:var(--accent); line-height:1; letter-spacing:-.02em; }
.principle-card h3{ font-family:var(--display); font-weight:600; font-size:20px; color:var(--ink); margin:0; letter-spacing:-.01em; }
.principle-card p{ font-size:15px; line-height:1.62; color:var(--mute-2); margin:0; }
@media(max-width:760px){ .principles-grid{ grid-template-columns:1fr; } }

/* ════════════════ ABOUT: FULL TEAM BIO ════════════════ */
.bio-row{ display:grid; grid-template-columns:300px 1fr; gap:40px; align-items:start; padding:36px 0; border-top:1px solid var(--line); }
.bio-row:first-of-type{ border-top:0; }
.bio-photo{ border-radius:18px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-card,0 1px 4px rgba(11,30,92,.18)); }
.bio-photo img{ width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center top; display:block; }
.bio-name{ font-family:var(--display); font-weight:700; font-size:28px; color:var(--ink); letter-spacing:-.02em; }
.bio-role{ font-size:16px; color:var(--blue); font-weight:600; margin-top:6px; }
.bio-role .co{ color:var(--mute); font-weight:500; }
.bio-meta{ display:flex; gap:10px; flex-wrap:wrap; margin:16px 0 18px; }
.bio-chip{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--mute); background:var(--whisper); border:1px solid var(--line); border-radius:999px; padding:5px 12px; }
.bio-text{ font-size:16px; line-height:1.7; color:var(--mute-2); }
.bio-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.bio-list li{ position:relative; padding-left:22px; }
.bio-list li::before{ content:""; position:absolute; left:2px; top:11px; width:6px; height:6px; border-radius:50%; background:var(--accent); }
@media(max-width:760px){ .bio-row{ grid-template-columns:1fr; gap:24px; } .bio-photo{ max-width:280px; } }

/* ════════════════ COURSES: ROUTE MAP DIAGRAM ════════════════ */
.routemap{ margin-top:48px; display:flex; flex-direction:column; align-items:center; gap:0; }
.rm-node{
  width:min(420px,100%); border-radius:16px; padding:24px 28px; text-align:center;
  background:var(--paper); border:1px solid var(--line-2); box-shadow:var(--shadow-card,0 1px 4px rgba(11,30,92,.12));
}
.rm-node .rm-tier{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.rm-logo{ width:60px; height:60px; margin:0 auto 14px; border-radius:13px; background:#fff; border:1px solid var(--line); display:grid; place-items:center; padding:11px; box-shadow:0 4px 14px rgba(11,30,92,.1); }
.rm-logo img{ width:100%; height:100%; object-fit:contain; display:block; }
.rm-node .rm-title{ font-family:var(--display); font-weight:700; font-size:25px; color:var(--ink); margin-top:6px; letter-spacing:-.01em; }
.rm-node .rm-sub{ font-size:14px; color:var(--mute-2); margin-top:4px; }
.rm-connector{ width:2px; height:34px; background:linear-gradient(var(--line-2),var(--blue)); }
.rm-split{ display:flex; align-items:flex-start; gap:48px; position:relative; }
.rm-split::before{ content:""; position:absolute; top:-34px; left:25%; right:25%; height:2px; background:var(--line-2); }
.rm-branch{ display:flex; flex-direction:column; align-items:center; }
.rm-branch .rm-connector{ background:var(--line-2); }
.rm-node.alt{ background:var(--whisper); }
.rm-note{ font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--mute); margin-top:24px; text-align:center; }
@media(max-width:720px){ .rm-split{ flex-direction:column; gap:0; align-items:center; } .rm-split::before{ display:none; } }

/* ════════════════ COURSES: GUIDE TABLE ════════════════ */
.guide-list{ display:flex; flex-direction:column; gap:14px; margin-top:40px; max-width:840px; }
.guide-row{ display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; padding:22px 28px; border-radius:14px; background:var(--paper); border:1px solid var(--line); transition:border-color .25s, box-shadow .25s; }
.guide-row:hover{ border-color:var(--line-2); box-shadow:0 12px 30px -18px rgba(11,30,92,.26); }
.guide-if{ font-size:16px; color:var(--mute-2); }
.guide-then{ font-family:var(--display); font-weight:600; font-size:15px; color:var(--blue); white-space:nowrap; text-align:right; }
@media(max-width:680px){ .guide-row{ grid-template-columns:1fr; gap:8px; } .guide-then{ text-align:left; } }

/* ════════════════ COURSES: FULL COURSE CARDS ════════════════ */
.coursecat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); margin-top:48px; align-items:stretch; }
.coursecat-card{ display:flex; flex-direction:column; gap:0; padding:0; overflow:hidden; border-radius:18px; scroll-margin-top:110px; }
.cc-top{ padding:28px 28px 0; display:flex; flex-direction:column; gap:16px; flex:1; }
.cc-logo{ width:54px; height:54px; border-radius:13px; background:#fff; border:1px solid var(--line); display:grid; place-items:center; padding:10px; box-shadow:0 4px 14px rgba(11,30,92,.08); }
.cc-logo img{ width:100%; height:100%; object-fit:contain; display:block; }
.cc-status{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.04em; padding:7px 13px; border-radius:999px; }
.cc-status.open{ background:rgba(45,109,219,.1); border:1px solid rgba(45,109,219,.3); color:var(--blue); }
.cc-status.soon{ background:var(--whisper); border:1px solid var(--line-2); color:var(--mute-2); }
.cc-name{ font-family:var(--display); font-weight:700; font-size:21px; line-height:1.15; color:var(--ink); letter-spacing:-.02em; }
.cc-for{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); }
.cc-desc{ font-size:14.5px; line-height:1.62; color:var(--mute-2); }
.cc-meta{ display:flex; flex-direction:column; gap:8px; margin-top:auto; padding-top:8px; }
.cc-meta-row{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--mute-2); }
.cc-meta-row .mi{ color:var(--accent); font-size:13px; }
.cc-foot{ padding:20px 28px 28px; }
.cc-foot .btn{ width:100%; justify-content:center; }
@media(max-width:900px){ .coursecat-grid{ grid-template-columns:1fr; max-width:460px; margin-left:auto; margin-right:auto; } }

/* ════════════════ RESOURCES: DOC CARDS + CROSS-SELL ════════════════ */
.res-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); margin-top:48px; }
.res-card{ display:flex; flex-direction:column; gap:14px; padding:30px 28px; }
.res-ic{ width:50px; height:50px; border-radius:13px; display:grid; place-items:center; font-size:22px; background:var(--whisper); border:1px solid var(--line); }
.res-card h3{ font-family:var(--display); font-weight:600; font-size:18px; color:var(--ink); margin:0; letter-spacing:-.01em; }
.res-card p{ font-size:14px; line-height:1.58; color:var(--mute-2); margin:0; }
.res-tag{ margin-top:auto; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); }
@media(max-width:880px){ .res-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .res-grid{ grid-template-columns:1fr; } }
.crosssell{ display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; padding:40px 44px; border-radius:20px; background:var(--whisper); border:1px solid var(--line); }
.crosssell h3{ font-family:var(--display); font-weight:600; font-size:24px; color:var(--ink); margin:0 0 6px; letter-spacing:-.02em; }
.crosssell p{ font-size:16px; color:var(--mute-2); margin:0; }

/* mono helper for page-section eyebrow with dot */
.eyebrow.dot-eb::before{ display:none; }