:root {
      --bg: #081018;
      --surface: #101926;
      --surface-2: #152132;
      --border: #223147;
      --text: #edf3ff;
      --muted: #9fb0cb;
      --accent: #70a7ff;
      --accent-2: #8b7dff;
      --green: #58d68d;
      --shadow: 0 14px 40px rgba(0,0,0,.28);
      --max: 1180px;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: Inter, Segoe UI, system-ui, -apple-system, sans-serif;
      background: radial-gradient(circle at top left, rgba(112,167,255,.14), transparent 26%), linear-gradient(180deg, #081018 0%, #0c1420 100%);
      color: var(--text);
      line-height: 1.55;
    }

    a { color: inherit; text-decoration: none; }
    .container { width: min(100% - 32px, var(--max)); margin: 0 auto; }

    header {
      position: sticky;
      top: 0;
      z-index: 20;
      backdrop-filter: blur(10px);
      background: rgba(8,16,24,.78);
      border-bottom: 1px solid rgba(255,255,255,.06);
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 0;
      gap: 12px;
    }

    .brand { font-weight: 800; letter-spacing: .05em; font-size: 1.05rem; }
    .brand span { color: var(--accent); }

    .nav-links {
      display: flex;
      gap: 18px;
      color: var(--muted);
      font-size: .94rem;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 18px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      font-weight: 600;
      transition: .18s ease;
    }

    .button:hover { transform: translateY(-1px); border-color: var(--accent); }
    .button.primary {
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      border: none;
      color: white;
      box-shadow: 0 10px 24px rgba(112,167,255,.22);
    }

    .hero {
      padding: 84px 0 48px;
      display: grid;
      grid-template-columns: 1.3fr .9fr;
      gap: 32px;
      align-items: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(88,214,141,.1);
      color: #c6f5d7;
      border: 1px solid rgba(88,214,141,.18);
      font-size: .82rem;
      margin-bottom: 18px;
    }

    h1 {
      font-size: clamp(2.4rem, 5vw, 4.2rem);
      line-height: 1.02;
      margin-bottom: 18px;
      letter-spacing: -.03em;
      max-width: 820px;
    }

    .hero p {
      color: var(--muted);
      font-size: 1.05rem;
      max-width: 680px;
      margin-bottom: 24px;
    }

    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
    .meta { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: .92rem; }
    .meta span { padding: 9px 12px; border-radius: 999px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); }

    .hero-card, .card {
      background: linear-gradient(180deg, rgba(21,33,50,.96), rgba(16,25,38,.96));
      border: 1px solid var(--border);
      border-radius: 24px;
      padding: 24px;
      box-shadow: var(--shadow);
    }

    .hero-card h3, .card h3 { font-size: 1.1rem; margin-bottom: 12px; }
    .mini-list { display: grid; gap: 12px; }
    .mini-item { padding: 14px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); }
    .mini-item strong { display: block; margin-bottom: 4px; }
    .mini-item span, .card p, .card li { color: var(--muted); font-size: .94rem; }

    section { padding: 28px 0; }
    .section-head { margin-bottom: 18px; }
    .section-head h2 { font-size: 1.8rem; margin-bottom: 8px; }
    .section-head p { color: var(--muted); max-width: 760px; }

    .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .card ul { padding-left: 18px; display: grid; gap: 8px; }

    .offer { border: 1px solid rgba(112,167,255,.24); background: linear-gradient(180deg, rgba(112,167,255,.09), rgba(16,25,38,.98)); }
    .price { font-size: 2rem; font-weight: 800; margin: 10px 0 4px; }
    .pill { display: inline-block; padding: 6px 10px; border-radius: 999px; font-size: .75rem; color: #dce8ff; background: rgba(112,167,255,.12); border: 1px solid rgba(112,167,255,.18); margin-bottom: 10px; }

    .steps { display: grid; gap: 14px; }
    .step { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 16px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); }
    .step-num { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); font-weight: 800; }

    .cta { margin: 28px 0 56px; padding: 28px; border-radius: 24px; background: linear-gradient(135deg, rgba(112,167,255,.16), rgba(139,125,255,.12)); border: 1px solid rgba(112,167,255,.18); box-shadow: var(--shadow); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }

    footer { padding: 28px 0 48px; color: var(--muted); text-align: center; font-size: .9rem; }

    @media (max-width: 980px) {
      .hero, .grid-3, .grid-2 { grid-template-columns: 1fr; }
      .nav-links { display: none; }
    }