/* ============================================================
   SocialMind — Social Media Intelligence
   Design system: dark premium, glassmorphism, pink→purple
   ============================================================ */

:root {
  --pink: #FF2D87;
  --orange: #FF6A3D;
  --purple: #C724B1;
  --grad: linear-gradient(135deg, #FF6A3D 0%, #FF2D87 50%, #C724B1 100%);
  --grad-soft: linear-gradient(135deg, rgba(255,106,61,0.16), rgba(255,45,135,0.16) 50%, rgba(199,36,177,0.16));

  --bg: #0c1014;
  --bg-2: #10141a;
  --bg-3: #141820;
  --card: #1a1a28;
  --surface: rgba(26,26,40,0.72);
  --surface-2: rgba(40,40,60,0.8);
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);

  --ink: #f4f4f7;
  --ink-2: #b6b8c4;
  --ink-3: #74778a;

  --light-bg: #f4f1ee;
  --light-ink: #1a1620;
  --light-ink-2: #5c5766;
  --light-card: #ffffff;

  --font-display: "Articulat CF", "Articulat", "Manrope", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --maxw: 1200px;

  --glow-pink: 0 0 60px rgba(255,45,135,0.35);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.6;
}

::selection { background: var(--pink); color: #fff; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { display: block; max-width: 100%; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ---- Type ---- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; }
.display { font-size: clamp(38px, 6.2vw, 76px); font-weight: 700; }
.h2 { font-size: clamp(30px, 4.4vw, 52px); }
.h3 { font-size: clamp(20px, 2.2vw, 26px); }
.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-3);
}
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lead { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-2); }

/* ---- Section ---- */
section { position: relative; padding: clamp(80px, 11vw, 150px) 0; }
.section-head { max-width: 720px; margin: 0 auto clamp(48px, 6vw, 80px); text-align: center; }
.section-head .eyebrow { margin-bottom: 18px; display: block; }
.section-head p { margin-top: 18px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 500; font-size: 16px;
  padding: 15px 28px; border-radius: 999px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, border-color .3s, color .3s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--grad); color: #fff;
  box-shadow: 0 8px 30px rgba(255,45,135,0.35);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 44px rgba(255,45,135,0.5); }
.btn-ghost {
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--border-strong); backdrop-filter: blur(10px);
}
.btn-ghost:hover { background: rgba(255,255,255,0.12); transform: translateY(-3px); }
.btn-lg { padding: 19px 38px; font-size: 18px; }

/* ---- Glow blobs ---- */
.glow {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: 0.5; pointer-events: none; z-index: 0;
}
.glow-pink { background: #FF2D87; }
.glow-purple { background: #C724B1; }

/* ============================================================ NAV */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .4s var(--ease), border-color .4s, backdrop-filter .4s, padding .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(12,16,20,0.72);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--border);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; transition: padding .4s var(--ease); }
.nav.scrolled .nav-inner { padding: 13px 0; }
.nav-logo img { height: 36px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 36px; }
.nav-links a { font-size: 15px; font-weight: 700; color: var(--ink-2); transition: color .25s; position: relative; }
.nav-links a:hover { color: var(--ink); }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: var(--grad); transition: width .3s var(--ease);
}
.nav-links a:hover::after { width: 100%; }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-link-btn { font-size: 15px; color: var(--ink); padding: 10px 14px; }
.nav-toggle { display: none; }

/* ============================================================ HERO */
.hero { padding-top: 170px; text-align: center; overflow: hidden; }
.hero .glow-pink { width: 520px; height: 520px; top: -120px; left: 50%; transform: translateX(-60%); opacity: 0.35; }
.hero .glow-purple { width: 480px; height: 480px; top: 40px; left: 50%; transform: translateX(10%); opacity: 0.3; }
.hero-inner { position: relative; z-index: 2; }
.badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px 8px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border-strong);
  font-size: 13.5px; color: var(--ink-2); backdrop-filter: blur(10px);
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 10px var(--pink); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }
.hero h1 { margin: 28px auto 0; max-width: 16ch; }
.hero .lead { margin: 26px auto 0; max-width: 60ch; }
.hero-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 38px; }
.hero-note { margin-top: 22px; font-size: 14px; color: var(--ink-3); }

