:root {
  color-scheme: dark;
  --bg: #070707;
  --panel: rgba(14, 14, 14, 0.94);
  --text: #f3eadc;
  --muted: #a89f94;
  --amber: #f5a91c;
  --amber-light: #ffc65a;
  --metallic-gold-text: linear-gradient(180deg, #fff1b0 0%, #ffd06a 22%, #f4a31f 52%, #cf700b 82%, #934204 100%);
  --line: rgba(245, 169, 28, 0.38);
  --line-soft: rgba(255, 255, 255, 0.12);
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background:
    radial-gradient(circle at 72% 44%, rgba(143, 98, 50, 0.08), transparent 34%),
    radial-gradient(circle at 12% 22%, rgba(82, 40, 130, 0.05), transparent 26%),
    #070707;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.34;
  background-image: radial-gradient(rgba(255,255,255,.16) .7px, transparent .7px);
  background-size: 24px 24px;
  mask-image: linear-gradient(to bottom, black, rgba(0,0,0,.5) 72%, transparent);
  z-index: 1;
}

.home-video-background {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: var(--home-hero-boundary, 746px);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #070707;
}
.home-video-background video,
.home-video-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--home-media-position-x, 50%) var(--home-media-position-y, 50%);
  opacity: 1;
  filter: brightness(var(--home-media-brightness, 3.51)) grayscale(var(--home-media-grayscale, 1)) saturate(var(--home-media-saturation, 0)) contrast(var(--home-media-contrast, 1.62));
  transform: scale(1.015);
}
.home-video-background [hidden] { display: none; }
.home-video-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(4 4 4 / var(--home-overlay-left, .76)) 0%, rgb(4 4 4 / var(--home-overlay-middle, .46)) 48%, rgb(4 4 4 / var(--home-overlay-right, .58)) 100%),
    linear-gradient(180deg, rgb(7 7 7 / var(--home-overlay-top, .18)) 0%, rgb(7 7 7 / var(--home-overlay-bottom, .44)) 62%, #070707 100%);
}

.home-starfield {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.sky-stars { display: none; }
.sky-stars i {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  animation: home-star-twinkle var(--star-duration) ease-in-out var(--star-delay) infinite;
}
.sky-stars-near i { width: 2px; height: 2px; box-shadow: 0 0 6px rgba(255,255,255,.72); }
.sky-stars-mid i { width: 1.3px; height: 1.3px; background: #eadfca; box-shadow: 0 0 4px rgba(245,169,28,.28); }
.sky-stars-far i { width: .8px; height: .8px; opacity: .25; }
@keyframes home-star-twinkle {
  0%, 100% { opacity: .08; transform: scale(.72); }
  48% { opacity: .72; transform: scale(1.15); }
}
.sky-meteors { position: absolute; inset: 0; overflow: hidden; }
.sky-meteors i {
  position: absolute;
  top: var(--meteor-top);
  left: var(--meteor-left);
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff4df;
  box-shadow: 0 0 7px rgba(255,238,207,.86), 0 0 15px rgba(245,169,28,.3);
  opacity: 0;
  animation: home-meteor var(--meteor-duration) linear var(--meteor-delay) infinite;
}
.sky-meteors i::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--meteor-length, 150px);
  height: 1px;
  transform-origin: left center;
  transform: translateY(-50%) rotate(-45deg);
  background: linear-gradient(90deg, rgba(255,246,228,.78), rgba(245,169,28,.22) 35%, transparent 100%);
  filter: blur(.2px);
}
@keyframes home-meteor {
  0%, 7% { opacity: 0; transform: translate(0, 0); }
  9% { opacity: .82; }
  28% { opacity: .55; }
  34%, 100% { opacity: 0; transform: translate(-980px, 980px); }
}

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }

.home-shell {
  position: relative;
  z-index: 2;
  width: min(1560px, calc(100% - 72px));
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.topbar {
  height: 136px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
}

.brand-logo-3d {
  display: block;
  width: clamp(280px, 24vw, 350px);
  height: auto;
  max-width: none;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .62));
}

