/* ============================================================
   KOOLER KING — commercial refrigeration · Salisbury, MD
   Design language: brushed dark metal · chrome silver · electric-blue LED glow
   ============================================================ */
:root{
  --ink:#080b11;
  --ink-2:#0b0f17;
  --panel:#0e141e;
  --panel-2:#121a26;
  --line:#1e2836;
  --steel:#cdd6e2;
  --steel-hi:#ffffff;
  --muted:#8b97a8;
  --ice:#39b7ff;
  --ice-2:#0a74e6;
  --ice-deep:#064aa8;
  --ice-glow:rgba(57,183,255,.55);
  --ice-soft:rgba(57,183,255,.14);
  --amber:#ffcc4d;
  --radius:16px;
  --maxw:1180px;
  --shadow:0 18px 50px rgba(0,0,0,.55);
  --font-body:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --font-head:"Oswald",var(--font-body);
  --font-mega:"Anton",var(--font-head);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font-body);color:var(--steel);
  background:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-head);font-weight:600;line-height:1.05;color:var(--steel-hi);margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.eyebrow{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.28em;
  font-size:.74rem;font-weight:600;color:var(--ice);margin:0 0 14px}
.section{padding:92px 0;position:relative}
.section--tight{padding:64px 0}

/* brushed-metal texture helper */
.brushed{
  background:
    linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.014) 0 2px,transparent 2px 4px),
    linear-gradient(160deg,var(--panel),var(--ink) 70%);
}

/* LED hairline divider */
.led-rule{height:2px;border:0;margin:0;
  background:linear-gradient(90deg,transparent,var(--ice-2),var(--ice),var(--ice-2),transparent);
  box-shadow:0 0 16px var(--ice-glow);opacity:.85}

/* ---------- chrome / blue metallic type ---------- */
.chrome{
  background:linear-gradient(180deg,#ffffff 4%,#cfd8e4 34%,#8b96a6 52%,#eef3f9 66%,#9aa6b6 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.25)) drop-shadow(0 3px 10px rgba(0,0,0,.6));
}
.blue{
  background:linear-gradient(180deg,#bfe6ff 2%,#57b7ff 34%,#0a74e6 60%,#8fd2ff 78%,#0a6ee0 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 14px var(--ice-glow));
}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:60;
  background:rgba(8,11,17,.72);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);}
.hdr__in{display:flex;align-items:center;gap:18px;height:68px}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand__crown{width:30px;height:30px;flex:none;filter:drop-shadow(0 0 8px var(--ice-glow))}
.brand__name{font-family:var(--font-mega);font-size:1.42rem;letter-spacing:.02em;line-height:1;
  text-transform:uppercase;white-space:nowrap}
.nav{margin-left:auto;display:flex;gap:26px;align-items:center}
.nav a{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;
  color:var(--muted);transition:color .2s}
.nav a:hover{color:var(--steel-hi)}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-head);font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;border-radius:999px;
  padding:12px 22px;cursor:pointer;border:1px solid transparent;transition:transform .18s,box-shadow .2s,background .2s;white-space:nowrap}
.btn svg{width:16px;height:16px}
.btn--call{background:linear-gradient(180deg,#2ea6ff,#0a5fd0);color:#ffffff;
  text-shadow:0 1px 2px rgba(2,20,45,.65);
  box-shadow:0 8px 26px rgba(10,116,230,.5),inset 0 1px 0 rgba(255,255,255,.4);font-weight:700}
.btn--call:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(10,116,230,.62)}
.btn--ghost{border-color:var(--line);color:var(--steel);background:rgba(255,255,255,.02)}
.btn--ghost:hover{border-color:var(--ice);color:var(--steel-hi);box-shadow:0 0 22px var(--ice-soft)}
.btn--lg{padding:16px 30px;font-size:.92rem}
.hdr .btn--call{margin-left:4px}
.navtoggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:10px;
  width:44px;height:40px;color:var(--steel);cursor:pointer;align-items:center;justify-content:center}
.navtoggle svg{width:22px;height:22px}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:78px 0 84px;
  background:
    radial-gradient(120% 90% at 50% -10%,rgba(57,183,255,.16),transparent 55%),
    radial-gradient(80% 60% at 12% 20%,rgba(10,116,230,.14),transparent 60%),
    radial-gradient(80% 60% at 88% 30%,rgba(10,116,230,.12),transparent 60%),
    linear-gradient(180deg,#0a0f18,#070a10 70%);}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.015) 0 1px,transparent 1px 3px);
  mask:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);opacity:.6}
