/* Quelvora redesign-v2 — homepage-only (hero cinema, showcase stage, marquee, why/insights) */

/* ── Full-viewport cinematic hero ── */
.home-hero{
  position:relative;
  min-height:calc(100dvh - var(--nav-h));
  min-height:calc(100vh - var(--nav-h));
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  padding:48px 40px 0;
}
.home-hero-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
}
.home-hero .bg-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;z-index:0;
  transition:opacity 1.4s ease;
}
/* Dual-crossfade: only ready+active layer is visible (see rules below) */
.home-hero-mesh{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(ellipse 75% 55% at 50% 15%, rgba(99,102,241,.22), transparent 58%),
    radial-gradient(ellipse 45% 40% at 85% 55%, rgba(168,85,247,.14), transparent 55%),
    radial-gradient(ellipse 40% 35% at 10% 70%, rgba(0,201,167,.1), transparent 50%);
}
.home-hero-overlay{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(180deg, rgba(10,10,11,.5) 0%, rgba(10,10,11,.72) 42%, rgba(10,10,11,.92) 78%, var(--bg) 100%),
    linear-gradient(90deg, rgba(10,10,11,.55) 0%, transparent 35%, transparent 65%, rgba(10,10,11,.45) 100%);
}
.home-hero .blur-blob{
  opacity:.35;z-index:1;
}
.home-hero-inner{
  position:relative;z-index:10;
  max-width:900px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  flex:1;justify-content:center;
  padding:32px 0 24px;
}

/* Teal luxury badge with blink */
.home-badge{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:100px;padding:7px 18px;
  font-size:12px;font-weight:600;color:var(--teal);
  border:1px solid rgba(0,201,167,.28);
  background:rgba(0,201,167,.07);
  margin-bottom:28px;letter-spacing:.6px;text-transform:uppercase;
}
.home-headline{
  font-family:'General Sans',sans-serif;
  font-size:clamp(48px,8.5vw,110px);font-weight:500;
  line-height:1.02;letter-spacing:-.035em;color:var(--fg);
  margin-bottom:18px;
}
.home-lede{
  color:var(--sub);font-size:17px;line-height:1.75;
  max-width:520px;margin:0 auto;
}

/* Thin luxury proof under CTAs */
.home-proof{
  margin-top:28px;
  font-size:12px;letter-spacing:1.2px;
  color:rgba(240,235,220,.38);
  font-weight:500;
}
.home-proof span{color:rgba(240,235,220,.55)}

/* Marquee under hero */
.home-mq{
  position:relative;z-index:10;
  padding:28px 40px 48px;
  border-bottom:1px solid var(--border);
}
.home-mq .mq-label{color:rgba(240,235,220,.35)}
.home-mq .mq-label em{
  display:block;font-style:normal;font-size:11px;
  letter-spacing:1.4px;text-transform:uppercase;
  color:rgba(240,235,220,.28);margin-bottom:2px;
}

