/* ============================================================================
   GOOBA EXPORT LLP — Design System
   1. Tokens          6. Hero            11. Global markets
   2. Reset / base    7. Statement       12. OEM
   3. Typography      8. Impact          13. Why / Trust
   4. Primitives      9. Products        14. CTA / Contact
   5. Nav             10. Circular       15. Footer / Responsive
   ========================================================================= */

/* ── 1. TOKENS ───────────────────────────────────────────────────────────── */
:root {
  /* Light-first surface system — ivory, sand, stone */
  --ivory:  #F4F1E8;
  --sand:   #E9E5D8;
  --stone:  #DCD6C4;
  --paper:  #FBF9F3;

  /* Deep forest / charcoal */
  --forest:   #0B1712;
  --forest-2: #101C16;
  --forest-3: #16241C;

  /* Accents */
  --green:  #1F4632;
  --green-2:#173427;
  --olive:  #6B7256;
  --lime:   #C8E45C;
  --lime-2: #A9C247;

  /* Semantic (light theme default) */
  --bg:       var(--ivory);
  --bg-2:     var(--sand);
  --surface:  var(--paper);
  --fg:       #141812;
  --fg-2:     #414839;   /* 9.4:1 on ivory  */
  --fg-3:     #5C6357;   /* 5.5:1 on ivory  */
  --line:     rgba(20, 24, 18, .14);
  --line-2:   rgba(20, 24, 18, .07);
  --accent:   var(--green);
  --on-accent:#F4F1E8;

  /* Type */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Display scale — hero stays the loudest voice, section heads sit under it */
  --fs-hero: clamp(2.5rem, 6.6vw, 6.8rem);
  --fs-xl:   clamp(2.2rem, 5.4vw, 5.4rem);
  --fs-lg:   clamp(1.95rem, 4.4vw, 4.2rem);
  --fs-md:   clamp(1.5rem, 2.8vw, 2.5rem);
  --fs-lead: clamp(1.06rem, 1.4vw, 1.36rem);
  --fs-body: clamp(1rem, .8vw + .38rem, 1.08rem);

  /* Spacious scale */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 40px;
  --s-5: 64px; --s-6: 96px; --s-7: 140px; --s-8: 200px;
  --pad-x: clamp(20px, 5vw, 72px);
  --sec-y: clamp(88px, 13vh, 190px);
  --max:   1480px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --nav-h: 76px;
}

.theme-dark {
  --bg:       var(--forest);
  --bg-2:     var(--forest-2);
  --surface:  var(--forest-3);
  --fg:       #EFEDE3;
  --fg-2:     #B3BCAE;   /* 9.9:1 on forest */
  --fg-3:     #8E9A8B;   /* 6.1:1 on forest */
  --line:     rgba(239, 237, 227, .17);
  --line-2:   rgba(239, 237, 227, .08);
  --accent:   var(--lime);
  --on-accent:#0B1712;
  background: var(--bg);
  color: var(--fg);
}

/* ── 2. RESET / BASE ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
html.lenis { scroll-behavior: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

::selection { background: var(--green); color: var(--ivory); }
.theme-dark ::selection { background: var(--lime); color: var(--forest); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 999;
  padding: 10px 18px; background: var(--forest); color: var(--ivory);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad-x); }

/* Film grain */
.grain {
  position: fixed; inset: -50%;
  z-index: 900; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  animation: grainShift 7s steps(6) infinite;
}
@keyframes grainShift {
  0%,100% { transform: translate(0,0) }
  20% { transform: translate(-2%, 1%) }
  40% { transform: translate(1%, -2%) }
  60% { transform: translate(-1%, 2%) }
  80% { transform: translate(2%, 1%) }
}

/* ── 3. TYPOGRAPHY ───────────────────────────────────────────────────────── */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: .93;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.h-xl { font-size: var(--fs-xl); }
.h-lg { font-size: var(--fs-lg); }

h1, h2, h3, h4 { font-weight: 500; line-height: 1.15; letter-spacing: -.015em; }

.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: .75rem; font-weight: 500;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--fg-3);
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.theme-dark .eyebrow .dot { box-shadow: 0 0 12px rgba(200, 228, 92, .6); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 62ch;
  font-weight: 300;
}
p { color: var(--fg-2); }

/* ── 4. PRIMITIVES ───────────────────────────────────────────────────────── */
.ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.btn {
  --btn-bg: transparent; --btn-fg: var(--fg); --btn-bd: var(--line);
  /* isolate so the ::before wipe paints above the button's own background */
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: .7em;
  padding: 1.05em 1.7em;
  font-family: var(--font-display); font-size: .84rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid var(--btn-bd); border-radius: 999px;
  overflow: hidden; cursor: pointer;
  transition: color .45s var(--ease), border-color .45s var(--ease), background-color .45s var(--ease), transform .3s var(--ease);
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-hover, var(--fg));
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .5s var(--ease);
}
.btn > * { position: relative; z-index: 1; }
.btn .ico { font-size: 1.05em; transition: transform .45s var(--ease); }
.btn:hover .ico { transform: translateX(5px); }
.btn:hover::before { transform: scaleY(1); }
.btn:active { transform: scale(.985); }

.btn--solid { --btn-bg: var(--green); --btn-fg: var(--ivory); --btn-bd: var(--green); --btn-hover: var(--forest); }
.btn--solid:hover { color: var(--lime); border-color: var(--forest); }

.btn--lime { --btn-bg: var(--lime); --btn-fg: var(--forest); --btn-bd: var(--lime); --btn-hover: var(--ivory); }
.btn--lime:hover { color: var(--forest); border-color: var(--ivory); }

.btn--ghost { --btn-fg: var(--fg); --btn-bd: var(--line); --btn-hover: var(--fg); }
.btn--ghost:hover { color: var(--bg); border-color: var(--fg); }

