/* =====================================================================
   iam.learning :: cinematic layer  (loaded only on the home page)
   Dark, scroll-driven, Elva-style flow. Original iam. design.
   Scoped under body.cine so other pages are untouched.
   ===================================================================== */
.cine{background:#0A0A0C;color:#F4F4F6}
.cine ::selection{background:var(--red);color:#fff}

/* ---- nav on dark ---- */
.cine .nav-bg{background:rgba(10,10,12,.72)!important}
.cine.nav-bg,.cine .nav-bg{border-bottom-color:rgba(255,255,255,.08)}
.cine .logo,.cine .logo .lr{color:#fff}
.cine .nav-links a{color:rgba(255,255,255,.82)}
.cine .nav-links a:hover{color:#fff}
.cine .menu-btn{border-color:rgba(255,255,255,.2)}
.cine .menu-btn span,.cine .menu-btn span::before,.cine .menu-btn span::after{background:#fff}
.cine .mobile-menu{background:#0A0A0C}
.cine .mobile-menu a{color:#fff;border-bottom-color:rgba(255,255,255,.1)}

/* ---- generic cinematic section ---- */
.cs{position:relative;padding:140px 0;z-index:2}
.cs-eyebrow{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--red-2);display:inline-flex;align-items:center;gap:12px;margin-bottom:30px}
.cs-eyebrow::before{content:"";width:28px;height:2px;background:var(--red-2)}
.cs h2{font-family:var(--display);font-size:clamp(34px,5.5vw,72px);font-weight:800;letter-spacing:-.035em;line-height:1.0;color:#fff}
.cs h2 .red{color:var(--red-2)}
.cs h2 .serif{font-family:var(--serif);font-style:italic;font-weight:400;color:rgba(255,255,255,.85)}
.cs .lead{font-size:clamp(17px,2vw,21px);color:rgba(255,255,255,.6);max-width:560px;font-weight:400;line-height:1.55}

/* ---- MANIFESTO : word-by-word scroll reveal ---- */
.manifesto{min-height:100vh;display:flex;align-items:center;padding:120px 0}
.manifesto .mtext{font-family:var(--display);font-size:clamp(30px,5.4vw,68px);font-weight:700;letter-spacing:-.03em;line-height:1.18;max-width:1000px}
.manifesto .sw{color:rgba(255,255,255,.14);transition:color .25s linear}
.manifesto .sw.lit{color:#fff}
.manifesto .sw.red{color:var(--red-2)}
.manifesto-glow{position:absolute;width:60vw;height:60vw;max-width:760px;max-height:760px;border-radius:50%;background:radial-gradient(circle,rgba(237,28,46,.16),transparent 65%);filter:blur(30px);top:50%;left:50%;transform:translate(-50%,-50%);z-index:0;pointer-events:none}

/* ---- HORIZONTAL SCROLL PROGRAMS ---- */
.hscroll{position:relative;height:420vh}
.hscroll-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.hscroll-head{padding:0 0 36px;max-width:var(--maxw);margin:0 auto;width:100%;padding-left:28px;padding-right:28px}
.hscroll-track{display:flex;gap:24px;padding-left:28px;will-change:transform}
.hcard{flex:0 0 clamp(300px,34vw,460px);height:60vh;border-radius:22px;overflow:hidden;position:relative;border:1px solid rgba(255,255,255,.1);background:#141417}
.hcard video,.hcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8}
.hcard .hcard-ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,12,.1) 0%,rgba(10,10,12,.35) 50%,rgba(10,10,12,.92) 100%);z-index:1}
.hcard .hcard-body{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:34px}
.hcard .hnum{font-family:var(--display);font-size:14px;font-weight:700;color:var(--red-2);margin-bottom:auto}
.hcard h3{font-family:var(--display);font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.02em;color:#fff;margin-bottom:10px}
.hcard p{font-size:14.5px;color:rgba(255,255,255,.66);line-height:1.5;max-width:340px}
.hcard .hlink{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#fff}
.hcard .hlink .ar{color:var(--red-2)}
.hscroll-progress{position:absolute;bottom:48px;left:50%;transform:translateX(-50%);width:160px;height:3px;background:rgba(255,255,255,.14);border-radius:3px;overflow:hidden;z-index:5}
.hscroll-progress i{display:block;height:100%;width:0;background:var(--red-2);border-radius:3px}

/* ---- PINNED STORY (how it works) ---- */
.pinstory{position:relative;height:400vh}
.pinstory-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;max-width:var(--maxw);margin:0 auto;padding:0 28px}
.pinstory-eyebrow{position:absolute;top:11vh;left:28px;z-index:5}
.pinstory-left{position:relative;height:300px}
.ps-step{position:absolute;top:50%;left:0;right:0;transform:translateY(calc(-50% + 24px));opacity:0;transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:none}
.ps-step.on{opacity:1;transform:translateY(-50%);pointer-events:auto;transition-delay:.08s}
.ps-step .psn{font-family:var(--display);font-size:15px;font-weight:700;color:var(--red-2);margin-bottom:18px}
.ps-step h3{font-family:var(--display);font-size:clamp(30px,4vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1.02;color:#fff;margin-bottom:18px}
.ps-step p{font-size:17px;color:rgba(255,255,255,.6);line-height:1.6;max-width:420px}
.pinstory-right{position:relative;height:64vh;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#141417}
.ps-visual{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease);display:flex;align-items:center;justify-content:center}
.ps-visual.on{opacity:1}
.ps-visual video,.ps-visual img{width:100%;height:100%;object-fit:cover}
.ps-visual .pv-num{position:absolute;z-index:2;font-family:var(--display);font-size:clamp(120px,18vw,260px);font-weight:800;color:rgba(255,255,255,.10);letter-spacing:-.05em;top:50%;left:50%;transform:translate(-50%,-50%)}
.pinstory-dots{position:absolute;left:28px;bottom:8vh;display:flex;gap:10px;z-index:5}
.pinstory-dots span{width:30px;height:3px;border-radius:3px;background:rgba(255,255,255,.18);transition:.3s}
.pinstory-dots span.on{background:var(--red-2)}

/* ---- STATS dark ---- */
.cine .stats{border-top-color:rgba(255,255,255,.18)}
.cine .stat:not(:last-child){border-right-color:rgba(255,255,255,.1)}
.cine .stat .num{color:#fff}
.cine .stat .lbl{color:rgba(255,255,255,.55)}

/* ---- testimonials dark (reuse .tst styling, already dark-ish) ---- */
.cine .tst{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.025)}

/* ---- pricing dark ---- */
.cine .plan{background:#141417;border-color:rgba(255,255,255,.1)}
.cine .plan .plan-name,.cine .plan .price{color:#fff}
.cine .plan .plan-for,.cine .plan .price small,.cine .plan .plan-dur{color:rgba(255,255,255,.55)}
.cine .plan .pf li{color:rgba(255,255,255,.8)}
.cine .plan .pf li .ic{background:rgba(255,255,255,.12)}
.cine .plan.feat{background:linear-gradient(180deg,#1c1014,#141417);border-color:var(--red)}
.cine .plan.feat .pf li .ic{background:var(--red)}
.cine .plan .btn-line{border-color:rgba(255,255,255,.22);color:#fff}
.cine .plan .btn-line:hover{border-color:#fff;background:rgba(255,255,255,.06)}

/* ---- enroll dark ---- */
.cine .form-card{background:#141417;border-color:rgba(255,255,255,.1);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.cine .form-card h3{color:#fff}
.cine .form-card .fsub{color:rgba(255,255,255,.55)}
.cine .fld label{color:rgba(255,255,255,.85)}
.cine .fld input,.cine .fld select,.cine .fld textarea{background:rgba(255,255,255,.05);color:#fff}
.cine .fld input::placeholder,.cine .fld textarea::placeholder{color:rgba(255,255,255,.35)}
.cine .fld input:focus,.cine .fld select:focus,.cine .fld textarea:focus{background:rgba(255,255,255,.08);border-color:var(--red)}
.cine .fld select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23aaa' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
.cine .enroll-copy h2{color:#fff}
.cine .enroll-copy>p{color:rgba(255,255,255,.6)}
.cine .ep .epi{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.cine .ep b{color:#fff}
.cine .ep span{color:rgba(255,255,255,.55)}
.cine .form-note{color:rgba(255,255,255,.4)}
.cine .form-ok h3{color:#fff}
.cine .form-ok p{color:rgba(255,255,255,.6)}

/* ---- big closing CTA cinematic ---- */
.cine-cta{position:relative;min-height:90vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 28px;overflow:hidden}
.cine-cta .glow{position:absolute;width:70vw;height:70vw;max-width:820px;max-height:820px;border-radius:50%;background:radial-gradient(circle,rgba(237,28,46,.2),transparent 62%);filter:blur(40px);top:50%;left:50%;transform:translate(-50%,-50%);z-index:0}
.cine-cta-in{position:relative;z-index:2}
.cine-cta h2{font-family:var(--display);font-size:clamp(48px,9vw,120px);font-weight:800;letter-spacing:-.045em;line-height:.95;color:#fff;margin-bottom:26px}
.cine-cta h2 .red{color:var(--red-2)}
.cine-cta p{font-size:clamp(17px,2.2vw,22px);color:rgba(255,255,255,.6);max-width:540px;margin:0 auto 40px}
.cine-cta .ctab{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---- marquee dark ---- */
.cine .marquee{background:#0A0A0C;border-color:rgba(255,255,255,.1)}
.cine .marquee-track span{color:#fff}

/* ---- newsletter stays red (good contrast) ---- */

/* ---- footer already dark ---- */

@media(max-width:900px){
  .hcard{flex:0 0 78vw;height:54vh}
  .pinstory-sticky{grid-template-columns:1fr;gap:30px}
  .pinstory-right{height:40vh;order:-1}
  .ps-step{position:relative;top:auto;transform:none;opacity:0;height:0;overflow:hidden}
  .ps-step.on{height:auto;opacity:1}
  .pinstory-dots{left:50%;transform:translateX(-50%)}
}
@media(max-width:560px){
  .cs{padding:90px 0}
  .manifesto .mtext{font-size:clamp(26px,7vw,40px)}
}