/* =========================================================
   NexxTech Website - Global Styles
   Pure CSS, no frameworks
   Color scheme (2026-10-06):
     #FF6501 - Logo text & Hover effect
     #FFFFFF - Primary text
     #222222 - Background
     #737373 - Navigation
   ========================================================= */

/* ---------- CSS Variables ---------- */
:root {
  --color-accent: #FF6501;          /* Logo text & Hover */
  --color-accent-hover: #e55a00;    /* Slightly darker accent for hover */
  --color-text: #FFFFFF;            /* Primary text */
  --color-text-muted: #b0b0b0;      /* Secondary / muted text */
  --color-nav: #737373;             /* Navigation links */
  --color-bg: #222222;              /* Main background */
  --color-bg-alt: #2c2c2c;          /* Alternate section background */
  --color-bg-card: #2a2a2a;         /* Card background */
  --color-border: #3a3a3a;          /* Borders */
  --color-header-bg: rgba(28, 28, 28, 0.5); /* Frosted header #1C1C1C80 */
  --color-footer-bg: #1a1a1a;       /* Footer background */
  --color-dropdown-bg: #2a2a2a;     /* Dropdown panel */
  --font-base: "Segoe UI", "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif;
  --max-width: 1200px;
  --header-height: 72px;
  --transition: 0.25s ease;
  --reveal-duration: 1s; /* scroll reveal-up */
  --shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
  --radius: 0;
}

/* ---------- Lock Right Click -----------*/
video{
  pointer-events: none;
}
img{
  pointer-events: none;
}


/* ---------- Reset & Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  /*
   * overflow-x: clip avoids horizontal scroll without creating a scroll
   * container (unlike hidden) — required so position:sticky on solutions works.
   */
  overflow-x: clip;
}

body {
  font-family: var(--font-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}

/* Prevent horizontal bounce from decorative/absolute elements on narrow viewports */
body.nav-open {
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-accent-hover);
}

ul {
  list-style: none;
}

/* ---------- Layout ---------- */
/* Desktop: 80px side inset, content fills remaining width (slide-media stays full-bleed) */
.container {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0 80px;
  box-sizing: border-box;
}

.cotent-container{
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0 220px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .container {
    padding: 0 20px;
  }
  .content-container{
    padding: 0 20px;
  }
}

main {
  flex: 1;
  padding-top: var(--header-height);
}

/* ---------- Header & Navigation ---------- */
.site-header {
  background: var(--color-header-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-height);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background var(--transition);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

.logo {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.6px;
  text-transform: lowercase;
  line-height: 1;
}

.logo img{
  max-height: 28px;
  width: auto;
  max-width: min(160px, 48vw);
}

.logo .logo-xx {
  color: var(--color-accent);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  color: var(--color-text);
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: 0;
  transition: color var(--transition), background var(--transition);
}

.nav-link:hover {
  color: var(--color-accent);
  background: transparent;
}

.nav-link.active {
  color: var(--color-accent);
  font-weight: 600;
}

/* Dropdown (Products) */
.nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* padding comes from .nav-link / .nav-link-dropdown (8px 16px) */
  padding: 0;
}

.nav-link-dropdown {
  cursor: pointer;
  /* Support <button> trigger (Products text only, no page link) */
  appearance: none;
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Match .nav-link padding */
  padding: 8px 16px;
}

.dropdown-chevron {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform var(--transition);
  margin-top: 2px;
}

.nav-item:hover > .nav-link-dropdown,
.nav-item.open > .nav-link-dropdown {
  color: var(--color-accent);
}

.nav-item:hover .dropdown-chevron,
.nav-item.open .dropdown-chevron {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 160px;
  background: var(--color-dropdown-bg);
  border-radius: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 1100;
  list-style: none;
}

.nav-item:hover .dropdown-menu,
.nav-item.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dropdown-link {
  display: block;
  padding: 10px 20px;
  color: var(--color-text);
  font-size: 0.925rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--transition), background var(--transition);
}

.dropdown-link:hover {
  color: var(--color-accent);
  background: rgba(255, 101, 1, 0.08);
}

/* Language Switcher */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  /* border-left removed */
  padding-left: 0;
}

.lang-btn {
  background: none;
  border: 1px solid transparent;
  padding: 4px 10px;
  font-size: 0.875rem;
  cursor: pointer;
  border-radius: 0;
  color: var(--color-nav);
  font-family: inherit;
  transition: all var(--transition);
  min-width: 3em;
  text-align: center;
}

.lang-btn:hover {
  color: var(--color-accent);
  border-color: var(--color-border);
}

.lang-btn.active,
.lang-btn-toggle {
  background: var(--color-accent);
  color: var(--color-text);
  border-color: var(--color-accent);
}

.lang-btn-toggle:hover {
  background: var(--color-accent-hover);
  color: var(--color-text);
  border-color: var(--color-accent-hover);
}

/* Mobile Toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  transition: var(--transition);
}

.nav-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Hero Auto Slider ---------- */
.hero-slider {
  position: relative;
  width: 100%;
  height: min(76vh, 650px);
  min-height: 440px;
  overflow: hidden;
  background: #1a1a1a;
  /* Pull up under the fixed header for full-bleed overlay effect */
  margin-top: calc(-1 * var(--header-height));
}

.slider-track {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Directional edge slide-in / slide-out (driven by .is-from-* / .is-to-* + .active) */
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(0);
  transition:
    opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.5s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 1.5s ease;
  z-index: 1;
  /* Prevent sub-element style bleed during transition */
  will-change: transform, opacity;
}

.slide.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  z-index: 2;
}

/* Incoming from right edge (next) */
.slide.is-from-right {
  transform: translateX(100%);
  opacity: 0;
  visibility: visible;
  z-index: 3;
}

/* Incoming from left edge (prev) */
.slide.is-from-left {
  transform: translateX(-100%);
  opacity: 0;
  visibility: visible;
  z-index: 3;
}

/* Outgoing toward left (next) */
.slide.is-to-left {
  transform: translateX(-100%);
  opacity: 0;
  visibility: hidden;
  z-index: 1;
}

/* Outgoing toward right (prev) */
.slide.is-to-right {
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  z-index: 1;
}

/* Right-side media area – 45% of slide width, independent per slide (image / video) */
.slide-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 45%;
  z-index: 1;
  background-color: #2a2a2a;
  overflow: hidden;
}

.slide-media img,
.slide-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Dark panel with large right-pointing arrow (#222222); arrow shifted ~10% right */
.slide-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 63%;
  z-index: 3;
  pointer-events: none;
  background-color: #222222;
  /* Large arrow pointing right */
  clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%);
}

.slide-content {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5% 2% 2.5% 5%;
  pointer-events: auto;
  z-index: 4;
  padding-left: 80px;
}

.slide-title {
  font-size: clamp(1.6rem, 3.2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin-bottom: 36px;
}

.slide-brand {
  color: var(--color-accent);
}

/* Stats grid under title */
.slide-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0;
  overflow: hidden;
  max-width: 560px;
}

.slide-stat {
  padding: 18px 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
}

.slide-stat:last-child {
  border-right: none;
}

.slide-stat-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 6px;
  line-height: 1.2;
}

.slide-stat-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.35;
}

/* Pagination indicators – bottom-left of content area */
.slider-indicators {
  position: absolute;
  left: 5%;
  bottom: 28px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
}

.slider-indicator {
  position: relative;
  display: block;
  width: 28px;
  height: 3px;
  border: none;
  padding: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  overflow: hidden;
  transition: background 0.25s ease, width 0.25s ease;
}

.slider-indicator.active {
  background: rgba(255, 255, 255, 0.35);
  width: 40px;
}

.slider-indicator:hover:not(.active) {
  background: rgba(255, 255, 255, 0.55);
}

/* Auto-slide countdown fill (#FF6501) */
.slider-indicator-progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: #FF6501;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

.slider-indicator.active .slider-indicator-progress {
  /* duration driven by JS via transition */
}

/* Prev / Next controls – bottom right; solid #FF6501, scale on hover */
.slider-controls {
  position: absolute;
  right: 80px;
  bottom: 28px;
  z-index: 10;
  display: flex;
  gap: 8px;
}

.slider-btn {
  width: 44px;
  height: 44px;
  border: none;
  background: #FF6501;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  font-family: inherit;
}

.slider-btn img{
  height: 24px;
  width: 24px;
}

/* 
.slider-btn:hover {
  transform: scale(1.12);
  background: #FF6501;
  color: #ffffff;
}
 */
.slider-btn:focus-visible {
  outline: 2px solid #FF6501;
  outline-offset: 2px;
}

/* ---------- Solutions Section ---------- */
.solutions-section {
  background-color: #1C1C1C;
  padding: 0;
  position: relative;
  isolation: isolate;
  /* Height driven by JS: panel content height (+ card overflow only when needed) */
  min-height: 0;
  height: var(--solutions-scroll-height, auto);
}

/* Fixed / sticky background graphic while pinned in this container */
.solutions-sticky .container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #1C1C1C;
  background-image: url(/asset/image/icon/background_icon.png);
  background-repeat: no-repeat;
  background-size: 256px 256px;
  background-position: center;
  filter: blur(4px);
}

/*
 * Sticky panel: height follows content, hard-capped at 833px.
 * Do not stretch to fill 833px — that was the empty void below cards.
 */
.solutions-sticky {
  position: sticky;
  /* Sit below the fixed site header so content is not covered */
  top: var(--header-height);
  height: auto;
  max-height: 833px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  z-index: 1;
  overflow: hidden;
  padding: 40px 0 32px;
  box-sizing: border-box;
}

