/* ============================================================
   public-homepage.css — Homepage only styles
   Sitewide globals in main.css
   Shared sections in css/sections/
   ============================================================ */
/* ============================================================
   05 SIZZLE REEL — Homepage poster creative
   Shared structure from video-structure.css (Component 16)
   These overrides control the homepage-specific text layout
   ============================================================ */
.promo-video--dark .video-curtain-line {
  font-size: clamp(3rem, 9vw, 11rem);
  text-shadow: 0 2px 40px rgba(0,0,0,0.9);
}

.promo-video--dark .video-curtain-line .electric-blue { color: var(--electric-blue); }
.promo-video--dark .video-curtain-line .electric-purple { color: var(--electric-purple); }

.promo-video--dark .video-curtain-line--punch {
  font-size: clamp(3.5rem, 11vw, 13rem);
  line-height: 0.85;
  text-shadow: 0 0 60px rgba(254,192,39,0.5);
}

.promo-video--dark .btn-hero-primary {
  margin-top: 56px;
}

/* ============================================================
   06 FINALE CTA
   ============================================================ */
.cta-finale-cinematic {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--black) 0%, var(--dark-grey) 50%, var(--charcoal) 100%);
  padding: 32px 40px;
  position: relative;
  overflow: hidden;
}

.cta-finale-cinematic::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(138,43,226,0.40) 0%,
      rgba(138,43,226,0.30) 40%,
      rgba(138,43,226,0.15) 70%,
      transparent 85%
    ),
    radial-gradient(ellipse 140% 60% at 50% 100%, rgba(254,192,39,0.45) 0%, rgba(254,192,39,0.25) 40%, transparent 70%);
  pointer-events: none;
}

.cta-content-finale {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 1000px;
}

.cta-content-finale h2 {
  font-size: clamp(44px, 7vw, 96px);
  font-weight: 900;
  color: var(--white);
  margin-bottom: 40px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.cta-content-finale .gold {
  color: var(--gold);
  text-shadow: 0 0 40px var(--gold-glow);
}

.cta-content-finale p {
  font-size: clamp(19px, 2.5vw, 30px);
  color: rgba(255,255,255,0.8);
  margin-bottom: 60px;
  line-height: 1.5;
}

.cta-content-finale .cta-fast-response {
  font-size: 24px;
  color: #FEC027;
  margin-top: 40px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
}

/* ============================================================
   07 SERVICES INTRO
   ============================================================ */
.hp-services-intro {
  background: var(--black);
  padding: 80px 40px 60px;
  text-align: center;
}

.hp-services-spark {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--electric-blue);
  margin-bottom: 20px;
  display: block;
}

.hp-services-headline {
  font-size: clamp(52px, 8vw, 110px);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.04em;
}

.hp-si-white  { color: var(--white); }
.hp-si-gold   { color: var(--gold); }
.hp-si-blue   { color: var(--electric-blue); }
.hp-si-purple { color: var(--electric-purple); }


/* ============================================================
   11 SEO LAYER
   ============================================================ */
.seo-content-block {
  background: var(--black);
  padding: 80px 40px;
}

.seo-block-rail {
  max-width: 1400px;
  margin: 0 auto;
}

.seo-content-block h2 {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 900;
  color: var(--gold);
  margin-bottom: 40px;
  letter-spacing: -0.02em;
  line-height: 1.0;
}

.seo-block--blue h3 {
  color: var(--electric-blue);
}

.seo-block--purple h3 {
  color: var(--electric-purple);
}

.seo-block--red h3 {
  color: #FF3B3B;
}

.seo-block--gold h3 {
  color: var(--gold);
}

.seo-content-block h3 {
  font-size: clamp(20px, 2.5vw, 30px);
  font-weight: 800;
  margin: 48px 0 18px;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.seo-content-block p {
  font-size: 18px;
  line-height: 1.85;
  color: rgba(255,255,255,0.78);
  margin-bottom: 22px;
}

.seo-bridge {
  background: linear-gradient(135deg, #A855F7 0%, #7C3AED 55%, #4C1D95 100%);
  padding: 20px 40px;
  text-align: center;
}

.seo-bridge-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.seo-bridge-eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 24px;
  display: block;
}

.seo-bridge-headline {
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 900;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin-bottom: 28px;
}

.seo-bridge-headline span {
  color: #FEC027;
}

.seo-bridge-sub {
  font-size: clamp(17px, 2vw, 22px);
  color: rgba(255,255,255,0.82);
  line-height: 1.6;
  margin-bottom: 36px;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

.seo-bridge-link {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #FEC027;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: gap 0.3s;
}

.seo-bridge-link:hover { gap: 18px; }
.seo-bridge-link::after { content: '→'; font-size: 18px; }

.seo-pq {
  padding: 52px 40px;
  position: relative;
}

.seo-pq--blue {
  background: linear-gradient(135deg, #00D4FF 0%, #0088BB 50%, #003355 100%);
}

.seo-pq--gold {
  background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 50%, #3B0764 100%);
}

.seo-pq--red {
  background: linear-gradient(135deg, #0a0a0a 0%, #003355 50%, #00D4FF 100%);
}

.seo-pq--navy {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

.seo-pq--purple2 {
  background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 50%, #3B0764 100%);
}

.seo-pq-inner {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  padding-left: 64px;
}

.seo-pq-mark {
  position: absolute;
  left: 0;
  top: -8px;
  font-size: 72px;
  line-height: 1;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  color: #FEC027;
}

.seo-pq--gold .seo-pq-mark {
  color: #FEC027;
}

.seo-pq-text {
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--white);
}

.seo-pq--gold .seo-pq-text {
  color: #fff;
}

.seo-pq-gold  { color: #FEC027; }
.seo-pq-black { color: #000000; }
.seo-pq-white { color: #ffffff; }
.seo-pq-purple { color: #7C3AED; }

/* ============================================================
   12 RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .hp-services-intro { padding: 60px 24px 40px; }
  .cta-finale-cinematic { padding: 40px 24px; }
  .seo-content-block { padding: 60px 20px; }
  .seo-bridge { padding: 60px 20px; }
  .seo-pq { padding: 40px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}