/* =========================================================================
   A-Lit Digital — main stylesheet
   Palette, typography, layout, and component styles for the whole site.
   ========================================================================= */

:root {
  --cyan: #00E5FF;
  --blue: #2979FF;
  --indigo: #1A237E;
  --ink: #0A0A1A;
  --ink-2: #12122A;
  --line: rgba(0, 229, 255, 0.14);
  --muted: rgba(255, 255, 255, 0.65);
  --white: #ffffff;
  --grad: linear-gradient(135deg, #00E5FF 0%, #2979FF 60%, #1A237E 100%);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--ink);
  color: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4, .display {
  font-family: 'Poppins', system-ui, sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 0.5em;
}
p { margin: 0 0 1em; color: rgba(255, 255, 255, 0.82); }
a { color: var(--cyan); text-decoration: none; }
img, svg { max-width: 100%; display: block; }

.container { width: min(1200px, 92%); margin: 0 auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ===== NAV ===== */
header.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(10, 10, 26, 0.72);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0; gap: 24px;
}
.logo {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 20px;
  color: var(--white);
}
.logo-mark {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--grad);
  display: grid; place-items: center;
  font-weight: 800; color: var(--ink);
  box-shadow: 0 0 24px rgba(0, 229, 255, 0.35);
  font-family: 'Poppins', sans-serif; font-size: 16px;
}
nav.primary ul {
  display: flex; gap: 28px; list-style: none; padding: 0; margin: 0;
  font-size: 14px; font-weight: 500;
}
nav.primary a { color: rgba(255, 255, 255, 0.78); transition: color 0.2s; }
nav.primary a:hover,
nav.primary a[aria-current="page"] { color: var(--cyan); }

.nav-right { display: flex; align-items: center; gap: 14px; }

.nav-socials {
  display: flex; align-items: center; gap: 4px;
  padding-right: 12px;
  border-right: 1px solid var(--line);
  margin-right: 2px;
}
.nav-socials a {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.nav-socials a:hover {
  color: var(--cyan);
  background: rgba(0, 229, 255, 0.06);
  transform: translateY(-1px);
}

.nav-toggle {
  display: none; background: transparent; border: 0; padding: 8px; cursor: pointer;
  color: var(--white);
}
.nav-toggle svg { width: 24px; height: 24px; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px;
  transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s, color 0.2s;
  cursor: pointer; border: 0; text-decoration: none; line-height: 1;
}
.btn-primary {
  background: var(--grad);
  color: var(--ink);
  box-shadow: 0 6px 22px rgba(0, 229, 255, 0.28);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0, 229, 255, 0.38);
}
.btn-ghost {
  background: transparent; color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }

/* ===== HERO ===== */
.hero {
  position: relative;
  padding: 120px 0 110px;
  overflow: hidden;
  background:
    radial-gradient(1000px 500px at 85% -10%, rgba(41, 121, 255, 0.30), transparent 60%),
    radial-gradient(700px 400px at 10% 20%, rgba(0, 229, 255, 0.20), transparent 60%),
    var(--ink);
}
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.9) 20%, transparent 80%);
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.9) 20%, transparent 80%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: 60px; align-items: center;
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.30);
  font-size: 13px; color: var(--cyan); font-weight: 500;
  font-family: 'Montserrat', sans-serif;
}
.chip .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 8px var(--cyan);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

