@import url("cluster-fonts.css");

:root {
  --bg: #07080b;
  --panel: #111216;
  --panel-2: #15171c;
  --line: #2a2d33;
  --line-soft: rgba(242, 244, 247, 0.09);
  --text: #f2f4f7;
  --muted: #8b919c;
  --dim: #626975;
  --soft: #626975;
  --green: #20c56b;
  --accent: #20c56b;
  --red: #ef4444;
  --danger: #ef4444;
  --plex-sans: "IBM Plex Sans", system-ui, sans-serif;
  --plex-cond: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
  --plex-mono: "IBM Plex Mono", ui-monospace, monospace;
  --radius: 8px;
  --radius-lg: 12px;
  --max: 1240px;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; color-scheme: dark; overflow-x: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    radial-gradient(circle at 75% 8%, rgba(32,197,107,.09), transparent 32rem),
    var(--bg) !important;
  background-size: 48px 48px, 48px 48px, auto, auto !important;
  font-family: var(--plex-sans) !important;
  font-feature-settings: "tnum" 1, "lnum" 1;
  -webkit-font-smoothing: antialiased;
}

body::after {
  content: "";
  position: fixed;
  z-index: 9999;
  left: 0;
  right: 0;
  top: -2px;
  height: 1px;
  pointer-events: none;
  opacity: .32;
  background: linear-gradient(90deg, transparent 8%, rgba(32,197,107,.15) 30%, rgba(32,197,107,.9) 50%, rgba(32,197,107,.15) 70%, transparent 92%);
  box-shadow: 0 0 18px rgba(32,197,107,.2);
  animation: viewport-scan 11s linear infinite;
}

a { color: inherit; }

.page,
.site-header-inner,
.footer-inner {
  width: min(var(--max), calc(100% - 48px)) !important;
  max-width: var(--max) !important;
  margin-inline: auto !important;
}

.site-header,
body > header.site-header {
  position: sticky !important;
  inset: 0 0 auto !important;
  z-index: 100 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line-soft) !important;
  background: rgba(7, 8, 11, .86) !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
  box-shadow: none !important;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}

.site-header.is-scrolled {
  background: rgba(7,8,11,.95) !important;
  border-bottom-color: rgba(32,197,107,.18) !important;
  box-shadow: 0 10px 36px rgba(0,0,0,.34) !important;
}

.site-header-inner {
  min-height: 68px;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
}

.site-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 11px !important;
  font-family: var(--plex-cond) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: .15em !important;
  line-height: 1 !important;
}

.site-mark {
  width: 34px !important;
  height: 34px !important;
  border: 1px solid rgba(32,197,107,.28) !important;
  border-radius: 5px !important;
  background: linear-gradient(145deg, rgba(32,197,107,.13), rgba(255,255,255,.02)), #0b0d10 !important;
  box-shadow: inset 0 0 18px rgba(32,197,107,.08), 0 0 24px rgba(32,197,107,.07) !important;
  position: relative;
  isolation: isolate;
}

.site-mark span { width: 15px !important; height: 15px !important; }

.site-mark::after {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: -1;
  border: 1px solid rgba(32,197,107,.25);
  border-radius: inherit;
  opacity: 0;
  animation: signal-ring 3.8s ease-out infinite;
}

.site-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  max-width: none !important;
  font-family: var(--plex-cond) !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  letter-spacing: .13em !important;
}

.site-nav a {
  min-height: 34px;
  padding: 0 10px !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  color: var(--muted) !important;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease !important;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] {
  color: var(--text) !important;
  border-color: var(--line) !important;
  background: rgba(255,255,255,.035) !important;
  outline: none;
}

.site-nav a[aria-current="page"] { color: var(--green) !important; }
.site-nav a.is-section-active { color: var(--green) !important; border-color: rgba(32,197,107,.2) !important; background: rgba(32,197,107,.055) !important; }

.nav-toggle { display: none; }

