@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Unbounded:wght@600;700;800&display=swap');

:root { --bg:#0d0d0d; --panel:#151515; --ink:#fff; --muted:#a3a3a3; --lime:#fff; --violet:#fff; --line:#303030; --danger:#ff6868; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--bg); }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--bg); font-family:Manrope,system-ui,sans-serif; font-size:16px; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.hidden { display:none !important; }
.noise { position:fixed; inset:0; pointer-events:none; z-index:10; opacity:.045; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.topbar,.appbar { height:78px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding:0 clamp(20px,5vw,72px); }
.brand { display:flex; align-items:center; gap:11px; font:700 .92rem Unbounded,sans-serif; letter-spacing:.04em; }
.brand-logo { width:42px; height:42px; object-fit:contain; border-radius:50%; }
.topbar nav { display:flex; align-items:center; gap:28px; font-size:.9rem; font-weight:700; }
.nav-pill { padding:11px 16px; border:1px solid var(--line); border-radius:100px; }
.hero { min-height:calc(100vh - 78px); display:flex; align-items:center; max-width:1440px; margin:auto; padding:64px clamp(20px,6vw,90px); overflow:hidden; }
.hero-copy { width:100%; }
.domain-label { margin:0; color:var(--muted); font:700 .76rem Unbounded,sans-serif; letter-spacing:.18em; }
.hero h1,.app-intro h1 { margin:24px 0; font:800 clamp(3.25rem,7vw,7.7rem)/.88 Unbounded,sans-serif; letter-spacing:-.07em; }
.hero h1 em,.app-intro h1 em { color:var(--lime); font-style:normal; }
.subtitle { max-width:610px; color:#b9bbc2; font-size:clamp(1rem,1.5vw,1.25rem); line-height:1.7; }
.hero-actions { display:flex; gap:12px; margin-top:38px; flex-wrap:wrap; }
.btn { min-height:54px; display:inline-flex; align-items:center; justify-content:center; gap:22px; padding:0 24px; color:var(--ink); background:#16181e; border:1px solid var(--line); border-radius:4px; font-weight:800; cursor:pointer; }
.btn:hover { border-color:#4c505b; transform:translateY(-1px); }
.btn-primary { color:#08090c; background:var(--lime); border-color:var(--lime); }
.ticker { overflow:hidden; padding:16px 0; color:#08090c; background:var(--lime); font:800 1rem Unbounded; white-space:nowrap; }
.ticker div { width:max-content; animation:ticker 24s linear infinite; }
@keyframes ticker { to { transform:translateX(-50%); } }
.features,.steps { max-width:1440px; margin:auto; padding:110px clamp(20px,6vw,90px); }
.section-head { display:flex; align-items:end; justify-content:space-between; margin-bottom:42px; }
.section-head p { color:var(--lime); font-size:.75rem; font-weight:800; letter-spacing:.15em; }
.section-head h2 { margin:0; font:800 clamp(2.4rem,5vw,5rem) Unbounded; letter-spacing:-.06em; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.feature { min-height:330px; display:flex; flex-direction:column; padding:30px; background:var(--panel); }
.feature.accent { background:#f3f3f3; color:#090909; }
.feature > span { font:700 .8rem Unbounded; color:var(--lime); }
.feature.accent > span { color:#090a0d; }
.feature h3 { margin:auto 0 18px; font:700 1.35rem Unbounded; }
.feature p { margin:0; color:#aeb0b7; line-height:1.65; }
.feature.accent p { color:#27222f; }
.steps { border-top:1px solid var(--line); }
.steps ol { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.steps li { display:grid; grid-template-columns:100px 1fr; align-items:center; min-height:105px; border-bottom:1px solid var(--line); }
.steps li b { color:var(--violet); font:700 .9rem Unbounded; }
.steps li span { font:700 clamp(1.2rem,2.5vw,2.2rem) Unbounded; }
footer { min-height:100px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(20px,6vw,90px); border-top:1px solid var(--line); color:var(--muted); font-size:.8rem; }
footer div { display:flex; gap:24px; }

/* Telegram Mini App */
.miniapp { min-height:100vh; background:radial-gradient(circle at 90% -10%,rgba(255,255,255,.12),transparent 34%),var(--bg); }
.appbar { height:66px; position:sticky; top:0; z-index:5; padding:0 18px; background:rgba(8,9,12,.88); backdrop-filter:blur(16px); }
.icon-btn,.back-button { color:var(--ink); background:transparent; border:0; font-weight:800; cursor:pointer; }
.icon-btn i { display:inline-grid; place-items:center; min-width:23px; height:23px; margin-left:6px; color:var(--bg); background:var(--lime); border-radius:50%; font-style:normal; font-size:.72rem; }
.app-main { max-width:820px; margin:auto; padding:28px 16px 110px; }
.app-intro h1 { margin:18px 0 14px; font-size:clamp(2.7rem,13vw,5.5rem); }
.app-intro > p:last-child { color:var(--muted); }
.catalog { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:34px; }
.subscribe-card { grid-column:1/-1; padding:28px; color:#0b0b0b; background:#f3f3f3; border:1px solid #fff; border-radius:12px; }
.subscribe-card h2 { margin:0 0 12px; font:700 1.25rem/1.35 Unbounded; }
.subscribe-card p { margin:0 0 22px; color:#b8b9c0; line-height:1.6; }
.product-card { min-height:250px; display:flex; flex-direction:column; padding:20px; background:rgba(17,19,24,.92); border:1px solid var(--line); border-radius:12px; }
.product-meta { display:flex; justify-content:space-between; color:var(--muted); font-size:.72rem; font-weight:800; text-transform:uppercase; }
.product-meta b { color:var(--lime); }
.product-card h2 { margin:38px 0 18px; font:700 1.2rem/1.3 Unbounded; }
.duration-options { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.duration-option { min-height:38px; padding:0 13px; color:#c8c8c8; background:#0c0c0c; border:1px solid #3b3b3b; border-radius:6px; font-weight:800; cursor:pointer; }
.duration-option:hover,.duration-option.active { color:#08090c; background:#fff; border-color:#fff; }
.product-price { margin:auto 0 18px; font:700 1.7rem Unbounded; }
.select-product,.order-action { min-height:46px; color:var(--ink); background:transparent; border:1px solid #454954; border-radius:6px; font-weight:800; cursor:pointer; }
.select-product:hover { color:var(--bg); background:var(--lime); border-color:var(--lime); }
.view-title { display:flex; align-items:center; gap:18px; margin:12px 0 28px; }
.view-title p { margin:0 0 5px; color:var(--lime); font-size:.7rem; font-weight:800; letter-spacing:.12em; }
.view-title h1 { margin:0; font:700 2rem Unbounded; }
.back-button { width:42px; height:42px; border:1px solid var(--line); border-radius:50%; }
.orders { display:grid; gap:10px; }
.order-card { padding:18px; background:var(--panel); border:1px solid var(--line); border-radius:10px; }
.order-head { display:flex; align-items:start; justify-content:space-between; gap:12px; }
.order-head h2 { margin:0; font:700 .96rem/1.4 Unbounded; }
.order-head span { flex:none; padding:5px 8px; color:var(--lime); background:rgba(200,255,69,.1); border-radius:4px; font-size:.7rem; font-weight:800; }
.order-card > p { color:var(--muted); font-size:.82rem; }
.order-action,.key { width:100%; margin-top:8px; }
.key { min-height:48px; color:var(--bg); background:var(--lime); border:0; border-radius:5px; font:700 .88rem Unbounded; cursor:pointer; overflow-wrap:anywhere; }
.empty { padding:60px 20px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:10px; }
.backdrop { position:fixed; inset:0; z-index:10; background:rgba(0,0,0,.7); backdrop-filter:blur(5px); }
.sheet { position:fixed; left:50%; bottom:0; z-index:11; width:min(100%,620px); max-height:92vh; overflow:auto; padding:28px max(20px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)); background:#14161b; border:1px solid #353843; border-bottom:0; border-radius:20px 20px 0 0; transform:translateX(-50%); }
.sheet-close { position:absolute; right:18px; top:18px; width:36px; height:36px; color:var(--ink); background:#22252c; border:0; border-radius:50%; font-size:1.5rem; cursor:pointer; }
.sheet-kicker { margin:0; color:var(--lime); font-size:.7rem; font-weight:800; letter-spacing:.14em; }
.sheet h2 { padding-right:44px; font:700 1.25rem/1.4 Unbounded; }
.checkout-price { color:var(--lime); font:700 2rem Unbounded; }
.field { display:grid; gap:8px; margin:18px 0; color:#c5c6cb; font-size:.86rem; font-weight:700; }
.field small { color:var(--muted); font-weight:400; }
.field input,.field select { width:100%; min-height:52px; padding:0 14px; color:var(--ink); background-color:#0b0c10; border:1px solid #343740; border-radius:6px; outline:none; }
.field select { color-scheme:dark; appearance:none; -webkit-appearance:none; padding-right:44px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='m1 1 6 6 6-6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; }
.field select option { color:#fff; background:#0b0c10; }
.field input:focus,.field select:focus { border-color:var(--lime); }
.legal-check { display:flex; align-items:start; gap:10px; color:#b5b6bc; font-size:.82rem; line-height:1.5; cursor:pointer; }
.legal-check input { width:18px; height:18px; accent-color:var(--lime); }
.legal-check a { color:var(--lime); text-decoration:underline; }
.btn-wide { width:100%; margin-top:20px; border:0; }
.btn:disabled { opacity:.55; cursor:wait; }
.error { min-height:1.2em; color:var(--danger); font-size:.82rem; }
.standalone { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 50% 35%,#252525 0,transparent 34%),var(--bg); text-align:center; }
.standalone > div { max-width:460px; }
.standalone .brand { justify-content:center; }
.standalone h1 { margin:34px 0 16px; font:700 clamp(2.2rem,9vw,4rem)/1 Unbounded; letter-spacing:-.05em; }
.standalone p { margin-bottom:28px; color:var(--muted); }

.legal-page { padding:48px 18px; background:radial-gradient(circle at 10% 0,rgba(255,255,255,.10),transparent 30%),var(--bg); }
.legal-card { max-width:800px; margin:auto; padding:clamp(24px,6vw,64px); background:var(--panel); border:1px solid var(--line); border-radius:12px; }
.back-link { display:inline-block; margin-bottom:36px; color:var(--lime); font:700 .78rem Unbounded; }
.legal-copy { color:#c7c8cd; line-height:1.72; }
.legal-copy strong { color:var(--ink); }

.payment-result { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 50% 15%,rgba(255,255,255,.12),transparent 34%),var(--bg); }
.result-card { width:min(100%,620px); padding:clamp(28px,7vw,64px); text-align:center; background:var(--panel); border:1px solid var(--line); border-radius:16px; }
.result-mark { width:70px; height:70px; display:grid; place-items:center; margin:0 auto 28px; color:#090909; background:#fff; border-radius:50%; font:800 2rem Unbounded; }
.result-card h1 { margin:0 0 18px; font:800 clamp(2rem,8vw,4rem)/1 Unbounded; letter-spacing:-.06em; }
.result-card p { max-width:460px; margin:0 auto 30px; color:var(--muted); line-height:1.65; }

@media (max-width:800px) {
  .topbar nav > a:first-child { display:none; }
  .hero { min-height:auto; padding-top:80px; }
  .feature-grid { grid-template-columns:1fr; }
  .feature { min-height:250px; }
  .section-head { display:block; }
  .section-head h2 { margin-top:18px; }
}
@media (max-width:520px) {
  .topbar { height:68px; padding:0 16px; }
  .nav-pill { padding:9px 12px; font-size:.78rem; }
  .hero { padding:64px 18px 50px; }
  .hero h1 { font-size:clamp(2.75rem,15vw,4rem); }
  .hero-actions .btn { width:100%; }
  .features,.steps { padding:75px 18px; }
  .steps li { grid-template-columns:55px 1fr; }
  footer { align-items:start; flex-direction:column; justify-content:center; gap:14px; }
  .catalog { grid-template-columns:1fr; }
  .product-card { min-height:230px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; } }