/* ============================================================================
   BIZA — Date Sugar Development Program
   Design tokens — white / navy / gray / gold. Clean, corporate, elegant.
   ============================================================================ */

:root{
  /* --- surfaces --- */
  --white:        #FFFFFF;
  --paper:        #FAFAFA;
  --gray:         #F2F3F5;
  --gray-2:       #E7E9EC;

  /* --- ink --- */
  --navy:         #0B2340;
  --navy-2:       #123159;
  --ink:          #16212E;
  --ink-dim:      #5C6773;
  --ink-faint:    #96A0AA;

  /* --- lines --- */
  --line:         rgba(11,35,64,0.10);
  --line-strong:  rgba(11,35,64,0.20);

  /* --- accent: muted brass gold --- */
  --gold:         #B08D4F;
  --gold-2:       #8F6F38;
  --gold-dim:     rgba(176,141,79,0.12);
  --gold-dim-2:   rgba(176,141,79,0.22);

  /* --- radii --- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* --- shadow --- */
  --shadow-sm: 0 1px 2px rgba(11,35,64,.06), 0 1px 1px rgba(11,35,64,.04);
  --shadow-md: 0 12px 32px rgba(11,35,64,.10);
  --shadow-lg: 0 28px 70px rgba(11,35,64,.18);

  /* --- type --- */
  --f-display: 'Space Grotesk', system-ui, sans-serif;
  --f-body: 'Manrope', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* --- motion --- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --t-micro: 180ms;
  --t-card: 420ms;
  --t-enter: 560ms;

  /* --- layout --- */
  --pad: 22px;
  --maxw: 640px;
}

@media (min-width: 768px){ :root{ --pad: 40px; --maxw: 720px; } }
@media (min-width: 1024px){ :root{ --pad: 0px; --maxw: 900px; } }

*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

html, body{ height: 100%; }
body{
  margin:0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden; /* screens manage their own scroll */
}

img{ max-width:100%; display:block; }
button{ font-family: inherit; }
a{ color: inherit; }

h1,h2,h3,h4{ margin:0; font-family: var(--f-display); font-weight: 600; letter-spacing: -0.01em; color: var(--navy); }

.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

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

/* ============================================================================
   Utility — eyebrow / labels / reveal
   ============================================================================ */

.eyebrow{
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--gold-2);
}

.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  color: var(--ink-dim); white-space: nowrap;
}
.tag.is-current{ border-color: transparent; background: var(--gold-dim-2); color: var(--gold-2); }
.tag.is-future{ color: var(--ink-faint); border-style: dashed; }
.tag.is-place{ background: var(--gray); border-color: transparent; }

.reveal{ opacity: 0; transform: translateY(18px); transition: opacity var(--t-enter) var(--ease), transform var(--t-enter) var(--ease); }
.reveal.is-visible{ opacity: 1; transform: none; }
.reveal-stagger > *{ opacity:0; transform: translateY(14px); transition: opacity var(--t-enter) var(--ease), transform var(--t-enter) var(--ease); }
.reveal-stagger.is-visible > *{ opacity:1; transform:none; }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay: 70ms; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay: 140ms; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay: 210ms; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay: 280ms; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--f-body); font-weight: 700; font-size: 14.5px;
  padding: 14px 22px; border-radius: var(--r-pill); border:1px solid transparent;
  cursor:pointer; transition: transform var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease), background var(--t-micro) var(--ease);
  min-height: 48px;
}
.btn svg{ width:16px; height:16px; transition: transform var(--t-micro) var(--ease); }
.btn:hover svg{ transform: translateX(3px); }
.btn-primary{ background: var(--navy); color: var(--white); }
.btn-primary:hover{ box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-ghost{ background: transparent; color: var(--navy); border-color: var(--line-strong); }
.btn-ghost:hover{ background: var(--gray); }
.btn-block{ width:100%; }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ============================================================================
   Splash
   ============================================================================ */

#splash{
  position: fixed; inset:0; z-index: 200;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse 600px 400px at 50% 42%, rgba(214,189,140,.08), transparent 60%),
    #070C16;
  transition: opacity .55s ease, visibility .55s ease;
  animation: splashForceHide 0s linear 2.6s forwards;
}
#splash.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
@keyframes splashForceHide{ to{ opacity:0; visibility:hidden; pointer-events:none; } }

