@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Outfit:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,400&display=swap');@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');


/* ── Google Fonts ── */
:root {
  --radius: 0.875rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);

  --background: oklch(0.995 0.003 330);
  --foreground: oklch(0.20 0.07 340);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.20 0.07 340);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.20 0.07 340);

  /* Orchid Purple Theme */
  --primary: oklch(0.58 0.19 310);
  --primary-foreground: oklch(0.99 0 0);
  --primary-glow: oklch(0.72 0.20 305);
  --secondary: oklch(0.96 0.02 325);
  --secondary-foreground: oklch(0.30 0.10 340);
  --muted: oklch(0.97 0.015 325);
  --muted-foreground: oklch(0.50 0.04 325);
  --accent: oklch(0.94 0.03 320);
  --accent-foreground: oklch(0.38 0.12 335);

  --border: oklch(0.92 0.015 325);
  --input: oklch(0.92 0.015 325);
  --ring: oklch(0.58 0.19 310);
  --success: oklch(0.62 0.15 160);

  --font-display: "Plus Jakarta Sans", "Inter", "Outfit", sans-serif;
  --font-sans: "Inter", "DM Sans", sans-serif;

  --gradient-hero: radial-gradient(60% 80% at 50% 0%, oklch(0.93 0.06 310 / 0.55), transparent 60%),
    radial-gradient(40% 60% at 100% 100%, oklch(0.90 0.07 325 / 0.45), transparent 60%),
    radial-gradient(50% 70% at 0% 50%, oklch(0.90 0.07 340 / 0.35), transparent 60%),
    linear-gradient(180deg, oklch(0.995 0.003 330), oklch(0.97 0.02 325));
  --gradient-primary: linear-gradient(135deg, oklch(0.48 0.18 340), oklch(0.62 0.20 310) 55%, oklch(0.72 0.20 305));
  --gradient-text: linear-gradient(90deg, oklch(0.48 0.20 340), oklch(0.60 0.22 310), oklch(0.65 0.20 305), oklch(0.48 0.20 340));
  --shadow-glow: 0 20px 60px -20px oklch(0.55 0.20 310 / 0.5);
  --shadow-card: 0 30px 80px -30px oklch(0.40 0.16 340 / 0.28), 0 8px 24px -12px oklch(0.40 0.16 340 / 0.14);
  --shadow-soft: 0 1px 2px oklch(0.45 0.12 325 / 0.06), 0 4px 12px oklch(0.45 0.12 325 / 0.06);
}
/* ── Reset ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
a {
  text-decoration: none;
}
ul {
  list-style: none;
}
img {
  max-width: 100%;
  display: block;
}
button {
  font-family: inherit;
  cursor: pointer;
}
/* ── Base ── */
body {
  font-family: var(--font-sans);
  background: var(--gradient-hero);
  color: var(--foreground);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* ── Design System Utility Classes ── */
.text-gradient {
  background: var(--gradient-text);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
}
.bg-gradient-primary {
  background: var(--gradient-primary);
}
.shadow-glow {
  box-shadow: var(--shadow-glow);
}
.shadow-card {
  box-shadow: var(--shadow-card);
}
.shadow-soft {
  box-shadow: var(--shadow-soft);
}
/* ── Keyframe Animations ── */
@keyframes shimmer {
  to { background-position: 200% center; }
}
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 oklch(0.6 0.20 310 / 0.55), var(--shadow-glow); }
  50% { box-shadow: 0 0 0 16px oklch(0.6 0.20 310 / 0), var(--shadow-glow); }
}
@keyframes wave {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes blink {
  0%, 60%, 100% { opacity: 1; }
  30% { opacity: 0.3; }
}
.animate-float { animation: float-y 6s ease-in-out infinite; }
.animate-pulse-glow { animation: pulse-glow 5s ease-in-out infinite; }
.animate-wave { animation: wave 18s linear infinite; }
.animate-blink { animation: blink 2.4s ease-in-out infinite; }
/* ── Dot-grid background ── */
.cs-page {
  background-color: #FBF5FC;
  min-height: 100vh;
  overflow-x: hidden;
}
/* ── Container ── */
.container {
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 24px;
}
/* ── Animations ── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(1.5);
  }
}
.anim-0 {
  animation: fadeUp .6s ease both;
}
.anim-1 {
  animation: fadeUp .6s .10s ease both;
}
.anim-2 {
  animation: fadeUp .6s .20s ease both;
}
.anim-3 {
  animation: fadeUp .6s .30s ease both;
}
.anim-4 {
  animation: fadeUp .6s .45s ease both;
}
.anim-5 {
  animation: fadeUp .6s .60s ease both;
}
/* ── Scroll-reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE BREAKPOINTS
   Desktop  : > 1024px  (default styles)
   Laptop   : 900–1024px
   Tablet   : 600–900px
   Mobile   : < 600px
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ── Hero section ── */
.hero-stats-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-stat-divider {
  display: block;
}
/* ── Features grid ── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
}
/* ── How it works steps ── */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
}
/* ── Testimonials ── */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
/* ── Pricing cards ── */
.pricing-cards-row {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
  align-items: stretch;
}
/* ── App mockup sidebar ── */
.mockup-sidebar {
  display: block;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LAPTOP  900–1024px
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .testi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TABLET  600–900px
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 900px) {
  .mockup-sidebar {
    display: none;
  }

  .pricing-cards-row {
    flex-direction: column;
    align-items: center;
  }

  .pricing-cards-row>* {
    max-width: 420px !important;
    width: 100%;
    transform: none !important;
  }

  .hero-stat-divider {
    display: none;
  }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MOBILE  < 640px
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 640px) {
  h1, .h1 {
    font-size: clamp(1.75rem, 6.5vw, 2.2rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
  }

  h2, .h2 {
    font-size: clamp(1.4rem, 5.2vw, 1.75rem) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
  }

  h3, .h3 {
    font-size: clamp(1.15rem, 4vw, 1.35rem) !important;
    line-height: 1.25 !important;
  }

  p, li {
    font-size: clamp(0.88rem, 3.2vw, 0.95rem);
    line-height: 1.55;
  }

  .container {
    padding: 0 12px !important;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .steps-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .testi-grid {
    grid-template-columns: 1fr;
  }

  .hero-stats-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-stats-bar>div {
    border-right: none !important;
    border-bottom: 1px solid #DDB8D8;
    padding: 0.85rem !important;
  }

  .hero-stats-bar>div:last-child {
    border-bottom: none;
  }

  /* Responsive Cards & Sections */
  .cs-card-responsive {
    padding: 1rem !important;
    border-radius: 16px !important;
  }

  .cs-section-responsive {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  /* Legible full-width screenshot visuals */
  .cs-img-legible img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    image-rendering: -webkit-optimize-contrast !important;
  }

  /* CTA band padding */
  .cta-band-inner {
    padding: 2rem 1rem !important;
    border-radius: 16px !important;
  }

  /* Comparison table */
  .comparison-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .comparison-table-wrap table {
    min-width: 500px;
  }

  /* Responsive Brand Marquee Card Width */
  .brand-item-card {
    width: 92vw !important;
    max-width: 640px !important;
  }
}
/* ── Material Symbols CSS helper ── */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}