.hero__glowbar{position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--ice),transparent);box-shadow:0 0 30px 4px var(--ice-glow)}
.hero__flank{position:absolute;bottom:-2%;z-index:1;width:min(30vw,400px);pointer-events:none;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.6));opacity:.96;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 40%,#000 60%,transparent);
  mask-image:radial-gradient(120% 100% at 50% 40%,#000 60%,transparent)}
.hero__flank--l{left:-2%}
.hero__flank--r{right:-2%}
@media(max-width:1080px){.hero__flank{width:26vw;opacity:.5}}
@media(max-width:820px){.hero__flank{display:none}}
.hero__in{position:relative;z-index:2;text-align:center}
.hero__crown{width:76px;height:76px;margin:0 auto 14px;filter:drop-shadow(0 0 18px var(--ice-glow))}
.hero__word{font-family:var(--font-mega);text-transform:uppercase;
  font-size:clamp(3.3rem,13.5vw,9.2rem);line-height:.86;letter-spacing:.01em;
  display:flex;gap:.14em;justify-content:center;flex-wrap:wrap}
.hero__tag{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.24em;
  color:var(--steel);font-size:clamp(.72rem,2.3vw,1.02rem);margin:18px 0 0;font-weight:500}
.hero__tag b{color:var(--ice);font-weight:600}
.hero__sub{max-width:640px;margin:20px auto 0;color:var(--muted);font-size:1.06rem}
.hero__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.hero__trust{margin-top:26px;display:flex;gap:10px 26px;justify-content:center;flex-wrap:wrap;
  font-family:var(--font-head);text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;color:var(--muted)}
.hero__trust span{display:inline-flex;align-items:center;gap:7px}
.hero__trust .dot{width:6px;height:6px;border-radius:50%;background:var(--ice);box-shadow:0 0 10px var(--ice-glow)}

/* ---------- section heading ---------- */
.head{text-align:center;max-width:720px;margin:0 auto 48px}
.head h2{font-size:clamp(2rem,5vw,3.05rem);text-transform:uppercase;letter-spacing:.01em}
.head p{color:var(--muted);margin:14px 0 0;font-size:1.05rem}

/* ---------- category cards ---------- */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cat{position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--panel);box-shadow:var(--shadow);transition:transform .22s,border-color .22s,box-shadow .22s}
.cat:hover{transform:translateY(-6px);border-color:rgba(57,183,255,.5);box-shadow:0 22px 50px rgba(0,0,0,.6),0 0 28px var(--ice-soft)}
.cat__media{aspect-ratio:4/5;position:relative;background:linear-gradient(160deg,#141d29,#0a0f17);overflow:hidden}
.cat__media img{width:100%;height:100%;object-fit:cover;opacity:.94;transition:transform .5s}
.cat:hover .cat__media img{transform:scale(1.06)}
.cat__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(8,11,17,.85))}
.cat__ic{position:absolute;top:12px;left:12px;width:40px;height:40px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;background:rgba(8,12,20,.7);
  border:1px solid rgba(57,183,255,.4);box-shadow:0 0 16px var(--ice-soft)}
.cat__ic svg{width:22px;height:22px;stroke:var(--ice)}
.cat__body{padding:16px 18px 20px}
.cat__body h3{font-size:1.14rem;text-transform:uppercase;letter-spacing:.04em}
.cat__body p{margin:7px 0 0;color:var(--muted);font-size:.92rem}

/* ---------- feature / why ---------- */
.why{background:
    radial-gradient(90% 70% at 100% 0,rgba(10,116,230,.12),transparent 55%),
    linear-gradient(180deg,#0a0f18,#080b11);border-block:1px solid var(--line)}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.f{border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;background:rgba(18,26,38,.55);
  transition:transform .2s,border-color .2s}
.f:hover{transform:translateY(-4px);border-color:rgba(57,183,255,.42)}
.f__ic{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,rgba(57,183,255,.18),rgba(10,116,230,.08));border:1px solid rgba(57,183,255,.35);
  box-shadow:0 0 20px var(--ice-soft);margin-bottom:16px}
.f__ic svg{width:24px;height:24px;stroke:var(--ice)}
.f h3{font-size:1.18rem;text-transform:uppercase;letter-spacing:.03em}
.f p{margin:9px 0 0;color:var(--muted);font-size:.96rem}

