/* ==========================================================================
   FLUX PAY — PREMIUM PAGE ELEMENTS (Extracted from landing.php)
   Shared design elements for info/marketing pages: gradient cards,
   dark shell sections, animated headings, reveal animations, journey panels
   ========================================================================== */

/* ---------- SECTION HEADER (orange underline) ---------- */
.sec-head{position:relative;border-top:1px solid var(--line,#E7E1D8);padding-top:16px;margin-bottom:clamp(34px,4.5vw,52px);display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.sec-head::after{content:"";position:absolute;top:-1.5px;left:0;height:2.5px;width:150px;border-radius:3px;background:linear-gradient(90deg,var(--orange,#F36B35),#FFB08A);transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.22,.61,.36,1) .25s}
.sec-head.in::after{transform:scaleX(1)}
.center-head{text-align:center;margin-bottom:clamp(28px,4vw,44px)}
.center-head .lead{margin:12px auto 0;max-width:48ch}

/* ---------- REVEAL ANIMATIONS ---------- */
html.io [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,.61,.36,1);transition-delay:var(--d,0s)}
html.io [data-reveal="left"]{transform:translateX(-36px)}
html.io [data-reveal="right"]{transform:translateX(36px)}
html.io [data-reveal="pop"]{transform:scale(.92)}
html.io [data-reveal].in{opacity:1;transform:none}

/* ---------- WORD FLIP ANIMATION ---------- */
.fwm{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
html.js .fw{display:inline-block;transform:translateY(115%) rotateX(-70deg);opacity:0;transform-origin:50% 100%}
html.js .in .fw{animation:fwIn .7s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:calc(var(--wi)*55ms)}
@keyframes fwIn{to{transform:none;opacity:1}}

/* ---------- HANDWRITTEN ACCENT ---------- */
.hand{font:700 1.3em/1 var(--font-h,'Caveat',cursive);text-transform:none;display:inline-block;transform:rotate(-2deg)}
.hand.ink{color:var(--orange-text,#C2410C)}
.hand.shine{background:linear-gradient(100deg,#FFB08A 20%,#FFF3E8 42%,#fff 50%,#FFB08A 66%);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shim 2.8s linear infinite}
@keyframes shim{to{background-position:-240% 0}}

/* ---------- PREMIUM EYEBROW ---------- */
.premium-eyebrow{display:inline-flex;align-items:center;gap:9px;font:500 10.5px/1 var(--font-m,'IBM Plex Mono',ui-monospace,monospace);letter-spacing:.22em;text-transform:uppercase;padding:9px 16px;border-radius:999px;background:rgba(243,107,53,.08);color:var(--orange-text,#C2410C);margin-bottom:18px}
.premium-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange,#F36B35);animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- GRADIENT FEATURE CARDS ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);margin-top:clamp(32px,4vw,48px)}
.feat{border-radius:26px;padding:clamp(24px,2.6vw,34px);min-height:360px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:box-shadow .3s,transform .4s cubic-bezier(.22,.61,.36,1);will-change:transform}
.feat:hover{box-shadow:0 30px 70px -28px rgba(23,23,23,.35);transform:translateY(-6px)}
.feat-ic{width:60px;height:60px;border-radius:18px;background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--charcoal,#171717);box-shadow:0 12px 26px -12px rgba(23,23,23,.35);margin-bottom:auto;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.feat:hover .feat-ic{transform:translateY(-4px) rotate(-6deg) scale(1.06)}
.feat-ic .icon{width:26px;height:26px}
.feat h3{font-size:1.5rem;text-transform:none;margin:56px 0 10px;color:var(--charcoal,#171717)}
.feat p{font-size:.95rem;max-width:34ch;color:var(--charcoal,#171717);opacity:.8}
.feat .vpill{margin-top:18px;align-self:flex-start;background:rgba(255,255,255,.75)}
.feat .vpill:hover{background:var(--charcoal,#171717);color:#fff}
.f-a{background:linear-gradient(180deg,#F98A5B 0%,#FDB392 34%,#FDEFE6 78%,#fff 100%)}
.f-b{background:linear-gradient(180deg,#F6BE4F 0%,#FBDF9C 34%,#FDF6E7 78%,#fff 100%)}
.f-g{background:linear-gradient(180deg,#3DB87E 0%,#9FE3C0 34%,#E9F8F0 78%,#fff 100%)}
.f-d{background:linear-gradient(180deg,#6C8CFF 0%,#A8BEFF 34%,#E8EDFF 78%,#fff 100%)}
.f-deco{position:absolute;right:-30px;top:-30px;width:130px;height:130px;border-radius:50%;border:2px dashed rgba(23,23,23,.12);animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- GREEN PILL LINK ---------- */
.vpill{display:inline-flex;align-items:center;gap:9px;background:var(--green-pill,#DFF5E9);color:var(--green,#1F7A4D);font:700 .88rem/1 var(--font-d,'Archivo',sans-serif);padding:12px 22px;border-radius:999px;text-decoration:none;transition:.25s cubic-bezier(.22,.61,.36,1)}
.vpill .icon{width:15px;height:15px;transition:transform .25s}
.vpill:hover{background:var(--green,#1F7A4D);color:#fff;transform:translateY(-2px)}
.vpill:hover .icon{transform:translateX(3px)}

/* ---------- DARK SHELL SECTION ---------- */
.shell{background:#141312;border-radius:34px;padding:clamp(50px,7vw,96px) 0;color:#F4F2EF;position:relative;overflow:hidden;width:100%;box-sizing:border-box}
.shell::before{content:"";position:absolute;inset:-40% -20% auto;height:120%;background:radial-gradient(50% 40% at 70% 0%,rgba(243,107,53,.24),transparent 70%);pointer-events:none}
.shell::after{content:"";position:absolute;inset:0;background:radial-gradient(45% 45% at 0% 45%,rgba(243,107,53,.13),transparent 70%),radial-gradient(45% 45% at 100% 75%,rgba(243,107,53,.1),transparent 70%);pointer-events:none}
.shell .wrap{max-width:1560px;padding-inline:clamp(24px,4vw,64px);margin-inline:auto}
.shell-head{text-align:center;position:relative;z-index:1;margin-bottom:clamp(40px,5.5vw,68px)}
.shell-head h2{color:#fff;font-size:clamp(2rem,3.8vw,3.2rem)}
.shell-head .lead{color:rgba(244,242,239,.72);margin:16px auto 0;max-width:54ch;font-size:clamp(1.05rem,1.3vw,1.2rem)}

/* ---------- PRODUCT ROWS (dark section) ---------- */
.prod{display:grid;grid-template-columns:0.92fr 1.18fr;gap:clamp(32px,5vw,72px);align-items:center;position:relative;z-index:1;padding-block:clamp(36px,5vw,64px);border-top:1px solid rgba(244,242,239,.1)}
.prod.prod-rev{grid-template-columns:1.18fr 0.92fr}
.prod:first-of-type{border-top:0;padding-top:0}
.prod-media{position:relative;border-radius:34px;min-height:280px;aspect-ratio:16/10.5;overflow:hidden;display:grid;place-items:center;transition:transform .5s cubic-bezier(.34,1.56,.64,1);box-shadow:0 35px 70px -25px rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.12)}
.prod:hover .prod-media{transform:translateY(-6px) scale(1.015)}
.pm-o{background:radial-gradient(90% 100% at 80% 0%,rgba(255,255,255,.35),transparent 55%),linear-gradient(150deg,#FF8A4C,#E04E1A)}
.pm-c{background:radial-gradient(90% 100% at 80% 0%,rgba(255,255,255,.22),transparent 55%),linear-gradient(150deg,#2B2A28,#0E0D0C)}
.pm-g{background:radial-gradient(90% 100% at 80% 0%,rgba(255,255,255,.3),transparent 55%),linear-gradient(150deg,#3DB87E,#157A4B)}
.pm-m{background:radial-gradient(90% 100% at 80% 0%,rgba(255,255,255,.25),transparent 55%),linear-gradient(150deg,#F6BE4F,#C98A1B)}
.prod-info small{font:600 11px/1 var(--font-m,'IBM Plex Mono',monospace);letter-spacing:.24em;text-transform:uppercase;color:#FFB08A;display:block;margin-bottom:6px}
.prod-info h3{font-size:clamp(1.75rem,2.8vw,2.4rem);margin:10px 0 14px;color:#fff;letter-spacing:-.02em}
.prod-info p{color:rgba(244,242,239,.72);font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.65;max-width:52ch;margin-bottom:18px}
.prod-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.prod-pill{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:6px 12px;font:600 11.5px/1 var(--font-m,'IBM Plex Mono',monospace);color:rgba(255,255,255,.88);letter-spacing:.02em}
.prod-pill i{width:5px;height:5px;border-radius:50%;background:var(--orange,#F36B35)}
.prod-tag{position:absolute;left:18px;top:18px;background:rgba(255,255,255,.92);color:var(--charcoal,#171717);border-radius:999px;padding:7px 13px;font:700 9.5px/1 var(--font-m,'IBM Plex Mono',monospace);letter-spacing:.14em;z-index:2}

/* ---------- JOURNEY PANELS ---------- */
.j-track{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.5vw,52px);margin-top:clamp(32px,4vw,48px)}
.j-panel{position:relative;background:#fff;border-radius:26px;padding:26px;box-shadow:0 20px 44px -26px rgba(23,23,23,.28);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.j-panel:hover{transform:translateY(-6px)}
.j-ghost{position:absolute;top:-6px;right:14px;font:800 3.4rem/1 var(--font-d,'Archivo',sans-serif);color:rgba(243,107,53,.1)}
.j-dot{width:44px;height:44px;border-radius:14px;background:linear-gradient(140deg,#FF9A66,#E04E1A);display:grid;place-items:center;color:#fff;margin-bottom:16px;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.j-panel:hover .j-dot{transform:rotate(-8deg) scale(1.1)}
.j-dot .icon{width:20px;height:20px}
.j-num{font:500 10px/1 var(--font-m,'IBM Plex Mono',monospace);letter-spacing:.22em;color:var(--orange-text,#C2410C)}
.j-panel h3{font-size:1.2rem;text-transform:none;margin:10px 0 8px}
.j-panel p{color:var(--mut,#6E675F);font-size:.94rem}
html.js .j-track .j-panel{opacity:0;transform:translateY(40px) rotateX(-8deg);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1);transition-delay:calc(var(--p)*130ms)}
html.js .j-track.in .j-panel{opacity:1;transform:none}
html:not(.js) .j-track .j-panel{opacity:1}

/* ---------- MARQUEE STRIP ---------- */
.marquee{background:var(--charcoal,#171717);transform:rotate(-1.2deg) scale(1.03);overflow:hidden;position:relative;z-index:3;margin-block:clamp(26px,4vw,42px);border-block:1px solid rgba(255,255,255,.06)}
.mq-track{display:flex;width:max-content;padding:14px 0;animation:mq 30s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-set{display:flex;flex:none;align-items:center}
.mq-set span{font:800 clamp(1.05rem,2.1vw,1.5rem)/1 var(--font-d,'Archivo',sans-serif);text-transform:uppercase;color:#fff;white-space:nowrap}
.mq-set span::after{content:"✦";color:var(--orange,#F36B35);margin:0 22px;font-size:.72em}
.mq-set .out{color:transparent}
@supports ((-webkit-text-stroke:1px #000)){.mq-set .out{-webkit-text-stroke:1.5px rgba(255,255,255,.5)}}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- STATS GRID ---------- */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,22px)}
.stat-card{position:relative;border-radius:20px;overflow:hidden;background:#141412;box-shadow:0 20px 48px -20px rgba(23,23,23,.3);transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .45s;border:1px solid rgba(0,0,0,.08);display:block;aspect-ratio:16/9.2}
.stat-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 28px 60px -22px rgba(243,107,53,.35);border-color:rgba(243,107,53,.4)}
.stat-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.stat-card:hover img{transform:scale(1.03)}

/* ---------- CTA PANEL (orange gradient) ---------- */
.cta-panel{position:relative;border-radius:34px;overflow:hidden;color:#fff;text-align:center;background:radial-gradient(80% 100% at 50% 130%,rgba(255,255,255,.28),transparent 60%),linear-gradient(150deg,#FF8A4C,var(--orange,#F36B35) 50%,#D8481B);padding:clamp(44px,6.5vw,80px) clamp(20px,5vw,60px)}
.cta-in{position:relative;max-width:680px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:18px}
.cta-panel h2{font-size:clamp(2rem,4.6vw,3.4rem);color:#fff}
.cta-panel p{color:rgba(255,255,255,.9);max-width:44ch}

/* ---------- PREMIUM BUTTONS ---------- */
.btn-sweep{position:relative;overflow:hidden}
.btn-sweep::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-70%;width:44%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:sweep 3.2s cubic-bezier(.22,.61,.36,1) infinite}
@keyframes sweep{0%{left:-70%}55%,100%{left:135%}}

/* ---------- RESPONSIVE FOR PREMIUM ELEMENTS ---------- */
@media (max-width:1024px){
  .feat-grid{grid-template-columns:1fr}.feat{min-height:0}
  .prod,.prod.prod-rev{grid-template-columns:1fr!important}
  .prod-media{order:-1;min-height:0;width:100%;aspect-ratio:16/10}
  .stats-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .shell{border-radius:22px}
  .j-track{grid-template-columns:1fr}
}
@media (max-width:640px){
  .stats-grid{grid-template-columns:1fr;gap:14px}
}
@media (prefers-reduced-motion:reduce){
  html.io [data-reveal],html.js .fw,html.js .j-track .j-panel{opacity:1;transform:none}
  .btn-sweep::after{display:none}
  .sec-head::after{transform:scaleX(1)}
  .f-deco{animation:none}
  .hand.shine{color:var(--orange-text,#C2410C);background:none}
}