/* ─── Fonts ─── */
@font-face {
  font-family: 'Plein';
  src: url('fonts/Plein-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plein';
  src: url('fonts/Plein-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plein';
  src: url('fonts/Plein-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plein';
  src: url('fonts/Plein-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --purple-start: #7d73ff;
  --purple-end:   #8f84ff;
  --purple:       #9088ff;
  --purple-light: #ede9ff;
  --purple-mid:   #c8c4ff;
  --lime:         #dff97e;
  --lime-dark:    #8b540c;
  --dark:         #1f201b;
  --dark2:        #18181F;
  --white:        #ffffff;
  --offwhite:     #f7f5ff;
  --gray:         #6b6b80;
  --gray-light:   #ababc0;
  --gradient:     linear-gradient(90deg, #7d73ff 0%, #897dff 52%, #8f84ff 100%);
  --card-border:  rgba(0,0,0,0.07);
  --card-shadow:  0 2px 16px rgba(0,0,0,0.06);
}

html { scroll-behavior: smooth; }
body { font-family: 'Plein', sans-serif; background: var(--offwhite); color: var(--dark); overflow-x: hidden; }

/* ─── Utility ─── */
.lime-chip   { display:inline; background:none; color:inherit; font-weight:inherit; padding:0; border-radius:0; }
.dark-chip   { display:inline-block; background:var(--dark);   color:white;       font-weight:900; padding:2px 14px; border-radius:10px; }
.purple-chip { display:inline-block; background:var(--purple); color:white;       font-weight:900; padding:2px 13px; border-radius:9px; }

.pill {
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase;
  padding:6px 16px; border-radius:999px; margin-bottom:24px;
}
.pill.on-dark  { background:rgba(255,255,255,0.11); border:1px solid rgba(255,255,255,0.2); color:rgba(255,255,255,0.85); }
.pill.on-light { background:rgba(0,0,0,0.05); border:1px solid rgba(0,0,0,0.08); color:var(--gray); }
.pill.lime     { background:var(--lime); border:1px solid transparent; color:var(--dark); }

/* ─── Buttons ─── */
.btn-app {
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:white; text-decoration:none;
  width:143.6px; height:48px;
  padding:0; border-radius:6px;
  border:none;
  box-shadow:none;
  transition:transform .12s, box-shadow .12s;
  font-family:'Plein',sans-serif;
  overflow:hidden;
}
.btn-app:hover { transform:translateY(-1px); }
.btn-app img { width:100%; height:100%; display:block; object-fit:contain; }

.btn-lime {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--lime); color:var(--dark);
  font-family:'Plein',sans-serif; font-weight:700; font-size:15px;
  padding:13px 28px; border-radius:999px;
  border:2px solid var(--dark);
  box-shadow:3px 3px 0 var(--dark);
  text-decoration:none;
  transition:transform .12s, box-shadow .12s;
}
.btn-lime:hover { transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--dark); }

.btn-ghost {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:white; text-decoration:none;
  padding:13px 16px; border-radius:6px;
  border:1px solid rgba(255,255,255,0.72);
  font-family:'Plein',sans-serif; font-weight:500; font-size:14px;
  letter-spacing:.1px;
  transition:background .15s;
}
.btn-ghost-icon { width:20px; height:20px; display:block; flex-shrink:0; }
.btn-ghost-icon path {
  stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; fill:none;
}
.btn-ghost:hover { background:rgba(255,255,255,0.08); }

/* ━━━━━━━━━━━━━━━━━━━━━ NAV ━━━━━━━━━━━━━━━━━━━━━ */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:top .28s ease;
}
.nav-inner {
  width:100%;
  height:80px;
  padding:14px 32px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(125,115,255,0.78);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,0.15);
  transition:
    width .28s ease,
    padding .28s ease,
    border-radius .28s ease,
    background .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    margin .28s ease;
}
.nav-brand { display:flex; align-items:center; text-decoration:none; }
.nav-logo  { width:175px; height:50px; object-fit:contain; display:block; }
.nav-name  { display:none; }
.nav-right { display:flex; align-items:center; gap:20px; }
.nav-links { display:flex; gap:18px; list-style:none; }
.nav-links a {
  color:white; text-decoration:none; font-size:14px; font-weight:500;
  letter-spacing:.25px; line-height:20px; padding:10px 16px;
  display:inline-flex; align-items:center; transition:opacity .15s;
}
.nav-links a:hover { color:white; }
.nav-cta {
  display:inline-flex; align-items:center; gap:6px;
  background:linear-gradient(90deg, var(--lime) 0%, #cbf16a 100%); color:#26291b;
  font-family:'Plein',sans-serif; font-weight:500; font-size:14px;
  padding:10px 16px; border-radius:999px;
  border:1.6px solid var(--dark); text-decoration:none;
  box-shadow:0 2px 0 var(--dark);
  letter-spacing:.2px; line-height:20px;
  transition:transform .12s, box-shadow .12s;
}
.nav-cta-icon { width:20px; height:20px; display:block; flex-shrink:0; }
.nav-cta-icon path {
  stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; fill:none;
}
.nav-cta:hover { transform:translateY(-1px); }
.nav.scrolled { top:24px; }
.nav.scrolled .nav-inner {
  width:max-content; max-width:calc(100vw - 32px);
  margin:0 auto;
  padding:8px 20px;
  border:1px solid rgba(255,255,255,0.15);
  border-radius:999px;
  background:rgba(0,0,0,0.12);
  box-shadow:0 12px 30px rgba(69,48,155,0.18);
}
.nav.scrolled .nav-logo { width:40px; height:50px; }

/* ━━━━━━━━━━━━━━━━━━━━━ HERO ━━━━━━━━━━━━━━━━━━━━━ */
.hero {
  background:var(--gradient);
  padding:152px 40px 0;
  position:relative; overflow:hidden;
  min-height:929px;
  display:flex; flex-direction:column; align-items:center;
}
.hero-blob { position:absolute; border-radius:50%; background:rgba(255,255,255,0.09); pointer-events:none; }
.hero-blob-1 { width:640px; height:640px; top:-220px; right:-150px; }
.hero-blob-2 { width:440px; height:440px; bottom:-140px; left:-130px; }

.hero-inner {
  position:relative; z-index:2;
  width:100%; max-width:1176px;
  display:grid; grid-template-columns:510px 546px;
  justify-content:space-between;
  gap:60px; align-items:start;
}

.hero-bubble {
  display:none;
  width:155.3px; height:54.36px;
  background:url('images/greeting-section.webp') no-repeat left top / 400px 138px;
  color:transparent;
  position:relative; margin-bottom:24px;
  animation:float 4s ease-in-out infinite;
}
.hero-bubble::after { content:none; }

.hero-brand { margin-bottom:24px; }
.hero-mark { width:400px; max-width:100%; height:auto; display:block; animation:float 3.2s ease-in-out infinite; }
.hero-logo, .hero-wordmark { display:none; }

.hero-headline {
  font-size:36px; font-weight:700; color:white; line-height:1.39;
  letter-spacing:.25px; margin-bottom:8px; max-width:494px;
}
.hero-sub {
  font-size:17px; font-weight:400; color:white; margin-bottom:24px;
  letter-spacing:.1px; line-height:1.7; max-width:494px;
}
.hero-cta-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:24px; }

.hero-trust { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:500; color:white; }
.trust-avatars { display:flex; }
.trust-av {
  width:30px; height:30px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.45);
  background:var(--purple-mid);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:900; color:var(--dark);
  margin-left:-8px;
}
.trust-av:first-child { margin-left:0; }

