*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:hidden}
body{font-family:'Segoe UI',system-ui,sans-serif;background:#06120b;color:#b7c8bf;overflow-x:hidden;overscroll-behavior-y:none}
#spacer{height:920vh;pointer-events:none}
#scene{position:fixed;inset:0;overflow:hidden;z-index:2}

/* Fireflies */
.star{position:absolute;background:radial-gradient(circle,#fff,rgba(255,255,255,.0) 60%);border-radius:50%;filter:blur(.2px);opacity:.7;animation:fly 4.5s ease-in-out infinite}
@keyframes fly{0%,100%{transform:translate3d(0,0,0);opacity:.35}50%{transform:translate3d(0,-8px,0);opacity:.85}}

/* Farmland rows */
#grid{position:absolute;bottom:0;left:-50%;width:200%;height:62%;
background:
  linear-gradient(rgba(85,180,120,.10) 1px,transparent 1px),
  linear-gradient(90deg,rgba(20,80,45,.10) 1px,transparent 1px),
  repeating-linear-gradient(90deg,rgba(0,0,0,.0) 0 44px,rgba(0,0,0,.18) 44px 46px,rgba(0,0,0,.0) 46px 62px);
background-size:72px 72px,72px 72px,62px 100%;
transform:perspective(320px) rotateX(66deg);transform-origin:center bottom;opacity:.58;
mask:radial-gradient(ellipse at 50% 100%,#000 25%,transparent 72%)}

/* BG Orbs */
.orb{position:absolute;border-radius:50%;filter:blur(110px);pointer-events:none;opacity:.09;transition:opacity 2s}

/* Sky + subtle tech lines overlay */
#scene::before{content:'';position:absolute;inset:-10%;
background:
  radial-gradient(1200px 900px at 20% 15%,rgba(120,255,190,.16),transparent 55%),
  radial-gradient(900px 700px at 85% 10%,rgba(120,190,255,.12),transparent 55%),
  radial-gradient(900px 800px at 65% 70%,rgba(255,206,120,.10),transparent 58%),
  linear-gradient(180deg,rgba(8,26,14,1) 0%,rgba(6,18,11,1) 55%,rgba(2,8,16,1) 100%);
opacity:1;pointer-events:none}
#scene::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.12;
background:
  linear-gradient(90deg,rgba(120,255,190,.12) 1px,transparent 1px),
  linear-gradient(rgba(120,255,190,.10) 1px,transparent 1px);
background-size:180px 180px;mask:radial-gradient(circle at 50% 15%,#000 0 55%,transparent 78%)}

/* === HUMMINGBIRD === */
#bird{--wing-speed:.17s;position:absolute;left:50%;top:50%;z-index:60;pointer-events:none;opacity:1;transform-style:preserve-3d;will-change:transform}
.bird-wrap{position:absolute;left:0;top:0;transform-style:preserve-3d;animation:none}
.bird-hit{position:absolute;left:-112px;top:-82px;width:224px;height:164px;border-radius:999px;background:transparent;pointer-events:auto;cursor:pointer}
.bird-shell{position:absolute;left:0;top:0;width:276px;height:220px;transform:translate(-138px,-110px);transform-style:preserve-3d}
.bird-shell::before{content:'';position:absolute;inset:22px 30px 26px 30px;border-radius:48% 54% 46% 52%;background:radial-gradient(circle at 44% 48%,rgba(20,32,24,.26),rgba(20,32,24,.12) 54%,rgba(20,32,24,0) 78%);filter:blur(10px);opacity:.5;transform:translate3d(3px,6px,-18px);pointer-events:none}
.bird-shell::after{content:'';position:absolute;inset:28px 34px 36px 42px;border-radius:50%;background:radial-gradient(circle at 38% 44%,rgba(255,255,255,.14),rgba(255,246,225,.04) 42%,rgba(16,48,32,0) 76%);filter:blur(12px);opacity:.1;transform:translate3d(2px,4px,-8px);pointer-events:none}
.bird-media{position:absolute;inset:0;transform-style:preserve-3d}
.bird-media.main{filter:drop-shadow(0 10px 18px rgba(0,0,0,.38)) saturate(1.02) contrast(1.03) brightness(.98)}
.bird-gif{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;object-position:center center;user-select:none;-webkit-user-drag:none;pointer-events:none}
[data-state="hover"]{--wing-speed:.15s}
[data-state="perch"]{--wing-speed:.27s}
[data-state="sip"]{--wing-speed:.14s}
[data-state="flee"]{--wing-speed:.1s}
[data-state="perch"] .bird-media.main{filter:drop-shadow(0 8px 15px rgba(0,0,0,.32)) saturate(1.02) contrast(1.03) brightness(.98)}
[data-state="sip"] .bird-media.main{filter:drop-shadow(0 10px 18px rgba(0,0,0,.36)) saturate(1.04) contrast(1.04) brightness(.99)}
[data-state="flee"] .bird-media.main{filter:drop-shadow(0 14px 22px rgba(0,0,0,.42)) saturate(1.05) contrast(1.04) brightness(.99)}
[data-state="hover"] .bird-shell::after,[data-state="sip"] .bird-shell::after{opacity:.34}
[data-state="perch"] .bird-shell::after{opacity:.22}

/* Tiny hearts when pet */
.heart{position:absolute;width:10px;height:10px;transform:rotateZ(45deg);opacity:0;pointer-events:none}
.heart::before,.heart::after{content:'';position:absolute;width:10px;height:10px;border-radius:50%;background:rgba(255,120,190,.85)}
.heart::before{left:-5px}
.heart::after{top:-5px}

/* Trail */
.trail{position:absolute;width:4px;height:4px;border-radius:50%;background:rgba(240,255,250,.36);filter:blur(.3px);pointer-events:none;will-change:transform,opacity}

/* === NAV === */
nav{position:fixed;top:0;left:0;width:100%;z-index:9999;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,4vw,50px);transition:.4s;border-bottom:1px solid transparent}
nav.vis{background:rgba(6,18,11,.78);backdrop-filter:blur(26px);border-color:rgba(120,255,190,.10)}
.logo{font-weight:800;font-size:1.25em;display:flex;align-items:center;gap:10px;cursor:pointer}
.logo img{width:34px;height:34px;display:block;object-fit:cover;border-radius:50%;filter:drop-shadow(0 8px 16px rgba(0,0,0,.28))}
.logo b{background:linear-gradient(135deg,#7affb8,#ffcf66);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nlinks{display:flex;gap:4px;list-style:none}
.nlinks a{color:#556;text-decoration:none;padding:7px 15px;border-radius:20px;font-size:.82em;font-weight:600;transition:.3s;cursor:pointer}
.nlinks a:hover,.nlinks a.on{color:#fff;background:rgba(120,255,190,.12)}
.nav-actions{display:flex;align-items:center;gap:10px}
.nbtn{padding:8px 20px;background:linear-gradient(135deg,#7affb8,#27d37b);color:#02120b;border:none;border-radius:20px;font-weight:800;font-size:.8em;cursor:pointer;transition:.3s;text-decoration:none}
.nbtn:hover{box-shadow:0 0 25px rgba(120,255,190,.28)}
.mmenu{display:none;background:none;border:none;color:#fff;font-size:1.5em;cursor:pointer}

/* Section dots */
#dots{position:fixed;right:clamp(12px,2vw,30px);top:50%;transform:translateY(-50%);z-index:9998;display:flex;flex-direction:column;gap:14px}
.dot{width:10px;height:10px;border-radius:50%;border:1.5px solid rgba(255,255,255,.15);cursor:pointer;transition:.4s;position:relative}
.dot.on{border-color:#00e676;background:#00e676;box-shadow:0 0 12px rgba(0,230,118,.5)}
.dot::after{content:attr(data-label);position:absolute;right:20px;top:50%;transform:translateY(-50%);color:#888;font-size:.7em;white-space:nowrap;opacity:0;transition:.3s;pointer-events:none}
.dot:hover::after{opacity:1}

/* === PANELS === */
.panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:80px clamp(20px,5vw,60px) 0 clamp(20px,5vw,60px);pointer-events:none;will-change:transform,opacity,filter;transform-style:preserve-3d}
.panel>div{pointer-events:auto;max-width:1200px;width:100%;max-height:100%;overflow-y:auto;padding:20px 0 80px 0;scrollbar-width:none}
.panel>div::-webkit-scrollbar{display:none}
.panel.off>div{pointer-events:none}

/* Hero */
.hero{max-width:1240px!important;margin:0 auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(22px,4vw,52px);align-items:center}
.hero-c{max-width:none!important;min-height:clamp(360px,60vh,500px);display:flex;flex-direction:column;justify-content:center;
padding:clamp(28px,4vw,42px);border-radius:28px;border:1px solid rgba(255,255,255,.08);
background:
  radial-gradient(360px 220px at 16% 18%,rgba(122,255,184,.10),transparent 72%),
  radial-gradient(420px 260px at 84% 0%,rgba(255,207,102,.10),transparent 74%),
  linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
box-shadow:0 30px 110px rgba(0,0,0,.32);backdrop-filter:blur(6px)}
.hero-visual{position:relative;min-height:clamp(380px,62vh,540px);border-radius:30px;overflow:hidden;border:1px solid rgba(255,255,255,.10);
background:
  radial-gradient(420px 280px at 24% 22%,rgba(255,205,116,.16),transparent 68%),
  radial-gradient(420px 260px at 82% 12%,rgba(122,255,184,.12),transparent 70%),
  linear-gradient(180deg,rgba(21,58,35,.96),rgba(7,18,11,.98));
box-shadow:0 32px 120px rgba(0,0,0,.42);isolation:isolate}
.hero-visual::before{content:'';position:absolute;inset:-8%;pointer-events:none;opacity:.7;
background:
  radial-gradient(300px 180px at 18% 20%,rgba(255,224,143,.18),transparent 72%),
  radial-gradient(260px 160px at 74% 18%,rgba(120,220,255,.10),transparent 72%);
animation:heroGlowShift 9s ease-in-out infinite}
.hero-visual::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.26;
background:
  linear-gradient(90deg,rgba(122,255,184,.08) 1px,transparent 1px),
  linear-gradient(rgba(122,255,184,.05) 1px,transparent 1px);
background-size:110px 110px;
mask:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.55) 20%,rgba(0,0,0,.9) 75%,transparent)}
.hero-scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-sun{transform-origin:210px 172px;animation:heroSunPulse 6.8s ease-in-out infinite}
.hero-cloud{animation:heroCloudDrift 28s linear infinite;opacity:.22}
.hero-cloud.b{animation-duration:36s;animation-delay:-11s;opacity:.16}
.hero-rows{animation:heroRowsWave 4.8s ease-in-out infinite;transform-origin:50% 72%}
.hero-circuit{animation:heroCircuitPulse 4.5s ease-in-out infinite}
.hero-drone{animation:heroDronePath 8.8s ease-in-out infinite;transform-origin:50% 50%}
.hero-tech{position:absolute;top:18px;right:18px;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;z-index:4}
.hero-chip{padding:8px 12px;border-radius:999px;border:1px solid rgba(122,255,184,.18);background:rgba(5,18,11,.48);color:#d2efe0;
font-size:.72em;font-weight:700;letter-spacing:.03em;backdrop-filter:blur(14px);box-shadow:0 12px 30px rgba(0,0,0,.16);animation:heroChipFloat 4.8s ease-in-out infinite}
.hero-chip:nth-child(2){animation-delay:-2.1s}
.hero-farmer{position:absolute;left:18px;bottom:18px;width:min(280px,44%);z-index:2;filter:drop-shadow(0 22px 40px rgba(0,0,0,.35));animation:heroFarmerLift 5.6s ease-in-out infinite}
.hero-farmer svg{display:block;width:100%;height:auto}
.hero-tablet{position:absolute;right:18px;bottom:18px;width:min(350px,58%);aspect-ratio:4/3;border-radius:24px;z-index:5;
background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03));
border:1px solid rgba(120,255,190,.16);box-shadow:0 26px 90px rgba(0,0,0,.38);backdrop-filter:blur(12px);
transform:rotate(-4deg);animation:heroTabletFloat 5.8s ease-in-out infinite}
.hero-tablet::before{content:'';position:absolute;inset:12px;border-radius:18px;
background:
  radial-gradient(circle at 18% 22%,rgba(120,255,190,.20),transparent 48%),
  radial-gradient(circle at 82% 28%,rgba(255,207,102,.16),transparent 42%),
  linear-gradient(180deg,rgba(2,10,7,.92),rgba(4,12,8,.76));
border:1px solid rgba(255,255,255,.08)}
.hero-screen{position:absolute;inset:14px;border-radius:18px;padding:14px;display:grid;grid-template-rows:auto auto 1fr auto;gap:12px;z-index:1}
.hero-topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#d7f1e2;font-size:.75em;font-weight:700}
.hero-dots{display:flex;gap:6px}
.hero-dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.26)}
.hero-dots span:nth-child(1){background:#7affb8}
.hero-dots span:nth-child(2){background:#ffcf66}
.hero-headline{padding:12px 14px;border-radius:15px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04)}
.hero-headline small{display:block;color:#88b39d;font-size:.68em;letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px}
.hero-headline strong{display:block;color:#fff;font-size:1.02em;line-height:1.25;margin-bottom:5px}
.hero-headline span{display:block;color:#97b6a4;font-size:.74em;line-height:1.45}
.hero-status{padding:5px 9px;border-radius:999px;background:rgba(122,255,184,.10);border:1px solid rgba(122,255,184,.18);font-size:.66em;color:#dff8e9}
.hero-ui-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:10px}
.hero-ui-map{position:relative;min-height:148px;border-radius:15px;border:1px solid rgba(255,255,255,.08);overflow:hidden;
background:
  radial-gradient(circle at 28% 30%,rgba(122,255,184,.16),transparent 18%),
  radial-gradient(circle at 70% 64%,rgba(255,207,102,.14),transparent 18%),
  linear-gradient(145deg,rgba(11,31,19,.95),rgba(7,17,11,.88))}
.hero-ui-map::before{content:'';position:absolute;inset:0;opacity:.46;
background:
  repeating-linear-gradient(90deg,transparent 0 24px,rgba(122,255,184,.08) 24px 26px),
  repeating-linear-gradient(0deg,transparent 0 22px,rgba(122,255,184,.07) 22px 24px)}
.hero-ui-map::after{content:'';position:absolute;inset:-10% auto -10% -34%;width:65%;
background:linear-gradient(90deg,transparent,rgba(122,255,184,.20),transparent);
transform:skewX(-18deg);animation:heroScan 4.4s ease-in-out infinite}
.hero-map-label{position:absolute;left:12px;top:12px;padding:6px 10px;border-radius:999px;background:rgba(3,13,8,.7);border:1px solid rgba(122,255,184,.14);color:#d8f3e0;font-size:.68em;font-weight:700;z-index:1}
.hero-map-route{position:absolute;left:14px;right:14px;bottom:44px;height:52px;z-index:1}
.hero-map-route svg{width:100%;height:100%}
.hero-map-pins{position:absolute;left:14px;right:14px;bottom:12px;display:flex;gap:8px;z-index:1}
.hero-map-pins span{flex:1;padding:7px 8px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);color:#cce7d8;font-size:.66em;text-align:center}
.hero-ui-stack{display:grid;grid-template-rows:repeat(2,1fr);gap:10px}
.hero-ui-card{border-radius:15px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);padding:12px}
.hero-ui-card b{display:block;color:#fff;font-size:.76em;margin-bottom:8px}
.hero-ui-card span{display:block;color:#8fb09e;font-size:.69em}
.hero-bars{display:grid;gap:6px;margin-top:8px}
.hero-bars span{display:block;height:8px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.hero-bars span::after{content:'';display:block;height:100%;width:58%;border-radius:inherit;background:linear-gradient(90deg,#7affb8,#ffcf66);animation:heroBarSweep 2.8s ease-in-out infinite}
.hero-bars span:nth-child(2)::after{width:72%;animation-delay:-1s}
.hero-bars span:nth-child(3)::after{width:44%;animation-delay:-1.7s}
.hero-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04)}
.hero-metric strong{display:block;color:#fff;font-size:.83em}
.hero-metric span{display:block;color:#86aa96;font-size:.66em;margin-top:3px}
.hero-route{width:118px;height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.hero-route::after{content:'';display:block;height:100%;width:38%;border-radius:inherit;background:linear-gradient(90deg,#7affb8,#4de0ff);animation:heroRouteFlow 3.2s ease-in-out infinite}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:57% 50%;filter:saturate(1.05) contrast(1.04) brightness(.98);transform:scale(1.04);animation:heroPhotoFloat 18s ease-in-out infinite}
.hero-photo-glow{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.9;
background:
  radial-gradient(340px 220px at 12% 26%,rgba(255,221,150,.28),transparent 72%),
  radial-gradient(220px 160px at 28% 72%,rgba(122,255,184,.12),transparent 72%),
  linear-gradient(180deg,rgba(4,10,8,.02),rgba(4,10,8,.24) 65%,rgba(4,10,8,.46))}
.how-shell{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(320px,.74fr);gap:clamp(18px,3vw,34px);align-items:center}
.how-main{min-width:0}
.how-shell .steps{grid-template-columns:repeat(2,1fr)}
.how-visual{position:relative;min-height:clamp(360px,56vh,470px);overflow:visible;isolation:isolate}
.how-visual::before{content:'';position:absolute;inset:10% 6% 12% 10%;pointer-events:none;opacity:.5;border-radius:46% 54% 42% 48%;
 background:
   radial-gradient(220px 180px at 20% 78%,rgba(255,220,150,.18),transparent 72%),
   radial-gradient(260px 200px at 72% 24%,rgba(122,255,184,.14),transparent 72%),
   radial-gradient(260px 200px at 54% 56%,rgba(255,255,255,.05),transparent 76%);
 filter:blur(20px)}
.how-botanical{position:absolute;inset:-12% -14% -16% -16%;width:auto;height:auto;z-index:4;pointer-events:none;overflow:visible;filter:drop-shadow(0 26px 42px rgba(0,0,0,.24))}
.how-botanical .sway{transform-origin:center;animation:heroBotanicalSway 6.4s ease-in-out infinite}
.how-botanical .leaf{fill:#6ea95b}
.how-botanical .stem{fill:none;stroke:#7ea565;stroke-linecap:round;stroke-linejoin:round}
.how-botanical .stem.fine{stroke:#8eb76f}
.how-botanical .petal{animation:heroPetalPulse 3.1s ease-in-out infinite}
.how-botanical .petal.alt{animation-delay:-1.15s}
.how-botanical .bloom-core{fill:#ffd96e}
.how-perch{position:absolute;z-index:5;width:28px;height:28px;border-radius:50%;opacity:0;pointer-events:none}
.how-perch.branch{right:88px;top:132px}
.how-perch.flower{right:38px;top:170px}
.hero-live-screen{position:absolute;left:6.8%;bottom:14%;width:39%;aspect-ratio:1.05;border-radius:24px;z-index:6;overflow:hidden;
transform:rotate(2.4deg);border:1px solid rgba(122,255,184,.22);box-shadow:0 18px 55px rgba(0,0,0,.16)}
.hero-live-screen::before{content:'';position:absolute;inset:0;
background:
  radial-gradient(circle at 22% 28%,rgba(122,255,184,.18),transparent 24%),
  radial-gradient(circle at 72% 30%,rgba(255,207,102,.16),transparent 24%),
  linear-gradient(135deg,rgba(0,0,0,.05),rgba(255,255,255,.02) 50%,rgba(0,0,0,.12))}
.hero-live-screen::after{content:'';position:absolute;inset:-10% auto -10% -34%;width:72%;
background:linear-gradient(90deg,transparent,rgba(122,255,184,.26),transparent);
transform:skewX(-18deg);animation:heroScreenScan 4.6s ease-in-out infinite}
.hero-live-grid{position:absolute;inset:0;opacity:.46;
background:
  repeating-linear-gradient(90deg,transparent 0 26px,rgba(122,255,184,.08) 26px 28px),
  repeating-linear-gradient(0deg,transparent 0 24px,rgba(122,255,184,.06) 24px 26px)}
.hero-live-badge{position:absolute;left:12px;top:12px;padding:6px 10px;border-radius:999px;background:rgba(3,13,8,.64);border:1px solid rgba(122,255,184,.14);color:#e4faef;font-size:.66em;font-weight:800;letter-spacing:.03em}
.hero-live-pill{position:absolute;right:12px;bottom:12px;padding:7px 10px;border-radius:999px;background:rgba(3,13,8,.68);border:1px solid rgba(255,255,255,.08);color:#d6efe2;font-size:.64em;font-weight:700}
.hero-live-ring{position:absolute;border-radius:50%;border:1.5px solid rgba(122,255,184,.34);box-shadow:0 0 0 6px rgba(122,255,184,.08);animation:heroPing 2.8s ease-out infinite}
.hero-live-ring.r1{left:18%;top:28%;width:18px;height:18px}
.hero-live-ring.r2{left:61%;top:46%;width:14px;height:14px;animation-delay:-1.1s}
.hero-live-ring.r3{left:48%;top:70%;width:16px;height:16px;animation-delay:-2s}
.hero-hud{position:absolute;z-index:7;padding:10px 12px;border-radius:16px;background:rgba(4,14,9,.62);border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(18px);box-shadow:0 16px 40px rgba(0,0,0,.18);animation:heroHudFloat 5.6s ease-in-out infinite}
.hero-hud b{display:block;color:#fff;font-size:.75em;margin-bottom:4px}
.hero-hud span{display:block;color:#bcdccc;font-size:.67em;line-height:1.45}
.hero-hud-a{right:18px;top:92px;animation-delay:-1.8s}
.hero-hud-b{left:18px;bottom:24px;animation-delay:-3.1s}
@keyframes heroPhotoFloat{0%,100%{transform:scale(1.04) translate3d(0,0,0)}35%{transform:scale(1.08) translate3d(-1.2%,-.8%,0)}70%{transform:scale(1.06) translate3d(.9%,.7%,0)}}
@keyframes heroScreenScan{0%,100%{transform:translateX(0) skewX(-18deg)}50%{transform:translateX(185%) skewX(-18deg)}}
@keyframes heroPing{0%{transform:scale(.4);opacity:.78}70%{transform:scale(1.55);opacity:0}100%{transform:scale(1.8);opacity:0}}
@keyframes heroHudFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes heroBotanicalSway{0%,100%{transform:rotate(0deg) translateY(0)}50%{transform:rotate(1.6deg) translateY(-4px)}}
@keyframes heroPetalPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes heroGlowShift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(1.5%,-1%,0) scale(1.04)}}
@keyframes heroSunPulse{0%,100%{transform:scale(1);opacity:.94}50%{transform:scale(1.05);opacity:1}}
@keyframes heroCloudDrift{from{transform:translateX(-180px)}to{transform:translateX(1040px)}}
@keyframes heroRowsWave{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes heroCircuitPulse{0%,100%{opacity:.18}50%{opacity:.42}}
@keyframes heroDronePath{0%,100%{transform:translate(0,0)}25%{transform:translate(14px,-8px)}50%{transform:translate(28px,6px)}75%{transform:translate(12px,14px)}}
@keyframes heroChipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes heroFarmerLift{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes heroTabletFloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(-2deg)}}
@keyframes heroScan{0%,100%{transform:translateX(0) skewX(-18deg)}50%{transform:translateX(175%) skewX(-18deg)}}
@keyframes heroBarSweep{0%,100%{transform:translateX(-18%)}50%{transform:translateX(82%)}}
@keyframes heroRouteFlow{0%,100%{transform:translateX(-10%)}50%{transform:translateX(160%)}}
@media(max-width:980px){.hero{grid-template-columns:1fr;max-width:920px!important}.hero-c{padding:26px 22px}.hero-visual{min-height:420px}.hero-live-screen{width:35%;left:7.5%;bottom:13%}.hero-hud-a{top:88px}.hero-hud-b{bottom:18px}.how-shell{grid-template-columns:1fr}.how-visual{min-height:360px}.how-perch.branch{right:66px;top:118px}.how-perch.flower{right:20px;top:152px}}
@media(max-width:680px){.hero-visual{min-height:360px}.hero-photo{object-position:58% 52%}.hero-tech{left:16px;right:16px;justify-content:flex-start}.hero-live-screen{width:44%;left:8%;bottom:12%}.hero-hud{padding:9px 10px;max-width:170px}.hero-hud-a{right:12px;top:82px}.hero-hud-b{left:12px;bottom:16px}.how-shell .steps{grid-template-columns:1fr}.how-visual{min-height:320px}.how-perch.branch{right:48px;top:104px}.how-perch.flower{right:10px;top:138px}.hero-c{min-height:auto}}
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:20px;font-size:.76em;font-weight:600;background:rgba(0,230,118,.08);border:1px solid rgba(0,230,118,.12);color:#00e676;margin-bottom:18px;letter-spacing:.04em}
.bdot{width:5px;height:5px;border-radius:50%;background:#00e676;animation:bldot 1.5s infinite}
@keyframes bldot{0%,100%{opacity:1}50%{opacity:.2}}
.hero-c h1{font-size:clamp(2.2rem,5.5vw,4.8rem);color:#fff;line-height:1.06;letter-spacing:-.03em;margin-bottom:16px}
.hero-c h1 em{font-style:normal;background:linear-gradient(135deg,#00e676,#00c853,#ffab00);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% 200%;animation:gx 5s ease infinite}
@keyframes gx{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero-c p{color:#6f857a;line-height:1.75;margin-bottom:28px;font-size:clamp(.92rem,1.4vw,1.14rem)}
.hbtns{display:flex;gap:12px;flex-wrap:wrap}
.hb{padding:13px 28px;border-radius:12px;font-size:.92em;font-weight:700;cursor:pointer;transition:.4s;text-decoration:none;display:inline-flex;align-items:center;gap:7px;border:none}
.hb1{background:linear-gradient(135deg,#7affb8,#27d37b);color:#02120b;box-shadow:0 0 35px rgba(120,255,190,.18)}
.hb1:hover{box-shadow:0 0 55px rgba(0,230,118,.45);transform:translateY(-2px) scale(1.04)}
.hb2{background:rgba(255,255,255,.04);color:#ccc;border:1px solid rgba(255,255,255,.08)!important}
.hb2:hover{background:rgba(255,255,255,.08);transform:translateY(-2px)}

/* Offerings */
.off-g{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:10px}
.ocard{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:clamp(20px,2.5vw,30px);cursor:pointer;transition:.5s;position:relative;overflow:hidden;transform-style:preserve-3d}
.ocard::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(0,230,118,.08),transparent 60%);opacity:0;transition:.4s}
.ocard:hover::before{opacity:1}
.ocard:hover{border-color:rgba(0,230,118,.2);transform:perspective(600px) translateZ(15px) scale(1.02);box-shadow:0 20px 60px rgba(0,0,0,.3)}
.ocard .oi{font-size:1.6em;margin-bottom:10px;display:block}
.ocard h3{color:#fff;font-size:.98em;margin-bottom:5px}
.ocard p{color:#b7c8bf;font-size:.78em;line-height:1.55}
.hl{outline:2px solid rgba(0,230,118,.35);box-shadow:0 0 0 4px rgba(0,230,118,.08),0 30px 70px rgba(0,0,0,.35)!important;transform:perspective(600px) translateZ(20px) scale(1.03)!important;transition:outline .25s,box-shadow .25s}

/* Feature modal */
.modal{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.55);backdrop-filter:blur(10px)}
.modal.open{display:flex}
.modal-card{width:min(920px,92vw);max-height:min(82vh,780px);overflow:auto;border-radius:22px;
background:linear-gradient(160deg,rgba(8,26,14,.92),rgba(2,10,7,.92));
border:1px solid rgba(120,255,190,.12);box-shadow:0 35px 120px rgba(0,0,0,.55);padding:18px 18px 16px}
.modal-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:6px 6px 12px;border-bottom:1px solid rgba(255,255,255,.06)}
.modal-top h3{color:#fff;font-size:1.15em}
.modal-top p{color:#6f857a;font-size:.84em;line-height:1.6;margin-top:6px;max-width:70ch}
.xbtn{width:42px;height:42px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:#fff;font-weight:900;cursor:pointer;transition:.25s}
.xbtn:hover{background:rgba(120,255,190,.10);border-color:rgba(120,255,190,.18)}
.modal-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;padding:14px 6px 6px}
.modal-grid h4{color:#fff;font-size:.9em;margin:12px 0 8px}
.modal-grid ul{list-style:none}
.modal-grid li{padding:8px 0;color:#8aa196;font-size:.82em;border-bottom:1px solid rgba(255,255,255,.05);display:flex;gap:10px;align-items:flex-start}
.modal-grid li::before{content:'🌿';opacity:.9}
.kbox{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:14px}
.kbox b{display:block;color:#fff;font-size:.86em;margin-bottom:8px}
.kbox span{display:block;color:#6f857a;font-size:.78em;line-height:1.6}
@media(max-width:900px){.modal-grid{grid-template-columns:1fr}}

/* How it works */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.step{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:18px;padding:18px;position:relative;overflow:hidden}
.step b{display:block;color:#fff;font-size:.92em;margin-bottom:6px}
.step p{color:#b7c8bf;font-size:.78em;line-height:1.55}
.step .num{position:absolute;right:14px;top:12px;font-weight:900;color:rgba(255,255,255,.08);font-size:2.2em;letter-spacing:-.04em}

/* Proof / metrics */
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.metric{background:linear-gradient(160deg,rgba(0,230,118,.06),rgba(255,255,255,.02));border:1px solid rgba(0,230,118,.12);border-radius:18px;padding:20px}
.metric strong{display:block;color:#fff;font-size:1.35em;letter-spacing:-.02em}
.metric span{display:block;color:#b7c8bf;font-size:.78em;margin-top:6px;line-height:1.5}

/* Testimonials */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tcard{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:18px;padding:20px}
.tcard p{color:#cce7d8;font-size:.82em;line-height:1.65;margin-bottom:12px}
.tcard strong{color:#fff;font-size:.85em}
.tcard span{display:block;color:#a0b8aa;font-size:.72em;margin-top:2px}

/* FAQ */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:12px}
details{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:16px;padding:14px 16px}
summary{cursor:pointer;color:#fff;font-weight:700;font-size:.88em;list-style:none}
summary::-webkit-details-marker{display:none}
details p{color:#b7c8bf;font-size:.8em;line-height:1.6;margin-top:10px}

/* Pricing */
.pr-g{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:10px;align-items:start}
.pcard{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:20px;padding:clamp(24px,3vw,36px) clamp(18px,2vw,26px);text-align:center;transition:.5s;transform-style:preserve-3d;position:relative}
.pcard:hover{border-color:rgba(0,230,118,.2);box-shadow:0 20px 60px rgba(0,0,0,.3);transform:perspective(600px) translateZ(15px)}
.pcard.pop{background:linear-gradient(160deg,rgba(0,230,118,.06),rgba(0,200,83,.02));border-color:rgba(0,230,118,.2);transform:scale(1.05) translateZ(10px);box-shadow:0 25px 70px rgba(0,0,0,.3)}
.pcard.pop:hover{transform:scale(1.08) translateZ(20px)}
.pop-badge{position:absolute;top:-1px;left:50%;transform:translateX(-50%);background:#00e676;color:#000;padding:3px 16px;border-radius:0 0 8px 8px;font-size:.65em;font-weight:800;letter-spacing:.05em}
.pcard h3{color:#fff;font-size:1.05em;margin-bottom:2px}
.pcard .psub{color:#a0b8aa;font-size:.75em;margin-bottom:12px}
.pprice{font-size:clamp(2rem,3.5vw,2.8rem);font-weight:800;color:#fff;line-height:1}
.pprice small{font-size:.3em;color:#b7c8bf;font-weight:400}
.pcard .pnote{color:#a0b8aa;font-size:.72em;margin:5px 0 16px}
.pfl{list-style:none;text-align:left;margin-bottom:20px}
.pfl li{padding:5px 0;font-size:.78em;color:#cce7d8;display:flex;align-items:center;gap:6px;border-bottom:1px solid rgba(255,255,255,.03)}
.pfl li::before{content:'✓';color:#00e676;font-weight:700;font-size:.8em}
.pbtn{display:block;width:100%;padding:11px;border-radius:12px;font-size:.85em;font-weight:700;cursor:pointer;transition:.4s;border:none}
.pb1{background:#00e676;color:#000;box-shadow:0 0 25px rgba(0,230,118,.2)}
.pb1:hover{box-shadow:0 0 40px rgba(0,230,118,.4)}
.pb2{background:transparent;color:#00e676;border:1.5px solid rgba(0,230,118,.2)!important}
.pb2:hover{background:rgba(0,230,118,.06)}

/* Contact */
.ct-g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(25px,4vw,50px);align-items:start}
.ct-info h3{color:#fff;font-size:clamp(1.4rem,2.5vw,1.8rem);margin-bottom:10px}
.ct-info>p{color:#cce7d8;line-height:1.7;margin-bottom:22px;font-size:.92em}
.ci{display:flex;align-items:center;gap:12px;padding:13px;border-radius:12px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);margin-bottom:8px;transition:.4s;cursor:pointer;text-decoration:none;color:inherit}
.ci:hover{border-color:rgba(0,230,118,.2);transform:translateX(6px)}
.cii{width:42px;height:42px;border-radius:10px;background:rgba(0,230,118,.08);display:flex;align-items:center;justify-content:center;font-size:1.2em;flex-shrink:0}
.ci strong{color:#fff;font-size:.85em;display:block}
.ci span{color:#a0b8aa;font-size:.72em}
.cform{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:20px;padding:clamp(20px,3vw,32px);transition:.5s}
.cform:hover{border-color:rgba(0,230,118,.1)}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fg{margin-bottom:10px}
.fg label{display:block;font-size:.72em;color:#b7c8bf;margin-bottom:4px;font-weight:500}
.fg input,.fg textarea,.fg select{width:100%;padding:10px 13px;border-radius:10px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);color:#fff;font-size:.84em;outline:none;transition:.3s;font-family:inherit}
.fg input:focus,.fg textarea:focus,.fg select:focus{border-color:#00e676;box-shadow:0 0 0 2px rgba(0,230,118,.08)}
.fg textarea{resize:vertical;min-height:70px}
.fg select option{background:#0a0f1c}
.sbtn{width:100%;padding:12px;border-radius:12px;background:#00e676;color:#000;font-size:.9em;font-weight:700;border:none;cursor:pointer;transition:.4s}
.sbtn:hover{box-shadow:0 0 35px rgba(0,230,118,.35)}

/* Section Title */
.stitle{margin-bottom:clamp(20px,3vh,35px)}
.stitle h2{font-size:clamp(1.6rem,3.5vw,2.6rem);color:#fff;margin-bottom:6px}
.stitle h2 em{font-style:normal;background:linear-gradient(135deg,#00e676,#ffab00);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stitle p{color:#cce7d8;font-size:.9em;max-width:450px;line-height:1.6}

/* Lightweight rendering mode */
body.lite-ui .panel{will-change:transform,opacity}
body.lite-ui nav.vis,
body.lite-ui .hero-c,
body.lite-ui .hero-chip,
body.lite-ui .hero-tablet,
body.lite-ui .hero-live-screen,
body.lite-ui .hero-hud,
body.lite-ui .modal,
body.lite-ui .nlinks.open{backdrop-filter:none}
body.lite-ui .star{animation:none;opacity:.28}
body.lite-ui .orb{filter:blur(72px);opacity:.06}
body.lite-ui .bird-shell::before,
body.lite-ui .bird-shell::after{display:none}
body.lite-ui .bird-media.main,
body.lite-ui [data-state="perch"] .bird-media.main,
body.lite-ui [data-state="sip"] .bird-media.main,
body.lite-ui [data-state="flee"] .bird-media.main{filter:drop-shadow(0 8px 14px rgba(0,0,0,.28))}
body.lite-ui .hero-visual::before,
body.lite-ui .hero-photo{animation:none}
body.lite-ui .hero-visual::before{opacity:.34}
body.lite-ui .hero-photo{transform:none}
body.lite-ui .hero-photo-glow{opacity:.56}
body.lite-ui .how-botanical .sway,
body.lite-ui .how-botanical .petal{animation:none}
body.lite-ui .trail{display:none}

/* Responsive */
@media(max-width:900px){
  .off-g{grid-template-columns:1fr}
  .pr-g{grid-template-columns:1fr}
  .pcard.pop{transform:scale(1)}
  .ct-g{grid-template-columns:1fr}
  .fr{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr}
  .tgrid{grid-template-columns:1fr}
  .faq{grid-template-columns:1fr}
  .hero{grid-template-columns:1fr}
  .panel{align-items:center;padding-top:80px}
}
@media(max-width:700px){
  .mmenu{display:block}
  .nlinks,.nbtn{display:none}
  .nlinks.open{display:flex;position:fixed;top:60px;left:0;width:100%;flex-direction:column;align-items:center;background:rgba(2,8,16,.95);backdrop-filter:blur(30px);padding:20px;gap:6px;z-index:9999}
  #dots{display:none}
  .hero-c h1{font-size:clamp(1.8rem,4vw,2.4rem)}
}

@media(max-width:800px){
  #spacer { display: none !important; }
  body { overscroll-behavior-y: auto !important; height: auto !important; }
  #scene { position: static !important; }
  #grid, .orb, #starsBox, #trailBox { position: fixed !important; z-index: -1 !important; }
  #bird { position: fixed !important; z-index: 60 !important; }
  .panel { 
    position: relative !important; 
    inset: auto !important; 
    display: block !important; 
    padding: 0 !important; 
    margin: 0 !important;
    transform: none !important; 
    opacity: 1 !important; 
    pointer-events: auto !important; 
    filter: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  .panel:last-child { border-bottom: none !important; }
  .panel.off { display: block !important; }
  .panel > div {
    max-height: none !important;
    overflow-y: visible !important;
    padding: 60px 20px 40px !important;
  }
  .how-visual { 
    transform: scale(0.6) !important;
    transform-origin: right center !important;
    margin-top: -60px !important;
    margin-bottom: -110px !important; 
  }
}