/* CYBERBEANS Apple-style visual system overlay. */
:root {
  --cb-black: #000;
  --cb-ink: #f5f5f7;
  --cb-muted: rgba(245, 245, 247, 0.68);
  --cb-soft: #f5f5f7;
  --cb-soft-2: #fbfbfd;
  --cb-line: rgba(255, 255, 255, 0.12);
  --cb-card: rgba(255, 255, 255, 0.055);
  --cb-accent: #0a84ff;
  --cb-accent-dark: #006edb;
  --cb-radius: 28px;
  --cb-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --cb-shadow: 0 28px 80px rgba(0, 0, 0, 0.24);
  color-scheme: dark;
}

html {
  scroll-padding-top: 64px;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  background: var(--cb-black) !important;
  color: var(--cb-ink) !important;
  letter-spacing: 0 !important;
}

::selection {
  background: rgba(10, 132, 255, 0.28) !important;
  color: #fff !important;
}

::-webkit-scrollbar {
  width: 8px !important;
}

::-webkit-scrollbar-track {
  background: #000 !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28) !important;
  border-radius: 999px !important;
}

#particleCanvas,
#galaxyCanvas {
  display: none !important;
}

.container {
  max-width: 1180px !important;
  padding-left: clamp(20px, 4vw, 44px) !important;
  padding-right: clamp(20px, 4vw, 44px) !important;
}

section {
  padding: clamp(84px, 12vw, 168px) 0 !important;
}

.nav-global {
  height: 52px !important;
  background: rgba(0, 0, 0, 0.72) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: saturate(180%) blur(22px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(22px) !important;
}

.nav-global .nav-container {
  max-width: 1120px !important;
}

.nav-logo-svg-img,
.footer-logo-img,
.inline-logo {
  filter: brightness(0) invert(1) !important;
}

.nav-item > a,
.nav-item > button,
.nav-actions a {
  color: rgba(245, 245, 247, 0.72) !important;
  transition: color 0.3s ease-out, opacity 0.3s ease-out !important;
}

.nav-item > a:hover,
.nav-item > button:hover,
.nav-actions a:hover,
.nav-item > button[aria-expanded="true"],
.nav-item > a[aria-expanded="true"] {
  color: #fff !important;
}

.nav-chevron {
  opacity: 0.35 !important;
}

.mega-dropdown {
  width: min(680px, calc(100vw - 32px)) !important;
  padding: 34px 40px 38px !important;
  background: rgba(22, 22, 24, 0.92) !important;
  border-radius: 0 0 24px 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42) !important;
}

.mega-col h4,
.mobile-section h4,
.footer-col h4,
.section-label,
.nav-dropdown-section-label {
  letter-spacing: 0.08em !important;
}

.mega-col ul li a {
  color: rgba(245, 245, 247, 0.86) !important;
  border-radius: 9px !important;
}

.mega-col ul li a:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

.mega-col ul li a.highlight,
.nav-links a.active,
.cat-nav-link.active {
  color: var(--cb-accent) !important;
  border-bottom-color: var(--cb-accent) !important;
}

.nav-backdrop {
  inset: 52px 0 0 !important;
  background: rgba(0, 0, 0, 0.24) !important;
}

.mobile-drawer {
  inset: 52px 0 0 !important;
  background: rgba(0, 0, 0, 0.96) !important;
  padding: 26px 28px 72px !important;
}