.hero-right { display:flex; justify-content:flex-end; align-items:flex-start; }
.hero-demo { width:546px; max-width:100%; height:auto; display:block; }

.hero-collage { display:none; position:relative; z-index:2; width:100%; max-width:1080px; margin:24px auto 0; }
.hero-collage img { width:100%; height:21.5px; object-fit:cover; display:block; }

@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }

/* ━━━━━━━━━━━━━━━━━━━━━ MARQUEE ━━━━━━━━━━━━━━━━━━━━━ */
.marquee-wrap { background:var(--lime); padding:13px 0; overflow:hidden; border-top:2px solid var(--dark); border-bottom:2px solid var(--dark); }
.marquee-track { display:flex; white-space:nowrap; animation:mq 26s linear infinite; }
.marquee-track:hover { animation-play-state:paused; }
.mq-item { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:900; color:var(--dark); padding:0 20px; text-transform:uppercase; letter-spacing:.5px; flex-shrink:0; }
.mq-dot { width:4px; height:4px; border-radius:50%; background:var(--dark); flex-shrink:0; }
@keyframes mq { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* ━━━━━━━━━━━━━━━━━━━━━ CREATOR STRIP ━━━━━━━━━━━━━━━━━━━━━ */
.strip-section { background:white; padding:52px 40px; }
.strip-inner { max-width:1040px; margin:0 auto; }
.strip-label { font-size:12px; font-weight:800; color:var(--gray-light); text-transform:uppercase; letter-spacing:1px; text-align:center; margin-bottom:24px; }
.strip-scroll { overflow:hidden; position:relative; }
.strip-scroll::before, .strip-scroll::after { content:''; position:absolute; top:0; bottom:0; width:72px; z-index:2; pointer-events:none; }
.strip-scroll::before { left:0; background:linear-gradient(to right, white, transparent); }
.strip-scroll::after  { right:0; background:linear-gradient(to left, white, transparent); }
.strip-track { display:flex; gap:10px; white-space:nowrap; animation:strip-scroll 30s linear infinite; }
.strip-track:hover { animation-play-state:paused; }
@keyframes strip-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.creator-tag {
  display:inline-flex; align-items:center; gap:9px;
  background:var(--offwhite); border:1px solid rgba(0,0,0,0.07);
  border-radius:999px; padding:9px 16px; flex-shrink:0;
  transition:background .15s; cursor:default;
}
.creator-tag:hover { background:var(--purple-light); }
.ctag-av { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:900; flex-shrink:0; }
.ctag-name { font-size:13px; font-weight:900; color:var(--dark); }
.ctag-type { font-size:11px; font-weight:700; color:var(--gray-light); }

/* ━━━━━━━━━━━━━━━━━━━━━ STATS ━━━━━━━━━━━━━━━━━━━━━ */
.stats-section { background:var(--offwhite); padding:72px 40px; }
.stats-inner { max-width:1040px; margin:0 auto; }
.stats-top { text-align:center; margin-bottom:48px; }
.stats-heading { font-size:clamp(26px,5vw,52px); font-weight:900; color:var(--dark); letter-spacing:-.5px; line-height:1.2; margin-bottom:14px; }
.stats-sub { font-size:17px; font-weight:600; color:var(--gray); line-height:1.75; max-width:500px; margin:0 auto; }
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.stat-card {
  background:white; border:1px solid var(--card-border); border-radius:20px;
  padding:24px 20px; text-align:center; box-shadow:var(--card-shadow);
  transition:transform .18s, box-shadow .18s;
}
.stat-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.09); }
.stat-num { font-size:40px; font-weight:900; color:var(--dark); letter-spacing:-.5px; line-height:1; margin-bottom:6px; }
.stat-num.p { color:var(--purple); }
.stat-num.g { color:var(--lime-dark); }
.stat-accent { color:var(--purple); }
.stat-lbl { font-size:12px; font-weight:700; color:var(--gray-light); text-transform:uppercase; letter-spacing:.5px; line-height:1.4; }

