@font-face{font-family:"Nunito Sans";src:url(fonts/nunitosans-latin.woff2) format("woff2");font-weight:200 1000;font-display:swap}
:root{
  --black:#0b0a08; --green:#b8e52c; --mint:#dcffca; --purple:#210e52;
  --gold:#f4c21b; --honey:#e89b0c; --white:#fff;
  --pad:clamp(1.1rem,4vw,3.5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--black);color:var(--white);font-family:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.55;overflow-x:hidden;
  background-image:
    radial-gradient(60vmax 40vmax at 85% 8%, rgba(244,194,27,.20), transparent 60%),
    radial-gradient(50vmax 35vmax at 10% 70%, rgba(232,155,12,.12), transparent 60%),
    radial-gradient(40vmax 30vmax at 70% 110%, rgba(184,229,44,.10), transparent 60%);
  background-attachment:fixed}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
#pollen{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.noise{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.10;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main,.top,.foot{position:relative;z-index:2}

.dot{display:inline-block;width:.32em;height:.32em;background:var(--green);margin:0 .06em;vertical-align:baseline;transform:translateY(-.02em)}

/* Header */
.top{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:calc(.9rem + env(safe-area-inset-top)) var(--pad) .9rem;z-index:10;
  background:linear-gradient(rgba(11,10,8,.75),transparent)}
.logo{font-weight:900;font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);letter-spacing:-.02em;text-decoration:none;line-height:1}
.burger{width:3.1rem;height:3.1rem;border-radius:50%;background:var(--green);display:grid;place-content:center;gap:4px;box-shadow:0 0 0 6px rgba(184,229,44,.18);transition:transform .3s}
.burger span{display:block;width:1.35rem;height:2px;background:var(--purple)}
.burger:hover{transform:scale(1.08)}

/* Hero */
.hero{min-height:100svh;display:grid;grid-template-columns:1fr;justify-items:center;align-content:center;gap:clamp(1rem,3vw,2rem);
  padding:calc(5.5rem + env(safe-area-inset-top)) var(--pad) clamp(2rem,5vw,4rem);text-align:center}
.hero-text{position:relative;padding:1.4rem 0 0}
.eyebrow{margin:0 0 .3rem;font-weight:700;color:var(--white);font-size:clamp(.95rem,.85rem + .4vw,1.2rem);letter-spacing:.02em;position:relative}
h1,h2{margin:0;font-weight:900;line-height:1;letter-spacing:-.02em;text-shadow:1px 1px 1px #000,0 6px 30px rgba(0,0,0,.45);position:relative}
h1{font-size:clamp(2.6rem,1.6rem + 5.2vw,5.6rem)}
.circles{position:absolute;left:50%;top:50%;width:clamp(9rem,6rem + 12vw,15rem);aspect-ratio:1;transform:translate(-62%,-58%);pointer-events:none}
.circles i{position:absolute;inset:0;border-radius:50%;background:var(--green)}
.circles i:nth-child(1){opacity:.45}
.circles i:nth-child(2){opacity:.65;translate:7% 13%}
.circles i:nth-child(3){opacity:.85;translate:14% 26%}
.circles.small{width:clamp(6rem,4rem + 6vw,9rem)}

.bee{position:relative;margin:0;width:min(78vw,26rem);order:0}
.bee picture{display:block;position:relative;animation:float 6s ease-in-out infinite;filter:drop-shadow(0 25px 35px rgba(0,0,0,.55))}
.bee .glow{position:absolute;inset:8% -6% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(244,194,27,.55),rgba(232,155,12,.18) 60%,transparent);filter:blur(10px);animation:pulse 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(2deg)}}
@keyframes pulse{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}

.hero-side{max-width:24rem}
.hero-side p{margin:0 0 1.2rem;color:#e9e4d6;font-size:clamp(1rem,.95rem + .3vw,1.15rem)}
.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--green);color:var(--purple);font-weight:800;text-decoration:none;padding:.85rem 1.4rem;border-radius:999px;transition:transform .25s,box-shadow .25s}
.btn:hover,.btn:focus-visible{transform:translateY(-2px);box-shadow:0 10px 30px rgba(184,229,44,.35)}

@media (min-width:900px){
  .hero{grid-template-columns:1fr minmax(0,34vw) 1fr;align-items:center;text-align:left;gap:2vw}
  .hero-text{justify-self:end;padding-left:5rem}
  .circles{left:0;transform:translate(-8%,-60%)}
  .bee{width:100%;max-width:34rem}
  .hero-side{justify-self:start}
}

/* Strip like the green info bar */
.strip{display:grid;grid-template-columns:1fr 1fr;background:var(--green);color:var(--purple)}
.strip div{padding:clamp(1rem,2.5vw,1.6rem) clamp(1rem,2.5vw,1.6rem);border-right:1px solid rgba(33,14,82,.18);border-bottom:1px solid rgba(33,14,82,.18);display:flex;flex-direction:column;gap:.35rem;min-width:0}
.strip strong{font-weight:800;font-size:.95rem}
.strip span{font-size:clamp(.95rem,.9rem + .3vw,1.1rem);overflow-wrap:anywhere}
.strip .dot{background:var(--purple)}
@media (min-width:900px){.strip{grid-template-columns:repeat(4,1fr)}.strip div{border-bottom:0}.strip div:last-child{border-right:0}}

/* About */
.about{display:grid;gap:2rem;padding:clamp(4rem,10vw,8rem) var(--pad);max-width:72rem;margin:0 auto}
.about-head{position:relative;padding:2rem 0 0 2.5rem;min-height:clamp(8.5rem,6.5rem + 6vw,11.5rem)}
.about-head .circles{left:0;top:0;transform:none}
h2{font-size:clamp(2.2rem,1.5rem + 3.4vw,4rem)}
.about-body{max-width:38rem}
.about-body .lead{font-size:clamp(1.25rem,1.1rem + .8vw,1.7rem);font-weight:800;color:var(--gold);line-height:1.3;margin:0 0 1rem}
.about-body p{color:#e9e4d6}
@media (min-width:900px){.about{grid-template-columns:1fr 1.4fr;align-items:center}.about-head{min-height:0}}

/* Footer */
.foot{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;align-items:center;padding:1.6rem var(--pad) calc(1.6rem + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.12);font-size:.95rem;color:#cfc9b8}
.foot .logo{font-size:1.4rem;color:#fff}
.foot a{text-decoration:none;color:#fff}
.foot a:hover{color:var(--green)}

:focus-visible{outline:3px solid var(--green);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bee picture,.bee .glow{animation:none}
}