:root {
  --bento-glow: 114, 148, 255;
  --bento-violet: 195, 76, 255;
}

html { scroll-padding-top: 112px; }
section[id] { scroll-margin-top: 112px; }
.moving-head[hidden] { display: none !important; }

.magic-bento-panel {
  --glow-x: 50%;
  --glow-y: 50%;
  --glow-intensity: 0;
  --glow-radius: 360px;
  position: relative;
  isolation: isolate;
  border-top: 0;
}

.magic-bento-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(var(--glow-radius) circle at var(--glow-x) var(--glow-y),
      rgba(var(--bento-glow), calc(var(--glow-intensity) * 0.13)) 0%,
      rgba(var(--bento-violet), calc(var(--glow-intensity) * 0.075)) 24%,
      transparent 64%);
  opacity: 1;
  transition: opacity 0.35s ease;
}

.magic-bento-panel::after {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 0;
  height: 1px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent,
    rgba(var(--bento-glow), calc(.08 + var(--glow-intensity) * .18)) 34%,
    rgba(var(--bento-violet), calc(.06 + var(--glow-intensity) * .14)) 66%,
    transparent);
  filter: blur(.35px);
}

.dark-section.magic-bento-panel,
.abilities-section-dark.magic-bento-panel,
.visuals-section.magic-bento-panel {
  background: linear-gradient(180deg,
    rgba(7, 9, 13, 0.18) 0%,
    rgba(7, 9, 13, 0.48) 12%,
    rgba(7, 9, 13, 0.52) 50%,
    rgba(7, 9, 13, 0.48) 88%,
    rgba(7, 9, 13, 0.18) 100%) !important;
}

.dark-contact.magic-bento-panel {
  background: linear-gradient(180deg,
    rgba(7, 9, 13, 0.18),
    rgba(7, 9, 14, 0.50) 18%,
    rgba(7, 9, 14, 0.50) 82%,
    rgba(7, 9, 13, 0.20)) !important;
}

.dark-section-head i {
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.13), rgba(132,241,228,.055) 45%, transparent 100%) !important;
  filter: blur(.2px);
}

.abilities-section-dark .strength-card {
  min-height: 250px;
  justify-content: flex-start;
  padding: 26px 24px;
}

.abilities-section-dark .strength-card h3 {
  margin: 30px 0 12px;
}

.abilities-section-dark .strength-card p {
  margin: 0;
}

.animated-list-item.animated-selected > masonry-gallery {
  border-color: rgba(132, 241, 228, .24);
  box-shadow: 0 32px 100px rgba(0,0,0,.26), 0 0 0 1px rgba(132,241,228,.025);
}

.magic-bento-surface {
  --surface-glow-x: 50%;
  --surface-glow-y: 50%;
  position: relative;
  isolation: isolate;
  transform-style: preserve-3d;
  transform-origin: center;
  transition: transform 0.28s cubic-bezier(.2,.75,.25,1),
    border-color 0.28s ease,
    box-shadow 0.28s ease;
  will-change: transform;
}

.magic-bento-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(430px circle at var(--surface-glow-x) var(--surface-glow-y),
    rgba(var(--bento-glow), 0.10),
    transparent 52%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.magic-bento-surface:hover {
  border-color: rgba(134, 169, 255, 0.34) !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.3), 0 0 38px rgba(114, 148, 255, 0.09) !important;
}

.magic-bento-surface:hover::after { opacity: 1; }

.magic-global-spotlight {
  position: fixed;
  z-index: 12;
  width: 720px;
  height: 720px;
  left: 0;
  top: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(114, 148, 255, 0.11) 0%,
    rgba(195, 76, 255, 0.055) 24%,
    rgba(114, 148, 255, 0.018) 46%,
    transparent 69%);
  mix-blend-mode: screen;
  transition: opacity 0.26s ease;
  will-change: left, top, opacity;
}

.magic-star {
  position: absolute;
  z-index: 1;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  pointer-events: none;
  background: rgb(var(--bento-glow));
  box-shadow: 0 0 9px rgba(var(--bento-glow), 0.82);
}

.magic-ripple {
  position: absolute;
  z-index: 4;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(var(--bento-glow), 0.55);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, rgba(var(--bento-glow), 0.18), transparent 68%);
}

