/* ═══════════════════════════════════════════════════════════
   HOMEPAGE — Clean layout, colour accents, desktop polish
   ═══════════════════════════════════════════════════════════ */

:root {
  --accent-teal: #3db8bf;
  --accent-violet: #8b5cf6;
  --accent-gold: #c9a962;
  --accent-green: #34d399;
  --accent-coral: #f472b6;
}

/* ─── Section colour washes ─── */
.section-accent-violet {
  background:
    radial-gradient(ellipse 70% 50% at 80% 0%, rgba(139, 92, 246, 0.1), transparent 55%),
    radial-gradient(ellipse 50% 40% at 10% 100%, rgba(61, 184, 191, 0.06), transparent 50%),
    var(--bg-primary) !important;
  border-block: 1px solid rgba(139, 92, 246, 0.1);
}

.section-accent-gold {
  background:
    radial-gradient(ellipse 60% 45% at 20% 0%, rgba(201, 169, 98, 0.09), transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 80%, rgba(61, 184, 191, 0.05), transparent 50%),
    var(--bg-primary) !important;
  border-block: 1px solid rgba(201, 169, 98, 0.08);
}

.section-accent-teal {
  background:
    radial-gradient(ellipse 65% 50% at 50% 0%, rgba(61, 184, 191, 0.1), transparent 60%),
    var(--bg-primary) !important;
  border-block: 1px solid rgba(61, 184, 191, 0.1);
}

.page-home .featured-work {
  background:
    radial-gradient(ellipse 55% 45% at 100% 50%, rgba(52, 211, 153, 0.06), transparent 55%),
    var(--bg-primary) !important;
}

.page-home .testimonials {
  background:
    radial-gradient(ellipse 50% 40% at 0% 50%, rgba(244, 114, 182, 0.05), transparent 55%),
    var(--bg-primary) !important;
}

/* ─── Hero ─── */
.page-home .hero {
  min-height: clamp(480px, 75vh, 720px) !important;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h, 64px) + 2.5rem) 0 4rem !important;
  border-bottom: none;
}

.page-home .hero-ai-canvas {
  display: block !important;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.page-home.webgl-active .hero-ai-fallback {
  opacity: 0;
}

.page-home .hero-ai-fallback {
  background:
    radial-gradient(ellipse 70% 55% at 75% 40%, rgba(139, 92, 246, 0.15), transparent 55%),
    radial-gradient(ellipse 55% 45% at 25% 70%, rgba(61, 184, 191, 0.12), transparent 50%),
    radial-gradient(ellipse 40% 35% at 50% 10%, rgba(201, 169, 98, 0.08), transparent 50%),
    #050a12;
}

.page-home .hero-ai-grid {
  opacity: 0.45;
  mask-image: radial-gradient(ellipse 90% 80% at 65% 45%, black 15%, transparent 70%);
}

.page-home .hero-layout {
  position: relative;
  z-index: 4;
  width: 100%;
}

.page-home .hero-content {
  position: relative;
  z-index: 2;
  max-width: 36rem;
}

.page-home .hero-overlay {
  background:
    linear-gradient(100deg, rgba(5, 10, 18, 0.94) 0%, rgba(5, 10, 18, 0.82) 35%, rgba(5, 10, 18, 0.35) 65%, rgba(5, 10, 18, 0.5) 100%),
    radial-gradient(ellipse 60% 50% at 75% 45%, rgba(139, 92, 246, 0.08), transparent 60%) !important;
}

.page-home .hero-orbit-ring {
  display: none !important;
}

.page-home .text-gradient {
  background: linear-gradient(135deg, #fff 0%, var(--accent-teal) 45%, var(--accent-violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ─── Expertise grid ─── */
.expertise-section {
  padding: var(--section-pad) 0;
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(61, 184, 191, 0.08), transparent 55%),
    var(--bg-primary);
  border-bottom: 1px solid var(--border);
}

.expertise-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

.expertise-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: linear-gradient(160deg, var(--bg-elevated) 0%, var(--bg-surface) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  border-top: 3px solid var(--exp-accent, var(--teal));
  transition: transform 0.3s ease, border-color 0.3s, box-shadow 0.3s;
  overflow: hidden;
}

.expertise-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--exp-accent) 35%, var(--border));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}

.expertise-card--teal { --exp-accent: #3db8bf; }
.expertise-card--gold { --exp-accent: #c9a962; }
.expertise-card--violet { --exp-accent: #8b5cf6; }
.expertise-card--green { --exp-accent: #34d399; }
.expertise-card--coral { --exp-accent: #f472b6; }

.expertise-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  color: var(--exp-accent);
  background: color-mix(in srgb, var(--exp-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--exp-accent) 25%, transparent);
}

.expertise-icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

.expertise-card h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0;
  color: var(--text-primary);
  line-height: 1.2;
}

.expertise-card-body p {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
}

/* ─── Stats ─── */
.page-home .stats-strip {
  margin-top: 0 !important;
  padding: clamp(2.5rem, 4vw, 3.5rem) 0 !important;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}

/* ─── Logos ─── */
.page-home .logos-section {
  padding: 2rem 0;
  background: var(--bg-primary);
}

.page-home .logo-item {
  border-color: rgba(61, 184, 191, 0.15);
}

.page-home .logo-item:hover {
  border-color: rgba(139, 92, 246, 0.35);
  color: var(--accent-teal);
}

/* ─── AI agents section spacing ─── */
.page-home .ai-agents-section {
  padding: var(--section-pad) 0;
}

.page-home .ai-agents-hero-card {
  margin-bottom: 1.5rem;
}

.page-home .section-header h2 {
  max-width: none;
}

/* ─── Typography tweaks ─── */
html:not([data-theme="light"]) .page-home .hero-trust-item,
html:not([data-theme="light"]) .page-home .stat-label {
  color: #a8bdd0 !important;
}

html:not([data-theme="light"]) .page-home .lead,
html:not([data-theme="light"]) .page-home .section-header .lead {
  color: #cdd9e5 !important;
}

html:not([data-theme="light"]) .page-home .testimonial-author {
  color: var(--accent-teal) !important;
}

.page-home .section-actions {
  text-align: center;
  margin-top: 2rem;
}

.page-home .cta-strip {
  padding: 0 !important;
  margin-bottom: 0 !important;
  background: linear-gradient(135deg, rgba(61, 184, 191, 0.06), rgba(139, 92, 246, 0.05)) !important;
}

.page-home .cta-banner {
  padding-top: clamp(48px, 7vw, 80px) !important;
}

.page-home .cta-banner-inner {
  border-color: rgba(61, 184, 191, 0.15) !important;
}

/* Mobile/desktop layout — home-responsive.css */