:root {
  --brand: #eb5d1e;
  --night: #0b1021;
  --ink: #0c1221;
  --mist: #c7d2e5;
  --circuit-stroke: rgba(235, 93, 30, 0.32);
  --circuit-glow: rgba(235, 93, 30, 0.55);
  --circuit-backdrop: rgba(255, 255, 255, 0.08);
}

body {
  font-family: "Satoshi", "Manrope", Inter, system-ui, -apple-system, sans-serif;
  background-color: #0b1021;
  color: #e9edf5;
}

.font-display,
h1, h2, h3, h4 {
  font-family: "Clash Grotesk", "Space Grotesk", system-ui, sans-serif;
}

html {
  background-color: #0b1021;
}
main {
  background-color: #0b1021;
}

[data-theme="light"] body {
  background-color: #f7f9fc;
  color: #0f172a;
}

[data-theme="light"] {
  --circuit-stroke: rgba(235, 93, 30, 0.42);
  --circuit-glow: rgba(235, 93, 30, 0.7);
  --circuit-backdrop: rgba(235, 93, 30, 0.12);
}

[data-theme="light"] main {
  background-color: #f7f9fc;
}
[data-theme="light"] html {
  background-color: #f7f9fc;
}

[data-theme="light"] .text-slate-300,
[data-theme="light"] .text-fog {
  color: #475569 !important;
}

[data-theme="light"] .text-slate-100 {
  color: #334155 !important;
}

[data-theme="light"] .text-white {
  color: #0f172a !important;
}

[data-theme="light"] .text-brand {
  color: #eb5d1e !important;
}

[data-theme="light"] .bg-night,
[data-theme="light"] .bg-0c1221,
[data-theme="light"] .bg-0e172a,
[data-theme="light"] .bg-0b1120,
[data-theme="light"] .bg-0b0f1a,
[data-theme="light"] .bg-090c15,
[data-theme="light"] .bg-080b12,
[data-theme="light"] .bg-080d16,
[data-theme="light"] .bg-0a0d16,
[data-theme="light"] .bg-\[\#0c1221\],
[data-theme="light"] .bg-\[\#0b0f1a\],
[data-theme="light"] .bg-\[\#0a0d16\] {
  background-color: #f7f9fc !important;
}

[data-theme="light"] .bg-white\/5,
[data-theme="light"] .bg-white\/10,
[data-theme="light"] .bg-white\/15 {
  background-color: rgba(255, 255, 255, 0.85) !important;
}

[data-theme="light"] .bg-night\/70,
[data-theme="light"] .bg-midnight\/70,
[data-theme="light"] .bg-night\/60 {
  background-color: rgba(255, 255, 255, 0.92) !important;
}

[data-theme="light"] .border-white\/10,
[data-theme="light"] .border-white\/5,
[data-theme="light"] .border-white\/15 {
  border-color: rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .shadow-glow {
  box-shadow: 0 10px 30px rgba(235, 93, 30, 0.18);
}

[data-theme="light"] #hero .text-fog,
[data-theme="light"] #hero .text-slate-300 {
  color: #334155 !important;
}

[data-theme="light"] footer {
  border-color: rgba(15, 23, 42, 0.08);
}

/* Section backgrounds for light mode */
[data-theme="light"] #hero {
  background: radial-gradient(circle at 20% 20%, rgba(235, 93, 30, 0.18), transparent 35%), radial-gradient(circle at 80% 0%, rgba(235, 93, 30, 0.12), transparent 30%), linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
  color: #0f172a;
}

/* Light mode hero override for Nyaraka page */
[data-theme="light"] #nyaraka-hero {
  background: radial-gradient(circle at 20% 20%, rgba(235, 93, 30, 0.16), transparent 35%), radial-gradient(circle at 80% 0%, rgba(235, 93, 30, 0.1), transparent 30%), linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
  color: #0f172a;
}

[data-theme="light"] #about,
[data-theme="light"] #services,
[data-theme="light"] #solutions,
[data-theme="light"] #case-studies,
[data-theme="light"] #process,
[data-theme="light"] #contact {
  background: #f7f9fc;
}

[data-theme="light"] footer {
  background: #f1f5f9;
}

