/* --- Base Variables and Reset --- */
:root {
  --color-primary-light: #4f8cff;
  --color-surface-light: #ffffff;
  --color-on-surface-light: #0f172a;
  --color-on-surface-secondary-light: #475569;
  --color-border-light: #e2e8f0;
  --color-scrim-light: rgba(0,0,0,0.4);

  --color-primary-dark: #8ab4ff;
  --color-surface-dark: #0b1220;
  --color-on-surface-dark: #e2e8f0;
  --color-on-surface-secondary-dark: #94a3b8;
  --color-border-dark: #1f2937;
  --color-scrim-dark: rgba(0,0,0,0.6);

  --content-max-width: 1100px;
  --spacing-xs: 6px; --spacing-sm: 10px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px;
  --radius: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body { background: var(--color-surface-dark); color: var(--color-on-surface-dark); }
[data-theme="light"] body { background: var(--color-surface-light); color: var(--color-on-surface-light); }

a { color: inherit; }

.container { max-width: var(--content-max-width); margin: 0 auto; padding: 0 var(--spacing-lg); }
.section { padding: 80px 0; position: relative; }
.section.alt { background: rgba(255,255,255,0.02); }
.eyebrow { color: var(--color-primary-dark); letter-spacing: .1em; text-transform: uppercase; font-size: 12px; }
.section-title { font-size: 36px; margin: 8px 0 12px; }
.lead { font-size: 18px; line-height: 1.7; }
.muted { color: var(--color-on-surface-secondary-dark); }
.small { font-size: 12px; }
.max-700 { max-width: 700px; }

.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.cards-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.card { border: 1px solid var(--color-border-dark); border-radius: var(--radius); padding: 20px; background: rgba(255,255,255,0.02); }
.bullets { margin: 10px 0 0 16px; }
.bullets li { margin-bottom: 6px; }

.btn { display:inline-block; padding: 12px 16px; border-radius: 999px; text-decoration: none; font-weight:600; border:1px solid var(--color-border-dark); }
.btn-primary { background: var(--color-primary-dark); color: #09111f; border-color: transparent; }
.btn-outline { background: transparent; color: inherit; }
.btn:hover { opacity: .9; }

/* Navigation */
.navigation { position: sticky; top: 0; z-index: 1000; background: rgba(11,18,32,.7); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border-dark); }
.navigation__container { display:flex; align-items:center; justify-content:space-between; gap:16px; max-width: var(--content-max-width); margin:0 auto; padding:12px 24px; }
.navigation__logo { display:flex; gap:10px; align-items:center; text-decoration:none; }
.navigation__logo-icon { width:36px; height:36px; display:grid; place-items:center; background: var(--color-primary-dark); border-radius:10px; color:#0b1220; }
.navigation__links { list-style:none; display:flex; gap:6px; margin:0; padding:0; }
.navigation__link { position:relative; padding:8px 12px; border-radius:10px; text-decoration:none; color: var(--color-on-surface-secondary-dark); }
.navigation__link--active, .navigation__link:hover { color: var(--color-on-surface-dark); background: rgba(255,255,255,.04); }
.navigation__actions { display:flex; gap:8px; align-items:center; }
.navigation__theme-toggle, .navigation__mobile-toggle { width:40px; height:40px; border-radius:10px; background: rgba(255,255,255,.05); border:1px solid var(--color-border-dark); color:inherit; }
.navigation__mobile-toggle { display:none; }
.navigation__mobile-menu { display:none; }

/* Hero */
.hero { position: relative; height: 70vh; display:grid; place-items:center; text-align:center; overflow: hidden; }
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: saturate(0.8) brightness(0.4); }
.hero-overlay { position:absolute; inset:0; background: radial-gradient(transparent, rgba(0,0,0,0.5)); }
.hero-content { position:relative; z-index:2; padding: 0 24px; }
.hero-title { font-size: clamp(36px, 6vw, 64px); line-height:1.1; margin:0 0 12px; }
.hero-subtitle { font-size: 18px; color: var(--color-on-surface-secondary-dark); max-width: 820px; margin: 0 auto 18px; }
.hero-cta-row { display:flex; gap:12px; justify-content:center; }

/* Light mode hero: remove video and add subtle accents */
[data-theme="light"] .hero-video { display: none; }
[data-theme="light"] .hero {
  background:
    radial-gradient(1200px 500px at 50% -200px, rgba(79, 140, 255, 0.10), rgba(0,0,0,0) 60%),
    linear-gradient(#ffffff, #ffffff);
}

/* Section texture for light mode */
[data-theme="light"] .section {
  background-image:
    radial-gradient(1000px 400px at 50% -200px, rgba(79, 140, 255, 0.08), rgba(0,0,0,0) 60%),
    radial-gradient(800px 300px at 10% 0%, rgba(138, 180, 255, 0.06), rgba(0,0,0,0) 70%),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.008), rgba(0,0,0,0.008) 2px, transparent 3px, transparent 6px);
}

