/* ── ambient.css — Living Atmospheric Background System ── */

#ambient-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-color: var(--bg);
  transition: background-color 0.35s ease;
  contain: strict;
  transform: translateZ(0);
  will-change: transform;
}

/* ── Light Mode Emerald Aurora & Glass Columns ── */
#ambient-bg {
  background-image:
    radial-gradient(ellipse 130% 75% at 50% 102%,
      rgba(16, 185, 129, 0.20) 0%,
      rgba(5, 150, 105, 0.11) 32%,
      rgba(4, 78, 59, 0.05) 58%,
      transparent 100%),
    radial-gradient(ellipse 70% 80% at 0% 95%,
      rgba(16, 185, 129, 0.12) 0%,
      transparent 70%),
    radial-gradient(ellipse 75% 80% at 100% 95%,
      rgba(16, 185, 129, 0.14) 0%,
      transparent 70%);
}

/* Light mode radiant horizon bloom */
#ambient-bg::after {
  content: '';
  position: absolute;
  bottom: -15%;
  left: -10%;
  right: -10%;
  height: 75%;
  background: radial-gradient(ellipse 110% 60% at 50% 95%,
      rgba(52, 211, 153, 0.15) 0%,
      rgba(16, 185, 129, 0.10) 35%,
      transparent 100%);
  filter: blur(55px);
  pointer-events: none;
  z-index: 1;
  animation: radiantPulse 12s ease-in-out infinite alternate;
}

/* ── Dark Mode Radiant Emerald Aurora & Architectural Columns (Recognito Style) ── */
body.dark #ambient-bg {
  background-color: #030504;
  background-image:
    /* Bottom central radiant green aurora rising upwards into pitch black — wide coverage across full width */
    radial-gradient(ellipse 130% 75% at 50% 102%,
      rgba(16, 185, 129, 0.44) 0%,
      rgba(5, 150, 105, 0.32) 32%,
      rgba(4, 78, 59, 0.20) 58%,
      rgba(3, 40, 30, 0.08) 78%,
      transparent 100%),
    /* Bottom-left upward radiant sweep */
    radial-gradient(ellipse 70% 80% at 0% 95%,
      rgba(16, 185, 129, 0.32) 0%,
      rgba(4, 120, 87, 0.20) 40%,
      transparent 75%),
    /* Bottom-right upward radiant sweep — reaches all the way to the right screen edge */
    radial-gradient(ellipse 75% 80% at 100% 95%,
      rgba(16, 185, 129, 0.35) 0%,
      rgba(4, 120, 87, 0.22) 42%,
      transparent 75%);
}

/* Radiant horizon atmospheric bloom (behind glass columns) */
body.dark #ambient-bg::after {
  content: '';
  position: absolute;
  bottom: -15%;
  left: -10%;
  right: -10%;
  height: 75%;
  background: radial-gradient(ellipse 110% 60% at 50% 95%,
      rgba(52, 211, 153, 0.28) 0%,
      rgba(16, 185, 129, 0.20) 35%,
      rgba(4, 120, 87, 0.10) 65%,
      transparent 100%);
  filter: blur(55px);
  pointer-events: none;
  z-index: 1;
  animation: radiantPulse 12s ease-in-out infinite alternate;
}

@keyframes radiantPulse {
  0% {
    opacity: 0.8;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.85;
  }
}

/* 1. Breathing Central Aura behind 3D Portrait */
.ambient-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}

.ambient-glow-center {
  width: clamp(480px, 58vw, 850px);
  height: clamp(480px, 58vw, 850px);
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
      rgba(7, 25, 27, 0.055) 0%,
      rgba(20, 85, 95, 0.025) 35%,
      rgba(20, 85, 95, 0.008) 55%,
      transparent 72%);
  animation: auraBreathe 10s ease-in-out infinite alternate;
}

body.dark .ambient-glow-center {
  background: radial-gradient(circle,
      rgba(16, 185, 129, 0.18) 0%,
      rgba(5, 150, 105, 0.08) 38%,
      transparent 70%);
}

@keyframes auraBreathe {
  0% {
    transform: translate(-50%, -50%) scale(0.92);
    opacity: 0.7;
  }

  50% {
    transform: translate(-50%, -49%) scale(1.08);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -51%) scale(0.96);
    opacity: 0.8;
  }
}

