/* ═══════════════════════════════════════════════════════════════════
   RYVATEX FLAIR — the redesign motion & depth layer (public site).
   Loads AFTER responsive.css. Additive only: nothing here changes
   layout of existing components unless a page opts in via fl-* classes.
   Motion honors prefers-reduced-motion. House ease: cubic-bezier(.16,1,.3,1).
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --fl-ease: cubic-bezier(.16,1,.3,1);
  --fl-shadow-sm: 0 1px 2px rgba(0,0,0,.05), 0 10px 30px rgba(0,0,0,.07);
  --fl-shadow-md: 0 2px 6px rgba(0,0,0,.07), 0 24px 60px rgba(0,0,0,.12);
}

/* global finish */
::selection{background:var(--orange);color:#fff}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:20px;border:3px solid var(--bg)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px}
.btn-primary,.btn-outline{transition:transform .25s var(--fl-ease),box-shadow .25s var(--fl-ease),background .2s,border-color .2s}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px var(--orange-glow)}
.btn-primary:active,.btn-outline:active{transform:scale(.97)}

/* ── scroll reveal (fl-rise on any element; fl-stagger on a container) ── */
html.fl .fl-rise{opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--fl-ease),transform .7s var(--fl-ease)}
html.fl .fl-rise.fl-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html.fl .fl-rise{opacity:1;transform:none;transition:none}
}

/* ── hero: the split with the living diorama ── */
.fl-hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:44px;align-items:center;
  max-width:1200px;margin:0 auto;text-align:left}
.fl-hero-copy .hero-badge{margin-left:0}
.fl-hero-grid h1,.fl-hero-grid p{margin-left:0!important;margin-right:0!important}
.fl-hero-grid .hero-btns{justify-content:flex-start!important}
/* word reveal */
.flw{display:inline-block;overflow:hidden;vertical-align:top}
.flw>span{display:inline-block;transform:translateY(110%);transition:transform .85s var(--fl-ease)}
html.fl .fl-hero-copy.fl-shown .flw>span{transform:translateY(0)}
html:not(.fl) .flw>span{transform:none}
.flw:nth-child(2)>span{transition-delay:.08s}
.flw:nth-child(3)>span{transition-delay:.16s}
@media(prefers-reduced-motion:reduce){.flw>span{transform:none!important;transition:none}}
/* diorama panel */
.fl-dio{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:1/.96;
  background:radial-gradient(120% 100% at 50% 0%,#FFFFFF,#F6F4F1 70%);
  box-shadow:0 2px 3px rgba(13,12,11,.04),0 24px 64px -18px rgba(13,12,11,.18);
  border:1px solid var(--border)}
.fl-dio canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.fl-dio .fl-dio-tag{position:absolute;top:14px;left:14px;font-family:var(--font-body);font-weight:500;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);
  background:rgba(13,12,11,.03);border:1px solid var(--border);border-radius:999px;padding:6px 13px}
.fl-dio .fl-dio-count{position:absolute;left:14px;bottom:13px;font-family:var(--font-body);font-size:12px;
  color:var(--text-sub);background:rgba(255,255,255,.75);border:1px solid var(--border);
  border-radius:9px;padding:7px 11px;backdrop-filter:blur(6px)}
.fl-dio .fl-dio-count b{color:var(--orange);font-variant-numeric:tabular-nums;font-weight:600}
[data-theme="dark"] .fl-dio{background:radial-gradient(120% 100% at 50% 0%,#181818,#0F0F0F 70%)}
[data-theme="dark"] .fl-dio .fl-dio-tag{background:rgba(255,255,255,.04)}
[data-theme="dark"] .fl-dio .fl-dio-count{background:rgba(20,20,20,.72)}
@media(max-width:900px){
  .fl-hero-grid{grid-template-columns:1fr;gap:34px;text-align:center}
  .fl-hero-grid .hero-btns{justify-content:center!important}
  .fl-hero-copy .hero-badge{margin-left:auto;margin-right:auto}
  .fl-hero-grid h1,.fl-hero-grid p{margin-left:auto!important;margin-right:auto!important}
  .fl-dio{max-width:480px;margin:0 auto;width:100%}
}

/* ── stats count-up: tabular digits so nothing jumps ── */
.stat-val{font-variant-numeric:tabular-nums}

/* ── trusted-by marquee (pure CSS loop; JS duplicates the track) ── */
.fl-marquee{padding:34px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:var(--bg-section);overflow:hidden}
.fl-marquee .fl-mq-label{text-align:center;font-family:var(--font-body);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin-bottom:20px}
.fl-mq{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.fl-mq-track{display:flex;width:max-content;gap:58px;animation:fl-scroll 32s linear infinite}
.fl-mq:hover .fl-mq-track{animation-play-state:paused}
@keyframes fl-scroll{to{transform:translateX(-50%)}}
.fl-mq-track span{font-family:var(--font-display);font-weight:700;font-size:20px;
  color:var(--text-muted);opacity:.75;white-space:nowrap;letter-spacing:-.01em}
@media(prefers-reduced-motion:reduce){.fl-mq-track{animation:none}}

/* ── founding CTA glow ── */
.fl-glow{position:relative;overflow:hidden}
.fl-glow::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 62% 85% at 50% 118%,var(--orange-glow),transparent 70%);
  animation:fl-breathe 7s var(--fl-ease) infinite}
@keyframes fl-breathe{0%,100%{opacity:.7}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.fl-glow::before{animation:none}}
.fl-glow>*{position:relative;z-index:1}

/* ── Phase B: marketplace cards — premium hover, staggered entrance ── */
.tool-card{transition:transform .35s var(--fl-ease),box-shadow .35s var(--fl-ease),border-color .25s}
.tool-card:hover{transform:translateY(-6px);box-shadow:var(--fl-shadow-md);border-color:var(--border-hi)}
.tool-card:active{transform:translateY(-2px) scale(.99)}
.tool-card__emoji{transition:transform .35s var(--fl-ease)}
.tool-card:hover .tool-card__emoji{transform:scale(1.12) rotate(-3deg)}

/* ── Phase B: founding perks breathe on approach ── */
.founding-perk{transition:transform .35s var(--fl-ease),box-shadow .35s var(--fl-ease),border-color .25s}
.founding-perk:hover{transform:translateY(-5px);box-shadow:var(--fl-shadow-md);border-color:var(--orange)}