:root {
  --sadu-red: #c0392b;
  --sadu-red-bright: #e0463a;
  --teal: #1d9e8c;
  --teal-bright: #3fd0c0;
  --li-blue: #5fa8d8;
}

/* ---- CONTINUOUS THEME ENGINE ---- */
:root {
  --ink: #0a0c0d;
  --paper: #ffffff;
  --glass-bg: rgba(255, 255, 255, 0.09);
  --glass-bg-strong: rgba(20, 24, 26, 0.40);
  --glass-edge: rgba(255, 255, 255, 0.30);
  --glass-inner: rgba(255, 255, 255, 0.40);
  --card-bg: #0d0f10;
  --card-edge: rgba(255, 255, 255, 0.07);
  --window-bg: rgba(12, 14, 15, 0.5);
  --txt-soft: 0.95;
  --accent: #0980cc;
  --glow-1: rgba(9, 128, 204, 0.0);
  --glow-2: rgba(231, 62, 128, 0.0);
  /* --glow-3: rgba(216,116,47,0.18); */
  /* --glow-4: rgba(194,146,90,0.16); */

  --glow-3: transparent;
  --glow-4: transparent;

  --base-1: #070c0d;
  --base-2: #0a0c0d;
  --base-3: #110b06;

  /* ---- fluid top-control sizing: scales with viewport so big & small screens match ---- */
  --ctrl-size: clamp(46px, 3.3vw, 64px);
  /* height of pill/diamond/slider */
  --ctrl-radius: clamp(16px, 1.1vw, 20px);
  /* corner radius */
  --ctrl-glyph: clamp(22px, 1.6vw, 30px);
  /* diamond glyph icon */
  --ctrl-icon: clamp(19px, 1.35vw, 26px);
  /* slider sun/moon icon */
  --ctrl-font: clamp(13px, 0.95vw, 17px);
  /* lang pill text */
  --ctrl-pad: clamp(18px, 1.5vw, 26px);
  /* lang pill horizontal padding */
  --ctrl-top: clamp(20px, 1.8vw, 34px);
  /* distance from top edge */
  --ctrl-side: clamp(20px, 1.9vw, 38px);
  /* distance from side edges */
  --ctrl-gap: clamp(10px, 0.8vw, 16px);
  /* gap between slider and pill */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  scrollbar-gutter: stable;
}




body {
  background: var(--ink);
  color: var(--paper);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  overflow-x: hidden;
  position: relative;
  font-weight: 600;
  transition: background 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), color 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

b {
  font-weight: 700;
}

/* ---- DUNE FOOTER STRIP (fixed, zero document height) ---- */
/* Sits directly above .scene with NO backdrop of its own, so the page's
 existing gradient shows through as the shared sky. Only the dune
 particles render, and the whole canvas is feathered at the top with a
 mask so the grains simply fade into nothing — no rectangle edge. */
#dune-strip {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52vh;
  z-index: 1;
  /* above .scene (0), below content/footer (5) */
  pointer-events: none;
  /* never blocks clicks */
  overflow: hidden;
  background: transparent;
  /* feather the top ~half so particles dissolve upward into the scene */
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 34%, transparent 78%);
  mask-image: linear-gradient(to top, #000 0%, #000 34%, transparent 78%);
}

#dune-strip canvas {
  display: block;
}

.scene::before {
  content: "";
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(ellipse 55% 48% at 22% 18%, var(--glow-1), transparent 60%),
    radial-gradient(ellipse 50% 42% at 80% 28%, var(--glow-2), transparent 62%),
    radial-gradient(ellipse 66% 54% at 58% 90%, var(--glow-3), transparent 60%),
    radial-gradient(ellipse 60% 50% at 12% 84%, var(--glow-4), transparent 66%),
    linear-gradient(168deg, var(--base-1) 0%, var(--base-2) 50%, var(--base-3) 100%);
  animation: drift 36s ease-in-out infinite alternate;
}

