/* EnergyOn Sim — public website. Faithful to the app's design tokens (brand-tokens.md). */

@font-face{font-family:'Geist';src:url(assets/Geist-Variable.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'Geist Mono';src:url(assets/GeistMono-Variable.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}

*{box-sizing:border-box;}
/* The site is light-first: declare it so native form controls (select popups, inputs)
   never render in OS dark-mode colours. */
:root{color-scheme:light;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{margin:0;font-family:'Geist',system-ui,sans-serif;background:#F8F9FA;color:#111827;line-height:1.5;}
/* Belt-and-suspenders: decorative gradient orbs bleed past the viewport edge and are
   clipped by their sections' overflow:hidden. This root guard prevents any transient
   horizontal scrollbar during resize/animation. `clip` (vs `hidden`) keeps smooth-scroll
   and position:sticky working; `hidden` is the fallback for older browsers. */
html,body{overflow-x:hidden;max-width:100%;}
@supports (overflow:clip){html,body{overflow-x:clip;}}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
button,input,textarea,select{font-family:inherit;}
::selection{background:rgba(46,168,54,0.18);}

@keyframes eoOrb{from{transform:translate3d(0,0,0) scale(1);}to{transform:translate3d(24px,-28px,0) scale(1.08);}}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;}}

[data-hero-grid]>*,.eo-feature>*,[data-contact-grid]>*,[data-dfy]>*,[data-optimize-grid]>*{min-width:0;}

/* Nav text must never wrap to a second line. */
[data-navlinks] a,[data-navbtns] a{white-space:nowrap;}

/* The full horizontal nav (5 links + 2 buttons) needs ~900px on one line — show it only
   from 960px and use the burger below that. (Content switches to two columns at 768px.) */
@media(min-width:960px){
  [data-navlinks]{display:flex !important;}
  [data-navbtns]{display:flex !important;}
  [data-burger]{display:none !important;}
}

@media(min-width:768px){
  [data-hero-grid]{grid-template-columns:1fr 1.05fr !important;}
  .eo-feature{grid-template-columns:1fr 1fr !important;}
  .eo-reverse [data-feat-media]{order:1;}
  .eo-reverse [data-feat-copy]{order:2;}
  [data-dfy]{grid-template-columns:1fr auto !important;}
  [data-dfy-cta]{justify-content:flex-end;}
  [data-contact-grid]{grid-template-columns:1fr 1fr !important;}
  [data-optimize-grid]{grid-template-columns:1fr 1.1fr !important;}
  [data-footer-grid]{grid-template-columns:1fr 2fr !important;}
}

/* ============ Hero screen explorer — real product screens, hover to bring forward ============ */
.eo-explorer{position:relative;}
.eo-shot{margin:0;transition:transform .25s ease,opacity .25s ease,filter .25s ease;will-change:transform;}
.eo-frame{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.10);box-shadow:0 30px 60px -24px rgba(0,0,0,.7);background:#fff;}
.eo-frame-bar{height:26px;background:#161820;display:flex;align-items:center;gap:6px;padding:0 12px;}
.eo-frame-bar span{width:8px;height:8px;border-radius:50%;background:#3a3d47;}
.eo-frame-a4{border-radius:8px;}
.eo-chip{position:absolute;left:12px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;background:rgba(22,24,32,.88);color:#fff;font-family:'Geist Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.02em;padding:5px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);pointer-events:none;white-space:nowrap;}
.eo-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:#3ddb46;flex:0 0 auto;}

/* Desktop: layered fan, hover raises a card and dims the rest */
@media(min-width:768px){
  .eo-explorer{height:540px;}
  .eo-shot{position:absolute;cursor:pointer;}
  .eo-shot-a{left:0;top:10%;width:64%;z-index:3;transform:rotate(-1.6deg);}
  .eo-shot-b{right:0;top:0;width:56%;z-index:2;transform:rotate(2.2deg);opacity:.96;}
  .eo-shot-b .eo-chip{left:auto;right:12px;}
  .eo-shot-c{left:4%;bottom:0;width:56%;z-index:1;transform:rotate(1.6deg);opacity:.96;}
  .eo-shot-d{right:2%;bottom:2%;width:31%;z-index:4;transform:rotate(-2.4deg);}
  .eo-shot-d .eo-chip{left:auto;right:12px;}
  /* 768–1023px: the fan is tighter — show a card's label only while it is raised */
  @media(max-width:1023.98px){
    .eo-chip{opacity:0;transition:opacity .2s ease;}
    .eo-shot:hover .eo-chip,.eo-shot.eo-active .eo-chip{opacity:1;}
  }
  .eo-shot:hover,.eo-shot.eo-active{transform:rotate(0deg) scale(1.05);z-index:40;opacity:1;}
  .eo-shot:hover .eo-frame,.eo-shot.eo-active .eo-frame{box-shadow:0 48px 90px -24px rgba(0,0,0,.85);border-color:rgba(61,219,70,.35);}
  .eo-explorer:hover .eo-shot:not(:hover){opacity:.45;filter:saturate(.85);}
}

/* Mobile: swipeable snap strip instead of the layered fan */
@media(max-width:767.98px){
  .eo-explorer{display:flex;align-items:flex-start;gap:14px;overflow-x:auto;padding:6px 2px 14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .eo-explorer::-webkit-scrollbar{display:none;}
  .eo-shot{position:relative;flex:0 0 82%;scroll-snap-align:center;}
  .eo-shot-d{flex-basis:56%;}
}

/* Hint copy: "hover" on pointer devices, "swipe" on touch */
.eo-hint-touch{display:none;}
@media (hover:none){
  .eo-hint-desktop{display:none;}
  .eo-hint-touch{display:inline;}
}

/* ============ FAQ accordion (native <details>, styled to match cards) ============ */
.eo-faq{background:#F8F9FA;border:1px solid #E5E7EB;border-radius:10px;overflow:hidden;}
.eo-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;font-size:16px;font-weight:600;color:#111827;letter-spacing:-0.005em;}
.eo-faq summary::-webkit-details-marker{display:none;}
.eo-faq summary::after{content:"+";flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid #D1D5DB;color:#6B7280;display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:500;line-height:1;transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease;font-family:'Geist Mono',monospace;}
.eo-faq[open] summary::after{content:"−";background:#2EA836;border-color:#2EA836;color:#fff;}
.eo-faq summary:hover{background:#F3F4F6;}
.eo-faq[open] summary{border-bottom:1px solid #E5E7EB;background:#fff;}
.eo-faq .eo-faq-a{padding:16px 22px 20px;background:#fff;}
.eo-faq .eo-faq-a p{margin:0;color:#6B7280;font-size:15px;line-height:1.65;max-width:760px;}
.eo-faq summary:focus-visible{outline:2px solid #2EA836;outline-offset:2px;border-radius:10px;}

/* ============ Custom select (contact form) ============
   macOS renders native <select> popups with the SYSTEM theme (dark mode → dark menu),
   ignoring the page's color-scheme. main.js swaps the native control for this styled
   dropdown; the real <select> stays in the form (hidden) as the no-JS fallback. */
.eo-select{position:relative;}
.eo-select .eo-select-native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0;padding:0;border:0;}
.eo-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;height:46px;padding:0 14px;border:1px solid #D1D5DB;border-radius:8px;font-size:15px;background:#fff;color:#111827;cursor:pointer;text-align:left;transition:border-color .15s,box-shadow .15s;}
.eo-select-trigger:focus-visible{outline:none;border-color:#2EA836;box-shadow:0 0 0 3px rgba(46,168,54,.18);}
.eo-select-trigger svg{flex:0 0 auto;color:#6B7280;transition:transform .15s ease;}
.eo-select.open .eo-select-trigger{border-color:#2EA836;box-shadow:0 0 0 3px rgba(46,168,54,.18);}
.eo-select.open .eo-select-trigger svg{transform:rotate(180deg);}
.eo-select-menu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:#fff;border:1px solid #E5E7EB;border-radius:10px;box-shadow:0 12px 32px -8px rgba(16,24,40,.22);padding:6px;margin:0;list-style:none;display:none;}
.eo-select.open .eo-select-menu{display:block;}
.eo-select-option{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:7px;font-size:15px;color:#111827;cursor:pointer;}
.eo-select-option::before{content:"";width:16px;flex:0 0 auto;text-align:center;}
.eo-select-option[aria-selected="true"]::before{content:"✓";color:#2EA836;font-weight:600;line-height:1;}
.eo-select-option:hover,.eo-select-option.eo-hl{background:#F3F4F6;}

/* ============ Report page fan stacks on small screens ============ */
@media(max-width:560px){
  [data-report-fan]{flex-direction:column;align-items:center;}
  [data-report-fan]>div{width:86% !important;margin-top:0 !important;transform:none !important;}
}

/* Stats strip: compact two-column grid on small screens */
@media(max-width:640px){
  [data-statstrip]{display:grid !important;grid-template-columns:1fr 1fr;gap:18px 14px;}
}