:root {
  --bg: #05070c;
  --bg2: #0c1424;
  --card: #111826;
  --card2: #182132;
  --stroke: #1f2a3a;
  --stroke-soft: rgba(255, 255, 255, .08);
  --text: #f4f7fb;
  --muted: #9ba8bd;
  --dim: #5f6c82;
  --accent: #22e3ff;
  --accent2: #2e7bff;
  --violet: #8b5cf6;
  --green: #37e28e;
  --amber: #ffd23f;
  --red: #ff3b5c;
  --grad: linear-gradient(135deg, #22e3ff, #2e7bff);
  --radius: 20px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 22px; }

/* ambient glow background */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 45% at 50% -5%, rgba(46,123,255,.22), transparent 60%),
    radial-gradient(45% 35% at 85% 10%, rgba(34,227,255,.14), transparent 60%),
    radial-gradient(50% 40% at 10% 20%, rgba(139,92,246,.12), transparent 60%),
    linear-gradient(180deg, #0c1424, #05070c 40%);
}

/* nav */
nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(5, 7, 12, .55);
  border-bottom: 1px solid var(--stroke-soft);
}
nav .wrap { display: flex; align-items: center; gap: 14px; height: 66px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: .5px; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
nav .links { margin-left: auto; display: flex; gap: 26px; align-items: center; }
nav .links a { color: var(--muted); font-size: 14px; font-weight: 500; }
nav .links a:hover { color: var(--text); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px; border-radius: 999px; font-weight: 600; font-size: 15px;
  background: var(--grad); color: #04121a;
  box-shadow: 0 10px 30px rgba(34, 227, 255, .28);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(34, 227, 255, .38); }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--stroke); box-shadow: none; }
.play-badge { display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 22px; border-radius: 14px; background: #000; border: 1px solid var(--stroke);
  transition: transform .15s ease, border-color .15s; }
.play-badge:hover { transform: translateY(-2px); border-color: var(--accent); }
.play-badge .g { font-size: 26px; }
.play-badge small { display: block; color: var(--muted); font-size: 11px; letter-spacing: .4px; }
.play-badge strong { display: block; color: #fff; font-size: 17px; line-height: 1.1; }

/* hero */
.hero { padding: 76px 0 40px; }
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  background: rgba(34,227,255,.1); border: 1px solid rgba(34,227,255,.25); color: var(--accent);
  font-size: 13px; font-weight: 600; margin-bottom: 22px; }
