:root {
     /* --bg: #0a0a0a; */
     /* --bg: hsl(248, 81%, 13%); */
     /* --bg: rgba(247, 247, 239); */
     --bg: rgba(19, 25, 49);


     --panel: #111;
     --ink: #fafafa;
     --mute: #8a8a8a;
     /* --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: rgba(19, 25, 49);
     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 {
         backdrop-filter: blur(17px);
         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 20px;
     }

     .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; */
     /* padding-top: 70px; */

     /* padding-top: calc( var(--nav-h) + 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;
     padding-top: 70px;
 }

 .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: 24px;
 }

 .split-list li {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 14px;
     font-size: 14px;
 }

 .split-list .mono {
     flex-shrink: 0;
     color: rgba(19, 25, 49);
 }

 /* 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); */
     background: rgba(19, 25, 49);
     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(--bg);
     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: rgba(19, 25, 49);
     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(--bg);
     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(--bg);
 }

 .faq-item.is-open .faq-icon {
     transform: rotate(135deg) scale(1.05);
     background: var(--bg);
     border-color: var(--ink);
     color: var(--ink);
 }

 .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 20px;
 }

 .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;
     }
 }


 @media (max-width:520px) {

     :root {
         --bg: rgba(19, 25, 49);

         /* .sections-page .sec {
background-color: var(--bg);
     } */
     }
 }


 .container-light {
     color: rgba(19, 25, 49);
     background-color: rgba(247, 247, 239);
 }