:root{
  --bg:#07090d;
  --bg-soft:#0c1016;
  --panel:#111722;
  --panel-2:#161e2b;
  --text:#f7f9fb;
  --muted:#9aa7b6;
  --line:rgba(255,255,255,.10);
  --blue:#4d8dff;
  --blue-2:#8eb9ff;
  --gold:#e6b85d;
  --shadow:0 28px 80px rgba(0,0,0,.42);
  --radius:24px;
  --container:min(1180px, calc(100% - 40px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,a{font:inherit}
.container{width:var(--container);margin-inline:auto}
.skip-link{
  position:fixed;left:16px;top:-80px;z-index:9999;
  background:#fff;color:#000;padding:10px 14px;border-radius:10px
}
.skip-link:focus{top:16px}
.site-header{
  position:fixed;inset:0 0 auto;z-index:100;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(7,9,13,.74);
  backdrop-filter:blur(18px);
}
.nav-wrap{height:78px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;letter-spacing:.13em}
.brand span{display:grid;line-height:1.02}
.brand strong{font-size:.86rem}
.brand small{font-size:.66rem;color:var(--muted);margin-top:4px}
.site-nav{display:flex;align-items:center;gap:28px;font-size:.9rem;color:#c9d1dc}
.site-nav a:hover{color:#fff}
.nav-cta{padding:9px 15px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.04)}
.lang-toggle{
  border:1px solid var(--line);background:transparent;color:#fff;
  border-radius:999px;padding:8px 10px;cursor:pointer
}
.nav-toggle{display:none;border:0;background:none;padding:6px;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:#fff;margin:5px}
.hero{
  position:relative;min-height:860px;padding:160px 0 90px;
  display:flex;align-items:center;overflow:hidden;
  background:
    radial-gradient(circle at 72% 30%,rgba(64,117,216,.18),transparent 26%),
    linear-gradient(180deg,#080a0f 0%,#07090d 75%,#090c12 100%);
}
.hero:after{
  content:"";position:absolute;inset:auto 0 0;height:190px;
  background:linear-gradient(transparent,var(--bg));
}
.hero-glow{position:absolute;border-radius:50%;filter:blur(80px);opacity:.25}
.hero-glow-one{width:420px;height:420px;background:#174c9f;right:10%;top:16%}
.hero-glow-two{width:260px;height:260px;background:#789cff;right:32%;bottom:10%}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:70px;align-items:center;position:relative;z-index:2}
.eyebrow{
  margin:0 0 18px;color:#87aef3;font-size:.74rem;font-weight:800;
  letter-spacing:.22em;text-transform:uppercase
}
.hero h1,.section h2,.join-card h2{
  margin:0;line-height:.97;letter-spacing:-.045em;
  font-weight:900
}
.hero h1{font-size:clamp(3.2rem,7vw,7rem);max-width:760px}
.hero h1 span{display:block}
.hero h1 .accent{
  color:transparent;background:linear-gradient(120deg,#fff,#6a97eb 52%,#c7dbff);
  -webkit-background-clip:text;background-clip:text
}
.hero-lead{max-width:620px;font-size:1.14rem;color:#b7c2d0;margin:28px 0}
.hero-actions,.join-actions{display:flex;gap:14px;flex-wrap:wrap}
.button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:0 22px;border-radius:999px;font-weight:800;
  letter-spacing:.02em;border:1px solid transparent;transition:.25s ease
}
.button:hover{transform:translateY(-2px)}
.button-primary{background:linear-gradient(135deg,#5b92ff,#2f65d7);box-shadow:0 14px 38px rgba(60,115,225,.26)}
.button-secondary{background:rgba(255,255,255,.035);border-color:var(--line);color:#fff}
.button-disabled{background:#1a202a;border:1px solid var(--line);color:#738092;cursor:not-allowed}
.full{width:100%}
.hero-metrics{
  display:flex;gap:30px;flex-wrap:wrap;margin-top:46px;padding-top:26px;border-top:1px solid var(--line)
}
.hero-metrics div{display:grid}
.hero-metrics strong{font-size:.78rem;letter-spacing:.16em}
.hero-metrics span{font-size:.8rem;color:var(--muted);margin-top:3px}
.hero-art{position:relative;display:flex;justify-content:center}
.hero-frame{
  position:relative;width:min(520px,100%);aspect-ratio:.84;
  border:1px solid rgba(255,255,255,.12);border-radius:40px;
  background:linear-gradient(155deg,rgba(255,255,255,.07),rgba(255,255,255,.01));
  box-shadow:var(--shadow);overflow:hidden
}
.hero-frame:before{
  content:"";position:absolute;inset:22px;border:1px solid rgba(255,255,255,.09);
  border-radius:26px;pointer-events:none
}
.hero-frame img{width:100%;height:100%;object-fit:cover}
.spec-chip{
  position:absolute;background:rgba(6,9,14,.75);border:1px solid var(--line);
  backdrop-filter:blur(12px);padding:8px 11px;border-radius:999px;
  font-size:.66rem;letter-spacing:.13em;font-weight:800
}
.chip-one{left:20px;top:22px}
.chip-two{right:22px;top:38%}
.chip-three{left:35%;bottom:25px}
.trust-strip{border-block:1px solid var(--line);background:#0a0d12;position:relative;z-index:4}
.trust-grid{
  min-height:76px;display:grid;grid-template-columns:repeat(4,1fr);
  align-items:center;text-align:center;color:#a8b2c1;text-transform:uppercase;
  letter-spacing:.15em;font-size:.7rem;font-weight:800
}
.trust-grid span+span{border-left:1px solid var(--line)}
.section{padding:118px 0;position:relative}
.section-dark{background:#0a0e14;border-block:1px solid rgba(255,255,255,.06)}
.section-heading{
  display:grid;grid-template-columns:1.15fr .75fr;gap:70px;align-items:end;margin-bottom:52px
}
.section-heading.centered{display:block;text-align:center;max-width:760px;margin:0 auto 54px}
.section-heading h2,.section h2,.join-card h2{font-size:clamp(2.3rem,4.3vw,4.6rem)}
.section-heading p,.section-intro,.showcase-copy p{color:var(--muted);font-size:1.03rem}
.release-grid{
  display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:1fr 1fr;gap:20px
}
.release-card{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(160deg,#131a24,#0c1016);display:grid;grid-template-columns:1fr 1fr;
  min-height:270px;transition:.3s ease
}
.release-card:hover{transform:translateY(-5px);border-color:rgba(93,143,244,.4)}
.release-card-large{grid-row:1/3;grid-template-columns:1fr;min-height:560px}
.release-visual{background:linear-gradient(135deg,#101722,#05070a);overflow:hidden}
.release-card-large .release-visual{min-height:380px}
.release-visual img{width:100%;height:100%;object-fit:cover}
.release-info{padding:28px}
.release-info h3{font-size:1.45rem;margin:10px 0 8px}
.release-info p{margin:0;color:var(--muted)}
.tag{font-size:.67rem;letter-spacing:.16em;color:#8fb5ff;font-weight:900}
.replace-note{text-align:center;color:#718093;font-size:.82rem;margin:28px 0 0}
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.tier-card{
  position:relative;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(160deg,#131a24,#0c1118);padding:30px;
  display:flex;flex-direction:column;box-shadow:0 16px 50px rgba(0,0,0,.15)
}
.tier-card.featured{
  transform:translateY(-10px);border-color:rgba(90,143,255,.55);
  box-shadow:0 24px 70px rgba(35,84,170,.22)
}
.featured-badge{
  position:absolute;top:0;right:24px;transform:translateY(-50%);
  background:#4e86ee;color:#fff;font-size:.63rem;font-weight:900;letter-spacing:.16em;
  padding:7px 11px;border-radius:999px
}
.tier-top{display:flex;align-items:center;gap:16px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.tier-orb{width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 14px rgba(255,255,255,.55),0 0 30px currentColor}
.tier-orb.silver{background:linear-gradient(145deg,#fff,#8ea0b7);color:#bcc8d5}
.tier-orb.gold{background:linear-gradient(145deg,#ffe5a0,#bf791e);color:#e8af49}
.tier-orb.platinum{background:linear-gradient(145deg,#b9dcff,#4676e6);color:#6b9cff}
.tier-label{font-size:.72rem;letter-spacing:.16em;color:#a8b2c2;font-weight:900;margin:0}
.tier-top h3{margin:3px 0 0;font-size:2.1rem}
.tier-card ul{padding:0;margin:28px 0 32px;list-style:none;display:grid;gap:14px;flex:1}
.tier-card li{position:relative;padding-left:26px;color:#c7d0dc}
.tier-card li:before{content:"✓";position:absolute;left:0;color:#72a1ff;font-weight:900}
.how-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}
.steps{display:grid;gap:14px}
.steps article{
  display:grid;grid-template-columns:70px 1fr;gap:20px;align-items:start;
  padding:24px;border:1px solid var(--line);border-radius:20px;background:#0c1118
}
.steps article>span{font-size:.75rem;color:#7faaff;font-weight:900;letter-spacing:.14em}
.steps h3{margin:0 0 6px;font-size:1.18rem}
.steps p{margin:0;color:var(--muted)}
.showcase{overflow:hidden}
.showcase-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}
.vault-window{
  border:1px solid var(--line);border-radius:26px;background:#0c1118;box-shadow:var(--shadow);overflow:hidden
}
.window-bar{height:46px;border-bottom:1px solid var(--line);display:flex;gap:8px;align-items:center;padding:0 16px}
.window-bar span{width:9px;height:9px;border-radius:50%;background:#33404f}
.vault-content{display:grid;grid-template-columns:130px 1fr;min-height:360px}
.vault-sidebar{border-right:1px solid var(--line);padding:24px;display:grid;align-content:start;gap:18px}
.vault-logo{width:40px;height:40px;border-radius:14px;background:linear-gradient(145deg,#6595ff,#203f7c);margin-bottom:14px}
.vault-sidebar i{display:block;height:8px;border-radius:99px;background:#202a37}
.vault-main{padding:34px}
.vault-title-line{width:44%;height:16px;border-radius:99px;background:#253246;margin-bottom:28px}
.vault-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.vault-cards div{height:220px;border-radius:18px;background:linear-gradient(150deg,#182130,#0e131a);border:1px solid var(--line);padding:16px}
.vault-cards b{display:block;height:120px;border-radius:12px;background:linear-gradient(145deg,#233a60,#111822);margin-bottom:16px}
.vault-cards span{display:block;height:7px;background:#273343;border-radius:99px;margin-top:9px}
.faq-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:90px}
.faq-list{display:grid;gap:12px}
details{border:1px solid var(--line);border-radius:18px;background:#0d1219;padding:0 22px}
summary{cursor:pointer;list-style:none;padding:21px 30px 21px 0;font-weight:800;position:relative}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";position:absolute;right:0;color:#75a4ff;font-size:1.4rem;top:16px}
details[open] summary:after{content:"−"}
details p{color:var(--muted);margin:0;padding:0 0 22px}
.join-section{padding:90px 0 110px}
.join-card{
  border:1px solid rgba(112,157,245,.28);border-radius:32px;padding:46px;
  background:
    radial-gradient(circle at 15% 15%,rgba(69,121,222,.23),transparent 32%),
    linear-gradient(135deg,#111a29,#0c1016);
  display:flex;justify-content:space-between;gap:40px;align-items:center
}
.join-card h2{max-width:760px;font-size:clamp(2.1rem,4vw,4rem)}
.site-footer{border-top:1px solid var(--line);background:#06080b;padding:48px 0 24px;color:#9da9b8}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1.25fr;align-items:center;gap:30px}
.footer-links{display:flex;gap:18px;justify-content:flex-end;flex-wrap:wrap;font-size:.84rem}
.footer-bottom{border-top:1px solid var(--line);margin-top:30px;padding-top:20px;display:flex;justify-content:space-between;gap:20px;font-size:.75rem}
@media(max-width:980px){
  .site-nav{
    position:absolute;top:78px;left:20px;right:20px;display:none;flex-direction:column;align-items:stretch;
    background:#0c1118;border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--shadow)
  }
  .site-nav.open{display:flex}
  .nav-toggle{display:block}
  .hero-grid,.section-heading,.how-grid,.showcase-grid,.faq-layout{grid-template-columns:1fr}
  .hero{padding-top:130px}
  .hero-art{max-width:640px;margin-inline:auto;width:100%}
  .section-heading{gap:20px}
  .release-grid{grid-template-columns:1fr;grid-template-rows:auto}
  .release-card-large{grid-row:auto}
  .tier-grid{grid-template-columns:1fr;max-width:720px;margin-inline:auto}
  .tier-card.featured{transform:none}
  .showcase-copy{max-width:680px}
  .footer-grid{grid-template-columns:1fr}
  .footer-links{justify-content:flex-start}
}
@media(max-width:640px){
  :root{--container:min(100% - 26px,1180px)}
  .hero{min-height:auto;padding:125px 0 70px}
  .hero h1{font-size:3.1rem}
  .hero-grid{gap:44px}
  .hero-frame{border-radius:26px}
  .trust-grid{grid-template-columns:1fr 1fr;padding:12px 0}
  .trust-grid span{padding:12px}
  .trust-grid span+span{border-left:0}
  .release-card{grid-template-columns:1fr}
  .release-card-large{min-height:auto}
  .section{padding:84px 0}
  .section-heading h2,.section h2,.join-card h2{font-size:2.35rem}
  .hero-metrics{gap:18px}
  .hero-metrics div{width:calc(50% - 9px)}
  .join-card{padding:30px;display:block}
  .join-actions{margin-top:28px}
  .vault-content{grid-template-columns:74px 1fr}
  .vault-sidebar{padding:15px}
  .vault-cards{grid-template-columns:1fr}
  .vault-cards div:nth-child(n+2){display:none}
  .footer-bottom{display:grid}
}


/* =========================================================
   LPS CUSTOM CURSOR — V6
   ========================================================= */
html.has-custom-cursor body,
html.has-custom-cursor a,
html.has-custom-cursor button,
html.has-custom-cursor summary,
html.has-custom-cursor [tabindex] {
  cursor: none !important;
}

.lps-cursor {
  --cursor-x: 50vw;
  display: block;
  opacity: 0;
  --cursor-y: 50vh;
  position: fixed;
  z-index: 2147483647;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  transform: translate3d(var(--cursor-x), var(--cursor-y), 0);
}

html.has-custom-cursor .lps-cursor {
  display: block;
}

.lps-cursor.is-visible {
  opacity: 1;
}

.lps-cursor__ring,
.lps-cursor__star {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: auto;
  max-width: none !important;
  object-fit: contain;
  transform-origin: 50% 50%;
  user-select: none;
  will-change: transform, opacity, filter;
  transition: filter .18s ease, transform .18s ease, opacity .18s ease;
}

.lps-cursor__ring {
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  opacity: 0;
  transform: scale(.12) rotate(-14deg);
  filter:
    drop-shadow(0 0 .6px rgba(0,0,0,.95))
    drop-shadow(1px 0 0 rgba(0,0,0,.88))
    drop-shadow(-1px 0 0 rgba(0,0,0,.88))
    drop-shadow(0 1px 0 rgba(0,0,0,.88))
    drop-shadow(0 -1px 0 rgba(0,0,0,.88));
}

.lps-cursor__star {
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  transform: scale(1);
  filter:
    drop-shadow(0 0 .6px rgba(0,0,0,.95))
    drop-shadow(1px 0 0 rgba(0,0,0,.88))
    drop-shadow(-1px 0 0 rgba(0,0,0,.88))
    drop-shadow(0 1px 0 rgba(0,0,0,.88))
    drop-shadow(0 -1px 0 rgba(0,0,0,.88));
}

.lps-cursor.is-idle .lps-cursor__ring {
  animation: lps-ring-build .62s cubic-bezier(.18,.78,.18,1) forwards;
}

.lps-cursor.is-idle .lps-cursor__star {
  animation: lps-star-settle .48s cubic-bezier(.2,.8,.2,1) forwards;
}

.lps-cursor.is-moving .lps-cursor__ring {
  animation: none;
  opacity: 0;
  transform: scale(.12) rotate(-14deg);
}

.lps-cursor.is-over-action .lps-cursor__star {
  filter:
    brightness(0) saturate(100%)
    invert(88%) sepia(8%) saturate(2852%)
    hue-rotate(184deg) brightness(105%) contrast(102%)
    drop-shadow(0 0 1px rgba(0,0,0,.98))
    drop-shadow(0 0 11px rgba(112,155,255,.5));
}

.lps-cursor.is-clicking:not(.is-arming) .lps-cursor__star {
  transform: scale(.78) !important;
}

.lps-cursor.is-arming .lps-cursor__ring {
  opacity: 1;
  animation: lps-confirm-pulse .72s ease both;
  filter:
    brightness(0) saturate(100%)
    invert(88%) sepia(8%) saturate(2852%)
    hue-rotate(184deg) brightness(105%) contrast(102%)
    drop-shadow(0 0 1px rgba(0,0,0,.98))
    drop-shadow(0 0 16px rgba(112,155,255,.58));
}

.lps-cursor.is-arming .lps-cursor__star {
  transform: scale(1.1) !important;
  filter:
    brightness(0) saturate(100%)
    invert(88%) sepia(8%) saturate(2852%)
    hue-rotate(184deg) brightness(105%) contrast(102%)
    drop-shadow(0 0 1px rgba(0,0,0,.98))
    drop-shadow(0 0 13px rgba(112,155,255,.58));
}

@keyframes lps-ring-build {
  0%   { opacity:0; transform:scale(.10) rotate(-22deg); }
  58%  { opacity:1; transform:scale(1.13) rotate(5deg); }
  78%  { opacity:1; transform:scale(.94) rotate(-2deg); }
  100% { opacity:1; transform:scale(1) rotate(0deg); }
}

@keyframes lps-star-settle {
  0%   { transform:scale(var(--moving-star-scale,1)) rotate(var(--moving-star-rotation,0deg)); }
  70%  { transform:scale(.92) rotate(0deg); }
  100% { transform:scale(1) rotate(0deg); }
}

@keyframes lps-confirm-pulse {
  0%   { opacity:.3; transform:scale(.55) rotate(-10deg); }
  45%  { opacity:1; transform:scale(1.08) rotate(-4deg); }
  100% { opacity:1; transform:scale(1) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .lps-cursor__ring,
  .lps-cursor__star {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}


/* Cursor V8 diagnostic panel: visible only with ?cursor-debug=1 */
#lps-cursor-debug {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 2147483647;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  background: rgba(4,7,13,.92);
  color: #ffcf77;
  font: 700 11px/1.2 system-ui,sans-serif;
  letter-spacing: .08em;
  pointer-events: none;
}
#lps-cursor-debug.active {
  color: #9dffb0;
  border-color: rgba(157,255,176,.35);
}


/* =========================================================
   IMMERSIVE SCROLL EXPERIENCE — V10
   ========================================================= */

.experience-intro {
  min-height: 72vh;
  position: relative;
  display: flex;
  align-items: center;
  padding: 150px 0 120px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 28%, rgba(52, 93, 177, .18), transparent 30%),
    linear-gradient(180deg, #070a0f 0%, #0a1019 100%);
  border-top: 1px solid rgba(255,255,255,.06);
}

.experience-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
}

.experience-intro-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 80px;
  align-items: end;
}

.experience-intro h2 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(3.2rem, 7vw, 7.6rem);
  line-height: .91;
  letter-spacing: -.055em;
}

.experience-intro-grid > p {
  color: #a8b4c4;
  line-height: 1.8;
  font-size: 1.03rem;
}

.experience-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 9px;
  color: #728198;
  font-size: .61rem;
  letter-spacing: .2em;
}

.experience-scroll-cue span {
  width: 1px;
  height: 42px;
  background: linear-gradient(#9ab8ff, transparent);
}

.scroll-story {
  position: relative;
  background: #05070b;
}

.story-rail {
  position: fixed;
  z-index: 70;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

.scroll-story.story-visible .story-rail {
  opacity: 1;
  visibility: visible;
}

.story-rail-item {
  width: 44px;
  min-height: 48px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(6,9,14,.62);
  color: #75849a;
  backdrop-filter: blur(12px);
  display: grid;
  place-items: center;
  position: relative;
  transition: width .26s ease, color .26s ease, border-color .26s ease, background .26s ease;
  overflow: hidden;
}

.story-rail-item b {
  font-size: .68rem;
  letter-spacing: .08em;
}

.story-rail-item span {
  position: absolute;
  left: 48px;
  white-space: nowrap;
  opacity: 0;
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: opacity .2s ease;
}

.story-rail-item:hover,
.story-rail-item.active {
  width: 132px;
  justify-items: start;
  padding-left: 15px;
  color: #fff;
  border-color: rgba(112,155,255,.48);
  background: rgba(18,31,55,.8);
}

.story-rail-item:hover span,
.story-rail-item.active span {
  opacity: 1;
}

.story-scene {
  min-height: 155vh;
  position: relative;
}

.story-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  align-items: center;
}

.story-scene-blue .story-sticky {
  background:
    radial-gradient(circle at 74% 45%, rgba(59,99,184,.34), transparent 31%),
    linear-gradient(135deg, #070b13 0%, #0b1423 52%, #05070b 100%);
}

.story-scene-warm .story-sticky {
  background:
    radial-gradient(circle at 26% 45%, rgba(196,93,47,.24), transparent 32%),
    linear-gradient(135deg, #120b09 0%, #16100d 48%, #060708 100%);
}

.story-scene-violet .story-sticky {
  background:
    radial-gradient(circle at 72% 45%, rgba(117,62,171,.27), transparent 32%),
    linear-gradient(135deg, #090712 0%, #130d1f 50%, #06070a 100%);
}

.story-grid-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .35;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at center, black 5%, transparent 72%);
}

.story-ghost-word {
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: clamp(8rem, 22vw, 24rem);
  line-height: .8;
  font-weight: 950;
  letter-spacing: -.07em;
  color: rgba(255,255,255,.035);
  user-select: none;
  pointer-events: none;
}

.story-copy {
  position: absolute;
  z-index: 12;
  width: min(520px, 39vw);
  opacity: var(--copy-opacity, 0);
  filter: blur(var(--copy-blur, 18px));
  transform: translate3d(var(--copy-x, 0), 0, 0);
  will-change: transform, opacity, filter;
}

.story-copy-left {
  left: max(8vw, 100px);
}

.story-copy-right {
  right: max(8vw, 100px);
}

.story-copy h2 {
  margin: 0 0 22px;
  font-size: clamp(3rem, 5.7vw, 6.5rem);
  line-height: .9;
  letter-spacing: -.055em;
}

.story-copy > p:not(.eyebrow):not(.story-index) {
  color: #aeb9c8;
  max-width: 480px;
  line-height: 1.75;
}

.story-index {
  margin: 0 0 16px;
  color: rgba(255,255,255,.38);
  font-size: .66rem;
  letter-spacing: .22em;
}

.story-link {
  margin-top: 23px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(255,255,255,.25);
  font-weight: 800;
}

.story-link span {
  color: #84aaff;
}

.story-media {
  position: absolute;
  z-index: 8;
  opacity: var(--media-opacity, 0);
  filter: blur(var(--media-blur, 28px));
  transform: translate3d(var(--media-x, 0), 0, 0) scale(var(--media-scale, .92));
  will-change: transform, opacity, filter;
}

.story-media-right {
  right: 4vw;
}

.story-media-left {
  left: 5vw;
}

.story-media-framed {
  width: min(58vw, 900px);
  height: min(74vh, 770px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 32px;
  overflow: hidden;
  background: rgba(255,255,255,.035);
  box-shadow: 0 40px 110px rgba(0,0,0,.45);
}

.story-media-framed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-media-glow {
  position: absolute;
  inset: 20% 16%;
  background: #5b86db;
  filter: blur(100px);
  opacity: .25;
}

.story-media-video {
  width: min(56vw, 900px);
  height: min(72vh, 730px);
  overflow: hidden;
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,.12);
  background: #0d0e11;
  box-shadow: 0 40px 110px rgba(0,0,0,.48);
}

.story-media-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-media-scanline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 3px,
    rgba(255,255,255,.04) 4px
  );
}

.story-media-label {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(4,7,12,.58);
  backdrop-filter: blur(12px);
  font-size: .62rem;
  letter-spacing: .16em;
}

.story-media-label b {
  color: #8cb1ff;
}

.story-media-stack {
  width: min(55vw, 850px);
  height: min(72vh, 730px);
}

.stack-card {
  position: absolute;
  width: 68%;
  height: 78%;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 28px;
  background: #10141b;
  box-shadow: 0 38px 90px rgba(0,0,0,.42);
}

.stack-card-one {
  left: 0;
  top: 11%;
  transform: rotate(-8deg) translateX(-5%);
  opacity: .42;
}

.stack-card-two {
  right: 0;
  top: 5%;
  transform: rotate(8deg) translateX(5%);
  opacity: .6;
}

.stack-card-three {
  left: 16%;
  top: 0;
  z-index: 3;
}

.stack-reticle {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  width: 112px;
  height: 112px;
  border: 1px solid rgba(140,177,255,.55);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 40px rgba(80,124,213,.2);
}

.stack-reticle span {
  position: absolute;
  background: rgba(140,177,255,.7);
}

.stack-reticle span:first-child {
  left: 50%;
  top: -18px;
  bottom: -18px;
  width: 1px;
}

.stack-reticle span:last-child {
  top: 50%;
  left: -18px;
  right: -18px;
  height: 1px;
}

.story-corner {
  position: absolute;
  z-index: 20;
  font-size: .61rem;
  letter-spacing: .2em;
  color: rgba(255,255,255,.4);
}

.story-corner-top {
  top: 106px;
  right: 34px;
}

.story-corner-bottom {
  bottom: 28px;
  right: 34px;
}

/* Full viewport carousel adapted from the supplied interaction reference */
.figure-carousel {
  --carousel-bg: #19243b;
  position: relative;
  height: 100vh;
  min-height: 690px;
  overflow: hidden;
  background: var(--carousel-bg);
  transition: background-color 650ms cubic-bezier(.4,0,.2,1);
  isolation: isolate;
}

.carousel-grain {
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .34;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

.carousel-ghost {
  position: absolute;
  z-index: 2;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: clamp(7rem, 20vw, 22rem);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.055em;
  color: rgba(255,255,255,.92);
  user-select: none;
}

.carousel-brand {
  position: absolute;
  z-index: 60;
  top: 28px;
  left: 32px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .18em;
  color: rgba(255,255,255,.9);
}

.carousel-stage {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.carousel-figure {
  position: absolute;
  left: 50%;
  bottom: 0;
  margin: 0;
  aspect-ratio: .6 / 1;
  transform-origin: bottom center;
  transition:
    transform 650ms cubic-bezier(.4,0,.2,1),
    filter 650ms cubic-bezier(.4,0,.2,1),
    opacity 650ms cubic-bezier(.4,0,.2,1),
    left 650ms cubic-bezier(.4,0,.2,1),
    height 650ms cubic-bezier(.4,0,.2,1),
    bottom 650ms cubic-bezier(.4,0,.2,1);
  will-change: transform, filter, opacity, left;
}

.carousel-figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  max-width: none;
  user-select: none;
  pointer-events: none;
}

.carousel-figure.role-center {
  left: 50%;
  height: 92%;
  bottom: 0;
  z-index: 20;
  opacity: 1;
  filter: blur(0);
  transform: translateX(-50%) scale(1.68);
}

.carousel-figure.role-left {
  left: 30%;
  height: 28%;
  bottom: 12%;
  z-index: 10;
  opacity: .82;
  filter: blur(2px);
  transform: translateX(-50%) scale(1);
}

.carousel-figure.role-right {
  left: 70%;
  height: 28%;
  bottom: 12%;
  z-index: 10;
  opacity: .82;
  filter: blur(2px);
  transform: translateX(-50%) scale(1);
}

.carousel-figure.role-back {
  left: 50%;
  height: 22%;
  bottom: 12%;
  z-index: 5;
  opacity: .7;
  filter: blur(5px);
  transform: translateX(-50%) scale(1);
}

.carousel-controls {
  position: absolute;
  z-index: 60;
  left: clamp(24px, 7vw, 110px);
  bottom: clamp(28px, 8vh, 90px);
  width: min(340px, 42vw);
}

.carousel-kicker {
  margin: 0 0 12px;
  color: white;
  font-size: clamp(1rem, 1.7vw, 1.45rem);
  font-weight: 850;
  letter-spacing: .02em;
}

.carousel-copy {
  margin: 0 0 20px;
  color: rgba(255,255,255,.78);
  font-size: .88rem;
  line-height: 1.65;
}

.carousel-buttons {
  display: flex;
  gap: 12px;
}

.carousel-button {
  width: 64px;
  height: 64px;
  border: 2px solid white;
  border-radius: 50%;
  background: transparent;
  color: white;
  font-size: 1.6rem;
  transition: transform .15s ease, background-color .15s ease;
}

.carousel-button:hover {
  transform: scale(1.08);
  background: rgba(255,255,255,.12);
}

.carousel-discover {
  position: absolute;
  z-index: 60;
  right: clamp(24px, 4vw, 65px);
  bottom: clamp(32px, 8vh, 90px);
  display: flex;
  gap: 14px;
  align-items: center;
  color: white;
  font-size: clamp(1.5rem, 4vw, 4rem);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.04em;
}

.carousel-counter {
  position: absolute;
  z-index: 60;
  top: 28px;
  right: 32px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255,255,255,.82);
  font-size: .7rem;
  letter-spacing: .12em;
}

.carousel-counter i {
  width: 44px;
  height: 1px;
  background: rgba(255,255,255,.45);
}

@media (max-width: 980px) {
  .experience-intro-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .story-rail {
    left: 12px;
  }

  .story-copy,
  .story-copy-left,
  .story-copy-right {
    width: min(82vw, 560px);
    left: 9vw;
    right: auto;
    top: 16%;
  }

  .story-copy h2 {
    font-size: clamp(2.8rem, 8vw, 5rem);
  }

  .story-media,
  .story-media-left,
  .story-media-right {
    left: 16vw;
    right: auto;
    bottom: 4vh;
    width: 78vw;
    height: 47vh;
  }

  .story-media-stack {
    height: 46vh;
  }

  .story-corner-top {
    top: 94px;
  }

  .carousel-figure.role-center {
    height: 68%;
    bottom: 17%;
    transform: translateX(-50%) scale(1.3);
  }

  .carousel-figure.role-left {
    left: 21%;
    height: 18%;
    bottom: 27%;
  }

  .carousel-figure.role-right {
    left: 79%;
    height: 18%;
    bottom: 27%;
  }

  .carousel-figure.role-back {
    height: 14%;
    bottom: 27%;
  }
}

@media (max-width: 640px) {
  .experience-intro {
    min-height: 86vh;
    padding: 120px 0 90px;
  }

  .experience-intro h2 {
    font-size: 3.5rem;
  }

  .story-rail {
    top: auto;
    left: 50%;
    bottom: 15px;
    transform: translateX(-50%);
    display: flex;
  }

  .story-rail-item,
  .story-rail-item:hover,
  .story-rail-item.active {
    width: 42px;
    min-height: 42px;
    padding: 0;
    justify-items: center;
  }

  .story-rail-item span {
    display: none;
  }

  .story-sticky {
    min-height: 620px;
  }

  .story-copy,
  .story-copy-left,
  .story-copy-right {
    width: 84vw;
    left: 8vw;
    top: 13%;
  }

  .story-copy h2 {
    font-size: 2.75rem;
  }

  .story-copy > p:not(.eyebrow):not(.story-index) {
    font-size: .88rem;
  }

  .story-media,
  .story-media-left,
  .story-media-right {
    width: 88vw;
    height: 39vh;
    left: 6vw;
    bottom: 8vh;
  }

  .story-corner {
    display: none;
  }

  .carousel-ghost {
    top: 21%;
    font-size: 24vw;
  }

  .carousel-brand {
    top: 18px;
    left: 16px;
    max-width: 60vw;
  }

  .carousel-controls {
    left: 16px;
    bottom: 24px;
    width: 62vw;
  }

  .carousel-copy {
    display: none;
  }

  .carousel-button {
    width: 48px;
    height: 48px;
  }

  .carousel-discover {
    right: 16px;
    bottom: 28px;
    font-size: 1.35rem;
  }

  .carousel-counter {
    top: 18px;
    right: 16px;
  }

  .carousel-figure.role-center {
    height: 60%;
    bottom: 22%;
    transform: translateX(-50%) scale(1.25);
  }

  .carousel-figure.role-left {
    left: 20%;
    height: 16%;
    bottom: 32%;
  }

  .carousel-figure.role-right {
    left: 80%;
    height: 16%;
    bottom: 32%;
  }

  .carousel-figure.role-back {
    height: 13%;
    bottom: 32%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-copy,
  .story-media {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  .carousel-figure {
    transition-duration: .01ms !important;
  }
}


/* =========================================================
   PUBLIC PATREON RENDERS — V11
   ========================================================= */

.patreon-live-image {
  opacity: .72;
  filter: saturate(.55) blur(4px);
  transition: opacity .7s ease, filter .7s ease, transform .7s ease;
}

.patreon-live-image.is-patreon-loaded {
  opacity: 1;
  filter: saturate(1) blur(0);
}

.story-media-framed .patreon-live-image {
  object-fit: contain;
  background:
    radial-gradient(circle at center, rgba(72,112,198,.18), transparent 52%),
    #080d16;
}

.stack-card.patreon-live-image {
  object-fit: contain;
}

.carousel-figure.is-patreon-frame {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--item-accent) 22%, transparent), transparent 55%),
    rgba(6,9,15,.84);
  box-shadow: 0 34px 90px rgba(0,0,0,.42);
}

.carousel-figure.is-patreon-frame img {
  object-fit: contain;
  object-position: center;
  padding: 14px;
}

.carousel-figure.is-patreon-frame figcaption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(5,8,13,.7);
  backdrop-filter: blur(14px);
  color: #fff;
  font-size: .67rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.carousel-figure.is-patreon-frame figcaption span {
  color: rgba(255,255,255,.66);
  white-space: nowrap;
}

.carousel-figure.is-patreon-frame.role-center {
  width: min(68vw, 1080px);
  height: min(72vh, 700px);
  bottom: 11%;
  transform: translateX(-50%) scale(1);
}

.carousel-figure.is-patreon-frame.role-left,
.carousel-figure.is-patreon-frame.role-right {
  width: min(27vw, 430px);
  height: min(29vh, 280px);
  bottom: 18%;
}

.carousel-figure.is-patreon-frame.role-back {
  width: min(22vw, 350px);
  height: min(24vh, 230px);
  bottom: 20%;
}

.patreon-favorites {
  position: relative;
  padding: 150px 0 140px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 18%, rgba(54,91,177,.18), transparent 30%),
    linear-gradient(180deg, #06080c 0%, #0a101a 100%);
  border-top: 1px solid rgba(255,255,255,.07);
}

.patreon-favorites::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .3;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 72px 72px;
}

.patreon-favorites .container {
  position: relative;
  z-index: 2;
}

.patreon-favorites-head {
  display: grid;
  grid-template-columns: 1.15fr .65fr;
  gap: 70px;
  align-items: end;
  margin-bottom: 54px;
}

.patreon-favorites-head h2 {
  margin: 0;
  max-width: 920px;
  font-size: clamp(3rem, 6.2vw, 7rem);
  line-height: .92;
  letter-spacing: -.055em;
}

.patreon-favorites-head > p {
  color: #9eabba;
  line-height: 1.75;
}

.patreon-render-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}

.patreon-render-card {
  grid-column: span 4;
  min-width: 0;
}

.patreon-render-card:nth-child(1),
.patreon-render-card:nth-child(2) {
  grid-column: span 6;
}

.patreon-render-card > a {
  display: block;
  height: 100%;
  color: inherit;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 28px;
  overflow: hidden;
  background: rgba(10,14,22,.72);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease, background .35s ease;
}

.patreon-render-card > a:hover {
  transform: translateY(-7px);
  border-color: color-mix(in srgb, var(--card-accent) 64%, white 10%);
  background: rgba(15,21,33,.9);
}

.patreon-render-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--card-accent) 22%, transparent), transparent 55%),
    #090d15;
}

.patreon-render-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(transparent, rgba(5,8,13,.72));
  pointer-events: none;
}

.patreon-render-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  transform: scale(1.01);
}

.patreon-render-card > a:hover .patreon-render-media img {
  transform: scale(1.035);
}

.patreon-rank {
  position: absolute;
  z-index: 3;
  top: 15px;
  left: 15px;
  min-width: 45px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(3,6,11,.72);
  backdrop-filter: blur(12px);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.patreon-source-status {
  position: absolute;
  z-index: 3;
  right: 15px;
  bottom: 14px;
  max-width: 62%;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(4,7,12,.72);
  color: rgba(255,255,255,.62);
  font-size: .59rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

.patreon-source-status.is-ready {
  color: #b9d0ff;
}

.patreon-render-info {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 21px 22px 23px;
}

.patreon-render-info p {
  margin: 0 0 7px;
  color: #77869a;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .14em;
}

.patreon-render-info h3 {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 2rem);
}

.patreon-metrics {
  flex: 0 0 auto;
  display: grid;
  align-content: end;
  justify-items: end;
  gap: 4px;
  color: #8492a5;
  font-size: .66rem;
}

.patreon-metrics b {
  color: #fff;
}

.patreon-remote-note {
  margin: 24px 0 0;
  color: #657389;
  font-size: .73rem;
  line-height: 1.6;
}

@media (max-width: 980px) {
  .patreon-favorites-head {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .patreon-render-card,
  .patreon-render-card:nth-child(1),
  .patreon-render-card:nth-child(2) {
    grid-column: span 6;
  }

  .carousel-figure.is-patreon-frame.role-center {
    width: 84vw;
    height: 56vh;
    bottom: 22%;
    transform: translateX(-50%) scale(1);
  }

  .carousel-figure.is-patreon-frame.role-left,
  .carousel-figure.is-patreon-frame.role-right {
    width: 28vw;
    height: 19vh;
    bottom: 29%;
  }

  .carousel-figure.is-patreon-frame.role-back {
    width: 22vw;
    height: 16vh;
    bottom: 30%;
  }
}

@media (max-width: 640px) {
  .patreon-favorites {
    padding: 100px 0 90px;
  }

  .patreon-favorites-head h2 {
    font-size: 3rem;
  }

  .patreon-render-card,
  .patreon-render-card:nth-child(1),
  .patreon-render-card:nth-child(2) {
    grid-column: span 12;
  }

  .patreon-render-info {
    padding: 17px;
  }

  .patreon-metrics {
    font-size: .61rem;
  }

  .carousel-figure.is-patreon-frame.role-center {
    width: 92vw;
    height: 48vh;
    bottom: 27%;
  }

  .carousel-figure.is-patreon-frame.role-left,
  .carousel-figure.is-patreon-frame.role-right {
    width: 34vw;
    height: 14vh;
    bottom: 36%;
  }

  .carousel-figure.is-patreon-frame.role-back {
    width: 26vw;
    height: 12vh;
    bottom: 37%;
  }

  .carousel-figure.is-patreon-frame figcaption {
    left: 9px;
    right: 9px;
    bottom: 9px;
    padding: 8px 10px;
    font-size: .55rem;
  }
}


/* =========================================================
   LOCAL REAL RENDERS — V12
   ========================================================= */
.local-featured-image {
  opacity: 1 !important;
  filter: none !important;
}

.patreon-render-media .local-featured-image {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.story-media-framed .local-featured-image {
  object-fit: contain;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at center, rgba(72,112,198,.18), transparent 54%),
    #080d16;
}

.carousel-figure .local-featured-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* =========================================================
   SIGNATURE VERTICAL PAN — V13
   ========================================================= */
.signature-scroll{position:relative;height:460vh;background:#020307;isolation:isolate}
.signature-sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:#020307}
.signature-backdrop{position:absolute;inset:0;overflow:hidden;background:radial-gradient(circle at 65% 35%,#102535 0,#03060b 48%,#000 78%)}
.signature-backdrop img{position:absolute;left:50%;top:0;width:min(62vw,940px);height:auto;transform:translate3d(-45%,-2%,0) scale(1.58);transform-origin:50% 0%;filter:saturate(1.08) contrast(1.05);will-change:transform}
.signature-vignette{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.38) 42%,rgba(0,0,0,.05) 67%,rgba(0,0,0,.52) 100%),linear-gradient(180deg,rgba(0,0,0,.18),transparent 45%,rgba(0,0,0,.55))}
.signature-grid{position:absolute;inset:0;opacity:.13;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:90px 90px;mask-image:linear-gradient(90deg,#000,transparent 78%)}
.signature-chapter{position:absolute;z-index:3;left:max(6vw,44px);top:50%;max-width:590px;opacity:0;transform:translateY(28px);transition:opacity .2s linear,transform .2s linear;text-shadow:0 3px 28px #000}
.signature-chapter.is-active{opacity:1;transform:translateY(-50%)}
.signature-chapter h2{font-size:clamp(2.6rem,5.8vw,6.8rem);line-height:.87;letter-spacing:-.055em;margin:.3em 0 .28em;color:#f3f6fb}
.signature-chapter h2 span{color:#54d8ed}
.signature-chapter p:not(.eyebrow){max-width:520px;color:#c6d0dc;font-size:clamp(1rem,1.25vw,1.25rem);line-height:1.65}
.signature-progress{position:absolute;z-index:4;right:34px;top:12vh;bottom:12vh;width:2px;background:rgba(255,255,255,.16)}
.signature-progress span{display:block;width:100%;height:0;background:linear-gradient(#55def0,#aa56e8);box-shadow:0 0 16px #55def0}
.signature-caption{position:absolute;z-index:4;right:58px;bottom:31px;color:#aeb9c6;font-size:.68rem;letter-spacing:.2em;writing-mode:vertical-rl}

/* =========================================================
   FIVE-ARTIST TEAM — V13
   ========================================================= */
.team-section{background:#090b0f;padding-top:clamp(90px,10vw,170px)}
.team-heading{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.65fr);gap:5vw;align-items:end;margin-bottom:52px}
.team-heading h2{font-size:clamp(2.5rem,5vw,5.2rem);line-height:.94;margin:.18em 0 0;letter-spacing:-.045em}
.team-heading>p{color:#9da7b4;line-height:1.75;font-size:1.05rem}
.team-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.artist-card{position:relative;overflow:hidden;border-radius:24px;background:#141820;border:1px solid rgba(255,255,255,.08);min-height:430px;box-shadow:0 24px 60px rgba(0,0,0,.28);transition:transform .35s ease,border-color .35s ease}
.artist-card:hover{transform:translateY(-9px);border-color:rgba(83,220,237,.55)}
.artist-portrait{position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(82,220,238,.24),transparent 31%),linear-gradient(145deg,#172837,#0b0e14 55%,#21132c);display:grid;place-items:center}
.artist-portrait::before{content:"";width:58%;aspect-ratio:1;border-radius:50%;background:linear-gradient(145deg,#2a3f50,#111820);box-shadow:0 0 0 18px rgba(255,255,255,.025),0 40px 90px rgba(0,0,0,.5)}
.artist-portrait span{position:absolute;font-size:clamp(2.6rem,4vw,5rem);font-weight:900;letter-spacing:-.08em;color:rgba(255,255,255,.82)}
.artist-portrait-lp{background:radial-gradient(circle at 48% 28%,rgba(81,220,238,.32),transparent 30%),linear-gradient(145deg,#173545,#090d13 54%,#38194a)}
.artist-info{position:absolute;left:0;right:0;bottom:0;padding:62px 22px 23px;background:linear-gradient(transparent,rgba(3,5,8,.98) 55%)}
.artist-info strong{display:block;color:#fff;font-size:1.08rem;letter-spacing:.035em}
.artist-info span{display:block;color:#9da7b4;font-size:.69rem;font-weight:700;letter-spacing:.08em;margin-top:6px;line-height:1.4}
.team-note{margin:24px 0 0;color:#7d8794;font-size:.82rem}
@media (max-width:1200px){.team-grid{grid-template-columns:repeat(3,1fr)}.signature-backdrop img{width:min(76vw,900px)}}
@media (max-width:780px){.signature-scroll{height:380vh}.signature-backdrop img{width:132vw;left:52%;transform:translate3d(-50%,-1%,0) scale(1.38)}.signature-chapter{left:24px;right:40px;top:auto;bottom:12vh}.signature-chapter.is-active{transform:none}.signature-chapter h2{font-size:clamp(2.5rem,13vw,4.6rem)}.signature-progress{right:17px}.signature-caption{display:none}.team-heading{grid-template-columns:1fr}.team-grid{grid-template-columns:1fr 1fr}.artist-card{min-height:360px}}
@media (max-width:520px){.team-grid{grid-template-columns:1fr}.artist-card{min-height:420px}}


/* =========================================================
   GLOBAL PARALLAX BACKGROUND — V14
   ========================================================= */
body {
  background: #04060a;
}

.site-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(circle at 50% 15%, rgba(34,72,122,.18), transparent 26%), #03050a;
}

.site-background-image-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.site-background-image {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(92vw, 980px);
  max-width: none;
  transform: translate3d(-50%, 0, 0) scale(1.33);
  transform-origin: top center;
  opacity: .34;
  filter: saturate(1.05) contrast(1.05) drop-shadow(0 35px 140px rgba(71,120,214,.18));
  will-change: transform;
}

.site-background-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3,5,10,.16) 0%, rgba(3,5,10,.38) 18%, rgba(3,5,10,.22) 40%, rgba(3,5,10,.42) 100%),
    radial-gradient(circle at center, transparent 42%, rgba(3,5,10,.48) 100%);
}

.site-background-noise {
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

.site-header,
main,
.site-footer {
  position: relative;
  z-index: 2;
}

.site-header {
  background: linear-gradient(180deg, rgba(4,7,12,.92), rgba(4,7,12,.68));
  backdrop-filter: blur(18px);
}

.hero,
.experience-intro,
.scroll-story,
.figure-carousel,
.patreon-favorites,
.section,
.section-dark,
.join-section,
.site-footer {
  background: transparent !important;
}

.hero::after,
.experience-intro::after,
.patreon-favorites::after,
.section::after,
.join-section::after,
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4,7,12,.08), rgba(4,7,12,.18));
}

.hero-grid,
.experience-intro-grid,
.patreon-favorites .container,
.section .container,
.join-card,
.footer-grid,
.footer-bottom {
  position: relative;
  z-index: 2;
}

.hero-copy,
.experience-intro-grid > div,
.experience-intro-grid > p,
.section-heading,
.showcase-grid,
.faq-layout,
.join-card,
.patreon-favorites-head {
  position: relative;
}

.hero-copy::before,
.experience-intro-grid > div::before,
.experience-intro-grid > p::before,
.section-heading::before,
.showcase-copy::before,
.faq-layout > div:first-child::before,
.join-card::before,
.patreon-favorites-head::before {
  content: "";
  position: absolute;
  inset: -22px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(8,12,18,.52), rgba(8,12,18,.26));
  box-shadow: 0 30px 80px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  z-index: -1;
}

.hero-copy::before { inset: -24px -28px; }
.experience-intro-grid > div::before,
.experience-intro-grid > p::before { inset: -18px -20px; }
.section-heading::before { inset: -20px -24px; }
.showcase-copy::before { inset: -22px; }
.faq-layout > div:first-child::before { inset: -22px; }
.patreon-favorites-head::before { inset: -20px -24px; }

.story-sticky {
  background: rgba(7,10,16,.14) !important;
}

.story-scene-blue .story-sticky,
.story-scene-warm .story-sticky,
.story-scene-violet .story-sticky {
  background:
    linear-gradient(180deg, rgba(5,8,13,.36), rgba(5,8,13,.18)),
    radial-gradient(circle at 50% 50%, rgba(67,104,178,.10), transparent 35%) !important;
  backdrop-filter: blur(2px);
}

.story-grid-overlay {
  opacity: .16;
}

.story-copy::before,
.story-media::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(7,11,17,.52), rgba(7,11,17,.16));
  border: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  z-index: -1;
}

.story-media::before {
  inset: -14px;
}

.figure-carousel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,7,12,.18), rgba(4,7,12,.22));
  z-index: 1;
  pointer-events: none;
}

.figure-carousel {
  --carousel-bg: transparent;
}

.carousel-controls,
.carousel-discover,
.carousel-brand,
.carousel-counter {
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(7,11,17,.58), rgba(7,11,17,.26));
  backdrop-filter: blur(10px);
}

.carousel-controls {
  width: min(360px, 44vw);
}

.carousel-discover {
  padding-inline: 24px;
}

.carousel-brand,
.carousel-counter {
  border-radius: 999px;
}

.section-dark {
  border-block: 1px solid rgba(255,255,255,.04);
}

.patreon-favorites::before {
  opacity: .14;
}

.tier-card,
.steps article,
.vault-window,
.details,
details,
.release-card,
.patreon-render-card > a,
.join-card {
  background: linear-gradient(160deg, rgba(13,18,26,.82), rgba(9,13,19,.62));
  backdrop-filter: blur(12px);
}

@media (max-width: 980px) {
  .site-background-image {
    width: min(108vw, 860px);
    opacity: .3;
  }

  .hero-copy::before,
  .experience-intro-grid > div::before,
  .experience-intro-grid > p::before,
  .section-heading::before,
  .showcase-copy::before,
  .faq-layout > div:first-child::before,
  .join-card::before,
  .patreon-favorites-head::before {
    inset: -14px;
  }
}

@media (max-width: 640px) {
  .site-background-image {
    width: 132vw;
    opacity: .28;
  }

  .carousel-controls,
  .carousel-discover,
  .carousel-brand,
  .carousel-counter {
    padding: 12px 14px;
  }
}


/* =========================================================
   HERO / BACKGROUND REFINEMENT — V15
   ========================================================= */
.hero{
  min-height:100svh;
  padding:140px 0 110px;
  background:transparent !important;
}
.hero-grid{
  grid-template-columns:minmax(0,1fr) minmax(420px,560px);
  gap:min(11vw,128px);
  align-items:start;
}
.hero-copy{
  grid-column:2;
  margin-left:auto;
  max-width:560px;
  padding-top:clamp(72px,10vh,160px);
}
.hero-lead{max-width:34rem}
.hero-art{display:none}

.site-background-image{
  top:clamp(78px,10vh,126px);
  left:50%;
  width:calc(100vw + 2px);
  min-width:100vw;
  max-width:none;
  opacity:.43;
  filter:saturate(1.05) contrast(1.04) drop-shadow(0 32px 130px rgba(71,120,214,.16));
}
.site-background-vignette{
  background:
    linear-gradient(90deg, rgba(3,5,10,.82) 0%, rgba(3,5,10,.58) 16%, rgba(3,5,10,.18) 42%, rgba(3,5,10,.20) 60%, rgba(3,5,10,.54) 84%, rgba(3,5,10,.82) 100%),
    linear-gradient(180deg, rgba(3,5,10,.18) 0%, rgba(3,5,10,.32) 20%, rgba(3,5,10,.22) 48%, rgba(3,5,10,.46) 100%);
}
.site-background-noise{opacity:.18}

.team-section{
  position:relative;
  background:transparent !important;
}
.team-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(5,8,13,.10), rgba(5,8,13,.22));
  pointer-events:none;
}
.team-section .container{position:relative;z-index:2}
.team-heading,
.team-grid,
.team-note{position:relative;z-index:2}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .hero-copy{grid-column:auto;max-width:640px;padding-top:220px}
  .site-background-image{
    width:120vw;
    min-width:120vw;
    top:92px;
    opacity:.36;
  }
}

@media (max-width: 640px){
  .hero{padding-top:118px;padding-bottom:86px;min-height:90svh}
  .hero-copy{padding-top:180px}
  .hero h1{font-size:clamp(2.5rem,13vw,4.2rem)}
  .site-background-image{
    width:138vw;
    min-width:138vw;
    top:86px;
    opacity:.32;
  }
}


/* =========================================================
   FRAMING + PACE CORRECTIONS — V16
   ========================================================= */
.hero{
  min-height:100svh;
  padding:118px 0 92px;
}
.hero-grid{
  grid-template-columns:minmax(0,1fr) minmax(560px,650px);
  gap:clamp(40px,7vw,110px);
  align-items:center;
}
.hero-copy{
  grid-column:2;
  width:100%;
  max-width:650px;
  padding-top:0;
  margin-left:auto;
}
.hero-copy::before{
  inset:-28px -30px;
  background:linear-gradient(155deg,rgba(7,12,20,.78),rgba(7,12,20,.42));
}
.hero h1{
  max-width:100%;
  font-size:clamp(3.1rem,5vw,6rem);
  line-height:.98;
  overflow-wrap:normal;
  word-break:normal;
}
.hero h1 span{
  white-space:normal;
}
.hero-lead{margin:22px 0 0}
.hero-actions{margin-top:26px}
.hero-metrics{margin-top:34px}

.site-background-image{
  left:37%;
  top:-210px;
  width:126vw;
  min-width:126vw;
  opacity:.50;
  transform-origin:top center;
  filter:saturate(1.07) contrast(1.08) brightness(1.04) drop-shadow(0 34px 140px rgba(71,120,214,.18));
}
.site-background-vignette{
  background:
    radial-gradient(circle at 36% 30%, rgba(44,102,150,.12), transparent 25%),
    linear-gradient(90deg, rgba(3,5,10,.30) 0%, rgba(3,5,10,.12) 23%, rgba(3,5,10,.10) 48%, rgba(3,5,10,.36) 72%, rgba(3,5,10,.64) 100%),
    linear-gradient(180deg, rgba(3,5,10,.08) 0%, rgba(3,5,10,.20) 22%, rgba(3,5,10,.18) 52%, rgba(3,5,10,.44) 100%);
}

/* Keep the global character visible through the full document. */
.hero::after,
.experience-intro::after,
.patreon-favorites::after,
.section::after,
.join-section::after,
.site-footer::after{
  background:linear-gradient(180deg,rgba(4,7,12,.03),rgba(4,7,12,.10));
}

/* Public-facing gallery labels. */
.patreon-source-status{
  color:#b9d0ff;
}
.patreon-remote-note{
  color:#93a0b1;
  font-size:.86rem;
}

@media(max-width:1180px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(490px,580px)}
  .hero h1{font-size:clamp(3rem,5.2vw,5.3rem)}
  .site-background-image{left:34%;width:138vw;min-width:138vw;top:-150px}
}

@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .hero-copy{grid-column:auto;max-width:650px;margin:0 20px 0 auto;padding-top:46vh}
  .site-background-image{left:50%;width:154vw;min-width:154vw;top:-105px;opacity:.43}
}

@media(max-width:640px){
  .hero{padding-top:104px;min-height:96svh}
  .hero-copy{margin:0 auto;padding-top:43vh}
  .hero-copy::before{inset:-18px}
  .hero h1{font-size:clamp(2.5rem,12.4vw,4rem)}
  .site-background-image{left:50%;width:178vw;min-width:178vw;top:-58px;opacity:.38}
}


/* =========================================================
   SCROLL-DRIVEN LPS MARQUEE — V17
   Replaces the unrelated external video used in chapter 02.
   ========================================================= */
.motion-marquee-card {
  width: min(60vw, 980px);
  height: min(74vh, 760px);
  padding: 18px;
  overflow: hidden;
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(8,12,18,.84), rgba(5,8,13,.62)),
    radial-gradient(circle at 30% 10%, rgba(80,132,231,.18), transparent 38%);
  box-shadow: 0 40px 110px rgba(0,0,0,.48);
  backdrop-filter: blur(12px);
}

.motion-marquee-card::before {
  display: none;
}

.motion-marquee-head,
.motion-marquee-footer {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 42px;
  padding: 0 8px;
  color: rgba(255,255,255,.68);
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .17em;
}

.motion-marquee-head b {
  color: #8cb1ff;
}

.motion-marquee-footer {
  min-height: 34px;
  color: rgba(255,255,255,.42);
  font-size: .55rem;
}

.motion-row-window {
  position: relative;
  overflow: hidden;
  margin: 9px 0;
  border-radius: 22px;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.motion-row {
  display: flex;
  gap: 12px;
  width: max-content;
  will-change: transform;
  transform: translate3d(0,0,0);
}

.motion-tile {
  position: relative;
  flex: 0 0 clamp(250px, 23vw, 420px);
  width: clamp(250px, 23vw, 420px);
  height: clamp(160px, 14.8vw, 270px);
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 20px;
  background: #090d15;
}

.motion-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease, filter .45s ease;
  filter: saturate(.86) contrast(1.03);
}

.motion-tile::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent, rgba(3,6,10,.88));
  pointer-events: none;
}

.motion-tile figcaption {
  position: absolute;
  z-index: 2;
  left: 15px;
  right: 15px;
  bottom: 12px;
  overflow: hidden;
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.motion-tile:hover img {
  transform: scale(1.04);
  filter: saturate(1) contrast(1.05);
}

@media (max-width: 980px) {
  .motion-marquee-card {
    width: 78vw;
    height: 48vh;
    padding: 12px;
  }
  .motion-tile {
    flex-basis: 280px;
    width: 280px;
    height: 174px;
  }
  .motion-marquee-head { min-height: 32px; }
  .motion-marquee-footer { display: none; }
}

@media (max-width: 640px) {
  .motion-marquee-card {
    width: 88vw;
    height: 40vh;
    left: 6vw;
    padding: 10px;
  }
  .motion-row-window { margin: 6px 0; border-radius: 16px; }
  .motion-row { gap: 8px; }
  .motion-tile {
    flex-basis: 210px;
    width: 210px;
    height: 128px;
    border-radius: 14px;
  }
  .motion-tile figcaption { font-size: .56rem; left: 10px; bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-row { transform: none !important; }
}


/* =========================================================
   OPEN CANVAS / MINIMAL OVERLAYS — V18
   The signature sculpture remains visible throughout the site.
   Only functional cards keep a contained surface.
   ========================================================= */

/* Remove broad section veils and grid decorations. */
.hero::after,
.experience-intro::after,
.patreon-favorites::after,
.section::after,
.join-section::after,
.site-footer::after,
.team-section::before,
.figure-carousel::before {
  content: none !important;
  display: none !important;
}

.experience-intro::before,
.patreon-favorites::before,
.story-grid-overlay,
.story-ghost-word,
.carousel-ghost {
  display: none !important;
}

/* No large frosted rectangles behind headings or copy. */
.hero-copy::before,
.experience-intro-grid > div::before,
.experience-intro-grid > p::before,
.section-heading::before,
.showcase-copy::before,
.faq-layout > div:first-child::before,
.join-card::before,
.patreon-favorites-head::before,
.story-copy::before,
.story-media::before {
  content: none !important;
  display: none !important;
}

.hero-copy,
.experience-intro-grid > div,
.experience-intro-grid > p,
.section-heading,
.showcase-copy,
.faq-layout > div:first-child,
.patreon-favorites-head,
.story-copy {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Readability comes from restrained shadow, not opaque panels. */
.hero-copy,
.experience-intro-grid,
.section-heading,
.story-copy,
.patreon-favorites-head,
.team-heading,
.how-grid > div:first-child,
.showcase-copy,
.faq-layout > div:first-child {
  text-shadow: 0 3px 22px rgba(0,0,0,.92), 0 1px 5px rgba(0,0,0,.92);
}

/* Make the background sculpture more present. */
.site-background-image {
  opacity: .58;
  filter: saturate(1.08) contrast(1.08) brightness(1.08)
          drop-shadow(0 34px 130px rgba(71,120,214,.16));
}

.site-background-vignette {
  background:
    linear-gradient(90deg,
      rgba(3,5,10,.18) 0%,
      rgba(3,5,10,.05) 24%,
      rgba(3,5,10,.03) 52%,
      rgba(3,5,10,.16) 78%,
      rgba(3,5,10,.30) 100%),
    linear-gradient(180deg,
      rgba(3,5,10,.04) 0%,
      rgba(3,5,10,.08) 45%,
      rgba(3,5,10,.20) 100%);
}

.site-background-noise { opacity: .10; }

/* Story chapters float over the sculpture instead of becoming opaque pages. */
.story-sticky,
.story-scene-blue .story-sticky,
.story-scene-warm .story-sticky,
.story-scene-violet .story-sticky {
  background: transparent !important;
  backdrop-filter: none !important;
}

.story-copy {
  padding: 0;
}

.story-copy h2,
.experience-intro h2,
.patreon-favorites-head h2 {
  text-wrap: balance;
}

/* Images keep their own frame, but the surrounding pane no longer fogs the site. */
.story-media-framed,
.story-media-video,
.motion-marquee-card {
  background: rgba(5,8,13,.16) !important;
  backdrop-filter: none !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.28);
}

.motion-marquee-card {
  border-color: rgba(255,255,255,.16);
}

/* The stacked images should read as images, not a second black panel. */
.story-media-stack {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Carousel keeps only the actual artwork and compact controls. */
.figure-carousel {
  background: transparent !important;
}

.carousel-brand,
.carousel-counter,
.carousel-controls,
.carousel-discover {
  background: rgba(5,8,13,.48);
  backdrop-filter: none;
  box-shadow: none;
}

/* Section headings are open; product/membership cards remain functional cards. */
.patreon-favorites,
.team-section,
.section,
.section-dark,
.join-section {
  background: transparent !important;
}

.patreon-favorites-head {
  padding-block: 10px;
}

/* Reduce opacity of functional panels so the sculpture remains visible. */
.patreon-render-card > a,
.tier-card,
.steps article,
.vault-window,
details,
.artist-card,
.join-card {
  background: linear-gradient(160deg, rgba(10,15,23,.72), rgba(7,11,17,.58)) !important;
  backdrop-filter: none !important;
}

.join-card {
  box-shadow: 0 24px 70px rgba(0,0,0,.24);
}

/* Eliminate decorative behind-the-content typography everywhere. */
.story-ghost-word,
.carousel-ghost {
  visibility: hidden !important;
  opacity: 0 !important;
}

@media (max-width: 980px) {
  .site-background-image { opacity: .50; }
}

@media (max-width: 640px) {
  .site-background-image { opacity: .44; }
  .hero-copy,
  .experience-intro-grid,
  .section-heading,
  .story-copy,
  .patreon-favorites-head,
  .team-heading {
    text-shadow: 0 2px 14px rgba(0,0,0,.96);
  }
}


/* =========================================================
   CINEMATIC FIRST IMPRESSION — V19
   ========================================================= */
.hero{
  min-height:100svh;
  padding:112px 0 72px;
  align-items:center;
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 37% 35%, rgba(50,147,192,.12), transparent 23%),
    linear-gradient(90deg, transparent 0%, transparent 40%, rgba(2,5,10,.16) 54%, rgba(2,5,10,.54) 76%, rgba(2,5,10,.72) 100%);
}
.hero-grid{
  width:min(1420px,calc(100% - 72px));
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:22px;
  align-items:center;
}
.hero-copy{
  grid-column:7 / 13;
  max-width:720px;
  margin:0 0 0 auto;
  padding:0;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  text-shadow:0 4px 26px rgba(0,0,0,.88);
}
.hero-copy::before{display:none !important;content:none !important}
.hero-eyebrow{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:22px;
}
.hero-eyebrow::before{
  content:"";
  width:44px;
  height:1px;
  background:linear-gradient(90deg,#73a8ff,transparent);
}
.hero h1{
  max-width:720px;
  font-size:clamp(4rem,6vw,7.8rem);
  line-height:.83;
  letter-spacing:-.06em;
  text-wrap:balance;
}
.hero h1 span{display:block}
.hero h1 .hero-line-middle{
  margin-top:.12em;
  font-size:.54em;
  line-height:1;
  letter-spacing:-.035em;
  color:#edf3fa;
}
.hero h1 .accent{
  margin-top:.08em;
  font-size:.92em;
  background:linear-gradient(120deg,#f8fbff 3%,#92baff 48%,#4c80e8 100%);
  -webkit-background-clip:text;
  background-clip:text;
}
.hero-lead{
  max-width:610px;
  margin:28px 0 0;
  color:#c2cdda;
  font-size:clamp(1rem,1.18vw,1.24rem);
  line-height:1.72;
}
.hero-actions{margin-top:30px}
.hero-actions .button{min-height:54px;padding-inline:26px}
.hero-metrics{
  max-width:650px;
  margin-top:38px;
  padding-top:22px;
  gap:34px;
  border-top-color:rgba(255,255,255,.18);
}
.hero-metrics strong{color:#fff;font-size:.69rem;letter-spacing:.18em}
.hero-metrics span{color:#8e9cac;font-size:.75rem}
.hero-art{display:none !important}

.hero-signature{
  position:absolute;
  z-index:3;
  left:max(38px,5.2vw);
  bottom:72px;
  display:flex;
  align-items:center;
  gap:16px;
  color:rgba(255,255,255,.76);
  text-shadow:0 3px 18px rgba(0,0,0,.9);
}
.hero-signature>span{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  color:#9bc0ff;
  font-size:.69rem;
  font-weight:900;
  letter-spacing:.08em;
}
.hero-signature div{display:grid;gap:3px}
.hero-signature b{font-size:.67rem;letter-spacing:.18em}
.hero-signature small{color:#7f8b98;font-size:.58rem;letter-spacing:.14em}
.hero-scroll-hint{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  display:grid;
  justify-items:center;
  gap:10px;
  color:#8490a0;
  font-size:.57rem;
  letter-spacing:.24em;
}
.hero-scroll-hint i{
  width:1px;
  height:38px;
  background:linear-gradient(#91b5ff,transparent);
  animation:hero-scroll-pulse 1.8s ease-in-out infinite;
}

/* Bring the face and upper torso into the first viewport. */
.site-background-image{
  left:38%;
  top:-250px;
  width:116vw;
  min-width:116vw;
  opacity:.68;
  filter:saturate(1.10) contrast(1.10) brightness(1.14)
          drop-shadow(0 38px 150px rgba(59,136,196,.18));
}
.site-background-vignette{
  background:
    radial-gradient(circle at 37% 31%, transparent 0%, rgba(3,5,10,.05) 28%, rgba(3,5,10,.12) 48%, rgba(3,5,10,.28) 100%),
    linear-gradient(180deg,rgba(3,5,10,.01),rgba(3,5,10,.12) 72%,rgba(3,5,10,.28));
}

.hero-copy>*{
  opacity:0;
  transform:translateY(24px);
  animation:hero-copy-enter .78s cubic-bezier(.2,.72,.2,1) forwards;
}
.hero-copy>.hero-eyebrow{animation-delay:.12s}
.hero-copy>h1{animation-delay:.22s}
.hero-copy>.hero-lead{animation-delay:.36s}
.hero-copy>.hero-actions{animation-delay:.48s}
.hero-copy>.hero-metrics{animation-delay:.60s}
.hero-signature{opacity:0;animation:hero-fade-enter .8s .72s ease forwards}
.site-background-image{animation:hero-image-enter 1.25s cubic-bezier(.18,.7,.2,1) both}

@keyframes hero-copy-enter{
  to{opacity:1;transform:translateY(0)}
}
@keyframes hero-fade-enter{
  to{opacity:1}
}
@keyframes hero-image-enter{
  from{opacity:0;filter:saturate(.82) contrast(1.02) brightness(.72);}
}
@keyframes hero-scroll-pulse{
  0%,100%{transform:scaleY(.45);transform-origin:top;opacity:.35}
  50%{transform:scaleY(1);transform-origin:top;opacity:1}
}

@media(max-width:1180px){
  .hero-grid{width:min(100% - 48px,1180px)}
  .hero-copy{grid-column:7 / 13;max-width:620px}
  .hero h1{font-size:clamp(3.7rem,6.2vw,6.5rem)}
  .site-background-image{left:32%;top:-170px;width:130vw;min-width:130vw}
}
@media(max-width:980px){
  .hero{align-items:flex-end;padding-bottom:92px}
  .hero::before{
    background:linear-gradient(180deg,transparent 0%,rgba(2,5,10,.15) 40%,rgba(2,5,10,.78) 72%,rgba(2,5,10,.94) 100%);
  }
  .hero-grid{grid-template-columns:1fr;width:min(100% - 36px,760px)}
  .hero-copy{grid-column:auto;max-width:700px;margin:0;padding-top:48vh}
  .hero h1{font-size:clamp(3.2rem,10vw,5.5rem)}
  .hero-signature{display:none}
  .site-background-image{left:50%;top:-120px;width:148vw;min-width:148vw;opacity:.62}
}
@media(max-width:640px){
  .hero{min-height:100svh;padding:94px 0 68px}
  .hero-copy{padding-top:43vh}
  .hero-eyebrow{font-size:.61rem;letter-spacing:.16em}
  .hero h1{font-size:clamp(2.8rem,14vw,4.4rem)}
  .hero h1 .hero-line-middle{font-size:.47em}
  .hero-lead{font-size:.92rem;margin-top:20px}
  .hero-actions{gap:10px;margin-top:22px}
  .hero-actions .button{min-height:48px;padding-inline:18px;font-size:.82rem}
  .hero-metrics{gap:16px;margin-top:26px;padding-top:18px}
  .hero-metrics div{min-width:30%}
  .hero-metrics span{font-size:.64rem}
  .site-background-image{top:-58px;width:175vw;min-width:175vw;opacity:.55}
  .hero-scroll-hint{bottom:14px}
}

@media(prefers-reduced-motion:reduce){
  .hero-copy>*,.hero-signature,.site-background-image{animation:none !important;opacity:1;transform:none}
  .hero-scroll-hint i{animation:none}
}


/* =========================================================
   SEAMLESS GLOBAL BACKGROUND — V20
   Prevent visible image edges and hard section transitions.
   ========================================================= */
.site-background,
.site-background-image-wrap {
  background-color:#02050a;
}

.site-background-image-wrap {
  overflow:hidden;
}

/* The global image is the only panoramic layer. Top-level sections never crop it. */
main,
main > section {
  background-color:transparent !important;
}

main > section {
  border-top-color:transparent !important;
  border-bottom-color:transparent !important;
}

/* Remove full-width fades that can look like horizontal cuts between sections. */
.hero::after,
.experience-intro::after,
.patreon-favorites::after,
.section::after,
.join-section::after {
  display:none !important;
  content:none !important;
}

/* One continuous global vignette instead of a different overlay per section. */
.site-background-vignette {
  background:
    radial-gradient(circle at 37% 31%, transparent 0%, rgba(3,5,10,.04) 32%, rgba(3,5,10,.11) 58%, rgba(3,5,10,.24) 100%),
    linear-gradient(180deg, rgba(2,5,10,.02) 0%, rgba(2,5,10,.08) 55%, rgba(2,5,10,.20) 100%) !important;
}

/* Soft safety fade at the viewport edges, not at section boundaries. */
.site-background::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(2,5,10,.12), transparent 12%, transparent 88%, rgba(2,5,10,.18));
}


/* =========================================================
   PRODUCT-FOCUSED CINEMATIC HERO — V21
   ========================================================= */
.hero-product-showcase {
  position: relative;
  min-height: 100svh;
  height: max(760px, 100svh);
  padding: 86px 0 0;
  overflow: hidden;
  isolation: isolate;
  display: block;
  background:
    radial-gradient(circle at 48% 38%, rgba(48,113,178,.10), transparent 27%),
    linear-gradient(180deg, rgba(1,3,7,.26), rgba(1,3,7,.02) 46%, rgba(1,3,7,.48));
}

.hero-product-showcase::before {
  content: "";
  position: absolute;
  inset: 84px 24px 22px;
  z-index: 8;
  pointer-events: none;
  border: 1px solid rgba(105,169,255,.13);
  border-radius: 6px;
  mask-image: linear-gradient(90deg, #000 0 6%, transparent 6% 94%, #000 94%), linear-gradient(#000 0 10%, transparent 10% 90%, #000 90%);
  mask-composite: intersect;
}

.hero-frame-corners {
  position: absolute;
  inset: 103px 43px 42px;
  z-index: 9;
  pointer-events: none;
  background:
    linear-gradient(90deg,#65d9ec,#9273ff) left top/90px 2px no-repeat,
    linear-gradient(180deg,#65d9ec,#9273ff) left top/2px 90px no-repeat,
    linear-gradient(90deg,#9273ff,#65d9ec) right top/90px 2px no-repeat,
    linear-gradient(180deg,#9273ff,#65d9ec) right top/2px 90px no-repeat,
    linear-gradient(90deg,#65d9ec,#9273ff) left bottom/90px 2px no-repeat,
    linear-gradient(180deg,#65d9ec,#9273ff) left bottom/2px 90px no-repeat,
    linear-gradient(90deg,#9273ff,#65d9ec) right bottom/90px 2px no-repeat,
    linear-gradient(180deg,#9273ff,#65d9ec) right bottom/2px 90px no-repeat;
  opacity: .52;
}

.hero-product-showcase .hero-glow,
.hero-product-showcase .hero-art,
.hero-product-showcase .hero-signature { display: none !important; }

.hero-giant-word {
  --hero-word-x: 0px;
  --hero-word-y: 0px;
  --hero-word-scroll: 0px;
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 47%;
  width: 110vw;
  transform: translate3d(calc(-50% + var(--hero-word-x)), calc(-50% + var(--hero-word-y) + var(--hero-word-scroll)), 0);
  color: rgba(205,217,229,.115);
  font-size: clamp(8rem, 20.7vw, 25rem);
  line-height: .72;
  font-weight: 950;
  letter-spacing: -.085em;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  text-transform: uppercase;
  will-change: transform;
}

.hero-product-stage {
  --hero-magnet-x: 0px;
  --hero-magnet-y: 0px;
  --hero-scroll-y: 0px;
  --hero-scroll-scale: 1;
  position: absolute;
  z-index: 4;
  left: 48%;
  top: 52%;
  width: min(43vw, 720px);
  height: 108%;
  transform: translate3d(calc(-50% + var(--hero-magnet-x)), calc(-50% + var(--hero-magnet-y) + var(--hero-scroll-y)), 0) scale(var(--hero-scroll-scale));
  transform-origin: center 45%;
  pointer-events: none;
  will-change: transform;
}

.hero-product-stage img {
  position: absolute;
  inset: -11% 0 auto;
  width: 100%;
  height: 122%;
  max-width: none;
  object-fit: contain;
  object-position: 50% 22%;
  mix-blend-mode: screen;
  filter: brightness(1.2) contrast(1.12) saturate(1.06) drop-shadow(0 36px 80px rgba(45,128,190,.25));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 82%, transparent 99%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 82%, transparent 99%);
}

.hero-product-aura {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 46%;
  width: 72%;
  aspect-ratio: 1;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(63,185,221,.24), rgba(124,69,194,.12) 38%, transparent 69%);
  filter: blur(30px);
}

.hero-showcase-grid {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  min-height: calc(100svh - 86px);
  align-items: center;
}

.hero-showcase-copy {
  grid-column: 8 / 13;
  align-self: center;
  max-width: 560px;
  padding: 28px 0 84px;
  text-shadow: 0 4px 34px rgba(0,0,0,.88);
}

.hero-showcase-copy::before { display:none !important; content:none !important; }

.hero-showcase-copy h1 {
  margin: 0;
  max-width: 650px;
  font-size: clamp(3.4rem,5.45vw,6.2rem);
  line-height: .86;
  letter-spacing: -.058em;
  font-weight: 950;
}

.hero-showcase-copy h1 span { display:block; }
.hero-showcase-copy h1 .accent {
  margin-top: .12em;
  color: transparent;
  background: linear-gradient(108deg,#f6fbff 0%,#87b5ff 52%,#9b7aff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-showcase-copy .hero-lead {
  max-width: 500px;
  margin: 26px 0 0;
  color: #c2ccd8;
  font-size: 1.03rem;
  line-height: 1.72;
}

.hero-showcase-copy .hero-actions { margin-top: 28px; }
.hero-showcase-copy .button { min-height: 52px; padding-inline: 24px; }

.hero-product-label {
  position:absolute;
  z-index:7;
  left: clamp(50px,5vw,96px);
  bottom: 88px;
  display:flex;
  align-items:center;
  gap:14px;
  color:#fff;
  text-shadow:0 3px 22px #000;
}
.hero-product-label>span {
  width:44px;height:44px;border:1px solid rgba(124,182,255,.45);border-radius:50%;
  display:grid;place-items:center;color:#9bc1ff;font-weight:900;font-size:.72rem;
}
.hero-product-label div { display:grid;gap:2px; }
.hero-product-label b { font-size:.67rem;letter-spacing:.17em; }
.hero-product-label small { color:#8190a0;font-size:.56rem;letter-spacing:.13em; }

.hero-bottom-bar {
  position:absolute;
  z-index:7;
  left: clamp(44px,4vw,78px);
  right: clamp(44px,4vw,78px);
  bottom: 38px;
  min-height: 48px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:end;
  gap:20px;
  pointer-events:none;
}
.hero-bottom-meta { display:grid;gap:1px;opacity:.82; }
.hero-bottom-meta span,.hero-bottom-meta b,.hero-bottom-meta small { letter-spacing:.14em; }
.hero-bottom-meta span { color:#8eb9ff;font-size:.57rem; }
.hero-bottom-meta b { font-size:.69rem; }
.hero-bottom-meta small { color:#718092;font-size:.52rem; }
.hero-bottom-index { justify-self:end;display:flex;align-items:center;gap:9px;color:#8b98a7;font-size:.61rem;letter-spacing:.12em; }
.hero-bottom-index i { width:48px;height:1px;background:rgba(255,255,255,.24); }
.hero-bottom-bar .hero-scroll-hint {
  position:static;
  transform:none;
  pointer-events:auto;
  justify-self:center;
}

@media (max-width: 1100px) {
  .hero-product-stage { left:38%;width:min(58vw,680px); }
  .hero-showcase-copy { grid-column:7 / 13;max-width:540px; }
  .hero-showcase-copy h1 { font-size:clamp(3.2rem,6.5vw,5.5rem); }
  .hero-product-label { display:none; }
}

@media (max-width: 760px) {
  .hero-product-showcase { height:100svh;min-height:760px;padding-top:76px; }
  .hero-product-showcase::before { inset:82px 12px 14px; }
  .hero-frame-corners { inset:94px 22px 28px; }
  .hero-giant-word { top:31%;font-size:31vw;width:140vw; }
  .hero-product-stage { left:50%;top:31%;width:96vw;height:68%; }
  .hero-product-stage img { inset:-4% 0 auto;height:115%;object-position:50% 18%; }
  .hero-showcase-grid { min-height:calc(100svh - 76px);align-items:end;width:min(100% - 42px,720px); }
  .hero-showcase-copy { grid-column:1 / -1;padding:0 0 130px;max-width:680px; }
  .hero-showcase-copy h1 { font-size:clamp(2.65rem,12.8vw,4.4rem);line-height:.88; }
  .hero-showcase-copy .hero-lead { max-width:590px;font-size:.9rem;margin-top:18px; }
  .hero-showcase-copy .hero-actions { margin-top:20px;gap:9px; }
  .hero-showcase-copy .button { min-height:47px;padding-inline:17px;font-size:.78rem; }
  .hero-bottom-bar { left:22px;right:22px;bottom:18px;grid-template-columns:1fr auto; }
  .hero-bottom-bar .hero-scroll-hint { display:none; }
  .hero-bottom-index { justify-self:end; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-product-stage,.hero-giant-word { transform:none !important; }
}


/* =========================================================
   PREMIUM ART DIRECTION — V22
   ========================================================= */
:root{
  --accent-cyan:#67dce9;
  --accent-blue:#6d9cff;
  --accent-violet:#9b72ff;
  --panel-deep:rgba(6,10,17,.74);
}
body{font-family:'Kanit',Inter,ui-sans-serif,system-ui,sans-serif;font-weight:400;letter-spacing:.005em}
.brand strong,.site-nav,.button,.eyebrow,.tier-label,.story-index{font-family:'Kanit',sans-serif}
.site-header{background:rgba(3,6,11,.62);border-bottom:1px solid rgba(255,255,255,.055);backdrop-filter:blur(16px) saturate(125%)}
.nav-wrap{height:72px}
.site-nav{gap:26px;font-size:.83rem;font-weight:400}
.site-nav a{position:relative;color:#aeb8c5}
.site-nav a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:100%;bottom:-8px;height:1px;background:linear-gradient(90deg,var(--accent-cyan),var(--accent-violet));transition:right .25s ease}
.site-nav a:not(.nav-cta):hover::after{right:0}
.nav-cta{border-color:rgba(255,255,255,.13);background:rgba(255,255,255,.025)}

.button{border-radius:14px;min-height:54px;font-weight:600;letter-spacing:.015em;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease}
.button-primary{background:linear-gradient(120deg,#407ff0 0%,#6b88f4 52%,#916ee9 100%);box-shadow:0 16px 42px rgba(78,112,230,.24)}
.button-primary:hover{box-shadow:0 20px 55px rgba(83,119,239,.36)}
.button-secondary{background:rgba(8,13,22,.22);border-color:rgba(255,255,255,.16);backdrop-filter:blur(8px)}
.button-secondary:hover{border-color:rgba(111,190,255,.48);background:rgba(10,17,29,.42)}
.eyebrow{color:#8bb6ff;font-weight:600;font-size:.67rem;letter-spacing:.24em}

.hero-product-showcase{height:max(800px,100svh);padding-top:72px;background:linear-gradient(180deg,rgba(1,4,9,.88) 0%,rgba(1,4,9,.62) 48%,rgba(1,4,9,.06) 100%)}
.hero-product-showcase::before{content:"";display:block!important;position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 34% 42%,rgba(52,154,198,.15),transparent 24%),radial-gradient(circle at 43% 52%,rgba(126,78,197,.13),transparent 31%);pointer-events:none;mask-image:none;border:0;border-radius:0}
.hero-frame-corners,.hero-product-label,.hero-bottom-bar{display:none!important}
.hero-giant-word{left:43%;top:49%;width:112vw;color:transparent;-webkit-text-stroke:1px rgba(177,199,220,.13);font-size:clamp(10rem,21vw,26rem);letter-spacing:-.075em;opacity:.9}
.hero-product-stage{left:36.5%;top:51%;width:min(50vw,790px);height:112%;z-index:3}
.hero-product-stage img{inset:-8% 0 auto;height:120%;object-position:50% 21%;mix-blend-mode:screen;filter:brightness(1.24) contrast(1.13) saturate(1.06) drop-shadow(0 42px 100px rgba(45,128,190,.28));mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 80%,transparent 98%)}
.hero-product-aura{width:82%;background:radial-gradient(circle,rgba(76,190,225,.25),rgba(114,72,195,.13) 42%,transparent 70%);filter:blur(44px)}
.hero-showcase-grid{min-height:calc(100svh - 72px);align-items:center}
.hero-showcase-copy{grid-column:8 / 13;max-width:610px;padding:42px 0 118px;text-shadow:0 4px 38px rgba(0,0,0,.72)}
.hero-showcase-copy h1{font-size:clamp(4rem,5.7vw,6.65rem);line-height:.84;letter-spacing:-.06em;text-wrap:balance}
.hero-showcase-copy h1 .accent{margin-top:.14em;background:linear-gradient(105deg,#edf6ff 0%,#8bb8ff 50%,#ad8cff 100%);-webkit-background-clip:text;background-clip:text}
.hero-showcase-copy .hero-lead{max-width:540px;color:#b7c3d0;font-size:1.02rem;font-weight:300;line-height:1.75}
.hero-showcase-copy .hero-actions{margin-top:30px}
.hero-release-pill{position:absolute;z-index:8;right:clamp(30px,4vw,72px);top:104px;display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid rgba(255,255,255,.11);border-radius:999px;background:rgba(7,11,18,.34);backdrop-filter:blur(10px);color:#b8c4d2;font-size:.58rem;letter-spacing:.16em}
.hero-release-pill i{width:7px;height:7px;border-radius:50%;background:var(--accent-cyan);box-shadow:0 0 16px var(--accent-cyan)}
.hero-side-caption{position:absolute;z-index:7;left:clamp(22px,3vw,52px);top:50%;display:flex;align-items:center;gap:12px;transform:rotate(-90deg) translateX(-50%);transform-origin:left top;color:#6f7d8d;font-size:.55rem;letter-spacing:.2em}
.hero-side-caption span{color:#90b6ff}.hero-side-caption i{width:58px;height:1px;background:rgba(255,255,255,.18)}
.hero-proof-strip{position:absolute;z-index:8;left:clamp(34px,5vw,90px);right:clamp(34px,5vw,90px);bottom:24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:center;border-top:1px solid rgba(255,255,255,.10);padding-top:18px;gap:22px}
.hero-proof-strip>div{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}
.hero-proof-strip>div span{grid-row:1 / 3;color:#719bdf;font-size:.58rem;letter-spacing:.1em}
.hero-proof-strip>div b{font-size:.66rem;font-weight:600;letter-spacing:.12em;color:#e5ebf3}
.hero-proof-strip>div small{font-size:.62rem;font-weight:300;color:#778493}
.hero-proof-strip .hero-scroll-hint{position:static;transform:none;display:flex;align-items:center;gap:12px;color:#c5cfdb;font-size:.63rem;letter-spacing:.14em}
.hero-proof-strip .hero-scroll-hint i{width:38px;height:38px;border:1px solid rgba(255,255,255,.16);border-radius:50%;position:relative}
.hero-proof-strip .hero-scroll-hint i::before{content:"↓";position:absolute;inset:0;display:grid;place-items:center;color:#8eb9ff;font-size:.85rem}

.experience-intro{min-height:78vh;padding:170px 0 140px;border-top:0;background:transparent!important}
.experience-intro-grid{grid-template-columns:minmax(0,1.25fr) minmax(300px,.55fr);gap:90px;align-items:center}
.experience-intro h2{max-width:980px;font-size:clamp(3.5rem,6.5vw,7rem);line-height:.9;font-weight:800}
.experience-intro-grid>p{font-weight:300;color:#aeb9c6;font-size:1.08rem;line-height:1.85;border-left:1px solid rgba(130,172,255,.28);padding-left:28px}
.experience-scroll-cue{opacity:.55}

.story-rail{left:28px;gap:8px}
.story-rail-item{width:42px;min-height:42px;border-radius:999px;background:rgba(5,9,15,.28);border-color:rgba(255,255,255,.10)}
.story-rail-item:hover,.story-rail-item.active{width:122px;border-color:rgba(104,160,255,.52);background:rgba(8,14,24,.58)}
.story-corner{display:none}
.story-copy{width:min(560px,40vw)}
.story-copy h2{font-size:clamp(3.2rem,5.2vw,6rem);font-weight:800;line-height:.9}
.story-copy>p:not(.eyebrow):not(.story-index){font-weight:300;color:#aeb9c6;font-size:1rem;line-height:1.8}
.story-index{color:#6f7c8d;font-size:.58rem}
.story-link{font-weight:500;color:#e8eef7;border-color:rgba(131,174,255,.32)}
.story-media-framed,.motion-marquee-card{border:1px solid rgba(255,255,255,.11);border-radius:24px;background:rgba(3,7,13,.13)!important;box-shadow:0 42px 120px rgba(0,0,0,.30)}
.story-media-label{border-color:rgba(255,255,255,.10);background:rgba(3,7,13,.58);font-weight:400}
.motion-marquee-head,.motion-marquee-footer{color:#8996a6}
.motion-tile{border-radius:16px;border-color:rgba(255,255,255,.10)}
.motion-tile figcaption{font-weight:400}

.figure-carousel{min-height:760px}
.carousel-brand,.carousel-counter{background:transparent;border:0;color:#8796a8;padding:0}
.carousel-controls,.carousel-discover{background:rgba(5,9,16,.42);border-color:rgba(255,255,255,.12);backdrop-filter:blur(10px);color:#fff}
.carousel-discover{font-size:clamp(1.4rem,3.2vw,3.2rem)}
.carousel-button{border-width:1px}

.patreon-favorites{padding:155px 0 150px}
.patreon-favorites-head{gap:90px;margin-bottom:64px}
.patreon-favorites-head h2{font-size:clamp(3.4rem,6vw,6.6rem);font-weight:800}
.patreon-favorites-head>p{font-weight:300;font-size:1.02rem}
.patreon-render-card>a{border-radius:22px;background:rgba(6,10,17,.55);border-color:rgba(255,255,255,.09);backdrop-filter:blur(6px)}
.patreon-render-card>a:hover{transform:translateY(-9px);border-color:color-mix(in srgb,var(--card-accent) 58%,white 8%);box-shadow:0 28px 80px rgba(0,0,0,.30)}
.patreon-render-media{background:rgba(4,8,14,.34)}
.patreon-render-info h3{font-weight:600}
.patreon-source-status{background:rgba(3,7,12,.56)}

.team-heading h2,.section-heading h2,.how-grid h2,.showcase-copy h2,.faq-layout h2,.join-card h2{font-weight:800}
.artist-card,.tier-card,.steps article,.vault-window,details,.join-card{border-color:rgba(255,255,255,.09);background:rgba(6,10,17,.60);backdrop-filter:blur(7px)}
.artist-card{border-radius:22px}
.artist-card:hover{border-color:rgba(103,201,231,.50);box-shadow:0 30px 85px rgba(0,0,0,.32)}
.tier-card{position:relative;overflow:hidden;border-radius:22px}
.tier-card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(148,178,220,.72),transparent)}
.tier-card.featured::before{background:linear-gradient(90deg,transparent,#e6bd66,#7aa4ff,transparent)}
.steps article{border-radius:18px}
details{border-radius:18px}
.join-card{border-radius:26px}

@media(max-width:1100px){
  .hero-product-stage{left:33%;width:min(58vw,730px)}
  .hero-showcase-copy{grid-column:7 / 13}
  .hero-proof-strip{grid-template-columns:repeat(3,1fr)}
  .hero-proof-strip .hero-scroll-hint{display:none}
}
@media(max-width:760px){
  .hero-product-showcase{min-height:820px;height:100svh}
  .hero-release-pill{top:92px;right:18px;font-size:.5rem}
  .hero-side-caption{display:none}
  .hero-giant-word{top:29%;font-size:30vw}
  .hero-product-stage{left:50%;top:30%;width:104vw;height:62%}
  .hero-showcase-grid{align-items:end}
  .hero-showcase-copy{padding:0 0 152px}
  .hero-showcase-copy h1{font-size:clamp(2.8rem,13vw,4.5rem)}
  .hero-showcase-copy .hero-lead{font-size:.88rem;max-width:92%}
  .hero-proof-strip{left:20px;right:20px;bottom:18px;grid-template-columns:1fr 1fr;gap:12px}
  .hero-proof-strip>div:nth-child(3){display:none}
  .hero-proof-strip>div b{font-size:.56rem}.hero-proof-strip>div small{font-size:.55rem}
  .experience-intro{padding:120px 0 105px}
  .experience-intro-grid{grid-template-columns:1fr;gap:34px}
  .experience-intro-grid>p{border-left:0;border-top:1px solid rgba(130,172,255,.24);padding:24px 0 0}
}


/* =========================================================
   UNIFIED MOTION & SCROLL SYSTEM — V23
   Based on subtle reveal, hover, stagger and parallax rules.
   ========================================================= */
:root{
  --motion-fast:220ms;
  --motion-ui:340ms;
  --motion-reveal:620ms;
  --motion-ease:cubic-bezier(.22,.75,.22,1);
  --motion-ease-ui:cubic-bezier(.4,0,.2,1);
}

html{scroll-padding-top:88px}
section[id]{scroll-margin-top:82px}

.site-scroll-progress{
  position:fixed;
  z-index:9998;
  left:0;
  right:0;
  top:0;
  height:2px;
  pointer-events:none;
  background:rgba(255,255,255,.025);
}
.site-scroll-progress span{
  display:block;
  width:100%;
  height:100%;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg,var(--accent-cyan),var(--accent-blue),var(--accent-violet));
  box-shadow:0 0 16px rgba(103,220,233,.34);
  will-change:transform;
}

/* Scroll reveal: no opaque panels and no background blur. */
@media (prefers-reduced-motion:no-preference){
  html.motion-capable .motion-reveal{
    opacity:0;
    transform:translate3d(0,24px,0) scale(.992);
    transition:
      opacity var(--motion-reveal) var(--motion-ease),
      transform var(--motion-reveal) var(--motion-ease);
    transition-delay:var(--motion-delay,0ms);
    will-change:opacity,transform;
  }
  html.motion-capable .motion-reveal.motion-from-left{
    transform:translate3d(-24px,0,0) scale(.992);
  }
  html.motion-capable .motion-reveal.motion-from-right{
    transform:translate3d(24px,0,0) scale(.992);
  }
  html.motion-capable .motion-reveal.is-visible{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
  }
}

/* Consistent, restrained microinteractions. */
.button,
.nav-cta,
.lang-toggle,
.story-link,
.carousel-button,
.story-rail-item{
  transition:
    transform var(--motion-fast) var(--motion-ease-ui),
    background-color var(--motion-fast) var(--motion-ease-ui),
    border-color var(--motion-fast) var(--motion-ease-ui),
    color var(--motion-fast) var(--motion-ease-ui),
    box-shadow var(--motion-fast) var(--motion-ease-ui),
    opacity var(--motion-fast) var(--motion-ease-ui);
}
.button:hover,
.nav-cta:hover{transform:translateY(-2px) scale(1.02)}
.button:active,
.nav-cta:active,
.carousel-button:active{transform:translateY(0) scale(.985)}
.lang-toggle:hover{transform:scale(1.04);border-color:rgba(111,190,255,.48)}

.patreon-render-card>a,
.artist-card,
.tier-card,
.steps article,
details,
.motion-tile,
.vault-window{
  transition:
    transform var(--motion-ui) var(--motion-ease),
    border-color var(--motion-ui) var(--motion-ease),
    box-shadow var(--motion-ui) var(--motion-ease),
    background-color var(--motion-ui) var(--motion-ease);
}
.patreon-render-card>a:hover,
.artist-card:hover,
.tier-card:hover,
.steps article:hover,
.motion-tile:hover{
  transform:translateY(-5px);
  box-shadow:0 28px 78px rgba(0,0,0,.30);
}
.tier-card.featured:hover{transform:translateY(-10px)}

.patreon-render-media,
.motion-tile,
.artist-portrait{overflow:hidden}
.patreon-render-media img,
.motion-tile img,
.artist-portrait::before{
  transition:transform 460ms var(--motion-ease),filter 460ms var(--motion-ease);
  will-change:transform;
}
.patreon-render-card:hover .patreon-render-media img,
.motion-tile:hover img{transform:scale(1.025)}
.artist-card:hover .artist-portrait::before{transform:scale(1.035)}

/* Cleaner story transitions: movement and opacity, not heavy blur. */
.story-copy,
.story-media{
  transition:none;
}
.story-copy{filter:none!important}
.story-media{filter:none!important}
.story-scene{isolation:isolate}
.story-sticky::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:18vh;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(2,4,8,.08));
  opacity:.5;
}

/* Section rhythm without hiding the permanent sculpture background. */
.experience-intro,
.patreon-favorites,
.team-section,
.section,
.join-section{
  isolation:isolate;
}
.experience-intro>.container,
.patreon-favorites>.container,
.team-section>.container,
.section>.container,
.join-section>.container{
  position:relative;
  z-index:2;
}

/* Active nav state follows the section currently in view. */
.site-nav a[data-nav-current="true"]{color:#fff}
.site-nav a[data-nav-current="true"]::after{right:0!important}

/* Gentle living motion for the hero; paused when not visible. */
@media (prefers-reduced-motion:no-preference){
  .hero-product-stage.is-hero-idle{
    animation:heroIdleFloat 6.8s ease-in-out infinite;
  }
  .hero-scroll-hint i::before{animation:scrollHint 1.8s ease-in-out infinite}
  @keyframes heroIdleFloat{
    0%,100%{margin-top:0}
    50%{margin-top:-8px}
  }
  @keyframes scrollHint{
    0%,100%{transform:translateY(-2px);opacity:.55}
    50%{transform:translateY(4px);opacity:1}
  }
}

/* Mobile keeps motion shorter and avoids hover assumptions. */
@media (max-width:760px){
  html.motion-capable .motion-reveal,
  html.motion-capable .motion-reveal.motion-from-left,
  html.motion-capable .motion-reveal.motion-from-right{
    transform:translate3d(0,16px,0) scale(.995);
  }
  html.motion-capable .motion-reveal.is-visible{transform:none}
  .patreon-render-card>a:hover,
  .artist-card:hover,
  .tier-card:hover,
  .tier-card.featured:hover,
  .steps article:hover,
  .motion-tile:hover{transform:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .site-scroll-progress{display:none}
  .motion-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .hero-product-stage{animation:none!important}
  .hero-scroll-hint i::before{animation:none!important}
  .site-background-image,
  .hero-product-stage,
  .hero-giant-word,
  .motion-marquee-row{transform:none!important}
}


/* =========================================================
   EDGE-TO-EDGE BACKGROUND COVERAGE — V24
   Keeps the panoramic render beyond both viewport edges,
   including at the final scroll position.
   ========================================================= */
.site-background {
  background:#02050a !important;
}
.site-background-image-wrap {
  inset:-3px;
  width:auto;
  height:auto;
}
.site-background-image {
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* =========================================================
   FLOWING HERO NAVIGATION — V25
   The navigation belongs to the opening scene and leaves the
   viewport naturally with the hero. It is never sticky/fixed.
   ========================================================= */
.site-header{
  position:absolute !important;
  inset:0 0 auto 0 !important;
  z-index:100 !important;
  background:linear-gradient(180deg,rgba(2,5,10,.78) 0%,rgba(2,5,10,.34) 64%,transparent 100%) !important;
  border-bottom:0 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* No permanent interface element remains attached to the top edge. */
.site-scroll-progress{display:none !important}

/* Anchor destinations no longer need to compensate for a fixed header. */
html{scroll-padding-top:18px !important}
section[id]{scroll-margin-top:18px !important}

@media(max-width:980px){
  .site-nav{
    position:absolute;
    top:72px;
  }
}

/* =========================================================
   SEAMLESS STORY → CAROUSEL TRANSITION — V26
   Removes the full-width tonal seam visible when the third
   story chapter gives way to the collection carousel.
   ========================================================= */
.scroll-story,
.story-scene,
.story-sticky,
.figure-carousel,
#figure-carousel {
  border: 0 !important;
  border-block: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* These layers started and ended exactly at the section edge,
   producing the horizontal band shown in the screenshot. */
.story-sticky::after,
.figure-carousel::before,
.figure-carousel::after,
.carousel-grain {
  content: none !important;
  display: none !important;
}

/* Slight overlap prevents a one-pixel subpixel seam at some
   browser zoom levels and high-DPI displays. */
.scroll-story + .figure-carousel,
#figure-carousel {
  margin-top: -2px !important;
  padding-top: 2px !important;
  background: transparent !important;
}

/* No top-level section is allowed to draw a horizontal divider. */
main > section,
main > section::before,
main > section::after {
  border-top: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
}


/* =========================================================
   SOFT HERO NAV RETENTION — V27
   The opening navigation briefly resists the scroll, then
   releases with a progressive acceleration and leaves with
   the hero. It never remains attached to the full page.
   ========================================================= */
.site-header{
  --soft-header-y:0px;
  transform:translate3d(0,var(--soft-header-y),0) !important;
  will-change:transform;
  contain:layout style;
}

.hero-showcase-copy{
  --hero-copy-lag:0px;
  transform:translate3d(0,var(--hero-copy-lag),0);
  will-change:transform;
}
.hero-release-pill{
  --hero-meta-lag:0px;
  transform:translate3d(0,var(--hero-meta-lag),0);
  will-change:transform;
}
.hero-proof-strip{
  --hero-proof-lag:0px;
  transform:translate3d(0,var(--hero-proof-lag),0);
  will-change:transform;
}

@media (prefers-reduced-motion: reduce){
  .site-header,
  .hero-showcase-copy,
  .hero-release-pill,
  .hero-proof-strip{
    transform:none !important;
  }
}


/* =========================================================
   V28 — IDENTIDAD OFICIAL LUCAS PEREZ STUDIO
   ========================================================= */
.brand-official{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:max-content;
  line-height:0;
}
.brand-official .brand-symbol{
  width:42px;
  height:42px;
  object-fit:contain;
  flex:0 0 auto;
  filter:drop-shadow(0 5px 18px rgba(0,0,0,.34));
}
.brand-official .brand-wordmark{
  width:clamp(154px,12.5vw,222px);
  height:auto;
  object-fit:contain;
  display:block;
}
.footer-brand-official{
  display:flex;
  align-items:center;
}
.footer-brand-official img{
  width:min(300px,100%);
  height:auto;
  display:block;
  filter:drop-shadow(0 10px 28px rgba(0,0,0,.32));
}
.join-actions{
  align-items:stretch;
}
.patreon-signature{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:7px 12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(2,5,10,.28);
  transition:transform .3s cubic-bezier(.4,0,.2,1),border-color .3s ease,background .3s ease;
}
.patreon-signature:hover{
  transform:translateY(-2px);
  border-color:rgba(126,166,255,.45);
  background:rgba(10,18,30,.48);
}
.patreon-signature img{
  display:block;
  width:min(260px,100%);
  height:auto;
}
@media (max-width:980px){
  .brand-official .brand-symbol{width:38px;height:38px}
  .brand-official .brand-wordmark{width:170px}
}
@media (max-width:620px){
  .brand-official{gap:8px}
  .brand-official .brand-symbol{width:34px;height:34px}
  .brand-official .brand-wordmark{width:138px}
  .footer-brand-official img{width:240px}
}


/* =========================================================
   V30 — CONTROLLED HEADER HOLD AND EXIT
   The header remains fixed through the opening portion of the
   hero, then rises directly with scroll progress. There is no
   interpolation lag, so it cannot hide and then reappear while
   the visitor continues scrolling downward.
   ========================================================= */
.site-header{
  --header-exit-y:0px;
  --header-exit-opacity:1;
  position:fixed !important;
  inset:0 0 auto 0 !important;
  width:100% !important;
  z-index:120 !important;
  transform:translate3d(0,var(--header-exit-y),0) !important;
  opacity:var(--header-exit-opacity) !important;
  background:linear-gradient(180deg,rgba(2,5,10,.58) 0%,rgba(2,5,10,.16) 66%,transparent 100%) !important;
  border:0 !important;
  border-bottom:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  will-change:transform,opacity;
}
.site-header.is-nav-hidden{
  pointer-events:none;
  visibility:hidden;
}
.hero-product-showcase{padding-top:0}
.site-scroll-progress{display:none !important}
html{scroll-padding-top:18px !important}
section[id]{scroll-margin-top:18px !important}

/* =========================================================
   V30 — END-OF-PAGE RETURN BUTTON
   ========================================================= */
.back-to-top-section{
  position:relative;
  z-index:8;
  display:grid;
  place-items:center;
  min-height:clamp(190px,24vh,280px);
  padding:clamp(52px,7vw,96px) 24px;
  background:transparent;
  isolation:isolate;
}
.back-to-top-button{
  appearance:none;
  border:0;
  background:transparent;
  color:#f4f7fb;
  display:grid;
  justify-items:center;
  gap:11px;
  padding:14px 22px;
  cursor:pointer;
  font:700 .75rem/1 'Kanit',sans-serif;
  letter-spacing:.19em;
  text-transform:uppercase;
  border-radius:22px;
  transition:background .32s ease,transform .32s cubic-bezier(.22,1,.36,1);
}
.back-to-top-button:hover,
.back-to-top-button:focus-visible{
  background:rgba(11,20,34,.38);
  transform:translateY(-3px);
}
.back-to-top-symbol{
  width:clamp(76px,6.8vw,96px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  transition:transform .38s cubic-bezier(.22,1,.36,1),filter .38s ease;
  filter:drop-shadow(0 14px 30px rgba(62,136,255,.22));
}
.back-to-top-symbol img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.back-to-top-label{color:#e6edf7}
.back-to-top-arrow{
  font-size:1.15rem;
  line-height:1;
  color:#79a7ff;
  transition:transform .38s cubic-bezier(.22,1,.36,1);
}
.back-to-top-button:hover .back-to-top-symbol,
.back-to-top-button:focus-visible .back-to-top-symbol{
  transform:translateY(-5px) scale(1.035);
  filter:drop-shadow(0 19px 38px rgba(87,151,255,.34));
}
.back-to-top-button:hover .back-to-top-arrow,
.back-to-top-button:focus-visible .back-to-top-arrow{transform:translateY(-4px)}
.back-to-top-button:focus-visible{outline:1px solid rgba(121,167,255,.9);outline-offset:5px}

.page-jump-transition{
  position:fixed;
  inset:0;
  z-index:9998;
  pointer-events:none;
  opacity:0;
  background:#02050a;
  transition:opacity 180ms cubic-bezier(.4,0,.2,1);
}
.page-jump-transition.is-covering{opacity:1}

@media(max-width:980px){
  .site-header{background:linear-gradient(180deg,rgba(2,5,10,.72),rgba(2,5,10,.12) 72%,transparent) !important}
}
@media(max-width:720px){
  .back-to-top-section{min-height:180px;padding-block:48px}
  .back-to-top-button{font-size:.67rem}
}
@media(prefers-reduced-motion:reduce){
  .site-header{transition:none !important}
  .back-to-top-button,.back-to-top-symbol,.back-to-top-arrow,.page-jump-transition{transition:none !important}
}