/* ── Services video showcase (flagship) ── */
.showcase-sec{
  padding:100px 40px;
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
.showcase-layout{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:48px;
  max-width:1120px;
  margin:0 auto;
  align-items:center;
}
.showcase-stage-wrap{
  position:relative;
}
.showcase-stage-glow{
  position:absolute;inset:-8px;
  border-radius:36px;
  background:linear-gradient(137deg,#6366f1,#a855f7,#00C9A7,#6366f1);
  background-size:300% 300%;
  opacity:.45;filter:blur(36px);
  pointer-events:none;z-index:0;
  animation:showcaseGlow 10s ease-in-out infinite;
}
@keyframes showcaseGlow{
  0%,100%{background-position:0% 50%;opacity:.4}
  50%{background-position:100% 50%;opacity:.6}
}
.showcase-stage{
  position:relative;z-index:2;
  border-radius:28px;
  overflow:hidden;
  aspect-ratio:16/11;
  min-height:320px;
  background:var(--card-bg);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.08);
}
.showcase-stage::before{
  content:"";
  position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:4;
  background:linear-gradient(180deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,.08) 30%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 80%,rgba(255,255,255,.35) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.showcase-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;z-index:1;
  transition:opacity 1.2s ease;
}
/* Dual-crossfade: only ready+active layer is visible (see rules below) */
.showcase-stage-shade{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(180deg, rgba(10,10,11,.15) 0%, rgba(10,10,11,.55) 55%, rgba(10,10,11,.85) 100%),
    linear-gradient(135deg, rgba(99,102,241,.12), rgba(168,85,247,.08));
  pointer-events:none;
}
.showcase-label{
  position:absolute;left:22px;right:22px;bottom:22px;z-index:5;
  display:flex;flex-direction:column;gap:6px;
  pointer-events:none;
}
.showcase-label-kicker{
  font-size:10px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--teal);
}
.showcase-label-title{
  font-family:'General Sans',sans-serif;
  font-size:clamp(1.25rem,2.5vw,1.65rem);font-weight:600;
  letter-spacing:-.03em;color:#fff;line-height:1.2;
}
.showcase-label-desc{
  font-size:13px;line-height:1.55;color:rgba(240,235,220,.55);
  max-width:420px;
}