.eyebrow,
.section-kicker,
.tag,
.coming,
.ctrl-label {
  font-family: var(--plex-cond) !important;
  font-weight: 600 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

h1, h2, h3 {
  font-family: var(--plex-cond) !important;
  font-weight: 600 !important;
  text-wrap: balance;
}

h1 { letter-spacing: -.045em !important; }
h2 { letter-spacing: -.025em !important; }

.button,
button,
[role="button"] {
  font-family: var(--plex-cond) !important;
  font-weight: 600 !important;
  letter-spacing: .035em;
  border-radius: 4px !important;
}

.button {
  min-height: 44px !important;
  padding: 0 16px !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)), #111216 !important;
  box-shadow: none !important;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.icon-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.button::after,
.icon-btn::after {
  content: "";
  position: absolute;
  inset: -2px auto -2px -45%;
  z-index: -1;
  width: 34%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transition: left .55s cubic-bezier(.2,.7,.2,1);
}

.button:hover::after,
.button:focus-visible::after,
.icon-btn:hover::after,
.icon-btn:focus-visible::after { left: 118%; }

.button:hover,
.button:focus-visible {
  border-color: rgba(32,197,107,.55) !important;
  color: #fff !important;
  background: rgba(32,197,107,.08) !important;
  box-shadow: 0 0 28px rgba(32,197,107,.1) !important;
  outline: none;
  transform: translateY(-1px);
}

.button.primary,
.button:not(.secondary)[data-goatcounter-click] {
  color: #041008 !important;
  border-color: var(--green) !important;
  background: var(--green) !important;
  box-shadow: 0 0 28px rgba(32,197,107,.14) !important;
}

section { border-color: var(--line-soft) !important; }

.feature,
.stat,
.truth-row,
.callout,
.contact-card,
.download-card,
.download-meta-card,
.card,
.asset,
.metric,
.control-summary,
.control-summary-item {
  border-color: var(--line-soft) !important;
  border-radius: var(--radius) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.025), transparent 50%), rgba(17,18,22,.76) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}

.feature,
.truth-row,
.download-card,
.asset,
.card { transition: border-color 180ms ease, transform 180ms ease, background 180ms ease; }

.feature,
.truth-row,
.download-card,
.download-meta-card,
.card,
.stat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.feature::before,
.download-card::before,
.download-meta-card::before,
.card::before,
.stat::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(340px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(32,197,107,.13), transparent 62%);
  transition: opacity .3s ease;
}

.feature:hover::before,
.download-card:hover::before,
.download-meta-card:hover::before,
.card:hover::before,
.stat:hover::before { opacity: 1; }

.truth-row::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--green), transparent 85%);
  box-shadow: 0 0 12px rgba(32,197,107,.35);
  transition: width 850ms cubic-bezier(.2,.75,.2,1) var(--reveal-delay, 0ms);
}

.truth-row.is-visible::after { width: 100%; }

@media (hover: hover) {
  .feature:hover,
  .truth-row:hover,
  .download-card:hover,
  .asset:hover,
  .card:hover {
    transform: translateY(-2px);
    border-color: rgba(32,197,107,.25) !important;
    background-color: rgba(18,20,24,.9) !important;
  }
}

.feature .icon,
.check {
  border-radius: 4px !important;
  font-family: var(--plex-mono) !important;
  background: rgba(32,197,107,.08) !important;
  border-color: rgba(32,197,107,.22) !important;
}

.stat b,
.metric strong,
.download-stat b,
.asset-meta strong,
.site-counter strong { font-family: var(--plex-mono) !important; }

/* Homepage instrument presentation */
body:has(.hero .preview-stack) .hero {
  min-height: 720px !important;
  padding: 76px 0 104px !important;
  grid-template-columns: minmax(0, 720px) minmax(280px, 340px) !important;
  gap: clamp(28px, 4vw, 64px) !important;
  align-items: stretch !important;
  position: relative;
}

