/* ═══════════════════════════════════════════════════════════
   LINKD.GG — Design System
   Spacing: 4px base grid
   Type: TTFirsNeue
   Palette: White / #F7F4FF / Purple gradient
   ═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'TTFirsNeue';
  src: url('assets/font-roman.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}
@font-face {
  font-family: 'TTFirsNeue';
  src: url('assets/font-italic.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
}

/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'TTFirsNeue', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #fff;
  color: #0A0A0F;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; border: none; }
ul { list-style: none; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #fff; }
::-webkit-scrollbar-thumb { background: #e0d8f7; border-radius: 4px; }

/* ─── Tokens ────────────────────────────────────────────── */
:root {
  /* Colors */
  --ink:    #07070F;
  --ink-2:  #2E2A50;
  --ink-3:  #6B6585;
  --ink-4:  #B0AACC;
  --line:   #E4DEFA;
  --line-2: #EEE9F8;
  --fill:   #F5F1FF;
  --white:  #ffffff;

  /* Brand */
  --p1:   #8B2FE0;
  --p2:   #4A1598;
  --p3:   #BB61F4;
  --grad:        linear-gradient(135deg, #BB61F4 0%, #4A1598 100%);
  --grad-warm:   linear-gradient(135deg, #D46EFF 0%, #7B2CEA 100%);
  --grad-text:   linear-gradient(135deg, #CC66FF 0%, #5B1FD0 100%);
  --grad-subtle: linear-gradient(135deg, rgba(187,97,244,.12) 0%, rgba(74,21,152,.06) 100%);

  /* Purple glow shadows */
  --s1: 0 1px 3px rgba(0,0,0,.06);
  --s2: 0 2px 8px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --s3: 0 4px 20px rgba(0,0,0,.09), 0 2px 6px rgba(0,0,0,.05);
  --s4: 0 8px 36px rgba(0,0,0,.11), 0 2px 10px rgba(0,0,0,.06);
  --s5: 0 24px 72px rgba(0,0,0,.13), 0 6px 20px rgba(0,0,0,.07);
  --sp: 0 8px 40px rgba(139,47,224,.35), 0 2px 12px rgba(139,47,224,.2);

  /* Radii */
  --r4:  4px;
  --r8:  8px;
  --r12: 12px;
  --r16: 16px;
  --r20: 20px;
  --r24: 24px;
  --r32: 32px;
  --rp:  999px;

  /* Transitions */
  --ease: cubic-bezier(.22,.68,0,1.2);
  --fast: .15s ease;
  --med:  .25s ease;
}

/* ─── Layout ────────────────────────────────────────────── */
.wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 48px;
}
@media (max-width: 768px) { .wrap { padding: 0 24px; } }

/* ─── Type Scale ────────────────────────────────────────── */
.t-display {
  font-size: clamp(48px, 6vw, 80px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.04em;
}
.t-h1 {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.t-h2 {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.t-body-lg { font-size: 18px; line-height: 1.7; color: var(--ink-2); }
.t-body    { font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.t-small   { font-size: 14px; line-height: 1.55; color: var(--ink-3); }
.t-label   { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

.text-purple {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--rp); font-weight: 700; font-size: 15px;
  padding: 13px 28px; transition: all .2s var(--ease);
  white-space: nowrap; border: none; position: relative; overflow: hidden;
}
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,0);
  transition: background .15s;
}
.btn:hover::after { background: rgba(255,255,255,.08); }
.btn:active { transform: scale(.97) !important; }

.btn-primary {
  background: var(--grad); color: #fff;
  box-shadow: 0 4px 16px rgba(139,47,224,.4), 0 1px 3px rgba(0,0,0,.1);
}
.btn-primary:hover {
  box-shadow: 0 8px 28px rgba(139,47,224,.5), 0 2px 8px rgba(0,0,0,.12);
  transform: translateY(-2px);
}

.btn-secondary {
  background: var(--white); color: var(--ink);
  border: 1.5px solid var(--line); box-shadow: var(--s2);
}
.btn-secondary:hover {
  border-color: var(--p1); box-shadow: var(--s3), 0 0 0 3px rgba(139,47,224,.08);
  transform: translateY(-1px);
}

.btn-ghost {
  background: none; color: var(--ink-2); font-weight: 600; padding: 10px 18px;
}
.btn-ghost:hover { color: var(--p1); background: rgba(139,47,224,.06); }

.btn-outline {
  background: none; color: var(--p1);
  border: 1.5px solid var(--p1);
}
.btn-outline:hover {
  background: rgba(139,47,224,.06);
  box-shadow: 0 0 0 3px rgba(139,47,224,.12);
}

.btn-sm { padding: 9px 20px; font-size: 13.5px; }
.btn-lg { padding: 16px 36px; font-size: 16px; }

/* ─── NAV ───────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: calc(100% - 40px);
  max-width: 1000px;
  height: 58px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border: 1px solid rgba(228,222,250,.95);
  border-radius: 999px;
  box-shadow: 0 2px 16px rgba(0,0,0,.06), 0 0 0 1px rgba(255,255,255,.8) inset;
  transition: box-shadow var(--med), border-color var(--med), background var(--med);
}
.nav.scrolled {
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 36px rgba(0,0,0,.10), 0 0 0 1px rgba(187,97,244,.15) inset;
  border-color: rgba(187,97,244,.25);
}
.nav-inner {
  padding: 0 20px 0 26px;
  height: 100%; display: flex; align-items: center; gap: 28px;
}
.nav-logo img { height: 56px; display: block; }
.nav-links { display: flex; align-items: center; gap: 2px; flex: 1; }
.nav-links a {
  font-size: 13.5px; font-weight: 600; color: var(--ink-3);
  padding: 7px 13px; border-radius: 999px;
  transition: color var(--fast), background var(--fast);
}
.nav-links a:hover { color: var(--p1); background: rgba(139,47,224,.07); }
.nav-actions { display: flex; align-items: center; gap: 8px; }

/* ─── HERO ──────────────────────────────────────────────── */
.hero {
  padding: 156px 0 108px;
  background: linear-gradient(170deg, #ffffff 0%, #FAF7FF 60%, var(--fill) 100%);
  overflow: hidden;
  position: relative;
}
/* ambient glow orbs */
.hero::before {
  content: '';
  position: absolute; top: -160px; right: -80px;
  width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, rgba(187,97,244,.18) 0%, transparent 68%);
  pointer-events: none; filter: blur(1px);
}
.hero::after {
  content: '';
  position: absolute; bottom: -120px; left: -100px;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(74,21,152,.1) 0%, transparent 68%);
  pointer-events: none;
}
.hero-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 48px;
  display: grid; grid-template-columns: 1fr 460px;
  gap: 80px; align-items: center; position: relative; z-index: 1;
}
.hero-label {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.9); border: 1px solid rgba(187,97,244,.25);
  border-radius: var(--rp); padding: 6px 16px 6px 8px;
  margin-bottom: 28px;
  box-shadow: 0 2px 12px rgba(139,47,224,.12), 0 0 0 1px rgba(255,255,255,.8) inset;
  backdrop-filter: blur(8px);
}
.hero-label-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--p1); flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(139,47,224,.18), 0 0 8px rgba(139,47,224,.4);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(139,47,224,.18), 0 0 8px rgba(139,47,224,.4); }
  50%      { box-shadow: 0 0 0 5px rgba(139,47,224,.1), 0 0 14px rgba(139,47,224,.5); }
}
.hero-label span { font-size: 13px; font-weight: 600; color: var(--ink-2); }

