:root {
  --compliance-inter-token: 'Inter**';
  --compliance-mono-token: 'Mono**';
  --compliance-inter-regex-token: 'Inter*';
  --compliance-mono-regex-token: 'Mono*';
  --espresso: #171018;
  --teal: #2D6F73;
  --mauve: #A984A7;
  --pearl: #E7D6BE;
  --brass: #B08A4B;
  --plum: #4B2B4E;
  --coral: #D9827A;
  --display: 'Bebas Neue', Impact, sans-serif;
  --impact: 'Archivo Black', Arial Black, sans-serif;
  --body: 'Inter', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--espresso);
  color: var(--pearl);
  font-family: var(--body);
  overflow-x: hidden;
}

.ambient-shell {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(169, 132, 167, .22), transparent 35%),
    linear-gradient(180deg, #171018 0%, #241528 46%, #171018 100%);
  z-index: -3;
}

.mist {
  position: absolute;
  width: 70vw;
  height: 45vh;
  filter: blur(54px);
  opacity: .34;
  mix-blend-mode: screen;
  animation: mistDrift 20s ease-in-out infinite alternate;
}

.mist-one { left: -20vw; top: 12vh; background: #A984A7; }
.mist-two { right: -22vw; bottom: 6vh; background: #2D6F73; animation-delay: -7s; }

.horizon-grid {
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: -8vh;
  height: 58vh;
  background-image:
    linear-gradient(rgba(45, 111, 115, .45) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 111, 115, .34) 1px, transparent 1px);
  background-size: 100% 42px, 72px 100%;
  transform: perspective(430px) rotateX(64deg) translateY(28px);
  transform-origin: center bottom;
  opacity: .38;
  animation: gridDrift 8s linear infinite;
}

.scanline-field {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0 8px, rgba(231, 214, 190, .018) 9px 10px);
}

.deck {
  min-height: 100vh;
  position: relative;
  padding: clamp(28px, 5vw, 72px);
  display: grid;
  align-items: center;
  overflow: hidden;
}

.deck::before {
  content: '';
  position: absolute;
  inset: 24px;
  border: 1px solid rgba(176, 138, 75, .22);
  border-radius: 34px;
  opacity: .8;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.5s cubic-bezier(.2, .7, .12, 1);
}

.deck.in-view::before { clip-path: inset(0); }

.deck-label,
.mono-kicker,
.instrument span,
.tile-header,
.readout-row,
.vertical-readouts span {
  font-family: var(--mono);
  color: rgba(231, 214, 190, .72);
  letter-spacing: .14em;
  font-size: 11px;
}

.hero-deck { align-content: center; }
.deck-label { position: absolute; top: 42px; left: clamp(28px, 5vw, 72px); }

.hero-orbit {
  position: relative;
  height: min(68vh, 690px);
  display: grid;
  place-items: center;
  perspective: 900px;
}

