:root{--b:#1d4ed8;--b2:#2563eb;--d:#0a1650;--t:#0f172a;--m:#64748b;--l:#e6ebf7;--s:#f5f8ff}
*{box-sizing:border-box;margin:0;padding:0}a{color:inherit;text-decoration:none}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--t);background:linear-gradient(135deg,#dfe7fb,#9db4ee);padding:14px;min-height:100vh}
.wrap{max-width:1180px;margin:auto;background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 24px 70px #1d3a9a35}
nav{display:flex;align-items:center;gap:28px;padding:16px 28px;background:#fff}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:20px}
.logo b{width:32px;height:32px;border-radius:9px;background:var(--b);color:#fff;display:grid;place-items:center;font-size:16px}
nav .links{display:flex;gap:26px;font-size:13px;font-weight:500;color:#334155;flex:1;justify-content:center}
nav .links a.on{color:var(--b);border-bottom:2px solid var(--b);padding-bottom:4px}
nav .ic{display:flex;gap:16px;align-items:center;font-size:18px}
.cb{position:relative}.cb em{position:absolute;top:-8px;right:-10px;background:var(--b);color:#fff;border-radius:50%;width:17px;height:17px;font:700 10px/17px sans-serif;text-align:center}
.av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#b45309);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700}
.btn{display:inline-block;background:var(--b2);color:#fff;border:0;border-radius:99px;padding:12px 24px;font:600 14px 'Plus Jakarta Sans',sans-serif;cursor:pointer;text-align:center;transition:.2s}
.btn:hover{background:#1e40af}.btn.w{background:#fff;color:var(--b)}.btn.o{background:#fff;color:var(--b);border:1.5px solid var(--l)}.btn.f{width:100%}
.ph{width:var(--w,56%);aspect-ratio:9/19;border-radius:16px;background:linear-gradient(150deg,var(--a),var(--b));border:3px solid #141a33;position:relative;box-shadow:inset 0 0 0 2px #ffffff22,6px 14px 24px #0a165040;margin:auto}
.ph i{position:absolute;top:5%;left:8%;width:40%;aspect-ratio:1;border-radius:11px;background:#0008;box-shadow:inset 0 0 0 2px #fff3}
.ph i:before,.ph i:after{content:"";position:absolute;width:34%;aspect-ratio:1;border-radius:50%;background:radial-gradient(#4b5fb5,#05081c 70%);box-shadow:0 0 0 2px #fff4}
.ph i:before{top:10%;left:10%}.ph i:after{bottom:10%;right:10%}
.hero{background:radial-gradient(circle at 75% 40%,#2f56d9,#0a1650 60%,#050b30);color:#fff;display:flex;align-items:center;min-height:380px;padding:40px 48px;position:relative;overflow:hidden}
.hero small{color:#7da2ff;letter-spacing:.14em;font-size:12px;font-weight:600}.hero h1{font-size:54px;margin:12px 0 8px;letter-spacing:-.02em}
.hero h3{font-weight:500;font-size:20px;margin-bottom:14px}.hero p{color:#c7d4ff;font-size:14px;max-width:360px;line-height:1.6;margin-bottom:26px}
.hero .vis{position:absolute;right:90px;top:-20px;width:330px;transform:rotate(-14deg)}
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;background:var(--s);border-radius:16px;padding:20px 26px;margin:-26px 32px 34px;position:relative;box-shadow:0 8px 24px #1d3a9a14}
.feat div{display:flex;gap:12px;align-items:center;font-size:12px;color:var(--m)}.feat b{display:block;color:var(--t);font-size:13px}.feat span{font-size:24px;color:var(--b)}
.sec{display:flex;justify-content:space-between;align-items:end;margin:8px 32px 18px}.sec h2{font-size:24px;letter-spacing:-.01em}.sec p{font-size:12px;color:var(--m);margin-top:4px}.sec a{font-size:12px;color:var(--t)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 32px 34px}
.card{border:1px solid var(--l);border-radius:16px;padding:12px;position:relative;background:#fff}
.card .img{background:linear-gradient(#f2f6ff,#e3ebfb);border-radius:12px;padding:16px 0;margin-bottom:12px;--w:48%}
.card h4{font-size:13px;margin-top:2px}.card small{display:block;font-size:11px;color:var(--m);margin:3px 0 8px}.card .pr{font-weight:800;font-size:17px}.card .pr s{font-size:10px;color:#94a3b8;font-weight:400;margin-left:6px}
.star{color:#f59e0b;font-size:11px;margin:6px 0 10px}.star span{color:var(--m)}
.tag{position:absolute;top:18px;left:18px;background:var(--b2);color:#fff;border-radius:6px;font:600 10px/1 sans-serif;padding:5px 8px;z-index:2}.tag.r{background:#ef4444}
.heart{position:absolute;top:18px;right:20px;color:#64748b;z-index:2;font-size:15px}
.promo{margin:0 32px 34px;border-radius:18px;background:linear-gradient(100deg,#0a2a8c,#1d4ed8 60%,#0a1650);color:#fff;padding:38px 44px;display:flex;justify-content:space-between;align-items:center;overflow:hidden;gap:20px}
.promo h2{font-size:38px;margin:6px 0}.promo .sc{font-family:cursive;font-size:26px;line-height:1.3;color:#cfe0ff;transform:rotate(-8deg)}
.promo .pp{display:flex;gap:6px;--w:70px}.promo .pp .ph{margin:0}
.brands{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin:0 32px 34px;text-align:center;font-size:12px}.brands div{background:var(--s);border-radius:14px;padding:16px 4px}.brands b{display:block;font-size:20px;margin-bottom:8px}
.news{margin:0 32px 30px;border-radius:16px;background:linear-gradient(100deg,#07123f,#0f2a8a);color:#fff;padding:26px 30px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.news form{display:flex;background:#ffffff14;border:1px solid #ffffff33;border-radius:99px;margin-top:12px;overflow:hidden;width:340px}.news input{flex:1;background:0;border:0;color:#fff;padding:12px 16px;outline:0}.news button{background:var(--b2);color:#fff;border:0;padding:0 18px;cursor:pointer}
.sc2{font-family:cursive;font-size:24px;color:#bcd0ff}
footer{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:20px;padding:26px 32px;border-top:1px solid var(--l);font-size:12px;color:var(--m)}footer h5{color:var(--t);font-size:12px;margin-bottom:10px}footer a{display:block;margin:7px 0}
.copy{display:flex;justify-content:space-between;padding:12px 32px 18px;font-size:11px;color:var(--m)}
.flash{background:#dcfce7;color:#166534;padding:10px 32px;font-size:13px;font-weight:600}
.page{padding:30px 32px;background:var(--s)}.two{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:start}
.box{background:#fff;border:1px solid var(--l);border-radius:16px;padding:22px}.box h3{margin-bottom:14px;font-size:17px}
.row{display:flex;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--l)}.row:last-child{border:0}.row .th{width:58px;background:#eaf0ff;border-radius:10px;padding:8px 0;--w:60%}.row .in{flex:1}.row .in b{font-size:14px}.row .in small{display:block;color:var(--m);font-size:12px}
.qty{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--l);border-radius:99px;padding:4px 10px;font-size:13px}.qty button{border:0;background:0;font-size:16px;cursor:pointer;color:var(--b)}
.sum div{display:flex;justify-content:space-between;padding:8px 0;font-size:14px;color:var(--m)}.sum .t{color:var(--t);font-weight:800;font-size:18px;border-top:1px solid var(--l);margin-top:8px;padding-top:14px}
label{display:block;font-size:12px;color:var(--m);margin:12px 0 5px}input.i{width:100%;border:1.5px solid var(--l);border-radius:12px;padding:12px 14px;font:14px 'Plus Jakarta Sans',sans-serif;outline:0;background:#fff}input.i:focus{border-color:var(--b2)}
.steps{display:flex;gap:26px;margin-bottom:22px;font-size:13px;color:var(--m)}.steps b{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--l);margin-right:6px;font-size:12px}.steps .on{color:var(--t);font-weight:600}.steps .on b{background:var(--b2);color:#fff}
.pm{display:flex;gap:12px;align-items:center;border:1.5px solid var(--l);border-radius:14px;padding:16px;margin:0 0 10px;cursor:pointer;background:#fff;font-size:14px;color:var(--t)}.pm:has(input:checked){border-color:var(--b2);background:#f3f7ff}.pm span{margin-left:auto;font-size:12px;color:var(--m)}
.pd{display:grid;grid-template-columns:1fr 1fr;gap:34px}.pd .big{background:linear-gradient(#eef3ff,#dce6fb);border-radius:20px;padding:30px;--w:46%}
.th2{display:flex;gap:10px;margin-top:12px}.th2>div{flex:1;background:#e8eefc;border-radius:12px;padding:8px 0;--w:34%}
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}.chips div{background:#fff;border:1px solid var(--l);border-radius:12px;text-align:center;padding:12px 4px;font-weight:700}.chips small{display:block;color:var(--m);font-weight:400;font-size:11px}
.dots{display:flex;gap:12px;margin:8px 0 18px}.dots i{width:26px;height:26px;border-radius:50%;cursor:pointer;border:3px solid #fff;box-shadow:0 0 0 1.5px #cbd5e1}.dots i.on{box-shadow:0 0 0 2px var(--b2)}
.ok{text-align:center;padding:50px 20px}.ok .ck{width:76px;height:76px;border-radius:50%;background:var(--b2);color:#fff;font-size:38px;display:grid;place-items:center;margin:0 auto 18px;box-shadow:0 0 0 12px #dbe6ff}
.tl{list-style:none;margin:10px 0}.tl li{position:relative;padding:0 0 24px 38px;color:var(--m);font-size:14px}.tl li:before{content:"";position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;border:2px solid var(--l);background:#fff}.tl li:after{content:"";position:absolute;left:10px;top:24px;bottom:0;width:2px;background:var(--l)}.tl li:last-child:after{display:none}
.tl li.d{color:var(--t);font-weight:600}.tl li.d:before{background:var(--b2);border-color:var(--b2);content:"✓";color:#fff;font-size:12px;text-align:center;line-height:18px}
@media(max-width:860px){.grid,.feat{grid-template-columns:1fr 1fr}.brands{grid-template-columns:repeat(3,1fr)}.two,.pd,footer{grid-template-columns:1fr}.hero{padding:30px 22px}.hero .vis{display:none}.hero h1{font-size:38px}nav .links{display:none}nav{justify-content:space-between}.news,.promo{flex-direction:column;align-items:flex-start}.promo .pp,.news form{width:100%}}