/* ReelEsto — index.html layout only. Loaded after tokens.css + base.css.
   Hero adapts PlanetVision: an oversized wordmark laid over a visual panel,
   a lede + CTA anchored bottom-left, and a floor-plan / stats split below. */

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ============ HERO ============ */
.hero { padding: 104px 24px 0; }
.hero-inner { max-width: 1180px; margin: 0 auto; }

.hero-panel {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--hero-panel);
  min-height: min(74vh, 660px);
  padding: 34px;
  display: flex; flex-direction: column; justify-content: space-between;
  isolation: isolate;
}

/* The visual sits behind the wordmark + copy */
/* Ambient gold wash that drifts slowly behind everything (rich, not loud) */
.hero-panel::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(58% 48% at 32% 30%, rgba(201,162,39,.13), transparent 70%);
  animation: washDrift 17s ease-in-out infinite alternate;
}
/* Faint architectural grid, masked to fade toward the corners, drifting slowly */
.hero-grid {
  position: absolute; inset: -2px; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--hero-hair) 1px, transparent 1px),
    linear-gradient(90deg, var(--hero-hair) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(125% 100% at 70% 18%, #000 28%, transparent 80%);
          mask-image: radial-gradient(125% 100% at 70% 18%, #000 28%, transparent 80%);
  animation: gridDrift 24s linear infinite;
}
/* Film-grain texture for editorial richness (static — no motion cost) */
.hero-grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: .045; mix-blend-mode: overlay;
  background-size: 170px 170px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-visual { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-visual::after {
  /* vignette so overlaid text stays legible */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 70% 30%, transparent 30%, rgba(11,10,9,.55) 100%),
    linear-gradient(180deg, rgba(11,10,9,.35) 0%, transparent 30%, rgba(11,10,9,.72) 100%);
}
.hero-visual svg { position: absolute; width: 100%; height: 100%; }

/* ---- Focal loop: energy scans the source film, flows down the connectors,
   and the three reels light up in sequence. Slow + low-amplitude. ~5s cycle. */
.film-pulse { animation: filmPulse 5s var(--ease) infinite; }
.conn-flow  { stroke-dasharray: 26 460; animation: connFlow 5s linear infinite; }
.conn-flow.c2 { animation-delay: .28s; }
.conn-flow.c3 { animation-delay: .56s; }
.phone-play { transform-box: fill-box; transform-origin: center; animation: phonePulse 5s var(--ease) infinite; }
.phone-play.p2 { animation-delay: .28s; }
.phone-play.p3 { animation-delay: .56s; }
.phone-frame { animation: phoneBreathe 5s var(--ease) infinite; }
.phone-frame.p2 { animation-delay: .28s; }
.phone-frame.p3 { animation-delay: .56s; }

@keyframes washDrift { from { transform: translate(-4%, -3%); } to { transform: translate(6%, 4%); } }
@keyframes gridDrift { to { background-position: 56px 56px, 56px 56px; } }
@keyframes filmPulse { 0% { x: 430px; opacity: 0; } 12% { opacity: .55; } 88% { opacity: .55; } 100% { x: 1030px; opacity: 0; } }
@keyframes connFlow  { from { stroke-dashoffset: 486; } to { stroke-dashoffset: 0; } }
@keyframes phonePulse { 0%,54% { opacity: .38; } 68% { opacity: 1; } 84% { opacity: .55; } 100% { opacity: .38; } }
@keyframes phoneBreathe { 0%,54% { stroke-opacity: .5; } 70% { stroke-opacity: 1; } 100% { stroke-opacity: .5; } }

/* Pause all hero motion when the panel scrolls out of view */
.hero-panel.paused, .hero-panel.paused *, .hero-panel.paused::before { animation-play-state: paused !important; }

/* Oversized wordmark, PlanetVision-style — clipped by the panel edge */
.hero-wordmark {
  position: relative; z-index: 2;
  font-family: var(--font-brand);
  font-weight: 900;
  font-size: clamp(58px, 13.5vw, 210px);
  line-height: 1;
  /* Top room so the overflow:hidden reveal mask doesn't clip cap/ascender
     tops (padding is inside the clip region, so it stays visible). */
  padding-top: .12em;
  letter-spacing: -.035em;
  color: var(--hero-ink);
  white-space: nowrap;
  margin-left: -.04em;
}
.hero-wordmark .dot { color: var(--brand); }

.hero-top {
  position: relative; z-index: 2;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--hero-ink-dim);
  border: 1px solid var(--hero-hair); border-radius: 999px;
  padding: 8px 14px;
  background: rgba(245,240,230,.04);
}
.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 0 var(--brand);
  animation: livePulse 2.4s var(--ease) infinite;
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(201,162,39,.5); }
  70% { box-shadow: 0 0 0 8px rgba(201,162,39,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,162,39,0); }
}