h1.display {
  font-size: clamp(42px, 5.6vw, 78px);
  font-weight: 700;
  margin: 20px 0 20px;
}
.grad-text {
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lede { font-size: 19px; max-width: 560px; color: rgba(255, 255, 255, 0.80); }
.hero-cta { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }

.hero-proof {
  margin-top: 44px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  max-width: 560px;
}
.hero-proof .kpi { border-left: 2px solid var(--cyan); padding: 4px 0 4px 14px; }
.hero-proof .num { font-family: 'Poppins', sans-serif; font-size: 28px; font-weight: 700; color: var(--white); }
.hero-proof .lbl { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }

.hero-art { position: relative; height: 480px; }
.orb { position: absolute; inset: 0; display: grid; place-items: center; }
.orb svg { width: 100%; max-width: 500px; filter: drop-shadow(0 0 40px rgba(0, 229, 255, 0.25)); }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.rotate-slow { animation: spin 40s linear infinite; transform-origin: center; }
.rotate-rev { animation: spin 60s linear infinite reverse; transform-origin: center; }

/* Subtle page hero (non-homepage) */
.page-hero {
  position: relative; padding: 120px 0 70px; overflow: hidden;
  background:
    radial-gradient(700px 300px at 80% -10%, rgba(41, 121, 255, 0.25), transparent 60%),
    radial-gradient(500px 250px at 10% 20%, rgba(0, 229, 255, 0.16), transparent 60%),
    var(--ink);
  border-bottom: 1px solid var(--line);
}
.page-hero .eyebrow { color: var(--cyan); }
.page-hero h1 { font-size: clamp(38px, 4.6vw, 64px); margin: 14px 0 18px; }
.page-hero p.lede { font-size: 18px; max-width: 680px; color: rgba(255, 255, 255, 0.80); }

/* ===== MARQUEE ===== */
.marquee {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 22px 0; overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}
.marquee-label {
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px; text-align: center;
}
.marquee-track {
  display: flex; gap: 48px; white-space: nowrap;
  animation: slide 45s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px;
  color: rgba(255, 255, 255, 0.55); flex: none;
}
.marquee-track span::before {
  content: '◆'; color: var(--cyan); margin-right: 14px; opacity: 0.6;
}
@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ===== SECTION BASE ===== */
section { padding: 110px 0; position: relative; }
.eyebrow {
  display: inline-block; font-family: 'Montserrat', sans-serif; font-weight: 600;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 18px;
}
h2.section-title {
  font-size: clamp(32px, 3.8vw, 52px);
  font-weight: 700; max-width: 800px;
}
.section-head {
  display: flex; justify-content: space-between; align-items: end;
  gap: 40px; margin-bottom: 50px; flex-wrap: wrap;
}
.section-head p { max-width: 420px; margin: 0; }

/* ===== CONCESSION / POSITIONING ===== */
.concession {
  background: linear-gradient(180deg, transparent 0%, rgba(26, 35, 126, 0.22) 100%);
  border-top: 1px solid var(--line);
}
.concession-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
}
.concession .claim {
  font-family: 'Poppins', sans-serif; font-size: 26px; font-weight: 500; line-height: 1.35;
  color: rgba(255, 255, 255, 0.92);
}
.concession .claim em { color: var(--cyan); font-style: normal; font-weight: 600; }
.proof-bullets { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
.proof-bullets li {
  display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start;
  padding: 20px; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
}
.proof-bullets .bignum {
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 22px;
  color: var(--cyan); line-height: 1;
}
.proof-bullets h4 {
  font-size: 15px; font-weight: 600; margin: 0 0 6px;
  font-family: 'Montserrat', sans-serif; letter-spacing: 0.02em;
}
.proof-bullets p { font-size: 14px; margin: 0; color: var(--muted); }

/* ===== CARDS / SERVICES ===== */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card {
  position: relative; padding: 32px 28px; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--line);
  transition: transform 0.2s, border-color 0.2s, background 0.2s;
  overflow: hidden; color: inherit; display: block;
}
.card:hover { transform: translateY(-3px); border-color: rgba(0, 229, 255, 0.45); }
.card .icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(0, 229, 255, 0.10); border: 1px solid rgba(0, 229, 255, 0.30);
  display: grid; place-items: center; margin-bottom: 22px;
}
.card h3 { font-size: 20px; font-weight: 600; margin-bottom: 10px; }
.card .pill {
  display: inline-block; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
  background: rgba(0, 229, 255, 0.10); color: var(--cyan); margin-bottom: 16px;
}
.card ul { padding: 0 0 0 18px; margin: 14px 0 0; color: var(--muted); font-size: 14px; }
.card ul li { margin: 6px 0; }
.card .arrow {
  position: absolute; top: 28px; right: 28px;
  opacity: 0.4; transition: opacity 0.2s, transform 0.2s;
  color: var(--cyan);
}
.card:hover .arrow { opacity: 1; transform: translate(4px, -4px); }

/* ===== CASE STUDY BLOCK ===== */
.case {
  background:
    radial-gradient(500px 300px at 110% 50%, rgba(41, 121, 255, 0.18), transparent 60%),
    var(--ink-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.case-tag {
  color: var(--cyan); font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 600; margin-bottom: 14px;
}
.case h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 600; }
.case-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 28px 0 30px; }
.case-metrics .m {
  padding: 18px; border-radius: var(--radius-md);
  background: rgba(0, 229, 255, 0.06); border: 1px solid rgba(0, 229, 255, 0.20);
}
.case-metrics .m .big {
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 32px; color: var(--cyan);
  line-height: 1;
}
.case-metrics .m .sub { font-size: 13px; color: var(--muted); margin-top: 6px; }
.case-visual {
  padding: 30px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--line);
  position: relative; min-height: 380px; overflow: hidden;
}

