:root{
  --navy:#0b1f3b;
  --green:#17a26b;
  --gold:#d4af37;
  --bg:#f7f8fb;
  --card:#ffffff;
  --muted:#6c757d;
  --border:rgba(0,0,0,.08);
  --shadow:0 18px 40px rgba(11,31,59,.12);
}

[data-theme="dark"]{
  --bg:#071221;
  --card:#0b1f3b;
  --muted:#b8c0cc;
  --border:rgba(255,255,255,.10);
  --shadow:0 18px 40px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Vazirmatn", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background:var(--bg);
  color: #101828;
}
[data-theme="dark"] body, body[data-theme="dark"]{color:#e7ecf2}

.bg-app{background: radial-gradient(1200px 600px at 80% -10%, rgba(23,162,107,.18), transparent 60%),
                   radial-gradient(1000px 500px at 10% 0%, rgba(212,175,55,.15), transparent 55%),
                   var(--bg);}

.glass-nav{
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  border-bottom:1px solid var(--border);
}

.navbar-brand{color:var(--navy)}
[data-theme="dark"] .navbar-brand{color:#fff}
.brand-dot{display:inline-block;width:10px;height:10px;border-radius:999px;background:var(--green);margin-left:8px;box-shadow:0 0 0 6px rgba(23,162,107,.15)}

.nav-link{font-weight:600;color: color-mix(in srgb, #111 70%, var(--muted));}
[data-theme="dark"] .nav-link{color: #d8dee8}
.nav-link.active{color:var(--green)}

.hero{
  padding: 64px 0 24px;
}
.hero-card{
  background: linear-gradient(135deg, color-mix(in srgb, var(--card) 86%, transparent), color-mix(in srgb, var(--card) 92%, transparent));
  border:1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.hero-kicker{color:var(--green);font-weight:800;letter-spacing:.2px}
.badge-soft{background:rgba(23,162,107,.12);color:var(--green);border:1px solid rgba(23,162,107,.25)}

.stat{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow:0 10px 24px rgba(11,31,59,.08);
  height:100%;
}
.stat .value{font-size:1.25rem;font-weight:900}
.stat .label{color:var(--muted);font-size:.9rem}

.section-title{font-weight:900}
.section-sub{color:var(--muted)}

.cardx{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 10px 24px rgba(11,31,59,.06);
}

.icon-bubble{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:rgba(212,175,55,.12);border:1px solid rgba(212,175,55,.25);color:var(--gold)}

.btn-energy{background:var(--green);border-color:var(--green);color:#fff}
.btn-energy:hover{filter:brightness(.95);color:#fff}
.btn-gold{background:var(--gold);border-color:var(--gold);color:#111}
.btn-gold:hover{filter:brightness(.98);color:#111}

.timeline{position:relative;padding-right:18px}
.timeline:before{content:"";position:absolute;right:6px;top:4px;bottom:4px;width:2px;background:rgba(23,162,107,.35)}
.timeline .t-item{position:relative;padding:10px 18px 10px 0}
.timeline .t-item:before{content:"";position:absolute;right:0;top:16px;width:14px;height:14px;border-radius:999px;background:var(--green);box-shadow:0 0 0 5px rgba(23,162,107,.15)}

.back-to-top{position:fixed;left:18px;bottom:18px;width:44px;height:44px;border-radius:14px;border:1px solid var(--border);
  background:var(--card);display:none;place-items:center;box-shadow:var(--shadow)}
.back-to-top.show{display:grid}

.skip-link{position:absolute;top:-60px;right:10px;background:var(--navy);color:#fff;padding:10px 12px;border-radius:10px;z-index:9999}
.skip-link:focus{top:10px}

.table thead th{white-space:nowrap}

.figure-cover{aspect-ratio: 16/9; background:linear-gradient(135deg, rgba(11,31,59,.92), rgba(23,162,107,.55));
  border-radius:18px; position:relative; overflow:hidden;}
.figure-cover:after{content:""; position:absolute; inset:0; background-image:url('assets/images/hero-solar.jpg'); background-size:cover; background-position:center; opacity:.22;}
.figure-cover .caption{position:absolute; inset:auto 18px 18px 18px; color:#fff}

.gallery-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.gallery-grid a{grid-column: span 4; border-radius:16px; overflow:hidden; border:1px solid var(--border); background:var(--card)}
.gallery-grid img{width:100%; height:210px; object-fit:cover; display:block}
@media (max-width:992px){.gallery-grid a{grid-column:span 6}}
@media (max-width:576px){.gallery-grid a{grid-column:span 12}.hero{padding-top:28px}}