.hero-foot {
  position: relative; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.hero-lede {
  max-width: 460px;
  font-size: 17px; line-height: 1.6;
  color: var(--hero-ink-dim);
}
.hero-lede strong { color: var(--hero-ink); font-weight: 600; }
.hero-cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Hero button variant that reads on the dark panel */
.hero .btn { --_bg: var(--hero-ink); --_fg: var(--hero-panel); }
.hero .btn:hover { color: var(--hero-panel); }

/* ============ FLOOR-PLAN / STATS SPLIT (PlanetVision panel) ============ */
.split {
  max-width: 1180px; margin: 18px auto 0; padding: 0 24px;
  display: grid; grid-template-columns: 1fr 1.35fr; gap: 14px;
}
.split-plan {
  border-radius: var(--radius); overflow: hidden;
  background: var(--bg-lift); border: 1px solid var(--hair);
  padding: 22px; display: flex; align-items: center; justify-content: center;
}
.split-plan svg { width: 100%; height: auto; max-height: 190px; }
.split-plan svg [data-plan] {
  stroke: var(--blueprint-line); fill: none;
  stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;
}
.split-stats {
  border-radius: var(--radius);
  background: var(--hero-panel);
  padding: 30px 32px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: center;
}
.split-stat .stat-key {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--hero-ink-dim); margin-bottom: 10px;
  display: flex; align-items: center; gap: 7px;
}
.split-stat .stat-key svg { width: 15px; height: 15px; stroke: var(--brand); fill: none; stroke-width: 1.6; }
.split-stat .stat-val {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 4vw, 40px); line-height: 1;
  color: var(--hero-ink); letter-spacing: -.02em;
}

/* ============ SECTIONS ============ */
.section { max-width: 1180px; margin: 0 auto; padding: 96px 24px; }
.section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section-head .eyebrow { display: block; margin-bottom: 16px; }
.section-title { font-size: clamp(30px, 5vw, 46px); letter-spacing: -.02em; }
.section-title .accent { display: inline; }