[data-theme="light"] footer > div {
  border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .rounded-3xl.bg-white\/5,
[data-theme="light"] .rounded-2xl.bg-white\/5 {
  background: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="light"] .rounded-3xl.bg-white\/5 .text-fog,
[data-theme="light"] .rounded-2xl.bg-white\/5 .text-fog {
  color: #475569 !important;
}

[data-theme="light"] .border-white\/10,
[data-theme="light"] .border-white\/5 {
  border-color: rgba(148, 163, 184, 0.35) !important;
}

/* Light theme adjustments for header */
[data-theme="light"] header {
  background-color: rgba(247, 249, 252, 0.94);
  color: #0f172a;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

[data-theme="light"] header a {
  color: #0f172a;
}

[data-theme="light"] header a:hover {
  color: #eb5d1e;
}

[data-theme="light"] header a.bg-brand,
[data-theme="light"] header a.bg-brand:hover {
  color: #0b1021 !important;
}

/* Handle arbitrary dark backgrounds from Tailwind-style classes */
[data-theme="light"] [class*="bg-[#0c1221]"],
[data-theme="light"] [class*="bg-[#0e172a]"],
[data-theme="light"] [class*="bg-[#0b1120]"],
[data-theme="light"] [class*="bg-[#0b0f1a]"],
[data-theme="light"] [class*="bg-[#090c15]"],
[data-theme="light"] [class*="bg-[#080b12]"],
[data-theme="light"] [class*="bg-[#080d16]"],
[data-theme="light"] [class*="bg-[#0a0d16]"],
[data-theme="light"] [class*="bg-night"],
[data-theme="light"] [class*="bg-midnight"] {
  background-color: #f7f9fc !important;
}

/* Handle gradient backgrounds in light mode */
[data-theme="light"] [class*="bg-gradient-to-b"] {
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%) !important;
}

[data-theme="light"] section {
  color: #0f172a;
}

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4 {
  color: #0f172a;
}

[data-theme="light"] .rounded-3xl.bg-white\/5,
[data-theme="light"] .rounded-2xl.bg-white\/5,
[data-theme="light"] .rounded-2xl.bg-night\/70,
[data-theme="light"] .rounded-2xl.bg-midnight\/70,
[data-theme="light"] .rounded-2xl.bg-night\/60 {
  background: rgba(255, 255, 255, 0.94) !important;
}

[data-theme="light"] .rounded-3xl.bg-white\/5 h3,
[data-theme="light"] .rounded-2xl.bg-white\/5 h3,
[data-theme="light"] .rounded-2xl.bg-night\/70 h3,
[data-theme="light"] .rounded-2xl.bg-midnight\/70 h3,
[data-theme="light"] .rounded-2xl.bg-night\/60 h3 {
  color: #0f172a;
}

[data-theme="light"] .text-slate-300,
[data-theme="light"] .text-fog,
[data-theme="light"] .text-slate-300 *,
[data-theme="light"] .text-fog * {
  color: #475569 !important;
}

[data-theme="light"] .shadow-glow {
  box-shadow: 0 10px 24px rgba(235, 93, 30, 0.15);
}

[data-theme="light"] .scroll-top {
  background: #0f172a;
  color: #f8fafc;
}

/* Theme toggle buttons */
#theme-toggle,
#theme-toggle-mobile {
  color: #e9edf5;
}

[data-theme="light"] #theme-toggle,
[data-theme="light"] #theme-toggle-mobile {
  color: #0f172a;
  background-color: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
}

[data-theme="light"] #theme-toggle svg,
[data-theme="light"] #theme-toggle-mobile svg {
  stroke: #0f172a;
}

/* Scroll-to-top positioning */
.scroll-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: #0b1021;
  z-index: 60;
}

[data-theme="light"] .scroll-top {
  border-color: rgba(15, 23, 42, 0.12);
  background: #0f172a;
  color: #f8fafc;
}

/* Footer social links visibility in light mode */
[data-theme="light"] footer a {
  color: #0f172a;
}

[data-theme="light"] footer a:hover {
  color: #eb5d1e;
}

.section-shell {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.35);
}

.badge-soft {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(235, 93, 30, 0.12);
  color: #eb5d1e;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
}

.card-grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.text-glow {
  text-shadow: 0 0 24px rgba(235, 93, 30, 0.35);
}

