/* ========================================================
   Zuocheng — Portfolio
   Apple HIG (dark) × DJI cinematic product style
   Shared stylesheet for all pages.
   ======================================================== */

:root {
  /* Surfaces */
  --bg:            #000000;
  --bg-elev-1:     #0E0E10;
  --bg-elev-2:     #1C1C1E;
  --bg-elev-3:     #2C2C2E;
  --bg-elev-4:     #3A3A3C;
  --separator:     rgba(84, 84, 88, 0.5);
  --hairline:      rgba(255, 255, 255, 0.08);

  /* Labels */
  --label:         #FFFFFF;
  --label-2:       rgba(235, 235, 245, 0.62);
  --label-3:       rgba(235, 235, 245, 0.3);

  /* Accents (iOS dark) */
  --blue:          #0A84FF;
  --indigo:        #5E5CE6;
  --purple:        #BF5AF2;
  --pink:          #FF375F;
  --orange:        #FF9F0A;
  --yellow:        #FFD60A;
  --green:         #30D158;
  --teal:          #64D2FF;

  /* Radii (HIG continuous corners) */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-2xl: 36px;

  /* Type */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
             "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, monospace;

  /* Motion */
  --ease-ios: cubic-bezier(0.22, 1, 0.36, 1);

  /* Layout — generous Apple-style padding */
  --pad-x: clamp(24px, 6vw, 96px);
  --max-w: 1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--label);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.011em;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ==================== LAYOUT ==================== */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.container-wide {
  width: 100%;
  max-width: 1480px;
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.eyebrow {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--label-2);
}

/* ==================== NAV (liquid glass) ==================== */
.nav-wrap {
  position: fixed; top: 14px; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: center; padding: 0 16px;
  pointer-events: none;
}
.nav {
  pointer-events: auto;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px 8px 20px;
  background: rgba(20, 20, 22, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.nav .mark {
  font-weight: 700; font-size: 15px; letter-spacing: -0.01em; margin-right: 6px;
  display: inline-flex; align-items: center;
}
.nav .mark::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, var(--blue), var(--purple), var(--pink), var(--orange), var(--blue));
}
.nav a.link {
  padding: 8px 14px; font-size: 14px; color: var(--label-2);
  border-radius: 999px; transition: background 0.25s var(--ease-ios), color 0.25s var(--ease-ios);
}
.nav a.link:hover,
.nav a.link.current { color: var(--label); background: rgba(255, 255, 255, 0.06); }
.nav .cta {
  padding: 8px 14px; font-size: 14px; font-weight: 600;
  color: #000; background: #fff; border-radius: 999px;
  transition: transform 0.25s var(--ease-ios), background 0.25s var(--ease-ios);
}
.nav .cta:hover { transform: scale(1.02); background: #f2f2f2; }

/* ==================== BUTTONS ==================== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px; font-size: 15px; font-weight: 600;
  border-radius: 999px;
  transition: transform 0.25s var(--ease-ios), background 0.25s var(--ease-ios), color 0.25s var(--ease-ios);
}
.btn-primary   { background: var(--blue); color: #fff; }
.btn-primary:hover { transform: scale(1.02); background: #2a95ff; }
.btn-white     { background: #fff; color: #000; }
.btn-white:hover { transform: scale(1.02); background: #f2f2f2; }
.btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: var(--label);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.14); }
.btn-ghost {
  padding: 0; background: transparent; color: var(--label);
  font-weight: 600; letter-spacing: -0.005em;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  border-radius: 0;
}
.btn-ghost:hover { border-bottom-color: #fff; }

/* ==================== PILLS / TAGS ==================== */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; font-size: 13px; color: var(--label-2);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  backdrop-filter: blur(10px);
}
.pill .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 4px rgba(48, 209, 88, 0.18);
}
.tag {
  display: inline-block; padding: 4px 10px; font-size: 12px; font-weight: 600;
  background: rgba(255, 255, 255, 0.08); border-radius: 999px;
  color: var(--label-2); letter-spacing: 0.02em;
}

/* ==================== SECTIONS ==================== */
section { padding: 120px 0; position: relative; }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
  margin-bottom: 56px; flex-wrap: wrap;
}
.section-head h2 {
  margin: 10px 0 0;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.05; letter-spacing: -0.028em; font-weight: 700;
  max-width: 780px;
}
.section-head p {
  color: var(--label-2); max-width: 420px; margin: 0;
  font-size: 17px;
}

