:root{
      --bg:#0b1020; --bg-soft:#121735; --ink:#e9ecff; --ink-dim:#b4bbff;
      --primary:#7ff0ff; --primary-strong:#3ad6ff; --cta:#9bff7f; --cta-strong:#65ff3a; --muted:#2a2f55;
      --maxw:1200px; --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35);
    }
    /* Reset & base */
    *{box-sizing:border-box}
    html,body{height:100%; margin:0; overflow-x:hidden; background: radial-gradient(1200px 800px at 80% -10%, #1a1f46 0%, #0b1020 55%), #0b1020; color:var(--ink); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height:1.6}
    a{color:inherit; text-decoration:none}
    .container{width:100%; max-width:var(--maxw); margin-inline:auto; padding:0 20px}

    /* Header */
    header{position:sticky; top:0; z-index:999; backdrop-filter:saturate(1.2) blur(10px); background:linear-gradient(180deg, rgba(10,13,30,.85), rgba(10,13,30,.6)); border-bottom:1px solid rgba(255,255,255,.06)}
    .nav{display:flex; align-items:center; gap:18px; padding:14px 0}
    .logo{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.4px}
    .logo-mark{width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, var(--primary), var(--cta)); box-shadow: var(--shadow); color:#041a12; font-weight:900}
    .spacer{flex:1}
    .menu{display:flex; gap:22px; align-items:center}
    .menu a{opacity:.85}
    .menu a:hover{opacity:1; color:var(--primary)}
    .cta-btn{padding:10px 16px; border-radius:999px; background:linear-gradient(90deg, var(--cta), var(--primary)); color:#092018; font-weight:700; box-shadow:0 8px 20px rgba(61,255,199,.25); transition: transform .15s ease, box-shadow .2s ease, filter .2s ease}
    .cta-btn:hover{transform:translateY(-2px)}
    .cta-btn:active{transform:translateY(0) scale(.98)}
    .hamburger{display:none; width:42px; height:42px; border:1px solid rgba(255,255,255,.12); border-radius:10px; align-items:center; justify-content:center; background:transparent}
    .hamburger span{width:22px; height:2px; background:#fff; position:relative; display:block}
    .hamburger span:before,.hamburger span:after{content:""; position:absolute; left:0; width:22px; height:2px; background:#fff}
    .hamburger span:before{top:-7px} .hamburger span:after{top:7px}
    @media (max-width: 900px){
      .menu{position:fixed; inset:60px 16px auto 16px; background:rgba(12, 15, 34, .96); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:14px; display:none; flex-direction:column; gap:10px}
      .menu.open{display:flex}
      .hamburger{display:flex}
      .cta-btn{padding:8px 12px; font-size:.9rem}
    }

    /* Hero */
    .hero{position:relative; min-height:92vh; display:grid; align-items:center; isolation:isolate}
    .hero:before{content:""; position:absolute; inset:-6px; background:radial-gradient(800px 420px at 20% 20%, rgba(58,214,255,.25), transparent 60%), radial-gradient(600px 360px at 80% 80%, rgba(155,255,127,.22), transparent 60%); z-index:-1; filter:blur(30px)}
    .hero-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:40px; align-items:center}
    @media (max-width: 960px){ .hero-grid{grid-template-columns:1fr; gap:24px} }
    .kicker{color:var(--primary); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.9rem}
    .h1{font-size:clamp(2.2rem, 2.6rem + 1.5vw, 4.2rem); line-height:1.08; margin:.35em 0 .25em; font-weight:900}
    .lead{font-size:1.05rem; color:var(--ink-dim)}
    .hero-card{margin-top:18px; padding:18px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border-radius:var(--radius)}
    .hero-list{margin:12px 0 0; padding-left:18px}
    .hero-actions{display:flex; gap:14px; margin-top:18px; flex-wrap:wrap}
    .btn{display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:12px; background:var(--primary); color:#00131a; font-weight:800; border:1px solid rgba(0,0,0,.05); transition: transform .15s ease, box-shadow .2s ease, filter .2s ease}
    .btn:hover{transform:translateY(-2px)}
    .btn:active{transform:translateY(0) scale(.98)}
    @media (max-width: 600px){ .btn{ padding:10px 14px; font-size:.95rem } }
    @media (max-width: 420px){ .btn{ padding:8px 12px; font-size:.9rem; border-radius:10px } }
    .hero-visual{position:relative; aspect-ratio: 16 / 10; border-radius:18px; overflow:hidden; background: linear-gradient(135deg, #1a2047, #0e1433); border:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:var(--ink-dim);

background-image:url('1.avif'); background-size:100% auto; background-position:top center;

}

    /* Sections */
    section{scroll-margin-top:80px}
    .section{padding:72px 0}
    .section.alt{background:var(--bg-soft)}
    .section h2{font-size:clamp(1.6rem, 1.3rem + 1vw, 2.2rem); margin:0 0 .5em; line-height:1.15}
    .section p{margin:.5em 0}
    .grid-2{display:grid; grid-template-columns: 1.1fr .9fr; gap:34px}
    @media (max-width: 960px){ .grid-2{grid-template-columns:1fr} }
    .card{border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border-radius:var(--radius); padding:20px}

    /* Full width featured visual (text placeholder) */
    .fw-image{ position:relative; width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.08); background:#0f1538; display:flex; align-items:center; justify-content:center; color:var(--ink-dim); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
background-image:url('1.avif'); background-size:100% auto; background-position:top center;

 }

    /* Provider logos as text blocks */
    .provider-grid{ display:grid; grid-template-columns: repeat(6, 1fr); gap:16px; margin-top:16px }
    .provider{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:16px; display:flex; align-items:center; justify-content:center; min-height:64px; text-transform:uppercase; font-size:.9rem; color:var(--ink-dim) }
    @media (max-width:1000px){ .provider-grid{ grid-template-columns: repeat(4, 1fr) } }
    @media (max-width:640px){ .provider-grid{ grid-template-columns: repeat(3, 1fr) } }

    /* Pros/Cons */
    .proscons{display:grid; grid-template-columns:1fr 1fr; gap:20px}
    .proscons ul{margin:0; padding-left:18px}
    .badge{display:inline-block; font-size:.85rem; padding:6px 10px; border-radius:999px; background:rgba(127,240,255,.15); border:1px solid rgba(127,240,255,.35); color:var(--primary); margin-bottom:8px}
    @media (max-width: 900px){ .proscons{grid-template-columns:1fr} }

    /* CTA Blocks */
    .cta{display:grid; grid-template-columns: 1.2fr .8fr; gap:22px; align-items:center; padding:24px; border-radius:20px; background:linear-gradient(90deg, rgba(127,240,255,.08), rgba(155,255,127,.08)); border:1px solid rgba(255,255,255,.12)}
    .cta h3{margin:.1em 0 .3em; font-size:1.6rem}
    .cta p{margin:.2em 0 .8em}
    .cta .btn{background:linear-gradient(90deg, var(--cta), var(--primary)); color:#041a12}
    @media (max-width: 960px){ .cta{grid-template-columns:1fr} }

    /* Cities chips */
    .cities{ display:grid; grid-template-columns: repeat(6, 1fr); gap:10px; margin-top:12px }
    .city-chip{ text-align:center; padding:10px 8px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); font-size:.95rem }
    @media (max-width: 900px){ .cities{ grid-template-columns: repeat(4, 1fr) } }
    @media (max-width: 600px){ .cities{ grid-template-columns: repeat(3, 1fr) } }

    /* Footer */
    footer{padding:38px 0 60px; color:var(--ink-dim); border-top:1px solid rgba(255,255,255,.08)}
    .pill{display:inline-flex; align-items:center; gap:8px; font-size:.85rem; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12)}
    .divider{height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); margin:28px 0}