.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.04;
  mix-blend-mode: overlay;
}

@keyframes drift {
  from {
    transform: translate3d(0, 0, 0) scale(1.02);
  }

  to {
    transform: translate3d(-2%, 1.2%, 0) scale(1.07);
  }
}

.scroll-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.scroll-reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

.scroll-reveal[style*="--stagger"] {
  transition-delay: calc(var(--stagger) * 0.1s);
}

/* ===== TOP BAR ELEMENTS ===== */

.lang-pill {
  position: fixed;
  top: var(--ctrl-top);
  right: var(--ctrl-side);
  left: auto;
  z-index: 32;
  height: var(--ctrl-size);
  padding: 0 var(--ctrl-pad);
  display: flex;
  align-items: center;
  border-radius: var(--ctrl-radius);
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--glass-edge);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18), inset 0 1px 0 var(--glass-inner);
  font-size: var(--ctrl-font);
  font-weight: 400;
  letter-spacing: 0.04em;
  cursor: pointer;
  color: var(--paper);
  direction: ltr;
  transition: background 1.2s ease, border-color 1.2s ease, color .25s, transform .3s cubic-bezier(.2, .8, .2, 1);
}

.lang-pill:hover {
  color: var(--accent);
  transform: translateY(-2px);
}



/* ===== MIRAGE LANGUAGE TRANSITION ===== */
.mirage-sweep {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
}

.mirage-sweep::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 55%;
  left: -60%;
  background: linear-gradient(100deg, transparent 0%, rgba(124, 198, 224, 0.10) 30%, rgba(255, 255, 255, 0.22) 48%, rgba(63, 208, 192, 0.14) 60%, transparent 100%);
  backdrop-filter: blur(6px) saturate(140%);
  filter: url(#mirageHaze);
  transform: skewX(-12deg);
}

.mirage-sweep.go {
  opacity: 1;
  animation: mirageWipe 1.1s cubic-bezier(.45, 0, .25, 1) forwards;
}

.mirage-sweep.go::before {
  animation: mirageBand 1.1s cubic-bezier(.45, 0, .25, 1) forwards;
}