body:has(.hero .preview-stack) .hero-copy {
  width: 100%;
  min-width: 0;
  padding-right: 0;
}

body:has(.hero .preview-stack) .hero-copy > * {
  max-width: 100%;
}

body:has(.hero .preview-stack) .actions,
body:has(.hero .preview-stack) .stats {
  width: 100%;
  max-width: none;
}

body:has(.hero .preview-stack) .hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0 calc(50% - 50vw);
  background:
    linear-gradient(90deg, rgba(7,8,11,.98) 0%, rgba(7,8,11,.86) 42%, rgba(7,8,11,.28) 78%, rgba(7,8,11,.65) 100%),
    url("dashui-studio-hero.png") center / cover no-repeat;
  border-bottom: 1px solid var(--line-soft);
  opacity: .92;
}

body:has(.hero .preview-stack) .hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - 50vw);
  background: radial-gradient(circle at 72% 47%, rgba(32,197,107,.14), transparent 28rem);
  pointer-events: none;
  animation: hero-illumination 8s ease-in-out infinite alternate;
}

body:has(.hero .preview-stack) .hero h1 {
  width: 100%;
  max-width: none;
  font-size: clamp(3.6rem, 5.5vw, 5.4rem) !important;
  line-height: .94 !important;
  text-transform: uppercase;
  text-shadow: 0 0 42px rgba(242,244,247,.04), 0 22px 50px rgba(0,0,0,.36);
  animation: title-ignite 900ms cubic-bezier(.16,.75,.24,1) both;
}

body:has(.hero .preview-stack) .subline {
  width: 100%;
  max-width: none;
  color: #b5bbc5 !important;
  font-size: 1.02rem !important;
}

body:has(.hero .preview-stack) .eyebrow {
  width: 100%;
  border-radius: 4px !important;
  background: rgba(7,8,11,.72) !important;
  font-size: .68rem !important;
  color: #c0c5cd !important;
}