/* Hero accents */
.hero-glow {
  background:
    radial-gradient(circle at 15% 20%, rgba(235, 93, 30, 0.35), transparent 35%),
    radial-gradient(circle at 85% 10%, rgba(255, 255, 255, 0.15), transparent 35%),
    radial-gradient(circle at 30% 70%, rgba(235, 93, 30, 0.25), transparent 30%),
    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.14), transparent 30%);
  filter: blur(40px);
}

.hero-circuit path {
  stroke-dasharray: 10 8;
  animation: dashFlow 12s linear infinite;
}

.hero-circuit circle {
  filter: drop-shadow(0 0 8px var(--circuit-glow));
  animation: nodePulse 3s ease-in-out infinite;
}

.section-circuit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.65;
  mix-blend-mode: screen;
  z-index: 0;
}

[data-theme="light"] .section-circuit {
  opacity: 0.9;
  mix-blend-mode: normal;
}

.section-circuit svg {
  position: absolute;
  inset: 0;
}

.section-circuit path {
  stroke: var(--brand);
  stroke-opacity: 0.85;
  filter: drop-shadow(0 0 12px var(--circuit-glow));
  stroke-width: 1.1;
  fill: none;
  stroke-dasharray: 14 10;
  stroke-linecap: round;
  animation: dashFlow 16s linear infinite;
}

.section-circuit circle {
  stroke: var(--circuit-glow);
  fill: none;
  filter: drop-shadow(0 0 8px var(--circuit-glow));
  animation: nodePulse 4s ease-in-out infinite;
}

/* Creative overlays per section */
.beam-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(235,93,30,0.18) 0%, transparent 45%),
    linear-gradient(240deg, rgba(255,255,255,0.08) 0%, transparent 35%);
  mix-blend-mode: screen;
  opacity: 0.8;
  pointer-events: none;
}

.grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(235,93,30,0.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(235,93,30,0.08) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.45;
  mix-blend-mode: normal;
  pointer-events: none;
}

.dots-overlay {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(235,93,30,0.25) 2px, transparent 3px);
  background-size: 60px 60px;
  opacity: 0.55;
  mix-blend-mode: normal;
  pointer-events: none;
}

.timeline-overlay {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, rgba(235,93,30,0.45), rgba(235,93,30,0));
  box-shadow: 0 0 24px rgba(235,93,30,0.35);
  transform: translateX(-50%);
  opacity: 0.85;
  pointer-events: none;
}

.mesh-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(235,93,30,0.18), transparent 35%),
    radial-gradient(circle at 80% 20%, rgba(235,93,30,0.12), transparent 32%),
    radial-gradient(circle at 50% 80%, rgba(255,255,255,0.12), transparent 38%);
  filter: blur(18px);
  opacity: 0.8;
  mix-blend-mode: normal;
  pointer-events: none;
}

/* Scroll-to-top visibility/animation */
.scroll-top {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.scroll-top.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.scroll-top:hover {
  transform: translateY(-2px) scale(1.02);
}

/* Active navigation link styling */
nav a.active {
  color: #eb5d1e !important;
}

nav button.active {
  color: #eb5d1e !important;
}

[data-theme="light"] nav a.active {
  color: #eb5d1e !important;
}

[data-theme="light"] nav button.active {
  color: #eb5d1e !important;
}

/* Simple entrance animations */
.animate-fade-up {
  opacity: 0;
  transform: translateY(14px);
}

.animate-fade-up.start {
  animation: fadeUp 0.9s ease forwards;
}

.animate-fade-in {
  opacity: 0;
}

.animate-fade-in.start {
  animation: fadeIn 0.9s ease forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* Hide background effects only on the About section in dark mode */
[data-theme="dark"] #about .section-circuit,
[data-theme="dark"] #about .beam-overlay,
[data-theme="dark"] #about .grid-overlay,
[data-theme="dark"] #about .dots-overlay,
[data-theme="dark"] #about .mesh-overlay,
[data-theme="dark"] #about .timeline-overlay {
  display: none !important;
}

/* Capability cards (About) */
#about .capability-card {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="light"] #about .capability-card {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #0f172a;
}

[data-theme="light"] #about .capability-card p {
  color: #334155 !important;
}

[data-theme="light"] #about .capability-card .text-white {
  color: #0f172a !important;
}

[data-theme="light"] #about .capability-card .text-slate-300 {
  color: #475569 !important;
}
.circuit-overlay {
  position: absolute;
  inset: -12%;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
}