/* ===== INDUSTRIES ===== */
.ind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ind {
  padding: 28px 24px; border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transition: border-color 0.2s, background 0.2s;
  color: inherit;
}
.ind:hover { border-color: rgba(0, 229, 255, 0.45); background: rgba(0, 229, 255, 0.04); }
.ind .ind-inner { display: flex; flex-direction: column; gap: 4px; }
.ind strong { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; color: var(--white); }
.ind span.sub { font-size: 13px; color: var(--muted); }
.ind .arrow { color: var(--cyan); }

/* ===== PROCESS ===== */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 50px; }
.step {
  position: relative; padding: 28px 22px; border-radius: var(--radius-md);
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02);
}
.step .n {
  display: inline-block; font-family: 'Poppins', sans-serif; font-weight: 700;
  font-size: 14px; padding: 4px 12px; border-radius: 999px;
  background: var(--grad); color: var(--ink); margin-bottom: 16px;
}
.step h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.step p { font-size: 14px; margin: 0; color: var(--muted); }

/* ===== TESTIMONIAL ===== */
.quote-wrap {
  max-width: 820px; margin: 0 auto; text-align: center;
  padding: 60px 40px; border-radius: var(--radius-xl);
  background:
    radial-gradient(400px 200px at 50% 0%, rgba(0, 229, 255, 0.18), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--line);
}
.quote-wrap .quote-mark {
  font-family: 'Poppins', sans-serif; font-size: 70px; line-height: 0.6;
  color: var(--cyan); opacity: 0.6;
}
.quote-wrap blockquote {
  font-family: 'Poppins', sans-serif; font-weight: 500; font-size: clamp(20px, 2vw, 26px);
  line-height: 1.4; margin: 24px 0; color: rgba(255, 255, 255, 0.92);
}
.quote-wrap .cite { font-size: 14px; color: var(--muted); }
.quote-wrap .cite strong { color: var(--white); }
.stars { color: var(--cyan); letter-spacing: 2px; font-size: 14px; }

/* Testimonial grid (for About/Work pages) */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.t-card {
  padding: 26px; border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line);
}
.t-card blockquote {
  font-size: 15px; line-height: 1.55; margin: 10px 0 16px;
  color: rgba(255, 255, 255, 0.88);
}
.t-card .cite { font-size: 13px; color: var(--muted); }
.t-card .cite strong { color: var(--white); }

/* ===== CTA BLOCK ===== */
.cta {
  text-align: center;
  background:
    radial-gradient(700px 360px at 50% 50%, rgba(41, 121, 255, 0.30), transparent 70%),
    var(--ink);
  border-top: 1px solid var(--line);
}
.cta h2 { font-size: clamp(34px, 4.4vw, 58px); max-width: 820px; margin: 0 auto 20px; }
.cta p { font-size: 18px; max-width: 560px; margin: 0 auto 34px; }
.cta .row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ===== FORMS ===== */
.form {
  display: grid; gap: 18px;
  padding: 32px; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--line);
}
.form-row { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cyan); font-weight: 600;
}
.field input,
.field select,
.field textarea {
  appearance: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  color: var(--white);
  padding: 14px 16px; border-radius: 10px;
  font: inherit; font-size: 15px;
  transition: border-color 0.15s, background 0.15s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--cyan);
  background: rgba(0, 229, 255, 0.06);
}
.field textarea { min-height: 140px; resize: vertical; }
.field .hint { font-size: 12px; color: var(--muted); }
.field.check {
  flex-direction: row; align-items: center; gap: 10px;
}
.field.check label { color: var(--muted); letter-spacing: 0; text-transform: none; font-weight: 400; font-size: 13px; }

.form-note { font-size: 13px; color: var(--muted); margin: 0; }
.honeypot { position: absolute; left: -5000px; opacity: 0; }

