:root{
    --blue:#0061EB;
    --green:#11ED11;
    --vanilla:#F6F1E7;
    --paper:#FFFFFF;
    --ink:#0F1317;
    --ink-2:#5C636B;
    --hair:rgba(15,19,23,.12);
    --hair-2:rgba(15,19,23,.07);
    --on-blue:rgba(255,255,255,.92);
    --hair-on-blue:rgba(255,255,255,.22);
    --ease:cubic-bezier(.16,1,.3,1);      /* ease-out-expo */
    --ease-quart:cubic-bezier(.25,1,.5,1);   /* ease-out-quart */
    --pad:clamp(20px,5vw,72px);
    --shell:1180px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{
    margin:0; background:var(--vanilla); color:var(--ink);
    font-family:"Assistant","Poppins",system-ui,sans-serif;
    font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;
  }
  html[lang="en"] body{font-family:"Poppins",system-ui,sans-serif; font-size:16px}
  img{max-width:100%; height:auto; display:block}
  a{color:inherit}
  a:focus-visible,button:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:2px}
  header a:focus-visible,.hero a:focus-visible,.subhero a:focus-visible,footer a:focus-visible{outline-color:var(--green)}
  h1,h2,h3{margin:0; font-weight:600; letter-spacing:-.025em; line-height:1.08; text-wrap:balance}
  p{text-wrap:pretty}
  h1{font-size:clamp(32px,5vw,58px)}
  h2{font-size:clamp(25px,3.3vw,38px)}
  h3{font-size:clamp(18px,1.9vw,22px); letter-spacing:-.015em}
  p{margin:0}

  .shell{max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad)}
  .ltr{direction:ltr; unicode-bidi:isolate}
  .mono{
    font-family:"JetBrains Mono",ui-monospace,monospace;
    font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  }

  /* ── header ─────────────────────────────── */
  header{
    position:sticky; top:0; z-index:30;
    background:rgba(0,97,235,.9);
    backdrop-filter:saturate(150%) blur(14px);
    -webkit-backdrop-filter:saturate(150%) blur(14px);
    border-bottom:1px solid rgba(255,255,255,.15);
  }
  .bar{display:flex; align-items:center; justify-content:space-between; gap:18px; height:60px}

  /* "built to grow." — the rule grows as the page is read. Scroll-driven, no JS. */
  .progress{
    position:absolute; inset-inline:0; bottom:-1px; height:2px;
    background:var(--green); transform:scaleX(0); transform-origin:right center;
  }
  html[dir="ltr"] .progress{transform-origin:left center}
  @supports (animation-timeline: scroll()){
    .progress{
      animation-name:grow-rule;
      animation-duration:auto;
      animation-timing-function:linear;
      animation-fill-mode:both;
      animation-timeline:scroll(root block);
    }
  }
  @keyframes grow-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .bar>a img{height:20px; width:auto}
  nav{display:flex; align-items:center; gap:clamp(16px,2.4vw,32px)}
  nav a{
    position:relative;
    display:inline-flex; align-items:center; padding-block:12px;
    color:rgba(255,255,255,.92); text-decoration:none; font-size:14.5px; font-weight:500;
    transition:color .18s var(--ease);
  }
  nav a::after{
    content:""; position:absolute; inset-inline:0; bottom:7px; height:1px;
    background:var(--green); transform:scaleX(0); transform-origin:right center;
    transition:transform .2s var(--ease-quart);
  }
  html[dir="ltr"] nav a::after{transform-origin:left center}
  nav a:hover{color:#fff}
  nav a:hover::after{transform:scaleX(1)}
  .lang{display:inline-flex; align-items:center; gap:1px}
  .lang a{
    position:relative;
    appearance:none; background:none; border:0; cursor:pointer; padding:15px 12px;
    text-decoration:none;
    font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.1em;
    color:rgba(255,255,255,.92); transition:color .18s var(--ease);
  }
  .lang a::after{
    content:""; position:absolute; inset-inline:12px; bottom:12px; height:1px;
    background:var(--green); transform:scaleX(0); transition:transform .2s var(--ease-quart);
  }
  .lang a:hover{color:#fff}
  .lang a:active{transform:translateY(1px)}
  .lang a[aria-current="page"]{color:#fff}
  .lang a[aria-current="page"]::after{transform:scaleX(1)}
  .lang i{font-style:normal; color:rgba(255,255,255,.3); font-size:11px}
  @media (max-width:540px){
    nav a[data-nav="process"]{display:none}
    .bar{gap:12px}
    .bar nav{gap:12px}
    .bar nav a{white-space:nowrap}
    .lang a{padding-inline:8px}
    .lang a::after{inset-inline:8px}
  }

  /* ── hero ───────────────────────────────── */
  .hero{background:var(--blue); color:#fff; position:relative; overflow:hidden}
  .hero::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(52% 44% at 68% 26%, rgba(255,255,255,.11), transparent 70%);
  }
  html[dir="ltr"] .hero::after{background:radial-gradient(52% 44% at 32% 26%, rgba(255,255,255,.11), transparent 70%)}
  .hero .shell{position:relative; z-index:1; padding-block:clamp(40px,6vw,80px) clamp(44px,7vw,84px)}
  .hero-grid{display:grid; grid-template-columns:1.45fr .8fr; gap:clamp(28px,5vw,72px); align-items:start}
  @media (max-width:860px){.hero-grid{grid-template-columns:1fr; align-items:start; gap:34px}}
  .hero-logo{width:100%}
  .hero-anim,.hero-still{display:block; width:100%; height:auto}
  .hero-anim,.hero-still{aspect-ratio:1088 / 384}
  /* One of the two shows. The still is the default; the video takes over only
     while it plays, then hands back so the wordmark is a crisp 3x asset again. */
  .hero-anim{display:none}
  html.logo-anim .hero-anim{display:block}
  html.logo-anim .hero-still{display:none}
  html.logo-anim.logo-done .hero-anim{display:none}
  html.logo-anim.logo-done .hero-still{display:block}
  .hero-rule{
    display:block; height:1px; width:100%;
    background:var(--green); margin-block:clamp(14px,1.8vw,20px) clamp(26px,3.4vw,38px);
  }
  .hero h1{max-width:15ch}
  .hero .lede{margin-top:20px; max-width:46ch; font-size:clamp(16.5px,1.75vw,19px); color:var(--on-blue)}
  
  .actions{display:flex; flex-wrap:wrap; gap:26px; margin-top:clamp(28px,4vw,40px)}
  .action{
    display:inline-flex; flex-direction:column; gap:4px; text-decoration:none;
    padding-bottom:8px; border-bottom:1px solid var(--hair-on-blue);
    transition:border-color .2s var(--ease), transform .2s var(--ease);
  }
  .action{transition:border-color .2s var(--ease), transform .2s var(--ease-quart)}
  .action:hover{border-color:var(--green); transform:translateY(-2px)}
  .action .mono{color:var(--on-blue); margin:0; font-size:11px}
  .action b{font-family:"Poppins",sans-serif; font-weight:400; font-size:clamp(16px,1.9vw,19px); direction:ltr; unicode-bidi:isolate}
  .action-cta{flex-basis:100%; align-items:flex-start; border-bottom-color:var(--green)}
  .action-label{font-size:clamp(18px,1.9vw,20px); font-weight:600; line-height:1.35}
  .action-hint{font-size:14px; color:var(--on-blue)}

  /* ── sections ───────────────────────────── */
  section{padding-block:clamp(56px,8.5vw,116px)}
  .head{max-width:62ch}
  .head p{margin-top:16px; color:var(--ink-2); max-width:54ch}

  /* rows: hairline lists instead of card grids */
  .rows{margin-top:clamp(34px,5vw,64px); border-top:1px solid var(--hair)}
  .row{
    display:grid; grid-template-columns:.62fr 1.38fr; gap:clamp(14px,3vw,44px);
    padding-block:clamp(22px,2.8vw,32px);
    border-bottom:1px solid var(--hair);
    transition:background-color .25s var(--ease);
  }
  .row p{color:var(--ink-2); font-size:16.5px}
  @media (max-width:760px){
    .row{grid-template-columns:1fr; gap:8px}
  }
  .row{border-bottom-color:var(--hair)}
  .row:hover{background:rgba(0,97,235,.035); border-bottom-color:var(--blue)}
  .row .meta{margin-top:10px; color:var(--ink-2); opacity:.75}

  /* ── process ────────────────────────────── */
  .process{background:var(--paper); border-block:1px solid var(--hair-2)}
  .stepline{
    display:grid; grid-template-columns:auto 1fr; gap:clamp(16px,3vw,40px);
    padding-block:clamp(20px,2.6vw,30px); border-bottom:1px solid var(--hair-2);
  }
  .stepline:first-of-type{border-top:1px solid var(--hair-2)}
  .stepline .mono{color:var(--blue); padding-top:.55em}
  .stepline h3{max-width:22ch}
  .stepline p{margin-top:8px; color:var(--ink-2); max-width:58ch; font-size:16.5px}

  /* ── contact ────────────────────────────── */
  .contact-grid{display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(26px,5vw,72px); align-items:end}
  @media (max-width:820px){.contact-grid{grid-template-columns:1fr; align-items:start; gap:30px}}
  .lines{margin-top:clamp(26px,4vw,44px); border-top:1px solid var(--hair)}
  .line{
    display:flex; align-items:baseline; justify-content:space-between; gap:20px;
    padding-block:clamp(15px,2vw,20px); border-bottom:1px solid var(--hair);
    text-decoration:none; transition:color .2s var(--ease), padding-inline-start .2s var(--ease);
  }
  .line:hover{color:var(--blue); padding-inline-start:10px; border-bottom-color:var(--blue)}
  .line .mono{color:var(--ink-2)}
  .line b{font-family:"Poppins",sans-serif; font-weight:400; font-size:clamp(17px,2vw,21px); direction:ltr; unicode-bidi:isolate}
  .aside{color:var(--ink-2); font-size:16px; max-width:34ch}
  .wa{
    display:inline-flex; align-items:center; gap:10px;
    margin-top:clamp(24px,3.4vw,34px);
    padding:14px 22px; border-radius:6px;
    background:var(--blue); color:#fff; text-decoration:none;
    font-family:inherit; font-size:16px; font-weight:600;
    transition:background-color .2s var(--ease), transform .12s var(--ease);
  }
  .wa:hover{background:#0050C4}
  .wa:active{transform:scale(.985)}
  .wa svg{width:19px; height:19px; flex:none; transition:transform .18s var(--ease-quart)}
  .wa:hover{transform:translateY(-1px)}
  .wa:hover svg{transform:translateX(-3px)}
  html[dir="ltr"] .wa:hover svg{transform:translateX(3px)}
  @media (max-width:520px){.wa{display:flex; justify-content:center}}

  /* ── footer ─────────────────────────────── */
  footer{background:var(--blue); color:var(--on-blue)}
  .foot{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px 26px; padding-block:24px}
  .foot img{height:15px; width:auto; opacity:.85}

  /* ── motion ─────────────────────────────── */
  /* content is visible by default; the reveal only arms itself when JS says so */
  .reveal-ready .reveal{opacity:0; transform:translateY(14px); transition:opacity .55s var(--ease), transform .55s var(--ease)}
  .reveal-ready .reveal.in{opacity:1; transform:none}

  /* The wordmark carries its own entrance (Stav's animation); the still image wipes in instead. */
  .reveal-ready .hero-logo{opacity:1; transform:none}
  .reveal-ready .hero-logo .hero-still{
    clip-path:inset(0 0 0 100%); filter:blur(7px);
    transition:clip-path .8s var(--ease), filter .8s var(--ease);
  }
  html[dir="ltr"] .reveal-ready .hero-logo .hero-still{clip-path:inset(0 100% 0 0)}
  .reveal-ready .hero-logo.in .hero-still{clip-path:inset(0); filter:blur(0)}

  /* Its rule draws underneath, right to left with the language. */
  .reveal-ready .hero-rule{
    opacity:1; transform:scaleX(0); transform-origin:right center;
    transition:transform .8s var(--ease);
  }
  html[dir="ltr"] .reveal-ready .hero-rule{transform-origin:left center}
  .reveal-ready .hero-rule.in{transform:scaleX(1)}

  /* List rows arrive from the start edge instead of repeating the hero's rise. */
  .reveal-ready .row.reveal{transform:translateX(16px)}
  html[dir="ltr"] .reveal-ready .row.reveal{transform:translateX(-16px)}
  .reveal-ready .row.reveal.in{transform:none}

  /* A step's number lands just before its text. */
  .reveal-ready .stepline.in > .mono{animation:step-num .5s var(--ease) .1s both}
  @keyframes step-num{from{opacity:0; transform:translateY(7px)}to{opacity:1; transform:none}}

  .reveal-ready .reveal[style*="--i"]{transition-delay:calc(var(--i) * 60ms)}
  @media (prefers-reduced-motion:reduce){
    .reveal-ready .reveal{opacity:1; transform:none; transition:none}
    .progress{animation:none; transform:scaleX(0)}
    *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  }

  /* ── inner pages ────────────────────────── */
  /* Same blue field as the hero, without the wordmark animation — the header
     already carries the mark on every page below the home page. */
  .subhero{background:var(--blue); color:#fff; position:relative; overflow:hidden}
  .subhero::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(52% 44% at 68% 26%, rgba(255,255,255,.11), transparent 70%);
  }
  html[dir="ltr"] .subhero::after{background:radial-gradient(52% 44% at 32% 26%, rgba(255,255,255,.11), transparent 70%)}
  .subhero .shell{position:relative; z-index:1; padding-block:clamp(30px,4.4vw,58px) clamp(42px,6.4vw,80px)}
  .subhero h1{max-width:17ch}
  .subhero .lede{margin-top:20px; max-width:50ch; font-size:clamp(16.5px,1.75vw,19px); color:var(--on-blue)}
  .subhero .hero-rule{margin-block:clamp(18px,2.4vw,26px) clamp(24px,3vw,34px)}
  .subhero .hero-grid{align-items:start}

  .crumbs{
    display:flex; flex-wrap:wrap; align-items:center; gap:9px;
    color:var(--on-blue); font-size:13.5px; line-height:1.4;
  }
  .crumbs a{position:relative; text-decoration:none}
  .crumbs a::after{
    content:""; position:absolute; inset-inline:0; bottom:-3px; height:1px;
    background:var(--green); transform:scaleX(0); transform-origin:right center;
    transition:transform .2s var(--ease-quart);
  }
  html[dir="ltr"] .crumbs a::after{transform-origin:left center}
  .crumbs a:hover::after{transform:scaleX(1)}
  .crumbs i{font-style:normal; color:rgba(255,255,255,.45)}

  /* A row that is a link keeps the hairline grammar and earns a green underline. */
  a.row{text-decoration:none; color:inherit}
  a.row h3{position:relative; display:inline-block}
  a.row h3::after{
    content:""; position:absolute; inset-inline:0; bottom:-4px; height:1px;
    background:var(--green); transform:scaleX(0); transform-origin:right center;
    transition:transform .22s var(--ease-quart);
  }
  html[dir="ltr"] a.row h3::after{transform-origin:left center}
  a.row:hover h3::after{transform:scaleX(1)}

  /* Question / answer reuses the row grid: the question is the narrow column. */
  .qa h3{max-width:26ch}