/* ══════════════════════════════════════════════════════════════
   Active Lightning Energy — site-wide layout
   Nav / hero / mission / technology / team / footer below are the
   exact styles from index.html, shared by every page so header and
   footer always match the home page. Everything after the "Inner
   page content" divider styles the pages that aren't the home page.
   ══════════════════════════════════════════════════════════════ */

/* ── Token System ─────────────────────────────────────── */
:root {
  --bg:           #FFFFFF;
  --bg-surface:   #E7E5E2;
  --bg-card:      #F3F2F0;
  --border:       #D0CCC7;
  --border-light: #B8B1AA;
  --accent:       #75140D;
  --accent2:      #C65318;
  --text:         #2B2927;
  --text-muted:   #665F59;
  --text-faint:   #938A83;
  --glow:         rgba(117,20,13,0.07);
}

/* ── Reset ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Source Serif 4', Georgia, serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.72;
  font-size: 1.05rem;
  overflow-x: hidden;
}

img { max-width: 100%; }

/* ── Nav (same on every page) ─────────────────────────── */
nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  padding: 1.25rem 3rem 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.nav-logo-img {
  display: block;
  height: 70px;
  width: auto;
}

/* Text stand-in for the logo, shown only on narrow screens (see the
   600px media query below) where the full image doesn't fit well. */
.nav-logo-text {
  display: none;
  font-family: 'Exo 2', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  padding: 0;
  background: none;
  border: 1px solid var(--border-light);
  border-radius: 3px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  margin: 0 7px;
  background: var(--accent);
  transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-links {
  display: flex;
  gap: 2.75rem;
  list-style: none;
}

.nav-links a {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.18s;
}
.nav-links a:hover,
.nav-links a:focus { color: var(--accent); outline: none; }

@media (max-width: 600px) {
  nav { padding: 1rem 1.5rem; }
  .nav-toggle { display: flex; }
  .nav-logo-img { display: none; }
  .nav-logo-text { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 0.5rem 0;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { display: block; padding: 0.9rem 1.5rem; font-size: 0.78rem; }
}

/* ── Hero (index.html only) ───────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 9rem 2rem 5rem;
  overflow: hidden;
}

#orbit-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 820px;
}

.eyebrow {
  display: inline-block;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.75rem;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--border-light);
  border-radius: 2px;
}

h1 {
  font-family: 'Exo 2', sans-serif;
  font-size: clamp(2.6rem, 7.5vw, 5.8rem);
  font-weight: 200;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--text);
  text-wrap: balance;
}

h1 em {
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
}

.hero-tagline {
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 300;
  font-style: italic;
  color: var(--text-muted);
  max-width: 52ch;
  margin: 1.75rem auto 0;
  line-height: 1.65;
}

.hero-scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  z-index: 2;
  opacity: 0.45;
}

.hero-scroll span {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: scrollPulse 1.8s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(1); }
  50%       { opacity: 0.8; transform: scaleY(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-line { animation: none; }
}

/* ── Shared section styles (index.html sections) ──────── */
.section-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 6rem 2.5rem;
}

.section-label {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.1rem;
}

h2 {
  font-family: 'Exo 2', sans-serif;
  font-weight: 600;
  font-size: clamp(1.65rem, 3.5vw, 2.3rem);
  letter-spacing: -0.015em;
  color: var(--text);
  text-wrap: balance;
  margin-bottom: 1.25rem;
}

.lead {
  font-size: 1.07rem;
  color: var(--text-muted);
  max-width: 66ch;
  line-height: 1.78;
}

hr.rule {
  border: none;
  border-top: 1px solid var(--border);
  max-width: 1080px;
  margin: 0 auto;
}

/* ── Mission (index.html) ─────────────────────────────── */
#mission {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
  margin-top: 3.5rem;
}

.mission-stat {
  border-left: 2px solid var(--accent);
  padding-left: 1.5rem;
}

.stat-value {
  font-family: 'Exo 2', sans-serif;
  font-weight: 700;
  font-size: 2.2rem;
  color: var(--text);
  line-height: 1;
  margin-bottom: 0.3rem;
}

.stat-label {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (max-width: 680px) {
  .mission-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ── Technology (index.html) ──────────────────────────── */
#technology .section-inner { padding-bottom: 5rem; }

.tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 3.25rem;
}

.tech-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2rem 1.75rem 2.25rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s;
}

