/* ══════════════════════════════════════════════════════
   EAV WEBSITE — BASE.CSS
   Shared across ALL public pages. Page-specific styles
   live in contact.css / products.css / product.css / index.css
══════════════════════════════════════════════════════ */

/* ─── BRAND TOKENS ─── */
:root{
  --g1:#22A86C;--g2:#2B9A7E;--g3:#3A7E90;--g4:#4C6490;--g5:#565090;
  --lime:#C4DC38;
  --grad:linear-gradient(135deg,#22A86C 0%,#2B9A7E 30%,#4C6490 70%,#565090 100%);
  --grad-h:linear-gradient(90deg,#22A86C,#3A7E90,#565090);
  --grad-45:linear-gradient(45deg,#22A86C,#565090);
  --grad-diag:linear-gradient(118deg,#22A86C 0%,#2B9A7E 35%,#4C6490 72%,#565090 100%);
  --grad-text:linear-gradient(110deg,#22A86C 0%,#3A7E90 45%,#565090 100%);
  --grad-lime:linear-gradient(135deg,#C4DC38,#22A86C);
  --bg:#07090E;--bg2:#0B0F16;--bg3:#10161F;
  --surf:#131C27;--surf2:#192333;
  --bdr:rgba(255,255,255,.07);--bdr2:rgba(255,255,255,.13);--bdr-a:rgba(34,168,108,.22);
  --txt:#DCE6F2;--txt2:#798EA8;--txt3:#3D5068;
  --nav-bg:rgba(7,9,14,.88);
  --shad:0 24px 80px rgba(0,0,0,.55);
  --shad-s:0 6px 28px rgba(0,0,0,.35);
  --glow-g:rgba(34,168,108,.16);
  --glow-v:rgba(86,80,144,.16);
  --r:14px;--rl:22px;
}
[data-theme="light"]{
  --bg:#EFF3F9;--bg2:#FFFFFF;--bg3:#E5EBF5;
  --surf:#FFFFFF;--surf2:#EAF0F8;
  --bdr:rgba(0,0,0,.08);--bdr2:rgba(0,0,0,.15);--bdr-a:rgba(34,168,108,.25);
  --txt:#0C1520;--txt2:#485870;--txt3:#98AABB;
  --nav-bg:rgba(239,243,249,.93);
  --shad:0 16px 60px rgba(0,0,0,.09);
  --shad-s:0 4px 20px rgba(0,0,0,.07);
  --glow-g:rgba(34,168,108,.11);
  --glow-v:rgba(86,80,144,.09);
}

/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--txt);overflow-x:hidden;line-height:1.65;transition:background .35s,color .35s}
h1,h2,h3,h4{font-family:'Outfit',sans-serif;line-height:1.08;letter-spacing:-.025em}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;background:none;font-family:inherit}
img{max-width:100%;height:auto}

/* ─── LAYOUT UTILITIES ─── */
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 28px;position:relative;z-index:1}
.gt{background:var(--grad-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gbar{height:2.5px;background:var(--grad);opacity:.55}
.stag{display:inline-flex;align-items:center;gap:9px;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--g1);margin-bottom:14px}
.stag::before{content:'';width:22px;height:2.5px;border-radius:2px;background:var(--grad-h);flex-shrink:0}
.sh{font-size:clamp(1.75rem,3.5vw,2.75rem);font-weight:900;margin-bottom:14px}
.ssub{font-size:1rem;color:var(--txt2);line-height:1.78;max-width:560px}
.sr{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}
.sr.on{opacity:1;transform:translateY(0)}
.d1{transition-delay:.09s}.d2{transition-delay:.18s}.d3{transition-delay:.27s}.d4{transition-delay:.36s}

/* ─── BUTTONS ─── */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:'Outfit',sans-serif;font-weight:700;font-size:.9rem;padding:13px 30px;border-radius:9px;white-space:nowrap;transition:transform .22s,box-shadow .22s;letter-spacing:-.01em;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn-g{background:var(--grad);color:#fff;box-shadow:0 4px 24px rgba(34,168,108,.22),0 4px 24px rgba(86,80,144,.14)}
.btn-g:hover{box-shadow:0 14px 40px rgba(34,168,108,.36),0 14px 40px rgba(86,80,144,.24)}
.btn-o{border:1.5px solid var(--bdr2);color:var(--txt);background:transparent}
.btn-o:hover{border-color:var(--g2);color:var(--g2)}
.btn-sm{padding:10px 22px;font-size:.83rem}

/* ─── NAV ─── */
#nav{position:fixed;inset:0 0 auto;z-index:900;height:68px;background:var(--nav-bg);backdrop-filter:blur(28px) saturate(180%);border-bottom:1px solid var(--bdr);transition:background .35s,border-color .35s}
.nav-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:2px;font-family:'Outfit',sans-serif;font-weight:800;font-size:1.05rem;letter-spacing:-.02em}
.lmark{width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.lmark svg{width:100%;height:100%;overflow:visible}
.lmark img{display:block}
.brand-text{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;line-height:1.15}
.brand-main{font-size:1.0rem;font-weight:800;letter-spacing:-.02em}
.brand-sub{font-size:.62rem;font-weight:400;color:var(--txt2);letter-spacing:.02em;margin-top:1px}
.nav-ul{display:flex;align-items:center;gap:2px;list-style:none}
.nav-ul a{padding:7px 15px;border-radius:7px;font-size:.875rem;font-weight:500;color:var(--txt2);transition:color .2s,background .2s}
.nav-ul a:hover,.nav-ul a.active{color:var(--txt);background:var(--surf2)}
.nav-ul a.active{color:var(--g1)}
.nav-r{display:flex;align-items:center;gap:12px;flex-shrink:0}

/* Theme toggle removed — theme lives inside the preferences panel */


/* CTA + Burger */
.ncta{font-weight:700;font-size:.85rem;padding:9px 22px;border-radius:8px;color:#fff;background:var(--grad);box-shadow:0 4px 20px rgba(34,168,108,.28);transition:opacity .2s,transform .2s}
.ncta:hover{opacity:.9;transform:translateY(-1px)}
.burger{display:none;flex-direction:column;gap:5px;width:34px;padding:5px}
.burger span{display:block;height:2px;border-radius:2px;background:var(--txt);transition:transform .3s,opacity .3s}
.burger.open span:first-child{transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:last-child{transform:translateY(-7px) rotate(-45deg)}

/* Mobile menu */
.mmenu{display:none;position:fixed;top:68px;inset-inline:0;background:var(--bg2);border-bottom:1px solid var(--bdr);z-index:850;padding:16px 20px 24px;flex-direction:column;gap:4px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .25s,transform .25s}
.mmenu.open{opacity:1;transform:translateY(0);pointer-events:all}
.mmenu a{display:block;padding:11px 14px;border-radius:8px;font-size:.95rem;font-weight:500;color:var(--txt2);transition:background .2s,color .2s}
.mmenu a:hover{background:var(--surf2);color:var(--txt)}
.mcta-m{margin-top:10px;background:var(--grad)!important;color:#fff!important;text-align:center;font-weight:700;border-radius:8px}

/* ─── PREFERENCES PANEL ─── */
.nav-prefs{position:relative}

/* Trigger — icon + compact locale chip */
.nav-prefs-trigger{display:flex;align-items:center;gap:6px;height:34px;padding:0 11px;border-radius:8px;border:1px solid var(--bdr2);background:var(--surf);color:var(--txt3);font-family:'Outfit',sans-serif;font-size:.76rem;font-weight:700;cursor:pointer;transition:background .2s,color .2s,border-color .2s,box-shadow .2s;letter-spacing:.01em}
.nav-prefs-trigger:hover,.nav-prefs-open .nav-prefs-trigger{background:var(--surf2);color:var(--txt);border-color:var(--bdr-a);box-shadow:0 0 0 3px var(--glow-g)}
.nav-prefs-chip{letter-spacing:.04em;font-size:.72rem;font-weight:700;color:inherit}
.nav-prefs-chevron{flex-shrink:0;transition:transform .22s cubic-bezier(.4,0,.2,1);color:var(--txt3)}
.nav-prefs-open .nav-prefs-chevron{transform:rotate(180deg)}

.nav-prefs-panel{position:absolute;top:calc(100% + 10px);right:0;width:280px;background:var(--bg2);border:1px solid var(--bdr2);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.38),0 4px 16px rgba(0,0,0,.22);backdrop-filter:blur(20px) saturate(160%);z-index:950;overflow:hidden;opacity:0;transform:translateY(-8px) scale(.97);pointer-events:none;transition:opacity .22s cubic-bezier(.4,0,.2,1),transform .22s cubic-bezier(.4,0,.2,1)}
.nav-prefs-open .nav-prefs-panel{opacity:1;transform:translateY(0) scale(1);pointer-events:all}

.npp-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid var(--bdr)}
.npp-header-title{font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--txt3)}
.npp-close{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--txt3);cursor:pointer;transition:background .18s,color .18s;flex-shrink:0}
.npp-close:hover{background:var(--surf2);color:var(--txt)}

.npp-section{padding:12px 14px}
.npp-section-label{display:flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3);margin-bottom:8px}

.npp-options{display:flex;flex-direction:column;gap:2px}
.npp-option{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:9px;text-decoration:none;color:var(--txt2);font-size:.84rem;font-weight:500;transition:background .16s,color .16s;cursor:pointer}
.npp-option:hover{background:var(--surf2);color:var(--txt)}
.npp-option-active{background:var(--surf2);color:var(--txt)}
.npp-option-symbol{font-weight:700;color:var(--g1);min-width:18px;text-align:center;font-size:.9rem}
.npp-option-name{flex:1}
.npp-option-code{font-size:.72rem;font-weight:700;color:var(--txt3);letter-spacing:.06em}
.npp-check{color:var(--g1);flex-shrink:0;margin-left:auto}
.npp-option-active .npp-option-code{color:var(--g1)}
.npp-divider{height:1px;background:var(--bdr);margin:0 14px}

.npp-theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.npp-theme-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border-radius:10px;border:1.5px solid var(--bdr);background:var(--surf);color:var(--txt2);font-family:'Outfit',sans-serif;font-size:.76rem;font-weight:600;cursor:pointer;transition:border-color .18s,background .18s,color .18s,box-shadow .18s}
.npp-theme-btn:hover{border-color:var(--bdr2);background:var(--surf2);color:var(--txt)}
.npp-theme-btn.npp-theme-active{border-color:var(--g1);background:rgba(34,168,108,.1);color:var(--g1);box-shadow:0 0 0 3px var(--glow-g)}

/* Mobile prefs chips */
.mmenu-prefs{display:flex;flex-direction:column;gap:10px;padding:12px 14px;margin:6px 0;background:var(--surf);border:1px solid var(--bdr);border-radius:12px}
.mmenu-prefs-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mmenu-prefs-lbl{display:flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--txt3);min-width:74px;flex-shrink:0}
.mmenu-prefs-chips{display:flex;flex-wrap:wrap;gap:5px}
.mmenu-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 11px;border-radius:20px;border:1.5px solid var(--bdr2);background:var(--bg2);color:var(--txt2);font-family:'Outfit',sans-serif;font-size:.76rem;font-weight:600;text-decoration:none;cursor:pointer;transition:border-color .18s,color .18s,background .18s,box-shadow .18s;white-space:nowrap}
.mmenu-chip:hover{color:var(--txt);background:var(--surf2)}
.mmenu-chip-active{border-color:var(--g1)!important;color:var(--g1)!important;background:rgba(34,168,108,.08)!important;box-shadow:0 0 0 2px var(--glow-g)}