/* ---------- showcase split (generated product) ---------- */
.showcase{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.showcase__txt .eyebrow{margin-bottom:12px}
.showcase__txt h2{font-size:clamp(1.9rem,4.4vw,2.8rem);text-transform:uppercase}
.showcase__txt p{color:var(--muted);margin:16px 0 0;font-size:1.06rem}
.showcase__list{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.showcase__list li{display:flex;gap:12px;align-items:flex-start;color:var(--steel);font-size:1rem}
.showcase__list svg{width:20px;height:20px;stroke:var(--ice);flex:none;margin-top:3px}
.showcase__media{position:relative}
.showcase__media img{border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);width:100%}
.showcase__media::before{content:"";position:absolute;inset:-1px;border-radius:calc(var(--radius) + 2px);
  background:radial-gradient(60% 60% at 50% 40%,var(--ice-soft),transparent 70%);filter:blur(6px);z-index:-1}
.showcase--flip .showcase__media{order:-1}

/* ---------- warehouse gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:150px;gap:14px}
.gallery figure{margin:0;position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#0a0f17}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s,opacity .3s;opacity:.9}
.gallery figure:hover img{transform:scale(1.05);opacity:1}
.gallery .g-wide{grid-column:span 3;grid-row:span 2}
.gallery .g-tall{grid-column:span 3;grid-row:span 2}
.gallery .g-sm{grid-column:span 2}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;font-family:var(--font-head);
  text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;color:var(--steel-hi);
  background:linear-gradient(180deg,transparent,rgba(8,11,17,.88))}
.gallery__note{text-align:center;margin:22px auto 0;color:var(--muted);max-width:620px;font-size:.98rem}

/* ---------- lookup / scanner teaser ---------- */
.lookup{position:relative;overflow:hidden;border-block:1px solid var(--line);
  background:
    radial-gradient(70% 120% at 15% 20%,rgba(10,116,230,.16),transparent 60%),
    radial-gradient(70% 120% at 90% 80%,rgba(57,183,255,.12),transparent 60%),
    linear-gradient(180deg,#0b1220,#080b11)}
.lookup__in{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}
.lookup h2{font-size:clamp(1.8rem,4.4vw,2.7rem);text-transform:uppercase}
.lookup p{color:var(--muted);margin:14px 0 0;font-size:1.06rem;max-width:560px}
.lookup .badge{display:inline-block;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.18em;
  font-size:.7rem;color:var(--amber);border:1px solid rgba(255,204,77,.4);border-radius:999px;
  padding:5px 12px;margin-bottom:16px}

/* ---------- contact ---------- */
.contact{background:linear-gradient(180deg,#080b11,#0a0f18)}
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.contact__card{border:1px solid var(--line);border-radius:var(--radius);padding:34px;background:var(--panel);
  box-shadow:var(--shadow)}
.contact__card h2{font-size:clamp(1.8rem,4vw,2.5rem);text-transform:uppercase}
.crow{display:flex;gap:14px;align-items:center;padding:15px 0;border-top:1px solid var(--line)}
.crow:first-of-type{border-top:0}
.crow__ic{width:44px;height:44px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,rgba(57,183,255,.18),rgba(10,116,230,.06));border:1px solid rgba(57,183,255,.34)}
.crow__ic svg{width:21px;height:21px;stroke:var(--ice)}
.crow small{display:block;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.14em;
  font-size:.66rem;color:var(--muted)}
.crow b{font-size:1.14rem;color:var(--steel-hi);font-weight:600}
.contact__cta{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
.map{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;min-height:420px;box-shadow:var(--shadow)}
.map iframe{width:100%;height:100%;min-height:420px;border:0;filter:grayscale(.35) invert(.9) hue-rotate(180deg) contrast(.92)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);background:var(--ink);padding:40px 0 44px}
.foot__in{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.foot .brand__name{font-size:1.2rem}
.foot small{color:var(--muted);font-size:.82rem;line-height:1.7;display:block}
.foot__wr{color:var(--muted);font-size:.76rem}
.foot__wr b{color:var(--steel)}

/* ---------- reveal animation (progressive enhancement) ----------
   Content is ALWAYS visible by default. Only once JS confirms IntersectionObserver
   support does it arm the hidden→reveal animation. No-JS / slow-IO / failure = visible. */
.reveal{opacity:1;transform:none}
html.reveal-armed .reveal:not(.in){opacity:0;transform:translateY(26px)}
html.reveal-armed .reveal{transition:opacity .7s ease,transform .7s ease}
html.reveal-armed .reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .cats{grid-template-columns:repeat(2,1fr)}
  .feat{grid-template-columns:1fr}
  .showcase{grid-template-columns:1fr;gap:26px}
  .showcase--flip .showcase__media{order:0}
  .lookup__in{grid-template-columns:1fr}
  .contact__grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(4,1fr);grid-auto-rows:130px}
  .gallery .g-wide,.gallery .g-tall{grid-column:span 4}
}
@media(max-width:720px){
  .nav{display:none}
  .nav.open{display:flex;position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0;
    background:rgba(8,11,17,.98);border-bottom:1px solid var(--line);padding:8px 0}
  .nav.open a{padding:15px 22px;font-size:1rem;border-top:1px solid var(--line)}
  .nav.open .btn--call{margin:12px 22px;justify-content:center}
  .navtoggle{display:flex}
  .hdr .btn--call.hdr-cta{display:none}
  .section{padding:66px 0}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:120px}
  .gallery .g-wide,.gallery .g-tall,.gallery .g-sm{grid-column:span 2}
  .hero{padding:54px 0 64px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none;transition:none}
}

/* ============================================================
   ⚡ TRICK-OUT PACK — 3D buttons · laser borders · zip-zaps · sheen · glow
   (all motion auto-disables under prefers-reduced-motion via the guard above)
   ============================================================ */
@property --kkang{syntax:"<angle>";inherits:false;initial-value:0deg}

/* ---- 3D pressable buttons ---- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn--call{
  box-shadow:0 3px 0 #05346f, 0 10px 24px rgba(10,116,230,.5),
    inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 8px rgba(3,32,72,.5);
  animation:callpulse 2.6s ease-in-out infinite}
.btn--call:hover{transform:translateY(-2px);
  box-shadow:0 4px 0 #05346f, 0 14px 30px rgba(10,116,230,.62), 0 0 26px var(--ice-glow),
    inset 0 1px 0 rgba(255,255,255,.6)}
.btn--call:active{transform:translateY(2px);
  box-shadow:0 0 0 #05346f, 0 5px 14px rgba(10,116,230,.5), inset 0 2px 6px rgba(3,32,72,.55)}
@keyframes callpulse{
  0%,100%{filter:drop-shadow(0 0 0 rgba(57,183,255,0))}
  50%{filter:drop-shadow(0 0 10px rgba(57,183,255,.55))}}
.btn--ghost{box-shadow:inset 0 0 0 1px rgba(57,183,255,.18),0 4px 14px rgba(0,0,0,.4)}
.btn--ghost:hover{transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px var(--ice),0 0 24px var(--ice-soft),0 8px 20px rgba(0,0,0,.5)}
.btn--ghost:active{transform:translateY(1px)}
/* sheen sweep across any button on hover */
.btn::after{content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;z-index:-1;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-20deg);opacity:0}
.btn:hover::after{opacity:1;animation:btnsheen .8s ease forwards}
@keyframes btnsheen{from{left:-80%}to{left:130%}}

/* ---- laser-trace border on cards (cat + feature) ---- */
.cat::before,.f::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:3;
  background:conic-gradient(from var(--kkang),
    transparent 0 58%, rgba(57,183,255,.85) 72%, #dff2ff 80%, rgba(57,183,255,.85) 88%, transparent 94% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .3s;pointer-events:none}
.cat:hover::before,.f:hover::before{opacity:1;animation:kkspin 2.4s linear infinite}
@keyframes kkspin{to{--kkang:360deg}}
.f{position:relative;overflow:hidden}

/* ---- glare sweep across category image on hover ---- */
.cat__media::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 48%,transparent 62%);
  transform:translateX(-120%)}
