:root{
  --nav-offset:120px;
  --container:1100px;
  --bg:#f8fafc;
  --text:#0f172a;
  --muted:#475569;
  --brand:#7c3aed;
  --accent:#ffd166;
  --card:#ffffff;
  --border:#e5e7eb;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}

html,body{margin:0;padding:0}
*{box-sizing:border-box}

.page{ padding-top:var(--nav-offset); -webkit-box-sizing:border-box}

.page{ padding-top -moz-box-sizing:border-box}

.page{ padding-top -ms-box-sizing:border-box}

.page{ padding-top background:var(--bg); min-height:100dvh; color:var(--text); }
.container{ width:min(100% - 2rem, var(--container)); margin-inline:auto; }

.hero{
  text-align:center;
  padding: clamp(1.5rem, 5vw, 3rem) 0;
  background: linear-gradient(180deg, #fafaff, #eef1ff);
  border-bottom:1px solid rgba(124,58,237,.10);
}
.hero h1{ margin:0 0 .5rem; font-size:clamp(1.8rem,4vw,2.6rem); }
.hero .lead{ margin:0 auto 1rem; max-width:60ch; color:#334155; }

.btn{
  display:inline-block; -webkit-flex:inline-block; -webkit-flex:inline-block; -ms-flex:inline-block; -ms-flexbox:inline-block; padding:.9rem 1.2rem; border-radius:999px; -webkit-border-radius:999px; text-decoration:none; -webkit-text-decoration:none; font-weight:800;
  box-shadow:var(--shadow); -webkit-box-shadow:var(--shadow); border:1px solid rgba(0,0,0,.06);
  transition:transform .12s ease, filter .2s ease; -webkit-transition:transform .12s ease, filter .2s ease;
}
.btn.cta{ background:linear-gradient(135deg, var(--accent), #ff9f1c); color:#1a1200; }
.btn:hover{ transform:translateY(-1px); -webkit-transform:translateY(-1px); -ms-transform:translateY(-1px); filter:brightness(1.03); -webkit-filter:brightness(1.03); }

.section{ padding: clamp(1.25rem, 4vw, 2.25rem) 0; }

.cards{
  display:grid; -webkit-flex:grid; -webkit-flex:grid; -ms-flex:grid; -ms-flexbox:grid;
  grid-template-columns: repeat( auto-fit, minmax(260px, 1fr) ); -ms-grid-template-columns: repeat( auto-fit, minmax(260px, 1fr) );
  gap: 1rem;
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px; -webkit-border-radius:14px;
  padding:1rem 1.1rem;
  box-shadow:var(--shadow); -webkit-box-shadow:var(--shadow);
}
.card h2{ margin:.1rem 0 .5rem; font-size:1.2rem; }

.console{
  display:grid; -webkit-flex:grid; -webkit-flex:grid; -ms-flex:grid; -ms-flexbox:grid; gap:1rem;
  grid-template-columns: repeat( auto-fit, minmax(280px, 1fr) ); -ms-grid-template-columns: repeat( auto-fit, minmax(280px, 1fr) );
}
.console-col{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px; -webkit-border-radius:14px;
  padding:1rem 1.1rem;
  box-shadow:var(--shadow); -webkit-box-shadow:var(--shadow);
}
.console-col h3{ margin:.1rem 0 .5rem; font-size:1.15rem; }
.console-col ol{ margin:.25rem 0 0 1.25rem; }
.note{ color:var(--muted); margin:.6rem 0 0; }

.terms{ margin-top:1rem; }
.terms a{ color:#1d4ed8; }

.faq{ display:grid; -webkit-flex:grid; -webkit-flex:grid; -ms-flex:grid; -ms-flexbox:grid; gap:.75rem; }
.faq details{
  background:#fff; border:1px solid var(--border); border-radius:12px; -webkit-border-radius:12px; box-shadow:var(--shadow); -webkit-box-shadow:var(--shadow);
  padding:.75rem 1rem;
}
.faq summary{ cursor:pointer; -webkit-cursor:pointer; font-weight:700; }
.faq p{ margin:.6rem 0 0; color:#334155; }

@media (max-width:640px){
  .container{ width:min(100% - 1.5rem, var(--container)); }
  .btn.cta{ width:100%; max-width:420px; }
}