/* ============ CTA 3D MOUNT ============ */
#cta-3d {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .65;
  mix-blend-mode: screen;
}
html.light #cta-3d {
  opacity: .45;
  mix-blend-mode: multiply;
}

#cta-3d canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Make sure CTA content sits in front of the 3D scene */
#cta > .max-w-\[1100px\] { position: relative; z-index: 2; }

/* ============ NAV STRENGTHEN (override base) ============ */
html.dark  { --nav-bg: rgba(8, 10, 22, 0.92);  --nav-border: rgba(255,255,255,.18); }
html.light { --nav-bg: rgba(255,255,255,0.94); --nav-border: rgba(10,12,28,.14); }

#nav { z-index: 90; }
#navInner {
  background: var(--nav-bg) !important;
  border: 1px solid var(--nav-border) !important;
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 30px 60px -28px rgba(0,0,0,.6);
}
html.light #navInner {
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 20px 50px -24px rgba(10,12,28,.20);
}
.nav-link { font-weight: 500; letter-spacing: -0.005em; }

/* Make sure loader doesn't outlive its welcome */
#loader.done { pointer-events: none; }

/* Home welcome popup (once per session) */
#homeWelcomeModal.is-open {
  display: flex;
}
body.home-welcome-popup-open {
  overflow: hidden;
}

  /* ============ THEME VARIABLES ============ */
  html.dark {
    --bg: #05060f;
    --bg-elev: #0a0c1c;
    --ink: #e7e9f5;
    --ink-soft: rgba(231,233,245,.75);
    --ink-mute: rgba(231,233,245,.55);
    --ink-faint: rgba(231,233,245,.40);
    --line: rgba(255,255,255,.07);
    --line-strong: rgba(255,255,255,.14);
    --glass-from: rgba(255,255,255,.05);
    --glass-to: rgba(255,255,255,.015);
    --glass-strong-from: rgba(18,21,45,.85);
    --glass-strong-to: rgba(10,12,28,.85);
    --nav-bg: rgba(8, 10, 22, 0.92);
    --nav-border: rgba(255,255,255,.18);
    --grid-dot: rgba(255,255,255,.08);
    --vignette: #05060f;
    --orb-1: rgba(91,140,255,.55);
    --orb-2: rgba(167,139,250,.40);
    --orb-3: rgba(59,86,168,.35);
    --btn-primary-from: #ffffff;
    --btn-primary-to: #d9def0;
    --btn-primary-ink: #0a0c1c;
    --btn-ghost-ink: #cfd5ff;
    --btn-ghost-border: rgba(255,255,255,.12);
    --btn-ghost-bg: rgba(255,255,255,.02);
    --pill-bg: rgba(255,255,255,.03);
    --code-bg: rgba(255,255,255,.02);
    --blue: #5b8cff;
    --violet: #a78bfa;
    --pink: #e6a3ff;
    --accent: #7c5cff;
  }
  html.light {
    --bg: #f4f2ec;
    --bg-elev: #ffffff;
    --ink: #0a0c1c;
    --ink-soft: rgba(10,12,28,.78);
    --ink-mute: rgba(10,12,28,.58);
    --ink-faint: rgba(10,12,28,.42);
    --line: rgba(10,12,28,.08);
    --line-strong: rgba(10,12,28,.14);
    --glass-from: rgba(255,255,255,.75);
    --glass-to: rgba(255,255,255,.45);
    --glass-strong-from: rgba(255,255,255,.92);
    --glass-strong-to: rgba(248,246,239,.92);
    --nav-bg: rgba(255,255,255,0.94);
    --nav-border: rgba(10,12,28,.14);
    --grid-dot: rgba(10,12,28,.10);
    --vignette: #f4f2ec;
    --orb-1: rgba(91,140,255,.30);
    --orb-2: rgba(167,139,250,.25);
    --orb-3: rgba(124,192,255,.25);
    --btn-primary-from: #0a0c1c;
    --btn-primary-to: #1c2040;
    --btn-primary-ink: #ffffff;
    --btn-ghost-ink: #0a0c1c;
    --btn-ghost-border: rgba(10,12,28,.16);
    --btn-ghost-bg: rgba(10,12,28,.03);
    --pill-bg: rgba(255,255,255,.55);
    --code-bg: rgba(10,12,28,.04);
    --blue: #3661e6;
    --violet: #7c4ee6;
    --pink: #c248d0;
    --accent: #5b3ee0;
  }
  html, body { background: var(--bg); color: var(--ink); transition: background-color .5s ease, color .5s ease; }
  body { font-family: 'Manrope', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
  ::selection { background: rgba(91,140,255,.35); color: var(--ink); }

  /* Editorial display type */
  .display { font-family: 'Instrument Serif', serif; font-weight: 400; letter-spacing: -.02em; line-height: .95; }
  html.dark .display em { font-style: italic; color: #cfd5ff; }
  html.light .display em { font-style: italic; color: #3a4180; }
  .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .02em; }

  /* Subtle grain */
  .grain::after{
    content:""; position:absolute; inset:0; pointer-events:none; opacity:.06; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }

  /* Layered gradient mesh */
  .mesh::before{
    content:""; position:absolute; inset:-20% -10% 0 -10%; z-index:0; pointer-events:none;
    background:
      radial-gradient(40% 30% at 20% 10%, rgba(91,140,255,.35), transparent 60%),
      radial-gradient(35% 30% at 80% 20%, rgba(167,139,250,.30), transparent 60%),
      radial-gradient(30% 25% at 60% 70%, rgba(230,163,255,.20), transparent 60%);
    filter: blur(40px);
  }

  /* Glass cards */
  .glass {
    background: linear-gradient(180deg, var(--glass-from), var(--glass-to));
    border: 1px solid var(--line);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .glass-strong { background: linear-gradient(180deg, var(--glass-strong-from), var(--glass-strong-to)); border:1px solid var(--line-strong); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  html.light .glass-strong { box-shadow: 0 30px 80px -50px rgba(10,12,28,.25); }

  /* Hairline divider */
  html.dark .hairline { background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); height:1px; }
  html.light .hairline { background: linear-gradient(90deg, transparent, rgba(10,12,28,.18), transparent); height:1px; }

  /* Glow border */
  .ring-glow { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 30px 80px -40px rgba(91,140,255,.45); }

  /* Buttons */
  .btn { position:relative; display:inline-flex; align-items:center; gap:.55rem; padding:.8rem 1.15rem; border-radius:999px; font-weight:500; font-size: 14px; transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease, box-shadow .35s ease; white-space:nowrap; }
  .btn-primary { background: linear-gradient(180deg, var(--btn-primary-from), var(--btn-primary-to)); color: var(--btn-primary-ink); border:1px solid var(--line-strong); }
  .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -10px rgba(91,140,255,.35); }
  .btn-ghost { color: var(--btn-ghost-ink); border:1px solid var(--btn-ghost-border); background: var(--btn-ghost-bg); }
  .btn-ghost:hover { background: var(--code-bg); border-color: var(--line-strong); }

  /* Underline hover */
  .nav-link { position:relative; }
  .nav-link::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:linear-gradient(90deg,#5b8cff,#a78bfa); transform: scaleX(0); transform-origin:left; transition: transform .35s ease; }
  .nav-link:hover::after, .nav-link[data-active="true"]::after { transform: scaleX(1); }

  /* Tag pill */
  .pill { display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .75rem; border-radius:999px; border:1px solid var(--line-strong); background: var(--pill-bg); font-size:12px; color: var(--ink-soft); backdrop-filter: blur(8px); }
  .pill .dot { width:6px; height:6px; border-radius:999px; background: var(--blue); box-shadow:0 0 12px var(--blue); }

  /* Reveal */
  .reveal { opacity:0; transform: translateY(24px); }

  /* Particles canvas (handled in JS), neural svg */
  .neural line, .neural circle { vector-effect: non-scaling-stroke; }

  /* FAQ */
  details > summary { list-style:none; cursor:pointer; }
  details > summary::-webkit-details-marker { display:none; }
  details[open] .chev { transform: rotate(45deg); }
  .chev { transition: transform .35s ease; }

  /* Dotted grid */
  .dots {
    background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px);
    background-size: 22px 22px;
  }

  /* Loader */
  #loader { position:fixed; inset:0; z-index:100; background: var(--bg); display:flex; align-items:center; justify-content:center; transition: opacity .8s ease, visibility .8s; }
  #loader.done { opacity:0; visibility:hidden; }
  .loader-bar { width:160px; height:1px; background:rgba(255,255,255,.1); position:relative; overflow:hidden; }
  .loader-bar::after { content:""; position:absolute; inset:0; width:30%; background:linear-gradient(90deg,#5b8cff,#a78bfa,#e6a3ff); animation: slide 1.2s ease-in-out infinite; }
  @keyframes slide { 0%{ left:-30% } 100%{ left:100% } }

  /* Card lift */
  .lift { transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, border-color .45s ease; }
  .lift:hover { transform: translateY(-4px); border-color: rgba(123,140,255,.35); box-shadow: 0 30px 80px -40px rgba(91,140,255,.55); }

  /* Floating orbs */
  .orb { position:absolute; border-radius:999px; filter: blur(60px); opacity:.55; pointer-events:none; }

  /* Bento card */
  .bento { background: linear-gradient(180deg, var(--glass-strong-from), var(--glass-strong-to)); border:1px solid var(--line); position:relative; overflow:hidden; backdrop-filter: blur(14px); }
  .bento:hover { border-color: rgba(91,140,255,.35); }

  /* Scrolling marquee */
  .marquee { mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); }
  .marquee-track { animation: marq 40s linear infinite; }
  @keyframes marq { 0%{ transform: translateX(0) } 100%{ transform: translateX(-50%) } }

  /* Active concept chip pulse */
  @keyframes pulseDot { 0%, 100% { opacity:.4 } 50%{ opacity:1 } }
  .pulseDot { animation: pulseDot 2.2s ease-in-out infinite; }

  /* Progress dash */
  .dashline { stroke-dasharray: 6 8; }

  /* Hide scrollbar where needed */
  .no-scrollbar::-webkit-scrollbar { display:none; }
  .no-scrollbar { scrollbar-width:none; }

  /* Mobile nav drawer */
  #drawer { transform: translateX(100%); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
  #drawer.open { transform: translateX(0); }

  /* Section label */
  .label { font-family:'JetBrains Mono',monospace; font-size:11px; color: var(--ink-mute); letter-spacing:.18em; text-transform:uppercase; }

  /* Contact / form fields */
  .form-field {
    width: 100%;
    border-radius: 0.75rem;
    background: transparent;
    padding: 0.75rem 1rem;
    font-size: 14px;
    outline: none;
    color: var(--ink);
    border: 1px solid var(--line-strong);
    transition: border-color .25s ease, box-shadow .25s ease;
  }
  .form-field::placeholder { color: var(--ink-mute); }
  .form-field:focus {
    border-color: rgba(91,140,255,.45);
    box-shadow: 0 0 0 3px rgba(91,140,255,.12);
  }
  textarea.form-field { resize: vertical; min-height: 140px; }
  .form-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-bottom: 0.5rem;
    color: var(--ink-soft);
  }

  @keyframes contactFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }
  .contact-float-slow {
    animation: contactFloat 6s ease-in-out infinite;
  }

  /* Inline color helpers driven by theme */
  .t-ink { color: var(--ink); }
  .t-soft { color: var(--ink-soft); }
  .t-mute { color: var(--ink-mute); }
  .t-faint { color: var(--ink-faint); }
  .bg-elev { background: var(--bg-elev); }
  .bd-line { border-color: var(--line); }
  .bd-line-strong { border-color: var(--line-strong); }

  /* Light-mode adjustments for things that were hard-coded white */
  html.light .neural circle { filter: saturate(1.2); }
  html.light .ring-glow { box-shadow: inset 0 0 0 1px rgba(10,12,28,.06), 0 30px 80px -40px rgba(91,140,255,.30); }
  html.light .shadow-glow { box-shadow: 0 0 0 1px rgba(10,12,28,.08), 0 20px 60px -20px rgba(91,140,255,.20) !important; }
  html.light .pulseDot { box-shadow: 0 0 0 0 rgba(91,140,255,.0); }
  html.light #particles { opacity:.45; }

  /* Theme toggle */
  .theme-toggle { position:relative; width:56px; height:28px; border-radius:999px; border:1px solid var(--line-strong); background: var(--pill-bg); transition: background .3s ease, border-color .3s ease; }
  .theme-toggle .knob { position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:999px; background: linear-gradient(180deg, var(--blue), var(--violet)); display:grid; place-items:center; color:#fff; transition: left .35s cubic-bezier(.2,.7,.2,1); }
  html.light .theme-toggle .knob { left: calc(100% - 24px); }

  /* ============ LIGHT-MODE UTILITY OVERRIDES ============
     Re-maps the dark-built Tailwind utilities for light mode
     without rewriting every component. */
  html.light .text-white            { color: #0a0c1c !important; }
  html.light .text-white\/85        { color: rgba(10,12,28,.88) !important; }
  html.light .text-white\/80        { color: rgba(10,12,28,.84) !important; }
  html.light .text-white\/75        { color: rgba(10,12,28,.80) !important; }
  html.light .text-white\/70        { color: rgba(10,12,28,.74) !important; }
  html.light .text-white\/65        { color: rgba(10,12,28,.68) !important; }
  html.light .text-white\/60        { color: rgba(10,12,28,.62) !important; }
  html.light .text-white\/55        { color: rgba(10,12,28,.56) !important; }
  html.light .text-white\/50        { color: rgba(10,12,28,.50) !important; }
  html.light .text-white\/45        { color: rgba(10,12,28,.46) !important; }
  html.light .text-white\/40        { color: rgba(10,12,28,.42) !important; }

  html.light .bg-white\/5           { background-color: rgba(10,12,28,.04) !important; }
  html.light .bg-white\/10          { background-color: rgba(10,12,28,.08) !important; }
  html.light .bg-white\/\[0\.02\]   { background-color: rgba(10,12,28,.03) !important; }
  html.light .bg-white\/\[0\.015\]  { background-color: rgba(10,12,28,.02) !important; }

  html.light .border-white\/5       { border-color: rgba(10,12,28,.07) !important; }
  html.light .border-white\/10      { border-color: rgba(10,12,28,.10) !important; }
  html.light .border-white\/20      { border-color: rgba(10,12,28,.18) !important; }
  html.light .border-white\/30      { border-color: rgba(10,12,28,.24) !important; }
  html.light .divide-white\/5 > * + * { border-color: rgba(10,12,28,.06) !important; }

  html.light .bg-ink-900\/40,
  html.light .bg-ink-900\/60,
  html.light .bg-ink-900\/70 { background-color: rgba(255,255,255,.65) !important; backdrop-filter: blur(10px); }

  /* Loader background switches */
  html.light #loader { background:#f4f2ec; }

  /* Concept chip tweaks for light mode */
  html.light .bg-arc-blue\/10    { background-color: rgba(91,140,255,.10) !important; }
  html.light .bg-arc-blue\/15    { background-color: rgba(91,140,255,.14) !important; }
  html.light .bg-arc-violet\/10  { background-color: rgba(167,139,250,.12) !important; }
  html.light .bg-arc-violet\/15  { background-color: rgba(167,139,250,.16) !important; }
  html.light .bg-arc-pink\/10    { background-color: rgba(230,163,255,.14) !important; }
  html.light .bg-arc-pink\/15    { background-color: rgba(230,163,255,.18) !important; }
  html.light .bg-arc-sky\/15     { background-color: rgba(124,192,255,.16) !important; }

  /* Concept text colors stay vivid */
  html.light .text-arc-sky    { color: #2675c4 !important; }
  html.light .text-arc-blue   { color: #2a52cc !important; }
  html.light .text-arc-violet { color: #6b3ec4 !important; }
  html.light .text-arc-pink   { color: #a23bb0 !important; }
  html.light .text-emerald-300, html.light .text-emerald-400 { color:#1b8a52 !important; }
  html.light .text-rose-300   { color:#b03b4b !important; }
  html.light .text-amber-300  { color:#a8631c !important; }

  /* Hero stats grid divider */
  html.light .bg-white\/5.rounded-2xl  { background-color: rgba(10,12,28,.08) !important; }

  /* Mesh/orbs softer in light mode */
  html.light .mesh::before { opacity:.55; }
  html.light .grain::after { opacity:.04; mix-blend-mode: multiply; }

 .light footer li a:hover{
  color: #000 !important;
 } 
 .light footer a:hover{
  color: #000 !important;
 }

/* Footer LinkedIn icon — brand blue */
footer a[aria-label="LinkedIn"] svg {
  color: #0A66C2;
}
.light footer a[aria-label="LinkedIn"]:hover svg,
footer a[aria-label="LinkedIn"]:hover svg {
  color: #0A66C2 !important;
}