/* SPIRAL — Models page */

.stat-stack {
  background: #fff;
  border: 1px solid rgba(10,15,13,0.08);
  border-radius: 20px;
  padding: 8px 22px;
  box-shadow: 0 30px 60px -30px rgba(10,15,13,0.18);
}
.stat-row {
  display:flex; justify-content:space-between; align-items:center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(10,15,13,0.07);
  font-family: "Space Grotesk", sans-serif;
}
.stat-row:last-child { border-bottom: 0; }
.stat-row span { font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: rgba(10,15,13,0.55); }
.stat-row b    { font-size: 1.05rem; color: #0F3D2E; font-weight: 500; }

/* ---------- Model block ---------- */
.model-block {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}
.model-block.reversed { direction: rtl; }
.model-block.reversed > * { direction: ltr; }

@media (max-width: 960px) {
  .model-block { grid-template-columns: 1fr; gap: 32px; }
  .model-block.reversed { direction: ltr; }
}

.model-visual {
  position: relative;
  border-radius: 28px;
  padding: 48px 36px;
  min-height: 360px;
  background: #F5F3EE;
  border: 1px solid rgba(10,15,13,0.08);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.model-visual.dark {
  background: linear-gradient(150deg, #0F3D2E 0%, #0A0F0D 70%);
  border-color: rgba(245,243,238,0.1);
}
.visual-bg {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(10,15,13,0.05) 0 1px, transparent 1px 36px);
  pointer-events: none;
}
.visual-bg.dark {
  background-image: repeating-linear-gradient(115deg, rgba(245,243,238,0.06) 0 1px, transparent 1px 36px);
}
.model-svg {
  position: relative;
  width: 100%;
  max-width: 560px;
  height: auto;
  filter: drop-shadow(0 20px 30px rgba(10,15,13,0.15));
  animation: hover 6s ease-in-out infinite;
}
@keyframes hover {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}
.model-badge {
  position: absolute;
  top: 20px; left: 20px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
  background: #0A0F0D; color: #C8FF3D;
  padding: 6px 12px; border-radius: 999px;
}
.model-badge.light { background: #C8FF3D; color: #0A0F0D; }
.model-series {
  position: absolute;
  bottom: 20px; right: 24px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(10,15,13,0.4);
}
.model-series.light { color: rgba(245,243,238,0.5); }

.model-info .tag {
  font-family: "Space Grotesk", sans-serif;
  font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
  color: #0F3D2E;
  margin-bottom: 16px;
  display: inline-block;
}
.spec-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(10,15,13,0.08);
  border-left: 1px solid rgba(10,15,13,0.08);
}
.spec-grid li {
  border-right: 1px solid rgba(10,15,13,0.08);
  border-bottom: 1px solid rgba(10,15,13,0.08);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.spec-grid span {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(10,15,13,0.5);
  font-family: "Space Grotesk", sans-serif;
}
.spec-grid b {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  font-size: 1.15rem;
  color: #0A0F0D;
}

.pill {
  display: inline-flex; align-items: center;
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px; letter-spacing: .05em;
  color: #0F3D2E;
  background: rgba(15,61,46,0.08);
  padding: 6px 12px;
  border-radius: 999px;
}

/* ---------- Energy cards ---------- */
.energy-card {
  background: #111714;
  border: 1px solid rgba(245,243,238,0.08);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.energy-visual {
  background:
    radial-gradient(ellipse at top, rgba(200,255,61,0.12), transparent 60%),
    #0A0F0D;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}
.energy-copy {
  padding: 28px;
  border-top: 1px solid rgba(245,243,238,0.08);
}
.energy-copy .tag {
  font-family: "Space Grotesk", sans-serif;
  font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
}
.energy-spec {
  margin-top: 22px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.energy-spec li {
  display: flex; flex-direction: column; gap: 4px;
}
.energy-spec span {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(245,243,238,0.4);
  font-family: "Space Grotesk", sans-serif;
}
.energy-spec b {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  color: #C8FF3D;
}

/* ---------- Future timeline ---------- */
.timeline-line {
  position: absolute;
  left: 0; right: 0;
  top: 50px;
  height: 1px;
  background: repeating-linear-gradient(to right, rgba(10,15,13,0.2) 0 6px, transparent 6px 12px);
  pointer-events: none;
}
.future-card {
  background: #fff;
  border: 1px solid rgba(10,15,13,0.08);
  border-radius: 20px;
  padding: 24px;
  position: relative;
  transition: transform .4s ease, box-shadow .4s ease;
}
.future-card:hover { transform: translateY(-6px); box-shadow: 0 28px 50px -30px rgba(10,15,13,0.25); }
.future-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: "Space Grotesk", sans-serif;
  margin-bottom: 28px;
}
.status {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
}
.status.live { background: #0F3D2E; color: #C8FF3D; }
.status.soon { background: #C8FF3D; color: #0A0F0D; }
.status.future { background: rgba(10,15,13,0.08); color: #0A0F0D; }
.year {
  font-size: 11px; letter-spacing: .15em;
  color: rgba(10,15,13,0.45);
  text-transform: uppercase;
}
.future-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: #F5F3EE;
  border: 1px solid rgba(10,15,13,0.06);
  color: #0F3D2E;
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 18px;
}
.future-icon svg { width: 26px; height: 26px; }
.future-card h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.2;
}
.future-card p {
  margin-top: 8px;
  font-size: 0.92rem;
  color: rgba(10,15,13,0.6);
  line-height: 1.55;
}