.showcase-copy .s-header{margin-bottom:28px}
.svc-rotator{
  list-style:none;
  display:flex;flex-direction:column;gap:8px;
  margin:0;padding:0;
}
.svc-rotator-item{
  display:flex;align-items:flex-start;gap:14px;
  width:100%;text-align:left;
  padding:14px 16px;border-radius:16px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  color:inherit;cursor:pointer;
  font:inherit;
  transition:background .25s,border-color .25s,transform .25s;
  text-decoration:none;
}
.svc-rotator-item:hover{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.1);
}
.svc-rotator-item.is-active{
  background:rgba(99,102,241,.08);
  border-color:rgba(99,102,241,.28);
  box-shadow:0 0 0 1px rgba(168,85,247,.08);
}
.svc-rotator-item.is-active:hover{transform:none}
.svc-rotator-num{
  flex-shrink:0;
  width:28px;height:28px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;
  font-family:'General Sans',sans-serif;
  color:rgba(240,235,220,.35);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  margin-top:1px;
  transition:color .25s,border-color .25s,background .25s;
}
.svc-rotator-item.is-active .svc-rotator-num{
  color:#fff;
  background:linear-gradient(135deg,#6366f1,#a855f7);
  border-color:transparent;
}
.svc-rotator-body{flex:1;min-width:0}
.svc-rotator-name{
  font-family:'General Sans',sans-serif;
  font-size:15px;font-weight:600;color:rgba(240,235,220,.75);
  letter-spacing:-.02em;margin-bottom:4px;
  transition:color .25s;
}
.svc-rotator-item.is-active .svc-rotator-name{color:#fff}
.svc-rotator-desc{
  font-size:12px;line-height:1.55;color:rgba(240,235,220,.38);
}
.svc-rotator-item.is-active .svc-rotator-desc{color:rgba(240,235,220,.55)}
.svc-rotator-link{
  flex-shrink:0;align-self:center;
  font-size:12px;font-weight:700;color:var(--teal);
  opacity:0;transform:translateX(-4px);
  transition:opacity .25s,transform .25s;
  white-space:nowrap;
}
.svc-rotator-item.is-active .svc-rotator-link{
  opacity:1;transform:translateX(0);
}
.svc-rotator-progress{
  height:2px;margin-top:18px;border-radius:2px;
  background:rgba(255,255,255,.06);overflow:hidden;
}
.svc-rotator-progress-bar{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--teal),#6366f1);
  border-radius:2px;
}
.svc-rotator-progress-bar.is-running{
  animation:svcProgress 4s linear forwards;
}
@keyframes svcProgress{
  from{width:0%}
  to{width:100%}
}

/* ── Pillars section spacing ── */
.pillars-sec{padding:100px 40px}

/* ── Why Quelvora — compact glow/why cards ── */
.why-sec{padding:90px 40px;background:rgba(255,255,255,.012);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.why-layout{
  display:grid;grid-template-columns:1fr 1.15fr;gap:56px;
  align-items:start;max-width:1060px;margin:0 auto;
}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.why-card-wrap{position:relative}
.why-card-glow{
  position:absolute;inset:-2px;border-radius:20px;opacity:.3;
  filter:blur(22px);pointer-events:none;z-index:0;transition:opacity .3s;
}
.why-card-wrap:hover .why-card-glow{opacity:.5}
.why-card{
  position:relative;z-index:2;
  background:linear-gradient(#1A1A1C,#1A1A1C) padding-box,
    linear-gradient(137deg,rgba(255,255,255,.12),rgba(255,255,255,.04)) border-box;
  border:1.5px solid transparent;
  border-radius:18px;padding:24px;
  transition:transform .25s;
  min-height:148px;
}
.why-card-wrap:hover .why-card{transform:translateY(-3px)}
.why-icon{font-size:22px;margin-bottom:12px;line-height:1}
.why-card h3{
  font-size:14px;font-weight:700;margin-bottom:8px;
  font-family:'General Sans',sans-serif;letter-spacing:-.02em;
}
.why-card p{font-size:12px;color:rgba(240,235,220,.42);line-height:1.65}

/* ── Insights teaser ── */
.insights-sec{padding:90px 40px}
.ins-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  max-width:1060px;margin:0 auto;
}
.ins-card-wrap{position:relative;display:block;text-decoration:none;color:inherit}
.ins-card-glow{
  position:absolute;inset:0;border-radius:22px;opacity:.35;
  filter:blur(24px);pointer-events:none;z-index:0;transition:opacity .3s;
}
.ins-card-wrap:hover .ins-card-glow{opacity:.55}
.ins-card{
  position:relative;z-index:2;
  border:1.5px solid transparent;border-radius:20px;overflow:hidden;
  transition:transform .25s;
}
.ins-card-wrap:hover .ins-card{transform:translateY(-3px)}
.ins-thumb{
  height:140px;display:flex;align-items:center;justify-content:center;
  font-size:36px;
}
.ins-body{padding:20px 22px;background:var(--card-bg)}
.ins-cat{
  font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--teal);margin-bottom:8px;
}
.ins-title{
  font-family:'General Sans',sans-serif;
  font-size:15px;font-weight:600;line-height:1.4;margin-bottom:10px;
  letter-spacing:-.02em;
}
.ins-meta{font-size:12px;color:rgba(240,235,220,.35)}
.ins-more{
  display:inline-flex;align-items:center;gap:6px;margin-top:20px;
  font-size:13px;font-weight:600;color:var(--teal);text-decoration:none;
}
.ins-more:hover{text-decoration:underline}

/* Process section */
.process-sec{padding:90px 40px}

/* Homepage CTA video ready opacity */
.home-cta .cta-video.is-ready{opacity:1}

@media(max-width:980px){
  .showcase-layout{grid-template-columns:1fr;gap:36px}
  .showcase-stage{min-height:280px;aspect-ratio:16/10}
  .why-layout{grid-template-columns:1fr;gap:36px}
  .ins-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  .home-hero{padding:40px 24px 0;min-height:auto}
  .home-headline{font-size:clamp(40px,12vw,72px)}
  .home-mq{padding:24px 24px 40px}
  .showcase-sec,.pillars-sec,.why-sec,.insights-sec,.process-sec{padding:72px 24px}
  .why-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .home-hero{padding:32px 20px 0}
  .home-mq,.showcase-sec,.pillars-sec,.why-sec,.insights-sec,.process-sec{padding-left:20px;padding-right:20px}
  .home-proof{letter-spacing:.6px;font-size:11px}
  .svc-rotator-link{display:none}
}

@media (prefers-reduced-motion: reduce){
  .showcase-stage-glow{animation:none}
  .svc-rotator-progress-bar,.svc-rotator-progress-bar.is-running{animation:none;width:100%}
  .home-hero-bg .bg-video.is-ready.is-active{opacity:.45 !important}
  .showcase-stage .showcase-video.is-ready.is-active{opacity:.75 !important}
  .why-card-wrap:hover .why-card,
  .ins-card-wrap:hover .ins-card{transform:none !important}
}

/* ── Dual video crossfade layers (single strategy) ── */
.home-hero-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  min-height:100%;
  background:radial-gradient(ellipse 70% 55% at 50% 30%, rgba(99,102,241,.28), transparent 60%),
             radial-gradient(ellipse 50% 40% at 80% 70%, rgba(168,85,247,.18), transparent 55%),
             #0a0a0b; /* poster fallback if video fails */
}
.home-hero-bg .video-poster{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 30%, rgba(99,102,241,.32), transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 70%, rgba(168,85,247,.2), transparent 55%),
    linear-gradient(180deg,#12121a 0%,#0a0a0b 100%);
}
.home-hero-bg .bg-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1s ease;z-index:0;
}
/* Active ready video visible; ready-but-idle stays hidden for crossfade */
.home-hero-bg .bg-video.is-ready:not(.is-active){opacity:0}
.home-hero-bg .bg-video.is-ready.is-active{opacity:.5}