/* How it works — 3 steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step {
  position: relative;
  padding: 30px 26px 34px;
  background: var(--bg-lift); border: 1px solid var(--hair);
  border-radius: var(--radius);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s;
}
.step:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--brand-soft); }
.step-num {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
  color: var(--brand); margin-bottom: 22px;
}
.step-ico { width: 34px; height: 34px; margin-bottom: 18px; stroke: var(--t1); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.step h3 { font-size: 22px; margin-bottom: 8px; }
.step p { font-size: 15px; color: var(--t2); line-height: 1.6; }

/* Compare — DIY vs ReelEsto */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 900px; margin: 0 auto; }
.compare-card { padding: 32px; border-radius: var(--radius); border: 1px solid var(--hair); }
.compare-card.diy { background: var(--bg-lift); }
.compare-card.us  { background: var(--hero-panel); border-color: transparent; }
.compare-card h3 {
  font-family: var(--font-mono); font-weight: 500; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 22px;
}
.compare-card.diy h3 { color: var(--t3); }
.compare-card.us h3  { color: var(--brand); }
.compare-card ul { list-style: none; }
.compare-card li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; font-size: 16px; line-height: 1.5;
  border-top: 1px solid var(--hair);
}
.compare-card li:first-child { border-top: none; }
.compare-card.diy li { color: var(--t2); }
.compare-card.us li  { color: var(--hero-ink); border-top-color: var(--hero-hair); }
.compare-card li .ico { flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.compare-card.diy li .ico { stroke: var(--t3); }
.compare-card.us li .ico  { stroke: var(--brand); }

/* WhatsApp support */
.wa-section { max-width: 1180px; margin: 0 auto; padding: 20px 24px 40px; text-align: center; }
.wa-section p { font-size: 15px; color: var(--t2); margin-bottom: 20px; }
.wa-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--whatsapp); color: #fff;
  padding: 13px 26px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .04em;
  text-decoration: none;
  transition: background .2s, transform .3s var(--snap);
}
.wa-btn:hover { background: var(--whatsapp-hover); transform: translateY(-2px); }
.wa-btn svg { width: 20px; height: 20px; fill: #fff; }

/* Bottom CTA */
.bottom-cta {
  max-width: 1180px; margin: 0 auto; padding: 40px 24px 20px;
}
.bottom-cta-inner {
  border-radius: var(--radius-lg); background: var(--hero-panel);
  padding: clamp(48px, 8vw, 96px) 32px; text-align: center;
  position: relative; overflow: hidden;
}
.bottom-cta h2 { font-size: clamp(30px, 6vw, 60px); color: var(--hero-ink); letter-spacing: -.02em; margin-bottom: 16px; }
.bottom-cta h2 .accent { color: var(--brand); }
.bottom-cta p { font-size: 17px; color: var(--hero-ink-dim); max-width: 480px; margin: 0 auto 32px; }
.bottom-cta .btn { --_bg: var(--brand); --_fg: var(--hero-panel); }
.bottom-cta .btn::before { background: var(--hero-ink); }
.bottom-cta .btn:hover { color: var(--hero-panel); }

/* ============ TESTIMONIAL RIBBON ============ */
.ribbon {
  position: relative;
  overflow: hidden;
  padding: 30px 0;
  margin: 8px 0 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ribbon-track {
  display: flex; width: max-content; gap: 16px;
  animation: marquee 46s linear infinite;
}
.ribbon:hover .ribbon-track { animation-play-state: paused; }
.ribbon.paused .ribbon-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

.tcard {
  flex: 0 0 auto; width: 360px;
  display: flex; flex-direction: column; gap: 18px;
  padding: 26px 28px;
  background: var(--bg-lift); border: 1px solid var(--hair);
  border-radius: var(--radius);
}
.tcard blockquote {
  font-family: var(--font-display); font-weight: 500; font-style: italic;
  font-size: 18px; line-height: 1.45; letter-spacing: -.01em;
  color: var(--t1);
}
.tcard blockquote::before { content: "“"; color: var(--brand); margin-right: 1px; }
.tcard blockquote::after  { content: "”"; color: var(--brand); margin-left: 1px; }
.tcard figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.tavatar {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
  font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .04em;
  border: 1px solid var(--brand-soft);
}
.twho { display: flex; flex-direction: column; line-height: 1.3; }
.twho strong { font-size: 15px; font-weight: 700; color: var(--t1); }
.twho span { font-size: 13px; color: var(--t3); }
html[lang="hi"] .tcard blockquote, html[lang="ml"] .tcard blockquote { font-style: normal; font-weight: 600; }

/* ============ RESPONSIVE ============ */
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split-plan { max-height: 200px; }
  .steps { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hero { padding: 92px 14px 0; }
  .hero-panel { padding: 22px 20px; min-height: 66vh; border-radius: 20px; }
  .hero-lede { font-size: 15px; }
  .hero-foot { gap: 18px; }
  .hero-cta-row { width: 100%; }
  .hero .btn { width: 100%; }
  .split { padding: 0 14px; }
  .split-stats { grid-template-columns: 1fr; gap: 18px; padding: 24px; }
  .split-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .split-stat .stat-key { margin-bottom: 0; }
  .section { padding: 68px 20px; }
  .section-head { margin-bottom: 40px; }
  .step { padding: 26px 22px; }
  .compare-card { padding: 26px; }
  .tcard { width: 290px; padding: 22px 24px; }
  .tcard blockquote { font-size: 16px; }
  footer { padding: 48px 16px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ribbon-track { animation: none; transform: none; }
  .ribbon { overflow-x: auto; }
  .hero-grid, .hero-panel::before { animation: none; }
}