/* ============================================================
   Brand layer — matches the Proof of Grass, WAGO Drops and Harvest apps.
   Loaded after style.css. To see the previous look, remove the
   <link rel="stylesheet" href="brand.css"> line in index.html.
   Palette/type mirror Proofofgrass utils/v2Theme.js.
   ============================================================ */

:root {
  --font-serif: 'Fredoka', 'Nunito', system-ui, sans-serif;   /* playful rounded display face (name kept for the existing rules) */
  --font-sans: 'Nunito', 'DM Sans', system-ui, sans-serif;     /* rounded, friendly body face */

  --sky: #e8f4fd;
  --sky-mid: #c5e3f7;
  --sky-deep: #a8d4f0;
  --lime: #7dc832;
  --lime-dark: #5ba622;
  --grass-deep: #3d7a12;
  --forest: #0d2a05;
  --forest-mid: #1a4a0a;
  --forest-light: #2d5a1a;
  --gold: #e8a020;
  --gold-light: #f5c04a;
  --gold-soft: #fef3d8;
  --off-white: #f8fbf5;

  --grad-sky: linear-gradient(180deg, #c5e3f7 0%, #e8f4fd 40%, #f0f8ee 100%);
  --grad-lime: linear-gradient(135deg, #7dc832 0%, #5ba622 100%);
  --grad-gold: linear-gradient(135deg, #f5c04a 0%, #e8a020 100%);
  --grad-forest: linear-gradient(180deg, #1a4a0a 0%, #0d2a05 100%);
  --shadow-card: 0 2px 16px rgba(26,74,10,0.10), 0 1px 4px rgba(26,74,10,0.06);
  --shadow-glow: 0 0 24px rgba(125,200,50,0.3);

  --text-dark: var(--forest);
  --text-mid: var(--forest-light);
  --grass: var(--lime-dark);
}

body { font-family: var(--font-sans); font-weight: 500; }

/* ── Type: serif display, sans body ── */
.section-title,
.nav-logo,
.footer-logo,
.hero-tagline,
.mission-card h3, .eco-card h3, .comm-card h3, .rm-content h3, .buy-card h3,
.clicker-count span, .grass-touch-text {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0;
}
.section-title { font-size: clamp(2.1rem, 5.4vw, 3.3rem); line-height: 1.1; }
.hero-tagline { font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.15; }
.nav-logo { font-size: 1.35rem; }
.footer-logo { font-size: 1.7rem; }
.mission-card h3, .eco-card h3, .comm-card h3, .rm-content h3, .buy-card h3 { font-size: 1.25rem; line-height: 1.2; }
.clicker-count span { font-variant-numeric: lining-nums tabular-nums; }

/* labels and buttons use the rounded body face */
.pill-label, .eco-num, .eco-chain, .rm-content .quarter,
.btn-mint, .btn-collection, .copy-btn, .buy-btn, .pog-btn, .nav-wallet,
.clicker-reset, .clicker-count small, .touch-pop, .site-preloader {
  font-family: var(--font-sans);
}

/* ── Nav: frosted white like the app nav ── */
nav {
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 2px 16px rgba(26,74,10,0.10);
}
.nav-links a { color: var(--forest); font-weight: 600; }
.nav-links a:hover { color: var(--lime-dark); }
.nav-wallet { background: var(--grad-lime); box-shadow: var(--shadow-glow); font-weight: 700; }

/* ── Buttons: lime gradient w/ glow, gold secondary ── */
.btn-mint, .pog-btn, .buy-btn {
  background: var(--grad-lime);
  box-shadow: var(--shadow-glow);
  font-weight: 700; letter-spacing: 0.02em;
}
.btn-mint:hover, .pog-btn:hover { box-shadow: 0 0 32px rgba(125,200,50,0.45); }
.btn-collection {
  background: rgba(255,255,255,0.8);
  color: var(--forest);
  border: 1.5px solid rgba(125,200,50,0.4);
  font-weight: 700;
}
.copy-btn { background: var(--grad-lime); color: #fff; border: none; text-shadow: none; }
.copy-btn.copied { background: var(--grass-deep); }
.ca-box { background: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.7); }
.ca-box label { color: var(--forest-light); }
.pill-label { background: var(--grad-lime); letter-spacing: 0.12em; box-shadow: var(--shadow-glow); }

/* ── Light sections → sky/off-white; dark → forest ── */
#about, #touch-counter, #community, #apps { background: var(--grad-sky); }
#ecosystem, #roadmap { background: var(--grad-forest); }
#buy { background: linear-gradient(135deg, #0d2a05, #1a4a0a); }
footer { background: #081a03; }
.section-sub { color: var(--forest-light); font-size: 1.05rem; }
#ecosystem .section-sub, #roadmap .section-sub, #buy .section-sub { color: rgba(240,239,234,0.75); }
#ecosystem .section-title, #roadmap .section-title, #buy .section-title { color: #f0efea; }
#about .section-title, #touch-counter .section-title, #community .section-title, #apps .section-title { color: var(--forest) !important; }

/* ── Cards: glass white on light, forest on dark ── */
.mission-card, .comm-card, .clicker-count {
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 20px;
}
.mission-card p, .comm-card p { color: var(--forest-light); }
.mission-card h3, .comm-card h3 { color: var(--forest); }
.clicker-count small { color: var(--lime-dark); }
.clicker-reset { border: 1.5px solid rgba(125,200,50,0.4); background: rgba(255,255,255,0.8); color: var(--forest); }
.clicker-reset:hover { border-color: var(--lime-dark); }
.grass-patch { border-radius: 24px; }

.eco-card, .buy-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(125,200,50,0.3);
  border-radius: 20px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.25);
}
.eco-card:hover, .buy-card:hover { border-color: var(--lime); }
.eco-card h3, .buy-card h3, .rm-content h3 { color: #f0efea; }
.eco-card p, .buy-card p, .rm-content p { color: rgba(240,239,234,0.72); }
.eco-num { background: var(--grad-lime); }
.eco-chain { background: rgba(125,200,50,0.15); border-color: rgba(125,200,50,0.35); color: var(--lime); }
.rm-content .quarter { color: var(--gold-light); }
.roadmap-track::before { background: linear-gradient(180deg, var(--lime), var(--lime-dark), var(--grass-deep)); }
.rm-dot { background: var(--grad-lime); border-color: #0d2a05; box-shadow: var(--shadow-glow); }
.footer-logo { color: var(--lime); }
.footer-links a:hover { color: var(--lime); }

/* ── Apps section: Proof of Grass / WAGO Drops / Harvest banners ── */
.app-banners {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.app-banner {
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  min-height: 340px;
  padding: 28px;
  border-radius: 24px;
  text-decoration: none;
  color: var(--forest);
  box-shadow: var(--shadow-card);
  transition: transform 0.25s, box-shadow 0.25s;
}
.app-banner:hover { transform: translateY(-6px); box-shadow: 0 8px 40px rgba(26,74,10,0.18); }
.app-logo {
  width: min(100%, 250px);
  height: auto;
  filter: drop-shadow(0 4px 8px rgba(26,74,10,0.25));
  transition: transform 0.25s;
}
.app-banner:hover .app-logo { transform: scale(1.04); }
.app-banner p {
  position: relative; z-index: 1;
  font-size: 0.98rem; line-height: 1.55; font-weight: 500;
  max-width: 24ch; color: var(--forest-mid);
  flex: 1;
}
.app-btn {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: 999px;
  background: var(--grad-lime); color: #fff;
  font-family: var(--font-sans); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em;
  box-shadow: var(--shadow-glow);
}
.app-btn-gold { background: var(--grad-gold); color: var(--forest); box-shadow: 0 2px 8px rgba(26,74,10,0.12); }

.app-pog {
  background:
    linear-gradient(to top, rgba(240,248,238,0) 0%, rgba(240,248,238,0) 100%),
    linear-gradient(160deg, #a8d4f0 0%, #d4edf8 45%, #f0f8ee 100%);
}
.app-pog::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 38%;
  background: url('/assets/brand/meadow.jpg') center bottom / cover no-repeat;
  -webkit-mask-image: linear-gradient(to top, #000 35%, transparent);
          mask-image: linear-gradient(to top, #000 35%, transparent);
  opacity: 0.85; pointer-events: none;
}
.app-pog p { max-width: 26ch; }
.app-wago { background: linear-gradient(160deg, #a8d4f0 0%, #d4edf8 45%, #fef3d8 100%); }
.app-wago p { max-width: 17ch; }
.app-mascot {
  position: absolute; right: 6px; bottom: -4px;
  height: 56%; width: auto;
  filter: drop-shadow(0 6px 12px rgba(26,74,10,0.25));
  pointer-events: none;
  transition: transform 0.25s;
}
.app-wago:hover .app-mascot { transform: scale(1.05) rotate(2deg); }
.app-harvest { background: linear-gradient(160deg, #fef3d8 0%, #f6e7b4 40%, #cfe8a8 100%); }
.app-harvest p { max-width: 24ch; }

@media (max-width: 1000px) {
  .app-banners { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .app-banner { min-height: 0; }
  .app-banner p { flex: none; }
  .app-wago { padding-bottom: 28px; }
  .app-mascot { height: 70%; }
}
@media (max-width: 560px) {
  .app-logo { width: min(100%, 220px); }
  .app-wago p { max-width: 14ch; }
  .app-mascot { height: 58%; right: 0; }
  section { padding: 64px 18px; }
}

/* four mission cards in one row on desktop */
.mission-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* keep WAGO's copy clear of the mascot */
.app-wago p { max-width: 16ch; }
.app-mascot { height: 50%; }
@media (max-width: 1000px) { .app-wago p { max-width: 22ch; } .app-mascot { height: 62%; } }
@media (max-width: 560px) { .app-wago p { max-width: 15ch; } .app-mascot { height: 52%; } }

/* phones: the hero copy sits over trees, so give it a frosted panel for legibility */
@media (max-width: 900px) {
  .hero-content {
    width: calc(100% - 28px);
    padding: 20px 16px;
    background: rgba(255,255,255,0.78);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.8);
    border-radius: 24px;
    box-shadow: var(--shadow-card);
  }
  .hero-tagline { font-size: clamp(1.6rem, 6.5vw, 2rem); text-shadow: none; }
  .hero-sub { text-shadow: none; }
}

/* iOS Safari fix: a drop-shadow filter on images inside the fading-in (.reveal) banners
   was painting a faint rectangle behind each logo. The artwork already has its own
   outlines, so drop the filters and the image transitions. */
.app-logo, .app-mascot { filter: none; transition: none; }
.app-banner:hover .app-logo, .app-wago:hover .app-mascot { transform: none; }
.app-banner.reveal { will-change: auto; }

/* ============ Interactive clicker: WAGO reacts to every touch ============ */
.grass-clicker { gap: 14px; }

.clicker-count { min-width: min(100%, 380px); padding: 20px 28px 18px; }
.clicker-rank { margin-top: 14px; display: grid; gap: 6px; justify-items: center; }
.clicker-rank strong {
  font-family: var(--font-serif); font-size: 1.3rem; font-weight: 600; color: var(--forest);
  line-height: 1;
}
.rank-bar {
  width: 100%; max-width: 260px; height: 10px; border-radius: 999px;
  background: rgba(125,200,50,0.18); overflow: hidden;
}
.rank-bar i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--grad-lime); box-shadow: var(--shadow-glow);
  transition: width 0.35s cubic-bezier(.2,.9,.3,1.2);
}
.clicker-rank em { font-style: normal; font-size: 0.8rem; font-weight: 600; color: var(--forest-light); }

.clicker-stage { position: relative; width: min(100%, 360px); }

.grass-patch {
  width: 100%;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 50% 22%, rgba(255,230,140,0.55), transparent 42%),
    linear-gradient(180deg, #bfe6fb 0%, #e0f3fd 46%, #8fd66a 46.5%, #5ba622 74%, #3d7a12 100%);
  box-shadow: inset 0 -16px 28px rgba(13,42,5,0.28), 0 14px 34px rgba(26,74,10,0.22);
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
}
.grass-blades { opacity: 0.55; mix-blend-mode: soft-light; }
.grass-patch.is-pressed { animation: patchPress 0.18s ease-out; transform: none; }
.grass-patch.is-shake { animation: patchShake 0.45s ease-out; }
.grass-patch.is-sleeping { background:
    radial-gradient(circle at 50% 22%, rgba(180,200,255,0.4), transparent 42%),
    linear-gradient(180deg, #7aa2d6 0%, #a9c4e6 46%, #5e9f4a 46.5%, #3f7f2f 74%, #2c5e1f 100%); }

.wago-pose {
  position: absolute; z-index: 1;
  left: 50%; bottom: 16%;
  height: 78%; width: auto;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  pointer-events: none;
  animation: wagoIdle 2.6s ease-in-out infinite;
}
.grass-patch.is-sleeping .wago-pose { animation: wagoSleep 3.4s ease-in-out infinite; height: 70%; }
.wago-pose.is-squash { animation: wagoSquash 0.34s cubic-bezier(.2,.9,.3,1.3); }

.wago-zzz {
  position: absolute; z-index: 2; right: 14%; top: 14%;
  font-family: var(--font-serif); font-weight: 600; font-size: 2rem; color: #fff;
  text-shadow: 0 2px 8px rgba(13,42,5,0.5);
  opacity: 0; pointer-events: none;
}
.wago-zzz b { display: inline-block; margin-left: 2px; font-size: 1.3em; }
.grass-patch.is-sleeping .wago-zzz { opacity: 1; animation: zzzFloat 2.4s ease-in-out infinite; }

.grass-touch-text {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; min-height: 0;
  padding: 0 0 16px; font-size: clamp(1.4rem, 5vw, 2rem);
  text-shadow: 0 2px 10px rgba(13,42,5,0.6);
}

/* particles */
.touch-fx {
  position: absolute; z-index: 4; left: var(--x); top: var(--y);
  width: 26px; height: 26px; object-fit: contain; pointer-events: none;
  animation: fxFly 0.85s cubic-bezier(.15,.8,.3,1) forwards;
}
.touch-pop { z-index: 5; font-family: var(--font-sans); font-size: 1.15rem; }

/* speech bubble + combo badge */
.clicker-bubble {
  position: absolute; z-index: 6; left: 50%; top: -14px;
  transform: translate(-50%, -100%);
  max-width: 92%; width: max-content;
  padding: 10px 16px; border-radius: 18px;
  background: #fff; color: var(--forest);
  font-weight: 700; font-size: 0.95rem; line-height: 1.25; text-align: center;
  box-shadow: 0 6px 22px rgba(26,74,10,0.22);
  pointer-events: none;
}
.clicker-bubble::after {
  content: ''; position: absolute; left: 50%; bottom: -8px; width: 16px; height: 16px;
  background: #fff; transform: translateX(-50%) rotate(45deg); border-radius: 3px;
}
.clicker-bubble[hidden] { display: none; }
.clicker-bubble.is-pop { animation: bubblePop 0.3s cubic-bezier(.2,.9,.3,1.4); }

.clicker-combo {
  position: absolute; z-index: 6; right: 10px; top: 10px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--grad-gold); color: var(--forest);
  font-family: var(--font-sans); font-weight: 800; font-size: 1.05rem;
  box-shadow: 0 4px 14px rgba(26,74,10,0.25);
  opacity: 0; transform: scale(0.6); pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.clicker-combo.is-on { opacity: 1; transform: scale(1); }
.clicker-combo.is-hot { background: linear-gradient(135deg, #ffb347, #f07020); color: #fff; }
.clicker-combo.is-bump { animation: comboBump 0.18s ease-out; }

@keyframes wagoIdle {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1, 1); }
  50% { transform: translateX(-50%) translateY(-6px) scale(1.015, 0.985); }
}
@keyframes wagoSleep {
  0%, 100% { transform: translateX(-50%) scale(1, 1); }
  50% { transform: translateX(-50%) scale(1.02, 1.04); }
}
@keyframes wagoSquash {
  0% { transform: translateX(-50%) scale(1, 1); }
  25% { transform: translateX(-50%) translateY(2px) scale(1.14, 0.84); }
  60% { transform: translateX(-50%) translateY(-18px) scale(0.92, 1.1); }
  100% { transform: translateX(-50%) translateY(0) scale(1, 1); }
}
@keyframes patchPress { 0% { transform: scale(1); } 40% { transform: scale(0.975); } 100% { transform: scale(1); } }
@keyframes patchShake {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-5px, 2px) rotate(-1deg); }
  40% { transform: translate(5px, -2px) rotate(1deg); }
  60% { transform: translate(-3px, 1px); }
  80% { transform: translate(3px, -1px); }
}
@keyframes zzzFloat {
  0% { transform: translate(0, 6px) scale(0.9); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(10px, -22px) scale(1.15); opacity: 0; }
}
@keyframes fxFly {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.5) rotate(0); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 40px)) scale(1.1) rotate(var(--rot)); }
}
@keyframes bubblePop { 0% { transform: translate(-50%, -100%) scale(0.5); } 100% { transform: translate(-50%, -100%) scale(1); } }
@keyframes comboBump { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .wago-pose, .grass-patch.is-sleeping .wago-pose, .wago-zzz { animation: none !important; }
  .touch-fx { display: none; }
}
@media (max-width: 560px) {
  .clicker-bubble { font-size: 0.88rem; padding: 8px 12px; }
  .clicker-stage { margin-top: 36px; }
}

/* the sleeping WAGO artwork already includes its own "zzz" */
.wago-zzz { display: none; }

/* ============ Phones: swipeable card carousels instead of tall stacks ============ */
.carousel-dots { display: none; }

@media (max-width: 800px) {
  .mission-grid, .eco-grid, .community-cards {
    display: flex; flex-wrap: nowrap; justify-content: flex-start;
    gap: 14px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* bleed to the screen edges so the next card peeks in */
    margin: 28px -24px 0; padding: 6px 24px 18px;
    scroll-padding-inline: 24px;
  }
  .mission-grid::-webkit-scrollbar, .eco-grid::-webkit-scrollbar, .community-cards::-webkit-scrollbar { display: none; }

  .mission-grid > .mission-card,
  .eco-grid > .eco-card {
    flex: 0 0 78%; max-width: 340px;
    scroll-snap-align: start;
    opacity: 1 !important; transform: none !important;  /* don't wait for scroll-reveal inside a scroller */
  }
  .community-cards > .comm-card {
    flex: 0 0 62%; min-width: 0; max-width: 260px;
    scroll-snap-align: start;
    padding: 26px 18px;
    opacity: 1 !important; transform: none !important;
  }
  .mission-card, .eco-card { padding: 24px 20px; }

  .carousel-dots {
    display: flex; justify-content: center; align-items: center; gap: 8px;
    margin-top: 4px;
  }
  .carousel-dots button {
    width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px;
    background: rgba(13,42,5,0.22); cursor: pointer;
    transition: width 0.25s, background 0.25s;
  }
  .carousel-dots button.is-active { width: 24px; background: var(--lime-dark); }
  #ecosystem .carousel-dots button { background: rgba(240,239,234,0.28); }
  #ecosystem .carousel-dots button.is-active { background: var(--lime); }
  .carousel-count {
    font-family: var(--font-sans); font-weight: 700; font-size: 0.85rem; color: var(--forest-light);
    padding: 4px 14px; border-radius: 999px; background: rgba(255,255,255,0.7);
  }
}
@media (max-width: 560px) {
  .mission-grid, .eco-grid, .community-cards { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; scroll-padding-inline: 18px; }
}

/* "Swipe →" hint under phone carousels */
.swipe-hint { display: none; }
@media (max-width: 800px) {
  .swipe-hint {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: -2px 0 10px;
    font-family: var(--font-sans); font-weight: 800; font-size: 0.8rem;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--forest-light);
    transition: opacity 0.4s, max-height 0.4s, margin 0.4s;
    max-height: 30px;
  }
  .swipe-hint i { font-style: normal; font-size: 1.1rem; animation: swipeNudge 1.3s ease-in-out infinite; }
  .swipe-hint.is-gone { opacity: 0; max-height: 0; margin: 0; overflow: hidden; }
  #ecosystem .swipe-hint { color: rgba(240,239,234,0.8); }
}
@keyframes swipeNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
@media (prefers-reduced-motion: reduce) { .swipe-hint i { animation: none; } }

/* ===== More phone carousels: Apps banners, Roadmap steps, Buy cards ===== */
@media (max-width: 800px) {
  .app-banners, .buy-options, .roadmap-track {
    display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;
    gap: 14px; max-width: none;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin: 28px -24px 0; padding: 6px 24px 18px;
    scroll-padding-inline: 24px;
  }
  .app-banners::-webkit-scrollbar, .buy-options::-webkit-scrollbar, .roadmap-track::-webkit-scrollbar { display: none; }

  .app-banners > .app-banner {
    flex: 0 0 84%; max-width: 340px; min-height: 360px;
    scroll-snap-align: start;
    opacity: 1 !important; transform: none !important;
  }
  .buy-options > .buy-card {
    flex: 0 0 72%; max-width: 300px; min-width: 0;
    scroll-snap-align: start;
  }

  /* roadmap: vertical timeline becomes a row of step cards */
  .roadmap-track { flex-direction: row; flex-wrap: nowrap; position: static; }
  .roadmap-track::before { display: none; }
  .roadmap-track > .rm-item {
    flex: 0 0 80%; max-width: 320px;
    flex-direction: column; align-items: flex-start; gap: 12px;
    padding: 22px 20px;
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    border: 1px solid rgba(125,200,50,0.3);
    scroll-snap-align: start;
    opacity: 1 !important; transform: none !important;
  }
  .rm-dot { width: 52px; min-width: 52px; height: 52px; }
  .rm-content { padding-top: 0; }

  #roadmap .carousel-dots button, #buy .carousel-dots button { background: rgba(240,239,234,0.28); }
  #roadmap .carousel-dots button.is-active, #buy .carousel-dots button.is-active { background: var(--lime); }
  #roadmap .swipe-hint, #buy .swipe-hint { color: rgba(240,239,234,0.8); }
}
@media (max-width: 560px) {
  .app-banners, .buy-options, .roadmap-track { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; scroll-padding-inline: 18px; }
}

/* ── HERO V2 (layered illustration) ── */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#hero.hero2{min-height:0;display:block;padding:0;background:#2f7d1c;overflow:hidden;position:relative}
#hero.hero2::before{display:none}
.stage{position:relative;width:100%;height:clamp(700px,178vw,980px);overflow:hidden;background:#3a9ef0}
.stage img{position:absolute;display:block;user-select:none;-webkit-user-drag:none}
.st-bg{inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.st-sun{position:absolute;inset:0;background:radial-gradient(circle at 78% 42%,rgba(255,240,170,.35),transparent 38%);mix-blend-mode:screen;animation:sunpulse 6s ease-in-out infinite}
.st-logo{top:84px;left:50%;width:min(80vw,520px);transform:translateX(-50%);filter:drop-shadow(0 8px 14px rgba(0,40,0,.35))}
.st-wago{left:-8%;bottom:13%;width:min(74vw,560px);transform-origin:50% 90%;animation:wagobob 4.5s ease-in-out infinite;filter:drop-shadow(0 10px 14px rgba(0,40,0,.35))}
.st-slogan{position:absolute;right:4%;top:calc(84px + 0.9 * min(80vw,520px));z-index:3;margin:0;transform:rotate(-6deg);text-align:left;font-family:var(--font-serif);font-weight:700;text-transform:uppercase;color:#fff;line-height:1.02;font-size:clamp(1.2rem,5.6vw,2.2rem);text-shadow:2px 2px 0 #0d2a05,-2px 2px 0 #0d2a05,2px -2px 0 #0d2a05,-2px -2px 0 #0d2a05,0 6px 14px rgba(0,0,0,.4)}
.st-slogan span{display:block}
.st-slogan::after{content:'';display:block;height:7px;width:78%;margin-top:6px;border-radius:6px;background:#8de84a;box-shadow:0 2px 0 #0d2a05;transform:rotate(-2deg)}
.st-grass{left:0;bottom:-2px;width:max(100%,900px);left:50%;transform:translateX(-50%);animation:grasssway 7s ease-in-out infinite;transform-origin:50% 100%}
@keyframes wagobob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(-1deg)}}
@keyframes sunpulse{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes grasssway{0%,100%{transform:translateX(-50%) skewX(0)}50%{transform:translateX(-50%) skewX(.6deg)}}
@media (prefers-reduced-motion:reduce){.st-wago,.st-sun,.st-grass{animation:none}}
.hero2-ctas{display:flex;gap:12px;justify-content:center;padding:14px 16px 26px;background:linear-gradient(#3f8a1d,#2f7416);flex-wrap:wrap;position:relative;z-index:3}
.pill{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:999px;font-family:var(--font-serif);font-weight:700;font-size:1.05rem;text-decoration:none;color:#0d2a05;box-shadow:0 6px 0 rgba(13,42,5,.28),0 10px 20px rgba(0,0,0,.15);transition:transform .15s}
.pill:hover{transform:translateY(-2px)}
.pill-white{background:#fff}.pill-lime{background:#8de84a}
.hero2-more{background:#fdf1d2;position:relative;padding:0 0 40px;overflow:hidden}
.parch-strip{display:flex;justify-content:center;gap:clamp(6px,2.5vw,36px);padding:34px 16px 28px;background:url('/assets/hero/parchment.png') center/100% 100% no-repeat;margin-top:-18px;position:relative;z-index:4}
.parch-strip a{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:#3a2410;text-align:center;flex:1;max-width:150px;min-width:0}
.parch-strip img{width:100%;max-width:92px;filter:drop-shadow(0 4px 4px rgba(60,30,0,.25))}
.parch-strip b{font-family:var(--font-sans);font-weight:800;font-size:clamp(.68rem,2.6vw,.95rem);line-height:1.15;margin-top:2px}
.more-intro{position:relative;text-align:center;max-width:720px;margin:0 auto;padding:30px 20px 10px}
.more-intro>*:not(.leaf){position:relative;z-index:1}
.leaf{position:absolute;bottom:0;width:min(15vw,170px);opacity:.95;pointer-events:none;z-index:0}
.leaf-l{left:calc(50% - 50vw);}.leaf-r{right:calc(50% - 50vw);transform:scaleX(-1)}
.more-intro h2{font-family:var(--font-serif);font-weight:700;text-transform:uppercase;font-size:clamp(1.9rem,8vw,3rem);line-height:1.05;color:#0d2a05;margin:0 0 12px}
.more-intro p{font-size:1.02rem;line-height:1.5;color:#2a3a22;margin:0 auto 18px}
.more-intro .ca-box{margin:0 auto 14px}
.more-intro .hero-btns{justify-content:center}
.hero-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1000px;margin:18px auto 0;padding:0 14px}
.hcard{position:relative;display:flex;align-items:flex-end;min-height:340px;border-radius:22px;overflow:hidden;text-decoration:none;color:#fff;
 background:linear-gradient(180deg,transparent 45%,rgba(14,32,10,.95) 78%),var(--img) center top/cover no-repeat,#10260c;box-shadow:0 10px 24px rgba(13,42,5,.25);transition:transform .2s}
.hcard:hover{transform:translateY(-4px)}
.hcard div{padding:14px 14px 40px}
.hcard h3{font-family:var(--font-serif);font-weight:700;font-size:1.05rem;text-transform:uppercase;margin:0 0 6px}
.hcard p{font-size:.85rem;line-height:1.35;margin:0;opacity:.92}
.hcard i{position:absolute;right:14px;bottom:10px;font-style:normal;font-size:1.3rem}
@media (max-width:800px){
 .hero-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:0 14px 10px;-webkit-overflow-scrolling:touch}
 .hcard{flex:0 0 74%;scroll-snap-align:center;min-height:360px}
 .hero2-ctas{flex-wrap:nowrap;gap:8px}.pill{padding:12px 10px;font-size:.82rem;white-space:nowrap;flex:1;justify-content:center;gap:5px}
}
@media (min-width:801px){
 .stage{height:clamp(640px,62vw,900px)}
 .st-logo{top:100px;width:min(35vw,500px);left:50%}
 .st-wago{left:6%;bottom:9%;width:min(44vw,640px)}
 .st-slogan{right:4%;top:auto;bottom:30%;font-size:clamp(1.8rem,3.2vw,3rem)}
 .st-grass{width:100%}
 .leaf{width:200px}
}

/* ── ILLUSTRATED SECTIONS ── */
#apps,#about,#community,#touch-counter{position:relative;overflow:hidden}
#apps>*,#about>*,#community>*,#touch-counter>*,#ecosystem>*,#roadmap>*,#buy>*{position:relative;z-index:1}
#apps::after,#community::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:clamp(64px,10vw,150px);background:url('/assets/hero/grass.png') center bottom/auto 100% repeat-x;pointer-events:none;z-index:2}
#apps,#community{padding-bottom:clamp(120px,24vw,200px)}
#ecosystem,#roadmap,#buy{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 30%,#1f5a10 0%,#0d2a05 70%)}
#ecosystem::before,#roadmap::before,#buy::before,#ecosystem::after,#roadmap::after,#buy::after{content:'';position:absolute;width:clamp(80px,20vw,240px);aspect-ratio:700/1343;background:url('/assets/hero/leaves.png') center/contain no-repeat;opacity:.95;pointer-events:none;z-index:0}
#ecosystem::before,#roadmap::before,#buy::before{left:0;top:-3%;transform:translateX(-32%)}
#ecosystem::after,#roadmap::after,#buy::after{right:0;bottom:-4%;transform:scale(-1,-1) translateX(-32%)}
.app-banner{background:url('/assets/hero/parchment.png') center/cover no-repeat,#f6dc9a!important;border:2px solid #d9a94f!important;box-shadow:0 10px 24px rgba(90,50,0,.25)!important}
.app-banner p{color:#3a2410!important}
.about-wago{display:block;width:min(78vw,380px);margin:6px auto -26px;position:relative;z-index:2;filter:drop-shadow(0 10px 12px rgba(0,40,0,.3))}
.mission-card,.comm-card{background:rgba(255,255,255,.95)}
.pre-footer{position:relative;padding:60px 0 0;background:url('/assets/hero/bg.jpg') 62% bottom/cover no-repeat,#7fc16a}
.pre-footer .parch-strip{margin-top:0;padding-bottom:34px}
.pre-footer::after{content:'';display:block;height:clamp(60px,10vw,140px);margin-top:-30px;background:url('/assets/hero/grass.png') center bottom/auto 100% repeat-x;position:relative;z-index:5}
#apps .swipe-hint,#about .swipe-hint,#community .swipe-hint,#apps .carousel-count,#community .carousel-count{color:#fff;text-shadow:0 1px 3px rgba(0,40,0,.8)}
@media (min-width:801px){.about-wago{margin-bottom:-60px;width:420px}}

/* slogan + rock WAGO art */
img.st-slogan{position:absolute;right:2%;top:calc(80px + 0.86 * min(80vw,520px));width:min(50vw,320px);height:auto;transform:rotate(-2deg);z-index:3;filter:drop-shadow(0 6px 10px rgba(0,30,0,.35))}
.about-wago{width:min(70vw,340px);margin:0 auto -30px}
@media (min-width:801px){img.st-slogan{top:auto;bottom:30%;right:3%;width:min(25vw,340px)}.about-wago{width:360px;margin-bottom:-50px}}

/* ── per-section scenes ── */
#apps{background:linear-gradient(180deg,#d5ecfc 0%,rgba(213,236,252,.88) 30%,rgba(213,236,252,0) 62%),url('/assets/hero/bg-barn.jpg') 50% bottom/cover no-repeat,#7cc4f5}
#about{background:linear-gradient(180deg,#ffeccf 0%,rgba(255,236,207,.9) 30%,rgba(255,236,207,0) 64%),url('/assets/hero/bg-field.jpg') 50% bottom/cover no-repeat,#f7b36a}
#touch-counter{background:linear-gradient(180deg,#d5ecfc 0%,rgba(213,236,252,.85) 28%,rgba(213,236,252,0) 62%),url('/assets/hero/bg-meadow.jpg') 50% bottom/cover no-repeat,#5fb4f4}
#community{background:linear-gradient(180deg,#fde6dc 0%,rgba(253,230,220,.92) 30%,rgba(253,230,220,0) 64%),url('/assets/hero/bg-camp.jpg') 50% bottom/cover no-repeat,#8b6ac8;padding-bottom:clamp(60px,10vw,110px)}
#community::after{display:none}
.pre-footer{background:linear-gradient(180deg,rgba(10,20,40,.35),rgba(10,20,40,0) 60%),url('/assets/hero/bg-forest.jpg') 50% bottom/cover no-repeat,#16254a}

/* nav scrolls with the page */
nav{position:absolute!important}