/* Base reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: fixed WebGL field behind everything; frosted-glass panels float over it; asymmetric 12-col grid; one pinned horizontal chapter (process). */
:root{
  --ink:#000033;        /* page ground */
  --abyss:#00001A;      /* deepest */
  --navy:#001A66;       /* dark blue mid */
  --royal:#0047AB;      /* darker blue for gradients */
  --cobalt:#0066CC;     /* primary accent */
  --azure:#0099FF;      /* highlight, used sparingly */
  --mist:#EDEDED;       /* text */
  --mist-dim:rgba(237,237,237,.7);
  --mist-faint:rgba(237,237,237,.14);
  --line:rgba(0,153,255,.22);
  --glass:linear-gradient(140deg,rgba(237,237,237,.09) 0%,rgba(237,237,237,.03) 45%,rgba(0,102,204,.06) 100%);
  --glass-edge:rgba(237,237,237,.14);
  --glass-shadow:0 24px 60px -12px rgba(0,0,20,.6),inset 0 1px 0 rgba(237,237,237,.14),inset 0 -1px 0 rgba(0,0,26,.4);
  --ok:#3BE8A0;
  --f-display:"Unbounded","Arial Black",system-ui,sans-serif;
  --f-body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --s-1:clamp(.8rem,.76rem + .2vw,.9rem);
  --s0:clamp(1rem,.95rem + .25vw,1.125rem);
  --s1:clamp(1.25rem,1.1rem + .6vw,1.6rem);
  --s2:clamp(1.6rem,1.2rem + 1.6vw,2.6rem);
  --s3:clamp(2.2rem,1.4rem + 3.6vw,4.6rem);
  --s4:clamp(2.6rem,1rem + 7.4vw,8.4rem);
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink);overflow-x:clip}
body{background:var(--ink);color:var(--mist);font-family:var(--f-body);font-size:var(--s0);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--ink)}
a{color:inherit}
::selection{background:var(--cobalt);color:var(--mist);-webkit-text-fill-color:var(--mist)}
.outline ::selection,.outline::selection,.step__n::selection,.marquee__item::selection{background:var(--cobalt);color:var(--mist);-webkit-text-fill-color:var(--mist);-webkit-text-stroke-color:transparent}
.grad ::selection,.grad::selection{background:var(--cobalt);color:var(--mist);-webkit-text-fill-color:var(--mist)}

/* custom scrollbar */
@supports selector(::-webkit-scrollbar){
  ::-webkit-scrollbar{width:12px;height:12px}
  ::-webkit-scrollbar-track{background:var(--abyss)}
  ::-webkit-scrollbar-thumb{border-radius:12px;border:3px solid var(--abyss);background:linear-gradient(180deg,var(--azure),var(--cobalt) 45%,var(--royal))}
  ::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#33ADFF,var(--azure) 45%,var(--cobalt))}
  ::-webkit-scrollbar-corner{background:var(--abyss)}
  textarea::-webkit-scrollbar-track{background:transparent}
}
@supports not selector(::-webkit-scrollbar){html{scrollbar-color:var(--cobalt) var(--abyss);scrollbar-width:thin}}
:focus-visible{outline:2px solid var(--azure);outline-offset:4px;border-radius:4px}
.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));max-width:1440px;margin-inline:auto}
@media (min-width:900px){.wrap{padding-left:max(48px,env(safe-area-inset-left,0px));padding-right:max(48px,env(safe-area-inset-right,0px))}}
.mono{font-family:var(--f-mono);font-size:var(--s-1);letter-spacing:.04em}
.eyebrow{font-family:var(--f-mono);font-size:var(--s-1);text-transform:uppercase;letter-spacing:.14em;color:var(--azure)}

/* glass */
.glass{background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%)}

/* ---------- background field ---------- */
#field,#dust{position:fixed;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#field{z-index:0}
#dust{z-index:1}
.grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
main,header,footer{position:relative;z-index:3}

