:root{
  --bg:#0b1020;
  --card:#0f172a;
  --muted:#94a3b8;
  --text:#e5e7eb;
  --brand:#22d3ee;
  --brand-2:#a78bfa;
  --ring:#22d3ee55;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#0b1020 0%, #0d1328 100%);
  line-height:1.65;
}
h1,h2,h3,h4{font-family:Lexend,Inter,system-ui,sans-serif; line-height:1.2; margin:0 0 .6rem}
h1{font-size:clamp(2rem,3vw,3rem)}
h2{font-size:clamp(1.5rem,2.5vw,2rem)}
h3{font-size:1.25rem}
p{margin:.5rem 0 1rem}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--muted)}
.inline-link{border-bottom:1px dashed var(--brand); padding-bottom:1px}
.site-header, .site-footer{position:relative; z-index:50}
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem; border-bottom:1px solid #1e293b; backdrop-filter: blur(8px);
  position:sticky; top:0; background:rgba(2,6,23,.6)
}
.logo{display:flex; align-items:center; gap:.6rem; font-weight:800}
.logo-mark{
  display:inline-grid; place-items:center;
  width:36px;height:36px;border-radius:10px;
  background: radial-gradient(100% 100% at 100% 0, var(--brand), var(--brand-2));
  color:#0b1020; font-weight:900
}
.logo-text{letter-spacing:.5px}
.main-nav{display:flex; gap:1rem; flex-wrap:wrap}
.nav-link{padding:.4rem .6rem; border-radius:.7rem; color:var(--text); text-decoration:none}
.nav-link:hover{background:#111829}
.nav-link.active{background:linear-gradient(90deg,var(--brand-2),var(--brand)); color:#0b1020; font-weight:700}
.cta{padding:.6rem 1rem; border-radius:999px; background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#0b1020; font-weight:700; text-decoration:none}
.cta:hover{filter:saturate(1.2)}

.page{max-width:1100px; margin:0 auto; padding:2rem 1rem}
.hero{
  display:grid; min-height:60vh; place-items:center; text-align:center
}
.hero .pill-bar{display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; padding:0; list-style:none; margin:1rem 0 0}
.hero .pill-bar li{background:#0e162c; border:1px solid #1e2a44; padding:.4rem .7rem; border-radius:999px}
.hero-actions{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin:1rem 0}
.btn{display:inline-block; padding:.7rem 1.1rem; border-radius:.9rem; background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#0b1020; font-weight:700; border:0; cursor:pointer; text-decoration:none}
.btn:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent; color:var(--text); border:1px solid #334155}
.grid-3{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem}
.card{background:linear-gradient(180deg,#0c1226,#0b1224); border:1px solid #1f2b45; padding:1rem; border-radius:1rem; box-shadow:0 10px 30px #0003}
.two-col{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.2rem}
.info-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem}
.stepper{display:grid; gap:.5rem; counter-reset:step}
.stepper li{background:#0e162c;border:1px solid #1e2a44;padding:.8rem;border-radius:.8rem; list-style:none}
.trust .checklist, .policy .bullets, .service-list .bullets, .footer-list{list-style:none; padding:0; margin:0}
.checklist li::before{content:"✔"; margin-right:.5rem; color:var(--brand)}
.bullets li{margin:.4rem 0; padding-left:.6rem; position:relative}
.bullets li::before{content:"—"; position:absolute; left:0; color:var(--brand)}
.pricing-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem}
.price-card{background:#0e162c;border:1px solid #1e2a44;padding:1rem;border-radius:1rem}
.price-card.popular{outline:2px solid var(--brand)}
.page-hero{margin-bottom:1rem}
.contact-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:1rem}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact-form .field{display:grid; gap:.3rem; margin-bottom:.8rem}
input, textarea{background:#0b142a; border:1px solid #22304f; color:var(--text); border-radius:.6rem; padding:.7rem}
input:focus, textarea:focus{outline:2px solid var(--ring); box-shadow:0 0 0 4px var(--ring)}
.site-footer{margin-top:3rem; border-top:1px solid #1e293b; padding:2rem 1rem; background:#0a0f20}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:1rem}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.footer-grid{grid-template-columns:1fr}}
.footer-logo{display:flex; align-items:center; gap:.6rem; margin-bottom:.5rem}
.footer-list li{margin:.3rem 0}
.footer-bottom{display:grid; gap:.3rem; margin-top:1rem; color:var(--muted)}

/* Skip link & focus */
.skip-link{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:1rem; top:1rem; width:auto; height:auto; background:#fff; color:#111; padding:.5rem; z-index:1000}

/* Reveal animations */
.reveal{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1; transform:none}

/* Cookie banner */
#cookie-banner{position:fixed; inset:auto 1rem 1rem 1rem; background:#0e162c; border:1px solid #1e2a44; border-radius:1rem; padding:1rem; box-shadow:0 10px 40px #0008}
.cookie-content{display:flex; align-items:center; gap:1rem; justify-content:space-between; flex-wrap:wrap}
.cookie-actions{display:flex; gap:.5rem}
[hidden]{display:none !important}
.btn:focus, .cta:focus, .nav-link:focus{outline:2px solid var(--ring)}

/* Fancy underline for links */
a{background-image: linear-gradient(currentColor,currentColor); background-position: 0% 100%; background-repeat:no-repeat; background-size: 0% 2px; transition: background-size .25s ease}
a:hover{background-size:100% 2px}