:root {
     --ink:#020617;
     --navy:#0F172A;
     --royal:#30A2D5;
     --neon:#30A2D5;
     --red:#E41C1E;
     --crimson:#E41C1E;
}
 html, body {
     background:#020617;
     color:#F8FAFC;
     font-family:'Outfit', sans-serif;
     -webkit-font-smoothing:antialiased;
}
/* ===== LIGHT MODE ===== */
 html.light {
     --ink:#F8FAFC;
     --navy:#EFF6FF;
}
 html.light body {
     background:#F1F5F9;
     color:#0F172A;
}
 html.light .bg-ink {
     background-color:#F1F5F9 !important;
}
 html.light #navbar {
     background:transparent;
}
 html.light #nav-inner {
     background:rgba(255,255,255,0.85) !important;
     border-color:rgba(0,0,0,0.08) !important;
     color:#0F172A;
}
 html.light .nav-link, html.light .nav-link:hover {
     color:#0F172A;
}
 html.light .text-paper\/80, html.light .text-paper\/90, html.light .text-paper\/70, html.light .text-paper\/75, html.light .text-paper\/65, html.light .text-paper\/85 {
     color:rgba(15,23,42,0.8) !important;
}
 html.light .text-mute {
     color:#64748B !important;
}
 html.light .glass {
     background:rgba(255,255,255,0.7) !important;
     border-color:rgba(0,0,0,0.08) !important;
}
 html.light .glass-strong {
     background:rgba(255,255,255,0.85) !important;
     border-color:rgba(0,0,0,0.1) !important;
}
 html.light .bg-navy\/40, html.light .bg-navy\/30 {
     background:rgba(48,162,213,0.08) !important;
}
 html.light .border-white\/5, html.light .border-white\/10 {
     border-color:rgba(0,0,0,0.08) !important;
}
 html.light .bg-white\/\[0\.02\], html.light .bg-white\/\[0\.03\] {
     background:rgba(255,255,255,0.6) !important;
}
 html.light .bg-white\/5 {
     background:rgba(0,0,0,0.04) !important;
}
 html.light .bg-grid {
     background-image:linear-gradient(rgba(0,0,0,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.05) 1px,transparent 1px);
}
 html.light #mobile-nav {
     background:rgba(248,250,252,0.97) !important;
     border-color:rgba(0,0,0,0.08) !important;
}
 html.light .mob-link {
     color:#0F172A !important;
}
 html.light .mob-link:hover {
     background:rgba(0,0,0,0.04) !important;
}
 html.light section {
     background:transparent;
}
 html.light .map-frame {
     filter:none;
}
 html.light footer {
     background:#E2E8F0;
}
 html.light .font-display {
     color:#0F172A;
}
 html.light #team .font-display {
     color:#CCC;
}
 html.light input, html.light textarea, html.light select {
     color:#0F172A !important;
     border-color:rgba(0,0,0,0.15) !important;
}
 html.light input::placeholder, html.light textarea::placeholder {
     color:#94A3B8 !important;
}
 html.light .btn-ghost {
     border-color:rgba(0,0,0,0.15);
     color:#0F172A;
}
 html.light .btn-ghost:hover {
     border-color:#30A2D5;
}
 html.light #scroll-progress {
     background:linear-gradient(90deg,#30A2D5,#E41C1E);
}
 html.light .logo-card {
     color:#64748B;
}
 html.light .logo-card:hover {
     color:#0F172A;
}
 html.light .from-ink {
     background-color:#64666853 !important;
     --tw-gradient-from:#2d2e2f !important;
     --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(248,250,252,0)) !important;
}
/* Fix portfolio & team image overlays in light mode */
 html.light .portfolio-item .absolute.inset-0, html.light #team .absolute.inset-0 {
     background:linear-gradient(to top, rgba(2,6,23,0.85) 0%, rgba(2,6,23,0.25) 55%, transparent 100%) !important;
}
/* Fix hero image overlay in light mode */
 html.light #home .absolute.inset-0.bg-gradient-to-t {
     background:linear-gradient(to top, rgba(2,6,23,0.75) 0%, rgba(2,6,23,0.2) 50%, transparent 100%) !important;
}
 html.light option {
     background:#fff;
     color:#0F172A;
}
/* Theme toggle button */
 #theme-toggle {
     display:flex;
     align-items:center;
     justify-content:center;
     width:38px;
     height:38px;
     border-radius:9999px;
     background:transparent;
     cursor:pointer;
     transition:all .25s;
     flex-shrink:0;
}
 #theme-toggle:hover {
     border-color:#38BDF8;
}
 html.light #theme-toggle {
     border-color:rgba(0,0,0,0.15);
     background:transparent;
}
 html.light #theme-toggle:hover {
     border-color:#30A2D5;
}
 #theme-toggle .icon-sun, #theme-toggle .icon-moon {
     width:18px;
     height:18px;
}
 html.light #theme-toggle .icon-moon {
     display:none;
}
 html.light #theme-toggle .icon-sun {
     display:block;
}
 html:not(.light) #theme-toggle .icon-sun {
     display:none;
}
 html:not(.light) #theme-toggle .icon-moon {
     display:block;
}
 body {
     overflow-x:hidden;
}
 .font-display {
     font-family:'Space Grotesk', sans-serif;
     letter-spacing:-0.02em;
}
 ::selection {
     background:#DC2626;
     color:#fff;
}
/* Cursor */
 .cursor-dot, .cursor-ring {
     position:fixed;
     top:0;
     left:0;
     pointer-events:none;
     z-index:9999;
     transform:translate(-50%,-50%);
     border-radius:9999px;
}
 .cursor-dot {
     width:6px;
     height:6px;
     background:#30A2D5;
     mix-blend-mode:difference;
     transition:opacity .2s;
}
 .cursor-ring {
     width:38px;
     height:38px;
     border:1px solid rgba(48,162,213,.5);
     transition:transform .15s ease-out, border-color .2s, width .2s, height .2s;
}
 .cursor-ring.hover {
     width:60px;
     height:60px;
     border-color:#E41C1E;
}
 @media (max-width:768px){
     .cursor-dot,.cursor-ring{
        display:none;
    }
}
/* Grid background */
 .bg-grid {
     background-image:linear-gradient(rgba(255,255,255,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.04) 1px,transparent 1px);
     background-size:64px 64px;
}
 .bg-dots {
     background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
     background-size:24px 24px;
}
/* Glow blobs */
 .blob {
     position:absolute;
     border-radius:9999px;
     filter:blur(80px);
     opacity:.55;
     pointer-events:none;
}
 .blob-blue {
     background:radial-gradient(circle, #30A2D5, transparent 70%);
}
 .blob-red {
     background:radial-gradient(circle, #E41C1E, transparent 70%);
}
 .blob-neon {
     background:radial-gradient(circle, #30A2D5, transparent 70%);
}
/* Glass */
 .glass {
     background:linear-gradient(135deg,rgba(255,255,255,0.06),rgba(255,255,255,0.015));
     backdrop-filter:blur(18px);
     -webkit-backdrop-filter:blur(18px);
     border:1px solid rgba(255,255,255,0.08);
}
 .glass-strong {
     background:rgba(15,23,42,0.6);
     backdrop-filter:blur(22px);
     -webkit-backdrop-filter:blur(22px);
     border:1px solid rgba(255,255,255,0.08);
}
/* Gradient border */
 .grad-border {
     position:relative;
}
 .grad-border::before {
     content:"";
     position:absolute;
     inset:0;
     padding:1px;
     border-radius:inherit;
     background:linear-gradient(135deg,#30A2D5,#E41C1E);
     -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
     -webkit-mask-composite:xor;
     mask-composite:exclude;
     pointer-events:none;
}
/* Text gradient */
.text-grad{
    background: linear-gradient(135deg,#30A2D5,#E41C1E);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}
 .text-grad-blue {
     background:linear-gradient(135deg,#30A2D5,#1a7fa8);
     -webkit-background-clip:text;
     background-clip:text;
     color:transparent;
}
 .text-grad-red {
     background:linear-gradient(135deg,#E41C1E,#b01416);
     -webkit-background-clip:text;
     background-clip:text;
     color:transparent;
}
/* Pill button */
.btn-primary{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    padding:0.5rem 1.75rem;
    border-radius:9999px;
    font-weight:600;
    color:#fff;
    background: var(--royal);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(14px);
    box-shadow:
    0 10px 30px rgba(48,162,213,.25),
    inset 0 1px 1px rgba(255,255,255,.15);
    transition:
    transform .25s ease,
    box-shadow .25s ease;
    overflow:hidden;
    isolation:isolate;
}

.btn-primary::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        120deg,
        transparent 20%,
        rgba(255,255,255,.22) 50%,
        transparent 80%
    );
    transform:translateX(-120%);
    transition:transform .7s ease;
    z-index:-1;
}

.btn-primary:hover{
    transform:translateY(-3px) scale(1.02);
    background-color: var(--red);
}

.btn-primary:hover::before{
    transform:translateX(120%);
}
 .btn-ghost {
     display:inline-flex;
     align-items:center;
     gap:.6rem;
     padding:0.5rem 1.75rem;
     border-radius:9999px;
     border:1px solid rgba(255,255,255,.18);
     color:#F8FAFC;
     transition:all .25s;
}
 .btn-ghost:hover {
     border-color:#30A2D5;
     box-shadow:0 0 30px -5px rgba(48,162,213,.5);
}
/* Marquee */
 .marquee {
     display:flex;
     gap:1.25rem;
     animation:scrollX 35s linear infinite;
}
 .marquee:hover {
     animation-play-state:paused;
}
 @keyframes scrollX {
     from {
         transform:translateX(0);
    }
     to {
         transform:translateX(-50%);
    }
}
/* Underline animation */
 .nav-link {
     position:relative;
}
 .nav-link::after {
     content:"";
     position:absolute;
     left:0;
     right:0;
     bottom:-6px;
     height:2px;
     background:linear-gradient(90deg,#30A2D5,#E41C1E);
     transform:scaleX(0);
     transform-origin:left;
     transition:transform .35s ease;
}
 .nav-link:hover::after, .nav-link.active::after {
     transform:scaleX(1);
}
/* Floating particles */
 .particle {
     position:absolute;
     border-radius:9999px;
     background:#30A2D5;
     opacity:.35;
     box-shadow:0 0 12px #30A2D5;
}
/* Tilt cards (CSS-only) */
 .tilt {
     transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
}
 .tilt:hover {
     transform:translateY(-8px);
     box-shadow:0 30px 80px -20px rgba(48,162,213,.35),0 0 0 1px rgba(255,255,255,.08);
}
/* Spotlight on hover */
 .spot {
     position:relative;
     overflow:hidden;
}
 .spot::before {
     content:"";
     position:absolute;
     inset:-1px;
     background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%), rgba(48,162,213,.18), transparent 40%);
     opacity:0;
     transition:opacity .3s;
     pointer-events:none;
     border-radius:inherit;
}
 .spot:hover::before {
     opacity:1;
}
/* Scroll progress */
 #scroll-progress {
     position:fixed;
     top:0;
     left:0;
     height:3px;
     width:0;
     background:linear-gradient(90deg,#30A2D5,#E41C1E);
     z-index:60;
}
/* Accordion chevron */
 .acc-item[open] .chev {
     transform:rotate(180deg);
}
 .chev {
     transition:transform .3s ease;
}
/* Before/After */
 .ba-slider {
     position:relative;
     width:100%;
     aspect-ratio:16/10;
     overflow:hidden;
     border-radius:1.25rem;
     user-select:none;
}
 .ba-img {
     position:absolute;
     inset:0;
     background-size:cover;
     background-position:center;
}
 .ba-after {
     clip-path:inset(0 0 0 50%);
}
 .ba-handle {
     position:absolute;
     top:0;
     bottom:0;
     width:2px;
     background:linear-gradient(180deg,#30A2D5,#E41C1E);
     left:50%;
     transform:translateX(-50%);
     cursor:ew-resize;
     box-shadow:0 0 20px rgba(48,162,213,.6);
}
 .ba-handle::after {
     content:"";
     position:absolute;
     top:50%;
     left:50%;
     width:46px;
     height:46px;
     transform:translate(-50%,-50%);
     border-radius:9999px;
     background:rgba(2,6,23,.85);
     border:1px solid rgba(48,162,213,.6);
}
 .ba-handle::before {
     content:"⇆";
     position:absolute;
     top:50%;
     left:50%;
     transform:translate(-50%,-50%);
     color:#F8FAFC;
     font-size:18px;
     z-index:2;
}
/* Map filter */
 .map-frame {
     filter:invert(.92) hue-rotate(180deg) saturate(.8) contrast(.95);
     border-radius:0.5rem;
     overflow:hidden;
}
/* Magnetic */
 .magnet {
     transition:transform .25s ease-out;
}
/* Hide scrollbar inside dropdown panels */
 .no-scrollbar::-webkit-scrollbar {
     display:none;
}
/* Mobile nav animation */
 #mobile-nav {
     transform:translateX(100%);
     transition:transform .45s cubic-bezier(.2,.9,.2,1);
}
 #mobile-nav.open {
     transform:translateX(0);
}
/* Reveal helpers */
 .reveal-text > span {
     display:inline-block;
     transform:translateY(110%);
     opacity:0;
}
/* Float field */
.float-field {
    position: relative;
}

/* Logo card */
 .logo-card {
     color:#94A3B8;
     transition:color .3s ease, transform .3s ease;
}
 .logo-card:hover {
     color:#F8FAFC;
     transform:translateY(-2px);
}




/* ============================================================
   CINEMATIC FOOTER
   ============================================================ */

/* --- Base shell --- */
.footer-cinematic {
  position: relative;
  min-height: 200px;
  background: #020c18;
  color: #e2eaf4;
  font-family: 'Outfit', sans-serif;
}

/* --- Layer 1: deep base gradient --- */
.footer-base-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(13,52,96,0.55) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 80%, rgba(7,30,60,0.6) 0%, transparent 60%),
    linear-gradient(180deg, #020c18 0%, #041525 40%, #071e38 70%, #0a2540 100%);
  pointer-events: none;
}

/* --- Layer 2: noise texture --- */
.footer-noise {
  position: absolute;
  inset: 0;
  opacity: 0.045;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* --- Layer 3: horizon glow --- */
.footer-horizon {
  position: absolute;
  left: 0; right: 0;
  bottom: 38%;
  height: 220px;
  background: radial-gradient(ellipse 70% 100% at 50% 100%,
    rgba(56,189,248,0.07) 0%,
    rgba(37,99,235,0.05) 40%,
    transparent 70%);
  pointer-events: none;
  filter: blur(2px);
}

/* --- Layer 4: mountain SVGs --- */
.footer-mountains {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.mtn {
  position: absolute;
  left: 0; right: 0;
  width: 100%;
}
.mtn-far  { bottom: 0; height: 220px; }
.mtn-mid  { bottom: 0; height: 200px; }
.mtn-near { bottom: 0; height: 180px; }
.mtn-fg   { bottom: 0; height: 140px; }

/* --- Layer 5: fog bands --- */
.footer-fog {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 60px;
  border-radius: 9999px;
  pointer-events: none;
  filter: blur(28px);
  opacity: 0;
  animation: fogDrift 18s ease-in-out infinite;
}
.fog-1 {
  bottom: 34%;
  background: linear-gradient(90deg, transparent, rgba(56,189,248,0.06), rgba(96,165,250,0.05), transparent);
  animation-delay: 0s;
  animation-duration: 22s;
}
.fog-2 {
  bottom: 28%;
  background: linear-gradient(90deg, transparent, rgba(37,99,235,0.05), rgba(56,189,248,0.04), transparent);
  animation-delay: -9s;
  animation-duration: 28s;
}
@keyframes fogDrift {
  0%   { opacity: 0;    transform: translateX(-4%); }
  20%  { opacity: 1; }
  50%  { opacity: 0.7;  transform: translateX(4%); }
  80%  { opacity: 1; }
  100% { opacity: 0;    transform: translateX(-4%); }
}

/* --- Layer 6: particles canvas --- */
.footer-particles-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.55;
}

/* --- Content wrapper --- */
.footer-content {
  position: relative;
  z-index: 10;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem 1rem 2rem;
}

/* --- Editorial grid --- */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 1rem 2rem;
  padding: 1.5rem 0 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  align-items: start;
}
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 3rem; }
  .footer-col-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {

  /* Main Grid */
  .footer-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:1.5rem;
  }

  /* Brand section full width */
  .footer-col-brand{
    grid-column:1 / -1;
  }

  /* Hero spacing */
  .footer-hero{
    padding-top:3.5rem;
    padding-bottom:3rem;
  }

  /* Footer content */
  .footer-content{
    padding:0 1.25rem 2rem;
  }

}

/* --- Brand column --- */
.footer-logo-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  margin-bottom: 1.25rem;
}
.footer-logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, #30A2D5, #E41C1E);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.footer-logo-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #e8f0fa;
  line-height: 1;
}
.footer-logo-sub {
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(148,163,184,0.6);
  margin-top: 0.2rem;
}
.footer-brand-desc {
  font-size: 0.82rem;
  line-height: 1.75;
  color: rgba(203,213,225,0.55);
  max-width: 280px;
  margin-bottom: 1.5rem;
}

