:root {
    --blue: #1F2BD6; --deep: #1620a8; --floor: #1823b8; --bone: #EFEBE3; --ink: #111111; --ground: #DCD8D1;
    --display: 'Dela Gothic One', system-ui, sans-serif;
    --body: 'Lexend', system-ui, sans-serif;
    --m: 6vw; --gutter: 32px;                                   
    --h2: clamp(48px, 6.6vw, 104px);                            
    --sheet-r: 0px;                                             
    --heavy: cubic-bezier(.65, 0, .35, 1);
    --pop: cubic-bezier(.2, .9, .25, 1.15);
  }
  @media (max-width: 767px) { :root { --m: 16px; } }

  
  html { scroll-snap-type: y mandatory; overflow-x: clip; scrollbar-gutter: stable; }
  
  @media (max-width: 1023px) { html { scroll-snap-type: none; } }
  
  html, body { overscroll-behavior-y: none; }
  
  .skip { position: fixed; z-index: 100; left: 16px; top: 16px; padding: 14px 24px; border-radius: 999px; background: var(--bone); color: var(--blue);
    font: 400 20px/1 var(--display); text-decoration: none; transform: translateY(-200%); }
  .skip:focus-visible { transform: none; outline: 3px solid var(--ink); outline-offset: 3px; }
  main:focus { outline: none; }
  body { margin: 0; background: var(--blue); color: var(--bone); font: 400 22px/1.5 var(--body); }
  h1, h2, p { margin: 0; }

  
  .hero { position: relative; z-index: 1; height: 500svh; pointer-events: none; --door: 75svh; }
  
  .snap { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; scroll-snap-stop: always; pointer-events: none; }
  
  .stage { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; pointer-events: auto;
    box-shadow: 0 calc(100lvh - 100svh) 0 var(--floor);
    
    background:
      radial-gradient(60% 70% at 18% -6%, rgba(255,255,255,.16), transparent 70%),
      linear-gradient(180deg, #2331e0 0%, var(--blue) 46%, var(--deep) 64%, var(--floor) 100%); }
  .stage::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
    background: linear-gradient(115deg, rgba(255,255,255,.10) 0 18%, transparent 34%); }   
  .stage::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .28;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  #gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; opacity: 0; }
  .js [data-split]:not([data-split="done"]) { visibility: hidden; }   
  
  .js .stage:not([data-intro]) .say.on [data-split], .js .stage:not([data-intro]) .say.on[data-split] { visibility: visible; }
  #lines { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 2; pointer-events: none; }
  
  .stage[data-intro] .say.on .w, .js .stage[data-intro] .s0.on .kicker { opacity: 0; transform: translateY(.55em) scale(.96); }
  .js .stage[data-intro] .cta { opacity: 0; }
  .stage[data-intro] .dots { opacity: 0; }
  
  html:not(.js) .say:not(.s0), html:not(.js) .dots { display: none; }
  
  .stage[data-late] #gl { transition: opacity .8s ease; }
  .darb-header-scope { transition: opacity .8s var(--heavy); }
  body[data-intro] .darb-header-scope { opacity: 0; pointer-events: none; }

  
  .say { position: absolute; z-index: 2; pointer-events: none; }
  .say .w { display: inline-block; opacity: 0; transform: translateY(.55em) scale(.96); transform-origin: 0 100%;
    transition: opacity .35s ease, transform .7s var(--pop); transition-delay: calc(var(--i) * 45ms); }
  .say.on .w { opacity: 1; transform: none; }
  
  .say:not(.on) .w { transition-duration: .16s; transition-delay: 0s; }
  .stage[data-moved] .say.on .w { transition-delay: calc(.18s + var(--i) * 45ms); }
  .big { font: 400 clamp(40px, min(5.2vw, 9.6svh), 104px)/.98 var(--display); letter-spacing: -.01em; }

  
  .s0 { left: var(--m); right: var(--m); top: max(14svh, 84px); }   
  .s0 .kicker { font: 500 22px/1.3 var(--body); margin-bottom: 14px; transition: opacity .35s ease; }
  .s0:not(.on) .kicker { opacity: 0; transition-duration: .16s; }
  .stage[data-moved] .s0.on .kicker { transition-delay: .18s; }
  .s0 h1 { font: 400 clamp(48px, min(6.3vw, 11svh), 132px)/.96 var(--display); letter-spacing: -.015em; }
  .s0 .ln { display: block; width: max-content; }
  
  
  .s1 { left: var(--m); top: max(14svh, 84px); width: 40vw; font-size: clamp(40px, min(5.2vw, 9.6svh), 108px); }
  
  .s2 { left: var(--m); top: 46svh; translate: 0 -50%; width: 41vw; }
  
  .s3 { left: var(--m); top: max(14svh, 84px); width: 40vw; }
  
  .cta { position: absolute; z-index: 4; left: 0; top: 0; display: inline-flex; align-items: center; gap: 16px;
    height: 76px; padding: 0 34px 0 36px; border-radius: 999px; background: var(--bone); color: var(--blue);
    font: 400 26px/1 var(--display); white-space: nowrap; text-decoration: none;
    box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 -3px 0 rgba(22,32,168,.12) inset, 0 26px 60px -18px rgba(7,10,58,.55), 0 6px 14px -6px rgba(7,10,58,.35);
    translate: var(--x, var(--m)) var(--y, 80svh);
    transition: translate .9s var(--heavy), padding .45s var(--heavy), opacity .8s var(--heavy) .35s, background-color .2s; }
  .stage[data-step="0"] .cta { --x: var(--x0); --y: var(--y0); }
  .stage[data-step="1"] .cta { --x: var(--x1); --y: var(--y1); }
  .stage[data-step="2"] .cta { --x: var(--x2); --y: var(--y2); }
  .stage[data-step="3"] .cta { --x: var(--x3); --y: var(--y3); }
  .stage[data-step="4"] .cta { --x: var(--x4); --y: var(--y4); }
  .cta i { font-style: normal; display: inline-block; transition: transform .45s var(--heavy); }
  .cta:hover { padding-right: 58px; background: #fff; }
  .cta:hover i { transform: translateX(10px); }
  .cta:focus-visible { outline: 3px solid var(--bone); outline-offset: 5px; }
  
  .cta.mounted { translate: none; transform-origin: 0 0; background: var(--blue); color: var(--bone);
    box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 -5px 0 rgba(10,16,120,.6) inset, 0 16px 26px -10px rgba(12,18,110,.6), 0 3px 6px -2px rgba(12,18,110,.35);
    transition: padding .45s var(--heavy), opacity .3s ease, background-color .2s; }
  .cta.mounted:hover { background: #2f3cf2; }
  .cta.mounted:active { box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 -2px 0 rgba(10,16,120,.6) inset, 0 6px 12px -6px rgba(12,18,110,.6); }
  .cta.mounted:focus-visible { outline-color: var(--blue); }
  .cta.swap { opacity: 0 !important; transition: none; }
  
  .cta.in, .cta.mounted.in { transition: padding .45s var(--heavy), opacity .22s ease; }   

  
  .expand { position: absolute; inset: 0; z-index: 5; pointer-events: none; visibility: hidden;
    --t: 45%; --r: 40%; --b: 45%; --l: 40%; --cx: 50%; --cy: 50%; }
  .expand > i { position: absolute; inset: 0; clip-path: inset(var(--t) var(--r) var(--b) var(--l) round 999px); }
  .expand .ex-ring { background: conic-gradient(from 0deg at var(--cx) var(--cy), #4285F4, #EA4335, #FBBC04, #34A853, #4285F4); }
  .expand .ex-ink { background: #fff; clip-path: inset(calc(var(--t) + 4px) calc(var(--r) + 4px) calc(var(--b) + 4px) calc(var(--l) + 4px) round 999px); }
  .expand span { position: absolute; left: var(--cx); top: var(--cy); translate: -50% -50%; white-space: nowrap;
    font: 600 var(--fs, 40px)/1 'Manrope', system-ui, sans-serif; color: #202124; letter-spacing: -.01em; }
  .expand.ink { visibility: visible; }
  .expand.ink .ex-ink { background: var(--ink); }
  .expand.ink span { opacity: 0; }
  
  .expand.door .ex-ink { visibility: hidden; }
  @media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
    .js .hero { height: calc(500svh + var(--door)); background: linear-gradient(var(--ink) calc(100% - 100svh), transparent 0); }
  }
  

  
  .dots { position: absolute; z-index: 4; right: 22px; top: 50%; translate: 0 -50%; display: grid; gap: 12px; transition: opacity .8s var(--heavy) .5s; }
  .dots button { display: block; width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; appearance: none;
    background: rgba(239,235,227,.6); box-shadow: 0 0 0 1.5px rgba(22,32,168,.55);   
    transition: background-color .3s, transform .3s var(--pop); }
  .dots button[aria-current="step"] { background: var(--bone); transform: scale(1.3); }
  .dots button:focus-visible { outline: 3px solid var(--bone); outline-offset: 3px; }
  @media (pointer: coarse) { .dots { display: none; } }   

  
  .flat { position: absolute; z-index: 1; right: var(--m); bottom: 11svh; width: min(52vw, 100svh); fill: var(--bone); transition: opacity .5s ease; }
  .stage[data-flat]:not([data-step="0"]):not([data-step="4"]) .flat { opacity: 0; }
  .stage[data-flat] .cta { --x: var(--m); --y: calc(93svh - 100%); }

  
  @media (max-width: 767px) and (max-aspect-ratio: 5/4), (orientation: portrait) and (max-width: 1100px) {
    .s0 { top: 12svh; }
    .s0 h1 { font-size: clamp(38px, min(10.7vw, 7svh), 62px); }   
    .s0 .ln { width: auto; }
    .s1, .s2, .s3 { top: 12svh; bottom: auto; translate: none; left: var(--m); right: var(--m); width: auto; text-align: left; text-wrap: balance; }
    
    .s1, .s3 { font-size: var(--fs13, clamp(30px, min(11.4vw, 7.8svh), 60px)); letter-spacing: -.01em; }
    .s2 { font-size: var(--fs2, clamp(28px, min(9vw, 6.2svh), 48px)); letter-spacing: -.01em; }
    .cta { height: 64px; font-size: 22px; padding: 0 26px 0 28px; }
    .dots { display: none; }
    .flat { right: auto; left: 50%; translate: -50% 0; bottom: calc(7svh + 64px + 5svh); width: min(84vw, 60svh); }
  }
  
  .s1, .s2, .s3 { text-wrap: balance; }

  


  
  .after { min-height: 100svh; padding: 120px var(--m); box-sizing: border-box; scroll-snap-align: start; background: var(--ground); color: var(--ink); }
  .after h2 { font: 400 clamp(40px, 5vw, 88px)/1 var(--display); margin-bottom: 24px; }
  .after.ink { background: var(--ink); color: var(--bone); }
  .after .name { font: 400 clamp(28px, 3vw, 44px)/1.2 var(--display); color: var(--blue); }

  
  @media (prefers-reduced-motion: reduce) {
    .say .w { transition: none; }
    .cta { transition: opacity .3s; }
  }