/* ==========================================================
   Fng — Living Bento
   Clear liquid objects on a silver spatial canvas.
   Loaded after design-system.css as an intentional override.
   ========================================================== */

:root {
  --lb-bg: #e9ebee;
  --lb-bg-raised: #f3f4f6;
  --lb-ink: #11151b;
  --lb-muted: #66707d;
  --lb-faint: #8b949f;
  --lb-cyan: #54d7ef;
  --lb-blue: #4888ff;
  --lb-violet: #9a7cff;
  --lb-rose: #ef74a9;
  --lb-lime: #8bd4a8;
  --lb-amber: #ffc56f;
  --lb-clear: rgba(255, 255, 255, 0.37);
  --lb-clear-strong: rgba(255, 255, 255, 0.54);
  --lb-clear-soft: rgba(255, 255, 255, 0.22);
  --lb-edge: rgba(255, 255, 255, 0.86);
  --lb-edge-soft: rgba(255, 255, 255, 0.55);
  --lb-shadow: rgba(57, 65, 78, 0.11);
  --lb-shadow-soft: rgba(57, 65, 78, 0.065);
  --lb-radius: 2rem;
  --lb-radius-lg: 2.65rem;
  --lb-radius-xl: 3.2rem;
  --lb-blur: 4.5px;
  --lb-ease-liquid: cubic-bezier(0.18, 0.89, 0.26, 1.22);
  --lb-ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --lb-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --pointer-x: 50%;
  --pointer-y: 18%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
}

.dark {
  --lb-bg: #121519;
  --lb-bg-raised: #1b1f24;
  --lb-ink: #f5f7f8;
  --lb-muted: #aeb7c1;
  --lb-faint: #7f8995;
  --lb-clear: rgba(38, 43, 50, 0.49);
  --lb-clear-strong: rgba(44, 50, 58, 0.62);
  --lb-clear-soft: rgba(255, 255, 255, 0.075);
  --lb-edge: rgba(255, 255, 255, 0.22);
  --lb-edge-soft: rgba(255, 255, 255, 0.13);
  --lb-shadow: rgba(0, 0, 0, 0.31);
  --lb-shadow-soft: rgba(0, 0, 0, 0.18);
}

html {
  background: var(--lb-bg);
}

body {
  min-width: 320px;
  color: var(--lb-ink);
  font-family: Inter, "SF Pro Display", "SF Pro Text", -apple-system,
    BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background:
    radial-gradient(ellipse 56% 38% at 7% 13%, rgba(116, 181, 255, 0.15), transparent 72%),
    radial-gradient(ellipse 52% 35% at 96% 8%, rgba(238, 151, 203, 0.12), transparent 74%),
    radial-gradient(ellipse 40% 32% at 60% 92%, rgba(132, 222, 205, 0.10), transparent 72%),
    linear-gradient(145deg, #f3f4f6 0%, var(--lb-bg) 47%, #f0f1f2 100%);
  background-attachment: fixed;
}

.dark body {
  background:
    radial-gradient(ellipse 55% 38% at 6% 12%, rgba(72, 136, 255, 0.12), transparent 72%),
    radial-gradient(ellipse 48% 35% at 94% 8%, rgba(154, 124, 255, 0.09), transparent 74%),
    radial-gradient(ellipse 45% 35% at 63% 94%, rgba(84, 215, 239, 0.065), transparent 73%),
    linear-gradient(145deg, #1a1e23 0%, var(--lb-bg) 49%, #171a1f 100%);
}

body::before {
  inset: 0;
  opacity: 0.62;
  background:
    linear-gradient(rgba(255,255,255,0.20) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.19) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 74%);
  mask-image: linear-gradient(to bottom, #000, transparent 74%);
}

body::after {
  width: 62vw;
  height: 42vw;
  min-width: 42rem;
  min-height: 28rem;
  left: 19vw;
  top: -28vw;
  border-radius: 45% 55% 64% 36% / 58% 36% 64% 42%;
  background: rgba(255,255,255,0.44);
  box-shadow: 0 90px 180px rgba(255,255,255,0.48);
  filter: blur(2px);
  transform: rotate(-8deg);
}

.dark body::before { opacity: 0.14; }
.dark body::after {
  background: rgba(255,255,255,0.035);
  box-shadow: 0 90px 180px rgba(255,255,255,0.025);
}

::selection {
  color: var(--lb-ink);
  background: rgba(84, 215, 239, 0.28);
}

a,
button,
input,
select,
textarea { font-family: inherit; }

.content-container {
  width: min(1320px, calc(100% - 3rem));
  max-width: 1320px;
}

.page-main {
  padding-top: clamp(9rem, 12vw, 11rem);
}

.section {
  padding-block: clamp(4.5rem, 7vw, 7.5rem);
}

/* --- Shared optical material -------------------------------- */

.glass,
.glass-lg,
.glass-xl,
.card,
.search-box,
.liquid-surface,
.glass-xs {
  position: relative;
  isolation: isolate;
  border: 1px solid transparent;
  background:
    linear-gradient(145deg,
      rgba(255,255,255,0.67),
      rgba(255,255,255,0.17) 40%,
      rgba(245,249,252,0.34) 72%,
      rgba(255,255,255,0.24)) padding-box,
    conic-gradient(from 205deg at 18% 10%,
      rgba(255,255,255,0.98),
      rgba(84,215,239,0.50),
      rgba(255,255,255,0.72) 30%,
      rgba(239,116,169,0.34) 52%,
      rgba(255,255,255,0.94) 72%,
      rgba(72,136,255,0.42),
      rgba(255,255,255,0.98)) border-box;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.95),
    inset 1px 0 0 rgba(84,215,239,0.23),
    inset -1px 0 0 rgba(239,116,169,0.16),
    inset 0 -1px 0 rgba(255,255,255,0.38),
    0 24px 70px var(--lb-shadow),
    0 3px 8px var(--lb-shadow-soft);
  -webkit-backdrop-filter: blur(var(--lb-blur)) saturate(1.1);
  backdrop-filter: blur(var(--lb-blur)) saturate(1.1);
  transform-style: preserve-3d;
}

.dark .glass,
.dark .glass-lg,
.dark .glass-xl,
.dark .card,
.dark .search-box,
.dark .liquid-surface,
.dark .glass-xs {
  background:
    linear-gradient(145deg,
      rgba(52,58,66,0.69),
      rgba(26,30,36,0.42) 42%,
      rgba(43,49,57,0.55) 73%,
      rgba(27,31,37,0.46)) padding-box,
    conic-gradient(from 205deg at 18% 10%,
      rgba(255,255,255,0.32),
      rgba(84,215,239,0.34),
      rgba(255,255,255,0.12) 31%,
      rgba(239,116,169,0.26) 52%,
      rgba(255,255,255,0.23) 72%,
      rgba(72,136,255,0.34),
      rgba(255,255,255,0.30)) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    inset 1px 0 0 rgba(84,215,239,0.18),
    inset -1px 0 0 rgba(239,116,169,0.13),
    0 28px 76px var(--lb-shadow),
    0 3px 10px var(--lb-shadow-soft);
}

.glass,
.glass-xs { border-radius: 1.5rem 1.9rem 1.55rem 1.85rem; }
.glass-lg { border-radius: 2.35rem 2.8rem 2.3rem 2.7rem; }
.glass-xl { border-radius: 3rem 3.65rem 3.1rem 3.5rem; }
.card { border-radius: 2rem 2.55rem 2.05rem 2.45rem; }
.search-box { border-radius: 2rem 2.65rem 2.1rem 2.5rem; }

.glass::before,
.glass-lg::before,
.glass-xl::before,
.card::before,
.search-box::before,
.liquid-surface::before,
.glass-xs::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.76;
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255,255,255,0.90), transparent 24%),
    linear-gradient(112deg, transparent 8%, rgba(255,255,255,0.31) 27%, transparent 43%),
    radial-gradient(ellipse 76% 18% at 42% 101%, rgba(84,215,239,0.13), transparent 72%);
  mix-blend-mode: screen;
  transition: opacity 280ms ease;
}

