/* =========================================================
   plan b — Variante B "GRÜNE POWER"
   Natur · Pastell · Wellen · frech
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@500;600;700;800;900&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root {
  /* Greens */
  --forest:    #0F3D2E;   /* deep ink-green: text + dark sections */
  --forest-2:  #16543C;
  --leaf:      #2FA862;   /* mid green */
  --grass:     #84D24A;   /* power lime accent */
  --grass-deep:#5BA82E;

  /* Pastels */
  --mint:      #C9EBCB;
  --mint-2:    #DCF1D2;
  --sky:       #C2E6E6;
  --sun:       #F7D15A;   /* pastel sunny pop */
  --sun-deep:  #EBB838;
  --peach:     #FFB694;   /* cheeky warm pop */
  --peach-2:   #FFD9C4;

  /* Paper */
  --cream:     #F1F6E7;   /* base pistachio cream */
  --cream-2:   #E7F0D7;
  --card:      #FFFFFF;
  --line:      #DBE6C9;
  --line-dark: rgba(255,255,255,.12);

  --slate:     #5B6B5C;
  --mist:      #9DB29A;

  --display: 'Gabarito', 'Trebuchet MS', sans-serif;
  --body:    'Hanken Grotesk', system-ui, sans-serif;

  --gut: clamp(20px, 5vw, 90px);
  --maxw: 1280px;

  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 34px;
  --r-xl: 48px;
  --r-blob: 60% 40% 55% 45% / 55% 50% 50% 45%;

  --sh-1: 0 2px 6px rgba(15,61,46,.05), 0 10px 30px rgba(15,61,46,.07);
  --sh-2: 0 16px 44px -10px rgba(15,61,46,.18);
  --sh-3: 0 36px 80px -24px rgba(15,61,46,.35);
  --sh-pop: 0 14px 0 0 var(--forest);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--body); background: var(--cream); color: var(--forest); line-height: 1.55; font-size: 17px; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
::selection { background: var(--grass); color: var(--forest); }

.gwrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.gsection { position: relative; padding-block: clamp(60px, 8vw, 130px); }
.gsection--tight { padding-block: clamp(44px, 6vw, 84px); }

/* ---------------- Type ---------------- */
h1,h2,h3,h4 { font-family: var(--display); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.g-display { font-family: var(--display); font-weight: 900; font-size: clamp(2.9rem, 8vw, 6.6rem); line-height: .92; letter-spacing: -.035em; }
.g-h1 { font-family: var(--display); font-weight: 900; font-size: clamp(2.3rem, 5.4vw, 4.4rem); line-height: .96; letter-spacing: -.03em; }
.g-h2 { font-size: clamp(1.9rem, 4vw, 3.3rem); letter-spacing: -.025em; }
.g-h3 { font-size: clamp(1.3rem, 2vw, 1.8rem); }
.g-lead { font-size: clamp(1.08rem, 1.5vw, 1.35rem); color: var(--slate); font-weight: 500; line-height: 1.55; }
.g-muted { color: var(--slate); }
.tb { text-wrap: balance; } .tp { text-wrap: pretty; }

/* Eyebrow sticker */
.g-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: .02em; text-transform: uppercase; color: var(--forest); background: var(--grass); padding: 8px 16px; border-radius: 100px; transform: rotate(-2deg); }
.g-eyebrow svg { width: 17px; height: 17px; }
.g-eyebrow.is-sun { background: var(--sun); }
.g-eyebrow.is-mint { background: var(--mint); }
.g-eyebrow.is-peach { background: var(--peach); }

/* Squiggle underline */
.squiggle { position: relative; white-space: nowrap; }
.squiggle::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: -.16em; height: .22em; background: var(--grass); border-radius: 100px; z-index: -1; transform: rotate(-1deg); }
.squiggle--sun::after { background: var(--sun); }
.squiggle--peach::after { background: var(--peach); }

