/* ============================================================
   AerixSys — Design System v2 ("Signal & Structure")
   A blueprint/engineering aesthetic for a company that builds
   physical infrastructure — networks, cameras, solar, wiring,
   land — across all 16 regions of Ghana.
   Signature motif: a hub-and-spoke coverage map. Accra HQ at the
   centre, live signal lines radiating out to all 16 regions.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --sky:#0052cc;
  --sky2:#003b99;
  --sky3:#001e42;
  --sky4:#001230;
  --cyan:#00d4ff;
  --cyan2:#00afd8;

  --paper:#f7f9fc;
  --panel:#ffffff;
  --ink:#0b1526;
  --ink-soft:#4a5a72;
  --line:rgba(11,21,38,0.09);
  --line-strong:rgba(11,21,38,0.16);

  --amp:#ff8a3d;
  --live:#00c896;
  --volt:#ffcc00;
  --guard:#7c5cff;
  --land:#2f8f4e;

  --r-sm:10px;
  --r:18px;
  --r-lg:30px;

  --shadow-sm:0 2px 12px rgba(11,21,38,.05);
  --shadow:0 16px 44px -8px rgba(0,30,66,.14),0 2px 8px rgba(0,30,66,.05);
  --shadow-lg:0 30px 80px -14px rgba(0,20,50,.28),0 4px 16px rgba(0,20,50,.06);
  --shadow-cyan:0 10px 32px -4px rgba(0,212,255,.35);

  --ease:cubic-bezier(.22,1,.36,1);
  --maxw:1240px;

  --font-display:'Outfit',sans-serif;
  --font-body:'Outfit',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  position:relative;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* subtle film-grain — keeps flat colour fields from looking sterile */
body::before{
  content:'';position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-radius:4px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--sky3);color:#fff;padding:.75rem 1.25rem;z-index:2000;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

h1,h2,h3,h4{font-family:var(--font-display);color:var(--sky3);line-height:1.15;letter-spacing:-.02em}
h1{font-size:clamp(2.3rem,5.2vw,3.9rem);font-weight:700}
h2{font-size:clamp(1.65rem,3.4vw,2.55rem);font-weight:700;letter-spacing:-.02em}
h3{font-size:1.28rem;font-weight:600;letter-spacing:-.01em}
p{color:var(--ink-soft)}
.eyebrow{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sky2);font-weight:600;display:inline-flex;align-items:center;gap:.55rem;
}
.eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(0,212,255,.16),0 0 12px rgba(0,212,255,.5)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:3}
section{padding:96px 0}
@media (max-width:720px){section{padding:60px 0}}

/* ============ BLUEPRINT GRID BACKDROP ============ */
.blueprint{
  position:relative;
  background-image:
    linear-gradient(rgba(0,82,204,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,82,204,.055) 1px,transparent 1px);
  background-size:40px 40px;
  background-position:-1px -1px;
}
.blueprint-dark{
  background-color:var(--sky3);
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:40px 40px;
}

/* ============ HEADER / NAV ============ */
.site-header{
  position:sticky;top:0;z-index:900;
  background:rgba(247,249,252,.82);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(0,82,204,.04);
}
.site-header::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--sky),var(--cyan),var(--guard));
}
.header-cta-utility{display:flex;align-items:center;gap:8px;padding-right:8px;margin-right:2px;border-right:1px solid var(--line-strong)}
@media(max-width:1400px){.header-cta-utility{border-right:none;padding-right:0;margin-right:0}}
.header-row{display:flex;align-items:center;justify-content:space-between;height:78px;gap:14px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand picture{display:contents}
.brand-logo{display:block;width:auto}
.brand-logo-dark{display:none}
[data-theme="dark"] .brand-logo-light{display:none}
[data-theme="dark"] .brand-logo-dark{display:block}
.brand-region-tag{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;color:var(--sky2);text-transform:uppercase;font-weight:600;white-space:nowrap;padding-left:12px;border-left:1px solid var(--line-strong)}
@media(max-width:560px){.brand-region-tag{display:none}}
.footer-brand .brand{margin-bottom:4px}
.brand .tag{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;color:var(--sky2);text-transform:uppercase;display:block;font-weight:600;margin-top:1px;white-space:nowrap}
@media(max-width:480px){.brand .tag{display:none}}

.main-nav{display:flex;align-items:center;gap:1px;min-width:0}
.main-nav>ul{display:flex;align-items:center;gap:1px}
.main-nav a.nav-link{
  padding:10px 14px;border-radius:10px;font-weight:600;font-size:.91rem;color:var(--ink);
  position:relative;transition:color .18s var(--ease);white-space:nowrap;display:inline-flex;align-items:center;gap:4px;
}
.main-nav a.nav-link::after{
  content:'';position:absolute;left:14px;right:14px;bottom:6px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--sky),var(--cyan));transform:scaleX(0);transform-origin:left;
  transition:transform .25s var(--ease);
}
.main-nav a.nav-link:hover{color:var(--sky2)}
.main-nav a.nav-link:hover::after{transform:scaleX(1)}
.main-nav a.nav-link.active{color:var(--sky2);background:rgba(0,82,204,.06)}
.main-nav a.nav-link.active::after{transform:scaleX(1)}
.nav-caret{display:inline-block;font-size:.7rem;transition:transform .25s var(--ease);color:var(--sky2)}
.has-drop:hover .nav-caret,.has-drop:focus-within .nav-caret{transform:rotate(180deg)}
@media(max-width:1100px){.main-nav a.nav-link{padding:10px 12px;font-size:.9rem}}

