/* ═══════════════════════════════════════════════════════════════════════════
   TNB GENCO  ·  Proposal 06 — "TESSERA · The Energy Mosaic"
   A honeycomb + jigsaw visual system built on the TNB Genco brand palette.

   Brand anchors (TNB GENCO Brand Style Guide V4):
     TNB Blue      #005DAA   primary
     TNB Red       #DE3314   primary
     Cool Grey     #949598   secondary
     Eco Green     #8DC069   secondary
     Energy Orange #E49254   secondary
   Extended vivid ramps derive from those five only.
   Type: Outfit (geometric — Gotham stand-in) / Inter / JetBrains Mono
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────── TOKENS ─────────────────────────────── */
:root{
  /* brand */
  --blue:#005DAA;
  --blue-700:#004481;
  --blue-900:#062C57;
  --blue-500:#1E86E8;
  --blue-300:#7FC0F2;
  --blue-050:#E8F3FD;

  --red:#DE3314;
  --red-600:#B62A10;
  --coral:#FF6A45;
  --red-050:#FDEDE9;

  --orange:#E49254;
  --amber:#F5A623;
  --orange-050:#FDF2E7;

  --green:#8DC069;
  --green-600:#5EA13C;
  --lime:#C6E36B;
  --green-050:#EFF7E8;

  --cyan:#21C7E0;
  --teal:#0FA5A0;
  --violet:#7C6BE8;

  --grey:#949598;
  --ink:#0C1B2A;
  --ink-2:#3A4A5C;
  --mute:#6E7F92;
  --line:#E2E9F1;
  --line-2:#EEF3F8;
  --paper:#F5F8FC;
  --paper-2:#FAFCFE;
  --white:#fff;

  /* technology colours */
  --t-gas:#F5A623;
  --t-coal:#5C6FA8;
  --t-hydro:#21C7E0;
  --t-solar:#A9D64B;
  --t-serv:#DE3314;

  /* gradients */
  --g-brand:linear-gradient(135deg,#1E86E8 0%,#005DAA 55%,#062C57 100%);
  --g-hot:linear-gradient(135deg,#F5A623 0%,#E4622C 55%,#DE3314 100%);
  --g-eco:linear-gradient(135deg,#C6E36B 0%,#8DC069 50%,#0FA5A0 100%);
  --g-cool:linear-gradient(135deg,#21C7E0 0%,#1E86E8 55%,#005DAA 100%);
  --g-rainbow:linear-gradient(100deg,#005DAA 0%,#21C7E0 22%,#8DC069 44%,#F5A623 68%,#DE3314 100%);

  /* shape + motion */
  --hexclip:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  --r-s:10px; --r-m:16px; --r-l:24px; --r-x:32px;
  --ease:cubic-bezier(.2,.75,.25,1);
  --ease-b:cubic-bezier(.34,1.4,.5,1);
  --sh-s:0 2px 6px rgba(12,27,42,.05),0 8px 22px -12px rgba(12,27,42,.14);
  --sh-m:0 4px 12px rgba(12,27,42,.06),0 24px 46px -22px rgba(12,27,42,.22);
  --sh-l:0 8px 24px rgba(12,27,42,.08),0 48px 90px -34px rgba(6,44,87,.34);

  --wrap:1280px;
}

/* ─────────────────────────────── RESET ─────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--ink);
  font:400 17px/1.65 'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
h1,h2,h3,h4{margin:0;font-family:'Outfit',sans-serif;font-weight:700;letter-spacing:-.028em;line-height:1.06}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--blue);color:#fff}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(18px,4vw,44px)}
.ic{width:1em;height:1em;flex:none;fill:none}
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--blue);color:#fff;padding:12px 20px;border-radius:0 0 12px 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:4px}

/* ─────────────────────────── TYPE SCALE ─────────────────────────── */
h1{font-size:clamp(31px,6.2vw,80px);font-weight:800;letter-spacing:-.038em;overflow-wrap:break-word}
h2{font-size:clamp(28px,4.1vw,56px);overflow-wrap:break-word}
.h2s{font-size:clamp(28px,3.4vw,44px)}
h3{font-size:20px}
.lede{margin-top:16px;font-size:clamp(16px,1.16vw,18.5px);line-height:1.68;color:var(--ink-2);max-width:60ch}
.lede.sm{font-size:16.5px}
.lede.light{color:rgba(255,255,255,.8)}

.grad{
  background:var(--g-rainbow);-webkit-background-clip:text;background-clip:text;
  color:transparent;background-size:220% 100%;animation:hue 14s var(--ease) infinite;
}
.grad.g2{background-image:linear-gradient(100deg,#DE3314 0%,#F5A623 40%,#8DC069 78%,#21C7E0 100%)}
.grad.g3{background-image:linear-gradient(100deg,#7FC0F2 0%,#21C7E0 34%,#C6E36B 68%,#F5A623 100%)}
.grad.g4{background-image:linear-gradient(100deg,#005DAA 0%,#1E86E8 34%,#21C7E0 70%,#8DC069 100%)}
.grad.g5{background-image:linear-gradient(100deg,#C6E36B 0%,#8DC069 36%,#21C7E0 72%,#7FC0F2 100%)}
@keyframes hue{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:var(--blue);margin-bottom:20px;
}
.eyebrow.light{color:var(--lime)}
/* the brand "supergraphic" nod — an anti-clockwise arc */
.eyebrow .arc{
  width:17px;height:17px;flex:none;border-radius:50%;
  border:2.4px solid currentColor;border-right-color:transparent;border-bottom-color:transparent;
  transform:rotate(-40deg);animation:spinback 6s linear infinite;
}
@keyframes spinback{to{transform:rotate(-400deg)}}

/* ─────────────────────────────── BUTTONS ─────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:9px;position:relative;
  font-family:'Outfit',sans-serif;font-weight:600;font-size:15px;letter-spacing:-.01em;
  padding:12px 22px;border-radius:999px;white-space:nowrap;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease),color .25s;
}
.btn .ic{font-size:17px;transition:transform .35s var(--ease-b)}
.btn:hover .ic{transform:translateX(4px)}
.btn-lg{padding:15px 28px;font-size:16.5px}
.btn-sm{padding:9.5px 18px;font-size:14px}

.btn-pri{background:var(--g-brand);color:#fff;box-shadow:0 10px 26px -12px rgba(0,93,170,.85)}
.btn-pri::after{content:"";position:absolute;inset:0;background:var(--g-hot);opacity:0;transition:opacity .38s var(--ease)}
.btn-pri:hover{transform:translateY(-2px);box-shadow:0 18px 38px -14px rgba(222,51,20,.6)}
.btn-pri:hover::after{opacity:1}
.btn-pri>*{position:relative;z-index:1}

.btn-line{border:1.8px solid var(--line);color:var(--ink);background:#fff}
.btn-line:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px);box-shadow:var(--sh-s)}

.btn-white{background:#fff;color:var(--blue-900)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 18px 40px -16px rgba(0,0,0,.5)}

/* ─────────────────────────────── NAV ─────────────────────────────── */
.nav{
  position:fixed;inset:0 0 auto;z-index:120;
  background:rgba(255,255,255,.72);backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid transparent;transition:box-shadow .35s,border-color .35s,background .35s;
}
.nav.stuck{background:rgba(255,255,255,.9);border-bottom-color:var(--line);box-shadow:0 6px 26px -18px rgba(12,27,42,.4)}

/* at the very top the nav floats over the hero imagery — the logo keeps a white
   plate so the blue wordmark never sits on a dark photograph */
.nav:not(.stuck){background:linear-gradient(180deg,rgba(3,16,30,.6),rgba(3,16,30,0));backdrop-filter:none}
.nav:not(.stuck) .brand img{height:46px;background:#fff;border-radius:11px;padding:6px 10px}
.nav:not(.stuck) .mlink{color:rgba(255,255,255,.84)}
.nav:not(.stuck) .mlink:hover{color:#fff;background:rgba(255,255,255,.14)}
.nav:not(.stuck) .mlink.on{color:#fff}
.nav:not(.stuck) .burger{background:rgba(255,255,255,.16)}
.nav:not(.stuck) .burger i{background:#fff}

.nav-in{display:flex;align-items:center;gap:clamp(14px,2.4vw,40px);height:76px}
.brand img{height:40px;width:auto;transition:height .35s var(--ease),padding .35s var(--ease),background .35s}
.brand{transition:transform .3s var(--ease-b)}
.brand:hover{transform:scale(1.04)}

.menu{display:flex;align-items:center;gap:4px;margin-left:auto}
.mlink{
  position:relative;padding:9px 15px;border-radius:999px;
  font-family:'Outfit',sans-serif;font-weight:500;font-size:15.5px;color:var(--ink-2);
  transition:color .25s,background .25s;
}
.mlink::before{
  content:"";position:absolute;left:50%;bottom:2px;translate:-50% 0;width:0;height:3px;border-radius:3px;
  background:var(--g-rainbow);transition:width .35s var(--ease);
}
.mlink:hover{color:var(--ink);background:var(--paper)}
.mlink:hover::before,.mlink.on::before{width:22px}
.mlink.on{color:var(--blue);font-weight:600}
.nav-cta{margin-left:6px}

.nav-prog{position:absolute;left:0;bottom:-1px;height:2.5px;width:var(--p,0%);background:var(--g-rainbow);transition:width .12s linear}

.burger{display:none;width:44px;height:44px;border-radius:12px;flex-direction:column;gap:5px;align-items:center;justify-content:center;background:var(--paper)}
.burger i{width:19px;height:2.2px;border-radius:2px;background:var(--ink);transition:.32s var(--ease)}
.burger[aria-expanded=true] i:nth-child(1){transform:translateY(7.2px) rotate(45deg)}
.burger[aria-expanded=true] i:nth-child(2){opacity:0;transform:scaleX(.2)}
.burger[aria-expanded=true] i:nth-child(3){transform:translateY(-7.2px) rotate(-45deg)}

.drawer{
  position:fixed;top:76px;left:0;right:0;z-index:115;background:#fff;border-bottom:1px solid var(--line);
  padding:14px clamp(18px,5vw,32px) 26px;display:grid;gap:2px;
  max-height:0;overflow:hidden;opacity:0;visibility:hidden;transition:max-height .45s var(--ease),opacity .3s,padding .45s var(--ease),visibility .45s;
}
.drawer.open{max-height:70vh;opacity:1;visibility:visible;overflow-y:auto}
.drawer a:not(.btn){padding:14px 6px;border-bottom:1px solid var(--line-2);font-family:'Outfit',sans-serif;font-weight:600;font-size:19px}
.drawer .btn{margin-top:18px;justify-content:center}

/* ═══════════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════════ */
.hero{
  position:relative;
  padding:calc(76px + clamp(34px,5vw,68px)) 0 clamp(112px,11vw,150px);
  min-height:100svh;display:flex;align-items:center;
  background:#041424;color:#fff;overflow:hidden;isolation:isolate;
}

/* ── the cross-fading night backdrop ── */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hslide{
  position:absolute;inset:0;
  background-image:var(--img);background-size:cover;background-position:var(--pos,center);
  opacity:0;transition:opacity 1.3s var(--ease);
  will-change:opacity,transform;
}
.hslide.on{opacity:1;animation:kenburns 9s var(--ease) forwards}
@keyframes kenburns{from{transform:scale(1.09) translate3d(1.4%,0,0)}to{transform:scale(1) translate3d(0,0,0)}}

/* dark on the left where the copy sits, letting the plant lights survive on the right */
.hero-shade{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(78deg,rgba(3,16,30,.9) 0%,rgba(3,16,30,.6) 38%,rgba(3,16,30,.2) 70%,rgba(3,16,30,.06) 100%),
    linear-gradient(0deg,rgba(3,16,30,.74) 0%,transparent 38%),
    linear-gradient(180deg,rgba(3,16,30,.55) 0%,transparent 17%);
}
.hero-cv{position:absolute;inset:0;width:100%;height:100%;opacity:.38;mix-blend-mode:screen}

.hero-in{
  position:relative;z-index:2;width:100%;display:grid;gap:clamp(30px,4.5vw,64px);align-items:center;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
}
.hero-copy{min-width:0}
.hero-copy h1{margin-bottom:22px;color:#fff;text-shadow:0 4px 30px rgba(3,16,30,.55)}
.hero-lead{
  font-size:clamp(16.5px,1.28vw,19.5px);line-height:1.68;max-width:33rem;
  color:rgba(255,255,255,.82);text-shadow:0 2px 14px rgba(3,16,30,.5);
}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
/* the outline button turns light against the imagery */
.hero .btn-line{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.42);color:#fff;backdrop-filter:blur(8px)}
.hero .btn-line:hover{background:#fff;border-color:#fff;color:var(--blue-900)}

.hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.chip{
  display:inline-flex;align-items:center;gap:7px;padding:7px 14px 7px 11px;border-radius:999px;
  font-size:13px;font-weight:600;color:rgba(255,255,255,.88);
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(10px);
  transition:transform .3s var(--ease-b),background .3s;
}
.chip:hover{transform:translateY(-3px);background:rgba(255,255,255,.17)}
.chip i{width:9px;height:9px;border-radius:3px;flex:none;rotate:45deg}
.c-gas i{background:var(--t-gas)} .c-coal i{background:var(--t-coal)}
.c-hydro i{background:var(--t-hydro)} .c-solar i{background:var(--t-solar)}
.c-net i{background:var(--green);border-radius:50%;rotate:0deg;box-shadow:0 0 0 3px rgba(141,192,105,.28)}

/* ── slideshow controls ── */
.hero-ui{
  position:absolute;left:50%;bottom:clamp(26px,3.4vw,44px);translate:-50% 0;z-index:6;
  display:flex;align-items:center;gap:clamp(14px,2vw,28px);color:#fff;
}
.hero-dots{display:flex;gap:9px;flex:none}
.hd{width:44px;height:22px;display:flex;align-items:center;padding:0}
.hd i{
  display:block;width:100%;height:3px;border-radius:3px;position:relative;overflow:hidden;
  background:rgba(255,255,255,.28);transition:background .3s;
}
.hd:hover i{background:rgba(255,255,255,.45)}
.hd i::after{
  content:"";position:absolute;inset:0;border-radius:3px;background:var(--g-rainbow);
  transform:scaleX(0);transform-origin:left;
}
.hd.on i::after{animation:fill var(--dur,7000ms) linear forwards}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.hero-count{
  display:flex;align-items:baseline;gap:5px;flex:none;
  font-family:'JetBrains Mono',monospace;letter-spacing:.06em;
}
.hero-count b{font-size:17px;font-weight:700}
.hero-count i{font-style:normal;font-size:12px;color:rgba(255,255,255,.5)}

.hero-cap{
  display:block;padding-left:clamp(14px,2vw,26px);border-left:1px solid rgba(255,255,255,.22);
  min-width:0;max-width:min(32vw,320px);transition:opacity .4s var(--ease);
}
.hero-cap.swap{opacity:0}
.hero-cap b{
  display:block;font-family:'Outfit',sans-serif;font-weight:600;font-size:14.5px;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hero-cap em{
  display:block;font-style:normal;font-family:'JetBrains Mono',monospace;font-size:10.5px;
  letter-spacing:.06em;color:rgba(255,255,255,.58);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* the cluster stays left-aligned with the copy so it never meets the scroll cue */
.hero-arrows{display:flex;gap:8px;flex:none;margin-left:4px}
.ha{
  width:44px;height:44px;display:grid;place-items:center;border-radius:50%;font-size:19px;color:#fff;
  border:1.5px solid rgba(255,255,255,.34);background:rgba(255,255,255,.06);backdrop-filter:blur(8px);
  transition:.3s var(--ease);
}
.ha:hover{background:#fff;border-color:#fff;color:var(--blue-900);transform:scale(1.07)}

/* vertical on the right edge, mid-height — clear of both the slideshow
   controls and the chat launcher in the bottom corner */
.scroller{
  position:absolute;right:max(2vw,16px);top:50%;translate:0 -50%;z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.6);writing-mode:vertical-rl;
}
.scroller:hover{color:#fff}
.scroller i{width:1.6px;height:46px;border-radius:2px;background:linear-gradient(180deg,transparent,#fff);animation:drip 2.1s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(.2);transform-origin:top;opacity:0}40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.2);transform-origin:bottom;opacity:0}}

/* ─────────────────── HONEYCOMB (hero) ─────────────────── */
.hero-hive{display:flex;flex-direction:column;align-items:center;gap:14px}
.hive-hint{
  align-self:flex-end;display:flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.hive-hint::after{content:"";width:26px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.6),transparent)}

.hive{
  position:relative;
  --hw:clamp(96px,11.6vw,172px);
  width:calc(var(--hw)*3.25);
  height:calc(var(--hw)*3.032);
}
.hex{
  position:absolute;display:block;
  --cc:var(--c);--rr:var(--r);--oo:var(--o,0);
  width:var(--hw);height:calc(var(--hw)*.866);
  left:calc(var(--cc)*var(--hw)*.75);
  top:calc((var(--rr) + var(--oo))*var(--hw)*.866);
  transition:transform .45s var(--ease-b),filter .4s var(--ease),z-index 0s;
  animation:hexdrift 9s var(--ease) infinite;
  animation-delay:calc(var(--cc)*.55s + var(--rr)*.4s);
  filter:drop-shadow(0 10px 18px rgba(6,44,87,.14));
}
@keyframes hexdrift{0%,100%{translate:0 0}50%{translate:0 -6px}}
.hex-fr,.hex-in{position:absolute;clip-path:var(--hexclip);display:block}
.hex-fr{inset:2px;background:var(--fr,rgba(255,255,255,.9));transition:background .4s}
.hex-in{inset:4.5px;background:#fff;overflow:hidden}
.hex img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .5s}
.hex:hover{transform:scale(1.075);z-index:9;filter:drop-shadow(0 18px 30px rgba(6,44,87,.3))}
.hex:hover img{transform:scale(1.13)}

/* photo cells */
.hx-photo .hex-veil{
  position:absolute;inset:0;clip-path:var(--hexclip);
  background:linear-gradient(180deg,rgba(6,44,87,.05) 30%,rgba(6,44,87,.86) 100%);
  opacity:.9;transition:opacity .4s,background .4s;
}
.hx-photo[data-tint=coal] .hex-fr{--fr:var(--t-coal)}
.hx-photo[data-tint=hydro] .hex-fr{--fr:var(--t-hydro)}
.hx-photo[data-tint=solar] .hex-fr{--fr:var(--t-solar)}
.hx-photo[data-tint=gas]  .hex-fr{--fr:var(--t-gas)}
.hx-photo[data-tint=blue] .hex-fr{--fr:var(--blue-500)}
.hex-lb{
  position:absolute;left:14%;right:14%;bottom:15%;z-index:2;color:#fff;text-align:center;
  transform:translateY(6px);transition:transform .4s var(--ease);
}
.hex-lb b{display:block;font-family:'Outfit',sans-serif;font-weight:700;font-size:clamp(11px,.86vw,14.5px);line-height:1.2}
.hex-lb em{
  display:block;font-style:normal;font-size:clamp(8.5px,.62vw,10.5px);letter-spacing:.05em;
  color:rgba(255,255,255,.82);margin-top:3px;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .4s var(--ease),opacity .3s;
}
.hex:hover .hex-lb{transform:translateY(0)}
.hex:hover .hex-lb em{max-height:2.4em;opacity:1}

/* nav cells */
.hx-nav .hex-in{display:grid;place-items:center;align-content:center;gap:8px;text-align:center;color:#fff;padding:8% 12%}
.hx-nav .hex-in::before{
  content:"";position:absolute;inset:0;background:var(--nav-g);transition:transform .6s var(--ease);
}
.hx-nav:hover .hex-in::before{transform:scale(1.25) rotate(8deg)}
.hex-ic{width:clamp(20px,2vw,30px);height:clamp(20px,2vw,30px);position:relative;z-index:1;fill:none;stroke-width:1.6}
.hex-nm{position:relative;z-index:1;font-family:'Outfit',sans-serif;font-weight:700;font-size:clamp(10.5px,.87vw,14.5px);line-height:1.2;letter-spacing:-.01em}
.hex-go{
  position:relative;z-index:1;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.2);font-size:13px;opacity:0;transform:translateY(6px) scale(.8);
  transition:.4s var(--ease-b);
}
.hex:hover .hex-go{opacity:1;transform:none}
.n-blue  {--nav-g:var(--g-brand)}  .n-blue .hex-fr{--fr:var(--blue-500)}
.n-green {--nav-g:var(--g-eco)}    .n-green .hex-fr{--fr:var(--lime)}
.n-red   {--nav-g:linear-gradient(135deg,#FF6A45,#DE3314 60%,#B62A10)} .n-red .hex-fr{--fr:var(--coral)}
.n-orange{--nav-g:var(--g-hot)}    .n-orange .hex-fr{--fr:var(--amber)}

/* stat cell */
.hx-stat .hex-fr{--fr:var(--blue-900)}
.hx-stat .hex-in{
  display:grid;place-items:center;align-content:center;gap:2px;text-align:center;color:#fff;
  background:linear-gradient(150deg,#0A3A6B 0%,#062C57 55%,#04203F 100%);
}
.hex-pulse{
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 55%,rgba(33,199,224,.55),transparent 62%);
  animation:pulse 3.4s var(--ease) infinite;
}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:1;transform:scale(1.12)}}
.hex-big{position:relative;z-index:1;font-family:'Outfit',sans-serif;font-weight:800;font-size:clamp(20px,2.5vw,38px);line-height:1;letter-spacing:-.04em}
.hex-big small{font-size:.44em;font-weight:600;margin-left:2px;color:var(--cyan)}
.hex-sub{position:relative;z-index:1;font-style:normal;font-size:clamp(8px,.6vw,10.5px);letter-spacing:.06em;color:rgba(255,255,255,.7);padding:0 10%}
.hex-live{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:5px;margin-top:5px;
  font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);
}
.hex-live i{width:5px;height:5px;border-radius:50%;background:var(--lime);animation:blink 1.6s infinite}
@keyframes blink{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(198,227,107,.7)}50%{opacity:.4;box-shadow:0 0 0 5px rgba(198,227,107,0)}}

/* ═══════════════════════════════ TICKER ═══════════════════════════════ */
.ticker{
  position:relative;z-index:5;overflow:hidden;padding:16px 0;
  background:var(--blue-900);
  border-top:3px solid transparent;
  border-image:var(--g-rainbow) 1;
}
.tick-track{display:flex;width:max-content;animation:march 42s linear infinite}
.ticker:hover .tick-track{animation-play-state:paused}
.tick-set{display:flex;gap:12px;padding-right:12px}
@keyframes march{to{transform:translateX(-50%)}}
.tk{
  display:inline-flex;align-items:center;gap:9px;padding:8px 18px;border-radius:999px;white-space:nowrap;
  font-size:13.5px;color:rgba(255,255,255,.72);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
}
.tk b{font-family:'Outfit',sans-serif;font-weight:700;font-size:15.5px;color:#fff}
.t-blue b{color:var(--blue-300)} .t-orange b{color:var(--amber)} .t-green b{color:var(--lime)}
.t-red b{color:var(--coral)} .t-cyan b{color:var(--cyan)} .t-violet b{color:#B3A9FF} .t-lime b{color:var(--lime)}

/* ═══════════════════════════════ SECTIONS ═══════════════════════════════ */
.sec{position:relative;padding:clamp(64px,8.2vw,124px) 0}
.sec-paper{background:var(--paper)}
.sec-dark{background:#071B31;color:#fff;overflow:hidden}
.sec-dark h2,.sec-dark h3{color:#fff}
.shead{max-width:64ch;margin-bottom:clamp(36px,4.6vw,60px)}
.shead.center{margin-inline:auto;text-align:center}
.shead.center .lede{margin-inline:auto}
.shead.row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;max-width:none;flex-wrap:wrap}
.shead.light h2{color:#fff}

.sec-hex-bg{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16z' fill='none' stroke='%23005DAA' stroke-opacity='.09'/%3E%3Cpath d='M28 64 56 80v32M28 64 0 80v32' fill='none' stroke='%23005DAA' stroke-opacity='.09'/%3E%3C/svg%3E");
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent 78%);
}
.grid-lines{
  position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16z' fill='none' stroke='%2321C7E0' stroke-opacity='.13'/%3E%3C/svg%3E");
  mask-image:linear-gradient(180deg,transparent,#000 24%,#000 74%,transparent);
}

/* ═══════════════════════════ PUZZLE SECTION ═══════════════════════════ */
.puzzle-sec{background:linear-gradient(180deg,#fff 0%,#F7FAFE 100%)}
.puzzle-wrap{
  display:grid;gap:clamp(24px,3.4vw,52px);align-items:center;
  grid-template-columns:minmax(0,1.32fr) minmax(300px,.9fr);
}
.puzzle-board{
  position:relative;width:100%;aspect-ratio:3/2;
  filter:drop-shadow(0 30px 60px rgba(6,44,87,.16));
  /* each piece's box is the whole board, so the scattered start state would
     otherwise widen the page — clip it, with room left for the hover lift */
  overflow:clip;overflow-clip-margin:14px;
}
.pz-defs{position:absolute;width:0;height:0}

.pzp{
  position:absolute;inset:0;cursor:pointer;padding:0;display:block;
  background:var(--pg);
  transform:translate(var(--dx,0),var(--dy,0)) rotate(var(--rot,0deg)) scale(var(--sc,1));
  transition:transform .8s var(--ease-b),opacity .6s var(--ease),filter .45s var(--ease);
  opacity:0;
  /* each piece casts a small shadow onto its neighbour so the seams read */
  filter:drop-shadow(1.5px 2px 2px rgba(6,44,87,.34));
}
.puzzle-board.built .pzp{opacity:1}
.puzzle-board.built .pzp:hover{--sc:1.035;z-index:6;filter:brightness(1.07) drop-shadow(4px 6px 11px rgba(6,44,87,.42))}
.puzzle-board.built .pzp.act{--sc:1.055;z-index:8;filter:brightness(1.1) saturate(1.08) drop-shadow(7px 9px 18px rgba(6,44,87,.46))}
.puzzle-board.built.picked .pzp:not(.act){opacity:.58;filter:grayscale(.32) drop-shadow(1px 1px 2px rgba(6,44,87,.2))}

.pzc{
  position:absolute;translate:-50% -50%;width:min(var(--pzcw,19%),190px);text-align:center;color:#fff;
  display:grid;justify-items:center;gap:7px;pointer-events:none;
}
.pzc svg{width:clamp(24px,2.6vw,36px);height:clamp(24px,2.6vw,36px);fill:none;stroke:currentColor;stroke-width:1.55;
  transition:transform .5s var(--ease-b)}
.pzp:hover .pzc svg,.pzp.act .pzc svg{transform:translateY(-3px) scale(1.1)}
.pzc b{
  font-family:'Outfit',sans-serif;font-weight:700;font-size:clamp(12px,1.1vw,16.5px);
  line-height:1.18;letter-spacing:-.015em;text-wrap:balance;
  text-shadow:0 1px 3px rgba(6,44,87,.3);
}
.pzc i{
  font-style:normal;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.16em;
  color:rgba(255,255,255,.62);
}

/* the detail panel */
.pz-panel{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-x);padding:clamp(24px,2.6vw,36px);
  box-shadow:var(--sh-m);position:relative;overflow:hidden;
}
.pz-panel::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--pc,var(--blue));transition:background .4s}
.pz-badge{
  display:inline-grid;place-items:center;width:46px;height:46px;margin-bottom:16px;
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:15px;color:#fff;
  background:var(--pc,var(--blue));clip-path:var(--hexclip);transition:background .4s;
}
.pz-panel h3{font-size:clamp(21px,1.9vw,27px);margin-bottom:12px;transition:color .3s}
.pz-panel p{color:var(--ink-2);font-size:16px;line-height:1.68}
.pz-facts{margin-top:20px;display:grid;gap:9px}
.pz-facts li{
  display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);
  padding-left:2px;
}
.pz-facts li::before{
  content:"";width:10px;height:10px;margin-top:6px;flex:none;background:var(--pc,var(--blue));clip-path:var(--hexclip);
}
.pz-nav{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line-2)}
.pz-arrow{
  width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:1.6px solid var(--line);
  font-size:17px;color:var(--ink-2);transition:.3s var(--ease);
}
.pz-arrow:hover{background:var(--pc,var(--blue));border-color:transparent;color:#fff;transform:translateY(-2px)}
.pz-dots{display:flex;gap:7px;margin-inline:auto}
.pz-dots span{width:8px;height:8px;background:var(--line);clip-path:var(--hexclip);transition:.3s var(--ease);cursor:pointer}
.pz-dots span.on{background:var(--pc,var(--blue));transform:scale(1.5)}

/* ═══════════════════════════ FLEET COMB ═══════════════════════════ */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:clamp(26px,3vw,40px)}
.fchip{
  display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.76);
  font-family:'Outfit',sans-serif;font-weight:500;font-size:14.5px;
  transition:.3s var(--ease);
}
.fchip i{width:9px;height:9px;flex:none;clip-path:var(--hexclip);background:currentColor;transition:.3s}
.fchip b{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:11px;opacity:.6}
.fchip:hover{background:rgba(255,255,255,.13);color:#fff;transform:translateY(-2px)}
.fchip.on{background:#fff;color:var(--blue-900);border-color:#fff;box-shadow:0 12px 26px -14px rgba(255,255,255,.55)}
.fchip.on b{opacity:.55}
.f-gas i{color:var(--t-gas)} .f-coal i{color:var(--t-coal)} .f-hydro i{color:var(--t-hydro)}
.f-solar i{color:var(--t-solar)} .f-serv i{color:var(--t-serv)}

.comb-shell{position:relative}
.comb{position:relative;width:100%;transition:height .6s var(--ease)}
.cell{
  position:absolute;cursor:pointer;display:block;
  --w:180px;--x:0px;--y:0px;
  width:var(--w);height:calc(var(--w)*.866);
  transform:translate(var(--x),var(--y));
  transition:transform .65s var(--ease-b),opacity .45s var(--ease),filter .4s;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.4));
}
.cell.hid{opacity:0;pointer-events:none;transform:translate(var(--x),var(--y)) scale(.5)}
.cell.dim{opacity:.22;filter:grayscale(.8)}
.cell-fr,.cell-in{position:absolute;clip-path:var(--hexclip)}
.cell-fr{inset:0;background:var(--tc);transition:background .35s}
.cell-in{inset:2.5px;background:#0B2138;overflow:hidden}
.cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;transition:transform .8s var(--ease),opacity .4s}
.cell-veil{position:absolute;inset:0;background:linear-gradient(175deg,transparent 20%,rgba(4,18,34,.55) 60%,rgba(4,18,34,.94) 100%);transition:background .4s}
.cell-b{position:absolute;left:16%;right:16%;bottom:14%;text-align:center;color:#fff}
.cell-b b{display:block;font-family:'Outfit',sans-serif;font-weight:700;font-size:clamp(10.5px,.92vw,14px);line-height:1.18;letter-spacing:-.01em}
.cell-b em{display:block;font-style:normal;font-family:'JetBrains Mono',monospace;font-size:clamp(8px,.66vw,10px);color:var(--tc);margin-top:4px;letter-spacing:.04em}
.cell-t{
  position:absolute;top:13%;left:50%;translate:-50% 0;width:26px;height:26px;display:grid;place-items:center;
  border-radius:50%;background:var(--tc);color:#08182B;opacity:0;transform:scale(.5);transition:.45s var(--ease-b);
}
.cell-t svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9}
.cell:hover{transform:translate(var(--x),var(--y)) scale(1.08);z-index:9;filter:drop-shadow(0 22px 36px rgba(0,0,0,.6))}
.cell:hover img{transform:scale(1.14);opacity:.85}
.cell:hover .cell-t{opacity:1;transform:scale(1)}

.comb-legend{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:clamp(28px,3.4vw,44px);font-size:13.5px;color:rgba(255,255,255,.66)}
.comb-legend span{display:inline-flex;align-items:center;gap:9px}
.dot{width:10px;height:10px;flex:none;clip-path:var(--hexclip);background:currentColor}
.k-gas{color:var(--t-gas)} .k-coal{color:var(--t-coal)} .k-hydro{color:var(--t-hydro)}
.k-solar{color:var(--t-solar)} .k-serv{color:var(--t-serv)}

/* station sheet */
.sheet{
  position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:20px;
  background:rgba(4,18,34,.62);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .38s var(--ease),visibility .38s;
}
.sheet.open{opacity:1;visibility:visible}
.sheet-card{
  width:min(560px,100%);max-height:88vh;overflow:auto;background:#fff;color:var(--ink);
  border-radius:var(--r-x);position:relative;box-shadow:var(--sh-l);
  transform:translateY(26px) scale(.97);transition:transform .5s var(--ease-b);
}
.sheet.open .sheet-card{transform:none}
.sheet-x{
  position:absolute;right:14px;top:14px;z-index:3;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.9);color:var(--ink);font-size:24px;line-height:1;display:grid;place-items:center;
  backdrop-filter:blur(8px);transition:.3s;
}
.sheet-x:hover{background:var(--red);color:#fff;transform:rotate(90deg)}
.sheet-img{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-x) var(--r-x) 0 0}
.sheet-img img{width:100%;height:100%;object-fit:cover}
.sheet-tag{
  position:absolute;left:20px;bottom:16px;padding:6px 14px;border-radius:999px;color:#08182B;
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--tc,var(--amber));
}
.sheet-b{padding:clamp(22px,3vw,32px)}
.sheet-b h3{font-size:clamp(22px,2.3vw,30px);margin-bottom:12px;color:var(--ink)}
.sheet-b p{color:var(--ink-2);font-size:16px;line-height:1.68}
.sheet-kpi{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.sheet-kpi span{
  padding:10px 16px;border-radius:12px;background:var(--paper);border:1px solid var(--line);
  font-size:13px;color:var(--ink-2);
}
.sheet-kpi span b{display:block;font-family:'Outfit',sans-serif;font-size:19px;color:var(--ink);letter-spacing:-.02em}

/* ═══════════════════════════ ENERGY MIX ═══════════════════════════ */
.mix-sec{background:linear-gradient(180deg,#fff,#F7FAFE)}
.mix-grid{display:grid;gap:clamp(32px,4.6vw,72px);grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);align-items:center}

.mix-bar{display:flex;height:58px;border-radius:16px;overflow:hidden;margin-top:32px;box-shadow:var(--sh-s);background:var(--line-2)}
.mix-bar i{
  position:relative;width:0;transition:width 1.5s var(--ease);display:grid;place-items:center;overflow:hidden;
}
.mix-bar.go i{width:var(--w)}
.mix-bar i span{
  font-family:'Outfit',sans-serif;font-weight:700;font-size:13px;color:#fff;white-space:nowrap;
  opacity:0;transition:opacity .5s .9s;text-shadow:0 1px 3px rgba(0,0,0,.28);
}
.mix-bar.go i span{opacity:1}
.mix-bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);
  transform:translateX(-100%);animation:sheen 3.6s var(--ease) 1.6s infinite}
@keyframes sheen{0%{transform:translateX(-120%)}55%,100%{transform:translateX(220%)}}
.s-coal{background:linear-gradient(135deg,#7183BC,#5C6FA8)}
.s-gas{background:linear-gradient(135deg,#F7B54A,#E4622C)}
.s-hydro{background:linear-gradient(135deg,#4BDCEF,#0FA5A0)}
.s-solar{background:linear-gradient(135deg,#C6E36B,#8DC069)}

.mix-key{margin-top:26px;display:grid;gap:2px}
.mix-key li{display:flex;align-items:center;gap:14px;padding:13px 4px;border-bottom:1px solid var(--line-2)}
.mix-key b{font-family:'Outfit',sans-serif;font-weight:700;font-size:21px;letter-spacing:-.03em;min-width:112px}
.mix-key b small{font-size:.55em;font-weight:600;color:var(--mute);margin-left:3px}
.mix-key span{font-size:14.5px;color:var(--mute)}

.stat-comb{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.scell{
  position:relative;padding:26px 22px;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);
  box-shadow:var(--sh-s);overflow:hidden;transition:transform .4s var(--ease-b),box-shadow .4s;
}
.scell::before{
  content:"";position:absolute;right:-24px;top:-24px;width:88px;height:76px;clip-path:var(--hexclip);
  background:var(--sc,var(--blue-050));transition:transform .55s var(--ease-b);
}
.scell:hover{transform:translateY(-5px);box-shadow:var(--sh-m)}
.scell:hover::before{transform:scale(1.28) rotate(-12deg)}
.scell b{position:relative;display:block;font-family:'Outfit',sans-serif;font-weight:800;font-size:clamp(28px,3vw,40px);letter-spacing:-.04em;line-height:1}
.scell b small{font-size:.42em;font-weight:600;margin-left:2px;color:var(--mute)}
/* direct child only — `b` wraps a <span data-n> counter that must not inherit this */
.scell>span{position:relative;display:block;margin-top:8px;font-size:13.5px;color:var(--mute);line-height:1.4}
.s1{--sc:#E8F3FD} .s1 b{color:var(--blue)}
.s2{--sc:#FDF2E7} .s2 b{color:#E4622C}
.s3{--sc:#E5FAFD} .s3 b{color:var(--teal)}
.s4{--sc:#EFF7E8} .s4 b{color:var(--green-600)}
.s5{--sc:#FDEDE9} .s5 b{color:var(--red)}
.s6{--sc:#EEECFC} .s6 b{color:var(--violet)}

/* ═══════════════════════════ CAPABILITY ═══════════════════════════ */
.cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cap{
  position:relative;padding:32px 26px 30px;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);
  overflow:hidden;transition:transform .45s var(--ease-b),box-shadow .45s,border-color .35s;
}
.cap::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--cg);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.cap:hover{transform:translateY(-7px);box-shadow:var(--sh-m);border-color:transparent}
.cap:hover::before{transform:scaleX(1)}
.cap-hex{
  display:grid;place-items:center;width:56px;height:49px;clip-path:var(--hexclip);background:var(--cg);
  color:#fff;margin-bottom:22px;transition:transform .5s var(--ease-b);
}
.cap-hex svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6}
.cap:hover .cap-hex{transform:rotate(-90deg) scale(1.08)}
.cap:hover .cap-hex svg{transform:rotate(90deg)}
.cap-hex svg{transition:transform .5s var(--ease-b)}
.cap-n{
  position:absolute;right:20px;top:18px;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px;
  color:var(--line);transition:color .4s;
}
.cap:hover .cap-n{color:var(--cc)}
.cap h3{margin-bottom:10px;font-size:19.5px}
.cap p{font-size:14.8px;line-height:1.62;color:var(--mute)}
.c-1{--cg:var(--g-brand);--cc:var(--blue)}
.c-2{--cg:var(--g-hot);--cc:#E4622C}
.c-3{--cg:var(--g-cool);--cc:var(--teal)}
.c-4{--cg:var(--g-eco);--cc:var(--green-600)}

.subs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.sub{
  display:flex;align-items:center;gap:20px;padding:24px 26px;border-radius:var(--r-l);
  background:#fff;border:1px solid var(--line);transition:.4s var(--ease);
}
.sub:hover{transform:translateY(-4px);box-shadow:var(--sh-m);border-color:var(--blue-300)}
.sub-logo{width:96px;flex:none;display:grid;place-items:center}
.sub-logo img{max-height:38px;width:auto;object-fit:contain}
.sub b{display:block;font-family:'Outfit',sans-serif;font-size:18px;margin-bottom:5px}
.sub span{font-size:14.4px;color:var(--mute);line-height:1.55}
.sub-go{font-size:22px;color:var(--blue);flex:none;transition:transform .4s var(--ease-b)}
.sub:hover .sub-go{transform:translateX(5px)}

/* ═══════════════════════════ SUSTAINABILITY ═══════════════════════════ */
.sec-eco{
  background:linear-gradient(150deg,#0B3B33 0%,#062C57 46%,#04203F 100%);
  color:#fff;overflow:hidden;
}
.eco-glow{
  position:absolute;width:72vw;height:72vw;left:-18vw;bottom:-38vw;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(141,192,105,.34),transparent 62%);filter:blur(48px);
}
.eco-grid{position:relative;display:grid;gap:clamp(32px,4.4vw,68px);grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);align-items:center}
.sdgs{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.sdgs img{width:76px;height:76px;border-radius:12px;object-fit:cover;box-shadow:0 10px 24px -12px rgba(0,0,0,.6);
  transition:transform .4s var(--ease-b)}
.sdgs img:hover{transform:translateY(-5px) scale(1.05)}

.rings{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ring{
  position:relative;display:grid;place-items:center;padding:26px 18px 24px;text-align:center;
  border-radius:var(--r-l);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(6px);transition:transform .45s var(--ease-b),background .4s;
}
.ring:hover{transform:translateY(-6px);background:rgba(255,255,255,.09)}
.ring svg{width:118px;height:118px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.rb{stroke:rgba(255,255,255,.12)}
.rf{stroke:var(--rc);stroke-dasharray:326.7;stroke-dashoffset:326.7;transition:stroke-dashoffset 1.6s var(--ease)}
.ring.go .rf{stroke-dashoffset:calc(326.7 - 326.7 * var(--p) / 100)}
.ring b{
  position:absolute;top:calc(26px + 59px);translate:0 -50%;
  font-family:'Outfit',sans-serif;font-weight:800;font-size:clamp(19px,1.95vw,26px);letter-spacing:-.04em;color:#fff;
  white-space:nowrap;
}
.ring>span{margin-top:14px;font-size:13px;color:rgba(255,255,255,.66);line-height:1.42;max-width:19ch}

.eco-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(38px,4.6vw,64px)}
.es{position:relative;border-radius:var(--r-l);overflow:hidden;aspect-ratio:4/3;display:block}
.es img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.es::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(4,32,63,.9))}
.es span{position:absolute;left:18px;right:14px;bottom:16px;z-index:2;font-size:12.5px;color:rgba(255,255,255,.74);line-height:1.4}
.es span b{display:block;font-family:'Outfit',sans-serif;font-size:16px;color:#fff;margin-bottom:3px}
.es:hover img{transform:scale(1.09)}
.es::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;z-index:3;background:var(--g-eco);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.es:hover::before{transform:scaleX(1)}

/* ═══════════════════════════ GROWTH ═══════════════════════════ */
.grow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grow{
  display:block;border-radius:var(--r-x);overflow:hidden;background:#fff;border:1px solid var(--line);
  transition:transform .5s var(--ease-b),box-shadow .5s,border-color .4s;
}
.grow:hover{transform:translateY(-8px);box-shadow:var(--sh-l);border-color:transparent}
.grow-img{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper)}
.grow-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.grow:hover .grow-img img{transform:scale(1.08)}
.grow-img::after{
  content:"";position:absolute;inset:auto 0 0 0;height:5px;background:var(--gg);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease);
}
.grow:hover .grow-img::after{transform:scaleX(1)}
.grow-b{display:block;padding:24px 24px 26px}
.tagline{
  display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;margin-bottom:14px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.t-hydro{background:#E5FAFD;color:var(--teal)}
.t-solar{background:#F2F9E4;color:var(--green-600)}
.t-gas{background:#FDF2E7;color:#C25419}
.grow-b b{display:block;font-family:'Outfit',sans-serif;font-weight:700;font-size:20.5px;line-height:1.22;letter-spacing:-.022em;margin-bottom:10px}
.grow-p{display:block;font-size:14.8px;color:var(--mute);line-height:1.62}
.grow-meta{display:flex;gap:8px;margin-top:18px}
.grow-meta em{
  font-style:normal;padding:6px 12px;border-radius:8px;background:var(--paper);border:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-2);
}
.g-a{--gg:var(--g-cool)} .g-b{--gg:var(--g-eco)} .g-c{--gg:var(--g-hot)}

/* ═══════════════════════════ NEWS ═══════════════════════════ */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.np{
  display:flex;flex-direction:column;background:#fff;border-radius:var(--r-l);overflow:hidden;
  border:1px solid var(--line);transition:transform .45s var(--ease-b),box-shadow .45s,border-color .4s;
}
.np:hover{transform:translateY(-6px);box-shadow:var(--sh-m);border-color:transparent}
.np-img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--line-2)}
.np-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.np:hover .np-img img{transform:scale(1.07)}
.np-b{display:block;padding:20px 20px 22px;flex:1}
.np-cat{
  display:inline-block;padding:4px 11px;border-radius:6px;margin-bottom:12px;
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.cat-blue{background:var(--blue-050);color:var(--blue)}
.cat-orange{background:var(--orange-050);color:#C25419}
.cat-green{background:var(--green-050);color:var(--green-600)}
.cat-cyan{background:#E5FAFD;color:var(--teal)}
.cat-red{background:var(--red-050);color:var(--red-600)}
.np-b b{display:block;font-family:'Outfit',sans-serif;font-weight:600;font-size:16.5px;line-height:1.34;letter-spacing:-.016em}
.np-p{display:block;margin-top:10px;font-size:14.6px;color:var(--mute);line-height:1.6}
.np time{display:block;margin-top:14px;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--grey)}
.np-big{grid-row:span 2;grid-column:span 1}
.np-big .np-img{aspect-ratio:4/3}
.np-big .np-b b{font-size:22px;line-height:1.25}
@media(min-width:981px){
  .news-grid{grid-template-columns:1.22fr 1fr 1fr;grid-template-rows:auto auto}
  .np-big{grid-row:1/3}
}

.awards{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:clamp(30px,3.6vw,48px);
  padding:22px 26px;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);
}
.aw-l{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--blue)}
.aw{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2)}

/* ═══════════════════════════ CTA ═══════════════════════════ */
.cta{position:relative;padding:clamp(58px,7vw,104px) 0;background:var(--blue-900);color:#fff;overflow:hidden}
.cta-hex{
  position:absolute;inset:0;opacity:.8;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16z' fill='none' stroke='%23ffffff' stroke-opacity='.09'/%3E%3C/svg%3E");
  mask-image:radial-gradient(ellipse 80% 90% at 20% 50%,#000,transparent 72%);
}
.cta::after{
  content:"";position:absolute;right:-14vw;top:-20vw;width:56vw;height:56vw;border-radius:50%;
  background:radial-gradient(circle,rgba(245,166,35,.24),transparent 62%);filter:blur(40px);pointer-events:none;
}
.cta-in{position:relative;z-index:2;display:grid;gap:clamp(30px,4vw,60px);grid-template-columns:minmax(0,1fr) minmax(0,.94fr);align-items:center}
.cta-cards{display:grid;gap:12px}
.cc{
  display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:center;
  padding:20px 24px;border-radius:var(--r-l);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  transition:.4s var(--ease);
}
.cc .ic{grid-row:span 2;font-size:26px;color:var(--amber);stroke-width:1.6}
.cc b{font-family:'Outfit',sans-serif;font-size:16.5px}
.cc span{font-size:14px;color:rgba(255,255,255,.66);line-height:1.5}
.cc:hover{background:rgba(255,255,255,.13);transform:translateX(6px);border-color:rgba(245,166,35,.5)}

/* ═══════════════════════════ FOOTER ═══════════════════════════ */
.foot{position:relative;background:#061726;color:rgba(255,255,255,.66);padding:clamp(48px,6vw,80px) 0 34px;font-size:14.5px}
.foot-top{display:grid;gap:clamp(30px,4vw,64px);grid-template-columns:minmax(0,1.06fr) minmax(0,2fr);padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-brand img{height:42px;width:auto;background:#fff;border-radius:10px;padding:7px 10px;margin-bottom:18px}
.foot-brand b{display:block;font-family:'Outfit',sans-serif;font-size:19px;color:#fff;margin-bottom:10px;letter-spacing:-.02em}
.foot-brand p{line-height:1.62;max-width:40ch}
.foot-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.foot-badges span{padding:6px 13px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(255,255,255,.8)}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.fcol{display:grid;align-content:start;gap:11px}
.fcol b{font-family:'Outfit',sans-serif;font-size:14px;color:#fff;letter-spacing:.02em;margin-bottom:5px}
.fcol a{color:rgba(255,255,255,.6);transition:color .25s,transform .25s}
.fcol a:hover{color:var(--lime);transform:translateX(3px)}
.foot-disc{margin-top:30px;font-size:12px;line-height:1.7;color:rgba(255,255,255,.4);max-width:110ch}
.foot-disc b{color:rgba(255,255,255,.62)}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:26px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.08);font-size:12.5px;color:rgba(255,255,255,.42)}

.to-top{
  position:fixed;right:24px;bottom:100px;z-index:90;width:46px;height:46px;display:grid;place-items:center;
  border-radius:50%;background:#fff;color:var(--blue);box-shadow:var(--sh-m);
  opacity:0;visibility:hidden;transform:translateY(12px);transition:.4s var(--ease);
}
.to-top.on{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--blue);color:#fff;transform:translateY(-3px)}

/* ═══════════════════════════ REVEAL ═══════════════════════════ */
.rv{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s} .rv.d2{transition-delay:.2s}
.rv.d3{transition-delay:.3s} .rv.d4{transition-delay:.4s}
.stagger>*{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(1){transition-delay:.04s} .stagger.in>*:nth-child(2){transition-delay:.12s}
.stagger.in>*:nth-child(3){transition-delay:.2s}  .stagger.in>*:nth-child(4){transition-delay:.28s}
.stagger.in>*:nth-child(5){transition-delay:.36s} .stagger.in>*:nth-child(6){transition-delay:.44s}

/* ═══════════════════════════ RESPONSIVE ═══════════════════════════ */
@media(max-width:1180px){
  .cap-grid{grid-template-columns:repeat(2,1fr)}
  .eco-strip{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1080px){
  .menu{display:none}
  .burger{display:flex}
  .nav-cta{display:none}
  .hero-in{grid-template-columns:1fr;gap:44px}
  .hero-copy{text-align:left}
  .hero-hive{align-items:center}
  .hive-hint{align-self:center}
  .mix-grid,.eco-grid,.cta-in,.puzzle-wrap{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
}
@media(max-width:980px){
  .grow-grid{grid-template-columns:1fr;gap:16px}
  .news-grid{grid-template-columns:repeat(2,1fr)}
  .np-big{grid-column:span 2;grid-row:auto}
  .subs{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:880px){
  /* honeycomb reflows to its 3-column mobile arrangement */
  .hive{
    --hw:min(152px,calc((100vw - 52px)/2.5));
    width:calc(var(--hw)*2.5);
    height:calc(var(--hw)*3.032);
  }
  .hex{--cc:var(--mc,var(--c));--rr:var(--mr,var(--r));--oo:var(--mo,var(--o,0))}
  .hx-opt{display:none}
  /* slideshow controls shed the counter and the scroll cue on small screens, and
     the whole cluster hugs the left so it clears the chat launcher */
  .hero-count,.scroller{display:none}
  .hero-ui{gap:14px}
  .hero-cap{flex:0 1 auto;max-width:34vw}
  /* 2 x 3 board on small screens — app.js reflows the pieces and rewrites --pzcw */
  .puzzle-board{aspect-ratio:2/3;max-width:420px;margin-inline:auto}
}
@media(max-width:720px){
  body{font-size:16px}
  .cap-grid{grid-template-columns:1fr}
  .stat-comb{grid-template-columns:1fr 1fr}
  .rings{grid-template-columns:1fr 1fr}
  .news-grid{grid-template-columns:1fr}
  .np-big{grid-column:span 1;grid-row:auto}
  .eco-strip{grid-template-columns:1fr 1fr}
  .shead.row{align-items:flex-start}
  .mix-key b{min-width:96px;font-size:19px}
  /* the thin slices lose their in-bar labels — the key below carries them */
  .s-hydro span,.s-solar span{display:none}
  .to-top{right:16px;bottom:92px;width:42px;height:42px}
  .hero-cap{display:none}
  .hd{width:32px}
  .ha{width:40px;height:40px}
  .sheet{padding:0;align-items:flex-end}
  .sheet-card{max-height:92vh;border-radius:var(--r-x) var(--r-x) 0 0}
  .sheet-img{border-radius:var(--r-x) var(--r-x) 0 0}
}
@media(max-width:480px){
  .rings{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr}
  .sdgs img{width:62px;height:62px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rv,.stagger>*{opacity:1;transform:none}
}