/* Layout: 1000px centred column on white, soft mint/lime/butter mesh bands, deep-teal ribbons; single light theme by design */
:root{
  --ink:#0B4A44;      /* headings */
  --deep:#054340;     /* bands, stat cards, footer */
  --deep2:#0A5650;
  --lime:#96DC6E;     /* pill buttons, accents */
  --lime2:#C3EE9F;
  --mint:#7CC99A;
  --butter:#EAE7B8;
  --cream:#F9F8F4;
  --paper:#FFFFFF;
  --text:#4E5A57;
  --muted:#7C8784;
  --line:#E2E6E1;
  --display:"Figtree","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Poppins","Figtree","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--body);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);font-weight:500;margin:0;letter-spacing:-.01em;text-wrap:balance}
p{margin:0}
.wrap{max-width:1032px;margin:0 auto;padding-inline:16px}
:focus-visible{outline:2px solid var(--deep);outline-offset:3px;border-radius:8px}

/* tags + buttons */
.tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.02em;color:var(--ink);text-transform:uppercase}
.tag::before{content:"";width:6px;height:6px;border-radius:1.5px;background:var(--deep)}
.btn{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 8px 0 16px;border-radius:999px;font:500 13px/1 var(--body);color:var(--deep);background:var(--lime);border:0;cursor:pointer;transition:transform .2s,box-shadow .2s;white-space:nowrap}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px -10px rgba(5,67,64,.5)}
.btn .dot{width:20px;height:20px;border-radius:50%;background:var(--deep);display:grid;place-items:center}
.btn .dot svg{width:10px;height:10px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.btn.white{background:#fff}
.center{text-align:center}
.sec-head{display:grid;gap:14px}
.sec-head h2{font-size:clamp(28px,3.4vw,38px);line-height:1.18}
.sec-head .lede{max-width:560px;color:var(--text)}
.sec-head.center{justify-items:center}

/* mesh backgrounds */
.mesh{position:relative;background:
  radial-gradient(40% 55% at 12% 55%,rgba(124,201,154,.85),transparent 70%),
  radial-gradient(35% 45% at 88% 60%,rgba(124,201,154,.7),transparent 70%),
  radial-gradient(40% 40% at 80% 18%,rgba(234,231,184,.95),transparent 70%),
  radial-gradient(30% 35% at 6% 6%,rgba(184,226,140,.9),transparent 70%),
  radial-gradient(45% 45% at 50% 35%,rgba(233,240,232,.95),transparent 72%),
  linear-gradient(180deg,#DDEBD9,#EDEDE3 80%,#EFEEE6);overflow:hidden}
.bars{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bars i{position:absolute;bottom:0;width:112px;border-radius:2px 2px 0 0;background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.08) 70%,rgba(255,255,255,0))}

/* NAV */
.nav{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.logo{display:flex;align-items:center;gap:8px;font:500 22px/1 var(--display);color:var(--ink)}
.logo svg{width:26px;height:26px}
.links{display:flex;gap:4px;padding:6px;border-radius:999px;background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(8px)}
.links a{padding:6px 12px;border-radius:999px;font-size:12.5px;color:#4B5754}
.links a:hover{background:rgba(255,255,255,.7);color:var(--ink)}

/* HERO */
.hero{padding-bottom:48px}
.hero-copy{position:relative;z-index:2;text-align:center;padding-top:52px;display:grid;justify-items:center;gap:18px}
.hero h1{font-size:clamp(36px,5.2vw,58px);line-height:1.08;font-weight:500;max-width:640px;letter-spacing:-.02em}
.hl{position:relative;display:inline-block;padding:0 .08em;background:linear-gradient(90deg,#86D06A,#B6E59A 55%,rgba(200,238,170,0));border-left:2px solid var(--deep2)}
.hero .sub{max-width:560px;color:#5B6663;font-size:14.5px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}

.stage{position:relative;z-index:2;margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.shots{grid-column:1/-1;position:relative;height:300px}
.frame{position:absolute;bottom:-4px;padding:7px;border-radius:12px;background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.75);backdrop-filter:blur(6px)}
.frame .in{height:100%;border-radius:7px;overflow:hidden;background:#fff}
.f-l{left:21.5%;width:28%;height:270px;transform:translateX(-50%)}
.f-c{left:50%;width:32%;height:336px;transform:translateX(-50%);z-index:2;box-shadow:0 30px 60px -30px rgba(5,67,64,.45)}
.f-r{left:78.5%;width:28%;height:270px;transform:translateX(-50%)}
.stat{padding:7px;border-radius:12px;background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.75);position:relative;z-index:3}
.stat .in{background:var(--deep);border-radius:7px;padding:18px 20px;display:flex;align-items:center;gap:14px;color:#fff}
.stat b{display:block;font:500 19px/1.2 var(--display)}
.stat span{font-size:13px;color:rgba(255,255,255,.6)}
.av{display:flex}
.av i{width:34px;height:34px;border-radius:50%;border:2px solid var(--deep);margin-left:-9px;display:grid;place-items:center;font:600 10px/1 var(--display);font-style:normal;color:var(--deep)}
.av i:first-child{margin-left:0}
.ic{width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none}
.ic svg{width:17px;height:17px;stroke:var(--deep);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* hero mini UIs */
.ui{height:100%;display:flex;flex-direction:column;font-size:11px;color:var(--text)}
.ui-top{background:var(--deep);color:#fff;padding:11px 14px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.ui-top b{font:500 12.5px/1.2 var(--display)}
.ui-top em{font-style:normal;font-size:10px;padding:3px 8px;border-radius:99px;background:var(--lime);color:var(--deep);white-space:nowrap}
.ui-body{flex:1;padding:11px 14px;display:flex;flex-direction:column;gap:7px;background:linear-gradient(180deg,#fff,#F3F8F1)}
.steprow{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;background:#fff;border:1px solid var(--line)}
.steprow .ck{width:16px;height:16px;border-radius:50%;background:var(--lime);display:grid;place-items:center;flex:none}
.steprow .ck svg{width:9px;height:9px;stroke:var(--deep);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.steprow .nm{flex:1;color:var(--ink);font-weight:500}
.steprow .tm{color:var(--muted);font-size:10px}
.steprow.now{border-color:var(--mint);background:#F0F9EC}
.steprow.now .ck{background:#fff;border:2px dashed var(--mint)}
.prog{height:6px;border-radius:9px;background:#E3ECE2;overflow:hidden}
.prog i{display:block;height:100%;width:83%;border-radius:9px;background:linear-gradient(90deg,var(--mint),var(--lime))}
.ring-wrap{display:grid;place-items:center;padding-top:6px}
.kv{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--line)}
.kv b{color:var(--ink);font-weight:500}
.pass{color:#2F8A4E}
.wait{color:#B8862D}
.chain{display:flex;flex-direction:column;gap:0;align-items:stretch}
.node{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;background:#fff;border:1px solid var(--line)}
.node i{width:9px;height:9px;border-radius:3px;background:var(--mint);flex:none}
.node b{color:var(--ink);font-weight:500}
.node small{margin-left:auto;color:var(--muted);font-size:9.5px}
.node.end{background:var(--deep);border-color:var(--deep);color:#fff}
.node.end b{color:#fff}.node.end i{background:var(--lime)}.node.end small{color:rgba(255,255,255,.6)}
.link{width:2px;height:12px;background:var(--mint);margin-left:13px}

/* TICKER */
.ticker{background:var(--deep);color:#fff;overflow:hidden;padding-block:20px}
.track{display:flex;width:max-content;gap:36px;animation:slide 38s linear infinite}
.ticker .it{display:flex;align-items:center;gap:12px;font:500 19px/1 var(--body);white-space:nowrap}
.ticker .it svg.l{width:20px;height:20px;stroke:rgba(255,255,255,.8);fill:none;stroke-width:1.6}
.flower{width:22px;height:22px;flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* ABOUT */
.about{padding-block:84px 70px}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 40px;margin-top:16px}
.about h2{font-size:clamp(28px,3.4vw,38px);line-height:1.2;max-width:460px}
.about .r{grid-column:2;display:grid;gap:22px;justify-items:start;padding-top:10px}
.about .r p{font-size:14.5px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px}
.stats div{padding:4px 0 4px 44px;border-left:1px solid var(--line)}
.stats div:first-child{padding-left:0;border-left:0}
.stats b{display:block;font:500 36px/1.1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.stats span{display:block;margin-top:14px;font-size:14px}

/* MODULES LIST */
.mods{padding-block:60px 70px}
.mlist{margin-top:44px;border-bottom:1px solid var(--line)}
.mrow{display:grid;grid-template-columns:1.05fr 236px 1fr 50px;gap:24px 40px;align-items:center;padding-block:34px;border-top:1px solid var(--line)}
.mrow:first-child{border-top:0}
.mrow .n{font-size:13px;color:var(--ink)}
.mrow h3{font-size:24px;margin-top:18px}
.mrow .d{position:relative;padding-left:14px;font-size:14px;max-width:260px;justify-self:end}
.mrow .d::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border:1px solid var(--text);border-radius:50%}
.arrow{width:50px;height:50px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:.25s;background:#fff}
.arrow svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round}
.mrow:hover .arrow{background:var(--lime);border-color:var(--lime);transform:rotate(45deg)}
.thumb{height:95px;border-radius:12px;overflow:hidden;position:relative}
.th-deep{background:radial-gradient(80% 120% at 85% 0%,#1E7A63,transparent 60%),var(--deep)}
.th-mint{background:radial-gradient(70% 90% at 15% 20%,#BFE8A9,transparent 70%),radial-gradient(70% 90% at 90% 90%,#9FD8B3,transparent 70%),#DDEFD8}
.th-butter{background:radial-gradient(70% 100% at 80% 20%,#EFEAB9,transparent 70%),radial-gradient(70% 90% at 10% 90%,#A9DDB4,transparent 70%),#E4EFD6}

/* WHY */
.why{padding-block:86px 110px}
.why .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;align-items:start}
.wcard{background:var(--cream);border-radius:14px;padding:26px 26px 30px;display:grid;gap:12px;box-shadow:0 20px 40px -30px rgba(5,67,64,.35)}
.wcard:nth-child(2){margin-top:36px}
.wcard svg{width:44px;height:44px;margin-bottom:28px}
.wcard h3{font-size:23px;line-height:1.35}
.wcard p{font-size:14px}

/* PROCESS (stepped dark panel) */
.process{padding-block:100px 80px}
.stepped{margin-top:44px;display:grid;justify-items:center}
.tab{width:min(312px,100%);background:linear-gradient(180deg,#0E5D55,var(--deep));border-radius:10px 10px 0 0;padding:16px 18px 14px;color:#fff;display:grid;gap:8px}
.tab .row{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:rgba(255,255,255,.65)}
.tab b{font:500 15px/1.2 var(--display);color:#fff}
.tab .pips{display:flex;gap:4px}
.tab .pips i{flex:1;height:5px;border-radius:5px;background:var(--lime)}
.tab .pips i.o{background:rgba(255,255,255,.2)}
.panel{width:100%;max-width:830px;background:radial-gradient(60% 120% at 50% -20%,#15695F,transparent 70%),linear-gradient(180deg,#0B524C,var(--deep));border-radius:10px;padding:28px 26px 26px;color:#fff;display:grid;gap:24px;justify-items:center}
.flow{width:100%;overflow-x:auto}
.flow svg{display:block;min-width:720px;width:100%;height:auto}
.legend{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;font-size:11.5px;color:rgba(255,255,255,.7)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:10px;height:10px;border-radius:50%;display:inline-block}

/* ROLES (tilted cards) */
.roles{padding-block:70px 60px;overflow:hidden}
.rtrack{display:flex;gap:22px;width:max-content;padding-block:44px 30px;animation:slide 60s linear infinite}
.roles:hover .rtrack{animation-play-state:paused}
.rcard{width:236px;flex:none;background:var(--cream);border-radius:12px;border-bottom:2px solid var(--deep);padding:22px 22px 18px;display:flex;flex-direction:column;gap:10px;min-height:250px}
.rcard:nth-child(odd){transform:rotate(-7deg) translateY(8px)}
.rcard:nth-child(even){transform:rotate(5deg)}
.rcard:nth-child(3n){transform:rotate(-3deg) translateY(-6px)}
.rcard .top{display:flex;justify-content:flex-end}
.rcard .top svg{width:26px;height:26px}
.rcard h4{font-size:19px;line-height:1.25}
.rcard p{font-size:12.5px;line-height:1.55;flex:1}
.rcard .who{display:flex;align-items:center;gap:10px;margin-top:8px;font:500 15px/1.2 var(--display);color:var(--ink)}
.rcard .who i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:600 11px/1 var(--display);font-style:normal;color:var(--deep)}

/* DELIVERY band */
.delivery{padding-block:84px 60px}
.dtrack{display:flex;gap:18px;width:max-content;margin-top:40px;animation:slide 48s linear infinite}
.delivery:hover .dtrack{animation-play-state:paused}
.dcard{width:236px;height:242px;flex:none;border-radius:12px;background:linear-gradient(180deg,#F4F5F2,#E4E8E3);padding:18px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.dcard .wk{font-size:11.5px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.dcard h4{font-size:20px}
.dcard p{font-size:12.5px;line-height:1.5}
.dcard .big{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between}
.dcard .big b{font:500 44px/1 var(--display);color:var(--ink)}
.dcard .big small{font-size:11px;color:var(--muted);text-align:right}
.gantt{display:grid;grid-template-columns:repeat(20,1fr);gap:2px}
.gantt i.wk{margin-right:3px}
.gantt i{height:10px;border-radius:2px;background:rgba(11,74,68,.1)}
.gantt i.on{background:var(--deep)}
.gantt i.on.l{background:var(--lime)}
.dcard.dk{background:var(--deep)}
.dcard.dk h4,.dcard.dk .big b{color:#fff}
.dcard.dk p,.dcard.dk .wk,.dcard.dk .big small{color:rgba(255,255,255,.7)}
.dcard.dk .gantt i{background:rgba(255,255,255,.14)}.dcard.dk .gantt i.on{background:var(--lime)}

/* INVESTMENT */
.invest{padding-block:90px 70px}
.ihead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.icards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;align-items:start}
.icard .img{border-radius:12px;overflow:hidden;position:relative;padding:18px;display:flex;flex-direction:column;justify-content:space-between}
.icard .img .chips{display:flex;flex-wrap:wrap;gap:6px}
.icard .img .chips span{font-size:11px;padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.75);color:var(--ink)}
.icard .img.dk .chips span{background:rgba(255,255,255,.12);color:#fff}
.icard .img .price{font:500 40px/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.icard .img.dk .price{color:#fff}
.icard .img .price small{display:block;font:400 12px/1.4 var(--body);color:var(--text);margin-top:6px}
.icard .img.dk .price small{color:rgba(255,255,255,.65)}
.icard .meta{display:flex;align-items:center;gap:8px;margin-top:22px;font-size:12px;color:var(--muted)}
.icard .meta svg{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:1.5}
.icard h3{font-size:23px;line-height:1.35;margin-top:10px}
.icard .foot{display:flex;justify-content:space-between;margin-top:18px;font-size:12.5px;color:var(--muted)}
.icard .foot a{display:inline-flex;align-items:center;gap:6px;color:#4B5754}
.icard .foot a svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.8}
.inote{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:38px;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}

/* CTA card */
.cta{padding-block:40px 70px}
.ctacard{position:relative;border-radius:12px;overflow:hidden;padding:76px 24px 76px;text-align:center;display:grid;justify-items:center;gap:16px;background:
  radial-gradient(35% 60% at 8% 15%,rgba(124,201,154,.8),transparent 70%),
  radial-gradient(35% 60% at 25% 85%,rgba(234,231,184,.95),transparent 70%),
  radial-gradient(35% 60% at 70% 70%,rgba(124,201,154,.75),transparent 70%),
  radial-gradient(30% 50% at 92% 95%,rgba(160,210,110,.9),transparent 70%),
  linear-gradient(90deg,#DCEBD8,#E9EAE0)}
.ctacard h2{font-size:clamp(28px,3.4vw,38px);line-height:1.2;max-width:360px}
.ctacard p{max-width:330px;font-size:14px}
.tile{position:absolute;width:138px;border-radius:10px;background:#fff;box-shadow:0 18px 30px -20px rgba(5,67,64,.45);padding:11px 12px;text-align:left;font-size:10.5px;display:grid;gap:6px}
.tile b{font:500 12.5px/1.2 var(--display);color:var(--ink)}
.tile .pill{justify-self:start;font-size:9.5px;padding:2px 8px;border-radius:99px;background:var(--lime);color:var(--deep)}
.tile .pill.w{background:#F6EBC9;color:#8A6417}
.tile.dk{background:var(--deep);color:rgba(255,255,255,.7)}
.tile.dk b{color:#fff}
.t1{left:12%;top:30px}.t2{left:3%;top:168px}.t3{left:12%;top:252px;width:130px}.t4{right:3%;top:116px}.t5{right:3%;top:250px}
.spark{width:100%;height:30px}

/* WORDMARK + FOOTER */
.word{text-align:center;font:300 clamp(64px,15vw,152px)/.8 var(--display);letter-spacing:-.035em;color:var(--deep);margin-top:10px;white-space:nowrap;overflow:hidden}
.word span{color:var(--lime)}
.pills{background:var(--deep);overflow:hidden;padding-block:18px;border-bottom:1px solid rgba(255,255,255,.12)}
.pills .track{gap:36px;animation-duration:34s;align-items:center}
footer{background:var(--deep);color:#fff;position:relative;overflow:hidden}
footer .bars i{background:linear-gradient(0deg,rgba(150,220,110,.16),rgba(150,220,110,0) 75%)}
.fgrid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.7fr 1fr;padding-block:64px 44px}
.fgrid>div{padding-inline:28px}
.fgrid>div+div{border-left:1px solid;border-image:linear-gradient(180deg,rgba(150,220,110,.6),rgba(150,220,110,0)) 1}
.fgrid>div:first-child{padding-left:0}.fgrid>div:last-child{padding-right:0}
.fh{display:flex;align-items:center;gap:8px;font:500 19px/1 var(--display);color:#fff;margin-bottom:22px}
.fh::before{content:"";width:6px;height:6px;border-radius:1.5px;background:var(--lime)}
.fl{display:grid;gap:10px;font-size:14.5px}
.fl a:hover{color:var(--lime)}
.fmid{text-align:center;display:grid;justify-items:center;gap:16px}
.fmid .logo{color:#fff}
.fmid .logo span span{color:var(--lime)}
.fmid p{max-width:350px;font-size:14px;color:rgba(255,255,255,.88)}
.soc{display:flex;gap:12px;margin-top:8px}
.soc a{width:36px;height:36px;border-radius:50%;border:1px solid var(--lime);display:grid;place-items:center}
.soc svg{width:16px;height:16px;stroke:var(--lime);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fbot{position:relative;z-index:1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding-block:24px 30px;border-top:1px solid rgba(255,255,255,.12);font-size:13px}
.fbot b{color:var(--lime);font-weight:500}

@media (max-width:900px){
  .links{display:none}
  .stage{grid-template-columns:1fr;gap:12px}
  .shots{height:auto;display:grid;gap:12px}
  .frame{position:relative;left:auto!important;transform:none!important;width:100%!important;bottom:auto}
  .f-l,.f-r{height:250px}.f-c{height:300px;order:-1}
  .about-grid{grid-template-columns:1fr}.about .r{grid-column:1}
  .stats{grid-template-columns:1fr 1fr;gap:28px 0}.stats div:nth-child(3){padding-left:0;border-left:0}
  .mrow{grid-template-columns:1fr 50px}.mrow .thumb{grid-column:1/-1;order:3}.mrow .d{grid-column:1/-1;justify-self:start;max-width:none;order:4}
  .why .cards,.icards{grid-template-columns:1fr}.wcard:nth-child(2){margin-top:0}
  .icard .img{height:auto!important;min-height:170px}
  .tile{display:none}
  .fgrid{grid-template-columns:1fr;gap:36px}.fgrid>div{padding-inline:0}.fgrid>div+div{border-left:0}
  .fmid{order:-1}
}
@media (prefers-reduced-motion:reduce){.track,.rtrack,.dtrack{animation:none}.btn,.arrow{transition:none}html{scroll-behavior:auto}}

/* animated hero background */
.hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.hero-bg b{position:absolute;border-radius:50%;filter:blur(60px);opacity:.85;will-change:transform}
.hero-bg .b1{width:46vw;height:46vw;left:-12vw;top:18%;background:#7CC99A;animation:drift1 16s ease-in-out infinite alternate}
.hero-bg .b2{width:40vw;height:40vw;right:-10vw;top:28%;background:#86CFA2;animation:drift2 19s ease-in-out infinite alternate}
.hero-bg .b3{width:36vw;height:30vw;right:6vw;top:-10%;background:#EAE7B8;animation:drift3 14s ease-in-out infinite alternate}
.hero-bg .b4{width:30vw;height:26vw;left:-4vw;top:-12%;background:#B8E28C;animation:drift4 17s ease-in-out infinite alternate}
.hero-bg .b5{width:34vw;height:24vw;left:34vw;top:62%;background:#C3EE9F;opacity:.55;animation:drift2 21s ease-in-out infinite alternate-reverse}
@keyframes drift1{0%{transform:translate(0,0) scale(1)}50%{transform:translate(8vw,-6vh) scale(1.12)}100%{transform:translate(3vw,8vh) scale(.94)}}
@keyframes drift2{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-9vw,5vh) scale(1.1)}100%{transform:translate(-3vw,-8vh) scale(1.02)}}
@keyframes drift3{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-14vw,10vh) scale(1.18)}}
@keyframes drift4{0%{transform:translate(0,0) scale(1)}100%{transform:translate(12vw,8vh) scale(1.15)}}
.hero .bars{z-index:1}
.hero .bars i{overflow:hidden;transform-origin:bottom;animation:rise 7s ease-in-out infinite alternate}
.hero .bars i:nth-child(2){animation-duration:9s;animation-delay:-3s}
.hero .bars i:nth-child(3){animation-duration:8s;animation-delay:-5s}
.hero .bars i:nth-child(4){animation-duration:10s;animation-delay:-1s}
.hero .bars i::after{content:"";position:absolute;left:0;right:0;height:40%;top:-40%;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));animation:shine 6s ease-in-out infinite}
.hero .bars i:nth-child(2)::after{animation-delay:-1.5s}.hero .bars i:nth-child(3)::after{animation-delay:-3s}.hero .bars i:nth-child(4)::after{animation-delay:-4.5s}
@keyframes rise{from{transform:scaleY(.9)}to{transform:scaleY(1.06)}}
@keyframes shine{0%{top:-40%}60%,100%{top:110%}}
.hero .hl{background-size:220% 100%;animation:hlshift 5s ease-in-out infinite alternate}
@keyframes hlshift{from{background-position:0 0}to{background-position:60% 0}}
.hero>.wrap{position:relative;z-index:2}
@media (prefers-reduced-motion:reduce){.hero-bg b,.hero .bars i,.hero .bars i::after,.hero .hl{animation:none}}

img{max-width:100%}
[hidden]{display:none!important}
.inote a{color:var(--deep);text-decoration:underline;text-underline-offset:2px}