/* =============================================================================
   WE-Energy homepage — page styles
   Palette + type come from css/tokens.css (the --we-* design system).
   This file only maps those to short page aliases and adds page-specific
   tokens (section grounds, hero scope) + the components unique to this page.
   ========================================================================== */

:root{
  --paper:var(--we-bg);            --raised:var(--we-bg-raised);
  --line:var(--we-border);         --line-strong:var(--we-border-strong);
  --line-field:var(--we-border-field);
  --ink:var(--we-text);            --muted:var(--we-text-muted);
  --subtle:var(--we-text-subtle);
  --blue:var(--we-brand-blue);     --blue-deep:var(--we-blue-700);
  --link:var(--we-link);           --link-hover:var(--we-link-hover);
  --sand:var(--we-accent);         --sand-deep:var(--we-sand-500);
  --positive:var(--we-positive);   --caution:var(--we-caution);
  --info:var(--we-info);           --focus:var(--we-focus);
  --shadow-md:var(--we-shadow-md); --shadow-lg:var(--we-shadow-lg);
  --font-sans:var(--we-font-sans); --font-mono:var(--we-font-mono);
  --edge:clamp(1.25rem,5vw,4rem);  --measure:60ch;
  --ground-cool:#E9F0F8;           --ground-warm:#FBF2D9;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --blue-deep:var(--we-blue-300); --sand-deep:var(--we-sand-300);
    --ground-cool:#0F1B26;          --ground-warm:#1C1710;
  }
}
:root[data-theme="dark"]{
  --blue-deep:var(--we-blue-300);  --sand-deep:var(--we-sand-300);
  --ground-cool:#0F1B26;           --ground-warm:#1C1710;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation-duration:.001ms!important;transition-duration:.001ms!important} }
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans);font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:600;letter-spacing:-.022em;text-wrap:balance;margin:0}
a{color:var(--link);text-underline-offset:.15em}
a:hover{color:var(--link-hover)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:3px}
img,svg{max-width:100%}

.wrap{max-width:1100px;margin:0 auto;padding-inline:var(--edge)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

.kicker{display:flex;align-items:center;gap:.7rem;margin:0 0 1.1rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.kicker b{color:var(--blue-deep);font-weight:600}
.kicker span{color:var(--subtle)}
.kicker::after{content:"";width:2.4rem;height:3px;border-radius:2px;background:var(--sand-deep)}

.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:.6rem;z-index:60;background:var(--raised);padding:.5rem .8rem;border:1px solid var(--line);border-radius:6px}

/* header */
header.bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem var(--edge);background:color-mix(in srgb,var(--paper) 82%,transparent);
  backdrop-filter:saturate(1.5) blur(10px);border-bottom:1px solid var(--line)}
header.bar .brand{display:inline-flex;align-items:center;gap:.6rem;color:var(--ink);text-decoration:none;font-weight:600;letter-spacing:-.01em}
header.bar .brand svg{height:1.2rem;width:auto;color:var(--blue)}
header.bar nav{display:none;gap:1.4rem}
header.bar nav a{font-family:var(--font-sans);font-size:.9rem;font-weight:500;letter-spacing:0;color:var(--muted);text-decoration:none;padding:.2rem 0;border-bottom:2px solid transparent}
header.bar nav a:hover{color:var(--ink);border-color:var(--sand-deep)}
@media(min-width:760px){header.bar nav{display:flex}}
.tbtn{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:.4rem .55rem;cursor:pointer}
.tbtn:hover{color:var(--ink);border-color:var(--line-strong)}

/* hero — deliberately dark in both themes */
.hero{--paper:#0C1119;--ink:#F3F5F3;--muted:#AEBAC6;--subtle:#8894A1;--line:#243240;
  background:
    radial-gradient(52% 46% at 84% 8%,rgba(69,120,173,.42),transparent 72%),
    radial-gradient(46% 50% at 6% 96%,rgba(250,227,152,.16),transparent 70%),
    radial-gradient(90% 70% at 50% 120%,rgba(49,83,122,.30),transparent 70%),
    #0C1119;
  color:var(--ink);padding-block:clamp(3.75rem,10vw,7.5rem);position:relative;overflow:hidden}
.hero__mark{position:absolute;right:-10%;top:50%;translate:0 -50%;width:min(760px,90vw);color:#5E8FBE;opacity:.12;pointer-events:none}
.hero .wrap{position:relative}
.hero__logo{width:min(520px,84vw);height:auto;color:var(--sand);display:block}
.hero__rule{width:64px;height:4px;border-radius:2px;background:var(--sand);margin:2rem 0 0}
.hero__lead{margin:1.4rem 0 0;max-width:44ch;font-size:clamp(1.15rem,2.6vw,1.45rem);line-height:1.5;color:var(--muted)}
.hero__lead b{color:var(--ink);font-weight:600}
.hero__tag{margin:1.4rem 0 0;font-size:clamp(1.55rem,4.4vw,2.5rem);line-height:1.12;letter-spacing:-.03em;font-weight:700;max-width:16ch}
.hero__tag span{color:var(--sand)}
.hero__cta{margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:.8rem}
.hero__meta{margin-top:2.6rem;display:flex;flex-wrap:wrap;gap:.6rem}
.hero__meta span{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--sand);
  border:1px solid color-mix(in srgb,var(--sand) 34%,transparent);border-radius:999px;padding:.34rem .7rem}

.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.78rem 1.3rem;font:inherit;font-weight:600;line-height:1;
  border-radius:9px;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:background .14s,border-color .14s,transform .14s,box-shadow .14s}
