:root{
  --sky:#78dcff;
  --sky2:#c9f4ff;
  --deep:#087db4;
  --water:#19b7e8;
  --water2:#72e8ff;
  --green:#39af5a;
  --green2:#79d879;
  --lime:#d9fb80;
  --ink:#0c4760;
  --white:#fff;
  --glass:rgba(255,255,255,.42);
  --glass-border:rgba(255,255,255,.72);
  --shadow:0 28px 80px rgba(9,83,109,.22);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);font-family:"Trebuchet MS",Arial,sans-serif;
  background:
    radial-gradient(circle at 76% 9%,rgba(255,255,255,.95) 0 7%,transparent 20%),
    linear-gradient(180deg,var(--sky) 0%,#b4efff 45%,#83e8ed 100%);
  min-height:100vh;overflow-x:hidden;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.14;z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.8) 1px,transparent 1px);
  background-size:18px 18px;mask-image:linear-gradient(to bottom,black,transparent 85%);
}
.sky-noise{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.18;background:
  repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 4px)}
.sun{
  position:fixed;right:7vw;top:2vw;width:min(24vw,260px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#fff 0 9%,#fffde2 10% 29%,#ffe56b 30% 62%,#ffc63b 63% 100%);
  box-shadow:0 0 70px #ffe978,0 0 120px rgba(255,255,255,.8);z-index:0;opacity:.96;
}
.topbar,main,footer{position:relative;z-index:2}
.topbar{
  display:flex;align-items:center;justify-content:space-between;padding:22px clamp(18px,4vw,64px);
  position:sticky;top:0;z-index:20;background:linear-gradient(180deg,rgba(101,211,246,.72),rgba(101,211,246,.12));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#085477}
.brand-orb{width:42px;height:42px;border-radius:50%;display:block;background:
  radial-gradient(circle at 32% 26%,#fff 0 9%,transparent 10%),
  radial-gradient(circle at 60% 68%,#43bd64 0 22%,transparent 23%),
  linear-gradient(145deg,#9df4ff,#1da9dd);border:2px solid rgba(255,255,255,.9);box-shadow:0 8px 22px rgba(0,109,164,.2)}
.brand b{display:block;letter-spacing:.05em;font-size:14px}
.brand b span{color:#209f58}
.brand small{font-size:9px;opacity:.72;letter-spacing:.08em}
nav{display:flex;align-items:center;gap:10px}
nav a,.glass-btn{font:inherit;color:#0a5572;text-decoration:none;border:1px solid rgba(255,255,255,.62);background:rgba(255,255,255,.24);padding:10px 14px;border-radius:999px;transition:.2s;cursor:pointer}
nav a:hover,.glass-btn:hover{background:rgba(255,255,255,.55);transform:translateY(-2px)}
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);gap:30px;align-items:center;max-width:1360px;margin:0 auto;padding:68px clamp(18px,4vw,64px) 40px;min-height:720px}
.hero-copy{padding-bottom:20px}
.pill,.eyebrow{font-size:11px;letter-spacing:.18em;font-weight:800}
.pill{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:999px;background:rgba(255,255,255,.48);border:1px solid rgba(255,255,255,.72);box-shadow:0 9px 25px rgba(0,91,130,.1)}
.pill i,.live i{width:8px;height:8px;border-radius:50%;background:#3ad568;box-shadow:0 0 0 5px rgba(58,213,104,.16);display:inline-block}
h1{font-family:Georgia,serif;font-size:clamp(50px,7vw,96px);line-height:.92;letter-spacing:-.055em;margin:24px 0 18px;color:#073f58;text-shadow:0 2px 0 rgba(255,255,255,.35)}
h1 span{color:#fff;text-shadow:0 3px 0 rgba(22,128,155,.15)}
.lead{font-size:clamp(17px,1.6vw,22px);line-height:1.55;max-width:680px;margin:0;color:#0c5370}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0}
.main-btn,.secondary-btn{border:0;font:inherit;font-weight:800;padding:15px 20px;border-radius:18px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:14px;transition:.2s}
.main-btn{color:#0e5b37;background:linear-gradient(#f6ffbd,#d6f77d);box-shadow:0 16px 30px rgba(75,140,74,.2),inset 0 2px 0 rgba(255,255,255,.9)}
.main-btn span{font-size:22px}
.secondary-btn{background:rgba(255,255,255,.4);color:#075b78;border:1px solid rgba(255,255,255,.72)}
.main-btn:hover,.secondary-btn:hover{transform:translateY(-3px) rotate(-.4deg)}
.mini-stats{display:flex;gap:26px;flex-wrap:wrap}
.mini-stats div{display:grid;gap:2px}.mini-stats strong{font-size:18px}.mini-stats span{font-size:10px;letter-spacing:.11em;text-transform:uppercase;opacity:.68}
.hero-art{height:640px;position:relative;overflow:hidden;border-radius:42px;isolation:isolate;background:
  linear-gradient(180deg,rgba(255,255,255,.34),rgba(11,173,216,.24)),
  linear-gradient(180deg,#85e2ff 0 42%,#38d9ee 43% 53%,#30c7e2 54% 100%);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.55)}
.hero-art:after{content:"";position:absolute;inset:auto -12% -23% -12%;height:55%;border-radius:50%;background:radial-gradient(ellipse at center,#8ef2f1 0 42%,#26aee0 43% 100%);filter:blur(1px);z-index:0}
.glass-card{position:absolute;top:44px;left:42px;right:42px;z-index:8;padding:18px 18px 14px;border-radius:26px;background:rgba(255,255,255,.36);border:1px solid rgba(255,255,255,.76);box-shadow:0 20px 45px rgba(14,94,125,.15);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.card-top{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.16em;font-weight:900}.led{width:9px;height:9px;border-radius:50%;background:#71ee8c;box-shadow:0 0 12px #71ee8c}.dots{margin-left:auto;opacity:.6}
.meter{height:8px;margin:18px 0 14px;background:rgba(255,255,255,.5);border-radius:99px;overflow:hidden}.meter span{display:block;width:86%;height:100%;background:linear-gradient(90deg,#39c767,#e4fb78);border-radius:99px;animation:load 2.8s ease-in-out infinite alternate}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.card-grid div{display:grid;gap:2px}.card-grid small{font-size:9px;letter-spacing:.13em;opacity:.68}.card-grid b{font-size:15px}.spark{width:100%;height:80px;margin-top:8px}.spark path{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 5px 5px rgba(0,0,0,.1));stroke-dasharray:7 6;animation:spark 7s linear infinite}
.water-orb{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.8);background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.95),rgba(255,255,255,.22) 18%,rgba(13,181,224,.15) 55%,rgba(5,102,163,.2));box-shadow:inset -16px -16px 26px rgba(0,74,135,.1),0 25px 50px rgba(7,99,139,.12)}
.orb-a{width:180px;height:180px;right:48px;top:190px;animation:float 5.4s ease-in-out infinite}.orb-b{width:80px;height:80px;left:74px;top:320px;animation:float 4.2s ease-in-out -2s infinite}
.cloud{position:absolute;width:170px;height:62px;background:rgba(255,255,255,.82);border-radius:999px;filter:blur(.2px);z-index:2;box-shadow:0 12px 35px rgba(10,104,141,.08)}
.cloud:before,.cloud:after{content:"";position:absolute;background:inherit;border-radius:50%}.cloud:before{width:74px;height:74px;left:30px;bottom:10px}.cloud:after{width:62px;height:62px;left:86px;bottom:0}
.cloud-1{left:-46px;top:124px;transform:scale(.74);animation:drift 23s linear infinite}.cloud-2{right:-44px;top:350px;transform:scale(.92);animation:drift 30s linear -9s infinite}.cloud-3{left:18%;top:264px;transform:scale(.46);opacity:.7;animation:drift 35s linear -15s infinite}
.island{position:absolute;z-index:5;left:-4%;right:-4%;bottom:0;height:48%;overflow:hidden}
.hill{position:absolute;border-radius:50% 50% 0 0}.hill.back{width:74%;height:58%;left:0;bottom:13%;background:linear-gradient(#66ca7c,#2b9e58);transform:rotate(-7deg)}.hill.front{width:90%;height:66%;right:-12%;bottom:-1%;background:linear-gradient(#78df7e,#3ea557);transform:rotate(6deg)}
.tree{position:absolute;bottom:27%;width:18px;height:110px;background:#6b7738;border-radius:12px;z-index:8}.tree:before,.tree:after{content:"";position:absolute;background:#45be67;border-radius:50%;filter:drop-shadow(0 4px 2px rgba(0,80,70,.12))}.tree:before{width:80px;height:80px;left:-31px;top:-48px}.tree:after{width:62px;height:62px;left:-52px;top:-25px}.tree-a{left:17%;transform:scale(.82)}.tree-b{left:70%;transform:scale(.65)}.tree-c{left:82%;bottom:20%;transform:scale(.45)}
.flower{position:absolute;bottom:23%;width:10px;height:70px;background:#3c9c45;border-radius:20px;z-index:10}.flower:before{content:"✿";position:absolute;left:-9px;top:-15px;color:#fffa98;font-size:31px;text-shadow:0 3px 0 rgba(0,0,0,.07)}.flower-a{left:31%}.flower-b{left:52%;transform:scale(.75)}.flower-c{left:90%;transform:scale(.55)}
.butterfly{position:absolute;z-index:12;left:52%;top:56%;font-size:34px;color:#fffca8;text-shadow:0 7px 10px rgba(0,73,111,.18);animation:butterfly 7s ease-in-out infinite}
.splash{position:absolute;width:22px;height:22px;border:3px solid rgba(255,255,255,.8);border-radius:50%;left:50%;top:72%;opacity:0}
.status-section{max-width:1360px;margin:0 auto;padding:38px clamp(18px,4vw,64px) 90px}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:20px}.section-heading h2,.interactive h2{font-family:Georgia,serif;font-size:clamp(38px,5vw,66px);margin:5px 0 0;letter-spacing:-.04em;color:#0a5066}.live{padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.38);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.15em}
.dashboard{display:grid;grid-template-columns:2fr 1fr 1fr;gap:15px}.panel{min-height:210px;padding:24px;border-radius:28px;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.4);box-shadow:0 18px 45px rgba(9,83,109,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);position:relative;overflow:hidden}.panel-large{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:start}.panel-icon{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:28px;background:#efffb9;color:#a07b19;box-shadow:inset 0 1px 0 #fff}.panel h3{margin:2px 0 5px;font-size:18px}.panel p{margin:0;line-height:1.5;font-size:13px;max-width:280px;opacity:.78}.big-number{align-self:end;text-align:right}.big-number span{display:block;font-size:42px;font-weight:900;letter-spacing:-.05em}.big-number small{font-size:10px;text-transform:uppercase;letter-spacing:.12em;opacity:.62}.metric{display:block;font-size:38px;letter-spacing:-.04em;margin:17px 0 6px}.mini-orb{width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 30% 26%,#fff,#94efff 25%,#20a9d8 70%);box-shadow:inset -9px -12px 18px rgba(0,94,161,.15);float:right}.bars{display:flex;gap:5px;align-items:end;height:35px;margin:18px 0 13px}.bars i{width:17px;border-radius:10px;background:linear-gradient(#68e77c,#24b867);animation:bars 1.3s ease-in-out infinite}.bars i:nth-child(1){height:45%}.bars i:nth-child(2){height:80%;animation-delay:-.4s}.bars i:nth-child(3){height:62%;animation-delay:-.8s}.bars i:nth-child(4){height:95%;animation-delay:-.2s}.bars i:nth-child(5){height:72%;animation-delay:-.55s}
.interactive{max-width:1360px;margin:0 auto;padding:10px clamp(18px,4vw,64px) 110px;display:grid;grid-template-columns:.8fr 1.2fr;gap:30px;align-items:center}.interactive-copy{padding-right:40px}.interactive-copy p{font-size:18px;line-height:1.55;max-width:480px}.pond{height:330px;border-radius:45% 55% 48% 52%;position:relative;overflow:hidden;cursor:pointer;outline:none;background:
  radial-gradient(circle at 44% 42%,rgba(255,255,255,.54),transparent 13%),
  radial-gradient(circle at 68% 72%,rgba(0,89,160,.2),transparent 35%),
  linear-gradient(160deg,#85efff,#1baedc 58%,#0e8cc7);box-shadow:0 26px 55px rgba(6,111,151,.18),inset 0 2px 0 rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.7)}
.pond:before,.pond:after{content:"";position:absolute;inset:15% -20%;border-top:2px solid rgba(255,255,255,.28);border-radius:50%;transform:rotate(-9deg)}.pond:after{top:36%;transform:rotate(8deg)}
.pond-highlight{position:absolute;width:90px;height:22px;border-radius:50%;background:rgba(255,255,255,.42);left:21%;top:29%;transform:rotate(-12deg);filter:blur(2px)}
.lily{position:absolute;width:64px;height:40px;border-radius:50%;background:#76d469;box-shadow:inset -8px -7px 0 rgba(44,146,68,.25)}.lily:after{content:"";position:absolute;width:18px;height:18px;right:0;top:0;background:#1baedc;clip-path:polygon(0 0,100% 0,100% 100%)}.lily-1{right:17%;top:23%;transform:rotate(7deg)}.lily-2{left:18%;bottom:22%;transform:scale(.72) rotate(-15deg)}.frog{position:absolute;left:48%;top:58%;font-size:66px;color:#60d36d;text-shadow:0 8px 5px rgba(0,73,111,.15);animation:frog 3.2s ease-in-out infinite}.pond-hint{position:absolute;right:18px;bottom:18px;padding:8px 10px;background:rgba(255,255,255,.38);border-radius:999px;font-size:10px;text-transform:uppercase;letter-spacing:.15em}
footer{display:flex;justify-content:space-between;gap:20px;padding:28px clamp(18px,4vw,64px);background:rgba(255,255,255,.25);border-top:1px solid rgba(255,255,255,.6);font-size:12px}.footer-links{display:flex;gap:12px;opacity:.7;letter-spacing:.12em}
#bubbleCanvas{position:fixed;inset:0;z-index:4;pointer-events:none}.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:30;background:rgba(5,77,103,.88);color:#fff;padding:11px 16px;border-radius:999px;opacity:0;transition:.25s;font-size:12px;box-shadow:0 15px 35px rgba(0,0,0,.16)}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes load{from{width:72%}to{width:94%}}@keyframes spark{to{stroke-dashoffset:-100}}@keyframes float{50%{transform:translateY(-18px) translateX(7px)}}@keyframes drift{from{transform:translateX(-10vw) scale(.8)}to{transform:translateX(110vw) scale(.8)}}@keyframes butterfly{0%,100%{transform:translate(0,0) rotate(-7deg)}50%{transform:translate(70px,-65px) rotate(8deg)}}@keyframes frog{50%{transform:translateY(-13px)}}@keyframes bars{50%{transform:scaleY(.65)}}
@media (max-width:980px){.hero{grid-template-columns:1fr}.hero-art{height:540px}.dashboard{grid-template-columns:1fr 1fr}.panel-large{grid-column:1/-1}.interactive{grid-template-columns:1fr}.interactive-copy{padding-right:0}}
@media (max-width:620px){nav a{display:none}.topbar{padding:15px 16px}.glass-btn{padding:9px 11px}.hero{padding-top:40px;min-height:auto}.hero-art{height:470px;border-radius:30px}.glass-card{left:18px;right:18px;top:20px}.card-grid{grid-template-columns:1fr 1fr}.card-grid div:last-child{display:none}.dashboard{grid-template-columns:1fr}.panel-large{display:flex;flex-wrap:wrap}.big-number{margin-left:auto}.pond{height:260px}footer{flex-direction:column}.sun{width:180px;height:180px;right:-15px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}