/* Generated from prototypes/landing-at/index.html by build_site.py. Edit the prototype, then rebuild. */
/* =====================================================================
   SmartWeb · Smart.Web.Solutions — WebGL edition of the first landing.
   A raymarched 3D cat-in-a-cup, 262k GPU particles that carry the first
   landing's fluid, headings drawn by particles, case studies, reactive sound.
   ===================================================================== */
:root{
  color-scheme: dark;
  --void:#030507;
  --ice:#E6F5F7; --ice-2:#AFC2C8; --ice-3:#6E838A;
  --line:rgba(230,245,247,.12); --line-2:rgba(230,245,247,.26);
  --glow:#36E0D8; --glow-2:#3F6BFF; --glow-3:#8A5CFF;
  --accent:#36E0D8;
  --f-tech:"Tektur","Onest",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"Cascadia Code",Consolas,monospace;
  --f-body:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-io:cubic-bezier(.7,0,.2,1);
  --edge:32px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;overscroll-behavior:none}
body{margin:0;background:var(--void);color:var(--ice);font:300 15px/1.6 var(--f-body);overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a{color:inherit}
button{font:inherit;color:inherit}
img{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:1px solid var(--glow);outline-offset:4px}

/* Headings are drawn by particles; the DOM text stays for layout, screen readers and the no-WebGL fallback */
.gl-on .gl-text,.gl-on .gl-text *{color:transparent!important;text-shadow:none!important}

/* ---------- Stage ---------- */
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;touch-action:none}
.fb{position:fixed;inset:0;z-index:0;display:none;background:radial-gradient(60vw 50vh at 30% 30%,color-mix(in srgb,var(--glow) 16%,transparent),transparent 60%),radial-gradient(50vw 50vh at 75% 70%,color-mix(in srgb,var(--glow-3) 16%,transparent),transparent 60%),var(--void)}
.no-gl .fb{display:block}
.no-gl #gl{display:none}

/* ---------- Loader ---------- */
.loader{position:fixed;inset:0;z-index:100;background:#000;display:grid;place-items:center;align-content:center;gap:20px;transition:opacity 1s var(--ease)}
.loader.out{opacity:0;pointer-events:none}
.loader canvas{display:block;transition:transform 1.2s var(--ease-io),filter 1.2s}
.loader.out canvas{transform:scale(1.35);filter:blur(6px)}
.ld-n{margin:0;font:500 12px/1 var(--f-mono);letter-spacing:.14em;color:var(--glow);text-align:center;min-width:6ch}
.ld-s{margin:0;font:500 10.5px/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:#3C4E54}

/* ---------- HUD ---------- */
.hud{position:fixed;z-index:30;font:500 11.5px/1.45 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ice-2)}
.tl{top:calc(var(--edge) - 6px + env(safe-area-inset-top,0px));left:var(--edge);display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ice);font:400 19px/1 var(--f-tech);letter-spacing:.01em;text-transform:none}
.brand .mark{position:relative;width:38px;height:38px;display:grid;place-items:center}
.brand .mark::before{content:"";position:absolute;inset:0;border-radius:50%;padding:1.3px;background:conic-gradient(from 0deg,var(--glow-3),var(--glow-2),var(--glow),transparent 78%,var(--glow-3));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 7s linear infinite}
.brand svg{width:19px;height:23px;color:var(--ice);--cat-w:var(--glow)}
.brand b{font-weight:400;color:var(--ice-3)}
.tgl{display:inline-flex;align-items:center;gap:9px;height:30px;padding:0;border:0;background:none;cursor:pointer;font:500 11.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ice-3);transition:color .3s}
.tgl:hover{color:var(--ice)}
.bars{display:inline-flex;align-items:flex-end;gap:2px;height:11px}
.bars i{width:2px;height:3px;background:currentColor;transition:height .12s}
.sound[aria-pressed="true"]{color:var(--ice)}
.mood .dot{width:6px;height:6px;border-radius:50%;background:var(--glow);box-shadow:0 0 10px var(--glow)}
.mood b{font-weight:500;color:var(--ice-2)}
.sep{width:1px;height:14px;background:var(--line-2)}

