/* Thin Client 2026 visual system — this layer intentionally overrides the legacy skin. */
:root {
  --ink: #08080b;
  --ink-raised: #101014;
  --ink-soft: #15151b;
  --panel: rgba(18, 18, 24, 0.88);
  --panel-solid: #15151b;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.17);
  --purple: #a46dff;
  --purple-bright: #c3a1ff;
  --lilac: #ebe3ff;
  --text: #f5f3f8;
  --muted: #9b98a5;
  --dim: #696773;
  --green: #7bf2c0;
  --danger: #ff7a8a;
  --shadow-deep: 0 30px 90px rgba(0, 0, 0, 0.44);
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --display: "Space Grotesk", "Manrope", sans-serif;
  --body: "Manrope", Inter, system-ui, sans-serif;
  color-scheme: dark;
  font-family: var(--body);
}

* { box-sizing: border-box; }

html { background: var(--ink); scroll-behavior: smooth; overflow-x: clip; }

body {
  min-width: 320px;
  overflow-x: clip;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  letter-spacing: -0.018em;
}

body::before {
  z-index: -6;
  opacity: 1;
  background:
    linear-gradient(90deg, transparent 0, transparent calc(50% - 0.5px), rgba(255,255,255,0.026) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(rgba(255,255,255,0.019) 1px, transparent 1px),
    linear-gradient(180deg, #0c0c11 0%, #08080b 34%, #0a090f 100%);
  background-size: 128px 128px, 100% 128px, 100% 100%;
  mask-image: none;
}

::selection { background: rgba(173, 116, 255, 0.42); color: #fff; }

a { transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

#particle-canvas,
.nebula,
.event-horizon,
.mouse-glow { display: none !important; }

.section-shell { width: min(1240px, calc(100% - 48px)); }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  width: 100%;
  height: 76px;
  margin: 0;
  padding: 0 max(24px, calc((100vw - 1192px) / 2));
  translate: none;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.075);
  border-radius: 0;
  background: rgba(8, 8, 11, 0.72);
  box-shadow: none;
  backdrop-filter: blur(18px) saturate(125%);
}

.site-header::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: max(24px, calc((100vw - 1192px) / 2));
  width: 70px;
  height: 1px;
  background: var(--purple);
  box-shadow: 22px 0 24px var(--purple);
  transition: width 220ms ease;
}

.site-header.scrolled { height: 68px; background: rgba(8, 8, 11, 0.9); border-color: rgba(255,255,255,0.1); }
.site-header.scrolled::after { width: 124px; }

.brand { gap: 10px; font-family: var(--display); font-size: 1.18rem; font-weight: 700; letter-spacing: -0.06em; }
.brand-logo { width: 34px; height: 34px; border: 0; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 10px 26px rgba(133,81,255,0.22); }
.brand-plus { color: var(--purple); }

.nav-links { gap: 28px; margin-left: auto; margin-right: 24px; }
.nav-links a { position: relative; color: #b8b5bf; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; }
.nav-links a::after { content: ""; position: absolute; right: 0; bottom: -9px; left: 0; height: 1px; background: var(--purple); scale: 0 1; transform-origin: left; transition: scale 170ms ease; }
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { scale: 1 1; }

.nav-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid rgba(202,178,255,0.25);
  border-radius: 6px;
  background: rgba(167,109,255,0.11);
  color: var(--lilac);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.nav-action:hover { border-color: var(--purple-bright); background: rgba(167,109,255,0.2); transform: translateY(-1px); }
.nav-action-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px var(--green); }
.menu-toggle { display: none; }
.mobile-menu { display: none; }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(460px, 1.14fr);
  align-items: center;
  min-height: 780px;
  padding: 148px 0 94px;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 110px;
  right: -16vw;
  width: min(780px, 65vw);
  aspect-ratio: 1;
  border: 1px solid rgba(164,109,255,0.18);
  border-radius: 50%;
  box-shadow: inset 0 0 120px rgba(164,109,255,0.055), 0 0 100px rgba(96,59,180,0.07);
}
.hero::after { content: "THIN CLIENT"; position: absolute; z-index: -1; right: -0.035em; bottom: 62px; color: rgba(255,255,255,0.018); font: 800 clamp(6rem, 14vw, 14rem)/0.7 var(--display); letter-spacing: -0.1em; pointer-events: none; }

.hero-copy { position: relative; z-index: 2; padding: 8px 0; }
.hero-status, .eyebrow, .feature-index, .download-card-index {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #bca3eb;
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.075em;
  line-height: 1;
  text-transform: uppercase;
}
.hero-status { margin-bottom: 27px; }
.status-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 15px rgba(123,242,192,0.8); }
.status-divider { width: 22px; height: 1px; background: rgba(255,255,255,0.24); }

