/* ==========================================================================
   v2-home.css -- New homepage sections, 2026-09-05, modeled directly on the
   autopostin-v2 reference project's src/app/page.tsx (Hero, "Complete
   Resolution Support", "5 Core Content Formats", "Auto-Publish" platform
   pipeline). Content here is intentionally hardcoded (matching v2 itself,
   not the CMS), but every color rides the site's existing CSS custom
   properties from root.css so both light and dark mode (the existing
   [data-bs-theme] toggle -- untouched) render correctly with zero
   theme-specific duplication.

   Loaded only on the `home` route (see layouts/master.blade.php) so it
   never adds weight to any other page.
   ========================================================================== */

/* ---------- Hero ---------- */
/* Round 5: replaced the two blurred blob-auras with one deliberate
   diagonal gradient wash + a concentrated corner glow -- reads as an
   actual designed background instead of floating blobs, and looks
   equally crisp in light mode: white base tinted just enough to feel
   alive, not washed-out grey. Same recipe, different base color, in
   both themes.

   Round 8: back to a single centered column (rounds 7's two-column,
   Three.js-on-the-right layout was tried and then reverted per direct
   request) -- the padding-bottom now leaves room for the hillrail
   strip instead. */
.v2-hero {
  position: relative;
  overflow: hidden;
  padding: 150px 32px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background:
    radial-gradient(ellipse 1000px 700px at 82% 20%, color-mix(in srgb, var(--color-primary) 16%, transparent), transparent 62%),
    radial-gradient(ellipse 700px 500px at 8% 85%, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 65%),
    linear-gradient(155deg, var(--site-bg) 0%, color-mix(in srgb, var(--color-primary) 4%, var(--site-bg)) 100%);
}
.v2-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Round 5: dropped the avatar-icons pill box for a plain uppercase
   eyebrow label -- reads cleaner and matches the "confident, minimal"
   direction. */
.v2-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-primary);
  margin-bottom: 22px;
}

.v2-hero-title {
  font-size: 64px;
  font-weight: 800;
  line-height: 1.12;
  color: var(--text-primary);
  margin-bottom: 22px;
}
.v2-highlight {
  color: var(--color-primary);
}

.v2-hero-subtitle {
  font-size: 19px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 760px;
}
.v2-hero-subtitle b {
  color: var(--text-primary);
}

.v2-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
/* Round 5: a real outline button (transparent fill, just a border) --
   crisper and more "confident" than a tinted-background ghost button. */
.v2-cta-secondary.i-btn {
  background-color: transparent;
  border: 1.5px solid var(--border-one);
  color: var(--text-primary);
}
.v2-cta-secondary.i-btn:hover {
  border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
  background-color: color-mix(in srgb, var(--color-primary) 6%, transparent);
  color: var(--text-primary);
}
.v2-cta-secondary.i-btn i {
  color: var(--color-primary);
}

/* ---------- "Hill climb" rail: platform icons travelling along a wavy
   path across the hero's bottom edge, endlessly looping (see the SMIL
   animateMotion elements in banner.blade.php). Pure inline SVG + CSS --
   no WebGL, replaces the earlier Three.js scene entirely. ---------- */
.v2-hero-hillrail {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 56px auto 0;
  height: 90px;
}
.v2-hillrail-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.v2-hillrail-svg path {
  fill: none;
  stroke: color-mix(in srgb, var(--color-primary) 32%, transparent);
  stroke-width: 2;
  stroke-linecap: round;
}
.v2-hill-node-bg {
  fill: var(--hill-color, var(--color-primary));
}
.v2-hill-node-icon {
  font-family: "bootstrap-icons";
  font-size: 15px;
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: central;
}

@media (max-width: 991px) {
  .v2-hero-title { font-size: 44px; }
}
@media (max-width: 767px) {
  .v2-hero-hillrail { height: 70px; margin-top: 40px; }
}
@media (max-width: 575px) {
  .v2-hero { padding: 110px 16px 60px; }
  .v2-hero-title { font-size: 32px; }
  .v2-hero-subtitle { font-size: 15px; }
  .v2-hero-hillrail { height: 56px; margin-top: 32px; }
}

/* ---------- Shared section chrome ---------- */
.v2-section {
  position: relative;
  padding: 90px 32px;
  border-top: 1px solid var(--border-one);
}
.v2-section-inner {
  max-width: 1440px;
  margin: 0 auto;
}
.v2-section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 50px;
}
.v2-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-primary);
  margin-bottom: 12px;
}
.v2-section-title {
  font-size: 40px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: 14px;
}
.v2-section-desc {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.7;
}
@media (max-width: 575px) {
  .v2-section { padding: 60px 16px; }
  .v2-section-title { font-size: 28px; }
}

/* ---------- Stats strip ---------- */
.v2-stats-strip {
  border-top: 1px solid var(--border-one);
  border-bottom: 1px solid var(--border-one);
  background: color-mix(in srgb, var(--color-primary) 3%, transparent);
  padding: 36px 32px;
}
.v2-stats-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.v2-stat {
  flex: 1 1 190px;
  text-align: center;
  padding: 0 16px;
  position: relative;
}
.v2-stat:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 34px;
  background: var(--border-one);
}
.v2-stat-number {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}
.v2-stat-number .v2-stat-accent {
  color: var(--color-primary);
}
.v2-stat-label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 600;
}
@media (max-width: 767px) {
  .v2-stat:not(:last-child)::after { display: none; }
}

/* ---------- How It Works: numbered process, not another card grid ---------- */
.v2-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  position: relative;
}
.v2-steps::before {
  content: '';
  position: absolute;
  top: 34px;
  left: 14%;
  right: 14%;
  height: 0;
  border-top: 2px dashed var(--border-one);
  z-index: 0;
}
.v2-step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 12px;
}
.v2-step-number {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  font-size: 24px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-primary) 6%, transparent);
}
.v2-step-title {
  font-size: 19px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.v2-step-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 300px;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .v2-steps { grid-template-columns: 1fr; gap: 44px; }
  .v2-steps::before { display: none; }
}

