* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.bot-bg {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden; pointer-events: none; z-index: 0;
}
.bot-bg svg { position: absolute; opacity: var(--bot-opacity); }
.bot-bg-hero svg { opacity: calc(var(--bot-opacity) + 0.03); }
.bot-leaf { fill: none; stroke: var(--bot-color); stroke-width: var(--bot-stroke-width); }
.bot-stem,
.bot-vein,
.bot-vine { stroke: var(--bot-color); stroke-width: var(--bot-stroke-width); fill: none; }
.bot-vein { stroke-width: calc(var(--bot-stroke-width) * 0.75); opacity: 0.85; }
.bot-seed {
  fill: none; stroke: var(--bot-color); stroke-width: var(--bot-stroke-width);
}
.bot-dot { fill: var(--bot-color); stroke: none; opacity: 0.9; }
.bot-float-1 { top: 8%; right: 4%; animation: bf1 28s ease-in-out infinite; }
.bot-float-2 { top: 42%; left: -1%; animation: bf2 32s ease-in-out infinite; }
.bot-float-3 { bottom: 5%; right: 15%; animation: bf3 24s ease-in-out infinite; }
.bot-float-4 { top: 12%; left: 28%; animation: bf4 30s ease-in-out infinite; }
.bot-float-5 { bottom: 18%; left: 8%; animation: bf5 26s ease-in-out infinite; }
.bot-float-6 { top: 28%; right: 22%; animation: bf6 22s ease-in-out infinite; }
.bot-float-7 { bottom: 28%; right: 6%; animation: bf7 34s ease-in-out infinite; }
.bot-float-8 { top: 58%; left: 38%; animation: bf8 29s ease-in-out infinite; }
.bot-float-9 { top: 6%; left: 8%; animation: bf1 36s ease-in-out infinite reverse; }
.bot-float-10 { bottom: 8%; left: 48%; animation: bf5 31s ease-in-out infinite reverse; }
@keyframes bf1 {
  0%,100%{transform:translate(0,0) rotate(0)}
  50%{transform:translate(-15px,12px) rotate(4deg)}
}
@keyframes bf2 {
  0%,100%{transform:translate(0,0) rotate(0)}
  50%{transform:translate(20px,-15px) rotate(-5deg)}
}
@keyframes bf3 {
  0%,100%{transform:translate(0,0) rotate(0)}
  50%{transform:translate(-25px,-18px) rotate(6deg)}
}
@keyframes bf4 {
  0%,100%{transform:translate(0,0) rotate(0)}
  50%{transform:translate(12px,18px) rotate(-4deg)}
}
@keyframes bf5 {
  0%,100%{transform:translate(0,0) rotate(0)}
  50%{transform:translate(18px,-10px) rotate(5deg)}
}
@keyframes bf6 {
  0%,100%{transform:translate(0,0) rotate(0) scale(1)}
  50%{transform:translate(-10px,14px) rotate(-8deg) scale(1.05)}
}
@keyframes bf7 {
  0%,100%{transform:translate(0,0) rotate(0)}
  50%{transform:translate(-16px,8px) rotate(3deg)}
}
@keyframes bf8 {
  0%,100%{transform:translate(0,0) rotate(0)}
  50%{transform:translate(14px,-16px) rotate(-6deg)}
}