:root {
  --g-1: #c6f36b;
  --g-2: #7dc12e;
  --g-3: #22a024;
  --g-4: #0e8a10;
  --dark: #07130d;
  --dark-2: #0d2017;
  --dark-line: rgba(125, 193, 46, .18);
  --on-dark: #e8f2ea;
  --on-dark-2: #a9bcae;
  --radius: 18px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Space Grotesk", var(--font);
  --gutter: max(20px, env(safe-area-inset-left));
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.6;
  color: #0b1a12; background: var(--dark); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.15; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }

.wrap { width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: #fff; padding: 8px 14px; border-radius: 8px; }
:focus-visible { outline: 2px solid var(--g-2); outline-offset: 3px; }

/* ===== Section themes (one palette, five shades) ===== */
.theme-dark, .hero, .glance {
  --s-bg: #06110b; --s-text: #ffffff; --s-body: var(--on-dark); --s-muted: var(--on-dark-2);
  --s-line: rgba(125,193,46,.2); --s-card: linear-gradient(180deg, rgba(16,38,27,.92), rgba(7,19,13,.92));
  --s-card-hover: rgba(125,193,46,.5); --s-illo-bg: radial-gradient(120% 90% at 50% 0%, rgba(125,193,46,.18), rgba(7,19,13,0) 70%);
  --s-chip: rgba(125,193,46,.08); --s-chip-text: var(--g-1); --s-eyebrow: var(--g-2);
  --s-panel: linear-gradient(135deg, rgba(16,38,27,.85), rgba(7,19,13,.85));
  --s-accent: var(--g-2); --s-accent-strong: var(--g-1); --s-glow: rgba(125,193,46,.35);
  --grad: linear-gradient(90deg, var(--g-1), var(--g-2) 40%, var(--g-3) 70%, var(--g-1));
  --i-stroke: #7dc12e; --i-fill: rgba(125,193,46,.12); --i-acc: #c6f36b; --i-acc2: #22a024;
}
.theme-light {
  --s-bg: #ffffff; --s-text: #0b1a12; --s-body: #2f4237; --s-muted: #52645a;
  --s-line: #dbe8d6; --s-card: #ffffff; --s-card-hover: rgba(34,160,36,.45);
  --s-illo-bg: linear-gradient(160deg, #f1f9ea, #e3f3d4);
  --s-chip: #eef7e6; --s-chip-text: #0e7a10; --s-eyebrow: #0e8a10;
  --s-panel: linear-gradient(135deg, #f5fbef, #eaf6df);
  --s-accent: #22a024; --s-accent-strong: #0e8a10; --s-glow: rgba(34,160,36,.25);
  --grad: linear-gradient(90deg, #0e8a10, #22a024 45%, #7dc12e 80%, #0e8a10);
  --i-stroke: #0e8a10; --i-fill: rgba(125,193,46,.2); --i-acc: #7dc12e; --i-acc2: #22a024;
}
.theme-green {
  --s-bg: #0c6e12; --s-text: #ffffff; --s-body: #eaf7e4; --s-muted: #cfe8c6;
  --s-line: rgba(255,255,255,.22); --s-card: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  --s-card-hover: rgba(198,243,107,.8); --s-illo-bg: radial-gradient(120% 90% at 50% 0%, rgba(198,243,107,.25), rgba(255,255,255,0) 70%);
  --s-chip: rgba(255,255,255,.12); --s-chip-text: #ffffff; --s-eyebrow: var(--g-1);
  --s-panel: linear-gradient(135deg, rgba(4,50,10,.55), rgba(4,50,10,.35));
  --s-accent: var(--g-1); --s-accent-strong: #ffffff; --s-glow: rgba(198,243,107,.4);
  --grad: linear-gradient(90deg, #ffffff, var(--g-1) 50%, #ffffff);
  --i-stroke: #c6f36b; --i-fill: rgba(255,255,255,.14); --i-acc: #ffffff; --i-acc2: #c6f36b;
}
.theme-mint {
  --s-bg: #eef7ea; --s-text: #0b1a12; --s-body: #2f4237; --s-muted: #52645a;
  --s-line: #cfe3c8; --s-card: #ffffff; --s-card-hover: rgba(34,160,36,.45);
  --s-illo-bg: linear-gradient(160deg, #0d2017, #07130d);
  --s-chip: #ffffff; --s-chip-text: #0e7a10; --s-eyebrow: #0e8a10;
  --s-panel: #ffffff;
  --s-accent: #22a024; --s-accent-strong: #0e8a10; --s-glow: rgba(34,160,36,.25);
  --grad: linear-gradient(90deg, #0e8a10, #22a024 45%, #7dc12e 80%, #0e8a10);
  --i-stroke: #7dc12e; --i-fill: rgba(125,193,46,.14); --i-acc: #c6f36b; --i-acc2: #22a024;
}
.theme-lime {
  --s-bg: #f3fbe3; --s-text: #0b1a12; --s-body: #2f4237; --s-muted: #52645a;
  --s-line: #d4ebb4; --s-card: #ffffff; --s-card-hover: rgba(125,193,46,.6);
  --s-illo-bg: linear-gradient(160deg, #e4f6c4, #cfeea2);
  --s-chip: #ffffff; --s-chip-text: #0e7a10; --s-eyebrow: #0e8a10;
  --s-panel: linear-gradient(135deg, #ffffff, #f7fdee);
  --s-accent: #22a024; --s-accent-strong: #0e8a10; --s-glow: rgba(125,193,46,.35);
  --grad: linear-gradient(90deg, #0e8a10, #22a024 45%, #7dc12e 80%, #0e8a10);
  --i-stroke: #0e8a10; --i-fill: rgba(255,255,255,.6); --i-acc: #22a024; --i-acc2: #7dc12e;
}

.grad { background: var(--grad); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes shine { to { background-position: 200% center; } }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 13px/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--s-eyebrow, var(--g-2)); margin-bottom: 16px; }
.eyebrow__n { display: inline-grid; place-items: center; min-width: 34px; height: 26px; padding: 0 8px; border-radius: 8px; font-size: 12px; letter-spacing: .04em; color: #fff; background: linear-gradient(135deg, var(--g-2), var(--g-4)); }
.theme-green .eyebrow__n { background: #fff; color: var(--g-4); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--g-2); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(125,193,46,.6); } 70%, 100% { box-shadow: 0 0 0 10px rgba(125,193,46,0); } }

.progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--g-4), var(--g-1)); }

/* Buttons */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 15px/1 var(--font); padding: 15px 26px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, color .25s; will-change: transform; }
.btn--primary { background: linear-gradient(135deg, var(--g-2), var(--g-4)); color: #fff; box-shadow: 0 8px 24px -8px rgba(14,138,16,.6); }
.btn--primary::after, .btn--light::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%); background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%); transition: transform .7s; }
.btn--primary:hover::after, .btn--light:hover::after { transform: translateX(120%); }
.btn--primary:hover { box-shadow: 0 14px 32px -8px rgba(125,193,46,.7); }
.btn--light { background: #fff; color: var(--g-4); box-shadow: 0 10px 28px -10px rgba(0,0,0,.35); }
.btn--ghost { border-color: rgba(198,243,107,.35); color: var(--on-dark); }
.btn--ghost:hover { background: rgba(125,193,46,.14); border-color: var(--g-2); }
.btn--sm { padding: 10px 18px; font-size: 14px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .7; cursor: progress; }

/* Nav + interactive logo */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; padding-top: env(safe-area-inset-top); transition: background .3s, box-shadow .3s; }
.nav.is-scrolled { background: rgba(7,19,13,.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--dark-line); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 92px; transition: height .3s; }
.nav.is-scrolled .nav__inner { height: 76px; }
.nav.is-scrolled .brand__text { font-size: 27px; }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; }
.brand__mark { position: relative; display: block; width: 70px; perspective: 400px; transition: width .3s; }
.nav.is-scrolled .brand__mark { width: 60px; }
.brand__mark img { width: 100%; height: auto; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out, filter .3s; filter: drop-shadow(0 0 0 rgba(125,193,46,0)); }
.brand:hover .brand__mark img { filter: drop-shadow(0 0 14px rgba(125,193,46,.7)); }
.brand__shine { position: absolute; inset: 0; pointer-events: none; -webkit-mask: url(../assets/logo-mark.png) center / contain no-repeat; mask: url(../assets/logo-mark.png) center / contain no-repeat; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.85) 50%, transparent 65%); background-size: 250% 100%; background-position: 150% 0; animation: logoShine 5s ease-in-out infinite; }
.brand:hover .brand__shine { animation-duration: 1.2s; }
@keyframes logoShine { 0%, 60% { background-position: 150% 0; } 100% { background-position: -100% 0; } }
.brand__text { font: 700 31px/1 var(--display); letter-spacing: -.01em; transition: font-size .3s, letter-spacing .3s; }
.brand__text b { color: var(--g-2); display: inline-block; transition: color .3s; }
.brand:hover .brand__text b { color: var(--g-1); animation: xSpin .8s cubic-bezier(.2,.8,.2,1); }
@keyframes xSpin { from { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.2); } to { transform: rotate(360deg) scale(1); } }
.brand:hover .brand__text { letter-spacing: .01em; }
.nav__links { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.nav__links a:not(.btn) { position: relative; color: var(--on-dark-2); font-size: 15px; font-weight: 500; transition: color .2s; white-space: nowrap; }
.nav__links a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--g-2); transform: scaleX(0); transition: transform .3s; }
.nav__links a:not(.btn):hover, .nav__links a.is-current { color: #fff; }
.nav__links a.is-current::after, .nav__links a:not(.btn):hover::after { transform: scaleX(1); }
.nav__toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.nav__toggle span { display: block; width: 22px; height: 2px; background: #fff; margin: 5px 0; transition: transform .3s, opacity .3s; }

/* Hero */
.hero { position: relative; overflow: hidden; min-height: min(88vh, 900px); min-height: min(88svh, 900px); display: flex; align-items: center; background: var(--dark); color: var(--on-dark); padding: 130px 0 60px; }
.hero__bg { position: absolute; inset: 0; background: radial-gradient(900px 600px at 78% 40%, rgba(125,193,46,.18), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(14,138,16,.2), transparent 60%); }
.hero__grid { position: relative; z-index: 2; pointer-events: none; }
.hero__copy { max-width: 640px; pointer-events: auto; }
.hero h1 { font-size: clamp(34px, 4.4vw, 62px); color: #fff; margin-bottom: 22px; }
.lead { font-size: clamp(16px, 1.3vw, 18px); color: var(--on-dark-2); max-width: 580px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero__visual { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 60%; }
.hero__visual::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--dark) 0%, rgba(7,19,13,0) 30%), linear-gradient(0deg, var(--dark) 0%, rgba(7,19,13,0) 22%); }
.hero__visual canvas { width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.hero__visual canvas:active { cursor: grabbing; }
.hud { position: absolute; z-index: 2; pointer-events: none; display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--display); letter-spacing: .06em; color: var(--g-1); padding: 9px 12px; border-radius: 10px; background: rgba(7,19,13,.82); border: 1px solid var(--dark-line); animation: float 6s ease-in-out infinite; }
.hud__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--g-2); animation: pulse 2s infinite; }
.hud--1 { top: 22%; right: 14%; } .hud--2 { top: 48%; right: 4%; animation-delay: -2s; } .hud--3 { bottom: 20%; right: 40%; animation-delay: -4s; }
@keyframes float { 50% { transform: translateY(-10px); } }
.hero__note { position: absolute; z-index: 2; right: var(--gutter); bottom: 16px; font-size: 11px; color: #5f7466; letter-spacing: .06em; }

/* At a glance */
.glance { position: relative; z-index: 3; background: var(--dark); padding: 0 0 56px; }
.glance__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.glance__item { position: relative; display: flex; flex-direction: column; padding: 18px 20px 20px; border-radius: var(--radius); background: linear-gradient(180deg, rgba(16,38,27,.95), rgba(7,19,13,.95)); border: 1px solid var(--dark-line); color: var(--on-dark); overflow: hidden; transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s; }
.glance__item::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: linear-gradient(90deg, var(--g-2), var(--g-1)); transform: scaleX(0); transform-origin: left; transition: transform .4s; }
.glance__item:hover { transform: translateY(-6px); border-color: rgba(125,193,46,.55); box-shadow: 0 24px 50px -24px rgba(125,193,46,.45); }
.glance__item:hover::after { transform: scaleX(1); }
.glance__illo { display: block; height: 96px; margin: -4px -6px 10px; border-radius: 12px; background: radial-gradient(120% 90% at 50% 0%, rgba(125,193,46,.16), transparent 70%); }
.glance__n { position: absolute; top: 16px; right: 18px; font: 700 12px/1 var(--display); color: var(--g-1); opacity: .7; }
.glance__item h2 { font-size: 19px; color: #fff; margin-bottom: 6px; }
.glance__item p { font-size: 14px; color: var(--on-dark-2); flex: 1; }
.glance__go { margin-top: 12px; font: 600 13px/1 var(--display); color: var(--g-1); transition: letter-spacing .3s; }
.glance__item:hover .glance__go { letter-spacing: .08em; }

/* Split headline + rise */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.split .w > span { display: inline-block; transform: translateY(110%); animation: wordUp .9s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i) * 60ms + 150ms); }
@keyframes wordUp { to { transform: none; } }
.js .rise { opacity: 0; transform: translateY(18px); animation: rise .9s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: var(--d, 0s); }
@keyframes rise { to { opacity: 1; transform: none; } }