.solutions-sticky > .container {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.solutions-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.solutions-label {
  display: block;
  color: var(--color-accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.solutions-heading {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
  letter-spacing: -0.02em;
  max-width: 480px;
}

.solutions-desc {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 6px;
}

/*
 * Cards viewport: height is set by JS to 2 rows (+ border pad).
 * overflow-y: auto for programmatic scrollTop; scrollbar hidden.
 * Wheel is intercepted in JS → page scroll (no native wrap scroll / bounce).
 */
.solutions-cards-wrap {
  position: relative;
  flex: 0 0 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: none; /* prevent scroll chaining / bounce against page */
  padding: 0;
  box-sizing: border-box;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 20px;
  padding-top: 20px;
}

.solutions-cards-wrap::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.solutions-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  border: none;
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
  /* Small padding so last-row card borders stay inside the scrollport */
  padding-bottom: 2px;
}

.sol-card {
  display: flex;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(28, 28, 28, 0.55);
  position: relative;
  z-index: 1;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  min-height: 0;
}

.sol-card:hover {
  background-color: #FF650133;
  border-color: rgba(255, 101, 1, 0.35);
}

.sol-card:hover .sol-card-title {
  color: #FF6501;
}

.sol-card-media {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  background-color: #2a2a2a;
  background-size: cover;
  background-position: center;
  border-radius: 0;
}

.sol-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sol-card-title {
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
  transition: color 0.3s ease;
}

.sol-card-text {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 20px;
  flex: 1;
}

.sol-card-link {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 600;
  gap: 8px; /* 文字與箭頭間距 */
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: width 0.2s ease,color 0.2s ease, border-color 0.2s ease;
  width:117px;
}
.sol-card-link::after {
  content: "";
  display: inline-block;
  width: 15.15px;
  height: 12.12px;
  background-image: url('/asset/image/icon/arrow.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.2s ease; /* 點綴：滑鼠移上去時箭頭可以微動 */
  transform: translateX(16.42px);
}

.sol-card-link:hover {
  color: #FFFFFF;
  /* border-bottom-color: var(--color-accent); */
  width:137px;
}
.sol-card-link:hover::after {
  transform: translateX(36.42px);
}

.sol-card-body img{
  height: 12.12px;
  width: 15.15px;
}

/*
 * Only 4 cards visible at once (2×2).
 * Extra cards (5+) are shown via page control / cycle in JS.
 */
.sol-card.is-hidden {
  display: none;
}

.solutions-cards-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
}

.solutions-cards-pager-btn {
  appearance: none;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.solutions-cards-pager-btn:hover:not(:disabled) {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.08);
}

.solutions-cards-pager-btn.is-active {
  background-color: #FF6501;
  color: #ffffff;
}

.solutions-cards-pager-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

@media (max-width: 900px) {
  .solutions-header {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .solutions-heading {
    max-width: none;
  }

  .sol-card-title {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  .solutions-section::before {
    background-attachment: scroll;
  }

  .solutions-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .sol-card {
    min-height: 0;
  }

  .sol-card-title {
    font-size: 22px;
  }

  .solutions-heading {
    font-size: 26px;
  }
}

/* ---------- Products Section ---------- */
.products-section {
  background-color: #1C1C1C;
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

/* Concentric dashed rings — independent rotation (odd CW, even CCW) */
.products-glow {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Soft static centre wash (no mouse follow) */
  background: radial-gradient(
    circle 570px at 50% 50%,
    #FF650133 0%,
    #1C1C1C 70%
  );
  filter: blur(0.65px);
}

.products-glow-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  box-sizing: border-box;
  border: 1px dashed #AA4300CC;
  border-radius: 50%;
  pointer-events: none;
}

/* Equal radial spacing between rings (radius step ≈ 90px → diameter +180px) */
.products-glow-ring--1 {
  --ring-size: 280px;
  width: var(--ring-size);
  height: var(--ring-size);
  margin: calc(var(--ring-size) / -2) 0 0 calc(var(--ring-size) / -2);
  animation: products-glow-spin-cw 36s linear infinite;
}

.products-glow-ring--2 {
  --ring-size: 460px;
  width: var(--ring-size);
  height: var(--ring-size);
  margin: calc(var(--ring-size) / -2) 0 0 calc(var(--ring-size) / -2);
  animation: products-glow-spin-ccw 52s linear infinite;
}

.products-glow-ring--3 {
  --ring-size: 640px;
  width: var(--ring-size);
  height: var(--ring-size);
  margin: calc(var(--ring-size) / -2) 0 0 calc(var(--ring-size) / -2);
  animation: products-glow-spin-cw 68s linear infinite;
}

@keyframes products-glow-spin-cw {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes products-glow-spin-ccw {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@media (max-width: 768px) {
  .products-glow-ring--1 { --ring-size: 180px; }
  .products-glow-ring--2 { --ring-size: 300px; }
  .products-glow-ring--3 { --ring-size: 420px; }
}

@media (prefers-reduced-motion: reduce) {
  .products-glow-ring {
    animation: none;
  }
}

.products-section .container {
  position: relative;
  z-index: 1;
}

.products-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 48px;
}

.products-label {
  display: block;
  color: var(--color-accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.products-heading {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
  letter-spacing: -0.02em;
  max-width: 480px;
}

.products-desc {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 8px;
}

.products-cards-wrap {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.products-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.prod-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 32px 36px;
  border-radius: 0;
  background: linear-gradient(90deg, #3A435366 0%, #6E7F9C4D 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  min-height: 540px;
  height: 60vh;
}

.prod-card:hover {
  /* hover shadow removed */
}

/* Logo / title media placeholder */
.prod-card-logo {
  width: 100%;
  max-width: 280px;
  height: 72px;
  margin-bottom: 36px;
  background-color: transparent;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  /* 預留放置品牌 logo 圖片 */
}

.prod-card-features {
  display: flex;
  gap: 12px;
  width: 100%;
  justify-content: center;
  margin-bottom: 36px;
  flex: 1;
  align-items: center;
}

.prod-feature {
  flex: 1;
  width: 5%;
  max-width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 12px;
  background: rgba(0, 0, 0, 0.28);
  border-radius: 0;
  height: 180px;
}

.prod-feature-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 24px;
  background-color: transparent;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0;
  /* 預留放置 icon 圖片 */
}

.prod-feature-label {
  font-size: 14px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

.prod-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--color-accent);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 0;
  overflow: hidden;
  transition: background 0.2s ease, transform 0.2s ease;
  padding: 8px 8px 8px 24px;
  min-height: 56px;
  height: 56px;
}

.prod-card-btn span:first-child {
  padding: 12px 18px;
}

.prod-card-btn-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 8px;
  min-height: 42px;
  background: #ffffff;
  color: var(--color-accent);
  font-size: 1.1rem;
  font-weight: 700;
}

.prod-card-btn-arrow img{
  height: 12.12px;
  width: 15.15px;
}

.prod-card-btn:hover {
  background: var(--color-accent-hover);
  color: #ffffff;
  transform: scale(1.03);
}

@media (max-width: 900px) {
  .products-header {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .products-heading {
    max-width: none;
  }
}

@media (max-width: 768px) {
  .products-section {
    padding: 56px 0 100px;
  }

  .products-cards {
    grid-template-columns: 1fr;
    gap: 90px;
  }

  .products-cards-wrap {
    max-height: none;
  }

  .products-heading {
    font-size: 26px;
  }

  .prod-card-features {
    flex-wrap: wrap;
  }

  .prod-feature {
    max-width: none;
    min-width: 100px;
  }
}

/* ---------- About Us Section ---------- */
.about-section {
  background-color: #1C1C1C;
  padding: 120px 0;
}

.about-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 48px;
}

.about-label {
  display: block;
  color: var(--color-accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.about-heading {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
  letter-spacing: -0.02em;
  max-width: 420px;
}

.about-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.about-desc {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 24px;
}

.about-learn-more {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 600;
  gap: 8px; /* 文字與箭頭間距 */
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: width 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  width: 117px;
}

.about-learn-more::after {
  content: "";
  display: inline-block;
  width: 15.15px;
  height: 12.12px;
  background-image: url('/asset/image/icon/arrow.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.2s ease; /* 點綴：滑鼠移上去時箭頭可以微動 */
  transform: translateX(16.42px);
}

.about-learn-more:hover {
  width: 137px;
  color: #FFFFFF;
  border-bottom-color: #FFFFFF;
}
.about-learn-more:hover::after {
  transform: translateX(36.42px);
}


.about-cards-wrap {
  max-height: 420px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 101, 1, 0.5) rgba(255, 255, 255, 0.08);
}

.about-cards-wrap::-webkit-scrollbar {
  width: 6px;
}

.about-cards-wrap::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 0;
}

.about-cards-wrap::-webkit-scrollbar-thumb {
  background: rgba(255, 101, 1, 0.45);
  border-radius: 0;
}

.about-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: 0;
  overflow: hidden;
  background: linear-gradient(90deg, #3A435399 0%, #343942 100%);
  min-height: 272px;
}

.about-card {
  padding: 36px 28px;
  border-right: 1px solid #464646CC;
  display: flex;
  flex-direction: column;
  min-height: 220px;
}

.about-card:last-child {
  border-right: none;
}

.about-card-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 28px;
  background-color: transparent;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0;
  /* 預留 48×48 icon media */
}

.about-card-title {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}

.about-card-text {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 900px) {
  .about-header {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .about-heading {
    max-width: none;
  }

  .about-card-title {
    font-size: 22px;
  }
}

@media (max-width: 768px) {
  .about-section {
    padding: 56px 0 48px;
  }

  .about-cards {
    grid-template-columns: 1fr;
  }

  .about-card {
    border-right: none;
    border-bottom: 1px solid #464646CC;
  }

  .about-card:last-child {
    border-bottom: none;
  }

  .about-cards-wrap {
    max-height: none;
  }

  .about-heading {
    font-size: 26px;
  }

  .about-card-title {
    font-size: 20px;
  }
}

/* ---------- Partners Section ---------- */
.partners-section {
  background-color: #FFFFFF;
  padding: 120px 0;
  color: #1a1a1a;
}

.partners-header {
  margin-bottom: 40px;
  max-width: 640px;
}

.partners-label {
  display: block;
  color: var(--color-accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.partners-heading {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  color: #1a1a1a;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.partners-desc {
  font-size: 16px;
  line-height: 1.65;
  color: #666666;
}

.partners-cards-wrap {
  overflow: hidden;
  width: 1282px;
  margin: 0 auto;
}

.partners-cards {
  display: grid;
  grid-template-columns: repeat(5, 256px);
  width: 1282px;
  border-top: 1px solid #D8D8D8;
  border-left: 1px solid #D8D8D8;
}

.partner-card {
  position: relative;
  width: 256px;
  height: 256px;
  box-sizing: border-box;
  border-right: 1px solid #D8D8D8;
  border-bottom: 1px solid #D8D8D8;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  transition: background-color 0.3s ease;
  overflow: hidden;
  cursor: default;
}

.partner-card:hover:not(.partner-card--nav) {
  background-color: #FFB88A;
}

.partner-card-logo {
  width: 100%;
  max-width: 160px;
  height: 48px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 0.8s ease;
  justify-items: center;
  /* 預留品牌 logo media */
}
.partner-card-logo img{
  object-fit: contain;
  max-height: 100%;
}

.partner-card-desc {
  position: absolute;
  inset: 0;
  padding: 20px 18px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #1a1a1a;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
  display: flex;
  align-items: center;
  overflow: auto;
}

.partner-card:hover:not(.partner-card--nav) .partner-card-logo {
  opacity: 0;
}

.partner-card:hover:not(.partner-card--nav) .partner-card-desc {
  opacity: 1;
  visibility: visible;
}

/* 第 12 格：空白 + 向右循環 media icon */
.partner-card--nav {
  background: #FFFFFF;
  cursor: pointer;
  pointer-events: none;
  border: none;
  border-right: 1px solid #D8D8D8;
  border-bottom: 1px solid #D8D8D8;
  font-family: inherit;
  
  justify-content: flex-end;
  align-items: flex-end;
  padding: 24px;
}

.partner-card--nav:hover {
  /* background-color: #f5f5f5; */
  cursor: pointer;
  /* pointer-events: none; */
}

.partner-nav-icon {
  display: block;
  width: 48px;
  height: 48px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  /* 預留向右箭頭 media icon */
}

@media (max-width: 1320px) {
  .partners-cards-wrap,
  .partners-cards {
    width: 100%;
  }

  .partners-cards {
    grid-template-columns: repeat(5, 1fr);
  }

  .partner-card {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 900px) {
  .partners-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .partners-heading {
    font-size: 28px;
  }
}

@media (max-width: 768px) {
  .partners-section {
    padding: 56px 0 48px;
  }

  .partners-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .partners-heading {
    font-size: 26px;
  }
}

/* ---------- Home Contact Us Section ---------- */
.home-contact-section {
  background-color: #262C36;
  padding: 120px 0;
  position: relative;
}

/* Standalone contact page: clear fixed header */
.home-contact-section--page {
  padding-top: calc(var(--header-height) + 80px);
  min-height: calc(100vh - var(--header-height));
}

/* Reference layout:
   Row1: intro (left)
   Row2: cards (left) | form (right) — same row → tops & bottoms align */
.home-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 56px;
  row-gap: 28px;
  align-items: stretch;
}

.home-contact-intro {
  grid-column: 1;
  grid-row: 1;
}

.home-contact-cards {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 16px; /* keep space between cards */
  align-self: stretch;
  height: 100%;
  min-height: 0;
}

.home-contact-right {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  align-self: stretch;
  min-height: 0;
}

.home-contact-title {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px;
}

.home-contact-subtitle {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  line-height: 1.5;
}

/* "Send a Message" top aligns with first card top (same grid row) */
.home-contact-form-title {
  flex-shrink: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 20px;
  line-height: 1.25;
}

.home-contact-form {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
}

.home-contact-field {
  flex-shrink: 0;
  margin-bottom: 16px;
}

.home-contact-field--message {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.home-contact-field--message textarea {
  flex: 1 1 auto;
  min-height: 96px;
  resize: none;
}

/* Submit bottom aligns with last card bottom */
.home-contact-submit {
  flex-shrink: 0;
  margin-top: auto;
  margin-bottom: 0;
}

.home-contact-form-msg {
  flex-shrink: 0;
}

.home-contact-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background-color: #51565E;
  padding: 22px 24px;
  border-radius: 0;
  color: #ffffff;
  text-decoration: none;
  transition: background-color 0.25s ease;
  min-height: 96px;
  /* Fill home-contact-cards height evenly; gap keeps spacing */
  flex: 1 1 0;
}

a.home-contact-card:hover {
  background-color: #5c6169;
  color: #ffffff;
}

.home-contact-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.home-contact-card-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff;
}

.home-contact-card-value {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.45;
}

.home-contact-card-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 25px;
  background-color: #FF6501;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 600;
}

.home-contact-card-btn img{
  width:18px;
  height:18px;
}

/* form-title defined above */

.home-contact-field label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 8px;
}

.home-contact-field input,
.home-contact-field textarea {
  width: 100%;
  padding: 14px 16px;
  background-color: #1a1f27;
  border: none;
  border-radius: 0;
  color: #ffffff;
  font-size: 0.95rem;
  font-family: inherit;
  transition: box-shadow 0.2s ease;
}

.home-contact-field input::placeholder,
.home-contact-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.home-contact-field input:focus,
.home-contact-field textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 101, 1, 0.45);
}

.home-contact-field textarea {
  min-height: 96px;
  resize: none;
}

.home-contact-submit {
  width: 100%;
  padding: 16px 24px;
  background-color: #FF6501;
  color: #ffffff;
  border: none;
  border-radius: 0;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  margin-top: auto;
  margin-bottom: 0;
  
  gap: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.home-contact-submit img{
  width: 18px;
  height: 18px;
  display: inline;
  transition: transform 0.2s ease-in-out;
}

.home-contact-submit:hover {
  background-color: #e55a00;
  transform: scale(1.01);
}

.home-contact-submit:hover img{
  transform: translateX(100px);
}

.home-contact-form-msg {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--color-accent);
}

.home-contact-form-msg.is-success {
  color: #2e7d32;
}

.home-contact-form-msg.is-error {
  color: #c62828;
}

.home-contact-form-msg[hidden] {
  display: none;
}

.home-contact-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}

/* Scroll to top – bottom right of contact section */
.scroll-top-btn {
  position: absolute;
  right: 28px;
  bottom: 28px;
  width: 48px;
  height: 48px;
  background-color: #FF6501;
  color: #ffffff;
  border: none;
  border-radius: 0;
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background-color 0.2s ease;
  z-index: 5;
  font-family: inherit;
}

.scroll-top-btn img{
  width: 12.12px;
  height: 15.15px;
}

.scroll-top-btn:hover {
  background-color: #e55a00;
  transform: scale(1.08);
}

@media (max-width: 900px) {
  .home-contact-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 40px;
  }

  .home-contact-intro {
    grid-column: 1;
    grid-row: 1;
  }

  .home-contact-cards {
    grid-column: 1;
    grid-row: 2;
    height: 400px;
  }

  .home-contact-right {
    grid-column: 1;
    grid-row: 3;
  }
}

@media (max-width: 768px) {
  .home-contact-section {
    padding: 56px 0 80px;
  }

  .home-contact-section--page {
    padding-top: calc(var(--header-height) + 56px);
  }

  .scroll-top-btn {
    right: 16px;
    bottom: 16px;
  }
}

/* ---------- Contact Page (contact.html only) ---------- */
.contact-page-section {
  background-color: #1C1C1C;
  padding: calc(var(--header-height)) 0 100px;
  position: relative;
  min-height: calc(100vh - var(--header-height));
}

.contact-page-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.35fr);
  gap: 64px;
  align-items: start;
}

