:root {
  --color-primary: #19C2B0;
  --color-accent: #FFC400;
  --color-surface: #0A1624;
  --color-ink: #F2F6FA;
  --color-ink-muted: #A9B9C9;
  --font-sans: "Vazirmatn", system-ui, 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 1px 2px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 18px 40px -12px rgb(0 0 0 / 0.6);
  --shadow-xl: 0 30px 70px -20px rgb(0 0 0 / 0.7);
  --color-card: #12263A;
  --color-line: rgb(255 255 255 / 0.12);
  --color-wash: rgb(255 255 255 / 0.05);
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
html, body { font-family: var(--font-sans); color: var(--color-ink); background: var(--color-surface); line-height: 1.8; overflow-x: hidden; }
#root { min-height: 100dvh; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.3; font-weight: 400; }
.wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 768px) { .wrap { padding-inline: 1.5rem; } }
section[id] { scroll-margin-top: 5rem; }
.stripes { background-image: repeating-linear-gradient(135deg, rgb(0 0 0 / 0.9) 0 14px, #FFC400 14px 28px); }
@keyframes pulse-bar { 0%,100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.bar { animation: pulse-bar .9s ease-in-out infinite; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .bar { animation: none; } html { scroll-behavior: auto; } }

/* 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;
    }
  }
}