@keyframes mirageWipe {
  0% {
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes mirageBand {
  0% {
    left: -60%;
  }

  100% {
    left: 160%;
  }
}

body.lang-shifting .hero-shimmer,
body.lang-shifting .work-gallery,
body.lang-shifting .about-intro {
  animation: heatWarble 1.1s ease-in-out;
}

@keyframes heatWarble {

  0%,
  100% {
    filter: none;
    transform: translateX(0);
  }

  35% {
    filter: blur(0.6px);
  }

  50% {
    filter: blur(1.1px);
    transform: translateX(2px);
  }

  65% {
    filter: blur(0.6px);
    transform: translateX(-1px);
  }
}

/* ===== MODAL STYLES ===== */
/* Moved to standalone modal.css */


/* About section (no longer clickable) */

.about-more {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--accent);
  opacity: 0.85;
  transition: gap .3s ease, opacity .3s ease;
}

.about-intro:hover .about-more {
  gap: 12px;
  opacity: 1;
}

.about-more svg {
  width: 15px;
  height: 15px;
}

.slide {
  cursor: pointer;
}

/* ===== HERO SECTION (100vh Full Screen) ===== */
.hero {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
}

.hero-shimmer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-reveal {
  position: relative;
  display: inline-grid;
  place-items: center;
  user-select: none;
  padding: 60px 140px;
  max-width: 90vw;
  cursor: default;
}

.hr-sparkle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero-reveal .hr-base,
.hero-reveal .hr-top {
  grid-area: 1 / 1;
  width: 100%;
  text-align: center;
  font-weight: 600;
  font-size: clamp(42px, 7vw, 96px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  padding-bottom: 0.3em;
  margin-bottom: -0.3em;
  white-space: nowrap;
  display: block;
  position: relative;
  z-index: 1;
}

.hero-reveal .hr-base {
  color: white;
  opacity: 1;
  transition: color 1.2s ease;
  clip-path: inset(-150px -150px -150px 100%);
  will-change: clip-path;
}

.hero-reveal .hr-top {
  transform: translateZ(0);
  background: linear-gradient(100deg, var(--accent), var(--grad-mid, #0980cc) 45%, var(--grad-end, #e73e80));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  clip-path: inset(-150px 100% -150px -150px);
  will-change: clip-path;
}

.hr-edge {
  position: absolute;
  top: 60px;
  height: calc(100% - 120px);
  width: 2px;
  left: 54px;
  z-index: 2;
  background: linear-gradient(var(--accent), var(--grad-end, #e73e80));
  box-shadow: 0 0 16px var(--accent), 0 0 30px var(--accent);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  border-radius: 2px;
}

.hero-reveal:hover .hr-edge {
  opacity: 1;
}

.hover-indicator {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 400;
  letter-spacing: 0.05em;
  opacity: 0.45;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  transition: opacity 0.3s ease;
}


.hover-indicator .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.5s infinite;
  transition: background 1.2s ease;
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.2);
    opacity: 1;
  }

  100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
}

.hero-reveal:hover .hover-indicator {
  opacity: 0;
}

/* VERTICAL LIQUID GLASS SCROLL INDICATOR */
.hero-scroll-hint {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 120px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-scroll-hint:hover {
  opacity: 1 !important;
}

.scroll-word {
  margin-top: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.7;
  transition: color .3s, opacity .3s;
}

.hero-scroll-hint:hover .scroll-word {
  opacity: 1;
  color: var(--accent);
}


.vertical-line-wrapper {
  width: 2px;
  height: 70px;
  background: var(--glass-bg-strong);
  position: relative;
  border-radius: 2px;
  transition: background 0.4s ease;
  overflow: visible;
}

.hero-scroll-hint:hover .vertical-line-wrapper {
  background: var(--glass-bg);
}

.vertical-line-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent, var(--accent), var(--grad-end), transparent);
  box-shadow: 0 0 8px 1px var(--accent);
  opacity: 0.35;
  transition: opacity 0.4s ease, box-shadow 0.4s ease;
}

.hero-scroll-hint:hover .vertical-line-glow {
  opacity: 1;
  box-shadow: 0 0 16px 2px var(--accent);
  animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {

  0%,
  100% {
    opacity: 0.7;
    filter: brightness(1);
  }

  50% {
    opacity: 1;
    filter: brightness(1.3);
  }
}

/* ===== SHARED SECTION BITS ===== */
.section-kicker {
  display: inline-block;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 14px;
  transition: color 1.2s ease;
}

/* ===== ABOUT (short intro + photo) ===== */
.about-intro {
  position: relative;
  z-index: 5;
  max-width: 1250px;
  margin: 0 auto;
  padding: 80px 24px 40px;
}

.about-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 48px;
  align-items: center;
}

.about-photo-wrap {
  display: flex;
  justify-content: center;
}

.about-copy {
  text-align: left;
}


.about-tag {
  font-weight: 400;
  font-style: italic;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--paper);
  transition: color 1.2s ease;
}


.about-lead {
  margin-top: 18px;
  max-width: 52ch;
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1.75;
  font-weight: 500;
  opacity: var(--txt-soft);
  color: var(--paper);
}

.liquid-avatar {
  width: 160px;
  height: 160px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-edge);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  position: relative;
  animation: fluidShape 10s ease-in-out infinite;
  transition: background 1.2s ease, border-color 1.2s ease;
}

.liquid-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, var(--accent), transparent 70%);
  opacity: 0.3;
  transition: background 1.2s ease;
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

@keyframes fluidShape {
  0% {
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  }

  34% {
    border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
  }

  67% {
    border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
  }

  100% {
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  }
}

