/* Netii Styles — dark theme with magenta accents (#ef2e7e) */
:root{
  --bg-900:#0e0f12;
  --bg-800:#13151a;
  --bg-700:#1a1d24;
  --card:#171923;
  --text:#e8e9ec;
  --muted:#a7adba;
  --accent:#ef2e7e;
  --accent-600:#d42770;
  --focus: 0 0 0 3px rgba(239,46,126,.35);
  --radius:14px;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  line-height:1.5;
  color:var(--text);
  background: linear-gradient(180deg,var(--bg-900), var(--bg-800));
}

/* Utilities */
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.visually-hidden{position:absolute!important; clip: rect(1px,1px,1px,1px); padding:0; border:0; height:1px; width:1px; overflow:hidden}
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;background:#000;border-radius:8px;padding:8px 12px;color:#fff;z-index:1000}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background: rgba(10,12,16,.75);
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{display:flex;align-items:center;gap:24px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);font-weight:700;font-size:1.125rem}
.brand img{height:36px;width:auto;filter: drop-shadow(0 4px 10px rgba(0,0,0,.4));}
.nav-toggle{display:none}
.menu{list-style:none;margin:0;padding:0;display:flex;gap:18px}
.menu a{color:var(--text);text-decoration:none;padding:10px 12px;border-radius:10px}
.menu a:hover{background:var(--bg-700)}
.header-cta{margin-left:auto;display:flex;gap:10px}

/* Buttons */
.btn{display:inline-block;border:1px solid transparent;padding:12px 16px;border-radius:12px;text-decoration:none;font-weight:600;box-shadow:var(--shadow);}
.btn-solid{background:var(--accent); color:#fff}
.btn-solid:hover{background:var(--accent-600)}
.btn-outline{border-color:rgba(255,255,255,.2); color:var(--text); background:transparent}
.btn-outline:hover{border-color:rgba(255,255,255,.35)}
.btn:focus{outline:none; box-shadow: var(--focus)}
.btn-lg{font-size:1.1rem;padding:16px 22px;border-radius:14px}

/* Hero */
.hero{background:
  radial-gradient(1200px 400px at 20% -10%, rgba(239,46,126,.15), transparent 60%),
  radial-gradient(800px 300px at 80% 0%, rgba(239,46,126,.1), transparent 70%);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr; gap:32px; padding:64px 0}
.hero-copy h1{font-size: clamp(2rem, 1.2rem + 3vw, 3.2rem); margin:0 0 10px}
.grad{background: linear-gradient(90deg,#ff7fb5,var(--accent)); -webkit-background-clip: text; background-clip:text; color:transparent}
.lead{font-size:1.125rem;color:var(--muted);max-width:50ch}
.cta-row{display:flex;gap:12px;margin:16px 0 8px}
.hero-bullets{display:flex;flex-wrap:wrap;gap:14px;list-style:none;padding:0;margin:12px 0 6px}
.hero-bullets li{background:var(--bg-700); padding:8px 12px; border-radius:999px; font-size:.95rem}

.hero-card{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
.checker h2{margin:0 0 8px}
.checker input{width:100%; padding:14px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.1); background:#0b0d12; color:var(--text); margin-bottom:10px}
.checker-note{color:var(--muted); font-size:.9rem}

/* Plans */
.section-head{padding:56px 0 6px}
.plans-grid{display:grid; grid-template-columns: repeat(3,1fr); gap:22px; padding-bottom:20px}
.plan-card{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
.plan-card h3{margin-top:0}
.plan-card .speed{color:var(--muted)}
.plan-card .price{font-size:1.8rem; margin:14px 0 6px}
.match-note{font-size:.85rem;color:var(--muted); margin-top:10px}
.legal{color:var(--muted); font-size:.95rem; padding-bottom:30px}

/* Business */
.business{background: linear-gradient(180deg, var(--bg-800), var(--bg-900)); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06)}
.biz-grid{display:grid; grid-template-columns: repeat(3,1fr); gap:22px; padding-bottom:48px}
.biz-card{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}

/* Why */
.why{}
.why-grid{display:grid; grid-template-columns: repeat(4,1fr); gap:22px; padding-bottom:48px}
.why-grid article{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:22px;}

/* FAQ */
.faq details{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:16px 18px; margin:0 0 12px}
.faq summary{cursor:pointer;font-weight:600}

/* CTA */
.cta{padding:60px 0; text-align:center; background: radial-gradient(600px 160px at 50% -40px, rgba(239,46,126,.2), transparent), var(--bg-900);}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.06); background:var(--bg-900); color:var(--muted)}
.footer-grid{display:grid; grid-template-columns: repeat(4,1fr); gap:24px; padding:36px 0}
.site-footer h4{color:var(--text); margin:0 0 8px}
.site-footer ul{list-style:none; padding:0; margin:0}
.site-footer a{color:var(--muted); text-decoration:none}
.site-footer a:hover{color:var(--text)}
.footer-brand{display:flex; gap:12px; align-items:center}
.footer-brand img{height:30px}

/* Responsive */
@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr; padding:40px 0}
  .plans-grid, .biz-grid{grid-template-columns:1fr 1fr}
  .why-grid{grid-template-columns:1fr 1fr}
  .header-cta{display:none}
}
@media (max-width: 640px){
  .menu{display:none}
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.2); background:transparent; color:var(--text)}
  .plans-grid, .biz-grid, .why-grid, .footer-grid{grid-template-columns:1fr}
}