/* ---------- preloader ---------- */
.loader{position:fixed;inset:0;z-index:100;background:var(--abyss);display:grid;place-items:end start;padding:max(24px,env(safe-area-inset-left,0px));animation:loaderFailsafe .01s 3.2s forwards}
.loader__count{font-family:var(--f-display);font-weight:800;font-size:clamp(4rem,18vw,14rem);line-height:.85;color:var(--mist);font-variant-numeric:tabular-nums}
.loader__bar{position:absolute;left:0;bottom:0;height:3px;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--royal),var(--cobalt))}
.loader__tag{position:absolute;top:max(24px,env(safe-area-inset-top,0px));right:max(24px,env(safe-area-inset-right,0px));color:var(--mist-dim)}
@keyframes loaderFailsafe{to{visibility:hidden;opacity:0}}

/* ---------- cursor ---------- */
.cursor{position:fixed;left:0;top:0;z-index:90;pointer-events:none;width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid var(--azure);border-radius:50%;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .35s,border-color .35s;mix-blend-mode:screen;display:none}
.cursor__dot{position:fixed;left:0;top:0;z-index:91;pointer-events:none;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--mist);display:none}
.cursor.is-hover{width:78px;height:78px;margin:-39px 0 0 -39px;background:rgba(0,102,204,.2);border-color:transparent}
.cursor.is-view{width:110px;height:110px;margin:-55px 0 0 -55px;background:var(--cobalt);border-color:transparent}
.cursor__label{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-mono);font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--mist);opacity:0;transition:opacity .2s}
.cursor.is-view .cursor__label{opacity:1}
@media (hover:hover) and (pointer:fine){.cursor,.cursor__dot{display:block}body.has-cursor,body.has-cursor a,body.has-cursor button{cursor:none}}

/* ---------- header ---------- */
.nav{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;transition:transform .5s var(--ease)}
.nav.is-hidden{transform:translateY(-130%)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:16px}
.nav__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:8px 8px 8px 16px;border-radius:18px;border:1px solid transparent;transition:background .4s,border-color .4s,box-shadow .4s,backdrop-filter .4s}
.nav.is-scrolled .nav__bar{background:var(--glass);border-color:var(--glass-edge);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%)}
.logo{white-space:nowrap;font-family:var(--f-display);font-weight:800;font-size:1rem;text-decoration:none;letter-spacing:.02em;display:inline-flex;align-items:center;gap:10px;min-height:44px}
.logo__mark{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(from 200deg,var(--royal),var(--cobalt),var(--azure),var(--royal));color:var(--mist);font-size:.7rem}
.nav__links{display:none;gap:32px;list-style:none;margin:0;padding:0}
.nav__links a{text-decoration:none;font-size:.95rem;color:var(--mist-dim);position:relative;padding-block:12px;transition:color .25s}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--azure);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav__links a:hover{color:var(--mist)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.avail{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:12px;font-size:.85rem;color:var(--mist);text-decoration:none;min-height:44px;transition:border-color .3s,background .3s}
.avail:hover{border-color:rgba(0,153,255,.5)}
.avail{white-space:nowrap}
@media (max-width:420px){.logo{font-size:.9rem;gap:8px}.logo__mark{width:30px;height:30px}.avail{padding:8px 12px;font-size:.78rem;gap:8px}.nav__bar{padding-left:10px}}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(59,232,160,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(59,232,160,0)}100%{box-shadow:0 0 0 0 rgba(59,232,160,0)}}
@media (min-width:900px){.nav__links{display:flex}}

