/* ============================================
   HOME.CSS — STELLA
   Home page styles only.
   All colors and fonts reference global.css variables.
   Do not define variables here.
   ============================================ */

/* ============================================
   SECTION 1 — HERO IMAGE
   Full bleed dark block with text overlay
   ============================================ */

.hero-img {
  width: 100%;
  height: 340px;
  background: var(--color-green);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px var(--space-side);
  overflow: hidden;
}

.hero-img-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--color-green);
  opacity: 0.96;
}

.hero-img-lines {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  opacity: 0.04;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 32px,
    var(--color-gold) 32px,
    var(--color-gold) 32.5px
  );
}

.hero-img-content {
  position: relative;
  z-index: 2;
}

.hero-eyebrow {
  display: block;
  font-size: var(--size-label);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 18px;
}

.hero-h1 {
  font-family: var(--font-serif);
  font-weight: var(--weight-light);
  font-size: var(--size-h1);
  line-height: 1.06;
  color: var(--color-bg);
  letter-spacing: var(--tracking-tight);
}

.hero-h1 em {
  font-style: italic;
  color: var(--color-bg-alt);
}

.hero-sub {
  margin-top: 16px;
  font-size: var(--size-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
  opacity: 0.6;
}

/* ============================================
   SECTION 2 — HERO TEXT
   Stella description + emotional pull quote
   ============================================ */

.hero-text {
  padding: 36px var(--space-side) 44px;
  border-bottom: 0.5px solid var(--color-border);
}

.hero-rule {
  width: 28px;
  height: 1px;
  background: var(--color-green);
  margin-bottom: var(--space-gap);
}

.hero-intro {
  font-size: var(--size-body);
  line-height: 1.95;
  color: var(--color-text-primary);
  margin-bottom: 20px;
}

.hero-pull {
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  font-weight: var(--weight-light);
  margin-bottom: 20px;
}

/* ============================================
   SECTION 3 — WHO THIS IS FOR
   Names listed on cream background
   ============================================ */

.who {
  padding: var(--space-section) var(--space-side);
  border-bottom: 0.5px solid var(--color-border);
  background: var(--color-bg-alt);
}
.who-title {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}
.who-subtitle {
  font-family: var(--font-serif);
  font-size: 18px;
  font-style: italic;
  color: var(--color-text-secondary);
  margin-bottom: 32px;
}

.who-list {
  display: flex;
  flex-direction: column;
}

.who-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 0.5px solid var(--color-border);
}

.who-item:last-child {
  border-bottom: none;
}

.who-name {
  font-family: var(--font-serif);
  font-size: 28px;
  color: var(--color-text-primary);
  font-weight: var(--weight-light);
}

.who-dash {
  width: 16px;
  height: 0.5px;
  background: var(--color-green);
}

/* ============================================
   SECTION 4 — DEMO VIDEO
   Pull quote + video player + supporting copy
   ============================================ */

.demo {
  padding: var(--space-section) var(--space-side);
  border-bottom: 0.5px solid var(--color-border);
}

.demo-pull {
  font-family: var(--font-serif);
  font-size: 20px;
  font-style: italic;
  color: var(--color-text-primary);
  line-height: 1.35;
  font-weight: var(--weight-light);
  margin-bottom: var(--space-gap);
}

.demo-video-wrap {
  width: 100%;
  background: var(--color-green);
  margin-bottom: 18px;
}

.demo-video {
  width: 100%;
  display: block;
}

.demo-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.demo-copy p {
  font-size: var(--size-body);
  color: var(--color-text-primary);
  line-height: 1.8;
  text-align: center;
}

.demo-copy-strong {
  color: var(--color-text-secondary) !important;
  font-size: var(--size-body) !important;
}

/* ============================================
   SECTION 5 — SECURITY MAPS
   Swipeable gallery — 2 slides
   ============================================ */

.security {
  padding: var(--space-section) var(--space-side);
  border-bottom: 0.5px solid var(--color-border);
  background: var(--color-bg-alt);
}

.security-note {
  font-size: var(--size-body-sm);
  color: var(--color-text-primary);
  margin-bottom: var(--space-gap);
  line-height: 1.8;
}

.swipe-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.swipe-track {
  display: flex;
  transition: transform 0.4s ease;
  will-change: transform;
}

.swipe-slide {
  min-width: 100%;
}

.swipe-slide-inner {
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  padding: 20px;
}

.swipe-slide-title {
  font-size: var(--size-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: 16px;
}

.security-map-img {
  width: 100%;
  height: auto;
}

.swipe-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.swipe-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-border);
  cursor: pointer;
  transition: background var(--transition);
}

.swipe-dot.active {
  background: var(--color-green);
}

.swipe-hint {
  text-align: center;
  margin-top: 10px;
  font-size: var(--size-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-primary);
}

/* ============================================
   SECTION 6 — FEATURE ACCORDION
   Collapsed by default. Hardware/Security/Capabilities
   ============================================ */

.features {
  padding: var(--space-section) var(--space-side);
}

.accordion {
  border-top: 0.5px solid var(--color-border);
}

.accordion-group {
  border-bottom: 0.5px solid var(--color-border);
}

.accordion-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
}

.accordion-name {
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.accordion-icon {
  font-size: 18px;
  color: var(--color-green);
  font-weight: var(--weight-regular);
  line-height: 1;
  transition: transform var(--transition);
}

.accordion-icon.open {
  transform: rotate(45deg);
}

.accordion-body {
  padding-bottom: 16px;
}

.accordion-body[hidden] {
  display: none;
}
.accordion-intro {
  font-size: var(--size-body);
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin-bottom: 24px;
  font-style: italic;
}
.accordion-subhead {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: bold;
  color: var(--color-text-primary);
  margin: 20px 0 8px;
}
.accordion-list {
  display: flex;
  flex-direction: column;
}
.accordion-list li {
  padding: 10px 0;
  font-size: var(--size-body);
  color: var(--color-text-primary);
  line-height: 1.8;
  border-bottom: 0.5px solid var(--color-border-alt);
}
.accordion-list li:last-child {
  border-bottom: none;
}

/* ============================================
   ECOSYSTEM SECTION
   ============================================ */
.ecosystem {
  padding: var(--space-section) var(--space-side);
  text-align: center;
}
.ecosystem-lead {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: 1.3;
  margin-bottom: 40px;
}
.ecosystem-label {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--color-text-primary);
  margin-bottom: 20px;
}
.ecosystem-list {
  list-style: none;
  padding: 0;
  margin: 0 auto 40px;
  max-width: 480px;
}
.ecosystem-list li {
  font-family: var(--font-serif);
  font-size: var(--size-body);
  color: var(--color-text-primary);
  padding: 10px 0;
  border-bottom: 0.5px solid var(--color-border);
}
.ecosystem-list li:last-child {
  border-bottom: none;
}
.ecosystem-closing {
  font-family: var(--font-serif);
  font-size: var(--size-body);
  color: var(--color-text-secondary);
  line-height: 1.8;
  max-width: 480px;
  margin: 0 auto 12px;
}
.freedom-question {
  font-family: var(--font-serif);
  font-size: var(--size-h2);
  font-weight: 400;
  color: var(--color-text-primary);
  text-align: center;
  margin: 48px auto;
  padding: 0 var(--space-side);
}