/* ============================================================
   home.css - homepage + landing layout (hero 3D stage, stats,
   product/ROI, gallery, downloads, FAQ, contact). Load LAST.
   ============================================================ */

/******** Hero ********/
.hero{
  padding-top:120px;padding-bottom:110px;
  background:
    radial-gradient(circle at 18% 30%, rgba(6,182,212,0.16) 0%, transparent 52%),
    radial-gradient(circle at 85% 80%, rgba(6,182,212,0.08) 0%, transparent 50%),
    var(--bg);
}
.hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:48px;align-items:center}
.eyebrow{margin-bottom:10px}
.hero .display{margin-bottom:8px}
.hero-tagline{font-size:clamp(18px,2.2vw,24px);font-weight:600;color:var(--muted);line-height:1.3;margin:0 0 18px}
.hero .lead{margin-top:0}

/* 3D stage / static poster */
.hero-stage{
  aspect-ratio:4/3;width:100%;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-lg), 0 0 40px rgba(8,145,178,0.10);
  background:radial-gradient(circle at 50% 38%, rgba(8,145,178,.10), transparent 60%), #eaf2f6;
}
.hero-badge{
  position:absolute;left:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;color:var(--fg-bright);background:rgba(255,255,255,.75);
  border:1px solid var(--line-bright);border-radius:100px;padding:7px 12px;backdrop-filter:blur(6px);
}
.hero-badge::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--brand-light);box-shadow:0 0 10px var(--brand-light)}

.feature-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:36px}

/******** Stats band ********/
.stats-band{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:48px 0}
.stat{text-align:center}
.stat__num{
  font-size:clamp(34px,5vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1;
  background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.stat__label{margin-top:10px;color:var(--muted);font-size:14px;font-weight:500}

/******** Product / ROI ********/
.roi{background:var(--gradient-accent);border:2px solid var(--brand);box-shadow:var(--shadow), var(--glow)}
.roi h3{font-size:20px;margin:0 0 16px;color:var(--fg-bright)}
.roi .kv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:16px 0 12px}
.roi .kv-grid > div{background:var(--bg-card);padding:12px;border-radius:12px;border:1px solid rgba(6,182,212,0.3);transition:all .2s ease}
.roi .kv-grid > div:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(6,182,212,0.3);border-color:var(--brand)}
.kv-label{display:block;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.kv-value{display:block;font-weight:700;letter-spacing:-.01em;color:var(--brand-light);font-size:18px}

/******** Lazy video gallery (Deployments) ********/
.video-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:8px}
.media{
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-bright);box-shadow:var(--shadow);
  transition:all .3s cubic-bezier(0.4,0,0.2,1);position:relative;background:var(--bg-elevated);margin:0;
}
.media:hover{transform:scale(1.01);box-shadow:var(--shadow-lg), 0 0 30px rgba(6,182,212,0.25);border-color:var(--brand)}
.media video{height:18rem;object-fit:cover;width:100%;background:var(--bg-elevated)}
.media figcaption{padding:12px 16px;color:var(--muted);font-size:14px;border-top:1px solid var(--line)}
.media .video-shell{position:relative;display:block;width:100%;height:18rem;cursor:pointer;background-color:var(--bg-elevated);background-size:cover;background-position:center}
.media .video-shell::before{
  content:'';position:absolute;inset:0;pointer-events:none;transition:background .3s ease;
  background:linear-gradient(180deg, rgba(10,14,26,.12) 0%, rgba(10,14,26,.45) 100%);
}
.media:hover .video-shell::before{background:linear-gradient(180deg, rgba(10,14,26,.04) 0%, rgba(10,14,26,.3) 100%)}
.media .video-shell::after{
  content:'\25B6';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:42px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.55);pointer-events:none;transition:transform .2s ease;
}
.media:hover .video-shell::after{transform:scale(1.08)}
.media .video-shell.playing::before,
.media .video-shell.playing::after{display:none}

