:root {
  --bg: #070a0d;
  --panel: #10161b;
  --panel-2: #172229;
  --text: #eef8ef;
  --muted: #8ea0a4;
  --mint: #a6ffcb;
  --amber: #f6b35b;
  --cyan: #62d5ff;
  --stroke: rgba(166, 255, 203, 0.18);
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 80% 0%, rgba(98, 213, 255, .14), transparent 30%), radial-gradient(circle at 10% 70%, rgba(246, 179, 91, .14), transparent 30%), var(--bg); }
a { color: inherit; text-decoration: none; }
main { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.nav { height: 82px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: -.02em; }
.brand span { width: 28px; height: 28px; border-radius: 12px; background: conic-gradient(from 80deg, var(--mint), var(--cyan), var(--amber), var(--mint)); }
.nav-links { display: flex; gap: 24px; color: var(--muted); font-weight: 800; font-size: 14px; }
.hero { min-height: calc(100vh - 82px); display: grid; grid-template-columns: 1fr 420px; gap: 52px; align-items: center; padding: 56px 0 96px; }
.eyebrow { color: var(--mint); font-size: 12px; font-weight: 950; letter-spacing: .16em; margin: 0 0 14px; }
h1 { font-size: clamp(52px, 8vw, 96px); line-height: .9; letter-spacing: -.08em; margin: 0; max-width: 780px; }
h2 { font-size: clamp(34px, 5vw, 64px); line-height: .95; letter-spacing: -.06em; margin: 0; }
h3 { margin: 12px 0 8px; font-size: 24px; letter-spacing: -.04em; }
.lead { color: #bfced0; font-size: 20px; line-height: 1.55; max-width: 640px; margin: 28px 0; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.button { border-radius: 999px; padding: 15px 21px; font-weight: 900; }
.primary { background: var(--mint); color: #07100d; }
.secondary { border: 1px solid var(--stroke); color: var(--text); }
.phone { border-radius: 48px; padding: 14px; background: linear-gradient(145deg, #2d383d, #050708); box-shadow: 0 34px 100px rgba(0,0,0,.55); }
.phone-screen { min-height: 760px; border-radius: 36px; background: linear-gradient(180deg, #081015, #11100d); border: 1px solid rgba(255,255,255,.1); padding: 28px; overflow: hidden; }
.status { display: flex; justify-content: space-between; color: var(--mint); font-weight: 950; font-size: 12px; letter-spacing: .1em; }
.phone h2 { font-size: 34px; margin-top: 28px; }
.map { height: 170px; margin: 28px 0; border: 1px solid var(--stroke); border-radius: 28px; display: flex; align-items: center; justify-content: space-around; background: rgba(255,255,255,.04); }
.map span { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: #10161b; border: 2px solid var(--mint); font-weight: 950; }
.browser { border: 1px solid rgba(98,213,255,.28); border-radius: 24px; overflow: hidden; background: #dfe9e5; }
.bar { height: 32px; background: #070a0d; }
.shot { height: 92px; margin: 14px; border-radius: 18px; background: #172229; }
.rows { height: 90px; margin: 14px; border-radius: 18px; background: repeating-linear-gradient(180deg, #fff, #fff 18px, #d4dfdc 18px, #d4dfdc 28px); }
.approval { margin-top: 18px; border-radius: 24px; background: rgba(246,179,91,.16); border: 1px solid rgba(246,179,91,.36); padding: 18px; color: var(--amber); font-weight: 900; }
.section { padding: 104px 0; border-top: 1px solid rgba(255,255,255,.08); }
.loop-grid, .price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 34px; }
.price-grid { grid-template-columns: repeat(3, 1fr); }
article { border: 1px solid var(--stroke); border-radius: 30px; background: rgba(16,22,27,.76); padding: 24px; }
article strong { color: var(--amber); font-size: 26px; }
article p { color: var(--muted); line-height: 1.55; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.executor-list { display: grid; gap: 12px; }
.executor-list div { display: flex; justify-content: space-between; gap: 20px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); border-radius: 20px; padding: 18px; }
.executor-list span { color: var(--mint); font-weight: 900; }
.executor-list b { color: var(--muted); text-align: right; }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .hero, .split { grid-template-columns: 1fr; }
  .phone { max-width: 420px; width: 100%; margin: 0 auto; }
  .loop-grid, .price-grid { grid-template-columns: 1fr; }
}