/* ━━━━━━━━━━━━━━━━━━━━━ CREATOR/FAN TABS ━━━━━━━━━━━━━━━━━━━━━ */
.for-section {
  position:relative; padding:80px 40px;
  background:var(--dark2);
  transition:background 0.55s ease;
}
.for-section.fan-mode { background:transparent; }
.for-section::before {
  content:''; position:absolute; inset:0; z-index:0;
  background:var(--gradient);
  opacity:0;
  transition:opacity 0.55s ease;
}
.for-section.fan-mode::before { opacity:1; }
.for-inner { max-width:1040px; margin:0 auto; position:relative; z-index:1; }

/* Tab switcher */
.tab-switch-wrap { display:flex; justify-content:center; margin-bottom:60px; }
.tab-switch {
  position:relative;
  display:inline-flex;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:999px;
  padding:5px;
  gap:0;
}
.tab-pill {
  position:absolute; top:5px; left:5px;
  border-radius:999px;
  background:white;
  transition:transform 0.42s cubic-bezier(0.34,1.52,0.64,1), width 0.3s ease;
  pointer-events:none;
  box-shadow:0 2px 12px rgba(0,0,0,0.16);
  will-change:transform, width;
}
.tab-btn {
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 32px; border-radius:999px;
  font-family:'Plein',sans-serif; font-weight:700; font-size:16px;
  cursor:pointer; border:none;
  background:transparent; color:rgba(255,255,255,0.5);
  transition:color 0.3s ease;
  white-space:nowrap; user-select:none;
}
.tab-btn.active { color:var(--dark); }
.tab-btn span { font-size:18px; }

/* Panels container */
.for-panels-wrap { position:relative; }
.for-panel {
  position:absolute; inset:0;
  opacity:0; pointer-events:none;
  transition:opacity 0.38s ease, transform 0.38s ease;
}
.for-panel.leaving-left  { opacity:0; transform:translateX(-28px); }
.for-panel.leaving-right { opacity:0; transform:translateX(28px); }
.for-panel.active {
  position:relative;
  opacity:1; pointer-events:all;
  transform:translateX(0);
  transition:opacity 0.38s ease 0.08s, transform 0.38s ease 0.08s;
}