/* dashboard mock */
.hero-visual { position: relative; z-index: 2; margin: 70px auto 0; max-width: 1060px; perspective: 1800px; }
.dash {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, #15151e, #0e0e14);
  box-shadow: 0 50px 120px -30px rgba(0,0,0,0.8), 0 0 80px -20px rgba(199,36,177,0.25);
  display: grid; grid-template-columns: 220px 1fr; text-align: left;
  transform: rotateX(8deg); transform-origin: center top;
  transition: transform 1s var(--ease);
}
.hero-visual.in .dash { transform: rotateX(0deg); }
.dash-side { background: rgba(0,0,0,0.35); border-right: 1px solid var(--border); padding: 22px 16px; }
.dash-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 26px; padding: 0 8px; }
.dash-brand .mk { width: 26px; height: 26px; border-radius: 8px; background: var(--grad); }
.dash-brand span { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.dash-nav { display: flex; flex-direction: column; gap: 4px; }
.dash-nav i { display: block; width: 16px; height: 16px; border-radius: 5px; background: var(--ink-3); opacity: .6; flex: none; }
.dash-nav a { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 10px; font-size: 13.5px; color: var(--ink-2); }
.dash-nav a.active { background: var(--grad-soft); color: var(--ink); }
.dash-nav a.active i { background: var(--grad); opacity: 1; }
.dash-main { padding: 22px 24px; }
.dash-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.dash-topbar h4 { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.dash-topbar .pill { font-size: 12px; color: var(--ink-2); padding: 6px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.dash-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.metric { padding: 16px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--border); }
.metric .lbl { font-size: 11.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }
.metric .val { font-family: var(--font-display); font-size: 26px; font-weight: 700; margin-top: 6px; }
.metric .trend { font-size: 12px; margin-top: 4px; color: #58c98b; }
.metric.m1 { background: linear-gradient(135deg, rgba(255,45,135,0.16), rgba(255,45,135,0.04)); border-color: rgba(255,45,135,0.3); }
.metric.m2 { background: linear-gradient(135deg, rgba(199,36,177,0.16), rgba(199,36,177,0.04)); border-color: rgba(199,36,177,0.3); }
.dash-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; }
.panel { padding: 16px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--border); }
.panel h5 { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 14px; }
.chart { display: flex; align-items: flex-end; gap: 9px; height: 96px; }
.chart span { flex: 1; height: 0; border-radius: 5px 5px 0 0; background: var(--grad); opacity: .85; transition: height 1.1s var(--ease); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal i { aspect-ratio: 1; border-radius: 5px; background: var(--surface-2); }
.cal i.on { background: var(--grad); }
.cal i.mid { background: rgba(199,36,177,0.4); }

/* ============================================================ PAIN (light) */
.pain { background: var(--light-bg); color: var(--light-ink); }
.pain .eyebrow { color: var(--pink); }
.pain-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 980px; margin: 0 auto; }
.pain-card {
  background: var(--light-card); border-radius: var(--r-md); padding: 30px;
  border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 2px 18px rgba(0,0,0,0.04);
  display: flex; gap: 18px; transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.pain-card:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(255,45,135,0.14); }
.pain-num { font-family: var(--font-display); font-weight: 700; font-size: 22px; flex: none;
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--grad); color: #fff; }
.pain-card p { font-size: 16.5px; color: var(--light-ink-2); line-height: 1.55; }
.pain-conclusion { text-align: center; margin: 56px auto 0; max-width: 700px; font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 28px); font-weight: 500; line-height: 1.35; }