/* Marquee */
.marquee { --fade: var(--dark-2); position: relative; overflow: hidden; background: var(--dark-2); border-block: 1px solid var(--dark-line); padding: 18px 0; }
.marquee::before, .marquee::after { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; width: 12%; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(90deg, var(--fade), transparent); }
.marquee::after { right: 0; background: linear-gradient(-90deg, var(--fade), transparent); }
.marquee__track { display: flex; width: max-content; gap: 48px; animation: marquee 40s linear infinite; }
.marquee__track--rev { animation-direction: reverse; animation-duration: 50s; }
.marquee span { font: 600 clamp(15px, 1.6vw, 20px)/1 var(--display); color: var(--on-dark-2); white-space: nowrap; display: inline-flex; align-items: center; gap: 48px; }
.marquee span::after { content: ""; width: 8px; height: 8px; background: var(--g-2); transform: rotate(45deg); }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee--lang { --fade: #06110b; background: transparent; margin: clamp(48px, 6vw, 72px) 0 0; }
.marquee--lang span { font-size: clamp(20px, 2.4vw, 30px); color: rgba(198,243,107,.55); }

/* ===== Generic section ===== */
.sec { position: relative; overflow: hidden; background: var(--s-bg); color: var(--s-body); padding: clamp(80px, 10vw, 130px) 0 clamp(70px, 9vw, 110px); }
.sec .wrap { position: relative; z-index: 1; }
.sec__bg { position: absolute; inset: 0; pointer-events: none; }
.theme-dark .sec__bg { background: radial-gradient(1000px 600px at 85% 0%, rgba(125,193,46,.16), transparent 60%), radial-gradient(800px 600px at 0% 60%, rgba(14,138,16,.14), transparent 60%); }
.theme-dark .sec__bg::after, .theme-green .sec__bg::after { content: ""; position: absolute; inset: 0; opacity: .55; background-image: linear-gradient(rgba(125,193,46,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(125,193,46,.07) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 0%, #000 25%, transparent 75%); }
.theme-green .sec__bg { background: radial-gradient(900px 600px at 90% 10%, rgba(198,243,107,.35), transparent 60%), radial-gradient(900px 700px at 0% 100%, rgba(4,60,10,.6), transparent 60%), linear-gradient(160deg, #13881a, #0a5c10); }
.theme-green .sec__bg::after { background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); }
.theme-light .sec__bg { background: radial-gradient(800px 500px at 100% 0%, rgba(198,243,107,.35), transparent 60%), radial-gradient(700px 500px at 0% 70%, rgba(125,193,46,.12), transparent 60%); }
.theme-mint .sec__bg { background: radial-gradient(900px 500px at 0% 0%, rgba(255,255,255,.9), transparent 60%), radial-gradient(800px 600px at 100% 80%, rgba(125,193,46,.18), transparent 60%); }
.theme-lime .sec__bg { background: radial-gradient(900px 600px at 90% 0%, rgba(198,243,107,.7), transparent 60%), radial-gradient(800px 600px at 0% 100%, rgba(255,255,255,.8), transparent 60%); }
.theme-light .sec__bg::after, .theme-mint .sec__bg::after, .theme-lime .sec__bg::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(14,138,16,.12) 1.2px, transparent 1.2px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 50%); mask-image: linear-gradient(180deg, #000, transparent 50%); }
@keyframes gridMove { to { background-position: 48px 48px, 48px 48px; } }

.sec__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-bottom: clamp(60px, 8vw, 100px); }
.sec__title { font-size: clamp(32px, 4.6vw, 60px); color: var(--s-text); margin-bottom: 22px; }
.sec__lead { font-size: clamp(16px, 1.3vw, 18px); color: var(--s-muted); max-width: 620px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.chips li { font-size: 13px; font-weight: 600; color: var(--s-chip-text); padding: 9px 14px; border-radius: 999px; border: 1px solid var(--s-line); background: var(--s-chip); transition: transform .25s, border-color .25s; }
.chips li:hover { transform: translateY(-2px); border-color: var(--s-accent); }
.sec__visual { position: relative; width: 100%; max-width: 600px; justify-self: center; aspect-ratio: 1.15; border-radius: 28px; background: var(--s-illo-bg); border: 1px solid var(--s-line); overflow: hidden; box-shadow: 0 40px 80px -50px var(--s-glow); }
.sec__visual--canvas { aspect-ratio: 1; background: transparent; border: 0; box-shadow: none; }
.sec__visual canvas { width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.sec__visual-illo { position: absolute; inset: 6%; }
.sec__visual-note { position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--s-muted); opacity: .7; white-space: nowrap; }
.sec__cta { text-align: center; margin-top: clamp(44px, 6vw, 64px); }

.sub__head { text-align: center; max-width: 720px; margin: 0 auto clamp(28px, 4vw, 44px); }
.sub__head h3 { font-size: clamp(24px, 3vw, 38px); color: var(--s-text); margin-bottom: 10px; }
.sub__head p:not(.eyebrow) { color: var(--s-muted); }
.sec > .wrap > .sub__head { margin-top: clamp(56px, 7vw, 90px); }

/* Explorer */
.explorer__body { display: grid; grid-template-columns: 270px 1fr 1.1fr; gap: 32px; align-items: center; padding: clamp(20px, 3vw, 40px); border-radius: 26px; background: var(--s-panel); border: 1px solid var(--s-line); box-shadow: 0 30px 80px -50px rgba(0,0,0,.6); }
.explorer__tabs { display: grid; gap: 8px; }
.xtab { display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--s-line); background: transparent; color: var(--s-muted); font-weight: 600; font-size: 15px; line-height: 1.3; transition: all .25s; position: relative; overflow: hidden; }
.xtab span { font: 700 12px/1 var(--display); color: var(--s-accent); flex: none; }
.xtab:hover { color: var(--s-text); border-color: var(--s-accent); }
.xtab.is-active { background: linear-gradient(135deg, var(--g-2), var(--g-4)); color: #fff; border-color: transparent; box-shadow: 0 10px 24px -10px rgba(125,193,46,.6); }
.theme-green .xtab.is-active { background: #fff; color: var(--g-4); }
.xtab.is-active span { color: inherit; }
.xtab.is-active::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgba(255,255,255,.7); transform-origin: left; animation: tabTimer var(--cycle, 3.6s) linear forwards; }
.theme-green .xtab.is-active::after { background: var(--g-2); }
.explorer.is-manual .xtab.is-active::after, .explorer:not(.is-playing) .xtab.is-active::after { display: none; }
@keyframes tabTimer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.explorer__art { position: relative; min-height: 300px; border-radius: 20px; background: var(--s-illo-bg); overflow: hidden; }
.explorer__art .xart { position: absolute; inset: 6%; opacity: 0; transform: scale(.94) translateY(10px); transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1); }
.explorer__art .xart.is-active { opacity: 1; transform: none; }
.explorer__art--iso { display: grid; place-items: center; min-height: 380px; perspective: 1200px; background: transparent; overflow: visible; }
.explorer__art--iso .xart, .explorer__art--iso .xart.is-active { position: absolute; inset: 0; opacity: 1; transform: translateZ(var(--z)); }
.iso { position: relative; width: 220px; height: 220px; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-45deg); margin-top: 40px; animation: isoSpin 14s ease-in-out infinite; }
@keyframes isoSpin { 50% { transform: rotateX(58deg) rotateZ(-30deg); } }
.iso__plate { --z: calc((4 - var(--i)) * 40px); border-radius: 18px; display: grid; place-items: center; border: 1.5px solid rgba(125,193,46,.45); background: linear-gradient(135deg, rgba(125,193,46,.14), rgba(14,138,16,.06)); transition: transform .5s cubic-bezier(.2,.8,.2,1), background .4s, border-color .4s, box-shadow .4s; }
.iso__plate:nth-child(1) { --i: 0; } .iso__plate:nth-child(2) { --i: 1; } .iso__plate:nth-child(3) { --i: 2; } .iso__plate:nth-child(4) { --i: 3; } .iso__plate:nth-child(5) { --i: 4; }
.iso__plate span { font: 700 13px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: rgba(198,243,107,.55); transform: rotateZ(45deg); }
.explorer__art--iso .iso__plate.is-active { transform: translateZ(calc(var(--z) + 26px)) scale(1.06); background: linear-gradient(135deg, rgba(198,243,107,.55), rgba(34,160,36,.5)); border-color: var(--g-1); box-shadow: 0 0 40px rgba(125,193,46,.5); }
.iso__plate.is-active span { color: #fff; }
.xdetail h4 { font-size: clamp(20px, 2vw, 26px); color: var(--s-text); margin-bottom: 10px; }
.xdetail p { color: var(--s-muted); margin-bottom: 16px; }
.xdetail li { position: relative; padding: 11px 14px 11px 38px; margin-bottom: 8px; border-radius: 10px; background: var(--s-chip); border: 1px solid var(--s-line); color: var(--s-body); font-size: 15px; }
.xdetail li::before { content: ""; position: absolute; left: 15px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--s-accent); box-shadow: 0 0 10px var(--s-glow); }
.xdetail.is-active { animation: fade .5s ease; }
.xdetail.is-active li { animation: fade .5s ease backwards; }
.xdetail.is-active li:nth-child(2) { animation-delay: .06s; } .xdetail.is-active li:nth-child(3) { animation-delay: .12s; } .xdetail.is-active li:nth-child(4) { animation-delay: .18s; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.xdetail .duo__k { font: 700 12px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--s-eyebrow); margin-bottom: 10px; }
.duo li { font-size: 14px; padding: 9px 10px 9px 32px; }
.duo li::before { left: 12px; width: 8px; height: 8px; margin-top: -4px; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } }

/* Cards */
.cards { display: grid; gap: 22px; }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.cards--5 { grid-template-columns: repeat(6, 1fr); }
.cards--5 > :nth-child(-n+3) { grid-column: span 2; }
.cards--5 > :nth-child(n+4) { grid-column: span 3; }
.card { --mx: 50%; --my: 50%; position: relative; display: flex; flex-direction: column; background: var(--s-card); border: 1px solid var(--s-line); border-radius: var(--radius); overflow: hidden; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; transform-style: preserve-3d; }
.card::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(420px circle at var(--mx) var(--my), var(--s-glow), transparent 45%); }
.card::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: linear-gradient(90deg, var(--g-2), var(--g-4)); transform: scaleX(0); transform-origin: left; transition: transform .45s; }
.theme-green .card::after { background: linear-gradient(90deg, #fff, var(--g-1)); }
.card:hover { border-color: var(--s-card-hover); box-shadow: 0 28px 60px -30px var(--s-glow), 0 14px 30px -20px rgba(0,0,0,.25); }
.card:hover::before { opacity: .5; }
.card:hover::after { transform: scaleX(1); }
.card__illo { height: 170px; background: var(--s-illo-bg); border-bottom: 1px solid var(--s-line); padding: 12px 16px; }
.card:hover .card__illo .illo-svg { transform: scale(1.05); }
.card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.card__num { align-self: flex-start; font: 700 11px/1 var(--display); color: var(--s-accent-strong); background: var(--s-chip); border: 1px solid var(--s-line); padding: 7px 9px; border-radius: 7px; letter-spacing: .08em; margin-bottom: 14px; }
.card h3 { font-size: 19px; color: var(--s-text); margin-bottom: 10px; }
.card__desc { font-size: 15px; color: var(--s-muted); margin-bottom: 14px; }
.card ul { margin-bottom: 4px; }
.card li { position: relative; padding-left: 20px; font-size: 14.5px; color: var(--s-body); margin-bottom: 7px; }
.card li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 2px; background: var(--s-accent); transform: rotate(45deg) scale(.75); }
.card__fit { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--s-line); font-size: 13px; color: var(--s-muted); }
.card__fit b { color: var(--s-accent-strong); font-weight: 600; }