.cat:hover .cat__media::before{animation:glare .9s ease forwards}
@keyframes glare{to{transform:translateX(120%)}}

/* ---- icons: breathing glow + hover zap ---- */
.f__ic,.cat__ic{animation:icobreathe 3.2s ease-in-out infinite}
@keyframes icobreathe{0%,100%{box-shadow:0 0 14px var(--ice-soft)}50%{box-shadow:0 0 26px var(--ice-glow)}}
.f:hover .f__ic{transform:translateY(-3px) scale(1.08);border-color:var(--ice);
  box-shadow:0 0 30px var(--ice-glow)}
.f__ic,.cat__ic{transition:transform .25s,box-shadow .25s,border-color .25s}

/* ---- zip-zap light streak across every LED divider ---- */
.led-rule{position:relative;overflow:hidden}
.led-rule::after{content:"";position:absolute;top:0;left:-25%;width:25%;height:100%;
  background:linear-gradient(90deg,transparent,#eaf7ff,transparent);filter:blur(.5px);
  animation:zip 4s ease-in-out infinite}
@keyframes zip{0%{left:-25%}55%,100%{left:130%}}

/* ---- hero: chrome wordmark sheen sweep + scan laser + crown pulse ---- */
.hero__word{position:relative}
.hero__word::after{content:"";position:absolute;inset:-12% -6%;pointer-events:none;z-index:3;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.6) 49%,rgba(180,225,255,.75) 51%,transparent 60%);
  transform:translateX(-120%);mix-blend-mode:overlay;animation:wordsweep 5.5s ease-in-out infinite}