h1 { font-size: clamp(38px, 6vw, 62px); line-height: 1.04; letter-spacing: -1.5px; font-weight: 800; }
h1 .g { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { color: var(--muted); font-size: 19px; margin: 20px 0 30px; max-width: 520px; }
.hero .cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero .stats { display: flex; gap: 30px; margin-top: 34px; }
.hero .stats div { }
.hero .stats b { font-size: 22px; font-family: "Segoe UI", sans-serif; }
.hero .stats span { display: block; color: var(--dim); font-size: 13px; }

/* phone mockup */
.phone { justify-self: center; position: relative; }
.phone .frame {
  width: 280px; border-radius: 42px; padding: 12px;
  background: linear-gradient(160deg, #1a2333, #0a0e16);
  border: 1px solid var(--stroke); box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.phone .frame img { border-radius: 32px; width: 100%; }
.phone::after {
  content: ""; position: absolute; inset: -30px; z-index: -1; border-radius: 60px;
  background: radial-gradient(circle at 50% 40%, rgba(34,227,255,.35), transparent 65%);
  filter: blur(30px);
}

/* sections */
section { padding: 70px 0; }
.eyebrow { color: var(--accent); font-weight: 700; letter-spacing: 2px; font-size: 13px; text-transform: uppercase; }
h2 { font-size: clamp(28px, 4vw, 44px); letter-spacing: -1px; margin: 10px 0 14px; font-weight: 800; }
.section-lead { color: var(--muted); font-size: 18px; max-width: 640px; }
.center { text-align: center; }
.center .section-lead { margin: 0 auto; }

/* feature grid */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.card {
  background: linear-gradient(180deg, rgba(24,33,50,.7), rgba(17,24,38,.7));
  border: 1px solid var(--stroke-soft); border-radius: var(--radius); padding: 26px;
  transition: transform .18s ease, border-color .18s;
}
.card:hover { transform: translateY(-4px); border-color: rgba(34,227,255,.35); }
.card .ico { width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-size: 24px; margin-bottom: 16px; background: rgba(34,227,255,.12); border: 1px solid rgba(34,227,255,.2); }
.card h3 { font-size: 19px; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 15px; }

/* showcase alternating */
.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; margin-top: 30px; }
.showcase.rev { direction: rtl; } .showcase.rev > * { direction: ltr; }
.showcase .txt h3 { font-size: 28px; letter-spacing: -.5px; margin-bottom: 12px; }
.showcase .txt p { color: var(--muted); font-size: 17px; }
.showcase .txt ul { list-style: none; margin-top: 18px; display: grid; gap: 10px; }
.showcase .txt li { display: flex; gap: 10px; align-items: center; color: #d7dee9; }
.showcase .txt li::before { content: "✓"; color: #04121a; background: var(--grad); width: 22px; height: 22px;
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex: 0 0 auto; }
.showcase .shot { justify-self: center; }
.showcase .shot img { width: 240px; border-radius: 30px; border: 1px solid var(--stroke); box-shadow: 0 30px 70px rgba(0,0,0,.5); }

/* cta band */
.band { text-align: center; background:
  radial-gradient(60% 100% at 50% 0%, rgba(46,123,255,.18), transparent), var(--card);
  border: 1px solid var(--stroke-soft); border-radius: 28px; padding: 56px 24px; margin: 20px 0; }
.band h2 { margin-bottom: 10px; }
.band .cta { display: flex; justify-content: center; gap: 14px; margin-top: 24px; flex-wrap: wrap; }

/* footer */
footer { border-top: 1px solid var(--stroke-soft); padding: 44px 0; margin-top: 40px; color: var(--muted); }
footer .wrap { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
footer .links { margin-left: auto; display: flex; gap: 24px; flex-wrap: wrap; }
footer a { color: var(--muted); font-size: 14px; } footer a:hover { color: var(--text); }
footer .brand { color: var(--text); }

/* legal pages */
.legal { max-width: 820px; margin: 0 auto; padding: 50px 22px 90px; }
.legal h1 { font-size: 34px; letter-spacing: -1px; }
.legal .meta { color: var(--dim); font-size: 14px; margin-top: 6px; }
.legal h2 { font-size: 20px; color: var(--accent); margin: 32px 0 8px; }
.legal p, .legal li { color: #d7dee9; margin-bottom: 10px; }
.legal ul { padding-left: 20px; }
.legal .box { background: var(--card); border: 1px solid var(--stroke); border-radius: 16px; padding: 18px 20px; margin: 16px 0; }
.legal table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
.legal th, .legal td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--stroke); vertical-align: top; }
.legal th { color: var(--muted); }
code { background: #0a0e16; padding: 2px 7px; border-radius: 6px; color: var(--accent); font-size: 13px; }

/* wide banners (lifestyle 01 + feature graphic) */
.wide { padding: 30px 0 56px; }
.wide .head { text-align: center; max-width: 740px; margin: 0 auto 30px; }
.wide .head h2 { margin: 8px 0 12px; }
.wide-figure { position: relative; }
.wide-figure::after {
  content: ""; position: absolute; inset: 8% 16%; z-index: -1;
  background: radial-gradient(circle at 50% 50%, rgba(34,227,255,.28), transparent 70%);
  filter: blur(46px);
}
.wide-figure img {
  width: 100%; border-radius: 24px; border: 1px solid var(--stroke);
  box-shadow: 0 44px 110px rgba(0,0,0,.62);
}

@media (max-width: 860px) {
  .wide-figure img { border-radius: 16px; }
  .hero .wrap { grid-template-columns: 1fr; text-align: center; }
  .hero p.lead { margin-left: auto; margin-right: auto; }
  .hero .cta, .hero .stats { justify-content: center; }
  .features { grid-template-columns: 1fr; }
  .showcase, .showcase.rev { grid-template-columns: 1fr; direction: ltr; }
  nav .links { display: none; }
}