.splash-logo{
  height: 50px; width:auto; opacity:0;
  filter: drop-shadow(0 0 22px rgba(214,189,140,.14));
  animation: splashIn 1s cubic-bezier(.2,.8,.25,1) forwards;
}
@keyframes splashIn{
  0%{ opacity:0; transform: scale(.92) translateY(6px); }
  65%{ opacity:1; transform: scale(1.015) translateY(0); }
  100%{ opacity:1; transform: scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .splash-logo{ animation:none; opacity:1; }
  #splash{ transition:none; }
}

/* ============================================================================
   Bottom tab bar (persistent app chrome — always visible on both screens)
   ============================================================================ */

#tabbar{
  position: fixed; left:0; right:0; bottom:0; z-index: 50;
  display:flex; align-items:stretch; justify-content:space-around;
  background: rgba(255,255,255,.94); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
}
.tab-btn{
  flex:1; max-width:88px; display:flex; flex-direction:column; align-items:center; gap:4px;
  background:none; border:none; cursor:pointer; padding: 7px 2px 6px; position:relative;
  color: var(--ink-faint); transition: color var(--t-micro) var(--ease), background var(--t-micro) var(--ease);
  border-radius: 14px; margin: 0 2px;
}
.tab-btn svg{ width:19px; height:19px; }
.tab-btn .tab-label{ font-family: var(--f-mono); font-size: 8.7px; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; }
.tab-btn.is-active{ color: var(--navy); }
.tab-btn.is-accent{ background: var(--gray); }
.tab-btn.is-accent.is-active{ background: var(--gray-2); color: var(--navy); }
.tab-btn .tab-active-dot{ position:absolute; top:1px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background: var(--gold); opacity:0; transition: opacity 180ms var(--ease); }
.tab-btn.is-active .tab-active-dot{ opacity:1; }
.tab-btn .tab-check{
  position:absolute; top:2px; right:22%; width:12px; height:12px; border-radius:50%;
  background: var(--gold); display:none; align-items:center; justify-content:center;
}
.tab-btn.is-visited:not(.is-active) .tab-check{ display:flex; }
.tab-btn .tab-check svg{ width:7px; height:7px; stroke: var(--white); stroke-width:3; }

/* ============================================================================
   Home-screen progress line above the section cards
   ============================================================================ */

/* ============================================================================
   Overlay + generic sheet (nav index / contact)
   ============================================================================ */

.overlay{
  position: fixed; inset:0; z-index: 90;
  background: rgba(11,20,33,.42);
  opacity:0; visibility:hidden; transition: opacity 280ms var(--ease), visibility 280ms var(--ease);
}
.overlay.is-open{ opacity:1; visibility:visible; }

.sheet{
  position: fixed; left:0; right:0; bottom:0; z-index: 91;
  background: var(--white);
  border-radius: 22px 22px 0 0;
  box-shadow: var(--shadow-lg);
  max-height: 82vh; overflow-y:auto;
  padding: 14px 22px 32px;
  transform: translateY(100%);
  transition: transform 380ms var(--ease);
}
.sheet.is-open{ transform: translateY(0); }
.sheet-handle{ display:flex; justify-content:center; padding: 8px 0 16px; }
.sheet-handle span{ width: 38px; height:4px; border-radius:3px; background: var(--line-strong); }
.sheet h3{ font-size: 20px; margin-bottom: 6px; }
.sheet p{ color: var(--ink-dim); font-size: 14.5px; }

@media (min-width: 768px){
  .sheet{
    left:50%; right:auto; bottom:auto; top:50%;
    transform: translate(-50%,-46%) scale(.98);
    width: min(480px, calc(100vw - 48px));
    border-radius: var(--r-lg);
    opacity:0; visibility:hidden;
    transition: transform 320ms var(--ease), opacity 260ms var(--ease), visibility 260ms var(--ease);
    max-height: 76vh;
  }
  .sheet.is-open{ transform: translate(-50%,-50%) scale(1); opacity:1; visibility:visible; }
  .sheet-handle{ display:none; }
}