/* ─── PAGE HERO (shared across contact/products/product) ─── */
#phero{position:relative;padding:148px 0 72px;overflow:hidden}
.ph-grid{position:absolute;inset:0;background-image:linear-gradient(var(--bdr) 1px,transparent 1px),linear-gradient(90deg,var(--bdr) 1px,transparent 1px);background-size:60px 60px;opacity:.22;pointer-events:none;z-index:1;mask-image:radial-gradient(ellipse 90% 100% at 50% 0%,black,transparent 90%);-webkit-mask-image:radial-gradient(ellipse 90% 100% at 50% 0%,black,transparent 90%)}
.ph-in{position:relative;z-index:2}
.ph-bc{display:flex;align-items:center;gap:7px;font-size:.78rem;color:var(--txt3);margin-bottom:16px}
.ph-bc a{color:var(--txt3);transition:color .2s}.ph-bc a:hover{color:var(--g1)}
h1.ph-h1{font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:900;letter-spacing:-.03em;margin-bottom:10px;position:relative;z-index:1}
.ph-sub{font-size:.95rem;color:var(--txt2);max-width:520px;line-height:1.78;position:relative;z-index:1}

/* ─── FOOTER ─── */
#footer{background:var(--bg2);border-top:1px solid var(--bdr);padding:28px 0}
.fbot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.fbot p{font-size:.8rem;color:var(--txt3)}
.fbadge{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3);border:1px solid var(--bdr2);padding:5px 12px;border-radius:20px}

/* ─── RESPONSIVE NAV ─── */
@media(max-width:768px){
  .nav-ul,.ncta,.nav-prefs{display:none}
  .burger{display:flex}
  .mmenu{display:flex}
}