* { 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-leaf { fill: none; stroke: var(--bot-color); stroke-width: var(--bot-stroke-width); }
.bot-stem { stroke: var(--bot-color); stroke-width: var(--bot-stroke-width); fill: none; }
.bot-float-1 { top: 8%; right: 5%; animation: bf1 28s ease-in-out infinite; }
.bot-float-2 { top: 40%; left: -2%; 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: 15%; left: 30%; animation: bf4 30s ease-in-out infinite; }
@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)}
}