@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/* CSS Reset & Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

:root {
  --background: hsl(228, 50%, 6%);
  --foreground: hsl(0, 0%, 100%);
  --card: hsl(228, 40%, 9%);
  --card-foreground: hsl(0, 0%, 100%);
  --primary: hsl(217, 91%, 60%);
  --primary-foreground: hsl(0, 0%, 100%);
  --secondary: hsl(210, 100%, 52%);
  --secondary-foreground: hsl(0, 0%, 100%);
  --muted: hsl(228, 30%, 15%);
  --muted-foreground: hsl(215, 20%, 65%);
  --accent: hsl(210, 100%, 52%);
  --accent-foreground: hsl(0, 0%, 100%);
  --destructive: hsl(0, 62%, 40%);
  --destructive-foreground: hsl(0, 0%, 100%);
  --border: hsl(228, 30%, 15%);
  --ring: hsl(217, 91%, 60%);

  --font-sans: 'DM Sans', sans-serif;
  --font-display: 'Bricolage Grotesque', sans-serif;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}

body::selection { background: hsla(217, 91%, 60%, 0.3); color: #fff; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
}

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

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--background); }
::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: hsla(217, 91%, 60%, 0.5); }

/* Utilities */
.text-gradient {
  background: linear-gradient(to right, #93c5fd, #60a5fa, #38bdf8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-muted { color: var(--muted-foreground); }
.text-white { color: #fff; }
.text-blue-400 { color: #60a5fa; }
.text-blue-300 { color: #93c5fd; }

.bg-card { background-color: var(--card); }
.border-card { border-color: var(--border); }

/* Layout */
.container {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }

/* ===================== NAVBAR ===================== */
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition: all 0.3s ease;
  border-bottom: 1px solid transparent;
  padding: 1.25rem 0;
}
#navbar.scrolled {
  background: hsla(228, 50%, 6%, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: rgba(255,255,255,0.1);
  padding: 0.75rem 0;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-links {
  display: none;
  align-items: center;
  gap: 2rem;
}
@media (min-width: 768px) { .nav-links { display: flex; } }
.nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  transition: color 0.2s;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
}
.nav-link:hover { color: #fff; }
.nav-actions { display: none; align-items: center; gap: 1rem; }
@media (min-width: 768px) { .nav-actions { display: flex; } }
.btn-login {
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  transition: color 0.2s;
}
.btn-login:hover { color: #60a5fa; }
.btn-signup {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background: rgba(255,255,255,0.1);
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.2);
  transition: all 0.3s;
}
.btn-signup:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.3); }
.btn-signup svg { transition: transform 0.2s; }
.btn-signup:hover svg { transform: translate(2px, -2px); }
.hamburger {
  display: flex;
  padding: 0.5rem;
  color: var(--muted-foreground);
  background: none;
  border: none;
  cursor: pointer;
}
.hamburger:hover { color: #fff; }
@media (min-width: 768px) { .hamburger { display: none; } }

.mobile-nav {
  display: none;
  flex-direction: column;
  border-top: 1px solid rgba(255,255,255,0.1);
  background: hsla(228, 50%, 6%, 0.95);
  backdrop-filter: blur(20px);
  padding: 1.5rem 1rem;
  gap: 1rem;
}
.mobile-nav.open { display: flex; }
.mobile-nav-link {
  text-align: left;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--muted-foreground);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: color 0.2s;
  padding: 0;
}
.mobile-nav-link:hover { color: #fff; }
.mobile-divider { height: 1px; background: rgba(255,255,255,0.1); margin: 0.5rem 0; }
.mobile-btn-login {
  text-align: center;
  padding: 0.75rem;
  font-weight: 500;
  color: #fff;
  background: rgba(255,255,255,0.05);
  border-radius: 0.75rem;
  border: 1px solid rgba(255,255,255,0.1);
}
.mobile-btn-login:hover { background: rgba(255,255,255,0.1); }
.mobile-btn-signup {
  display: block;
  text-align: center;
  padding: 0.75rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(to right, #3b82f6, #1d4ed8);
  border-radius: 0.75rem;
}
.mobile-btn-signup:hover { opacity: 0.9; }

/* ===================== LOGO ===================== */
.logo-wrap { display: flex; align-items: center; gap: 0.625rem; }
.logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff;
  font-size: 1.25rem;
}
.logo-text span { color: #60a5fa; }

/* ===================== HERO ===================== */
.hero {
  position: relative;
  padding: 8rem 0 5rem;
  overflow: hidden;
}
@media (min-width: 768px) { .hero { padding: 10rem 0 7rem; } }

.hero-blob-1 {
  position: absolute;
  top: 25%;
  left: 0;
  width: 600px;
  height: 500px;
  background: rgba(37, 99, 235, 0.2);
  filter: blur(120px);
  border-radius: 9999px;
  pointer-events: none;
}
.hero-blob-2 {
  position: absolute;
  top: 33%;
  right: 0;
  width: 400px;
  height: 400px;
  background: rgba(59, 130, 246, 0.15);
  filter: blur(100px);
  border-radius: 9999px;
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}
@media (min-width: 1024px) {
  .hero-inner { flex-direction: row; align-items: center; gap: 4rem; }
}
.hero-content { flex: 1; text-align: left; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 0.875rem;
  font-weight: 500;
  color: #93c5fd;
  margin-bottom: 2rem;
  backdrop-filter: blur(4px);
}
.badge-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: #3b82f6;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.hero h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 1.5rem;
}
.hero-desc {
  font-size: 1.125rem;
  color: var(--muted-foreground);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  max-width: 36rem;
}
.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  font-size: 0.875rem;
  color: #93c5fd;
  font-weight: 500;
}
.pill svg { width: 0.875rem; height: 0.875rem; fill: currentColor; }
.hero-actions { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) { .hero-actions { flex-direction: row; align-items: center; } }
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: 9999px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(to right, #3b82f6, #1d4ed8);
  box-shadow: 0 20px 40px -10px rgba(59, 130, 246, 0.25);
  transition: all 0.3s;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
}
.btn-primary:hover {
  background: linear-gradient(to right, #60a5fa, #2563eb);
  box-shadow: 0 20px 40px -10px rgba(59, 130, 246, 0.4);
  transform: translateY(-2px);
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: 9999px;
  font-weight: 600;
  color: #fff;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  transition: all 0.3s;
  font-size: 1rem;
  cursor: pointer;
  font-family: var(--font-sans);
}
.btn-secondary:hover { background: rgba(255,255,255,0.1); }
.hero-visual { flex: 1; width: 100%; }
.hero-img-wrap {
  position: relative;
  border-radius: 1.5rem;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(5,8,20,0.5);
  backdrop-filter: blur(4px);
  padding: 0.5rem;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.5);
  overflow: hidden;
}
.hero-img-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(59,130,246,0.1), transparent);
  opacity: 0.5;
}
.hero-img-wrap img {
  width: 100%;
  border-radius: 1.25rem;
  border: 1px solid rgba(255,255,255,0.05);
  position: relative;
  z-index: 1;
}

/* ===================== ABOUT ===================== */
.about {
  padding: 6rem 0;
  background: rgba(228,40%,9%, 0.3);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  position: relative;
  overflow: hidden;
}
.about-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
}
@media (min-width: 1024px) { .about-inner { grid-template-columns: 1fr 1fr; } }
.about-video {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 40px 80px rgba(0,0,0,0.4);
  cursor: pointer;
}
.about-video:hover .about-glow { opacity: 1; }
.about-glow {
  position: absolute;
  inset: -1rem;
  background: linear-gradient(to right, rgba(37,99,235,0.3), rgba(96,165,250,0.3));
  filter: blur(2rem);
  border-radius: 1.5rem;
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}
.about-video img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: transform 0.7s;
  display: block;
}
.about-video:hover img { transform: scale(1.05); }
.about-play-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}
.about-video:hover .about-play-overlay { background: rgba(0,0,0,0.2); }
.about-play-btn {
  width: 5rem;
  height: 5rem;
  border-radius: 9999px;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s;
}
.about-video:hover .about-play-btn { transform: scale(1.1); }
.about-play-btn svg { color: #fff; margin-left: 4px; }
.about-text h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 1.5rem;
}
.about-text p {
  font-size: 1.125rem;
  color: var(--muted-foreground);
  line-height: 1.75;
  margin-bottom: 2rem;
}
.about-social {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.about-avatars { display: flex; }
.about-avatars .avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  border: 2px solid var(--background);
  overflow: hidden;
  margin-left: -1rem;
}
.about-avatars .avatar:first-child { margin-left: 0; }
.about-avatars .avatar img { width: 100%; height: 100%; object-fit: cover; }
.about-count-text { font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); }
.about-count-text strong { display: block; font-size: 1.125rem; font-weight: 700; color: #fff; }

/* ===================== FEATURES ===================== */
.features { padding: 6rem 0; position: relative; }
.section-header { text-align: center; max-width: 48rem; margin: 0 auto 4rem; }
.section-header h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.5rem;
}
.section-header p { font-size: 1.25rem; color: var(--muted-foreground); }
.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) { .features-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .features-grid { grid-template-columns: repeat(4, 1fr); } }
.feature-card {
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 1rem;
  padding: 2rem;
  transition: all 0.3s;
}
.feature-card:hover {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.1);
}
.feature-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}
.feature-card:hover .feature-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.2);
}
.feature-icon svg { color: #fff; position: relative; z-index: 1; }
.feature-card h3 { font-size: 1.25rem; font-weight: 600; color: #fff; margin-bottom: 0.75rem; }
.feature-card p { color: var(--muted-foreground); line-height: 1.65; }

/* ===================== HOW IT WORKS ===================== */
.how-it-works {
  padding: 6rem 0;
  background: #080B14;
  position: relative;
}
.how-it-works .section-left h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.5rem;
}
.how-it-works .section-left p {
  font-size: 1.25rem;
  color: var(--muted-foreground);
  max-width: 32rem;
}
.hiw-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem 2rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .hiw-grid { grid-template-columns: 5fr 7fr; }
}
.hiw-steps { display: flex; flex-direction: column; gap: 0.5rem; }
.hiw-step {
  text-align: left;
  padding: 1.25rem;
  border-radius: 1rem;
  transition: all 0.3s;
  border: 1px solid transparent;
  cursor: pointer;
  background: none;
  width: 100%;
  font-family: var(--font-sans);
}
.hiw-step.active {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.2);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.hiw-step:not(.active):hover { background: rgba(255,255,255,0.02); }
.hiw-step-inner { display: flex; gap: 1rem; align-items: flex-start; }
.hiw-num {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  flex-shrink: 0;
  background: rgba(255,255,255,0.1);
  color: var(--muted-foreground);
  transition: all 0.3s;
}
.hiw-step.active .hiw-num { background: #2563eb; color: #fff; }
.hiw-step-text h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--muted-foreground);
  margin-bottom: 0;
  transition: color 0.3s;
  font-family: var(--font-display);
}
.hiw-step.active .hiw-step-text h3 { color: #fff; }
.hiw-step-desc {
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 1.6;
  margin-top: 0.25rem;
  display: none;
}
.hiw-step.active .hiw-step-desc { display: block; }

.hiw-visual-wrap { position: sticky; top: 8rem; }
.hiw-browser {
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,0.1);
  background: var(--card);
  padding: 0.5rem;
  box-shadow: 0 40px 80px rgba(0,0,0,0.4);
  overflow: hidden;
  position: relative;
}
.hiw-browser-bar {
  height: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: var(--background);
  display: flex;
  align-items: center;
  padding: 0 1rem;
  gap: 0.5rem;
}
.dot { width: 0.75rem; height: 0.75rem; border-radius: 9999px; }
.dot-red { background: rgba(239,68,68,0.5); }
.dot-yellow { background: rgba(234,179,8,0.5); }
.dot-green { background: rgba(34,197,94,0.5); }
.hiw-browser-content {
  margin-top: 0.625rem;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #0A0D16;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hiw-browser-content img { width: 100%; height: 100%; object-fit: cover; border-radius: 0.5rem; border: 1px solid rgba(255,255,255,0.05); }
.hiw-placeholder {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.05);
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  display: none;
}
.hiw-placeholder.visible { display: flex; }
.hiw-step-num-big {
  width: 5rem;
  height: 5rem;
  border-radius: 9999px;
  background: linear-gradient(to top right, rgba(37,99,235,0.2), rgba(96,165,250,0.2));
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.hiw-step-num-big span {
  font-size: 1.875rem;
  font-weight: 700;
  color: #fff;
  font-family: var(--font-display);
}
.hiw-placeholder h4 { font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: 0.5rem; }
.hiw-placeholder p { color: var(--muted-foreground); }

/* ===================== INTEGRATIONS ===================== */
.integrations {
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.integrations-blob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 300px;
  background: rgba(37,99,235,0.1);
  filter: blur(120px);
  border-radius: 9999px;
  pointer-events: none;
}
.integrations h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.5rem;
}
.integrations > .container > p { font-size: 1.25rem; color: var(--muted-foreground); margin-bottom: 4rem; max-width: 32rem; margin-left: auto; margin-right: auto; }
.integrations-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  position: relative;
  z-index: 10;
}
@media (min-width: 768px) { .integrations-cards { flex-direction: row; justify-content: center; gap: 4rem; } }
.integration-card {
  width: 100%;
  max-width: 16rem;
  aspect-ratio: 1;
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  transition: border-color 0.3s;
}
.integration-card:hover { border-color: rgba(59, 130, 246, 0.5); }
.integration-icon {
  width: 5rem;
  height: 5rem;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.integration-icon svg { width: 2.5rem; height: 2.5rem; color: #60a5fa; }
.integration-card h3 { font-size: 1.25rem; font-weight: 700; color: #fff; }
.integration-card p { font-size: 0.875rem; color: var(--muted-foreground); margin-top: 0.5rem; }

/* ===================== TARGET AUDIENCE ===================== */
.target-audience {
  padding: 6rem 0;
  background: #080B14;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.target-audience h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.5rem;
}
.target-audience .section-header p { font-size: 1.25rem; color: var(--muted-foreground); }
.audience-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) { .audience-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .audience-grid { grid-template-columns: repeat(3, 1fr); } }
.audience-card {
  background: rgba(228,40%,9%,0.5);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.05);
  padding: 2rem;
  border-radius: 1.5rem;
  transition: all 0.3s;
}
.audience-card:hover {
  transform: translateY(-4px);
  border-color: rgba(59, 130, 246, 0.3);
}
.audience-card-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: background 0.3s;
}
.audience-card:hover .audience-card-icon { background: rgba(59, 130, 246, 0.2); }
.audience-card-icon svg { color: #60a5fa; }
.audience-card h3 { font-size: 1.25rem; font-weight: 700; color: #fff; margin-bottom: 0.75rem; }
.audience-card p { color: var(--muted-foreground); line-height: 1.65; }

/* ===================== PRICING ===================== */
.pricing { padding: 6rem 0; position: relative; }
.pricing h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.5rem;
}
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 72rem;
  margin: 0 auto;
  align-items: center;
}
@media (min-width: 768px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }
.pricing-card {
  border-radius: 1.5rem;
  padding: 2rem;
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.1);
  position: relative;
}
.pricing-card.popular {
  background: linear-gradient(to bottom, rgba(30,58,138,0.4), var(--card));
  border: 2px solid rgba(59, 130, 246, 0.5);
  box-shadow: 0 40px 80px rgba(59, 130, 246, 0.1);
}
@media (min-width: 768px) { .pricing-card.popular { transform: scale(1.05); z-index: 10; } }
.popular-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(to right, #60a5fa, #2563eb);
  color: #fff;
  padding: 0.25rem 1rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pricing-card h3 { font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: 0.5rem; }
.pricing-card .plan-desc { color: var(--muted-foreground); font-size: 0.875rem; margin-bottom: 1.5rem; min-height: 2.5rem; }
.plan-price { margin-bottom: 2rem; }
.plan-price .amount { font-size: 2.25rem; font-weight: 700; color: #fff; }
.plan-price .period { color: var(--muted-foreground); }
.plan-features { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.plan-feature { display: flex; align-items: flex-start; gap: 0.75rem; }
.plan-feature svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--muted-foreground); }
.pricing-card.popular .plan-feature svg { color: #60a5fa; }
.plan-feature span { color: var(--muted-foreground); font-size: 0.875rem; }
.btn-plan {
  display: block;
  text-align: center;
  width: 100%;
  padding: 1rem;
  border-radius: 0.75rem;
  font-weight: 600;
  transition: all 0.3s;
  font-family: var(--font-sans);
  border: none;
  cursor: pointer;
  font-size: 1rem;
}
.btn-plan-default {
  background: rgba(255,255,255,0.05);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.1);
}
.btn-plan-default:hover { background: rgba(255,255,255,0.1); }
.btn-plan-popular {
  background: linear-gradient(to right, #3b82f6, #1d4ed8);
  color: #fff;
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.25);
}
.btn-plan-popular:hover { box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4); opacity: 0.95; }