/* Feature (Digital PMC) */
.feature { margin-top: 28px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center; padding: clamp(22px, 4vw, 44px); border-radius: 26px; background: linear-gradient(135deg, var(--dark-2), var(--dark)); color: var(--on-dark); border: 1px solid var(--dark-line); --i-stroke: #7dc12e; --i-fill: rgba(125,193,46,.12); --i-acc: #c6f36b; --i-acc2: #22a024; }
.feature__illo { aspect-ratio: 1.5; border-radius: 18px; background: radial-gradient(120% 90% at 50% 0%, rgba(125,193,46,.18), transparent 70%); border: 1px solid var(--dark-line); padding: 14px; }
.feature .eyebrow { color: var(--g-2); }
.feature h3 { font-size: clamp(22px, 2.4vw, 30px); color: #fff; margin-bottom: 12px; }
.feature p { color: var(--on-dark-2); }
.feature__list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.feature__list li { padding: 12px 14px; border: 1px solid var(--dark-line); border-radius: 12px; font-size: 14px; background: rgba(125,193,46,.05); transition: background .25s, border-color .25s, transform .25s; }
.feature__list li:hover { background: rgba(125,193,46,.12); border-color: rgba(125,193,46,.45); transform: translateX(4px); }

/* Process */
.process { margin-top: clamp(56px, 7vw, 90px); }
.process__steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; position: relative; }
.process__steps::before { content: ""; position: absolute; top: 28px; left: 6%; right: 6%; height: 2px; background: repeating-linear-gradient(90deg, var(--g-2) 0 8px, transparent 8px 16px); opacity: .4; }
@keyframes dash { to { background-position: 16px 0; } }
.process__steps li { position: relative; text-align: center; padding: 0 6px; }
.process__steps span { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; font: 700 16px/1 var(--display); color: #fff; background: linear-gradient(135deg, var(--g-2), var(--g-4)); box-shadow: 0 0 0 6px var(--s-bg), 0 0 0 7px var(--s-line), 0 10px 30px -6px rgba(125,193,46,.6); }
.process__steps h4 { font-size: 19px; color: var(--s-text); margin-bottom: 6px; }
.process__steps p { font-size: 14px; color: var(--s-muted); }

/* Illustrations */
[data-illo] { display: block; }
.illo-svg { width: 100%; height: 100%; overflow: visible; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.illo-svg * { transform-box: fill-box; transform-origin: center; }
.illo-svg .s { fill: none; stroke: var(--i-stroke); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.illo-svg .f { fill: var(--i-fill); }
.illo-svg .a-fill { fill: var(--i-acc); fill-opacity: .35; }
.illo-svg .a { fill: var(--i-acc); }
.illo-svg .d { fill: var(--i-acc2); }
.illo-svg .s-acc { fill: none; stroke: var(--i-acc); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.illo-svg .thick { stroke-width: 4; }
.illo-svg .dashed { stroke-dasharray: 4 8; }
.illo-svg .glyph { font: 700 26px var(--font); fill: var(--i-acc); text-anchor: middle; }
.illo-svg .beam { fill: var(--i-acc); opacity: .14; }
.illo-svg .box { fill: none; stroke: var(--i-acc); stroke-width: 2.5; stroke-dasharray: 8 5; }
.illo-svg .tag { fill: var(--i-acc); }
.a-blink { animation: iblink 1.4s ease-in-out infinite; }
.a-float { animation: ifloat 4s ease-in-out infinite; }
.a-spin { animation: ispin 8s linear infinite; }
.a-spin.slow { animation-duration: 30s; }
.a-spin-r { animation: ispin 6s linear infinite reverse; }
.a-pulse { animation: ipulse 2s ease-in-out infinite; }
.a-ring { animation: iring 2.4s ease-out infinite; }
.a-dash { stroke-dasharray: 6 7; animation: idash 1s linear infinite; }
.a-draw { stroke-dasharray: 420; stroke-dashoffset: 420; animation: idraw 3.5s ease-in-out infinite alternate; }
.a-grow-x { transform-origin: left center; animation: igrowx 3s ease-in-out infinite alternate; }
.a-grow-y { transform-origin: center bottom; animation: igrowy 3s ease-in-out infinite alternate; }
.a-pop { transform-origin: center bottom; animation: ipop 4.5s ease-in-out infinite; }
.a-bar { animation: ibar .9s ease-in-out infinite alternate; }
.a-sway { transform-origin: center bottom; animation: isway 3.4s ease-in-out infinite alternate; }
.a-rise { animation: irise 2.4s ease-in infinite; }
.a-fly { animation: ifly 6s ease-in-out infinite alternate; }
.a-scan { animation: iscan 6s ease-in-out infinite; }
.a-swing { transform-origin: center top; animation: iswing 3s ease-in-out infinite alternate; }
.a-slide { animation: islide 3.6s ease-in-out infinite; }
.a-sweep { animation: isweep 5s ease-in-out infinite alternate; }
.a-up { animation: iup 1.8s ease-in-out infinite; }
.a-wave { transform-origin: left center; animation: iwave 1.2s ease-in-out infinite alternate; }
.a-wave-x { animation: iwavex 3s ease-in-out infinite alternate; }
.a-drive { animation: idrive 7s linear infinite; }
.a-drive.slow { animation: idrive2 9s ease-in-out infinite alternate; }
.a-roll { animation: iroll 7s ease-in-out infinite alternate; }
.a-dig { transform-origin: 0% 100%; animation: idig 3s ease-in-out infinite alternate; }
.a-gap-l { animation: igapl 3s ease-in-out infinite alternate; }
.a-gap-r { animation: igapr 3s ease-in-out infinite alternate; }
@keyframes iblink { 50% { opacity: .25; } }
@keyframes ifloat { 50% { transform: translateY(-8px); } }
@keyframes ispin { to { transform: rotate(360deg); } }
@keyframes ipulse { 50% { transform: scale(1.18); opacity: .75; } }
@keyframes iring { from { transform: scale(.7); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
@keyframes idash { to { stroke-dashoffset: -26; } }
@keyframes idraw { to { stroke-dashoffset: 0; } }
@keyframes igrowx { from { transform: scaleX(.25); } to { transform: scaleX(1); } }
@keyframes igrowy { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@keyframes ipop { 0% { transform: scaleY(0); opacity: 0; } 15%, 85% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(0); opacity: 0; } }
@keyframes ibar { from { transform: scaleY(.3); } to { transform: scaleY(1.2); } }
@keyframes isway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes irise { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-60px); opacity: 0; } }
@keyframes ifly { from { transform: translateX(-70px); } to { transform: translateX(70px); } }
@keyframes iscan { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(-70px, 40px); } 66% { transform: translate(70px, 60px); } }
@keyframes iswing { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@keyframes islide { 0%, 100% { transform: translateX(0); opacity: 1; } 50% { transform: translateX(-10px); opacity: .6; } }
@keyframes isweep { from { transform: translateX(0); } to { transform: translateX(220px); } }
@keyframes iup { 0% { transform: translateY(6px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(-10px); opacity: 0; } }
@keyframes iwave { from { transform: skewY(0); } to { transform: skewY(-8deg) scaleX(.9); } }
@keyframes iwavex { from { transform: translateX(-10px); } to { transform: translateX(10px); } }
@keyframes idrive { from { transform: translateX(-40px); } to { transform: translateX(340px); } }
@keyframes idrive2 { from { transform: translateX(-20px); } to { transform: translateX(110px); } }
@keyframes iroll { from { transform: translateX(0); } to { transform: translateX(170px); } }
@keyframes idig { from { transform: rotate(-10deg); } to { transform: rotate(12deg); } }
@keyframes igapl { to { transform: translateX(-6px); } }
@keyframes igapr { to { transform: translateX(6px); } }
[data-illo]:not(.in-view) .illo-svg * { animation-play-state: paused; }

/* Contact */
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 64px); align-items: start; }
.contact__illo { height: 140px; max-width: 360px; margin-top: 24px; }
.contact__mail { display: inline-flex; align-items: center; gap: 12px; margin-top: 12px; font: 600 clamp(16px, 1.6vw, 20px)/1.2 var(--display); color: var(--g-1); word-break: break-all; }
.contact__mail svg { flex: none; width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: rgba(125,193,46,.12); stroke: var(--g-2); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.contact__mail:hover { color: #fff; }
.form { display: grid; gap: 16px; padding: clamp(22px, 3vw, 32px); border-radius: 22px; background: rgba(255,255,255,.03); border: 1px solid var(--dark-line); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: grid; gap: 8px; font-size: 13px; font-weight: 600; color: var(--on-dark-2); letter-spacing: .02em; }
.form input, .form select, .form textarea { font: 400 16px/1.4 var(--font); color: #fff; width: 100%; min-width: 0; background: rgba(7,19,13,.7); border: 1px solid rgba(125,193,46,.25); border-radius: 10px; padding: 13px 14px; transition: border-color .2s, box-shadow .2s; }
.form select option { background: var(--dark); }
.form textarea { resize: vertical; min-height: 110px; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--g-2); box-shadow: 0 0 0 3px rgba(125,193,46,.2); }
.form .is-invalid { border-color: #e36b5b; }
.form .is-invalid:focus { box-shadow: 0 0 0 3px rgba(227,107,91,.25); border-color: #e36b5b; }
.form .req { color: var(--g-1); }
.form__row { align-items: start; }
.form__label { display: block; }
.form__err { min-height: 1.2em; font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: #f0b39f; }
.form__err:empty { min-height: 0; }
.form__meta { display: flex; justify-content: space-between; gap: 12px; }
.form__count { margin-left: auto; font-size: 12px; font-weight: 500; color: #6f8577; white-space: nowrap; }
.form__count.is-low { color: #f0b39f; }
.form input::placeholder { color: #55705e; }
.form__status { font-size: 14px; color: var(--on-dark-2); text-align: center; min-height: 1.4em; }
.form__status.is-ok { color: var(--g-1); }
.form__status.is-err { color: #f0b39f; }
.form__fallback { padding: 16px; border-radius: 12px; border: 1px dashed rgba(125,193,46,.4); background: rgba(125,193,46,.05); animation: fade .4s ease; }
.form__fallback p { font-size: 14px; color: var(--on-dark-2); margin-bottom: 12px; text-align: center; }
.form__fallback-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Footer */
.footer { background: #040c08; color: var(--on-dark-2); padding: 52px 0 calc(48px + env(safe-area-inset-bottom)); border-top: 1px solid var(--dark-line); }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.footer__brand img { width: 220px; height: auto; margin-bottom: 10px; transition: filter .3s, transform .3s; }
.footer__brand img:hover { filter: drop-shadow(0 0 12px rgba(125,193,46,.6)); transform: scale(1.03); }
.footer__brand p { font-size: 14px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 22px; font-size: 14px; }
.footer__links a:hover { color: #fff; }
.footer__legal { font-size: 13px; width: 100%; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.06); }

/* Reveal */
.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .card.reveal.is-visible { transition: opacity .8s ease, transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; }


/* ===== Solutions: scroll story + video gallery ===== */
#solutions.sec { overflow: visible; overflow-x: clip; padding-top: 0; }
.story { position: relative; height: 420vh; margin-bottom: clamp(40px, 6vw, 70px); }
.story__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: clamp(14px, 2.4vh, 26px); padding: 96px 0 24px; }
.story__head { text-align: center; }
.story__head .eyebrow { margin-bottom: 10px; }
.story__head .sec__title { font-size: clamp(30px, 4vw, 54px); margin: 0; }
.story__stage { position: relative; width: min(100%, calc((100svh - 260px) * 12 / 7)); aspect-ratio: 12 / 7; border-radius: 28px; overflow: hidden; border: 1px solid var(--s-line); background: #fff; box-shadow: 0 40px 90px -50px rgba(14,138,16,.6); }
.story__svg, .story__svg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.story__hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 9px 16px; border-radius: 999px; background: rgba(255,255,255,.92); border: 1px solid var(--s-line); font: 600 13px/1 var(--display); color: var(--g-4); white-space: nowrap; animation: ifloat 2s ease-in-out infinite; transition: opacity .4s; }
.story__hint.is-hidden { opacity: 0; }
.story:not(.in-view) .story-svg * { animation-play-state: paused; }
.story.is-static { height: auto; }
.story.is-static .story__pin { position: relative; height: auto; }
.story.is-static .story__hint { display: none; }
.story-svg [data-anim="pop"], .story-svg [data-anim="grow"], .story-svg [data-anim="shrink"] { transform-origin: center bottom; }
.story-svg [data-anim="growx"] { transform-origin: left center; }
.story-svg [data-anim="draw"] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.story-svg [data-anim="pop"], .story-svg [data-anim="fade"], .story-svg [data-anim="slide"], .story-svg [data-anim="rise"], .story-svg [data-anim="drive"] { opacity: 0; }
.story-svg [data-anim="pop"], .story-svg [data-anim="grow"] { transform-origin: center bottom; }
.story-svg [data-anim="growx"] { transform-origin: left center; }
.story-svg [data-anim="shrink"] { transform-origin: center bottom; }
.story-svg [data-anim="draw"] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.story-svg [data-anim="pop"], .story-svg [data-anim="fade"], .story-svg [data-anim="slide"], .story-svg [data-anim="rise"], .story-svg [data-anim="drive"] { opacity: 0; }
.story-svg .st-sun { fill: #c6f36b; }
.story-svg .st-ray { stroke: #a6e04a; stroke-width: 4; stroke-linecap: round; }
.story-svg .st-dirt2 { fill: #dfe3cf; }
.story-svg .st-dirt { fill: #cfd6b8; }
.story-svg .st-hill { fill: #c6e89c; }
.story-svg .st-grass { fill: #94d25e; }
.story-svg .st-mound { fill: #b7c39b; }
.story-svg .st-plan { fill: none; stroke: #0e8a10; stroke-width: 2; }
.story-svg .st-tree { fill: #22a024; }
.story-svg .st-tree2 { fill: #5fb82a; }
.story-svg .st-tree-hi { fill: #7dc12e; opacity: .7; }
.story-svg .st-trunk { fill: #2f4237; }
.story-svg .st-bld { fill: #ffffff; stroke: #0e8a10; stroke-width: 2; }
.story-svg .st-win { fill: #dcefcf; stroke: #22a024; stroke-width: 1; transition: fill .3s; }
.story-svg .st-glass { fill: #dcefcf; }
.story-svg .st-lime { fill: #c6f36b; stroke: #0e8a10; stroke-width: 1.5; }
.story-svg .st-acc { fill: #22a024; }
.story-svg .st-dark { fill: #1f3328; }
.story-svg .st-arm { fill: none; stroke: #0e8a10; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.story-svg .st-steel { fill: none; stroke: #0e8a10; stroke-width: 3.5; stroke-linecap: round; }
.story-svg .st-steel.thin { stroke-width: 2.5; }
.story-svg .st-joint { stroke: #c6f36b; stroke-width: 5; stroke-linecap: round; }
.story-svg .st-road { fill: #2c3d33; }
.story-svg .st-lane { fill: none; stroke: #f3fbe3; stroke-width: 3; }
.story-svg .st-path { fill: none; stroke: #f3fbe3; stroke-width: 12; stroke-linecap: round; }
.story-svg .st-lamp { fill: #c6f36b; }
.story-svg .st-poolrim { fill: none; stroke: #5fb82a; stroke-width: 4; }
.story-svg .st-water { fill: url(#stWater); transform-origin: center; }
.story-svg .st-ripple { fill: none; stroke: #5fb82a; stroke-width: 2; stroke-linecap: round; }
.story-svg .st-panel { fill: #1f5a35; stroke: #c6f36b; stroke-width: 2; }
.story-svg .st-energy { fill: none; stroke: #c6f36b; stroke-width: 3; stroke-linecap: round; }
.vids { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vid { position: relative; overflow: hidden; border-radius: 22px; aspect-ratio: 16 / 9; background: #e8f5d8; cursor: pointer; isolation: isolate; box-shadow: 0 24px 60px -34px rgba(14,138,16,.6); outline-offset: 4px; transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
.vids > :first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.vids > :last-child { grid-column: span 2; aspect-ratio: auto; }
.vid__screen, .vid__screen svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vid:hover, .vid:focus-visible { transform: translateY(-6px); box-shadow: 0 34px 70px -30px rgba(14,138,16,.7); }
.vid__badge { position: absolute; z-index: 2; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 28px); padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.92); color: #0e8a10; font: 700 11px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.vid__badge i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #22a024; animation: iblink 1.6s ease-in-out infinite; }
.vid__cap { position: absolute; z-index: 2; left: 12px; bottom: 14px; max-width: calc(100% - 24px); padding: 12px 16px; border-radius: 14px; color: #fff; background: rgba(8,52,20,.86); border: 1px solid rgba(198,243,107,.25); box-shadow: 0 12px 30px -14px rgba(0,0,0,.45); transition: background .3s; }
.vid:hover .vid__cap, .vid.is-open .vid__cap, .vid:focus-visible .vid__cap { background: rgba(8,52,20,.9); right: 12px; }
.vids > :first-child:hover .vid__cap, .vids > :first-child.is-open .vid__cap { right: 18px; }
.vid__cap h3 { font-size: clamp(16px, 1.4vw, 19px); color: #fff; }
.vids > :first-child .vid__cap h3 { font-size: clamp(20px, 2vw, 26px); }
.vids > :first-child .vid__cap { left: 18px; bottom: 20px; padding: 16px 20px; }
.vid__cap p { width: 0; min-width: 100%; font-size: 14.5px; line-height: 1.5; color: #e8f6dc; max-height: 0; opacity: 0; transform: translateY(10px); overflow: hidden; transition: max-height .5s ease, opacity .4s, transform .5s cubic-bezier(.2,.8,.2,1), margin .4s; }
.vid:hover .vid__cap p, .vid.is-open .vid__cap p, .vid:focus-visible .vid__cap p { max-height: 120px; opacity: 1; transform: none; margin-top: 8px; }
.vid__bar { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.18); }
.vid__bar i { display: block; height: 100%; width: 100%; transform-origin: left; background: linear-gradient(90deg, var(--g-1), var(--g-2)); animation: vidbar 9s linear infinite; }
@keyframes vidbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.vid:not(.is-playing) * { animation-play-state: paused !important; }

.vid-svg .v-cloud { animation: vcloud 36s linear infinite; }
@keyframes vcloud { from { transform: translateX(-180px); } to { transform: translateX(760px); } }
.vid-svg .v-drive { animation: vdrive 7s linear infinite; }
.vid-svg .v-drive.rev { animation-direction: reverse; }
@keyframes vdrive { from { transform: translateX(-90px); } to { transform: translateX(700px); } }
.vid-svg .v-floor { transform-origin: center bottom; animation: vfloor 8s ease-in-out infinite; }
@keyframes vfloor { 0% { transform: scaleY(0); opacity: 0; } 8%, 86% { transform: scaleY(1); opacity: 1; } 96%, 100% { transform: scaleY(0); opacity: 0; } }
.vid-svg .v-light { animation: vlight 4s ease-in-out infinite; }
.vid-svg .v-glow { opacity: 0; animation: vglow 4s ease-in-out infinite; }
@keyframes vglow { 0%, 40% { opacity: 0; } 55%, 100% { opacity: .35; } }
@keyframes vlight { 0%, 40% { opacity: .15; } 55%, 100% { opacity: 1; } }
.vid-svg .v-jib { transform-box: view-box; transform-origin: 430px 50px; animation: vjib 7s ease-in-out infinite alternate; }
@keyframes vjib { from { transform: rotate(-3deg); } to { transform: rotate(2deg); } }
.vid-svg .v-lift { animation: vlift 4s ease-in-out infinite alternate; }
@keyframes vlift { from { transform: translateY(-60px); } to { transform: translateY(40px); } }
.vid-svg .v-paint { transform-origin: left center; animation: vpaint 6s ease-in-out infinite; }
@keyframes vpaint { 0% { transform: scaleX(0); opacity: 1; } 45%, 85% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.vid-svg .v-slidein { animation: vslide 6s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes vslide { 0% { transform: translateX(380px); } 30%, 88% { transform: translateX(0); } 100% { transform: translateX(380px); } }
.vid-svg .v-grow, .vid-svg .v-sprout { transform-origin: center bottom; }
.vid-svg .v-grow { animation: vgrow 6s ease-out infinite; }
.vid-svg .v-sprout { animation: vgrow 7s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes vgrow { 0% { transform: scale(0); } 25%, 88% { transform: scale(1); } 100% { transform: scale(0); } }
.vid-svg .v-pave { transform-origin: left center; animation: vpave 7s linear infinite; }
.vid-svg .v-pave-dash { animation: vpavedash 7s linear infinite; }
.vid-svg .v-paver { animation: vpaver 7s linear infinite; }
.vid-svg .v-roller { animation: vroller 7s linear infinite; }
@keyframes vpave { 0% { transform: scaleX(0); } 85%, 100% { transform: scaleX(1); } }
@keyframes vpavedash { 0%, 50% { opacity: 0; } 70%, 100% { opacity: 1; } }
@keyframes vpaver { 0% { transform: translateX(-60px); } 85% { transform: translateX(560px); } 100% { transform: translateX(700px); } }
@keyframes vroller { 0% { transform: translateX(-200px); } 85% { transform: translateX(400px); } 100% { transform: translateX(540px); } }
.vid-svg .v-draw { stroke-dasharray: 1; animation: vdraw 7s ease-in-out infinite; }
@keyframes vdraw { 0% { stroke-dashoffset: 1; } 40%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
.vid-svg .v-bloom { transform-origin: center bottom; animation: vbloom 6s cubic-bezier(.3,1.6,.5,1) infinite; }
@keyframes vbloom { 0%, 10% { transform: scale(0); } 30%, 88% { transform: scale(1); } 100% { transform: scale(0); } }
.vid-svg .v-butterfly { animation: vfly 9s ease-in-out infinite; }
@keyframes vfly { 0% { transform: translate(40px, 200px); } 25% { transform: translate(200px, 140px); } 50% { transform: translate(360px, 210px); } 75% { transform: translate(520px, 130px); } 100% { transform: translate(40px, 200px); } }
.vid-svg .v-flap { animation: vflap .25s ease-in-out infinite alternate; }
@keyframes vflap { from { transform: scaleX(1); } to { transform: scaleX(.3); } }
.vid-svg .v-jump { animation: vjump 4s ease-in-out infinite; }
@keyframes vjump { 0%, 55% { transform: translate(300px, 262px) rotate(0); opacity: 0; } 60% { opacity: 1; transform: translate(300px, 262px) rotate(-30deg); } 72% { transform: translate(336px, 214px) rotate(0); } 84% { transform: translate(372px, 258px) rotate(40deg); opacity: 1; } 88%, 100% { transform: translate(372px, 262px) rotate(40deg); opacity: 0; } }
.vid-svg .v-sunrise { animation: vsunrise 10s ease-in-out infinite alternate; }
@keyframes vsunrise { from { transform: translateY(80px); } to { transform: translateY(-30px); } }
.vid-svg .v-bird { animation: vbird 10s linear infinite; }
@keyframes vbird { from { transform: translate(-80px, 0); } 50% { transform: translate(320px, -20px); } to { transform: translate(720px, 0); } }
.vid-svg .v-seed { animation: vseed 3.5s ease-in infinite; }
@keyframes vseed { 0% { transform: translate(310px, -10px); opacity: 1; } 80% { transform: translate(310px, 200px); opacity: 1; } 100% { transform: translate(310px, 210px); opacity: 0; } }
.vid-svg .v-leaf { animation: vleaf 6s linear infinite; }
@keyframes vleaf { from { transform: translate(0, -40px) rotate(0); opacity: 0; } 15% { opacity: 1; } to { transform: translate(40px, 160px) rotate(220deg); opacity: 0; } }
.vid-svg .v-sunarc { animation: vsunarc 12s ease-in-out infinite alternate; }
@keyframes vsunarc { 0% { transform: translate(60px, 190px); } 50% { transform: translate(320px, 60px); } 100% { transform: translate(580px, 190px); } }
.vid-svg .v-glint { animation: vglint 3s ease-in-out infinite; }
@keyframes vglint { 0%, 60% { transform: translateX(0); opacity: 0; } 70% { opacity: .7; } 100% { transform: translateX(60px); opacity: 0; } }
.vid-svg .v-fill { transform-origin: center bottom; animation: vfill 6s ease-in-out infinite; }
@keyframes vfill { 0% { transform: scaleY(.05); } 85%, 100% { transform: scaleY(1); } }
.vid-svg .v-pop { transform-origin: center bottom; animation: vpop 6s cubic-bezier(.3,1.6,.5,1) infinite; }
@keyframes vpop { 0%, 8% { transform: scale(0); } 22%, 88% { transform: scale(1); } 100% { transform: scale(0); } }
.vid-svg .v-forklift { animation: vfork 6s ease-in-out infinite; }
@keyframes vfork { 0%, 10% { transform: translateX(290px); } 45%, 55% { transform: translateX(340px); } 90%, 100% { transform: translateX(290px); } }
.vid-svg .v-truckout { animation: vtruck 9s ease-in-out infinite; }
@keyframes vtruck { 0%, 70% { transform: translateX(0); } 90% { transform: translateX(320px); } 91% { transform: translateX(-260px); } 100% { transform: translateX(0); } }
.vid-svg .v-tick { stroke-dasharray: 1; animation: vtick 6s ease-in-out infinite; }
@keyframes vtick { 0%, 15% { stroke-dashoffset: 1; } 30%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
.vid-svg .v-spray { animation: vspray 1.4s ease-out infinite; }
@keyframes vspray { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }

@media (max-width: 1080px) {
  .vids { grid-template-columns: repeat(2, 1fr); }
  .vids > :first-child { grid-row: auto; aspect-ratio: 16 / 9; }
  .vids > :last-child { grid-column: auto; aspect-ratio: 16 / 9; }
}
@media (max-width: 900px) {
  .story { height: 360vh; }
  .story__pin { padding: 84px 0 16px; }
  .story__stage { width: 100%; }
}
@media (max-width: 640px) {
  .vids { grid-template-columns: 1fr; gap: 16px; }
  .vids > :first-child { grid-column: auto; }
  .vid:hover { transform: none; }
}

/* ===== Responsive ===== */
@media (min-width: 1600px) { .wrap { width: min(1400px, 100% - 2 * var(--gutter)); } }
@media (max-width: 1200px) {
  .explorer__body { grid-template-columns: 230px 1fr; }
  .explorer__art { grid-column: 1 / -1; grid-row: 2; min-height: 240px; }
  .explorer__art--iso { min-height: 320px; }
  .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .cards--5 { grid-template-columns: repeat(2, 1fr); }
  .cards--5 > * { grid-column: auto !important; }
  .cards--5 > :last-child { grid-column: 1 / -1 !important; }
  .glance__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1100px) {
  .hero { flex-direction: column; align-items: stretch; min-height: 0; padding: 120px 0 0; }
  .hero__copy { max-width: 720px; }
  .hero__visual { position: relative; width: 100%; height: clamp(320px, 56vw, 480px); margin-top: 16px; }
  .hero__visual::before { background: linear-gradient(180deg, var(--dark) 0%, rgba(7,19,13,0) 20%, rgba(7,19,13,0) 80%, var(--dark) 100%); }
  .hud--1 { top: 18%; right: 8%; } .hud--2 { top: 52%; right: auto; left: 6%; } .hud--3 { bottom: 16%; right: 10%; }
}
@media (max-width: 1080px) {
  .cards--3 { grid-template-columns: repeat(2, 1fr); }
  .contact__grid, .feature { grid-template-columns: 1fr; }
  .process__steps { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
  .process__steps::before { display: none; }
}
@media (max-width: 900px) {
  .sec__intro { grid-template-columns: 1fr; gap: 36px; }
  .sec__visual { max-width: none; aspect-ratio: 16 / 10; }
  .sec__visual--canvas { aspect-ratio: 16 / 11; }
  .explorer__body { grid-template-columns: 1fr; }
  .explorer__art { grid-row: auto; }
  .explorer__tabs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin-inline: -4px; padding-inline: 4px; scrollbar-width: thin; }
  .explorer__art--iso { min-height: 360px; }
  .explorer__art--iso .iso { margin-top: 110px; }
  .xtab { flex: 0 0 auto; scroll-snap-align: start; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 14px; padding: 12px 14px; max-width: 220px; white-space: normal; }
}
@media (max-width: 860px) {
  .nav__toggle { display: block; }
  .nav__links { position: fixed; inset: calc(76px + env(safe-area-inset-top)) 0 auto; flex-direction: column; align-items: stretch; gap: 0; background: rgba(7,19,13,.98); padding: 12px var(--gutter) 24px; border-bottom: 1px solid var(--dark-line); transform: translateY(-12px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; max-height: calc(100vh - 76px); overflow-y: auto; }
  .nav__inner, .nav.is-scrolled .nav__inner { height: 76px; }
.nav.is-scrolled .brand__text { font-size: 27px; }
  .brand__mark, .nav.is-scrolled .brand__mark { width: 54px; }
  .brand__text, .nav.is-scrolled .brand__text { font-size: 26px; }
  .nav__links a:not(.btn) { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 16px; }
  .nav__links a:not(.btn)::after { display: none; }
  .nav__links .btn { margin-top: 16px; }
  .nav.is-open { background: rgba(7,19,13,.98); }
  .nav.is-open .nav__links { opacity: 1; transform: none; pointer-events: auto; }
  .nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 640px) {
  :root { --gutter: max(16px, env(safe-area-inset-left)); }
  .cards--2, .cards--3, .cards--4, .cards--5, .form__row, .feature__list, .duo, .glance__grid { grid-template-columns: 1fr; }
  .cards--5 > :last-child { grid-column: auto !important; }
  .glance__item { display: grid; grid-template-columns: 88px 1fr; column-gap: 14px; align-items: center; padding: 14px; }
  .glance__illo { grid-row: span 3; height: 80px; margin: 0; }
  .glance__item p { font-size: 13px; }
  .glance__go { margin-top: 6px; }
  .process__steps { grid-template-columns: 1fr; row-gap: 0; }
  .process__steps li { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; text-align: left; padding: 0 0 26px; }
  .process__steps li::after { content: ""; position: absolute; left: 27px; top: 60px; bottom: 4px; width: 2px; background: var(--s-line); }
  .process__steps li:last-child::after { display: none; }
  .process__steps span { grid-row: span 2; margin: 0; }
  .card__illo { height: 150px; }
  .hero__cta .btn { flex: 1 1 100%; }
  .hud { font-size: 11px; padding: 7px 10px; }
  .hero__note { left: var(--gutter); right: auto; }
  .explorer__art { min-height: 200px; }
  .explorer__art--iso { min-height: 320px; }
  .iso, .explorer__art--iso .iso { width: 170px; height: 170px; margin-top: 110px; }
  .form__fallback-actions .btn { flex: 1 1 100%; }
}
@media (max-width: 380px) {
  .hero h1 { font-size: 31px; }
  .brand__text, .nav.is-scrolled .brand__text { font-size: 23px; }
  .brand__mark, .nav.is-scrolled .brand__mark { width: 48px; }
}
@media (hover: none) { .card:hover, .glance__item:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .js .reveal, .js .rise { opacity: 1; transform: none; }
  .split .w > span { transform: none; }
  .a-draw { stroke-dashoffset: 0; }
  .split-on-view .w > span { transform: none; }
}

/* Performance: animations only run in sections that are on screen */
.is-offscreen *, .is-offscreen *::before, .is-offscreen *::after { animation-play-state: paused !important; }
.vids .vid { contain: layout paint; }
.card__illo, .explorer__art, .sec__visual, .glance__illo { contain: paint; }