/* ════════════════════════════════════════════════════════════
   GREEN COMFORT HERBAL EXTRACT — GREEN PLANTS DESIGN SYSTEM v3
   Powder & liquid herbal extracts · greencomfortherbalextracts.com.
   ════════════════════════════════════════════════════════════ */

:root{
  --bg:#e9f4dc; --bg-2:#d9eecb; --ink:#122b1a; --ink-dim:rgba(18,43,26,.78);
  --ink-faint:rgba(18,43,26,.70);
  --primary:#0f7a38; --secondary:#1c5b2e; --accent:#2fae4a; --gold:#a16207;
  --violet:#6d5bd0; --aqua:#0e7490; --botanical:#3f8f5c;
  --accent-deep:#0a7030; --accent-bright:#9fe27f; --gold-ink:#8a5406; --err-ink:#b91c1c;
  --card:#ffffff; --card-2:#e6f3d6; --line:rgba(18,43,26,.15); --line-2:rgba(18,43,26,.24);
  --ivory:#0c2314; --ink-on-ivory:#eef7e2; --snow:#f0f8e8; --snow-dim:rgba(240,248,232,.82); --snow-faint:rgba(240,248,232,.72);
  --forest:#08150c;
  --r-lg:26px; --r-md:18px; --r-sm:12px; --r-pill:999px;
  --font-d:'Space Grotesk',system-ui,sans-serif;
  --font-b:'Manrope',system-ui,sans-serif;
  --shadow-card:0 22px 55px -22px rgba(16,44,30,.18);
  --shadow-pop:0 40px 80px -24px rgba(16,44,30,.28);
  --ease:cubic-bezier(.22,.8,.24,1);
  --nav-h:86px;
  /* Fallbacks keep every form readable even if a page is cached or opened
     without the PHP header. header.php replaces these with admin settings. */
  --ff-bg:#ffffff; --ff-text:#101613; --ff-ph:#66736d; --ff-line:#cbd8d0;
  --ff-focus:#17c964; --ff-sel:#c8f549; --ff-sel-text:#101613;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{line-height:1.7;
  margin:0; color:var(--ink);
  font:600 16px/1.7 var(--font-b); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  background:
    radial-gradient(58% 46% at 6% -4%, rgba(122,199,124,.28) 0%, transparent 62%),
    radial-gradient(48% 38% at 96% 6%, rgba(88,176,96,.20) 0%, transparent 58%),
    radial-gradient(70% 60% at 50% 108%, rgba(133,204,124,.24) 0%, transparent 66%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg fill='none' stroke='%230f7a38' stroke-opacity='0.09' stroke-width='2'%3E%3Cpath d='M28 100 q8 -34 34 -42 q-2 34 -24 44z'/%3E%3Cpath d='M112 28 q22 16 14 48 q-19 -14 -17 -45z'/%3E%3C/g%3E%3C/svg%3E"),
    var(--bg);
  background-repeat:no-repeat,no-repeat,no-repeat,repeat,no-repeat;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
::selection{background:var(--accent); color:#0b1210}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}

h1,h2,h3,h4,.display{font-family:var(--font-d); font-weight:800; letter-spacing:-.02em; line-height:1.08; margin:0}
.h-xl{font-size:clamp(48.9px,5.4vw,97.9px)}
.h-lg{font-size:clamp(38.6px,3.6vw,67.0px)}
.h-md{font-size:clamp(29.6px,2.4vw,43.8px)}
.lede{color:var(--ink-dim); font-size:clamp(20.0px,1.3vw,23.8px); max-width:62ch; margin:.9rem 0 0}
.lede--ivory{color:rgba(240,248,232,.8)}
.kicker{font:700 13.8px/1 var(--font-b); letter-spacing:.22em; text-transform:uppercase; color:var(--accent-deep); display:flex; align-items:center; gap:.55rem; margin:0 0 1rem}
.kicker::before{content:""; width:26px; height:2px; background:linear-gradient(90deg,var(--accent),transparent)}
.kicker--gold{color:var(--gold-ink)} .kicker--gold::before{background:linear-gradient(90deg,var(--gold),transparent)}
.kicker--ivory{color:#9be27f} .kicker--ivory::before{background:linear-gradient(90deg,#9be27f,transparent)}

.wrap{width:min(1200px,calc(100% - 48px)); margin-inline:auto}
.wrap--wide{width:min(1400px,calc(100% - 48px))}
.section{padding:clamp(64px,8vw,120px) 0; position:relative}
.section--tight{padding:clamp(40px,5vw,64px) 0}
.section--ivory{background:var(--ivory); color:var(--ink-on-ivory)}
.section--card{background:var(--bg-2)}
.section[style*="background-image"]{isolation:isolate}
.section[style*="background-image"]::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:rgba(237,249,235,.18)}
.section[style*="background-image"]>.wrap{position:relative; z-index:1}
.section__head{display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:space-between; align-items:flex-end; margin-bottom:clamp(28px,4vw,52px)}

/* grid pattern + mesh atmospherics */
.gridlines{position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(19,42,30,0.16) 1px,transparent 1px),linear-gradient(90deg,rgba(19,42,30,0.16) 1px,transparent 1px);
  background-size:56px 56px; mask-image:radial-gradient(75% 60% at 50% 20%,#000 0%,transparent 100%)}
.mesh{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(46% 42% at 18% 12%,rgba(23,201,100,.14),transparent 70%),
             radial-gradient(40% 38% at 85% 8%,rgba(200,245,73,.08),transparent 70%),
             radial-gradient(50% 46% at 70% 90%,rgba(47,93,70,.22),transparent 70%)}

/* ── buttons ── */
.btn{position:relative; display:inline-flex; align-items:center; gap:.55rem; padding:.9rem 1.5rem;
  border-radius:var(--r-pill); font:700 16.7px/1 var(--font-b); letter-spacing:.02em; cursor:pointer;
  border:1px solid transparent; transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,color .3s,border-color .3s;
  will-change:transform}
.btn__t{position:relative; z-index:1}
.btn--lime{background:var(--accent); color:#0c130f; box-shadow:0 10px 30px -10px rgba(200,245,73,.45)}
.btn--lime:hover{box-shadow:0 16px 44px -10px rgba(200,245,73,.65); transform:translateY(-2px)}
.btn--ghost{background:rgba(19,42,30,0.17); color:var(--ink); border-color:var(--line-2)}
.btn--ghost:hover{background:rgba(19,42,30,0.24); border-color:rgba(19,42,30,0.44)}
.btn--outline-ivory{background:transparent; color:var(--ink-on-ivory); border-color:rgba(16,22,19,.28)}
.btn--outline-ivory:hover{background:rgba(16,22,19,.07)}
.btn--dark{background:var(--card-2); border-color:var(--line-2); color:#122b1a}
.btn--dark:hover{border-color:rgba(200,245,73,.4)}
.btn--wide{width:100%; justify-content:center}
.btn[disabled]{opacity:.55; pointer-events:none}

/* ── chips ── */
.chip{display:inline-flex; align-items:center; gap:.5rem; padding:.42rem .9rem; border-radius:var(--r-pill);
  font:700 14.4px/1 var(--font-b); letter-spacing:.04em; background:rgba(19,42,30,0.18);
  border:1px solid var(--line); color:var(--ink-dim)}
.chip--lime{background:rgba(200,245,73,.1); border-color:rgba(200,245,73,.3); color:var(--accent-deep)}
.chip--gold{background:rgba(233,185,92,.1); border-color:rgba(233,185,92,.3); color:var(--gold-ink)}
.chip--violet{background:rgba(143,127,240,.12); border-color:rgba(143,127,240,.35); color:var(--violet)}

/* ══════════ TOP BAR (world clock / lang / contact) ══════════ */
.topbar{position:fixed; top:0; left:0; right:0; z-index:70; background:rgba(8,21,12,.94); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(19,42,30,0.19); font-size:16.6px}
.topbar__in{display:flex; align-items:center; justify-content:space-between; gap:1rem; height:42px}
.clock{display:flex; gap:1.3rem; font:700 13.2px/1 var(--font-b); letter-spacing:.08em; color:var(--ink-dim)}
.clock b{color:var(--accent); font-weight:600}
.clock span b{font-variant-numeric:tabular-nums}
.topbar__right{display:flex; align-items:center; gap:1rem; color:var(--ink-dim)}
.topbar__mail{display:inline-flex; gap:.4rem; align-items:center}
.topbar__mail:hover{color:var(--accent)}
.langpick{position:relative}
.langpick__btn{display:inline-flex; align-items:center; gap:.35rem; background:none; border:0; cursor:pointer;
  font:700 13.8px/1 var(--font-b); letter-spacing:.06em; color:var(--ink); padding:.35rem .2rem}
.langpick__btn::before{content:"◍"; color:var(--accent); font-size:15.2px}
.langpick__menu{position:absolute; top:calc(100% + 8px); right:0; min-width:180px; background:#0c2314;
  border:1px solid var(--line-2); border-radius:14px; padding:8px; box-shadow:var(--shadow-pop);
  display:none; z-index:5}
.langpick--open .langpick__menu{display:block}
.langpick__menu button{display:flex; width:100%; justify-content:space-between; align-items:center; gap:1rem;
  background:none; border:0; padding:.5rem .7rem; border-radius:9px; font:600 14.9px var(--font-b); color:var(--ink-dim); cursor:pointer}
.langpick__menu button:hover{background:rgba(240,248,232,.08); color:var(--ink)}
.langpick__menu button.is-on{color:var(--accent)}
.langpick__menu button.is-on::after{content:"●"; font-size:11.0px}

/* light text on all dark surfaces */
.topbar,.hero,.fcard,.ticker,.foot,.mmenu,.modal__box,.pop__box,.cookiebar,.tabbar,.panel,.searchbar,.toTop,.metric:hover,.section--ivory,.pagehero,.mega,.dark-section{--ink:#f0f8e8;--ink-dim:var(--snow-dim);--ink-faint:var(--snow-faint);--accent-deep:var(--accent-bright);--gold-ink:#e9b95c;--err-ink:#ff8a8a}

/* ══════════ FLOATING GLASS NAV ══════════ */
.nav{position:fixed; top:42px; left:0; right:0; z-index:60; transition:background .35s,box-shadow .35s,border-color .35s;
  border-bottom:1px solid transparent; background:rgba(241,249,233,.82); backdrop-filter:blur(18px) saturate(1.25)}
.nav.is-stuck{background:rgba(241,249,233,.94);
  border-bottom-color:rgba(18,43,26,.12); box-shadow:0 18px 50px -30px rgba(10,40,18,.4)}
.nav__in{display:flex; align-items:center; gap:1.4rem; height:var(--nav-h)}
.brand{display:flex; align-items:center; gap:.7rem; font:800 19.5px/1 var(--font-d); letter-spacing:-.01em; color:var(--ink)}
.brand__logo{height:52px; width:auto; display:block; transition:transform .35s var(--ease)}
.brand:hover .brand__logo{transform:scale(1.04)}
.brand__sub{display:block; font:700 10.3px/1 var(--font-b); letter-spacing:.34em; color:var(--ink-dim); margin-top:4px; text-transform:uppercase}
.nav__links{display:flex; align-items:center; gap:.2rem; margin-left:auto}
.nav__link{position:relative; padding:.62rem .95rem; border-radius:10px; font:700 15.5px/1 var(--font-b); color:var(--ink-dim); display:inline-flex; align-items:center; gap:.4rem}
.nav__link::after{content:""; position:absolute; left:1rem; right:1rem; bottom:.38rem; height:2px; border-radius:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease)}
.nav__link:hover{color:var(--ink)}
.nav__link:hover::after{transform:scaleX(.55)}
.nav__link.is-active{color:var(--ink)}
.nav__link.is-active::after{transform:scaleX(.7)}
.nav__link--mega::before{content:"❖"; font-size:12.4px; color:var(--primary); transition:transform .3s}
.nav__link--mega:hover::before{transform:rotate(180deg)}
.nav__cta{margin-left:.6rem}
.nav__burger{display:none; margin-left:auto; width:52px; height:52px; border-radius:14px; border:1px solid var(--line-2);
  background:rgba(19,42,30,0.17); cursor:pointer; position:relative}
.nav__burger i{position:absolute; left:14px; width:24px; height:2px; background:var(--ink); border-radius:2px; transition:all .3s var(--ease)}
.nav__burger i:nth-child(1){top:19px} .nav__burger i:nth-child(2){top:25px; width:16px} .nav__burger i:nth-child(3){top:31px}
.nav__burger.is-open i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav__burger.is-open i:nth-child(2){opacity:0; transform:translateX(8px)}
.nav__burger.is-open i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* mega menu panel */
.mega{position:absolute; top:100%; left:0; right:0; padding:2rem 0 2.4rem; opacity:0; visibility:hidden;
  transform:translateY(12px); transition:all .35s var(--ease); background:rgba(8,26,14,.96);
  backdrop-filter:blur(24px); border-bottom:1px solid rgba(19,42,30,0.22); box-shadow:var(--shadow-pop)}
.nav__item--mega:hover .mega,.nav__item--mega:focus-within .mega{opacity:1; visibility:visible; transform:translateY(0)}
.mega__grid{display:grid; grid-template-columns:1.6fr 1fr 1.2fr; gap:2.4rem}
.mega__cat{display:flex; gap:1rem; padding:1rem 1.1rem; border-radius:16px; border:1px solid transparent; transition:.25s; align-items:flex-start}
.mega__cat:hover{background:rgba(240,248,232,.07); border-color:rgba(240,248,232,.14)}
.mega__cat-ico{width:46px; height:46px; flex:none; border-radius:13px; display:grid; place-items:center; font-size:26.4px; background:rgba(240,248,232,.08); border:1px solid rgba(240,248,232,.14)}
.mega__cat b{display:block; font:700 17.2px var(--font-b)}
.mega__cat span{color:var(--ink-faint); font-size:17.2px}
.mega__cat .cat-count{color:var(--accent); font-weight:600}
.mega__coltitle{font:700 12.6px/1 var(--font-b); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 1rem}
.mega__link{display:flex; align-items:center; gap:.55rem; padding:.42rem 0; color:var(--ink-dim); font-size:19.3px; transition:.2s}
.mega__link:hover{color:var(--accent); transform:translateX(4px)}
.mega__cta{display:block; border-radius:20px; overflow:hidden; position:relative; border:1px solid var(--line-2); min-height:210px}
.mega__cta img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0; transition:transform 6s ease}
.mega__cta:hover img{transform:scale(1.08)}
.mega__cta-in{position:absolute; z-index:1; inset:auto 0 0 0; padding:1.4rem; background:linear-gradient(180deg,transparent,rgba(5,9,7,.92))}

/* ══════════ HERO (cinematic) ══════════ */
.hero{position:relative; height:min(100svh,940px); min-height:640px; overflow:hidden; background:#08150c}
.hero__slide{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity var(--hero-t,1.1s) ease,visibility 0s var(--hero-t,1.1s)}
.hero__slide.is-on{opacity:1; visibility:visible; transition-delay:0s}
.hero__media{position:absolute; inset:0}
.hero__media img,.hero__media video{width:100%; height:100%; object-fit:cover}
.hero--zoom .hero__slide.is-on .hero__media img{animation:kb 8s ease-out forwards}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.09)}}
.hero__scrim{position:absolute; inset:0; background:
  linear-gradient(180deg,rgba(5,16,8,.82) 0%,rgba(5,16,8,.55) 42%,rgba(5,16,8,.95) 100%),
  radial-gradient(60% 80% at 78% 30%,rgba(23,201,100,.10),transparent 70%)}
.hero__wrap{position:relative; z-index:3; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:clamp(56px,8vh,110px)}
.hero__title{max-width:16ch; font-size:clamp(51.5px,5.8vw,108.2px); text-wrap:balance}
.hero__title em{font-style:normal; background:linear-gradient(92deg,var(--accent),#8ef07a 55%,var(--primary)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero__title,.hero__sub,.hero .kicker{color:#f0f8e8}
.hero__sub{max-width:56ch}
.hero__actions{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.1rem}
.hero__actions .btn{padding:1.05rem 1.8rem; font-size:19.8px}

/* floating info cards */
.floatcards{position:absolute; z-index:4; right:max(calc((100% - 1400px)/2),1.2rem); bottom:clamp(56px,8vh,110px);
  display:grid; gap:.8rem; width:250px}
.fcard{display:flex; gap:.8rem; align-items:center; padding:.9rem 1.05rem; border-radius:16px;
  background:rgba(8,26,14,.62); border:1px solid rgba(240,248,232,.14); backdrop-filter:blur(12px);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.6); transform:translateY(26px); opacity:0;
  animation:floatIn .9s var(--ease) forwards}
.fcard:nth-child(2){animation-delay:.18s} .fcard:nth-child(3){animation-delay:.36s} .fcard:nth-child(4){animation-delay:.54s}
@keyframes floatIn{to{transform:translateY(0); opacity:1}}
.fcard__ico{width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center; font-size:21.2px; background:rgba(23,201,100,.14); color:var(--accent-bright); border:1px solid rgba(23,201,100,.25)}
.fcard--gold .fcard__ico{background:rgba(233,185,92,.13); color:#e9b95c; border-color:rgba(233,185,92,.3)}
.fcard--aqua .fcard__ico{background:rgba(76,201,232,.13); color:var(--aqua); border-color:rgba(76,201,232,.3)}
.fcard b{display:block; font:700 15.5px var(--font-b)}
.fcard span{font-size:15.9px; color:var(--ink-faint)}

/* hero bottom: scroll cue + slider progress */
.hero__cue{position:absolute; left:50%; bottom:1.4rem; transform:translateX(-50%); z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:.5rem; color:var(--ink-faint); font:700 11.5px/1 var(--font-b); letter-spacing:.28em}
.hero__cue i{width:1px; height:44px; background:linear-gradient(180deg,var(--accent),transparent); animation:cue 2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.2); transform-origin:top}55%{transform:scaleY(1)}100%{transform:scaleY(.2); transform-origin:bottom}}
.hero__dots{position:absolute; z-index:5; right:max(calc((100% - 1400px)/2),1.2rem); top:calc(50% - 60px); display:grid; gap:.7rem}
.hero__dots button{width:34px; height:34px; border-radius:50%; border:1px solid rgba(240,248,232,.3);
  background:rgba(5,16,8,.45); color:var(--ink-faint); font:700 12.6px var(--font-b); cursor:pointer; transition:.3s; backdrop-filter:blur(6px)}
.hero__dots button:hover{border-color:var(--accent); color:var(--accent); transform:scale(1.12)}
.hero__dots button.is-on{background:var(--accent); color:#0c130f; border-color:var(--accent); box-shadow:0 0 24px -4px rgba(200,245,73,.5)}

/* parallax drift for hero media */
.hero--parallax .hero__media{will-change:transform}

/* ══════════ TICKER ══════════ */
.ticker{border-block:1px solid rgba(240,248,232,.12); background:rgba(8,21,12,.88); overflow:hidden; position:relative}
.ticker__label{position:absolute; z-index:2; left:0; top:0; bottom:0; display:flex; align-items:center; gap:.5rem; padding:0 1.2rem;
  background:var(--accent); color:#0c130f; font:800 12.6px/1 var(--font-b); letter-spacing:.16em; text-transform:uppercase}
.ticker__track{display:flex; gap:0; width:max-content; animation:tick var(--tick-dur,28s) linear infinite; padding-left:160px}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__track--paused{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tick{display:flex; align-items:center; gap:.9rem; padding:1rem 2.2rem; color:var(--ink-dim); font-size:19.3px; white-space:nowrap}
.tick b{color:var(--ink)}
.tick__tag{font:800 11.5px/1 var(--font-b); letter-spacing:.12em; color:var(--accent); border:1px solid rgba(200,245,73,.3); padding:.3rem .55rem; border-radius:99px}
.tick::after{content:"◆"; color:rgba(19,42,30,0.32); font-size:11.0px}

/* ══════════ METRICS STRIP ══════════ */
.metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-radius:var(--r-lg); overflow:hidden}
.metric{background:var(--bg-2); padding:2.1rem 1.6rem; position:relative; overflow:hidden; transition:background .3s}
.metric:hover{background:#0d2b18}
.metric__n{font:700 clamp(34px,3.6vw,50px)/1 var(--font-d); color:var(--ink); display:flex; align-items:baseline; gap:2px}
.metric__n em{font-style:normal; color:var(--accent)}
.metric p{margin:.55rem 0 0; color:var(--ink-faint); font-size:18.6px}
.metric::after{content:""; position:absolute; inset:auto 0 0 0; height:2px; background:linear-gradient(90deg,var(--primary),transparent); opacity:0; transition:.3s}
.metric:hover::after{opacity:1}

/* ══════════ BENTO / PANELS ══════════ */
.bento{display:grid; grid-template-columns:repeat(12,1fr); gap:1.2rem}
.tile{position:relative; border-radius:var(--r-lg); background:var(--card); border:1px solid var(--line); overflow:hidden; transition:transform .45s var(--ease),border-color .35s,box-shadow .45s}
.tile:hover{transform:translateY(-6px); border-color:rgba(23,201,100,.35); box-shadow:var(--shadow-card)}
.tile__pad{padding:1.9rem}
.tile--c3{grid-column:span 3} .tile--c4{grid-column:span 4} .tile--c5{grid-column:span 5}
.tile--c6{grid-column:span 6} .tile--c7{grid-column:span 7} .tile--c8{grid-column:span 8} .tile--c12{grid-column:span 12}
.tile__img{position:relative; overflow:hidden; min-height:220px}
.tile__img img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0; transition:transform .8s var(--ease)}
.tile:hover .tile__img img{transform:scale(1.07)}
.tile__imgtag{position:absolute; z-index:1; left:1rem; top:1rem}
.tile__imgtag.chip{background:rgba(8,21,12,.78); color:#f0f8e8; border-color:rgba(240,248,232,.24); backdrop-filter:blur(6px)}
.tile__imgtag.chip--lime{color:#b9f27e; border-color:rgba(200,245,73,.4)}
.tile__imgtag.chip--gold{color:#e9b95c; border-color:rgba(233,185,92,.4)}
.tile h3{font-size:27.7px; margin:.8rem 0 .5rem}
.tile .fine{color:var(--ink-faint); font-size:17.9px}
.tile__num{position:absolute; right:1.4rem; top:1.1rem; font:800 50.6px/1 var(--font-d); color:rgba(19,42,30,0.19); transition:.4s}
.tile:hover .tile__num{color:rgba(200,245,73,.16)}

/* glass panel */
.panel{border-radius:var(--r-lg); border:1px solid rgba(240,248,232,.12); background:linear-gradient(150deg,rgba(12,50,24,.98),rgba(8,34,16,.98) 55%),rgba(8,26,14,.98); backdrop-filter:blur(10px); padding:clamp(1.25rem,2.2vw,1.9rem); position:relative; overflow:hidden}
.panel::before{content:""; position:absolute; width:340px; height:340px; border-radius:50%; right:-120px; top:-160px;
  background:radial-gradient(circle,rgba(23,201,100,.16),transparent 70%); pointer-events:none}
.panel__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.6rem; position:relative; z-index:1}
.panel__grid>*{min-width:0}
.panel .aform{min-width:0; max-width:100%}
.panel--supplier{border-color:rgba(233,185,92,.25)}
.panel--supplier::before{background:radial-gradient(circle,rgba(233,185,92,.14),transparent 70%)}

/* ══════════ PRODUCT CARDS ══════════ */
.pcard{position:relative; border-radius:var(--r-md); overflow:hidden; background:var(--card-2); border:1px solid var(--line);
  display:flex; flex-direction:column; transition:transform .45s var(--ease),border-color .35s,box-shadow .45s}
.pcard:hover{transform:translateY(-6px); box-shadow:var(--shadow-card); border-color:color-mix(in srgb,var(--cat) 55%,transparent)}
.pcard__img{position:relative; aspect-ratio:4/3.1; overflow:hidden}
.pcard__img img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease),filter .7s}
.pcard:hover .pcard__img img{transform:scale(1.08)}
.pcard__cat{position:absolute; z-index:1; left:.8rem; top:.8rem; padding:.34rem .7rem; border-radius:99px;
  font:800 12.1px/1 var(--font-b); letter-spacing:.08em; text-transform:uppercase; color:var(--cat-ink,#f0f8e8); background:var(--cat,var(--primary))}
.pcard__body{padding:1.15rem 1.25rem 1.25rem; display:flex; flex-direction:column; gap:.55rem; flex:1}
.pcard__name{font:700 19.0px/1.3 var(--font-d)}
.pcard__sum{color:var(--ink-faint); font-size:17.9px; line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:0}
.pcard__specs{display:flex; flex-wrap:wrap; gap:.4rem}
.pcard__spec{font:700 12.1px/1 var(--font-b); letter-spacing:.05em; padding:.34rem .6rem; border-radius:99px; border:1px solid var(--line-2); color:var(--ink-dim); background:rgba(19,42,30,0.16)}
.pcard__foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding-top:.4rem}
.pcard__open{display:inline-flex; align-items:center; gap:.4rem; font:700 14.9px var(--font-b); color:var(--accent-deep)}
.pcard__rfq{font:700 13.2px var(--font-b); padding:.44rem .8rem; border-radius:99px; border:1px solid var(--line-2); color:var(--ink-dim); transition:.25s}
.pcard__rfq:hover{border-color:var(--cat,var(--primary)); color:var(--accent-deep)}
.pcard--featured{border-color:rgba(200,245,73,.3)}
.pcard--featured .pcard__star{position:absolute; z-index:1; right:.8rem; top:.8rem; color:var(--accent); font-size:17.9px; background:rgba(10,16,13,.65); border-radius:99px; padding:.34rem .6rem; border:1px solid rgba(200,245,73,.3)}

/* horizontal rails */
.rail{display:flex; gap:1.1rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:.4rem .2rem 1.3rem;
  scrollbar-width:thin; scrollbar-color:var(--secondary) transparent}
.rail>*{scroll-snap-align:start; flex:0 0 min(320px,82vw)}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:99px}
.railwrap{position:relative}
.railnav{position:absolute; top:-56px; right:0; display:flex; gap:.5rem}
.railnav button{width:42px; height:42px; border-radius:50%; border:1px solid var(--line-2); background:rgba(19,42,30,0.17); cursor:pointer; font-size:19.8px; color:var(--ink-dim); transition:.25s}
.railnav button:hover{background:var(--accent); color:#0c130f; border-color:var(--accent)}

/* ══════════ PROCESS TIMELINE ══════════ */
.steps{position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; counter-reset:st}
.steps::before{content:""; position:absolute; left:0; right:0; top:33px; height:1px; background:linear-gradient(90deg,var(--primary) 0%,var(--accent) 50%,var(--line) 100%)}
.step{counter-increment:st; position:relative; padding-top:74px}
.step::before{content:counter(st,decimal-leading-zero); position:absolute; top:0; left:0; width:66px; height:66px; border-radius:50%;
  display:grid; place-items:center; font:800 17.2px var(--font-d); background:var(--card-2); border:1px solid var(--line-2); color:var(--accent-deep); z-index:1; transition:.3s}
.step:hover::before{background:var(--accent); color:#0c130f; box-shadow:0 0 34px -6px rgba(200,245,73,.55)}
.step b{font:700 17.8px var(--font-d); display:block; margin-bottom:.35rem}
.step p{margin:0; color:var(--ink-faint); font-size:17.9px; line-height:1.55}

/* ══════════ STAFF ══════════ */
.scard{flex:0 0 min(300px,78vw); scroll-snap-align:start; border-radius:var(--r-md); overflow:hidden; background:var(--card-2); border:1px solid var(--line); transition:.4s var(--ease)}
.scard:hover{transform:translateY(-6px); border-color:rgba(23,201,100,.4); box-shadow:var(--shadow-card)}
.scard__ph{position:relative; aspect-ratio:3/3.4; overflow:hidden}
.scard__ph img{width:100%; height:100%; object-fit:cover; filter:saturate(.92); transition:transform .7s}
.scard:hover .scard__ph img{transform:scale(1.06)}
.scard__ph::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(9,14,12,.85))}
.scard__role{position:absolute; z-index:1; left:.9rem; bottom:.9rem; right:.9rem; color:var(--ink)}
.scard__role b{display:block; font:700 18.4px var(--font-d)}
.scard__role span{color:var(--accent); font:700 13.2px var(--font-b); letter-spacing:.06em; text-transform:uppercase}
.scard__body{padding:1.1rem 1.2rem 1.3rem}
.scard__body p{margin:0; color:var(--ink-faint); font-size:17.9px; line-height:1.6}
.scard__meta{display:flex; justify-content:space-between; align-items:center; margin-top:.9rem; padding-top:.8rem; border-top:1px dashed var(--line-2); font-size:16.6px; color:var(--ink-faint)}
.scard__init{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font:800 13.8px var(--font-d); background:rgba(23,201,100,.14); color:var(--primary); border:1px solid rgba(23,201,100,.3)}

/* ══════════ GLOBAL FORM-FIELD COLOR SYSTEM ══════════
   Single source of truth: FORM_FIELD_* constants in config.php are
   injected as --ff-* variables by header.php. Every input, textarea,
   select, search, date, number, email, tel and file field on every
   page (contact, quotation, supplier, modals, popups, dynamic forms)
   reads its colors from these variables — no page-specific CSS. */

input,textarea,select{
  background:var(--ff-bg);
  color:var(--ff-text);
  -webkit-text-fill-color:var(--ff-text);
  caret-color:var(--ff-text);
  border:1px solid var(--ff-line);
  border-radius:13px;
  padding:.58rem .76rem;
  width:100%;
  font:600 14.5px/1.4 var(--font-b);
  color-scheme:light;
  box-shadow:0 1px 2px rgba(16,44,30,.05);
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease), background .22s;
}
textarea{resize:vertical}
input::placeholder,textarea::placeholder{color:var(--ff-ph); opacity:1}
input:hover:not(:focus):not(:disabled):not([readonly]),textarea:hover:not(:focus):not(:disabled),select:hover:not(:disabled){border-color:color-mix(in srgb,var(--ff-line) 55%,var(--ff-text) 28%)}
input:focus,textarea:focus,select:focus{
  outline:none; border-color:var(--ff-focus);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ff-focus) 20%,transparent),
             0 10px 26px -14px color-mix(in srgb,var(--ff-focus) 55%,transparent);
}
input::selection,textarea::selection{background:var(--ff-sel); color:var(--ff-sel-text)}
option{background:var(--ff-bg); color:var(--ff-text)}
input:disabled,textarea:disabled,select:disabled{
  opacity:.62; cursor:not-allowed;
  -webkit-text-fill-color:color-mix(in srgb,var(--ff-text) 62%,var(--ff-bg));
}
input[readonly],textarea[readonly]{
  background:color-mix(in srgb,var(--ff-bg) 90%,var(--ff-text) 10%);
  color:var(--ff-text); -webkit-text-fill-color:var(--ff-text);
}
/* browser autofill must never produce invisible text (Chrome/Edge/Safari) */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,
textarea:-webkit-autofill,textarea:-webkit-autofill:hover,textarea:-webkit-autofill:focus,
select:-webkit-autofill,select:-webkit-autofill:hover,select:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ff-text);
  caret-color:var(--ff-text);
  box-shadow:0 0 0 1000px var(--ff-bg) inset;
  transition:background-color 99999s ease-in-out 0s;
}
input[type=checkbox],input[type=radio]{width:auto; accent-color:var(--ff-focus)}
input[type=file]{padding:.62rem .9rem; cursor:pointer}
input[type=file]::file-selector-button{
  border:1px solid color-mix(in srgb,var(--ff-line) 60%,var(--ff-text) 22%);
  background:color-mix(in srgb,var(--ff-bg) 92%,var(--ff-focus) 8%);
  color:var(--ff-text); border-radius:9px; padding:.42rem .8rem; margin-right:.7rem;
  font:700 13.2px var(--font-b); cursor:pointer;
}
input[type=submit],input[type=button],input[type=reset],input[type=image]{width:auto}
/* dark-glass search field is the one deliberate exception: its surface is
   dark, so it keeps light text — readability is guaranteed either way    */
