/* ============================================
   Brand design tokens — unified across all pages
   Premium blue palette · shared surfaces
   ============================================ */

.page-home,
.site-theme {
  --color-bg: #090c11;
  --color-bg-warm: #0e131b;
  --color-bg-card: #171a21;
  --color-bg-elevated: #1c2028;
  --color-text: #eef2f8;
  --color-text-muted: #94a3b8;
  --color-text-soft: #64748b;
  --color-accent: #4d9fff;
  --color-accent-hover: #7ab8ff;
  --color-accent-ai: #8b7cf6;
  --color-border: rgba(148, 163, 184, 0.12);
  --color-border-strong: rgba(148, 163, 184, 0.22);
  --color-status-bg: rgba(77, 159, 255, 0.08);
  --home-glow: rgba(77, 159, 255, 0.14);
  --home-glow-ai: rgba(139, 124, 246, 0.12);

  --vis-accent: var(--color-accent);
  --vis-ai: var(--color-accent-ai);

  --font-display: "Heebo", "Segoe UI", sans-serif;
  --font-body: "IBM Plex Sans Hebrew", "Segoe UI", sans-serif;

  --radius: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  --hp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.18s;
  --duration: 0.28s;
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px rgba(77, 159, 255, 0.55);
}

.page-home,
.site-theme {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  text-rendering: optimizeLegibility;
}

.page-home ::selection,
.site-theme ::selection {
  background: rgba(77, 159, 255, 0.28);
  color: var(--color-text);
}

.page-home h1,
.page-home h2,
.page-home h3,
.site-theme h1,
.site-theme h2,
.site-theme h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.page-home p,
.site-theme p {
  text-wrap: pretty;
}

/* Unified header & CTA — calm, solid blue */
.page-home .site-header,
.page-home .site-header.is-scrolled,
.site-theme .site-header,
.site-theme .site-header.is-scrolled {
  background: rgba(9, 12, 17, 0.92);
  backdrop-filter: none;
  transition: border-color var(--duration) var(--hp-ease),
              background var(--duration) var(--hp-ease);
}

.page-home .site-header.is-scrolled,
.site-theme .site-header.is-scrolled {
  border-bottom-color: var(--color-border);
}

.page-home .logo,
.site-theme .logo {
  transition: opacity var(--duration-fast) var(--hp-ease);
}

.page-home .logo:hover,
.site-theme .logo:hover {
  opacity: 0.88;
}

.page-home .nav-link,
.site-theme .nav-link {
  transition: color var(--duration-fast) var(--hp-ease),
              background var(--duration-fast) var(--hp-ease);
}

.page-home .nav-link--cta,
.site-theme .nav-link--cta {
  background: var(--color-accent);
  box-shadow: none;
  color: #fff;
}

.page-home .nav-link--cta:hover,
.site-theme .nav-link--cta:hover {
  background: var(--color-accent-hover);
  color: #fff;
}

.page-home .btn-primary,
.site-theme .btn-primary {
  background: var(--color-accent);
  box-shadow: none;
  color: #fff;
  transition: background var(--duration-fast) var(--hp-ease),
              opacity var(--duration-fast) var(--hp-ease);
}

.page-home .btn-primary:hover,
.site-theme .btn-primary:hover {
  background: var(--color-accent-hover);
  box-shadow: none;
  transform: none;
}

.page-home .btn-primary:active,
.site-theme .btn-primary:active {
  opacity: 0.92;
}

.page-home .sticky-cta,
.site-theme .sticky-cta {
  background: var(--color-accent);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  transition: background var(--duration-fast) var(--hp-ease),
              transform 0.35s var(--hp-ease-out),
              opacity 0.35s var(--hp-ease-out);
}

.page-home .sticky-cta:hover,
.site-theme .sticky-cta:hover {
  background: var(--color-accent-hover);
}

.page-home .text-link,
.site-theme .text-link {
  color: var(--color-accent);
  transition: color var(--duration-fast) var(--hp-ease),
              gap 0.25s var(--hp-ease);
}

.page-home .text-link:hover,
.site-theme .text-link:hover {
  color: var(--color-accent-hover);
}

.page-home .skip-link,
.site-theme .skip-link {
  background: var(--color-accent);
  color: #fff;
}

.page-home .skip-link:focus,
.site-theme .skip-link:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Focus visibility — keyboard only */
.page-home a:focus-visible,
.page-home button:focus-visible,
.page-home input:focus-visible,
.page-home textarea:focus-visible,
.page-home select:focus-visible,
.site-theme a:focus-visible,
.site-theme button:focus-visible,
.site-theme input:focus-visible,
.site-theme textarea:focus-visible,
.site-theme select:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.page-home a:focus:not(:focus-visible),
.page-home button:focus:not(:focus-visible),
.site-theme a:focus:not(:focus-visible),
.site-theme button:focus:not(:focus-visible) {
  box-shadow: none;
}

/* Forms */
.page-home .form-group input,
.page-home .form-group textarea,
.page-home .form-group select,
.site-theme .form-group input,
.site-theme .form-group textarea,
.site-theme .form-group select {
  transition: border-color var(--duration-fast) var(--hp-ease),
              box-shadow var(--duration-fast) var(--hp-ease),
              background var(--duration-fast) var(--hp-ease);
}

.page-home .form-group input:focus,
.page-home .form-group textarea:focus,
.page-home .form-group select:focus,
.site-theme .form-group input:focus,
.site-theme .form-group textarea:focus,
.site-theme .form-group select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(77, 159, 255, 0.18);
}

.page-home .form-group input::placeholder,
.page-home .form-group textarea::placeholder,
.site-theme .form-group input::placeholder,
.site-theme .form-group textarea::placeholder {
  color: var(--color-text-soft);
  opacity: 0.85;
}

/* Footer rhythm */
.page-home .site-footer,
.site-theme .site-footer {
  background: var(--color-bg-warm);
  border-top: 1px solid var(--color-border);
}

.page-home .footer-nav a,
.site-theme .footer-nav a {
  transition: color var(--duration-fast) var(--hp-ease);
}

.page-home .menu-toggle:focus-visible,
.site-theme .menu-toggle:focus-visible {
  border-radius: var(--radius);
  box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  .page-home .project-feature:hover,
  .site-theme .project-feature:hover {
    transform: none;
  }
}

/* Lucide graceful fallback — keep spacing when icons fail to hydrate */
.icons-fallback [data-lucide]:empty {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  border: 1px solid currentColor;
  border-radius: 2px;
  opacity: 0.35;
  vertical-align: -0.15em;
  flex-shrink: 0;
}

.page-home,
.site-theme {
  overflow-x: clip;
}

.page-home .container,
.site-theme .container,
.page-home .header-inner,
.site-theme .header-inner {
  max-width: 100%;
}