/* ============================================================
   CarBrandish — home.css
   Homepage sections: hero, about, services, exposure, stats,
   drivers, cta
   ============================================================ */

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 41.7vw;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-mobile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.hero-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

/* ── Hero Text Section ── */
.hero-text-section {
  background: var(--color-bg);
  padding-block: 0 0;
}

.hero-text-card {
  position: relative;
  max-width: 100%;
  margin-inline: auto;
  padding: 6vw 4vw;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: radial-gradient(35% 80% at 25% 0%, rgba(249, 115, 22, 0.07), transparent);
  text-align: center;
}

/* Corner icons */
.htc {
  position: absolute;
  width: 1.5vw;
  height: 1.5vw;
  color: var(--color-primary);
  opacity: 0.7;
  stroke-width: 1;
}
.htc-tl { top: -0.76vw;    left: -0.76vw;  }
.htc-tr { top: -0.76vw;    right: -0.76vw; }
.htc-bl { bottom: -0.76vw; left: -0.76vw;  }
.htc-br { bottom: -0.76vw; right: -0.76vw; }

.htc-side {
  position: absolute;
  top: -1.4vw;
  bottom: -1.4vw;
  width: 1px;
  background: var(--color-border);
  pointer-events: none;
}
.htc-side-l { left: 0;  }
.htc-side-r { right: 0; }

.htc-center {
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 0;
  border-left: 1px dashed var(--color-border);
  pointer-events: none;
  z-index: 0;
}

.hero-eyebrow {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-md);
  visibility: hidden;
}

.hero-headline {
  font-size: var(--text-hero);
  font-weight: var(--weight-bold);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-md);
  white-space: nowrap;
  visibility: hidden;
}

/* Animated gradient headline */
.hero-headline .grad-word {
  display: inline-block;
  position: relative;
}

.hero-headline .grad-word::before {
  content: attr(data-content);
  position: absolute;
  inset: 0;
  z-index: 0;
  color: #fff;
}

.hero-headline .grad-text {
  position: relative;
  z-index: 1;
  display: block;
  background-clip: text;
  margin: 0 0.5vw;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(to right, var(--grad-from), var(--grad-to));
}

.hero-headline .grad-1 .grad-text {
  --grad-from: #F97316;
  --grad-to: #F97316;
  animation: grad-fg-1 4s infinite;
}
.hero-headline .grad-1::before { animation: grad-bg-1 4s infinite; }

.hero-headline .grad-2 .grad-text {
  --grad-from: #F97316;
  --grad-to: #F97316;
  animation: grad-fg-2 4s infinite;
}
.hero-headline .grad-2::before { animation: grad-bg-2 4s infinite; }

.hero-headline .grad-3 .grad-text {
  --grad-from: #F97316;
  --grad-to: #F97316;
  animation: grad-fg-3 4s infinite;
}
.hero-headline .grad-3::before { animation: grad-bg-3 4s infinite; }

@keyframes grad-fg-1 {
  from, 16.667%, to { opacity: 1; }
  33.333%, 83.333%  { opacity: 0; }
}
@keyframes grad-fg-2 {
  from, to          { opacity: 0; }
  33.333%, 50%      { opacity: 1; }
  16.667%, 66.667%  { opacity: 0; }
}
@keyframes grad-fg-3 {
  from, 50%, to     { opacity: 0; }
  66.667%, 83.333%  { opacity: 1; }
}
@keyframes grad-bg-1 {
  from, 16.667%, to { opacity: 0; }
  25%, 91.667%      { opacity: 1; }
}
@keyframes grad-bg-2 {
  from, to          { opacity: 1; }
  33.333%, 50%      { opacity: 0; }
  25%, 58.333%      { opacity: 1; }
}
@keyframes grad-bg-3 {
  from, 58.333%, 91.667%, to { opacity: 1; }
  66.667%, 83.333%           { opacity: 0; }
}

.hero-subtext {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: 37.5vw;
  margin-inline: auto;
  margin-bottom: var(--space-lg);
  visibility: hidden;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  visibility: hidden;
}

.hero-dashboard {
  margin-top: var(--space-xl);
  display: flex;
  justify-content: center;
  position: relative;
}