.glass::after,
.glass-lg::after,
.glass-xl::after,
.card::after,
.search-box::after,
.liquid-surface::after,
.glass-xs::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 54%;
  height: 210%;
  left: -55%;
  top: -62%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.20;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.56), transparent);
  filter: blur(3px);
  transform: rotate(27deg);
  animation: lb-caustic-pass 10s var(--lb-ease-smooth) infinite;
}

.glass > *,
.glass-lg > *,
.glass-xl > *,
.card > *,
.search-box > *,
.liquid-surface > *,
.glass-xs > * {
  position: relative;
  z-index: 2;
}

@keyframes lb-caustic-pass {
  0%, 28% { left: -55%; opacity: 0.06; }
  52% { opacity: 0.46; }
  78%, 100% { left: 118%; opacity: 0.03; }
}

@media (hover: hover) and (pointer: fine) {
  .glass-lg:hover,
  .glass-xl:hover,
  .card:hover,
  .liquid-surface:hover {
    border-radius: 2.75rem 2rem 2.85rem 1.95rem;
    transform: perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-4px);
    box-shadow:
      inset 0 1.5px 0 rgba(255,255,255,0.98),
      inset 1px 0 rgba(84,215,239,0.24),
      inset -1px 0 rgba(239,116,169,0.18),
      0 32px 82px rgba(57,65,78,0.15),
      0 4px 12px rgba(57,65,78,0.08);
  }
}

/* --- Navigation / mobile sheet ----------------------------- */

.nav-container {
  height: 88px;
  padding: 12px 0;
  border: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: none;
}

.nav-inner {
  width: min(1320px, calc(100% - 3rem));
  height: 64px;
  margin-inline: auto;
  padding: 7px 9px 7px 17px;
  border: 1px solid transparent;
  border-radius: 1.55rem 1.95rem 1.55rem 1.85rem;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.68), rgba(255,255,255,0.25)) padding-box,
    conic-gradient(from 210deg, rgba(255,255,255,0.98), rgba(84,215,239,0.40), rgba(255,255,255,0.64), rgba(239,116,169,0.25), rgba(255,255,255,0.92)) border-box;
  box-shadow:
    inset 0 1px rgba(255,255,255,0.96),
    inset 1px 0 rgba(84,215,239,0.18),
    inset -1px 0 rgba(239,116,169,0.12),
    0 18px 48px rgba(57,65,78,0.095);
  -webkit-backdrop-filter: blur(4px) saturate(1.08);
  backdrop-filter: blur(4px) saturate(1.08);
  pointer-events: auto;
  transition: transform 450ms var(--lb-ease-smooth), border-radius 650ms var(--lb-ease-liquid), box-shadow 350ms ease;
}

.dark .nav-inner {
  background:
    linear-gradient(145deg, rgba(52,58,67,0.72), rgba(25,29,35,0.55)) padding-box,
    conic-gradient(from 210deg, rgba(255,255,255,0.28), rgba(84,215,239,0.26), rgba(255,255,255,0.12), rgba(239,116,169,0.20), rgba(255,255,255,0.25)) border-box;
  box-shadow: inset 0 1px rgba(255,255,255,0.20), 0 20px 52px rgba(0,0,0,0.26);
}

.nav-container.scrolled .nav-inner {
  transform: translateY(-2px);
  border-radius: 1.9rem 1.45rem 2rem 1.5rem;
  box-shadow: inset 0 1px rgba(255,255,255,0.95), 0 22px 60px rgba(57,65,78,0.13);
}

.nav-inner::before {
  background:
    radial-gradient(circle at var(--pointer-x) 0%, rgba(255,255,255,0.82), transparent 28%),
    linear-gradient(100deg, transparent 8%, rgba(255,255,255,0.29), transparent 38%);
  opacity: 0.72;
}

.nav-inner::after {
  content: none;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  min-width: 42px;
  height: 42px;
  opacity: 1;
  transform-origin: center;
  transition: transform 420ms var(--lb-ease-liquid), opacity 220ms ease;
}

.nav-logo img {
  width: 36px !important;
  height: 36px !important;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 7px 13px rgba(72, 92, 150, 0.15));
}

.nav-logo:hover { transform: scale(1.08) rotate(-3deg); opacity: 1; }

.nav-links { gap: 0.2rem; }

.nav-link,
.nav-link-cta {
  min-height: 40px;
  padding: 0 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 0.95rem 1.2rem 1rem 1.15rem;
  color: var(--lb-muted);
  font-size: 0.8rem;
  font-weight: 620;
  letter-spacing: -0.01em;
  background: transparent;
  transition: color 220ms ease, background 280ms ease, transform 420ms var(--lb-ease-liquid), border-radius 520ms var(--lb-ease-liquid);
}

.nav-link:hover,
.nav-link-cta:hover,
.nav-link.active,
.nav-link-cta.active {
  color: var(--lb-ink);
  background: rgba(255,255,255,0.49);
  border-color: rgba(255,255,255,0.65);
  border-radius: 1.2rem 0.85rem 1.25rem 0.9rem;
  transform: translateY(-1px) scale(1.02);
  box-shadow: inset 0 1px rgba(255,255,255,0.84), 0 7px 20px rgba(57,65,78,0.06);
}

.dark .nav-link:hover,
.dark .nav-link-cta:hover,
.dark .nav-link.active,
.dark .nav-link-cta.active {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.12);
}

.nav-actions { gap: 0.4rem; }

.nav-icon-btn,
.nav-menu-btn {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,0.64);
  border-radius: 0.95rem 1.2rem 1rem 1.15rem;
  color: var(--lb-ink);
  background: rgba(255,255,255,0.39);
  box-shadow: inset 0 1px rgba(255,255,255,0.90), 0 6px 16px rgba(57,65,78,0.065);
  transition: transform 420ms var(--lb-ease-liquid), border-radius 520ms var(--lb-ease-liquid), background 240ms ease;
}

.dark .nav-icon-btn,
.dark .nav-menu-btn {
  border-color: rgba(255,255,255,0.13);
  background: rgba(255,255,255,0.075);
}

.nav-icon-btn:hover,
.nav-menu-btn:hover {
  color: var(--lb-ink);
  background: rgba(255,255,255,0.68);
  border-radius: 1.25rem 0.85rem 1.2rem 0.9rem;
  transform: scale(1.08) rotate(-2deg);
}