/* ---------------- Buttons (bouncy, sticker-like) ---------------- */
.gbtn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 16px; padding: 15px 28px; border-radius: 100px; transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, background .2s, color .2s; }
.gbtn svg { width: 19px; height: 19px; transition: transform .3s; }
.gbtn:hover { transform: translateY(-3px) rotate(-1deg); }
.gbtn:active { transform: translateY(0); }
.gbtn--primary { background: var(--forest); color: var(--cream); }
.gbtn--primary:hover { box-shadow: 0 10px 0 -2px var(--grass-deep); }
.gbtn--primary:hover svg { transform: translateX(4px); }
.gbtn--grass { background: var(--grass); color: var(--forest); }
.gbtn--grass:hover { box-shadow: 0 10px 0 -2px var(--grass-deep); }
.gbtn--sun { background: var(--sun); color: var(--forest); }
.gbtn--ghost { background: transparent; color: var(--forest); box-shadow: inset 0 0 0 2px var(--forest); }
.gbtn--ghost:hover { background: var(--forest); color: var(--cream); }
.gbtn--light { background: #fff; color: var(--forest); }
.gbtn--sm { padding: 11px 20px; font-size: 14px; }

/* ---------------- Cards ---------------- */
.gcard { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--sh-1); border: 2px solid var(--forest); }
.gpill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 100px; font-family: var(--display); font-weight: 700; font-size: 13.5px; background: var(--mint); color: var(--forest); }

/* ---------------- Reveal ---------------- */
.greveal { opacity: 0; transform: translateY(30px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.greveal.in { opacity: 1; transform: none; }
.greveal[data-d="1"]{transition-delay:.08s}.greveal[data-d="2"]{transition-delay:.16s}.greveal[data-d="3"]{transition-delay:.24s}.greveal[data-d="4"]{transition-delay:.32s}
@media (prefers-reduced-motion: reduce){ .greveal{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} *{animation:none!important} }

.gpage { animation: gpageIn .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes gpageIn { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }

/* ---------------- Dark (forest) ---------------- */
.g-dark { background: var(--forest); color: var(--mint-2); }
.g-dark .g-muted { color: var(--mist); }
.g-dark .g-lead { color: #BFD6BC; }
.g-dark h1,.g-dark h2,.g-dark h3 { color: #fff; }

/* ---------------- Wave divider ---------------- */
.wave { display: block; width: 100%; height: clamp(40px, 6vw, 90px); }
.wave svg { display: block; width: 100%; height: 100%; }
.wave--flip svg { transform: scaleY(-1); }
.waveband { line-height: 0; }

/* animated drifting wave layer */
.gwaves { position: absolute; left: 0; right: 0; width: 200%; }
.gwaves svg { width: 50%; height: 100%; float: left; }
.gwaves--anim { animation: drift 14s linear infinite; }
.gwaves--anim2 { animation: drift 22s linear infinite reverse; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------------- Blobs ---------------- */
.blob { position: absolute; border-radius: var(--r-blob); filter: blur(2px); opacity: .55; pointer-events: none; animation: blobMove 16s ease-in-out infinite; }
@keyframes blobMove { 0%,100%{ border-radius: 60% 40% 55% 45% / 55% 50% 50% 45%; transform: translate(0,0) rotate(0); } 50%{ border-radius: 45% 55% 45% 55% / 50% 45% 55% 50%; transform: translate(14px,-18px) rotate(8deg); } }

/* ---------------- Marquee ---------------- */
.marquee { overflow: hidden; background: var(--forest); color: var(--grass); padding: 16px 0; border-block: 3px solid var(--grass); }
.marquee__track { display: inline-flex; gap: 40px; white-space: nowrap; animation: marq 24s linear infinite; font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: .01em; }
.marquee__track span { display: inline-flex; align-items: center; gap: 40px; }
.marquee__track svg { width: 22px; height: 22px; color: var(--sun); }
@keyframes marq { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------------- Image placeholder ---------------- */
.gph { position: relative; overflow: hidden; border-radius: var(--r-lg); background: radial-gradient(120% 120% at 0% 0%, var(--mint), transparent 55%), radial-gradient(120% 120% at 100% 100%, var(--sun), transparent 55%), var(--cream-2); display: grid; place-items: center; border: 2px solid var(--forest); }
.gph::after { content: attr(data-label); font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--forest); background: rgba(255,255,255,.8); padding: 8px 15px; border-radius: 100px; }
.gph--blob { border-radius: var(--r-blob); }

.ticks { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.ticks li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.ticks li svg { width: 24px; height: 24px; color: var(--cream); background: var(--leaf); border-radius: 50%; padding: 5px; flex: none; }
@media (max-width: 860px){ .hide-mob{display:none!important} }