@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;650;700;750&display=swap');

/* Shared visual system. The homepage is the source for this palette. */
:root {
  color-scheme: dark;
  --font-body: 'DM Sans', Arial, sans-serif;
  --font-display: var(--font-body);
  --color-bg: #19191c;
  --color-surface: #202023;
  --color-surface-alt: #1d1d21;
  --color-surface-raised: #242427;
  --color-ink: #f7f7fa;
  --color-text: #e4e4ed;
  --color-muted: #b3b3bf;
  --color-subtle: #a0a0ad;
  --color-line: #35353e;
  --color-border-strong: #777781;
  --color-accent: #6255d6;
  --color-accent-hover: #6f61e3;
  --color-accent-light: #b2aaff;
  --color-link-hover: #d0caff;
  --color-accent-soft: #29253e;
  --color-accent-surface: #302b45;
  --color-accent-surface-hover: #34304c;
  --color-on-accent: #ffffff;
  --color-success: #a4d6b0;
  --color-error: #f0a6ae;
  --color-bg-rgb: 25, 25, 28;
  --color-surface-rgb: 32, 32, 35;
  --color-ink-rgb: 247, 247, 250;
  --color-accent-rgb: 98, 85, 214;
  --color-shadow-rgb: 10, 10, 14;
  --color-hero-glow: #3c326d40;
  --color-hero-glow-secondary: #45354430;
  --color-hero-outline: #767080;
  --color-hero-outline-start: #574bc32b;
  --color-hero-outline-end: #40354d08;
  --color-work-glow: #26223b70;
  --radius-control: 4px;
  --radius-panel: 10px;
  --content-width: 1184px;
  --page-gutter: 96px;
}

html { -webkit-text-size-adjust: 100%; }
body { background-color: var(--color-bg); color: var(--color-ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
body:not(.home-page) { line-height: 1.65; }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; }

/* Keep the same readable type proportions when moving between page families. */
:is(.wd-dispatch-hero, .wd-service-banner, .hub-hero, .case-hero, .industry-hero, .blog-hero) h1 {
  font-size: clamp(2.6rem, 4.9vw, 4.5rem);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -.045em;
  text-transform: none;
  text-wrap: balance;
}
:is(.blog-hero, .guide-hero) h1 { max-width: 24ch; font-size: clamp(2.25rem, 4.7vw, 4rem); }
:is(.hub-hero, .case-hero, .wd-service-banner, .wd-dispatch-hero) { background-color: var(--color-bg); }
:is(.hub-cta, .case-callout, .industry-cta, .design-contact) { background: var(--color-surface); }

/* Shared action treatment; page-specific grids and control widths stay local. */
body .btn, body .contact-submit {
  min-height: 52px;
  padding: 14px 22px;
  border-radius: var(--radius-control);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  box-shadow: none;
}
body .btn-primary,
.hub-cta .btn,
.case-callout .btn,
.price-card .btn,
.website-design-refresh .design-contact .btn,
body .contact-submit {
  color: var(--color-on-accent);
  background: var(--color-accent);
  border-color: var(--color-accent);
}
body .btn-primary:hover,
.hub-cta .btn:hover,
.case-callout .btn:hover,
.price-card .btn:hover,
.website-design-refresh .design-contact .btn:hover,
body .contact-submit:hover {
  color: var(--color-on-accent);
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}
body .btn-secondary, .price-card .btn.light {
  color: var(--color-text);
  background: transparent;
  border-color: var(--color-border-strong);
}
body .btn-secondary:hover, .price-card .btn.light:hover {
  color: var(--color-ink);
  background: var(--color-accent-soft);
  border-color: var(--color-accent-light);
}
body .btn:disabled, body .contact-submit:disabled { opacity: .6; cursor: wait; transform: none; }
body :focus-visible { outline: 2px solid var(--color-accent-light); outline-offset: 5px; }
body a:not(.btn):hover { text-underline-offset: 4px; }

.form-shell, .contact-panel { background: var(--color-surface); border-radius: var(--radius-panel); box-shadow: none; }
.contact-field input, .contact-field select, .contact-field textarea {
  color: var(--color-ink);
  background: var(--color-bg);
  border-color: var(--color-line);
  border-radius: var(--radius-control);
  box-shadow: none;
}
.contact-field input:focus, .contact-field select:focus, .contact-field textarea:focus { border-color: var(--color-accent-light); }
.contact-field input::placeholder, .contact-field textarea::placeholder { color: var(--color-subtle); opacity: 1; }
.contact-status.success { color: var(--color-success); }
.contact-status.error { color: var(--color-error); }
.contact-field [aria-invalid="true"] { border-color: var(--color-error); }

/* A neutral frame keeps client screenshots in their original brand colors. */
.case-hero-image, .case-screen, .design-project-image, .industry-card { border-radius: var(--radius-panel); }
.case-screen, .design-project-image { border: 1px solid var(--color-line); }
.price-card.featured { background: var(--color-accent-soft); border-color: var(--color-accent-light); }
.industry-cta a { background: var(--color-accent); color: var(--color-on-accent); border-radius: var(--radius-control); }
.industry-cta a:hover { background: var(--color-accent-hover); }

body footer { background: var(--color-bg); color: var(--color-muted); }
body footer :is(h3, h4, strong) { color: var(--color-ink); text-transform: none; }
body footer a:not(.btn):hover { color: var(--color-accent-light); }

@media (max-width: 760px) {
  :root { --page-gutter: 40px; }
  :is(.wd-dispatch-hero, .wd-service-banner, .hub-hero, .case-hero, .industry-hero, .blog-hero) h1 { font-size: clamp(2.25rem, 8.5vw, 3.6rem); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body .btn, body .contact-submit { transition: none; }
}