:root{--ink:#0E1B30;--navy:#0B1F45;--navy2:#071533;--brand:#1D4FA3;--brand-50:#EAF0FB;--brand-100:#D7E3F7;--sf:#F2A33A;--sf-ink:#4A2B00;--sf-50:#FFF4E3;--paper:#F4F6FA;--line:#DFE4EC;--muted:#5A677D;--ok:#177245;--ok-bg:#E2F3E9;--warn:#9A5B00;--warn-bg:#FCEFD9;--bad:#B4231A;--bad-bg:#FBE6E3;--b2b:#6B2FB3;--shadow:0 1px 2px rgba(11,31,69,.05),0 10px 30px rgba(11,31,69,.07);--display:"Bricolage Grotesque","Mukta",system-ui,sans-serif;--body:"Mukta",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}a{color:inherit}button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--sf);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.num{font-variant-numeric:tabular-nums}.muted{color:var(--muted)}.small{font-size:14px}.center{text-align:center}
.d{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.05}
h1,h2,h3{margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:#fff;color:var(--ink);padding:10px 18px;border-radius:12px;font-weight:700;font-size:15.5px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,transform .15s}
.btn:hover{border-color:var(--muted)}.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.p{background:var(--brand);border-color:var(--brand);color:#fff}.btn.p:hover{background:var(--navy);border-color:var(--navy)}
.btn.a{background:var(--sf);border-color:var(--sf);color:var(--sf-ink)}.btn.a:hover{filter:brightness(.95)}
.btn.g{background:none;border-color:transparent}.btn.ol{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}.btn.ol:hover{border-color:#fff}
.btn.wa{background:#1F8F4E;border-color:#1F8F4E;color:#fff}.btn.red{color:var(--bad)}.btn.grn{color:var(--ok)}
.btn.sm{padding:6px 12px;font-size:14px;border-radius:9px}.btn.lg{padding:14px 26px;font-size:17px}.btn.w{width:100%}
.btn svg{width:18px;height:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.pad{padding:24px}
.field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--muted)}
.in{width:100%;border:1px solid var(--line);background:#F8FAFC;border-radius:12px;padding:10px 13px;font-size:16px;font-weight:400;color:var(--ink);outline:none}
.in:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-100)}
textarea.in{min-height:96px;resize:vertical}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.span2{grid-column:1/-1}
.pill{display:inline-flex;align-items:center;border-radius:20px;padding:1px 10px;font-size:12.5px;font-weight:700;background:var(--paper);color:var(--muted);white-space:nowrap}
.t-ok{background:var(--ok-bg);color:var(--ok)}.t-warn{background:var(--warn-bg);color:var(--warn)}.t-bad{background:var(--bad-bg);color:var(--bad)}.t-blue{background:var(--brand-50);color:var(--brand)}
.err{color:var(--bad);font-weight:600;font-size:14.5px;min-height:1.2em;margin:8px 0}
.note{background:var(--sf-50);color:var(--sf-ink);border-radius:12px;padding:10px 14px;font-size:14.5px}
.okmsg{background:var(--ok-bg);color:var(--ok);border-radius:12px;padding:10px 14px;font-weight:600}
.chk{display:flex;gap:10px;align-items:center;font-weight:600}.chk input{width:18px;height:18px;accent-color:var(--brand)}
.radios{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.radios label{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:11px 13px;cursor:pointer;font-weight:600;font-size:15px;background:#fff}
.radios input{accent-color:var(--brand);width:17px;height:17px;flex:none}
.radios label:has(input:checked){border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
table.t{width:100%;border-collapse:collapse;font-size:15px}
table.t th{text-align:left;font-size:13px;color:var(--muted);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
table.t td{padding:11px 12px;border-bottom:1px solid #EEF1F5;vertical-align:top}
table.t tr:last-child td{border-bottom:0}.r{text-align:right!important}
.scroll{overflow-x:auto}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 20px;border-radius:24px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s;z-index:100}.toast.show{opacity:1}

/* Header */
.hdr{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:22px;height:70px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo .mk{width:42px;height:42px;border-radius:12px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:800;font-size:19px;overflow:hidden;flex:none}
.logo .mk img{width:100%;height:100%;object-fit:cover}
.logo b{display:block;font-family:var(--display);font-size:19px;font-weight:800;letter-spacing:-.01em;line-height:1.1}
.logo small{display:block;font-size:12px;color:var(--muted)}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{text-decoration:none;padding:8px 12px;border-radius:9px;font-weight:600;font-size:15px;color:var(--muted)}
.nav a:hover{background:var(--paper);color:var(--ink)}.nav a.on{background:var(--brand-50);color:var(--brand)}
.hact{display:flex;gap:6px;align-items:center}
.cartb{position:relative}.cartb .bd{position:absolute;top:-7px;right:-7px;background:var(--sf);color:var(--sf-ink);font-size:12px;font-weight:800;border-radius:10px;min-width:20px;height:20px;display:grid;place-items:center;padding:0 5px}
.menub{display:none}

/* Hero */
.hero{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(620px 320px at 88% 0%,rgba(29,79,163,.55),transparent 70%),repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 72px),repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 72px)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center;padding-top:88px;padding-bottom:96px}
.hero .place{display:inline-flex;gap:10px;align-items:center;color:rgba(255,255,255,.76);margin-bottom:20px}
.hero .place i{width:8px;height:8px;border-radius:50%;background:var(--sf);box-shadow:0 0 0 5px rgba(242,163,58,.25)}
.hero h1{font-size:clamp(40px,6vw,70px);max-width:15ch}
.hero p.lead{font-size:clamp(17px,1.6vw,20px);color:rgba(255,255,255,.8);max-width:46ch;margin:22px 0 34px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.trust{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:38px;color:rgba(255,255,255,.76);font-size:15.5px}
.trust span{display:inline-flex;gap:8px;align-items:center}.trust svg{width:20px;height:20px;color:var(--sf)}
.panel{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:10px;backdrop-filter:blur(6px)}
.panel a{display:grid;grid-template-columns:48px 1fr auto;gap:14px;align-items:center;padding:13px 12px;border-radius:16px;text-decoration:none;opacity:0;transform:translateY(10px);animation:rise .55s ease forwards}
.panel a+a{border-top:1px solid rgba(255,255,255,.08)}.panel a:hover{background:rgba(255,255,255,.09)}
.panel .ic{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.1);display:grid;place-items:center}.panel .ic svg{width:24px;height:24px}
.panel b{display:block;font-size:17px;line-height:1.2}.panel small{color:rgba(255,255,255,.64);font-size:13.5px}.panel .go{color:var(--sf);font-weight:700;font-size:13.5px}
@keyframes rise{to{opacity:1;transform:none}}

/* Sections */
.sec{padding:84px 0}.sec.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sh{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:34px;flex-wrap:wrap}
.sh h2{font-size:clamp(30px,3.6vw,44px);max-width:20ch}.sh p{color:var(--muted);margin:8px 0 0;max-width:58ch}
.svcs{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.svc{display:block;text-decoration:none;border:1px solid var(--line);background:var(--paper);border-radius:20px;padding:28px;transition:border-color .2s,transform .2s}
.svc:hover{border-color:var(--brand);transform:translateY(-2px)}
.svc .ic{width:56px;height:56px;border-radius:16px;background:var(--brand-50);color:var(--brand);display:grid;place-items:center;margin-bottom:18px}.svc .ic svg{width:28px;height:28px}
.svc h3{font-family:var(--display);font-size:25px;letter-spacing:-.01em}.svc p{color:var(--muted);margin:8px 0 16px}
.more{display:inline-flex;gap:6px;align-items:center;font-weight:700;color:var(--brand)}.more svg{width:16px;height:16px;transition:transform .2s}
a:hover .more svg{transform:translateX(4px)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;list-style:none;padding:0;margin:0}
.steps li{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}
.steps .n{display:flex;gap:12px;align-items:center;margin-bottom:14px}.steps .n b{width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:14px}.steps .n svg{width:24px;height:24px;color:var(--brand)}
.steps strong{font-size:18px}.steps p{margin:4px 0 0;color:var(--muted);font-size:15.5px}
.b2b{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;background:var(--navy);color:#fff;border-radius:28px;padding:54px}
.b2b h2{font-size:clamp(28px,3.4vw,42px)}.b2b p{color:rgba(255,255,255,.8);max-width:48ch}
.b2b dl{display:grid;gap:16px;align-self:center;margin:0}.b2b dt{font-size:13.5px;color:rgba(255,255,255,.6)}.b2b dd{margin:0;font-weight:600}

/* Products */
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.prod{display:flex;flex-direction:column;overflow:hidden;text-decoration:none;transition:transform .2s,box-shadow .2s}
.prod:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(11,31,69,.12)}
.prod .ph{aspect-ratio:4/3;background:var(--brand-50);color:var(--brand);display:grid;place-items:center;position:relative;overflow:hidden}
.prod .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.prod:hover .ph img{transform:scale(1.04)}
.prod .ph svg{width:58px;height:58px;opacity:.7}
.prod .tag{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.95);font-size:12px;font-weight:700;padding:2px 10px;border-radius:20px}
.prod .bd{padding:20px;display:flex;flex-direction:column;gap:3px;flex:1}
.prod .mat{font-size:14px;color:var(--muted)}.prod h3{font-size:18.5px;line-height:1.25}.prod .sd{font-size:15px;color:var(--muted)}
.price{display:flex;align-items:baseline;gap:8px;margin-top:auto;padding-top:14px}.price b{font-size:24px;color:var(--brand)}.price s{color:var(--muted);font-size:14.5px}.price small{color:var(--muted);font-size:14px}
.prod .more{margin-top:12px}

/* Page */
.ph1{padding:44px 0 26px}.ph1 h1{font-size:clamp(34px,4.4vw,54px)}.ph1 p{color:var(--muted);font-size:18px;margin:12px 0 0;max-width:62ch}
.crumbs{font-size:14px;color:var(--muted);margin:26px 0 0}.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--ink)}
.pd{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;padding:22px 0 30px}
.gal .main{aspect-ratio:4/3;overflow:hidden;display:grid;place-items:center;background:var(--brand-50);color:var(--brand)}
.gal .main img{width:100%;height:100%;object-fit:cover}.gal .main svg{width:80px;height:80px;opacity:.7}
.thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto}.thumbs button{flex:none;width:92px;height:72px;border-radius:12px;overflow:hidden;border:2px solid transparent;padding:0;cursor:pointer;background:#fff}
.thumbs button.on{border-color:var(--brand)}.thumbs img{width:100%;height:100%;object-fit:cover}
.bigp{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:20px}.bigp b{font-size:40px;color:var(--brand);font-weight:800}
.buy{margin-top:22px;padding:22px}
.seg{display:inline-flex;background:var(--paper);border-radius:10px;padding:4px}.seg button{border:0;background:none;padding:5px 13px;border-radius:7px;font-weight:700;font-size:14px;cursor:pointer;color:var(--muted)}.seg button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}.quick button{border:1px solid var(--line);background:#fff;border-radius:20px;padding:3px 12px;font-size:13.5px;font-weight:600;cursor:pointer}.quick button:hover{border-color:var(--brand);color:var(--brand)}
.calc{background:var(--paper);border-radius:14px;padding:16px;margin-top:18px}
.calc .row{display:flex;justify-content:space-between;gap:12px;font-size:15.5px;padding:2px 0}.calc .tot{font-size:22px;font-weight:800;padding-top:8px}
.qty{display:inline-flex;align-items:center;gap:8px}.qty button{width:44px;height:44px;border-radius:11px;border:1px solid var(--line);background:#fff;font-size:20px;font-weight:700;cursor:pointer}.qty input{width:110px;text-align:center}
.specs{margin:0}.specs div{display:grid;grid-template-columns:40% 1fr;gap:14px;padding:12px 20px;border-bottom:1px solid var(--line)}.specs div:last-child{border:0}.specs dt{color:var(--muted)}.specs dd{margin:0;font-weight:600}
.desc{white-space:pre-line;line-height:1.7}
.two{display:grid;grid-template-columns:1fr 380px;gap:30px;align-items:start;padding-bottom:30px}
.stick{position:sticky;top:94px}
.ci{display:grid;grid-template-columns:1fr auto;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line)}.ci:last-child{border:0}
.done{text-align:center;padding:40px 24px}.done .code{font-family:var(--display);font-size:44px;font-weight:800;color:var(--brand)}
.tick{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;margin:0 auto}.tick svg{width:34px;height:34px}

/* Footer */
.ftr{margin-top:96px;background:var(--navy);color:rgba(255,255,255,.78)}
.ftr .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-top:56px;padding-bottom:56px}
.ftr b.n{display:block;font-family:var(--display);font-size:24px;font-weight:800;color:#fff}.ftr h4{color:#fff;margin:0 0 12px;font-size:16px}
.ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}.ftr a{text-decoration:none}.ftr a:hover{color:#fff}
.ftr .bot{border-top:1px solid rgba(255,255,255,.1)}.ftr .bot .wrap{display:flex;justify-content:space-between;padding-top:18px;padding-bottom:18px;font-size:14px;grid-template-columns:none}
.fab{position:fixed;right:20px;bottom:20px;z-index:40;width:58px;height:58px;border-radius:50%;background:#1F8F4E;color:#fff;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.25)}.fab svg{width:30px;height:30px}

/* Auth */
.auth{max-width:520px;margin:56px auto 0}

/* Admin */
.adm{display:grid;grid-template-columns:256px 1fr;min-height:100vh}
.side{background:var(--navy);color:rgba(255,255,255,.8);position:sticky;top:0;height:100vh;overflow-y:auto;padding:22px 14px}
.side .brand{padding:0 10px 18px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:14px}.side .brand b{display:block;color:#fff;font-family:var(--display);font-size:20px}.side .brand small{font-size:12.5px}
.side h5{margin:16px 10px 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.side a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;text-decoration:none;font-weight:600;font-size:15px}
.side a:hover{background:rgba(255,255,255,.08);color:#fff}.side a.on{background:#fff;color:var(--navy)}
.side .cnt{background:var(--sf);color:var(--sf-ink);border-radius:10px;padding:0 7px;font-size:12px;font-weight:800}
.main{padding:30px 34px 60px;min-width:0}
.ah{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}.ah h1{font-family:var(--display);font-size:32px;letter-spacing:-.02em}.ah p{margin:4px 0 0;color:var(--muted)}
.acts{display:flex;gap:8px;flex-wrap:wrap}
.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:22px}.tile{padding:18px}.tile b{display:block;font-size:26px;font-weight:800}.tile span{font-size:13.5px;color:var(--muted)}
.filt{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}.filt a.on{border-color:var(--ink)}
.plist .row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}.plist .row:last-child{border:0}
.th{width:58px;height:58px;border-radius:12px;background:var(--brand-50);display:grid;place-items:center;overflow:hidden;flex:none;color:var(--muted);font-size:11px}.th img{width:100%;height:100%;object-fit:cover}
.pr2{text-align:right}.pr2 .c{font-weight:800;color:var(--brand)}.pr2 .b{font-weight:700;color:var(--b2b);font-size:14.5px}
.imgs{display:flex;flex-wrap:wrap;gap:12px}.imgs .im{position:relative;width:140px;height:108px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.imgs .im img{width:100%;height:100%;object-fit:cover}.imgs .im .bar{position:absolute;left:4px;right:4px;bottom:4px;display:flex;justify-content:space-between}
.imgs .im .bar button{border:0;background:rgba(255,255,255,.95);border-radius:6px;font-size:12px;font-weight:700;padding:1px 7px;cursor:pointer}
.imgs .add{width:140px;height:108px;border-radius:12px;border:2px dashed var(--line);display:grid;place-items:center;text-align:center;font-weight:700;color:var(--muted);cursor:pointer;font-size:14px}.imgs .add:hover{border-color:var(--brand);color:var(--brand)}
.kv{display:grid;grid-template-columns:1fr 1.4fr auto;gap:8px;margin-bottom:8px}
.inv{background:#fff;padding:28px}.inv .top{display:flex;justify-content:space-between;gap:20px;border-bottom:3px solid var(--brand);padding-bottom:14px;margin-bottom:16px}
.setup{max-width:560px;margin:64px auto}
@media print{.side,.noprint,.toast{display:none!important}.adm{display:block}.main{padding:0}.card{box-shadow:none;border:0}body{background:#fff}}

@media (max-width:980px){
  .hero .wrap,.pd,.two,.b2b{grid-template-columns:1fr}.hero .wrap{padding-top:56px;padding-bottom:64px}
  .svcs,.steps{grid-template-columns:1fr 1fr}.ftr .wrap{grid-template-columns:1fr}.tiles{grid-template-columns:1fr 1fr}
  .nav{display:none;position:absolute;top:70px;left:0;right:0;background:#fff;flex-direction:column;padding:10px;border-bottom:1px solid var(--line)}.nav.open{display:flex}
  .menub{display:inline-flex}.stick{position:static}.b2b{padding:32px 24px}
  .adm{grid-template-columns:1fr}.side{position:static;height:auto;display:flex;overflow-x:auto;gap:4px;padding:10px}.side .brand,.side h5,.side .foot{display:none}.side a{flex:none}
  .main{padding:20px 14px 60px}
}
@media (max-width:620px){.svcs,.steps,.g2,.g3,.g4,.radios{grid-template-columns:1fr}.logo small,.hide-sm{display:none}.sec{padding:60px 0}.hdr .wrap{gap:10px}}
.cartb .bd[hidden]{display:none}
p>svg,.small>svg,.muted>svg{width:18px;height:18px;flex:none}
.buy b{white-space:nowrap}.buy b svg{width:20px;height:20px}
@media (max-width:620px){.buy .g3{grid-template-columns:repeat(3,1fr)}.prods{grid-template-columns:1fr 1fr;gap:12px}.prod .bd{padding:14px}.prod h3{font-size:16px}.price b{font-size:20px}.prod .sd{display:none}}