/* ===================== CTA SECTION ===================== */
.cta-section {
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cta-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, rgba(30,58,138,0.2), var(--background), rgba(30,64,175,0.2));
}
.cta-blob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 48rem;
  height: 400px;
  background: rgba(37, 99, 235, 0.2);
  filter: blur(150px);
  border-radius: 9999px;
  pointer-events: none;
}
.cta-inner { max-width: 48rem; margin: 0 auto; padding: 0 1rem; position: relative; z-index: 10; }
.cta-inner h2 {
  font-size: clamp(1.875rem, 4vw, 3rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.5rem;
}
.cta-inner > p { font-size: 1.25rem; color: var(--muted-foreground); margin-bottom: 2.5rem; max-width: 32rem; margin-left: auto; margin-right: auto; }
.cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 4rem;
}
@media (min-width: 640px) { .cta-actions { flex-direction: row; } }
.cta-actions a, .cta-actions button {
  width: 100%;
}
@media (min-width: 640px) { .cta-actions a, .cta-actions button { width: auto; } }
.newsletter-wrap {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 2.5rem;
  max-width: 28rem;
  margin: 0 auto;
}
.newsletter-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}
.newsletter-form { display: flex; gap: 0.5rem; }
.newsletter-input {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  color: #fff;
  font-size: 1rem;
  font-family: var(--font-sans);
  outline: none;
  transition: box-shadow 0.2s;
}
.newsletter-input::placeholder { color: rgba(148,163,184,0.5); }
.newsletter-input:focus { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); }
.newsletter-btn {
  background: #fff;
  color: var(--background);
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 1rem;
  transition: background 0.2s;
}
.newsletter-btn:hover { background: #e5e7eb; }
.newsletter-btn:disabled { opacity: 0.7; cursor: not-allowed; }
.toast-wrap {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.toast {
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  min-width: 280px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  animation: toast-in 0.3s ease;
}
.toast.error { border-color: rgba(239,68,68,0.3); }
.toast-title { font-weight: 700; color: #fff; margin-bottom: 0.25rem; }
.toast-desc { font-size: 0.875rem; color: var(--muted-foreground); }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}

/* ===================== FOOTER ===================== */
footer {
  background: #030509;
  padding: 5rem 0 2.5rem;
  border-top: 1px solid rgba(255,255,255,0.05);
  position: relative;
  overflow: hidden;
}
.footer-glow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 75%;
  height: 8rem;
  background: rgba(37, 99, 235, 0.1);
  filter: blur(100px);
  border-radius: 9999px;
  pointer-events: none;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  position: relative;
  z-index: 10;
}
@media (min-width: 768px) { .footer-inner { flex-direction: row; justify-content: space-between; } }
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
@media (min-width: 640px) { .footer-brand { flex-direction: row; } }
.footer-brand p { color: var(--muted-foreground); font-weight: 500; font-size: 0.875rem; }
.footer-links { display: flex; align-items: center; gap: 1.5rem; font-size: 0.875rem; color: var(--muted-foreground); font-weight: 500; }
.footer-links a { transition: color 0.2s; }
.footer-links a:hover { color: #fff; }

/* ===================== AUTH PAGE ===================== */
.auth-page {
  min-height: 100vh;
  background: var(--background);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.auth-blob-1 {
  position: absolute;
  top: 0; left: 0;
  width: 500px; height: 500px;
  background: rgba(37,99,235,0.2);
  filter: blur(150px);
  border-radius: 9999px;
  pointer-events: none;
}
.auth-blob-2 {
  position: absolute;
  bottom: 0; right: 0;
  width: 500px; height: 500px;
  background: rgba(59,130,246,0.2);
  filter: blur(150px);
  border-radius: 9999px;
  pointer-events: none;
}
.auth-back {
  padding: 1.5rem;
  position: relative;
  z-index: 10;
}
.auth-back a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  transition: color 0.2s;
}
.auth-back a:hover { color: #fff; }
.auth-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  position: relative;
  z-index: 10;
}
.auth-card {
  width: 100%;
  max-width: 28rem;
  background: rgba(228,40%,9%,0.5);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow: 0 40px 80px rgba(0,0,0,0.4);
}
.auth-logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}
.auth-logo {
  width: 3rem; height: 3rem;
  border-radius: 0.75rem;
  background: linear-gradient(to top right, #3b82f6, #1d4ed8);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px rgba(59,130,246,0.3);
}
.auth-logo svg { color: #fff; }
.auth-card h1 { font-size: 1.5rem; font-weight: 700; color: #fff; text-align: center; margin-bottom: 0.5rem; }
.auth-subtitle { text-align: center; color: var(--muted-foreground); font-size: 0.875rem; margin-bottom: 2rem; }
.auth-form { display: flex; flex-direction: column; gap: 1rem; }
.form-group label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); margin-bottom: 0.375rem; }
.form-input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  color: #fff;
  font-size: 1rem;
  font-family: var(--font-sans);
  outline: none;
  transition: box-shadow 0.2s;
  display: block;
}
.form-input::placeholder { color: rgba(148,163,184,0.5); }
.form-input:focus { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); }
.auth-submit {
  width: 100%;
  background: linear-gradient(to right, #3b82f6, #1d4ed8);
  color: #fff;
  font-weight: 700;
  padding: 0.75rem;
  border-radius: 0.75rem;
  margin-top: 1rem;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 1rem;
  transition: box-shadow 0.3s, transform 0.1s;
}
.auth-submit:hover { box-shadow: 0 10px 30px rgba(59,130,246,0.25); }
.auth-submit:active { transform: scale(0.98); }
.auth-toggle {
  margin-top: 2rem;
  text-align: center;
}
.auth-toggle button {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: color 0.2s;
}
.auth-toggle button:hover { color: #fff; }
.auth-tabs { display: flex; margin-bottom: 1.5rem; gap: 0; border-radius: 0.75rem; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
.auth-tab {
  flex: 1;
  padding: 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: all 0.2s;
  background: transparent;
  color: var(--muted-foreground);
}
.auth-tab.active { background: rgba(255,255,255,0.1); color: #fff; }

/* ===================== LEGAL PAGES ===================== */
.legal-page { min-height: 100vh; background: var(--background); color: var(--foreground); }
.legal-main { max-width: 56rem; margin: 0 auto; padding: 9rem 1rem 6rem; }
@media (min-width: 640px) { .legal-main { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .legal-main { padding-left: 2rem; padding-right: 2rem; } }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  transition: color 0.2s;
  margin-bottom: 2.5rem;
}
.back-link:hover { color: #fff; }
.legal-main h1 { font-size: clamp(1.875rem, 4vw, 2.25rem); font-weight: 700; color: #fff; margin-bottom: 0.5rem; }
.legal-date { color: var(--muted-foreground); font-size: 0.875rem; margin-bottom: 2.5rem; }
.prose { color: var(--muted-foreground); line-height: 1.75; }
.prose p { margin-bottom: 1rem; }
.prose strong { color: #fff; }
.prose h2 { font-size: 1.25rem; font-weight: 600; color: #fff; margin-bottom: 0.75rem; margin-top: 2rem; }
.prose ul { padding-left: 1.25rem; list-style: disc; display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.prose ul li a { color: #60a5fa; }
.prose ul li a:hover { text-decoration: underline; }
.prose a { color: #60a5fa; }
.prose a:hover { text-decoration: underline; }
.address-box {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 0.75rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 0.875rem;
}
.address-box p.name { font-weight: 600; color: #fff; margin-bottom: 0.25rem; }
.address-box a { color: #60a5fa; }
.address-box a:hover { text-decoration: underline; }
.refund-box {
  padding: 1rem;
  border-radius: 0.75rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
}

/* ===================== 404 PAGE ===================== */
.not-found {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background);
}
.not-found-card {
  background: #fff;
  border-radius: 0.5rem;
  padding: 1.5rem;
  max-width: 28rem;
  width: 100%;
  margin: 0 1rem;
}
.not-found-card .header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.not-found-card svg { color: #ef4444; width: 2rem; height: 2rem; }
.not-found-card h1 { font-size: 1.5rem; font-weight: 700; color: #111827; }
.not-found-card p { font-size: 0.875rem; color: #4b5563; margin-top: 1rem; }

/* Animation helpers */
@media (prefers-reduced-motion: no-preference) {
  .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .fade-in.visible { opacity: 1; transform: translateY(0); }
  .fade-in-left { opacity: 0; transform: translateX(-30px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .fade-in-left.visible { opacity: 1; transform: translateX(0); }
  .fade-in-right { opacity: 0; transform: translateX(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .fade-in-right.visible { opacity: 1; transform: translateX(0); }
  .fade-in-scale { opacity: 0; transform: scale(0.95); transition: opacity 0.6s ease, transform 0.6s ease; }
  .fade-in-scale.visible { opacity: 1; transform: scale(1); }
  .delay-1 { transition-delay: 0.1s; }
  .delay-2 { transition-delay: 0.2s; }
  .delay-3 { transition-delay: 0.3s; }
}