/* ── Tokens ────────────────────────────────────────────────────────── */
:root{
  --navy: #0B2545;
  --navy-2: #13315C;
  --navy-3: #1B3A6B;
  --gold: #C9A961;
  --gold-soft: #E2C98B;
  --cream: #F6F2EA;
  --cream-2: #EFE9DD;
  --white: #FFFFFF;
  --ink: #0E1726;
  --mute: #56627A;
  --line: #E6DFD0;
  --line-strong: #C9C0AB;
  --danger: #B23A48;

  --ff-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --ff-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --ff-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --ff-base: var(--ff-sans);

  --maxw: 1200px;
  --pad: clamp(20px, 4vw, 56px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: var(--ff-base);
  font-feature-settings: "palt";
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  line-height: 1.75;
  font-size: 15px;
  letter-spacing: .01em;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
img{max-width:100%;display:block}

/* ── Reveal animation (scroll-linked) ──────────────────────────────── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}
.reveal.d5{transition-delay:.40s}
.reveal.d6{transition-delay:.48s}

/* ── Generic primitives ────────────────────────────────────────────── */
.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
.eyebrow{
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  font-family: var(--ff-mono); color: var(--gold);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:28px; height:1px; background: var(--gold)}
.section-num{
  font-family: var(--ff-serif); font-weight:500;
  color: var(--gold); font-size: 14px; letter-spacing:.16em;
}
.h-display{
  font-size: clamp(28px, 4.2vw, 56px);
  line-height: 1.22; font-weight: 700; letter-spacing: -.005em; margin: 14px 0 16px;
}
.h-display em{font-style:normal; color: var(--gold); border-bottom: 2px solid var(--gold); padding-bottom:2px}
.h-section{
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.3; font-weight: 700; margin: 12px 0 20px; letter-spacing: -.005em;
}
.lede{font-size: 16px; color: var(--mute); max-width: 56ch}
.serif{font-family: var(--ff-serif)}

/* Theme switches body font for .body-text */
body.serif-mode{ --ff-base: var(--ff-serif) }
body.serif-mode .h-display,
body.serif-mode .h-section{ font-family: var(--ff-serif); letter-spacing: 0; }

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  height: 56px; padding: 0 26px; font-weight: 700; font-size: 15px;
  border-radius: 2px; transition: transform .2s, background .2s, color .2s;
  letter-spacing: .02em; white-space: nowrap;
}
.btn .arr{display:inline-block; transition: transform .25s}
.btn:hover .arr{transform: translateX(4px)}
.btn-primary{background: var(--gold); color: var(--navy);}
.btn-primary:hover{background: #d8b975}
.btn-ghost{border:1px solid var(--navy); color: var(--navy)}
.btn-ghost:hover{background: rgba(11,37,69,.06)}
.btn-dark{background: var(--navy); color: #fff}
.btn-dark:hover{background: var(--navy-2)}

/* ── Navigation ────────────────────────────────────────────────────── */
.nav{
  position: sticky; top:0; z-index: 50;
  background: rgba(246,242,234,.88);
  backdrop-filter: blur(10px);
  color: var(--navy);
  border-bottom: 1px solid var(--line);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:72px}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.05em}
.brand-mark{width:40px; height:40px; object-fit:contain; display:block}
.brand-name{font-size:14px; line-height:1.1}
.brand-name small{display:block; font-size:10px; letter-spacing:.2em; color:var(--gold); margin-top:2px}
.nav-links{display:flex; gap:28px; font-size:13px}
.nav-links a{opacity:.85; transition:opacity .2s; position:relative; white-space:nowrap}
.nav-links a:hover{opacity:1}
.nav-cta{height:40px; padding:0 18px; font-size:12px; background:var(--navy); color:var(--cream); display:inline-flex; align-items:center; font-weight:700; letter-spacing:.05em}
.nav-cta:hover{background:var(--navy-2)}
@media (max-width: 880px){ .nav-links{display:none} }

/* ── Hero ──────────────────────────────────────────────────────────── */
.hero{
  position: relative; color: var(--cream);
  background: var(--navy);
  overflow: hidden;
  padding: clamp(96px, 13vw, 160px) 0 clamp(64px, 8vw, 96px);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
/* Full-bleed background image placeholder */
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background:
    repeating-linear-gradient(45deg, rgba(201,169,97,.10) 0 2px, transparent 2px 18px),
    linear-gradient(160deg, #16386A 0%, #0B2545 55%, #07182F 100%);
}
.hero-bg span{
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  font-family: var(--ff-mono); font-size: 11px; letter-spacing:.12em;
  color: rgba(236,227,203,.4); padding: 6px 12px; white-space: nowrap;
  border: 1px solid rgba(236,227,203,.16); background: rgba(7,24,47,.4);
}
/* Readability overlay + gold glow over the photo */
.hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(900px 560px at 50% 8%, rgba(201,169,97,.18), transparent 62%),
    radial-gradient(ellipse 1300px 760px at 50% 42%, rgba(11,37,69,.30), rgba(6,20,40,.86) 82%);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(rgba(236,227,203,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(236,227,203,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 1100px 620px at 50% 50%, #000 35%, transparent 78%);
}
.hero-inner{
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  max-width: 880px; margin: 0 auto;
}
.hero-eyebrow{color: var(--gold-soft)}
.hero-title{
  font-size: clamp(34px, 4.8vw, 62px); line-height: 1.24; font-weight: 800; letter-spacing: -.01em;
  margin: 18px 0 22px; color: var(--white); text-wrap: balance;
}
.hero-title .gold{color: var(--gold)}
.hero-title .pad{display:inline-block; background: var(--gold); color: var(--navy); padding: 2px 14px; margin: 0 2px}
.hero-sub{font-size: 16px; color: rgba(236,227,203,.82); max-width: 56ch; margin: 0 auto 36px; text-wrap: pretty}
.hero-cta-row{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-bottom: 40px}
.hero .btn-ghost{border-color: rgba(236,227,203,.45); color: var(--cream)}
.hero .btn-ghost:hover{background: rgba(255,255,255,.10)}
.hero-badges{display:flex; gap:14px; flex-wrap:wrap; justify-content:center}
.hero-badge{
  display:flex; align-items:center; gap:10px; padding: 10px 16px;
  border:1px solid rgba(236,227,203,.22); background: rgba(255,255,255,.06);
  backdrop-filter: blur(4px);
  font-size: 12px; letter-spacing:.04em; color: var(--cream);
}
.hero-badge b{color: var(--gold-soft); font-size: 18px; font-family: var(--ff-serif); font-weight: 600}

.hero-foot{
  position: relative; z-index: 2;
  margin-top: clamp(48px, 7vw, 84px);
  display:flex; justify-content:center; align-items:center; gap:24px 40px; flex-wrap:wrap;
  border-top:1px solid rgba(236,227,203,.16); padding-top: 26px;
}
.hero-foot .marquee-label{font-size:11px; letter-spacing:.2em; color: rgba(236,227,203,.6); font-family: var(--ff-mono)}
.hero-foot .marquee{display:flex; gap:28px; flex-wrap:wrap; justify-content:center; color: var(--cream); font-size:12px; letter-spacing:.16em}
.hero-foot .marquee span{display:flex; align-items:center; gap:8px}
.hero-foot .marquee span::before{content:""; width:5px; height:5px; background: var(--gold); border-radius:50%}

/* ── Section: 課題 ─────────────────────────────────────────────────── */
.pain{ background: var(--white); padding: clamp(80px, 10vw, 120px) 0; border-top: 1px solid var(--line); }
.pain-head{ display:grid; grid-template-columns: 1fr 1.4fr; gap:48px; align-items:end; margin-bottom: 56px }
@media (max-width:880px){ .pain-head{grid-template-columns:1fr} }
.pain-grid{display:grid; grid-template-columns: repeat(4, 1fr); gap: 0; border:1px solid var(--line)}
@media (max-width:980px){ .pain-grid{grid-template-columns: repeat(2,1fr)} }
@media (max-width:560px){ .pain-grid{grid-template-columns: 1fr} }
.pain-card{
  padding: 32px 28px 36px; background: var(--white);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  position: relative;
}
.pain-card:last-child{border-right:0}
.pain-card .qmark{
  font-family: var(--ff-serif); font-size: 56px; color: var(--cream-2);
  line-height: .8; margin-bottom: 12px;
}
.pain-card h4{font-size: 16px; margin: 0 0 12px; line-height: 1.5; min-height: 3em}
.pain-card p{font-size: 13px; color: var(--mute); margin: 0; line-height: 1.7}
.pain-card .tag{font-family: var(--ff-mono); font-size:10px; color: var(--gold); letter-spacing:.14em; text-transform:uppercase; margin-bottom: 18px; display:block}

/* ── Section: Solution Bridge ──────────────────────────────────────── */
.bridge{
  background: var(--cream-2); color: var(--navy); padding: clamp(80px,10vw,120px) 0;
  position: relative; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.bridge::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(800px 400px at 80% 30%, rgba(201,169,97,.16), transparent 60%);
}
.bridge-inner{position:relative; display:grid; grid-template-columns: 1fr 1fr; gap:80px; align-items:center}
@media (max-width:980px){ .bridge-inner{grid-template-columns:1fr; gap:48px} }
.bridge h2{font-size: clamp(28px,3.6vw,44px); line-height:1.3; margin:14px 0 24px}
.bridge h2 .gold{color: var(--gold)}
.bridge-pillars{display:grid; gap:14px}
.bridge-pillar{
  display:flex; align-items:center; gap:18px; padding:18px 22px;
  background: var(--white); border: 1px solid var(--line-strong);
}
.bridge-pillar .ico{
  width:48px; height:48px; flex:0 0 48px; border:1px solid var(--gold); color: var(--gold);
  display:grid; place-items:center; font-family: var(--ff-serif); font-size: 22px;
  background: rgba(201,169,97,.06);
}
.bridge-pillar .t{font-size: 15px; font-weight: 700; margin-bottom: 4px; color: var(--navy)}
.bridge-pillar .d{font-size: 12px; color: var(--mute)}

/* ── Section: USP 4つの理由 ────────────────────────────────────────── */
.usp{background: var(--cream); padding: clamp(80px,10vw,120px) 0}
.usp-head{ display:grid; grid-template-columns: 1fr 1.2fr; gap:48px; align-items:end; margin-bottom: 64px }
@media (max-width:880px){ .usp-head{grid-template-columns:1fr} }
.usp-list{display:grid; gap: 0}
.usp-row{
  display:grid; grid-template-columns: 90px 1fr 1.1fr; gap: 40px; align-items: stretch;
  padding: 48px 0; border-top: 1px solid var(--line-strong);
}
.usp-row:last-child{border-bottom: 1px solid var(--line-strong)}
@media (max-width: 880px){ .usp-row{grid-template-columns:1fr; gap:20px; padding: 32px 0} }
.usp-row .num{
  font-family: var(--ff-serif); font-size: 64px; color: var(--gold);
  line-height: 1; font-weight: 500; letter-spacing: -.02em;
}
.usp-row .label{font-family:var(--ff-mono); font-size:10px; letter-spacing:.16em; color:var(--mute); display:block; margin-top:8px}
.usp-row h3{font-size: clamp(22px, 2.4vw, 28px); margin: 0 0 14px; line-height: 1.4}
.usp-row p{margin: 0; color: var(--mute); font-size: 14px; max-width: 38ch}
.usp-row .visual{
  background: var(--white); border:1px solid var(--line); padding: 22px;
  display:flex; flex-direction:column; justify-content:space-between; min-height: 220px;
}
.usp-row .visual .vtitle{font-size:11px; font-family:var(--ff-mono); letter-spacing:.14em; color:var(--mute)}
.usp-row .visual .vbody{display:flex; flex-direction:column; gap:8px; margin-top: 14px}

/* USP visual variants */
.viz-network{position:relative; height:160px; margin-top:auto}
.viz-network .node{position:absolute; padding: 4px 10px; font-size:11px; font-family: var(--ff-mono); letter-spacing:.04em; background: var(--cream); border:1px solid var(--line-strong); color: var(--navy)}
.viz-network svg{position:absolute; inset:0; width:100%; height:100%}

.viz-jobpost{font-family: var(--ff-mono); font-size: 11px; color:var(--mute); line-height: 1.8; margin-top: 12px}
.viz-jobpost b{color: var(--navy); display:inline-block; min-width: 90px}
.viz-jobpost .ai-mark{color:var(--gold); animation: blink 1.4s steps(2,end) infinite}
@keyframes blink{50%{opacity:.2}}

.viz-companies{display:grid; grid-template-columns: repeat(3,1fr); gap:8px; margin-top:14px}
.viz-companies .cell{
  border:1px solid var(--line-strong); padding: 10px 8px; text-align:center;
  font-size: 10px; font-family: var(--ff-mono); color: var(--mute);
}
.viz-companies .cell b{display:block; font-family: var(--ff-serif); font-size: 18px; color: var(--navy); font-weight: 600; margin-bottom: 4px}

.viz-learn-cycle{margin-top: 14px; display:grid; grid-template-columns: 1fr 1fr; gap: 8px}
.viz-learn-cycle .item{
  border:1px solid var(--line-strong); padding: 12px 12px; font-size: 11px;
  display:flex; flex-direction:column; gap: 6px; min-height: 70px;
}
.viz-learn-cycle .item b{font-size:13px; color: var(--navy); font-family: var(--ff-base); font-weight: 700}
.viz-learn-cycle .item .meta{font-family: var(--ff-mono); font-size:9px; letter-spacing:.1em; color: var(--gold); text-transform:uppercase}

/* ── Section: 学習サイクル ─────────────────────────────────────────── */
.cycle{background: var(--white); padding: clamp(80px,10vw,120px) 0; border-top:1px solid var(--line)}
.cycle-head{text-align:center; max-width: 760px; margin: 0 auto 64px}
.cycle-head .eyebrow{justify-content:center}
.cycle-grid{display:grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start}
@media (max-width:980px){ .cycle-grid{grid-template-columns:1fr} }

/* Drama mock player */
.drama-player{
  background: #0B0F1A; border:1px solid var(--navy-3);
  aspect-ratio: 16/9; position: relative; overflow: hidden;
  box-shadow: 0 24px 60px rgba(11,37,69,.22);
}
.drama-embed{ position:absolute; inset:0; }
.drama-embed iframe{ width:100%; height:100%; display:block; border:0; }
.drama-frame{
  position:absolute; inset:0;
  background:
    radial-gradient(600px 360px at 30% 40%, rgba(201,169,97,.18), transparent 70%),
    linear-gradient(160deg, #142447, #08152c);
  display:flex; align-items:flex-end; padding: 28px;
}
.drama-actors{display:flex; gap: 24px; align-items:flex-end; width:100%; justify-content: space-between}
.drama-actor{
  width: 36%; aspect-ratio: 3/4; border:1px solid rgba(201,169,97,.4);
  background:
    repeating-linear-gradient(45deg, rgba(201,169,97,.08) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, #1d3056, #0d1c3a);
  position:relative;
}
.drama-actor::after{
  content: attr(data-label); position:absolute; left:8px; bottom:8px;
  font-family: var(--ff-mono); font-size:10px; color: rgba(236,227,203,.45); letter-spacing:.1em;
}
.drama-sub{
  position:absolute; left: 50%; bottom: 22%; transform: translateX(-50%);
  background: rgba(0,0,0,.55); padding: 8px 14px; color:#fff; font-size: 14px;
  border-bottom: 2px solid var(--gold); white-space: nowrap;
}
.drama-chrome{position:absolute; top:14px; left:14px; right:14px; display:flex; justify-content:space-between; align-items:center; color:rgba(236,227,203,.6); font-family: var(--ff-mono); font-size: 10px; letter-spacing: .14em}
.drama-chrome .rec{display:flex; align-items:center; gap:6px; color: #ff5a5f}
.drama-chrome .rec::before{content:""; width:8px; height:8px; background:#ff5a5f; border-radius:50%; animation: pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
.drama-controls{
  position:absolute; bottom:0; left:0; right:0; padding:10px 18px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
  display:flex; align-items:center; gap:14px;
}
.drama-controls .play{
  width:34px; height:34px; border:1px solid var(--gold); color:var(--gold);
  display:grid; place-items:center; font-size:12px; cursor:pointer;
}
.drama-bar{flex:1; height:3px; background: rgba(255,255,255,.18); position:relative; overflow:hidden}
.drama-bar .fill{position:absolute; left:0; top:0; bottom:0; background: var(--gold); width: 38%}
.drama-time{font-family: var(--ff-mono); font-size:11px; color:rgba(255,255,255,.7); letter-spacing:.08em}

.cycle-features{display:grid; gap: 18px}
.cycle-feat{
  border:1px solid var(--line); padding: 24px 26px; background: var(--white);
  display:grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: start;
}
.cycle-feat .badge{
  font-family: var(--ff-serif); font-size: 13px; color:var(--gold); letter-spacing:.16em;
  border:1px solid var(--gold); padding: 8px 6px; text-align:center; height:64px; display:grid; place-items:center;
}
.cycle-feat h4{font-size:17px; margin: 0 0 8px}
.cycle-feat p{font-size: 13px; color:var(--mute); margin:0; line-height:1.7}

/* Cycle loop diagram */
.cycle-loop{
  margin-top: 64px; padding: 48px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.cycle-loop-inner{display:grid; grid-template-columns: repeat(4,1fr); gap: 0;}
@media (max-width:880px){ .cycle-loop-inner{grid-template-columns: 1fr 1fr} }
.cycle-step{
  padding: 24px 22px; position:relative; border-right:1px solid var(--line);
}
.cycle-step:last-child{border-right:0}
.cycle-step .step-no{font-family: var(--ff-mono); font-size: 10px; letter-spacing:.16em; color: var(--gold)}
.cycle-step h5{font-size: 15px; margin: 6px 0 8px; line-height:1.45; min-height: 2.9em}
.cycle-step p{font-size: 12px; color: var(--mute); margin: 0; line-height: 1.7}
.cycle-step::after{
  content:"→"; position:absolute; right:-8px; top:50%; transform: translateY(-50%);
  background: var(--white); color: var(--gold); padding: 0 4px; font-family: var(--ff-serif);
}
.cycle-step:last-child::after{display:none}
@media (max-width:880px){ .cycle-step::after{display:none} }

/* ── Section: Flow ─────────────────────────────────────────────────── */
.flow{background: var(--cream); padding: clamp(80px,10vw,120px) 0}
.flow-grid{
  display:grid; grid-template-columns: 200px 1fr; gap: 36px;
  position: relative;
}
@media (max-width: 880px){ .flow-grid{grid-template-columns:1fr} }
.flow-steps{display:grid; gap: 0}
.flow-step{
  display:grid; grid-template-columns: 80px 1fr 1fr; gap: 32px; align-items: start;
  padding: 32px 0; border-top: 1px solid var(--line-strong);
  position: relative;
}
.flow-step:last-child{border-bottom:1px solid var(--line-strong)}
@media (max-width:880px){ .flow-step{grid-template-columns: 60px 1fr; gap:18px} .flow-step .micro{grid-column: 1/-1; padding-left: 78px} }
.flow-step .no{font-family:var(--ff-serif); font-size: 48px; color: var(--gold); line-height:1; font-weight:500}
.flow-step h4{font-size: 19px; margin: 0 0 8px}
.flow-step .desc{font-size: 13px; color: var(--mute); margin:0; line-height:1.7}
.flow-step .micro{font-family: var(--ff-mono); font-size: 11px; color: var(--navy-3); letter-spacing:.06em; margin-top:4px; line-height:1.7}
.flow-step .micro b{color:var(--gold); font-family: var(--ff-base); font-weight: 700; letter-spacing:0}

/* ── Section: Pricing ──────────────────────────────────────────────── */
.price{background: var(--white); padding: clamp(80px,10vw,120px) 0; border-top:1px solid var(--line)}
.price-grid{display:grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: start}
@media (max-width:980px){ .price-grid{grid-template-columns:1fr; gap: 40px} }
.price-explain{ }
.price-explain blockquote{
  margin: 0 0 24px; padding: 22px 24px; border-left: 3px solid var(--gold);
  background: var(--cream); font-size: 14px; line-height: 1.85; color: var(--navy);
}
.price-explain blockquote b{ color: var(--gold) }
.price-explain ul{padding:0; margin:0; list-style: none; display: grid; gap: 14px}
.price-explain li{display:grid; grid-template-columns: 28px 1fr; gap:12px; font-size: 13px; color: var(--mute); line-height:1.7}
.price-explain li::before{
  content:"✓"; color: var(--gold); font-weight: 700; text-align:center;
}
.price-card{
  border:1px solid var(--line-strong); padding: 36px;
  background: var(--cream); position: relative;
}
.price-card .stamp{position:absolute; top:-14px; right: 24px; background: var(--navy); color: var(--gold); padding: 6px 14px; font-size: 11px; letter-spacing:.16em; font-family: var(--ff-mono)}
.price-card h4{font-size: 13px; letter-spacing:.18em; color: var(--mute); font-family: var(--ff-mono); margin: 0 0 8px; text-transform:uppercase}
.price-card .row{display:flex; align-items:baseline; gap:8px; padding: 18px 0; border-bottom:1px dashed var(--line-strong)}
.price-card .row:last-child{border:0}
.price-card .row .k{font-size: 14px; color: var(--ink); flex:1}
.price-card .row .v{font-family: var(--ff-serif); font-size: 24px; font-weight: 700; color: var(--navy)}
.price-card .row .v.gold{color: var(--gold)}
.price-card .row .v small{font-size: 12px; font-family: var(--ff-base); color: var(--mute); font-weight: 400; margin-left: 4px}
.price-card .foot{font-size: 11px; color: var(--mute); margin-top: 18px; line-height: 1.7}

.price-tagline{margin-top: 28px; padding: 24px 26px; background: var(--navy); border-left: 3px solid var(--gold)}
.price-tagline .big{margin:0; font-size: clamp(18px,2vw,22px); font-weight:800; color: var(--cream); line-height:1.5}
.price-tagline .big em{font-style: normal; color: var(--gold)}
.price-flow{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top: 16px}
.price-flow > span{font-family: var(--ff-mono); font-size: 13px; letter-spacing:.08em; color: var(--cream); padding: 6px 14px; border:1px solid rgba(236,227,203,.32); background: rgba(255,255,255,.06)}
.price-flow .arr{border:0; background:none; padding:0; color: var(--gold); font-size: 15px}
.price-flow .free{margin-left: 4px; border-color: var(--gold); background: var(--gold); color: var(--navy); font-weight: 700}

/* ── FAQ ───────────────────────────────────────────────────────────── */
.faq{background: var(--cream); padding: clamp(80px,10vw,120px) 0}
.faq-grid{display:grid; grid-template-columns: 1fr 1.6fr; gap: 56px}
@media (max-width:880px){ .faq-grid{grid-template-columns:1fr} }
.faq-list{border-top: 1px solid var(--line-strong)}
.faq-item{border-bottom: 1px solid var(--line-strong); padding: 22px 0; cursor: pointer}
.faq-q{display:flex; gap: 18px; align-items: flex-start; font-weight: 700; font-size: 16px; line-height:1.5}
.faq-q .q-mark{font-family: var(--ff-serif); color: var(--gold); flex:0 0 28px; font-size: 22px; line-height: 1}
.faq-q .toggle{margin-left:auto; color: var(--gold); font-family: var(--ff-mono); transition: transform .3s; flex:0 0 16px}
.faq-item.open .toggle{transform: rotate(45deg)}
.faq-a{
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease;
  padding-left: 46px;
}
.faq-a > div{overflow:hidden}
.faq-item.open .faq-a{grid-template-rows: 1fr}
.faq-a p{margin: 14px 0 0; font-size: 14px; color: var(--mute); line-height: 1.85}

/* ── CTA Section ───────────────────────────────────────────────────── */
.cta{
  background: var(--cream); color: var(--navy); padding: clamp(80px,10vw,120px) 0;
  position:relative; overflow:hidden; border-top: 1px solid var(--line);
}
.cta::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(11,37,69,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,37,69,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
}
.cta-inner{position:relative; display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start}
@media (max-width:980px){ .cta-inner{grid-template-columns:1fr; gap:40px} }
.cta-text h2{font-size: clamp(28px,3.6vw,46px); line-height:1.25; margin:14px 0 20px}
.cta-text .lede{color: var(--mute); font-size: 15px; max-width: 40ch}
.cta-text .gold{color: var(--gold)}
.cta-quick{margin-top: 36px; display:grid; gap: 14px; max-width: 380px}
.cta-quick .row{display:flex; align-items:center; gap:14px; padding: 14px 18px; border:1px solid var(--line-strong); background: var(--white)}
.cta-quick .row .lbl{font-family:var(--ff-mono); font-size:10px; letter-spacing:.16em; color: var(--gold); width: 70px}
.cta-quick .row .val{font-size:15px; color: var(--navy)}
.cta-quick .row .val .sm{font-size:11px; color:var(--mute); margin-left:8px}

/* Form */
.form-card{
  background: var(--white); color: var(--ink); padding: 36px;
  position:relative; border: 1px solid var(--line-strong);
}
.form-card .step-indicator{display:flex; gap: 6px; margin-bottom: 28px}
.form-card .step-indicator .dot{width:24px; height: 3px; background: var(--line-strong)}
.form-card .step-indicator .dot.on{background: var(--gold)}
.form-card .step-indicator .dot.done{background: var(--navy)}
.form-card h3{font-size: 22px; margin: 0 0 6px; letter-spacing:-.005em}
.form-card .substep{font-family: var(--ff-mono); font-size: 11px; color: var(--mute); letter-spacing:.16em; margin-bottom: 18px}
.form-row{display:grid; gap:6px; margin-bottom: 18px}
.form-row label{font-size: 12px; font-weight: 700; color: var(--navy); letter-spacing:.02em; display:flex; align-items:center; gap: 8px}
.form-row label .req{font-size:10px; background: var(--gold); color: var(--navy); padding: 2px 6px; font-family: var(--ff-mono); letter-spacing:.08em}
.form-row label .opt{font-size:10px; border:1px solid var(--line-strong); color: var(--mute); padding: 2px 6px; font-family: var(--ff-mono); letter-spacing:.08em}
.form-row input, .form-row select, .form-row textarea{
  font-family: inherit; font-size: 14px; padding: 12px 14px; border:1px solid var(--line-strong);
  background: var(--white); border-radius:0; color: var(--ink);
  transition: border-color .2s;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{ outline:0; border-color: var(--navy) }
.form-row textarea{min-height: 96px; resize: vertical}
.form-row.two{grid-template-columns: 1fr 1fr; gap: 12px}
.form-row.two label{grid-column: 1/-1}
.form-row .help{font-size: 11px; color: var(--mute); line-height:1.6}
.form-choices{display:grid; gap: 8px; grid-template-columns: 1fr 1fr}
.choice{
  display:flex; gap:10px; align-items: center; padding: 12px 14px; border:1px solid var(--line-strong);
  background: var(--white); cursor:pointer; font-size: 13px; user-select:none;
}
.choice:hover{border-color: var(--navy)}
.choice.on{border-color: var(--gold); background: rgba(201,169,97,.08); color: var(--navy)}
.choice .box{width:14px; height:14px; border:1.5px solid var(--line-strong); display:grid; place-items:center}
.choice.on .box{border-color: var(--gold); background: var(--gold); color: var(--navy)}
.choice .box::before{content:"✓"; font-size: 10px; opacity:0; font-weight:700}
.choice.on .box::before{opacity:1}
.form-actions{display:flex; gap:12px; justify-content:space-between; margin-top: 8px}
.form-back{font-size: 13px; color: var(--mute); display:inline-flex; align-items:center; gap:6px}
.form-card.done-state{text-align:center; padding: 56px 36px}
.form-card .check{width:64px; height: 64px; border: 1.5px solid var(--gold); color: var(--gold); display:grid; place-items:center; font-size:30px; margin: 0 auto 18px; border-radius: 50%}
.privacy-note{font-size: 11px; color: var(--mute); margin-top: 12px; line-height: 1.6}
.privacy-note a{text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 2px}

/* ── CTA Banner (Tally link) ─────────────────────────────────────── */
.cta-banner{
  display: block;
  background: var(--navy);
  color: var(--white);
  padding: 40px 36px;
  border: 1px solid rgba(201,169,97,.25);
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  text-decoration: none;
  cursor: pointer;
  align-self: stretch;
}
.cta-banner:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(11,37,69,.22);
}
.cta-banner::before{
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,169,97,.13) 0%, transparent 70%);
  pointer-events: none;
}
.cta-banner-tag{
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--gold);
  border: 1px solid rgba(201,169,97,.4);
  padding: 4px 12px;
  margin-bottom: 24px;
  text-transform: uppercase;
}
.cta-banner-title{
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -.01em;
  margin: 0 0 16px;
  color: var(--white);
}
.cta-banner-sub{
  font-size: 14px;
  color: rgba(255,255,255,.58);
  line-height: 1.8;
  margin: 0 0 36px;
}
.cta-banner-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.cta-banner-facts{
  display: flex;
  gap: 24px;
}
.cta-banner-facts div{
  font-size: 13px;
  color: rgba(255,255,255,.5);
  line-height: 1.5;
}
.cta-banner-facts b{
  display: block;
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .16em;
  color: var(--gold-soft);
  font-weight: 500;
  margin-bottom: 2px;
}
.cta-banner-cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 28px;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: background .15s;
}
.cta-banner:hover .cta-banner-cta{
  background: var(--gold-soft);
}

/* ── Footer ────────────────────────────────────────────────────────── */
.foot{background: #07182f; color: rgba(236,227,203,.7); padding: 56px 0 28px; font-size: 13px}
.foot-inner{display:grid; grid-template-columns: 2fr 1fr; gap: 48px; padding-bottom: 36px; border-bottom: 1px solid rgba(201,169,97,.18)}
@media (max-width:880px){ .foot-inner{grid-template-columns: 1fr 1fr} }
.foot h6{font-size: 11px; letter-spacing:.18em; color: var(--gold); text-transform:uppercase; font-family: var(--ff-mono); margin: 0 0 14px; font-weight: 500}
.foot ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.foot ul a{opacity:.7}
.foot ul a:hover{opacity:1}
.foot .legal{display:flex; justify-content:space-between; align-items:center; padding-top: 20px; font-size: 11px; letter-spacing:.08em; color: rgba(236,227,203,.5); flex-wrap:wrap; gap:12px}
.foot .legal .crs{font-family: var(--ff-mono)}
.foot-brand small{font-size: 11px; color: rgba(236,227,203,.5); line-height: 1.6; display:block; margin-top: 12px}

/* ── Sticky bottom CTA bar ─────────────────────────────────────────── */
.stickbar{
  position: fixed; bottom: 0; left:0; right:0; z-index: 30;
  background: rgba(11,37,69,.96); backdrop-filter: blur(10px);
  color: var(--cream); padding: 12px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  border-top: 1px solid rgba(201,169,97,.3); transform: translateY(110%); transition: transform .35s ease;
}
.stickbar.show{transform: translateY(0)}
.stickbar .msg{font-size: 13px; letter-spacing: .02em}
.stickbar .msg b{color: var(--gold)}
.stickbar .btn{height: 44px; padding: 0 18px; font-size: 13px}
@media (max-width: 640px){
  .stickbar .msg{display:none}
}

/* ── Scrollytelling helpers ────────────────────────────────────────── */
.parallax{transition: transform 1.6s cubic-bezier(.2,.7,.2,1)}
.in .parallax{transform: translateY(-6px)}