:root {
  --z-navy: #0e1830;
  --z-navy-deep: #080e20;
  --z-ink: #15172a;
  --z-canvas: #f7f6ff;
  --z-surface: #ffffff;
  --z-line: #e6e5f0;
  --z-muted: #68708a;
  --z-orange: #ff931e;
  --z-pink: #f02c92;
  --z-violet: #514df4;
  --z-blue: #2f8fef;
  --z-cyan: #22c5d6;
  --z-gradient: linear-gradient(112deg, var(--z-orange) 0%, var(--z-pink) 32%, var(--z-violet) 61%, var(--z-blue) 82%, var(--z-cyan) 100%);
  --z-shadow: 0 22px 54px rgb(31 35 73 / 10%);
}

body { color: var(--z-ink); background: radial-gradient(circle at 74% -10%, rgb(81 77 244 / 11%), transparent 30rem), radial-gradient(circle at 97% 57%, rgb(34 197 214 / 8%), transparent 22rem), var(--z-canvas); }
.app-shell { grid-template-columns: 280px minmax(0, 1fr); }
.sidebar { gap: 31px; padding: 24px 16px 18px; background: radial-gradient(circle at 16% 0%, rgb(81 77 244 / 30%), transparent 16rem), linear-gradient(165deg, #101b37 0%, var(--z-navy-deep) 62%, #111631 100%); border-right: 1px solid rgb(255 255 255 / 7%); }
.brand { padding: 0 6px; }
.brand-logo-plate { width: 214px; border-radius: 17px; box-shadow: 0 14px 32px rgb(0 0 0 / 22%); }
.tenant-switcher { padding: 0 6px; }
.sidebar .eyebrow, .eyebrow { color: #8a91af; letter-spacing: .16em; }
.tenant-button { border-color: rgb(175 192 255 / 20%); background: rgb(255 255 255 / 6%); border-radius: 14px; padding: 13px 14px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%); }
.navigation { gap: 6px; }
.nav-link { position: relative; padding: 12px 13px; border: 1px solid transparent; color: #b7c0da; border-radius: 13px; }
.nav-link:hover, .nav-link:focus-visible, .nav-link.active { background: linear-gradient(90deg, rgb(255 255 255 / 13%), rgb(255 255 255 / 4%)); border-color: rgb(255 255 255 / 7%); box-shadow: inset 3px 0 0 var(--z-cyan); }
.nav-link span { color: #a58bff; }
.sidebar-note { background: rgb(255 255 255 / 4%); border-color: rgb(163 188 255 / 16%); border-radius: 18px; padding: 15px; }
.topbar { height: 86px; padding: 0 clamp(24px, 4vw, 72px); }
.command-search { max-width: 490px; border-color: #e5e3f3; border-radius: 15px; box-shadow: 0 8px 22px rgb(20 22 48 / 4%); }
.command-search:focus-within { border-color: rgb(81 77 244 / 48%); box-shadow: 0 0 0 4px rgb(81 77 244 / 10%); }
.quiet-button { border: 1px solid #e6e4f3; border-radius: 12px; background: rgb(255 255 255 / 72%); padding: 10px 14px; }
.avatar-button { background: var(--z-gradient); color: #fff; box-shadow: 0 7px 18px rgb(81 77 244 / 20%); }
.hero { min-height: 458px; margin-top: 8px; padding: clamp(38px, 5.4vw, 78px); border: 1px solid rgb(255 255 255 / 8%); border-radius: 32px; background: radial-gradient(circle at 74% 50%, rgb(81 77 244 / 34%), transparent 20rem), radial-gradient(circle at 96% 9%, rgb(34 197 214 / 17%), transparent 18rem), linear-gradient(132deg, #101b39 0%, #0b1330 52%, #0c1229 100%); box-shadow: 0 28px 58px rgb(12 16 47 / 16%); }
.hero h1 { max-width: 650px; font-size: clamp(43px, 4.7vw, 73px); line-height: .94; letter-spacing: -.07em; }
.hero h1 span { background: var(--z-gradient); -webkit-background-clip: text; background-clip: text; }
.hero-text { max-width: 535px; color: #bdc5dd; font-size: 14px; line-height: 1.85; }
.hero-actions { gap: 17px; }
.primary-button { position: relative; overflow: hidden; border-radius: 14px; background: var(--z-gradient); padding: 14px 18px; box-shadow: 0 13px 28px rgb(81 77 244 / 28%); }
.primary-button:hover { background: var(--z-gradient); transform: translateY(-2px) scale(1.01); }
.text-link { color: #e6eaff; }
.hero-art { isolation: isolate; min-height: 300px; }
.hero-art::before { position: absolute; z-index: 1; inset: 5% 7% 7% 15%; border-radius: 48% 52% 50% 50%; background: var(--z-gradient); clip-path: polygon(3% 3%, 100% 3%, 57% 45%, 100% 45%, 100% 95%, 0 95%, 43% 53%, 0 53%); filter: drop-shadow(0 18px 26px rgb(81 77 244 / 38%)); opacity: .96; content: ""; }
.hero-art::after { position: absolute; z-index: 0; width: 330px; height: 330px; right: 4%; top: 0; border: 1px solid rgb(255 255 255 / 18%); border-radius: 50%; content: ""; box-shadow: 0 0 0 28px rgb(255 255 255 / 3%), 0 0 0 56px rgb(255 255 255 / 2%); }
.hero-logo-stage { display: none; }
.orb { z-index: 0; filter: blur(10px); }
.orb-a { width: 300px; height: 300px; right: 8%; top: 3%; opacity: .24; }
.orb-b { width: 170px; height: 170px; right: 47%; bottom: 2%; opacity: .32; }
.brand-orbit { position: absolute; z-index: 2; right: 9%; top: 22%; display: grid; width: 120px; height: 120px; place-items: center; border: 1px solid rgb(255 255 255 / 52%); border-radius: 50%; background: rgb(255 255 255 / 9%); box-shadow: 0 16px 40px rgb(0 0 0 / 22%), inset 0 1px 0 rgb(255 255 255 / 30%); backdrop-filter: blur(14px); }
.orbit-label { position: absolute; z-index: 2; color: #ffffff; font: 500 8px/1.2 "DM Mono", monospace; letter-spacing: .15em; }
.orbit-core { width: 31px; height: 31px; border-radius: 50%; background: var(--z-gradient); box-shadow: 0 0 0 9px rgb(255 255 255 / 12%), 0 0 38px var(--z-cyan); }
.orbit-pulse { position: absolute; width: 82px; height: 82px; border: 1px dashed rgb(255 255 255 / 44%); border-radius: 50%; }
.signal-card { border-color: rgb(255 255 255 / 24%); border-radius: 14px; background: rgb(8 14 32 / 48%); box-shadow: 0 12px 30px rgb(0 0 0 / 20%); }
.signal-one { top: 9%; right: 2%; }
.signal-two { bottom: 7%; left: 3%; }
.grid-floor { opacity: .66; }
.section-heading { padding: 78px 0 28px; }
.section-heading h2, .workspace-header h2 { color: var(--z-navy); font-size: clamp(27px, 2.6vw, 38px); }
.setup-grid { gap: 16px; }
.setup-card { min-height: 235px; border-color: #e5e4f0; border-radius: 22px; background: rgb(255 255 255 / 86%); box-shadow: 0 10px 30px rgb(37 38 74 / 4%); }
.setup-card:nth-child(2) { border-top: 3px solid var(--z-blue); }
.setup-card:nth-child(3) { border-top: 3px solid var(--z-cyan); }
.focus-card { border: 1px solid rgb(81 77 244 / 24%); border-top: 3px solid var(--z-violet); background: radial-gradient(circle at 88% 15%, rgb(240 44 146 / 10%), transparent 12rem), linear-gradient(140deg, #fbfaff, #f3f2ff); box-shadow: var(--z-shadow); }
.step, .status-label { color: #756ee6; }
.inline-button { color: var(--z-violet); }
.workspace-section { padding: 88px 0; }
.outline-button { border-radius: 13px; border-color: rgb(81 77 244 / 24%); color: var(--z-violet); background: #fff; }
.empty-catalog { border: 1px solid #e5e4f0; border-radius: 23px; background: radial-gradient(circle at 88% 20%, rgb(34 197 214 / 11%), transparent 13rem), rgb(255 255 255 / 80%); box-shadow: 0 12px 34px rgb(37 38 74 / 4%); }
.empty-symbol { color: #fff; background: var(--z-gradient); box-shadow: 0 12px 25px rgb(81 77 244 / 22%); }
.modal-card { border: 1px solid rgb(255 255 255 / 76%); border-radius: 24px; box-shadow: 0 35px 90px rgb(7 17 38 / 35%); }
.modal-card input:focus { border-color: var(--z-violet); box-shadow: 0 0 0 4px rgb(81 77 244 / 10%); }

@media (max-width: 1023px) { .app-shell { grid-template-columns: 1fr; } .hero { grid-template-columns: minmax(0, 1fr); min-height: 650px; } .hero-art { min-height: 245px; } .hero-art::before { inset: 0 18% 2% 30%; } .brand-orbit { top: 12%; right: 16%; } }
@media (max-width: 640px) { .topbar { height: 72px; } .hero { min-height: 636px; padding: 32px 24px; border-radius: 24px; } .hero h1 { font-size: clamp(43px, 12vw, 58px); } .hero-art { min-height: 220px; } .hero-art::before { inset: 2% 4% 0 17%; } .hero-art::after { width: 218px; height: 218px; right: 7%; } .brand-orbit { top: 12%; right: 20%; width: 96px; height: 96px; } .orbit-pulse { width: 66px; height: 66px; } .signal-one { top: 2%; } .signal-two { bottom: 2%; } .section-heading { padding-top: 60px; } }