.ft-stage{position:relative;width:100%;max-width:520px;justify-self:end;aspect-ratio:1 / 1.08;border-radius:32px;overflow:hidden;display:flex;align-items:flex-start;justify-content:center;padding-top:10%;
  background:radial-gradient(70% 70% at 50% 30%,rgba(255,255,255,.55),rgba(255,255,255,0) 70%),linear-gradient(150deg,#E6F7EC,#CDEFDB);}
.bk{--c:26px;position:relative;display:block;flex:none;width:72%;height:auto;aspect-ratio:832 / 1200;transform:rotate(-4deg);
  filter:drop-shadow(0 22px 28px rgba(4,33,15,.3));transition:transform .5s var(--ease),--c .4s var(--ease);}
.ft-stage:hover .bk{--c:40px;transform:rotate(-2deg) scale(1.03);}
.bk img{display:block;width:100%;height:100%;object-fit:fill;border-radius:2px 5px 5px 2px;
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%);transition:clip-path .4s var(--ease);}
.bk::before{content:"";position:absolute;z-index:2;left:0;top:0;bottom:0;width:8%;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.32),rgba(255,255,255,.22) 38%,rgba(0,0,0,.1) 70%,transparent);}
.bk::after{content:"";position:absolute;z-index:-1;top:4px;bottom:4px;right:-5px;width:6px;border-radius:0 3px 3px 0;
  background:repeating-linear-gradient(90deg,#FFFFFF 0 1px,#DDE2DE 1px 2px);}
.bk .curl{position:absolute;z-index:3;top:0;right:0;width:var(--c);height:var(--c);border-radius:0 0 0 5px;
  background:linear-gradient(225deg,transparent 50%,#E9ECE8 50%,#FFFFFF 78%,#D9DED9 100%);box-shadow:-2px 3px 5px -1px rgba(4,33,15,.35);
  transition:width .4s var(--ease),height .4s var(--ease);}
.ftstats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:28px;margin-top:6px;}
.ftstats div{display:flex;flex-direction:column;gap:4px;}
.ftstats .v{font-family:var(--display);font-weight:300;font-size:clamp(32px,3.4vw,48px);line-height:1;letter-spacing:-.04em;color:var(--g-deep);}
.ftstats .l{font-size:14px;line-height:1.35;color:var(--ink2);}
.experts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:44px;}
.xp{background:#fff;border:1px solid var(--line);border-radius:26px;padding:12px 12px 18px;display:flex;flex-direction:column;gap:12px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);}
.xp:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(4,33,15,.35);}
.xp .ph{aspect-ratio:1;overflow:hidden;}
.xp .ph img{width:100%;height:100%;object-fit:contain;transition:transform .5s var(--ease);}
.xp:hover .ph img{transform:scale(1.03);}
.xp b{display:block;font-weight:500;font-size:16px;color:var(--ink);padding:0 6px;}
.xp span{display:block;font-size:13.5px;line-height:1.45;color:var(--slate);padding:0 6px;min-height:39px;}
.xp .co{height:36px;width:auto;max-width:150px;object-fit:contain;object-position:left center;margin:6px 6px 0;filter:grayscale(1);opacity:.75;align-self:flex-start;}
.xp:hover .co{filter:none;opacity:1;}
.trends{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:44px;}
.trend{position:relative;border-radius:30px;overflow:hidden;min-height:460px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;}
.trend img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);}
.trend:hover img{transform:scale(1.05);}
.trend::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,20,10,0) 20%,rgba(4,20,10,.82) 100%);}
.trend .tb{position:relative;z-index:2;padding:28px;display:flex;flex-direction:column;gap:12px;}
.trend small{font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#B7F5D2;}
.trend h3{margin:0;font-family:var(--display);font-weight:400;font-size:24px;line-height:1.2;letter-spacing:-.015em;}
.trend p{margin:0;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.86);}
.dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;}
.dlform{background:#fff;border-radius:28px;padding:30px;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 60px -36px rgba(4,33,15,.45);}
.dlform label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500;color:var(--ink2);}
.dlform input{font:inherit;font-size:15px;font-weight:400;padding:13px 16px;border-radius:14px;border:1px solid var(--line2);background:var(--panel);color:var(--ink);}
.dlform input:focus{outline:2px solid var(--g);outline-offset:1px;background:#fff;}
.dlform .btn{justify-content:center;margin-top:6px;border:0;font:inherit;font-weight:500;cursor:pointer;-webkit-appearance:none;appearance:none;}
.dlform .fine{font-size:12.5px;color:var(--mute);margin:0;}
.dlform .thanks{font-size:16px;color:var(--ink);margin:0;}
@media (max-width:1060px){.experts{grid-template-columns:repeat(2,minmax(0,1fr));}.trends{grid-template-columns:minmax(0,1fr);}.trend{min-height:380px;}}
@media (max-width:900px){.dl{grid-template-columns:minmax(0,1fr);gap:32px;}.ft-stage{justify-self:center;}}
@media (max-width:520px){.experts{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;}.xp span{font-size:12.5px;}}

/* light panel cards carry no outline, at rest or on hover */
.xp,.xp:hover{border-color:transparent !important;}

.models{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:44px;}
.model{background:var(--panel);border-radius:28px;padding:28px;display:flex;flex-direction:column;gap:14px;}
.model .mn{font-family:var(--display);font-weight:300;font-size:44px;line-height:1;letter-spacing:-.04em;color:var(--g-deep);}
.model h3{margin:0;font-family:var(--display);font-weight:400;font-size:24px;letter-spacing:-.015em;line-height:1.2;}
.model p{margin:0;font-size:15px;line-height:1.6;color:var(--slate);}
.model .eg{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--ink2);}
.model .eg b{font-weight:500;color:var(--ink);}
.qs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:44px;}
.q{border-radius:28px;padding:28px;background:#fff;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 44px -34px rgba(4,33,15,.3);}
.q small{font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--g-text);}
.q h3{margin:0;font-family:var(--display);font-weight:400;font-size:22px;line-height:1.25;letter-spacing:-.015em;}
.q p{margin:0;font-size:15px;line-height:1.6;color:var(--slate);}
.timeline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:44px;position:relative;}
.timeline::before{content:"";position:absolute;left:8%;right:8%;top:9px;height:2px;background:linear-gradient(90deg,#D6DED8,var(--g) 50%,#D6DED8);border-radius:2px;}
.tl{position:relative;padding:36px 20px 0;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;}
.tl::before{content:"";position:absolute;top:0;left:calc(50% - 10px);width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid #C8D2CB;}
.tl.on::before{background:var(--g);border-color:var(--g);box-shadow:0 0 0 7px rgba(20,203,98,.16);}
.tl b{font-family:var(--display);font-weight:400;font-size:28px;letter-spacing:-.02em;}
.tl span{font-size:14.5px;color:var(--slate);max-width:26ch;}
.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:44px;}
.quote{background:var(--panel);border-radius:28px;padding:30px;display:flex;flex-direction:column;gap:18px;}
.quote p{margin:0;font-family:var(--display);font-weight:400;font-size:22px;line-height:1.35;letter-spacing:-.015em;}
.quote .who{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--slate);}
.quote .who .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--g);color:var(--forest);font-style:normal;font-size:13px;font-weight:600;letter-spacing:.04em;}
.quote .who b{display:block;font-weight:500;color:var(--ink);}
.nextband{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:28px;align-items:center;text-decoration:none;color:inherit;background:var(--panel);border-radius:28px;padding:28px 32px;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease);}
.nextband:hover{transform:translateY(-2px);box-shadow:0 24px 50px -30px rgba(4,33,15,.35);}
.nb-txt{display:flex;flex-direction:column;gap:6px;}
.nb-txt b{font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:-.02em;}
.nb-txt > span:last-child{color:var(--slate);font-size:15px;}
.nb-cover{height:150px;display:flex;justify-content:flex-end;}
.nb-cover img{height:100%;width:auto;border-radius:8px;box-shadow:0 14px 30px -16px rgba(4,33,15,.45);transform:rotate(4deg);}
@media (max-width:1060px){.models,.qs{grid-template-columns:minmax(0,1fr);}.quotes{grid-template-columns:minmax(0,1fr);}}
@media (max-width:760px){.timeline{grid-template-columns:1fr;gap:18px;}.timeline::before{display:none;}.tl{padding:0;align-items:flex-start;text-align:left;}.tl::before{display:none;}.nextband{grid-template-columns:1fr;}.nb-cover{justify-content:flex-start;}}