.searchbar input{background:none; border:0; box-shadow:none; color:#f0f8e8; -webkit-text-fill-color:#f0f8e8}
.searchbar input:focus{border:0; box-shadow:none}

/* ── form layout (no colors here — colors live in the system above) ── */
.aform{display:grid; gap:.58rem}
.aform__row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.58rem}
.field{display:grid; gap:.32rem}
.field>span{font:700 12px/1.15 var(--font-b); letter-spacing:.06em; color:var(--ink-dim); text-transform:uppercase}
.aform textarea{min-height:86px; max-height:220px}
.field--half{max-width:220px}
.aform__msg{margin:0; font-size:19.3px; min-height:1.4em}
.aform__msg.is-ok{color:var(--accent-deep)} .aform__msg.is-err{color:var(--err-ink)}
.aform__fine{margin:0; color:var(--ink-faint); font-size:16.6px}
.checkline{display:flex; gap:.6rem; align-items:flex-start; color:var(--ink-dim); font-size:17.9px}
.checkline input{margin-top:.25rem; accent-color:var(--ff-focus)}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{
  border-color:#e03939;
  box-shadow:0 0 0 3px rgba(224,57,57,.12);
}
.field.is-bad input:focus,.field.is-bad select:focus,.field.is-bad textarea:focus{
  border-color:#e03939;
  box-shadow:0 0 0 3px rgba(224,57,57,.18);
}