.sheet-close{
  position:absolute; top:14px; right:14px;
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line-strong); background: var(--white);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.sheet-close svg{ width:15px; height:15px; }

.nav-index-list{ list-style:none; margin: 12px 0 0; padding:0; display:flex; flex-direction:column; gap:2px; }
.nav-index-list button{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding: 13px 4px; font-family: var(--f-body); font-size: 15.5px; font-weight:600; color: var(--navy);
  border-bottom: 1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
}
.nav-index-list button .idx{ font-family: var(--f-mono); font-size: 11px; color: var(--ink-faint); font-weight:600; }

.contact-actions{ display:flex; flex-direction:column; gap:10px; margin-top: 18px; }

/* ============================================================================
   Screens (app-style push navigation: home <-> section detail)
   ============================================================================ */

.screen{
  position: fixed; inset:0; z-index:10;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  background: var(--white);
  transition: transform 440ms var(--ease);
}
#screen-home{ z-index:10; }
#screen-section{ z-index:20; transform: translateX(100%); }
#screen-section.is-active{ transform: translateX(0); }
body.is-detail #screen-home{ transform: translateX(-14%); }
@media (prefers-reduced-motion: reduce){
  .screen{ transition:none; }
  body.is-detail #screen-home{ transform:none; }
}

/* ============================================================================
   Home screen
   ============================================================================ */