.has-drop{position:relative}
.drop-panel{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,-8px) scale(.96);width:300px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-lg);padding:10px;display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transition:opacity .25s var(--ease),transform .3s cubic-bezier(.22,1.2,.36,1),visibility .25s;
  max-height:70vh;overflow-y:auto;
}
.drop-panel-simple{width:220px}
.drop-panel-simple a{padding:11px 14px;gap:10px}
.drop-panel-simple a span{font-size:.9rem;font-weight:600;color:var(--sky3)}
.drop-panel-simple a svg{width:14px;height:14px;opacity:.5}
.drop-panel::before{
  content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:12px;height:12px;background:var(--panel);border-left:1px solid var(--line);border-top:1px solid var(--line);
}
.has-drop:hover .drop-panel,.has-drop:focus-within .drop-panel{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1)}
.drop-panel a{display:flex;align-items:flex-start;gap:12px;padding:11px 13px;border-radius:10px;transition:background .2s var(--ease),transform .2s var(--ease)}
.drop-panel a svg{flex-shrink:0;margin-top:2px;color:var(--sky2);transition:color .2s var(--ease)}
.drop-panel a:hover{background:rgba(0,82,204,.06);transform:translateX(2px)}
.drop-panel a:hover svg{color:var(--sky)}
.drop-panel a strong{font-size:.87rem;color:var(--sky3);display:block}
.drop-panel a .dp-desc{font-size:.74rem;color:var(--ink-soft);display:block;margin-top:2px}

/* Compact grid variant — used by the Locations mega-menu (many short items) */
.drop-panel-grid{width:340px;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.drop-panel-grid a{padding:9px 12px;gap:9px;align-items:center}
.drop-panel-grid a span{font-size:.86rem;font-weight:600;color:var(--sky3)}
.drop-panel-grid a svg{width:15px;height:15px}
.drop-panel-viewall{
  grid-column:1 / -1;margin-top:6px;padding-top:12px!important;border-top:1px solid var(--line);
  font-weight:700;color:var(--sky2)!important;
}
.drop-panel-viewall span{color:var(--sky2)!important}
.drop-panel-viewall:hover{background:rgba(0,82,204,.06)}

.has-drop.drop-right{position:relative}
.has-drop.drop-right .drop-panel{left:auto;right:0;transform:translateY(-8px) scale(.96)}
.has-drop.drop-right .drop-panel::before{left:auto;right:24px;transform:rotate(45deg)}
.has-drop.drop-right:hover .drop-panel,.has-drop.drop-right:focus-within .drop-panel{transform:translateY(0) scale(1)}

.header-cta{display:flex;align-items:center;gap:8px;flex-shrink:0}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden;
  font-weight:700;font-size:.92rem;letter-spacing:.01em;padding:13px 24px;border-radius:12px;
  transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s cubic-bezier(.22,1,.36,1);
  white-space:nowrap;isolation:isolate;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.97)}
.btn::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 48%,transparent 66%);
  transform:translateX(-120%);transition:transform .6s var(--ease);
}
.btn:hover::after{transform:translateX(120%)}
@media(max-width:480px){
  .btn{white-space:normal;text-align:center;padding:13px 20px}
  .hero-ctas,.cta-band .btns{flex-direction:column;align-items:stretch}
  .hero-ctas .btn,.cta-band .btns .btn{width:100%}
}
.btn-primary{background:linear-gradient(135deg,var(--cyan2),var(--sky) 55%,var(--sky2));color:#fff;box-shadow:0 12px 32px -4px rgba(0,82,204,.5),0 0 0 1px rgba(0,212,255,.15),inset 0 1px 0 rgba(255,255,255,.22)}
.btn-primary:hover{box-shadow:0 18px 40px -6px rgba(0,82,204,.6),0 0 0 1px rgba(0,212,255,.22),inset 0 1px 0 rgba(255,255,255,.28)}
.hero-ctas .btn-primary{animation:cta-pulse 3.2s ease-in-out infinite}
@keyframes cta-pulse{0%,100%{box-shadow:0 12px 32px -4px rgba(0,82,204,.5),0 0 0 1px rgba(0,212,255,.15),inset 0 1px 0 rgba(255,255,255,.22)}50%{box-shadow:0 14px 38px -2px rgba(0,150,255,.7),0 0 0 3px rgba(0,212,255,.22),inset 0 1px 0 rgba(255,255,255,.3)}}
@media(prefers-reduced-motion:reduce){.hero-ctas .btn-primary{animation:none}}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 36px -4px rgba(0,82,204,.48),inset 0 1px 0 rgba(255,255,255,.2)}
.btn-cyan{background:linear-gradient(135deg,var(--cyan),var(--cyan2));color:var(--sky3);box-shadow:var(--shadow-cyan)}
.btn-cyan:hover{transform:translateY(-2px);box-shadow:0 14px 36px -4px rgba(0,212,255,.45)}
.btn-ghost{background:transparent;border:1.5px solid var(--line-strong);color:var(--sky3)}
.btn-ghost:hover{border-color:var(--sky2);background:rgba(0,82,204,.05);transform:translateY(-1px)}
.btn-whatsapp{background:linear-gradient(135deg,#25D366,#1DA851);color:#fff;box-shadow:0 10px 28px -4px rgba(37,211,102,.45),inset 0 1px 0 rgba(255,255,255,.2)}
.btn-whatsapp:hover{box-shadow:0 16px 36px -6px rgba(37,211,102,.55),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-whatsapp:hover{transform:translateY(-2px);box-shadow:0 16px 36px -4px rgba(37,211,102,.55)}
.btn-whatsapp svg{flex-shrink:0}
.btn-call{font-family:var(--font-mono);font-weight:600}
.btn-sm{padding:9px 16px;font-size:.84rem;border-radius:10px}
@media(max-width:480px){.header-cta>.btn-sm{display:none}}
.phone-pill{
  display:none;font-family:var(--font-mono);font-size:.82rem;font-weight:600;color:var(--sky3);
  border:1.5px solid var(--line-strong);border-radius:10px;padding:9px 14px;white-space:nowrap;
}
@media(min-width:1400px){.phone-pill{display:inline-flex}}

.theme-toggle{flex-shrink:0}
@media(max-width:480px){.theme-toggle{display:none}}

.mobile-toggle{display:none;flex-direction:column;gap:5px;padding:12px;flex-shrink:0;min-width:44px;min-height:44px;align-items:center;justify-content:center}
.mobile-toggle span{width:22px;height:2.5px;background:var(--sky3);border-radius:2px;transition:transform .28s var(--ease),opacity .2s var(--ease)}
.mobile-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobile-toggle.open span:nth-child(2){opacity:0}
.mobile-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:980px){.main-nav{display:none}.mobile-toggle{display:flex}}
.mobile-panel{
  display:none;position:fixed;inset:78px 0 0 0;background:var(--paper);z-index:850;
  overflow-y:auto;padding:20px 24px 100px;
}
.mobile-panel.open{display:block}
.mobile-panel a{display:block;padding:14px 4px;border-bottom:1px solid var(--line);font-weight:600;color:var(--sky3);transition:color .18s var(--ease),padding-left .18s var(--ease)}
.mobile-panel a:active{color:var(--sky2);padding-left:8px}
.mobile-panel .m-sub{padding-left:16px;font-weight:500;font-size:.92rem;color:var(--ink-soft);display:flex;align-items:center;gap:10px}
.mobile-panel .m-sub svg{color:var(--sky2);flex-shrink:0}
.mobile-panel .m-section-label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);padding:16px 4px 6px;border-bottom:none}

