/* =====================================================================
   JUNTU EV — Design System
   Concept: Ethiopia's renewable-hydro grid meets EV charge current.
   Display: Space Grotesk / Body: Inter / Data: JetBrains Mono
   ===================================================================== */

:root {
  --bg:        #070f0c;
  --surface:   #0e1a15;
  --surface-2: #16261e;
  --line:      #223a30;
  --text:      #eaf3ee;
  --muted:     #93a79e;
  --volt:      #9be13d;   /* signature charge-current green */
  --volt-dim:  #6a9c2b;
  --emerald:   #1f9d6b;   /* deeper secondary green */
  --amber:     #e2a83f;   /* used sparingly: warnings/alerts only */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  background-image:
    radial-gradient(circle at 15% 0%, rgba(155,225,61,0.07), transparent 40%),
    radial-gradient(circle at 85% 20%, rgba(31,157,107,0.08), transparent 45%);
}

.font-display { font-family: 'Space Grotesk', 'Inter', sans-serif; }
.font-mono    { font-family: 'JetBrains Mono', monospace; }

::selection { background: var(--volt); color: #06100c; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 8px; border: 2px solid var(--bg); }

/* ---------------------------------------------------------------------
   Signature element: the "Charge Line" — animated current that marks
   section transitions, echoing Ethiopia's hydro-electric grid feeding
   the EV charge network.
--------------------------------------------------------------------- */
.charge-line {
  position: relative;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
  overflow: hidden;
}
.charge-line::after {
  content: '';
  position: absolute;
  top: 0; left: -30%;
  width: 30%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--volt), transparent);
  filter: drop-shadow(0 0 6px var(--volt));
  animation: charge-run 3.2s linear infinite;
}
@keyframes charge-run {
  0%   { left: -30%; }
  100% { left: 100%; }
}

/* Radial gauge for spec displays (range / battery / power) */
.gauge {
  --pct: 0;
  width: 96px; height: 96px;
  border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(closest-side, var(--surface) 78%, transparent 79% 100%),
    conic-gradient(var(--volt) calc(var(--pct) * 1%), var(--surface-2) 0);
}
.gauge span { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; color: var(--text); }

/* Buttons */
.btn-volt {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--volt); color: #06100c;
  font-weight: 600; padding: .75rem 1.5rem; border-radius: 999px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 0 0 rgba(155,225,61,0);
}
.btn-volt:hover { transform: translateY(-2px); box-shadow: 0 8px 30px -8px rgba(155,225,61,0.6); }

.btn-outline {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--line); color: var(--text);
  font-weight: 500; padding: .75rem 1.5rem; border-radius: 999px;
  transition: border-color .2s ease, background .2s ease;
}
.btn-outline:hover { border-color: var(--volt); background: rgba(155,225,61,0.06); }

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  transition: border-color .25s ease, transform .25s ease;
}
.card:hover { border-color: var(--volt-dim); transform: translateY(-4px); }

.badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--volt); border: 1px solid var(--volt-dim);
  background: rgba(155,225,61,0.08);
  padding: .25rem .6rem; border-radius: 999px;
}

/* Nav link underline-on-hover using current color */
.nav-link { position: relative; }
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: -4px; height: 1px; width: 0;
  background: var(--volt); transition: width .25s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* Swiper pagination override */
.swiper-pagination-bullet { background: var(--muted); opacity: .6; }
.swiper-pagination-bullet-active { background: var(--volt); opacity: 1; }

/* Hero topography / route-line backdrop (subtle) */
.topo-bg {
  background-image:
    repeating-linear-gradient(115deg, rgba(155,225,61,0.035) 0px, rgba(155,225,61,0.035) 1px, transparent 1px, transparent 90px);
}

/* Form fields */
.field {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: .65rem;
  padding: .7rem 1rem;
}
.field:focus { outline: none; border-color: var(--volt); box-shadow: 0 0 0 3px rgba(155,225,61,0.15); }
.field::placeholder { color: var(--muted); }
label.field-label { font-size: .8rem; color: var(--muted); margin-bottom: .35rem; display: block; }

/* Accessible focus ring everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--volt); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .charge-line::after { animation: none; }
  html { scroll-behavior: auto; }
}

/* Hero story-style progress fill (see home/index.php hero) */
@keyframes storyfill { from { width: 0%; } to { width: 100%; } }
.animate-storyfill { animation: storyfill 6.5s linear forwards; }