/* ===== Scroll progress bar ===== */
.scroll-progress{position:fixed; top:0; left:0; right:0; height:3px; z-index:100; pointer-events:none; background:transparent}
.scroll-progress-bar{height:100%; width:0%; background:linear-gradient(90deg, #DF995B, #B36E30); box-shadow:0 0 12px rgba(223,153,91,.5); transition:width .1s linear}

/* ===== Reveal upgraded ===== */
.reveal{will-change:opacity,transform}

/* Heading mask reveal */
.mask-reveal{
  position:relative; overflow:hidden;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s cubic-bezier(.77,0,.175,1);
}
.mask-reveal.in{clip-path: inset(0 0 0 0)}

/* H-split words (hero h1) — split by word, not by char, to preserve wrapping */
.h-split .word{display:inline-block; opacity:0; transform: translateY(60%) rotate(3deg); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); transition-delay: calc(var(--i, 0) * 60ms); white-space:nowrap}
.h-split.in .word{opacity:1; transform: none}
.h-split{overflow:visible}

/* Tilt / 3D hover */
[data-tilt]{transform-style:preserve-3d; transition: transform .35s cubic-bezier(.22,1,.36,1)}
.prob-card[data-tilt]:hover, .review[data-tilt]:hover{transform: perspective(900px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) translateY(-8px)}

/* Hero parallax smoothing */
[data-parallax]{will-change:transform}

/* ===== Sticky horizontal storytelling for SOLUTION ===== */
.story{
  position:relative;
  height: 420vh; /* 4 panels ~100vh each */
}
.story-sticky{
  position:sticky; top:0; height:100vh;
  overflow:hidden;
}
.story-track{
  display:flex; flex-wrap:nowrap;
  height:100%; align-items:center;
  will-change: transform;
  padding: 0 8vw;
  gap: 8vw;
  width: max-content;
}
.story-panel{flex-shrink:0}
.story-panel{
  flex: 0 0 84vw; max-width:1200px;
  display:grid; grid-template-columns: 1fr 1fr; gap:60px;
  align-items:center;
  opacity:.35; transform: scale(.95);
  transition: opacity .45s ease, transform .45s ease;
}
.story-panel.active{opacity:1; transform: scale(1)}
.story-panel .sp-copy .step-num{
  font-family:'Unbounded'; font-weight:800; color:var(--brand);
  font-size:14px; letter-spacing:.18em; margin-bottom:14px;
  display:inline-flex; align-items:center; gap:10px;
}
.story-panel .sp-copy .step-num::before{content:""; width:28px; height:2px; background:var(--brand)}
.story-panel h3{font-family:'Unbounded'; font-size:clamp(32px, 4vw, 54px); line-height:1.02; margin-bottom:20px}
.story-panel p.sp-lead{color:var(--ink-2); font-size:18px; line-height:1.55; max-width:480px; margin-bottom:22px}
.story-panel .sp-tags{display:flex; gap:8px; flex-wrap:wrap}
.story-panel .sp-tags span{padding:7px 14px; background:var(--surface); border:1px solid var(--line); border-radius:999px; font-size:13px; font-weight:600; color:var(--ink-2); box-shadow:var(--shadow-sm)}

.story-panel .sp-visual{display:flex; justify-content:center; align-items:center; position:relative; height:620px}
.story-panel .sp-phone{
  width:300px; height:600px; background:#141C24; border-radius:44px; padding:12px;
  box-shadow: 0 40px 80px -20px rgba(79,54,24,.4), 0 10px 24px rgba(79,54,24,.12);
  position:relative;
}
.story-panel .sp-phone::before{content:""; position:absolute; top:14px; left:50%; transform:translateX(-50%); width:110px; height:26px; background:#0A0E13; border-radius:999px; z-index:3}
.story-panel .sp-screen{width:100%; height:100%; background:var(--surface); border-radius:34px; overflow:hidden; position:relative; padding:44px 16px 14px; display:flex; flex-direction:column}

.sp-bg-num{
  position:absolute; right:3%; top:6%;
  font-family:'Unbounded'; font-weight:800;
  font-size:clamp(180px, 22vw, 340px); line-height:.8;
  color:var(--brand); opacity:.08;
  pointer-events:none;
}
.sp-mascot{
  position:absolute; z-index:2;
  width:170px; filter:drop-shadow(0 18px 26px rgba(79,54,24,.25));
  animation: floatyS 6s ease-in-out infinite;
}
.sp-mascot.l{left:-30px; bottom:20px}
.sp-mascot.r{right:-30px; top:40px; animation-delay:.5s}
@keyframes floatyS{0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-12px) rotate(3deg)}}