.mobile-menu {
  top: 88px;
  left: 1rem;
  right: 1rem;
  width: auto;
  padding: 0.75rem;
  border: 1px solid transparent;
  border-radius: 2rem 2.55rem 2rem 2.45rem;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.80), rgba(255,255,255,0.43)) padding-box,
    conic-gradient(from 215deg, white, rgba(84,215,239,0.42), rgba(255,255,255,0.67), rgba(239,116,169,0.25), white) border-box;
  box-shadow: inset 0 1px rgba(255,255,255,0.95), 0 28px 70px rgba(57,65,78,0.16);
  -webkit-backdrop-filter: blur(5px) saturate(1.08);
  backdrop-filter: blur(5px) saturate(1.08);
}

.dark .mobile-menu {
  background:
    linear-gradient(145deg, rgba(48,54,62,0.90), rgba(24,28,34,0.78)) padding-box,
    conic-gradient(from 215deg, rgba(255,255,255,0.27), rgba(84,215,239,0.25), rgba(255,255,255,0.10), rgba(239,116,169,0.18), rgba(255,255,255,0.24)) border-box;
}

.mobile-menu.open {
  animation: lb-sheet-in 480ms var(--lb-ease-liquid) both;
}

@keyframes lb-sheet-in {
  from { opacity: 0; transform: translateY(-12px) scale(0.97); border-radius: 1.4rem 3rem 1.5rem 2.8rem; }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.mobile-menu a {
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  border-radius: 1.2rem 1.55rem 1.2rem 1.45rem;
  color: var(--lb-muted);
}

.mobile-menu a:hover,
.mobile-menu a.active {
  color: var(--lb-ink);
  border-color: rgba(255,255,255,0.60);
  background: rgba(255,255,255,0.43);
}

/* --- Home: asymmetric hero + Living Bento ------------------ */

body[data-page="home"] .hero-section {
  width: min(1320px, calc(100% - 3rem));
  min-height: 540px;
  margin: 104px auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
  overflow: visible;
}

body[data-page="home"] .hero-section > .relative {
  grid-column: 1 / span 8;
  min-height: 520px;
  padding: clamp(2.6rem, 5vw, 4.4rem) !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid transparent;
  border-radius: 3rem 4rem 3.2rem 3.8rem;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.65), rgba(255,255,255,0.18) 41%, rgba(245,249,252,0.35) 72%, rgba(255,255,255,0.24)) padding-box,
    conic-gradient(from 205deg at 18% 10%, white, rgba(84,215,239,0.50), rgba(255,255,255,0.72) 30%, rgba(239,116,169,0.34) 52%, rgba(255,255,255,0.94) 72%, rgba(72,136,255,0.42), white) border-box;
  box-shadow: inset 0 1.5px white, inset 1px 0 rgba(84,215,239,0.22), inset -1px 0 rgba(239,116,169,0.14), 0 30px 82px var(--lb-shadow);
  -webkit-backdrop-filter: blur(4.5px) saturate(1.08);
  backdrop-filter: blur(4.5px) saturate(1.08);
  animation: lb-hero-morph 8s ease-in-out infinite alternate;
}

.dark body[data-page="home"] .hero-section > .relative {
  background:
    linear-gradient(145deg, rgba(52,58,66,0.68), rgba(26,30,36,0.42) 42%, rgba(43,49,57,0.55) 73%, rgba(27,31,37,0.46)) padding-box,
    conic-gradient(from 205deg, rgba(255,255,255,0.31), rgba(84,215,239,0.31), rgba(255,255,255,0.12), rgba(239,116,169,0.23), rgba(255,255,255,0.23), rgba(72,136,255,0.31), rgba(255,255,255,0.29)) border-box;
}

@keyframes lb-hero-morph {
  to { border-radius: 4rem 3rem 4.1rem 3.05rem; }
}

body[data-page="home"] .hero-section::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: calc(66.666% - 6px);
  top: 202px;
  width: 54px;
  height: 105px;
  border-radius: 44% 56% 52% 48% / 35% 47% 53% 65%;
  background: linear-gradient(90deg, rgba(255,255,255,0.23), rgba(255,255,255,0.56), rgba(255,255,255,0.20));
  border-block: 1px solid rgba(255,255,255,0.48);
  box-shadow: inset 0 1px rgba(255,255,255,0.74), 1px 0 rgba(239,116,169,0.10), -1px 0 rgba(84,215,239,0.14);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: lb-bridge-pulse 5.4s ease-in-out infinite;
}

@keyframes lb-bridge-pulse {
  0%, 100% { transform: scaleX(0.82) scaleY(0.9); border-radius: 44% 56% 48% 52% / 35% 47% 53% 65%; }
  50% { transform: scaleX(1.13) scaleY(1.08); border-radius: 56% 44% 62% 38% / 58% 39% 61% 42%; }
}

body[data-page="home"] .hero-section::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: calc(33.333% - 9px);
  height: 520px;
  border: 1px solid transparent;
  border-radius: 4rem 3rem 4.2rem 2.8rem;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,0.92), transparent 12%),
    radial-gradient(circle at 64% 70%, rgba(84,215,239,0.20), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,0.61), rgba(255,255,255,0.14) 48%, rgba(231,237,244,0.32)) padding-box,
    conic-gradient(from 185deg, white, rgba(84,215,239,0.46), rgba(255,255,255,0.71), rgba(239,116,169,0.30), white) border-box;
  box-shadow: inset 12px 14px 22px rgba(255,255,255,0.42), inset -13px -8px 28px rgba(82,128,187,0.10), 2px 0 rgba(239,86,162,0.16), -2px 0 rgba(42,205,240,0.20), 0 38px 78px var(--lb-shadow);
  -webkit-backdrop-filter: blur(4px) saturate(1.08);
  backdrop-filter: blur(4px) saturate(1.08);
  animation: lb-orbit-shell 7.2s var(--lb-ease-liquid) infinite alternate;
}

.dark body[data-page="home"] .hero-section::after {
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,0.25), transparent 12%),
    radial-gradient(circle at 64% 70%, rgba(84,215,239,0.13), transparent 28%),
    linear-gradient(145deg, rgba(53,60,69,0.68), rgba(25,29,35,0.40) 48%, rgba(39,45,52,0.54)) padding-box,
    conic-gradient(from 185deg, rgba(255,255,255,0.28), rgba(84,215,239,0.27), rgba(255,255,255,0.12), rgba(239,116,169,0.20), rgba(255,255,255,0.25)) border-box;
}

@keyframes lb-orbit-shell {
  to { border-radius: 3rem 4.3rem 3.1rem 4rem; }
}

body[data-page="home"] #particles-canvas {
  opacity: 0.07 !important;
  filter: grayscale(1);
}

body[data-page="home"] .hero-aurora {
  inset: -8%;
  opacity: 0.18;
  filter: grayscale(0.5) saturate(0.6);
}

body[data-page="home"] .hero-light-orb,
body[data-page="home"] .hero-glow { opacity: 0.12; filter: blur(70px) saturate(0.55); }
body[data-page="home"] .bg-noise { opacity: 0.025; }
body[data-page="home"] .bg-grid { opacity: 0.16; }

body[data-page="home"] .badge {
  color: var(--lb-muted);
  border-color: rgba(255,255,255,0.66);
  border-radius: 1rem 1.35rem 1rem 1.28rem;
  background: rgba(255,255,255,0.42);
  box-shadow: inset 0 1px rgba(255,255,255,0.94), 0 8px 22px rgba(57,65,78,0.07);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.dark body[data-page="home"] .badge {
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.075);
}