.phone,
.landscape-phone {
  padding: 9px !important;
  border: 1px solid rgba(220,226,234,.7) !important;
  border-radius: 31px !important;
  background: linear-gradient(145deg, #34383f, #08090c 24%, #1b1e23 70%, #494f58) !important;
  box-shadow:
    0 38px 90px rgba(0,0,0,.7),
    inset 0 0 0 2px #08090b,
    inset 0 0 0 4px rgba(255,255,255,.12),
    0 0 48px rgba(32,197,107,.09) !important;
}

.screen {
  border-radius: 23px !important;
  background: #000 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
}

.preview-stack .phone {
  width: min(340px, 31vw) !important;
  transform: none !important;
  animation: device-in 700ms cubic-bezier(.2,.75,.25,1) both;
  transition: box-shadow .3s ease !important;
}

.preview-stack {
  align-self: stretch !important;
  position: relative;
  min-height: 0;
  padding-top: 0;
  margin-top: 0 !important;
}

.preview-stack .phone-wrap {
  position: absolute;
  inset: 58px 0 0;
  height: auto;
  align-items: flex-end;
  animation: none;
}

.preview-stack .phone-glow,
.preview-stack .phone {
  height: 100%;
}

.preview-stack .phone {
  display: flex;
  flex-direction: column;
}

.landscape-preview {
  width: 100%;
  max-width: none;
  margin-top: 42px !important;
  animation: none;
}
.landscape-preview .landscape-phone {
  width: 100% !important;
  transform: none !important;
}

.landscape-preview .phone-glow {
  width: 100%;
}

.portrait-screen {
  flex: 1 1 auto;
  height: auto !important;
  min-height: 0;
  overflow: hidden !important;
  container-type: inline-size;
}

.portrait-scroll-content {
  position: relative;
  width: 100%;
  will-change: transform;
  transform: translate3d(0, var(--portrait-scroll-y, 0px), 0);
}

.cluster-sim {
  position: relative;
  aspect-ratio: 1843 / 853;
  overflow: hidden;
  color: #f2f4f7;
  background: #03060a !important;
  font-family: var(--plex-cond);
  font-variant-numeric: tabular-nums;
}

.cluster-grid {
  position: absolute;
  inset: 0;
  opacity: .55;
  background-image: linear-gradient(rgba(32,197,107,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(32,197,107,.055) 1px, transparent 1px);
  background-size: 7.5% 13%;
  mask-image: radial-gradient(ellipse at 50% 58%, #000 28%, transparent 82%);
}

.cluster-topbar {
  position: absolute;
  z-index: 5;
  inset: 4.5% 2.5% auto;
  display: flex;
  align-items: center;
  gap: 1.2%;
  color: #d8dce2;
  font-size: clamp(7px, .72vw, 11px);
  font-weight: 600;
  letter-spacing: .16em;
}

.cluster-exit,
.cluster-settings,
.pull-state {
  border: 1px solid rgba(32,197,107,.42);
  border-radius: 3px;
  padding: .5em .85em;
}

.cluster-exit { color: #ef4444; border-color: #ef4444; }
.cluster-settings { margin-left: auto; color: #20c56b; font-size: 1.55em; }
.pull-state { margin-left: 1%; color: #8b919c; font-family: var(--plex-mono); }

.cluster-toggle {
  width: 3.6em;
  height: 1.8em;
  padding: .2em;
  border: 1px solid rgba(32,197,107,.55);
  border-radius: 999px;
}

.cluster-toggle i {
  display: block;
  width: 1.2em;
  height: 1.2em;
  margin-left: auto;
  border-radius: 50%;
  background: #20c56b;
  box-shadow: 0 0 12px rgba(32,197,107,.75);
}

.cluster-tach {
  position: absolute;
  z-index: 2;
  top: 6%;
  left: 5%;
  width: 90%;
  height: 29%;
}

.cluster-tach-segments {
  position: absolute;
  inset: 0;
}

.cluster-tach-segments i {
  position: absolute;
  width: 1.05%;
  height: 36%;
  border: 1px solid rgba(32,197,107,.26);
  background: rgba(32,197,107,.025);
  transform-origin: 50% 100%;
}

.cluster-tach-segments i.active {
  border-color: #20c56b;
  background: #20c56b;
  box-shadow: 0 0 12px rgba(32,197,107,.52);
}

.cluster-tach-segments i.warning.active { border-color: #ef4444; background: #ef4444; box-shadow: 0 0 12px rgba(239,68,68,.42); }

.tach-label { position: absolute; bottom: -10%; color: #d9dde4; font-family: var(--plex-mono); font-size: clamp(8px, 1.2vw, 18px); }
.tach-zero { left: 0; }.tach-two { left: 25%; }.tach-four { left: 49%; }.tach-six { left: 74%; }.tach-nine { right: 0; color: #ef4444; }

.cluster-gauge {
  --gauge-angle: 0deg;
  position: absolute;
  z-index: 3;
  top: 38%;
  width: 27%;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(32,197,107,.18), rgba(3,6,10,.98) 66%);
  box-shadow: inset 0 0 28px rgba(32,197,107,.14), 0 0 18px rgba(32,197,107,.12);
}

.cluster-gauge::before {
  content: "";
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  background: conic-gradient(from 225deg, #20c56b 0 var(--gauge-angle), rgba(32,197,107,.15) var(--gauge-angle) 270deg, transparent 270deg 360deg);
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  filter: drop-shadow(0 0 5px rgba(32,197,107,.6));
}

.cluster-gauge strong { position: relative; font-size: clamp(28px, 5.3vw, 76px); font-weight: 500; line-height: .9; }
.cluster-gauge span, .cluster-gauge small { position: relative; color: #b6bbc4; font-size: clamp(8px, 1.2vw, 17px); letter-spacing: .14em; }
.cluster-gauge small { margin-top: .35em; }
.cluster-rpm { left: 22.5%; }
.cluster-speed { right: 22.5%; }
.cluster-gauge-small { top: 53%; width: 18%; }
.cluster-gauge-small strong { font-size: clamp(21px, 3.8vw, 54px); }
.cluster-boost { left: 1.5%; }
.cluster-oil { right: 1.5%; }

.app-home {
  min-height: 1750px;
  padding: 5.5cqi;
  color: #f2f4f7;
  background: #07080b;
  font-family: var(--plex-cond);
  font-variant-numeric: tabular-nums;
}

.app-home-header {
  min-height: 16cqi;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.app-home-header > strong { font-size: 7cqi; letter-spacing: .05em; }
.connection-pill { display: inline-flex; align-items: center; gap: 2cqi; color: #aeb4be; font-size: 3.4cqi; letter-spacing: .12em; }
.connection-pill i { width: 3cqi; height: 3cqi; border-radius: 50%; background: #20c56b; box-shadow: 0 0 12px rgba(32,197,107,.65); }
.app-gear { justify-self: end; color: #20c56b; font-size: 9cqi; }

section.app-panel {
  margin: 6cqi 0 0;
  padding: 5cqi !important;
  border: 1px solid #2a2d33 !important;
  border-radius: 2px !important;
  background: #111216 !important;
}

section.app-panel h3 {
  margin: 0 0 4cqi;
  color: #8b919c;
  font-size: 3.8cqi !important;
  font-weight: 500 !important;
  letter-spacing: .13em;
}

.adapter-name { display: flex; align-items: center; gap: 3cqi; }
.adapter-name strong { font-size: 6cqi; font-weight: 500; }
.adapter-name span { padding: .5cqi 1.5cqi; border: 1px solid #2a2d33; color: #aeb4be; font-size: 3.4cqi; }
.adapter-panel p { color: #8b919c; font-family: var(--plex-mono); font-size: 3.2cqi; line-height: 1.65; }

section.app-panel button,
.report-button {
  width: 100%;
  min-height: 12cqi;
  margin-top: 2.5cqi;
  border: 1px solid #2a2d33 !important;
  border-radius: 2px !important;
  color: #f2f4f7 !important;
  background: #15171c !important;
  font-size: 3.5cqi !important;
  letter-spacing: .08em;
}

section.app-panel button em { margin-left: 1.6cqi; color: #8b919c; font-family: var(--plex-mono); font-size: .76em; font-style: normal; }

.live-data-head { display: flex; align-items: center; justify-content: space-between; }
.live-data-head button { width: auto !important; min-height: 8cqi !important; margin: 0 !important; padding: 0 3cqi !important; }

.home-pid-row {
  margin-top: 3cqi;
  padding: 3.4cqi;
  border: 1px solid #2a2d33;
  background: #15161a;
}

.home-pid-row > div { display: grid; grid-template-columns: 1fr auto auto; align-items: start; gap: 2cqi; }
.home-pid-row b { font-size: 4.5cqi; font-weight: 400; }
.home-pid-row b > span { color: inherit; font-size: inherit; }
.home-pid-row b small { color: #aeb4be; font-family: var(--plex-mono); font-size: .62em; }
.home-pid-row span { color: #aeb4be; font-size: 3.8cqi; }
.home-pid-row strong { min-width: 23cqi; font-size: 10cqi; font-weight: 400; line-height: .9; text-align: right; }
.home-pid-row svg { width: 100%; height: 8cqi; margin-top: 2cqi; overflow: visible; }
.home-pid-row polyline { fill: none; stroke: #20c56b; stroke-width: 1.2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px rgba(32,197,107,.32)); }
.version-panel > strong { display: block; margin-bottom: 2cqi; font-size: 6cqi; }
.report-button { margin: 6cqi 0 2cqi; }

.phone-glow::before {
  background: radial-gradient(circle, rgba(32,197,107,.3), transparent 64%) !important;
  filter: blur(34px) !important;
}

.section-head { max-width: 780px !important; }
.section-kicker { font-size: .68rem !important; }
.section-head h2 { font-size: clamp(2rem, 4vw, 3.6rem) !important; }
.feature { min-height: 205px !important; padding: 20px !important; }
.feature .icon { margin-bottom: 44px !important; }
.feature h3 { font-size: 1rem !important; text-transform: uppercase; letter-spacing: .03em; }

/* Utility pages */
body:not(:has(.preview-stack)) main.page { padding-bottom: 96px; }
body:not(:has(.preview-stack)) main.page > .hero {
  max-width: 920px !important;
  padding: 80px 0 56px !important;
  margin: 0 !important;
}
body:not(:has(.preview-stack)) main.page > .hero h1,
body > main.page > h1 {
  font-size: clamp(2.8rem, 6vw, 5.8rem) !important;
  line-height: .95 !important;
  text-transform: uppercase;
}

/* Editor shell: visual reskin without changing its interaction model */
body:has(#cluster) > .page {
  width: min(1380px, calc(100% - 40px)) !important;
  max-width: 1380px !important;
  padding-top: 42px !important;
}

body:has(#cluster) h1 { font-size: clamp(2rem, 4vw, 3.6rem) !important; line-height: 1 !important; text-transform: uppercase; }
body:has(#cluster) .lede { max-width: 860px !important; font-size: .94rem !important; }
body:has(#cluster) .controls,
body:has(#cluster) .designer,
body:has(#cluster) .save-panel,
body:has(#cluster) .editor-panel {
  border-color: var(--line-soft) !important;
  border-radius: var(--radius) !important;
  background-color: rgba(17,18,22,.82) !important;
}

.compatibility-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0 22px;
  padding: 12px 14px;
  border: 1px solid rgba(32,197,107,.25);
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(32,197,107,.09), rgba(32,197,107,.025));
  font-family: var(--plex-cond);
  position: relative;
  overflow: hidden;
}

.compatibility-strip::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -35%;
  width: 28%;
  background: linear-gradient(90deg, transparent, rgba(32,197,107,.11), transparent);
  transform: skewX(-18deg);
  animation: status-sweep 5.5s ease-in-out infinite;
  pointer-events: none;
}

.compatibility-strip strong {
  color: var(--green);
  letter-spacing: .09em;
  text-transform: uppercase;
  font-size: .78rem;
}

.compatibility-strip span { color: var(--muted); font-size: .78rem; }
.compatibility-strip[data-state="error"] { border-color: rgba(239,68,68,.42); background: rgba(239,68,68,.06); }
.compatibility-strip[data-state="error"] strong { color: var(--red); }

.reveal { opacity: 0; transform: translateY(20px) scale(.995); transition: opacity 650ms ease var(--reveal-delay, 0ms), transform 650ms cubic-bezier(.2,.75,.2,1) var(--reveal-delay, 0ms); }
.reveal.is-visible { opacity: 1; transform: none; }

@keyframes device-in {
  from { opacity: 0; filter: blur(8px) brightness(.7); }
  to { opacity: 1; filter: none; }
}

@keyframes viewport-scan {
  0% { transform: translateY(0); opacity: 0; }
  8% { opacity: .28; }
  52% { opacity: .16; }
  92% { opacity: .28; }
  100% { transform: translateY(100vh); opacity: 0; }
}

@keyframes signal-ring {
  0%, 38% { transform: scale(.72); opacity: 0; }
  46% { opacity: .65; }
  72%, 100% { transform: scale(1.28); opacity: 0; }
}

@keyframes hero-illumination {
  from { opacity: .72; transform: translate3d(-2%, 0, 0) scale(.98); }
  to { opacity: 1; transform: translate3d(2%, -1%, 0) scale(1.04); }
}

@keyframes title-ignite {
  from { opacity: 0; transform: translateY(18px); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes device-drift {
  from { transform: translateY(0); }
  to { transform: translateY(-9px); }
}

@keyframes landscape-drift {
  from { transform: translateY(0); }
  to { transform: translateY(-5px); }
}

@keyframes status-sweep {
  0%, 42% { left: -35%; opacity: 0; }
  50% { opacity: 1; }
  74%, 100% { left: 118%; opacity: 0; }
}

@media (max-width: 1200px) {
  .site-header-inner { min-height: 62px; }
  .site-nav { gap: 0 !important; }
  .site-nav a { padding-inline: 7px !important; font-size: .66rem; }
  body:has(.hero .preview-stack) .hero {
    min-height: auto !important;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 34vw) !important;
    gap: 24px !important;
    padding-top: 58px !important;
  }
  .preview-stack .phone { width: 100% !important; transform: none !important; }
  .landscape-preview .landscape-phone { width: 100% !important; transform: none !important; }
  .preview-stack .phone-wrap,
  .landscape-preview { animation: none; }
}

@media (max-width: 720px) {
  .page, .site-header-inner, .footer-inner { width: min(100% - 28px, var(--max)) !important; }
  body:has(.hero .preview-stack) .hero-copy {
    width: 100% !important;
    min-width: 0 !important;
    padding-right: 0 !important;
  }
  body:has(.hero .preview-stack) .hero {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .preview-stack {
    position: static;
    width: min(405px, 88vw);
    height: auto;
    padding-top: 0;
    margin-inline: auto !important;
  }
  .preview-stack .phone-wrap,
  .preview-stack .phone-glow,
  .preview-stack .phone {
    height: auto;
  }
  .preview-stack .phone-wrap {
    position: static;
    inset: auto;
  }
  .portrait-screen {
    flex: none;
    height: min(660px, 168vw) !important;
  }
  body:has(#cluster) .controls {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body:has(#cluster) .ctrl-block,
  body:has(#cluster) .seg-picker,
  body:has(#cluster) .slider-row {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body:has(#cluster) .seg-picker button {
    min-width: 0 !important;
    padding-inline: 4px !important;
    font-size: .66rem !important;
  }
  body:has(#cluster) .editor-bar .ebar-group {
    width: 100% !important;
    min-width: 0 !important;
    padding-right: 0 !important;
    border-right: 0 !important;
    flex-wrap: wrap !important;
  }
  body:has(#cluster) .designer-grid,
  body:has(#cluster) .inspector-body {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body:has(#cluster) .ds-group {
    min-width: 0 !important;
    border-right: 0 !important;
  }
  body:has(#cluster) .ds-row {
    grid-template-columns: 76px minmax(0, 1fr) 72px !important;
    gap: 6px !important;
  }
  body:has(#cluster) .ds-row.ds-pair-row {
    grid-template-columns: 76px minmax(0, 1fr) !important;
  }
  body:has(#cluster) .ds-pair { gap: 4px !important; }
  body:has(#cluster) .ds-pair input,
  body:has(#cluster) .ds-row .ds-val input { width: 48px !important; }
  .site-header-inner { flex-wrap: wrap; padding: 12px 0 !important; }
  .site-brand { order: 1; }
  .nav-toggle {
    display: inline-flex;
    order: 2;
    width: 38px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    color: var(--text);
    background: var(--panel);
  }
  .site-nav {
    display: none !important;
    order: 3;
    flex: 1 0 100%;
    width: 100%;
    padding-top: 8px;
    border-top: 1px solid var(--line-soft);
    justify-content: flex-start !important;
  }
  .site-header[data-menu-open="true"] .site-nav { display: grid !important; grid-template-columns: repeat(2, 1fr); }
  .site-nav a { min-height: 40px; padding-inline: 10px !important; }
  body:has(.hero .preview-stack) .hero h1 { font-size: clamp(2.7rem, 12vw, 3.65rem) !important; }
  body:has(.hero .preview-stack) .hero::before { opacity: .5; background-position: 62% center; }
  .compatibility-strip { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  body::after,
  .site-mark::after,
  .compatibility-strip::after { display: none; }
}