/* Influencer UX — marketing site (dark-glass theme) */
:root {
  --cyan:#5de0e6; --blue:#3a6df0; --purple:#9b5de5; --navy:#04121f;
  --ink:#eef4fb; --slate:#9fb3c8;
  --bg:#070a12; --line:rgba(255,255,255,.12); --card:rgba(255,255,255,.05);
  --g-bg:linear-gradient(135deg,#5de0e6,#3a6df0);
  --g-accent:linear-gradient(135deg,#5de0e6,#3a6df0);
  --g-text:linear-gradient(120deg,#fff 26%,#5de0e6 66%,#9b5de5);
  --glass:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  --r:22px; --r-sm:14px; --pill:999px;
  --shadow:0 18px 40px rgba(0,0,0,.35); --shadow-lg:0 30px 70px rgba(0,0,0,.5);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:"Fredoka",var(--font);
}
* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--font); color:var(--ink); background:var(--bg);
  line-height:1.6; -webkit-font-smoothing:antialiased; position:relative; min-height:100vh;
}
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 55% at 10% -5%, rgba(93,224,230,.16), transparent 60%),
    radial-gradient(55% 55% at 105% 105%, rgba(58,109,240,.20), transparent 60%),
    radial-gradient(42% 42% at 85% 8%, rgba(155,93,229,.12), transparent 60%);
}
.container { width:100%; max-width:1120px; margin:0 auto; padding:0 22px; }
h1,h2,h3,h4 { font-family:var(--display); font-weight:700; line-height:1.1; }
.accent-text { background:var(--g-text); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; font-family:var(--display);
  font-weight:600; font-size:16px; padding:12px 22px; border-radius:var(--pill); text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease; cursor:pointer; border:0; }
