:root { color-scheme: dark; --black:#000; --blue:#004aad; --blue-light:#1264ce; --white:#fff; --muted:#a6a6a6; --line:#292929; }
* { box-sizing:border-box; }
html { background:var(--black); }
body { margin:0; min-height:100vh; overflow-x:hidden; color:var(--white); background:var(--black); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
.brand-banner { position:relative; display:grid; place-items:center; width:100%; height:clamp(10.5rem,25vw,14rem); margin-top:clamp(1.5rem,5vw,4.5rem); background:var(--blue); overflow:hidden; }
.logo-disc { position:relative; z-index:2; display:grid; place-items:center; width:clamp(10rem,28vw,14.5rem); aspect-ratio:1; background:var(--black); border-radius:50%; box-shadow:0 0 0 .5rem rgba(0,0,0,.08); }
.logo-crop { position:relative; width:90%; aspect-ratio:716/255; overflow:hidden; }
.logo-crop img { position:absolute; width:223.464%; max-width:none; left:-58.101%; top:-111%; filter:brightness(0) invert(1); }
.speed-lines { position:absolute; left:clamp(1rem,5vw,5rem); top:50%; width:min(28vw,22rem); transform:translateY(-50%); }
.speed-lines span { display:block; height:.22rem; margin:.85rem 0; background:var(--white); border-radius:99px; }
.speed-lines span:nth-child(1) { width:72%; margin-left:18%; }
.speed-lines span:nth-child(2) { width:100%; }
.speed-lines span:nth-child(3) { width:83%; margin-left:8%; }
.speed-lines span:nth-child(4) { width:58%; margin-left:24%; }
.banner-label { position:absolute; right:clamp(1.1rem,7vw,7rem); margin:0; color:var(--white); font-size:clamp(.72rem,1.5vw,1rem); font-weight:900; line-height:1.15; letter-spacing:.12em; text-align:center; }
main { width:min(100% - 2rem,58rem); margin:0 auto; padding:clamp(2.4rem,6vw,4.5rem) 0 2rem; }
.intro { max-width:40rem; margin:0 auto 2rem; text-align:center; }
.eyebrow { margin:0 0 .6rem; color:var(--blue-light); font-size:.75rem; font-weight:850; letter-spacing:.16em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(2rem,7vw,3.6rem); line-height:1; letter-spacing:-.045em; }
.intro>p:last-child { margin:1rem auto 0; color:#bdbdbd; font-size:1rem; line-height:1.55; }
.options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
.tier { position:relative; display:grid; min-height:12rem; padding:1.25rem; overflow:hidden; color:var(--white); text-decoration:none; background:#0b0b0b; border:1px solid var(--line); border-radius:.85rem; transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.tier:hover,.tier:focus-visible { transform:translateY(-3px); background:#101010; border-color:var(--blue-light); outline:none; }
.tier.featured { background:var(--blue); border-color:var(--blue-light); }
.tier.featured:hover,.tier.featured:focus-visible { background:#0755b8; }
.tier-number { position:absolute; top:1.15rem; right:1.2rem; color:#555; font-size:.7rem; font-weight:800; letter-spacing:.12em; }
.featured .tier-number { color:rgba(255,255,255,.6); }
.tier-name { align-self:end; margin-top:2.4rem; font-size:1.45rem; font-weight:900; letter-spacing:-.025em; }
.tier-note { margin-top:.25rem; color:var(--muted); font-size:.82rem; }
.featured .tier-note { color:rgba(255,255,255,.78); }
.tier-price { display:flex; align-items:center; justify-content:space-between; align-self:end; margin-top:1.4rem; padding-top:.85rem; border-top:1px solid #262626; font-size:1rem; font-weight:800; }
.featured .tier-price { border-color:rgba(255,255,255,.28); }
.tier-price b { font-size:1.25rem; font-weight:500; transition:transform .2s ease; }
.tier:hover .tier-price b,.tier:focus-visible .tier-price b { transform:translateX(.25rem); }
footer { padding:2rem 0 0; color:#686868; font-size:.68rem; letter-spacing:.06em; text-align:center; }
footer p { margin:.45rem 0; }
.secure-dot { display:inline-block; width:.42rem; height:.42rem; margin-right:.28rem; background:#3fc071; border-radius:50%; vertical-align:.05rem; }
@media (max-width:620px) {
  .brand-banner { margin-top:1.1rem; }
  .speed-lines { left:-1rem; width:24vw; opacity:.85; }
  .banner-label { right:1rem; font-size:.62rem; }
  .logo-disc { width:10.5rem; }
  main { width:min(100% - 1.15rem,58rem); padding-top:2.2rem; }
  .intro { margin-bottom:1.5rem; padding-inline:.7rem; }
  .options { grid-template-columns:1fr; gap:.65rem; }
  .tier { grid-template-columns:1fr auto; min-height:auto; padding:1.05rem 1.1rem; }
  .tier-number { display:none; }
  .tier-name { align-self:auto; margin-top:0; font-size:1.2rem; }
  .tier-note { grid-column:1; }
  .tier-price { grid-column:2; grid-row:1/span 2; align-self:center; gap:.7rem; margin:0; padding:0 0 0 1rem; border:0; font-size:.92rem; }
}
@media (max-width:370px) { .banner-label{display:none;} .speed-lines{width:27vw;} .tier-note{font-size:.76rem;} .tier-price{font-size:.84rem;} }
@media (prefers-reduced-motion:reduce) { .tier,.tier-price b{transition:none;} }