.pill{position:fixed;z-index:40;top:calc(var(--edge) - 8px + env(safe-area-inset-top,0px));right:var(--edge);display:flex;align-items:center;padding:5px;border-radius:999px;
  background:linear-gradient(180deg,rgba(20,29,34,.86),rgba(6,9,12,.9));border:1px solid var(--line-2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 40px -12px color-mix(in srgb,var(--glow-3) 70%,transparent),0 22px 30px -22px var(--glow)}
.pill::after{content:"";position:absolute;left:14%;right:14%;bottom:-16px;height:22px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--glow-3) 80%,transparent),transparent);filter:blur(7px);pointer-events:none;opacity:.9}
.pill button{border:0;background:none;cursor:pointer;padding:11px 18px;border-radius:999px;font:400 12.5px/1 var(--f-tech);letter-spacing:.18em;text-transform:uppercase;color:var(--ice-2);transition:color .3s,text-shadow .3s}
.pill button:hover,.pill button[aria-current="true"]{color:var(--ice);text-shadow:0 0 14px var(--glow)}
.wire{width:56px;height:16px;flex:none;overflow:visible}
.wire path{fill:none;stroke:var(--ice-3);stroke-width:1.2;transition:opacity .4s}
.wire .wave{opacity:0;stroke:var(--glow);stroke-dasharray:6 4;animation:dash 1.2s linear infinite}
.pill:hover .wire .line,body:not([data-state="home"]) .wire .line{opacity:0}
.pill:hover .wire .wave,body:not([data-state="home"]) .wire .wave{opacity:1}
@keyframes dash{to{stroke-dashoffset:-20}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Views ---------- */
.view{position:fixed;inset:0;z-index:20;pointer-events:none;visibility:hidden}
.view.on{visibility:visible}
.view a,.view button,.view input,.view textarea,.view .scroller{pointer-events:auto}
.ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.ln>span{display:block;transform:translateY(105%);transition:transform 1s var(--ease-io)}
.on .ln>span{transform:none}
.on .ln:nth-child(2)>span{transition-delay:.08s}
.gl-on .ln>span{transform:none;transition:none}
.fade{opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.on .fade{opacity:1;transform:none;transition-delay:.45s}
.on .fade.d2{transition-delay:.6s}
.on .fade.d3{transition-delay:.75s}
.view:not(.on) .ln>span,.view:not(.on) .fade{transition-duration:.3s;transition-delay:0s}

.kick{margin:0 0 18px;font:500 11.5px/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--ice-3)}
.kick b{font-weight:500;color:var(--glow)}

/* Home */
.h-title{position:absolute;left:var(--edge);bottom:calc(var(--edge) + 4px + env(safe-area-inset-bottom,0px));margin:0}
.h-title h1{margin:0;font:400 clamp(46px,7.2vw,124px)/.92 var(--f-tech);letter-spacing:.015em;text-transform:uppercase}
.h-title h1 i{font-style:normal;color:var(--glow);text-shadow:0 0 26px var(--glow)}
.h-side{position:absolute;right:var(--edge);bottom:calc(var(--edge) + 4px + env(safe-area-inset-bottom,0px));width:min(370px,34vw);display:grid;gap:22px;justify-items:start}
.h-side p{margin:0;font:300 16px/1.6 var(--f-body);color:var(--ice-2)}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.metrics{position:absolute;right:var(--edge);top:50%;transform:translateY(-50%);display:grid;gap:22px;margin:0;text-align:right}
.metrics div{display:grid;gap:5px}
.metrics dt{font:500 10.5px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ice-3)}
.metrics dd{margin:0;font:400 20px/1 var(--f-tech);letter-spacing:.04em;color:var(--ice)}
.metrics::before{content:"";position:absolute;right:-14px;top:0;bottom:0;width:1px;background:linear-gradient(transparent,var(--line-2),transparent)}
.hint{position:absolute;left:50%;top:67%;transform:translateX(-50%);margin:0;font:500 10.5px/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--ice-3);white-space:nowrap;transition:opacity 1s}
.hint.gone{opacity:0}
.swipe-cue{display:none}
@media (hover:none) and (pointer:coarse){                 /* phones: a quiet "swipe up" cue on the home screen */
  .swipe-cue{display:flex;position:fixed;right:10px;top:44%;z-index:5;flex-direction:column;align-items:center;gap:8px;pointer-events:none;opacity:0;transition:opacity .8s}
  body[data-state="home"] .swipe-cue{opacity:.8}
  body.swiped .swipe-cue{opacity:0!important}
  .swipe-cue i{position:relative;width:1px;height:42px;background:linear-gradient(var(--ice-3),transparent)}
  .swipe-cue i::after{content:"";position:absolute;left:-2px;top:38px;width:5px;height:5px;border-radius:50%;background:var(--glow);animation:cue 1.8s var(--ease) infinite}
  .swipe-cue span{font:500 9px/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--ice-3);writing-mode:vertical-rl}
  @keyframes cue{0%{top:38px;opacity:0}25%{opacity:1}100%{top:0;opacity:0}}
}