.btn--line-light { --btn-fg: #EFEDE3; --btn-bd: rgba(239,237,227,.4); --btn-hover: #EFEDE3; }
.btn--line-light:hover { color: var(--forest); border-color: #EFEDE3; }

.btn--wa { --btn-bg: transparent; --btn-fg: var(--green); --btn-bd: rgba(31,70,50,.35); --btn-hover: var(--green); margin-top: var(--s-3); }
.btn--wa:hover { color: var(--ivory); border-color: var(--green); }
.theme-dark .btn--wa { --btn-fg: var(--lime); --btn-bd: rgba(200,228,92,.4); --btn-hover: var(--lime); }

.btn--block { width: 100%; justify-content: center; }
.btn[disabled] { opacity: .55; pointer-events: none; }

.link {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--font-display); font-size: .8rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg); padding-bottom: 4px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: color .35s var(--ease), background-size .5s var(--ease);
}
.link:hover { background-size: 0% 1px; background-position: 100% 100%; color: var(--accent); }
.link .ico { transition: transform .45s var(--ease); }
.link:hover .ico { transform: translateX(5px); }

/* Reveal system (JS adds .is-in; CSS safety net reveals without JS) */
[data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  animation: revealSafety .01s linear 2.2s forwards;
}
[data-reveal].is-in { opacity: 1; transform: none; animation: none; }
@keyframes revealSafety { to { opacity: 1; transform: none } }

[data-lines] .line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
[data-lines] .line > span {
  display: block; transform: translateY(105%);
  transition: transform 1.05s var(--ease);
  animation: lineSafety .01s linear 2.2s forwards;
}
[data-lines].is-in .line > span { transform: none; animation: none; }
[data-lines].is-in .line:nth-child(2) > span { transition-delay: .09s }
[data-lines].is-in .line:nth-child(3) > span { transition-delay: .18s }
@keyframes lineSafety { to { transform: none } }

[data-words] .w { display: inline-block; opacity: .16; transition: opacity .5s linear; }

/* Custom cursor — pointer:fine only */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cursor {
    display: block; position: fixed; top: 0; left: 0;
    z-index: 950; pointer-events: none;
  }
  .cursor__cake, .cursor__ring {
    position: absolute; top: 0; left: 0;
    transform: translate(-50%, -50%);
  }
  /* Mid-tone earth so the same disc reads on ivory and on deep forest.
     max-width must be reset: the global `svg { max-width: 100% }` resolves
     against .cursor, which is a 0x0 fixed box, and collapses the disc. */
  .cursor__cake {
    width: 24px; height: 24px; max-width: none; overflow: visible;
    transition: width .4s var(--ease), height .4s var(--ease), opacity .3s, rotate .6s var(--ease);
  }
  .cake__disc {
    fill: #7C6743;
    stroke: rgba(244, 241, 232, .5); stroke-width: 1.1;
  }
  .cake__marks path {
    fill: none; stroke: rgba(30, 23, 12, .45);
    stroke-width: 1.6; stroke-linecap: round;
  }
  .cake__thumb { fill: rgba(30, 23, 12, .32) }

  .cursor__ring {
    display: grid; place-items: center; border-radius: 999px;
    width: 44px; height: 44px;
    border: 1px solid rgba(20, 24, 18, .28);
    opacity: 0;
    transition: width .4s var(--ease), height .4s var(--ease),
                background-color .4s var(--ease), border-color .4s var(--ease), opacity .3s;
  }
  .cursor__label {
    font-family: var(--font-display); font-size: .62rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--forest);
    opacity: 0; white-space: nowrap; transition: opacity .3s;
  }

  /* Over dark sections the ring and label flip to ivory */
  .cursor.on-dark .cursor__ring { border-color: rgba(244, 241, 232, .45) }
  .cursor.on-dark .cursor__label { color: #F4F1E8 }

  .cursor.is-hover .cursor__ring { opacity: 1; width: 58px; height: 58px }
  .cursor.is-hover .cursor__cake { width: 17px; height: 17px; rotate: -12deg }

  .cursor.is-label .cursor__ring { opacity: 1; width: 112px; height: 112px; background: rgba(200, 228, 92, .16) }
  /* tuck the disc onto the ring edge so it never sits on the label text */
  .cursor.is-label .cursor__cake { width: 16px; height: 16px; translate: -40px -40px }
  .cursor.is-label .cursor__label { opacity: 1 }

  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none }
}

/* ── 5. NAVIGATION ───────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 800;
  transition: background-color .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav__inner {
  max-width: var(--max); margin-inline: auto;
  padding: 0 var(--pad-x);
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.nav.is-solid {
  background: rgba(244, 241, 232, .82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--line-2);
}

.brand { display: flex; align-items: center; gap: 11px; color: #F4F1E8; transition: color .5s var(--ease); }
.nav.is-solid .brand { color: var(--fg); }
/* The mark is deep green, so it disappears against the dark hero. Sitting it
   on a light coin keeps the original artwork legible on every background. */
.brand__mark {
  width: 42px; height: 42px; padding: 6px;
  object-fit: contain; border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(20, 24, 18, .10), 0 6px 18px -10px rgba(11, 23, 18, .5);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.04) }
.brand__word {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1rem; letter-spacing: .1em;
}
.brand__word em { font-style: normal; font-weight: 400; opacity: .62; margin-left: .45em; }