[data-theme="light"] .circuit-overlay {
  mix-blend-mode: screen;
  opacity: 0.85;
}

.circuit-overlay .glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, var(--circuit-stroke), transparent 35%),
    radial-gradient(circle at 85% 10%, var(--circuit-backdrop), transparent 35%),
    radial-gradient(circle at 30% 70%, var(--circuit-stroke), transparent 30%),
    radial-gradient(circle at 80% 80%, var(--circuit-backdrop), transparent 30%);
  filter: blur(48px);
  opacity: 0.35;
}

.circuit-overlay .particles {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, var(--circuit-glow) 2px, transparent 2px),
    radial-gradient(circle, var(--circuit-stroke) 1.4px, transparent 2px);
  background-size: 260px 260px, 210px 210px;
  background-position: 0 0, 80px 60px;
  mix-blend-mode: screen;
  opacity: 0.35;
  animation: driftA 28s linear infinite, driftB 22s linear infinite reverse;
}

.circuit-overlay svg {
  position: absolute;
  inset: 0;
  opacity: 0.4;
}

.circuit-overlay svg path {
  stroke: var(--circuit-stroke);
  stroke-dasharray: 12 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: dashFlow 16s linear infinite;
}

.circuit-overlay svg circle {
  fill: none;
  stroke: var(--circuit-glow);
  filter: drop-shadow(0 0 10px var(--circuit-glow));
  animation: nodePulse 4s ease-in-out infinite;
}

.lines-only,
.lines-only * {
  display: none !important;
}

.hero-dust .particles {
  opacity: 0.5;
}

/* Side circuit rails removed */

@keyframes dashFlow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -140; }
}

@keyframes nodePulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.25); opacity: 1; }
}

@keyframes driftA {
  from { background-position: 0 0, 60px 40px; }
  to { background-position: 220px 220px, 280px 200px; }
}

@keyframes driftB {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-20px, -20px, 0); }
}
[data-theme="light"] a {
  color: #0f172a;
}

[data-theme="light"] a:hover {
  color: #eb5d1e;
}

/* Brand-filled buttons must keep readable dark text in light mode. Without
   this, the blanket "a:hover -> brand orange" rule above turns the label
   orange on an orange button, making it vanish on hover. */
[data-theme="light"] a.bg-brand,
[data-theme="light"] a.bg-brand:hover,
[data-theme="light"] button.bg-brand,
[data-theme="light"] button.bg-brand:hover {
  color: #0b1021 !important;
}

/* w-fit is not in the committed (stale) Tailwind build, so a flex-column child
   like the "Recommended" pill stretches full width. Provide the utility. */
.w-fit {
  width: fit-content;
}

/* === Technical tracking labels === */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  font-family: "Satoshi", "Manrope", monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--mist);
}

.section-label .mark {
  color: var(--brand);
  font-weight: 700;
}

[data-theme="light"] .section-label {
  color: #475569;
}

/* === Asymmetrical bento grid === */
.bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .bento-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: minmax(150px, auto);
  }
  .bento-2 { grid-column: span 2; }
  .bento-3 { grid-column: span 3; }
  .bento-4 { grid-column: span 4; }
  .bento-6 { grid-column: span 6; }
  .bento-tall { grid-row: span 2; }
}

.bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.05);
  padding: 1.75rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-card:hover {
  transform: translateY(-4px);
  border-color: rgba(235, 93, 30, 0.32);
  box-shadow: 0 20px 60px rgba(235, 93, 30, 0.25);
}

.bento-card--brand {
  background:
    linear-gradient(140deg, rgba(235, 93, 30, 0.16), rgba(235, 93, 30, 0.02) 55%),
    rgba(255, 255, 255, 0.04);
  border-color: rgba(235, 93, 30, 0.24);
}

.bento-card--brand::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 0%, rgba(235, 93, 30, 0.22), transparent 45%);
  pointer-events: none;
}

[data-theme="light"] .bento-card {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #0f172a;
}

[data-theme="light"] .bento-card--brand {
  background:
    linear-gradient(140deg, rgba(235, 93, 30, 0.10), rgba(255, 255, 255, 0) 55%),
    #ffffff;
  border-color: rgba(235, 93, 30, 0.30);
}