/* Cards in light mode */
[data-theme="light"] .card,
[data-theme="light"] .service-card {
  background: var(--color-surface-light);
  border: 1px solid var(--color-border-light);
}

/* Services */
.service-card { border:1px solid var(--color-border-dark); border-radius: var(--radius); padding: 18px; background: rgba(255,255,255,0.02); }
.service-card h3 { margin-top: 0; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
.contact-card { display: flex; flex-direction: column; gap: 12px; }
.contact-card a { color: inherit; font-weight: 600; }
.contact-form { display: flex; flex-direction: column; gap: 6px; }
.form label { display:block; font-weight:600; margin-top: 10px; }
.form input, .form select, .form textarea { width:100%; padding:10px; margin-top:6px; background: rgba(255,255,255,0.03); border:1px solid var(--color-border-dark); color:inherit; border-radius:10px; }
.contact-form button { margin-top: 14px; align-self: flex-start; }
.form-note { margin-top:8px; color: var(--color-on-surface-secondary-dark); }
.hidden { display: none !important; }

[data-theme="light"] .form input,
[data-theme="light"] .form select,
[data-theme="light"] .form textarea {
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid var(--color-border-light);
  color: var(--color-on-surface-light);
}

/* Wave above footer */
.wave-wrap { position: relative; height: 64px; overflow: hidden; }
.wave-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Footer + moving glow */
.footer { position: relative; border-top:1px solid var(--color-border-dark); padding: 24px 0; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.footer-glow { position: absolute; left: 0; right: 0; top: 0; height: 4px; overflow: hidden; }
.footer-glow::before {
  content: ""; position: absolute; top: 0; left: -30%;
  width: 30%; height: 100%; border-radius: 999px;
  background: radial-gradient(60% 200% at 50% 50%, var(--color-primary-dark) 0%, rgba(0,0,0,0) 80%);
  filter: blur(6px); animation: sweep 4s linear infinite;
}
@keyframes sweep { 0% { transform: translateX(0%);} 100% { transform: translateX(430%);} }

/* Light mode nav & footer borders */
[data-theme="light"] .navigation { background: rgba(255,255,255,.75); border-bottom: 1px solid var(--color-border-light); }
[data-theme="light"] .navigation__link { color: var(--color-on-surface-secondary-light); }
[data-theme="light"] .navigation__link--active,
[data-theme="light"] .navigation__link:hover { color: var(--color-on-surface-light); background: rgba(0,0,0,.04); }
[data-theme="light"] .footer { border-top: 1px solid var(--color-border-light); }

/* Responsive */
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
  .cards-3 { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .navigation__links { display:none; }
  .navigation__mobile-toggle { display:block; }
  .navigation__mobile-menu { position:fixed; inset:0; background:rgba(0,0,0,.6); }
}
@media (max-width: 640px) {
  .cards-3 { grid-template-columns: 1fr; }
}