.signature-svg {
  margin-top: 28px;
  width: 150px;
  opacity: 0.7;
}


.signature-svg path {
  stroke: var(--paper);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 1.2s ease;
}

/* ===== WORK (case-study grid) ===== */
/* ===== WORK: HORIZONTAL GALLERY (sideways scroll, page flows normally) ===== */
.work-gallery {
  position: relative;
  z-index: 5;
  padding: 120px 0 90px;
}

.gallery-head {
  max-width: 1180px;
  margin: 0 auto 36px;
  padding: 0 clamp(24px, 6vw, 72px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}



.gallery-head-text {
  text-align: left;
}



.gallery-nav {
  display: flex;
  gap: 12px;
  flex: none;
}

.g-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  color: var(--paper);
  backdrop-filter: blur(18px) saturate(150%);
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .3s ease, opacity .3s ease, color .25s ease;
}

.g-arrow svg {
  width: 20px;
  height: 20px;
}

.g-arrow:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  color: var(--accent);
}

.g-arrow:active {
  transform: translateY(0) scale(.92);
}

.g-arrow:disabled {
  opacity: .3;
  cursor: default;
  transform: none;
  border-color: var(--glass-edge);
  color: var(--paper);
}

/* the sideways-scrolling track */
.gallery-track {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 14px clamp(24px, 6vw, 72px) 30px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  scroll-padding-left: clamp(24px, 6vw, 72px);
}


.gallery-track::-webkit-scrollbar {
  display: none;
}

.gallery-track.dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.gallery-track.dragging .slide {
  pointer-events: none;
}

.slide {
  position: relative;
  flex: 0 0 auto;
  width: clamp(280px, 42vw, 460px);
  border-radius: 26px;
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--glass-edge);
  box-shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.6), inset 0 1px 0 var(--glass-inner);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease, background 1.2s ease, border-color 1.2s ease;
  --glow-angle: 0deg;
  --glow-active: 0;
}

.slide:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.65);
}

/* smooth cursor-following edge glow, tinted per slide (kept from before) */
.slide::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  z-index: 2;
  pointer-events: none;
  background: conic-gradient(from var(--glow-angle),
      transparent 0deg,
      color-mix(in srgb, var(--card-tint, var(--accent)) 55%, transparent) 30deg,
      color-mix(in srgb, var(--card-tint, var(--accent)) 80%, white) 55deg,
      color-mix(in srgb, var(--card-tint, var(--accent)) 55%, transparent) 80deg,
      transparent 110deg, transparent 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: var(--glow-active);
  transition: opacity .45s ease;
}