.hero h1, .section-heading h2, .pricing-copy h3, .legal-card h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.085em;
}
.hero h1 { max-width: 650px; font-size: clamp(4.4rem, 7.3vw, 7.3rem); line-height: 0.83; }
.hero h1 span { display: inline-block; color: transparent; -webkit-text-stroke: 1.5px var(--purple-bright); text-shadow: 0 0 35px rgba(164,109,255,0.2); }
.hero-lede { max-width: 500px; margin: 32px 0 30px; color: #a6a2ad; font-size: 1rem; line-height: 1.78; letter-spacing: -0.025em; }

.hero-actions, .pricing-actions, .support-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 49px;
  padding: 0 18px;
  overflow: hidden;
  border-radius: 5px;
  font-size: 0.77rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.button-primary { border: 1px solid #b383ff; background: linear-gradient(135deg, #a064ff, #7944d8); box-shadow: 0 14px 34px rgba(127,72,231,0.2), inset 0 1px rgba(255,255,255,0.24); color: white; }
.button-primary:hover { border-color: #d6c0ff; background: linear-gradient(135deg, #ad78ff, #8852e7); box-shadow: 0 18px 42px rgba(127,72,231,0.34), inset 0 1px rgba(255,255,255,0.3); transform: translateY(-2px); }
.button-secondary { border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.035); color: #d9d6df; }
.button-secondary:hover { border-color: rgba(196,164,255,0.42); background: rgba(164,109,255,0.1); color: var(--lilac); transform: translateY(-2px); }
.button span { font-size: 1rem; line-height: 1; }

.hero-metrics { display: flex; gap: 0; margin-top: 62px; border-top: 1px solid var(--line); }
.hero-metrics > div { display: grid; gap: 7px; flex: 1; min-width: 128px; padding: 19px 18px 0 0; }
.hero-metrics > div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.hero-metrics strong { color: var(--purple-bright); font: 500 0.64rem/1 var(--mono); letter-spacing: 0.08em; }
.hero-metrics span { color: #b0adb7; font-size: 0.71rem; font-weight: 700; line-height: 1.48; letter-spacing: 0.005em; }

.hero-visual { position: relative; min-height: 490px; margin-left: 20px; }
.hero-grid-decor { position: absolute; inset: 20px -3vw 15px 4vw; background-image: linear-gradient(rgba(182,144,255,0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(182,144,255,0.13) 1px, transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(135deg, transparent, black 20%, black 75%, transparent); opacity: 0.44; }
.hero-grid-decor::before, .hero-grid-decor::after { content: ""; position: absolute; background: var(--purple); }
.hero-grid-decor::before { top: 18%; left: 18%; width: 1px; height: 62%; box-shadow: 170px 0 30px rgba(164,109,255,0.6); }
.hero-grid-decor::after { right: 8%; bottom: 20%; width: 35%; height: 1px; }
.hero-shot { position: absolute; top: 66px; right: -14px; width: min(720px, 56vw); margin: 0; padding: 9px; overflow: visible; border: 1px solid rgba(217,194,255,0.4); border-radius: 4px; background: #101014; box-shadow: -26px 30px 70px rgba(0,0,0,0.52), 0 0 80px rgba(131,77,230,0.12); transform: perspective(1100px) rotateY(-8deg) rotateX(2deg) rotateZ(-1deg); transform-origin: center; }
.hero-shot::before { content: ""; position: absolute; inset: -1px; z-index: -1; border: 1px solid rgba(164,109,255,0.1); translate: 17px 17px; }
.hero-shot img { display: block; width: 100%; border: 1px solid rgba(255,255,255,0.1); filter: saturate(0.84) contrast(1.07); }
.screen-scan { position: absolute; inset: 9px; z-index: 1; pointer-events: none; opacity: 0.25; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,0.1) 4px); mix-blend-mode: overlay; }
.hero-label { position: absolute; z-index: 4; display: flex; gap: 8px; color: #d6c8ef; font: 500 0.57rem/1 var(--mono); letter-spacing: 0.12em; }
.hero-label span { color: var(--purple); }
.hero-label-top { top: 29px; right: 0; }
.hero-label-bottom { bottom: 42px; left: 17px; }
.hero-specimen { position: absolute; z-index: 3; right: -8px; bottom: 14px; display: grid; gap: 6px; color: var(--purple-bright); font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.12em; text-align: right; }
.hero-specimen b { color: #fff; font-size: 1.1rem; letter-spacing: 0.24em; }

.feature-section { padding: 138px 0 100px; }
.section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 0.52fr); gap: 42px; align-items: end; margin-bottom: 50px; }
.section-heading .eyebrow { grid-column: 1 / -1; }
.section-heading h2 { max-width: 760px; font-size: clamp(2.8rem, 5.2vw, 5.4rem); line-height: 0.91; }
.section-heading h2 em { color: var(--purple-bright); font-style: normal; }
.section-heading > p { max-width: 365px; margin: 0 0 4px auto; color: var(--muted); font-size: 0.94rem; line-height: 1.73; }

.feature-grid { display: grid; grid-template-columns: 1.25fr 0.85fr 0.85fr; grid-auto-rows: 292px; gap: 12px; }
.glass-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: linear-gradient(145deg, rgba(26,26,33,0.92), rgba(13,13,18,0.96)); box-shadow: none; }
.feature-card { padding: 26px; isolation: isolate; }
.feature-card::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(145deg, rgba(181,141,255,0.1), transparent 38%); opacity: 0; transition: opacity 260ms ease; }
.feature-card:hover { border-color: rgba(190,158,255,0.33); transform: translateY(-3px); }
.feature-card:hover::before { opacity: 1; }
.feature-card-wide { grid-row: span 2; padding: 31px; }
.feature-card h3 { max-width: 250px; margin: 0; color: #f1eef5; font-family: var(--display); font-size: 1.52rem; line-height: 1.05; letter-spacing: -0.06em; }
.feature-card p:not(.statement-copy) { max-width: 330px; margin: 13px 0 0; color: var(--muted); font-size: 0.8rem; line-height: 1.67; }
.feature-index { color: #9982bd; }
.feature-card h3 { position: absolute; bottom: 74px; left: 26px; }
.feature-card p:not(.statement-copy) { position: absolute; bottom: 24px; left: 26px; right: 24px; }
.feature-card-wide h3 { bottom: 83px; left: 31px; font-size: 2rem; }
.feature-card-wide p { bottom: 30px !important; left: 31px !important; }
.feature-graphic { position: absolute; right: 28px; top: 34px; pointer-events: none; }
.feature-graphic-map { display: grid; grid-template-columns: repeat(3, 20px); gap: 5px; padding: 10px; border: 1px solid rgba(184,150,255,0.19); background: rgba(164,109,255,0.055); transform: rotate(10deg); }
.feature-graphic-map i { display: block; width: 20px; height: 20px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.035); }
.feature-graphic-map i:nth-child(2), .feature-graphic-map i:nth-child(4), .feature-graphic-map i:nth-child(8) { background: rgba(164,109,255,0.55); box-shadow: 0 0 12px rgba(164,109,255,0.25); }
.feature-graphic-toggles { display: grid; gap: 8px; width: 76px; }
.feature-graphic-toggles span { position: relative; display: block; height: 10px; border: 1px solid rgba(255,255,255,0.11); border-radius: 999px; background: rgba(255,255,255,0.04); }
.feature-graphic-toggles span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 4px; height: 4px; border-radius: 50%; background: #85808e; }
.feature-graphic-toggles span:nth-child(1)::after, .feature-graphic-toggles span:nth-child(3)::after { right: 2px; left: auto; background: var(--green); box-shadow: 0 0 8px var(--green); }
.feature-graphic-key { display: flex; align-items: center; justify-content: center; width: 78px; height: 78px; border: 1px solid rgba(190,158,255,0.34); border-radius: 50%; color: #dfd1ff; background: radial-gradient(circle, rgba(164,109,255,0.25), transparent 64%); }
.feature-graphic-key i { position: absolute; width: 22px; height: 1px; background: var(--purple-bright); transform: rotate(-45deg) translate(21px, 17px); }
.feature-graphic-key span { font: 500 0.5rem/1 var(--mono); letter-spacing: 0.08em; }
.feature-card-statement { grid-column: span 2; background: linear-gradient(110deg, #1a1426 0%, #121218 60%, #111117 100%); }
.feature-card-statement::after { content: "+"; position: absolute; right: 22px; bottom: -42px; color: rgba(205,178,255,0.11); font: 700 16rem/1 var(--display); }
.statement-copy { position: absolute; bottom: 30px; left: 26px; margin: 0; color: #eee8f5; font: 700 clamp(1.8rem,3vw,3rem)/0.9 var(--display); letter-spacing: -0.075em; }
.text-link { position: absolute; right: 27px; bottom: 36px; color: #cbaaff; font: 800 0.75rem/1 var(--body); }
.text-link:hover { color: white; }

.pricing { padding: 70px 0 130px; }
.access-intro { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 19px; }
.access-intro p { margin: 0; color: #c0bcc7; font: 600 clamp(1.3rem, 2.2vw, 2rem)/1 var(--display); letter-spacing: -0.06em; }
.pricing-panel { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 36px; min-height: 336px; padding: 43px; overflow: hidden; border: 1px solid rgba(187,151,255,0.36); border-radius: 6px; background: #16111f; box-shadow: var(--shadow-deep); }
.pricing-panel::before { content: ""; position: absolute; top: -44%; right: -7%; width: 530px; aspect-ratio: 1; border: 1px solid rgba(201,174,255,0.16); border-radius: 50%; box-shadow: inset 0 0 100px rgba(164,109,255,0.16); }
.pricing-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.22; background: linear-gradient(115deg, transparent 45%, rgba(210,191,255,0.1) 45.1%, transparent 45.3%); }
.pricing-copy, .pricing-actions { position: relative; z-index: 1; }
.pricing-mark { display: inline-block; margin-bottom: 25px; color: #eee9fa; font: 700 0.9rem/1 var(--display); letter-spacing: -0.07em; }
.pricing-mark span, .download-grid h3 span { color: var(--purple); }
.pricing-copy h3 { max-width: 580px; font-size: clamp(2.7rem,4.8vw,4.6rem); line-height: 0.89; }
.pricing-copy p { max-width: 470px; margin: 22px 0 0; color: #aaa2b5; font-size: 0.88rem; line-height: 1.72; }
.pricing-actions { align-self: center; justify-content: flex-end; }
.pricing-footnote { position: absolute; z-index: 1; bottom: 26px; right: 42px; display: flex; align-items: center; gap: 8px; color: #a79dab; font: 400 0.59rem/1 var(--mono); letter-spacing: 0.05em; }
.pricing-footnote span { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }

.dashboard { padding: 44px 0 120px; }
.dashboard > .section-heading { margin-bottom: 27px; }
.dashboard-shell { overflow: hidden; border: 1px solid rgba(255,255,255,0.12); border-radius: 7px; background: #101015; box-shadow: var(--shadow-deep); }
.dashboard-sidebar { display: flex; flex-direction: column; align-items: stretch; width: 218px; min-height: 640px; padding: 24px 12px; border-right: 1px solid var(--line); background: #0c0c10; }
.dashboard-sidebar > strong { margin: 2px 9px 24px; color: #d8c6fb; font: 500 0.72rem/1 var(--mono); letter-spacing: 0.1em; }
.dashboard-sidebar > strong::before { content: "/// "; color: var(--purple); }
.dashboard-nav { position: relative; min-height: 39px; padding: 0 10px 0 17px; border: 0; border-radius: 3px; background: transparent; color: #8d8995; text-align: left; font-size: 0.75rem; font-weight: 700; }
.dashboard-nav::before { content: ""; position: absolute; left: 0; top: 10px; width: 3px; height: 18px; background: transparent; }
.dashboard-nav:hover { color: #e8e2f0; background: rgba(255,255,255,0.035); }
.dashboard-nav.active { color: #eee6ff; background: rgba(164,109,255,0.13); }
.dashboard-nav.active::before { background: var(--purple); box-shadow: 0 0 13px var(--purple); }
.dashboard-nav.dashboard-logout { margin-top: auto; color: #d899a6; }
.dashboard-nav.staff-nav { color: #f0abb6; border: 0; background: rgba(255,91,111,0.09); }
.dashboard-main { min-width: 0; background: linear-gradient(140deg, #15151b, #0f0f14); }
.dashboard-gate { min-height: 640px; padding: clamp(30px,6vw,80px); background: linear-gradient(135deg, rgba(164,109,255,0.09), transparent 41%); }
.dashboard-gate h3, .welcome-card h3, .dashboard-heading h3, .activity-panel h3, .staff-section-heading h3 { margin: 7px 0 0; font-family: var(--display); letter-spacing: -0.055em; }
.dashboard-gate h3 { font-size: 2.4rem; }
.dashboard-gate p { max-width: 450px; color: var(--muted); line-height: 1.7; }
.dashboard-gate .button { margin-top: 12px; }
.avatar-orb { width: 74px; height: 74px; overflow: hidden; border: 1px solid rgba(195,161,255,0.44); border-radius: 7px; background: linear-gradient(135deg, #a46dff, #51417d); box-shadow: 8px 8px 0 rgba(164,109,255,0.12); }
.avatar-orb img { width: 100%; height: 100%; object-fit: cover; }
.dashboard-content { padding: clamp(26px, 4vw, 52px); }
.welcome-card { display: flex; align-items: center; gap: 18px; padding-bottom: 29px; border-bottom: 1px solid var(--line); }
.welcome-card h3 { font-size: 2rem; }
.welcome-card p { margin: 6px 0 0; color: var(--muted); font-size: 0.85rem; }
.dashboard-stats, .staff-overview { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin: 25px 0; }
.dashboard-stats article, .staff-overview article, .profile-grid article { min-height: 108px; padding: 18px; border: 1px solid var(--line); border-radius: 4px; background: rgba(255,255,255,0.025); }
.dashboard-stats span, .staff-overview span, .profile-grid span { display: block; color: var(--muted); font: 500 0.61rem/1 var(--mono); letter-spacing: 0.07em; text-transform: uppercase; }
.dashboard-stats strong, .staff-overview strong, .profile-grid strong { display: block; margin-top: 17px; color: #f4effd; font: 700 1.45rem/1 var(--display); letter-spacing: -0.065em; }
.activity-panel, .support-panel, .staff-workspace, .redeem-card, .settings-list article { border: 1px solid var(--line); border-radius: 4px; background: rgba(5,5,8,0.2); }
.activity-panel { padding: 24px; }
.activity-panel h3 { font-size: 1.1rem; }
.activity-panel p { color: var(--muted); font-size: 0.83rem; line-height: 1.6; }
.dashboard-heading { margin-bottom: 25px; }
.dashboard-heading h3 { font-size: clamp(1.7rem,3vw,2.4rem); }
.dashboard-heading p { margin: 8px 0 0; color: var(--muted); font-size: 0.83rem; line-height: 1.65; }
.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.profile-grid article { min-height: 96px; }
.profile-actions { margin-top: 18px; }
.redeem-card { margin-top: 28px; padding: 24px; }
.redeem-card h3 { margin: 6px 0; font: 700 1.45rem/1 var(--display); letter-spacing: -0.06em; }
.redeem-card p { color: var(--muted); font-size: 0.8rem; }
.redeem-card label, .staff-create-form label, .staff-blacklist-form label { color: #b6b1bd; font-size: 0.72rem; font-weight: 700; }
.redeem-card input, .redeem-card select, .staff-create-form input, .staff-create-form select, .staff-toolbar input, .staff-license-actions input, .staff-blacklist-form input, .staff-blacklist-form select, .license-confirm-form input, .license-confirm-form select, .license-confirm-form textarea { min-height: 44px; border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; background: #0b0b0f; color: #f4eff8; box-shadow: none; }
.redeem-card input:focus, .redeem-card select:focus, .staff-create-form input:focus, .staff-create-form select:focus, .staff-toolbar input:focus, .staff-blacklist-form input:focus, .staff-blacklist-form select:focus, .license-confirm-form input:focus, .license-confirm-form select:focus, .license-confirm-form textarea:focus { outline: 2px solid rgba(164,109,255,0.55); outline-offset: 1px; border-color: transparent; }

.license-list, .download-list { display: grid; gap: 10px; }
.license-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 4px; background: rgba(255,255,255,0.025); }
.license-card strong { display: block; color: #eae1fa; font-family: var(--display); font-size: 1rem; }
.license-card span, .license-card small { display: block; margin-top: 5px; color: var(--muted); font-size: 0.72rem; }
.dashboard-empty { color: var(--muted); font-size: 0.84rem; }
.settings-list { display: grid; gap: 10px; }
.settings-list article { display: flex; justify-content: space-between; align-items: center; gap: 25px; padding: 20px; }
.settings-list strong, .settings-list span { display: block; }
.settings-list strong { color: #eee8f6; font-size: 0.9rem; }
.settings-list span { margin-top: 5px; color: var(--muted); font-size: 0.75rem; }

.staff-panel { border-top: 1px solid rgba(255,122,138,0.22); }
.staff-heading, .staff-toolbar, .staff-license-actions, .staff-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.staff-overview { grid-template-columns: repeat(4, minmax(0,1fr)); }
.staff-overview article { min-height: 97px; }
.staff-overview strong { font-size: 1.65rem; }
.staff-attention { border-color: rgba(255,163,107,0.28) !important; }
.staff-live-stat { border-color: rgba(123,242,192,0.22) !important; }
.staff-workspace { margin-top: 12px; padding: 22px; }
.staff-section-heading h3 { font-size: 1.2rem; }
.staff-section-copy { max-width: 700px; color: var(--muted); font-size: 0.77rem; line-height: 1.65; }
.staff-live-session-list, .staff-request-list, .staff-blacklist-list, .staff-license-list { display: grid; gap: 8px; margin-top: 17px; }
.staff-live-session, .blacklist-card, .staff-license-card { display: flex; align-items: center; gap: 13px; padding: 14px; border: 1px solid rgba(255,255,255,0.075); border-radius: 3px; background: rgba(255,255,255,0.025); }
.staff-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.staff-live-session strong, .blacklist-card strong, .staff-license-card strong { display: block; color: #efeafd; font-size: 0.83rem; }
.staff-live-session span, .staff-live-session small, .blacklist-card span, .blacklist-card small, .staff-license-card > div > span { color: var(--muted); font-size: 0.67rem; }
.staff-live-discord { display: block; margin-top: 4px; }
.staff-live-meta { margin-left: auto; text-align: right; }
.staff-status-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.staff-status-tabs button { min-height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 3px; background: transparent; color: var(--muted); font: 500 0.62rem/1 var(--mono); text-transform: uppercase; }
.staff-status-tabs button.active, .staff-status-tabs button:hover { border-color: rgba(164,109,255,0.55); background: rgba(164,109,255,0.13); color: #e4d5ff; }
.staff-blacklist-form, .staff-create-form { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; align-items: end; margin: 19px 0 0; padding: 0; border: 0; background: transparent; }
.staff-blacklist-form label, .staff-create-form label { display: grid; gap: 7px; }
.staff-blacklist-form button, .staff-create-form button { min-height: 44px; }
.button-danger { border: 1px solid rgba(255,122,138,0.4); background: rgba(255,122,138,0.12); color: #ffc0c8; }
.button-danger:hover { background: rgba(255,122,138,0.22); }
.blacklist-card { justify-content: space-between; }
.blacklist-card button, .staff-license-actions button { border: 1px solid var(--line); border-radius: 3px; background: rgba(255,255,255,0.035); color: #d5cfdf; min-height: 31px; padding: 0 8px; font-size: 0.66rem; font-weight: 800; }
.staff-toolbar { margin-top: 18px; }
.staff-toolbar input { max-width: 420px; }
.staff-license-card { display: grid; grid-template-columns: 1.1fr 1fr auto; align-items: center; }
.staff-license-card dl { display: flex; gap: 12px; margin: 0; }
.staff-license-card dt { color: var(--dim); font: 500 0.57rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.staff-license-card dd { margin: 5px 0 0; color: #cec8d5; font-size: 0.69rem; }
.staff-license-actions { justify-content: flex-end; flex-wrap: wrap; }
.staff-license-actions label { min-width: 88px; }
.staff-created-key { border-radius: 4px; background: rgba(123,242,192,0.07); }

.downloads { padding: 92px 0 120px; }
.downloads .section-heading { margin-bottom: 42px; }
.download-grid { display: grid; grid-template-columns: 1.18fr 0.82fr; gap: 12px; }
.download-grid .glass-card { min-height: 258px; padding: 29px; }
.download-grid .glass-card:first-child { background: linear-gradient(125deg, #161220, #101014 65%); border-color: rgba(185,148,255,0.28); }
.download-card-index { color: #9b80c6; }
.download-grid h3 { max-width: 410px; margin: 38px 0 0; font: 700 clamp(1.8rem,3.4vw,3.2rem)/0.95 var(--display); letter-spacing: -0.072em; }
.download-grid p { max-width: 440px; margin: 13px 0 21px; color: var(--muted); font-size: 0.81rem; line-height: 1.65; }
.download-grid .button { position: absolute; bottom: 27px; left: 29px; }
.public-download-list, .download-list { margin-top: 12px; }

.support { padding: 70px 0 120px; }
.support .section-heading { margin-bottom: 37px; }
.accordion { border-top: 1px solid var(--line); }
.accordion-item { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 76px; padding: 0 4px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: #eae6ee; text-align: left; font: 700 clamp(0.94rem,1.6vw,1.25rem)/1 var(--display); letter-spacing: -0.045em; }
.accordion-item b { color: var(--purple-bright); font: 400 1.55rem/1 var(--mono); transition: transform 180ms ease; }
.accordion-item.active b { transform: rotate(45deg); }
.accordion-item:hover { color: #cfb8ff; }
.accordion-content { border-bottom: 1px solid var(--line); background: transparent; }
.accordion-content p { max-width: 700px; margin: 0; padding: 0 0 20px; color: var(--muted); font-size: 0.84rem; line-height: 1.74; }

.legal { padding: 0 0 100px; }
.legal-card { padding: 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; }
.legal-card h2 { margin-top: 9px; font-size: 1.55rem; }
.legal-card p { max-width: 770px; margin: 12px 0 0; color: var(--muted); font-size: 0.77rem; line-height: 1.7; }
.site-footer { display: grid; grid-template-columns: 1.1fr auto auto; gap: 40px; align-items: end; width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding: 0 0 35px; border: 0; background: transparent; }
.site-footer .brand { display: inline-flex; }
.site-footer p { max-width: 285px; margin: 12px 0 0; color: #807d88; font-size: 0.7rem; line-height: 1.65; }
.site-footer nav { display: flex; gap: 18px; }
.site-footer nav a, .site-footer > span { color: #85818d; font-size: 0.67rem; font-weight: 700; }
.site-footer nav a:hover { color: var(--purple-bright); }

.license-confirm-dialog { width: min(560px, calc(100% - 30px)); padding: 0; border: 1px solid rgba(191,159,255,0.35); border-radius: 6px; background: #15151c; color: var(--text); box-shadow: 0 32px 120px rgba(0,0,0,0.7); }
.license-confirm-dialog::backdrop { background: rgba(0,0,0,0.76); backdrop-filter: blur(6px); }
.license-confirm-form { display: grid; gap: 11px; padding: 27px; }
.license-confirm-heading h2 { margin: 7px 0 0; font: 700 1.8rem/1 var(--display); letter-spacing: -0.06em; }
.license-confirm-heading p { margin: 10px 0 10px; color: var(--muted); font-size: 0.78rem; line-height: 1.65; }
.license-confirm-form > label, .platform-selector legend { color: #b9b4c0; font-size: 0.7rem; font-weight: 700; }
.platform-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0; border: 0; }
.platform-selector legend { grid-column: 1 / -1; margin-bottom: 5px; }
.platform-selector label { display: flex; gap: 9px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 4px; background: rgba(255,255,255,0.025); }
.platform-selector strong, .platform-selector small { display: block; }
.platform-selector strong { font-size: 0.75rem; }
.platform-selector small { margin-top: 3px; color: var(--muted); font-size: 0.63rem; }
.license-confirm-message { min-height: 18px; margin: 2px 0; color: #ffc7ce; font-size: 0.72rem; }
.license-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 5px; }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: 52px; min-height: 0; padding-top: 135px; }
  .hero-copy { max-width: 690px; }
  .hero-visual { min-height: min(64vw, 555px); margin: 0; }
  .hero-shot { right: 3vw; width: min(715px, 84vw); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-card-wide { grid-row: span 1; }
  .feature-card-wide h3 { bottom: 74px; left: 26px; font-size: 1.52rem; }
  .feature-card-wide p { bottom: 24px !important; left: 26px !important; }
  .feature-card-statement { grid-column: span 1; }
  .pricing-panel { grid-template-columns: 1fr; }
  .pricing-actions { justify-content: flex-start; }
  .staff-create-form, .staff-blacklist-form { grid-template-columns: repeat(2, 1fr); }
  .staff-license-card { grid-template-columns: 1fr; }
  .staff-license-actions { justify-content: flex-start; }
}

@media (max-width: 720px) {
  body.menu-open { overflow: hidden; }
  .section-shell, .site-footer { width: min(100% - 32px, 1240px); }
  .site-header { height: calc(63px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 16px 0; }
  .site-header.scrolled { height: 60px; }
  .site-header::after { left: 16px; }
  .brand { font-size: 1.06rem; }
  .brand-logo { width: 30px; height: 30px; }
  .nav-links, .nav-action { display: none; }
  .menu-toggle { display: grid; place-content: center; gap: 6px; width: 43px; height: 43px; margin-left: auto; padding: 0; border: 1px solid rgba(195,161,255,0.28); border-radius: 4px; background: rgba(164,109,255,0.09); }
  .menu-toggle span { display: block; width: 17px; height: 1px; background: #e6dcf7; transition: transform 180ms ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .mobile-menu { position: fixed; z-index: 45; top: calc(63px + env(safe-area-inset-top)); right: 0; left: 0; display: grid; gap: 0; padding: 15px 16px calc(20px + env(safe-area-inset-bottom)); border-bottom: 1px solid rgba(195,161,255,0.22); background: rgba(12,12,17,0.98); box-shadow: 0 28px 70px rgba(0,0,0,0.44); backdrop-filter: blur(18px); }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu a { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 4px; border-bottom: 1px solid rgba(255,255,255,0.075); color: #e9e2f4; font: 700 1.04rem/1 var(--display); letter-spacing: -0.05em; }
  .mobile-menu a span { color: #9b80c6; font: 500 0.62rem/1 var(--mono); letter-spacing: 0.08em; }
  .mobile-menu .mobile-menu-access { min-height: 49px; margin-top: 16px; padding: 0 15px; border: 1px solid rgba(195,161,255,0.35); border-radius: 4px; background: rgba(164,109,255,0.15); color: #e8dcff; font-family: var(--body); font-size: 0.79rem; letter-spacing: 0; }
  .mobile-menu .mobile-menu-access b { color: var(--purple-bright); font-size: 1.05rem; }
  .hero { padding: 112px 0 68px; gap: 25px; }
  .hero h1 { max-width: 100%; font-size: clamp(3.1rem, 14vw, 3.85rem); }
  .hero h1 span { display: inline; white-space: normal; overflow-wrap: anywhere; -webkit-text-stroke-width: 1px; }
  .hero-lede { margin: 26px 0; font-size: 0.87rem; }
  .hero-actions { align-items: stretch; }
  .hero-actions .button { flex: 1; min-width: 144px; padding: 0 12px; }
  .hero-metrics { margin-top: 39px; }
  .hero-metrics > div { min-width: 0; padding-right: 9px; }
  .hero-metrics > div + div { padding-left: 9px; }
  .hero-metrics span { font-size: 0.61rem; }
  .hero-visual { min-height: 64vw; }
  .hero-shot { top: 29px; right: 0; width: 88vw; padding: 5px; transform: perspective(800px) rotateY(-4deg) rotateZ(-1deg); }
  .hero-label-top { top: 4px; }
  .hero-label-bottom { bottom: 0; left: 0; }
  .hero-specimen { bottom: -3px; right: 3px; }
  .hero-grid-decor { inset: 7px -8vw 5px 1vw; background-size: 25px 25px; }
  .feature-section, .downloads { padding-top: 84px; }
  .section-heading { display: block; margin-bottom: 33px; }
  .section-heading h2 { margin-top: 18px; font-size: clamp(2.65rem, 12vw, 4.2rem); }
  .section-heading > p { margin: 18px 0 0; font-size: 0.83rem; }
  .feature-grid { grid-template-columns: 1fr; grid-auto-rows: 272px; }
  .feature-card-statement { grid-column: auto; }
  .pricing { padding: 33px 0 88px; }
  .access-intro { display: block; }
  .access-intro p { margin-top: 14px; }
  .pricing-panel { min-height: 0; padding: 28px; }
  .pricing-copy h3 { font-size: clamp(2.5rem, 12vw, 3.7rem); }
  .pricing-footnote { position: static; margin-top: 4px; }
  .dashboard { padding-bottom: 78px; }
  .dashboard-shell { display: block; }
  .dashboard-sidebar { display: grid; grid-template-columns: repeat(3, 1fr); width: auto; min-height: 0; padding: 13px; border-right: 0; border-bottom: 1px solid var(--line); gap: 3px; }
  .dashboard-sidebar > strong { grid-column: 1 / -1; margin: 3px 6px 9px; }
  .dashboard-nav { min-height: 43px; padding: 0 7px; font-size: 0.64rem; text-align: center; }
  .dashboard-nav::before { display: none; }
  .dashboard-nav.dashboard-logout { margin-top: 0; }
  .dashboard-gate { min-height: 430px; padding: 31px 23px; }
  .dashboard-gate h3 { font-size: 2rem; }
  .dashboard-content { padding: 22px; }
  .welcome-card { align-items: flex-start; }
  .welcome-card h3 { font-size: 1.55rem; }
  .dashboard-stats { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: 1fr; }
  .license-card, .settings-list article { align-items: flex-start; flex-direction: column; }
  .staff-overview { grid-template-columns: repeat(2, 1fr); }
  .staff-workspace { padding: 16px; }
  .staff-heading, .staff-toolbar, .staff-section-heading { align-items: flex-start; flex-direction: column; }
  .staff-toolbar input { max-width: none; }
  .staff-create-form, .staff-blacklist-form { grid-template-columns: 1fr; }
  .staff-live-session { align-items: flex-start; }
  .staff-live-meta { margin-left: 0; text-align: left; }
  .download-grid { grid-template-columns: 1fr; }
  .download-grid .glass-card { min-height: 245px; }
  .support { padding-top: 35px; padding-bottom: 85px; }
  .accordion-item { min-height: 70px; font-size: 0.89rem; }
  .site-footer { grid-template-columns: 1fr; gap: 23px; padding-bottom: 83px; }
  .site-footer nav { flex-wrap: wrap; }
}

@media (max-width: 430px) {
  .hero { padding-top: 105px; }
  .hero-status { gap: 7px; font-size: 0.58rem; }
  .status-divider { width: 13px; }
  .hero h1 { font-size: clamp(2.85rem, 14.4vw, 3.35rem); letter-spacing: -0.09em; }
  .hero-lede { font-size: 0.81rem; line-height: 1.68; }
  .hero-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .hero-actions .button { min-width: 0; min-height: 48px; padding: 0 8px; font-size: 0.64rem; white-space: nowrap; }
  .hero-actions .button span { font-size: 0.85rem; }
  .hero-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-metrics > div { padding-right: 6px; }
  .hero-metrics > div + div { padding-left: 6px; }
  .hero-metrics span { font-size: 0.55rem; overflow-wrap: anywhere; }
  .feature-card-wide h3, .feature-card h3 { max-width: 220px; font-size: 1.36rem; }
  .feature-card-wide p, .feature-card p:not(.statement-copy) { font-size: 0.74rem; }
  .pricing-panel { padding: 23px; }
  .pricing-copy h3 { font-size: 2.4rem; }
  .dashboard-sidebar { grid-template-columns: repeat(2, 1fr); }
  .dashboard-sidebar > strong { grid-column: 1 / -1; }
  .staff-overview { grid-template-columns: 1fr; }
  .license-confirm-form { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}