/* MeraFraud — shared marketing site styles */
:root{
  --bg-deep:#0a0620;
  --purple-1:#4c1d95;
  --purple-2:#7c3aed;
  --pink-1:#ec4899;
  --pink-2:#f472b6;
  --cyan:#22d3ee;
  --text-hi:#f5f3ff;
  --text-lo:#b8aee0;
  --safe:#34d399;
  --review:#fbbf24;
  --block:#fb4570;
  --card-bg:rgba(255,255,255,0.045);
  --card-border:rgba(255,255,255,0.09);
  --radius:18px;
  font-family:'Space Grotesk', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{
  background:
    radial-gradient(circle at 12% -10%, rgba(124,58,237,0.55), transparent 40%),
    radial-gradient(circle at 90% 8%, rgba(236,72,153,0.35), transparent 45%),
    radial-gradient(circle at 50% 110%, rgba(34,211,238,0.18), transparent 50%),
    var(--bg-deep);
  color:var(--text-hi);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
a{color:inherit;}
.wrap{max-width:1080px; margin:0 auto; padding:0 28px;}
.wrap-narrow{max-width:760px; margin:0 auto; padding:0 28px;}

/* ---------- Header / nav ---------- */
header{
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 0; border-bottom:1px solid rgba(255,255,255,0.08);
  max-width:1080px; margin:0 auto; padding-left:28px; padding-right:28px;
}
.logo{display:flex; align-items:center; gap:12px; text-decoration:none;}
.logo-mark{
  width:32px; height:32px;
  background:conic-gradient(from 120deg, var(--purple-2), var(--pink-1), var(--cyan), var(--purple-2));
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  filter: drop-shadow(0 0 10px rgba(236,72,153,0.5));
}
.logo-text{ font-family:'Fraunces', serif; font-weight:700; font-size:21px; }
.logo-text span{color:var(--pink-2);}
.main-nav{ display:flex; align-items:center; gap:28px; }
.main-nav a{
  font-size:14px; color:var(--text-lo); text-decoration:none; transition:color .15s;
}
.main-nav a:hover, .main-nav a.active{ color:var(--text-hi); }
.nav-cta{
  text-decoration:none; font-size:13.5px; font-weight:600; color:#fff !important;
  padding:10px 20px; border-radius:999px;
  background:linear-gradient(135deg,var(--purple-2),var(--pink-1));
}
.mobile-toggle{ display:none; }
@media (max-width:760px){
  .main-nav{ display:none; }
  .mobile-toggle{ display:block; }
}

/* ---------- Footer ---------- */
footer{
  border-top:1px solid rgba(255,255,255,0.08); margin-top:100px; padding:48px 0 40px;
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px;
}
.footer-col h4{ font-size:13px; color:var(--text-hi); margin-bottom:14px; font-weight:600; }
.footer-col a{ display:block; font-size:13.5px; color:var(--text-lo); text-decoration:none; margin-bottom:10px; }
.footer-col a:hover{ color:var(--text-hi); }
.footer-brand p{ color:var(--text-lo); font-size:13.5px; max-width:280px; margin-top:12px; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding-top:24px; border-top:1px solid rgba(255,255,255,0.06);
  font-size:12.5px; color:var(--text-lo);
}
@media (max-width:700px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

/* ---------- Generic components ---------- */
.eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:12.5px; color:var(--cyan);
  text-transform:uppercase; letter-spacing:2px; margin-bottom:14px; display:block;
}
h1{ font-family:'Fraunces', serif; font-weight:600; line-height:1.1; letter-spacing:-0.5px; }
h2{ font-family:'Fraunces', serif; font-weight:600; line-height:1.2; }
h3{ font-family:'Fraunces', serif; font-weight:600; line-height:1.3; }
p{ color:var(--text-lo); }
h1 em, h2 em{
  font-style:italic; font-weight:400; color:transparent;
  background:linear-gradient(120deg,var(--pink-2),var(--cyan));
  -webkit-background-clip:text; background-clip:text;
}

.btn-primary{
  display:inline-block; text-decoration:none; padding:14px 28px; border:none; border-radius:12px;
  font-family:'Space Grotesk'; font-weight:600; font-size:14.5px; color:#fff !important; cursor:pointer;
  background:linear-gradient(135deg,var(--purple-2),var(--pink-1));
  box-shadow:0 8px 24px -8px rgba(236,72,153,0.6);
}
.btn-secondary{
  display:inline-block; text-decoration:none; padding:13px 26px; border-radius:12px; font-size:14px;
  background:transparent; border:1px solid var(--card-border); color:var(--text-hi) !important;
}

.card{
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius); padding:28px;
}

.section{ padding:70px 0; }
.section-head{ max-width:600px; margin-bottom:44px; }
.section-head p{ margin-top:12px; font-size:15.5px; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:800px){ .grid-2, .grid-3{ grid-template-columns:1fr; } }

/* ---------- Motion: living background ---------- */
html,body{
  background-size: 200% 200%, 200% 200%, 200% 200%, auto;
  animation: bgPan 26s ease-in-out infinite alternate;
}
@keyframes bgPan{
  0%{ background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; }
  100%{ background-position: 20% 15%, 80% 20%, 45% 85%, 0 0; }
}

/* ---------- Motion: scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-1{ transition-delay:.05s; }
.reveal-2{ transition-delay:.15s; }
.reveal-3{ transition-delay:.25s; }
.reveal-4{ transition-delay:.35s; }
.reveal-5{ transition-delay:.45s; }
.reveal-6{ transition-delay:.55s; }

/* ---------- Motion: marquee ticker ---------- */
.marquee{
  overflow:hidden; border-top:1px solid rgba(255,255,255,0.08); border-bottom:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.02); padding:16px 0; white-space:nowrap;
}
.marquee-track{ display:inline-flex; gap:48px; animation:marqueeScroll 32s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-item{
  font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--text-lo);
  display:inline-flex; align-items:center; gap:10px; letter-spacing:0.3px;
}
.marquee-item .dot{ width:5px; height:5px; border-radius:50%; background:var(--pink-2); display:inline-block; }
@keyframes marqueeScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------- Motion: floating accent orb (decorative) ---------- */
.floating-orb{
  position:fixed; width:340px; height:340px; border-radius:50%; pointer-events:none; z-index:-1;
  background:radial-gradient(circle, rgba(236,72,153,0.18), transparent 70%);
  animation:orbFloat 18s ease-in-out infinite;
}
@keyframes orbFloat{
  0%,100%{ transform:translate(0,0); }
  50%{ transform:translate(40px,-60px); }
}

@media (prefers-reduced-motion: reduce){
  html,body{ animation:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .marquee-track{ animation:none; }
  .floating-orb{ animation:none; }
}
.prose h2{ font-size:22px; margin:36px 0 14px; }
.prose h3{ font-size:17px; margin:24px 0 10px; color:var(--text-hi); }
.prose p{ margin-bottom:14px; font-size:14.5px; }
.prose ul{ margin:0 0 14px 20px; color:var(--text-lo); font-size:14.5px; }
.prose li{ margin-bottom:6px; }
.updated-note{
  font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-lo);
  background:rgba(255,255,255,0.04); border:1px solid var(--card-border);
  padding:10px 16px; border-radius:10px; display:inline-block; margin-bottom:32px;
}