.showcase-stage{position:relative;overflow:hidden;min-height:420px;aspect-ratio:4/5;max-height:560px}
.showcase-stage .video-poster{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 60% 50% at 40% 40%, rgba(99,102,241,.35), transparent 65%),
    linear-gradient(160deg,#14141c,#0a0a0b);
}
.showcase-stage .showcase-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .85s ease;z-index:1;
}
.showcase-stage .showcase-video.is-ready:not(.is-active){opacity:0}
.showcase-stage .showcase-video.is-ready.is-active{opacity:.85}
.showcase-stage .showcase-stage-shade,
.showcase-stage .showcase-label{position:relative;z-index:2}

/* ── Hero services banner strip ── */
.hero-svc-banner{
  margin-top:40px;
  max-width:520px;
  width:100%;
  padding:18px 22px;
  border-radius:18px;
  background:rgba(26,26,28,.55);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  text-align:left;
  box-shadow:0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
.hero-svc-kicker{
  display:block;
  font-size:10px;
  font-weight:700;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--teal);
  margin-bottom:8px;
}
.hero-svc-name{
  display:block;
  font-family:'General Sans',Inter,sans-serif;
  font-size:clamp(1.15rem,2.2vw,1.45rem);
  font-weight:600;
  letter-spacing:-.02em;
  margin-bottom:6px;
}
.hero-svc-desc{
  display:block;
  font-size:13px;
  line-height:1.55;
  color:rgba(240,235,220,.55);
  margin-bottom:8px;
}

.hero-svc-open{
  display:inline-block;
  margin:0 0 12px;
  font-size:13px;
  font-weight:600;
  color:var(--teal);
  text-decoration:none;
  letter-spacing:.01em;
  transition:opacity .2s, color .2s;
}
.hero-svc-open:hover{opacity:.85;color:#5eead4}
.hero-svc-open[hidden]{display:none!important}
.hero-svc-dots{display:flex;gap:8px;align-items:center}
.hero-svc-dot{
  width:8px;height:8px;border-radius:50%;
  border:none;padding:0;cursor:pointer;
  background:rgba(255,255,255,.2);
  transition:transform .2s, background .2s, box-shadow .2s;
}
.hero-svc-dot.is-active{
  background:var(--teal);
  transform:scale(1.25);
  box-shadow:0 0 12px rgba(0,201,167,.55);
}
.hero-svc-dot:hover{background:rgba(0,201,167,.65)}

@media (max-width:600px){
  .hero-svc-banner{margin-top:28px;padding:16px 18px}
}
@media (prefers-reduced-motion: reduce){
  .home-hero-bg .bg-video,
  .showcase-stage .showcase-video{transition:none}
}