/* Larger animated navigation */
.dark-header {
  position: fixed !important;
  z-index: 60 !important;
  top: 20px !important;
  left: 4vw !important;
  right: 4vw !important;
  height: 86px !important;
  padding: 0 28px !important;
  border-radius: 22px !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: linear-gradient(115deg, rgba(8, 11, 17, 0.82), rgba(16, 20, 31, 0.68)) !important;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.24), inset 0 1px rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(24px) saturate(1.25) !important;
  animation: nav-enter 0.8s cubic-bezier(.18,.85,.22,1) both;
  transition: height 0.38s ease, top 0.38s ease, transform 0.38s ease, background 0.38s ease;
}

.dark-header.is-scrolled {
  top: 12px !important;
  height: 74px !important;
  transform: scale(0.985);
  background: rgba(7, 10, 16, 0.9) !important;
}

.dark-header .dark-brand b { font-size: 20px; }
.dark-header .dark-brand small { margin-top: 4px; font-size: 8px; }
.dark-header .brand-signal {
  width: 12px;
  height: 12px;
  animation: signal-pulse 2.2s ease-in-out infinite;
}

.dark-header .nav {
  align-items: center;
  gap: 5px !important;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
}

.dark-header .nav a {
  padding: 12px 17px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .08em;
  color: #b9c1cf;
  transition: color .28s ease, background .28s ease, transform .28s ease, box-shadow .28s ease;
}

.dark-header .nav a::after { display: none; }
.dark-header .nav a:hover {
  color: #fff;
  transform: translateY(-2px);
  background: rgba(114,148,255,.10);
}

.dark-header .nav a.is-active {
  color: #fff;
  background: linear-gradient(120deg, rgba(114,148,255,.22), rgba(195,76,255,.14));
  box-shadow: inset 0 0 0 1px rgba(147,172,255,.22), 0 7px 24px rgba(75,93,180,.13);
}

.dark-header .nav-contact {
  padding: 13px 18px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;
  font-size: 10px;
  transition: transform .28s ease, border-color .28s ease, background .28s ease;
}

.dark-header .nav-contact:hover {
  transform: translateY(-2px);
  border-color: rgba(132,241,228,.38);
  background: rgba(132,241,228,.07);
}

@keyframes nav-enter {
  from { opacity: 0; transform: translateY(-28px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes signal-pulse {
  0%, 100% { transform: scale(.84); box-shadow: 0 0 12px rgba(132,241,228,.55); }
  50% { transform: scale(1.12); box-shadow: 0 0 25px rgba(132,241,228,.95); }
}

@media (max-width: 950px) {
  .dark-header { grid-template-columns: 1fr auto !important; }
  .dark-header .menu-toggle {
    display: block;
    justify-self: end;
    padding: 11px 15px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
  }
  .dark-header .nav-contact { display: none; }
  .dark-header .nav {
    display: none;
    position: absolute;
    top: 94px;
    right: 0;
    width: min(78vw, 340px);
    flex-direction: column;
    align-items: stretch;
    gap: 6px !important;
    padding: 12px;
    border-radius: 18px;
    background: rgba(8,11,18,.96);
    box-shadow: 0 25px 70px rgba(0,0,0,.42);
  }
  .dark-header .nav.open { display: flex; }
  .dark-header .nav a { width: 100%; padding: 15px 16px; font-size: 13px; }
}

@media (max-width: 650px) {
  .magic-global-spotlight { display: none; }
  .magic-bento-surface { transform: none !important; }
  .dark-header {
    top: 12px !important;
    left: 4vw !important;
    right: 4vw !important;
    height: 70px !important;
    padding: 0 18px !important;
    border-radius: 18px !important;
  }
  .dark-header.is-scrolled { height: 64px !important; }
  .dark-header .dark-brand b { font-size: 18px; }
  .dark-header .menu-toggle {
    display: block;
    padding: 11px 14px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
  }
  .dark-header .nav {
    top: 78px !important;
    right: 0 !important;
    width: min(82vw, 320px);
    gap: 6px !important;
    padding: 12px !important;
    border-radius: 18px !important;
    background: rgba(8,11,18,.96) !important;
    box-shadow: 0 25px 70px rgba(0,0,0,.42);
  }
  .dark-header .nav a { width: 100%; padding: 15px 16px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .dark-header, .dark-header .brand-signal { animation: none; }
  .magic-bento-surface { transform: none !important; transition: none; }
  .magic-global-spotlight, .magic-star, .magic-ripple { display: none; }
}