.hero-dashboard-img {
  max-width: 100%;
  width: 100%;
  object-fit: contain;
  border-radius: 16px;
}

.hero-dashboard-video {
    position: absolute;
    bottom: 2vw;
    right: 3vw;
    width: 56vw;
    border-radius: 12px;
    display: block;
    object-fit: cover;
    pointer-events: none;
}

@media (max-width: 767px) {
  .hero-dashboard-video {
    width: 59.5vw;
        right: 3.5vw;
  }
}

@media (max-width: 767px) {
  .hero-dashboard {
    margin-left: calc(-1 * var(--container-padding) + 5px);
    margin-right: calc(-1 * var(--container-padding) + 5px);
    margin-top: var(--space-lg);
  }

  .hero-dashboard-img {
    max-width: 100%;
    width: 100%;
    border-radius: 4px;
  }
}

/* Scroll Indicator */
.scroll-indicator {
  position: absolute;
  bottom: 2vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  visibility: hidden;
}

.scroll-line {
  width: 1px;
  height: 3.3vw;
  background: linear-gradient(180deg, rgba(255,255,255,0.4), transparent);
  animation: scroll-pulse 2s ease-in-out infinite;
}

@keyframes scroll-pulse {
  0%, 100% { opacity: 1; transform: scaleY(1); }
  50%      { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
}

/* ============================================================
   FEATURES
   ============================================================ */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.feature-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2.5vw;
  transition: transform var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-md);
}

.feature-icon {
  width: 3.3vw;
  height: 3.3vw;
  border-radius: var(--radius-md);
  background: rgba(249, 115, 22, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
  color: var(--color-primary);
}


.feature-card h3 {
  font-size: var(--text-h3);
  margin-bottom: var(--space-sm);
}

.feature-card p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* Split row moved to components.css */

.app-stores-soon {
  display: flex;
  align-items: center;
  gap: 1vw;
  margin-top: var(--space-md);
  padding: 1vw 1.4vw;
  background: rgba(249, 115, 22, 0.06);
  border: 1px solid rgba(249, 115, 22, 0.2);
  border-radius: 10px;
  max-width: 29vw;
}

.app-soon-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5vw;
  height: 2.5vw;
  border-radius: 50%;
  background: rgba(249, 115, 22, 0.12);
  color: var(--color-primary);
}

.app-soon-text {
  display: flex;
  flex-direction: column;
  gap: 0.2vw;
}

.app-soon-text strong {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.01em;
}

.app-soon-text span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}

.app-screenshot {
  border-radius: var(--radius-lg);
}

/* ============================================================
   EXPOSURE — Accordion split
   ============================================================ */
.acc-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: stretch;
}

