/* AN Industries — corporate redesign
   Every colour is taken from the logo: deep navy, royal blue and sky blue on clean white.
   To re-theme, change only the tokens in :root. */
:root {
    --navy-900: #061c3d;
    --navy: #082a58;
    --blue: #076abb;
    --blue-d: #055a9f;
    --sky: #85daf7;
    --sky-l: #d8f1fb;
    --ice: #eef6fc;
    --bg: #f6f9fd;
    --card: #fff;
    --line: #dce7f3;
    --ink: #0b2447;
    --ink-2: #3a4e6e;
    --muted: #5f7090;
    --ring: 0 0 0 3px rgba(7,106,187,.25);
    --shadow-sm: 0 1px 2px rgba(8,42,88,.06),0 4px 14px rgba(8,42,88,.06);
    --shadow-md: 0 10px 30px rgba(8,42,88,.12);
    --shadow-lg: 0 22px 50px rgba(8,42,88,.18);
    --r-lg: 22px;
    --r-md: 16px;
    --r-sm: 12px;
    --ease: cubic-bezier(.22,.8,.3,1);
    --f-head: 'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
    --f-body: 'Inter','Segoe UI',system-ui,sans-serif;
    --tb: 40px;
}

* { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 100px; -webkit-text-size-adjust: 100% }
body { margin: 0; font: 400 1rem/1.7 var(--f-body); color: var(--ink); background: var(--bg); min-height: 100vh; overflow-x: hidden; overflow-x: clip }
img { max-width: 100%; height: auto; display: block }
a { color: inherit }
h1,h2,h3 { font-family: var(--f-head); line-height: 1.15; margin: 0 0 .55em; letter-spacing: -.02em; text-wrap: balance; color: var(--navy) }
h1 { font-size: clamp(2rem,4.6vw,3.4rem); font-weight: 800 }
h2 { font-size: clamp(1.55rem,3vw,2.3rem); font-weight: 800 }
h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em }
p { text-wrap: pretty }
.wrap { width: min(1200px,100% - 2rem); margin-inline: auto }
.narrow { max-width: 820px }
.center { text-align: center }
.mt { margin-top: 2rem }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0 }
.skip { position: absolute; left: -999px; top: 0; background: var(--navy); color: #fff; padding: .6rem 1rem; z-index: 99; border-radius: 0 0 12px 0 }
.skip:focus { left: 0 }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px }
.aurora { display: none }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: .65rem 1.45rem; border-radius: var(--r-sm); font: 700 .95rem var(--f-head); letter-spacing: -.005em; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .25s var(--ease),box-shadow .25s,background .25s,color .25s,border-color .25s }
.btn:hover { transform: translateY(-2px) }
.btn:active { transform: translateY(0) scale(.98) }
.btn-sm { min-height: 40px; padding: .4rem 1.1rem; font-size: .88rem }
.btn-accent { color: #fff; background: linear-gradient(180deg,#0a7ad8,var(--blue)); box-shadow: 0 8px 20px rgba(7,106,187,.32) }
.btn-accent:hover { background: linear-gradient(180deg,var(--blue),var(--blue-d)); box-shadow: 0 12px 26px rgba(7,106,187,.42) }
.btn-dark { color: #fff; background: var(--navy); box-shadow: 0 8px 20px rgba(8,42,88,.28) }
.btn-dark:hover { background: var(--navy-900) }
.btn-line,.btn-ghost { color: var(--navy); background: #fff; border-color: #c4d6ea }
.btn-line:hover,.btn-ghost:hover { border-color: var(--blue); color: var(--blue) }
.btn:disabled { opacity: .6; cursor: wait; transform: none }
.link { font-weight: 700; color: var(--blue); text-decoration: none; border-bottom: 2px solid var(--sky); padding-bottom: 2px; transition: color .2s,border-color .2s }
.link:hover { color: var(--navy); border-color: var(--blue) }

/* ---------- top bar ---------- */
.topbar { position: relative; z-index: 51; height: var(--tb); background: var(--navy-900); color: #d3e0f2; font-size: .84rem }
.tb { display: flex; justify-content: space-between; align-items: center; height: 100%; gap: 1rem }
.tb a { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; color: inherit; transition: color .2s }
.tb-info { display: flex; align-items: center; gap: 1.4rem; min-width: 0 }
.tb-info a:hover { color: var(--sky) }
.tb-info svg { color: var(--sky) }
.tb-info span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.tb-social { display: flex; align-items: center; gap: .75rem }
.tb-label { opacity: .7; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase }
.social { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap }
.social li { display: flex; margin: 0; padding: 0; line-height: 0 }
.so,.tb .so { display: grid; place-items: center; flex: none; line-height: 0; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: var(--so,#076abb); border: 2px solid rgba(255,255,255,.85); box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: filter .25s,transform .25s var(--ease),box-shadow .25s }
.so-instagram,.tb .so-instagram { background: radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%) }
.so:hover,.tb .so:hover { color: #fff; filter: brightness(1.12); transform: translateY(-3px) scale(1.08); box-shadow: 0 6px 14px rgba(0,0,0,.3) }
.so svg { display: block; flex: none }
.social-sm .so { width: 28px; height: 28px }
.social-sm .so svg { width: 14px; height: 14px }
.social-lg .so { width: 42px; height: 42px }
.social-lg .so svg { width: 20px; height: 20px }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); transition: box-shadow .3s }
.site-header.scrolled { box-shadow: 0 8px 28px rgba(8,42,88,.12) }
.bar { display: flex; align-items: center; justify-content: space-between; height: 80px; gap: 1rem }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex: none }
.brand img { height: 56px !important; width: auto !important }
.brand-text { font: 800 1.2rem var(--f-head); color: var(--navy) }
.brand-text strong { color: var(--blue) }
.brand-mark { display: flex; color: var(--navy) }
.nav { display: flex; align-items: center; gap: .15rem }
.nav>a,.dd>a { position: relative; text-decoration: none; font-weight: 600; font-size: .95rem; color: var(--ink); padding: .55rem .85rem; transition: color .2s }
.nav>a::after,.dd>a::after { content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .15rem; height: 3px; border-radius: 3px; background: linear-gradient(90deg,var(--blue),var(--sky)); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease) }
.nav>a:hover,.dd>a:hover { color: var(--blue) }
.nav>a:hover::after,.dd>a:hover::after,.nav [aria-current=page]::after { transform: scaleX(1) }
.nav [aria-current=page] { color: var(--blue) }
.nav>a.btn { margin-left: .5rem; color: #fff; padding: .4rem 1.2rem }
.nav>a.btn:hover { color: #fff }
.nav>a.btn::after { display: none }
.nav-search { margin: 0 .4rem }
.nav-search input { border: 1px solid var(--line); border-radius: 999px; padding: .5rem 1rem; width: 150px; font: inherit; font-size: .9rem; background: var(--ice); color: var(--ink); transition: width .4s var(--ease),box-shadow .3s,border-color .2s }
.nav-search input:focus { width: 200px; outline: none; box-shadow: var(--ring); border-color: var(--blue); background: #fff }
.dd { position: relative; display: flex; align-items: center }
.dd-toggle { border: 0; background: none; cursor: pointer; font-size: 0; line-height: 0; color: var(--ink); display: grid; place-items: center; width: 26px; height: 26px; padding: 0; margin-left: -.55rem; border-radius: 50%; transition: transform .3s var(--ease) }
.dd-toggle::before { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-1px) rotate(45deg) }
.dd.open .dd-toggle,.dd:hover .dd-toggle { transform: rotate(180deg); color: var(--blue) }
.dd-menu { position: absolute; top: calc(100% + 10px); left: -.5rem; min-width: 260px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--blue); border-radius: 0 0 var(--r-md) var(--r-md); box-shadow: var(--shadow-lg); padding: .5rem; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s,transform .3s var(--ease),visibility .25s }
.dd::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px }
.dd:hover .dd-menu,.dd:focus-within .dd-menu,.dd.open .dd-menu { opacity: 1; visibility: visible; transform: none }
.dd-menu a { padding: .6rem .9rem; text-decoration: none; border-radius: 10px; font-size: .92rem; font-weight: 500; transition: background .2s,color .2s,padding .25s var(--ease) }
.dd-menu a:hover { background: var(--ice); color: var(--blue); padding-left: 1.15rem }
.burger { display: none; background: var(--navy); border: 0; width: 46px; height: 46px; border-radius: 12px; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px }
.burger span { height: 2px; width: 20px; background: #fff; border-radius: 2px; display: block; transition: transform .3s var(--ease),opacity .2s }
.burger[aria-expanded=true] span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
.burger[aria-expanded=true] span:nth-child(2) { opacity: 0 }
.burger[aria-expanded=true] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }
@media(max-width: 1020px) {
    .bar { height: 70px }
    .brand img { height: 48px !important }
    .burger { display: flex }
    .nav { position: fixed; top: 100px; left: .75rem; right: .75rem; max-height: calc(100svh - 110px); background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg); flex-direction: column; align-items: stretch; gap: 0; padding: .7rem; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .25s,transform .3s var(--ease),visibility .25s }
    .nav.open { opacity: 1; visibility: visible; transform: none }
    .nav>a,.dd>a { padding: .85rem 1rem; font-size: 1.02rem; border-radius: 10px }
    .nav>a::after,.dd>a::after { display: none }
    .nav>a:hover,.dd>a:hover,.nav [aria-current=page] { background: var(--ice) }
    .dd { flex-wrap: wrap }
    .dd>a { flex: 1 }
    .dd-toggle { width: 46px; height: 46px; margin: 0 }
    .dd-menu { position: static; display: none; width: 100%; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: var(--ice); border: 0; border-radius: 12px; margin-bottom: .3rem }
    .dd:hover .dd-menu { display: none }
    .dd.open .dd-menu { display: flex }
    .dd::after { display: none }
    .nav-search { order: -1; margin: 0 0 .5rem }
    .nav-search input,.nav-search input:focus { width: 100% }
    .nav>a.btn { margin: .6rem 0 0; padding: .7rem 1.2rem }
}

/* ---------- home banner (1920x800, never cropped) ---------- */
.banner { position: relative; width: 100%; margin: 0; background: var(--navy-900); overflow: hidden; container-type: inline-size }
.banner-track { display: grid }
.banner-slide { grid-area: 1/1; display: block; position: relative; width: 100%; aspect-ratio: 1920/800; opacity: 0; visibility: hidden; transition: opacity .8s,visibility 0s .8s; color: inherit; text-decoration: none }
.banner-slide.on { opacity: 1; visibility: visible; transition: opacity .8s,visibility 0s }
.banner-slide picture,.banner-slide img { display: block; width: 100%; height: 100% }
.banner-slide img { object-fit: cover; -webkit-user-drag: none; user-select: none }
/* fallback slide (no image): navy field with the logo's roof + parallelogram motif */
.banner-slide.txt { display: grid; align-items: center; padding: 0 8cqw; color: #fff; overflow: hidden; background: linear-gradient(115deg,var(--navy-900) 0%,var(--navy) 55%,#0a5aa8 135%) }
.banner-slide.txt::before { content: ""; position: absolute; right: -6cqw; top: -8%; width: 52cqw; height: 116%; background: linear-gradient(160deg,rgba(133,218,247,.20),rgba(133,218,247,.02)); clip-path: polygon(34% 0,100% 0,100% 100%,0 100%); pointer-events: none }
.banner-slide.txt::after { content: ""; position: absolute; right: 17cqw; bottom: 14cqw; width: 15cqw; height: 5.4cqw; background: linear-gradient(135deg,#a6e6fa,var(--sky)); clip-path: polygon(24% 0,100% 0,76% 100%,0 100%); pointer-events: none; box-shadow: 0 0 0 1px rgba(255,255,255,.3) }
.banner-copy { position: relative; z-index: 1; display: grid; gap: 1.3cqw; justify-items: start; max-width: 58% }
.banner-copy strong { font: 800 4cqw/1.08 var(--f-head); letter-spacing: -.03em; color: #fff }
.banner-copy .bs { font: 600 1.9cqw/1.35 var(--f-head); color: var(--sky) }
.banner-copy .bd { font-size: 1.35cqw; line-height: 1.6; color: rgba(255,255,255,.8) }
.banner-copy .btn { font-size: 1.3cqw; padding: .9cqw 2.2cqw; margin-top: .6cqw; min-height: 0 }
.banner-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer; color: var(--navy); font-size: 1.05rem; background: rgba(255,255,255,.9); box-shadow: var(--shadow-md); transition: background .25s,color .25s,transform .25s var(--ease) }
.banner-arrow:hover { background: var(--blue); color: #fff; transform: translateY(-50%) scale(1.08) }
.banner-arrow.prev { left: 16px }
.banner-arrow.next { right: 16px }
.banner-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2; display: flex; justify-content: center; gap: .5rem }
.banner-dots button { height: 8px; width: 8px; border-radius: 999px; border: 0; padding: 0; cursor: pointer; background: rgba(255,255,255,.55); transition: width .4s var(--ease),background .3s }
.banner-dots button[aria-current=true] { width: 30px; background: var(--sky) }
@media(max-width: 700px) {
    :root { --tb: 38px }
    .banner-arrow { width: 34px; height: 34px; font-size: .8rem }
    .banner-arrow.prev { left: 6px }
    .banner-arrow.next { right: 6px }
    .banner-dots { bottom: 8px }
    .banner-slide.txt { aspect-ratio: auto; min-height: 230px; padding: 1.8rem 1.2rem 2.6rem }
    .banner-slide.txt::before { width: 70%; opacity: .6 }
    .banner-slide.txt::after { right: 6%; bottom: 8%; width: 70px; height: 26px }
    .banner-copy { max-width: 100%; gap: .55rem }
    .banner-copy strong { font-size: 1.5rem }
    .banner-copy .bs { font-size: 1rem }
    .banner-copy .bd { font-size: .86rem }
    .banner-copy .btn { font-size: .86rem; padding: .55rem 1.2rem }
}

/* ---------- sections ---------- */
.sec { padding: clamp(3rem,7vw,5.5rem) 0 }
.sec.wrap { padding-inline: 0 }
.sec-alt { background: var(--ice); border-block: 1px solid var(--line) }
.sec-dark { background: var(--navy); color: #fff }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 2.2rem; flex-wrap: wrap }
.sec-head h2,.why h2 { margin: 0 }
.sec-head h2::after,.why h2::after,.intro h2::after { content: ""; display: block; width: 64px; height: 4px; margin-top: .8rem; border-radius: 4px; background: linear-gradient(90deg,var(--blue),var(--sky)) }
.intro,.two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,5vw,4.5rem); align-items: start }
.intro h2 { font-size: clamp(1.8rem,3.6vw,2.9rem); letter-spacing: -.03em }
.intro p { color: var(--ink-2); font-size: 1.05rem }
@media(max-width: 820px) { .intro,.two { grid-template-columns: 1fr } }

/* ---------- page header ---------- */
.page-head { position: relative; overflow: hidden; margin: 0; padding: clamp(2rem,4.5vw,3.4rem) 0; color: #fff; background: linear-gradient(115deg,var(--navy-900),var(--navy) 60%,#0a5aa8 140%) }
.page-head::before { content: ""; position: absolute; right: -4%; top: -30%; width: 42%; height: 170%; background: linear-gradient(160deg,rgba(133,218,247,.18),rgba(133,218,247,.02)); clip-path: polygon(34% 0,100% 0,100% 100%,0 100%); pointer-events: none }
.page-head::after { content: ""; position: absolute; right: 12%; bottom: 22%; width: 120px; height: 42px; background: var(--sky); clip-path: polygon(24% 0,100% 0,76% 100%,0 100%); opacity: .9; pointer-events: none }
.page-head>.wrap { position: relative; z-index: 1 }
.page-head h1 { margin: .5rem 0 .3rem; font-size: clamp(1.8rem,3.8vw,2.9rem); color: #fff }
.page-head p { margin: 0; color: var(--sky-l); max-width: 60ch }
.crumbs { display: flex; flex-wrap: wrap; gap: .2rem .5rem; font-size: .86rem; color: rgba(255,255,255,.7) }
.crumbs a { text-decoration: none; font-weight: 600 }
.crumbs a:hover { color: var(--sky) }
.crumbs a::after { content: "/"; margin-left: .5rem; opacity: .5 }
.crumbs span { color: #fff; font-weight: 600 }
.page-head.slim { padding: .9rem 0; color: var(--ink); background: #fff; border-bottom: 1px solid var(--line) }
.page-head.slim::before,.page-head.slim::after { display: none }
.page-head.slim .crumbs { color: var(--muted) }
.page-head.slim .crumbs a:hover { color: var(--blue) }
.page-head.slim .crumbs span { color: var(--navy) }
.page-head.slim+.sec,.page-head.slim+section { padding-top: 2.5rem }

/* ---------- cards (shared) ---------- */
.panel,.pcard,.ccard,.why li,.faq,.bento>*,.tile,.gmain,.specs,.empty,.filters { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); position: relative }

/* categories */
.catgrid { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 1rem }
.catgrid.big { grid-template-columns: repeat(auto-fill,minmax(310px,1fr)) }
.ccard { display: flex; gap: 1rem; align-items: center; padding: .8rem; border-radius: var(--r-md); text-decoration: none; transition: transform .35s var(--ease),box-shadow .3s,border-color .3s }
.ccard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--blue) }
.ccard img { width: 104px; height: 104px; object-fit: cover; border-radius: 12px; background: var(--ice); flex: none }
.ccard strong { display: block; font: 700 1.05rem/1.25 var(--f-head); color: var(--navy) }
.ccard small { color: var(--muted); display: block; margin-top: .15rem }
.ccard em { display: block; font-style: normal; font-size: .86rem; color: var(--ink-2); margin-top: .35rem }
.ccard:not(:has(img)) { padding: 1.1rem 1rem 1.1rem 1.3rem; border-left: 4px solid var(--blue) }
.ccard:not(:has(img))::after { content: "\203A"; margin-left: auto; flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--ice); color: var(--blue); font: 700 1.5rem/1 var(--f-head); transition: transform .3s var(--ease),background .25s,color .25s }
.ccard:hover::after { transform: translateX(4px); background: var(--blue); color: #fff }

/* products */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 1.4rem }
.pcard { border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; transition: transform .35s var(--ease),box-shadow .3s,border-color .3s }
.pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: #b9d3ec }
.pcard-img { aspect-ratio: 1; display: block; background: linear-gradient(160deg,#fff,var(--ice)); overflow: hidden; border-bottom: 1px solid var(--line) }
.pcard-img img { width: 100%; height: 100%; object-fit: contain; padding: 1rem; transition: transform .5s var(--ease) }
.pcard:hover .pcard-img img { transform: scale(1.06) }
.pcard-body { padding: 1.05rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .45rem; flex: 1 }
.pcard-body h3 { margin: 0; overflow-wrap: anywhere }
.pcard-body h3 a { text-decoration: none }
.pcard-body h3 a:hover { color: var(--blue) }
.pcard-body h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1 }
.pcard-body p { margin: 0; color: var(--ink-2); font-size: .9rem; flex: 1 }
.pcard-actions { display: flex; gap: .5rem; margin-top: .7rem; position: relative; z-index: 2 }
.pcard-actions .btn { flex: 1 1 0; min-width: 0; padding: .4rem .5rem; font-size: .84rem; white-space: nowrap; box-shadow: none }
.tag { display: inline-block; align-self: flex-start; font: 700 .76rem var(--f-head); letter-spacing: .02em; color: var(--blue); background: var(--ice); border: 1px solid #cfe3f5; padding: .2rem .65rem; border-radius: 8px; text-decoration: none }
a.tag:hover { background: var(--blue); border-color: var(--blue); color: #fff }

/* why us */
.why h2 { margin-bottom: 2.2rem }
.bento,.why ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem }
.bento { grid-template-columns: repeat(4,1fr) }
.why ul { grid-template-columns: repeat(auto-fit,minmax(220px,1fr)) }
.bento>*:nth-child(1) { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; color: #fff; border: 0; background: linear-gradient(150deg,var(--navy) 0%,var(--navy-900) 70%); overflow: hidden }
.bento>*:nth-child(1)::after { content: ""; position: absolute; right: -30px; bottom: -30px; width: 55%; height: 60%; background: linear-gradient(160deg,rgba(133,218,247,.22),rgba(133,218,247,0)); clip-path: polygon(40% 0,100% 0,100% 100%,0 100%); pointer-events: none }
.bento>*:nth-child(4) { grid-column: span 2 }
.why li,.bento>* { padding: 1.6rem; border-radius: var(--r-lg); transition: transform .35s var(--ease),box-shadow .3s,border-color .3s }
.why li:hover,.bento>*:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: #b9d3ec }
.bento>*:nth-child(1):hover { border-color: transparent }
.why li strong,.bento strong { display: block; font: 700 1.2rem var(--f-head); margin: 1rem 0 .4rem; color: var(--navy); letter-spacing: -.015em }
.why li span,.bento span:not(.ico) { color: var(--ink-2); display: block }
.ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; position: relative; background: var(--ice); color: var(--blue); border: 1px solid #cfe3f5; transition: transform .35s var(--ease),background .25s,color .25s }
.bento>*:hover .ico { transform: scale(1.08) rotate(-4deg); background: var(--blue); color: #fff }
.ico svg { width: 26px; height: 26px; position: absolute; left: 50%; top: 50%; translate: -50% -50% }
.bento>*:nth-child(1) .ico { margin-bottom: auto; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: var(--sky) }
.bento>*:nth-child(1) strong { color: #fff; font-size: clamp(1.5rem,2.6vw,2.1rem); letter-spacing: -.03em; position: relative; z-index: 1 }
.bento>*:nth-child(1) span:not(.ico) { color: rgba(255,255,255,.8); position: relative; z-index: 1 }
@media(max-width: 900px) { .bento { grid-template-columns: 1fr 1fr } .bento>*:nth-child(1) { grid-column: span 2; grid-row: auto } .bento>*:nth-child(4) { grid-column: span 2 } }
@media(max-width: 520px) { .bento { grid-template-columns: 1fr } .bento>*:nth-child(n) { grid-column: auto } }

/* faq */
.faq { border-radius: var(--r-md); padding: 0; margin-bottom: .8rem; overflow: hidden; transition: border-color .3s,box-shadow .3s }
.faq:hover { border-color: #b9d3ec }
.faq[open] { border-left: 4px solid var(--blue); box-shadow: var(--shadow-md) }
.faq summary { cursor: pointer; font: 700 1.05rem var(--f-head); color: var(--navy); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 1.4rem }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: "+"; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ice); color: var(--blue); font-size: 1.3rem; line-height: 1; transition: transform .35s var(--ease),background .25s,color .25s }
.faq[open] summary::after { transform: rotate(135deg); background: var(--blue); color: #fff }
.faq p { margin: 0; padding: 0 1.4rem 1.3rem; color: var(--ink-2) }

/* filters / pager / empty */
.filters { display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: 2rem; padding: .7rem; border-radius: var(--r-md) }
.filters input,.filters select { flex: 1 1 180px; min-height: 46px; padding: .5rem 1rem; border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; color: var(--ink); background: var(--ice); transition: box-shadow .25s,border-color .2s,background .2s }
.filters input:focus,.filters select:focus { outline: none; box-shadow: var(--ring); border-color: var(--blue); background: #fff }
.pager { display: flex; gap: .5rem; justify-content: center; margin-top: 2.8rem; flex-wrap: wrap }
.pager a,.pager span { min-width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; text-decoration: none; font-weight: 700; background: #fff; color: var(--navy); border: 1px solid var(--line); transition: transform .25s var(--ease),border-color .2s,color .2s }
.pager a:hover { transform: translateY(-3px); border-color: var(--blue); color: var(--blue) }
.pager span { background: var(--navy); color: #fff; border-color: var(--navy) }
.empty { text-align: center; padding: 3rem 1.4rem; color: var(--ink-2); border-radius: var(--r-lg) }

/* product detail */
.pd { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: clamp(1.5rem,5vw,4rem); align-items: start }
@media(max-width: 820px) { .pd { grid-template-columns: 1fr } }
.gmain { aspect-ratio: 1; border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(160deg,#fff,var(--ice)) }
.gmain img { width: 100%; height: 100%; object-fit: contain; padding: 1.2rem; transition: transform .5s var(--ease) }
.gmain:hover img { transform: scale(1.04) }
.gthumbs { display: flex; gap: .6rem; margin-top: .8rem; flex-wrap: wrap }
.gthumbs button { width: 76px; height: 76px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; transition: transform .25s var(--ease),border-color .2s }
.gthumbs button:hover { transform: translateY(-3px); border-color: var(--blue) }
.gthumbs img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px }
.lead { font-size: 1.1rem; color: var(--ink-2) }
.specs { margin: 1.5rem 0; border-radius: var(--r-md); padding: .3rem 1.3rem }
.specs div { display: grid; grid-template-columns: 40% 1fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line) }
.specs div:last-child { border: 0 }
.specs dt { color: var(--muted) }
.specs dd { margin: 0; font-weight: 600; color: var(--navy) }
.pcta { display: flex; gap: .8rem; flex-wrap: wrap }
.pinfo h1 { font-size: clamp(1.8rem,3.4vw,2.7rem); margin-top: .7rem }

/* forms */
.panel { border-radius: var(--r-lg); padding: clamp(1.3rem,3vw,2.2rem); box-shadow: var(--shadow-md) }
.enq { display: grid; gap: 1rem; position: relative }
.enq label { display: grid; gap: .4rem; font-weight: 700; font-size: .9rem; font-family: var(--f-head); color: var(--navy) }
.enq input,.enq textarea { font: 400 1rem var(--f-body); color: var(--ink); padding: .8rem 1rem; border: 1px solid #cddcee; border-radius: var(--r-sm); background: #fbfdff; width: 100%; transition: box-shadow .25s,border-color .2s,background .2s }
.enq input:focus,.enq textarea:focus { outline: none; box-shadow: var(--ring); border-color: var(--blue); background: #fff }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem }
@media(max-width: 560px) { .row2 { grid-template-columns: 1fr } }
.enq-product { margin: 0; font-size: .9rem }
.enq-msg:empty { display: none }
.enq-msg,.enq-flash { padding: .85rem 1.1rem; border-radius: var(--r-sm); font-size: .92rem }
.ok { background: #dff5ea; color: #0d5c42 }
.err { background: #fde5e5; color: #8e1b1b }
.enq-flash { margin-bottom: 1rem }
.enq .btn { justify-self: start }
.map { width: 100%; height: 280px; border: 0; border-radius: var(--r-md); margin-top: 1rem }
.map.placeholder { display: grid; place-items: center; background: var(--ice); border: 1px dashed #b4cce4; color: var(--muted); text-align: center; padding: 1rem; font-size: .9rem }
.contact-list p { margin: 0 0 1.1rem }
.contact-list a { font-weight: 600; color: var(--blue); text-decoration: none }
.contact-list a:hover { color: var(--navy) }
.prose h2 { font-size: 1.35rem; margin-top: 2rem }
.prose p,.prose li { color: var(--ink-2) }

/* cta band */
.cta-band { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3rem); align-items: center; padding: clamp(1.6rem,4vw,3.2rem); border-radius: 28px; color: #fff; background: linear-gradient(120deg,var(--navy-900),var(--navy) 65%,#0a5aa8 140%); box-shadow: var(--shadow-lg) }
.cta-band::before { content: ""; position: absolute; left: 36%; top: -20%; width: 40%; height: 150%; background: linear-gradient(160deg,rgba(133,218,247,.12),rgba(133,218,247,0)); clip-path: polygon(34% 0,100% 0,100% 100%,0 100%); pointer-events: none }
.cta-band>* { position: relative }
.cta-band h2 { color: #fff }
.cta-band p { color: rgba(255,255,255,.82) }
.cta-band .btn-line { background: transparent; color: #fff; border-color: rgba(255,255,255,.5) }
.cta-band .btn-line:hover { background: #fff; color: var(--navy); border-color: #fff }
.cta-band .btn-accent { background: var(--sky); color: var(--navy); box-shadow: 0 8px 22px rgba(133,218,247,.35) }
.cta-band .btn-accent:hover { background: #fff }
.cta-band .panel { background: #fff; color: var(--ink); border: 0 }
.cta-band .panel .btn-accent { background: linear-gradient(180deg,#0a7ad8,var(--blue)); color: #fff; box-shadow: 0 8px 20px rgba(7,106,187,.32) }
.cta-band .panel .btn-accent:hover { background: linear-gradient(180deg,var(--blue),var(--blue-d)); color: #fff }
@media(max-width: 820px) { .cta-band { grid-template-columns: 1fr } }

/* ---------- footer ---------- */
.site-footer { position: relative; overflow: hidden; margin: clamp(3rem,6vw,5rem) 0 0; padding: clamp(2.6rem,5vw,4rem) 0 1.3rem; color: #c3d3ea; background: linear-gradient(180deg,var(--navy),var(--navy-900)) }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg,var(--blue),var(--sky)) }
.site-footer::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 420px; height: 320px; background: linear-gradient(160deg,rgba(133,218,247,.10),rgba(133,218,247,0)); clip-path: polygon(34% 0,100% 0,100% 100%,0 100%); pointer-events: none }
.site-footer .wrap { position: relative; z-index: 1 }
.fgrid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 2.2rem }
@media(max-width: 820px) { .fgrid { grid-template-columns: 1fr 1fr } }
@media(max-width: 520px) { .fgrid { grid-template-columns: 1fr } }
.site-footer h2 { font-size: .95rem; color: #fff; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 1rem }
.site-footer h2::after { content: ""; display: block; width: 28px; height: 3px; margin-top: .55rem; border-radius: 3px; background: var(--sky) }
.site-footer p { margin: 0 0 .6rem }
.site-footer a { display: block; text-decoration: none; padding: .22rem 0; transition: transform .25s var(--ease),color .2s }
.site-footer a:hover { color: var(--sky); transform: translateX(5px) }
.site-footer .brand-text { color: #fff; font-size: 1.3rem }
.fbar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem; margin-top: 2.6rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .86rem }
.fbar a { display: inline }
.fbar a:hover { transform: none }
.logo-chip { display: inline-flex; background: #fff; border-radius: 14px; padding: .6rem 1rem; margin-bottom: 1rem; box-shadow: 0 6px 18px rgba(0,0,0,.2) }
.logo-chip img { height: 48px; width: auto }
.site-footer .so { display: grid; padding: 0; color: #fff }
.site-footer .so:hover { color: var(--navy); transform: translateY(-3px) }
.site-footer .f-follow { margin: 1.3rem 0 .7rem; font: 700 .78rem var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: #fff }
@media(max-width: 700px) { .site-footer { padding-bottom: 5.5rem } .tb-mail,.tb-social { display: none } .tb { font-size: .8rem; justify-content: center } }

/* floating buttons */
.float-btns { position: fixed; right: max(16px,env(safe-area-inset-right)); bottom: max(16px,env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; z-index: 60 }
.fb { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 10px 24px rgba(6,28,61,.3); transition: transform .3s var(--ease),box-shadow .3s }
.fb:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 14px 30px rgba(6,28,61,.38) }
.fb-wa { background: #1fa855 }
.fb-call { background: linear-gradient(180deg,#0a7ad8,var(--blue)) }

/* ---------- motion ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(28px) }
.js [data-reveal].in { opacity: 1; transform: none; transition: opacity .6s,transform .7s var(--ease); transition-delay: var(--rd,0s) }
@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important }
    .js [data-reveal] { opacity: 1; transform: none }
}
/* ---------- full-width map ---------- */
.map-full { width: 100%; margin-top: clamp(1rem,3vw,2rem); margin-bottom: calc(-1 * clamp(3rem,6vw,5rem)); line-height: 0; background: var(--ice) }
.map-full iframe { display: block; width: 100%; border: 0 }
.map-home iframe { height: 100vh; height: 100svh; min-height: 420px }
.map-contact iframe { height: 70vh; min-height: 380px }
@media(max-width: 700px) { .map-home iframe { height: 75svh } .map-contact iframe { height: 60svh } }