:root { --bg:#050507; --panel:#101014; --line:#26262e; --fg:#f6f6f2; --muted:#a2a2ad; --lime:#d7ff3e; --head:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif; --body:"Instrument Sans","Segoe UI",system-ui,sans-serif; color-scheme:dark; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
body { margin:0; background:var(--bg); color:var(--fg); font:17px/1.55 var(--body); overflow-x:hidden; }
a { color:inherit; }
h1,h2,h3 { font-family:var(--head); margin:0; letter-spacing:-.02em; }
:focus-visible { outline:3px solid var(--lime); outline-offset:3px; border-radius:6px; }

.nav { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:24px; padding:12px max(16px,calc((100vw - 1120px)/2)); background:rgba(5,5,7,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:9px; font:800 20px var(--head); text-decoration:none; letter-spacing:-.02em; margin-right:auto; }
.nav nav { display:flex; gap:22px; }
.nav nav a { color:var(--muted); text-decoration:none; font-size:15px; font-weight:500; }
.nav nav a:hover { color:var(--fg); }
@media (max-width:640px) { .nav nav { display:none; } }

.btn { display:inline-block; padding:15px 26px; border-radius:999px; background:var(--lime); color:#0a0a0a; font:700 17px var(--head); text-decoration:none; border:1.5px solid var(--lime); text-align:center; transition:transform .15s,background .15s; }
.btn:hover { background:#e6ff7a; transform:translateY(-1px); }
.btn.small { padding:9px 17px; font-size:15px; }
.btn.ghost { background:transparent; color:var(--fg); border-color:var(--line); }
.btn.ghost:hover { background:var(--panel); border-color:#44444f; }

.hero { max-width:1120px; margin:0 auto; padding:56px 16px 48px; display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:center; }
.hero h1 { font-size:clamp(44px,6.6vw,84px); line-height:.98; font-weight:800; }
.hero h1 em { font-style:normal; color:var(--lime); display:block; }
.sub { color:var(--muted); font-size:clamp(18px,2vw,21px); max-width:33em; margin:22px 0 26px; }
.cta-row { display:flex; flex-wrap:wrap; gap:10px; }
.fine { color:var(--muted); font-size:14px; margin:16px 0 0; }
.hero-phone { display:flex; justify-content:center; }
.hero-phone .phone { width:min(310px,72vw); }
@media (max-width:820px) { .hero { grid-template-columns:1fr; padding-top:34px; gap:34px; } }

.phone { aspect-ratio:9/16; width:100%; border-radius:28px; overflow:hidden; background:#000; border:1px solid #2c2c35; box-shadow:0 0 0 6px #0d0d11, 0 30px 80px -30px rgba(215,255,62,.28); }
.phone video { display:block; width:100%; height:100%; object-fit:cover; }

.band { max-width:1120px; margin:0 auto; padding:18px 16px; display:flex; flex-wrap:wrap; gap:8px 26px; align-items:center; border-block:1px solid var(--line); color:var(--muted); font-size:15px; }
.band b { color:var(--fg); font:700 17px var(--head); }

.section { max-width:1120px; margin:0 auto; padding:72px 16px 0; }
.eyebrow { color:var(--lime); font:700 14px var(--head); letter-spacing:.09em; text-transform:uppercase; margin:0 0 10px; }
h2 { font-size:clamp(32px,4.6vw,54px); line-height:1.04; font-weight:800; margin-bottom:30px; }
h3 { font-size:23px; font-weight:700; }

.mode-card { display:grid; grid-template-columns:230px 1fr; gap:36px; align-items:center; padding:26px; background:var(--panel); border:1px solid var(--line); border-radius:24px; }
.small-phone { box-shadow:0 0 0 5px #0a0a0d; border-radius:22px; }
.mode-copy h3 { font-size:34px; font-weight:800; margin-bottom:10px; }
.mode-copy p { color:var(--muted); margin:0 0 14px; max-width:36em; }
.mode-copy ul { margin:0 0 22px; padding:0; list-style:none; }
.mode-copy li { padding:5px 0 5px 22px; position:relative; }
.mode-copy li::before { content:""; position:absolute; left:2px; top:14px; width:9px; height:9px; border:2.5px solid var(--lime); border-radius:50%; }
.more { color:var(--muted); margin:16px 0 0; }
@media (max-width:640px) { .mode-card { grid-template-columns:1fr; padding:18px; } .small-phone { width:min(240px,70vw); margin:6px auto 4px; } }

.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.gallery figure { margin:0; }
.gallery figcaption { color:var(--muted); font-size:15px; margin-top:14px; text-align:center; }
@media (max-width:760px) { .gallery { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -16px; padding:6px 16px 10px; } .gallery figure { flex:0 0 66vw; scroll-snap-align:center; } }

.steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; counter-reset:s; }
.steps li { counter-increment:s; background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:24px; }
.steps li::before { content:counter(s); display:block; font:800 44px/1 var(--head); color:var(--lime); margin-bottom:14px; }
.steps b { display:block; font:700 21px var(--head); margin-bottom:6px; }
.steps span { color:var(--muted); }
@media (max-width:760px) { .steps { grid-template-columns:1fr; } }

.features { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.features h3 { font-size:20px; margin-bottom:6px; }
.features p { color:var(--muted); margin:0; font-size:16px; }
@media (max-width:900px) { .features { grid-template-columns:1fr 1fr; } }
@media (max-width:480px) { .features { grid-template-columns:1fr; } }

.plans { display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:800px; }
.plan { display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:22px; padding:26px; }
.plan.hot { border-color:var(--lime); }
.price { font:800 40px/1.1 var(--head); margin:8px 0 14px; letter-spacing:-.02em; }
.plan ul { list-style:none; padding:0; margin:0 0 22px; color:var(--muted); flex:1; }
.plan li { padding:4px 0; }
@media (max-width:600px) { .plans { grid-template-columns:1fr; } }

.faq { max-width:800px; }
details { border-bottom:1px solid var(--line); padding:16px 0; }
summary { font:700 19px var(--head); cursor:pointer; }
details p { color:var(--muted); margin:10px 0 0; }

.closing { text-align:center; padding:90px 16px; }
.closing h2 { font-size:clamp(40px,7vw,86px); margin-bottom:24px; }
.foot { max-width:1120px; margin:0 auto; padding:22px 16px 34px; display:flex; gap:18px; color:var(--muted); font-size:14px; border-top:1px solid var(--line); }
.foot span { margin-right:auto; }

.plans.single { grid-template-columns:1fr; max-width:460px; }

.plans.three { grid-template-columns:repeat(3,1fr); max-width:none; }
.price s { color:var(--muted); font-size:24px; font-weight:600; }
.price small { color:var(--muted); font:500 15px var(--body); letter-spacing:0; }
.hot-tag { background:var(--lime); color:#0a0a0a; font-size:12px; padding:3px 9px; border-radius:99px; vertical-align:middle; }
.more a { color:var(--fg); }
@media (max-width:760px) { .plans.three { grid-template-columns:1fr; } }