/* Alpha X website prototype 5 - LEVEL 3 - DRAFT, NOT REVIEWED.
   Direction B (warm, rounded, orange main button) + premium dark teal panels (PROPOSAL #0A3F3A) + energy hero. */
:root{
  --dt:#10786F;      /* dark teal: text, headings, links on white (5.4:1) */
  --t:#14A89D;       /* teal: lines, icons, shapes only */
  --o:#FBB040;       /* orange: main button (dark text), small accents */
  --dk:#0A3F3A;      /* PROPOSAL: darker teal for premium sections */
  --ink:#14302D; --mut:#4A5F5C; --line:#D5E3E1;
  --soft:#F3F8F6; --chip:#DCEFEC; --white:#fff; --ph:#6D8683; --ondark:#D6E8E5;
  --s1:4px;--s2:8px;--s3:16px;--s4:24px;--s5:32px;--s6:48px;--s7:72px;
  --r-s:10px;--r-m:18px;--r-l:28px;
  /* type scale (one place) */
  --fs-s:13px;--fs-b:16px;--fs-l:18px;--fs-h3:clamp(18px,2.4vw,21px);--fs-h2:clamp(25px,4.4vw,38px);--fs-h1:clamp(30px,6.6vw,52px);--fs-hero:clamp(34px,7.6vw,62px);
  --sec:clamp(56px,9vw,96px);       /* vertical rhythm between sections */
  --ease:cubic-bezier(.2,.7,.2,1);
  --qbar-h:0px;
  --f-body:"Noto Sans",system-ui,sans-serif;
  --f-lao:"Noto Sans Lao","Noto Sans",sans-serif;
  --f-zh:"Noto Sans SC","Noto Sans",sans-serif;
  --lh:1.6;
}
*{box-sizing:border-box}
html{scroll-padding-top:80px;scroll-behavior:smooth}
body{margin:0;font:400 var(--fs-b)/var(--lh) var(--f-body);color:var(--ink);background:#fff;-webkit-text-size-adjust:100%}
body.lang-lo{font-family:var(--f-lao);--lh:1.8;font-size:17px;line-height:1.8}
body.lang-zh{font-family:var(--f-zh);--lh:1.7;line-height:1.7}
body.lang-lo :is(h1,h2,h3,button,a,input,select,textarea,label){font-family:var(--f-lao)}
body.lang-zh :is(h1,h2,h3,button,a,input,select,textarea,label){font-family:var(--f-zh)}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
img{max-width:100%}
a{color:var(--dt)}
:focus-visible{outline:3px solid var(--dt);outline-offset:3px;border-radius:4px}
.dark :focus-visible,.site-footer :focus-visible,.hero :focus-visible{outline-color:var(--o)}
.skip{position:absolute;left:var(--s2);top:-60px;background:var(--dk);color:#fff;padding:var(--s2) var(--s3);z-index:100;border-radius:var(--r-s)}
.skip:focus{top:var(--s2)}
.sr{position:absolute;left:-9999px}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 var(--s3)}
section{padding:var(--sec) 0}
h1{font-size:var(--fs-h1);line-height:1.15;font-weight:700;color:var(--dt);letter-spacing:-.015em;text-wrap:balance}
h2{font-size:var(--fs-h2);line-height:1.25;font-weight:700;color:var(--dt);margin-bottom:var(--s3);letter-spacing:-.01em;text-wrap:balance}
h3{font-size:var(--fs-h3);line-height:1.35;font-weight:700}
body.lang-lo h1,body.lang-lo h2,body.lang-lo h3{line-height:1.5;letter-spacing:0}
body.lang-zh h1,body.lang-zh h2,body.lang-zh h3{letter-spacing:0}
.lead{font-size:var(--fs-l);color:var(--mut);max-width:60ch}
.note{font-size:var(--fs-s);color:var(--mut)}
.top{margin-top:var(--s3)}
.after{margin-top:var(--s4)}

/* panels: dark and soft sections are rounded, with space around them */
.dark,.soft{margin:0 var(--s2);border-radius:var(--r-l)}
.soft{background:var(--soft)}
@media(min-width:900px){.dark,.soft{margin:0 var(--s4);border-radius:36px}}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;gap:var(--s2);min-height:64px}
.brand{display:flex;align-items:center;min-height:44px;text-decoration:none;color:var(--dt);font-weight:700;font-size:var(--fs-l);margin-right:auto}
.brand b{background:var(--o);color:var(--ink);padding:2px 7px;border-radius:6px;margin-left:5px;font-size:15px}
.lang{display:flex}
.lang button{min-width:44px;min-height:44px;border:0;background:none;color:var(--dt);font:600 15px var(--f-body);border-radius:99px;cursor:pointer;padding:0 6px;transition:background .2s ease}
.lang button[lang=lo]{font-family:var(--f-lao)}
.lang button[lang=zh-Hans]{font-family:var(--f-zh)}
.lang button[aria-pressed="true"]{color:var(--dk);background:var(--chip);box-shadow:inset 0 0 0 2px var(--dt)}
.menu-btn{width:44px;height:44px;border:1px solid var(--dt);border-radius:var(--r-s);background:#fff;color:var(--dt);display:grid;place-items:center;cursor:pointer}
.nav{display:none;flex-direction:column;border-top:1px solid var(--line);padding:var(--s2) 0 var(--s3)}
.nav.open{display:flex}
.nav a{display:flex;align-items:center;min-height:44px;padding:0 var(--s2);text-decoration:none;color:var(--ink);font-weight:600;border-radius:var(--r-s)}
.nav a[aria-current="page"]{color:var(--dt);box-shadow:inset 3px 0 0 var(--o)}
.nav .nav-cta{margin:var(--s2) var(--s2) 0;justify-content:center}
.btn.hd-cta{display:none}
@media(min-width:900px){
  .menu-btn{display:none}
  .site-header .wrap{display:flex;align-items:center;gap:var(--s3)}
  .hd{display:contents}
  .brand{margin-right:var(--s3);order:0}
  .nav{display:flex;flex-direction:row;border:0;padding:0;order:1;flex:1}
  .nav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--o);border-radius:0}
  .lang{order:2}
  .btn.hd-cta{display:inline-flex;order:3}
  .nav .nav-cta{display:none}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:0 var(--s4);border:2px solid transparent;border-radius:99px;font:700 var(--fs-b) var(--f-body);text-decoration:none;cursor:pointer;text-align:center;transition:transform .2s var(--ease),background .2s ease,box-shadow .2s ease}
