@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

:root{
  --bg:#04070b;
  --panel:#0b1117;
  --panel2:#101821;
  --line:rgba(184,229,255,.16);
  --line2:rgba(184,229,255,.10);
  --text:#ecf8ff;
  --muted:#99adba;
  --soft:#778b98;
  --cyan:#15d2f6;
  --ok:#6ef4c4;
  --warn:#ffd06b;
  --purple:#bda0ff;
  --shadow:0 28px 90px rgba(0,0,0,.45);
  --radius:28px;
  --font:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

html{color-scheme:dark}
body{
  background:
    radial-gradient(circle at 12% -6%, rgba(21,210,246,.11), transparent 28rem),
    radial-gradient(circle at 100% 0%, rgba(189,160,255,.07), transparent 24rem),
    linear-gradient(180deg, #05080d 0%, #060a10 28%, #04070b 100%);
  color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.page-glow,.glow{
  opacity:.68;
  filter:blur(12px) saturate(.88);
}

.navbar{
  background:transparent;
  border-bottom:0;
  padding-top:12px;
}

.nav-inner{
  padding:14px 18px;
  border:1px solid rgba(187,228,255,.12);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(15,22,29,.92), rgba(8,12,17,.86));
  box-shadow:0 16px 40px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(22px);
}

.brand strong,
h1,
.section-head h2,
.cta h2,
.price,
.card h3,
.price-card h3,
.flow-step h3,
summary{
  font-family:'Plus Jakarta Sans', var(--font);
}

.brand strong{
  letter-spacing:-.02em;
}

.brand span,
.nav-link,
.lead,
.card p,
.section-head p,
.footer p,
.footer-links a,
.pill,
.breadcrumb,
.features,
details.faq-item p,
.flow-step p,
.muted{
  color:var(--muted);
}

.nav-link{
  font-weight:700;
  letter-spacing:.01em;
  padding:10px 12px;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}

.nav-link:hover{
  color:var(--text);
  background:rgba(255,255,255,.06);
  transform:translateY(-1px);
}

.btn{
  border-color:rgba(186,229,255,.14);
  border-radius:16px;
  padding:12px 16px;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  box-shadow:0 12px 30px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.btn:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.22);
  box-shadow:0 16px 34px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.07);
}

.btn.primary{
  background:linear-gradient(180deg, #34e6ff 0%, #10c9ef 100%);
  border-color:rgba(95,235,255,.68);
  color:#03131a;
  box-shadow:0 18px 42px rgba(18,215,255,.18), inset 0 1px 0 rgba(255,255,255,.28);
}

.btn.small{
  padding:10px 13px;
  border-radius:14px;
}

.kicker,
.pill,
.badge,
.breadcrumb a{
  letter-spacing:.01em;
}

.kicker{
  border-color:rgba(21,210,246,.22);
  background:rgba(21,210,246,.07);
  color:#d9f9ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.pill{
  border-color:rgba(184,229,255,.09);
  background:rgba(255,255,255,.03);
}

h1{
  letter-spacing:-.075em;
  line-height:.92;
  max-width:10.5ch;
}

.lead{
  max-width:64ch;
  font-size:clamp(1.04rem,1.8vw,1.22rem);
}

.section{
  padding:74px 0;
}

.container{
  width:min(1200px, calc(100vw - 36px));
}

.card,
.price-card,
.flow-step,
details.faq-item,
.mockup,
.mock-card,
.cta,
.howto-step,
.howto-note,
.step,
.status-grid div{
  border-color:rgba(184,229,255,.12);
  background:linear-gradient(180deg, rgba(12,18,24,.95), rgba(8,12,17,.92));
  box-shadow:0 18px 48px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04);
}

.card,
.price-card,
.flow-step,
details.faq-item,
.howto-step,
.howto-note,
.step,
.status-grid div{
  border-radius:24px;
}

.icon{
  border-color:rgba(21,210,246,.2);
  background:linear-gradient(180deg, rgba(21,210,246,.12), rgba(21,210,246,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 24px rgba(18,215,255,.06);
}

.mockup{
  border-radius:32px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
}

.mock-window{
  background:#071018;
}

.mock-top{
  background:rgba(255,255,255,.015);
}

.mock-tab,
.mock-card,
.flow-step,
.status-grid div,
.price-card,
details.faq-item,
.howto-step,
.step{
  backdrop-filter:blur(14px);
}

.mock-tab.active,
.price-card.featured{
  border-color:rgba(101,228,255,.34);
  box-shadow:0 0 0 1px rgba(101,228,255,.12), 0 18px 36px rgba(18,215,255,.08);
}

.price-card.featured{
  background:linear-gradient(180deg, rgba(13,21,29,.98), rgba(10,16,22,.95));
}

.cta{
  grid-template-columns:1fr auto;
  border-color:rgba(61,219,247,.22);
  background:
    radial-gradient(circle at top left, rgba(21,210,246,.12), transparent 34%),
    linear-gradient(180deg, rgba(12,18,24,.98), rgba(8,12,17,.93));
}

.footer,
.footer-bottom{
  border-color:rgba(184,229,255,.08);
}

.footer-links a:hover,
.breadcrumb a:hover{
  color:var(--text);
}

::selection{
  background:rgba(21,210,246,.3);
  color:#fff;
}

@media (max-width: 900px){
  .navbar{padding-top:8px}
  .nav-inner{padding:14px 14px;border-radius:18px}
  .section{padding:44px 0}
  .card,.price-card,.flow-step,details.faq-item,.howto-step,.howto-note,.step{border-radius:20px}
}

@media (max-width: 560px){
  .container{width:min(100vw - 24px, 1200px)}
  h1{max-width:none}
  .nav-inner{border-radius:16px}
  .btn,.btn.small{border-radius:14px}
}