/* ---------- hero ---------- */
.hero{min-height:min(100svh,860px);display:flex;flex-direction:column;justify-content:center;padding-block:48px 40px;position:relative}
@media (max-width:599px){.hero{min-height:0;justify-content:flex-start;padding-block:32px 56px}}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 80% at 0% 100%,rgba(0,0,26,.9) 0%,rgba(0,0,26,.35) 45%,transparent 70%)}
.hero__main{display:grid;gap:28px;align-items:end}
.hero__text{container-type:inline-size;min-width:0}
.hero__photo{position:relative;margin:0;width:clamp(220px,62vw,320px);max-width:100%;aspect-ratio:900/1174;order:-1;isolation:isolate;touch-action:pan-y}
.hero__photo::before{content:"";position:absolute;inset:18% -30% -10% -30%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(0,102,204,.7),rgba(0,71,171,.25) 55%,transparent);filter:blur(12px)}
.hero__photo canvas,.hero__photo img{position:absolute;inset:0;width:100%;height:100%;display:block;-webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent);mask-image:linear-gradient(to bottom,#000 78%,transparent)}
.hero__badge{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);white-space:nowrap;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:12px;font-size:.82rem}
.hero__ctas .btn{justify-content:center}
@media (max-width:599px){
  .hero__main{display:block;position:relative}
  .hero__meta{padding-right:128px;padding-top:40px;min-height:148px;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:center;align-items:flex-start;gap:6px;margin-bottom:24px}
  .hero__photo{position:absolute;top:0;right:0;width:108px;height:148px;aspect-ratio:auto;overflow:visible;isolation:isolate;margin:0}
  .hero__photo::before{display:block;content:"";position:absolute;inset:auto 0 0 0;height:108px;border-radius:50%;z-index:-1;filter:none;
    background:transparent;border:2px solid rgba(0,153,255,.85);
    box-shadow:0 0 0 6px rgba(0,153,255,.1),0 0 28px rgba(0,153,255,.55),inset 0 0 22px rgba(0,153,255,.35)}
  .hero__photo canvas{display:none}
  .hero__photo img{visibility:visible!important;-webkit-mask-image:none;mask-image:none;inset:auto;left:-31px;top:-4px;width:170px;height:auto;max-width:none;
    -webkit-clip-path:path('M33 4H137V98A52 52 0 0 1 33 98Z');clip-path:path('M33 4H137V98A52 52 0 0 1 33 98Z')}
  .hero__badge{display:none}
  .hero__main .hero__avatar-dot{display:block}
  .hero__meta .sep{display:none}
  .hero__meta .loc{display:block}
}
.hero__avatar-dot{display:none;position:absolute;z-index:2;width:18px;height:18px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ink);top:124px;right:8px}
@media (max-width:599px){.hero__ctas{display:grid;grid-template-columns:1fr 1fr;gap:10px}.hero__ctas .btn{padding:0 12px;font-size:.95rem}}
@media (min-width:600px) and (max-width:899px){.hero{min-height:0;padding-block:64px 56px}.hero__main{grid-template-columns:minmax(0,1fr) clamp(190px,34vw,290px);gap:24px}.hero__photo{order:0;width:100%;margin-bottom:-24px}}
@media (min-width:900px){.hero__main{display:block;max-width:calc(100% - clamp(300px,calc(54vw - 200px),560px) - 40px)}.hero__photo{position:absolute;right:max(48px,env(safe-area-inset-right,0px));bottom:0;width:clamp(300px,calc(54vw - 200px),560px)}.hero__badge{bottom:12%}}
.hero__meta{display:flex;flex-wrap:wrap;gap:12px 32px;margin-bottom:clamp(24px,4vw,48px)}
.hero__title{font-family:var(--f-display);font-weight:800;font-size:var(--s4);line-height:.92;letter-spacing:-.035em;margin:0;text-transform:uppercase}
.hero__title{font-size:min(var(--s4),14cqi)}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.06em;white-space:nowrap}
.hero__title .line > span{display:inline-block}
.hero__title .char{display:inline-block;will-change:transform}
.hero__title .outline{color:var(--ink);-webkit-text-fill-color:var(--ink);-webkit-text-stroke:3px var(--mist);paint-order:stroke fill}
.hero__title .grad{background:linear-gradient(100deg,var(--royal) 0%,var(--cobalt) 30%,#1A7FE0 50%,var(--cobalt) 70%,var(--royal) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 7s linear infinite;filter:drop-shadow(0 0 28px rgba(0,71,171,.55))}
.hero__title .grad .char{background:inherit;-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes sheen{to{background-position:-200% 0}}
.hero__foot{display:grid;gap:28px;margin-top:clamp(28px,4vw,56px);align-items:end}
.hero__lede{max-width:48ch;color:var(--mist-dim);margin:0;font-size:var(--s1);line-height:1.45}
.hero__lede strong{color:var(--mist);font-weight:500}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px}
.scroll-cue{display:none;align-items:center;gap:14px;color:var(--mist-dim)}
.scroll-cue__line{width:1px;height:56px;background:var(--mist-faint);position:relative;overflow:hidden}
.scroll-cue__line::after{content:"";position:absolute;left:0;top:-50%;width:1px;height:50%;background:var(--azure);animation:drip 1.8s var(--ease) infinite}
@keyframes drip{to{top:100%}}
@media (min-width:900px){.hero__foot{max-width:calc(100% - clamp(300px,calc(54vw - 200px),560px) - 40px);gap:32px}.scroll-cue{display:none}}

/* ---------- buttons ---------- */
.btn{--bg:transparent;position:relative;display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 24px;border-radius:12px;font:500 1rem var(--f-body);text-decoration:none;border:1px solid var(--glass-edge);background:var(--bg);color:var(--mist);overflow:hidden;isolation:isolate;cursor:pointer;transition:border-color .3s,color .3s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,var(--royal),var(--cobalt));transform:scaleX(0);transform-origin:right center;transition:transform .5s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1);transform-origin:left center}
.btn:hover{border-color:transparent}
.btn--glass{background:var(--glass);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.btn--solid{--bg:var(--mist);color:var(--ink);border-color:var(--mist)}
.btn--solid:hover{color:var(--mist)}
.btn svg{width:18px;height:18px;transition:transform .45s var(--ease)}
.btn:hover svg{transform:translateX(4px)}

/* ---------- marquee ---------- */
.marquee{border-block:1px solid var(--glass-edge);background:rgba(0,0,26,.35);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);overflow:hidden;padding-block:22px}
.marquee__track{display:flex;width:max-content;gap:48px;animation:marq 40s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{display:flex;align-items:center;gap:48px;font-family:var(--f-display);font-weight:600;font-size:var(--s1);white-space:nowrap;text-transform:uppercase;letter-spacing:-.01em}
.marquee__item:nth-child(even){color:var(--abyss);-webkit-text-fill-color:var(--abyss);-webkit-text-stroke:2px rgba(237,237,237,.7);paint-order:stroke fill}
.marquee__item:nth-child(even) .marquee__star{-webkit-text-stroke:0}
.marquee__star{width:18px;height:18px;color:var(--cobalt);flex:none}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section{position:relative}
.sec{padding-block:clamp(88px,12vw,180px)}
.sec__head{display:grid;gap:20px;margin-bottom:clamp(40px,6vw,88px)}
.sec__title{font-family:var(--f-display);font-weight:600;font-size:var(--s3);line-height:1;letter-spacing:-.03em;margin:0;text-wrap:balance}
.sec__title em{font-style:normal;color:var(--azure)}
@media (min-width:900px){.sec__head{grid-template-columns:repeat(12,1fr);align-items:end}.sec__head .eyebrow{grid-column:1 / span 3}.sec__head .sec__title{grid-column:4 / span 9}}

/* about */
.manifesto{font-family:var(--f-display);font-weight:400;font-size:var(--s2);line-height:1.22;letter-spacing:-.02em;max-width:24ch;margin:0;text-wrap:balance}
@media (min-width:900px){.manifesto{margin-left:25%}}
.manifesto .w{opacity:.28;transition:opacity .2s}
.manifesto .hl{color:var(--azure)}
.about-grid{display:grid;gap:16px;margin-top:clamp(48px,7vw,96px)}
.bio{border-radius:24px;padding:clamp(24px,3vw,40px);display:grid;gap:20px;min-width:0}
.bio__cols{display:grid;gap:16px 40px}
.bio p{margin:0;color:var(--mist-dim);max-width:60ch}
.bio p strong{color:var(--mist);font-weight:500}
.bio__meta{display:flex;flex-wrap:wrap;gap:8px}
@media (min-width:900px){.bio__cols{grid-template-columns:1fr 1fr}}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-radius:24px;overflow:hidden}
.fact{padding:22px clamp(16px,2.4vw,32px);display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:10px;min-height:112px;border-color:var(--glass-edge);border-style:solid;border-width:0}
.fact:nth-child(odd){border-right-width:1px}
.fact:nth-child(-n+2){border-bottom-width:1px}
.fact b{font-family:var(--f-display);font-weight:600;font-size:var(--s2);line-height:1;font-variant-numeric:tabular-nums;color:var(--mist);flex:none;min-width:2.6ch}
.fact span{font-size:.92rem;color:var(--mist-dim);line-height:1.35}
@media (min-width:1200px){.fact{flex-direction:row;align-items:center;gap:16px;min-height:104px}.fact span{max-width:16ch}}
@media (min-width:900px){.facts{grid-template-columns:repeat(4,minmax(0,1fr))}.fact{border-width:0!important}.fact:not(:last-child){border-right-width:1px!important}}

