:root{
  color-scheme: light dark;
  --ink: #0b1f3b;
  --ink-weak: #5b6b82;
  --primary: #0e62ff;
  --accent: #23c0f5;
  --surface: #ffffff;
  --surface-2: #f6f8fb;
  --hero-glow: 0 2px 16px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: dark){
  :root{ --ink:#e8edf7; --ink-weak:#b7c3d8; --primary:#78a7ff; --accent:#4ad0ff; --surface:#0b1220; --surface-2:#0f172a; --hero-glow:0 3px 24px rgba(0,0,0,.6); }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif}
.header{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:var(--surface);border-bottom:1px solid rgba(0,0,0,.06)}
.header .logo{display:flex;align-items:center;gap:10px}
.header .logo img{height:34px;width:auto}
.nav a{color:var(--ink);text-decoration:none;margin-left:18px;font-weight:600}

.hero{position:relative;min-height:64vh;display:grid;align-items:center;color:#fff;background-size:cover;background-position:center;background-repeat:no-repeat}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom right, rgba(14,98,255,.58), rgba(35,192,245,.36))}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(1000px 340px at 15% 10%, rgba(255,255,255,.10), transparent 60%),radial-gradient(900px 320px at 85% 0%, rgba(255,255,255,.10), transparent 60%),repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 6px)}
.hero__inner{position:relative;z-index:1;width:min(1100px,92vw);margin-inline:auto;padding:62px 0 56px}
.hero h1{margin:0 0 .4rem 0;font-size:clamp(2rem, 2.2rem + 1.4vw, 3.4rem);line-height:1.12;text-shadow:var(--hero-glow)}
.hero p.lede{margin:.2rem 0 1.2rem 0;font-size:clamp(1.05rem,.95rem + .7vw,1.3rem);color:#eef4ff;max-width:72ch;text-shadow:var(--hero-glow)}
.button{display:inline-flex;align-items:center;gap:.5rem;background:#fff;color:#0b1f3b;border:0;border-radius:10px;padding:.8rem 1.1rem;font-weight:600;text-decoration:none;box-shadow:0 6px 22px rgba(0,0,0,.12)}
.button:hover{transform:translateY(-1px)}

/* Page backgrounds (light) */
.hero--home{background-image:url('/assets/img/bg-home-hero.webp')}
.hero--services{background-image:url('/assets/img/bg-services.webp')}
.hero--ai{background-image:url('/assets/img/bg-ai.webp')}
.hero--contact{background-image:url('/assets/img/bg-contact.webp')}

/* Swap to dark assets */
@media (prefers-color-scheme: dark){
  .hero--home{background-image:linear-gradient(to bottom right, rgba(7,29,66,.65), rgba(16,44,89,.55)), url('/assets/img/bg-home-hero-dark.webp')}
  .hero--services{background-image:linear-gradient(to bottom right, rgba(7,29,66,.65), rgba(16,44,89,.55)), url('/assets/img/bg-services-dark.webp')}
  .hero--ai{background-image:linear-gradient(to bottom right, rgba(7,29,66,.65), rgba(16,44,89,.55)), url('/assets/img/bg-ai-dark.webp')}
  .hero--contact{background-image:linear-gradient(to bottom right, rgba(7,29,66,.65), rgba(16,44,89,.55)), url('/assets/img/bg-contact-dark.webp')}
}

.section{padding:56px 0;background:var(--surface)}
.container{width:min(1100px,92vw);margin:0 auto}
.grid{display:grid;gap:18px}

/* Banner icon strip */
.banner-icons{margin-top:24px;display:grid;grid-template-columns:repeat(5, minmax(90px,1fr));gap:16px;align-items:center}
.banner-icon{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:#fff}
.banner-icon svg, .banner-icon img{width:56px;height:56px}
.banner-icon span{font-size:.9rem;color:#f1f6ff;letter-spacing:.2px}
@media (max-width:900px){.banner-icons{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.banner-icons{grid-template-columns:repeat(2,1fr)}.hero{min-height:70vh}}

.footer{padding:32px 0;border-top:1px solid rgba(0,0,0,.06);background:var(--surface);color:var(--ink-weak)}