/* ===== POSTS / INSIGHTS ===== */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 24px; border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line);
  color: inherit; transition: border-color 0.2s, transform 0.2s;
}
.post-card:hover { border-color: rgba(0, 229, 255, 0.45); transform: translateY(-2px); }
.post-card .meta { font-size: 12px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.post-card h3 { font-size: 19px; margin: 0; color: var(--white); }
.post-card p { font-size: 14px; color: rgba(255, 255, 255, 0.78); margin: 0; }
.post-card .read { font-size: 13px; color: var(--cyan); font-weight: 600; }

/* Article / prose */
.prose { max-width: 720px; margin: 0 auto; font-size: 17px; line-height: 1.7; }
.prose h2 { font-size: clamp(26px, 2.6vw, 34px); margin-top: 2em; }
.prose h3 { font-size: 22px; margin-top: 1.6em; }
.prose p, .prose li { color: rgba(255, 255, 255, 0.88); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose blockquote {
  border-left: 3px solid var(--cyan);
  padding: 8px 0 8px 20px; margin: 1.5em 0;
  color: rgba(255, 255, 255, 0.92); font-style: italic;
}
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(0, 229, 255, 0.10);
  padding: 2px 6px; border-radius: 4px; font-size: 0.9em;
}
.prose pre {
  background: var(--ink-2); border: 1px solid var(--line);
  padding: 16px; border-radius: var(--radius-sm); overflow: auto;
}
.prose a { text-decoration: underline; text-underline-offset: 3px; }

/* ===== FOOTER ===== */
footer.site-footer {
  padding: 60px 0 30px;
  border-top: 1px solid var(--line);
  background: var(--ink);
}
.foot-grid {
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px; margin-bottom: 40px;
}
.foot-grid h5 {
  font-family: 'Poppins', sans-serif; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 16px;
}
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid ul li { margin: 8px 0; font-size: 14px; }
.foot-grid ul a { color: rgba(255, 255, 255, 0.7); }
.foot-grid ul a:hover { color: var(--cyan); }
.foot-tag {
  color: rgba(255, 255, 255, 0.55); font-size: 14px;
  margin-top: 16px; max-width: 320px;
}
.foot-bottom {
  display: flex; justify-content: space-between;
  padding-top: 24px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 13px; flex-wrap: wrap; gap: 14px;
}
.socials { display: flex; gap: 12px; }
.socials a {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line); color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s, border-color 0.2s;
}
.socials a:hover { color: var(--cyan); border-color: var(--cyan); }

/* Newsletter inline */
.newsletter {
  display: flex; gap: 10px; margin-top: 12px; max-width: 360px;
}
.newsletter input {
  flex: 1; min-width: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  padding: 10px 14px; border-radius: 999px;
  color: var(--white); font: inherit; font-size: 14px;
}
.newsletter input:focus { outline: none; border-color: var(--cyan); }
.newsletter button {
  background: var(--grad); color: var(--ink); border: 0;
  padding: 10px 18px; border-radius: 999px;
  font: inherit; font-weight: 600; cursor: pointer;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .hero-inner,
  .concession-grid,
  .case-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-art { height: 320px; }
  .services-grid,
  .ind-grid,
  .testimonial-grid,
  .post-grid { grid-template-columns: 1fr 1fr; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }

  nav.primary ul {
    display: none;
    position: absolute; top: 100%; right: 4%; left: 4%;
    flex-direction: column; gap: 14px;
    padding: 20px; background: rgba(10, 10, 26, 0.98);
    border: 1px solid var(--line); border-radius: var(--radius-md);
    margin-top: 8px;
  }
  nav.primary[data-open="true"] ul { display: flex; }
  .nav-toggle { display: inline-flex; }
  /* Hide nav social icons on mobile — already in the footer + mobile menu */
  .nav-socials { display: none; }

  section { padding: 80px 0; }
  .hero { padding: 80px 0 70px; }
  .page-hero { padding: 90px 0 50px; }
  .quote-wrap { padding: 40px 24px; }
  .form-row { grid-template-columns: 1fr; }
}

/* On narrow desktops where space is tight, drop a couple of less-essential
   icons before the breakpoint above kicks in. Keeps the nav from wrapping. */
@media (max-width: 1100px) and (min-width: 901px) {
  .nav-socials a:nth-child(n+5) { display: none; }
}

@media (max-width: 560px) {
  .services-grid,
  .ind-grid,
  .process-grid,
  .hero-proof,
  .foot-grid,
  .case-metrics,
  .testimonial-grid,
  .post-grid { grid-template-columns: 1fr; }
  h1.display { font-size: 40px; }
  .form { padding: 22px; }
}