/* supplier panel checklist (dark glass panel) */
.ticklist{list-style:none; margin:1.1rem 0 0; padding:0; display:grid; gap:.55rem}
.ticklist li{position:relative; padding-left:1.7rem; color:var(--ink-dim); font-size:18.6px}
.ticklist li::before{content:"✓"; position:absolute; left:0; top:0; font:800 15.5px var(--font-b); color:var(--accent-bright)}

/* ── contrast-aware section utilities ──
   Background determines treatment: pick light/dark/overlay per surface. */
.light-section{background:var(--bg); color:var(--ink)}
.dark-section{background:var(--ivory); color:var(--ink-on-ivory)}
.image-section{position:relative; overflow:hidden}
.image-section>*{position:relative; z-index:1}
.image-section>img,.image-section>.is-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.overlay-dark{position:absolute; inset:0; z-index:0; background:linear-gradient(180deg,rgba(5,16,8,.66),rgba(5,16,8,.86))}
.overlay-light{position:absolute; inset:0; z-index:0; background:linear-gradient(180deg,rgba(243,247,242,.88),rgba(243,247,242,.94))}
.contrast-card{background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-lg)}
.contrast-heading{color:var(--ink)}
.contrast-text{color:var(--ink-dim)}

/* ══════════ CONTACT DASHBOARD ══════════ */
.dash{display:grid; grid-template-columns:minmax(0,320px) minmax(0,760px); justify-content:space-between; gap:1.2rem}
.dash>*{min-width:0}
.dash>div:last-child{min-width:0; width:100%}
.dash .panel{width:100%}
.dash__side{display:grid; gap:1.2rem; align-content:start}
.dcard{border-radius:var(--r-md); background:var(--card); border:1px solid var(--line); padding:1.4rem 1.5rem}
.dcard h4{font-size:19.3px; letter-spacing:.04em; color:var(--accent-deep); text-transform:uppercase; font-family:var(--font-b); margin:0 0 .9rem}
.dcard dl{margin:0; display:grid; gap:.55rem; font-size:19.3px}
.dcard dt{color:var(--ink-faint); font-size:15.9px; letter-spacing:.08em; text-transform:uppercase}
.dcard dd{margin:0; color:var(--ink)}
.dcard dd a:hover{color:var(--accent-deep)}
.mapframe{border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); min-height:230px; filter:saturate(.85)}
.mapframe iframe{width:100%; height:100%; min-height:230px; border:0; display:block}