.nav__links { position: relative; display: flex; align-items: center; gap: clamp(14px, 1.9vw, 34px); }
.nav__links a {
  font-family: var(--font-display); font-size: .82rem; font-weight: 500;
  letter-spacing: .07em; color: rgba(244,241,232,.78);
  padding: 6px 2px; transition: color .35s var(--ease);
}
.nav.is-solid .nav__links a { color: var(--fg-2); }
.nav__links a:hover, .nav__links a.is-current { color: #F4F1E8; }
.nav.is-solid .nav__links a:hover, .nav.is-solid .nav__links a.is-current { color: var(--fg); }
.nav__indicator {
  position: absolute; bottom: -2px; left: 0; height: 1px; width: 0;
  background: var(--lime); opacity: 0;
  transition: transform .55s var(--ease), width .55s var(--ease), opacity .35s;
}
.nav.is-solid .nav__indicator { background: var(--green); }
.nav__links:hover .nav__indicator, .nav__indicator.is-on { opacity: 1; }

.nav__end { display: flex; align-items: center; gap: var(--s-2); }
.nav__cta { padding: .8em 1.3em; font-size: .78rem; --btn-fg: #F4F1E8; --btn-bd: rgba(244,241,232,.35); --btn-hover: #F4F1E8; }
.nav__cta:hover { color: var(--forest); border-color: #F4F1E8; }
.nav.is-solid .nav__cta { --btn-fg: var(--fg); --btn-bd: var(--line); --btn-hover: var(--green); }
.nav.is-solid .nav__cta:hover { color: var(--ivory); border-color: var(--green); }

.burger {
  display: none; position: relative;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(244,241,232,.32);
}
.nav.is-solid .burger { border-color: var(--line); }
.burger span {
  position: absolute; left: 13px; width: 18px; height: 1.4px;
  background: #F4F1E8; transition: transform .45s var(--ease), opacity .3s;
}
.nav.is-solid .burger span { background: var(--fg); }
.burger span:nth-child(1) { top: 19px }
.burger span:nth-child(2) { top: 25px }
body.menu-open .burger span { background: var(--ivory) }
body.menu-open .burger span:nth-child(1) { transform: translateY(3px) rotate(45deg) }
body.menu-open .burger span:nth-child(2) { transform: translateY(-3px) rotate(-45deg) }
body.menu-open .burger { border-color: rgba(244,241,232,.32) }

/* Full-screen menu */
.menu {
  position: fixed; inset: 0; z-index: 790;
  background: var(--forest); color: var(--ivory);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .8s var(--ease-io);
  overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu.is-open { clip-path: inset(0 0 0 0); }
.menu__inner {
  min-height: 100%; padding: calc(var(--nav-h) + 32px) var(--pad-x) 48px;
  /* `safe` keeps the top of the list reachable when the menu is taller than
     the viewport — plain `center` would push it out of scroll range. */
  display: flex; flex-direction: column; justify-content: safe center; gap: var(--s-5);
}
.menu__eyebrow { color: rgba(244,241,232,.45) }
.menu__links { display: flex; flex-direction: column; }
.menu__links a {
  display: flex; align-items: baseline; gap: 18px;
  padding: 14px 0; border-bottom: 1px solid rgba(244,241,232,.12);
  font-family: var(--font-display); font-size: clamp(1.7rem, 8vw, 3rem);
  letter-spacing: -.03em; opacity: 0; transform: translateY(24px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), color .3s;
}
.menu.is-open .menu__links a { opacity: 1; transform: none; }
.menu.is-open .menu__links a:nth-child(1) { transition-delay: .18s }
.menu.is-open .menu__links a:nth-child(2) { transition-delay: .24s }
.menu.is-open .menu__links a:nth-child(3) { transition-delay: .30s }
.menu.is-open .menu__links a:nth-child(4) { transition-delay: .36s }
.menu.is-open .menu__links a:nth-child(5) { transition-delay: .42s }
.menu.is-open .menu__links a:nth-child(6) { transition-delay: .48s }
.menu.is-open .menu__links a:nth-child(7) { transition-delay: .54s }
.menu__links a span {
  font-size: .75rem; letter-spacing: .18em; color: var(--lime); opacity: .85;
}
.menu__links a:hover { color: var(--lime) }
.menu__foot { display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start }
.menu__meta { font-size: .92rem; color: rgba(244,241,232,.55); line-height: 1.9 }

/* ── 6. HERO ─────────────────────────────────────────────────────────────── */
.hero {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: grid; align-items: end;
  padding: calc(var(--nav-h) + 40px) 0 clamp(40px, 7vh, 80px);
  background: var(--forest);
  color: #F4F1E8;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 2s linear;
  will-change: opacity;
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img, .hero__slide picture { width: 100%; height: 100%; }
.hero__slide img {
  object-fit: cover; object-position: center 46%;
  transform: scale(1.08);
  animation: heroDrift 22s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.06) translate3d(0,0,0) }
  to   { transform: scale(1.16) translate3d(-1.5%, -2%, 0) }
}
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,23,18,.78) 0%, rgba(11,23,18,.34) 32%, rgba(11,23,18,.72) 72%, rgba(11,23,18,.94) 100%),
    radial-gradient(120% 80% at 15% 90%, rgba(11,23,18,.72), transparent 65%);
}

.hero__grid {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--max); margin-inline: auto;
  padding-inline: var(--pad-x);
  display: grid; gap: clamp(20px, 3.4vh, 40px);
}
.hero__eyebrow { color: rgba(244,241,232,.7) }
.hero__eyebrow .dot { background: var(--lime) }
.hero__title {
  font-size: var(--fs-hero);
  max-width: 15ch;
  text-wrap: initial;
}
.hero__title .line:nth-child(2) > span { color: rgba(244,241,232,.9) }
.hero__title .line:nth-child(3) > span { font-style: italic; font-weight: 400; }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.hero__meta {
  display: grid; grid-template-columns: repeat(3, minmax(0, auto));
  gap: clamp(20px, 4vw, 72px); justify-content: start;
  padding-top: clamp(14px, 2.6vh, 28px);
  border-top: 1px solid rgba(244,241,232,.18);
}
.hero__meta li { display: grid; gap: 5px }
.hero__meta .k {
  font-family: var(--font-display); font-size: .75rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(244,241,232,.62);
}
.hero__meta .v { font-size: .95rem; color: rgba(244,241,232,.92); font-weight: 300 }

.hero__orbit {
  position: absolute; z-index: 1;
  top: 12%; right: -6%;
  width: clamp(280px, 34vw, 520px); aspect-ratio: 1;
  pointer-events: none; opacity: .55;
}
.orbit__ring { fill: none; stroke: rgba(200,228,92,.28); stroke-width: .5 }
.orbit__ring--dash { stroke-dasharray: 2 6; stroke: rgba(244,241,232,.24) }
.orbit__bead { fill: var(--lime) }
.orbit__bead--dim { fill: rgba(244,241,232,.6) }
.orbit__spin { transform-origin: 50% 50%; animation: spin 26s linear infinite }
.orbit__spin--slow { animation-duration: 44s; animation-direction: reverse }
@keyframes spin { to { transform: rotate(360deg) } }