/* ===== SPLASH SCREEN =====================================================
   Site-wide loading overlay shown on every page load. Uses the uploaded
   logo from site.json (branding.logo) when set, otherwise falls back to
   the gradient "A" mark. Hidden by JS once the page has finished loading.
   The overlay starts visible by default — that's intentional, so it shows
   even if JavaScript fails or hasn't parsed yet. The failsafe in main.js
   guarantees it never sticks around longer than ~3.5 seconds.
*/
.splash {
  position: fixed;
  inset: 0;
  z-index: 200;            /* above sticky nav (50) and WA float (60) */
  background:
    radial-gradient(800px 400px at 50% 30%, rgba(41, 121, 255, 0.20), transparent 60%),
    radial-gradient(600px 300px at 50% 70%, rgba(0, 229, 255, 0.14), transparent 60%),
    var(--ink);
  display: grid;
  place-items: center;
  opacity: 1;
  transition: opacity 0.45s ease-out, visibility 0s linear 0.45s;
  pointer-events: auto;
}
.splash.is-hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  animation: splash-pop 0.55s ease-out;
}
@keyframes splash-pop {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

.splash-logo {
  max-width: 220px;
  max-height: 100px;
  width: auto;
  height: auto;
  filter: drop-shadow(0 0 24px rgba(0, 229, 255, 0.35));
  animation: splash-glow 1.8s ease-in-out infinite alternate;
}

.splash-mark {
  width: 84px;
  height: 84px;
  border-radius: 20px;
  background: var(--grad);
  display: grid;
  place-items: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  color: var(--ink);
  font-size: 42px;
  line-height: 1;
  box-shadow: 0 0 40px rgba(0, 229, 255, 0.45);
  animation: splash-glow 1.8s ease-in-out infinite alternate;
}

.splash-wordmark {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--white);
  letter-spacing: -0.01em;
}

@keyframes splash-glow {
  from { filter: drop-shadow(0 0 24px rgba(0, 229, 255, 0.25)); transform: translateY(0); }
  to   { filter: drop-shadow(0 0 40px rgba(0, 229, 255, 0.55)); transform: translateY(-2px); }
}

.splash-bar {
  width: 220px;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}
.splash-bar span {
  display: block;
  height: 100%;
  width: 35%;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  border-radius: 999px;
  animation: splash-bar 1.2s linear infinite;
}
@keyframes splash-bar {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(360%); }
}

/* Hide splash entirely if JS has had a chance to remove it from the DOM */
.splash[hidden] { display: none !important; }

/* Mobile: smaller logo + bar */
@media (max-width: 560px) {
  .splash-logo { max-width: 170px; max-height: 80px; }
  .splash-mark { width: 72px; height: 72px; font-size: 36px; }
  .splash-bar  { width: 170px; }
}

/* Reduced motion: cut animations but keep the visual state */
@media (prefers-reduced-motion: reduce) {
  .splash-inner,
  .splash-logo,
  .splash-mark,
  .splash-bar span { animation: none; }
}

/* ===== FLOATING WHATSAPP BUTTON ===== */
.wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 60;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;          /* WhatsApp brand green */
  color: #ffffff;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(37, 211, 102, 0.6);
  transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease;
  animation: wa-pulse 2.4s ease-out infinite;
  text-decoration: none;
}
.wa-float:hover {
  transform: translateY(-2px) scale(1.05);
  background: #1FBA59;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
}
.wa-float:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}
.wa-float svg { display: block; }

.wa-tooltip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: rgba(10, 10, 26, 0.96);
  color: #ffffff;
  padding: 8px 14px;
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.wa-tooltip::after {
  content: '';
  position: absolute;
  top: 50%; right: -5px;
  transform: translateY(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: rgba(10, 10, 26, 0.96);
  border-right: 1px solid var(--line);
  border-top: 1px solid var(--line);
}
.wa-float:hover .wa-tooltip,
.wa-float:focus-visible .wa-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

@keyframes wa-pulse {
  0%   { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25), 0 0 0 0    rgba(37, 211, 102, 0.55); }
  70%  { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25), 0 0 0 18px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25), 0 0 0 0    rgba(37, 211, 102, 0); }
}

/* Smaller on phones; hide tooltip but keep the icon */
@media (max-width: 560px) {
  .wa-float { width: 52px; height: 52px; bottom: 18px; right: 18px; }
  .wa-float svg { width: 26px; height: 26px; }
  .wa-tooltip { display: none; }
}

/* Footer social row — slightly larger hover state to make icons feel clickable */
.socials a {
  transition: color 0.2s, border-color 0.2s, transform 0.2s;
}
.socials a:hover { transform: translateY(-1px); }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rotate-slow, .rotate-rev, .marquee-track, .chip .dot, .wa-float { animation: none; }
  .wa-float:hover, .socials a:hover { transform: none; }
  * { scroll-behavior: auto; }
}