:root{
  --solar:#ffb300;
  --solar2:#ff7a00;
  --ink:#0b1220;



/* Theme tokens (default: dark) */
:root{
  --nav-bg:#0f172a;
  --nav-text:rgba(255,255,255,.95);
  --nav-muted:rgba(255,255,255,.75);
  --nav-border:rgba(255,255,255,.10);
  --menu-shadow:0 18px 40px rgba(0,0,0,.35);
  --hamburger-bar:rgba(255,255,255,.95);
}

/* Light theme overrides (system) */
@media (prefers-color-scheme: light){
:root{
  --nav-bg:#ffffff;
  --nav-text:rgba(11,18,32,.95);
  --nav-muted:rgba(11,18,32,.75);
  --nav-border:rgba(11,18,32,.10);
  --menu-shadow:0 18px 40px rgba(11,18,32,.12);
  --hamburger-bar:rgba(11,18,32,.85);
}
}

/* Light theme overrides (JS data-theme) */
[data-theme="light"]{
  --nav-bg:#ffffff;
  --nav-text:rgba(11,18,32,.95);
  --nav-muted:rgba(11,18,32,.75);
  --nav-border:rgba(11,18,32,.10);
  --menu-shadow:0 18px 40px rgba(11,18,32,.12);
  --hamburger-bar:rgba(11,18,32,.85);
}
  /* Theme tokens (default: dark) */
  --nav-bg:#0f172a;
  --nav-text:rgba(255,255,255,.95);
  --nav-muted:rgba(255,255,255,.75);
  --nav-border:rgba(255,255,255,.10);
  --menu-shadow:0 18px 40px rgba(0,0,0,.35);
  --hamburger-bar:rgba(255,255,255,.95);
}

/* Auto light mode (system) */
@media (prefers-color-scheme: light){
  :root{
    --nav-bg:#ffffff;
    --nav-text:rgba(11,18,32,.95);
    --nav-muted:rgba(11,18,32,.75);
    --nav-border:rgba(11,18,32,.10);
    --menu-shadow:0 18px 40px rgba(11,18,32,.12);
    --hamburger-bar:rgba(11,18,32,.85);
  }
}

