/* ============================================
   THEME — Modern Dark (Architecture)

   Forward-thinking, tech-savvy, precise.
   Indigo = innovation. Cyan = clarity.
   Dark surfaces, sharp corners, confident.
   Best for: architects, engineers, tech firms,
   design studios, consulting firms.
   ============================================ */

:root {
  --color-primary:        #6366f1;
  --color-primary-light:  #818cf8;
  --color-primary-dark:   #4f46e5;
  --color-secondary:      #0f172a;
  --color-secondary-light:#1e293b;
  --color-accent:         #06b6d4;
  --color-accent-light:   #22d3ee;

  --color-bg:             #030712;
  --color-surface:        #0f172a;
  --color-surface-light:  #1e293b;
  --color-border:         rgba(255, 255, 255, 0.10);

  --color-text:           #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-muted:     #64748b;

  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.5rem;
  --text-5xl:   3.25rem;
  --text-6xl:   4.5rem;

  --container-max:        1200px;
  --container-padding:    2rem;
  --section-padding:      6rem;
  --grid-gap:             2rem;

  --radius:     4px;
  --radius-lg:  8px;
}

@media (max-width: 1024px) {
  :root {
    --text-6xl: 3.5rem; --text-5xl: 2.75rem; --text-4xl: 2rem;
    --section-padding: 4.5rem;
  }
}
@media (max-width: 768px) {
  :root {
    --text-6xl: 2.5rem; --text-5xl: 2rem; --text-4xl: 1.75rem; --text-3xl: 1.5rem;
    --container-padding: 1.25rem; --section-padding: 3.5rem; --grid-gap: 1.5rem;
  }
}
@media (max-width: 480px) {
  :root {
    --text-6xl: 2rem; --text-5xl: 1.75rem;
    --container-padding: 1rem; --section-padding: 3rem;
  }
}

/* --- Client-specific --- */
.highlight { color: var(--color-accent); }
.divider {
  width: 60px; height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  margin-bottom: 1.5rem; border-radius: 3px;
}
.divider--center { margin-left: auto; margin-right: auto; }

.img-placeholder {
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-light) 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.1em;
}

.hero__bg .img-placeholder {
  background: linear-gradient(135deg, #030712 0%, #0f172a 30%, #1a1145 50%, #0f172a 70%, #030712 100%) !important;
}
.hero__overlay {
  background: linear-gradient(135deg, rgba(3,7,18,0.90) 0%, rgba(3,7,18,0.60) 50%, rgba(3,7,18,0.80) 100%) !important;
}

.page-banner {
  background: linear-gradient(135deg, #030712 0%, #0f172a 30%, #1a1145 50%, #0f172a 70%, #030712 100%) !important;
}

.section--accent input::placeholder,
.section--accent textarea::placeholder { color: rgba(255,255,255,0.5); }
.section--accent input, .section--accent textarea, .section--accent select { color: #fff; }

.stat__number { color: var(--color-accent); }
.label { color: var(--color-accent); }

.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--color-accent); }

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.03em; }

.btn { border-radius: var(--radius); font-weight: 600; letter-spacing: 0.06em; }
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(99,102,241,0.3); }