@keyframes wordsweep{0%,55%{transform:translateX(-120%)}90%,100%{transform:translateX(120%)}}
.hero::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--ice),transparent);box-shadow:0 0 14px var(--ice);
  opacity:.4;animation:scan 7s linear infinite}
@keyframes scan{0%{top:-2px;opacity:0}8%{opacity:.45}92%{opacity:.45}100%{top:100%;opacity:0}}
.hero__crown{animation:crownglow 3s ease-in-out infinite}
@keyframes crownglow{0%,100%{filter:drop-shadow(0 0 12px var(--ice-glow))}50%{filter:drop-shadow(0 0 26px var(--ice))}}
.hero__glowbar{animation:barpulse 3s ease-in-out infinite}
@keyframes barpulse{0%,100%{opacity:.7}50%{opacity:1}}

/* ---- nav links: laser underline on hover ---- */
.nav a:not(.btn){position:relative}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:linear-gradient(90deg,transparent,var(--ice),transparent);box-shadow:0 0 10px var(--ice-glow);
  transform:scaleX(0);transition:transform .3s ease}
.nav a:not(.btn):hover::after{transform:scaleX(1)}

/* ---- trust dots pulse ---- */
.hero__trust .dot{animation:dotpulse 2s ease-in-out infinite}
@keyframes dotpulse{0%,100%{box-shadow:0 0 8px var(--ice-glow);opacity:.85}50%{box-shadow:0 0 16px var(--ice);opacity:1}}

/* ---- section heading H2: subtle blue underglow bar ---- */
.head h2::after,.showcase__txt h2::after{content:"";display:block;width:70px;height:3px;margin:16px auto 0;
  background:linear-gradient(90deg,transparent,var(--ice),transparent);box-shadow:0 0 14px var(--ice-glow);border-radius:3px}
.showcase__txt h2::after{margin-left:0}

