/* Design "studio": clean. Lots of air, one blue accent, soft rounded cards with a faint shadow, Inter for
   everything; the safe service-business look. Two palettes: light (the natural tone) and dark (ink blue). */
@import url("/static/vendor/fonts/studio.css");

:root {
  --light-bg: #f7f8fa; --light-surface: #ffffff; --light-text: #141a24; --light-muted: #5f6b7a; --light-border: #e3e7ec;
  --light-alt: #ffffff; --light-hero: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%);
  --light-header: rgba(255, 255, 255, 0.86); --light-grid: rgba(20, 26, 36, 0.06); --light-accent-ink: #0b5fd8;
  --dark-bg: #0e1218; --dark-surface: #161b23; --dark-text: #e8edf3; --dark-muted: #94a0b2; --dark-border: #252d39;
  --dark-alt: #0a0d12; --dark-hero: linear-gradient(180deg, #151a22 0%, #0e1218 100%);
  --dark-header: rgba(14, 18, 24, 0.86); --dark-grid: rgba(255, 255, 255, 0.05); --dark-accent-ink: #6aa5ff;

  --bg: var(--light-bg); --surface: var(--light-surface); --text: var(--light-text); --muted: var(--light-muted);
  --border: var(--light-border); --alt-bg: var(--light-alt); --hero-bg: var(--light-hero); --header-bg: var(--light-header);
  --grid-line: var(--light-grid); --accent-ink: var(--light-accent-ink);
  color-scheme: light;

  --accent: #0f6fff;
  --accent-text: #ffffff;
  --radius: 12px;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Inter", system-ui, sans-serif;
  --display-tracking: -0.03em;
  --tile-shadow: 0 1px 2px rgba(20, 26, 36, 0.04), 0 10px 30px rgba(20, 26, 36, 0.06);
}

.site-header { backdrop-filter: blur(10px); }
.hero .actions .button, .hero .actions button { border-radius: 99px; }
.site-header nav a.cta { border-radius: 99px; padding: 8px 18px; }
.tile { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20, 26, 36, 0.05), 0 16px 40px rgba(20, 26, 36, 0.1); }
/* dark mode: a lighter blue that holds up on the dark page */
:root[data-mode="dark"] { --accent: #4f8dff; }

.steps-grid .tile::before { font-size: 1.1rem; width: 36px; height: 36px; line-height: 36px; text-align: center; border-radius: 50%; background: var(--accent); color: var(--accent-text); margin-bottom: 14px; }