body[data-page="home"] .badge-dot {
  background: conic-gradient(from 210deg, var(--lb-cyan), var(--lb-violet), var(--lb-rose), var(--lb-cyan));
  box-shadow: 1px 0 rgba(239,116,169,0.22), -1px 0 rgba(84,215,239,0.28), 0 0 0 4px rgba(84,215,239,0.08);
  animation: lb-dot-morph 4s var(--lb-ease-liquid) infinite alternate;
}

@keyframes lb-dot-morph {
  to { border-radius: 62% 38% 55% 45%; transform: rotate(20deg) scale(1.12); }
}

body[data-page="home"] .logo-wrapper {
  margin: 0.8rem 0 0.5rem !important;
  align-self: flex-start;
}

body[data-page="home"] .fng-logo-svg {
  width: clamp(9rem, 15vw, 12.75rem);
  height: auto;
  max-height: 12.75rem;
  object-fit: contain;
  filter: drop-shadow(0 18px 34px rgba(88,88,180,0.14));
  animation: lb-logo-float 6.5s ease-in-out 1.2s infinite;
}

@keyframes lb-logo-float {
  0%, 100% { transform: translateY(0) rotate(-0.4deg); }
  50% { transform: translateY(-7px) rotate(0.6deg); }
}

body[data-page="home"] .logo-aura {
  width: 120%;
  height: 120%;
  opacity: 0.22;
  filter: blur(42px) saturate(0.7);
}

body[data-page="home"] .hero-subtitle {
  max-width: 37rem;
  margin: 0;
  color: var(--lb-muted);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.75;
  text-align: left;
}

body[data-page="home"] .hero-accent {
  color: var(--lb-ink);
  background: none;
  font-weight: 720;
}

body[data-page="home"] .hero-actions {
  justify-content: flex-start;
  margin-top: 1.75rem;
}

body[data-page="home"] .section {
  padding-top: 5.25rem;
}

body[data-page="home"] .section-header {
  max-width: none;
  margin-bottom: 2rem;
  text-align: left;
}

body[data-page="home"] .section-header h2 {
  font-size: clamp(2.5rem, 5vw, 4.8rem);
}

body[data-page="home"] .section .content-container > .grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 14px !important;
  perspective: 1200px;
}

body[data-page="home"] .feature-card,
body[data-page="home"] .section .content-container > .grid > .card {
  min-height: 210px;
  padding: 1.55rem !important;
  overflow: visible;
  transform: translateZ(0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform 620ms var(--lb-ease-smooth), border-radius 720ms var(--lb-ease-liquid), box-shadow 420ms ease;
}

body[data-page="home"] .feature-card:nth-child(1) { grid-column: span 5; border-radius: 2rem 2.75rem 1.9rem 2.6rem; }
body[data-page="home"] .feature-card:nth-child(2) { grid-column: span 3; border-radius: 2.6rem 1.9rem 2.55rem 2rem; }
body[data-page="home"] .feature-card:nth-child(3) { grid-column: span 4; border-radius: 1.9rem 2.7rem 2.2rem 2.65rem; }
body[data-page="home"] .feature-card:nth-child(4) { grid-column: span 4; border-radius: 2.75rem 1.9rem 2.6rem 2rem; }
body[data-page="home"] .feature-card:nth-child(5) { grid-column: span 4; border-radius: 2rem 2.65rem 1.9rem 2.75rem; }
body[data-page="home"] .section .content-container > .grid > .card:nth-child(6) { grid-column: span 4; border-radius: 2.5rem 2rem 2.75rem 1.9rem; }

body[data-page="home"] .feature-card::after,
body[data-page="home"] .section .content-container > .grid > .card:nth-child(6)::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  width: 31px;
  height: 70px;
  top: 70px;
  right: -22px;
  left: auto;
  border-radius: 40% 60% 53% 47% / 35% 47% 53% 65%;
  opacity: 0.72;
  background: linear-gradient(90deg, rgba(255,255,255,0.22), rgba(255,255,255,0.55), rgba(255,255,255,0.19));
  border-block: 1px solid rgba(255,255,255,0.47);
  filter: none;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transform: none;
  transform-origin: left center;
  animation: lb-card-bridge 5.2s ease-in-out infinite;
  transition: transform 620ms var(--lb-ease-liquid), opacity 320ms ease, border-radius 540ms var(--lb-ease-liquid);
}

body[data-page="home"] .feature-card:nth-child(3)::after,
body[data-page="home"] .section .content-container > .grid > .card:nth-child(6)::after {
  display: none;
}

@keyframes lb-card-bridge {
  0%, 100% { transform: scaleX(0.82) scaleY(0.91); }
  50% { transform: scaleX(1.12) scaleY(1.08); border-radius: 58% 42% 62% 38% / 51% 38% 62% 49%; }
}

@media (hover: hover) and (pointer: fine) {
  body[data-page="home"] .feature-card:hover,
  body[data-page="home"] .section .content-container > .grid > .card:nth-child(6):hover {
    border-radius: 2.8rem 1.85rem 2.9rem 1.8rem;
    transform: translateY(-5px) scale(1.012) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  }

  body[data-page="home"] .feature-card:hover::after {
    opacity: 0.96;
    transform: scaleX(1.35) scaleY(1.12);
  }
}

body[data-page="home"] .feature-card .icon-box,
body[data-page="home"] .section .content-container > .grid > .card .icon-box {
  width: 2.8rem;
  height: 2.8rem;
  margin-bottom: 2.4rem;
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: 1rem 1.3rem 1rem 1.25rem;
  background: rgba(255,255,255,0.34);
  box-shadow: inset 0 1px rgba(255,255,255,0.92), 1px 0 rgba(239,116,169,0.12), -1px 0 rgba(84,215,239,0.17), 0 9px 22px rgba(57,65,78,0.07);
}

.dark body[data-page="home"] .feature-card .icon-box,
.dark body[data-page="home"] .section .content-container > .grid > .card .icon-box {
  border-color: rgba(255,255,255,0.13);
  background: rgba(255,255,255,0.075);
}

/* --- Type, buttons and form controls ------------------------ */

