:root{
--bg:#ffffff;--panel:#ffffff;--panel2:#fafafa;--ink:#14283c;--muted:#52657a;--gold:#1d5cd6;--gold-d:#1448a8;--cyan:#0e6e8f;
--line:#e2e8f0;--wa:#1faa55;--card-sh:0 18px 44px rgba(20,40,60,.10);
--cream:#f4efe6;--cream-ink:#16202c;--cream-muted:#5a6572;--cream-line:#ddd4c2;
--r:18px}
[data-theme=dark]{
--bg:#0A1726;--panel:#122334;--panel2:#16293c;--ink:#eef4fb;--muted:#93a7bd;--gold:#5b9dff;--gold-d:#3b7de0;--cyan:#69c7e8;
--line:rgba(255,255,255,.1);--card-sh:0 24px 60px rgba(0,0,0,.35)}
*{box-sizing:border-box;margin:0;padding:0}
a{color:inherit;text-decoration:none}
html{scroll-behavior:smooth;scroll-padding-top:78px}
body{font-family:Manrope,system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-weight:800;letter-spacing:-.02em;line-height:1.1}
h1 em,h2 em{font-style:normal;font-weight:800;color:var(--gold)}
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 26px;border-radius:12px;font-weight:700;font-size:.94rem;border:0;cursor:pointer;font-family:inherit;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px)}
.btn-g{background:var(--gold);color:#fff;box-shadow:0 10px 24px rgba(29,92,214,.25)}
[data-theme=dark] .btn-g{background:#2f6fe0;box-shadow:0 10px 24px rgba(47,111,224,.3)}
.btn-w{background:var(--wa);color:#06230f;box-shadow:0 10px 24px rgba(34,180,94,.22)}
.btn-o{background:transparent;color:inherit;border:1.5px solid var(--line)}
.btn-n{background:#0d1c2b;color:#fff}
/* top strip + nav */
.top{background:#ffffff;color:#52657a;font-size:.82rem;border-bottom:1px solid var(--line)}
[data-theme=dark] .top{background:#060f1b;color:#8fa7c4;border-bottom:0}
[data-theme=dark] .top a{color:#e8eef6}
.top .wrap{display:flex;justify-content:space-between;gap:10px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap}
.top a{color:#14283c;font-weight:700}
.top i{color:var(--gold);margin-right:6px}
header.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.15rem;white-space:nowrap}
.logo .mark{width:36px;height:36px;border-radius:11px;background:var(--gold);display:grid;place-items:center;color:#fff;font-weight:800;font-size:1rem}
[data-theme=dark] .logo .mark{background:#2f6fe0}
.links{display:flex;gap:26px;white-space:nowrap;font-weight:600;font-size:.93rem;color:var(--muted)}
.links a:hover{color:var(--gold)}
.nav-r{display:flex;gap:10px;align-items:center}
.icon-btn{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;font-size:1rem}
.nav .btn{padding:10px 20px}
/* hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:#ffffff;color:#14283c}
[data-theme=dark] .hero{background:#0A1726;color:#eef4fb}
.hero .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.2;display:none}
[data-theme=dark] .hero .bgimg{display:block}
.hero .shade{position:absolute;inset:0;background:linear-gradient(100deg,#0A1726 30%,rgba(10,23,38,.55) 65%,rgba(10,23,38,.2));display:none}
[data-theme=dark] .hero .shade{display:block}
[data-theme=dark] .pill{border-color:rgba(91,157,255,.5)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center;padding:84px 24px}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(29,92,214,.4);color:var(--gold);font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:8px 16px;border-radius:999px;margin-bottom:24px}
.pill i{font-size:.7rem}
.hero h1{font-size:3.3rem;margin-bottom:20px;color:var(--ink)}
.hero p.sub{color:var(--muted);font-size:1.05rem;max-width:47ch;margin-bottom:30px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:34px}
.hero .btn-o{color:var(--ink);border-color:var(--line)}
[data-theme=dark] .hero .btn-o{color:#eef4fb;border-color:rgba(255,255,255,.3)}
.stats{display:flex;flex-wrap:wrap;border-top:1px solid var(--line)}
.stats div{padding:16px 26px 0 0;margin-right:26px}
.stats b{display:block;font-size:1rem;color:var(--ink)}
.stats span{font-size:.82rem;color:var(--muted)}
.hero .ph{position:relative}
.hero .ph img{border-radius:20px;border:1px solid var(--line);box-shadow:0 30px 70px rgba(23,38,56,.16);aspect-ratio:4/4.3;object-fit:cover;width:100%}
[data-theme=dark] .hero .ph img{border-color:rgba(255,255,255,.16);box-shadow:0 30px 70px rgba(0,0,0,.5)}
.hero .tag{position:absolute;left:-18px;bottom:26px;background:#fff;color:#16202c;border-radius:14px;padding:13px 18px;box-shadow:0 16px 36px rgba(23,38,56,.18);font-size:.85rem}
[data-theme=dark] .hero .tag{box-shadow:0 16px 36px rgba(0,0,0,.4)}
.hero .tag b{display:block;font-size:1rem}
.hero .tag i{color:var(--gold);margin-right:7px}
/* sections */
section{padding:76px 0}
.sh{margin-bottom:44px;max-width:640px}
.sh.c{margin:0 auto 44px;text-align:center}
.kick{font-size:.76rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:14px}
.sh h2{font-size:2.4rem}
.sh p{color:var(--muted);margin-top:12px;font-size:.98rem}
/* services */
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sc{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.18s}
.sc:hover{border-color:rgba(29,92,214,.5);transform:translateY(-4px)}
.sc img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:saturate(.92)}
.sc .b{padding:20px 22px 22px}
.sc h3{font-size:1.08rem;margin-bottom:6px}
.sc p{font-size:.87rem;color:var(--muted);margin-bottom:14px}
.sc a.l{font-size:.86rem;font-weight:800;color:var(--gold)}
.sc a.l i{margin-left:6px;font-size:.78rem}
/* why */
.why{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.wcard{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px}
[data-theme=dark] .wcard{background:var(--bg)}
.wcard i{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1.1rem;color:#fff;background:var(--gold);margin-bottom:16px}
[data-theme=dark] .wcard i{background:#2f6fe0}
.wcard h3{font-size:1.05rem;margin-bottom:7px}
.wcard p{font-size:.88rem;color:var(--muted)}
/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:st}
.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;position:relative}
.step:before{counter-increment:st;content:counter(st,decimal-leading-zero);font-weight:800;font-size:1.7rem;color:var(--gold);display:block;margin-bottom:14px}
.step h3{font-size:1.02rem;margin-bottom:6px}
.step p{font-size:.87rem;color:var(--muted)}
.brands{display:flex;gap:10px;flex-wrap:wrap;margin-top:40px}
.brands span{border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-size:.85rem;font-weight:600;color:var(--muted)}
/* products */
.buy{background:var(--panel);border-radius:26px;padding:52px;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;border:1px solid var(--line)}
.buy h2{font-size:2.1rem;margin-bottom:14px}
.buy p{color:var(--muted);font-size:.97rem;margin-bottom:26px;max-width:44ch}
.types{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.types figure{background:var(--panel2);border:1px solid var(--line);border-radius:14px;overflow:hidden}
[data-theme=dark] .types figure{background:var(--bg)}
.types img{aspect-ratio:1/.82;object-fit:cover;width:100%}
.types figcaption{padding:10px 12px;font-size:.82rem;font-weight:700;text-align:center}
/* gallery */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gal img{border-radius:14px;aspect-ratio:1;object-fit:cover;width:100%;border:1px solid var(--line)}
/* faq */
.faq{max-width:780px;margin:0 auto}
details{background:var(--panel);border:1px solid var(--line);border-radius:14px;margin-bottom:12px;padding:0}
summary{cursor:pointer;list-style:none;padding:19px 22px;font-weight:700;font-size:.98rem;display:flex;justify-content:space-between;align-items:center;gap:14px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";color:var(--gold);font-size:1.3rem;font-weight:600}
details[open] summary:after{content:"–"}
details p{padding:0 22px 19px;color:var(--muted);font-size:.92rem}
/* contact */
.cwrap{background:var(--panel2);color:var(--cream-ink);border-radius:26px;max-width:1180px;margin:0 auto;border:1px solid var(--line)}
[data-theme=dark] .cwrap{background:var(--cream);border:0}
.cwrap .in{display:grid;grid-template-columns:1fr 1fr;gap:52px;padding:56px}
.cwrap h2{font-size:2.3rem;color:#14283c;margin-bottom:12px}
.cwrap p.sub{color:var(--cream-muted);margin-bottom:26px;font-size:.97rem}
.cline{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--cream-line);font-size:.95rem;align-items:flex-start}
.cline .dot{width:9px;height:9px;border-radius:50%;background:var(--gold);margin-top:8px;flex:none}
.cline b{display:block;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:#4a6a8c;font-weight:800;margin-bottom:3px}
.cline a{color:#14283c;font-weight:700}
.cline .sm{color:var(--cream-muted)}
form#book{background:#ffffff;border:1px solid var(--line);border-radius:18px;padding:30px;color:#16202c;box-shadow:0 24px 60px rgba(23,38,56,.10)}
[data-theme=dark] form#book{background:#0d1c2b;border:0;color:#eef4fb;box-shadow:none}
form#book h3{font-size:1.35rem;margin-bottom:4px}
form#book .small{font-size:.85rem;color:#57626f;margin-bottom:6px}
[data-theme=dark] form#book .small{color:#93a7bd}
form#book label{display:block;font-size:.78rem;font-weight:700;margin:13px 0 6px;color:#3d5065}
[data-theme=dark] form#book label{color:#c2d2e4}
form#book input,form#book select,form#book textarea{width:100%;padding:12px 14px;border:1.5px solid #dde5ee;border-radius:10px;font:inherit;font-size:.92rem;background:#fbfbfb;color:#14283c}
[data-theme=dark] form#book input,[data-theme=dark] form#book select,[data-theme=dark] form#book textarea{border:1.5px solid rgba(255,255,255,.18);background:#16293c;color:#fff}
form#book input:focus,form#book select:focus,form#book textarea:focus{outline:none;border-color:var(--gold)}
form#book .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
form#book .hp{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}
form#book .msg{font-size:.87rem;margin-top:12px;color:var(--gold);min-height:1.2em}
form#book .full{width:100%;justify-content:center;margin-top:16px}
/* footer */
footer{border-top:1px solid var(--line);padding:26px 0;margin-top:76px}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.87rem;color:var(--muted)}
footer a{font-weight:700;color:var(--ink)}
/* sticky mobile bar */
.bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:10px 14px;gap:10px}
.bar .btn{flex:1;justify-content:center;padding:13px 10px}
/* reveal */
.rv{opacity:0;transform:translateY(20px);transition:.6s}.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rv{opacity:1;transform:none;transition:none}.sc,.btn{transition:none}}
/* responsive */
@media(max-width:1020px){
 .links{display:none}
 .bar{display:flex}
 body{padding-bottom:70px}
}
@media(max-width:860px){
 .top{display:none}
 .hero .bgimg{display:none!important}
 .hero .wrap{grid-template-columns:1fr;gap:34px;padding:56px 24px}
 .hero h1{font-size:2.4rem}
 .hero .ph img{aspect-ratio:4/3.2}
 .sgrid{grid-template-columns:1fr 1fr}
 .g4{grid-template-columns:1fr 1fr}
 .steps{grid-template-columns:1fr 1fr}
 .buy{grid-template-columns:1fr;padding:34px 24px;gap:28px}
 .gal{grid-template-columns:repeat(3,1fr)}
 .cwrap .in{grid-template-columns:1fr;padding:34px 22px;gap:34px}
 .cwrap{margin:0 14px}
 section{padding:56px 0}
 .sh h2{font-size:1.9rem}
}
@media(max-width:560px){
 .nav .btn{padding:10px 14px;white-space:nowrap}
 .sgrid{grid-template-columns:1fr}
 .gal{grid-template-columns:repeat(2,1fr)}
 form#book .two{grid-template-columns:1fr}
 .hero .tag{left:10px}
}