@font-face{font-family:Birzia;src:url(fonts/Birzia-Light.ttf) format("truetype");font-weight:300;font-display:swap;unicode-range:U+0020-0040,U+005B-0060,U+007B-007E,U+0590-05FF,U+FB1D-FB4F,U+2010-2027}
@font-face{font-family:Birzia;src:url(fonts/Birzia-Medium.ttf) format("truetype");font-weight:500;font-display:swap;unicode-range:U+0020-0040,U+005B-0060,U+007B-007E,U+0590-05FF,U+FB1D-FB4F,U+2010-2027}
@font-face{font-family:Birzia;src:url(fonts/Birzia-Bold.ttf) format("truetype");font-weight:700;font-display:swap;unicode-range:U+0020-0040,U+005B-0060,U+007B-007E,U+0590-05FF,U+FB1D-FB4F,U+2010-2027}
@font-face{font-family:Birzia;src:url(fonts/Birzia-Black.ttf) format("truetype");font-weight:900;font-display:swap;unicode-range:U+0020-0040,U+005B-0060,U+007B-007E,U+0590-05FF,U+FB1D-FB4F,U+2010-2027}
*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#f6f3ee;--ink:#15130f;--body:#4a463f;--mut:#8f897e;--line:#e4ded3;--card:#fffdf9;--acc:#ff5a1f;--acc2:#7a5cff;--font:Birzia,"Segoe UI","Helvetica Neue",Arial,sans-serif}
html{scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:clip}
body{-webkit-text-size-adjust:100%;background:var(--bg);color:var(--ink);font:300 18px/1.7 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--acc);color:#fff}