.section-header h2 {
  color: var(--lb-ink);
  font-weight: 760;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.section-header p,
.footer-tagline,
.footer-copy { color: var(--lb-muted); }

.text-gradient,
.text-gradient-static {
  color: var(--lb-ink);
  background: none;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}

.btn {
  min-height: 44px;
  border: 1px solid rgba(255,255,255,0.66);
  border-radius: 1.15rem 1.55rem 1.2rem 1.45rem;
  font-weight: 680;
  letter-spacing: -0.01em;
  overflow: hidden;
  transition: transform 420ms var(--lb-ease-liquid), border-radius 560ms var(--lb-ease-liquid), box-shadow 320ms ease, color 220ms ease, background 220ms ease;
}

.btn-lg {
  min-height: 50px;
  padding-inline: 1.45rem;
  border-radius: 1.25rem 1.7rem 1.3rem 1.6rem;
}

.btn-sm {
  min-height: 38px;
  padding: 0.55rem 1rem;
  border-radius: 0.95rem 1.25rem 1rem 1.2rem;
}

.btn-primary {
  color: #fff;
  border-color: rgba(255,255,255,0.17);
  background:
    radial-gradient(circle at var(--pointer-x) 0%, rgba(255,255,255,0.34), transparent 29%),
    linear-gradient(145deg, #303743, #12161c 72%);
  box-shadow: inset 0 1px rgba(255,255,255,0.31), 0 13px 29px rgba(23,28,35,0.18);
}

.btn-glass,
.btn-ghost {
  color: var(--lb-ink);
  border-color: rgba(255,255,255,0.65);
  background: linear-gradient(140deg, rgba(255,255,255,0.69), rgba(255,255,255,0.27));
  box-shadow: inset 0 1px rgba(255,255,255,0.94), 0 10px 25px rgba(54,63,76,0.075);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.dark .btn-glass,
.dark .btn-ghost {
  border-color: rgba(255,255,255,0.13);
  background: linear-gradient(140deg, rgba(255,255,255,0.12), rgba(255,255,255,0.055));
  box-shadow: inset 0 1px rgba(255,255,255,0.17), 0 10px 25px rgba(0,0,0,0.16);
}

.btn::before {
  opacity: 0.24;
  background: radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255,255,255,0.82), transparent 37%);
}

.btn:hover {
  border-radius: 1.6rem 1rem 1.65rem 1.05rem;
  transform: translateY(-3px) scaleX(1.045) scaleY(0.975);
}

.btn:active {
  border-radius: 1rem 1.55rem 1.05rem 1.5rem;
  transform: translateY(0) scaleX(0.96) scaleY(1.055);
}

.btn-ripple {
  background: rgba(255,255,255,0.48);
  mix-blend-mode: screen;
}

.glass-input,
.glass-select,
#search-input,
input:not([type="radio"]):not([type="checkbox"]),
textarea,
select {
  color: var(--lb-ink);
  border: 1px solid rgba(255,255,255,0.58);
  border-radius: 1rem 1.3rem 1.05rem 1.25rem;
  background: rgba(255,255,255,0.28);
  box-shadow: inset 0 1px rgba(255,255,255,0.72);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: border-color 220ms ease, box-shadow 260ms ease, border-radius 420ms var(--lb-ease-liquid), background 220ms ease;
}

.dark .glass-input,
.dark .glass-select,
.dark #search-input,
.dark input:not([type="radio"]):not([type="checkbox"]),
.dark textarea,
.dark select {
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
}

.glass-input:focus,
.glass-select:focus,
#search-input:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: rgba(72,136,255,0.46);
  border-radius: 1.3rem 0.95rem 1.35rem 1rem;
  background: rgba(255,255,255,0.44);
  box-shadow: 0 0 0 4px rgba(72,136,255,0.09), inset 0 1px rgba(255,255,255,0.78);
}

.search-box {
  padding: 0.7rem !important;
  overflow: hidden;
}

.search-box form { min-height: 3.6rem; }

.search-box:focus-within {
  border-color: transparent !important;
  border-radius: 2.65rem 1.9rem 2.7rem 1.95rem;
  box-shadow: inset 0 1.5px white, inset 1px 0 rgba(84,215,239,0.24), inset -1px 0 rgba(239,116,169,0.17), 0 0 0 4px rgba(72,136,255,0.07), 0 30px 78px var(--lb-shadow) !important;
}

.search-box #search-input {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.search-box #search-input:focus { box-shadow: none; background: transparent; }

.quiz-option {
  min-height: 52px;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(255,255,255,0.58) !important;
  border-radius: 1.15rem 1.5rem 1.2rem 1.42rem;
  color: var(--lb-ink);
  background: rgba(255,255,255,0.26) !important;
  box-shadow: inset 0 1px rgba(255,255,255,0.70), 0 7px 18px rgba(57,65,78,0.05);
  transition: transform 360ms var(--lb-ease-liquid), border-radius 450ms var(--lb-ease-liquid), background 220ms ease, box-shadow 260ms ease;
}

.dark .quiz-option {
  border-color: rgba(255,255,255,0.11) !important;
  background: rgba(255,255,255,0.055) !important;
}

.quiz-option:hover {
  border-color: rgba(72,136,255,0.32) !important;
  border-radius: 1.5rem 1.05rem 1.55rem 1.1rem;
  background: rgba(255,255,255,0.43) !important;
  transform: translateY(-2px) scale(1.008);
}

.quiz-option.selected {
  color: var(--lb-ink);
  border-color: rgba(72,136,255,0.45) !important;
  background: rgba(72,136,255,0.11) !important;
  box-shadow: 0 0 0 4px rgba(72,136,255,0.07), 0 12px 30px rgba(72,136,255,0.10);
}

/* --- Interior-page Bento arrangements ---------------------- */

body[data-page="study"] .content-container > .grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

body[data-page="study"] .content-container > .grid > .glass-lg:nth-child(1) {
  grid-column: span 7;
  border-radius: 2.5rem 3rem 2.35rem 2.8rem;
}

body[data-page="study"] .content-container > .grid > .glass-lg:nth-child(2) {
  grid-column: span 5;
  border-radius: 3rem 2.3rem 2.95rem 2.4rem;
}

body[data-page="study"] .content-container > .grid > .glass-lg:nth-child(3) {
  grid-column: 1 / -1;
  border-radius: 2.5rem 3.25rem 2.6rem 3.1rem;
}

body[data-page="study"] .glass-xs {
  background: rgba(255,255,255,0.24);
  box-shadow: inset 0 1px rgba(255,255,255,0.72);
}

.countdown-digit,
.timer-display {
  color: var(--lb-ink);
  font-weight: 760;
  letter-spacing: -0.06em;
}

body[data-page="play"] .content-container > .grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

body[data-page="play"] .content-container > .grid > :first-child { grid-column: span 3; }
body[data-page="play"] .content-container > .grid > :nth-child(2) { grid-column: span 9; }

#board-container {
  border: 1px solid rgba(255,255,255,0.77) !important;
  border-radius: 2.65rem 3.2rem 2.55rem 3rem !important;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.70), transparent 28%),
    linear-gradient(145deg, rgba(240,243,246,0.82), rgba(203,211,219,0.57)) !important;
  box-shadow:
    inset 0 1.5px white,
    inset 1px 0 rgba(84,215,239,0.17),
    inset -1px 0 rgba(239,116,169,0.12),
    0 30px 76px rgba(57,65,78,0.15) !important;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: border-radius 720ms var(--lb-ease-liquid), transform 620ms var(--lb-ease-smooth);
}

.dark #board-container {
  border-color: rgba(255,255,255,0.16) !important;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.14), transparent 28%),
    linear-gradient(145deg, rgba(63,70,79,0.90), rgba(36,42,49,0.78)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,0.20), 0 30px 78px rgba(0,0,0,0.30) !important;
}

#board-container:hover {
  border-radius: 3.2rem 2.55rem 3.1rem 2.65rem !important;
  transform: translateY(-3px);
}

#board-container > div[role="gridcell"]:focus-visible,
#board-container > div:focus-visible {
  outline: 2px solid rgba(72,136,255,0.55);
  outline-offset: -3px;
  border-radius: 50%;
}

