/* ============ ArkGo Solutions — custom styles ============ */

:root{
  --ink:#0f2438;
  --ink-soft:#5b6b7a;
  --mist-line:#e2e9ee;
}

.text-ink{ color:var(--ink); }
.text-ink-soft{ color:var(--ink-soft); }
.border-mist-line{ border-color:var(--mist-line); }
.divide-mist-line > * + *{ border-color:var(--mist-line); }

.measure{ max-width:52ch; }

html{ scroll-behavior:smooth; }

/* ---- preloader ---- */
#preloader{
  position:fixed; inset:0; z-index:9999;
  background:#0b1f3a;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s ease, visibility .5s ease;
}
#preloader.hide{ opacity:0; visibility:hidden; }
#preloader .spin{
  width:44px; height:44px; border-radius:50%;
  border:3px solid rgba(245,166,35,.25);
  border-top-color:#f5a623;
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---- header scroll state ---- */
#siteHeader{ transition:background .3s ease, box-shadow .3s ease, height .3s ease; }
#siteHeader.scrolled{
  box-shadow:0 8px 24px -8px rgba(7,21,39,.45);
  background:rgba(11,31,58,.98);
}

/* ---- burger icon animation ---- */
.burger span{ transition:transform .3s ease, opacity .3s ease; }
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---- mobile sidebar ---- */
#mobileSidebar{ transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1); }
#mobileSidebar.open{ transform:translateX(0); }
#sidebarOverlay{ opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; }
#sidebarOverlay.open{ opacity:1; visibility:visible; }

/* ---- decorative backgrounds ---- */
.sun-glow{
  background-image:radial-gradient(circle at 85% 15%, rgba(245,166,35,.25), transparent 55%);
}
.panel-grid{
  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:38px 38px;
}
.panel-grid-dense{
  background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:22px 22px;
}
.sun-rays{ animation:spin-slow 40s linear infinite; transform-origin:center; }
@keyframes spin-slow{ to{ transform:rotate(360deg); } }

/* ---- range sliders ---- */
.solar-range{
  -webkit-appearance:none; appearance:none;
  height:6px; border-radius:999px;
  background:linear-gradient(90deg,#f5a623,#ef6c1d);
  outline:none; cursor:pointer;
}
.solar-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:20px; height:20px; border-radius:50%;
  background:#fff; border:4px solid #ef6c1d;
  box-shadow:0 2px 8px rgba(239,108,29,.4);
  cursor:pointer;
}
.solar-range::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%;
  background:#fff; border:4px solid #ef6c1d;
  box-shadow:0 2px 8px rgba(239,108,29,.4);
  cursor:pointer; border-width:4px;
}

/* ---- FAQ accordion ---- */
.faq-answer{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-item[data-open="true"] .faq-chevron{ transform:rotate(180deg); }
.faq-chevron{ transition:transform .3s ease; }

/* ---- gallery lightbox ---- */
#lightbox{
  position:fixed; inset:0; z-index:100;
  background:rgba(7,21,39,.92);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
  padding:24px;
}
#lightbox.open{ opacity:1; visibility:visible; }
#lightbox img{ max-width:90vw; max-height:85vh; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
#lightboxClose{
  position:absolute; top:20px; right:24px;
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.1); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; cursor:pointer; transition:background .2s ease;
}
#lightboxClose:hover{ background:rgba(255,255,255,.2); }

/* ---- floating action buttons ---- */
.fab{
  position:fixed; right:20px; z-index:40;
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  transition:transform .25s ease, opacity .25s ease, visibility .25s ease;
}
.fab:hover{ transform:translateY(-3px) scale(1.05); }
#whatsappFab{ bottom:88px; background:#25d366; }
#scrollTopFab{
  bottom:20px; background:#0b1f3a; opacity:0; visibility:hidden;
}
#scrollTopFab.show{ opacity:1; visibility:visible; }

/* ---- mobile sticky CTA bar ---- */
#mobileCta{
  position:fixed; bottom:0; inset-inline:0; z-index:30;
  background:rgba(11,31,58,.97); backdrop-filter:blur(8px);
  border-top:1px solid rgba(255,255,255,.1);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
}

/* ---- toast ---- */
#toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:#0b1f3a; color:#fff; padding:14px 22px; border-radius:12px;
  font-size:14px; font-weight:500; box-shadow:0 12px 30px rgba(0,0,0,.3);
  opacity:0; visibility:hidden; transition:all .35s ease; z-index:200;
  display:flex; align-items:center; gap:8px;
}
#toast.show{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

/* ---- testimonial / card hover lift ---- */
.hover-lift{ transition:transform .3s ease, box-shadow .3s ease; }
.hover-lift:hover{ transform:translateY(-4px); box-shadow:0 16px 32px -12px rgba(11,31,58,.15); }