/* ==================== HERO (home) ==================== */
.hero {
  position: relative;
  padding: 200px 0 140px;
  text-align: center;
  overflow: hidden;
}
.hero .aurora {
  position: absolute; inset: -10% -10% auto -10%; height: 90%;
  /* warm, single-family ambient — same peach → coral → red lineage as the
     hero accent text. Replaces the previous blue + purple + pink blobs that
     read as a generic AI landing-page background. */
  background:
    radial-gradient(closest-side at 22% 28%, rgba(245, 141, 124, 0.16), transparent 70%),
    radial-gradient(closest-side at 78% 22%, rgba(231, 49, 58, 0.14),  transparent 70%),
    radial-gradient(closest-side at 50% 85%, rgba(155, 30, 36, 0.12),  transparent 72%);
  filter: blur(60px); z-index: 0;
  animation: drift 18s var(--ease-ios) infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(-4%, 3%, 0) scale(1.08); }
}
.hero .inner { position: relative; z-index: 1; }
.hero h1 {
  margin: 26px 0 22px;
  font-size: clamp(44px, 7vw, 96px);
  line-height: 1.02; letter-spacing: -0.035em; font-weight: 700;
}
.hero h1 .grad {
  background: linear-gradient(180deg, #fff 0%, #b8b8bf 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero h1 .accent {
  /* refined warm gradient — single family (peach → coral → alpine red → crimson)
     replaces the previous blue→purple→pink rainbow that read as generic AI */
  background: linear-gradient(135deg, #FFD4C4 0%, #F58D7C 32%, #E7313A 65%, #9B1E24 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lede {
  max-width: 640px; margin: 0 auto;
  font-size: clamp(17px, 1.6vw, 21px);
  color: var(--label-2); letter-spacing: -0.01em;
}
.hero .cta-row {
  margin-top: 40px; display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}

/* Dynamic Island status */
.island {
  margin: 64px auto 0; width: 300px; height: 44px;
  background: #000; border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}
.island .left { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--label-2); }
.island .left .avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--purple));
}
.island .right { font-size: 12px; color: var(--green); font-weight: 600; }

