/* ═══ DelivCore — LIGHT REDESIGN (test) — porcelain premium ═══
   Loaded last; overrides the dark theme. Dark "product islands" kept:
   .phone, .cfg-code/.code, .device frames, .dash — product shots pop on light. */

:root{
  --void:#F3F4EE;
  --panel:#FFFFFF; --panel2:#F7F8F3;
  --line:rgba(94,140,40,.22);
  --hair:rgba(20,28,16,.09); --hair-2:rgba(20,28,16,.15);
  --cyan:#5E8C1E; --glow:#7FB334; --signal:#C77E14;
  --mist:#17211A; --muted:rgba(23,33,26,.62);
  --surface:linear-gradient(180deg,#FFFFFF,#F7F8F2);
}

/* pricing: AI and migration surfaces need readable contrast on porcelain */
.ai-section .ai-card{background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(247,249,241,.92));border-color:rgba(94,140,30,.20);box-shadow:0 12px 28px rgba(31,48,22,.06)}
.ai-section .ai-card.featured{background:linear-gradient(145deg,rgba(225,241,197,.98),rgba(248,250,243,.94));border-color:rgba(94,140,30,.38)}
.ai-section .ai-card p{color:rgba(23,33,26,.80)}
.ai-section .ai-card .ai-num{color:rgba(94,140,30,.34)}
.ai-section .ai-action span{color:#34452f;border-color:rgba(94,140,30,.22);background:rgba(94,140,30,.055)}
.ai-section .ai-signal{color:#34452f;background:rgba(143,197,62,.10);border-color:rgba(94,140,30,.32)}
.migbar-tx h3{color:#17211a}
.migbar-tx p{color:rgba(23,33,26,.78)}

/* page base */
body{
  color:var(--mist);
  background:
    radial-gradient(1100px 620px at 50% -8%,rgba(126,179,52,.10),transparent 62%),
    linear-gradient(180deg,#F6F7F1,#F3F4EE 42%,#EEF0E7) !important;
  background-attachment:scroll !important;
}
.grid-bg{opacity:.5;background-image:linear-gradient(rgba(94,140,40,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(94,140,40,.07) 1px,transparent 1px)}
.aurora{opacity:.5}
/* .field collides with contact-form rows — restore them */
.form .field,.frow .field{opacity:1}

/* nav */
header.nav{background:rgba(246,247,241,.82);border-bottom:1px solid var(--hair)}
header.nav.scrolled{background:rgba(246,247,241,.95);box-shadow:0 8px 30px rgba(20,28,16,.08)}
header.nav.open .nav-links{background:rgba(248,249,244,.98);border-bottom:1px solid var(--hair);box-shadow:0 22px 50px rgba(20,28,16,.14)}
header.nav.open .nav-links a:not(.btn){color:var(--mist);border-bottom:1px solid rgba(20,28,16,.06)}
.sub-menu-inner{background:rgba(255,255,255,.98);border:1px solid var(--hair);box-shadow:0 22px 50px rgba(20,28,16,.14)}
.sub-menu-inner a:hover{background:rgba(94,140,40,.07)}
.brand-lockup text{fill:#3F6414}
@media (max-width:860px){header.nav{background:rgba(246,247,241,.97)!important}}
@media (max-width:820px){header.nav{background:rgba(246,247,241,.97)!important}}

/* generic surfaces */
.card,.eco,.counter,.step,.price,.qa,.arch .card,.stat-row .card,.plan,.inc li,
.why .card,.vals .card,.testi,.infra,.chip,.who .chip{
  background:var(--surface);border-color:var(--hair);
  box-shadow:0 1px 2px rgba(20,28,16,.04),0 12px 32px rgba(20,28,16,.06);
}
/* Verde de text pe fond deschis: #4E7A16 = 4,55:1 pe porcelain (trece AA).
   --cyan (#5E8C1E) dă doar 3,62:1, iar --glow (#7FB334) 2,26:1 — sub AA pe text mic.
   #4E7A16 e deja verdele de link din light (vezi mai jos), deci nu introduc o culoare nouă. */
.pill,.tag,.readout span,.eyebrow{color:#4E7A16}
.btn-ghost{border-color:rgba(23,33,26,.25);color:var(--mist)}
.btn-ghost:hover{border-color:var(--cyan)}
.btn-primary{background:linear-gradient(180deg,#8FC53E,#6DA426);color:#0B1406;box-shadow:0 10px 26px rgba(94,140,40,.35)}
.lang-toggle{background:rgba(20,28,16,.05);border-color:var(--hair);color:var(--muted)}
.nav-sub-btn{color:var(--muted)}
.nav-sub-btn:hover{color:var(--mist)}
.nav-links a:not(.btn){color:var(--muted)}
.nav-links a:not(.btn):hover{color:var(--mist)}

/* eco grid (ecosystem) */
.eco-grid{background-color:#FAFBF6;border-color:rgba(94,140,40,.30);
  background-image:linear-gradient(rgba(94,140,40,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(94,140,40,.06) 1px,transparent 1px)}
.eco-grid::before{background-image:linear-gradient(rgba(94,140,40,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(94,140,40,.22) 1px,transparent 1px)}
.eco{border-right:1px dashed rgba(94,140,40,.14);border-bottom:1px dashed rgba(94,140,40,.14);background:transparent;box-shadow:none}
.eco:hover{background:rgba(94,140,40,.05)}
.eco.core,.eco.flag{background:rgba(94,140,40,.055)}
.eco-ic{color:rgba(23,33,26,.55)}
.eco-soon{color:var(--cyan);background:rgba(94,140,40,.10);border-color:rgba(94,140,40,.35)}

/* glass fills that assumed dark */
.inc li{background:#FFFFFF}
.plan.feat{border-color:rgba(94,140,40,.5);background:linear-gradient(180deg,rgba(143,197,62,.10),#FFFFFF)}
.commission-badge{background:linear-gradient(180deg,rgba(143,197,62,.18),#FFFFFF);border-color:rgba(94,140,40,.4)}
details.qa{background:var(--surface)}
.a{color:var(--muted)}

/* dark product islands — keep them dark, add lift */
.phone,.cfg-code,.code,.device,.bchrome,.dash{color-scheme:dark}
.cfg-code,.device.browser,.dash{box-shadow:0 30px 70px rgba(20,28,16,.25)}
.panel-bar span{color:#9AA4B2}

/* Carduri evidențiate: gradientele lor coborau într-un stop bleumarin din designul dark
   (`rgba(11,19,31,.5)`, `rgba(15,24,38,.4/.5)`). Pe dark se topește în panou; pe porcelain
   ieșea gri murdar, cu textul stând pe o suprafață tot mai închisă. Păstrez tenta verde de
   sus — ele TREBUIE să rămână evidențiate — și duc capătul de jos în alb.
   `.card.feat.hl` = 11 pagini, `.gest-card.feat` = gestiune + dispecerat, `.callout` = hardware. */
html .card.feat.hl{background-image:linear-gradient(180deg,rgba(143,197,62,.16),rgba(255,255,255,.95))}
html .gest-card.feat{background-image:linear-gradient(180deg,rgba(143,197,62,.14),rgba(255,255,255,.95))}
html .callout{background-image:linear-gradient(180deg,rgba(143,197,62,.14),rgba(255,255,255,.95))}

/* showcases */
/* `.sc-copy .pill` nu mai e o pastilă: paginile îl redefinesc ca etichetă serif italică,
   fără padding, fără rază și fără bordură (verificat: 29/29 pe index, platforma și green).
   Fundalul rămas de la designul vechi se lipea ca o pată dreptunghiulară în jurul textului,
   doar pe light — pe dark elementul n-are fundal deloc. Păstrez doar culoarea bordurii,
   inofensivă cât timp border-width e 0. */
.sc-copy .pill{border-color:rgba(94,140,40,.3)}
.sc-feats li{color:var(--muted)}
.burl{color:#9AA4B2}

/* configurator presets */
.preset{background:#FFFFFF;border-color:var(--hair);color:var(--muted)}
.preset.active{border-color:var(--brand,#5E8C1E);color:var(--mist);box-shadow:0 0 0 3px rgba(143,197,62,.18)}
.cfg-hint{color:var(--muted)}
.theme-toggle{background:#FFFFFF;border:1px solid var(--hair)}

/* stats / counters accents */
.counter b,.stat-row b,.est .out .big{color:var(--cyan);-webkit-text-fill-color:initial;background:none}
.est .out{background:var(--surface);border-color:var(--hair)}
.ctrl input[type=range]{accent-color:#5E8C1E}

/* footer */
.site-foot,.foot{border-color:var(--hair)}
.foot-cols a{color:var(--muted)}
.foot-cols a:hover{color:var(--mist)}
.foot-cols h5{color:var(--mist)}

/* progress bar + selection */
.progress{background:linear-gradient(90deg,#5E8C1E,#7FB334);box-shadow:0 0 12px rgba(94,140,40,.5)}
::selection{background:rgba(143,197,62,.35)}

/* text on things that hardcoded near-white */
h1,h2,h3,h5,.lede,.pull,.vh{color:var(--mist)}
.lead,p{color:var(--muted)}
.sc-copy h3,.sec-head h2{color:var(--mist)}

/* ── v2: hero + chips fixes ── */
.hero::before{background:linear-gradient(90deg,#F6F7F1 0%,rgba(246,247,241,.94) 22%,rgba(246,247,241,.55) 46%,transparent 72%)!important}
.hero h1,.mk-hero h1{color:var(--mist)}
.hero h1 .accent,.mk-hero h1 .accent{background:linear-gradient(120deg,#5E8C1E,#7FB334)!important;background-size:100% auto!important;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:none!important}
.net-badge,.order-strip{background:rgba(255,255,255,.8)!important;border:1px solid var(--hair)!important;color:var(--muted)!important;box-shadow:0 8px 24px rgba(20,28,16,.10)}
.net-badge .bdot,.order-strip .bdot{filter:saturate(1.2)}
.order-strip b{color:var(--mist)}
.readout span{background:rgba(255,255,255,.75);border:1px solid var(--hair);color:var(--muted)}
.hero .lead b{color:var(--mist)!important}

/* ── v3: accent clip fix + text washes ── */
.hero h1 .accent,.mk-hero h1 .accent{
  background:none!important;
  background-image:linear-gradient(120deg,#5E8C1E,#7FB334)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  color:transparent!important;-webkit-text-fill-color:transparent!important;animation:none!important;
}
.sec-head p{color:var(--muted)!important}
.sec-head h2{color:var(--mist)!important}
.gallery figcaption,.g-cap{color:var(--muted)}

/* ── v4: lead + tail sections ── */
.lead{color:var(--muted)!important}
.lead b{color:var(--mist)!important}
.hero .lead{color:var(--muted)!important}
.step p,.counter span,.arch .card span,.infra span{color:var(--muted)}
.step b,.arch .card b,.infra b{color:var(--mist)}

/* ── v5: dark islands keep dark-theme vars inside ── */
.cfg-code,.code,.phone:not(.light),.dash,.device,.bchrome,.bscreen{
  --mist:#E8F1F8;--muted:rgba(232,241,248,.62);
  --line:rgba(143,197,62,.16);--hair:rgba(255,255,255,.07);--hair-2:rgba(255,255,255,.12);
  --panel:#0F1826;--panel2:#0c1420;
  --cyan:#8FC53E;--glow:#C2EE74;
  --surface:linear-gradient(180deg,rgba(24,35,53,.62),rgba(11,19,31,.62));
}
.cfg-code .code,.cfg-code pre{color:#E8F1F8}

/* ── v6: phone mock text inherits ink — restore light text inside dark phone ── */
.phone:not(.light){color:#E8F1F8}
.phone:not(.light) .ph-h,.phone:not(.light) .ph-head b,.phone:not(.light) .ph-info b{color:#E8F1F8}

/* ── v7: systematic contrast fixes (JS audit) ── */
/* root cause: dark islands inherited body ink — give them explicit light text */
.dash,.cfg-code,.device,.bchrome,.bscreen,.kiosk-body,.kiosk-frame{color:#E8F1F8}
.kiosk-body,.kiosk-frame{
  --mist:#E8F1F8;--muted:rgba(232,241,248,.62);--line:rgba(143,197,62,.16);
  --hair:rgba(255,255,255,.07);--hair-2:rgba(255,255,255,.12);
  --panel:#0F1826;--panel2:#0c1420;--cyan:#8FC53E;--glow:#C2EE74;
  --surface:linear-gradient(180deg,rgba(24,35,53,.62),rgba(11,19,31,.62));
}
/* capabilities matrix: hardcoded white text → ink on light */
.cap-col h4{color:var(--mist)!important}
.cap-col li{color:var(--muted)!important}
.cap-col{border-color:var(--hair)}
/* weak accents on white cards */
.price .amt.free{color:#5E8C1E!important}
.econ-card.good .econ-big{color:#4E7A16!important}
.econ-card.bad .econ-big{color:#C2453F!important}

/* ── v8: capabilities cards — clean white sheets, olive accents, tinted top edge ── */
.cap-col{background:#FFFFFF!important;border:1px solid var(--hair)!important;
  border-top:3px solid color-mix(in srgb,var(--c1,#5E8C1E) 45%,#fff)!important;
  box-shadow:0 1px 2px rgba(20,28,16,.04),0 12px 32px rgba(20,28,16,.06)!important}
.cap-col::before,.cap-col::after{display:none!important}
.cap-col:hover{border-color:rgba(94,140,40,.45)!important;
  border-top-color:color-mix(in srgb,var(--c1,#5E8C1E) 65%,#fff)!important;
  box-shadow:0 18px 44px rgba(20,28,16,.12)!important}
.cap-ic{background:rgba(94,140,40,.10)!important;border:1px solid rgba(94,140,40,.30)!important;color:#4E7A16!important}
.cap-n{color:#4E7A16!important;background:rgba(94,140,40,.08)!important;border:1px solid rgba(94,140,40,.28)!important}
.cap-col li::before{background:#5E8C1E!important;opacity:.5}
.cap-col li:hover{color:var(--mist)!important}
.cap-col li:hover::before{opacity:1}

/* ── v9: remaining dark-gradient cards → porcelain (pricing feat, price-all, infra, econ) ── */
.price.feat{border-color:rgba(94,140,40,.55)!important;
  background:linear-gradient(180deg,rgba(143,197,62,.14),#FFFFFF 58%)!important;
  box-shadow:0 20px 60px rgba(94,140,40,.16),0 1px 2px rgba(20,28,16,.05)!important}
.price-all{border-color:rgba(94,140,40,.5)!important;
  background:linear-gradient(180deg,rgba(143,197,62,.12),#FFFFFF 60%)!important;
  box-shadow:0 16px 44px rgba(94,140,40,.14)!important}
.infra{background:var(--surface)!important;border-color:var(--hair)!important;
  box-shadow:0 1px 2px rgba(20,28,16,.04),0 12px 32px rgba(20,28,16,.06)!important}
.econ-card.good{border-color:rgba(94,140,40,.45)!important;
  background:linear-gradient(180deg,rgba(143,197,62,.14),#FFFFFF 62%)!important}

/* ═══ v10: PREMIUM POLISH LAYER — cohesive design system on light ═══ */

/* shadow scale (ink-tinted, never pure black) */
:root{
  --sh-s:0 1px 2px rgba(23,33,26,.05),0 4px 12px rgba(23,33,26,.05);
  --sh-m:0 2px 4px rgba(23,33,26,.05),0 12px 28px rgba(23,33,26,.08);
  --sh-l:0 6px 12px rgba(23,33,26,.06),0 28px 64px rgba(23,33,26,.13);
}

/* typography rhythm */
h1,h2{letter-spacing:-.015em}
.eyebrow{font-weight:600}

/* premium buttons */
.btn{transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s,background .18s,border-color .18s}
.btn-primary{background:linear-gradient(180deg,#8FC53E,#69A122)!important;color:#0B1406!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 22px rgba(94,140,40,.30)!important}
.btn-primary:hover{transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 14px 30px rgba(94,140,40,.38)!important}
.btn-primary:active{transform:translateY(0) scale(.99)}
.btn-ghost{background:rgba(255,255,255,.65);backdrop-filter:blur(6px)}
.btn-ghost:hover{transform:translateY(-1px);background:#fff;box-shadow:var(--sh-s)}

/* nav: refined glass */
header.nav{backdrop-filter:blur(14px) saturate(1.3)!important;-webkit-backdrop-filter:blur(14px) saturate(1.3)!important;
  background:rgba(246,247,241,.78)!important}
header.nav.scrolled{background:rgba(246,247,241,.92)!important;
  box-shadow:0 1px 0 rgba(23,33,26,.05),0 12px 32px rgba(23,33,26,.08)!important}
.nav-links a:not(.btn),.nav-sub-btn{transition:color .18s}

/* unified card shadows */
.card,.counter,.price,.qa,.plan,.infra,.cap-col,.testi,.step{box-shadow:var(--sh-s)}
.price.feat,.plan.feat{box-shadow:var(--sh-m),0 20px 60px rgba(94,140,40,.14)!important}

/* dark product islands: elegant tinted elevation + hairline ring */
.device,.cfg-code,.dash,.phone:not(.light){
  box-shadow:0 8px 20px rgba(23,33,26,.10),0 34px 80px rgba(23,33,26,.22)!important;
}

/* forms: premium inputs (contact etc.) */
input:not([type=range]):not([type=checkbox]):not([type=radio]),textarea,select{
  background:#fff;border:1px solid rgba(23,33,26,.14);border-radius:12px;color:var(--mist);
  transition:border-color .18s,box-shadow .18s}
input:not([type=range]):not([type=checkbox]):not([type=radio]):focus,textarea:focus,select:focus{
  border-color:#5E8C1E;box-shadow:0 0 0 4px rgba(143,197,62,.16);outline:none}
::placeholder{color:rgba(23,33,26,.62)}
.field input::placeholder,.field textarea::placeholder{color:rgba(23,33,26,.62)}

/* Regula de mai sus pierde pe select/textarea: paginile de formular au
   `.field input,.field select,.field textarea{background:rgba(255,255,255,.03)}` (0,2,1),
   iar în lista de selectori de mai sus doar partea de `input` are (0,3,1) — `textarea` și
   `select` sunt (0,0,1) și pierd. De-asta se albeau DOAR input-urile, iar select/textarea
   rămâneau cu sticla din dark. Prefixul `html` urcă specificitatea la (0,2,2). */
html .field input,html .field select,html .field textarea{
  background:#fff;border:1px solid rgba(23,33,26,.14);color:var(--mist)}
html .field input:focus,html .field select:focus,html .field textarea:focus{
  border-color:#5E8C1E;box-shadow:0 0 0 4px rgba(143,197,62,.16)}

/* Text mic pe fond deschis care rămăsese pe --cyan/--glow (3,62:1 și 2,26:1). */
html .plan .ptag,html .price-grid .price .ptag,html .plan .setup,
html .price-grid .price li.div,html table.cmp th.us{color:#4E7A16}
/* .pill.re are fundal verde translucid, nu porcelain curat: pe el #4E7A16 dă doar 4,26 */
html .pill.re{color:#3F6412}
html table.cmp tr.hot .rowlbl{color:#3F6412}
html .pill.ob{color:#8A5600}

/* „Text pe verde de brand" scris cu o variabilă care se inversează între teme:
   `color:var(--void)` e aproape-negru pe dark, dar devine porcelain pe light (3,62:1).
   Același tipar ca la pastila din footer — fixează culoarea, nu o lega de temă. */
html .hero-chip .cap{color:#0B1406}

/* focus ring for keyboard nav */
a:focus-visible,button:focus-visible{outline:2px solid #5E8C1E;outline-offset:2px;border-radius:6px}

/* text links inside copy */
.a a,main p a:not(.btn){color:#4E7A16;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(94,140,40,.35);transition:text-decoration-color .15s}
.a a:hover,main p a:not(.btn):hover{text-decoration-color:#4E7A16}

/* scrollbar (webkit) */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(23,33,26,.16);border-radius:8px;border:3px solid #F3F4EE}
::-webkit-scrollbar-thumb:hover{background:rgba(23,33,26,.28)}

/* footer polish */
.foot-cols a{transition:color .15s;line-height:2}
.foot-cols h5{letter-spacing:.14em}

/* hero: order pill no longer collides with CTA row */
.order-strip{left:auto!important;right:6%!important;transform:none!important;
  background:rgba(255,255,255,.85)!important;backdrop-filter:blur(8px)}

/* product surf cards: tailored icon boxes instead of raw emoji */
.surf .card .ic{width:42px;height:42px;border-radius:12px;font-size:20px;
  background:rgba(94,140,40,.10);border:1px solid rgba(94,140,40,.25)}
.surf .card.core .ic{background:rgba(94,140,40,.16);color:#4E7A16;font-size:16px}

/* steps (01/02/03) refined */
.step .num{color:#4E7A16;opacity:.85}

/* theme toggle chips */
.theme-toggle button{transition:background .18s,color .18s}

/* ── v11: product core card + tags on light ── */
.surf .card.core,.card.core{
  background:linear-gradient(180deg,rgba(143,197,62,.16),#FFFFFF 70%)!important;
  border-color:rgba(94,140,40,.5)!important;
  box-shadow:var(--sh-m),0 16px 44px rgba(94,140,40,.14)!important}
.card.core .tag,.card.core h3,.card.core p{color:var(--mist)}
.card.core .tag{color:#4E7A16!important}
.card .tag{color:#4E7A16}

/* ── v12: .price class collision — the amount inside .plan is NOT a card ── */
.plan .price{background:none!important;box-shadow:none!important;border:none!important;padding:0!important}

/* ── v13: steps 01/02/03 as real cards + integration strip text fix ── */
.steps{gap:16px}
.step{padding:26px 24px 24px!important;border:1px solid var(--hair)!important;border-radius:16px}
.step .num{color:#4E7A16!important;font-weight:700;letter-spacing:.08em}
.step b{font-size:19px;margin:10px 0 7px;color:var(--mist)}
.step p{font-size:13.5px;line-height:1.6}
/* pi-custom: bolds were hardcoded white for the dark theme */
.pi-custom p{color:var(--muted)!important}
.pi-custom p b{color:var(--mist)!important}
.pi-custom b{color:var(--mist)!important}
.pi-custom{background:linear-gradient(180deg,rgba(143,197,62,.12),#FFFFFF 70%)!important;
  border:1px solid rgba(94,140,40,.32)!important;box-shadow:var(--sh-s)!important}
.pi-ic{background:rgba(94,140,40,.10)!important;border:1px solid rgba(94,140,40,.25)!important}

/* ── v14 (final audit): pi-kick label was pale lime (2.26:1) ── */
.pi-kick{color:#4E7A16!important}

/* carousel dots: visible on light bg (was white-on-white) */
.cs-dots button{background:rgba(15,30,45,.22)}
.cs-dots button.on{background:var(--cyan)}

/* nav lockup: white raster glyphs need an outline on porcelain */
.brand-lockup{filter:drop-shadow(0 0 1px rgba(12,22,32,.85)) drop-shadow(0 1px 2px rgba(12,22,32,.3))}

/* ── v15: glass pills that float on photos were black-on-black ──
   .strip figcaption and .h-frame .tag keep a dark backdrop (they sit on the
   photo's own dark bottom gradient) but took color:var(--mist), which is
   near-black here — so the label vanished into its own pill. Keep the dark
   pill, force light text. Affects every solution page's photo strip + hero. */
.strip figcaption,
.h-frame .tag{
  color:#EDF2E9!important;
  background:rgba(9,15,24,.72)!important;
  border-color:rgba(255,255,255,.16)!important;
}
.h-frame .tag b{color:#A6D657!important}


/* ═══ DC-NAV2 light overrides ═══ */
.mega-inner,.nav-pop{background:rgba(255,255,255,.98);border-color:var(--hair);box-shadow:0 22px 50px rgba(20,28,16,.14)}
.nav-links>a:not(.btn):hover,.has-sub:hover .nav-sub-btn,.has-sub.open .nav-sub-btn,.nav-sub-btn:hover,.mm-item:hover,.npop-l:hover{background:rgba(94,140,40,.07)}
.mm-item:hover .mm-l{color:var(--cyan)}
.npop-t{background:rgba(20,28,16,.03)}
/* ═══ /DC-NAV2 light ═══ */

/* Footer refresh: compact, structured and readable on the light theme */
html .mft{background:linear-gradient(180deg,#e7efdc 0%,#dce8ce 100%);border-top:1px solid rgba(94,140,30,.20);overflow:hidden}
html .mft .mft-mq{margin-top:0}
html .mft .mft-hero{padding-top:56px}
html .mft .mft-h{font-size:clamp(42px,6vw,78px)}
html .mft .foot-cols{margin-top:42px;padding:30px 28px 24px;background:rgba(255,255,255,.58);border:1px solid rgba(94,140,30,.18);border-radius:22px;box-shadow:0 18px 44px rgba(45,73,28,.08)}
html .mft .foot-cols{grid-template-columns:1.6fr 2.4fr 1fr 1.1fr 1.1fr}
html .mft .foot-cols>div:nth-child(2){display:grid;grid-template-columns:1fr 1fr;column-gap:28px;align-content:start}
html .mft .foot-cols>div:nth-child(2) h5{grid-column:1/-1}
html .mft .foot-cols a{color:rgba(23,33,26,.68)}
html .mft .foot-cols a:hover{color:#17211a}
html .mft .mft-base{margin-top:18px;padding:18px 0 28px;border-color:rgba(94,140,30,.18)}
html .mft .mft-giant{opacity:.10}
@media(max-width:900px){html .mft .foot-cols>div:nth-child(2){display:block}}
@media(max-width:760px){
  html .mft .foot-cols{grid-template-columns:1fr!important;gap:22px;padding:24px 20px 20px}
  html .mft .foot-cols>div:nth-child(2){display:block}
  html .mft .foot-cols h5{margin-bottom:8px}
  html .mft .foot-cols a{padding:4px 0;line-height:1.45}
  html .mft .mft-base{align-items:flex-start;flex-direction:column;gap:12px}
}

/* ── ring core on cream ──────────────────────────────────────────────────────
   The shader now writes the field's own brightness into ALPHA, so its empty
   space is transparent rather than a near-black disc. That removes the problem
   this block used to fight: there is no background left to blend away, so the
   grey circle on the cream page is gone and the filter only has to colour the
   filaments. Inverting turns the bright filaments dark; multiply settles them
   into the page. Contrast and saturation stay low on purpose — cranked up, the
   cyan goes electric and fights the brand green two lines above it. */
.cg-core.on{opacity:.92}
.cg-core{mix-blend-mode:multiply}
/* Less colour, not more: at .8 the inverted warm filaments read as mud next to
   the brand green. Pulled down they become smoke, and the lens rim carries the
   colour instead. */
.cg-core canvas{filter:invert(1) contrast(1.16) saturate(.58)}
/* On cream the copy is dark and the filaments are dark too, so the veil has to
   work harder here than on the dark theme — but it stays a veil, not a lid: at
   93% it erased the animation it was sitting on. */
.cg-mid::before{background:radial-gradient(closest-side,
  color-mix(in srgb, var(--void) 68%, transparent) 28%,
  color-mix(in srgb, var(--void) 38%, transparent) 60%,
  transparent 100%)}

/* ═══ Ring cards on cream ════════════════════════════════════════════════════
   The base shadow is a near-black built for the dark theme; on #F3F4EE it reads
   as dirt pooled under every card. Tint it with the brand's green-black, keep it
   tighter, and drop the top inset — a white highlight on a white card is noise
   that only softens the edge. Same geometry, correct material. */
.cg-f{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cyan) 8%,transparent),
  0 1px 1px rgba(31,45,20,.05),0 10px 20px -8px rgba(31,45,20,.18)}
.cg-pos:has(.cg-card:hover) .cg-f,.cg-pos:has(.cg-card.on) .cg-f{
  border-color:color-mix(in srgb,var(--cyan) 44%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cyan) 18%,transparent),
    0 2px 3px rgba(31,45,20,.07),0 18px 34px -12px rgba(31,45,20,.26),
    0 0 0 4px color-mix(in srgb,var(--cyan) 9%,transparent)}
.cg-ring::before{border-color:color-mix(in srgb,var(--cyan) 20%,transparent)}
@media(max-width:700px){
  .cg-front{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cyan) 16%,transparent),
    0 1px 1px rgba(31,45,20,.05),0 8px 18px -8px rgba(31,45,20,.20)}
  .cg-card.on .cg-in{box-shadow:0 2px 5px rgba(31,45,20,.07),0 24px 50px -16px rgba(31,45,20,.28)}
}