/* 2. Floating Atmospheric Color Blooms (Warm Champagne & Cool Teal) — Pure Hardware Gradients */
.ambient-glow-1 {
  width: clamp(420px, 46vw, 680px);
  height: clamp(420px, 46vw, 680px);
  left: -10%;
  top: -6%;
  background: transparent;
  animation: driftGlow1 24s ease-in-out infinite alternate;
}

@keyframes driftGlow1 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(60px, 80px) scale(1.14);
  }

  100% {
    transform: translate(-30px, 50px) scale(0.94);
  }
}

.ambient-glow-2 {
  width: clamp(440px, 48vw, 700px);
  height: clamp(440px, 48vw, 700px);
  right: -12%;
  bottom: -10%;
  background: transparent;
  animation: driftGlow2 28s ease-in-out infinite alternate;
}

@keyframes driftGlow2 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-70px, -60px) scale(1.15);
  }

  100% {
    transform: translate(40px, -40px) scale(0.92);
  }
}

/* ── 3. Fluted Architectural Glass Panels System ── */
.ambient-grid {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  opacity: 0.72;
  transition: opacity 0.35s ease;
}

/* Light mode glass columns — gentle, soft, refined translucency with transparent top edges */
.glass-col {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  align-self: flex-end;
  border-right: 1px solid rgba(16, 185, 129, 0.08);
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  border-top: none;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.20), inset -1px 0 0 rgba(16, 185, 129, 0.03);
  background: linear-gradient(to right,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(240, 253, 248, 0.07) 35%,
      rgba(16, 185, 129, 0.015) 70%,
      rgba(16, 185, 129, 0.04) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  mask-image: linear-gradient(to top, #000000 0%, #000000 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, #000000 0%, #000000 80%, transparent 100%);
  transition: height 0.4s ease, border-color 0.35s ease, background 0.35s ease;
}

.glass-col:last-child {
  border-right: none;
}

/* Soft emerald luminescence in light mode columns */
.glass-col::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(to top,
      rgba(16, 185, 129, 0.18) 0%,
      rgba(5, 150, 105, 0.12) 35%,
      rgba(4, 120, 87, 0.05) 70%,
      rgba(4, 120, 87, 0.015) 90%,
      transparent 100%);
}

.glass-col-odd::after,
.glass-col:nth-child(odd)::after {
  animation: glassPulseOdd 8s ease-in-out infinite alternate;
}

.glass-col-even::after,
.glass-col:nth-child(even)::after {
  animation: glassPulseEven 10s ease-in-out infinite alternate;
}

/* Dark Mode Architectural Glass Columns */
body.dark .ambient-grid {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  opacity: 0.82;
}

