:root{--ink:#24124a;--gold:#ffd400;--pink:#ff4f81;--sky1:#3f8ff0;--sky2:#bfe6ff;--card:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Nunito","Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;color:var(--ink);background:linear-gradient(180deg,var(--sky1),var(--sky2) 520px,#fff7e8 520px);line-height:1.55}
a{color:#c22a5c}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
nav{display:flex;align-items:center;gap:12px;padding:16px 0}
nav .logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:900;font-size:20px;text-shadow:0 2px 0 rgba(36,18,74,.4)}
nav .logo img{width:40px;height:40px;border-radius:10px;box-shadow:0 3px 0 rgba(36,18,74,.3)}
nav .links{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap}
nav .links a{color:#fff;text-decoration:none;font-weight:800}
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:28px;align-items:center;padding:24px 20px 40px}
.hero h1{font-size:clamp(42px,7vw,76px);line-height:.95;margin:0;color:#fff;-webkit-text-stroke:2px var(--ink);text-shadow:0 6px 0 var(--ink)}
.hero h1 span{color:var(--gold)}
.hero p.lead{font-size:20px;font-weight:800;color:#fff;text-shadow:0 2px 0 rgba(36,18,74,.35);max-width:520px}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border-radius:18px;font-weight:900;font-size:18px;text-decoration:none;color:#fff;background:linear-gradient(#ff7aa2,#ff4f81);box-shadow:0 6px 0 #c22a5c}
.btn.dark{background:linear-gradient(#333,#000);box-shadow:0 6px 0 #555}
.btn.gold{background:linear-gradient(#ffd25a,#ffa600);color:var(--ink);box-shadow:0 6px 0 #c77d00}
.phones{position:relative;height:560px}
.phone{position:absolute;width:240px;border-radius:36px;border:8px solid #111;box-shadow:0 20px 40px rgba(36,18,74,.35);overflow:hidden;background:#111}
.phone img{display:block;width:100%}
.phone.a{left:6%;top:40px;transform:rotate(-7deg)}
.phone.b{left:34%;top:0;z-index:2}
.phone.c{left:62%;top:52px;transform:rotate(7deg)}
section{padding:36px 0}
h2{font-size:34px;margin:0 0 14px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--card);border-radius:22px;padding:20px;box-shadow:0 6px 0 rgba(36,18,74,.12)}
.card .e{font-size:34px}
.card h3{margin:6px 0 4px}
.shots{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px}
.shots img{height:440px;border-radius:24px;box-shadow:0 8px 20px rgba(36,18,74,.2)}
.doc{background:#fff;border-radius:24px;padding:28px clamp(18px,4vw,44px);margin:20px auto 40px;box-shadow:0 6px 0 rgba(36,18,74,.12);max-width:860px}
.doc h1{margin-top:0;font-size:38px}
.doc h2{font-size:24px;margin-top:28px}
.doc .muted{opacity:.7}
footer{padding:30px 0 40px;text-align:center;font-weight:700;opacity:.8}
footer a{margin:0 8px}
.faq details{background:#fff;border-radius:16px;padding:14px 18px;margin:10px 0;box-shadow:0 4px 0 rgba(36,18,74,.1)}
.faq summary{font-weight:900;cursor:pointer}
body{overflow-x:hidden}
@media (max-width:860px){.hero{grid-template-columns:1fr}.phones{height:400px;max-width:420px;margin:0 auto;width:100%}.phone{width:150px;border-width:6px;border-radius:26px}.phone.a{left:2%}.phone.b{left:31%}.phone.c{left:60%}.grid{grid-template-columns:1fr}.shots img{height:360px}nav .logo{font-size:17px;white-space:nowrap}nav .links{gap:10px;font-size:14px}}
@media (max-width:420px){nav .links a:nth-child(1){display:none}}