/* ============================================================
   AUTOMATION GALLERY — v4 UPGRADE LAYER
   Loaded AFTER style.css on every page. Re-skins existing
   markup into the new Sora / glossy design language.
   ============================================================ */
:root{
  --red:#E0202F; --red-dk:#b3121f; --red2:#ff6a2b;
  --grad:linear-gradient(110deg,#E0202F 0%,#ff6a2b 100%);
  --ink:#0E1116; --ink2:#3a414c; --muted:#7c828d; --line:#E2E5EA;
  --bg:#F5F6F8; --bg2:#ECEEF2; --bg3:#e4e7ec; --charcoal:#3a414c;
  --d1:#0B0D11; --d2:#12151b;
  --font-head:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --r:18px; --ease:cubic-bezier(.22,1,.36,1); --glow:0 10px 40px rgba(224,32,47,.40);
  --shadow:0 18px 50px rgba(14,17,22,.10);
}
html{scroll-behavior:smooth;scroll-padding-top:96px;}
body.lux{font-family:var(--font-body);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;}

body.lux h1,body.lux h2,body.lux h3,body.lux h4,body.lux h5{font-family:var(--font-head);letter-spacing:-.02em;}
.grad,.gradtext{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
::selection{background:var(--red);color:#fff;}

/* eyebrow / kick */
.eyebrow,.kick{font-family:var(--font-body)!important;font-size:12px!important;font-weight:700!important;letter-spacing:.2em!important;text-transform:uppercase!important;color:var(--red)!important;}
.kick{display:inline-flex;align-items:center;gap:10px;}
.kick::before{content:"";width:24px;height:2px;background:var(--grad);display:inline-block;border-radius:2px;}

/* ---------- NAV (white glass + real logo) ---------- */
nav{position:sticky;top:0;z-index:120;background:rgba(255,255,255,.92);backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid var(--line);transition:transform .45s var(--ease),box-shadow .4s;}
nav.hide{transform:translateY(-100%);}
nav.scrolled{box-shadow:0 6px 24px rgba(14,17,22,.08);}
nav .wrap{height:76px;display:flex;align-items:center;justify-content:space-between;}
.brand img{height:40px!important;width:auto!important;}
.navlinks a{font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--ink2);position:relative;}
.navlinks a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--grad);transition:width .3s var(--ease);border-radius:2px;}
.navlinks a:hover::after,.navlinks a.active::after{width:100%;}
.navlinks a:hover,.navlinks a.active{color:var(--ink);}