.contact-page-intro {
  padding-top: 12px;
}

.contact-page-title {
  font-size: 3rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 20px;
  line-height: 1.15;
}

.contact-page-desc {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.55);
  max-width: 340px;
  margin: 0;
}

.contact-page-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-page-form-panel {
  background-color: #2A2F38;
  border-radius: 0;
  padding: 32px 28px 28px;
}

.contact-page-field {
  margin-bottom: 20px;
}

.contact-page-field label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 8px;
}

.contact-page-field input,
.contact-page-field textarea {
  width: 100%;
  padding: 14px 16px;
  background-color: #1a1f27;
  border: none;
  border-radius: 0;
  color: #ffffff;
  font-size: 0.95rem;
  font-family: inherit;
  transition: box-shadow 0.2s ease;
}

.contact-page-field input::placeholder,
.contact-page-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.contact-page-field input:focus,
.contact-page-field textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 101, 1, 0.45);
}

.contact-page-field textarea {
  min-height: 110px;
  resize: vertical;
}

.contact-page-submit {
  width: 100%;
  padding: 16px 24px;
  background-color: #FF6501;
  color: #ffffff;
  border: none;
  border-radius: 0;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.contact-page-submit img{
  height:18px;
  width:18px;
  display: inline;
  transition: transform 0.2s ease-in-out;
}

.contact-page-submit:hover {
  background-color: #e55a00;
  transform: scale(1.01);
}

.contact-page-submit:hover img{
  transform: translateX(100px);
}

.contact-page-form-msg {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--color-accent);
}

.contact-page-form-msg.is-success {
  color: #2e7d32;
}

.contact-page-form-msg.is-error {
  color: #c62828;
}

.contact-page-form-msg[hidden] {
  display: none;
}

.contact-page-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}

.contact-page-info-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.contact-page-info-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  background-color: #2A2F38;
  padding: 24px 22px 20px;
  border-radius: 0;
  color: #ffffff;
  text-decoration: none;
  min-height: 160px;
  transition: background-color 0.25s ease;
}

a.contact-page-info-card:hover {
  background-color: #343a44;
  color: #ffffff;
}

.contact-page-info-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.contact-page-info-label {
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
}

.contact-page-info-value {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
}

.contact-page-info-btn {
  width: 40px;
  height: 40px;
  border-radius: 0;
  background-color: #FF6501;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 600;
  flex-shrink: 0;
}

.contact-page-info-btn img {
  width: 18px;
  height: 18px;
}

@media (max-width: 900px) {
  .contact-page-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .contact-page-desc {
    max-width: none;
  }

  .contact-page-title {
    font-size: 2.5rem;
  }
}