/* ============ HERO ============ */
.hero{position:relative;padding:76px 0 88px;overflow:hidden}
.hero::before{
  content:'';position:absolute;top:-220px;right:-180px;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,82,204,.14),transparent 68%);pointer-events:none;z-index:0;
}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center;position:relative;z-index:1}
@media (min-width:921px){
  .hero-text{order:1}
  .coverage-visual{order:2}
}
@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .coverage-visual{max-width:300px}
}
@media (max-width:600px){
  .hero-dark{padding:32px 0 40px}
  h1{font-size:1.55rem;line-height:1.2}
  .hero h1{margin:14px 0 14px}
  .hero .lead{font-size:.98rem;margin-bottom:20px;line-height:1.55}
  .coverage-visual{max-width:200px;margin-bottom:4px}
  .hero-trust{margin-top:16px;gap:12px}
}
@media (max-width:380px){
  h1{font-size:1.4rem}
  .coverage-visual{max-width:170px}
}
.hero h1{margin:18px 0 22px}
.hero .lead{font-size:1.17rem;max-width:560px;margin-bottom:30px;line-height:1.6}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:32px}
.hero-trust{display:flex;flex-wrap:wrap;gap:24px}
.trust-item{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:var(--sky3)}
.trust-item .dot{width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 0 3px rgba(0,200,150,.18)}

/* ---- Cinematic dark hero (homepage flagship moment) ---- */
.hero-dark{
  padding:96px 0 108px;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(0,212,255,.16), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(0,82,204,.28), transparent 55%),
    radial-gradient(ellipse 600px 400px at 50% 120%, rgba(124,92,255,.12), transparent 60%),
    linear-gradient(165deg,var(--sky4) 0%,var(--sky3) 55%,#001a3d 100%);
}
.hero-dark::before{display:none}
.hero-dark .blueprint-lines{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:44px 44px;mask-image:linear-gradient(to bottom,black,transparent 85%);
}
.hero-dark .breadcrumb{color:rgba(255,255,255,.55)}

