/* ============ SuperKal scroll-film homepage ============ */
:root{
  --purple:#7C3AED; --purple-mid:#8B5CF6; --purple-deep:#5B21B6;
  --green:#10B981; --pink:#EC4899;
  --bg:#FAFAFA; --ink:#1F2937; --ink-2:#6B7280;
  --lavender:#F3E8FF; --lav-border:#E9D5FF;
  --void:#14062B;
  --ease-out:cubic-bezier(.22,.61,.2,1);
  --shadow-purple:0 8px 32px rgba(124,58,237,.15);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{
  font-family:'Heebo',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(16px,4vw,44px);
  color:#fff;
  transition:color .35s ease;
  pointer-events:none;
}
.site-header::before{
  content:""; position:absolute; inset:0 0 auto 0; height:190%; z-index:-1;
  background:linear-gradient(to bottom, rgba(10,4,24,.58), rgba(10,4,24,0));
  opacity:1; transition:opacity .35s ease;
  pointer-events:none;
}
.site-header.on-light{ color:var(--ink); }
.site-header.on-light::before{ opacity:0; }
.brand{display:flex;align-items:center;gap:10px;pointer-events:auto}
.brand-mark{filter:drop-shadow(0 1px 10px rgba(0,0,0,.45));border-radius:10px;display:block}
.on-light .brand-mark{filter:drop-shadow(0 2px 8px rgba(124,58,237,.25))}
.brand-word{
  font-weight:900; font-size:1.35rem; letter-spacing:-.01em;
  text-shadow:0 1px 22px rgba(0,0,0,.55);
}
.on-light .brand-word{ text-shadow:none; }
.header-cta{
  pointer-events:auto;
  font-weight:700; font-size:.95rem;
  padding:9px 20px; border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,var(--purple-mid),var(--purple),var(--purple-deep));
  box-shadow:0 4px 18px rgba(124,58,237,.45);
  border:1px solid rgba(255,255,255,.25);
  transition:transform .2s var(--ease-out), box-shadow .2s;
}
.header-cta:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(124,58,237,.55)}

/* ---------- loader ---------- */
.loader{
  position:fixed; inset:0; z-index:90;
  background:linear-gradient(160deg,#2A1352,var(--void));
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s ease, visibility .6s;
}
.loader.done{opacity:0;visibility:hidden}
.loader-inner{text-align:center}
.loader-word{
  color:#fff; font-weight:900; font-size:2rem; letter-spacing:.02em; margin-bottom:18px;
}
.loader-bar{
  width:min(260px,60vw); height:4px; border-radius:99px;
  background:rgba(255,255,255,.14); overflow:hidden;
}
.loader-fill{
  height:100%; width:0%; border-radius:99px;
  background:linear-gradient(90deg,var(--purple-mid),var(--pink));
  transition:width .25s ease;
}

/* ---------- film stage ---------- */
.film-scroll{ height:850vh; position:relative; background:var(--void); }
.film-stage{
  position:sticky; top:0; height:100vh; height:100dvh;
  overflow:hidden; background:var(--void);
}
.film-poster{
  position:absolute; inset:0; width:100%; height:100%; z-index:1;
  background-image:url('/frames/f_0001.jpg');
  background-size:cover; background-position:center;
}
@media (max-width:768px){
  .film-poster{ background-image:url('/frames-m/f_0001.jpg'); }
}
#filmCanvas{
  position:absolute; inset:0; width:100%; height:100%; z-index:2; opacity:0;
  transition:opacity .4s ease;
}
#filmCanvas.live{opacity:1}
.film-grain{
  position:absolute; inset:-60px; z-index:3; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
}
.film-vignette{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(8,3,18,.5) 100%);
}
.bottom-fade{
  position:absolute; inset:auto 0 0 0; height:34vh; z-index:4; pointer-events:none;
  background:linear-gradient(to bottom, rgba(250,250,250,0), var(--bg));
  opacity:0;
}