/* ---- contact card + rows glow on hover ---- */
.crow{transition:background .25s,padding-left .25s}
.crow:hover{background:rgba(57,183,255,.06);padding-left:8px}
.crow:hover .crow__ic{border-color:var(--ice);box-shadow:0 0 20px var(--ice-glow)}
.contact__card{position:relative}
.contact__card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:0;
  background:conic-gradient(from var(--kkang),transparent 0 62%,rgba(57,183,255,.7) 78%,#dff2ff 84%,transparent 92% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.5;animation:kkspin 6s linear infinite;pointer-events:none}
.contact__card>*{position:relative;z-index:1}

/* ============================================================
   🎬 CINEMATIC 3D TYPE — movie-title perspective + extrusion
   headings tilt toward the viewer, extrude with depth, and
   emanate up-and-out from center on reveal
   ============================================================ */
.head h2,.showcase__txt h2,.contact__card h2{
  text-shadow:
    0 1px 0 #0b1322, 0 2px 0 #0a1120, 0 3px 0 #090f1c, 0 4px 0 #080e18,
    0 5px 1px rgba(0,0,0,.5), 0 9px 18px rgba(0,0,0,.6), 0 0 26px rgba(57,183,255,.22);
  transform:perspective(780px) rotateX(11deg);
  transform-origin:50% 100%;
  letter-spacing:.015em;
}
/* entrance: scale up from a center point + tilt into place = "emanating outward, popping at us" */
html.reveal-armed .reveal.in h2{animation:cineIn .85s cubic-bezier(.2,.8,.2,1) both}
@keyframes cineIn{
  0%{opacity:0;transform:perspective(780px) rotateX(36deg) scale(.7)}
  60%{opacity:1}
  100%{opacity:1;transform:perspective(780px) rotateX(11deg) scale(1)}}

/* card titles (h3): subtle extrusion so they pop without the big tilt */
.cat__body h3,.f h3{
  text-shadow:0 1px 0 #0a111c,0 2px 0 #090f18,0 3px 6px rgba(0,0,0,.55),0 0 16px rgba(57,183,255,.15);
  transform:perspective(600px) rotateX(7deg);transform-origin:50% 100%}

/* hero wordmark: cinematic tilt + metallic extrusion pop (chrome/blue keep gradient fill) */
.hero__word{transform:perspective(1000px) rotateX(9deg);transform-origin:50% 100%}
.hero__word .chrome{
  filter:drop-shadow(0 2px 0 rgba(150,168,186,.55)) drop-shadow(0 4px 0 rgba(70,86,102,.4))
    drop-shadow(0 9px 16px rgba(0,0,0,.7))}
.hero__word .blue{
  filter:drop-shadow(0 2px 0 rgba(12,96,190,.6)) drop-shadow(0 5px 14px rgba(10,116,230,.55))
    drop-shadow(0 0 20px var(--ice-glow))}

/* eyebrows get a gentle depth + wider cinematic tracking */
.eyebrow{text-shadow:0 1px 0 #0a111c,0 2px 8px rgba(0,0,0,.5)}

/* ============================================================
   🛗 ELEVATED TILES — cards float off the page, catch light on top,
   glow harder on hover (float gated behind .in so reveal still works)
   ============================================================ */
.cat,.f{
  background-image:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 26%);
  box-shadow:
    0 30px 46px -18px rgba(0,0,0,.78),
    0 12px 26px -12px rgba(8,40,90,.4),
    inset 0 1px 0 rgba(255,255,255,.08);
}
/* gentle continuous float once revealed */
.cat.in,.f.in{animation:tileFloat 6s ease-in-out infinite}
@keyframes tileFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.cats .cat:nth-child(1),.feat .f:nth-child(1){animation-delay:0s}
.cats .cat:nth-child(2),.feat .f:nth-child(2){animation-delay:.5s}
.cats .cat:nth-child(3),.feat .f:nth-child(3){animation-delay:1s}
.cats .cat:nth-child(4),.feat .f:nth-child(4){animation-delay:1.5s}
.feat .f:nth-child(5){animation-delay:2s}
.feat .f:nth-child(6){animation-delay:2.5s}
/* hover: pause the float + slam the elevation + blue underglow (no transform conflict) */
.cat:hover,.f:hover{
  animation-play-state:paused;
  border-color:rgba(57,183,255,.55);
  box-shadow:
    0 44px 64px -20px rgba(0,0,0,.82),
    0 0 34px var(--ice-soft),
    0 18px 40px -14px rgba(10,80,170,.5),
    inset 0 1px 0 rgba(255,255,255,.12);
}

/* ============================================================
   🔩 STAINLESS FRAME — brushed-steel bezel + staggered bolts + sheen
   wraps the showcase product photo like a real mounted panel
   ============================================================ */
.showcase__media{
  --bolt:radial-gradient(circle at 38% 32%,
    #ffffff 0%, #dbe3ec 14%, #9ba6b4 36%, #616a76 54%, #363d47 68%,
    #1a1f26 78%, rgba(0,0,0,.55) 86%, rgba(0,0,0,.15) 94%, rgba(0,0,0,0) 100%);
  padding:18px;border-radius:16px;position:relative;overflow:hidden;border:1px solid #5c6572;
  background-repeat:no-repeat;
  background-image:
    var(--bolt),var(--bolt),var(--bolt),
    var(--bolt),var(--bolt),var(--bolt),
    var(--bolt),var(--bolt),var(--bolt),var(--bolt),
    repeating-linear-gradient(118deg,rgba(255,255,255,.10) 0 2px,rgba(0,0,0,.05) 2px 4px),
    linear-gradient(150deg,#e8eff6 0%,#aab4c1 26%,#828d9b 50%,#c6cfda 66%,#767f8c 100%);
  background-size:
    16px 16px,16px 16px,16px 16px,
    16px 16px,16px 16px,16px 16px,
    16px 16px,16px 16px,16px 16px,16px 16px,
    auto,auto;
  background-position:
    17px 15px, 50% 15px, calc(100% - 17px) 15px,
    17px calc(100% - 15px), 50% calc(100% - 15px), calc(100% - 17px) calc(100% - 15px),
    15px 31%, 15px 69%, calc(100% - 15px) 31%, calc(100% - 15px) 69%,
    0 0, 0 0;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.7), inset 0 -4px 9px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.25),
    0 36px 56px -18px rgba(0,0,0,.82), 0 0 34px rgba(57,183,255,.14);
}
.showcase__media img{
  border-radius:8px;border:0;width:100%;position:relative;z-index:1;
  box-shadow:0 0 0 2px #0e131a, inset 0 0 22px rgba(0,0,0,.6);
}
.showcase__media::before{opacity:.45}
.showcase__media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:16px;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.42) 47%,rgba(255,255,255,.09) 53%,transparent 66%);
  background-size:250% 100%;background-position:-30% 0;mix-blend-mode:screen;
  animation:steelsheen 6.5s ease-in-out infinite}
