@font-face{font-family:'Hanime Sans';src:url(../fonts/hanime-sans-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Hanime Sans';src:url(../fonts/hanime-sans-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Hanime Sans';src:url(../fonts/hanime-sans-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Hanime Display';src:url(../fonts/hanime-display.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
--bg:#150F0A;
--bg2:#1E1610;
--card:#2A2018;
--card2:#332619;
--line:rgba(255,255,255,.09);
--line2:rgba(255,255,255,.16);
--main:#35D2EA;
--main-d:#12A6C2;
--amber:#FFA24B;
--pink:#FF5C9E;
--txt:#F3EDE7;
--mut:#A99C90;
--r:6px;
--wrap:1180px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);
font-family:'Hanime Sans','PingFang SC','Microsoft YaHei','Noto Sans CJK SC',sans-serif;
font-size:16px;line-height:1.78;letter-spacing:.01em;
background-image:radial-gradient(1100px 620px at 8% -6%,rgba(53,210,234,.13),transparent 62%),radial-gradient(900px 560px at 96% 4%,rgba(255,92,158,.09),transparent 60%);
background-repeat:no-repeat}
img{max-width:100%;height:auto;display:block;border:0}
a{color:var(--main);text-decoration:none}
a:hover{color:var(--amber)}
h1,h2,h3,h4{margin:0;line-height:1.32;font-weight:700;letter-spacing:.005em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
summary{cursor:pointer}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px}

.top{position:sticky;top:0;z-index:40;background:rgba(21,15,10,.9);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.top__in{display:flex;align-items:center;gap:18px;min-height:66px}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand__logo{width:38px;height:38px;border-radius:9px}
.brand__txt{font-size:19px;font-weight:700;color:var(--txt);letter-spacing:.02em}
.brand__txt i{font-style:normal;color:var(--main)}
.nav{display:flex;align-items:center;gap:6px;margin-left:auto;flex-wrap:wrap}
.nav a{display:block;padding:8px 13px;border-radius:var(--r);color:var(--mut);font-size:14.5px;font-weight:500}
.nav a:hover{color:var(--txt);background:rgba(255,255,255,.05)}
.nav a.on{color:var(--main);background:rgba(53,210,234,.1)}
.top__dl{flex:0 0 auto;padding:10px 20px;font-size:14.5px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 28px;border-radius:var(--r);
font-size:16px;font-weight:700;color:#0B1518;background:linear-gradient(120deg,var(--main),var(--main-d));
border:1px solid transparent;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;white-space:nowrap}
.btn:hover{color:#0B1518;transform:translateY(-2px);box-shadow:0 10px 24px rgba(53,210,234,.28)}
.btn--ghost{background:transparent;color:var(--txt);border:1px solid var(--line2)}
.btn--ghost:hover{color:var(--txt);background:rgba(255,255,255,.06);box-shadow:none}

.hero{position:relative;padding:74px 0 68px;overflow:hidden;border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;left:-160px;top:-190px;width:620px;height:620px;border-radius:50%;
background:radial-gradient(circle,rgba(53,210,234,.28),transparent 66%);pointer-events:none}
.hero::after{content:"";position:absolute;right:-120px;bottom:-180px;width:520px;height:520px;border-radius:50%;
background:radial-gradient(circle,rgba(255,92,158,.2),transparent 66%);pointer-events:none}
.hero__in{position:relative;z-index:2;display:grid;grid-template-columns:1.24fr .76fr;gap:52px;align-items:center}
.kicker{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:500;color:var(--main);letter-spacing:.14em}
.kicker::before{content:"";width:26px;height:2px;background:linear-gradient(90deg,var(--main),var(--amber))}
.hero h1{margin:20px 0 0;font-size:47px;letter-spacing:.005em}
.hero h1 em{font-style:normal;background:linear-gradient(96deg,var(--main),var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__lead{margin:20px 0 0;max-width:600px;font-size:16.5px;color:#DCD3CB}
.hero__meta{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0}
.tag{display:inline-block;padding:6px 13px;border:1px solid var(--line2);border-radius:999px;font-size:13.5px;color:var(--mut)}
.tag b{color:var(--amber);font-weight:700}
.hero__btns{display:flex;flex-wrap:wrap;gap:14px;margin:28px 0 0}
.cta-note{margin:16px 0 0;font-size:14px;color:var(--mut)}
.hero__shot{position:relative;justify-self:center}
.frame{position:relative;padding:14px;border:1px solid var(--line2);border-radius:12px;background:linear-gradient(158deg,rgba(53,210,234,.08),rgba(255,162,75,.06))}
.frame::before,.frame::after{content:"";position:absolute;width:24px;height:24px;border:2px solid var(--main)}
.frame::before{left:-2px;top:-2px;border-right:0;border-bottom:0;border-radius:4px 0 0 0}
.frame::after{right:-2px;bottom:-2px;border-left:0;border-top:0;border-color:var(--amber);border-radius:0 0 4px 0}
.hero__shot img{width:100%;max-width:296px;height:auto;margin:0 auto;border-radius:7px}
.frame__bar{display:flex;align-items:center;gap:7px;margin:0 auto 11px;max-width:296px;padding-bottom:9px;border-bottom:1px dashed var(--line)}
.frame__bar span{width:8px;height:8px;border-radius:50%;background:var(--pink)}
.frame__bar span:nth-child(2){background:var(--amber)}
.frame__bar span:nth-child(3){background:var(--main)}
.frame__bar em{font-style:normal;margin-left:auto;font-family:'Hanime Display','Hanime Sans',monospace;font-size:12px;color:var(--mut);letter-spacing:.08em}

.stats{border-bottom:1px solid var(--line);background:var(--bg2)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:26px 22px 26px 20px;border-left:1px solid var(--line);position:relative}
.stat:first-child{border-left:0}
.stat::before{content:"";position:absolute;left:-1px;top:26px;width:2px;height:26px;background:var(--main)}
.stat:first-child::before{left:0;background:var(--amber)}
.stat__n{font-family:'Hanime Display','Hanime Sans',monospace;font-size:30px;font-weight:700;color:var(--txt);letter-spacing:.01em}
.stat__n i{font-style:normal;font-size:15px;color:var(--main);margin-left:3px}
.stat__l{margin:6px 0 0;font-size:13.5px;color:var(--mut)}

.sec{padding:78px 0;border-bottom:1px solid var(--line)}
.sec__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px;flex-wrap:wrap}
.sec__head h2{font-size:30px}
.sub{margin:10px 0 0;max-width:720px;font-size:15.5px;color:var(--mut)}

.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.shot{position:relative}
.shot__fig{position:relative;padding:11px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(160deg,rgba(53,210,234,.07),rgba(255,162,75,.05))}
.shot__fig::before,.shot__fig::after{content:"";position:absolute;width:19px;height:19px;border:2px solid var(--main)}
.shot__fig::before{left:-1px;top:-1px;border-right:0;border-bottom:0;border-radius:4px 0 0 0}
.shot__fig::after{right:-1px;bottom:-1px;border-left:0;border-top:0;border-color:var(--pink);border-radius:0 0 4px 0}
.shot__fig img{width:100%;height:auto;border-radius:6px}
.shot figcaption{margin:13px 2px 0;font-size:14px;color:var(--mut);line-height:1.65}
.shot figcaption b{display:block;margin-bottom:3px;font-size:15px;color:var(--txt);font-weight:700}

.feats{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.vk{position:relative;padding:28px 26px 26px;border:1px solid var(--line);border-radius:var(--r);
background:linear-gradient(158deg,rgba(53,210,234,.075),rgba(255,162,75,.05))}
.vk::before,.vk::after{content:"";position:absolute;width:22px;height:22px;border:2px solid var(--main);transition:transform .22s ease}
.vk::before{left:-1px;top:-1px;border-right:0;border-bottom:0;border-radius:4px 0 0 0}
.vk::after{right:-1px;bottom:-1px;border-left:0;border-top:0;border-color:var(--amber);border-radius:0 0 4px 0}
.vk:hover::before{transform:translate(4px,4px)}
.vk:hover::after{transform:translate(-4px,-4px)}
.vk__no{display:inline-block;padding:2px 9px;border:1px solid var(--main);border-radius:4px;
font-family:'Hanime Display','Hanime Sans',monospace;font-size:13px;color:var(--main);letter-spacing:.06em}
.vk__t{margin:14px 0 0;font-size:19px;font-weight:700;color:var(--txt)}
.vk__d{margin:10px 0 0;font-size:15px;color:#CEC5BC}
.vk__d b{color:var(--amber);font-weight:700}

.entries{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.entry{position:relative;display:block;padding:26px 24px 24px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.entry:hover{background:var(--card2);box-shadow:inset 0 0 0 1px rgba(53,210,234,.34)}
.entry__t{font-size:19px;font-weight:700;color:var(--txt)}
.entry__d{margin:11px 0 0;font-size:14.5px;color:var(--mut)}
.entry__g{margin:17px 0 0;font-size:14px;font-weight:700;color:var(--main)}
.entry:hover .entry__g{color:var(--amber)}

.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rev{padding:26px 24px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.rev__q{margin:0;font-size:15px;color:#D8CFC7}
.rev__w{display:flex;align-items:center;gap:10px;margin:18px 0 0;padding-top:15px;border-top:1px dashed var(--line)}
.rev__w em{font-style:normal;font-size:14px;color:var(--txt);font-weight:700}
.rev__w i{font-style:normal;font-size:13px;color:var(--mut)}
.stars{display:flex;gap:3px}
.st{width:14px;height:14px;background:var(--amber);
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 2l3 7h7l-5.6 4.3L18.7 22 12 17.8 5.3 22l2.3-8.7L2 9h7z%22/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 2l3 7h7l-5.6 4.3L18.7 22 12 17.8 5.3 22l2.3-8.7L2 9h7z%22/%3E%3C/svg%3E");
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:center;mask-position:center;
-webkit-mask-size:contain;mask-size:contain}

.faq{display:grid;grid-template-columns:1fr;gap:14px;max-width:900px}
details{border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
details[open]{border-color:rgba(53,210,234,.34)}
summary{padding:17px 22px;font-size:16px;font-weight:700;color:var(--txt);position:relative;padding-right:52px;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:24px;top:50%;width:9px;height:9px;border-right:2px solid var(--main);border-bottom:2px solid var(--main);transform:translateY(-70%) rotate(45deg)}
details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq__a{padding:0 22px 20px;font-size:15px;color:#CFC6BE}
.faq__a p+p{margin-top:10px}

.tbl-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.tbl{width:100%;min-width:560px;border-collapse:collapse;font-size:14.5px}
.tbl th,.tbl td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line)}
.tbl th{background:var(--card2);color:var(--txt);font-weight:700;font-size:14px}
.tbl td{color:#CFC6BE}
.tbl tr:last-child td{border-bottom:0}
.tbl-cap{margin:0 0 12px;font-size:14px;color:var(--mut)}
.tbl-note{margin:12px 0 0;font-size:14px;color:var(--mut)}

.cta{padding:74px 0;border-bottom:1px solid var(--line);background:var(--bg2)}
.cta__in{position:relative;padding:44px 40px;border:1px solid var(--line2);border-radius:10px;
background:radial-gradient(600px 260px at 12% 0,rgba(53,210,234,.16),transparent 62%),radial-gradient(520px 240px at 92% 100%,rgba(255,92,158,.13),transparent 60%),var(--card)}
.cta__in::before,.cta__in::after{content:"";position:absolute;width:26px;height:26px;border:2px solid var(--main)}
.cta__in::before{left:-1px;top:-1px;border-right:0;border-bottom:0;border-radius:5px 0 0 0}
.cta__in::after{right:-1px;bottom:-1px;border-left:0;border-top:0;border-color:var(--amber);border-radius:0 0 5px 0}
.cta__t{font-size:26px}
.cta .btn{margin-top:24px;color:#0B1518}
.cta .btn--ghost{color:var(--txt)}
.cta .btn--ghost:hover{color:var(--txt)}

.foot{background:var(--bg2);padding:60px 0 30px}
.foot__cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
.foot__t{margin:0 0 14px;font-size:15px;font-weight:700;color:var(--txt)}
.foot__l li{margin-bottom:9px}
.foot__l a,.foot__l span{font-size:14px;color:var(--mut)}
.foot__l a:hover{color:var(--main)}
.foot__brand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.foot__brand img{width:34px;height:34px;border-radius:8px}
.foot__brand b{font-size:17px;color:var(--txt)}
.foot__p{font-size:14px;color:var(--mut)}
.disc{margin:34px 0 0;padding:18px 0 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--mut);line-height:1.7}
.foot__bot{margin:16px 0 0;font-size:13px;color:#8B8078}

.page-hero{padding:60px 0 52px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;right:-140px;top:-170px;width:480px;height:480px;border-radius:50%;
background:radial-gradient(circle,rgba(53,210,234,.2),transparent 66%);pointer-events:none}
.ph__in{position:relative;z-index:2;max-width:860px}
.crumb{font-size:13.5px;color:var(--mut);margin-bottom:18px}
.crumb a{color:var(--mut)}
.crumb a:hover{color:var(--main)}
.crumb i{font-style:normal;margin:0 8px;color:#6E625B}
.page-hero h1{margin:14px 0 0;font-size:38px}
.page-hero h1 em{font-style:normal;color:var(--main)}

.prose{max-width:900px}
.prose h2{margin:52px 0 0;font-size:26px;padding-left:16px;border-left:3px solid var(--main)}
.prose h3{margin:32px 0 0;font-size:19px;color:var(--txt)}
.prose p{margin:16px 0 0;font-size:16px;color:#D5CCC4}
.prose ul{margin:16px 0 0}
.prose li{position:relative;padding-left:22px;margin-bottom:10px;font-size:15.5px;color:#D5CCC4}
.prose li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;border-radius:2px;background:var(--amber)}
.prose .inl{border-bottom:1px solid rgba(53,210,234,.45)}
.prose figure{margin:30px 0 0}
.prose figure img{width:100%;max-width:394px;height:auto;margin:0 auto;border-radius:6px}
.prose figcaption{margin:12px 0 0;text-align:center;font-size:14px;color:var(--mut)}
.note{margin:28px 0 0;padding:20px 22px;border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:var(--r);
background:linear-gradient(120deg,rgba(255,162,75,.08),rgba(53,210,234,.04))}
.note b{color:var(--amber)}
.note p{margin:0;font-size:15px;color:#D5CCC4}

.steps{counter-reset:st;margin:26px 0 0}
.step{position:relative;padding:22px 24px 22px 72px;margin-bottom:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.step__n{position:absolute;left:22px;top:22px;width:30px;height:30px;border:2px solid var(--main);border-radius:5px;
font-family:'Hanime Display','Hanime Sans',monospace;font-size:14px;color:var(--main);display:flex;align-items:center;justify-content:center}
.step__t{margin:0;font-size:17px;font-weight:700;color:var(--txt)}
.step__d{margin:8px 0 0;font-size:15px;color:#CFC6BE}
.more{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:14.5px;font-weight:700;color:var(--main)}
.more::after{content:"";width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-top:-1px}
.more:hover{color:var(--amber)}

@keyframes view20{from{opacity:0;transform:scale(1.02) translateY(14px);filter:saturate(.45) brightness(.72)}
to{opacity:1;transform:none;filter:saturate(1) brightness(1)}}
@keyframes scan20{0%{top:24px;opacity:0}14%{opacity:.9}86%{opacity:.9}100%{top:100%;opacity:0}}
.view{animation:view20 .62s cubic-bezier(.2,.85,.24,1) both}
.view.d1{animation-delay:.07s}
.view.d2{animation-delay:.14s}
.view.d3{animation-delay:.21s}
.view.d4{animation-delay:.28s}
.view.d5{animation-delay:.35s}
.frame .scan{position:absolute;left:24px;right:24px;top:26px;height:2px;border-radius:2px;pointer-events:none;
background:linear-gradient(90deg,transparent,var(--main),var(--amber),transparent);
animation:scan20 5.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
.view{animation:none;opacity:1;transform:none;filter:none}
.frame .scan{animation:none;opacity:0}
}

@media (max-width:980px){
.hero{padding:56px 0 52px}
.hero__in{grid-template-columns:1fr;gap:40px}
.hero h1{font-size:38px}
.hero__shot{justify-self:center;order:0}
.hero__shot img,.frame__bar{max-width:280px}
.sec{padding:60px 0}
.sec__head h2{font-size:26px}
.shots{grid-template-columns:repeat(2,1fr)}
.feats{grid-template-columns:repeat(2,1fr)}
.entries,.revs{grid-template-columns:repeat(2,1fr)}
.stats__grid{grid-template-columns:repeat(2,1fr)}
.stat{border-top:1px solid var(--line)}
.stat:nth-child(1),.stat:nth-child(2){border-top:0}
.foot__cols{grid-template-columns:1fr 1fr}
.page-hero h1{font-size:31px}
.cta__in{padding:34px 26px}
.cta__t{font-size:22px}
.nav a{padding:8px 10px;font-size:14px}
}

@media (max-width:620px){
.wrap{padding:0 16px}
.top{position:static}
.top__in{min-height:0;flex-wrap:wrap;gap:10px 12px;padding:12px 0}
.brand__txt{font-size:17px}
.nav{order:3;width:100%;margin:0;gap:0;flex-wrap:wrap;justify-content:flex-start;border-top:1px solid var(--line);padding-top:8px}
.nav a{padding:6px 9px;font-size:13px}
.top__dl{padding:9px 15px;font-size:13.5px;margin-left:auto}
.hero{padding:42px 0 44px}
.hero h1{font-size:26px}
.hero__lead{font-size:15.5px}
.hero__shot img,.frame__bar{max-width:254px}
.btn{padding:12px 22px;font-size:15px}
.sec{padding:50px 0}
.sec__head{margin-bottom:26px}
.sec__head h2{font-size:22px}
.shots{grid-template-columns:1fr;gap:22px}
.feats,.entries,.revs{grid-template-columns:1fr}
.stats__grid{grid-template-columns:repeat(2,1fr)}
.stat{padding:20px 16px}
.stat__n{font-size:24px}
.vk{padding:24px 20px 22px}
.step{padding:20px 18px 20px 18px}
.step__n{position:static;margin-bottom:12px}
.prose h2{font-size:21px;margin-top:40px}
.prose h3{font-size:17.5px}
.page-hero{padding:42px 0 36px}
.page-hero h1{font-size:25px}
.cta{padding:52px 0}
.cta__in{padding:28px 20px}
.cta__t{font-size:20px}
.foot__cols{grid-template-columns:1fr;gap:26px}
summary{padding:15px 18px;padding-right:44px;font-size:15px}
.faq__a{padding:0 18px 18px}
.prose figure img{max-width:300px}
}
