:root {
  --accent: #4FF2E8;
  --bg-dark: #0B0C0F;
  --bg-light: #FAFAFB;
  --text: #0F172A;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family:-apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'; color:var(--text); background:var(--bg-light); }
a { color: inherit; text-decoration: none; }
a.link { color: var(--accent); }
.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:12px 18px; border-radius:999px; border:1px solid rgba(15,23,42,.12); transition:.25s ease; }
.btn.primary { background: var(--accent); color:#001315; border-color: transparent; }
.btn.primary:hover { filter: brightness(.92); transform: translateY(-1px); }
.btn.ghost { background: white; }
.nav { display:flex; align-items:center; justify-content:space-between; padding:18px 0; }
.nav .links a { margin-left:22px; opacity:.88; }
.nav .links a:hover { color: var(--accent); opacity:1; }
.logo { display:flex; align-items:center; gap:.6rem; font-weight:600; letter-spacing:.3px; }
.logo-mark { width:44px; height:44px; border-radius:12px; background: radial-gradient(120% 120% at 50% 0%, #1bffff 0%, #00d4ff 40%, #004448 100%); display:grid; place-items:center; box-shadow: 0 8px 30px rgba(79,242,232,.25); }
.logo-mark span { color:#fff; font-weight:800; font-size:22px; }
.hero { background: linear-gradient(180deg, #0a0c10 0%, #0b0c0f 60%, #0b0c0f 100%); color:#e5f9f7; padding:84px 0 40px; overflow:hidden; }
.hero .grid { display:grid; grid-template-columns: 1.05fr .95fr; gap:36px; align-items:center; }
.hero h1 { font-size: clamp(36px, 5vw, 64px); line-height:1.02; margin:0 0 18px; }
.hero p { color:#b7f4ee; opacity:.9; font-size: clamp(16px, 2.2vw, 18px); margin:0 0 28px; }
.badge { display:inline-block; background: rgba(79,242,232,.09); color: var(--accent); border:1px solid rgba(79,242,232,.25); padding:6px 10px; border-radius:999px; font-size:12.5px; margin-bottom:14px; }
.hero-card { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:12px; backdrop-filter: blur(8px); }
.phone { width:100%; border-radius:16px; display:block; }
.section { padding:72px 0; background: var(--bg-light); }
.section.alt { background:#ffffff; }
.section .title { text-align:center; margin:0 0 12px; font-size: clamp(26px, 3.6vw, 40px); }
.section .lead { text-align:center; color:#475569; margin:0 auto 36px; max-width:720px; }
.grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
.card { background:#fff; border:1px solid #eef1f4; border-radius:16px; padding:22px; transition:.25s; }
.card:hover { transform: translateY(-3px); box-shadow:0 20px 40px rgba(2, 12, 27, .06); }
.kicker { display:flex; width:48px; height:48px; align-items:center; justify-content:center; border-radius:10px; background: rgba(79,242,232,.18); color:#004f52; font-weight:700; }
.pricing { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; max-width:1000px; margin:0 auto; }
.price .amt { font-size:36px; font-weight:700; }
.price .per { color:#64748b; font-size:14px; }
.badge-pop { position:absolute; left:50%; transform: translate(-50%, -50%); top:0; background:#0b1414; color:var(--accent); border:1px solid rgba(79,242,232,.35); font-size:11px; padding:6px 10px; border-radius:999px; }
.footer { background:#0c1118; color:#c9d6d7; padding:48px 0; }
.footer a { color:#9beae2; }
footer .grid { display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:24px; }
.small { font-size:13px; color:#6b7280; }
hr.soft { border:0; height:1px; background:linear-gradient(90deg, rgba(2,12,27,0), rgba(2,12,27,.12), rgba(2,12,27,0)); margin:28px 0; }
.notice { padding:12px 16px; border-left:3px solid var(--accent); background:#f0fffd; border-radius:10px; }
@media (max-width: 980px) {
  .hero .grid { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .pricing { grid-template-columns: 1fr; }
  footer .grid { grid-template-columns: 1fr 1fr; }
}