.piece-b {
  background: radial-gradient(circle at 36% 28%, #717781, #171a1f 70%) !important;
  box-shadow: inset 0 2px 3px rgba(255,255,255,0.18), 0 5px 14px rgba(18,20,25,0.33) !important;
}

.piece-w {
  background: radial-gradient(circle at 36% 28%, #fff, #dfe4e8 70%) !important;
  box-shadow: inset 0 2px 3px white, 0 5px 14px rgba(50,58,68,0.18) !important;
}

.overlay {
  background: rgba(225,229,233,0.48);
  -webkit-backdrop-filter: blur(5px) saturate(0.9);
  backdrop-filter: blur(5px) saturate(0.9);
}

.dark .overlay { background: rgba(12,14,17,0.68); }

/* --- Search launchpad, files, timeline ---------------------- */

#nav-container {
  perspective: 1000px;
}

.nav-icon {
  border: 1px solid rgba(255,255,255,0.61);
  border-radius: 1.45rem 1.9rem 1.5rem 1.8rem;
  background: rgba(255,255,255,0.30);
  box-shadow: inset 0 1px rgba(255,255,255,0.80), 0 12px 30px rgba(57,65,78,0.075);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: transform 480ms var(--lb-ease-liquid), border-radius 560ms var(--lb-ease-liquid), background 220ms ease, box-shadow 300ms ease;
}

.dark .nav-icon {
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
}

.nav-icon:hover {
  border-radius: 1.95rem 1.35rem 1.9rem 1.4rem;
  transform: translateY(-4px) scale(1.07) rotate(-1deg);
  background: rgba(255,255,255,0.50);
  box-shadow: inset 0 1px rgba(255,255,255,0.92), 0 19px 42px rgba(57,65,78,0.12);
}

#file-list {
  max-width: 52rem;
}

#file-list .card {
  min-height: 78px;
  padding: 0.85rem 1rem 0.85rem 1.15rem !important;
  border-radius: 1.45rem 1.9rem 1.5rem 1.82rem;
  overflow: hidden;
}

#file-list .card:nth-child(even) {
  border-radius: 1.9rem 1.4rem 1.85rem 1.48rem;
}

#file-list .card:hover {
  border-radius: 2rem 1.35rem 2.05rem 1.3rem;
}

.timeline {
  position: relative;
}

.timeline::before {
  left: 0.42rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--lb-cyan), rgba(154,124,255,0.38), rgba(239,116,169,0.12));
  box-shadow: 1px 0 rgba(239,116,169,0.10), -1px 0 rgba(84,215,239,0.15);
}

.timeline-dot {
  width: 0.9rem;
  height: 0.9rem;
  left: -2.03rem;
  border: 2px solid rgba(255,255,255,0.88);
  background: conic-gradient(from 210deg, var(--lb-cyan), var(--lb-violet), var(--lb-rose), var(--lb-cyan));
  box-shadow: 0 0 0 6px rgba(84,215,239,0.08), 0 5px 14px rgba(57,65,78,0.12);
}

.timeline .card {
  margin-bottom: 0.85rem;
  border-radius: 1.7rem 2.15rem 1.75rem 2rem;
}

.timeline > div:nth-child(even) .card {
  border-radius: 2.15rem 1.65rem 2.1rem 1.7rem;
}

/* --- Footer ------------------------------------------------- */

.site-footer {
  width: min(1320px, calc(100% - 3rem));
  margin: 2.75rem auto 1.5rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 2.35rem 2.9rem 2.4rem 2.75rem;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.57), rgba(255,255,255,0.23)) padding-box,
    conic-gradient(from 210deg, white, rgba(84,215,239,0.34), rgba(255,255,255,0.63), rgba(239,116,169,0.21), white) border-box;
  box-shadow: inset 0 1px rgba(255,255,255,0.91), 0 20px 58px rgba(57,65,78,0.09);
  -webkit-backdrop-filter: blur(4px) saturate(1.05);
  backdrop-filter: blur(4px) saturate(1.05);
}

.dark .site-footer {
  background:
    linear-gradient(145deg, rgba(48,54,62,0.66), rgba(24,28,34,0.49)) padding-box,
    conic-gradient(from 210deg, rgba(255,255,255,0.24), rgba(84,215,239,0.23), rgba(255,255,255,0.10), rgba(239,116,169,0.16), rgba(255,255,255,0.21)) border-box;
}

.footer-inner {
  width: 100%;
  max-width: none;
  padding: 1.35rem 1.5rem;
}

.footer-brand img {
  width: 30px !important;
  height: 30px !important;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(72,92,150,0.13));
}

.footer-links a {
  color: var(--lb-muted);
  border-radius: 0.75rem;
}

.footer-links a::after {
  height: 1px;
  background: linear-gradient(90deg, var(--lb-cyan), var(--lb-rose));
}

/* --- Focus and resilient fallbacks -------------------------- */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid rgba(72,136,255,0.35);
  outline-offset: 4px;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass,
  .glass-lg,
  .glass-xl,
  .card,
  .search-box,
  .liquid-surface,
  .glass-xs,
  .nav-inner,
  .mobile-menu,
  .site-footer,
  .nav-icon {
    background: rgba(247,248,249,0.94);
  }

  .dark .glass,
  .dark .glass-lg,
  .dark .glass-xl,
  .dark .card,
  .dark .search-box,
  .dark .liquid-surface,
  .dark .glass-xs,
  .dark .nav-inner,
  .dark .mobile-menu,
  .dark .site-footer,
  .dark .nav-icon {
    background: rgba(29,34,40,0.96);
  }
}

/* --- Responsive --------------------------------------------- */

@media (max-width: 1100px) {
  body[data-page="home"] .hero-section > .relative { grid-column: 1 / span 8; }
  body[data-page="home"] .hero-section::after { width: calc(33.333% - 9px); }

  body[data-page="home"] .feature-card:nth-child(n),
  body[data-page="home"] .section .content-container > .grid > .card:nth-child(6) {
    grid-column: span 6;
  }

  body[data-page="home"] .feature-card:nth-child(3)::after { display: block; }
  body[data-page="home"] .feature-card:nth-child(even)::after,
  body[data-page="home"] .section .content-container > .grid > .card:nth-child(6)::after { display: none; }

  body[data-page="study"] .content-container > .grid > .glass-lg:nth-child(1),
  body[data-page="study"] .content-container > .grid > .glass-lg:nth-child(2) { grid-column: span 6; }
}

@media (max-width: 900px) {
  .nav-links { display: none; }

  body[data-page="home"] .hero-section {
    min-height: auto;
  }

  body[data-page="home"] .hero-section > .relative {
    grid-column: 1 / -1;
    min-height: 500px;
  }

  body[data-page="home"] .hero-section::before,
  body[data-page="home"] .hero-section::after { display: none; }

  body[data-page="play"] .content-container > .grid > :first-child,
  body[data-page="play"] .content-container > .grid > :nth-child(2) { grid-column: 1 / -1; }

  body[data-page="play"] .content-container > .grid > :first-child { max-width: 34rem; width: 100%; margin-inline: auto; }
}