.btn:hover { transform:translateY(-2px); }
.btn-lg { padding:15px 30px; font-size:17px; }
.btn-primary { background:var(--g-bg); color:#04121f; box-shadow:0 12px 30px rgba(58,109,240,.42); }
.btn-dark { background:rgba(255,255,255,.08); color:#fff; border:1px solid var(--line); }
.btn-ghost { background:rgba(255,255,255,.06); color:#eef4fb; border:1px solid var(--line); }
.btn-ghost:hover { background:rgba(255,255,255,.12); }

.eyebrow { display:inline-block; font-family:var(--display); font-weight:600; font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; color:#7fe7ee; background:rgba(93,224,230,.1);
  border:1px solid rgba(93,224,230,.25); padding:6px 14px; border-radius:var(--pill); margin-bottom:18px; }
.eyebrow-dark { color:#7fe7ee; background:rgba(93,224,230,.1); }

/* Nav */
.nav { position:sticky; top:0; z-index:50; background:rgba(7,10,18,.7);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:70px; gap:20px; }
.brand { display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700; font-size:20px; color:#fff; text-decoration:none; }
.nav-links { display:flex; gap:28px; }
.nav-links a { color:var(--slate); text-decoration:none; font-weight:500; font-size:15px; }
.nav-links a:hover { color:#fff; }
.nav-cta { display:flex; align-items:center; gap:16px; }
.link-muted { color:var(--slate); text-decoration:none; font-weight:500; font-size:15px; }
.link-muted:hover { color:#fff; }

/* Hero — dark with gradient headline (no bright band) */
.hero { padding:84px 0 92px; overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }
.hero-copy { animation:rise .7s ease both; }
.hero h1 { font-size:clamp(40px,6vw,68px); margin-bottom:18px; color:#fff; }
.lead { font-size:clamp(17px,2.2vw,21px); color:var(--slate); max-width:540px; margin-bottom:30px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:18px; }
.hero-note { font-size:14px; color:var(--slate); }

.hero-visual { position:relative; display:grid; place-items:center; animation:rise .7s .1s ease both; }
.phone { width:248px; height:460px; border-radius:38px; background:#0a1326;
  border:8px solid rgba(255,255,255,.1); box-shadow:var(--shadow-lg); padding:16px; position:relative; }
.phone-notch { width:90px; height:6px; background:rgba(255,255,255,.3); border-radius:999px; margin:4px auto 14px; }
.phone-screen { background:linear-gradient(160deg,#0a1326,#0e1a36); border-radius:24px; height:calc(100% - 24px);
  padding:20px 16px; color:#fff; text-align:center; border:1px solid var(--line); }
.mini-brand { font-size:12px; letter-spacing:.1em; color:var(--slate); display:flex; align-items:center; justify-content:center; gap:7px; }
.mini-logo { width:14px; height:14px; border-radius:4px; background:var(--g-bg); display:inline-block; }
.mini-title { font-family:var(--display); font-weight:700; font-size:22px; margin:22px 0 18px; }
.mini-cards { display:grid; gap:10px; }
.mini-card { background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:14px; padding:13px;
  font-family:var(--display); font-weight:600; font-size:15px; display:flex; align-items:center; gap:10px; }
.mini-card span { font-size:20px; }
.mini-cta { margin-top:20px; font-size:13px; color:var(--slate); }
.float-qr { position:absolute; top:30px; right:4px; background:var(--glass); -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px); border:1px solid var(--line); padding:12px; border-radius:18px; box-shadow:var(--shadow); animation:float 4s ease-in-out infinite; }
.float-badge { position:absolute; bottom:42px; left:0; background:var(--g-bg); color:#04121f; font-family:var(--display);
  font-weight:600; padding:11px 16px; border-radius:var(--pill); box-shadow:0 10px 24px rgba(58,109,240,.4); animation:float 4s 1s ease-in-out infinite; }

/* Trust */
.trust { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.02); }
.trust-inner { display:flex; align-items:center; flex-wrap:wrap; gap:14px 30px; padding:22px; justify-content:center; }
.trust span { color:var(--slate); font-size:14px; }
.trust strong { font-family:var(--display); color:#cfe0f2; font-size:18px; opacity:.8; }

/* Sections */
.section { padding:88px 0; }
.section-soft { background:rgba(255,255,255,.02); }
.section-head { text-align:center; max-width:660px; margin:0 auto 52px; }
.section-head h2 { font-size:clamp(28px,4vw,42px); color:#fff; }
.section-lead { color:var(--slate); font-size:18px; margin-top:14px; }

/* Steps */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.step { background:var(--glass); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid var(--line); border-radius:var(--r); padding:28px 24px; box-shadow:var(--shadow); }
.step-num { width:46px; height:46px; border-radius:14px; background:var(--g-bg); color:#04121f;
  font-family:var(--display); font-weight:700; font-size:22px; display:grid; place-items:center; margin-bottom:18px; }
.step h3 { font-size:19px; margin-bottom:8px; color:#fff; }
.step p { color:var(--slate); font-size:15px; }

/* Cards-3 / features */
.cards-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.game-card { background:var(--glass); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid var(--line); border-radius:var(--r); padding:32px 28px; box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.game-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(93,224,230,.4); }
.game-emoji { font-size:40px; margin-bottom:14px; }
.game-card h3 { font-size:22px; margin-bottom:10px; color:#fff; }
.game-card p { color:var(--slate); margin-bottom:18px; }
.win-tag { display:inline-block; font-family:var(--display); font-weight:600; font-size:13px; color:#7fe7ee;
  background:rgba(93,224,230,.1); border:1px solid rgba(93,224,230,.22); padding:6px 14px; border-radius:var(--pill); }

/* Benefits */
.benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.benefit { padding:26px 24px; border-radius:var(--r); border:1px solid var(--line); background:var(--glass);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.b-icon { font-size:28px; width:56px; height:56px; display:grid; place-items:center; background:rgba(93,224,230,.1);
  border:1px solid rgba(93,224,230,.2); border-radius:16px; margin-bottom:16px; }
.benefit h3 { font-size:18px; margin-bottom:8px; color:#fff; }
.benefit p { color:var(--slate); font-size:15px; }

/* Analytics */
.analytics-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.analytics-copy h2 { font-size:clamp(28px,4vw,40px); color:#fff; margin-bottom:14px; }
.analytics-copy .section-lead { margin:0 0 26px; }
.stats { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.stat { background:var(--glass); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid var(--line); border-radius:var(--r); padding:28px; text-align:center; box-shadow:var(--shadow); }
.stat-num { display:block; font-family:var(--display); font-weight:700; font-size:40px; background:var(--g-text);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat-label { color:var(--slate); font-size:15px; }

/* CTA band */
.cta-band { text-align:center; padding:84px 0; }
.cta-inner h2 { font-size:clamp(30px,4.5vw,46px); margin-bottom:14px; color:#fff; }
.cta-inner p { font-size:18px; color:var(--slate); margin-bottom:28px; }

/* FAQ */
.faq-wrap { max-width:760px; }
.faq details { background:var(--glass); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:4px 22px; margin-bottom:14px; }
.faq summary { font-family:var(--display); font-weight:600; font-size:17px; color:#fff; cursor:pointer;
  padding:16px 0; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-size:24px; color:#5de0e6; }
.faq details[open] summary::after { content:"\2013"; }
.faq details p { color:var(--slate); padding:0 0 18px; }

/* Footer */
.footer { background:rgba(255,255,255,.02); border-top:1px solid var(--line); color:var(--slate); padding:56px 0 28px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; }
.brand-light { color:#fff; }
.footer-brand p { margin-top:12px; color:var(--slate); }
.footer-col h4 { font-size:15px; color:#fff; margin-bottom:14px; }
.footer-col a { display:block; color:var(--slate); text-decoration:none; font-size:15px; margin-bottom:9px; }
.footer-col a:hover { color:#5de0e6; }
.footer-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:40px;
  padding-top:22px; border-top:1px solid var(--line); font-size:14px; color:var(--slate); }

/* Reveal */
.js .reveal { opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity:1; transform:none; }
@keyframes rise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-12px); } }

/* Responsive */
@media (max-width:920px) {
  .hero-grid { grid-template-columns:1fr; text-align:center; }
  .hero-copy { order:1; } .hero-visual { order:2; margin-top:20px; }
  .lead { margin-left:auto; margin-right:auto; } .hero-actions { justify-content:center; }
  .steps { grid-template-columns:repeat(2,1fr); } .benefits { grid-template-columns:repeat(2,1fr); }
  .analytics-grid { grid-template-columns:1fr; gap:32px; }
}
@media (max-width:680px) {
  .nav-links { display:none; } .cards-3 { grid-template-columns:1fr; } .benefits { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr; } .stats { grid-template-columns:1fr 1fr; } .footer-grid { grid-template-columns:1fr 1fr; }
  .section { padding:64px 0; }
}
@media (max-width:420px) { .nav-cta .link-muted { display:none; } }
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } .js .reveal { opacity:1; transform:none; } }