/* Bracket buttons */
.bracket{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 22px;border:0;background:rgba(230,245,247,.035);cursor:pointer;text-decoration:none;font:400 12.5px/1 var(--f-tech);letter-spacing:.17em;text-transform:uppercase;color:var(--ice);transition:background .35s,color .35s}
.bracket::before,.bracket::after{content:"";position:absolute;width:9px;height:9px;border:1px solid var(--ice-2);transition:width .5s var(--ease),height .5s var(--ease),border-color .35s;pointer-events:none}
.bracket::before{left:0;top:0;border-right:0;border-bottom:0}
.bracket::after{right:0;bottom:0;border-left:0;border-top:0}
.bracket:hover::before,.bracket:hover::after,.bracket:focus-visible::before,.bracket:focus-visible::after{width:100%;height:100%;border-color:var(--glow)}
.bracket.primary{background:color-mix(in srgb,var(--glow) 13%,transparent)}
.bracket:hover{background:color-mix(in srgb,var(--glow) 20%,transparent)}
.bracket:focus-visible{outline:none}
.bracket .ar{font-family:var(--f-mono);color:var(--glow)}

/* Work */
.plist{position:absolute;left:var(--edge);top:50%;transform:translateY(-58%);margin:0;padding:0;list-style:none;display:grid;gap:2px}
.plist button{display:flex;align-items:center;gap:14px;width:100%;padding:7px 0;border:0;background:none;cursor:pointer;font:500 11.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ice-3);text-align:left;transition:color .3s}
.plist button i{display:block;width:14px;height:1px;background:currentColor;transition:width .5s var(--ease),background .3s}
.plist button:hover{color:var(--ice-2)}
.plist button[aria-current="true"]{color:var(--ice)}
.plist button[aria-current="true"] i{width:36px;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.p-info{position:absolute;left:var(--edge);bottom:calc(var(--edge) + 4px + env(safe-area-inset-bottom,0px));display:grid;gap:12px;max-width:min(640px,calc(100vw - 2 * var(--edge)))}
.p-idx{margin:0;font:500 11.5px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ice-3)}
.p-idx b{font-weight:500;color:var(--accent)}
.p-name{margin:0;font:400 clamp(40px,5vw,84px)/.92 var(--f-tech);letter-spacing:.02em;text-transform:uppercase}
.p-meta{margin:0;font:400 12.5px/1.5 var(--f-tech);letter-spacing:.16em;text-transform:uppercase;color:var(--ice-2)}
.p-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.pager{position:fixed;z-index:35;top:calc(var(--edge) + 50px + env(safe-area-inset-top,0px));right:var(--edge);display:flex;align-items:center;gap:8px;padding:5px;border:1px solid var(--line);border-radius:7px;background:rgba(5,8,11,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .5s,transform .5s var(--ease),visibility 0s .5s}
body[data-state="work"] .pager,body[data-state="services"] .pager{opacity:1;visibility:visible;transform:none;transition:opacity .6s .4s,transform .6s .4s var(--ease),visibility 0s}
.pager button{width:36px;height:30px;border:1px solid var(--line-2);border-radius:4px;background:transparent;cursor:pointer;font:500 12px/1 var(--f-mono);color:var(--ice-2);transition:border-color .3s,color .3s}
.pager button:hover{border-color:var(--accent);color:var(--ice)}
.pager span{min-width:180px;text-align:center;font:500 11.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ice)}
.w-hint{position:absolute;right:var(--edge);bottom:calc(var(--edge) + 10px + env(safe-area-inset-bottom,0px));margin:0;font:500 10.5px/1.8 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ice-3);text-align:right}
.fb-shot,.fb-cat{display:none}
.no-gl .fb-shot{display:block;position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:min(56vw,820px);border:1px solid var(--line-2)}
.no-gl .fb-cat{display:grid;place-items:center;position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);width:min(36vh,58vw);aspect-ratio:1;border-radius:50%;border:2px solid transparent;background:linear-gradient(var(--void),var(--void)) padding-box,conic-gradient(var(--glow-3),var(--glow-2),var(--glow),var(--glow-3)) border-box;box-shadow:0 0 60px -10px var(--glow)}
.no-gl .fb-cat svg{width:48%;height:auto;color:var(--ice);--cat-w:var(--glow)}