.mobile-section a {
  font-size: 21px !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.btn,
.btn-large,
.contact-email,
.quick-link,
.cat-nav-link {
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, background 0.3s ease-out, color 0.3s ease-out, border-color 0.3s ease-out !important;
}

.btn {
  border-radius: 999px !important;
  min-height: 44px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.btn-large {
  min-height: 50px !important;
  padding: 14px 28px !important;
}

.btn-primary {
  background: #fff !important;
  color: #000 !important;
  box-shadow: none !important;
}

.btn-primary:hover {
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 14px 32px rgba(255, 255, 255, 0.14) !important;
  transform: translateY(-2px) !important;
}

.btn-ghost {
  background: transparent !important;
  color: var(--cb-accent) !important;
  border: 1px solid rgba(10, 132, 255, 0.34) !important;
}

.btn-ghost:hover {
  background: rgba(10, 132, 255, 0.1) !important;
  border-color: rgba(10, 132, 255, 0.52) !important;
  box-shadow: none !important;
}

.section-label {
  color: rgba(245, 245, 247, 0.62) !important;
  border: 0 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  padding: 7px 13px !important;
  border-radius: 999px !important;
}

.section-title,
.page-hero h1,
.support-hero h1,
.news-hero h1,
.overview-hero h1,
.category-hero h1,
.hero h1,
.cta-content h2 {
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.04 !important;
  color: #fff !important;
}

.section-title {
  font-size: clamp(38px, 5.4vw, 72px) !important;
  max-width: 920px !important;
}

.section-subtitle,
.hero-desc,
.page-hero .hero-desc,
.support-hero .hero-desc,
.overview-desc,
.category-hero .cat-desc,
.category-hero .cat-subtitle,
.news-hero .hero-sub {
  color: var(--cb-muted) !important;
  font-size: clamp(17px, 2vw, 23px) !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}

.hero {
  min-height: 100svh !important;
  padding: 132px 0 72px !important;
  isolation: isolate;
}

.hero::before {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), #000 86%),
    radial-gradient(circle at 50% 62%, rgba(255, 255, 255, 0.16), transparent 42%),
    url("../../images/products/tpe-side-wall.webp") center calc(100% - 8px) / min(980px, 94vw) auto no-repeat !important;
  opacity: 0.6 !important;
  z-index: 0 !important;
}

.hero::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.64), transparent 44%, #000 96%) !important;
  z-index: 1 !important;
}

.hero-content {
  max-width: 1080px !important;
  padding-bottom: min(24vh, 210px) !important;
}