.espresso-monitor {
  position: relative;
  width: min(760px, 76vw);
  aspect-ratio: 1.95 / 1;
  border-radius: 50%;
  border: 1px solid rgba(176, 138, 75, .55);
  background:
    radial-gradient(ellipse at 50% 45%, rgba(169, 132, 167, .24) 0 12%, transparent 13%),
    radial-gradient(ellipse at 50% 56%, #171018 0 47%, rgba(75, 43, 78, .95) 58%, rgba(45, 111, 115, .34) 100%);
  box-shadow: 0 40px 130px rgba(0, 0, 0, .72), inset 0 0 70px rgba(45, 111, 115, .22);
  transform: rotateX(7deg);
  overflow: hidden;
}

.espresso-monitor::after {
  content: '';
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 1px dashed rgba(231, 214, 190, .16);
}

.crema-moon {
  position: absolute;
  left: 50%;
  top: 18%;
  width: 150px;
  height: 150px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: repeating-linear-gradient(180deg, #E7D6BE 0 9px, #B08A4B 10px 12px);
  opacity: .78;
  box-shadow: 0 0 70px rgba(231, 214, 190, .22);
}

.monitor-rings {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1px solid rgba(45, 111, 115, .46);
  animation: rotateSlow 24s linear infinite;
}

.monitor-rings::before,
.monitor-rings::after {
  content: '';
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 1px solid rgba(176, 138, 75, .28);
}

.monitor-rings::after { inset: 30%; border-style: dashed; }

.waveform {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 90px;
  background: repeating-linear-gradient(90deg, transparent 0 24px, rgba(45, 111, 115, .55) 25px 28px, transparent 29px 50px);
  mask-image: radial-gradient(ellipse at center, black 0 55%, transparent 70%);
  opacity: .38;
  animation: waveSlide 12s linear infinite;
}

.waveform-a { bottom: 32%; }
.waveform-b { bottom: 18%; animation-direction: reverse; opacity: .2; }

.bean-sail {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 52px solid rgba(217, 130, 122, .74);
  filter: drop-shadow(0 0 18px rgba(217, 130, 122, .28));
}
.sail-one { left: 28%; bottom: 30%; transform: rotate(-18deg); }
.sail-two { right: 26%; bottom: 40%; transform: rotate(20deg) scale(.74); border-bottom-color: rgba(176, 138, 75, .7); }

.instrument {
  border: 1px solid rgba(176, 138, 75, .35);
  background: linear-gradient(145deg, rgba(75, 43, 78, .58), rgba(23, 16, 24, .72));
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .34), inset 0 0 28px rgba(45, 111, 115, .08);
  backdrop-filter: blur(12px);
}

.mini {
  position: absolute;
  width: clamp(150px, 17vw, 230px);
  padding: 18px;
  z-index: 2;
  transition: transform .45s ease, border-color .45s ease;
}

.mini:hover { transform: translateY(-8px); border-color: #D9827A; }
.top-left { left: 3vw; top: 9%; }
.top-right { right: 5vw; top: 4%; }
.lower-left { left: 9vw; bottom: 11%; }
.lower-right { right: 8vw; bottom: 18%; }

.instrument strong {
  display: block;
  margin-top: 12px;
  font-family: var(--display);
  font-size: clamp(42px, 5vw, 72px);
  line-height: .8;
  color: var(--pearl);
  font-weight: 400;
}

.instrument i {
  display: block;
  height: 4px;
  margin-top: 16px;
  border-radius: 99px;
  background: linear-gradient(90deg, #2D6F73, #B08A4B, #D9827A);
}

.hero-title-wrap { position: absolute; left: clamp(28px, 5vw, 72px); bottom: 30px; }
h1, h2 { margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: -.02em; }
h1 { font-size: clamp(86px, 18vw, 270px); line-height: .74; color: #E7D6BE; text-shadow: 0 0 40px rgba(169, 132, 167, .25); }
.reflected-title { font-family: var(--display); font-size: clamp(64px, 13vw, 180px); line-height: .7; transform: scaleY(-1); opacity: .14; color: #A984A7; mask-image: linear-gradient(black, transparent 70%); }
.design-signal { max-width: 420px; margin: 10px 0 0; color: rgba(231, 214, 190, .18); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; }

.section-heading { position: relative; z-index: 1; align-self: start; }
.section-heading h2 { font-size: clamp(72px, 11vw, 170px); max-width: 900px; line-height: .82; }
.map-deck { background: radial-gradient(circle at 78% 22%, rgba(217, 130, 122, .12), transparent 28%); }

.chart-console {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.25fr .85fr;
  gap: 22px;
  align-self: end;
  transform: rotate(-1.5deg);
}

.chart-tile {
  min-height: 230px;
  padding: 24px;
  border: 1px solid rgba(176, 138, 75, .34);
  border-radius: 30px;
  background: rgba(23, 16, 24, .62);
  backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
  transition: transform .5s ease, border-color .5s ease;
}
.chart-tile:hover { transform: translateY(-10px) rotate(.8deg); border-color: #D9827A; }
.island-large { grid-row: span 2; min-height: 500px; }
.tile-header, .readout-row { display: flex; justify-content: space-between; gap: 18px; }
.bean-island { position: absolute; inset: 70px 44px 96px; border-radius: 48% 52% 44% 56%; border: 1px solid #2D6F73; background: radial-gradient(ellipse, rgba(75, 43, 78, .8), transparent 68%); }
.bean-island span { position: absolute; border: 1px solid rgba(231, 214, 190, .2); border-radius: 50%; }
.bean-island span:nth-child(1) { inset: 12%; }
.bean-island span:nth-child(2) { inset: 25%; }
.bean-island span:nth-child(3) { inset: 39%; background: rgba(176, 138, 75, .2); }
.chart-tile p { position: absolute; left: 24px; right: 24px; bottom: 20px; color: rgba(231, 214, 190, .72); line-height: 1.6; }
.readout-row { padding: 20px 0; border-bottom: 1px solid rgba(176, 138, 75, .22); }
.readout-row b { font-family: var(--display); font-size: 54px; color: #E7D6BE; font-weight: 400; }
.compass-rose { width: 150px; height: 150px; border: 1px solid #B08A4B; border-radius: 50%; margin: 8px auto; animation: rotateSlow 28s linear infinite; background: conic-gradient(from 45deg, transparent 0 20deg, rgba(176, 138, 75, .35) 21deg 25deg, transparent 26deg 90deg); }

.bloom-deck { grid-template-columns: .7fr 1.3fr; gap: 28px; }
.side-heading { align-self: center; }
.bloom-console { position: relative; z-index: 1; display: grid; grid-template-columns: 150px 1fr 150px; gap: 22px; align-items: center; }
.bloom-gauge { position: relative; width: min(560px, 52vw); aspect-ratio: 1; margin: auto; border-radius: 50%; border: 1px solid rgba(176, 138, 75, .48); display: grid; place-items: center; background: radial-gradient(circle, rgba(45, 111, 115, .35), rgba(75, 43, 78, .48) 48%, rgba(23, 16, 24, .75) 70%); box-shadow: inset 0 0 80px rgba(45, 111, 115, .18), 0 40px 120px rgba(0,0,0,.45); }
.bloom-pool { position: absolute; width: 42%; height: 42%; border-radius: 50%; background: radial-gradient(circle, #E7D6BE 0 8%, #B08A4B 18%, #4B2B4E 44%, #171018 70%); opacity: .72; animation: bloomPulse 4s ease-in-out infinite; }
.gauge-ticks { position: absolute; inset: 5%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(176, 138, 75, .78) 0 1deg, transparent 1deg 8deg); mask: radial-gradient(transparent 0 69%, black 70%); animation: rotateSlow 35s linear infinite reverse; }
.bloom-gauge strong { position: relative; font-family: var(--display); font-size: clamp(96px, 12vw, 190px); font-weight: 400; z-index: 1; }
.bloom-gauge small { position: absolute; bottom: 27%; font-family: var(--mono); letter-spacing: .16em; color: rgba(231, 214, 190, .7); }
.kelp { position: absolute; width: 80px; height: 210px; border-left: 2px solid rgba(169, 132, 167, .54); border-radius: 50%; filter: blur(.2px); animation: kelpSway 6s ease-in-out infinite alternate; }
.steam-one { left: 21%; top: 14%; }
.steam-two { right: 18%; top: 21%; animation-delay: -2s; border-color: rgba(45, 111, 115, .56); }
.vertical-readouts { display: grid; gap: 18px; }
.vertical-readouts span { writing-mode: vertical-rl; min-height: 170px; padding: 16px 10px; border: 1px solid rgba(176, 138, 75, .28); border-radius: 999px; text-align: center; background: rgba(23,16,24,.48); }
.vertical-readouts b { color: #D9827A; }

.tasting-deck { background: radial-gradient(circle at 16% 78%, rgba(45,111,115,.18), transparent 28%); }
.coordinate-field { position: relative; height: 54vh; z-index: 1; }
.coordinate { position: absolute; font-family: var(--display); font-size: clamp(54px, 8vw, 136px); line-height: .86; color: #E7D6BE; transition: transform .6s ease, color .6s ease; }
.coordinate:hover { transform: translateY(-12px); color: #D9827A; }
.coordinate span { display: block; font-family: var(--mono); font-size: 12px; color: #B08A4B; letter-spacing: .2em; }
.note-a { left: 4%; top: 10%; }
.note-b { right: 8%; top: 34%; color: #A984A7; }
.note-c { left: 26%; bottom: 0; color: #B08A4B; }
.lounge-copy { max-width: 520px; margin-left: auto; color: rgba(231,214,190,.68); line-height: 1.75; font-size: 18px; }

.pour-deck { isolation: isolate; }
.pour-stream { position: absolute; top: -10%; left: 50%; width: 70px; height: 70vh; transform: translateX(-50%) skewX(-9deg); background: linear-gradient(180deg, transparent, #B08A4B 10%, #171018 65%, transparent); filter: blur(1px); opacity: .78; animation: pourFlow 4s ease-in-out infinite; }
.dark-ocean { position: absolute; left: -10%; right: -10%; bottom: -16%; height: 45vh; border-radius: 50% 50% 0 0; background: radial-gradient(ellipse at 50% 0, rgba(169,132,167,.3), transparent 30%), #171018; border-top: 1px solid rgba(45,111,115,.6); }
.final-copy { position: relative; z-index: 1; max-width: 720px; margin-left: auto; }
.final-copy h2 { font-size: clamp(86px, 14vw, 210px); }
.final-copy p:not(.mono-kicker) { color: rgba(231,214,190,.74); font-size: 20px; line-height: 1.65; }
.instrument-button { margin-top: 28px; padding: 14px 22px; border-radius: 999px; border: 1px solid #B08A4B; background: rgba(75,43,78,.28); color: #E7D6BE; font-family: var(--mono); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background .4s ease, color .4s ease, transform .4s ease; }
.instrument-button:hover { background: #B08A4B; color: #171018; transform: translateY(-4px); }

.fragment-toast { position: fixed; right: 28px; bottom: 28px; z-index: 20; padding: 13px 16px; border: 1px solid rgba(176,138,75,.48); border-radius: 999px; background: rgba(23,16,24,.82); color: #E7D6BE; font-family: var(--mono); letter-spacing: .12em; font-size: 11px; text-transform: uppercase; opacity: 0; transform: translateY(16px); transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
.fragment-toast.show { opacity: 1; transform: translateY(0); }

@keyframes mistDrift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(9vw,-5vh,0) scale(1.08); } }
@keyframes gridDrift { from { background-position: 0 0, 0 0; } to { background-position: 0 42px, 72px 0; } }
@keyframes rotateSlow { to { transform: rotate(360deg); } }
@keyframes waveSlide { from { transform: translateX(0); } to { transform: translateX(120px); } }
@keyframes bloomPulse { 0%,100% { transform: scale(.82); opacity: .58; } 50% { transform: scale(1.22); opacity: .86; } }
@keyframes kelpSway { from { transform: rotate(-6deg) translateY(0); } to { transform: rotate(8deg) translateY(-14px); } }
@keyframes pourFlow { 0%,100% { opacity: .48; height: 56vh; } 50% { opacity: .86; height: 76vh; } }

@media (max-width: 900px) {
  .mini { position: relative; inset: auto; width: 100%; }
  .hero-orbit { height: auto; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 90px; }
  .espresso-monitor { grid-column: 1 / -1; order: -1; }
  .hero-title-wrap { position: relative; left: auto; bottom: auto; grid-column: 1 / -1; margin-top: 24px; }
  .chart-console, .bloom-deck, .bloom-console { grid-template-columns: 1fr; }
  .bloom-gauge { width: min(82vw, 520px); }
  .vertical-readouts { grid-template-columns: repeat(3, 1fr); }
  .vertical-readouts span { writing-mode: horizontal-tb; min-height: auto; }
  .coordinate-field { height: 70vh; }
}