/* Services */
.slist{top:calc(var(--edge) + 96px);transform:none}
.s-info{position:absolute;left:var(--edge);bottom:calc(var(--edge) + 4px + env(safe-area-inset-bottom,0px));display:grid;gap:14px;justify-items:start;max-width:min(600px,calc(100vw - 2 * var(--edge)))}
.s-name{margin:0;font:400 clamp(36px,4.2vw,72px)/.95 var(--f-tech);letter-spacing:.02em;text-transform:uppercase}
.s-desc{margin:0;font:300 16px/1.6 var(--f-body);color:var(--ice-2);max-width:52ch}
.s-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.s-tags li{font:500 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ice-2);border:1px solid var(--line-2);padding:7px 10px}
.s-plans{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;margin:2px 0 0;padding:0;list-style:none;width:min(520px,100%)}
.s-plans li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line);font:300 14px/1.3 var(--f-body);color:var(--ice-2)}
.s-plans b{font:500 12.5px/1.3 var(--f-mono);color:var(--ice);white-space:nowrap}
.s-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px;margin-top:4px}
.s-stats{display:flex;flex-wrap:wrap;gap:14px 30px}
.s-stat{display:grid;gap:5px}
.s-stat b{font:400 clamp(28px,2.8vw,44px)/1 var(--f-tech);letter-spacing:.02em;color:var(--accent);text-shadow:0 0 24px color-mix(in srgb,var(--accent) 45%,transparent)}
.s-stat span{font:500 10.5px/1.45 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ice-3);max-width:34ch}
/* Clients */
.k-info{position:absolute;left:var(--edge);bottom:calc(var(--edge) + 4px + env(safe-area-inset-bottom,0px));display:grid;gap:16px;justify-items:start;max-width:min(560px,calc(100vw - 2 * var(--edge)))}
.k-name{margin:0;font:400 clamp(40px,5vw,84px)/.92 var(--f-tech);letter-spacing:.02em;text-transform:uppercase}
.k-name em{font-style:normal;color:var(--glow)}
.k-about{margin:0;font:300 16px/1.65 var(--f-body);color:var(--ice-2);max-width:54ch}
/* magnetic controls */
.mag{transition:transform .35s var(--ease),background .35s,color .35s}

