/* =====================================================================
   Plantmargin website v2 — light and calm: near-white pages with a faint green glow and grid,
   dark headlines with one green accent phrase, white floating figure cards, pill buttons.
   Green is for accents and actions only, never for large areas.
   Loaded after plantmargin.css.
   ===================================================================== */
:root{--glow:#E8F5E9;--accent:#2E7D32;--accent-2:#43A047;--card-shadow:0 24px 50px -24px rgba(15,23,42,.28),0 2px 6px rgba(15,23,42,.04)}
body{background:radial-gradient(1100px 520px at 100% -80px,var(--glow),transparent 62%),radial-gradient(800px 420px at -10% 0,#F4F8F5,transparent 60%),var(--bg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--glow:#10251A}}
:root[data-theme="dark"]{--glow:#10251A}
.btn{border-radius:999px}
.btn-primary{background:var(--accent);box-shadow:0 8px 20px -8px rgba(46,125,50,.55)}
.btn-primary:hover{background:var(--g-800)}
.btn-secondary{background:var(--surface);border:1px solid var(--line-strong)}
.site-header{background:rgba(255,255,255,.82);backdrop-filter:saturate(1.4) blur(12px)}
:root[data-theme="dark"] .site-header{background:rgba(10,16,28,.82)}

/* kicker: ● MEASURED, NOT ESTIMATED */
.kicker{display:inline-flex;align-items:center;gap:10px;color:var(--accent);font-weight:800;letter-spacing:.12em;font-size:13px;text-transform:uppercase}
.kicker::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 0 5px rgba(67,160,71,.16);animation:kpulse 2.4s ease-in-out infinite}
@keyframes kpulse{50%{box-shadow:0 0 0 9px rgba(67,160,71,.06)}}
.display em,.h2 em,h1 em,h2 em{font-style:normal;color:var(--accent)}
.display{font-weight:850;letter-spacing:-.04em;line-height:1.02}

/* faint grid behind hero sections */
.gridbg{position:relative}
.gridbg::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(15,23,42,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.045) 1px,transparent 1px);
  background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 20%,transparent 70%);mask-image:radial-gradient(ellipse at 70% 40%,#000 20%,transparent 70%)}

/* ---------- v2 hero ---------- */
.hero2{padding:56px 0 80px;overflow:hidden}
.hero2 .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center}
.hero2 h1{font-size:clamp(40px,5.2vw,66px);margin:18px 0 18px}
.hero2 .lead{font-size:19px;color:var(--ink-2);max-width:34em}
.hero2 .btn-row{margin-top:28px}
.hero2 .site{margin-top:14px;color:var(--ink-3);font-weight:600}
@media (max-width:980px){.hero2 .split{grid-template-columns:1fr}.hero2{padding-top:28px}}

.stage{position:relative;min-height:520px}
.stage .browser{position:absolute;right:-60px;top:20px;width:640px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 40px 80px -30px rgba(15,23,42,.35);overflow:hidden}
.stage .browser .bar{height:36px;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid #EEF2F7;background:#FBFCFB}
.stage .browser .bar i{width:10px;height:10px;border-radius:50%;background:#CBD5E1}
.stage .browser .bar span{margin-left:10px;font-size:12px;color:#64748B}
.stage .browser img{display:block;width:100%;height:auto}
.shots .frame img{height:auto}
.stage .phone{position:absolute;right:18px;top:120px;width:220px;border-radius:34px;background:#0F172A;padding:9px;box-shadow:0 40px 70px -25px rgba(15,23,42,.55);transform:rotate(3deg)}
.stage .phone img{display:block;width:100%;height:auto;border-radius:26px}
.fcard{position:absolute;display:flex;gap:14px;align-items:center;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:18px;padding:14px 18px;box-shadow:var(--card-shadow);z-index:3;color:#0F172A}
.fcard .ic{width:46px;height:46px;border-radius:12px;background:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.fcard .ic svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fcard .l{font-size:13.5px;color:#475569}.fcard .v{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.fcard .n{font-size:13px;font-weight:600;color:var(--accent)}
.fcard.live .l::after{content:" · live";color:var(--accent);font-weight:700}
.stage .f1{left:-10px;bottom:30px}.stage .f2{left:40px;top:0}
@media (max-width:980px){.stage{min-height:0;margin:10px 0 40px}.stage .browser{position:relative;right:auto;width:100%;top:0}.stage .phone{width:150px;right:-6px;top:auto;bottom:-10px}.stage .f2{top:-16px;left:8px}.stage .f1{left:8px;bottom:-24px}}
@media (max-width:560px){.fcard .v{font-size:19px}.fcard{padding:10px 12px}.fcard .ic{width:38px;height:38px}}

/* ---------- story at a glance ---------- */
.story{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:st;position:relative}
.story::before{content:"";position:absolute;left:6%;right:6%;top:30px;height:2px;background:linear-gradient(90deg,var(--line),var(--g-300),var(--line))}
.story .st{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:0 18px 40px -30px rgba(15,23,42,.35)}
.story .st .when{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.story .st h3{margin:8px 0 6px;font-size:21px}.story .st p{color:var(--ink-2);font-size:15px}
.story .st .fig{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);font-weight:800;font-size:22px;font-variant-numeric:tabular-nums}
.story .st .fig small{display:block;font-size:12.5px;font-weight:500;color:var(--ink-3)}
.story .dot{width:44px;height:44px;border-radius:14px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--accent);box-shadow:var(--shadow)}
@media (max-width:900px){.story{grid-template-columns:1fr 1fr}.story::before{display:none}}
@media (max-width:560px){.story{grid-template-columns:1fr}}

/* ---------- live banner ---------- */
.livebar{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:26px;box-shadow:0 30px 70px -40px rgba(15,23,42,.35)}
.livebar .top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.livebar .tabs2{display:flex;gap:6px;flex-wrap:wrap}.livebar .tabs2 button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 14px;font-size:14px;cursor:pointer}
.livebar .tabs2 button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.livebar .tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:18px}
.livebar .tile{border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--bg-soft)}
.livebar .tile .k{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.livebar .tile .v{font-size:28px;font-weight:800;letter-spacing:-.02em;margin-top:6px;font-variant-numeric:tabular-nums;transition:color .3s}
.livebar .tile .v small{font-size:13px;font-weight:600;color:var(--ink-3)}
.livebar .tile .v.flash{color:var(--accent)}
.livebar .meter{height:8px;border-radius:99px;background:var(--line);margin-top:10px;overflow:hidden}.livebar .meter i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .6s}
.livebar .meter.warn i{background:#F59E0B}
.livechip{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink-2)}
.livechip::before{content:"";width:8px;height:8px;border-radius:50%;background:#22C55E;animation:blink 1.2s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
@media (max-width:900px){.livebar .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- screenshot tour ---------- */
.shots{display:grid;grid-template-columns:240px minmax(0,1fr);gap:26px;align-items:start}
.shots .list{display:grid;gap:8px}.shots .list button{text-align:left;border:1px solid transparent;background:none;border-radius:14px;padding:12px 14px;cursor:pointer}
.shots .list button b{display:block;font-size:16px}.shots .list button span{font-size:13.5px;color:var(--ink-3)}
.shots .list button[aria-selected="true"]{background:var(--surface);border-color:var(--line);box-shadow:var(--shadow)}
.shots .frame{border-radius:18px;border:1px solid var(--line);overflow:hidden;background:#fff;box-shadow:0 40px 80px -40px rgba(15,23,42,.4)}
.shots .frame img{display:block;width:100%;height:auto}
@media (max-width:900px){.shots{grid-template-columns:1fr}.shots .list{grid-auto-flow:column;overflow-x:auto}}

/* ---------- animated code ---------- */
.codewin{background:#0B1220;color:#CBD5E1;border-radius:20px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(15,23,42,.6);font:13.5px/1.65 var(--mono)}
.codewin .bar{display:flex;gap:7px;align-items:center;padding:12px 16px;background:#0F172A;border-bottom:1px solid #1E293B}
.codewin .bar i{width:10px;height:10px;border-radius:50%;background:#334155}.codewin .bar span{margin-left:8px;color:#64748B;font-size:12px}
.codewin pre{margin:0;padding:18px 20px;min-height:340px;white-space:pre-wrap;word-break:break-word}
.codewin .k{color:#86EFAC}.codewin .s{color:#FDE68A}.codewin .c{color:#64748B}.codewin .n{color:#93C5FD}
.codewin .cur{display:inline-block;width:8px;height:16px;background:#86EFAC;vertical-align:-3px;animation:blink 1s steps(2,start) infinite}

/* ---------- photos: feature image, shaded bands and full-width banner ---------- */
.photo-feature{margin:0;position:relative;border-radius:24px;overflow:visible;align-self:center}
.photo-feature picture,.photo-feature img{display:block;width:100%;height:auto;border-radius:24px;box-shadow:0 40px 80px -40px rgba(15,23,42,.55)}
.photo-feature img{aspect-ratio:612/392;object-fit:cover;filter:saturate(.9) contrast(1.03)}
.photo-feature .fcard{position:absolute;max-width:250px;padding:12px 14px}.photo-feature .fcard .v{font-size:15px;line-height:1.3}.photo-feature .fcard .l,.photo-feature .fcard .n{font-size:12px}
.photo-feature .pf-a{left:-18px;top:18px}.photo-feature .pf-a .ic{background:#FEF3C7;color:#B45309}
.photo-feature .pf-b{right:-14px;bottom:-22px}
@media (max-width:820px){.photo-feature .fcard{position:static;margin-top:10px;max-width:none}}
.photo-band{position:relative;isolation:isolate;overflow:hidden}
.photo-band::before{content:"";position:absolute;inset:0;background-image:var(--bgimg);background-size:cover;background-position:center;opacity:.09;filter:grayscale(.35);z-index:-1;
  -webkit-mask-image:linear-gradient(270deg,transparent 0%,#000 60%);mask-image:linear-gradient(270deg,transparent 0%,#000 60%)}
.photo-band.right::before{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 70%);mask-image:linear-gradient(90deg,transparent 0%,#000 70%)}
.photo-banner{position:relative;isolation:isolate;overflow:hidden;color:#fff;padding:120px 0;min-height:420px;display:flex;align-items:center;
  background-image:linear-gradient(90deg,rgba(10,16,28,.92) 0%,rgba(10,16,28,.72) 45%,rgba(10,16,28,.25) 100%),var(--bgimg);background-size:cover;background-position:center 60%}
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){.photo-banner{background-attachment:fixed}}
.photo-banner .container{max-width:var(--container,1200px)}
.photo-banner .h2{color:#fff!important;max-width:620px;margin-top:12px}.photo-banner .h2 em{color:#86EFAC}
.photo-banner .lead{color:#E2E8F0!important;max-width:560px;margin-top:14px}
.photo-banner .eyebrow{color:#86EFAC!important}
.photo-banner .btn-row{margin-top:24px}
.btn-ghost-light{color:#fff;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.06)}.btn-ghost-light:hover{background:rgba(255,255,255,.16);color:#fff}
@media (max-width:640px){.photo-banner{padding:72px 0;min-height:0}}

/* photo classes: url() resolves against this stylesheet */
.ph-automation-line{--bgimg:url(../img/photos/automation-line.webp)}
.ph-engineer-monitors{--bgimg:url(../img/photos/engineer-monitors.webp)}
.ph-plastics-moulding{--bgimg:url(../img/photos/plastics-moulding.webp)}
.ph-process-pipes{--bgimg:url(../img/photos/process-pipes.webp)}
.ph-refinery-dusk{--bgimg:url(../img/photos/refinery-dusk.webp)}
.ph-sugar-conveyor{--bgimg:url(../img/photos/sugar-conveyor.webp)}
.ph-tea-factory{--bgimg:url(../img/photos/tea-factory.webp)}

/* ---------- industry pages: faint photo behind the page hero ---------- */
.page-hero.photo{position:relative;overflow:hidden}
.page-hero.photo::after{content:"";position:absolute;inset:0;background-image:var(--bgimg);background-size:cover;background-position:center;opacity:.13;filter:grayscale(.25);z-index:-1;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 55%);mask-image:linear-gradient(90deg,transparent 0%,#000 55%)}
.page-hero.photo{isolation:isolate}

/* ---------- light CTA band (replaces the dark green band) ---------- */
.cta-band{background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--line);box-shadow:0 40px 80px -50px rgba(15,23,42,.45)}
.cta-band::before,.cta-band::after{opacity:.6}
.cta-band h2{color:var(--ink)!important}.cta-band p{color:var(--ink-2)!important}
.cta-band .btn-secondary{color:var(--ink)!important;border-color:var(--line-strong)!important}

/* ---------- small things ---------- */
.feature-card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:0 20px 50px -40px rgba(15,23,42,.4);text-decoration:none;color:inherit;display:block}
.feature-card:hover{border-color:var(--g-300)}
.feature-card .h3{margin:10px 0 6px}
.social{display:flex;gap:10px;margin-top:6px}
.social a{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-2)}
.social a:hover{color:var(--accent);border-color:var(--g-300)}
.social svg{width:18px;height:18px;fill:currentColor}
.score{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;align-items:end;height:170px}
.score div{background:linear-gradient(180deg,var(--g-400),var(--accent));border-radius:8px 8px 3px 3px;position:relative}
.score div span{position:absolute;bottom:-22px;left:0;right:0;text-align:center;font-size:11.5px;color:var(--ink-3)}
.price-toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:4px;background:var(--surface)}
.price-toggle button{border:0;background:none;border-radius:999px;padding:7px 16px;cursor:pointer;font-weight:600}
.price-toggle button[aria-pressed="true"]{background:var(--ink);color:#fff}

/* v1 classes in the v2 look */
.muted-part{color:var(--accent)!important}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--accent)!important;font-weight:800!important;letter-spacing:.12em;font-size:13px!important;text-transform:uppercase;background:none!important;border:0!important;padding:0!important}
.eyebrow::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 0 5px rgba(67,160,71,.16)}
.tier .price{display:block}.tier .price b{font-size:32px;white-space:nowrap;display:block}.tier .price span{display:block;font-size:13px;color:var(--ink-3)}

/* logo strip: partners, clients, programmes, standards (filled from the Plantmargin console) */
.logos-section{padding-top:40px;padding-bottom:40px;border-top:1px solid var(--line,#E2E8F0)}
.logo-group+.logo-group{margin-top:28px}
.logo-group .eyebrow{display:block;margin-bottom:18px}
.logo-row,.logo-track{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:56px}
.logo-row{flex-wrap:wrap;justify-content:center;row-gap:24px}
.logo-item img{display:block;height:auto;max-height:52px;max-width:160px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.72;transition:filter .25s,opacity .25s}
.logo-item a:hover img,.logo-item a:focus-visible img,.logo-item span:hover img{filter:none;opacity:1}
.logo-marquee{display:flex;overflow:hidden;gap:56px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-marquee .logo-track{flex:none;min-width:100%;justify-content:space-around;animation:logo-scroll var(--dur,30s) linear infinite}
.logo-marquee:hover .logo-track,.logo-marquee:focus-within .logo-track{animation-play-state:paused}
@keyframes logo-scroll{from{transform:translateX(0)}to{transform:translateX(calc(-100% - 56px))}}
@media (max-width:640px){.logo-row,.logo-track,.logo-marquee{gap:32px}.logo-item img{max-height:40px;max-width:120px}@keyframes logo-scroll{to{transform:translateX(calc(-100% - 32px))}}}
@media (prefers-reduced-motion:reduce){.logo-marquee .logo-track{animation:none}}
[data-plans-live]{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
@media (max-width:900px){[data-plans-live]{grid-template-columns:1fr}}

/* nav: keep each item on one line; tighten between 980 and 1320 px */
.nav-links a{white-space:nowrap}
@media (max-width:1320px){.nav-links a{padding:8px 8px;font-size:14px}}
@media (max-width:1120px){.nav-links a{padding:8px 6px;font-size:13.5px}}

/* solar system type choice (estimate) and cards */
.systype{border:0;padding:0;margin:0 0 12px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.systype legend{font-weight:600;font-size:14px;margin-bottom:6px;padding:0}
.systype label{cursor:pointer;display:block}
.systype input{position:absolute;opacity:0;pointer-events:none}
.systype span{display:block;border:1px solid var(--line);border-radius:12px;padding:10px;height:100%;background:var(--surface);transition:border-color .15s,box-shadow .15s}
.systype b{display:block;font-size:14px}.systype small{display:block;font-size:12px;color:var(--ink-3,#64748B);margin-top:2px;line-height:1.35}
.systype input:checked+span{border-color:var(--g-600,#2E7D32);box-shadow:0 0 0 3px rgba(46,125,50,.15)}
.systype input:focus-visible+span{outline:2px solid var(--g-600,#2E7D32);outline-offset:2px}
@media (max-width:520px){.systype{grid-template-columns:1fr}}
.systype-card .tag{display:inline-block;font-size:12px;font-weight:600;color:#B45309;background:#FEF3C7;border-radius:999px;padding:3px 10px;margin-bottom:10px}
.systype-card .checks{margin-top:12px}

/* hero: live control-room video */
.hero-live video{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:#F8FAFC}
.hero-live .bar{position:relative}
.hero-expand{margin-left:auto;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:8px;padding:3px 9px;font:600 12px/1.4 inherit;cursor:pointer}
.hero-expand svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero-expand:hover{color:var(--ink);border-color:var(--line-strong)}
@media (max-width:520px){.hero-expand span{display:none}}
.hero-live:fullscreen{background:#0A101C;display:flex;flex-direction:column;justify-content:center;border-radius:0}
.hero-live:fullscreen video{max-height:calc(100vh - 44px);object-fit:contain;background:#0A101C}
.hero-live:-webkit-full-screen{background:#0A101C;display:flex;flex-direction:column;justify-content:center}
.stage .browser .bar .hero-expand span{margin-left:0;color:inherit}

/* hero, wide: copy centred above, the tea control room playing across the full width below */
.hero-wide{padding:56px 0 96px}
.hero-wide .hero-copy{max-width:880px;margin:0 auto;text-align:center}
.hero-wide .hero-copy .lead{margin-left:auto;margin-right:auto}
.hero-wide .hero-copy .btn-row,.hero-wide .hero-copy .assurances{justify-content:center}
.hero-wide .stage.wide{min-height:0;margin:56px auto 0;max-width:1180px}
.hero-wide .stage.wide .browser{position:relative;right:auto;top:0;width:100%;border-radius:20px;box-shadow:0 60px 120px -50px rgba(15,23,42,.55)}
.hero-wide .stage.wide .phone{right:-84px;top:auto;bottom:-120px;width:190px;transform:rotate(4deg)}
.hero-wide .stage.wide .f2{left:-64px;top:auto;bottom:30%}
.hero-wide .stage.wide .f1{left:-40px;top:auto;bottom:-56px}
.hero-wide{padding-bottom:150px}
@media (max-width:1280px){.hero-wide .stage.wide .phone{right:-6px;width:160px;bottom:-90px}.hero-wide .stage.wide .f2{left:-6px}.hero-wide .stage.wide .f1{left:4px}}
@media (max-width:980px){.hero-wide .stage.wide{margin-top:36px}.hero-wide .stage.wide .phone{width:120px;bottom:-30px;right:-4px}
  .hero-wide .stage.wide .f2{display:none}.hero-wide .stage.wide .f1{bottom:-34px;left:6px}}
@media (max-width:560px){.hero-wide .hero-copy{text-align:left}.hero-wide .hero-copy .btn-row,.hero-wide .hero-copy .assurances{justify-content:flex-start}
  .hero-wide .stage.wide .phone{display:none}.hero-wide .stage.wide .f1{position:relative;left:0;bottom:0;margin-top:14px}.hero-wide{padding-bottom:56px}}

/* ---------- cinematic hero: the tea control room behind, shaded dark, the promise on top ---------- */
.hero-cine{position:relative;isolation:isolate;overflow:hidden;min-height:min(92vh,860px);display:flex;flex-direction:column;justify-content:center;
  background:#05080F;color:#fff;padding:96px 0 40px}
.hc-media{position:absolute;inset:0;z-index:-2}
.hc-media video{width:100%;height:100%;object-fit:cover;object-position:right 30%;transform:scale(1.06);filter:blur(1px) saturate(1.05) brightness(1.02)}
.hc-shade{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(6,12,22,.9) 0%,rgba(6,12,22,.84) 36%,rgba(6,12,22,.58) 56%,rgba(6,12,22,.16) 78%,rgba(6,12,22,.06) 100%),
             linear-gradient(180deg,rgba(6,12,22,.35) 0%,rgba(6,12,22,0) 30%,rgba(6,12,22,0) 72%,rgba(6,12,22,.7) 100%),
             radial-gradient(900px 500px at 15% 40%,rgba(46,125,50,.20),transparent 70%)}
.hc-inner{position:relative;max-width:1180px}
.hc-kicker{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#A7F3D0;
  padding:7px 14px;border:1px solid rgba(167,243,208,.25);border-radius:999px;background:rgba(255,255,255,.04);backdrop-filter:blur(6px)}
.hc-kicker i{width:8px;height:8px;border-radius:50%;background:#4ADE80;box-shadow:0 0 0 4px rgba(74,222,128,.18);animation:hcPulse 2s ease-in-out infinite}
@keyframes hcPulse{50%{box-shadow:0 0 0 8px rgba(74,222,128,0)}}
.hc-title{text-shadow:0 2px 24px rgba(0,0,0,.35);font-size:clamp(44px,7.4vw,96px);line-height:.98;letter-spacing:-.045em;font-weight:800;margin:22px 0 22px;color:#fff;max-width:13ch}
.hc-title em{font-style:normal;background:linear-gradient(90deg,#4ADE80,#A7F3D0);-webkit-background-clip:text;background-clip:text;color:transparent}
.hc-lead{text-shadow:0 1px 12px rgba(0,0,0,.45);font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:rgba(241,245,249,.92);max-width:36em;margin:0}
.hc-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.btn-lg{padding:15px 26px;font-size:16px}
.hc-ghost{color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);cursor:pointer;font:inherit;font-weight:600}
.hc-ghost:hover{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.4)}
.hc-ghost .icon{width:18px;height:18px}
.hc-facts{display:flex;flex-wrap:wrap;gap:14px 40px;list-style:none;padding:0;margin:46px 0 0}
.hc-facts li{display:flex;flex-direction:column;gap:2px;padding-left:14px;border-left:2px solid rgba(74,222,128,.55)}
.hc-facts b{font-size:18px;color:#fff;letter-spacing:-.01em}.hc-facts span{font-size:13.5px;color:rgba(203,213,225,.75)}
.hc-live{position:relative;display:flex;flex-wrap:wrap;gap:10px;margin-top:56px;max-width:1180px}
.hc-chip{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:14px;background:rgba(15,23,42,.55);border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(10px)}
.hc-chip .l{font-size:12.5px;color:rgba(203,213,225,.8)}.hc-chip b{font-size:15px;color:#fff;font-variant-numeric:tabular-nums}
.hc-chip .dot{width:8px;height:8px;border-radius:50%;background:#4ADE80}.hc-chip .dot.amber{background:#F59E0B}
.hero-cine.fs{min-height:100vh}
@media (max-width:720px){.hero-cine{min-height:auto;padding:72px 0 28px}.hc-shade{background:linear-gradient(180deg,rgba(6,12,22,.72),rgba(6,12,22,.82))}.hc-media video{filter:blur(2px)}
  .hc-facts{gap:14px 24px}.hc-live{margin-top:32px}.hc-chip{flex:1 1 100%}}
@media (prefers-reduced-motion:reduce){.hc-kicker i{animation:none}}
.hero-expand{font-family:inherit;font-size:12px;font-weight:600;line-height:1.4}
/* ---------- home hero: words on the left, the live control room on the right ---------- */
.hero-split{padding-block:64px 88px}
.hero-split>.container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:44px;align-items:center}
.hero-split .hero-copy{max-width:none;margin:0;text-align:left}
.hero-split .display{font-size:clamp(40px,4.4vw,64px);line-height:1.03}
.hero-split .lead{margin-left:0;margin-right:0;max-width:34em;font-size:18px}
.hero-split .btn-row{justify-content:flex-start;flex-wrap:wrap;gap:10px}
.hero-split .btn-row{flex-wrap:nowrap}.hero-split .btn-row .btn-lg{padding:12px 16px;font-size:15px;white-space:nowrap}
@media (max-width:1240px){.hero-split .btn-row{flex-wrap:wrap}}
.hero-split .assurances{justify-content:flex-start;flex-direction:column;gap:8px}
.hero-split .stage.hs-stage{position:relative;min-height:0;margin:0}
.hs-stage::before{content:"";position:absolute;inset:-8% -6% -10% -6%;background:radial-gradient(closest-side,rgba(67,160,71,.16),transparent 72%);z-index:-1;pointer-events:none}
.hs-stage .browser{position:relative;right:auto;top:0;width:100%;border-radius:18px;box-shadow:0 50px 100px -40px rgba(15,23,42,.45),0 0 0 1px rgba(15,23,42,.04);transform:perspective(1800px) rotateY(-4deg);transform-origin:left center;transition:transform .5s ease}
.hs-stage .browser:hover{transform:none}
@media (max-width:1100px){.hero-split>.container{grid-template-columns:minmax(0,1fr);gap:40px}.hs-stage .browser{transform:none}.hero-split .assurances{flex-direction:row;flex-wrap:wrap}}
@media (max-width:760px){.hero-split{padding-block:40px 56px}}
.hero-live .bar>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hero-expand{white-space:nowrap;flex:none}
@media (max-width:520px){.hero-live .bar>span{font-size:11px}}

/* ================= International look: photo tiles, offering pillars, figures band, story cards, utility bar ================= */
/* Photo slots: drop assets/img/photos/<slot>.webp on the server and it replaces the fallback, no code change */
.ph-ind-tea{--ph:url(../img/photos/ind-tea.webp),url(../img/photos/tea-factory.webp)}
.ph-ind-sugar{--ph:url(../img/photos/ind-sugar.webp),url(../img/photos/sugar-conveyor.webp)}
.ph-ind-dairy{--ph:url(../img/photos/ind-dairy.webp),url(../img/photos/process-pipes.webp)}
.ph-ind-milling{--ph:url(../img/photos/ind-milling.webp),url(../img/photos/automation-line.webp)}
.ph-ind-cement{--ph:url(../img/photos/ind-cement.webp),url(../img/photos/refinery-dusk.webp)}
.ph-ind-plastics{--ph:url(../img/photos/ind-plastics.webp),url(../img/photos/plastics-moulding.webp)}
.ph-off-monitor{--ph:url(../img/photos/off-monitor.webp),url(../img/photos/engineer-monitors.webp)}
.ph-off-improve{--ph:url(../img/photos/off-improve.webp),url(../img/photos/automation-line.webp)}
.ph-off-solar{--ph:url(../img/photos/off-solar.webp),url(../img/photos/refinery-dusk.webp)}
.ph-off-service{--ph:url(../img/photos/off-service.webp),url(../img/photos/tea-factory.webp)}
.ph-band-figures{--ph:url(../img/photos/band-figures.webp),url(../img/photos/refinery-dusk.webp)}
.ph-story-1{--ph:url(../img/photos/story-1.webp),url(../img/photos/engineer-monitors.webp)}
.ph-story-2{--ph:url(../img/photos/story-2.webp),url(../img/photos/process-pipes.webp)}
.ph-story-3{--ph:url(../img/photos/story-3.webp),url(../img/photos/sugar-conveyor.webp)}

.eyebrow-line{display:inline-flex;align-items:center;gap:12px;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.eyebrow-line::before{content:"";width:28px;height:2px;background:currentColor;border-radius:2px}
.sec-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px;flex-wrap:wrap}
.sec-top .link{white-space:nowrap}

/* industry photo tiles */
.ptiles{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}.ptile{grid-column:span 3}.ptile:nth-child(-n+2){grid-column:span 6;min-height:420px}
.ptile{position:relative;display:block;min-height:320px;border-radius:16px;overflow:hidden;color:#fff;text-decoration:none;isolation:isolate;background:#0F172A}

.ptile-img{position:absolute;inset:0;background-image:var(--ph);background-size:cover;background-position:center;transition:transform .8s cubic-bezier(.2,.7,.2,1);z-index:-2}
.ptile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,12,22,0) 30%,rgba(6,12,22,.55) 62%,rgba(6,12,22,.88) 100%);z-index:-1;transition:background .4s}
.ptile:hover .ptile-img{transform:scale(1.06)}
.ptile:hover::after{background:linear-gradient(180deg,rgba(6,12,22,.05) 15%,rgba(6,12,22,.6) 55%,rgba(6,12,22,.92) 100%)}
.ptile-body{position:absolute;left:0;right:0;bottom:0;padding:24px;display:flex;flex-direction:column;gap:6px}
.ptile-k{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#A5D6A7}
.ptile-t{font-size:clamp(20px,1.8vw,26px);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.ptile:nth-child(-n+2) .ptile-t{font-size:clamp(26px,2.6vw,36px)}
.ptile-d{font-size:14.5px;line-height:1.5;color:rgba(241,245,249,.86);max-width:30em}
.ptile-go{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-weight:700;font-size:14px;color:#fff}
.ptile-go .icon{width:16px;height:16px;transition:transform .3s}
.ptile:hover .ptile-go .icon{transform:translateX(4px)}
.ptile:focus-visible{outline:3px solid var(--accent-2);outline-offset:3px}

/* offering pillars: photo and text alternating */
.pillars{display:flex;flex-direction:column;gap:28px}
.pillar{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:var(--surface,#fff);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 30px 60px -45px rgba(15,23,42,.35)}
.pillar.flip .pillar-img{order:2}
.pillar-img{min-height:360px;background-image:var(--ph);background-size:cover;background-position:center;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.pillar:hover .pillar-img{transform:scale(1.03)}
.pillar{isolation:isolate}
.pillar-img{position:relative;z-index:-1}
.pillar-body{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:center;gap:14px;background:inherit}
.pillar-body .btn{align-self:flex-start;margin-top:6px}

/* figures band: photo behind a deep shade */
.figures-band{position:relative;isolation:isolate;padding:84px 0;color:#fff;overflow:hidden;background:#0B1424}
.figures-band::before{content:"";position:absolute;inset:0;background-image:var(--ph);background-size:cover;background-position:center 40%;z-index:-2;filter:saturate(.9)}
.figures-band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,16,30,.92),rgba(8,16,30,.78) 55%,rgba(13,48,24,.72));z-index:-1}
.fig-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.fig-grid>div{border-left:2px solid rgba(165,214,167,.55);padding-left:20px;display:flex;flex-direction:column;gap:8px}
.fig-grid b{font-size:clamp(34px,3.6vw,52px);font-weight:850;letter-spacing:-.03em;line-height:1}
.fig-grid span{font-size:15px;line-height:1.5;color:rgba(226,232,240,.85);max-width:16em}

/* story cards */
.stories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.story-card{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:var(--surface,#fff);border:1px solid var(--line);text-decoration:none;color:inherit;transition:box-shadow .3s,transform .3s}
.story-card:hover{box-shadow:0 30px 60px -36px rgba(15,23,42,.45);transform:translateY(-3px)}
.sc-img{display:block;aspect-ratio:16/10;background-image:var(--ph);background-size:cover;background-position:center}
.sc-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px}
.sc-tag{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.sc-t{font-size:19px;font-weight:750;letter-spacing:-.015em;line-height:1.3;color:var(--ink)}
.sc-d{font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.sc-meta{font-size:12.5px;color:var(--muted,#64748B);margin-top:4px}

/* utility bar above the header (every page) */
.utilbar{background:#0B1424;color:#CBD5E1;font-size:12.5px}
.utilbar .container{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:34px}
.utilbar a{color:#CBD5E1;text-decoration:none}
.utilbar a:hover{color:#fff}
.ub-l{display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ub-l i{width:6px;height:6px;border-radius:50%;background:#4CAF50;box-shadow:0 0 0 3px rgba(76,175,80,.25);flex:none}
.ub-r{display:flex;align-items:center;gap:18px;white-space:nowrap}
.ub-country{position:relative}
.ub-country>button{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:6px 0}
.ub-country>button svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ub-menu{position:absolute;right:0;top:100%;z-index:60;min-width:220px;background:#fff;color:#0F172A;border-radius:12px;box-shadow:0 24px 48px -20px rgba(15,23,42,.45);border:1px solid #E2E8F0;padding:8px;display:none}
.ub-country.open .ub-menu{display:block}
.ub-menu a{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;border-radius:8px;color:#0F172A;font-size:14px}
.ub-menu a:hover{background:#F1F5F9;color:#0F172A}
.ub-menu a[aria-current]{font-weight:700;color:var(--accent)}
.ub-menu .soon{font-size:12px;color:#94A3B8}
:root[data-theme="dark"] .ub-menu{background:#111827;color:#E5E7EB;border-color:#1F2937}
:root[data-theme="dark"] .ub-menu a{color:#E5E7EB}
:root[data-theme="dark"] .ub-menu a:hover{background:#1F2937}

@media (max-width:1100px){.ptile{grid-column:span 6}.ptile:nth-child(-n+2){min-height:380px}.fig-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.pillar,.pillar.flip{grid-template-columns:minmax(0,1fr)}.pillar.flip .pillar-img{order:0}.pillar-img{min-height:240px}.stories{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.ptile,.ptile:nth-child(-n+2){grid-column:span 12;min-height:280px}.fig-grid{grid-template-columns:minmax(0,1fr)}.figures-band{padding:60px 0}.ub-l span{display:none}.ub-hide-m{display:none}}
@media (prefers-reduced-motion:reduce){.ptile-img,.pillar-img,.story-card{transition:none}}

/* photos for page heroes, bands and banners */
.ph-ind-tea{--bgimg:url(../img/photos/ind-tea.webp)}
.ph-ind-sugar{--bgimg:url(../img/photos/ind-sugar.webp)}
.ph-ind-dairy{--bgimg:url(../img/photos/ind-dairy.webp)}
.ph-ind-milling{--bgimg:url(../img/photos/ind-milling.webp)}
.ph-ind-cement{--bgimg:url(../img/photos/ind-cement.webp)}
.ph-ind-plastics{--bgimg:url(../img/photos/ind-plastics.webp)}
.ph-off-monitor{--bgimg:url(../img/photos/off-monitor.webp)}
.ph-off-improve{--bgimg:url(../img/photos/off-improve.webp)}
.ph-off-solar{--bgimg:url(../img/photos/off-solar.webp)}
.ph-off-service{--bgimg:url(../img/photos/off-service.webp)}
.ph-band-figures{--bgimg:url(../img/photos/band-figures.webp)}
.ph-control-team{--bgimg:url(../img/photos/control-team.webp)}
.ph-plant-golden{--bgimg:url(../img/photos/plant-golden.webp)}
.ph-dairy-plant{--bgimg:url(../img/photos/dairy-plant.webp)}
.ph-plant-night{--bgimg:url(../img/photos/plant-night.webp)}
.ph-sugar-cane{--bgimg:url(../img/photos/sugar-cane.webp)}
.ph-steel-valves{--bgimg:url(../img/photos/steel-valves.webp)}
.ph-steel-tank{--bgimg:url(../img/photos/steel-tank.webp)}
.ph-engineer-tablet{--bgimg:url(../img/photos/engineer-tablet.webp)}

/* platform page: screenshots gallery */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.shot{margin:0;display:flex;flex-direction:column;gap:10px}
.shot.big{grid-column:span 2;grid-row:span 2}
.shot .browser{position:relative;right:auto;top:0;width:100%;border-radius:14px;box-shadow:0 40px 80px -45px rgba(15,23,42,.5)}
.shot .browser .bar{height:30px;display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid #EEF2F7;background:#FBFCFB}
.shot .browser .bar i{width:9px;height:9px;border-radius:50%;background:#CBD5E1}
.shot .browser .bar span{margin-left:8px;font-size:11.5px;color:#64748B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot .browser img{display:block;width:100%;height:auto}
.shot figcaption{font-size:14px;color:var(--ink-2);line-height:1.5}
.phone-shot{grid-column:span 3;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:28px;padding:28px;border-radius:18px;background:linear-gradient(135deg,#F1F8F2,#EEF2F7)}
.phone-shot img{width:200px;height:auto;border-radius:28px;border:6px solid #0F172A;box-shadow:0 30px 60px -30px rgba(15,23,42,.5)}
.phone-shot figcaption{flex-basis:100%;text-align:center}
:root[data-theme="dark"] .phone-shot{background:linear-gradient(135deg,#0F1A14,#0F172A)}
@media (max-width:900px){.shots{grid-template-columns:minmax(0,1fr)}.shot.big,.phone-shot{grid-column:auto;grid-row:auto}.phone-shot img{width:42%}}
.ph-tea-estate{--bgimg:url(../img/photos/tea-estate.webp)}

/* ================= home hero: full-width slides (control room, screens, photos) under a green shade ================= */
.hero-show{position:relative;isolation:isolate;overflow:hidden;min-height:min(86vh,780px);display:flex;flex-direction:column;justify-content:center;color:#fff;background:#0C2A17}
.hx-slides{position:absolute;inset:0;z-index:-3}
.hx-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.hx-slide.on{opacity:1}
.hx-slide video,.hx-slide img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block;transform:scale(1.02)}
.hx-slide.on video,.hx-slide.on img{animation:hxzoom 9s ease-out forwards}
.hx-slide.shot img{object-position:left top}
@keyframes hxzoom{from{transform:scale(1.02)}to{transform:scale(1.1)}}
.hx-shade{position:absolute;inset:0;z-index:-2;background:
  linear-gradient(90deg,rgba(9,38,20,.94) 0%,rgba(13,56,29,.88) 38%,rgba(20,80,40,.6) 64%,rgba(27,94,32,.24) 100%),
  linear-gradient(180deg,rgba(9,38,20,.35) 0%,rgba(9,38,20,0) 28%,rgba(9,38,20,0) 70%,rgba(9,38,20,.7) 100%)}
.hx-inner{position:relative;padding-top:72px;padding-bottom:28px;max-width:1180px}
.hx-kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#C8E6C9;padding:7px 14px;border:1px solid rgba(200,230,201,.35);border-radius:999px;background:rgba(255,255,255,.06);backdrop-filter:blur(6px)}
.hx-kicker i{width:8px;height:8px;border-radius:50%;background:#81C784;box-shadow:0 0 0 4px rgba(129,199,132,.25);animation:kpulse 2.4s ease-in-out infinite}
.hx-title{margin-top:22px;font-size:clamp(42px,5.6vw,82px);line-height:1.02;font-weight:850;letter-spacing:-.045em;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.25);max-width:14ch}
.hx-title em{font-style:normal;color:#A5D6A7}
.hx-lead{margin-top:22px;max-width:36em;font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:rgba(241,248,242,.92)}
.hx-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hx-ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(6px)}
.hx-ghost:hover{background:rgba(255,255,255,.2);color:#fff;border-color:#fff}
.hx-ghost .icon{color:#fff}
.hx-assure{display:flex;flex-wrap:wrap;gap:10px 26px;margin:26px 0 0;padding:0;list-style:none}
.hx-assure li{display:flex;align-items:center;gap:8px;font-size:15px;color:rgba(241,248,242,.9)}
.hx-assure .icon{width:18px;height:18px;color:#81C784}
.hx-bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;padding-bottom:26px;flex-wrap:wrap}
.hx-cap{display:flex;align-items:center;gap:10px;font-size:13.5px;color:rgba(241,248,242,.85)}
.hx-cap .dot{width:8px;height:8px;border-radius:50%;background:#EF5350;box-shadow:0 0 0 4px rgba(239,83,80,.25);animation:kpulse 1.8s ease-in-out infinite}
.hx-ctrl{display:flex;align-items:center;gap:12px}
.hx-dots{display:flex;gap:8px}
.hx-dots button{width:26px;height:4px;border-radius:4px;border:0;padding:0;background:rgba(255,255,255,.35);cursor:pointer;transition:background .3s,width .3s}
.hx-dots button[aria-selected="true"]{background:#A5D6A7;width:42px}
.hx-btn{display:inline-flex;align-items:center;gap:6px;height:34px;min-width:34px;justify-content:center;padding:0 10px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;font-family:inherit;font-size:13px;font-weight:600;line-height:1;cursor:pointer}
.hx-btn:hover{background:rgba(255,255,255,.18)}
.hx-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hx-btn.wide{padding:0 14px}
.hero-show .hero-live:fullscreen{background:#0A101C;opacity:1}
.hero-show .hero-live:fullscreen video{object-fit:contain;animation:none;transform:none}
@media (max-width:860px){
  .hero-show{min-height:0}
  .hx-shade{background:linear-gradient(180deg,rgba(9,38,20,.86),rgba(12,50,26,.9))}
  .hx-inner{padding-top:48px}
  .hx-slide video,.hx-slide img{object-position:center}
  .hx-bar{flex-direction:column;align-items:flex-start}
  .hx-assure{flex-direction:column;gap:8px}
}
@media (prefers-reduced-motion:reduce){.hx-slide{transition:none}.hx-slide.on video,.hx-slide.on img{animation:none}}
.ph-tea-factory-wither{--bgimg:url(../img/photos/tea-factory-wither.webp)}

/* ================= home hero (pro): words on white, a real plant photo, the live control room and live figures ================= */
.hero-pro{position:relative;overflow:hidden;background:#fff}
.hero-pro::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 520px at 8% 0%,rgba(67,160,71,.10),transparent 70%),radial-gradient(var(--grid,#E2E8F0) 1px,transparent 1px);background-size:auto,22px 22px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 80%);mask-image:linear-gradient(180deg,#000,transparent 80%);pointer-events:none}
.hp-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:56px;align-items:center;padding-top:64px;padding-bottom:88px}
.hp-title{margin-top:20px;font-size:clamp(40px,4.3vw,64px);line-height:1.02;font-weight:850;letter-spacing:-.045em;color:var(--ink)}
.hp-title em{font-style:normal;color:var(--accent)}
.hp-lead{margin-top:22px;font-size:18.5px;line-height:1.62;color:var(--ink-2);max-width:34em}
.hp-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.hp-actions .btn-lg{padding:12px 18px;font-size:15.5px}
.hero-pro .assurances{margin-top:24px;flex-direction:column;gap:9px}
.hp-visual{position:relative;height:560px}
.hp-photos{position:absolute;inset:0 0 0 12%;border-radius:24px;overflow:hidden;box-shadow:0 50px 100px -50px rgba(15,23,42,.45);background:#0F172A}
.hp-photo{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.6s ease}
.hp-photo.on{opacity:1;animation:hpzoom 10s ease-out forwards}
@keyframes hpzoom{from{transform:scale(1.03)}to{transform:scale(1.1)}}
.hp-photos::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,12,22,0) 55%,rgba(6,12,22,.35))}
.hp-frame.browser{position:absolute;left:0;right:auto;top:auto;bottom:-28px;width:74%;overflow:hidden;background:#fff;border-radius:16px;box-shadow:0 40px 80px -30px rgba(15,23,42,.55),0 0 0 1px rgba(15,23,42,.06);z-index:2}
.hp-frame .bar{height:34px;display:flex;align-items:center;gap:7px;padding:0 12px;border-bottom:1px solid #EEF2F7;background:#FBFCFB}
.hp-frame .bar i{width:10px;height:10px;border-radius:50%;background:#CBD5E1;flex:none}
.hp-frame .bar>span{margin-left:8px;font-size:12px;color:#64748B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
:root[data-theme="dark"] .hp-frame .bar{background:#111827;border-color:#1F2937}
.hp-frame video{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:#F8FAFC}
.hp-card{position:absolute;top:28px;left:0;z-index:3;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border:1px solid rgba(15,23,42,.06);border-radius:16px;padding:14px 18px;box-shadow:0 24px 50px -24px rgba(15,23,42,.45);min-width:300px}
.hp-card-h{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.live-dot{width:8px;height:8px;border-radius:50%;background:#E53935;box-shadow:0 0 0 4px rgba(229,57,53,.18);animation:kpulse 1.8s ease-in-out infinite}
.hp-card-row{display:flex;gap:26px;margin-top:10px}
.hp-card-row span{display:block;font-size:12.5px;color:var(--ink-2)}
.hp-card-row b{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-top:2px;font-variant-numeric:tabular-nums}
.hp-proof{position:relative;border-top:1px solid var(--line);background:#F8FAF9}
.hp-proof-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.4fr);gap:28px;padding-top:26px;padding-bottom:26px;align-items:start}
.hp-proof-in>div{display:flex;flex-direction:column;gap:4px}
.hp-proof-in b{font-size:26px;font-weight:850;letter-spacing:-.03em;color:var(--ink)}
.hp-proof-in span{font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.hp-std ul{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0;padding:0;list-style:none}
.hp-std li{font-size:12.5px;font-weight:700;color:var(--ink);border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 11px}
:root[data-theme="dark"] .hero-pro{background:var(--bg,#0B1220)}
:root[data-theme="dark"] .hp-proof{background:#0F1724}
:root[data-theme="dark"] .hp-card{background:rgba(17,24,39,.94);border-color:#1F2937}
:root[data-theme="dark"] .hp-std li{background:#111827}
@media (max-width:1100px){.hp-grid{grid-template-columns:minmax(0,1fr);gap:40px;padding-bottom:64px}.hp-visual{height:520px}.hero-pro .assurances{flex-direction:row;flex-wrap:wrap}.hp-proof-in{grid-template-columns:repeat(3,minmax(0,1fr))}.hp-std{grid-column:1/-1}}
@media (max-width:640px){.hp-grid{padding-top:40px}.hp-visual{height:auto}.hp-photos{position:relative;inset:auto;height:260px}.hp-frame.browser{position:relative;bottom:auto;width:100%;margin-top:-60px;left:0}.hp-card{top:14px;left:14px;min-width:0;right:14px}.hero-pro .assurances{flex-direction:column}.hp-proof-in{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.hp-photo{transition:none}.hp-photo.on{animation:none}}
.foot-region{margin-right:auto;margin-left:18px;color:var(--ink-2);font-size:13px}
.foot-region>button{color:inherit}
.ub-menu.up{top:auto;bottom:100%;left:0;right:auto;margin-bottom:6px}
.brand svg{flex:none;width:30px;height:30px}