.tech-card:hover { border-color: var(--border-light); }

.tech-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1.5px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent2) 60%, transparent 100%);
  opacity: 0.55;
}

.tech-tag {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.9rem;
}

.tech-card h3 {
  font-family: 'Exo 2', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text);
  margin-bottom: 0.65rem;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.tech-card p {
  font-size: 0.91rem;
  color: var(--text-muted);
  line-height: 1.68;
}

@media (max-width: 800px) {
  .tech-grid { grid-template-columns: 1fr; }
}

/* ── Team (index.html) ────────────────────────────────── */
#team {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
}

.team-layout {
  margin-top: 3.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.founder-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2.5rem 2.25rem;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  align-items: start;
  position: relative;
  overflow: hidden;
}

.founder-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 0% 0%, var(--glow) 0%, transparent 55%);
  pointer-events: none;
}

.person-role {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.67rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.45rem;
}

.person-name {
  font-family: 'Exo 2', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--text);
  line-height: 1.15;
  margin-bottom: 0.35rem;
}

.person-affil {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  letter-spacing: 0.04em;
}

.founder-right p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 0.85rem;
}
.founder-right p:last-child { margin-bottom: 0; }

.advisors-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.advisor-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1.85rem 1.75rem;
}

.advisor-card .person-name { font-size: 1.15rem; font-weight: 600; margin-bottom: 0; }
.advisor-card .person-affil { margin-bottom: 1rem; }
.advisor-card p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.68; }

.collab-row {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1.5rem 1.75rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.collab-label {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.67rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

.collab-names {
  font-family: 'Exo 2', sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--text-muted);
}
.collab-names strong { font-weight: 600; color: var(--text); }

@media (max-width: 720px) {
  .founder-card { grid-template-columns: 1fr; gap: 1.5rem; }
  .advisors-row { grid-template-columns: 1fr; }
}

/* ── Footer (same on every page) ──────────────────────── */
footer {
  border-top: 1px solid var(--border);
  padding: 0.5rem 2.5rem 2rem;
}

.footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.footer-brand-logo {
  display: block;
  width: min(315px, 72vw);
  height: auto;
  margin-bottom: 0.85rem;
  background: #fff;
  border-radius: 2px;
}

.footer-left p { font-size: 0.8rem; color: var(--text-faint); }

.footer-contact {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.9;
  text-align: right;
}
.footer-contact a { color: var(--accent); text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .footer-inner { flex-direction: column; }
  .footer-contact { text-align: left; }
}

/* ══════════════════════════════════════════════════════════════
   Inner page content — everything below only affects the project /
   about / news pages, not the home page.
   ══════════════════════════════════════════════════════════════ */

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

h3 { font-family: 'Exo 2', sans-serif; font-weight: 600; font-size: 1.2rem; margin-bottom: 0.5rem; color: var(--text); }

h4 {
  font-family: 'Exo 2', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 2.25rem 0 1rem;
}

h5 {
  font-family: 'Exo 2', sans-serif;
  font-weight: 300;
  font-size: 1.05rem;
  color: var(--text-muted);
  margin: 1.5rem 0 0.75rem;
}

.smgcs-page p { margin-bottom: 1rem; }
.smgcs-page p:last-child { margin-bottom: 0; }

/* A fixed nav sits on top of every page. index.html clears it with the
   hero's own top padding; every other page gets it from this class. */
.wrapper.inner-page { padding-top: 90px; }

/* ── Page banner ──────────────────────────────────────── */
.innera-page-banner {
  max-height: 320px;
  overflow: hidden;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
.innera-page-banner img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  opacity: 0.92;
}

/* ── Content sections ─────────────────────────────────── */
.smgcs-page,
.about-page,
.enerypg { padding: 3.5rem 0; }

.mt-30 { padding-top: 4.5rem; }
.mb-30 { padding-bottom: 4.5rem; }
.mt-5 { padding-top: 3.5rem; }
.mb-5 { padding-bottom: 3.5rem; }

.briliiance-power p { font-size: 1.02rem; color: var(--text-muted); max-width: 74ch; }

.smgcs-page ul { padding-left: 1.5rem; margin-bottom: 1.25rem; color: var(--text-muted); }
.smgcs-page ul li { margin-bottom: 0.5rem; }

.full-col { margin: 2rem 0; }
.full-col img { border-radius: 4px; border: 1px solid var(--border); }

.smgcs-page h2 {
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border);
}