@keyframes steelsheen{0%,100%{background-position:-30% 0}50%{background-position:130% 0}}

/* ============================================================
   🌈 MULTICOLOR LASER PINSTRIPE — runs the border of the steel frame
   ============================================================ */
.showcase__media{overflow:visible}
.showcase__media::before{
  content:"";position:absolute;inset:-4px;border-radius:20px;z-index:4;padding:3px;pointer-events:none;
  background:conic-gradient(from var(--kkang),
    #ff3b3b,#ff9f1c,#ffe600,#4dff5a,#2ee6ff,#3b6bff,#c04bff,#ff3bd0,#ff3b3b);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  filter:drop-shadow(0 0 5px rgba(140,190,255,.75)) drop-shadow(0 0 11px rgba(255,120,220,.4));
  animation:kkspin 4.5s linear infinite;opacity:1;
}

/* ============================================================
   🎥 HERO VIDEO (removable) + 🧊 BLUE-ICE tile lasers + embossed CALL number
   ============================================================ */
/* --- hero video background --- */
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:brightness(.9) saturate(1.05)}
.hero__vidscrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 95% at 50% 38%,rgba(8,11,17,.32),rgba(8,11,17,.72) 66%,rgba(8,11,17,.94)),
    linear-gradient(180deg,rgba(8,11,17,.5),transparent 22%,transparent 74%,rgba(8,11,17,.9))}
.hero--video .hero__flank{display:none}          /* video replaces the flank coolers */
.hero--video .hero__in{z-index:3}
.hero--video .hero__glowbar,.hero--video::after{z-index:4}