/******** Downloads ********/
.downloads-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.download-card{display:flex;flex-direction:column;gap:12px}
.download-top{display:flex;gap:12px;align-items:flex-start}
.download-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(8,145,178,0.08);border:1px solid var(--line);font-size:20px;flex:0 0 auto}
.download-title{margin:0}
.download-meta{margin:4px 0 0;opacity:.75;font-size:.95rem;color:var(--muted)}
.download-desc{margin:0;opacity:.9;color:var(--muted)}
.download-cta{display:flex;gap:10px;margin-top:auto;flex-wrap:wrap}

/******** FAQ ********/
.faq h3{margin:26px 0 8px;font-size:18px;color:var(--fg-bright)}
.faq p{margin:0 0 6px;color:var(--muted);max-width:70ch}

/******** Contact ********/
#contact{background:radial-gradient(circle at 80% 20%, rgba(6,182,212,0.1) 0%, transparent 50%), var(--bg)}

/******** Responsive ********/
@media (max-width: 1080px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .hero-stage{max-width:620px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
  .downloads-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{padding-top:96px;padding-bottom:80px}
}
@media (max-width: 760px){
  .feature-cards{grid-template-columns:1fr}
  .video-gallery{grid-template-columns:1fr}
  .roi .kv-grid{grid-template-columns:1fr}
  .downloads-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr;padding:36px 0}
}

/******** Cinematic hero ********/
.cine-hero{
  position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;isolation:isolate;color:#fff;
  background:
    radial-gradient(1000px 720px at 80% 16%, rgba(34,211,238,.22), transparent 60%),
    radial-gradient(820px 620px at 12% 92%, rgba(251,191,36,.12), transparent 60%),
    linear-gradient(180deg, #05080f 0%, #0a1426 52%, #0c1a33 100%);
}
.cine-hero__canvas{position:absolute;inset:0;z-index:1}
.cine-hero__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.42;filter:saturate(.9) brightness(.85)}
.cine-hero.is-3d .cine-hero__poster{opacity:.16;transition:opacity 1.2s ease}
.cine-hero__scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(5,8,15,.94) 0%, rgba(5,8,15,.66) 38%, rgba(5,8,15,.15) 66%, transparent 82%),
    linear-gradient(0deg, rgba(5,8,15,.8) 0%, transparent 34%);}
