/* ============================================================
   CINEMATECHS AI — Homepage Variant "C" (Phenomenon-style)
   Long motion-rich scroll. Reuses tokens + nav/footer/belt/buttons
   from styles.css. Brand locked. Built per ui-ux-pro-max rules.
   ============================================================ */

/* Lenis smooth-scroll requirement */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

.v3 section { padding-block: clamp(4.5rem, 3rem + 9vw, 10rem); }
.v3 .section-label { display:flex; align-items:center; gap:0.8em; font-size:0.72rem; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--text-faint); margin-bottom:var(--space-4); }
.v3 .section-label::before { content:""; width:2em; height:1px; background:var(--accent); }
.v3 h2 { font-size: clamp(2.2rem, 1.4rem + 4vw, 5rem); letter-spacing:-0.035em; line-height:0.98; }
.v3 h2 .script { font-style:italic; font-weight:300; }

/* ---------- HERO ---------- */
.v3-hero { position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; padding-bottom:clamp(3rem,6vw,6rem); }
.v3-hero__media { position:absolute; inset:0; z-index:-1; background:#0c0c0e; }
.v3-hero__media video { width:100%; height:100%; object-fit:cover; }
.v3-hero__media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,11,12,0.5) 0%, transparent 32%, rgba(11,11,12,0.92) 100%), linear-gradient(70deg, rgba(11,11,12,0.6), transparent 55%); }
.v3-hero__inner { position:relative; z-index:2; width:100%; }
.v3-hero h1 { font-size: clamp(3rem, 1.6rem + 8vw, 9rem); line-height:0.92; letter-spacing:-0.045em; font-weight:600; text-shadow:0 2px 40px rgba(0,0,0,0.5); max-width:14ch; }
.v3-hero h1 .script { font-style:italic; font-weight:300; display:block; }
.v3-hero__sub { font-size: clamp(1.1rem,1rem+0.6vw,1.5rem); color:var(--text-dim); max-width:46ch; margin-top:var(--space-4); text-shadow:0 1px 20px rgba(0,0,0,0.5); }
.v3-hero__ctas { display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-5); }
.v3-hero__reel { position:absolute; right:var(--gutter); bottom:clamp(3rem,6vw,6rem); z-index:3; display:inline-flex; align-items:center; gap:0.7em; background:rgba(11,11,12,0.5); border:1px solid var(--hairline-strong); color:var(--text); border-radius:100px; padding:0.6em 1.05em; font-size:0.7rem; letter-spacing:0.16em; text-transform:uppercase; cursor:pointer; backdrop-filter:blur(8px); }
.v3-hero__reel:hover { border-color:var(--text); }
@media (max-width:860px){ .v3-hero__reel{display:none;} }

/* ---------- STATS ---------- */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4); border-block:1px solid var(--hairline); }
.stat { display:flex; flex-direction:column; gap:0.4em; }
.stat__num { font-family:var(--font-display); font-weight:600; font-size:clamp(2.4rem,1.6rem+3vw,4.4rem); letter-spacing:-0.04em; line-height:1; color:var(--text); }
.stat__num .unit { color:var(--accent-soft); }
.stat__label { font-size:0.82rem; color:var(--text-dim); letter-spacing:0.02em; max-width:22ch; }
@media (max-width:760px){ .stats{ grid-template-columns:repeat(2,1fr); gap:var(--space-5);} }

/* ---------- FEATURED CASES ---------- */
.cases__head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:var(--space-4); margin-bottom:var(--space-5); }
.cases__grid { display:grid; gap:clamp(1rem,0.6rem+1.5vw,2rem); }
.case { position:relative; display:block; border-radius:14px; overflow:hidden; border:1px solid var(--hairline); aspect-ratio:16/9; text-decoration:none; color:inherit; }
.case img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 0.9s var(--ease), filter 0.6s var(--ease); filter:saturate(0.92); }
.case::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(11,11,12,0.9)); }
.case__meta { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(1.3rem,1rem+1.5vw,2.4rem); }
.case__cat { font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent-soft); }
.case__title { font-family:var(--font-display); font-weight:600; font-size:clamp(1.5rem,1.1rem+1.6vw,2.6rem); letter-spacing:-0.025em; margin-top:0.15em; }
.case__tags { display:flex; gap:0.5em; flex-wrap:wrap; margin-top:var(--space-3); opacity:0; transform:translateY(10px); transition:opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.case__tags span { font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-dim); border:1px solid var(--hairline-strong); border-radius:100px; padding:0.3em 0.7em; }
.case:hover img { transform:scale(1.05); filter:saturate(1.05); }
.case:hover .case__tags { opacity:1; transform:none; }
.case:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media (min-width:900px){ .cases__grid{ grid-template-columns:1fr 1fr; } .case--wide{ grid-column:1 / -1; aspect-ratio:21/9; } }