/* Creator panel content */
.for-heading {
  font-size:clamp(28px,5vw,54px);
  font-weight:900; line-height:1.15; letter-spacing:-.5px; margin-bottom:14px; color:white;
}
.for-heading .accent { color:var(--lime); }
.for-sub { font-size:17px; font-weight:600; color:rgba(255,255,255,0.76); line-height:1.8; max-width:560px; margin-bottom:44px; }

.feat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:28px; }
.feat-card {
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1);
  border-radius:18px; padding:24px 20px;
  transition:background .18s, transform .18s;
}
.feat-card:hover { background:rgba(255,255,255,0.11); transform:translateY(-2px); }
.feat-icon { font-size:26px; display:block; margin-bottom:12px; }
.feat-title { font-size:15px; font-weight:900; color:white; margin-bottom:6px; }
.feat-desc  { font-size:13px; font-weight:600; color:rgba(255,255,255,0.74); line-height:1.65; }

/* Earnings bar */
.earn-bar {
  background:var(--lime); border-radius:20px; padding:26px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.earn-text { font-size:clamp(17px,2.5vw,24px); font-weight:900; color:var(--dark); line-height:1.35; }
.earn-text small { display:block; font-size:13px; font-weight:700; color:rgba(0,0,0,0.42); margin-top:5px; }
.earn-badge { background:var(--dark); color:white; border-radius:16px; padding:16px 24px; text-align:center; flex-shrink:0; }
.earn-pct { font-size:38px; font-weight:900; letter-spacing:.2px; line-height:1; }
.earn-lbl { font-size:10px; font-weight:700; opacity:.5; text-transform:uppercase; letter-spacing:.5px; margin-top:3px; }

/* Fan panel content */
.fan-heading { color:white; }
.fan-sub { font-size:17px; font-weight:600; color:rgba(255,255,255,0.8); line-height:1.8; max-width:560px; margin-bottom:44px; }
.fan-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.fan-card {
  background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.2);
  border-radius:18px; padding:28px 20px;
  transition:background .18s, transform .18s;
}
.fan-card:hover { background:rgba(255,255,255,0.18); transform:translateY(-2px); }
.fan-icon  { font-size:28px; display:block; margin-bottom:12px; }
.fan-title { font-size:16px; font-weight:900; color:white; margin-bottom:7px; }
.fan-desc  { font-size:13px; font-weight:600; color:rgba(255,255,255,0.78); line-height:1.65; }
.fan-plain-accent { color:var(--lime); }

.for-panels-wrap { min-height:470px; }

/* ━━━━━━━━━━━━━━━━━━━━━ EARN / PRODUCTS ━━━━━━━━━━━━━━━━━━━━━ */
.earn-section {
  background: #0B0B12;
  padding: 88px 40px 100px;
  position: relative;
  overflow: hidden;
}
.earn-glow {
  position: absolute; border-radius: 50%; filter: blur(80px);
  pointer-events: none; opacity: 0.28;
}
.earn-glow-1 { width: 380px; height: 380px; background: #A590FF; top: -60px;  left: 5%; }
.earn-glow-2 { width: 340px; height: 340px; background: #C8F53C; top: 20%;   left: 38%; }
.earn-glow-3 { width: 320px; height: 320px; background: #FF6B9D; bottom: -40px; right: 8%; }
.earn-inner  { max-width: 1060px; margin: 0 auto; position: relative; z-index: 2; }

.earn-header { text-align: center; margin-bottom: 72px; }
.earn-heading {
  font-size: clamp(30px, 5.5vw, 58px);
  font-weight: 900; color: white; letter-spacing: -0.25px;
  line-height: 1.12; margin-bottom: 16px;
}
.earn-heading em { font-style: normal; color: var(--lime); }
.earn-sub {
  font-size: 17px; font-weight: 600; color: rgba(255,255,255,0.76);
  max-width: 480px; margin: 0 auto; line-height: 1.7;
}

.earn-cards {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 28px;
  perspective: 1200px;
}

.earn-card {
  position: relative;
  width: 300px;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
  transition: transform 0.55s cubic-bezier(0.34, 1.3, 0.64, 1);
  will-change: transform;
}
.earn-card:nth-child(1) { transform: rotate(-5deg) translateY(10px); animation: bob-a 3.8s ease-in-out infinite; }
.earn-card:nth-child(2) { transform: rotate(1.5deg) translateY(-6px); animation: bob-b 4.4s ease-in-out infinite 0.6s; }
.earn-card:nth-child(3) { transform: rotate(4.5deg) translateY(8px);  animation: bob-c 3.6s ease-in-out infinite 0.3s; }
.earn-card:hover { animation: none !important; transform: rotate(0deg) translateY(-14px) scale(1.03) !important; }

@keyframes bob-a { 0%,100% { transform: rotate(-5deg) translateY(10px); } 50% { transform: rotate(-4deg) translateY(2px); } }
@keyframes bob-b { 0%,100% { transform: rotate(1.5deg) translateY(-6px); } 50% { transform: rotate(2deg) translateY(-14px); } }
@keyframes bob-c { 0%,100% { transform: rotate(4.5deg) translateY(8px); } 50% { transform: rotate(3.5deg) translateY(0px); } }

.earn-card-inner {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 14px 40px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3);
}
.earn-card:hover .earn-card-inner {
  box-shadow: 0 28px 60px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.35);
}

.earn-card-img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; }

