/* =========================================================
   1Coder — single-file build
   Fonts: Sahel (embedded), RTL, light/dark
   ========================================================= */

@font-face{font-family:Sahel;src:url(../fonts/sahel-300.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Sahel;src:url(../fonts/sahel-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Sahel;src:url(../fonts/sahel-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Sahel;src:url(../fonts/sahel-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Sahel;src:url(../fonts/sahel-900.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body,h1,h2,h3,h4,p,ul,ol,li,figure,blockquote,form{margin:0;padding:0}
ul,ol{list-style:none}
img,svg{display:block;max-width:100%}
svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0}
a{color:inherit;text-decoration:none}

/* ---------- global motion baseline ----------
   every interactive surface eases the same way unless it opts out below */
a,button,input,select,textarea,
.card,.card-ico,.case,.case-shot img,.case-veil,.offer,.offer-ico,.st,.tag,.chip,
.link-row,.ac,.ac-btn,.field input,.field textarea,.field select,.thumb,.tst,.foot a{
  transition-property:color,background-color,border-color,box-shadow,transform,opacity,filter;
  transition-duration:var(--t);
  transition-timing-function:var(--ease)
}

/* ---------- tokens ---------- */
:root{
  --bg:#f3f4f7;
  --surface:#ffffff;
  --subtle:#e7eaf0;
  --fg:#10141c;
  --muted:#5c6578;
  --faint:#8a93a5;
  --line:color-mix(in oklab,var(--fg) 10%,transparent);
  --line-2:color-mix(in oklab,var(--fg) 18%,transparent);
  --accent:#2165ed;
  --accent-ink:#f8fafc;
  --accent-soft:color-mix(in oklab,var(--accent) 12%,transparent);
  --success:#15803d;
  --success-soft:color-mix(in oklab,var(--success) 12%,transparent);
  --danger:#dc2626;
  --danger-soft:color-mix(in oklab,var(--danger) 12%,transparent);
  --overlay:color-mix(in oklab,#0b0d12 46%,transparent);
  --shadow:0px 0px 0px 1px rgba(16,20,28,.06),0px 1px 2px -1px rgba(16,20,28,.06),0px 2px 4px 0px rgba(16,20,28,.04);
  --shadow-lift:0px 0px 0px 1px rgba(16,20,28,.1),0px 12px 28px -12px rgba(16,20,28,.16);
  --grid-line:color-mix(in oklab,var(--fg) 6%,transparent);
  /* the inverted band (services / testimonials) */
  --band-gold:#dbab63;
  --band-gold-2:#c79445;
  --ease:cubic-bezier(.22,.72,.16,1);
  --ease-io:cubic-bezier(.45,0,.55,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.28s; --t:.5s; --t-slow:.9s;
  color-scheme:light;
}
.dark{
  --bg:#07080c;
  --surface:#11141c;
  --subtle:#171b24;
  --fg:#eef1f6;
  --muted:#8b93a7;
  --faint:#6b7386;
  --line:color-mix(in oklab,var(--fg) 10%,transparent);
  --line-2:color-mix(in oklab,var(--fg) 18%,transparent);
  --accent:#3d7cff;
  --accent-ink:#07080c;
  --accent-soft:color-mix(in oklab,var(--accent) 16%,transparent);
  --success:#34d399;
  --success-soft:color-mix(in oklab,var(--success) 14%,transparent);
  --danger:#f87171;
  --danger-soft:color-mix(in oklab,var(--danger) 14%,transparent);
  --overlay:color-mix(in oklab,#000 62%,transparent);
  --shadow:0 0 0 1px rgba(255,255,255,.08);
  --shadow-lift:0 0 0 1px rgba(255,255,255,.14),0 22px 44px -24px rgba(0,0,0,.7);
  --grid-line:color-mix(in oklab,var(--fg) 7%,transparent);
  --band-gold:#a3712a;
  --band-gold-2:#8e6021;
  color-scheme:dark;
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem}
body{
  background:var(--bg);color:var(--fg);
  font-family:Sahel,"Segoe UI",system-ui,sans-serif;
  font-size:16px;line-height:1.65;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{text-wrap:balance;line-height:1.25;font-weight:600;letter-spacing:-.01em}
p{text-wrap:pretty}
button:not(:disabled),[role=button]{cursor:pointer}
::selection{background:var(--accent-soft);color:var(--fg)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;inset-inline-start:50%;top:-100px;z-index:120;transform:translateX(50%);background:var(--surface);box-shadow:var(--shadow);border-radius:10px;padding:10px 16px;font-size:14px;transition:top var(--t) var(--ease)}
.skip:focus{top:12px}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:20px}
.wrap-sm{max-width:820px}
.section{padding-block:clamp(72px,8vw,120px)}
.section-anchor{scroll-margin-top:96px}
.disp{font-size:clamp(2.4rem,1.4rem + 4vw,4.6rem);line-height:1.12;font-weight:600;letter-spacing:-.025em}
.title{font-size:clamp(1.5rem,1.15rem+1.5vw,2.25rem);letter-spacing:-.02em}
.lead{font-size:clamp(1rem,.96rem+.2vw,1.09rem);color:var(--muted);line-height:1.8}
.muted{color:var(--muted)}
.faint{color:var(--faint)}

/* section heading */
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.kicker::after{content:"";display:block;width:26px;height:1px;background:var(--accent)}
.head{max-width:56ch}
.head .title{margin-top:12px}
.head-c{margin-inline:auto;text-align:center}
.head-c .kicker::after{background:var(--accent)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;font-size:14px;font-weight:600;white-space:nowrap;transition:background-color var(--t) var(--ease-out),color var(--t) var(--ease-out),border-color var(--t) var(--ease-out),box-shadow var(--t) var(--ease-out),opacity var(--t) var(--ease-out),transform .18s var(--ease-out)}
.btn:active{transform:scale(.96);transition-duration:.12s}
.btn svg{width:16px;height:16px;flex:none}
.btn-solid{background:var(--fg);color:var(--bg);box-shadow:var(--shadow)}
.btn-solid:hover{opacity:.9;box-shadow:var(--shadow-lift)}
.btn-soft{background:var(--surface);color:var(--fg);box-shadow:var(--shadow)}
.btn-soft:hover{box-shadow:var(--shadow-lift)}
.btn-ghost{color:var(--muted)}
.btn-ghost:hover{color:var(--fg);background:var(--subtle)}
.btn-lg{min-height:48px;padding:0 24px;font-size:15px}
.btn-ico{width:44px;min-height:44px;padding:0;border-radius:999px}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;pointer-events:none}

/* ---------- global chrome ---------- */
.noise{position:fixed;inset:0;z-index:95;pointer-events:none;opacity:.032;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.progress{position:fixed;inset-inline:0;top:0;height:2px;z-index:90;pointer-events:none}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),color-mix(in oklab,var(--accent) 45%,transparent));transform:scaleX(0);transform-origin:right}
html[dir=ltr] .progress i{transform-origin:left}

/* intro / preloader — v7 */
.intro{position:fixed;inset:0;z-index:110;display:grid;place-items:center;overflow:hidden;background:radial-gradient(120% 85% at 50% -10%,color-mix(in oklab,var(--accent) 12%,transparent),transparent 62%),var(--bg);clip-path:inset(0 0 0 0);transition:clip-path .9s cubic-bezier(.76,0,.24,1)}
.intro::before{content:"";position:absolute;inset:-10%;pointer-events:none;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(56% 56% at 50% 50%,#000,transparent 78%);mask-image:radial-gradient(56% 56% at 50% 50%,#000,transparent 78%);animation:introGrid 2.6s var(--ease) both}
.intro.out{clip-path:inset(0 0 100% 0);pointer-events:none}
.intro.out .intro-in{opacity:0;transform:translateY(-16px) scale(.985);transition:opacity .4s linear,transform .6s var(--ease)}
.intro-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.intro-mark{position:relative;overflow:hidden;display:grid;place-items:center;width:66px;height:66px;border-radius:19px;background:var(--fg);color:var(--bg);font-size:20px;font-weight:700;letter-spacing:-.02em;box-shadow:0 22px 48px -20px color-mix(in oklab,var(--fg) 60%,transparent);animation:introMark .95s cubic-bezier(.2,1,.24,1) both}
.intro-mark::after{content:"";position:absolute;top:-60%;bottom:-60%;right:-45%;width:38%;background:linear-gradient(100deg,transparent,color-mix(in oklab,var(--bg) 72%,transparent),transparent);transform:translate3d(0,0,0) skewX(-16deg);animation:introSheen 1.35s .5s cubic-bezier(.4,0,.28,1) 2 both}
.intro-word{display:flex;gap:.02em;margin-top:16px;font-size:12px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--faint)}
.intro-word i{display:block;font-style:normal;animation:introUp .62s cubic-bezier(.2,1,.24,1) both}
.intro-word i:nth-child(1){animation-delay:.30s}
.intro-word i:nth-child(2){animation-delay:.36s}
.intro-word i:nth-child(3){animation-delay:.42s}
.intro-word i:nth-child(4){animation-delay:.48s}
.intro-word i:nth-child(5){animation-delay:.54s}
.intro-word i:nth-child(6){animation-delay:.60s}
.intro-bar{position:relative;overflow:hidden;width:138px;height:3px;margin-top:22px;border-radius:99px;background:color-mix(in oklab,var(--fg) 12%,transparent)}
.intro-bar u{position:absolute;inset:0 0 0 auto;width:100%;border-radius:inherit;transform:scaleX(0);transform-origin:right center;background:linear-gradient(90deg,color-mix(in oklab,var(--accent) 55%,var(--band-gold)),var(--accent));animation:introFill 1.95s .15s cubic-bezier(.46,.03,.24,1) both}
.intro-pct{margin-top:11px;font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--faint);font-variant-numeric:tabular-nums;animation:introUp .5s .34s var(--ease) both}
@keyframes introGrid{0%{opacity:0;transform:scale(1.07)}45%{opacity:.5}100%{opacity:.32;transform:scale(1)}}
@keyframes introMark{0%{opacity:0;transform:translateY(16px) scale(.84);filter:blur(7px)}55%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes introSheen{0%{transform:translate3d(0,0,0) skewX(-16deg);opacity:0}12%{opacity:1}100%{transform:translate3d(-380%,0,0) skewX(-16deg);opacity:0}}
@keyframes introUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes introFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* rail */
.rail{position:fixed;right:20px;left:auto;top:50%;transform:translateY(-50%);z-index:70;display:none}
@media (min-width:1280px){.rail{display:block}}
.rail-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 10px;border-radius:999px;background:color-mix(in oklab,var(--surface) 88%,transparent);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(16px)}
.rail-line{position:absolute;top:24px;bottom:24px;left:50%;width:2px;margin-left:-1px;border-radius:99px;background:var(--line-2)}
.rail a{position:relative;display:grid;place-items:center;width:26px;height:26px}
.rail-dot{position:relative;z-index:1;width:8px;height:8px;border-radius:99px;background:color-mix(in oklab,var(--fg) 42%,transparent);box-shadow:0 0 0 3px var(--surface);transition:all var(--t) var(--ease)}
.rail a:hover .rail-dot{background:var(--fg);transform:scale(1.25)}
.rail a[aria-current] .rail-dot{height:20px;background:var(--accent);box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--accent-soft)}
.rail-tip{position:absolute;right:100%;left:auto;margin-right:14px;padding:5px 10px;border-radius:8px;background:var(--surface);box-shadow:var(--shadow);font-size:12px;white-space:nowrap;opacity:0;visibility:hidden;transform:translateX(6px);transition:all var(--t-fast) var(--ease)}
html[dir=rtl] .rail-tip{transform:translateX(-6px)}
.rail a:hover .rail-tip,.rail a:focus-visible .rail-tip{opacity:1;visibility:visible;transform:none}

/* cursor */
.cur-dot,.cur-ring,.cur-glow{position:fixed;top:0;left:0;right:auto;border-radius:999px;pointer-events:none;will-change:transform}
/* the dot + ring must stay above every overlay (nav 80, sheet 110, modal 115, toast 120) */
.cur-dot{z-index:2147483000;width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--accent)}
.cur-ring{z-index:2147483000;width:36px;height:36px;margin:-18px 0 0 -18px;border:1px solid color-mix(in oklab,var(--accent) 80%,transparent);transition:opacity 150ms var(--ease-out)}
.cur-glow{z-index:0;width:760px;height:760px;margin:-380px 0 0 -380px;background:radial-gradient(circle at center,color-mix(in oklab,var(--accent) 58%,transparent) 0%,color-mix(in oklab,var(--accent) 24%,transparent) 32%,transparent 72%);mix-blend-mode:multiply;opacity:.5;filter:blur(6px)}
.dark .cur-glow{background:radial-gradient(circle at center,color-mix(in oklab,var(--accent) 34%,transparent) 0%,color-mix(in oklab,var(--accent) 16%,transparent) 28%,transparent 68%);mix-blend-mode:screen;opacity:.9}
@media (pointer:fine){html.cursor-on,html.cursor-on *{cursor:none!important}html.cursor-on input,html.cursor-on textarea,html.cursor-on select{cursor:text!important}}

/* ---------- navbar ---------- */
.nav-outer{position:fixed;inset-inline:0;top:12px;z-index:80;display:flex;justify-content:center;padding-inline:12px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;max-width:1120px;padding:7px 8px;border-radius:999px;border:1px solid transparent;background:color-mix(in oklab,var(--bg) 45%,transparent);backdrop-filter:blur(10px);transition:background-color var(--t) var(--ease),border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.nav.stuck{background:color-mix(in oklab,var(--bg) 85%,transparent);border-color:var(--line);box-shadow:var(--shadow);backdrop-filter:blur(18px)}
.brand{display:flex;align-items:center;gap:10px;padding-inline-end:6px}
.mark{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--fg);color:var(--bg);font-size:13.5px;font-weight:700;letter-spacing:-.02em;flex:none}
.brand-name{font-size:15px;font-weight:600;letter-spacing:-.01em}
.nav-links{position:relative;display:none;align-items:center;gap:2px}
@media (min-width:1024px){.nav-links{display:flex}}
.nav-pill{position:absolute;top:0;bottom:0;left:0;right:auto;border-radius:999px;background:var(--subtle);opacity:0;transition:transform var(--t) var(--ease),width var(--t) var(--ease),opacity var(--t) var(--ease)}
.nav-links a{position:relative;z-index:1;padding:9px 14px;border-radius:999px;font-size:14px;color:var(--muted);transition:color var(--t-fast) var(--ease)}
.nav-links a:hover{color:var(--fg)}
.nav-links a[aria-current]{color:var(--fg)}
.nav-actions{display:flex;align-items:center;gap:4px}
.theme-btn{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:999px;color:var(--muted);transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.theme-btn:hover{background:var(--subtle);color:var(--fg)}
.theme-btn svg{position:absolute;width:18px;height:18px;transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),filter var(--t) var(--ease)}
.theme-btn .i-sun{opacity:0;transform:scale(.3);filter:blur(4px)}
.theme-btn .i-moon{opacity:1;transform:none;filter:none}
.dark .theme-btn .i-sun{opacity:1;transform:none;filter:none}
.dark .theme-btn .i-moon{opacity:0;transform:scale(.3);filter:blur(4px)}
.nav-cta{display:none}
@media (min-width:640px){.nav-cta{display:inline-flex}}
.burger{display:grid;place-items:center;width:42px;height:42px;border-radius:999px;color:var(--fg)}
@media (min-width:1024px){.burger{display:none}}
.burger svg{width:20px;height:20px}
.sheet{position:fixed;inset:0;z-index:75;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 32px;background:color-mix(in oklab,var(--bg) 94%,transparent);backdrop-filter:blur(20px);visibility:hidden;opacity:0;transition:opacity var(--t) var(--ease),visibility var(--t)}
.sheet.open{visibility:visible;opacity:1}
.sheet a{font-size:clamp(1.6rem,1.2rem+2vw,2.1rem);font-weight:600;letter-spacing:-.02em;transform:translateY(12px);opacity:0;transition:transform var(--t) var(--ease),opacity var(--t) var(--ease)}
.sheet.open a{transform:none;opacity:1}
.sheet .btn{margin-top:22px;max-width:280px}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(14px);filter:blur(4px);transition:opacity .55s var(--ease),transform .55s var(--ease),filter .55s var(--ease)}
.rv.in{opacity:1;transform:none;filter:none}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-start;min-height:100svh;padding-top:96px;overflow:hidden}
.hero>.wrap{max-width:1152px}
.grid-wash{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:radial-gradient(ellipse at center,#000 18%,transparent 72%);mask-image:radial-gradient(ellipse at center,#000 18%,transparent 72%)}
.hero-grid{display:grid;flex:1;gap:40px;align-items:center;padding-block:24px}
@media (min-width:1024px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:32px}}
.hero-copy>*{animation:rise .7s var(--ease) both}
.hero-copy>*:nth-child(1){animation-delay:.04s}
.hero-copy>*:nth-child(2){animation-delay:.12s}
.hero-copy>*:nth-child(3){animation-delay:.2s}
.hero-copy>*:nth-child(4){animation-delay:.28s}
.hero-copy>*:nth-child(5){animation-delay:.36s}
.hero-copy>*:nth-child(6){animation-delay:.44s}
.hero-copy>*:nth-child(7){animation-delay:.52s}
.badge{display:inline-flex;align-items:center;gap:8px;padding:4px 12px;border-radius:999px;background:var(--success-soft);color:var(--success);font-size:12px;font-weight:500}
.dot-live{width:6px;height:6px;border-radius:99px;background:currentColor;animation:pulse 1.9s var(--ease-io) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.hero h1{margin-top:24px}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln>span{display:block;animation:rise .8s var(--ease) both}
.hero-accent{color:var(--accent)}
.type-wrap{display:inline-flex;align-items:center;min-height:1.6em;font-weight:500;color:var(--fg)}
.caret{display:inline-block;width:2px;height:1.05em;margin-inline-start:4px;background:var(--accent);vertical-align:-.12em;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-stats{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:48px}
@media (min-width:640px){.hero-stats{gap:32px}}
.hero-stats .sep{width:1px;height:40px;background:var(--line)}
@media (max-width:640px){.hero-stats .sep{display:none}}
.stat-n{font-size:1.875rem;font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.stat-l{font-size:14px;color:var(--muted);line-height:1.25}
.avail{margin-top:24px;font-size:12px;color:var(--faint)}

/* workstation */
.work{position:relative;display:none;min-height:460px;perspective:1600px}
@media (min-width:1024px){.work{display:block}}
.work-scene{position:relative;width:100%;max-width:540px;margin-inline:auto;transform-style:preserve-3d;transform:rotateY(-10deg) rotateX(6deg);transition:transform var(--t) var(--ease-out)}
.browser{position:relative;z-index:2;border-radius:32px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
.browser-bar{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line)}
.tl{width:10px;height:10px;border-radius:99px}
.tl-r{background:color-mix(in oklab,var(--danger) 70%,transparent)}
.tl-y{background:color-mix(in oklab,var(--faint) 60%,transparent)}
.tl-g{background:color-mix(in oklab,var(--success) 70%,transparent)}
.browser-url{margin-inline-start:12px;padding:2px 12px;border-radius:999px;background:var(--subtle);font-size:11px;color:var(--muted)}
.browser-shot{position:relative;aspect-ratio:16/10;background:var(--subtle);overflow:hidden}
.browser-shot img{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);max-width:none;object-fit:cover;object-position:top}
.browser-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,color-mix(in oklab,var(--bg) 50%,transparent),transparent)}
.thumb{position:absolute;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);outline:1px solid color-mix(in oklab,var(--fg) 10%,transparent);outline-offset:-1px;pointer-events:none}
.thumb img{aspect-ratio:16/10;width:100%;object-fit:cover}
.thumb-a{top:40px;right:-24px;left:auto;width:176px;opacity:.7;animation:floaty 4.8s var(--ease-io) infinite}
.thumb-b{bottom:64px;left:-32px;right:auto;width:160px;opacity:.6;animation:floaty 5.4s var(--ease-io) 1.1s infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.chip-card{position:absolute;z-index:3;border-radius:24px;background:var(--surface);box-shadow:var(--shadow);padding:14px}
.chip-term{bottom:-28px;right:-12px;left:auto;width:240px}
.chip-stack{top:-20px;left:-12px;right:auto;padding:8px 12px}
.chip-k{font-size:11px;color:var(--muted)}
.chip-v{font-size:14px;font-weight:500;margin-top:2px}
.term{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:11px;line-height:1.625;color:var(--muted);direction:ltr;text-align:left}
.term span{display:block;opacity:0;animation:rise .45s var(--ease) forwards}
.term span.ok{color:var(--success)}
.mobile-shot{margin-top:40px;border-radius:32px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
@media (min-width:1024px){.mobile-shot{display:none}}
.mobile-shot img{aspect-ratio:16/10;width:100%;object-fit:cover;object-position:top}

/* scroll hint + marquee */
.hint{display:none;width:max-content;flex-direction:column;align-items:center;gap:8px;margin:16px auto;font-size:12px;color:var(--faint);transition:color var(--t) var(--ease-out)}
@media (min-width:1024px){.hint{display:flex}}
.hint:hover{color:var(--fg)}
.hint i{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:99px;border:1px solid var(--line);background:color-mix(in oklab,var(--surface) 70%,transparent);transition:border-color var(--t) var(--ease-out),transform var(--t) var(--ease-out)}
.hint:hover i{border-color:var(--accent);transform:translateY(2px)}
.hint svg{width:14px;height:14px;animation:bounce 1.8s var(--ease-io) infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.marquee{position:relative;overflow:hidden;border-block:1px solid var(--line);padding-block:16px;direction:ltr}
.marquee-track{display:flex;width:max-content;gap:40px;white-space:nowrap;padding-inline:24px;font-size:14px;color:var(--faint);animation:marq 36s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{display:flex;align-items:center;gap:40px}
.marquee-track b{width:4px;height:4px;border-radius:99px;background:color-mix(in oklab,var(--faint) 55%,transparent)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- about ---------- */
.about-grid{display:grid;gap:48px;align-items:center}
@media (min-width:1024px){.about-grid{grid-template-columns:5fr 7fr;gap:56px}}
.portrait{position:relative}
.portrait-in{position:relative;aspect-ratio:1;border-radius:20px;overflow:hidden;background:var(--subtle);box-shadow:var(--shadow)}
.portrait-in .grid-wash{z-index:0;opacity:.9;-webkit-mask-image:radial-gradient(circle at 50% 45%,#000 15%,transparent 72%);mask-image:radial-gradient(circle at 50% 45%,#000 15%,transparent 72%)}
.ring{position:absolute;color:color-mix(in oklab,var(--accent) 28%,transparent)}
.ring-a{inset:22px;animation:spin 30s linear infinite}
.ring-b{inset:46px;color:color-mix(in oklab,var(--fg) 22%,transparent);animation:spin 42s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.portrait-mono{position:absolute;inset:0;display:grid;place-items:center}
.portrait-mono span{font-size:clamp(4.5rem,3rem+7vw,8.5rem);font-weight:900;letter-spacing:-.04em;background:linear-gradient(135deg,var(--accent),color-mix(in oklab,var(--fg) 35%,transparent));-webkit-background-clip:text;background-clip:text;color:transparent}
.portrait-foot{position:absolute;inset-inline:0;bottom:0;padding:22px;background:linear-gradient(to top,var(--subtle),color-mix(in oklab,var(--subtle) 80%,transparent) 55%,transparent)}
.portrait-foot p:first-child{font-size:13px;color:var(--muted)}
.portrait-foot p:last-child{font-size:17px;font-weight:600;margin-top:2px}
.avail-card{position:absolute;bottom:-22px;inset-inline-start:-12px;display:none;align-items:center;gap:12px;max-width:270px;padding:13px 15px;border-radius:14px;background:var(--surface);box-shadow:var(--shadow-lift)}
@media (min-width:768px){.avail-card{display:flex}}
.avail-card i{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--success-soft);color:var(--success);flex:none}
.avail-card b{display:block;font-size:13.5px;font-weight:600}
.avail-card small{font-size:12px;color:var(--muted)}
.exp-grid{display:grid;gap:14px;margin-top:36px}
@media (min-width:640px){.exp-grid{grid-template-columns:1fr 1fr}}
.exp{border-radius:14px;background:var(--surface);box-shadow:var(--shadow);padding:16px 18px;border-inline-end:2px solid var(--accent);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.exp:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.exp p:nth-child(1){font-size:13px;font-weight:600;color:var(--accent)}
.exp p:nth-child(2){font-size:15.5px;font-weight:600;margin-top:4px}
.exp p:nth-child(3){font-size:13.5px;color:var(--muted);margin-top:2px}

/* ---------- skills ---------- */
.skills{background:var(--subtle)}
.skill-grid{display:grid;gap:16px;margin-top:44px}
@media (min-width:768px){.skill-grid{grid-template-columns:repeat(4,1fr)}.sk-hero{grid-column:span 2;grid-row:span 2}.sk-wide{grid-column:span 2}}
.card{position:relative;overflow:hidden;border-radius:18px;background:var(--bg);box-shadow:var(--shadow);padding:24px;height:100%;display:flex;flex-direction:column;justify-content:space-between;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.dark .card{background:var(--surface)}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity var(--t-slow) var(--ease);background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%),var(--accent-soft),transparent 70%)}
.card:hover::after{opacity:1}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.card h3{font-size:17.5px}
.card-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--accent-soft);color:var(--accent);flex:none;transition:transform var(--t) var(--ease)}
.card:hover .card-ico{transform:translateY(-2px) scale(1.06)}
.card-ico svg{width:19px;height:19px}
.card-body{font-size:14px;color:var(--muted);margin-top:12px;line-height:1.8}
.card-points{margin-top:16px;display:grid;gap:12px}
.card-points li{font-size:14px;color:var(--muted);line-height:1.8;padding-inline-start:16px;position:relative}
.card-points li::before{content:"";position:absolute;inset-inline-start:0;top:.72em;width:6px;height:6px;border-radius:99px;background:var(--accent)}
.card-points b{color:var(--fg);font-weight:600}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
.tag{padding:4px 9px;border-radius:8px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:600}
/* glass sheen — own pseudo element (::before) so it never collides with .card::after */
.card.shine{--sheen:color-mix(in oklab,#fff 88%,transparent);--sheen-2:color-mix(in oklab,var(--accent) 24%,transparent)}
.dark .card.shine{--sheen:color-mix(in oklab,#fff 17%,transparent);--sheen-2:color-mix(in oklab,var(--accent) 32%,transparent)}
.card.shine::before{content:"";position:absolute;z-index:3;top:-45%;bottom:-45%;right:-58%;width:40%;pointer-events:none;opacity:0;border-radius:3px;background:linear-gradient(100deg,transparent 0%,color-mix(in oklab,var(--sheen) 32%,transparent) 24%,var(--sheen) 43%,var(--sheen-2) 50%,var(--sheen) 57%,color-mix(in oklab,var(--sheen) 32%,transparent) 76%,transparent 100%);transform:translate3d(0,0,0) skewX(-14deg);will-change:transform,opacity}
.card.shine:hover::before,.card.shine:focus-within::before{animation:sheen 1500ms cubic-bezier(.36,.02,.24,1) both}
@keyframes sheen{0%{transform:translate3d(0,0,0) skewX(-14deg);opacity:0}10%{opacity:.85}50%{opacity:1}88%{opacity:.3}100%{transform:translate3d(-495%,0,0) skewX(-14deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.card.shine:hover::before,.card.shine:focus-within::before{animation:none}}

/* ---------- portfolio ---------- */
.work-grid{display:grid;gap:20px;margin-top:44px}
@media (min-width:768px){.work-grid{grid-template-columns:repeat(12,1fr)}.w-wide{grid-column:span 7}.w-narrow{grid-column:span 5}.w-full{grid-column:span 12}}
.case{display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:18px;background:var(--surface);box-shadow:var(--shadow);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.case:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.case::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity var(--t-slow) var(--ease);background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),var(--accent-soft),transparent 66%)}
.case{position:relative}
.case:hover::after{opacity:1}
.case-shot{position:relative;display:block;width:100%;aspect-ratio:16/10;overflow:hidden;line-height:0;text-align:start;background:var(--subtle);border-radius:18px 18px 0 0}
/* the shot is a 1px-bleed frame: the image always overshoots its box so no
   sub-pixel hairline of the card background can appear while it scales */
.case-shot img{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);max-width:none;object-fit:cover;object-position:top;transform:scale(1.012);transform-origin:50% 40%;backface-visibility:hidden;transition:transform .7s var(--ease)}
.case:hover .case-shot img{transform:scale(1.07)}
.case-veil{position:absolute;inset:0;display:flex;align-items:flex-end;padding:16px;background:linear-gradient(to top,color-mix(in oklab,var(--bg) 82%,transparent),color-mix(in oklab,var(--bg) 18%,transparent) 55%,transparent);opacity:0;transform:translateY(8px);transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
.case:hover .case-veil{opacity:1;transform:none}
.case-veil span{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600}
.case-body{display:flex;flex-direction:column;flex:1;padding:20px}
.case-body h3{font-size:17.5px}
.case-body p{flex:1;font-size:14px;color:var(--muted);margin-top:8px;line-height:1.8}
.case-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:18px}
.case-more{display:inline-flex;align-items:center;gap:5px;min-height:40px;font-size:14px;font-weight:600;color:var(--accent);transition:transform var(--t-fast) var(--ease)}
.case-more:hover{transform:translateX(-3px)}
html[dir=rtl] .case-more:hover{transform:translateX(3px)}
.case-more svg{width:14px;height:14px}

/* modal */
.modal{position:fixed;inset:0;z-index:115;display:none;place-items:center;padding:16px}
.modal.open{display:grid}
.modal-veil{position:absolute;inset:0;background:var(--overlay);animation:fade .25s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-box{position:relative;display:flex;flex-direction:column;width:min(94vw,52rem);max-height:90vh;overflow:hidden;border-radius:18px;background:var(--surface);box-shadow:var(--shadow-lift);animation:pop .28s var(--ease)}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal-head h3{font-size:17.5px}
.modal-body{flex:1;overflow-y:auto;padding:20px}
.modal-shot{border-radius:14px;overflow:hidden;background:var(--subtle);margin-bottom:24px}
.modal-shot-bar{display:flex;gap:7px;padding:9px 12px;border-bottom:1px solid var(--line)}
.modal-shot-img{max-height:22rem;overflow-y:auto}
.modal-cols{display:grid;gap:22px}
@media (min-width:768px){.modal-cols{grid-template-columns:1fr 1fr}}
.modal-cols h4{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:8px}
.modal-cols h4 i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;flex:none}
.i-warn{background:var(--danger-soft);color:var(--danger)}
.i-idea{background:var(--success-soft);color:var(--success)}
.modal-cols h4 svg{width:15px;height:15px}
.modal-cols p{font-size:14px;color:var(--muted);line-height:1.85}
.modal-tech{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.modal-tech p{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}

/* =========================================================
   INVERTED BAND — services / process / counters / quotes
   ========================================================= */
.band{position:relative;background:var(--fg);color:var(--bg);isolation:isolate;overflow:hidden}
.band a,.band h1,.band h2,.band h3,.band h4{color:var(--bg)}
.band a.btn-band{color:var(--fg)}
.band .kicker{color:color-mix(in oklab,var(--bg) 48%,transparent)}
.band .kicker::after{background:var(--band-gold)}
.band-glow{position:absolute;inset-inline-end:-10%;top:-20%;width:60%;aspect-ratio:1;z-index:-1;pointer-events:none;background:radial-gradient(circle at center,color-mix(in oklab,var(--band-gold) 16%,transparent),transparent 62%)}
.band-lead{max-width:52ch;margin-top:16px;font-size:15px;line-height:1.85;color:color-mix(in oklab,var(--bg) 62%,transparent)}

/* ---- services: offer cards ---- */
.offers{display:grid;gap:18px;margin-top:52px}
@media (min-width:900px){.offers{grid-template-columns:repeat(3,1fr)}}
.offer{position:relative;display:flex;flex-direction:column;overflow:hidden;padding:26px 24px 24px;border-radius:20px;border:1px solid color-mix(in oklab,var(--bg) 12%,transparent);background:color-mix(in oklab,var(--bg) 5%,transparent);transition:transform var(--t) var(--ease),background-color var(--t) var(--ease),border-color var(--t) var(--ease)}
.offer::before{content:"";position:absolute;inset-inline:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--band-gold),transparent);transform:scaleX(0);transition:transform var(--t-slow) var(--ease)}
/* cursor-tracked spotlight (set by JS: --mx / --my) */
.offer::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity var(--t-slow) var(--ease);background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),color-mix(in oklab,var(--band-gold) 15%,transparent),transparent 68%)}
.offer:hover::after{opacity:1}
.offer:hover{transform:translateY(-7px);background:color-mix(in oklab,var(--bg) 9%,transparent);border-color:color-mix(in oklab,var(--band-gold) 40%,transparent)}
.offer:hover::before{transform:scaleX(1)}
.offer-no{position:absolute;top:14px;inset-inline-end:20px;font-size:3.6rem;font-weight:900;line-height:1;letter-spacing:-.04em;color:color-mix(in oklab,var(--bg) 7%,transparent);pointer-events:none}
.offer-ico{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:15px;border:1px solid color-mix(in oklab,var(--band-gold) 45%,transparent);background:color-mix(in oklab,var(--band-gold) 12%,transparent);color:var(--band-gold);transition:background-color var(--t) var(--ease),transform var(--t) var(--ease)}
.offer:hover .offer-ico{transform:translateY(-2px) scale(1.05);background:color-mix(in oklab,var(--band-gold) 20%,transparent)}
.offer-ico svg{width:23px;height:23px}
.offer h3{margin-top:22px;font-size:19px}
.offer>p{margin-top:10px;font-size:14px;line-height:1.85;color:color-mix(in oklab,var(--bg) 60%,transparent)}
.offer-list{margin-top:18px;display:grid;gap:9px}
.offer-list li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:color-mix(in oklab,var(--bg) 78%,transparent)}
.offer-list svg{width:15px;height:15px;flex:none;color:var(--band-gold)}
.offer-foot{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:22px}
.band-chip{padding:4px 10px;border-radius:999px;border:1px solid color-mix(in oklab,var(--bg) 16%,transparent);font-size:11.5px;font-weight:600;color:color-mix(in oklab,var(--bg) 70%,transparent)}

/* ---- process: assembly line ---- */
.process-head{display:flex;flex-direction:column;gap:10px;margin-top:96px}
@media (min-width:768px){.process-head{flex-direction:row;align-items:flex-end;justify-content:space-between}}
.process-head h3{font-size:clamp(1.3rem,1.1rem+.8vw,1.75rem)}
.process-head p{max-width:40ch;font-size:14px;line-height:1.8;color:color-mix(in oklab,var(--bg) 55%,transparent)}
.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:color-mix(in oklab,var(--band-gold) 85%,var(--bg))}

.line{position:relative;margin-top:40px;padding:34px 24px 26px;border-radius:24px;border:1px solid color-mix(in oklab,var(--bg) 11%,transparent);background:linear-gradient(180deg,color-mix(in oklab,var(--bg) 7%,transparent),color-mix(in oklab,var(--bg) 3%,transparent))}
@media (min-width:768px){.line{padding:40px 34px 30px}}
.line::after{content:"";position:absolute;inset:0;border-radius:24px;pointer-events:none;background-image:linear-gradient(color-mix(in oklab,var(--bg) 4%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklab,var(--bg) 4%,transparent) 1px,transparent 1px);background-size:34px 34px;-webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000,transparent 75%);mask-image:radial-gradient(ellipse at 50% 0%,#000,transparent 75%)}
.line-rail{position:relative;height:34px;margin-bottom:6px}
.line-rail-base,.line-rail-fill{position:absolute;top:16px;height:2px;border-radius:99px}
.line-rail-base{inset-inline:6%;background:color-mix(in oklab,var(--bg) 14%,transparent)}
.line-rail-fill{inset-inline-start:6%;width:0;background:linear-gradient(90deg,var(--band-gold-2),var(--band-gold));box-shadow:0 0 16px color-mix(in oklab,var(--band-gold) 55%,transparent);transition:width 1.5s var(--ease) .15s}
.line.in .line-rail-fill{width:88%}
.line-marks{position:absolute;inset-inline:0;top:0;display:grid;grid-template-columns:repeat(4,1fr)}
.line-marks i{position:relative;display:grid;place-items:center;height:34px}
.line-marks i::before{content:"";width:12px;height:12px;border-radius:99px;background:var(--fg);border:2px solid color-mix(in oklab,var(--bg) 26%,transparent);transition:all .45s var(--ease)}
.line.in .line-marks i.on::before{background:var(--band-gold);border-color:var(--band-gold);box-shadow:0 0 0 5px color-mix(in oklab,var(--band-gold) 22%,transparent)}
@media (max-width:767px){.line-rail{display:none}}

.stations{display:grid;gap:14px}
@media (min-width:768px){.stations{grid-template-columns:repeat(4,1fr);gap:10px}}
.st{position:relative;padding:20px 18px 22px;border-radius:16px;border:1px solid transparent;background:color-mix(in oklab,var(--bg) 4%,transparent);transition:background-color var(--t) var(--ease),border-color var(--t) var(--ease),transform var(--t) var(--ease)}
.st::before{content:"";position:absolute;top:-1px;inset-inline:22px;height:2px;background:var(--band-gold);transform:scaleX(0);transform-origin:center;transition:transform .45s var(--ease)}
.st:hover,.st.on{background:color-mix(in oklab,var(--bg) 9%,transparent);border-color:color-mix(in oklab,var(--bg) 14%,transparent);transform:translateY(-4px)}
.st:hover::before,.st.on::before{transform:scaleX(1)}
.st-code{display:flex;align-items:center;gap:8px;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in oklab,var(--bg) 42%,transparent);transition:color var(--t) var(--ease)}
.st:hover .st-code,.st.on .st-code{color:var(--band-gold)}
.st-code b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:7px;border:1px solid color-mix(in oklab,var(--bg) 18%,transparent);font-size:11px;font-weight:700;letter-spacing:0}
.st h4{margin-top:14px;font-size:16.5px}
.st p{margin-top:7px;font-size:13.5px;line-height:1.8;color:color-mix(in oklab,var(--bg) 58%,transparent)}
.st-out{margin-top:16px;padding-top:14px;border-top:1px dashed color-mix(in oklab,var(--bg) 14%,transparent);display:grid;gap:7px}
.st-out li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:color-mix(in oklab,var(--bg) 72%,transparent)}
.st-out li::before{content:"";width:5px;height:5px;border-radius:99px;background:var(--band-gold);flex:none}
.st-time{display:inline-flex;align-items:center;gap:6px;margin-top:16px;padding:3px 9px;border-radius:999px;background:color-mix(in oklab,var(--bg) 8%,transparent);font-size:11.5px;font-weight:600;color:color-mix(in oklab,var(--bg) 62%,transparent)}
.st-time svg{width:12px;height:12px}