/* tags */
.tag{font-family:var(--f-mono);font-size:.75rem;padding:5px 10px;border:1px solid var(--glass-edge);border-radius:999px;color:var(--mist-dim);white-space:nowrap;background:rgba(237,237,237,.03)}

/* work list */
.work{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.work__row{position:relative;border-bottom:1px solid var(--line)}
.work__link{display:grid;grid-template-columns:1fr auto;gap:8px 24px;align-items:center;padding:28px 4px;text-decoration:none;min-height:44px}
.work__name{font-family:var(--f-display);font-weight:600;font-size:var(--s2);line-height:1.05;letter-spacing:-.025em;transition:transform .6s var(--ease),color .3s}
.work__kind{grid-column:1;color:var(--mist-dim);font-size:.95rem}
.work__year{grid-row:1 / span 2;grid-column:2;color:var(--mist-dim);display:inline-flex;align-items:center;gap:8px}
.work__year svg{width:14px;height:14px}
.work__tags{display:none;gap:8px;flex-wrap:wrap}
.work__row::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,71,171,.35),rgba(0,71,171,0));transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--ease);pointer-events:none}
.work__row:hover::before,.work__row:focus-within::before{transform:scaleY(1)}
.work__row:hover .work__name{transform:translateX(18px);color:var(--azure)}
@media (min-width:900px){.work__link{grid-template-columns:5fr 4fr 3fr 1fr;padding:36px 8px}.work__kind{grid-column:auto}.work__tags{display:flex}.work__year{grid-row:auto;grid-column:auto;justify-content:flex-end}}
.also{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:32px;color:var(--mist-dim)}
.also .mono{margin-right:8px}
.preview{position:fixed;left:0;top:0;z-index:40;width:340px;aspect-ratio:4/3;pointer-events:none;opacity:0;border-radius:18px;overflow:hidden;filter:url(#warp);display:none}
@media (hover:hover) and (pointer:fine){.preview{display:block}}
.preview__win{position:absolute;inset:0;border-radius:18px;overflow:hidden}
.preview__bar{height:24px;display:flex;gap:6px;align-items:center;padding-left:12px;background:rgba(237,237,237,.06)}
.preview__bar i{width:7px;height:7px;border-radius:50%;background:var(--mist-faint)}
.preview__body{position:absolute;inset:24px 0 0;padding:18px;display:grid;gap:10px;align-content:start}
.preview__hero{height:96px;border-radius:10px}
.preview__l{height:8px;border-radius:4px;background:var(--mist-faint)}
.preview__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.preview__cards span{height:54px;border-radius:8px;background:rgba(237,237,237,.08)}
.preview__label{position:absolute;right:12px;bottom:12px;font-family:var(--f-mono);font-size:11px;padding:4px 10px;border-radius:999px;background:var(--mist);color:var(--ink)}

/* services */
.svc{display:grid;gap:16px}
@media (min-width:700px){.svc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.svc{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{--mx:50%;--my:50%;position:relative;padding:32px 28px 32px;border-radius:24px;overflow:hidden;min-width:0;display:flex;flex-direction:column;gap:16px;transition:transform .6s var(--ease),border-color .3s}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(0,102,204,.28),transparent 45%);opacity:0;transition:opacity .4s;pointer-events:none}
.card:hover{transform:translateY(-6px);border-color:rgba(0,153,255,.45)}
.card:hover::before{opacity:1}
.card__icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--royal),var(--cobalt));color:var(--mist);box-shadow:0 8px 24px -6px rgba(0,71,171,.7)}
.card__icon svg{width:24px;height:24px}
.card h3{font-family:var(--f-display);font-weight:600;font-size:1.2rem;line-height:1.2;margin:8px 0 0;letter-spacing:-.01em}
.card p{margin:0;color:var(--mist-dim);font-size:.98rem}
.card ul{list-style:none;margin:auto 0 0;padding:16px 0 0;display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid var(--glass-edge)}