.earn-card-grad {
  position: absolute; bottom: 0; left: 0; right: 0; height: 55%;
  background: linear-gradient(to top, rgba(10,10,18,0.96) 0%, rgba(10,10,18,0.5) 55%, transparent 100%);
}

.earn-card-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 20px 20px 22px;
  transform: translateY(0);
}
.earn-card-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px; margin-bottom: 8px;
  color: var(--dark);
}
.earn-card-tag.purple { background: var(--purple-start); color: white; }
.earn-card-tag.lime   { background: var(--lime); }
.earn-card-tag.pink   { background: #FF6B9D; color: white; }

.earn-card-name { font-size: 22px; font-weight: 900; color: white; letter-spacing: -0.5px; margin-bottom: 4px; }
.earn-card-tagline { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.76); line-height: 1.45; margin-bottom: 12px; }

.earn-card-cta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 900; color: white;
  letter-spacing: 0.3px;
  transition: color 0.15s, gap 0.15s;
}
.earn-card:hover .earn-card-cta { color: white; gap: 8px; }

.earn-card-soon {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(11,11,18,0.5); backdrop-filter: blur(2px);
  border-radius: 22px;
  opacity: 0; transition: opacity 0.2s;
}
.earn-card:hover .earn-card-soon { opacity: 1; }
.earn-card-soon-text {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  color: white; font-size: 13px; font-weight: 900;
  padding: 10px 22px; border-radius: 999px; letter-spacing: 0.5px;
}

.earn-card::after {
  content: 'tap to explore ↗';
  position: absolute; bottom: -36px; left: 50%; transform: translateX(-50%);
  font-size: 12px; font-weight: 800; color: rgba(255,255,255,0.25);
  white-space: nowrap; letter-spacing: 0.3px;
  transition: color 0.18s;
}
.earn-card:hover::after { color: rgba(255,255,255,0.55); }