/* ---------- SERVICES TABS ---------- */
.svc { display:grid; gap:var(--space-5); }
@media (min-width:900px){ .svc{ grid-template-columns:0.8fr 1.2fr; align-items:start; } }
.svc__tabs { display:flex; flex-direction:column; gap:0; border-left:1px solid var(--hairline); }
.svc__tab { background:none; border:0; border-left:2px solid transparent; margin-left:-1px; text-align:left; cursor:pointer; padding:1.1em 1.2em; color:var(--text-faint); font-family:var(--font-display); font-weight:500; font-size:clamp(1.2rem,1rem+1vw,1.9rem); letter-spacing:-0.02em; transition:color 0.3s var(--ease), border-color 0.3s var(--ease); }
.svc__tab:hover { color:var(--text-dim); }
.svc__tab.is-active { color:var(--text); border-left-color:var(--accent); }
.svc__tab:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.svc__panels { position:relative; }
.svc__panel { display:none; }
.svc__panel.is-active { display:block; animation:v3fade 0.5s var(--ease-out); }
@keyframes v3fade { from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;} }
.svc__panel .num { font-size:0.8rem; letter-spacing:0.1em; color:var(--accent-soft); font-weight:600; }
.svc__panel h3 { font-size:clamp(1.6rem,1.2rem+1.4vw,2.4rem); letter-spacing:-0.025em; margin:0.4em 0; }
.svc__panel p { color:var(--text-dim); font-size:1.05rem; line-height:1.7; max-width:54ch; }
.svc__panel ul { list-style:none; padding:0; margin-top:var(--space-4); display:grid; gap:0.7em; }
.svc__panel li { color:var(--text-dim); display:flex; gap:0.7em; align-items:baseline; }
.svc__panel li::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); flex:0 0 auto; transform:translateY(-2px); }

/* ---------- INDUSTRIES ---------- */
.inds { display:grid; gap:var(--space-3); grid-template-columns:repeat(auto-fit, minmax(min(100%,260px),1fr)); }
.ind { border:1px solid var(--hairline); border-radius:12px; padding:clamp(1.4rem,1rem+1.5vw,2.2rem); background:linear-gradient(180deg,var(--surface-1),transparent); transition:border-color 0.4s var(--ease), transform 0.5s var(--ease); }
.ind:hover { border-color:var(--hairline-strong); transform:translateY(-4px); }
.ind h3 { font-size:1.3rem; letter-spacing:-0.01em; margin-bottom:var(--space-2); }
.ind p { color:var(--text-dim); font-size:0.95rem; line-height:1.6; }

/* ---------- WHY US ---------- */
.why { display:grid; gap:var(--space-5); }
@media (min-width:900px){ .why{ grid-template-columns:repeat(2,1fr); } }
.why__item { display:flex; gap:var(--space-3); padding-top:var(--space-4); border-top:1px solid var(--hairline); }
.why__num { font-size:0.78rem; color:var(--accent-soft); font-weight:600; letter-spacing:0.08em; }
.why__item h3 { font-size:1.4rem; letter-spacing:-0.02em; margin-bottom:0.4em; }
.why__item p { color:var(--text-dim); line-height:1.65; }

