/* ==========================================================================
   KEYIN UAE — ULTRA PREMIUM 3D
   Sculptural hardware gallery. Syne + Outfit. Depth over glow.
   ========================================================================== */

.premium {
  --neutral-950: #f5f4f2;
  --neutral-900: #ebe9e6;
  --neutral-800: #d4d1cb;
  --neutral-700: #b8b4ac;
  --neutral-600: #96928a;
  --neutral-500: #7a766e;
  --neutral-400: #5c5954;
  --neutral-200: rgba(255, 255, 255, 0.1);
  --neutral-100: rgba(255, 255, 255, 0.055);
  --neutral-50: #121316;

  --k-bg: #0a0b0e;
  --k-bg-2: #0e1014;
  --k-bg-3: #14161c;
  --k-line: rgba(255, 255, 255, 0.08);
  --k-line-strong: rgba(255, 255, 255, 0.14);
  --k-metal: #c9a86c;
  --k-metal-soft: #e2c89a;
  --k-metal-deep: #8a6d3a;
  --k-ink: #f5f4f2;
  --k-mute: rgba(245, 244, 242, 0.58);
  --k-action: #e85d2a;
  --k-action-deep: #c4471a;
  --font: "Outfit", ui-sans-serif, sans-serif;
  --font-display: "Syne", ui-sans-serif, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   Base atmosphere
   -------------------------------------------------------------------------- */
body.premium {
  font-family: var(--font);
  background:
    radial-gradient(ellipse 90% 55% at 70% -5%, rgba(201, 168, 108, 0.07), transparent 55%),
    radial-gradient(ellipse 70% 50% at -5% 40%, rgba(232, 93, 42, 0.04), transparent 50%),
    var(--k-bg);
  color: var(--neutral-800);
  -webkit-font-smoothing: antialiased;
}
body.premium::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.premium ::selection { background: var(--k-metal); color: #0a0b0e; }

.premium h1, .premium h2, .premium h3,
.premium .section-title,
.premium .product-tagline,
.premium .showcase-name,
.premium .hero-display-title,
.premium .hero-brand,
.premium .showcase-modal-title {
  font-family: var(--font-display);
}

.k-progress {
  position: fixed;
  top: 0; left: 0;
  height: 1.5px;
  width: 0;
  z-index: 2147483001;
  background: linear-gradient(90deg, var(--k-metal-deep), var(--k-metal), var(--k-action));
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.premium .header.scrolled {
  background: rgba(10, 11, 14, 0.88);
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  box-shadow: none;
  border-bottom: 1px solid var(--k-line);
}

/* Header: logo | centered links | CTA */
.premium .nav-bar {
  height: 100px;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.85rem;
}
.premium .logo {
  gap: 10px;
  flex-shrink: 0;
  min-width: max-content;
  position: relative;
  z-index: 2;
}
.premium .logo picture:has(.logo-img--dark) {
  display: none;
}
.premium .logo-img {
  height: 72px;
  width: auto;
}
@media (min-width: 1280px) {
  .premium .logo-img { height: 84px; }
}
/* Always use the light logo asset — never invert (invert turns the orange accent blue). */
.premium .header .logo-img--dark { display: none !important; }
.premium .header .logo-img--light { display: block !important; }
.premium .header .logo > .logo-img--dark {
  filter: none;
}
.premium.detail-page .logo-img,
.premium .detail-page .logo-img {
  height: 72px;
}
@media (min-width: 1280px) {
  .premium.detail-page .logo-img,
  .premium .detail-page .logo-img { height: 84px; }
}
.premium .header.scrolled .logo-badge,
.premium .logo-badge {
  color: var(--keyin-orange, #f97316);
  border-color: var(--keyin-orange, #f97316);
  font-family: var(--font);
  letter-spacing: 0.14em;
  font-size: 13px;
  padding-left: 12px;
  padding-right: 4px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}
.premium .nav-links {
  display: none;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.7rem;
  min-width: 0;
}
@media (min-width: 1024px) {
  .premium .nav-links { display: flex; }
}
@media (min-width: 1280px) {
  .premium .nav-links { gap: 1rem; }
}
@media (min-width: 1440px) {
  .premium .nav-links { gap: 1.35rem; }
}
.premium .nav-links a {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(245, 244, 242, 0.72);
  white-space: nowrap;
}
@media (min-width: 1280px) {
  .premium .nav-links a { font-size: 13.5px; }
}
@media (min-width: 1440px) {
  .premium .nav-links a { font-size: 14px; }
}
.premium .header.scrolled .nav-links a { color: rgba(245, 244, 242, 0.62); }
.premium .nav-links a:hover,
.premium .nav-links a.active,
.premium .header.scrolled .nav-links a:hover,
.premium .header.scrolled .nav-links a.active {
  color: var(--k-metal-soft);
}
.premium .header.scrolled .menu-toggle { color: #fff; }

.premium .nav-bar > .btn-quote {
  display: none;
  white-space: nowrap;
  height: 40px;
  padding: 0 1rem;
  font-size: 11px;
  letter-spacing: 0.1em;
  border-radius: 4px;
  line-height: 1;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .premium .nav-bar > .btn-quote { display: inline-flex; }
}

.premium .mobile-menu {
  top: 100px;
  background: rgba(10, 11, 14, 0.97);
  backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--k-line);
}
.premium .mobile-menu a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--neutral-900);
  font-family: var(--font-display);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Buttons — sharp, solid, premium (no pill glow)
   -------------------------------------------------------------------------- */
.premium .btn-quote,
.premium .btn-hero-primary,
.premium .product-section--pop .product-cta,
.premium .product-cta,
.premium .dev-cta,
.premium .showcase-modal-cta {
  background: var(--k-action);
  color: #fff;
  font-family: var(--font);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  border: none;
  border-radius: 4px;
  box-shadow: none;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), color 0.25s;
}
.premium .btn-quote:hover,
.premium .btn-hero-primary:hover,
.premium .product-cta:hover,
.premium .dev-cta:hover,
.premium .showcase-modal-cta:hover {
  background: var(--k-action-deep);
  transform: translateY(-1px);
  color: #fff;
  box-shadow: none;
}
.premium .product-cta span { border: none; color: inherit; }
.premium .product-cta:hover span { color: inherit; border: none; }
.premium .product-cta {
  padding: 0 1.5rem;
  height: 48px;
  min-height: 48px;
  border-radius: 4px;
  align-items: center;
  display: inline-flex;
}

.premium .btn-hero-secondary,
.premium .product-cta--secondary {
  background: transparent;
  border: 1px solid var(--k-line-strong);
  border-radius: 4px;
  color: var(--k-ink);
  backdrop-filter: none;
  transition: border-color 0.25s, color 0.25s, transform 0.25s var(--ease), background 0.25s;
  height: 48px;
  min-height: 48px;
  padding: 0 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 12px;
  white-space: nowrap;
}
.premium .btn-hero-secondary:hover,
.premium .product-cta--secondary:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--k-metal);
  color: var(--k-metal-soft);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Hero — one composition, brand first, full-bleed product
   -------------------------------------------------------------------------- */
.premium .hero {
  background-color: var(--k-bg);
  isolation: isolate;
}
.premium .hero-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.premium .hero-stage-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.45;
  will-change: transform;
}
.premium .hero-stage-orb--a {
  width: min(55vw, 520px);
  height: min(55vw, 520px);
  top: 8%;
  right: -8%;
  background: rgba(201, 168, 108, 0.18);
}
.premium .hero-stage-orb--b {
  width: min(40vw, 380px);
  height: min(40vw, 380px);
  bottom: 12%;
  left: -6%;
  background: rgba(232, 93, 42, 0.1);
}
.premium .hero {
  background-image: url('/assets/products/lx-silver-promo.png');
  background-size: cover;
  background-position: center;
}
.premium .hero-video {
  z-index: 1;
  transform: scale(1.04);
  will-change: transform;
  object-position: center;
  filter: none;
}
@media (max-width: 1023px) {
  .premium .hero-video {
    transform: none;
    will-change: auto;
  }
}
.premium .hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(10, 11, 14, 0.85) 0%,
    rgba(10, 11, 14, 0.35) 16%,
    transparent 34%
  );
}
.premium .hero-gradient-bottom,
.premium .hero-gradient-top { display: none; }
.premium .hero-content {
  position: relative;
  z-index: 3;
}
.premium .hero-inner {
  padding-bottom: clamp(3.5rem, 8vh, 5.5rem);
}
.premium .hero-bottom {
  margin-top: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 1.25rem 1.75rem;
}
.premium .hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
}
.premium .hero-models {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}
.premium .hero-model-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 1.25rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: var(--k-ink);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease);
}
.premium .hero-model-link:hover {
  border-color: var(--k-action);
  color: var(--k-action);
  background: rgba(232, 93, 42, 0.08);
}
.premium .hero-awards {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.premium .hero-awards img {
  height: 68px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45));
}
.premium .hero-awards img[alt*="Hi Seoul"] { height: 72px; }
.premium .hero-awards img[alt*="CES"] { height: 84px; }
@media (min-width: 1024px) {
  .premium .hero-awards img { height: 78px; }
  .premium .hero-awards img[alt*="Hi Seoul"] { height: 82px; }
  .premium .hero-awards img[alt*="CES"] { height: 96px; }
}
@media (prefers-reduced-motion: no-preference) {
  .premium .hero-awards {
    animation: k-rise 1.05s var(--ease) both;
    animation-delay: 0.28s;
  }
}
@media (max-width: 1023px) {
  .premium .hero-scrim {
    background: linear-gradient(
      to top,
      rgba(10, 11, 14, 0.85) 0%,
      rgba(10, 11, 14, 0.35) 20%,
      transparent 40%
    );
  }
}