.hero-badge {
  border: 0 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(245, 245, 247, 0.78) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

.hero-badge .dot {
  background: var(--cb-accent) !important;
  box-shadow: 0 0 18px rgba(10, 132, 255, 0.7) !important;
}

.hero h1 {
  font-size: clamp(50px, 7vw, 88px) !important;
  margin-bottom: 24px !important;
}

.hero-desc {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero-cta {
  gap: 14px !important;
}

.scroll-indicator {
  color: rgba(245, 245, 247, 0.42) !important;
  animation: none !important;
}

.scroll-indicator .arrow-down {
  color: rgba(245, 245, 247, 0.72) !important;
}

.tpe-zoom-section,
.quality-section,
.cta-section,
.why-section,
.about-section,
.compat-section,
.quick-links,
.guides-section,
.care-section,
.news-grid-section,
.products-section {
  background: #000 !important;
}

.overview-hero + .products-section {
  padding-top: 0 !important;
}

.cat-nav-strip + .products-section {
  padding-top: clamp(44px, 7vw, 72px) !important;
}

.tpe-zoom-section {
  min-height: 92svh !important;
}

.zoom-pretitle,
.zoom-subtitle {
  color: rgba(245, 245, 247, 0.64) !important;
}

.tpe-zoom-text {
  color: #fff !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
}

.carousel-section,
.peek-section,
.video-section,
.featured-section,
.values-section,
.story-section,
.apart-section,
.contact-section,
.featured-story,
.category-hero,
.overview-hero,
.page-hero,
.support-hero,
.news-hero {
  background: #000 !important;
}

.hero-banner,
.carousel,
.peek-carousel,
.video-wrapper {
  border-radius: clamp(20px, 3vw, 36px) !important;
  box-shadow: var(--cb-shadow) !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.carousel-slide img,
.peek-slide img,
.video-wrapper video {
  transform: translateZ(0);
}

.carousel-arrow,
.peek-arrow,
.video-play-btn {
  background: rgba(245, 245, 247, 0.14) !important;
  color: #fff !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

.carousel-arrow:hover,
.peek-arrow:hover,
.video-play-btn:hover {
  background: rgba(245, 245, 247, 0.28) !important;
  color: #fff !important;
}

.carousel-dot .dot-progress,
.peek-dot.active,
.carousel-dot.active .dot-progress {
  background: #fff !important;
  box-shadow: none !important;
}

.featured-banner {
  max-width: 1180px !important;
  margin: 0 auto !important;
  min-height: 620px !important;
  border-radius: var(--cb-radius) !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.2)),
    url("../../images/products/injection-molding.webp") center / cover no-repeat !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: var(--cb-shadow) !important;
}

.featured-banner::before,
.quality-card::before,
.product-card::before,
.category-card::before,
.about-stat::before {
  display: none !important;
}

.featured-left {
  padding: clamp(48px, 7vw, 88px) !important;
}

.featured-left h2 {
  font-size: clamp(42px, 6vw, 78px) !important;
  letter-spacing: 0 !important;
}

.featured-left p {
  color: rgba(245, 245, 247, 0.74) !important;
  font-size: clamp(17px, 1.6vw, 21px) !important;
}

.featured-right {
  background: transparent !important;
}

.model-badge,
.quality-card,
.value-card,
.why-card,
.about-stat,
.contact-card,
.support-card,
.guide-card,
.care-card,
.news-card,
.featured-card,
.compat-card,
.compat-row,
.category-card,
.product-card,
.apart-item,
.quick-link {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 22px !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

.model-badge:hover,
.quality-card:hover,
.value-card:hover,
.why-card:hover,
.about-stat:hover,
.contact-card:hover,
.support-card:hover,
.guide-card:hover,
.care-card:hover,
.news-card:hover,
.featured-card:hover,
.compat-card:hover,
.compat-row:hover,
.category-card:hover,
.product-card:hover,
.apart-item:hover,
.quick-link:hover {
  transform: translateY(-6px) !important;
  background: rgba(255, 255, 255, 0.095) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.3) !important;
}

.model-badge-icon,
.quality-icon,
.value-icon,
.why-icon,
.contact-icon,
.apart-check,
.cat-card-icon {
  color: #fff !important;
  filter: saturate(0) brightness(1.4) !important;
}

.model-badge-icon {
  background: rgba(255, 255, 255, 0.12) !important;
}

.quality-card h3,
.value-card h3,
.why-card h3,
.product-card h3,
.category-card h2,
.contact-card h3,
.apart-text h4,
.model-badge-name {
  color: #fff !important;
  letter-spacing: 0 !important;
}

.quality-card p,
.value-card p,
.why-card p,
.product-card .product-desc,
.category-card .cat-card-subtitle,
.category-card .cat-card-count,
.contact-detail,
.apart-text p,
.model-badge-detail,
.footer-brand p,
.footer-col a {
  color: rgba(245, 245, 247, 0.62) !important;
}

.page-hero,
.support-hero,
.news-hero,
.overview-hero,
.category-hero {
  min-height: clamp(440px, 62svh, 680px) !important;
  display: flex !important;
  align-items: center !important;
  padding-top: 110px !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
}

.page-hero::before,
.support-hero::before,
.news-hero::before,
.overview-hero::before,
.category-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(0, 0, 0, 0), #000 88%) !important;
  z-index: -1 !important;
  opacity: 1 !important;
}

.page-hero::after,
.support-hero::after,
.news-hero::after {
  display: none !important;
}

.page-hero-content,
.support-hero-content,
.news-hero .container,
.overview-hero-content,
.category-hero-content {
  max-width: 900px !important;
  text-align: center !important;
  margin: 0 auto !important;
}

.page-hero h1,
.support-hero h1,
.news-hero h1,
.overview-hero h1,
.category-hero h1 {
  font-size: clamp(48px, 8vw, 96px) !important;
  justify-content: center !important;
}

.accent-bar {
  display: none !important;
}

.category-grid {
  gap: 18px !important;
}

.category-card {
  min-height: 210px !important;
  padding: 30px !important;
}

.category-card .cat-card-icon {
  font-size: 32px !important;
}

.category-card h2 {
  font-size: clamp(22px, 2.4vw, 32px) !important;
}

.category-hero .cat-icon {
  display: none !important;
}

.cat-nav-strip {
  top: 52px !important;
  background: rgba(0, 0, 0, 0.72) !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.cat-nav-link {
  color: rgba(245, 245, 247, 0.56) !important;
}

.cat-nav-link:hover {
  color: #fff !important;
}

.products-grid {
  gap: 18px !important;
}

.product-card {
  padding: 28px !important;
}

.product-card .card-placeholder {
  background: linear-gradient(135deg, #111, #222) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  border-radius: 18px !important;
  background-size: cover !important;
  background-position: center !important;
}

.product-card .card-placeholder.cb-has-product-art {
  min-height: 150px !important;
}

.product-card .card-placeholder.cb-has-product-art .ph-accent,
.product-card .card-placeholder.cb-has-product-art .ph-text {
  opacity: 0 !important;
}

.product-card .card-placeholder .ph-accent,
.product-card .card-placeholder .ph-text,
.about-stat-value,
.contact-email,
.nav-dropdown-footer a,
.footer-col a:hover {
  color: var(--cb-accent) !important;
}

.footer {
  background: #050505 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.footer-grid {
  gap: clamp(32px, 6vw, 72px) !important;
}

.footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(245, 245, 247, 0.42) !important;
}

.product-tag {
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(245, 245, 247, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 999px !important;
}

.product-sku {
  color: rgba(245, 245, 247, 0.44) !important;
}

.category-grid .category-card:nth-child(1) {
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.38)),
    url("../../images/products/floor-mats-wash.webp") center / cover no-repeat !important;
}

.category-grid .category-card:nth-child(2) {
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.34)),
    url("../../images/products/trunk-mat.webp") center / cover no-repeat !important;
}