/* ==================== WORK GRID (home) ==================== */
.work-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(6, 1fr);
}
.card {
  position: relative; overflow: hidden;
  border-radius: var(--r-2xl);
  border: 1px solid var(--hairline);
  background: var(--bg-elev-2);
  padding: 32px;
  min-height: 380px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform 0.35s var(--ease-ios), background 0.35s var(--ease-ios), border-color 0.35s var(--ease-ios);
}
.card:hover { transform: translateY(-4px); background: #232327; border-color: rgba(255,255,255,0.14); }
.card h3 {
  margin: 16px 0 10px; font-size: 28px; line-height: 1.15; letter-spacing: -0.02em;
  font-weight: 700;
}
.card p { color: var(--label-2); margin: 0; font-size: 15px; }
.card .arrow {
  align-self: flex-end;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.08);
  transition: background 0.25s var(--ease-ios), transform 0.25s var(--ease-ios);
}
.card:hover .arrow { background: var(--blue); transform: translateX(4px); }
.card .arrow svg { width: 18px; height: 18px; stroke: #fff; }
.card.wide   { grid-column: span 4; }
.card.narrow { grid-column: span 2; }
.card.half   { grid-column: span 3; }

/* card mock visuals */
.mock {
  position: absolute; inset: auto -10% -20% -10%; height: 55%;
  border-radius: var(--r-xl);
  pointer-events: none;
}
.mock-app      { background: linear-gradient(160deg, #0a84ff 0%, #5e5ce6 100%); box-shadow: 0 30px 60px rgba(10,132,255,0.35); }
.mock-app::after { content:""; position:absolute; inset:20px; border-radius:20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 30%),
              repeating-linear-gradient(0deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 42px); }
.mock-health   { background: radial-gradient(circle at 30% 30%, #ff375f 0%, #bf5af2 60%, #1c1c1e 100%); box-shadow: 0 30px 60px rgba(255,55,95,0.3); }
.mock-health::after { content:""; position:absolute; inset:18px; border-radius:20px;
  background: radial-gradient(closest-side at 50% 70%, rgba(255,255,255,0.25), transparent 70%),
              conic-gradient(from 180deg at 50% 70%, var(--pink), var(--orange), var(--pink));
  mask: radial-gradient(circle at 50% 70%, transparent 38%, #000 40%, #000 58%, transparent 60%);
  -webkit-mask: radial-gradient(circle at 50% 70%, transparent 38%, #000 40%, #000 58%, transparent 60%); }
.mock-finance  { background: linear-gradient(160deg, #30d158 0%, #64d2ff 100%); box-shadow: 0 30px 60px rgba(48,209,88,0.3); }
.mock-finance::after { content:""; position:absolute; inset:22px; border-radius:18px;
  background: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0)),
              repeating-linear-gradient(90deg, rgba(0,0,0,0.12) 0 1px, transparent 1px 28px);
  clip-path: polygon(0 70%, 12% 55%, 24% 62%, 36% 40%, 48% 48%, 60% 30%, 72% 38%, 84% 22%, 100% 30%, 100% 100%, 0 100%); }
.mock-design   { background: linear-gradient(160deg, #ff9f0a 0%, #ff375f 100%); box-shadow: 0 30px 60px rgba(255,159,10,0.3); }
.mock-design::after { content:""; position:absolute; inset:18px; border-radius:20px;
  background: radial-gradient(closest-side at 30% 40%, rgba(255,255,255,0.3), transparent 70%),
              linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.4)); }
.mock-ai       { background: #000; border: 1px solid rgba(255,255,255,0.1); }
.mock-ai::after { content:""; position:absolute; inset:0; border-radius: var(--r-xl);
  background: radial-gradient(closest-side at 50% 50%, rgba(10,132,255,0.5), transparent 70%),
              conic-gradient(from 0deg, var(--blue), var(--purple), var(--pink), var(--blue));
  filter: blur(20px); opacity: 0.7; }
.mock-tools    { background: linear-gradient(160deg, #3A3A3C 0%, #1C1C1E 100%); box-shadow: 0 30px 60px rgba(0,0,0,0.6); }
.mock-tools::after { content:""; position:absolute; inset:18px; border-radius:20px;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 10px, transparent 10px 20px); }
.mock-lumo     {
  background:
    radial-gradient(ellipse 70% 50% at 50% 60%, rgba(255,122,26,0.55), transparent 55%),
    linear-gradient(180deg, #2a1205 0%, #0a0402 100%);
  box-shadow: 0 30px 60px rgba(255,122,26,0.28);
  border: 1px solid rgba(255,255,255,0.06);
}
.mock-lumo::before {
  content:""; position:absolute; left:50%; top:18%; transform:translateX(-50%);
  width: 38%; aspect-ratio: 3/5;
  background:
    radial-gradient(ellipse at 50% 20%, #f5f3f1 0%, #cac6c2 60%, transparent 62%),
    radial-gradient(ellipse at 50% 60%, #efece8 0%, #bab6b2 55%, transparent 58%);
  filter: drop-shadow(0 12px 30px rgba(0,0,0,0.6));
}
.mock-lumo::after {
  content:""; position:absolute; inset:0; border-radius: var(--r-xl);
  background: radial-gradient(ellipse 60% 30% at 50% 90%, rgba(0,0,0,0.5), transparent 70%);
}

/* ==================== CAPABILITIES ==================== */
.caps {
  margin-top: 80px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.cap {
  background: var(--bg-elev-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 28px;
}
.cap .icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  margin-bottom: 16px;
  background: rgba(10, 132, 255, 0.15); color: var(--blue);
}
.cap:nth-child(2) .icon { background: rgba(191, 90, 242, 0.15); color: var(--purple); }
.cap:nth-child(3) .icon { background: rgba(48, 209, 88, 0.15); color: var(--green); }
.cap:nth-child(4) .icon { background: rgba(255, 159, 10, 0.15); color: var(--orange); }
.cap h4 { margin: 0 0 6px; font-size: 17px; letter-spacing: -0.01em; font-weight: 600; }
.cap p  { margin: 0; color: var(--label-2); font-size: 14px; }

/* ==================== FOOTER ==================== */
footer {
  padding: 56px 0 72px;
  border-top: 1px solid var(--separator);
  color: var(--label-2); font-size: 13px;
}
.foot-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.socials { display: flex; gap: 10px; }
.socials a {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg-elev-2);
  border: 1px solid var(--hairline);
  display: grid; place-items: center;
  transition: background 0.25s var(--ease-ios);
}
.socials a:hover { background: var(--bg-elev-3); }

/* ============================================================
   DJI × APPLE PRODUCT PAGE
   Cinematic full-bleed hero, big stats, alternating features,
   spec table, next-project CTA.
   ============================================================ */

.proj-hero {
  position: relative; min-height: 92vh;
  padding: 180px 0 80px;
  overflow: hidden;
  display: flex; align-items: center;
}
.proj-hero .bg {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse at 50% 40%, var(--accent-soft, rgba(10,132,255,0.35)), transparent 60%),
              linear-gradient(180deg, #000, #000 40%, var(--accent-dark, #050810) 100%);
}
.proj-hero .grid-lines {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(90deg, transparent 0, transparent 50%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0.03) 50.1%, transparent 50.1%),
    linear-gradient(180deg, transparent 0, transparent 33%, rgba(255,255,255,0.02) 33%, rgba(255,255,255,0.02) 33.1%, transparent 33.1%),
    linear-gradient(180deg, transparent 0, transparent 66%, rgba(255,255,255,0.02) 66%, rgba(255,255,255,0.02) 66.1%, transparent 66.1%);
  pointer-events: none;
}
.proj-hero .container { position: relative; z-index: 2; width: 100%; }

.proj-hero .meta {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--label-2); letter-spacing: 0.08em; text-transform: uppercase;
}
.proj-hero .meta span { padding: 6px 12px; border: 1px solid var(--hairline); border-radius: 999px; }

.proj-hero h1 {
  margin: 0 0 24px;
  font-size: clamp(56px, 10vw, 160px);
  line-height: 0.95; letter-spacing: -0.04em; font-weight: 700;
}
.proj-hero h1 .grad {
  background: linear-gradient(180deg, #fff 0%, #8e8e93 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.proj-hero h1 .accent {
  background: linear-gradient(90deg, var(--accent), var(--accent-2, var(--accent)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.proj-hero .tagline {
  max-width: 640px;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--label-2); letter-spacing: -0.01em;
  margin: 0 0 40px;
}
.proj-hero .product-stage {
  position: relative;
  height: min(48vh, 520px);
  margin-top: 32px;
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  border: 1px solid var(--hairline);
}
.proj-hero .product {
  position: absolute; inset: 0;
  display: grid; place-items: center;
}
/* device frame used across product pages */
.device {
  width: clamp(200px, 22vw, 300px);
  aspect-ratio: 9 / 19.5;
  border-radius: 44px;
  background: #111;
  border: 3px solid #2a2a2e;
  box-shadow:
    0 40px 80px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.04),
    inset 0 0 0 1px rgba(255,255,255,0.04);
  position: relative; overflow: hidden;
  transform: perspective(1200px) rotateY(-14deg) rotateX(6deg) rotate(-2deg);
  transition: transform 0.6s var(--ease-ios);
}
.device::before {
  content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 26px; background: #000; border-radius: 999px;
  z-index: 3;
}
.device .screen {
  position: absolute; inset: 6px; border-radius: 38px; overflow: hidden;
}

/* ==================== PROJECT STATS STRIP ==================== */
.proj-stats {
  padding: 80px 0;
  border-top: 1px solid var(--separator);
  border-bottom: 1px solid var(--separator);
}
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
}
.stat-big .num {
  font-size: clamp(44px, 6vw, 88px);
  letter-spacing: -0.035em; font-weight: 700;
  line-height: 1;
  background: linear-gradient(180deg, #fff 0%, #9a9aa0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-big .num .unit { font-size: 0.5em; font-weight: 600; color: var(--label-2); -webkit-text-fill-color: currentColor; margin-left: 4px; }
.stat-big .lbl {
  margin-top: 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--label-2); text-transform: uppercase;
}
.stat-big .desc { margin-top: 8px; font-size: 14px; color: var(--label-2); max-width: 220px; }

/* ==================== PROJECT FEATURE ALTERNATING ==================== */
.feature {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
  padding: 80px 0;
}
.feature.reverse { direction: rtl; }
.feature.reverse > * { direction: ltr; }
.feature .copy .eyebrow { color: var(--accent); }
.feature h3 {
  margin: 14px 0 20px;
  font-size: clamp(32px, 3.6vw, 48px);
  letter-spacing: -0.028em; font-weight: 700; line-height: 1.1;
}
.feature p { color: var(--label-2); font-size: 17px; max-width: 520px; }
.feature .visual {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-2xl);
  border: 1px solid var(--hairline);
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--bg-elev-2), var(--bg));
}

/* ==================== CINEMATIC FULL BLEED (DJI) ==================== */
.cinema {
  position: relative;
  height: 90vh; min-height: 640px;
  display: flex; align-items: flex-end;
  overflow: hidden;
  border-radius: var(--r-2xl);
  margin: 40px auto;
  width: calc(100% - 2 * var(--pad-x));
  max-width: 1480px;
}
.cinema .bg {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse at 50% 30%, var(--accent-soft, rgba(10,132,255,0.4)), transparent 60%),
              linear-gradient(180deg, #000, #050508 70%);
}
.cinema .bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(closest-side at 50% 65%, var(--accent, #0a84ff), transparent 45%);
  opacity: 0.4; filter: blur(40px);
}
.cinema .content {
  position: relative; z-index: 2; padding: 64px;
  max-width: 720px;
}
.cinema h3 {
  margin: 14px 0 16px;
  font-size: clamp(36px, 5vw, 72px);
  letter-spacing: -0.032em; font-weight: 700; line-height: 1.05;
}
.cinema p { color: rgba(255,255,255,0.8); font-size: 18px; }

/* ==================== GALLERY ==================== */
.gallery {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.gallery .tile {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  border: 1px solid var(--hairline);
  overflow: hidden; position: relative;
  background: linear-gradient(160deg, var(--bg-elev-2), var(--bg));
}
.gallery .tile::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(closest-side at 50% 40%, var(--accent-soft, rgba(255,255,255,0.08)), transparent 70%);
}

/* ==================== SPECS TABLE (DJI-style) ==================== */
.specs {
  border-top: 1px solid var(--separator);
}
.specs h2 {
  font-size: clamp(28px, 3.5vw, 44px);
  letter-spacing: -0.028em; font-weight: 700;
  margin: 0 0 40px;
}
.spec-group { border-top: 1px solid var(--separator); padding: 32px 0; }
.spec-row {
  display: grid; grid-template-columns: 240px 1fr; gap: 24px; padding: 16px 0;
  border-bottom: 1px dashed var(--hairline);
}
.spec-row:last-child { border-bottom: 0; }
.spec-row .k { color: var(--label-2); font-size: 14px; }
.spec-row .v { color: var(--label); font-size: 15px; }

/* ==================== NEXT PROJECT ==================== */
.next-proj {
  display: block;
  padding: 80px 0;
  border-top: 1px solid var(--separator);
  text-align: center;
}
.next-proj .tiny { color: var(--label-2); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.next-proj h3 {
  margin: 12px 0 20px;
  font-size: clamp(40px, 6vw, 88px); letter-spacing: -0.035em; font-weight: 700;
  background: linear-gradient(180deg, #fff, #6e6e73);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: background 0.35s var(--ease-ios);
}
.next-proj:hover h3 {
  background: linear-gradient(180deg, #fff, #fff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ==================== ABOUT PAGE ==================== */
.about-hero {
  padding: 200px 0 80px; text-align: left;
}
.about-hero h1 {
  font-size: clamp(48px, 8vw, 120px);
  line-height: 1; letter-spacing: -0.04em; font-weight: 700;
  margin: 22px 0 32px; max-width: 900px;
}
.about-hero h1 .grad {
  background: linear-gradient(180deg, #fff, #6e6e73);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.about-lede { max-width: 760px; font-size: clamp(18px, 1.8vw, 22px); color: var(--label-2); line-height: 1.5; }
.about-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
  padding: 80px 0;
}
.about-split .portrait {
  aspect-ratio: 4/5; border-radius: var(--r-2xl); border: 1px solid var(--hairline);
  background:
    radial-gradient(closest-side at 50% 40%, rgba(255,255,255,0.08), transparent 70%),
    linear-gradient(160deg, #1c1c1e, #0a0a0c);
  position: relative; overflow: hidden;
}
.about-split .portrait::after {
  content: "Z"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 240px; font-weight: 700; letter-spacing: -0.04em;
  background: linear-gradient(180deg, #fff 0%, #3a3a3c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0.85;
}
.about-split h2 { font-size: clamp(32px, 4vw, 48px); letter-spacing: -0.028em; margin: 8px 0 22px; }
.about-split p { color: var(--label-2); font-size: 17px; }
.about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.about-stats .stat {
  background: var(--bg-elev-2); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: 22px;
}
.about-stats .stat .num {
  font-size: 38px; font-weight: 700; letter-spacing: -0.02em;
  background: linear-gradient(180deg, #fff 0%, #a0a0a8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.about-stats .stat .lbl { color: var(--label-2); font-size: 13px; margin-top: 4px; }

.timeline {
  padding: 80px 0; border-top: 1px solid var(--separator);
}
.timeline-row {
  display: grid; grid-template-columns: 180px 1fr 1fr; gap: 48px;
  padding: 28px 0; border-bottom: 1px dashed var(--hairline);
  align-items: baseline;
}
.timeline-row:last-child { border-bottom: 0; }
.timeline-row .when { color: var(--label-2); font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; }
.timeline-row h4 { margin: 0 0 6px; font-size: 20px; letter-spacing: -0.015em; font-weight: 600; }
.timeline-row p { margin: 0; color: var(--label-2); font-size: 15px; }

/* ==================== CONTACT STRIP (shared) ==================== */
.contact-strip { text-align: center; padding: 120px 0; }
.contact-strip .kicker { color: var(--label-2); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
.contact-strip h2 {
  font-size: clamp(44px, 7vw, 96px);
  line-height: 1.02; letter-spacing: -0.035em; font-weight: 700;
  margin: 20px 0 28px;
}
.contact-strip h2 .grad {
  /* matches the hero accent — same warm peach → red family */
  background: linear-gradient(135deg, #FFD4C4 0%, #F58D7C 32%, #E7313A 65%, #9B1E24 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.contact-strip .email {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 28px; font-size: 18px; font-weight: 600;
  background: #fff; color: #000; border-radius: 999px;
  transition: transform 0.25s var(--ease-ios);
}
.contact-strip .email:hover { transform: scale(1.02); }

/* ==================== SCROLL REVEAL ==================== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.85s var(--ease-ios), transform 0.85s var(--ease-ios); }
.reveal.in { opacity: 1; transform: none; }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1024px) {
  .feature { grid-template-columns: 1fr; gap: 40px; }
  .feature.reverse { direction: ltr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .about-split { grid-template-columns: 1fr; }
  .timeline-row { grid-template-columns: 120px 1fr; }
  .timeline-row p { grid-column: 2; }
}
@media (max-width: 900px) {
  section { padding: 88px 0; }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .card.wide, .card.narrow, .card.half { grid-column: span 2; }
  .caps { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: 150px 0 80px; }
  .cinema .content { padding: 40px; }
  .spec-row { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 520px) {
  .nav a.link { display: none; }
  .about-stats { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .proj-hero { min-height: auto; padding: 140px 0 40px; }
}

/* ============================================================
   REFERENCE-STYLE ADDITIONS
   Warm amber ambience + glass-bubble product hero,
   layered glass stacks, numbered section badges.
   ============================================================ */

:root {
  --amber:        #FF7A1A;
  --amber-soft:   rgba(255, 122, 26, 0.22);
  --sepia-warm:   rgba(255, 170, 110, 0.12);
  --glass-bg:     rgba(22, 22, 26, 0.55);
  --glass-border: rgba(255, 255, 255, 0.10);
}

/* Warm ambient background layer (opt-in via .ambient) */
.ambient {
  position: relative;
}
.ambient::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 45% at 50% 15%, var(--amber-soft), transparent 60%),
    radial-gradient(ellipse 60% 40% at 20% 80%, rgba(255, 122, 26, 0.10), transparent 60%),
    radial-gradient(ellipse 50% 30% at 90% 60%, rgba(255, 200, 140, 0.06), transparent 60%);
}

/* Glass stack — layered frosted panels like the reference image */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-2xl);
  backdrop-filter: saturate(160%) blur(28px);
  -webkit-backdrop-filter: saturate(160%) blur(28px);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.glass-light {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-radius: var(--r-xl);
}

/* Bubble hero — the product-in-a-glass-sphere treatment */
.bubble-hero {
  position: relative;
  min-height: 100vh;
  padding: 140px 0 80px;
  overflow: hidden;
  display: flex; align-items: center;
}
.bubble-hero .scene {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 120% 80% at 50% 40%, rgba(255, 122, 26, 0.20), transparent 60%),
    radial-gradient(ellipse 80% 60% at 80% 20%, rgba(255, 170, 80, 0.18), transparent 60%),
    linear-gradient(180deg, #050408 0%, #0a0805 50%, #050306 100%);
}
.bubble-hero .scene::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(1px 1px at 30% 30%, rgba(255,255,255,0.3), transparent 2px),
    radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.25), transparent 2px),
    radial-gradient(1px 1px at 20% 70%, rgba(255,255,255,0.2), transparent 2px),
    radial-gradient(1px 1px at 85% 85%, rgba(255,255,255,0.3), transparent 2px),
    radial-gradient(1px 1px at 50% 10%, rgba(255,255,255,0.2), transparent 2px);
}

.bubble-hero .container-wide { position: relative; z-index: 2; width: 100%; }

.bubble-shell {
  display: grid;
  grid-template-columns: 280px 1fr 280px;
  gap: 20px;
  align-items: stretch;
}

.bubble-stage {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  min-height: 560px;
  background:
    radial-gradient(ellipse 80% 80% at 50% 50%, rgba(255, 122, 26, 0.25), transparent 60%),
    linear-gradient(160deg, rgba(28, 22, 18, 0.85), rgba(8, 6, 4, 0.95));
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 32px;
}

.bubble-stage .stage-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  z-index: 3; position: relative;
}
.bubble-stage .stage-head .n {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--label-2); letter-spacing: 0.18em; text-transform: uppercase;
}
.bubble-stage .stage-head .info {
  text-align: right; font-family: var(--font-mono); font-size: 11px;
  color: var(--label-2); letter-spacing: 0.08em;
}

/* The glass bubble itself */
.bubble-orb {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, 72%);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.22), transparent 40%),
    radial-gradient(circle at 70% 75%, rgba(255, 140, 60, 0.28), transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05), transparent 70%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 0 80px rgba(255, 255, 255, 0.08),
    inset 0 0 120px rgba(255, 120, 40, 0.08),
    0 40px 100px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px) saturate(130%);
  -webkit-backdrop-filter: blur(3px) saturate(130%);
}
.bubble-orb::before {
  content: ""; position: absolute; inset: 10%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.bubble-orb::after {
  content: ""; position: absolute; top: 12%; left: 22%;
  width: 28%; height: 18%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.4), transparent 70%);
  filter: blur(6px);
}

/* Satellite small bubbles around the orb */
.sat {
  position: absolute; border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.35), transparent 60%),
    radial-gradient(circle at 70% 75%, rgba(255, 160, 80, 0.25), transparent 60%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(2px);
}
.sat.s1 { width: 60px; height: 60px; top: 12%; left: 14%; }
.sat.s2 { width: 40px; height: 40px; top: 22%; right: 12%; }
.sat.s3 { width: 52px; height: 52px; bottom: 18%; left: 20%; }
.sat.s4 { width: 34px; height: 34px; bottom: 22%; right: 18%; }
.sat.s5 { width: 22px; height: 22px; top: 50%; right: 8%; }

/* Subject inside the bubble (your product) */
.bubble-subject {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(280px, 48%);
  z-index: 4;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.5));
}

/* Side preview cards (the two small cards flanking the hero) */
.side-card {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  min-height: 360px;
  padding: 22px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: rgba(20, 18, 20, 0.7);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  transition: transform 0.35s var(--ease-ios), border-color 0.35s var(--ease-ios);
}
.side-card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.2); }
.side-card .side-thumb {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0.45;
}
.side-card > * { position: relative; z-index: 1; }
.side-card .side-label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; color: var(--label-2); text-transform: uppercase;
}
.side-card .side-title {
  font-size: 26px; line-height: 1.1; letter-spacing: -0.025em; font-weight: 700;
  margin: 10px 0 0;
}
.side-card .side-meta {
  font-family: var(--font-mono); font-size: 10px; color: var(--label-2);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.side-card .side-cta {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: grid; place-items: center;
  align-self: flex-end;
  transition: background 0.25s var(--ease-ios), transform 0.25s var(--ease-ios);
}
.side-card:hover .side-cta { background: var(--amber); border-color: var(--amber); transform: rotate(-45deg); }
.side-card .side-cta svg { width: 18px; height: 18px; stroke: #fff; }

/* Top meta bar — tabular info like the reference's "01 / CLASSIC HOODIE / DETAILS" */
.hero-meta {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 48px;
  padding: 18px 24px; margin-bottom: 20px;
  border-radius: 999px;
  background: rgba(18, 16, 18, 0.65);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  align-items: center;
}
.hero-meta .big-n {
  font-size: 60px; font-weight: 700; letter-spacing: -0.04em; line-height: 1;
  background: linear-gradient(180deg, #fff, #a0a0a8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-meta .col {
  display: flex; flex-direction: column; gap: 4px;
}
.hero-meta .col .k {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--label-2); letter-spacing: 0.12em; text-transform: uppercase;
}
.hero-meta .col .v {
  font-size: 13px; color: var(--label); letter-spacing: -0.005em;
}

/* Big wordmark under the bubble — "NEW · COSMIC SET 23↗" style */
.wordmark-strip {
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 32px; margin-top: 20px;
  border-radius: var(--r-xl);
  background: rgba(18, 16, 18, 0.65);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  gap: 24px; flex-wrap: wrap;
}
.wordmark-strip .thumb {
  width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.25), transparent 60%),
              radial-gradient(circle at 70% 75%, rgba(255, 120, 40, 0.35), transparent 60%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}
.wordmark-strip h3 {
  margin: 0; font-size: clamp(26px, 3vw, 40px); letter-spacing: -0.03em; font-weight: 700;
  flex: 1;
}
.wordmark-strip .right-col {
  display: flex; gap: 24px; align-items: center;
  font-family: var(--font-mono); font-size: 10px; color: var(--label-2);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.wordmark-strip .round-cta {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 0.25s var(--ease-ios), transform 0.25s var(--ease-ios);
}
.wordmark-strip .round-cta:hover { background: var(--amber); transform: rotate(-45deg); }

/* Numbered section badge — "01", "02" style indicators at section heads */
.n-badge {
  display: inline-flex; align-items: baseline; gap: 12px;
  font-family: var(--font-mono); font-size: 11px; color: var(--label-2);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.n-badge .num {
  font-family: var(--font-ui); font-size: 48px; font-weight: 700;
  letter-spacing: -0.04em; color: var(--label);
  background: linear-gradient(180deg, #fff, #8e8e93);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1;
}

/* Responsive */
@media (max-width: 1024px) {
  .bubble-shell { grid-template-columns: 1fr; }
  .bubble-stage { min-height: 480px; }
  .hero-meta { grid-template-columns: auto 1fr; gap: 16px; padding: 14px 18px; }
  .hero-meta .big-n { font-size: 44px; }
}

/* ============================================================
   LUMO PROJECT PAGE STYLES
   ============================================================ */

.lumo-hero {
  position: relative; min-height: 100vh;
  padding: 140px 0 60px;
  overflow: hidden;
  display: flex; align-items: center;
}
.lumo-hero .city {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 90% 55% at 60% 55%, rgba(255, 122, 26, 0.45), transparent 55%),
    radial-gradient(ellipse 70% 40% at 30% 75%, rgba(255, 90, 20, 0.25), transparent 60%),
    linear-gradient(180deg, #020103 0%, #0a0503 50%, #040204 100%);
}
.lumo-hero .city::after {
  /* Pseudo-city skyline bars */
  content: ""; position: absolute; left: 0; right: 0; bottom: 10%; height: 40%;
  background:
    linear-gradient(to top,
      rgba(255, 110, 30, 0.55) 0%,
      rgba(255, 110, 30, 0.15) 30%,
      transparent 100%),
    repeating-linear-gradient(90deg,
      rgba(0, 0, 0, 0.8) 0 2px, transparent 2px 14px,
      rgba(0, 0, 0, 0.6) 14px 16px, transparent 16px 38px,
      rgba(0, 0, 0, 0.9) 38px 40px, transparent 40px 62px,
      rgba(0, 0, 0, 0.5) 62px 64px, transparent 64px 86px);
  mask: linear-gradient(to top, #000 40%, transparent 100%);
  -webkit-mask: linear-gradient(to top, #000 40%, transparent 100%);
  opacity: 0.7;
}

.lumo-figure {
  position: relative;
  width: min(320px, 80%);
  aspect-ratio: 3/5;
  margin: 0 auto;
  filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.7));
}
/* Head */
.lumo-figure .head {
  position: absolute; top: 0; left: 15%; width: 70%; aspect-ratio: 5/3;
  border-radius: 30% 30% 26% 26% / 45% 45% 40% 40%;
  background: linear-gradient(180deg, #f5f3f1 0%, #d9d5d1 100%);
  box-shadow: inset 0 -6px 12px rgba(0,0,0,0.15), 0 4px 12px rgba(0,0,0,0.3);
}
.lumo-figure .head .visor {
  position: absolute; top: 18%; left: 8%; right: 8%; height: 56%;
  background: linear-gradient(180deg, #1a1a1c 0%, #000 100%);
  border-radius: 26px;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.08);
}
.lumo-figure .head .visor::before,
.lumo-figure .head .visor::after {
  content: ""; position: absolute; width: 18%; aspect-ratio: 1;
  background: #fff; border-radius: 50%;
  top: 32%; box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}
.lumo-figure .head .visor::before { left: 22%; }
.lumo-figure .head .visor::after { right: 22%; }
.lumo-figure .head .smile {
  position: absolute; bottom: 18%; left: 38%; width: 24%; aspect-ratio: 6/1;
  border-radius: 999px; background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}
/* Neck */
.lumo-figure .neck {
  position: absolute; top: 25%; left: 42%; width: 16%; height: 6%;
  background: linear-gradient(180deg, #2a2a2e, #1a1a1c);
  border-radius: 4px;
}
/* Body */
.lumo-figure .body {
  position: absolute; top: 30%; left: 12%; width: 76%; aspect-ratio: 4/5;
  border-radius: 40% 40% 38% 38% / 24% 24% 36% 36%;
  background: linear-gradient(180deg, #efece8 0%, #cac6c2 100%);
  box-shadow: inset 0 -10px 20px rgba(0,0,0,0.12);
}
.lumo-figure .body .chest {
  position: absolute; top: 30%; left: 30%; width: 40%; aspect-ratio: 1;
  border-radius: 30%;
  background: #1a1a1c;
  border: 2px solid #ffffff33;
}
.lumo-figure .body .chest::after {
  content: ""; position: absolute; inset: 18%; border-radius: 30%;
  background: linear-gradient(135deg, #2a2a2e, #000);
}
.lumo-figure .band {
  position: absolute; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, transparent, #ff6b1a 30%, #ff6b1a 70%, transparent);
  box-shadow: 0 0 12px #ff6b1a;
}
.lumo-figure .band.b1 { top: 32%; }
.lumo-figure .band.b2 { top: 60%; }
/* Arms */
.lumo-figure .arm {
  position: absolute; top: 32%; width: 14%; aspect-ratio: 1/3.5;
  border-radius: 40px;
  background: linear-gradient(180deg, #efece8 0%, #cac6c2 100%);
  box-shadow: inset 0 -6px 12px rgba(0,0,0,0.12);
}
.lumo-figure .arm.left  { left: 0; transform: rotate(4deg); }
.lumo-figure .arm.right { right: 0; transform: rotate(-4deg); }
/* Base stand */
.lumo-figure .stand {
  position: absolute; bottom: 0; left: 25%; right: 25%; height: 4%;
  background: radial-gradient(ellipse, rgba(0,0,0,0.6), transparent 70%);
  filter: blur(4px);
}

/* LUMO name lockup — like their title slide */
.lumo-lockup {
  text-align: center; position: relative; z-index: 2;
}
.lumo-lockup .dashes { color: #fff; font-weight: 300; letter-spacing: 0.1em; }
.lumo-lockup h1 {
  margin: 20px 0; font-size: clamp(72px, 12vw, 180px);
  font-weight: 700; letter-spacing: 0.04em; line-height: 1;
  color: #fff;
  text-shadow: 0 0 60px rgba(255, 122, 26, 0.3);
}
.lumo-lockup .divider {
  width: 240px; max-width: 60%; height: 1px; margin: 24px auto;
  background: rgba(255, 255, 255, 0.4);
}
.lumo-lockup .subtitle {
  font-size: clamp(16px, 1.8vw, 22px);
  color: rgba(255, 255, 255, 0.85); letter-spacing: 0.01em;
  max-width: 680px; margin: 0 auto;
  font-style: italic;
}
.lumo-lockup .caption {
  margin-top: 40px; color: var(--label-2); max-width: 620px; margin-left: auto; margin-right: auto;
  font-size: 15px; line-height: 1.6;
}

/* Journey stages grid */
.journey {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
  margin-top: 40px;
}
.stage-card {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #0a0503;
  border: 1px solid var(--hairline);
  padding: 20px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.stage-card .st-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.85) contrast(1.05);
  z-index: 0;
}
.stage-card::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,5,3,0.25) 0%, rgba(10,5,3,0.55) 55%, rgba(10,5,3,0.95) 100%),
    linear-gradient(180deg, transparent 0%, rgba(255, 110, 30, 0.18) 100%);
  z-index: 1;
}
.stage-card .st-n {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--amber); letter-spacing: 0.18em; text-transform: uppercase;
  position: relative; z-index: 2;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.stage-card .st-t {
  position: relative; z-index: 2;
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1;
  margin-top: auto;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
.stage-card .st-d {
  position: relative; z-index: 2;
  margin-top: 8px; font-size: 12px; color: rgba(255,255,255,0.82); line-height: 1.4;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* Principles (4-up) */
.principles {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px;
}
.principle {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(255,122,26,0.12) 0%, rgba(0,0,0,0.3) 100%);
  padding: 24px;
  aspect-ratio: 4/5;
  display: flex; flex-direction: column; justify-content: space-between;
}
.principle .pn {
  font-family: var(--font-mono); font-size: 36px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--amber); line-height: 1;
}
.principle .pt { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }

/* LUMO specific hero bubble treatment */
.lumo-hero .lumo-stage {
  margin-top: 40px;
}

@media (max-width: 900px) {
  .journey { grid-template-columns: repeat(2, 1fr); }
  .principles { grid-template-columns: repeat(2, 1fr); }
}