:root{
  --bg:#05060a;
  --card:#0b0f1a;
  --text:#f6f7fb;
  --muted:#a7adc0;
  --border:#1a2130;

  --pink:#ff4bd1;
  --cyan:#00e5ff;

  --accent:var(--cyan);
  --max:1040px;
  --radius:14px;
  --shadow:0 6px 24px rgba(0,0,0,.45);
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#0a0b12;
    --card:#111527;
    --text:#f7fbff;
    --muted:#b2b9cb;
    --border:#1c2536;
  }
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica Neue,Arial,"Apple Color Emoji","Segoe UI Emoji";
  line-height:1.5;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body::before{ content:none }

a{ color:var(--accent); text-decoration:none }
a:hover{ text-decoration:underline }
a:focus-visible,button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 22px }

header{
  position:sticky; top:0; z-index:20;
  background:rgba(11,15,26,.9);
  backdrop-filter:saturate(130%) blur(6px);
  border-bottom:1px solid var(--border);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:70px }
.brand{ display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.2px }
.logo{
  width:34px; height:34px; display:grid; place-items:center; border-radius:8px;
  background:var(--card);
  color:var(--accent); font-weight:900;
  border:1px solid var(--border);
  box-shadow:inset 0 0 0 1px rgba(0,229,255,.25);
}
.menu{ display:flex; gap:20px }
.menu a{ color:var(--text); opacity:.9 }
.menu a:hover{ opacity:1 }

.hero{
  padding:48px 0 32px;
  border-bottom:1px solid var(--border);
}
.hero h1{
  margin:0 0 14px;
  font-size:clamp(30px,5vw,56px);
  line-height:1.06;
  color:var(--text);
  letter-spacing:.2px;
}
.hero p{ margin:0 0 26px; color:var(--muted); font-size:clamp(15px,1.8vw,19px) }

.btn{
  display:inline-block; padding:12px 16px; border-radius:12px;
  border:1px solid color-mix(in oklab, var(--accent) 30%, var(--border));
  color:var(--text); background:var(--card);
  box-shadow:var(--shadow);
  transition:transform .08s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.btn:hover{
  transform:translateY(-1px);
  border-color:color-mix(in oklab, var(--accent) 50%, var(--border));
  background:#0e1423;
}
.btn.primary{
  font-weight:800;
  background:#0e1423;
  border-color:color-mix(in oklab, var(--accent) 60%, var(--border));
}

.badges{ display:flex; flex-wrap:wrap; gap:14px; margin-top:18px; color:var(--muted) }
.badge{
  padding:7px 12px; border-radius:999px;
  border:1px solid var(--border);
  background:#0e1423;
}

.grid{ display:grid; gap:18px; grid-template-columns:1fr; margin:38px 0 }
@media (min-width:760px){ .grid{ grid-template-columns:repeat(3,1fr) } }

.card{
  position:relative;
  padding:20px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--card);
  box-shadow:var(--shadow);
}
.card::before{ content:none }
.card h3{ margin:4px 0 8px; font-size:18px; letter-spacing:.2px }
.card p{ margin:0; color:var(--muted) }

section[aria-label], section[id]{
  scroll-margin-top:84px;
}
section[aria-label]::after, section[id]::after{
  content:""; display:block; height:1px; margin:32px 0 0;
  background:linear-gradient(90deg, transparent, rgba(0,229,255,.35), transparent);
}

footer{
  border-top:1px solid var(--border);
  padding:34px 0;
  color:var(--muted);
  font-size:14px;
  background:transparent;
}

.skip{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip:focus{
  position:static; width:auto; height:auto;
  padding:10px 14px; border-radius:10px;
  background:var(--accent); color:#001013; font-weight:800;
}

@media (max-width:480px){
  .nav{ height:64px }
  .menu{ gap:14px }
  .btn{ padding:11px 14px }
  .card{ padding:18px }
}

.review-banner .wrap {
  display:flex;
  justify-content:flex-end; /* push content to the right */
  gap:10px;
  align-items:center;
  min-height:46px;
  padding-top:8px;
  padding-bottom:8px;
  text-align:right; /* optional, makes multi-line text align to the right edge */
}