:root{
      --brand:#ff0044;           /* primary brand color */
      --bg:#0f0f12;              /* dark base */
      --surface:#14141a;         /* card surface */
      --text:#f7f7fb;            /* main text */
      --muted:#b9bdc6;           /* secondary text */
      --ok:#18c964;              /* check accents */
      --ring:rgba(255,0,68,.35);
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius: 18px;
      --radius-lg: 24px;
      --spacing: clamp(14px, 2.2vw, 22px);
      --container: min(1100px, 92vw);
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body{
      margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
      color:var(--text); background: radial-gradient(1200px 700px at 85% -10%, rgba(255,0,68,.15), transparent), linear-gradient(180deg,#0c0c10, #121217 60%, #0d0d12);
    }
    a{ color: inherit; text-decoration: none; }
    .container{ width:var(--container); margin-inline:auto; }
    .eyebrow{ font-size:.9rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
    .h1{ font-size: clamp(28px, 5.4vw, 44px); line-height: 1.1; margin:.35em 0 .6em; }
    .lead{ color:var(--muted); font-size: clamp(14px, 2.1vw, 18px); }

    /* ---- BUTTONS ---- */
    .btn{ --_bg:var(--brand); --_fg:#fff; display:inline-block; padding:14px 18px; border-radius: 14px; background: var(--_bg); color: var(--_fg); font-weight: 700; border:1px solid transparent; transition: transform .12s ease, box-shadow .12s ease, background .2s ease; }
    .btn:hover{ transform: translateY(-2px); box-shadow: 0 8px 26px rgba(255,0,68,.3); }
    .btn.secondary{ --_bg: transparent; --_fg: var(--text); border-color: rgba(255,255,255,.16); backdrop-filter: blur(6px); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)); }
    .btn.block{ display:block; text-align:center; }

    /* ---- PRICING CARDS ---- */
    .grid{ display:grid; gap:18px; grid-template-columns: repeat(12, 1fr); }
    .card{ grid-column: span 12; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.08); border-radius: var(--radius-lg); padding: clamp(18px, 2.6vw, 26px); box-shadow: var(--shadow); position:relative; overflow:hidden; }
    .card.popular{ border-color: var(--ring); box-shadow: 0 14px 60px rgba(255,0,68,.18), var(--shadow); }
    .badge{ position:absolute; top:16px; right:16px; background: #1c1c22; color:#ffd1de; border:1px solid var(--ring); padding:6px 10px; border-radius: 999px; font-size:.78rem; letter-spacing:.08em; }
    .price{ font-size: clamp(28px, 3.8vw, 40px); font-weight: 800; }
    .period{ font-size: .9rem; color: var(--muted); }
    .features{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px; }
    .features li{ display:flex; gap:10px; align-items: flex-start; color: var(--text); }
    .features svg{ flex: 0 0 auto; }

    /* layout for 3 cards */
    @media (min-width: 860px){
      .card{ grid-column: span 4; }
      .card.tall{ transform: translateY(-6px); }
    }

    /* ---- SECTIONS ---- */
    section{ padding: clamp(32px, 6vw, 72px) 0; }
    .section-head{ margin-bottom: 18px; display:flex; flex-direction: column; gap: 8px; }

    /* ---- TABS (for Services page) ---- */
    .tabs{ display:flex; flex-wrap: wrap; gap:8px; margin:18px 0 24px; }
    .tab{ padding:10px 14px; border-radius: 12px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); cursor:pointer; user-select:none; }
    .tab[aria-selected="true"]{ background: var(--brand); border-color: transparent; }
    .tabpanels > div{ display:none; }
    .tabpanels > div[aria-hidden="false"]{ display:block; }

    /* ---- FAQ ---- */
    .faq{ border-top:1px solid rgba(255,255,255,.12); }
    .faq-item{ border-bottom:1px solid rgba(255,255,255,.12); padding: 16px 0; }
    .faq-q{ display:flex; justify-content:space-between; gap:12px; cursor:pointer; }
    .faq-a{ color: var(--muted); max-height:0; overflow:hidden; transition:max-height .25s ease; }
    .faq-item[open] .faq-a{ max-height: 400px; }

    /* accessibility: motion */
    @media (prefers-reduced-motion: reduce){
      .btn, .card, .faq-a{ transition:none !important; }
    }