.category-grid .category-card:nth-child(4) {
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.34)),
    url("../../images/products/injection-molding.webp") center / cover no-repeat !important;
}

.category-grid .category-card:nth-child(5) {
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.32)),
    url("../../images/products/pedal-covers.webp") center / cover no-repeat !important;
}

.category-grid .category-card:nth-child(6),
.category-grid .category-card:nth-child(7),
.category-grid .category-card:nth-child(8),
.category-grid .category-card:nth-child(9),
.category-grid .category-card:nth-child(10),
.category-grid .category-card:nth-child(11),
.category-grid .category-card:nth-child(12) {
  background:
    radial-gradient(circle at 82% 24%, rgba(255, 255, 255, 0.18), transparent 28%),
    linear-gradient(135deg, rgba(22, 22, 24, 0.96), rgba(5, 5, 5, 0.96)) !important;
}

.cb-reveal {
  opacity: 0;
  transform: translateY(32px) scale(0.985);
  transition: opacity 0.8s var(--cb-ease), transform 0.8s var(--cb-ease);
  transition-delay: var(--cb-delay, 0ms);
}

.cb-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.cb-hero-ready .hero-content,
.cb-hero-ready .page-hero-content,
.cb-hero-ready .support-hero-content,
.cb-hero-ready .overview-hero-content,
.cb-hero-ready .category-hero-content,
.cb-hero-ready .news-hero .container {
  animation: cb-hero-in 0.95s var(--cb-ease) both;
}

@keyframes cb-hero-in {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 1024px) {
  .featured-banner {
    grid-template-columns: 1fr !important;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.38)),
      url("../../images/products/injection-molding.webp") center / cover no-repeat !important;
  }

  .featured-right {
    padding: 0 clamp(24px, 7vw, 64px) clamp(44px, 7vw, 76px) !important;
  }

  .products-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  section {
    padding: 72px 0 !important;
  }

  .hero {
    min-height: 92svh !important;
    padding-top: 104px !important;
  }

  .hero::before {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.2), #000 88%),
      radial-gradient(circle at 50% 60%, rgba(255, 255, 255, 0.16), transparent 42%),
      url("../../images/products/tpe-side-wall.webp") center calc(100% - 16px) / 122vw auto no-repeat !important;
  }

  .hero-content {
    padding-bottom: 30vh !important;
  }

  .hero-cta {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .page-hero,
  .support-hero,
  .news-hero,
  .overview-hero,
  .category-hero {
    min-height: 440px !important;
    padding-top: 92px !important;
  }

  .mega-dropdown {
    display: none !important;
  }

  .category-grid,
  .quality-grid,
  .why-grid,
  .values-grid,
  .about-stats {
    grid-template-columns: 1fr !important;
  }

  .category-card,
  .product-card {
    text-align: left !important;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .btn,
  .btn-large {
    width: 100% !important;
    justify-content: center !important;
  }

  .hero h1 {
    font-size: clamp(42px, 13vw, 58px) !important;
  }

  .hero-cta {
    flex-direction: column !important;
  }

  .category-card,
  .product-card,
  .quality-card,
  .why-card,
  .value-card,
  .contact-card {
    border-radius: 18px !important;
    padding: 24px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .cb-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}