.ambient-blobs{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(60px);will-change:transform}
.blob-1{width:420px;height:420px;top:-100px;left:8%;background:radial-gradient(circle,rgba(0,212,255,.65),transparent 70%);animation:blob-drift-1 18s ease-in-out infinite}
.blob-2{width:360px;height:360px;bottom:-80px;right:6%;background:radial-gradient(circle,rgba(124,92,255,.6),transparent 70%);animation:blob-drift-2 22s ease-in-out infinite}
.blob-3{width:300px;height:300px;top:38%;right:26%;background:radial-gradient(circle,rgba(255,138,61,.45),transparent 70%);animation:blob-drift-3 16s ease-in-out infinite}
.blob-4{width:240px;height:240px;top:12%;left:42%;background:radial-gradient(circle,rgba(0,255,178,.4),transparent 70%);animation:blob-drift-2 26s ease-in-out infinite reverse}
@keyframes blob-drift-1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(52px,-46px) scale(1.2)}66%{transform:translate(-30px,36px) scale(.88)}}
@keyframes blob-drift-2{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(-48px,-38px) scale(1.16)}70%{transform:translate(32px,26px) scale(.9)}}
@keyframes blob-drift-3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,42px) scale(1.24)}}
@media(prefers-reduced-motion:reduce){.blob{animation:none}}
@media(max-width:640px){.blob{filter:blur(48px);opacity:.7}.blob-4{display:none}}
.hero-dark .breadcrumb a{color:var(--cyan)}
.hero-dark .eyebrow{color:var(--cyan)}
.hero-dark h1{color:#fff;font-size:clamp(2.5rem,5.6vw,4.3rem)}
.hero-dark h1 .grad{
  background:linear-gradient(110deg,var(--cyan) 0%,#8dd8ff 30%,var(--guard) 60%,var(--cyan) 100%);
  background-size:250% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:grad-shimmer 6s ease-in-out infinite;
}
@keyframes grad-shimmer{0%,100%{background-position:0% center}50%{background-position:100% center}}
@media(prefers-reduced-motion:reduce){.hero-dark h1 .grad{animation:none}}
.hero-dark .lead{color:rgba(255,255,255,.76);font-size:1.22rem}
.hero-dark .trust-item{color:rgba(255,255,255,.85)}
.hero-dark .btn-ghost{border-color:rgba(255,255,255,.28);color:#fff}
.hero-dark .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}

/* ---- Coverage map (signature element): Accra HQ hub, spokes to 16 regions ---- */
.coverage-visual{position:relative;aspect-ratio:1/1;max-width:460px;margin:0 auto}
.orbit-ring{animation:orbit-spin 36s linear infinite}
.orbit-counter{animation:orbit-counter-spin 36s linear infinite}
@keyframes orbit-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes orbit-counter-spin{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
@media(prefers-reduced-motion:reduce){.orbit-ring,.orbit-counter{animation:none}}
@media(max-width:480px){.node-icon{stroke-width:2.6}.link-line{stroke-width:1.4}}
.coverage-visual svg{width:100%;height:100%;position:relative;z-index:1}
.cv-glow{
  position:absolute;inset:8%;border-radius:50%;
  background:radial-gradient(circle,rgba(0,212,255,.16),rgba(0,82,204,.08) 55%,transparent 78%);
  filter:blur(2px);
}
.cv-ring{fill:none;stroke:rgba(0,82,204,.14);stroke-width:1;stroke-dasharray:2 6}
.cv-ring-2{stroke:rgba(0,82,204,.1);animation:cv-rotate 60s linear infinite}
@keyframes cv-rotate{to{transform:rotate(360deg)}}
.cv-ring-2{transform-origin:200px 200px}
.link-line{
  stroke:rgba(0,82,204,.35);stroke-width:1.3;stroke-dasharray:4 5;
  animation:cv-flow 2.4s linear infinite;
}
@keyframes cv-flow{to{stroke-dashoffset:-18}}
.node{fill:var(--panel);stroke:rgba(0,82,204,.4);stroke-width:1.5}
.node-icon{color:var(--sky2);pointer-events:none}
.node-label{font-family:var(--font-body);font-size:13px;font-weight:700;fill:var(--sky2);pointer-events:none}
.node.on,.node-pulse{animation:cv-pulse 2.8s ease-in-out infinite}
@keyframes cv-pulse{0%,100%{fill:rgba(0,82,204,.28)}50%{fill:var(--cyan);filter:drop-shadow(0 0 6px rgba(0,212,255,.85))}}
.cv-hub-halo{fill:rgba(0,212,255,.16);animation:cv-halo 2.4s ease-in-out infinite}
@keyframes cv-halo{0%,100%{opacity:.5;r:32}50%{opacity:.9;r:38}}
.cv-hub{fill:var(--sky3);stroke:var(--cyan);stroke-width:2}
.cv-hub-mark{stroke:var(--cyan)}
.cv-caption{
  position:absolute;bottom:2%;left:50%;transform:translateX(-50%);text-align:center;
  background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border:1px solid var(--line);
  border-radius:20px;padding:8px 18px;box-shadow:var(--shadow-sm);
}
.cv-caption span{display:block;font-family:var(--font-mono);font-size:.72rem;font-weight:700;color:var(--sky3);letter-spacing:.06em}
.cv-caption small{font-size:.66rem;color:var(--live);font-weight:600}
@media (prefers-reduced-motion:reduce){.link-line,.node-pulse,.cv-hub-halo,.cv-ring-2{animation:none}}
.hero-dark .coverage-visual .cv-glow{background:radial-gradient(circle,rgba(0,212,255,.28),rgba(0,82,204,.14) 55%,transparent 78%)}
.hero-dark .coverage-visual .cv-ring{stroke:rgba(0,212,255,.22)}
.hero-dark .coverage-visual .cv-ring-2{stroke:rgba(0,212,255,.16)}
.hero-dark .coverage-visual .link-line{stroke:rgba(0,212,255,.5)}
.hero-dark .coverage-visual .node{fill:rgba(255,255,255,.07);stroke:rgba(0,212,255,.6)}
.hero-dark .coverage-visual .node-icon{color:var(--cyan)}
.hero-dark .coverage-visual .node-label{fill:rgba(255,255,255,.85)}

/* ============ STATS BAND ============ */
.stats-band{
  background:
    radial-gradient(ellipse 700px 300px at 10% 0%, rgba(0,212,255,.14), transparent 60%),
    radial-gradient(ellipse 600px 300px at 90% 100%, rgba(124,92,255,.1), transparent 60%),
    linear-gradient(160deg,var(--sky4),var(--sky3) 60%,var(--sky2));
  color:#fff;padding:52px 0;position:relative;overflow:hidden;
}
.stats-band::before{
  content:'';position:absolute;top:50%;left:50%;width:900px;height:300px;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse,rgba(0,212,255,.14),transparent 70%);pointer-events:none;
}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;position:relative}
.stats-grid>div{position:relative}
.stats-grid>div:not(:last-child)::after{
  content:'';position:absolute;right:-12px;top:50%;transform:translateY(-50%);height:36px;width:1px;background:rgba(255,255,255,.14);
}
@media (max-width:760px){.stats-grid{grid-template-columns:repeat(2,1fr);row-gap:32px}.stats-grid>div:nth-child(odd)::after{display:none}}
.stat-num{
  font-family:var(--font-display);font-size:clamp(1.7rem,3.2vw,2.6rem);font-weight:700;
  background:linear-gradient(135deg,#fff,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;
}
.stat-label{font-size:.82rem;color:rgba(255,255,255,.72);margin-top:6px;font-weight:500}

/* ============ CARDS / SERVICE GRID ============ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.field-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.field-photo{border-radius:var(--r);overflow:hidden;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.field-photo picture{display:block}
.field-photo img{width:100%;height:220px;object-fit:cover;display:block}
.field-photo figcaption{padding:12px 14px;font-size:.82rem;color:var(--ink-soft);font-weight:600}
@media(max-width:900px){.field-gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.field-gallery{grid-template-columns:1fr}}
@media (max-width:920px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid-3,.grid-2,.grid-4{grid-template-columns:1fr}}

.card{
  position:relative;border-radius:var(--r);padding:30px;overflow:hidden;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,linear-gradient(150deg,rgba(0,82,204,.22),rgba(0,212,255,.1) 45%,rgba(0,82,204,.08)) border-box;
  border:1.5px solid transparent;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
}
.card:hover{
  transform:translateY(-6px);box-shadow:var(--shadow);
  background:linear-gradient(var(--panel),var(--panel)) padding-box,linear-gradient(150deg,rgba(0,82,204,.5),rgba(0,212,255,.35) 45%,rgba(0,82,204,.18)) border-box;
}
[data-theme="dark"] .card{background:linear-gradient(var(--panel),var(--panel)) padding-box,linear-gradient(150deg,rgba(0,212,255,.28),rgba(0,82,204,.12) 45%,rgba(0,212,255,.06)) border-box}
.card .ico-badge{
  width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(0,82,204,.12),rgba(0,212,255,.14));margin-bottom:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);color:var(--sky2);
}
.card .ico-badge svg{width:24px;height:24px}
.team-card{text-align:center}
.team-avatar{
  width:84px;height:84px;border-radius:50%;margin:0 auto;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--sky),var(--cyan));
  color:#fff;font-family:var(--font-display);font-weight:800;font-size:1.6rem;letter-spacing:-.02em;
  box-shadow:0 10px 26px -6px rgba(0,82,204,.4);
}
.team-linkedin{
  display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:.84rem;font-weight:700;
  color:var(--sky2);
}
.team-linkedin:hover{color:var(--sky3)}
.team-linkedin svg{width:15px;height:15px;opacity:.75}
.card h3{margin-bottom:9px;font-size:1.16rem}
.card p{font-size:.93rem}
.card-link{margin-top:16px;font-weight:700;font-size:.86rem;color:var(--sky2);display:inline-flex;gap:6px;align-items:center;transition:gap .2s var(--ease)}
.card-link:hover{color:var(--sky);gap:10px}

/* Section header pattern */
.sec-head{max-width:680px;margin-bottom:48px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{margin-top:14px}
.sec-head p{margin-top:14px;font-size:1.06rem}

/* Region grid list (footer + locations) */
.region-tags{display:flex;flex-wrap:wrap;gap:9px}
.region-tags a,.region-tags span{
  font-size:.78rem;font-weight:600;padding:7px 14px;border-radius:20px;
  border:1px solid var(--line-strong);color:var(--ink-soft);transition:all .2s var(--ease);
}
.region-tags a:hover{border-color:var(--sky2);color:var(--sky2);background:rgba(0,82,204,.05);transform:translateY(-1px)}

/* ============ PROCESS / STEPS ============ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:step;position:relative}
@media (max-width:920px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding:28px 24px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.step::before{
  counter-increment:step;content:counter(step);
  font-family:var(--font-mono);font-weight:700;font-size:.82rem;color:#fff;
  width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--sky),var(--sky2));
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
  box-shadow:0 6px 16px -2px rgba(0,82,204,.4);
}

/* ============ FAQ ============ */
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-item{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);transition:border-color .2s,box-shadow .2s}
.faq-item.open{border-color:rgba(0,82,204,.22);box-shadow:var(--shadow-sm)}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:19px 20px;cursor:pointer;font-weight:700;color:var(--sky3);gap:16px;font-size:.98rem}
.faq-arr{
  font-family:var(--font-mono);color:var(--sky2);flex-shrink:0;transition:transform .25s var(--ease),background .2s,color .2s;
  width:26px;height:26px;border-radius:8px;background:rgba(0,82,204,.08);display:flex;align-items:center;justify-content:center;font-size:.9rem;
}
.faq-item.open .faq-arr{transform:rotate(45deg);background:var(--cyan);color:var(--sky3)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.faq-a p{padding:0 20px 20px;font-size:.95rem}

/* ============ TESTIMONIALS ============ */
.review-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:30px;transition:box-shadow .25s,transform .25s}
.review-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.review-card::before{
  content:'"';position:absolute;top:12px;right:22px;font-family:var(--font-display);font-size:3.4rem;
  color:rgba(0,82,204,.08);line-height:1;
}
.review-stars{color:var(--volt);letter-spacing:2px;margin-bottom:12px;font-size:.9rem}
.review-text{font-size:.94rem;font-style:italic;color:var(--ink);position:relative;z-index:1}
.review-who{margin-top:16px;display:flex;align-items:center;gap:11px}
.review-avatar{
  width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--sky),var(--sky2));color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--font-body);
  box-shadow:0 0 0 3px rgba(0,82,204,.1);
}
.review-name{font-weight:700;font-size:.88rem;color:var(--sky3)}
.review-loc{font-size:.76rem;color:var(--ink-soft)}