/* story progress indicator */
.story-hud{
  position:absolute; top:24px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px;
  padding:10px 16px; border-radius:999px;
  background:rgba(255,253,248,.78); backdrop-filter: blur(14px);
  border:1px solid var(--line);
  z-index:5;
}
.story-hud .dot{width:8px; height:8px; border-radius:50%; background:var(--line-2); transition: all .3s}
.story-hud .dot.on{background:var(--brand); width:24px; border-radius:999px}
.story-hud .label{font-size:12px; font-weight:700; color:var(--ink-2); margin-right:6px; font-family:'Unbounded'}

@media (max-width:980px){
  .story{height:auto}
  .story-sticky{position:static; height:auto; padding:60px 0}
  .story-track{flex-direction:column; padding:0 20px; gap:80px; transform:none !important}
  .story-panel{flex: 1 1 auto; grid-template-columns:1fr; opacity:1; transform:none; gap:30px}
  .story-panel .sp-visual{height:auto; min-height:520px}
  .story-hud{display:none}
}

/* In-phone content share styles from .sol-frame */
.sp-screen .f-header, .sp-screen .f1-q, .sp-screen .f1-a, .sp-screen .f1-formula, .sp-screen .f1-steps,
.sp-screen .f2-title, .sp-screen .f2-progress, .sp-screen .f2-q, .sp-screen .f2-opts,
.sp-screen .f3-head, .sp-screen .f3-grid, .sp-screen .f3-sub,
.sp-screen .f4-title, .sp-screen .f4-para, .sp-screen .f4-note{}

/* ===== Problem cards slide-in from alt sides ===== */
.prob-grid .prob-card{transition-delay:0s}
.prob-grid .reveal.d1{transform: translateX(-60px)}
.prob-grid .reveal.d3{transform: translateX(60px)}
.prob-grid .reveal.d1.in, .prob-grid .reveal.d3.in{transform: none}

/* ===== Magnetic marquee reacts to scroll speed ===== */
.marquee{animation-play-state: running}

/* ===== Pricing card tilt enhancement ===== */
.price[data-tilt]{transform-style:preserve-3d}
.price[data-tilt] *{transform:translateZ(0)}

/* ===== Hide scroll hint on mobile ===== */
.scroll-hint{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  font-size:12px; color:var(--ink-3); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  z-index:5;
}
.scroll-hint .m{
  width:22px; height:34px; border:2px solid var(--ink-3); border-radius:12px; position:relative;
}
.scroll-hint .m::after{content:""; position:absolute; left:50%; top:5px; width:3px; height:6px; background:var(--ink-3); border-radius:2px; transform:translateX(-50%); animation: sh 1.6s infinite}
@keyframes sh{0%{transform: translate(-50%, 0); opacity:1} 70%{transform: translate(-50%, 14px); opacity:0} 100%{transform: translate(-50%, 0); opacity:0}}

/* Social — infinite tape of reviews */
.review-tape{overflow:hidden; position:relative; padding:16px 0; mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%)}
.review-tape-inner{display:flex; gap:22px; width:max-content; animation: tapeMove 60s linear infinite; will-change:transform}
.review-tape:hover .review-tape-inner{animation-play-state:paused}
@keyframes tapeMove{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* Final — animated grid */
.final::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image: radial-gradient(rgba(223,153,91,.25) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
  opacity:.6;
  animation: gridDrift 20s linear infinite;
}
@keyframes gridDrift{from{background-position:0 0} to{background-position:28px 28px}}
.final .wrap{z-index:2; position:relative}
.final-mascot{z-index:2}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}