* { box-sizing: border-box; }
:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #070909;
  color: #f7f7f4;
}
body { margin: 0; min-width: 320px; background: #070909; }
button, input { font: inherit; }
button { cursor: pointer; }
.page-shell { min-height: 100vh; display: grid; place-items: center; padding: 36px 18px; }
.phone-stage { width: 100%; display: grid; place-items: center; }
.phone-frame {
  width: min(390px, calc(100vw - 30px));
  height: min(800px, calc(100vh - 56px));
  min-height: 640px;
  border-radius: 48px;
  padding: 10px;
  background: #090a0a;
  border: 1px solid #303434;
  box-shadow: 0 24px 70px rgba(0,0,0,.22), inset 0 0 0 2px #181b1b;
  position: relative;
}
.phone-speaker { position: absolute; top: 17px; left: 50%; translate: -50% 0; width: 74px; height: 6px; border-radius: 999px; background: #242828; z-index: 3; }
.phone-screen {
  width: 100%; height: 100%; overflow-y: auto; border-radius: 39px; background: #070909; color: #f5f7f6; padding: 26px 20px 22px;
  scrollbar-width: thin; scrollbar-color: #2b302e transparent;
}
.header { display:flex; align-items:center; gap:10px; min-height:44px; }
.header-title { font-weight:700; flex:1; }
.icon-btn { width:38px; height:38px; border:0; border-radius:12px; background:#111414; color:#f5f7f6; display:grid; place-items:center; }
.logo { width:34px; height:34px; border-radius:11px; background:#111414; display:grid; place-items:center; font-size:20px; }
.hero-logo { width:92px; height:92px; margin:36px auto 0; border-radius:28px; background:#111414; display:grid; place-items:center; font-size:44px; }
h1,h2,p { margin:0; }
.hero-title { margin-top:20px; text-align:center; font-size:34px; line-height:1.05; font-weight:800; }
.hero-subtitle { margin-top:9px; text-align:center; color:#9ea6a3; font-size:16px; }
.section-title { margin-top:22px; font-size:28px; font-weight:800; }
.section-subtitle { margin-top:7px; color:#9ea6a3; line-height:1.45; }
.feature-list { margin-top:28px; display:grid; gap:6px; }
.feature { display:flex; gap:12px; align-items:center; padding:10px 0; }
.feature-icon { width:42px; height:42px; flex:0 0 42px; border-radius:12px; background:#121515; display:grid; place-items:center; }
.feature strong { display:block; font-size:14px; }
.feature span { color:#9ea6a3; font-size:12px; line-height:1.35; }
.btn { width:100%; border:0; border-radius:12px; padding:15px 18px; font-weight:800; margin-top:22px; }
.btn.discord { background:#5865f2; color:white; }
.btn.green { background:#22f27f; color:#02150b; }
.btn.outline { background:transparent; color:#f5f7f6; border:1px solid #343938; }
.btn.danger { background:rgba(255,102,116,.10); color:#ff6674; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.note { margin-top:12px; text-align:center; color:#7f8784; font-size:12px; }
.card { background:#111313; border:1px solid #202423; border-radius:16px; margin-top:12px; overflow:hidden; }
.card-pad { padding:16px; }
.info-row, .menu-row, .toggle-row, .provider-head { display:flex; align-items:center; gap:12px; padding:15px 16px; }
.info-row + .info-row, .menu-row + .menu-row, .toggle-row + .toggle-row { border-top:1px solid #252a28; }
.row-icon { width:38px; height:38px; border-radius:11px; background:#171b1a; display:grid; place-items:center; flex:0 0 38px; }
.row-copy { flex:1; min-width:0; }
.row-copy strong { display:block; font-size:14px; }
.row-copy span { display:block; color:#8e9793; font-size:12px; margin-top:3px; line-height:1.35; }
.provider-head { padding-bottom:12px; }
.provider-title { flex:1; font-weight:800; }
.provider-options { border-top:1px solid #252a28; }
.check-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; color:#dfe3e1; font-size:14px; }
.check-row + .check-row { border-top:1px solid #202423; }
input[type="checkbox"] { width:19px; height:19px; accent-color:#22f27f; }
.switch { width:46px; height:26px; border-radius:999px; background:#303534; padding:3px; transition:.2s; flex:0 0 46px; }
.switch::after { content:""; display:block; width:20px; height:20px; border-radius:50%; background:white; transition:.2s; }
.switch.on { background:#22f27f; }
.switch.on::after { transform:translateX(20px); }
.clickable { cursor:pointer; }
.status { margin-top:14px; border-radius:12px; padding:12px 14px; font-size:13px; background:#111313; color:#cbd1ce; }
.status.error { background:rgba(255,102,116,.09); color:#ff8792; }
.success-icon { width:104px; height:104px; border-radius:50%; background:rgba(34,242,127,.14); color:#22f27f; display:grid; place-items:center; font-size:56px; margin:58px auto 0; }
.success-title { margin-top:24px; text-align:center; font-size:30px; font-weight:800; }
.success-copy { margin-top:10px; color:#9ea6a3; text-align:center; line-height:1.45; }
.faq-q { width:100%; background:none; color:inherit; border:0; text-align:left; display:flex; gap:12px; align-items:center; padding:16px; font-weight:700; }
.faq-q span:first-child { flex:1; }
.faq-a { padding:0 16px 16px; color:#9ea6a3; font-size:13px; line-height:1.5; }
.profile { display:flex; gap:14px; align-items:center; }
.avatar { width:48px; height:48px; border-radius:50%; background:rgba(88,101,242,.18); display:grid; place-items:center; color:#8690ff; font-size:22px; }
.version { margin:22px 0 4px; color:#7c8581; text-align:center; font-size:12px; }
@media (max-width: 560px) {
  .page-shell { padding:0; display:block; }
  .phone-frame { width:100%; height:100dvh; min-height:0; border-radius:0; border:0; padding:0; box-shadow:none; }
  .phone-speaker { display:none; }
  .phone-screen { border-radius:0; padding-top:18px; }
}