/* ---- counters ---- */
.counters{display:grid;grid-template-columns:1fr 1fr;margin-top:56px;border:1px solid color-mix(in oklab,var(--bg) 12%,transparent);border-radius:18px;overflow:hidden}
@media (min-width:768px){.counters{grid-template-columns:repeat(4,1fr)}}
.counters div{padding:26px 16px;text-align:center;border-block-start:1px solid color-mix(in oklab,var(--bg) 8%,transparent);border-inline-start:1px solid color-mix(in oklab,var(--bg) 8%,transparent)}
.counters div:nth-child(1),.counters div:nth-child(2){border-block-start:0}
.counters div:nth-child(odd){border-inline-start:0}
@media (min-width:768px){.counters div{border-block-start:0}.counters div:nth-child(odd){border-inline-start:1px solid color-mix(in oklab,var(--bg) 8%,transparent)}.counters div:first-child{border-inline-start:0}}
.counters b{display:block;font-size:clamp(1.9rem,1.4rem+1.4vw,2.5rem);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--band-gold)}
.counters small{display:block;margin-top:4px;font-size:13px;color:color-mix(in oklab,var(--bg) 58%,transparent)}
.counters div{position:relative;overflow:hidden}
.counters .cn{display:inline-block;font-variant-numeric:tabular-nums;filter:blur(12px);opacity:.2;transform:translateY(10px);transition:filter .8s var(--ease-out),opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.counters div.run .cn{filter:none;opacity:1;transform:none}
.counters div.done b{animation:numpop .55s var(--ease-out)}
@keyframes numpop{0%{transform:scale(1)}42%{transform:scale(1.07)}100%{transform:scale(1)}}
.counters .cbar{position:absolute;bottom:0;inset-inline:24%;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--band-gold),transparent);transform:scaleX(0);transition:transform 1.7s var(--ease-out)}
.counters div.run .cbar{transform:scaleX(1)}

