:root {
  --color-primary: #FF6B00;
  --color-accent: #D90429;
  --color-surface: #FFF6E5;
  --color-ink: #1A0E2E;
  --color-ink-muted: #4A3E5D;
  --font-sans: "Vazirmatn", system-ui, -apple-system, sans-serif;
  --font-display: "Lalezar", "Estedad", "Vazirmatn", system-ui, sans-serif;

  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 2rem;
  --shadow-sm: 0 4px 12px rgb(26 14 46 / 0.06);
  --shadow-lg: 0 20px 40px -12px rgb(26 14 46 / 0.16);
  --shadow-xl: 0 32px 64px -16px rgb(26 14 46 / 0.28);
  --color-card: #FFFFFF;
  --color-line: rgb(26 14 46 / 0.12);
  --color-wash: rgb(26 14 46 / 0.05);
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
}

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

html {
  scroll-behavior: smooth;
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-surface);
}

body {
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-surface);
  overflow-x: hidden;
  line-height: 1.75;
}

#root {
  min-height: 100dvh;
}

/* Display typography tuned for FIZZIQ-inspired monumental headlines in Persian */
.font-display- Monumental {
  font-family: var(--font-display);
  line-height: 1.08;
}

@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(2deg);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    opacity: 0.55;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.08);
  }
}

.animate-float-slow {
  animation: floatSlow 5s ease-in-out infinite;
}

.animate-pulse-glow {
  animation: pulseGlow 4s ease-in-out infinite;
}

/* SCRUM-4230 — mechanical 393px edge-bleed repairs (render-verify auto-fix, do not hand-edit) */
/* SCRUM-5376 — mechanical cause-based edge-bleed repairs (render-verify auto-fix, do not hand-edit) */
/* SCRUM-5376:#hero-stage > div:nth-child(1) > div:nth-child(4) > div:nth-child(5) > div:nth-child(3) > button:nth-child(4) > span:nth-child(2) */
@media (max-width: 480px) {
  #hero-stage > div:nth-child(1) > div:nth-child(4) > div:nth-child(5) > div:nth-child(3) > button:nth-child(4) > span:nth-child(2) {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
    margin-left: 16px !important;
    max-width: calc(100% - 16px) !important;
  }
}
/* SCRUM-5376:#hero-stage > div:nth-child(1) > div:nth-child(4) > div:nth-child(5) > div:nth-child(3) > button:nth-child(4) */
@media (max-width: 480px) {
  #hero-stage > div:nth-child(1) > div:nth-child(4) > div:nth-child(5) > div:nth-child(3) > button:nth-child(4) {
    flex-wrap: wrap !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}
/* SCRUM-5376:#hero-stage > div:nth-child(1) > div:nth-child(4) > div:nth-child(5) > div:nth-child(3) */
@media (max-width: 480px) {
  #hero-stage > div:nth-child(1) > div:nth-child(4) > div:nth-child(5) > div:nth-child(3) {
    flex-wrap: wrap !important;
  }
}

/* SAZITO_PLATFORM_CONTAINER_FIX_SCRUM_4531 */
/* No author .container rule found; Tailwind's built-in .container
   utility never had a phone gutter in EITHER preview or a real build
   (width:100% + breakpoint max-width, no padding/margin, ever) — see
   platformContainerFix.ts for the full mechanism, verified both ways.
   Scoped to @layer components (not unlayered) so a REAL utility class the
   author DID apply — e.g. class="container px-8" — still wins: Tailwind's
   own @layer utilities (publish) and its unlayered runtime injection
   (preview) both outrank @layer components; this default only applies
   when nothing else sets padding/margin at all. */
@layer components {
  .container {
    margin-inline: auto;
    padding-inline: 1rem;
  }
  @media (min-width: 640px) {
    .container {
      padding-inline: 1.5rem;
    }
  }
}