@layer base, ui;

@layer base{
  :root{
    color-scheme:dark;
    /* Palette taken from the application (Design.qml) */
    --bg:#0f1115;
    --card:#161a21;
    --text:#eef1f6;
    --muted:#99a3b4;
    --faint:#5f6a7c;
    --blue:#3daee9;
    --blue2:#5cbef1;
    --blue-deep:#2f93c9;
    --blue-ink:#08131a;
    --red:#ff5f6d;
    --green:#4cd07d;
    --violet:#a78bfa;
    --orange:#fb923c;
    --radius:12px;
    --ring:color-mix(in oklab,var(--blue) 60%,transparent);
    --border:#232a35;
    --border-strong:#323c4c;
    --shadow:0 14px 40px rgba(0,0,0,.45);
    --mono:Consolas,'Cascadia Code',Menlo,monospace;
    --sans:Inter,system-ui,'Segoe UI',Roboto,Arial,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%;scrollbar-width:thin;scrollbar-color:color-mix(in oklab,var(--blue) 30%,transparent) transparent}
  body{min-height:100svh;background:linear-gradient(180deg,#12151b,var(--bg) 42%);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:
    radial-gradient(880px 520px at 84% -12%,color-mix(in oklab,var(--blue) 14%,transparent),transparent 62%),
    radial-gradient(720px 500px at -12% 34%,color-mix(in oklab,var(--violet) 7%,transparent),transparent 60%),
    radial-gradient(900px 560px at 50% 118%,color-mix(in oklab,var(--orange) 6%,transparent),transparent 62%)}
  body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.028;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
  ::selection{background:color-mix(in oklab,var(--blue) 40%,transparent)}
  :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
  a,button{touch-action:manipulation}
}

@layer ui{
  .container{max-width:1080px;margin:0 auto;padding:0 22px}
  .blue{color:var(--blue)} .red{color:var(--red)} .muted{color:var(--muted)} .small{font-size:12px}
  h1,h2,h3{text-wrap:balance}
  p{text-wrap:pretty}
  /* NAV */
  .nav{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--bg) 72%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;height:62px}
  .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);background:none;border:0;padding:0;font:inherit;cursor:pointer;transition:opacity .18s ease}
  .logo:hover{opacity:.85}
  .logo-banner{height:38px;width:auto;display:block}
  .logo.sm .logo-banner{height:48px}
  .nav-right{display:flex;align-items:center;gap:12px}
  .gh{color:var(--muted);text-decoration:none;display:inline-flex;padding:8px;border-radius:999px;transition:color .18s ease,background .18s ease}.gh:hover{color:var(--blue);background:color-mix(in oklab,var(--blue) 10%,transparent)}.gh svg{display:block}
  .langseg{display:flex;border:1px solid var(--border);border-radius:999px;overflow:hidden;background:color-mix(in oklab,var(--blue) 5%,transparent)}
  .langseg button{background:transparent;border:0;color:var(--muted);font-size:11.5px;font-weight:700;padding:5px 11px;cursor:pointer;font-family:var(--sans);transition:color .18s ease,background .18s ease}
  .langseg button+button{border-left:1px solid var(--border)}
  .langseg button.on{background:var(--blue);color:var(--blue-ink)}
  .langseg button:not(.on):hover{color:var(--text)}
  /* HERO */
  .hero{position:relative;padding:52px 0 46px;border-bottom:1px solid var(--border);overflow:hidden}
  .hero::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background-image:
    linear-gradient(color-mix(in oklab,var(--blue) 6%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in oklab,var(--blue) 6%,transparent) 1px,transparent 1px);
    background-size:40px 40px;opacity:.8;
    -webkit-mask-image:radial-gradient(720px 400px at 62% 4%,#000,transparent 78%);
    mask-image:radial-gradient(720px 400px at 62% 4%,#000,transparent 78%)}
  .hero::after{content:'';position:absolute;top:-170px;right:-100px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,color-mix(in oklab,var(--blue) 16%,transparent),transparent 65%);pointer-events:none;animation:drift 16s ease-in-out infinite alternate}
  @keyframes drift{to{translate:-44px 28px;scale:1.07}}
  .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.06fr;gap:40px;align-items:center}
  .big-logo{display:flex;align-items:center;gap:16px;margin:0 0 12px}
  .big-banner{height:56px;width:auto;max-width:100%;display:block}
  .hero h1{font-size:clamp(26px,3.6vw,36px);line-height:1.2;letter-spacing:-.02em;margin:0 0 12px;max-width:24ch}
  .hero h1 .blue,.show-text h2 .blue{background:linear-gradient(115deg,var(--blue2),var(--blue));background-clip:text;-webkit-background-clip:text;color:transparent}
  .hero .desc{color:var(--muted);font-size:15px;line-height:1.65;margin-bottom:20px;max-width:50ch}
  .btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  .btn{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 20px;border-radius:999px;text-decoration:none;font-size:13.5px;font-weight:600;letter-spacing:.01em;white-space:nowrap;border:1px solid transparent;color:var(--text);transition:translate .18s ease,scale .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease,color .18s ease}
  .btn svg{flex:none;display:block;width:17px;height:17px}
  .btn b{font-weight:650}
  .btn small{font-size:11.5px;font-weight:500;color:inherit;opacity:.62}
  .btn:active{translate:0 0;scale:.97}
  .btn.primary{background:linear-gradient(180deg,var(--blue2),var(--blue));color:var(--blue-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 20px rgba(0,0,0,.45)}
  .btn.primary:hover{translate:0 -2px;background:linear-gradient(180deg,#6cc7f4,var(--blue2));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 32px rgba(0,0,0,.5),0 0 0 4px color-mix(in oklab,var(--blue) 22%,transparent)}
  .btn.primary small{opacity:.62}
  .btn.outline{background:#1c212b;border-color:var(--border-strong);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
  .btn.outline:hover{translate:0 -2px;background:linear-gradient(180deg,#232a35,color-mix(in oklab,var(--blue) 16%,#232a35));border-color:var(--blue);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 26px rgba(0,0,0,.45)}
  .btn.ghost{background:transparent;border-color:var(--border);color:var(--muted)}
  .btn.ghost:hover{translate:0 -2px;color:var(--text);background:color-mix(in oklab,var(--blue) 12%,transparent);border-color:var(--border-strong)}
  .release{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:11.5px;color:var(--muted);font-family:var(--mono);border:1px solid var(--border);border-radius:999px;padding:5px 12px;background:color-mix(in oklab,var(--card) 75%,transparent)}
  /* SECTIONS */
  .features{position:relative;padding:64px 0;border-bottom:1px solid var(--border)}
  .features::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,color-mix(in oklab,var(--card) 45%,transparent),transparent)}
  .features h2{text-align:center;font-size:clamp(22px,2.6vw,28px);letter-spacing:-.02em}
  .sub{text-align:center;color:var(--muted);font-size:14px;margin:8px auto 28px;max-width:52ch}
  .grid8{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .f{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;gap:0 10px;align-content:start;background:color-mix(in oklab,var(--card) 88%,transparent);border:1px solid var(--border);border-radius:var(--radius);padding:16px;transition:opacity .2s ease,translate .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease}
  .f::before{content:'';position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--blue) 55%,transparent),transparent);opacity:0;transition:opacity .25s ease;pointer-events:none}
  .f:hover::before{opacity:1}
  .f:hover{translate:0 -2px;border-color:var(--border-strong);background:color-mix(in oklab,var(--card) 85%,transparent);box-shadow:var(--shadow)}
  .grid8:has(.f:hover) .f:not(:hover){opacity:.8}
  .f .ic{width:34px;height:34px;border:1px solid var(--border);border-radius:10px;display:grid;place-items:center;color:var(--blue);background:color-mix(in oklab,var(--blue) 9%,transparent);transition:border-color .2s ease,box-shadow .2s ease}
  .f:hover .ic{border-color:var(--border-strong);box-shadow:0 0 20px color-mix(in oklab,var(--blue) 20%,transparent)}
  .f .ic svg{width:19px;height:19px;display:block}
  .f h3{grid-column:2;align-self:center;font-size:14px;letter-spacing:-.01em}
  .f p{grid-column:1/-1;font-size:13px;line-height:1.55;color:var(--muted);margin-top:8px}
  .showcase{position:relative;padding:64px 0;border-bottom:1px solid var(--border)}
  .show-grid{display:grid;grid-template-columns:1.15fr .9fr;gap:40px;align-items:center}
  .eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.18em;color:var(--blue2);opacity:.9}
  .show-text h2{font-size:clamp(22px,2.6vw,27px);line-height:1.25;letter-spacing:-.02em;margin:8px 0 12px}
  .show-text .desc{color:var(--muted);font-size:14px;line-height:1.65;margin-bottom:14px}
  .checks{list-style:none}.checks li{font-size:14px;margin:6px 0;padding-left:22px;position:relative}
  .checks li::before{content:'✔';position:absolute;left:0;color:var(--blue);font-size:12px;top:1px}
  .fmts{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:16px;font-size:12px}
  .fmts-lbl{color:var(--muted);margin-right:2px}
  .fmt{font-family:var(--mono);font-size:11px;padding:2px 8px;border:1px solid var(--border);border-radius:999px;background:color-mix(in oklab,var(--card) 70%,transparent);color:var(--blue2);transition:border-color .18s ease}
  .fmt:hover{border-color:var(--border-strong)}
  /* LAPTOP MOCKUP — same size everywhere, different angles per row */
  .laptop{--tilt:0deg;--yaw:0deg;--base-angle:46deg;width:100%;max-width:540px;margin:0 auto;filter:drop-shadow(0 26px 36px rgba(0,0,0,.45));transform:rotate(var(--tilt)) perspective(1500px) rotateY(var(--yaw));transition:transform .35s ease}
  .laptop-screen{position:relative;border:11px solid #1a1f28;border-bottom-width:7px;border-radius:16px 16px 4px 4px;background:#0f1115;overflow:hidden;box-shadow:inset 0 0 0 1px #323c4c}
  .laptop-screen::before{content:'';position:absolute;top:0;left:50%;translate:-50% 0;width:52px;height:7px;border-radius:0 0 7px 7px;background:#232a35;z-index:2}
  .laptop-screen img{display:block;width:100%;height:auto}
  .laptop-base{position:relative;height:15px;margin:0 -2.2%;border-radius:0 0 14px 14px;background:linear-gradient(180deg,#323c4c,#1c212b 70%,#161a21);transform:perspective(900px) rotateX(var(--base-angle));transform-origin:top center;transition:transform .35s ease}
  .laptop-base::before{content:'';position:absolute;top:0;left:50%;translate:-50% 0;width:18%;height:6px;border-radius:0 0 8px 8px;background:#0f1115}
  .laptop-base::after{content:'';position:absolute;left:6%;right:6%;bottom:-10px;height:14px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in oklab,var(--blue) 22%,transparent),transparent);filter:blur(6px)}
  /* PAGES GALLERY (pinned scrollytelling; vertical list fallback) */
  .gallery{position:relative;border-bottom:1px solid var(--border)}
  .gallery::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,color-mix(in oklab,var(--card) 30%,transparent),transparent 36%)}
  .gallery-head{padding:64px 22px 34px;text-align:center}
  .gallery-head h2{font-size:clamp(22px,2.6vw,28px);letter-spacing:-.02em}
  .gallery-head .sub{margin-bottom:0}
  .gallery-track{position:relative}
  .gallery-stage{position:relative}
  .stage-grid{display:grid}
  .slide{display:grid;gap:22px;padding:30px 0;border-top:1px solid var(--border)}
  .slide:first-child{border-top:0;padding-top:10px}
  .page-media{min-width:0}
  .page-media .laptop{max-width:640px}
  .stage-rail,.stage-foot{display:none}
  .sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .page-icon{width:46px;height:46px;border:1px solid var(--border);border-radius:13px;display:grid;place-items:center;color:var(--blue);background:color-mix(in oklab,var(--blue) 9%,transparent);margin-bottom:14px;transition:border-color .2s ease,box-shadow .2s ease}
  .slide:hover .page-icon{border-color:var(--border-strong);box-shadow:0 0 22px color-mix(in oklab,var(--blue) 20%,transparent)}
  @media(min-width:901px){
    .slide{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:46px;align-items:center;padding:36px 0}
    .slide:nth-child(even) .page-media{order:2}
  }
  @media(max-width:900px) and (prefers-reduced-motion:no-preference){
    @supports (animation-timeline: view()){
      .slide{animation:fadeUp linear both;animation-timeline:view();animation-range:entry 8% cover 30%}
    }
  }
  /* Pinned mode: html.scrolly is set before first paint when the viewport supports it */
  @media(min-width:901px) and (prefers-reduced-motion:no-preference){
    html.scrolly .gallery-head{padding-bottom:24px}
    html.scrolly .gallery-track{height:900svh}
    html.scrolly .gallery-stage{position:sticky;top:0;height:100svh;overflow:hidden}
    html.scrolly .gallery-stage::before{content:'';position:absolute;inset:0;background:radial-gradient(760px 440px at 24% 44%,color-mix(in oklab,var(--blue) 9%,transparent),transparent 70%);pointer-events:none}
    html.scrolly .gallery-stage::after{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(600px 340px at 76% 62%,color-mix(in oklab,var(--violet) 6%,transparent),transparent 72%);pointer-events:none}
    html.scrolly .stage-inner{position:relative;max-width:1440px;height:100%;padding-top:78px;padding-bottom:66px}
    html.scrolly .stage-grid{display:block;position:relative;height:100%}
    html.scrolly .slide{position:absolute;inset:0;grid-template-columns:minmax(0,1.45fr) minmax(0,.73fr);gap:54px;align-items:center;padding:0;border:0;perspective:1400px;opacity:0;visibility:hidden;pointer-events:none}
    html.scrolly .slide:nth-child(even) .page-media{order:0}
    html.scrolly .slide:nth-child(1){z-index:9}
    html.scrolly .slide:nth-child(2){z-index:8}
    html.scrolly .slide:nth-child(3){z-index:7}
    html.scrolly .slide:nth-child(4){z-index:6}
    html.scrolly .slide:nth-child(5){z-index:5}
    html.scrolly .slide:nth-child(6){z-index:4}
    html.scrolly .slide:nth-child(7){z-index:3}
    html.scrolly .slide:nth-child(8){z-index:2}
    html.scrolly .slide:nth-child(9){z-index:1}
    html.scrolly .page-media .laptop{max-width:min(920px,88svh);filter:none;transform:none}
    html.scrolly .page-media .laptop-screen{box-shadow:inset 0 0 0 1px #323c4c,0 24px 34px rgba(0,0,0,.5)}
    html.scrolly .page-media,html.scrolly .page-text{backface-visibility:hidden}
    html.scrolly .slide.is-active{opacity:1;visibility:visible;pointer-events:auto}
    html.scrolly .stage-rail{display:grid;position:absolute;top:50%;right:0;translate:0 -50%;gap:14px;z-index:6}
    html.scrolly .stage-rail::before{content:'';position:absolute;left:50%;top:7px;bottom:7px;width:2px;translate:-50% 0;background:color-mix(in oklab,var(--border) 80%,transparent);border-radius:2px}
    html.scrolly .stage-rail::after{content:'';position:absolute;left:50%;top:7px;width:2px;height:var(--rail-fill,0);translate:-50% 0;background:linear-gradient(180deg,var(--blue2),var(--blue));border-radius:2px}
    html.scrolly .stage-rail button{position:relative;z-index:1;display:grid;place-items:center;width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer}
    html.scrolly .stage-rail button::before{content:'';width:8px;height:8px;border-radius:50%;border:1.5px solid var(--border-strong);background:var(--bg);transition:background .3s ease,border-color .3s ease,scale .45s cubic-bezier(.34,1.56,.64,1),box-shadow .45s ease}
    html.scrolly .stage-rail button:hover::before{border-color:var(--blue)}
    html.scrolly .stage-rail button.is-passed::before{background:color-mix(in oklab,var(--blue) 55%,var(--bg));border-color:color-mix(in oklab,var(--blue) 60%,transparent)}
    html.scrolly .stage-rail button.is-active::before{background:var(--blue);border-color:var(--blue);scale:1.35;box-shadow:0 0 0 5px color-mix(in oklab,var(--blue) 16%,transparent)}
    html.scrolly .stage-foot{display:flex;position:absolute;left:22px;right:22px;bottom:16px;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}
    html.scrolly .stage-count{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.08em}
    html.scrolly .stage-count [data-stage-current]{color:var(--blue2);font-weight:600}
    html.scrolly .stage-hint{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.16em;text-transform:uppercase;opacity:.85;transition:opacity .35s ease}
    html.scrolly .stage-hint.is-hidden{opacity:0}
    html.scrolly .stage-hint::after{content:'↓';display:inline-block;margin-left:8px;animation:hintBob 1.9s ease-in-out infinite}
    html.scrolly.scrolly-js .slide{transition:opacity .7s cubic-bezier(.22,.61,.36,1),visibility 0s .7s}
    html.scrolly.scrolly-js .slide.is-active{transition:opacity .7s cubic-bezier(.22,.61,.36,1),visibility 0s}
    html.scrolly.scrolly-js .page-media{transition:transform .9s cubic-bezier(.22,.61,.36,1)}
    html.scrolly.scrolly-js .slide .laptop-screen img{transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
    html.scrolly.scrolly-js .page-text > *{transition:transform .8s cubic-bezier(.22,.61,.36,1)}
    html.scrolly.scrolly-js .slide:not(.is-active) .page-media{transform:translate3d(-54px,14px,0) rotateY(10deg) rotateX(3.5deg)}
    html.scrolly.scrolly-js .slide:not(.is-active) .laptop-screen img{transform:scale(1.055)}
    html.scrolly.scrolly-js .slide:not(.is-active) .page-icon{transform:translate3d(-18px,0,0) rotateY(12deg)}
    html.scrolly.scrolly-js .slide:not(.is-active) h3{transform:translate3d(0,20px,0)}
    html.scrolly.scrolly-js .slide:not(.is-active) .page-text p{transform:translate3d(0,24px,0)}
    html.scrolly.scrolly-js .slide:not(.is-active) .page-points{transform:translate3d(0,28px,0)}
    html.scrolly.scrolly-js .slide.is-active .page-icon{transition-delay:.05s}
    html.scrolly.scrolly-js .slide.is-active h3{transition-delay:.11s}
    html.scrolly.scrolly-js .slide.is-active .page-text p{transition-delay:.18s}
    html.scrolly.scrolly-js .slide.is-active .page-points{transition-delay:.25s}
  }
  @supports (animation-timeline: --gallery){
    @media(min-width:901px) and (prefers-reduced-motion:no-preference){
      html.scrolly.scrolly-native .gallery-track{view-timeline-name:--gallery;view-timeline-axis:block}
      html.scrolly.scrolly-native .gallery-stage::before{animation:stageGlowIn cubic-bezier(.4,0,.2,1) both;animation-timeline:--gallery;animation-range:9.2% 90%}
      html.scrolly.scrolly-native .gallery-stage::after{animation:stageGlowOut cubic-bezier(.4,0,.2,1) both;animation-timeline:--gallery;animation-range:9.2% 90%}
      html.scrolly.scrolly-native .slide{visibility:visible;animation:panelIn linear both;animation-timeline:--gallery}
      html.scrolly.scrolly-native .slide .page-media{animation:mediaIn linear both;animation-timeline:--gallery}
      html.scrolly.scrolly-native .slide .laptop-screen img{animation:shotIn linear both;animation-timeline:--gallery}
      html.scrolly.scrolly-native .slide .page-icon{animation:iconIn linear both;animation-timeline:--gallery}
      html.scrolly.scrolly-native .slide h3{animation:titleIn linear both;animation-timeline:--gallery}
      html.scrolly.scrolly-native .slide .page-text p{animation:paraIn linear both;animation-timeline:--gallery}
      html.scrolly.scrolly-native .slide .page-points{animation:listIn linear both;animation-timeline:--gallery}
      html.scrolly.scrolly-native .slide:nth-child(1),html.scrolly.scrolly-native .slide:nth-child(1) :is(.page-media,.laptop-screen img,.page-icon,h3,.page-text p,.page-points){animation-range:9.6% 19.289%}
      html.scrolly.scrolly-native .slide:nth-child(2),html.scrolly.scrolly-native .slide:nth-child(2) :is(.page-media,.laptop-screen img,.page-icon,h3,.page-text p,.page-points){animation-range:18.489% 28.178%}
      html.scrolly.scrolly-native .slide:nth-child(3),html.scrolly.scrolly-native .slide:nth-child(3) :is(.page-media,.laptop-screen img,.page-icon,h3,.page-text p,.page-points){animation-range:27.378% 37.067%}
      html.scrolly.scrolly-native .slide:nth-child(4),html.scrolly.scrolly-native .slide:nth-child(4) :is(.page-media,.laptop-screen img,.page-icon,h3,.page-text p,.page-points){animation-range:36.267% 45.956%}
      html.scrolly.scrolly-native .slide:nth-child(5),html.scrolly.scrolly-native .slide:nth-child(5) :is(.page-media,.laptop-screen img,.page-icon,h3,.page-text p,.page-points){animation-range:45.156% 54.844%}
      html.scrolly.scrolly-native .slide:nth-child(6),html.scrolly.scrolly-native .slide:nth-child(6) :is(.page-media,.laptop-screen img,.page-icon,h3,.page-text p,.page-points){animation-range:54.044% 63.733%}
      html.scrolly.scrolly-native .slide:nth-child(7),html.scrolly.scrolly-native .slide:nth-child(7) :is(.page-media,.laptop-screen img,.page-icon,h3,.page-text p,.page-points){animation-range:62.933% 72.622%}
      html.scrolly.scrolly-native .slide:nth-child(8),html.scrolly.scrolly-native .slide:nth-child(8) :is(.page-media,.laptop-screen img,.page-icon,h3,.page-text p,.page-points){animation-range:71.822% 81.511%}
      html.scrolly.scrolly-native .slide:nth-child(9),html.scrolly.scrolly-native .slide:nth-child(9) :is(.page-media,.laptop-screen img,.page-icon,h3,.page-text p,.page-points){animation-range:80.711% 100%}
      html.scrolly.scrolly-native .slide:nth-child(9){animation-name:panelHold}
      html.scrolly.scrolly-native .slide:nth-child(9) .page-media{animation-name:mediaHold}
      html.scrolly.scrolly-native .slide:nth-child(9) .laptop-screen img{animation-name:shotHold}
      html.scrolly.scrolly-native .slide:nth-child(9) .page-icon{animation-name:iconHold}
      html.scrolly.scrolly-native .slide:nth-child(9) h3{animation-name:titleHold}
      html.scrolly.scrolly-native .slide:nth-child(9) .page-text p{animation-name:paraHold}
      html.scrolly.scrolly-native .slide:nth-child(9) .page-points{animation-name:listHold}
      html.scrolly.scrolly-native .stage-rail::after{animation:railFill linear both;animation-timeline:--gallery;animation-range:9.2% 90%}
      html.scrolly.scrolly-native .stage-hint{animation:hintOut cubic-bezier(.4,0,.2,1) both;animation-timeline:--gallery;animation-range:10% 15%}
    }
  }
  @keyframes panelIn{0%{opacity:0;animation-timing-function:cubic-bezier(.4,0,.2,1)}28%{opacity:1}72%{opacity:1;animation-timing-function:cubic-bezier(.4,0,.2,1)}100%{opacity:0}}
  @keyframes panelHold{0%{opacity:0;animation-timing-function:cubic-bezier(.4,0,.2,1)}14%{opacity:1}100%{opacity:1}}
  @keyframes mediaIn{0%{transform:translate3d(-54px,14px,0) rotateY(10deg) rotateX(3.5deg);animation-timing-function:cubic-bezier(.2,.65,.3,1)}28%{transform:translate3d(0,0,0) rotateY(0deg) rotateX(0deg)}72%{transform:translate3d(0,0,0) rotateY(0deg) rotateX(0deg)}100%{transform:translate3d(30px,-10px,0) rotateY(-10deg) rotateX(-3deg)}}
  @keyframes mediaHold{0%{transform:translate3d(-54px,14px,0) rotateY(10deg) rotateX(3.5deg);animation-timing-function:cubic-bezier(.2,.65,.3,1)}14%{transform:translate3d(0,0,0) rotateY(0deg) rotateX(0deg)}100%{transform:translate3d(0,0,0) rotateY(0deg) rotateX(0deg)}}
  @keyframes shotIn{0%{transform:scale(1.055)}42%{transform:scale(1)}78%{transform:scale(1)}100%{transform:scale(1.05)}}
  @keyframes shotHold{0%{transform:scale(1.055)}21%{transform:scale(1)}100%{transform:scale(1)}}
  @keyframes iconIn{0%{transform:translate3d(-18px,0,0) rotateY(12deg);animation-timing-function:cubic-bezier(.2,.65,.3,1)}16%{transform:none}100%{transform:none}}
  @keyframes iconHold{0%{transform:translate3d(-18px,0,0) rotateY(12deg);animation-timing-function:cubic-bezier(.2,.65,.3,1)}8%{transform:none}100%{transform:none}}
  @keyframes titleIn{0%{transform:translate3d(0,20px,0)}4%{transform:translate3d(0,20px,0);animation-timing-function:cubic-bezier(.2,.65,.3,1)}26%{transform:none}100%{transform:none}}
  @keyframes titleHold{0%{transform:translate3d(0,20px,0)}2%{transform:translate3d(0,20px,0);animation-timing-function:cubic-bezier(.2,.65,.3,1)}13%{transform:none}100%{transform:none}}
  @keyframes paraIn{0%{transform:translate3d(0,24px,0)}10%{transform:translate3d(0,24px,0);animation-timing-function:cubic-bezier(.2,.65,.3,1)}34%{transform:none}100%{transform:none}}
  @keyframes paraHold{0%{transform:translate3d(0,24px,0)}5%{transform:translate3d(0,24px,0);animation-timing-function:cubic-bezier(.2,.65,.3,1)}17%{transform:none}100%{transform:none}}
  @keyframes listIn{0%{transform:translate3d(0,28px,0)}16%{transform:translate3d(0,28px,0);animation-timing-function:cubic-bezier(.2,.65,.3,1)}42%{transform:none}100%{transform:none}}
  @keyframes listHold{0%{transform:translate3d(0,28px,0)}8%{transform:translate3d(0,28px,0);animation-timing-function:cubic-bezier(.2,.65,.3,1)}21%{transform:none}100%{transform:none}}
  @keyframes railFill{from{height:0}to{height:100%}}
  @keyframes hintOut{from{opacity:1}to{opacity:0}}
  @keyframes hintBob{50%{transform:translateY(4px)}}
  @keyframes stageGlowIn{0%{opacity:0;transform:translate3d(-70px,20px,0) scale(1)}18%{opacity:1}70%{opacity:1;transform:translate3d(46px,-18px,0) scale(1.07)}100%{opacity:0;transform:translate3d(80px,-34px,0) scale(1.12)}}
  @keyframes stageGlowOut{0%{opacity:0;transform:translate3d(64px,-26px,0) scale(1.06)}22%{opacity:1}72%{opacity:1;transform:translate3d(-42px,20px,0) scale(1)}100%{opacity:0;transform:translate3d(-78px,30px,0) scale(1.05)}}
  .page-text{min-width:0}
  .page-icon svg{width:22px;height:22px;display:block}
  .page-text h3{font-size:clamp(18px,2vw,22px);letter-spacing:-.01em;margin-bottom:8px}
  .page-text p{color:var(--muted);font-size:14px;line-height:1.65;margin-bottom:12px}
  .page-points{list-style:none;display:grid;gap:6px}
  .page-points li{font-size:13px;padding-left:24px;position:relative}
  .page-points li::before{content:'';position:absolute;left:2px;top:6px;width:12px;height:7px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg);border-radius:1px}
  /* UNDER THE HOOD art */
  .show-art{position:relative;display:grid;place-items:center}
  .show-art svg{max-width:420px;width:100%;height:auto;filter:drop-shadow(0 24px 34px rgba(0,0,0,.4))}
  /* FOOTER */
  footer{padding:26px 0 14px;background:linear-gradient(180deg,color-mix(in oklab,var(--card) 22%,transparent),transparent 70%)}
  .foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
  .foot-top.center{flex-direction:column;align-items:center;text-align:center;gap:12px}
  .foot-top.center .logo{justify-content:center}
  .fres{display:flex;gap:8px 20px;flex-wrap:wrap;justify-content:center}
  .fres a{color:var(--muted);text-decoration:none;font-size:13px;transition:color .18s ease}
  .fres a:hover{color:var(--blue)}
  .foot-bot{display:flex;justify-content:space-between;margin-top:18px;font-size:12px;color:var(--muted);flex-wrap:wrap;gap:8px}
  /* MOTION */
  .rv{opacity:0;translate:0 14px;transition:opacity .5s ease,translate .5s ease}
  .rv.vis{opacity:1;translate:0 0}
  @keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes navSolid{
    from{background:color-mix(in oklab,var(--bg) 72%,transparent);box-shadow:0 0 0 0 rgba(0,0,0,0)}
    to{background:color-mix(in oklab,var(--bg) 90%,transparent);box-shadow:0 12px 32px rgba(0,0,0,.4)}
  }
  @media(prefers-reduced-motion:no-preference){
    @supports (animation-timeline: view()){
      .features .f,.show-text,.show-art{animation:fadeUp linear both;animation-timeline:view();animation-range:entry 8% cover 30%}
      .features .f:nth-child(2n){animation-range:entry 4% cover 30%}
      .features .f:nth-child(4n){animation-range:entry 0% cover 30%}
    }
    @supports (animation-timeline: scroll()){
      .nav{animation:navSolid linear both;animation-timeline:scroll(root);animation-range:0 140px}
    }
    .hero-left,.hero-right{opacity:1;translate:0 0;transition:opacity .55s ease,translate .55s ease}
    @starting-style{
      .hero-left,.hero-right{opacity:0;translate:0 10px}
    }
  }
  @media(prefers-reduced-motion:reduce){
    .rv{opacity:1;translate:0 0;transition:none}
    .hero::after{animation:none}
    .btn,.f,.laptop,.page-icon{transition:none}
    .f::before{transition:none}
  }
  /* VIEW TRANSITIONS */
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
  /* RESPONSIVE */
  @media(max-width:1024px){
    .grid8{grid-template-columns:repeat(2,1fr)}
  }
  @media(max-width:900px){
    .hero{padding:44px 0 40px}
    .hero-grid,.show-grid{grid-template-columns:1fr}
    .big-banner{height:44px}
    .features,.showcase{padding:56px 0}
    .gallery-head{padding-top:56px}
    .slide{padding:26px 0}
    .laptop{transform:none;max-width:560px}
  }
  @media(max-width:560px){
    .container{padding:0 16px}
    .grid8{grid-template-columns:1fr}
    .hero h1{font-size:25px;max-width:none}
    .btns .btn{flex:1 1 100%;justify-content:center}
    .btns .btn.ghost{flex:1 1 auto}
    .grid8:has(.f:hover) .f:not(:hover){opacity:1}
    .page-icon{width:40px;height:40px;border-radius:11px}
  }
}