.aura{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.aura i{position:absolute;width:640px;height:640px;border-radius:50%;opacity:.55;will-change:transform;animation:float 18s ease-in-out infinite alternate}
.aura i:nth-child(1){background:radial-gradient(closest-side,#ffc9a8,transparent);top:-160px;right:-120px}
.aura i:nth-child(2){background:radial-gradient(closest-side,#d9ceff,transparent);top:30%;left:-220px;animation-delay:-6s;animation-duration:22s}
.aura i:nth-child(3){background:radial-gradient(closest-side,#ffe3b3,transparent);bottom:-200px;right:10%;animation-delay:-12s}
@keyframes float{to{transform:translate(80px,60px) scale(1.15)}}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;background-image:radial-gradient(#15130f14 1px,transparent 1px);background-size:22px 22px;-webkit-mask:linear-gradient(#000,transparent 70%);mask:linear-gradient(#000,transparent 70%)}

.wrap{max-width:760px;margin:auto;padding:72px 22px 40px}

.hero{text-align:center}
.pill{display:inline-flex;-webkit-backdrop-filter:blur(8px);align-items:center;gap:10px;background:#fffdf9cc;backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:99px;padding:7px 16px;font-weight:500;font-size:14px;color:var(--body);box-shadow:0 4px 20px #15130f0a}
.dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 #22c55e88;animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 9px #22c55e00}100%{box-shadow:0 0 0 0 #22c55e00}}
h1{font-weight:900;font-size:clamp(46px,11.5vw,88px);line-height:1;letter-spacing:-.025em;margin:26px 0 22px}
.shine{font-weight:300;background:linear-gradient(90deg,var(--acc),#ff9a3c,var(--acc2),var(--acc));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s linear infinite}
@keyframes shine{to{background-position:-300% 0}}
.lead{color:var(--body);font-size:20px;max-width:560px;margin:auto}
.lead b{color:var(--ink);font-weight:700}

.orbit{position:relative;width:min(340px,72vw);aspect-ratio:1;margin:64px auto 64px}
.rings{position:absolute;inset:0;width:100%;height:100%}
.rings circle{fill:none;stroke:#15130f22;stroke-width:1;stroke-dasharray:3 7;animation:dash 30s linear infinite}
.rings circle+circle{animation-direction:reverse}
@keyframes dash{to{stroke-dashoffset:-400}}
.core{position:absolute;inset:0;margin:auto;width:24%;aspect-ratio:1;border-radius:28%;display:grid;place-items:center;background:linear-gradient(145deg,#ff7a3d,var(--acc));box-shadow:0 20px 50px #ff5a1f55,inset 0 1px 0 #fff6;animation:pulse 3s ease-in-out infinite}
.core svg{width:52%;stroke:#fff;stroke-width:2.2;stroke-linecap:round;fill:none;animation:rot 12s linear infinite}
@keyframes pulse{50%{transform:scale(1.06);box-shadow:0 26px 70px #ff5a1f77,inset 0 1px 0 #fff6}}
@keyframes rot{to{transform:rotate(360deg)}}
.spin{position:absolute;inset:0;animation:rot 40s linear infinite}
.s2{inset:15%;animation-duration:28s;animation-direction:reverse}
.node{position:absolute;inset:0;transform:rotate(var(--a))}
.node b{position:absolute;top:0;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:15px;display:grid;place-items:center;color:#fff;font:700 18px/1 "Segoe UI",Arial,sans-serif;box-shadow:0 10px 24px #15130f2e;border:2px solid #fff;animation:counter 40s linear infinite}
.s2 .node b{animation:counter2 28s linear infinite;width:42px;height:42px;margin:-21px 0 0 -21px;font-size:15px}
@keyframes counter{from{transform:rotate(calc(-1*var(--a)))}to{transform:rotate(calc(-1*var(--a) - 360deg))}}
@keyframes counter2{from{transform:rotate(calc(-1*var(--a)))}to{transform:rotate(calc(-1*var(--a) + 360deg))}}

.meta{list-style:none;display:flex;justify-content:center;gap:clamp(24px,8vw,64px);margin-top:18px}
.meta b{display:block;font-weight:900;font-size:40px;line-height:1;letter-spacing:-.02em}
.meta span{font-size:14px;color:var(--mut)}

.marquee{margin:64px -22px 0;overflow:hidden;border-block:1px solid var(--line);padding:18px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.track{display:flex;gap:56px;width:max-content;animation:mq 26s linear infinite;direction:ltr}
.track span{font:600 22px "Segoe UI",Arial,sans-serif;color:#15130f55;letter-spacing:-.01em}
@keyframes mq{to{transform:translateX(-50%)}}

.block{padding:88px 0 0}
.label{font-weight:500;font-size:14px;color:var(--acc);display:flex;align-items:center;gap:10px;margin-bottom:12px}
.label::before{content:"";width:22px;height:2px;background:var(--acc);border-radius:2px}
h2{font-weight:900;font-size:clamp(32px,7vw,48px);line-height:1.08;letter-spacing:-.02em;margin-bottom:32px}
.soft{font-weight:300;color:var(--mut)}

.term{background:#15130f;border-radius:20px;overflow:hidden;box-shadow:0 30px 80px #15130f33,0 0 0 1px #15130f}
.bar{display:flex;align-items:center;gap:7px;padding:13px 16px;background:#211e19}
.bar i{width:11px;height:11px;border-radius:50%;background:#ff5f57}
.bar i:nth-child(2){background:#febc2e}.bar i:nth-child(3){background:#28c840}
.bar span{margin-inline-start:auto;font:500 12px "Segoe UI",Arial;color:#8f897e}
.screen{min-height:260px;padding:20px;font:14px/1.75 ui-monospace,Consolas,monospace;color:#e9e4da;text-align:left;white-space:pre-wrap}
.screen .p{color:#ff9a6b}.screen .ok{color:#5ee08f}.screen .dim{color:#8f897e}
.caret{display:inline-block;width:8px;height:16px;background:#ff9a6b;vertical-align:-3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s,opacity .8s;overflow:hidden}
.card::after{content:"";position:absolute;inset:auto -30% -60% auto;width:140px;height:140px;border-radius:50%;background:var(--c);opacity:0;filter:blur(40px);transition:opacity .4s}
@media(hover:hover){.card.in:hover{transform:translateY(-6px);box-shadow:0 20px 40px #15130f14;border-color:transparent}
.card:hover::after{opacity:.22}}
.ic{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--c);color:#fff;font:700 16px "Segoe UI",Arial;margin-bottom:16px;transition:transform .4s}
.card:hover .ic{transform:rotate(-8deg) scale(1.08)}
.card h3{font-weight:700;font-size:19px}
.card p{font-size:15px;color:var(--mut);line-height:1.5}

.steps{list-style:none;counter-reset:s;position:relative}
.steps::before{content:"";position:absolute;right:21px;top:10px;bottom:10px;width:2px;background:linear-gradient(var(--acc),var(--acc2),transparent)}
.steps li{counter-increment:s;position:relative;padding-inline-start:68px;margin-bottom:40px}
.steps li::before{content:counter(s);position:absolute;right:0;top:0;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--card);border:2px solid var(--acc);font-weight:900;font-size:18px;color:var(--acc);box-shadow:0 0 0 6px var(--bg)}
.steps h3{font-weight:900;font-size:26px;line-height:1.3}
.steps p{color:var(--body)}
.note{font-size:15px;color:var(--mut)!important;margin-top:8px}
.code{display:flex;align-items:flex-start;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-top:12px;box-shadow:0 2px 10px #15130f08;transition:border-color .3s,box-shadow .3s}
.code:hover{border-color:#ff5a1f66;box-shadow:0 8px 24px #ff5a1f14}
.code code{flex:1;font:400 14px/1.6 ui-monospace,Consolas,monospace;color:var(--ink);overflow-wrap:anywhere;text-align:start}
.code code:not([dir]){font:500 16px/1.6 var(--font)}
.copy{flex:none;background:var(--ink);border:0;color:#fff;border-radius:10px;padding:6px 14px;font:500 14px var(--font);cursor:pointer;transition:transform .2s,background .3s}
.copy:hover{transform:scale(1.05)}
.copy:active{transform:scale(.95)}
.copy.ok{background:#22c55e}

.tips{display:grid;gap:12px}
.tip{display:flex;gap:18px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 22px}
.tip span{font-weight:300;font-size:28px;color:var(--acc)}
.tip p{color:var(--body)}
.tip b{color:var(--ink);font-weight:700}

footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:88px;padding-top:28px;border-top:1px solid var(--line);font-size:14px}
footer a{color:var(--mut);text-decoration:none;transition:color .2s}
footer a:hover{color:var(--acc)}

.rv{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

@media(max-width:640px){.wrap{padding:48px 18px 32px}.marquee{margin-inline:-18px}.cards{grid-template-columns:1fr 1fr;gap:10px}.card{padding:16px;border-radius:16px}.card h3{font-size:17px}.card p{font-size:14px}.ic{width:38px;height:38px;margin-bottom:12px}.steps::before{right:17px}.steps li{padding-inline-start:52px}.steps li::before{width:36px;height:36px;font-size:15px}.steps h3{font-size:22px}.code{padding:12px;gap:8px}.code code{font-size:12.5px}.code code:not([dir]){font-size:15px}.copy{padding:5px 10px;font-size:13px}.meta{gap:20px}.meta b{font-size:30px}.meta span{font-size:12px}.screen{font-size:11.5px;padding:16px;min-height:300px}.lead{font-size:18px}.block{padding-top:72px}.tip{padding:14px 16px;gap:12px}.tip span{font-size:22px}.track span{font-size:18px}.track{gap:36px}.node b{width:40px;height:40px;margin:-20px 0 0 -20px;font-size:15px;border-radius:12px}.s2 .node b{width:36px;height:36px;margin:-18px 0 0 -18px;font-size:13px}.aura i{width:420px;height:420px}}
@media(max-width:360px){.cards{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none;filter:none}}
.meta b{direction:ltr;unicode-bidi:isolate}
.copy{min-height:36px;min-width:64px}
footer a{display:inline-block;padding:10px 0}