/* JS-driven theme override (wins over system) */
html[data-theme="dark"]{
  --nav-bg:#0f172a;
  --nav-text:rgba(255,255,255,.95);
  --nav-muted:rgba(255,255,255,.75);
  --nav-border:rgba(255,255,255,.10);
  --menu-shadow:0 18px 40px rgba(0,0,0,.35);
  --hamburger-bar:rgba(255,255,255,.95);
}
html[data-theme="light"]{
  --nav-bg:#ffffff;
  --nav-text:rgba(11,18,32,.95);
  --nav-muted:rgba(11,18,32,.75);
  --nav-border:rgba(11,18,32,.10);
  --menu-shadow:0 18px 40px rgba(11,18,32,.12);
  --hamburger-bar:rgba(11,18,32,.85);
}
*{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
.brand-mark{color:var(--solar); margin-right:.35rem;}
.brand-logo{height:28px; width:auto; margin-right:.5rem; vertical-align:middle;}
.navbar-brand{display:flex; align-items:center;}

/* Custom hamburger (3 bars) so it doesn't rely on Bootstrap's SVG background */
.custom-toggler{border-color: var(--nav-border);}
.custom-toggler:focus{box-shadow: 0 0 0 .2rem rgba(255,179,0,.25);}
.custom-toggler .hamburger{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:24px;
  height:18px;
}
.custom-toggler .hamburger .bar{
  display:block;
  height:2px;
  width:100%;
  background: var(--hamburger-bar);
  border-radius:2px;
}

.btn-solar{
  background: linear-gradient(135deg,var(--solar),var(--solar2));
  border:0;
  color:#111;
  font-weight:700;
}
.btn-solar:hover{filter:brightness(.95); color:#111;}

/* Outline button that matches the brand gradient */
.btn-solar-outline{
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,179,0,.75);
  font-weight: 700;
}
.btn-solar-outline:hover{
  background: linear-gradient(135deg,var(--solar),var(--solar2));
  border-color: transparent;
  color:#111;
}

.hero{
  background-image:
    linear-gradient(rgba(11,18,32,.60), rgba(9,15,27,.70)),
    radial-gradient(1200px 500px at 20% 20%, rgba(255,179,0,.20), transparent 60%),
    radial-gradient(1000px 500px at 80% 0%, rgba(255,122,0,.16), transparent 60%),
    url("../../image/hero-solar.jpg");
  background-size: auto, auto, auto, cover;
  background-position: center, 20% 20%, 80% 0%, center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  color:#fff;
}

.hero-card{
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}
.icon-pill{
  width:44px;height:44px;border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center;
  background: rgba(255,179,0,.12);
  border:1px solid rgba(255,179,0,.25);
  color:var(--solar);
  font-weight:800;
}
.kpi{border-left:3px solid var(--solar); padding-left:12px;}
.card-hover{transition:transform .15s ease, box-shadow .15s ease;}
.card-hover:hover{transform:translateY(-2px); box-shadow:0 10px 25px rgba(0,0,0,.08);}
.badge-soft{background:rgba(255,179,0,.15); color:#5a3a00; border:1px solid rgba(255,179,0,.25);}
.form-hint{font-size:.9rem;color:#6c757d;}

.imgicon img{
	width: 60%;
	height: auto;
	object-fit: contain;
	
}

.row.align-items-center.g-4 .col-lg-6 .badge.badge-soft.rounded-pill.px-3.py-2.mb-3 {
	color: white;
}

/* === Navbar (theme-matched) === */
.site-nav{
  min-height:72px;
  display:flex;
  align-items:center;
  background: var(--nav-bg) !important;
  border-bottom: 1px solid var(--nav-border);
}

.site-nav .navbar-brand,
.site-nav .navbar-brand:hover{
  color: var(--nav-text);
}
.site-nav .nav-link{
  color: var(--nav-muted);
}
.site-nav .nav-link:hover,
.site-nav .nav-link:focus{
  color: var(--nav-text);
}
.site-nav .nav-link.active{
  color: var(--solar);
}

/* Brand logo sizing */
.site-nav .brand-logo{ height:44px; }

/* Mobile menu background + smooth slide-down */
@media (max-width: 991.98px){
  .site-nav{ min-height:60px; }
  .site-nav .brand-logo{ height:36px; }

  .site-nav .navbar-collapse{
    background: var(--nav-bg);
    border-top: 1px solid var(--nav-border);
    box-shadow: var(--menu-shadow);
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    padding: 10px 12px;

    /* animation */
    opacity: 0;
    transform: translateY(-10px);
    transition: transform .25s ease, opacity .25s ease;
  }

  .site-nav .navbar-collapse.show{
    opacity: 1;
    transform: translateY(0);
  }

  /* When Bootstrap is animating height (collapsing), keep the fade/slide consistent */
  .site-nav .navbar-collapse.collapsing{
    opacity: 0;
    transform: translateY(-10px);
  }
}
/* Pipeline cards (index.php) */
.pipeline-card{ border:0; border-radius:1rem; }
.pipeline-card .card-body{ padding:1.5rem; }
.pipeline-num{
  width:44px; height:44px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
  background: rgba(255,179,0,.15);
  color: var(--ink);
  margin-bottom: .75rem;
}


/* Calculator page */
.calc-hero{
  background:
    radial-gradient(1200px 600px at 18% 10%, rgba(255,179,0,.20), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(255,122,0,.18), transparent 55%),
    linear-gradient(180deg, var(--ink), #050a14 70%);
  color:#fff;
}

.calc-card{
  background: rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

.calc-badge{
  display:inline-block;
  padding:.35rem .7rem;
  border-radius:999px;
  font-weight:800;
  font-size:.85rem;
  background: rgba(255,179,0,.14);
  border: 1px solid rgba(255,179,0,.35);
}

.calc-title{ margin:0 0 .35rem; font-weight:900; }
.calc-subtitle{ color:rgba(255,255,255,.75); }

.calc-divider{ border-color: rgba(255,255,255,.12); }

.calc-input{
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color:#fff;
}
.calc-input:focus{
  border-color: rgba(255,179,0,.55);
  box-shadow: 0 0 0 .2rem rgba(255,179,0,.18);
  background: rgba(255,255,255,.08);
  color:#fff;
}

.calc-section-title{ font-weight:900; margin-top: 4px; }

.calc-loads{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
@media (max-width: 768px){
  .calc-loads{ grid-template-columns: 1fr; }
}

.calc-check{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
}

.calc-results{
  margin-top: 6px;
  padding:14px;
  border-radius:14px;
  background: rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.10);
}

.calc-panel{
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:14px;
}
.calc-panel-title{ font-weight:900; margin-bottom:10px; }

.calc-kpis{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px 14px;
}
.calc-kpis span{ display:block; color:rgba(255,255,255,.70); font-size:.9rem; }
.calc-kpis strong{ font-size:1.05rem; }

.calc-note{ color:rgba(255,255,255,.70); font-size:.9rem; }