[data-theme="light"] .bento-card .text-white { color: #0f172a !important; }
[data-theme="light"] .bento-card .text-slate-300 { color: #475569 !important; }

/* ============================================================
   2026 editorial system: grain, dot grid, orb, marquee,
   timeline, tags. Brand tokens only, Clash + Satoshi type.
   ============================================================ */

/* --- 3% grain overlay across the whole site --- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

[data-theme="light"] body::after { opacity: 0.025; }

/* --- 40px dot grid for section backgrounds --- */
.dot-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(199, 210, 229, 0.10) 1px, transparent 1.4px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 35%, transparent 78%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 35%, transparent 78%);
}

[data-theme="light"] .dot-grid::before {
  background-image: radial-gradient(rgba(15, 23, 42, 0.10) 1px, transparent 1.4px);
}

/* --- Soft pulsing glow orbs (section ambience) --- */
.glow-orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(70px);
  pointer-events: none;
  background: radial-gradient(circle, rgba(235, 93, 30, 0.30), transparent 65%);
  animation: pulseGlow 9s ease-in-out infinite;
}

.glow-orb--mist {
  background: radial-gradient(circle, rgba(199, 210, 229, 0.16), transparent 65%);
  animation-duration: 11s;
}

[data-theme="light"] .glow-orb { opacity: 0.5; }

/* --- Hero gradient headline (brand -> mist, on-brand) --- */
.text-gradient {
  background: linear-gradient(115deg, var(--brand) 0%, #f08a4b 45%, #f6c79f 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* On a light canvas the warm end of the gradient washes out, so darken it. */
[data-theme="light"] .text-gradient {
  background: linear-gradient(115deg, var(--brand) 0%, #b8431a 60%, var(--night) 100%);
  -webkit-background-clip: text;
          background-clip: text;
}

/* --- "Available" eyebrow with 48px rule --- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--mist);
}

.eyebrow::before {
  content: "";
  width: 48px;
  height: 2px;
  background: var(--brand);
  border-radius: 2px;
}

[data-theme="light"] .eyebrow { color: #475569; }

/* ============================================================
   Interactive visual orb
   ============================================================ */
.orb {
  position: relative;
  width: min(384px, 78vw);
  aspect-ratio: 1 / 1;
  max-width: 100%;
  margin-inline: auto;
}

.orb-glow {
  position: absolute;
  inset: -8%;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(235, 93, 30, 0.28), transparent 60%);
  filter: blur(46px);
  animation: pulseGlow 6s ease-in-out infinite;
}

.orb-ring {
  position: absolute;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.orb-ring--outer { inset: 0;      animation: spin-slow 30s linear infinite; }
.orb-ring--mid   { inset: 11.5%;  border-color: rgba(235, 93, 30, 0.18); animation: spin-slow 24s linear infinite reverse; }
.orb-ring--inner { inset: 24%;    border-color: rgba(255, 255, 255, 0.05); animation: spin-slow 18s linear infinite; }

.orb-ring--mid::before,
.orb-ring--outer::before {
  content: "";
  position: absolute;
  top: -3px;
  left: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--brand);
  box-shadow: 0 0 12px rgba(235, 93, 30, 0.8);
}

.orb-core {
  position: absolute;
  inset: 35.4%;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.08), transparent 60%),
    var(--night);
  border: 1px solid rgba(235, 93, 30, 0.40);
  box-shadow: 0 0 50px rgba(235, 93, 30, 0.30), inset 0 0 22px rgba(0, 0, 0, 0.55);
}