/* Contact */
.contact .scroller{position:absolute;left:0;top:0;bottom:0;width:min(640px,58vw);overflow-y:auto;overscroll-behavior:contain;padding:120px var(--edge) 70px;scrollbar-width:none}
.scroller::-webkit-scrollbar{display:none}
.c-title{margin:0 0 30px;font:400 clamp(38px,4.6vw,72px)/1 var(--f-tech);letter-spacing:.01em}
.c-title em{font-style:normal;color:var(--glow)}
.c-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 28px;margin-bottom:34px}
.c-mail{font:400 clamp(19px,1.9vw,26px)/1.2 var(--f-tech);text-decoration:none;background:linear-gradient(var(--glow),var(--glow)) 0 100%/0 1px no-repeat;padding-bottom:5px;transition:background-size .5s var(--ease)}
.c-mail:hover{background-size:100% 1px}
.c-phone{font:500 15px/1.3 var(--f-mono);letter-spacing:.06em;color:var(--ice-2);text-decoration:none}
.c-phone:hover{color:var(--ice)}
.frame{position:relative;padding:28px 28px 24px;background:rgba(4,7,10,.62);border:1px solid var(--line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.frame>.cn{position:absolute;width:13px;height:13px;border-color:var(--glow);border-style:solid;border-width:0}
.cn.tl{left:-1px;top:-1px;border-left-width:1px;border-top-width:1px}
.cn.tr{right:-1px;top:-1px;border-right-width:1px;border-top-width:1px}
.cn.bl{left:-1px;bottom:-1px;border-left-width:1px;border-bottom-width:1px}
.cn.br{right:-1px;bottom:-1px;border-right-width:1px;border-bottom-width:1px}
.f-label{margin:0 0 18px;font:500 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--glow)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.f{display:grid;gap:7px;margin-bottom:20px}
.f.full{grid-column:1/-1}
.f label{font:500 10.5px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ice-3)}
.f input,.f textarea{width:100%;border:0;border-bottom:1px solid var(--line-2);background:transparent;color:var(--ice);font:300 17px/1.4 var(--f-body);padding:6px 0 9px;border-radius:0;transition:border-color .3s}
.f textarea{min-height:76px;resize:vertical}
.f input:focus,.f textarea:focus{outline:none;border-bottom-color:var(--glow)}
.f input[aria-invalid="true"]{border-bottom-color:#FF6B6B}
.f .err{margin:0;font:400 13px/1.4 var(--f-body);color:#FF8F8F}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.form-row p{margin:0;font:300 12.5px/1.5 var(--f-body);color:var(--ice-3);max-width:26ch}
.ok{display:grid;gap:12px;justify-items:start}
.ok h3{margin:0;font:400 26px/1.1 var(--f-tech);letter-spacing:.08em;text-transform:uppercase;color:var(--glow)}
.ok p{margin:0;color:var(--ice-2)}
.ok .proto{font:500 11.5px/1.4 var(--f-mono);color:var(--ice-3)}
.c-links{display:flex;flex-wrap:wrap;gap:12px 28px;margin:26px 0 0;font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.c-links a{color:var(--ice-3);text-decoration:none}
.c-links a:hover{color:var(--ice)}

/* Case study */
.case .scroller{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.case-hero{position:relative;height:100vh;height:100svh}
.case-hero .kick{position:absolute;left:var(--edge);bottom:calc(var(--edge) + 150px)}
.case-title{position:absolute;left:var(--edge);bottom:calc(var(--edge) + 56px);margin:0;font:400 clamp(52px,8vw,140px)/.9 var(--f-tech);letter-spacing:.02em;text-transform:uppercase}
.case-down{position:absolute;right:var(--edge);bottom:calc(var(--edge) + 60px);font:500 10.5px/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--ice-3)}
.case-body{position:relative;background:linear-gradient(180deg,rgba(3,5,7,0),rgba(3,5,7,.86) 120px,rgba(3,5,7,.94));padding:120px var(--edge) 80px}
.case-in{max-width:1200px;margin:0 auto;display:grid;gap:72px}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts div{display:grid;gap:10px}
.facts dt{font:500 10.5px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ice-3)}
.facts dd{margin:0;font:400 18px/1.35 var(--f-tech);letter-spacing:.03em}
.facts a{color:var(--glow);text-decoration:none}
.lead2{margin:0;max-width:30ch;font:400 clamp(26px,3vw,44px)/1.15 var(--f-tech);letter-spacing:.01em}
.lead2 em{font-style:normal;color:var(--accent)}
.intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:end}
.intro p{margin:0;color:var(--ice-2);font-size:17px;line-height:1.7;max-width:56ch}
.intro .lead2{font:400 clamp(26px,3vw,44px)/1.15 var(--f-tech);color:var(--ice);max-width:16ch}
.case::before{content:"";position:fixed;left:0;right:0;top:0;height:110px;z-index:2;pointer-events:none;background:linear-gradient(#030507 30%,rgba(3,5,7,0));opacity:var(--topfade,0);transition:opacity .3s}
.shot{margin:0;display:grid;gap:14px}
.shot .fr{border:1px solid var(--line-2);background:#06090C;overflow:hidden}
.shot .bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-bottom:1px solid var(--line);font:500 11px/1 var(--f-mono);color:var(--ice-3)}
.shot .bar i{width:8px;height:8px;border-radius:50%;background:rgba(230,245,247,.16)}
.shot .bar span{margin:0 auto}
.shot figcaption{display:flex;gap:16px;font:300 15px/1.6 var(--f-body);color:var(--ice-2);max-width:62ch}
.shot figcaption b{flex:none;font:500 11px/1.9 var(--f-mono);letter-spacing:.18em;color:var(--accent)}
.duo{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:28px;align-items:start}
.duo .phone .fr{border-radius:26px;border:6px solid #1A2329;max-width:340px}
.next{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;padding-top:40px;border-top:1px solid var(--line);text-decoration:none;color:var(--ice);cursor:pointer;background:none;border-left:0;border-right:0;border-bottom:0;width:100%;text-align:left}
.next span{font:500 11px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ice-3)}
.next strong{display:block;margin-top:14px;font:400 clamp(40px,7vw,120px)/.9 var(--f-tech);letter-spacing:.02em;text-transform:uppercase;transition:color .4s,text-shadow .4s}
.next:hover strong{color:var(--accent);text-shadow:0 0 30px color-mix(in srgb,var(--accent) 50%,transparent)}
.next .ar{font:400 48px/1 var(--f-mono);color:var(--accent)}
.case-close{position:fixed;z-index:36;top:calc(var(--edge) + 50px + env(safe-area-inset-top,0px));right:var(--edge);opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s}
body[data-state="case"] .case-close{opacity:1;visibility:visible;transition:opacity .6s .5s,visibility 0s}

.toast{position:fixed;left:50%;top:96px;transform:translateX(-50%);z-index:90;padding:11px 16px;background:rgba(5,8,11,.92);border:1px solid var(--line-2);font:500 11.5px/1.4 var(--f-mono);letter-spacing:.08em;color:var(--ice)}

/* Cursor */
.cur{position:fixed;left:0;top:0;z-index:200;pointer-events:none;display:none}
.has-cur .cur{display:block}
.cur i{position:absolute;left:0;top:0;border-radius:50%}
.cur .cd{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:var(--ice)}
.cur .cr{width:32px;height:32px;margin:-16px 0 0 -16px;border:1px solid color-mix(in srgb,var(--ice) 45%,transparent);transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease),border-color .3s,background .3s}
.cur .cl{position:absolute;left:0;top:0;transform:translate(-50%,-50%);font:500 9.5px/1 var(--f-mono);letter-spacing:.18em;color:var(--void);opacity:0;transition:opacity .3s;white-space:nowrap;text-transform:uppercase}
.cur.hot .cr{width:56px;height:56px;margin:-28px 0 0 -28px;border-color:var(--glow);background:color-mix(in srgb,var(--glow) 8%,transparent)}
.cur.look .cr{width:84px;height:84px;margin:-42px 0 0 -42px;border-color:var(--ice);background:var(--ice)}
.cur.look .cl{opacity:1}
.cur.look .cd{opacity:0}
.cur.hold .cr{width:120px;height:120px;margin:-60px 0 0 -60px;border-color:var(--glow);border-style:dashed;animation:spin 3s linear infinite;background:none}
.has-cur,.has-cur a,.has-cur button,.has-cur #gl{cursor:none}
.has-cur input,.has-cur textarea{cursor:text}

@media (prefers-reduced-motion:reduce){
  .brand .mark::before,.wire .wave,.cur.hold .cr,.swipe-cue i::after{animation:none}
  .ln>span,.fade{transition-duration:.01s!important}
}

/* ---------- Responsive ---------- */
@media (max-width:1180px){ .hint,.metrics{display:none} }
@media (max-width:980px){
  .plist,.w-hint{display:none}
  .intro,.duo{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
}
@media (max-width:760px){
  :root{--edge:18px}
  .tl{gap:14px}
  .brand{font-size:16px;gap:9px}
  .brand .mark{width:32px;height:32px}
  .brand .txt,.tl .lbl,.tl .mood,.tl .sep{display:none}
  .pill button{padding:10px 9px;font-size:10.5px;letter-spacing:.1em}
  .wire{display:none}
  .s-info,.k-info{bottom:calc(76px + env(safe-area-inset-bottom,0px));right:var(--edge);max-height:52vh;overflow-y:auto;pointer-events:auto;gap:10px;scrollbar-width:none}
  .k-info{bottom:calc(18px + env(safe-area-inset-bottom,0px));max-height:56vh}
  .k-name{font-size:clamp(36px,11vw,54px)}
  .k-about{font-size:14.5px}
  .pill button{padding:10px 7px}
  .s-name{font-size:clamp(30px,9.5vw,46px)}
  .s-desc{font-size:14.5px}
  .s-plans{grid-template-columns:1fr}
  body[data-state="services"] .pager{transform:translateX(-50%)}
  .h-title{bottom:auto;top:56%}
  .h-title h1{font-size:clamp(40px,13.4vw,66px)}
  .h-side{left:var(--edge);right:var(--edge);width:auto;gap:16px}
  .h-side p{font-size:14.5px}
  .ctas{width:100%}
  .ctas .bracket{flex:1 1 0;padding:0 12px;font-size:11px;letter-spacing:.12em}
  .pager{top:auto;right:auto;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom,0px))}
  body[data-state="work"] .pager{transform:translateX(-50%)}
  .pager span{min-width:140px;font-size:10.5px}
  .p-info{bottom:calc(76px + env(safe-area-inset-bottom,0px));gap:10px}
  .p-name{font-size:clamp(34px,11vw,52px)}
  .p-act .bracket{min-height:40px;padding:0 14px;font-size:10.5px}
  .contact .scroller{width:100%;padding:96px var(--edge) 60px}
  .fgrid{grid-template-columns:1fr}
  .frame{padding:22px 18px 18px}
  .case-title{font-size:clamp(44px,14vw,72px);bottom:calc(var(--edge) + 70px)}
  .case-hero .kick{bottom:calc(var(--edge) + 150px)}
  .case-down{bottom:calc(var(--edge) + 30px);right:auto;left:var(--edge)}
  .case-close{top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));right:var(--edge)}
  .case-body{padding:80px var(--edge) 90px}
  .no-gl .fb-shot{top:34%;width:88vw}
}
@media (max-width:760px) and (max-height:700px){ .h-title{top:52%} .h-side p{display:none} }