/* Heading with flanking lines (welcome page) */
.heading-title { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.75rem; }
.heading-title h2 { display: flex; align-items: center; gap: 1.25rem; width: 100%; margin: 0; padding: 0; border: none; }
.heading-title strong {
  font-family: 'Exo 2', sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: 0.04em;
  color: var(--accent);
  white-space: nowrap;
}
.heading-title .line-1,
.heading-title .line-2 {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-light) 50%, transparent);
}

/* ── Pull-quote cards (Elon Musk / advisor quotes) ────── */
.elonmask-message-row { padding: 1rem 0 3rem; }
.elonmask-message-row .container { display: flex; justify-content: center; }

.elonmask-message {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  padding: 1.75rem 2rem;
  max-width: 640px;
  margin: 1.5rem 0;
}

.elonmask-message p {
  font-style: italic;
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 1rem;
}
.elonmask-message p::before { content: '\201C'; }
.elonmask-message p::after  { content: '\201D'; }

.elonmsk-img { display: flex; align-items: center; gap: 0.85rem; }
.elonmsk-img img {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
}
.elonmsk-img span {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--accent);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.elonmsk-img span small {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 0.82rem;
  color: var(--text-faint);
}

/* ── About page ───────────────────────────────────────── */
.boxabout-row { margin-bottom: 2.5rem; }

.profil-abot {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 1.25rem 0 1.5rem;
}
.profil-abot img {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
}
.prfl-rght h3 { font-size: 1.35rem; color: var(--text); margin-bottom: 0.2rem; }
.prfl-rght p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 0.2rem; }
.prfl-rght span { font-family: 'Roboto Mono', monospace; font-size: 0.78rem; color: var(--accent); }

.exul { margin-top: 0.75rem; }
.exul > li { margin-bottom: 1.25rem; line-height: 1.6; }
.exul strong { font-family: 'Exo 2', sans-serif; font-weight: 600; color: var(--text); }
.exul2 { margin-top: 0.4rem; color: var(--text-muted); }
.exul2 li { list-style: disc; margin-bottom: 0.35rem; font-size: 0.95rem; }

.indivisul-inventer { margin-top: 2rem; }
.table-individual { overflow-x: auto; border: 1px solid var(--border); border-radius: 4px; }
.table-individual table { width: 100%; border-collapse: collapse; min-width: 640px; }
.table-individual td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
  color: var(--text-muted);
  vertical-align: middle;
}
.table-individual tr:last-child td { border-bottom: none; }
.prfl-indivsl { display: flex; align-items: center; gap: 0.85rem; white-space: nowrap; }
.prfl-indivsl img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.prfl-indivsl h5 { margin: 0; font-family: 'Exo 2', sans-serif; font-weight: 600; font-size: 0.95rem; color: var(--text); }
.prfl-indivsl h5 span { display: block; font-family: 'Roboto Mono', monospace; font-weight: 400; font-size: 0.72rem; color: var(--text-faint); }

/* ── StarPower lists ──────────────────────────────────── */
.thisbatry-ul2 { padding-left: 1.4rem !important; margin-bottom: 1.25rem; }
.thisbatry-ul2 li { list-style: disc; color: var(--text-muted); padding-left: 0.3rem; margin-bottom: 0.5rem; }

.thisbatry-ul { list-style: none; padding-left: 0 !important; margin-top: 0.5rem; }
.thisbatry-ul li {
  position: relative;
  padding-left: 2.75rem !important;
  margin-bottom: 0.9rem;
  color: var(--text-muted);
}
.thisbatry-ul li span {
  position: absolute;
  left: 0; top: 0;
  width: 1.9rem; height: 1.9rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent2);
  color: #fff !important;
  font-family: 'Exo 2', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
}

/* ── News timeline ────────────────────────────────────── */
.newss-page ul { list-style: none; padding-left: 0; }
.newss-page ul li {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}
.newss-page ul li:last-child { border-bottom: none; }
.newss-page ul li span {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.78rem;
  color: var(--accent);
  margin-right: 0.4rem;
}

@media (max-width: 680px) {
  .profil-abot { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
  .container { padding: 0 1.5rem; }
  .innera-page-banner img { height: 200px; }
  .wrapper.inner-page { padding-top: 92px; }
  .hero {padding-top:0px;}
}