.hero__scroll {
  position: absolute; z-index: 2; bottom: clamp(18px, 3vh, 34px); right: var(--pad-x);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: rgba(244,241,232,.6);
}
.hero__scroll .eyebrow { font-size: .75rem; writing-mode: vertical-rl; letter-spacing: .3em }
.hero__scroll-line { display: block; width: 1px; height: 62px; background: rgba(244,241,232,.22); overflow: hidden }
.hero__scroll-line i { display: block; width: 100%; height: 40%; background: var(--lime); animation: scrollCue 2.4s var(--ease-io) infinite }
@keyframes scrollCue { 0% { transform: translateY(-100%) } 60%,100% { transform: translateY(250%) } }

/* ── 7. BRAND STATEMENT ──────────────────────────────────────────────────── */
.statement { padding: var(--sec-y) 0; background: var(--bg); }
.statement__head {
  font-size: var(--fs-xl);
  max-width: 17ch;
  margin: clamp(24px, 4vw, 56px) 0 clamp(40px, 6vw, 88px);
  font-family: var(--font-display); font-weight: 500;
  line-height: .96; letter-spacing: -.035em;
}
.statement__body {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 80px);
  padding-top: var(--s-4); border-top: 1px solid var(--line);
}
.statement__col .lead { font-size: clamp(1.2rem, 2vw, 1.7rem); color: var(--fg); line-height: 1.42; font-weight: 400; letter-spacing: -.01em }
.statement__col .link { margin-top: var(--s-3) }
/* The source is a 1024px square. Capped at 1200 so it is never upscaled far,
   and held at 16:10 so the crop keeps the hands and the dung ring instead of
   slicing a letterbox band out of the middle. */
.statement__figure {
  max-width: 1200px;
  margin: clamp(48px, 8vw, 120px) auto 0;
}
.statement__figure picture {
  position: relative; display: block; overflow: hidden;
  border-radius: 3px;
  aspect-ratio: 16 / 10;
  max-height: 78vh;
}
/* Parallax rides on scale, not translate — a scale >= 1 can never expose an
   edge, so no oversized inner image is needed. Origin sits on the hands. */
.statement__figure img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 62%;
  transform-origin: center 62%;
}
.statement__figure figcaption {
  padding-top: 16px; color: var(--fg-3);
}

/* ── 8. IMPACT ───────────────────────────────────────────────────────────── */
.impact { padding: 0 0 var(--sec-y); background: var(--bg) }
.impact__head { margin-bottom: clamp(28px, 4vw, 56px) }
.impact__row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.impact__item {
  display: grid; align-content: start; gap: 10px;
  padding: clamp(26px, 3vw, 46px) clamp(16px, 2vw, 32px) clamp(26px, 3vw, 46px) 0;
  border-right: 1px solid var(--line);
}
.impact__item:last-child { border-right: 0 }
.impact__num {
  font-size: clamp(2.6rem, 5.4vw, 5.4rem);
  color: var(--fg); line-height: .9;
}
.impact__label {
  font-family: var(--font-display); font-size: .78rem; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase; color: var(--accent);
}
.impact__note { font-size: .92rem; color: var(--fg-3); line-height: 1.6; max-width: 28ch }

/* ── 9. PRODUCTS ─────────────────────────────────────────────────────────── */
.products { background: var(--bg-2); padding: var(--sec-y) 0 clamp(64px, 9vh, 130px); overflow: hidden }
.products__intro { display: grid; gap: clamp(18px, 2.4vw, 30px); margin-bottom: clamp(40px, 6vw, 84px) }
.products__hint { color: var(--fg-3) }

.products__pin { position: relative }
.products__track {
  display: flex; align-items: stretch;
  gap: clamp(18px, 2.2vw, 40px);
  padding-inline: var(--pad-x);
  will-change: transform;
}

.pcard {
  flex: none; width: clamp(268px, 30vw, 520px);
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 3px; overflow: hidden;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease);
}
.pcard:hover { transform: translateY(-6px); border-color: var(--line); box-shadow: 0 30px 60px -40px rgba(11,23,18,.45) }
.pcard__media { position: relative; overflow: hidden; aspect-ratio: 4/3.4; background: var(--stone) }
.pcard__media::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 42%;
  background: linear-gradient(180deg, transparent, rgba(11,23,18,.62));
  pointer-events: none;
}
.pcard__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.01);
  transition: transform 1.1s var(--ease), filter .8s var(--ease);
}
.pcard:hover .pcard__media img { transform: scale(1.07) }
.pcard__index {
  position: absolute; left: 18px; bottom: 12px;
  font-size: clamp(2.4rem, 4vw, 3.6rem); color: rgba(244,241,232,.96);
  letter-spacing: -.05em; z-index: 1;
  transition: transform .6s var(--ease);
}
.pcard:hover .pcard__index { transform: translateY(-4px) }
.pcard__body { display: grid; align-content: start; gap: 14px; padding: clamp(20px, 2vw, 30px) }
.pcard__title { font-family: var(--font-display); font-size: clamp(1.2rem, 1.6vw, 1.55rem); letter-spacing: -.02em }
.pcard__desc { font-size: .95rem; line-height: 1.62; color: var(--fg-2) }
.pcard__apps { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px }
.pcard__apps li {
  font-family: var(--font-display); font-size: .75rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--fg-3);
  padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px;
  white-space: nowrap;
}
.pcard__body .link { margin-top: 6px; justify-self: start }

.products__progress {
  margin: clamp(28px, 4vw, 48px) var(--pad-x) 0;
  height: 1px; background: var(--line);
}
.products__progress i { display: block; height: 100%; width: 8%; background: var(--green); transform-origin: left }