.btn--primary{background:var(--sand);color:#3C220A;box-shadow:0 6px 20px -6px rgba(250,227,152,.5)}
.btn--primary:hover{background:#FFEFBE;color:#3C220A}
.btn--ink{background:#101820;color:#FAE398}
.btn--ink:hover{background:#20303f;color:#FAE398}
.btn--outline{background:transparent;color:inherit;border-color:color-mix(in srgb,currentColor 34%,transparent)}
.btn--outline:hover{border-color:currentColor}
.btn:active{transform:translateY(1px)}
.btn--lg{padding:.9rem 1.6rem;font-size:1.05rem}

section.band{padding-block:clamp(3.75rem,8vw,6rem)}
section.band h2{font-size:clamp(1.7rem,3.8vw,2.3rem);line-height:1.12;max-width:20ch}
section.band .intro{margin:1rem 0 0;max-width:var(--measure);color:var(--muted);font-size:1.06rem}

#platforms{background:var(--ground-cool)}
#about{background:var(--ground-warm)}

/* platform cards */
.assets{margin-top:2.8rem;display:grid;gap:1.15rem;grid-template-columns:1fr}
@media(min-width:680px){.assets{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.assets{grid-template-columns:repeat(3,1fr)}}
.asset{position:relative;display:flex;flex-direction:column;gap:1rem;padding:1.6rem;background:var(--raised);
  border:1px solid var(--line);border-radius:14px;text-decoration:none;color:inherit;overflow:hidden;
  transition:border-color .16s,box-shadow .16s,transform .16s}
.asset::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--_accent,var(--blue))}
a.asset:hover{border-color:var(--_accent,var(--blue));box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.asset__icon{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--_accent,var(--blue)) 16%,transparent);color:var(--_accent,var(--blue))}
.asset__icon svg{width:24px;height:24px}
.asset__icon [data-layer=accent]{fill:currentColor}
.asset__name{font-weight:600;font-size:1.2rem;letter-spacing:-.015em;margin-top:.1rem}
.asset__url{font-family:var(--font-mono);font-size:.72rem;color:var(--subtle);letter-spacing:.01em;margin-top:.15rem}
.asset__desc{margin:0;font-size:.93rem;color:var(--muted);flex:1}
.asset__foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.asset--fieldaudit{--_accent:var(--blue)}
.asset--solar{--_accent:var(--sand-deep)}
.asset--drone{--_accent:var(--blue-deep)}

.chip{display:inline-flex;align-items:center;gap:.45em;font-family:var(--font-mono);font-size:.63rem;letter-spacing:.08em;
  text-transform:uppercase;padding:.3em .62em;border-radius:6px;font-weight:500}
.chip .led{width:.5em;height:.5em;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 25%,transparent)}
.chip--live{color:var(--positive);background:color-mix(in srgb,var(--positive) 15%,transparent)}
.chip--building{color:var(--caution);background:color-mix(in srgb,var(--caution) 15%,transparent)}
.chip--research{color:var(--info);background:color-mix(in srgb,var(--info) 15%,transparent)}
.asset__arrow{font-family:var(--font-mono);color:var(--subtle);transition:transform .16s,color .16s}
a.asset:hover .asset__arrow{color:var(--_accent);transform:translateX(3px)}

/* about */
.about__grid{margin-top:2.4rem;display:grid;gap:2.4rem}
@media(min-width:900px){.about__grid{grid-template-columns:1.12fr .88fr;gap:3rem}}
.prose p{margin:0 0 1rem;max-width:var(--measure)}
.prose p:last-child{margin-bottom:0}
.prose .drop{font-size:1.14rem;color:var(--ink);font-weight:500}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;align-content:start}
.stat{border-radius:12px;padding:1.15rem;display:flex;flex-direction:column;gap:.4rem}
.stat b{font-family:var(--font-mono);font-size:1.55rem;font-weight:600;letter-spacing:-.02em}
.stat span{font-size:.77rem;line-height:1.4}
.stat--blue{background:#2C4C71;color:#fff}
.stat--blue span{color:#DCE7F2}
.stat--ink{background:#101820;color:#FAE398}
.stat--ink span{color:#AEBAC6}
.stat--sand{background:var(--sand);color:#3C220A;grid-column:1/-1}
.stat--sand span{color:#6B4A1B}

/* contact — the loud colour block, light in both themes by design */
#contact{background:var(--sand);color:#241606}
#contact .inner{display:flex;flex-direction:column;gap:1.3rem;align-items:flex-start;position:relative}
#contact .kicker b{color:#8A5A16}
#contact .kicker span{color:#7A5A2E}
#contact .kicker::after{background:#241606;opacity:.35}
#contact h2{font-size:clamp(1.75rem,4.4vw,2.5rem);max-width:20ch;color:#241606}
#contact p{margin:0;max-width:46ch;color:#4A3312;font-size:1.06rem}
#contact .addr{font-family:var(--font-mono);font-size:.8rem;color:#6B4A1B;letter-spacing:.02em}
#contact::after{content:"";position:absolute;right:-6%;bottom:-30%;width:min(420px,60vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.5),transparent 68%);pointer-events:none}

footer{background:#0A0F15;color:#AEBAC6;padding:3rem var(--edge) 2.2rem;font-size:.85rem}
footer .frow{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
footer svg.wm{width:150px;height:auto;color:var(--sand)}
footer a{color:#CDD4D2;text-decoration:none}
footer a:hover{text-decoration:underline;color:#fff}
footer .side{max-width:36ch}
footer .private{margin-top:.9rem;font-size:.8rem;color:#7C8794}
footer .fnav{font-family:var(--font-mono);font-size:.75rem;line-height:2}
footer .stamp{margin-top:2.4rem;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.07em;color:#5C6672;text-transform:uppercase;border-top:1px solid #1B2530;padding-top:1.3rem;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem}