* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: #fafaf9; color: #1a1a1a; line-height: 1.5; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }

/* Animated background orbs */
.bg-decor { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.35; animation: float 20s ease-in-out infinite; }
.orb-1 { width: 500px; height: 500px; background: radial-gradient(circle, #60a5fa, transparent 70%); top: -150px; left: -100px; animation-delay: 0s; }
.orb-2 { width: 450px; height: 450px; background: radial-gradient(circle, #c084fc, transparent 70%); top: 30%; right: -100px; animation-delay: -7s; }
.orb-3 { width: 400px; height: 400px; background: radial-gradient(circle, #34d399, transparent 70%); bottom: 10%; left: 20%; animation-delay: -14s; opacity: 0.25; }
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -30px) scale(1.05); }
  66% { transform: translate(-30px, 30px) scale(0.95); }
}

/* Floating brand icons in background */
.float-icon { position: absolute; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); opacity: 0.65; will-change: transform; }
.float-icon.fb { background: #1877f2; }
.float-icon.tt { background: linear-gradient(135deg, #000, #25f4ee, #fe2c55); }
.float-icon.gd { background: linear-gradient(135deg, #4285f4, #34a853, #fbbc05); }
.float-icon.ig { background: linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7); }
.float-icon.small { width: 32px; height: 32px; font-size: 15px; border-radius: 9px; opacity: 0.55; }
.float-icon.tiny { width: 26px; height: 26px; font-size: 12px; border-radius: 7px; opacity: 0.45; }

@keyframes drift1 { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-40px) rotate(5deg); } }
@keyframes drift2 { 0%, 100% { transform: translateY(-20px) rotate(8deg); } 50% { transform: translateY(20px) rotate(-3deg); } }
@keyframes drift3 { 0%, 100% { transform: translateY(15px) rotate(-3deg); } 50% { transform: translateY(-25px) rotate(7deg); } }
@keyframes drift4 { 0%, 100% { transform: translateY(-10px) rotate(4deg); } 50% { transform: translateY(30px) rotate(-6deg); } }

.fi-1 { top: 18%; left: 8%; animation: drift1 7s ease-in-out infinite; }
.fi-2 { top: 35%; right: 6%; animation: drift2 9s ease-in-out infinite; animation-delay: -2s; }
.fi-3 { top: 60%; left: 4%; animation: drift3 8s ease-in-out infinite; animation-delay: -4s; }
.fi-4 { top: 75%; right: 10%; animation: drift4 10s ease-in-out infinite; animation-delay: -1s; }
.fi-5 { top: 12%; right: 15%; animation: drift2 11s ease-in-out infinite; animation-delay: -5s; }
.fi-6 { top: 50%; right: 22%; animation: drift1 9s ease-in-out infinite; animation-delay: -3s; }
.fi-7 { top: 28%; left: 18%; animation: drift4 12s ease-in-out infinite; animation-delay: -6s; }
.fi-8 { top: 80%; left: 25%; animation: drift3 10s ease-in-out infinite; animation-delay: -2s; }
.fi-9 { top: 6%; left: 38%; animation: drift2 13s ease-in-out infinite; animation-delay: -7s; }
.fi-10 { top: 65%; right: 30%; animation: drift1 8s ease-in-out infinite; animation-delay: -4s; }

@media (max-width: 700px) {
  .float-icon.small, .float-icon.tiny { display: none; }
  .fi-7, .fi-8, .fi-9, .fi-10 { display: none; }
}

.js-ready .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.js-ready .reveal.in { opacity: 1; transform: translateY(0); }

.nav, .hero, .screenshot, .features, .integrations, .who, footer { position: relative; z-index: 1; }

.nav { padding: 20px 32px; display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; flex-wrap: wrap; gap: 12px; }
.logo { display: flex; flex-direction: column; line-height: 1.1; }
.logo-main { font-weight: 700; font-size: 18px; letter-spacing: -0.3px; display: flex; align-items: center; gap: 6px; }
.logo-main span { color: #2563eb; }
.logo-by { font-size: 10px; color: #888; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; margin-top: 3px; margin-left: 14px; }
.logo-by a { color: #555; }
.logo-by a:hover { color: #2563eb; }
.logo .dot { width: 8px; height: 8px; background: #22c55e; border-radius: 50%; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); opacity: 1; }
  50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); opacity: 0.7; }
}
.nav-links a { margin-left: 24px; font-size: 14px; color: #555; transition: color .15s; }
.nav-links a:hover { color: #1a1a1a; }

.hero { max-width: 1100px; margin: 60px auto 100px; padding: 0 32px; text-align: center; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: rgba(239, 246, 255, 0.8); backdrop-filter: blur(10px); color: #2563eb; border: 1px solid rgba(37, 99, 235, 0.15); border-radius: 999px; font-size: 12px; font-weight: 600; margin-bottom: 24px; letter-spacing: 0.3px; }
.badge .spark { display: inline-block; animation: sparkle 2.5s ease-in-out infinite; }
@keyframes sparkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.2) rotate(180deg); } }
.hero h1 { font-size: 56px; font-weight: 700; letter-spacing: -1.8px; line-height: 1.05; margin-bottom: 22px; max-width: 820px; margin-left: auto; margin-right: auto; }
.hero h1 span { background: linear-gradient(120deg, #2563eb, #0ea5e9, #2563eb); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear infinite; }
@keyframes shimmer { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }
.hero .sub { font-size: 19px; color: #555; max-width: 640px; margin: 0 auto 36px; }
.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn { padding: 14px 26px; border-radius: 10px; font-weight: 600; font-size: 15px; border: none; cursor: pointer; transition: all .2s ease; display: inline-block; position: relative; overflow: hidden; }
.btn-primary { background: #1a1a1a; color: white; }
.btn-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent, rgba(255,255,255,.2), transparent); transform: translateX(-100%); transition: transform .6s ease; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,.18); }
.btn-primary:hover::before { transform: translateX(100%); }
.btn-secondary { background: rgba(255,255,255,.7); backdrop-filter: blur(10px); color: #1a1a1a; border: 1px solid #e0e0e0; }
.btn-secondary:hover { border-color: #1a1a1a; transform: translateY(-2px); }

.live-strip { display: flex; justify-content: center; gap: 32px; margin-top: 36px; flex-wrap: wrap; font-size: 13px; color: #666; }
.live-stat { display: flex; align-items: center; gap: 6px; }
.live-stat .dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; animation: pulse 2s ease-in-out infinite; }
.live-stat .num { font-weight: 700; color: #1a1a1a; font-variant-numeric: tabular-nums; }

.screenshot { max-width: 1100px; margin: 0 auto 100px; padding: 0 32px; }
.screenshot-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.tab-btn { padding: 9px 18px; background: white; color: #555; border: 1px solid #e0e0e0; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; font-family: inherit; }
.tab-btn:hover { color: #1a1a1a; border-color: #c0c0c0; }
.tab-btn.active { background: #1a1a1a; color: white; border-color: #1a1a1a; }
.screenshot-frame { background: linear-gradient(135deg, #1a1a1a, #2d2d2d); padding: 16px 16px 0; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.18); overflow: hidden; }
.screenshot-frame .dots { display: flex; gap: 6px; padding: 4px 8px 12px; }
.screenshot-frame .dots span { width: 11px; height: 11px; border-radius: 50%; background: #444; }
.screenshot-frame .dots span:nth-child(1) { background: #ff5f56; }
.screenshot-frame .dots span:nth-child(2) { background: #ffbd2e; }
.screenshot-frame .dots span:nth-child(3) { background: #27c93f; }
.screen-img { width: 100%; display: none; border-radius: 8px 8px 0 0; vertical-align: bottom; }
.screen-img.active { display: block; animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.screen-caption { text-align: center; margin-top: 20px; min-height: 24px; }
.cap { display: none; color: #666; font-size: 14px; max-width: 640px; margin: 0 auto; line-height: 1.55; }
.cap.active { display: block; }

.features { background: rgba(255,255,255,0.7); backdrop-filter: blur(20px); padding: 100px 32px; }
.features-inner { max-width: 1100px; margin: 0 auto; }
.features h2 { font-size: 36px; font-weight: 700; letter-spacing: -1px; text-align: center; margin-bottom: 12px; }
.features .sub { text-align: center; color: #666; max-width: 620px; margin: 0 auto 56px; font-size: 17px; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.feature { padding: 28px; background: white; border-radius: 14px; border: 1px solid #ececec; transition: all .3s ease; position: relative; overflow: hidden; }
.feature::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #2563eb, #c084fc); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; }
.feature:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,.06); border-color: transparent; }
.feature:hover::before { transform: scaleX(1); }
.feature .icon { width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, #eff6ff, #faf5ff); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; font-size: 22px; transition: transform .3s ease; }
.feature:hover .icon { transform: scale(1.1) rotate(-3deg); }
.feature h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.feature p { color: #555; font-size: 14px; line-height: 1.6; }

.integrations { padding: 100px 32px; text-align: center; }
.integrations h2 { font-size: 36px; font-weight: 700; letter-spacing: -1px; margin-bottom: 12px; }
.integrations .sub { color: #666; max-width: 620px; margin: 0 auto 50px; font-size: 17px; }
.integration-row { display: flex; justify-content: center; gap: 60px; flex-wrap: wrap; max-width: 800px; margin: 0 auto; }
.integration { display: flex; flex-direction: column; align-items: center; gap: 10px; transition: transform .3s ease; cursor: default; }
.integration:hover { transform: translateY(-4px); }
.integration-logo { width: 64px; height: 64px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 700; color: white; box-shadow: 0 8px 24px rgba(0,0,0,.08); transition: all .3s ease; }
.integration:hover .integration-logo { box-shadow: 0 14px 36px rgba(0,0,0,.15); }
.integration-logo.fb { background: #1877f2; }
.integration-logo.tt { background: linear-gradient(135deg, #000, #25f4ee, #fe2c55); position: relative; }
.integration-logo.gd { background: linear-gradient(135deg, #4285f4, #34a853, #fbbc05); }
.integration .name { font-weight: 600; font-size: 14px; }
.integration .status { font-size: 11px; color: #888; display: inline-flex; align-items: center; gap: 5px; }
.integration .status .live-dot { width: 5px; height: 5px; border-radius: 50%; background: #22c55e; animation: pulse 2s ease-in-out infinite; }
.integration .status.review .live-dot { background: #f59e0b; }

.who { background: linear-gradient(135deg, #0f172a, #1e293b, #0f172a); background-size: 200% 200%; animation: gradientShift 12s ease infinite; color: white; padding: 100px 32px; text-align: center; position: relative; overflow: hidden; }
@keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.who::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 30% 50%, rgba(99,102,241,0.15), transparent 40%), radial-gradient(circle at 70% 50%, rgba(168,85,247,0.1), transparent 40%); pointer-events: none; }
.who > * { position: relative; }
.who h2 { font-size: 36px; font-weight: 700; letter-spacing: -1px; margin-bottom: 16px; }
.who p { font-size: 18px; color: #b0b0b0; max-width: 680px; margin: 0 auto 12px; }

footer { padding: 50px 32px; border-top: 1px solid #ececec; background: #fafaf9; }
footer .inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; font-size: 13px; color: #777; }
footer a { margin-left: 20px; }
footer a:hover { color: #1a1a1a; }

@media (max-width: 700px) {
  .hero h1 { font-size: 36px; }
  .hero .sub { font-size: 16px; }
  .features h2, .integrations h2, .who h2 { font-size: 28px; }
}