/* ==========================================================================
   ELECTROSUN — Premium theme on Bootstrap 5.3
   Brand colours taken from the logo: deep navy + solar gold/orange.
   ========================================================================== */
:root{
  --navy-950:#060F20;
  --navy-900:#0B1B36;
  --navy-800:#10264A;
  --navy-700:#1A3563;
  --navy:#1B3358;
  --gold:#F7B51C;
  --gold-2:#FFD35A;
  --orange:#EE8416;
  --grad-gold:linear-gradient(135deg,#FFC83D 0%,#F7A21B 50%,#EE7F12 100%);
  --grad-navy:linear-gradient(135deg,#0B1B36 0%,#16305A 100%);
  --ink:#0E1726;
  --text:#4A5568;
  --muted:#6B7686;
  --paper:#F4F6FA;
  --paper-2:#EAEEF5;
  --line:#E1E6EE;
  --white:#fff;
  --wa:#1FAF55;
  --radius:18px;
  --radius-lg:28px;
  --shadow-sm:0 2px 6px rgba(11,27,54,.06);
  --shadow:0 18px 40px -18px rgba(11,27,54,.22);
  --shadow-lg:0 40px 80px -30px rgba(11,27,54,.35);
  --font-head:'Outfit','Manrope',system-ui,sans-serif;
  --font-body:'Manrope',system-ui,sans-serif;

  --bs-body-font-family:var(--font-body);
  --bs-body-color:var(--text);
  --bs-body-bg:var(--paper);
  --bs-link-color:var(--navy-700);
  --bs-link-hover-color:var(--orange);
  --bs-border-radius:12px;
}

html{ scroll-behavior:smooth; overflow-x:hidden; overflow-x:clip; }
body{ font-family:var(--font-body); color:var(--text); background:var(--paper); font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,h5{ font-family:var(--font-head); color:var(--navy-900); font-weight:700; letter-spacing:-.02em; line-height:1.15; }
h2{ font-size:clamp(1.8rem,3.2vw,2.75rem); margin-bottom:.6rem; }
h3{ font-size:1.2rem; }
p{ color:var(--text); }
a{ text-decoration:none; transition:color .2s ease; }
img{ max-width:100%; }
::selection{ background:var(--gold); color:var(--navy-900); }
:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.skip-link{ position:absolute; z-index:2000; left:16px; top:10px; background:var(--gold); color:var(--navy-900); padding:8px 14px; border-radius:8px; font-weight:700; }
.container{ max-width:1320px; }
@media (max-width:575.98px){ .container{ padding-left:16px; padding-right:16px; } }

.text-grad{ background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- Buttons ---------- */
.btn{ font-family:var(--font-head); font-weight:600; letter-spacing:.01em; border-radius:999px; padding:.72rem 1.5rem; display:inline-flex; align-items:center; justify-content:center; gap:.55rem; transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease; border-width:2px; }
.btn-lg{ padding:.95rem 1.9rem; font-size:1.02rem; }
.btn:hover{ transform:translateY(-2px); }
.btn i{ font-size:.95em; }
.btn .fa-arrow-right{ transition:transform .25s ease; }
.btn:hover .fa-arrow-right{ transform:translateX(4px); }
.btn-brand{ background:var(--grad-gold); color:var(--navy-900); border-color:transparent; box-shadow:0 12px 28px -12px rgba(238,132,22,.75); }
.btn-brand:hover,.btn-brand:focus{ color:var(--navy-900); box-shadow:0 18px 36px -12px rgba(238,132,22,.85); background:linear-gradient(135deg,#FFD35A 0%,#F7A21B 60%,#EE7F12 100%); }
.btn-navy{ background:var(--navy-900); color:#fff; border-color:var(--navy-900); box-shadow:0 12px 26px -14px rgba(11,27,54,.8); }
.btn-navy:hover,.btn-navy:focus{ background:var(--navy-700); border-color:var(--navy-700); color:#fff; }
.btn-outline-navy{ border-color:var(--navy-900); color:var(--navy-900); background:transparent; }
.btn-outline-navy:hover{ background:var(--navy-900); color:#fff; }
.btn-glass{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.4); backdrop-filter:blur(8px); }
.btn-glass:hover,.btn-glass:focus{ background:#fff; color:var(--navy-900); border-color:#fff; }
.btn-white{ background:#fff; color:var(--navy-900); border-color:#fff; }
.btn-white:hover{ background:var(--navy-900); color:#fff; border-color:var(--navy-900); }
.btn-soft{ background:var(--paper-2); color:var(--navy-900); border-color:transparent; }
.btn-soft:hover{ background:var(--navy-900); color:#fff; }
.btn-wa{ background:var(--wa); color:#fff; border-color:var(--wa); }
.btn-wa:hover,.btn-wa:focus{ background:#178f45; border-color:#178f45; color:#fff; }

/* ---------- Eyebrow / section heads ---------- */
.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-head); font-size:.8rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--orange); margin-bottom:14px; }
.eyebrow::before{ content:""; width:28px; height:2px; background:var(--grad-gold); border-radius:2px; }
.eyebrow-dark{ color:var(--navy-900); }
.eyebrow-dark::before{ background:var(--navy-900); }
.eyebrow-light{ color:var(--gold); }
.section{ padding:110px 0; position:relative; }
@media (max-width:767.98px){ .section{ padding:72px 0; } }
.section-white{ background:#fff; }
.section-head{ margin-bottom:52px; max-width:760px; }
.section-head.d-lg-flex{ max-width:none; }
.section-head p{ font-size:1.05rem; max-width:60ch; margin-bottom:0; }
.lead-sm{ font-size:1.1rem; color:var(--ink); opacity:.85; }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ==========================================================================
   TOP BAR + HEADER
   ========================================================================== */
.topbar{ background:var(--navy-950); color:rgba(255,255,255,.72); font-size:.86rem; }
.topbar .container{ min-height:44px; }
.topbar-info{ display:flex; gap:28px; list-style:none; margin:0; padding:0; }
.topbar-info li, .topbar-info a{ display:inline-flex; align-items:center; gap:8px; color:rgba(255,255,255,.75); }
.topbar-info a:hover{ color:var(--gold); }
.topbar i{ color:var(--gold); }
.topbar-tag{ display:inline-flex; align-items:center; gap:8px; font-weight:600; color:rgba(255,255,255,.85); }
.topbar-social{ display:flex; gap:6px; }
.topbar-social a{ width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; background:rgba(255,255,255,.08); font-size:.8rem; }
.topbar-social a i{ color:inherit; }
.topbar-social a:hover{ background:var(--gold); color:var(--navy-900); }

.site-header{ background:rgba(255,255,255,.98); border-bottom:1px solid rgba(11,27,54,.06); transition:box-shadow .3s ease, background .3s ease; z-index:1030; }
.site-header::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:var(--grad-gold); transform:scaleX(0); transform-origin:left; transition:transform .5s ease; }
@media (min-width:992px){ .site-header{ background:rgba(255,255,255,.94); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); } }
.site-header.is-scrolled{ box-shadow:0 14px 40px -18px rgba(11,27,54,.35); background:rgba(255,255,255,.98); }
.site-header.is-scrolled::after{ transform:scaleX(1); }
.site-header .navbar{ padding:14px 0; transition:padding .3s ease; }
.site-header.is-scrolled .navbar{ padding:8px 0; }

/* BIG LOGO */
.brand{ padding:0; margin-right:1.5rem; display:flex; align-items:center; }
.brand img{ height:84px; width:auto; display:block; transition:height .3s ease; }
.site-header.is-scrolled .brand img{ height:66px; }
@media (max-width:1199.98px){ .brand img{ height:74px; } .site-header.is-scrolled .brand img{ height:60px; } }
@media (max-width:991.98px){ .brand img{ height:64px; } .site-header.is-scrolled .brand img{ height:56px; } .site-header .navbar{ padding:10px 0; } }
@media (max-width:400px){ .brand img{ height:54px; } .site-header.is-scrolled .brand img{ height:50px; } }

.main-nav{ gap:4px; }
.main-nav .nav-link{ font-family:var(--font-head); font-weight:600; font-size:1.02rem; color:var(--navy-900); padding:.6rem 1.05rem !important; border-radius:999px; position:relative; display:flex; align-items:center; gap:10px; }
.main-nav .nav-link > i{ display:none; }
.main-nav .nav-link::after{ border:none; }
.main-nav .dropdown-toggle::after{ content:"\f107"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:.75em; margin-left:.35rem; vertical-align:0; transition:transform .25s ease; display:inline-block; }
.main-nav .dropdown.show .dropdown-toggle::after, .main-nav .dropdown-toggle.show::after{ transform:rotate(180deg); }
.main-nav .nav-link:hover{ color:var(--orange); }
.main-nav .nav-link.active{ color:var(--navy-900); }
@media (min-width:992px){
  .main-nav .nav-link::before{ content:""; position:absolute; left:1.05rem; right:1.05rem; bottom:4px; height:3px; border-radius:3px; background:var(--grad-gold); transform:scaleX(0); transition:transform .3s ease; }
  .main-nav .nav-link:hover::before, .main-nav .nav-link.active::before{ transform:scaleX(1); }
}
.mega-drop{ border:0; border-radius:18px; padding:10px; min-width:300px; box-shadow:var(--shadow-lg); margin-top:12px !important; }
@media (min-width:992px){
  .mega-drop{ display:block; opacity:0; visibility:hidden; transform:translateY(10px); transition:all .25s ease; }
  .mega-drop.show{ opacity:1; visibility:visible; transform:none; }
  .main-nav .dropdown::after{ content:""; position:absolute; left:0; right:0; top:100%; height:16px; }
}
.mega-drop .dropdown-item{ display:flex; align-items:center; gap:12px; padding:.62rem .9rem; border-radius:12px; font-weight:600; color:var(--navy-900); font-size:.95rem; }
.mega-drop .dropdown-item i{ width:32px; height:32px; flex:none; border-radius:10px; background:var(--paper); display:inline-flex; align-items:center; justify-content:center; color:var(--orange); font-size:.9rem; transition:all .2s ease; }
.mega-drop .dropdown-item:hover, .mega-drop .dropdown-item:focus{ background:var(--paper); color:var(--navy-900); }
.mega-drop .dropdown-item:hover i{ background:var(--grad-gold); color:var(--navy-900); }
.mega-drop .dropdown-item.all{ color:var(--orange); }
.mega-drop .dropdown-item.all i{ background:transparent; width:auto; height:auto; }

.header-cta{ display:flex; align-items:center; gap:18px; }
.call-pill, .call-inline{ display:flex; align-items:center; gap:12px; color:var(--navy-900); }
.call-ic{ width:48px; height:48px; border-radius:50%; background:var(--paper); display:inline-flex; align-items:center; justify-content:center; color:var(--orange); font-size:1.1rem; position:relative; transition:all .25s ease; flex:none; }
.call-ic::after{ content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid rgba(247,181,28,.45); animation:pulse 2.2s ease-out infinite; }
@keyframes pulse{ 0%{ transform:scale(.85); opacity:1; } 100%{ transform:scale(1.35); opacity:0; } }
.call-txt, .call-inline > span:last-child{ display:flex; flex-direction:column; line-height:1.25; }
.call-pill small, .call-inline small{ font-size:.74rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.08em; }
.call-pill strong, .call-inline strong{ font-family:var(--font-head); font-size:1.08rem; color:var(--navy-900); }
.call-pill:hover .call-ic, .call-inline:hover .call-ic{ background:var(--grad-gold); color:var(--navy-900); }

/* burger */
.nav-burger{ border:0; width:50px; height:50px; border-radius:14px; background:var(--navy-900); display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:0; box-shadow:0 10px 22px -12px rgba(11,27,54,.8); }
.nav-burger:focus{ box-shadow:0 0 0 3px rgba(247,181,28,.5); }
.nav-burger span{ display:block; height:2.5px; width:22px; border-radius:2px; background:#fff; transition:width .25s ease; }
.nav-burger span:nth-child(2){ width:16px; background:var(--gold); margin-left:6px; }
.nav-burger:hover span:nth-child(2){ width:22px; margin-left:0; }

/* offcanvas (mobile) */
.main-offcanvas{ --bs-offcanvas-width:min(88vw,380px); }
.offcanvas-logo{ height:58px; width:auto; }
.nav-close{ margin-left:auto; flex:none; width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:var(--paper); color:var(--navy-900); display:inline-flex; align-items:center; justify-content:center; transition:transform .3s ease, background .2s ease; }
.nav-close:hover{ background:var(--navy-900); color:#fff; transform:rotate(90deg); }
@media (max-width:991.98px){
  .main-offcanvas .offcanvas-header{ border-bottom:1px solid var(--line); padding:18px 20px; }
  .main-offcanvas .offcanvas-body{ display:flex; flex-direction:column; padding:18px 20px 28px; }
  .main-nav .nav-link{ padding:.9rem 1rem !important; border-radius:14px; font-size:1.05rem; }
  .main-nav .nav-link > i{ display:inline-flex; width:22px; color:var(--orange); }
  .main-nav .nav-link.active{ background:var(--grad-gold); color:var(--navy-900); box-shadow:0 10px 22px -12px rgba(238,132,22,.7); }
  .main-nav .nav-link.active > i{ color:var(--navy-900); }
  .main-nav .dropdown-toggle::after{ margin-left:auto; }
  .mega-drop{ box-shadow:none; background:var(--paper); margin:6px 0 !important; min-width:0; }
  .header-cta{ margin-top:22px; padding-top:22px; border-top:1px solid var(--line); }
  .header-cta .btn{ width:100%; padding:.9rem; }
  .offcanvas-contact{ margin-top:12px; }
  .offcanvas-contact p{ margin-top:18px; font-size:.9rem; color:var(--muted); display:flex; gap:10px; }
  .offcanvas-contact p i{ color:var(--orange); margin-top:5px; }
}

/* ==========================================================================
   HERO CAROUSEL
   ========================================================================== */
.hero{ position:relative; background:var(--navy-950); }
.hero-carousel .hero-slide{ position:relative; min-height:clamp(620px, calc(100vh - 150px), 820px); overflow:hidden; background:var(--navy-950); }
.hero-carousel .carousel-item{ transition:opacity .9s ease-in-out; }
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.14); transition:transform 7.5s ease-out; }
.hero-slide.active .hero-bg{ transform:scale(1.02); }
.hero-overlay{ position:absolute; inset:0; background:
  linear-gradient(90deg, rgba(6,15,32,.95) 0%, rgba(6,15,32,.82) 38%, rgba(6,15,32,.35) 70%, rgba(6,15,32,.15) 100%),
  linear-gradient(0deg, rgba(6,15,32,.85) 0%, rgba(6,15,32,0) 35%); }
.hero-content{ position:relative; z-index:2; min-height:inherit; display:flex; align-items:center; padding-top:70px; padding-bottom:150px; }
.hero-copy{ max-width:680px; }
.hero-eyebrow{ display:inline-flex; max-width:100%; align-items:center; gap:10px; padding:8px 18px 8px 10px; border-radius:999px; background:rgba(247,181,28,.12); border:1px solid rgba(247,181,28,.35); color:var(--gold-2); font-family:var(--font-head); font-weight:600; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:24px; backdrop-filter:blur(6px); }
.hero-eyebrow i{ width:28px; height:28px; border-radius:50%; background:var(--grad-gold); color:var(--navy-900); display:inline-flex; align-items:center; justify-content:center; font-size:.75rem; }
.hero h1, .hero .h1{ color:#fff; font-size:clamp(2.3rem, 5.2vw, 4.4rem); font-weight:800; line-height:1.06; letter-spacing:-.03em; margin-bottom:22px; }
.hero .lead{ color:rgba(255,255,255,.8); font-size:clamp(1rem,1.4vw,1.2rem); max-width:54ch; margin-bottom:34px; line-height:1.7; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; }
.hero-trust{ list-style:none; padding:0; margin:34px 0 0; display:flex; flex-wrap:wrap; gap:10px 26px; }
.hero-trust li{ color:rgba(255,255,255,.85); font-weight:600; font-size:.95rem; display:inline-flex; align-items:center; gap:8px; }
.hero-trust i{ color:var(--gold); }

/* staggered text animation */
.hero-slide .hero-eyebrow, .hero-slide h1, .hero-slide .h1, .hero-slide .lead, .hero-slide .hero-ctas, .hero-slide .hero-trust{ opacity:0; transform:translateY(34px); }
.hero-slide.active .hero-eyebrow, .hero-slide.active h1, .hero-slide.active .h1, .hero-slide.active .lead, .hero-slide.active .hero-ctas, .hero-slide.active .hero-trust{ animation:heroIn .9s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-slide.active h1, .hero-slide.active .h1{ animation-delay:.12s; }
.hero-slide.active .lead{ animation-delay:.26s; }
.hero-slide.active .hero-ctas{ animation-delay:.4s; }
.hero-slide.active .hero-trust{ animation-delay:.54s; }
@keyframes heroIn{ to{ opacity:1; transform:none; } }

/* split slides */
.split-bg{ position:absolute; inset:0; background:
  radial-gradient(600px 600px at 78% 45%, rgba(247,181,28,.28), transparent 60%),
  radial-gradient(900px 500px at 10% 110%, rgba(26,53,99,.9), transparent 60%),
  linear-gradient(135deg,#060F20 0%,#0D2142 55%,#10264A 100%); }
.split-bg::after{ content:""; 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:56px 56px; mask-image:radial-gradient(ellipse at 70% 50%, #000 20%, transparent 75%); -webkit-mask-image:radial-gradient(ellipse at 70% 50%, #000 20%, transparent 75%); }
.hero-showcase{ position:relative; max-width:520px; margin-left:auto; aspect-ratio:1/1; opacity:0; transform:translateX(40px) scale(.96); }
.hero-slide.active .hero-showcase{ animation:showIn 1.1s .2s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes showIn{ to{ opacity:1; transform:none; } }
.showcase-ring{ position:absolute; inset:-8%; border-radius:50%; border:1px dashed rgba(247,181,28,.4); animation:spin 40s linear infinite; }
.showcase-ring::before{ content:""; position:absolute; top:8%; left:50%; width:14px; height:14px; border-radius:50%; background:var(--gold); box-shadow:0 0 22px var(--gold); }
@keyframes spin{ to{ transform:rotate(360deg); } }
.showcase-frame{ position:absolute; inset:6%; border-radius:36px; overflow:hidden; background:#fff; box-shadow:0 50px 90px -30px rgba(0,0,0,.7), 0 0 0 10px rgba(255,255,255,.06); }
.showcase-frame img{ width:100%; height:100%; }
.showcase-frame.fit-contain img{ object-fit:contain; padding:8%; }
.showcase-frame.fit-cover img{ object-fit:cover; }
.showcase-badge{ position:absolute; display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.97); border-radius:18px; padding:14px 18px; box-shadow:0 24px 50px -20px rgba(0,0,0,.55); animation:floaty 5s ease-in-out infinite; }
.showcase-badge i{ width:44px; height:44px; border-radius:12px; background:var(--grad-gold); color:var(--navy-900); display:inline-flex; align-items:center; justify-content:center; font-size:1.1rem; flex:none; }
.showcase-badge strong{ display:block; font-family:var(--font-head); color:var(--navy-900); font-size:1rem; line-height:1.2; }
.showcase-badge span{ font-size:.8rem; color:var(--muted); }
.showcase-badge.b1{ left:-10%; bottom:14%; }
.showcase-badge.b2{ right:-4%; top:6%; animation-delay:-2.5s; }
.showcase-badge.b2 i{ background:var(--navy-900); color:var(--gold); }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }

/* hero nav */
.hero-nav{ position:absolute; left:0; right:0; bottom:0; z-index:5; padding-bottom:34px; }
.hero-indicators{ display:flex; gap:10px; flex:1; max-width:980px; margin-right:90px; }
.hero-indicators button{ flex:1; background:none; border:0; padding:0; text-align:left; color:rgba(255,255,255,.55); font-family:var(--font-head); display:flex; flex-direction:column; gap:4px; cursor:pointer; transition:color .3s ease; min-width:0; }
.hero-indicators .num{ font-weight:700; font-size:.85rem; }
.hero-indicators .lbl{ font-size:.86rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hero-indicators .bar{ display:block; height:3px; border-radius:3px; background:rgba(255,255,255,.2); overflow:hidden; margin-top:6px; }
.hero-indicators .bar i{ display:block; height:100%; width:0; background:var(--grad-gold); }
.hero-indicators button.active, .hero-indicators button:hover{ color:#fff; }
.hero-indicators button.active .num{ color:var(--gold); }
.hero-indicators button.active .bar i{ animation:heroProgress var(--hero-interval,6500ms) linear forwards; }
.hero-carousel.is-paused .hero-indicators button.active .bar i{ animation-play-state:paused; }
@keyframes heroProgress{ from{ width:0; } to{ width:100%; } }
.hero-arrows{ display:flex; gap:10px; flex:none; order:-1; }
.hero-arrow{ width:56px; height:56px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.06); color:#fff; backdrop-filter:blur(8px); transition:all .25s ease; }
.hero-arrow:hover{ background:var(--grad-gold); color:var(--navy-900); border-color:transparent; transform:scale(1.06); }

@media (max-width:991.98px){
  .hero-carousel .hero-slide{ min-height:600px; }
  .hero-overlay{ background:linear-gradient(0deg, rgba(6,15,32,.96) 0%, rgba(6,15,32,.78) 55%, rgba(6,15,32,.45) 100%); }
  .hero-content{ padding-top:60px; padding-bottom:130px; }
  .hero-indicators .lbl{ display:none; }
  .hero-indicators{ margin-right:70px; }
  .hero-indicators .num{ font-size:.78rem; }
}
/* Mobile: show the FULL hero image (no crop), text below it */
@media (max-width:767.98px){
  .hero-carousel .hero-slide{ min-height:0; }
  .slide-full .hero-bg{ position:relative; inset:auto; display:block; width:100%; height:auto; object-fit:contain; transform:none !important; transition:none; }
  .slide-full .hero-overlay{ top:auto; bottom:auto; height:0; }
  .slide-full .hero-content{ min-height:0; display:block; margin-top:-70px; padding-top:78px; padding-bottom:96px; background:linear-gradient(180deg, rgba(6,15,32,0) 0, var(--navy-950) 70px); }
  .slide-split .hero-content{ min-height:0; display:block; padding-top:30px; padding-bottom:96px; }
  .hero-showcase{ max-width:300px; margin:0 auto; }
  .showcase-badge, .showcase-ring{ display:none; }
  .showcase-frame{ inset:0; border-radius:26px; }
}
@media (max-width:575.98px){
  .hero-content{ padding-bottom:120px; }
  .hero-ctas .btn{ flex:1 1 100%; }
  .hero-trust{ gap:8px 18px; margin-top:24px; }
  .hero-trust li{ font-size:.85rem; }
  .hero-eyebrow{ font-size:.7rem; letter-spacing:.06em; padding:6px 14px 6px 6px; }
  .hero h1, .hero .h1{ font-size:2.15rem; }
  .hero-arrows{ display:none; }
  .hero-nav{ padding-bottom:26px; }
  .hero-indicators{ gap:6px; margin-right:64px; }
  .hero-indicators .num{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .hero-bg{ transition:none; transform:none; }
  .hero-slide .hero-eyebrow, .hero-slide h1, .hero-slide .h1, .hero-slide .lead, .hero-slide .hero-ctas, .hero-slide .hero-trust, .hero-showcase{ opacity:1; transform:none; animation:none !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ==========================================================================
   VALUE STRIP (overlaps hero)
   ========================================================================== */
.value-strip{ position:relative; z-index:6; margin-top:-1px; background:linear-gradient(180deg, var(--navy-950) 0 50%, var(--paper) 50% 100%); padding:0; }
.value-panel{ background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; position:relative; }
.value-panel::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--grad-gold); }
.value-card{ display:flex; gap:16px; align-items:flex-start; padding:34px 28px; height:100%; border-right:1px solid var(--line); transition:background .3s ease; }
.col-lg-3:last-child .value-card{ border-right:0; }
.value-card:hover{ background:var(--paper); }
.value-card h3{ font-size:1.08rem; margin-bottom:4px; }
.value-card p{ font-size:.9rem; margin:0; color:var(--muted); line-height:1.55; }
.ic-chip{ width:56px; height:56px; flex:none; border-radius:16px; background:linear-gradient(135deg, rgba(255,200,61,.18), rgba(238,127,18,.18)); color:var(--orange); display:inline-flex; align-items:center; justify-content:center; font-size:1.35rem; transition:all .35s ease; }
.value-card:hover .ic-chip{ background:var(--grad-gold); color:var(--navy-900); transform:rotate(-6deg) scale(1.05); }
@media (max-width:991.98px){
  .value-card{ flex-direction:column; padding:26px 20px; border-bottom:1px solid var(--line); }
  .col-6:nth-child(2n) .value-card{ border-right:0; }
}
@media (max-width:575.98px){ .value-card{ padding:22px 16px; } .ic-chip{ width:48px; height:48px; font-size:1.15rem; } }

/* ==========================================================================
   CATEGORY CARDS
   ========================================================================== */
.cat-card{ display:flex; flex-direction:column; height:100%; background:#fff; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line); transition:transform .4s ease, box-shadow .4s ease, border-color .4s ease; color:inherit; }
.cat-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:transparent; }
.cat-media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:#fff; }
.cat-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }
.cat-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(6,15,32,.55), rgba(6,15,32,0) 55%); }
.cat-card:hover .cat-media img{ transform:scale(1.08); }
.cat-count{ position:absolute; z-index:2; top:16px; right:16px; background:rgba(255,255,255,.95); color:var(--navy-900); font-family:var(--font-head); font-weight:700; font-size:.78rem; padding:6px 12px; border-radius:999px; }
.cat-body{ position:relative; padding:40px 28px 28px; flex:1; display:flex; flex-direction:column; }
.cat-icon{ position:absolute; top:-32px; left:28px; width:64px; height:64px; border-radius:18px; background:var(--grad-gold); color:var(--navy-900); display:flex; align-items:center; justify-content:center; font-size:1.5rem; box-shadow:0 14px 28px -12px rgba(238,132,22,.8); border:4px solid #fff; transition:transform .4s ease; }
.cat-card:hover .cat-icon{ transform:rotate(-8deg) scale(1.06); }
.cat-body h3{ font-size:1.3rem; margin-bottom:8px; }
.cat-body p{ font-size:.95rem; color:var(--muted); margin-bottom:18px; }
.cat-body .go{ margin-top:auto; font-family:var(--font-head); font-weight:600; color:var(--navy-900); display:inline-flex; align-items:center; gap:10px; }
.cat-body .go i{ width:34px; height:34px; border-radius:50%; background:var(--paper); display:inline-flex; align-items:center; justify-content:center; transition:all .3s ease; font-size:.8rem; }
.cat-card:hover .go{ color:var(--orange); }
.cat-card:hover .go i{ background:var(--navy-900); color:var(--gold); transform:translateX(4px); }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about-visual{ position:relative; padding:0 30px 40px 0; }
.about-frame{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:1/1; position:relative; z-index:1; }
.about-frame img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s ease; }
.about-visual:hover .about-frame img{ transform:scale(1.05); }
.about-dots{ position:absolute; right:0; bottom:0; width:180px; height:180px; background-image:radial-gradient(var(--gold) 2px, transparent 2.5px); background-size:18px 18px; opacity:.55; z-index:0; }
.about-float{ position:absolute; z-index:2; border-radius:20px; box-shadow:var(--shadow-lg); }
.about-float-1{ top:28px; left:-18px; background:var(--grad-gold); padding:20px 24px; display:flex; align-items:center; gap:12px; animation:floaty 6s ease-in-out infinite; }
.about-float-1 strong{ font-family:var(--font-head); font-size:2.6rem; line-height:1; color:var(--navy-900); }
.about-float-1 span{ font-weight:700; color:var(--navy-900); font-size:.85rem; line-height:1.3; }
.about-float-2{ right:0; bottom:10px; background:var(--navy-900); padding:18px 22px; display:flex; align-items:center; gap:14px; color:#fff; }
.about-float-2 i{ width:48px; height:48px; border-radius:14px; background:rgba(247,181,28,.15); color:var(--gold); display:inline-flex; align-items:center; justify-content:center; font-size:1.2rem; }
.about-float-2 strong{ display:block; font-family:var(--font-head); font-size:1.05rem; }
.about-float-2 span{ font-size:.8rem; color:rgba(255,255,255,.65); }
@media (max-width:575.98px){ .about-visual{ padding:0 0 30px; } .about-float-1{ left:10px; top:10px; padding:14px 16px; } .about-float-1 strong{ font-size:2rem; } .about-float-2{ right:10px; bottom:0; padding:12px 16px; } .about-dots{ display:none; } }
.about-feats{ margin-top:10px; }
.mini-feat{ display:flex; align-items:center; gap:14px; background:var(--paper); border-radius:16px; padding:14px 16px; height:100%; font-weight:600; color:var(--navy-900); font-size:.93rem; line-height:1.4; transition:all .3s ease; border:1px solid transparent; }
.section:not(.section-white) .mini-feat{ background:#fff; }
.mini-feat i{ width:40px; height:40px; flex:none; border-radius:12px; background:var(--navy-900); color:var(--gold); display:inline-flex; align-items:center; justify-content:center; }
.mini-feat:hover{ border-color:var(--gold); transform:translateY(-3px); }

/* ==========================================================================
   STATS BAND
   ========================================================================== */
.stats-band{ background:var(--grad-navy); padding:64px 0; position:relative; overflow:hidden; }
.stats-band::before{ content:""; position:absolute; right:-120px; top:-160px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(247,181,28,.35), transparent 65%); }
.stat{ position:relative; }
.stat strong{ display:block; font-family:var(--font-head); font-size:clamp(2.4rem,4.5vw,3.6rem); font-weight:800; line-height:1; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat strong i{ background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat > span{ display:block; margin-top:10px; color:rgba(255,255,255,.78); font-weight:600; }
@media (min-width:992px){ .stats-band .col-lg-3:not(:last-child) .stat::after{ content:""; position:absolute; right:-12px; top:10%; bottom:10%; width:1px; background:rgba(255,255,255,.12); } }

/* ==========================================================================
   PRODUCT CARDS
   ========================================================================== */
.product-card{ background:#fff; border-radius:22px; overflow:hidden; height:100%; display:flex; flex-direction:column; border:1px solid var(--line); box-shadow:var(--shadow-sm); transition:transform .4s ease, box-shadow .4s ease, border-color .4s ease; }
.product-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:rgba(247,181,28,.55); }
.product-card .thumb{ position:relative; display:block; aspect-ratio:1/1; background:#fff; overflow:hidden; border-bottom:1px solid var(--line); }
.product-card .thumb img{ width:100%; height:100%; object-fit:contain; padding:14px; transition:transform .7s ease; }
.product-card:hover .thumb img{ transform:scale(1.08); }
.product-card .thumb.no-photo{ display:flex; align-items:center; justify-content:center; font-size:3rem; color:var(--orange); background:var(--paper); }
.cat-tag{ position:absolute; z-index:2; top:12px; left:12px; max-width:calc(100% - 24px); background:var(--navy-900); color:#fff; font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:5px 10px; border-radius:999px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.quick-view{ position:absolute; left:50%; bottom:14px; transform:translate(-50%, 20px); opacity:0; background:var(--grad-gold); color:var(--navy-900); font-family:var(--font-head); font-weight:700; font-size:.82rem; padding:8px 16px; border-radius:999px; transition:all .35s ease; white-space:nowrap; box-shadow:0 10px 20px -10px rgba(238,132,22,.8); }
.product-card:hover .quick-view{ opacity:1; transform:translate(-50%, 0); }
.product-card .body{ padding:20px 20px 22px; display:flex; flex-direction:column; flex:1; }
.product-card h3{ font-size:1.02rem; margin-bottom:8px; line-height:1.3; }
.product-card h3 a{ color:var(--navy-900); }
.product-card h3 a:hover{ color:var(--orange); }
.product-card p{ font-size:.87rem; color:var(--muted); line-height:1.55; margin-bottom:16px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-actions{ margin-top:auto; display:flex; gap:8px; }
.card-actions .btn{ flex:1; padding:.55rem .6rem; font-size:.85rem; }
@media (max-width:575.98px){
  .product-card .body{ padding:14px 12px 14px; }
  .product-card h3{ font-size:.9rem; }
  .product-card p{ display:none; }
  .card-actions{ flex-direction:column; gap:6px; }
  .card-actions .btn{ font-size:.8rem; }
  .cat-tag{ font-size:.6rem; top:8px; left:8px; }
  .quick-view{ display:none; }
}

/* ==========================================================================
   DARK SECTIONS: industries / values
   ========================================================================== */
.section-dark{ background:var(--navy-950); overflow:hidden; }
.section-dark::before{ content:""; position:absolute; inset:0; background:
  radial-gradient(700px 400px at 90% 0%, rgba(247,181,28,.16), transparent 60%),
  radial-gradient(600px 400px at 0% 100%, rgba(26,53,99,.8), transparent 60%); }
.section-dark::after{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size:60px 60px; mask-image:linear-gradient(180deg, #000, transparent); -webkit-mask-image:linear-gradient(180deg, #000, transparent); }
.section-dark h2{ color:#fff; }
.section-dark .section-head p{ color:rgba(255,255,255,.7); }
.section-dark .container{ z-index:1; }
.industry-card{ height:100%; text-align:center; padding:34px 16px 28px; border-radius:22px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(6px); transition:all .4s ease; display:flex; flex-direction:column; align-items:center; gap:18px; }
.industry-card .ic-chip{ width:70px; height:70px; border-radius:50%; background:rgba(247,181,28,.12); color:var(--gold); font-size:1.6rem; }
.industry-card span{ color:#fff; font-family:var(--font-head); font-weight:600; font-size:1.02rem; line-height:1.3; }
.industry-card:hover{ background:rgba(247,181,28,.1); border-color:rgba(247,181,28,.5); transform:translateY(-8px); }
.industry-card:hover .ic-chip{ background:var(--grad-gold); color:var(--navy-900); transform:rotateY(180deg); }
.value-dark{ height:100%; padding:34px 28px; border-radius:22px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); transition:all .4s ease; }
.value-dark h3{ color:#fff; margin:22px 0 10px; }
.value-dark p{ color:rgba(255,255,255,.68); font-size:.94rem; margin:0; }
.value-dark:hover{ border-color:rgba(247,181,28,.5); transform:translateY(-8px); background:rgba(247,181,28,.07); }
.value-dark:hover .ic-chip{ background:var(--grad-gold); color:var(--navy-900); }

/* ==========================================================================
   STEPS
   ========================================================================== */
.step-card{ position:relative; height:100%; padding:38px 28px 30px; border-radius:24px; background:var(--paper); border:1px solid var(--line); transition:all .4s ease; overflow:hidden; }
.step-card > i{ width:64px; height:64px; border-radius:18px; background:var(--navy-900); color:var(--gold); display:inline-flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:22px; transition:all .4s ease; }
.step-num{ position:absolute; top:14px; right:22px; font-family:var(--font-head); font-weight:800; font-size:4rem; line-height:1; color:transparent; -webkit-text-stroke:1.5px rgba(11,27,54,.12); transition:all .4s ease; }
.step-card h3{ margin-bottom:8px; }
.step-card p{ font-size:.93rem; color:var(--muted); margin:0; }
.step-card:hover{ background:#fff; transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:transparent; }
.step-card:hover > i{ background:var(--grad-gold); color:var(--navy-900); }
.step-card:hover .step-num{ -webkit-text-stroke-color:var(--gold); }
.section:not(.section-white) .step-card{ background:#fff; }

/* Mission / Vision */
.mv-card{ height:100%; padding:44px 38px; border-radius:var(--radius-lg); background:var(--paper); border:1px solid var(--line); position:relative; overflow:hidden; transition:all .4s ease; }
.mv-card h3{ font-size:1.6rem; margin:24px 0 12px; }
.mv-card p{ margin:0; font-size:1rem; }
.mv-card::after{ content:""; position:absolute; right:-60px; bottom:-60px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle, rgba(247,181,28,.25), transparent 70%); }
.mv-card.mv-dark{ background:var(--grad-navy); border-color:transparent; }
.mv-dark h3{ color:#fff; } .mv-dark p{ color:rgba(255,255,255,.75); }
.mv-dark .ic-chip{ background:rgba(247,181,28,.15); color:var(--gold); }
.mv-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band{ padding:0 0 110px; background:transparent; }
.section-white + .cta-band, .section-dark + .cta-band{ padding-top:110px; }
.section-white + .cta-band{ background:#fff; }
.cta-inner{ position:relative; overflow:hidden; border-radius:var(--radius-lg); background:var(--grad-gold); padding:60px 64px; display:flex; align-items:center; justify-content:space-between; gap:30px; box-shadow:0 40px 80px -40px rgba(238,132,22,.8); }
.cta-inner::before{ content:""; position:absolute; right:-80px; top:-120px; width:380px; height:380px; border-radius:50%; border:60px solid rgba(255,255,255,.15); }
.cta-inner::after{ content:"\f0e7"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; left:42%; bottom:-70px; font-size:220px; color:rgba(11,27,54,.06); transform:rotate(12deg); }
.cta-copy{ position:relative; z-index:1; max-width:640px; }
.cta-copy h2{ color:var(--navy-900); margin-bottom:10px; }
.cta-copy p{ color:rgba(11,27,54,.8); font-size:1.05rem; margin:0; font-weight:500; }
.cta-actions{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:14px; flex:none; }
@media (max-width:991.98px){ .cta-inner{ flex-direction:column; align-items:flex-start; padding:44px 30px; } }
@media (max-width:575.98px){ .cta-band{ padding-bottom:72px; } .section-white + .cta-band, .section-dark + .cta-band{ padding-top:72px; } .cta-inner{ padding:36px 22px; } .cta-actions, .cta-actions .btn{ width:100%; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:var(--navy-950); color:rgba(255,255,255,.68); position:relative; overflow:hidden; padding-top:70px; }
.footer-glow{ position:absolute; left:50%; top:-300px; width:900px; height:500px; transform:translateX(-50%); background:radial-gradient(ellipse, rgba(247,181,28,.14), transparent 65%); pointer-events:none; }
.footer-top{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-bottom:44px; margin-bottom:50px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-logo-plate{ background:#fff; border-radius:20px; padding:14px 24px; box-shadow:0 20px 40px -20px rgba(0,0,0,.6); }
.footer-logo-plate img{ height:84px; width:auto; display:block; }
.footer-top-cta{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.footer-top-cta span{ font-family:var(--font-head); font-size:1.25rem; font-weight:600; color:#fff; }
.site-footer h4{ color:#fff; font-size:1.12rem; margin-bottom:22px; position:relative; padding-bottom:12px; }
.site-footer h4::after{ content:""; position:absolute; left:0; bottom:0; width:36px; height:3px; border-radius:3px; background:var(--grad-gold); }
.site-footer p{ color:rgba(255,255,255,.65); font-size:.95rem; }
.footer-links, .footer-contact{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin-bottom:10px; }
.footer-links a{ color:rgba(255,255,255,.7); display:inline-flex; align-items:center; gap:10px; transition:all .25s ease; }
.footer-links a::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); opacity:.5; transition:all .25s ease; }
.footer-links a:hover{ color:var(--gold); transform:translateX(4px); }
.footer-links a:hover::before{ opacity:1; }
.footer-contact li{ margin-bottom:14px; }
.footer-contact a{ display:flex; gap:12px; align-items:flex-start; color:rgba(255,255,255,.75); font-size:.93rem; line-height:1.5; }
.footer-contact i{ width:36px; height:36px; flex:none; border-radius:10px; background:rgba(255,255,255,.06); color:var(--gold); display:inline-flex; align-items:center; justify-content:center; transition:all .25s ease; }
.footer-contact a:hover{ color:#fff; }
.footer-contact a:hover i{ background:var(--grad-gold); color:var(--navy-900); }
.footer-social{ display:flex; gap:10px; margin-top:20px; }
.footer-social a{ width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.06); color:#fff; display:inline-flex; align-items:center; justify-content:center; transition:all .3s ease; }
.footer-social a:hover{ background:var(--grad-gold); color:var(--navy-900); transform:translateY(-4px); }
.footer-bottom{ margin-top:50px; padding:24px 0 28px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.88rem; }
.footer-bottom ul{ display:flex; gap:22px; list-style:none; margin:0; padding:0; }
.footer-bottom a{ color:rgba(255,255,255,.65); }
.footer-bottom a:hover{ color:var(--gold); }
@media (max-width:575.98px){ .footer-logo-plate img{ height:62px; } .footer-top-cta span{ font-size:1.05rem; } .site-footer{ padding-bottom:70px; } }

/* floating buttons */
.float-actions{ position:fixed; right:22px; bottom:22px; z-index:1040; display:flex; flex-direction:column; gap:12px; }
.fab{ width:58px; height:58px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:1.45rem; color:#fff; box-shadow:0 16px 30px -10px rgba(0,0,0,.45); transition:transform .25s ease; position:relative; }
.fab:hover{ transform:scale(1.1); color:#fff; }
.fab-wa{ background:var(--wa); }
.fab-wa::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--wa); animation:pulse 2s ease-out infinite; }
.fab-call{ background:var(--navy-900); color:var(--gold); font-size:1.2rem; }
.fab-call:hover{ color:var(--gold); }
.to-top{ position:fixed; left:22px; bottom:22px; z-index:1040; width:48px; height:48px; border-radius:14px; border:0; background:var(--grad-gold); color:var(--navy-900); box-shadow:0 14px 28px -12px rgba(238,132,22,.8); opacity:0; visibility:hidden; transform:translateY(20px); transition:all .3s ease; }
.to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
@media (max-width:575.98px){ .float-actions{ right:14px; bottom:14px; } .fab{ width:52px; height:52px; } .to-top{ left:14px; bottom:14px; width:44px; height:44px; } }

/* ==========================================================================
   INNER PAGES
   ========================================================================== */
.page-hero{ position:relative; overflow:hidden; background:var(--navy-950); padding:120px 0 110px; }
.page-hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.35; animation:kenburns 18s ease-out forwards; }
@keyframes kenburns{ from{ transform:scale(1.15); } to{ transform:scale(1); } }
.page-hero::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(6,15,32,.96) 0%, rgba(6,15,32,.75) 55%, rgba(6,15,32,.45) 100%); }
.page-hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px; z-index:2; background:var(--grad-gold); }
.page-hero .container{ z-index:2; }
.page-hero h1{ color:#fff; font-size:clamp(2.4rem,5vw,4rem); font-weight:800; margin:18px 0 14px; }
.page-hero p{ color:rgba(255,255,255,.78); font-size:1.12rem; max-width:62ch; margin:0; }
.crumb{ list-style:none; padding:8px 18px; margin:0; display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 10px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); font-size:.88rem; font-weight:600; color:var(--gold); }
.crumb li{ display:inline-flex; align-items:center; gap:10px; }
.crumb li + li::before{ content:"\f054"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:.6rem; color:rgba(255,255,255,.45); }
.crumb a{ color:rgba(255,255,255,.85); }
.crumb a:hover{ color:var(--gold); }
@media (max-width:575.98px){ .page-hero{ padding:80px 0 72px; } }

/* products page */
.toolbar{ position:relative; z-index:3; margin-top:-44px; background:#fff; border-radius:22px; padding:18px; box-shadow:var(--shadow-lg); margin-bottom:26px; }
.toolbar .form-control, .toolbar .form-select{ height:56px; border-radius:14px; border:1.5px solid var(--line); background-color:var(--paper); font-weight:600; color:var(--navy-900); }
.toolbar .form-control:focus, .toolbar .form-select:focus{ border-color:var(--gold); box-shadow:0 0 0 4px rgba(247,181,28,.2); background-color:#fff; }
.search{ position:relative; }
.search i{ position:absolute; left:20px; top:50%; transform:translateY(-50%); color:var(--orange); }
.search .form-control{ padding-left:50px; }
.cat-chips{ display:flex; gap:10px; overflow-x:auto; padding:4px 2px 12px; scrollbar-width:thin; }
.chip{ flex:none; border:1.5px solid var(--line); background:#fff; color:var(--navy-900); font-family:var(--font-head); font-weight:600; font-size:.9rem; border-radius:999px; padding:9px 16px; display:inline-flex; align-items:center; gap:8px; transition:all .25s ease; }
.chip i{ color:var(--orange); }
.chip span{ background:var(--paper); border-radius:999px; padding:1px 9px; font-size:.78rem; }
.chip:hover{ border-color:var(--gold); }
.chip.active{ background:var(--navy-900); border-color:var(--navy-900); color:#fff; }
.chip.active i{ color:var(--gold); }
.chip.active span{ background:var(--gold); color:var(--navy-900); }
.result-count{ color:var(--muted); margin:10px 0 24px; }
.result-count strong{ color:var(--navy-900); }
.empty-state{ text-align:center; padding:60px 20px; background:#fff; border-radius:var(--radius-lg); border:1px dashed var(--line); }
.empty-state > i{ font-size:3rem; color:var(--gold); margin-bottom:16px; }
.empty-state p{ max-width:48ch; margin:0 auto 20px; }

/* contact */
.contact-card{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; height:100%; padding:32px 26px; border-radius:24px; background:#fff; border:1px solid var(--line); color:var(--text); transition:all .4s ease; position:relative; overflow:hidden; }
.contact-card::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--grad-gold); transform:scaleX(0); transition:transform .4s ease; transform-origin:left; }
.contact-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); color:var(--text); }
.contact-card:hover::after{ transform:scaleX(1); }
.contact-card h3{ margin:16px 0 4px; }
.contact-card > span{ font-weight:600; color:var(--navy-900); line-height:1.5; font-size:.95rem; }
.contact-card .alt{ color:var(--muted); font-weight:500; }
.ic-chip.wa{ background:rgba(31,175,85,.12); color:var(--wa); }
.contact-card:hover .ic-chip{ background:var(--grad-gold); color:var(--navy-900); }
.quick-panel{ height:100%; border-radius:var(--radius-lg); background:var(--grad-navy); padding:44px 38px; position:relative; overflow:hidden; }
.quick-panel::before{ content:""; position:absolute; right:-100px; top:-100px; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle, rgba(247,181,28,.3), transparent 65%); }
.quick-panel > *{ position:relative; }
.quick-panel h2{ color:#fff; font-size:clamp(1.6rem,2.6vw,2.2rem); }
.quick-panel p{ color:rgba(255,255,255,.72); }
.quick-panel .small-note{ font-size:.85rem; margin-top:20px; display:flex; gap:8px; }
.quick-panel .small-note i{ color:var(--gold); margin-top:5px; }
.regd{ margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); display:flex; flex-direction:column; font-size:.9rem; color:rgba(255,255,255,.72); }
.regd strong{ color:var(--gold); font-family:var(--font-head); }
.map-wrap{ height:100%; min-height:440px; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); border:6px solid #fff; background:var(--paper-2); }
.map-wrap iframe{ width:100%; height:100%; min-height:428px; border:0; display:block; }

/* product detail */
.breadcrumb-bar{ background:var(--navy-950); padding:22px 0; position:relative; }
.breadcrumb-bar::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--grad-gold); }
.pd-section{ padding-top:64px; }
.pd-gallery{ position:sticky; top:130px; }
.pd-gallery-main{ aspect-ratio:1/1; background:#fff; border-radius:var(--radius-lg); border:1px solid var(--line); box-shadow:var(--shadow); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.pd-gallery-main img{ width:100%; height:100%; object-fit:contain; padding:24px; transition:transform .6s ease; }
.pd-gallery-main:hover img{ transform:scale(1.06); }
.pd-gallery-main.no-photo{ font-size:6rem; color:var(--orange); }
.pd-thumb-row{ display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }
.pd-thumb{ width:86px; height:86px; border-radius:16px; border:2px solid var(--line); background:#fff; padding:6px; transition:all .25s ease; }
.pd-thumb img{ width:100%; height:100%; object-fit:contain; }
.pd-thumb.is-active, .pd-thumb:hover{ border-color:var(--gold); box-shadow:0 10px 20px -12px rgba(238,132,22,.8); }
.pd-tag{ display:inline-flex; align-items:center; gap:8px; background:rgba(247,181,28,.15); color:#9A5A00; font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; padding:7px 14px; border-radius:999px; }
.pd-info h1{ font-size:clamp(2rem,3.6vw,3rem); font-weight:800; margin:18px 0 14px; }
.pd-lead{ font-size:1.12rem; color:var(--ink); opacity:.85; }
.pd-cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 20px; }
.pd-assure{ list-style:none; padding:18px 0; margin:0 0 10px; display:flex; flex-wrap:wrap; gap:10px 24px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.pd-assure li{ font-weight:600; color:var(--navy-900); font-size:.92rem; display:inline-flex; align-items:center; gap:8px; }
.pd-assure i{ color:var(--wa); }
.pd-block{ background:#fff; border:1px solid var(--line); border-radius:22px; padding:26px 26px 22px; margin-top:20px; }
.pd-block h3{ display:flex; align-items:center; gap:10px; font-size:1.15rem; margin-bottom:12px; }
.pd-block h3 i{ color:var(--orange); }
.pd-block p{ margin:0; }
.pd-apps{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.pd-apps li{ display:flex; gap:12px; align-items:flex-start; }
.pd-apps i{ width:24px; height:24px; flex:none; border-radius:50%; background:var(--navy-900); color:var(--gold); display:inline-flex; align-items:center; justify-content:center; font-size:.65rem; margin-top:3px; }
@media (max-width:991.98px){ .pd-gallery{ position:static; } }
@media (max-width:575.98px){ .pd-cta-row .btn{ width:100%; } }

/* polish */
.main-nav .nav-link:focus{ box-shadow:none; }
.main-nav .nav-link:focus-visible{ box-shadow:0 0 0 3px rgba(247,181,28,.45); }
.main-offcanvas{ border-left:0 !important; }
.offcanvas-backdrop.show{ opacity:.6; }

/* keep the mobile menu above floating buttons & backdrop */
.site-header.menu-open{ z-index:1060; }
body:has(.main-offcanvas.show) .float-actions, body:has(.main-offcanvas.showing) .float-actions, .menu-is-open .float-actions, .menu-is-open .to-top{ opacity:0; visibility:hidden; }
.main-offcanvas .offcanvas-header{ justify-content:space-between; }
.offcanvas:focus, .offcanvas:focus-visible{ outline:none; }

/* ---------- Footer cards ---------- */
.footer-card{ height:100%; padding:28px 26px; border-radius:22px; background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.1); transition:border-color .3s ease, transform .3s ease, background .3s ease; position:relative; overflow:hidden; }
.footer-card::before{ content:""; position:absolute; top:0; left:26px; right:26px; height:2px; background:var(--grad-gold); opacity:0; transition:opacity .3s ease; }
.footer-card:hover{ border-color:rgba(247,181,28,.35); transform:translateY(-4px); background:linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); }
.footer-card:hover::before{ opacity:1; }
.footer-card p{ margin-bottom:0; }
.footer-card .footer-contact li:last-child, .footer-card .footer-links li:last-child{ margin-bottom:0; }
@media (max-width:575.98px){
  .footer-card{ padding:22px 18px; border-radius:18px; }
  .footer-card h4{ font-size:1rem; margin-bottom:16px; }
  .col-6 .footer-card{ padding:20px 14px; }
  .col-6 .footer-links li{ margin-bottom:9px; }
  .col-6 .footer-links a{ font-size:.86rem; gap:8px; align-items:flex-start; line-height:1.4; }
  .col-6 .footer-links a::before{ margin-top:7px; flex:none; }
  .footer-bottom{ margin-top:30px; }
}

/* PHP build additions */
.value-strip.no-hero{ background:var(--paper); padding-top:40px; }
.pd-block h2.h3{ display:flex; align-items:center; gap:10px; font-size:1.15rem; margin-bottom:12px; }
.pd-block h2.h3 i{ color:var(--orange); }
.es-pagination .page-link{ border:1.5px solid var(--line); margin:0 4px; border-radius:12px !important; min-width:44px; text-align:center; font-weight:700; color:var(--navy-900); }
.es-pagination .active .page-link{ background:var(--navy-900); border-color:var(--navy-900); color:#fff; }
a.chip{ text-decoration:none; }