:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --surface2:#f6f8fc;
  --text:#0b1220;
  --muted:#4b5563;
  --muted2:#64748b;
  --accent:#2563eb;
  --accent2:#7c3aed;
  --border:rgba(15,23,42,.12);
  --shadow:0 14px 40px rgba(2,6,23,.08);
  --shadow2:0 20px 60px rgba(2,6,23,.10);
  --radius:22px;
  --max:1120px;
  --pad:24px;
  --sectionY:120px;
  --sectionYMobile:64px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

@media (min-width:1200px){:root{--pad:56px;}}
@media (max-width:768px){:root{--pad:20px;}}
@media (max-width:520px){:root{--pad:14px;}}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  line-height:1.65;
}
body::before{
  content:"";
  position:fixed; inset:-30% -20% auto -20%; height:420px;
  background:radial-gradient(600px 280px at 20% 20%, rgba(37,99,235,.16), transparent 60%),
             radial-gradient(500px 260px at 80% 0%, rgba(124,58,237,.14), transparent 55%),
             radial-gradient(420px 240px at 50% 40%, rgba(99,102,241,.10), transparent 65%);
  pointer-events:none; z-index:-1;
}


a{color:inherit; text-decoration:none}
a:hover{opacity:.92}

.container{
  max-width:var(--max);
  margin:0 auto;
  padding-left:calc(var(--pad) + env(safe-area-inset-left));
  padding-right:calc(var(--pad) + env(safe-area-inset-right));
}

/* ===== Layout rhythm (this is what makes the site feel "filled" but calm) ===== */
.section{padding:var(--sectionY) 0;}
.section--alt{background:var(--surface2);}
.section--tight{padding:72px 0;}
@media (max-width:820px){
  .section{padding:var(--sectionYMobile) 0;}
  .section--tight{padding:48px 0;}
}

/* ===== Nav ===== */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border);
}

.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 0; gap:14px}

.brand{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:-.01em; white-space:nowrap; flex-shrink:0}
.brand span{white-space:nowrap}
.logo{width:34px;height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:14px; box-shadow:var(--shadow)}
.logo-img{width:34px;height:34px; display:block}

.menu{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; align-items:center}
.menu a{color:var(--muted); font-weight:800; font-size:14px; padding:9px 10px; border-radius:14px}
.menu a.active,.menu a:hover{color:var(--text); background:rgba(2,6,23,.06)}
.menu a.nav-cta{display:none !important;}

/* Requested: remove the header "Open in Telegram" CTA button (desktop + mobile menu) */
.nav-cta{display:none !important;}

.nav-toggle{display:none; align-items:center; justify-content:center; width:44px; height:44px; border-radius:16px; border:1px solid var(--border); background:rgba(255,255,255,.92); box-shadow:var(--shadow); font-size:20px; line-height:1; cursor:pointer}
.nav-toggle:active{transform:translateY(1px)}

@media (max-width:920px){
  .nav-toggle{display:inline-flex}
  /* Mobile nav: wrap header + show a compact dropdown panel */
  .nav-inner{flex-wrap:wrap; align-items:flex-start}
  .brand{order:1}
  .nav-toggle{order:2; margin-left:auto}
  .menu{order:3; display:none; width:100%; flex-direction:column; align-items:stretch; gap:8px; padding:12px 12px 14px; margin-top:12px;
        background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(12px);
        border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow)}
  .menu.open{display:flex}
  .menu a{width:100%; padding:13px 12px; font-size:15px; border-radius:16px; justify-content:center; text-align:center}
  .menu a.nav-cta{margin-top:6px}
}

/* ===== Typography ===== */
h1{margin:0 0 16px; font-size:56px; line-height:1.05; letter-spacing:-.03em}
@media (max-width:820px){h1{font-size:38px}}

h2{margin:0 0 14px; font-size:30px; line-height:1.15; letter-spacing:-.02em}
@media (max-width:820px){h2{font-size:24px}}

h3{margin:0 0 10px; font-size:18px; letter-spacing:-.01em}

/* Article spacing (blog post pages) */
.page-card h2{margin-top:34px; margin-bottom:14px;}
.page-card h3{margin-top:26px; margin-bottom:12px;}
.page-card p{margin:0 0 16px;}
.list-card{margin:18px 0 30px;}

.lead{color:var(--muted); font-size:19px; margin:0 0 22px}
@media (max-width:820px){.lead{font-size:16px}}

.small{font-size:13px; color:var(--muted2)}

.kicker{display:inline-flex; gap:10px; align-items:center; color:var(--muted); font-weight:900; font-size:13px; text-transform:uppercase; letter-spacing:.08em}
.dot{width:8px;height:8px;border-radius:999px;background:linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow:0 0 0 8px rgba(37,99,235,.10)}

