/* =====================================================
   CODESIGN TOOL — Unified Stylesheet
   ===================================================== */

/* === VARIABLES === */
:root {
  --brand: #3F40A1; --brand-d: #2A2B96; --brand-l: #ECECF7;
  --warm:  #C6681B; --warm-d:  #C05702; --warm-l:  #FBF0E7;
  --s1: #1A7180; --s1-l: #E6EFF1;
  --s2: #C6681B; --s2-l: #F9EEE6;
  --s3: #B11A1A; --s3-l: #F6E6E6;
  --s4: #3F40A1; --s4-l: #EAEAF5;
  --s5: #353351; --s5-l: #E9E8EC;
  --s6: #8D306C; --s6-l: #F5E6F0;
  --ink: #1B1B20; --ink-soft: #4A4A52; --muted: #8A8A94;
  --paper: #FDFDFC; --panel: #F2EFE9; --surface: #fff;
  --hair: rgba(20,20,25,.09);
  --ease: cubic-bezier(0.16,1,0.3,1);
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --dur: 280ms; --dur-fast: 160ms; --dur-mid: 260ms; --dur-slow: 440ms;
  /* spacing tokens (used in home.html) */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px;
  --sp-6:48px; --sp-8:64px; --sp-12:96px; --sp-16:128px;
  /* radius tokens */
  --r-xl:32px; --r-lg:24px; --r-md:18px; --r-sm:12px; --r-pill:999px;
  /* type scale */
  --t-xs:12px; --t-sm:13px; --t-base:15px; --t-18:18px;
  --t-22:22px; --t-36:36px; --t-48:48px; --t-60:60px;
  /* elevation */
  --el-xs:0 2px 8px -4px rgba(20,20,30,.12);
  --el-sm:0 4px 16px -8px rgba(20,20,30,.14);
  --el-md:0 10px 32px -12px rgba(20,20,30,.18);
  --el-lg:0 20px 48px -16px rgba(20,20,30,.22);
}

/* === RESET & BASE === */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
  font-family:"Nunito",system-ui,sans-serif;
  background:var(--paper); color:var(--ink);
  font-size:var(--t-base); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a { text-decoration:none; color:inherit }

/* === NAV === */
.nav {
  position:fixed; top:16px; left:50%; transform:translateX(-50%);
  width:calc(100% - 48px); max-width:1060px; z-index:100;
  display:flex; align-items:center; gap:12px;
  background:rgba(253,253,252,.88); backdrop-filter:blur(14px);
  border:1px solid var(--hair); border-radius:var(--r-pill);
  padding:8px 8px 8px 20px; box-shadow:0 2px 12px rgba(0,0,0,.08);
  transition:box-shadow var(--dur-mid) var(--ease-out);
}
.nav.scrolled { box-shadow:var(--el-md) }
.nav-logo { display:flex; align-items:center; flex:none; text-decoration:none }
.nav .logo-svg { height:28px; width:auto }
.nav-icon { display:block; width:32px; height:32px; flex:none }
.logo-desktop { display:block }
.logo-mobile  { display:none  }
@media(max-width:640px) {
  .logo-desktop { display:none }
  .logo-mobile  { display:block }
}
.nav-links { margin-left:auto; display:flex; gap:2px; position:relative }
.nav-pill {
  position:absolute; top:50%; transform:translateY(-50%);
  height:34px; border-radius:var(--r-pill); background:var(--brand);
  pointer-events:none; z-index:0; opacity:0;
  transition:left .36s cubic-bezier(.34,1.2,.64,1),
             width .36s cubic-bezier(.34,1.2,.64,1), opacity .2s;
}
.nav-links a {
  font-size:12.5px; font-weight:700; color:var(--ink-soft);
  padding:7px 14px; border-radius:var(--r-pill);
  position:relative; z-index:1; transition:color .2s;
}
.nav-links a:hover { background:var(--brand); color:#fff }
.nav-links a.active { color:#fff }
.nav-links a.active:hover { background:transparent }
.nav-burger {
  display:none; flex:none; width:36px; height:36px; margin-left:auto;
  border:none; background:none; cursor:pointer; padding:0;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.nav-burger span { display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s var(--ease),opacity .2s }
.nav.nav-open .nav-burger span:nth-child(1) { transform:translateY(7px) rotate(45deg) }
.nav.nav-open .nav-burger span:nth-child(2) { opacity:0 }
.nav.nav-open .nav-burger span:nth-child(3) { transform:translateY(-7px) rotate(-45deg) }
@media(max-width:640px) {
  .nav-burger { display:flex }
  .nav-links {
    position:absolute; top:calc(100% + 10px); left:0; right:0; margin-left:0;
    flex-direction:column; gap:2px;
    background:var(--surface); border:1px solid var(--hair); border-radius:20px;
    padding:10px; box-shadow:var(--el-md);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),visibility .2s;
  }
  .nav.nav-open .nav-links { opacity:1; visibility:visible; transform:none }
  .nav-pill { display:none }
  .nav-links a { padding:12px 16px; text-align:left; border-radius:12px }
  .nav-links a:hover { background:var(--panel); color:var(--ink) }
  .nav-links a.active { background:var(--brand); color:#fff }
}

/* === SHARED COMPONENTS === */

/* reveal */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .5s var(--ease),transform .5s var(--ease) }
.reveal.visible { opacity:1; transform:none }
.reveal-delay-1 { transition-delay:70ms }
.reveal-delay-2 { transition-delay:140ms }
.reveal-delay-3 { transition-delay:210ms }
.reveal-delay-4 { transition-delay:280ms }

/* sections */
.section { padding:80px 24px }
.section.alt { background:var(--panel) }
.section-inner { max-width:1060px; margin:0 auto }
.section-eyebrow {
  display:inline-block; font-size:var(--t-xs); font-weight:800;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--brand); background:var(--brand-l);
  padding:5px 14px; border-radius:var(--r-pill); margin-bottom:14px;
}
.section-title {
  font-size:clamp(26px,3.5vw,40px); font-weight:800;
  letter-spacing:-.025em; line-height:1.1; margin-bottom:14px;
}
.section-body { font-size:clamp(15px,1.6vw,18px); color:var(--ink-soft); line-height:1.7; font-weight:400 }
.problems-list { padding-left:20px; display:flex; flex-direction:column; gap:14px }
.problems-list li { font-size:clamp(15px,1.6vw,18px); color:var(--ink-soft); line-height:1.7 }
.problems-list li b { color:var(--ink) }
.section-lede { font-size:var(--t-18); color:var(--ink-soft); font-weight:400; line-height:1.55; margin-bottom:var(--sp-8) }
.section-link { display:inline-flex; align-items:center; gap:6px; font-size:var(--t-sm); font-weight:700; color:var(--brand) }
.section-link svg { width:16px; height:16px; transition:transform var(--dur-fast) var(--ease-out) }
.section-link:hover svg { transform:translateX(4px) }

/* page hero */
.page-hero, .page-hero-simple {
  padding:140px 24px 72px; border-bottom:1px solid var(--hair); text-align:center;
}
.hero-inner, .phs-inner { max-width:1060px; margin:0 auto }
.page-eyebrow {
  display:inline-block; font-size:var(--t-xs); font-weight:800;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--s1); background:var(--s1-l);
  padding:5px 14px; border-radius:var(--r-pill); margin-bottom:20px;
}
.page-title {
  font-size:clamp(36px,6vw,64px); font-weight:800;
  letter-spacing:-.035em; line-height:1.03; margin-bottom:16px;
}
.page-lead, .page-hero-desc {
  font-size:clamp(17px,1.9vw,21px); color:var(--ink-soft);
  line-height:1.7; font-weight:400; margin-bottom:28px;
}
/* legal content typography (used inside the terms/privacy modals) */
.legal-content { text-align:left }
.legal-content h3 { font-size:20px; font-weight:800; color:var(--ink); margin:36px 0 12px }
.legal-content h3:first-child { margin-top:0 }
.legal-content p { font-size:15px; color:var(--ink-soft); line-height:1.7; margin-bottom:14px }
.legal-content ul { padding-left:20px; display:flex; flex-direction:column; gap:8px; margin-bottom:14px }
.legal-content li { font-size:15px; color:var(--ink-soft); line-height:1.6 }
.legal-content strong { color:var(--ink) }
.legal-content a { color:var(--brand); font-weight:700; text-decoration:underline }

