:root {
  --color-primary: #43E4D2;
  --color-accent: #A98BFF;
  --color-surface: #080B18;
  --color-ink: #F2F5FF;
  --color-ink-muted: #AEB6D3;
  --font-sans: "Vazirmatn", system-ui, sans-serif;
  --font-display: "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.4);
  --shadow-lg: 0 18px 40px -12px rgb(67 228 210 / 0.25);
  --shadow-xl: 0 30px 70px -20px rgb(169 139 255 / 0.4);
  --color-card: #11172B;
  --color-line: rgb(174 182 211 / 0.18);
  --color-wash: rgb(174 182 211 / 0.07);
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
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; }
::selection { background: var(--color-accent); color: var(--color-surface); }

.sec { padding: 5rem 1rem; max-width: 76rem; margin-inline: auto; }
@media (min-width: 768px) { .sec { padding: 7rem 1.5rem; } }
.eyebrow { font-size: 0.875rem; font-weight: 700; color: var(--color-primary); display: inline-flex; gap: .5rem; align-items: center; }
.eyebrow::before { content: ""; width: 1.5rem; height: 2px; background: var(--color-primary); }
.h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 4.5vw, 3.25rem); line-height: 1.4; overflow-wrap: anywhere; }
.lead { color: var(--color-ink-muted); font-size: 1.0625rem; overflow-wrap: anywhere; }
.grad-text { background: linear-gradient(100deg, var(--color-primary), var(--color-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.panel { background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-lg); }
.glow-btn { transition: transform .2s, box-shadow .2s; }
.glow-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

@keyframes drift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pulse-node { 0%,100% { opacity: .5; r: 4; } 50% { opacity: 1; r: 7; } }
@keyframes dash { to { stroke-dashoffset: -60; } }
.node { animation: pulse-node 3.5s ease-in-out infinite; }
.edge { stroke-dasharray: 6 8; animation: dash 6s linear infinite; }
.float { animation: drift 7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .node, .edge, .float { 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;
    }
  }
}