/* ============================================================ VIDEO */
.video-sec { background: var(--bg-2); }
.video-sec .glow-purple { width: 600px; height: 400px; top: 30%; left: 50%; transform: translateX(-50%); opacity: .22; }
.video-frame {
  position: relative; z-index: 2; max-width: 940px; margin: 0 auto; aspect-ratio: 16/9;
  border-radius: var(--r-lg); border: 1px solid var(--border-strong); overflow: hidden;
  background: repeating-linear-gradient(135deg, #131019, #131019 14px, #15121c 14px, #15121c 28px);
  display: grid; place-items: center; box-shadow: 0 40px 100px -30px rgba(0,0,0,0.7);
  transition: box-shadow .5s; cursor: pointer;
}
.video-frame:hover { box-shadow: 0 40px 100px -20px rgba(255,45,135,0.35); }
.play {
  width: 86px; height: 86px; border-radius: 50%; background: var(--grad);
  display: grid; place-items: center; box-shadow: 0 0 0 0 rgba(255,45,135,0.5);
  animation: ring 2.6s infinite; transition: transform .35s var(--ease);
}
.video-frame:hover .play { transform: scale(1.08); }
.play::after { content: ""; width: 0; height: 0; margin-left: 6px;
  border-left: 22px solid #fff; border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
@keyframes ring { 0%{box-shadow:0 0 0 0 rgba(255,45,135,0.5)} 70%{box-shadow:0 0 0 26px rgba(255,45,135,0)} 100%{box-shadow:0 0 0 0 rgba(255,45,135,0)} }
.video-note { text-align: center; margin-top: 30px; color: var(--ink-2); font-size: 15px; position: relative; z-index: 2; }

/* ============================================================ FEATURES */
.features .glow-pink { width: 500px; height: 500px; top: 5%; left: -10%; opacity: .18; }
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; position: relative; z-index: 2; }
.feat-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 28px; position: relative; overflow: hidden;
  transition: transform .4s var(--ease), border-color .4s, background .4s;
}
.feat-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s;
}
.feat-card:hover { transform: translateY(-6px); background: var(--surface-2); }
.feat-card:hover::before { opacity: 1; }
.feat-ic {
  width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
  background: var(--grad-soft); border: 1px solid var(--border-strong); margin-bottom: 20px;
  transition: box-shadow .4s;
}
.feat-card:hover .feat-ic { box-shadow: var(--glow-pink); }
.feat-ic svg { width: 24px; height: 24px; stroke: var(--pink); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.feat-card h3 { font-size: 18px; margin-bottom: 9px; }
.feat-card p { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }

/* ============================================================ PRICING */
.pricing .glow-purple { width: 520px; height: 520px; bottom: -10%; right: -10%; opacity: .16; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; position: relative; z-index: 2; }
.plan {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 34px 30px; display: flex; flex-direction: column;
  transition: transform .4s var(--ease), border-color .4s;
}
.plan:hover { transform: translateY(-6px); border-color: var(--border-strong); }
.plan.featured {
  background: linear-gradient(180deg, rgba(255,45,135,0.08), rgba(199,36,177,0.05));
  border: 1.5px solid transparent; position: relative;
  background-clip: padding-box; box-shadow: 0 30px 80px -30px rgba(255,45,135,0.4);
}
.plan.featured::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.plan-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--grad); color: #fff; font-family: var(--font-display); font-weight: 600;
  font-size: 12.5px; padding: 7px 18px; border-radius: 999px; letter-spacing: .02em;
  box-shadow: 0 8px 24px rgba(255,45,135,0.4); white-space: nowrap;
}
.plan-name { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .14em; font-size: 13px; color: var(--ink-3); font-weight: 600; }
.plan.featured .plan-name { color: var(--pink); }
.plan-price { font-family: var(--font-display); font-weight: 700; font-size: 46px; margin: 16px 0 4px; display: flex; align-items: baseline; gap: 4px; }
.plan-price span { font-size: 17px; font-weight: 500; color: var(--ink-3); }
.plan ul { list-style: none; margin: 26px 0; display: flex; flex-direction: column; gap: 13px; flex: 1; }
.plan li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; color: var(--ink-2); }
.plan li svg { width: 18px; height: 18px; flex: none; margin-top: 2px; stroke: var(--pink); stroke-width: 2; fill: none; }
.plan li.strong { color: var(--ink); font-weight: 600; }
.plan .btn { justify-content: center; width: 100%; }
.plan:not(.featured) .btn { background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--ink); }
.plan:not(.featured) .btn:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); }
.pricing-note { text-align: center; margin-top: 40px; color: var(--ink-3); font-size: 14.5px; position: relative; z-index: 2; }

/* ============================================================ FAQ */
.faq-list { max-width: 760px; margin: 0 auto; position: relative; z-index: 2; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 26px 4px; text-align: left; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(17px, 1.9vw, 20px); color: var(--ink); transition: color .3s; }
.faq-q:hover { color: var(--pink); }
.faq-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border-strong);
  display: grid; place-items: center; position: relative; transition: background .3s, border-color .3s; }