body.dark .glass-col {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  align-self: flex-end;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  border-left: 1px solid rgba(255, 255, 255, 0.02);
  border-top: none;
  box-shadow: none !important;
  background: linear-gradient(to right,
      rgba(255, 255, 255, 0.022) 0%,
      rgba(255, 255, 255, 0.005) 35%,
      transparent 70%,
      rgba(0, 0, 0, 0.09) 100%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  mask-image: linear-gradient(to top, #000000 0%, #000000 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, #000000 0%, #000000 80%, transparent 100%);
  transition: height 0.4s ease, border-color 0.35s ease, background 0.35s ease;
}

body.dark .glass-col:last-child {
  border-right: none;
}

/* Radiant emerald luminescence rising through each glass column */
body.dark .glass-col::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(to top,
      rgba(16, 185, 129, 0.28) 0%,
      rgba(5, 150, 105, 0.18) 35%,
      rgba(4, 120, 87, 0.10) 70%,
      rgba(4, 78, 59, 0.04) 90%,
      transparent 100%);
}

/* Dual-Mountain Wave Distribution (Elevated Majestic Peaks on Desktop) */
/* Left Mountain (Dominant Peak at Col 8 — Height: 97%) */
.glass-col-1, .glass-col-15,
.glass-col:nth-child(1), .glass-col:nth-child(15) { height: 46%; }

.glass-col-2, .glass-col-14,
.glass-col:nth-child(2), .glass-col:nth-child(14) { height: 56%; }

.glass-col-3, .glass-col-13,
.glass-col:nth-child(3), .glass-col:nth-child(13) { height: 68%; }

.glass-col-4, .glass-col-12,
.glass-col:nth-child(4), .glass-col:nth-child(12) { height: 80%; }

.glass-col-5, .glass-col-11,
.glass-col:nth-child(5), .glass-col:nth-child(11) { height: 88%; }

.glass-col-6, .glass-col-10,
.glass-col:nth-child(6), .glass-col:nth-child(10) { height: 93%; }

.glass-col-7, .glass-col-9,
.glass-col:nth-child(7), .glass-col:nth-child(9)  { height: 95%; }

.glass-col-8,
.glass-col:nth-child(8)                           { height: 97%; }

/* Right Mountain (Elevated Peak at Col 23 — Height: 95%) */
.glass-col-16,
.glass-col:nth-child(16)                          { height: 48%; }

.glass-col-17, .glass-col-29,
.glass-col:nth-child(17), .glass-col:nth-child(29) { height: 55%; }

.glass-col-18, .glass-col-28,
.glass-col:nth-child(18), .glass-col:nth-child(28) { height: 64%; }

.glass-col-19, .glass-col-27,
.glass-col:nth-child(19), .glass-col:nth-child(27) { height: 75%; }

.glass-col-20, .glass-col-26,
.glass-col:nth-child(20), .glass-col:nth-child(26) { height: 84%; }

.glass-col-21, .glass-col-25,
.glass-col:nth-child(21), .glass-col:nth-child(25) { height: 90%; }

.glass-col-22, .glass-col-24,
.glass-col:nth-child(22), .glass-col:nth-child(24) { height: 93%; }

.glass-col-23,
.glass-col:nth-child(23)                          { height: 95%; }

.glass-col-30,
.glass-col:nth-child(30)                          { height: 44%; }

body.dark .glass-col-odd::after,
body.dark .glass-col:nth-child(odd)::after {
  animation: glassPulseOdd 8s ease-in-out infinite alternate;
}

body.dark .glass-col-even::after,
body.dark .glass-col:nth-child(even)::after {
  animation: glassPulseEven 10s ease-in-out infinite alternate;
}

@keyframes glassPulseOdd {
  0% {
    opacity: 0.72;
  }

  50% {
    opacity: 0.92;
  }

  100% {
    opacity: 0.78;
  }
}

@keyframes glassPulseEven {
  0% {
    opacity: 0.78;
  }

  50% {
    opacity: 0.68;
  }

  100% {
    opacity: 0.85;
  }
}

/* 4. Interactive Cursor Ambient Spotlight — Hardware Accelerated */
.ambient-cursor-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 500px;
  height: 500px;
  margin-left: -250px;
  margin-top: -250px;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(20, 71, 58, 0.045) 0%,
      rgba(20, 71, 58, 0.02) 32%,
      rgba(20, 71, 58, 0.005) 54%,
      transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  will-change: transform;
}

body.dark .ambient-cursor-glow {
  background: radial-gradient(circle,
      rgba(78, 203, 160, 0.04) 0%,
      rgba(78, 203, 160, 0.016) 32%,
      rgba(78, 203, 160, 0.004) 54%,
      transparent 70%);
}

.ambient-cursor-glow.active {
  opacity: 1;
}

/* 5. Living Micro-Dust Particles (Motes drifting upwards) */
.ambient-dust-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.mote {
  position: absolute;
  bottom: -20px;
  border-radius: 50%;
  background: rgba(128, 128, 120, 0.3);
  box-shadow: 0 0 6px rgba(128, 128, 120, 0.15);
  pointer-events: none;
  opacity: 0;
  animation: floatMote linear infinite;
}

body.dark .mote {
  background: rgba(78, 203, 160, 0.18);
  box-shadow: 0 0 8px rgba(78, 203, 160, 0.12);
}

.mote-1 {
  left: 16%;
  width: 3px;
  height: 3px;
  animation-duration: 18s;
  animation-delay: 0s;
}

.mote-2 {
  left: 30%;
  width: 2.5px;
  height: 2.5px;
  animation-duration: 22s;
  animation-delay: 4s;
}

.mote-3 {
  left: 47%;
  width: 3.5px;
  height: 3.5px;
  animation-duration: 25s;
  animation-delay: 2s;
}

.mote-4 {
  left: 63%;
  width: 2px;
  height: 2px;
  animation-duration: 19s;
  animation-delay: 7s;
}