/* --- Social links --- */
.footer-socials {
  display: flex;
  gap: 0.6rem;
}
.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(148,163,184,0.7);
  transition: all 0.3s ease;
}
.footer-social-link:hover {
  border-color: rgba(48,162,213,0.4);
  color: #30A2D5;
  background: rgba(48,162,213,0.06);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px -4px rgba(48,162,213,0.2);
}

/* --- Nav columns --- */
.footer-col-label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(48,162,213,0.6);
  margin-bottom: 1.1rem;
}
.footer-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.footer-nav-link {
  position: relative;
  display: inline-block;
  font-size: 0.82rem;
  color: rgba(203,213,225,0.6);
  text-decoration: none;
  transition: color 0.25s ease;
  padding-bottom: 1px;
}
.footer-nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, #30A2D5, #E41C1E);
  transition: width 0.3s ease;
}
.footer-nav-link:hover {
  color: #e0f2fe;
}
.footer-nav-link:hover::after { width: 100%; }

/* test  */
.footer-subnav-list {
  list-style: none;
  padding: 0;

  margin: 0 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}



/* --- Contact column --- */
.footer-address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.footer-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.8rem;
  color: rgba(203,213,225,0.55);
  text-decoration: none;
  transition: color 0.25s ease;
  line-height: 1.5;
}
.footer-contact-row:hover { color: #93C5FD; }
.footer-contact-addr { cursor: default; }
.footer-contact-addr:hover { color: rgba(203,213,225,0.55); }

/* --- Offices --- */
.footer-offices-list {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.footer-offices-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: rgba(148,163,184,0.5);
}
.footer-office-dot {
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: rgba(48,162,213,0.5);
  flex-shrink: 0;
}

/* --- Bottom bar --- */
.footer-bottom { padding-top: 0; }
.footer-bottom-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06) 30%, rgba(255,255,255,0.06) 70%, transparent);
  margin-bottom: 1rem;
}
.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.footer-copy {
  font-size: 0.72rem;
  color: rgba(148,163,184,0.4);
  font-family: 'Inter', sans-serif;
}
.footer-legal {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.footer-legal-link {
  font-size: 0.72rem;
  color: rgba(148,163,184,0.4);
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  transition: color 0.2s ease;
}
.footer-legal-link:hover { color: rgba(148,163,184,0.85); }
.footer-legal-sep {
  font-size: 0.65rem;
  color: rgba(148,163,184,0.2);
}

/* --- Light mode overrides --- */
html.light footer { background: transparent !important; }

html.light .footer-cinematic {
  background: #dde8f0 !important;
  color: #1e293b !important;
}

html.light .footer-base-gradient {
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(186,220,245,0.55) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 80%, rgba(203,228,248,0.5) 0%, transparent 60%),
    linear-gradient(180deg, #dde8f0 0%, #cfe0ee 40%, #c2d8ea 70%, #b8d0e4 100%) !important;
}

html.light .footer-horizon {
  background: radial-gradient(ellipse 70% 100% at 50% 100%,
    rgba(37,99,235,0.08) 0%,
    rgba(56,189,248,0.05) 40%,
    transparent 70%) !important;
}

/* Mountain silhouettes — warmer, lighter tones for day sky */
html.light .mtn-far  path { fill: #a8c8e0 !important; }
html.light .mtn-mid  path { fill: #8fb8d4 !important; }
html.light .mtn-near path { fill: #7aaac8 !important; }
html.light .mtn-fg   path { fill: #5e96b8 !important; }

/* Fog — lighter, warmer haze */
html.light .fog-1 {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), rgba(220,235,248,0.3), transparent) !important;
}
html.light .fog-2 {
  background: linear-gradient(90deg, transparent, rgba(200,225,245,0.25), rgba(255,255,255,0.2), transparent) !important;
}

/* Particles — blue tint on light bg */
html.light .footer-particles-canvas { opacity: 0.3 !important; }

/* Grid dividers */
html.light .footer-grid {
  border-bottom-color: rgba(0,0,0,0.07) !important;
}
html.light .footer-col-label { color: rgba(48,162,213,0.7) !important; }

/* Logo */
html.light .footer-logo-name { color: #0f172a !important; }
html.light .footer-logo-sub  { color: rgba(71,85,105,0.6) !important; }

/* Brand description */
html.light .footer-brand-desc { color: rgba(51,65,85,0.65) !important; }

/* Social links */
html.light .footer-social-link {
  border-color: rgba(0,0,0,0.1) !important;
  color: rgba(71,85,105,0.7) !important;
}
html.light .footer-social-link:hover {
  border-color: rgba(48,162,213,0.4) !important;
  color: #30A2D5 !important;
  background: rgba(48,162,213,0.06) !important;
  box-shadow: 0 6px 20px -4px rgba(48,162,213,0.15) !important;
}

/* Nav links */
html.light .footer-nav-link {
  color: rgba(51,65,85,0.65) !important;
}
html.light .footer-nav-link:hover { color: #0f172a !important; }
html.light .footer-nav-link::after {
  background: linear-gradient(90deg, #30A2D5, #E41C1E) !important;
}

/* Contact rows */
html.light .footer-contact-row {
  color: rgba(51,65,85,0.6) !important;
}
html.light .footer-contact-row:hover { color: #30A2D5 !important; }
html.light .footer-contact-addr:hover { color: rgba(51,65,85,0.6) !important; }

/* Offices */
html.light .footer-offices-list li { color: rgba(71,85,105,0.55) !important; }
html.light .footer-office-dot { background: rgba(48,162,213,0.5) !important; }

/* Bottom bar */
html.light .footer-bottom-divider {
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08) 30%, rgba(0,0,0,0.08) 70%, transparent) !important;
}
html.light .footer-copy        { color: rgba(71,85,105,0.5) !important; }
html.light .footer-legal-link  { color: rgba(71,85,105,0.5) !important; }
html.light .footer-legal-link:hover { color: rgba(15,23,42,0.85) !important; }
html.light .footer-legal-sep   { color: rgba(71,85,105,0.25) !important; }

/* Noise — barely visible on light bg */
html.light .footer-noise { opacity: 0.025 !important; }

/* ============================================================
   FOOTER PARTICLE SCRIPT (inline canvas init)
   ============================================================ */

/* ===== CLIENT CARDS ===== */
.client-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    /* Transparent Glass Effect */
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 8px 30px rgba(0,0,0,0.25);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}

/* Top Shine */
.client-card::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.08) 0%,
            transparent 40%
        );

    pointer-events: none;
}

/* Hover */
.client-card:hover {
    transform: translateY(-4px);

    background: rgba(255,255,255,0.08);

    border-color: rgba(255,255,255,0.18);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 16px 40px rgba(0,0,0,0.35);
}

/* Client Name */
.client-card-name {
    color: rgba(255,255,255,0.92);
    text-shadow: 0 1px 10px rgba(0,0,0,0.45);
}

/* ===== LIGHT MODE ===== */
html.light .client-card {
    background: rgba(255,255,255,0.75);
    border: 1px solid rgba(15,23,42,0.08);

    backdrop-filter: blur(10px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.8),
        0 8px 24px rgba(15,23,42,0.06);
}

html.light .client-card:hover {
    background: rgba(255,255,255,0.95);
    border-color: rgba(37,99,235,0.18);

    box-shadow:
        0 14px 30px rgba(37,99,235,0.10);
}

html.light .client-card-name {
    color: #0f172a;
    text-shadow: none;
}
/* Responsive section padding */
@media (max-width: 640px) {
    #portfolio {
        padding-top: 6rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

.logo-card {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 8px 24px rgba(0,0,0,0.25);
}

/* testimonial  */