.faq-item.open .faq-ic { background: var(--grad); border-color: transparent; }
.faq-ic::before, .faq-ic::after { content: ""; position: absolute; background: var(--ink); border-radius: 2px; transition: transform .35s var(--ease), background .3s; }
.faq-ic::before { width: 13px; height: 2px; }
.faq-ic::after { width: 2px; height: 13px; }
.faq-item.open .faq-ic::before, .faq-item.open .faq-ic::after { background: #fff; }
.faq-item.open .faq-ic::after { transform: rotate(90deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
.faq-a p { padding: 0 4px 28px; color: var(--ink-2); font-size: 16px; max-width: 60ch; }

/* ============================================================ FINAL CTA */
.final { padding: 0; }
.final-card {
  position: relative; overflow: hidden; text-align: center;
  background: var(--grad); border-radius: 0;
  padding: clamp(70px, 10vw, 130px) 28px;
}
.final-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.22), transparent 40%),
              radial-gradient(circle at 80% 80%, rgba(255,255,255,0.16), transparent 45%);
}
.final-card > * { position: relative; z-index: 2; }
.final-card h2 { color: #fff; max-width: 18ch; margin: 0 auto; }
.final-card p { color: rgba(255,255,255,0.9); margin: 22px auto 0; max-width: 50ch; font-size: 19px; }
.final .btn-white { background: #fff; color: var(--pink); margin-top: 38px; box-shadow: 0 14px 40px rgba(0,0,0,0.25); }
.final .btn-white:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 20px 50px rgba(0,0,0,0.35); }
.final-note { margin-top: 22px !important; font-size: 15px !important; color: rgba(255,255,255,0.85) !important; }

/* ============================================================ FOOTER */
.footer { background: var(--bg); border-top: 1px solid var(--border); padding: 60px 0 40px; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.footer-logo img { height: 54px; opacity: .95; }
.footer-links { display: flex; gap: 28px; }
.footer-links a { font-size: 14px; color: var(--ink-2); transition: color .25s; }
.footer-links a:hover { color: var(--ink); }
.footer-copy { text-align: center; margin-top: 40px; font-size: 13px; color: var(--ink-3); }

/* ============================================================ REVEAL */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }

/* ============================================================ RESPONSIVE */
@media (max-width: 980px) {
  .feat-grid, .plans, .testi-grid { grid-template-columns: repeat(2, 1fr); }
  .plan.featured { transform: none; }
  .dash { grid-template-columns: 1fr; }
  .dash-side { display: none; }
}
@media (max-width: 760px) {
  .nav-links, .nav-link-btn { display: none; }
  .nav-toggle { display: grid; }
  .pain-grid, .feat-grid, .plans, .testi-grid, .dash-metrics, .dash-row { grid-template-columns: 1fr; }
  .hero { padding-top: 130px; }
  .hero-visual { transform: none; }
  .dash { transform: none !important; }
  .crow { padding: 16px 18px; }
  .crow .price { font-size: 13px; }
}

/* Mobile menu */
.nav-toggle { width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border-strong); place-items: center; }
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink); }
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }
.mobile-menu { position: fixed; inset: 0; z-index: 99; background: rgba(12,16,20,0.96); backdrop-filter: blur(14px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  opacity: 0; pointer-events: none; transition: opacity .35s; }
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu a { font-family: var(--font-display); font-size: 24px; color: var(--ink); }
.mobile-menu .btn { margin-top: 14px; }

/* ============================================================ v2 ADDITIONS */
.pink{color:var(--pink)}
/* buttons */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-20deg);transition:left .75s var(--ease);pointer-events:none}
.btn:hover::after{left:140%}
.btn:active{transform:translateY(0) scale(.97)!important}
.btn .arr{display:inline-block;transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.btn-primary{background-image:linear-gradient(120deg,#FF6A3D 0%,#FF2D87 30%,#C724B1 60%,#FF2D87 80%,#FF6A3D 100%);background-size:220% 100%;background-position:0% 50%;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-position .8s var(--ease)}
.btn-primary:hover{background-position:100% 50%}
.btn-pulse{animation:btnGlow 3.2s ease-in-out infinite}
@keyframes btnGlow{0%,100%{box-shadow:0 8px 30px rgba(255,45,135,.35)}50%{box-shadow:0 8px 46px rgba(255,45,135,.62),0 0 0 6px rgba(255,45,135,.08)}}
/* stats */
.stats{padding:0 0 clamp(70px,9vw,120px);position:relative;z-index:2}
.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:720px;margin:0 auto}
.stat{padding:26px 24px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border);text-align:center}
.stat b{display:block;font-family:var(--font-display);font-size:clamp(34px,4vw,46px);line-height:1;color:var(--pink);text-shadow:0 0 30px rgba(255,45,135,.45)}
.stat span{display:block;margin-top:10px;font-size:14.5px;color:var(--ink-2)}
/* video slot */
.video-slot{position:relative;z-index:2;max-width:940px;margin:0 auto;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border-strong);background:radial-gradient(ellipse at 50% 40%,rgba(255,45,135,.14),transparent 60%),#11131b;display:grid;place-items:center;box-shadow:0 40px 100px -30px rgba(0,0,0,.7)}
.video-slot iframe,.video-slot video{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-soon{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;padding:20px}
.video-soon .play{animation:ring 2.6s infinite}
.video-soon strong{font-family:var(--font-display);font-size:20px}
.video-soon span{font-size:14px;color:var(--ink-3)}
/* tools */
.tools{background:var(--bg-3);overflow:hidden}
.tools-row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;max-width:1000px;margin:0 auto;position:relative;z-index:2}
.tool{width:128px;padding:20px 12px 16px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;transition:transform .4s var(--ease),border-color .4s,opacity .4s}
.tool .plate{width:56px;height:56px;border-radius:15px;background:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.tool .plate img{width:32px;height:32px}
.tool b{font-family:var(--font-display);font-size:14.5px;font-weight:600}
.tool small{font-size:12px;color:var(--ink-3);line-height:1.3;margin-top:-6px}
.tool:hover{transform:translateY(-6px);border-color:rgba(255,45,135,.4)}
.tools-row.merged .tool{opacity:.5;filter:grayscale(.6)}
.tools-row.merged .tool:hover{opacity:1;filter:none}
.funnel{position:relative;height:90px;width:2px;margin:26px auto;background:linear-gradient(180deg,transparent,var(--pink));z-index:2}
.funnel::after{content:"";position:absolute;left:50%;top:0;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--pink);box-shadow:0 0 16px var(--pink),0 0 30px var(--pink);animation:drop 1.8s var(--ease) infinite}
@keyframes drop{0%{top:0;opacity:0}20%{opacity:1}100%{top:100%;opacity:0}}
.sm-card{position:relative;z-index:2;max-width:620px;margin:0 auto;padding:34px 30px;border-radius:var(--r-lg);text-align:center;background:var(--card);box-shadow:0 0 0 1.5px rgba(255,45,135,.5),0 0 70px -10px rgba(255,45,135,.45)}
.sm-card>img{height:38px;margin:0 auto}
.sm-card p{margin-top:16px;font-size:17px;color:var(--ink-2)}
.sm-card p strong{color:var(--ink)}
.sm-card .from{margin-top:6px;font-family:var(--font-display);font-size:22px;font-weight:700}
/* founder */
.founder-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,80px);align-items:center;position:relative;z-index:2}
.founder-photo{aspect-ratio:4/5;border-radius:var(--r-lg);border:1px solid var(--border-strong);overflow:visible;box-shadow:0 40px 90px -30px rgba(255,45,135,.35);background:repeating-linear-gradient(135deg,#141722,#141722 12px,#171a26 12px,#171a26 24px);display:grid;place-items:center;color:var(--ink-3);font-family:ui-monospace,monospace;font-size:13px;position:relative}

.founder-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;border-radius:inherit}
.founder .eyebrow{color:var(--pink)}
.founder h2{margin:16px 0 20px}
.founder p{color:var(--ink-2);font-size:17px;max-width:54ch}
.founder p+p{margin-top:14px}
.founder-sign{margin-top:22px;display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--ink-2)}
.founder-sign b{font-family:var(--font-display);color:var(--ink);font-size:17px}
.checks{list-style:none;margin-top:26px;display:grid;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px}
.checks li i{flex:none;width:22px;height:22px;border-radius:50%;background:var(--grad);display:grid;place-items:center;margin-top:1px;box-shadow:0 0 14px rgba(255,45,135,.45)}
.checks li i svg{width:12px;height:12px;stroke:#fff;stroke-width:3;fill:none}
/* quiz */
.quiz-sec{background:var(--bg-2);overflow:hidden}
.quiz-sec .glow-pink{width:520px;height:420px;top:20%;left:50%;transform:translateX(-50%);opacity:.16}
.quiz{position:relative;z-index:2;max-width:760px;margin:0 auto;background:var(--card);border:1px solid var(--border-strong);border-radius:var(--r-lg);padding:clamp(26px,4vw,44px);box-shadow:0 40px 100px -40px rgba(0,0,0,.8)}
.quiz-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px;font-size:13px;color:var(--ink-3)}
.quiz-top button{color:var(--ink-2);font-size:13px}
.quiz-top button:hover{color:var(--pink)}
.quiz-bar{height:5px;border-radius:9px;background:rgba(255,255,255,.07);overflow:hidden;margin-bottom:30px}
.quiz-bar span{display:block;height:100%;width:0;background:var(--grad);border-radius:9px;box-shadow:0 0 12px rgba(255,45,135,.6);transition:width .5s var(--ease)}
.quiz-step{animation:qIn .5s var(--ease)}
@keyframes qIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.quiz-q{font-family:var(--font-display);font-size:clamp(21px,2.6vw,28px);line-height:1.2;margin-bottom:24px;text-wrap:pretty}
.quiz-opts{display:grid;gap:12px}
.quiz-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:17px 20px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--border-strong);color:var(--ink);font-size:16px;transition:border-color .25s,background .25s,transform .25s var(--ease)}
.quiz-opt:hover{border-color:rgba(255,45,135,.6);background:rgba(255,45,135,.07);transform:translateX(4px)}
.quiz-opt.sel{border-color:var(--pink);background:rgba(255,45,135,.14)}
.quiz-opt .k{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:13px;background:rgba(255,255,255,.06);color:var(--ink-2);transition:background .25s,color .25s}
.quiz-opt:hover .k,.quiz-opt.sel .k{background:var(--grad);color:#fff}
.quiz-intro{text-align:center}
.quiz-intro h3{font-size:clamp(22px,2.8vw,30px);margin-bottom:12px}
.quiz-intro p{color:var(--ink-2);margin-bottom:26px}
.quiz-res .lvl{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:rgba(255,45,135,.12);border:1px solid rgba(255,45,135,.4);color:var(--pink);font-size:13px;font-weight:700;letter-spacing:.04em}
.quiz-res h3{font-size:clamp(24px,3vw,34px);margin:16px 0 10px}
.quiz-res>p{color:var(--ink-2)}
.meter{margin:24px 0;display:flex;align-items:center;gap:16px}
.meter-track{flex:1;height:10px;border-radius:9px;background:rgba(255,255,255,.07);overflow:hidden}
.meter-track span{display:block;height:100%;width:0;border-radius:9px;background:var(--grad);box-shadow:0 0 14px rgba(255,45,135,.6);transition:width 1.2s var(--ease)}
.meter b{font-family:var(--font-display);font-size:24px;color:var(--pink);min-width:60px;text-align:right}
.rec{margin-top:8px;padding:24px;border-radius:var(--r-md);background:linear-gradient(135deg,rgba(255,106,61,.1),rgba(255,45,135,.1) 50%,rgba(199,36,177,.1));box-shadow:inset 0 0 0 1.5px rgba(255,45,135,.45);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center}
.rec small{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.rec .nm{font-family:var(--font-display);font-size:26px;font-weight:700;margin-top:4px}
.rec .pr{font-size:15px;color:var(--ink-2)}
.rec ul{grid-column:1/-1;list-style:none;display:grid;gap:8px;font-size:14.5px;color:var(--ink-2)}
.rec ul li::before{content:"✦ ";color:var(--pink)}
.quiz-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
/* testimonials */
.testi{background:var(--bg-2)}
.testi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.testi-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
.testi-card:hover{transform:translateY(-6px);border-color:rgba(255,45,135,.4);box-shadow:0 30px 70px -30px rgba(255,45,135,.35)}
.testi-img{position:relative;aspect-ratio:4/5;overflow:hidden;cursor:zoom-in;background:#0a0c10}
.testi-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.testi-card:hover .testi-img img{transform:scale(1.04)}
.testi-img .zoom{position:absolute;right:12px;bottom:12px;padding:7px 12px;border-radius:999px;background:rgba(12,16,20,.75);backdrop-filter:blur(8px);font-size:12px;border:1px solid var(--border-strong)}
.testi-body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:14px;flex:1}
.testi-stars{color:var(--pink);letter-spacing:3px;font-size:15px}
.testi-body blockquote{font-family:var(--font-display);font-size:18px;line-height:1.35;font-weight:600;text-wrap:pretty;flex:1}
.testi-body .who{font-size:14px;color:var(--ink-2)}
.testi-body .who b{color:var(--ink)}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(6,8,10,.9);backdrop-filter:blur(10px);display:grid;place-items:center;padding:30px;opacity:0;pointer-events:none;transition:opacity .3s}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img{max-height:90vh;max-width:min(92vw,560px);width:auto;border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.lightbox button{position:absolute;top:20px;right:22px;width:44px;height:44px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border-strong);color:#fff;font-size:20px}
@media (max-width:980px){.testi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.founder-grid{grid-template-columns:1fr}.founder-photo{max-width:420px;width:100%;margin:0 auto}}
@media (max-width:760px){.stats-grid,.testi-grid{grid-template-columns:1fr}.rec{grid-template-columns:1fr}.tool{width:calc(50% - 8px)}}

/* hero photo */
.hero-visual{position:relative}
.hero-photo{position:relative;z-index:2;aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border-strong);box-shadow:0 50px 120px -30px rgba(0,0,0,.8),0 0 90px -20px rgba(255,45,135,.4);transform:rotateX(8deg);transform-origin:center top;transition:transform 1s var(--ease)}
.hero-visual.in .hero-photo{transform:none}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:60% 60%}
/* motion logo */
.fluff-wrap{position:absolute;z-index:4;pointer-events:none;will-change:transform}
.fluff{width:100%;height:auto;display:block;filter:drop-shadow(0 24px 40px rgba(255,45,135,.4));animation:fluff 7s ease-in-out infinite;transform:rotate(var(--r,0deg))}
@keyframes fluff{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-20px) rotate(calc(var(--r,0deg) + 7deg))}}
.sm-card,.quiz-wrap{position:relative}
.quiz-wrap{max-width:760px;margin:0 auto;z-index:2}
.fluff-final .fluff{filter:drop-shadow(0 24px 40px rgba(80,0,60,.45))}
@media (max-width:760px){.fluff-wrap{width:84px!important}.fluff-final{display:none}.hero-photo{aspect-ratio:4/5}}
@media (prefers-reduced-motion:reduce){.fluff{animation:none}}