.mote-5 {
  left: 77%;
  width: 3px;
  height: 3px;
  animation-duration: 24s;
  animation-delay: 5s;
}

.mote-6 {
  left: 22%;
  width: 2px;
  height: 2px;
  animation-duration: 20s;
  animation-delay: 10s;
}

.mote-7 {
  left: 54%;
  width: 3px;
  height: 3px;
  animation-duration: 26s;
  animation-delay: 12s;
}

.mote-8 {
  left: 86%;
  width: 2.5px;
  height: 2.5px;
  animation-duration: 21s;
  animation-delay: 9s;
}

@keyframes floatMote {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }

  15% {
    opacity: 0.45;
  }

  50% {
    transform: translateY(-50vh) translateX(25px);
    opacity: 0.35;
  }

  85% {
    opacity: 0.2;
  }

  100% {
    transform: translateY(-105vh) translateX(-15px);
    opacity: 0;
  }
}

/* 6. Cinematic Micro-Noise / Film Grain Texture */
.ambient-grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  transform: translateZ(0);
}

/* ── 7. Floating Ghost Logos (depth layer anchored relatively to hero layout) ── */
.logo-float-container {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1240px;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
  will-change: opacity;
}

.logo-float-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}

.logo-float {
  position: absolute;
  opacity: 0;
  will-change: transform, opacity;
  transition: none;
  pointer-events: none;
  background: none;
  background-color: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  display: block;
}

body.dark .logo-float {
  background: none;
  background-color: transparent;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.logo-float img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  mix-blend-mode: multiply;
  pointer-events: none;
}

body.dark .logo-float img {
  mix-blend-mode: normal;
  filter: brightness(0) invert(1);
}

/* ── Individual depth planes & relative sizes scaled proportionally with hero layout ── */

/* 1. Near plane — crisp & closest to foreground (left between left col & portrait) */
.logo-float-1 {
  width: clamp(16px, 2.6vw, 42px);
  top: 52%;
  left: 28%;
  animation: floatLogo1 22s ease-in-out infinite;
  animation-delay: 0s;
}

.logo-float-1 img {
  opacity: 0.22;
  filter: blur(0.8px) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.05));
}

body.dark .logo-float-1 img {
  opacity: 0.22;
  filter: blur(0.8px) brightness(0) invert(1) drop-shadow(0 2px 8px rgba(255, 255, 255, 0.1));
}

/* 2. Mid plane — gentle soft blur (right between portrait & right col) */
.logo-float-2 {
  width: clamp(14px, 2.2vw, 36px);
  top: 58%;
  right: 28%;
  animation: floatLogo2 28s ease-in-out infinite;
  animation-delay: -9s;
}

.logo-float-2 img {
  opacity: 0.19;
  filter: blur(1.6px) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.04));
}

body.dark .logo-float-2 img {
  opacity: 0.19;
  filter: blur(1.6px) brightness(0) invert(1) drop-shadow(0 2px 8px rgba(255, 255, 255, 0.08));
}

/* 3. Deep plane (Upper) — softened blur (upper left) */
.logo-float-3 {
  width: clamp(12px, 1.8vw, 30px);
  top: 36%;
  left: 32%;
  animation: floatLogo3 25s ease-in-out infinite;
  animation-delay: -5s;
}

.logo-float-3 img {
  opacity: 0.17;
  filter: blur(2.2px) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.04));
}

body.dark .logo-float-3 img {
  opacity: 0.17;
  filter: blur(2.2px) brightness(0) invert(1);
}

/* 4. Far background plane (Lower) — softened blur in bottom depth (lower right) */
.logo-float-4 {
  width: clamp(10px, 1.5vw, 24px);
  top: 68%;
  right: 30%;
  animation: floatLogo4 20s ease-in-out infinite;
  animation-delay: -13s;
}

.logo-float-4 img {
  opacity: 0.15;
  filter: blur(2.6px) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.03));
}

body.dark .logo-float-4 img {
  opacity: 0.15;
  filter: blur(2.6px) brightness(0) invert(1);
}

@keyframes floatLogo1 {
  0% {
    transform: translate(0, 0) rotate(-4deg) scale(1);
    opacity: 0.0;
  }

  8% {
    opacity: 1;
  }

  50% {
    transform: translate(30px, -40px) rotate(2deg) scale(1.06);
    opacity: 1;
  }

  92% {
    opacity: 1;
  }

  100% {
    transform: translate(-10px, 20px) rotate(-3deg) scale(0.97);
    opacity: 0.0;
  }
}