.hero-display { display: none; }
.premium .hero-display {
  display: block;
  max-width: 18ch;
}
.premium .hero-brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(14px, 1.6vw, 18px);
  letter-spacing: 0.42em;
  color: var(--k-metal);
  margin-bottom: 1.25rem;
}
.premium .hero-display-title {
  font-size: clamp(48px, 8.2vw, 112px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.92;
  color: var(--k-ink);
}
.premium .hero-display-title em {
  font-style: italic;
  font-weight: 600;
  color: var(--k-metal-soft);
}
.premium .hero-display-sub {
  margin-top: 1.35rem;
  max-width: 28rem;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  color: var(--k-mute);
}
.premium .hero-bottom {
  margin-top: 2.25rem;
  border-top: none;
  padding-top: 0;
}
.premium .hero-ctas { gap: 0.85rem; }
.premium .btn-hero-primary,
.premium .btn-hero-secondary {
  height: 52px;
  padding: 0 1.65rem;
  border-radius: 4px;
  font-size: 13px;
  letter-spacing: 0.05em;
}

@media (prefers-reduced-motion: no-preference) {
  .premium .hero-brand,
  .premium .hero-display-title,
  .premium .hero-display-sub,
  .premium .hero-ctas,
  .premium .hero-models {
    animation: k-rise 1.05s var(--ease) both;
  }
  .premium .hero-display-title { animation-delay: 0.1s; }
  .premium .hero-display-sub { animation-delay: 0.2s; }
  .premium .hero-ctas { animation-delay: 0.32s; }
  .premium .hero-models { animation-delay: 0.38s; }
}
@keyframes k-rise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}