/* --- blue-white-ice laser border, ALWAYS running, on the 4 category tiles --- */
.cat::before{
  background:conic-gradient(from var(--kkang),
    #04173a, #0a74e6, #39b7ff, #a9e4ff, #ffffff, #a9e4ff, #39b7ff, #0a74e6, #04173a);
  opacity:1;
  animation:kkspin 3.8s linear infinite;
  filter:drop-shadow(0 0 4px rgba(57,183,255,.6));
}
.cat:hover::before{opacity:1;animation-duration:2s}

/* --- CALL button: icy light-blue so a BLACK, embossed number reads --- */
.btn--call{
  background:linear-gradient(180deg,#cdecff 0%,#66c2ff 52%,#2ea6ff 100%);
  color:#05141f;
  text-shadow:0 1px 0 rgba(255,255,255,.6), 0 -1px 0 rgba(4,26,50,.28);
  font-weight:800;
}
.btn--call svg{filter:drop-shadow(0 1px 0 rgba(255,255,255,.5))}

/* ============================================================
   🖼️ GALLERY → clean uniform grid (replaces the awkward mosaic)
   ============================================================ */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:auto;gap:16px}
.gallery figure{margin:0;position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:#0a0f17;aspect-ratio:4/3;box-shadow:0 20px 40px -18px rgba(0,0,0,.7)}
.gallery figure img{width:100%;height:100%;object-fit:cover;opacity:.94;transition:transform .5s,opacity .3s}
.gallery figure:hover img{transform:scale(1.05);opacity:1}
.gallery figure:hover{border-color:rgba(57,183,255,.45);box-shadow:0 26px 50px -16px rgba(0,0,0,.75),0 0 26px var(--ice-soft)}
/* neutralize old mosaic spans if any linger */
.gallery .g-wide,.gallery .g-tall,.gallery .g-sm{grid-column:auto;grid-row:auto}
@media(max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.gallery{grid-template-columns:1fr}}

/* ============================================================
   💳 MARVIN'S CARD — 3D flip business card + share/download actions
   ============================================================ */
.cardwrap{max-width:760px;margin:0 auto;text-align:center}
.bizcard{perspective:1600px;width:100%;max-width:720px;margin:0 auto;aspect-ratio:1680/945;cursor:pointer}
.bizcard__inner{position:relative;width:100%;height:100%;transition:transform .8s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.bizcard.flipped .bizcard__inner{transform:rotateY(180deg)}
.bizcard__face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;
  border-radius:16px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 34px 64px -18px rgba(0,0,0,.8),0 0 34px var(--ice-soft)}
.bizcard__face img{width:100%;height:100%;object-fit:cover;display:block}
.bizcard__back{transform:rotateY(180deg)}
.bizcard:focus-visible{outline:2px solid var(--ice);outline-offset:6px;border-radius:18px}
.card__flip{margin-top:16px}
.linklike{background:none;border:0;color:var(--ice);font-family:var(--font-head);text-transform:uppercase;
  letter-spacing:.14em;font-size:.82rem;cursor:pointer;padding:6px 10px}
.linklike:hover{color:var(--steel-hi);text-shadow:0 0 12px var(--ice-glow)}
.card__actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.card__actions .btn{font-size:.76rem;padding:11px 18px}

/* ============================================================
   🎠 MARVIN-STYLE CAROUSEL — steel frame · blue-ice · swipe + autoplay
   ============================================================ */
.carousel{position:relative;max-width:1000px;margin:0 auto;border-radius:18px;padding:10px;
  background:linear-gradient(150deg,#e8eff6,#8792a0 50%,#c6cfda 66%,#767f8c);
  box-shadow:0 34px 60px -20px rgba(0,0,0,.8),0 0 40px var(--ice-soft),inset 0 1px 0 rgba(255,255,255,.6)}
.carousel__vp{overflow:hidden;border-radius:12px;border:2px solid #0e131a;background:#0a0f17;position:relative}
.carousel__track{display:flex;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.slide{min-width:100%;position:relative;aspect-ratio:16/10;background:#0a0f17;margin:0}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
.slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 26px 18px;
  background:linear-gradient(180deg,transparent,rgba(6,10,17,.9))}
.slide figcaption b{display:block;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.04em;
  font-size:1.3rem;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.7)}
.slide figcaption span{display:block;color:var(--ice);font-size:.9rem;letter-spacing:.03em;margin-top:2px;
  text-shadow:0 1px 4px rgba(0,0,0,.8)}
/* top blue laser hairline inside the frame */
.carousel__vp::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--ice),transparent);box-shadow:0 0 14px var(--ice-glow)}
.carousel__nav{position:absolute;top:calc(50% - 26px);width:52px;height:52px;border-radius:50%;z-index:4;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#05141f;border:0;
  background:linear-gradient(180deg,#cdecff,#5cc4ff 55%,#2ea6ff);
  box-shadow:0 8px 22px rgba(10,116,230,.5),inset 0 1px 0 rgba(255,255,255,.6);transition:transform .15s,box-shadow .2s}
.carousel__nav svg{width:24px;height:24px}
.carousel__nav:hover{transform:scale(1.08);box-shadow:0 10px 28px rgba(10,116,230,.7),0 0 20px var(--ice-glow)}
.carousel__nav.prev{left:20px}.carousel__nav.next{right:20px}
.carousel__dots{display:flex;gap:9px;justify-content:center;padding:14px 0 4px}
.carousel__dots button{width:9px;height:9px;border-radius:50%;border:0;cursor:pointer;padding:0;
  background:rgba(120,135,168,.5);transition:all .25s}
.carousel__dots button.on{background:var(--ice);box-shadow:0 0 10px var(--ice-glow);width:26px;border-radius:5px}
@media(max-width:560px){
  .carousel__nav{width:44px;height:44px;top:calc(50% - 40px)}
  .carousel__nav.prev{left:10px}.carousel__nav.next{right:10px}
  .slide figcaption b{font-size:1.05rem}
}