/* Landing page: hero, device frames, stats, feature strip */
.hero { position: relative; padding: 72px 0 40px; overflow: hidden; }
.hero-glow { position: absolute; inset: -200px -10% auto; height: 900px; z-index: -1; background:
  radial-gradient(600px 380px at 20% 30%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%),
  radial-gradient(520px 360px at 80% 20%, color-mix(in srgb, var(--brand-2) 18%, transparent), transparent 70%),
  radial-gradient(700px 400px at 50% 90%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 70%); }
.hero-copy { text-align: center; max-width: 900px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); box-shadow: var(--shadow); }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #2fb344; box-shadow: 0 0 0 4px color-mix(in srgb, #2fb344 22%, transparent); }
.hero h1 { font-size: clamp(38px, 6.4vw, 72px); font-weight: 850; margin: 22px 0 18px; letter-spacing: -0.035em; }
.grad { background: linear-gradient(100deg, var(--brand) 10%, var(--brand-2) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: clamp(17px, 2vw, 20px); color: var(--ink-2); max-width: 720px; margin: 0 auto; }
.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

.devices { position: relative; margin-top: 56px; padding: 0 6% 70px; }
.browser { margin: 0; border-radius: 14px; overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.browser-bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.browser-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.browser-bar i:nth-child(2) { background: #febc2e; }
.browser-bar i:nth-child(3) { background: #28c840; }
.browser-bar span { margin: 0 auto; font-size: 12.5px; color: var(--muted); background: var(--card); border: 1px solid var(--line); padding: 2px 40px; border-radius: 7px; }
.tablet, .phone { position: absolute; margin: 0; background: #0b0c0f; box-shadow: var(--shadow-lg); border: 1px solid #2b2f38; }
.tablet { width: 38%; left: 0; bottom: 0; border-radius: 22px; padding: 10px; transform: rotate(-3deg); }
.phone { width: 17%; right: 0; bottom: 10px; border-radius: 30px; padding: 8px; transform: rotate(4deg); }
.tablet img { border-radius: 13px; }
.phone img { border-radius: 23px; aspect-ratio: 390 / 760; object-fit: cover; object-position: top; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 30px; }
.stats div { background: var(--card); padding: 22px 20px; text-align: center; }
.stats b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; color: var(--brand); }
.stats span { color: var(--muted); font-size: 14px; }

.strip { padding: 26px 0; border-block: 1px solid var(--line); background: var(--bg-alt); overflow: hidden; }
.strip-in { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; color: var(--ink-2); font-weight: 600; font-size: 15px; }
.strip-in span::before { content: '●'; color: var(--brand); font-size: 9px; margin-inline-end: 10px; vertical-align: 2px; }

@media (max-width: 860px) {
  .hero { padding-top: 44px; }
  .devices { padding: 0 0 54px; margin-top: 40px; }
  .tablet { width: 46%; left: -2%; bottom: 0; }
  .phone { width: 26%; right: -2%; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .devices { padding-bottom: 40px; }
  .phone { border-radius: 20px; padding: 5px; }
  .phone img { border-radius: 15px; }
  .tablet { border-radius: 14px; padding: 5px; }
  .tablet img { border-radius: 9px; }
  .browser-bar span { display: none; }
  .stats b { font-size: 24px; }
}