/* ============ CTA BAND ============ */
.cta-band{
  background:
    radial-gradient(ellipse 600px 400px at 15% 10%, rgba(0,212,255,.18), transparent 60%),
    radial-gradient(ellipse 500px 400px at 100% 100%, rgba(124,92,255,.14), transparent 60%),
    linear-gradient(150deg,var(--sky4),var(--sky3) 55%,var(--sky2));
  color:#fff;
  border-radius:var(--r-lg);padding:64px 40px;text-align:center;position:relative;overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.cta-band::before{
  content:'';position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:700px;height:700px;
  background:radial-gradient(circle,rgba(0,212,255,.16),transparent 65%);pointer-events:none;
}
.cta-band h2{color:#fff;position:relative}
.cta-band p{color:rgba(255,255,255,.8);max-width:520px;margin:14px auto 30px;position:relative}
.cta-band .btns{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;position:relative}

/* ============ TABLE (pricing/plans) ============ */
.table-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
table{width:100%;border-collapse:collapse;background:var(--panel);font-size:.9rem}
th,td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--line)}
th{font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--sky2);background:rgba(0,82,204,.045)}
tr:last-child td{border-bottom:none}
tbody tr{transition:background .15s}
tbody tr:hover{background:rgba(0,82,204,.02)}

/* ============ BREADCRUMB ============ */
.breadcrumb{font-size:.82rem;color:var(--ink-soft);display:flex;gap:6px;align-items:center;margin-bottom:20px;font-family:var(--font-mono)}
.breadcrumb a{color:var(--sky2);font-weight:600;transition:color .15s}
.breadcrumb a:hover{color:var(--sky)}

