
:root{--ink:#05080d;--panel:#0c131c;--line:#1c2733;--blue:#2b8cff;--green:#55c720;--silver:#c9d1d9;--paper:#f2f5f7;--text:#0e1620;--muted:#566474;
--head:'Sora','Segoe UI',system-ui,sans-serif;--body:'Manrope','Segoe UI',system-ui,sans-serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--text);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.wrap{width:min(1180px,92%);margin:auto}
h1,h2,h3{font-family:var(--head);line-height:1.1;letter-spacing:-.02em}

/* nav */
header{position:sticky;top:0;z-index:20;background:var(--ink);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.nav img{height:56px;width:auto}
.nav nav{display:flex;gap:28px;font-weight:600;font-size:.95rem}
.nav nav a{color:var(--silver);text-decoration:none}
.nav nav a:hover{color:#fff}
.btn{display:inline-block;font-family:var(--head);font-weight:700;font-size:.95rem;text-decoration:none;padding:14px 26px;border-radius:999px;background:var(--green);color:#06130a;border:2px solid var(--green);transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-2px);background:#6bdd33}
.btn.ghost{background:transparent;color:#fff;border-color:#3a4a5b}
.btn.ghost:hover{background:#142130}
.btn.blue{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.blue:hover{background:#4aa0ff}
@media(max-width:700px){.nav nav a:not(.btn){display:none}}

/* hero */
.hero{background:radial-gradient(900px 500px at 85% 20%,#10304f 0,transparent 60%),var(--ink);color:#fff;padding:72px 0 88px}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(2.4rem,5.2vw,4.3rem);font-weight:800}
.hero p{margin:22px 0 32px;max-width:48ch;color:#aab6c3;font-size:1.1rem}
.hero .row{display:flex;gap:14px;flex-wrap:wrap}
.stage{background:#fff;border-radius:28px;padding:18px;box-shadow:0 0 0 1px #243445,0 40px 80px -30px rgba(43,140,255,.5);position:relative}
.stage img{border-radius:18px;width:100%}
.tag{position:absolute;left:-14px;bottom:28px;background:var(--green);color:#06130a;font-family:var(--head);font-weight:800;padding:10px 18px;border-radius:12px;font-size:.9rem;transform:rotate(-3deg)}
.rise{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.rise.d2{animation-delay:.15s}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media(max-width:860px){.hero .wrap{grid-template-columns:1fr}.tag{left:10px}}

/* fit strip */
.fit{background:var(--panel);color:var(--silver);padding:22px 0;border-block:1px solid var(--line)}
.fit .wrap{display:flex;gap:12px 22px;flex-wrap:wrap;align-items:center;font-weight:600}
.fit b{font-family:var(--head);color:#fff;margin-right:6px}
.fit span.c{padding:6px 16px;border:1px solid #2b3a4a;border-radius:999px;font-size:.9rem}

/* products */
.product{padding:96px 0}
.product.alt{background:#fff}
.grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}
.product.alt .grid{grid-template-columns:1fr 1.1fr}
.product.alt .gal{order:2}
.main{border-radius:24px;overflow:hidden;background:#e4e9ed;aspect-ratio:1/1}
.main img{width:100%;height:100%;object-fit:cover}
.thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:12px}
.thumbs button{border:2px solid transparent;border-radius:12px;padding:0;overflow:hidden;cursor:pointer;background:none;aspect-ratio:1/1}
.thumbs button img{width:100%;height:100%;object-fit:cover}
.thumbs button[aria-current="true"]{border-color:var(--blue)}
.info h2{font-size:clamp(2rem,3.6vw,3rem);font-weight:800}
.info .lead{margin:18px 0 26px;color:var(--muted);font-size:1.08rem;max-width:52ch}
.info ul{list-style:none;padding:0;display:grid;gap:14px;margin-bottom:34px}
.info li{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start}
.info li i{width:34px;height:34px;border-radius:10px;background:var(--ink);display:grid;place-items:center;color:var(--green);font-style:normal;font-weight:800}
.info li strong{display:block;font-family:var(--head);font-size:1rem}
.info li span{color:var(--muted);font-size:.95rem}
.price{font-family:var(--head);font-weight:800;font-size:1.5rem;margin-bottom:18px}
@media(max-width:860px){.grid,.product.alt .grid{grid-template-columns:1fr}.product.alt .gal{order:0}.product{padding:64px 0}}

/* pack + fit */
.band{background:var(--ink);color:#fff;padding:88px 0}
.band .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.band h2{grid-column:1/-1;font-size:clamp(1.8rem,3.4vw,2.7rem);margin-bottom:12px;max-width:20ch}
.card{background:var(--panel);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.card img{aspect-ratio:4/3;object-fit:cover;width:100%}
.card div{padding:22px}
.card h3{font-size:1.15rem;margin-bottom:8px}
.card p{color:#9fb0c1;font-size:.95rem}
@media(max-width:860px){.band .wrap{grid-template-columns:1fr}}

/* order */
.order{padding:96px 0;text-align:center;background:linear-gradient(120deg,#0f4fa8,#2b8cff 40%,#3fae17)}
.order h2{color:#fff;font-size:clamp(2rem,4vw,3.2rem);font-weight:800;max-width:18ch;margin:auto}
.order p{color:#e8f3ff;margin:16px auto 30px;max-width:46ch}
.order .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.order .btn{background:#fff;border-color:#fff;color:#06130a}
.order .btn.ghost{background:transparent;color:#fff;border-color:#ffffff90}

footer{background:var(--ink);color:#8696a8;padding:44px 0;font-size:.92rem}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
footer img{height:84px;width:auto}
@media(prefers-reduced-motion:reduce){.rise{animation:none}html{scroll-behavior:auto}.btn{transition:none}}

.order{text-align:left}
.order .head{text-align:center;margin-bottom:34px}
.form{background:#fff;color:var(--text);border-radius:24px;padding:32px;max-width:760px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:16px;box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
.form label{display:grid;gap:6px;font-weight:600;font-size:.9rem}
.form .full{grid-column:1/-1}
.form input,.form select,.form textarea{font:inherit;padding:12px 14px;border:1.5px solid #cfd8e0;border-radius:12px;background:#fff;color:var(--text)}
.form textarea{min-height:84px;resize:vertical}
.form button.btn{grid-column:1/-1;cursor:pointer;background:var(--green);border-color:var(--green)}
.form button.btn:disabled{opacity:.6;cursor:wait}
.msg{grid-column:1/-1;font-weight:600;display:none;padding:14px 16px;border-radius:12px}
.msg.ok{display:block;background:#e6f7da;color:#1d5a07}
.msg.err{display:block;background:#fde8e8;color:#8a1c1c}
.after{margin-top:22px;text-align:center}
@media(max-width:700px){.form{grid-template-columns:1fr;padding:22px}}

.info h1{font-size:clamp(2rem,3.6vw,3rem);font-weight:800}
.more{margin-left:14px;font-weight:700;color:var(--blue);text-decoration:none;display:inline-block;padding:14px 0}
.more:hover{text-decoration:underline}
.fit a.c{color:inherit;text-decoration:none}.fit a.c:hover{border-color:var(--green);color:#fff}
.faqs h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:22px}
.faqs details{background:#fff;border:1px solid #d8e0e7;border-radius:14px;padding:16px 20px;margin-bottom:12px;max-width:820px}
.product.alt.faqs details{background:var(--paper)}
.faqs summary{font-family:var(--head);font-weight:700;cursor:pointer}
.faqs details p{margin-top:10px;color:var(--muted)}
.also{margin-top:26px;display:flex;gap:12px 24px;flex-wrap:wrap;font-weight:600}
.also a{color:var(--blue)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.chips .c{padding:8px 18px;border:1px solid #c7d2dc;border-radius:999px;text-decoration:none;font-weight:600;background:#fff}
.chips a.c:hover{border-color:var(--green)}
.pagehead{padding:56px 0 8px}.pagehead h1{font-size:clamp(2rem,4vw,3.2rem);font-weight:800;max-width:22ch}
.pagehead p{color:var(--muted);max-width:60ch;margin-top:14px;font-size:1.08rem}