.slide-media {
  position: relative;
  height: clamp(220px, 30vw, 300px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--card-tint, #3fd0c0) 36%, transparent), transparent 72%);
}

.case-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.slide:hover .case-img {
  transform: scale(1.05);
}

/* StartSmart participant badge overlaid on a card */
.ss-badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px 6px 9px;
  border-radius: 999px;
  background: rgba(8, 12, 16, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.ss-badge svg {
  display: block;
  height: 18px;
  width: auto;
}

.ss-badge .ss-label {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #eaf2ee;
  font-weight: 500;
  white-space: nowrap;
}

.case-sadu {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  transition: transform .6s ease;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.4' opacity='0.6'%3E%3Cpolygon points='30,4 56,30 30,56 4,30'/%3E%3Cpolygon points='30,16 44,30 30,44 16,30'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 54px 54px;
  background-position: center;
}

.slide:hover .case-sadu {
  transform: scale(1.08);
}

.case-ph {
  position: relative;
  z-index: 1;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.5;
}

.slide-cap {
  position: relative;
  z-index: 3;
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.cap-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.c-kicker {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--card-tint, var(--accent));
  font-weight: 500;
}

.c-year {
  font-size: 12px;
  opacity: 0.45;
  color: var(--paper);
}

.c-title {
  font-weight: 500;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.15;
  color: var(--paper);
  transition: color 1.2s ease;
}

.c-problem {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  opacity: var(--txt-soft);
  color: var(--paper);
}

/* thin progress bar under the gallery — only visible while scrolling sideways */
.gallery-progress {
  max-width: 1180px;
  margin: 6px auto 0;
  padding: 0 clamp(24px, 6vw, 72px);
  height: 2px;
  opacity: 0;
  transition: opacity .5s ease;
}


.gp-fill {
  display: block;
  height: 100%;
  width: 25%;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  transition: width .25s ease, margin-left .25s ease, background 1.2s ease;
}

@media (max-width: 820px) {
  .slide {
    width: 82vw;
  }

  .gallery-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .gallery-nav {
    display: none;
  }

  /* swipe on mobile */
}


@media (max-width: 760px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
    justify-items: center;
  }

  .about-copy {
    text-align: center;
  }

  .about-lead {
    margin-inline: auto;
  }
}

/* ===== HORIZONTAL LIQUID GLASS DIVIDER (Replaces Sadu Footer) ===== */
.glass-divider-wrapper {
  position: relative;
  z-index: 5;
  max-width: 600px;
  margin: 20px auto 40px;
  padding: 20px;
  cursor: pointer;
}

.glass-divider {
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--glass-bg-strong);
  border-top: 1px solid var(--glass-edge);
  position: relative;
  transition: all 0.5s ease;
}

.glass-divider-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--grad-end), transparent);
  box-shadow: 0 0 20px 2px var(--accent);
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.glass-divider-wrapper:hover .glass-divider {
  height: 4px;
  border-radius: 4px;
  border-color: transparent;
  background: var(--glass-bg);
}

.glass-divider-wrapper:hover .glass-divider-glow {
  width: 100%;
  opacity: 1;
  height: 4px;
}

footer {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: 0 24px 60px;
  letter-spacing: 0.06em;
  opacity: 0.5;
}

/* ===== BACK TO TOP ===== */
.to-top {
  position: fixed;
  bottom: var(--ctrl-side);
  right: var(--ctrl-side);
  z-index: 33;
  width: var(--ctrl-size);
  height: var(--ctrl-size);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ctrl-radius);
  background: var(--glass-bg);
  color: var(--accent);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18), inset 0 1px 0 var(--glass-inner);
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px) scale(0.9);
  pointer-events: none;
  transition: opacity .4s ease, transform .4s cubic-bezier(.2, .8, .2, 1), background 1.2s ease, border-color 1.2s ease, color .25s ease;
}

.to-top.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.to-top:hover {
  transform: translateY(-3px) scale(1);
  border-color: var(--accent);
}

.to-top:hover svg {
  filter: drop-shadow(0 0 6px var(--accent));
}

.to-top svg {
  width: var(--ctrl-icon);
  height: var(--ctrl-icon);
  transition: filter .25s ease;
}

/* ---- PERFORMANCE TIER ADAPTATIONS ---- */
[data-perf="MID"] .slide,
[data-perf="MID"] .g-arrow {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(20, 24, 26, 0.55);
}

[data-perf="LOW"] .slide,
[data-perf="LOW"] .g-arrow,
[data-perf="LOW"] .lang-pill,
[data-perf="LOW"] .to-top {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

[data-perf="LOW"] .slide,
[data-perf="LOW"] .g-arrow {
  background: rgba(20, 24, 26, 0.55);
}

[data-perf="LOW"] .lang-pill,
[data-perf="LOW"] .to-top {
  background: rgba(20, 24, 26, 0.65);
}

[data-perf="LOW"] .scene::before {
  animation: none;
}

[data-perf="LOW"] #dune-strip {
  background: linear-gradient(to top, rgba(4, 47, 107, 0.25) 0%, rgba(10, 110, 181, 0.10) 40%, transparent 70%);
}