/* Trust strip — inside hero, just below awards (first viewport) */
.premium .hero-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.1rem;
  padding-bottom: clamp(1.25rem, 3vh, 2rem);
}
.premium .trust-bar--hero,
.premium .hero .trust-bar {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 4;
  width: 100%;
  margin: 0;
  padding: 0.85rem 0 0;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: none;
  color: rgba(245, 244, 242, 0.78);
}
.premium .trust-bar--hero .trust-bar-inner,
.premium .hero .trust-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem 1.35rem;
  max-width: none;
  margin: 0;
  padding: 0;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.premium .trust-bar--hero .trust-bar-inner span:not(:last-child)::after,
.premium .hero .trust-bar-inner span:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 11px;
  margin-left: 1.35rem;
  background: var(--k-metal);
  opacity: 0.55;
  vertical-align: middle;
}
@media (max-width: 640px) {
  .premium .trust-bar--hero .trust-bar-inner,
  .premium .hero .trust-bar-inner {
    gap: 0.45rem 0.9rem;
    font-size: 9px;
    letter-spacing: 0.1em;
  }
  .premium .trust-bar--hero .trust-bar-inner span:not(:last-child)::after,
  .premium .hero .trust-bar-inner span:not(:last-child)::after {
    margin-left: 0.9rem;
    height: 9px;
  }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.premium .highlights,
.premium .developers-section {
  background: var(--k-bg-2);
}
.premium .showcase { background: var(--k-bg); }
.premium .product-section--pop {
  background:
    radial-gradient(ellipse 70% 55% at 12% 30%, rgba(201, 168, 108, 0.06), transparent 65%),
    var(--k-bg-2);
}
.premium .product-section--pop-alt {
  background:
    radial-gradient(ellipse 70% 55% at 88% 70%, rgba(201, 168, 108, 0.05), transparent 65%),
    var(--k-bg);
}
.premium .product-pop-bg { background: none; }
.premium .blinklock-section {
  background:
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(90, 120, 100, 0.08), transparent 55%),
    var(--k-bg-3);
}
.premium .smart-open-section { background: var(--k-bg-2); }
.premium .fire-section {
  background:
    radial-gradient(ellipse 70% 50% at 80% 100%, rgba(232, 93, 42, 0.12), transparent 55%),
    #08090c;
}
.premium .seo-section { background: var(--k-bg); }
.premium .seo-section--alt { background: var(--k-bg-2); }
.premium .contact-section { background: var(--k-bg-2); }

