:root{padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
/* Layout concept: a haunted estate seen at night. The hero is the estate gate: a vector logo glowing over a castle skyline. Below it, each section is a lit room: bento cells, a live bot demo, a rail that fills as you scroll. */
:root{
  --ink:#080504;
  --crypt:#120b08;
  --crypt-hi:#1d120d;
  --line:#2f1d15;
  --edge:rgba(255,196,140,.13);
  --glass:rgba(255,214,170,.04);
  --ember:#ff7a1a;
  --glow:#ffb36b;
  --bone:#f1e5d3;
  --ash:#ad9c8c;
  --blood:#c4361c;
  --f-head:"Vazirmatn",Tahoma,system-ui,sans-serif;
  --f-body:"Vazirmatn",Tahoma,system-ui,sans-serif;
  --f-latin:"Cinzel Decorative",Georgia,serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  color-scheme:dark;
}
html{scroll-behavior:smooth;scroll-padding-top:112px}
body{background:var(--ink);color:var(--bone);font-family:var(--f-body);font-size:16px;line-height:1.9;-webkit-text-size-adjust:100%}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--ink)}
*,*::before,*::after{box-sizing:border-box}
a{color:inherit}
h1,h2,h3{font-family:var(--f-head);margin:0;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px}
.inner{max-width:1120px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.page{overflow-x:clip}
.rv{transform:translateY(26px)}
.rv{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{transform:none}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(8,5,4,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--glow),var(--ember));box-shadow:0 0 12px var(--ember);transform-origin:right;transform:scaleX(var(--sp,0))}
.top-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 24px;padding-block:10px}
.mark{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.mark-star{width:22px;height:22px;filter:drop-shadow(0 0 6px rgba(255,122,26,.9))}
.mark-name{font-family:var(--f-latin);font-weight:900;font-size:24px;letter-spacing:.08em;color:var(--glow);text-shadow:0 0 14px rgba(255,122,26,.65);line-height:1.2}
.mark-sub{font-family:var(--f-mono);font-size:10px;letter-spacing:.34em;color:var(--ash)}
.nav{display:flex;gap:2px;flex:1 1 320px;min-width:0;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{padding:6px 12px;text-decoration:none;color:var(--ash);font-size:15px;transition:color .2s}
.nav a:hover{color:var(--glow)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 26px;background:var(--ember);color:#1a0b02;border:1px solid var(--ember);border-radius:4px;font:inherit;font-weight:800;text-decoration:none;cursor:pointer;transition:background .2s,box-shadow .2s,transform .2s}
.btn:hover{background:var(--glow);box-shadow:0 0 34px rgba(255,122,26,.5);transform:translateY(-1px)}
.btn.ghost{background:rgba(255,122,26,.04);color:var(--glow);border-color:rgba(255,122,26,.55)}
.btn.ghost:hover{background:rgba(255,122,26,.14);box-shadow:none}
.btn.small{min-height:40px;padding:0 16px;font-size:14px}
.btn[disabled]{opacity:.5;cursor:default;transform:none;box-shadow:none}

/* hero */
.hero{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(70% 46% at 50% 36%,rgba(255,122,26,.14),transparent 70%),linear-gradient(#06030a,#0b0605 70%,var(--ink))}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.moon{position:absolute;z-index:-1;top:5%;inset-inline-end:8%;width:clamp(64px,10vw,120px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 34%,#f6ead0,#d2c29e 62%,#a99a78);box-shadow:0 0 100px 34px rgba(246,226,180,.15)}
.castle{position:absolute;inset:auto 0 0 0;width:100%;height:clamp(130px,22vw,250px);z-index:-1;fill:#040201}
.castle .lit{fill:var(--ember);animation:win 4s ease-in-out infinite}
.hero-in{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;padding-top:clamp(26px,5vw,52px);padding-bottom:clamp(150px,24vw,270px)}
.badge{display:inline-flex;align-items:center;gap:10px;padding:5px 16px;border:1px solid var(--edge);border-radius:999px;background:var(--glass);color:var(--glow);font-size:14px}
.badge i{width:8px;height:8px;border-radius:50%;background:var(--ember);box-shadow:0 0 12px var(--ember);animation:pulse 2.4s ease-in-out infinite}
.logo-wrap{width:min(100%,900px);transform:translate(calc(var(--px,0)*12px),calc(var(--py,0)*8px));transition:transform .25s ease-out}
.logo{display:block;width:100%;height:auto;overflow:visible}
.logo .glow{animation:flick 5s infinite}
.logo .star{transform-box:fill-box;transform-origin:center;animation:twinkle 3.6s ease-in-out infinite}
.logo .star.b{animation-delay:-1.8s}
.logo .spider{transform-origin:812px 118px;animation:sway 4.6s ease-in-out infinite}
.logo .flap{transform-box:fill-box;transform-origin:center;animation:flap .46s ease-in-out infinite}
.hero h1{font-size:clamp(28px,5vw,58px);font-weight:900;line-height:1.4;max-width:19em}
.hero h1 em{font-style:normal;color:var(--glow);text-shadow:0 0 34px rgba(255,122,26,.6)}
.lead{max-width:36em;color:var(--ash);font-size:clamp(16px,2.2vw,19px)}
.cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:6px}

/* marquee */
.marq{border-block:1px solid var(--line);background:var(--ink);overflow:hidden;direction:ltr}
.marq-track{display:flex;width:max-content;animation:marq 42s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
.marq-group{display:flex;flex:none}
.marq-group span{display:inline-flex;align-items:center;gap:56px;padding:18px 28px 18px 0;white-space:nowrap;font-weight:800;font-size:clamp(18px,3vw,26px);color:var(--ash)}
.marq-group span::after{content:"";width:14px;height:14px;background:var(--ember);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);filter:drop-shadow(0 0 5px var(--ember))}

/* section scaffolding */
.sec{padding-block:clamp(64px,10vw,116px);border-top:1px solid var(--line)}
.sec.alt{background:var(--crypt)}
.head{display:grid;gap:12px;max-width:42em}
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.24em;color:var(--ember);direction:ltr;text-align:right;line-height:1.6}
.head h1,.head h2{font-size:clamp(28px,4.8vw,52px);font-weight:900;line-height:1.35}
.head p{color:var(--ash);font-size:clamp(16px,2vw,18px)}
.spot{position:relative}
.spot::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgba(255,122,26,.17),transparent 62%)}
.spot:hover::before{opacity:1}
.spot>*{position:relative}

/* bento */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:44px}
.cell{display:flex;flex-direction:column;gap:8px;padding:26px;min-height:270px;border:1px solid var(--edge);border-radius:8px;background:linear-gradient(180deg,rgba(255,214,170,.055),rgba(255,214,170,.012));overflow:hidden;transition:border-color .3s}
.cell:hover{border-color:rgba(255,122,26,.45)}
.cell .tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.26em;color:var(--ember);direction:ltr;text-align:right}
.cell h3{font-size:clamp(20px,2.4vw,27px);font-weight:800;line-height:1.5}
.cell p{color:var(--ash);font-size:15px}
.cell .art{margin-top:auto;padding-top:16px}
.c-web{grid-column:span 4}
.c-bot,.c-panel,.c-otp,.c-play{grid-column:span 2}
.art-browser{position:relative;height:140px;margin-bottom:-26px;padding:34px 16px 0;display:grid;gap:9px;align-content:start;border:1px solid var(--edge);border-bottom:0;border-radius:6px 6px 0 0;background:#0b0706}
.art-browser::before{content:"";position:absolute;inset:0 0 auto;height:24px;border-bottom:1px solid var(--edge);background:radial-gradient(circle at 14px 12px,var(--blood) 3px,transparent 4px),radial-gradient(circle at 28px 12px,var(--glow) 3px,transparent 4px),radial-gradient(circle at 42px 12px,#6a8a42 3px,transparent 4px)}
.art-browser .h{height:16px;width:52%;border-radius:2px;background:linear-gradient(270deg,var(--ember),rgba(255,122,26,.1))}
.art-browser .l{height:8px;border-radius:2px;background:var(--line)}
.art-browser .l.w8{width:84%}.art-browser .l.w6{width:62%}
.art-chat{display:grid;gap:8px}
.art-chat span{display:block;width:fit-content;max-width:82%;padding:7px 12px;border-radius:12px;font-size:13px;line-height:1.7}
.art-chat .in{margin-right:auto;background:var(--crypt-hi);border:1px solid var(--edge);border-bottom-left-radius:3px}
.art-chat .out{margin-left:auto;background:var(--ember);color:#1a0b02;font-weight:500;border-bottom-right-radius:3px}
.art-bars{display:flex;align-items:flex-end;gap:8px;height:96px}
.art-bars i{flex:1;height:var(--h);border-radius:2px 2px 0 0;background:linear-gradient(var(--ember),rgba(255,122,26,.12))}
.art-otp{display:flex;gap:6px}
.art-otp span{flex:1;max-width:46px;aspect-ratio:1;display:grid;place-items:center;border:1px solid var(--edge);border-radius:6px;font-weight:800;color:var(--glow)}
.art-otp span:last-child{border-color:var(--ember);box-shadow:0 0 14px rgba(255,122,26,.35)}
.art-play{display:block;width:100%;height:96px}

/* bot demo */
.demo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:clamp(28px,6vw,80px);align-items:center}
.demo ul{display:grid;gap:12px;margin-top:26px;max-width:30em}
.demo li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;color:var(--ash);font-size:15px}
.demo li::before{content:"";width:14px;height:14px;margin-top:8px;background:var(--ember);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
.phone{width:min(100%,340px);margin-inline:auto;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--edge);border-radius:30px;background:#0a0605;box-shadow:0 0 0 7px #120b08,0 34px 80px rgba(0,0,0,.65),0 0 100px rgba(255,122,26,.13)}
.ph-head{display:flex;align-items:center;gap:12px;padding:15px 16px;border-bottom:1px solid var(--edge);background:var(--crypt)}
.ava{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#2c170c,#120a07);border:1px solid rgba(255,122,26,.55)}
.ava::before{content:"";width:16px;height:16px;background:var(--glow);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
.ph-name{font-weight:800;font-size:15px;line-height:1.4}
.ph-sub{font-size:12px;color:var(--ash);line-height:1.3}
.chat{height:330px;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;scroll-behavior:smooth;scrollbar-width:thin}
.msg{width:fit-content;max-width:86%;padding:9px 13px;border-radius:14px;font-size:14px;line-height:1.8;animation:pop .28s ease-out}
.msg.bot{margin-right:auto;background:var(--crypt-hi);border:1px solid var(--edge);border-bottom-left-radius:4px}
.msg.me{margin-left:auto;background:var(--ember);color:#1a0b02;font-weight:500;border-bottom-right-radius:4px}
.msg.typing{display:flex;gap:5px;padding:14px}
.msg.typing i{width:6px;height:6px;border-radius:50%;background:var(--ash);animation:blink 1s infinite}
.msg.typing i:nth-child(2){animation-delay:.15s}.msg.typing i:nth-child(3){animation-delay:.3s}
.kb{display:grid;gap:6px;padding:10px 14px 16px;border-top:1px solid var(--edge);background:var(--crypt);min-height:104px;align-content:start}
.kb button,.kb a{display:flex;align-items:center;justify-content:center;min-height:42px;padding:0 12px;border:1px solid rgba(255,122,26,.42);border-radius:6px;background:rgba(255,122,26,.08);color:var(--glow);font:inherit;font-size:14px;text-decoration:none;cursor:pointer;transition:background .2s}
.kb button:hover,.kb a:hover{background:rgba(255,122,26,.2)}
.kb button:disabled{opacity:.4;cursor:default}

/* works */
.seg{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.seg button{min-height:42px;padding:0 20px;background:transparent;color:var(--ash);border:1px solid var(--edge);border-radius:4px;font:inherit;font-size:15px;cursor:pointer;transition:all .2s}
.seg button:hover{color:var(--glow);border-color:rgba(255,122,26,.5)}
.seg button[aria-pressed="true"]{color:#1a0b02;background:var(--ember);border-color:var(--ember);font-weight:800}
.works{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px}
.work{display:flex;flex-direction:column;gap:10px;padding:22px;border:1px solid var(--edge);border-radius:8px;background:var(--crypt);overflow:hidden;transition:border-color .3s,box-shadow .3s}
.work:hover{border-color:rgba(255,122,26,.5);box-shadow:0 0 44px rgba(255,122,26,.12)}
.cover{position:relative;height:150px;margin:-22px -22px 8px;border-bottom:1px solid var(--line);overflow:hidden;background:radial-gradient(80% 130% at 70% 0%,rgba(255,122,26,.24),transparent 60%),var(--crypt-hi)}
.cover .art-browser{position:absolute;inset:26px 30px 0;height:auto;margin:0}
.cover .art-chat{position:absolute;inset:24px 30px auto}
.work-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:var(--ash)}
.work-type{color:var(--glow);font-weight:800}
.work h3{font-size:24px;font-weight:800;line-height:1.5}
.work p{color:var(--ash);font-size:15px;line-height:1.85}
.tags{display:flex;flex-wrap:wrap;margin-top:auto;padding-top:6px;font-size:13px;color:var(--bone)}
.tags li+li::before{content:"·";margin-inline:.6em;color:var(--ember)}

/* process rail */
.flow{position:relative;margin-top:48px;max-width:760px}
.flow::before,.flow::after{content:"";position:absolute;top:18px;bottom:46px;inset-inline-start:19px;width:2px}
.flow::before{background:var(--line)}
.flow::after{background:linear-gradient(var(--glow),var(--ember));box-shadow:0 0 14px var(--ember);transform-origin:top;transform:scaleY(var(--p,0))}
.flow li{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:22px;padding-bottom:40px}
.flow li:last-child{padding-bottom:0}
.dot{z-index:1;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--ink);font-weight:800;color:var(--ash);transition:all .4s}
.flow li.on .dot{border-color:var(--ember);color:var(--glow);box-shadow:0 0 22px rgba(255,122,26,.5)}
.flow h3{font-size:22px;font-weight:800;line-height:1.6}
.flow p{color:var(--ash);font-size:15px;max-width:34em}

/* game */
.game-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,5vw,56px);margin-top:36px;align-items:start}
.hud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:24px;border:1px solid var(--edge);border-radius:6px;overflow:hidden}
.hud div{padding:12px 14px;border-inline-start:1px solid var(--edge)}
.hud div:first-child{border-inline-start:0}
.hud small{display:block;color:var(--ash);font-size:13px;line-height:1.5}
.hud strong{font-weight:900;font-size:30px;line-height:1.3;font-variant-numeric:tabular-nums;color:var(--glow)}
.arena{position:relative;border:1px solid var(--edge);border-radius:8px;overflow:hidden;background:#0c0706;box-shadow:0 0 70px rgba(255,122,26,.1)}
.arena canvas{display:block;width:100%;max-width:100%;aspect-ratio:4/3;touch-action:manipulation;cursor:crosshair}
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center;background:rgba(8,5,4,.8)}
.overlay h3{font-size:clamp(26px,5vw,38px);font-weight:900;color:var(--glow)}
.overlay p{max-width:20em}

/* order wizard */
.wiz{max-width:820px;margin-top:40px;padding:clamp(18px,3vw,34px);border:1px solid var(--edge);border-radius:10px;background:linear-gradient(180deg,rgba(255,214,170,.045),transparent)}
.wiz-bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:28px}
.wiz-bar div{padding-top:10px;border-top:2px solid var(--line);font-size:13px;color:var(--ash);transition:all .3s}
.wiz-bar div.on{border-color:var(--ember);color:var(--glow)}
.wiz h3{font-size:22px;font-weight:800;margin-bottom:16px}
.pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pick label{position:relative;cursor:pointer}
.pick input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pick .card{display:grid;gap:2px;height:100%;padding:18px;border:1px solid var(--edge);border-radius:8px;transition:all .2s}
.pick .card b{font-size:18px;font-weight:800}
.pick .card span{color:var(--ash);font-size:14px;line-height:1.7}
.pick input:checked+.card{border-color:var(--ember);background:rgba(255,122,26,.1);box-shadow:0 0 0 1px var(--ember),0 0 34px rgba(255,122,26,.16)}
.pick input:focus-visible+.card{outline:2px solid var(--glow);outline-offset:3px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chips span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;color:var(--ash);border:1px solid var(--edge);border-radius:4px;font-size:15px;transition:all .2s}
.chips input:checked+span{background:var(--ember);color:#1a0b02;border-color:var(--ember);font-weight:800}
.chips input:focus-visible+span{outline:2px solid var(--glow);outline-offset:3px}
.fields{display:grid;gap:18px}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.field{display:grid;gap:6px;min-width:0}
.field label{font-size:15px;color:var(--glow)}
input[type=text],select,textarea{width:100%;min-width:0;min-height:50px;padding:10px 14px;background:var(--crypt);color:var(--bone);border:1px solid var(--edge);border-radius:6px;font:inherit;transition:border-color .2s}
textarea{min-height:130px;resize:vertical;line-height:1.8}
input::placeholder,textarea::placeholder{color:#7b6a5c}
input[type=text]:focus,select:focus,textarea:focus{outline:none;border-color:var(--ember);box-shadow:0 0 0 3px rgba(255,122,26,.2)}
.wiz-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.err{color:#ff9a86;font-size:15px}
.result{display:grid;gap:12px;margin-top:22px;padding:20px;border:1px solid rgba(255,122,26,.5);border-radius:8px;background:var(--crypt)}
.result textarea{min-height:200px;font-size:15px}
.result-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.note{color:var(--ash);font-size:14px}

/* contact + footer */
.contact-list{display:grid;margin-top:34px;max-width:720px}
.contact-list li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding-block:16px;border-top:1px solid var(--line)}
.contact-list li:last-child{border-bottom:1px solid var(--line)}
.c-label{flex:0 0 96px;color:var(--ash)}
.c-value{flex:1 1 180px;min-width:0;font-size:18px;color:var(--glow);word-break:break-all;user-select:all;direction:ltr;text-align:start}
.c-actions{display:flex;gap:8px}
.foot{border-top:1px solid var(--line);padding-block:38px}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;color:var(--ash);font-size:14px}

/* faq */
.faq{display:grid;margin-top:40px;max-width:820px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 4px;cursor:pointer;font-weight:800;font-size:clamp(16px,2.2vw,19px);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:11px;height:11px;margin-inline-end:6px;border-right:2px solid var(--ember);border-bottom:2px solid var(--ember);transform:rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{padding:0 4px 22px;color:var(--ash);max-width:40em}
.skip{position:absolute;inset-inline-start:12px;top:-80px;z-index:40;padding:10px 16px;background:var(--ember);color:#1a0b02;font-weight:800;border-radius:4px;text-decoration:none}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 8px)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* motion */
@keyframes flick{0%,100%{opacity:.62}42%{opacity:.5}48%{opacity:.7}70%{opacity:.46}74%{opacity:.66}}
@keyframes twinkle{0%,100%{opacity:.75;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}
@keyframes sway{0%,100%{transform:rotate(-3.5deg)}50%{transform:rotate(3.5deg)}}
@keyframes flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.5)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes win{0%,100%{opacity:.95}30%{opacity:.55}60%{opacity:1}80%{opacity:.7}}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes pop{from{transform:translateY(8px) scale(.97);opacity:0}to{transform:none;opacity:1}}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}

@media (max-width:860px){
  .c-web{grid-column:span 6}
  .c-bot,.c-panel,.c-otp,.c-play{grid-column:span 3}
  .demo,.game-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .bento{grid-template-columns:minmax(0,1fr)}
  .c-web,.c-bot,.c-panel,.c-otp,.c-play{grid-column:auto}
  .works,.row2,.pick{grid-template-columns:minmax(0,1fr)}
  .arena canvas{aspect-ratio:1/1}
  .c-label{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marq-track,.logo .glow,.logo .star,.logo .spider,.logo .flap,.castle .lit,.badge i{animation:none}
  .rv{transform:none;transition:none}
  .logo-wrap{transform:none}
}

/* ===== HALLOWEEN+ ===== */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spin{to{--a:360deg}}
@keyframes flick{0%,100%{opacity:1}6%{opacity:.8}9%{opacity:1}44%{opacity:.88}47%{opacity:1}}
@keyframes fly{from{transform:translate(var(--x0),var(--y0))}to{transform:translate(var(--x1),var(--y1))}}
@keyframes bob{50%{translate:0 -18px}}
@keyframes flap{to{transform:scaleY(.5)}}
@keyframes shine{to{transform:translateX(-420%) skewX(-20deg)}}
@keyframes bolt{0%,91%,100%{opacity:0}92%{opacity:.6}93%{opacity:.08}95%{opacity:.45}}
@keyframes lights{from{opacity:0}}
@keyframes pulse{50%{box-shadow:0 0 30px rgba(255,122,26,.55)}}
html{animation:lights .7s ease-out}
html::after{content:"";position:fixed;inset:0;z-index:25;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.6))}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(60% 55% at 72% 8%,rgba(200,180,255,.6),transparent 70%);animation:bolt 9s infinite}
.hero-in{position:relative;z-index:1}
.bats{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bat,.ghost{position:absolute;top:0;left:0;pointer-events:none;animation:fly var(--d) linear infinite;animation-delay:var(--dl)}
.bat{width:48px;height:28px}
.bat svg{width:100%;height:100%;animation:flap .28s ease-in-out infinite alternate}
.ghost{width:64px;height:70px;opacity:.5;animation:fly var(--d) ease-in-out infinite alternate,bob 3.4s ease-in-out infinite}
.hero h1 em,.mark-name{animation:flick 4.5s infinite}
.head h1,.head h2{background:linear-gradient(180deg,var(--bone),#e9b98a 65%,var(--glow));-webkit-background-clip:text;background-clip:text;color:transparent}
.sec{position:relative;content-visibility:auto;contain-intrinsic-size:auto 720px}
.sec::before{content:"";position:absolute;left:0;right:0;top:-1px;height:36px;pointer-events:none;background:
 radial-gradient(circle at 20px 27px,var(--blood) 6px,transparent 6.5px) 0 0/150px 36px repeat-x,
 radial-gradient(circle at 95px 15px,var(--blood) 5px,transparent 5.5px) 0 0/150px 36px repeat-x,
 linear-gradient(90deg,transparent 15px,var(--blood) 15px 25px,transparent 25px) 0 0/150px 27px repeat-x,
 linear-gradient(90deg,transparent 90px,var(--blood) 90px 100px,transparent 100px) 0 0/150px 15px repeat-x,
 linear-gradient(var(--blood),var(--blood)) 0 0/100% 3px no-repeat}
.spot,.wiz,.phone{position:relative}
.spot::after,.wiz::after,.phone::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;transition:opacity .3s;background:conic-gradient(from var(--a),transparent 0 68%,var(--ember) 84%,var(--glow) 92%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;}
.spot:hover::after,.wiz:focus-within::after,.phone::after{animation:spin 5s linear infinite}
.spot:hover::after,.wiz:hover::after,.wiz:focus-within::after,.phone::after{opacity:1}
.btn{position:relative;overflow:hidden}
.hero .btn:not(.ghost){animation:pulse 2.8s ease-in-out infinite}
.hero .btn:not(.ghost)::after{content:"";position:absolute;top:0;bottom:0;left:100%;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);animation:shine 3.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){html,.hero::after,.ghost,.hero h1 em,.mark-name,.spot::after,.wiz::after,.phone::after,.btn,.btn::after{animation:none!important}.bats,.ghost{display:none}}
:root{--i-pumpkin:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M12 5c1-1.6 2.4-2 3.2-2v1.6c-.9 0-1.6.4-2 1.2 4.6.2 8.300 3.200 8.300 7.200 0 4-3.500 7-8.500 7s-8.500-3-8.500-7c0-4 3.700-7 7.500-7.200zM7.800 11h2.800l-1.400 2.600zM13.400 11h2.800l-1.400 2.600zM8 15.200l1.600 1.300 2.400-1.300 2.400 1.300 1.600-1.300-.7 2.600H8.700z'/></svg>");--i-skull:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M12 2.500c-4.400 0-7.500 3-7.500 7 0 2.300 1 4 2.500 5.200V19h3v-2h1v2h2v-2h1v2h3v-3.800c1.500-1.200 2.500-2.900 2.500-5.200 0-4-3.100-7-7.500-7zM8.300 9.200a1.900 1.900 0 100 3.800 1.900 1.900 0 000-3.800zM15.700 9.200a1.900 1.900 0 100 3.800 1.900 1.900 0 000-3.800zM12 12.500l1 2h-2z'/></svg>");--i-bat:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 7l1.200-2.200.8 2.600C16 5.800 19 6 22 9c-1.400.4-2.400 1.300-2.800 3-1-1-2.300-1.200-3.600-.4-.9.500-1.400 1.500-1.800 3L12 12.500 10.200 14.600c-.4-1.500-.9-2.500-1.800-3-1.300-.8-2.600-.6-3.600.4C4.400 10.300 3.400 9.400 2 9c3-3 6-3.200 8-.6l.8-2.600z'/></svg>");--i-candle:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1.500c2.200 2.400 2.800 4.200 0 6.200-2.800-2-2.200-3.800 0-6.200zM9 10h6v11.500H9z'/></svg>");--i-ghost:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M4 21V11a8 8 0 0116 0v10l-2.700-2.300L14.700 21 12 18.700 9.300 21l-2.600-2.300zM9.200 10.500a1.300 1.300 0 100 2.600 1.300 1.300 0 000-2.600zM14.800 10.500a1.300 1.300 0 100 2.600 1.300 1.300 0 000-2.600z'/></svg>");--i-spider:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g stroke='black' fill='black'><circle cx='12' cy='14.500' r='3.600'/><circle cx='12' cy='9.400' r='2.200'/><path fill='none' stroke-width='1.400' stroke-linecap='round' d='M9 12L4 8M9 14.500H3M9.500 17L5 21M15 12l5-4M15 14.500h6M14.500 17l4.500 4'/></g></svg>");--web:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><path d='M120 0L0 0M120 0L10 45M120 0L35 85M120 0L75 110M120 0L120 120M84 0Q92 6 87 14M87 14Q96 16 94 26M94 26Q104 24 106 33M106 33Q114 28 120 36M54 0Q68 10 59 25M59 25Q76 29 73 47M73 47Q91 44 95 61M95 61Q110 52 120 66M24 0Q45 15 32 36M32 36Q56 43 52 68M52 68Q77 64 84 88M84 88Q105 75 120 96M0 0Q26 18 10 45M10 45Q40 53 35 85M35 85Q67 80 75 110M75 110Q102 94 120 120' fill='none' stroke='%23ffb36b' stroke-width='1'/></svg>")}
html{scrollbar-color:var(--ember) var(--ink)}
::selection{background:var(--ember);color:#1a0b02}
.eyebrow::before,.cell .tag::before{content:"";display:inline-block;width:1.2em;height:1.2em;margin-inline-end:.55em;vertical-align:-.22em;background:var(--ember);-webkit-mask:var(--ic,var(--i-pumpkin)) center/contain no-repeat;mask:var(--ic,var(--i-pumpkin)) center/contain no-repeat;filter:drop-shadow(0 0 5px rgba(255,122,26,.85))}
#demo,#links,.c-bot{--ic:var(--i-bat)}#works,.c-panel{--ic:var(--i-skull)}#process,.c-otp{--ic:var(--i-candle)}#faq,#contact{--ic:var(--i-ghost)}#order,.c-web{--ic:var(--i-spider)}
.sec.alt::after{content:"";position:absolute;top:0;right:0;width:170px;height:170px;pointer-events:none;opacity:.35;background:var(--web) no-repeat top right/contain}
.cell.in,.work.in{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out,border-color .2s}
@keyframes par{to{translate:0 90px}}
@supports (animation-timeline:scroll()){.hero .castle{animation:par linear both;animation-timeline:scroll(root);animation-range:0 90vh}}
@keyframes spark{to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}
.sp{position:fixed;left:0;top:0;width:5px;height:5px;margin:-2px;border-radius:50%;background:var(--glow);box-shadow:0 0 8px var(--ember);pointer-events:none;z-index:49;animation:spark .8s ease-out forwards}
.cur{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid var(--ember);border-radius:50%;pointer-events:none;z-index:50;box-shadow:0 0 18px rgba(255,122,26,.55),inset 0 0 10px rgba(255,122,26,.25);transition:width .2s,height .2s,margin .2s,background .2s}
.cur.big{width:58px;height:58px;margin:-29px 0 0 -29px;background:rgba(255,122,26,.12)}
@media (prefers-reduced-motion:reduce){.rv{filter:none}.sp,.cur{display:none}}