.top-actions { display: flex; align-items: center; gap: 12px; }
.language-button, .nav-login {
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(9,9,9,.72);
  color: var(--amber-light);
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .2s;
}
.language-button:hover, .nav-login:hover { border-color: var(--amber); background: rgba(245,169,28,.07); transform: translateY(-1px); }
.language-button { display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; font-size: 12px; }
.language-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.45; }
.nav-login { min-width: 94px; padding: 0 18px; font-size: 15px; }

.hero {
  min-height: 610px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 34px;
  padding: 14px 0 30px;
  min-width: 0;
  overflow: hidden;
}

.hero-copy { position: relative; z-index: 2; width: min(900px, 70vw); padding-left: 38px; }
.hero h1 {
  margin: 0 0 30px;
  max-width: 760px;
  color: #fff;
  font-size: clamp(55px, 5.15vw, 86px);
  font-weight: 560;
  line-height: 1.25;
  letter-spacing: .03em;
  text-wrap: balance;
}
.hero p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(16px, 1.38vw, 22px);
  line-height: 2;
  letter-spacing: .08em;
}
.hero-actions { display: flex; gap: 16px; width: min(100%, 430px); margin-top: 36px; }
.hero-actions > * { flex: 1; }
.primary-button, .secondary-button {
  height: 52px;
  min-width: 0;
  padding: 0 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  letter-spacing: .04em;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.primary-button {
  border: 1px solid #ffc351;
  color: #171007;
  background: linear-gradient(105deg, #f7a91a, #ffc258 52%, #f4a114);
  box-shadow: 0 12px 36px rgba(245, 169, 28, .09);
}
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 16px 42px rgba(245,169,28,.2); }
.secondary-button { border: 1px solid var(--line); color: var(--text); background: rgba(8,8,8,.52); }
.secondary-button:hover { transform: translateY(-2px); border-color: var(--amber); }

.capability-matrix {
  padding: 92px 0 76px;
  border-top: 1px solid rgba(245,169,28,.22);
}
.matrix-heading {
  display: block;
  margin-bottom: 30px;
}
.matrix-eyebrow { margin: 0 0 12px; color: var(--amber); font-size: 11px; font-weight: 700; letter-spacing: .22em; }
.matrix-heading h2 { margin: 0; color: #fff; font-size: clamp(38px, 4vw, 62px); font-weight: 560; letter-spacing: .04em; }
.matrix-heading > p { max-width: 760px; margin: 18px 0 0; color: var(--muted); font-size: 16px; line-height: 1.8; letter-spacing: .04em; }
.showcase-groups { display:grid; gap:28px; }
.showcase-loading { padding:80px 20px; border:1px solid rgba(255,255,255,.12); border-radius:18px; color:var(--muted); background:rgba(12,12,14,.42); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); text-align:center; }
.showcase-group { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(360px,1.05fr); min-height:0; overflow:hidden; border:1px solid rgba(255,255,255,.15); border-radius:19px; background:linear-gradient(145deg,rgba(27,28,33,.48),rgba(8,8,10,.42)); backdrop-filter:blur(16px) saturate(1.08); -webkit-backdrop-filter:blur(16px) saturate(1.08); box-shadow:0 24px 75px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.035); }
.showcase-group:nth-child(even) { grid-template-columns:minmax(360px,1.05fr) minmax(0,1.45fr); }
.showcase-group:nth-child(even) .showcase-media { order:2; }
.showcase-group:nth-child(even) .showcase-copy { order:1; }
.showcase-media { position:relative; min-width:0; width:calc(100% - 32px); aspect-ratio:16 / 9; align-self:center; margin:16px; overflow:hidden; border:1px solid rgba(255,255,255,.08); border-radius:13px; background:#090909; }
.showcase-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; background:#090909; }
.showcase-source-layer { position:absolute; inset:0; overflow:hidden; clip-path:inset(0 calc(100% - var(--split,50%)) 0 0); }
.showcase-compare-line { position:absolute; z-index:3; top:0; bottom:0; left:var(--split,50%); width:2px; transform:translateX(-1px); background:rgba(255,255,255,.94); box-shadow:0 0 16px rgba(0,0,0,.65); pointer-events:none; }
.showcase-compare-handle { position:absolute; z-index:4; top:50%; left:var(--split,50%); display:grid; place-items:center; width:48px; height:48px; transform:translate(-50%,-50%); border:1px solid rgba(255,255,255,.72); border-radius:50%; color:#fff; background:rgba(18,18,20,.86); box-shadow:0 8px 22px rgba(0,0,0,.4); pointer-events:none; font-size:19px; }
.showcase-range { position:absolute; z-index:5; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }
.showcase-label { position:absolute; z-index:4; bottom:14px; padding:7px 10px; border-radius:7px; color:#fff; background:rgba(5,5,5,.74); backdrop-filter:blur(8px); font-size:11px; letter-spacing:.07em; pointer-events:none; }
.showcase-label-before { left:14px; }.showcase-label-after { right:14px; color:#171007; background:rgba(247,176,43,.94); }
.showcase-copy { display:flex; flex-direction:column; justify-content:center; min-width:0; padding:24px 38px; border-left:1px solid rgba(255,255,255,.07); }
.showcase-group:nth-child(even) .showcase-copy { border-right:1px solid rgba(255,255,255,.07); border-left:0; }
.showcase-copy[data-align="center"] { text-align:center; align-items:center; }
.showcase-index { color:var(--amber); font-size:11px; font-weight:800; letter-spacing:.18em; }
.showcase-copy h3 { margin:12px 0 15px; color:#fff; font-size:42px; line-height:1.2; font-weight:620; letter-spacing:.02em; }
.showcase-copy h3.size-small { font-size:30px; }.showcase-copy h3.size-medium { font-size:36px; }.showcase-copy h3.size-large { font-size:42px; }
.showcase-copy h3.weight-regular { font-weight:450; }.showcase-copy h3.weight-semibold { font-weight:620; }.showcase-copy h3.weight-bold { font-weight:760; }
.showcase-copy h4 { margin:0; padding-top:15px; border-top:1px solid rgba(255,255,255,.12); color:#f3ede2; font-size:20px; line-height:1.45; }
.showcase-copy p { margin:11px 0 0; color:rgba(255,255,255,.62); font-size:15px; line-height:1.75; }
.showcase-categories { display:flex; flex-wrap:wrap; gap:8px; width:100%; margin-top:17px; }
.showcase-copy[data-align="center"] .showcase-categories { justify-content:center; }
.showcase-category { min-height:39px; padding:0 15px; border:1px solid rgba(255,255,255,.12); border-radius:8px; color:rgba(255,255,255,.7); background:rgba(255,255,255,.035); cursor:pointer; font-size:12px; transition:.2s; }
.showcase-category:hover,.showcase-category.active { color:var(--amber-light); border-color:rgba(245,169,28,.62); background:rgba(245,169,28,.09); }
.showcase-enter { min-width:0; width:100%; height:46px; margin-top:17px; border-radius:8px; font-size:15px; font-weight:650; }

.modal-layer { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; }
.modal-layer[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.66); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.modal-card {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(245,169,28,.74);
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(145deg, rgba(23,23,23,.96), rgba(10,10,10,.97));
  box-shadow: 0 30px 100px rgba(0,0,0,.72), inset 0 1px rgba(255,255,255,.03);
  animation: modal-in .24s ease-out;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-close {
  position: absolute; right: 18px; top: 14px;
  width: 34px; height: 34px; border: 0; background: transparent; color: #fff;
  font-size: 29px; font-weight: 200; line-height: 1; cursor: pointer; opacity: .82;
}
.modal-close:hover { opacity: 1; color: var(--amber-light); }
.login-card { width: min(468px, calc(100vw - 36px)); padding: 48px 50px 32px; }
.login-card h2 { margin: 0 0 8px; font-size: 34px; font-weight: 650; letter-spacing: .03em; }
.modal-subtitle { margin: 0 0 31px; color: rgba(255,255,255,.88); font-size: 16px; }
.login-card label { display: block; margin: 17px 0 9px; font-size: 15px; font-weight: 600; color: #fff; }
.login-card input {
  width: 100%; height: 52px; border: 1px solid rgba(255,255,255,.24); border-radius: 8px;
  outline: none; background: rgba(0,0,0,.26); color: #fff; padding: 0 15px;
  transition: border-color .2s, box-shadow .2s;
}
.login-card input::placeholder { color: rgba(255,255,255,.52); }
.login-card input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245,169,28,.1); }
.password-field { position: relative; }
.password-field input { padding-right: 48px; }
.password-field button { position: absolute; right: 5px; top: 5px; width: 42px; height: 42px; border: 0; background: transparent; cursor: pointer; color: #fff; opacity: .76; }
.password-field svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.forgot-link { display: block; width: max-content; margin: 10px 0 22px auto; color: var(--amber); text-decoration: none; font-size: 14px; font-weight: 600; }
.forgot-link:hover, .register-copy a:hover { color: var(--amber-light); }
.login-submit { width: 100%; height: 54px; border: 1px solid #ffc45a; border-radius: 8px; color: #15100a; background: linear-gradient(100deg,#f7aa1d,#ffc25a,#f2a016); cursor: pointer; font-size: 18px; font-weight: 650; }
.login-submit:disabled { cursor: wait; opacity: .64; }
.form-message { min-height: 0; margin: 0; color: #ff8f8f; font-size: 13px; line-height: 1.45; text-align: center; }
.form-message:not(:empty) { margin: -10px 0 14px; }
.modal-rule { height: 1px; margin: 24px 0 20px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); }
.register-copy { margin: 0; text-align: center; color: #fff; font-size: 14px; }
.register-copy a { color: var(--amber); text-decoration: none; font-weight: 650; }

.feature-card { width: min(940px, calc(100vw - 44px)); padding: 42px 46px 38px; }
.feature-heading { max-width: 730px; }
.feature-heading .eyebrow { margin: 0 0 12px; color: var(--amber); font-size: 11px; font-weight: 700; letter-spacing: .22em; }
.feature-heading h2 { margin: 0 0 10px; font-size: clamp(27px, 3vw, 42px); font-weight: 600; }
.feature-heading > p:last-child { margin: 0; color: rgba(255,255,255,.65); line-height: 1.8; }
.feature-tabs { display: flex; gap: 8px; margin: 30px 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.feature-tabs button { min-width: 128px; padding: 11px 18px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: rgba(255,255,255,.65); cursor: pointer; }
.feature-tabs button.active { border-color: var(--line); background: rgba(245,169,28,.08); color: var(--amber-light); }
.feature-panels article { position: relative; min-height: 220px; padding: 27px 34px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(0,0,0,.24); }
.feature-panels article[hidden] { display: none; }
.feature-number { position: absolute; top: 22px; right: 28px; color: rgba(245,169,28,.22); font-size: 50px; font-weight: 700; }
.feature-panels h3 { margin: 0 0 12px; font-size: 25px; }
.feature-panels p { max-width: 690px; margin: 0 0 22px; color: rgba(255,255,255,.7); line-height: 1.75; }
.feature-panels ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.feature-panels li { padding: 15px; border-left: 2px solid var(--amber); background: rgba(255,255,255,.035); color: rgba(255,255,255,.88); font-size: 14px; }
.feature-enter { display: block; min-width: 180px; height: 52px; margin: 24px 0 0 auto; font-size: 16px; }

@media (max-width: 1050px) {
  .home-shell { width: min(100% - 42px, 920px); }
  .topbar { height: 112px; }
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 60px; }
  .hero-copy { width: 100%; padding: 0; text-align: center; }
  .hero h1 { margin-inline: auto; font-size: clamp(48px, 8vw, 74px); }
  .hero-actions { justify-content: center; }
  .capability-matrix { margin-top: 70px; padding-top: 70px; }
  .showcase-group { grid-template-columns:1fr; min-height:0; }
  .showcase-group:nth-child(even) { grid-template-columns:1fr; }
  .showcase-media,.showcase-group:nth-child(even) .showcase-media { order:1; min-height:0; }
  .showcase-copy,.showcase-group:nth-child(even) .showcase-copy { order:2; border:0; border-top:1px solid rgba(255,255,255,.07); }
}

@media (max-width: 680px) {
  .home-shell { width: calc(100% - 30px); }
  .topbar { height: 88px; }
  .brand-logo-3d { width: 220px; }
  .language-button { width: 44px; padding: 0; justify-content: center; }
  .language-button span { display: none; }
  .nav-login { min-width: 70px; height: 44px; padding: 0 15px; font-size: 14px; }
  .language-button { height: 44px; }
  .hero { padding-top: 52px; }
  .hero h1 { font-size: clamp(38px, 12vw, 56px); line-height: 1.24; }
  .hero p { font-size: 14px; line-height: 1.8; }
  .desktop-break { display: none; }
  .hero-actions { flex-direction: column; gap: 12px; margin-top: 32px; }
  .primary-button, .secondary-button { width: 100%; min-width: 0; height: 56px; font-size: 16px; }
  .capability-matrix { margin-top: 54px; padding: 58px 0 42px; }
  .matrix-heading { display: block; margin-bottom: 26px; }
  .matrix-heading > p { margin-top: 14px; font-size: 14px; }
  .showcase-groups { gap:18px; }
  .showcase-group { grid-template-columns:minmax(0,1.45fr) minmax(0,1.05fr); }
  .showcase-group:nth-child(even) { grid-template-columns:minmax(0,1.05fr) minmax(0,1.45fr); }
  .showcase-media { order:1; width:calc(100% - 12px); min-height:0; margin:6px; aspect-ratio:auto; }
  .showcase-copy { order:2; padding:14px 12px; border:0; border-left:1px solid rgba(255,255,255,.07); }
  .showcase-group:nth-child(even) .showcase-media { order:2; width:calc(100% - 12px); margin:6px; }
  .showcase-group:nth-child(even) .showcase-copy { order:1; border:0; border-right:1px solid rgba(255,255,255,.07); }
  .showcase-media::before { content:""; display:block; width:100%; padding-top:56.25%; }
  .showcase-index { font-size:7px; letter-spacing:.12em; }
  .showcase-copy h3,.showcase-copy h3.size-large { margin:6px 0 7px; font-size:17px; }
  .showcase-copy h3.size-medium { font-size:16px; }.showcase-copy h3.size-small { font-size:15px; }
  .showcase-copy h4 { padding-top:7px; font-size:10px; }
  .showcase-copy p { margin-top:5px; font-size:8px; line-height:1.5; }
  .showcase-categories { gap:4px; margin-top:7px; }
  .showcase-category { min-height:25px; padding:0 7px; font-size:8px; }
  .showcase-enter { height:29px; margin-top:7px; font-size:9px; }
  .showcase-label { bottom:7px; padding:4px 6px; font-size:7px; }
  .showcase-label-before { left:7px; }.showcase-label-after { right:7px; }
  .showcase-compare-handle { width:30px; height:30px; font-size:13px; }
  .login-card { padding: 44px 25px 28px; }
  .login-card h2 { font-size: 28px; }
  .feature-card { padding: 42px 20px 26px; max-height: calc(100vh - 28px); overflow-y: auto; }
  .feature-tabs { gap: 4px; }
  .feature-tabs button { min-width: 0; flex: 1; padding: 10px 5px; }
  .feature-panels article { padding: 22px 20px; }
  .feature-panels ul { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .sky-meteors { display: none; }
  .sky-stars i { animation: none !important; opacity: .28; }
}

/* Homepage color previews: keep layout identical and swap only the visual system. */
html[data-home-theme="brand"] {
  --text:#f4f0ff;
  --muted:#aaa3bc;
  --amber:#9a63ff;
  --amber-light:#e5d7ff;
  --line:rgba(150,99,255,.48);
}
html[data-home-theme="brand"] body {
  background:radial-gradient(circle at 74% 18%,rgba(53,114,255,.11),transparent 30%),radial-gradient(circle at 18% 70%,rgba(210,65,172,.09),transparent 27%),#060609;
}
html[data-home-theme="brand"] .primary-button,
html[data-home-theme="brand"] .login-submit,
html[data-home-theme="brand"] .showcase-label-after {
  border-color:#b583ff;
  color:#fff;
  background:linear-gradient(110deg,#6d52e8,#467ff6 50%,#dc58ad);
  box-shadow:0 12px 38px rgba(99,83,232,.2);
}
html[data-home-theme="brand"] .capability-matrix { border-top-color:rgba(145,95,255,.3); }
html[data-home-theme="brand"] .language-button:hover,
html[data-home-theme="brand"] .nav-login:hover,
html[data-home-theme="brand"] .showcase-category:hover,
html[data-home-theme="brand"] .showcase-category.active,
html[data-home-theme="brand"] .feature-tabs button.active { background:rgba(140,88,255,.1); border-color:rgba(170,126,255,.7); }
html[data-home-theme="brand"] .modal-card { border-color:rgba(159,105,255,.75); }
html[data-home-theme="brand"] .feature-number { color:rgba(150,99,255,.25); }

html[data-home-theme="silver"] {
  --text:#f4f7fb;
  --muted:#9fa9b6;
  --amber:#a9c4e6;
  --amber-light:#eef6ff;
  --line:rgba(169,196,230,.42);
}
html[data-home-theme="silver"] body {
  background:radial-gradient(circle at 72% 20%,rgba(101,149,207,.1),transparent 32%),radial-gradient(circle at 14% 65%,rgba(191,213,238,.06),transparent 26%),#060708;
}
html[data-home-theme="silver"] .brand-word b {
  background:linear-gradient(120deg,#e9f2ff,#99b8dc 52%,#d7e7f8);
  -webkit-background-clip:text;
  background-clip:text;
}
html[data-home-theme="silver"] .primary-button,
html[data-home-theme="silver"] .login-submit,
html[data-home-theme="silver"] .showcase-label-after {
  border-color:#d7e7f8;
  color:#10151c;
  background:linear-gradient(110deg,#f4f7fb,#b9cee5 52%,#eaf2fb);
  box-shadow:0 12px 36px rgba(139,178,219,.14);
}
html[data-home-theme="silver"] .capability-matrix { border-top-color:rgba(169,196,230,.26); }
html[data-home-theme="silver"] .language-button:hover,
html[data-home-theme="silver"] .nav-login:hover,
html[data-home-theme="silver"] .showcase-category:hover,
html[data-home-theme="silver"] .showcase-category.active,
html[data-home-theme="silver"] .feature-tabs button.active { background:rgba(169,196,230,.08); border-color:rgba(195,218,244,.64); }
html[data-home-theme="silver"] .modal-card { border-color:rgba(169,196,230,.68); }
html[data-home-theme="silver"] .feature-number { color:rgba(169,196,230,.22); }

html[data-home-logo="gold"] {
  --logo-a1:#ffe39a; --logo-a2:#ffc04d; --logo-a3:#f39b20; --logo-a4:#d77713; --logo-a5:#fff0bd;
  --logo-b1:#8f4e0f; --logo-b2:#d98a20; --logo-b3:#ffd678; --logo-accent:#fff0bd;
  --logo-word-gradient:linear-gradient(115deg,#ffe7ab 0%,#f3a51b 28%,#fff0ae 48%,#d88916 68%,#ffd982 100%);
  --logo-shadow:drop-shadow(0 7px 14px rgba(245,169,28,.22)) drop-shadow(0 1px 1px rgba(255,249,211,.35));
}
html[data-home-logo="gold"] .brand-mark .logo-metal-outline { opacity:.78; stroke:#fff7c9; stroke-width:.8; }
html[data-home-logo="gold"] .brand-mark .logo-metal-shine { opacity:.92; stroke:#fffdf1; stroke-width:1.15; stroke-linecap:round; mix-blend-mode:screen; filter:drop-shadow(0 0 2px rgba(255,244,187,.9)); }
html[data-home-logo="silver"] {
  --logo-a1:#f7fbff; --logo-a2:#bcd3eb; --logo-a3:#6f9bc8; --logo-a4:#d9e8f7; --logo-a5:#ffffff;
  --logo-b1:#25486f; --logo-b2:#779fc7; --logo-b3:#e8f3ff; --logo-accent:#dff4ff;
  --logo-word-gradient:linear-gradient(120deg,#ffffff,#9ebcda 56%,#edf7ff);
}
html[data-home-logo="gold"] .brand-word b,
html[data-home-logo="silver"] .brand-word b,
html[data-home-logo="login-pearl"] .brand-word b,
html[data-home-logo="login-rose"] .brand-word b,
html[data-home-logo="login-violet"] .brand-word b { background:var(--logo-word-gradient); -webkit-background-clip:text; background-clip:text; }

html[data-home-logo="login-pearl"] {
  --logo-a1:#ffffff; --logo-a2:#f1e9ed; --logo-a3:#cdbcc5; --logo-a4:#ffffff; --logo-a5:#e1d4da;
  --logo-b1:#8a737f; --logo-b2:#d8c9d0; --logo-b3:#ffffff; --logo-accent:#fff8fb;
  --logo-word-gradient:linear-gradient(120deg,#ffffff,#d9c8d0 55%,#ffffff);
  --logo-shadow:drop-shadow(0 7px 18px rgba(119,42,65,.26));
}
html[data-home-logo="login-rose"] {
  --logo-a1:#f9e7ec; --logo-a2:#dea2b2; --logo-a3:#a44862; --logo-a4:#752b41; --logo-a5:#f1c5d1;
  --logo-b1:#4d1d2b; --logo-b2:#914158; --logo-b3:#e7adbd; --logo-accent:#f7d9e1;
  --logo-word-gradient:linear-gradient(120deg,#f7e4e9,#a34b63 54%,#e7adbd);
  --logo-shadow:drop-shadow(0 8px 22px rgba(126,35,58,.42));
}
html[data-home-logo="login-violet"] {
  --logo-a1:#ffffff; --logo-a2:#c7c8ff; --logo-a3:#777cff; --logo-a4:#5851bb; --logo-a5:#e3ddff;
  --logo-b1:#292452; --logo-b2:#6864cf; --logo-b3:#c6c4ff; --logo-accent:#b8bdff;
  --logo-word-gradient:linear-gradient(120deg,#ffffff,#8a8eff 55%,#d8d5ff);
  --logo-shadow:drop-shadow(0 8px 22px rgba(97,91,224,.38));
}

/* Matrix actions mirror the transparent secondary action in the hero. */
.showcase-category {
  min-height:44px;
  padding:0 18px;
  border-color:var(--line);
  color:#fff;
  background:rgba(8,8,8,.52);
  font-size:14px;
}
.showcase-category:hover,
.showcase-category.active {
  color:#fff;
  border-color:var(--amber);
  background:rgba(8,8,8,.72);
  box-shadow:0 0 0 2px rgba(245,169,28,.08);
}
.showcase-enter.primary-button {
  height:52px;
  border:1px solid var(--line);
  color:#fff;
  background:rgba(8,8,8,.52);
  box-shadow:none;
  font-size:16px;
  font-weight:500;
}
.showcase-enter.primary-button:hover {
  border-color:var(--amber);
  background:rgba(8,8,8,.72);
  box-shadow:0 0 0 2px rgba(245,169,28,.08);
}

/* Keep every desktop matrix card the same size when editable copy gains or loses a line. */
@media (min-width:1051px) {
  .showcase-group {
    height:550px;
  }
  .showcase-media {
    height:calc(100% - 32px);
    aspect-ratio:auto;
  }
  .showcase-copy {
    height:100%;
  }
}

/* Homepage feature thumbnail rail */
.feature-rail { position:relative; z-index:4; width:min(1120px,calc(100% - 76px)); min-width:0; max-width:100%; margin:0 auto; overflow:hidden; }
.feature-rail::before,.feature-rail::after { content:""; position:absolute; z-index:2; top:0; bottom:0; width:76px; pointer-events:none; }
.feature-rail::before { left:0; background:linear-gradient(90deg,rgba(5,6,10,.98),transparent); }
.feature-rail::after { right:0; background:linear-gradient(270deg,rgba(5,6,10,.98),transparent); }
.feature-rail-viewport { width:100%; min-width:0; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; cursor:grab; touch-action:pan-x; -webkit-overflow-scrolling:touch; }
.feature-rail-viewport::-webkit-scrollbar { display:none; }
.feature-rail-viewport.is-dragging { cursor:grabbing; scroll-behavior:auto; }
.feature-rail-track { display:flex; width:max-content; gap:16px; padding:10px 44px 20px; }
.feature-rail-set { display:flex; gap:16px; }
.feature-rail-card { position:relative; flex:0 0 178px; height:120px; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:15px; color:#fff; background:#101114; box-shadow:0 16px 36px rgba(0,0,0,.3); text-decoration:none; transform:translateZ(0); transition:transform .2s,border-color .2s,box-shadow .2s; }
.feature-rail-card:hover,.feature-rail-card:focus-visible { transform:translateY(-4px); border-color:rgba(245,169,28,.72); box-shadow:0 20px 42px rgba(0,0,0,.42),0 0 24px rgba(245,169,28,.12); outline:none; }
.feature-rail-card img { width:100%; height:100%; object-fit:cover; display:block; background:#111; }
.feature-rail-card::after { content:""; position:absolute; inset:38% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.88)); pointer-events:none; }
.feature-rail-card span { position:absolute; z-index:1; left:11px; right:11px; bottom:10px; overflow:hidden; color:#fff; font-size:12px; font-weight:500; line-height:1.45; letter-spacing:.055em; text-shadow:0 2px 8px #000; white-space:nowrap; text-overflow:ellipsis; }
@media (max-width:680px) {
  .feature-rail { width:100%; margin:0 auto; }
  .feature-rail::before,.feature-rail::after { width:28px; }
  .feature-rail-track { gap:10px; padding:8px 20px 14px; }
  .feature-rail-set { gap:10px; }
  .feature-rail-card { flex-basis:144px; height:96px; border-radius:12px; }
  .feature-rail-card span { left:8px; right:8px; bottom:7px; font-size:10px; }
}
@media (prefers-reduced-motion:reduce) { .feature-rail-card { transition:none; } }

/* Metallic gold typography, matched to the 3D IDEA DESIGN Ai wordmark. */
html[data-home-theme="amber"] :is(
  .language-button span,
  .matrix-eyebrow,
  .showcase-index,
  .forgot-link,
  .register-copy a,
  .feature-heading .eyebrow
) {
  color: #f4a31f !important;
  background-image: var(--metallic-gold-text);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .18px rgba(99, 43, 2, .72);
  text-shadow: 0 1px 0 rgba(255, 223, 133, .2), 0 2px 4px rgba(0, 0, 0, .42);
}

html[data-home-theme="amber"] .nav-login {
  color: #f4a31f !important;
  background-image: var(--metallic-gold-text), linear-gradient(rgba(9, 9, 9, .72), rgba(9, 9, 9, .72));
  background-repeat: no-repeat;
  background-clip: text, padding-box;
  -webkit-background-clip: text, padding-box;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .18px rgba(99, 43, 2, .72);
  text-shadow: 0 1px 0 rgba(255, 223, 133, .18), 0 2px 4px rgba(0, 0, 0, .42);
}

html[data-home-theme="amber"] .feature-tabs button.active {
  color: #f4a31f !important;
  background-image: var(--metallic-gold-text), linear-gradient(rgba(245, 169, 28, .08), rgba(245, 169, 28, .08));
  background-repeat: no-repeat;
  background-clip: text, padding-box;
  -webkit-background-clip: text, padding-box;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .18px rgba(99, 43, 2, .72);
  text-shadow: 0 1px 0 rgba(255, 223, 133, .18), 0 2px 4px rgba(0, 0, 0, .42);
}

html[data-home-theme="amber"] .feature-number {
  color: #d88412;
  text-shadow: 0 1px 0 rgba(255, 219, 119, .14), 0 3px 8px rgba(0, 0, 0, .45);
}