.premium .section-title,
.premium .highlights-title,
.premium .blinklock-title,
.premium .product-tagline {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.2vw, 58px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--k-ink);
}
.premium .section-title em,
.premium .highlights-title em,
.premium .blinklock-title em {
  font-style: normal;
  color: var(--k-action);
}
.premium .eyebrow,
.premium .eyebrow-red,
.premium .eyebrow-pop,
.premium .eyebrow-fire {
  display: inline-block;
  margin-bottom: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: 2px;
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: 0.22em;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
  color: #0a0b0e;
  background: var(--k-action);
  border: 1px solid rgba(232, 93, 42, 0.55);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Panels — flat luxury, not glass cards
   -------------------------------------------------------------------------- */
.premium .highlights-popup,
.premium .developers-popup {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
}
.premium .highlights-pop-bg,
.premium .developers-pop-bg { display: none; }
.premium .highlights-popup::after,
.premium .developers-popup::after { display: none; }

.premium .highlight-grid {
  border: 1px solid var(--k-line);
  border-radius: 2px;
  overflow: hidden;
  background: transparent;
  gap: 0;
}
.premium .highlight-card,
.premium .dev-card,
.premium .use-case-card,
.premium .coverage-card {
  background: transparent;
  border: none;
  border-right: 1px solid var(--k-line);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  transition: background 0.35s var(--ease);
}
.premium .highlight-card:last-child,
.premium .dev-card:last-child { border-right: none; }
.premium .highlight-card:hover,
.premium .dev-card:hover,
.premium .use-case-card:hover,
.premium .coverage-card:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: transparent;
  box-shadow: none;
  transform: none;
}
.premium .highlight-icon,
.premium .dev-card-icon,
.premium .fire-point-icon,
.premium .contact-card-icon {
  background: transparent;
  border: 1px solid var(--k-metal-deep);
  color: var(--k-metal);
  border-radius: 50%;
  box-shadow: none;
}
.premium .contact-channels,
.premium .pricing-note,
.premium .smart-open-media-item {
  background: var(--k-bg-3);
  border: 1px solid var(--k-line);
  border-radius: 2px;
  box-shadow: none;
  backdrop-filter: none;
}