/* ── 10. CIRCULAR ECONOMY ────────────────────────────────────────────────── */
.circ { padding: var(--sec-y) 0; position: relative; overflow: hidden }
.circ__head { display: grid; gap: clamp(18px, 2.4vw, 30px); max-width: 74ch; margin-bottom: clamp(48px, 7vw, 96px) }
.circ__layout {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 88px); align-items: start;
}
.circ__stage { position: sticky; top: calc(var(--nav-h) + 6vh) }
.ring { width: 100%; height: auto; overflow: visible }
.ring__base { fill: none; stroke: var(--line); stroke-width: 1 }
.ring__prog {
  fill: none; stroke: var(--lime); stroke-width: 1.6;
  stroke-dasharray: 1256.6; stroke-dashoffset: 1256.6;
  transform: rotate(-90deg); transform-origin: 280px 280px;
  transition: stroke-dashoffset 1s var(--ease);
  filter: drop-shadow(0 0 6px rgba(200,228,92,.4));
}
.ring__inner { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 7 }
.ring__core-disc { fill: none; stroke: var(--line); stroke-width: 1 }
.ring__core-t1, .ring__core-t2 {
  font-family: var(--font-display); text-anchor: middle; fill: var(--fg-2);
  font-size: 15px; letter-spacing: 2.4px;
}
.ring__core-t2 { fill: var(--fg-3); font-size: 11px }
.ring__particles circle { fill: var(--lime); opacity: .5 }
.ring__particles { transform-origin: 280px 280px; animation: spin 30s linear infinite }

.node { cursor: pointer }
.node circle { fill: var(--bg); stroke: var(--line); stroke-width: 1; transition: fill .5s var(--ease), stroke .5s var(--ease), r .5s var(--ease) }
.node text {
  font-family: var(--font-display); font-size: 13px; text-anchor: middle;
  fill: var(--fg-3); transition: fill .4s
}
.node:hover circle { stroke: var(--lime) }
.node.is-active circle { fill: var(--lime); stroke: var(--lime) }
.node.is-active text { fill: var(--forest) }

.circ__list { display: grid; gap: 0 }
.cstage {
  padding: clamp(22px, 2.6vw, 34px) 0;
  border-bottom: 1px solid var(--line-2);
  display: grid; grid-template-columns: 56px 1fr; gap: 4px 18px;
  opacity: .38; transition: opacity .6s var(--ease);
  cursor: pointer;
}
.cstage.is-active { opacity: 1 }
.cstage__n {
  grid-row: span 2;
  font-family: var(--font-display); font-size: .8rem; letter-spacing: .12em;
  color: var(--accent); padding-top: 6px;
}
.cstage__t { font-family: var(--font-display); font-size: clamp(1.15rem, 1.9vw, 1.7rem); letter-spacing: -.02em; color: var(--fg) }
.cstage__d { font-size: 1rem; line-height: 1.68; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .7s var(--ease), opacity .5s var(--ease), margin .5s }
.cstage.is-active .cstage__d { max-height: 320px; opacity: 1; margin-top: 10px }

/* ── 11. PROCESS ─────────────────────────────────────────────────────────── */
.proc { padding: var(--sec-y) 0; background: var(--bg) }
.proc__head { display: grid; gap: clamp(18px, 2.4vw, 30px); margin-bottom: clamp(44px, 6vw, 90px) }
.proc__pin {
  max-width: var(--max); margin-inline: auto; padding-inline: var(--pad-x);
  display: grid; grid-template-columns: 46% 1fr; gap: clamp(30px, 5vw, 84px); align-items: start;
}
.proc__media {
  position: sticky; top: calc(var(--nav-h) + 5vh);
  aspect-ratio: 4/4.4; border-radius: 3px; overflow: hidden;
  background: var(--stone);
}
.proc__img {
  position: absolute; inset: 0; opacity: 0;
  transform: scale(1.06);
  transition: opacity 1s var(--ease), transform 1.6s var(--ease);
}
.proc__img.is-active { opacity: 1; transform: scale(1) }
.proc__img img { width: 100%; height: 100%; object-fit: cover }
.proc__media::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 38%; z-index: 1;
  background: linear-gradient(180deg, transparent, rgba(11,23,18,.55));
  pointer-events: none;
}
.proc__bignum {
  position: absolute; left: 22px; bottom: 8px; z-index: 2;
  font-size: clamp(4rem, 9vw, 8.5rem); color: rgba(244,241,232,.96);
  letter-spacing: -.06em; pointer-events: none;
  text-shadow: 0 2px 30px rgba(11,23,18,.65);
}

.proc__steps { display: grid }
.pstep {
  display: grid; grid-template-columns: 62px 1fr; gap: 6px 16px;
  padding: clamp(24px, 3vw, 40px) 0; border-bottom: 1px solid var(--line-2);
  opacity: .4; transition: opacity .6s var(--ease);
}
.pstep.is-active { opacity: 1 }
.pstep__n {
  grid-row: span 2; padding-top: 5px;
  font-family: var(--font-display); font-size: .82rem; letter-spacing: .12em; color: var(--accent);
  position: relative;
}
.pstep__n::after {
  content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 1px;
  background: var(--accent); transition: width .7s var(--ease);
}
.pstep.is-active .pstep__n::after { width: 34px }
.pstep h3 { font-family: var(--font-display); font-size: clamp(1.15rem, 1.9vw, 1.7rem); letter-spacing: -.02em }
.pstep p { font-size: 1rem; line-height: 1.68; max-width: 52ch }

/* ── 12. GLOBAL MARKETS ──────────────────────────────────────────────────── */
.markets { padding: var(--sec-y) 0; background: var(--bg-2) }
.markets__head { display: grid; gap: clamp(18px, 2.4vw, 30px); margin-bottom: clamp(40px, 6vw, 80px) }
.markets__layout { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: start }

.mapwrap { position: relative }
.mapwrap__img { width: 100%; mix-blend-mode: multiply; opacity: .5; filter: grayscale(.35) }
.routes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible }
.routes__paths path {
  fill: none; stroke: var(--green); stroke-width: 1.6; opacity: .5;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
  transition: stroke-dashoffset 1.6s var(--ease-io), opacity .5s;
}
.routes__paths path.is-drawn { stroke-dashoffset: 0 }
.routes__paths path.is-hot { opacity: 1; stroke-width: 2.2 }
.routes__paths .bead { fill: var(--lime-2); r: 3.4 }

.pin { cursor: pointer }
.pin__core { fill: var(--green); transition: fill .4s }
.pin__halo { fill: rgba(31,70,50,.14); transform-origin: center; animation: halo 3.2s var(--ease-io) infinite }
@keyframes halo { 0% { transform: scale(.6); opacity: .9 } 70%,100% { transform: scale(1.5); opacity: 0 } }
.pin text {
  font-family: var(--font-display); font-size: 13px; font-weight: 500;
  letter-spacing: 1.6px; text-anchor: middle; fill: var(--fg-2);
  transition: fill .4s;
}
.pin--origin .pin__core { fill: var(--forest); r: 6 }
.pin--origin text { fill: var(--forest); font-weight: 600 }
.pin.is-active .pin__core, .pin:hover .pin__core { fill: var(--lime-2) }
.pin.is-active text, .pin:hover text { fill: var(--fg) }

