@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,200..800&family=Exo+2:wght@300;400;500&family=Share+Tech+Mono&display=swap');

:root {
  --bg: #050810;
  --surface: #090d15;
  --line: rgba(190,205,218,.13);
  --text: #e9edf0;
  --text-dim: #7f8992;
  --accent: #00e5ff;
  --magenta: #cc00ff;
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
  --font-body: 'Exo 2', sans-serif;
}

html { background: var(--bg); }
body { background: var(--bg); color: var(--text); }
body::before { opacity:.035; }
body::after { opacity:.23; }

.site-header {
  height: 56px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:2.2rem;
  align-items:center;
  padding:0 1.9rem;
  background:linear-gradient(180deg,rgba(5,8,16,.92),rgba(5,8,16,.25),transparent);
  border-bottom:1px solid rgba(255,255,255,.035);
  backdrop-filter: blur(8px);
}
.mini-brand { font:500 .76rem var(--font-mono); letter-spacing:.04em; color:#d8dde1; }
.site-header nav { justify-self:start; gap:2rem; font:400 .68rem var(--font-mono); }
.site-header nav a { position:relative; color:#969fa7; }
.site-header nav a:first-child::before { content:""; width:4px; height:4px; border-radius:50%; background:var(--magenta); position:absolute; left:-.75rem; top:50%; transform:translateY(-50%); box-shadow:0 0 8px rgba(204,0,255,.55); }
.menu-trigger { border:0; background:none; color:#c9d0d5; font:400 .7rem var(--font-mono); letter-spacing:.08em; cursor:pointer; }
.menu-grid { margin-left:.45rem; color:#fff; }

.hero {
  position:relative;
  min-height:100vh;
  height:max(760px,100vh);
  padding:56px 0 0;
  overflow:hidden;
  isolation:isolate;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 70% 38%,rgba(31,42,55,.13),transparent 34%),
    radial-gradient(circle at 23% 36%,rgba(255,255,255,.025),transparent 23%),
    #050810;
  --hero-scroll:0;
}
.hero-ambient,.hero-stage { position:absolute; inset:56px 0 0; }
.hero-ambient { z-index:1; pointer-events:none; overflow:hidden; }
.hero-gridlines { position:absolute; inset:0; opacity:.21; background-image:linear-gradient(rgba(255,255,255,.023) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size:100% 72px,96px 100%; mask-image:linear-gradient(to bottom,#000,transparent 88%); }
.hero-scan { position:absolute; inset:0; opacity:.23; background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(255,255,255,.018) 4px,transparent 5px); animation:scanDrift 12s linear infinite; }
.hero-dust { position:absolute; inset:-8%; opacity:.38; background-image:radial-gradient(circle,rgba(255,255,255,.25) 0 1px,transparent 1.2px),radial-gradient(circle,rgba(0,229,255,.20) 0 1px,transparent 1.2px); background-size:43px 47px,77px 83px; background-position:0 0,16px 22px; mask-image:radial-gradient(circle at 28% 32%,#000 0,transparent 36%),radial-gradient(circle at 69% 36%,#000 0,transparent 43%); animation:dustDrift 32s linear infinite; }
@keyframes scanDrift { to { transform:translateY(14px); } }
@keyframes dustDrift { to { transform:translate3d(18px,-11px,0); } }

.hero-index,.hero-timecode { position:absolute; top:76px; z-index:30; font:400 .78rem var(--font-mono); color:#aeb6bc; letter-spacing:.08em; }
.hero-index { left:1.9rem; }
.hero-index span { color:var(--accent); }
.hero-timecode { left:50%; transform:translateX(-50%); color:#626b73; font-size:.65rem; }

.hero-stage { z-index:10; }
.hero-left { position:absolute; z-index:30; left:clamp(5.5rem,8vw,10rem); top:clamp(6.8rem,11vh,8.8rem); width:min(27vw,430px); }
.hero-logo-wrap { position:relative; width:clamp(220px,18vw,355px); aspect-ratio:1; transform-origin:46% 50%; animation:logoBreath 8s ease-in-out infinite; }
.hero-logo-wrap::before { content:""; position:absolute; inset:10%; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.10),rgba(0,229,255,.025) 42%,transparent 70%); filter:blur(30px); opacity:.55; }
.hero-logo-metal { position:relative; z-index:2; width:100%; height:100%; display:block; object-fit:contain; mix-blend-mode:normal; filter:grayscale(1) contrast(1.12) brightness(1.08) drop-shadow(0 18px 28px rgba(0,0,0,.62)); }
.logo-dust { position:absolute; z-index:3; inset:-10%; opacity:.28; background:radial-gradient(circle at 28% 36%,rgba(255,255,255,.8) 0 1px,transparent 1.5px) 0 0/29px 31px; mask-image:radial-gradient(circle,#000 0 42%,transparent 70%); animation:logoDust 18s linear infinite; }
@keyframes logoBreath { 0%,100%{transform:scale(1)} 50%{transform:scale(1.012)} }
@keyframes logoDust { to{transform:translate3d(8px,-5px,0) rotate(.4deg)} }

.hero-left-copy { margin-top:clamp(.8rem,1.5vh,1.35rem); }
.hero-disciplines { display:flex; flex-wrap:wrap; gap:.42rem .55rem; color:#d0d5d9; font:400 .67rem var(--font-mono); }
.hero-disciplines i { color:var(--accent); font-style:normal; }
.hero-plus { margin:.75rem 0 .55rem; color:#7d868e; font:300 1.55rem/1 var(--font-display); }
.hero-left-copy p { max-width:46ch; margin:0; color:#7c868f; font:400 .68rem/1.45 var(--font-mono); }
.signal-in { display:grid; grid-template-columns:auto minmax(76px,1fr) auto; gap:.7rem; align-items:center; margin-top:1.25rem; color:#b8c0c6; font:400 .63rem var(--font-mono); }
.signal-in b { position:relative; height:1px; overflow:hidden; background:linear-gradient(90deg,var(--accent),rgba(255,255,255,.15),transparent); }
.signal-in b::after { content:""; position:absolute; inset:0; width:25%; background:linear-gradient(90deg,transparent,#fff,transparent); opacity:.35; animation:signalTravel 3.7s linear infinite; }
.signal-in em { color:#59626a; font-style:normal; }
@keyframes signalTravel { from{transform:translateX(-110%)} to{transform:translateX(410%)} }

.hero-center { position:absolute; z-index:34; left:42.5%; top:51%; width:min(38vw,690px); transform:translateY(-50%); }
.hero-slashes { width:fit-content; margin-bottom:.9rem; color:var(--accent); font:250 clamp(4rem,5vw,6.7rem)/.72 var(--font-display); letter-spacing:-.16em; text-shadow:0 0 12px rgba(0,229,255,.34),0 0 34px rgba(0,229,255,.13); animation:slashPulse 5.2s ease-in-out infinite; }
@keyframes slashPulse { 0%,100%{opacity:.9;filter:brightness(.96)} 48%{opacity:1;filter:brightness(1.2)} 51%{opacity:.82;transform:translateX(1px)} 53%{opacity:1;transform:none} }
.hero-wordmark { position:relative; width:fit-content; margin:0; color:#e7ebee; font:300 clamp(2.45rem,3.45vw,5rem)/.9 var(--font-display); letter-spacing:.21em; white-space:nowrap; text-shadow:0 0 22px rgba(255,255,255,.035); }
.hero-wordmark::before,.hero-wordmark::after { content:attr(data-text); position:absolute; inset:0; opacity:0; pointer-events:none; }
.hero.is-glitching .hero-wordmark::before { opacity:.34; color:var(--accent); clip-path:inset(20% 0 57% 0); transform:translateX(-4px); }
.hero.is-glitching .hero-wordmark::after { opacity:.25; color:var(--magenta); clip-path:inset(62% 0 13% 0); transform:translateX(5px); }
.hero-tagline { margin:.85rem 0 0; color:#737d85; font:400 .66rem var(--font-mono); letter-spacing:.075em; }

.hero-figure-wrap { position:absolute; z-index:18; top:clamp(4.5rem,8vh,7rem); right:clamp(-4rem,-2vw,-1rem); width:min(48vw,900px); height:calc(100% - 5rem); pointer-events:none; overflow:visible; opacity:.97; transform:translateY(calc(var(--hero-scroll) * -22px)); }
.hero-figure-wrap::after { content:""; position:absolute; inset:12% 0 3% 14%; z-index:-1; background:linear-gradient(90deg,transparent,rgba(255,255,255,.03),transparent),repeating-linear-gradient(to bottom,transparent 0 8px,rgba(0,229,255,.035) 9px,transparent 10px); filter:blur(.2px); opacity:.65; }
.hero-figure { position:absolute; right:1%; top:0; width:100%; height:auto; object-fit:contain; object-position:right top; filter:grayscale(1) contrast(1.20) brightness(.92); transform:scale(1.10); transform-origin:70% 25%; animation:figureDrift 13s ease-in-out infinite; }
@keyframes figureDrift { 0%,100%{transform:scale(1.10) translate3d(0,0,0)} 50%{transform:scale(1.115) translate3d(-7px,5px,0)} }
.figure-slice { position:absolute; z-index:5; left:22%; right:1%; height:2px; opacity:0; background:linear-gradient(90deg,transparent,rgba(0,229,255,.7),rgba(255,255,255,.22),transparent); }
.slice-a{top:29%}.slice-b{top:44%}.slice-c{top:58%}
.hero.is-glitching .figure-slice { opacity:.72; animation:sliceMove .18s steps(2,end) 2; }
.hero.is-glitching .hero-figure { filter:grayscale(1) contrast(1.30) brightness(.98); }
@keyframes sliceMove { 0%{transform:translateX(-20px) scaleX(.82)} 50%{transform:translateX(22px) scaleX(1.07)} 100%{transform:translateX(-5px) scaleX(.94)} }

.hero-system { position:absolute; z-index:30; top:clamp(8.7rem,15vh,11.5rem); right:clamp(3.2rem,6vw,7rem); display:grid; gap:.09rem; color:#777f86; font:400 .62rem var(--font-mono); }
.hero-system::before { content:"⌜"; position:absolute; left:-1.8rem; top:-1.5rem; color:#a2a9ae; font:1.7rem var(--font-mono); }
.hero-side-mark { position:absolute; z-index:30; right:1.2rem; top:18%; writing-mode:vertical-rl; transform:rotate(180deg); color:#59626a; font:400 .56rem var(--font-mono); letter-spacing:.08em; }
.signal-strength { position:absolute; z-index:31; right:clamp(2rem,4vw,4.6rem); bottom:clamp(2.3rem,5vh,4.2rem); width:150px; display:grid; grid-template-columns:1fr auto; gap:.2rem .55rem; color:#7d868e; font:400 .59rem var(--font-mono); }
.signal-strength strong { color:var(--accent); font-weight:400; font-size:.72rem; }
.signal-strength b { grid-column:1/-1; height:1px; background:linear-gradient(90deg,var(--accent),rgba(255,255,255,.13),transparent); transform-origin:left; animation:strength 5.2s ease-in-out infinite; }
@keyframes strength { 0%,100%{transform:scaleX(.76);opacity:.55} 50%{transform:scaleX(1);opacity:.92} }
.hero-bottom-line { position:absolute; z-index:35; left:1.6rem; right:1.6rem; bottom:0; height:1px; opacity:.56; background:linear-gradient(90deg,var(--magenta),var(--line) 12%,var(--line) 88%,var(--accent)); }

/* Existing sections: keep data/back-end intact but harmonize the art direction. */
section:not(.hero) { background:#050810; }
#work { padding-top:4rem; }
.section-head { border-bottom:1px solid var(--line); padding-bottom:1.2rem; }
.eyebrow,.card-body .idx { color:var(--accent); }
.section-head h2 { font-family:var(--font-display); font-weight:300; letter-spacing:.02em; }
.grid { gap:1px; background:var(--line); }
.card { background:#060a11; border:0; }
.card-media { aspect-ratio:16/10; }
.card-media img { filter:grayscale(1) contrast(1.1) brightness(.72); transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .5s ease; }
.card:hover .card-media img { transform:scale(1.025); filter:grayscale(.45) contrast(1.15) brightness(.86); }
.card-media::after { content:"PLAY"; top:auto; right:auto; bottom:1rem; left:1rem; width:auto; height:auto; padding:.3rem .5rem; color:var(--accent); border:1px solid rgba(0,229,255,.32); background:rgba(5,8,16,.55); font:400 .64rem var(--font-mono); letter-spacing:.08em; opacity:.8; }
footer { border-top:1px solid var(--line); }

@media (max-width:1180px) {
  .hero-left { left:3.3rem; width:31vw; }
  .hero-logo-wrap { width:clamp(210px,22vw,315px); }
  .hero-center { left:39%; width:46vw; }
  .hero-figure-wrap { width:56vw; right:-9%; opacity:.88; }
  .hero-system { right:2rem; }
}
@media (max-width:820px) {
  .site-header { grid-template-columns:1fr auto; }
  .site-header nav { display:none; }
  .hero { height:auto; min-height:930px; }
  .hero-timecode { display:none; }
  .hero-left { left:1.3rem; top:6.8rem; width:74vw; }
  .hero-logo-wrap { width:min(54vw,290px); }
  .hero-left-copy { margin-top:.25rem; }
  .hero-center { left:1.3rem; top:59%; width:92vw; transform:none; }
  .hero-slashes { font-size:4.4rem; }
  .hero-wordmark { font-size:clamp(2.3rem,10vw,4rem); letter-spacing:.11em; white-space:normal; }
  .hero-figure-wrap { top:9.4rem; right:-24%; width:88vw; height:53vh; opacity:.52; }
  .hero-system,.hero-side-mark { display:none; }
  .signal-strength { right:1.2rem; bottom:1.35rem; }
}
@media (max-width:520px) {
  .site-header { padding:0 1.15rem; }
  .hero-index { left:1.15rem; }
  .hero-left { width:88vw; }
  .hero-logo-wrap { width:min(62vw,270px); }
  .hero-left-copy p { display:none; }
  .hero-center { top:56%; }
  .hero-figure-wrap { right:-42%; width:108vw; opacity:.42; }
  .signal-in { margin-top:.8rem; }
}
@media (prefers-reduced-motion:reduce) {
  .hero *,.hero *::before,.hero *::after { animation:none!important; transition:none!important; }
  .hero-depth { transform:none!important; }
}
/* Parallax variables are set by script.js, keeping base transforms intact. */
.hero-left,.hero-system { transform:translate3d(var(--px,0px),var(--py,0px),0); }
.hero-center { transform:translate3d(var(--px,0px),var(--py,0px),0) translateY(-50%); }
.hero-figure-wrap { transform:translate3d(var(--px,0px),calc(var(--py,0px) + (var(--hero-scroll) * -22px)),0); }
@media (max-width:820px) { .hero-center { transform:translate3d(var(--px,0px),var(--py,0px),0); } }


/* ============================================================
   RBL//CØRE V4 — DESKTOP COMPOSITION LOCK
   Faithful to the approved 16:9 editorial reference.
   ============================================================ */
.hero-signal-field{
  position:absolute; inset:0; opacity:.30; pointer-events:none;
  background:
    repeating-linear-gradient(180deg, transparent 0 18px, rgba(0,229,255,.025) 19px, transparent 20px),
    repeating-linear-gradient(90deg, transparent 0 145px, rgba(255,255,255,.018) 146px, transparent 147px);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.92),rgba(0,0,0,.28) 48%,rgba(0,0,0,.84));
}
.hero-signal-field::before,.hero-signal-field::after{
  content:""; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent 3%,rgba(0,229,255,.5) 22%,transparent 49%,rgba(204,0,255,.15) 72%,transparent 94%);
  filter:blur(.25px);
}
.hero-signal-field::before{top:30%; animation:signalLineA 8.6s steps(1,end) infinite}
.hero-signal-field::after{top:65%; opacity:.45; animation:signalLineB 11.2s steps(1,end) infinite}
@keyframes signalLineA{0%,93%,100%{transform:translateX(0);opacity:.18}94%{transform:translateX(18px);opacity:.8}95%{transform:translateX(-7px);opacity:.28}}
@keyframes signalLineB{0%,88%,100%{transform:translateX(0)}89%{transform:translateX(-22px)}90%{transform:translateX(8px)}}

@media (min-width:1181px){
  .hero{
    min-height:560px !important;
    height:58vh !important;
    max-height:660px;
    padding-top:56px;
    background:
      radial-gradient(ellipse at 68% 42%,rgba(32,41,50,.18),transparent 36%),
      radial-gradient(ellipse at 22% 33%,rgba(255,255,255,.028),transparent 26%),
      linear-gradient(180deg,#04070d 0%,#050810 100%);
  }
  .hero-ambient,.hero-stage{inset:56px 0 0}
  .hero-index{top:74px;left:clamp(1.9rem,2vw,2.5rem)}
  .hero-timecode{top:74px}

  .hero-gridlines{opacity:.12;background-size:100% 58px,128px 100%}
  .hero-scan{opacity:.14}
  .hero-dust{
    opacity:.58;
    background-size:31px 37px,69px 79px;
    mask-image:radial-gradient(ellipse at 23% 28%,#000 0 10%,transparent 34%),radial-gradient(ellipse at 67% 40%,#000 0 15%,transparent 45%);
  }

  .hero-left{
    left:clamp(2rem,3.5vw,4.25rem) !important;
    top:clamp(3.1rem,5.4vh,4.5rem) !important;
    width:min(29vw,500px) !important;
    transform:none !important;
  }
  .hero-logo-wrap{
    width:clamp(200px,14.6vw,286px) !important;
    margin-left:clamp(6rem,13vw,14rem);
    animation:logoBreath 10s ease-in-out infinite;
  }
  .hero-logo-wrap::before{inset:3%;filter:blur(36px);opacity:.72}
  .logo-dust::before{
    content:"";position:absolute;inset:-20% -45% -20% -30%;z-index:1;pointer-events:none;
    background-image:radial-gradient(circle,rgba(255,255,255,.62) 0 1px,transparent 1.4px),radial-gradient(circle,rgba(0,229,255,.32) 0 1px,transparent 1.4px);
    background-size:17px 23px,31px 37px;
    opacity:.26;mask-image:radial-gradient(circle at 45% 45%,#000,transparent 68%);
    animation:logoDustMove 18s linear infinite;
  }
  @keyframes logoDustMove{to{transform:translate3d(11px,-8px,0)}}

  .hero-left-copy{margin-top:.55rem !important}
  .hero-disciplines{font-size:.62rem !important;letter-spacing:.045em}
  .hero-left-copy p{max-width:62ch !important;font-size:.62rem !important;line-height:1.45 !important;color:#747e87 !important}
  .hero-plus{margin:.45rem 0 .42rem !important}
  .signal-in{margin-top:1rem !important;max-width:440px}

  .hero-center{
    left:42.2% !important;
    top:55% !important;
    width:min(34vw,590px) !important;
    transform:translateY(-50%) !important;
  }
  .hero-slashes{
    display:flex !important;align-items:center;gap:.32rem;
    margin:0 0 .72rem clamp(4.8rem,7vw,7.5rem) !important;
    color:var(--accent);font-size:clamp(3.7rem,4.6vw,5.5rem) !important;
    line-height:.68 !important;letter-spacing:0 !important;
    filter:drop-shadow(0 0 8px rgba(0,229,255,.33));
  }
  .hero-slashes span{display:block;transform:skewX(-10deg)}
  .hero-wordmark{
    font-size:clamp(2.05rem,2.55vw,3.45rem) !important;
    font-weight:280 !important;
    letter-spacing:.22em !important;
    line-height:.92 !important;
    white-space:nowrap !important;
  }
  .hero-tagline{
    margin-top:.58rem !important;
    font-size:.58rem !important;
    letter-spacing:.075em !important;
    color:#6f7981 !important;
  }

  .hero-figure-wrap{
    z-index:16 !important;
    top:0 !important;
    right:-1.5vw !important;
    width:min(49vw,940px) !important;
    height:100% !important;
    opacity:.90 !important;
    transform:none !important;
    overflow:hidden !important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.26) 8%,#000 22%,#000 83%,rgba(0,0,0,.55) 95%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 8%,#000 90%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.26) 8%,#000 22%,#000 83%,rgba(0,0,0,.55) 95%,transparent 100%);
  }
  .hero-figure-wrap::before{
    content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
    background:repeating-linear-gradient(180deg,transparent 0 11px,rgba(0,229,255,.028) 12px,transparent 13px),linear-gradient(90deg,transparent 10%,rgba(5,8,16,.08) 48%,transparent 78%);
    mix-blend-mode:screen;opacity:.55;
  }
  .hero-figure-wrap::after{
    inset:10% 0 1% 5% !important;opacity:.45 !important;
  }
  .hero-figure{
    right:-1% !important;top:-4% !important;width:100% !important;height:108% !important;
    object-fit:cover !important;object-position:center center !important;
    transform:none !important;animation:none !important;
    mix-blend-mode:screen;
    filter:grayscale(1) contrast(1.34) brightness(.73) !important;
    opacity:.96;
  }

  .hero-system{
    top:clamp(4rem,7vh,5.2rem) !important;
    right:clamp(3.4rem,5.5vw,6.2rem) !important;
    transform:none !important;
    color:#737d85 !important;
    font-size:.57rem !important;
  }
  .hero-side-mark{top:15% !important;color:#647079 !important}
  .signal-strength{right:clamp(2.4rem,3.4vw,4rem) !important;bottom:1.55rem !important}
  .hero-bottom-line{left:1.6rem;right:1.6rem}

  /* Keep the first content band visible in the initial desktop viewport, as in the approved mockup. */
  #work{padding-top:1rem !important}
  #work .section-head{padding:.15rem 1.8rem .65rem !important;margin-bottom:0 !important}
  #work .section-head h2{display:none}
  #work .section-count{font-size:.58rem}
  #work .grid{margin-top:0}
}


/* ============================================================
   RBL//CØRE V4.1 — SIGNAL FOCUS
   Logo = static / anchored.
   Figure = controlled digital disturbance.
   ============================================================ */

/* LEFT EMBLEM: no motion, no pulsing, no animated dust, no halo effect. */
.hero-left {
  transform: none !important;
}
.hero-logo-wrap {
  animation: none !important;
  transform: none !important;
}
.hero-logo-wrap::before {
  display: none !important;
}
.logo-dust,
.logo-dust::before,
.logo-dust::after {
  display: none !important;
  animation: none !important;
}
.hero-logo-metal {
  animation: none !important;
  transform: none !important;
  filter: grayscale(1) contrast(1.12) brightness(1.06)
          drop-shadow(0 14px 24px rgba(0,0,0,.48)) !important;
}

/* RIGHT FIGURE: stable base image. Motion only happens during SIGNAL events. */
.hero-figure-wrap {
  transform: none !important;
}
.hero-figure {
  animation: none !important;
  transform: none !important;
  will-change: filter, opacity;
}

/* Two ghost layers made from the same figure image.
   Invisible at rest, revealed only for very short glitch events. */
.hero-figure-wrap::before,
.hero-figure-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background-image: url("../img/hero-figure.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  mix-blend-mode: screen;
}

.hero-figure-wrap::before {
  filter: grayscale(1) contrast(1.45) brightness(.9)
          drop-shadow(-5px 0 0 rgba(0,229,255,.20));
  clip-path: polygon(
    0 16%, 100% 16%, 100% 24%, 0 24%,
    0 42%, 100% 42%, 100% 48%, 0 48%,
    0 67%, 100% 67%, 100% 73%, 0 73%
  );
}

.hero-figure-wrap::after {
  filter: grayscale(1) contrast(1.32) brightness(.72)
          drop-shadow(5px 0 0 rgba(204,0,255,.12));
  clip-path: polygon(
    0 28%, 100% 28%, 100% 33%, 0 33%,
    0 53%, 100% 53%, 100% 58%, 0 58%,
    0 79%, 100% 79%, 100% 83%, 0 83%
  );
}

/* Existing signal lines become brighter and more physical during the event. */
.figure-slice {
  height: 1px !important;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(0,229,255,.12) 14%,
      rgba(230,245,248,.92) 43%,
      rgba(0,229,255,.55) 62%,
      transparent 100%) !important;
  box-shadow:
    0 0 8px rgba(0,229,255,.18),
    18px 0 0 rgba(255,255,255,.08);
}

/* SIGNAL EVENT */
.hero.is-glitching .hero-figure-wrap::before {
  opacity: .48;
  animation: rblFigureTearA 180ms steps(2,end) 1;
}
.hero.is-glitching .hero-figure-wrap::after {
  opacity: .30;
  animation: rblFigureTearB 220ms steps(2,end) 1;
}
.hero.is-glitching .hero-figure {
  animation: rblFigureFlash 220ms steps(2,end) 1 !important;
}
.hero.is-glitching .figure-slice {
  opacity: .82 !important;
  animation: rblSliceBurst 210ms steps(3,end) 1 !important;
}

/* The title gets only a tiny response. The visual violence belongs to the figure. */
.hero.is-glitching .hero-wordmark::before {
  opacity: .16 !important;
  transform: translateX(-2px) !important;
}
.hero.is-glitching .hero-wordmark::after {
  opacity: .10 !important;
  transform: translateX(2px) !important;
}

@keyframes rblFigureTearA {
  0%   { transform: translate3d(-15px,0,0) scaleX(1.015); opacity:0; }
  18%  { transform: translate3d(11px,0,0) scaleX(.99); opacity:.56; }
  42%  { transform: translate3d(-7px,1px,0) scaleX(1.02); opacity:.35; }
  70%  { transform: translate3d(16px,-1px,0) scaleX(.985); opacity:.48; }
  100% { transform: translate3d(0,0,0); opacity:0; }
}
@keyframes rblFigureTearB {
  0%   { transform: translate3d(13px,0,0); opacity:0; }
  24%  { transform: translate3d(-9px,0,0); opacity:.34; }
  55%  { transform: translate3d(7px,-1px,0); opacity:.22; }
  82%  { transform: translate3d(-13px,0,0); opacity:.30; }
  100% { transform: translate3d(0,0,0); opacity:0; }
}
@keyframes rblFigureFlash {
  0%,100% { filter:grayscale(1) contrast(1.34) brightness(.73); opacity:.96; }
  20%     { filter:grayscale(1) contrast(1.65) brightness(.90); opacity:.90; }
  38%     { filter:grayscale(1) contrast(1.18) brightness(.62); opacity:1; }
  54%     { filter:grayscale(1) contrast(1.72) brightness(.86); opacity:.93; }
  72%     { filter:grayscale(1) contrast(1.30) brightness(.70); opacity:.98; }
}
@keyframes rblSliceBurst {
  0%   { transform:translateX(-36px) scaleX(.74); }
  35%  { transform:translateX(28px) scaleX(1.18); }
  68%  { transform:translateX(-12px) scaleX(.91); }
  100% { transform:translateX(4px) scaleX(1); opacity:0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero.is-glitching .hero-figure-wrap::before,
  .hero.is-glitching .hero-figure-wrap::after,
  .hero.is-glitching .hero-figure,
  .hero.is-glitching .figure-slice {
    animation: none !important;
  }
  .hero-figure-wrap::before,
  .hero-figure-wrap::after {
    display: none !important;
  }
}


/* ============================================================
   RBL//CØRE V4.2 — EMBLEM ENVIRONMENT
   Emblem stays perfectly static.
   Only the atmosphere around it is alive.
   ============================================================ */

.hero-logo-wrap {
  position: relative;
  overflow: visible;
  isolation: isolate;
}

/* Subtle metallic aura behind the emblem */
.hero-logo-wrap::before {
  content: "";
  display: block !important;
  position: absolute;
  inset: -18%;
  z-index: -2;
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 48%,
      rgba(235,245,248,.13) 0%,
      rgba(0,229,255,.055) 22%,
      rgba(255,255,255,.022) 44%,
      transparent 70%);
  filter: blur(14px);
  opacity: .72;
  animation: emblemAura 7.5s ease-in-out infinite;
}

/* Fine digital dust around logo, but never moving the logo itself */
.logo-dust {
  display: block !important;
  position: absolute;
  inset: -24%;
  z-index: -1;
  pointer-events: none;
  opacity: .52;
  animation: emblemDustDrift 11s linear infinite;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.85) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(0,229,255,.55) 0 1px, transparent 1.3px),
    radial-gradient(circle, rgba(255,255,255,.30) 0 .8px, transparent 1.2px);
  background-size: 31px 29px, 47px 43px, 61px 53px;
  background-position: 2px 4px, 13px 7px, 22px 19px;
  -webkit-mask-image: radial-gradient(circle at center, #000 0 48%, transparent 76%);
  mask-image: radial-gradient(circle at center, #000 0 48%, transparent 76%);
}

.logo-dust::before,
.logo-dust::after {
  content: "";
  display: block !important;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.logo-dust::before {
  opacity: .30;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0 21px,
      rgba(0,229,255,.16) 22px,
      transparent 23px 43px
    );
  clip-path: polygon(9% 12%, 92% 7%, 84% 22%, 14% 29%, 20% 46%, 91% 39%, 76% 55%, 7% 62%, 17% 78%, 88% 71%, 79% 88%, 12% 94%);
  animation: emblemSignalLines 5.8s steps(2,end) infinite;
}

.logo-dust::after {
  opacity: .28;
  background:
    linear-gradient(90deg,
      transparent 0 10%,
      rgba(255,255,255,.18) 10.2% 10.6%,
      transparent 10.8% 35%,
      rgba(0,229,255,.20) 35.2% 35.6%,
      transparent 35.8% 72%,
      rgba(255,255,255,.13) 72.2% 72.6%,
      transparent 72.8% 100%);
  animation: emblemFragmentDrift 8.4s ease-in-out infinite;
}

/* Tiny occasional brightness change around the emblem only.
   The emblem itself remains static. */
.hero-logo-metal {
  animation: none !important;
  transform: none !important;
}

@keyframes emblemAura {
  0%, 100% { opacity: .50; filter: blur(14px); }
  50%      { opacity: .78; filter: blur(17px); }
}

@keyframes emblemDustDrift {
  0%   { background-position: 2px 4px, 13px 7px, 22px 19px; opacity:.42; }
  50%  { background-position: 11px -4px, 5px 14px, 27px 11px; opacity:.60; }
  100% { background-position: 20px -12px, -3px 21px, 32px 3px; opacity:.42; }
}

@keyframes emblemSignalLines {
  0%, 84%, 100% { transform: translateX(0); opacity:.16; }
  86% { transform: translateX(-7px); opacity:.42; }
  89% { transform: translateX(10px); opacity:.27; }
  92% { transform: translateX(-3px); opacity:.36; }
}

@keyframes emblemFragmentDrift {
  0%,100% { transform: translate3d(0,0,0); opacity:.17; }
  45%     { transform: translate3d(4px,-2px,0); opacity:.32; }
  55%     { transform: translate3d(-3px,1px,0); opacity:.24; }
}

/* Keep decorative motion subtle on smaller screens */
@media (max-width: 900px) {
  .hero-logo-wrap::before { opacity:.46; }
  .logo-dust { opacity:.30; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-logo-wrap::before,
  .logo-dust,
  .logo-dust::before,
  .logo-dust::after {
    animation: none !important;
  }
}


/* ============================================================
   RBL//CØRE V4.3 — EMBLEM DUST + MICRO GLITCH
   No aura. No logo movement.
   ============================================================ */

/* Remove the previous halo/aura */
.hero-logo-wrap::before {
  display: none !important;
  content: none !important;
}

/* Static emblem */
.hero-logo-wrap,
.hero-logo-metal {
  animation: none !important;
  transform: none !important;
}

/* Dry digital dust / mineral particles around the emblem */
.logo-dust {
  display: block !important;
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  opacity: .68;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.86) 0 0.8px, transparent 1.2px),
    radial-gradient(circle, rgba(210,220,225,.58) 0 0.65px, transparent 1px),
    radial-gradient(circle, rgba(0,229,255,.30) 0 0.55px, transparent .95px);
  background-size:
    18px 19px,
    29px 31px,
    41px 37px;
  background-position:
    4px 7px,
    13px 11px,
    21px 5px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 38%, #000 47%, #000 68%, transparent 86%);
  mask-image: radial-gradient(circle at 50% 50%, transparent 0 38%, #000 47%, #000 68%, transparent 86%);
  animation: emblemDustFloat 9s linear infinite;
}

/* Sparse dry fragments */
.logo-dust::before {
  content: "";
  display: block !important;
  position: absolute;
  inset: 0;
  opacity: .34;
  background:
    linear-gradient(90deg,
      transparent 0 7%,
      rgba(235,240,242,.44) 7.1% 7.45%,
      transparent 7.55% 18%,
      rgba(0,229,255,.18) 18.2% 18.5%,
      transparent 18.6% 33%,
      rgba(235,240,242,.35) 33.2% 33.5%,
      transparent 33.6% 61%,
      rgba(255,255,255,.28) 61.1% 61.45%,
      transparent 61.6% 79%,
      rgba(0,229,255,.13) 79.1% 79.45%,
      transparent 79.6% 100%);
  clip-path: polygon(4% 14%, 98% 7%, 95% 23%, 8% 31%, 14% 43%, 92% 40%, 86% 58%, 3% 64%, 9% 82%, 95% 75%, 89% 92%, 7% 96%);
  animation: emblemFragmentDriftDry 7.5s ease-in-out infinite;
}

/* Rare horizontal micro-glitch around the emblem only */
.logo-dust::after {
  content: "";
  display: block !important;
  position: absolute;
  inset: 3% -10%;
  opacity: 0;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0 24px,
      rgba(255,255,255,.28) 25px,
      rgba(0,229,255,.14) 26px,
      transparent 27px 47px
    );
  clip-path: polygon(
    0 18%, 100% 18%, 100% 23%, 0 23%,
    0 47%, 100% 47%, 100% 51%, 0 51%,
    0 72%, 100% 72%, 100% 75%, 0 75%
  );
  animation: emblemMicroGlitch 6.8s steps(2,end) infinite;
}

@keyframes emblemDustFloat {
  0% {
    background-position: 4px 7px, 13px 11px, 21px 5px;
    opacity: .58;
  }
  50% {
    background-position: 8px 2px, 9px 15px, 25px 9px;
    opacity: .72;
  }
  100% {
    background-position: 12px -3px, 5px 19px, 29px 13px;
    opacity: .58;
  }
}

@keyframes emblemFragmentDriftDry {
  0%, 100% { transform: translate3d(0,0,0); opacity:.26; }
  50% { transform: translate3d(2px,-1px,0); opacity:.38; }
}

@keyframes emblemMicroGlitch {
  0%, 87%, 100% {
    opacity: 0;
    transform: translateX(0);
  }
  88% {
    opacity: .30;
    transform: translateX(-5px);
  }
  90% {
    opacity: .18;
    transform: translateX(7px);
  }
  92% {
    opacity: .34;
    transform: translateX(-2px);
  }
  94% {
    opacity: 0;
    transform: translateX(0);
  }
}

@media (max-width: 900px) {
  .logo-dust { opacity:.44; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-dust,
  .logo-dust::before,
  .logo-dust::after {
    animation: none !important;
  }
}


/* ============================================================
   RBL//CØRE V4.4 — ORGANIC EMBLEM DUST
   Reference: irregular mineral/digital debris, no visible grid.
   ============================================================ */

.hero-logo-wrap::before {
  display: none !important;
  content: none !important;
}

.hero-logo-wrap,
.hero-logo-metal {
  animation: none !important;
  transform: none !important;
}

/* Kill previous repeated dot-matrix look */
.logo-dust {
  display: block !important;
  position: absolute;
  inset: -28% -42% -26% -24%;
  z-index: -1;
  pointer-events: none;
  opacity: .92;
  background: none !important;
  background-image: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  animation: none !important;
  overflow: visible;
}

/* Irregular dry dust cloud.
   A single tiny particle is duplicated with non-repeating box-shadows,
   heavily biased to the right side like the approved reference. */
.logo-dust::before {
  content: "";
  display: block !important;
  position: absolute;
  left: 48%;
  top: 46%;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: rgba(242,246,248,.84);
  opacity: .78;
  box-shadow:
    -118px -94px 0 rgba(255,255,255,.24),
    -96px -71px 0 rgba(219,226,230,.36),
    -84px -35px 0 rgba(255,255,255,.18),
    -73px 48px 0 rgba(225,232,235,.30),
    -61px 83px 0 rgba(255,255,255,.16),
    -45px -112px 0 rgba(0,229,255,.12),
    -31px -79px 0 rgba(255,255,255,.32),
    -22px 101px 0 rgba(235,240,242,.22),
    -8px -121px 0 rgba(255,255,255,.28),
    6px -96px 0 rgba(207,216,220,.26),
    17px -64px 0 rgba(255,255,255,.42),
    24px -29px 0 rgba(0,229,255,.18),
    31px 16px 0 rgba(255,255,255,.24),
    39px 68px 0 rgba(225,232,235,.38),
    48px 104px 0 rgba(255,255,255,.20),
    58px -118px 0 rgba(255,255,255,.34),
    64px -82px 0 rgba(0,229,255,.13),
    72px -47px 0 rgba(245,248,249,.46),
    79px -11px 0 rgba(215,223,227,.24),
    86px 31px 0 rgba(255,255,255,.36),
    91px 74px 0 rgba(0,229,255,.14),
    97px 109px 0 rgba(255,255,255,.30),
    106px -106px 0 rgba(225,232,235,.42),
    112px -71px 0 rgba(255,255,255,.20),
    119px -38px 0 rgba(0,229,255,.17),
    125px -3px 0 rgba(255,255,255,.50),
    131px 39px 0 rgba(221,229,232,.30),
    138px 82px 0 rgba(255,255,255,.22),
    146px 116px 0 rgba(0,229,255,.12),
    153px -91px 0 rgba(255,255,255,.34),
    161px -54px 0 rgba(216,224,228,.30),
    169px -19px 0 rgba(255,255,255,.48),
    177px 14px 0 rgba(0,229,255,.18),
    185px 52px 0 rgba(255,255,255,.26),
    193px 91px 0 rgba(230,236,238,.40),
    202px -78px 0 rgba(255,255,255,.30),
    211px -44px 0 rgba(0,229,255,.13),
    219px -9px 0 rgba(255,255,255,.44),
    228px 27px 0 rgba(217,225,229,.24),
    237px 63px 0 rgba(255,255,255,.33),
    246px 102px 0 rgba(0,229,255,.14),
    258px -62px 0 rgba(255,255,255,.35),
    268px -31px 0 rgba(230,236,239,.25),
    277px 5px 0 rgba(255,255,255,.42),
    287px 41px 0 rgba(0,229,255,.16),
    298px 77px 0 rgba(255,255,255,.28),
    309px -47px 0 rgba(255,255,255,.26),
    321px -13px 0 rgba(220,228,231,.35),
    334px 22px 0 rgba(0,229,255,.12),
    347px 58px 0 rgba(255,255,255,.31),
    361px -28px 0 rgba(255,255,255,.24),
    376px 9px 0 rgba(228,234,237,.34);

  filter:
    drop-shadow(5px 3px 0 rgba(255,255,255,.08))
    drop-shadow(10px -4px 0 rgba(0,229,255,.06));
  animation: organicDustBreath 8.8s ease-in-out infinite;
}

/* Broken horizontal debris / digital scratches.
   Asymmetrical and sparse, concentrated to the right. */
.logo-dust::after {
  content: "";
  display: block !important;
  position: absolute;
  left: 26%;
  top: 12%;
  width: 118%;
  height: 82%;
  opacity: .42;
  background:
    linear-gradient(90deg, transparent 0 34%, rgba(230,236,239,.34) 34.3% 37.5%, transparent 38% 100%) 0 13% / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0 46%, rgba(0,229,255,.24) 46.2% 51%, transparent 51.4% 100%) 0 24% / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0 29%, rgba(255,255,255,.28) 29.2% 41%, transparent 41.4% 100%) 0 38% / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0 53%, rgba(225,232,235,.30) 53.2% 64%, transparent 64.5% 100%) 0 51% / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0 38%, rgba(0,229,255,.19) 38.2% 43%, transparent 43.4% 100%) 0 67% / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0 61%, rgba(255,255,255,.25) 61.2% 72%, transparent 72.5% 100%) 0 78% / 100% 1px no-repeat;
  filter: blur(.15px);
  animation: organicMicroTear 7.2s steps(2,end) infinite;
}

@keyframes organicDustBreath {
  0%,100% {
    opacity: .58;
    transform: translate3d(0,0,0);
  }
  48% {
    opacity: .82;
    transform: translate3d(1px,-1px,0);
  }
  52% {
    opacity: .68;
    transform: translate3d(-1px,0,0);
  }
}

@keyframes organicMicroTear {
  0%, 83%, 100% {
    opacity: .24;
    transform: translateX(0);
  }
  85% {
    opacity: .62;
    transform: translateX(-7px);
  }
  87% {
    opacity: .34;
    transform: translateX(11px);
  }
  89% {
    opacity: .54;
    transform: translateX(-3px);
  }
  91% {
    opacity: .28;
    transform: translateX(0);
  }
}

/* Smaller screens: keep the dust but lower density visually */
@media (max-width: 900px) {
  .logo-dust {
    opacity: .62;
    transform: scale(.92);
    transform-origin: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-dust::before,
  .logo-dust::after {
    animation: none !important;
  }
}


/* ============================================================
   RBL//CØRE V4.5 — WEBP EMBLEM
   The emblem artwork now contains its own fragmentation/debris.
   No artificial CSS dust around the logo.
   ============================================================ */

.hero-logo-wrap {
  width: clamp(330px, 24vw, 470px);
  aspect-ratio: 1 / 1;
  overflow: visible;
  animation: none !important;
  transform: none !important;
}

/* Disable all legacy generated atmosphere around the old PNG emblem. */
.hero-logo-wrap::before,
.hero-logo-wrap::after,
.logo-dust,
.logo-dust::before,
.logo-dust::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* Preserve the cyan/red micro-glitch baked into the WebP.
   Screen blend removes the black artwork background into the dark hero. */
.hero-logo-metal {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  animation: none !important;
  transform: none !important;
  filter: contrast(1.06) brightness(1.03)
          drop-shadow(0 16px 26px rgba(0,0,0,.42)) !important;
  mix-blend-mode: screen !important;
  opacity: .98;
}

/* Keep the emblem visually generous on desktop while avoiding overflow on mobile. */
@media (max-width: 1180px) {
  .hero-logo-wrap {
    width: clamp(300px, 32vw, 410px);
  }
}

@media (max-width: 760px) {
  .hero-logo-wrap {
    width: min(78vw, 390px);
  }
}


/* ============================================================
   RBL//CØRE V4.6 — EMBLEM SCALE / Ø SIGNAL / FIGURE GLITCH
   ============================================================ */

/* Larger emblem, same anchor point */
@media (min-width: 1181px) {
  .hero-logo-wrap {
    width: clamp(390px, 28vw, 545px) !important;
  }
}

/* The central Ø becomes a SIGNAL marker, not a decorative neon icon. */
.hero-signal-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 .82rem 0;
  font-family: 'Bricolage Grotesque', 'Exo 2', sans-serif;
  font-size: clamp(4.4rem, 5.8vw, 7.2rem);
  font-weight: 420;
  line-height: .78;
  letter-spacing: 0;
  color: #00e5ff;
  text-shadow:
    0 0 5px rgba(0,229,255,.68),
    0 0 18px rgba(0,229,255,.22);
  opacity: .92;
  transform: translateZ(0);
  animation: signalGlyphIdle 6.2s steps(1,end) infinite;
}

@keyframes signalGlyphIdle {
  0%, 91%, 100% { opacity:.90; filter:none; transform:translateX(0); }
  92% { opacity:.58; filter:brightness(1.45); transform:translateX(-2px); }
  93% { opacity:1; filter:brightness(1.15); transform:translateX(2px); }
  94% { opacity:.76; filter:none; transform:translateX(0); }
}

/* Right figure remains anchored. The disturbance happens inside the signal event. */
.hero-figure-wrap,
.hero-figure {
  transform: none !important;
}

/* More fragmented duplicate bands during the existing SIGNAL event */
.hero-figure-wrap::before {
  filter: grayscale(1) contrast(1.68) brightness(.96)
          drop-shadow(-8px 0 0 rgba(0,229,255,.28)) !important;
  clip-path: polygon(
    0 8%,100% 8%,100% 14%,0 14%,
    0 22%,100% 22%,100% 27%,0 27%,
    0 36%,100% 36%,100% 42%,0 42%,
    0 51%,100% 51%,100% 56%,0 56%,
    0 64%,100% 64%,100% 70%,0 70%,
    0 79%,100% 79%,100% 84%,0 84%
  ) !important;
}

.hero-figure-wrap::after {
  filter: grayscale(1) contrast(1.52) brightness(.77)
          drop-shadow(8px 0 0 rgba(204,0,255,.17)) !important;
  clip-path: polygon(
    0 16%,100% 16%,100% 20%,0 20%,
    0 31%,100% 31%,100% 35%,0 35%,
    0 45%,100% 45%,100% 49%,0 49%,
    0 59%,100% 59%,100% 63%,0 63%,
    0 72%,100% 72%,100% 76%,0 76%,
    0 88%,100% 88%,100% 92%,0 92%
  ) !important;
}

.hero.is-glitching .hero-figure-wrap::before {
  opacity:.68 !important;
  animation:rblFigureTearA46 240ms steps(3,end) 1 !important;
}
.hero.is-glitching .hero-figure-wrap::after {
  opacity:.42 !important;
  animation:rblFigureTearB46 270ms steps(3,end) 1 !important;
}
.hero.is-glitching .hero-figure {
  animation:rblFigureFlash46 260ms steps(3,end) 1 !important;
}
.hero.is-glitching .figure-slice {
  opacity:.96 !important;
  box-shadow:
    0 0 9px rgba(0,229,255,.30),
    28px 0 0 rgba(255,255,255,.10),
    -18px 0 0 rgba(204,0,255,.08) !important;
}

@keyframes rblFigureTearA46 {
  0%{transform:translate3d(-24px,0,0) scaleX(1.035);opacity:0}
  18%{transform:translate3d(18px,0,0) scaleX(.975);opacity:.72}
  39%{transform:translate3d(-13px,1px,0) scaleX(1.045);opacity:.46}
  61%{transform:translate3d(27px,-1px,0) scaleX(.965);opacity:.63}
  80%{transform:translate3d(-8px,0,0) scaleX(1.015);opacity:.39}
  100%{transform:translate3d(0,0,0);opacity:0}
}
@keyframes rblFigureTearB46 {
  0%{transform:translate3d(18px,0,0);opacity:0}
  22%{transform:translate3d(-19px,0,0);opacity:.48}
  46%{transform:translate3d(12px,-1px,0);opacity:.30}
  67%{transform:translate3d(-24px,1px,0);opacity:.42}
  84%{transform:translate3d(9px,0,0);opacity:.25}
  100%{transform:translate3d(0,0,0);opacity:0}
}
@keyframes rblFigureFlash46 {
  0%,100%{filter:grayscale(1) contrast(1.34) brightness(.73);opacity:.96}
  17%{filter:grayscale(1) contrast(1.92) brightness(1.02);opacity:.87}
  34%{filter:grayscale(1) contrast(1.16) brightness(.56);opacity:1}
  52%{filter:grayscale(1) contrast(2.05) brightness(.95);opacity:.90}
  71%{filter:grayscale(1) contrast(1.28) brightness(.66);opacity:.98}
}

/* The Ø reacts slightly when SIGNAL fires, but does not become a second focal point. */
.hero.is-glitching .hero-signal-glyph {
  animation:signalGlyphHit46 230ms steps(3,end) 1 !important;
}
@keyframes signalGlyphHit46 {
  0%{transform:translateX(0);opacity:.92}
  28%{transform:translateX(-4px);opacity:.56;text-shadow:6px 0 rgba(204,0,255,.16),-6px 0 rgba(0,229,255,.38)}
  57%{transform:translateX(3px);opacity:1}
  100%{transform:translateX(0);opacity:.92}
}

@media (max-width: 760px) {
  .hero-signal-glyph { font-size:clamp(3.7rem,18vw,5.3rem); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-signal-glyph { animation:none !important; }
}


/* ============================================================
   RBL//CØRE V4.7 — POSITION TUNING
   Keep all current glitch effects. Adjust placement only.
   ============================================================ */

@media (min-width: 1181px) {
  /* Move emblem further left without changing its scale/effects */
  .hero-left {
    left: clamp(1.2rem, 2.2vw, 2.6rem) !important;
  }

  /* Recenter the central branding block slightly */
  .hero-center {
    left: 45.5% !important;
    top: 48.2% !important;
  }

  /* Raise the Ø independently a little more */
  .hero-slashes {
    transform: translateY(-18px) !important;
  }
}


/* ============================================================
   RBL//CØRE V4.8 — CENTERED Ø + WORDMARK
   Placement only. Existing glitch effects preserved.
   ============================================================ */

@media (min-width: 1181px) {
  /* Push emblem further left */
  .hero-left {
    left: clamp(.4rem, 1.0vw, 1.2rem) !important;
  }

  /* Recenter the whole title block */
  .hero-center {
    left: 50% !important;
    top: 49.5% !important;
    transform: translate(-50%, -50%) !important;
    width: min(34vw, 620px) !important;
    text-align: center !important;
  }

  /* Ø centered exactly over RBL//CØRE */
  .hero-slashes {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 auto .6rem !important;
    transform: translateY(-14px) !important;
    text-align: center !important;
  }

  .hero-wordmark,
  .hero-tagline {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* ============================================================
   RBL//CØRE V4.9 — EMBLEM LEFT SHIFT
   Move emblem further left only.
   ============================================================ */

@media (min-width: 1181px) {
  .hero-left {
    left: -4.2cm !important;
  }
}


/* ============================================================
   RBL//CØRE V5.0 — HERO FINISHING PASS
   Composition locked. No logo / Ø / wordmark repositioning here.
   Focus: figure signal, ambient micro-data, metadata, scene transition.
   ============================================================ */

/* ------------------------------------------------------------
   1) AMBIENT MICRO-SIGNALS
   Sparse, irregular, low-energy data traces across the hero.
   ------------------------------------------------------------ */
.hero-ambient::before,
.hero-ambient::after {
  content:"";
  position:absolute;
  z-index:6;
  pointer-events:none;
  opacity:.32;
  mix-blend-mode:screen;
}

.hero-ambient::before {
  left:7%;
  top:23%;
  width:58%;
  height:49%;
  background:
    linear-gradient(90deg, transparent 0 7%, rgba(255,255,255,.10) 7.2% 10%, transparent 10.3% 37%, rgba(0,229,255,.18) 37.2% 42%, transparent 42.4% 100%) 0 11%/100% 1px no-repeat,
    linear-gradient(90deg, transparent 0 24%, rgba(0,229,255,.13) 24.2% 29%, transparent 29.3% 63%, rgba(255,255,255,.08) 63.2% 69%, transparent 69.3% 100%) 0 33%/100% 1px no-repeat,
    linear-gradient(90deg, transparent 0 13%, rgba(204,0,255,.08) 13.2% 16%, transparent 16.3% 52%, rgba(255,255,255,.12) 52.2% 58%, transparent 58.3% 100%) 0 62%/100% 1px no-repeat,
    linear-gradient(90deg, transparent 0 49%, rgba(0,229,255,.14) 49.2% 55%, transparent 55.3% 81%, rgba(255,255,255,.07) 81.2% 85%, transparent 85.3% 100%) 0 83%/100% 1px no-repeat;
  animation: ambientTraceDrift 13s steps(2,end) infinite;
}

.hero-ambient::after {
  right:4%;
  top:16%;
  width:38%;
  height:61%;
  background:
    repeating-linear-gradient(180deg,
      transparent 0 31px,
      rgba(255,255,255,.022) 32px,
      transparent 33px 61px);
  clip-path: polygon(22% 0,100% 0,100% 17%,45% 17%,45% 28%,92% 28%,92% 39%,18% 39%,18% 54%,100% 54%,100% 68%,38% 68%,38% 82%,84% 82%,84% 100%,0 100%,0 0);
  animation: ambientScanFault 9.6s steps(1,end) infinite;
}

@keyframes ambientTraceDrift {
  0%,84%,100% { transform:translate3d(0,0,0); opacity:.23; }
  86% { transform:translate3d(-5px,0,0); opacity:.42; }
  88% { transform:translate3d(8px,0,0); opacity:.28; }
  90% { transform:translate3d(-2px,0,0); opacity:.38; }
}
@keyframes ambientScanFault {
  0%,90%,100% { transform:translateX(0); opacity:.13; }
  91% { transform:translateX(7px); opacity:.30; }
  93% { transform:translateX(-4px); opacity:.18; }
  95% { transform:translateX(2px); opacity:.26; }
}

/* ------------------------------------------------------------
   2) RIGHT FIGURE — RICHER SIGNAL EVENT
   Base figure stays anchored. Disturbance is brief and layered.
   ------------------------------------------------------------ */
.hero-figure-wrap {
  --figure-glitch-x: 0px;
}

.hero.is-glitching .hero-figure-wrap::before {
  opacity:.76 !important;
  animation:rblFigureTearV5A 260ms steps(4,end) 1 !important;
}

.hero.is-glitching .hero-figure-wrap::after {
  opacity:.50 !important;
  animation:rblFigureTearV5B 290ms steps(4,end) 1 !important;
}

.hero.is-glitching .hero-figure {
  animation:rblFigureFlashV5 280ms steps(4,end) 1 !important;
}

/* Make each existing slice behave differently instead of all firing identically. */
.hero.is-glitching .slice-a {
  opacity:.98 !important;
  background:linear-gradient(90deg,
    transparent 0 15%,
    rgba(255,255,255,.82) 27%,
    rgba(0,229,255,.72) 44%,
    transparent 71%) !important;
  animation:rblSliceA5 230ms steps(4,end) 1 !important;
}
.hero.is-glitching .slice-b {
  opacity:.72 !important;
  background:linear-gradient(90deg,
    transparent 0 24%,
    rgba(204,0,255,.17) 34%,
    rgba(255,255,255,.68) 48%,
    rgba(0,229,255,.40) 61%,
    transparent 81%) !important;
  animation:rblSliceB5 270ms steps(3,end) 1 !important;
}
.hero.is-glitching .slice-c {
  opacity:.88 !important;
  background:linear-gradient(90deg,
    transparent 0 8%,
    rgba(0,229,255,.58) 31%,
    rgba(255,255,255,.76) 53%,
    transparent 75%) !important;
  animation:rblSliceC5 205ms steps(3,end) 1 !important;
}

@keyframes rblFigureTearV5A {
  0%   { transform:translate3d(-28px,0,0) scaleX(1.045); opacity:0; }
  17%  { transform:translate3d(21px,-1px,0) scaleX(.965); opacity:.78; }
  36%  { transform:translate3d(-16px,1px,0) scaleX(1.055); opacity:.49; }
  55%  { transform:translate3d(31px,0,0) scaleX(.958); opacity:.67; }
  73%  { transform:translate3d(-10px,-1px,0) scaleX(1.022); opacity:.42; }
  89%  { transform:translate3d(8px,0,0) scaleX(.992); opacity:.28; }
  100% { transform:translate3d(0,0,0); opacity:0; }
}

@keyframes rblFigureTearV5B {
  0%   { transform:translate3d(22px,0,0); opacity:0; }
  18%  { transform:translate3d(-23px,1px,0); opacity:.54; }
  39%  { transform:translate3d(15px,-1px,0); opacity:.34; }
  61%  { transform:translate3d(-29px,0,0); opacity:.47; }
  78%  { transform:translate3d(12px,1px,0); opacity:.29; }
  100% { transform:translate3d(0,0,0); opacity:0; }
}

@keyframes rblFigureFlashV5 {
  0%,100% { filter:grayscale(1) contrast(1.34) brightness(.73); opacity:.96; }
  14% { filter:grayscale(1) contrast(2.05) brightness(1.04); opacity:.86; }
  29% { filter:grayscale(1) contrast(1.12) brightness(.53); opacity:1; }
  47% { filter:grayscale(1) contrast(2.18) brightness(.97); opacity:.88; }
  64% { filter:grayscale(1) contrast(1.26) brightness(.64); opacity:.99; }
  81% { filter:grayscale(1) contrast(1.72) brightness(.82); opacity:.93; }
}

@keyframes rblSliceA5 {
  0%{transform:translateX(-48px) scaleX(.72)}
  38%{transform:translateX(34px) scaleX(1.20)}
  71%{transform:translateX(-14px) scaleX(.94)}
  100%{transform:translateX(5px) scaleX(1);opacity:0}
}
@keyframes rblSliceB5 {
  0%{transform:translateX(38px) scaleX(.81)}
  42%{transform:translateX(-29px) scaleX(1.11)}
  78%{transform:translateX(17px) scaleX(.90)}
  100%{transform:none;opacity:0}
}
@keyframes rblSliceC5 {
  0%{transform:translateX(-31px) scaleX(.78)}
  46%{transform:translateX(25px) scaleX(1.16)}
  82%{transform:translateX(-8px) scaleX(.95)}
  100%{transform:none;opacity:0}
}

/* Rare stronger disturbance. JS adds .is-signal-burst occasionally. */
.hero.is-signal-burst .hero-figure-wrap::before {
  opacity:.90 !important;
  animation:rblBurstGhostA 360ms steps(5,end) 1 !important;
}
.hero.is-signal-burst .hero-figure-wrap::after {
  opacity:.62 !important;
  animation:rblBurstGhostB 390ms steps(5,end) 1 !important;
}
.hero.is-signal-burst .hero-figure {
  animation:rblBurstBase 380ms steps(5,end) 1 !important;
}
.hero.is-signal-burst .figure-slice {
  opacity:1 !important;
  height:1px !important;
  filter:brightness(1.35);
}

@keyframes rblBurstGhostA {
  0%{transform:translateX(-38px) scaleX(1.06);opacity:0}
  16%{transform:translateX(29px) scaleX(.95);opacity:.92}
  33%{transform:translateX(-19px) scaleX(1.08);opacity:.54}
  51%{transform:translateX(42px) scaleX(.94);opacity:.82}
  69%{transform:translateX(-14px) scaleX(1.035);opacity:.48}
  84%{transform:translateX(17px) scaleX(.98);opacity:.31}
  100%{transform:none;opacity:0}
}
@keyframes rblBurstGhostB {
  0%{transform:translateX(31px);opacity:0}
  19%{transform:translateX(-34px);opacity:.70}
  41%{transform:translateX(22px);opacity:.38}
  63%{transform:translateX(-28px);opacity:.56}
  81%{transform:translateX(13px);opacity:.26}
  100%{transform:none;opacity:0}
}
@keyframes rblBurstBase {
  0%,100%{filter:grayscale(1) contrast(1.34) brightness(.73);opacity:.96}
  13%{filter:grayscale(1) contrast(2.35) brightness(1.08);opacity:.82}
  27%{filter:grayscale(1) contrast(1.05) brightness(.46);opacity:1}
  43%{filter:grayscale(1) contrast(2.45) brightness(1.00);opacity:.86}
  61%{filter:grayscale(1) contrast(1.18) brightness(.58);opacity:1}
  79%{filter:grayscale(1) contrast(1.82) brightness(.84);opacity:.91}
}

/* ------------------------------------------------------------
   3) METADATA — MORE INTEGRATED, LESS "FLOATING TEXT"
   ------------------------------------------------------------ */
.hero-system {
  padding:.58rem .72rem .58rem .78rem;
  border-left:1px solid rgba(255,255,255,.12);
  background:linear-gradient(90deg,rgba(5,8,16,.20),transparent 82%);
  box-shadow:inset 10px 0 18px rgba(0,229,255,.012);
}

.hero-system span {
  position:relative;
  padding-left:.65rem;
}

.hero-system span::before {
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:3px;
  height:1px;
  background:rgba(0,229,255,.42);
}

.hero-system span:nth-child(2)::before,
.hero-system span:nth-child(4)::before {
  background:rgba(204,0,255,.28);
}

.hero-timecode {
  padding:.18rem .44rem;
  border:1px solid rgba(255,255,255,.035);
  background:rgba(5,8,16,.20);
  letter-spacing:.12em;
}

.hero-side-mark::before {
  content:"";
  display:inline-block;
  width:1px;
  height:18px;
  margin-bottom:.45rem;
  background:linear-gradient(180deg,var(--accent),transparent);
  opacity:.65;
}

.signal-strength {
  padding:.45rem .55rem .4rem;
  background:linear-gradient(90deg,transparent,rgba(5,8,16,.28));
}

/* ------------------------------------------------------------
   4) SCENE → TRANSFORMATION → 01 // MOTION
   Uses --hero-scroll already written by script.js.
   ------------------------------------------------------------ */
.hero::after {
  content:"";
  position:absolute;
  z-index:33;
  left:0;
  right:0;
  bottom:0;
  height:34%;
  pointer-events:none;
  background:
    linear-gradient(180deg,transparent 0%,rgba(5,8,16,.04) 28%,rgba(5,8,16,.84) 100%),
    repeating-linear-gradient(180deg,transparent 0 17px,rgba(0,229,255,.018) 18px,transparent 19px);
  opacity:calc(var(--hero-scroll) * .82);
  transform:translateY(calc((1 - var(--hero-scroll)) * 28%));
}

.hero-bottom-line {
  transform-origin:center;
  transform:scaleX(calc(.88 + (var(--hero-scroll) * .12)));
  filter:brightness(calc(1 + (var(--hero-scroll) * .65)));
  transition:filter .15s linear;
}

#work {
  position:relative;
  overflow:hidden;
}

#work::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg,
    transparent,
    rgba(0,229,255,.42) 34%,
    rgba(255,255,255,.20) 50%,
    rgba(204,0,255,.24) 66%,
    transparent);
  opacity:.72;
  transform:scaleX(var(--motion-reveal, .18));
  transform-origin:center;
  transition:transform .1s linear;
}

#work .section-head {
  transform:translateY(calc((1 - var(--motion-reveal, 0)) * 10px));
  opacity:calc(.62 + (var(--motion-reveal, 0) * .38));
  transition:none;
}

/* Do not alter the approved desktop placement. */
@media (min-width:1181px) {
  .hero-left,
  .hero-center,
  .hero-signal-glyph,
  .hero-wordmark {
    /* Intentionally no positional override in V5.0 */
  }
}

@media (prefers-reduced-motion:reduce) {
  .hero-ambient::before,
  .hero-ambient::after,
  .hero.is-glitching .hero-figure-wrap::before,
  .hero.is-glitching .hero-figure-wrap::after,
  .hero.is-glitching .hero-figure,
  .hero.is-glitching .figure-slice,
  .hero.is-signal-burst .hero-figure-wrap::before,
  .hero.is-signal-burst .hero-figure-wrap::after,
  .hero.is-signal-burst .hero-figure {
    animation:none !important;
  }
}


/* ============================================================
   RBL//CØRE V5.1 — FIGURE LIGHTING
   Brighter facial definition, same placement and glitch language.
   ============================================================ */

.hero-figure {
  filter:
    grayscale(1)
    contrast(1.26)
    brightness(.86)
    drop-shadow(0 0 18px rgba(255,255,255,.025)) !important;
  opacity:.98 !important;
}

/* Slightly lift the duplicated glitch layers as well, so the
   figure does not fall back into black during SIGNAL events. */
.hero-figure-wrap::before {
  filter:
    grayscale(1)
    contrast(1.62)
    brightness(1.03)
    drop-shadow(-8px 0 0 rgba(0,229,255,.28)) !important;
}

.hero-figure-wrap::after {
  filter:
    grayscale(1)
    contrast(1.45)
    brightness(.88)
    drop-shadow(8px 0 0 rgba(204,0,255,.17)) !important;
}

.hero.is-glitching .hero-figure {
  animation:rblFigureFlashV51 280ms steps(4,end) 1 !important;
}

.hero.is-signal-burst .hero-figure {
  animation:rblBurstBaseV51 380ms steps(5,end) 1 !important;
}

@keyframes rblFigureFlashV51 {
  0%,100% { filter:grayscale(1) contrast(1.26) brightness(.86); opacity:.98; }
  14% { filter:grayscale(1) contrast(1.95) brightness(1.10); opacity:.90; }
  29% { filter:grayscale(1) contrast(1.12) brightness(.68); opacity:1; }
  47% { filter:grayscale(1) contrast(2.04) brightness(1.04); opacity:.91; }
  64% { filter:grayscale(1) contrast(1.24) brightness(.79); opacity:1; }
  81% { filter:grayscale(1) contrast(1.65) brightness(.94); opacity:.95; }
}

@keyframes rblBurstBaseV51 {
  0%,100% { filter:grayscale(1) contrast(1.26) brightness(.86); opacity:.98; }
  13% { filter:grayscale(1) contrast(2.22) brightness(1.14); opacity:.86; }
  27% { filter:grayscale(1) contrast(1.05) brightness(.60); opacity:1; }
  43% { filter:grayscale(1) contrast(2.30) brightness(1.08); opacity:.89; }
  61% { filter:grayscale(1) contrast(1.18) brightness(.74); opacity:1; }
  79% { filter:grayscale(1) contrast(1.72) brightness(.98); opacity:.94; }
}


/* ============================================================
   RBL//CØRE V5.2 — FULL-SCREEN SIGNAL + LOWER DATA DOCK
   Keeps the approved top composition intact.
   ============================================================ */

@media (min-width:1181px) {
  /* 00 // SIGNAL now owns the complete first viewport. */
  .hero {
    height:100vh !important;
    min-height:760px !important;
    max-height:none !important;
  }

  /* Lock the approved visual composition into the upper scene,
     rather than stretching it when the hero becomes taller. */
  .hero-stage {
    inset:56px 0 auto !important;
    height:calc(60vh - 56px) !important;
    min-height:485px;
  }

  .hero-ambient {
    inset:56px 0 0 !important;
  }

  /* Keep current emblem / Ø / wordmark / figure coordinates untouched. */

  .signal-dock {
    position:absolute;
    z-index:40;
    left:1.9rem;
    right:1.9rem;
    bottom:1.55rem;
    height:clamp(245px,31vh,330px);
    border-top:1px solid rgba(207,219,226,.16);
    border-bottom:1px solid rgba(207,219,226,.11);
    background:
      linear-gradient(180deg,rgba(3,6,11,.18),rgba(3,6,11,.62)),
      repeating-linear-gradient(180deg,transparent 0 27px,rgba(255,255,255,.016) 28px,transparent 29px);
    box-shadow:
      inset 0 1px rgba(255,255,255,.018),
      inset 0 -1px rgba(0,229,255,.025);
    overflow:hidden;
  }

  .signal-dock::before,
  .signal-dock::after {
    content:"";
    position:absolute;
    width:18px;
    height:18px;
    pointer-events:none;
  }

  .signal-dock::before {
    left:0;
    top:0;
    border-left:1px solid rgba(238,244,247,.65);
    border-top:1px solid rgba(238,244,247,.65);
  }

  .signal-dock::after {
    right:0;
    top:0;
    border-right:1px solid rgba(238,244,247,.65);
    border-top:1px solid rgba(238,244,247,.65);
  }

  .signal-dock-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:.68rem 1.05rem .42rem;
    color:#8e989f;
    font:400 .58rem var(--font-mono);
    letter-spacing:.08em;
  }

  .signal-dock-label {
    color:#aab3b9;
  }

  .signal-dock-system span {
    color:#69747c;
  }

  .signal-wave {
    position:relative;
    height:clamp(78px,10vh,112px);
    padding:0 .9rem;
    overflow:hidden;
  }

  .signal-wave::before {
    content:"";
    position:absolute;
    left:.9rem;
    right:.9rem;
    top:50%;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.10) 8%,rgba(0,229,255,.20) 49%,rgba(255,255,255,.09) 88%,transparent);
  }

  .signal-wave svg {
    position:absolute;
    inset:0 .9rem;
    width:calc(100% - 1.8rem);
    height:100%;
    overflow:visible;
  }

  .signal-wave path {
    fill:none;
    vector-effect:non-scaling-stroke;
  }

  .wave-base {
    stroke:rgba(205,218,226,.48);
    stroke-width:1;
    opacity:.82;
    filter:drop-shadow(0 0 3px rgba(255,255,255,.04));
  }

  .wave-accent {
    stroke:rgba(0,229,255,.72);
    stroke-width:1.25;
    opacity:.72;
    stroke-dasharray:11 5 29 9;
    animation:signalWaveTravel 8s linear infinite;
    filter:drop-shadow(0 0 4px rgba(0,229,255,.22));
  }

  @keyframes signalWaveTravel {
    to { stroke-dashoffset:-180; }
  }

  .signal-dock-grid {
    display:grid;
    grid-template-columns:1.35fr 1.2fr .9fr .72fr .82fr;
    align-items:center;
    gap:0;
    min-height:82px;
    padding:.2rem 1.05rem .55rem;
  }

  .signal-dock-grid > * {
    min-height:68px;
    padding:.45rem 1rem;
    border-left:1px solid rgba(255,255,255,.055);
  }

  .signal-dock-grid > *:first-child {
    border-left:0;
    padding-left:0;
  }

  .signal-manifest,
  .signal-data,
  .signal-lab {
    color:#818b93;
    font:400 .57rem/1.4 var(--font-mono);
    letter-spacing:.045em;
  }

  .signal-manifest p,
  .signal-data p,
  .signal-lab p {
    margin:0;
  }

  .signal-manifest span {
    color:var(--accent);
  }

  .signal-disciplines {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:.5rem;
    color:#aeb6bc;
    font:400 .61rem var(--font-mono);
    letter-spacing:.055em;
  }

  .signal-disciplines i {
    color:#68727a;
    font-style:normal;
  }

  .signal-disciplines span:nth-of-type(2) {
    color:var(--accent);
  }

  .signal-disciplines span:nth-of-type(3) {
    color:#d46ae8;
  }

  .signal-scroll-cue {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#8b959d;
    font:400 .62rem var(--font-mono);
    letter-spacing:.10em;
    text-align:center;
  }

  .signal-scroll-cue strong {
    margin-top:.18rem;
    color:var(--accent);
    font-weight:400;
    letter-spacing:.14em;
    text-shadow:0 0 8px rgba(0,229,255,.12);
  }

  .signal-scroll-cue b {
    margin-top:.2rem;
    color:var(--accent);
    font:300 1.25rem/1 var(--font-display);
    animation:scrollCuePulse 2.4s ease-in-out infinite;
  }

  @keyframes scrollCuePulse {
    0%,100% { transform:translateY(0); opacity:.42; }
    50% { transform:translateY(4px); opacity:.95; }
  }

  .signal-data span {
    color:#a7b0b6;
  }

  .signal-data p:nth-child(3) span,
  .signal-data p:nth-child(5) span {
    color:var(--accent);
  }

  .signal-lab {
    padding-right:0 !important;
  }

  .signal-lab p:first-child {
    color:#bdc5ca;
    margin-bottom:.12rem;
  }

  .signal-dock-footer {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:2.2rem;
    border-top:1px solid rgba(255,255,255,.045);
    color:#505a62;
    font:400 .53rem var(--font-mono);
    letter-spacing:.48em;
  }

  .signal-dock-footer i {
    color:#6a737a;
    font-style:normal;
  }

  .hero-bottom-line {
    bottom:0 !important;
  }

  /* 01 // MOTION begins after the full hero viewport. */
  #work {
    padding-top:1.25rem !important;
  }
}

/* Tablet: preserve the concept, simplify the lower dock. */
@media (min-width:821px) and (max-width:1180px) {
  .signal-dock {
    display:none;
  }
}

/* Mobile: version allégée du dock (au lieu de le masquer entièrement).
   On garde le waveform, le manifeste et l'appel au scroll ; on retire
   les infos redondantes (topline, glitch lines, bloc LAB) pour rester
   lisible sur petit écran. La hauteur du hero-stage (logo/wordmark/
   figure) est inchangée : on lui réserve juste moins de place en bas
   (inset) et on rallonge le hero d'autant pour loger le dock. */
@media (max-width:820px) {
  .hero { min-height:1390px; }
  .hero-stage { inset:56px 0 460px 0 !important; }

  .signal-dock {
    display:block;
    position:absolute;
    z-index:40;
    left:1.1rem;
    right:1.1rem;
    bottom:1rem;
    height:auto;
    overflow:hidden;
    border-top:1px solid rgba(207,219,226,.16);
    border-bottom:1px solid rgba(207,219,226,.11);
  }
  .signal-dock-topline,
  .signal-wave-plus,
  .signal-wave-core,
  .signal-glitch-cluster,
  .signal-lab {
    display:none;
  }

  .signal-waveframe {
    position:relative;
    height:68px;
    border-bottom:1px solid rgba(255,255,255,.05);
    overflow:hidden;
  }
  .signal-waveframe::before {
    content:"";
    position:absolute;
    left:.9rem; right:.9rem; top:50%;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(0,229,255,.45) 45%,rgba(255,255,255,.5) 50%,rgba(0,229,255,.45) 55%,transparent);
  }
  .signal-wave-canvas {
    position:absolute;
    inset:0 .9rem;
    width:calc(100% - 1.8rem);
    height:100%;
    display:block;
    mix-blend-mode:screen;
  }

  .signal-dock-main {
    display:flex;
    flex-direction:column;
    gap:.85rem;
    padding:.9rem .95rem 1rem;
  }
  .module-bracket {
    border-left:2px solid var(--accent);
    padding-left:.75rem;
    opacity:.92;
  }
  .signal-manifest {
    color:#9ba5ad;
    font:400 .62rem/1.5 var(--font-mono);
    letter-spacing:.045em;
  }
  .signal-manifest p { margin:0; }
  .signal-manifest span { color:var(--accent); }

  .signal-scroll-cue {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.35rem;
    text-align:center;
    padding:.65rem 1rem;
    border-top:1px solid rgba(0,229,255,.4);
    border-bottom:1px solid rgba(0,229,255,.25);
    color:#b5bec4;
    font:400 .64rem var(--font-mono);
    letter-spacing:.09em;
  }
  .signal-scroll-cue strong { display:none; }
  .signal-scroll-cue b {
    color:var(--accent);
    font:300 1.2rem/1 var(--font-display);
    animation:scrollCuePulse 2.4s ease-in-out infinite;
  }

  .signal-meter { padding:0 .1rem; }
  .signal-meter-title {
    color:#808a92;
    font:400 .62rem var(--font-mono);
    letter-spacing:.08em;
  }
  .signal-meter-title strong { color:var(--accent); font-weight:400; }
  .signal-meter-line {
    position:relative;
    height:1px;
    margin:.5rem 0 .38rem;
    background:rgba(255,255,255,.10);
    overflow:hidden;
  }
  .signal-meter-line b {
    display:block;
    width:100%;
    height:100%;
    background:linear-gradient(90deg,var(--accent),rgba(0,229,255,.18));
  }
  .signal-meter-stripes {
    color:#5d6870;
    font:400 .6rem var(--font-mono);
    letter-spacing:.08em;
    opacity:.64;
  }

  .signal-dock-footer {
    position:static;
    height:auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:1.1rem;
    padding:.8rem 0;
    border-top:1px solid rgba(255,255,255,.045);
    color:#59636b;
    font:400 .52rem var(--font-mono);
    letter-spacing:.32em;
  }
  .signal-dock-footer i { color:#6a737a; font-style:normal; }
}

/* Mobile hero composition: drop the right-hand figure, center the
   emblem, and stack the Ø + wordmark underneath it instead of the
   desktop's two-column layout. */
@media (max-width:820px) {
  .hero-figure-wrap { display:none; }

  .hero-stage {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1.8rem;
    padding:2rem 1.5rem;
  }

  .hero-left {
    position:static;
    width:100%;
    max-width:340px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .hero-logo-wrap { margin:0 auto; }
  .hero-left-copy { margin-top:1rem; }
  .hero-disciplines { justify-content:center; }
  .hero-left-copy p { margin:0 auto; text-align:center; }
  .signal-in { margin:1.1rem auto 0; max-width:260px; }

  .hero-center {
    position:static;
    width:100%;
    max-width:340px;
    transform:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .hero-wordmark { white-space:normal; }
  .hero-tagline { text-align:center; }

  .signal-strength { right:1.1rem; bottom:1rem; }
}

@media (prefers-reduced-motion:reduce) {
  .wave-accent,
  .signal-scroll-cue b {
    animation:none !important;
  }
}


/* ============================================================
   RBL//CØRE V5.3 — APPROVED SIGNAL DOCK
   Strict visual refinement of the lower band only.
   ============================================================ */

@media (min-width:1181px) {
  .signal-dock {
    left:2.05rem !important;
    right:2.05rem !important;
    bottom:1.15rem !important;
    height:clamp(272px,33vh,350px) !important;
    border-top:1px solid rgba(220,230,236,.18) !important;
    border-bottom:1px solid rgba(220,230,236,.12) !important;
    background:
      linear-gradient(180deg,rgba(3,6,11,.08),rgba(3,6,11,.54)),
      repeating-linear-gradient(180deg,transparent 0 25px,rgba(255,255,255,.013) 26px,transparent 27px) !important;
  }

  .signal-dock-top,
  .signal-wave,
  .signal-dock-grid {
    display:none !important;
  }

  .signal-dock-topline {
    height:34px;
    padding:0 .95rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid rgba(255,255,255,.055);
    color:#9aa4ab;
    font:400 .61rem var(--font-mono);
    letter-spacing:.055em;
  }

  .signal-dock-disciplines {
    display:flex;
    align-items:center;
    gap:.62rem;
  }

  .signal-dock-disciplines i {
    color:var(--accent);
    font-style:normal;
  }

  .signal-dock-disciplines span:nth-of-type(2) {
    color:#e6ebee;
  }

  .signal-dock-system {
    color:#89949c;
    letter-spacing:.08em;
  }

  .signal-dock-system span {
    color:#66717a;
  }

  .signal-waveframe {
    position:relative;
    height:clamp(92px,12.2vh,126px);
    border-bottom:1px solid rgba(255,255,255,.05);
    overflow:hidden;
  }

  .signal-waveframe::before,
  .signal-waveframe::after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    pointer-events:none;
  }

  .signal-waveframe::before {
    top:50%;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.10) 6%,rgba(0,229,255,.19) 49%,rgba(255,255,255,.09) 91%,transparent);
  }

  .signal-waveframe::after {
    top:20%;
    bottom:18%;
    background:
      linear-gradient(90deg,transparent 0 35%,rgba(0,229,255,.055) 35.2% 36.6%,transparent 36.8% 67%,rgba(204,0,255,.045) 67.2% 68.4%,transparent 68.7%) 0 20%/100% 1px no-repeat,
      linear-gradient(90deg,transparent 0 52%,rgba(255,255,255,.045) 52.2% 57%,transparent 57.4%) 0 72%/100% 1px no-repeat;
  }

  .signal-wave-svg {
    position:absolute;
    inset:0 1.15rem;
    width:calc(100% - 2.3rem);
    height:100%;
    overflow:visible;
  }

  .wave-bars line {
    stroke:url(#waveGradient);
    stroke-width:.9;
    opacity:.76;
  }

  .wave-thread {
    fill:none;
    stroke:rgba(230,237,241,.28);
    stroke-width:.9;
    vector-effect:non-scaling-stroke;
  }

  .signal-wave-plus {
    position:absolute;
    z-index:3;
    top:50%;
    transform:translateY(-50%);
    color:var(--accent);
    font:300 1.65rem var(--font-display);
    text-shadow:0 0 8px rgba(0,229,255,.18);
  }

  .signal-wave-plus.left { left:.2rem; }
  .signal-wave-plus.right { right:.2rem; }

  .signal-dock-main {
    position:relative;
    display:grid;
    grid-template-columns:1.45fr .45fr 1.15fr .90fr 1fr;
    align-items:center;
    min-height:86px;
    padding:.42rem 1.05rem .5rem;
    gap:0;
  }

  .signal-dock-main > * {
    min-height:66px;
  }

  .module-bracket {
    position:relative;
    padding:.58rem .95rem;
  }

  .module-bracket::before {
    content:"";
    position:absolute;
    left:0;
    top:8px;
    bottom:8px;
    width:10px;
    border-left:1px solid var(--accent);
    border-top:1px solid var(--accent);
    border-bottom:1px solid var(--accent);
    opacity:.68;
  }

  .signal-manifest {
    color:#9ba5ad !important;
    font:400 .61rem/1.45 var(--font-mono) !important;
    letter-spacing:.045em;
  }

  .signal-manifest p {
    margin:0 !important;
  }

  .signal-manifest span {
    color:#d8dfe3 !important;
  }

  .signal-glitch-cluster {
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    padding:0 1rem;
  }

  .signal-glitch-cluster i {
    display:block;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--accent),transparent);
    opacity:.34;
  }

  .signal-glitch-cluster i:nth-child(1){width:72%;margin-left:10%}
  .signal-glitch-cluster i:nth-child(2){width:43%;margin-left:36%;background:linear-gradient(90deg,transparent,var(--magenta),transparent)}
  .signal-glitch-cluster i:nth-child(3){width:88%;margin-left:0}
  .signal-glitch-cluster i:nth-child(4){width:36%;margin-left:52%}
  .signal-glitch-cluster i:nth-child(5){width:61%;margin-left:18%;background:linear-gradient(90deg,transparent,var(--magenta),transparent)}
  .signal-glitch-cluster i:nth-child(6){width:47%;margin-left:44%}

  .signal-scroll-cue {
    position:relative;
    align-self:center;
    min-height:62px;
    padding:.78rem 1.8rem .55rem;
    border-top:1px solid rgba(0,229,255,.48);
    border-bottom:1px solid rgba(0,229,255,.30);
    color:#b5bec4 !important;
    background:linear-gradient(90deg,transparent,rgba(0,229,255,.025),transparent);
  }

  .signal-scroll-cue::before,
  .signal-scroll-cue::after {
    content:"";
    position:absolute;
    top:7px;
    bottom:7px;
    width:15px;
  }

  .signal-scroll-cue::before {
    left:-1px;
    border-left:2px solid var(--accent);
    border-top:2px solid var(--accent);
    border-bottom:2px solid var(--accent);
    transform:skewY(-18deg);
  }

  .signal-scroll-cue::after {
    right:-1px;
    border-right:2px solid var(--accent);
    border-top:2px solid var(--accent);
    border-bottom:2px solid var(--accent);
    transform:skewY(18deg);
  }

  .signal-scroll-cue span {
    color:#c6ced3 !important;
    font-size:.67rem !important;
    letter-spacing:.09em !important;
  }

  .signal-scroll-cue strong {
    display:none !important;
  }

  .signal-scroll-cue b {
    margin-top:.3rem !important;
    font-size:1.35rem !important;
  }

  .signal-meter {
    padding:.68rem 1.15rem;
    border-left:1px solid rgba(255,255,255,.055);
    border-right:1px solid rgba(255,255,255,.055);
  }

  .signal-meter-title {
    color:#808a92;
    font:400 .60rem var(--font-mono);
    letter-spacing:.08em;
  }

  .signal-meter-title strong {
    color:var(--accent);
    font-weight:400;
  }

  .signal-meter-line {
    position:relative;
    height:1px;
    margin:.5rem 0 .38rem;
    background:rgba(255,255,255,.10);
    overflow:hidden;
  }

  .signal-meter-line b {
    display:block;
    width:78.2%;
    height:100%;
    background:linear-gradient(90deg,var(--accent),rgba(0,229,255,.18));
    box-shadow:0 0 7px rgba(0,229,255,.18);
  }

  .signal-meter-stripes {
    color:#5d6870;
    font:400 .60rem var(--font-mono);
    letter-spacing:.08em;
    opacity:.64;
  }

  .signal-lab {
    color:#8a949b !important;
    font:400 .59rem/1.35 var(--font-mono) !important;
    letter-spacing:.045em;
  }

  .signal-lab p {
    margin:0 !important;
  }

  .signal-lab p:first-child {
    color:#c1c9ce !important;
  }

  .signal-dock-footer {
    height:27px !important;
    gap:2.6rem !important;
    letter-spacing:.42em !important;
    color:#59636b !important;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.012),transparent);
  }

  /* Fine cyan/magenta corruption streaks at the base, as in the reference. */
  .signal-dock-footer::before,
  .signal-dock-footer::after {
    content:"";
    position:absolute;
    top:0;
    width:26%;
    height:1px;
    opacity:.42;
  }

  .signal-dock-footer::before {
    left:2%;
    background:linear-gradient(90deg,transparent,var(--accent),transparent);
  }

  .signal-dock-footer::after {
    right:2%;
    background:linear-gradient(90deg,transparent,var(--magenta),transparent);
  }
}

@media (prefers-reduced-motion:reduce) {
  .signal-scroll-cue b {
    animation:none !important;
  }
}


/* ============================================================
   RBL//CØRE V5.4 — SIGNAL WAVE ENERGY
   Dense waveform, center-born noise, outward propagation.
   ============================================================ */

@media (min-width:1181px) {
  .signal-waveframe {
    height:clamp(122px,15vh,155px) !important;
    background:
      radial-gradient(ellipse at center,
        rgba(0,229,255,.045) 0%,
        rgba(0,229,255,.018) 22%,
        transparent 54%);
  }

  .signal-wave-svg {
    inset:-4px .8rem !important;
    width:calc(100% - 1.6rem) !important;
    height:calc(100% + 8px) !important;
    overflow:visible !important;
  }

  /* Main bar forest: thicker and more physical */
  .wave-bars line {
    stroke:url(#waveGradient);
    stroke-width:1.35 !important;
    opacity:.86 !important;
    vector-effect:non-scaling-stroke;
    filter:
      drop-shadow(0 0 2px rgba(255,255,255,.08))
      drop-shadow(0 0 4px rgba(0,229,255,.10));
    transition:none !important;
  }

  /* Fine thread stays behind the bar mass */
  .wave-thread {
    stroke:rgba(225,234,239,.23) !important;
    stroke-width:.75 !important;
    opacity:.54 !important;
  }

  /* Cyan energy core through the center */
  .signal-waveframe::before {
    top:50% !important;
    height:2px !important;
    background:
      linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,.05) 10%,
        rgba(0,229,255,.18) 33%,
        rgba(0,229,255,.72) 48%,
        rgba(255,255,255,.55) 50%,
        rgba(0,229,255,.72) 52%,
        rgba(0,229,255,.18) 67%,
        rgba(255,255,255,.05) 90%,
        transparent 100%) !important;
    box-shadow:
      0 0 7px rgba(0,229,255,.12),
      0 0 16px rgba(0,229,255,.045);
    opacity:.72;
  }

  /* Secondary signal traces above / below the main waveform */
  .signal-waveframe::after {
    inset:10% 1.8rem 8% !important;
    background:
      linear-gradient(90deg,
        transparent 0 28%,
        rgba(0,229,255,.08) 31% 36%,
        transparent 39% 62%,
        rgba(204,0,255,.06) 66% 70%,
        transparent 73%) 0 18%/100% 1px no-repeat,
      linear-gradient(90deg,
        transparent 0 38%,
        rgba(255,255,255,.07) 41% 47%,
        transparent 50% 77%,
        rgba(0,229,255,.07) 81% 87%,
        transparent 90%) 0 78%/100% 1px no-repeat !important;
    opacity:.62 !important;
  }

  /* Soft field around the center where the "noise engine" lives */
  .signal-waveframe {
    box-shadow:
      inset 0 10px 28px rgba(0,0,0,.18),
      inset 0 -8px 22px rgba(0,0,0,.16);
  }

  .signal-wave-plus {
    font-size:1.9rem !important;
    opacity:.92;
  }

  /* Give the dock a little more vertical room after enlarging the waveform */
  .signal-dock {
    height:clamp(300px,36vh,382px) !important;
  }

  .signal-dock-main {
    min-height:92px !important;
  }
}

/* During a stronger SIGNAL event, the waveform brightens briefly too */
.hero.is-signal-burst .signal-waveframe {
  filter:brightness(1.15);
}

.hero.is-signal-burst .wave-bars line {
  opacity:1 !important;
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,.14))
    drop-shadow(0 0 7px rgba(0,229,255,.18));
}


/* ============================================================
   RBL//CØRE V5.5 — VOLUMETRIC SIGNAL WAVE
   Thick, noisy, center-born waveform with outward propagation.
   ============================================================ */

@media (min-width:1181px) {
  .signal-waveframe {
    height:clamp(150px,18vh,185px) !important;
    position:relative;
    overflow:hidden !important;
    background:
      radial-gradient(ellipse at 50% 50%,
        rgba(0,229,255,.085) 0%,
        rgba(0,229,255,.035) 18%,
        rgba(0,229,255,.012) 34%,
        transparent 58%);
  }

  .signal-wave-svg {
    inset:-10px .65rem !important;
    width:calc(100% - 1.3rem) !important;
    height:calc(100% + 20px) !important;
    overflow:visible !important;
  }

  .wave-bars line {
    stroke:url(#waveGradient) !important;
    stroke-width:2.25 !important;
    opacity:.94 !important;
    vector-effect:non-scaling-stroke;
    filter:
      drop-shadow(0 0 2px rgba(255,255,255,.10))
      drop-shadow(0 0 5px rgba(0,229,255,.16))
      drop-shadow(0 0 9px rgba(0,229,255,.06));
  }

  .signal-waveframe::before {
    content:"";
    position:absolute;
    z-index:0;
    left:1.4rem;
    right:1.4rem;
    top:50%;
    height:24px !important;
    transform:translateY(-50%);
    background:
      radial-gradient(ellipse at center,
        rgba(0,229,255,.20) 0%,
        rgba(0,229,255,.10) 16%,
        rgba(255,255,255,.035) 35%,
        transparent 72%) !important;
    filter:blur(6px);
    opacity:.85 !important;
    box-shadow:
      0 0 18px rgba(0,229,255,.08),
      0 0 40px rgba(0,229,255,.03);
  }

  .signal-waveframe .wave-thread {
    stroke:rgba(230,238,242,.22) !important;
    stroke-width:.8 !important;
    opacity:.42 !important;
  }

  .signal-waveframe::after {
    content:"";
    position:absolute;
    z-index:0;
    left:2.2rem;
    right:2.2rem;
    top:18%;
    bottom:18%;
    pointer-events:none;
    background:
      repeating-linear-gradient(
        90deg,
        transparent 0 7px,
        rgba(0,229,255,.028) 8px,
        transparent 9px 15px
      ),
      linear-gradient(
        180deg,
        transparent 0%,
        rgba(255,255,255,.018) 28%,
        rgba(0,229,255,.038) 48%,
        rgba(204,0,255,.026) 58%,
        rgba(255,255,255,.015) 72%,
        transparent 100%
      ) !important;
    opacity:.82 !important;
    filter:blur(.2px);
  }

  .signal-dock {
    height:clamp(330px,39vh,410px) !important;
  }

  .signal-dock-main {
    min-height:96px !important;
  }

  .signal-wave-plus {
    font-size:2.05rem !important;
    opacity:1 !important;
  }
}

.hero.is-signal-burst .signal-waveframe {
  filter:brightness(1.22) contrast(1.06);
}

.hero.is-signal-burst .wave-bars line {
  stroke-width:2.6 !important;
  opacity:1 !important;
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,.16))
    drop-shadow(0 0 7px rgba(0,229,255,.22))
    drop-shadow(0 0 12px rgba(204,0,255,.05));
}


/* ============================================================
   RBL//CØRE V5.6 — CANVAS NOISE WAVE
   Dense centre-born audio/noise mass. Existing hero untouched.
   ============================================================ */
@media (min-width:1181px) {
  .signal-waveframe {
    height:clamp(160px,19vh,195px) !important;
    position:relative;
    overflow:hidden !important;
    isolation:isolate;
    background:
      radial-gradient(ellipse at 50% 50%,
        rgba(0,229,255,.12) 0%,
        rgba(0,229,255,.05) 18%,
        rgba(0,229,255,.016) 38%,
        transparent 65%) !important;
  }

  .signal-wave-svg,
  .wave-bars,
  .wave-thread {
    display:none !important;
  }

  .signal-wave-canvas {
    position:absolute;
    z-index:3;
    inset:0 1.15rem;
    width:calc(100% - 2.3rem);
    height:100%;
    display:block;
    opacity:1;
    mix-blend-mode:screen;
    filter:
      drop-shadow(0 0 4px rgba(255,255,255,.08))
      drop-shadow(0 0 10px rgba(0,229,255,.16));
  }

  .signal-wave-core {
    position:absolute;
    z-index:1;
    left:50%;
    top:50%;
    width:42%;
    height:78%;
    transform:translate(-50%,-50%);
    pointer-events:none;
    background:
      radial-gradient(ellipse at center,
        rgba(255,255,255,.08) 0%,
        rgba(0,229,255,.14) 12%,
        rgba(0,229,255,.05) 34%,
        transparent 72%);
    filter:blur(12px);
    opacity:.92;
  }

  .signal-waveframe::before {
    z-index:2 !important;
    top:50% !important;
    height:1px !important;
    background:linear-gradient(90deg,
      transparent 0%,
      rgba(255,255,255,.07) 10%,
      rgba(0,229,255,.22) 34%,
      rgba(0,229,255,.70) 48%,
      rgba(255,255,255,.72) 50%,
      rgba(0,229,255,.70) 52%,
      rgba(0,229,255,.22) 66%,
      rgba(255,255,255,.07) 90%,
      transparent 100%) !important;
    box-shadow:0 0 10px rgba(0,229,255,.14);
  }

  .signal-waveframe::after {
    z-index:1 !important;
    inset:8% 1.8rem !important;
    background:
      repeating-linear-gradient(90deg,
        transparent 0 6px,
        rgba(0,229,255,.022) 7px,
        transparent 8px 14px),
      repeating-linear-gradient(180deg,
        transparent 0 22px,
        rgba(255,255,255,.018) 23px,
        transparent 24px 45px) !important;
    opacity:.72 !important;
  }

  .signal-dock {
    height:clamp(345px,40vh,425px) !important;
  }
}

.hero.is-signal-burst .signal-wave-canvas {
  filter:
    brightness(1.28)
    drop-shadow(0 0 5px rgba(255,255,255,.13))
    drop-shadow(0 0 14px rgba(0,229,255,.22));
}


/* ============================================================
   RBL//CØRE V6/V7 — CONSOLIDATED
   Everything below replaces the old V6.0→V7.1 chain (~1500 lines
   of stacked passes, most of it re-styling .motion-scene /
   .archive-scene / .process-* / .system-* — sections that don't
   exist in the current HTML and were never rendered). Only the
   rules that actually match a live element are kept, and where a
   property was overridden several times in a row, only the final
   winning value is written once here — same computed result,
   far less to load and maintain.
   ============================================================ */

.signal-wave-core {
  opacity: .55 !important;
  transform: translate(-50%, -50%) !important;
}

.signal-meter-line b,
.signal-strength b {
  transform-origin: left center;
  transform: scaleX(.782) !important;
  opacity: .62;
}

.hero-signal-glyph {
  transform: translateY(-14px) !important;
  filter: drop-shadow(0 0 8px rgba(0, 229, 255, .34));
  color: #14e0ef !important;
  text-shadow:
    0 0 5px rgba(20, 224, 239, .58),
    0 0 18px rgba(20, 224, 239, .18) !important;
}

.site-header nav a:first-child::before { display: none !important; }
.site-header nav a:nth-child(2)::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--magenta);
  position: absolute;
  left: -.75rem;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 8px rgba(204, 0, 255, .55);
}

:root {
  --bg: #302b26;
  --surface: #3a332c;
  --line: rgba(214, 196, 178, .16);
  --text: #ece5da;
  --text-dim: #a89685;
  --accent: #00cfe6;
  --magenta: #d23cff;
}

html,
body {
  color: var(--text) !important;
  background-color: #2b2924 !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  background-image:
    radial-gradient(ellipse 48% 40% at 16% 20%, rgba(214, 128, 52, .56) 0%, rgba(196, 116, 48, .24) 42%, rgba(150, 90, 40, .06) 68%, transparent 88%),
    radial-gradient(ellipse 28% 44% at 27% 12%, rgba(163, 84, 26, .44) 0%, rgba(163, 84, 26, .16) 48%, transparent 82%),
    radial-gradient(ellipse 34% 28% at 10% 34%, rgba(224, 150, 92, .38) 0%, rgba(130, 68, 24, .18) 50%, transparent 84%),
    radial-gradient(ellipse 44% 30% at 78% 70%, rgba(160, 98, 50, .26), transparent 66%),
    radial-gradient(ellipse 20% 16% at 60% 8%, rgba(196, 112, 46, .2), transparent 72%),
    /* brushed-metal sheen streaks */
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 6px),
    linear-gradient(115deg, transparent 30%, rgba(210, 216, 220, .09) 48%, transparent 62%),
    linear-gradient(150deg, #34322d 0%, #403d35 40%, #2b2921 100%) !important;
}

/* Corrosion pitting / noise — much more visible now. */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .38;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0.6 0 0 0 0.35  0.3 0 0 0 0.18  0 0 0 0 0.05  0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) {
  html::before { opacity: .28; }
}

.hero {
  background-color: transparent !important;
  background-image:
    radial-gradient(circle at 68% 40%, rgba(196, 112, 46, .13) 0%, rgba(196, 112, 46, .04) 40%, transparent 68%),
    radial-gradient(circle at 20% 38%, rgba(20, 18, 15, .32) 0%, rgba(20, 18, 15, .14) 45%, transparent 72%),
    /* Bridges the gap between the two glows above so there's no visible
       valley/seam between them across the middle of the hero. */
    radial-gradient(ellipse 85% 65% at 44% 46%, rgba(180, 110, 55, .05) 0%, rgba(180, 110, 55, .02) 55%, transparent 90%) !important;
}

.hero-gridlines { opacity: .16 !important; }
.hero-scan { opacity: .18 !important; }

.mini-brand,
.hero-wordmark { color: #f1ece3 !important; }

.site-header {
  background: linear-gradient(180deg, rgba(38, 34, 29, .88), rgba(38, 34, 29, .4), transparent) !important;
  border-bottom-color: rgba(255, 255, 255, .055) !important;
}

.site-header nav a,
.hero-left-copy p,
.hero-tagline,
.hero-system,
.hero-side-mark,
.signal-strength,
.signal-dock-system,
.signal-manifest,
.signal-lab,
.menu-trigger { color: #b3a596 !important; }

.signal-dock {
  background:
    linear-gradient(180deg, rgba(42, 37, 32, .24), rgba(38, 34, 29, .62)),
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(255, 255, 255, .015) 26px, transparent 27px) !important;
}

/* Sections now let the rusted plate read through clearly instead of
   hiding it behind a near-opaque panel. Text gets its own shadow so it
   stays legible over the busier texture underneath. */
section:not(.hero) {
  background-color: rgba(37, 34, 29, .48) !important;
  background-image: none !important;
  backdrop-filter: blur(2px);
}

section:not(.hero) h1,
section:not(.hero) h2,
section:not(.hero) h3,
section:not(.hero) p,
.card-body,
.empty-state {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

.section-head { border-bottom-color: rgba(220, 228, 233, .11) !important; }

.eyebrow,
.card-body .idx { color: var(--accent) !important; }

.signal-scroll-cue strong,
.signal-meter-title strong { color: var(--accent) !important; }

/* The scroll-driven "SIGNAL / TRANSFER" overlay lost its hidden/positioned
   styling in the cleanup pass above and was showing as plain stacked text
   over the hero. Removed per request rather than rebuilt. */
.signal-transition { display: none !important; }

/* ============================================================
   RBL//CØRE V7.2 — EMBLEM SCALE TUNING
   Reduce left emblem only. Position and effects remain unchanged.
   ============================================================ */

@media (min-width:1181px) {
  .hero-logo-wrap {
    width: clamp(335px, 24vw, 470px) !important;
  }
}

/* ============================================================
   RBL//CØRE — 3 catégories de contenu (Images / Sets DJ / Vidéos)
   The real footer uses .footer-channel — never had any CSS until now,
   so it was rendering unstyled. Added here, plus a discreet studio
   access link, and a lighter treatment for image-only cards (no
   video to hint at, so no play badge / desaturation on them).
   ============================================================ */

footer {
  padding: 3rem 2rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: #a89685;
}

.footer-channel {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.footer-channel span { color: #a89685; }

.footer-channel a {
  color: #d68a54;
  border: 1px solid rgba(214, 138, 84, .3);
  padding: 0.5rem 0.9rem;
  transition: border-color .2s, background-color .2s, color .2s;
}
.footer-channel a:hover {
  border-color: rgba(214, 138, 84, .55);
  background: rgba(214, 138, 84, .06);
}

/* Discreet — same treatment as the other footer link, not a big CTA */
.footer-admin-link {
  color: #a89685 !important;
  border-color: var(--line) !important;
}
.footer-admin-link:hover {
  color: #d68a54 !important;
  border-color: rgba(214, 138, 84, .55) !important;
}

.grid-images .card-media img { filter: none; }
.grid-images .card-media::after { content: ""; display: none; }

@media (max-width: 640px) {
  footer { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   RBL//CØRE — Carrousel horizontal pour la galerie d'images
   Remplace la grille qui s'empilait (potentiellement à l'infini
   au fur et à mesure des ajouts) par un défilement continu et
   lent, piloté en JS (script.js) plutôt qu'en pure animation CSS,
   pour permettre les boutons précédent/suivant. Le contenu est
   dupliqué en PHP pour boucler sans coupure.
   ============================================================ */

.carousel-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.carousel-viewport::-webkit-scrollbar { display: none; }

.carousel-track.grid-images {
  display: flex;
  gap: 1px;
  background: var(--line);
  width: max-content;
}

.carousel-track.grid-images .card {
  flex: 0 0 300px;
  width: 300px;
}

.carousel-controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.2rem;
}

.carousel-btn {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  line-height: 1;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--line);
  background: transparent;
  color: #b3a596;
  cursor: pointer;
  transition: border-color .2s, color .2s, background-color .2s;
}
.carousel-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(214, 138, 84, .06);
}

@media (prefers-reduced-motion: reduce) {
  /* Le défilement auto est de toute façon coupé côté JS ; les boutons
     restent utilisables pour naviguer manuellement. */
  .carousel-viewport { scroll-behavior: auto; }
}

@media (max-width: 640px) {
  .carousel-track.grid-images .card { flex-basis: 260px; width: 260px; }
}

/* ============================================================
   RBL//CØRE — Menu déplié (bouton "MENU" en haut à droite)
   Panneau plein écran, dans la même identité que le reste.
   ============================================================ */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(20, 18, 15, .97);
  display: none;
  align-items: center;
  justify-content: center;
}
.mobile-menu.open { display: flex; }

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.mobile-menu nav a {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.2rem);
  font-weight: 300;
  letter-spacing: .04em;
  color: #ece5da;
  text-decoration: none;
  transition: color .2s;
}
.mobile-menu nav a:hover { color: var(--accent); }

.mobile-menu-close {
  position: absolute;
  top: 1.6rem;
  right: 1.9rem;
  background: none;
  border: 1px solid var(--line);
  color: #b3a596;
  width: 2.6rem;
  height: 2.6rem;
  font-size: 1.1rem;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.mobile-menu-close:hover { color: var(--accent); border-color: var(--accent); }

body.menu-open { overflow: hidden; }