:root{
    --bg:#0a0a0a;
    --panel:#111;
    --ink:#fafafa;
    --mute:#8a8a8a;
    --line:rgba(255,255,255,0.08);
    --accent:#fafafa;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:var(--bg);color:var(--ink);font-family:'Geist',sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh}
  body{
    background:
      radial-gradient(ellipse 800px 600px at 20% 0%, rgba(255,255,255,0.03), transparent 60%),
      radial-gradient(ellipse 600px 400px at 80% 100%, rgba(255,255,255,0.02), transparent 60%),
      var(--bg);
    padding:80px 40px;
  }

  .wrap{max-width:1100px;margin:0 auto}
  header{margin-bottom:80px;border-bottom:1px solid var(--line);padding-bottom:40px}
  header .eyebrow{
    font-family:'Geist Mono',monospace;
    font-size:11px;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--mute);
    margin-bottom:16px;
  }
  header h1{
    font-family:'Instrument Serif',serif;
    font-weight:400;
    font-size:clamp(40px,6vw,72px);
    line-height:1;
    letter-spacing:-0.02em;
  }
  header h1 em{font-style:italic;color:var(--mute)}
  header p{margin-top:20px;color:var(--mute);max-width:520px;line-height:1.6;font-size:15px}

  .grid{display:grid;gap:24px}
  .row{
    background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.005));
    border:1px solid var(--line);
    border-radius:24px;
    padding:48px 40px;
    display:grid;
    grid-template-columns:200px 1fr;
    gap:48px;
    align-items:center;
  }
  @media (max-width:720px){
    .row{grid-template-columns:1fr;gap:24px;padding:32px 24px}
    body{padding:48px 20px}
  }
  .label{
    display:flex;flex-direction:column;gap:8px;
  }
  .label .tier{
    font-family:'Geist Mono',monospace;
    font-size:10px;
    letter-spacing:0.18em;
    color:var(--mute);
    text-transform:uppercase;
  }
  .label .name{
    font-family:'Instrument Serif',serif;
    font-size:28px;
    line-height:1;
    letter-spacing:-0.01em;
  }
  .label .name em{font-style:italic;color:var(--mute)}
  .label .desc{
    color:var(--mute);
    font-size:13px;
    line-height:1.5;
    margin-top:8px;
  }
  .stage{
    display:flex;align-items:center;justify-content:center;
    min-height:140px;
  }


  :root {
    --bg: #0a0a0a;
    --panel: #111;
    --ink: #fafafa;
    --mute: #8a8a8a;
    --line: rgba(255, 255, 255, 0.08);
    --accent: #fafafa;
  }
  
  /* conteneur — définit la zone stricte où la grille peut apparaître */
  .cta-wrap {
    margin: 15px;
    padding: 12px;
    position: relative;
    display: inline-flex;
    overflow: hidden;
  }
  .faq-cta-wrap{
    margin-top: 32px;
    margin-bottom: 0;
    margin-left: 20%;
  }
  
  /* grille de fond, confinée exactement aux limites du CTA */
  .cta-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 14px 14px;
    pointer-events: none;
    opacity: 0.6;
  }
  
  /* ===== CTA — deux blocs distincts et adjacents, même hauteur ===== */
  .cta {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: stretch;
    /* gap: 18px; */
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--ink);
    text-decoration: none;
    height: 52px;
  }
  
  /* case flèche — cadre carré indépendant, SANS marqueurs de coin */
  .cta-arrow-box {
    position: relative;
    width: 52px;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    background: var(--panel);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color 0.35s ease, background 0.35s ease;
  }
  
  .cta:hover .cta-arrow-box,
  .cta:focus-visible .cta-arrow-box {
    border-color: var(--accent);
    background: var(--panel);
  }
  
  .cta-arrow-box svg {
    width: 14px;
    height: 14px;
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  
  .cta-arrow-box svg path {
    stroke: var(--ink);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }
  
  .cta:hover .cta-arrow-box svg,
  .cta:focus-visible .cta-arrow-box svg {
    transform: translate(3px, -3px);
  }
  
  /* bloc texte — cadre séparé, coins marqués, même hauteur que la case flèche */
  .cta-text-box {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 26px;
    border: 1px solid var(--line);
    background: var(--panel);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color 0.35s ease, background 0.35s ease;
  }
  
  .cta:hover .cta-text-box,
  .cta:focus-visible .cta-text-box {
    border-color: var(--accent);
    background: var(--panel);
  }
  
  .corner {
    position: absolute;
    width: 7px;
    height: 7px;
    border: 1px solid var(--mute);
    background: var(--bg);
    transition: border-color 0.35s ease, background 0.35s ease;
    z-index: 2;
  }
  
  .cta:hover .corner,
  .cta:focus-visible .corner {
    border-color: var(--accent);
    background: var(--accent);
  }
  
  .corner.tl { top: -4px; left: -4px; }
  .corner.tr { top: -4px; right: -4px; }
  .corner.bl { bottom: -4px; left: -4px; }
  .corner.br { bottom: -4px; right: -4px; }
  
  .cta-text {
    position: relative;
    font-size: 15px;
    font-style: italic;
    font-family: 'Instrument Serif', serif;
    font-weight: 400;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  
  .cta:focus-visible {
    outline: none;
  }
  
  @media (prefers-reduced-motion: reduce) {
    .cta-arrow-box svg,
    .cta-text-box,
    .corner {
      transition: none;
    }
  }
  /* ════════════════════════════════════════════════
     V1 — BASIC: simple hover swap
  ════════════════════════════════════════════════ */
  .btn-v1{
    --h:56px;
    height:var(--h);
    padding-left:24px;
    padding-right:6px;
    background:#1a1a1a;
    color:#fafafa;
    border:none;
    border-radius:calc(var(--h)/2);
    display:inline-flex;
    align-items:center;
    gap:14px;
    font-family:'Geist',sans-serif;
    font-size:15px;
    font-weight:400;
    cursor:pointer;
    transition:background 0.2s ease;
  }
  .btn-v1:hover{background:#252525}
  .btn-v1 .icon{
    width:calc(var(--h) - 12px);
    height:calc(var(--h) - 12px);
    border-radius:50%;
    background:#fafafa;
    color:#0a0a0a;
    display:flex;align-items:center;justify-content:center;
    transition:transform 0.25s ease;
  }
  .btn-v1:hover .icon{transform:rotate(45deg)}

  /* ════════════════════════════════════════════════
     V2 — REFINED: icon glide + arrow rotation
  ════════════════════════════════════════════════ */
  .btn-v2{
    --h:56px;
    position:relative;
    height:var(--h);
    padding:0 calc(var(--h) + 12px) 0 26px;
    background:#161616;
    color:#fafafa;
    border:1px solid rgba(255,255,255,0.06);
    border-radius:calc(var(--h)/2);
    font-family:'Geist',sans-serif;
    font-size:15px;
    font-weight:400;
    letter-spacing:0.01em;
    cursor:pointer;
    overflow:hidden;
    transition:padding 0.4s cubic-bezier(0.65,0,0.35,1), background 0.3s ease;
  }
  .btn-v2:hover{padding-right:calc(var(--h) + 22px);background:#1c1c1c}
  .btn-v2 .icon{
    position:absolute;
    top:6px;right:6px;
    width:calc(var(--h) - 12px);
    height:calc(var(--h) - 12px);
    border-radius:50%;
    background:#fafafa;
    color:#0a0a0a;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
  }
  .btn-v2 .icon svg{
    transition:transform 0.45s cubic-bezier(0.65,0,0.35,1);
  }
  .btn-v2:hover .icon svg{transform:translate(120%,-120%)}
  .btn-v2 .icon::after{
    content:"";
    position:absolute;inset:0;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17 17 7M7 7h10v10'/></svg>") center/40% no-repeat;
    transform:translate(-120%,120%);
    transition:transform 0.45s cubic-bezier(0.65,0,0.35,1);
  }
  .btn-v2:hover .icon::after{transform:translate(0,0)}

  /* ════════════════════════════════════════════════
     V3 — PRO: liquid fill from icon + text shift
  ════════════════════════════════════════════════ */
  .btn-v3{
    --h:56px;
    position:relative;
    height:var(--h);
    padding:0 calc(var(--h) + 8px) 0 28px;
    background:#0f0f0f;
    color:#fafafa;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:calc(var(--h)/2);
    font-family:'Geist',sans-serif;
    font-size:15px;
    font-weight:400;
    cursor:pointer;
    overflow:hidden;
    isolation:isolate;
  }
  .btn-v3 .label-text{
    position:relative;z-index:2;
    display:inline-block;
    transition:transform 0.5s cubic-bezier(0.7,0,0.2,1), color 0.3s ease;
  }
  .btn-v3:hover .label-text{transform:translateX(-4px);color:#0a0a0a}
  .btn-v3 .icon{
    position:absolute;
    top:6px;right:6px;
    width:calc(var(--h) - 12px);
    height:calc(var(--h) - 12px);
    border-radius:50%;
    background:#fafafa;
    color:#0a0a0a;
    display:flex;align-items:center;justify-content:center;
    z-index:2;
    transition:transform 0.5s cubic-bezier(0.7,0,0.2,1);
  }
  .btn-v3:hover .icon{transform:scale(1.08)}
  .btn-v3 .icon svg{transition:transform 0.4s cubic-bezier(0.7,0,0.2,1)}
  .btn-v3:hover .icon svg{transform:rotate(45deg)}
  .btn-v3::before{
    content:"";
    position:absolute;
    top:6px;right:6px;
    width:calc(var(--h) - 12px);
    height:calc(var(--h) - 12px);
    background:#fafafa;
    border-radius:50%;
    transform:scale(1);
    transform-origin:center;
    transition:transform 0.6s cubic-bezier(0.7,0,0.2,1);
    z-index:1;
  }
  .btn-v3:hover::before{transform:scale(20)}

  /* ════════════════════════════════════════════════
     V4 — PREMIUM: dual-track text reveal + gradient halo
  ════════════════════════════════════════════════ */
  .btn-v4{
    --h:58px;
    position:relative;
    height:var(--h);
    padding:0 calc(var(--h) + 10px) 0 28px;
    background:linear-gradient(180deg,#1a1a1a,#0f0f0f);
    color:#fafafa;
    border:1px solid rgba(255,255,255,0.1);
    border-radius:calc(var(--h)/2);
    font-family:'Geist',sans-serif;
    font-size:15px;
    font-weight:400;
    letter-spacing:0.005em;
    cursor:pointer;
    overflow:hidden;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.06) inset,
      0 -1px 0 rgba(0,0,0,0.4) inset,
      0 8px 24px rgba(0,0,0,0.4);
  }
  .btn-v4::after{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:inherit;
    background:conic-gradient(from 0deg,transparent 0deg,rgba(255,255,255,0.4) 60deg,transparent 120deg,transparent 360deg);
    opacity:0;
    transition:opacity 0.4s ease;
    z-index:-1;
    animation:spin 4s linear infinite paused;
  }
  .btn-v4:hover::after{opacity:1;animation-play-state:running}
  @keyframes spin{to{transform:rotate(360deg)}}
  .btn-v4 .text-track{
    display:inline-flex;
    flex-direction:column;
    height:1.2em;
    overflow:hidden;
    line-height:1.2;
  }
  .btn-v4 .text-track span{
    display:block;
    transition:transform 0.5s cubic-bezier(0.65,0,0.35,1);
  }
  .btn-v4:hover .text-track span{transform:translateY(-100%)}
  .btn-v4 .icon{
    position:absolute;
    top:5px;right:5px;
    width:calc(var(--h) - 10px);
    height:calc(var(--h) - 10px);
    border-radius:50%;
    background:radial-gradient(circle at 30% 30%,#ffffff,#e5e5e5);
    color:#0a0a0a;
    display:flex;align-items:center;justify-content:center;
    box-shadow:
      0 0 0 1px rgba(0,0,0,0.1) inset,
      0 4px 12px rgba(0,0,0,0.3);
    overflow:hidden;
  }
  .btn-v4 .icon svg{
    position:absolute;
    transition:transform 0.5s cubic-bezier(0.65,0,0.35,1);
  }
  .btn-v4 .icon svg:nth-child(1){transform:translate(0,0)}
  .btn-v4 .icon svg:nth-child(2){transform:translate(-130%,130%)}
  .btn-v4:hover .icon svg:nth-child(1){transform:translate(130%,-130%)}
  .btn-v4:hover .icon svg:nth-child(2){transform:translate(0,0)}

  /* ════════════════════════════════════════════════
     V5 — ULTRA PREMIUM: magnetic cursor + shimmer + morphing
  ════════════════════════════════════════════════ */
  .btn-v5-stage{
    position:relative;
    width:280px;height:120px;
    display:flex;align-items:center;justify-content:center;
  }
  .btn-v5{
    --h:62px;
    position:relative;
    height:var(--h);
    padding:0 calc(var(--h) + 14px) 0 32px;
    background:#0d0d0d;
    color:#fafafa;
    border:none;
    border-radius:calc(var(--h)/2);
    font-family:'Geist',sans-serif;
    font-size:15px;
    font-weight:400;
    letter-spacing:0.01em;
    cursor:pointer;
    overflow:visible;
    transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
    will-change:transform;
  }
  .btn-v5::before{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:inherit;
    background:linear-gradient(135deg,
      rgba(255,255,255,0.2) 0%,
      rgba(255,255,255,0.05) 30%,
      rgba(255,255,255,0) 50%,
      rgba(255,255,255,0.05) 70%,
      rgba(255,255,255,0.2) 100%);
    padding:1px;
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    z-index:0;
  }
  .btn-v5 .inner{
    position:relative;
    display:inline-flex;
    align-items:center;
    height:100%;
    z-index:2;
  }
  .btn-v5 .shimmer{
    position:absolute;
    inset:0;
    border-radius:inherit;
    overflow:hidden;
    z-index:1;
    pointer-events:none;
  }
  .btn-v5 .shimmer::before{
    content:"";
    position:absolute;
    top:0;left:-100%;
    width:60%;height:100%;
    background:linear-gradient(110deg,
      transparent 30%,
      rgba(255,255,255,0.08) 50%,
      transparent 70%);
    transition:left 0.8s cubic-bezier(0.65,0,0.35,1);
  }
  .btn-v5:hover .shimmer::before{left:120%}
  .btn-v5 .text-stack{
    display:inline-flex;
    flex-direction:column;
    height:1.2em;
    overflow:hidden;
    line-height:1.2;
    position:relative;
  }
  .btn-v5 .text-stack span{
    display:block;
    transition:transform 0.55s cubic-bezier(0.7,0,0.2,1);
  }
  .btn-v5:hover .text-stack span{transform:translateY(-100%)}
  .btn-v5 .text-stack span:last-child{
    font-style:italic;
    font-family:'Instrument Serif',serif;
    font-size:17px;
  }
  .btn-v5 .icon{
    position:absolute;
    top:5px;right:5px;
    width:calc(var(--h) - 10px);
    height:calc(var(--h) - 10px);
    border-radius:50%;
    background:#fafafa;
    color:#0a0a0a;
    display:flex;align-items:center;justify-content:center;
    z-index:2;
    overflow:hidden;
    transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
    box-shadow:
      0 0 0 1px rgba(0,0,0,0.08) inset,
      0 6px 20px rgba(255,255,255,0.15),
      0 2px 8px rgba(0,0,0,0.4);
  }
  .btn-v5:hover .icon{
    transform:scale(1.06) rotate(-3deg);
  }
  .btn-v5 .icon::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 30% 25%,
      rgba(255,255,255,0.8),
      rgba(220,220,220,0.4) 40%,
      rgba(180,180,180,0.2) 100%);
    border-radius:50%;
  }
  .btn-v5 .icon svg{
    position:absolute;
    transition:transform 0.55s cubic-bezier(0.7,0,0.2,1);
    z-index:1;
  }
  .btn-v5 .icon svg:nth-child(2){transform:translate(0,0)}
  .btn-v5 .icon svg:nth-child(3){transform:translate(-140%,140%)}
  .btn-v5:hover .icon svg:nth-child(2){transform:translate(140%,-140%)}
  .btn-v5:hover .icon svg:nth-child(3){transform:translate(0,0)}

  /* glow halo */
  .btn-v5-stage::before{
    content:"";
    position:absolute;
    inset:50% 30% auto auto;
    width:80px;height:80px;
    transform:translate(50%,-50%);
    background:radial-gradient(circle,rgba(255,255,255,0.15),transparent 70%);
    border-radius:50%;
    filter:blur(20px);
    opacity:0;
    transition:opacity 0.5s ease;
    pointer-events:none;
  }
  .btn-v5-stage:hover::before{opacity:1}

  footer{
    margin-top:80px;
    padding-top:40px;
    border-top:1px solid var(--line);
    color:var(--mute);
    font-size:12px;
    font-family:'Geist Mono',monospace;
    letter-spacing:0.05em;
    text-align:center;
  }

  /* ════════════════════════════════════════════════
     SECTIONS — 7 varied layouts
  ════════════════════════════════════════════════ */
  body.sections-page{
    padding:0;
    scroll-behavior:smooth;
  }
  body.sections-page.nav-lock{overflow:hidden}
  .sections-page .sec{
    scroll-margin-top:88px;
  }

  /* ════════════════════════════════════════════════
     NAV — Premium creative menu
  ════════════════════════════════════════════════ */
  .site-nav{
    --nav-h:72px;
    position:fixed;
    inset:0 0 auto;
    z-index:1000;
    height:var(--nav-h);
    pointer-events:none;
  }
  .nav-bar{
    position:relative;
    z-index:1002;
    height:var(--nav-h);
    max-width:1180px;
    margin:0 auto;
    padding:0 40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    pointer-events:auto;
    transition:padding 0.5s cubic-bezier(0.65,0,0.35,1);
  }
  @media (max-width:720px){
    .nav-bar{padding:0 20px}
    .site-nav{--nav-h:64px}
    .sections-page .sec{scroll-margin-top:76px}
  }

  .site-nav::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(10,10,10,0.55);
    backdrop-filter:blur(0px);
    -webkit-backdrop-filter:blur(0px);
    border-bottom:1px solid transparent;
    transition:
      background 0.5s ease,
      backdrop-filter 0.5s ease,
      border-color 0.5s ease;
    pointer-events:none;
  }
  .site-nav.nav-scrolled::before{
    background:rgba(10,10,10,0.82);
    backdrop-filter:blur(20px) saturate(1.4);
    -webkit-backdrop-filter:blur(20px) saturate(1.4);
    border-bottom-color:var(--line);
  }
  .site-nav.nav-open::before{
    background:rgba(10,10,10,0.94);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    border-bottom-color:var(--line);
  }

  .nav-logo{
    font-family:'Instrument Serif',serif;
    font-size:22px;
    letter-spacing:-0.02em;
    color:var(--ink);
    text-decoration:none;
    position:relative;
    z-index:1;
    transition:opacity 0.3s ease;
  }
  .nav-logo-dot{color:var(--mute);font-style:italic}
  .nav-logo:hover{opacity:0.75}

  /* Desktop links */
  .nav-desktop{
    list-style:none;
    display:flex;
    align-items:center;
    gap:8px;
    margin-left:auto;
  }
  @media (max-width:900px){
    .nav-desktop{display:none}
  }
  .nav-link{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    font-family:'Geist',sans-serif;
    font-size:13px;
    font-weight:400;
    letter-spacing:0.02em;
    color:var(--mute);
    text-decoration:none;
    border-radius:100px;
    overflow:hidden;
    transition:color 0.35s ease;
  }
  .nav-link::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(255,255,255,0.06);
    border-radius:inherit;
    transform:scale(0.85);
    opacity:0;
    transition:transform 0.45s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease;
  }
  .nav-link::after{
    content:"";
    position:absolute;
    bottom:8px;left:16px;right:16px;
    height:1px;
    background:var(--ink);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 0.45s cubic-bezier(0.65,0,0.35,1);
  }
  .nav-link:hover,
  .nav-link.is-active{color:var(--ink)}
  .nav-link:hover::before,
  .nav-link.is-active::before{transform:scale(1);opacity:1}
  .nav-link.is-active::after{transform:scaleX(1)}
  .nav-link-num{
    font-family:'Geist Mono',monospace;
    font-size:9px;
    letter-spacing:0.12em;
    opacity:0;
    transform:translateX(-4px);
    transition:opacity 0.35s ease, transform 0.35s cubic-bezier(0.65,0,0.35,1);
  }
  .nav-link:hover .nav-link-num,
  .nav-link.is-active .nav-link-num{opacity:0.5;transform:translateX(0)}

  /* Hamburger toggle */
  .nav-toggle{
    position:relative;
    z-index:1003;
    display:flex;
    align-items:center;
    gap:14px;
    padding:8px 8px 8px 18px;
    background:rgba(255,255,255,0.04);
    border:1px solid var(--line);
    border-radius:100px;
    cursor:pointer;
    color:var(--ink);
    transition:
      background 0.4s ease,
      border-color 0.4s ease,
      box-shadow 0.4s ease,
      padding 0.5s cubic-bezier(0.65,0,0.35,1);
  }
  @media (min-width:901px){
    .nav-toggle{display:none}
  }
  .nav-toggle:hover{
    background:rgba(255,255,255,0.07);
    border-color:rgba(255,255,255,0.14);
    box-shadow:0 0 24px rgba(255,255,255,0.04);
  }
  .nav-open .nav-toggle{
    background:rgba(255,255,255,0.08);
    border-color:rgba(255,255,255,0.18);
    padding:8px 14px 8px 18px;
  }

  .nav-toggle-text{
    position:relative;
    width:38px;
    height:14px;
    overflow:hidden;
    font-family:'Geist Mono',monospace;
    font-size:10px;
    letter-spacing:0.18em;
    text-transform:uppercase;
  }
  .toggle-word{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    transition:transform 0.55s cubic-bezier(0.7,0,0.2,1), opacity 0.4s ease;
  }
  .toggle-close{
    transform:translateY(110%);
    opacity:0;
  }
  .nav-open .toggle-menu{
    transform:translateY(-110%);
    opacity:0;
  }
  .nav-open .toggle-close{
    transform:translateY(0);
    opacity:1;
  }

  /* Burger bars — staggered widths, morph to X */
  .nav-burger{
    position:relative;
    width:28px;
    height:18px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    flex-shrink:0;
  }
  .nav-burger .bar{
    display:block;
    height:1.5px;
    background:var(--ink);
    border-radius:2px;
    transform-origin:center;
    transition:
      transform 0.55s cubic-bezier(0.7,0,0.2,1),
      width 0.45s cubic-bezier(0.65,0,0.35,1),
      opacity 0.35s ease,
      margin 0.45s cubic-bezier(0.65,0,0.35,1);
  }
  .bar-top{width:28px}
  .bar-mid{
    width:18px;
    margin-left:auto;
    opacity:0.7;
  }
  .bar-bot{width:22px;margin-left:auto}

  .nav-toggle:hover .bar-mid{width:28px;margin-left:0;opacity:1}
  .nav-toggle:hover .bar-bot{width:28px;margin-left:0}

  .nav-open .bar-top{
    width:28px;
    transform:translateY(8.25px) rotate(45deg);
  }
  .nav-open .bar-mid{
    width:0;
    opacity:0;
    transform:scaleX(0);
    margin:0 auto;
  }
  .nav-open .bar-bot{
    width:28px;
    margin-left:0;
    transform:translateY(-8.25px) rotate(-45deg);
  }

  /* Full-screen overlay */
  .nav-overlay{
    position:fixed;
    inset:0;
    z-index:1001;
    pointer-events:none;
    visibility:hidden;
  }
  .nav-open .nav-overlay{
    pointer-events:auto;
    visibility:visible;
  }

  .nav-overlay-bg{
    position:absolute;
    inset:0;
    background:
      radial-gradient(ellipse 80% 60% at 70% 20%, rgba(255,255,255,0.04), transparent 55%),
      radial-gradient(ellipse 50% 40% at 10% 80%, rgba(255,255,255,0.025), transparent 50%),
      rgba(8,8,8,0.97);
    opacity:0;
    transition:opacity 0.5s ease;
  }
  .nav-open .nav-overlay-bg{opacity:1}

  .nav-overlay-line{
    position:absolute;
    top:var(--nav-h);
    left:40px;right:40px;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 0.7s cubic-bezier(0.65,0,0.35,1) 0.1s;
  }
  @media (max-width:720px){
    .nav-overlay-line{left:20px;right:20px}
  }
  .nav-open .nav-overlay-line{transform:scaleX(1)}

  .nav-overlay-inner{
    position:relative;
    height:100%;
    max-width:1180px;
    margin:0 auto;
    padding:calc(var(--nav-h) + 48px) 40px 40px;
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    clip-path:inset(0 0 100% 0);
    transition:clip-path 0.65s cubic-bezier(0.7,0,0.2,1);
  }
  .nav-open .nav-overlay-inner{
    clip-path:inset(0 0 0 0);
    transition-delay:0.05s;
  }
  .site-nav:not(.nav-open) .nav-overlay-inner{
    transition-delay:0.15s;
    transition-duration:0.45s;
  }
  @media (max-width:720px){
    .nav-overlay-inner{padding:calc(var(--nav-h) + 32px) 20px 32px}
  }

  .nav-overlay-header{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-bottom:40px;
    opacity:0;
    transform:translateY(16px);
    transition:opacity 0.5s ease 0.15s, transform 0.55s cubic-bezier(0.65,0,0.35,1) 0.15s;
  }
  .nav-open .nav-overlay-header{
    opacity:1;
    transform:translateY(0);
  }
  .nav-overlay-eyebrow{
    font-family:'Geist Mono',monospace;
    font-size:10px;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--mute);
  }
  .nav-overlay-count{
    font-size:10px;
    letter-spacing:0.15em;
    color:rgba(255,255,255,0.25);
  }

  .nav-overlay-list{
    list-style:none;
    flex:1;
    display:flex;
    flex-direction:column;
    gap:0;
  }
  .nav-overlay-list li{
    border-bottom:1px solid var(--line);
    opacity:0;
    transform:translateY(28px);
    transition:
      opacity 0.55s cubic-bezier(0.65,0,0.35,1),
      transform 0.6s cubic-bezier(0.7,0,0.2,1);
    transition-delay:calc(0.08s * var(--i) + 0.12s);
  }
  .nav-open .nav-overlay-list li{
    opacity:1;
    transform:translateY(0);
    transition-delay:calc(0.06s * var(--i) + 0.1s);
  }
  .site-nav:not(.nav-open) .nav-overlay-list li{
    opacity:0;
    transform:translateY(20px);
    transition-delay:calc(0.04s * (3 - var(--i)));
  }
  .nav-overlay-list li:first-child{border-top:1px solid var(--line)}

  .nav-overlay-link{
    display:grid;
    grid-template-columns:auto 1fr auto;
    grid-template-rows:auto auto;
    gap:4px 20px;
    align-items:center;
    padding:28px 8px;
    text-decoration:none;
    color:var(--ink);
    position:relative;
    overflow:hidden;
    transition:padding-left 0.45s cubic-bezier(0.65,0,0.35,1);
  }
  @media (max-width:520px){
    .nav-overlay-link{
      grid-template-columns:auto 1fr;
      padding:24px 4px;
    }
    .nav-overlay-arrow{display:none}
  }
  .nav-overlay-link::before{
    content:"";
    position:absolute;
    left:0;top:50%;
    width:2px;
    height:0;
    background:var(--ink);
    transform:translateY(-50%);
    transition:height 0.45s cubic-bezier(0.65,0,0.35,1);
    border-radius:2px;
  }
  .nav-overlay-link:hover{padding-left:20px}
  .nav-overlay-link:hover::before{height:60%}
  .nav-overlay-link.is-active::before{height:80%}

  .nav-overlay-num{
    grid-row:span 2;
    font-size:11px;
    letter-spacing:0.15em;
    color:rgba(255,255,255,0.2);
    align-self:start;
    padding-top:6px;
    transition:color 0.35s ease;
  }
  .nav-overlay-link:hover .nav-overlay-num{color:var(--mute)}

  .nav-overlay-title{
    font-family:'Instrument Serif',serif;
    font-size:clamp(32px,8vw,52px);
    line-height:1;
    letter-spacing:-0.02em;
    transition:transform 0.5s cubic-bezier(0.65,0,0.35,1), color 0.3s ease;
  }
  .nav-overlay-link:hover .nav-overlay-title{
    transform:translateX(4px);
  }
  .nav-overlay-sub{
    font-family:'Geist',sans-serif;
    font-size:13px;
    color:var(--mute);
    opacity:0;
    transform:translateY(6px);
    transition:opacity 0.4s ease, transform 0.4s cubic-bezier(0.65,0,0.35,1);
  }
  .nav-overlay-link:hover .nav-overlay-sub{
    opacity:1;
    transform:translateY(0);
  }

  .nav-overlay-arrow{
    grid-row:span 2;
    width:44px;height:44px;
    border-radius:50%;
    border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;
    color:var(--mute);
    transition:
      background 0.4s ease,
      border-color 0.4s ease,
      color 0.4s ease,
      transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
  }
  .nav-overlay-link:hover .nav-overlay-arrow{
    background:var(--ink);
    border-color:var(--ink);
    color:var(--bg);
    transform:rotate(45deg);
  }

  .nav-overlay-footer{
    display:flex;
    justify-content:space-between;
    margin-top:40px;
    padding-top:24px;
    border-top:1px solid var(--line);
    font-family:'Geist Mono',monospace;
    font-size:10px;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.25);
    opacity:0;
    transition:opacity 0.5s ease 0.45s;
  }
  .nav-open .nav-overlay-footer{opacity:1}

  .sections-page .sec{
    padding:100px 40px;
    border-bottom:1px solid var(--line);
  }
  .sections-page .sec-inner{
    max-width:1100px;
    margin:0 auto;
  }
  @media (max-width:720px){
    .sections-page .sec{padding:64px 20px}
  }

  /* Shared typography — same hierarchy as button page */
  .sections-page .eyebrow,
  .sections-page .tier,
  .sections-page .mono{
    font-family:'Geist Mono',monospace;
    font-size:10px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--mute);
  }
  .sections-page .eyebrow{font-size:11px;letter-spacing:0.2em;margin-bottom:20px}
  .sections-page .sec-title{
    font-family:'Instrument Serif',serif;
    font-weight:400;
    font-size:clamp(44px,7vw,80px);
    line-height:0.95;
    letter-spacing:-0.02em;
  }
  .sections-page .sec-title-sm{
    font-family:'Instrument Serif',serif;
    font-weight:400;
    font-size:clamp(32px,4.5vw,48px);
    line-height:1.05;
    letter-spacing:-0.02em;
    margin-bottom:16px;
  }
  .sections-page .sec-title em,
  .sections-page .sec-title-sm em{font-style:italic;color:var(--mute)}
  .sections-page p,
  .sections-page li{
    color:var(--mute);
    font-size:15px;
    line-height:1.65;
    font-family:'Geist',sans-serif;
  }
  .sections-page h3{
    font-family:'Instrument Serif',serif;
    font-weight:400;
    font-size:24px;
    line-height:1.1;
    letter-spacing:-0.01em;
    margin-bottom:10px;
  }
  .sections-page .sec-lead{
    margin-top:24px;
    max-width:480px;
    font-size:16px;
  }

  /* 00 — Hero témoignage (Hirebird-style, dark) */
  .sections-page .sec.sec-hero-testi{
    position:relative;
    padding:calc(var(--nav-h, 72px) + 72px) 40px 100px;
    text-align:center;
    background:
      radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255,255,255,0.035), transparent 60%),
      var(--bg);
    border-bottom:1px solid var(--line);
    overflow:hidden;
  }

  .hero-testi-ambient{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
  }
  .hero-side-grad{
    position:absolute;
    top:0;bottom:0;
    width:min(32vw, 420px);
  }
  .hero-side-grad--left{
    left:0;
    background:linear-gradient(90deg,
      rgba(255,255,255,0.07) 0%,
      rgba(255,255,255,0.02) 40%,
      transparent 100%);
  }
  .hero-side-grad--right{
    right:0;
    background:linear-gradient(270deg,
      rgba(255,255,255,0.07) 0%,
      rgba(255,255,255,0.02) 40%,
      transparent 100%);
  }
  .hero-side-orb{
    position:absolute;
    border-radius:50%;
    filter:blur(60px);
    opacity:0.5;
    animation:heroOrbFloat 12s ease-in-out infinite;
  }
  .hero-side-orb--left{
    width:280px;height:280px;
    top:20%;left:-80px;
    background:radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
    animation-delay:0s;
  }
  .hero-side-orb--right{
    width:320px;height:320px;
    bottom:15%;right:-100px;
    background:radial-gradient(circle, rgba(158,212,181,0.07), transparent 70%);
    animation-delay:-6s;
  }
  @keyframes heroOrbFloat{
    0%,100%{transform:translateY(0) scale(1)}
    50%{transform:translateY(-20px) scale(1.05)}
  }
  .hero-side-line{
    position:absolute;
    top:15%;bottom:15%;
    width:1px;
    background:linear-gradient(180deg, transparent, rgba(255,255,255,0.12) 30%, rgba(255,255,255,0.12) 70%, transparent);
  }
  .hero-side-line--left{left:clamp(24px, 6vw, 80px)}
  .hero-side-line--right{right:clamp(24px, 6vw, 80px)}
  .hero-side-tag{
    position:absolute;
    font-size:9px;
    letter-spacing:0.2em;
    color:rgba(255,255,255,0.2);
    writing-mode:vertical-rl;
    transform:rotate(180deg);
  }
  .hero-side-tag--left{
    left:clamp(36px, 7vw, 96px);
    top:50%;
    margin-top:-40px;
  }
  .hero-side-tag--right{
    right:clamp(36px, 7vw, 96px);
    top:50%;
    margin-top:-40px;
  }
  @media (max-width:720px){
    .hero-side-grad{width:40vw}
    .hero-side-orb--left{width:180px;height:180px;left:-60px}
    .hero-side-orb--right{width:200px;height:200px;right:-70px}
    .hero-side-tag,.hero-side-line{display:none}
  }

  .hero-testi-inner{position:relative;z-index:1}
  @media (max-width:720px){
    .sections-page .sec.sec-hero-testi{
      padding:calc(var(--nav-h, 64px) + 48px) 20px 72px;
    }
  }

  .hero-testi-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    max-width:720px;
  }

  .hero-testi-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'Geist Mono',monospace;
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:#9ed4b5;
    margin-bottom:28px;
  }
  .hero-testi-badge-icon{opacity:0.9}

  .hero-testi-title{
    font-family:'Instrument Serif',serif;
    font-weight:400;
    font-size:clamp(36px,5.5vw,56px);
    line-height:1.08;
    letter-spacing:-0.025em;
    color:var(--ink);
    max-width:640px;
    margin-bottom:20px;
  }
  .hero-testi-title em{
    font-style:italic;
    color:var(--mute);
  }

  .hero-testi-quote{
    font-family:'Geist',sans-serif;
    font-size:clamp(15px,2vw,17px);
    line-height:1.65;
    color:var(--mute);
    max-width:520px;
    margin-bottom:56px;
  }
  .hero-testi-quote strong{
    font-weight:500;
    color:var(--ink);
  }

  .hero-testi-stage{
    position:relative;
    width:100%;
    max-width:380px;
    margin:0 auto;
    padding:0 20px;
  }
  @media (max-width:520px){
    .hero-testi-stage{max-width:300px;padding:0}
  }

  .hero-testi-pill{
    position:absolute;
    z-index:2;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    font-family:'Geist',sans-serif;
    font-size:13px;
    font-weight:400;
    color:var(--ink);
    background:rgba(255,255,255,0.06);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:100px;
    box-shadow:
      0 4px 24px rgba(0,0,0,0.35),
      0 0 0 1px rgba(255,255,255,0.03) inset;
    white-space:nowrap;
  }
  .hero-testi-pill svg{color:var(--mute);flex-shrink:0}
  .hero-testi-pill--left{
    top:18%;
    left:-8%;
    transform:rotate(-4deg);
  }
  .hero-testi-pill--right{
    top:8%;
    right:-10%;
    transform:rotate(3deg);
  }
  @media (max-width:520px){
    .hero-testi-pill{
      display: none;
    }
    /* .hero-testi-pill{
      padding:8px 12px;
      font-size:12px;
    }
    .hero-testi-pill--left{left:-4%;top:12%}
    .hero-testi-pill--right{right:-6%;top:4%} */
  }

  .hero-testi-card{
    position:relative;
    z-index:1;
    transform:rotate(-8deg);
    border-radius:22px;
    padding:6px;
    background:linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    border:1px solid rgba(255,255,255,0.1);
    box-shadow:
      0 32px 64px rgba(0,0,0,0.55),
      0 8px 24px rgba(0,0,0,0.35),
      0 0 0 1px rgba(255,255,255,0.04) inset;
    transition:transform 0.6s cubic-bezier(0.65,0,0.35,1);
  }
  /* .hero-testi-card:hover{
    transform:rotate(4deg) translateY(-4px);
  } */
  /* @media (max-width:520px){
    .hero-testi-card{transform:rotate(4deg)}
    .hero-testi-card:hover{transform:rotate(3deg) translateY(-2px)}
  } */

  .hero-testi-card-media{
    position:relative;
    border-radius:18px;
    overflow:hidden;
    aspect-ratio:4/5;
    background:#141414;
  }
  .hero-testi-card-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  .hero-testi-play{
    position:absolute;
    top:14px;right:14px;
    width:36px;height:36px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.25);
    background:rgba(255,255,255,0.15);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    color:var(--ink);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    padding-left:2px;
    transition:
      background 0.35s ease,
      transform 0.4s cubic-bezier(0.34,1.56,0.64,1),
      border-color 0.35s ease;
  }
  .hero-testi-play:hover{
    background:rgba(255,255,255,0.28);
    border-color:rgba(255,255,255,0.4);
    transform:scale(1.08);
  }

  .hero-testi-caption{
    margin-top:28px;
    text-align:center;
  }
  .hero-testi-name{
    font-family:'Geist',sans-serif;
    font-size:15px;
    font-weight:500;
    color:var(--ink);
    margin-bottom:4px;
  }
  .hero-testi-role{
    font-family:'Geist',sans-serif;
    font-size:14px;
    color:var(--mute);
    line-height:1.5;
  }

  /* 01 — Hero */
  .sec-hero{
    min-height:85vh;
    display:flex;
    align-items:center;
    background:
      radial-gradient(ellipse 900px 500px at 50% 30%, rgba(255,255,255,0.04), transparent 65%),
      var(--bg);
    text-align:center;
  }
  .sec-hero .sec-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .sec-hero .sec-lead{text-align:center;margin-left:auto;margin-right:auto}
  .hero-meta{
    display:flex;
    align-items:center;
    gap:16px;
    margin-top:48px;
    font-family:'Geist Mono',monospace;
    font-size:10px;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--mute);
  }
  .hero-meta .dot{
    width:4px;height:4px;
    border-radius:50%;
    background:rgba(255,255,255,0.2);
  }

  /* 02 — Split */
  .split-grid{
    display:grid;
    grid-template-columns:1.6fr 1fr;
    gap:64px;
    align-items:start;
  }
  @media (max-width:860px){
    .split-grid{grid-template-columns:1fr;gap:40px}
  }
  .split-list{
    list-style:none;
    margin-top:32px;
    margin-bottom: 32px;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .split-list li{
    display:flex;
    align-items:baseline;
    gap:14px;
    font-size:14px;
  }
  .split-list .mono{flex-shrink:0;color:rgba(255,255,255,0.35)}

  /* Split — countdown cards (poster style, dark-adapted) */
  .split-countdown-scene{
    position:absolute;
    inset:0;
    pointer-events:none;
    overflow:hidden;
  }
  .split-countdown-grid{
    position:absolute;
    inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size:48px 48px;
    mask-image:linear-gradient(180deg, rgba(0,0,0,0.6), transparent 90%);
  }
  .split-ghost-num{
    position:absolute;
    font-family:'Geist',sans-serif;
    font-size:clamp(64px,12vw,120px);
    font-weight:600;
    line-height:1;
    color:rgba(255,255,255,0.04);
    letter-spacing:-0.04em;
    user-select:none;
  }
  .split-ghost-num:nth-child(2){top:8%;left:-4%}
  .split-ghost-num:nth-child(3){top:42%;right:-8%;font-size:clamp(48px,10vw,96px)}
  .split-ghost-num:nth-child(4){bottom:5%;left:20%;font-size:clamp(56px,11vw,100px)}

  .split-countdown-cards{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:32px;
    padding:12px 0 8px;
  }
  .countdown-card{
    position:relative;
    transform:rotate(var(--tilt, 0deg));
    transition:transform 0.55s cubic-bezier(0.65,0,0.35,1);
  }
  .split-panel--countdown:hover .countdown-card{
    transform:rotate(calc(var(--tilt, 0deg) * 0.6)) translateY(-2px);
  }

  .countdown-pin{
    position:absolute;
    top:-6px;
    left:50%;
    transform:translateX(-50%);
    z-index:3;
    width:14px;
    height:14px;
    border-radius:50% 50% 45% 45%;
    background:radial-gradient(circle at 35% 30%, #fafafa, #c8c8c8 55%, #888);
    box-shadow:
      0 2px 4px rgba(0,0,0,0.45),
      inset 0 1px 2px rgba(255,255,255,0.5);
  }
  .countdown-pin::after{
    content:"";
    position:absolute;
    top:10px;left:50%;
    width:2px;height:8px;
    margin-left:-1px;
    background:linear-gradient(180deg, rgba(0,0,0,0.35), transparent);
    border-radius:1px;
  }

  .countdown-paper{
    position:relative;
    width:140px;
    padding:28px 20px 22px;
    background:linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
    border:1px solid rgba(255,255,255,0.12);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.06) inset,
      0 16px 40px rgba(0,0,0,0.45),
      0 4px 12px rgba(0,0,0,0.25);
    text-align:center;
  }
  .countdown-paper::before{
    content:"";
    position:absolute;
    inset:0;
    background:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events:none;
  }

  .countdown-num{
    display:block;
    font-family:'Instrument Serif',serif;
    font-size:72px;
    font-weight:400;
    line-height:0.85;
    letter-spacing:-0.04em;
    color:var(--ink);
    position:relative;
  }
  .countdown-label{
    display:block;
    margin-top:10px;
    font-family:'Geist Mono',monospace;
    font-size:10px;
    font-weight:400;
    letter-spacing:0.12em;
    text-transform:lowercase;
    color:var(--mute);
  }

  .split-panel--countdown .panel-note{
    position:relative;
    z-index:1;
    margin-top:auto;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,0.08);
  }

  .split-countdown-mini{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:36px;
    height:28px;
    padding:0 8px;
    background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    border:1px solid rgba(255,255,255,0.1);
    color:var(--ink) !important;
    font-size:9px !important;
    letter-spacing:0.1em !important;
    box-shadow:0 2px 8px rgba(0,0,0,0.25);
    transform:rotate(-2deg);
    transition:transform 0.4s cubic-bezier(0.65,0,0.35,1), border-color 0.35s ease;
  }
  .split-list li:hover .split-countdown-mini{
    transform:rotate(0deg) scale(1.05);
  }
  .split-list li:nth-child(2) .split-countdown-mini{transform:rotate(2deg)}
  .split-list li:nth-child(2):hover .split-countdown-mini{transform:rotate(0deg) scale(1.05)}

  @media (max-width:860px){
    .split-countdown-cards{
      flex-direction:row;
      justify-content:center;
      flex-wrap:wrap;
      gap:40px 48px;
    }
    .countdown-paper{width:120px;padding:24px 16px 18px}
    .countdown-num{font-size:60px}
  }

  .split-panel{
    background:linear-gradient(160deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008));
    border:1px solid var(--line);
    border-radius:24px;
    padding:40px 32px;
    display:flex;
    flex-direction:column;
    gap:32px;
  }
  .split-panel.split-panel--countdown{
    position:relative;
    overflow:hidden;
    border-radius:0;
    padding:48px 32px 36px;
    background:
      radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,255,255,0.04), transparent 55%),
      linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
    border-color:var(--line);
    min-height:380px;
    gap:28px;
  }
  .panel-note .mono{display:block;margin-bottom:10px}
  .panel-note p{font-size:13px;line-height:1.5}

  /* 03 — Bento */
  .bento-header{margin-bottom:48px}
  .bento-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    grid-auto-rows:minmax(160px, auto);
    gap:16px;
  }
  @media (max-width:860px){
    .bento-grid{grid-template-columns:repeat(2, 1fr)}
  }
  @media (max-width:520px){
    .bento-grid{grid-template-columns:1fr}
  }
  .bento-card{
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005));
    border:1px solid var(--line);
    border-radius:20px;
    padding:28px 24px;
    display:flex;
    flex-direction:column;
    position:relative;
    overflow:hidden;
  }
  .bento-card .tier{margin-bottom:16px}
  .bento-card p{font-size:13px;line-height:1.55}
  .bento-wide{grid-column:span 2}
  .bento-tall{grid-row:span 2}
  @media (max-width:520px){
    .bento-wide,.bento-tall{grid-column:span 1;grid-row:span 1}
  }
  .bento-accent{
    position:absolute;
    bottom:-20px;right:-20px;
    width:120px;height:120px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,0.06), transparent 70%);
    pointer-events:none;
  }

  /* 04 — Columns */
  .columns-header{
    margin-bottom:56px;
    padding-bottom:32px;
    border-bottom:1px solid var(--line);
  }
  .columns-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:0;
  }
  @media (max-width:720px){
    .columns-grid{grid-template-columns:1fr;gap:40px}
  }
  .col-item{
    padding:0 40px;
    border-right:1px solid var(--line);
  }
  .col-item:first-child{padding-left:0}
  .col-item:last-child{padding-right:0;border-right:none}
  @media (max-width:720px){
    .col-item{padding:0;border-right:none;border-bottom:1px solid var(--line);padding-bottom:40px}
    .col-item:last-child{border-bottom:none;padding-bottom:0}
  }
  .col-index{
    font-size:28px;
    color:rgba(255,255,255,0.2);
    margin-bottom:20px;
    letter-spacing:0.05em;
  }

  /* 05 — Zigzag (shot stack grid) */
  .sec-zigzag{
    background:
      radial-gradient(ellipse 60% 40% at 50% 100%, rgba(255,255,255,0.025), transparent 60%),
      var(--bg);
  }
  .zigzag-header{margin-bottom:48px}
  .zigzag-grid{
    margin-bottom: 32px;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
  }
  @media (max-width:720px){
    .zigzag-grid{grid-template-columns:1fr;gap:16px}
  }

  .shot-card{
    background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.008));
    border:1px solid var(--line);
    border-radius:28px;
    padding:32px 28px 28px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    transition:
      border-color 0.4s ease,
      box-shadow 0.5s ease;
  }
  .shot-card:hover{
    border-color:rgba(255,255,255,0.14);
    box-shadow:0 20px 48px rgba(0,0,0,0.35);
  }

  .shot-stack-wrap{
    width:100%;
    max-width:320px;
    margin-bottom:24px;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .shot-stack{
    position:relative;
    height:clamp(160px, 22vw, 210px);
    margin-bottom:16px;
    width: 100%;
  }

  .shot-layer{
    position:absolute;
    left:50%;
    border-radius:16px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.12);
    box-shadow:0 10px 28px rgba(0,0,0,0.35);
    transition:
      transform 0.65s cubic-bezier(0.7,0,0.2,1),
      opacity 0.5s ease;
    will-change:transform, opacity;
  }
  .shot-layer img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .shot-layer--left{
    top:12%;
    width:68%;
    aspect-ratio:16/10;
    transform:translateX(-72%) rotate(-9deg);
    z-index:1;
    opacity:0.5;
  }
  .shot-layer--right{
    top:8%;
    width:68%;
    aspect-ratio:16/10;
    transform:translateX(-28%) rotate(8deg);
    z-index:2;
    opacity:0.5;
  }
  .shot-layer--front{
    top:50%;
    width:74%;
    aspect-ratio:16/10;
    transform:translate(-50%, -42%);
    z-index:3;
    border-color:rgba(255,255,255,0.18);
    box-shadow:0 18px 44px rgba(0,0,0,0.5);
    opacity:1;
  }

  .shot-stack.is-next .shot-layer--front{
    transform:translate(-115%, -20%) rotate(-14deg) scale(0.82);
    opacity:0;
    z-index:1;
  }
  .shot-stack.is-next .shot-layer--right{
    transform:translate(-50%, -42%) rotate(0deg) scale(1);
    opacity:1;
    z-index:4;
  }
  .shot-stack.is-next .shot-layer--left{
    opacity:0;
    transform:translate(-72%, -5%) rotate(-9deg) scale(0.9);
  }

  .shot-stack.is-prev .shot-layer--front{
    transform:translate(15%, -20%) rotate(14deg) scale(0.82);
    opacity:0;
    z-index:1;
  }
  .shot-stack.is-prev .shot-layer--left{
    transform:translate(-50%, -42%) rotate(0deg) scale(1);
    opacity:1;
    z-index:4;
  }
  .shot-stack.is-prev .shot-layer--right{
    opacity:0;
    transform:translate(-28%, -5%) rotate(8deg) scale(0.9);
  }

  .shot-card:hover .shot-stack:not(.is-next):not(.is-prev) .shot-layer--left{
    transform:translateX(-78%) rotate(-11deg);
    opacity:0.6;
  }
  .shot-card:hover .shot-stack:not(.is-next):not(.is-prev) .shot-layer--right{
    transform:translateX(-22%) rotate(10deg);
    opacity:0.6;
  }
  .shot-card:hover .shot-stack:not(.is-next):not(.is-prev) .shot-layer--front{
    transform:translate(-50%, -46%) scale(1.02);
  }

  .shot-stack-ui{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:6px 10px;
    background:rgba(255,255,255,0.05);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border:1px solid var(--line);
    border-radius:100px;
  }
  .shot-nav{
    width:28px;height:28px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.1);
    background:rgba(255,255,255,0.04);
    color:var(--ink);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    transition:
      background 0.35s ease,
      border-color 0.35s ease,
      transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
  }
  .shot-nav:hover{
    background:var(--ink);
    border-color:var(--ink);
    color:var(--bg);
    transform:scale(1.08);
  }
  .shot-index{
    font-size:9px;
    letter-spacing:0.12em;
    color:rgba(255,255,255,0.35);
    min-width:52px;
    text-align:center;
  }

  .shot-card-meta{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    margin-bottom:16px;
  }
  .shot-card-title{
    font-family:'Geist',sans-serif;
    font-size:15px;
    font-weight:500;
    letter-spacing:-0.01em;
    color:var(--ink);
    line-height:1.3;
  }
  .shot-card-count{
    font-size:12px;
    color:var(--mute);
    letter-spacing:0.02em;
  }

  .shot-card-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'Geist Mono',monospace;
    font-size:10px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--mute);
    text-decoration:none;
    padding:8px 14px;
    border-radius:100px;
    border:1px solid transparent;
    transition:
      color 0.35s ease,
      border-color 0.35s ease,
      background 0.35s ease,
      gap 0.4s cubic-bezier(0.65,0,0.35,1);
  }
  .shot-card-link:hover{
    color:var(--ink);
    border-color:var(--line);
    background:rgba(255,255,255,0.04);
    gap:12px;
  }
  .shot-card-link-arrow{
    display:inline-block;
    transition:transform 0.4s cubic-bezier(0.65,0,0.35,1);
  }
  .shot-card-link:hover .shot-card-link-arrow{
    transform:translateX(3px);
  }

  @media (prefers-reduced-motion: reduce){
    .hero-side-orb{animation:none}
    .shot-layer{transition:none}
  }

  /* 06 — Manifesto */
  .sec-manifesto{
    background:
      radial-gradient(ellipse 600px 400px at 0% 50%, rgba(255,255,255,0.025), transparent 70%),
      var(--bg);
  }
  .manifesto-grid{
    display:grid;
    grid-template-columns:1.4fr 0.8fr;
    gap:80px;
    align-items:start;
  }
  @media (max-width:860px){
    .manifesto-grid{grid-template-columns:1fr;gap:48px}
  }
  .manifesto-quote p{
    font-family:'Instrument Serif',serif;
    font-size:clamp(28px,4vw,42px);
    line-height:1.25;
    letter-spacing:-0.02em;
    color:var(--ink);
    font-style:italic;
  }
  .manifesto-quote em{font-style:normal;color:var(--mute)}
  .manifesto-aside{
    padding-top:12px;
    border-top:1px solid var(--line);
  }
  @media (min-width:861px){
    .manifesto-aside{
      padding-top:0;
      border-top:none;
      padding-left:40px;
      border-left:1px solid var(--line);
    }
  }
  .manifesto-meta{
    display:flex;
    flex-direction:column;
    gap:16px;
    margin:28px 0 24px;
  }
  .meta-row{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:16px;
    font-size:14px;
    padding-bottom:12px;
    border-bottom:1px solid var(--line);
  }
  .meta-row .mono{font-size:9px}
  .meta-row span:last-child{font-family:'Geist',sans-serif;color:var(--ink)}
  .manifesto-caption{font-size:13px;line-height:1.5}

  /* 07 — FAQ */
  .sec-faq{
    background:
      radial-gradient(ellipse 50% 40% at 100% 50%, rgba(255,255,255,0.025), transparent 60%),
      var(--bg);
  }
  .faq-grid{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:80px;
    align-items:start;
  }
  @media (max-width:860px){
    .faq-grid{
      grid-template-columns:1fr;
      gap:48px;
    }
  }

  .faq-lead{
    margin-top:8px;
    max-width:360px;
    font-size:15px;
    line-height:1.65;
    color:var(--mute);
  }
  .faq-meta{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:32px;
    font-family:'Geist Mono',monospace;
    font-size:10px;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.3);
  }
  .faq-meta-dot{
    width:4px;height:4px;
    border-radius:50%;
    background:rgba(255,255,255,0.15);
  }

  .faq-list{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .faq-item{
    position:relative;
    border:1px solid var(--line);
    background:linear-gradient(135deg, rgba(255,255,255,0.02), transparent);
    overflow:hidden;
    transition:
      border-color 0.5s cubic-bezier(0.65,0,0.35,1),
      background 0.5s ease,
      box-shadow 0.5s ease;
  }
  .faq-item::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse 80% 120% at 0% 50%, rgba(255,255,255,0.04), transparent 65%);
    opacity:0;
    transition:opacity 0.55s ease;
    pointer-events:none;
  }
  .faq-item.is-open{
    border-color:rgba(255,255,255,0.14);
    background:linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01));
    box-shadow:0 12px 40px rgba(0,0,0,0.25);
  }
  .faq-item.is-open::before{opacity:1}

  .faq-item-line{
    position:absolute;
    left:0;top:0;bottom:0;
    width:2px;
    background:var(--ink);
    transform:scaleY(0);
    transform-origin:top;
    transition:transform 0.65s cubic-bezier(0.7,0,0.2,1);
    z-index:1;
  }
  .faq-item.is-open .faq-item-line{
    transform:scaleY(1);
  }

  .faq-trigger{
    position:relative;
    z-index:2;
    width:100%;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:20px;
    padding:26px 20px;
    background:none;
    border:none;
    cursor:pointer;
    text-align:left;
    color:var(--ink);
    transition:padding-left 0.5s cubic-bezier(0.65,0,0.35,1);
  }
  .faq-trigger:hover{padding-left:28px}
  .faq-item.is-open .faq-trigger{padding-left:32px}

  .faq-num{
    font-size:10px;
    letter-spacing:0.12em;
    color:rgba(255,255,255,0.2);
    transition:
      color 0.4s ease,
      transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
  }
  .faq-item.is-open .faq-num{
    color:var(--ink);
    transform:scale(1.1);
  }
  .faq-trigger:hover .faq-num{color:var(--mute)}

  .faq-question{
    font-family:'Instrument Serif',serif;
    font-size:clamp(18px,2.5vw,24px);
    line-height:1.15;
    letter-spacing:-0.01em;
    padding-right:12px;
    transition:
      transform 0.55s cubic-bezier(0.65,0,0.35,1),
      color 0.35s ease;
  }
  .faq-item.is-open .faq-question{
    transform:translateX(6px);
  }

  .faq-icon{
    width:34px;height:34px;
    flex-shrink:0;
    border-radius:50%;
    border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;
    color:var(--mute);
    transition:
      transform 0.55s cubic-bezier(0.34,1.56,0.64,1),
      background 0.4s ease,
      border-color 0.4s ease,
      color 0.35s ease;
  }
  .faq-trigger:hover .faq-icon{
    border-color:rgba(255,255,255,0.2);
    color:var(--ink);
  }
  .faq-item.is-open .faq-icon{
    transform:rotate(135deg) scale(1.05);
    background:var(--ink);
    border-color:var(--ink);
    color:var(--bg);
  }

  .faq-panel{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows 0.7s cubic-bezier(0.7,0,0.2,1);
  }
  .faq-item.is-open .faq-panel{
    grid-template-rows:1fr;
  }
  .faq-panel-inner{
    overflow:hidden;
    min-height:0;
    padding:0 20px 0 52px;
  }
  .faq-item.is-open .faq-panel-inner{
    padding-bottom:28px;
  }

  /* First line — invisible until open */
  .faq-line-first,
  .faq-line-rest{
    font-family:'Geist',sans-serif;
    font-size:14px;
    line-height:1.65;
    max-width:520px;
  }
  .faq-line-first{
    color:var(--ink);
    font-weight:500;
    opacity:0;
    transform:translateY(16px);
    clip-path:inset(0 0 100% 0);
    margin-bottom:10px;
  }
  .faq-line-rest{
    color:var(--mute);
    opacity:0;
    transform:translateY(12px);
  }
  .faq-item.is-open .faq-line-first{
    animation:faqLineReveal 0.65s cubic-bezier(0.7,0,0.2,1) 0.08s forwards;
  }
  .faq-item.is-open .faq-line-rest{
    animation:faqLineReveal 0.6s cubic-bezier(0.7,0,0.2,1) 0.22s forwards;
  }
  @keyframes faqLineReveal{
    to{
      opacity:1;
      transform:translateY(0);
      clip-path:inset(0 0 0 0);
    }
  }

  .faq-line-first code,
  .faq-line-rest code{
    font-family:'Geist Mono',monospace;
    font-size:11px;
    padding:2px 6px;
    background:rgba(255,255,255,0.06);
    border-radius:4px;
    text-transform:none;
    letter-spacing:0;
  }
  .faq-line-rest em{
    font-style:italic;
    color:rgba(255,255,255,0.55);
  }

  @media (max-width:520px){
    .faq-trigger{
      gap:14px;
      padding:22px 16px;
    }
    .faq-panel-inner{padding:0 16px 0 16px}
    .faq-item.is-open .faq-panel-inner{padding-bottom:22px}
  }

  @media (prefers-reduced-motion: reduce){
    .faq-line-first,
    .faq-line-rest{
      opacity:1;
      transform:none;
      clip-path:none;
      animation:none;
    }
    .faq-item-line{transform:scaleY(1)}
    .faq-item.is-open .faq-question{transform:none}
  }

  /* 08 — CTA */
  .sec-cta{padding-bottom:100px;border-bottom:none}
  .cta-panel{
    background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border:1px solid var(--line);
    border-radius:28px;
    padding:56px 48px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:48px;
    align-items:center;
    box-shadow:0 24px 64px rgba(0,0,0,0.35);
  }
  @media (max-width:720px){
    .cta-panel{
      grid-template-columns:1fr;
      padding:40px 28px;
      gap:32px;
    }
  }
  .cta-actions{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    justify-content:flex-end;
  }
  @media (max-width:720px){
    .cta-actions{justify-content:flex-start}
  }

  .sec-footer{
    padding:40px;
    text-align:center;
    color:var(--mute);
    font-size:12px;
    font-family:'Geist Mono',monospace;
    letter-spacing:0.05em;
    border-top:1px solid var(--line);
  }

  /* ════════════════════════════════════════════════
     REVEAL — scroll animations site-wide
  ════════════════════════════════════════════════ */
  @media (prefers-reduced-motion: no-preference){
    .reveal{
      opacity:0;
      transform:translateY(36px);
      transition:
        opacity 0.9s cubic-bezier(0.65,0,0.35,1),
        transform 0.9s cubic-bezier(0.7,0,0.2,1);
    }
    .reveal.is-visible{
      opacity:1;
      transform:translateY(0);
    }

    .reveal-stagger > *{
      opacity:0;
      transform:translateY(28px);
      transition:
        opacity 0.75s cubic-bezier(0.65,0,0.35,1),
        transform 0.8s cubic-bezier(0.7,0,0.2,1);
    }
    .reveal-stagger.is-visible > *{
      opacity:1;
      transform:translateY(0);
    }
    .reveal-stagger.is-visible > *:nth-child(1){transition-delay:0.04s}
    .reveal-stagger.is-visible > *:nth-child(2){transition-delay:0.1s}
    .reveal-stagger.is-visible > *:nth-child(3){transition-delay:0.16s}
    .reveal-stagger.is-visible > *:nth-child(4){transition-delay:0.22s}
    .reveal-stagger.is-visible > *:nth-child(5){transition-delay:0.28s}
    .reveal-stagger.is-visible > *:nth-child(6){transition-delay:0.34s}
    .reveal-stagger.is-visible > *:nth-child(7){transition-delay:0.4s}

    .bento-card{
      transition:
        transform 0.55s cubic-bezier(0.65,0,0.35,1),
        border-color 0.4s ease,
        box-shadow 0.5s ease;
    }
    .bento-card:hover{
      transform:translateY(-4px);
      border-color:rgba(255,255,255,0.14);
      box-shadow:0 16px 40px rgba(0,0,0,0.35);
    }

    .shot-card:hover{
      box-shadow:0 24px 52px rgba(0,0,0,0.4);
    }

    .split-panel{
      transition:transform 0.6s cubic-bezier(0.65,0,0.35,1), border-color 0.4s ease;
    }
    .split-grid.is-visible .split-panel{
      transition-delay:0.15s;
    }
    .split-panel:hover{
      transform:translateY(-3px);
      border-color:rgba(255,255,255,0.12);
    }
    .split-panel--countdown:hover .countdown-card:nth-child(1){
      transform:rotate(-3deg) translateY(-4px);
    }
    .split-panel--countdown:hover .countdown-card:nth-child(2){
      transform:rotate(2deg) translateY(-4px);
    }

    .col-item{
      transition:transform 0.5s cubic-bezier(0.65,0,0.35,1);
    }
    .col-item:hover{
      transform:translateY(-3px);
    }

    .cta-panel{
      transition:
        transform 0.65s cubic-bezier(0.65,0,0.35,1),
        box-shadow 0.65s ease,
        border-color 0.4s ease;
    }
    .cta-panel.is-visible:hover{
      transform:translateY(-2px);
      box-shadow:0 32px 72px rgba(0,0,0,0.45);
    }

    .hero-testi-card{
      transition:transform 0.7s cubic-bezier(0.65,0,0.35,1);
    }
    /* .hero-testi-inner.is-visible .hero-testi-card{
      animation:heroCardIn 1s cubic-bezier(0.7,0,0.2,1) 0.35s both;
    } */
    @keyframes heroCardIn{
      from{opacity:0;transform:rotate(8deg) translateY(24px)}
      to{opacity:1;transform:rotate(6deg) translateY(0)}
    }

    .hero-testi-pill{
      transition:transform 0.55s cubic-bezier(0.65,0,0.35,1), opacity 0.5s ease;
    }
    .hero-testi-inner.is-visible .hero-testi-pill--left{
      animation:heroPillIn 0.8s cubic-bezier(0.7,0,0.2,1) 0.5s both;
    }
    .hero-testi-inner.is-visible .hero-testi-pill--right{
      animation:heroPillIn 0.8s cubic-bezier(0.7,0,0.2,1) 0.62s both;
    }
    @keyframes heroPillIn{
      from{opacity:0;transform:translateY(12px) rotate(0deg)}
      to{opacity:1}
    }

    .manifesto-quote p{
      transition:transform 0.8s cubic-bezier(0.65,0,0.35,1);
    }
    .manifesto-grid.is-visible .manifesto-quote p{
      transition-delay:0.08s;
    }
  }

  @media (prefers-reduced-motion: reduce){
    .reveal,
    .reveal-stagger > *{
      opacity:1;
      transform:none;
    }
  }