.btn.full{width:100%;margin-top:var(--s3)}
.btn-main{background:var(--o);color:var(--ink)}
.btn-main:hover{background:#FFC25F}
.btn-soft{background:var(--chip);color:var(--dk)}
.btn-line{border-color:var(--dt);color:var(--dt);background:#fff}
.dark .btn-line,.hero .btn-line{border-color:#fff;color:#fff;background:transparent}
.btns{display:flex;flex-wrap:wrap;gap:var(--s3)}
.btns .btn{flex:1 1 200px}
@media(min-width:600px){.btns .btn{flex:0 0 auto}}
.btn:active{transform:scale(.97)}
@media(hover:hover){
  .btn:hover{transform:translateY(-2px)}
  .btn-main:hover{box-shadow:0 6px 16px rgba(251,176,64,.35)}
  .btn-line:hover{background:var(--soft)}
  .dark .btn-line:hover,.hero .btn-line:hover{background:rgba(255,255,255,.1)}
  .btn:active{transform:scale(.97)}
}

/* photos (grey boxes until real photos exist) */
.ph{display:grid;place-items:center;text-align:center;background:var(--ph);color:#fff;padding:var(--s3);font-size:14px;min-height:160px;border-radius:var(--r-m)}
.ph small{display:block;opacity:.9}
.ph.short{margin-bottom:var(--s3);min-height:140px}
.ph.tall{min-height:280px}

/* hero with energy art */
.hero{position:relative;overflow:hidden;margin:var(--s2) var(--s2) 0;border-radius:var(--r-l);padding:0 0 var(--s6);color:#fff;
  background-color:var(--dk);
  background-image:radial-gradient(800px 460px at 80% 24%,rgba(20,168,157,.30),transparent 65%),radial-gradient(circle at 1px 1px,rgba(214,232,229,.11) 1px,transparent 1.6px);
  background-size:auto,28px 28px}
/* phone: the motion scene sits first (top), the text follows; desktop: the scene fills the hero (.hero-stage is transparent) */
.hero-stage{position:relative;height:clamp(220px,40vh,300px)}
.hero-art{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.hero .wrap{position:relative;z-index:2;padding-top:var(--s4)}
.hero-body{display:grid;gap:var(--s3);max-width:600px}
.hero-body::before{content:"";width:56px;height:3px;border-radius:2px;background:var(--o)}
.hero h1{color:#fff;font-size:var(--fs-hero)}
.hero .lead{color:var(--ondark);font-size:clamp(17px,2.2vw,20px)}
.hero .note{color:var(--ondark)}
.hero .btns{margin:var(--s2) 0}
.hero-pause{position:absolute;left:14px;bottom:6px;z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid rgba(214,232,229,.55);background:rgba(10,63,58,.7);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s ease}
.hero-pause:hover{background:rgba(20,168,157,.45)}
.hero-pause .i-play{display:none}
.hero-pause[aria-pressed="true"] .i-pause{display:none}
.hero-pause[aria-pressed="true"] .i-play{display:block}
.hero-pause[hidden]{display:none}
@media(min-width:900px){
  .hero{margin:var(--s2) var(--s4) 0;border-radius:36px;padding:var(--s7) 0;min-height:600px;display:flex;align-items:center}
  .hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--dk) 30%,rgba(10,63,58,0) 56%)}
  .hero .wrap{padding-top:0}
  .hero-stage{display:contents}
  .hero-pause{left:auto;right:14px;bottom:14px}
}

/* segment rows */
.seg{display:grid;gap:var(--s3);margin-top:var(--s4)}
.seg a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s3);min-height:76px;padding:var(--s3);border:1px solid var(--line);border-left:4px solid var(--t);border-radius:var(--r-s);text-decoration:none;color:var(--ink);background:#fff;transition:transform .25s var(--ease),box-shadow .25s ease,background .25s ease,border-color .25s ease}
.seg svg{color:var(--dt)}
.seg .go{transition:transform .25s var(--ease)}
.seg span.d{display:block;color:var(--mut);font-size:15px;font-weight:400}
.seg a:active{transform:scale(.985);background:var(--soft)}
@media(hover:hover){
  .seg a:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(10,63,58,.12);background:var(--soft);border-left-color:var(--o)}
  .seg a:hover .go{transform:translateX(4px)}
}
@media(min-width:700px){.seg{grid-template-columns:1fr 1fr}}

/* dark premium (PROPOSAL #0A3F3A) */
.dark{background:var(--dk);color:#fff}
.dark h2,.dark h1{color:#fff}
.dark .lead,.dark p{color:var(--ondark)}
.dark a{color:#fff}
.dark .btn-main{color:var(--ink)}
.rule{height:3px;width:56px;border-radius:2px;background:var(--o);margin:0 0 var(--s3);border:0}
.sol{display:grid;gap:var(--s4);margin-top:var(--s4)}
.sol article{padding:var(--s4);border-top:2px solid var(--o);border-radius:0 0 var(--r-m) var(--r-m);background:rgba(255,255,255,.06);display:grid;gap:var(--s2);align-content:start;transition:background .25s ease,transform .25s var(--ease)}
.sol h3{color:#fff}
@media(hover:hover){.sol article:hover{background:rgba(255,255,255,.1);transform:translateY(-3px)}}
@media(min-width:800px){.sol{grid-template-columns:1fr 1fr}}
.planned{border:2px dashed var(--t);border-radius:var(--r-m);padding:var(--s4);background:#fff}
.planned h2{margin-bottom:var(--s2)}
.planned ul{display:grid;gap:var(--s2);margin:var(--s3) 0}
.planned li{padding:var(--s2) var(--s3);background:var(--soft);border-radius:var(--r-s)}
.badge{display:inline-block;background:var(--ink);color:#fff;font-size:var(--fs-s);font-weight:700;padding:2px 10px;border-radius:99px;margin-bottom:var(--s2)}

/* stats */
.stats{display:grid;grid-template-columns:1fr;gap:0;margin-top:var(--s4)}
.stat{padding:var(--s3) 0;border-top:1px solid var(--line)}
.stat b{display:block;font-size:clamp(34px,5vw,46px);line-height:1.1;color:var(--dt);font-weight:700;font-variant-numeric:tabular-nums}
.stat span{color:var(--mut)}
@media(min-width:700px){.stats{grid-template-columns:repeat(3,1fr);gap:var(--s4)}}

/* project cards */
.proj{display:grid;gap:var(--s4);margin-top:var(--s4)}
.pc{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s var(--ease),box-shadow .25s ease}
.soft .pc{border-color:transparent}
.pc .ph{border-radius:0;min-height:170px}
.pc .cb{padding:var(--s3) var(--s4) var(--s4);display:grid;gap:var(--s2)}
.pc .meta{font-size:14px;color:var(--mut)}
.pc.ref{border:1px dashed var(--dt)}
.pc:active{transform:scale(.985)}
@media(hover:hover){.pc:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(10,63,58,.14)}}
@media(min-width:700px){.proj{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.proj{grid-template-columns:repeat(3,1fr)}}
.proj.three{grid-template-columns:1fr}
@media(min-width:900px){.proj.three{grid-template-columns:repeat(3,1fr)}}
.cat{display:inline-block;background:var(--chip);color:var(--dk);font-size:var(--fs-s);font-weight:600;padding:2px 10px;border-radius:99px;justify-self:start}

/* calculator entry */
.calc-entry{display:grid;gap:var(--s3);padding:var(--s4);background:var(--chip);border-radius:var(--r-l)}
.calc-entry h2{margin-bottom:var(--s2)}
@media(min-width:800px){.calc-entry{grid-template-columns:1fr auto;align-items:center;padding:var(--s5) var(--s6)}}
dialog{border:0;border-radius:var(--r-m);padding:0;width:min(520px,calc(100% - 24px));max-height:calc(100% - 24px);box-shadow:0 8px 32px rgba(0,0,0,.3)}
dialog::backdrop{background:rgba(10,63,58,.6)}
.dlg{padding:var(--s4);display:grid;gap:var(--s3)}
.dlg-top{display:flex;justify-content:space-between;align-items:start;gap:var(--s3)}
.dlg-top h2{margin-bottom:var(--s1);font-size:24px}
.dlg .field+.field{margin-top:var(--s3)}
.x{width:44px;height:44px;border:1px solid var(--line);background:#fff;border-radius:50%;font-size:22px;line-height:1;cursor:pointer;color:var(--ink);flex:none}
.result{border:2px dashed var(--dt);border-radius:var(--r-s);padding:var(--s3);background:var(--soft)}
.result b{display:block;color:var(--dt)}
.result .note{margin-top:var(--s2)}

/* forms */
.form{display:grid;gap:var(--s4)}
.field{display:grid;gap:var(--s2)}
label,legend{font-weight:600}
.opt{font-weight:400;color:var(--mut)}
input[type=text],input[type=number],select,textarea{width:100%;min-height:48px;padding:10px var(--s3);border:2px solid #8FA7A4;border-radius:var(--r-s);font:400 var(--fs-b) var(--f-body);color:var(--ink);background:#fff;transition:border-color .2s ease}
body.lang-lo input,body.lang-lo select,body.lang-lo textarea{font-family:var(--f-lao)}
body.lang-zh input,body.lang-zh select,body.lang-zh textarea{font-family:var(--f-zh)}
textarea{min-height:120px;resize:vertical}
input[type=file]{min-height:48px;padding:10px 0}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--dt);outline-offset:2px;border-color:var(--dt)}
.check{display:grid;grid-template-columns:28px 1fr;gap:var(--s3);align-items:start;padding:var(--s3);background:var(--soft);border-radius:var(--r-s)}
.check input{width:24px;height:24px;margin:10px 2px 0 0;accent-color:var(--dt)}
.check label{font-weight:400;min-height:44px;display:block;padding-top:6px}
.err{color:#9A2A1C;font-weight:600;font-size:15px}
.ok{padding:var(--s4);border-radius:var(--r-m);background:var(--chip);border-left:6px solid var(--dt)}
.ok h2{margin-bottom:var(--s2)}
.ok[hidden],.err[hidden]{display:none}
.two{display:grid;gap:var(--s5)}
@media(min-width:900px){.two{grid-template-columns:1.2fr 1fr;align-items:start}}
.contact-list{display:grid;gap:var(--s3)}
.contact-list li{padding:var(--s3);border:1px solid var(--line);border-radius:var(--r-s)}
.contact-list b{display:block}
.map{min-height:200px;margin-top:var(--s4)}

/* about */
.cols{display:grid;gap:var(--s4)}
@media(min-width:800px){.cols{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.cols.four{grid-template-columns:repeat(4,1fr)}}
.cols h3{margin-bottom:var(--s1);color:var(--dt)}
.brands{display:flex;flex-wrap:wrap;gap:var(--s3);margin:var(--s3) 0}
.brands li{min-height:56px;min-width:120px;display:grid;place-items:center;border:1px dashed var(--t);border-radius:var(--r-s);padding:0 var(--s3);font-weight:600;color:var(--dt)}
.prose{max-width:70ch;display:grid;gap:var(--s3)}
.prose h2{margin:var(--s3) 0 0;font-size:24px}

/* footer */
.site-footer{background:var(--ink);color:var(--ondark);padding:var(--s6) 0 var(--s7);margin:var(--s2) var(--s2) 0;border-radius:var(--r-l) var(--r-l) 0 0}
@media(min-width:900px){.site-footer{margin:var(--s4) var(--s4) 0;border-radius:36px 36px 0 0}}
.site-footer a{color:#fff}
.site-footer .cols{gap:var(--s5)}
@media(min-width:800px){.site-footer .cols{grid-template-columns:1.2fr 1.2fr .8fr}}
.site-footer .brand{color:#fff}
.site-footer ul{display:grid;gap:0}
.site-footer li a{display:inline-flex;align-items:center;min-height:44px}
.company{margin-top:var(--s2)}
.slogan{font-weight:700;color:var(--o);margin:var(--s2) 0}
.legal{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid #3B544F;font-size:var(--fs-s)}

/* quotation bar (phones) and chat */
.qbar{display:none}
.chat-btn{position:fixed;right:16px;bottom:16px;width:60px;height:60px;border-radius:50%;border:0;background:var(--o);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.3);z-index:60;transition:transform .2s var(--ease),bottom .25s ease}
.chat-btn:hover{transform:scale(1.05)}
.chat-btn:active{transform:scale(.95)}
.chat-btn[hidden]{display:none}
.chat{position:fixed;z-index:61;right:0;bottom:0;width:100%;height:min(560px,88vh);background:#fff;display:none;flex-direction:column;border-radius:var(--r-m) var(--r-m) 0 0;box-shadow:0 -4px 24px rgba(0,0,0,.3);overflow:hidden}
.chat.open{display:flex}
@media(min-width:600px){.chat{right:16px;bottom:16px;width:380px;border-radius:var(--r-m)}}
@media(max-width:899px){
  :root{--qbar-h:72px}
  body.qbar-off{--qbar-h:0px}
  body{padding-bottom:calc(var(--qbar-h) + env(safe-area-inset-bottom,0px))}
  .qbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:55;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.97);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(10,63,58,.12);transition:transform .25s var(--ease),visibility .25s}
  .qbar .btn{width:100%}
  body.qbar-off .qbar{transform:translateY(100%);visibility:hidden}
  /* the chat bubble and the open chat sit ABOVE the bar, never over it */
  .chat-btn{bottom:calc(var(--qbar-h) + env(safe-area-inset-bottom,0px) + 12px)}
  .chat{bottom:calc(var(--qbar-h) + env(safe-area-inset-bottom,0px));height:min(520px,calc(100vh - var(--qbar-h) - 96px));height:min(520px,calc(100dvh - var(--qbar-h) - 96px));border-radius:var(--r-m)}
}
.chat-hd{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:var(--s2) var(--s3);background:var(--dk);color:#fff}
.chat-hd .x{border-color:#fff;background:transparent;color:#fff}
.chat-log{flex:1;overflow:auto;padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2);background:#fff}
.m{padding:10px 14px;border-radius:var(--r-m);max-width:90%;font-size:15px;line-height:1.5}
.m.bot{background:var(--soft);align-self:flex-start}
.m.me{background:var(--chip);color:var(--dk);align-self:flex-end}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);padding:var(--s2) var(--s3) var(--s3);background:#fff}
.chips button{min-height:44px;padding:0 var(--s3);border:2px solid var(--dt);background:#fff;color:var(--dt);border-radius:99px;font:600 14px var(--f-body);cursor:pointer;transition:background .2s ease}
.chips button:active{transform:scale(.97)}
.chips button.share{background:var(--dt);color:#fff}
.chat-form{padding:var(--s3);border-top:1px solid var(--line);display:grid;gap:var(--s2);overflow:auto;max-height:60%}
.chat-form[hidden]{display:none}
.chat-form .check{padding:var(--s2)}
.chat-form .check label{font-size:14px}
.chat-in{display:flex;gap:var(--s2);padding:var(--s2) var(--s3);border-top:1px solid var(--line)}
.chat-in input{min-height:44px}
.chat-in .btn{min-height:44px;padding:0 16px}

/* admin sketch */
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th,.tbl td{text-align:left;padding:var(--s2) var(--s3);border-bottom:1px solid var(--line);vertical-align:top}
.tbl-wrap{overflow-x:auto}
.st{display:inline-flex;align-items:center;gap:6px;font-weight:600;white-space:nowrap}
.st i{width:12px;height:12px;display:inline-block;border:2px solid var(--dt)}
.st-new i{background:var(--o);border-color:var(--ink);border-radius:50%}
.st-con i{background:var(--chip);border-radius:0}
.st-qs i{background:var(--dt);border-radius:2px}
.st-cl i{background:#fff;border-radius:50%}

/* motion on the page: only when scripts run AND the visitor allows motion (class "mo" is set in <head>) */
.mo .rv{opacity:0}
.mo .rv.in{opacity:1;animation:rise .65s var(--ease) backwards;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}.hero-pause{display:none}}

/* ================= PROTOTYPE 3: services, light and motion ================= */
/* hero service chips: show at once that battery and EV charging are in scope */
.chips-svc{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s1) 0}
.chips-svc a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid rgba(214,232,229,.38);border-radius:99px;background:rgba(255,255,255,.06);color:#fff;text-decoration:none;font-weight:600;font-size:14px;transition:background .25s ease,box-shadow .25s ease,transform .2s var(--ease)}
.chips-svc a:active{transform:scale(.97)}
.chips-svc .ico{width:20px;height:20px;flex:none;display:block}
.d-o{color:var(--o)} .d-t{color:#7ED6CD} .d-w{color:var(--ondark)}
@media(hover:hover){.chips-svc a:hover{background:rgba(255,255,255,.14);box-shadow:0 0 18px rgba(126,214,205,.35)}}

/* slow light sweep across the headline area (only when motion is allowed) */
.hero-body{position:relative}
.hero-body::after{content:"";position:absolute;inset:-12px -24px;pointer-events:none;border-radius:var(--r-m);opacity:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.075) 50%,transparent 62%);background-size:260% 100%;background-position:120% 0}
.mo .hero-body::after{opacity:1;animation:sweep 10s ease-in-out infinite}
@keyframes sweep{0%,45%{background-position:120% 0}100%{background-position:-60% 0}}

/* service cards */
.svcs{display:grid;gap:var(--s3);margin-top:var(--s4)}
@media(min-width:700px){.svcs{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.svcs:not(.two){grid-template-columns:repeat(4,1fr)}}
.svc{position:relative;overflow:hidden;display:grid;gap:var(--s2);align-content:start;padding:var(--s4);border:1px solid rgba(214,232,229,.16);border-top:2px solid var(--o);border-radius:0 0 var(--r-m) var(--r-m);background:rgba(255,255,255,.06);transition:transform .25s var(--ease),background .25s ease,border-color .25s ease,box-shadow .25s ease}
.svc>*{position:relative}
.svc h3{color:#fff}
.svc .after{margin-top:var(--s2)}
.svc:active{transform:scale(.985)}
@media(hover:hover){.svc:hover{transform:translateY(-4px);background:rgba(255,255,255,.1);border-color:rgba(126,214,205,.45);box-shadow:0 14px 34px rgba(0,0,0,.28)}}
.ico{width:64px;height:64px;border-radius:var(--r-m);display:grid;place-items:center;color:#7ED6CD;background:rgba(20,168,157,.16);border:1px solid rgba(126,214,205,.35);margin-bottom:var(--s1)}

/* spotlight: soft light follows the pointer or finger (class "lit" is set by app.js, only when motion is allowed) */
.dark{position:relative;overflow:hidden}
.dark>.wrap{position:relative;z-index:1}
.dark::after,.svc::before,.calc-entry::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s ease;background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(126,214,205,.15),transparent 70%)}
.svc::before{background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(126,214,205,.22),transparent 70%)}
.calc-entry{position:relative;overflow:hidden}
.calc-entry::before{background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(20,168,157,.16),transparent 70%)}
.calc-entry>*{position:relative}
.dark.lit::after,.svc.lit::before,.calc-entry.lit::before{opacity:1}

/* animated service icons (static when reduced motion is on) */
.ic *{transform-box:fill-box;transform-origin:center}
.ic-solar .rays{animation:spin 22s linear infinite}
.ic-solar .core{animation:corepulse 3.6s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes corepulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.ic-bat .b1{animation:bfill 4.2s ease-in-out infinite}
.ic-bat .b2{animation:bfill 4.2s ease-in-out .5s infinite}
.ic-bat .b3{animation:bfill 4.2s ease-in-out 1s infinite}
@keyframes bfill{0%,8%{opacity:.12}30%,78%{opacity:1}100%{opacity:.12}}
.ic-ev .pulse{opacity:0;animation:evpulse 2.8s ease-out infinite}
.ic-ev .p2{animation-delay:1.4s}
@keyframes evpulse{0%{opacity:.7;transform:scale(.55)}100%{opacity:0;transform:scale(1.5)}}
.ic-ev .bolt{animation:flash 2.8s ease-in-out infinite}
@keyframes flash{0%,100%{opacity:1}50%{opacity:.35}}
.ic-mnt .wr{transform-origin:20% 80%;animation:wrench 3.6s ease-in-out infinite}
@keyframes wrench{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.ic-mnt .chk{stroke-dasharray:14;stroke-dashoffset:0;animation:draw 4.2s ease-in-out infinite}
@keyframes draw{0%{stroke-dashoffset:14}35%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:14}}
.ic-mnt .ring{animation:flash 4.2s ease-in-out infinite}

/* energy line between sections */
.flow{position:relative;height:2px;width:calc(100% - 32px);max-width:1088px;margin:var(--s5) auto 0;border-radius:2px;background:var(--line);overflow:hidden}
.flow span{position:absolute;top:0;bottom:0;left:0;width:28%;background:linear-gradient(90deg,transparent,var(--t),var(--o),transparent);transform:translateX(-100%);animation:flowline 5.5s linear infinite}
@keyframes flowline{to{transform:translateX(360%)}}

/* button glow */
@media(hover:hover){
  .btn-main:hover{box-shadow:0 0 0 4px rgba(251,176,64,.28),0 8px 28px rgba(251,176,64,.5)}
  .dark .btn-line:hover,.hero .btn-line:hover{box-shadow:0 0 20px rgba(255,255,255,.22)}
}
.mo .hero .btn-main{animation:breathe 3.8s ease-in-out infinite}
.mo .hero .btn-main:hover{animation:none}
@keyframes breathe{0%,100%{box-shadow:0 0 0 0 rgba(251,176,64,0)}50%{box-shadow:0 0 24px 2px rgba(251,176,64,.38)}}
.mo .chips-svc .ico{animation:flash 3.2s ease-in-out infinite}
.mo .chips-svc li:nth-child(2) .ico{animation-delay:.5s}.mo .chips-svc li:nth-child(3) .ico{animation-delay:1s}.mo .chips-svc li:nth-child(4) .ico{animation-delay:1.5s}
.nw{white-space:nowrap}