@media (max-width: 767px) {
  .content-container,
  .nav-inner,
  .site-footer,
  body[data-page="home"] .hero-section {
    width: calc(100% - 1.5rem);
  }

  .nav-container { height: 76px; padding: 8px 0; }
  .nav-inner { height: 60px; padding-left: 0.8rem; border-radius: 1.25rem 1.65rem 1.3rem 1.55rem; }
  .mobile-menu { top: 76px; }
  .page-main { padding-top: 7.5rem; }

  body[data-page="home"] .hero-section {
    margin-top: 88px;
  }

  body[data-page="home"] .hero-section > .relative {
    min-height: 490px;
    padding: 2.4rem 1.75rem !important;
    border-radius: 2.4rem 3rem 2.5rem 2.85rem;
  }

  body[data-page="home"] .fng-logo-svg {
    width: 9.5rem;
  }

  body[data-page="home"] .hero-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  body[data-page="home"] .hero-actions .btn { width: 100%; }

  body[data-page="home"] .section {
    padding-top: 4rem;
  }

  body[data-page="home"] .section-header h2 {
    font-size: 2.75rem;
  }

  body[data-page="home"] .feature-card:nth-child(n),
  body[data-page="home"] .section .content-container > .grid > .card:nth-child(6) {
    grid-column: 1 / -1;
    min-height: 190px;
  }

  body[data-page="home"] .feature-card::after,
  body[data-page="home"] .feature-card:nth-child(even)::after,
  body[data-page="home"] .feature-card:nth-child(3)::after {
    display: block;
    left: 50%;
    right: auto;
    top: auto;
    bottom: -24px;
    width: 72px;
    height: 34px;
    transform: translateX(-50%);
    transform-origin: center top;
  }

  body[data-page="home"] .section .content-container > .grid > .card:nth-child(6)::after { display: none; }

  body[data-page="study"] .content-container > .grid > .glass-lg:nth-child(n) { grid-column: 1 / -1; }

  .footer-inner {
    padding: 1.35rem;
    gap: 1.25rem;
  }
}

@media (max-width: 479px) {
  .content-container,
  .nav-inner,
  .site-footer,
  body[data-page="home"] .hero-section {
    width: calc(100% - 1rem);
  }

  .nav-inner { border-radius: 1.15rem 1.45rem 1.2rem 1.4rem; }
  .nav-logo img { width: 32px !important; height: 32px !important; }
  .nav-actions { gap: 0.25rem; }
  .nav-icon-btn,
  .nav-menu-btn { width: 38px; height: 38px; }

  body[data-page="home"] .hero-section > .relative {
    min-height: 480px;
    padding: 2.1rem 1.25rem !important;
  }

  body[data-page="home"] .hero-subtitle { font-size: 0.96rem; }
  body[data-page="home"] .fng-logo-svg { width: 8.5rem; }

  .glass-lg { padding: 1.25rem !important; }
  .search-box form { gap: 0.25rem; }
  .search-box .glass-select { max-width: 7rem; }

  #board-container {
    border-radius: 1.8rem 2.25rem 1.9rem 2.15rem !important;
  }

  .site-footer { border-radius: 1.75rem 2.2rem 1.8rem 2.1rem; }
}

/* --- Reduced motion, high contrast and print ---------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .glass-lg,
  .glass-xl,
  .card,
  .liquid-surface,
  .btn,
  #board-container,
  .nav-icon {
    transform: none !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --lb-ink: #000;
    --lb-muted: #222;
    --lb-edge: #000;
  }

  .dark {
    --lb-ink: #fff;
    --lb-muted: #eee;
    --lb-edge: #fff;
  }

  .glass,
  .glass-lg,
  .glass-xl,
  .card,
  .search-box,
  .liquid-surface,
  .glass-xs,
  .nav-inner,
  .mobile-menu,
  .site-footer,
  .nav-icon,
  .btn,
  .glass-input,
  .glass-select,
  #search-input,
  .quiz-option,
  #board-container {
    border: 2px solid currentColor !important;
    background: #fff !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .dark .glass,
  .dark .glass-lg,
  .dark .glass-xl,
  .dark .card,
  .dark .search-box,
  .dark .liquid-surface,
  .dark .glass-xs,
  .dark .nav-inner,
  .dark .mobile-menu,
  .dark .site-footer,
  .dark .nav-icon,
  .dark .btn,
  .dark .glass-input,
  .dark .glass-select,
  .dark #search-input,
  .dark .quiz-option,
  .dark #board-container {
    background: #000 !important;
  }

  .glass::before,
  .glass::after,
  .glass-lg::before,
  .glass-lg::after,
  .glass-xl::before,
  .glass-xl::after,
  .card::before,
  .card::after,
  .search-box::before,
  .search-box::after,
  .liquid-surface::before,
  .liquid-surface::after { display: none !important; }
}

@media print {
  html,
  body {
    color: #000 !important;
    background: #fff !important;
  }

  body::before,
  body::after,
  .nav-container,
  .mobile-menu,
  #cursor-glow,
  .scroll-progress,
  .hero-aurora,
  .hero-light-orb,
  .hero-glow,
  .bg-grid,
  .bg-noise,
  #particles-canvas { display: none !important; }

  .page-main,
  .section,
  body[data-page="home"] .hero-section {
    width: 100% !important;
    margin: 0 !important;
    padding: 1rem 0 !important;
  }

  .glass,
  .glass-lg,
  .glass-xl,
  .card,
  .search-box,
  .liquid-surface,
  .glass-xs,
  .site-footer,
  #board-container {
    color: #000 !important;
    border: 1px solid #bbb !important;
    background: #fff !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    break-inside: avoid;
  }

  .glass::before,
  .glass::after,
  .glass-lg::before,
  .glass-lg::after,
  .glass-xl::before,
  .glass-xl::after,
  .card::before,
  .card::after,
  .search-box::before,
  .search-box::after,
  .liquid-surface::before,
  .liquid-surface::after { display: none !important; }

  .site-footer {
    width: 100%;
    margin: 1rem 0 0;
  }

  a { color: #000 !important; text-decoration: none !important; }
}

/* --- Selected-preview structure + progressive interaction state --------- */

[data-living-glass] {
  --living-x: 50%;
  --living-y: 50%;
  --living-tilt-x: 0deg;
  --living-tilt-y: 0deg;
  --living-pull-x: 0px;
  --living-pull-y: 0px;
}

[data-living-glass]::before {
  background:
    radial-gradient(circle at var(--living-x) var(--living-y), rgba(255,255,255,0.92), transparent 23%),
    linear-gradient(112deg, transparent 8%, rgba(255,255,255,0.31) 27%, transparent 43%),
    radial-gradient(ellipse 76% 18% at 42% 101%, rgba(84,215,239,0.13), transparent 72%);
}

.living-sheen {
  position: absolute !important;
  z-index: 1 !important;
  inset: 1px;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.48;
  background:
    radial-gradient(42% 24% at var(--living-x, 22%) var(--living-y, 8%), rgba(255,255,255,0.65), transparent 72%),
    linear-gradient(104deg, transparent 15%, rgba(84,215,239,0.07), transparent 38% 66%, rgba(239,116,169,0.06));
  mix-blend-mode: screen;
  transition: opacity 280ms ease;
}

.is-living-pointed > .living-sheen { opacity: 0.82; }

[data-living-tilt] {
  transform: perspective(1200px) rotateX(var(--living-tilt-x)) rotateY(var(--living-tilt-y));
  transform-style: preserve-3d;
}

.living-bento-grid .feature-card {
  transform:
    translate3d(var(--living-pull-x, 0px), var(--living-pull-y, 0px), 0)
    rotateX(var(--living-tilt-x, 0deg))
    rotateY(var(--living-tilt-y, 0deg));
}

.living-bento-grid .feature-card.is-living-active {
  z-index: 8;
  transform:
    translate3d(var(--living-pull-x, 0px), calc(var(--living-pull-y, 0px) - 4px), 0)
    rotateX(var(--living-tilt-x, 0deg))
    rotateY(var(--living-tilt-y, 0deg))
    scale(1.012);
}

.living-bento-grid .feature-card.is-living-neighbor {
  z-index: 7;
  transform:
    translate3d(var(--living-pull-x, 0px), var(--living-pull-y, 0px), 0)
    scale(1.006);
}