.acc-split-text {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.acc-split-text .eyebrow {
  margin-bottom: 0;
}
.acc-split-text h2 {
  font-size: var(--text-h2-2);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.acc-split-text p {
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.img-accordion {
  display: flex;
  flex-direction: row;
  gap: var(--space-sm);
  height: 32vw;
  overflow: hidden;
}

.acc-item {
  position: relative;
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  width: 4.2vw;
  flex-shrink: 0;
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.acc-item.active {
  width: 25vw;
}

.acc-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.acc-overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 5, 0.45);
  transition: opacity 0.4s ease;
}

.acc-item.active .acc-overlay {
  opacity: 0;
}

.acc-label {
  position: absolute;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

.acc-item.active .acc-label {
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: var(--color-primary);
  font-size: var(--text-h3);
  padding: 10px;
  transform: rotate(0deg);
  opacity: 1;
  transition: opacity 0.3s ease 0.35s;
}

.acc-item:not(.active) .acc-label {
  bottom: 5.5vw;
  left: 50%;
  width: auto;
  text-align: left;
  background-color: transparent;
  color: #fff;
  font-size: var(--text-h4);
  padding: 0;
  transform: translateX(-50%) rotate(90deg);
  opacity: 1;
}

/* ============================================================
   STATS
   ============================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

.stat-card {
  text-align: center;
  padding: 2.5vw var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.stat-number {
  display: block;
  font-family: var(--font-heading);
  font-size: 4vw;
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-sm);
}

.stat-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
}

/* CTA styles moved to components.css */

/* ============================================================
   VS DIGITAL — Why Carbrandish Beats Digital Ads
   ============================================================ */
.vs-digital-section {
  padding-block: var(--space-section);
  background: var(--color-surface);
}

/* ── Warm variant — shimmer title animation ── */
.vs-section-warm {
  background: var(--color-surface);
}

@media (max-width: 767px) {
  .vs-section-warm {
    padding-block: var(--space-lg);
  }
  .vs-section-warm + .vs-section-warm {
    padding-top: 0;
  }
}

.vs-section-warm .vs-title {
  color: #fff;
}

.vs-section-warm .vs-title .w {
  display: inline-block;
  color: #fff;
  animation: vs-word-flash 4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.25s);
}

@keyframes vs-word-flash {
  0%, 40%, 100% { color: #fff; }
  20%           { color: #F97316; }
}

.vs-title {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  letter-spacing: -0.4px;
  margin: 0 0 var(--space-sm);
}

.vs-lead {
  margin: 0 0 var(--space-lg);
  color: var(--color-text-muted);
  font-size: var(--text-base);
  max-width: 70ch;
}

.vs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.vs-card {
  border: 1px solid var(--color-border);
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}

.vs-card h3 {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin: 0 0 6px;
}

.vs-card p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.vs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vs-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.vs-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.vs-icon-x {
  color: #ef4444;
}

.vs-icon-check {
  color: #10b981;
}
#about .split-media img {
    height: 35vw;
    object-fit: cover;
    object-position: center;
}
/* ============================================================
   HOME RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) {
  .vs-grid {
    grid-template-columns: 1fr;
  }

  .features-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .split-row {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .split-row.reversed .split-media,
  .split-row.reversed .split-text {
    order: 0;
  }

  .acc-split {
    grid-template-columns: 1fr;
  }

  .img-accordion {
    height: 41.7vw;
  }

  .acc-item.active {
    width: 31.25vw;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
}

@media (max-width: 767px) {
  .hero-video { display: none !important; }
  .hero-mobile-img { display: block; }

  .hero-video-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
    z-index: 1;
  }
  
  .hero {
            height: 70vh;
        min-height: 100vw;
  }

  .hero-headline {
    font-size: var(--text-hero);
    white-space: normal;
  }

  .hero-headline .grad-word {
    display: block;
  }

  .hero-subtext {
    max-width: 90vw;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .feature-icon {
    width: 12.8vw;
    height: 12.8vw;
  }

  .split-row {
    grid-template-columns: 1fr;
  }

  .split-text {
    text-align: center;
  }

  .split-text .split-media {
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
    margin-inline: auto;
    width: 100%;
    height: 70vw;
  }

  .split-text .split-media img {
    border-radius: var(--radius-md);
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
    #about .split-media img {
      height: 70vw;
      object-fit: cover;
      object-position: center;
  }
      #exposure .acc-item.active:first-child img {
    object-position: center -25vw;
  }
  #exposure .acc-item.active:nth-child(3) img {
    object-position: center -32vw;
}
  .split-text .btn-primary {
    margin-inline: auto;
  }

  .acc-split {
    grid-template-columns: 1fr;
  }

  .img-accordion {
    flex-direction: column;
    height: auto;
    gap: var(--space-xs);
  }

  .acc-item {
    width: 100%;
    height: 17vw;
    transition: height 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .acc-item.active {
    width: 100%;
    height: 58.7vw;
  }

  /* .img-accordion .acc-item.active:first-child img {
      object-position: bottom;
  } */
  .acc-item:not(.active) .acc-label {
    top: 50%;
    bottom: auto;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    font-size: var(--text-lg);
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  .app-stores-soon {
    max-width: 100%;
    padding: 3.5vw 4.5vw;
    gap: 3.5vw;
  }

  .app-soon-icon {
    width: 9.6vw;
    height: 9.6vw;
  }

  /* CTA responsive moved to components.css */
}

/* ── Home Contact Section — beta-page inspired ── */
.home-contact-section {
  padding-block: var(--space-section);
  background:
    radial-gradient(700px 400px at 10% 0%, rgba(249,115,22,0.12), transparent 60%),
    radial-gradient(500px 350px at 90% 100%, rgba(249,115,22,0.07), transparent 55%),
    var(--color-bg);
}

.home-contact-card {
  border: 1px solid rgba(249,115,22,0.28);
  background:
    radial-gradient(700px 350px at 15% 0%, rgba(249,115,22,0.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border-radius: var(--radius-lg);
  padding: 3vw;
  box-shadow: 0 18px 55px rgba(0,0,0,0.45);
  overflow: hidden;
}

.home-contact-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3vw;
  align-items: center;
}

.home-contact-left {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.home-contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(249,115,22,0.35);
  background: rgba(249,115,22,0.10);
  color: #ffd1b0;
  font-weight: 700;
  font-size: var(--text-sm);
  width: fit-content;
  margin-bottom: var(--space-sm);
}

.home-contact-left h2 {
  font-size: clamp(1.6rem, 3vw, 3rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-sm);
}

.home-contact-left > p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: 52ch;
  margin: 0 0 var(--space-md);
}

.home-contact-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}

.home-contact-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: rgba(255,255,255,0.04);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.home-contact-btn-ghost:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.16);
  transform: translateY(-1px);
}