@keyframes floatLogo2 {
  0% {
    transform: translate(0, 0) rotate(3deg) scale(1);
    opacity: 0.0;
  }

  8% {
    opacity: 1;
  }

  50% {
    transform: translate(-25px, 35px) rotate(-2deg) scale(1.08);
    opacity: 1;
  }

  92% {
    opacity: 1;
  }

  100% {
    transform: translate(15px, -20px) rotate(4deg) scale(0.95);
    opacity: 0.0;
  }
}

@keyframes floatLogo3 {
  0% {
    transform: translate(0, 0) rotate(2deg) scale(1);
    opacity: 0.0;
  }

  10% {
    opacity: 1;
  }

  50% {
    transform: translate(40px, -30px) rotate(-3deg) scale(1.05);
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    transform: translate(-20px, 15px) rotate(1deg) scale(0.98);
    opacity: 0.0;
  }
}

@keyframes floatLogo4 {
  0% {
    transform: translate(0, 0) rotate(-3deg) scale(1);
    opacity: 0.0;
  }

  10% {
    opacity: 1;
  }

  50% {
    transform: translate(-35px, -25px) rotate(3deg) scale(1.07);
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    transform: translate(20px, 10px) rotate(-2deg) scale(0.96);
    opacity: 0.0;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE & TABLET OPTIMIZATION: REFINED SUBTLE GLASS COLUMNS
   Eliminates overcrowding on small screens without affecting desktop
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) and (min-width: 601px) {
  .ambient-grid {
    opacity: 0.68 !important;
  }

  body.dark .ambient-grid {
    opacity: 0.78 !important;
  }

  /* 18 refined columns on tablet */
  .glass-col:nth-child(n+19) {
    display: none !important;
  }

  /* Tablet Wave: sweeping, elevated dual peaks rising majestically across the 18 columns */
  .glass-col:nth-child(1)  { height: 38% !important; }
  .glass-col:nth-child(2)  { height: 50% !important; }
  .glass-col:nth-child(3)  { height: 66% !important; }
  .glass-col:nth-child(4)  { height: 80% !important; }
  .glass-col:nth-child(5)  { height: 90% !important; }
  .glass-col:nth-child(6)  { height: 95% !important; }
  .glass-col:nth-child(7)  { height: 92% !important; }
  .glass-col:nth-child(8)  { height: 82% !important; }
  .glass-col:nth-child(9)  { height: 68% !important; }
  .glass-col:nth-child(10) { height: 52% !important; }
  .glass-col:nth-child(11) { height: 44% !important; }
  .glass-col:nth-child(12) { height: 54% !important; }
  .glass-col:nth-child(13) { height: 70% !important; }
  .glass-col:nth-child(14) { height: 84% !important; }
  .glass-col:nth-child(15) { height: 94% !important; }
  .glass-col:nth-child(16) { height: 91% !important; }
  .glass-col:nth-child(17) { height: 75% !important; }
  .glass-col:nth-child(18) { height: 48% !important; }

  .glass-col {
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
  }
}

@media (max-width: 600px) {
  .ambient-grid {
    opacity: 0.58 !important;
  }

  body.dark .ambient-grid {
    opacity: 0.68 !important;
  }

  /* Show only 8 soft, spacious columns on mobile phones instead of 30 dense slivers */
  .glass-col:nth-child(n+9) {
    display: none !important;
  }

  /* Elevated architectural wave on mobile phones rising high into view */
  .glass-col:nth-child(1), .glass-col:nth-child(8) { height: 52% !important; }
  .glass-col:nth-child(2), .glass-col:nth-child(7) { height: 72% !important; }
  .glass-col:nth-child(3), .glass-col:nth-child(6) { height: 88% !important; }
  .glass-col:nth-child(4), .glass-col:nth-child(5) { height: 96% !important; }

  .glass-col {
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-right: 1px solid rgba(16, 185, 129, 0.04) !important;
    box-shadow: none !important;
  }

  body.dark .glass-col {
    border-left: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-right: 1px solid rgba(0, 255, 165, 0.04) !important;
    box-shadow: none !important;
  }

  .glass-col::after,
  body.dark .glass-col::after {
    opacity: 0.75 !important;
  }
}