.orb-core img {
  width: 56px;
  height: 56px;
  max-width: 56%;
  max-height: 56%;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

[data-theme="light"] .orb-core {
  background: radial-gradient(circle at 30% 25%, #ffffff, #eef2f7 70%);
  border-color: rgba(235, 93, 30, 0.42);
  box-shadow: 0 0 40px rgba(235, 93, 30, 0.22), inset 0 0 18px rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .orb-core img { filter: none; }

.orb-icon {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.orb-icon svg { width: 22px; height: 22px; }

.orb-icon--top    { top: -6px;  left: calc(50% - 24px); animation: float1 6s ease-in-out infinite; }
.orb-icon--right  { right: -6px; top: calc(50% - 24px); animation: float2 7s ease-in-out infinite; }
.orb-icon--bottom { bottom: -6px; left: calc(50% - 24px); animation: float3 6.5s ease-in-out infinite; }
.orb-icon--left   { left: -6px;  top: calc(50% - 24px); animation: float4 7.5s ease-in-out infinite; }

[data-theme="light"] .orb-ring--outer,
[data-theme="light"] .orb-ring--inner { border-color: rgba(15, 23, 42, 0.14); }

/* Anchored in-page links must clear the fixed header. */
section[id] { scroll-margin-top: 96px; }
[data-theme="light"] .orb-icon {
  background: rgba(255, 255, 255, 0.92);
  border-color: #e2e8f0;
  color: #0f172a;
}

@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes pulseGlow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 0.9; transform: scale(1.06); }
}
@keyframes float1 { 0%, 100% { transform: translateY(0); }     50% { transform: translateY(-11px); } }
@keyframes float2 { 0%, 100% { transform: translateX(0); }     50% { transform: translateX(9px); } }
@keyframes float3 { 0%, 100% { transform: translateY(0); }     50% { transform: translateY(11px); } }
@keyframes float4 { 0%, 100% { transform: translateX(0); }     50% { transform: translateX(-9px); } }

/* ============================================================
   Skill marquee
   ============================================================ */
.marquee {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex-shrink: 0;
  min-width: 100%;
  padding-right: 2.5rem;
  animation: marquee 25s linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  color: var(--mist);
}

.marquee__item .dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--brand);
}

.marquee__item:nth-child(even) .dot { background: var(--mist); }

[data-theme="light"] .marquee__item { color: #475569; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   Pill tags
   ============================================================ */
.tech-tag {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.06);
  color: var(--mist);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="light"] .tech-tag { background: #eef2f7; color: #475569; }

/* ============================================================
   Vertical experience timeline
   ============================================================ */
.timeline { position: relative; }

.timeline-item {
  position: relative;
  padding-left: 2.25rem;
  padding-bottom: 2.5rem;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.10);
}

.timeline-item:last-child::before { display: none; }

[data-theme="light"] .timeline-item::before { background: rgba(15, 23, 42, 0.12); }

.timeline-dot {
  position: absolute;
  left: 0;
  top: 4px;
  width: 13px;
  height: 13px;
  border-radius: 9999px;
  background: var(--brand);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-item:hover .timeline-dot {
  transform: scale(1.45);
  box-shadow: 0 0 18px rgba(235, 93, 30, 0.75);
}

/* ============================================================
   Header micro-interactions
   ============================================================ */
.logo-badge { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
a:hover > .logo-badge { transform: rotate(12deg); }

.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  height: 1.5px;
  width: 0;
  background: var(--brand);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link:hover::after { width: 100%; }

/* --- Contact info cards + social squares --- */
.contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 2rem 1.5rem;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-card:hover {
  transform: translateY(-4px);
  border-color: rgba(235, 93, 30, 0.32);
}

[data-theme="light"] .contact-card { background: #ffffff; border-color: #e2e8f0; }

.social-square {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  color: var(--mist);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.social-square:hover {
  color: var(--brand);
  transform: translateY(-3px);
  border-color: rgba(235, 93, 30, 0.4);
}

[data-theme="light"] .social-square { background: #ffffff; border-color: #e2e8f0; color: #475569; }

/* Respect reduced-motion: kill the continuous loops */
@media (prefers-reduced-motion: reduce) {
  .orb-ring, .orb-icon, .glow-orb, .orb-glow, .marquee__track { animation: none !important; }
}

/* ============================================================
   AI-tell sweep (2026-06-26)
   Eliminate gradients (radial + decorative linear) and pulsing
   "status dot" glows. Brand colour stays via flat fills. Functional
   gradients (marquee edge-fade mask, text mask) are preserved.
   ============================================================ */

/* Kill ambience overlays */
.glow-orb,
.glow-orb--mist,
.orb-glow,
.hero-glow,
.hero-circuit,
.section-circuit,
.circuit-overlay,
.beam-overlay,
.grid-overlay,
.dots-overlay,
.mesh-overlay,
.timeline-overlay {
  display: none !important;
}

/* Kill body grain noise (subtle but still texture) */
body::after { content: none !important; background-image: none !important; }

/* Dot-grid background pattern -> off */
.dot-grid::before { display: none !important; }

/* Headline brand text: flat brand colour, no gradient */
.text-gradient,
[data-theme="light"] .text-gradient {
  background: none !important;
  -webkit-background-clip: border-box !important;
          background-clip: border-box !important;
  color: var(--brand) !important;
}

/* Section shell card: flat */
.section-shell {
  background: rgba(255, 255, 255, 0.04) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25) !important;
}

/* Bento brand-tinted card: flat tint, no radial wash */
.bento-card--brand {
  background: rgba(235, 93, 30, 0.08) !important;
  border-color: rgba(235, 93, 30, 0.28) !important;
}
.bento-card--brand::after { content: none !important; background: none !important; }
[data-theme="light"] .bento-card--brand {
  background: rgba(235, 93, 30, 0.06) !important;
}

/* Bento hover: drop the orange glow shadow, keep lift + border */
.bento-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22) !important;
}

/* Orb core: flat night, no radial highlight */
.orb-core {
  background: var(--night) !important;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.45) !important;
}
[data-theme="light"] .orb-core {
  background: #ffffff !important;
  box-shadow: inset 0 0 14px rgba(15, 23, 42, 0.06) !important;
}

/* Orb rings: kill rotation + the orange dot satellites */
.orb-ring,
.orb-ring--outer,
.orb-ring--mid,
.orb-ring--inner { animation: none !important; }
.orb-ring--mid::before,
.orb-ring--outer::before { content: none !important; box-shadow: none !important; background: transparent !important; }

/* Orb floating icons: stop bobbing */
.orb-icon,
.orb-icon--top,
.orb-icon--right,
.orb-icon--bottom,
.orb-icon--left { animation: none !important; }

/* Timeline dot hover: keep scale, drop the brand glow */
.timeline-item:hover .timeline-dot { box-shadow: none !important; }

/* Light-mode hero gradients -> flat paper */
[data-theme="light"] #hero,
[data-theme="light"] #nyaraka-hero {
  background: #f7f9fc !important;
}