/* ══════════ PAGE HERO (inner pages) ══════════ */
.pagehero{position:relative; min-height:440px; display:flex; align-items:flex-end; padding:calc(var(--nav-h) + 96px) 0 clamp(48px,6vw,84px); overflow:hidden}
.pagehero__img{position:absolute; inset:0}
.pagehero__img img{width:100%; height:100%; object-fit:cover}
.pagehero__tint{position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,16,8,.9),rgba(5,16,8,.78) 52%,rgba(5,16,8,.72) 100%),linear-gradient(0deg,rgba(5,16,8,.32),rgba(5,16,8,.32))}
.pagehero__wrap{position:relative; z-index:1; text-shadow:0 2px 18px rgba(0,0,0,.62)}
.pagehero h1{max-width:20ch}
.pagehero .lede{max-width:60ch}
.crumbs{display:flex; flex-wrap:wrap; gap:.5rem; font:700 13.8px var(--font-b); color:var(--ink-faint); margin-bottom:1.2rem}
.crumbs a{color:var(--ink-dim); transition:.2s} .crumbs a:hover{color:var(--accent)}
.crumbs span::after{content:" /"; color:rgba(240,248,232,.4); margin-left:.5rem}

/* ══════════ EXPLORER (products app) ══════════ */
.explorer{display:grid; grid-template-columns:264px 1fr; gap:1.6rem; align-items:start}
.explorer__side{position:sticky; top:calc(var(--nav-h) + 56px); display:grid; gap:1.5rem}
.fgroup__t{font:800 12.6px/1 var(--font-b); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 .7rem}
.fchips{display:flex; flex-wrap:wrap; gap:.45rem}
.fchip{padding:.5rem .95rem; border-radius:99px; border:1px solid var(--line-2); background:rgba(19,42,30,0.16);
  font:700 14.4px var(--font-b); color:var(--ink-dim); cursor:pointer; transition:.25s}