/* --------------------------------------------------------------------------
   Showcase — product as sculpture
   -------------------------------------------------------------------------- */
.premium .showcase-grid {
  border: none;
  background: transparent;
  box-shadow: none;
  gap: 1.25rem;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 900px) {
  .premium .showcase-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) and (max-width: 899px) {
  .premium .showcase-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .premium .showcase-grid { grid-template-columns: 1fr; }
}
.premium .showcase-card,
.premium .showcase-card--pop,
.premium .showcase-card--pop:hover {
  background: var(--k-bg-3);
  border: 1px solid var(--k-line);
  border-radius: 2px;
  overflow: hidden;
  height: 100%;
  transform: none;
  align-self: stretch;
}
.premium .showcase-card--pop:hover {
  border-color: rgba(201, 168, 108, 0.35);
  background: #161820;
  transform: none;
}
.premium .showcase-pop-bg { display: none; }
.premium .showcase-name { color: var(--k-ink); font-weight: 600; }
.premium .showcase-price { color: var(--k-action); }
.premium .product-price { color: var(--k-action); }
.premium .product-price span { color: var(--neutral-500); }
.premium .showcase-link {
  border-color: var(--k-metal);
  color: var(--k-metal);
  border-radius: 0;
}
.premium .showcase-link:hover { color: var(--k-metal-soft); border-color: var(--k-metal-soft); }

