html { scroll-behavior: smooth; scroll-padding-top: 6rem; }

  @keyframes cardFadeUp { from { transform: translateY(16px); } to { transform: translateY(0); } }
  .animate-card-up { animation: cardFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }

  /* Scroll fade-in: classes are added by JS, so without JS everything stays visible */
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--d, 0s); }
  .reveal.in { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
    .animate-card-up { animation: none; }
  }

  .glass-header { background: rgba(244, 247, 245, 0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

  /* Platform accordion: open item gets a heavier rule; screenshots sit on a rounded tinted stage */
  .acc-row { position: relative; border-top: 1px solid transparent; transition: border-color .3s; }
  .acc-row::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; will-change: transform; background: #0b1310; pointer-events: none; }
  .acc-row:has(.acc-btn[aria-expanded="true"])::before { animation: acc-fill var(--acc-dur, 8s) linear forwards; }
  @media (min-width: 1024px) { .acc-col { grid-column: span 4 / span 4; } .preview-col { grid-column: span 8 / span 8; } }
  /* First platform item: two polaroids, the farm photo underneath and South America on top, corners overlapping */
  .sa-pair { position: relative; width: 100%; height: 380px; }
  .sa-polaroid { position: absolute; margin: 0; background: #fff; padding: 9px 9px 34px; border-radius: 3px; box-shadow: 0 1px 2px rgba(11, 19, 16, .12), 0 18px 34px -14px rgba(11, 19, 16, .45); }
  html.dark .sa-polaroid { background: #f1ede4; }
  .sa-p1 { left: 0; top: 0; width: 72%; transform: rotate(-3deg); z-index: 1; }
  .sa-p3 { right: 0; top: 3%; width: 42%; transform: rotate(4deg); z-index: 1; }
  .sa-p2 { left: 22%; bottom: -2%; width: 56%; transform: rotate(2deg); z-index: 2; }
  .sa-p2 .sa-tilt { aspect-ratio: 4 / 3; align-items: center; }
  .preview-stage .sa-photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 62%; border-radius: 1px; box-shadow: none; }
  /* The ocean: deep water that lightens toward the coast, a faint graticule lying flat with the map, and a vignette */
  .sa-tilt { position: relative; width: 100%; aspect-ratio: 1 / 1.05; overflow: hidden; display: flex; justify-content: center; align-items: flex-end; perspective: 700px; background: radial-gradient(120% 90% at 50% 55%, #b9dcf0 0%, #8fc3e3 60%, #6aa8d2 100%); }
  .sa-tilt::before { content: ""; position: absolute; left: -35%; right: -35%; top: -40%; bottom: 0; transform: rotateX(34deg); transform-origin: 50% 100%; background-image: linear-gradient(rgba(255, 255, 255, .38) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .38) 1px, transparent 1px); background-size: 30px 30px; -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 92%); mask-image: linear-gradient(to top, #000 10%, transparent 92%); }
  .sa-tilt::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 36px rgba(8, 31, 71, .28); }
  html.dark .sa-tilt { background: radial-gradient(120% 90% at 50% 55%, #11466b 0%, #0a2f4d 60%, #061b30 100%); }
  html.dark .sa-tilt::before { background-image: linear-gradient(rgba(124, 192, 240, .22) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 192, 240, .22) 1px, transparent 1px); }
  html.dark .sa-tilt::after { box-shadow: inset 0 0 40px rgba(0, 0, 0, .5); }
  .sa-shelf { fill: #e9f7fb; stroke: #e9f7fb; stroke-width: 44; stroke-linejoin: round; opacity: .55; filter: url(#sa-blur); }
  html.dark .sa-shelf { fill: #2f8fc4; stroke: #2f8fc4; opacity: .5; }
  @media (min-width: 640px) { .sa-pair { height: 460px; } .sa-polaroid { padding: 12px 12px 48px; } .sa-p1 { width: 70%; } .sa-p3 { width: 36%; } .sa-p2 { left: 28%; width: 50%; } }
  @media (min-width: 1024px) { .sa-pair { height: 520px; } }
  .sa-svg { position: relative; height: 96%; width: auto; max-width: 96%; overflow: visible; transform: rotateX(34deg); transform-origin: 50% 90%; }
  .sa-svg { --sa-f1: #eaf6f0; --sa-f2: #a6d3c1; --sa-e1: #1769aa; --sa-e2: #047857; }
  .sa-land { fill: url(#sa-fill); stroke: none; }
  .sa-sheen { fill: url(#sa-sheen); stroke: none; }
  .sa-border { fill: none; stroke: #1769aa; stroke-width: 1.3; vector-effect: non-scaling-stroke; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(23, 105, 170, .9)); }
  .sa-coast { fill: none; stroke: url(#sa-edge); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(23, 105, 170, .55)); }
  html.dark .sa-svg { --sa-f1: #17665a; --sa-f2: #0a3a3c; --sa-e1: #7cc0f0; --sa-e2: #34d399; }
  html.dark .sa-sheen { opacity: .35; }
  .sa-dot { fill: #fff; stroke: #1769aa; stroke-width: 5; filter: drop-shadow(0 0 4px rgba(23, 105, 170, .9)); }
  .sa-ring { fill: none; stroke: #1769aa; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: sa-ping 3s ease-out infinite; animation-delay: var(--d, 0s); }
  @keyframes sa-ping { 0% { transform: scale(.8); opacity: .9; } 70%, 100% { transform: scale(3.2); opacity: 0; } }
  html.dark .sa-dot { stroke: #5aaee6; filter: drop-shadow(0 0 5px rgba(124, 192, 240, .95)); }
  html.dark .sa-ring { stroke: #7cc0f0; }
  @media (prefers-reduced-motion: reduce) { .sa-ring { animation: none; } }
  html.dark .sa-border { stroke: #9bd3f5; filter: drop-shadow(0 0 4px rgba(124, 192, 240, .95)); }
  html.dark .sa-coast { filter: drop-shadow(0 0 5px rgba(52, 211, 153, .85)); }
  /* The screenshots in the other items each sit at their own angle */
  .preview-stage > img { rotate: var(--tilt, 0deg); animation: sa-settle .6s ease-out; }
  .preview-stage[data-tone="1"] { --tilt: -2deg; }
  .preview-stage[data-tone="2"] { --tilt: 1.8deg; }
  .preview-stage[data-tone="3"] { --tilt: -1.5deg; }
  .preview-stage[data-tone="4"] { --tilt: 2.4deg; }
  .preview-stage[data-tone="5"] { --tilt: -2.2deg; }
  .preview-stage[data-tone="6"] { --tilt: 1.6deg; }
  .preview-stage[data-tone="7"] { --tilt: -1.8deg; }
  @keyframes sa-settle { from { rotate: calc(var(--tilt, 0deg) * 3); opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .preview-stage > img { animation: none; } }
  /* Benefits: alternating rows, a pair of overlapping screenshots on one side, heading, intro and three short points on the other */
  .vd-rows { margin-top: 4rem; display: flex; flex-direction: column; gap: 4.5rem; }
  @media (min-width: 1024px) { .vd-rows { gap: 6.5rem; } }
  .vd-row { display: grid; gap: 2.5rem; align-items: center; }
  .vd-text h3 { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 600; font-size: clamp(1.75rem, 3.4vw, 2.6rem); line-height: 1.12; letter-spacing: -.01em; color: #0b1310; }
  .vd-intro { margin-top: 1.1rem; font-size: 1.125rem; line-height: 1.6; color: #2c3a35; max-width: 34rem; }
  .vd-text ul { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.5rem; max-width: 34rem; }
  .vd-text li { display: flex; align-items: center; gap: .9rem; }
  .vd-text li p { font-size: .95rem; line-height: 1.5; color: #0b1310; }
  .vd-ico { flex: none; width: 2rem; height: 2rem; color: #0b1310; }
  .vd-media { position: relative; padding-bottom: 14%; }
  .vd-main { display: block; width: 88%; height: auto; border-radius: .75rem; border: 1px solid rgba(11, 19, 16, .08); box-shadow: 0 24px 50px -28px rgba(8, 31, 71, .45); }
  .vd-over { position: absolute; right: 0; bottom: 0; width: 52%; height: auto; border-radius: .6rem; border: 1px solid rgba(11, 19, 16, .08); box-shadow: 0 22px 44px -18px rgba(8, 31, 71, .5); }
  .vd-rev .vd-main { margin-left: auto; }
  .vd-rev .vd-over { right: auto; left: 0; }
  @media (min-width: 1024px) { .vd-row { grid-template-columns: 1fr 1fr; gap: 5rem; } .vd-rev .vd-media { order: -1; } .vd-text { padding-left: 1rem; } .vd-rev .vd-text { padding-left: 0; } }
  html.dark .vd-text h3, html.dark .vd-text li p { color: #f1f5f3; }
  html.dark .vd-intro { color: #b9c6c0; }
  html.dark .vd-ico { color: #e8f1f8; }
  html.dark .vd-main, html.dark .vd-over { border-color: rgba(255, 255, 255, .1); filter: brightness(.9) saturate(.96); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .8); }
  .acc-row.no-fill::before { animation: none !important; }
  #accordion-list.is-paused .acc-row::before, .preview-col.is-paused .sa-ring { animation-play-state: paused; }
  @keyframes acc-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @media (prefers-reduced-motion: reduce) { .acc-row:has(.acc-btn[aria-expanded="true"])::before { animation: none; transform: none; } }
  .acc-row:has(.acc-btn[aria-expanded="true"]) + .acc-row { border-top-color: transparent; }
  .acc-row:hover:not(:has(.acc-btn[aria-expanded="true"])) { box-shadow: inset 0 1px 0 #1769aa; }
  .preview-stage { border-radius: 1rem; overflow: hidden; padding: 1.25rem; background: linear-gradient(145deg, #dcecf7 0%, #c9e3da 100%); display: flex; align-items: center; }
  @media (min-width: 1024px) { .preview-stage { min-height: 560px; padding: 3rem; } }
  .preview-stage img { border-radius: .75rem; box-shadow: 0 24px 48px -24px rgba(8, 31, 71, .45); }
  @media (min-width: 640px) { .preview-stage { padding: 2.5rem; } }
  html.dark .acc-row::before { background: #fff; }
  html.dark .acc-row:hover:not(:has(.acc-btn[aria-expanded="true"])) { box-shadow: inset 0 1px 0 #5aaee6; }
  html.dark .preview-stage { background: linear-gradient(145deg, #12304a 0%, #0f3a33 100%); }

  /* One tint per item */
  .preview-stage[data-tone="0"] { background: linear-gradient(145deg, #dcecf7 0%, #c9e3da 100%); }
  html.dark .preview-stage[data-tone="0"] { background: linear-gradient(145deg, #12304a 0%, #0f3a33 100%); }
  .preview-stage[data-tone="1"] { background: linear-gradient(145deg, #d9e6f7 0%, #c4d6f0 100%); }
  html.dark .preview-stage[data-tone="1"] { background: linear-gradient(145deg, #14294f 0%, #1a3a6b 100%); }
  .preview-stage[data-tone="2"] { background: linear-gradient(145deg, #d6eee3 0%, #bfe3cf 100%); }
  html.dark .preview-stage[data-tone="2"] { background: linear-gradient(145deg, #0f3a2a 0%, #14532d 100%); }
  .preview-stage[data-tone="3"] { background: linear-gradient(145deg, #e3e0f4 0%, #cfcaee 100%); }
  html.dark .preview-stage[data-tone="3"] { background: linear-gradient(145deg, #25214f 0%, #3a3478 100%); }
  .preview-stage[data-tone="4"] { background: linear-gradient(145deg, #d3eceb 0%, #bfe2e0 100%); }
  html.dark .preview-stage[data-tone="4"] { background: linear-gradient(145deg, #0d3b3d 0%, #115e59 100%); }
  .preview-stage[data-tone="5"] { background: linear-gradient(145deg, #ece4d8 0%, #e0d3bf 100%); }
  html.dark .preview-stage[data-tone="5"] { background: linear-gradient(145deg, #3a2f1d 0%, #57452a 100%); }
  .preview-stage[data-tone="6"] { background: linear-gradient(145deg, #dde4ee 0%, #c8d2e0 100%); }
  html.dark .preview-stage[data-tone="6"] { background: linear-gradient(145deg, #1d2a3d 0%, #2e4259 100%); }
  .preview-stage[data-tone="7"] { background: linear-gradient(145deg, #d4efe0 0%, #c2e6ce 100%); }
  html.dark .preview-stage[data-tone="7"] { background: linear-gradient(145deg, #0f3b2d 0%, #166534 100%); }
  .preview-stage { transition: background .5s ease; }
  .acc-btn:hover .acc-title { color: #0b1310; }

  /* Header: a soft shadow once the page scrolls, and the current section's link in the menu */
  #site-header.scrolled { box-shadow: 0 6px 24px -12px rgba(11, 19, 16, 0.18); }
  nav[aria-label="Main"] a[aria-current="true"] { color: #0b1310; box-shadow: inset 0 -2px 0 #1769aa; }

  /* Data sources band: endless scroll, fading at both edges, paused on hover */
  .marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .marquee-track { animation: marquee 70s linear infinite; }
  .marquee:hover .marquee-track, .marquee:focus-within .marquee-track, .marquee.is-stopped .marquee-track { animation-play-state: paused; }
  @media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
    .marquee-group[aria-hidden="true"] { display: none; }
    .marquee-group { flex-wrap: wrap; justify-content: center; row-gap: 1rem; }
  }

  /* FAQ: native <details>, with a rotating plus */
  .faq summary { list-style: none; cursor: pointer; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary .chev { transition: transform .25s ease; }
  .faq details[open] summary .chev { transform: rotate(180deg); }
  .faq details.closing summary .chev { transform: none; }
  .faq details > p { overflow: hidden; }

  /* Pause / play buttons for the parts of the page that move on their own (hidden with reduced motion, where nothing moves) */
  .motion-btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 6px 2px; font-size: 13px; font-weight: 500; opacity: .75; transition: opacity .2s; }
  .motion-btn:hover { opacity: 1; }
  .motion-btn:focus-visible { outline: 2px solid #1769aa; outline-offset: 2px; border-radius: 4px; }
  .motion-btn::before { content: ""; box-sizing: border-box; width: 9px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
  .motion-btn.is-paused::before { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent currentColor; }
  .goods .motion-btn { color: #b9c4c0; margin-top: 14px; }
  @media (prefers-reduced-motion: reduce) { .motion-btn { display: none; } }

  .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: #0b1310; color: #fff; padding: .75rem 1rem; border-radius: 0 0 .5rem 0; }
  .skip-link:focus { left: 0; }

  :focus-visible { outline: 2px solid #1769aa; outline-offset: 2px; }

  /* Soften the globe's edge so it melts into the background */
  .hero-globe { -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 35%, transparent 70%); mask-image: radial-gradient(circle at 50% 50%, #000 35%, transparent 70%); }

  @keyframes cw-pulse { 0% { transform: scale(.92); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }


  /* ---------- Dark theme: html.dark, set by the toggle in the header (or the system setting) ---------- */
  .ti-sun { display: none; }
  html.dark .ti-sun { display: block; }
  html.dark .ti-moon { display: none; }
  html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after {
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease, stroke .35s ease !important; }

  html.dark { color-scheme: dark; }
  html.dark body { background: #08121a; color: #e9f0ee; }
  html.dark .glass-header { background: rgba(8,18,26,.9); }
  html.dark #site-header.scrolled { box-shadow: 0 6px 24px -12px rgba(0,0,0,.7); }
  html.dark nav[aria-label="Main"] a[aria-current="true"] { color: #fff; box-shadow: inset 0 -2px 0 #5aaee6; }
  html.dark :focus-visible { outline-color: #5aaee6; }
  html.dark .acc-btn:hover .acc-title { color: #fff; }

  /* surfaces */
  html.dark .bg-cream { background-color: #08121a; }
  html.dark [class~="bg-cream/50"] { background-color: rgba(255,255,255,.03); }
  html.dark .bg-sand { background-color: #0b1822; }
  html.dark .bg-white { background-color: #0f1d28; }
  html.dark [class~="bg-white/80"] { background-color: rgba(255,255,255,.07); }
  html.dark .bg-emerald-50 { background-color: rgba(16,185,129,.1); }
  html.dark [class~="bg-emerald-900/20"] { background-color: rgba(255,255,255,.2); }
  html.dark [class*="radial-gradient("] { background-image: radial-gradient(circle at 15% 15%, rgba(16,185,129,.16) 0%, rgba(11,24,34,0) 70%), linear-gradient(180deg, #0f1d28, #0c1a24); }

  /* text */
  html.dark .text-ink { color: #e9f0ee; }
  html.dark [class~="text-ink/70"], html.dark [class~="text-ink/80"] { color: rgba(233,240,238,.78); }
  html.dark .text-muted { color: #9fb3ac; }
  html.dark .text-brand { color: #5aaee6; }
  html.dark [class~="text-[#0e1320]"], html.dark [class~="text-[#0a2136]"] { color: #e9f0ee; }
  html.dark [class~="text-[#1d5fc4]"] { color: #5aaee6; }
  html.dark [class~="text-[#2b4152]"] { color: #b4c6c0; }
  html.dark .text-emerald-950 { color: #d1fae5; }
  html.dark [class~="text-emerald-900/80"] { color: rgba(167,243,208,.8); }
  html.dark .text-emerald-700 { color: #34d399; }
  html.dark [class~="hover:text-ink"]:hover { color: #fff; }

  /* buttons: the dark primary button turns light */
  html.dark [class~="bg-[#212121]"] { background-color: #e9f0ee; color: #0b1310; }
  html.dark [class~="bg-[#212121]"]:hover { background-color: #fff; }
  html.dark [class~="hover:bg-black/5"]:hover, html.dark [class~="hover:bg-black/[0.04]"]:hover { background-color: rgba(255,255,255,.07); }

  /* borders */
  html.dark [class~="border-black/5"] { border-color: rgba(255,255,255,.07); }
  html.dark [class~="border-black/[0.06]"], html.dark [class~="border-black/[0.08]"], html.dark [class~="border-black/10"] { border-color: rgba(255,255,255,.1); }
  html.dark [class~="border-black/15"] { border-color: rgba(255,255,255,.16); }
  html.dark [class~="border-emerald-900/10"] { border-color: rgba(255,255,255,.09); }
  html.dark [class~="border-emerald-900/15"] { border-color: rgba(255,255,255,.12); }
  html.dark [class~="divide-emerald-900/10"] > :not([hidden]) ~ :not([hidden]) { border-color: rgba(255,255,255,.09); }

  /* the contact section is dark in both themes: keep its white button and readable select options */
  html.dark #contact .bg-white { background-color: #fff; }
  html.dark #contact .bg-white:hover { background-color: #f1f5f9; }
  html.dark #contact .text-ink { color: #0b1310; }
  html.dark #contact option.text-ink { color: #e9f0ee; background-color: #0f1d28; }

  /* screenshots */
  html.dark figure img, html.dark #preview-graphic img { filter: brightness(.9) saturate(.96); }

  /* Commodities section: always dark. Copy on the left; on the right a large, gentle arc (a slice of a circle of R = 620px) with the main commodities,
     the lit one at its leftmost point, and a big faint icon of the lit commodity. */
  /* the requirements section follows the commodities section (both dark): a hairline between them */
  /* Backgrounds of the two dark sections. Each has its own character: "goods" is emerald (a glow behind the arc, a fine blueprint grid);
     "eudr" is blue (a diagonal deep-navy gradient, a dot lattice, glows in two corners). A thin light line marks where the second begins. */
  .goods { background:
      radial-gradient(ellipse 42% 58% at 86% 50%, rgba(16,185,129,.20), rgba(16,185,129,0) 70%),
      radial-gradient(ellipse 34% 46% at 4% 100%, rgba(90,174,230,.14), rgba(90,174,230,0) 70%),
      radial-gradient(ellipse 30% 34% at 0% 0%, rgba(52,211,153,.07), rgba(52,211,153,0) 70%),
      linear-gradient(180deg, #05111a 0%, #07171f 55%, #061219 100%); }
  .goods::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(ellipse 50% 64% at 84% 50%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse 50% 64% at 84% 50%, #000 0%, transparent 72%); }
  #eudr { background:
      radial-gradient(ellipse 42% 46% at 10% 6%, rgba(59,130,246,.20), rgba(59,130,246,0) 70%),
      radial-gradient(ellipse 38% 50% at 94% 100%, rgba(20,184,166,.16), rgba(20,184,166,0) 70%),
      linear-gradient(165deg, #06101c 0%, #0a1d33 50%, #060e18 100%);
    border-top: 1px solid transparent; border-image: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.16), rgba(255,255,255,0)) 1; }
  #eudr::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.4px); background-size: 28px 28px;
    -webkit-mask-image: linear-gradient(115deg, transparent 18%, #000 62%, transparent 100%); mask-image: linear-gradient(115deg, transparent 18%, #000 62%, transparent 100%); }
  .goods-inner { display: flex; align-items: center; min-height: 820px; }
  /* The text column is wide: up to 700px, shrinking only as far as the arc (anchored to the right edge) needs. --pl is the page's left content edge. */
  .goods { --pl: max(24px, calc((100vw - 1280px) / 2 + 24px)); }
  .goods-copy { width: 100%; max-width: 640px; flex: none; }
  @media (min-width: 1280px) { .goods-copy { max-width: min(700px, calc(100vw - var(--pl) - 733px)); } }
  @media (min-width: 1024px) and (max-width: 1279px) { .goods-copy { max-width: calc(100vw - var(--pl) - 570px); } }
  .goods-accent { color: #7cc0f0; -webkit-text-fill-color: #7cc0f0; background: none; }
  .goods-intro { margin: 30px 0 0; max-width: 100%; font-size: 1rem; line-height: 1.55; color: #b9c4c0; }
  .goods-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 44px; }
  .goods-tab { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 999px; font-size: 14px; color: #b9c4c0;
    border: 1px solid rgba(255,255,255,.14); transition: color .4s, border-color .4s, background-color .4s; }
  @media (min-width: 1024px) { .goods-tab { gap: 7px; padding: 0 10px; font-size: 13px; } }
  .goods-tab i { width: 7px; height: 7px; border-radius: 50%; background: #34d399; opacity: .45; transition: opacity .4s; }
  .goods-tab:hover { color: #fff; }
  .goods-tab[aria-selected="true"] { color: #fff; border-color: #34d399; background: rgba(52,211,153,.12); }
  .goods-tab[aria-selected="true"] i { opacity: 1; }
  .goods-tab:focus-visible { outline: 2px solid #5aaee6; outline-offset: 2px; }
  .goods-panel { margin-top: 60px; min-height: 285px; transition: opacity .35s ease, transform .35s ease; }
  @media (max-width: 639px) { .goods-panel { min-height: 360px; } }
  @media (min-width: 1024px) and (max-width: 1279px) { .goods-panel { min-height: 355px; } }
  .goods-panel.is-out { opacity: 0; transform: translateY(8px); }
  .goods-pane[hidden] { display: none; }
  /* The commodity name is smaller than the section title (which is 36px on phones and 48px above), with its HS codes beside it: "Rubber - HS 4001, 4011..." */
  .goods-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
  .goods-name { margin: 0; font-family: "Space Grotesk", system-ui, sans-serif; font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
  .goods-covers { margin: 20px 0 0; max-width: 100%; font-size: 1.125rem; line-height: 1.45; color: #cdd8d4; }
  .goods-items { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .goods-items li { position: relative; padding-left: 22px; font-size: 1rem; line-height: 1.4; color: #7f8f8a; transition: color .5s; }
  .goods-items li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.25); transition: background-color .5s, box-shadow .5s; }
  .goods-items li.is-lit { color: #e6eeeb; }
  .goods-items li.is-lit::before { background: #34d399; box-shadow: 0 0 10px #34d399; }
  .goods-hs { margin: 0; font-size: 14px; font-weight: 500; color: #8a9b96; }
  /* With the arc visible (1024px and up) the HS codes live under the big icon; here they stay in the page for screen readers only */
  @media (min-width: 1024px) { .goods-hs { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
  @media (min-width: 640px) { .goods-hs::before { content: "\2013"; margin-right: 12px; color: #5d6e69; } }
  .goods-note { margin: 40px 0 0; max-width: 100%; font-size: 12px; line-height: 1.5; color: #5f6f6a; }
  /* The arc is anchored to the section's right edge (and tucked 50px beyond it, so most of the arc shows), vertically centred, so it sits in the corner and leaves the left side to the text */
  .goods-arc { display: none; position: absolute; z-index: 1; top: 50%; right: -50px; width: 760px; height: 700px; margin-top: -350px; pointer-events: none; }
  @media (min-width: 1024px) { .goods-arc { display: block; } }
  @media (min-width: 1024px) and (max-width: 1279px) { .goods-arc { transform: scale(.78); transform-origin: right center; } }
  /* the stage is 760 x 700: the lit node sits at (60, 350) and the circle's centre is R = 620px to its right, at (680, 350) */
  .gz-stage { position: absolute; left: 0; top: 0; width: 760px; height: 700px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 10%, #000 30%, #000 70%, transparent 90%); mask-image: linear-gradient(to bottom, transparent 10%, #000 30%, #000 70%, transparent 90%);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
  .gz-field { position: absolute; left: 60px; top: 0; width: 700px; height: 700px; clip-path: circle(620px at 620px 350px);
    background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1.7px); background-size: 20px 20px;
    -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 70%); mask-image: linear-gradient(to right, #000 0%, transparent 70%); }
  .gz-icon { position: absolute; left: 200px; top: 50%; width: 300px; height: 300px; margin-top: -150px; color: #34d399; stroke-width: .7; opacity: 0; transition: opacity .9s ease; }
  .gz-icon.is-on { opacity: .2; }
  /* HS codes of the selected commodity, centred under the big icon (the icon is centred at 350px across, 350px down; its box ends at 500px) */
  .gz-hs { position: absolute; left: 170px; top: 528px; width: 360px; margin: 0; text-align: center; font-size: 14px; font-weight: 500; line-height: 1.45; letter-spacing: .01em; color: #8fa19b;
    opacity: 0; transform: translateY(6px); transition: opacity .9s ease, transform .9s ease; text-wrap: balance; }
  .gz-hs.is-on { opacity: 1; transform: none; }
  @media (min-width: 1024px) and (max-width: 1279px) { .gz-hs { font-size: 17px; } }
  .gz-track { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .gz-arc { filter: drop-shadow(0 0 6px rgba(52,211,153,.6)); }
  .gz-ring { position: absolute; inset: 0; }
  .gz-node { position: absolute; left: 680px; top: 350px; width: 0; height: 0; transform: rotate(var(--a)) translateX(620px); transition: transform 1.2s cubic-bezier(.65,0,.2,1); }
  .gz-up { position: absolute; left: -28px; top: -28px; width: 56px; height: 56px; transform: rotate(calc(-1 * var(--a))); transition: transform 1.2s cubic-bezier(.65,0,.2,1); }
  .gz-node.no-tr, .gz-node.no-tr .gz-up { transition: none; }
  .gz-bubble { position: relative; width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; color: #6ee7b7; background: #0c1b26; border: 1px solid rgba(255,255,255,.16); opacity: .75;
    transition: transform 1.2s cubic-bezier(.65,0,.2,1), background-color .6s, color .6s, opacity .6s, box-shadow .6s, border-color .6s; }
  .gz-bubble svg { width: 28px; height: 28px; stroke-width: 1.5; }
  .gz-node.is-active .gz-bubble { transform: scale(1.55); background: linear-gradient(135deg, #10b981, #047857); color: #fff; border-color: transparent; opacity: 1; box-shadow: 0 16px 40px -10px rgba(16,185,129,.65); }
  .gz-node.is-active .gz-bubble::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgba(110,231,183,.5); animation: cw-pulse 2.6s ease-out infinite; }
  @media (prefers-reduced-motion: reduce) {
    .gz-node.is-active .gz-bubble::after { animation: none; }
    .gz-node, .gz-up, .gz-bubble, .gz-icon, .goods-panel, .goods-items li, .goods-items li::before, .gz-hs { transition: none; }
  }

  /* Taller hero: fills the first screen below the header (between 780px and 1080px tall), with its content centred vertically */
  .hero-wrap { display: flex; align-items: center; min-height: clamp(780px, calc(100svh - 80px), 1080px); }

  /* Hero background: a calm base, plus a tall column of colour on the right edge (emerald at the top, teal, then sky blue at the bottom, with a
     soft highlight) that dissolves towards the centre so it never reaches the text. Nothing moves. */
  .hero-wrap { background: linear-gradient(180deg, #f4f7f5 0%, #f2f6f4 60%, #edf4f1 100%); }
  .hero-wrap::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 46%; min-width: 420px; pointer-events: none;
    background:
      radial-gradient(ellipse 70% 38% at 78% 18%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%),
      radial-gradient(ellipse 80% 46% at 100% 50%, rgba(20,184,166,.12), rgba(20,184,166,0) 72%),
      linear-gradient(180deg, rgba(16,185,129,.09) 0%, rgba(34,197,170,.15) 40%, rgba(56,189,248,.28) 100%);
    -webkit-mask-image: linear-gradient(to left, #000 0%, #000 34%, rgba(0,0,0,.5) 66%, transparent 100%);
    mask-image: linear-gradient(to left, #000 0%, #000 34%, rgba(0,0,0,.5) 66%, transparent 100%); }
  html.dark .hero-wrap { background: linear-gradient(180deg, #08121a 0%, #09151c 100%); }
  html.dark .hero-wrap::before {
    background:
      radial-gradient(ellipse 70% 38% at 78% 18%, rgba(110,231,183,.14), rgba(110,231,183,0) 70%),
      radial-gradient(ellipse 80% 46% at 100% 50%, rgba(20,184,166,.12), rgba(20,184,166,0) 72%),
      linear-gradient(180deg, rgba(16,185,129,.10) 0%, rgba(34,197,170,.14) 40%, rgba(56,189,248,.26) 100%); }
  @media (max-width: 767px) { .hero-wrap::before { width: 70%; min-width: 0;
      -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,.8) 0%, rgba(0,0,0,.35) 50%, transparent 100%); mask-image: linear-gradient(to left, rgba(0,0,0,.8) 0%, rgba(0,0,0,.35) 50%, transparent 100%); } }

  /* ---------- Hero styling ---------- */
  .hero-wrap > .hero-globe, .hero-wrap > section { z-index: 1; }
  .hero-wrap::before { z-index: 0; }
  /* a very fine grain over the gradient: paper-like texture, no colour banding */
  .hero-wrap::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .11; 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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; }
  html.dark .hero-wrap::after { opacity: .1; 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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

  .rise { animation: cardFadeUp .9s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: var(--d, 0s); }
  @media (prefers-reduced-motion: reduce) { .rise { animation: none; } }

  .hero-title { letter-spacing: -.035em; text-wrap: balance; }
  .hero-accent { color: #1769aa; -webkit-text-fill-color: #1769aa; background: none; padding-bottom: .06em; }
  html.dark .hero-accent { color: #7cc0f0; -webkit-text-fill-color: #7cc0f0; background: none; }
  .hero-lead { text-wrap: balance; }
  .hero-lead strong { font-weight: 600; color: #0b1310; }
  html.dark .hero-lead strong { color: #e9f0ee; }

  /* Hero text in deep navy (light theme): the headline fades from a very dark navy to a slightly brighter one, the supporting text is a slate blue */
  .hero-title { background: linear-gradient(176deg, #04112b 8%, #081f47 60%, #0d2d5e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .hero-title .hero-accent { background: none; }
  .hero-lead { color: #243a5c; }
  .hero-lead strong { color: #06173a; }
  .hero-points { color: #243a5c; border-top-color: rgba(6,23,58,.14); }
  .hero-wrap .btn-ghost { color: #06173a; border-color: rgba(6,23,58,.24); }
  .hero-wrap .btn-ghost:hover { border-color: rgba(23,105,170,.55); }
  html.dark .hero-title { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #e9f0ee; }
  html.dark .hero-title .hero-accent { color: #7cc0f0; -webkit-text-fill-color: #7cc0f0; background: none; }
  html.dark .hero-lead { color: #9fb3ac; }
  html.dark .hero-lead strong { color: #e9f0ee; }
  html.dark .hero-points { color: #9fb3ac; border-top-color: rgba(255,255,255,.1); }
  html.dark .hero-wrap .btn-ghost { color: #e9f0ee; border-color: rgba(255,255,255,.18); }

  /* buttons */
  .btn-primary { color: #fff; background: linear-gradient(180deg, #2b2b2b, #161616); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 14px 28px -12px rgba(11,19,16,.55), 0 2px 4px rgba(11,19,16,.2);
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 18px 34px -12px rgba(11,19,16,.6), 0 2px 4px rgba(11,19,16,.2); }
  .btn-primary svg { width: 16px; height: 16px; transition: transform .25s ease; }
  .btn-primary:hover svg { transform: translateX(4px); }
  .btn-ghost { color: #0b1310; background: rgba(255,255,255,.6); border: 1px solid rgba(11,19,16,.14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: border-color .25s ease, background-color .25s ease, transform .25s ease; }
  .btn-ghost:hover { background: rgba(255,255,255,.9); border-color: rgba(23,105,170,.45); transform: translateY(-2px); }
  .btn-primary:focus-visible, .btn-ghost:focus-visible { outline: 2px solid #1769aa; outline-offset: 3px; }
  html.dark .btn-primary { color: #0b1310; background: linear-gradient(180deg, #ffffff, #dfe8e5); box-shadow: inset 0 1px 0 #fff, 0 14px 30px -12px rgba(0,0,0,.7); }
  html.dark .btn-ghost { color: #e9f0ee; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.18); }
  html.dark .btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(90,174,230,.6); }

/* Moved out of inline style attributes */
.hero-globe canvas { position: absolute; inset: 0; }
#sa-fill stop:first-child { stop-color: var(--sa-f1); }
#sa-fill stop:last-child { stop-color: var(--sa-f2); }
#sa-edge stop:first-child { stop-color: var(--sa-e1); }
#sa-edge stop:last-child { stop-color: var(--sa-e2); }