/* testimonials carousel */
.testi-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:44px}
.testi-head .eyebrow{display:block;margin-bottom:16px}
.testi-nav{display:flex;gap:10px}
.testi-nav button,.lb-prev,.lb-next{width:48px;height:48px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border-strong);color:#fff;font-size:18px;transition:background .3s,border-color .3s,transform .3s var(--ease)}
.testi-nav button:hover,.lb-prev:hover,.lb-next:hover{background:var(--grad);border-color:transparent;transform:scale(1.06)}
.testi-track{display:grid;grid-auto-flow:column;grid-auto-columns:min(340px,82vw);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 26px;scrollbar-width:thin;scrollbar-color:rgba(255,45,135,.5) transparent}
.testi-track .testi-card{scroll-snap-align:start}
.lightbox{grid-template-columns:auto minmax(0,auto) auto;gap:18px}
.lightbox .lb-close{position:absolute;top:20px;right:22px}
.lb-prev,.lb-next{position:relative!important;top:auto!important;right:auto!important}
@media (max-width:760px){.testi-head{flex-direction:column;align-items:flex-start}.lb-prev,.lb-next{display:none}}

.hero{padding-bottom:clamp(90px,11vw,150px)}

/* hero chips */
.hero-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:34px auto 0;max-width:640px}
.chip{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:999px;background:rgba(26,26,40,.78);border:1px solid var(--border-strong);backdrop-filter:blur(10px);font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--ink);white-space:nowrap;transition:border-color .3s,box-shadow .3s,background .3s;animation:chipFloat 6s ease-in-out infinite}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--grad);box-shadow:0 0 10px var(--pink);flex:none}
.chip:hover{color:#fff;border-color:rgba(255,45,135,.7);background:rgba(255,45,135,.14);box-shadow:0 0 28px rgba(255,45,135,.35)}
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (min-width:1240px){
.hero-inner{position:relative}
.hero-chips{display:block;margin:0;max-width:none;position:absolute;inset:0;pointer-events:none}
.chip-pos{position:absolute;top:var(--top);pointer-events:auto}
.chip-pos[data-side="l"]{left:calc(var(--off) - 10px)}
.chip-pos[data-side="r"]{right:calc(var(--off) - 10px)}
}
@media (prefers-reduced-motion:reduce){.chip{animation:none}}
/* video */
.video-slot{background:#000}
.video-slot video{object-fit:contain;background:#000}
.video-cover{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:radial-gradient(ellipse at 50% 50%,rgba(12,16,20,.25),rgba(12,16,20,.7));color:#fff;transition:opacity .4s,background .4s}
.video-cover strong{font-family:var(--font-display);font-size:20px}
.video-cover:hover{background:radial-gradient(ellipse at 50% 50%,rgba(255,45,135,.15),rgba(12,16,20,.6))}
.video-cover:hover .play{transform:scale(1.08)}
.video-cover .play{animation:ring 2.6s infinite;transition:transform .35s var(--ease)}
.video-cover.hide{opacity:0;pointer-events:none}
/* showcase */
.showcase{overflow:hidden}
.showcase .glow-purple{width:600px;height:600px;top:20%;right:-15%;opacity:.14}
.show-row{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(32px,5vw,70px);align-items:center;position:relative;z-index:2}
.show-row+.show-row{margin-top:clamp(70px,9vw,120px)}
.show-row.flip .show-media{order:2}
.show-num{display:block;font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--pink);margin-bottom:10px;text-shadow:0 0 18px rgba(255,45,135,.5)}
.show-copy .eyebrow{display:block;margin-bottom:14px}
.show-copy h3{font-size:clamp(26px,3vw,38px);margin-bottom:16px;text-wrap:pretty}
.show-copy p{color:var(--ink-2);font-size:17px}
.show-list{list-style:none;margin-top:22px;display:grid;gap:11px}
.show-list li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px}
.show-list svg{width:18px;height:18px;flex:none;margin-top:3px;stroke:var(--pink);stroke-width:2.4;fill:none}
.shot{position:relative;margin:0;border-radius:16px;overflow:hidden;background:#0b0d12;border:1px solid var(--border-strong);box-shadow:0 40px 90px -30px rgba(0,0,0,.85),0 0 70px -25px rgba(255,45,135,.45);cursor:zoom-in;transition:transform .5s var(--ease),box-shadow .5s}
.shot:hover{transform:translateY(-6px);box-shadow:0 50px 100px -30px rgba(0,0,0,.85),0 0 90px -20px rgba(255,45,135,.6)}
.shot-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:#12141b;border-bottom:1px solid var(--border)}
.shot-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14)}
.shot-bar i:first-child{background:#FF6A3D}.shot-bar i:nth-child(2){background:#FF2D87}.shot-bar i:nth-child(3){background:#C724B1}
.shot-bar span{margin-left:12px;font-size:11.5px;color:var(--ink-3);padding:3px 12px;border-radius:999px;background:rgba(255,255,255,.04)}
.shot img{width:100%;height:auto;display:block}
.shot-zoom{position:absolute;right:12px;bottom:12px;padding:6px 12px;border-radius:999px;background:rgba(12,16,20,.8);backdrop-filter:blur(8px);font-size:12px;border:1px solid var(--border-strong);opacity:0;transition:opacity .3s}
.shot:hover .shot-zoom{opacity:1}
.fin-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--surface);border:1px solid var(--border-strong);margin-bottom:16px}
.fin-tabs button{padding:9px 18px;border-radius:999px;font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--ink-2);transition:background .3s,color .3s}
.fin-tabs button.on{background:var(--grad);color:#fff;box-shadow:0 6px 20px rgba(255,45,135,.35)}
.fin-stack{display:grid}
.fin-stack .shot{grid-area:1/1;opacity:0;pointer-events:none;transition:opacity .6s var(--ease),transform .5s var(--ease),box-shadow .5s}
.fin-stack .shot.on{opacity:1;pointer-events:auto}
/* spotlight */
.spotlight{background:var(--bg-2);overflow:hidden}
.spotlight .glow-pink{width:520px;height:520px;top:10%;left:-10%;opacity:.18}
.spot-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(40px,6vw,90px);align-items:center;position:relative;z-index:2}
.spot-phone{position:relative;max-width:340px;width:100%;margin:0 auto;border-radius:34px;padding:10px;background:#07080b;border:1px solid var(--border-strong);box-shadow:0 40px 100px -30px rgba(0,0,0,.8),0 0 0 1.5px rgba(255,45,135,.35),0 0 80px -20px rgba(255,45,135,.5);transform:rotate(-3deg);transition:transform .6s var(--ease)}
.spot-phone:hover{transform:rotate(0)}
.spot-phone>img{width:100%;border-radius:26px;cursor:zoom-in}
.spot-copy .eyebrow{color:var(--pink);display:block;margin-bottom:20px}
.spot-quote{font-family:var(--font-display);font-weight:700;font-size:clamp(36px,5vw,64px);line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
.spot-rest{margin-top:24px;font-size:clamp(17px,1.6vw,20px);color:var(--ink-2);max-width:52ch}
.spot-who{display:flex;align-items:center;gap:16px;margin:28px 0 32px;padding-top:24px;border-top:1px solid var(--border)}
.spot-who b{display:block;font-family:var(--font-display);font-size:18px}
.spot-who div span{font-size:14px;color:var(--ink-3)}
.lightbox.single .lb-prev,.lightbox.single .lb-next{visibility:hidden}
.lightbox img{max-width:min(92vw,1200px)}
@media (max-width:900px){.show-row,.spot-grid{grid-template-columns:1fr}.show-row.flip .show-media{order:0}.spot-phone{max-width:280px}}