:root{color-scheme:dark;--bg:#090a0c;--card:#14161b;--line:#ffffff1f;--red:#eb3d40;--yellow:#ffdd24;--muted:#ffffff9a;--ok:#34c759;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Arial,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(120% 60% at 50% -10%,#3a0f12 0%,#090a0c 55%) fixed,var(--bg);color:#fff;-webkit-text-size-adjust:100%}
main{width:min(100%,720px);margin:auto;padding:max(24px,env(safe-area-inset-top)) 18px calc(40px + env(safe-area-inset-bottom))}
.hidden{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:10px}
a{color:#fff}
.hero{text-align:center;padding:18px 0 8px}
.logo{width:132px;height:132px;border-radius:30px;box-shadow:0 0 0 1px #ffffff14,0 18px 50px #eb3d4040;animation:pop .7s cubic-bezier(.32,1.35,.6,1) both}
h1{margin:18px 0 2px;font-size:clamp(34px,10vw,52px);letter-spacing:4px;font-weight:300}
h1 span{color:var(--yellow);font-weight:700}
.claim{margin:4px 0 0;font:700 13px ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:3px;color:var(--red);text-transform:uppercase}
.lead{margin:14px auto 0;max-width:30ch;font-size:18px;line-height:1.45;color:#ffffffd0}
.cta{display:grid;gap:10px;max-width:360px;margin:22px auto 0}
.btn{display:flex;align-items:center;justify-content:center;min-height:54px;padding:0 20px;border-radius:999px;font-size:17px;font-weight:700;text-decoration:none;border:0;cursor:pointer;color:#fff;transition:transform .18s cubic-bezier(.2,.8,.2,1);touch-action:manipulation}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--red);box-shadow:0 10px 28px #eb3d4055}
#installBtn{background:var(--ok);color:#04230e;box-shadow:0 10px 28px #34c75955}
.btn.ghost{background:#ffffff10;border:1px solid var(--line)}
.link{background:none;border:0;color:var(--yellow);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer;padding:0}
.notice{margin:16px auto 0;max-width:520px;padding:14px 16px;border-radius:16px;background:#ffffff0d;border:1px solid var(--line);font-size:15px;line-height:1.5;text-align:left}
.notice.warn{background:#ffdd2414;border-color:#ffdd2466}.notice.warn p{margin:6px 0 10px}
.notice.ok{background:#34c7591a;border-color:#34c75966}
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:30px 0 8px}
.perks div{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 10px;text-align:center;display:grid;gap:4px;justify-items:center}
.perks span{display:grid;place-items:center}.perks b{font-size:14px}.perks small{color:var(--muted);font-size:12px;line-height:1.35}
.guide{margin-top:34px}
h2{font-size:24px;margin:0 0 6px;text-align:center}
.detected{text-align:center;color:var(--muted);margin:0 0 14px;min-height:1.2em}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;background:#16181de6;border:1px solid var(--line);border-radius:999px;max-width:420px;margin:0 auto 18px;position:sticky;top:max(8px,env(safe-area-inset-top));z-index:5;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.tabs button{min-height:46px;border:0;border-radius:999px;background:none;color:#fff;font-size:16px;font-weight:700;cursor:pointer;transition:background .25s}
.tabs button[aria-selected="true"]{background:var(--red)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.step{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:16px}
.step-art{display:flex;justify-content:center}
.phone{width:150px;height:auto;display:block;filter:drop-shadow(0 10px 22px #0009)}
.step-text{display:flex;gap:14px;align-items:flex-start}
.num{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--yellow);color:#111;display:grid;place-items:center;font-weight:900;font-size:20px}
.step h3{margin:6px 0 6px;font-size:20px}
.step p{margin:0;font-size:17px;line-height:1.5;color:#ffffffde}
.step p small{display:block;margin-top:8px;font-size:14px;color:var(--muted)}
.step:last-child{border-color:#34c75966;background:linear-gradient(135deg,#34c75914,var(--card))}
.step:last-child .num{background:var(--ok)}
.sv-xs{font:600 9px -apple-system,Roboto,Arial,sans-serif;fill:#c9ced8}
.sv-s{font:700 10px -apple-system,Roboto,Arial,sans-serif;fill:#e9ecf2}
.sv-m{font:500 11px -apple-system,Roboto,Arial,sans-serif;fill:#e9ecf2}
.sv-b{font:800 11.5px -apple-system,Roboto,Arial,sans-serif;fill:#fff}
.hl{animation:pulse 1.6s ease-in-out infinite}
.tap{animation:tap 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pulse{50%{stroke-opacity:.35}}
@keyframes tap{0%,100%{transform:scale(1)}50%{transform:scale(.8)}}
@keyframes pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
.faq{margin-top:38px}.faq h2{margin-bottom:14px}
details{background:var(--card);border:1px solid var(--line);border-radius:16px;margin-bottom:8px}
summary{list-style:none;cursor:pointer;padding:16px 46px 16px 16px;font-size:16px;font-weight:700;position:relative;min-height:54px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--yellow)}
details[open] summary::after{content:"–"}
details p{margin:0;padding:0 16px 16px;font-size:15.5px;line-height:1.6;color:#ffffffd6}
footer{margin-top:36px;text-align:center;display:grid;gap:14px;justify-items:center}
footer p{color:var(--muted);font-size:12px;line-height:1.6}
.toast{visibility:hidden;position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translate(-50%,150%);background:#fff;color:#111;padding:12px 18px;border-radius:999px;font-weight:700;transition:transform .25s;z-index:20}
.toast.show{visibility:visible;transform:translate(-50%,0)}
@media(max-width:520px){.step{grid-template-columns:1fr}.phone{width:min(56vw,190px)}.perks{grid-template-columns:1fr}
  .perks div{grid-template-columns:34px 1fr;text-align:left;align-items:center;column-gap:10px;justify-items:start}.perks span{grid-row:span 2}}
@media(max-width:359px){main{padding-left:12px;padding-right:12px}.lead{font-size:16px}.step p{font-size:16px}}
@media(prefers-reduced-motion:reduce){.hl,.tap,.logo{animation:none}html{scroll-behavior:auto}.toast,.btn{transition:none}}