/* ---------- BUTTONS ---------- */
.btn{font-family:var(--font-body);border-radius:100px;font-weight:600;transition:transform .35s var(--ease),box-shadow .3s,background .3s,color .3s,border-color .3s;border:1.5px solid transparent;}
.btn.red{background:var(--grad);color:#fff;box-shadow:var(--glow);}
.btn.red:hover{box-shadow:0 16px 54px rgba(224,32,47,.6);transform:translateY(-2px);}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn.ghost:hover{background:var(--ink);color:#fff;}
.btn.light{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.34);backdrop-filter:blur(8px);}
.btn.light:hover{background:rgba(255,255,255,.22);}
.btn.lg{padding:16px 30px;font-size:16px;}
.btn.sm{padding:10px 18px;font-size:13.5px;}
.fab{background:var(--grad)!important;box-shadow:var(--glow)!important;border:none!important;font-family:var(--font-body)!important;border-radius:100px!important;}

/* ---------- HERO (.phero) — dark cinematic ---------- */
.phero{position:relative;min-height:84vh;display:flex;align-items:center;overflow:hidden;color:#fff;}
.phero .bgimg{filter:saturate(1.05);}
.phero .scrim{background:linear-gradient(100deg,rgba(11,13,17,.92) 0%,rgba(11,13,17,.66) 48%,rgba(224,32,47,.34) 100%)!important;}
.phero .scrim2{background:linear-gradient(0deg,rgba(11,13,17,.78),transparent 46%)!important;}
.phero h1{font-family:var(--font-head);font-weight:800;letter-spacing:-.03em;line-height:1.05;font-size:clamp(34px,5vw,60px);text-shadow:0 2px 30px rgba(0,0,0,.3);}
.phero .kick{color:#ff8a78!important;}
.phero .kick::before{background:#ff8a78;}
.phero .lead,.phero p{color:#d7dae0;}

/* ---------- SECTIONS ---------- */
.section{padding:88px 0;}
.section.lux{background:var(--bg);}
.section.cream{background:var(--bg2);}
.section.dark{background:var(--d1);color:#fff;}
.section.dark h1,.section.dark h2,.section.dark h3,.section.dark h4{color:#fff;}
.section.dark .lead,.section.dark p{color:#c4c9d2;}
.section h2{letter-spacing:-.03em;}
.lead{color:var(--ink2);}

/* ---------- CARDS (generic glass upgrade) ---------- */
.prodcard,.solncard,.needbox,.smx,.varcard,.chprod,.prj,.cert,.ncell,.p4,.subsol,.ssi,.reccard,.spitem{
  border-radius:var(--r);transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;
}
.prodcard,.solncard,.needbox,.varcard,.prj,.cert{
  background:#fff;border:1px solid var(--line);box-shadow:0 14px 40px rgba(14,17,22,.06);overflow:hidden;
}
.prodcard:hover,.solncard:hover,.needbox:hover,.varcard:hover,.prj:hover,.cert:hover,.smx:hover{
  transform:translateY(-6px);box-shadow:0 30px 70px rgba(14,17,22,.16);border-color:#d8dce2;
}
.prodcard h4,.prj h3,.needbox h4,.varcard h4{font-family:var(--font-head);}
.prodcard .more,.vlink{color:var(--red)!important;font-weight:600;}
.section.dark .smx{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);}
.section.dark .smx:hover{background:rgba(255,255,255,.07);}

/* numbers band */
.numbers{background:var(--d1);color:#fff;}
.numbers .n,.ncell .n{font-family:var(--font-head);font-weight:800;letter-spacing:-.03em;}
.ncell .u,.cnt+.u{color:#ff8a78;}
.numbers .ncell{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--r);}

/* band / cta strips */
.band{background:var(--d1)!important;color:#fff;border-radius:0;}
.band h2,.band h3{color:#fff;}

/* gallery */
.gallery3 img{border-radius:14px;}

/* sheen helper */
.sheen{position:relative;overflow:hidden;}
.sheen::after{content:"";position:absolute;top:-30%;left:-70%;width:45%;height:160%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);transition:left .8s var(--ease);pointer-events:none;z-index:3;}
.sheen:hover::after{left:140%;}

/* finder + explore accent refresh (classes already styled in style.css; nudge to brand) */
.recprods .rp:hover,.rp:hover{border-color:var(--red)!important;color:var(--red)!important;}
.sptab.active svg,.sptab.active span{color:var(--red);}

/* ---------- FOOTER (dark) ---------- */
footer{background:var(--d1);color:#aeb3bc;padding:72px 0 38px;}
footer .flogo{filter:brightness(0) invert(1);opacity:.96;height:42px!important;width:auto!important;}
footer h5{font-family:var(--font-body);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:#6f7681;}
footer p{color:#aeb3bc;}
footer a{color:#aeb3bc;}footer a:hover{color:#fff;}
.fbot{border-top:1px solid rgba(255,255,255,.1);color:#6f7681;}

/* ---------- ANIMATION CHROME (injected by app-v4.js) ---------- */
.v4-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad);z-index:200;box-shadow:0 0 12px rgba(224,32,47,.7);}
.v4-grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.04;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.v4-cur,.v4-curd{position:fixed;top:0;left:0;z-index:300;pointer-events:none;border-radius:50%;}
.v4-cur{width:36px;height:36px;border:1.5px solid var(--red);transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease),background .25s,border-color .25s;}
.v4-curd{width:6px;height:6px;background:var(--red);transform:translate(-50%,-50%);}
.v4-cur.big{width:68px;height:68px;background:rgba(224,32,47,.10);border-color:transparent;}
@media(pointer:coarse){.v4-cur,.v4-curd{display:none;}}

/* reveal */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;}body.lux{cursor:auto;}.v4-cur,.v4-curd{display:none;}}

/* focus + scrollbar polish */
a:focus-visible,.btn:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:3px;}
@media(pointer:fine){::-webkit-scrollbar{width:12px;height:12px;}::-webkit-scrollbar-thumb{background:#cfd3da;border-radius:10px;border:3px solid var(--bg);}::-webkit-scrollbar-thumb:hover{background:#b6bbc4;}}

/* ===== v4 premium image integration (inner pages) ===== */
.phero .bgimg{filter:saturate(1.07) contrast(1.04) brightness(1.0);}
.prodcard img,.lvis img,.prj .ph img,.gallery3 img,.chprod img,.varcard img,.cert img,.needbox img{filter:saturate(1.06) contrast(1.03);}
.lvis,.prj .ph,.gallery3 figure,.prodcard .pthumb{position:relative;box-shadow:0 24px 60px rgba(14,17,22,.12);}
.lvis::after,.prj .ph::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 22%),linear-gradient(0deg,rgba(14,17,22,.22),transparent 40%);}
.prodcard .pthumb{overflow:hidden;}
.prodcard .pthumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(14,17,22,.12));}

/* ============ LIGHT THEME ALIGNMENT (no black flat sections) ============ */
:root{--red:#D4202E;--grad:linear-gradient(110deg,#D4202E,#ff6a2b);}
.section.dark{background:#F6F3EE!important;color:var(--ink)!important;}
.section.dark h1,.section.dark h2,.section.dark h3,.section.dark h4{color:var(--ink)!important;}
.section.dark .lead,.section.dark p{color:var(--ink2)!important;}
.section.dark .smx{background:#fff;border:1px solid var(--line);}
.section.dark .smx h4{color:var(--ink);}
.numbers{background:#F6F3EE!important;color:var(--ink)!important;}
.numbers h2,.numbers .lead{color:var(--ink)!important;}
.numbers .ncell{background:#fff;border:1px solid var(--line);}
.numbers .n,.ncell .n{color:var(--ink);}
.numbers .ncell .l{color:var(--ink2);}
.band{background:#F6F3EE!important;color:var(--ink)!important;}
.band h2,.band h3,.band p{color:var(--ink)!important;}
footer{background:#15131A;}

.v4-cur,.v4-curd,.ag-spark{display:none!important;}
body.lux{cursor:auto!important;}

/* slow-flow hero heading (consistency with home) */
@media(prefers-reduced-motion:no-preference){
  .phero h1{animation:agflow 12s ease-in-out infinite;}
  @keyframes agflow{0%,100%{transform:translate(0,0);}50%{transform:translate(5px,-3px);}}
}

/* ===== page-load banner + masked reveal (inner pages) ===== */
.v4intro{position:fixed;inset:0;z-index:400;background:linear-gradient(160deg,#FBF8F2,#F1EAE0);display:grid;place-items:center;transition:transform .9s cubic-bezier(.22,1,.36,1);overflow:hidden;}
.v4intro.done{transform:translateY(-101%);}
.v4intro .vi-mark{position:relative;overflow:hidden;opacity:0;transform:translateY(12px) scale(.97);animation:viin .9s cubic-bezier(.22,1,.36,1) .1s forwards;}
.v4intro .vi-mark img{height:62px;width:auto;display:block;}
.v4intro .vi-shine{position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.92),transparent);transform:skewX(-18deg);animation:vishine 1.4s cubic-bezier(.22,1,.36,1) .6s;}
.v4intro .vi-line{width:0;height:2px;margin:22px auto 0;background:linear-gradient(90deg,var(--red),#ff8a3d);border-radius:2px;animation:viline .9s cubic-bezier(.22,1,.36,1) .5s forwards;}
@keyframes viin{to{opacity:1;transform:none;}}
@keyframes vishine{to{left:135%;}}
@keyframes viline{to{width:150px;}}
.v4-mreveal{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.22,1,.36,1);}
.v4-mreveal.in{clip-path:inset(0 0 0 0);}
@media(prefers-reduced-motion:reduce){.v4intro{display:none!important;}.v4-mreveal{clip-path:none;}}