/* ---- band CTA ---- */
.band-cta{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:54px;text-align:center}
.band-cta p{font-size:14px;color:color-mix(in oklab,var(--bg) 55%,transparent)}
.btn-band{background:var(--bg);color:var(--fg);box-shadow:0 10px 30px -14px rgba(0,0,0,.55)}
.btn-band:hover{background:color-mix(in oklab,var(--bg) 88%,var(--band-gold));transform:translateY(-2px)}
.btn-band svg{transition:transform var(--t) var(--ease)}
.btn-band:hover svg{transform:translateX(-4px)}
html[dir=rtl] .btn-band:hover svg{transform:translateX(4px)}

/* ---- testimonials ---- */
.quotes{padding-bottom:clamp(72px,8vw,120px)}
.tst-top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.tst-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;border:1px solid color-mix(in oklab,var(--band-gold) 38%,transparent);color:var(--band-gold);font-size:12px;font-weight:600}
.tst-badge svg{width:14px;height:14px}
.tst-count{font-size:13px;color:color-mix(in oklab,var(--bg) 52%,transparent);font-variant-numeric:tabular-nums}
.tst-stage{position:relative;display:grid;margin-top:22px}
.tst{grid-area:1/1;text-align:start;padding:clamp(24px,2.4vw,38px);border-radius:26px;border:1px solid color-mix(in oklab,var(--bg) 13%,transparent);background:linear-gradient(160deg,color-mix(in oklab,var(--bg) 9%,transparent),color-mix(in oklab,var(--bg) 3%,transparent));opacity:0;visibility:hidden;transform:translateY(16px) scale(.99);filter:blur(8px);pointer-events:none;transition:opacity .75s var(--ease-out),transform .75s var(--ease-out),filter .75s var(--ease-out),visibility .75s}
.tst.on{opacity:1;visibility:visible;transform:none;filter:none;pointer-events:auto}
.tst-mark{display:block;font-family:var(--mono,inherit);font-size:54px;line-height:.6;color:color-mix(in oklab,var(--band-gold) 55%,transparent);margin-bottom:14px}
.tst blockquote{font-size:clamp(1.06rem,.98rem+.7vw,1.5rem);font-weight:300;line-height:1.85;letter-spacing:-.015em}
.tst blockquote b{font-weight:600;color:var(--band-gold)}
.tst-foot{display:flex;align-items:center;gap:14px;margin-top:clamp(22px,2vw,32px);padding-top:clamp(18px,1.8vw,24px);border-top:1px solid color-mix(in oklab,var(--bg) 11%,transparent);flex-wrap:wrap}
.tst-av{position:relative;display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:16px;font-size:17px;font-weight:700;color:#1a1206;background:linear-gradient(140deg,var(--band-gold),var(--band-gold-2));box-shadow:0 6px 20px -8px color-mix(in oklab,var(--band-gold) 70%,transparent)}
.tst-who{display:flex;flex-direction:column;gap:3px;min-width:0}
.tst-who b{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:600}
.tst-who b svg{width:15px;height:15px;color:var(--band-gold);flex:none}
.tst-who small{font-size:13px;color:color-mix(in oklab,var(--bg) 55%,transparent)}
.tst-metric{margin-inline-start:auto;display:flex;align-items:baseline;gap:7px;padding:9px 14px;border-radius:14px;border:1px solid color-mix(in oklab,var(--bg) 12%,transparent);background:color-mix(in oklab,var(--bg) 5%,transparent)}
.tst-metric b{font-size:17px;font-weight:700;color:var(--band-gold);font-variant-numeric:tabular-nums}
.tst-metric small{font-size:12px;color:color-mix(in oklab,var(--bg) 52%,transparent)}
.tst-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:26px}
.tst-arrow{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;border:1px solid color-mix(in oklab,var(--bg) 15%,transparent);color:color-mix(in oklab,var(--bg) 70%,transparent)}
.tst-arrow svg{width:16px;height:16px}
.tst-arrow.prev svg{transform:rotate(180deg)}
.tst-arrow:hover{border-color:color-mix(in oklab,var(--band-gold) 50%,transparent);color:var(--band-gold);transform:translateY(-2px)}
.dots{display:flex;justify-content:center;align-items:center;gap:7px}
.dots button{position:relative;overflow:hidden;height:7px;width:7px;border-radius:99px;background:color-mix(in oklab,var(--bg) 26%,transparent);transition:width var(--t) var(--ease-out),background-color var(--t) var(--ease-out)}
.dots button:hover{background:color-mix(in oklab,var(--bg) 45%,transparent)}
.dots button.on{width:34px;background:color-mix(in oklab,var(--bg) 22%,transparent)}
.dots button.on::after{content:"";position:absolute;inset:0;border-radius:99px;background:var(--band-gold);transform-origin:100% 50%;transform:scaleX(1)}
.dots button.on.timing::after{animation:dotfill 7s linear forwards}
@keyframes dotfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- faq ---------- */
.faq-list{display:grid;gap:10px;margin-top:44px}
.ac{overflow:hidden;border-radius:14px;background:var(--surface);box-shadow:var(--shadow);transition:box-shadow var(--t) var(--ease)}
.ac:hover{box-shadow:var(--shadow-lift)}
.ac-btn{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:17px 20px;text-align:start;font-size:15px;font-weight:600}
.ac-btn svg{width:17px;height:17px;flex:none;color:var(--muted);transition:transform var(--t) var(--ease)}
.ac.open .ac-btn svg{transform:rotate(180deg)}
.ac-panel{overflow:hidden;height:0;transition:height var(--t) var(--ease)}
.ac-panel p{padding:0 20px 20px;font-size:14px;color:var(--muted);line-height:1.85}