.mapwrap__legend { display: flex; flex-wrap: wrap; gap: 22px; margin-top: var(--s-3); color: var(--fg-3) }
.mapwrap__legend li { display: flex; align-items: center; gap: 8px }
.sw { width: 14px; height: 2px; background: var(--green); border-radius: 2px }
.sw--origin { width: 8px; height: 8px; border-radius: 50%; background: var(--forest) }
.sw--node { width: 8px; height: 8px; border-radius: 50%; background: var(--lime-2) }

.mpanel {
  background: var(--surface); border: 1px solid var(--line-2);
  padding: clamp(24px, 2.6vw, 40px); border-radius: 3px;
  display: grid; gap: 12px;
}
.mpanel__title { font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2.2rem); letter-spacing: -.025em }
.mpanel__desc { font-size: 1rem; line-height: 1.7; min-height: 8.5em }
.mpanel__sub { margin-top: 6px; color: var(--fg-3) }
.mpanel__list { display: flex; flex-wrap: wrap; gap: 8px }
.mpanel__list li {
  font-family: var(--font-display); font-size: .75rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--fg-2);
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px;
}
.mpanel__nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-2) }
.mtab {
  font-family: var(--font-display); font-size: .76rem; font-weight: 500;
  letter-spacing: .1em; color: var(--fg-3);
  padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px;
  transition: color .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease);
}
.mtab:hover { color: var(--fg); border-color: var(--fg-3) }
.mtab.is-active { background: var(--green); border-color: var(--green); color: var(--ivory) }

/* ── 13. OEM ─────────────────────────────────────────────────────────────── */
.oem { padding: var(--sec-y) 0 }
.oem__head { display: grid; gap: clamp(18px, 2.4vw, 30px); margin-bottom: clamp(44px, 6vw, 90px); max-width: 74ch }
.oem__layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 84px); align-items: start }

.oem__visual { position: sticky; top: calc(var(--nav-h) + 5vh) }
.oem__frame {
  position: relative; aspect-ratio: 1; border-radius: 3px; overflow: hidden;
  border: 1px solid var(--line);
}
.oem__frame img { width: 100%; height: 100%; object-fit: cover; transition: filter 1s var(--ease), transform 1.4s var(--ease) }
.oem__frame.stage-0 img { filter: grayscale(.75) contrast(.95) }
.oem__frame.stage-1 img { filter: grayscale(.5) }
.oem__frame.stage-2 img { filter: grayscale(.3) }
.oem__frame.stage-3 img { filter: grayscale(.15) saturate(1.05) }
.oem__frame.stage-4 img { filter: none; transform: scale(1.04) }
.oem__scan {
  position: absolute; left: 0; right: 0; height: 32%;
  background: linear-gradient(180deg, transparent, rgba(200,228,92,.16), transparent);
  animation: scan 5.5s var(--ease-io) infinite;
  pointer-events: none;
}
@keyframes scan { 0% { transform: translateY(-120%) } 100% { transform: translateY(420%) } }
.oem__plate {
  position: absolute; left: 16px; bottom: 16px; right: 16px;
  display: flex; align-items: baseline; gap: 12px;
  padding: 13px 18px; border-radius: 2px;
  background: rgba(11,23,18,.72); backdrop-filter: blur(8px);
  border: 1px solid rgba(239,237,227,.16);
}
.oem__plate-k {
  font-family: var(--font-display); font-size: .75rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(239,237,227,.5);
}
.oem__plate-v { font-family: var(--font-display); font-size: 1rem; color: var(--lime); letter-spacing: .02em }

.oem__rail { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-2) }
.oem__rail li {
  font-family: var(--font-display); font-size: .75rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3);
  padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px;
  transition: color .4s, border-color .4s, background-color .4s;
}
.oem__rail li.is-active { color: var(--forest); background: var(--lime); border-color: var(--lime) }

.oem__list { display: grid }
.ostep { border-bottom: 1px solid var(--line-2) }
.ostep__btn {
  width: 100%; display: grid; grid-template-columns: 54px 1fr auto;
  align-items: center; gap: 16px; text-align: left;
  padding: clamp(20px, 2.4vw, 30px) 0;
}
.ostep__n { font-family: var(--font-display); font-size: .8rem; letter-spacing: .12em; color: var(--accent) }
.ostep__t { font-family: var(--font-display); font-size: clamp(1.1rem, 1.8vw, 1.6rem); letter-spacing: -.02em; color: var(--fg); opacity: .55; transition: opacity .5s var(--ease) }
.ostep.is-active .ostep__t { opacity: 1 }
.ostep__ico { font-size: 1.1rem; color: var(--fg-3); transition: transform .5s var(--ease), color .4s }
.ostep.is-active .ostep__ico { transform: rotate(135deg); color: var(--accent) }
.ostep__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .65s var(--ease) }
.ostep.is-active .ostep__body { grid-template-rows: 1fr }
.ostep__body > p { overflow: hidden; font-size: 1rem; line-height: 1.7; padding-left: 70px; max-width: 56ch }
.ostep.is-active .ostep__body > p { padding-bottom: clamp(18px, 2vw, 26px) }
.oem__cta { padding-top: clamp(26px, 3vw, 40px) }