/* ── Backdrop ── */
.pop-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  animation: fade-in 0.22s ease;
}
.pop-backdrop.open { display: block; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Popup window ── */
.pop-win {
  display: none;
  position: fixed; z-index: 600;
  top: 50%; left: 50%;
  width: min(420px, 90vw);
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,0,0,0.07);
  pointer-events: all;
}
.pop-win.open {
  display: block;
  animation: pop-spring 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.pop-win.closing {
  display: block;
  animation: pop-shrink 0.25s cubic-bezier(0.4, 0, 1, 1) forwards;
}
#pop-drop    { --tx: -54%; --ty: -52%; --rot: -1.5deg; }
#pop-group   { --tx: -50%; --ty: -50%; --rot:  0.8deg; }
#pop-craft   { --tx: -46%; --ty: -53%; --rot: -0.6deg; }

@keyframes pop-spring {
  from { opacity: 0; transform: translate(var(--tx), calc(var(--ty) + 40px)) rotate(var(--rot)) scale(0.82); }
  to   { opacity: 1; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(1); }
}
@keyframes pop-shrink {
  from { opacity: 1; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(1); }
  to   { opacity: 0; transform: translate(var(--tx), calc(var(--ty) + 30px)) rotate(var(--rot)) scale(0.88); }
}

.pop-chrome {
  display: flex; align-items: center; gap: 0;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.pop-dots { display: flex; gap: 6px; }
.pop-dot {
  width: 12px; height: 12px; border-radius: 50%;
  cursor: pointer; transition: opacity 0.15s;
  flex-shrink: 0;
}
.pop-dot:hover { opacity: 0.75; }
.pop-dot.red    { background: #FF5F57; }
.pop-dot.yellow { background: #FEBC2E; }
.pop-dot.green  { background: #28C840; }
.pop-chrome-title {
  flex: 1; text-align: center;
  font-size: 13px; font-weight: 900; color: var(--dark); letter-spacing: -.2px;
}
.pop-chrome-gap { width: 54px; }

.pop-body { display: flex; flex-direction: column; }
.pop-img-wrap {
  width: 100%; height: 200px; overflow: hidden;
  background: #0B0B12;
  display: flex; align-items: center; justify-content: center;
}
.pop-img { height: 100%; width: auto; display: block; margin: 0 auto; }
.pop-content { padding: 22px 24px 26px; }
.pop-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px; margin-bottom: 14px; color: var(--dark);
}
.pop-name { font-size: 26px; font-weight: 900; color: var(--dark); letter-spacing: -.5px; margin-bottom: 8px; }
.pop-desc { font-size: 14px; font-weight: 600; color: var(--gray); line-height: 1.72; margin-bottom: 18px; }
.pop-feats { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-bottom: 22px; }
.pop-feats li { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; color: var(--dark); }
.pop-feats li::before {
  content: '✓'; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; background: var(--lime);
  border-radius: 6px; font-size: 11px; font-weight: 900; flex-shrink: 0;
}
.pop-soon-feats li::before { background: rgba(255,107,157,0.2); color: #FF6B9D; }

.pop-action {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 18px; border-top: 1px solid rgba(0,0,0,0.07);
}
.pop-action-note { font-size: 12px; font-weight: 700; color: var(--gray-light); }
.pop-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--dark); color: white;
  font-family: 'Plein', sans-serif; font-weight: 700; font-size: 14px;
  padding: 10px 20px; border-radius: 999px;
  text-decoration: none; border: none; cursor: pointer;
  transition: transform .12s, box-shadow .12s;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.15);
}
.pop-btn:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 rgba(0,0,0,0.15); }
.pop-btn.lime-btn { background: var(--lime); color: var(--dark); }
.pop-btn.soon-btn { background: #FF6B9D; color: white; cursor: default; opacity: 0.7; }

/* ━━━━━━━━━━━━━━━━━━━━━ COMPARISON ━━━━━━━━━━━━━━━━━━━━━ */
.compare-section { background:white; padding:72px 40px; }
.compare-inner { max-width:900px; margin:0 auto; }
.compare-table-wrap { overflow-x:auto; }
table.ct { width:100%; border-collapse:separate; border-spacing:0; }
table.ct th { padding:14px 18px; font-size:12px; font-weight:900; text-align:center; text-transform:uppercase; letter-spacing:1px; }
table.ct th.col-f { width:34%; text-align:left; background:rgba(0,0,0,0.015); border-radius:14px 14px 0 0; }
table.ct th.col-o { width:33%; color:#565751; background:rgba(0,0,0,0.03); border-radius:14px 14px 0 0; }
table.ct th.col-a { color:var(--dark); background:var(--lime); border:2px solid var(--dark); border-bottom:none; border-radius:14px 14px 0 0; }
table.ct td { padding:13px 18px; font-size:14px; font-weight:700; border-bottom:1px solid rgba(0,0,0,0.05); text-align:center; }
table.ct td.col-f { text-align:left; color:var(--dark); font-size:15px; background:rgba(0,0,0,0.015); }
table.ct td.col-o { background:rgba(0,0,0,0.015); color:#565751; font-size:13px; }
table.ct td.col-a { background:rgba(200,245,60,0.08); border-left:2px solid var(--dark); border-right:2px solid var(--dark); }
table.ct tr:last-child td.col-a { border-bottom:2px solid var(--dark); border-radius:0 0 14px 14px; }
table.ct tr:last-child td.col-f { border-radius:0 0 14px 14px; }
table.ct tr:last-child td.col-o { border-radius:0 0 14px 14px; }
.ck { color:#28c840; font-size:17px; }
.cx { color:#e3475e; font-size:17px; }

/* ━━━━━━━━━━━━━━━━━━━━━ TESTIMONIALS ━━━━━━━━━━━━━━━━━━━━━ */
.testi-section { background:var(--offwhite); padding:72px 40px; }
.testi-inner { max-width:1040px; margin:0 auto; }
.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.tcard {
  background:white; border:1px solid var(--card-border); border-radius:20px;
  padding:26px; box-shadow:var(--card-shadow);
  transition:transform .18s, box-shadow .18s;
}
.tcard:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.08); }
.tcard-stars { color:var(--lime-dark); font-size:13px; letter-spacing:1px; margin-bottom:12px; }
.tcard-quote { font-size:15px; font-weight:700; color:var(--dark); line-height:1.8; margin-bottom:18px; font-style:italic; }
.tcard-foot { display:flex; align-items:center; gap:9px; }
.tcard-av { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:900; flex-shrink:0; }
.tcard-name { font-size:13px; font-weight:900; color:var(--dark); }
.tcard-handle { font-size:11px; font-weight:700; color:var(--gray-light); }

/* ━━━━━━━━━━━━━━━━━━━━━ ANTI MANIFESTO ━━━━━━━━━━━━━━━━━━━━━ */
.anti-section { background:var(--dark); padding:80px 40px; }
.anti-inner { max-width:680px; margin:0 auto; }
.anti-heading { font-size:clamp(26px,5vw,50px); font-weight:900; color:white; letter-spacing:-.25px; line-height:1.2; margin-bottom:10px; }
.anti-sub { font-size:16px; font-weight:600; color:rgba(255,255,255,0.76); margin-bottom:44px; }
.swap-grid { display:grid; grid-template-columns:1fr 26px 1fr; align-items:center; gap:11px 12px; }
.swap-no {
  font-size:13px; font-weight:800; color:rgba(255,255,255,0.42);
  text-decoration:line-through; text-decoration-color:rgba(255,255,255,0.2); text-decoration-thickness:2px;
  background:rgba(255,255,255,0.04); padding:11px 14px; border-radius:999px; text-align:center;
}
.swap-arrow { font-size:16px; color:var(--lime); font-weight:900; text-align:center; }
.swap-yes {
  display:flex; align-items:center; justify-content:center; gap:7px;
  background:var(--lime); color:var(--dark); font-size:13px; font-weight:900;
  padding:11px 14px; border-radius:999px;
}

/* ━━━━━━━━━━━━━━━━━━━━━ HOW IT WORKS ━━━━━━━━━━━━━━━━━━━━━ */
.how-section { background:var(--offwhite); padding:72px 40px; }
.how-inner { max-width:900px; margin:0 auto; }
.how-tabs { display:flex; justify-content:center; gap:10px; margin-bottom:40px; }
.how-tab {
  padding:10px 24px; border-radius:999px;
  font-family:'Plein',sans-serif; font-weight:500; font-size:14px;
  cursor:pointer; border:1.5px solid var(--dark);
  background:transparent; color:var(--dark); transition:all .18s;
}
.how-tab.active { background:var(--dark); color:white; }
.how-tab:not(.active):hover { background:var(--purple-light); }
.how-steps { display:none; grid-template-columns:repeat(3,1fr); gap:14px; }
.how-steps.active { display:grid; }
.step-card {
  background:white; border:1px solid var(--card-border); border-radius:18px;
  padding:26px; box-shadow:var(--card-shadow);
  transition:transform .18s;
}
.step-card:hover { transform:translateY(-2px); }
.step-num {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; background:var(--purple); color:white;
  font-size:15px; font-weight:900; border-radius:10px; margin-bottom:14px;
}
.step-card.lime .step-num { background:var(--lime); color:var(--dark); }
.step-title { font-size:17px; font-weight:900; color:var(--dark); margin-bottom:7px; }
.step-desc  { font-size:14px; font-weight:600; color:var(--gray); line-height:1.7; }

/* ━━━━━━━━━━━━━━━━━━━━━ FAQ ━━━━━━━━━━━━━━━━━━━━━ */
.faq-section { background:var(--purple-light); padding:72px 40px; }
.faq-inner { max-width:700px; margin:0 auto; }
.faq-list { display:flex; flex-direction:column; gap:10px; }
.faq-item {
  background:white; border:1px solid var(--card-border); border-radius:14px;
  overflow:hidden; box-shadow:var(--card-shadow);
  transition:box-shadow .18s;
}
.faq-item.open { box-shadow:0 4px 20px rgba(0,0,0,0.08); }
.faq-q {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; cursor:pointer; font-size:15px; font-weight:700;
  color:var(--dark); gap:16px; user-select:none; transition:background .12s;
}
.faq-q:hover { background:var(--offwhite); }
.faq-icon { font-size:24px; font-weight:700; flex-shrink:0; transition:transform .22s; color:var(--purple); }
.faq-item.open .faq-icon { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .32s ease; }
.faq-item.open .faq-a { max-height:360px; }
.faq-a-inner { padding:14px 22px 20px; font-size:14px; font-weight:600; color:var(--gray); line-height:1.8; border-top:1px dashed var(--purple-mid); }

/* ━━━━━━━━━━━━━━━━━━━━━ FINAL CTA ━━━━━━━━━━━━━━━━━━━━━ */
.cta-section { background:var(--gradient); padding:100px 40px; text-align:center; position:relative; overflow:hidden; }
.cta-blob { position:absolute; border-radius:50%; background:rgba(255,255,255,0.07); pointer-events:none; }
.cta-blob-1 { width:520px; height:520px; top:-200px; right:-100px; }
.cta-blob-2 { width:370px; height:370px; bottom:-160px; left:-80px; }
.cta-inner { max-width:620px; margin:0 auto; position:relative; z-index:2; }
.cta-logo { width:112px; height:112px; display:block; margin:0 auto 24px; animation:float 3.2s ease-in-out infinite; }
.cta-logo img { width:100%; height:100%; display:block; object-fit:contain; }
.cta-heading { font-size:clamp(28px,6vw,56px); font-weight:900; color:white; letter-spacing:-.25px; line-height:1.2; margin-bottom:14px; }
.cta-heading .lw { color:var(--lime); }
.cta-sub { font-size:16px; font-weight:600; color:rgba(255,255,255,0.76); margin-bottom:36px; line-height:1.65; }
.cta-btns { display:flex; justify-content:center; margin-bottom:24px; }
.cta-note { font-size:13px; font-weight:600; color:rgba(255,255,255,0.76); }
.cta-note a { color:var(--lime); text-decoration:none; font-weight:800; }

/* ━━━━━━━━━━━━━━━━━━━━━ FOOTER ━━━━━━━━━━━━━━━━━━━━━ */
.footer { background:var(--dark); padding:36px 40px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.footer-brand { display:flex; align-items:center; gap:9px; }
.footer-logo { width:auto; height:60px; object-fit:contain; }
.footer-name { font-size:19px; font-weight:900; color:white; }
.footer-links { display:flex; gap:20px; flex-wrap:wrap; list-style:none; }
.footer-links a { color:rgba(255,255,255,0.35); text-decoration:none; font-size:13px; font-weight:700; transition:color .15s; }
.footer-links a:hover { color:var(--lime); }
.footer-copy { font-size:12px; color:rgba(255,255,255,0.22); font-weight:600; }

/* ━━━━━━━━━━━━━━━━━━━━━ REVEAL ━━━━━━━━━━━━━━━━━━━━━ */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .5s ease, transform .5s ease; }
.reveal.visible { opacity:1; transform:none; }

/* ━━━━━━━━━━━━━━━━━━━━━ RESPONSIVE ━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width:1000px) {
  .stats-row { grid-template-columns:repeat(2,1fr); }
  .feat-grid { grid-template-columns:repeat(2,1fr); }
  .fan-grid  { grid-template-columns:repeat(2,1fr); }
  .testi-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px) {
  .hero { min-height:auto; padding-top:120px; }
  .hero-inner { grid-template-columns:1fr; text-align:center; gap:36px; max-width:640px; }
  .hero-brand, .hero-cta-row, .hero-trust { justify-content:center; }
  .hero-mark { margin:0 auto; }
  .hero-headline, .hero-sub { max-width:none; }
  .hero-bubble { margin-left:auto; margin-right:auto; }
  .hero-right { justify-content:center; }
  .for-panels-wrap { min-height:auto; }
  .products-grid { grid-template-columns:1fr; }
  .how-steps { grid-template-columns:1fr; }
  .tab-btn { padding:12px 22px; font-size:14px; }
  .earn-cards { flex-direction: column; align-items: center; }
  .earn-card { width: min(300px, 88vw); }
  .earn-card:nth-child(1),
  .earn-card:nth-child(2),
  .earn-card:nth-child(3) { transform: rotate(0) !important; animation: none !important; }
}
@media (max-width:768px) {
  .nav-links { display:none; }
  .nav-inner { padding:12px 18px; height:72px; }
  .nav.scrolled .nav-inner { padding:8px 16px; }
  .nav-logo { width:140px; height:auto; }
  .hero { padding:100px 18px 0; }
  .hero-headline { font-size:28px; }
  .hero-sub { font-size:15px; }
  .testi-grid { grid-template-columns:1fr; }
  .for-section { padding:64px 20px; }
  .stats-section, .compare-section, .testi-section,
  .anti-section, .how-section, .faq-section { padding:60px 20px; }
  .strip-section { padding:40px 20px; }
}
@media (max-width:600px) {
  .stats-row { grid-template-columns:repeat(2,1fr); }
  .feat-grid { grid-template-columns:1fr; }
  .fan-grid  { grid-template-columns:1fr; }
  .swap-grid { grid-template-columns:1fr 20px 1fr; gap:9px 8px; }
  .swap-no, .swap-yes { font-size:12px; padding:10px 8px; }
  .footer { flex-direction:column; align-items:flex-start; }
  .tab-btn { padding:11px 18px; font-size:13px; }
}