.mstage{position:relative;height:190px;border-radius:20px;background:#fff;overflow:hidden;margin-bottom:6px;}
.mstage::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");}
.mstage svg{position:absolute;inset:0;width:100%;height:100%;}
.mchip{position:absolute;display:flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;background:#fff;font-size:12.5px;font-weight:500;color:var(--ink);box-shadow:0 10px 24px -14px rgba(4,33,15,.35);white-space:nowrap;}
.mchip i{width:7px;height:7px;border-radius:50%;background:var(--g);flex:none;}
/* 01 installer: house, panel glints, battery fills, tariff chip lands */
@keyframes mglint{0%{stroke-dashoffset:66}100%{stroke-dashoffset:0}}
@keyframes mfill{0%,8%{transform:scaleY(.12)}60%,100%{transform:scaleY(1)}}
@keyframes mdash{to{stroke-dashoffset:-22}}
@keyframes mchip{0%,40%{opacity:0;transform:translateY(8px)}52%,92%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px)}}

.m1{background:linear-gradient(160deg,#F7F9F7,#EEF3EF);}
.m1 .hs{fill:none;stroke:var(--ink2);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;}
.m1 .pv{fill:none;stroke:var(--g-deep);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;opacity:.9;}
.m1 .grid{stroke:#E3E7E4;stroke-width:1;}
.m1 .bt{fill:#fff;stroke:var(--ink2);stroke-width:2;}
.m1 .btf{fill:var(--g);transform-box:fill-box;transform-origin:bottom;animation:mbfill 6s var(--ease) infinite;}
.m1 .fl{fill:none;stroke:var(--g);stroke-width:2;stroke-linecap:round;stroke-dasharray:4 7;animation:mflow 1.6s linear infinite;}
@keyframes mbfill{0%{transform:scaleY(.2)}60%,100%{transform:scaleY(1)}}
@keyframes mflow{to{stroke-dashoffset:-22}}
.m1 .mchip{animation:none;right:auto;top:auto;left:auto;bottom:auto;width:auto;height:auto;}
.m1 .m1sol{left:14px;top:14px;}
.m1 .mchip svg{position:static;inset:auto;width:14px;height:14px;flex:none;color:#D9A400;}
.m1sol b{font-weight:600;}
.m1 .m1bat{right:14px;top:14px;gap:9px;}
.mbar{width:46px;height:8px;border-radius:4px;background:#E3E7E4;overflow:hidden;}
.mbar span{display:block;height:100%;width:20%;border-radius:4px;background:var(--g);animation:mbar 6s var(--ease) infinite;}
.m1 .m1tar{left:50%;bottom:14px;transform:translateX(-50%);animation:mtar 6s var(--ease) infinite!important;}
@keyframes mbar{0%,10%{width:20%}70%,100%{width:96%}}
@keyframes mtar{0%,55%{opacity:0;transform:translate(-50%,8px)}65%,94%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-4px)}}
/* 02 digital native: live price curve with a moving cursor and a dip chip */
.m2 .grid{stroke:#E3E7E4;stroke-width:1;}
.m2 .curve{fill:none;stroke:var(--g-deep);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:420;animation:mdraw 7s var(--ease) infinite;}
.m2 .area{fill:url(#m2g);opacity:.9;}
.m2 .dot{fill:var(--g);stroke:#fff;stroke-width:3;offset-path:path("M20 92 C60 70 80 48 110 58 S160 120 190 128 S250 64 300 50");animation:mrun 7s var(--ease) infinite;}
.m2 .mchip{left:50%;bottom:16px;transform:translateX(-50%);animation:mchip2 7s var(--ease) infinite;}
@keyframes mdraw{0%{stroke-dashoffset:420}45%,100%{stroke-dashoffset:0}}
@keyframes mrun{0%{offset-distance:0%}100%{offset-distance:100%}}
@keyframes mchip2{0%,48%{opacity:0;transform:translate(-50%,8px)}58%,92%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-4px)}}
/* 03 incumbent: customer base, a few drift toward the edge, then are held */
.m3 .c{fill:#D6DED8;}
.m3 .c.k{fill:var(--g-deep);}
.m3 .c.out{animation:mchurn 6s var(--ease) infinite;}
.m3 .c.out:nth-of-type(2n){animation-delay:-.6s;}
.m3 .ring{fill:none;stroke:var(--g);stroke-width:1.6;stroke-dasharray:5 6;opacity:.7;}
.m3 .mchip{left:16px;top:16px;}
.m3 .opts{position:absolute;right:14px;bottom:14px;display:flex;gap:6px;}
.m3 .opts span{font-size:11.5px;font-weight:500;padding:5px 10px;border-radius:999px;background:#F1F3F1;color:var(--slate);animation:mopt 9s steps(1) infinite;}
.m3 .opts span:nth-child(2){animation-delay:-6s;}
.m3 .opts span:nth-child(3){animation-delay:-3s;}
@keyframes mchurn{0%,15%{transform:translate(0,0);fill:#D6DED8}45%{transform:translate(14px,-6px);fill:#F3C9C9}70%,100%{transform:translate(0,0);fill:var(--g-deep)}}
@keyframes mopt{0%{background:var(--g);color:var(--forest)}33.3%,100%{background:#F1F3F1;color:var(--slate)}}
@media (prefers-reduced-motion:reduce){.mstage *{animation:none!important;}}

.eg .egl{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:12px;}
.eg .egl img{width:auto;max-width:120px;object-fit:contain;filter:grayscale(1);opacity:.72;transition:filter .25s var(--ease),opacity .25s var(--ease);}
.model:hover .eg .egl img{filter:none;opacity:1;}