@media (max-width: 768px) {
  .contact-page-section {
    padding: calc(var(--header-height) + 48px) 0 80px;
  }

  .contact-page-title {
    font-size: 2rem;
  }

  .contact-page-form-panel {
    padding: 24px 20px 20px;
  }

  .contact-page-info-cards {
    grid-template-columns: 1fr;
  }

  .contact-page-info-card {
    min-height: 120px;
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
}

.btn {
  display: inline-block;
  padding: 12px 28px;
  background: var(--color-accent);
  color: var(--color-text);
  font-weight: 600;
  border-radius: 0;
  border: none;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  font-size: 1rem;
  font-family: inherit;
}

.btn:hover {
  background: var(--color-accent-hover);
  color: var(--color-text);
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
}

.btn-outline:hover {
  background: var(--color-accent);
  color: var(--color-text);
}

/* ---------- Sections ---------- */
.section {
  padding: 120px 0;
}

.section-alt {
  background: var(--color-bg-alt);
}

.section-title {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 12px;
  color: var(--color-text);
}

.section-subtitle {
  text-align: center;
  color: var(--color-text-muted);
  margin-bottom: 48px;
  font-size: 1.1rem;
}

/* ---------- Cards / Grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}

.card {
  background: var(--color-bg-card);
  border-radius: 0;
  padding: 28px;
  box-shadow: var(--shadow);
  border: 1px solid var(--color-border);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  border-color: var(--color-accent);
}

.card h3 {
  font-size: 1.25rem;
  margin-bottom: 12px;
  color: var(--color-accent);
}

.card p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

/* ---------- Page Header (inner pages) ---------- */
.page-header {
  background: var(--color-bg-alt);
  padding: 48px 0;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.page-header h1 {
  font-size: 2.25rem;
  color: var(--color-text);
  margin-bottom: 8px;
}

.page-header p {
  color: var(--color-text-muted);
  font-size: 1.1rem;
}

/* ---------- About / Content blocks ---------- */
.content-block {
  max-width: 800px;
  margin: 0 auto 40px;
}

.content-block h2 {
  font-size: 1.5rem;
  color: var(--color-accent);
  margin-bottom: 12px;
}

.content-block p {
  color: var(--color-text-muted);
  margin-bottom: 16px;
}

/* ---------- Contact Form ---------- */
.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.contact-form {
  background: var(--color-bg-card);
  padding: 32px;
  border-radius: 0;
  box-shadow: var(--shadow);
  border: 1px solid var(--color-border);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--color-text);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  font-size: 1rem;
  font-family: inherit;
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color var(--transition);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(255, 101, 1, 0.2);
}

.form-group textarea {
  min-height: 140px;
  resize: vertical;
}

.form-message {
  margin-top: 16px;
  padding: 12px;
  background: rgba(255, 101, 1, 0.15);
  color: var(--color-accent);
  border-radius: 0;
  display: none;
  border: 1px solid rgba(255, 101, 1, 0.3);
}

.form-message.show {
  display: block;
}

.contact-info {
  padding: 20px 0;
}

.contact-info h3 {
  font-size: 1.25rem;
  color: var(--color-accent);
  margin-bottom: 20px;
}

.contact-info p {
  margin-bottom: 12px;
  color: var(--color-text-muted);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-text-muted);
  padding: 48px 0 24px;
  margin-top: auto;
  border-top: 1px solid var(--color-border);
}

/* Orange footer (index reference design) */
.site-footer--orange {
  background-color: #FF6501;
  color: #ffffff;
  border-top: none;
  padding: 64px 0 32px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 56px;
}

.footer-logo {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.6px;
  text-transform: lowercase;
  line-height: 1;
  text-decoration: none;
}

.footer-logo .logo-xx {
  color: #ffffff;
}

.footer-logo:hover {
  color: #ffffff;
  opacity: 0.9;
}

.footer-tagline {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.95);
  max-width: 520px;
  margin-left: auto;
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 40px;
}

.footer-col h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 18px;
}

.footer-col ul li {
  margin-bottom: 12px;
}

.footer-col a {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.footer-col a:hover {
  color: #ffffff;
  opacity: 0.8;
}

.site-footer--orange .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  padding-top: 24px;
  text-align: left;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
}

/* Legacy footer (other pages) */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 32px;
}

.footer-brand h3 {
  color: var(--color-accent);
  font-size: 1.35rem;
  margin-bottom: 12px;
}

.footer-brand p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.footer-links h4,
.footer-contact h4 {
  color: var(--color-text);
  font-size: 1rem;
  margin-bottom: 16px;
}

.footer-links ul li {
  margin-bottom: 8px;
}

.footer-links a {
  color: var(--color-nav);
  font-size: 0.9rem;
}

.footer-links a:hover {
  color: var(--color-accent);
}

.footer-contact p {
  font-size: 0.9rem;
  margin-bottom: 8px;
  color: var(--color-text-muted);
}

.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding-top: 20px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-nav);
}