/* Product frames — lit pedestals with 3D depth */
.premium .showcase-frame,
.premium .product-frame,
.premium .product-ces-visual,
.premium .showcase-modal-frame {
  border: none;
  border-radius: 2px;
  position: relative;
  transform-style: preserve-3d;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 28px 50px rgba(0, 0, 0, 0.45);
}
.premium .showcase-frame::before,
.premium .product-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 42%, transparent 58%, rgba(0, 0, 0, 0.08));
  pointer-events: none;
  z-index: 2;
}
.premium .showcase-frame.gold,
.premium .product-frame.gold,
.premium .product-ces-visual {
  background:
    radial-gradient(120% 100% at 50% 0%, #f7efe0 0%, #e5d2b0 50%, #c9a86c 100%);
}
.premium .showcase-frame.silver,
.premium .product-frame.silver,
.premium .showcase-modal-frame {
  background:
    radial-gradient(120% 100% at 50% 0%, #f7f8fa 0%, #dfe3ea 52%, #b8bfc9 100%);
}
.premium .product-frame--pop::after,
.premium .showcase-frame--pop::after { display: none; }

.premium .showcase-frame img,
.premium .product-frame img {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 22px 28px rgba(0, 0, 0, 0.28));
  transform: none;
}

.premium .showcase-frame-label,
.premium .product-frame-label {
  z-index: 5;
  transform: none;
}

.premium .product-copy-card,
.premium .product-ces {
  background: transparent;
  border: 1px solid var(--k-line);
  border-radius: 2px;
  box-shadow: none;
  backdrop-filter: none;
  overflow: visible;
}

.premium .product-section .product-tagline {
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1.12;
  overflow: visible;
  color: var(--k-ink);
}

.premium .product-section .product-tagline-accent {
  color: var(--k-action);
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
}

.premium .product-section .product-sub {
  color: var(--neutral-700);
}

.premium .product-section .product-desc {
  color: var(--neutral-600);
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.premium .product-frame img {
  object-fit: contain;
  padding: 1rem;
  background: radial-gradient(ellipse 80% 70% at 50% 45%, rgba(255, 255, 255, 0.06), transparent 70%);
}

.premium .thumb { background: #e8dcc8; border-radius: 2px; }
.premium .thumb.silver-bg { background: #e4e7ec; }
.premium .thumb.active { box-shadow: 0 0 0 2px var(--k-metal); }

.premium .tabs,
.premium .product-section--pop .tabs {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--k-line);
  border-radius: 2px;
}
.premium .tab { color: var(--neutral-600); border-radius: 2px; }
.premium .tab:hover { color: var(--k-metal-soft); }
.premium .tab.active {
  background: var(--k-metal);
  color: #0a0b0e;
  box-shadow: none;
}
.premium .product-section--pop .feature-list li {
  background: rgba(255, 255, 255, 0.025);
  box-shadow: none;
  border-left: 2px solid var(--k-metal-deep);
}
.premium .spec-row { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.premium .product-section--pop .spec-row span:last-child { color: var(--k-metal-soft); }

.premium .ces-stats--pop {
  background: rgba(201, 168, 108, 0.06);
  border: 1px solid rgba(201, 168, 108, 0.2);
}
.premium .ces-badge {
  background: transparent;
  border: 1px solid var(--k-line-strong);
  color: var(--neutral-700);
  border-radius: 2px;
}
.premium .ces-visual-badge { background: rgba(10, 11, 14, 0.8); color: #f2ede4; }

.premium .blinklock-badge {
  background: transparent;
  border: 1px solid var(--k-line-strong);
  color: var(--k-metal);
  border-radius: 2px;
  backdrop-filter: none;
}
.premium .blinklock-point {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--k-line);
  color: var(--neutral-800);
  border-radius: 2px;
  backdrop-filter: none;
}
.premium .blinklock-stat {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--k-line);
  border-radius: 2px;
}
.premium .blinklock-stat .num {
  color: var(--k-action);
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
}
.premium .blinklock-stat .lbl {
  color: var(--neutral-600);
}
.premium .media-wrap {
  border-radius: 2px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
  border: 1px solid var(--k-line);
}
.premium .play-btn {
  background: var(--k-action);
  border-radius: 50%;
  box-shadow: none;
}

.premium .fire-image-wrap img {
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.45));
}

.premium .pricing-table {
  background: var(--k-bg-3);
  border: 1px solid var(--k-line);
  border-radius: 2px;
  box-shadow: none;
}
.premium .pricing-table th { background: rgba(255, 255, 255, 0.03); color: var(--neutral-600); }
.premium .pricing-table td { border-color: rgba(255, 255, 255, 0.06); }
.premium .pricing-table a { color: var(--k-metal); }
.premium .faq-item {
  background: transparent;
  border: 1px solid var(--k-line);
  border-radius: 2px;
  backdrop-filter: none;
}
.premium .faq-item[open] { border-color: rgba(201, 168, 108, 0.4); }
.premium .faq-item a { color: var(--k-metal); }
.premium .compare-table th { background: rgba(255, 255, 255, 0.03); }
.premium .compare-table th,
.premium .compare-table td { border-color: rgba(255, 255, 255, 0.08); }

.premium .contact-channel {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--k-line);
  border-radius: 2px;
}
.premium .contact-channel:hover {
  background: rgba(201, 168, 108, 0.06);
  border-color: rgba(201, 168, 108, 0.35);
}
.premium .contact-channel-value { color: var(--neutral-950); }
.premium .contact-form {
  background: var(--k-bg-3);
  border: 1px solid var(--k-line);
  border-radius: 2px;
  box-shadow: none;
}
.premium .contact-form input,
.premium .contact-form select,
.premium .contact-form textarea {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--k-line-strong);
  color: var(--neutral-950);
  border-radius: 2px;
}