/* ── 14. WHY / TRUST ─────────────────────────────────────────────────────── */
.why { padding: var(--sec-y) 0; background: var(--bg) }
.why__head { display: grid; gap: clamp(18px, 2.4vw, 30px); margin-bottom: clamp(40px, 6vw, 80px) }
.why__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line); border-block: 1px solid var(--line);
}
.wcell {
  background: var(--bg); padding: clamp(26px, 3vw, 48px);
  display: grid; align-content: start; gap: 12px;
  transition: background-color .6s var(--ease);
}
.wcell:hover { background: var(--surface) }
.wcell h3 { font-family: var(--font-display); font-size: clamp(1.05rem, 1.5vw, 1.35rem); letter-spacing: -.015em }
.wcell p { font-size: .95rem; line-height: 1.66 }
.wcell--wide { grid-column: span 2; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 48px); align-items: center }
.wcell__big {
  font-size: clamp(2.2rem, 4.4vw, 4.4rem); line-height: .88;
  color: var(--fg); letter-spacing: -.045em;
}
.wcell__txt { display: grid; gap: 10px; align-content: center }
.wcell--dark { background: var(--forest); color: var(--ivory) }
.wcell--dark:hover { background: var(--forest-2) }
.wcell--dark h3 { color: var(--ivory) }
.wcell--dark p { color: rgba(239,237,227,.68) }
.wcell--dark .wcell__big { color: var(--lime) }
.wcell--img .wcell__media { border-radius: 2px; overflow: hidden; aspect-ratio: 16/10 }
.wcell--img .wcell__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease) }
.wcell--img:hover .wcell__media img { transform: scale(1.05) }

.trust { padding: 0 0 var(--sec-y); background: var(--bg) }
.trust__layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: clamp(30px, 5vw, 80px); margin-top: clamp(28px, 4vw, 52px) }
.trust__head { align-self: start; position: sticky; top: calc(var(--nav-h) + 8vh) }
.trust__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line) }
.trust__grid li { background: var(--bg); padding: clamp(22px, 2.4vw, 34px); display: grid; gap: 8px; align-content: start }
.trust__k { font-family: var(--font-display); font-size: .75rem; letter-spacing: .18em; color: var(--accent) }
.trust__v { font-family: var(--font-display); font-size: clamp(1rem, 1.4vw, 1.2rem); letter-spacing: -.01em; color: var(--fg) }
.trust__d { font-size: .92rem; line-height: 1.6; color: var(--fg-3) }

/* ── 15. CTA / CONTACT / FOOTER ──────────────────────────────────────────── */
.cta { position: relative; isolation: isolate; padding: clamp(100px, 17vh, 220px) 0; overflow: hidden; text-align: center }
.cta::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 45%, rgba(31,70,50,.55), transparent 70%);
}
.cta__orbit {
  position: absolute; z-index: -1; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(115vw, 900px); aspect-ratio: 1; opacity: .5; pointer-events: none;
}
.cta__inner { display: grid; justify-items: center; gap: clamp(20px, 3vw, 36px) }
.cta .display { max-width: 18ch }
.cta .lead { color: rgba(239,237,227,.72) }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center }

.contact { padding: var(--sec-y) 0; background: var(--bg-2) }
.contact__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(36px, 5vw, 84px); align-items: start }
.contact__left { display: grid; gap: clamp(22px, 3vw, 38px) }
.cdetails { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); padding-top: var(--s-3); border-top: 1px solid var(--line) }
.cdetail__v { font-size: .98rem; line-height: 1.85; color: var(--fg-2); margin-top: 10px }
.cdetail__v strong { color: var(--fg); font-weight: 500 }
.cdetail__v a { border-bottom: 1px solid var(--line); transition: color .3s, border-color .3s }
.cdetail__v a:hover { color: var(--accent); border-color: var(--accent) }
.cmap { border: 1px solid var(--line); border-radius: 3px; overflow: hidden; height: clamp(200px, 30vh, 300px) }
.cmap iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.85) contrast(1.05); transition: filter .6s var(--ease) }
.cmap:hover iframe { filter: grayscale(0) }

.form {
  display: grid; gap: clamp(16px, 2vw, 24px);
  background: var(--surface); border: 1px solid var(--line-2);
  padding: clamp(24px, 3vw, 48px); border-radius: 3px;
}
.form__kicker { color: var(--fg-3) }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 24px) }
.field { display: grid; gap: 8px; min-width: 0 }
.field__label {
  font-family: var(--font-display); font-size: .75rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3);
}
.field__label b { color: var(--accent); font-weight: 500 }
.field__input {
  width: 100%; background: transparent; color: var(--fg);
  border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; padding: 13px 0; font-size: 1rem;
  transition: border-color .4s var(--ease);
  min-height: 46px;
}
textarea.field__input { resize: vertical; min-height: 104px; line-height: 1.6 }
.field__input::placeholder { color: var(--fg-3); opacity: .7 }
.field__input:focus { outline: none; border-bottom-color: var(--accent) }
.field__input:focus-visible { outline: none }
.field:focus-within .field__label { color: var(--accent) }
.field__select { position: relative; display: grid }
.field__select select { appearance: none; cursor: pointer; padding-right: 28px }
.field__select .ico { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 1.1rem; color: var(--fg-3) }
.field__hint { font-size: .82rem; color: var(--fg-3) }
.field__err { font-size: .84rem; color: #9B2C1E; display: none }
.field.has-error .field__err { display: block }
.field.has-error .field__input { border-bottom-color: #9B2C1E }

.filedrop {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 16px 18px; min-height: 56px;
  border: 1px dashed var(--line); border-radius: 3px;
  color: var(--fg-3); font-size: .92rem;
  transition: border-color .4s var(--ease), color .4s var(--ease), background-color .4s var(--ease);
}
.filedrop:hover { border-color: var(--accent); color: var(--fg-2); background: rgba(31,70,50,.03) }
.filedrop .ico { font-size: 1.15rem }
#attachment:focus-visible + .filedrop, .filedrop:focus-within { outline: 2px solid var(--accent); outline-offset: 3px }

.form__status {
  display: none; padding: 15px 18px; font-size: .94rem; line-height: 1.6;
  border: 1px solid var(--line); border-left-width: 3px; border-radius: 2px;
  background: rgba(31,70,50,.04); color: var(--fg-2);
}
.form__status.is-on { display: block }
.form__status.is-ok { border-left-color: var(--green); background: rgba(31,70,50,.07); color: var(--fg) }
.form__status.is-err { border-left-color: #9B2C1E; background: rgba(155,44,30,.06); color: #7A2317 }
.form__status ul { margin: 8px 0 0 18px; list-style: disc }
.form__status a { text-decoration: underline }

/* Footer */
.foot { padding: clamp(56px, 8vw, 110px) 0 32px }
.foot__top { display: grid; gap: 14px; padding-bottom: clamp(32px, 5vw, 60px); border-bottom: 1px solid var(--line) }
.foot__mark {
  width: clamp(56px, 6vw, 76px); height: auto; padding: 10px;
  object-fit: contain; border-radius: 50%;
  background: var(--paper); justify-self: start; margin-bottom: 6px;
}
.foot__word {
  font-size: clamp(2.6rem, 12vw, 11rem); line-height: .85;
  letter-spacing: -.05em; color: var(--ivory);
  display: block;
}
.foot__word span { color: rgba(239,237,227,.32); margin-left: .12em }
.foot__tag { font-size: clamp(.95rem, 1.6vw, 1.2rem); color: var(--lime); font-weight: 300; font-style: italic }

.foot__grid {
  display: grid; grid-template-columns: 1.5fr repeat(3, 1fr) 1.3fr;
  gap: clamp(24px, 3vw, 48px); padding: clamp(36px, 5vw, 64px) 0;
}
.foot__col { display: grid; gap: 14px; align-content: start }
.foot__col p, .foot__col address { font-size: .92rem; line-height: 1.85; color: var(--fg-2); font-style: normal }
.foot__links { display: grid; gap: 9px }
.foot__links a, .foot__col address a {
  font-size: .92rem; color: var(--fg-2);
  transition: color .3s var(--ease), padding-left .3s var(--ease);
}
.foot__links a:hover { color: var(--lime); padding-left: 6px }
.foot__col address a:hover { color: var(--lime) }
.foot__social { display: flex; gap: 10px; margin-top: 6px }
.foot__social a {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--line); border-radius: 50%; color: var(--fg-2);
  transition: color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.foot__social a:hover { color: var(--lime); border-color: var(--lime); transform: translateY(-3px) }
.foot__social .ico { font-size: 1.05rem }

.foot__bar {
  display: flex; flex-wrap: wrap; gap: 14px 24px; justify-content: space-between; align-items: center;
  padding-top: 26px; border-top: 1px solid var(--line);
}
.foot__bar p { font-size: .85rem; color: var(--fg-3) }
.foot__stamps { display: flex; flex-wrap: wrap; gap: 10px 18px; color: var(--fg-3) }
.foot__stamps li { display: flex; align-items: center; gap: 10px }
.foot__stamps li + li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--lime); opacity: .6 }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .nav__links { display: none }
  .burger { display: block }
  .nav__cta { display: none }
  .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .foot__col--contact { grid-column: span 2 }
}

