@font-face{font-family:Tajarib;src:url(/assets/fonts/Tajarib-Light.otf) format("opentype");font-weight:300;font-display:swap}
@font-face{font-family:Tajarib;src:url(/assets/fonts/Tajarib-Regular.otf) format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:Tajarib;src:url(/assets/fonts/Tajarib-Medium.otf) format("opentype");font-weight:500;font-display:swap}
@font-face{font-family:Tajarib;src:url(/assets/fonts/Tajarib-Bold.otf) format("opentype");font-weight:600 700;font-display:swap}
@font-face{font-family:Tajarib;src:url(/assets/fonts/Tajarib-Black.otf) format("opentype");font-weight:800 900;font-display:swap}
@font-face{font-family:Milan;src:url(/assets/fonts/Milan-Black.otf) format("opentype");font-weight:900;font-display:swap}
html{scroll-snap-type:y mandatory;scroll-behavior:smooth}
@media (max-width:760px){html{scroll-snap-type:y proximity}}
body{margin:0;background:#07090F}
a{color:#F2EEE8;text-decoration:none}a:hover{color:#9FDBF0}
.glass{background:rgba(255,255,255,.045);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 30px 80px rgba(0,0,0,.45)}
.ribbed{background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0px,rgba(255,255,255,.02) 3px,rgba(0,0,0,.25) 9px,rgba(255,255,255,.06) 14px);animation:shim 7s linear infinite}
.halftone{background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1.4px);background-size:7px 7px}
.notch{clip-path:polygon(0 0,62% 0,66% 44px,100% 44px,100% 100%,0 100%)}
@keyframes shim{to{background-position:140px 0}}
@keyframes satin{0%{background-position:0% 50%}100%{background-position:100% 50%}}
.flute{backdrop-filter:blur(9px) saturate(135%) brightness(1.08);-webkit-backdrop-filter:blur(9px) saturate(135%) brightness(1.08);background-image:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0px,rgba(255,255,255,.05) 5px,rgba(255,255,255,.16) 9px,rgba(255,255,255,.04) 11px,rgba(0,0,0,.14) 14px,rgba(0,0,0,0) 16px),linear-gradient(90deg,rgba(255,255,255,.02),rgba(255,255,255,.07) 85%,rgba(255,255,255,.12));box-shadow:inset -1px 0 0 rgba(255,255,255,.35),inset -14px 0 24px -14px rgba(255,255,255,.18),14px 0 30px -18px rgba(0,0,0,.6);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.92),#000 30%,#000 70%,rgba(0,0,0,.92));mask-image:linear-gradient(180deg,rgba(0,0,0,.92),#000 30%,#000 70%,rgba(0,0,0,.92))}
@keyframes star{0%,100%{opacity:.35;transform:scale(.8) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(45deg)}}
.star{display:inline-block;animation:star 2.4s ease-in-out infinite}
@keyframes marq{to{transform:translateX(-50%)}}
.marq{display:flex;width:max-content;gap:56px;animation:marq 26s linear infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(23,70,255,.7)}50%{box-shadow:0 0 0 8px rgba(23,70,255,0)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

.pg{position:relative;min-height:100vh;box-sizing:border-box;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;justify-content:center;overflow:hidden}

/* AI cursor: flies to the element it builds, clicks, labels its task */
.cur{position:absolute;left:var(--x0);top:var(--y0);z-index:40;pointer-events:none;display:flex;align-items:flex-start;gap:2px;opacity:0;filter:drop-shadow(0 6px 14px rgba(0,0,0,.55))}
.cur .lb{margin-top:16px;padding:6px 10px 7px;border-radius:8px 2px 8px 8px;color:#fff;white-space:nowrap;background:var(--c);display:flex;flex-direction:column;gap:3px}
.cur .lb.dk{color:#07090F}
.cur .ag{font:600 10px/1 Tajarib,sans-serif;opacity:.8}
.cur .tk{font:800 13px/1 Tajarib,sans-serif}
.cur .ring{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;border:2px solid var(--c);opacity:0}
@keyframes curGo{0%{left:var(--x0);top:var(--y0);opacity:0}8%{opacity:1}34%{left:var(--x1);top:var(--y1);transform:scale(1)}39%{transform:scale(.78)}44%{transform:scale(1)}82%{left:var(--x1);top:var(--y1);opacity:1}100%{left:calc(var(--x1) + 30px);top:calc(var(--y1) + 40px);opacity:0}}
@keyframes ring{0%,33%{opacity:0;transform:scale(.4)}38%{opacity:1;transform:scale(.6)}60%{opacity:0;transform:scale(1.8)}100%{opacity:0}}
.pg.on .cur{animation:curGo 2.7s cubic-bezier(.45,0,.2,1) both}
.pg.on .cur .ring{animation:ring 2.7s ease-out both;animation-delay:inherit}

/* ghost -> built */
.pg .bx{opacity:.1;transform:translateY(30px) scale(.97);filter:blur(6px) grayscale(1);outline:1.5px dashed rgba(143,166,255,.95);outline-offset:14px}
@keyframes rise{0%{opacity:.1;transform:translateY(30px) scale(.97);filter:blur(6px) grayscale(1);outline:1.5px dashed rgba(143,166,255,.95);outline-offset:14px}60%{opacity:1;transform:none;filter:blur(0) grayscale(0);outline-color:rgba(143,166,255,.95);outline-offset:6px}100%{opacity:1;transform:none;filter:none;outline:1.5px dashed rgba(143,166,255,0);outline-offset:6px}}
.pg.on .bx{animation:rise 1.1s cubic-bezier(.2,.8,.2,1) both}
.pg .tw{clip-path:inset(0 0 0 100%)}
@keyframes type{0%{clip-path:inset(0 0 0 100%)}100%{clip-path:inset(0 0 0 0)}}
.pg.on .tw{animation:type 1.3s steps(20,end) both}
.pg .gw{opacity:.06;letter-spacing:.3em;filter:blur(18px)}
@keyframes giant{0%{opacity:.06;letter-spacing:.3em;filter:blur(18px)}100%{opacity:.95;letter-spacing:-.01em;filter:blur(0)}}
.pg.on .gw{animation:giant 1.8s cubic-bezier(.2,.8,.2,1) both}
/* timing: base .9s, each step +.3s (cursor arrives just before) */
.pg.on .bx,.pg.on .tw,.pg.on .gw{animation-delay:.9s}
.pg.on .d1{animation-delay:1.2s}.pg.on .d2{animation-delay:1.5s}.pg.on .d3{animation-delay:1.8s}.pg.on .d4{animation-delay:2.1s}.pg.on .d5{animation-delay:2.4s}.pg.on .d6{animation-delay:2.7s}.pg.on .d7{animation-delay:3s}.pg.on .d8{animation-delay:3.3s}

.stat{position:absolute;top:22px;left:24px;z-index:20;display:flex;gap:8px;align-items:center;padding:8px 14px;border-radius:999px;font-size:12px;font-weight:700;background:rgba(7,9,15,.6);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px)}
.stat .bl,.stat .dn{display:inline-block;white-space:nowrap;overflow:hidden;vertical-align:middle;max-width:420px}
.stat .dn{max-width:0;color:#9FDBF0}
@keyframes hideA{0%,99%{max-width:420px}100%{max-width:0}}
@keyframes showB{0%,99%{max-width:0}100%{max-width:420px}}
.pg.on .stat .bl{animation:hideA 4.4s forwards}
.pg.on .stat .dn{animation:showB 4.4s forwards}

.prog{transform:scaleX(0)}
@supports (animation-timeline: scroll()){ .prog{animation:grow linear both;animation-timeline:scroll(root)} }
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){
  .pg .bx,.pg .tw,.pg .gw{animation:none!important;opacity:1;transform:none;filter:none;outline:none;clip-path:none;letter-spacing:normal}
  .cur{display:none}.ribbed,.star,.marq{animation:none}
}

.curs{position:absolute;inset:0;pointer-events:none;z-index:40}
.wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 24px;box-sizing:border-box}
.kick{font-size:12px;letter-spacing:.32em;color:#8FA6FF;direction:ltr;text-align:right}
.h2{margin:12px 0 0;font-family:Milan,Tajarib,sans-serif;font-weight:900;font-size:clamp(34px,4vw,56px);line-height:1.25}
.lead{margin:14px 0 0;max-width:640px;font-size:18px;line-height:1.9;color:#CFC9C3}
.btn{display:inline-block;padding:15px 26px;border-radius:14px;font-weight:700;color:#fff;background:#1746FF}
.btn:hover{color:#fff;background:#1129C0}
.btn2{display:inline-block;padding:15px 26px;border-radius:14px;border:1px solid rgba(255,255,255,.22)}
.grid{display:grid;gap:16px}
.card{position:relative;overflow:hidden;border-radius:22px;padding:24px}
.nav a{padding:10px 15px;font-size:15px;border-radius:999px}
.nav a.cur-page{background:rgba(23,70,255,.35);color:#fff}
.chip{padding:10px 16px;border-radius:999px;font-size:14px;font-weight:700;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:#F2EEE8;cursor:pointer;font-family:Tajarib,sans-serif}
.chip.on{background:#1746FF;border-color:#1746FF}
.work{position:relative;display:block;height:260px;border-radius:22px;overflow:hidden;background:#0B0F18}
.work img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.work:hover img{transform:scale(1.06)}
.work .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(7,9,15,.55);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3)}
.field{display:flex;flex-direction:column;gap:8px;font-size:14px;color:#CFC9C3}
label.field{min-width:0}
.field input,.field textarea,.field select{width:100%;box-sizing:border-box;min-width:0;font:16px Tajarib,sans-serif;color:#F2EEE8;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:14px 16px;outline:none}
.field input:focus,.field textarea:focus,.field select:focus{border-color:#9FDBF0}
.field select option{background:#0B0F18}
.video{position:relative;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:#000;box-shadow:0 40px 100px rgba(23,70,255,.3)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:760px){.nav{display:none!important}.pg{min-height:auto;padding-top:70px!important;padding-bottom:50px!important}}