/* Base */
:root{--bg:#0b1020;--paper:#ffffff;--ink:#0b1220;--muted:#55627a;--brand:#0b4af2;--brand2:#60a5fa;--card:#ffffff;--card-b:#e6ebf5;--shadow:0 10px 30px rgb(2 6 23 / .12)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Inter,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif;color:var(--ink);background:var(--paper);max-width:100%;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto}
.wrap{width:calc(100% - 2rem);margin-inline:auto}
.nowrap{white-space:nowrap}
.lead{color:var(--muted)}

/* Header */
.header{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--card-b);background:color-mix(in srgb, var(--paper) 92%, transparent);backdrop-filter:saturate(1.2) blur(6px)}
.header .wrap{display:flex;align-items:center;gap:1rem;padding:.6rem 0}
.logo{font-weight:800}
.dotus{color:var(--brand)}
.nav{display:flex;gap:.5rem;flex-wrap:wrap}
.nav-item{display:inline-flex;padding:.4rem .6rem;border-radius:.55rem}
.nav-item:hover{background:color-mix(in srgb, var(--brand) 12%, transparent)}

/* Sections */
.section{padding:3.2rem 0}
.section.alt{background:color-mix(in srgb,var(--brand2) 4%, var(--paper))}
.section-hd{margin-bottom:1.1rem}
.section-hd h2{margin:.1rem 0 .3rem;font-size:clamp(1.5rem,2.6vw,2rem)}
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:1.5rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}

/* Hero */
.hero{background:radial-gradient(1200px 600px at 70% 0%, color-mix(in srgb,var(--brand2) 22%, transparent), transparent 60%),linear-gradient(180deg, color-mix(in srgb,var(--brand) 7%, var(--paper)), var(--paper))}
.hero-copy h1{font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:1.15;margin:.2rem 0 .6rem}
.pillbar{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem;min-width:0}
.pill{display:inline-flex;align-items:center;border:1px solid var(--card-b);border-radius:999px;padding:.3rem .55rem;color:var(--muted);font-weight:600}
.hero-img{display:flex;align-items:center;justify-content:center;min-width:0}
.hero-img img{border-radius:.75rem;border:1px solid var(--card-b);box-shadow:var(--shadow)}
.brandband{border-top:1px solid var(--card-b);background:color-mix(in srgb,var(--brand2) 6%, var(--paper));padding:.6rem 0;margin-top:1.2rem}
.logos{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.logo-badge{font-weight:800;color:var(--muted)}
.logo-chip{border:1px solid var(--card-b);border-radius:999px;padding:.25rem .5rem}

/* Cards / tiers */
.cards .card,.panel,.tier{background:var(--card);border:1px solid var(--card-b);border-radius:.85rem;box-shadow:var(--shadow);padding:1rem;word-wrap:break-word;overflow-wrap:break-word}
.cards .card h3{margin:.15rem 0 .25rem}
.tiers .tier header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.badge{background:color-mix(in srgb,var(--brand2) 18%, transparent);border:1px solid var(--card-b);border-radius:999px;padding:.1rem .45rem;font-weight:700}
.tier.hot{outline:3px solid color-mix(in srgb,var(--brand) 25%, transparent)}
.tier ul{margin:0;padding-left:1.1rem}

/* FAQ */
.faq details{padding:.7rem;border:1px solid var(--card-b);border-radius:.6rem;background:color-mix(in srgb,var(--paper) 75%, transparent)}
.faq details+details{margin-top:.6rem}

/* Footer */
.footer{background:linear-gradient(180deg, color-mix(in srgb,var(--brand) 6%, var(--paper)), color-mix(in srgb,var(--brand) 10%, #050a14));color:color-mix(in srgb,white 85%, var(--ink));padding:1.8rem 0}
.legal{font-size:.95rem}

/* Mobile hardening */
@media (max-width:900px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  .wrap{width:calc(100% - 1rem)}
  .section{padding:2.4rem 0}
  .hero-copy h1{font-size:1.7rem}
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr}
}