/* ============================================================
   THE SOFCOM PLATFORM — signature scrollytelling page
   Premium motion + materials, light theme, reduced-motion safe.
   Default state = static stacked (no JS / reduced motion).
   .pf-ready (added by platform.js when motion is allowed)
   = sticky terminal + scrolling captions.
   ============================================================ */
.pf{--pf-ease:cubic-bezier(.22,1,.36,1)}
.pf .container{max-width:120rem}

/* ---------- HERO ---------- */
.pf-hero{
  position:relative;overflow:hidden;
  padding:18rem 0 12rem;
  background:linear-gradient(180deg,#F4F7FC 0%,#EAF0FB 100%);
}
.pf-hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.pf-hero__layer{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55}
.pf-hero__layer--1{width:46rem;height:46rem;top:-10rem;right:-6rem;background:radial-gradient(circle,rgba(46,97,255,.30),transparent 65%)}
.pf-hero__layer--2{width:38rem;height:38rem;bottom:-12rem;left:-8rem;background:radial-gradient(circle,rgba(176,201,254,.55),transparent 65%)}
.pf-hero__layer--3{width:30rem;height:30rem;top:30%;left:55%;background:radial-gradient(circle,rgba(3,41,82,.10),transparent 65%)}
.pf-hero__grid{
  position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(3,41,82,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(3,41,82,.04) 1px,transparent 1px);
  background-size:4.4rem 4.4rem;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 35%,#000,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 35%,#000,transparent 80%);
}
.pf-hero__inner{position:relative;z-index:1;text-align:center;max-width:88rem;margin:0 auto}
.pf-hero__eyebrow{
  display:inline-flex;align-items:center;gap:.8rem;
  padding:.7rem 1.4rem;border-radius:99rem;
  background:rgba(255,255,255,.7);backdrop-filter:blur(10px);
  box-shadow:0 0 0 1px rgba(46,97,255,.18);
  font-size:1.3rem;font-weight:600;color:var(--blue);margin-bottom:2.6rem;
}
.pf-hero__eyebrow-dot{width:.7rem;height:.7rem;border-radius:50%;background:var(--blue);box-shadow:0 0 0 .4rem rgba(46,97,255,.16)}
.pf-hero__title{font-size:clamp(4rem,6vw,8rem);font-weight:800;line-height:1.02;letter-spacing:-.03em;color:var(--navy-900);margin:0 0 2.4rem}
.pf-hero__title em{font-style:normal;background:linear-gradient(120deg,#2E61FF,#7AA0FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.pf-hero__sub{font-size:1.9rem;line-height:1.6;color:var(--slate-600);max-width:64rem;margin:0 auto 3.4rem}
.pf-hero__actions{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap}
.pf-hero__cue{margin-top:5rem;display:inline-flex;flex-direction:column;align-items:center;gap:.8rem;font-size:1.15rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-600)}
.pf-hero__cue span{width:2.2rem;height:3.6rem;border:2px solid rgba(3,41,82,.25);border-radius:99rem;position:relative}
.pf-hero__cue span::after{content:"";position:absolute;top:.6rem;left:50%;width:.4rem;height:.7rem;border-radius:99rem;background:var(--blue);transform:translateX(-50%);animation:pfCue 1.6s var(--pf-ease) infinite}
@keyframes pfCue{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,1.4rem)}}