/* ---------- contact ---------- */
.contact{background:var(--subtle)}
.contact-grid{display:grid;gap:44px;align-items:start}
@media (min-width:1024px){.contact-grid{grid-template-columns:1fr 1fr;gap:48px}}
.links{display:grid;gap:10px;margin-top:32px}
.link-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 14px;border-radius:14px;background:var(--bg);font-size:14px;color:var(--muted);transition:color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.dark .link-row{background:var(--surface)}
.link-row:hover{color:var(--fg);transform:translateX(-4px);box-shadow:var(--shadow)}
html[dir=rtl] .link-row:hover{transform:translateX(4px)}
.link-row i{display:grid;place-items:center;width:40px;height:40px;border-radius:99px;flex:none}
.link-row svg{width:17px;height:17px}
.i-mail{background:var(--accent-soft);color:var(--accent)}
.i-phone{background:var(--success-soft);color:var(--success)}
.i-tg{background:var(--accent-soft);color:var(--accent)}
.form{display:grid;gap:16px;padding:24px;border-radius:20px;background:var(--bg);box-shadow:var(--shadow)}
.dark .form{background:var(--surface)}
@media (min-width:768px){.form{padding:30px}}
.f2{display:grid;gap:16px}
@media (min-width:768px){.f2{grid-template-columns:1fr 1fr}}
.field>span{display:block;margin-bottom:6px;font-size:13.5px;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;min-height:46px;padding:11px 14px;border-radius:12px;background:var(--subtle);box-shadow:0 0 0 1px var(--line);outline:none;font-size:14px;transition:box-shadow var(--t-fast) var(--ease)}
.dark .field input,.dark .field select,.dark .field textarea{background:var(--bg)}
.field textarea{resize:vertical;min-height:120px;line-height:1.8}
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:0 0 0 1px var(--accent),0 0 0 4px var(--accent-soft)}
.field.err input,.field.err textarea{box-shadow:0 0 0 1px var(--danger)}
.field em{display:block;margin-top:6px;font-size:12px;font-style:normal;color:var(--danger)}
.shake{animation:shake .34s var(--ease)}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.sent{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:420px;padding:44px 30px;text-align:center;border-radius:20px;background:var(--bg);box-shadow:var(--shadow)}
.dark .sent{background:var(--surface)}
.sent svg{width:56px;height:56px;color:var(--success);margin-bottom:16px}
.sent .ck{stroke-dasharray:30;stroke-dashoffset:30;animation:draw .5s var(--ease) .15s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.sent h3{font-size:20px}
.sent p{max-width:38ch;margin-top:10px;font-size:14px;color:var(--muted);line-height:1.85}
.sent-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding-block:64px}
.foot-cta{display:inline-flex;align-items:flex-end;gap:16px;font-size:clamp(1.5rem,1.15rem+1.5vw,2.25rem);font-weight:600;letter-spacing:-.02em}
.foot-cta svg{width:30px;height:30px;margin-bottom:6px;transition:transform var(--t) var(--ease)}
.foot-cta:hover svg{transform:translateX(-6px)}
html[dir=rtl] .foot-cta:hover svg{transform:translateX(6px)}
.foot-row{display:flex;flex-direction:column;align-items:center;gap:22px;margin-top:48px}
@media (min-width:768px){.foot-row{flex-direction:row;justify-content:space-between}}
.socials{display:flex;gap:4px}
.socials a{display:grid;place-items:center;width:44px;height:44px;border-radius:99px;color:var(--muted);transition:color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
.socials a:hover{color:var(--fg);background:var(--subtle)}
.socials svg{width:18px;height:18px}
.to-top{position:fixed;bottom:22px;inset-inline-start:22px;z-index:70;display:grid;place-items:center;width:46px;height:46px;border-radius:99px;background:var(--fg);color:var(--bg);box-shadow:var(--shadow-lift);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
.to-top.on{opacity:1;transform:none;pointer-events:auto}
.to-top svg{width:18px;height:18px}

/* ---------- motion pref ---------- */
/* Motion is intentionally always enabled: the OS "reduce motion" setting must not
   strip the transitions, reveals or the cursor halo on this site. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:smooth}
}

/* ---------------------------------------------------------------------------
   v7 · form validation UI (inline, minimal, accessible)
   --------------------------------------------------------------------------- */
.field{position:relative}
.field>span{display:flex;align-items:center;justify-content:space-between;gap:10px}
.field>span .hint{font-style:normal;font-size:11.5px;font-weight:500;color:var(--faint);transition:color var(--t-fast) var(--ease)}
.field.err>span .hint{color:var(--danger)}
.field input,.field select,.field textarea{transition:box-shadow .18s var(--ease),background-color .18s var(--ease)}
.field.err input,.field.err select,.field.err textarea{box-shadow:0 0 0 1px var(--danger),0 0 0 4px var(--danger-soft)}
/* v9 - success state: direction aware, never overlaps the value, spring + draw */
:root{--ok:var(--success);--ok-soft:var(--success-soft);--ok-line:color-mix(in oklab,var(--success) 44%,transparent)}
.field.ok input,.field.ok select{box-shadow:0 0 0 1px var(--ok-line),0 0 0 4px color-mix(in oklab,var(--ok) 7%,transparent)}
.field.ok textarea{box-shadow:0 0 0 1px var(--ok-line)}
.field.ok>span .hint{color:var(--ok)}
.field.has-tick input{padding-inline-end:48px}
/* ltr fields (email, phone) keep the same rule on purpose: for them inline-end
   is the visual right, which is exactly where the mark sits in an rtl field */
/* .field>span (the label) would otherwise win on specificity and repaint the mark */
.field .tick{margin:0;padding:0;position:absolute;inset-inline-end:14px;bottom:12px;width:22px;height:22px;display:grid;place-items:center;border-radius:99px;color:var(--ok);background:var(--ok-soft);box-shadow:0 0 0 1px color-mix(in oklab,var(--ok) 24%,transparent);opacity:0;transform:scale(.5);pointer-events:none}
.field.f-ltr .tick{inset-inline-end:auto;inset-inline-start:14px}
.tick svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;margin-right: 5px}
.tick svg path{stroke-dasharray:24;stroke-dashoffset:24}
.field.ok .tick{animation:tickPop .44s cubic-bezier(.22,.9,.26,1.2) both}
.field.ok .tick svg path{animation:tickDraw .32s cubic-bezier(.62,0,.36,1) .08s forwards}
.field.ok .tick::after{content:"";position:absolute;inset:0;border-radius:99px;box-shadow:0 0 0 1px color-mix(in oklab,var(--ok) 52%,transparent);animation:tickRing .62s var(--ease-out) both}
@keyframes tickPop{0%{opacity:0;transform:scale(.45)}60%{opacity:1;transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}
@keyframes tickDraw{to{stroke-dashoffset:0}}
@keyframes tickRing{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.85)}}
/* v9 - inline error: soft danger plate, opens without a layout jump */
.fx{display:block;overflow:hidden;max-height:0;margin-top:0;opacity:0;transform:translateY(-3px);transition:max-height .3s var(--ease-out),opacity .2s var(--ease),transform .28s var(--ease-out),margin-top .3s var(--ease-out)}
.fx.in{max-height:110px;margin-top:9px;opacity:1;transform:none}
.fx-in{display:flex;align-items:flex-start;gap:9px;padding:9px 12px;border-radius:12px;background:var(--danger-soft);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--danger) 20%,transparent);font-size:12.5px;font-style:normal;font-weight:600;line-height:1.75;color:var(--danger)}
.fx-in>span{padding-top:1px}
.fx svg{width:14.5px;height:14.5px;margin-top:3px;flex:none;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.chk-wrap .fx{margin-top:0}
.chk-wrap .fx.in{margin-top:11px}
@keyframes fxIn{to{opacity:1;transform:none}}
/* v9 - error summary card (GOV.UK style pattern: count + jump links) */
.form-alert{display:none;margin:18px 0 0}
.form-alert.on{display:block;animation:faIn .36s var(--ease-out) both}
@keyframes faIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.fa-box{position:relative;display:flex;align-items:flex-start;gap:13px;padding:15px 17px;border-radius:17px;background:linear-gradient(180deg,color-mix(in oklab,var(--danger) 11%,transparent),color-mix(in oklab,var(--danger) 4%,transparent));box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--danger) 24%,transparent),0 14px 34px -22px color-mix(in oklab,var(--danger) 70%,transparent)}
.fa-ic{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:11px;background:color-mix(in oklab,var(--danger) 15%,transparent);color:var(--danger)}
.fa-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.fa-b{flex:1;min-width:0;padding-inline-end:26px}
.fa-t{font-size:13.75px;font-weight:700;letter-spacing:-.01em;color:var(--fg)}
.fa-s{margin-top:3px;font-size:12.25px;font-weight:500;line-height:1.8;color:var(--muted)}
.fa-l{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 0;padding:0;list-style:none}
.fa-l button{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:10px;background:var(--surface);box-shadow:0 0 0 1px color-mix(in oklab,var(--danger) 22%,transparent);font:600 12px/1.5 inherit;color:var(--danger);cursor:pointer;transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
.fa-l button:hover{transform:translateY(-1px);background:color-mix(in oklab,var(--danger) 7%,var(--surface));box-shadow:0 0 0 1px var(--danger)}
.fa-l button:focus-visible{outline:2px solid var(--danger);outline-offset:2px}
.fa-l button svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
html[dir=rtl] .fa-l button svg{transform:scaleX(-1)}
.dark .fa-l button{background:var(--bg)}
.fa-x{position:absolute;top:11px;inset-inline-end:11px;display:grid;place-items:center;width:27px;height:27px;border-radius:9px;color:var(--muted);cursor:pointer;transition:color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
.fa-x:hover{color:var(--fg);background:color-mix(in oklab,var(--fg) 8%,transparent)}
.fa-x svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.chk-wrap{margin-top:18px}
.chk{position:relative;display:flex;align-items:flex-start;gap:10px;font-size:13.25px;line-height:1.85;color:var(--muted);cursor:pointer}
.chk input{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin:2px 0 0;flex:none;border-radius:6px;background:var(--subtle);box-shadow:0 0 0 1px var(--line);cursor:pointer;transition:background-color .18s var(--ease),box-shadow .18s var(--ease)}
.dark .chk input{background:var(--bg)}
.chk input:checked{background:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.chk input:checked::after{content:"";display:block;width:100%;height:100%;background:no-repeat center/12px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='m5 13 4 4 10-10'/></svg>")}
.chk input:focus-visible{box-shadow:0 0 0 1px var(--accent),0 0 0 4px var(--accent-soft)}
.chk-wrap.err .chk input{box-shadow:0 0 0 1px var(--danger),0 0 0 4px var(--danger-soft)}
.chk-wrap.err .chk{color:var(--fg)}
.chk-wrap .fx{margin-top:9px}
.shake-x{animation:shakeX .42s cubic-bezier(.36,.07,.19,.97) both}
@keyframes shakeX{10%,90%{transform:translateX(-1.5px)}20%,80%{transform:translateX(2.5px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.fx,.form-alert.on{animation:none;opacity:1;transform:none}.shake-x{animation:none}}

/* ------------------------------------------------------------------
   v8 - live preview performance
   A viewport-wide backdrop-filter under three always-on-top cursor layers
   made the compositor re-blur the page on every pointer sample, which is what
   made the pointer feel heavy inside the preview. While an overlay is open we
   drop every blur behind it and park decorative animations, so the whole frame
   budget goes to the demo itself.
   ------------------------------------------------------------------ */
html.overlay-open .nav-outer,
html.overlay-open .nav,
html.overlay-open .sheet,
html.overlay-open .progress,
html.overlay-open .to-top,
html.overlay-open .rail,
html.overlay-open #vbar,
html.overlay-open .noise{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html.overlay-open .marquee,
html.overlay-open .marquee *{animation-play-state:paused!important}
html.overlay-open .band,
html.overlay-open .hero-orb{animation-play-state:paused!important}
/* the preview stage owns its pointer: no custom-cursor repaints over it */
.pv-stage{contain:paint}
.pv-stage,.pv-stage *{cursor:auto}
.pv-frame iframe{border:0;background:#fff}

/* ---------------------------------------------------------------------------
   v9 - process strip + scope planner (public pricing removed on purpose)
   --------------------------------------------------------------------------- */
.head .note{max-width:64ch;margin:16px auto 0;font-size:14px;line-height:2.05;color:var(--muted)}
.proc{display:grid;gap:14px;margin-top:38px;padding:0;list-style:none}
.proc li{position:relative;padding:22px 20px;border-radius:18px;background:var(--surface);box-shadow:0 0 0 1px var(--line);transition:box-shadow var(--t) var(--ease),transform var(--t) var(--ease)}
.proc li:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--line-2),var(--shadow)}
.proc li b{display:grid;place-items:center;width:31px;height:31px;border-radius:11px;background:var(--accent-soft);color:var(--accent);font-size:13.5px;font-weight:700}
.proc li h3{margin-top:15px;font-size:15.5px;letter-spacing:-.012em}
.proc li p{margin-top:9px;font-size:12.75px;line-height:1.95;color:var(--muted)}
@media (min-width:768px){
  .proc{grid-template-columns:repeat(4,1fr);gap:16px}
  .proc li::after{content:"";position:absolute;top:37px;inset-inline-start:-11px;width:22px;height:1px;background:var(--line-2)}
  .proc li:first-child::after{display:none}
}
#planList li{display:block}
#planList li b{display:block;font-size:13px;font-weight:600;color:var(--fg)}
#planList li span{display:block;margin-top:2px;font-size:12.25px;line-height:1.8;color:var(--muted)}
#planWeeks{font-variant-numeric:tabular-nums}
.est-out .badge-soft{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:600}

.submit-status{display:none;margin-top:2px;padding:12px 14px;border-radius:12px;font-size:13px;line-height:1.7}.submit-status.on{display:block}.submit-status.loading{color:var(--muted);background:var(--subtle);box-shadow:inset 0 0 0 1px var(--line)}.submit-status.error{color:var(--danger);background:var(--danger-soft);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--danger) 28%,transparent)}.btn:disabled{cursor:not-allowed;opacity:.72;transform:none!important}.submit-spinner{width:16px;height:16px;border:2px solid currentColor;border-inline-end-color:transparent;border-radius:50%;animation:submitSpin .7s linear infinite}@keyframes submitSpin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.submit-spinner{animation-duration:1.4s}}