@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --ink: #0A0E14;
  --ink-soft: #0D1117;
  --blue: #1E5FFF;
  --blue-alt: #0EA5E9;
  --paper: #FFFFFF;
  --mist: #F8FAFC;
  --line: #D8E0EA;
  --muted: #516071;
  --success: #0F766E;
  --error: #B91C1C;
  --shadow: 0 18px 45px rgba(10, 14, 20, .09);
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; color: var(--ink); background: var(--paper); }
h1, h2, h3, .font-display { font-family: 'Space Grotesk', 'Inter', sans-serif; }
::selection { background: var(--blue); color: var(--paper); }
a, button, select, input, textarea, [role='button'] { cursor: pointer; }
:focus-visible { outline: 3px solid var(--blue-alt); outline-offset: 3px; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; background: var(--paper); color: var(--ink); padding: .75rem 1rem; font-weight: 700; border-radius: .25rem; }
.skip-link:focus { top: 1rem; }

.site-header.is-scrolled .nav-shell { background: rgba(255,255,255,.9); box-shadow: 0 10px 30px rgba(10,14,20,.08); }
.nav-shell { transition: background-color .25s ease, box-shadow .25s ease; }
.nav-link { position: relative; }
.nav-link::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -.45rem; height: 2px; background: var(--blue); transition: right .25s ease; }
.nav-link:hover::after, .nav-link[aria-current='page']::after { right: 0; }

.eyebrow { letter-spacing: .16em; text-transform: uppercase; font-size: .75rem; line-height: 1rem; font-weight: 700; color: var(--blue); }
.grid-rule { background-image: linear-gradient(rgba(30,95,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(30,95,255,.06) 1px, transparent 1px); background-size: 42px 42px; }
.hero-overlay { background: linear-gradient(90deg, rgba(10,14,20,.94) 0%, rgba(10,14,20,.8) 52%, rgba(10,14,20,.42) 100%); }
.section-rule { border-top: 1px solid var(--line); }

.card-lift { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card-lift:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(30,95,255,.35); }
.brand-logo { filter: grayscale(1); opacity: .55; transition: filter .25s ease, opacity .25s ease, color .25s ease; }
.brand-logo:hover { filter: grayscale(0); opacity: 1; color: var(--blue); }
.project-card img { transition: transform .4s ease; }
.project-card:hover img { transform: scale(1.04); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s ease, transform .65s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.lightbox { background: rgba(10,14,20,.94); }
.lightbox[hidden] { display: none; }
.lightbox img { max-height: 78vh; max-width: min(92vw, 1200px); object-fit: contain; }

.testimonial-slide { display: none; }
.testimonial-slide.is-active { display: block; animation: fade-in .35s ease both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.map-grid { background-image: linear-gradient(rgba(10,14,20,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(10,14,20,.07) 1px, transparent 1px); background-size: 28px 28px; }
.field-error { color: var(--error); font-size: .8rem; margin-top: .35rem; }
[aria-invalid='true'] { border-color: var(--error) !important; }
.form-status.success { color: var(--success); }
.form-status.error { color: var(--error); }

.mobile-fab { box-shadow: 0 12px 32px rgba(10,14,20,.25); }

.logo-mark { position: relative; overflow: hidden; }
.logo-mark::after { content: ''; position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; background: var(--ink); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.home-hero img, .inner-hero img { filter: saturate(.72) contrast(1.05); }
.home-hero::after, .inner-hero::after { content: ''; position: absolute; inset: auto 0 0; z-index: -1; height: 1px; background: rgba(255,255,255,.22); }
.card-lift { position: relative; overflow: hidden; }
.card-lift::after { content: ''; position: absolute; top: 0; right: 0; width: 34px; height: 3px; background: var(--blue); transform: scaleX(0); transform-origin: right; transition: transform .25s ease; }
.card-lift:hover::after { transform: scaleX(1); }
.project-card { position: relative; }
.project-card::before { content: ''; position: absolute; z-index: 2; top: 0; left: 0; width: 42px; height: 4px; background: var(--blue); }
.cta-grid { background-image: linear-gradient(90deg, transparent 0 74%, rgba(30,95,255,.16) 74% 75%, transparent 75%), linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px); background-size: 100% 100%, 100% 32px; }
.faq-item summary { cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .faq-icon { transition: transform .25s ease, background-color .25s ease, color .25s ease; }
.faq-item[open] .faq-icon { transform: rotate(45deg); background: var(--blue); color: var(--paper); border-color: var(--blue); }
.contact-card { transition: border-color .25s ease, transform .25s ease; }
.contact-card:hover { transform: translateY(-3px); }
[id] { scroll-margin-top: 8rem; }

@media (max-width: 767px) {
  .hero-overlay { background: linear-gradient(180deg, rgba(10,14,20,.9), rgba(10,14,20,.8)); }
}

@media (max-width: 1023px) {
  .mobile-menu[hidden] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}
