/* ==========================================================================
   PLB Battery · Website UI System · Version 10
   Unified corporate design — deep navy / brand blue / cyan accents
   Sections: tokens · base · motion · header · buttons · video hero · photo
   bands · sections · cards · components · footer · responsive · a11y
   v7: navbar #0352A2 · tabs fix · container gradient frames · search overlay
   v8: stat number fix · CTA photo card visibility · product-detail overview panel
   v9: sticky product image · compact breadcrumb head · INQUIRY/WHATSAPP/BUY button set
   v10: product-detail CTA band uses customer-service photo background
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
--blue:#0352A2;--blue-d:#023E7D;--blue-dd:#012A56;--blue-l:#EAF2FB;--blue-ll:#F4F8FC;
--navy:#041A36;--navy-d:#02122A;--navy-l:#0A2C58;
--cyan:#2CB1E8;--cyan-d:#0E8FD0;--cyan-l:#E7F6FD;--cyan-b:#8ED8F8;
--ink:#0F1F33;--ink2:#475467;--ink3:#8695A8;
--line:#E3EAF3;--line2:#EDF2F8;--soft:#F5F9FD;
--navmax:1800px;--max:1460px;--r:10px;--r-lg:16px;
--sh:0 18px 50px rgba(3,52,110,.10);
--sh-h:0 30px 72px rgba(1,42,86,.22);
--glass:rgba(7,24,47,.55);--glass-b:rgba(255,255,255,.15);
--ease:cubic-bezier(.16,1,.3,1);
--fh:'Inter','Montserrat',-apple-system,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
--fb:'Open Sans',-apple-system,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
--font-h:var(--fh)}

/* ---------- 2. Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:104px}
body{margin:0;font-family:var(--fb);color:var(--ink2);background:#fff;font-size:16.5px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,h5{font-family:var(--fh);color:var(--ink);margin:0;line-height:1.18;text-wrap:balance}
h1{font-size:clamp(32px,3.2vw,50px);font-weight:800;letter-spacing:-1px}
h2{font-size:clamp(26px,2.3vw,38px);font-weight:800;letter-spacing:-.6px}
h3{font-size:21px;font-weight:700}
h4{font-size:16.5px;font-weight:700}
p{margin:0 0 14px}
a{color:var(--blue);text-decoration:none;transition:.22s}
a:hover{color:var(--cyan-d)}
img{max-width:100%}
ul{margin:0;padding:0;list-style:none}
::selection{background:rgba(44,177,232,.28)}
:focus-visible{outline:3px solid rgba(44,177,232,.6);outline-offset:2px;border-radius:4px}
.ic{flex:none;display:inline-block;vertical-align:middle}
.wrap{max-width:var(--max);margin:0 auto;padding:0 30px}
.wrap-nav{max-width:var(--navmax);margin:0 auto;padding:0 40px}
.skip{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:8px 14px;z-index:999}
.skip:focus{left:8px;top:8px}
.center{text-align:center}
.mt0{margin-top:0}.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt48{margin-top:48px}
.hairline{height:1px;background:linear-gradient(90deg,transparent,rgba(3,82,162,.18),transparent);border:0;margin:0}

/* ---------- 3. Motion (reveal system — kept early so component hovers win) ---------- */
.rv{opacity:0;transform:translateY(30px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv-l{transform:translateX(-36px)}
.rv-r{transform:translateX(36px)}
.rv-s{transform:scale(.95)}
.rv.in{opacity:1;transform:none}
@keyframes hRise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
@keyframes fIn{from{opacity:0}to{opacity:1}}
.f-in{opacity:0;animation:fIn 1.4s ease .9s both}
.h-in{opacity:0;animation:hRise 1.05s var(--ease) both}
.d1{animation-delay:.05s}.d2{animation-delay:.16s}.d3{animation-delay:.29s}.d4{animation-delay:.42s}.d5{animation-delay:.55s}.d6{animation-delay:.68s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes scrollHint{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(7px);opacity:1}}
@keyframes beam{0%{left:-8%}100%{left:104%}}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pz{from{transform:scale(1.03)}to{transform:scale(1.1)}}
@media (scripting: none){.rv{opacity:1;transform:none}.vhero-v{opacity:1}.h-in,.f-in{opacity:1;animation:none}}

/* ---------- 4. Scroll progress + header ---------- */
.sp{position:fixed;top:0;left:0;height:3px;width:0;z-index:300;background:linear-gradient(90deg,var(--cyan),#8ED8F8);box-shadow:0 0 12px rgba(44,177,232,.8)}
.hd{position:fixed;top:0;left:0;right:0;z-index:200;background:transparent;transition:background .35s,box-shadow .35s}
.hd:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,12,28,.6),transparent);transition:.35s;pointer-events:none}
.hd.scrolled{background:#0352A2;box-shadow:0 16px 44px rgba(1,20,44,.42)}
.hd.scrolled:before{opacity:0}
body.hd-solid .hd{background:#0352A2;box-shadow:0 16px 44px rgba(1,20,44,.42)}
body.hd-solid .hd:before{opacity:0}
.hd-in{display:flex;align-items:center;height:86px;gap:10px;position:relative}
.hd-logo{display:flex;align-items:center;margin-right:24px}
.logo{height:48px;width:auto;display:block}
.nav{display:flex;align-items:center;height:86px}
.nav-a{display:flex;align-items:center;gap:6px;height:86px;padding:0 16px;color:#fff;font:600 15px var(--fh);letter-spacing:.2px;position:relative;white-space:nowrap}
.nav-a:hover{color:#fff}
.nav-a:after{content:"";position:absolute;left:16px;right:16px;bottom:24px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--cyan),#8ED8F8);transform:scaleX(0);transform-origin:left;transition:.32s var(--ease)}
.nav-a:hover:after,.nav-a.on:after{transform:scaleX(1)}
.nav-a.on{color:#fff}
.nav-cv{opacity:.7;transition:.25s}
.dd-w:hover .nav-cv{transform:rotate(180deg)}
.dd-w{height:86px;position:relative}
.dd{position:absolute;top:100%;left:0;transform:translateY(16px);opacity:0;visibility:hidden;transition:.3s var(--ease);z-index:210}
.dd:before{content:"";position:absolute;top:-20px;left:0;right:0;height:20px}
.dd-w:hover .dd{opacity:1;visibility:visible;transform:none}
.nav>.dd-w:last-child .dd{left:auto;right:0}
.dd-in{background:#fff;border-radius:0 0 16px 16px;box-shadow:0 40px 92px rgba(1,26,54,.30);padding:30px 34px;display:flex;gap:40px;position:relative;overflow:hidden}
.dd-in:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--cyan))}
.dd-col{min-width:210px}
.dd-h{font:700 12px var(--fh);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin:0 0 12px}
.dd-l{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 10px;border-radius:6px;color:var(--ink2);font-size:14.5px;white-space:nowrap}
.dd-l:hover{background:var(--blue-ll);color:var(--blue)}
.dd-ar{opacity:0;transform:translateX(-4px);transition:.2s}
.dd-l:hover .dd-ar{opacity:1;transform:none}
.dd-feat{width:252px;border-radius:10px;overflow:hidden;background:var(--blue-ll);display:block;align-self:flex-start}
.dd-feat-im{display:block;height:140px;overflow:hidden}
.dd-feat-im img{width:100%;height:100%;object-fit:cover;transition:.5s}
.dd-feat:hover .dd-feat-im img{transform:scale(1.06)}
.dd-feat b{display:block;padding:14px 16px 2px;color:var(--ink);font:700 15.5px var(--fh)}
.dd-feat span{display:block;padding:0 16px;color:var(--ink3);font-size:12.5px}
.dd-feat em{display:flex;align-items:center;gap:6px;font-style:normal;padding:10px 16px 16px;color:var(--cyan-d);font:600 13px var(--fh)}
.hd-r{display:flex;align-items:center;gap:16px;margin-left:auto}
.hic{background:rgba(255,255,255,.12);border:0;color:#fff;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.25s}
.hic:hover{background:rgba(255,255,255,.25)}
.lang{display:inline-flex;align-items:center;gap:6px;color:#fff;font-size:14px;cursor:pointer;position:relative;padding:8px 4px}
.lang b{font-weight:700}
.lang-tip{position:absolute;top:calc(100% + 12px);right:0;background:var(--blue-dd);color:rgba(255,255,255,.9);font-size:12px;padding:8px 12px;border-radius:8px;white-space:nowrap;opacity:0;visibility:hidden;transition:.2s}
.lang:hover .lang-tip{opacity:1;visibility:visible}
.hdiv{width:1px;height:22px;background:rgba(255,255,255,.25)}
.hphone{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.88);font-size:14px}
.hphone:hover{color:#fff}
.btn-cta{background:#fff;color:var(--blue);border-radius:50px;box-shadow:0 10px 26px rgba(1,28,58,.28)}
.btn-cta:hover{color:var(--blue-d);box-shadow:0 14px 34px rgba(44,177,232,.5);transform:translateY(-2px)}
.hd .btn-cta{height:46px;padding:0 26px;font:700 15px var(--fh)}
.burger{display:none;background:none;border:0;color:#fff;cursor:pointer;padding:6px}

/* ---------- 5. Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 30px;border-radius:50px;
font:600 16px var(--fh);border:1px solid transparent;cursor:pointer;position:relative;overflow:hidden;transition:transform .28s var(--ease),box-shadow .28s,background .28s,color .2s,border-color .28s;white-space:nowrap}
.btn:after{content:"";position:absolute;top:-10%;left:-130%;width:55%;height:120%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-18deg);transition:.6s}
.btn:hover:after{left:150%}
.btn:not(.btn-link):hover{transform:translateY(-2px)}
.btn:not(.btn-link):active{transform:translateY(0) scale(.97)}
.btn .ic{transition:transform .3s}
.btn:not(.btn-link):hover .ic{transform:scale(1.08)}
.btn-sm{height:42px;padding:0 20px;font-size:14px;border-radius:50px}
.btn-xl{height:56px;padding:0 34px;font-size:16.5px}
.btn-w{width:100%}
.btn-cta2{background:linear-gradient(120deg,var(--blue),var(--cyan-d));color:#fff}
.btn-cta2:hover{color:#fff;box-shadow:0 16px 38px rgba(3,82,162,.42);transform:translateY(-2px)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-d);color:#fff;box-shadow:0 14px 34px rgba(3,82,162,.35);transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--blue)}
.btn-white:hover{color:var(--blue-d);box-shadow:0 16px 36px rgba(255,255,255,.25);transform:translateY(-2px)}
.btn-ol{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.55);color:#fff}
.btn-ol:hover{border-color:#fff;background:rgba(255,255,255,.14);color:#fff}
.btn-line{border-color:rgba(3,82,162,.35);color:var(--blue);background:#fff}
.btn-line:hover{border-color:var(--blue);background:var(--blue-ll);color:var(--blue);transform:translateY(-2px)}
.btn-g{background:#25D366;color:#fff}
.btn-g:hover{background:#1EBE5A;color:#fff}
.btn-link{height:auto;padding:0;border:0;background:none;color:var(--cyan-d);font-weight:700;gap:8px}
.btn-link:hover{color:var(--blue);gap:12px}

/* ---------- 6. Video hero (homepage) ---------- */
.vhero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:linear-gradient(160deg,#04182F,var(--blue-dd) 58%,var(--blue-d))}
.vhero-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease}
.vhero-v.ready{opacity:1}
.vhero-ov{position:absolute;inset:0;background:linear-gradient(102deg,rgba(2,11,26,.94) 6%,rgba(2,22,46,.78) 44%,rgba(3,40,84,.44) 80%,rgba(3,52,106,.32))}
.vhero-ov:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,10,24,.55),transparent 26%,transparent 60%,rgba(2,10,24,.78))}
.vhero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:64px 64px;
-webkit-mask-image:radial-gradient(82% 82% at 68% 26%,#000 0%,transparent 100%);mask-image:radial-gradient(82% 82% at 68% 26%,#000 0%,transparent 100%)}
.vhero-in{position:relative;z-index:3;width:100%;padding-top:168px;padding-bottom:130px}
.vhero h1{color:#fff;font-size:clamp(36px,4.1vw,58px);letter-spacing:-1.4px;margin:0 0 22px;max-width:1060px}
.vhero h1 em{font-style:normal;background:linear-gradient(92deg,#9ADDF9,#2CB1E8 55%,#5BC6F2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-chip{display:inline-flex;align-items:center;gap:10px;background:rgba(44,177,232,.16);border:1px solid rgba(44,177,232,.5);color:#BFE9FF;padding:9px 18px;border-radius:100px;font:600 13.5px var(--fh);letter-spacing:.06em;text-transform:uppercase;margin-bottom:26px;backdrop-filter:blur(4px)}
.hero-sub{color:rgba(255,255,255,.86);font-size:18.5px;max-width:660px;margin-bottom:34px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:46px}
.hero-badges{display:flex;gap:12px;flex-wrap:wrap}
.hbadge{display:inline-flex;align-items:center;gap:9px;color:rgba(255,255,255,.92);font-size:13.5px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);padding:9px 16px;border-radius:8px;backdrop-filter:blur(6px);transition:.25s}
.hbadge:hover{transform:translateY(-2px);border-color:rgba(142,216,248,.7)}
.hbadge .ic{color:var(--cyan)}
.hero-scroll{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);color:rgba(255,255,255,.65);display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;z-index:3}
.hero-scroll .ic{animation:scrollHint 1.8s ease-in-out infinite}

/* ---------- 7. Photo bands (homepage) ---------- */
.band{position:relative;overflow:hidden;background:var(--navy-d);padding:clamp(96px,12vh,150px) 0;isolation:isolate}
.band.tall{min-height:94vh;min-height:94svh;display:flex;align-items:center}
.band-bg{position:absolute;inset:-9% 0;background-size:cover;background-position:center;transform:translate3d(0,var(--par,0px),0) scale(1.06);will-change:transform}
.band-ov{position:absolute;inset:0}
.band-ov.center{background:linear-gradient(180deg,rgba(2,11,26,.88),rgba(2,17,36,.66) 46%,rgba(1,9,21,.9))}
.band-ov.left{background:linear-gradient(102deg,rgba(2,11,26,.93) 4%,rgba(2,19,40,.72) 46%,rgba(3,30,62,.42) 82%,rgba(3,40,84,.3))}
.band-in{position:relative;z-index:2;width:100%}
.band h2{color:#fff}
.band .scr-hd h2{color:#fff}
.overline.lt{color:#8ED8F8}
.overline.lt:before{background:linear-gradient(90deg,var(--cyan),transparent)}

/* statement pieces */
.st-q{width:64px;height:64px;margin:0 auto 30px;border-radius:50%;background:rgba(44,177,232,.15);border:1px solid rgba(44,177,232,.5);display:flex;align-items:center;justify-content:center;color:#8ED8F8}
.st-t2{font:800 clamp(26px,2.6vw,40px)/1.4 var(--fh);color:#fff;letter-spacing:-.5px;max-width:1080px;margin:0 auto 22px;text-wrap:balance}
.st-t2 em{font-style:normal;background:linear-gradient(90deg,#8ED8F8,var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.st-s{color:rgba(255,255,255,.74);font-size:17px;max-width:840px;margin:0 auto 36px}

/* ---------- 8. Sections & heads ---------- */
.sec{padding:clamp(72px,7vw,104px) 0;position:relative}
.sec.dark{background:var(--blue-dd);color:rgba(255,255,255,.78)}
.sec.dark h2,.sec.dark h3,.sec.dark h4{color:#fff}
.sec.dark .overline{color:#8ED8F8}
.sec.soft{background:var(--soft)}
.sec-head{max-width:900px;margin-bottom:52px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.between{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;max-width:none;margin-bottom:44px}
.sec-sub{color:var(--ink2);font-size:17.5px;margin-top:16px}
.sec.dark .sec-sub{color:rgba(255,255,255,.7)}
.overline{display:inline-flex;align-items:center;gap:10px;font:700 13px var(--fh);letter-spacing:.18em;text-transform:uppercase;color:var(--cyan-d);margin-bottom:16px}
.overline:before{content:"";width:26px;height:2px;background:linear-gradient(90deg,var(--cyan),transparent)}
.sec-head.center .overline:before{display:none}
.sec-head.center .overline:after{content:"";width:26px;height:2px;background:linear-gradient(-90deg,var(--cyan),transparent)}
.beam{height:1px;background:linear-gradient(90deg,transparent,rgba(44,177,232,.55),transparent);position:relative;overflow:visible;margin:0}
.beam:after{content:"";position:absolute;top:-1px;left:-10%;width:140px;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);animation:beam 4.5s linear infinite}
.scr-hd{max-width:900px;margin-bottom:46px}
.scr-sub{color:rgba(255,255,255,.78);font-size:17px;margin-top:14px}

/* ---------- 9. Grid & cards ---------- */
.grid{display:grid;gap:26px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g5{grid-template-columns:repeat(5,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px;transition:transform .32s var(--ease),box-shadow .32s,border-color .32s;position:relative}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-h);border-color:rgba(44,177,232,.55)}
.ic-b{width:54px;height:54px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--blue-l),#fff);color:var(--blue);border:1px solid var(--line);margin-bottom:18px;transition:.3s}
.card:hover .ic-b{background:linear-gradient(135deg,var(--blue),var(--cyan-d));color:#fff;border-color:transparent;box-shadow:0 12px 26px rgba(3,82,162,.3)}
.card h3{margin-bottom:10px}
.card p{color:var(--ink2);font-size:15px;margin:0}
.kv{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 13px;border-radius:100px;font:600 12.5px var(--fh);letter-spacing:.02em}
.chip.b{background:var(--blue-l);color:var(--blue)}
.chip.c{background:var(--cyan-l);color:var(--cyan-d)}
.chip.l{border:1px solid var(--line);color:var(--ink2);background:#fff}
.chip.d{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.22)}
.num{font:800 46px/1.1 var(--fh);color:var(--blue);letter-spacing:-1.5px}
.num i{font-style:normal;color:var(--cyan);font-size:26px;vertical-align:super}
.tag{display:inline-block;padding:3px 10px;border-radius:5px;font:600 11.5px var(--fh);background:var(--blue-l);color:var(--blue)}
.tag.c{background:var(--cyan-l);color:var(--cyan-d)}
.meta{display:flex;gap:14px;align-items:center;font-size:12.5px;color:var(--ink3)}
.meta .tag{margin-right:2px}
.card .ic-b .ic,.cic .ic,.dic .ic,.sol-ic .ic,.step .ic{transition:transform .3s}
.card:hover .ic-b .ic{transform:scale(1.14) rotate(-3deg)}

/* image card */
.icard{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .32s var(--ease),box-shadow .32s,border-color .32s;display:flex;flex-direction:column;position:relative}
.icard:hover{transform:translateY(-6px);box-shadow:var(--sh-h);border-color:rgba(44,177,232,.55)}
.icard .im{height:240px;overflow:hidden;position:relative;background:linear-gradient(135deg,var(--blue-l),#DCE9F7)}
.icard .im img{width:100%;height:100%;object-fit:cover;display:block;transition:.7s var(--ease)}
.icard:hover .im img{transform:scale(1.07)}
.icard .im .tag{position:absolute;top:14px;left:14px;background:rgba(3,82,162,.88);color:#fff;font:600 12px var(--fh);padding:5px 12px;border-radius:6px;backdrop-filter:blur(4px)}
.icard-b{padding:24px 26px 28px;display:flex;flex-direction:column;gap:10px;flex:1}
.icard-b h3{font-size:19px}
.icard-b p{color:var(--ink2);font-size:14.5px;margin:0;flex:1}
.icard .btn-link{align-self:flex-start;margin-top:4px}

/* product cards (homepage) */
.pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;position:relative}
.pcard:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--cyan));opacity:0;transition:.3s;z-index:3}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--sh-h);border-color:rgba(44,177,232,.55)}
.pcard:hover:before{opacity:1}
.pcard .pim{position:relative;height:224px;overflow:hidden;background:linear-gradient(140deg,#06294F,var(--navy-d))}
.pcard .pim img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.pcard:hover .pim img{transform:scale(1.06)}
.pim .ptag{position:absolute;top:14px;left:14px;background:rgba(3,52,110,.78);border:1px solid rgba(255,255,255,.24);color:#fff;font:600 12px var(--fh);padding:5px 12px;border-radius:6px;backdrop-filter:blur(4px)}
.pbody{padding:24px 26px 26px;display:flex;flex-direction:column;gap:12px;flex:1}
.pbody h3{font-size:18px}
.pbody p{color:var(--ink2);font-size:14px;margin:0;flex:1}
.pchips{display:flex;gap:8px;flex-wrap:wrap}
.plink{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font:700 14px var(--fh);color:var(--cyan-d);transition:.25s}
.pcard:hover .plink{gap:12px;color:var(--blue)}

/* ---------- 10. Glass + solution mini + stats ---------- */
.glass{background:linear-gradient(150deg,rgba(9,30,58,.62),rgba(4,16,34,.55));backdrop-filter:blur(14px) saturate(1.15);border:1px solid var(--glass-b);border-radius:14px;transition:transform .35s var(--ease),border-color .3s,background .3s,box-shadow .35s}
a.glass:hover{background:linear-gradient(150deg,rgba(11,40,76,.8),rgba(5,22,46,.68));border-color:rgba(44,177,232,.6);transform:translateY(-5px);box-shadow:0 26px 62px rgba(0,10,26,.5);color:#fff}
.sol-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.sol-mini a{display:flex;gap:16px;align-items:flex-start;padding:24px 22px;color:#fff}
.sol-mini b{display:block;font:700 16px var(--fh);color:#fff;margin-bottom:4px}
.sol-mini span span{font-size:12.5px;color:rgba(255,255,255,.66);line-height:1.55;display:block}
.sol-mini .sol-ic{flex:0 0 46px;width:46px;height:46px;border-radius:11px;background:rgba(44,177,232,.16);border:1px solid rgba(44,177,232,.4);display:flex;align-items:center;justify-content:center;color:#8ED8F8}
.sol-card:hover .sol-ic .ic,.sol-mini a:hover .sol-ic .ic{transform:scale(1.12)}
.why-mini{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.why-mini .wm{padding:28px 24px;color:#fff}
.why-mini .wm b{display:block;font:800 clamp(30px,2.5vw,40px)/1.05 var(--fh);color:#fff;letter-spacing:-1.5px}
.why-mini .wm b i{font-style:normal;color:#8ED8F8;font-size:.5em;font-weight:700;margin-left:4px}
.why-mini .wm h3{color:#fff;font-size:15.5px;margin:10px 0 8px}
.why-mini .wm p{color:rgba(255,255,255,.68);font-size:12.8px;margin:0;line-height:1.6}
.why-mini .wm{transition:transform .35s var(--ease),box-shadow .35s,border-color .3s}
.why-mini .wm:hover{transform:translateY(-5px);box-shadow:0 24px 58px rgba(1,42,86,.46);border-color:rgba(44,177,232,.55)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.stat{position:relative;padding:10px 0 10px 26px;transition:transform .3s}
.stat:hover{transform:translateY(-3px)}
.stat:before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--cyan),var(--blue))}
.stat b{display:block;font:800 52px/1.05 var(--fh);color:#fff;letter-spacing:-2px}
.stat b i{font-style:normal;color:#8ED8F8;font-size:30px}
.stat span{color:rgba(255,255,255,.7);font-size:14.5px}
.stat.dark b{color:var(--blue)}
.stat.dark b i{color:var(--cyan-d)}
.stat.dark span{color:var(--ink2)}
.stat.sm b{font-size:34px;letter-spacing:-1px}
.stat.sm b i{font-size:18px}
.stat.sm span{font-size:13.5px}
.stat b span,.stat.sm b span,.stat.dark b span{font:inherit;color:inherit;letter-spacing:inherit}

/* ---------- 11. News / mini lists / sidebars ---------- */
.ncard{display:flex;flex-direction:column;overflow:hidden;padding:0}
.ncard .im{height:210px;overflow:hidden;background:linear-gradient(135deg,var(--blue-l),#DCE9F7)}
.ncard .im img{width:100%;height:100%;object-fit:cover;transition:.6s var(--ease)}
.ncard:hover .im img{transform:scale(1.06)}
.ncard-b{padding:24px 26px 26px;display:flex;flex-direction:column;gap:11px;flex:1}
.ncard h3{font-size:18.5px;line-height:1.45}
.ncard p{color:var(--ink2);font-size:14px;flex:1;margin:0}
.ncard.feat{grid-column:span 2;flex-direction:row}
.ncard.feat .im{flex:1.05;height:auto;min-height:100%;border-radius:0}
.ncard.feat .ncard-b{flex:1;padding:36px 38px;justify-content:center}
.ncard.feat h3{font-size:22px}
.news-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.news-mini a{overflow:hidden;display:flex;flex-direction:column;color:#fff}
.news-mini .im{height:170px;overflow:hidden}
.news-mini .im img{width:100%;height:100%;object-fit:cover;transition:.6s var(--ease)}
.news-mini a:hover .im img{transform:scale(1.06)}
.news-mini .nb{padding:20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.news-mini h3{color:#fff;font-size:16px;line-height:1.5}
.news-mini .meta{color:rgba(255,255,255,.55);font-size:12px;display:flex;gap:12px}
.news-mini p{color:rgba(255,255,255,.68);font-size:13.5px;margin:0;flex:1}
.news-mini .btn-link{color:#8ED8F8;align-self:flex-start}
.news-mini .btn-link:hover{color:#fff}
.with-side{display:grid;grid-template-columns:1fr 360px;gap:44px;align-items:start}
.split-a{display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:start}
.split-b{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center}
.side .card{padding:26px 26px}
.side-search{display:flex;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.side-search input{flex:1;border:0;padding:13px 16px;font:400 14.5px var(--fb);outline:none;min-width:0}
.side-search button{border:0;background:var(--blue);color:#fff;padding:0 18px;cursor:pointer;transition:.25s}
.side-search button:hover{background:var(--blue-d)}
.cat-l{display:flex;justify-content:space-between;align-items:center;padding:11px 4px;border-bottom:1px dashed var(--line);font-size:14.5px;color:var(--ink2);transition:.22s}
.cat-l:hover{color:var(--blue);padding-left:9px}
.cat-l em{font-style:normal;color:var(--ink3);font-size:12.5px}
.mini-n{display:flex;gap:12px;padding:12px 0;border-bottom:1px dashed var(--line)}
.mini-n:last-child{border-bottom:0}
.mini-n .im{width:86px;height:64px;flex:0 0 86px;border-radius:8px;overflow:hidden;background:var(--blue-l)}
.mini-n .im img{width:100%;height:100%;object-fit:cover}
.mini-n b{font:600 13.5px/1.45 var(--fh);color:var(--ink);display:block}
.mini-n span{font-size:12px;color:var(--ink3)}
.prevnext{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);margin-top:60px;padding-top:26px;font-size:15px}
.prevnext a{display:flex;align-items:center;gap:8px;color:var(--ink2)}
.prevnext a:hover{color:var(--blue)}

/* ---------- 12. Timeline / steps / table / page head ---------- */
.tl{position:relative;padding-left:40px}
.tl:before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--cyan),var(--blue-l))}
.tl-i{position:relative;padding:0 0 38px}
.tl-i:before{content:"";position:absolute;left:-40px;top:6px;width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--cyan);box-shadow:0 0 0 6px rgba(44,177,232,.15)}
.tl-y{font:800 14px var(--fh);letter-spacing:.08em;color:var(--cyan-d);text-transform:uppercase}
.tl-i h4{margin:6px 0 8px;font-size:19px}
.tl-i p{color:var(--ink2);font-size:15px;margin:0}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:st}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px 24px 26px;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.step:hover{transform:translateY(-6px);box-shadow:var(--sh-h);border-color:rgba(44,177,232,.55)}
.step:before{counter-increment:st;content:"0" counter(st);position:absolute;top:-18px;left:24px;background:linear-gradient(120deg,var(--blue),var(--cyan-d));color:#fff;font:800 14px var(--fh);padding:7px 13px;border-radius:8px;box-shadow:0 10px 22px rgba(3,82,162,.3)}
.step h4{margin:10px 0 8px;font-size:17px}
.step p{color:var(--ink2);font-size:13.8px;margin:0}
.tbl-w{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#fff}
table.tbl{width:100%;border-collapse:collapse;min-width:820px}
.tbl th{background:linear-gradient(120deg,var(--blue-dd),var(--blue));color:#fff;font:600 13px var(--fh);letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:15px 18px;white-space:nowrap}
.tbl td{padding:14px 18px;border-top:1px solid var(--line2);font-size:14.5px;color:var(--ink2);white-space:nowrap}
.tbl tbody tr:nth-child(even){background:#FAFCFE}
.tbl tbody tr:hover{background:var(--cyan-l)}
.tbl td b{color:var(--ink);font-family:var(--fh)}
.tbl .m{color:var(--blue);font-weight:700}
.phead{position:relative;padding:158px 0 104px;background:var(--blue-dd);overflow:hidden}
.phead .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.34;transform:scale(1.04);animation:pz 26s ease-in-out infinite alternate}
.phead:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(1,26,54,.94) 10%,rgba(2,53,106,.74) 55%,rgba(3,82,162,.35))}
.phead-in{position:relative;z-index:2;max-width:1460px;margin:0 auto;padding:0 30px}
.crumb{display:flex;gap:10px;align-items:center;color:rgba(255,255,255,.6);font-size:13.5px;margin-bottom:22px;flex-wrap:wrap}
.crumb a{color:rgba(255,255,255,.78)}
.crumb a:hover{color:#fff}
.crumb b{color:#8ED8F8;font-weight:600}
.phead h1{color:#fff;font-size:clamp(30px,2.6vw,42px);margin-bottom:16px}
.phead-sub{color:rgba(255,255,255,.82);font-size:17.5px;max-width:860px}
.phead .kv .chip{margin-top:8px}
.phead-sm{padding:142px 0 40px}

/* ---------- 13. FAQ / downloads / certs ---------- */
.faq{position:relative;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.faq details{border-top:1px solid var(--line2)}
.faq details:first-child{border-top:0}
.faq summary{list-style:none;cursor:pointer;padding:22px 26px;font:700 17px var(--fh);color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:16px;transition:.2s}
.faq summary:hover{color:var(--blue);background:var(--blue-ll)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"";width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:var(--blue-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%230352A2' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/13px no-repeat;transition:.28s}
.faq details[open] summary:after{transform:rotate(180deg);background-color:var(--cyan-l)}
.faq details>div{padding:0 26px 24px;color:var(--ink2);font-size:15.5px}
.faq details>div p{margin:0 0 10px}
.faq details>div p:last-child{margin:0}
.drow{display:flex;align-items:center;gap:20px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 26px;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.drow:hover{border-color:rgba(44,177,232,.55);box-shadow:var(--sh-h);transform:translateY(-4px)}
.drow .dic{width:52px;height:52px;flex:0 0 52px;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--cyan-d));color:#fff;display:flex;align-items:center;justify-content:center}
.drow:hover .dic .ic{transform:rotate(-6deg) scale(1.1)}
.drow h4{margin-bottom:4px}
.drow p{margin:0;color:var(--ink3);font-size:13px}
.drow .dact{margin-left:auto;display:flex;gap:10px;align-items:center}
.certs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cert{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 20px;text-align:center;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.cert:hover{transform:translateY(-6px);box-shadow:var(--sh-h);border-color:rgba(44,177,232,.55)}
.cert .cic{width:48px;height:48px;margin:0 auto 14px;border-radius:12px;background:linear-gradient(135deg,var(--blue-l),#fff);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--blue)}
.cert:hover .cic{background:linear-gradient(135deg,var(--blue),var(--cyan-d));color:#fff;border-color:transparent}
.cert:hover .cic .ic{transform:scale(1.14)}
.cert b{display:block;font:700 14.5px var(--fh);color:var(--ink)}
.cert span{display:block;font-size:12px;color:var(--ink3);margin-top:5px}

/* ---------- 14. Marquee / CTA band ---------- */
.mq{overflow:hidden;position:relative;padding:8px 0}
.mq:before,.mq:after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2}
.mq:before{left:0;background:linear-gradient(90deg,var(--soft),transparent)}
.mq:after{right:0;background:linear-gradient(-90deg,var(--soft),transparent)}
.mq-in{display:flex;gap:16px;width:max-content;animation:mq 36s linear infinite}
.mq:hover .mq-in{animation-play-state:paused}
.mq-i{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 24px;font:700 14px var(--fh);color:var(--ink2);white-space:nowrap}
.mq-i .ic{color:var(--cyan-d)}
.ctaband{position:relative;border-radius:20px;overflow:hidden;background:linear-gradient(120deg,var(--navy) 0%,var(--blue-d) 55%,#0A6FC8);padding:60px 68px;display:flex;align-items:center;justify-content:space-between;gap:36px;box-shadow:0 40px 90px rgba(1,32,66,.30)}
.ctaband:before{content:"";position:absolute;inset:0;background:url("../img/v5/screen-cta.svg") center/cover;opacity:.5}
.ctaband:after{content:"";position:absolute;right:-80px;top:-80px;width:340px;height:340px;border-radius:50%;border:1.5px dashed rgba(142,216,248,.35);animation:spin 26s linear infinite}
.ctaband>*{position:relative;z-index:2}
.ctaband h3{color:#fff;font-size:27px;margin-bottom:10px}
.ctaband p{color:rgba(255,255,255,.78);margin:0;max-width:720px}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- 15. Dock / modal / mobar / forms ---------- */
.dock{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:150;display:flex;flex-direction:column;gap:10px}
.dk{width:50px;height:50px;border-radius:50px;background:rgba(3,82,162,.92);backdrop-filter:blur(8px);color:#fff;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 12px 26px rgba(1,42,86,.28);transition:.25s}
.dk:hover{background:linear-gradient(135deg,var(--cyan-d),var(--blue));color:#fff;transform:translateX(-4px)}
.dk span{position:absolute;right:62px;top:50%;transform:translateY(-50%) translateX(8px);background:var(--blue-dd);color:#fff;font-size:13px;padding:8px 14px;border-radius:8px;white-space:nowrap;opacity:0;visibility:hidden;transition:.22s;box-shadow:0 10px 24px rgba(1,42,86,.3)}
.dk span:after{content:"";position:absolute;right:-5px;top:50%;margin-top:-5px;border:5px solid transparent;border-left-color:var(--blue-dd)}
.dk:hover span{opacity:1;visibility:visible;transform:translateY(-50%)}
.dk#toTop{opacity:0;visibility:hidden;transform:translateY(10px)}
.dk#toTop.show{opacity:1;visibility:visible;transform:none}
.dk#toTop.show:hover{transform:translateX(-4px)}
.modal{position:fixed;inset:0;z-index:400;display:none}
.modal.open{display:block}
.modal-bg{position:absolute;inset:0;background:rgba(1,22,44,.6);backdrop-filter:blur(4px)}
.modal-c{position:relative;max-width:660px;margin:7vh auto 0;background:#fff;border-radius:18px;padding:38px 40px;box-shadow:0 50px 110px rgba(0,0,0,.45);max-height:86vh;overflow:auto;animation:hRise .5s var(--ease) both}
.modal-x{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;border:0;background:var(--soft);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.modal-x:hover{background:var(--blue-l);color:var(--blue)}
.modal-h{margin-bottom:24px}
.modal-h p{color:var(--ink2);font-size:14.5px;margin:8px 0 0}
.mobar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:180;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:10px 16px;gap:10px;box-shadow:0 -10px 30px rgba(1,42,86,.12)}
.mobar .btn{flex:1;height:48px}
.form label{display:block;font:600 13.5px var(--fh);color:var(--ink);margin-bottom:16px}
.form input,.form select,.form textarea{display:block;width:100%;margin-top:8px;padding:13px 16px;border:1.5px solid var(--line);border-radius:8px;font:400 15px var(--fb);color:var(--ink);background:#fff;transition:.2s;outline:none}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(44,177,232,.14)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.f-note{font-size:12.5px;color:var(--ink3);margin:12px 0 0}

/* ---------- 16. Article / misc ---------- */
.art{max-width:860px;margin:0 auto}
.art-body h2{font-size:25px;margin:40px 0 16px}
.art-body h3{font-size:21px;margin:30px 0 12px}
.art-body p{color:#3B4755;font-size:17px;line-height:1.9;margin:0 0 18px}
.art-body .lead{background:var(--blue-ll);border-left:4px solid var(--cyan);border-radius:0 12px 12px 0;padding:22px 26px;font-size:17px;color:var(--blue-dd);font-weight:600;line-height:1.8}
.art-meta{display:flex;flex-wrap:wrap;gap:18px;align-items:center;color:var(--ink3);font-size:14px;margin:20px 0 8px}
.art-meta .who{display:flex;align-items:center;gap:12px;color:var(--ink2)}
.avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--cyan-d));color:#fff;display:flex;align-items:center;justify-content:center;font:700 14px var(--fh)}
.note{background:var(--cyan-l);border:1px solid #BFE7F8;border-radius:10px;padding:16px 20px;font-size:14px;color:#0A5E86;display:flex;gap:12px;align-items:flex-start}
.note .ic{flex:0 0 20px;margin-top:3px;color:var(--cyan-d)}
.quote-c{border-left:4px solid var(--cyan);background:var(--blue-ll);border-radius:0 12px 12px 0;padding:26px 30px}
.quote-c p{font-size:16.5px;color:#3B4755;font-style:italic;margin:0 0 14px}
.quote-c .who{display:flex;gap:12px;align-items:center;color:var(--ink2);font-size:14px}
.ticks li{position:relative;padding-left:32px;margin-bottom:13px;color:var(--ink2);font-size:15.5px}
.ticks li:before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;
background:var(--cyan-l);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230E8FD0' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");
background-position:center;background-repeat:no-repeat}
.ticks li b{color:var(--ink)}
.map-wrap{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.map-wrap img{display:block;width:100%}
.gimg{border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.gimg img{display:block;width:100%;height:100%;object-fit:cover;transition:.7s var(--ease)}
.gimg:hover img{transform:scale(1.05)}

/* ---------- 17. Footer ---------- */
.ft{background:linear-gradient(180deg,var(--navy-d),#04182F);color:rgba(255,255,255,.7)}
.ft-top{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr 1.25fr;gap:44px;padding-top:84px;padding-bottom:56px}
.ft-about p{font-size:14px;line-height:1.8;margin:22px 0 24px;max-width:340px}
.ft-logo{height:48px}
.ft h4{color:#fff;font-size:14.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:22px;position:relative;padding-bottom:12px}
.ft h4:after{content:"";position:absolute;left:0;bottom:0;width:28px;height:2px;background:linear-gradient(90deg,var(--cyan),transparent)}
.ft a{display:block;color:rgba(255,255,255,.66);font-size:14px;padding:6px 0;transition:.22s}
.ft a:hover{color:#8ED8F8;transform:translateX(3px)}
.ft-soc{display:flex;gap:12px}
.ft-soc a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;padding:0}
.ft-soc a:hover{background:linear-gradient(135deg,var(--cyan-d),var(--blue));transform:translateY(-3px)}
.ft-p{display:flex;gap:10px;font-size:13.8px;line-height:1.6;margin:0 0 14px;align-items:flex-start}
.ft-p .ic{flex:0 0 16px;margin-top:4px;color:#8ED8F8}
.ft-p a{display:inline;padding:0}
.ft-news{display:flex;gap:0;margin-top:20px;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.2)}
.ft-news input{flex:1;background:rgba(255,255,255,.07);border:0;padding:12px 15px;color:#fff;font:400 13.5px var(--fb);outline:none;min-width:0}
.ft-news input::placeholder{color:rgba(255,255,255,.45)}
.ft-news .btn{border-radius:0;height:auto;padding:0 16px}
.ft-bot{border-top:1px solid rgba(255,255,255,.12)}
.ft-bot-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:24px;padding-bottom:24px;font-size:13.5px;flex-wrap:wrap}
.ft-legal{display:flex;gap:22px}
.ft-legal a{display:inline;padding:0}


/* ---------- 17b. Tabs / filters (V7 fix) ---------- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:36px}
.tab{padding:13px 22px;font:600 15px var(--fh);color:var(--ink2);background:none;border:0;border-bottom:3px solid transparent;cursor:pointer;position:relative;transition:color .22s,background .22s,border-color .22s;white-space:nowrap}
.tab:hover{color:var(--blue);background:var(--blue-ll)}
.tab.on{color:var(--blue);border-bottom-color:var(--cyan)}
.tab.on:hover{background:none}

/* ---------- 17c. V7 · container gradient frames ---------- */
.card:not(.ncard):not(.icard),.step,.cert,.drow,.glass,.ctaband,.modal-c,.srch-panel{border-width:1px;border-style:solid;border-image:url("../img/v7/frame-border.svg") 17/18px/0 stretch}
.ctaband,.modal-c,.srch-panel{border-color:transparent}
.icard:after,.pcard:after,.ncard:after,.faq:after{content:"";position:absolute;inset:0;border:18px solid transparent;border-image:url("../img/v7/frame-border.svg") 17 stretch;pointer-events:none;z-index:4;border-radius:inherit}

/* ---------- 17d. V7 · search overlay ---------- */
.srch{position:fixed;inset:0;z-index:520;display:none}
.srch.open{display:block}
.srch-bg{position:absolute;inset:0;background:rgba(2,12,28,.74);backdrop-filter:blur(6px)}
.srch-panel{position:relative;max-width:760px;margin:11vh auto 0;background:#fff;border-radius:20px;padding:36px 38px 30px;box-shadow:0 60px 130px rgba(0,10,26,.5);animation:hRise .5s var(--ease) both;max-height:80vh;overflow:auto}
.srch-x{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;border:0;background:var(--soft);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.srch-x:hover{background:var(--blue-l);color:var(--blue)}
.srch-label{font:700 13px var(--fh);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan-d);margin-bottom:16px}
.srch-form{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:100px;padding:6px 6px 6px 20px;transition:.25s;background:#fff}
.srch-form:focus-within{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(44,177,232,.14)}
.srch-form>svg{flex:none;color:var(--ink3)}
.srch-form input{flex:1;border:0;outline:none;font:400 17px var(--fb);color:var(--ink);background:none;min-width:0;padding:10px 0}
.srch-hot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px}
.srch-hot-t{font:600 13px var(--fh);color:var(--ink3)}
.srch-note{font-size:12.5px;color:var(--ink3);margin:20px 0 0}
.nav-srch{display:none}
@media (max-width:1280px){
.nav-srch{display:block;padding:4px 6px 14px;border-bottom:1px solid var(--line2)}
.nav-srch button{width:100%;display:flex;align-items:center;gap:10px;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:11px 14px;font:500 14.5px var(--fb);color:var(--ink3);cursor:pointer;text-align:left;transition:.2s}
.nav-srch button:hover{border-color:var(--cyan);color:var(--ink2)}
.nav-srch .ic{color:var(--cyan-d)}
}
@media (max-width:880px){
.srch-panel{margin:7vh 14px 0;padding:28px 22px 24px}
}

/* ---------- 17e. V7 · CTA band with photo ---------- */
.ctaband.photo{background:url("../img/v7/bg-support.jpg") center 42%/cover no-repeat,linear-gradient(120deg,var(--navy) 0%,var(--blue-d) 55%,#0A6FC8)}
.ctaband.photo:before{background:linear-gradient(100deg,rgba(2,10,24,.92) 0%,rgba(2,16,34,.72) 40%,rgba(2,20,42,.38) 74%,rgba(2,20,42,.26) 100%);opacity:1}
.ctaband.photo .btn-ol{background:rgba(4,20,42,.55);border-color:rgba(255,255,255,.72);backdrop-filter:blur(8px)}


/* ---------- 17f. V8 · product detail overview ---------- */
.pd-overview{padding-top:clamp(64px,6vw,92px)}
.pd-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:start}
.pd-media{position:sticky;top:106px}
.pd-media:hover{transform:none}
.pd-media .im{height:440px}
.pd-side .overline{margin-bottom:12px}
.pd-side h2{font-size:clamp(24px,2.1vw,32px);margin-bottom:14px}
.pd-lead{color:var(--ink2);font-size:16.5px;margin:0 0 20px}
.pd-points{margin:0 0 20px}
.pd-points li{font-size:15px;margin-bottom:11px}
.pd-tagrow{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.pd-kv-h{margin:0 0 8px;font-size:16px}
.pd-kv{margin:0 0 26px}
.pd-kv li{display:flex;justify-content:space-between;gap:18px;padding:10px 2px;border-bottom:1px dashed var(--line);font-size:14.5px}
.pd-kv li:last-child{border-bottom:0}
.pd-kv span{color:var(--ink3)}
.pd-kv b{color:var(--ink);font-family:var(--fh);font-weight:600;text-align:right}
.pd-foot{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:1180px){
.pd-grid{grid-template-columns:1fr;gap:32px}
.pd-media{position:relative;top:auto}
.pd-media .im{height:360px}
}
@media (max-width:640px){
.pd-media .im{height:260px}
}

/* ---------- 18. Responsive ---------- */
@media (max-width:1550px){
h1{font-size:clamp(30px,2.9vw,46px)}
.vhero h1{font-size:clamp(34px,3.6vw,52px)}
.hphone{display:none}
.nav-a{padding:0 12px;font-size:14px}
.nav-a:after{left:12px;right:12px}
.hd-logo{margin-right:14px}
.logo{height:44px}
}
@media (max-width:1360px){
.nav-a{padding:0 10px}
.nav-a:after{left:10px;right:10px}
.hd-r{gap:12px}
}
@media (max-width:1280px){
.wrap-nav{padding:0 20px}
.burger{display:block}
.nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:14px 20px 24px;box-shadow:0 30px 60px rgba(1,42,86,.25);max-height:80vh;overflow:auto;height:auto;border-radius:0 0 16px 16px}
.nav.open{display:flex}
.nav-a{color:var(--ink);height:auto;padding:14px 6px;font-size:16px;border-bottom:1px solid var(--line2)}
.nav-a:after{display:none}
.nav-cv{color:var(--ink3)}
.dd-w{height:auto}
.dd,.dd-w .dd.dd-l0{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;left:auto}
.nav>.dd-w:last-child .dd{left:auto;right:auto}
.dd-in{box-shadow:none;border-radius:0;padding:8px 0 12px 14px;flex-direction:column;gap:16px}
.dd-in:before{display:none}
.dd-feat{width:100%}
.hd-in{height:76px}
.logo{height:42px}
}
@media (max-width:1180px){
h1{font-size:clamp(28px,3.4vw,40px)}
.vhero h1{font-size:clamp(30px,4vw,42px)}
.vhero-in{padding-top:140px;padding-bottom:110px}
.g4,.g5,.stats,.steps,.certs{grid-template-columns:repeat(2,1fr)}
.ncard.feat{grid-column:span 1;flex-direction:column}
.ncard.feat .im{min-height:220px}
.with-side{grid-template-columns:1fr}
.ft-top{grid-template-columns:1fr 1fr}
.split-a,.split-b{grid-template-columns:1fr;gap:26px}
.sol-mini{grid-template-columns:repeat(2,1fr)}
.why-mini{grid-template-columns:repeat(2,1fr)}
.news-mini{grid-template-columns:1fr}
.ctaband{flex-direction:column;align-items:flex-start;text-align:left;padding:48px 40px}
.dock{display:none}
.band.tall{min-height:auto}
}
@media (max-width:880px){
.wrap{padding:0 20px}
.wrap-nav{padding:0 16px}
.g2,.g3,.g4,.g5,.stats,.steps,.certs,.sol-grid,.sol-mini,.why-mini,.split-a,.split-b{grid-template-columns:1fr}
.sec{padding:64px 0}
.sec-head{margin-bottom:36px}
.sec-head.between{flex-direction:column;align-items:flex-start;gap:18px}
.phead{padding:118px 0 64px}
.phead-sm{padding:106px 0 30px}
.phead h1{font-size:26px}
.phead-sub{font-size:15.5px}
h2{font-size:24px}
.vhero h1{font-size:28px;letter-spacing:-.8px}
.vhero-in{padding-top:118px;padding-bottom:96px}
.hero-sub{font-size:16px}
.hero-cta{margin-bottom:34px}
.hero-badges{gap:8px}
.hbadge{font-size:12.5px;padding:8px 12px}
.hero-scroll{display:none}
.hero-chip{font-size:11.5px;padding:8px 14px;margin-bottom:18px}
.band{padding:72px 0}
.st-t2{font-size:22px}
.st-s{font-size:15.5px}
.stat b{font-size:38px}
.stat b i{font-size:22px}
.num{font-size:34px}
.icard .im{height:200px}
.ncard .im{height:180px}
.pcard .pim{height:200px}
.drow{flex-wrap:wrap}
.drow .dact{margin-left:0;width:100%;margin-top:14px}
.drow .dact .btn{width:100%}
.ctaband{padding:38px 26px}
.ctaband h3{font-size:21px}
.cta-actions{width:100%}
.cta-actions .btn{flex:1}
.tabs{gap:2px}
.tab{padding:11px 14px;font-size:14px}
.faq summary{font-size:15.5px;padding:18px 18px}
.tbl th,.tbl td{padding:11px 13px;font-size:13.5px}
.f-row{grid-template-columns:1fr}
.mobar{display:flex}
.modal-c{margin:4vh 12px 0;padding:28px 24px}
.ft-top{grid-template-columns:1fr;gap:30px;padding-top:54px;padding-bottom:36px}
.ft-bot-in{flex-direction:column;align-items:flex-start}
.prevnext{flex-direction:column}
}
@media (max-width:640px){
.hic{display:none}
.vhero{min-height:92svh}
.vhero-in{padding-top:104px;padding-bottom:84px}
.hero-cta{flex-direction:column;align-items:stretch}
.hero-cta .btn{width:100%}
.modal-c{padding:24px 20px}
}

/* ---------- 19. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
.band-bg{transform:none!important}
}

/* ---------- 20. WordPress integration ---------- */
body.admin-bar .hd{top:32px}
@media screen and (max-width:782px){body.admin-bar .hd{top:46px}}
.ft ul.ft-menu{list-style:none;margin:0;padding:0}
.ft ul.ft-menu li a{display:block;color:rgba(255,255,255,.66);font-size:14px;padding:6px 0;transition:.22s}
.ft ul.ft-menu li a:hover{color:#8ED8F8;transform:translateX(3px)}
.plb-pager{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;align-items:center}
.plb-pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 14px;border:1px solid rgba(3,82,162,.35);border-radius:50px;color:var(--blue);font:600 14px var(--fh);background:#fff;transition:.22s}
.plb-pager .page-numbers.current{background:linear-gradient(120deg,var(--blue),var(--cyan-d));border-color:transparent;color:#fff}
.plb-pager .page-numbers:hover{border-color:var(--blue);background:var(--blue-ll);color:var(--blue)}
.plb-pager .page-numbers.current:hover{color:#fff}
.vmeta{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink3);margin-top:2px;font-weight:600}
.art-body img{height:auto;border-radius:12px}
.art-body ul{list-style:disc;padding-left:22px;margin:0 0 18px}
.art-body ol{list-style:decimal;padding-left:22px;margin:0 0 18px}
.art-body li{color:#3B4755;font-size:17px;line-height:1.9}
.art-body blockquote{border-left:4px solid var(--cyan);background:var(--blue-ll);border-radius:0 12px 12px 0;padding:20px 26px;font-size:17px;color:#3B4755;margin:0 0 18px}
.art-body table{width:100%;border-collapse:collapse;margin:0 0 18px}
.art-body th,.art-body td{border-top:1px solid var(--line2);padding:12px 14px;text-align:left;font-size:15px}
.art-body .wp-block-image{margin:0 0 18px}
.alignwide{max-width:1080px;margin-left:auto;margin-right:auto}
.dd-col.cols2{column-count:2;column-gap:26px;min-width:430px}
.dd-col.cols2 .dd-l{break-inside:avoid}
.plb-page>section:first-child{margin-top:0}

/* ---------- 21. Video page player ---------- */
.vframe{position:relative;padding-top:56.25%;border-radius:16px;overflow:hidden;background:linear-gradient(140deg,#06294F,var(--navy-d));box-shadow:var(--sh-h)}
.vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vframe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vframe-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.95);color:var(--blue);display:flex;align-items:center;justify-content:center;box-shadow:0 18px 40px rgba(0,0,0,.4);transition:.25s}
.vframe-play:hover{transform:translate(-50%,-50%) scale(1.07);color:var(--cyan-d)}