/* Light-mode catch-all for Tailwind gradient utilities */
[data-theme="light"] [class*="bg-gradient-to-b"],
[data-theme="light"] [class*="bg-gradient-to-r"],
[data-theme="light"] [class*="bg-gradient-to-l"] {
  background-image: none !important;
  background-color: #f7f9fc !important;
}

/* Dark-mode catch-all: neutralise any lingering gradient utilities to
   the night base. Templates have been edited to flat bg-* classes, this
   is the defensive backstop so a missed class still renders flat. */
[data-theme="dark"] [class*="bg-gradient-to-b"],
:root:not([data-theme="light"]) [class*="bg-gradient-to-b"] {
  background-image: none !important;
}

/* Strip the pulsing ping ring sometimes used beside the "live" dot */
.ai-tell-ping { display: none !important; }

/* ============================================================
   AI-tell sweep pass 2 (2026-07-03) — mobile parity
   Desktop had already been cleaned, mobile still leaked
   glassmorphism (frosted header/drawer, blurred orb-icon tiles)
   and status-dot bullets. This block flattens both.
   ============================================================ */

/* Fixed header: solid night, no frosted glass */
header.fixed { background-color: var(--night) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
header.fixed .backdrop-blur-lg,
header.fixed .backdrop-blur-md,
header.fixed .backdrop-blur-sm { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* Mobile drawer: opaque panel, no blur */
#mobile-menu { background-color: var(--night) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
[data-theme="light"] header.fixed,
[data-theme="light"] #mobile-menu { background-color: #ffffff !important; }

/* Nyaraka features dropdown: flat panel */
header.fixed .group .rounded-xl.bg-night\/95 { background-color: var(--night) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* Orb-icons: drop the frosted-glass background, keep icon glyph */
.orb-icon {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  box-shadow: none !important;
}
[data-theme="light"] .orb-icon {
  background: transparent !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
}

/* Marquee tech-stack bullet dots: read as status dots, kill them */
.marquee__item .dot,
.marquee__item:nth-child(even) .dot { display: none !important; }

/* Dead brand text-glow class: no callers, but neutralise the shadow */
.text-glow { text-shadow: none !important; }

/* Light-mode CTA lift shadow: kill the residual brand tint */
[data-theme="light"] .shadow-glow { box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12) !important; }

/* Feature/hero drop-shadow-* Tailwind utilities with brand tint (defensive) */
[class*="drop-shadow-[0_0_8px_rgba(235"] { filter: none !important; }