/* ---------- Template gallery: phone mockups, not icon cards ---------- */
.v2-gallery {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  padding: 10px 4px 20px;
  scrollbar-width: thin;
}
.v2-gallery-item {
  flex: 0 0 200px;
  text-align: center;
}
.v2-phone {
  width: 200px;
  height: 366px;
  border-radius: 30px;
  border: 6px solid var(--card-bg);
  background: var(--site-bg);
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--border-one);
  position: relative;
  overflow: hidden;
  margin: 0 auto 20px;
}
.v2-phone::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 16px;
  background: var(--card-bg);
  border-radius: 0 0 10px 10px;
  z-index: 2;
}
.v2-phone-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 16px 16px;
}
.v2-gallery-label {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.v2-gallery-sub {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Quiz reel mock */
.v2-mock-quiz-bar {
  width: 100%;
  height: 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-primary) 14%, var(--card-bg));
  margin-bottom: 8px;
}
.v2-mock-ring {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid var(--color-primary);
  border-top-color: transparent;
  margin-bottom: 12px;
}
.v2-mock-option {
  width: 100%;
  height: 30px;
  border-radius: 9px;
  background: var(--card-bg);
  border: 1px solid var(--border-one);
  margin-bottom: 7px;
}
.v2-mock-option.is-correct {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 16%, var(--card-bg));
}

/* Comparison reel mock */
.v2-mock-compare {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  height: 130px;
  width: 100%;
}
.v2-mock-compare-bar {
  width: 36px;
  border-radius: 8px 8px 0 0;
}
.v2-mock-vs {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: -60px;
}

/* Documentary/news reel mock */
.v2-mock-doc {
  width: 100%;
  height: 100%;
  background: linear-gradient(165deg, color-mix(in srgb, var(--color-purple) 35%, var(--site-bg)), var(--site-bg));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 20px 14px;
  gap: 10px;
}
.v2-mock-doc-play {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-bottom: auto;
  margin-top: 40px;
}
.v2-mock-doc-caption {
  width: 100%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 8px;
  text-align: left;
}

/* Facebook carousel mock */
.v2-mock-carousel {
  position: relative;
  width: 130px;
  height: 130px;
}
.v2-mock-carousel-card {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  border: 1px solid var(--border-one);
}
.v2-mock-carousel-card:nth-child(1) { transform: rotate(-8deg) translate(-8px, 4px); background: color-mix(in srgb, var(--color-info) 18%, var(--card-bg)); }
.v2-mock-carousel-card:nth-child(2) { transform: rotate(6deg) translate(6px, -2px); background: color-mix(in srgb, var(--color-primary) 16%, var(--card-bg)); }
.v2-mock-carousel-card:nth-child(3) { background: var(--card-bg); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--color-primary); }
.v2-mock-dots {
  display: flex;
  gap: 5px;
  margin-top: 16px;
}
.v2-mock-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border-one);
}
.v2-mock-dots span:first-child {
  width: 14px;
  border-radius: 4px;
  background: var(--color-primary);
}

/* ---------- Formats & Features card grids ---------- */
.v2-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 991px) {
  .v2-grid-3 { grid-template-columns: 1fr; }
}

.v2-card {
  background: var(--card-bg);
  border: 1px solid var(--border-one);
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: border-color 0.3s ease;
}
.v2-card:hover {
  border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.v2-icon-badge {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
}
.v2-icon-badge.is-blue {
  background: color-mix(in srgb, var(--color-info) 12%, transparent);
  color: var(--color-info);
}
.v2-icon-badge.is-purple {
  background: color-mix(in srgb, var(--color-purple) 15%, transparent);
  color: var(--color-purple);
}

.v2-format-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.v2-aspect-pill {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 50px;
  background: color-mix(in srgb, var(--color-primary) 4%, transparent);
  border: 1px solid var(--border-one);
  color: var(--text-secondary);
  white-space: nowrap;
}

.v2-card-title {
  font-size: 21px;
  font-weight: 800;
  color: var(--text-primary);
}
.v2-card-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
}

.v2-card-footer {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--border-one);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--color-primary);
}

/* ---------- Platforms section ---------- */
.v2-platforms-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  flex-wrap: wrap;
}
.v2-platforms-text {
  flex: 1 1 420px;
  max-width: 520px;
}
.v2-platforms-text .v2-section-title {
  text-align: left;
  margin-bottom: 18px;
}
.v2-platforms-text .v2-section-desc {
  margin-bottom: 26px;
}

.v2-pipeline-card {
  flex: 1 1 380px;
  max-width: 440px;
  width: 100%;
  background: var(--card-bg);
  border: 1px solid var(--border-one);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 20px 60px -30px rgba(0, 0, 0, 0.35);
}
.v2-pipeline-card h4 {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.v2-pipeline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--color-primary) 2%, var(--site-bg));
  border: 1px solid var(--border-one);
  margin-bottom: 10px;
}
.v2-pipeline-row:last-child {
  margin-bottom: 0;
}
.v2-pipeline-row-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.v2-pipeline-icon {
  font-size: 20px;
  line-height: 1;
}
.v2-pipeline-name {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
}
.v2-pipeline-desc {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary);
}
.v2-pipeline-check {
  color: var(--color-primary);
  font-size: 17px;
}

@media (max-width: 991px) {
  .v2-platforms-wrap { flex-direction: column; }
  .v2-platforms-text .v2-section-title,
  .v2-platforms-text { text-align: center; max-width: 100%; }
}