/* performance */
.perf{display:grid;gap:48px}
@media (min-width:1000px){.perf{grid-template-columns:5fr 7fr;align-items:center}}
.perf__panel{border-radius:28px;padding:clamp(24px,3.4vw,44px)}
.gauges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
@media (min-width:600px){.gauges{grid-template-columns:repeat(4,minmax(0,1fr))}}
.gauge{display:grid;justify-items:center;gap:12px;text-align:center}
.gauge svg{width:min(116px,100%);height:auto;overflow:visible}
.gauge__track{fill:none;stroke:var(--mist-faint);stroke-width:6}
.gauge__val{fill:none;stroke:var(--ok);stroke-width:6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}
.gauge__num{font-family:var(--f-display);font-weight:600;font-size:26px;fill:var(--ok)}
.gauge span{font-size:.9rem;color:var(--mist-dim)}
.vitals{display:grid;gap:12px;margin-top:32px}
@media (min-width:600px){.vitals{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vital{border-radius:16px;padding:16px 18px;background:rgba(0,0,26,.35);border:1px solid var(--glass-edge)}
.vital b{display:block;font-family:var(--f-display);font-weight:600;font-size:1.05rem}
.vital span{font-size:.88rem;color:var(--mist-dim)}
.perf__copy p{color:var(--mist-dim);max-width:46ch}


/* process */
.process{overflow:hidden}
.process__track{display:grid;gap:16px}
.step{position:relative;border-radius:28px;padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;gap:18px;min-width:0}
.step__n{font-family:var(--f-display);font-weight:800;font-size:clamp(4rem,9vw,8rem);line-height:.8;color:var(--ink);-webkit-text-fill-color:var(--ink);-webkit-text-stroke:3px var(--mist);paint-order:stroke fill}
.step h3{font-family:var(--f-display);font-weight:600;font-size:var(--s2);margin:0;line-height:1.05;letter-spacing:-.02em}
.step p{margin:0;color:var(--mist-dim);max-width:40ch}
.step .mono{color:var(--azure)}
.process__bar{height:2px;background:var(--mist-faint);margin-top:32px;border-radius:2px;overflow:hidden;display:none}
.process__bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--royal),var(--azure));transform-origin:left;transform:scaleX(0)}
@media (min-width:1000px){
  .process.is-pinned .process__track{display:flex;gap:24px;width:max-content;will-change:transform}
  .process.is-pinned .step{width:min(560px,42vw);min-height:min(440px,58vh)}
  .process.is-pinned .process__bar{display:block}
}
@media (min-width:700px){.process:not(.is-pinned) .process__track{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* contact */
.contact{padding-block:clamp(100px,14vw,200px) 64px}
.contact__big{font-family:var(--f-display);font-weight:800;font-size:clamp(2.6rem,1rem + 7vw,5rem);line-height:.92;letter-spacing:-.04em;text-transform:uppercase;margin:0}
.contact__big span{display:block;white-space:nowrap}
.contact__big .outline{color:var(--ink);-webkit-text-fill-color:var(--ink);-webkit-text-stroke:3px var(--mist);paint-order:stroke fill}
.contact__big .grad{background:linear-gradient(100deg,var(--royal),var(--cobalt) 50%,#1A7FE0);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 28px rgba(0,71,171,.55))}
.contact__head{container-type:inline-size;margin-bottom:clamp(36px,5vw,64px);display:grid;gap:24px}
.contact__head .contact__big{font-size:min(var(--s4),13.2cqi)}
.contact__layout{display:grid;gap:16px}
@media (min-width:1000px){.contact__layout{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:stretch}}
.mail{border-radius:32px;padding:clamp(28px,4.5vw,56px);position:relative;overflow:hidden;isolation:isolate;display:grid;gap:clamp(20px,2.6vw,32px);align-content:start;min-width:0}
.mail::after{content:"";position:absolute;width:560px;height:560px;right:-220px;top:-300px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,102,204,.4),transparent);pointer-events:none;z-index:-1}
.mail__lead{margin:0;color:var(--mist-dim);max-width:44ch;font-size:var(--s1);line-height:1.45}
.mail__body{container-type:inline-size;min-width:0}
.mail__link{display:inline-flex;align-items:center;gap:.3em;max-width:100%;font-family:var(--f-display);font-weight:600;font-size:min(4.4rem,7.4cqi);line-height:1.15;letter-spacing:-.03em;text-decoration:none;color:var(--mist);white-space:nowrap}
.mail__text{background:linear-gradient(90deg,var(--azure),var(--cobalt)) left bottom/0% 3px no-repeat;padding-bottom:.1em;transition:background-size .6s var(--ease),color .3s}
.mail__link:hover .mail__text,.mail__link:focus-visible .mail__text{background-size:100% 3px;color:#fff}
.mail__arrow{width:.62em;height:.62em;flex:none;color:var(--azure);transition:transform .5s var(--ease)}
.mail__link:hover .mail__arrow,.mail__link:focus-visible .mail__arrow{transform:translate(.1em,-.1em)}
.mail__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;color:var(--mist-dim);font-size:.95rem}
.copy{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--glass-edge);background:rgba(237,237,237,.05);color:var(--mist);font:500 .92rem var(--f-body);cursor:pointer;transition:background .25s,border-color .25s}
.copy svg{width:16px;height:16px}
.copy:hover{background:var(--cobalt);border-color:var(--cobalt)}
.mail__brief{display:grid;gap:14px;padding-top:clamp(20px,2.6vw,28px);border-top:1px solid var(--glass-edge)}
.mail__brief ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.mail__brief .tag{font-size:.8rem;padding:7px 12px}
.cfacts{display:grid;gap:16px;align-content:stretch}
@media (min-width:640px) and (max-width:999px){.cfacts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cfact{border-radius:24px;padding:22px 24px;display:flex;gap:16px;align-items:center;min-width:0}
@media (min-width:640px) and (max-width:999px){.cfact{flex-direction:column;align-items:flex-start}}
.cfact__icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none;background:linear-gradient(135deg,var(--royal),var(--cobalt));color:var(--mist);box-shadow:0 8px 24px -6px rgba(0,71,171,.7)}
.cfact__icon svg{width:22px;height:22px}
.cfact b{display:block;font-weight:500;color:var(--mist);line-height:1.3}
.cfact div span{display:block;color:var(--mist-dim);font-size:.9rem;margin-top:2px}
@media (max-width:599px){.mail{padding:26px 22px;border-radius:26px}.mail__hint{display:none}}

footer{border-top:1px solid var(--glass-edge);background:rgba(0,0,26,.4);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-block:28px;color:var(--mist-dim);font-size:.9rem}
.foot a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.foot a:hover{color:var(--mist)}
.foot{align-items:center}
@media (max-width:599px){.foot{display:grid;grid-template-columns:1fr auto;gap:6px 16px}.foot > span:first-child{grid-column:1}.foot > .mono{grid-column:1;grid-row:2}.foot .totop{grid-column:2;grid-row:1 / span 2;font-size:0;gap:0}.foot .totop__icon{font-size:1rem}}
.totop{gap:12px;color:var(--mist)}
.totop__icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--glass-edge);background:var(--glass);overflow:hidden;transition:background .3s,border-color .3s}
.totop__icon svg{width:18px;height:18px;transition:transform .45s var(--ease)}
.totop:hover .totop__icon{background:var(--cobalt);border-color:var(--cobalt)}
.totop:hover .totop__icon svg{animation:liftArrow .6s var(--ease)}
@keyframes liftArrow{0%{transform:translateY(0)}45%{transform:translateY(-140%)}46%{transform:translateY(140%)}100%{transform:translateY(0)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .manifesto .w{opacity:1}
  .loader{display:none}
}