.bg-grid{
  position:absolute; inset:0; height: 640px; pointer-events:none;
  background-image: radial-gradient(rgba(11,35,64,0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 520px 460px at 50% 8%, black, transparent 72%);
  mask-image: radial-gradient(ellipse 520px 460px at 50% 8%, black, transparent 72%);
}

.home-inner{ position:relative; padding: 52px var(--pad) 100px; }
@media (min-width:1024px){ .home-inner{ padding-top: 72px; } }

.home-header{ text-align:center; margin-bottom: 40px; }
.home-header img{ height: 34px; width:auto; margin:0 auto; filter: brightness(0) opacity(.9); }

.home-title-wrap{ text-align:center; margin-bottom: 40px; }
.home-title-wrap .eyebrow{ display:block; margin-bottom: 12px; }
.home-title-wrap h1{ font-size: 24px; line-height:1.22; letter-spacing:-0.01em; }
.home-title-wrap h1 .hl{ color: var(--gold-2); }
.home-sub{ margin: 14px auto 0; font-size: 15.5px; color: var(--ink-dim); max-width: 34ch; }
@media (min-width:640px){ .home-title-wrap h1{ font-size: 29px; } }

.section-stack{ display:flex; flex-direction:column; gap: 12px; }

.section-card{
  position:relative; text-align:left; border-radius: var(--r-md); padding: 18px 32px 18px 22px;
  background: linear-gradient(155deg, var(--white), var(--paper));
  border:1px solid var(--line);
  display:flex; align-items:center; gap:15px;
  transition: transform var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease);
  cursor:pointer; box-shadow: var(--shadow-sm); overflow:hidden;
  width:100%;
}
.section-card::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--gold); }
.section-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.section-card:active{ transform: scale(.99); }
.sc-visited-badge{
  position:absolute; top:12px; right:12px; width:19px; height:19px; border-radius:50%;
  background: var(--gold); display:flex; align-items:center; justify-content:center;
}
.sc-visited-badge svg{ width:10px; height:10px; stroke: var(--white); stroke-width:3; }
.sc-icon{ width:42px; height:42px; border-radius:11px; background: var(--navy); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sc-icon svg{ width:19px; height:19px; stroke: var(--gold); }
.sc-icon img{ width:22px; height:22px; object-fit:contain; }
.sc-text{ flex:1; min-width:0; }
.sc-name{ font-family: var(--f-display); font-size: 15.5px; font-weight:700; color: var(--navy); }
.sc-desc{ font-size: 12px; color: var(--ink-dim); margin-top:3px; line-height:1.4; }
.sc-meta{ text-align:right; flex-shrink:0; padding-left:6px; }
.sc-meta .n{ display:block; font-family: var(--f-mono); font-size: 11.5px; font-weight:700; color: var(--navy); white-space:nowrap; }
.sc-arrow{ flex-shrink:0; color: var(--ink-faint); }
.sc-arrow svg{ width:15px; height:15px; }

.section-card.is-accent{
  background: var(--gray);
  border-color: transparent;
}

.cta-block{
  margin-top: 30px; padding: 26px 22px; border-radius: var(--r-lg);
  background: linear-gradient(155deg, var(--navy), var(--navy-2));
  color: var(--white);
}
.cta-block .eyebrow{ color: var(--gold); }
.cta-block h2{ color: var(--white); font-size: 22px; line-height:1.22; margin-top:10px; }
.cta-block p{ font-size: 14px; color: rgba(255,255,255,.72); margin-top: 10px; max-width: 42ch; }
.cta-actions{ display:flex; flex-direction:column; gap:10px; margin-top: 22px; }
.cta-block .btn-primary{ background: var(--gold); color: var(--navy); }
.cta-block .btn-primary:hover{ background: #C1A268; }
.cta-block .btn-ghost{ border-color: rgba(255,255,255,.28); color: var(--white); }
.cta-block .btn-ghost:hover{ background: rgba(255,255,255,.08); }
@media (min-width:560px){ .cta-actions{ flex-direction:row; } }

.home-footer{ margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); }
.footer-logo{ height: 26px; width:auto; filter: brightness(0) opacity(.86); }
.footer-confidential{ font-size: 12.5px; color: var(--ink-faint); margin-top:16px; }
.footer-office{ font-size: 12.5px; color: var(--ink-faint); line-height:1.6; margin-top:14px; }
.footer-contacts{ display:flex; flex-direction:column; gap:10px; font-size: 13.5px; margin-top: 18px; }
.footer-contacts a{ display:flex; align-items:center; gap:8px; text-decoration:none; color: var(--navy); font-weight:600; }
.footer-contacts a svg{ width:16px; height:16px; flex-shrink:0; color: var(--gold-2); }

/* ============================================================================
   Section detail screen
   ============================================================================ */

.topbar{
  position: sticky; top:0; z-index: 5;
  display:flex; align-items:center; gap:12px;
  padding: 18px var(--pad);
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar .logo-mini{ height: 16px; width:auto; filter: brightness(0) opacity(.8); flex-shrink:0; }
.topbar .divider{ width:1px; height:16px; background: var(--line-strong); flex-shrink:0; }
.topbar .section-chip{ display:flex; align-items:center; gap:7px; min-width:0; }
.topbar .section-chip .dot{ width:6px; height:6px; border-radius:50%; background: var(--gold); flex-shrink:0; }
.topbar .section-chip .label{ font-family: var(--f-body); font-size: 13.5px; font-weight:700; color: var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar .spacer{ flex:1; }
.btn-back{
  display:flex; align-items:center; gap:6px; flex-shrink:0;
  background: none; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  padding: 8px 14px 8px 10px; font-size: 12.5px; font-weight:700; color: var(--navy); cursor:pointer;
  transition: background var(--t-micro) var(--ease);
}
.btn-back:hover{ background: var(--gray); }
.btn-back svg{ width:14px; height:14px; }

.section-content{ padding: 30px var(--pad) 96px; max-width: var(--maxw); margin:0 auto; }

.panel-head{ margin-bottom: 30px; }
.panel-head .eyebrow{ display:block; margin-bottom: 10px; }
.panel-head h2{ font-size: 26px; line-height: 1.14; }
.panel-head p{ margin: 10px 0 0; color: var(--ink-dim); font-size: 15px; max-width: 46ch; }
@media (min-width: 768px){ .panel-head h2{ font-size: 32px; } }

.panel{ display:none; }
.panel.is-active{ display:block; }

/* ============================================================================
   Roadmap panel
   ============================================================================ */

.roadmap-note{
  display:flex; gap:10px; align-items:flex-start;
  background: var(--gray); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 30px;
  font-size: 13.5px; color: var(--ink-dim);
}
.roadmap-note svg{ width:16px; height:16px; flex-shrink:0; margin-top:2px; color: var(--ink-faint); }

.roadmap-stepper{ position:relative; }
.roadmap-stepper .rs-line{ position:absolute; left: 17px; top: 6px; bottom: 6px; width: 2px; background: var(--line-strong); border-radius: 2px; overflow:hidden; }
.roadmap-stepper .rs-line-fill{ position:absolute; left:0; top:0; width:100%; height:0%; background: linear-gradient(180deg, var(--gold), var(--navy)); transition: height 120ms linear; }
.rs-phase{ position:relative; padding: 0 0 34px 48px; }
.rs-phase:last-child{ padding-bottom: 0; }
.rs-dot{
  position:absolute; left:8px; top:2px; width:20px; height:20px; border-radius:50%;
  background: var(--white); border: 2px solid var(--line-strong);
  transition: border-color 220ms var(--ease), background 220ms var(--ease); z-index:1;
}
.rs-phase.is-active .rs-dot{ border-color: var(--gold); background: var(--gold); box-shadow: 0 0 0 5px var(--gold-dim); }
.rs-phase-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom: 10px; }
.rs-phase-head .rs-n{ font-family: var(--f-mono); font-size: 12px; color: var(--ink-faint); }
.rs-phase h3{ font-size: 19px; }
.rs-phase.is-future h3{ color: var(--ink-dim); }
.rs-meta{ display:flex; flex-wrap:wrap; gap: 14px 20px; margin: 8px 0 10px; }
.rs-meta div{ font-size: 12.5px; }
.rs-meta .rm-label{ color: var(--ink-faint); display:block; font-family: var(--f-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:2px; }
.rs-purpose{ font-size: 14.5px; color: var(--ink-dim); max-width: 44ch; }
.rs-toggle{
  margin-top: 10px; background:none; border:none; padding:0; cursor:pointer;
  font-family: var(--f-mono); font-size: 11px; letter-spacing:.06em; text-transform:uppercase;
  color: var(--gold-2); display:flex; align-items:center; gap:5px;
}
.rs-toggle svg{ width:11px; height:11px; transition: transform 220ms var(--ease); }
.rs-phase.is-open .rs-toggle svg{ transform: rotate(180deg); }
.rs-detail{ overflow:hidden; max-height:0; transition: max-height 320ms var(--ease); }
.rs-phase.is-open .rs-detail{ max-height: 220px; }
.rs-detail ul{ margin: 12px 0 0; padding: 0 0 0 16px; font-size: 13.5px; color: var(--ink-dim); }
.rs-detail li{ margin-bottom: 5px; }

.roadmap-path{ display:none; }
@media (min-width: 1024px){
  .roadmap-stepper{ display:none; }
  .roadmap-path{ display:block; position:relative; }
  .rp-line{ position:absolute; left:0; right:0; top: 26px; height: 2px; background: var(--line-strong); border-radius:2px; overflow:hidden; }
  .rp-line-fill{ position:absolute; left:0; top:0; height:100%; width:0%; background: linear-gradient(90deg, var(--gold), var(--navy)); transition: width 120ms linear; }
  .rp-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 22px; position:relative; }
  .rp-phase{ position:relative; padding-top: 50px; }
  .rp-dot{ position:absolute; left:0; top:16px; width:20px; height:20px; border-radius:50%; background: var(--white); border:2px solid var(--line-strong); z-index:1; }
  .rp-phase.is-current .rp-dot{ border-color: var(--gold); background: var(--gold); box-shadow: 0 0 0 5px var(--gold-dim); }
  .rp-card{ background: var(--paper); border:1px solid var(--line); border-radius: var(--r-md); padding: 18px 16px; height: 100%; transition: box-shadow var(--t-micro) var(--ease), transform var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease); cursor:pointer; }
  .rp-phase.is-current .rp-card{ border-color: var(--line-strong); background: var(--white); }
  .rp-phase.is-future .rp-card{ background: transparent; border-style: dashed; }
  .rp-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
  .rp-phase.is-future h3{ color: var(--ink-dim); }
  .rp-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
  .rp-n{ font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-faint); }
  .rp-card h3{ font-size: 17px; margin: 6px 0 8px; }
  .rp-meta{ display:flex; gap:16px; margin: 10px 0; }
  .rp-meta div{ font-size: 12px; }
  .rp-meta .rm-label{ display:block; font-family: var(--f-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:2px; }
  .rp-purpose{ font-size: 13px; color: var(--ink-dim); }
  .rp-detail{ overflow:hidden; max-height:0; transition: max-height 320ms var(--ease); }
  .rp-phase.is-open .rp-detail{ max-height: 200px; }
  .rp-detail ul{ margin: 10px 0 0; padding-left: 16px; font-size: 12.5px; color: var(--ink-dim); }
  .rp-detail li{ margin-bottom:4px; }
}

/* story moment — now lives inline at the end of the roadmap panel */
.story-band{
  position:relative; min-height: 180px; margin-top: 34px; border-radius: var(--r-lg); overflow:hidden;
  background: linear-gradient(115deg, var(--navy) 0%, var(--navy-2) 55%, #2A4064 100%);
  display:flex; align-items:flex-end;
}
.story-copy{ position:relative; padding: 24px 24px 26px; color: var(--white); }
.story-copy .eyebrow{ color: var(--gold); }
.story-copy h3{ font-size: 18px; margin-top:6px; max-width: 30ch; color: var(--white); }
.story-copy p{ font-size: 12px; margin: 6px 0 0; color: rgba(255,255,255,.62); }

/* ============================================================================
   Recommendation panel
   ============================================================================ */

.rec-card{ background: var(--paper); border:1px solid var(--line); border-radius: var(--r-lg); padding: 24px 22px 28px; }
.rec-statement{ font-family: var(--f-display); font-size: 20px; line-height:1.3; max-width: 30ch; color: var(--navy); }
.rec-support{ margin-top: 12px; font-size: 14.5px; color: var(--ink-dim); max-width: 52ch; }

.rec-steps{ display:flex; flex-direction:column; gap:0; margin-top: 28px; }
@media (min-width:560px){ .rec-steps{ flex-direction:row; align-items:stretch; } }
.rec-step{ flex:1; display:flex; align-items:center; gap:14px; padding: 14px 0; }
@media (min-width:560px){ .rec-step{ flex-direction:column; align-items:flex-start; padding: 0 16px; } }
.rec-step .rs-num{ font-family: var(--f-mono); font-size: 12px; color: var(--gold-2); }
.rec-step h4{ font-size: 16.5px; margin-top:2px; }
.rec-step span{ font-size: 12.5px; color: var(--ink-faint); }
.rec-arrow{ display:flex; align-items:center; justify-content:center; color: var(--ink-faint); }
.rec-arrow svg{ width:16px; height:16px; }
.rec-arrow.is-mobile{ transform: rotate(90deg); margin-left: 3px; }
@media (min-width:560px){ .rec-arrow.is-mobile{ display:none; } .rec-arrow.is-desktop{ display:flex; } }
.rec-arrow.is-desktop{ display:none; }

.rec-gate{ margin-top: 22px; padding-top:20px; border-top:1px solid var(--line); font-size: 13.5px; color: var(--ink-dim); }

.rec-role-toggle{
  margin-top: 22px; display:inline-flex; align-items:center; gap:8px;
  background:none; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  padding: 11px 18px; cursor:pointer; font-size: 13.5px; font-weight:700; color: var(--navy);
}
.rec-role-toggle svg{ width:13px; height:13px; transition: transform 220ms var(--ease); }
.rec-role-toggle.is-open svg{ transform: rotate(180deg); }
.rec-role{ overflow:hidden; max-height:0; transition: max-height 380ms var(--ease); }
.rec-role.is-open{ max-height: 420px; }
.rec-role-grid{ display:grid; grid-template-columns: 1fr; gap:14px; margin-top: 20px; }
@media (min-width:560px){ .rec-role-grid{ grid-template-columns: repeat(3,1fr); } }
.rec-role-item{ border-top: 1px solid var(--line); padding-top: 12px; }
.rec-role-item h5{ font-family: var(--f-body); font-size: 14.5px; font-weight:700; margin:0 0 4px; color: var(--navy); }
.rec-role-item p{ font-size: 13px; color: var(--ink-dim); margin:0; }

/* ============================================================================
   Partner panel
   ============================================================================ */

.partner-eyebrow-row{ display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.partner-eyebrow-row .eyebrow{ margin-bottom:0; }
.partner-mark{ width:18px; height:18px; border-radius:5px; flex-shrink:0; }

.partner-head{ margin-bottom: 22px; }
.partner-logo{ height: 28px; width:auto; }
.partner-sub{ font-size: 14.5px; color: var(--ink-dim); margin-top:14px; }

.partner-carousel{
  display:flex; gap: 12px; overflow-x:auto; scroll-snap-type: x mandatory;
  padding: 4px 0 6px; margin: 0 calc(var(--pad) * -1); padding-left: var(--pad); padding-right: var(--pad);
  -webkit-overflow-scrolling: touch; scrollbar-width:none;
}
.partner-carousel::-webkit-scrollbar{ display:none; }
.p-card{ flex: 0 0 82%; scroll-snap-align: start; background: var(--paper); border:1px solid var(--line); border-radius: var(--r-md); padding: 22px 20px; }
.p-card .pc-n{ font-family: var(--f-mono); font-size: 28px; color: var(--gray-2); font-weight:700; }
.p-card .pc-label{ font-family: var(--f-mono); font-size: 10.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--gold-2); margin-top:10px; }
.p-card h4{ font-size: 16.5px; margin-top:6px; }
.p-card p{ font-size: 13px; color: var(--ink-dim); margin-top:6px; }

.carousel-progress{ display:flex; align-items:center; gap:8px; margin-top: 14px; }
.carousel-progress .cp-count{ font-family: var(--f-mono); font-size:11px; color: var(--ink-faint); }
.carousel-progress .cp-dots{ display:flex; gap:5px; }
.carousel-progress .cp-dot{ width:6px; height:6px; border-radius:50%; background: var(--line-strong); transition: background 200ms var(--ease), width 200ms var(--ease); }
.carousel-progress .cp-dot.is-active{ background: var(--gold); width:16px; border-radius:3px; }

@media (min-width: 1024px){
  .partner-carousel{ display:grid; grid-template-columns: repeat(4,1fr); overflow:visible; margin:0; padding:0; }
  .p-card{ flex:auto; transition: transform var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease); }
  .p-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
  .carousel-progress{ display:none; }
}

.partner-about-toggle{ margin-top: 26px; }
.partner-about{ overflow:hidden; max-height:0; transition: max-height 420ms var(--ease); }
.partner-about.is-open{ max-height: 420px; }
.partner-about-inner{ padding-top: 22px; border-top: 1px solid var(--line); margin-top: 22px; display:flex; flex-direction:column; gap:14px; }
.partner-about-inner p{ font-size: 14px; color: var(--ink-dim); max-width: 60ch; }
.partner-about-inner .pa-note{ font-size: 12.5px; color: var(--ink-faint); font-style: italic; }

/* ============================================================================
   Timeline panel
   ============================================================================ */

.timeline-clock{ display:flex; gap:10px; align-items:flex-start; font-size: 13px; color: var(--ink-faint); margin-bottom: 30px; }
.timeline-clock svg{ width:15px; height:15px; flex-shrink:0; margin-top:2px; }

.tl-vertical{ position:relative; }
.tl-line{ position:absolute; left:17px; top:6px; bottom:6px; width:2px; background: var(--line-strong); overflow:hidden; border-radius:2px; }
.tl-line-fill{ position:absolute; left:0; top:0; width:100%; height:0%; background: linear-gradient(180deg, var(--gold), var(--navy)); transition: height 120ms linear; }
.tl-item{ position:relative; padding: 0 0 30px 48px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-dot{ position:absolute; left:8px; top:2px; width:20px; height:20px; border-radius:50%; background: var(--white); border:2px solid var(--line-strong); z-index:1; transition: border-color 220ms var(--ease), background 220ms var(--ease); }
.tl-item.is-active .tl-dot{ border-color: var(--gold); background: var(--gold); box-shadow: 0 0 0 5px var(--gold-dim); }
.tl-item.is-gate .tl-dot{ border-radius: 4px; transform: rotate(45deg); }
.tl-code{ font-family: var(--f-mono); font-size: 11px; color: var(--gold-2); letter-spacing:.05em; }
.tl-item h4{ font-size: 16.5px; margin-top:3px; }
.tl-item p{ font-size: 13.5px; color: var(--ink-dim); margin-top:4px; max-width: 42ch; }

.tl-horizontal{ display:none; }
@media (min-width: 1024px){
  .tl-vertical{ display:none; }
  .tl-horizontal{ display:block; position:relative; }
  .tlh-line{ position:absolute; left:0; right:0; top:9px; height:2px; background: var(--line-strong); overflow:hidden; }
  .tlh-line-fill{ position:absolute; left:0; top:0; height:100%; width:0%; background: linear-gradient(90deg, var(--gold), var(--navy)); transition: width 120ms linear; }
  .tlh-grid{ display:grid; grid-template-columns: repeat(5,1fr); gap: 18px; position:relative; }
  .tlh-item{ padding-top: 30px; position:relative; }
  .tlh-dot{ position:absolute; left:0; top:0; width:18px; height:18px; border-radius:50%; background: var(--white); border:2px solid var(--line-strong); }
  .tlh-item.is-gate .tlh-dot{ border-radius:4px; transform: rotate(45deg); }
  .tlh-item.is-active .tlh-dot{ border-color: var(--gold); background: var(--gold); box-shadow: 0 0 0 5px var(--gold-dim); }
  .tlh-code{ font-family: var(--f-mono); font-size: 10.5px; color: var(--gold-2); }
  .tlh-item h4{ font-size: 14.5px; margin-top: 4px; }
  .tlh-item p{ font-size: 12px; color: var(--ink-dim); margin-top: 4px; }
}

/* ============================================================================
   Commercial panel
   ============================================================================ */

.commercial-grid{ display:flex; flex-direction:column; gap: 16px; }
@media (min-width: 640px){ .commercial-grid{ flex-direction:row; } }
.cm-card{ flex:1; background: var(--paper); border:1px solid var(--line); border-radius: var(--r-lg); padding: 22px 20px 24px; }
.cm-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.cm-n{ font-family: var(--f-mono); font-size: 12px; color: var(--ink-faint); }
.cm-card h3{ font-size: 20px; margin-top: 4px; }
.cm-meta{ display:flex; gap:14px; margin-top: 8px; font-size: 12.5px; color: var(--ink-faint); }
.cm-price{ font-family: var(--f-display); font-size: 26px; font-weight:700; margin-top: 18px; color: var(--navy); }
.cm-includes{ list-style:none; margin: 18px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.cm-includes li{ display:flex; gap:9px; align-items:flex-start; font-size: 13.5px; color: var(--ink-dim); }
.cm-includes svg{ width:14px; height:14px; margin-top:2px; flex-shrink:0; color: var(--gold-2); }

.cm-toggle{
  margin-top: 20px; background:none; border:none; padding:0; cursor:pointer;
  font-family: var(--f-mono); font-size: 11px; letter-spacing:.06em; text-transform:uppercase; color: var(--gold-2);
  display:flex; align-items:center; gap:6px;
}
.cm-toggle svg{ width:11px; height:11px; transition: transform 220ms var(--ease); }
.cm-card.is-open .cm-toggle svg{ transform: rotate(180deg); }
.cm-scope{ overflow:hidden; max-height:0; transition: max-height 420ms var(--ease); }
.cm-card.is-open .cm-scope{ max-height: 600px; }
.cm-scope-inner{ padding-top: 18px; margin-top: 18px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap: 14px; }
.cm-scope-block .sb-label{ font-family: var(--f-mono); font-size: 10px; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-faint); margin-bottom: 6px; }
.cm-scope-block ul{ margin:0; padding-left: 16px; font-size: 13px; color: var(--ink-dim); }
.cm-scope-block li{ margin-bottom:3px; }
.cm-scope-block p{ margin:0; font-size: 13px; color: var(--ink-dim); }

.cm-total{
  margin-top: 20px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
  background: var(--navy); color: var(--white);
  border-radius: var(--r-lg); padding: 22px 22px;
}
.cm-total .ct-label{ font-family: var(--f-mono); font-size: 11px; letter-spacing:.08em; text-transform:uppercase; color: rgba(255,255,255,.6); }
.cm-total .ct-price{ font-family: var(--f-display); font-size: 28px; font-weight:700; margin-top:4px; color: var(--white); }
.cm-total .ct-duration{ font-size: 13px; color: rgba(255,255,255,.7); }