/* ============ FOOTER ============ */
.site-footer{
  background:
    radial-gradient(ellipse 700px 300px at 90% 0%, rgba(0,212,255,.08), transparent 60%),
    linear-gradient(180deg,var(--sky3),var(--sky4));
  color:rgba(255,255,255,.78);
  padding:72px 0 28px;position:relative;overflow:hidden;
}
.site-footer::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:44px 44px;pointer-events:none;
}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:44px;position:relative}
@media (max-width:920px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.footer-grid{grid-template-columns:1fr}}
.footer-grid h4{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:.09em;margin-bottom:18px;font-family:var(--font-mono)}
.footer-grid a{display:block;padding:6px 0;font-size:.9rem;color:rgba(255,255,255,.72);transition:color .18s,transform .18s}
.footer-grid a:hover{color:var(--cyan);transform:translateX(3px)}
.footer-brand p{color:rgba(255,255,255,.65);font-size:.9rem;margin:16px 0 18px;max-width:320px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:48px;padding-top:26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.8rem;color:rgba(255,255,255,.5);position:relative}
.footer-region-tags a{border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.68)}
.footer-region-tags a:hover{border-color:var(--cyan);color:var(--cyan);background:rgba(0,212,255,.06)}

/* ============ STICKY CTA + POPUP ============ */
.sticky-cta{
  position:fixed;bottom:0;left:0;right:0;z-index:800;background:var(--sky3);color:#fff;
  display:flex;align-items:center;justify-content:space-between;padding:13px 18px;gap:12px;
  box-shadow:0 -10px 34px rgba(0,0,0,.22);
}
.sticky-cta-text{font-weight:700;font-size:.86rem}
.sticky-cta-text span{display:block;font-weight:500;font-size:.72rem;color:rgba(255,255,255,.7)}
.sticky-cta-btn{background:linear-gradient(135deg,#25D366,#1DA851);color:#fff;font-weight:700;padding:11px 20px;border-radius:10px;font-size:.86rem;white-space:nowrap;box-shadow:0 6px 18px -2px rgba(37,211,102,.45);display:flex;align-items:center;gap:7px;border:none;cursor:pointer;font-family:inherit}
.sticky-cta-close{color:rgba(255,255,255,.6);font-size:1.1rem;padding:14px;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
@media(min-width:860px){.sticky-cta{display:none}}

.lc-overlay{position:fixed;inset:0;background:rgba(2,10,24,.66);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:1500;opacity:0;visibility:hidden;transition:.25s}
.lc-overlay.active{opacity:1;visibility:visible}
.lc-box{background:linear-gradient(160deg,var(--sky3),var(--sky4));border-radius:var(--r-lg);padding:38px;max-width:400px;width:92%;max-height:88vh;overflow-y:auto;position:relative;box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.08)}
.lc-close{position:absolute;top:16px;right:16px;color:rgba(255,255,255,.6);font-size:1.2rem}
.lc-badge{display:inline-block;background:rgba(0,212,255,.14);color:var(--cyan);font-size:.76rem;font-weight:700;padding:6px 13px;border-radius:20px;margin-bottom:16px}
.lc-title{color:#fff;font-family:var(--font-display);font-size:1.42rem;font-weight:700;margin-bottom:9px}
.lc-sub{color:rgba(255,255,255,.72);font-size:.88rem;margin-bottom:22px}
.lc-input{width:100%;padding:13px 15px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#fff;margin-bottom:12px;font-size:1rem;transition:border-color .2s}
.lc-input:focus{border-color:var(--cyan)}
.lc-input::placeholder{color:var(--ink-soft);opacity:.75}
.lc-box .lc-input::placeholder{color:rgba(255,255,255,.55);opacity:1}
.lc-submit{width:100%;background:linear-gradient(135deg,var(--cyan2),var(--sky) 55%,var(--sky2));color:#fff;font-weight:700;padding:15px;border-radius:10px;margin-top:4px;box-shadow:0 10px 28px -4px rgba(0,82,204,.45);display:flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;font-family:inherit;font-size:1rem;transition:opacity .2s}
.lc-submit:disabled{opacity:.65;cursor:wait}
.lc-whatsapp-alt{
  width:100%;background:none;border:1.5px solid rgba(37,211,102,.4);color:#25D366;font-weight:600;
  padding:12px;border-radius:10px;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;font-family:inherit;font-size:.86rem;transition:background .2s,border-color .2s;
}
.lc-whatsapp-alt:hover{background:rgba(37,211,102,.08);border-color:#25D366}
.lc-note{font-size:.72rem;color:rgba(255,255,255,.5);margin-top:14px;text-align:center}
.lc-error{font-size:.82rem;color:#ffd166;background:rgba(255,209,102,.12);border:1px solid rgba(255,209,102,.3);border-radius:8px;padding:10px 14px;margin-bottom:12px;text-align:center}
.lc-success{text-align:center;color:#fff}
.lc-ico{font-size:2.4rem;margin-bottom:10px}

/* ============ WHATSAPP FLOAT ============ */
.wa-float{
  position:fixed;bottom:96px;right:20px;z-index:790;width:58px;height:58px;border-radius:50%;
  background:linear-gradient(135deg,#25D366,#1DA851);display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 32px -4px rgba(37,211,102,.55);color:#fff;transition:transform .25s var(--ease);
  border:none;cursor:pointer;
}
.wa-float:hover{transform:scale(1.08)}
@media(min-width:860px){.wa-float{bottom:28px}}

/* ============ UTILITIES ============ */
.center-col{max-width:720px;margin:0 auto;text-align:center}
.mt-lg{margin-top:48px}
.badge-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.mini-badge{font-family:var(--font-mono);font-size:.72rem;font-weight:600;padding:7px 13px;border-radius:8px;background:rgba(0,82,204,.07);color:var(--sky2);border:1px solid rgba(0,82,204,.1)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media(max-width:860px){.two-col{grid-template-columns:1fr}}
.divider{height:1px;background:var(--line);margin:0}
.tag-pill{display:inline-block;font-size:.72rem;font-weight:700;padding:6px 14px;border-radius:20px;margin-bottom:16px;letter-spacing:.02em}
.tag-pill.security{background:rgba(124,92,255,.12);color:var(--guard)}
.tag-pill.solar{background:rgba(255,204,0,.14);color:#8a6d00}
.tag-pill.land{background:rgba(47,143,78,.13);color:var(--land)}
.tag-pill.net{background:rgba(0,82,204,.1);color:var(--sky2)}

/* ============ SCROLL REVEAL ============ */
.reveal{will-change:opacity,transform}

/* ============ DARK MODE ============ */
[data-theme="dark"]{
  --paper:#0a1220;
  --panel:#101c30;
  --ink:#eef3fb;
  --ink-soft:#a9b8cf;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.16);
}
[data-theme="dark"] body::before{opacity:.05;mix-blend-mode:overlay}
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,[data-theme="dark"] h4{color:#f4f8ff}
[data-theme="dark"] .site-header{background:rgba(10,18,32,.82);border-bottom-color:var(--line)}
[data-theme="dark"] .blueprint{background-image:linear-gradient(rgba(0,180,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(0,180,255,.055) 1px,transparent 1px)}
[data-theme="dark"] .card,[data-theme="dark"] .step,[data-theme="dark"] .review-card,[data-theme="dark"] .faq-item{background:var(--panel);border-color:var(--line)}
[data-theme="dark"] .drop-panel{background:var(--panel);border-color:var(--line)}
[data-theme="dark"] .drop-panel::before{background:var(--panel);border-color:var(--line)}
[data-theme="dark"] th{background:rgba(0,180,255,.06)}
[data-theme="dark"] table{background:var(--panel)}
[data-theme="dark"] .lc-input{color:#fff}
[data-theme="dark"] .brand,[data-theme="dark"] .brand *{color:#f4f8ff}

.theme-toggle{
  width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--line-strong);font-size:1rem;transition:border-color .2s,transform .2s;
}
.theme-toggle:hover{border-color:var(--sky2);transform:translateY(-1px)}
.theme-toggle-mobile{color:var(--sky3)}

/* Language switcher — a fully custom select; the real Google Translate
   widget stays hidden in #google_translate_element and is driven
   programmatically (see js/main.js) so nothing of Google's own UI
   ever renders or overlaps the nav. */
.lang-switch-wrap{display:inline-flex;position:relative;align-items:center}
.lang-switch-wrap .lang-switch-icon{position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:.8rem;pointer-events:none;line-height:1}
.lang-switch{
  font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.02em;
  border:1.5px solid rgba(0,82,204,.35);border-radius:8px;padding:6px 20px 6px 26px;
  background:rgba(0,82,204,.06);color:var(--sky2);cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23003b99' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;
  transition:border-color .2s,background-color .2s;max-width:64px;
}
.lang-switch:hover{border-color:var(--sky2);background:rgba(0,82,204,.12)}
[data-theme="dark"] .lang-switch{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2300d4ff' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.goog-te-banner-frame{display:none!important}
body{top:0!important}
.skiptranslate{display:none!important}
.lang-switch-mobile{
  font-family:var(--font-mono);font-size:.86rem;font-weight:600;color:var(--sky3);
  border:1.5px solid var(--line-strong);border-radius:10px;background:var(--panel);
}

/* ============ CHATBOT WIDGET ("AerixBot") ============ */
.bot-teaser{
  position:fixed;bottom:224px;left:20px;z-index:790;max-width:260px;
  background:var(--panel);border:1px solid var(--line);border-radius:16px 16px 16px 4px;
  box-shadow:var(--shadow-lg);padding:14px 30px 14px 16px;
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.96);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
  cursor:pointer;
}
.bot-teaser.show{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.bot-teaser p{font-size:.86rem;color:var(--ink);line-height:1.5;margin:0}
.bot-teaser-close{
  position:absolute;top:2px;right:2px;color:var(--ink-soft);opacity:.6;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border:none;background:none;cursor:pointer;
}
.bot-teaser-close:hover{opacity:1}
@media(min-width:860px){.bot-teaser{bottom:162px}}
@media(max-width:400px){.bot-teaser{left:16px;max-width:220px}}

.bot-launcher{
  position:fixed;bottom:158px;left:20px;z-index:791;width:58px;height:58px;border-radius:50%;
  background:linear-gradient(135deg,var(--sky),var(--cyan));display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 32px -4px rgba(0,82,204,.5);font-size:1.5rem;cursor:pointer;transition:transform .25s var(--ease);
}
.bot-launcher:hover{transform:scale(1.08)}
.bot-launcher-badge{
  position:absolute;top:-4px;right:-4px;background:var(--amp);color:#fff;font-size:.68rem;font-weight:700;
  width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--paper);
}
@media(min-width:860px){.bot-launcher{bottom:96px}}
@media(max-width:400px){.bot-launcher{left:16px;width:52px;height:52px}}

.bot-panel{
  position:fixed;bottom:150px;left:20px;z-index:1400;width:380px;max-width:calc(100vw - 32px);
  height:min(560px,70vh);background:var(--panel);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  border:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.97);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
}
.bot-panel.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
@media(min-width:860px){.bot-panel{bottom:166px}}
@media(max-width:480px){.bot-panel{right:16px;left:16px;width:auto;bottom:150px;height:min(70vh,520px)}}

.bot-head{
  background:linear-gradient(135deg,var(--sky3),var(--sky2));color:#fff;padding:16px 18px;
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.bot-head-id{display:flex;align-items:center;gap:11px}
.bot-avatar{
  width:36px;height:36px;border-radius:10px;background:var(--cyan);color:var(--sky3);font-family:var(--font-mono);
  font-weight:700;font-size:.8rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.bot-head-id strong{font-family:var(--font-body);font-weight:700;font-size:.98rem;display:block}
.bot-status{display:flex;align-items:center;gap:6px;font-size:.72rem;color:rgba(255,255,255,.72)}
.bot-status i{width:6px;height:6px;border-radius:50%;background:var(--live);display:inline-block;box-shadow:0 0 0 3px rgba(0,200,150,.2)}
.bot-close{color:rgba(255,255,255,.7);font-size:1.1rem;padding:4px;flex-shrink:0}
.bot-close:hover{color:#fff}

.bot-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--paper)}
.bot-msg{max-width:84%;padding:11px 14px;border-radius:14px;font-size:.89rem;line-height:1.5;animation:bot-in .25s var(--ease)}
@keyframes bot-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.bot-msg.bot{background:var(--panel);border:1px solid var(--line);color:var(--ink);align-self:flex-start;border-bottom-left-radius:4px}
.bot-msg.user{background:linear-gradient(135deg,var(--sky),var(--sky2));color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.bot-msg a{color:var(--cyan);font-weight:700;text-decoration:underline}
.bot-msg.bot a{color:var(--sky2)}
[data-theme="dark"] .bot-msg.bot a{color:var(--cyan)}
.bot-msg ul{margin-top:6px;padding-left:18px;list-style:disc}
.bot-typing{display:flex;gap:4px;padding:12px 14px;align-self:flex-start}
.bot-typing span{width:6px;height:6px;border-radius:50%;background:var(--sky2);animation:bot-bounce 1.1s ease-in-out infinite}
.bot-typing span:nth-child(2){animation-delay:.15s}
.bot-typing span:nth-child(3){animation-delay:.3s}
@keyframes bot-bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}

.bot-quick{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 12px;flex-shrink:0}
.bot-quick button{
  font-size:.79rem;font-weight:600;padding:8px 13px;border-radius:20px;border:1.5px solid var(--line-strong);
  color:var(--sky2);background:var(--panel);transition:all .18s var(--ease);white-space:nowrap;
}
.bot-quick button:hover{border-color:var(--sky2);background:rgba(0,82,204,.06);transform:translateY(-1px)}
@media(max-width:480px){.bot-quick button{white-space:normal;text-align:left}}

.bot-input-row{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line);flex-shrink:0;background:var(--panel)}
.bot-input-row input{
  flex:1;padding:11px 14px;border-radius:20px;border:1.5px solid var(--line-strong);background:var(--paper);
  color:var(--ink);font-size:.88rem;
}
.bot-input-row input::placeholder{color:var(--ink-soft);opacity:.75}
.bot-input-row input:focus{border-color:var(--sky2)}
.bot-input-row button{
  width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--sky),var(--sky2));color:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 14px -2px rgba(0,82,204,.4);
}
.bot-disclaimer{font-size:.68rem;color:var(--ink-soft);text-align:center;padding:0 16px 12px;flex-shrink:0}

/* Solar estimator widget */
.estimator{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;box-shadow:var(--shadow)}
.estimator-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}
@media(max-width:600px){.estimator-grid{grid-template-columns:1fr}}
.estimator-item{
  display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px solid var(--line-strong);border-radius:12px;
  cursor:pointer;transition:all .18s var(--ease);
}
.estimator-item:hover{border-color:var(--sky2)}
.estimator-item.checked{border-color:var(--sky);background:rgba(0,82,204,.05)}
.estimator-item input{width:18px;height:18px;accent-color:var(--sky)}
.estimator-item label{flex:1;font-size:.9rem;font-weight:600;color:var(--sky3);cursor:pointer}
.estimator-item span{font-size:.76rem;color:var(--ink-soft);font-family:var(--font-mono)}
.estimator-result{
  margin-top:20px;padding:24px;border-radius:var(--r);background:linear-gradient(135deg,var(--sky3),var(--sky2));color:#fff;
  text-align:center;
}
.estimator-result .er-num{font-family:var(--font-display);font-size:2.2rem;font-weight:700;color:var(--cyan)}
.estimator-result .er-label{font-size:.82rem;color:rgba(255,255,255,.75);margin-top:4px}
.estimator-hours{display:flex;align-items:center;gap:14px;margin-top:16px}
.estimator-hours input[type=range]{flex:1;accent-color:var(--sky)}

/* ---------------------------------------------------------------------
   Cookie consent banner + settings modal
--------------------------------------------------------------------- */
.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:2000;background:var(--panel);
  border-top:1px solid var(--line-strong);box-shadow:0 -8px 32px -8px rgba(0,0,0,.18);
  padding:18px 24px;
}
.cookie-banner-inner{
  max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:28px;flex-wrap:wrap;
}
.cookie-banner-text{flex:1;min-width:260px}
.cookie-banner-text strong{font-size:.98rem;color:var(--ink)}
.cookie-banner-text p{font-size:.83rem;color:var(--ink-soft);margin-top:6px;line-height:1.55}
.cookie-banner-text a{color:var(--sky2);text-decoration:underline}
.cookie-banner-actions{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0}
@media(max-width:600px){
  .cookie-banner{padding:16px}
  .cookie-banner-actions{width:100%}
  .cookie-banner-actions .btn{flex:1}
}

.cookie-settings-overlay{
  position:fixed;inset:0;z-index:2100;background:rgba(0,10,30,.55);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.cookie-settings-modal{
  background:var(--panel);border-radius:var(--r-lg);padding:32px;max-width:480px;width:100%;
  max-height:85vh;overflow-y:auto;box-shadow:var(--shadow-lg);
}
.cookie-settings-modal h3{font-size:1.15rem}
.cookie-settings-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 0;border-top:1px solid var(--line);
}
.cookie-settings-row strong{font-size:.9rem}
.cookie-settings-row p{font-size:.78rem;color:var(--ink-soft);margin-top:4px}
.cookie-toggle-locked{
  font-size:.72rem;font-weight:700;color:var(--ink-soft);background:var(--line);
  padding:5px 10px;border-radius:20px;flex-shrink:0;
}
.cookie-toggle-switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0}
.cookie-toggle-switch input{opacity:0;width:0;height:0}
.cookie-toggle-switch span{
  position:absolute;inset:0;background:var(--line-strong);border-radius:24px;
  transition:background .2s var(--ease);cursor:pointer;
}
.cookie-toggle-switch span::before{
  content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;
  background:#fff;border-radius:50%;transition:transform .2s var(--ease);
}
.cookie-toggle-switch input:checked + span{background:var(--sky)}
.cookie-toggle-switch input:checked + span::before{transform:translateX(18px)}
.cookie-settings-actions{
  display:flex;gap:10px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line);
}
.cookie-settings-actions .btn{flex:1}
[data-theme="dark"] .cookie-banner-text p{color:rgba(255,255,255,.65)}
[data-theme="dark"] .cookie-settings-row p{color:rgba(255,255,255,.6)}