:root{--accent:#0FA39A;--deep:#0B7D76;--charcoal:#2E3436;--dark:#1E2426;--bg:#F1EFEA;--card:#fff;--ink:#2A3032;--mid:#667073;--hair:#E2E0DA;--tint:#E3F5F3;--tintline:#A9DED9}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Segoe UI",-apple-system,"Helvetica Neue",sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:var(--deep);text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}

nav{position:sticky;top:0;z-index:50;background:var(--charcoal);border-bottom:3px solid var(--accent)}
.nav-in{max-width:1100px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:14px}
.nav-in img{height:40px;border-radius:9px}
.nav-in .brand{color:#fff;font-size:1.1rem;font-weight:300;letter-spacing:.2px;white-space:nowrap}
.nav-links{margin-left:auto;display:flex;gap:20px;align-items:center}
.nav-links a{color:rgba(255,255,255,.82);font-size:.92rem;font-weight:600;white-space:nowrap}
.nav-links a:hover{color:#fff}
.nav-cta{background:var(--accent);color:#fff!important;padding:8px 16px;border-radius:10px}
.nav-cta:hover{background:var(--deep)}
@media (max-width:860px){.nav-links a:not(.nav-cta){display:none}}

header.hero{background:linear-gradient(180deg,#fff 0%,var(--bg) 100%);padding:56px 0 30px;text-align:center}
.hero h1{font-size:clamp(2rem,4.6vw,3.2rem);font-weight:300;line-height:1.15;color:var(--dark);max-width:900px;margin:0 auto}
.hero h1 b{font-weight:700}
.hero .sub{margin:16px auto 8px;font-size:1.15rem;color:var(--deep);font-weight:600;max-width:760px}
.hero p.body{color:var(--mid);max-width:760px;margin:0 auto 24px}
.badges{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center}
.appstore-btn{display:inline-flex;align-items:center;gap:10px;background:#000;color:#fff;border-radius:12px;padding:10px 20px;line-height:1.15;text-align:left}
.appstore-btn small{display:block;font-size:.68rem;opacity:.85}
.appstore-btn span.big{font-size:1.05rem;font-weight:600}
.appstore-btn.soon{background:#3b3b3d;cursor:default}
.trust{margin-top:18px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.chip{background:var(--tint);color:var(--deep);font-size:.8rem;font-weight:600;padding:5px 13px;border-radius:999px}
.hero-pano{margin:38px auto 0;max-width:1240px;padding:0 16px}
.hero-pano img{display:block;border-radius:22px;box-shadow:0 30px 70px rgba(0,0,0,.28)}

section{padding:64px 0}
section.alt{background:#fff}
.kicker{color:var(--deep);font-weight:700;letter-spacing:.12em;font-size:.8rem;text-transform:uppercase}
h2.title{font-size:clamp(1.5rem,3vw,2.1rem);margin:6px 0 14px;color:var(--dark)}
p.lead{color:var(--mid);max-width:760px}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:34px}
@media (max-width:860px){.grid3,.grid2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--hair);border-radius:16px;padding:24px}
.card .ico{width:44px;height:44px;border-radius:12px;background:linear-gradient(180deg,var(--accent),var(--deep));display:flex;align-items:center;justify-content:center;margin-bottom:14px;color:#fff;font-weight:700;font-size:1.2rem}
.card h3{font-size:1.05rem;margin-bottom:6px;color:var(--dark)}
.card p{font-size:.93rem;color:var(--mid)}

.signs{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
@media (max-width:860px){.signs{grid-template-columns:1fr 1fr}}
.sign{text-align:center;position:relative}
.sign img{display:block;border:7px solid #111;border-bottom-width:10px;border-radius:8px;box-shadow:0 14px 34px rgba(0,0,0,.22);transition:transform .25s ease,box-shadow .25s ease;cursor:zoom-in}
.sign img:hover{transform:scale(1.45);box-shadow:0 26px 60px rgba(0,0,0,.4);position:relative;z-index:20}
.sign .cap{font-size:.84rem;color:var(--mid);margin-top:10px;font-weight:600}

.shots-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
@media (max-width:860px){.shots-row{grid-template-columns:1fr}}
.shot{text-align:center;position:relative}
.shot:hover{z-index:20}
.shot img{border:6px solid #2b2b2d;border-radius:14px;box-shadow:0 10px 26px rgba(0,0,0,.14);transition:transform .25s ease,box-shadow .25s ease;cursor:zoom-in}
.shot img:hover{transform:scale(1.45);box-shadow:0 22px 55px rgba(0,0,0,.32)}
.shot .cap{font-size:.84rem;color:var(--mid);margin-top:10px;font-weight:600}
.promo{margin-top:30px;border-radius:20px;box-shadow:0 20px 50px rgba(0,0,0,.2);display:block}

.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-top:30px}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.phones{display:flex;gap:22px;justify-content:center}
.phones img{width:46%;max-width:250px;border:6px solid #2b2b2d;border-radius:30px;box-shadow:0 10px 26px rgba(0,0,0,.16);transition:transform .25s ease,box-shadow .25s ease;cursor:zoom-in}
.phones img:hover{transform:scale(1.4);box-shadow:0 26px 60px rgba(0,0,0,.34);position:relative;z-index:20}
.phones{position:relative}

.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px;counter-reset:st}
@media (max-width:860px){.flow{grid-template-columns:1fr 1fr}}
.step{background:var(--card);border:1px solid var(--hair);border-radius:16px;padding:22px 20px 20px;position:relative}
.step::before{counter-increment:st;content:counter(st);position:absolute;top:-14px;left:18px;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.9rem}
.step h3{font-size:1rem;color:var(--dark);margin:6px 0}
.step p{font-size:.9rem;color:var(--mid)}

.need{background:var(--card);border:1px solid var(--hair);border-radius:14px;padding:20px 22px;margin-bottom:14px}
.need.hl{border-color:var(--tintline);background:var(--tint)}
.need b{color:var(--dark)}
.need p,.need li{font-size:.94rem;color:var(--mid);margin-top:4px}
.need ol,.need ul{padding-left:20px;margin-top:6px}

.price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin:34px auto 0;max-width:760px}
@media (max-width:860px){.price-grid{grid-template-columns:1fr}}
.pcard{background:var(--card);border:1px solid var(--hair);border-radius:16px;padding:28px 24px;text-align:center}
.pcard.best{border:2px solid var(--accent)}
.pcard .pt{font-weight:700;color:var(--dark)}
.pcard .pp{font-size:2rem;font-weight:700;color:var(--deep);margin:8px 0 2px}
.pcard .pd{font-size:.86rem;color:var(--mid)}
.fine{font-size:.86rem;color:var(--mid);text-align:center;margin-top:18px}

details{background:var(--card);border:1px solid var(--hair);border-radius:12px;padding:16px 20px;margin-bottom:12px}
details summary{cursor:pointer;font-weight:600;color:var(--dark)}
details p{margin-top:10px;color:var(--mid);font-size:.94rem}

.cta-band{background:var(--charcoal);color:#fff;text-align:center;padding:56px 24px;border-top:3px solid var(--accent)}
.cta-band h2{font-weight:300;font-size:1.8rem;margin-bottom:8px}
.cta-band p{color:rgba(255,255,255,.75);margin-bottom:24px}
.btn-light{display:inline-block;background:var(--accent);color:#fff;padding:12px 26px;border-radius:10px;font-weight:600;margin:0 8px 8px 0}
.btn-dark{display:inline-block;background:var(--charcoal);color:#fff;padding:12px 26px;border-radius:10px;font-weight:600;margin:6px 8px 8px 0}
footer{background:#23282a;color:rgba(255,255,255,.65);font-size:.84rem;padding:26px 24px;text-align:center}
footer a{color:rgba(255,255,255,.85)}

/* guide pages */
.doc{max-width:820px;margin:0 auto;padding:48px 24px 72px}
.doc h1{font-size:2.1rem;font-weight:300;color:var(--dark);margin-bottom:6px}
.doc h1 b{font-weight:700}
.doc .intro{color:var(--mid);margin-bottom:26px}
.doc h2{font-size:1.3rem;color:var(--dark);margin:34px 0 10px;display:flex;align-items:center;gap:12px}
.doc h2 .num{flex:none;width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;font-size:.95rem;display:flex;align-items:center;justify-content:center}
.doc p,.doc li{color:#4a5355;margin-top:8px}
.doc ol,.doc ul{padding-left:22px}
.doc code{background:#fff;border:1px solid var(--hair);border-radius:6px;padding:1px 7px;font-size:.95em}
.doc .tip{background:var(--tint);border:1px solid var(--tintline);border-radius:12px;padding:14px 18px;margin-top:14px;color:#2c4a47}