/* ---------- TESTIMONIALS ---------- */
.testi { overflow:hidden; }
.testi__viewport { overflow:hidden; }
.testi__track { display:flex; transition:transform 0.7s var(--ease); }
.testi__slide { flex:0 0 100%; padding-right:var(--gutter); }
.testi__quote { font-family:var(--font-display); font-weight:300; font-style:italic; font-size:clamp(1.5rem,1.1rem+2vw,3rem); line-height:1.25; letter-spacing:-0.02em; color:var(--text); max-width:24ch; }
.testi__by { margin-top:var(--space-4); font-size:0.9rem; color:var(--text-dim); }
.testi__by strong { color:var(--text); font-weight:600; }
.testi__nav { display:flex; gap:0.6em; margin-top:var(--space-5); }
.testi__dot { width:9px; height:9px; border-radius:50%; border:1px solid var(--hairline-strong); background:none; cursor:pointer; padding:0; transition:background-color 0.3s var(--ease), border-color 0.3s var(--ease); }
.testi__dot.is-active { background:var(--accent); border-color:var(--accent); }
.testi__dot:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

/* ---------- CLOSING CTA ---------- */
.v3-cta { text-align:center; position:relative; overflow:hidden; }
.v3-cta::before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 120% at 50% 120%, var(--accent-wash), transparent 70%); }
.v3-cta h2 { max-width:18ch; margin-inline:auto; }
.v3-cta .lede { margin:var(--space-4) auto var(--space-5); max-width:44ch; }

/* ---------- FUNNEL FORK HERO (home) ---------- */
.fork-hero { padding-top: calc(var(--nav-h) + clamp(2.5rem,7vw,6rem)); padding-bottom: clamp(3rem,6vw,6rem); }
.fork-hero h1 { font-size: clamp(2.8rem,1.6rem+5vw,6rem); line-height:0.95; letter-spacing:-0.04em; max-width:16ch; }
.fork-hero h1 .script { font-style:italic; font-weight:300; }
.fork-hero .v3-hero__sub { max-width:54ch; }
.fork { display:grid; gap:var(--space-4); margin-top:var(--space-6); }
@media (min-width:880px){ .fork{ grid-template-columns:1fr 1fr; } }
.fork__card { position:relative; display:flex; flex-direction:column; gap:var(--space-3); border:1px solid var(--hairline); border-radius:18px; padding:clamp(1.8rem,1.2rem+3vw,3.2rem); min-height:clamp(19rem,16rem+12vw,27rem); text-decoration:none; color:inherit; overflow:hidden; background:linear-gradient(180deg,var(--surface-1),transparent); transition:border-color .4s var(--ease), transform .5s var(--ease); }
.fork__card:hover { border-color:var(--accent); transform:translateY(-5px); }
.fork__card:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.fork__card::after { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(80% 100% at 100% 0%, var(--accent-wash), transparent 60%); opacity:0; transition:opacity .5s var(--ease); }
.fork__card:hover::after { opacity:1; }
.fork__tag { font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent-soft); }
.fork__card h2 { font-size:clamp(1.8rem,1.3rem+2.4vw,3rem); letter-spacing:-0.03em; line-height:1; }
.fork__card h2 .script { font-style:italic; font-weight:300; }
.fork__card p { color:var(--text-dim); line-height:1.6; max-width:38ch; }
.fork__list { list-style:none; display:flex; flex-wrap:wrap; gap:0.5em; padding:0; }
.fork__list li { font-size:0.72rem; letter-spacing:0.04em; color:var(--text-dim); border:1px solid var(--hairline-strong); border-radius:100px; padding:0.3em 0.7em; }
.fork__go { margin-top:auto; display:inline-flex; align-items:center; gap:0.5em; font-weight:600; color:var(--text); }
.fork__card:hover .fork__go { color:var(--accent-soft); }
@media (prefers-reduced-motion: reduce){ .fork__card{ transition:none; } }

/* sample data badge */
.sample-tag { font-size:0.58rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--text-faint); border:1px solid var(--hairline); border-radius:100px; padding:0.25em 0.6em; vertical-align:middle; margin-left:0.6em; }

/* A/B ribbon */
.ab-ribbon { position:fixed; bottom:14px; left:14px; z-index:300; background:var(--accent); color:var(--paper); font-size:0.66rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; padding:0.5em 0.9em; border-radius:100px; box-shadow:var(--shadow-accent); }
.ab-ribbon a { color:var(--paper); text-decoration:underline; text-underline-offset:2px; margin-left:0.5em; font-weight:600; }

@media (prefers-reduced-motion: reduce){
  .case img, .case__tags, .svc__panel, .testi__track { transition:none; animation:none; }
}