/* Premium theme refinement */
.brand {
  gap: 0;
  color: var(--text-primary);
}

.brand-app-icon,
.brand span {
  display: none;
}

.brand img.brand-wordmark {
  display: block;
  width: 112px;
  height: auto;
  max-width: none;
  border-radius: 0;
  box-shadow: none;
  filter: brightness(0) invert(1) opacity(0.94);
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.brand:hover .brand-wordmark {
  transform: translateY(-1px);
  opacity: 1;
}

body:not(.light) .nav {
  background: rgba(3, 8, 20, 0.78);
  border-bottom-color: rgba(128, 164, 226, 0.14);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(22px) saturate(125%);
}

body:not(.light) .links {
  gap: 4px;
  color: rgba(224, 233, 249, 0.68);
  font-size: 14px;
}

body:not(.light) .links a:not(.btn) {
  padding: 10px 11px;
  border-radius: 10px;
  color: rgba(224, 233, 249, 0.68);
  text-shadow: none;
  transition: color 0.22s ease, background 0.22s ease, transform 0.22s ease;
}

body:not(.light) .links a:not(.btn):hover {
  color: #ffffff;
  background: rgba(116, 145, 211, 0.1);
  transform: translateY(-1px);
}

body:not(.light) .links .btn.primary {
  min-height: 44px;
  margin-left: 8px;
  padding: 0 20px;
  background: linear-gradient(135deg, #1d8fc6, #6557d9);
  box-shadow: 0 12px 26px rgba(36, 100, 177, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

body:not(.light) .brand-wordmark {
  filter: brightness(0) invert(1) opacity(0.92);
}

body.light {
  --bg-warm-start: #f8fbff;
  --bg-warm-mid: #f3f7fc;
  --bg-warm-end: #eef4fb;
  --bg-card: rgba(255, 255, 255, 0.78);
  --bg-card-hover: rgba(255, 255, 255, 0.96);
  --border-color: rgba(77, 103, 148, 0.14);
  --border-hover: rgba(86, 91, 226, 0.32);
  --text-primary: #111d35;
  --text-secondary: #60708a;
  --text: #17233b;
  --muted: #66758d;
  --accent-coral: #5367e8;
  --accent-gold: #8b5cf6;
  --accent-yellow: #2f9ee8;
  --shadow-glow: 0 22px 70px rgba(38, 73, 128, 0.11);
  --neon-glow: 0 12px 34px rgba(83, 103, 232, 0.18);
}

body.light,
body.light .page {
  background: #f5f8fc !important;
}

body.light::before {
  background-color: transparent !important;
  background-image:
    linear-gradient(rgba(71, 96, 140, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(71, 96, 140, 0.028) 1px, transparent 1px) !important;
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.72) 58%, transparent 100%);
}

body.light .page {
  background:
    radial-gradient(circle at 18% 8%, rgba(102, 182, 255, 0.12), transparent 28%),
    radial-gradient(circle at 82% 12%, rgba(137, 112, 255, 0.1), transparent 26%),
    linear-gradient(180deg, #f9fbfe 0%, #f3f7fc 52%, #eef4fa 100%) !important;
}

body.light .nav {
  top: 0;
  width: 100%;
  margin: 0;
  border: 0 !important;
  border-bottom: 1px solid rgba(112, 132, 166, 0.16) !important;
  border-radius: 0;
  background: rgba(249, 251, 254, 0.86) !important;
  box-shadow: 0 8px 28px rgba(38, 58, 91, 0.055);
  backdrop-filter: blur(24px) saturate(150%);
}

body.light .nav::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.42), transparent 38%, rgba(91, 109, 214, 0.025) 72%, rgba(255, 255, 255, 0.28));
}

body.light .nav-inner {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 28px));
  height: 70px;
}

body.light .brand {
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.brand-wordmark {
  display: none;
}

body.light .brand-app-icon,
body.light .brand span {
  display: none;
}

body.light .brand-wordmark {
  display: block;
  width: 112px;
  height: auto;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 5px 12px rgba(42, 57, 99, 0.08));
  transition: transform 0.22s ease, filter 0.22s ease;
}

body:not(.light) .brand img.brand-wordmark {
  display: block !important;
  width: 112px !important;
  height: auto !important;
  filter: brightness(0) invert(1) opacity(0.92) !important;
}

body.light .brand:hover .brand-wordmark {
  transform: translateY(-1px);
  filter: drop-shadow(0 7px 14px rgba(42, 57, 99, 0.12));
}

body.light .links {
  gap: 4px;
  color: #56647b;
  font-size: 14px;
}

body.light .links a:not(.btn) {
  position: relative;
  padding: 10px 11px;
  border-radius: 11px;
  color: #56647b !important;
  text-shadow: none;
  transition: color 0.22s ease, background 0.22s ease, transform 0.22s ease;
}

body.light .links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 5px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #3aa9eb, #6b63e8);
  transition: left 0.22s ease, right 0.22s ease;
}

body.light .links a:not(.btn):hover {
  color: #243764 !important;
  background: rgba(84, 105, 158, 0.07);
  transform: translateY(-1px);
}

body.light .links a:not(.btn):hover::after {
  left: 11px;
  right: 11px;
}

body.light .theme-toggle {
  width: 40px;
  height: 40px;
  margin-left: 5px;
  color: #42516a;
  border-color: rgba(103, 122, 160, 0.2);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 6px 16px rgba(44, 63, 99, 0.07), inset 0 1px 0 #fff;
}