.cine-hero__content{position:relative;z-index:3;width:100%;padding-top:calc(var(--header-h) + 56px);padding-bottom:72px}
.cine-hero__inner{max-width:780px}
.cine-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-light);margin:0 0 24px}
.cine-eyebrow::before{content:'';width:28px;height:2px;background:var(--brand-light);box-shadow:0 0 12px var(--brand-light)}
.cine-title{font-family:var(--font-display);font-size:clamp(46px,7.4vw,104px);font-weight:700;line-height:.96;letter-spacing:-.035em;color:#fff;margin:0 0 24px;max-width:15ch}
.cine-title .accent{color:var(--brand-light)}
.cine-sub{font-size:clamp(17px,1.55vw,22px);line-height:1.6;color:rgba(255,255,255,.82);max-width:38rem;margin:0 0 34px}
.cine-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn--lg{padding:17px 34px;font-size:16px;border-radius:14px}
.btn--ghost{background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.28);box-shadow:none}
.btn--ghost::before{display:none}
.btn--ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;box-shadow:none}
.cine-stats{display:flex;gap:44px;flex-wrap:wrap;margin-top:50px}
.cine-stat__num{font-size:clamp(28px,3vw,40px);font-weight:800;color:#fff;line-height:1;letter-spacing:-.02em}
.cine-stat__label{font-size:13px;color:rgba(255,255,255,.6);margin-top:8px}
.cine-scroll{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:3;color:rgba(255,255,255,.55);font-size:11px;letter-spacing:.18em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:10px}
.cine-scroll::after{content:'';width:1px;height:36px;background:linear-gradient(rgba(255,255,255,.7),transparent);animation:scrollPulse 1.8s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{opacity:.25;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}
/* While the hero is pinned, JS scrubs these inline (opacity/transform) each
   frame; hint the compositor and never let a CSS transition fight the scrub. */
.cine-hero.is-pinned .cine-hero__inner{will-change:transform,opacity}
.cine-hero.is-pinned .cine-scroll{will-change:opacity}
.value-band{padding-top:72px;padding-bottom:24px}
@media (max-width:1080px){
  .cine-title{font-size:clamp(40px,8vw,72px)}
  .cine-hero__scrim{background:linear-gradient(0deg, rgba(5,8,15,.92) 0%, rgba(5,8,15,.55) 55%, rgba(5,8,15,.25) 100%)}
}
@media (max-width:760px){
  .cine-hero{min-height:88vh}
  .cine-stats{gap:26px;margin-top:36px}
  .cine-scroll{display:none}
}

/******** Cinematic "stage" bands (dark accents on the light page) ********/
.band{position:relative;isolation:isolate}
.band--dark{
  color:#dbe6f2;
  background:
    radial-gradient(900px 620px at 84% 6%, rgba(34,211,238,.16), transparent 60%),
    radial-gradient(760px 540px at 6% 102%, rgba(251,191,36,.08), transparent 60%),
    linear-gradient(180deg,#070b14 0%, #0a1426 58%, #0b1830 100%);
}
.band--dark::before{content:'';position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(34,211,238,.35),transparent);z-index:1}
.band--dark h2{color:#fff}
.band--dark h3{color:#fff}
.band--dark h4{color:#fff}
.band--dark .eyebrow{color:#5fd4ec}
.band--dark .lead{color:rgba(255,255,255,.74)}
.band--dark p{color:rgba(255,255,255,.72)}
.band--dark .note{color:rgba(255,255,255,.55)}
/* Cards become dark "glass" on dark bands (subtle, integrated, with cyan glow on hover). */
.band--dark .card{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.1);box-shadow:0 14px 40px rgba(0,0,0,.4)}
.band--dark .card:hover{border-color:rgba(34,211,238,.5);box-shadow:0 18px 48px rgba(0,0,0,.5),0 0 26px rgba(34,211,238,.18)}
.band--dark .card h3,.band--dark .card h4{color:#fff}
.band--dark .card p{color:rgba(255,255,255,.7)}
.band--dark .card.mini.outline{background:rgba(255,255,255,.03);border:2px dashed rgba(255,255,255,.2)}
.band--dark .card.mini.outline:hover{border-color:rgba(34,211,238,.55);background:rgba(34,211,238,.05)}
.band--dark .bullets li,.band--dark .checklist li{color:rgba(255,255,255,.78)}
/* Video gallery reads like a screening room on the dark band. */
.band--dark .media{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.03);box-shadow:0 18px 50px rgba(0,0,0,.55)}
.band--dark .media:hover{border-color:rgba(34,211,238,.5);box-shadow:0 22px 60px rgba(0,0,0,.6),0 0 34px rgba(34,211,238,.22)}
.band--dark figcaption{color:rgba(255,255,255,.62)}

/******** "How it works" section ********/
.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.how-copy .lead{margin-bottom:30px}
.how-axes{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.how-axis{display:flex;gap:18px;align-items:flex-start;padding:18px 20px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.03);transition:border-color .25s ease,background .25s ease}
.how-axis:hover{border-color:rgba(34,211,238,.45);background:rgba(34,211,238,.06)}
.how-axis__no{flex:0 0 auto;font-size:14px;font-weight:700;letter-spacing:.04em;color:#0a1426;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--gradient-brand);box-shadow:var(--glow)}
.how-axis h3{margin:0 0 4px;font-size:18px}
.how-axis p{margin:0;font-size:15px;line-height:1.6}
.how-figure{position:relative}
.axis-diagram{display:block;width:100%;height:auto;max-width:560px;margin:0 auto;
  filter:drop-shadow(0 18px 50px rgba(0,0,0,.45)) drop-shadow(0 0 28px rgba(34,211,238,.12))}
@media (max-width:1080px){
  .how-grid{grid-template-columns:1fr;gap:40px}
  .how-figure{order:-1}
  .axis-diagram{max-width:460px}
}

/******** Word-by-word heading reveal ********/
.split-line{overflow:hidden}
.split-word{display:inline-block;will-change:transform}