/* Slurx / orbital showroom. Existing layout and actions remain canonical. */
html { background: var(--sx-ink); }
body { background: var(--sx-ink)!important; color: var(--sx-text); }
.cosmos-canvas { opacity: .42; }
.cosmos-nebula { opacity: .42!important; }
.cosmos-aurora,.cosmos-rays { opacity: .28!important; }
.cosmos-planet { opacity: .65; }
.header { border-radius: 20px; background: #0c1220e8!important; border: 1px solid var(--sx-line)!important; box-shadow: 0 12px 45px #0003,inset 0 1px #ffffff08; }
.header nav { padding: 5px; gap: 4px; border-radius: 13px; background: #070c1659; border: 1px solid #c5d6ed0b; }
.header nav a { padding: 10px 16px; border-radius: 9px; color: var(--sx-muted); transition: color var(--sx-fast),background var(--sx-fast); }
.header nav a:hover,.header nav a[aria-current] { color: var(--sx-text); background: #c5d6ed0b; }
.header .nav-buy { border-radius: 12px; border-color: #c5d6ed40; background: #1722368a; color: var(--sx-text); }
.hero { padding-top: 76px; padding-bottom: 70px; gap: 62px; }
.hero h1 { font-size: clamp(42px,4.1vw,66px); line-height: 1.07; letter-spacing: -.045em; background: linear-gradient(125deg,#f5f7fb 8%,#d6e1ee 63%,#9db2cd); background-clip: text; -webkit-background-clip: text; animation: none!important; }
.hero .intro { color: var(--sx-muted); font-size: 17px; line-height: 1.8; max-width: 510px; margin-top: 26px; }
.hero-actions { gap: 12px; margin-top: 30px; }
.hero-actions .button { border-radius: 13px; min-height: 52px; }
.hero .platform { color: #9baec6; font-size: 13px; }
.hero-showroom { border-radius: 30px; background: radial-gradient(ellipse at 50% 0%,#576f8e2b,transparent 70%),linear-gradient(155deg,#152235d9,#090e19f2)!important; border-color: #c5d6ed30; box-shadow: inset 0 1px #ffffff13,0 30px 80px #0004; }
.hero-showroom::before { opacity: .4; }
.hero-orbit { border-color: #c5d6ed1a; box-shadow: 0 0 0 30px #c5d6ed03,0 0 0 60px #c5d6ed02; }
.hero-selector { border-radius: 18px; }
.hero-selector button { border-color: #c5d6ed30; background: #111c2b; }
.hero-dots button { transition: width var(--sx-time) var(--sx-ease),background var(--sx-time); }
.ribbon-card,.design-tile { border-radius: 16px; border-color: var(--sx-line); background: #0d1522; }
.design-tile { transition: border-color var(--sx-time),box-shadow var(--sx-time),translate var(--sx-time) var(--sx-ease); }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  html:not(.no-effects) .design-tile:hover { translate: 0 -4px; border-color: #c5d6ed70; box-shadow: 0 18px 30px #0005; }
}
.section-heading h2 { letter-spacing: -.035em; }
.section-heading p { color: var(--sx-muted); }
.collection-tools { border-radius: 16px; border: 1px solid #ffffff09!important; background: #ffffff03!important; box-shadow: none!important; backdrop-filter: blur(12px)!important; -webkit-backdrop-filter: blur(12px)!important; }
.filter-tabs { background: transparent; border: 0; box-shadow: none; border-radius: 11px; padding: 4px; }
.filter-tabs button { border-radius: 8px; }
.try-controls,.setup details,.faq details,.feature,.features > article { border-color: var(--sx-line); background-color: #101827b3; border-radius: var(--sx-radius); }
.price-card { background: radial-gradient(ellipse at 15% 0%,#e9d3a112,transparent 60%),linear-gradient(135deg,#172031,#0b111d)!important; border-color: #e9d3a14d; box-shadow: 0 30px 70px #0004,inset 0 1px #fff1; }
.price-card #buy-status { color: var(--sx-gold); line-height: 1.65; }
.button.secondary { background: #152237!important; border-color: #c5d6ed35; }
:is(.button,button).primary { box-shadow: inset 0 1px #fff8,0 6px 20px #0002; }
button:disabled { opacity: .58; }
.auth-card,.acc-card { background: linear-gradient(145deg,#172236f0,#0b1220f5)!important; border-color: var(--sx-line)!important; box-shadow: 0 24px 80px #0004,inset 0 1px #ffffff0b; }
.auth-card { border-radius: 26px; }
.auth-tabs,.acc-nav { background: #09101b!important; }
.auth-card input { background: #090f1c!important; border-color: #c5d6ed2e; border-radius: 12px; }
.auth-card input:focus { border-color: var(--sx-focus); box-shadow: 0 0 0 3px #b4caff12; }
dialog { border-color: #c5d6ed38!important; border-radius: 22px; box-shadow: 0 30px 100px #0009; }
dialog::backdrop { background: #030711bd; backdrop-filter: blur(6px); }
@media(max-width:700px) {
  .header { border-radius: 16px; }
  .hero { padding-top: 36px; padding-bottom: 40px; gap: 36px; }
  .hero h1 { font-size: clamp(36px,9.2vw,54px); letter-spacing: -.035em; }
  .hero .intro { font-size: 16px; line-height: 1.7; }
  .hero-showroom { border-radius: 24px; }
  .hero-actions .button { min-height: 48px; }
}
@media(prefers-reduced-motion:reduce) { .design-tile { transition: none; } }
.no-effects .design-tile { transition: none; }

/* Compact glass refinement. Canonical website-only density and controls. */
:root { --sx-content: 1160px; --sx-glass: #d7e8ff12; --sx-glass-edge: #dfedff40; }
.wrap { max-width: var(--sx-content); padding-left: 32px; padding-right: 32px; }
.header { max-width: var(--sx-content); height: 78px; margin-top: 16px; border-radius: 18px; padding: 0 26px; }
.header .slurx-brand img { width: 38px; height: 38px; }
.header .brand-name { font-size: 25px; }
.header nav { padding: 3px; }
.header nav a { padding: 9px 13px; font-size: 12px; }
.header::after { display: none; }
.hero { min-height: 520px; padding-top: 40px; padding-bottom: 40px; gap: 42px; }
.hero h1 { font-size: clamp(36px,3.3vw,48px); font-weight: 650; letter-spacing: -.045em; line-height: 1.12; margin-bottom: 20px; }
.hero .intro { font-size: 15px; line-height: 1.75; margin-top: 18px; max-width: 445px; }
.hero-actions { margin-top: 24px; gap: 10px; }
.hero-actions .button { min-height: 46px; padding: 0 19px; gap: 18px; font-size: 13px; border-radius: 12px; }
.hero .platform { font-size: 11px; margin-top: 20px; }
.hero .platform .price-inline { font-size: 14px; }
.hero-showroom { height: 390px; padding: 20px 24px 14px; border-radius: 24px; }
.hero-showroom .card-scene { width: 76%; margin: 35px auto 22px; }
.hero-selector { gap: 16px; }
.hero-selector strong { font-size: 14px; }
.hero-selector span { font-size: 10px; }
.hero-dots { margin-top: 10px; }
.design-ribbon { padding: 12px 0 20px; }
.ribbon-card { width: 172px; flex-basis: 172px; }
.section-heading h2 { font-size: clamp(28px,3vw,38px); }
.collection,.experience,.pricing,.faq,.setup { padding-top: 48px; padding-bottom: 48px; }
.section-heading { margin-bottom: 26px; }
.auth-card { max-width: 460px; padding: 28px; }
/* Native links/buttons retain their hit area, labels, focus and disabled state. */
.button.primary,.button.secondary,.header .nav-buy,.auth-card button[type=submit],.hero-selector button,.preview-switcher button,.catalog-pages button,.try-controls button {
  color: #edf5ff!important;
  background: linear-gradient(145deg,#e7f1ff24,#b8d1f00a 48%,#bed8fa15)!important;
  border: 1px solid var(--sx-glass-edge)!important;
  box-shadow: inset 0 1px 0 #ffffff45,inset 0 -1px 0 #ffffff09,0 6px 18px #0003!important;
  backdrop-filter: blur(18px) saturate(145%)!important;
  -webkit-backdrop-filter: blur(18px) saturate(145%)!important;
  text-shadow: 0 1px 2px #0005;
  transition: background .18s,border-color .18s,box-shadow .18s,transform .18s!important;
}
.button.primary { border-color: #e9d3a170!important; background: linear-gradient(135deg,#e9d3a126,#d7e8ff0d 65%)!important; }
.button::before,.button::after { animation: none!important; }
@media(hover:hover) {
  .button:hover:not(:disabled):not([aria-disabled=true]),.header .nav-buy:hover,.hero-selector button:hover,.preview-switcher button:hover {
    background: linear-gradient(145deg,#e7f1ff38,#b8d1f014 50%,#bed8fa26)!important;
    border-color: #e1eeff70!important;
    box-shadow: inset 0 1px #fff6,0 8px 24px #0004!important;
  }
}
.button:disabled,.button[aria-disabled=true] { opacity: .55; box-shadow: inset 0 1px #ffffff20!important; }
@supports not (backdrop-filter:blur(1px)) { .button.primary,.button.secondary,.header .nav-buy { background: #233044!important; } }
@media(max-width:760px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .header { height: auto; min-height: 70px; padding: 14px 18px; gap: 12px; }
  .header nav a { padding: 8px 11px; }
  .hero { min-height: 0; gap: 28px; padding-top: 32px; padding-bottom: 24px; }
  .hero h1 { font-size: clamp(32px,8.5vw,42px); }
  .hero .intro { font-size: 14px; line-height: 1.75; }
  .hero-showroom { height: 350px; max-width: 420px; width: 100%; padding: 18px; }
  .hero-showroom .card-scene { width: 74%; margin: 28px auto 20px; }
  .hero-selector > div { min-width: 130px; }
  .ribbon-card { width: 145px; flex-basis: 145px; }
  .collection,.experience,.pricing,.faq,.setup { padding-top: 32px; padding-bottom: 32px; }
  .auth-card { padding: 22px; }
}
@media(max-width:360px) { .hero-showroom { height: 310px; } .hero-selector { gap: 8px; } }
@media(prefers-reduced-motion:reduce) { .button,.header .nav-buy { transition: none!important; } }

@media(max-width:760px) { .header nav { display:flex;flex-wrap:nowrap;justify-content:space-between;width:100%;gap:0; } .header nav a { padding:9px 8px;font-size:11px; } }

/* Clear glass catalog: no nested dark slabs or outlined inactive buttons. */
.collection-tools .filter-tabs button {
 background: transparent!important; border: 1px solid transparent!important;
 box-shadow: none!important; color: #b9c5d6; border-radius: 10px;
 backdrop-filter: none!important; -webkit-backdrop-filter: none!important;
}
.collection-tools .filter-tabs button.active { color: #f1f5fb; }
.collection-tools .filter-tabs .sx-tab-track {
 background: linear-gradient(135deg,#ffffff12,#ffffff05); border: 1px solid #ffffff16;
 box-shadow: inset 0 1px #ffffff14; border-radius: 10px;
}
.collection-tools .design-search {
 background: #ffffff04!important; border: 1px solid #ffffff0d; box-shadow: none;
 backdrop-filter: none!important; -webkit-backdrop-filter: none!important;
}
.collection-tools .design-search input { background: transparent!important; }
.collection-tools .design-search:focus-within { background: #ffffff08!important; border-color: #c5d6ed55; }
@media(hover:hover) { .collection-tools .filter-tabs button:hover { background: #ffffff08!important; color: #fff; transform: none; } }

/* Clear header and deliberate entrance motion; final website surface owner. */
.header {
 background: #ffffff03!important; border-color: #ffffff0b!important;
 box-shadow: inset 0 1px #ffffff05!important;
 backdrop-filter: blur(12px) saturate(115%)!important;
 -webkit-backdrop-filter: blur(12px) saturate(115%)!important;
}
.header nav { background: transparent!important; border-color: transparent!important; box-shadow: none!important; }
.header nav a { background: transparent!important; }
.header nav a::before,.header nav a::after { display: none!important; }
.header nav .sx-tab-track {
 background: linear-gradient(135deg,#ffffff12,#ffffff04); border-color: #ffffff12;
 box-shadow: inset 0 1px #ffffff12; border-radius: 10px;
}
.header .nav-buy,.hero-actions .button {
 background: linear-gradient(120deg,#ffffff0a,#ffffff16 45%,#ffffff05)!important;
 border-color: #ffffff26!important;
 box-shadow: inset 0 1px #ffffff20,0 3px 14px #0001!important;
}
.hero-actions .button.primary { border-color: #e9d3a138!important; }
.hero-actions .button::before,.hero-actions .button::after { display: none!important; }
@keyframes sx-hero-arrive { from { opacity: 0; transform: translateY(22px); filter: blur(5px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@media(prefers-reduced-motion:no-preference) {
 html:not(.no-effects) .hero h1 { animation: sx-hero-arrive 800ms cubic-bezier(.16,1,.3,1) both!important; }
 html:not(.no-effects) .hero .intro { animation: sx-hero-arrive 800ms 140ms cubic-bezier(.16,1,.3,1) both; }
 html:not(.no-effects) .hero-actions { animation: sx-hero-arrive 800ms 260ms cubic-bezier(.16,1,.3,1) both; }
 html:not(.no-effects) .hero .platform { animation: sx-hero-arrive 800ms 360ms cubic-bezier(.16,1,.3,1) both; }
 html:not(.no-effects) .hero-actions .button { transition: background .25s,border-color .25s,box-shadow .25s,transform .25s!important; }
}
@media(hover:hover) {
 .hero-actions .button:hover:not(:disabled):not([aria-disabled=true]),.header .nav-buy:hover {
 background: linear-gradient(120deg,#ffffff12,#ffffff24 45%,#ffffff0a)!important;
 border-color: #ffffff45!important; box-shadow: inset 0 1px #ffffff40,0 8px 22px #0002!important;
 }
 html:not(.no-effects) .hero-actions .button:hover:not(:disabled):not([aria-disabled=true]) { transform: translateY(-3px)!important; }
}
@media(prefers-reduced-motion:reduce) { .hero h1,.hero .intro,.hero-actions,.hero .platform { animation: none!important; } .hero-actions .button:hover { transform:none!important; } }

/* Matching light glass across the remaining storefront surfaces. */
.hero-showroom,.feature,.setup-grid article,.try-controls,.faq details,.price-card,.auth-card,.acc-card {
 background: #ffffff04!important; border-color: #ffffff12!important;
 box-shadow: inset 0 1px #ffffff08!important;
 backdrop-filter: blur(14px) saturate(110%)!important;
 -webkit-backdrop-filter: blur(14px) saturate(110%)!important;
}
.auth-tabs,.acc-nav { background: transparent!important; }
.auth-card input { background: #ffffff05!important; border-color: #ffffff20; }
@supports not (backdrop-filter:blur(1px)) { .auth-card,.acc-card,.price-card { background: #121725!important; } }