/* legal modals (terms of use / privacy policy) */
.legal-modal { position:fixed; inset:0; background:rgba(20,20,25,.55); z-index:1000; display:none; align-items:center; justify-content:center; padding:24px }
.legal-modal.open { display:flex }
.legal-modal-box { background:var(--surface); border-radius:20px; max-width:760px; width:100%; max-height:85vh; box-shadow:var(--el-lg); position:relative; display:flex; flex-direction:column }
.legal-modal-close { position:absolute; top:16px; right:16px; background:var(--panel); border:none; width:36px; height:36px; border-radius:50%; font-size:22px; line-height:1; cursor:pointer; color:var(--ink-soft); z-index:2; transition:background .15s,color .15s }
.legal-modal-close:hover { background:var(--brand); color:#fff }
.legal-modal-scroll { overflow-y:auto; padding:40px 32px 32px }
.legal-modal-title { font-size:26px; font-weight:800; margin-bottom:6px }
.legal-modal-meta { font-size:13px; color:var(--muted); margin-bottom:24px }
body.modal-open { overflow:hidden }

.page-subnav-wrap { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap }
.page-subnav-label {
  font-size:var(--t-xs); font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
.page-subnav { display:flex; flex-wrap:wrap; justify-content:center; gap:8px }
.page-subnav a {
  font-size:13px; font-weight:700; color:var(--ink-soft);
  background:var(--surface); border:1px solid var(--hair);
  border-radius:var(--r-pill); padding:7px 16px;
  transition:background .16s,color .16s,border-color .16s;
}
.page-subnav a:hover { background:var(--brand); color:#fff; border-color:var(--brand) }

/* shared btn */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  height:52px; padding:0 28px; border-radius:var(--r-pill);
  font-family:inherit; font-size:var(--t-base); font-weight:700;
  text-decoration:none; cursor:pointer; border:none;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover { transform:translateY(-2px) }
.btn:active { transform:translateY(1px) !important }
.btn .ico { width:18px; height:18px; flex:none }
.btn-primary { background:var(--brand); color:#fff; box-shadow:0 8px 24px -8px rgba(63,64,161,.50) }
.btn-primary:hover { background:var(--brand-d); box-shadow:0 12px 32px -8px rgba(63,64,161,.60) }
.btn-outline { background:transparent; color:rgba(255,255,255,.8); border:1.5px solid rgba(255,255,255,.25) }
.btn-outline:hover { background:rgba(255,255,255,.08); color:#fff }
.btn-secondary { background:var(--surface); color:var(--ink-soft); border:1px solid var(--hair); box-shadow:0 4px 14px rgba(0,0,0,.08) }
.btn-secondary:hover { background:var(--brand); color:#fff; border-color:var(--brand); box-shadow:0 10px 26px -6px rgba(63,64,161,.45) }

/* footer */
.site-footer { background:var(--ink); color:rgba(255,255,255,.6); padding:64px 24px 48px; border-top:1px solid rgba(255,255,255,.08) }
.footer-inner { max-width:1060px; margin:0 auto; display:flex; flex-wrap:wrap; gap:40px }
.footer-brand { flex:1 1 300px; max-width:360px }
.footer-brand + .footer-col { margin-left:auto }
.footer-inner .footer-col { flex:0 0 auto; min-width:140px }
@media(max-width:760px) {
  .footer-inner { gap:32px; flex-wrap:wrap; justify-content:center; text-align:center }
  .footer-brand + .footer-col { margin-left:0 }
  .footer-brand { flex:1 1 100%; max-width:100% }
  .footer-bottom { flex-direction:column; justify-content:center; text-align:center }
  .eu-logos { justify-content:center }
}
.footer-brand .logo-svg { height:48px; filter:brightness(0) invert(1); opacity:.8 }
.footer-brand p { font-size:var(--t-sm); margin-top:14px; line-height:1.6 }
.footer-col h4 { font-size:var(--t-xs); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:14px }
.footer-col a { display:block; font-size:var(--t-sm); color:rgba(255,255,255,.6); margin-bottom:8px; transition:color .15s }
.footer-col a:hover { color:#fff }
.footer-bottom {
  max-width:1060px; margin:40px auto 0; border-top:1px solid rgba(255,255,255,.08); padding-top:20px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-size:var(--t-xs); color:rgba(255,255,255,.3);
}
.eu-logos { display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.eu-badge { font-size:12px; font-weight:700; color:rgba(255,255,255,.4); border:1px solid rgba(255,255,255,.12); border-radius:6px; padding:3px 8px }

/* two-col layout */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); align-items:center }
@media(max-width:760px) {
  .two-col { grid-template-columns:1fr; gap:0 }
  /* flatten the text column so its CTA button can be reordered to the end, after the visual column */
  .two-col > div:first-child { display:contents }
  .two-col > div:first-child > .section-eyebrow { justify-self:start }
  .two-col > div:first-child .btn-secondary { order:3; margin-top:24px !important; justify-self:start }
  #the-tool .two-col > div:first-child > .section-lede,
  #documentation .two-col > div:first-child > .section-lede { margin-bottom:0 !important }
  #steps-home { margin-bottom:0 !important }
  .two-col > div:nth-child(2) { order:2; margin-top:16px }
  #contact-section .section-lede { margin-bottom:24px }
}

/* =====================================================
   HOME PAGE
   ===================================================== */
.hero-logo { height:56px; width:auto; display:block; margin:0 auto var(--sp-3) }
.hero {
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:120px var(--sp-4) 0; text-align:center;
  background:var(--paper); position:relative; overflow:hidden;
}
.hero::before {
  content:""; position:absolute; inset:0; z-index:0;
  background-image:radial-gradient(circle,rgba(63,64,161,.07) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,black 20%,transparent 100%);
}
.hero-copy { position:relative; z-index:1; max-width:680px }
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--s1-l); color:var(--s1);
  font-size:var(--t-xs); font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:7px 16px; border-radius:var(--r-pill); margin-bottom:var(--sp-3);
  animation:fadeUp var(--dur-slow) var(--ease-out) .1s both;
}
.hero h1 {
  font-size:var(--t-60); font-weight:800; letter-spacing:-.02em; line-height:1.05;
  margin-bottom:var(--sp-3); animation:fadeUp var(--dur-slow) var(--ease-out) .18s both;
}
@media(max-width:640px) {
  .hero h1 { font-size:46px }
  .hero .lede { font-size:12px }
}
.hero h1 .accent { color:var(--brand) }
.hero .lede {
  font-size:var(--t-18); color:var(--ink-soft); max-width:50ch;
  margin:0 auto var(--sp-6); font-weight:400; line-height:1.55;
  animation:fadeUp var(--dur-slow) var(--ease-out) .26s both;
}
.hero-actions {
  display:flex; justify-content:center; gap:var(--sp-2); flex-wrap:wrap; align-items:center;
  animation:fadeUp var(--dur-slow) var(--ease-out) .34s both;
}
.btn-ghost { background:var(--paper); color:var(--muted); border:1.5px dashed rgba(20,20,25,.20); cursor:not-allowed; opacity:.75; font-size:var(--t-sm) }
.soon-pill { font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; background:rgba(20,20,25,.08); color:var(--muted); padding:3px 8px; border-radius:var(--r-pill) }
.hero-meta {
  display:flex; justify-content:center; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
  margin-top:var(--sp-3); font-size:var(--t-sm); color:var(--muted); font-weight:600;
  animation:fadeUp var(--dur-slow) var(--ease-out) .42s both;
}
@media(max-width:640px) {
  .hero-meta { display:block; text-align:center; line-height:1.7 }
  .hero-meta .badge { margin-right:6px }
}
.badge { font-weight:800; color:var(--warm-d); background:var(--warm-l); padding:4px 11px; border-radius:var(--r-pill); font-size:var(--t-xs) }
/* deck */
.deck-wrap { position:relative; width:100%; max-width:820px; height:300px; margin:var(--sp-2) auto 0; z-index:1; animation:fadeUp var(--dur-slow) var(--ease-out) .5s both }
.gcard { position:absolute; left:50%; bottom:0 }
.gcard-in { animation:cardIn var(--dur-slow) var(--ease-out) both }
@keyframes cardIn { from{opacity:0;transform:translateY(24px) scale(.95)} to{opacity:1;transform:none} }
.gcard-face {
  width:178px; height:235px; border-radius:var(--r-lg); padding:var(--sp-2) var(--sp-2) 14px;
  color:#fff; cursor:pointer; box-shadow:var(--el-md);
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px;
  transition:transform var(--dur-mid) var(--ease-out),box-shadow var(--dur-mid) var(--ease-out);
}
.c1{transform:translateX(-355px);z-index:1}.c2{transform:translateX(-202px);z-index:2}
.c3{transform:translateX(-89px) translateY(-17px);z-index:4}.c4{transform:translateX(31px);z-index:3}.c5{transform:translateX(185px);z-index:1}
.c1 .gcard-face{transform:rotate(-12deg)}.c2 .gcard-face{transform:rotate(-5deg)}
.c3 .gcard-face{transform:rotate(0deg)}.c4 .gcard-face{transform:rotate(5deg)}.c5 .gcard-face{transform:rotate(12deg)}
.gcard:hover { z-index:20 }
.gcard:hover .gcard-face { transform:rotate(0deg) translateY(-16px) scale(1.04); box-shadow:var(--el-lg) }
.c1 .gcard-in{animation-delay:.52s}.c2 .gcard-in{animation-delay:.60s}.c3 .gcard-in{animation-delay:.68s}
.c4 .gcard-in{animation-delay:.76s}.c5 .gcard-in{animation-delay:.84s}
@media(max-width:640px) {
  /* hero deck becomes a swipeable card stack: the centered card reads full-size, its neighbors peek out behind it, scaled/dimmed by JS as you scroll */
  .deck-wrap {
    display:flex; align-items:center; height:290px;
    width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    padding:10px calc(50% - 95px) 10px; gap:0;
  }
  .deck-wrap::-webkit-scrollbar { display:none }
  .gcard {
    position:relative; left:auto; bottom:auto; flex:none;
    scroll-snap-align:center; margin-left:-55px;
    transition:transform .12s linear, opacity .12s linear;
  }
  .gcard:first-child { margin-left:0 }
  .gcard-face { width:190px; height:250px }
  .c1,.c2,.c3,.c4,.c5 { transform:none }
  .c1 .gcard-face,.c2 .gcard-face,.c3 .gcard-face,.c4 .gcard-face,.c5 .gcard-face { transform:none !important }
}
.card-top { display:flex; align-items:center; justify-content:center; margin:0 auto }
.card-top svg { width:24px; height:24px; stroke:#fff; fill:none; stroke-width:1.6 }
.card-bottom { text-align:center; display:flex; flex-direction:column; align-items:center; gap:4px }
.card-cat { font-size:9px; font-weight:400; letter-spacing:.1em; text-transform:uppercase; opacity:.8; margin-bottom:4px }
.card-kw { font-size:18px; font-weight:700; line-height:1.2; text-transform:uppercase }
.card-kw small { display:block; font-size:13px; font-weight:400; opacity:.8; margin-top:2px; text-transform:none }
/* canvas grid */
.canvas-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-2); padding:var(--sp-3); background:var(--panel); border-radius:var(--r-xl); border:1px solid var(--hair) }
.slot { background:var(--slot,#E6EFF1); border-radius:var(--r-md); aspect-ratio:3/4; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:14px 10px 12px; cursor:pointer; transition:transform var(--dur-mid) var(--ease-out),box-shadow var(--dur-mid) var(--ease-out) }
.slot.filled { color:#fff; box-shadow:var(--el-sm) }
.slot:hover { transform:translateY(-4px); box-shadow:var(--el-md) }
.slot-icon { width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center }
.slot-icon svg { width:20px; height:20px; stroke:#fff; fill:none; stroke-width:1.7 }
.slot-cat { font-size:8.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; opacity:.8; text-align:center }
.slot-title { font-size:12px; font-weight:800; text-align:center; line-height:1.2 }
/* stats */
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin-bottom:var(--sp-6) }
@media(max-width:660px) { .stats-grid { grid-template-columns:1fr } }
.stat-card { background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-lg); padding:var(--sp-4); box-shadow:var(--el-xs) }
.stat-num { font-size:var(--t-60); font-weight:800; letter-spacing:-.025em; color:var(--brand); line-height:1 }
.stat-num .unit { font-size:var(--t-36) }
.stat-label { font-size:var(--t-sm); color:var(--ink-soft); font-weight:400; margin-top:var(--sp-1) }
.stat-source { font-size:var(--t-xs); color:var(--muted); margin-top:var(--sp-2) }
/* steps (home) */
.steps { display:flex; flex-direction:column; gap:var(--sp-3) }
.step { display:flex; gap:var(--sp-3); align-items:flex-start }
.step-n { width:40px; height:40px; border-radius:50%; background:var(--brand); color:#fff; font-weight:800; font-size:var(--t-sm); display:flex; align-items:center; justify-content:center; flex:none; position:relative; z-index:1 }
.step h3 { font-size:19px; font-weight:700; margin-bottom:4px }
.step p { font-size:15px; color:var(--ink-soft); font-weight:400; line-height:1.55 }
/* cite */
.dl-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:var(--sp-6); align-items:center }
@media(max-width:700px) { .dl-grid { grid-template-columns:1fr } }
@keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }

/* =====================================================
   FRAMEWORK PAGE
   ===================================================== */
.page-hero-simple { background:var(--paper) }
.what-grid { display:grid; grid-template-columns:1fr 420px; gap:40px; align-items:start }
@media(max-width:760px) { .what-grid { grid-template-columns:1fr } }
.what-img { flex:none }
.img-placeholder { width:100%; aspect-ratio:4/3; background:var(--panel); border:2px dashed var(--hair); border-radius:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--muted) }
.img-placeholder svg { width:40px; height:40px; opacity:.4 }
.img-placeholder span { font-size:13px; font-weight:600; opacity:.6 }
.format-img-placeholder { width:100%; aspect-ratio:16/9; background:var(--panel); border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--muted); margin-bottom:24px }
.format-img-placeholder svg { width:32px; height:32px; opacity:.4 }
.format-img-placeholder span { font-size:12px; font-weight:600; opacity:.6 }
/* who */
.who-subtitle { font-size:clamp(18px,2.5vw,24px); font-weight:800; letter-spacing:-.015em; margin:48px 0 20px }
.who-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:40px }
@media(max-width:640px) { .who-grid { grid-template-columns:1fr } }
.who-card { background:var(--surface); border:1px solid var(--hair); border-radius:16px; padding:22px; box-shadow:0 2px 8px rgba(0,0,0,.05) }
.who-head { display:flex; align-items:center; gap:12px; margin-bottom:14px }
.who-icon { width:44px; height:44px; border-radius:12px; background:#1A7180; display:flex; align-items:center; justify-content:center; flex:none }
.who-card h4 { font-size:18px; font-weight:800; margin-bottom:0 }
.who-card p { font-size:15px; color:var(--ink-soft); line-height:1.6; font-weight:400 }
/* problems */
/* zigzag */
.stages-intro { font-size:clamp(15px,1.6vw,18px); color:var(--ink-soft); line-height:1.7; font-weight:400; margin-bottom:48px }
.phase-block { border:2px dashed var(--hair); border-radius:28px; padding:36px 32px 28px; position:relative }
.phase-block.phase-1 { border-color:rgba(63,64,161,.25) }
.phase-block.phase-2 { border-color:rgba(141,48,108,.25) }
.phase-label { position:absolute; top:-14px; left:32px; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:3px 14px; border-radius:999px }
.phase-1 .phase-label { background:var(--brand-l); color:var(--brand-d) }
.phase-2 .phase-label { background:#F5E6F0; color:#8D1864 }
.phase-connector { display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 0; color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase }
.phase-connector svg { width:28px; height:28px; stroke:var(--brand); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; animation:bounceDown 1.4s ease-in-out infinite }
@keyframes bounceDown { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }
.zigzag { display:flex; flex-direction:column; gap:0 }
.zz-row { display:grid; grid-template-columns:160px 1fr; align-items:start; gap:0; padding:4px 0 }
@media(max-width:700px) { .zz-row,.zz-row.row-reverse { grid-template-columns:1fr } }
.zz-card-wrap { padding:14px 10px }
.zz-card { border-radius:20px; padding:20px 16px; color:#fff; display:flex; flex-direction:column; justify-content:space-between; align-items:center; text-align:center; min-height:180px; gap:0; box-shadow:0 8px 28px rgba(0,0,0,.18) }
.zc-head { display:flex; flex-direction:column; align-items:center; gap:16px }
.zc-num { font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; opacity:.75 }
.zc-icon { display:flex; align-items:center; justify-content:center }
.zc-icon svg { width:44px; height:44px; stroke:#fff; fill:none; stroke-width:1.8 }
.zc-name { font-size:16px; font-weight:800; line-height:1.2 }
.zc-sub { font-size:11px; opacity:.75; font-weight:400; margin-top:2px }
.zz-connector,.zz-connector-last,.zz-path { display:none }
.zz-text { padding:14px 16px; display:flex; flex-direction:column; gap:10px }
.zz-goal { font-size:17px; font-weight:800; color:var(--ink); line-height:1.4 }
.zz-desc { font-size:15px; color:var(--ink-soft); line-height:1.7; font-weight:600 }
.zz-substages { display:flex; flex-direction:column; gap:8px; margin-top:2px }
.zz-decks { display:flex; flex-direction:column; gap:0; margin-top:4px }
.zz-deck { display:flex; flex-direction:column; gap:8px; padding:12px 14px; background:var(--panel); border-radius:12px }
.zz-deck-label { font-size:14px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; display:flex; align-items:center; gap:6px }
.zz-deck-label::before { content:""; display:inline-block; width:0; height:0; border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:7px solid currentColor; flex:none }
.zz-deck-desc { font-size:15px; font-weight:600; color:var(--ink-soft); line-height:1.55 }
.zz-deck .zz-substages { margin-top:6px }
.zz-substage { display:flex; flex-direction:column; gap:2px; padding:10px 12px; background:var(--panel); border-radius:10px }
.zz-substage-label { font-size:14px; font-weight:900; letter-spacing:.1em; text-transform:uppercase }
.zz-substage-q { font-size:15px; font-weight:600; color:var(--ink-soft); line-height:1.5 }
.zz-row.stage-brief { background:rgba(63,64,161,.04); border-radius:16px; margin:8px -8px; padding:4px 8px }
.zz-row.stage-brief .zz-goal::before { content:"Convergence point / "; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); opacity:.8; display:block; margin-bottom:4px }
/* audience goals */
.ag-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px }
@media(max-width:760px) { .ag-grid { grid-template-columns:1fr } }
.ag-card { border-radius:22px; overflow:hidden; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--hair); box-shadow:0 4px 16px rgba(0,0,0,.08) }
.ag-header { padding:24px 24px 20px; color:#fff; display:flex; flex-direction:column; gap:10px }
.ag-img-placeholder { width:100%; aspect-ratio:16/9; background:rgba(0,0,0,.15); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; flex:none }
.ag-img-placeholder svg { width:32px; height:32px; stroke:rgba(255,255,255,.5) }
.ag-img-placeholder span { font-size:11px; font-weight:600; color:rgba(255,255,255,.55); text-align:center; padding:0 16px }
.ag-card h3 { font-size:19px; font-weight:800; margin:0 }
.ag-body { padding:22px 24px 24px; flex:1; color:var(--ink) }
.ag-card p { font-size:13.5px; color:var(--ink-soft); line-height:1.65; font-weight:400 }
.ag-card ul { margin-top:12px; padding-left:16px; display:flex; flex-direction:column; gap:5px }
.ag-card li { font-size:13px; color:var(--ink-soft); line-height:1.5 }
.ag-card-v2 { border-radius:18px; overflow:hidden; background:var(--surface); border:1px solid var(--hair); box-shadow:0 4px 16px rgba(0,0,0,.06) }
.ag-v2-body { padding:26px 24px 24px }
.ag-v2-head { display:flex; align-items:center; gap:12px; margin-bottom:14px }
.ag-v2-icon { width:44px; height:44px; border-radius:12px; background:#B11A1A; display:flex; align-items:center; justify-content:center; flex:none }
.ag-v2-body h3 { font-size:18px; font-weight:800; color:#A80101; margin-bottom:0 }
.ag-v2-body p { font-size:13.5px; color:var(--ink-soft); line-height:1.65; font-weight:400 }
.ag-v2-body ul { margin-top:12px; padding-left:16px; display:flex; flex-direction:column; gap:5px }
.ag-v2-body li { font-size:13px; color:var(--ink-soft); line-height:1.5 }
.ag-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:24px; padding-top:20px; border-top:1px solid var(--hair) }
.ag-footer-text { font-size:14px; color:var(--ink-soft) }
.ag-link { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:800; color:var(--brand); transition:gap .15s }
.ag-link:hover { gap:10px }
.ag-link svg { width:16px; height:16px }
/* modularity */
.mod-compact-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px }
@media(max-width:760px) { .mod-compact-grid { grid-template-columns:1fr } }
.mod-panel { background:var(--surface); border:1px solid var(--hair); border-radius:20px; padding:24px; box-shadow:0 2px 10px rgba(0,0,0,.05) }
.mod-panel-title { font-size:16px; font-weight:800; color:var(--ink); margin-bottom:6px }
.mod-panel-desc { font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin-bottom:20px }
.mod-panel-note { font-size:12px; color:var(--muted); line-height:1.55; padding-top:12px; border-top:1px solid var(--hair) }
.mod-scenarios { display:grid; grid-template-columns:1fr 1fr; gap:16px }
@media(max-width:600px) { .mod-scenarios { grid-template-columns:1fr } }
.mod-scenario-label { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); background:var(--brand-l); border-radius:999px; padding:4px 10px; display:inline-block; margin-bottom:12px }
.mod-scenario-label-2 { color:#8D1864; background:#F5E6F0 }
.mod-path { display:flex; flex-direction:column; gap:0 }
.mod-path-item { display:flex; align-items:flex-start; gap:10px; position:relative }
.mod-path-dot { width:14px; height:14px; border-radius:50%; flex:none; margin-top:3px; position:relative; z-index:1; transition:opacity .2s,filter .2s }
.mod-dot-ext { width:14px; height:14px; border-radius:50%; background:transparent; border:2px dashed; flex:none; margin-top:3px; position:relative; z-index:1 }
.mod-path-line { position:absolute; left:6px; top:17px; width:2px; height:22px; border-radius:2px; z-index:0 }
.mod-path-name { font-size:12px; font-weight:700; color:var(--ink); padding-bottom:22px; line-height:1.3; transition:opacity .2s }
.mod-path-item.last .mod-path-name { padding-bottom:0 }
.mod-path-item.skipped .mod-path-dot { opacity:.2; filter:grayscale(.8) }
.mod-path-item.skipped .mod-path-name { opacity:.3; text-decoration:line-through; text-decoration-color:var(--muted) }
.mod-path-item.mod-external .mod-path-name-ext { font-size:12px; font-weight:800; color:var(--brand-d) }
.entry-badge { font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; background:var(--brand); color:#fff; padding:2px 6px; border-radius:999px; margin-left:4px; vertical-align:middle }
.compact-layers { display:flex; flex-direction:column; gap:10px }
.cl-stage { display:flex; align-items:center; gap:10px; margin-bottom:4px }
.cl-dot { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:none }
.cl-dot svg { width:18px; height:18px }
.cl-name { font-size:13.5px; font-weight:800 }
.cl-decks { display:flex; flex-direction:column; gap:6px }
.cl-deck { display:flex; align-items:center; justify-content:space-between; font-size:12.5px; font-weight:700; border-radius:9px; padding:8px 12px; gap:8px }
.cl-base{background:rgba(63,64,161,.07);color:var(--brand-d)}.cl-ext{background:#E6EFF1;color:#006172}
.cl-open{background:transparent;border:1px dashed var(--hair);color:var(--muted);font-style:italic;font-weight:600}
.cl-perceive{background:rgba(177,26,26,.08);color:#A80101}.cl-tag-perceive{background:rgba(177,26,26,.15);color:#A80101;font-weight:800}
.cl-deck-title{flex:1;font-weight:700}.cl-source{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#A80101;opacity:.7;flex:1;text-align:center}
.cl-tag{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:999px;white-space:nowrap;flex:none}
.cl-tag-base{background:var(--brand-l);color:var(--brand-d)}.cl-tag-ext{background:#E6EFF1;color:#006172}
.cl-tag-open{background:transparent;border:1px dashed var(--hair);color:var(--muted)}
/* format cards */
.format-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:48px }
@media(max-width:700px) { .format-grid { grid-template-columns:1fr } }
.format-card { background:var(--surface); border:1px solid var(--hair); border-radius:22px; padding:32px; box-shadow:0 4px 16px rgba(0,0,0,.07); transition:transform .2s var(--ease),box-shadow .2s }
.format-card:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(0,0,0,.11) }
.format-card.static:hover { transform:none; box-shadow:0 4px 16px rgba(0,0,0,.07) }
.format-card h3 { font-size:20px; font-weight:800; margin-bottom:8px }
.format-card .format-when { font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:10px }
.format-card p { font-size:14px; color:var(--ink-soft); line-height:1.65; margin-bottom:18px }
.format-card ul { font-size:13.5px; color:var(--ink-soft); padding-left:16px; display:flex; flex-direction:column; gap:5px; margin-bottom:22px }
.format-btn { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:800; border-radius:999px; padding:10px 18px; text-decoration:none; transition:transform .16s var(--ease) }
.format-btn:hover { transform:translateX(3px) }
.format-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.5 }
/* page cta */
.page-cta { background:var(--ink); padding:80px 24px; text-align:center; color:#fff }
.page-cta h2 { font-size:clamp(28px,4vw,44px); font-weight:800; letter-spacing:-.025em; margin-bottom:14px }
.page-cta p { font-size:17px; opacity:.7; max-width:52ch; margin:0 auto 36px; line-height:1.6 }
.cta-row { display:flex; justify-content:center; gap:14px; flex-wrap:wrap }

/* =====================================================
   GET STARTED PAGE
   ===================================================== */
.hero-ctas { display:flex; gap:14px; flex-wrap:wrap; margin-top:32px }
.hero-btn { display:inline-flex; align-items:center; gap:10px; height:54px; padding:0 28px; border-radius:999px; font-family:inherit; font-size:15px; font-weight:800; text-decoration:none; transition:transform .16s var(--ease),box-shadow .16s var(--ease) }
.hero-btn svg { width:18px; height:18px; flex:none }
.hero-btn:hover { transform:translateY(-2px) }
.hero-btn-primary { background:var(--brand); color:#fff; box-shadow:0 8px 24px rgba(63,64,161,.35) }
.hero-btn-primary:hover { box-shadow:0 12px 32px rgba(63,64,161,.45) }
.hero-btn-web { background:var(--s1); color:#fff; box-shadow:0 8px 24px rgba(26,113,128,.3) }
.hero-btn-web:hover { box-shadow:0 12px 32px rgba(26,113,128,.4) }
.sticky-switcher { position:sticky; top:0; z-index:100; background:rgba(253,253,252,.94); backdrop-filter:blur(14px); border-bottom:1px solid var(--hair); padding:14px 24px; display:flex; justify-content:center }
#track-container > .section:first-child { padding-top:24px }
.sw-pills { display:flex; background:var(--panel); border-radius:999px; padding:4px; gap:2px; box-shadow:inset 0 1px 3px rgba(0,0,0,.06) }
.sw-pill { display:flex; align-items:center; gap:8px; padding:10px 24px; border-radius:999px; font-size:14px; font-weight:800; cursor:pointer; color:var(--muted); transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease); border:none; background:transparent; font-family:inherit }
.sw-pill svg { width:16px; height:16px; fill:none; stroke-width:1.9; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round }
.sw-pill.act { box-shadow:0 4px 12px rgba(63,64,161,.28) }
.sw-pill.act.paper { background:var(--s1); color:#fff }
.sw-pill.act.web { background:var(--brand); color:#fff }
/* Sliding pill variant (home toggle) */
.sw-pills-slide { position:relative }
.sw-pills-slide .sw-pill { position:relative; z-index:1; background:transparent !important; box-shadow:none !important; transition:color .25s var(--ease) }
.sw-pills-slide .sw-pill.act { color:#fff }
#home-fmt-pill { position:absolute; top:4px; bottom:4px; border-radius:999px; z-index:0; pointer-events:none }
.section.alt-paper { background:rgba(26,113,128,.1) }
.section.alt-web { background:rgba(63,64,161,.08) }
.section-label { font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:14px }
.section-sub { font-size:15px; color:var(--ink-soft); line-height:1.65; margin-bottom:36px }
.needs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.needs-grid-4 { grid-template-columns:repeat(4,1fr) }
@media(max-width:900px) { .needs-grid-4 { grid-template-columns:repeat(2,1fr) } }
@media(max-width:720px) { .needs-grid { grid-template-columns:repeat(2,1fr) } }
@media(max-width:480px) { .needs-grid,.needs-grid-4 { grid-template-columns:1fr } }
.need-card { background:var(--surface); border:1px solid var(--hair); border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:10px; box-shadow:0 2px 8px rgba(0,0,0,.05) }
.need-head { display:flex; align-items:center; gap:10px }
.need-icon { display:flex; align-items:center; justify-content:center; flex:none }
.need-card h4 { font-size:14px; font-weight:800; line-height:1.3; margin-bottom:0 }
.need-card p { font-size:12.5px; color:var(--ink-soft); line-height:1.55 }
.case-study-card { margin-top:16px; border:2px solid transparent; background:linear-gradient(var(--surface),var(--surface)) padding-box, linear-gradient(90deg,#FF6B6B,#FFD93D,#6BCB77,#4D96FF,#C77DFF) border-box; border-radius:16px; padding:20px 24px; display:flex; gap:16px; align-items:flex-start }
.case-study-card h4 { font-size:14px; font-weight:800; color:var(--ink); margin-bottom:5px }
.case-study-card p { font-size:13.5px; color:var(--ink-soft); line-height:1.6 }
/* steps with connector */
#steps-paper, #steps-web { gap:0; position:relative }
#steps-paper::before { content:""; position:absolute; left:19px; top:20px; bottom:20px; width:2px; border-radius:2px; z-index:0; background:var(--s1) }
#steps-web::before { content:""; position:absolute; left:19px; top:20px; bottom:20px; width:2px; border-radius:2px; z-index:0; background:var(--brand) }
#steps-paper .step-n { background:var(--s1) !important; box-shadow:0 4px 14px rgba(26,113,128,.3) !important }
#steps-web .step-n { background:var(--brand) !important; box-shadow:0 4px 14px rgba(63,64,161,.3) !important }
.step-connected { display:flex; gap:20px; align-items:flex-start; position:relative; padding-bottom:32px }
.step-connected:last-child { padding-bottom:0 }
#steps-paper .step, #steps-web .step { padding-bottom:32px }
#steps-paper .step:last-child, #steps-web .step:last-child { padding-bottom:0 }
#steps-home { gap:0; margin-bottom:var(--sp-6) }
#steps-home .step { padding-bottom:32px; position:relative }
#steps-home .step:last-child { padding-bottom:0 }
#steps-home .step:not(:last-child)::after { content:""; position:absolute; left:19px; top:40px; bottom:-19px; width:2px; background:var(--brand); border-radius:2px; z-index:0 }
.step-left { display:flex; flex-direction:column; align-items:center; flex:none; width:40px }
.step-n-lg { width:40px; height:40px; border-radius:50%; color:#fff; font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; flex:none; background:var(--s1); box-shadow:0 4px 14px rgba(26,113,128,.3); position:relative; z-index:1 }
.step-body { flex:1; padding-top:8px }
.step-body h4 { font-size:16px; font-weight:800; margin-bottom:5px }
.step-body p { font-size:14px; color:var(--ink-soft); line-height:1.6 }
.step-cta { display:inline-flex; align-items:center; gap:8px; margin-top:12px; height:44px; padding:0 20px; border-radius:999px; background:var(--s1); color:#fff; font-size:14px; font-weight:800; text-decoration:none; box-shadow:0 6px 18px rgba(26,113,128,.32); transition:transform .15s var(--ease),box-shadow .15s }
.step-cta:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(26,113,128,.42) }
.step-cta svg { width:16px; height:16px; flex:none }
.step-cta-disabled { background:var(--panel); color:var(--muted); cursor:not-allowed; box-shadow:none; border:1.5px dashed var(--hair) }
.step-cta-disabled:hover { transform:none; box-shadow:none }
.video-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
@media(max-width:720px) { .video-grid { grid-template-columns:1fr 1fr } }
@media(max-width:480px) { .video-grid { grid-template-columns:1fr } }
.video-card { border-radius:16px; overflow:hidden; background:var(--surface); border:1px solid var(--hair); box-shadow:0 2px 10px rgba(0,0,0,.06); cursor:pointer; transition:transform .2s var(--ease),box-shadow .2s }
.video-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.13) }
.video-card-soon { cursor:not-allowed; opacity:.5; filter:grayscale(.6) }
.video-card-soon:hover { transform:none; box-shadow:0 2px 10px rgba(0,0,0,.06) }
.video-thumb { aspect-ratio:16/9; background:#1B1B20; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden }
.video-thumb-preview video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; z-index:0 }
.video-thumb-preview::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.25); z-index:1 }
.video-thumb-inner { display:flex; flex-direction:column; align-items:center; gap:10px; position:relative; z-index:2 }
.play-btn { width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.15); border:2px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center }
.play-btn svg { width:20px; height:20px; fill:#fff; margin-left:3px }
.video-thumb-icon { width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center }
.video-thumb-icon svg { width:22px; height:22px; stroke:rgba(255,255,255,.6); fill:none; stroke-width:1.8 }
.video-thumb-label { font-size:11px; font-weight:700; color:rgba(255,255,255,.5); letter-spacing:.06em; text-transform:uppercase }
.video-meta { padding:14px 16px }
.video-meta-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px }
.video-tag { font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; border-radius:999px; padding:3px 8px; display:inline-block }
.video-duration { font-size:12px; font-weight:700; color:var(--muted); white-space:nowrap }
.video-meta h4 { font-size:16px; font-weight:800; line-height:1.3 }
.qa-soon { background:var(--panel); border:2px dashed var(--hair); border-radius:20px; padding:56px 24px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--muted); text-align:center }
.qa-soon svg { width:38px; height:38px; opacity:.4; stroke:var(--muted) }
.qa-soon strong { font-size:15px; font-weight:800; color:var(--ink-soft) }
.qa-soon span { font-size:13px; opacity:.85; max-width:420px; line-height:1.5 }
.video-modal { position:fixed; inset:0; background:rgba(10,10,14,.88); display:flex; align-items:center; justify-content:center; padding:40px; z-index:1000; opacity:0; pointer-events:none; transition:opacity .2s var(--ease) }
.video-modal.open { opacity:1; pointer-events:auto }
.video-modal-inner { position:relative; width:100%; max-width:960px }
.video-modal-inner video { width:100%; max-height:80vh; border-radius:12px; display:block; background:#000 }
.video-modal-close { position:absolute; top:-44px; right:0; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s }
.video-modal-close:hover { background:rgba(255,255,255,.2) }
.video-modal-close svg { width:18px; height:18px; stroke:#fff; fill:none; stroke-width:2.2 }
/* =====================================================
   DOCUMENTATION PAGE
   ===================================================== */
.carousel { position:relative; border-radius:20px; overflow:hidden; background:var(--panel); border:1px solid var(--hair) }
.carousel-track { display:flex; transition:transform .4s var(--ease) }
.carousel-slide { flex:none; width:100%; aspect-ratio:16/9; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:var(--panel) }
.carousel-slide svg { width:40px; height:40px; stroke:var(--muted); fill:none; stroke-width:1.2; opacity:.4 }
.carousel-slide-label { font-size:12px; font-weight:700; color:var(--muted) }
.carousel-slide-caption { font-size:11px; color:var(--muted); opacity:.7; text-align:center; padding:0 24px }
.carousel-controls { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:var(--surface); border-top:1px solid var(--hair) }
.carousel-btn { width:36px; height:36px; border-radius:50%; border:1px solid var(--hair); background:var(--surface); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s }
.carousel-btn:hover { background:var(--panel) }
.carousel-btn svg { width:16px; height:16px; stroke:var(--ink-soft); fill:none; stroke-width:2.5 }
.carousel-dots { display:flex; gap:6px }
.carousel-dot { width:7px; height:7px; border-radius:50%; background:var(--hair); cursor:pointer; transition:background .2s }
.carousel-dot.act { background:var(--brand) }
.carousel-caption { font-size:12px; color:var(--muted); text-align:center; padding:8px 0 0 }
.workflow-placeholder { width:100%; aspect-ratio:16/9; background:var(--panel); border:2px dashed var(--hair); border-radius:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; margin-top:40px }
.workflow-placeholder svg { width:40px; height:40px; opacity:.3; stroke:var(--muted); fill:none; stroke-width:1.2 }
.workflow-placeholder p { font-size:13px; font-weight:700; color:var(--muted) }
.workflow-placeholder span { font-size:12px; color:var(--muted); opacity:.7 }
.stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:40px }
@media(max-width:640px) { .stats-row { grid-template-columns:1fr } }
.stat-n { font-size:clamp(44px,6vw,72px); font-weight:800; letter-spacing:-.03em; color:var(--brand); line-height:1 }
.stat-n .u { font-size:clamp(28px,4vw,48px) }
.stat-l { font-size:13px; color:var(--ink-soft); margin-top:8px; line-height:1.5 }
.stat-s { font-size:11px; color:var(--muted); margin-top:6px }
.workshops { display:flex; flex-direction:column; gap:10px; margin-top:32px }
.workshop-item { background:var(--surface); border:1px solid var(--hair); border-radius:14px; padding:18px 22px; display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center }
.wi-badge { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; background:var(--brand-l); color:var(--brand-d); border-radius:999px; padding:4px 10px; white-space:nowrap }
.wi-body h4 { font-size:14px; font-weight:800; margin-bottom:2px }
.wi-body p { font-size:13px; color:var(--muted) }
.wi-n { font-size:13px; font-weight:700; color:var(--muted); white-space:nowrap }
.versions { display:flex; flex-direction:column; gap:12px; margin-top:32px }
.version-item { background:var(--surface); border:1px solid var(--hair); border-radius:16px; padding:22px 24px; display:grid; grid-template-columns:80px 1fr; gap:20px; align-items:start }
.v-tag { font-size:18px; font-weight:900; letter-spacing:-.02em; color:var(--brand) }
.v-sub { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-top:2px }
.version-item h4 { font-size:15px; font-weight:800; margin-bottom:5px }
.version-item p { font-size:13.5px; color:var(--ink-soft); line-height:1.6 }
.pub-list { display:flex; flex-direction:column; gap:14px; margin-top:32px }
.pub-item { display:flex; align-items:stretch; gap:24px; background:var(--surface); border:1px solid var(--hair); border-radius:16px; padding:20px 24px; box-shadow:0 2px 8px rgba(0,0,0,.05) }
.pub-main { flex:1; min-width:0 }
.pub-tag { font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; border-radius:999px; padding:3px 10px; display:inline-block; margin-bottom:8px }
.pub-title { font-size:16px; font-weight:800; margin-bottom:6px; line-height:1.35 }
.pub-meta { font-size:13px; color:var(--muted) }
.pub-meta .pub-venue-inline { color:var(--ink-soft); font-style:italic }
.pub-side { display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; flex:none }
.pub-date { font-size:12px; font-weight:700; color:var(--muted); white-space:nowrap }
.pub-links { display:flex; gap:10px; flex:none }
.pub-link { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:800; border-radius:999px; padding:5px 12px; border:1.5px solid var(--hair); color:var(--ink-soft); transition:background .15s,border-color .15s,color .15s }
@media(max-width:640px) {
  .pub-item { flex-direction:column; align-items:stretch }
  .pub-side { flex-direction:row; align-items:center; justify-content:space-between; margin-top:14px }
}
.pub-link:hover { background:var(--brand); border-color:var(--brand); color:#fff }
.pub-link svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.2 }
.zenodo-cta { display:flex; align-items:center; gap:18px; background:var(--brand-l); border:1px solid rgba(63,64,161,.18); border-radius:16px; padding:20px 24px; margin-top:32px; text-decoration:none; transition:transform .2s var(--ease),box-shadow .2s,border-color .2s; box-shadow:0 2px 8px rgba(63,64,161,.08) }
.zenodo-cta:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(63,64,161,.18); border-color:var(--brand) }
.zenodo-cta-logo { flex:none; display:flex; align-items:center; padding-right:18px; border-right:1px solid rgba(63,64,161,.18) }
.zenodo-cta-logo img { height:24px; width:auto; display:block }
.zenodo-cta-body { flex:1 }
.zenodo-cta-label { font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-d); margin-bottom:4px }
.zenodo-cta-title { font-size:17px; font-weight:800; color:var(--ink) }
.zenodo-cta-desc { font-size:13px; color:var(--ink-soft); margin-top:2px }
.zenodo-cta-arrow { width:32px; height:32px; display:flex; align-items:center; justify-content:center; flex:none }
.zenodo-cta-arrow svg { width:18px; height:18px; stroke:var(--brand-d); fill:none; stroke-width:2; transition:transform .15s var(--ease) }
.zenodo-cta:hover .zenodo-cta-arrow svg { transform:translate(2px,-2px) }
.photo-carousel { border-radius:20px; overflow:hidden; background:var(--surface); border:1px solid var(--hair); box-shadow:0 4px 16px rgba(0,0,0,.07) }
.pc-main { position:relative }
.pc-slide { display:none }
.pc-slide.active { display:block }
.pc-img-ph { width:100%; aspect-ratio:16/9; background:var(--panel); display:flex; align-items:center; justify-content:center }
.pc-img-ph svg { width:48px; height:48px; opacity:.25; stroke:var(--muted) }
.pc-caption { padding:14px 20px; font-size:13px; color:var(--ink-soft); font-style:italic; background:var(--surface); border-top:1px solid var(--hair) }
.pc-thumbs { display:flex; gap:10px; padding:14px 20px; border-top:1px solid var(--hair) }
.pc-thumb { width:96px; cursor:pointer; padding:4px; border-radius:8px; transition:background .15s }
.pc-thumb:hover { background:var(--panel) }
.pc-thumb.active { background:var(--brand-l) }
.pc-thumb-img { width:100%; aspect-ratio:4/3; background:var(--panel); border-radius:6px; display:flex; align-items:center; justify-content:center }
.pc-thumb.active .pc-thumb-img { background:var(--brand-l) }
.pc-thumb-img img { filter:grayscale(60%); opacity:.5; transition:filter .15s, opacity .15s }
.pc-thumb:hover .pc-thumb-img img { filter:grayscale(0%); opacity:.8 }
.pc-thumb.active .pc-thumb-img img { filter:grayscale(0%); opacity:1 }
.pc-thumb-img svg { width:18px; height:18px; opacity:.3; stroke:var(--muted) }
.pc-nav { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:rgba(20,20,25,.45); color:#fff; border:none; font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:3; transition:background .15s }
.pc-nav:hover { background:rgba(20,20,25,.7) }
.pc-nav.pc-prev { left:16px }
.pc-nav.pc-next { right:16px }
.pc-lightbox { position:fixed; inset:0; background:rgba(10,10,12,.94); z-index:9999; display:none; align-items:center; justify-content:center; padding:40px }
.pc-lightbox.active { display:flex }
.pc-lightbox img { max-width:90vw; max-height:82vh; object-fit:contain; border-radius:8px }
.pc-lightbox-caption { position:absolute; bottom:32px; left:50%; transform:translateX(-50%); color:#fff; font-size:14px; font-style:italic; text-align:center; max-width:80vw }
.pc-lightbox-close { position:absolute; top:24px; right:28px; background:none; border:none; color:#fff; font-size:34px; line-height:1; cursor:pointer; opacity:.85 }
.pc-lightbox-close:hover { opacity:1 }
.pc-lightbox-nav { position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.12); border:none; color:#fff; font-size:24px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s }
.pc-lightbox-nav:hover { background:rgba(255,255,255,.25) }
.pc-lightbox-prev { left:24px }
.pc-lightbox-next { right:24px }
.story-block { display:grid; grid-template-columns:1fr 380px; gap:40px; align-items:start; padding-bottom:56px; border-bottom:1px solid var(--hair); margin-bottom:56px }
.story-block:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0 }
@media(max-width:760px) { .story-block { grid-template-columns:1fr } }
.img-ph { width:100%; aspect-ratio:4/3; background:var(--panel); border:2px dashed var(--hair); border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--muted) }
.img-ph svg { width:36px; height:36px; opacity:.35; stroke:var(--muted) }
.img-ph span { font-size:11.5px; font-weight:600; opacity:.6; text-align:center; padding:0 16px; line-height:1.5 }
.story-link { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:800; color:var(--brand); text-decoration:none; margin-top:16px; transition:gap .15s var(--ease) }
.story-link:hover { gap:10px }
.story-link svg { width:15px; height:15px; stroke:var(--brand); fill:none; stroke-width:2.5 }

/* =====================================================
   CONTACT PAGE
   ===================================================== */
.contact-layout { display:grid; grid-template-columns:1fr 400px; gap:48px; align-items:start }
@media(max-width:860px) { .contact-layout { grid-template-columns:1fr } }
.contact-form { display:flex; flex-direction:column; gap:20px }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px }
@media(max-width:540px) { .form-row { grid-template-columns:1fr } }
.form-group { display:flex; flex-direction:column; gap:6px }
.form-label { font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted) }
.form-required { color:var(--brand); margin-left:2px }
.form-input,.form-select,.form-textarea { width:100%; background:var(--surface); border:1.5px solid var(--hair); border-radius:12px; padding:13px 16px; font-family:inherit; font-size:14px; color:var(--ink); transition:border-color .15s,box-shadow .15s; outline:none }
.form-input:focus,.form-select:focus,.form-textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(63,64,161,.1) }
.form-input::placeholder,.form-textarea::placeholder { color:var(--muted) }
.form-select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8A94' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; cursor:pointer }
.form-select option { color:var(--ink) }
.form-textarea { resize:vertical; min-height:120px; line-height:1.6 }
.form-submit { display:inline-flex; align-items:center; gap:8px; background:var(--brand); color:#fff; font-family:inherit; font-size:15px; font-weight:800; padding:14px 28px; border-radius:999px; border:none; cursor:pointer; box-shadow:0 8px 24px rgba(63,64,161,.3); transition:transform .15s var(--ease),box-shadow .15s; align-self:flex-start }
.form-submit:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(63,64,161,.4) }
.form-submit svg { width:16px; height:16px; stroke:#fff; fill:none; stroke-width:2.5 }
.form-note { font-size:12px; color:var(--muted); margin-top:-8px }
.enquiry-list { display:flex; flex-direction:column; gap:12px; position:sticky; top:100px }
.enquiry-item { background:var(--surface); border:1px solid var(--hair); border-radius:16px; padding:20px 22px }
.enquiry-item.active { border-color:var(--brand); background:var(--brand-l) }
.enq-header { display:flex; align-items:center; gap:12px; margin-bottom:8px }
.enq-icon { width:52px; height:52px; border-radius:var(--r-lg); display:flex; align-items:center; justify-content:center; flex:none }
.enq-title { font-size:16px; font-weight:800 }
.enq-desc { font-size:13px; color:var(--ink-soft); line-height:1.6 }
.enq-other { background:var(--panel); border:1px dashed var(--hair); border-radius:16px; padding:16px 20px; font-size:13px; color:var(--muted); font-style:italic }
.contact-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-2) }
@media(max-width:640px) { .contact-cards { grid-template-columns:1fr } }
.contact-card { display:flex; align-items:center; gap:var(--sp-3); background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-lg); padding:var(--sp-3) var(--sp-4); color:var(--ink); text-decoration:none; box-shadow:0 2px 8px rgba(0,0,0,.05); transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast),border-color var(--dur-fast) }
.contact-card:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.1); border-color:var(--brand) }
.cc-icon { width:52px; height:52px; border-radius:var(--r-lg); display:flex; align-items:center; justify-content:center; flex:none }
.cc-icon-mask { width:28px; height:28px; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center }
.cc-body { flex:1; display:flex; flex-direction:column; gap:2px }
.cc-body b { font-size:var(--t-base); font-weight:800; line-height:1.2; color:var(--ink) }
.cc-body span { font-size:var(--t-sm); color:var(--ink-soft); font-weight:400 }
.cc-arrow { width:18px; height:18px; flex:none; color:var(--muted); transition:transform var(--dur-fast) var(--ease-out),color var(--dur-fast) }
.contact-card:hover .cc-arrow { transform:translateX(4px); color:var(--brand) }
/* credits */
.credits-intro { font-size:15px; color:var(--ink-soft); line-height:1.75; margin-bottom:48px; max-width:72ch }
.credits-team-label { font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:16px }
.credits-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:48px }
@media(max-width:760px) { .credits-grid { grid-template-columns:repeat(2,1fr) } }
@media(max-width:480px) { .credits-grid { grid-template-columns:1fr } }
.credit-card { background:var(--surface); border:1px solid var(--hair); border-radius:16px; padding:18px; display:flex; flex-direction:column }
.credit-header { display:flex; align-items:center; gap:12px; margin-bottom:12px }
.credit-photo { width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none }
.credit-photo svg { width:22px; height:22px }
.credit-body { display:flex; flex-direction:column; gap:4px; flex:1 }
.credit-name { font-size:20px; font-weight:800; line-height:1.2 }
.credit-role { font-size:12.5px; color:var(--ink-soft); line-height:1.4 }
.credit-inst { font-size:11.5px; color:var(--muted); font-weight:700; margin-top:3px }
.credit-tags { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px }
.credit-tag { font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; background:var(--panel); color:var(--ink-soft); border-radius:999px; padding:3px 8px }
.credit-links { display:flex; gap:8px; flex-wrap:wrap; margin-top:auto }
.credit-link { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; color:var(--ink-soft); border:1px solid var(--hair); border-radius:999px; padding:4px 10px; text-decoration:none; transition:border-color .15s,color .15s }
.credit-link:hover { border-color:var(--brand); color:var(--brand) }
.credit-link svg { width:12px; height:12px }
.credits-leads { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:48px }
@media(max-width:480px) { .credits-leads { grid-template-columns:1fr } }
.credit-lead { background:var(--surface); border:1px solid var(--hair); border-radius:16px; padding:22px; display:flex; align-items:center; gap:16px }
.credit-lead-photo { width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none }
.credit-lead-photo svg { width:22px; height:22px }
.credit-lead h4 { font-size:15px; font-weight:800; margin-bottom:3px }
.credit-lead p { font-size:13px; color:var(--ink-soft) }
.credits-thanks { display:flex; flex-direction:column; gap:16px; padding-top:40px; border-top:1px solid var(--hair) }
.thanks-block { font-size:14px; color:var(--ink-soft); line-height:1.7 }
.thanks-block strong { color:var(--ink); font-weight:800 }

/* =====================================================
   404 PAGE
   ===================================================== */
body.page-404 {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:24px; text-align:center;
  min-height:100vh;
}
.n { font-size:120px; font-weight:900; letter-spacing:-.05em; color:var(--brand-l); line-height:1 }
body.page-404 h1 { font-size:32px; font-weight:800; letter-spacing:-.02em; margin:8px 0 14px }
body.page-404 p { font-size:16px; color:var(--ink-soft); max-width:40ch; line-height:1.65; margin-bottom:32px }
body.page-404 a { display:inline-flex; align-items:center; gap:8px; background:var(--brand); color:#fff; font-size:14px; font-weight:800; padding:12px 24px; border-radius:999px; text-decoration:none }

/* =====================================================
   ACCESSIBILITY
   ===================================================== */
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important }
  .reveal { opacity:1 !important; transform:none !important }
  .gcard-in { animation:none !important }
}