.fchip:hover{border-color:var(--primary); color:var(--ink)}
.fchip.is-on{background:var(--cat,var(--primary)); border-color:transparent; color:#0c130f}
.searchbar{display:flex; align-items:center; gap:.7rem; background:rgba(8,26,14,.78); border:1px solid rgba(240,248,232,.22);
  border-radius:var(--r-pill); padding:.35rem .5rem .35rem 1.1rem}
.searchbar input{flex:1; font:600 17.2px var(--font-b); padding:.55rem 0}
.searchbar input::placeholder{color:rgba(240,248,232,.7)}
.searchbar .btn{padding:.68rem 1.3rem}
.sortbar{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.2rem; flex-wrap:wrap}
.resultcount{color:var(--ink-faint); font-size:18.6px}
.resultcount b{color:var(--accent-deep)}
.pgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1.1rem}
.empty{padding:3rem 2rem; text-align:center; border:1px dashed var(--line-2); border-radius:var(--r-lg); color:var(--ink-faint)}

/* quick view modal */
.modal{position:fixed; inset:0; z-index:90; display:none}
.modal.is-open{display:block}
.modal__veil{position:absolute; inset:0; background:rgba(4,7,5,.72); backdrop-filter:blur(8px)}
.modal__box{position:absolute; z-index:1; left:50%; top:50%; transform:translate(-50%,-50%); width:min(880px,calc(100% - 40px));
  max-height:calc(100% - 60px); overflow:auto; border-radius:var(--r-lg); background:#0c2314; border:1px solid rgba(240,248,232,.14); box-shadow:var(--shadow-pop)}
.modal__x{position:sticky; float:right; top:14px; right:14px; z-index:2; width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(240,248,232,.18); background:rgba(8,26,14,.75); color:var(--ink); font-size:22.4px; cursor:pointer; transition:.25s}
.modal__x:hover{background:#ff6b6b; border-color:#ff6b6b; color:#fff}
.qv{display:grid; grid-template-columns:1.05fr 1fr}
.qv__img{position:relative; min-height:340px}
.qv__img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.qv__body{padding:2rem 2.2rem}
.qv__body h3{font-size:34.4px; margin:.6rem 0 .7rem}
.qv__specs{display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin:1.2rem 0}
.qv__spec{border:1px solid rgba(240,248,232,.16); border-radius:12px; padding:.7rem .9rem}
.qv__spec span{display:block; font:700 12.1px var(--font-b); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:.2rem}
.qv__spec b{font-size:19.3px}

/* ══════════ FOOTER ══════════ */
.foot{background:#08150c; border-top:1px solid rgba(240,248,232,.08); padding:clamp(56px,7vw,96px) 0 0; margin-top:auto}
.foot__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2.4rem; padding-bottom:3rem}
.foot__t{font:800 13.8px/1 var(--font-b); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 1.1rem}
.foot__links{display:grid; gap:.55rem; font-size:19.3px}
.foot__links a{color:var(--ink-dim); transition:.2s; display:inline-flex; align-items:center; gap:.45rem}
.foot__links a:hover{color:var(--accent); transform:translateX(3px)}
.foot__about p{color:var(--ink-faint); font-size:18.6px; line-height:1.7}
.foot__base{border-top:1px solid rgba(19,42,30,0.19); padding:1.3rem 0 1.6rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; color:var(--ink-faint); font-size:17.2px}
.foot__social{display:flex; gap:.6rem}
.foot__social a{width:38px; height:38px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; font-size:17.9px; color:var(--ink-dim); transition:.25s}
.foot__social a:hover{background:var(--accent); color:#0c130f; border-color:var(--accent); transform:translateY(-3px)}

/* ══════════ MOBILE TABBAR + MENU ══════════ */
.tabbar{position:fixed; z-index:80; left:12px; right:12px; bottom:12px; border-radius:22px; display:none;
  background:rgba(8,24,12,.92); backdrop-filter:blur(18px); border:1px solid rgba(240,248,232,.12); box-shadow:var(--shadow-pop);
  grid-template-columns:repeat(4,1fr); padding:.45rem}
.tabbar a{display:grid; justify-items:center; gap:.22rem; padding:.5rem .2rem; border-radius:15px; font:700 12.1px var(--font-b); color:var(--ink-faint)}
.tabbar a i{font-style:normal; font-size:22.4px}
.tabbar a.is-on{color:var(--accent); background:rgba(200,245,73,.08)}
.mmenu{position:fixed; inset:0; z-index:85; background:linear-gradient(160deg,#07130a 0%,#0a2412 100%);
  clip-path:circle(0 at calc(100% - 46px) 46px); transition:clip-path .55s var(--ease); visibility:hidden; padding:88px 22px 40px; overflow:auto}
.mmenu.is-open{clip-path:circle(150% at calc(100% - 46px) 46px); visibility:visible}
.mmenu__cats{display:grid; gap:.7rem; margin:1.4rem 0}
.mmenu__cat{display:flex; align-items:center; gap:1rem; padding:1rem 1.1rem; border-radius:18px; background:var(--card); border:1px solid var(--line); color:#122b1a; transition:.25s}
.mmenu__cat:hover{border-color:var(--primary); transform:translateX(4px)}
.mmenu__cat .ic{width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:rgba(19,42,30,0.18); font-size:23.8px}
.mmenu__link{display:flex; justify-content:space-between; align-items:center; padding:.95rem .4rem; font:700 19.5px var(--font-d); border-bottom:1px solid rgba(19,42,30,0.19); color:var(--ink)}
.mmenu__link span{color:var(--ink-faint); font:700 12.6px var(--font-b)}
.mmenu__cta{display:grid; gap:.7rem; margin-top:1.6rem}
.mmenu__search{margin:1.2rem 0 0}

/* ══════════ POPUP / UTILS ══════════ */
.pop{position:fixed; z-index:95; inset:0; display:none; align-items:center; justify-content:center; padding:20px}
.pop.is-open{display:flex}
.pop__veil{position:absolute; inset:0; background:rgba(4,7,5,.75); backdrop-filter:blur(9px)}
.pop__box{position:relative; z-index:1; width:min(520px,100%); border-radius:24px; overflow:hidden;
  background:linear-gradient(160deg,#0c2314,#081a0e); border:1px solid rgba(122,199,124,.3); box-shadow:var(--shadow-pop);
  animation:popIn .5s var(--ease)}
@keyframes popIn{from{transform:translateY(26px) scale(.97); opacity:0}}
.pop__ph{height:120px; position:relative}
.pop__ph img{width:100%; height:100%; object-fit:cover}
.pop__ph::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(47,174,74,.18),rgba(8,26,14,.95))}
.pop__body{padding:1.6rem 1.8rem 1.9rem; margin-top:-46px; position:relative; text-align:center}
.pop__flag{font-size:39.7px; display:block; margin-bottom:.5rem}
.pop__body h3{font-size:30.4px}
.pop__body p{color:var(--ink-dim); font-size:19.3px}
.pop__meta{display:flex; justify-content:center; gap:.5rem; margin:.9rem 0 1.3rem}
.pop__actions{display:grid; grid-template-columns:1fr 1fr; gap:.7rem}

.progress{position:fixed; z-index:75; left:0; top:0; height:3px; width:0; background:linear-gradient(90deg,var(--primary),var(--accent)); transition:width .1s linear}
.toTop{position:fixed; z-index:65; right:1.2rem; bottom:1.4rem; width:48px; height:48px; border-radius:50%; border:1px solid var(--line-2);
  background:rgba(8,26,14,.88); backdrop-filter:blur(10px); color:var(--snow-dim); cursor:pointer; opacity:0; pointer-events:none; transition:.3s; font-size:19.8px}
.toTop.is-on{opacity:1; pointer-events:auto}
.toTop:hover{background:var(--accent); color:#0c130f; border-color:var(--accent)}
.cursor{position:fixed; z-index:99; width:26px; height:26px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(200,245,73,.5),transparent 65%); transform:translate(-50%,-50%); transition:opacity .3s; mix-blend-mode:screen}
@media (hover:none),(prefers-reduced-motion:reduce){.cursor{display:none}}

.cookiebar{position:fixed; z-index:96; left:1.2rem; right:1.2rem; bottom:1.2rem; max-width:520px; padding:1rem 1.2rem;
  border-radius:18px; background:rgba(8,21,12,.94); border:1px solid rgba(240,248,232,.12); backdrop-filter:blur(14px);
  display:flex; gap:1rem; align-items:center; font-size:17.9px; color:var(--ink-dim); transform:translateY(140%); transition:transform .5s var(--ease)}
.cookiebar.is-on{transform:none}
.cookiebar .btn{padding:.6rem 1.1rem; white-space:nowrap}
.cookiebar .btn--ghost{color:var(--snow)}

/* reveal animations */
.rv{opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1; transform:none}
.rv-l{opacity:0; transform:translateX(-40px); transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv-l.in{opacity:1; transform:none}
.rv-r{opacity:0; transform:translateX(40px); transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv-r.in{opacity:1; transform:none}
.rv-s{opacity:0; transform:scale(.94); transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv-s.in{opacity:1; transform:none}
.rv-b{opacity:0; filter:blur(14px); transition:opacity .9s var(--ease),filter .9s var(--ease)}
.rv-b.in{opacity:1; filter:blur(0)}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .rv,.rv-l,.rv-r,.rv-s,.rv-b{opacity:1!important; transform:none!important; filter:none!important; transition:none!important}
  .fcard{animation:none!important; opacity:1!important; transform:none!important}
  .hero__cue i{animation:none}
  .hero--zoom .hero__slide.is-on .hero__media img{animation:none!important}
  .hero__slide{transition:opacity .3s ease!important}
  .pop__box{animation:none}
  .steps::before,.step::before{transition:none}
}

/* page transition */
body{transition:opacity .28s ease}
body.page-out{opacity:0}

/* ar RTL */
html[lang="ar"] body{font-family:'IBM Plex Sans Arabic','Inter',system-ui,sans-serif}
html[lang="ar"]{direction:rtl}
html[lang="ar"] .fcard,html[lang="ar"] .metric{text-align:right}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width:1180px){
  .floatcards{display:none}
  .mega__grid{grid-template-columns:1fr 1fr}
  .mega__cta{grid-column:span 2}
}
@media (max-width:1024px){
  .explorer{grid-template-columns:1fr}
  .explorer__side{position:static; order:2}
  .dash{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr; gap:1.6rem}
  .steps::before{left:33px; right:auto; top:0; bottom:0; width:1px; height:auto; background:linear-gradient(180deg,var(--primary),var(--line))}
  .step{padding:0 0 0 84px}
  .step::before{top:-6px}
  .panel__grid{grid-template-columns:1fr}
  .bento .tile{grid-column:span 12!important}
  .tile--c3.tile--half,.tile--c4.tile--half,.tile--c6.tile--half{grid-column:span 6!important}
}
@media (max-width:992px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:block}
  .tabbar{display:grid}
  .foot__grid{grid-template-columns:1fr 1fr}
  .qv{grid-template-columns:1fr}
  .qv__img{min-height:220px}
  body{padding-bottom:76px}
  .toTop{bottom:88px}
}
@media (max-width:640px){
  :root{--nav-h:66px}
  .wrap{width:calc(100% - 28px)}
  .topbar__in{height:34px}
  .clock{font-size:11px; gap:.65rem}
  .nav{top:34px}
  .nav__in{height:var(--nav-h); gap:.6rem}
  .brand__logo{height:39px; max-width:180px}
  .nav__burger{width:44px;height:44px}
  .nav__burger i{left:11px}
  .hero{min-height:650px; height:calc(100svh - 34px)}
  .hero__wrap{padding-bottom:86px}
  .hero__title{font-size:clamp(39px,11vw,58px); max-width:13ch}
  .hero__sub{font-size:16px; line-height:1.55; max-width:36ch}
  .hero__actions{gap:.6rem; margin-top:1.35rem}
  .hero__actions .btn{padding:.82rem 1.05rem; font-size:14px}
  .pagehero{min-height:360px!important; padding:calc(var(--nav-h) + 54px) 0 42px}
  .pagehero .h-xl,.pagehero .h-lg{font-size:clamp(36px,10vw,54px)}
  .pagehero .lede{font-size:16px; line-height:1.55}
  .section{padding:48px 0}
  .panel{padding:1rem; border-radius:18px}
  .panel__grid{gap:1.3rem}
  .aform{gap:.68rem}
  .aform__row{gap:.68rem}
  .aform textarea{min-height:96px}
  .field>span{font-size:11px}
  input,textarea,select{font-size:15px; padding:.62rem .76rem; border-radius:10px}
  .btn{font-size:14px; padding:.76rem 1.05rem}
  .dash{gap:.8rem}
  .dash__side{gap:.8rem}
  .dcard{padding:1rem 1.05rem}
  .dcard dl{font-size:15px}
  .clock span:nth-child(2){display:none}
  .topbar__right{display:none}
  .hero__dots{top:auto; bottom:14%; right:auto; left:50%; transform:translateX(-50%); display:flex}
  .hero__dots button{width:30px;height:30px;font-size:13.8px}
  .aform__row{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
  .pgrid{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr 1fr}
  .tabbar{left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));border-radius:18px}
  .tabbar a{font-size:10.5px;padding:.42rem .1rem}
  .tabbar a i{font-size:19px}
}

/* ═════════════════════════════════════════════════════════════
   GREEN COMFORT V3 — EFFECTS LAYER
   floating leaves · shimmer CTAs · aurora mesh · soft glows
   ═════════════════════════════════════════════════════════════ */

/* footer logo variant */
.brand__logo--foot{height:62px; width:auto}

/* stronger focus for accessibility */
:focus-visible{outline:3px solid var(--accent); outline-offset:3px}

/* hero headline lift */
.hero__title{text-shadow:0 4px 38px rgba(4,14,7,.65)}

/* ── floating botanical leaves over the hero ── */
.leafdrift{position:absolute; top:-8%; z-index:2; pointer-events:none;
  width:18px; height:18px; background:linear-gradient(135deg,#5ecb6f,#1c7a34);
  border-radius:0 100% 0 100%; opacity:0;
  animation:leafFall linear infinite}
.leafdrift--sm{width:12px; height:12px}
.leafdrift--gold{background:linear-gradient(135deg,#e3c05a,#b8860b)}
@keyframes leafFall{
  0%{transform:translate(0,-10%) rotate(0deg); opacity:0}
  8%{opacity:.55}
  88%{opacity:.5}
  100%{transform:translate(-140px,112vh) rotate(360deg); opacity:0}
}

/* ── shimmer sweep on primary buttons ── */
.btn--lime{overflow:hidden}
.btn--lime::after{content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
  transform:translateX(-120%); transition:none}
.btn--lime:hover::after{animation:shimmer .9s ease}
@keyframes shimmer{to{transform:translateX(120%)}}
.btn--lime{animation:ctaPulse 3.2s ease-in-out infinite}
@keyframes ctaPulse{0%,100%{box-shadow:0 10px 30px -10px rgba(47,174,74,.45)}50%{box-shadow:0 14px 42px -10px rgba(47,174,74,.75)}}

/* ── soft green glow on card hover ── */
.tile::before,.pcard::before,.scard::before{content:""; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; box-shadow:inset 0 0 0 1.5px transparent; transition:box-shadow .35s; z-index:3}
.tile:hover::before{box-shadow:inset 0 0 0 1.5px rgba(47,174,74,.55),0 26px 60px -26px rgba(15,90,40,.5)}
.pcard:hover::before{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--cat) 60%,transparent)}

/* ── aurora drift on the mesh atmospherics ── */
.mesh{animation:aurora 16s ease-in-out infinite alternate}
@keyframes aurora{
  0%{background-position:0% 0%,100% 0%,50% 100%; opacity:.9}
  100%{background-position:12% 8%,88% 10%,42% 92%; opacity:1}
}

/* ── gradient numbers on metrics ── */
.metric__n em{background:linear-gradient(92deg,#0a7030,#279149); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ── nav link pill hover ── */
.nav__link{transition:background .25s,color .25s}
.nav__link:hover{background:rgba(47,174,74,.12); color:var(--primary)}

/* ── leaf bullet flourish on section heads ── */
.kicker::after{content:"🌿"; font-size:.9em; opacity:.85}

/* ── reveal softness for smoother entrances ── */
.rv{transition-duration:.95s}

/* green scrollbar */
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:#dcefd0}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#2fae4a,#0f7a38); border-radius:99px; border:2px solid #dcefd0}

@media (prefers-reduced-motion:reduce){
  .leafdrift{display:none!important}
  .btn--lime{animation:none!important}
  .btn--lime::after{display:none}
  .mesh{animation:none!important}
}