body.light .theme-toggle:hover {
  color: #5669df;
  border-color: rgba(86, 105, 223, 0.35);
  background: #fff;
  box-shadow: 0 9px 22px rgba(75, 91, 191, 0.14);
}

body.light .links .btn.primary {
  min-height: 44px;
  margin-left: 8px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.64);
  background: linear-gradient(135deg, #3349c8 0%, #5e67e8 54%, #7458de 100%);
  box-shadow:
    0 12px 26px rgba(62, 74, 190, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  text-shadow: 0 1px 5px rgba(25, 31, 96, 0.25);
}

body.light .links .btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(62, 74, 190, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

body.light .hero,
body.light .demo-section {
  background:
    radial-gradient(circle at 50% 12%, rgba(91, 178, 242, 0.1), transparent 31%),
    radial-gradient(circle at 50% 38%, rgba(114, 95, 224, 0.09), transparent 43%),
    linear-gradient(180deg, #f9fbfe 0%, #f4f8fc 54%, #f5f8fc 100%) !important;
}

body.light .hero::after {
  background: linear-gradient(180deg, rgba(249, 251, 254, 0) 0%, rgba(239, 245, 251, 0.55) 52%, rgba(245, 248, 252, 0) 100%) !important;
}

body.light .eyebrow,
body.light .section-kicker {
  color: #5264d8;
  border-color: rgba(89, 108, 219, 0.2);
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 10px 28px rgba(48, 73, 122, 0.07), inset 0 1px 0 #fff;
}

body.light .eyebrow i {
  background: #6573e7;
  box-shadow: 0 0 0 5px rgba(101, 115, 231, 0.1), 0 0 18px rgba(86, 105, 223, 0.24);
}

body.light h1 span,
body.light .gradient,
body.light .section-modern .section-head h2 span {
  background: linear-gradient(105deg, #2b3f92 12%, #5367e8 52%, #8a59d6 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

body.light .section-modern .section-head h2 {
  color: #14213b;
  letter-spacing: -0.045em;
}

body.light .section-modern .section-head p {
  color: #67758b;
}

body.light .workflow-card,
body.light .mini-panel,
body.light .feature-card,
body.light .scene-card,
body.light .install-step,
body.light .support-card,
body.light .release-list,
body.light .contact-card {
  border-color: rgba(106, 127, 163, 0.16);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.8));
  box-shadow:
    0 24px 70px rgba(47, 70, 108, 0.1),
    0 2px 8px rgba(47, 70, 108, 0.04),
    inset 0 1px 0 #fff;
  backdrop-filter: blur(18px) saturate(130%);
}

body.light .primary-workflow {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 5%, rgba(108, 102, 230, 0.1), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 254, 0.88));
}

body.light .primary-workflow::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -110px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(86, 105, 223, 0.065);
  filter: blur(12px);
  pointer-events: none;
}

body.light .workflow-topbar {
  color: #7a879b;
  border-bottom-color: rgba(90, 112, 151, 0.12);
}

body.light .workflow-topbar b,
body.light .mini-panel h3,
body.light .feature-card h3,
body.light .scene-card b,
body.light .install-step h3,
body.light .support-card h3,
body.light .release-item h3,
body.light .contact-card h3 {
  color: #17233b;
}

body.light .mini-panel p,
body.light .feature-card p,
body.light .scene-card p,
body.light .install-step p,
body.light .support-card p,
body.light .release-item p,
body.light .contact-card p {
  color: #67758b;
}

body.light .bubble.user {
  background: linear-gradient(135deg, #3ea9e8, #5f67e7 62%, #8058da);
  box-shadow: 0 12px 28px rgba(73, 94, 204, 0.2);
}

body.light .bubble.ai {
  color: #34425b;
  border-color: rgba(103, 125, 164, 0.15);
  background: rgba(238, 243, 250, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

body.light .workflow-actions span,
body.light .tags span {
  color: #4159ba;
  border-color: rgba(83, 103, 232, 0.18);
  background: rgba(83, 103, 232, 0.07);
}

body.light .mini-panel em,
body.light .install-step em,
body.light .feature-icon {
  background: linear-gradient(135deg, #3aa9e9, #5f68e8 58%, #865bd9);
  box-shadow: 0 14px 32px rgba(75, 92, 205, 0.2);
}

body.light .feature-card:hover,
body.light .scene-card:hover,
body.light .install-step:hover,
body.light .support-card:hover,
body.light .contact-card:hover {
  border-color: rgba(83, 103, 232, 0.28);
  box-shadow: 0 30px 80px rgba(54, 75, 119, 0.14), 0 10px 26px rgba(83, 103, 232, 0.07);
}

body.light .release-item {
  border-bottom-color: rgba(99, 120, 157, 0.12);
}

body.light .release-item time {
  color: #4a5fc7;
  background: rgba(83, 103, 232, 0.08);
}

@media (max-width: 960px) {
  body.light .nav {
    top: 0;
    width: 100%;
    border-radius: 0;
  }

  body.light .nav-inner {
    width: calc(100% - 18px);
    height: 64px;
  }

  body.light .brand-wordmark {
    width: 102px;
  }

  body.light .links {
    gap: 7px;
  }

  body.light .links .btn.primary {
    min-height: 40px;
    margin-left: 0;
    padding: 0 15px;
  }
}