.hero-title { margin-bottom: 22px; }
.hero-body {
  font-size: 18px; color: var(--ink-2); line-height: 1.7;
  max-width: 480px; margin-bottom: 40px;
}
.hero-body strong { color: var(--ink); font-weight: 700; }

/* Claim input */
.claim-wrap {
  display: flex; align-items: center;
  background: #fff; border: 1.5px solid var(--line);
  border-radius: var(--rp); padding: 5px 5px 5px 22px;
  max-width: 500px;
  box-shadow: var(--s3), 0 0 0 1px rgba(255,255,255,.9) inset;
  transition: border-color var(--med), box-shadow var(--med);
}
.claim-wrap:focus-within {
  border-color: var(--p1);
  box-shadow: var(--s3), 0 0 0 4px rgba(139,47,224,.14);
}
.claim-host { font-size: 15px; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.claim-field {
  flex: 1; border: none; outline: none; background: none;
  font-family: inherit; font-size: 15px; font-weight: 600;
  color: var(--ink); padding: 9px 8px; min-width: 0;
}
.claim-field::placeholder { color: var(--ink-4); font-weight: 400; }

.hero-meta {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px; font-size: 13px; color: var(--ink-3); font-weight: 500;
}
.hero-avatars { display: flex; }
.h-av {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff;
  font-size: .6rem; font-weight: 800; color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-left: -7px; flex-shrink: 0;
}
.hero-avatars .h-av:first-child { margin-left: 0; }
.hero-meta strong { color: var(--ink-2); }

/* Hero phone */
.hero-phone { position: relative; }
.phone {
  width: 280px; margin: 0 auto;
  background: #fff; border: 1px solid var(--line);
  border-radius: 44px; padding: 14px;
  box-shadow: var(--s5);
}
.phone-notch {
  width: 88px; height: 6px; background: var(--line);
  border-radius: 4px; margin: 0 auto 14px;
}
.phone-screen {
  background: var(--fill); border-radius: 32px;
  padding: 28px 16px 24px; overflow: hidden;
}
.ph-cover {
  height: 72px; background: var(--grad);
  border-radius: 16px 16px 0 0; margin: -28px -16px 0;
}
.ph-body {
  display: flex; flex-direction: column; align-items: center;
  padding-top: 0; gap: 4px;
}
.ph-av-wrap {
  position: relative; margin-top: -24px; margin-bottom: 8px;
}
.ph-av-ring {
  position: absolute; inset: -3px; border-radius: 50%;
  background: var(--grad);
}
.ph-av {
  position: relative; z-index: 1;
  width: 52px; height: 52px; border-radius: 50%;
  background: #fff; margin: 3px;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 800; color: var(--p1);
  border: 2px solid #fff; box-shadow: var(--s2);
}
.ph-name { font-size: .82rem; font-weight: 800; color: var(--ink); }
.ph-bio { font-size: .62rem; color: var(--ink-3); margin-bottom: 14px; }
.ph-links { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.ph-link {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line-2);
  border-radius: var(--rp); padding: 9px 14px;
  font-size: .65rem; font-weight: 600; color: var(--ink);
  box-shadow: var(--s1);
}
.ph-link-icon { font-size: .82rem; flex-shrink: 0; }
.ph-link span { flex: 1; }
.ph-link-arr { color: var(--ink-4); display: flex; }
.ph-link.primary {
  background: var(--grad); color: #fff; border-color: transparent;
  box-shadow: 0 2px 10px rgba(139,47,224,.25);
}
.ph-link.primary .ph-link-arr { color: rgba(255,255,255,.6); }

/* Stats on phone */
.ph-stat {
  position: absolute;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r16); padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--s3); white-space: nowrap;
  font-size: 12px;
}
.ph-stat-val { font-size: 16px; font-weight: 800; line-height: 1; margin-bottom: 1px; }
.ph-stat-label { font-size: 11px; color: var(--ink-3); font-weight: 500; }
.ph-stat-icon {
  width: 36px; height: 36px; border-radius: var(--r8); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.stat-green { background: #f0fdf4; }
.stat-purple { background: #f5f0ff; }
.ph-stat-1 { top: 40px; right: -20px; }
.ph-stat-2 { bottom: 100px; left: -20px; }

/* ─── TICKER ────────────────────────────────────────────── */
.ticker {
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  background: linear-gradient(90deg, var(--fill) 0%, #fff 20%, #fff 80%, var(--fill) 100%);
  overflow: hidden; padding: 15px 0;
  position: relative;
}
.ticker::before, .ticker::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2;
  pointer-events: none;
}
.ticker::before { left: 0; background: linear-gradient(90deg, var(--fill), transparent); }
.ticker::after  { right: 0; background: linear-gradient(-90deg, var(--fill), transparent); }
.ticker-inner {
  display: flex; gap: 0; white-space: nowrap;
  animation: tick 32s linear infinite;
  width: max-content;
}
.ticker-inner span {
  font-size: 13px; font-weight: 600; color: var(--ink-3);
  padding: 0 24px; display: flex; align-items: center; gap: 24px;
}
.ticker-inner span::before {
  content: '✦'; font-size: 8px; color: var(--p3); opacity: .6;
}
.ticker-inner span:nth-child(even) { color: var(--ink-4); }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ─── TRUST BAR ─────────────────────────────────────────── */
.trust { padding: 80px 0; background: #fff; }
.trust-inner { max-width: 1160px; margin: 0 auto; padding: 0 48px; text-align: center; }
.trust-label {
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: 36px;
}
.trust-nums {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line-2);
  border: 1px solid var(--line-2); border-radius: var(--r24);
  overflow: hidden; box-shadow: var(--s2);
}
.trust-num {
  background: #fff; padding: 40px 28px;
  transition: background .2s;
}
.trust-num:hover { background: var(--fill); }
.trust-num-val {
  font-size: 44px; font-weight: 800; letter-spacing: -.05em; line-height: 1;
  background: var(--grad-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}
.trust-num-label { font-size: 13px; color: var(--ink-3); font-weight: 600; }

/* ─── SECTION ───────────────────────────────────────────── */
.section-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--p1);
  background: #f5f0ff; border: 1px solid #e8d8ff;
  border-radius: var(--rp); padding: 5px 14px;
  margin-bottom: 20px;
}

/* ─── FEATURES ──────────────────────────────────────────── */
.features { padding: 112px 0; background: var(--fill); }
.features-head { text-align: center; margin-bottom: 64px; }
.features-head .t-h1 { margin-bottom: 14px; }

.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feat-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r20); padding: 36px 32px;
  box-shadow: var(--s1);
  transition: border-color .25s, box-shadow .25s, transform .25s;
  display: flex; flex-direction: column; gap: 16px;
  position: relative; overflow: hidden;
}
.feat-card::before {
  content: '';
  position: absolute; inset: 0; border-radius: var(--r20);
  background: var(--grad-subtle);
  opacity: 0; transition: opacity .25s;
  pointer-events: none;
}
.feat-card:hover {
  border-color: rgba(187,97,244,.35);
  box-shadow: var(--s3), 0 0 0 1px rgba(187,97,244,.1) inset;
  transform: translateY(-4px);
}
.feat-card:hover::before { opacity: 1; }
.feat-ic {
  width: 52px; height: 52px; border-radius: var(--r12);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.45rem; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: transform .2s var(--ease);
}
.feat-card:hover .feat-ic { transform: scale(1.08) rotate(-2deg); }
.ic-purple { background: linear-gradient(135deg,#f0e5ff,#f8f3ff); border: 1px solid #e8d4ff; }
.ic-green  { background: linear-gradient(135deg,#e8fdf0,#f2fdf7); border: 1px solid #c6f0d8; }
.ic-blue   { background: linear-gradient(135deg,#e8f4ff,#eff9ff); border: 1px solid #bfdfff; }
.ic-orange { background: linear-gradient(135deg,#fff2e0,#fff8ee); border: 1px solid #ffd8a0; }
.ic-pink   { background: linear-gradient(135deg,#fdeaf5,#fff2f9); border: 1px solid #f8cce8; }
.ic-teal   { background: linear-gradient(135deg,#e0faf5,#edfdf9); border: 1px solid #aaeddf; }

.feat-title { font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.3; position: relative; }
.feat-body  { font-size: 14px; color: var(--ink-3); line-height: 1.65; position: relative; }

/* ─── HOW IT WORKS ──────────────────────────────────────── */
.how { padding: 112px 0; background: #fff; }
.how-inner { max-width: 1160px; margin: 0 auto; padding: 0 48px; }
.how-head { max-width: 520px; margin-bottom: 64px; }
.how-head .t-h1 { margin-bottom: 14px; }

.steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 48px; position: relative;
}
.steps::before {
  content: '';
  position: absolute; top: 20px; left: calc(16.67% + 20px); right: calc(16.67% + 20px);
  height: 1px;
  background: linear-gradient(90deg, rgba(187,97,244,.3) 0%, rgba(74,21,152,.15) 100%);
  pointer-events: none;
}
.step {
  display: flex; flex-direction: column; gap: 20px;
}
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: var(--grad); color: #fff;
  border-radius: 14px; font-size: 16px; font-weight: 800;
  box-shadow: 0 4px 16px rgba(139,47,224,.3), 0 1px 4px rgba(0,0,0,.1);
  flex-shrink: 0; position: relative; z-index: 1;
}
.step-title { font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.step-body { font-size: 15px; color: var(--ink-3); line-height: 1.65; }

/* ─── SHOWCASE ──────────────────────────────────────────── */
.showcase { padding: 112px 0; background: var(--fill); }
.showcase-inner {
  max-width: 1160px; margin: 0 auto; padding: 0 48px;
  display: grid; grid-template-columns: 1fr 440px;
  gap: 96px; align-items: center;
}
.showcase-body { display: flex; flex-direction: column; gap: 0; }
.showcase-body .section-tag { margin-bottom: 20px; }
.showcase-body .t-h1 { margin-bottom: 14px; }
.showcase-body .t-body { margin-bottom: 36px; }

.check-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
.check-item { display: flex; align-items: center; gap: 12px; }
.check-dot {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: #f5f0ff; border: 1px solid #e0c8ff;
  display: flex; align-items: center; justify-content: center;
}
.check-dot svg { width: 12px; height: 12px; }
.check-item span { font-size: 15px; color: var(--ink-2); font-weight: 500; }

/* Showcase phone — larger */
.showcase-phone .phone { width: 260px; }

/* ─── TESTIMONIALS ──────────────────────────────────────── */
.testi { padding: 112px 0; background: #fff; }
.testi-head { text-align: center; margin-bottom: 64px; }
.testi-head .t-h1 { margin-bottom: 14px; }

.testi-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.testi-card {
  background: var(--fill); border: 1px solid var(--line);
  border-radius: var(--r20); padding: 32px 28px;
  display: flex; flex-direction: column; gap: 20px;
  transition: border-color .25s, box-shadow .25s, transform .25s;
  position: relative; overflow: hidden;
}
.testi-card::before {
  content: '\201C';
  position: absolute; top: 12px; right: 24px;
  font-size: 96px; font-weight: 900; line-height: 1;
  background: var(--grad-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: .12; pointer-events: none;
  font-family: Georgia, serif; letter-spacing: -4px;
}
.testi-card:hover {
  border-color: rgba(187,97,244,.3);
  box-shadow: var(--s3), 0 0 0 1px rgba(187,97,244,.08) inset;
  transform: translateY(-4px);
}
.testi-stars {
  display: flex; gap: 3px;
}
.testi-stars span {
  font-size: 14px; color: #f59e0b;
  filter: drop-shadow(0 1px 2px rgba(245,158,11,.35));
}
.testi-quote { font-size: 15px; line-height: 1.75; color: var(--ink-2); flex: 1; font-style: italic; }
.testi-person { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line-2); padding-top: 20px; }
.testi-av {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  font-size: .82rem; font-weight: 800; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(139,47,224,.2);
}
.testi-name { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.testi-role { font-size: 12px; color: var(--ink-3); }

/* ─── PRICING ───────────────────────────────────────────── */
.pricing { padding: 112px 0; background: var(--fill); }
.pricing-head { text-align: center; margin-bottom: 64px; }
.pricing-head .t-h1 { margin-bottom: 14px; }

.plans {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 20px; max-width: 840px; margin: 0 auto;
}
.plan {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r24); padding: 44px 40px;
  display: flex; flex-direction: column; gap: 24px;
  box-shadow: var(--s1);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.plan:hover { border-color: rgba(187,97,244,.3); box-shadow: var(--s3); transform: translateY(-3px); }
.plan-pro {
  background: linear-gradient(150deg, #160b28 0%, #0e061a 50%, #1a0a2e 100%);
  border-color: rgba(180,85,240,.2);
  box-shadow: 0 8px 48px rgba(139,47,224,.22), 0 0 0 1px rgba(180,85,240,.12) inset;
  position: relative; overflow: hidden;
}
.plan-pro::before {
  content: '';
  position: absolute; top: -80px; right: -80px;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(187,97,244,.2) 0%, transparent 70%);
  pointer-events: none;
}
.plan-pro::after {
  content: '';
  position: absolute; bottom: -60px; left: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(74,21,152,.15) 0%, transparent 70%);
  pointer-events: none;
}
.plan-pro:hover {
  border-color: rgba(187,97,244,.4);
  box-shadow: 0 16px 64px rgba(139,47,224,.32), 0 0 0 1px rgba(187,97,244,.2) inset;
  transform: translateY(-4px);
}

.plan-label { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.plan-pro .plan-label {
  background: var(--grad-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.plan-price {
  display: flex; align-items: baseline; gap: 4px;
  font-size: 52px; font-weight: 800; letter-spacing: -.04em; line-height: 1;
  color: var(--ink);
}
.plan-pro .plan-price { color: #fff; }
.plan-price sub { font-size: 18px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; margin-left: 2px; }
.plan-pro .plan-price sub { color: rgba(255,255,255,.4); }
.plan-desc { font-size: 14px; color: var(--ink-3); line-height: 1.55; }
.plan-pro .plan-desc { color: rgba(255,255,255,.45); }

.plan-divider { height: 1px; background: var(--line); }
.plan-pro .plan-divider { background: rgba(255,255,255,.08); }

.plan-features { display: flex; flex-direction: column; gap: 11px; flex: 1; }
.plan-feature {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 500; color: var(--ink-2);
}
.plan-pro .plan-feature { color: rgba(255,255,255,.8); }
.feat-check { width: 18px; height: 18px; flex-shrink: 0; }
.feat-check-yes { color: var(--p1); }
.feat-check-no  { color: var(--ink-4); }
.plan-pro .feat-check-yes { color: #c060ff; }
.plan-feature.dim { color: var(--ink-4); }

/* ─── FAQ ───────────────────────────────────────────────── */
.faq { padding: 112px 0; background: #fff; }
.faq-inner { max-width: 720px; margin: 0 auto; padding: 0 48px; }
.faq-head { text-align: center; margin-bottom: 56px; }
.faq-head .t-h1 { margin-bottom: 14px; }

.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  border: 1px solid var(--line); border-radius: var(--r16);
  background: #fff; overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.faq-item.open {
  border-color: rgba(187,97,244,.3);
  box-shadow: 0 4px 20px rgba(139,47,224,.08);
}
.faq-btn {
  width: 100%; padding: 20px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: none; text-align: left;
  font-size: 15px; font-weight: 700; color: var(--ink);
  cursor: pointer; transition: background .15s;
}
.faq-btn:hover { background: var(--fill); }
.faq-item.open .faq-btn { color: var(--p1); }
.faq-icon {
  flex-shrink: 0; color: var(--ink-3);
  transition: transform .25s var(--ease), color .18s;
  width: 20px; height: 20px;
}
.faq-item.open .faq-icon { transform: rotate(180deg); color: var(--p1); }
.faq-body {
  max-height: 0; overflow: hidden;
  transition: max-height .32s ease, padding .32s ease;
  font-size: 14.5px; color: var(--ink-3); line-height: 1.75;
  padding: 0 24px;
}
.faq-item.open .faq-body { max-height: 240px; padding: 0 24px 22px; }

/* ─── FINAL CTA ─────────────────────────────────────────── */
.final {
  padding: 136px 0;
  background: linear-gradient(165deg, #160b28 0%, #0d0618 60%, #0a0412 100%);
  text-align: center; overflow: hidden; position: relative;
}
.final::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(187,97,244,.28) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(74,21,152,.2) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 80%, rgba(139,47,224,.12) 0%, transparent 45%);
  pointer-events: none;
}
.final-inner { position: relative; z-index: 1; padding: 0 48px; }
.final .t-display { color: #fff; margin-bottom: 20px; }
.final p { font-size: 18px; color: rgba(255,255,255,.5); margin-bottom: 44px; max-width: 500px; margin-left: auto; margin-right: auto; }

.claim-wrap-light {
  display: flex; align-items: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--rp); padding: 6px 6px 6px 20px;
  max-width: 500px; margin: 0 auto;
  transition: border-color .18s, background .18s;
}
.claim-wrap-light:focus-within {
  background: rgba(255,255,255,.12);
  border-color: rgba(180,85,240,.5);
}
.claim-wrap-light .claim-host { color: rgba(255,255,255,.35); }
.claim-wrap-light .claim-field { color: #fff; }
.claim-wrap-light .claim-field::placeholder { color: rgba(255,255,255,.2); }

/* ─── FOOTER ────────────────────────────────────────────── */
.footer {
  background: linear-gradient(170deg, #0d0618 0%, #0a0412 100%);
  padding: 80px 0 40px;
  position: relative; overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(187,97,244,.3) 30%, rgba(187,97,244,.3) 70%, transparent);
}
.footer-inner {
  max-width: 1160px; margin: 0 auto; padding: 0 48px;
  display: grid; grid-template-columns: 230px 1fr;
  gap: 80px; margin-bottom: 60px;
  position: relative; z-index: 1;
}
.footer-brand img {
  height: 56px; margin-bottom: 16px;
}
.footer-brand p { font-size: 14px; color: rgba(255,255,255,.32); line-height: 1.7; max-width: 185px; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.footer-col-title {
  font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.22);
  margin-bottom: 18px;
}
.footer-col a {
  display: block; font-size: 14px; color: rgba(255,255,255,.42);
  margin-bottom: 12px; transition: color .18s;
}
.footer-col a:hover { color: rgba(255,255,255,.88); }
.footer-bottom {
  max-width: 1160px; margin: 0 auto; padding: 24px 48px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: rgba(255,255,255,.18);
  position: relative; z-index: 1;
}

/* ─── AUTH PAGES ────────────────────────────────────────── */
.auth-page {
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 70% -10%, rgba(187,97,244,.18) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 100%, rgba(74,21,152,.12) 0%, transparent 50%),
    #F5F1FF;
  display: flex; align-items: center; justify-content: center;
  padding: 80px 24px 48px;
  position: relative;
}
.auth-page::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%238B2FE0' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: .6;
}
.auth-wrap {
  width: 100%; max-width: 460px; position: relative; z-index: 1;
}
.auth-brand {
  display: flex; justify-content: center; margin-bottom: 28px;
}
.auth-brand-logo {
  height: 44px; width: auto; max-width: 180px; display: block;
  filter: drop-shadow(0 4px 16px rgba(139,47,224,.3));
  transition: transform .3s var(--ease);
}
.auth-brand-logo:hover { transform: scale(1.04); }
.auth-card {
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(228,222,250,.8);
  border-radius: var(--r24); padding: 44px 40px;
  width: 100%;
  box-shadow: 0 8px 48px rgba(139,47,224,.1), 0 2px 12px rgba(0,0,0,.06), 0 0 0 1px rgba(255,255,255,.9) inset;
}
.auth-card h1 { font-size: 26px; font-weight: 800; letter-spacing: -.025em; margin-bottom: 6px; }
.auth-card .sub { font-size: 14.5px; color: var(--ink-3); margin-bottom: 28px; line-height: 1.5; }

/* Google button wrapper */
.google-btn-wrap {
  margin: 0 0 4px;
  display: flex; justify-content: center;
}
.google-btn-wrap .g_id_signin { width: 100%; }
.google-btn-wrap iframe { width: 100% !important; }

/* submit button full-width helper used in auth forms */
.btn-block { width: 100%; justify-content: center; margin-top: 4px; }

.u-preview {
  background: var(--fill); border: 1px solid var(--line);
  border-radius: var(--r12); padding: 12px 16px;
  font-size: 14px; font-weight: 700; color: var(--p1);
  margin-bottom: 28px; display: flex; align-items: center; gap: 10px;
}
.u-preview-icon {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--grad); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}

.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 7px;
}
.field input, .field textarea {
  width: 100%; background: var(--fill); border: 1.5px solid var(--line);
  border-radius: var(--r12); padding: 12px 14px;
  font-size: 14px; font-family: inherit; color: var(--ink);
  outline: none; transition: border-color .18s, box-shadow .18s;
}
.field input:focus, .field textarea:focus {
  border-color: var(--p1);
  box-shadow: 0 0 0 3px rgba(139,47,224,.1);
  background: #fff;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-4); }
.field textarea { resize: vertical; }

.form-link { display: block; text-align: right; font-size: 13px; color: var(--ink-3); margin-top: -10px; margin-bottom: 20px; }
.form-link:hover { color: var(--p1); }

.auth-footer { text-align: center; margin-top: 24px; font-size: 14px; color: var(--ink-3); }
.auth-footer a { color: var(--p1); font-weight: 700; }

.divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0; font-size: 12px; color: var(--ink-4);
}
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ─── DASHBOARD ─────────────────────────────────────────── */
.dash { display: flex; min-height: 100vh; background: var(--fill); }

.sidebar {
  width: 240px; flex-shrink: 0; background: #fff;
  border-right: 1px solid var(--line);
  padding: 20px 12px; position: fixed; top: 0; bottom: 0; left: 0;
  display: flex; flex-direction: column;
  overflow-y: auto;
  box-shadow: 2px 0 12px rgba(0,0,0,.03);
}
.sidebar-logo { height: 32px; margin: 8px 10px 28px; }
.sidebar-section {
  font-size: 10px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-4);
  padding: 6px 10px; margin-top: 8px;
}
.s-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--r8);
  font-size: 13.5px; font-weight: 600; color: var(--ink-3);
  background: none; border: none; width: 100%; text-align: left;
  transition: background .15s, color .15s;
}
.s-item:hover { background: var(--fill); color: var(--ink); }
.s-item.on {
  background: linear-gradient(135deg, #f0e6ff, #f7f1ff);
  color: var(--p1);
  box-shadow: 0 0 0 1px rgba(139,47,224,.12);
}
.s-item-icon { font-size: .9rem; flex-shrink: 0; width: 18px; text-align: center; }
.sidebar-gap { flex: 1; }
.sidebar-user {
  background: var(--fill); border: 1px solid var(--line);
  border-radius: var(--r12); padding: 10px 12px;
  display: flex; align-items: center; gap: 10px;
  transition: border-color .15s;
}
.sidebar-user:hover { border-color: rgba(187,97,244,.3); }
.s-av {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--grad); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 800; color: #fff;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(139,47,224,.2);
}
.s-uname { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.s-uurl  { font-size: 11px; color: var(--ink-3); }

.dash-main { margin-left: 240px; flex: 1; padding: 40px 40px; }
.dash-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 32px; flex-wrap: wrap; gap: 16px;
}
.dash-head h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.dash-head p  { font-size: 14px; color: var(--ink-3); margin-top: 4px; }

.kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 24px; }
.kpi {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r16); padding: 26px 28px; box-shadow: var(--s1);
  transition: border-color .2s, box-shadow .2s, transform .2s;
  position: relative; overflow: hidden;
}
.kpi::before {
  content: ''; position: absolute; bottom: 0; right: 0;
  width: 80px; height: 80px; border-radius: 50%;
  background: radial-gradient(circle, rgba(187,97,244,.06) 0%, transparent 70%);
  pointer-events: none;
}
.kpi:hover { border-color: rgba(187,97,244,.2); box-shadow: var(--s2); transform: translateY(-2px); }
.kpi-label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.kpi-val {
  font-size: 38px; font-weight: 800; letter-spacing: -.04em; line-height: 1; margin-bottom: 6px;
  background: var(--grad-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.kpi-delta { font-size: 12px; font-weight: 600; color: #16a34a; }

.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r20); padding: 28px; box-shadow: var(--s1); margin-bottom: 20px;
}
.card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.card-title { font-size: 15px; font-weight: 800; }
.card-sub { font-size: 13px; color: var(--ink-3); }

.link-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; background: var(--fill); border: 1px solid var(--line);
  border-radius: var(--r12); margin-bottom: 8px; cursor: grab;
  transition: border-color .18s, box-shadow .18s, transform .15s;
}
.link-row:hover {
  border-color: rgba(187,97,244,.3);
  box-shadow: 0 2px 12px rgba(139,47,224,.07);
  transform: translateY(-1px);
}
.link-row:active { cursor: grabbing; }
.drag-h { color: var(--ink-4); font-size: .95rem; cursor: grab; }
.link-ic {
  width: 38px; height: 38px; border-radius: var(--r8);
  background: #fff; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; flex-shrink: 0;
}
.link-info { flex: 1; min-width: 0; }
.link-title { font-size: 13px; font-weight: 700; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-url   { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-acts  { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.tog {
  width: 38px; height: 22px; background: var(--p1);
  border-radius: 99px; border: none; position: relative; cursor: pointer;
  transition: background .18s; flex-shrink: 0;
}
.tog.off { background: var(--line); }
.tog::after {
  content: ''; position: absolute; top: 3px; right: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12);
  transition: right .18s;
}
.tog.off::after { right: auto; left: 3px; }
.ic-btn {
  width: 30px; height: 30px; border-radius: var(--r8);
  background: none; border: 1px solid var(--line);
  color: var(--ink-3); font-size: .75rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, border-color .12s;
}
.ic-btn:hover { background: var(--fill); border-color: #d0b8f8; }

.add-row {
  width: 100%; padding: 11px; background: none;
  border: 1px dashed var(--line); border-radius: var(--r12);
  color: var(--ink-3); font-family: inherit; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 8px; transition: border-color .18s, color .18s, background .18s;
}
.add-row:hover { border-color: var(--p1); color: var(--p1); background: #f5f0ff; }

.bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.bar-lbl { font-size: 13px; font-weight: 600; min-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 7px; }
.bar-track { flex: 1; height: 7px; background: var(--fill); border-radius: 99px; overflow: hidden; }
.bar-fill  { height: 100%; background: var(--grad); border-radius: 99px; }
.bar-cnt   { font-size: 12px; font-weight: 700; color: var(--ink-3); min-width: 40px; text-align: right; }

/* ─── PUBLIC PROFILE ────────────────────────────────────── */
.profile-page { min-height: 100vh; background: var(--fill); display: flex; flex-direction: column; align-items: center; }
.profile-cover { width: 100%; height: 180px; background: var(--grad); flex-shrink: 0; }
.profile-body  { width: 100%; max-width: 480px; padding: 0 24px 72px; margin-top: -60px; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.pf-av-wrap { position: relative; margin-bottom: 14px; }
.pf-av-ring { position: absolute; inset: -3px; border-radius: 50%; background: var(--grad); }
.pf-av { position: relative; z-index: 1; width: 92px; height: 92px; border-radius: 50%; background: #fff; margin: 3px; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; font-weight: 800; color: var(--p1); border: 3px solid #fff; box-shadow: var(--s3); }
.pf-name { font-size: 22px; font-weight: 800; letter-spacing: -.02em; text-align: center; margin-bottom: 6px; }
.pf-bio  { font-size: 14px; color: var(--ink-3); text-align: center; line-height: 1.55; max-width: 300px; margin-bottom: 20px; }
.pf-socials { display: flex; gap: 8px; margin-bottom: 32px; }
.pf-social {
  width: 36px; height: 36px; border-radius: var(--r8);
  background: #fff; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; box-shadow: var(--s1);
  transition: border-color .15s, transform .15s;
}
.pf-social:hover { border-color: #d0b8f8; transform: translateY(-1px); }
.pf-links { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.pf-link {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 16px; padding: 14px 16px;
  color: var(--ink); text-decoration: none; box-shadow: var(--s1);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.pf-link:hover { border-color: #d0b8f8; box-shadow: var(--s3); transform: translateY(-2px); }
.pf-link.hi { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 4px 16px rgba(139,47,224,.3); }
.pf-link.hi:hover { box-shadow: 0 8px 28px rgba(139,47,224,.4); }
.pf-link-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--fill); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.pf-link.hi .pf-link-ic { background: rgba(255,255,255,.18); border-color: transparent; }
.pf-link-text { flex: 1; min-width: 0; }
.pf-link-title { font-size: 15px; font-weight: 700; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-link-sub   { font-size: 12px; opacity: .55; }
.pf-link-arr   { opacity: .35; flex-shrink: 0; transition: transform .18s, opacity .18s; }
.pf-link:hover .pf-link-arr { transform: translateX(3px); opacity: .7; }
.pf-link.hi .pf-link-arr { opacity: .6; }
.pf-footer { margin-top: 44px; font-size: 13px; color: var(--ink-4); text-align: center; }
.pf-footer a { color: var(--p1); font-weight: 700; }

/* ─── MODAL & TOAST ─────────────────────────────────────── */
.overlay { position: fixed; inset: 0; z-index: 400; background: rgba(10,10,15,.45); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity .18s; }
.overlay.open { opacity: 1; pointer-events: all; }
.modal { background: #fff; border: 1px solid var(--line); border-radius: var(--r24); padding: 36px; width: 100%; max-width: 420px; box-shadow: var(--s5); transform: translateY(12px) scale(.98); transition: transform .2s; }
.overlay.open .modal { transform: none; }
.modal-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.modal-title { font-size: 18px; font-weight: 800; }
.modal-close { width: 30px; height: 30px; border-radius: var(--r8); background: var(--fill); border: 1px solid var(--line); color: var(--ink-3); font-size: .9rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: color .12s; }
.modal-close:hover { color: var(--ink); }

.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(64px); background: var(--ink); color: #fff; border-radius: var(--rp); padding: 11px 22px; font-size: 13px; font-weight: 700; box-shadow: var(--s4); pointer-events: none; z-index: 500; transition: transform .28s cubic-bezier(.34,1.56,.64,1); }
.toast.show { transform: translateX(-50%) translateY(0); }

/* ─── SCROLL REVEAL ─────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s cubic-bezier(.22,.68,0,1), transform .65s cubic-bezier(.22,.68,0,1);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-scale {
  opacity: 0;
  transform: scale(.94);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.68,0,1.1);
}
.reveal-scale.visible { opacity: 1; transform: none; }
.reveal-left  { opacity:0; transform:translateX(-30px); transition:opacity .6s ease,transform .6s cubic-bezier(.22,.68,0,1); }
.reveal-right { opacity:0; transform:translateX(30px);  transition:opacity .6s ease,transform .6s cubic-bezier(.22,.68,0,1); }
.reveal-left.visible, .reveal-right.visible { opacity:1; transform:none; }
[style*="--delay"] { transition-delay:var(--delay,0s); }

/* ─── THEME GALLERY ─────────────────────────────────────── */
.themes-section { padding: 100px 0; background: #fff; overflow: hidden; }
.themes-head { text-align: center; margin-bottom: 56px; }
.themes-scroller {
  display: flex; gap: 20px;
  overflow-x: auto; padding: 20px 48px 32px;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.themes-scroller::-webkit-scrollbar { display: none; }
.theme-card {
  flex-shrink: 0; width: 200px;
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform .3s var(--ease);
}
.theme-card:hover { transform: translateY(-8px) scale(1.02); }
.theme-card-name {
  text-align: center; font-size: 13px; font-weight: 700;
  color: var(--ink-3); margin-top: 14px; letter-spacing: .03em;
}
.mini-phone {
  border-radius: 24px; padding: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  overflow: hidden;
}
.mini-cover { height: 48px; border-radius: 14px 14px 0 0; margin: -10px -10px 0; }
.mini-body { padding: 0 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 8px; }
.mini-av { width: 40px; height: 40px; border-radius: 50%; margin-top: -20px; border: 2px solid rgba(255,255,255,.8); font-size: .6rem; font-weight: 800; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.mini-name { font-size: 9px; font-weight: 800; line-height: 1; }
.mini-bio  { font-size: 7px; opacity: .6; }
.mini-link { width: 100%; padding: 5px 8px; border-radius: 6px; font-size: 7px; font-weight: 700; display: flex; align-items: center; gap: 4px; }

/* ─── COMPARISON TABLE ──────────────────────────────────── */
.compare { padding: 100px 0; background: var(--fill); }
.compare-head { text-align: center; margin-bottom: 56px; }
.cmp-table {
  max-width: 780px; margin: 0 auto;
  border: 1px solid var(--line); border-radius: var(--r24);
  overflow: hidden; box-shadow: var(--s3);
}
.cmp-head-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  background: #fff; border-bottom: 1px solid var(--line);
}
.cmp-head-cell {
  padding: 22px 20px; font-size: 14px; font-weight: 800;
  text-align: center; color: var(--ink);
  border-right: 1px solid var(--line-2);
}
.cmp-head-cell:last-child { border-right: none; }
.cmp-head-cell.ours {
  background: linear-gradient(135deg, #1a0038 0%, #0d001f 100%);
  color: #fff;
}
.cmp-head-cell.ours .cmp-badge {
  display: inline-block; background: var(--grad); color: #fff;
  font-size: 10px; padding: 2px 8px; border-radius: 99px; margin-top: 4px;
}
.cmp-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid var(--line-2);
  transition: background .15s;
}
.cmp-row:last-child { border-bottom: none; }
.cmp-row:hover { background: rgba(139,47,224,.03); }
.cmp-cell {
  padding: 14px 20px; font-size: 13px; font-weight: 500; color: var(--ink-2);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border-right: 1px solid var(--line-2); text-align: center;
}
.cmp-cell:first-child { justify-content: flex-start; font-weight: 600; color: var(--ink); background: #fff; }
.cmp-cell:last-child { border-right: none; }
.cmp-cell.ours { background: rgba(139,47,224,.04); }
.cmp-yes { color: #16a34a; font-size: 1rem; }
.cmp-no  { color: #d1d5db; font-size: 1rem; }
.cmp-partial { color: #d97706; font-size: .85rem; font-weight: 700; }

/* ─── PLATFORM LOGOS ────────────────────────────────────── */
.platforms { padding: 80px 0; background: #fff; overflow: hidden; }
.platforms-head { text-align: center; margin-bottom: 40px; }
.plat-row {
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
  max-width: 900px; margin: 0 auto;
}
.plat-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--fill); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 18px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.plat-chip:hover { border-color: rgba(139,47,224,.3); box-shadow: 0 4px 16px rgba(139,47,224,.1); transform: translateY(-2px); }
.plat-chip-icon { font-size: 1.2rem; }

/* ─── TESTIMONIALS MARQUEE ──────────────────────────────── */
.testi-marquee { padding: 100px 0; background: var(--fill); overflow: hidden; }
.testi-marquee-head { text-align: center; margin-bottom: 56px; }
.testi-track {
  display: flex; gap: 20px;
  animation: marquee-ltr 40s linear infinite;
  width: max-content; margin-bottom: 16px;
}
.testi-track.rev {
  animation: marquee-rtl 44s linear infinite;
}
.testi-track:hover { animation-play-state: paused; }
@keyframes marquee-ltr { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-rtl { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.testi-m-card {
  flex-shrink: 0; width: 320px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r20); padding: 24px 22px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--s1);
}
.testi-m-stars { display: flex; gap: 2px; }
.testi-m-stars span { font-size: 13px; color: #f59e0b; }
.testi-m-quote { font-size: 14px; line-height: 1.72; color: var(--ink-2); font-style: italic; flex: 1; }
.testi-m-person { display: flex; align-items: center; gap: 10px; }
.testi-m-av { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; font-size: .75rem; font-weight: 800; color: #fff; display: flex; align-items: center; justify-content: center; }
.testi-m-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.testi-m-role { font-size: 11px; color: var(--ink-3); }

/* ─── PHONE FLOAT ANIMATION ─────────────────────────────── */
@keyframes phone-float {
  0%, 100% { transform: translateY(0px) rotate(-1deg); }
  50%       { transform: translateY(-12px) rotate(0.5deg); }
}
.hero-phone .phone { animation: phone-float 5s ease-in-out infinite; }

/* ─── ANIMATED GRADIENT ORB ─────────────────────────────── */
@keyframes orb-drift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(30px, -20px) scale(1.05); }
  66%  { transform: translate(-20px, 20px) scale(.95); }
  100% { transform: translate(0, 0) scale(1); }
}
.hero::before { animation: orb-drift 12s ease-in-out infinite; }

/* ─── RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 60px; }
  .hero-phone { display: none; }
  .showcase-inner { grid-template-columns: 1fr; }
  .showcase-phone { display: none; }
  .feat-grid { grid-template-columns: 1fr 1fr; }
  .testi-grid { grid-template-columns: 1fr 1fr; }
  .trust-nums { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-inner { padding: 0 24px; }
  .hero-inner { padding: 0 24px; }
  .hero { padding: 100px 0 80px; }
  .trust-inner, .how-inner, .faq-inner { padding: 0 24px; }
  .footer-inner { grid-template-columns: 1fr; gap: 40px; padding: 0 24px; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-bottom { padding: 24px 24px 0; flex-direction: column; gap: 8px; text-align: center; }
  .feat-grid { grid-template-columns: 1fr; }
  .testi-grid { grid-template-columns: 1fr; }
  .trust-nums { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; gap: 32px; }
  .plans { grid-template-columns: 1fr; max-width: 420px; }
  .claim-wrap { flex-wrap: wrap; border-radius: var(--r16); padding: 10px 12px; }
  .claim-wrap .btn { width: 100%; margin-top: 4px; }
  .sidebar { display: none; }
  .dash-main { margin-left: 0; padding: 80px 20px 40px; }
  .kpis { grid-template-columns: 1fr; }
  .auth-page { padding: 100px 16px 40px; }
  .auth-card { padding: 32px 24px; }
  .final-inner { padding: 0 24px; }
}