.premium .showcase-modal-backdrop { background: rgba(4, 5, 8, 0.78); }
.premium .showcase-modal-panel--pop {
  background: var(--k-bg-2);
  border: 1px solid var(--k-line-strong);
  border-radius: 4px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55);
}
.premium .showcase-modal-pop-bg { display: none; }
.premium .showcase-modal-close {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--k-line-strong);
  color: var(--neutral-800);
  border-radius: 2px;
}
.premium .showcase-modal-close:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.premium .showcase-modal-thumb { background: #e4e7ec; border-radius: 2px; }

/* --------------------------------------------------------------------------
   Detail / landing pages
   -------------------------------------------------------------------------- */
.premium .product-reviews {
  background: var(--k-bg-2);
  border-top: 1px solid var(--k-line);
  border-bottom: 1px solid var(--k-line);
}
.premium .product-review-card {
  background: var(--k-bg-3);
  border-color: var(--k-line);
}
.premium .product-reviews-score,
.premium .product-reviews-stars,
.premium .product-review-stars {
  color: var(--k-action);
}
.premium .product-review-meta strong { color: var(--k-ink); }
.premium .product-review-card p { color: var(--neutral-600); }

.premium .detail-hero,
.premium .detail-hero--alt {
  background:
    radial-gradient(ellipse 70% 50% at 15% 0%, rgba(201, 168, 108, 0.07), transparent 55%),
    var(--k-bg-2);
}
.premium .detail-hero .detail-actions a {
  width: 100%;
}
.premium .landing-hero {
  background:
    radial-gradient(ellipse 70% 50% at 80% 0%, rgba(201, 168, 108, 0.06), transparent 55%),
    linear-gradient(180deg, var(--k-bg-2) 0%, var(--k-bg) 100%);
}
.premium .landing-body a { color: var(--k-metal); }
.premium .detail-spec-bar {
  background: var(--k-bg-3);
  border: 1px solid var(--k-line);
  border-radius: 2px;
  backdrop-filter: none;
  box-shadow: none;
}
.premium .detail-cta-band {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(232, 93, 42, 0.1), transparent 60%),
    var(--k-bg-3);
}
.premium .detail-breadcrumb a:hover { color: var(--k-metal); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.premium .footer {
  background: #07080a;
  border-top: 1px solid var(--k-line);
  position: relative;
}
.premium .footer::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--k-metal-deep), transparent);
}
.premium .footer-col a:hover { color: var(--k-metal-soft); }

/* --------------------------------------------------------------------------
   3D interaction layers
   -------------------------------------------------------------------------- */
.premium [data-k-tilt] {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.12s linear;
}
.premium .k-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.3s;
  background: radial-gradient(
    380px circle at var(--kx, 50%) var(--ky, 50%),
    rgba(255, 245, 220, 0.22),
    transparent 55%
  );
}
.premium [data-k-tilt]:hover .k-glare { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  html.js .premium .reveal {
    opacity: 1;
    transform: none;
  }
  html.js .premium .reveal.visible {
    opacity: 1;
    transform: none;
  }
}

/* Idle product float — disabled so image boxes stay aligned */
@media (prefers-reduced-motion: no-preference) {
  .premium .showcase-visual img,
  .premium .product-frame img {
    animation: none;
  }
  .premium .product-grid.reverse .product-frame img { animation-delay: 0s; }
}
@keyframes k-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Pedestal floor shadow under product frames — keep boxes axis-aligned */
.premium .showcase-visual,
.premium .product-visual {
  perspective: none;
}
.premium .showcase-frame,
.premium .product-frame--pop {
  transform: none;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.premium .showcase-card:hover .showcase-frame,
.premium .product-visual:hover .product-frame--pop {
  transform: translateY(-3px);
}
.premium .product-grid.reverse .product-frame--pop {
  transform: none;
}
.premium .product-grid.reverse .product-visual:hover .product-frame--pop {
  transform: translateY(-3px);
}