/* ---------- beats ---------- */
.beats{position:absolute; inset:0; z-index:5; pointer-events:none;}
.beat{
  position:absolute; opacity:0; will-change:opacity,transform;
  pointer-events:none;
}
.beat.active{pointer-events:auto}
.beat::before{
  content:""; position:absolute; z-index:-1; inset:-55% -30% -55% -30%;
  background:radial-gradient(58% 55% at 50% 50%, rgba(10,3,24,.62), rgba(10,3,24,.34) 48%, transparent 76%);
}
.beat-hero{
  top:16%; right:0; left:0; text-align:center; padding:0 6vw;
}
.beat-hero h1{
  color:#fff; font-weight:900;
  font-size:clamp(2.1rem,5.6vw,4.4rem);
  line-height:1.12; letter-spacing:-.015em;
  text-shadow:0 2px 30px rgba(0,0,0,.45);
}
.grad-light{
  background:linear-gradient(100deg,#C4B5FD,#EDE9FE 55%,#A7F3D0);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.beat-hero p{
  color:rgba(255,255,255,.92); font-size:clamp(1.05rem,2vw,1.4rem);
  margin-top:18px; font-weight:500; text-shadow:0 1px 16px rgba(0,0,0,.5);
}
.beat-tags{display:flex;gap:10px;justify-content:center;margin-top:26px;flex-wrap:wrap}
.beat-tags span{
  color:#fff; font-size:.92rem; font-weight:600;
  padding:7px 16px; border-radius:999px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(6px);
}
.beat-side{
  top:50%; transform:translateY(-50%);
  right:clamp(20px,7vw,110px); max-width:min(480px,82vw);
  text-align:right;
}
.beat-side h2{
  color:#fff; font-weight:900;
  font-size:clamp(1.7rem,3.6vw,2.9rem);
  line-height:1.15; letter-spacing:-.01em;
  text-shadow:0 2px 26px rgba(0,0,0,.5);
}
.beat-side p{
  color:rgba(255,255,255,.9); font-size:clamp(1rem,1.7vw,1.25rem);
  margin-top:14px; font-weight:400; line-height:1.55;
  text-shadow:0 1px 14px rgba(0,0,0,.5);
}
.beat-finale{
  top:12%; right:0; left:0; text-align:center; padding:0 6vw;
}
.beat-finale::before{
  background:radial-gradient(60% 58% at 50% 50%, rgba(250,250,250,.75), rgba(250,250,250,.35) 50%, transparent 78%);
}
.beat-finale h2{
  color:var(--ink); font-weight:900;
  font-size:clamp(2rem,4.8vw,3.9rem); line-height:1.14; letter-spacing:-.015em;
}
.grad-dark{
  background:linear-gradient(120deg,var(--purple),var(--purple-mid) 55%,var(--purple-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.finale-sub{color:var(--ink-2);font-weight:600;margin-top:16px;font-size:1.05rem}

/* CTA */
.cta-primary{
  display:inline-block; margin-top:28px;
  font-weight:800; font-size:clamp(1.05rem,2vw,1.3rem);
  color:#fff; padding:16px 44px; border-radius:999px;
  background:linear-gradient(135deg,var(--purple-mid),var(--purple) 50%,var(--purple-deep));
  box-shadow:0 10px 34px rgba(124,58,237,.45), inset 0 1px 0 rgba(255,255,255,.28);
  position:relative; overflow:hidden;
  transition:transform .22s var(--ease-out), box-shadow .22s;
}
.cta-primary::after{
  content:""; position:absolute; top:0; bottom:0; width:44%;
  left:-60%; transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
  transition:left .55s ease;
}
.cta-primary:hover{transform:translateY(-3px);box-shadow:0 16px 44px rgba(124,58,237,.55), inset 0 1px 0 rgba(255,255,255,.28)}
.cta-primary:hover::after{left:120%}
.cta-primary:active{transform:translateY(-1px)}

/* ---------- chapter readout ---------- */
.chapter-readout{
  position:absolute; z-index:6; bottom:26px; right:clamp(16px,4vw,44px);
  display:flex; flex-direction:column; align-items:flex-end; gap:7px;
  color:#fff; opacity:0; transition:opacity .5s ease;
}
.chapter-readout.show{opacity:1}
.chapter-label{
  font-size:.82rem; font-weight:600; letter-spacing:.04em;
  color:rgba(255,255,255,.85); text-shadow:0 1px 10px rgba(0,0,0,.6);
}
.chapter-bar{
  width:130px; height:3px; border-radius:99px;
  background:rgba(255,255,255,.22); overflow:hidden;
}
.chapter-fill{
  height:100%; width:0%; border-radius:99px;
  background:linear-gradient(90deg,var(--green),var(--purple-mid));
}
.chapter-readout.dark .chapter-label{color:var(--ink-2);text-shadow:none}
.chapter-readout.dark .chapter-bar{background:rgba(31,41,55,.15)}

/* ---------- scroll hint ---------- */
.scroll-hint{
  position:absolute; z-index:6; bottom:24px; left:50%;
  transform:translateX(-50%); color:rgba(255,255,255,.85);
  animation:hintFloat 2s ease-in-out infinite;
  transition:opacity .4s ease;
}
@keyframes hintFloat{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ---------- content sections ---------- */
.section{
  min-height:min(92vh,900px);
  display:flex; align-items:center;
  padding:clamp(60px,9vh,110px) clamp(20px,6vw,72px);
}
.section .wrap{max-width:1120px;margin:0 auto;width:100%}
.section .wrap > *{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.section.in .wrap > *{opacity:1;transform:none}
.section.in .wrap > *:nth-child(2){transition-delay:.09s}
.section.in .wrap > *:nth-child(3){transition-delay:.18s}
.section.in .wrap > *:nth-child(4){transition-delay:.27s}

.sec-title{
  font-weight:900; font-size:clamp(1.9rem,4vw,3.1rem);
  letter-spacing:-.015em; text-align:center; line-height:1.15;
}
.sec-sub{
  color:var(--ink-2); text-align:center; font-size:clamp(1rem,1.8vw,1.25rem);
  margin-top:12px; font-weight:500;
}

/* features */
.section-features{background:var(--bg)}
.feature-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:22px; margin-top:52px;
}
.feature-card{
  background:#fff; border:1px solid var(--lav-border); border-radius:20px;
  padding:34px 28px; text-align:center;
  box-shadow:var(--shadow-purple);
  transition:transform .3s var(--ease-out), box-shadow .3s;
}
.feature-card:hover{transform:translateY(-6px);box-shadow:0 16px 44px rgba(124,58,237,.22)}
.feature-icon{
  width:64px;height:64px;border-radius:18px;margin:0 auto 18px;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,var(--purple-mid),var(--purple-deep));
  box-shadow:0 6px 18px rgba(124,58,237,.35);
}
.feature-card h3{font-weight:800;font-size:1.3rem;margin-bottom:8px}
.feature-card p{color:var(--ink-2);line-height:1.55}

/* proof */
.section-proof{background:linear-gradient(180deg,var(--bg),#F6F1FD 40%,var(--bg))}
.proof-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:28px; margin-top:52px;
}
.shot img{
  border-radius:12px; box-shadow:var(--shadow-purple);
  border:1px solid var(--lav-border); background:#fff;
}
.shot figcaption{
  text-align:center; color:var(--ink-2); font-size:.95rem;
  font-weight:600; margin-top:14px;
}
.disclaimer{
  color:var(--ink-2); font-size:.8rem; line-height:1.6;
  max-width:760px; margin:38px auto 0; text-align:center;
}

/* how */
.section-how{background:var(--bg)}
.steps{
  list-style:none; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:22px; margin-top:52px; counter-reset:step;
}
.steps li{
  background:#fff; border:1px solid var(--lav-border); border-radius:20px;
  padding:30px 24px; position:relative; box-shadow:var(--shadow-purple);
}
.step-num{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:999px;margin-bottom:16px;
  font-weight:900;font-size:1.15rem;color:#fff;
  background:linear-gradient(135deg,var(--green),#0EA47A);
  box-shadow:0 5px 14px rgba(16,185,129,.35);
}
.steps h3{font-weight:800;font-size:1.12rem;margin-bottom:8px;line-height:1.3}
.steps p{color:var(--ink-2);line-height:1.55;font-size:.98rem}

/* cta band */
.section-cta{
  background:linear-gradient(140deg,var(--purple-mid),var(--purple) 45%,var(--purple-deep));
  text-align:center; color:#fff;
}
.section-cta h2{
  font-weight:900; font-size:clamp(2.2rem,5.4vw,4rem);
  line-height:1.14; letter-spacing:-.015em;
}
.section-cta .cta-primary{
  background:#fff; color:var(--purple-deep);
  box-shadow:0 12px 40px rgba(20,6,43,.35), inset 0 1px 0 rgba(255,255,255,.9);
}
.section-cta .cta-big{font-size:clamp(1.15rem,2.2vw,1.45rem);padding:18px 54px}
.cta-sub{margin-top:18px;font-weight:600;opacity:.92;font-size:1.05rem}

/* footer */
.site-footer{
  background:var(--bg); border-top:1px solid var(--lav-border);
  padding:52px clamp(20px,6vw,72px) 40px; text-align:center;
}
.site-footer .wrap{max-width:820px;margin:0 auto}
.footer-brand{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-weight:800;font-size:1.1rem;
}
.footer-brand svg{border-radius:8px}
.footer-tagline{color:var(--ink-2);margin-top:10px;font-weight:500}
.footer-disclaimer{
  color:var(--ink-2); font-size:.78rem; line-height:1.65; margin-top:26px;
}
.footer-links{margin-top:22px}
.footer-links a{
  color:var(--purple); font-weight:700; font-size:.95rem;
}
.footer-links a:hover{text-decoration:underline}
.footer-copy{color:var(--ink-2);font-size:.82rem;margin-top:24px}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .film-scroll{height:auto;background:var(--void)}
  .film-stage{position:relative;height:auto;min-height:100vh;padding:120px 0 80px}
  #filmCanvas,.scroll-hint,.chapter-readout,.bottom-fade{display:none}
  .film-poster{position:absolute;height:100%}
  .beats{position:relative;display:flex;flex-direction:column;gap:9vh;padding:4vh 6vw}
  .beat{position:relative;opacity:1 !important;transform:none !important;top:auto;right:auto;left:auto;pointer-events:auto;max-width:640px;margin:0 auto;text-align:center}
  .beat-finale h2{color:#fff}
  .grad-dark{background:linear-gradient(120deg,#C4B5FD,#EDE9FE);-webkit-background-clip:text;background-clip:text}
  .finale-sub{color:rgba(255,255,255,.85)}
  .section .wrap > *{opacity:1;transform:none;transition:none}
  .scroll-hint{animation:none}
}

/* ---------- mobile ---------- */
@media (max-width:768px){
  .beat-side{
    right:6vw; left:6vw; max-width:none; text-align:center;
    top:auto; bottom:16%; transform:none;
  }
  .beat-hero{top:13%}
  .beat-finale{top:9%}
  .header-cta{font-size:.85rem;padding:8px 15px}
  .brand-word{font-size:1.15rem}
  .chapter-readout{display:none}
}