/* ---------- SCENE ---------- */
.pf-scene{background:#fff;padding:2rem 0 4rem;position:relative}
.pf-scene__inner{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}

/* Stage / terminal */
.pf-stage{position:relative}
.pf-terminal{
  background:radial-gradient(120% 130% at 50% 0%,#0c2143 0%,#061528 100%);
  border-radius:1.8rem;overflow:hidden;
  box-shadow:0 40px 80px -28px rgba(3,41,82,.45),0 0 0 1px rgba(3,41,82,.10);
}
.pf-term__bar{display:flex;align-items:center;gap:1.2rem;padding:1.1rem 1.6rem;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08)}
.pf-term__dots{display:flex;gap:.6rem}
.pf-term__dots i{width:1.1rem;height:1.1rem;border-radius:50%;display:block}
.pf-term__dots i:nth-child(1){background:#FF5F57}.pf-term__dots i:nth-child(2){background:#FEBC2E}.pf-term__dots i:nth-child(3){background:#28C840}
.pf-term__url{flex:1;font-size:1.25rem;font-weight:600;color:rgba(255,255,255,.55)}
.pf-term__url b{color:#fff}
.pf-term__live{font-size:.95rem;font-weight:700;letter-spacing:.08em;color:#28d07a;background:rgba(40,208,122,.12);padding:.35rem .8rem;border-radius:99rem}
.pf-term__screens{position:relative;padding:2.4rem;min-height:38rem}

/* Screen content (shared) */
.pf-screen{color:#fff}
.pf-screen__head{font-size:1.7rem;font-weight:700;margin-bottom:2rem;display:flex;align-items:center;gap:.9rem;color:#fff}
.pf-screen__tag{font-size:1rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9cc0ff;background:rgba(46,97,255,.18);padding:.35rem .8rem;border-radius:.6rem}
/* eKYC */
.pf-kyc{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.8rem}
.pf-kyc__row{display:flex;align-items:center;gap:1rem;font-size:1.45rem;font-weight:600;color:rgba(255,255,255,.92);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:1rem;padding:1.1rem 1.3rem}
.pf-kyc__row em{font-style:normal;margin-left:auto;font-size:1.15rem;font-weight:500;color:rgba(255,255,255,.5)}
.pf-kyc__ic{width:2.2rem;height:2.2rem;border-radius:50%;background:#0EAB6E;color:#fff;display:grid;place-items:center;font-size:1.2rem;font-weight:800}
.pf-badge{display:inline-block;font-size:1.25rem;font-weight:700;border-radius:99rem;padding:.7rem 1.4rem}
.pf-badge--ok{background:rgba(40,208,122,.14);color:#3fe08e;border:1px solid rgba(40,208,122,.3)}
/* Trade */
.pf-trade{display:grid;grid-template-columns:1.3fr .9fr;gap:1.4rem;margin-bottom:1.6rem;align-items:stretch}
.pf-ticket{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:1.2rem;padding:1.3rem}
.pf-ticket__row{display:flex;justify-content:space-between;font-size:1.3rem;font-weight:700;color:#fff;margin-bottom:1rem}
.pf-up{color:#3fe08e}
.pf-ticket__side{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:1rem}
.pf-ticket__buy,.pf-ticket__sell{text-align:center;font-size:1.1rem;font-weight:800;padding:.6rem;border-radius:.7rem}
.pf-ticket__buy{background:#0EAB6E;color:#fff}
.pf-ticket__sell{background:rgba(255,255,255,.08);color:rgba(255,255,255,.6)}
.pf-ticket__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:1.1rem}
.pf-ticket__grid label{display:block;font-size:.9rem;color:rgba(255,255,255,.5);margin-bottom:.2rem}
.pf-ticket__grid b{font-size:1.25rem;color:#fff;font-variant-numeric:tabular-nums}
.pf-ticket__cta{text-align:center;background:var(--blue);color:#fff;font-weight:700;font-size:1.2rem;padding:.9rem;border-radius:.8rem}
.pf-spark{width:100%;height:100%;min-height:14rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:1.2rem;padding:1rem}
/* Risk */
.pf-meters{display:flex;flex-direction:column;gap:1.1rem;margin-bottom:1.6rem}
.pf-meter{display:grid;grid-template-columns:9rem 1fr 4rem;align-items:center;gap:1rem;font-size:1.25rem;color:rgba(255,255,255,.85)}
.pf-meter__l{font-weight:600}
.pf-meter__bar{height:.8rem;background:rgba(255,255,255,.1);border-radius:99rem;overflow:hidden}
.pf-meter__bar i{display:block;height:100%;background:linear-gradient(90deg,#2E61FF,#7AA0FF);border-radius:99rem}
.pf-meter__bar--ok i{background:#0EAB6E}
.pf-meter__v{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;color:#fff}
.pf-checks{display:flex;flex-direction:column;gap:.8rem}
.pf-checks li{display:flex;align-items:center;gap:.9rem;font-size:1.3rem;font-weight:600;color:rgba(255,255,255,.9)}
.pf-checks li span{width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;font-size:1.1rem;font-weight:800}
.pf-checks .is-ok span{background:#0EAB6E;color:#fff}
.pf-checks .is-warn span{background:#F59E0B;color:#fff}
/* Settle */
.pf-ledger{display:flex;flex-direction:column;gap:.8rem;margin-bottom:1.6rem}
.pf-ledger__row{display:flex;justify-content:space-between;align-items:center;font-size:1.35rem;font-weight:600;color:#fff;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:.9rem;padding:1rem 1.3rem}
.pf-pill{font-size:1rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:.3rem .8rem;border-radius:.5rem}
.pf-pill--ok{background:rgba(40,208,122,.16);color:#3fe08e}
/* Report */
.pf-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.8rem}
.pf-kpi{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:1.1rem;padding:1.2rem}
.pf-kpi__l{display:block;font-size:1rem;color:rgba(255,255,255,.5);margin-bottom:.4rem;text-transform:uppercase;letter-spacing:.05em}
.pf-kpi__v{font-size:1.7rem;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.pf-bars{display:flex;align-items:flex-end;gap:.8rem;height:11rem;padding:1.2rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:1.2rem}
.pf-bars i{flex:1;background:linear-gradient(180deg,#7AA0FF,#2E61FF);border-radius:.4rem .4rem 0 0;min-height:8%}

/* Progress rail */
.pf-rail{display:flex;justify-content:center;gap:1rem;margin-top:2.2rem}
.pf-rail__dot{width:3.4rem;height:.7rem;border-radius:99rem;border:0;padding:0;cursor:pointer;background:rgba(3,41,82,.14);transition:background .35s var(--pf-ease),transform .35s var(--pf-ease)}
.pf-rail__dot.is-active{background:var(--blue);transform:scaleY(1.25)}

/* Steps / captions */
.pf-step{display:flex;align-items:center}
.pf-caption{
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid rgba(255,255,255,.75);
  border-radius:2rem;padding:3.2rem;
  box-shadow:0 30px 60px -28px rgba(3,41,82,.28),inset 0 1px 0 rgba(255,255,255,.7);
}
.pf-caption__num{font-size:1.4rem;font-weight:800;letter-spacing:.1em;color:var(--blue);margin-bottom:1rem}
.pf-caption__title{font-size:clamp(2.6rem,2.8vw,3.6rem);font-weight:700;line-height:1.12;letter-spacing:-.02em;color:var(--navy-900);margin:0 0 1.4rem}
.pf-caption__desc{font-size:1.6rem;line-height:1.65;color:var(--slate-600);margin:0 0 1.8rem}
.pf-caption__list{display:flex;flex-direction:column;gap:.9rem}
.pf-caption__list li{position:relative;padding-left:2.6rem;font-size:1.45rem;font-weight:600;color:var(--navy-900)}
.pf-caption__list li::before{content:"";position:absolute;left:0;top:.15rem;width:1.7rem;height:1.7rem;border-radius:50%;background:rgba(46,97,255,.12);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E61FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");background-size:1.1rem;background-position:center;background-repeat:no-repeat}

/* ---------- STATS ---------- */
.pf-stats{background:linear-gradient(180deg,#fff,#F4F7FC);padding:7rem 0}
.pf-stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.pf-stat{
  text-align:center;padding:3rem 2rem;border-radius:1.8rem;
  background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 18px 40px -24px rgba(3,41,82,.25);
}
.pf-stat__num{display:block;font-size:clamp(3.2rem,4vw,4.6rem);font-weight:800;letter-spacing:-.02em;color:var(--navy-900);line-height:1;font-variant-numeric:tabular-nums;margin-bottom:.8rem}
.pf-stat__label{font-size:1.4rem;font-weight:600;color:var(--slate-600)}

/* ---------- CTA ---------- */
.pf-cta{padding:8rem 0 10rem;background:#F4F7FC}
.pf-cta__card{
  position:relative;overflow:hidden;text-align:center;
  background:radial-gradient(120% 140% at 50% 0%,#0c2143,#061528);
  border-radius:2.8rem;padding:6rem 3rem;
  box-shadow:0 40px 80px -30px rgba(3,41,82,.5);
}
.pf-cta__title{font-size:clamp(3rem,4vw,5rem);font-weight:800;color:#fff;letter-spacing:-.02em;margin:0 0 1.4rem}
.pf-cta__title em{font-style:normal;color:#7AA0FF}
.pf-cta__sub{font-size:1.8rem;color:rgba(255,255,255,.72);max-width:52rem;margin:0 auto 3rem}
.pf-cta__actions{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap}

/* ============================================================
   ENHANCED STATE — .pf-ready (motion allowed): sticky + fades
   ============================================================ */
.pf-ready .pf-stage{position:sticky;top:13vh;height:74vh;display:flex;flex-direction:column;justify-content:center}
.pf-ready .pf-term__screens{flex:1}
.pf-ready .pf-screen{
  position:absolute;inset:2.4rem;opacity:0;transform:translateY(1.6rem) scale(.985);
  transition:opacity .6s var(--pf-ease),transform .6s var(--pf-ease);pointer-events:none;
}
.pf-ready .pf-screen.is-active{opacity:1;transform:none;pointer-events:auto}
.pf-ready .pf-step{min-height:86vh}
.pf-ready .pf-caption{opacity:.32;transform:translateY(2.4rem);transition:opacity .55s var(--pf-ease),transform .55s var(--pf-ease)}
.pf-ready .pf-step.is-active .pf-caption{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .pf-hero{padding:13rem 0 8rem}
  .pf-scene__inner{grid-template-columns:1fr;gap:2.4rem}
  .pf-ready .pf-stage{top:7rem;height:auto;flex:none}
  .pf-ready .pf-term__screens{min-height:34rem}
  .pf-rail{display:none}
}
@media (max-width:600px){
  .pf-hero{padding:11rem 0 6rem}
  .pf-term__screens{padding:1.8rem;min-height:32rem}
  .pf-ready .pf-screen{inset:1.8rem}
  .pf-trade{grid-template-columns:1fr}
  .pf-spark{min-height:9rem}
  .pf-kpis{grid-template-columns:1fr 1fr}
  .pf-stats__grid{grid-template-columns:1fr 1fr;gap:1.4rem}
  .pf-caption{padding:2.4rem}
  .pf-hero__actions .btn,.pf-cta__actions .btn{width:100%;justify-content:space-between}
  .pf-ready .pf-step{min-height:auto;padding:3rem 0}
}

/* ============================================================
   STATIC FALLBACK — no JS / reduced motion (no .pf-ready):
   show first screen as a poster, captions as a clean list.
   ============================================================ */
.pf-scene:not(.pf-ready) .pf-screen{display:none}
.pf-scene:not(.pf-ready) .pf-screen.is-active{display:block;position:relative;inset:auto}
.pf-scene:not(.pf-ready) .pf-rail{display:none}
.pf-scene:not(.pf-ready) .pf-steps{display:flex;flex-direction:column;gap:2rem;margin-top:3rem}

@media (prefers-reduced-motion:reduce){
  .pf-hero__cue span::after{animation:none}
  .pf-hero__layer{display:none}
}