:root {
  --bg: #05080D;
  --panel: #0B1220;
  --panel-2: #08101C;
  --text: #F5F9FF;
  --muted: rgba(245, 249, 255, 0.68);
  --muted-2: rgba(245, 249, 255, 0.52);
  --line: rgba(125, 220, 255, 0.20);
  --accent: #7DDCFF;
  --accent-2: #F5F9FF;
  --max: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 20% 8%, rgba(125, 220, 255, 0.14), transparent 34%),
    radial-gradient(circle at 84% 18%, rgba(245, 249, 255, 0.08), transparent 30%),
    radial-gradient(circle at 50% 112%, rgba(125, 220, 255, 0.10), transparent 38%),
    var(--bg);
  color: var(--text);
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
.container { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(5, 8, 13, 0.82);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
.nav { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display:flex; align-items:center; gap:13px; font-weight:900; letter-spacing:-.04em; font-size:1.16rem; }
.logo-img {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 999px;
  border: 1px solid rgba(125, 220, 255, 0.36);
  box-shadow: 0 0 34px rgba(125, 220, 255, 0.26);
}
.nav-links { display:flex; align-items:center; gap:22px; color:var(--muted); font-size:.95rem; }
.nav-links a:hover { color:var(--text); }

.hero { padding: 112px 0 78px; }
.kicker {
  display:inline-flex;
  border:1px solid var(--line);
  color: var(--accent);
  background: rgba(125, 220, 255, 0.07);
  border-radius:999px;
  padding:8px 12px;
  font-size:.9rem;
  margin-bottom:24px;
}
.hero h1, .page-title h1 {
  font-size:clamp(2.8rem,7vw,6.5rem);
  line-height:.96;
  letter-spacing:-.075em;
  margin:0;
  max-width:980px;
}
.hero p, .page-title p {
  max-width:760px;
  color:var(--muted);
  font-size:clamp(1.05rem,2vw,1.28rem);
  margin:28px 0 0;
}
.hero-logo-panel {
  margin-top: 46px;
  max-width: 520px;
  border: 1px solid var(--line);
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(11, 18, 32, 0.86), rgba(5, 8, 13, 0.72));
  padding: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35), 0 0 60px rgba(125,220,255,.08);
}
.hero-logo-panel img {
  display: block;
  width: 100%;
  border-radius: 24px;
}

.actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 20px;
  border-radius:12px;
  border:1px solid var(--line);
  font-weight:800;
  cursor:pointer;
}
.button.primary {
  background: linear-gradient(135deg, #7DDCFF, #F5F9FF);
  border-color: transparent;
  color: #05080D;
  box-shadow: 0 0 34px rgba(125, 220, 255, 0.18);
}
.button.secondary { color:var(--text); background:rgba(245,249,255,.035); }

.section { padding:74px 0; }
.section-header { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:28px; }
h2 { font-size:clamp(2rem,4vw,3.4rem); line-height:1.02; letter-spacing:-.055em; margin:0; }
.section-header p, .section > .container > p { color:var(--muted); max-width:720px; margin:12px 0 0; }

.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.grid.three { grid-template-columns:repeat(3,1fr); }
.card, .panel {
  background: linear-gradient(180deg, rgba(11,18,32,.92), rgba(8,16,28,.88));
  border: 1px solid var(--line);
  border-radius:24px;
  padding:24px;
  box-shadow: inset 0 1px 0 rgba(245,249,255,.04);
}
.card { min-height:250px; display:flex; flex-direction:column; }
.card h3 { margin:0 0 10px; font-size:1.25rem; letter-spacing:-.03em; }
.card p, .panel p, li { color:var(--muted); }
.card .button { margin-top:auto; align-self:flex-start; }
.badge {
  display:inline-flex;
  width:max-content;
  margin-bottom:18px;
  color: var(--accent);
  background: rgba(125, 220, 255, 0.08);
  border: 1px solid rgba(125, 220, 255, 0.24);
  border-radius:999px;
  padding:5px 10px;
  font-size:.82rem;
}
.split { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:stretch; }
.list { padding:0; margin:20px 0 0; list-style:none; display:grid; gap:12px; }
.list li { border-top:1px solid var(--line); padding-top:12px; }

.page-title { padding:88px 0 38px; }
.content-page { padding:24px 0 88px; }
.content-page h2 { margin-top:38px; }
.contact-box {
  display:inline-flex;
  padding:18px 20px;
  background:rgba(125,220,255,.09);
  border:1px solid rgba(125,220,255,.28);
  border-radius:16px;
  color:var(--accent);
  font-weight:800;
}

.product-hero { padding:80px 0 44px; }
.product-layout { display:grid; grid-template-columns:1.1fr .9fr; gap:34px; align-items:center; }
.product-title { font-size:clamp(2.8rem,7vw,5.8rem); line-height:.96; letter-spacing:-.075em; margin:0; }
.product-copy { color:var(--muted); font-size:1.16rem; max-width:700px; }
.store-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.store-badge {
  border:1px solid var(--line);
  border-radius:14px;
  padding:11px 14px;
  background:rgba(245,249,255,.035);
  color:var(--text);
  font-weight:800;
}
.screenshots { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:26px; }
.phone {
  aspect-ratio: 9/19.5;
  border-radius:34px;
  border:1px solid rgba(245,249,255,.18);
  padding:12px;
  background:#02040A;
  box-shadow:0 26px 70px rgba(0,0,0,.42), 0 0 50px rgba(125,220,255,.08);
}
.phone-screen {
  height:100%;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(245,249,255,.12);
  background:
    radial-gradient(circle at 50% 16%, rgba(245,249,255,.28), transparent 20%),
    linear-gradient(145deg,var(--shot-a,#7DDCFF),var(--shot-b,#0B1220));
  position:relative;
  padding:18px;
}
.phone-screen::before {
  content:"";
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  width:62px;
  height:7px;
  border-radius:999px;
  background:rgba(5,8,13,.42);
}
.phone-title {
  position:absolute;
  left:18px;
  right:18px;
  top:44px;
  font-weight:900;
  letter-spacing:-.04em;
  font-size:1.1rem;
  color:#F5F9FF;
}
.phone-block {
  position:absolute;
  left:18px;
  right:18px;
  height:54px;
  border-radius:16px;
  background:rgba(245,249,255,.20);
  border:1px solid rgba(245,249,255,.22);
}
.phone-block.one { top:94px; }
.phone-block.two { top:164px; }
.phone-block.three { top:234px; height:118px; }

.form { display:grid; gap:16px; margin-top:24px; }
.form label { display:grid; gap:8px; color:var(--text); font-weight:800; }
.form input, .form textarea, .form select {
  width:100%;
  border:1px solid var(--line);
  background:rgba(5,8,13,.74);
  color:var(--text);
  border-radius:14px;
  padding:14px 16px;
  font:inherit;
  outline:none;
}
.form input:focus, .form textarea:focus, .form select:focus {
  border-color:rgba(125,220,255,.78);
  box-shadow:0 0 0 4px rgba(125,220,255,.12);
}
.form textarea { min-height:160px; resize:vertical; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.fine-print { color:var(--muted-2); font-size:.92rem; }

.site-footer { border-top:1px solid var(--line); padding:30px 0; color:var(--muted); }
.footer-inner { display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.footer-links { display:flex; gap:16px; flex-wrap:wrap; }

@media (max-width: 940px) {
  .grid, .grid.three { grid-template-columns:1fr 1fr; }
  .product-layout, .split { grid-template-columns:1fr; }
}
@media (max-width: 680px) {
  .nav { align-items:flex-start; padding:18px 0; }
  .nav-links { flex-wrap:wrap; justify-content:flex-end; gap:12px 16px; }
  .hero { padding-top:72px; }
  .grid, .grid.three, .screenshots, .form-row { grid-template-columns:1fr; }
}