@media (max-width: 900px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footer-tagline {
    margin-left: 0;
  }

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

@media (max-width: 600px) {
  .footer-columns {
    grid-template-columns: 1fr;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .contact-wrapper {
    grid-template-columns: 1fr;
  }

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

/*
 * Navigation collapses earlier than content grids so the header
 * never overflows between ~769px and tablet widths.
 */
@media (max-width: 992px) {
  .nav-toggle {
    display: flex;
  }

  .nav-menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: rgba(28, 28, 28, 0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    flex-direction: column;
    align-items: stretch;
    padding: 12px 16px 20px;
    box-shadow: var(--shadow);
    transform: translateY(-120%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
    gap: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 1100;
    max-height: calc(100vh - var(--header-height));
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav-menu.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav-link,
  .nav-link-dropdown {
    padding: 14px 16px;
    width: 100%;
    justify-content: flex-start;
  }

  /* Mobile dropdown */
  .nav-item {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .dropdown-menu {
    position: static;
    transform: none;
    left: auto;
    opacity: 1;
    visibility: visible;
    display: none;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0 0 0 12px;
    min-width: 0;
  }

  .nav-item.open .dropdown-menu {
    display: block;
    transform: none;
  }

  .nav-item:hover .dropdown-menu {
    /* Hover must not force-open on touch / narrow layouts */
    display: none;
  }

  .nav-item.open:hover .dropdown-menu,
  .nav-item.open .dropdown-menu {
    display: block;
  }

  .dropdown-link {
    padding: 12px 16px;
  }

  .lang-switcher {
    margin-left: 0;
    border-left: none;
    padding-left: 0;
    padding-top: 12px;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .hero-slider {
    height: auto;
    min-height: 0;
  }

  .slider-track {
    height: auto;
    min-height: 0;
  }

  /*
   * Mobile: stack content then media.
   * Active slide is position:relative so it defines track height;
   * inactive slides stay absolute and do not collapse the layout.
   */
  .slide {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    height: auto;
    min-height: 100%;
    overflow: hidden;
    pointer-events: none;
  }

  .slide.active {
    position: relative;
    pointer-events: auto;
    height: auto;
    min-height: 0;
  }

  /* Keep entering/exiting slides overlaid during directional transition */
  .slide.is-from-left,
  .slide.is-from-right,
  .slide.is-to-left,
  .slide.is-to-right {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
  }

  .slide-panel {
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    right: auto;
    width: 100%;
    flex: 0 0 auto;
    min-height: 0;
    clip-path: none;
    order: 1;
    background-color: #222222;
    transform: none;
    pointer-events: auto;
  }

  .slide-content {
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    padding: 88px 20px 28px;
    justify-content: flex-start;
    pointer-events: auto;
  }

  .slide-media {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    flex: 0 0 auto;
    min-height: 200px;
    aspect-ratio: 16 / 10;
    order: 2;
  }

  .slide-title {
    margin-bottom: 24px;
    font-size: clamp(1.35rem, 5.5vw, 1.85rem);
  }

  .slide-stats {
    max-width: 100%;
  }

  .slide-stat {
    padding: 14px 12px;
  }

  .slide-stat-value {
    font-size: 1.15rem;
  }

  .slide-stat-label {
    font-size: 0.72rem;
  }

  .slider-indicators {
    left: 16px;
    bottom: 16px;
    gap: 8px;
  }

  .slider-indicator {
    width: 22px;
  }

  .slider-indicator.active {
    width: 26px;
  }

  .slider-controls {
    right: 16px;
    bottom: 16px;
  }

  .slider-btn {
    width: 40px;
    height: 40px;
  }

  .section {
    padding: 48px 0;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /*
   * Home Solutions: fully disable sticky scroll-jack on small screens.
   * !important beats any desktop inline height/max-height set by JS.
   * All cards stack in normal document flow so the page can scroll.
   */
  .solutions-section {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .solutions-sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 48px 0 56px;
  }

  .solutions-sticky > .container {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .solutions-cards-wrap {
    flex: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    overscroll-behavior: auto;
    padding: 0;
  }

  .solutions-cards {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-bottom: 0;
  }

  .solutions-header {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 24px;
  }

  .solutions-heading {
    font-size: 24px;
    max-width: none;
  }

  .solutions-desc {
    font-size: 14px;
  }

  .home-contact-title {
    font-size: 1.75rem;
  }

  .home-contact-card {
    min-height: 0;
  }

  .home-contact-card-value {
    word-break: break-word;
  }

  .partners-cards {
    gap: 12px;
  }

  .sol-card {
    gap: 16px;
    padding: 20px 16px;
  }

  .sol-card-media {
    width: 88px;
    height: 88px;
  }
}

/*
 * Tablet + mobile (≤992px, same as nav breakpoint):
 * Force solutions into normal document flow. Beats any JS inline heights.
 */
@media (max-width: 992px) {
  .solutions-section {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .solutions-sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 48px 0 56px;
  }

  .solutions-sticky > .container {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .solutions-cards-wrap {
    flex: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    overscroll-behavior: auto;
    padding: 0;
  }

  .solutions-cards {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-bottom: 0;
  }

  .solutions-header {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 24px;
  }

  .solutions-heading {
    font-size: 24px;
    max-width: none;
  }

  .solutions-desc {
    font-size: 14px;
  }

  .sol-card {
    gap: 16px;
    padding: 20px 16px;
    min-height: 0;
  }

  .sol-card-media {
    width: 88px;
    height: 88px;
  }
}

@media (max-width: 400px) {
  .sol-card {
    flex-direction: column;
    gap: 12px;
  }

  .sol-card-media {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 480px) {
  .slide-content {
    padding: 80px 16px 24px;
  }

  .slide-media {
    min-height: 160px;
  }

  .slide-title {
    font-size: 1.3rem;
    margin-bottom: 18px;
  }

  .slide-stats {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .slide-stat {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }

  .slide-stat:last-child {
    border-bottom: none;
  }

  .slider-indicators {
    left: 16px;
    bottom: 14px;
  }

  .slider-controls {
    right: 12px;
    bottom: 16px;
  }

  .section-title {
    font-size: 1.6rem;
  }
}

/* =========================================================
   Solutions Page (page/solutions.html)
   ========================================================= */

.solutions-page-section {
  background-color: #1C1C1C;
  padding: calc(var(--header-height) + 64px) 0 96px;
}

.solutions-page-header {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 56px;
}

.solutions-page-title {
  font-size: 60px;
  font-weight: 700;
  line-height: 1.15;
  color: #ffffff;
  letter-spacing: -0.03em;
  max-width: 640px;
  /* Entrance: slide up from bottom */
  opacity: 0;
  transform: translateY(150px);
  transition: opacity var(--reveal-duration) cubic-bezier(0.22, 1, 0.36, 1),
              transform var(--reveal-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

.solutions-page-title.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.solutions-page-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-top: 8px;
  /* Slight delay after title */
  opacity: 0;
  transform: translateY(150px);
  transition: opacity var(--reveal-duration) cubic-bezier(0.22, 1, 0.36, 1),
              transform var(--reveal-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

.solutions-page-intro.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.solutions-page-desc {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
  max-width: 420px;
}

.solutions-page-cta {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--color-accent);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 0;
  overflow: hidden;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
  height: 56px;
}

.solutions-page-cta span:first-child {
  padding: 12px 18px;
}

.solutions-page-cta-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 8px;
  min-height: 42px;
  background: #ffffff;
  color: var(--color-accent);
  font-size: 1.1rem;
  font-weight: 700;
}

.solutions-page-cta-arrow img {
  height: 12.12px;
  width: 15.15px;
}

.solutions-page-cta:hover {
  background: var(--color-accent-hover);
  color: #ffffff;
  transform: scale(1.03);
}

/* Cards container — 5 equal columns matching design mockup */
.solutions-page-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  /* start: whole card shifts so both top and bottom are offset */
  align-items: start;
}

.sol-page-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #5B5B5B;
  background: transparent;
  overflow: hidden;
  min-width: 0;
  width: 100%;
  /* Entrance: rise from bottom ~150px */
  opacity: 0;
  transform: translateY(150px);
  transition:
    opacity var(--reveal-duration) cubic-bezier(0.22, 1, 0.36, 1),
    transform var(--reveal-duration) cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    background-color 0.3s ease;
}

/* Staggered vertical offset ~80px: entire card (top + bottom) shifts */
.sol-page-card:nth-child(1) { margin-top: 0; }
.sol-page-card:nth-child(2) { margin-top: 80px; }
.sol-page-card:nth-child(3) { margin-top: 0; }
.sol-page-card:nth-child(4) { margin-top: 80px; }
.sol-page-card:nth-child(5) { margin-top: 0; }

.sol-page-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.sol-page-card:hover {
  border-color: #FF6501;
  /* background-color: rgba(255, 101, 1, 0.08); */
}

.sol-page-card:hover .sol-page-card-title {
  color: #FF6501;
}

.sol-page-card-media {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.sol-page-card-media img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s ease;
  transform-origin: center;
  padding:16px;
}

.sol-page-card:hover .sol-page-card-media img {
  transform: scale(1.5);
}

.sol-page-card-media {
  width: 100%;
  aspect-ratio: 3 / 4;
  background-color: #1C1C1C;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  padding: 16px;
}

.sol-page-card-body {
  padding: 16px 16px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.sol-page-card-title {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  letter-spacing: -0.01em;
  transition: color 0.3s ease;
}

.sol-page-card-text {
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

/* Responsive */
@media (max-width: 1100px) {
  .solutions-page-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .solutions-page-title {
    font-size: 48px;
  }
}

@media (max-width: 900px) {
  .solutions-page-header {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 40px;
  }

  .solutions-page-title {
    font-size: 40px;
    max-width: none;
  }

  .solutions-page-desc {
    max-width: none;
  }

  .solutions-page-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .solutions-page-section {
    padding: calc(var(--header-height) + 40px) 0 64px;
  }

  .solutions-page-title {
    font-size: 32px;
  }

  .solutions-page-cards {
    grid-template-columns: 1fr;
  }

  .sol-page-card:nth-child(n) {
    margin-top: 0;
  }

  .sol-page-card-media {
    aspect-ratio: 16 / 10;
  }
}

/* =========================================================
   Case Studies Section (solutions page)
   ========================================================= */

.case-studies-section {
  background-color: #1C1C1C;
  padding: 80px 0 96px;
}

.case-studies-header {
  text-align: center;
  margin-bottom: 56px;
}

.case-studies-label {
  display: block;
  color: #FF6501;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.case-studies-heading {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

/* Card container */
.case-studies-cards {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cs-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 360px;
  background-color: #1C1C1C;
}

.cs-card--clickable {
  cursor: pointer;
}

.cs-card--clickable:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Odd: media left, text right (default DOM order) */
.cs-card--odd .cs-card-media {
  order: 1;
}

.cs-card--odd .cs-card-body {
  order: 2;
}

/* Even: text left, media right */
.cs-card--even .cs-card-media {
  order: 2;
}

.cs-card--even .cs-card-body {
  order: 1;
}

/* Media — empty placeholder; zoom on hover without overflowing card */
.cs-card-media {
  position: relative;
  overflow: hidden;
  background-color: #2a2a2a;
  min-height: 280px;
}

/* Placeholder surface (empty state) — scales inside overflow:hidden */
.cs-card-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #2a2a2a;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  transform: scale(1);
  transform-origin: center center;
  z-index: 0;
}

/* When real <img> is placed inside .cs-card-media */
.cs-card-media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  transform: scale(1);
  transform-origin: center center;
}

.cs-card-media video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  transform: scale(1);
  transform-origin: center center;
}

/* Card hover: media zoom-in */
.cs-card:hover .cs-card-media::before,
.cs-card:hover .cs-card-media img,
.cs-card:hover .cs-card-media video {
  transform: scale(1.08);
}

.cs-card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 40px;
  background-color: #0d0d0d;
}

.cs-card-tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 16px;
  transition:
    color 0.35s ease,
    border-color 0.35s ease,
    background-color 0.35s ease;
}

/* Card hover: tag color animation */
.cs-card:hover .cs-card-tag {
  color: #FF6501;
  border-color: #FF6501;
}

.cs-card-title {
  font-size: 40px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.cs-card-text {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 28px;
  max-width: 480px;
}

.cs-card-link {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 600;
  gap: 8px; /* 文字與箭頭間距 */
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: width 0.2s ease,color 0.2s ease, border-color 0.2s ease;
  width: 117px;
}

.cs-card-link::after {
  content: "";
  display: inline-block;
  width: 15.15px;
  height: 12.12px;
  background-image: url('/asset/image/icon/arrow.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.2s ease; /* 點綴：滑鼠移上去時箭頭可以微動 */
  transform: translateX(16.42px);
}

.cs-card-link:hover {
  color: #FFFFFF;
  border-bottom-color: #FFFFFF;
  width: 137px;
}
.cs-card-link:hover::after {
  transform: translateX(36.42px);
}

/* Responsive */
@media (max-width: 900px) {
  .cs-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .cs-card--odd .cs-card-media,
  .cs-card--even .cs-card-media {
    order: 1;
  }

  .cs-card--odd .cs-card-body,
  .cs-card--even .cs-card-body {
    order: 2;
  }

  .cs-card-media {
    min-height: 220px;
    aspect-ratio: 16 / 10;
  }

  .cs-card-body {
    padding: 32px 24px;
  }

  .cs-card-title {
    font-size: 28px;
  }

  .cs-card-text {
    font-size: 16px;
  }

  .case-studies-heading {
    font-size: 1.5rem;
  }
}

@media (max-width: 560px) {
  .case-studies-section {
    padding: 56px 0 64px;
  }

  .cs-card-title {
    font-size: 24px;
  }

  .cs-card-body {
    padding: 24px 16px;
  }
}

/* =========================================================
   Solutions page — scroll reveal (bottom → up, staggered)
   ========================================================= */

/* Generic reveal-up (case studies cards, contact columns) */
.reveal-up {
  opacity: 0;
  transform: translateY(150px);
  transition:
    opacity var(--reveal-duration) cubic-bezier(0.22, 1, 0.36, 1),
    transform var(--reveal-duration) cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal-up.is-revealed,
.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Case studies header */
.case-studies-header {
  opacity: 0;
  transform: translateY(150px);
  transition:
    opacity var(--reveal-duration) cubic-bezier(0.22, 1, 0.36, 1),
    transform var(--reveal-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

.case-studies-header.is-visible,
.case-studies-header.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* sol-page-card duration aligned with scroll reveal */
.sol-page-card {
  transition:
    opacity var(--reveal-duration) cubic-bezier(0.22, 1, 0.36, 1),
    transform var(--reveal-duration) cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    background-color 0.3s ease;
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal-up,
  .case-studies-header,
  .solutions-page-title,
  .solutions-page-intro,
  .sol-page-card,
  .about-page-hero-content,
  .about-page-hero-media,
  .about-page-stats {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   About page — hero (split + stats)
   ========================================================= */

.about-page-hero {
  background-color: #1C1C1C;
  /* Below fixed header */
  height: calc(100vh - 72px);
  max-height: calc(100vh - 72px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

.about-page-hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  /* Leave room so stats sit lower in the hero */
  padding-bottom: 16px;
}

.about-page-hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Desktop: 80px left inset; content fills remaining half (media stays full-bleed) */
  padding: calc(var(--header-height) + 32px) 48px 32px 80px;
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  min-height: 0;
  /* Entrance: slide up from bottom */
  opacity: 0;
  transform: translateY(150px);
  transition:
    opacity var(--reveal-duration) cubic-bezier(0.22, 1, 0.36, 1),
    transform var(--reveal-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

.about-page-hero-content.is-visible,
.about-page-hero-content.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.about-page-label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 20px;
}

.about-page-title {
  font-size: 60px;
  font-weight: 700;
  line-height: 1.12;
  color: #ffffff;
  letter-spacing: -0.03em;
  margin-bottom: 28px;
}

.about-page-desc {
  font-size: 20px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 36px;
  max-width: none;
}

.about-page-cta {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--color-accent);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 0;
  /* overflow: hidden; */
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
  align-self: flex-start;
  height:56px;
}

.about-page-cta span:first-child {
  padding: 12px 18px;
}

.about-page-cta-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 8px;
  min-height: 42px;
  background: #ffffff;
  color: var(--color-accent);
  font-size: 1.1rem;
  font-weight: 700;
}

.about-page-cta-arrow img {
  height: 12.12px;
  width: 15.15px;
}

.about-page-cta:hover {
  background: var(--color-accent-hover);
  color: #ffffff;
  transform: scale(1.03);
}

.about-page-hero-media {
  background-color: #0d1520;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  /* Entrance: same reveal-up as content (opacity + translateY) */
  opacity: 0;
  transform: translateY(150px);
  transition:
    opacity var(--reveal-duration) cubic-bezier(0.22, 1, 0.36, 1),
    transform var(--reveal-duration) cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
  /* 預留：右側 50% media（圖／影片） */
}

.about-page-hero-media.is-visible,
.about-page-hero-media.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.about-page-hero-media img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

.about-page-hero-media video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

.about-page-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 40px;
  flex-shrink: 0;
  /* Desktop: 80px side inset; sit lower in hero */
  padding: 24px 80px 48px;
  margin-top: auto;
  box-sizing: border-box;
  width: 100%;
  /* Reveal after hero-split finishes (timed in JS) */
  opacity: 0;
  transform: translateY(150px);
  transition:
    opacity var(--reveal-duration) cubic-bezier(0.22, 1, 0.36, 1),
    transform var(--reveal-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

.about-page-stats.is-visible,
.about-page-stats.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Each stat: top hairline only (segmented, matching mockup) */
.about-page-stat {
  padding: 24px 0 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.about-page-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 6px;
}

.about-page-stat-label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.4;
}

@media (max-width: 900px) {
  .about-page-hero {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .about-page-hero-split {
    grid-template-columns: 1fr;
    max-height: none;
    padding-bottom: 32px;
  }

  .about-page-hero-content {
    padding: calc(var(--header-height) + 32px) 32px 40px;
    max-width: none;
  }

  .about-page-title {
    font-size: 42px;
  }

  .about-page-desc {
    font-size: 18px;
  }

  .about-page-hero-media {
    min-height: 280px;
    order: -1;
  }

  .about-page-hero-media video {
    width: 100%;
    height: 100%;
    min-height: 280px;
  }

  .about-page-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 32px;
    padding: 0 32px 32px;
  }
}

@media (max-width: 560px) {
  .about-page-hero-content {
    padding: calc(var(--header-height) + 24px) 20px 32px;
  }

  .about-page-title {
    font-size: 32px;
  }

  .about-page-desc {
    font-size: 16px;
  }

  .about-page-stats {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 20px 28px;
  }

  .about-page-stat {
    padding: 16px 0 4px;
  }
}

/* =========================================================
   About page — intro (Connecting the Future)
   ========================================================= */

.about-intro-section {
  background-color: #262C36;
  padding: 96px 0;
}

.about-intro-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* Auto-like spacing: grows/shrinks with viewport between columns */
  column-gap: clamp(40px, 6vw, 120px);
  row-gap: 40px;
  max-width: none;
  width: 100%;
  margin: 0 auto;
  padding: 0 80px;
  box-sizing: border-box;
  align-items: stretch;
}

/* Left: text 60% + media 40% (vertical) */
.about-intro-left {
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-height: 520px;
  min-width: 0;
  max-width: 100%;
}

.about-intro-text {
  flex: 6 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.about-intro-title {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.15;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.about-intro-desc {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.65);
  max-width: none;
}

.about-intro-media {
  flex: 4 1 0;
  width: 100%;
  max-width: 480px;
  height: 272px;
  background-color: #1a222c;
  border-radius: 0;
  /* 預留：左下 media（約佔左側 40%） */
}

.about-intro-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Right: feature cards */
.about-intro-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-width: 0;
  max-width: 100%;
}

.about-feature-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 44px 0;
  border-bottom: 1px solid #51565E;
}

.about-feature-card:first-child {
  padding-top: 0;
}

.about-feature-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  /* background-color: var(--color-accent); */
  border-radius: 0;
  /* 預留 icon */
}

.about-feature-body {
  flex: 1;
  min-width: 0;
}

.about-feature-title {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  margin-bottom: 10px;
}

.about-feature-text {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 900px) {
  .about-intro-section {
    padding: 64px 0;
    overflow-x: hidden;
  }

  .about-intro-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 24px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .about-intro-left,
  .about-intro-right {
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }

  .about-intro-text {
    flex: none;
    min-width: 0;
    max-width: 100%;
  }

  .about-intro-title {
    font-size: 32px;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .about-intro-desc {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Override desktop fixed 480×272 so media never forces column wider than viewport */
  .about-intro-media {
    flex: none;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .about-intro-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .about-feature-card {
    max-width: 100%;
    min-width: 0;
  }

  .about-feature-body {
    min-width: 0;
    flex: 1 1 0;
  }

  .about-feature-title {
    font-size: 22px;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .about-feature-text {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

@media (max-width: 560px) {
  .about-intro-section {
    padding: 48px 0;
  }

  .about-intro-inner {
    padding: 0 16px;
    gap: 32px;
  }

  .about-intro-title {
    font-size: 26px;
    margin-bottom: 14px;
  }

  .about-intro-desc {
    font-size: 15px;
    line-height: 1.6;
  }

  .about-intro-left {
    gap: 24px;
  }

  .about-feature-card {
    padding: 20px 0;
    gap: 14px;
  }

  .about-feature-title {
    font-size: 18px;
    margin-bottom: 8px;
  }

  .about-feature-text {
    font-size: 13px;
    line-height: 1.55;
  }

  .about-feature-icon {
    width: 40px;
    height: 40px;
  }

  .about-feature-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

/* =========================================================
   About page — events (Stay Connected carousel)
   ========================================================= */

.about-events-section {
  background-color: #1C1C1C;
  padding: 96px 0 112px;
}

.about-events-inner {
  max-width: none;
  width: 100%;
  margin: 0 auto;
  padding: 0 80px;
  box-sizing: border-box;
}

.about-events-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}

.about-events-heading {
  font-size: 40px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.about-events-nav {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.about-events-btn {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: #ffffff;
  border: none;
  border-radius: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.about-events-btn img{
  height: 24px;
  width: 24px;
}

.about-events-btn:hover {
  background: var(--color-accent-hover);
  transform: scale(1.05);
}

.about-events-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.about-events-viewport {
  overflow: hidden;
  border-radius: 0;
}

.about-events-track {
  display: flex;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.about-event-card {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 40% 60%;
  min-height: 360px;
  background: #2a2f36;
}

.about-event-media {
  background-color: #1a222c;
  min-height: 280px;
  /* 預留：event media（左側 40%） */
}

.about-event-media img{
  height: 100%;
  width: 100%;
}

.about-event-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 40px;
  background: #3a3f46;
}

.about-event-title {
  font-size: 40px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.about-event-text {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 24px;
}

.about-event-meta {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.about-event-meta-dot {
  opacity: 0.7;
}

.about-event-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.85);
  padding-bottom: 4px;
  align-self: flex-start;
  transition:width 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  width: 111px;
}

.about-event-link:hover {
  color: #FFFFFF;
  border-bottom-color: #FFFFFF;
  width: 131px;
}

.about-event-link img{
  transition: transform 0.2s ease;
}

.about-event-link:hover img{
  color: #FFFFFF;
  border-bottom-color: #FFFFFF;
  transform: translateX(20px);

}

@media (max-width: 900px) {
  .about-events-section {
    padding: 64px 0 80px;
  }

  .about-events-inner {
    padding: 0 32px;
  }

  .about-events-heading {
    font-size: 28px;
  }

  .about-event-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .about-event-media {
    min-height: 220px;
  }

  .about-event-body {
    padding: 32px 24px;
  }

  .about-event-title {
    font-size: 28px;
  }

  .about-event-text {
    font-size: 16px;
  }
}

@media (max-width: 560px) {
  .about-events-inner {
    padding: 0 20px;
  }

  .about-events-header {
    flex-wrap: wrap;
  }

  .about-events-heading {
    font-size: 24px;
  }

  .about-events-btn {
    width: 42px;
    height: 42px;
  }

  .about-event-title {
    font-size: 22px;
  }

  .about-event-text {
    font-size: 15px;
  }
}

/* =========================================================
   Case Study Detail Page (case-study-*.html)
   ========================================================= */

.cs-detail-section {
  background-color: #1C1C1C;
  padding: calc(var(--header-height) + 56px) 0 72px;
}

.cs-detail-title {
  font-size: 40px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  letter-spacing: -0.02em;
  max-width: 920px;
  margin: 0 0 40px;
  text-align: left;
}

/* Hero: media left + meta table right */
.cs-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 32px; /* media ↔ meta spacing fixed at 32px across desktop widths */
  align-items: stretch;
  margin-bottom: 56px;
}

.cs-detail-hero-media {
  position: relative;
  min-height: 320px;
  width: 100%;
  max-width: 100%;
  /* background-color: #2a2a2a; */
  overflow: hidden;
}

.cs-detail-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cs-detail-meta {
  border: 1px solid rgba(255, 255, 255, 0.28);
  display: flex;
  flex-direction: column;
  background-color: transparent;
}

.cs-detail-meta-row {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  min-height: 72px;
}

.cs-detail-meta-row:last-child {
  border-bottom: none;
}

.cs-detail-meta-label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.cs-detail-meta-value {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.35;
}

/* Text blocks — full width, aligned with .cs-detail-mid-media */
.cs-detail-block {
  position: relative;
  width: 100%;
  max-width: none;
  margin-bottom: 48px;
  z-index: 1;
}

.cs-detail-block--chevron {
  position: relative;
}

.cs-detail-block--chevron::after {
  content: "";
  position: absolute;
  transform: translate(calc(50% + 256px * 0.75), calc(-50% * 0.75));
  width: 512px;
  height: 515px;
  background: url("/asset/image/icon/background_icon.png");
  background-size: 75%; 
  background-repeat: no-repeat;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
  filter: blur(3px)
}

.cs-detail-subtitle {
  position: relative;
  z-index: 1;
  font-size: 24px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.35;
  margin-bottom: 16px;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255, 255, 255, 0.85);
}

.cs-detail-content {
  position: relative;
  z-index: 1;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  width: 100%;
  max-width: none;
}

/* Mid media */
.cs-detail-mid-media {
  /* width: 100%; */
  min-height: 360px;
  margin: 16px 0 56px;
  overflow: hidden;
  justify-items: center;
}

.cs-detail-mid-media img {
  /* width: 100%; */
  height: 100%;
  max-height: 562px;
  object-fit: cover;
  display: block;
}

/* Benefits — full width, aligned with .cs-detail-mid-media */
.cs-detail-benefits {
  width: 100%;
  max-width: none;
}

.cs-detail-benefits-intro {
  font-size: 24px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 20px;
  text-decoration: underline;
}

.cs-detail-benefits-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cs-detail-benefits-list li {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
}

.cs-detail-benefits-list strong {
  color: #ffffff;
  font-weight: 700;
}

/* ---------- More Case Studies carousel ---------- */
.cs-more-section {
  background-color: #1C1C1C;
  padding: 48px 0 80px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cs-more-heading {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  margin-bottom: 40px;
  letter-spacing: -0.02em;
}

.cs-more-viewport {
  overflow: hidden;
  width: 100%;
}

.cs-more-track {
  display: flex;
  gap: 20px;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.cs-more-card {
  flex: 0 0 calc((100% - 40px) / 3);
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background-color: #141414;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s ease, background-color 0.25s ease;
  overflow: hidden;
}

.cs-more-card:hover {
  border-color: #FF6501;
  color: inherit;
}

.cs-more-card-tag {
  display: inline-flex;
  align-self: flex-start;
  margin: 16px 16px 0;
  padding: 3px 10px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.3;
}

.cs-more-card:hover .cs-more-card-tag {
  border-color: #FF6501;
  color: #FF6501;
}

.cs-more-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  margin: 12px 16px 16px;
  min-height: 2.6em;
}

.cs-more-card-media {
  margin-top: auto;
  width: 100%;
  aspect-ratio: 16 / 10;
  background-color: #2a2a2a;
  overflow: hidden;
}

.cs-more-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.cs-more-card:hover .cs-more-card-media img {
  transform: scale(1.05);
}

/* Case study detail responsive */
@media (max-width: 900px) {
  .cs-detail-title {
    font-size: 32px;
    margin-bottom: 32px;
  }

  .cs-detail-hero {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .cs-detail-hero-media {
    min-height: 240px;
    aspect-ratio: 16 / 10;
  }

  .cs-detail-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .cs-detail-meta-row:nth-child(1),
  .cs-detail-meta-row:nth-child(2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  }

  .cs-detail-meta-row:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.28);
  }

  .cs-detail-block--chevron::after {
    opacity: 0.2;
    right: -4%;
    width: min(50vw, 280px);
    height: min(50vw, 280px);
  }

  .cs-detail-mid-media {
    min-height: 240px;
    aspect-ratio: 16 / 9;
  }

  .cs-more-card {
    flex: 0 0 calc((100% - 20px) / 2);
  }
}

@media (max-width: 600px) {
  .cs-detail-section {
    padding: calc(var(--header-height) + 40px) 0 48px;
  }

  .cs-detail-title {
    font-size: 26px;
    text-align: left;
  }

  .cs-detail-subtitle {
    font-size: 20px;
  }

  .cs-detail-meta {
    grid-template-columns: 1fr;
  }

  .cs-detail-meta-row {
    border-right: none !important;
  }

  .cs-detail-meta-row:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  }

  .cs-detail-block--chevron::after {
    display: none;
  }

  .cs-more-heading {
    font-size: 22px;
    margin-bottom: 28px;
  }

  .cs-more-card {
    flex: 0 0 100%;
  }

  .cs-more-track {
    gap: 16px;
  }
}

/* =========================================================
   Event Detail Page (event-details-*.html)
   Style aligned with case-study detail
   ========================================================= */

.event-detail-section {
  background-color: #1C1C1C;
  padding: calc(var(--header-height) + 56px) 0 72px;
}

.event-detail-title {
  font-size: 40px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  letter-spacing: -0.02em;
  max-width: 920px;
  margin: 0 0 16px;
  text-align: left;
}

.event-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 36px;
}

.event-detail-meta-dot {
  opacity: 0.7;
}

.event-detail-hero-media {
  /* aspect-ratio: 16 / 9; */
  margin-bottom: 40px;
  overflow: hidden;
  justify-items: center;
  z-index: 1;
}

.event-detail-hero-media img {
  width: 100%;
  height: 100%;
}

.event-detail-block {
  position: relative;
  width: 100%;
  margin-bottom: 40px;
  z-index: 1;
}

.event-detail-block--chevron {
  position: relative;
}

.event-detail-block--chevron::after {
  content: "";
  position: absolute;
  transform: translate(calc(50% + 256px * 0.75), calc(-50% * 0.75));
  width: 512px;
  height: 515px;
  background: url("/asset/image/icon/background_icon.png");
  background-size: 75%; 
  background-repeat: no-repeat;
  opacity: 0.35;
  pointer-events: none;
  z-index: -99;
  filter: blur(3px)
}

.event-detail-content {
  position: relative;
  z-index: 1;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  width: 100%;
  margin: 0 0 16px;
}

.event-detail-content:last-child {
  margin-bottom: 0;
}

.event-detail-mid-media {
  width: 100%;
  min-height: 360px;
  z-index: 1;
  position: relative;
  margin: 16px 0 48px;
  overflow: hidden;
}

.event-detail-mid-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.event-detail-highlights {
  width: 100%;
}

.event-detail-subtitle {
  position: relative;
  z-index: 1;
  font-size: 24px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.35;
  margin-bottom: 16px;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255, 255, 255, 0.85);
}

.event-detail-list {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.event-detail-list li {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
}

.event-detail-list strong {
  display: block;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 4px;
}

@media (max-width: 900px) {
  .event-detail-title {
    font-size: 32px;
  }

  .event-detail-hero-media,
  .event-detail-mid-media {
    min-height: 240px;
    aspect-ratio: 16 / 10;
  }

  .event-detail-block--chevron::after {
    opacity: 0.2;
    right: -4%;
    width: min(50vw, 280px);
    height: min(50vw, 280px);
  }
}

@media (max-width: 600px) {
  .event-detail-section {
    padding: calc(var(--header-height) + 40px) 0 48px;
  }

  .event-detail-title {
    font-size: 26px;
  }

  .event-detail-subtitle {
    font-size: 20px;
  }

  .event-detail-block--chevron::after {
    display: none;
  }
}

/* =========================================================
   Product brand listing pages (product-1 / product-2)
   ========================================================= */

.prod-page-hero {
  background-color: #1C1C1C;
  /* padding-top: var(--header-height); */
  min-height: calc(100vh - 0px);
  display: flex;
  align-items: stretch;
}

.prod-page-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  min-height: calc(100vh - var(--header-height));
  max-height: calc(100vh - var(--header-height));
}

.prod-page-hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px clamp(24px, 6vw, 80px);
  max-width: 640px;
}

.prod-page-label {
  display: block;
  color: #FF6501;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.prod-page-title {
  font-size: 48px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}

.prod-page-desc {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 36px;
  max-width: 420px;
}

.prod-page-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  padding-bottom: 4px;
  align-self: flex-start;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.prod-page-cta:hover {
  color: #FF6501;
  border-bottom-color: #FF6501;
}

.prod-page-cta-arrow {
  font-size: 1em;
}

.prod-page-hero-media {
  background-color: #2a2a2a;
  min-height: 320px;
  overflow: hidden;
}

.prod-page-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.prod-page-hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Product list section */
.prod-list-section {
  background-color: #1C1C1C;
  padding: 72px 0 88px;
  scroll-margin-top: calc(var(--header-height) + 16px);
}

.prod-list-heading {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  margin: 0 0 36px;
  letter-spacing: -0.02em;
}

.prod-list-toolbar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 36px;
}

.prod-list-search {
  position: relative;
  width: 100%;
}

.prod-list-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: 0.55;
  pointer-events: none;
}

.prod-list-search-input {
  width: 100%;
  height: 48px;
  padding: 0 16px 0 44px;
  border: none;
  border-radius: 0;
  background-color: #2A2F38;
  color: #ffffff;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: box-shadow 0.2s ease;
}

.prod-list-search-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.prod-list-search-input:focus {
  box-shadow: 0 0 0 2px rgba(255, 101, 1, 0.55);
}

.prod-list-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.prod-list-filter {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.prod-list-filter:hover {
  border-color: #FF6501;
  color: #FF6501;
}

.prod-list-filter.is-active {
  background-color: #FF6501;
  border-color: #FF6501;
  color: #ffffff;
}

/* Grid: 4 columns, cards always present; JS hides non-page items */
.prod-list-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.prod-list-card {
  display: flex;
  flex-direction: column;
  background-color: #1a1f27;
  border: 1px solid transparent;
  overflow: hidden;
  transition: border-color 0.25s ease;
}

.prod-list-card.is-hidden {
  display: none;
}

.prod-list-card:hover {
  border-color: rgba(255, 101, 1, 0.45);
}

.prod-list-card-media {
  aspect-ratio: 4 / 3;
  background-color: #3a3f48;
  overflow: hidden;
}

.prod-list-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.prod-list-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 16px 20px;
  background-color: #1a1f27;
}

.prod-list-card-tag {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #FF6501;
  margin-bottom: 8px;
}

.prod-list-card-title {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.35;
  margin: 0 0 10px;
  min-height: 2.7em;
}

.prod-list-card-text {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 16px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.prod-list-card-link {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: width 0.2s ease,color 0.2s ease, border-color 0.2s ease;
  gap: 8px;
  width: 97px;
}

.prod-list-card-link::after {
  content: "";
  display: inline-block;
  width: 15.15px;
  height: 12.12px;
  background-image: url('/asset/image/icon/arrow.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.2s ease;
  transform: translateX(4px);
}

.prod-list-card-link:hover {
  color: #FFFFFF;
  border-bottom-color: #FFFFFF;
  width: 117px;
}

.prod-list-card-link:hover::after {
  transform: translateX(24px);
}

/* Pagination */
.prod-list-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 40px;
}

.prod-list-page-btn {
  appearance: none;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  border-radius: 0;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.prod-list-page-btn:hover:not(:disabled) {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.08);
}

.prod-list-page-btn.is-active {
  background-color: #FF6501;
  color: #ffffff;
}

.prod-list-page-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.prod-list-page-ellipsis {
  color: rgba(255, 255, 255, 0.45);
  padding: 0 4px;
  font-size: 14px;
}

@media (max-width: 1100px) {
  .prod-list-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .prod-page-hero-inner {
    grid-template-columns: 1fr;
    max-height: none;
    min-height: 0;
  }

  .prod-page-hero-content {
    padding: 48px 24px 40px;
    max-width: none;
  }

  .prod-page-title {
    font-size: 36px;
  }

  .prod-page-hero-media {
    min-height: 240px;
    aspect-ratio: 16 / 10;
  }

  .prod-list-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .prod-list-heading {
    font-size: 22px;
  }
}

@media (max-width: 560px) {
  .prod-page-title {
    font-size: 28px;
  }

  .prod-list-grid {
    grid-template-columns: 1fr;
  }

  .prod-list-section {
    padding: 48px 0 64px;
  }
}


/* =========================================================
   Page transition loader (index)
   Media slides left → right over 2s
   ========================================================= */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #1C1C1C;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.page-loader[hidden] {
  display: none !important;
}

.page-loader.is-entering {
  opacity: 0;
  visibility: hidden;
}

.page-loader.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-loader-media {
  /* width: min(420px, 48vw); */
  /* height: min(280px, 36vh); */
  flex-shrink: 0;
  background-color: #2a2a2a00;
  border-radius: 0;
  /* 預留放置過場 media（圖／影片） */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* will-change: transform; */
  /* transform: translateX(-120%); */
}

.page-loader.is-animating .page-loader-media {
  /* animation: page-loader-slide 2s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards; */
}

@keyframes page-loader-slide {
  0% {
    transform: translateX(-120%);
  }
  40% {
    transform: translateX(calc(50vw - 20%));
  }
  60% {
    transform: translateX(calc(50vw - 20%));
  }
  100% {
    transform: translateX(calc(100vw + 20%));
  }
}

body.page-loader-active {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .page-loader.is-animating .page-loader-media {
    animation-duration: 0.01ms;
  }
}

/* ========== Nexxflow demo section (product-3) ========== */
.nexxflow-demo-section {
  padding: 80px 0 100px;
  background: #1C1C1C;
  overflow-x: hidden;
}

.nexxflow-demo-inner {
  display: flex;
  align-items: stretch;
  gap: 32px;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.nexxflow-demo-text {
  flex: 1 1 34%;
  min-width: 0;
  max-width: 380px;
  padding-right: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nexxflow-demo-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: #f0f2f5;
  margin: 0 0 16px;
  line-height: 1.3;
}

.nexxflow-demo-desc {
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(220, 225, 235, 0.78);
  margin: 0 0 18px;
}

.nexxflow-demo-features {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nexxflow-demo-features li {
  margin: 0;
  padding: 0;
}

.nexxflow-demo-feature-btn {
  display: block;
  width: 100%;
  text-align: left;
  margin: 0;
  padding: 12px 14px 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(200, 210, 225, 0.88);
  font-size: 0.875rem;
  line-height: 1.5;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  position: relative;
}

.nexxflow-demo-feature-btn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: transparent;
  transition: background 0.15s;
}

.nexxflow-demo-feature-btn:hover {
  background: rgba(255, 101, 1, 0.1);
  border-color: rgba(255, 101, 1, 0.35);
  color: #f0f2f5;
}

.nexxflow-demo-feature-btn.is-active {
  background: rgba(255, 101, 1, 0.14);
  border-color: rgba(255, 101, 1, 0.55);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 101, 1, 0.12);
}

.nexxflow-demo-feature-btn.is-active::before {
  background: #FF6501;
}

.nexxflow-demo-legend {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
}

.nexxflow-demo-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: rgba(210, 218, 230, 0.85);
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px currentColor;
}

.legend-dot--male {
  background: #3B9EFF;
  color: #3B9EFF;
}

.legend-dot--female {
  background: #E04DE8;
  color: #E04DE8;
}

.legend-dot--staff {
  background: #3DDC84;
  color: #3DDC84;
}

.nexxflow-demo-hint {
  font-size: 0.8125rem;
  color: rgba(160, 170, 190, 0.7);
  margin: 0;
}

.nexxflow-demo-canvas-wrap {
  flex: 1 1 66%;
  min-width: 0;
  max-width: 100%;
  position: relative;
  min-height: 570px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: #0d1117;
}

#nexxflow-canvas {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 570px;
  touch-action: none;
}

/* GIF avatar overlay — native animation inside canvas area */
.nexxflow-avatar-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.nexxflow-avatar {
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

.nexxflow-tooltip {
  position: fixed;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(20, 24, 32, 0.95);
  border: 1px solid rgba(255, 101, 1, 0.45);
  border-radius: 8px;
  padding: 10px 12px 10px 14px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #e8ecf2;
  pointer-events: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  max-width: 240px;
}

/* display:flex overrides the UA [hidden] rule — force hide when attribute present */
.nexxflow-tooltip[hidden] {
  display: none !important;
}

.nexxflow-tooltip strong {
  color: #FF6501;
  font-weight: 600;
}

.nexxflow-tooltip-body {
  flex: 1;
  min-width: 0;
}

.nexxflow-tooltip-close {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: -2px -4px 0 0;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: rgba(200, 210, 230, 0.75);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.nexxflow-tooltip-close:hover {
  color: #FF6501;
  background: rgba(255, 101, 1, 0.12);
}

/* Large tablet / small desktop: slightly tighter text column */
@media (max-width: 1100px) {
  .nexxflow-demo-inner {
    gap: 24px;
    padding: 0 20px;
  }

  .nexxflow-demo-text {
    flex: 1 1 36%;
    max-width: 38%;
  }

  .nexxflow-demo-title {
    font-size: 1.55rem;
  }

  .nexxflow-demo-canvas-wrap,
  #nexxflow-canvas {
    min-height: 520px;
  }
}

/* Stack text above canvas */
@media (max-width: 900px) {
  .nexxflow-demo-section {
    padding: 64px 0 80px;
  }

  .nexxflow-demo-inner {
    flex-direction: column;
    gap: 28px;
    padding: 0 20px;
  }

  .nexxflow-demo-text,
  .nexxflow-demo-canvas-wrap {
    flex: 1 1 auto;
    max-width: 100%;
    width: 100%;
    padding-right: 0;
  }

  .nexxflow-demo-canvas-wrap {
    min-height: 480px;
    aspect-ratio: 16 / 11;
  }

  #nexxflow-canvas {
    min-height: 480px;
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 600px) {
  .nexxflow-demo-section {
    padding: 48px 0 64px;
  }

  .nexxflow-demo-inner {
    gap: 20px;
    padding: 0 16px;
  }

  .nexxflow-demo-title {
    font-size: 1.35rem;
  }

  .nexxflow-demo-desc {
    font-size: 0.9rem;
  }

  .nexxflow-demo-feature-btn {
    font-size: 0.8125rem;
    padding: 10px 12px 10px 14px;
  }

  .nexxflow-demo-canvas-wrap {
    min-height: 360px;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
  }

  #nexxflow-canvas {
    min-height: 360px;
  }

  .nexxflow-pop-controls {
    min-width: 0;
    padding: 6px 8px;
  }

  .nexxflow-pop-label {
    min-width: 36px;
    font-size: 0.7rem;
  }

  .nexxflow-pop-btn {
    width: 22px;
    height: 22px;
  }
}

/* Trail toggle + Reset Counting (top-left of canvas) */
.nexxflow-trail-controls {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(12, 16, 24, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: auto;
}

.nexxflow-trail-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(210, 218, 230, 0.9);
  cursor: pointer;
  user-select: none;
}

.nexxflow-trail-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: #FF6501;
  cursor: pointer;
}

.nexxflow-reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 5px 10px;
  border: 1px solid rgba(255, 101, 1, 0.45);
  border-radius: 6px;
  background: rgba(255, 101, 1, 0.12);
  color: #FF6501;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.nexxflow-reset-btn:hover {
  background: rgba(255, 101, 1, 0.28);
  border-color: rgba(255, 101, 1, 0.75);
  color: #fff;
}

/* Population controls overlay (top-right of canvas) — semi-transparent */
.nexxflow-pop-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: rgba(12, 16, 24, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: auto;
  min-width: 148px;
}

.nexxflow-pop-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nexxflow-pop-label {
  flex: 1;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(210, 218, 230, 0.9);
  min-width: 48px;
}

.nexxflow-pop-label--male { color: #3B9EFF; }
.nexxflow-pop-label--female { color: #E04DE8; }
.nexxflow-pop-label--staff { color: #3DDC84; }

.nexxflow-pop-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: #e8ecf2;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.nexxflow-pop-btn:hover {
  background: rgba(255, 101, 1, 0.18);
  border-color: rgba(255, 101, 1, 0.5);
  color: #FF6501;
}

.nexxflow-pop-val {
  width: 22px;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #f0f2f5;
  font-variant-numeric: tabular-nums;
}

/* Dashboard overlay — top-right inside canvas (filtered by active demo) */
.nexxflow-dashboard {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(148px, 38%);
  max-height: calc(100% - 24px);
  overflow-y: auto;
  padding: 0;
  margin: 0;
  pointer-events: none;
  box-sizing: border-box;
}

.nexxflow-dash-card {
  display: none;
  flex-direction: column;
  gap: 3px;
  min-height: 0;
  padding: 8px 10px;
  background: rgba(12, 16, 24, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.nexxflow-dash-card.is-visible {
  display: flex;
}

.nexxflow-dash-label {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(160, 170, 190, 0.8);
}

.nexxflow-dash-value {
  font-size: 1.05rem;
  font-weight: 600;
  color: #f0f2f5;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.nexxflow-dash-value--sm {
  font-size: 0.95rem;
}

.nexxflow-dash-sep {
  margin: 0 4px;
  color: rgba(160, 170, 190, 0.45);
  font-weight: 400;
}

.nexxflow-dash-card[data-demo-show*="entrance"] .nexxflow-dash-value { color: #3B9EFF; }
.nexxflow-dash-card[data-demo-show*="zone"] .nexxflow-dash-value { color: #FF6501; }
.nexxflow-dash-card[data-demo-show*="engagement"] .nexxflow-dash-value { color: #3DDC84; }

@media (max-width: 900px) {
  .nexxflow-dashboard {
    top: 8px;
    right: 8px;
    width: min(132px, 42%);
    gap: 5px;
  }

  .nexxflow-trail-controls {
    top: 8px;
    left: 8px;
    padding: 6px 10px;
  }

  .nexxflow-dash-card {
    padding: 8px 10px;
  }

  .nexxflow-dash-value {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .nexxflow-dashboard {
    width: min(120px, 46%);
  }

  .nexxflow-dash-label {
    font-size: 0.6rem;
  }

  .nexxflow-dash-value {
    font-size: 0.95rem;
  }

  .nexxflow-dash-value--sm {
    font-size: 0.9rem;
  }
}