/* ===== Cards & buttons ===== */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.card-pad{padding:28px 30px;}
@media (max-width:820px){.card-pad{padding:22px 22px}}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px; border-radius:16px; border:1px solid var(--border);
  font-weight:900; font-size:14px;
  background:rgba(255,255,255,.95);
}

.btn.primary{
  color:#fff;
  border-color:rgba(37,99,235,.35);
  background:linear-gradient(135deg, rgba(37,99,235,.98), rgba(124,58,237,.98));
  box-shadow:0 18px 50px rgba(37,99,235,.18);
}

.btn.ghost{background:rgba(255,255,255,.9)}
.btn.cta{padding:14px 20px; font-size:15px; border-radius:18px}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

@media (prefers-reduced-motion: reduce){
  .btn:hover{transform:none}
}

/* ===== Hero ===== */
.hero{
  padding:88px 0 56px;
  background:
    radial-gradient(900px 520px at 15% 0%, rgba(37,99,235,.10) 0%, rgba(37,99,235,0) 60%),
    radial-gradient(900px 520px at 85% 10%, rgba(124,58,237,.08) 0%, rgba(124,58,237,0) 55%),
    var(--surface2);
}
@media (max-width:820px){.hero{padding:64px 0 40px}}

.hero-card{padding:52px 56px;}
@media (max-width:820px){.hero-card{padding:26px 22px}}

.hero-grid{display:grid; grid-template-columns:1fr; gap:18px; align-items:stretch}

.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
@media (max-width:520px){.actions{flex-direction:column}.actions .btn{width:100%; padding:16px 18px; font-size:16px}}

.trust{margin-top:18px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; color:var(--muted); font-weight:800; font-size:13px}
.trust .item{display:inline-flex; gap:8px; align-items:center; padding:8px 10px; border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,.65)}
.trust a{color:var(--muted); text-decoration:underline; text-underline-offset:3px}

/* ===== Grids ===== */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
@media (max-width:980px){.grid3{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}}

.feature{padding:22px 22px;}
.feature p{margin:0; color:var(--muted)}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:980px){.steps{grid-template-columns:1fr}}
.step{padding:22px 22px}
.step strong{display:block; margin-bottom:8px}
.step p{margin:0; color:var(--muted)}

.prose{max-width:78ch}
.prose p{margin:0 0 14px; color:var(--muted)}

.hr{height:1px; background:var(--border); margin:18px 0}

/* ===== Lists ===== */
.list-card ul{margin:0; padding-left:18px}
.list-card li{margin:10px 0; color:var(--muted)}
.list-card a{color:var(--text); text-decoration:underline; text-underline-offset:3px}

/* ===== CTA band ===== */
.cta-band{padding:54px 0}
.cta-card{padding:44px 48px; text-align:center}
@media (max-width:820px){.cta-card{padding:26px 22px; text-align:left}}

/* ===== Footer ===== */
.footer{padding:56px 0; border-top:1px solid var(--border); background:var(--surface)}
.footer-grid{display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap}
.footer .small a{color:var(--muted); text-decoration:underline; text-underline-offset:3px}

/* ===== Mobile sticky CTA ===== */
.mobile-cta{display:none}
@media (max-width:700px){
  /* Per request: remove the sticky Telegram CTA on mobile */
  body{padding-bottom:0}
  .mobile-cta{display:none !important;}
}


/* ===== Page intro ===== */
.page-intro{margin-top:32px; margin-bottom:28px;}
.page-intro.card{padding:44px 46px;}
@media (max-width:820px){
  .page-intro{margin-top:20px; margin-bottom:24px;}
  /* Slightly reduced horizontal padding so blocks look wider on phones */
  .page-intro.card{padding:26px 18px;}
}

/* =====================
   Homepage v2 (closer to the preview mock)
   ===================== */
.hero.hero-v2{padding:54px 0 34px}
@media (max-width:820px){.hero.hero-v2{padding:34px 0 22px}}

.hero-surface{
  position:relative;
  border-radius:26px;
  border:1px solid rgba(2,6,23,.10);
  background:rgba(255,255,255,.72);
  box-shadow:0 18px 60px rgba(2,6,23,.10);
  padding:56px 58px;
  overflow:hidden;
}
@media (max-width:980px){.hero-surface{padding:36px 22px}}

.hero-main{max-width:720px; text-align:center; margin:0 auto}
.hero-v2 h1{font-size:54px; line-height:1.02; letter-spacing:-.03em; margin:10px 0 14px}
@media (max-width:820px){.hero-v2 h1{font-size:36px}}

.actions.center{justify-content:center}

.checks{display:flex; justify-content:center; flex-wrap:wrap; gap:10px 14px; margin-top:16px; color:var(--muted); font-weight:700; font-size:14px}
.checks span{display:inline-flex; gap:6px; align-items:center}

.mini-links{display:flex; gap:10px; justify-content:center; margin-top:14px; color:var(--muted); font-size:13px}
.mini-links a{color:var(--muted); text-decoration:underline; text-underline-offset:3px}