@media (max-width: 1000px) {
  :root { --nav-h: 68px }
  .statement__body { grid-template-columns: 1fr; gap: var(--s-4) }
  .impact__row { grid-template-columns: 1fr 1fr }
  .impact__item { border-bottom: 1px solid var(--line); padding-right: clamp(14px, 3vw, 26px) }
  .impact__item:nth-child(2n) { border-right: 0 }
  .impact__item:nth-last-child(-n+2) { border-bottom: 0 }
  .circ__layout, .proc__pin, .oem__layout, .markets__layout, .contact__grid, .trust__layout {
    grid-template-columns: 1fr;
  }
  .circ__stage, .oem__visual, .trust__head { position: static }
  .circ__stage { max-width: 460px; margin-inline: auto }
  .proc__media { position: sticky; top: calc(var(--nav-h) + 8px); aspect-ratio: 16/10; margin-bottom: var(--s-3) }
  .proc__bignum { font-size: clamp(3rem, 14vw, 5rem) }
  .why__grid { grid-template-columns: 1fr 1fr }
  .wcell--wide { grid-column: span 2 }
  .oem__frame { aspect-ratio: 16/11 }
}

@media (max-width: 860px) {
  .products__pin { overflow: visible }
  .products__track {
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 8px; transform: none !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .products__track::-webkit-scrollbar { display: none }
  .pcard { width: min(78vw, 340px); scroll-snap-align: center }
  .products__progress { display: none }
  .hero__orbit { top: auto; bottom: 12%; right: -22%; opacity: .35 }
  .hero__meta { grid-template-columns: 1fr; gap: 14px }
  .hero__scroll { display: none }
  .cdetails { grid-template-columns: 1fr }
  .trust__grid { grid-template-columns: 1fr }
  .foot__grid { grid-template-columns: 1fr 1fr }
  .foot__col--about, .foot__col--contact { grid-column: span 2 }
}

/* Touch: give inline text links a comfortable tap area on small screens */
@media (max-width: 860px), (pointer: coarse) {
  .foot__links { gap: 2px }
  .foot__links a { display: inline-block; padding: 9px 0 }
  .foot__col address a { display: inline-block; padding: 6px 0 }
  .cdetail__v a { display: inline-block; padding: 5px 0 }
  .link { padding: 10px 0 6px }
  .mtab { padding: 12px 18px }
  .foot__social a { width: 46px; height: 46px }
}

@media (max-width: 640px) {
  .why__grid, .impact__row { grid-template-columns: 1fr }
  .wcell--wide { grid-column: span 1; grid-template-columns: 1fr }
  .wcell--img { grid-template-columns: 1fr }
  .impact__item { border-right: 0 }
  .form__row { grid-template-columns: 1fr }
  /* square container = square source, so the whole frame survives on phones */
  .statement__figure picture { aspect-ratio: 1 / 1; max-height: none }
  .cstage { grid-template-columns: 42px 1fr }
  .pstep { grid-template-columns: 46px 1fr }
  .ostep__btn { grid-template-columns: 42px 1fr auto; gap: 10px }
  .ostep__body > p { padding-left: 52px }
  .btn { padding: 1em 1.4em; font-size: .76rem }
  .brand__mark { width: 36px; height: 36px; padding: 5px }
  .brand__word { font-size: .92rem }
  .foot__bar { flex-direction: column; align-items: flex-start }
}

/* ── REDUCED MOTION ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-lines] .line > span { opacity: 1 !important; transform: none !important }
  [data-words] .w { opacity: 1 !important }
  .grain, .oem__scan, .hero__scroll-line i { display: none }
  .hero__slide img { animation: none; transform: scale(1) }
  .cursor { display: none }
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: auto }
}