.home-contact-phone {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  margin: 0;
}

.home-contact-form-wrap .form-card {
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 14px;
}

.home-contact-form-wrap .form-group {
  margin-bottom: 10px;
}

.home-contact-form-wrap .form-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: 5px;
}

.home-contact-form-wrap .form-input,
.home-contact-form-wrap .form-select {
  padding: 10px 12px;
  font-size: var(--text-sm);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
}

.home-contact-form-wrap .form-row {
  gap: 10px;
  margin-bottom: 0;
}

.home-contact-form-wrap .form-consent {
  margin-top: 10px;
  margin-bottom: 10px;
}

.home-contact-form-wrap .form-submit {
  padding: 12px;
  font-size: var(--text-sm);
}

/* Responsive */
@media (max-width: 1023px) {
  .home-contact-inner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .home-contact-card {
    padding: 4vw;
  }
}

@media (max-width: 767px) {
  .home-contact-card {
    padding: 6vw 5vw;
  }

  .home-contact-left h2 {
    font-size: clamp(1.5rem, 7vw, 2.2rem);
  }
}

/* ============================================================
   HOME — Section spacing rule (desktop only):
   Different-color neighbors → 5.5vw per side
   Same-color neighbors      → 2.5vw per side
   Color map:
     bg (#050505)      = .section:not(.section-alt), .home-contact-section
     surface (#0D0D0D) = .section.section-alt, .vs-digital-section,
                        .vs-section-warm (extends .vs-digital-section)
   ============================================================ */
@media (min-width: 768px) {
  :root {
    --space-section: 5.5vw;
    --space-section-sm: 4vw;
  }

  /* --- bg → bg: consecutive plain .section --- */
  .section:not(.section-alt) + .section:not(.section-alt) {
    padding-top: 2.5vw;
  }
  .section:not(.section-alt):has(+ .section:not(.section-alt)) {
    padding-bottom: 2.5vw;
  }

  /* --- surface → surface: vs-digital chain (vs-section-warm included) --- */
  .vs-digital-section + .vs-digital-section {
    padding-top: 2.5vw;
  }
  .vs-digital-section:has(+ .vs-digital-section) {
    padding-bottom: 2.5vw;
  }

  /* --- surface → surface: .section.section-alt → .vs-digital-section --- */
  .section.section-alt + .vs-digital-section {
    padding-top: 2.5vw;
  }
  .section.section-alt:has(+ .vs-digital-section) {
    padding-bottom: 2.5vw;
  }

  /* --- surface → surface: consecutive .section.section-alt --- */
  .section.section-alt + .section.section-alt {
    padding-top: 2.5vw;
  }
  .section.section-alt:has(+ .section.section-alt) {
    padding-bottom: 2.5vw;
  }

  /* === Brands page: swarm → our-works (surface → surface) === */
  .swarm-section + .section.section-alt {
    padding-top: 2.5vw;
  }
  .swarm-section:has(+ .section.section-alt) {
    padding-bottom: 2.5vw;
  }

  /* === Drivers page: welcome → earnings (surface → surface) === */
  .welcome-section + .earnings-section {
    padding-top: 2.5vw;
  }
  .welcome-section:has(+ .earnings-section) {
    padding-bottom: 2.5vw;
  }
}