/* ===========================================================================
   reactbits.css — vanilla CSS ports of react-bits effects
   Source: https://github.com/DavidHDev/react-bits (MIT), ported from React +
   motion/GSAP to plain CSS/JS so the static site keeps a zero-framework build.
   Ported here: GradientText, ShinyText, StarBorder, GlareHover, BlurText,
   ClickSpark, Magnet, CountUp. Behaviour is driven by /assets/reactbits.js,
   which injects the child elements the React versions render.
   =========================================================================== */

/* --- GradientText -------------------------------------------------------- */
/* Animated gradient sweeping through the accent word of a heading.           */
.rb-gradient-text,
h1 .accent,
.hh-title .accent {
  background-image: linear-gradient(to right, #ffe6a1, var(--gold, #e8a400), #f5b301, #ffd27a, #ffe6a1);
  background-size: 300% 100%;
  background-repeat: repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: rb-gradient 8s linear infinite;
}

@keyframes rb-gradient {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* --- ShinyText ----------------------------------------------------------- */
/* A highlight travelling across the text, clipped to the glyphs.             */
.rb-shiny,
.sc-go,
.tb-more a {
  display: inline-block;
  background-image: linear-gradient(120deg,
    currentColor 0%, currentColor 35%,
    #ffffff 50%,
    currentColor 65%, currentColor 100%);
  background-size: 200% auto;
  background-position: 150% center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rb-shine 5s linear infinite;
}

@keyframes rb-shine {
  0%   { background-position: 150% center; }
  60%  { background-position: -50% center; }
  100% { background-position: -50% center; }
}

/* --- StarBorder ---------------------------------------------------------- */
/* Two light "stars" riding along the top and bottom edge of a CTA.           */
.rb-star-host {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.rb-star {
  position: absolute;
  width: 300%;
  height: 12px;
  opacity: .7;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle, var(--rb-star-color, #fff9e2), transparent 10%);
  animation-duration: var(--rb-star-speed, 6s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.rb-star-b { bottom: -5px; right: -250%; animation-name: rb-star-movement-bottom; }
.rb-star-t { top: -5px;    left:  -250%; animation-name: rb-star-movement-top; }

@keyframes rb-star-movement-bottom {
  0%   { transform: translate(0%, 0%);    opacity: 1; }
  100% { transform: translate(-100%, 0%); opacity: 0; }
}

@keyframes rb-star-movement-top {
  0%   { transform: translate(0%, 0%);   opacity: 1; }
  100% { transform: translate(100%, 0%); opacity: 0; }
}

/* --- GlareHover ---------------------------------------------------------- */
/* Diagonal sheen that sweeps across a card on hover. Injected as a child     */
/* element (not ::after) because several cards already use their own ::after. */
.rb-glare-host { position: relative; }

.rb-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(-45deg,
    hsla(0, 0%, 100%, 0) 60%,
    hsla(0, 0%, 100%, .22) 70%,
    hsla(0, 0%, 100%, 0) 78%,
    hsla(0, 0%, 100%, 0) 100%);
  background-size: 250% 250%;
  background-repeat: no-repeat;
  background-position: -100% -100%;
  transition: background-position .65s ease;
}

.rb-glare-host:hover > .rb-glare,
.rb-glare-host:focus-within > .rb-glare {
  background-position: 100% 100%;
}

/* --- BlurText ------------------------------------------------------------ */
/* Per-word blur-in reveal. Words stay in the DOM as plain text for SEO.      */
.rb-blur-word {
  display: inline-block;
  will-change: transform, filter, opacity;
  filter: blur(10px);
  opacity: 0;
  transform: translateY(-24px);
  animation: rb-blur-in .7s cubic-bezier(.22, .61, .36, 1) forwards;
  animation-delay: var(--rb-d, 0ms);
}

@keyframes rb-blur-in {
  0%   { filter: blur(10px); opacity: 0;  transform: translateY(-24px); }
  50%  { filter: blur(5px);  opacity: .5; transform: translateY(3px); }
  100% { filter: blur(0);    opacity: 1;  transform: translateY(0); }
}

/* --- ClickSpark ---------------------------------------------------------- */
canvas.rb-spark {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
  z-index: 9999;
}

/* --- Magnet -------------------------------------------------------------- */
.rb-magnet {
  display: inline-block;
  will-change: transform;
  transition: transform .5s ease-in-out;
}

.rb-magnet.rb-magnet-on { transition: transform .3s ease-out; }

/* --- SpotlightCard ------------------------------------------------------- */
/* Radial highlight that follows the pointer inside a card (react-bits        */
/* SpotlightCard). --rb-mx/--rb-my are set by reactbits.js on mousemove.      */
.rb-spotlight-host { position: relative; }

.rb-spotlight {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(280px circle at var(--rb-mx, 50%) var(--rb-my, 50%),
    var(--rb-spot-color, rgba(245, 179, 1, .12)), transparent 70%);
  opacity: 0;
  transition: opacity .45s ease;
}

.rb-spotlight-host:hover > .rb-spotlight,
.rb-spotlight-host:focus-within > .rb-spotlight {
  opacity: 1;
}

/* --- TiltedCard (lite) --------------------------------------------------- */
/* Gentle 3D tilt following the pointer, on the big image cards only.         */
.rb-tilt {
  transform-style: preserve-3d;
  will-change: transform;
}

/* =========================================================================
   Pros / Cons redesign (rvx-pc) — react-bits-styled cards
   Overrides the flat boxes in style.css: rounded spotlight cards, tinted
   headers with icon chips, and circular check/cross badges per item.
   ========================================================================= */
.rvx-pc { gap: 18px; }

.rvx-pros, .rvx-cons {
  position: relative;
  border-radius: 14px !important;
  padding: 20px 22px 18px;
  overflow: hidden;
  isolation: isolate;
}

.rvx-pros {
  background: linear-gradient(180deg, rgba(0, 182, 122, .10), rgba(0, 182, 122, .03) 55%, rgba(255, 255, 255, .02));
  border: 1px solid rgba(0, 182, 122, .32);
}

.rvx-cons {
  background: linear-gradient(180deg, rgba(255, 90, 90, .09), rgba(255, 90, 90, .03) 55%, rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 110, 110, .30);
}

/* Glowing top edge, in the spirit of react-bits BorderGlow */
.rvx-pros::after, .rvx-cons::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  z-index: 1;
}

.rvx-pros::after { background: linear-gradient(90deg, transparent, rgba(0, 224, 150, .9), transparent); }
.rvx-cons::after { background: linear-gradient(90deg, transparent, rgba(255, 120, 120, .85), transparent); }

/* Header with icon chip */
.rvx-pros h2, .rvx-cons h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .84rem !important;
  letter-spacing: .12em;
  margin: 0 0 14px !important;
}

.rvx-pros h2::before, .rvx-cons h2::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: .8rem;
  font-weight: 900;
  flex: 0 0 auto;
}

.rvx-pros h2::before {
  content: "\2713";
  color: #05130d;
  background: linear-gradient(135deg, #2ee6a8, #00b67a);
  box-shadow: 0 0 14px rgba(0, 224, 150, .45);
}

.rvx-cons h2::before {
  content: "\2717";
  color: #190808;
  background: linear-gradient(135deg, #ff9d9d, #ff6060);
  box-shadow: 0 0 14px rgba(255, 110, 110, .4);
}

/* Items: circular badge instead of a bare glyph */
.rvx-pc li {
  padding-left: 30px !important;
  line-height: 1.5 !important;
}

.rvx-pros li::before, .rvx-cons li::before {
  content: "\2713" !important;
  top: 2px !important;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .62rem;
  font-weight: 900 !important;
  line-height: 1;
}

.rvx-pros li::before {
  color: #7dffd2 !important;
  background: rgba(0, 182, 122, .18);
  border: 1px solid rgba(0, 224, 150, .45);
}

.rvx-cons li::before {
  content: "\2717" !important;
  color: #ffb3b3 !important;
  background: rgba(255, 90, 90, .14);
  border: 1px solid rgba(255, 120, 120, .4);
}

/* --- SplitText ----------------------------------------------------------- */
/* Per-character rise-in for section headings, triggered on scroll into view. */
.rb-split-word { display: inline-block; white-space: nowrap; }

.rb-split-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(.6em);
}

.rb-split.rb-in .rb-split-char {
  animation: rb-char-in .55s cubic-bezier(.22, .61, .36, 1) forwards;
  animation-delay: var(--rb-d, 0ms);
}

@keyframes rb-char-in {
  to { opacity: 1; transform: translateY(0); }
}

/* --- TextType (typing caret, used on the hero search placeholder) -------- */
.rb-caret::after {
  content: "|";
  margin-left: 1px;
  animation: rb-caret 1s steps(1) infinite;
}

@keyframes rb-caret { 50% { opacity: 0; } }

/* --- GlitchText ----------------------------------------------------------- */
/* RGB-split glitch, driven by data-text (set by reactbits.js). Used on 404. */
.rb-glitch {
  position: relative;
  display: inline-block;
}

.rb-glitch::before, .rb-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.rb-glitch::before {
  color: #00e096;
  z-index: -1;
  animation: rb-glitch-a 2.4s steps(2, jump-none) infinite;
}

.rb-glitch::after {
  color: #ff5a5a;
  z-index: -2;
  animation: rb-glitch-b 3.1s steps(2, jump-none) infinite;
}

@keyframes rb-glitch-a {
  0%, 86%, 100% { transform: none; clip-path: none; opacity: 0; }
  88%  { transform: translate(-4px, 2px);  clip-path: inset(12% 0 58% 0); opacity: .85; }
  92%  { transform: translate(3px, -2px);  clip-path: inset(64% 0 8% 0);  opacity: .85; }
  96%  { transform: translate(-2px, 1px);  clip-path: inset(38% 0 34% 0); opacity: .85; }
}

@keyframes rb-glitch-b {
  0%, 88%, 100% { transform: none; clip-path: none; opacity: 0; }
  90%  { transform: translate(4px, -1px);  clip-path: inset(52% 0 22% 0); opacity: .8; }
  94%  { transform: translate(-3px, 2px);  clip-path: inset(8% 0 70% 0);  opacity: .8; }
  98%  { transform: translate(2px, -2px);  clip-path: inset(30% 0 44% 0); opacity: .8; }
}

/* --- ElectricBorder (lite) ------------------------------------------------ */
/* Rotating conic-gradient ring around a highlight box (the review bonus      */
/* box). Falls back to a static gold ring where @property is unsupported.     */
@property --rb-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.rb-eborder {
  position: relative;
  isolation: isolate;
}

.rb-eborder::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--rb-angle, 0deg),
    rgba(245, 179, 1, 0) 0%, rgba(245, 179, 1, .9) 12%,
    rgba(255, 230, 161, 1) 18%, rgba(245, 179, 1, .9) 24%,
    rgba(245, 179, 1, 0) 38%, rgba(245, 179, 1, 0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: rb-eborder-spin 4.5s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes rb-eborder-spin {
  to { --rb-angle: 360deg; }
}

/* --- Noise ---------------------------------------------------------------- */
/* Film-grain overlay (react-bits Noise) — kills the flat "AI gradient" look  */
/* on hero media. SVG turbulence as a data URI; img-src data: is in the CSP.  */
.rb-noise { position: relative; }

.rb-noise::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* --- LogoLoop (marquee) --------------------------------------------------- */
/* Infinite horizontal loop; reactbits.js duplicates the children to make the */
/* scroll seamless. Add class rb-logoloop to any strip of inline items.       */
.rb-logoloop {
  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);
}

.rb-logoloop-track {
  display: flex;
  align-items: center;
  gap: 48px;
  width: max-content;
  animation: rb-marquee var(--rb-marquee-speed, 28s) linear infinite;
}

.rb-logoloop:hover .rb-logoloop-track { animation-play-state: paused; }

@keyframes rb-marquee {
  to { transform: translateX(-50%); }
}

/* Fix: the language dropdown is a nested <ul> inside the nav, so it inherits
   the horizontal `display:flex` from the `.nav ul` rule — items rendered in a
   row. Force it back to a vertical list. */
header.site .nav ul.lang-menu {
  display: block;
  gap: 0;
}

/* --- ScrollFloat (hero parallax) ------------------------------------------ */
.rb-parallax { will-change: transform; }

/* --- LogoLoop strip on the home page -------------------------------------- */
.rb-brandstrip {
  padding: 26px 0 6px;
}

.rb-brandstrip .rb-strip-label {
  text-align: center;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
  margin: 0 0 14px;
}

.rb-brandstrip img {
  height: 26px;
  width: auto;
  opacity: .55;
  filter: grayscale(1) brightness(1.6);
  transition: opacity .25s ease, filter .25s ease;
}

.rb-brandstrip img:hover { opacity: 1; filter: none; }

/* --- Mobile menu: AnimatedList stagger ------------------------------------ */
@media (max-width: 860px) {
  header.site .nav.open ul li {
    animation: rb-menu-in .35s cubic-bezier(.22, .61, .36, 1) backwards;
  }
  header.site .nav.open ul li:nth-child(1) { animation-delay: 30ms; }
  header.site .nav.open ul li:nth-child(2) { animation-delay: 80ms; }
  header.site .nav.open ul li:nth-child(3) { animation-delay: 130ms; }
  header.site .nav.open ul li:nth-child(4) { animation-delay: 180ms; }
  header.site .nav.open ul li:nth-child(5) { animation-delay: 230ms; }
  header.site .nav.open ul li:nth-child(6) { animation-delay: 280ms; }
}

@keyframes rb-menu-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================================
   Home landing sections (stats band, verify cards, dataset chips, guides,
   FAQ) — built on the existing .sec-head / .card / .hstat / .rvx-faq system.
   ========================================================================= */
.rb-homestats { margin-top: 6px; margin-bottom: 8px; }

.rb-verify .card h3, .rb-guides .card h3 {
  margin: 0 0 8px;
  font-size: 1.02rem;
}

.rb-verify .card, .rb-guides .card {
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .09);
}

.rb-verify .card p, .rb-guides .card p {
  margin: 0 0 10px;
  font-size: .92rem;
  line-height: 1.55;
  color: #a7adb8;
}

.rb-verify .card .fine a, .rb-guides ~ .tb-more a { font-weight: 600; }

a.card { display: block; color: inherit; text-decoration: none; }
a.card:hover { text-decoration: none; border-color: rgba(245, 179, 1, .4); }
a.card:hover h3 { color: var(--gold2, #f5b301); }

.rb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.rb-chips a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  color: #d7dce5;
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.rb-chips a:hover {
  border-color: rgba(245, 179, 1, .5);
  background: rgba(245, 179, 1, .08);
  transform: translateY(-1px);
  text-decoration: none;
}

.rb-chips a.rb-chip-more {
  border-color: rgba(245, 179, 1, .45);
  color: var(--gold2, #f5b301);
}

.rb-homefaq { max-width: 760px; margin: 0 auto; }

.rb-homefaq details { border-radius: 10px; margin-bottom: 10px; }

@media (max-width: 860px) {
  .rb-verify.grid.g3, .rb-guides.grid.g3 { grid-template-columns: 1fr; }
}

/* =========================================================================
   Fix: cookie banner vs mobile bottom nav
   .botnav is fixed bottom with z-index 200; the consent banner was z-index
   120, so on mobile the Refuse/Accept buttons rendered UNDERNEATH the nav
   and could not be tapped. While the banner is open it must win, and it
   needs safe-area padding on notched phones.
   ========================================================================= */
.cc-banner {
  z-index: 300;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* --- Reduced motion: keep every effect, drop the movement ---------------- */
@media (prefers-reduced-motion: reduce) {
  .rb-gradient-text, h1 .accent, .hh-title .accent { animation: none; background-position: 0% 50%; }
  .rb-shiny, .sc-go, .tb-more a { animation: none; -webkit-text-fill-color: currentColor; background-image: none; }
  .rb-star { display: none; }
  .rb-glare { transition: none; }
  .rb-blur-word { animation: none; filter: none; opacity: 1; transform: none; }
  .rb-magnet { transition: none; transform: none !important; }
  .rb-spotlight { transition: none; }
  .rb-tilt { transform: none !important; }
  .rb-split-char { opacity: 1; transform: none; animation: none !important; }
  .rb-parallax { transform: none !important; }
  header.site .nav.open ul li { animation: none; }
  .rb-caret::after { animation: none; }
  .rb-glitch::before, .rb-glitch::after { animation: none; opacity: 0; }
  .rb-eborder::before { animation: none; }
  .rb-logoloop-track { animation: none; }
}