.living-bento-grid.has-living-bridge .feature-card.is-living-active::after {
  display: block;
  opacity: 0.98;
  transform: scaleX(1.45) scaleY(1.14);
}

.living-bento-grid .feature-card[data-living-bridge-direction="left"]::after {
  right: auto;
  left: -20px;
  transform-origin: right center;
}

.living-bento-grid .feature-card[data-living-bridge-direction="down"]::after,
.living-bento-grid .feature-card[data-living-bridge-direction="up"]::after {
  width: 68px;
  height: 31px;
  left: 50%;
  right: auto;
  transform-origin: center;
}

.living-bento-grid .feature-card[data-living-bridge-direction="down"]::after {
  top: auto;
  bottom: -22px;
  transform: translateX(-50%);
}

.living-bento-grid .feature-card[data-living-bridge-direction="up"]::after {
  top: -22px;
  transform: translateX(-50%);
}

.living-bento-grid.has-living-bridge .feature-card.is-living-active[data-living-bridge-direction="down"]::after,
.living-bento-grid.has-living-bridge .feature-card.is-living-active[data-living-bridge-direction="up"]::after {
  transform: translateX(-50%) scaleX(1.14) scaleY(1.45);
}

.btn.is-living-hovered,
.nav-icon-btn.is-living-hovered,
.nav-link-cta.is-living-hovered {
  border-radius: 1.55rem 1.05rem 1.6rem 1rem;
}

.btn.is-living-pressed,
button.is-living-pressed,
[role="button"].is-living-pressed {
  transform: translateY(1px) scaleX(0.965) scaleY(1.035) !important;
  transition-duration: 110ms !important;
}

/* The right-hand Hero object uses the user's logo.svg as its only wordmark. */
body[data-page="home"] .hero-section::after { display: none; }

body[data-page="home"] .living-hero-orbit {
  grid-column: 9 / span 4;
  min-width: 0;
  min-height: 520px;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid transparent;
  border-radius: 4rem 3rem 4.2rem 2.8rem;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,0.92), transparent 12%),
    radial-gradient(circle at 64% 70%, rgba(84,215,239,0.20), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,0.61), rgba(255,255,255,0.14) 48%, rgba(231,237,244,0.32)) padding-box,
    conic-gradient(from 185deg, white, rgba(84,215,239,0.46), rgba(255,255,255,0.71), rgba(239,116,169,0.30), white) border-box;
  box-shadow: inset 12px 14px 22px rgba(255,255,255,0.42), inset -13px -8px 28px rgba(82,128,187,0.10), 2px 0 rgba(239,86,162,0.16), -2px 0 rgba(42,205,240,0.20), 0 38px 78px var(--lb-shadow);
  -webkit-backdrop-filter: blur(4px) saturate(1.08);
  backdrop-filter: blur(4px) saturate(1.08);
  animation: lb-orbit-shell 7.2s var(--lb-ease-liquid) infinite alternate;
}

.dark body[data-page="home"] .living-hero-orbit {
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,0.25), transparent 12%),
    radial-gradient(circle at 64% 70%, rgba(84,215,239,0.13), transparent 28%),
    linear-gradient(145deg, rgba(53,60,69,0.68), rgba(25,29,35,0.40) 48%, rgba(39,45,52,0.54)) padding-box,
    conic-gradient(from 185deg, rgba(255,255,255,0.28), rgba(84,215,239,0.27), rgba(255,255,255,0.12), rgba(239,116,169,0.20), rgba(255,255,255,0.25)) border-box;
}

.living-hero-orbit::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 82%;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,0.62);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(255,255,255,0.07), 0 0 0 56px rgba(255,255,255,0.045);
  animation: lb-living-ring 20s linear infinite;
}

@keyframes lb-living-ring { to { transform: rotate(360deg); } }

.living-orb {
  position: relative;
  z-index: 3;
  width: min(58%, 230px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 43% 57% 64% 36% / 55% 38% 62% 45%;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.96), transparent 17%),
    radial-gradient(circle at 66% 74%, rgba(113,214,232,0.42), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,0.67), rgba(255,255,255,0.12) 48%, rgba(231,237,244,0.36));
  box-shadow: inset 12px 14px 22px rgba(255,255,255,0.58), inset -13px -8px 28px rgba(82,128,187,0.13), 2px 0 rgba(239,86,162,0.22), -2px 0 rgba(42,205,240,0.28), 0 40px 70px rgba(76,86,100,0.16);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: lb-living-orb 6.2s var(--lb-ease-liquid) infinite alternate;
}

@keyframes lb-living-orb {
  0% { border-radius: 43% 57% 64% 36% / 55% 38% 62% 45%; transform: rotate(-5deg) scale(0.97); }
  50% { border-radius: 61% 39% 42% 58% / 43% 61% 39% 57%; transform: rotate(5deg) scale(1.04); }
  100% { border-radius: 35% 65% 53% 47% / 63% 43% 57% 37%; transform: rotate(-2deg); }
}

.living-orb-logo {
  position: relative;
  z-index: 4;
  width: 66%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(32,38,48,0.13));
}

.living-drop {
  position: absolute;
  z-index: 4;
  width: 23px;
  height: 23px;
  border: 1px solid rgba(255,255,255,0.82);
  border-radius: 55% 45% 63% 37%;
  background: rgba(255,255,255,0.43);
  box-shadow: inset 2px 2px 5px white, 1px 0 rgba(239,86,162,0.18), -1px 0 rgba(42,205,240,0.20), 0 9px 16px rgba(67,77,91,0.08);
  animation: lb-living-drop 4.5s ease-in-out infinite alternate;
}

.living-drop-one { top: 18%; right: 15%; }
.living-drop-two { bottom: 17%; left: 14%; width: 15px; height: 15px; animation-delay: -2.5s; }

@keyframes lb-living-drop {
  to { transform: translate3d(8px, -14px, 0) scale(1.16); border-radius: 38% 62% 44% 56%; }
}

@media (max-width: 900px) {
  body[data-page="home"] .living-hero-orbit {
    grid-column: 1 / -1;
    min-height: 320px;
    border-radius: 3rem 2.4rem 3.2rem 2.5rem;
  }
  body[data-page="home"] .hero-section::before { display: none; }
  .living-hero-orbit::after { width: min(66%, 290px); }
  .living-orb { width: min(48%, 190px); }
}

@media (max-width: 620px) {
  body[data-page="home"] .living-hero-orbit { min-height: 285px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-living-tilt],
  .living-bento-grid .feature-card,
  .living-bento-grid .feature-card.is-living-active,
  .living-bento-grid .feature-card.is-living-neighbor { transform: none !important; }
  .living-hero-orbit::after,
  .living-orb,
  .living-drop { animation: none !important; }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body[data-page="home"] .living-hero-orbit,
  .living-orb { background: rgba(245, 247, 249, 0.96); }
  .dark body[data-page="home"] .living-hero-orbit,
  .dark .living-orb { background: rgba(26, 30, 36, 0.97); }
}

@media (prefers-contrast: more) {
  body[data-page="home"] .living-hero-orbit,
  .living-orb { border: 2px solid currentColor; box-shadow: none; }
  .living-sheen,
  .living-drop { display: none !important; }
}

@media print {
  body[data-page="home"] .living-hero-orbit,
  .living-sheen,
  .living-drop { display: none !important; }
}