/* ============================================================
   XLC — Static Layout Stylesheet
   Design Reference: Figma XLC Web Revamp
   Fonts: Archivo (headings) | Poppins (body) | Roboto (reviews)
   ============================================================ */

/* ── Design Tokens ───────────────────────────────────────── */
:root {
  /* ── Brand Palette ── */
  --red:          #FF0000;
  --red-hover:    #D90000;
  --red-dark:     #c0320c;
  --red-light:    #ff6b4a;
  --navy:         #001F35;
  --navy-deep:    #0B0B1B;
  --purple:       #4500A7;
  --purple-light: #7C3AED;
  --green:        #00FF37;
  --green-tp:     #00B67A;
  --black:        #000000;
  --white:        #FFFFFF;

  /* ── Neutral Surfaces ── */
  --bg-soft:      #FAFAFA;
  --bg-light:     #F5F5F5;
  --bg-gray:      #F8F8F8;
  --bg-card:      #FBFBFB;

  /* ── Text Palette ── */
  --text-body:    #525252;
  --text-muted:   #868686;
  --text-subtle:  #939393;
  --text-hint:    #999;
  --text-dark:    #100F0F;
  --text-mid:     #555;
  --text-label:   #333;
  --text-light:   #B3B3B3;
  --text-dim:     #9F9F9F;

  /* ── Borders & Dividers ── */
  --border:       #D4D4D4;
  --border-lt:    #E0E0E0;
  --border-field: #f0f0f0;
  --dot-inactive: #aaa;
  --dot-idle:     #ccc;
  --purple-tint:  #ece8f7;
  --navy-card:    #252540;
  --green-ink:    #001a0a;

  /* ── Shadows ── */
  --shadow-card:  0px 2px 4px rgba(7,4,146,0.10),
                  0px 24px 60px rgba(6,47,125,0.05),
                  0px 12px 24px rgba(27,59,119,0.05);

  /* ── Typography ── */
  --font-h:       'Archivo', -apple-system, sans-serif;
  --font-b:       'Poppins', -apple-system, sans-serif;
  --font-rev:     'Roboto', -apple-system, sans-serif;

  /* ── Layout ── */
  --container:     1440px;
  --container-pad: 40px;
  --radius-sm:     5px;
  --radius-md:     12px;
  --radius-lg:     20px;
  --radius-xl:     30px;
}



::selection {
  background-color: #E53935; 
  color: #FFFFFF;
}


/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  max-width: 100%;
}
body {
  font-family: var(--font-b);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
address { font-style: normal; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ── Scroll Reveal (SEO-safe: hidden only when .js-enabled) ── */
/* 避免首屏底下 section 長期 opacity:0（observer 未 trigger）— 用 visibility 輔助，in-view 後必定顯示 */
.js-enabled .reveal-on-scroll {
  opacity: 0;
  visibility: hidden;
  transform: translateY(60px) scale(0.98);
  transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
              visibility 0s linear 1s;
  will-change: opacity, transform;
}
.js-enabled .reveal-on-scroll.reveal-on-scroll--in-view {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition-delay: 0s, 0s, 0s;
}
/* TAB 跳轉區塊：立即完成 reveal（唔好等 1s transform），否則量度／捲動永遠偏 ~60px */
.js-enabled .reveal-on-scroll.reveal-on-scroll--tab-jump {
  transition: none !important;
  transition-delay: 0s !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
  will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
  .js-enabled .reveal-on-scroll {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
  }
  .js-enabled .bms-card,
  .js-enabled .bms-card.bms-card--visible,
  .js-enabled .bms-card.bms-card--leaving,
  .js-enabled .bms-card.bms-card--entering,
  .js-enabled .bms-card.bms-card--entering-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ── Layout Utilities ────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* ── Global Typography ──────────────────────────────────── */
.text-purple { color: var(--purple); }
.text-red    { color: var(--red); }
.text-green  { color: var(--green); }

.title-h1 {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 48px;
  line-height: 54px;
  color: var(--black);
}
.title-h2 {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 48px;
  line-height: 54px;
  color: var(--black);
}
/* Ampersand: force Poppins (overrides .title-h2 Archivo) */
.amp {
  font-family: var(--font-b) !important;
}
.title-h3 {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
}
.body-text {
  font-family: var(--font-b);
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
}
.label-text {
  font-family: var(--font-b);
  font-weight: 500;
  font-size: 13px;
  line-height: 18px;
}

/* ── Shared Buttons ──────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 17px;
  line-height: 18px;
  text-align: center;
  padding: 20px 30px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease;
 
  border: none;
  border-radius: var(--radius-sm);
  background: var(--red);
  color: var(--white);
  font-family: var(--font-h);
  font-size: 15px;
}
.btn--primary {
  background: var(--red);
  color: var(--white);
  border: none;
}
.btn--primary:hover {
  background: var(--red-hover);
  box-shadow: 0 4px 18px rgba(255,0,0,0.28);
  transform: translateY(-2px);
}
.btn--primary:active { transform: translateY(0); box-shadow: none; }

.btn--outline {
  background: transparent;
  color: var(--black);
  border: 1.5px solid rgba(0,0,0,0.3);
}
.btn--outline:hover {
  border-color: var(--black);
  background: var(--bg-soft);
  transform: translateY(-2px);
}
.btn--outline:active { transform: translateY(0); }

.btn--outline-dark {
  background: transparent;
  color: var(--black);
  border: 1.5px solid rgba(0,0,0,0.3);
}
.btn--outline-dark:hover {
  border-color: var(--black);
  background: var(--bg-soft);
  transform: translateY(-2px);
}
.btn--lg {
  padding: 20px 32px;
  font-size: 17px;
}

/* ── Section Badge ───────────────────────────────────────── */
.section-badge {
  display: inline-block;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 13px;
  line-height: 14px;
  color: var(--text-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  margin-bottom: 16px;
}
.section-badge--white {
  color: var(--white);
  border-color: var(--white);
}
.section-badge--bordered {
  color: var(--white);
  border-color: var(--white);
}

/* ── Red Bar Accent (use this class for all red diagonal lines) ── */
.red-bar {
  display: block;
  width: 5px;
  height: 120px;
  background: var(--red);
  border-radius: 100px;
  transform: rotate(16deg);
  transform-origin: top left;
  flex-shrink: 0;
  margin-left: 10%;
}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announce-bar {
  background: var(--navy);
  padding: 11px 0;
  position: relative;
  overflow: hidden;
}
.announce-bar__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
}
.announce-bar__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  animation: announcePulse 2.2s ease-in-out infinite;
}
@keyframes announcePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 255, 55, 0.5); }
  55%       { box-shadow: 0 0 0 5px rgba(0, 255, 55, 0); }
}
.announce-bar__text {
  font-family: var(--font-b);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.88);
  text-align: center;
  line-height: 1.5;
}
.announce-bar__cta {
  color: var(--green);
  font-weight: 600;
  text-decoration: none;
  margin-left: 6px;
  transition: opacity 0.2s;
}
.announce-bar__cta:hover { opacity: 0.8; text-decoration: underline; }
.announce-bar__close {
  position: absolute;
  right: var(--container-pad);
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}
.announce-bar__close:hover {
  background: rgba(255, 255, 255, 0.22);
  color: var(--white);
}
.announce-bar {
  max-height: 60px;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}

/* ============================================================
   NAVBAR
   ============================================================ */

/* ── Transitions shared ─── */
:root {
  --nav-ease: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,0.07);
  height: 72px;
  transition: box-shadow var(--nav-ease);
}
.navbar.scrolled {
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.navbar__inner {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 0;
}

/* ── Logo ─── */
.navbar__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-right: 32px;
  text-decoration: none;
  transition: opacity var(--nav-ease);
}
.navbar__logo:hover { opacity: 0.82; }
.navbar__logo-img {
  height: 35px;
  width: auto;
  display: block;
}

/* ── Checkbox toggle (hidden) ─── */
.nav-toggle-cb {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

/* ── Nav list ─── */
.navbar__nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbar__list {
  display: flex;
  align-items: center;
  gap: 10px;
}
.navbar__item { position: relative; }

/* ── Nav link ─── */
.navbar__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-b);
  font-weight: 500;
  font-size: 15px;
  color: var(--text-label);
  padding: 8px 13px;
  border-radius: 7px;
  transition:
    color var(--nav-ease),
    background var(--nav-ease);
  white-space: nowrap;
  position: relative;
}
.navbar__link:hover {
  color: var(--black);
  background: var(--bg-soft);
}
.navbar__link--active {
  font-weight: 600;
  color: var(--black);
}
.navbar__link--active::after {
  display: none;
}

/* ── Red triangle arrow ─── */
.navbar__arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--red);
  flex-shrink: 0;
  transition: transform var(--nav-ease);
}
.navbar__item--has-dropdown:hover .navbar__arrow {
  transform: rotate(180deg);
}

/* ── Dropdown container: under corresponding nav item, no gap so hover stays ─── */
.navbar__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  transform: translateY(-6px);
  min-width: 680px;
  max-width: 720px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.07);
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--nav-ease),
    transform var(--nav-ease),
    visibility var(--nav-ease);
  z-index: 500;
}
/* Invisible bridge so mouse can move from nav link to panel without leaving hover */
.navbar__dropdown::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 12px;
}
.navbar__item--has-dropdown:hover .navbar__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.navbar__dropdown-inner {
  display: flex;
  flex-wrap: nowrap;
  min-height: 160px;
}
.navbar__dropdown-section {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 16px 16px;
}
/* Right-side info panel + image area (16:9, larger) */
.navbar__dropdown-info {
  flex-shrink: 0;
  width: 300px;
  padding: 0;
  border-left: 1px solid rgba(0,0,0,0.08);
  background: var(--bg-soft);
  border-radius: 0 12px 12px 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.navbar__dropdown-info-visual {
  width: 100%;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
  overflow: hidden;
  background: rgba(0,0,0,0.04);
}
.navbar__dropdown-info-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.navbar__dropdown-info-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.navbar__dropdown-info-title {
  font-family: var(--font-b);
  font-size: 14px;
  font-weight: 600;
  color: var(--black);
  line-height: 1.35;
}
.navbar__dropdown-info-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
  flex: 1;
}
.navbar__dropdown-info-cta {
  font-family: var(--font-b);
  font-size: 13px;
  font-weight: 600;
  color: var(--purple);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--nav-ease), gap var(--nav-ease);
}
.navbar__dropdown-info-cta:hover {
  color: var(--purple-dark, #3d0099);
  gap: 10px;
}
.navbar__dropdown-info-cta i {
  font-size: 11px;
}
/* Company、Resources：不顯示右欄，寬度 fit-content，padding 調整 */
.navbar__item--company .navbar__dropdown-info,
.navbar__item--resources .navbar__dropdown-info {
  display: none;
}
.navbar__item--company .navbar__dropdown, .navbar__item--resources .navbar__dropdown {
  min-width: 0;
  max-width: none;
  width: max-content;
  padding: 14px 18px 8px;
  padding-left: 0px;
  padding-top: 10px;
}
.navbar__item--company .navbar__dropdown-inner,
.navbar__item--resources .navbar__dropdown-inner {
  min-height: 0;
}
.navbar__item--company .navbar__dropdown-section,
.navbar__item--resources .navbar__dropdown-section {
  padding: 0;
}
.navbar__item--company .navbar__dropdown-label,
.navbar__item--resources .navbar__dropdown-label {
  padding: 0 0 8px;
  margin-bottom: 4px;
}
.navbar__item--company .navbar__dropdown-link,
.navbar__item--resources .navbar__dropdown-link {
  padding: 10px 12px;
  border-radius: 6px;
}
.navbar__dropdown-label {
  font-family: var(--font-b);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 4px 6px;
  margin-bottom: 2px;
}

/* ── Dropdown links (DataPacket-style font sizes) ─── */
.navbar__dropdown-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  color: #444;
  font-family: var(--font-b);
  font-size: 15px;
  font-weight: 500;
  transition:
    background var(--nav-ease),
    color var(--nav-ease),
    transform var(--nav-ease);
  text-decoration: none;
}
.navbar__dropdown-link:hover {
  background: var(--bg-soft);
  color: var(--black);
  transform: translateX(3px);
}
.navbar__dropdown-link strong {
  display: block;
  color: var(--black);
  font-weight: 600;
  font-size: 15px;
}
.navbar__dropdown-link small {
  display: block;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 400;
  margin-top: 2px;
}

/* ── Dropdown Icon ─── */
.navbar__dropdown-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  border-radius: 8px;
  flex-shrink: 0;
  color: var(--purple);
  transition: background var(--nav-ease);
}
.navbar__dropdown-link:hover .navbar__dropdown-icon {
  background: var(--purple-tint);
}
.navbar__dropdown-icon--flag {
  background: transparent;
  padding: 0;
}
.navbar__dropdown-icon--flag img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}
.navbar__dropdown-icon svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ── CTA Buttons ─── */
.navbar__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Nav CTA: unified height (44px) ── */
.navbar__action-link,
.navbar__btn-login {
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-b);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  padding: 0 16px;
  border-radius: 6px;
  text-decoration: none;
}
/* Server Config + Free Trial: no border-radius (sharp corners) */
.navbar__action-link {
  border-radius: 0;
}

/* Action links: always-on gray underline + sequential color draw */
.navbar__action-link {
  position: relative;
  border: none;
  background: transparent;
  transition: transform var(--nav-ease), box-shadow var(--nav-ease), color var(--nav-ease);
  border: 1px solid transparent;
}

/* Animated colored line (draws on top of gray) */
.navbar__action-link::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  pointer-events: none;
}

/* On hover: freeze animation, snap to full line, add glow */
.navbar__action-link:hover {
  transform: translateY(-2px);
}
.navbar__action-link--red:hover::before,
.navbar__action-link--purple:hover::before {
  animation-play-state: paused !important;
  transform: scaleX(1) !important;
  opacity: 1 !important;
}

/* ── Red (Server Config) ── */
.navbar__action-link--red {
  color: var(--red);
  /* permanent gray underline */
  box-shadow: inset 0 -2px 0 0 var(--border);
}
.navbar__action-link--red::before {
  background: linear-gradient(to right, var(--red), var(--red-dark));
  animation: nav-red-draw 7s ease-in-out infinite;
}
.navbar__action-link--red:hover {
  color: var(--red);
  box-shadow: inset 0 -2px 0 0 var(--border), 0 4px 14px rgba(255, 0, 0, 0.22);
  color: var(--red);
  
  border: 1px solid var(--red);
  border-radius: 5px;
}



/* ── Purple (Free Trial) ── */
.navbar__action-link--purple {
  color: var(--purple);
  /* permanent gray underline */
  box-shadow: inset 0 -2px 0 0 var(--border);
}
.navbar__action-link--purple::before {
  background: linear-gradient(to right, var(--purple), var(--purple-light));
  animation: nav-purple-draw 7s ease-in-out infinite;
}
.navbar__action-link--purple:hover {
  color: var(--purple);
  box-shadow: inset 0 -2px 0 0 var(--border), 0 4px 14px rgba(69, 0, 167, 0.22);
  
  
  border: 1px solid var(--purple);
  border-radius: 5px;
}

/*  Sequential underline draw — 7s loop (ease-in-out, soft)
    Total: 7s
    Red   : 0s fade in + draw → 0.3s→1.5s  (4%→21%)
    Red   : stays visible → 4.5s           (21%→64%)
    Purple: 1.8s fade in + draw → 3.0s     (26%→43%)
    Purple: stays visible → 4.5s           (43%→64%)
    Both  : soft fade out → 5.5s           (64%→79%)
    Both  : invisible rest → 7s            (79%→100%) loop */
@keyframes nav-red-draw {
  0%   { transform: scaleX(0); opacity: 0; }
  4%   { transform: scaleX(0); opacity: 1; }
  21%  { transform: scaleX(1); opacity: 1; }
  64%  { transform: scaleX(1); opacity: 1; }
  79%  { transform: scaleX(1); opacity: 0; }
  100% { transform: scaleX(0); opacity: 0; }
}
@keyframes nav-purple-draw {
  0%   { transform: scaleX(0); opacity: 0; }
  25%  { transform: scaleX(0); opacity: 0; }
  26%  { transform: scaleX(0); opacity: 1; }
  43%  { transform: scaleX(1); opacity: 1; }
  64%  { transform: scaleX(1); opacity: 1; }
  79%  { transform: scaleX(1); opacity: 0; }
  100% { transform: scaleX(0); opacity: 0; }
}

/* Login: same height, static border */
.navbar__btn-login {
  color: var(--black);
  border: 2px solid var(--border);
  background: var(--white);
  transition: transform var(--nav-ease), border-color var(--nav-ease),
              background var(--nav-ease);
}
.navbar__btn-login:hover {
  border-color: var(--black);
  background: var(--bg-soft);
  transform: translateY(-2px);
}

/* ── Hamburger (mobile) ─── */
.navbar__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5.5px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  border-radius: 8px;
  padding: 8px;
  margin-left: 12px;
  flex-shrink: 0;
  transition: background var(--nav-ease);
}
.navbar__hamburger:hover { background: var(--bg-soft); }
.hamburger__line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--black);
  border-radius: 2px;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, background 0.25s ease;
}

/* ============================================================
   NAVBAR — RESPONSIVE (Mobile)
   ============================================================ */

/* Mobile CTA hidden by default on desktop */
.navbar__mobile-cta { display: none; }

/* ── Backdrop overlay (controlled by JS) ── */
.navbar__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 997;
  opacity: 0;
  transition: opacity 0.32s ease;
  cursor: pointer;
}
.navbar__overlay.nav-overlay--visible {
  display: block;
  opacity: 1;
}

@media (max-width: 1200px) {
  /* Hamburger: always on far right，1200 以下轉 toggle menu */
  .navbar__hamburger {
    display: flex;
    margin-left: auto;
  }
  .navbar__actions { display: none; }

  /* ── DataPacket-style: full-height drawer from right + overlay ── */
  .navbar {
    overflow: visible;
  }
  /* Overlay 只在 header 下方，不遮住 header，方便點 hamburger/X 關閉 */
  .navbar__overlay {
    display: block;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    cursor: pointer;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  }
  .navbar__overlay.nav-overlay--visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* main-nav 在 site-header 下方顯示，header 保持可見 */

  .navbar__dropdown-label {
    display:none;
}


  .navbar__nav {
    display: none!important;
    position: fixed;
    top: 72px;
    right: 0;
    height: calc(100vh - 72px); /* Fallback for older browsers */
    height: calc(100dvh - 72px); /* Modern fix for dynamic address bars */
    width: min(360px, 90vw);
    max-width: 100%;
    background: var(--white);
    box-sizing: border-box;
    flex-direction: column;
    align-items: stretch;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 999;
    padding: 20px 20px 28px;
    padding-bottom: 32px;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s;
    justify-content: space-between;
}
  .navbar.nav-open .navbar__nav {
    display: flex!important;
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
  }

  /* Hamburger 三條線 → 紅色 X 動畫（打開時），關閉後變返三條線 */
  .navbar.nav-open .hamburger__line:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
    background: var(--red);
  }
  .navbar.nav-open .hamburger__line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .navbar.nav-open .hamburger__line:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
    background: var(--red);
  }

  /* Nav list：無灰底，統一 margin/padding */
  .navbar__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    padding: 0;
    margin: 0;
  }
  .navbar__item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    margin: 0;
  }
  .navbar__item:last-child { border-bottom: none; }

  .navbar__link {
    font-size: 15px;
    padding: 14px 12px 14px 0;
    justify-content: space-between;
    width: 100%;
    border-radius: 0;
    background: transparent;
  }
  .navbar__link--active::after { display: none; }

  /* Arrow rotates when accordion is open */
  .navbar__item--open .navbar__arrow {
    transform: rotate(180deg);
  }

  .navbar__item--company .navbar__dropdown, .navbar__item--resources .navbar__dropdown {
    
    padding: 0;
    padding-left: 0px;
    padding-top: 0;
}

  /* Dropdown：無灰底，padding 統一 */
  .navbar__dropdown {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent;
    padding: 0 0 0 0px;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .navbar__item--has-dropdown.navbar__item--open .navbar__dropdown {
    max-height: 700px;
  }
  .navbar__item--has-dropdown:hover .navbar__dropdown,
  .navbar__item--has-dropdown:focus-within .navbar__dropdown {
    max-height: 0;
  }
  .navbar__item--has-dropdown.navbar__item--open:hover .navbar__dropdown,
  .navbar__item--has-dropdown.navbar__item--open:focus-within .navbar__dropdown {
    max-height: 700px;
  }

  .navbar__dropdown-info { display: none !important; }
  .navbar__dropdown-inner { min-height: 0; }
  .navbar__dropdown-section {
    padding: 4px 0 10px;
    margin: 0;
  }

  .navbar__dropdown-link {
    font-size: 14px;
    padding: 10px 12px 10px 8px;
    margin: 0;
  }
  .navbar__dropdown-link:hover { transform: none; }

  /* Mobile CTA */
  .navbar__mobile-cta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 24px 0 0;
    margin-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }
  .navbar__mobile-cta .btn:first-child {
    grid-column: 1 / -1;
  }
  .navbar__mobile-cta .btn {
    width: 100%;
    justify-content: center;
    font-size: 15px;
    padding: 14px;
    border-radius: 8px;
  }
}

@media (max-width: 640px) {
  .navbar__logo-img { height: 24px; }
  .navbar__nav { width: 100vw; border-left: none; }
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
  /*background: var(--bg-soft);*/
  padding: 30px 0 0;
  overflow: hidden;
  position: relative;
  background: linear-gradient(to bottom, var(--bg-soft), white);
}

/* Hero Slider */
.hero-slider {
  position: relative;
  width: 100%;
}
.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0.7s ease;
  pointer-events: none;
  z-index: 0;
}
.hero-slide--active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}

/* Hero Slider Dots */
.hero-slider__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 0 24px;
  position: relative;
  z-index: 2;
}
.hero-slider__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--dot-idle);
  cursor: pointer;
  transition: background 0.3s ease, width 0.3s ease, border-radius 0.3s ease;
}
.hero-slider__dot:hover { background: var(--text-hint); }
.hero-slider__dot--active {
  background: var(--red);
  width: 28px;
  border-radius: 5px;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
  padding-bottom: 0;
}
.hero__content {
  padding-top: 40px;
  padding-bottom: 40px;
  max-width: 1240px;
  margin: 0 auto;
}
.hero__title-row {
  display: flex;
  align-items: center;
  gap: 50px;
  margin: 0 auto 25px;
}
.hero__title {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 63px;
  line-height: 64px;
  color: var(--black);
  flex-shrink: 1;
  min-width: 0;
}
.hero__title--red {
  color: var(--purple);
}

/* Typewriter effect */
.typewriter { display: inline; }
.typewriter--cursor::after {
  content: '|';
  font-weight: 400;
  animation: tw-blink 0.6s step-end infinite;
  margin-left: 1px;
}
@keyframes tw-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.hero--hidden {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.hero--show {
  opacity: 1;
  transform: translateY(0);
}
.hero__title-bar {
  display: block;
  width: 6px;
  min-height: 120px;
  background: var(--red);
  border-radius: 100px;
  transform: rotate(16deg);
  flex-shrink: 0;
  margin-top: 8px;
}
.hero__title-sub {
  font-family: var(--font-h);
  font-weight: 500;
  font-size: 38px;
  line-height: 34px;
  color: var(--black);
  max-width: 30%;
  flex-shrink: 0;
  margin-top: 4px;
}
.hero__desc {
  font-family: var(--font-b);
  font-weight: 400;
  font-size: 17px;
  line-height: 26px;
  color: var(--black);
  max-width: 700px;
  margin-bottom: 17px;
  margin-top: 10px;
}
.hero__bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* max-width: 700px; */
}
.hero__cta {
  display: flex;
  gap: 16px;
  margin-top: -135px;
  /* margin-left: -37px; */
}
.hero__scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
}

.hero__scroll-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 3px solid var(--red);
  padding: 3px;
  margin-top: 15px;
  animation: scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(8px); }
  50% { transform: translateY(-2px); }
  70% { transform: translateY(5px); }
}
.hero__scroll-hint span {
  font-family: var(--font-b);
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  color: var(--black);
  animation: scrollBounce 2s ease-in-out infinite;
}

/* Hero Visual */
.hero__visual {
  position: relative;
  display: none;
  flex-direction: column;
  gap: 20px;
  padding-top: 10px;
  padding-bottom: 40px;
}
.hero__server-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--navy);
  box-shadow: 0 20px 60px rgba(0,31,53,0.25);
}
.hero__server-placeholder {
  position: relative;
  width: 100%;
}
.hero__stats-panel {
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  padding: 20px 28px;
}
.stats-panel__inner { display: flex; flex-direction: column; gap: 14px; }
.stats-row {
  display: flex;
  align-items: center;
  gap: 0;
}
.stats-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 20px;
  flex: 1;
}
.stats-item:first-child { padding-left: 0; }
.stats-value {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 20px;
  color: var(--black);
}
.stats-value--sm { font-size: 16px; }
.stats-label {
  font-family: var(--font-b);
  font-size: 11px;
  color: var(--text-muted);
}
.stats-divider {
  width: 1px;
  height: 36px;
  background: var(--border);
  flex-shrink: 0;
}

/* ============================================================
   PROMOTIONS CAROUSEL
   ============================================================ */
.promo {
  padding: 0 0 48px;
  overflow: hidden;
  position: relative;
}

/* 錨點捲動時留出 header 高度，避免被 navbar 遮住 */
#promo-section {
  scroll-margin-top: 72px;
}

/* ── Nav Arrows (follow mouse Y) ── */
.promo__arrow {
  position: fixed;
  z-index: 100;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,0,0,0.92);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 24px rgba(255,0,0,0.4);
  backdrop-filter: blur(6px);
}
.promo__arrow.promo__arrow--show {
  opacity: 1;
  pointer-events: auto;
}
.promo__arrow:hover {
  background: rgba(200,0,0,1);
  box-shadow: 0 6px 32px rgba(255,0,0,0.55);
  transform: scale(1.15);
}
.promo__arrow:active { transform: scale(0.92); }

/* ── Track ── */
.promo__track {
  display: flex;
  gap: 24px;
  padding: 30px var(--container-pad);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  padding-bottom: 50px;
}
.promo__track::after {
  content: '';
  flex: 0 0 1px;
}
.promo__track:active { cursor: grabbing; }
.promo__track::-webkit-scrollbar { display: none; }

/* ── Cards base ── */
.promo__card {
  flex: 0 0 320px;
  min-height: 390px;
  background: var(--white);
  border-radius: 16px;
  border: 1px solid var(--border);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  will-change: transform, opacity;
  opacity: 0;
  transform: translateX(50px);
  position: relative;
  transition: transform 0.45s cubic-bezier(0.22,0.61,0.36,1),
              box-shadow 0.4s ease;
              -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE/Edge */
  user-select: none;         /* Standard */
}
.promo__card::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 19px;
  padding: 3px;
  background: linear-gradient(135deg, transparent, transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 2;
}
.promo__card:hover::before {
  opacity: 1;
  background: linear-gradient(135deg, var(--red) 0%, var(--purple) 35%, #c9a0e8 60%, var(--red) 100%);
  background-size: 300% 300%;
  animation: glowShift 3s ease infinite;
}
@keyframes glowShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.promo__card:hover {
  box-shadow: 0 8px 32px rgba(69,0,167,0.12), 0 0 20px rgba(255,0,0,0.06);
  transform: translateY(-6px);
}

/* Entrance animation */
.promo__card.promo--visible {
  opacity: 1;
  transform: translateX(0) translateY(0);
  transition: opacity 0.55s cubic-bezier(0.22,0.61,0.36,1),
              transform 0.55s cubic-bezier(0.22,0.61,0.36,1),
              box-shadow 0.4s ease;
}
.promo__card.promo--visible:hover {
  transform: translateY(-6px);
}
.promo__card:nth-child(1).promo--visible  { transition-delay: 0s; }
.promo__card:nth-child(2).promo--visible  { transition-delay: 0.06s; }
.promo__card:nth-child(3).promo--visible  { transition-delay: 0.12s; }
.promo__card:nth-child(4).promo--visible  { transition-delay: 0.18s; }
.promo__card:nth-child(5).promo--visible  { transition-delay: 0.24s; }
.promo__card:nth-child(6).promo--visible  { transition-delay: 0.30s; }
.promo__card:nth-child(7).promo--visible  { transition-delay: 0.36s; }
.promo__card:nth-child(8).promo--visible  { transition-delay: 0.42s; }
.promo__card:nth-child(9).promo--visible  { transition-delay: 0.48s; }
.promo__card:nth-child(10).promo--visible { transition-delay: 0.54s; }

/* ── Featured Card ── */
.promo__card--featured {
  flex: 0 0 420px;
  min-height: 390px;
  padding: 0;
  border: none;
  background: linear-gradient(160deg, #ff7216 0%, #ff5555 40%, #ff0000 100%);
  background: linear-gradient(160deg, #cfcfcf 0%, #7676fd 40%, #b02b23 100%);
  background: linear-gradient(160deg, #1c6ce9 0%, #003a95 40%, #001f50 100%);
  overflow: hidden;
}
.promo__card--featured::before { display: none; }
.promo__card--featured:hover {
  box-shadow: 0 12px 40px rgba(160,108,200,0.35);
}
.promo__card-visual {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 28px 0;
  -webkit-user-drag: none;
  pointer-events: none;
}
.promo__dashboard-mockup {
  width: 100%;
  background: #1a1a2e;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
.promo__dash-bar {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  background: var(--navy-card);
}
.promo__dash-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.promo__dash-body { padding: 16px; }
.promo__dash-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.promo__dash-row--metrics { gap: 20px; }
.promo__dash-stat {
  background: var(--navy-card);
  border-radius: 8px;
  padding: 12px 16px;
  flex: 1;
}
.promo__dash-num {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 20px;
  color: #fff;
}
.promo__dash-metric {
  background: var(--navy-card);
  border-radius: 8px;
  padding: 10px 14px;
  flex: 1;
}
.promo__dash-val {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 14px;
  color: #c9a0e8;
}
.promo__dash-chart {
  height: 48px;
  background: linear-gradient(180deg, rgba(160,108,200,0.3) 0%, transparent 100%);
  border-radius: 6px;
}
.promo__card-bottom { padding: 20px 28px 24px; }

/* ── Card with Image ── */
.promo__card--has-img { padding: 0; }
.promo__card--has-img .promo__card-img {
  width: 100%;
  height: 160px;
  overflow: hidden;
  border-radius: 15px 15px 0 0;
  position: relative;
  z-index: 0;
}
.promo__card--has-img .promo__card-img svg,
.promo__card--has-img .promo__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
  -webkit-user-drag: none;
  pointer-events: none;
}
.promo__card--has-img:hover .promo__card-img svg,
.promo__card--has-img:hover .promo__card-img img {
  transform: scale(1.05);
}
.promo__card--has-img .promo__card-label,
.promo__card--has-img .promo__card-title,
.promo__card--has-img .promo__card-desc,
.promo__card--has-img .promo__card-link {
  padding-left: 24px;
  padding-right: 24px;
}
.promo__card--has-img .promo__card-label { margin-top: 20px; }
.promo__card--has-img .promo__card-link { padding-bottom: 24px; }

/* ── Text styles ── */
.promo__card-label {
  display: block;
  font-family: var(--font-b);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.promo__card--featured .promo__card-label {
  color: rgba(255,255,255,0.7);
}
.promo__card-title {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  color: var(--black);
  margin-bottom: 12px;
}
.promo__card-title--white { color: #fff; }
.promo__card-desc {
  font-family: var(--font-b);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--text-body);
  margin-bottom: 16px;
  flex: 1;
}
.promo__card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-b);
  font-weight: 600;
  font-size: 14px;
  color: var(--red);
  text-decoration: none;
  transition: gap 0.25s ease;
  margin-top: auto;
}
.promo__card-link:hover { gap: 14px; }
.promo__card-link--white { color: #fff; }

/* ── Bullet Dots ── */
.promo__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding-top: 20px;
}
.promo__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease, width 0.3s ease;
}
.promo__dot:hover {
  background: var(--dot-inactive);
  transform: scale(1.2);
}
.promo__dot--active {
  background: var(--red);
  width: 24px;
  border-radius: 4px;
}

/* ============================================================
   SECURE SECTION (Dark Navy)
   ============================================================ */
.secure-section {
  background: var(--navy);
  margin: 0 3%;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: 72px 0 48px;
}

/* Header grid: title | description */
.secure__header-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 40px;
}
.secure__header-right { padding-top: 60px; }

/* Map grid: locations | map + features */
.secure__map-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0 40px;
  grid-template-areas:
    "locs map"
    "features features";
}
.secure__locations-col {
  grid-area: locs;
  display: flex;
  align-items: center;
  padding-top: 16px;
  margin-top: -88px;
}
.secure__map { grid-area: map; }
.secure__features { grid-area: features; }

.secure__title {
  color: var(--white);
  margin-bottom: 20px;
}
.secure__subtitle {
  font-family: var(--font-h);
  font-weight: 500;
  font-size: 22px;
  line-height: 28px;
  color: var(--text-light);
  margin-bottom: 0px;
}
.secure__desc {
  color: var(--white);
}
/* ── Location List with vertical line ── */
.secure__locations {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: 4px;
}
.secure__location {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 10px 8px 0;
  cursor: pointer;
  transition: background 0.25s ease;
  border-radius: 8px;
  color:#7492b3 !important;
}
.secure__location:hover { background: rgba(255,255,255,0.06); }
.secure__location:hover .location-name { color: var(--green); }

.location-dot-wrap {
  position: relative;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.location-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid rgba(255,255,255,0.35);
  flex-shrink: 0;
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.location-dot--green,
.secure__location--active .location-dot {
  background: var(--green);
  border-color: var(--green);
  box-shadow: 0 0 8px rgba(0,255,55,0.5);
}

/* Vertical connecting line between dots */
.secure__location:not(:last-child) .location-dot-wrap::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 20px;
  background: rgba(255,255,255,0.2);
}

.location-name--green,
.secure__location--active .location-name { color: var(--green); }

/* Frankfurt: planned / coming soon — slightly faded, still clickable */
.secure__location--coming-soon { opacity: 0.85; }
.secure__location--coming-soon .location-dot { border-color: rgba(255,255,255,0.5); }
.location-badge {
  font-family: var(--font-b);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(255,255,255,0.55);
  margin-left: 4px;
}
.location-badge--coming-soon { color: rgba(255,255,255,0.5); }

/* ── World Map ── */
.secure__map { padding: 20px 0; }
.secure__map-wrap {
  position: relative;
  width: 100%;
}
.secure__map-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Arc Lines SVG ── */
.map-arcs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.map-arc {
  fill: none;
  stroke: var(--green);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0;
  animation: arcShoot 1.2s ease-out forwards;
}
@keyframes arcShoot {
  0%   { stroke-dashoffset: var(--arc-len); opacity: 0; }
  8%   { opacity: 0.85; }
  50%  { opacity: 0.6; }
  85%  { opacity: 0.2; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.map-arc--thin {
  stroke-width: 1.2;
  stroke: rgba(0, 255, 55, 0.5);
  filter: drop-shadow(0 0 2px rgba(0, 255, 55, 0.25));
}

/* ── Map Pins ── */
.map-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.map-pin__icon {
  width: 24px;
  height: 40px;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.map-pin__icon--green {
  display: none;
}
.map-pin__icon--white {
  display: block;
  opacity: 0.7;
}
.map-pin--active .map-pin__icon--green {
  display: block;
  animation: pinDrop 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
}
.map-pin--active .map-pin__icon--white {
  display: none;
}
@keyframes pinDrop {
  0% { transform: translateY(-20px) scale(0.7); opacity: 0; }
  60% { transform: translateY(2px) scale(1.05); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Pulse ring on active pin */
.map-pin__pulse {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}
.map-pin--active .map-pin__pulse {
  opacity: 1;
  animation: pinPulse 2s ease-out infinite;
}
@keyframes pinPulse {
  0% { box-shadow: 0 0 0 0 rgba(0,255,55,0.5); }
  70% { box-shadow: 0 0 0 18px rgba(0,255,55,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,255,55,0); }
}

/* ── Tag Box (dark bg, green text — match image) ── */
.map-pin__tag {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  white-space: nowrap;
  background: rgba(20,40,45,0.92);
  border: 1px solid rgba(0,255,55,0.3);
  color: var(--green);
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 17px;
  line-height: 1;
  padding: 8px 18px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
  backdrop-filter: blur(4px);
}
.map-pin__tag::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(20,40,45,0.92);
}
.map-pin--active .map-pin__tag {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.map-pin__tag-badge {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: rgba(0,255,55,0.7);
  margin-top: 2px;
  white-space: nowrap;
}
.map-pin__tag:has(.map-pin__tag-badge) { white-space: normal; }
.map-pin--coming-soon .map-pin__icon { opacity: 0.5; }

/* Green text util */
.text-green { color: var(--green); }

/* Always-On wrapper */
.always-on-wrap {
  display: inline;
  align-items: center;
  vertical-align: baseline;
  /* margin-top: -15px; */
  align-content: space-around;
}

/* Status dot – server always-on indicator */
.status-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  margin-right: 10px;
  position: relative;
  box-shadow: 0 0 6px var(--green), 0 0 12px rgba(0, 255, 55, 0.4);
  animation: statusPulse 2s ease-in-out infinite;
}
.status-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(0, 255, 55, 0.3);
  animation: statusRing 2s ease-in-out infinite;
}
@keyframes statusPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--green), 0 0 12px rgba(0, 255, 55, 0.4); }
  50%      { opacity: .45; box-shadow: 0 0 2px var(--green), 0 0 4px rgba(0, 255, 55, 0.15); }
}
@keyframes statusRing {
  0%, 100% { transform: scale(1); opacity: .5; }
  50%      { transform: scale(1.6); opacity: 0; }
}

/* Always-On typewriter cursor */
.always-on-cursor {
  font-weight: 400;
  color: var(--green);
  animation: aoCursorBlink .7s step-end infinite;
  margin-left: 1px;
}
/* Solid caret while typing; after done, remove class → blink behind text */
.always-on-cursor--typing {
  animation: none;
  opacity: 1;
}
@keyframes aoCursorBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* Features Bottom Bar */
.secure__features {
  grid-area: features;
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 28px;
  max-width: 1200px;
  margin: 0 auto;
}
.secure__feature {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 170px;
  padding-right: 16px;
}
.feature-bar {
  display: block;
  width: 5px;
  height: 36px;
  border-radius: 100px;
  flex-shrink: 0;
  transform: rotate(18deg);
}
.feature-bar--green { background: var(--green); }
.feature-text {
  font-family: var(--font-b);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--white);
}



@media (max-width: 640px) {
  .map-pin__tag {
 font-size: 13px;
 
  }

}


@media (max-width: 480px) {
  .map-pin__tag {
 visibility: hidden;
 
  }

}

/* ============================================================
   WHY XLC BARE METAL (Osmo-style product slider) — FULL WIDTH
   ============================================================ */

/* --- 基礎佈局 --- */
.xlc-osmo-section {
  position: relative;
  width: 100%;
  padding: 100px 0 180px;
  min-height: 320px;
  background-color: var(--white);
  overflow: visible;
  padding-bottom: 0;
}

.xlc-osmo__title {
  text-align: center;
  margin-bottom: 25px;
}

/* --- 頂部導航 (Pill Buttons) --- */
.xlc-nav-wrap {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 60px;
  flex-wrap: wrap;
  padding: 0 20px;
}

.xlc-nav-btn {
  background: #ffffff;
  color: #666666;
  border: none;
  padding: 12px 24px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.xlc-nav-btn:hover {
  background: #eaeaea;
}

.xlc-nav-btn.active {
  background: var(--purple);
  color: #ffffff;
}

/* --- Slider 容器 (overflow:hidden — only JS controls scrollLeft) --- */
/* Do NOT use scroll-behavior: smooth — it conflicts with JS scrollLeft at 60fps */
/* user-select + touch-action: prevent text highlight and allow vertical page scroll */
.xlc-viewport {
  width: 100%;
  overflow: hidden;
  scroll-behavior: auto;
  scrollbar-width: none;
  cursor: grab;
  padding-bottom: 210px;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  /* margin-bottom: -45px; */
  background: url(images/xlc-slider-bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}
.xlc-viewport:active {
  cursor: grabbing;
}
.xlc-viewport::-webkit-scrollbar {
  display: none;
}

.xlc-track {
  display: flex;
  align-items: center;
  padding: 0 calc(50vw - 210px);
}

/* --- 卡片外框 --- */
.xlc-card-wrapper {
  flex: 0 0 420px;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 20px;
}

@media (max-width: 900px) {
  .xlc-track {
    padding: 0 calc(50vw - 160px);
  }
  .xlc-card-wrapper {
    flex: 0 0 320px;
    height: 480px;
    margin: 0 16px;
  }
}

@media (max-width: 768px) {
  .xlc-osmo-section {
    padding: 60px 0 40px;
    padding-bottom: 0;
}
  .xlc-viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 40px;
    touch-action: pan-x pan-y;
  }
  .xlc-track {
    padding: 0 5vw;
  }
  .xlc-card-wrapper {
    flex: 0 0 auto;
    width: 90vw;
    max-width: 380px;
    height: 420px;
    margin: 0 10px;
  }
  .xlc-card {
    padding: 28px 24px 32px;
    transform-origin: center center;
  }
  .xlc-card-icon {
    font-size: 35px;
    top: 20px;
    right: 20px;
  }
  .xlc-card h3 {
    margin-bottom: 14px;
  }
  .xlc-card p {
    margin-bottom: 20px;
  }
  .xlc-card-tag {
    font-size: 10px;
    padding: 5px 10px;
    letter-spacing: 1px;
  }
  .xlc-btn-discover {
    padding: 10px 28px;
    font-size: 13px;
  }
  .xlc-avatar {
    width: 30px;
    height: 30px;
  }
  .xlc-nav-wrap {
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px;
  }
  .xlc-nav-btn {
    font-size: 12px;
    padding: 8px 16px;
  }
  .xlc-custom-cursor {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .xlc-card-wrapper {
    width: 88vw;
    max-width: 340px;
    height: 380px;
    margin: 0 8px;
  }
  .xlc-card {
    padding: 24px 20px 28px;
  }
}

/* --- 實體卡片 (負責視覺與 JS 旋轉動畫) --- */
.xlc-card {
  width: 100%;
  height: 100%;
  border-radius: 28px;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #ffffff;
  position: relative;
  transform-origin: center 120%;
  will-change: transform;
  transition: box-shadow 0.3s ease, opacity 0.15s ease;
  backface-visibility: hidden;
  -webkit-user-select: none;
  user-select: none;
}

.xlc-card-icon {
  position: absolute;
  top: 30px;
  right: 30px;
  font-size: 50px;
  color: inherit;
  opacity: 0.15;
  pointer-events: none;
  line-height: 1;
}

/* --- 顏色設定 --- */
.xlc-bg-purple {
  background-color: #00ffaa;
  color: black;
}
.xlc-bg-black { background-color: #111111; }
.xlc-bg-lime { background-color: var(--green); color: #111111; }
.xlc-bg-blue {
  background-color: #003aff;
}
.xlc-bg-red {
  background-color: #e7eaeb;
  color: var(--black);
}

/* --- 卡片內容排版 --- */
.xlc-card-tag {
  font-size: 11px;
  letter-spacing: 1.5px;
  font-weight: bold;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.2);
  padding: 6px 12px;
  border-radius: 6px;
  align-self: flex-start;
  margin-bottom: auto;
}
.xlc-bg-lime .xlc-card-tag { background: rgba(0, 0, 0, 0.1); }

.xlc-card h3 {
  font-size: clamp(24px, 4vw, 30px);
  line-height: 1.1;
  font-weight: 800;
  margin-bottom: 24px;
  letter-spacing: -1px;
}

.xlc-card p {
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.5;
  opacity: 0.9;
  margin-bottom: 40px;
}

.xlc-card-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  display: none;
}

.xlc-avatars { display: flex; gap: -10px; }
.xlc-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.1);
  margin-left: -10px;
}
.xlc-avatar:first-child { margin-left: 0; }
.xlc-bg-lime .xlc-avatar { border-color: rgba(0,0,0,0.3); background: rgba(0,0,0,0.1); }

.xlc-btn-discover {
  background: #ffffff;
  color: #000000;
  border: none;
  padding: 14px 36px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: transform 0.2s;
}
.xlc-btn-discover:hover { transform: scale(1.05); }
.xlc-bg-lime .xlc-btn-discover { background: #000000; color: #ffffff; }

/* --- DRAG 游標 (must not intercept pointer events) --- */
.xlc-custom-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 70px; height: 70px;
  background: var(--red);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  font-weight: bold;
  pointer-events: none !important;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 9999;
  display:none;
}
.xlc-osmo-section:hover .xlc-custom-cursor {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.xlc-osmo-section.touch-device .xlc-custom-cursor {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none !important;
}

/* --- Disable native HTML5 drag on slider content (prevents ghost drag) --- */
.xlc-viewport,
.xlc-viewport * {
  -webkit-user-drag: none;
}

/* ============================================================
   KEY CONNECTIVITY ADVANTAGES SECTION (.xlc-connectivity-section)
   ============================================================ */
   .xlc-connectivity-section {
    background: #0a1628;
    color: var(--white);
    padding: 100px 0 80px;
    position: relative;
    overflow: hidden;
    
}


.gaming-hero-section {
  text-align: center;
  position: relative;
  padding: 60px 0 30px;
}

.ecom-hero-section {
 
  padding: 60px 0 30px;
}

.ecom-hero-section .xlc-connectivity-intro p{margin-top: 20px;}

/* 背景層：只放底圖 + 轉色動畫 + grid 動畫，唔會遮住字同 button */
.gaming-hero-section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.gaming-hero-section__bg-image {
  position: absolute;
  inset: 0;
  background: url(images/gaming-bg.jpg) center / cover no-repeat;
  animation: hueShiftAlternate 3s ease-in-out infinite alternate;
}

@keyframes hueShiftAlternate {
  0% { filter: hue-rotate(0deg); }
  30% { filter: hue-rotate(30deg); }
  50% { filter: hue-rotate(-60deg); }
  100% { filter: hue-rotate(0deg); }
}


.gaming-hero-section__bg-image.ecom-hero-bg {
  background: url(images/ecom-bg.jpg) center / cover no-repeat;
  animation: hueShiftAlternate3 1s ease-in-out infinite alternate;
}

@keyframes hueShiftAlternate3 {
  0% { filter: hue-rotate(0deg); }
100% { filter: hue-rotate(-30deg); }
}

@keyframes hueShiftAlternate2 {
  0% { filter: hue-rotate(0deg); }
100% { filter: hue-rotate(-50deg); }
}

/* 背景光暈：減輕黑沉感 + 明顯呼吸動畫 */
@keyframes xlc-connectivity-glow-pulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.12);
  }
}
.xlc-connectivity-section::before {
  content: '';
  position: absolute;
  inset: -10%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 100% 70% at 50% -10%, rgba(0, 255, 102, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 85% 110%, rgba(0, 191, 255, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 60% 45% at 15% 95%, rgba(0, 255, 102, 0.12) 0%, transparent 45%);
  animation: xlc-connectivity-glow-pulse 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .xlc-connectivity-section::before {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .gaming-hero-section__bg-image.fintech-hero-bg {
    animation: none;
    filter: hue-rotate(10deg) saturate(1.05);
  }
  .gaming-hero-section__bg-image.streaming-hero-bg {
    animation: none;
    filter: hue-rotate(-25deg) saturate(1.08);
  }
}
.xlc-connectivity__inner {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
/* Neon cursor trail canvas: in section (not inner), background only, does not block interaction */
.xlc-connectivity-section > #connectivity-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* 80% 黑色透明層：疊在 canvas 上、內容下，不擋互動 */
.xlc-connectivity-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 12, 78, 0.65);
  z-index: 1;
  pointer-events: none;
}
.xlc-connectivity-intro,
.xlc-connectivity__head,
.xlc-connectivity-wrapper {
  position: relative;
  z-index: 2;
}
.xlc-connectivity__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.xlc-connectivity__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--green);
  border: 3px solid var(--white);
  box-sizing: border-box;
  position: absolute;
 
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--green);
  border: 4px solid #0B1C2A;
  box-shadow: 0 0 1px 2px rgba(255, 255, 255, 1);
  z-index: 2;
  box-sizing: border-box;
}
.xlc-connectivity__title {
  color: var(--white);
  font-weight: 700;
  margin: 0;
  font-size: clamp(26px, 5.5vw, 25px);
  line-height: 1.6;
  padding-left: 30px;
}
.xlc-connectivity__title-accent {
  /* color: var(--green); */
  background: linear-gradient(90deg, #00FF66 0%, #00BFFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

/* --- Apple-style premium intro (above tree) --- */
.xlc-connectivity-intro {
  text-align: center;
  padding: 0px 20px 80px;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.xlc-connectivity-intro h2,
.xlc-connectivity-intro h1,
.xlc-connectivity-intro .xlc-connectivity-intro__heading {
  font-size: clamp(40px, 6vw, 55px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  margin: 0;
}
.gaming-hero__tagline {
  text-align: center;
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 12px 0;
}
.gaming-hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}
.gaming-hero-section::after {
  display: none;
}
/* Grid 動畫只在 __bg 層，唔遮字 */
.gaming-hero-section__bg #gaming-hero-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  display: block;
}
/* 字同 button 自己一層，永遠喺最上 */
.gaming-hero-section .xlc-connectivity__inner {
  position: relative;
  z-index: 2;
}
/* 深色 hero 內 breadcrumb 改淺色 */
.gaming-hero-section .bms-hero__breadcrumb,
.gaming-hero-section .bms-hero__breadcrumb a,
.gaming-hero-section .bms-hero__breadcrumb-sep,
.gaming-hero-section .bms-hero__breadcrumb-current {
  color: rgba(255, 255, 255, 0.85);
}
.gaming-hero-section .bms-hero__breadcrumb a:hover {
  color: #fff;
  text-decoration: underline;
}
/* Get the Pricing 按鈕：此 section 深色底，改白框白字 */
.gaming-hero-section .btn--outline-dark {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}
.gaming-hero-section .btn--outline-dark:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
.facility-accordion__panel-subtitle {
  margin: 0 0 12px 0;
  font-weight: 600;
  color: var(--text-body);
}
.xlc-connectivity__subtitle {
  margin: 0 0 24px 0;
  padding-left: 50px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 720px;
}
.xlc-connectivity__tree-title {
  margin: 0 0 12px 0;
  padding-left: 50px;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
}
.xlc-connectivity__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 48px;
  padding-left: 50px;
}
.xlc-connectivity-intro .gradient-text {
  background: linear-gradient(90deg, #00FF66 0%, #76bdff 50%, #aa74ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /*display: inline-block;*/
}
.xlc-connectivity-intro p {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 400;
  line-height: 1.5;
  color: #fcfdff;
  max-width: 1000px;
  margin: 32px auto 0;
  text-shadow: 0 0 20px rgba(0, 0, 0, 1);
}
@media (max-width: 768px) {
  .xlc-connectivity-intro {
    padding: 60px 20px 40px;
    padding-top:30px;
  }
  .xlc-connectivity-intro h2 br {
    display: none;
  }
}

/* --- Tree Structure Lines --- */
.xlc-connectivity-wrapper {
  position: relative;
  padding-left: 50px;
  margin: 40px 0;
}
.tree-main-line {
  position: absolute;
  left: 7px;
  top: -12px;
  /* 止於最後一個 item 的彎曲連接點，不突出到底 */
  bottom: 80px;
  width: 2px;
  background-color: var(--white);
  z-index: 0;
}
.tree-item {
  position: relative;
  margin-bottom: 24px;
}
.tree-item:last-child {
  margin-bottom: 0;
}
.tree-item::before {
  content: '';
  position: absolute;
  left: -43px;
  top: -24px;
  height: calc(50% + 24px);
  width: 36px;
  border-left: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  border-bottom-left-radius: 12px;
  border-right: none;
  border-top: none;
  z-index: 0;
}
.tree-item:first-child::before {
  top: -12px;
  height: calc(50% + 12px);
}
.tree-horizontal-line {
  display: none;
}
/* 圓點：跟圖一 — 內層綠圓、中層深色環、外層光暈 */
.tree-dot {
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--green);
  border: 4px solid #0B1C2A;
  box-shadow: 0 0 1px 2px rgba(255, 255, 255, 1);
  z-index: 2;
  box-sizing: border-box;
}

/* --- Box & Grid Layout --- */
.tree-content-box {
  border: 1px solid var(--green);
  border-radius: 12px;
  padding: 30px 40px;
  display: grid;
  grid-template-columns: 250px 40px 1fr;
  align-items: center;
  gap: 20px;
}
.box-left-title h3 {
  margin: 0;
  font-weight: 600;
  color: var(--white);
}
.box-slash {
  width: 4px;
  height: 70px;
  background-color: #00ff3700;
  transform: skewX(-20deg);
  margin: 0 auto;
}
.box-right-content {
  color: var(--white);
  min-width: 0;
}
/* 圖二：一組一條斜線 — 每個 content-group 左側一條綠色斜線做 bullet */
.content-group {
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
}
.content-group:last-child {
  margin-bottom: 0;
}
.content-group::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 4px;
  height: 1.1em;
  background-color: var(--green);
  transform: skewX(-20deg);
}
.content-group h4 {
  margin: 0 0 4px 0;
  font-weight: 700;
  color: var(--white);
}
.content-group p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
}

/* --- Connectivity section: staggered box reveal (smooth, in-view only) --- */
.xlc-connectivity-section .xlc-connectivity__head {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.xlc-connectivity-section .xlc-connectivity-wrapper > .tree-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.xlc-connectivity-section.reveal-on-scroll--in-view .xlc-connectivity__head {
  opacity: 1;
  transform: translateY(0);
}
.xlc-connectivity-section.reveal-on-scroll--in-view .xlc-connectivity-wrapper > .tree-item {
  opacity: 1;
  transform: translateY(0);
}
.xlc-connectivity-section.reveal-on-scroll--in-view .xlc-connectivity-wrapper > .tree-item:nth-child(2) { transition-delay: 0.08s; }
.xlc-connectivity-section.reveal-on-scroll--in-view .xlc-connectivity-wrapper > .tree-item:nth-child(3) { transition-delay: 0.2s; }
.xlc-connectivity-section.reveal-on-scroll--in-view .xlc-connectivity-wrapper > .tree-item:nth-child(4) { transition-delay: 0.32s; }
.xlc-connectivity-section.reveal-on-scroll--in-view .xlc-connectivity-wrapper > .tree-item:nth-child(5) { transition-delay: 0.44s; }

@media (prefers-reduced-motion: reduce) {
  .xlc-connectivity-section .xlc-connectivity__head,
  .xlc-connectivity-section .xlc-connectivity-wrapper > .tree-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .xlc-connectivity-section.reveal-on-scroll--in-view .xlc-connectivity-wrapper > .tree-item:nth-child(n) {
    transition-delay: 0s;
  }
}

/* --- Mobile Responsive --- */
@media (max-width: 992px) {
  .xlc-connectivity-section {
    padding: 48px 0 56px;
  }
  .xlc-connectivity__head {
    margin-bottom: 24px;
  }
  .xlc-connectivity-wrapper {
    padding-left: 0;
    margin: 24px 0;
  }
  .tree-main-line,
  .tree-horizontal-line,
  .tree-dot {
    display: none;
  }
  .tree-item::before {
    display: none;
  }
  .tree-content-box {
    grid-template-columns: 1fr;
    padding: 24px;
    gap: 16px;
  }
  .box-slash {
    display: none;
  }
}

/* ============================================================
   DEDICATED BARE METAL SECTION
   ============================================================ */
   .dedicated-section {
    padding: 80px 0;
    background: var(--white);
    padding-top: 0;
}
.dedicated__inner { display: block; }
.dedicated__header {
  text-align: center;
  max-width: 960px;
  margin: 0 auto 56px;
}
.dedicated__title {
  color: var(--black);
  margin-bottom: 18px;
}
.dedicated__desc {
  color: var(--text-body);
}

/* Features header row */
.dedicated__features-header {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 32px;
  margin-bottom: 40px;
  padding: 0;
  margin: 0 auto;
  max-width: 1006px;
  margin-top: 5%;
  margin-bottom: 5%;
  align-items: center;
}
.dedicated__features-left {
  display: flex;
  align-items: center;
  gap: 0;
}
.dedicated__features-title {
  font-family: var(--font-h);
  font-weight: 500;
  font-size: 28px;
  line-height: 34px;
  color: var(--black);
  max-width: 340px;
}
.dedicated__features-right {
  font-family: var(--font-b);
  font-weight: 400;
  font-size: 16px;
  line-height: 25px;
  color: var(--black);
  max-width: 580px;
  padding-top: 4px;
}

/* Two Card Layout */
.dedicated__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Light Card */
.dedicated-card--light {
  background: var(--bg-light);
  border-radius: 15px 0 0 15px;
  position: relative;
  padding: 32px;
}
.dedicated-card__divider-h {
  position: absolute;
  top: 50%;
  left: 32px;
  right: 32px;
  height: 1px;
  background: var(--white);
}
.dedicated-card__divider-v {
  position: absolute;
  top: 32px;
  bottom: 32px;
  left: 50%;
  width: 1px;
  background: var(--white);
}
.dedicated-card__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0;
  height: 100%;
  min-height: 440px;
}
.dedicated-card__cell {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dedicated-card__icon { flex-shrink: 0; }
.dedicated-card__icon--sm img { width: 42px; height: 42px; }
.dedicated-card__text {
  font-family: var(--font-b);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-dark);
  max-width: 220px;
}

/* Dark Card */
.dedicated-card--dark {
  background: linear-gradient(179.91deg, rgba(0,0,0,0) 67.71%, rgba(0,0,0,0.92) 79.73%, #000000 99.92%), var(--navy-deep);
  border-radius: 0 15px 15px 0;
  position: relative;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.dedicated-card__img-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0a0e1a 0%, #001525 40%, var(--navy-deep) 100%);
  z-index: 0;
  background-image: url(images/xlc-hompage-img1.jpg);
  background-position: center;
  background-size: cover;
}
.dedicated-card__dark-gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.75) 10%, rgba(0, 0, 0, 0.4) 20%, rgba(0, 0, 0, 0.12) 36%, transparent 85%);
}
.dedicated-card__dark-content {
  position: relative;
  z-index: 2;
  padding: 32px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dedicated-card__dark-label {
  font-family: var(--font-h);
  font-weight: 500;
  font-size: 28px;
  line-height: 34px;
  color: var(--white);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.dedicated-card__learn-more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--white);
  font-family: var(--font-b);
  font-weight: 500;
  font-size: 18px;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.25s ease, gap 0.25s ease;
}
.dedicated-card__learn-more:hover {
  color: var(--red);
  gap: 18px;
}
.dedicated-card__learn-more:hover .dedicated-card__learn-more-arrow {
  transform: translateX(4px);
  color: var(--red);
}
.dedicated-card__learn-more-arrow {
  display: inline-flex;
  color: var(--red);
  transition: transform 0.25s ease, color 0.25s ease;
}
.dedicated-card__learn-more-arrow svg {
  display: block;
}

/* ============================================================
   HIGH PERFORMANCE CPUs SECTION (Dark)
   ============================================================ */
   .cpu-section {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), var(--navy);
    border-radius: var(--radius-xl);
    margin: 0 3%;
    padding: 120px 0;
    position: relative;
    overflow: hidden;
   /* background-image: url(images/img-cpu-bg2.png);
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;*/
}
.cpu__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* Header: same row — left = copy, right = AMD / Intel */
.cpu__header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}
.cpu__title {
  color: var(--white);
  margin-bottom: 0px;
}
.cpu__subtitle {
  font-family: var(--font-h);
  font-weight: 500;
  font-size: 22px;
  line-height: 28px;
  color: var(--green);
  margin-bottom: 10px;
}
.cpu__desc {
  color: var(--white);
}

.cpu__header-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}
.cpu-type {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--white);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  background: #25ff000a;
  border: 1px solid #00ff0054;
}
.cpu-type:hover {
  background: rgba(255,255,255,0.08);
}
.cpu-type__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  flex-shrink: 0;
}
.cpu-type__dot--green { background: var(--green); }
.cpu-type__name {
  font-family: var(--font-h);
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  flex: 1;
}
.cpu-type__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: rgba(255,255,255,0.15);
  color: var(--white);
  transition: background 0.2s ease, color 0.2s ease;
}
.cpu-type--active .cpu-type__btn {
  background: var(--green);
  color: var(--green-ink);
}
.cpu-type--active .cpu-type__name { color: var(--white); }

/* Product list: own container, full width */
.cpu__product-list {
  width: 100%;
  margin-top: 8px;
  position: relative;
  min-height: 320px;
}
.cpu__rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: opacity 0.4s ease;
}
.cpu__rows:not(.is-visible) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
}
.cpu__rows.is-visible {
  opacity: 1;
  position: relative;
}

/* CPU Spec Rows */
.cpu-row {
  display: grid;
  grid-template-columns: 8px 1.2fr 3fr auto auto;
  align-items: center;
  gap: 14px;
  background: rgba(0,31,53,0.75);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 16px;
  padding: 18px 22px;
  opacity: 1;
  cursor: pointer;
  transition: opacity 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.cpu-row:hover {
  opacity: 1;
  border-color: var(--green);
  transform: translateY(-2px);
  box-shadow: 0 0 0 0.2px var(--green), 0 0 20px rgba(0,255,55,0.25);
}
.cpu-row:hover .cpu-row__bar { background: var(--green); }
.cpu-row:hover .cpu-row__amount,
.cpu-row:hover .cpu-row__period { color: var(--green); }
.cpu-row:hover .cpu-row__cta {
  background: var(--white)!important;
  color: var(--green-ink);
}
.cpu-row--highlighted {
  border-color: var(--green);
  opacity: 1;
  animation: cpuRowGlow 2.5s ease-in-out infinite;
}
.cpu-row--highlighted:hover {
  border-color: var(--green);
  animation: cpuRowGlow 2.5s ease-in-out infinite;
}
@keyframes cpuRowGlow {
  0%, 100% { box-shadow: 0 0 0 0.2px var(--green), 0 0 12px rgba(0,255,55,0.2); }
  50%      { box-shadow: 0 0 0 0.2px var(--green), 0 0 28px rgba(0,255,55,0.4); }
}
.cpu-row__bar {
  width: 5px;
  height: 50px;
  background: var(--red);
  border-radius: 100px;
  transform: rotate(22.11deg);
  flex-shrink: 0;
  transition: background 0.25s ease;
}
.cpu-row--highlighted .cpu-row__bar { background: var(--green); }
.cpu-row__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cpu-row__label {
  font-family: var(--font-b);
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: var(--text-dim);
}
.cpu-row__name {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: var(--white);
}
.cpu-row__specs {
  font-family: var(--font-b);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-light);
}
.cpu-row__desc {
  color: var(--white);
  max-width: 513px;
}
.cpu-row__price {
  text-align: right;
}
.cpu-row__price-label {
  display: block;
  font-family: var(--font-b);
  font-weight: 500;
  font-size: 12px;
  line-height: 27px;
  color: var(--text-dim);
}
.cpu-row__price-value {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
}
.cpu-row__amount {
  font-family: var(--font-b);
  font-weight: 700;
  font-size: 35px;
  line-height: 28px;
  color: var(--white);
  letter-spacing: -1.5px;
}
.cpu-row--highlighted .cpu-row__amount { color: var(--green); }
.cpu-row--highlighted .cpu-row__period { color: var(--green); }
.cpu-row__period {
  font-family: var(--font-b);
  font-weight: 500;
  font-size: 14px;
  line-height: 27px;
  color: var(--white);
}
.cpu-row__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  transition: background 0.2s ease, color 0.2s ease;
}
.cpu-row__cta--green {
  background: var(--green);
  color: var(--green-ink);
}
.cpu-row:hover .cpu-row__cta:not(.cpu-row__cta--green) {
  background: rgba(255,255,255,0.2);
}

/* ============================================================
   CARRIER-CLASS GLOBAL BACKBONE
   ============================================================ */
.backbone-section {
  padding: 80px 0;
  background: var(--white);
}

/* Solutions banner: red layer overlaps right image; image = CSS background; arrow below image; two black triangles from red diagonal cut */
.solutions-banner {
  margin-bottom: 40px;
  background: #0a0a0a00;
  border-radius: 12px;
  overflow: visible;
}
.solutions-banner__inner {
  display: flex;
  align-items: stretch;
  min-height: 200px;
  position: relative;
}
/* Red block on top: left rounded, right = diagonal cut (two black triangles) */
.solutions-banner__red {
  flex: 0 0 auto;
  min-width: 320px;
  max-width: 55%;
  background: var(--red);
  border-radius: 0px 15px 0 15px;
  padding: 10px 60px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  position: relative;
  z-index: 2;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%);
  margin-top: -25px;
  align-content: flex-start;
}
.solutions-banner__title,
.solutions-banner__subtitle {
  margin: 0;
  color: #fff;
  font-weight: 700;
  line-height: 1.2;
}
.solutions-banner__title {
  font-size: clamp(22px, 2.8vw, 32px);
  text-align: left;
}
.solutions-banner__subtitle {
  font-size: clamp(22px, 2.8vw, 32px);
  margin-top: 5px;
  font-weight: 300;
  text-align: left;
}
/* Right column: bg (image as background) + arrow below */
.solutions-banner__right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.solutions-banner-style .solutions-banner__inner {
 
  flex-direction: row-reverse;
}

.solutions-banner-style .solutions-banner__bg {
  flex: 1;
  min-height: 200px;
  background: url(images/solutions/game-tag2.png) top / cover no-repeat;
  border-radius: 15px 0px 0px 15px;
}


.solutions-banner-style  .solutions-banner__red {
 
  border-radius: 15px 0px 15px 0px;
 
}


.solutions-banner__bg {
  flex: 1;
  min-height: 200px;
  background: url(images/solutions/game-tag1.png) top / cover no-repeat;
  border-radius: 0 15px 15px 0;
}

.solutions-banner-ecom__bg {
  
  background: url(images/solutions/ecom-tag1.jpg) center / cover no-repeat;
  min-height: 230px;

}


.solutions-banner__arrow {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  padding-right: 12px;
  padding-top: 4px;
}
.solutions-banner__arrow img {
  width: auto;
  height: 28px;
  object-fit: contain;
  display: block;
}
@media (max-width: 768px) {
  .solutions-banner__inner {
    flex-direction: column;
    min-height: 0;
  }
  .solutions-banner__red {
    min-width: 100%;
    max-width: 100%;
    border-radius: 12px 12px 0 0;
    padding: 24px 20px;
    clip-path: none;
  }
  .solutions-banner__right {
    min-height: 0;
    display: none;
}
  .solutions-banner__bg {
    min-height: 220px;
    border-radius: 0;
  }
  .solutions-banner__arrow img {
    height: 24px;
  }
}

/* ========== Section 2: Tailored Gaming Server Solutions (copy solutions-banner, image left / red right) ========== */
.tailored-section {
  background: var(--white);
  margin-top: 30px;
}
/* Top banner: same style as solutions-banner, reversed — image left, red right */
.tailored-banner {
  margin-bottom: 0;
  background: #0a0a0a;
  border-radius: 12px;
  overflow: visible;
}
.tailored-banner__inner {
  display: flex;
  align-items: stretch;
  min-height: 280px;
  position: relative;
}
.tailored-banner__left {
  flex: 1;
  min-width: 0;
  background: url(images/home-hareware.png) center / cover no-repeat;
  border-radius: 12px 0 0 12px;
  position: relative;
  z-index: 1;
}
.tailored-banner__red {
  flex: 0 0 auto;
  min-width: 320px;
  max-width: 55%;
  background: var(--red);
  border-radius: 0 12px 0 12px;
  padding: 32px 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  position: relative;
  z-index: 2;
  clip-path: polygon(8% 50%, 0 0, 0 100%, 100% 100%, 100% 0);
}
.tailored-banner__title,
.tailored-banner__subtitle {
  margin: 0;
  color: #fff;
  font-weight: 700;
  line-height: 1.2;
}
.tailored-banner__title {
  font-size: clamp(22px, 2.8vw, 32px);
}
.tailored-banner__subtitle {
  font-size: clamp(18px, 2.2vw, 26px);
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 400;
}
/* Bottom: Fully Customizable (left text + right bg image) */
.tailored-config {
  padding: 64px 0;
  background: var(--white);
  padding-top: 30px;
  padding-bottom:100px;
}
.tailored-config__container {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: center;
}


.ecom-backbone-section {

  padding-bottom: 20px;
}


.ecom-tailored-config__container {
  
  grid-template-columns: 1.3fr 1fr;
  gap: 80px
}

.ecom-tailored-config__container .tailored-config__left {
    max-width: 100%;
}


.tailored-config__left {
  max-width: 560px;
}
.tailored-config__heading {
  margin: 0;
  color: var(--black);
  font-weight: 700;
  line-height: 1.2;
}
.tailored-config__heading--purple {
  margin: 4px 0 0 0;
  color: var(--purple);
  font-weight: 700;
  line-height: 1;
}
.tailored-config__intro {
  margin: 20px 0 0 0;
  color: var(--text-body);
  line-height: 1.5;
  max-width: 100% !important;
}
.tailored-config__list {
  margin: 20px 0 40px 0;
  padding: 0 0 0 24px;
  list-style: none;
}
.tailored-config__list li {
  position: relative;
  padding-left: 0px;
  margin-bottom: 10px;
}
.tailored-config__list li::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--purple);
}
.tailored-config__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}
.tailored-config__right {
  min-height: 500px;
  background: url(images/solutions/game-custom.jpg) center / cover no-repeat;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.tailored-config__right.ecom-bg {
  background: url(images/solutions/ecom-custom2.jpg) top / cover no-repeat;
}

/* ── Fintech solution page (mirrors eCommerce layout, own assets / tint) ── */
.fintech-hero-section {
  padding: 60px 0 30px;
}
.fintech-hero-section .xlc-connectivity-intro p {
  margin-top: 20px;
}
.gaming-hero-section__bg-image.fintech-hero-bg {
  background: url(images/fintech-bg.jpg) center / cover no-repeat;
  animation: hueShiftFintechHero 1s ease-in-out infinite alternate;
}
@keyframes hueShiftFintechHero {
  0% { filter: hue-rotate(0deg); }
100% { filter: hue-rotate(-100deg); }
  /*0% { filter: hue-rotate(-15deg) saturate(1.05) brightness(0.95); }
  100% { filter: hue-rotate(25deg) saturate(1.1) brightness(1); }*/
}
.solutions-banner-fintech__bg {
  background: url(images/solutions/fin-tag1.jpg) center / cover no-repeat;
  min-height: 230px;
  /*filter: hue-rotate(-25deg) saturate(1.15);*/
}
.fintech-backbone-section {
  padding-bottom: 20px;
}
.fintech-tailored-config__container {
  grid-template-columns: 1.3fr 1fr;
  gap: 80px;
}
.fintech-tailored-config__container .tailored-config__left {
  max-width: 100%;
}
.tailored-config__right.fintech-bg {
  background: url(images/solutions/fintech-custom.jpg) top / cover no-repeat;
  filter: hue-rotate(15deg) saturate(0.95);
}

/* ── Video streaming solution page ── */
.streaming-hero-section {
  padding: 60px 0 30px;
}
.streaming-hero-section .xlc-connectivity-intro p {
  margin-top: 20px;
}
.gaming-hero-section__bg-image.streaming-hero-bg {
  background: url(images/video-bg.jpg) center / cover no-repeat;
  animation: hueShiftStreamingHero 6s ease-in-out infinite alternate;
}
@keyframes hueShiftStreamingHero {
  0% { filter: hue-rotate(-40deg) saturate(1.15) brightness(0.9); }
  100% { filter: hue-rotate(15deg) saturate(1.05) brightness(1); }
}
.solutions-banner-streaming__bg {
  background: url(images/solutions/video-tag1.jpg) center / cover no-repeat;
  min-height: 230px;
}
.streaming-backbone-section {
  padding-bottom: 20px;
}
.streaming-tailored-config__container {
  grid-template-columns: 1.3fr 1fr;
  gap: 80px;
}
.streaming-tailored-config__container .tailored-config__left {
  max-width: 100%;
}
.tailored-config__right.streaming-bg {
  background: url(images/solutions/video-custom.jpg) center / cover no-repeat;
  filter: hue-rotate(-18deg) saturate(2);
}

@media (max-width: 992px) {
  .tailored-banner__inner {
    flex-direction: column;
    min-height: 0;
  }
  .tailored-banner__left {
    min-height: 220px;
    border-radius: 12px 12px 0 0;
  }
  .tailored-banner__red {
    min-width: 100%;
    max-width: 100%;
    border-radius: 0 0 12px 12px;
    padding: 24px 20px;
    clip-path: none;
  }
  .tailored-config__container {
    grid-template-columns: 1fr;
  }
  .tailored-config__right {
    min-height: 280px;
    order: -1;
  }
}

/* ========== Solutions page (gaming): responsive — padding, margin, alignment, font-size ========== */
@media (max-width: 992px) {
  .gaming-hero-section {
    padding: 48px 24px 40px;
  }
  .gaming-hero-section .xlc-connectivity__inner {
    padding-left: 20px;
    padding-right: 20px;
  }
  .gaming-hero-section .xlc-connectivity-intro {
    padding: 0 20px 56px;
  }
  .backbone-section--solutions {
    padding: 56px 0;
  }
  .backbone-section--solutions .backbone__header {
    margin-bottom: 32px;
  }
  .tailored-section {
    margin-top: 24px;
  }
  .tailored-config {
    padding: 48px 0 80px;
  }
  .tailored-config__container {
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }

  .tailored-config__left {
    max-width: 100%;
  }
  .tailored-config__intro{text-align: left !important;}
  
}

@media (max-width: 768px) {
  .gaming-hero-section {
    padding: 32px 16px 28px;
    text-align: center;
  }
  .gaming-hero-section .xlc-connectivity__inner {
    padding-left: 16px;
    padding-right: 16px;
  }
  .gaming-hero-section .xlc-connectivity-intro {
    padding: 0 16px 40px;
  }
  .gaming-hero-section .xlc-connectivity-intro h2,
  .gaming-hero-section .xlc-connectivity-intro h1,
  .gaming-hero-section .xlc-connectivity-intro .xlc-connectivity-intro__heading {
    font-size: clamp(26px, 8vw, 38px);
  }
  .gaming-hero__cta {
    margin-top: 24px;
    gap: 12px;
    justify-content: center;
  }
  .bms-sticky-nav .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .bms-sticky-nav {
    padding: 12px 0;
  }
  .solutions-banner {
    margin-bottom: 24px;
  }
  .solutions-banner__red {
    padding: 20px 20px;
    border-radius: 0;
    margin-bottom: -25px;
}

  .solutions-banner-style .solutions-banner__red {
    border-radius: 0;
    padding: 35px;
}
  .solutions-banner__title,
  .solutions-banner__subtitle {
    font-size: clamp(18px, 4.5vw, 24px);
  }
  .backbone-section--solutions {
    padding: 40px 0;
    padding-top: 30px !important;
    padding-bottom: 0 !important;
}

.tailored-config__left {
  max-width: 100%;
}

  .backbone-section--solutions .container{
    padding: 0;
  }

  .backbone-section--solutions .backbone__header {
    margin-bottom: 24px;
  }
  .backbone-section--solutions .backbone__title,
  .backbone-section--solutions .backbone__subtitle {
    font-size: 26px;
    line-height: 1.3;
  }
  .backbone-section--solutions .backbone__row {
    padding: 30px 30px;
    gap: 20px;
}
  .backbone-section--solutions .backbone__row-left {
    text-align: left;
  }
  .backbone-section--solutions .backbone__row-title,
  .backbone-section--solutions .backbone__row-desc {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
  .tailored-section {
    margin-top: 16px;
  }
  .tailored-config {
    padding: 30px;
    padding-top: 0px;
    margin-top: 50px;
}
  .tailored-config__container {
    gap: 28px;
    padding-left: 16px;
    padding-right: 16px;
  }

 .tailored-section .container{padding:0}


  .tailored-config__left {
    max-width: 100%;
    text-align: center;
  }
  .tailored-config__heading, .tailored-config__heading--purple {
    font-size: 26px;
    line-height: 1.25;
    text-align: left;
}
  .tailored-config__intro {
    text-align: left !important;
    margin-top: 16px;
}
  .tailored-config__list {
    margin: 16px 0 28px;
    padding-left: 24px;
    text-align: left;
   
   
    margin-bottom: 45px;
}
  .tailored-config__cta {
    justify-content: center;
    margin-top: 20px;
  }
  .tailored-banner__title,
  .tailored-banner__subtitle {
    font-size: clamp(18px, 4.5vw, 24px);
  }
  .tailored-banner__red {
    padding: 20px 24px;
  }

  .gaming-hero-section__bg-image {
   
    background-size: 257% ;
    
}


}


@media (max-width: 470px) {
  .gaming-hero-section__bg-image {
      background-size: 345%;
  }
}


.backbone__header {
  text-align: center;
  margin-bottom: 40px;
}
.backbone__title {
  color: var(--black);
}
.backbone__subtitle {
  color: var(--purple);
}
.backbone__divider {
  height: 1px;
  background: var(--border);
  margin: 0 0;
}
.backbone__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding: 48px 0;
  align-items: start;
}

.backbone-section--solutions .backbone__row {
  grid-template-columns: 1fr 1.5fr;
  align-items: center;
}


.backbone__row-left {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}


.backbone-section--solutions  .backbone__row-left {
 
  align-items: center;
}


.backbone__row-left .red-bar {
  margin-left: 35px;
  margin-right: 0;
}
.backbone__row-content { flex: 1; }
.backbone__category {
  display: block;
  font-family: var(--font-h);
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
  color: #6f6f6f;
  margin-bottom: 5px;
}
.backbone__row-title {
  font-family: var(--font-h);
  font-weight: 500;
  font-size: 28px;
  line-height: 34px;
  color: var(--black);
  margin-bottom: 10px;
  max-width: 500px;
}
.backbone__row-desc {
  font-family: var(--font-b);
  font-weight: 400;
  font-size: 16px;
  line-height: 25px;
  color: var(--black);
  max-width: 480px;
}
.backbone__row-right { display: block; }
.backbone__feature-list {
  position: relative;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.backbone__feature-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 8px 0;
  font-family: var(--font-h);
  font-weight: 500;
  font-size: 17px;
  line-height: 28px;
  color: var(--black);
  position: relative;
}

/* Dot-wrap：抄 MAP 紫色版 — 普通=空心深紫 border，active=實心紫 + 邊框圈 signal 動畫 */
.backbone__dot-wrap {
  position: relative;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 5px;
}
.backbone__feature-item--active .backbone__dot-wrap::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  border: 2px solid var(--purple);
  border-radius: 50%;
  animation: backboneSignal 1.5s ease-out infinite;
  pointer-events: none;
}
@keyframes backboneSignal {
  0% { transform: scale(1); opacity: 0.85; }
  100% { transform: scale(2.2); opacity: 0; }
}
.backbone__dot, .backbone__dot--purple {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid rgb(255 0 0);
    flex-shrink: 0;
    transition: background 0.4s ease, border-color 0.4s ease;
}
.backbone__feature-item--active .backbone__dot--purple {
  background: var(--purple);
  border-color: var(--purple);
}
/* 連續直線：由圓點垂直中心拉到下一項圓點中心（對齊 padding + dot-wrap margin + 半個 marker） */
.backbone__feature-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 8px;
  top: calc(8px + 5px + 9px);
  width: 2px;
  height: 100%;
  background: rgba(69, 0, 167, 0.2);
  pointer-events: none;
  z-index: 0;
}
.backbone__feature-item .backbone__dot-wrap {
  z-index: 1;
}
.backbone__feature-item > span:last-child {
  position: relative;
  z-index: 1;
}
.backbone__feature-item--active { color: var(--purple); }

/* ============================================================
   ELITE PARTNERS SECTION (layout 100% per reference)
   ============================================================ */
.partners-section {
    padding: 0 0 60px;
    margin-top: 50px;
}
.partners__inner {
  display: grid;
  grid-template-columns: 500px 1fr;
  max-width: var(--container);
  margin: 0 auto;
  gap: 0;
  overflow: visible;
  position: relative;
  padding: 10px 25px;
}

/* Left: Red banner — left rounded, right angled with black notch at bottom */
.partners__red-card {
  background: var(--red);
  border-radius: 12px 0 0 12px;
  padding: 20px 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 16px) 100%, 0 100%, 0 0); */
  margin-right: -42px;
  margin-top: -50px;
  padding-right: 50px;
  border-radius: 8px 20px;
  margin-bottom: 50px;
}
.partners__red-title {
  color: var(--white);
  text-align: center;
  position: relative;
  z-index: 1;
}
.partners__notch--black {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 20px 16px;
  border-color: transparent transparent rgba(21, 21, 21, 0.5) transparent;
}

/* Right: White panel — slider + red notch bottom-right */
.partners__logos-card {
  background: var(--white);
  border-radius: 0 15px 27px 0;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  position: relative;
  overflow: hidden;
  padding-top: 30px;
  border-radius: 8px 20px;
}
.partners__notch--red {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  /*border-style: solid;
  border-width: 0 0 16px 14px;
  border-color: transparent transparent var(--red) transparent;*/
}

/* Logo slider track (like promo) */
.partners__track {
  display: flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  gap: 0;
  scrollbar-width: none;
}
.partners__track::-webkit-scrollbar { display: none; }
.partners__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-width: 0;
  backface-visibility: hidden;
}
.partners__logos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 32px;
  align-items: stretch;
  justify-items: center;
}
.partners__logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 64px;
  max-height: 64px;
  padding: 8px 12px;
  box-sizing: border-box;
}
.partners__logo-img {
  max-width: 120px;
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
}

/* Slider bullets: active = red pill, inactive = gray circles (like promo / ref image) */
.partners__dots {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding-top: 16px;
}
.partners__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot-idle);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease, width 0.3s ease;
}
.partners__dot:hover {
  background: var(--dot-inactive);
  transform: scale(1.2);
}
.partners__dot--active {
  background: var(--red);
  width: 24px;
  border-radius: 4px;
}

/* Arrows (like promo: show on hover near edges, follow cursor Y) */
.partners__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 0, 0, 0.92);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, background 0.2s ease, transform 0.2s ease;
}
.partners__arrow--show {
  opacity: 1;
  pointer-events: auto;
}
.partners__arrow:hover {
  background: rgba(200, 0, 0, 1);
  box-shadow: 0 4px 20px rgba(255, 0, 0, 0.5);
  transform: translateY(-50%) scale(1.1);
}
.partners__arrow:active { transform: translateY(-50%) scale(0.95); }
.partners__arrow[id="partners-arrow-left"] { left: 12px; }
.partners__arrow[id="partners-arrow-right"] { right: 12px; left: auto; }

/* ============================================================
   PRECISION TUNED / WORKLOADS SECTION
   ============================================================ */
.workload-section {
  padding: 80px 0;
  background: linear-gradient(180deg, var(--bg-card) 0%, #FFFFFF 100%);
}
.workload__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 0 80px;
  align-items: start;
}

.workload__col-left {
  display: flex;
  flex-direction: column;
}
.workload__col-right {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.workload__title {
  line-height: 56px;
  color: var(--black);
  margin-bottom: 20px;
}
.workload__desc {
  font-family: var(--font-b);
  font-weight: 400;
  font-size: 16px;
  line-height: 25px;
  color: var(--black);
  max-width: 480px;
  margin-bottom: 25px;;
}

/* Right column: Image area */
.workload__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--navy-deep);
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.workload__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.workload__img--active {
  opacity: 1;
}

.workload__solutions { display: flex; flex-direction: column; }

.workload__solution-panel {
  display: none; /* desktop: right column shows detail; panel hidden */
}
.workload__solution {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 8px 16px 20px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease;
  border-radius: 0;
  position: relative;
  border-top: 1px solid #D4D4D4;
}
.workload__solution-item:last-child .workload__solution {
  border-bottom: 1px solid #D4D4D4;
}
.workload__solution:hover {
  background: rgba(69,0,167,0.03);
}
.workload__solution:hover .solution-name { color: var(--purple); }
.workload__solution:hover .solution-dot { background: var(--purple); border-color: var(--purple); }
.solution-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--black);
  border: 2px solid var(--black);
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.workload__solution--active .solution-dot {
  background: var(--purple);
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(69, 0, 167, 0.25);
}
.workload__solution--active .solution-name {
  color: var(--purple);
  font-weight: 600;
}
.solution-name {
  font-family: var(--font-h);
  font-weight: 500;
  font-size: 18px;
  line-height: 30px;
  color: var(--black);
  flex: 1;
  transition: color 0.2s ease;
}
.solution-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(69, 0, 167, 0.1);
  color: var(--purple);
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.workload__solution--active .solution-btn {
  background: var(--purple);
  color: var(--white);
}
.workload__solution:hover .solution-btn {
  transform: translateX(4px);
}
/* Progress bar on left edge of each solution item */
.solution-progress {
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: rgba(69, 0, 167, 0.1);
  border-radius: 100px;
  overflow: hidden;
}
.solution-progress__fill {
  display: block;
  width: 100%;
  height: 0%;
  background: var(--purple);
  border-radius: 100px;
  transition: height 5s linear;
}
.workload__solution--active .solution-progress {
  background: rgba(69, 0, 167, 0.15);
}

/* Solution detail panels */
.workload__details-wrap {
  position: relative;
  min-height: 120px;
}
.workload__detail {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.workload__detail--active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
}
.workload__detail-bar {
  display: block;
  width: 5px;
  min-height: 80px;
  background: var(--red);
  border-radius: 100px;
  transform: rotate(12deg);
  flex-shrink: 0;
  margin-top: 4px;
}
.workload__detail-body {
  flex: 1;
}
.workload__detail-title {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 28px;
  line-height: 34px;
  color: var(--black);
  margin-bottom: 12px;
}
.workload__detail-desc {
  line-height: 24px;
  color: var(--text-body);
  max-width: 600px;
}
.workload__detail-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  flex-shrink: 0;
  margin-top: 8px;
  transition: transform 0.2s ease;
}
.workload__detail-link:hover {
  transform: translateX(6px);
}

/* ============================================================
   CUSTOMER TESTIMONIALS
   ============================================================ */
   .testimonials-section {
    padding: 80px 0 80px;
    background: var(--bg-soft);
    margin-bottom: 0px;
}
.testimonials__header {
  text-align: center;
  margin-bottom: 0px;
}
.testimonials__title {
 /* font-weight: 400;
  line-height: 56px;
  color: var(--black);*/
  margin-bottom: 16px;
}
.testimonials__title span {
  color: var(--purple);
  font-weight: 700;
}
.testimonials__subtitle {
  font-family: var(--font-b);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-subtle);
  margin-bottom: 24px;
}

/* Trustpilot Badge */
.trustpilot-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto;
  display: none;
}
.trustpilot-badge__excellent {
  font-family: var(--font-rev);
  font-weight: 700;
  font-size: 13px;
  color: var(--black);
}
.trustpilot-badge__count {
  font-family: var(--font-rev);
  font-weight: 400;
  font-size: 13px;
  color: var(--black);
}
.trustpilot-badge__logo {
  display: flex;
  align-items: center;
  gap: 4px;
}
.trustpilot-badge__logo span {
  font-family: var(--font-rev);
  font-weight: 700;
  font-size: 13px;
  color: var(--black);
}

/* Review slider: same row scroll as promo (#testimonials-track) */
.testimonials__slider {
  position: relative;
  margin: 0 auto;
  padding: 0;
  padding-top: 12px;
  padding-bottom: 8px;
}
.testimonials-section .testimonials__promo-track .review-card {
  flex: 0 0 320px;
  min-width: 320px;
  max-width: 320px;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  user-select: none !important;
}

/* Paged testimonials (e.g. dedicated-storage-server.html) */
.testimonials__viewport {
  position: relative;
  overflow: hidden;
  box-sizing: content-box;
  padding: 12px 0 24px 0;
  min-height: 320px;
}
.testimonials__slider .testimonials__track {
  position: relative;
  width: 100%;
  min-height: 320px;
}
.testimonials__page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 24px;
  transform: translateX(100%);
  pointer-events: none;
  will-change: transform;
  flex-wrap: wrap;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 30px;
}
.testimonials__page--active {
  pointer-events: auto;
  transform: translateX(0);
}
.testimonials__page--animating {
  transition: transform 0.45s cubic-bezier(.4, 0, .2, 1);
}
.testimonials__page--dragging {
  transition: none;
}
.testimonials__page .review-card {
  flex: 0 0 calc((100% - 96px) / 5);
  min-width: 0;
  max-width: none;
}

/* ── Fancy Review Card ── */
.review-card {
  min-width: 0;
  min-height: 310px;
  background: var(--white);
  border-radius: 18px;
  padding: 0 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 12px 8px rgba(0,0,0,0.06);
  transition: transform 0.35s cubic-bezier(.22,.68,0,1.2), box-shadow 0.35s ease;
}
.review-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 8px 24px rgba(69,0,167,0.12), 0 20px 8px rgba(0,0,0,0.1);
}
.review-card__accent {
  height: 4px;
  background: linear-gradient(90deg, var(--purple-light) 0%, var(--purple) 50%, var(--red-dark) 100%);
  margin: 0 -22px;
  border-radius: 0;
}
.review-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
}
.review-card__top-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.review-card__quote {
  flex-shrink: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.review-card__quote .fa-quote-left {
  font-size: 26px;
  background: linear-gradient(135deg, var(--purple-light) 0%, var(--purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.55;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.review-card:hover .review-card__quote .fa-quote-left {
  opacity: 1;
  transform: scale(1.15) rotate(-4deg);
}
.review-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple-light) 0%, var(--purple) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  display: none;
}
.review-card__avatar::after {
  content: attr(data-initials);
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  letter-spacing: 0.5px;
}
.review-card__source {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}
.review-card__source-logo {
  display: block;
  width: auto;
  max-height: 20px;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.5);
  transition: all 0.3s ease;
}
.review-card:hover .review-card__source-logo {
  filter: grayscale(0%) opacity(1);
}
.review-card__title {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  color: var(--black);
}
.review-card__stars {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.review-card__star-row {
  display: flex;
  align-items: center;
}
.review-card__date {
  font-family: var(--font-rev);
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  color: var(--text-hint);
}
.review-card__body {
  font-family: var(--font-b);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--text-mid);
  flex: 1;
}
.review-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-field);
  padding-top: 10px;
  margin-top: 4px;
}
.review-card__author {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 14px;
  line-height: 22px;
  color: var(--black);
}
.review-card__verified {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-rev);
  font-weight: 500;
  font-size: 11px;
  color: var(--green-tp);
}

/* Testimonials index: .promo__dots (JS). Subpages: static .testimonials__dots */
.testimonials__dots {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-top: 0;
  padding-bottom: 8px;
}
.testimonials__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #D4D4D4;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s ease, width 0.3s ease, border-radius 0.3s ease;
}
.testimonials__dot:hover { background: var(--dot-inactive); }
.testimonials__dot--active {
  background: var(--red);
  width: 28px;
  border-radius: 5px;
}

/* ============================================================
   SEAMLESS INTEGRATION SECTION (Dark Navy)
   ============================================================ */
   .integration-section {
    background: var(--navy);
    /* border-radius: var(--radius-xl); */
    margin: 0 0px;
    padding: 150px 0;
    overflow: hidden;
}
.integration__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.integration__left { display: block; }
.integration__title {
  color: var(--white);
  margin-bottom: 20px;
  max-width: 560px;
}
.integration__title--green {
  color: var(--green);
}
.integration__desc {
  color: var(--white);
  opacity: 0.8;
  max-width: 485px;
  margin-bottom: 40px;
}
.integration__features {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.integration__feature {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.integration__feature-bar {
  display: block;
  width: 5.86px;
  min-height: 48px;
  background: var(--green);
  border-radius: 100px;
  transform: rotate(22.11deg);
  flex-shrink: 0;
  margin-top: 4px;
}
.integration__feature-title {
  font-family: var(--font-b);
  font-weight: 500;
  font-size: 18px;
  line-height: 27px;
  color: var(--white);
}
.integration__feature-desc {
  color: var(--white);
  opacity: 0.8;
}

/* Integration Right – Contact Form 7 Style */
.integration__right {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

/* ── CF7 Form ── */
.cf7-form {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cf7-row {
  display: block;
}
.cf7-field {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  overflow: hidden;
  background: transparent;
  transition: border-color 0.25s ease;
}
.cf7-field:focus-within {
  border-color: var(--green);
}
.cf7-label {
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-family: var(--font-b);
  font-weight: 500;
  font-size: 13px;
  color: var(--white);
  white-space: nowrap;
  min-width: 175px;
  background: rgba(255, 255, 255, 0.04);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.cf7-label--top {
  align-self: flex-start;
  padding-top: 14px;
  padding-bottom: 14px;
}
.cf7-input,
.cf7-textarea {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 14px 16px;
  font-family: var(--font-b);
  font-weight: 400;
  font-size: 14px;
  color: var(--white);
  min-width: 0;
}
.cf7-input::placeholder,
.cf7-textarea::placeholder {
  color: rgba(255,255,255,0.3);
  font-weight: 400;
}
.cf7-textarea {
  resize: vertical;
  min-height: 100px;
}
.cf7-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 4px;
}
.cf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-b);
  font-weight: 600;
  font-size: 15px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease;
}
.cf7-submit:hover {
  background: var(--red-dark);
  transform: translateY(-1px);
}
.cf7-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  background: transparent;
  color: #d3d3d3;
  font-family: var(--font-b);
  font-weight: 600;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: color 0.25s ease;
  text-decoration: underline;
}
.cf7-clear:hover {
  color: var(--red-light);
}

/* ========== Free Trial page: integration-section--light (white/light theme, no black) ========== */
.integration-section--light {
  background: linear-gradient(to bottom, #f8fafc, var(--white));
  padding: 80px 0 100px;
  overflow: visible;
}
.integration-section--light .integration__title {
  color: var(--black);
}
.integration-section--light .integration__desc {
  color: var(--text-body);
  opacity: 1;
}
.integration-section--light .integration__feature-title {
  color: var(--black);
}
.integration-section--light .integration__feature-desc {
  color: var(--text-body);
  opacity: 0.9;
}
.integration-section--light .integration__feature-bar {
  background: var(--green);
}
.integration-section--light .section-badge--light {
  color: var(--text-body);
  border-color: rgba(0, 0, 0, 0.15);
}
.integration-section--light .integration__cta-text {
  margin-top: 24px;
  margin-bottom: 0;
}
.integration-section--light .integration__cta-link {
  color: var(--purple);
  font-weight: 600;
  text-decoration: underline;
}
.integration-section--light .integration__cta-link:hover {
  color: var(--red);
}

/* Free Trial 左欄：Chat with us / Contact sales（style 抄 workload__solution，新 class ft-cta-*） */
.ft-cta-list {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}
.ft-cta-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 8px 16px 20px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease;
  border-radius: 0;
  position: relative;
  border-top: 1px solid #D4D4D4;
}
.ft-cta-item:last-child .ft-cta-link {
  border-bottom: 1px solid #D4D4D4;
}
.ft-cta-link:hover {
  background: rgba(69, 0, 167, 0.03);
}
.ft-cta-link:hover .ft-cta-name {
  color: var(--purple);
}
.ft-cta-link:hover .ft-cta-dot {
  background: var(--purple);
  border-color: var(--purple);
}
.ft-cta-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--black);
  border: 2px solid var(--black);
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.ft-cta-name {
  font-family: var(--font-h);
  font-weight: 500;
  font-size: 18px;
  line-height: 30px;
  color: var(--black);
  flex: 1;
  transition: color 0.2s ease;
}
.ft-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(69, 0, 167, 0.1);
  color: var(--purple);
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.ft-cta-link:hover .ft-cta-btn {
  transform: translateX(4px);
}
.ft-cta-progress {
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: rgba(69, 0, 167, 0.1);
  border-radius: 100px;
  overflow: hidden;
}
.ft-cta-progress__fill {
  display: block;
  width: 100%;
  height: 0%;
  background: var(--purple);
  border-radius: 100px;
  transition: height 5s linear;
}
/* Form fields: light theme (dark text, light borders) */
.integration-section--light .cf7-field {
  border-color: rgba(0, 0, 0, 0.12);
  background: var(--white);
}
.integration-section--light .cf7-field:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green);
}
.integration-section--light .cf7-label {
  color: var(--black);
  background: #f1f5f9;
  border-right-color: rgba(0, 0, 0, 0.08);
}
.integration-section--light .cf7-input,
.integration-section--light .cf7-textarea {
  color: var(--black);
  background: var(--white);
}
.integration-section--light .cf7-input::placeholder,
.integration-section--light .cf7-textarea::placeholder {
  color: var(--text-muted);
}
.integration-section--light .cf7-clear {
  color: var(--text-body);
}
.integration-section--light .cf7-clear:hover {
  color: var(--red);
}
/* Free Trial panel */
.free-trial-panel__heading {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  color: var(--black);
  margin: 0 0 8px 0;
}
.free-trial-panel__intro {
  font-family: var(--font-b);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-body);
  margin: 0 0 24px 0;
}
.free-trial-panel__subheading {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 16px;
  color: var(--black);
  margin: 24px 0 12px 0;
}
.integration-section--light .cf7-row--half {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.free-trial-panel--trial .cf7-row--half {
  
  grid-template-columns: 1fr;
 
}


.integration-section--light .cf7-row--checkbox {
  margin-top: 4px;
}
.integration-section--light .cf7-field--checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: none;
  background: transparent;
}
.integration-section--light .cf7-field--checkbox:focus-within {
  box-shadow: none;
}
.integration-section--light .cf7-label--checkbox {
  flex: 1;
  min-width: 0;
  padding: 0;
  background: none;
  border: none;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-body);
  white-space: normal;
}
.integration-section--light .cf7-checkbox {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--purple);
  border: 2px solid #8a8a8a;
  border-radius: 4px;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  background: var(--white);
  cursor: pointer;
}
.integration-section--light .cf7-checkbox:checked {
  background: var(--purple);
  border-color: var(--purple);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: 14px 14px;
  background-position: center;
}
.integration-section--light .cf7-field--checkbox {
  overflow: visible;
  align-items: stretch;
}
/* Select 自訂箭頭（參考 header 紅色三角形，唔用 default arrow） */
.integration-section--light .cf7-select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 36px;
}
.integration-section--light .cf7-field:has(.cf7-select) {
  position: relative;
}
.integration-section--light .cf7-field:has(.cf7-select)::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--red);
  pointer-events: none;
}
/* Sticky nav select (Free Trial / DC 頁 request type) 自訂箭頭 */
.bms-sticky-nav .dc-location-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px !important;
  background-image: none;
}
.bms-sticky-nav .dc-location-tabs-select-wrap {
  position: relative;
}
.bms-sticky-nav .dc-location-tabs-select-wrap::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--red);
  pointer-events: none;
}
@media (max-width: 768px) {
  .integration-section--light .cf7-row--half {
    grid-template-columns: 1fr;
  }
}

/* ========== Free Trial page: layout optimizations ========== */
.bms-page--free-trial .bms-hero {
  padding-bottom: 0;
}
/* 必須：section 唔可以有 transform，否則 sticky 會失效（containing block 被改變） */
.bms-page--free-trial .integration-section--light.reveal-on-scroll,
.bms-page--free-trial .integration-section--light.reveal-on-scroll.reveal-on-scroll--in-view {
  transform: none !important;
}
.bms-page--free-trial .integration-section--light {
  overflow-x: hidden;
}
.bms-page--free-trial .integration-section--light .integration__inner {
  gap: 56px;
  align-items: start;
  grid-template-columns: 1fr 1.25fr;
  overflow: visible;
  min-width: 0;
}
.bms-page--free-trial .integration-section--light .integration__left,
.bms-page--free-trial .integration-section--light .integration__right {
  min-width: 0;
}
.bms-page--free-trial .integration-section--light .integration__right {
  overflow-x: hidden;
}
.bms-page--free-trial .integration-section--light .free-trial-panel,
.bms-page--free-trial .integration-section--light .cf7-form {
  min-width: 0;
  max-width: 100%;
}
/* 左邊 INFO 跟住 scroll 保持可見（sticky），Free Trial Offer 同 Tailored Solution Request 兩個 tab 都一樣 */
.bms-page--free-trial .integration-section--light .integration__left {
  position: sticky;
  /*top: calc(var(--bms-navbar-h, 72px) + 24px);*/
  max-width: 525px;
  align-self: start;
}
.bms-page--free-trial .integration-section--light .integration__right {
  background: var(--white);
  border-radius: 16px;
  padding: 40px 36px 44px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.06);
  min-height: 520px;
}
.bms-page--free-trial .integration-section--light .free-trial-panel__heading {
  font-size: 24px;
  margin-bottom: 12px;
}
.bms-page--free-trial .integration-section--light .free-trial-panel__intro {
  margin-bottom: 28px;
}
.bms-page--free-trial .integration-section--light .cf7-form {
  gap: 16px;
}
@media (max-width: 992px) {
  .bms-page--free-trial .integration-section--light .integration__right {
    padding: 32px 24px 36px;
  }
}
@media (max-width: 992px) {
  .bms-page--free-trial .integration-section--light .integration__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .bms-page--free-trial .integration-section--light .integration__left {
    order: 1;
    max-width: 100%;
    position: static;
    min-width: 0;
  }
  .bms-page--free-trial .integration-section--light .integration__left .integration__title,
  .bms-page--free-trial .integration-section--light .integration__left .integration__desc {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .bms-page--free-trial .integration-section--light .integration__right {
    order: 2;
  }
  .bms-page--free-trial .integration-section--light .free-trial-panel,
  .bms-page--free-trial .integration-section--light .cf7-form,
  .bms-page--free-trial .integration-section--light .cf7-field {
    min-width: 0;
  }
  .bms-page--free-trial .integration-section--light .cf7-input,
  .bms-page--free-trial .integration-section--light .cf7-select {
    min-width: 0;
  }
  .bms-page--free-trial .ft-cta-list {
    margin-top: 24px;
  }
  .bms-page--free-trial .ft-cta-name {
    font-size: 17px;
  }
  .free-trial-panel--trial{width:100%}
  .free-trial-panel--trial .cf7-label {
    color: var(--black);
    background: #f1f5f9;
    border-right-color: rgba(0, 0, 0, 0.08);
    min-width: 165px;
    white-space: normal;
    word-break: break-word;
  }

.free-trial-panel--trial .integration-section--light .integration__desc {
 
  max-width: 100%;

  text-align: center;
}

}
@media (max-width: 768px) {

  .free-trial-panel--trial{width:100%}

  .bms-page--free-trial .bms-hero {
    padding-bottom: 24px;
  }
  .bms-page--free-trial .integration-section--light {
    padding: 48px 0 64px;
    padding-left: 25px;
    padding-right: 25px;
    margin: 0;
}
  .bms-page--free-trial .integration-section--light .integration__inner {
    gap: 32px;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }

.bms-page--free-trial .bms-hero__desc--sub {
 margin-bottom: 0;
}

.bms-page--free-trial .workload__title {
  text-align: left;
}


  .bms-page--free-trial .integration-section--light .integration__title {
    font-size: 26px;
    line-height: 1.25;
  }
  .bms-page--free-trial .integration-section--light .integration__desc {
    font-size: 15px;
    width: 100%;
    max-width: 100%;
    text-align: left;
}
  .bms-page--free-trial .integration-section--light .integration__feature-title {
    font-size: 16px;
  }
  .bms-page--free-trial .integration-section--light .integration__feature-desc {
    font-size: 14px;
  }
  .bms-page--free-trial .integration-section--light .integration__right {
    padding: 24px 18px 28px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
  }
  .bms-page--free-trial .free-trial-panel__heading {
    font-size: 20px;
    margin-bottom: 10px;
  }
  .bms-page--free-trial .free-trial-panel__intro {
    font-size: 14px;
    margin-bottom: 20px;
  }
  .bms-page--free-trial .free-trial-panel__subheading {
    font-size: 15px;
    margin: 20px 0 10px 0;
  }
  .bms-page--free-trial .ft-cta-link {
    padding: 14px 10px 14px 16px;
  }
  .bms-page--free-trial .ft-cta-name {
    font-size: 16px;
    line-height: 1.4;
  }
  .bms-page--free-trial .ft-cta-btn {
    width: 28px;
    height: 28px;
  }
  .bms-page--free-trial .ft-cta-btn svg {
    width: 16px;
    height: 16px;
  }
  .bms-page--free-trial .integration-section--light .cf7-label {
    min-width: 120px;
    font-size: 13px;
    white-space: normal;
    word-break: break-word;
  }
  .bms-page--free-trial .integration-section--light .cf7-field {
    min-width: 0;
  }
  .bms-page--free-trial .integration-section--light .cf7-input,
  .bms-page--free-trial .integration-section--light .cf7-select {
    min-width: 0;
  }
  .bms-page--free-trial .integration-section--light .cf7-actions {
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
  }
  .bms-page--free-trial .integration-section--light .cf7-submit,
  .bms-page--free-trial .integration-section--light .cf7-clear {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .bms-page--free-trial .integration-section--light {
    padding: 36px 0 48px;
  }
  .bms-page--free-trial .integration-section--light .integration__right {
    padding: 20px 16px 24px;
  }
  .bms-page--free-trial .integration-section--light .cf7-field:not(.cf7-field--checkbox) {
    flex-direction: column;
    align-items: stretch;
  }
  .bms-page--free-trial .integration-section--light .cf7-field:not(.cf7-field--checkbox) .cf7-label {
    min-width: unset;
    padding: 10px 12px;
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }
  .bms-page--free-trial .integration-section--light .cf7-input,
  .bms-page--free-trial .integration-section--light .cf7-textarea {
    padding: 12px 14px;
  }
  .bms-page--free-trial .integration-section--light .cf7-field:has(.cf7-select)::after {
    right: 12px;
  }
  .bms-page--free-trial .integration-section--light .cf7-checkbox {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
  }
}

/* ============================================================
   REAL SUPPORT SECTION
   ============================================================ */
   .support-section {
    padding: 72px 0 60px;
   /* background: var(--white);*/
    background: linear-gradient(to bottom, var(--bg-soft), white);
}
.support__inner { display: block; }
.support__text { display: block; }
.support__title {
  color: var(--black);
  margin-bottom: 8px;
}
.support__email {
  display: block;
  color: var(--black);
  text-decoration: underline;
  margin-bottom: 32px;
}
.support__email--typewriter {
  color: var(--red);
  text-decoration: underline;
}
.support__email--typewriter .support__email-tw {
  color: var(--red);
}
.support__email-cursor {
  display: inline-block;
  width: 2px;
  height: 0.95em;
  background: var(--red);
  margin-left: 2px;
  vertical-align: text-bottom;
  opacity: 0;
}
.support__email-cursor.support__email-cursor--on {
  opacity: 1;
  animation: supportEmailCursorBlink 0.8s step-end infinite;
}
@keyframes supportEmailCursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.support__tagline {
  font-family: var(--font-h);
  font-weight: 500;
  font-size: 24px;
  line-height: 28px;
  color: var(--black);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--white);
  border-top: 1px solid var(--border);
  padding-top: 48px;
}
.footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
}
.footer__col { display: block; }
.footer__col--brand {
  padding-right: 16px;
}
.footer__brand-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 28px;
}
.footer__logo { margin-bottom: 24px; }
.footer__logo-img {
  height: 32px;
  width: auto;
  display: block;
}
.footer__address {
  font-family: var(--font-b);
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: var(--black);
  font-style: normal;
  margin-bottom: 16px;
}
.footer__phone {
  display: block;
  font-family: var(--font-b);
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: var(--black);
  margin-bottom: 24px;
}
.footer__social {
  display: flex;
  gap: 10px;
}
.social-btn {
  width: 36px;
  height: 36px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  color: var(--text-label);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.social-btn:hover {
  background: var(--purple-tint);
  border-color: var(--purple);
  color: var(--purple);
  transform: translateY(-2px);
}

/* Stacked columns (two sections per column) */
.footer__col--stacked {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.footer__section { display: block; }

.footer__col-title {
  font-family: var(--font-h);
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
  color: var(--text-muted);
  margin-bottom: 14px;
  text-transform: none;
  letter-spacing: 0;
}
.footer__links {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.footer__links li a {
  font-family: var(--font-b);
  font-weight: 400;
  font-size: 18px;
  line-height: 35px;
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.18s ease, padding-left 0.18s ease;
  display: inline-block;
}
.footer__links li a:hover {
  color: var(--purple);
  padding-left: 4px;
}

/* Payment Strip */
.footer__payment-strip {
  border-top: 0px solid var(--border);
  padding: 28px 0;
  padding-top: 0;
}
.footer__payment-inner {
  display: flex;
  justify-content: center;
}
.footer__payment {
  display: flex;
  align-items: center;
  gap: 20px;
}
.payment-icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 36px;
  line-height: 1;
}
.payment-icon--visa { color: #1a1f71; }
.payment-icon--mastercard { color: #eb001b; }
.payment-icon--tether {
  font-size: 14px;
  font-family: var(--font-h);
  font-weight: 700;
  color: var(--text-label);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.payment-icon--tether svg {
  width: 28px;
  height: 28px;
}
.payment-icon--amex { color: #006fcf; }
.payment-icon--paypal { color: #003087; }

/* Footer Bottom */
.footer__bottom {
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 16px 0;
}
.footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer__copy {
  font-family: var(--font-b);
  font-size: 13px;
  color: var(--text-muted);
}

/* ============================================================
   RESPONSIVE — Mobile-Ready Structure
   ============================================================ */
@media (max-width: 1200px) {
  :root { --container-pad: 28px; }
  .hero__title { font-size: 46px; line-height: 52px; }
  .hero__title-sub { font-size: 24px; line-height: 30px; max-width: 40%; }
  .hero__title-row { gap: 36px; }
  .hero__cta { margin-top: -80px; }
  .secure-section { margin: 0 40px; }
  .cpu-section { margin: 0 40px; }
  .integration-section { margin: 0 20px; }
  .cpu__header { grid-template-columns: 1fr; gap: 28px; }
  .cpu__product-list { margin-top: 0; }
  .cpu-row {
    grid-template-columns: 8px minmax(0, 1.2fr) minmax(0, 2fr) auto auto;
    align-items: center;
  }
  .workload__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .workload__img-wrap { max-width: 600px; margin: 0 auto; }
  .testimonials-section .testimonials__promo-track .review-card {
    flex: 0 0 calc((100% - 48px) / 3);
    min-width: calc((100% - 48px) / 3);
    max-width: calc((100% - 48px) / 3);
    min-height: 300px;
  }
  /* Paged testimonials subpages: horizontal row */
  .testimonials__viewport {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .testimonials__viewport::-webkit-scrollbar { height: 6px; }
  .testimonials__viewport::-webkit-scrollbar-track { background: rgba(0,0,0,0.06); border-radius: 3px; }
  .testimonials__viewport::-webkit-scrollbar-thumb { background: rgba(69,0,167,0.3); border-radius: 3px; }
  .testimonials__viewport .testimonials__page {
    position: relative;
    transform: none !important;
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;
    flex: 0 0 auto;
    padding-left: 0;
    padding-right: 0;
    min-width: max-content;
    pointer-events: auto;
  }
  .testimonials__viewport .testimonials__page .review-card {
    flex: 0 0 auto;
    width: calc((100% - 48px) / 3);
    min-width: 0;
    max-width: none;
    min-height: 300px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .partners__inner { grid-template-columns: 360px 1fr; }
}

@media (max-width: 992px) {
  /* Hero bottom: 按鈕在上、Scroll Down 在下 */
  .hero__bottom-row {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .hero__cta { order: 1; margin-top: 0; justify-content: center; }
  .hero__scroll-hint { order: 2; }
}

@media (max-width: 960px) {
  :root { --container-pad: 20px; }

  /* ── Hero: switch to stacked column layout ── */
  .hero__inner { grid-template-columns: 1fr; gap: 24px; }
  .hero__content { text-align: center; }
  .hero__title-row {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .hero__title { font-size: 40px; line-height: 46px; }
  .hero__title-bar {
    min-height: 4px;
    width: 80px;
    height: 4px;
    transform: none;
  }
  .hero__title-sub {
    font-size: 24px;
    line-height: 30px;
    max-width: 100%;
  }
  .hero__desc { max-width: 100%; margin-left: auto; margin-right: auto; }
  .hero__cta { margin-top: 0; justify-content: center; }
  .hero__bottom-row {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  /* ── Other sections ── */
  .secure-section { margin: 0 20px; padding: 50px 25px; }
  .secure__header-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .secure__header-right { padding-top: 0; }
  .secure__map-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "locs" "map" "features";
    gap: 24px;
  }
  .secure__locations-col { margin-top: 0; }
  .secure__locations {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 20px;
    padding-left: 0;
  }
  .secure__location:not(:last-child) .location-dot-wrap::after { display: none; }
  .title-h2,.secure__title,
  .cpu__title,
  .dedicated__title,
  .backbone__title,
  .backbone__subtitle,
  .workload__title,
  .testimonials__title,
  .support__title,
  .performance-benchmark__title { font-size: 36px; line-height: 42px; }
  .cpu-section { margin: 0 20px; padding: 80px 0; }
  .cpu__subtitle { font-size: 18px; line-height: 24px; }
  .cpu-type__name { font-size: 15px; }
  .cpu-row {
    grid-template-columns: 8px minmax(0, 1fr) minmax(0, 1.4fr) auto auto;
    gap: 12px;
    padding: 16px 20px;
  }
  .cpu-row__desc { font-size: 14px; line-height: 22px; max-width: 100%; }
  .cpu-row__name { font-size: 15px; }
  .cpu-row__amount { font-size: 20px; }
  .dedicated__features-header {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .dedicated__features-left {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .dedicated__features-left .red-bar {
    transform: none;
    width: 60px;
    height: 5px;
    margin-left: 0;
  }
  .dedicated__features-title { max-width: 100%; text-align: center; }
  .dedicated__features-right { max-width: 100%; text-align: center; padding-top: 0; }
  .dedicated__cards { grid-template-columns: 1fr; }
  .dedicated-card--light { border-radius: 15px 15px 0 0; }
  .dedicated-card--dark  { border-radius: 0 0 15px 15px; min-height: 280px; }
  .backbone__row, .backbone-section--solutions .backbone__row { grid-template-columns: 1fr; gap: 32px; padding: 45px;}
  
  .backbone__row-title, .backbone__row-desc { max-width: 100%;}

  .backbone__row-left .red-bar {
    transform: none;
    width: 60px;
    height: 5px;
    margin-left: 0;
    margin-right: 0;
    flex-shrink: 0;
    margin-bottom: 20px;
  }
  .backbone__row-left { overflow: visible; display: block;}
  .integration-section { margin: 0 20px; }
  .integration__inner { grid-template-columns: 1fr; }
  .integration__right { justify-content: stretch; }
  .cf7-form { max-width: 100%; }
  .cf7-label { min-width: 110px; font-size: 12px; }
  .partners__inner { grid-template-columns: 1fr; }
  .partners__red-card {
    background: var(--red);
    border-radius: 12px 12px 0 0px;
    padding: 20px 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: none;
    margin-right: 0;
    margin-top: 0px;
    padding-right: 50px;
    
    margin-bottom: 0px;
}

.partners__notch--black {

  border-width: 0;
 
}

.partners-section {

  margin-top: 0px;
}

.workload__desc {
 
  max-width: 100%;
  text-align: center;
 
}

.workload__title {
  
  text-align: center;
}


  .partners__logos-card {
    border-radius: 0 0 12px 12px;
  }
  .partners__logos-grid { grid-template-columns: repeat(3, 1fr); }
  .partners__arrow { display: none; }
  .footer__inner { grid-template-columns: 1fr; gap: 24px; }
  .footer__brand-card { max-width: 360px; }
  .footer__payment { gap: 14px; }
  .payment-icon { font-size: 30px; }
  .workload__detail-title { font-size: 24px; line-height: 30px; }
  .workload__detail-bar { min-height: 60px; }
  .solution-name { font-size: 16px; }
  .secure__features {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
}
}

@media (max-width: 640px) {
  .testimonials-section .testimonials__promo-track .review-card {
    flex: 0 0 calc((100% - 18px) / 2);
    min-width: calc((100% - 18px) / 2);
    max-width: calc((100% - 18px) / 2);
    min-height: 280px;
    padding: 0 18px 18px;
  }

  .hero__content {
    padding-top: 0px;
  
}

  .hero__title { font-size: 30px; line-height: 36px; padding-top:20px; }
  .hero__title-sub { font-size: 18px; line-height: 24px; }
  .hero__title-bar { width: 60px; }
  .hero__desc { font-size: 15px; line-height: 24px; }
  .hero__cta { flex-direction: column; gap: 12px; width: 100%; }
  .hero__cta .btn { width: 100%; text-align: center; justify-content: center; }
  .promo__track { padding: 20px var(--container-pad); gap: 16px; }
  .promo__card--featured { flex: 0 0 280px; min-height: 340px; flex-direction: column; }
  .promo__card--featured .promo__card-visual {
    flex: none;
    height: 160px;
    padding: 0;
    overflow: hidden;
    border-radius: 15px 15px 0 0;
    display: block;
  }
  .promo__card--featured .promo__dashboard-mockup {
    width: 100%;
    height: 100%;
    border-radius: 15px 15px 0 0;
  }
  .promo__card--featured .promo__card-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .promo__card--featured .promo__card-bottom {
    padding: 20px 24px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .promo__card--featured .promo__card-label { margin-top: 0; margin-bottom: 10px; }
  .promo__card--featured .promo__card-title { margin-bottom: 12px; }
  .promo__card { flex: 0 0 260px; min-height: 340px; }
  .promo__card-title { font-size: 18px; line-height: 26px; }
  .promo__arrow { width: 36px; height: 36px; font-size: 13px; }
  .secure-section {
    margin: 0 20px;
    padding: 40px 30px;
}

.map-pin__icon {
  width: 25px;
  height: 25px;
  
}

.testimonials-section {
 
  padding-bottom: 20px;
}

  .title-h2,
  .secure__title,
  .dedicated__title,
  .cpu__title,
  .backbone__title,
  .backbone__subtitle,
  .workload__title,
  .integration__title,
  .testimonials__title,
  .support__title,
  .support__email { font-size: 28px; line-height: 34px; }
  .always-on-wrap { font-size: 28px; }
  .cpu-section {
    margin: 0 0px;
    padding: 40px 20px;
    border-radius: 0;
}
  .cpu__header-right {
    flex-direction: row;
    gap: 8px;
    flex-wrap: wrap;
    display: grid;
}
  .cpu-type { padding: 8px 10px; gap: 8px; }
  .cpu-type__name { font-size: 15px; line-height: 20px; }
  .cpu-type__btn { width: 28px; height: 28px; }
  .cpu-row {
    grid-template-columns: 8px 1fr auto;
    grid-template-rows: auto auto;
    gap: 14px 16px;
    padding: 16px 18px;
  }
  .cpu-row__specs {
   
    font-size: 14px;
    line-height: 17px;
    color: #e3ffcf;
}
  .cpu-row__bar { margin-top: -85px;grid-column: 1; grid-row: 1 / -1; align-self: center; height: 48px; width: 6px; min-height: auto; }
  .cpu-row__info { grid-column: 2 / -1; grid-row: 1; }
  .cpu-row__desc { grid-column: 2; grid-row: 2; font-size: 13px; line-height: 20px; max-width: 100%; display: none; }
  .cpu-row__price { grid-column: 2; grid-row: 2; align-self: center; text-align: left; }
  .cpu-row__price-value { justify-content: flex-start; }
  .cpu-row__cta { grid-column: 3; grid-row: 2; align-self: center; width: 52px; height: 52px; padding: 0; min-width: 52px; }
  .cpu-row__cta svg { width: 24px; height: 24px; }
  .cpu-row__name { font-size: 17px; line-height: 20px; }
  .cpu-row__label { font-size: 11px; }
  .cpu-row__amount { font-size: 25px; }
  .cpu-row__period { font-size: 12px; }
  .dedicated-section { padding: 48px 0; }
  .dedicated-card__dark-content { padding: 24px 20px; flex-direction: column; gap: 12px; align-items: flex-start; }
  .dedicated-card__dark-label { font-size: 22px; line-height: 28px; }
  .backbone-section { padding: 48px 0; }
  .backbone__feature-text { font-size: 14px; }
  .integration-section { margin: 0px; padding: 40px 20px; }
  .cf7-field { flex-direction: column; }
  .cf7-label { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 10px 14px; min-width: unset; }
  .cf7-label--top { padding-top: 10px; padding-bottom: 10px; }
  .cf7-input, .cf7-textarea { padding: 12px 14px; }
  .cf7-actions { flex-direction: column; gap: 12px; }
  .cf7-submit, .cf7-clear { width: 100%; text-align: center; justify-content: center; }
  .partners__red-card { padding: 24px 16px; }
  .partners__red-title { font-size: 30px; line-height: 36px; }
  .partners__logos-card { padding: 16px 12px; }
  .partners__logos-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 20px; }
  .partners__logo-item { min-height: 52px; max-height: 52px; padding: 6px 8px; }
  .partners__logo-img { max-width: 100px; max-height: 40px; }
  .review-card__title { font-size: 14px; line-height: 20px; }
  .review-card__body { font-size: 13px; line-height: 20px; }
  .workload-section { padding: 48px 0; }
  .workload__col-right { display: none !important; }
  .workload__grid { grid-template-columns: 1fr; }
  .workload__solution-panel {
    display: block;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s ease-out;
    background: rgba(69, 0, 167, 0.04);
    border-bottom: 1px solid #D4D4D4;
  }
  .workload__solution-item--open .workload__solution-panel {
    max-height: 420px;
  }
  .workload__solution-panel-inner {
    padding: 16px 20px 20px 44px;
  }
  .workload__solution-item--open .solution-btn--accordion {
    transform: rotate(90deg);
  }
  .workload__solution-panel .workload__detail-title {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 8px;
  }
  .workload__solution-panel .workload__detail-desc {
    font-size: 14px;
    line-height: 22px;
    max-width: none;
  }
  .workload__solution-panel .workload__detail-link {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .workload__detail { flex-direction: column; gap: 12px; }
  .workload__detail-bar { width: 60px; min-height: 4px; height: 4px; transform: none; }
  .workload__detail-title { font-size: 22px; line-height: 28px; }
  .workload__detail-desc { font-size: 14px; }
  .workload__detail-link { margin-top: 0; }
  .solution-name { font-size: 15px; }
  .solution-btn { width: 28px; height: 28px; }
  .partners-section { padding: 0 0 40px; }
  .support-section { padding: 48px 0 40px; }
  .footer { padding: 40px 0 24px; }
  .footer__brand-card { padding: 20px 16px; }
  .secure__locations {
   
    display: none;
}

.secure__map-grid {
  
  gap: 0;
  margin-top: -60px;
}

.secure__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  align-items: start;
  gap: 30px 20px;
  justify-items: stretch;
}

}

@media (max-width: 400px) {
  :root { --container-pad: 20px; }
  .hero__title { font-size: 24px; line-height: 30px; }
  .hero__title-sub { font-size: 16px; line-height: 22px; }
  .hero__desc { font-size: 14px; }
  .secure-section { margin: 0; }
  .cpu-section {
    margin: 0px;
    padding: 45px 5px;
}
.integration-section {
  margin: 0px;
  padding: 40px 5px;
}



.hero__title {

  padding-top: 0px;
}

.announce-bar__inner {
  
  padding: 0px 10px;
}



.announce-bar__close {
  
  right: 5px;
 
  width: 20px;
  height: 20px;
  
}



.announce-bar__text {

  font-size: 12px;

  line-height: 1.2;
}



  /* .cpu-row: layout kept from 480px block (same as 640) */
  .secure__title,
  .cpu__title,
  .dedicated__title,
  .backbone__title,
  .backbone__subtitle,
  .partners__red-title,
  .performance-benchmark__title { font-size: 24px; line-height: 30px; }
  .partners__logos-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  /* Mobile: 1 card per row (one box visible) — superseded at ≤480px by horizontal snap */
  .testimonials__page { flex-direction: column; align-items: center; gap: 16px; }
  .review-card { flex: 0 0 100%; max-width: 100%; min-height: 260px; padding: 0 16px 20px; }

  .backbone__row, .backbone-section--solutions .backbone__row {
   
    padding: 45px 5px;
}

.dedicated__features-title {

  font-size: 22px;
  line-height: 1;
 
}

.backbone__row-title {
  
  font-size: 22px;
  line-height: 1;
 
}

}

/* ── Index & home: ≤480px fixes (map bleed, CPU grid, testimonials snap) ── */
@media (max-width: 480px) {
  .secure-section {
    margin: 0 !important;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    overflow-x: clip;
  }
  .secure__header-grid.container {
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }
  .secure__map-grid.container {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .secure__map {
    padding-left: 0;
    padding-right: 0;
  }
  .secure__map-wrap {
    max-width: 100%;
    overflow: hidden;
    border-radius: 0;
  }
  .secure__map-img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  .secure__features {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 16px var(--container-pad) 28px;
    margin: 0;
    border-radius: 0;
  }
  .secure__feature {
    min-width: 0;
  }
  .secure__feature .feature-text {
    word-break: break-word;
    hyphens: auto;
  }

  .dedicated-card__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: 0;
    height: auto;
  }
  .dedicated-card__divider-v {
    display: none;
  }

  /* CPU product rows: same layout as 640px (avoid 400px single-column break) */
  .cpu-row {
    grid-template-columns: 8px 1fr auto !important;
    grid-template-rows: auto auto !important;
    gap: 14px 16px !important;
    padding: 16px 18px !important;
  }
  .cpu-row__bar {
    display: block !important;
    margin-top: -85px;
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
    height: 48px;
    width: 6px;
    min-height: auto;
  }
  .cpu-row__info {
    grid-column: 2 / -1 !important;
    grid-row: 1 !important;
  }
  .cpu-row__desc {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: none !important;
  }
  .cpu-row__price {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: center !important;
    text-align: left !important;
  }
  .cpu-row__price-value {
    justify-content: flex-start !important;
  }
  .cpu-row__cta {
    grid-column: 3 !important;
    grid-row: 2 !important;
    align-self: center !important;
    width: 52px !important;
    height: 52px !important;
    padding: 0 !important;
    min-width: 52px !important;
  }

  .testimonials-section .testimonials__promo-track .review-card {
    flex: 0 0 calc(100% - 16px);
    min-width: calc(100% - 16px);
    max-width: calc(100% - 16px);
    min-height: 280px;
  }
}

/* ============================================================
   BARE METAL SERVER PAGE (bms-page)
   ============================================================ */
.bms-page { padding-bottom: 0; }

/* BMS Hero: light bg, breadcrumb, two-line H1, two descriptions, pill tabs (tokens from index) */
.bms-hero {
  padding: 30px 0 0px 0px;
  text-align: center;
  /*background: var(--bg-gray);*/
  overflow-x: hidden; /* 防止長 H1 撑出導致橫向捲動 */
  background: linear-gradient(to bottom, var(--bg-soft), white);
}
.bms-hero__breadcrumb {
  font-family: var(--font-b);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-label);
  margin-bottom: 20px;
}
.bms-hero__breadcrumb a {
  color: var(--text-label);
  text-decoration: none;
}
.bms-hero__breadcrumb a:hover { text-decoration: underline; }
.bms-hero__breadcrumb-sep {
  margin: 0 6px;
  color: var(--text-label);
}
.bms-hero__breadcrumb-current { color: var(--text-label); }
.bms-hero__title {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  /* 流體字級，避免窄屏兩行 H1 與下面 sticky/content 重疊 */
  font-size: clamp(26px, 5.5vw, 55px);
  line-height: 1.12;
  max-width: 100%;
  padding: 0 12px;
  box-sizing: border-box;
}
/* No-JS / SEO: full headline visible when .js-enabled not applied */
.bms-hero__title-fallback {
  display: block;
  text-align: center;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  font-family: inherit;
  color: var(--black);
}
.bms-hero__title-fallback br { display: block; content: ''; margin-top: 2px; }
.js-enabled .bms-hero__title-fallback { display: none; }
.js-enabled .bms-hero__title-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
}
/* Visual stack hidden without JS (noscript shows fallback). With js-enabled, flex so reserve holds height immediately */
.bms-hero__title-visual { display: none; }
.js-enabled .bms-hero__title-visual { display: flex; }
/* Reserve layer = full line height without min-height (no layout jump while typing) */
.bms-hero__title-line-wrap {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: center;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.bms-hero__title-reserve {
  visibility: hidden;
  display: block;
  pointer-events: none;
  user-select: none;
}
.bms-hero__title-type {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: block;
  text-align: center;
}
.bms-hero__title-line { display: block; }
.bms-hero__title-line--black { color: var(--black); }
.bms-hero__title-line--purple { color: var(--purple); }
/* Free Trial hero: single-line title (typewriter + purple phrase) */
.bms-hero__title-line-wrap--single .bms-hero__title-line { display: inline; }
.bms-hero #ft-hero-line2 { visibility: hidden; }
.bms-hero__title-fallback .bms-hero__title-line--purple { color: var(--purple); }
.bms-hero__desc {
  font-family: var(--font-b);
  font-weight: 400;
  line-height: 1.6;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.bms-hero__desc--lead {
  font-size: 17px;
  color: var(--text-mid);
  margin-bottom: 12px;
}
.bms-hero__desc--sub {
  font-size: 15px;
  color: var(--text-body);
  margin-bottom: 28px;
}
.bms-tabs-wrap {
  display: inline-flex;
  justify-content: center;
  background: var(--white);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  padding: 6px 8px;
}
.bms-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.bms-tabs__tab {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 15px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-label);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.bms-tabs__tab:hover:not(.bms-tabs__tab--active) {
  color: var(--purple);
}
.bms-tabs__tab--active {
  background: var(--purple);
  color: var(--white);
  border-color: var(--purple);
}
.bms-tabs__tab:not(.bms-tabs__tab--active) {
  background: var(--white);
  border: 1px solid var(--dot-idle);
}
.bms-section {
  padding: 70px 0 65px;
  background: var(--white);
}
/* Both sections always visible — scroll-spy handles active tab */
.bms-section:not(.is-visible) { display: block; }
.bms-section[hidden] { display: block !important; }

/* ── Sticky CPU-type nav bar（AMD / Intel） ── */
/* 下面 sidebar / scroll-margin 要加總 offset，避免被呢條 bar 遮住 */
:root {
  --bms-navbar-h: 72px;
  /* padding 10+10 + tab 約 48px + 1px border — 預留少少緩衝 */
  --bms-sticky-tabs-h: 72px;
  --bms-sticky-stack: calc(var(--bms-navbar-h) + var(--bms-sticky-tabs-h));
}
/* Gaming / E-commerce solutions：TAB 捲到區塊時預留頂部，避免被 navbar + sticky tabs 遮住 */
#ultra-smooth-gameplay,
#tailored-gaming-server-solutions,
#fintech-connectivity-speed,
#fintech-bare-metal-cta,
#video-streaming-solutions,
#video-streaming-cta {
  scroll-margin-top: calc(var(--bms-sticky-stack) + 28px);
}
.bms-sticky-nav {
  position: sticky;
  top: var(--bms-navbar-h);
  z-index: 900;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #e7e7e7;
  padding: 10px 0;
}
.bms-sticky-nav .bms-tabs {
  justify-content: center;
}

.bms-sticky-nav .bms-tabs span {
  /* display: block; */
  font-size: 13px;
  font-weight: 500;
  /* text-transform: uppercase; */
  margin-top: 2px;
  letter-spacing: 0.8px;
  background: #dddddd52;
  padding: 2px 6px;
  border-radius: 100px;
  margin-left: 4px;
}

/* Data center location: responsive 用 select 取代 tabs（沿用 bms-cards-sort 樣式） */
.dc-location-tabs-select-wrap {
  display: none;
}
.dc-location-select-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 768px) {
  .bms-sticky-nav .dc-location-tabs {
    display: none !important;
  }
  .dc-location-tabs-select-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
  }
  .dc-location-tabs-select-wrap .dc-location-select {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    box-sizing: border-box;
    font-size: 15px;
    padding: 15px 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Intro block: left (title + Learn More →) | red diagonal | right (2 paragraphs) */
.bms-intro {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 48px;
  background: var(--white);
}
.bms-intro__left {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-right: 25px;
}
.bms-intro__title {
  margin: 0;
  color: var(--black);
  /* 全寬流體，平板/手機唔會一直維持 35px 過大 */
  font-size: clamp(20px, 4.2vw, 35px);
  line-height: 1.15;
  max-width: 100%;
}
.bms-intro__tm {
  font-size: 0.6em;
  vertical-align: super;
  font-weight: 700;
}
@keyframes bms-cta-nudge {
  0%   { transform: translateX(0); }
  30%  { transform: translateX(5px); }
  60%  { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}
.bms-intro__cta {
  font-family: var(--font-b);
  font-weight: 400;
  font-size: 18px;
  color: var(--black);
  text-decoration: none;
  /*display: inline-flex;*/
  align-items: center;
  gap: 8px;
  transition: transform 0.25s ease;
}
.bms-intro__cta:hover {
  text-decoration: underline;
  transform: translateX(4px);
}
.bms-intro__arrow {
  color: var(--red);
  font-size: 25px;
  margin-top: -6px;
  display: inline-block;
  animation: bms-cta-nudge 1.5s ease-in-out infinite;
}
.bms-intro .red-bar {
  margin-left: 0;
  margin-right: 0;
}
.bms-intro__right {
  flex: 1;
  min-width: 0;
  /*max-width: 560px;*/
}
.bms-intro__text {
  font-family: var(--font-b);
  font-weight: 400;
  font-size: 16px;
  line-height: 25px;
  color: var(--black);
  margin: 0 0 16px 0;
}
.bms-intro__text:last-child { margin-bottom: 0; }

.bms-section__grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 35px;
  align-items: start;
}
/* 國家 TAB 跟住右邊 list — top 必須低於 AMD/Intel sticky bar，先唔會遮住 */
.bms-sidebar {
  position: sticky;
  top: calc(var(--bms-sticky-stack) + 12px);
  align-self: start;
  padding-right: 24px;
  z-index: 1; /* 低於 .bms-sticky-nav 900，永遠喺條 menu 下面 */
}
.bms-sidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.bms-sidebar__title {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
  color: var(--black);
}
.bms-sidebar__cta {
  font-family: var(--font-b);
  font-weight: 600;
  font-size: 13px;
  color: var(--purple-light);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bms-sidebar__cta:hover { text-decoration: underline; }
.bms-sidebar__arrow {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  margin-left: 2px;
}
.bms-sidebar .red-bar {
  margin-left: 0;
  margin-top: 8px;
  margin-bottom: 20px;
}
.bms-sidebar__text {
  font-family: var(--font-b);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-body);
  margin-bottom: 12px;
}
.bms-sidebar__text--benefits { margin-bottom: 20px; }
.bms-sidebar .workload__solutions.bms-locations { border: none; }
/* 國家 TAB 進度條：緩衝感 easing（唔用線性） */
.bms-locations .solution-progress__fill {
  transition: height 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.bms-locations .workload__solution {
  transition: background 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.bms-locations .solution-name,
.bms-locations .solution-dot {
  transition: color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
              background 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ============================================================
   DATA CENTER PAGE — 3 Location Sections (dark layout, ref Fig 1)
   ============================================================ */
   .dc-locations {
    padding: 0 0 80px;
    --bms-navbar-h: 72px;
    --bms-sticky-tabs-h: 72px;
    --dc-sticky-top: calc(var(--bms-navbar-h) + var(--bms-sticky-tabs-h) + 12px);
    padding-bottom: 30px;
}
.dc-location-section--dark {
  background: var(--white);
  padding: 30px 0 20px;
  padding-bottom: 80px;
}

#location-tokyo{
  background: #fbfbfb;
}

.dc-location-section--dark .workload__grid {
  gap: 0 60px;
  align-items: start;
  grid-template-columns: 1fr 1.3fr;
  max-width: 1300px;
}
.dc-location__left {
  position: sticky;
  top: var(--dc-sticky-top);
  align-self: start;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  padding: 25px;
}
.dc-location__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.25;
  color: var(--black);
  margin: 0 0 24px;
  align-content: center;
  /* padding-left: 25px; */
}
.dc-location__title-bar {
  align-self: stretch;
  min-height: 60px;
  margin-top: 0;
  margin-right: 7px;
  transform: rotate(20deg);
  width: 6px;
  margin-left: 8px;
}
.dc-location__slash, .dc-detail__slash {
  color: var(--red);
  margin-right: 4px;
  display: none;
}
.dc-location__desc {
  font-family: var(--font-b);
  font-weight: 400;
  font-size: 16px;
  line-height: 25px;
  color: var(--black);
  max-width: 480px;
  margin-bottom: 25px;;
}
.dc-location-section--dark .workload__solution {
  border-top-color: #D4D4D4;
}
.dc-location-section--dark .workload__solutions .workload__solution:last-child {
  border-bottom: 1px solid #D4D4D4;
}
.dc-location-section--dark .solution-name {
  color: var(--black);
}
.dc-location-section--dark .workload__solution:hover .solution-name {
  color: var(--purple);
}
.dc-location-section--dark .workload__solution--active .solution-name {
  color: var(--purple);
}
.dc-location-section--dark .solution-dot {
  background: var(--black);
  border-color: var(--black);
}
.dc-location-section--dark .workload__solution--active .solution-dot {
  background: var(--purple);
  border-color: var(--purple);
}
.solution-btn--dark {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--black) !important;
}
.dc-location-section--dark .workload__solution--active .solution-btn:not(.solution-btn--dark) {
  background: var(--purple);
  color: var(--white);
}
/* Left column = location visual (image + map pin); right column = title + list (matches design) */
.dc-location__visual {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.dc-location__visual .dc-location__right-link {
  width: 100%;
  margin-top: 0;
}
.dc-location__map-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
}
.dc-location__map-pin svg {
  width: 28px;
  height: 36px;
}
/* Red arrow on list items (right side) */
.dc-location-section--dark .dc-location__arrow {
  color: var(--red) !important;
}
.dc-location-section--dark .workload__solution--active .dc-location__arrow {
  background: var(--purple) !important;
  color: var(--white) !important;
}
.dc-location-section--dark .solution-btn--dark.dc-location__arrow {
  background: rgba(217, 0, 0, 0.1) !important;
  color: var(--red) !important;
}
.dc-location__view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-b);
  font-weight: 600;
  font-size: 15px;
  color: var(--text-body);
  margin-top: 20px;
  text-decoration: none;
  transition: color 0.2s ease;
}
.dc-location__view-all:hover {
  color: var(--black);
}
.dc-location__view-all svg {
  flex-shrink: 0;
}
.dc-location-section--dark .workload__detail-title {
  color: var(--black);
  font-size:21px;
}
.dc-location-section--dark .workload__detail-desc {
  color: var(--text-body);
  max-width: 100%;
}
@keyframes dc-link-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.dc-location__right-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 30px 30px;
  margin-top: 25px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.14);
}

.dc-location__right-link .workload__detail {
  padding: 40px 30px;
  padding-bottom: 25px;
}

.dc-location__right-link .workload__detail-bar {
  width: 4px;
  min-height: 50px;
  transform: rotate(19deg);
  margin-top: 2px;
}

.dc-location__right-link .workload__img-wrap {
  transition: box-shadow 0.35s ease;
}

/* mouse on 才有的效果：浮動 + 陰影 */
.dc-location__right-link:hover {
  animation: dc-link-float 2.5s ease-in-out infinite;
  box-shadow: 0 11px 32px rgb(217 0 0 / 20%);
}
.dc-location__right-link:hover .workload__img-wrap {
  box-shadow: 0 0px 0px rgb(217 0 0 / 20%);
}
.dc-location-section--dark .workload__img-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 10px 8px rgba(0, 0, 0, 0.10);
  background: transparent;
}

/* ── Hong Kong facility sections (new CSS names: hk-facility) ── */
.facilities {
  padding: 0 0 60px;
  padding-bottom: 0px;
}
.facility {
  padding: 80px 0;
}
.facility:nth-child(odd) {
  background: #fbfbfb;
}
.facility:nth-child(even) {
  background: #fff;
 
}


#facility-itech{display:none}

.facility__inner {
  max-width: 1400px;
  margin: 0 auto;
}
.facility__grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0 60px;
  align-items: flex-start;
}
@media (min-width: 961px) {
  .facility__inner,
  .facility__grid,
  .facility {
    overflow: visible;
  }
}
.facility__media {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: sticky;
  top: 130px;
  padding: 30px 30px;
  margin-top: 8px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.14);
  border-radius: var(--radius-lg);
}


.facility__link {
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.facility__media:hover {
  box-shadow: 0 16px 40px rgba(217, 0, 0, 0.2);
}
.facility__image-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  background: #11111100;
}
.facility__image {
  display: block;
  width: 100%;
  height: auto;
}
.facility__address-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.facility__map-pin {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.facility__map-pin svg {
  width: 28px;
  height: 36px;
}
.facility__address {
  font-family: var(--font-b);
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}
.facility:nth-child(odd) .facility__address,
.facility:nth-child(even) .facility__address {
  color: var(--text-body);
}
.facility__body {
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.facility__body-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 24px;
  position: relative;
}
.facility__bar {
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 5px;
  height: 62px;
  background: var(--red);
  transform: rotate(20deg);
  border-radius: 9px;
}
.facility__title {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 25px;
  line-height: 28px;
  color: var(--white);
  margin: 0 0 0px;
  color: var(--red) !important;
  margin-top: 2px;
}
.facility:nth-child(odd) .facility__title,
.facility:nth-child(even) .facility__title {
  color: var(--black);
}
.facility__subtitle {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 38px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 16px;
}
.facility:nth-child(odd) .facility__subtitle, .facility:nth-child(even) .facility__subtitle {
  color: var(--black);
}
.facility__desc {
  font-family: var(--font-b);
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  
  margin-bottom: 24px;
}
.facility:nth-child(odd) .facility__desc,
.facility:nth-child(even) .facility__desc {
  color: var(--black);
}
.facility-accordion {
  margin-top: 8px;
}
.facility-accordion.workload__solutions {
  display: flex;
  flex-direction: column;
}
.facility-accordion__item {
  display: flex;
  flex-direction: column;
}
.facility-accordion__item .workload__solution.facility-accordion__trigger {
  border-left: none;
  border-right: none;
  border-top: 1px solid #D4D4D4;
  background: none;
  font: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
  padding: 16px 8px 16px 20px;
  outline: none;
}
.facility-accordion__item:last-child .workload__solution.facility-accordion__trigger {
  border-bottom: 1px solid #D4D4D4;
}
.facility-accordion__item.is-open .facility-accordion__trigger {
  background: rgba(69, 0, 167, 0.03);
}
.facility-accordion__item.is-open .facility-accordion__trigger .solution-dot {
  background: var(--purple);
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(69, 0, 167, 0.25);
}
.facility-accordion__item.is-open .facility-accordion__trigger .solution-name {
  color: var(--purple);
  font-weight: 600;
}
.facility-accordion .solution-btn {
  transition: transform 0.3s ease;
}
.facility-accordion__item.is-open .facility-accordion__trigger .solution-btn {
  background: var(--purple);
  color: var(--white);
  transform: rotate(90deg);
}
.facility-accordion__item.is-open .facility-accordion__trigger:hover .solution-btn {
  transform: rotate(90deg) translateX(4px);
}
.facility-accordion__item.is-open .facility-accordion__trigger .solution-progress {
  background: rgba(69, 0, 167, 0.15);
}
.facility-accordion__item.is-open .facility-accordion__trigger .solution-progress__fill {
  height: 100%;
}
.facility-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.facility-accordion__item.is-open .facility-accordion__panel {
  grid-template-rows: 1fr;
}
.facility-accordion__item:not(.is-open) .facility-accordion__panel-inner {
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-width: 0;
}
.facility-accordion__panel-inner {
  min-height: 0;
  overflow: hidden;
  padding: 25px 25px 35px 20px;
  border-bottom: 1px solid #D4D4D4;
  box-sizing: border-box;
}
/* Red bracket-like tree list (vertical line + horizontal ticks) */
.facility-accordion__panel ul {
  list-style-type: none;
  list-style: none;
  margin: 0;
  padding: 0 0 0 12px;
  position: relative;
}
.facility-accordion__panel ul::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  bottom: 0.6em;
  width: 2px;
  background: var(--red);
}
.facility-accordion__panel li {
  position: relative;
  padding-left: 12px;
  margin-bottom: 19px;
  font-family: var(--font-b);
  font-size: 16px;
  line-height: 21px;
  color: var(--text-body);
}
.facility-accordion__panel li:last-child {
  margin-bottom: 0;
}
.facility-accordion__panel li::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  width: 10px;
  height: 2px;
  background: var(--red);
  transform: translateY(-50%);
}
.facility__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.facility__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 8px 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.facility__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--purple);
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(69, 0, 167, 0.35);
}
.facility__label {
  flex: 1;
  font-family: var(--font-b);
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
}
.facility__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--red);
}
.facility__arrow svg {
  width: 18px;
  height: 18px;
}
.facility__view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-family: var(--font-b);
  font-weight: 600;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: color 0.2s ease;
}
.facility:nth-child(odd) .facility__view-all,
.facility:nth-child(even) .facility__view-all {
  color: var(--text-body);
}
.facility__view-all:hover {
  color: var(--red);
}
.facility__view-all svg {
  flex-shrink: 0;
}

/* Tablet: stack layout, disable sticky, calibrate spacing */
@media (max-width: 992px) {
  .facility__grid {
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: stretch;
    display: flex;
    flex-direction: column-reverse;
    padding: 20px;
    
  }
  .facility__media {
    position: relative;
    top: auto;
    width: 100%;
    padding: 20px 20px;
    margin-top: 0;
  }
  .facility__body {
    padding-top: 0;
  }
  .facility__body-inner {
    padding-left: 20px;
  }
  .facility {
    padding: 48px 0;
  }
  .facility__subtitle {
    font-size: clamp(1.5rem, 4vw, 2rem);
    margin-bottom: 12px;
  }
  .facility-accordion__item .workload__solution.facility-accordion__trigger {
    padding: 14px 12px 14px 16px;
  }
  .facility-accordion__panel-inner {
    padding: 16px 16px 24px 16px;
  }
  .facility-accordion__panel li {
    font-size: clamp(14px, 2.5vw, 16px);
    margin-bottom: 12px;
  }
}

/* Mobile: compact spacing, readable typography, prevent overflow */
@media (max-width: 768px) {
  .facilities {
    overflow-x: hidden;
    padding-left: 0;
    padding-right: 0;
  }
  .facility__inner,
  .facility__grid,
  .facility__body,
  .facility__body-inner,
  .facility-accordion,
  .facility-accordion__panel-inner {
    min-width: 0;
  }
  .facility {
    padding: 32px 0;
  }
  .facility__inner {
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }
  .facility__grid {
    gap: 20px;
    display: flex;
    flex-direction: column-reverse;
    padding: 20px;
}
  .facility__media {
    padding: 16px 12px;
    border-radius: var(--radius-md);
  }
  .facility__address-row {
    gap: 8px;
    margin-top: 8px;
  }
  .facility__map-pin svg {
    width: 22px;
    height: 28px;
  }
  .facility__address {
    font-size: 13px;
  }
  .facility__body-inner {
    padding-left: 16px;
  }
  .facility__bar {
    width: 4px;
    min-height: 40px;
  }
  .facility__title {
    font-size: clamp(18px, 4.5vw, 22px);
    line-height: 1.3;
  }
  .facility__subtitle {
    font-size: clamp(1.25rem, 5vw, 1.5rem);
    line-height: 1.3;
    margin-bottom: 10px;
  }
  .facility__desc {
    font-size: clamp(14px, 3.5vw, 16px);
    line-height: 1.5;
    margin-bottom: 18px;
  }
  .facility-accordion {
    margin-top: 4px;
  }
  .facility-accordion__item .workload__solution.facility-accordion__trigger {
    padding: 14px 10px 14px 12px;
    min-height: 48px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .facility-accordion__item .workload__solution.facility-accordion__trigger .solution-name {
    font-size: clamp(14px, 3.5vw, 16px);
  }
  .facility-accordion__panel-inner {
    padding: 12px 12px 20px 12px;
  }
  .facility-accordion__panel ul {
    padding-left: 10px;
  }
  .facility-accordion__panel li {
    padding-left: 10px;
    font-size: clamp(13px, 3vw, 15px);
    line-height: 1.45;
    margin-bottom: 10px;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .facility-accordion__panel li::before {
    left: -10px;
    width: 8px;
  }
  .facility-accordion__panel ul::before {
    top: 0.5em;
    bottom: 0.5em;
  }
}

/* Small mobile: extra tight to maximize real estate */
@media (max-width: 480px) {
  .facility {
    padding: 24px 0;
  }
  .facility__media {
    padding: 12px 10px;
  }
  .facility__body-inner {
    padding-left: 12px;
  }
  .facility__bar {
    width: 3px;
  }
  .facility-accordion__item .workload__solution.facility-accordion__trigger {
    padding: 12px 8px 12px 10px;
  }
  .facility-accordion__panel-inner {
    padding: 10px 8px 16px 8px;
  }
  .facility-accordion__panel ul {
    padding-left: 8px;
  }
  .facility-accordion__panel li {
    padding-left: 8px;
    margin-bottom: 8px;
  }
  .facility-accordion__panel li::before {
    left: -8px;
    width: 6px;
  }
}

@media (max-width: 960px) {
  .dc-location__left {
    position: static;
  }
  .dc-location__grid.workload__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .dc-location-section--dark .workload__img-wrap {
    max-width: 100%;
  }
  .dc-location__right-link:hover {
    animation: none;
    transform: none;
  }
}

/* scrollIntoView 時避開 navbar + AMD/Intel 條，唔好遮住 list 頂 */
.bms-cards-wrap {
  scroll-margin-top: calc(var(--bms-sticky-stack) + 20px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* ── Toolbar bar：參考圖 — 淺底、圓角、垂直分隔、View by 分段 + Sort by select ── */
.bms-cards-toolbar-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.bms-cards-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px;
  min-height: 40px;
}
.bms-cards-toolbar--count { flex: 0 0 auto; }
.bms-cards-toolbar--view { flex: 1 1 auto; justify-content: center; }
.bms-cards-toolbar--sort { flex: 0 0 auto; margin-left: auto; }
.bms-cards-toolbar__divider {
  width: 1px;
  align-self: stretch;
  min-height: 32px;
  background: #e2e8f0;
  margin: 0 4px;
}
.bms-cards-toolbar__count {
  font-family: var(--font-b);
  font-size: 14px;
  font-weight: 600;
  color: #334155;
}
.bms-cards-toolbar__count-num { color: #0f172a; }
.bms-cards-toolbar__label {
  font-family: var(--font-b);
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
}
.bms-cards-toolbar--sort .bms-cards-toolbar__label { margin-right: 6px; }
/* View by：分段按鈕 — active 橙底白圖示（貼近你張圖） */
.bms-view-segment {
  display: inline-flex;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  background: #f1f5f9;
}
.bms-view-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  background: #1e293b;
  color: #fff;
  font-family: var(--font-b);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.bms-view-toggle + .bms-view-toggle {
  border-left: 1px solid #334155;
}
.bms-view-toggle:hover {
  background: #334155;
  color: #fff;
}
.bms-view-toggle.is-active {
  background: var(--purple);
  color: #fff;
}
.bms-view-toggle.is-active + .bms-view-toggle {
  border-left-color: var(--purple);
}
.bms-view-segment .bms-view-toggle:not(.is-active) {
  background: #1e293b;
}
.bms-view-toggle i { font-size: 16px; }
.bms-view-toggle__text { display: inline; }
/* Sort by：白底 select 貼近圖片 */
.bms-cards-sort {
  font-family: var(--font-b);
  font-size: 14px;
  font-weight: 500;
  color: #0f172a;
  padding: 8px 32px 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 10px center;
  appearance: none;
  cursor: pointer;
  min-width: 160px;
}
.bms-cards-sort:hover { border-color: #94a3b8; }
.bms-cards-sort:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
}
/* 強制 GRID 時收埋 List/Grid 掣（bms-force-grid 由 JS 加上） */
.bms-toolbar--no-view .bms-cards-toolbar--view {
  display: none !important;
}
/* 埋咗 View 之後唔好留兩條直線 — 隱藏所有 divider，用 gap 分隔 count / sort */
.bms-toolbar--no-view .bms-cards-toolbar__divider {
  display: none !important;
}
.bms-toolbar--no-view {
  justify-content: space-between;
  gap: 12px;
}
.bms-toolbar--no-view .bms-cards-toolbar--sort {
  margin-left: 0;
}

@media (max-width: 720px) {
  .bms-cards-toolbar-bar { flex-direction: column; align-items: stretch; }
  .bms-cards-toolbar__divider { display: none; }
  .bms-cards-toolbar--view,
  .bms-cards-toolbar--sort { justify-content: flex-start; margin-left: 0; flex-wrap: wrap; }
  .bms-cards-sort { min-width: 100%; }
  .bms-cards-toolbar-bar { padding: 10px 12px; }
  .bms-cards-toolbar__count { font-size: 13px; }
  .bms-cards-toolbar__label { font-size: 12px; }
  .bms-cards-sort { font-size: 13px; padding: 8px 28px 8px 10px; }
  .bms-cards-toolbar--sort .bms-cards-toolbar__label {display: none;}
  .bms-cards-toolbar-bar {
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 1fr 2fr;
}
  
    
  
}
@media (prefers-reduced-motion: reduce) {
  .bms-view-toggle { transition: none; }
}

.bms-cards {
  scroll-margin-top: calc(var(--bms-sticky-stack) + 20px);
  /*display: flex;*/
  display: grid;
  flex-direction: column;
  gap: 12px;
}
/* ── GRID view：一排 2～3 個，跟寬度磨合；card 內 min-width:0 先唔會撑爛 ── */
.bms-view-grid .bms-cards {
  display: grid;
  /* 預設 3 欄；唔夠位自動變 2 / 1（下方面 media） */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  align-items: stretch;
}
/* 右邊欄闊度有限（sidebar 280 + gap）— 大約過唔到三格就變兩格 */
@media (max-width: 1280px) {
  .bms-view-grid .bms-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}
/* 單欄：手機或 sidebar 變頂置後 */
@media (max-width: 720px) {
  .bms-view-grid .bms-cards {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
/* GRID card：色條用左邊線 + 其餘一欄 full width；min-width:0 防止 2/3 欄時撑出横向 scroll */
.bms-view-grid .bms-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  row-gap: 12px;
  align-items: start;
  padding: 44px 18px 15px 15px;
  min-height: 0;
  position: relative;
  border-left-width: 5px;
  border-left-style: solid;
  border-left-color: rgba(0, 255, 55, 0.5);
}
.bms-view-grid .bms-card:has(.bms-card__bar--advance) { border-left-color: #00D4FF; }
.bms-view-grid .bms-card:has(.bms-card__bar--scale)   { border-left-color: #FFC107; }
.bms-view-grid .bms-card:has(.bms-card__bar--extreme) { border-left-color: var(--green); }
/* 原本斜條 GRID 內隱藏，用 border-left 代替，避免佔欄位壓窄內容 */
.bms-view-grid .bms-card__bar {
  display: none;
}
.bms-view-grid .bms-card__left {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: none;
  padding-left: 4px;
}
/* specs 兩欄用盡寬，同 LIST 一樣 1fr 1fr */
.bms-view-grid .bms-card__specs-wrap {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0px;
  padding-left: 4px;
}
/* 底行專用一 ROW：2 column — 左邊「Pricing + 價錢」同一行；右邊闊 button（absolute 拉出唔迫埋） */
.bms-view-grid .bms-card__right {
  grid-column: 1;
  grid-row: 3;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  margin: 0;
  margin-top: 8px;
  padding: 14px clamp(84px, 26vw, 110px) 0 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  min-height: 52px;
  justify-items: start;
}
.bms-view-grid .bms-card__price-label {
  display: inline;
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
}
.bms-view-grid .bms-card__price {
  display: inline;
  font-size: clamp(20px, 4vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin: 0;
}
.bms-view-grid .bms-card__period {
  display: inline;
  font-size: 11px;
  line-height: 1.4;
  vertical-align: baseline;
}
/* BUTTON：自己一格、加闊易按；用 absolute 貼右下同一 ROW 視覺 */
.bms-view-grid .bms-card__action {
  position: absolute;
  right: 14px;
  bottom: 16px;
  width: clamp(72px, 22vw, 92px);
  height: 44px;
  min-width: 72px;
  border-radius: 10px;
  margin: 0;
}
@media (max-width: 960px) {
  /* 960 以下 bms-section__grid 變單欄，cards 可保留 2 格至更窄先變 1 */
  .bms-view-grid .bms-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .bms-view-grid .bms-card__specs-wrap {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .bms-view-grid .bms-cards {
    grid-template-columns: 1fr;
  }
}
/* ── BMS Card: fade-up entrance via transition (hover transform still works) ── */
/* ── BMS Card: matches cpu-row grid exactly ── */
.bms-card {
  display: grid;
  grid-template-columns: 5px 1.3fr 2.7fr 0.65fr auto;
  align-items: center;
  gap: 14px;
  background: #001B32;
  border: 1px solid rgba(0, 255, 55, 0.30);
  border-radius: 16px;
  padding: 18px 22px;
  box-shadow: 0 0 16px rgba(0, 255, 55, 0.08);
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease, opacity 0.5s ease-out;
  transition-delay: 0s, 0s, 0s, 0s;
  justify-items: start;
  opacity: 0;
  transform: translateY(14px);
  padding-top: 25px;
  padding-bottom: 20px;
  position: relative;
}
.js-enabled .bms-card.bms-card--visible {
  opacity: 1;
  transform: translateY(0);
}
.bms-cards .bms-card:nth-child(1).bms-card--visible { transition-delay: 0ms, 0ms, 0ms, 0ms; }
.bms-cards .bms-card:nth-child(2).bms-card--visible { transition-delay: 0ms, 0ms, 0ms, 55ms; }
.bms-cards .bms-card:nth-child(3).bms-card--visible { transition-delay: 0ms, 0ms, 0ms, 110ms; }
.bms-cards .bms-card:nth-child(4).bms-card--visible { transition-delay: 0ms, 0ms, 0ms, 165ms; }
.bms-cards .bms-card:nth-child(5).bms-card--visible { transition-delay: 0ms, 0ms, 0ms, 220ms; }
.bms-cards .bms-card:nth-child(6).bms-card--visible { transition-delay: 0ms, 0ms, 0ms, 275ms; }
.bms-cards .bms-card:nth-child(7).bms-card--visible { transition-delay: 0ms, 0ms, 0ms, 330ms; }
.bms-cards .bms-card:nth-child(8).bms-card--visible { transition-delay: 0ms, 0ms, 0ms, 385ms; }
.bms-cards .bms-card:nth-child(9).bms-card--visible { transition-delay: 0ms, 0ms, 0ms, 440ms; }
.bms-cards .bms-card:nth-child(n+10).bms-card--visible { transition-delay: 0ms, 0ms, 0ms, 495ms; }
/* Location switch: faster fade out / fade in (still smooth) */
.bms-card.bms-card--leaving {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.16s ease-out, transform 0.16s ease-out;
}
.bms-card.bms-card--entering {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out, box-shadow 0.25s ease, border-color 0.25s ease;
}
.bms-card.bms-card--entering.bms-card--entering-in {
  opacity: 1;
  transform: translateY(0);
}
.bms-card:hover {
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green), 0 0 24px rgba(0, 255, 55, 0.25);
  transform: translateY(-2px);
}
/* ADVANCE tier hover: cyan border */
.bms-card:has(.bms-card__bar--advance):hover {
  border-color: #00D4FF;
  box-shadow: 0 0 0 1px #00D4FF, 0 0 24px rgba(0, 212, 255, 0.25);
}
/* SCALE tier hover: amber border */
.bms-card:has(.bms-card__bar--scale):hover {
  border-color: #FFC107;
  box-shadow: 0 0 0 1px #FFC107, 0 0 24px rgba(255, 193, 7, 0.25);
}
/* Col 1: thin diagonal bar (like cpu-row__bar) */
.bms-card__bar {
  width: 5px;
  height: 48px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 100px;
  transform: rotate(22deg);
  flex-shrink: 0;
  transition: background 0.25s ease;
  margin-top: -15px;
}
.bms-card__bar--advance { background: #00D4FF; }
.bms-card__bar--scale   { background: #FFC107; }
.bms-card__bar--extreme { background: var(--green); }
.bms-card:hover .bms-card__bar { background: var(--green); }
/* ADVANCE tier hover: bar stays cyan */
.bms-card:has(.bms-card__bar--advance):hover .bms-card__bar { background: #00D4FF; }
/* SCALE tier hover: bar stays amber */
.bms-card:has(.bms-card__bar--scale):hover .bms-card__bar { background: #FFC107; }
/* Col 2: tier label + cpu name + cores */
.bms-card__left {
  display: flex;
  flex-direction: column;
  gap: 0px;
  min-width: 0;
}
.bms-card__slash { display: none; }
.bms-card__tier {
  font-family: var(--font-b);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 18px;
  color: #00D4FF;
  text-transform: uppercase;
}
/* Tier label colour matches the diagonal bar */
.bms-card__bar--scale   ~ .bms-card__left .bms-card__tier { color: #FFC107; }
.bms-card__bar--extreme ~ .bms-card__left .bms-card__tier { color: var(--green); }
/* Stock badge (tier 下方)：有貨 / 缺貨 */
/*.bms-card__stock-badge {
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin-top: 6px;
  margin-bottom: 2px;
  padding: 3px 11px;
  border-radius: 8px;
  background: rgb(0 255 95 / 0%);
  border: 1px solid rgb(77 255 0 / 69%);
  font-family: var(--font-b);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--green);
  width: fit-content;
  border-radius: 100px;
  position: absolute;
  right: 8px;
  top: 5px;
}*/


.bms-card__stock-badge {
  box-sizing: border-box;
  display: grid;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin-top: 6px;
  margin-bottom: 2px;
  padding: 3px 11px;
  border-radius: 8px;
  background: rgb(0 255 95 / 0%);
  border: 1px solid rgb(77 255 0 / 69%);
  font-family: var(--font-b);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--green);
  width: fit-content;
  border-radius: 100px;
  position: absolute;
  right: 8px;
  top: 5px;
  grid-template-columns: auto auto auto;
}



/* 與 .announce-bar__dot 一致：沿用 announcePulse */
@media (prefers-reduced-motion: reduce) {
  .bms-card__stock-badge-dot { animation: none !important; }
}
.bms-card__stock-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  animation: announcePulse 2.2s ease-in-out infinite;
}
.bms-card__stock-num {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.01em;
  color: #fff;
}
.bms-card__stock-label--in {
  display: inline;
  color: rgb(255 255 255 / 98%);
}
.bms-card__stock-label--out {
  display: none;
  color: #fca5a5;
  font-weight: 600;
}
.bms-card__stock-badge--out-of-stock,
.bms-card--out-of-stock .bms-card__stock-badge {
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.06);
  color: #fecaca;
}
.bms-card__stock-badge--out-of-stock .bms-card__stock-badge-dot,
.bms-card--out-of-stock .bms-card__stock-badge-dot {
  animation: none;
  background: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.35);
}
.bms-card__stock-badge--out-of-stock .bms-card__stock-num,
.bms-card--out-of-stock .bms-card__stock-num { display: none; }
.bms-card__stock-badge--out-of-stock .bms-card__stock-label--in,
.bms-card--out-of-stock .bms-card__stock-label--in { display: none; }
.bms-card__stock-badge--out-of-stock .bms-card__stock-label--out,
.bms-card--out-of-stock .bms-card__stock-label--out { display: inline; }
.bms-card__cpu {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: var(--white);
  margin: 0;
}
.bms-card__cpu sup { font-size: 0.6em; vertical-align: super; font-weight: 700; }
.bms-card__cores {
  font-family: var(--font-b);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-light);
  margin: 0;
}
/* Col 3: two-column specs */
.bms-card__specs-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 3px;
  min-width: 0;
 
}
.bms-card__specs {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bms-card__specs li {
  margin: 0 0 4px 0;
  padding-left: 14px;
  position: relative;
  font-family: var(--font-b);
  font-size: 12.5px;
  line-height: 20px;
  color: var(--white);
}
/* Left column: bullets (default green for extreme) */
.bms-card__specs:first-child li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}
/* Right column: bullets + slightly brighter text (default green for extreme) */
.bms-card__specs:last-child li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}
/* ADVANCE tier: cyan bullets */
.bms-card__bar--advance ~ .bms-card__specs-wrap .bms-card__specs li::before { background: #00D4FF; }
/* SCALE tier: amber bullets */
.bms-card__bar--scale ~ .bms-card__specs-wrap .bms-card__specs li::before { background: #FFC107; }
.bms-card__specs:last-child li {
  color: rgba(255, 255, 255, 0.95);
}



/* Col 4: price (mirrors cpu-row__price) */
.bms-card__right {
  text-align: right;
  flex-shrink: 0;
}
.bms-card__price-label {
  display: block;
  font-family: var(--font-b);
  font-weight: 500;
  font-size: 11px;
  line-height: 22px;
  color: var(--text-dim);
  margin: 0;
  margin-top: 18px;
}
.bms-card__price {
  font-family: var(--font-b);
  font-weight: 700;
  font-size: 32px;
  line-height: 28px;
  letter-spacing: -1.5px;
  color: var(--green);
  margin: 0;
}
/* ADVANCE tier: cyan price */
.bms-card__bar--advance ~ .bms-card__right .bms-card__price { color: #00D4FF; }
/* SCALE tier: amber price */
.bms-card__bar--scale ~ .bms-card__right .bms-card__price { color: #FFC107; }
.bms-card__period {
  font-weight: 500;
  font-size: 10px;
  line-height: 27px;
  color: var(--white);
  letter-spacing: 0;
}
/* Col 5: CTA — 預設 cart icon，hover 先顯示 arrow（Font Awesome + 原有 SVG） */
.bms-card__action {
  flex-shrink: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
  margin-top: 15px;
}
.bms-card__action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}
/* 預設 arrow，hover / focus 先轉 cart */
.bms-card__action-icon--contact {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  font-size: 14px;
  line-height: 1;
}
.bms-card__action-icon--cart {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  font-size: 14px;
  line-height: 1;
}
.bms-card__action-icon--arrow {
  opacity: 1;
}
.bms-card:hover .bms-card__action-icon--cart,
.bms-card:focus-within .bms-card__action-icon--cart { opacity: 1; }
.bms-card:hover .bms-card__action-icon--arrow,
.bms-card:focus-within .bms-card__action-icon--arrow { opacity: 0; }
.bms-card:hover .bms-card__action {
  background: var(--green);
  color: var(--green-ink);
}
/* ADVANCE tier hover: cyan action */
.bms-card:has(.bms-card__bar--advance):hover .bms-card__action {
  background: #00D4FF;
  color: #001B32;
}
/* SCALE tier hover: amber action */
.bms-card:has(.bms-card__bar--scale):hover .bms-card__action {
  background: #FFC107;
  color: #001B32;
}
/* Out of stock：聯絡 icon + 連去 Contact（仍可點擊）— 唔用父層 opacity，圖示先夠白同清晰 */
.bms-card:has(.bms-card__stock-badge--out-of-stock) .bms-card__action,
.bms-card.bms-card--out-of-stock .bms-card__action {
  opacity: 1;
  cursor: pointer;
  color: #fff;
}
.bms-card:has(.bms-card__stock-badge--out-of-stock) .bms-card__action-icon--contact,
.bms-card.bms-card--out-of-stock .bms-card__action-icon--contact {
  opacity: 1 !important;
  color: #fff !important;
  font-size: 19px;
}
.bms-card:has(.bms-card__stock-badge--out-of-stock) .bms-card__action-icon--contact i,
.bms-card.bms-card--out-of-stock .bms-card__action-icon--contact i {
  color: #fff !important;
}
.bms-card:has(.bms-card__stock-badge--out-of-stock) .bms-card__action-icon--cart,
.bms-card:has(.bms-card__stock-badge--out-of-stock) .bms-card__action-icon--arrow,
.bms-card.bms-card--out-of-stock .bms-card__action-icon--cart,
.bms-card.bms-card--out-of-stock .bms-card__action-icon--arrow {
  opacity: 0 !important;
}
.bms-card:has(.bms-card__stock-badge--out-of-stock):hover .bms-card__action,
.bms-card:has(.bms-card__stock-badge--out-of-stock):focus-within .bms-card__action,
.bms-card.bms-card--out-of-stock:hover .bms-card__action,
.bms-card.bms-card--out-of-stock:focus-within .bms-card__action {
  opacity: 1;
  background: #dc2626;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.5), 0 0 16px rgba(220, 38, 38, 0.35);
}
.bms-card:has(.bms-card__stock-badge--out-of-stock):hover .bms-card__action-icon--cart,
.bms-card:has(.bms-card__stock-badge--out-of-stock):focus-within .bms-card__action-icon--cart,
.bms-card:has(.bms-card__stock-badge--out-of-stock):hover .bms-card__action-icon--arrow,
.bms-card:has(.bms-card__stock-badge--out-of-stock):focus-within .bms-card__action-icon--arrow,
.bms-card.bms-card--out-of-stock:hover .bms-card__action-icon--cart,
.bms-card.bms-card--out-of-stock:focus-within .bms-card__action-icon--cart,
.bms-card.bms-card--out-of-stock:hover .bms-card__action-icon--arrow,
.bms-card.bms-card--out-of-stock:focus-within .bms-card__action-icon--arrow {
  opacity: 0 !important;
}
.bms-card:has(.bms-card__stock-badge--out-of-stock):hover .bms-card__action-icon--contact,
.bms-card:has(.bms-card__stock-badge--out-of-stock):focus-within .bms-card__action-icon--contact,
.bms-card.bms-card--out-of-stock:hover .bms-card__action-icon--contact,
.bms-card.bms-card--out-of-stock:focus-within .bms-card__action-icon--contact {
  opacity: 1 !important;
  color: #fff !important;
  font-size: 21px;
}
.bms-card:has(.bms-card__stock-badge--out-of-stock):hover .bms-card__action-icon--contact i,
.bms-card:has(.bms-card__stock-badge--out-of-stock):focus-within .bms-card__action-icon--contact i,
.bms-card.bms-card--out-of-stock:hover .bms-card__action-icon--contact i,
.bms-card.bms-card--out-of-stock:focus-within .bms-card__action-icon--contact i {
  color: #fff !important;
}
/* 平板：intro 字级略收，GRID card tier/cpu 唔好过大 */
@media (max-width: 1024px) and (min-width: 721px) {
  .bms-intro__title { font-size: clamp(22px, 3.5vw, 28px) !important; line-height: 1.25 !important; }
  .bms-view-grid .bms-card__tier { font-size: 10px; }
  .bms-view-grid .bms-card__cpu { font-size: 16px; line-height: 1.3; }
  .bms-view-grid .bms-card__cores { font-size: 13px; }
  .bms-view-grid .bms-card__specs li { font-size: 12px; }
}
@media (max-width: 960px) {
  .bms-hero { padding-bottom: 44px; }
  .title-h1.bms-hero__title,
  .bms-hero .title-h1,
  .bms-hero__title {
    font-size: clamp(24px, 6vw, 36px) !important;
    line-height: 1.15 !important;
  }
  .bms-intro__title {
    font-size: clamp(20px, 5vw, 28px) !important;
    line-height: 1.2 !important;
  }
  .bms-intro {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    margin-bottom: 40px;
  }
  .bms-intro__left { align-items: center; }
  .bms-intro .red-bar {
    width: 60px;
    height: 5px;
    min-height: 0;
    transform: rotate(0);
  }
  .bms-intro__right { max-width: none; text-align: left; }
  .bms-section__grid { grid-template-columns: 1fr; }
  .bms-sidebar { position: relative; top: auto; z-index: auto; }
  .bms-card {
    grid-template-columns: 8px 1fr auto auto;
    grid-template-rows: auto auto;
    gap: 10px 12px;
    padding: 14px 16px;
  }
  .bms-card__bar  { grid-column: 1; grid-row: 1 / -1; }
  .bms-card__left { grid-column: 2; grid-row: 1; }
  .bms-card__specs-wrap {
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: 1fr;
  }
  .bms-card__right { grid-column: 3; grid-row: 1 / -1; align-self: center; }
  .bms-card__action { grid-column: 4; grid-row: 1 / -1; align-self: center; }
  /* GRID 模式維持單欄 + border-left + 底行 flex + button absolute（唔好用 LIST 嘅 grid 覆蓋） */
  .bms-view-grid .bms-card {
    display: grid;
    grid-template-columns: 1fr;
    position: relative;
    border-left-width: 5px;
    border-left-style: solid;
    padding-bottom: 20px;
  }
  .bms-view-grid .bms-card__bar { display: none; }
  .bms-view-grid .bms-card__left,
  .bms-view-grid .bms-card__specs-wrap,
  .bms-view-grid .bms-card__right {
    grid-column: 1;
  }
  .bms-view-grid .bms-card__action {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 88px;
    height: 46px;
    min-width: 88px;
  }
}
@media (max-width: 640px) {
  .bms-hero {
    padding: 28px 0 40px;
    padding-bottom: 0;
}
  .title-h1.bms-hero__title,
  .bms-hero .title-h1,
  .bms-hero__title {
    font-size: clamp(22px, 6.5vw, 30px) !important;
    line-height: 1.2 !important;
    margin-bottom: 16px;
  }
  .bms-intro__title {
    font-size: clamp(18px, 5.2vw, 24px) !important;
    line-height: 1.25 !important;
  }
  .bms-hero__desc--lead { font-size: 15px; }
  .bms-hero__desc--sub {
    font-size: 14px;
    margin-bottom: 10px;
}
  .bms-tabs__tab { padding: 12px 24px; font-size: 14px; }
  .bms-card__cpu { font-size: 16px; }
  .bms-card__price { font-size: 22px; }
  /* GRID 單欄：card 再收一點，價錢列唔好顶住 button */
  .bms-view-grid .bms-card {
    padding: 14px 14px 18px 12px;
    padding-top: 35px;
}
  .bms-view-grid .bms-card__price { font-size: 30px; }
  .bms-view-grid .bms-card__price-label { font-size: 11px; }
  .bms-view-grid .bms-card__action {
    right: 12px;
    bottom: 0;
    width: 100px;
    height: 45px;
    min-width: 80px;
}
  .bms-view-grid .bms-card__right {
    padding-right: 92px;
    padding-top: 12px;
    display: grid;
    grid-template-columns: 1fr;
  }

  .bms-section {
    padding: 30px 0 65px;
   
  }

}





/* ============================================================
   Server Configuration page — layout aligned with xlc.com flow
   Left: numbered steps + selectable cards; Right: sticky summary
   ============================================================ */
/* Server config — premium shell: soft gradient + readable contrast */
/*.sc-body {
  background: linear-gradient(180deg, #f0f2f5 0%, var(--bg-soft) 32%, #fafbfc 100%);
}*/
.sc-page-lead a { color: var(--purple-light); font-weight: 600; }

/* Progress stepper (wizard clarity, xlc-style flow) */
.sc-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 4px;
  margin-top: 20px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.75);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 12px rgba(0,31,53,0.04);
}
.sc-progress__item {
  font-family: var(--font-h);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 6px 10px;
  border-radius: 6px;
}
.sc-progress__item--active {
  background: var(--navy);
  color: var(--white);
}
.sc-progress__sep {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
}

/* Filter bar — same intent as xlc Filter | CPU | Price */
/* ── Step 2 combined toolbar: segment control (left) + compact selects (right) ── */
.sc-step-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
/* iOS-style segment control — smooth tab switch */
.sc-type-seg {
  display: inline-flex;
  background: rgba(0,31,53,0.06);
  border-radius: var(--radius-sm);
  padding: 4px;
  gap: 2px;
}
.sc-type-seg__btn {
  font-family: var(--font-b);
  font-size: 15px;
  font-weight: 600;
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--sc-dur) var(--sc-ease), color var(--sc-dur) var(--sc-ease), box-shadow var(--sc-dur) var(--sc-ease), transform var(--sc-dur-fast) var(--sc-ease);
  white-space: nowrap;
}
.sc-type-seg__btn:hover { color: var(--text-dark); }
.sc-type-seg__btn:active { transform: scale(0.98); }
.sc-type-seg__btn--active {
  background: #fd0013;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,31,53,0.12), 0 0 0 1px rgba(0,31,53,0.06);
}

.sc-type-seg__btn--active:hover{color:var(--white)}

/* Compact filter/sort selects — right side */
.sc-toolbar-selects {
  display: flex;
  gap: 8px;
  align-items: center;
}
/* Match Version select box: same trigger look (border, padding, arrow, font) */
.sc-toolbar-select {
  font-family: var(--font-b);
  font-size: 14px;
  font-weight: 500;
  color: #0f172a;
  width: 100%;
  min-width: 0;
  padding: 10px 36px 10px 14px;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-sm);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 12px center;
  background-size: 12px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  transition: border-color var(--sc-dur) var(--sc-ease), box-shadow var(--sc-dur) var(--sc-ease);
}
.sc-toolbar-select:hover { border-color: #94a3b8; }
.sc-toolbar-select:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
}
@media (max-width: 640px) {
  .sc-step-toolbar { flex-direction: column; align-items: flex-start; }
  .sc-type-seg { width: 100%; }
  .sc-type-seg__btn { flex: 1; text-align: center; }
  .sc-toolbar-selects { width: 100%; }
  .sc-toolbar-select { flex: 1; }
}
/* Keep old labels/selects from appearing if referenced elsewhere */
.sc-filter-bar { display: none; }
/* Server Configuration hero：同 data-center-hong-kong .bms-hero + 與主內容區間距 */
.sc-page.bms-page .sc-bms-hero.bms-hero {
  text-align: center;
  padding-bottom: 0;
}
.sc-page.bms-page .sc-bms-hero .bms-hero__breadcrumb {
  text-align: center;
}
/* 標題一行：字級跟全域 .bms-hero__title（同 data-center-hong-kong） */
.sc-page.bms-page .sc-bms-hero .bms-hero__title--sc-single .bms-hero__title-fallback {
  white-space: nowrap;
}
.sc-page.bms-page .sc-bms-hero .bms-hero__title--sc-single .bms-hero__title-line-wrap--single {
  width: auto;
  max-width: none;
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  overflow-wrap: normal;
  word-wrap: normal;
}
.sc-page.bms-page .sc-bms-hero .bms-hero__title--sc-single .bms-hero__title-reserve {
  white-space: nowrap;
}
.sc-page.bms-page .sc-bms-hero .bms-hero__title--sc-single .bms-hero__title-type {
  white-space: nowrap;
}
.sc-breadcrumb-wrap {
  background: transparent;
  padding: 20px 0 22px;
  border-bottom: none;
  text-align: center;
}
.sc-breadcrumb-wrap .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sc-breadcrumb { margin-bottom: 12px; }
.sc-page-title {
  font-family: var(--font-h);
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 0;
}
.sc-page-lead {
  font-family: var(--font-b);
  font-size: 15px;
  color: var(--text-muted);
  max-width: 720px;
  line-height: 1.55;
}

/* Server config: smooth animation (easing + duration), visual only — no SEO impact */
.sc-page {
  padding: 0px 0 72px;
  --sc-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --sc-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --sc-dur: 0.28s;
  --sc-dur-fast: 0.2s;
}
@media (prefers-reduced-motion: reduce) {
  .sc-page {
    --sc-dur: 0.01ms;
    --sc-dur-fast: 0.01ms;
  }
}
.sc-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
  padding-top: 20px;
}

/* Left column — transparent stack; each step = own card */
.sc-main {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Every numbered step = individual elevated card */
.sc-main > .sc-step {
  background: var(--white);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(0,31,53,0.07);
  padding: 26px 28px 30px;
  box-shadow: 0 2px 14px rgba(0,31,53,0.05), 0 1px 3px rgba(0,0,0,0.03);
  margin-bottom: 0;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(0,31,53,0.07);
}
.sc-main > .sc-step:last-of-type {
  border-bottom: 1px solid rgba(0,31,53,0.07);
  margin-bottom: 0;
  padding-bottom: 30px;
}
.sc-main > .sc-cta-block {
  margin-top: 8px;
}
.sc-main > .sc-step--gpu[style*="display: none"],
.sc-main > .sc-step--gpu[hidden] {
  display: none !important;
}
/* Step 2 same card style, no special highlight needed */
.sc-step--highlight {
  background: var(--white);
  border: 1px solid rgba(0,31,53,0.07);
  box-shadow: 0 2px 14px rgba(0,31,53,0.05);
}
.sc-step__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
  margin-bottom: 18px;
  max-width: 680px;
}
.sc-step__desc strong { color: var(--text-dark); }
.sc-step__hint--inline { margin-top: 12px; margin-bottom: 0; }
.sc-bandwidth__addon {
  font-size: 13px;
  font-weight: 700;
  color: var(--red-dark);
  margin-left: 8px;
}
/* Old type-tabs kept for backward compat but hidden; use sc-type-seg now */
.sc-type-tabs { display: none; }

.sc-step { margin-bottom: 0; }
.sc-step__title {
  font-family: var(--font-h);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sc-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
  color: var(--white);
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(0,31,53,0.18);
  flex-shrink: 0;
}
.sc-step__body { padding-left: 0; }
.sc-step__hint {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 12px;
}
.sc-step__hint a { color: var(--purple-light); font-weight: 600; }
.sc-subtitle {
  font-family: var(--font-h);
  font-size: 15px;
  font-weight: 700;
  color: white;
  margin: 20px 0 12px;
  background: var(--red);
  padding: 8px 19px;
  border-radius: 5px;
}
.sc-subtitle:first-of-type { margin-top: 0; }

/* Selectable cards — red border + check like reference */
.sc-card-grid {
  display: grid;
  gap: 12px;
}
.sc-card-grid--region { grid-template-columns: repeat(3, 1fr); }
.sc-card-grid--compact { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

/* Server config page only: full-width row for Memory/Storage, price on right */
.sc-card-grid--row {
  grid-template-columns: 1fr;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sc-card-grid--row .sc-chip {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 14px 18px;
  gap: 14px;
}
.sc-card-grid--row .sc-chip__radio {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #94a3b8;
  border-radius: 50%;
  background: var(--white);
  transition: border-color var(--sc-dur) var(--sc-ease), background var(--sc-dur) var(--sc-ease), box-shadow var(--sc-dur) var(--sc-ease);
}
.sc-card-grid--row .sc-chip--active .sc-chip__radio,
.sc-body .sc-card-grid--row .sc-chip--active .sc-chip__radio {
  border-color: var(--red);
  background: radial-gradient(circle at center, var(--red) 0, var(--red) 4px, var(--white) 5px);
}
.sc-card-grid--row .sc-chip__label {
  display: block;
  flex: 1;
  min-width: 0;
}
.sc-card-grid--row .sc-chip__label small {
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.sc-card-grid--row .sc-chip__price {
  flex-shrink: 0;
  margin-left: 0;
  font-weight: 700;
  font-size: 14px;
  color: var(--red);
}
.sc-card-grid--row .sc-chip__price--included {
  color: var(--text-dark);
}

.sc-card {
  position: relative;
  text-align: left;
  padding: 16px 14px;
  border: 2px solid var(--border-lt);
  border-radius: var(--radius-sm);
  background: var(--bg-gray);
  cursor: pointer;
  font-family: var(--font-b);
  transition: border-color var(--sc-dur) var(--sc-ease), box-shadow var(--sc-dur) var(--sc-ease), background var(--sc-dur) var(--sc-ease), transform var(--sc-dur-fast) var(--sc-ease);
}
.sc-card:hover { border-color: var(--text-muted); transform: translateY(-1px); }
.sc-card--active {
  border-color: var(--red);
  background: var(--white);
  box-shadow: 0 0 0 1px rgba(255,0,0,0.15);
}
/* Server config page only: cyber-style borders (no impact on other pages) */
.sc-body .sc-card {
  border: 1px solid rgba(0,212,255,0.2);
  background: rgba(0,31,53,0.02);
}
.sc-body .sc-card:hover {
  border-color: rgba(196,30,58,0.35);
  box-shadow: 0 0 12px rgba(196,30,58,0.08);
  transform: translateY(-1px);
}
.sc-body .sc-card--active {
  border-color: rgba(196,30,58,0.7);
  background: rgba(196,30,58,0.06);
  box-shadow: 0 0 0 1px rgba(196,30,58,0.3), 0 0 20px rgba(196,30,58,0.15);
}
.sc-body .sc-chip {
  border: 1px solid rgba(196,30,58,0.2);
  background: rgba(0,31,53,0.02);
  transition: border-color var(--sc-dur) var(--sc-ease), box-shadow var(--sc-dur) var(--sc-ease), background var(--sc-dur) var(--sc-ease), transform var(--sc-dur-fast) var(--sc-ease);
}
.sc-body .sc-chip:hover {
  border-color: rgba(196,30,58,0.45);
  box-shadow: 0 0 10px rgba(196,30,58,0.08);
  transform: translateY(-1px);
}
.sc-body .sc-chip--active {
  border-color: rgba(196,30,58,0.65);
  background: rgba(196,30,58,0.06);
  box-shadow: 0 0 0 1px rgba(196,30,58,0.25), 0 0 16px rgba(196,30,58,0.12);
}
.sc-body .sc-os {
  border: 1px solid rgba(196,30,58,0.2);
  background: rgba(0,31,53,0.02);
  transition: border-color var(--sc-dur) var(--sc-ease), box-shadow var(--sc-dur) var(--sc-ease), background var(--sc-dur) var(--sc-ease), transform var(--sc-dur-fast) var(--sc-ease);
}
.sc-body .sc-os:hover { border-color: rgba(196,30,58,0.45); transform: translateY(-2px); }
.sc-body .sc-os--active {
  border-color: rgba(196,30,58,0.65);
  box-shadow: 0 0 0 1px rgba(196,30,58,0.25), 0 0 12px rgba(196,30,58,0.1);
}
.sc-body .sc-subnet-opt {
  border: 1px solid rgba(196,30,58,0.2);
  background: rgba(255,255,255,0.6);
  transition: border-color var(--sc-dur) var(--sc-ease), box-shadow var(--sc-dur) var(--sc-ease), background var(--sc-dur) var(--sc-ease);
}
.sc-body .sc-subnet-opt:hover {
  border-color: rgba(196,30,58,0.45);
  box-shadow: 0 0 12px rgba(196,30,58,0.08);
}
.sc-body .sc-subnet-opt--active {
  border-color: rgba(196,30,58,0.65);
  box-shadow: 0 0 0 1px rgba(196,30,58,0.25), 0 0 16px rgba(196,30,58,0.12);
}

.sc-card__check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 100%;
  background: var(--red);
  color: var(--white);
  font-size: 11px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: transform var(--sc-dur-fast) var(--sc-ease), box-shadow var(--sc-dur) var(--sc-ease);
}
.sc-card--active .sc-card__check { display: flex; }
.sc-body .sc-card--active .sc-card__check {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
  box-shadow: 0 0 10px rgba(255,0,0,0.35);
}
/* Network route: radio at front, no tick */
.sc-card-grid--network .sc-card__check { display: none !important; }
.sc-network-card-with-bw {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-width: 0;
}
.sc-network-card-with-bw .sc-card { flex: 1; min-width: 0; }
.sc-network-card-with-bw .sc-bandwidth-slot { flex-shrink: 0; margin-left: auto; min-width: 0; }
.sc-network-card-with-bw .sc-bandwidth { flex-shrink: 0; }
.sc-card-grid--network .sc-card {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}
.sc-card-grid--network .sc-card__radio {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #94a3b8;
  border-radius: 50%;
  background: var(--white);
  transition: border-color var(--sc-dur) var(--sc-ease), background var(--sc-dur) var(--sc-ease), box-shadow var(--sc-dur) var(--sc-ease);
}
.sc-card-grid--network .sc-card--active .sc-card__radio {
  border-color: var(--red);
  background: radial-gradient(circle at center, var(--red) 0, var(--red) 4px, var(--white) 5px);
}
.sc-card-grid--network .sc-card__main {
  flex: 1;
  min-width: 0;
}
.sc-card-grid--network .sc-card__main .sc-card__label { display: block; }
.sc-card-grid--network .sc-card__main .sc-card__sub { display: block; margin-top: 4px; }

.sc-card__flag { font-size: 22px; display: block; margin-bottom: 6px; }
/* flag-icons: 3:2 ratio, width not compressed (region cards + dropdown) */
.sc-card__flag--fi .fi {
  width: 2.25em;
  height: 1.5em;
  min-width: 2.25em;
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  object-fit: cover;
}
.sc-card__flag--img { display: block; margin-bottom: 6px; line-height: 0; }
.sc-card__flag--img img {
  display: block;
  width: 48px;
  height: 32px;
  object-fit: contain;
  border-radius: var(--radius-sm);
}
.navbar__dropdown-icon--flag .fi {
  width: 1.25em;
  height: 1em;
  border-radius: 3px;
  vertical-align: -2px;
}
.sc-card__label { display: block; font-weight: 700; color: var(--text-dark); font-size: 15px; }
.sc-card__sub { display: block; font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.sc-chip {
  padding: 12px 10px;
  border: 2px solid var(--border-lt);
  border-radius: var(--radius-sm);
  background: var(--bg-gray);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-label);
  transition: border-color var(--sc-dur) var(--sc-ease), background var(--sc-dur) var(--sc-ease), box-shadow var(--sc-dur) var(--sc-ease), transform var(--sc-dur-fast) var(--sc-ease);
}
.sc-chip small { display: block; font-weight: 400; font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.sc-chip:hover { border-color: var(--text-muted); transform: translateY(-1px); }
.sc-chip--active { border-color: var(--red); background: var(--white); }

.sc-plan-list { display: flex; flex-direction: column; gap: 10px; }
.sc-plan {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 16px;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border: 2px solid var(--border-lt);
  border-radius: var(--radius-sm);
  background: var(--bg-gray);
  cursor: pointer;
  font-family: var(--font-b);
  transition: border-color var(--sc-dur) var(--sc-ease), background var(--sc-dur) var(--sc-ease);
}
.sc-plan:hover { border-color: var(--text-muted); }
.sc-plan--active { border-color: var(--red); background: var(--white); }
.sc-plan__check {
  grid-row: 1 / span 2;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: transparent;
}
.sc-plan--active .sc-plan__check { background: var(--red); border-color: var(--red); color: var(--white); }
.sc-plan__name { grid-column: 2; grid-row: 1; font-weight: 700; color: var(--text-dark); }
.sc-plan__specs { grid-column: 2; grid-row: 2; font-size: 13px; color: var(--text-muted); }
.sc-plan__price { grid-row: 1 / span 2; grid-column: 3; align-self: center; font-weight: 800; font-size: 18px; color: var(--red); font-family: var(--font-h); }
.sc-plan__price span { font-size: 12px; font-weight: 600; color: var(--text-muted); }

.sc-bandwidth {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-gray);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-lt);
  max-width: 420px;
}
.sc-bandwidth__btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--white);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  transition: background var(--sc-dur-fast) var(--sc-ease), border-color var(--sc-dur-fast) var(--sc-ease), transform var(--sc-dur-fast) var(--sc-ease);
}
.sc-bandwidth__btn:hover { background: var(--bg-gray); }
.sc-bandwidth__btn:active { transform: scale(0.95); }
.sc-bandwidth__value { flex: 1; font-weight: 700; font-family: var(--font-h); min-width: 0; }
.sc-bandwidth__included { font-size: 13px; color: var(--text-dark); font-weight: 600; }
.sc-bandwidth__addon { color: var(--red) !important; }

.sc-network-bandwidth-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px 32px;
}
.sc-network-col { flex: 1; min-width: 280px; }
.sc-bandwidth-col {
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sc-bandwidth-col .sc-bandwidth { max-width: 320px; }
@media (max-width: 767px) {
  .sc-network-bandwidth-row { flex-direction: column; }
  .sc-bandwidth-col .sc-bandwidth { max-width: 100%; }
}

.sc-ipv4-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--navy-deep);
  color: var(--white);
  border-radius: var(--radius-sm);
}
.sc-ipv4-bar__tag {
  background: var(--red);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
}
.sc-ipv4-bar__main { flex: 1; font-weight: 600; }
.sc-ipv4-bar__price { font-size: 13px; color: var(--red-light); }

/* --- Additional Features: IP tab switcher --- */
.sc-ip-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid rgba(0,31,53,0.1);
  margin-bottom: 20px;
}
.sc-ip-tab {
  background: none;
  border: none;
  padding: 10px 20px;
  font-family: var(--font-b);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--sc-dur) var(--sc-ease), border-color var(--sc-dur) var(--sc-ease);
  border-radius: 0;
}
.sc-ip-tab:hover { color: var(--navy); }
.sc-ip-tab--active {
  color: var(--navy);
  border-bottom-color: var(--red);
}
.sc-ip-panel[hidden] { display: none; }

/* Subnet included row (default /30 option); button for mutual exclusivity with Additional Subnet */
.sc-subnet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--bg-gray);
  border: 1px solid rgba(0,31,53,0.08);
  border-radius: var(--radius-sm);
  width: 100%;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color var(--sc-dur) var(--sc-ease), box-shadow var(--sc-dur) var(--sc-ease), background var(--sc-dur) var(--sc-ease);
}
.sc-subnet-row:hover { border-color: rgba(0,31,53,0.18); }
.sc-subnet-row--active {
  border-color: var(--red);
  box-shadow: 0 0 0 1px rgba(255,0,0,0.2), 0 0 12px rgba(255,0,0,0.08);
}
.sc-subnet-row--radio { gap: 14px; }
.sc-subnet-row__radio {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #94a3b8;
  border-radius: 50%;
  background: var(--white);
  transition: border-color var(--sc-dur) var(--sc-ease), background var(--sc-dur) var(--sc-ease);
}
.sc-subnet-row__radio--active {
  border-color: var(--red);
  background: radial-gradient(circle at center, var(--red) 0, var(--red) 4px, var(--white) 5px);
}
.sc-subnet-row__main {
  flex: 1;
  min-width: 0;
  font-family: var(--font-h);
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
}
.sc-subnet-row__left { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.sc-subnet-row__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sc-subnet-row__cidr {
  font-family: var(--font-h);
  font-size: 20px;
  font-weight: 800;
  color: var(--navy);
}
.sc-subnet-row__usable {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
}
.sc-subnet-row__type {
  font-size: 13px;
  color: var(--text-muted);
}
.sc-subnet-row__badge {
  background: rgba(0,0,0,0.06);
  color: var(--text-dark);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 99px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* Additional subnet selectable grid */
.sc-subnet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
/* Additional Subnet: full-width rows like Storage, price right */
.sc-subnet-grid--row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  grid-template-columns: none;
}
.sc-subnet-grid--row .sc-subnet-opt {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 18px;
  gap: 16px;
}
.sc-subnet-grid--row .sc-subnet-opt__radio {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #94a3b8;
  border-radius: 50%;
  background: var(--white);
  transition: border-color var(--sc-dur) var(--sc-ease), background var(--sc-dur) var(--sc-ease);
}
.sc-subnet-grid--row .sc-subnet-opt--active .sc-subnet-opt__radio {
  border-color: var(--red);
  background: radial-gradient(circle at center, var(--red) 0, var(--red) 4px, var(--white) 5px);
}
.sc-subnet-grid--row .sc-subnet-opt__left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.sc-subnet-grid--row .sc-subnet-opt__price {
  flex-shrink: 0;
  margin-top: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--red);
}
.sc-subnet-opt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: var(--white);
  border: 1.5px solid rgba(0,31,53,0.1);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--sc-dur) var(--sc-ease), box-shadow var(--sc-dur) var(--sc-ease), background var(--sc-dur) var(--sc-ease);
}
.sc-subnet-opt:hover {
  border-color: var(--navy);
  box-shadow: 0 2px 12px rgba(0,31,53,0.08);
}
.sc-subnet-opt--active {
  border-color: var(--navy);
  background: rgba(0,31,53,0.03);
  box-shadow: 0 0 0 3px rgba(0,31,53,0.08);
}
.sc-subnet-opt__cidr {
  font-family: var(--font-h);
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
}
.sc-subnet-opt__desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.3;
}
.sc-subnet-opt__price {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--red);
}

/* Operating system: clearer grid + version row */
.sc-step__body--os {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.sc-os-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 14px;
}
@media (min-width: 640px) {
  .sc-os-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 900px) {
  .sc-os-grid { grid-template-columns: repeat(6, 1fr); }
}
.sc-os {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 10px;
  border: 2px solid var(--border-lt);
  border-radius: var(--radius-sm);
  background: var(--bg-gray);
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  transition: border-color var(--sc-dur) var(--sc-ease), box-shadow var(--sc-dur) var(--sc-ease), background var(--sc-dur) var(--sc-ease);
  text-align: center;
}
.sc-os .sc-card__check { display: none; }
.sc-os--active .sc-card__check { display: flex; }
.sc-body .sc-os--active .sc-card__check {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
  box-shadow: 0 0 10px rgba(255,0,0,0.35);
}
.sc-os__icon {
  display: block;
  line-height: 0;
}
.sc-os__icon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter var(--sc-dur) var(--sc-ease-out), opacity var(--sc-dur) var(--sc-ease-out);
}
.sc-os--active .sc-os__icon img {
  filter: none;
  opacity: 1;
}
.sc-os__name {
  display: block;
  line-height: 1.3;
  color: var(--text-dark);
  font-size: 13px;
}
.sc-os small {
  display: block;
  margin-top: 2px;
  color: var(--red);
  font-size: 12px;
  font-weight: 700;
}
.sc-os--active { border-color: var(--red); background: var(--white); }
.sc-os-version {
  margin-top: 0;
 
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sc-os-version__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}
/* Custom version dropdown (no native select) */
.sc-os-version-dropdown {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.sc-os-version-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  padding: 10px 36px 10px 14px;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font-b);
  font-size: 14px;
  font-weight: 500;
  color: #0f172a;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--sc-dur) var(--sc-ease), box-shadow var(--sc-dur) var(--sc-ease);
}
.sc-os-version-trigger__text {
  white-space: normal;
  word-break: break-word;
  flex: 1;
  min-width: 0;
}
.sc-os-version-trigger:hover {
  border-color: #94a3b8;
}
.sc-os-version-dropdown[aria-expanded="true"] .sc-os-version-trigger {
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
}
.sc-os-version-trigger__arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
  transition: transform var(--sc-dur) var(--sc-ease);
}
.sc-os-version-dropdown[aria-expanded="true"] .sc-os-version-trigger__arrow {
  transform: translateY(-50%) rotate(180deg);
}
.sc-os-version-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: 420px;
  max-height: 280px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  z-index: 20;
  display: none;
}
.sc-os-version-dropdown[aria-expanded="true"] .sc-os-version-menu {
  display: block;
}
.sc-os-version-option {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: none;
  font-family: var(--font-b);
  font-size: 14px;
  font-weight: 500;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
  transition: background var(--sc-dur-fast) var(--sc-ease), color var(--sc-dur-fast) var(--sc-ease);
  white-space: normal;
  word-break: break-word;
}
.sc-os-version-option:hover {
  background: #f1f5f9;
}
.sc-os-version-option--selected {
  background: #fef3c7;
  color: #0f172a;
}
.sc-os-version-option__price {
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
  margin-left: 6px;
}
.sc-select {
  font-family: var(--font-b);
  font-size: 14px;
  font-weight: 500;
  color: #0f172a;
  width: 100%;
  max-width: 320px;
  padding: 10px 36px 10px 14px;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-sm);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 12px center;
  appearance: none;
  cursor: pointer;
}
.sc-select:hover { border-color: #94a3b8; }
.sc-select:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
}

.sc-cta-block {
  margin-top: 32px;
  padding: 24px;
  background: #effff5;
  border-radius: var(--radius-sm);
  text-align: center;
  border: 1px solid #a2ffa2;
}
.sc-cta-block__title { font-family: var(--font-h); font-size: 18px; margin-bottom: 8px; color: var(--navy); }
.sc-cta-block__desc { font-size: 14px; color: var(--text-muted); margin-bottom: 16px; }

/* Right sticky summary */
.sc-summary {
  position: sticky;
  top: calc(72px + 16px);
}
.sc-summary__inner {
  background: linear-gradient(168deg, #151d28 0%, #0c1018 50%, #0a0c14 100%);
  border-radius: var(--radius-sm);
  padding: 28px 24px 32px;
  color: var(--text-light);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 24px 48px rgba(0,0,0,0.35),
    0 8px 24px rgba(0,0,0,0.2);
}
.sc-summary__billing {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sc-summary__quantity {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sc-summary__quantity-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}
.sc-summary__quantity .sc-qty-stepper {
  display: inline-flex;
  align-items: stretch;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.sc-summary__quantity .sc-qty-btn {
  border: none;
  background: transparent;
  color: var(--text-light);
  font-family: var(--font-h);
  font-size: 16px;
  line-height: 1;
  padding: 10px 14px;
  cursor: pointer;
  transition: background var(--sc-dur) var(--sc-ease);
}
.sc-summary__quantity .sc-qty-btn:hover {
  background: rgba(255,255,255,0.08);
}
.sc-summary__quantity .sc-qty-input {
  width: 40px;
  min-width: 0;
  padding: 8px 4px;
  border: none;
  border-left: 1px solid rgba(255,255,255,0.1);
  border-right: 1px solid rgba(255,255,255,0.1);
  background: transparent;
  color: var(--white);
  font-family: var(--font-h);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
.sc-summary__quantity .sc-qty-input::-webkit-outer-spin-button,
.sc-summary__quantity .sc-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.sc-summary__quantity .sc-qty-input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.sc-summary__billing-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.sc-summary__cycles { display: flex; gap: 8px; flex-wrap: wrap; }
/* Four billing options: 2×2 grid, compact labels */
.sc-summary__cycles--four {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sc-summary__cycles--four .sc-summary__cycle {
  flex: none;
  padding: 10px 8px;
  font-size: 11px;
  letter-spacing: 0.02em;
  line-height: 1.25;
}
.sc-summary__cycle {
  flex: 1;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--text-light);
  font-family: var(--font-h);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--sc-dur) var(--sc-ease), border-color var(--sc-dur) var(--sc-ease), color var(--sc-dur) var(--sc-ease);
}
.sc-summary__cycle:hover { background: rgba(255,255,255,0.08); }
.sc-summary__cycle--active {
  border-color: var(--red);
  background: rgba(255,0,0,0.12);
  color: var(--white);
}
/* Billing cycle select: mobile only — same style as Version select, red border + white text */
.sc-summary__cycle-select-wrap {
  display: none;
  position: relative;
  width: 100%;
}
.sc-summary__cycle-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  min-width: 0;
  padding: 10px 36px 10px 14px;
  border: 1px solid var(--red);
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.2);
  color: #fff;
  font-family: var(--font-b);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--sc-dur) var(--sc-ease), box-shadow var(--sc-dur) var(--sc-ease);
}
.sc-summary__cycle-select:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(255,0,0,0.35);
}
.sc-summary__cycle-select option {
  color: #0f172a;
  background: #fff;
}
.sc-summary__cycle-select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}
.sc-summary__usd {
  font-weight: 600;
  opacity: 0.85;
  margin-left: 6px;
}
.sc-summary__price { display: block; }
.sc-summary__price-value { display: inline-block; }
.sc-summary__price-period {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  margin-left: 4px;
}
.sc-summary__cart {
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 20px 18px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--red);
  color: var(--white);
  text-decoration: none;
  box-sizing: border-box;
  font-family: var(--font-h);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background var(--sc-dur) var(--sc-ease), color var(--sc-dur) var(--sc-ease), transform var(--sc-dur-fast) var(--sc-ease);
}
.sc-summary__cart:link,
.sc-summary__cart:visited { color: var(--white); }
.sc-summary__cart:hover { background: var(--red-dark); color: var(--white); transform: translateY(-1px); }
.sc-summary__cart:active { transform: translateY(0); }
.sc-summary__deploy {
  margin-top: 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
}
.sc-summary__deploy:hover { background: rgba(255,255,255,0.08); }
.sc-summary__note a { color: var(--purple-light); }
.sc-summary__title {
  font-family: var(--font-h);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 8px;
  border-bottom: 1px solid var(--red);
  padding-bottom: 8px;
}
.sc-summary__list { list-style: none; margin-bottom: 24px; }
.sc-summary__list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
}
.sc-summary__k { color: var(--text-dim); }
.sc-summary__v { color: var(--white); font-weight: 600; text-align: right; }
.sc-summary__price {
  padding: 0px 0 8px;
  /* border-top: 1px solid rgba(255, 255, 255, 0.08); */
}
.sc-summary__price-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 4px;
  width: fit-content;
  background: #ffffff2e;
  border-radius: 100px;
  padding: 0px 11px;
}
.sc-summary__price-value {
  font-family: var(--font-h);
  font-size: 32px;
  font-weight: 800;
  color: var(--white);
}
/* .sc-summary__deploy consolidated above with outline style */
.sc-summary__note { margin-top: 12px; font-size: 11px; color: var(--text-dim); }

@media (max-width: 1100px) {
  .sc-layout {
    grid-template-columns: 1fr;
    gap: 25px;
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
}
  /* 只限 Server configuration（.sc-layout），勿套用到 cart / order-status 嘅 .sc-summary */
  .sc-layout .sc-summary { position: static; order: -1; }
  .sc-layout .sc-summary__inner { margin-bottom: 24px; }
  .sc-layout .sc-summary__deploy {
 
    margin: 0 auto;
    width: fit-content;
    display: block;
    margin-top: 25px;
    padding: 8px 20px;
}


}
@media (max-width: 768px) {
  .sc-breadcrumb-wrap { padding: 14px 0 16px; }
  .sc-page-title { font-size: 22px; }
  .sc-page { padding-bottom: 24px; }
  .sc-card-grid--region { grid-template-columns: 1fr; gap: 10px; }
  .sc-main > .sc-step { padding: 20px 18px 24px; }
  .sc-step__title { font-size: 14px; margin-bottom: 16px; }
  .sc-step__num { min-width: 28px; height: 28px; font-size: 13px; }
  .sc-step-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
  .sc-type-seg { justify-content: flex-start; }
  .sc-toolbar-selects { flex-wrap: wrap; }
  .sc-network-card-with-bw { flex-wrap: wrap; }
  .sc-network-card-with-bw .sc-bandwidth-slot { margin-left: 0; width: 100%; }
  .sc-subnet-row__main { font-size: 14px; }
  .sc-os-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sc-os { padding: 14px 8px; }
  .sc-os__icon img { width: 40px; height: 40px; }
  /* Version select: full width on mobile */
  .sc-os-version-dropdown { width: 100%; max-width: none; }
  .sc-os-version-trigger { width: 100%; box-sizing: border-box; }
  /* Product list: switch to GRID layout (2 cols) like xlc.com server-configuration */
  .sc-product-list .bms-cards {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .sc-product-list .bms-card {
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto auto;
    row-gap: 4px;
    padding: 12px 12px 12px 10px;
    min-width: 0;
    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: #00D4FF;
  }
  .sc-product-list .bms-card:has(.bms-card__bar--scale) { border-left-color: #FFC107; }
  .sc-product-list .bms-card:has(.bms-card__bar--extreme) { border-left-color: var(--green); }
  .sc-product-list .bms-card__bar { display: none !important; }
  .sc-product-list .bms-card__specs-wrap { display: none !important; }
  .sc-product-list .bms-card__left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    grid-column: 1 / -1;
    grid-row: 1 / 4;
    min-width: 0;
  }
  .sc-product-list .bms-card__tier { margin: 0; font-size: 10px; line-height: 1.2; }
  .sc-product-list .bms-card__cpu { margin: 0; font-size: 13px; line-height: 1.25; }
  .sc-product-list .bms-card__cores { margin: 0; font-size: 11px; color: var(--text-muted); }
  .sc-product-list .bms-card__gpu-spec-line {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.92);
  }
  .sc-product-list .bms-card__stock-badge {
    margin-top: 4px;
    align-self: flex-start;
    max-width: 100%;
  }
  .sc-product-list .bms-card__right {
    grid-column: 1;
    grid-row: 4;
    margin: 0;
    padding: 6px 0 0;
    border-top: 1px solid rgba(0,31,53,0.08);
    align-self: end;
  }
  .sc-product-list .bms-card__price-label { display: none; }
  .sc-product-list .bms-card__price { font-size: 16px; }
  .sc-product-list .bms-card__action {
    grid-column: 2;
    grid-row: 4;
    align-self: end;
    margin: 0;
  }

  
}

/* 680px: Region cards — flag left, content right, tick same position */
@media (max-width: 680px) {
  .sc-card-grid--region .sc-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 2px 14px;
    align-items: center;
    padding: 14px 14px 14px 12px;
    text-align: left;
  }
  .sc-card-grid--region .sc-card__flag {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
    margin-bottom: 0;
  }
  .sc-card-grid--region .sc-card__flag--img img {
    width: 40px;
    height: 28px;
  }
  .sc-card-grid--region .sc-card__label {
    grid-column: 2;
    grid-row: 1;
  }
  .sc-card-grid--region .sc-card__sub {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
  }
  .sc-card-grid--region .sc-card__check {
    top: 8px;
    right: 8px;
  }
}

/* 680px: Product list — INFO full width stacked, PRICE + BUTTON one row two cols (no overlap) */
@media (max-width: 680px) {
  .sc-product-list .bms-cards {
    grid-template-columns: 1fr !important;
  }
  .sc-product-list .bms-card {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: minmax(0, auto) minmax(0, auto) !important;
    row-gap: 12px;
    padding: 14px 12px !important;
    align-items: start;
  }
  .sc-product-list .bms-card__bar,
  .sc-product-list .bms-card__specs-wrap {
    display: none !important;
  }
  .sc-product-list .bms-card__left {
    display: flex !important;
    flex-direction: column !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100%;
    min-width: 0;
    min-height: 0;
  }
  .sc-product-list .bms-card__tier,
  .sc-product-list .bms-card__cpu,
  .sc-product-list .bms-card__cores,
  .sc-product-list .bms-card__gpu-spec-lines,
  .sc-product-list .bms-card__stock-badge {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .sc-product-list .bms-card__right {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: center;
    padding: 12px 0 0 !important;
    border-top: 1px solid rgba(0,31,53,0.08) !important;
    margin-top: 0 !important;
    text-align: left;
  }
  .sc-product-list .bms-card__action {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: center;
    margin: 0 !important;
    padding-top: 12px !important;
  }
}

/* Mobile: Configuration = fixed bottom bar — 只限 server-configuration（main.sc-page），避免影響 cart / order-status */
@media (max-width: 768px) {
  main.sc-page .sc-summary {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    order: unset;
    z-index: 500;
    margin: 0;
    padding: 0;
    background: linear-gradient(168deg, #151d28 0%, #0c1018 50%, #0a0c14 100%);
    border-top: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 -2px 16px rgba(0,0,0,0.25);
    padding-bottom: env(safe-area-inset-bottom);
  }
  main.sc-page .sc-summary .sc-summary__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 14px 16px;
    border-radius: 0;
    min-height: 56px;
    max-width: 100%;
    box-sizing: border-box;
  }
  main.sc-page .sc-summary .sc-summary__title,
  main.sc-page .sc-summary .sc-summary__list {
    display: none !important;
  }
  main.sc-page .sc-summary .sc-summary__billing {
    display: block !important;
    width: auto;
    margin-bottom: 4px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  main.sc-page .sc-summary .sc-summary__billing-label { margin-bottom: 6px; font-size: 10px; }
  main.sc-page .sc-summary .sc-summary__cycles { display: none !important; }
  main.sc-page .sc-summary .sc-summary__cycle-select-wrap { display: block !important; }
  main.sc-page .sc-summary .sc-summary__cycle-select {
    height: 44px;
    padding-top: 0;
    padding-bottom: 0;
  }
  main.sc-page .sc-summary .sc-summary__quantity {
    width: auto;
    margin-bottom: 8px;
    padding-bottom: 8px;
    flex-basis: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-self: end;
    margin-top: 4px;
  }
  main.sc-page .sc-summary .sc-summary__quantity-label {
    margin-bottom: -8px;
    font-size: 10px;
}
  main.sc-page .sc-summary .sc-summary__quantity .sc-qty-stepper {
    height: 44px;
  }
  main.sc-page .sc-summary .sc-summary__quantity .sc-qty-btn,
  main.sc-page .sc-summary .sc-summary__quantity .sc-qty-input {
    height: 100%;
  }
  main.sc-page .sc-summary .sc-summary__quantity .sc-qty-input {
    padding-top: 0;
    padding-bottom: 0;
  }
  main.sc-page .sc-summary .sc-summary__price {
    grid-column: 1 / 2;
    flex: 1;
    min-width: 0;
    padding: 0;
    border: none;
    margin: 0;
  }
  main.sc-page .sc-summary .sc-summary__price-label { margin-bottom: 2px; font-size: 10px; }
  main.sc-page .sc-summary .sc-summary__price-value { font-size: 22px; }
  main.sc-page .sc-summary .sc-summary__price-period { font-size: 12px; }
  main.sc-page .sc-summary .sc-summary__cart {
    grid-column: 2 / 3;
    flex-shrink: 0;
    margin: 0;
    padding: 12px 18px;
    font-size: 14px;
  }
  /* Enough space so content never sits under the bar (reference: xlc.com sticky bar) */
  .sc-page { padding-bottom: 100px; }
  main.sc-page { padding-bottom: 100px; }
}

@media (max-width: 640px) {
  .sc-page { padding-bottom: 115px; }
  main.sc-page { padding-bottom: 115px; }
  .sc-layout { gap: 16px; padding: 0 var(--container-pad); }
  .sc-main > .sc-step { padding: 16px 14px 20px; }
  .sc-step__title { font-size: 13px; letter-spacing: 0.05em; }
  /* Product list: single column grid on very small */
  .sc-product-list .bms-cards { grid-template-columns: 1fr !important; }
  .sc-product-list .bms-card__price { font-size: 16px; }
  .sc-product-list .bms-card__cpu { font-size: 14px; }
  main.sc-page .sc-summary .sc-summary__inner { padding: 12px 14px; }
  main.sc-page .sc-summary .sc-summary__price-value { font-size: 30px; }
  main.sc-page .sc-summary .sc-summary__cart {
    padding: 20px 25px;
    font-size: 17px;
}
}

/* Server config page: bms-card as selectable plan (same list look as BMS page) */
.sc-step__intro { font-size: 14px; color: var(--text-muted); margin-bottom: 16px; max-width: 640px; }
.sc-step__intro a { color: var(--purple-light); font-weight: 600; }
.sc-step__panel-note { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; }
.sc-step__panel-note a { font-weight: 600; }
.sc-plan-panel[hidden] { display: none !important; }
/* Preview: all plan blocks visible when wrapping; programmer JS collapses wraps */
.sc-panel-heading {
  font-family: var(--font-h);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 28px 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border-lt);
}
.sc-plan-panel-wrap:first-child .sc-panel-heading { margin-top: 0; }
.sc-bms-cards-wrap { margin: 0 -8px; }
.sc-bms-cards-wrap .bms-cards-toolbar-bar { display: none; }
.sc-main .bms-cards { padding: 0; }
/* Server Configuration 頁冇 BMS 頁嘅 scroll observer — 唔加 bms-card--visible 會永遠 opacity:0 */
.sc-bms-cards-wrap .bms-card,
.sc-plan-panel .bms-card {
  opacity: 1 !important;
  transform: none !important;
}
.sc-bms-cards-wrap .bms-card.bms-card--leaving,
.sc-bms-cards-wrap .bms-card.bms-card--entering {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto;
}
.bms-card--sc-selectable {
  cursor: pointer;
  transition: box-shadow var(--sc-dur) var(--sc-ease), border-color var(--sc-dur) var(--sc-ease), transform var(--sc-dur-fast) var(--sc-ease);
}
.bms-card--sc-selectable:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); transform: translateY(-2px); }
.bms-card--sc-selected {
  box-shadow: 0 0 0 2px var(--red), 0 8px 24px rgba(255,0,0,0.12);
}

/* Server config page only: remove middle specs (SFF, Memory, Storage, Network), show cores in middle */
.sc-product-list .bms-card__specs-wrap {
  display: none !important;
}
.sc-product-list .bms-card {
  grid-template-columns: auto 280px 1fr auto auto;
  grid-template-rows: auto auto auto auto;
  gap: 0 20px;
  row-gap: 0;
  align-items: center;
  border-radius: 11px;
  padding: 15px 15px;
  padding-bottom:10px;
}
.sc-product-list .bms-card__left {
  display: contents;
}
.sc-product-list .bms-card__bar { grid-column: 1; grid-row: 1 / -1; align-self: center; }
/* Col 2：tier → CPU → cores（垂直）；Col 3：庫存徽章（原 cores 欄） */
.sc-product-list .bms-card__tier {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  padding: 0;
  line-height: 1;
  margin-bottom: 0;
}

.sc-product-list .bms-card__price-label {
  
  margin-top: 0;
}

.sc-product-list .bms-card__action {
 
  margin-top: 0;
}


.sc-product-list .bms-card__stock-badge {
  grid-column: 3;
  grid-row: 1 / -1;
  position: static;
  top: auto;
  right: auto;
  margin: 0;
  align-self: center;
  justify-self: start;
  max-width: 100%;
}
.sc-product-list .bms-card__cpu {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  padding: 0;
  line-height: 1.15;
}
.sc-product-list .bms-card__cores {
  grid-column: 2;
  grid-row: 3;
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(255,255,255,0.85);
  align-self: start;
}
.sc-product-list .bms-card__gpu-spec-lines {
  grid-column: 2;
  grid-row: 4;
  margin: 0;
  padding: 0;
  margin-top: 4px;
  align-self: start;
  min-width: 0;
}
.sc-product-list .bms-card__gpu-spec-line {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  border: 1px solid gray;
  padding: 3px 5px;
  border-radius: 3px;
}
.sc-product-list .bms-card__gpu-spec-line + .bms-card__gpu-spec-line {
  margin-top: 2px;
}
.sc-product-list .bms-card__right { grid-column: 4; grid-row: 1 / -1; align-self: center; }
.sc-product-list .bms-card__action { grid-column: 5; grid-row: 1 / -1; align-self: center; }

/* Storage panel: product cards show only tier + CPU + price (no specs line) */
#sc-plan-cards-storage .bms-card__specs-wrap { display: none; }

/* Server config page only: product list — bar 實色 (solid) */
.sc-product-list .bms-card__bar {
  margin-top: 0;
  box-shadow: none;
}
.sc-product-list .bms-card__bar--advance {
  background: #00D4FF;
}
.sc-product-list .bms-card__bar--scale {
  background: #FFC107;
}
.sc-product-list .bms-card__bar--extreme {
  background: var(--green);
}
.sc-product-list .bms-card--sc-selectable:hover .bms-card__bar {
  box-shadow: none;
}
.sc-product-list .bms-card--sc-selected {
  border-left: 3px solid transparent;
  box-shadow: 0 0 0 1px rgba(0,212,255,0.4), 0 0 24px rgba(0,212,255,0.2);
}
.sc-product-list .bms-card--sc-selected .bms-card__bar {
  box-shadow: none;
}
.sc-product-list .bms-card--sc-selected .bms-card__action--static .bms-card__action-icon--arrow {
  color: #00D4FF;
}

/* Product list (sc-product-list): white cart; selected = cyber red + big white tick only (no cart); hover = big tick only */
.sc-product-list .bms-card__action-icon--cart {
  color: #fff !important;
  opacity: 1 !important;
}
.sc-product-list .bms-card--sc-selected .bms-card__action-icon--cart {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}
.sc-product-list .bms-card__action-icon--arrow {
  color: #fff;
  font-size: 14px;
  transition: opacity 0.2s ease, font-size 0.2s ease;
}
.sc-product-list .bms-card--sc-selectable:hover .bms-card__action-icon--cart,
.sc-product-list .bms-card--sc-selectable:focus-within .bms-card__action-icon--cart {
  opacity: 0 !important;
  visibility: hidden;
}
.sc-product-list .bms-card--sc-selectable:hover .bms-card__action-icon--arrow,
.sc-product-list .bms-card--sc-selectable:focus-within .bms-card__action-icon--arrow {
  opacity: 1 !important;
  font-size: 20px !important;
}
.sc-product-list .bms-card--sc-selected .bms-card__action {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 50%, var(--red-dark) 100%) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.35), 0 0 20px rgba(255, 0, 0, 0.25);
  border-radius: 100%;
}
.sc-product-list .bms-card--sc-selected .bms-card__action-icon--arrow {
  color: #fff !important;
  font-size: 20px !important;
  opacity: 1 !important;
}

.bms-card__action--static {
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 設定頁缺貨：CTA 改為 <a>，需可點聯絡 */
.sc-product-list a.bms-card__action--static {
  pointer-events: auto;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}
.sc-product-list .bms-card:not(:has(.bms-card__stock-badge--out-of-stock)) .bms-card__action-icon--contact {
  opacity: 0;
  pointer-events: none;
}
.sc-product-list .bms-card:has(.bms-card__stock-badge--out-of-stock).bms-card--sc-selectable:hover .bms-card__action-icon--arrow,
.sc-product-list .bms-card:has(.bms-card__stock-badge--out-of-stock).bms-card--sc-selectable:focus-within .bms-card__action-icon--arrow {
  opacity: 0 !important;
}
.sc-product-list .bms-card:has(.bms-card__stock-badge--out-of-stock) .bms-card__action,
.sc-product-list .bms-card:has(.bms-card__stock-badge--out-of-stock) .bms-card__action--static {
  color: #fff;
}
.sc-product-list .bms-card:has(.bms-card__stock-badge--out-of-stock) .bms-card__action-icon--contact {
  color: #fff !important;
  font-size: 19px;
}
.sc-product-list .bms-card:has(.bms-card__stock-badge--out-of-stock) .bms-card__action-icon--contact i {
  color: #fff !important;
}
.sc-product-list .bms-card:has(.bms-card__stock-badge--out-of-stock).bms-card--sc-selectable:hover .bms-card__action-icon--contact,
.sc-product-list .bms-card:has(.bms-card__stock-badge--out-of-stock).bms-card--sc-selectable:focus-within .bms-card__action-icon--contact {
  opacity: 1 !important;
  color: #fff !important;
  font-size: 21px;
}
.sc-product-list .bms-card:has(.bms-card__stock-badge--out-of-stock).bms-card--sc-selectable:hover .bms-card__action-icon--contact i,
.sc-product-list .bms-card:has(.bms-card__stock-badge--out-of-stock).bms-card--sc-selectable:focus-within .bms-card__action-icon--contact i {
  color: #fff !important;
}


.sc-product-list .bms-card__price {
  
  font-size: 27px;
  line-height: 28px;
  letter-spacing: -1px;
 
}


.bms-card--sc-selected .bms-card__action--static .bms-card__action-icon--arrow { color: var(--red); opacity: 1 !important; }
.bms-card--sc-selectable .bms-card__action--static .bms-card__action-icon--cart { opacity: 0.35; }
.bms-card--sc-selectable .bms-card__action--static .bms-card__action-icon--arrow { opacity: 0; }
.bms-card--sc-selectable.bms-card--sc-selected .bms-card__action--static .bms-card__action-icon--cart { opacity: 0; }
.bms-card--sc-selectable.bms-card--sc-selected .bms-card__action--static .bms-card__action-icon--arrow { opacity: 1; }

/* Dedicated GPU Server page — optional badge above hero (was in dedicated-gpu-server.css) */
.dgs-hero-badge {
  font-family: var(--font-b);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple-light);
  margin-bottom: 8px;
}




@media (max-width: 768px) {
  .sc-product-list .bms-card {
    grid-template-columns: auto 1.3fr 1.5fr auto auto;
    grid-template-rows: auto auto auto;
    gap: 0px 10px;
    row-gap: 0;
    align-items: center;
    border-radius: 8px;
    padding: 8px 7px;
    display: grid;
    justify-content: center;
    justify-items: start;
    padding-top: 10px;
}

.sc-product-list .bms-card__action{
  width:35px;
  height:35px;
}

.sc-product-list .bms-card__cores {
 
  font-size: 12px;

}

.sc-type-seg__btn {
font-size: 14px;
padding: 8px 15px;
 
}

.sc-product-list .bms-card__price {
  font-size: 20px;
  line-height: 25px;
  letter-spacing: -1px;
}

.sc-product-list .bms-card__tier {
 
  margin-bottom: 0;
}

.sc-product-list .bms-card__cpu {
 
  font-size: 15px;
  line-height: 1.25;
}

}
@media (max-width: 680px) {
.sc-product-list .bms-card {
  grid-template-columns: 1fr auto !important;
  grid-template-rows: minmax(0, auto) minmax(0, auto) !important;
  row-gap: 12px;
  padding: 14px 12px !important;
  align-items: start;
}

.sc-product-list .bms-card__cpu {
  font-size: 18px;
 
}

.sc-product-list .bms-card__tier {
  margin-bottom: 0;
  font-size: 12px;
}

.sc-product-list .bms-card__price {
  font-size: 25px;
  line-height: 25px;
  letter-spacing: -1px;
}

.sc-product-list .bms-card--sc-selected .bms-card__action-icon--arrow {

  font-size: 22px !important;
margin-top: -9px;
}

.sc-product-list .bms-card--sc-selectable:hover .bms-card__action-icon--arrow, .sc-product-list .bms-card--sc-selectable:focus-within .bms-card__action-icon--arrow {

  font-size: 22px ;
  margin-top: -10px;
}

.sc-product-list .bms-card__stock-badge {
  
  align-self: flex-start;
  width: fit-content;
  margin-top: 10px;;
}

}


/* ========== 右下角 FAB：與 scroll-to-top 同尺寸（48px 圓 / 24px 圖示） ========== */
/* ========== Live Chat FAB（紫色、醒目光暈；於 Scroll to Top 下方、貼底） ========== */
@keyframes live-chat-fab-glow {
  0%,
  100% {
    box-shadow:
      0 4px 16px rgba(124, 58, 237, 0.55),
      0 0 0 0 rgba(167, 139, 250, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }
  50% {
    box-shadow:
      0 6px 22px rgba(109, 40, 217, 0.6),
      0 0 0 12px rgba(167, 139, 250, 0),
      inset 0 1px 0 rgba(255, 255, 255, 0.28);
  }
}

.live-chat-fab {
  --fab-size: 48px;
  --fab-icon-size: 24px;
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 401;
  width: var(--fab-size);
  height: var(--fab-size);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: #5600db;
  color: #fff;
  text-decoration: none;
  box-shadow:
    0 4px 16px rgba(124, 58, 237, 0.55),
    0 0 0 0 rgba(167, 139, 250, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease, border-color 0.2s ease;
  animation: live-chat-fab-glow 2.4s ease-in-out infinite;
}
.live-chat-fab:hover {
  color: #fff;
  transform: translateY(-2px) scale(1.04);
  filter: brightness(1.08) saturate(1.05);
  border-color: rgba(255, 255, 255, 0.55);
  animation-play-state: paused;
  box-shadow:
    0 8px 28px rgba(91, 33, 182, 0.55),
    0 0 24px rgba(167, 139, 250, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.live-chat-fab:focus-visible {
  outline: 2px solid #e9d5ff;
  outline-offset: 3px;
}
.live-chat-fab__icon {
  width: var(--fab-icon-size);
  height: var(--fab-icon-size);
  flex-shrink: 0;
  opacity: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

@media (prefers-reduced-motion: reduce) {
  .live-chat-fab {
    animation: none;
    box-shadow:
      0 6px 22px rgba(124, 58, 237, 0.6),
      0 0 20px rgba(167, 139, 250, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }
}

/* ========== Scroll to Top（約 40% 捲動後淡入） ========== */
.scroll-to-top {
  --fab-size: 48px;
  --fab-icon-size: 24px;
  position: fixed;
  bottom: calc(24px + var(--fab-size) + 12px);
  right: 24px;
  width: var(--fab-size);
  height: var(--fab-size);
  box-sizing: border-box;
  border-radius: 50%;
  border: none;
  background: var(--red);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(212, 56, 13, 0.4);
  z-index: 400;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease;
}
.scroll-to-top:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 56, 13, 0.45);
}
.scroll-to-top--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.scroll-to-top svg {
  width: var(--fab-icon-size, 24px);
  height: var(--fab-icon-size, 24px);
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .live-chat-fab {
    right: 16px;
    bottom: 16px;
  }
  .scroll-to-top {
    right: 16px;
    bottom: calc(16px + var(--fab-size) + 10px);
  }
}

/* ── FAQ page（Webflow 式留白 + 站內 bms-tabs / accordion） ── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.page-main--faq {
  background: #fafafa;
}
/* FAQ hero：同 data-center-hong-kong .bms-hero */
.page-main--faq.bms-page .faq-bms-hero.bms-hero {
  text-align: center;
  padding-bottom: clamp(44px, 8vw, 72px);
}
.page-main--faq.bms-page .faq-bms-hero .bms-hero__breadcrumb {
  text-align: center;
}
.page-main--faq.bms-page .faq-bms-hero .faq-hero-h1-single .bms-hero__title-line-wrap--single {
  margin: 0 auto;
  max-width: 100%;
}
.page-main--faq.bms-page .faq-bms-hero .faq-search-wrap {
  max-width: 520px;
  margin: clamp(28px, 4vw, 44px) auto 0;
}
@media (max-width: 992px) {
  .bms-sticky-nav.faq-sticky-nav .dc-location-tabs-select-wrap::after {
    display: none !important;
  }
  .bms-sticky-nav.faq-sticky-nav .dc-location-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23d4380d' d='M0 0h10L5 6z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 10px 6px;
  }
}
.faq-search-input {
  width: 100%;
  padding: 16px 20px 16px 48px;
  font-size: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background: #fafafa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23999' stroke-width='2'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M13 13l5 5'/%3E%3C/svg%3E") 16px center no-repeat;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.faq-search-input:focus {
  outline: none;
  border-color: var(--red, #d4380d);
  box-shadow: 0 0 0 3px rgba(212, 56, 13, 0.12);
  background-color: #fff;
}
.faq-search-empty {
  text-align: center;
  margin-top: 24px;
  font-size: 17px;
  color: #888;
}
.bms-sticky-nav.faq-sticky-nav {
  top: var(--bms-navbar-h, 72px);
}
#faq-billing,
#faq-server,
#faq-network {
  scroll-margin-top: calc(var(--bms-sticky-stack, 144px) + 20px);
}
.faq-category {
  padding: clamp(56px, 9vw, 96px) 0;
  border-bottom: 1px solid #ececec;
  background: #fff;
}
.faq-category:nth-child(even) {
  background: #fafafa;
}
.faq-category__inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px;
}
.faq-category__title {
  margin: 0 0 clamp(40px, 6vw, 56px);
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0a0a0a;
  line-height: 1.2;
}
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.faq-item {
  border-bottom: 1px solid #e8e8e8;
}
.faq-item:first-child {
  border-top: 1px solid #e8e8e8;
}
.faq-item--hidden {
  display: none !important;
}
.faq-category--search-empty {
  display: none !important;
}
.faq-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(22px, 3.5vw, 28px) 0;
  text-align: left;
  font-family: inherit;
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 600;
  color: #111;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
}
.faq-item__trigger:hover {
  color: var(--red, #d4380d);
}
.faq-item__chev {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f0f0f0;
  color: #444;
  transition: transform 0.3s ease, background 0.2s;
}
.faq-item--open .faq-item__chev {
  transform: rotate(180deg);
  background: rgba(212, 56, 13, 0.12);
  color: var(--red, #d4380d);
}
.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.faq-item--open .faq-item__panel {
  grid-template-rows: 1fr;
}
.faq-item__panel-inner {
  min-height: 0;
  overflow: hidden;
}
.faq-item__body {
  padding: 0 0 clamp(28px, 4vw, 40px);
  font-size: 16px;
  line-height: 1.75;
  color: #4a4a4a;
}
.faq-item__body p {
  margin: 0 0 1em;
}
.faq-item__body p:last-child {
  margin-bottom: 0;
}
.faq-item__body ul {
  margin: 0.75em 0 1em;
  padding-left: 1.35em;
  list-style: disc;
}
.faq-item__body li {
  margin-bottom: 0.5em;
}
.faq-item__body strong {
  color: #222;
}

/* ========== Looking Glass (looking-glass.html) ========== */
.page-main--lg {
  background: #fafafa;
}
/* Looking Glass hero：字級同 data-center-hong-kong .bms-hero__title */
.page-main--lg.bms-page .lg-bms-hero .bms-hero__title--lg-single .bms-hero__title-fallback {
  white-space: nowrap;
}
.page-main--lg.bms-page .lg-bms-hero .bms-hero__title--lg-single .bms-hero__title-line-wrap--single {
  width: auto;
  max-width: none;
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  overflow-wrap: normal;
  word-wrap: normal;
}
.page-main--lg.bms-page .lg-bms-hero .bms-hero__title--lg-single .bms-hero__title-reserve,
.page-main--lg.bms-page .lg-bms-hero .bms-hero__title--lg-single .bms-hero__title-type {
  white-space: nowrap;
}
.page-main--lg.bms-page .lg-bms-hero .bms-hero__desc--sub a {
  color: var(--red, #d4380d);
  font-weight: 600;
}
.bms-sticky-nav.lg-sticky-nav {
  top: var(--bms-navbar-h, 72px);
  padding: 8px 0 10px;
}
#lg-tool,
#lg-ips,
#lg-files {
  scroll-margin-top: calc(var(--bms-sticky-stack, 144px) + 20px);
}
.lg-section {
  padding: clamp(40px, 6vw, 72px) 0;
  border-bottom: 1px solid #ececec;
  background: #fff;
}
.lg-section:first-of-type {
  padding-top: clamp(28px, 4.5vw, 48px);
}
.lg-section--alt {
  background: #fafafa;
}
/* lg-wrap 已停用：Looking Glass 區塊用滿 .container 寬度 */
.lg-panel {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 16px;
  padding: clamp(22px, 3.5vw, 36px) clamp(22px, 3.5vw, 40px);
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.045);
  max-width: 100%;
}
.lg-panel__kicker {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--red, #d4380d);
  margin: 0 0 16px;
}
/* Network test：與 free-trial 同款 cf7-field / cf7-select（integration-section--light） */
.page-main--lg .lg-network-form {
  margin-bottom: 4px;
  padding: 0px 0 0px;
  overflow: visible;
}
.page-main--lg .lg-field-error {
  display: block;
  margin: 6px 0 10px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--red, #d4380d);
  font-weight: 500;
}
.page-main--lg .lg-field-error[hidden] {
  display: none !important;
}
.page-main--lg .lg-network-form .cf7-field {
  min-width: 0;
}
/* Mobile：全域 .cf7-field 變直向後，父層 ::after 仍用 top:50% 會對準成個格（label+select），箭嘴同格唔齊 */
@media (max-width: 992px) {
  .page-main--lg .lg-network-form .cf7-field:has(.cf7-select)::after {
    display: none !important;
  }
  .page-main--lg .lg-network-form .cf7-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23d4380d' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 10px 6px;
  }
  .bms-sticky-nav.lg-sticky-nav .dc-location-tabs-select-wrap::after {
    display: none !important;
  }
  .bms-sticky-nav.lg-sticky-nav .dc-location-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23d4380d' d='M0 0h10L5 6z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 10px 6px;
  }
}
.lg-form-row-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
  margin-bottom: 4px;
}
.page-main--lg .lg-network-form > .lg-form-row-2 ~ .lg-form-row-2 {
  margin-top: 14px;
}
.page-main--lg .lg-network-form .lg-form-row-2 .cf7-label {
  min-width: 0;
  max-width: 160px;
  white-space: normal;
  word-break: break-word;
  line-height: 1.25;
  padding: 10px 12px;
  font-size: 12px;
}
.page-main--lg .lg-cf7-readonly-value.cf7-input {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  font-weight: 600;
  cursor: default;
  user-select: none;
}
.page-main--lg .lg-cf7-protocol:focus-within {
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: none;
}
@media (max-width: 640px) {
  .page-main--lg .lg-form-row-2 {
    grid-template-columns: 1fr;
  }
  .page-main--lg .lg-network-form .lg-form-row-2 .cf7-label {
    max-width: none;
    min-width: 140px;
  }
}
.lg-test-types {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 16px;
}
.lg-test-types--radio {
  gap: 20px;
  align-items: center;
}
.lg-radio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: #333;
  user-select: none;
}
.lg-radio input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--red, #d4380d);
  cursor: pointer;
  flex-shrink: 0;
}
.lg-radio:hover span {
  color: var(--red, #d4380d);
}
.lg-run {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 200px;
}
.lg-run:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
/* hidden 屬性會被 display:flex 蓋過，要顯式關閉；只有按 Run test 後先顯示 */
.lg-loading[hidden] {
  display: none !important;
}
.lg-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 20px 0 8px;
  padding: 14px 20px;
  color: #666;
  font-weight: 500;
  background: #f5f5f5;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
}
.lg-loading__spin {
  width: 22px;
  height: 22px;
  border: 3px solid #eee;
  border-top-color: var(--red, #d4380d);
  border-radius: 50%;
  animation: lg-spin 0.75s linear infinite;
}
@keyframes lg-spin {
  to {
    transform: rotate(360deg);
  }
}
.lg-result-block {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #ececec;
}
.lg-result-block--visible {
  margin-top: 20px;
}
.lg-result-block__title {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
}
.lg-result-block__out {
  min-height: 200px;
  max-height: min(70vh, 520px);
  overflow: auto;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 13px;
  line-height: 1.55;
  color: #1a1a1a;
  word-break: break-word;
}
.lg-result-block__out pre,
.lg-result-block__out code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12px;
  white-space: pre-wrap;
}
.lg-result-placeholder {
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.6;
}
.lg-result-placeholder code {
  font-size: 12px;
  background: #f4f4f4;
  padding: 2px 6px;
  border-radius: 4px;
}
.lg-result-error {
  margin: 0;
  color: #b42318;
  font-size: 14px;
  line-height: 1.55;
}
.lg-result-error a {
  color: var(--red, #d4380d);
  font-weight: 600;
}
.lg-result-loading-text {
  margin: 0;
  color: #666;
}
.lg-section-title {
  margin: 0 0 clamp(20px, 3vw, 32px);
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0a0a0a;
}
.lg-region-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px 24px;
}
.lg-region-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 16px;
  padding: 22px 24px;
}
.lg-region-card__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 0px;
  /* border-bottom: 1px solid #eee; */
}
.lg-region-card__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}
.lg-region-card__sub {
  margin: 0;
  font-size: 14px;
  color: #888;
}
.lg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.lg-table th {
  text-align: left;
  padding: 12px 12px 10px;
  border-bottom: 2px solid #eee;
  color: #666;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.lg-table td {
  padding: 12px 12px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}
.lg-table tbody tr:last-child td {
  border-bottom: none;
}
.lg-table code {
  font-size: 14px;
  background: #f4f4f4;
  padding: 5px 10px;
  border-radius: 8px;
  font-family: ui-monospace, monospace;
}
.lg-copy {
  padding: 8px 14px !important;
  font-size: 13px !important;
  min-height: auto !important;
  line-height: 1.2;
}
.lg-files-stack {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.lg-files-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 16px;
  padding: 22px 24px;
  padding-bottom: 10px;
}
.lg-files-card__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-size: 21px;
  font-weight: 700;
}
.lg-table--files td:last-child {
  vertical-align: middle;
}
.lg-file-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.lg-file-dl-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 12px 18px !important;
  font-size: 14px !important;
  font-weight: 600;
  min-height: auto !important;
  line-height: 1.2;
  text-decoration: none;
  padding-top: 15px !important;
}
.lg-file-dl-btn:hover {
  text-decoration: none;
}
/* 向下箭嘴 + 底部 3px 紅線（download 視覺） */
.lg-file-dl-btn__icon-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
}
.lg-file-dl-btn__icon {
  font-size: 0.82em;
  line-height: 1;
  color: inherit;
}
.lg-file-dl-btn__icon-bar {
  display: block;
  width: 14px;
  height: 3px;
  background: var(--red, #d4380d);
  border-radius: 1px;
  flex-shrink: 0;
}

/* ========== Terms & Conditions (terms-and-conditions.html) ========== */
.page-main--terms {
  background: #fafafa;
}
.page-main--terms.bms-page .terms-bms-hero.bms-hero {
  text-align: center;
  padding-bottom: 0;
}
.page-main--terms.bms-page .terms-bms-hero .bms-hero__breadcrumb {
  text-align: center;
}
.page-main--terms.bms-page .terms-bms-hero .bms-hero__title--terms-single .bms-hero__title-fallback {
  white-space: nowrap;
}
.page-main--terms.bms-page .terms-bms-hero .bms-hero__title--terms-single .bms-hero__title-line-wrap--single {
  width: auto;
  max-width: none;
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  overflow-wrap: normal;
  word-wrap: normal;
}
.page-main--terms.bms-page .terms-bms-hero .bms-hero__title--terms-single .bms-hero__title-reserve,
.page-main--terms.bms-page .terms-bms-hero .bms-hero__title--terms-single .bms-hero__title-type {
  white-space: nowrap;
}
/* 手機／平板：目錄改 sticky select（參 data-center-hong-kong） */
.terms-mobile-jump.bms-sticky-nav {
  padding-top: 10px;
  padding-bottom: 10px;
}
.terms-mobile-jump {
  display: none;
  top: var(--bms-navbar-h, 72px);
  z-index: 90;
  background: #fff;
  border-bottom: 1px solid #ececec;
  padding: 10px 0;
  transition: box-shadow 0.25s ease;
}
.terms-mobile-jump.terms-mobile-jump--shadow {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
/* 防止長 option 文字令 select 以內容寬度撑爆 viewport（常見於 blog / terms 目錄） */
.terms-mobile-jump .container {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.terms-mobile-jump .dc-location-tabs-select-wrap {
  display: block !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.terms-mobile-jump .dc-location-select {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0 !important; /* 蓋過 .bms-cards-sort 的 min-width，避免跟最闊 option 同步變寬 */
  box-sizing: border-box;
  font-size: 15px;
  padding: 14px 44px 14px 16px;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  background-color: #fafafa;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23d4380d' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.terms-mobile-jump select.dc-location-select option {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
@media (max-width: 992px) {
  .terms-mobile-jump {
    display: block;
    position: sticky;
  }
}
@media (min-width: 993px) {
  .terms-mobile-jump {
    display: none !important;
  }
}
.terms-doc-wrap {
  padding: clamp(36px, 5vw, 64px) 0 clamp(72px, 10vw, 120px);
  background: #fff;
  padding-top: 20px;
}
.terms-doc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(400px, 32vw);
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
  max-width: 1400px;
}
@media (max-width: 992px) {
  .terms-doc-layout {
    grid-template-columns: 1fr;
  }
  .terms-doc-toc,
  #page-main-blog-detail .blog-detail-aside {
    display: none !important;
  }
}
.terms-doc-main {
  min-width: 0;
  max-width: 820px;
}
.terms-doc-main > .terms-doc-lead {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted, #666);
  margin: 0 0 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid #eee;
}
.terms-doc-section {
  scroll-margin-top: calc(var(--bms-navbar-h, 72px) + 88px);
}
@media (min-width: 993px) {
  .terms-doc-section {
    scroll-margin-top: calc(var(--bms-navbar-h, 72px) + 24px);
    padding: 0px 30px;
    border: 1px solid #e9e9e9;
    border-radius: 20px;
    margin-bottom: 28px;
    padding-bottom: 30px;
    padding-right: 39px;
}
}
.terms-doc-section h2 {
  font-family: var(--font-h);
  font-size: clamp(22px, 2.8vw, 28px);
  font-weight: 800;
  color: var(--text-dark);
  margin: 2.25rem 0 1rem;
  padding-top: 0.5rem;
  line-height: 1.2;
}
.terms-doc-section:first-of-type h2 {
  margin-top: 0;
}
.terms-doc-section h3 {
  font-family: var(--font-h);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 1.35rem 0 0.65rem;
}
.terms-doc-section p,
.terms-doc-section li {
  font-family: var(--font-b);
  font-size: 15px;
  line-height: 1.72;
  color: var(--text-body, #333);
  margin: 0 0 1em;
}
.terms-doc-section ul {
  margin: 0 0 1.25em;
  padding-left: 1.35em;
}
.terms-doc-section ol.def-list {
  list-style: decimal;
  padding-left: 1.5em;
  margin: 0 0 1.25em;
}
.terms-doc-section ol.def-list li {
  margin-bottom: 0.85em;
}
.terms-doc-toc {
  position: sticky;
  top: calc(var(--bms-navbar-h, 72px) + 20px);
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 0 32px 20px;
  margin-top: 0;
  border-left: 1px solid var(--red, #d4380d);
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 56, 13, 0.35) transparent;
}
.terms-doc-toc::-webkit-scrollbar {
  width: 6px;
}
.terms-doc-toc::-webkit-scrollbar-thumb {
  background: rgba(212, 56, 13, 0.35);
  border-radius: 6px;
}
.terms-toc-label {
  font-family: var(--font-h);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-label, #888);
  margin: 0 0 14px;
}
.terms-toc-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.terms-toc-nav a {
  display: block;
  padding: 9px 12px 9px 14px;
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-body, #444);
  text-decoration: none;
  border-radius: 8px;
  line-height: 1.35;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  border-left: 3px solid transparent;
  margin-left: -3px;
}
.terms-toc-nav a:hover,
.terms-toc-nav a:focus-visible {
  color: var(--purple, #4500a7);
  background: rgba(69, 0, 167, 0.06);
  outline: none;
}
.terms-toc-nav a.is-active {
  color: var(--red, #d4380d);
  font-weight: 700;
  background: rgb(119 119 119 / 6%);
  border-left-color: var(--red, #d4380d);
}
@media (max-width: 992px) {
  .terms-doc-section {
    scroll-margin-top: calc(var(--bms-navbar-h, 72px) + 64px);
  }
}

/* xlc.com 原文頁 — 標題層級 + 紫色 bullet lists */
.terms-doc-main--verbatim .terms-doc-section > h2.terms-doc-verbatim-h2 {
  font-size: 1.25rem;
  margin: 0 0 0.25em;
}
.terms-doc-main--verbatim .terms-doc-section > h2.terms-doc-verbatim-h2--large {
  font-size: clamp(22px, 2.8vw, 32px);
  margin: 0 0 1rem;
  line-height: 1.2;
}
.terms-doc-main--verbatim .terms-doc-effective {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 1rem;
  color: var(--red);
  margin-top: 35px;
}
/* 章節標題前：同站內 .red-bar 斜紅線 */
.terms-doc-main--verbatim .terms-doc-section > h3.terms-doc-verbatim-h3 {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: clamp(17px, 2vw, 21px);
  margin-top: 2.25rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}
.terms-doc-main--verbatim .terms-doc-section > h3.terms-doc-verbatim-h3::before {
  content: '';
  display: block;
  width: 5px;
  height: 40px;
  min-width: 5px;
  flex-shrink: 0;
  background: var(--red);
  border-radius: 100px;
  transform: rotate(16deg);
  transform-origin: center center;
}
.terms-doc-main--verbatim .terms-purple-bullets {
  list-style: none;
  padding-left: 0;
  margin: 0.65em 0 1.15em;
}
.terms-doc-main--verbatim .terms-purple-bullets li {
  position: relative;
  padding-left: 1.45em;
  margin-bottom: 0.45em;
  font-size: 15px;
  line-height: 1.72;
  color: var(--text-body, #333);
}
.terms-doc-main--verbatim .terms-purple-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--purple, #4500a7);
}

/* 條款編號：有序列表 */
.terms-doc-main--verbatim .terms-num-ol {
  margin: 0 0 1.25em;
  padding-left: 1.65em;
  list-style: decimal;
}
.terms-doc-main--verbatim .terms-num-ol > li {
  margin-bottom: 1em;
  padding-left: 0.4em;
}
.terms-doc-main--verbatim .terms-num-ol > li > p {
  margin: 0.35em 0 0;
  font-size: 15px;
  line-height: 1.72;
  color: var(--text-body, #333);
}
.terms-doc-main--verbatim .terms-num-ol > li > p:first-child {
  margin-top: 0;
}
.terms-doc-main--verbatim .terms-ol-decimal-sub {
  list-style: none;
  padding-left: 0;
  margin: 0.65em 0 0;
}
.terms-doc-main--verbatim .terms-ol-decimal-sub > li {
  position: relative;
  padding-left: 2.5em;
  margin-bottom: 0.55em;
}
.terms-doc-main--verbatim .terms-ol-decimal-sub > li > p {
  margin: 0;
  font-size: 15px;
  line-height: 1.72;
  color: var(--text-body, #333);
}
.terms-doc-main--verbatim .terms-ol-decimal-sub--4 {
  
  counter-reset: termsub4;
  margin-top: 20px;
}
.terms-doc-main--verbatim .terms-ol-decimal-sub--4 > li {
  counter-increment: termsub4;
}
.terms-doc-main--verbatim .terms-ol-decimal-sub--4 > li::before {
  content: "4." counter(termsub4) "\00a0";
  position: absolute;
  left: 0;
  font-weight: 400;
  /* color: #212121; */
  font-size: 14px;
  top: 1px;
}
.terms-doc-main--verbatim .terms-ol-decimal-sub--1 {
  counter-reset: termsub1;
}
.terms-doc-main--verbatim .terms-ol-decimal-sub--1 > li {
  counter-increment: termsub1;
}
.terms-doc-main--verbatim .terms-ol-decimal-sub--1 > li::before {
  content: "1." counter(termsub1) "\00a0";
  position: absolute;
  left: 0;
  font-weight: 600;
  color: var(--text-dark);
}
.terms-doc-main--verbatim .terms-ol-decimal-sub--2 {
  counter-reset: termsub2;
}
.terms-doc-main--verbatim .terms-ol-decimal-sub--2 > li {
  counter-increment: termsub2;
}
.terms-doc-main--verbatim .terms-ol-decimal-sub--2 > li::before {
  content: "2." counter(termsub2) "\00a0";
  position: absolute;
  left: 0;
  font-weight: 600;
  color: var(--text-dark);
}

/* SLA page: stat grid + responsive tables (reuses .lg-table) */
.sla-highlight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 2rem 0 1.5rem;
}
@media (max-width: 768px) {
  .sla-highlight-grid {
    grid-template-columns: 1fr;
  }
}
.sla-highlight-grid__item {
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 1.25rem 1rem;
  text-align: center;
  background: #fafafa;
}
.sla-highlight-grid__value {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 800;
  margin: 0 0 0.35rem;
  color: var(--purple, #4500a7);
  line-height: 1.1;
}
.sla-highlight-grid__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #666;
  margin: 0 0 0.5rem;
}
.sla-highlight-grid__title {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  color: var(--text-body, #333);
  line-height: 1.35;
}
.terms-doc-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1rem 0 1.5rem;
  border-radius: 12px;
  border: 1px solid #eee;
  background: #fff;
}
.terms-doc-main--verbatim .terms-doc-table-wrap .lg-table {
  margin: 0;
  min-width: 520px;
}
.terms-doc-main--verbatim .terms-doc-table-wrap .lg-table th[scope="row"] {
  font-weight: 600;
  color: var(--text-body, #333);
  text-transform: none;
  letter-spacing: normal;
  font-size: 15px;
}

/* ============================================================
   ABOUT PAGE — mobile-first responsive (about.html / .about-page)
   Base = phone; @media (min-width: 768px) = tablet+ enhancements
   ============================================================ */

.about-page {
  max-width: 100%;
  overflow-x: clip;
}

.about-page *,
.about-page *::before,
.about-page *::after {
  box-sizing: border-box;
}


.about-page .container {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* ---------- Mobile base (< 768px) ---------- */

.about-page .about-section {
  padding: 0;
  margin: 0;
  max-width: 100%;
  background: var(--bg-soft);
}

.about-page .about-section .bms-hero__breadcrumb {
  text-align: center;
  padding: 12px 16px;
  margin: 0;
  
  max-width: 100%;
  overflow-wrap: break-word;
}

.about-page .hero__content.about-content {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 16px;
  border-radius: 0;
  box-shadow: none;
  max-width: 1500px !important;
  padding-bottom: 0 !important;
}

.about-page .hero__title-row {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  text-align: center;
  gap: 14px;
  margin: 0 0 16px;
  max-width: 100%;
}

.about-page .hero__title {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
  font-size: clamp(1.5rem, 7vw, 2.25rem);
  line-height: 1.2;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
}

/* 手機：標題下的水平紅線（全站直條樣式在此頁改為橫向） */
.about-page .hero__title-bar {
  display: block;
  width: 48px;
  height: 5px;
  min-height: 0;
  margin: 0;
  flex-shrink: 0;
  align-self: center;
  transform: none;
  border-radius: 100px !important;
}

/* Typewriter reserve / live stack */
.about-page .about-content .about-hero-title {
  position: relative;
  display: block;
  max-width: 100%;
  text-align: center;
}
.about-page .about-content .about-hero-title__reserve {
  visibility: hidden;
  display: block;
  pointer-events: none;
  user-select: none;
  text-align: center;
}
.about-page .about-content .about-hero-title__live {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  display: block;
  text-align: center;
}
.about-page .about-hero__cursor-spacer {
  display: inline-block;
  width: 4px;
  height: 0.78em;
  margin-left: 6px;
  vertical-align: -0.06em;
}

.about-page .about-content .about-hero-line2 {
  display: inline;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
}

.about-page .about-content .hero__title-sub {
  font-family: var(--font-h);
  font-weight: 300 !important;
  font-size: 16px;
  line-height: 1.55;
  color: var(--black);
  max-width: 100%;
  margin: 0;
  overflow-wrap: break-word;
  text-align: center;
}

/* Cursor line — no glow on mobile */
.about-page .about-hero__cursor {
  display: inline-block;
  width: 4px;
  height: 0.78em;
  margin-left: 6px;
  vertical-align: -0.06em;
  border-radius: 0;
  background: var(--purple);
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.about-page .about-hero__cursor--visible {
  opacity: 1;
  visibility: visible;
  animation: about-hero-cursor-blink 0.7s step-end infinite;
}
.about-page .about-hero__cursor--reduced {
  animation: none;
}
@keyframes about-hero-cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}
@media (prefers-reduced-motion: reduce) {
  .about-page .about-hero__cursor--visible:not(.about-hero__cursor--reduced) {
    animation: none;
    opacity: 1;
  }
}

/* Content grid — edge-to-edge cards, borders only */
.about-page .about-grid {
  padding: 0;
  margin: 0;
  max-width: 100%;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: center;
}

.about-page .about-grid__inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.about-page .about-featured-card {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 240px;
  height: min(58vw, 360px);
  border-radius: 0;
  box-shadow: none;
  border: none;
  border-bottom: 1px solid #e5e5e5;
  overflow: hidden;
  background: #0a0e1a;
  transition: none;
}

.about-page .about-featured-card:hover {
  transform: none;
  box-shadow: none;
}

.about-page .about-featured-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-page .about-featured-card__overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 24px 16px 20px;
  background: linear-gradient(to top, rgb(0 24 61 / 99%) 0%, rgb(43 43 43 / 56%) 89%, transparent);
  color: #fff;
  overflow-wrap: break-word;
}

.about-page .about-featured-card__title {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: clamp(1.15rem, 4vw, 1.5rem);
  line-height: 1.3;
  margin: 0 0 8px;
  color: #fff;
}

.about-page .about-featured-card__desc {
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  opacity: 0.95;
  color: #fff;
  overflow-wrap: break-word;
}

.about-page .about-grid__cards {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 100%;
  min-height: 0;
}

.about-page .about-card {
  width: 100%;
  max-width: 100%;
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  border: none;
  border-bottom: 1px solid #e5e5e5;
  padding: 20px 16px;
  transition: none;
}

.about-page .about-card:hover {
  transform: none;
  box-shadow: none;
}

.about-page .about-card__title {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: clamp(1rem, 3.5vw, 1.25rem);
  line-height: 1.35;
  color: #000;
  margin: 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  max-width: 100%;
  overflow-wrap: break-word;
}

.about-page .about-card__title-text {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
}

/* Dot: visible on mobile but no shadow / pulse ring */
.about-page .about-card__dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.32em;
  background: radial-gradient(circle at 32% 28%, #4dff8f 0%, #00ff82 45%, #02ff54 100%);
  border: 2px solid #007d32;
  box-shadow: none;
  animation: none;
}

.about-page .about-card__desc {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  margin: 0;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* ---------- Mission (About page only) — mobile ---------- */

.about-page .mission-section {
  position: relative;
  max-width: 100%;
  margin: 0;
  min-height: min(70vh, 420px);
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
  padding: 36px 0 44px;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}

/* 手機：底圖／遮罩拉滿視窗寬度，唔留左右 gutter（對應設計上約 35px 內縮感） */
.about-page .mission-section__bg {
  position: absolute;
  left: 50%;
  right: auto;
  top: 0;
  bottom: 0;
  width: 100vw;
  max-width: none;
  transform: translateX(-50%);
  isolation: isolate;
}

.about-page .mission-section__bg-img {
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  display: block;
}

.about-page .mission-section__bg::before,
.about-page .mission-section__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}
.about-page .mission-section__bg::after {
  z-index: 1;
  background: #101820;
  mix-blend-mode: multiply;
}
.about-page .mission-section__bg::before {
  z-index: 2;
  background: #fff;
  mix-blend-mode: overlay;
}

.js-enabled .about-page .mission-section.reveal-on-scroll--in-view .mission-section__bg::after {
  animation: mission-bg-flicker-dim 16s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
.js-enabled .about-page .mission-section.reveal-on-scroll--in-view .mission-section__bg::before {
  animation: mission-bg-flicker-blow 22s cubic-bezier(0.42, 0, 0.58, 1) infinite;
  animation-delay: -6s;
}
.js-enabled .about-page .mission-section.reveal-on-scroll--tab-jump .mission-section__bg::before,
.js-enabled .about-page .mission-section.reveal-on-scroll--tab-jump .mission-section__bg::after {
  animation: none;
  opacity: 0;
}

@keyframes mission-bg-flicker-dim {
  0%, 3% { opacity: 0; }
  8% { opacity: 0.3; }
  13% { opacity: 0; }
  24%, 26% { opacity: 0; }
  32% { opacity: 0.2; }
  38% { opacity: 0; }
  52%, 54% { opacity: 0; }
  60% { opacity: 0.34; }
  67% { opacity: 0; }
  78%, 80% { opacity: 0; }
  86% { opacity: 0.18; }
  92% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes mission-bg-flicker-blow {
  0%, 4% { opacity: 0; }
  12% { opacity: 0.72; }
  20% { opacity: 0; }
  36%, 38% { opacity: 0; }
  46% { opacity: 0.55; }
  54% { opacity: 0; }
  68%, 70% { opacity: 0; }
  78% { opacity: 0.85; }
  86% { opacity: 0; }
  100% { opacity: 0; }
}

.js-enabled .about-page .mission-section .mission-section__bg-img {
  filter: grayscale(1) brightness(0.88);
  transition: filter 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-enabled .about-page .mission-section.reveal-on-scroll--in-view .mission-section__bg-img {
  filter: grayscale(0) brightness(1) saturate(1.06);
  transition-delay: 0.18s;
}
.js-enabled .about-page .mission-section.reveal-on-scroll--tab-jump .mission-section__bg-img {
  filter: grayscale(0) brightness(1);
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-enabled .about-page .mission-section .mission-section__bg-img,
  .js-enabled .about-page .mission-section.reveal-on-scroll--in-view .mission-section__bg-img {
    filter: none;
    transition: none;
  }
  .js-enabled .about-page .mission-section.reveal-on-scroll--in-view .mission-section__bg::before,
  .js-enabled .about-page .mission-section.reveal-on-scroll--in-view .mission-section__bg::after {
    animation: none;
    opacity: 0;
  }
}

.about-page .mission-section__overlay {
  position: absolute;
  left: 50%;
  right: auto;
  top: 0;
  bottom: 0;
  width: 100vw;
  max-width: none;
  transform: translateX(-50%);
  background: linear-gradient(to right, rgba(0, 15, 35, 0.92) 0%, rgb(0 15 35 / 77%) 57%, transparent 80%);
  pointer-events: none;
}

.about-page .mission-section .container.mission-section__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 24px 40px 33px 40px;
}

.about-page .mission-section .section-badge--white {
  margin-bottom: 16px;
}

.about-page .mission-section__title {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: clamp(1.35rem, 5.5vw, 2.75rem);
  line-height: 1.2;
  color: var(--white);
  margin: 0 0 20px;
  max-width: 100%;
  overflow-wrap: break-word;
}

.about-page .mission-section__title-accent {
  color: var(--green);
}

.about-page .mission-section__accent-line {
  display: inline;
}
.about-page .mission-section__accent-stack {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  max-width: 100%;
}
.about-page .mission-section__title-accent-reserve {
  visibility: hidden;
  display: inline-block;
  white-space: pre;
}
.about-page .mission-section__accent-stack .typewriter.mission-section__title-accent {
  position: absolute;
  left: 0;
  top: 0;
  white-space: pre;
}
.about-page .mission-section .typewriter--cursor::after {
  color: var(--green);
}

.about-page .mission-section__accent-bar {
  display: inline-block;
  width: 4px;
  height: 0.78em;
  margin-left: 6px;
  vertical-align: -0.06em;
  border-radius: 0;
  background: var(--green);
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.about-page .mission-section__accent-bar--visible {
  opacity: 1;
  visibility: visible;
  animation: mission-accent-bar-blink 0.7s step-end infinite;
}
@keyframes mission-accent-bar-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}
.about-page .mission-section__accent-line--static .mission-section__title-accent-reserve {
  display: none;
}
.about-page .mission-section__accent-line--static .mission-section__accent-stack .typewriter.mission-section__title-accent {
  position: static;
}
.about-page .mission-section__accent-bar--reduced {
  animation: none;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .about-page .mission-section__accent-bar--visible:not(.mission-section__accent-bar--reduced) {
    animation: none;
    opacity: 1;
  }
}

.about-page .mission-section__list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0 0 0 4px;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 100%;
}

.about-page .mission-section__list-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  max-width: 100%;
}

.about-page .mission-section__list-item:last-child {
  border-bottom: none;
}

.about-page .mission-section__dot-wrap {
  position: relative;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.about-page .mission-section__list-item:not(:last-child) .mission-section__dot-wrap::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 16px;
  background: rgba(120, 140, 160, 0.45);
}

.about-page .mission-section__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid rgba(120, 140, 160, 0.6);
  flex-shrink: 0;
  transition: background 0.35s ease, border-color 0.35s ease;
  box-shadow: none;
}

.about-page .mission-section__list-item--active .mission-section__dot {
  background: var(--green);
  border-color: var(--green);
  box-shadow: none;
}

.about-page .mission-section__list-label {
  font-family: var(--font-b);
  font-size: 15px;
  line-height: 1.45;
  color: rgba(200, 215, 230, 0.9);
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
  transition: color 0.35s ease;
}

.about-page .mission-section__list-item--active .mission-section__list-label {
  color: var(--green);
}

@media (prefers-reduced-motion: reduce) {
  .about-page .mission-section__dot,
  .about-page .mission-section__list-label {
    transition: none;
  }
}

.about-page .mission-section__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 100%;
}

.about-page .mission-section__btn--ghost {
  background: transparent;
  color: var(--white);
  border: 2px solid var(--white);
 
  box-shadow: none;
}

.about-page .mission-section__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  border-color: var(--white);
}

/* ---------- About Key (Differentiators) — mobile ---------- */

.about-page .about-key.workload-section {
  padding: 28px 0 36px;
  margin: 0;
  max-width: 100%;
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid #e5e5e5;
  max-width: 1340px;
  margin: 0 auto;
}

.about-page .about-key .workload__grid {
  padding-left: 16px;
  padding-right: 16px;
}

.about-page .about-key .workload__title {
  line-height: 1.15;
  margin-bottom: 12px;
  max-width: 100%;
  overflow-wrap: break-word;
}

.about-page .about-key .workload__desc {
  margin-bottom: 20px;
  color: var(--black);
  max-width: 100%;
  overflow-wrap: break-word;
}

.about-page .about-key__slash {
  color: var(--red);
  font-weight: 800;
  margin-right: 6px;
}

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

.about-page .about-key .workload__detail-bar {
  display: none;
}

.about-page .about-key .workload__detail {
  gap: 0;
  align-items: flex-start;
}

.about-page .about-key .workload__detail-title {
  font-weight: 700;
  max-width: 100%;
  overflow-wrap: break-word;
}

.about-page .about-key .workload__img-wrap {
  border-radius: 0;
  box-shadow: none;
  border: 1px solid #e5e5e5;
  max-width: 100%;
}

/* ---------- Tablet & desktop (min-width: 768px) ---------- */

@media (min-width: 768px) {
  .about-page .container {
    max-width: var(--container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }

  .about-page .about-section {
    padding: 24px 0 0;
  }

  .about-page .about-section .bms-hero__breadcrumb {
    border-bottom: none;
    padding: 8px 0 0;
  }

  .about-page .hero__content.about-content {
    padding: 20px 5% 24px;
    max-width: 1360px;
  }

  /* 768+：與全站 hero 相同 — 一橫排：標題 | 直紅線 | 副文 */
  .about-page .hero__title-row {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 36px;
    margin-bottom: 24px;
  }

  .about-page .hero__title {
    font-size: clamp(2rem, 4vw, 3.9rem);
    line-height: 1.05;
    text-align: left;
  }

  .about-page .hero__title-bar {
    display: block;
    width: 6px;
    min-height: 120px;
    height: auto;
    margin: 8px 0 0;
    flex-shrink: 0;
    align-self: center;
    transform: rotate(16deg);
    border-radius: 100px;
  }

  .about-page .about-content .about-hero-title {
    text-align: left;
  }

  .about-page .about-content .about-hero-title__reserve,
  .about-page .about-content .about-hero-title__live {
    text-align: left;
  }

  .about-page .about-content .about-hero-line2 {
    display: inline-block;
    white-space: nowrap;
  }

  .about-page .about-content .hero__title-sub {
    font-size: 18px;
    line-height: 26px;
    max-width: 34%;
    margin: 4px 0 0;
    flex-shrink: 0;
    text-align: left;
  }

  .about-page .about-hero__cursor {
    border-radius: 1px;
  }

  .about-page .about-grid {
    padding: 40px 5% 72px;
    border-top: none;
  }

  .about-page .about-grid__inner {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    grid-template-rows: minmax(500px, auto);
    align-items: stretch;
    gap: 24px;
    padding: 0;
    max-width: 1340px;
  }

  .about-page .about-featured-card {
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    height: 100%;
    min-height: 500px;
    border-radius: 28px;
    box-shadow: var(--shadow-card);
    border-bottom: none;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
  }

  .about-page .about-featured-card:hover {
    transform: translateY(-8px);
    box-shadow:
      0px 6px 12px rgba(7, 4, 146, 0.14),
      0px 28px 56px rgba(6, 47, 125, 0.16),
      0px 14px 28px rgba(27, 59, 119, 0.12);
  }

  .about-page .about-featured-card__overlay {
    padding: 42px 35px 35px;
  }

  .about-page .about-featured-card__title {
    font-size: 26px;
  }

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

  .about-page .about-grid__cards {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 24px;
    height: 100%;
    min-height: 0;
  }

  .about-page .about-card {
    min-height: 0;
    height: 100%;
    box-sizing: border-box;
    border-radius: 28px;
    box-shadow: var(--shadow-card);
    border: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
    padding: 40px 32px;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
  }

  .about-page .about-card:hover {
    transform: translateY(-8px);
    box-shadow:
      0px 6px 14px rgba(0, 0, 0, 0.08),
      0px 20px 44px rgba(7, 4, 146, 0.12),
      0px 12px 28px rgba(27, 59, 119, 0.1);
  }

  .about-page .about-card__title {
    font-size: 22px;
    gap: 12px;
  }

  .about-page .about-card__dot {
    box-shadow:
      0 2px 6px rgba(0, 70, 35, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.35);
    animation: aboutCardDotPulse 2.2s ease-in-out infinite;
  }

  @keyframes aboutCardDotPulse {
    0%, 100% {
      box-shadow:
        0 2px 6px rgba(0, 70, 35, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 0 0 0 rgba(0, 190, 80, 0.55);
    }
    55% {
      box-shadow:
        0 2px 6px rgba(0, 70, 35, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 0 0 10px rgba(0, 190, 80, 0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .about-page .about-featured-card,
    .about-page .about-card {
      transition: box-shadow 0.35s ease;
    }
    .about-page .about-featured-card:hover,
    .about-page .about-card:hover {
      transform: none;
    }
    .about-page .about-card__dot {
      animation: none;
      box-shadow: 0 2px 6px rgba(0, 70, 35, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
  }

  .about-page .mission-section__bg {
    inset: 0;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    transform: none;
  }

  .about-page .mission-section__overlay {
    inset: 0;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    transform: none;
  }

  .about-page .mission-section {
    margin: 80px 3% 60px;
    border-radius: var(--radius-xl);
    min-height: 520px;
    padding: 50px 0;
    border-top: none;
    border-bottom: none;
  }

  .about-page .mission-section .container.mission-section__inner {
    padding: 72px 50px 80px;
    max-width: 1280px;
  }

  .about-page .mission-section__title {
    margin-bottom: 28px;
  }

  .about-page .mission-section__accent-bar {
    border-radius: 1px;
    box-shadow: 0 0 10px rgba(0, 255, 55, 0.5);
  }

  .about-page .mission-section__list-item {
    border-bottom: none;
    padding: 8px 10px 8px 0;
  }

  .about-page .mission-section__list-item:not(:last-child) .mission-section__dot-wrap::after {
    height: 20px;
  }

  .about-page .mission-section__list-item--active .mission-section__dot {
    box-shadow: 0 0 8px rgba(0, 255, 55, 0.5);
  }

  .about-page .mission-section__list-label {
    font-size: 16px;
  }

  .about-page .about-key.workload-section {
    padding: 80px 50px;
    border-top: none;
}

  .about-page .about-key .workload__grid {
    padding-left: 0;
    padding-right: 0;
  }

  .about-page .about-key .workload__desc {
    margin-bottom: 45px;
  }

  .about-page .about-key .workload__img-wrap {
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.12);
    border: none;
  }
}

@media (min-width: 768px) and (max-width: 959px) {
  .about-page .about-grid__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-items: stretch;
  }
  .about-page .about-featured-card {
    grid-column: 1;
    grid-row: 1;
    height: 360px;
    min-height: 360px;
    align-self: stretch;
  }
  .about-page .about-grid__cards {
    grid-column: 1;
    grid-row: 2;
    height: auto;
    min-height: 280px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
}


@media (max-width: 680px){
  
  .about-page .mission-section__bg {
 background: #002757;}

 .mission-section__bg-img {

  opacity: 0;
}

/* Contact page: keep privacy/about visual language with 1200 container */
.contact-page .container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.contact-page .contact-grid {
  padding: 36px 0 56px;
  border-top: 1px solid #ececec;
}

.contact-page .contact-grid__inner {
  display: block;
  max-width: 100%;
}

.contact-page .contact-grid__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 24px;
  align-items: stretch;
}

.contact-page .about-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 22px;
  border: 1px solid #e7e7e7;
  box-shadow: var(--shadow-card);
  padding: 30px 24px;
}

.contact-page .contact-page__actions {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: auto;
  padding-top: 18px;
}

.contact-page .contact-page__actions .workload__solution,
.contact-page .tailored-config__cta .workload__solution {
  border-top: 1px solid var(--border);
}

.contact-page .contact-page__actions .workload__solution:last-child,
.contact-page .tailored-config__cta .workload__solution:last-child {
  border-bottom: 1px solid var(--border);
}

.contact-page .tailored-config__cta {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 20px;
  max-width: 460px;
}

.contact-page .contact-page__meta-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.contact-page .contact-page__meta-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-body);
  font-size: 14px;
}

.contact-page .contact-page__meta-list i {
  color: var(--yellow);
}

.contact-page .contact-page__meta-list a {
  color: var(--text-body);
  text-decoration: none;
}

.contact-page .contact-page__actions--contact-links {
  margin-top: 14px;
}

.contact-page .tailored-config {
  padding-top: 20px;
}

@media (max-width: 991px) {
  .contact-page .contact-grid__cards {
    grid-auto-rows: auto;
    grid-template-columns: 1fr;
  }
}

.about-page .hero__content.about-content{padding-top:0}

}



/* iOS does not support background-attachment: fixed */
@supports (-webkit-touch-callout: none) {
  .cpu-section { background-attachment: scroll; }
}

/* ============================================================
   BLOG / NEWSROOM PAGE (wireframe section lines + layered max-width)
   ============================================================ */
.newsroom-page .bms-hero {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}

/* blog-detail: breadcrumb-only strip, centered (matches blog.html hero nav) */
.newsroom-page #page-main-blog-detail .blog-detail-breadcrumb.bms-hero {
  padding-top: 28px;
  padding-bottom: 20px;
}
.newsroom-page #page-main-blog-detail .blog-detail-breadcrumb .bms-hero__breadcrumb {
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* blog-detail: 主欄包 article + 文末 About interstitial（仍佔 grid 第一欄） */
#page-main-blog-detail .blog-detail-main-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5vw, 56px);
}
#page-main-blog-detail .blog-detail-main-col .newsroom-interstitial {
  grid-column: unset;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
#page-main-blog-detail .newsroom-interstitial__brand-mark {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 0 12px;
  object-fit: contain;
}

/* blog-detail: 右欄 aside 要拉滿與左欄同一列高度，sticky 先會黏住（否則 align-items:start 令 aside 變矮） */
#page-main-blog-detail .terms-doc-layout > .blog-detail-aside {
  align-self: stretch;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* blog-detail: sticky column — TOC (terms 紅線) + Share 獨立 panel 方盒 */
#page-main-blog-detail .blog-detail-sidebar__sticky {
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--bms-navbar-h, 72px) + 20px);
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#newsroom-related-heading {
  margin-bottom: 2%;
  text-align: center;
}

#page-main-blog-detail .bms-hero {
  padding-bottom: 0px;
  border-bottom: 1px solid #ededed;
}

#page-main-blog-detail .blog-detail-sidebar__sticky .terms-doc-toc.blog-detail-toc-panel {
  position: static;
  max-height: min(52vh, 480px);
  flex-shrink: 0;
  padding-right: 25px;
}
#page-main-blog-detail .blog-detail-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  padding: 20px 18px;
  box-shadow: 0 1px 0 var(--border-lt);
}
#page-main-blog-detail .blog-detail-panel__title {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-label);
  margin: 0 0 14px;
}
#page-main-blog-detail .blog-detail-panel .footer__social {
  flex-wrap: wrap;
  gap: 10px;
}


/* Hero H1：紫色「Blog & Newsroom」與前文同一行、不斷行（窄屏由父層 clamp 縮字） */
.newsroom-page .bms-hero__title-line-wrap--newsroom-single .bms-hero__title-reserve,
.newsroom-page .bms-hero__title-line-wrap--newsroom-single .bms-hero__title-type--nr-inline {
  white-space: nowrap;
}
.newsroom-page .bms-hero__title-type--nr-inline {
  display: block;
}
.newsroom-page .bms-hero__title-line-wrap--newsroom-single .bms-hero__title-line--purple {
  color: var(--purple);
}

.newsroom-page .bms-hero__title--newsroom-nowrap .bms-hero__title-fallback {
  white-space: nowrap;
}

.newsroom-inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.newsroom-wire {
  width: 100%;
  border-top: 1px solid var(--border);
}

/* Hero already has a bottom rule — avoid a double line */
.newsroom-page .newsroom-featured-wrap.newsroom-wire {
    border-top: none;
    padding-top: 20px;
}

.newsroom-page .newsroom-newsletter.newsroom-wire {
  border-bottom: 1px solid var(--border);
}

/* —— Featured post —— */
.newsroom-featured-wrap {
  background: var(--white);
  padding: 48px 0 56px;
}

/* 雙欄：≥1281px；≤1280px 改單欄（提早於全站 992 斷點） */
.newsroom-featured {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 3.5vw, 40px);
  align-items: center;
  min-width: 0;
}

/* 寬螢幕 only：反轉欄寬 + 視覺順序（文左／圖右） */
@media (min-width: 1281px) {
  .newsroom-featured.newsroom-featured--reverse {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    background: #f7f7f7;
    border-radius: 14px;
    padding-left: 5%;
  }



  .newsroom-featured.newsroom-featured--reverse .newsroom-featured__body {
    order: 1;
  }

  .newsroom-featured.newsroom-featured--reverse .newsroom-featured__media {
    order: 2;
  }
}

.newsroom-featured__media,
.newsroom-featured__body {
  min-width: 0;
}

.newsroom-featured__media {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  max-width: 100%;
}

.newsroom-featured__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  display: block;
}

.newsroom-featured__meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0 0 16px;
}

/* 分類：沿用全站 section-badge（邊框 pill） */
.newsroom-featured__category.section-badge {
  margin-bottom: 0;
  flex-shrink: 0;
  align-self: center;
}

.newsroom-featured__date {
  margin-bottom: 0;
  text-align: right;
  flex-shrink: 1;
  min-width: 0;
}

.newsroom-featured__title {
  font-family: var(--font-h);
  font-weight: 700;
  color: var(--black);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.12;
  margin: 0 0 16px;
}

.newsroom-featured__excerpt {
  color: var(--text-body);
  margin-bottom: 20px;
  max-width: 520px;
}

.newsroom-featured__link {
  font-size: 15px;
}

/* —— Sticky filter + search —— */
.newsroom-filter-strip {
  position: sticky;
  top: var(--bms-navbar-h, 72px);
  z-index: 800;
  background: var(--white);
  padding: 10px 0;
  box-shadow: 0 1px 0 #ffffff;
}

.newsroom-filter-strip__inner {
  padding-top: 0;
  padding-bottom: 0;
}

.newsroom-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.newsroom-filter__tabs {
  flex-wrap: wrap;
  gap: 8px;
}

.newsroom-filter__select-wrap {
  display: none;
  width: 100%;
}

.newsroom-filter__tab {
  font-size: 14px;
  padding: 10px 16px;
}

.newsroom-filter__search {
  min-width: min(100%, 280px);
  flex: 1 1 240px;
  max-width: 360px;
}

/* Search icon: same stroke SVG style as header Resources → Looking Glass */
.newsroom-filter__search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.newsroom-filter__search-icon svg {
  display: block;
}

.newsroom-page .newsroom-filter__field.cf7-field {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
}

.newsroom-page .newsroom-filter__field--search.cf7-field {
  position: relative;
  align-items: center;
}

.newsroom-page .newsroom-filter__field:focus-within {
  border-color: var(--purple);
  box-shadow: 0 0 0 1px var(--purple-tint);
}

.newsroom-page .newsroom-filter__field:focus-within .newsroom-filter__search-icon {
  color: var(--text-label);
}

.newsroom-page .newsroom-filter__field .cf7-input {
  color: var(--black);
  background: var(--white);
}

.newsroom-page .newsroom-filter__field--search .cf7-input {
  width: 100%;
  padding-left: 2.5rem;
  padding-right: 12px;
}

.newsroom-page .newsroom-filter__field .cf7-input::placeholder {
  color: var(--text-muted);
}

/* Pagination (same pill style as earlier blog list) */
.newsroom-page .blog-trends-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
}

.newsroom-page .blog-trends-pagination .bms-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

/* —— Main grid + interstitial —— */
.newsroom-main {
  background: var(--bg-soft);
  padding: 48px 0 80px;
}

.newsroom-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.newsroom-grid .newsroom-card.promo__card {
  min-height: 100%;
  flex: initial;
  opacity: 1;
  transform: none;
}

.newsroom-grid .newsroom-card.promo__card--has-img .promo__card-img {
  height: 200px;
}

.newsroom-grid .newsroom-card.promo__card--has-img .promo__card-img img {
  width: 100%;
  height: auto;
  min-height: 100%;
  object-fit: cover;
}

/* 卡片：類型用 section-badge 包邊；日期維持 promo__card-label、右對齊 */
.newsroom-grid .promo__card--has-img .newsroom-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding-left: 24px;
  padding-right: 24px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.newsroom-grid .newsroom-card__type.section-badge {
  margin-bottom: 0;
  max-width: min(100%, 70%);
  
  font-weight: 500;
  padding: 5px 10px;
}

.newsroom-grid .newsroom-card__date.promo__card-label {
  margin-top: 0;
  margin-bottom: 0;
  text-align: right;
  flex: 1 1 auto;
  min-width: 0;
  /* .newsroom-card__meta 已有左右 padding，避免與全站 .promo__card--has-img 規則重疊 */
  padding-left: 0;
  padding-right: 0;
}

@keyframes newsroom-interstitial-bg-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.newsroom-interstitial {
  grid-column: 1 / -1;
  background: linear-gradient(
    125deg,
    var(--navy) 0%,
    var(--navy-deep) 22%,
    var(--purple) 48%,
    var(--navy-deep) 72%,
    var(--navy) 100%
  );
  background-size: 280% 280%;
  animation: newsroom-interstitial-bg-shift 16s ease-in-out infinite;
  border: 1px solid var(--navy-deep);
  border-radius: var(--radius-md);
  padding: 10px 24px;
  box-shadow: var(--shadow-card);
}

.newsroom-interstitial[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .newsroom-interstitial {
    animation: none;
    background: var(--navy);
    background-size: auto;
  }
}

.newsroom-interstitial__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1100px;
  margin: 25px auto;
}

.newsroom-interstitial__badge {
  border-color: rgba(255, 255, 255, 0.35);
  margin-bottom: 10px;
}

.newsroom-interstitial__title {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 35px);
  line-height: 1.2;
  color: var(--white);
  margin: 0 0 10px;
}

.newsroom-interstitial__desc {
  font-family: var(--font-b);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-light);
  margin: 0;
  max-width: 660px;
}
.newsroom-interstitial__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px;
}

.newsroom-interstitial__cta-secondary {
  margin: 0;
}

.newsroom-empty {
  text-align: center;
  color: var(--text-muted);
  margin-top: 32px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.newsroom-empty[hidden] {
  display: none !important;
}

/* —— Newsletter —— */
.newsroom-newsletter {
  background: var(--white);
  padding: 48px 0 64px;
}

.newsroom-newsletter__heading {
  margin-bottom: 8px;
  color: var(--black);
}

.newsroom-newsletter__hint {
  color: var(--text-muted);
  margin-bottom: 24px;
  max-width: 520px;
}

.newsroom-newsletter__form {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 14px;
  max-width: 640px;
}

.newsroom-page .newsroom-newsletter__field.cf7-field {
  flex: 1 1 260px;
  min-width: 200px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
}

.newsroom-page .newsroom-newsletter__field:focus-within {
  border-color: var(--purple);
  box-shadow: 0 0 0 1px var(--purple-tint);
}

.newsroom-page .newsroom-newsletter__field .cf7-label {
  min-width: 72px;
  color: var(--black);
  background: var(--bg-soft);
  border-right-color: var(--border-lt);
}

.newsroom-page .newsroom-newsletter__field .cf7-input {
  color: var(--black);
  background: var(--white);
}

.newsroom-page .newsroom-newsletter__field .cf7-input::placeholder {
  color: var(--text-muted);
}

.newsroom-newsletter__form .btn {
  align-self: center;
}

.newsroom-page .newsroom-newsletter__form .btn:disabled {
  opacity: 0.7;
  pointer-events: none;
}

.newsroom-page .blog-subscribe__success {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 640px;
  margin-top: 6px;
  padding: 14px 18px;
  border: 1px solid rgba(33, 150, 83, 0.25);
  border-radius: 10px;
  background: linear-gradient(135deg, #f3fff8 0%, #edfbf3 100%);
  color: var(--text-dark);
  font-family: var(--font-p);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  box-shadow: 0 10px 30px rgba(33, 150, 83, 0.08);
  animation: fadeIn 0.4s ease forwards;
}

.newsroom-page .blog-subscribe__success i {
  color: #219653;
  font-size: 20px;
  line-height: 1;
}

.newsroom-page .blog-subscribe__success[hidden] {
  display: none !important;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1199px) {
  .newsroom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1280px) {
  .newsroom-featured {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: clamp(20px, 4vw, 28px);
  }

  /* 無論有無 --reverse：文字欄在上、圖在下（左欄／主內容先） */
  .newsroom-featured .newsroom-featured__body {
    order: 1;
  }

  .newsroom-featured .newsroom-featured__media {
    order: 2;
  }

  /* 取消寬螢幕 reverse 裝飾，避免單欄擠壓 */
  .newsroom-featured.newsroom-featured--reverse {
    padding-left: 0;
    background: var(--white);
    border-radius: 0;
  }

  .newsroom-featured__excerpt {
    max-width: none;
  }
}

@media (max-width: 767px) {
  /* Newsroom hero: allow wrapped title height to reserve space on mobile */
  .newsroom-page .bms-hero__title-line-wrap--newsroom-single .bms-hero__title-reserve,
  .newsroom-page .bms-hero__title-line-wrap--newsroom-single .bms-hero__title-type--nr-inline,
  .newsroom-page .bms-hero__title--newsroom-nowrap .bms-hero__title-fallback {
    white-space: normal !important;
  }

  .newsroom-page .bms-hero__title-line-wrap--newsroom-single .bms-hero__title-type--nr-inline {
    position: static;
  }

  .newsroom-page .bms-hero__title-line-wrap--newsroom-single .bms-hero__title-reserve {
    display: none;
  }

  .newsroom-inner {
    padding: 0 1rem;
  }

  .newsroom-featured-wrap {
    padding: 36px 0 44px;
  }

  .newsroom-filter-strip {
    padding: 14px 0;
  }

  .newsroom-filter {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .newsroom-filter__tabs {
    display: none;
  }

  .newsroom-filter__select-wrap {
    display: block;
    order: 1;
  }

  .newsroom-filter__select-wrap .dc-location-select {
    width: 100%;
    min-width: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23d4380d' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 10px 6px;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 15px;
  }

  .newsroom-filter__search {
    order: 2;
    width: 100%;
    flex: 0 0 auto;
    max-width: none;
  }

  .newsroom-page .newsroom-filter__field--search.cf7-field {
    width: 100%;
  }

  .newsroom-main {
    padding: 36px 0 64px;
  }

  .newsroom-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .newsroom-grid .newsroom-card.promo__card--has-img .promo__card-img {
    height: 190px;
  }

  .newsroom-interstitial {
    padding: 24px 20px;
  }

  .newsroom-newsletter {
    padding: 40px 0 56px;
  }

  .newsroom-newsletter__form .btn {
    width: 100%;
    justify-content: center;
  }

  .newsroom-page .blog-trends-pagination {
    margin-top: 28px;
  }
}

@media (min-width: 768px) {
  .newsroom-filter__select-wrap {
    display: none !important;
  }
}

/* blog-detail.html — terms-doc main + .xlc-blog-content (privacy typography).
   Top hero uses .newsroom-featured (same as blog.html). */
.page-main--terms .terms-doc-main.xlc-blog-content > h2 {
  font-family: var(--font-h);
  font-size: clamp(22px, 2.8vw, 28px);
  font-weight: 800;
  color: var(--text-dark);
  margin: 2.25rem 0 1rem;
  padding-top: 0.5rem;
  line-height: 1.2;
}
.page-main--terms .terms-doc-main.xlc-blog-content > h2:first-of-type {
  margin-top: 0;
}
.page-main--terms .terms-doc-main.xlc-blog-content h3 {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-h);
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 700;
  color: var(--text-dark);
  margin: 1.35rem 0 0.65rem;
  line-height: 1.3;
}
.page-main--terms .terms-doc-main.xlc-blog-content h3::before {
  content: '';
  display: block;
  width: 5px;
  height: 40px;
  min-width: 5px;
  flex-shrink: 0;
  background: var(--red);
  border-radius: 100px;
  transform: rotate(16deg);
  transform-origin: center center;
}
.page-main--terms .terms-doc-main.xlc-blog-content > h2 + h3 {
  margin-top: 1rem;
}

.page-main--terms .terms-doc-main.xlc-blog-content p,
.page-main--terms .terms-doc-main.xlc-blog-content li {
 
  font-size: 17px;
  line-height: 1.72;
  color: var(--text-body, #333);
  margin: 0 0 1em;
}

#blog-detail-about-interstitial  .newsroom-interstitial__title {
  
  font-size: clamp(22px, 3vw, 30px);

}

#blog-detail-about-interstitial .newsroom-interstitial__desc {

  font-size: 14px;
  line-height: 1.55;
  color: #e1e1e1;
  margin: 0;
  max-width: 100%;
}

.page-main--terms .terms-doc-main.xlc-blog-content ul {
  list-style: none;
  padding-left: 0;
  margin: 0.65em 0 1.15em;
}
.page-main--terms .terms-doc-main.xlc-blog-content ul li {
  position: relative;
  padding-left: 1.45em;
  margin-bottom: 0.45em;
}
.page-main--terms .terms-doc-main.xlc-blog-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--purple, #4500a7);
}

.page-main--terms .terms-doc-main.xlc-blog-content ol {
  list-style: decimal;
  padding-left: 1.5em;
  margin: 0 0 1.25em;
}
.page-main--terms .terms-doc-main.xlc-blog-content ol li {
  margin-bottom: 0.85em;
}

.page-main--terms .terms-doc-main.xlc-blog-content a {
  color: var(--purple, #4500a7);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page-main--terms .terms-doc-main.xlc-blog-content a:hover {
  color: var(--red, #d4380d);
}

.page-main--terms .terms-doc-main.xlc-blog-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.25em 0;
}

.page-main--terms .terms-doc-main.xlc-blog-content blockquote {
  margin: 1.25em 0;
  padding-left: 1em;
  border-left: 3px solid #e9e9e9;
}
.page-main--terms .terms-doc-main.xlc-blog-content blockquote p {
  margin: 0;
}

.page-main--terms .terms-doc-main.xlc-blog-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin: 1.25em 0;
}

/* blog-detail JS：包住 table，窄屏先可以 overflow-x 捲動（原生 table 唔可靠） */
.page-main--terms .terms-doc-main.xlc-blog-content .xlc-table-scroll {
  margin: 1.25em 0;
}
.page-main--terms .terms-doc-main.xlc-blog-content .xlc-table-scroll table {
  margin: 0;
}

.page-main--terms .terms-doc-main.xlc-blog-content th,
.page-main--terms .terms-doc-main.xlc-blog-content td {
  border: 1px solid #e9e9e9;
  padding: 10px 12px;
  text-align: left;
}

@media (max-width: 680px) {
  .page-main--terms .terms-doc-main.xlc-blog-content .xlc-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    max-width: 100%;
    min-width: 0;
  }

  .page-main--terms .terms-doc-main.xlc-blog-content .xlc-table-scroll table {
    width: max-content;
    min-width: 100%;
    max-width: none;
  }
}

.page-main--terms .terms-doc-main.xlc-blog-content h2[id], .page-main--terms .terms-doc-main.xlc-blog-content h3[id] {
  scroll-margin-top: calc(var(--bms-navbar-h, 72px) + 24px);
  padding-top: 40px;
  border-top: 1px dashed #fbd2c8;
  margin-top: 45px;
}
@media (max-width: 992px) {
  .page-main--terms .terms-doc-main.xlc-blog-content h2[id],
  .page-main--terms .terms-doc-main.xlc-blog-content h3[id] {
    scroll-margin-top: calc(var(--bms-navbar-h, 72px) + 64px);
  }
}



/* Contact grid final override (avoid accidental flex override) */
#contact-grid {
  background: var(--white);
}

#contact-grid .about-card__desc{
  margin-bottom: 15px;;
}

.contact-support-bg {
 
  background: url(images/contact-custom.jpg) center / cover no-repeat;
 
}

.contact-page .contact-grid__cards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr !important;
  gap: 50px !important;
  padding-top: 30px;
  padding-bottom: 60px;
}

@media (max-width: 991px) {
  .contact-page .contact-grid__cards {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    padding-bottom: 0;
}
}

@media (max-width: 680px) {
#contact-grid {
  background: var(--white);
  padding-top: 0;
  border-top: 0;
  padding-bottom:20px
}

.contact-page .contact-grid__cards {
  
  padding-top: 0;
}

.contact-page .container {
        max-width: 1200px;
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
    }

    .contact-page .about-card {
      display: flex;
      flex-direction: column;
      height: 100%;
      border-radius: 0;
      border: 0px solid #e7e7e7;
      box-shadow: none;
      padding: 30px 24px;
      border-top: 1px solid #e7e7e7;
      padding-bottom: 0;
  }

  .contact-page .tailored-config {
    padding-top: 50px;
    margin-top: 0;
    background: #f9f9f9;
}

.contact-page .tailored-config__cta {
 
  gap: 15px;

}

}

/* Contact Us Form: sticky left column while scrolling */
.contact-us-form-page .integration-section--light .integration__left {
  position: sticky;
  top: calc(var(--bms-navbar-h, 72px) + 20px);
  align-self: start;
}

.contact-us-form-page .integration-section--light {
  overflow: visible !important;
}

.contact-us-form-page .integration-section--light.reveal-on-scroll,
.contact-us-form-page .integration-section--light.reveal-on-scroll.reveal-on-scroll--in-view {
  transform: none !important;
}

@media (max-width: 991px) {
  .contact-us-form-page .integration-section--light .integration__left {
    position: static;
    top: auto;
  }
}

/* Contact Us Form hero: allow wrapping on small screens */
.contact-us-form-page .bms-hero__title .bms-hero__title-line-wrap--single {
  white-space: normal;
  display: inline;
  max-width: 100%;
}

@media (max-width: 680px) {
  .contact-us-form-page .bms-hero__title {
    font-size: clamp(28px, 8vw, 40px);
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* Hero titles on small screens: allow wrapping across key pages */
@media (max-width: 680px) {
  .bms-page--free-trial .bms-hero__title,
  .newsroom-page .bms-hero__title,
  .contact-page .bms-hero__title,
  .contact-us-form-page .bms-hero__title {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .bms-page--free-trial .bms-hero__title .bms-hero__title-line-wrap--single,
  .newsroom-page .bms-hero__title .bms-hero__title-line-wrap--single,
  .contact-page .bms-hero__title .bms-hero__title-line-wrap--single,
  .contact-us-form-page .bms-hero__title .bms-hero__title-line-wrap--single {
    white-space: normal !important;
    width: auto;
    max-width: 100%;
  }

  .newsroom-page .bms-hero__title--newsroom-nowrap .bms-hero__title-fallback {
    white-space: normal !important;
  }

  .newsroom-page .bms-hero__title-line-wrap--newsroom-single .bms-hero__title-reserve,
  .newsroom-page .bms-hero__title-line-wrap--newsroom-single .bms-hero__title-type--nr-inline {
    white-space: normal !important;
  }
}

/* =============================================================================
   DDoS Protection page (ddos-protection.html)
   ============================================================================= */
/* ── DDoS Page: Intro ───────────────────────────────── */
.ddos-intro {
  padding: 0 0 64px;
  text-align: center;
  padding-bottom: 25px;
}
.bms-page--ddos .ddos-intro {
  padding-bottom: 16px;
}
.bms-page--ddos .ddos-intro__badge {
  margin-bottom: 0;
}
.ddos-intro__badge {
  display: inline-block;
  /* font-family: var(--font-h); */
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 18px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-body);
  margin-bottom: 20px;
}
.ddos-intro__desc {
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--font-b);
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-body);
}

/* ── DDoS Page: 3D 球體防護 + 控制台 (Three.js) ───── */
.ddos-sphere-section {
  background: var(--navy);
  margin: 0 3%;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: 0;
  margin-top: 12px;
}
.ddos-sphere-section__visual {
  position: relative;
  width: 100%;
  min-height: 429px;
  height: 80vh;
  max-height: 640px;
  overflow: hidden;
  background-color: var(--navy);
}
/* CN2 同款底：向外擴散 ripple；DDoS 專用動畫（線條較細、較淡，裁切於 visual 內） */
.ddos-sphere-section__canvas-cluster {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ddos-sphere-section__ripple-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(70vmin, 400px);
  height: min(70vmin, 400px);
  transform: translate(-50%, -50%);
  z-index: 0;
}
/*.ddos-sphere-section__ripple-wrap .cn2-ripple {
  border-width: 1px;
  border-color: rgb(0 255 55 / 71%);
  box-shadow: 0 0 0 1px rgba(0, 255, 55, 0.08);
  animation-name: ddosSphereRippleEmanate;
  animation-duration: 5.8s;
  animation-timing-function: cubic-bezier(0.26, 0.82, 0.12, 1);
}*/

.ddos-sphere-section__ripple-wrap .cn2-ripple {
  border-width: 1px;
  border-color: rgb(129 255 0 / 90%);
  box-shadow: 0 0 0 1px rgb(248 255 0 / 31%);
  animation-name: ddosSphereRippleEmanate;
  animation-duration: 5.8s;
  animation-timing-function: cubic-bezier(0.26, 0.82, 0.12, 1);
}

.ddos-sphere-section__ripple-wrap .cn2-ripple--1 {
  animation-delay: 0s;
}
.ddos-sphere-section__ripple-wrap .cn2-ripple--2 {
  animation-delay: 1.93s;
}
.ddos-sphere-section__ripple-wrap .cn2-ripple--3 {
  animation-delay: 3.87s;
}
@keyframes ddosSphereRippleEmanate {
  0% {
    transform: translate(-50%, -50%) scale(0.78);
    opacity: 0;
  }
  9% {
    opacity: 0.42;
  }
  24% {
    opacity: 0.34;
  }
  48% {
    opacity: 0.22;
  }
  72% {
    opacity: 0.1;
  }
  100% {
    transform: translate(-50%, -50%) scale(5.65);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ddos-sphere-section__ripple-wrap .cn2-ripple {
    animation: none !important;
    opacity: 0 !important;
  }
}
.ddos-sphere-section__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ddos-sphere-section__canvas--static {
  background: radial-gradient(ellipse 70% 55% at 50% 50%, rgba(0, 210, 255, 0.15) 0%, transparent 60%),
    #030308;
}
.ddos-sphere-section__canvas canvas {
  display: block;
}
.ddos-sphere-section__intro-wrap {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 40px);
  pointer-events: auto;
  padding-top: 20px;
}
.ddos-sphere-section__intro-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.2vw, 24px);
  width: 100%;
  max-width: min(100rem, 92vw);
}
.ddos-sphere-section .ddos-intro__badge {
  margin-bottom: 0;
  border-color: rgb(37 253 81);
  color: rgb(255 255 255);
  background: rgb(0 0 0 / 49%);
  text-align: center;
}
.ddos-sphere-section__intro-flashwrap {
  position: relative;
  width: 100%;
  max-width: 100%;
}
.ddos-sphere-section__intro-spot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
  /* mask 由 ddos-protection.js 以像素座標寫入，避免 var()/clamp 在 mask 內失效 */
  will-change: mask-image;
}
.ddos-sphere-section__intro-desc--spot .ddos-sphere-section__intro-highlight {
  color: #ffffff !important;
}
@media (prefers-reduced-motion: reduce) {
  .ddos-sphere-section__intro-spot {
    -webkit-mask-image: none;
    mask-image: none;
    opacity: 0;
  }
}
.ddos-sphere-section__intro-desc {
  margin: 0;
  max-width: min(100rem, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1em;
  text-align: center;
  font-family: var(--font-h);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.8vw + 0.85rem, 2.5rem);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.ddos-sphere-section__intro-line {
  display: block;
  max-width: 100%;
}
.ddos-sphere-section__intro-highlight {
  display: inline;
  background: rgb(0 21 36 / 68%);
  padding: 0.2em 0.55em;
  border-radius: 12px;
  color: #8a8a8a;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: color 0.12s linear;
}
.ddos-sphere-section__intro-highlight .ddos-sphere-section__intro-cyber {
  color: var(--green) !important;
  font-weight: 700;
  /*text-shadow:
    0 0 12px rgba(0, 255, 190, 0.45),
    0 0 28px rgba(0, 255, 200, 0.22);*/
    color: #bafd49 !important;
}
.ddos-sphere-section__intro-desc--spot .ddos-sphere-section__intro-highlight .ddos-sphere-section__intro-cyber {
  color: #8fffe0 !important;
  text-shadow:
    0 0 14px rgba(0, 255, 210, 0.65),
    0 0 32px rgba(0, 255, 200, 0.35);
}
@supports not (text-wrap: balance) {
  .ddos-sphere-section__intro-desc {
    max-width: min(42rem, 92vw);
  }
}
.ddos-sphere-section__panel {
  display: none;
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  width: min(300px, calc(100% - 40px));
  padding: 20px;
  border-radius: 12px;
  color: #fff;
  font-family: var(--font-b), 'Segoe UI', system-ui, sans-serif;
  background: rgba(10, 15, 30, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.ddos-sphere-section__panel-title {
  margin: 0 0 20px;
  padding-bottom: 10px;
  font-family: var(--font-h);
  font-size: 18px;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.ddos-sphere-section__control {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
}
.ddos-sphere-section__control label {
  font-size: 13px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.ddos-sphere-section__control input[type='range'] {
  width: 100%;
  accent-color: #00d2ff;
}
.ddos-sphere-section__colors {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.ddos-sphere-section__colors > div {
  display: flex;
  align-items: center;
  font-size: 13px;
  gap: 10px;
}
.ddos-sphere-section__colors input[type='color'] {
  background: none;
  border: none;
  width: 30px;
  height: 30px;
  padding: 0;
  cursor: pointer;
}
@media (max-width: 640px) {
  .ddos-sphere-section {
    margin: 0 !important;
    border-radius: 0 !important;
  }
  .ddos-sphere-section__visual,
  .ddos-sphere-section__canvas-cluster,
  .ddos-sphere-section__canvas,
  .ddos-sphere-section__intro-wrap {
    margin: 0 !important;
    border-radius: 0 !important;
  }
  .ddos-sphere-section__panel {
    top: auto;
    bottom: 16px;
    right: 12px;
    left: 12px;
    width: auto;
    max-height: 45vh;
    overflow-y: auto;
  }
}

/* ── DDoS Page: Volumetric Sticky-Scroll Section ───── */
.ddos-vol {
  position: relative;
  background: var(--bg-soft);
  padding: 80px 0 100px;
}
.ddos-vol__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

/* Sticky left panel */
.ddos-vol__sticky {
  position: sticky;
  top: 120px;
  align-self: start;
}
.ddos-vol__visual {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-lt);
  margin-bottom: 32px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  background-color: var(--bg-soft);
  background-image: url('images/ddos/ddos-protect.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Shield / dome: pulsing cyan glow + light sweep — “active protection” (stronger) */
.ddos-vol__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    ellipse 78% 74% at 50% 44%,
    rgba(0, 240, 255, 0.52) 0%,
    rgba(60, 200, 255, 0.28) 32%,
    rgba(120, 160, 255, 0.1) 52%,
    transparent 72%
  );
  mix-blend-mode: screen;
  filter: saturate(1.15);
  animation: ddos-vol-shield-pulse 2s ease-in-out infinite;
}

.ddos-vol__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    118deg,
    transparent 0%,
    transparent 36%,
    rgba(255, 255, 255, 0.08) 44%,
    rgba(255, 255, 255, 0.55) 49.2%,
    rgba(200, 255, 255, 0.65) 50%,
    rgba(255, 255, 255, 0.5) 50.8%,
    rgba(255, 255, 255, 0.12) 56%,
    transparent 64%,
    transparent 100%
  );
  background-size: 180% 100%;
  background-position: 120% 0;
  mix-blend-mode: overlay;
  opacity: 0.92;
  animation: ddos-vol-shield-shimmer 3s linear infinite;
}

@keyframes ddos-vol-shield-pulse {
  0%,
  100% {
    opacity: 0.78;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.09);
  }
}

@keyframes ddos-vol-shield-shimmer {
  0% {
    background-position: 200% 0;
    opacity: 0.12;
  }
  12% {
    opacity: 0.45;
  }
  48% {
    opacity: 1;
  }
  52% {
    opacity: 1;
  }
  88% {
    opacity: 0.4;
  }
  100% {
    background-position: -200% 0;
    opacity: 0.12;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ddos-vol__visual::before,
  .ddos-vol__visual::after {
    animation: none !important;
    transform: none;
    filter: none;
  }
  .ddos-vol__visual::before {
    opacity: 0.88;
  }
  .ddos-vol__visual::after {
    opacity: 0.45;
    background-position: 45% 0;
  }
}

.ddos-vol__kicker {
  font-family: var(--font-h);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 12px;
}
.ddos-vol__title {
  font-family: var(--font-h);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  color: var(--black);
  line-height: 1.2;
  margin-bottom: 16px;
}
.ddos-vol__desc {
  font-family: var(--font-b);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-body);
}

/* Scrollable right steps */
.ddos-vol__steps {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px 0 40px;
  padding-top: 0;
}

/* Individual step card */
.ddos-step {
  background: var(--white);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius-md);
  padding: 28px 32px;
  position: relative;
  border-left: 3px solid transparent;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, opacity 0.6s ease, transform 0.6s ease;
  opacity: 0;
  transform: translateY(30px);
  border-left-color: #bafd49;
}
.ddos-step.is-in {
  opacity: 1;
  transform: translateY(0);
}
.ddos-step.is-active {
  border-left-color: var(--purple);
  box-shadow: 0 4px 20px rgba(69, 0, 167, 0.08);
}
.ddos-step__num {
  font-family: var(--font-h);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 12px;
  display: none;
}
.ddos-step.is-active .ddos-step__num {
  color: var(--purple);
}
.ddos-step__head {
  display: flex;
  align-items: center;
  gap: 12px;
  
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 700;
  color: var(--black);
  margin: 0 0 8px;
}
/* Shield shape matches navbar DDoS Protection icon (same path as components/header.html).
   Mask only on ::before (fill) — NOT on the parent. If the parent is masked, ::after’s
   expanding ring is clipped and the edge-wave animation is invisible. */
.ddos-step__icon {
  --ddos-shield-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
  --ddos-step-icon-fill: #b8ff26;
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 0;
  background: transparent;
  color: #000000;
  font-size: 15px;
  flex-shrink: 0;
  overflow: visible;
}

.ddos-step__icon::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--ddos-step-icon-fill);
  -webkit-mask-image: var(--ddos-shield-mask);
  mask-image: var(--ddos-shield-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Border-like ring expands from shield edge, fade in → fade out (protection ripple) */
.ddos-step__icon::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-sizing: border-box;
  border: 2px solid rgba(184, 255, 38, 0.95);
  background: transparent;
  -webkit-mask-image: var(--ddos-shield-mask);
  mask-image: var(--ddos-shield-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transform-origin: center center;
  animation: ddos-shield-edge-wave 2.4s ease-out infinite;
}

.ddos-step__icon > i {
  position: relative;
  z-index: 2;
}

@keyframes ddos-shield-edge-wave {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  100% {
    transform: scale(1.42);
    opacity: 0;
  }
}

.ddos-step.is-active .ddos-step__icon::after {
  animation-duration: 1.85s;
}

.ddos-step__desc {
  font-family: var(--font-b);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
}

/* Sticky reveal animation */
.ddos-vol__sticky {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.ddos-vol__sticky.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ── DDoS Page: Fortify — horizontal stepper (Fig.2 / Fig.3) ── */
:root {
  --ddos-fortify-accent: #c7f464;
  --ddos-fortify-accent-dark: #9bc73a;
  --ddos-fortify-line-muted: #e8e8ec;
}
.ddos-fortify {
  padding: 80px 0 100px;
  background: var(--white);
  padding-top: 0;
}
.ddos-fortify__header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 56px;
}
.ddos-fortify__title {

  margin-bottom: 16px;
}
.ddos-fortify__subtitle {
  font-family: var(--font-b);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-body);
}

.ddos-fortify-stepper {
  max-width: 1380px;
  margin: 0 auto;
}

/* Top track: nodes + connecting line */
.ddos-fortify-stepper__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 0 8px;
  margin-bottom: 28px;
}
.ddos-fortify-stepper__line-wrap {
  position: absolute;
  left: 12.5%;
  right: 12.5%;
  top: 20px;
  height: 2px;
  pointer-events: none;
}
.ddos-fortify-stepper__line-bg {
  position: absolute;
  inset: 0;
  background: var(--ddos-fortify-line-muted);
  border-radius: 2px;
}
.ddos-fortify-stepper__line-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: linear-gradient(90deg, var(--ddos-fortify-accent-dark), var(--ddos-fortify-accent));
  border-radius: 2px;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.ddos-fortify-stepper__node-cell {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.ddos-fortify-stepper__node {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-h);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #9a9aa8;
  background: var(--white);
  border: 2px solid #cbd5e1;
  transition: background 0.45s ease, border-color 0.45s ease, color 0.45s ease,
    box-shadow 0.45s ease, transform 0.45s ease;
}
.ddos-fortify-stepper__node.is-done {
  background: #bafd49;
  border-color: #bafd49;
  color: #1a1a22;
  box-shadow: 0 2px 12px rgba(199, 244, 100, 0.45);
}
.ddos-fortify-stepper__node.is-active {
  background: #bafd49;
  border-color: #6aff00;
  color: #1a1a22;
  transform: scale(1.15);
  box-shadow: 0 2px 20px rgba(199, 244, 100, 0.8);
}
.ddos-fortify-stepper__node.is-pending {
  background: var(--white);
}

/* Four columns: equal-height boxes (grid stretch + flex panel flex:1) */
.ddos-fortify-stepper__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
}
.ddos-fortify-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
}
/* Mobile-only: step number column (hidden on desktop; see ≥992px) */
.ddos-fortify-col__rail {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}
.ddos-fortify-col__title {
  font-size: clamp(14px, 1.35vw, 18px);
  font-weight: 700;
  line-height: 1.35;
  color: #b8b8c4;
  margin: 0;
  transition: color 0.45s ease;
}
.ddos-fortify-col.is-active .ddos-fortify-col__title {
  color: var(--black);
}
.ddos-fortify-col.is-done:not(.is-active) .ddos-fortify-col__title {
  color: #5c5c68;
}

.ddos-fortify-col__panel {
  flex: 1;
  min-height: 0;
  background: var(--white);
  border: 1px solid var(--border-lt);
  border-radius: 5px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  opacity: 0.55;
  filter: grayscale(0.35);
  transform: translateY(4px) scale(0.98);
  transition: opacity 0.5s ease, filter 0.5s ease, transform 0.5s ease,
    box-shadow 0.5s ease, border-color 0.5s ease;
}
.ddos-fortify-col.is-active .ddos-fortify-col__panel {
  opacity: 1;
  filter: none;
  transform: translateY(0) scale(1);
  border-color: rgba(199, 244, 100, 0.65);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(199, 244, 100, 0.25);
}

.ddos-fortify__cta {
  text-align: center;
  margin-top: 48px;
  gap: 20px;
  display: flex;
  justify-content: center;
}


@media (max-width: 991px) {
  /* Horizontal 01–04 track + line: hide; numbers show beside each box */
  .ddos-fortify-stepper__track {
    display: none;
  }

  .ddos-fortify-stepper__cols {
    position: relative;
    grid-template-columns: 1fr;
    gap: 24px;
    padding-left: 0;
  }
  /* Vertical spine aligned with the rail column */
  .ddos-fortify-stepper__cols::before {
    content: '';
    position: absolute;
    left: 21px;
    top: 22px;
    bottom: 22px;
    width: 2px;
    background: var(--ddos-fortify-line-muted);
    border-radius: 1px;
    pointer-events: none;
    z-index: 0;
  }

  .ddos-fortify-col {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    min-height: 0;
  }

  .ddos-fortify-col__rail {
    display: flex;
    align-self: center;
    position: relative;
    z-index: 1;
  }

  .ddos-fortify-col__rail .ddos-fortify-stepper__node {
    width: 36px;
    height: 36px;
    font-size: 11px;
  }

  .ddos-fortify-col__panel {
    text-align: left;
    align-items: flex-start;
  }
}

@media (min-width: 992px) {
  .ddos-fortify-col__rail {
    display: none !important;
  }
}

.ddos-fortify-stepper--reduced .ddos-fortify-col__title {
  color: var(--black);
}
.ddos-fortify-stepper--reduced .ddos-fortify-col__panel {
  opacity: 1;
  filter: none;
  transform: none;
  border-color: var(--border-lt);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.ddos-fortify-stepper--reduced .ddos-fortify-stepper__line-fill {
  transform: scaleX(1) !important;
}
.ddos-fortify-stepper--reduced .ddos-fortify-stepper__node {
  transform: none;
  background: var(--ddos-fortify-accent);
  border-color: var(--ddos-fortify-accent-dark);
  color: #1a1a22;
}

@media (prefers-reduced-motion: reduce) {
  .ddos-fortify-stepper__line-fill {
    transition: none;
  }
  .ddos-fortify-stepper__node,
  .ddos-fortify-col__title,
  .ddos-fortify-col__panel {
    transition: none;
  }
  .ddos-step__icon::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 991px) {
  .ddos-vol__inner {
    grid-template-columns: 1fr;
  }
  .ddos-vol__sticky {
    position: static;
  }
  .ddos-vol__visual {
    aspect-ratio: 16 / 9;
  }
  .ddos-vol__steps {
    padding: 0;
  }
}
@media (max-width: 680px) {
  .ddos-vol {
    padding: 48px 0 64px;
  }
  .ddos-intro {
    padding: 0 0 40px;
  }
  .ddos-step {
    padding: 20px 20px;
  }
  .ddos-fortify {
    padding: 48px 0 64px;
    padding-top: 0;
}
  .ddos-fortify__cta {
    display: grid;
    gap: 10px;
    justify-items: stretch;
    grid-template-columns: 1fr;
}

}

/* no-JS fallback (with JS, script adds .js-enabled to body before paint) */
.ddos-step { opacity: 0; transform: translateY(30px); }
.ddos-vol__sticky { opacity: 0; transform: translateY(24px); }

/* DDoS page: no-JavaScript overrides (same as former ddos-protection.html <noscript>) */
body:not(.js-enabled) .ddos-step,
body:not(.js-enabled) .ddos-vol__sticky {
  opacity: 1 !important;
  transform: none !important;
}
body:not(.js-enabled) .ddos-fortify-stepper .ddos-fortify-col__title {
  color: var(--black) !important;
}
body:not(.js-enabled) .ddos-fortify-stepper .ddos-fortify-col__panel {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}
body:not(.js-enabled) .ddos-fortify-stepper .ddos-fortify-stepper__line-fill {
  transform: scaleX(1) !important;
}
body:not(.js-enabled) .ddos-fortify-stepper .ddos-fortify-stepper__node {
  background: #c7f464 !important;
  border-color: #9bc73a !important;
  color: #1a1a22 !important;
}

/* ── DDoS page (#ddos-volumetric): same HTML + global .backbone-* CSS as index backbone-section.
   Extra class .ddos-vbm-section is for page-only overrides — add rules under .ddos-vbm-section.backbone-section { ... } */
   .ddos-vbm-section .backbone__feature-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 9%;
}

.ddos-vbm-section .c-center-title{
  text-align: center;
  margin-bottom: 3%;
}

.ddos-vbm-section .backbone__row {
  grid-template-columns: 1fr;
  justify-items: center;
}

.ddos-vbm-section .backbone__row-right {
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

/* Globe 限制喺 .container 內，避免 canvas / pin 標籤溢出 */
.ddos-vbm-section .ddos-fortify__header {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.ddos-vbm-section .ddos-fortify__header > .ddos-fortify__title,
.ddos-vbm-section .ddos-fortify__header > .ddos-fortify__subtitle {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

/* 三欄：左／右 SVG + 中間地球 */
.ddos-vbm-section .ddos-vbm__globe-row {
  margin-top: 22px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(100%, 480px)) minmax(0, 1fr);
  align-items: center;
  gap: clamp(12px, 3vw, 28px);
  box-sizing: border-box;
}

.ddos-vbm-section .ddos-vbm__col--side {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.ddos-vbm__col--left{
  margin-left: 30px;
}
.ddos-vbm__col--right {
  margin-right: 0px;
  margin-left: -25px;
}

.ddos-vbm-section .ddos-vbm__side-img {
  width: 100%;
  max-width: min(100%, 400px);
  height: auto;
  display: block;
  object-fit: contain;
  font-family: var(--font-h);
}

.ddos-vbm-section .ddos-vbm__side-img svg{
 
  font-family: var(--font-h);
}

.ddos-vbm-section .ddos-vbm__side-img--mobile {
  display: none;
}

.ddos-vbm-section .ddos-vbm__image-wrap {
  margin-top: 0;
  width: 100%;
  max-width: 100%;
  min-width: min(100%, 200px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  box-sizing: border-box;
}

.ddos-vbm-section .ddos-vbm__internet-label {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  letter-spacing: 0;
  /* text-transform: uppercase; */
  color: #ffffff;
  text-align: center;
  line-height: 1;
  border: 1px solid #c3c3c3;
  padding: 7px 31px;
  border-radius: 100px;
  margin-top: -50px;
  background: black;
}

.ddos-vbm__globe {
  width: 100%;
  max-width: min(100%, 576px);
  min-width: 200px;
  min-height: 200px;
  aspect-ratio: 1;
  max-height: min(86.4vw, 576px);
  margin: 0 auto;
  pointer-events: auto;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
}

.ddos-vbm__globe canvas {
  display: block;
  border-radius: 50%;
}

/* Globe HTML pins — 對齊 index secure map .map-pin__tag 風格 */
.ddos-vbm__globe .ddos-globe-pin-host {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  pointer-events: none;
}

.ddos-vbm__globe .ddos-globe-pin-host .ddos-globe-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  user-select: none;
  pointer-events: auto;
  /* 內層先食得到：globe.gl 會喺 host 寫 inline transform，蓋唔到呢度 */
  transform: translateY(-25px);
}

.ddos-vbm__globe .ddos-globe-pin__tag {
  position: relative;
  background: rgba(20, 40, 45, 0.92);
  border: 1px solid rgba(0, 255, 55, 0.35);
  color: var(--green);
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 14.4px;
  line-height: 1.2;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.ddos-vbm__globe .ddos-globe-pin__badge {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: rgba(0, 255, 55, 0.72);
  margin-top: 3px;
  white-space: nowrap;
}

.ddos-vbm__globe .ddos-globe-pin__tag:has(.ddos-globe-pin__badge) {
  white-space: normal;
  text-align: center;
}

.ddos-vbm__globe .ddos-globe-pin__tag::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(20, 40, 45, 0.92);
  pointer-events: none;
}

.ddos-vbm__globe .ddos-globe-pin__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 4px;
  background: rgba(0, 255, 55, 0.85);
  box-shadow: 0 0 0 2px rgba(0, 255, 55, 0.25);
  flex-shrink: 0;
}

.ddos-vbm__globe .ddos-globe-pin:hover .ddos-globe-pin__tag {
  transform: scale(1.06);
  border-color: rgba(0, 255, 55, 0.55);
}

/* Hide connector lines from single-column style in this 2-column layout */
.ddos-vbm-section .backbone__feature-item:not(:last-child)::after {
  display: none;
}

/* Lock bullet marker style in DDoS section (prevent red check-style overrides) */
.ddos-vbm-section .backbone__dot,
.ddos-vbm-section .backbone__dot--purple {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  /*background: var(--red);
  border: 1px solid var(--red);*/
  background: #00d32e;
  border: 1px solid #1dd142;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ddos-vbm-section .backbone__dot::before,
.ddos-vbm-section .backbone__dot--purple::before {
  content: '\f00c';
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 0 0.4px #ffffff;
}
.ddos-vbm-section .backbone__dot::after,
.ddos-vbm-section .backbone__dot--purple::after {
  content: none;
}

@media (max-width: 992px) {
  /* 窄螢幕：順序由上而下 — 左圖 → 地球 + Internet → 右圖；側邊改用 mobile SVG */
  .ddos-vbm-section .ddos-vbm__globe-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .ddos-vbm-section .ddos-vbm__col--left {
    margin-left: 0;
  }

  .ddos-vbm-section .ddos-vbm__col--right {
    margin-left: 0;
    margin-right: 0;
  }

  .ddos-vbm-section .ddos-vbm__side-img--desktop {
    display: none;
  }

  .ddos-vbm-section .ddos-vbm__side-img--mobile {
    display: block;
    font-family: var(--font-h);
  }

  .ddos-vbm-section .ddos-vbm__side-img {
    max-width: min(100%, 100%);
    font-family: var(--font-h);
  }
}

@media (max-width: 991px) {
  .ddos-vbm-section .backbone__feature-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .ddos-vbm-section .backbone__feature-list {
    grid-template-columns: 1fr;
  }

  .ddos-vbm-section .ddos-vbm__attack-list .backbone__feature-item:nth-child(n + 8) {
    display: none;
  }

  .ddos-vbm-section .ddos-vbm__attack-list.is-expanded .backbone__feature-item:nth-child(n + 8) {
    display: flex;
  }

  .ddos-vbm__show-more-btn {
    margin: 12px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    width: fit-content;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid #4500a7;
    background: #ffffff;
    color: #4500a7;
    font-family: var(--font-h);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .ddos-vbm__show-more-btn:hover,
  .ddos-vbm__show-more-btn:focus-visible {
    background: #4500a7;
    color: #ffffff;
    outline: none;
  }
}

@media (min-width: 681px) {
  .ddos-vbm__show-more-btn {
    display: none;
  }
}

/* =============================================================================
   Network page (network.html) — Strategic Routing block (facility → network-routing)
   ============================================================================= */
   .network-routing-section {
    padding: 0 0 60px;
    padding-bottom: 0;
}
.network-routing {
  padding: 80px 0;
  background: #fbfbfb;
}
.network-routing__inner {
  max-width: 1400px;
  margin: 0 auto;
}
.network-routing__grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0 60px;
  align-items: flex-start;
}
@media (min-width: 961px) {
  .network-routing__inner,
  .network-routing__grid,
  .network-routing {
    overflow: visible;
  }
}
.network-routing__media {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: sticky;
  top: 130px;
  
  margin-top: 8px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.14);
  border-radius: var(--radius-lg);
}
.network-routing__media:hover {
  box-shadow: 0 16px 40px rgba(217, 0, 0, 0.2);
}
.network-routing__image-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  background: #11111100;
  display: block;
  width: 100%;
}
.network-routing__image {
  display: block;
  width: 100%;
  height: auto;
}
.network-routing__body {
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.network-routing__body-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 24px;
  position: relative;
}
.network-routing__bar {
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 5px;
  height: 62px;
  background: var(--red);
  transform: rotate(20deg);
  border-radius: 9px;
}
/* Single section title: large headline (facility __subtitle weight) */
.network-routing__title {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 38px;
  line-height: 1.35;
  color: var(--black);
  margin: 0 0 16px;
  margin-top: 2px;
}
.network-routing__desc {
  font-family: var(--font-b);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-body);
  margin-bottom: 24px;
}
.network-routing__highlights {
  list-style: disc;
  margin: 0 0 24px;
  padding-left: 1.25em;
  font-family: var(--font-b);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-body);
  display: none;
}
.network-routing__highlights li {
  margin-bottom: 8px;
}
.network-routing__highlights li:last-child {
  margin-bottom: 0;
}

/* Network page: placeholder sections (index-like rhythm: backbone / partners white + soft) */
.network-page-section {
  padding: 80px 0;
}
.network-page-section--placeholder {
  background: var(--white);
}
.network-page-section--placeholder.network-page-section--alt {
  background: var(--bg-soft);
}
.network-page-section__title {
  margin: 0;
  text-align: center;
}

/* Network page: DDoS block (same layout as contact Support Service; copy aligned with xlc.com/network) */
.bms-page--network .network-ddos-spotlight {
  padding: 64px 0 100px;
  background: var(--white);
  max-width: 1340px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .bms-page--network .network-ddos-spotlight {
    padding-top: 60px;
}
}
.bms-page--network .network-ddos-spotlight .tailored-config__right.network-ddos-spotlight__bg {
  background-image: url(images/ddos/ddos-protect.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Network page: Looking Glass — same shell as data-center xlc-connectivity-section, no canvas / no bg pulse / no tree reveal */
.bms-page--network .network-looking-glass-section.xlc-connectivity-section::before {
  animation: none;
  opacity: 0.85;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .bms-page--network .network-looking-glass-section.xlc-connectivity-section::before {
    opacity: 0.85;
  }
}
.bms-page--network .network-looking-glass-section .xlc-connectivity__head,
.bms-page--network .network-looking-glass-section .xlc-connectivity-wrapper > .tree-item {
  opacity: 1;
  transform: none;
  transition: none;
}
.bms-page--network .network-looking-glass-section.xlc-connectivity-section.reveal-on-scroll--in-view .xlc-connectivity-wrapper > .tree-item:nth-child(n) {
  transition-delay: 0s;
}
.bms-page--network .network-looking-glass-section .xlc-connectivity__cta {
  justify-content: center;
  padding-left: 0;
}

/* Network page: Network Products — index-aligned (xlc-nav-btn, tokens, backbone-style section) */
.network-products {
  padding: 80px 0;
  background: var(--white);
}
.network-products__inner {
  max-width: 1280px;
}
.network-products__header {
  text-align: center;
  margin-bottom: clamp(20px, 3vw, 28px);
}
.network-products__title {
  margin: 0 0 clamp(12px, 2vw, 16px);
}
.network-products__lede {
  max-width: 640px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-body);
}
/* Tabs: grouped bar under title (F-pattern: title → hint → control → table) */
.network-products__tabs-bar {
  background: var(--bg-soft);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: clamp(28px, 4vw, 40px);
}
.network-products__tabs-wrap.xlc-nav-wrap {
  margin-bottom: 0;
}
.network-products__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.network-products__tabs .xlc-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.network-products__tab-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.network-products__tab-flag {
  flex-shrink: 0;
  width: 29px;
  height: 21px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.network-products__tab-text {
  font-family: inherit;
  font-weight: inherit;
}
.network-products__tabs .xlc-nav-btn:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
}
.network-products__table-wrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-lt);
  background: var(--white);
  box-shadow: var(--shadow-card);
}
.network-products__panel[hidden] {
  display: none !important;
}
/* Los Angeles & Hong Kong: carrier logos × tier matrix */
.network-products__panel--la-matrix .network-products__table--la-matrix {
  min-width: 720px;
  table-layout: fixed;
}
.network-products__panel--hk-matrix .network-products__table--hk-matrix {
  min-width: 640px;
  table-layout: fixed;
}
.network-products__panel--tokyo-matrix .network-products__table--tokyo-matrix {
  min-width: 640px;
  table-layout: fixed;
}
.bms-page--operating-system .os-page-section {
  padding: 80px 0;
}
.bms-page--operating-system .os-power-spotlight {
  padding: 64px 0 100px;
  background: #fbfbfb;
}
.bms-page--operating-system .os-power-spotlight .tailored-config__right.os-power-spotlight__bg {
  background-image: url(images/OS-bg.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.bms-page--operating-system .os-power-heading-break {
  display: block;
}
.bms-page--operating-system .os-choose-heading-break {
  display: block;
}
.bms-page--operating-system .os-choose-section .os-choose-section__lede {
  margin: 16px auto 0;
  max-width: 900px;
  color: var(--text-body);
}
.bms-page--operating-system .os-choose-section {
  padding-top: 80px;
}
.bms-page--operating-system .os-choose-section .backbone__row-right--os-linux-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 28px;
  align-items: start;
}
.bms-page--operating-system .os-choose-section ul.backbone__feature-list.os-linux-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 992px) {
  .bms-page--operating-system .os-choose-section .backbone__row-right--os-linux-split {
    grid-template-columns: 1fr;
  }
  .bms-page--operating-system .os-choose-section.backbone-section {
    padding: 56px 0;
  }
  .bms-page--operating-system .os-choose-section .backbone__header {
    margin-bottom: 28px;
  }
  .bms-page--operating-system .os-choose-section .backbone__row {
    padding: 28px 20px;
    gap: 22px;
  }
  .bms-page--operating-system .os-custom-isos-section.xlc-connectivity-section {
    padding: 56px 0;
  }
}
.bms-page--operating-system .os-custom-isos-section.xlc-connectivity-section::before {
  animation: none;
  opacity: 0.85;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .bms-page--operating-system .os-custom-isos-section.xlc-connectivity-section::before {
    opacity: 0.85;
  }
}
.bms-page--operating-system .os-custom-isos-section .xlc-connectivity__head,
.bms-page--operating-system .os-custom-isos-section .xlc-connectivity-wrapper > .tree-item {
  opacity: 1;
  transform: none;
  transition: none;
}
.bms-page--operating-system .os-custom-isos-section.xlc-connectivity-section.reveal-on-scroll--in-view .xlc-connectivity-wrapper > .tree-item:nth-child(n) {
  transition-delay: 0s;
}
.bms-page--operating-system .os-custom-isos-section .xlc-connectivity__cta {
  justify-content: center;
  padding-left: 0;
}
.bms-page--operating-system .os-page-section:nth-of-type(even) {
  background: var(--bg-soft);
}
.bms-page--operating-system .os-page-section__inner {
  max-width: 1200px;
}
.bms-page--operating-system .os-page-section__header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 36px;
}
.bms-page--operating-system .os-page-section__title {
  margin: 0 0 14px;
}
.bms-page--operating-system .os-page-section__intro {
  margin: 0;
  color: var(--text-body);
}
.bms-page--operating-system .os-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.bms-page--operating-system .os-benefit-card,
.bms-page--operating-system .os-family-card,
.bms-page--operating-system .os-license-card {
  background: var(--white);
  border: 1px solid var(--border-lt);
  border-radius: 14px;
  padding: 24px;
  box-shadow: var(--shadow-card);
}
.bms-page--operating-system .os-benefit-card__title,
.bms-page--operating-system .os-family-card__title,
.bms-page--operating-system .os-license-card__title {
  margin: 0 0 12px;
}
.bms-page--operating-system .os-benefit-card__desc,
.bms-page--operating-system .os-family-card__desc {
  margin: 0;
  color: var(--text-body);
}
.bms-page--operating-system .os-family-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.bms-page--operating-system .os-family-card__list-label {
  margin: 16px 0 10px;
  font-weight: 700;
  color: var(--black);
}
.bms-page--operating-system .os-list {
  margin: 0;
  padding-left: 20px;
  color: var(--text-body);
}
.bms-page--operating-system .os-list li + li {
  margin-top: 6px;
}
.bms-page--operating-system .os-license-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.bms-page--operating-system .os-license-card__subtitle {
  margin: 0;
  color: var(--text-body);
  font-weight: 600;
}
.bms-page--operating-system .os-page-section__cta {
  margin-top: 28px;
  display: flex;
  justify-content: center;
}
@media (max-width: 992px) {
  .bms-page--operating-system .os-page-section {
    padding: 64px 0;
  }
  .bms-page--operating-system .os-benefit-grid,
  .bms-page--operating-system .os-license-grid {
    grid-template-columns: 1fr;
  }
  .bms-page--operating-system .os-family-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .bms-page--operating-system .os-power-spotlight {
    padding-top: 0;
    padding-bottom: 0;
  }
  .bms-page--operating-system .ddos-intro {
    padding: 22px 0 30px;
  }
  .bms-page--operating-system .os-choose-section.backbone-section {
    padding: 42px 0;
  }
  .bms-page--operating-system .os-choose-section .backbone__row {
    padding: 22px 14px;
    gap: 16px;
  }
  .bms-page--operating-system .os-custom-isos-section.xlc-connectivity-section {
    padding: 42px 0;
  }
  .bms-page--operating-system .os-page-section {
    padding: 52px 0;
  }
  .bms-page--operating-system .os-page-section__header {
    margin-bottom: 26px;
  }
  .bms-page--operating-system .os-benefit-card,
  .bms-page--operating-system .os-family-card,
  .bms-page--operating-system .os-license-card {
    padding: 18px;
  }
}
.network-products__panel--la-matrix .network-products__th--tier, .network-products__panel--hk-matrix .network-products__th--tier, .network-products__panel--tokyo-matrix .network-products__th--tier {
  text-align: center;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  /* padding: 12px 8px; */
  vertical-align: bottom;
  font-weight: 700;
}
.network-products__panel--la-matrix .network-products__cell--tier,
.network-products__panel--hk-matrix .network-products__cell--tier,
.network-products__panel--tokyo-matrix .network-products__cell--tier {
  text-align: center;
  vertical-align: middle;
  padding: 12px 8px;
}
.network-products__tier-empty {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
}
.network-products__table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-family: var(--font-b);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-body);
}
.network-products__table thead th {
  text-align: left;
  padding: 16px 20px;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--white);
  background: var(--navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  vertical-align: middle;
}
.network-products__th--carrier {
  width: 20%;
  min-width: 160px;
}
.network-products__table tbody tr:nth-child(even) th,
.network-products__table tbody tr:nth-child(even) td {
  background: var(--bg-soft);
}
.network-products__table tbody tr:nth-child(odd) th,
.network-products__table tbody tr:nth-child(odd) td {
  background: var(--white);
}
.network-products__carrier {
  text-align: left;
  padding: 14px 18px;
  font-weight: 600;
  border-right: 1px solid var(--border-lt);
  border-bottom: 1px solid var(--border-lt);
  vertical-align: middle;
}
.network-products__carrier-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 40px;
  width: 100%;
}
/* Uniform logo box: all carriers read at similar visual weight */
.network-products__carrier-logo {
  display: block;
  flex-shrink: 0;
  width: 132px;
  height: 36px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}
.network-products__carrier-name {
  font-family: var(--font-h);
  font-size: 15px;
  color: var(--black);
}
.network-products__table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-lt);
  vertical-align: middle;
}
.network-products__table tbody tr:last-child th,
.network-products__table tbody tr:last-child td {
  border-bottom: none;
}
.network-products__cell--as {
  text-align: left;
}
.network-products__as-line {
  display: block;
  font-size: 14px;
  line-height: 1.45;
}
.network-products__cell--icon {
  text-align: center;
}
.network-products__icon {
  font-size: 18px;
  line-height: 1;
}
.network-products__icon--yes {
  color: var(--purple);
}
.network-products__icon--no {
  color: var(--red);
}
.network-products__visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 900px) {
  .network-products__table thead th.network-products__th--carrier {
    position: sticky;
    left: 0;
    z-index: 3;
    box-shadow: 4px 0 12px -4px rgba(0, 0, 0, 0.12);
  }
  .network-products__carrier--sticky {
    position: sticky;
    left: 0;
    z-index: 2;
    box-shadow: 4px 0 12px -4px rgba(0, 0, 0, 0.08);
  }
  .network-products__table tbody tr:nth-child(odd) .network-products__carrier--sticky {
    background: var(--white);
  }
  .network-products__table tbody tr:nth-child(even) .network-products__carrier--sticky {
    background: var(--bg-soft);
  }
}
@media (max-width: 768px) {
  .bms-page--network {
    overflow-x: clip;
  }
  .network-products {
    padding: 56px 0 72px;
    padding-bottom: 20px;
}
  .network-products__tabs-bar {
    padding: 10px 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .network-products__tabs-bar::-webkit-scrollbar {
    display: none;
  }
  .network-products__tabs-wrap.xlc-nav-wrap {
    display: block;
    padding: 0;
  }
  .network-products__tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    min-width: max-content;
  }
  .network-products__tabs .xlc-nav-btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .network-products__table thead th,
  .network-products__carrier,
  .network-products__table td {
    padding: 10px 12px;
    font-size: 14px;
  }
  .network-products__tab-flag {
    width: 26px;
    height: 19px;
  }
  .network-products__carrier-logo {
    width: 112px;
    height: 32px;
  }
}

/* Network page: CN2 — layout only; color/typography match index .secure-section (navy, badge, title-h2, body-text, feature-text) */
#network-section-cn2.secure-section.network-cn2 {
  padding: 128px 0 120px;
}
.network-cn2__inner {
  max-width: 1200px;
}
.network-cn2__header {
  text-align: center;
  margin: 0 auto clamp(32px, 5vw, 48px);
  max-width: 900px;
}
.network-cn2__header .section-badge {
  margin-bottom: 16px;
}
.network-cn2__header .secure__title {
  margin-bottom: 20px;
}
.network-cn2__intro.secure__desc {
  margin: 0;
  max-width: 100%;
}
.network-cn2__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 380px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.network-cn2__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.network-cn2__col .network-cn2__feature:first-child {
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.network-cn2__col .network-cn2__feature:last-child {
  padding-top: 28px;
}
.network-cn2__col .network-cn2__feature:only-child {
  padding-bottom: 0;
  border-bottom: none;
  padding-top: 0;
}
.network-cn2__feature {
  text-align: left;
}
.secure-section.network-cn2 .network-cn2__feature-title.title-h3 {
  color: var(--white);
  margin: 0 0 10px;
}
.network-cn2__feature-icon {
  display: block;
  font-size: 22px;
  color: var(--green);
  margin-bottom: 12px;
  line-height: 1;
}
.network-cn2__feature-desc.feature-text {
  margin: 0;
}
.network-cn2__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}
.network-cn2__visual-glow {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: min(90%, 320px);
  height: 50%;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(0, 255, 55, 0.28) 0%, transparent 65%);
  filter: blur(22px);
  pointer-events: none;
  z-index: 0;
}
.network-cn2__visual-frame {
  position: relative;
  z-index: 1;
  width: min(100%, 360px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: visible;
  margin: 0 auto;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 24px 48px rgba(0, 0, 0, 0.35);
}
/* Heartbeat + cyber ripples (CN2 visual) */
.network-cn2__visual-wrap {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.network-cn2__visual-img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  animation: cn2Heartbeat 2.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  border: 2px solid var(--green);
}
.cn2-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border: 1.5px solid rgba(0, 255, 55, 0.5);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 255, 55, 0.12);
  transform: translate(-50%, -50%) scale(0.85);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  /* 尾段明顯減速，擴散更「有緩衝」 */
  animation: cn2RippleEmanate 4.5s cubic-bezier(0.33, 0.85, 0.2, 1) infinite;
}
.cn2-ripple--1 {
  animation-delay: 0s;
}
.cn2-ripple--2 {
  animation-delay: 1.5s;
}
.cn2-ripple--3 {
  animation-delay: 3s;
}
@keyframes cn2Heartbeat {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.02); }
  52% { transform: scale(1.045); }
  68% { transform: scale(1.025); }
}
@keyframes cn2RippleEmanate {
  0% {
    transform: translate(-50%, -50%) scale(0.85);
    opacity: 0;
  }
  8% {
    opacity: 0.55;
  }
  22% {
    opacity: 0.42;
  }
  48% {
    opacity: 0.28;
  }
  72% {
    opacity: 0.12;
  }
  100% {
    transform: translate(-50%, -50%) scale(3.55);
    opacity: 0;
  }
}
.network-cn2__footer-line {
  color: var(--text-light);
  text-align: center;
  margin: clamp(36px, 5vw, 56px) auto 0;
  max-width: 720px;
}

@media (max-width: 992px) {
  .network-cn2__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .network-cn2__visual {
    order: -1;
    min-height: 220px;
  }
  .network-cn2__col .network-cn2__feature:first-child {
    padding-bottom: 24px;
  }
  .network-cn2__col .network-cn2__feature:last-child {
    padding-top: 24px;
  }
}

@media (max-width: 960px) {
  #network-section-cn2.secure-section.network-cn2 {
    padding: 100px 25px 92px;
  }
  .secure-section.network-cn2 .secure__title {
    font-size: 36px;
    line-height: 42px;
  }
}

@media (max-width: 640px) {
  #network-section-cn2.secure-section.network-cn2 {
    padding: 84px 30px 76px;
  }
}

@media (max-width: 480px) {
  #network-section-cn2.secure-section.network-cn2 {
    padding: 72px 0 68px;
  }
  .secure-section.network-cn2 .secure__title {
    font-size: 28px;
    line-height: 34px;
  }
  .secure-section.network-cn2 .network-cn2__feature-title.title-h3 {
    font-size: 18px;
    line-height: 24px;
  }
}

.network-routing-accordion {
  margin-top: 8px;
}
.network-routing-accordion.workload__solutions {
  display: flex;
  flex-direction: column;
}
.network-routing-accordion__item {
  display: flex;
  flex-direction: column;
}
.network-routing-accordion__item .workload__solution.network-routing-accordion__trigger {
  border-left: none;
  border-right: none;
  border-top: 1px solid #D4D4D4;
  background: none;
  font: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
  padding: 16px 8px 16px 20px;
  outline: none;
}
.network-routing-accordion__item:last-child .workload__solution.network-routing-accordion__trigger {
  border-bottom: 1px solid #D4D4D4;
}
.network-routing-accordion__item.is-open .network-routing-accordion__trigger {
  background: rgba(69, 0, 167, 0.03);
}
.network-routing-accordion__item.is-open .network-routing-accordion__trigger .solution-dot {
  background: var(--purple);
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(69, 0, 167, 0.25);
}
.network-routing-accordion__item.is-open .network-routing-accordion__trigger .solution-name {
  color: var(--purple);
  font-weight: 600;
}
.network-routing-accordion .solution-btn {
  transition: transform 0.3s ease;
}
.network-routing-accordion__item.is-open .network-routing-accordion__trigger .solution-btn {
  background: var(--purple);
  color: var(--white);
  transform: rotate(90deg);
}
.network-routing-accordion__item.is-open .network-routing-accordion__trigger:hover .solution-btn {
  transform: rotate(90deg) translateX(4px);
}
.network-routing-accordion__item.is-open .network-routing-accordion__trigger .solution-progress {
  background: rgba(69, 0, 167, 0.15);
}
.network-routing-accordion__item.is-open .network-routing-accordion__trigger .solution-progress__fill {
  height: 100%;
}
.network-routing-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.network-routing-accordion__item.is-open .network-routing-accordion__panel {
  grid-template-rows: 1fr;
}
.network-routing-accordion__item:not(.is-open) .network-routing-accordion__panel-inner {
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-width: 0;
}
.network-routing-accordion__panel-inner {
  min-height: 0;
  overflow: hidden;
  padding: 25px 25px 35px 20px;
  border-bottom: 1px solid #D4D4D4;
  box-sizing: border-box;
}
.network-routing-accordion__panel ul {
  list-style-type: none;
  list-style: none;
  margin: 0;
  padding: 0 0 0 12px;
  position: relative;
}
.network-routing-accordion__panel ul::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  bottom: 0.6em;
  width: 2px;
  background: var(--red);
}
.network-routing-accordion__panel li {
  position: relative;
  padding-left: 12px;
  margin-bottom: 19px;
  font-family: var(--font-b);
  font-size: 16px;
  line-height: 21px;
  color: var(--text-body);
}
.network-routing-accordion__panel li:last-child {
  margin-bottom: 0;
}
.network-routing-accordion__panel li::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  width: 10px;
  height: 2px;
  background: var(--red);
  transform: translateY(-50%);
}

@media (max-width: 992px) {
  .network-routing__grid {
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: stretch;
    display: flex;
    flex-direction: column-reverse;
    padding: 20px;
  }
  .network-routing__media {
    position: relative;
    top: auto;
    width: 100%;
    padding: 20px 20px;
    margin-top: 0;
  }
  .network-routing__body {
    padding-top: 0;
  }
  .network-routing__body-inner {
    padding-left: 20px;
  }
  .network-routing {
    padding: 48px 0;
  }
  .network-routing__title {
    font-size: clamp(1.5rem, 4vw, 2rem);
    margin-bottom: 12px;
  }
  .network-routing-accordion__item .workload__solution.network-routing-accordion__trigger {
    padding: 14px 12px 14px 16px;
  }
  .network-routing-accordion__panel-inner {
    padding: 16px 16px 24px 16px;
  }
  .network-routing-accordion__panel li {
    font-size: clamp(14px, 2.5vw, 16px);
    margin-bottom: 12px;
  }
}

@media (max-width: 768px) {
  .network-routing-section {
    overflow-x: hidden;
    padding-left: 0;
    padding-right: 0;
  }
  .network-routing__inner,
  .network-routing__grid,
  .network-routing__body,
  .network-routing__body-inner,
  .network-routing-accordion,
  .network-routing-accordion__panel-inner {
    min-width: 0;
  }
  .network-routing {
    padding: 32px 0;
  }
  .network-routing__inner {
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }
  .network-routing__grid {
    gap: 20px;
    display: flex;
    flex-direction: column-reverse;
    padding: 0px;
  }
  .network-routing__media {
    padding: 16px 12px;
    border-radius: var(--radius-md);
  }
  .network-routing__body-inner {
    padding-left: 16px;
  }
  .network-routing__bar {
    width: 4px;
    height: 22px;
}
  .network-routing__title {
    font-size: clamp(18px, 4.5vw, 22px);
    line-height: 1.3;
  }
  .network-routing__desc {
    font-size: clamp(14px, 3.5vw, 16px);
    line-height: 1.5;
    margin-bottom: 18px;
  }
  .network-routing-accordion {
    margin-top: 4px;
  }
  .network-routing-accordion__item .workload__solution.network-routing-accordion__trigger {
    padding: 14px 10px 14px 12px;
    min-height: 48px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .network-routing-accordion__item .workload__solution.network-routing-accordion__trigger .solution-name {
    font-size: clamp(14px, 2.5vw, 16px);
  }
  .network-routing-accordion__panel-inner {
    padding: 12px 12px 20px 12px;
  }
  .network-routing-accordion__panel ul {
    padding-left: 10px;
  }
  .network-routing-accordion__panel li {
    padding-left: 10px;
    font-size: clamp(13px, 3vw, 15px);
    line-height: 1.45;
    margin-bottom: 10px;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .network-routing-accordion__panel li::before {
    left: -10px;
    width: 8px;
  }
  .network-routing-accordion__panel ul::before {
    top: 0.5em;
    bottom: 0.5em;
  }
}

@media (max-width: 480px) {
  .network-routing {
    padding: 24px 0;
  }
  .network-routing__media {
    padding: 12px 10px;
  }
  .network-routing__body-inner {
    padding-left: 12px;
  }
  .network-routing__bar {
    width: 3px;
  }
  .network-routing-accordion__item .workload__solution.network-routing-accordion__trigger {
    padding: 12px 8px 12px 10px;
  }
  .network-routing-accordion__panel-inner {
    padding: 10px 8px 16px 8px;
  }
  .network-routing-accordion__panel ul {
    padding-left: 8px;
  }
  .network-routing-accordion__panel li {
    padding-left: 8px;
    margin-bottom: 8px;
  }
  .network-routing-accordion__panel li::before {
    left: -8px;
    width: 6px;
  }
}

/* ============================================================
   AMD Dedicated Server Page
   ============================================================ */
.amd-page-intro .ddos-intro__desc {
  max-width: 980px;
}

.amd-section-title {
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.15;
  margin-bottom: 16px;
}

.performance-benchmark,
.epyc-spotlight,
.bm-features-section {
  padding: 64px 0;
}

.amd-epyc-features.ddos-vol {
  background: var(--bg-soft);
  padding-top: 60px;
}

.amd-epyc-features .ddos-vol__visual {
  background-image: url('images/AMD-bg2.jpg');
}

.amd-epyc-features .ddos-vol__kicker {
  color: var(--purple);
}

.amd-epyc-features .ddos-step__icon {
  --ddos-shield-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='white'%3E%3Crect x='9' y='9' width='46' height='46' rx='6'/%3E%3Crect x='16' y='16' width='32' height='32' fill='black'/%3E%3Crect x='22' y='22' width='20' height='20'/%3E%3Crect x='22' y='0' width='6' height='11' rx='3'/%3E%3Crect x='29' y='0' width='6' height='11' rx='3'/%3E%3Crect x='36' y='0' width='6' height='11' rx='3'/%3E%3Crect x='22' y='53' width='6' height='11' rx='3'/%3E%3Crect x='29' y='53' width='6' height='11' rx='3'/%3E%3Crect x='36' y='53' width='6' height='11' rx='3'/%3E%3Crect x='0' y='22' width='11' height='6' rx='3'/%3E%3Crect x='0' y='29' width='11' height='6' rx='3'/%3E%3Crect x='0' y='36' width='11' height='6' rx='3'/%3E%3Crect x='53' y='22' width='11' height='6' rx='3'/%3E%3Crect x='53' y='29' width='11' height='6' rx='3'/%3E%3Crect x='53' y='36' width='11' height='6' rx='3'/%3E%3C/g%3E%3C/svg%3E");
}

.amd-epyc-features .ddos-step__num {
  display: none;
}

.amd-epyc-features .ddos-vol__steps {

  padding-top: 0;
}

.amd-epyc-features .ddos-step__head {
  margin-bottom: 12px;
}

.amd-epyc-features .ddos-step__icon::before,
.amd-epyc-features .ddos-step__icon::after {
  inset: 5px;
}

/* ── Performance Benchmarks (AMD page): mirrors index .secure-section + Map containers; fully scoped ── */
.performance-benchmark {
  background: var(--navy);
  margin: 0 3%;
  overflow-x: clip;
  overflow-y: visible;
  border-radius: var(--radius-xl);
  padding: 100px 20px 100px 20px;
  --perf-bar-single: #c9a552;
}

.performance-benchmark__header-grid {
  display: grid;
  grid-template-columns: 2fr 1.5fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 40px;
}

.performance-benchmark__header-right {
  padding-top: 60px;
}

.performance-benchmark__title {
  margin-bottom: 10px;
}

.performance-benchmark__title-prefix {
  color: var(--white);
}

.performance-benchmark__title-accent {
  color: var(--green);
}

.performance-benchmark__title-visual {
  display: none;
}

.performance-benchmark__title--tw-active .performance-benchmark__title-fallback {
  display: none;
}

.performance-benchmark__title--tw-active .performance-benchmark__title-visual {
  display: block;
}

.performance-benchmark__title-line-wrap {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
}

.performance-benchmark__title-reserve {
  visibility: hidden;
  display: block;
  pointer-events: none;
  user-select: none;
}

.performance-benchmark__title-type {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: block;
}

.performance-benchmark__title .typewriter {
  display: inline;
  color: var(--green);
}

.performance-benchmark__title .typewriter--cursor::after {
  content: '|';
  font-weight: 400;
  color: currentColor;
  animation: perf-benchmark-cursor-blink 0.65s step-end infinite;
  margin-left: 2px;
}

@keyframes perf-benchmark-cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .performance-benchmark__title .typewriter--cursor::after {
    animation: none;
    opacity: 1;
  }
}

.performance-benchmark__subtitle {
  font-family: var(--font-h);
  font-weight: 500;
  font-size: 22px;
  line-height: 28px;
  color: var(--text-light);
  margin: 0;
}

.performance-benchmark__desc {
  color: var(--white);
}

.performance-benchmark__map-grid {
  width: 100%;
}

.performance-benchmark__chart {
  width: 100%;
  padding: 28px 24px 20px;
  border-radius: var(--radius-lg);
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
}

.performance-benchmark__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 28px;
  margin-bottom: 20px;
  font-family: var(--font-b);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
}

.performance-benchmark__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.performance-benchmark__legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
}

.performance-benchmark__legend-item--multi .performance-benchmark__legend-swatch {
  background: var(--red);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.performance-benchmark__legend-item--single .performance-benchmark__legend-swatch {
  background: var(--perf-bar-single);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.performance-benchmark__chart-core {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 12px;
  grid-template-rows: minmax(364px, 1fr) auto;
  min-width: 0;
  min-height: 390px;
  align-items: stretch;
}

.performance-benchmark__y-axis {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  align-self: stretch;
  min-width: 0;
  width: 100%;
  padding-bottom: 8px;
  font-family: var(--font-b);
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
}

.performance-benchmark__plot {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  min-height: 364px;
  padding: 0 8px 8px 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
}

.performance-benchmark__grid-lines {
  position: absolute;
  left: 12px;
  right: 8px;
  top: 0;
  bottom: 47px;
  pointer-events: none;
}

.performance-benchmark__grid-lines span {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.performance-benchmark__grid-lines span:nth-child(1) { bottom: 20%; }
.performance-benchmark__grid-lines span:nth-child(2) { bottom: 40%; }
.performance-benchmark__grid-lines span:nth-child(3) { bottom: 60%; }
.performance-benchmark__grid-lines span:nth-child(4) { bottom: 80%; }

.performance-benchmark__bar-groups {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 343px;
  padding-top: 8px;
}

.performance-benchmark__bar-group {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 0;
}

.performance-benchmark__bar-pair {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  width: 100%;
  flex: 1 1 auto;
  min-height: 156px;
  align-self: stretch;
}

.performance-benchmark__bar-wrap {
  position: relative;
  flex: 1;
  max-width: 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  min-height: 0;
  cursor: default;
  outline: none;
}

.performance-benchmark__bar-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 4px 8px;
  border-radius: 4px;
  font-family: var(--font-b);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--navy);
  background: var(--white);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 3;
}

.performance-benchmark__bar-wrap:hover .performance-benchmark__bar-tip,
.performance-benchmark__bar-wrap:focus-visible .performance-benchmark__bar-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Bars: default 0 height; target % via inline --bar-target-height (same as height: X% of plot) */
.performance-benchmark .chart-bar {
  display: block;
  width: 100%;
  max-width: 24px;
  height: 0;
  min-height: 0;
  border-radius: 3px 3px 2px 2px;
  transition: height 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: height;
}

.performance-benchmark .chart-bar--multi {
  background: linear-gradient(180deg, var(--red-hover) 0%, var(--red) 100%);
  box-shadow: 0 2px 10px rgba(255, 0, 0, 0.25);
}

.performance-benchmark .chart-bar--single {
  background: linear-gradient(180deg, #ddb86a 0%, var(--perf-bar-single) 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.performance-benchmark__chart.is-animated .chart-bar {
  height: var(--bar-target-height);
}

/* Stagger left → right (each group: multi then single) */
.performance-benchmark__chart.is-animated .performance-benchmark__bar-group:nth-child(1) .chart-bar--multi { transition-delay: 0ms; }
.performance-benchmark__chart.is-animated .performance-benchmark__bar-group:nth-child(1) .chart-bar--single { transition-delay: 45ms; }
.performance-benchmark__chart.is-animated .performance-benchmark__bar-group:nth-child(2) .chart-bar--multi { transition-delay: 90ms; }
.performance-benchmark__chart.is-animated .performance-benchmark__bar-group:nth-child(2) .chart-bar--single { transition-delay: 135ms; }
.performance-benchmark__chart.is-animated .performance-benchmark__bar-group:nth-child(3) .chart-bar--multi { transition-delay: 180ms; }
.performance-benchmark__chart.is-animated .performance-benchmark__bar-group:nth-child(3) .chart-bar--single { transition-delay: 225ms; }
.performance-benchmark__chart.is-animated .performance-benchmark__bar-group:nth-child(4) .chart-bar--multi { transition-delay: 270ms; }
.performance-benchmark__chart.is-animated .performance-benchmark__bar-group:nth-child(4) .chart-bar--single { transition-delay: 315ms; }
.performance-benchmark__chart.is-animated .performance-benchmark__bar-group:nth-child(5) .chart-bar--multi { transition-delay: 360ms; }
.performance-benchmark__chart.is-animated .performance-benchmark__bar-group:nth-child(5) .chart-bar--single { transition-delay: 405ms; }
.performance-benchmark__chart.is-animated .performance-benchmark__bar-group:nth-child(6) .chart-bar--multi { transition-delay: 450ms; }
.performance-benchmark__chart.is-animated .performance-benchmark__bar-group:nth-child(6) .chart-bar--single { transition-delay: 495ms; }
.performance-benchmark__chart.is-animated .performance-benchmark__bar-group:nth-child(7) .chart-bar--multi { transition-delay: 540ms; }
.performance-benchmark__chart.is-animated .performance-benchmark__bar-group:nth-child(7) .chart-bar--single { transition-delay: 585ms; }
.performance-benchmark__chart.is-animated .performance-benchmark__bar-group:nth-child(8) .chart-bar--multi { transition-delay: 630ms; }
.performance-benchmark__chart.is-animated .performance-benchmark__bar-group:nth-child(8) .chart-bar--single { transition-delay: 675ms; }

.performance-benchmark__x-label {
  font-family: var(--font-b);
  font-size: 10px;
  line-height: 1.25;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  max-width: 100%;
  word-break: break-word;
}

.performance-benchmark__x-axis-title {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  padding: 10px 8px 0 12px;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .performance-benchmark .chart-bar {
    transition: none !important;
    transition-delay: 0s !important;
    height: var(--bar-target-height) !important;
  }
}

@media (max-width: 1200px) {
  .performance-benchmark {
    margin: 0 40px;
  }
}

@media (max-width: 960px) {
  .performance-benchmark {
    margin: 0 20px;
    padding: 50px 25px;
  }
  .performance-benchmark__header-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .performance-benchmark__header-right {
    padding-top: 0;
  }
  .performance-benchmark__chart-core {
    min-height: 338px;
  }
  .performance-benchmark__plot {
    min-height: 312px;
  }
}

@media (max-width: 640px) {
  .performance-benchmark__chart-core {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    margin-left: -4px;
    margin-right: -4px;
    padding-left: 4px;
    padding-right: 4px;
  }
  .performance-benchmark__bar-groups {
    min-width: min(720px, 140vw);
  }
}

@media (max-width: 480px) {
  .bms-page--amd-dedicated .performance-benchmark {
    margin: 0 !important;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .bms-page--amd-dedicated .performance-benchmark__header-grid.container {
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }
  .bms-page--amd-dedicated .performance-benchmark__map-grid.container {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .performance-benchmark__chart {
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }
}

@media (max-width: 400px) {
  .performance-benchmark {
    margin: 0;
  }
}

/* ── AMD Dedicated: EPYC Spotlight (layout cloned from tailored-config + network-ddos-spotlight; scoped, originals unchanged) ── */
.bms-page--amd-dedicated .epyc-spotlight {
  padding: 100px 0 100px;
  background: var(--white);
}

@media (max-width: 768px) {
  .bms-page--amd-dedicated .epyc-spotlight {
    padding-top: 0;
  }
}

.bms-page--amd-dedicated .epyc-spotlight__container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 80px;
  align-items: center;
}



.bms-page--amd-dedicated .epyc-spotlight__heading {
  margin: 0;
  color: var(--black);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: break-word;
  word-wrap: break-word;
  /* Responsive 時隨容器寬度自動換行；clamp 避免手機標題過細 */
  font-size: clamp(18px, 4vw + 0.6rem, 48px);
}

.bms-page--amd-dedicated .epyc-spotlight__heading .epyc-spotlight__heading--purple {
  color: var(--purple);
  font-weight: 700;
}

.bms-page--amd-dedicated .epyc-spotlight__intro {
  margin: 20px 0 0 0;
  color: var(--text-body);
  line-height: 1.5;
  text-align: left;
  max-width: 100% !important;
}

.bms-page--amd-dedicated .epyc-spotlight__list {
  margin: 20px 0 40px 0;
  padding: 0 0 0 24px;
  list-style: none;
}

.bms-page--amd-dedicated .epyc-spotlight__list li {
  position: relative;
  padding-left: 0;
  margin-bottom: 10px;
  color: var(--text-body);
  line-height: 1.5;
}

.bms-page--amd-dedicated .epyc-spotlight__list li::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--purple);
}

.bms-page--amd-dedicated .epyc-spotlight__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}

.bms-page--amd-dedicated .epyc-spotlight__right {
  min-height: 500px;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.bms-page--amd-dedicated .epyc-spotlight__right--media {
  background-image: url(images/AMD-bg.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (max-width: 992px) {
  .bms-page--amd-dedicated .epyc-spotlight {
    padding: 48px 0 80px;
  }

  .bms-page--amd-dedicated .epyc-spotlight__container {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .bms-page--amd-dedicated .epyc-spotlight__right {
    min-height: 280px;
    order: -1;
  }
}

/* ── AMD Dedicated: Bare Metal features (layout cloned from operating-system os-custom-isos-section / xlc-connectivity; bm-features* only — OS rules unchanged) ── */
.bms-page--amd-dedicated .bm-features-section {
  background: #0a1628;
  color: var(--white);
  padding: 100px 0 80px;
  position: relative;
  overflow: hidden;
}

.bms-page--amd-dedicated .bm-features-section::before {
  content: '';
  position: absolute;
  inset: -10%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 100% 70% at 50% -10%, rgba(0, 255, 102, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 85% 110%, rgba(0, 191, 255, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 60% 45% at 15% 95%, rgba(0, 255, 102, 0.12) 0%, transparent 45%);
  animation: xlc-connectivity-glow-pulse 6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .bms-page--amd-dedicated .bm-features-section::before {
    animation: none;
    opacity: 0.85;
    transform: none;
  }
}

.bms-page--amd-dedicated .bm-features-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 12, 78, 0.65);
  z-index: 1;
  pointer-events: none;
}

.bms-page--amd-dedicated .bm-features__inner {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.bms-page--amd-dedicated .bm-features__intro,
.bms-page--amd-dedicated .bm-features__head,
.bms-page--amd-dedicated .bm-features__wrapper {
  position: relative;
  z-index: 2;
}

.bms-page--amd-dedicated .bm-features__intro {
  text-align: center;
  padding: 0 20px 48px;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bms-page--amd-dedicated .bm-features__intro h2 {
  font-size: clamp(32px, 5vw, 55px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin: 0;
}

.bms-page--amd-dedicated .bm-features__intro .gradient-text {
  background: linear-gradient(90deg, #00ff66 0%, #76bdff 50%, #aa74ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bms-page--amd-dedicated .bm-features__intro p {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 400;
  line-height: 1.5;
  color: #fcfdff;
  max-width: 1000px;
  margin: 32px auto 0;
  text-shadow: 0 0 20px rgba(0, 0, 0, 1);
}

.bms-page--amd-dedicated .bm-features__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.bms-page--amd-dedicated .bm-features__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--green);
  border: 4px solid #0b1c2a;
  box-shadow: 0 0 1px 2px rgba(255, 255, 255, 1);
  z-index: 2;
  box-sizing: border-box;
}

.bms-page--amd-dedicated .bm-features__title {
  color: var(--white);
  font-weight: 700;
  margin: 0;
  font-size: clamp(20px, 5.5vw, 25px);
  line-height: 1.2;
  padding-left: 3px;
}

.bms-page--amd-dedicated .bm-features__title-accent {
  background: linear-gradient(90deg, #00ff66 0%, #00bfff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.bms-page--amd-dedicated .bm-features__wrapper {
  position: relative;
  padding-left: 50px;
  margin: 40px 0;
}

.bms-page--amd-dedicated .bm-features__tree-main-line {
  position: absolute;
  left: 7px;
  top: -12px;
  bottom: 80px;
  width: 2px;
  background-color: var(--white);
  z-index: 0;
}

.bms-page--amd-dedicated .bm-features__tree-item {
  position: relative;
  margin-bottom: 24px;
}

.bms-page--amd-dedicated .bm-features__tree-item:last-child {
  margin-bottom: 0;
}

.bms-page--amd-dedicated .bm-features__tree-item::before {
  content: '';
  position: absolute;
  left: -43px;
  top: -24px;
  height: calc(50% + 24px);
  width: 36px;
  border-left: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  border-bottom-left-radius: 12px;
  border-right: none;
  border-top: none;
  z-index: 0;
}

.bms-page--amd-dedicated .bm-features__tree-item:first-child::before {
  top: -12px;
  height: calc(50% + 12px);
}

.bms-page--amd-dedicated .bm-features__tree-horizontal-line {
  display: none;
}

.bms-page--amd-dedicated .bm-features__tree-dot {
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--green);
  border: 4px solid #0b1c2a;
  box-shadow: 0 0 1px 2px rgba(255, 255, 255, 1);
  z-index: 2;
  box-sizing: border-box;
}

.bms-page--amd-dedicated .bm-features__content-box {
  border: 1px solid var(--green);
  border-radius: 12px;
  padding: 30px 40px;
  display: grid;
  grid-template-columns: 250px 40px 1fr;
  align-items: center;
  gap: 20px;
}

.bms-page--amd-dedicated .bm-features__box-left-title h3 {
  margin: 0;
  font-weight: 600;
  color: var(--white);
}

.bms-page--amd-dedicated .bm-features__head .bm-features__title {
  font-family: var(--font-h);
}

.bms-page--amd-dedicated .bm-features__box-slash {
  width: 4px;
  height: 70px;
  background-color: #00ff3700;
  transform: skewX(-20deg);
  margin: 0 auto;
}

.bms-page--amd-dedicated .bm-features__box-right-content {
  color: var(--white);
  min-width: 0;
}

.bms-page--amd-dedicated .bm-features__content-group {
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
}

.bms-page--amd-dedicated .bm-features__content-group:last-child {
  margin-bottom: 0;
}

.bms-page--amd-dedicated .bm-features__content-group::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 4px;
  height: 1.1em;
  background-color: var(--green);
  transform: skewX(-20deg);
}

.bms-page--amd-dedicated .bm-features__content-group p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
}

.bms-page--amd-dedicated .bm-features__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 48px;
  padding-left: 50px;
  justify-content: center;
}

/* Staggered reveal (mirrors xlc-connectivity-section) */
.bms-page--amd-dedicated .bm-features-section .bm-features__head {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bms-page--amd-dedicated .bm-features-section .bm-features__wrapper > .bm-features__tree-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bms-page--amd-dedicated .bm-features-section.reveal-on-scroll--in-view .bm-features__head {
  opacity: 1;
  transform: translateY(0);
}

.bms-page--amd-dedicated .bm-features-section.reveal-on-scroll--in-view .bm-features__wrapper > .bm-features__tree-item {
  opacity: 1;
  transform: translateY(0);
}

.bms-page--amd-dedicated .bm-features-section.reveal-on-scroll--in-view .bm-features__wrapper > .bm-features__tree-item:nth-child(2) {
  transition-delay: 0.08s;
}

.bms-page--amd-dedicated .bm-features-section.reveal-on-scroll--in-view .bm-features__wrapper > .bm-features__tree-item:nth-child(3) {
  transition-delay: 0.2s;
}

.bms-page--amd-dedicated .bm-features-section.reveal-on-scroll--in-view .bm-features__wrapper > .bm-features__tree-item:nth-child(4) {
  transition-delay: 0.32s;
}

.bms-page--amd-dedicated .bm-features-section.reveal-on-scroll--in-view .bm-features__wrapper > .bm-features__tree-item:nth-child(5) {
  transition-delay: 0.44s;
}

@media (prefers-reduced-motion: reduce) {
  .bms-page--amd-dedicated .bm-features-section .bm-features__head,
  .bms-page--amd-dedicated .bm-features-section .bm-features__wrapper > .bm-features__tree-item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .bms-page--amd-dedicated .bm-features-section.reveal-on-scroll--in-view .bm-features__wrapper > .bm-features__tree-item:nth-child(n) {
    transition-delay: 0s;
  }
}

@media (max-width: 992px) {
  .bms-page--amd-dedicated .bm-features-section {
    padding: 56px 0;
  }

  .bms-page--amd-dedicated .bm-features__head {
    margin-bottom: 24px;
  }

  .bms-page--amd-dedicated .bm-features__wrapper {
    padding-left: 0;
    margin: 24px 0;
  }

  .bms-page--amd-dedicated .bm-features__tree-main-line,
  .bms-page--amd-dedicated .bm-features__tree-horizontal-line,
  .bms-page--amd-dedicated .bm-features__tree-dot {
    display: none;
  }

  .bms-page--amd-dedicated .bm-features__tree-item::before {
    display: none;
  }

  .bms-page--amd-dedicated .bm-features__content-box {
    grid-template-columns: 1fr;
    padding: 24px;
    gap: 16px;
  }

  .bms-page--amd-dedicated .bm-features__box-slash {
    display: none;
  }

  .bms-page--amd-dedicated .bm-features__cta {
    padding-left: 0;
  }
}

@media (max-width: 768px) {
  .performance-benchmark,
  .epyc-spotlight,
  .bm-features-section {
    padding: 48px 0;
  }

  .bms-page--amd-dedicated .bm-features-section {
    padding: 42px 0;
  }

  .bms-page--amd-dedicated .bm-features__intro {
    padding: 30px 20px 40px;
  }
}

/* ========== Login page (customer portal) ========== */
.bms-page--login .bms-hero {
  padding-bottom: 0;
}
.bms-page--login .login-section.integration-section--light {
  padding-top: 40px;
  padding-bottom: 96px;
}
.bms-page--login .integration-section--light.reveal-on-scroll,
.bms-page--login .integration-section--light.reveal-on-scroll.reveal-on-scroll--in-view {
  transform: none !important;
}
.bms-page--login .integration-section--light .integration__inner {
  gap: 56px;
  align-items: start;
  grid-template-columns: 1.5fr 1fr;
  overflow: visible;
  min-width: 0;
}
.bms-page--login .integration-section--light .integration__left,
.bms-page--login .integration-section--light .integration__right {
  min-width: 0;
}
.bms-page--login .integration-section--light .integration__right {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border-radius: 16px;
  padding: 40px 36px 44px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  border: 1px solid rgba(0, 0, 0, 0.06);
  justify-content: center;
  margin-top: 4%;
}

.bms-page--login .integration__desc {
 
  max-width: 100%;
}

.bms-page--login .login-panel {
  padding-top: 0;
}
.login-panel__accent {
  display: block;
  height: 4px;
  margin: -40px -36px 28px -36px;
  border-radius: 16px 16px 0 0;
  
}
.login-panel__header {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.login-panel__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--purple) 0%, #6d28d9 100%);
  color: var(--white);
  font-size: 20px;
  box-shadow: 0 6px 18px rgba(109, 40, 217, 0.28);
}
.login-panel__titles {
  flex: 1;
  min-width: 0;
}
.bms-page--login .login-panel .login-panel__titles .free-trial-panel__heading {
  margin: 0 0 6px 0;
}
.bms-page--login .login-panel .login-panel__titles .free-trial-panel__intro {
  margin: 0 0 24px 0;
}
.bms-page--login .integration-section--light .integration__left {
  position: sticky;
  top: calc(var(--bms-navbar-h, 72px) + 24px);
  align-self: start;
  max-width: 100%;
}
.login-page__aside-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.login-page__fine-print {
  margin: 20px 0 0;
  font-family: var(--font-b);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}
.login-page__fine-print a {
  color: var(--purple);
  font-weight: 600;
  text-decoration: underline;
}
.login-page__fine-print a:hover {
  color: var(--red);
}
.cf7-row--login-meta {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-top: 4px;
}
.cf7-row--login-meta .login-remember {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.cf7-row--login-meta .login-remember:focus-within {
  box-shadow: none !important;
}
.login-forgot-link {
  font-family: var(--font-b);
  font-size: 14px;
  font-weight: 600;
  color: var(--purple);
  text-decoration: none;
  white-space: nowrap;
}
.login-forgot-link:hover {
  color: var(--red);
  text-decoration: underline;
}
.integration-section--light .cf7-field--password .login-password-wrap {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: stretch;
}
.integration-section--light .login-password-input {
  border-radius: 0;
}
.login-password-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  padding: 0;
  border: none;
  background: #f1f5f9;
  color: var(--text-body);
  cursor: pointer;
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  transition: background 0.2s ease, color 0.2s ease;
}
.login-password-toggle:hover {
  background: #e2e8f0;
  color: var(--black);
}
.login-password-toggle:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
  z-index: 1;
}
.login-form__actions {
  margin-top: 8px;
}
.login-form__actions .cf7-submit {
  width: 100%;
  justify-content: center;
  padding: 16px 32px;
  font-size: 16px;
}
@media (max-width: 992px) {
  .bms-page--login .login-section.integration-section--light {
    padding-bottom: 72px;
  }
  .bms-page--login .integration-section--light .integration__inner {
    gap: 0;
    grid-template-columns: 1fr;
  }
  .bms-page--login .integration-section--light .integration__left {
    display: none;
  }
}
@media (max-width: 576px) {
  .bms-page--login .integration-section--light .integration__right {
    padding: 28px 20px 32px;
    border-radius: 14px;
  }
  .login-panel__accent {
    margin: -28px -20px 22px -20px;
    border-radius: 14px 14px 0 0;
  }
  .login-panel__icon {
    width: 46px;
    height: 46px;
    font-size: 18px;
    border-radius: 12px;
  }
  .login-page__aside-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .login-page__aside-cta .login-page__cta-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* ========== Shopping cart — review & checkout ========== */
.cart-checkout-steps {
  background: var(--white);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 28px 0 24px;
  padding-top: 5px;
}
.cart-checkout-steps .container {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Steps: circle + uppercase label + horizontal connector — whole block centered */
.checkout-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
  flex-wrap: nowrap;
  font-family: var(--font-b);
}
.checkout-steps__item {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  font-family: inherit;
}
.checkout-steps__segment {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.checkout-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}
.checkout-steps__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Pending (not yet): light gray circle + muted label */
.checkout-steps__item--pending .checkout-steps__num {
  background: #e0e0e0;
  color: #9e9e9e;
}
.checkout-steps__item--pending .checkout-steps__label {
  color: #bdbdbd;
  font-weight: 600;
}
/* Completed step: solid dark circle + dark gray label */
.checkout-steps__item--complete .checkout-steps__num {
  background: #1a1a1a;
  color: #ffffff;
}
.checkout-steps__item--complete .checkout-steps__label {
  color: #616161;
  font-weight: 700;
}
/* Current step: black circle + black label */
.checkout-steps__item--active .checkout-steps__num {
  background: #000000;
  color: #ffffff;
}
.checkout-steps__item--active .checkout-steps__label {
  color: #000000;
  font-weight: 800;
}
.checkout-steps__line {
  flex: 0 1 80px;
  min-width: 24px;
  max-width: 120px;
  height: 1px;
  background: #e0e0e0;
  margin-left: 14px;
  margin-right: 0;
  align-self: center;
}
.checkout-steps__item:last-child .checkout-steps__line {
  display: none;
}
/* Mobile: vertical stack (industry pattern — avoid horizontal scroll / cramped
   uppercase labels; cf. slim step bar or single-column checkout on small screens) */
@media (max-width: 640px) {
  .cart-checkout-steps {
    padding-bottom: 18px;
  }
  .cart-checkout-steps .container {
    overflow-x: visible;
    justify-content: center;
    align-items: center;
    padding-left: var(--container-pad, 16px);
    padding-right: var(--container-pad, 16px);
  }
  .checkout-steps {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: none;
    flex-wrap: nowrap;
  }
  .checkout-steps__item {
    width: 100%;
    justify-content: center;
  }
  .checkout-steps__line {
    display: none;
  }
  /* 數字同字一齊當一組，整組水平置中（唔拉闊個 label 令個「1」飄去一邊） */
  .checkout-steps__segment {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-align: center;
  }
  .checkout-steps__num {
    align-self: center;
  }
  .checkout-steps__label {
    font-size: 11px;
    letter-spacing: 0.03em;
    white-space: normal;
    line-height: 1.35;
    text-align: center;
    flex: none;
    min-width: 0;
    max-width: min(280px, calc(100vw - 80px));
  }
}
.bms-page--cart-checkout .integration-section--light.cart-checkout-section.reveal-on-scroll,
.bms-page--cart-checkout .integration-section--light.cart-checkout-section.reveal-on-scroll.reveal-on-scroll--in-view {
  transform: none !important;
}
.cart-checkout-section.integration-section--light {
  padding-top: 48px;
  padding-bottom: 100px;
}
.cart-checkout__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: 40px;
  align-items: start;
}
@media (max-width: 1280px) {
  .cart-checkout-section.integration-section--light {
    padding-top: 44px;
    padding-bottom: 88px;
  }
  .cart-checkout__grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 350px);
    gap: 32px;
  }
}
@media (max-width: 1100px) {
  .cart-checkout-section.integration-section--light {
    padding: 0;
    padding-bottom: 80px;
    margin: 0;
    padding-top: 20px;
}
.cart-checkout__grid {
  grid-template-columns: 1fr 2.5fr;
  gap: 26px;
  
  grid-auto-flow: column;
}
  .cart-items-head {
    padding-left: 22px;
    padding-right: 22px;
  }
  .cart-items-card {
    padding: 24px 22px 24px;
  }
}
.cart-checkout__block-title {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  color: var(--black);
  margin: 0 0 20px;
}
.cart-line-items {
  margin-bottom: 48px;
}
/* Order items: column header + card layout — grid matches cart-items-card__row1 */
.cart-items-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
.cart-items-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(100px, auto) minmax(132px, auto) minmax(88px, auto);
  gap: 12px 20px;
  align-items: end;
  padding: 0 28px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-family: var(--font-b);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #616161;
}
.cart-items-head__cell--price,
.cart-items-head__cell--qty {
  text-align: center;
}
.cart-items-head__cell--sub {
  text-align: right;
}
.cart-items-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}
.cart-items-card {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 2px 16px rgba(15, 23, 42, 0.06);
  padding: 15px 10px 10px;
  padding-bottom: 20px;
}
.cart-items-card__row1 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(100px, auto) minmax(132px, auto) minmax(88px, auto);
  gap: 12px 20px;
  align-items: center;
  padding-bottom: 10px;
  /* border-bottom: 1px solid rgba(0, 0, 0, 0.08); */
  background: #fff7f7;
  padding-top: 10px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.cart-items-card__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--black);
  margin: 0;
  min-width: 0;
}
.cart-items-card__title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgb(167 0 0 / 9%);
  color: var(--red);
  font-size: 18px;
  flex-shrink: 0;
}
.cart-items-card__title-text {
  min-width: 0;
}
.cart-items-card__price {
  justify-self: center;
  text-align: center;
}
.cart-items-card__qty {
  justify-self: center;
}
.cart-items-card__sub {
  justify-self: end;
  text-align: right;
  font-family: var(--font-h);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--black);
}
.cart-items-card__body {
  padding-top: 5px;
  max-width: 100%;
  padding-left: 25px;
  padding-right: 25px;
}
.cart-line__details-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--font-b);
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
  cursor: pointer;
  transition: color 0.2s ease;
  justify-content: flex-end;
  padding-right: 5px;
}
.cart-line__details-toggle:hover {
  color: var(--red-dark);
}
.cart-line__details-toggle i {
  font-size: 11px;
}
.cart-line__spec-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cart-line__spec-list li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px 24px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  font-family: var(--font-b);
  font-size: 13px;
  line-height: 1.5;
}
.cart-line__spec-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.cart-line__spec-k {
  flex: 0 1 44%;
  min-width: 0;
  color: #757575;
  font-weight: 500;
}
.cart-line__spec-v {
  flex: 1;
  text-align: right;
  color: var(--black);
  font-weight: 600;
}
.cart-items-card__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-top: 22px;
  padding-top: 4px;
  width: 100%;
}
.cart-line__edit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-b);
  font-size: 13px;
  font-weight: 600;
  color: var(--purple);
  text-decoration: none;
  transition: color 0.2s ease;
  flex: 0 1 auto;
  min-width: 0;
}
.cart-line__edit:hover {
  color: var(--red);
  text-decoration: underline;
}
/* Cart: unified destructive text actions (Remove line / Clear cart) */
.cart-action-text {
  font: inherit;
}
.cart-action-text--danger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-b);
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease;
}
.cart-action-text--danger:hover {
  color: var(--red);
}
.cart-action-text--danger:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
  border-radius: 4px;
}
.cart-action-text--danger i {
  font-size: 14px;
  opacity: 0.9;
  flex-shrink: 0;
}
.cart-line__remove {
  text-align: right;
  flex: 0 0 auto;
}
.cart-line__price-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 6px;
  white-space: nowrap;
}
.cart-line__price-unit {
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: #616161;
}
.cart-line__price-period {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--text-muted);
  margin: 0;
}
.cart-line__subtotal {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 16px;
  color: var(--black);
}
.cart-line__qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 4px;
  overflow: hidden;
  background: var(--white);
}
.cart-qty-btn {
  width: 36px;
  height: 38px;
  border: none;
  background: #fafafa;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--black);
  transition: background 0.2s ease;
}
.cart-qty-btn:hover {
  background: #eeeeee;
}
.cart-qty-input {
  width: 44px;
  border: none;
  border-left: 1px solid rgba(0, 0, 0, 0.12);
  border-right: 1px solid rgba(0, 0, 0, 0.12);
  text-align: center;
  font-family: var(--font-b);
  font-size: 15px;
  font-weight: 600;
  padding: 0 4px;
  background: var(--white);
  color: var(--black);
  appearance: textfield;
  -moz-appearance: textfield;
}
.cart-qty-input::-webkit-outer-spin-button,
.cart-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Cart footer: panel block + coupon / actions (aligned with order items width) */
.cart-footer-panel {
  width: 100%;
  max-width: 920px;
  margin: 28px auto 0;
  padding: 0;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  background: linear-gradient(165deg, #f8fafc 0%, #ffffff 55%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 4px 24px rgba(15, 23, 42, 0.06);
}
.cart-items-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 28px 40px;
  padding: 26px 28px 28px;
  margin: 0;
  border: none;
}
.cart-items-footer__coupon {
  min-width: 0;
}
.cart-items-footer__coupon-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
}
.cart-items-footer__coupon-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(69, 0, 167, 0.08);
  color: var(--purple);
  font-size: 15px;
  flex-shrink: 0;
}
.cart-items-footer__coupon-title {
  font-family: var(--font-h);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--black);
  line-height: 1.3;
}
.cart-items-footer__coupon-row {
  display: flex;
  align-items: stretch;
  max-width: 400px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.cart-items-footer__coupon-input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-right: none;
  border-radius: 10px 0 0 10px;
  font-family: var(--font-b);
  font-size: 14px;
  background: var(--white);
  color: var(--black);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cart-items-footer__coupon-input::placeholder {
  color: #94a3b8;
}
.cart-items-footer__coupon-input:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(69, 0, 167, 0.12);
  z-index: 1;
}
.cart-items-footer__coupon-ok {
  min-width: 64px;
  padding: 0 20px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 0 10px 10px 0;
  background: #f1f5f9;
  font-family: var(--font-h);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  color: var(--black);
  transition: background 0.2s ease, color 0.2s ease;
}
.cart-items-footer__coupon-ok:hover {
  background: #e2e8f0;
  color: var(--black);
}
.cart-items-footer__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 25px;
  margin: 0;
  padding: 4px 0 0 32px;
  border-left: 1px solid rgba(15, 23, 42, 0.08);
  min-width: min(100%, 280px);
}
.cart-items-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px 16px;
}
.cart-items-footer__links-sep {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #cbd5e1;
  flex-shrink: 0;
}
.cart-items-footer__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-b);
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  transition: color 0.2s ease;
}
.cart-items-footer__back:hover {
  color: var(--black);
  text-decoration: underline;
}
.cart-items-footer__clear.cart-action-text--danger {
  text-decoration: none;
}
.cart-items-footer__update {
  min-width: 220px;
  padding: 14px 28px;
  border: 1.5px solid #0f172a;
  border-radius: 5px;
  background: var(--white);
  font-family: var(--font-h);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0f172a;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.cart-items-footer__update:hover {
  background: #0f172a;
  color: var(--white);
  border-color: #0f172a;
}
.cart-items-footer__update:active {
  transform: translateY(1px);
}
/* Cart checkout: custom dialog (replaces native alert/confirm) */
body.cart-checkout-modal--open {
  overflow: hidden;
}
.cart-checkout-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
}
.cart-checkout-modal.cart-checkout-modal--open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.cart-checkout-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
}
.cart-checkout-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  max-height: min(88vh, 640px);
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: linear-gradient(168deg, #ffffff 0%, #f8fafc 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 24px 48px rgba(15, 23, 42, 0.18);
  transform: translateY(12px) scale(0.98);
  opacity: 0;
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease;
}
.cart-checkout-modal.cart-checkout-modal--open .cart-checkout-modal__panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.cart-checkout-modal__accent {
  height: 4px;
  border-radius: 16px 16px 0 0;
  /* background: linear-gradient(90deg, var(--purple) 0%, #7c3aed 45%, rgba(69, 0, 167, 0.35) 100%); */
}
.cart-checkout-modal__inner {
  padding: 22px 24px 24px;
  overflow: auto;
  min-height: 0;
}
.cart-checkout-modal__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.cart-checkout-modal__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
  font-size: 20px;
}
.cart-checkout-modal__icon-wrap--info {
  background: rgba(69, 0, 167, 0.1);
  color: var(--purple);
}
.cart-checkout-modal__icon-wrap--success {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}
.cart-checkout-modal__icon-wrap--warning {
  background: rgba(234, 179, 8, 0.15);
  color: #a16207;
}
.cart-checkout-modal__icon-wrap--danger {
  background: rgba(220, 38, 38, 0.1);
  color: var(--red);
}
.cart-checkout-modal__title {
  margin: 4px 0 0;
  font-family: var(--font-h);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--black);
}
.cart-checkout-modal__body {
  font-family: var(--font-b);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-body);
  white-space: pre-wrap;
  word-break: break-word;
}
.cart-checkout-modal__body p {
  margin: 0 0 10px;
}
.cart-checkout-modal__body p:last-child {
  margin-bottom: 0;
}
.cart-checkout-modal__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
  padding-top: 4px;
}
.cart-checkout-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 5px;
  font-family: var(--font-h);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.cart-checkout-modal__btn--secondary {
  background: var(--white);
  border-color: rgba(15, 23, 42, 0.14);
  color: #334155;
}
.cart-checkout-modal__btn--secondary:hover {
  background: #f1f5f9;
  border-color: rgba(15, 23, 42, 0.22);
}
.cart-checkout-modal__btn--primary {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 2px 8px rgb(167 0 0 / 25%);
}
.cart-checkout-modal__btn--primary:hover {
  filter: brightness(1.06);
}
.cart-checkout-modal__btn--danger {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.22);
}
.cart-checkout-modal__btn--danger:hover {
  filter: brightness(1.05);
}
.cart-checkout-modal__btn:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}
.cart-checkout-modal__btn--danger:focus-visible {
  outline-color: var(--red);
}
@media (prefers-reduced-motion: reduce) {
  .cart-checkout-modal,
  .cart-checkout-modal__panel {
    transition: none;
  }
  .cart-checkout-modal.cart-checkout-modal--open .cart-checkout-modal__panel {
    transform: none;
  }
}
@media (max-width: 900px) {
  .cart-items-footer {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 22px 20px 24px;
  }
  .cart-items-footer__actions {
    align-items: stretch;
    padding: 20px 0 0;
    border-left: none;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    min-width: 0;
  }
  .cart-items-footer__links {
    justify-content: flex-start;
  }
  .cart-items-footer__update {
    min-width: 0;
    width: 100%;
  }
}
@media (max-width: 900px) {
  .cart-items-head {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      'product product product'
      'price qty sub';
    padding: 0 18px 12px;
    row-gap: 8px;
  }
  .cart-items-head__cell--product {
    grid-area: product;
  }
  .cart-items-head__cell--price {
    grid-area: price;
    text-align: left;
  }
  .cart-items-head__cell--qty {
    grid-area: qty;
    text-align: center;
  }
  .cart-items-head__cell--sub {
    grid-area: sub;
    text-align: right;
  }
  .cart-items-card {
    padding: 20px 18px 22px;
  }
  .cart-items-card__row1 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      'title title title'
      'price qty sub';
    gap: 14px 12px;
    padding-bottom: 18px;
  }
  .cart-items-card__title {
    grid-area: title;
    font-size: 1.125rem;
  }
  .cart-items-card__title-icon {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  .cart-items-card__price {
    grid-area: price;
    justify-self: start;
    text-align: left;
  }
  .cart-items-card__qty {
    grid-area: qty;
    justify-self: center;
  }
  .cart-items-card__sub {
    grid-area: sub;
    justify-self: end;
  }
}
@media (max-width: 520px) {
  .cart-items-head {
    display: none;
  }
  .cart-items-stack {
    max-width: 100%;
  }
  .cart-items-card__row1 {
    grid-template-columns: 1fr;
    grid-template-areas:
      'title'
      'price'
      'qty'
      'sub';
    justify-items: stretch;
  }
  .cart-items-card__price,
  .cart-items-card__qty,
  .cart-items-card__sub {
    justify-self: stretch;
  }
  .cart-items-card__price .cart-line__price-line {
    justify-content: flex-start;
  }
  .cart-items-card__qty {
    display: flex;
    justify-content: flex-start;
  }
  .cart-items-card__sub {
    text-align: left;
    padding-top: 4px;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
  }
}
@media (max-width: 640px) {
  .cart-footer-panel {
    margin-top: 20px;
    border-radius: 12px;
  }
  .cart-items-footer__links {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .cart-items-footer__links-sep {
    display: none;
  }
  .cart-items-footer__coupon-row {
    max-width: none;
  }
}
.cart-billing {
  margin-bottom: 40px;
}
/* Billing: card block + header (aligned with order items / footer panels) */
.cart-billing-panel {
  width: 100%;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  background: linear-gradient(168deg, #ffffff 0%, #f8fafc 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 4px 24px rgba(15, 23, 42, 0.06);
  padding: 26px 28px 30px;
}
.cart-billing-panel__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 0;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.cart-billing-panel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgb(167 0 0 / 9%);
  color: var(--red);
  font-size: 18px;
  flex-shrink: 0;
}
.cart-billing-panel__intro {
  min-width: 0;
  flex: 1;
}
.cart-billing-panel__title {
  font-family: var(--font-h);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--black);
  margin: 0 0 8px;
  line-height: 1.25;
}
.cart-billing-panel__sub {
  margin: 0;
  font-family: var(--font-b);
  font-size: 14px;
  line-height: 1.55;
  color: #64748b;
  
}
.cart-billing-panel .cart-billing-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
  width: 100%;
}
.cart-billing-panel .cf7-row {
  margin: 0;
}
.cart-billing-panel .cf7-field {
  border-radius: 5px;
  overflow: hidden;
  border-color: rgba(15, 23, 42, 0.1);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cart-billing-panel .cf7-field:focus-within {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(69, 0, 167, 0.1);
}
.cart-billing-panel .cf7-input,
.cart-billing-panel .cf7-select {
  min-height: 46px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.cart-billing-panel .cf7-field:has(.cf7-select)::after {
  display: none;
}
.cart-billing-panel .cf7-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23ef4444' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 6px;
}
.cart-billing-panel .cf7-label {
  min-width: 132px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.cart-billing-panel .cf7-field--checkbox:focus-within {
  box-shadow: none !important;
  border-color: transparent !important;
}
.cart-billing-panel .cf7-form .cf7-row--checkbox {
  margin-top: 4px;
}
.cart-account-panel {
  margin-bottom: 22px;
}
.cart-account-panel .cart-billing-panel__icon {
  background: rgb(247 232 233);
  color: #fd0013;
}
.cart-account-panel__body {
  margin-top: 24px;
}
.cart-account-panel .cart-password-generate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  width: auto;
  min-width: 132px;
  padding: 0 12px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 6px;
  background: #f8fafc;
  font-family: var(--font-h);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #0f172a;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.cart-account-panel .cart-password-generate-btn:hover {
  background: #eef2ff;
  border-color: rgba(69, 0, 167, 0.35);
  color: var(--purple);
}
.cart-account-panel__generate {
  margin-top: 12px;
}
.cart-account-panel__generate-note {
  margin: 8px 0 0;
  font-family: var(--font-b);
  font-size: 12px;
  line-height: 1.45;
  color: #64748b;
}
.cart-account-panel .cart-account-panel__actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-start;
}
.cart-account-panel__registered {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--font-b);
  font-size: 13px;
  font-weight: 600;
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
  cursor: pointer;
}
.cart-account-panel__registered:hover {
  color: var(--red);
}
.cart-account-login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 0;
}
.cart-account-panel__login-actions {
  margin-top: 2px;
}
.cart-account-panel__login-btn.cf7-submit {
  min-width: 140px;
  padding: 12px 22px;
  border-radius: 6px;
  font-size: 13px;
}
@media (max-width: 640px) {
  .cart-billing-panel {
    padding: 20px 18px 24px;
    border-radius: 12px;
  }
  .cart-billing-panel__head {
    flex-direction: column;
    gap: 12px;
    padding-bottom: 18px;
  }
  .cart-billing-panel__icon {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  .cart-billing-panel__title {
    font-size: 1.125rem;
  }
  .cart-account-panel .cart-password-generate-btn {
    min-width: 122px;
    padding: 0 10px;
    font-size: 11px;
  }
  .cart-account-panel__login-btn.cf7-submit {
    width: 100%;
    justify-content: center;
  }
}
.cart-checkout-section .cf7-row--half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.cart-payment-hint__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-body);
  
}
/* Payment: same card shell as billing (info-only, no form) */
.cart-payment-panel {
  width: 100%;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 8px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  background: linear-gradient(168deg, #ffffff 0%, #f8fafc 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 4px 24px rgba(15, 23, 42, 0.06);
  padding: 26px 28px 28px;
}
.cart-payment-panel__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 0;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.cart-payment-panel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgb(167 0 0 / 9%);
  color: var(--red);
  font-size: 18px;
  flex-shrink: 0;
}
.cart-payment-panel__intro {
  min-width: 0;
  flex: 1;
}
.cart-payment-panel__title {
  font-family: var(--font-h);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--black);
  margin: 0 0 8px;
  line-height: 1.25;
}
.cart-payment-panel__sub {
  margin: 0;
  font-family: var(--font-b);
  font-size: 14px;
  line-height: 1.55;
  color: #64748b;
 
}
.cart-payment-panel .cart-payment-hint__text {
  margin-top: 20px;
  padding-top: 0;
}
/* Payment method picker (checkout) */
.cart-payment-methods {
  margin-top: 22px;
}
.cart-payment-methods__lead {
  margin: 0 0 14px;
  font-family: var(--font-b);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}
.payment-method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
.payment-method-card {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 0;
  height: 100%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.payment-method-card__body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  min-height: 100px;
  padding: 14px 14px 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    transform 0.15s ease;
}
.payment-method-card:hover .payment-method-card__body {
  border-color: rgba(69, 0, 167, 0.28);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}
.payment-method-card__input:focus-visible + .payment-method-card__body {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}
.payment-method-card__input:checked + .payment-method-card__body {
  border-color: var(--red);
  background: linear-gradient(145deg, rgba(69, 0, 167, 0.06) 0%, #ffffff 55%);
  box-shadow:
    0 0 0 1px rgba(69, 0, 167, 0.12),
    0 6px 20px rgba(69, 0, 167, 0.08);
}
.payment-method-card__input:checked + .payment-method-card__body .payment-method-card__check {
  opacity: 1;
  color: var(--red);
  transform: scale(1);
}
.payment-method-card__check {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
  opacity: 0;
  color: #cbd5e1;
  transform: scale(0.92);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    color 0.2s ease;
}
.payment-method-card__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.06);
  color: #334155;
  font-size: 18px;
  flex-shrink: 0;
}
.payment-method-card__input:checked + .payment-method-card__body .payment-method-card__icon-wrap {
  background: rgba(69, 0, 167, 0.12);
  color: var(--purple);
}
.payment-method-card__icon-wrap--usdt {
  background: rgba(14, 165, 233, 0.12);
  color: #0369a1;
}
.payment-method-card__input:checked + .payment-method-card__body .payment-method-card__icon-wrap--usdt {
  background: rgba(14, 165, 233, 0.18);
  color: #0369a1;
}
.payment-method-card__icon-wrap--paypal {
  background: rgba(0, 112, 186, 0.1);
  color: #0070ba;
}
.payment-method-card__input:checked + .payment-method-card__body .payment-method-card__icon-wrap--paypal {
  background: rgba(0, 112, 186, 0.16);
  color: #00457c;
}
.payment-method-card__icon-wrap--bank {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
}
.payment-method-card__input:checked + .payment-method-card__body .payment-method-card__icon-wrap--bank {
  background: rgba(69, 0, 167, 0.1);
  color: var(--purple);
}
.payment-method-card__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.payment-method-card__title {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  color: var(--black);
  letter-spacing: -0.01em;
}
.payment-method-card__meta {
  font-family: var(--font-b);
  font-size: 12px;
  line-height: 1.35;
  color: #64748b;
}
.payment-method-card__brands {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  min-height: 26px;
  font-size: 22px;
  color: #94a3b8;
}
.payment-method-card__brands .fa-cc-visa {
  color: #1a1f71;
}
.payment-method-card__brands .fa-cc-mastercard {
  color: #eb001b;
}
.payment-method-card__brands--placeholder {
  visibility: hidden;
  flex-shrink: 0;
  pointer-events: none;
}
.payment-method-detail {
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px dashed rgb(33 33 33 / 22%);
  background: rgb(161 161 161 / 3%);
}
.payment-method-detail--card[hidden],
.payment-method-detail--usdt[hidden],
.payment-method-detail--paypal[hidden],
.payment-method-detail--bank[hidden] {
  display: none !important;
}
.payment-method-detail__label {
  margin: 0 0 10px;
  font-family: var(--font-b);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #475569;
}
.payment-usdt-networks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.payment-usdt-pill {
  position: relative;
  margin: 0;
  cursor: pointer;
}
.payment-usdt-pill__body {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  font-family: var(--font-b);
  font-size: 14px;
  font-weight: 600;
  color: var(--black);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}
.payment-usdt-pill__chain {
  font-weight: 500;
  font-size: 12px;
  color: #64748b;
}
.payment-usdt-pill:hover .payment-usdt-pill__body {
  border-color: rgba(69, 0, 167, 0.35);
}
.payment-usdt-pill__input:focus-visible + .payment-usdt-pill__body {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}
.payment-usdt-pill__input:checked + .payment-usdt-pill__body {
  border-color: var(--purple);
  background: rgba(69, 0, 167, 0.08);
  box-shadow: 0 2px 8px rgba(69, 0, 167, 0.12);
}
.payment-method-detail__hint {
  margin: 0;
  font-family: var(--font-b);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-body);
}
.payment-method-detail--bank .payment-method-detail__hint {
  margin-bottom: 16px;
}
/* Card fields inside payment panel (match billing cf7 look) */
.payment-card-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.payment-card-fields .cf7-row {
  margin: 0;
}
.cart-payment-panel .payment-method-detail .cf7-field {
  border-radius: 10px;
  overflow: hidden;
  border-color: rgba(15, 23, 42, 0.1);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.cart-payment-panel .payment-method-detail .cf7-field:focus-within {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(69, 0, 167, 0.1);
}
.cart-payment-panel .payment-method-detail .cf7-input {
  min-height: 46px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.cart-payment-panel .payment-method-detail .cf7-label {
  min-width: 112px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.cart-payment-panel .payment-card-fields .cf7-row--half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.payment-card-fields__secure {
  margin: 4px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.06);
  font-family: var(--font-b);
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}
.payment-card-fields__secure .fa-lock {
  margin-right: 8px;
  color: var(--purple);
  opacity: 0.85;
}
/* Shared notes (USDT / bank) */
.payment-notes-field {
  margin-top: 18px;
}
.payment-notes-field__label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-b);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #475569;
}
.payment-notes-field__textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 88px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  font-family: var(--font-b);
  font-size: 14px;
  line-height: 1.5;
  color: var(--black);
  resize: vertical;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.payment-notes-field__textarea::placeholder {
  color: #94a3b8;
}
.payment-notes-field__textarea:hover {
  border-color: rgba(69, 0, 167, 0.22);
}
.payment-notes-field__textarea:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(69, 0, 167, 0.1);
}
.payment-method-detail--usdt .payment-notes-field {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed rgba(15, 23, 42, 0.1);
}
/* PayPal button (brand-style) */
.payment-paypal-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.payment-paypal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 220px;
  padding: 14px 28px 14px 22px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  background: #ffc439;
  color: #003087;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 4px 12px rgba(0, 48, 135, 0.18);
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}
.payment-paypal-btn:hover {
  filter: brightness(1.03);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 6px 18px rgba(0, 48, 135, 0.22);
}
.payment-paypal-btn:active {
  transform: translateY(1px);
}
.payment-paypal-btn:focus-visible {
  outline: 3px solid rgba(0, 48, 135, 0.45);
  outline-offset: 2px;
}
.payment-paypal-btn__mark {
  font-size: 1.75rem;
  line-height: 1;
  color: #003087;
}
.payment-paypal-btn__text {
  position: relative;
  top: 1px;
}
.payment-method-detail__paypal-note {
  margin: 0;
  
  font-family: var(--font-b);
  font-size: 13px;
  line-height: 1.55;
  color: #64748b;
}
@media (max-width: 640px) {
  .cart-payment-panel .payment-card-fields .cf7-row--half {
    grid-template-columns: 1fr;
  }
  .payment-method-grid {
    grid-template-columns: 1fr;
  }
  .payment-method-card__body {
    min-height: auto;
}
  .cart-payment-panel {
    padding: 20px 18px 22px;
    border-radius: 12px;
  }
  .cart-payment-panel__head {
    flex-direction: column;
    gap: 12px;
    padding-bottom: 16px;
  }
  .cart-payment-panel__icon {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  .cart-payment-panel__title {
    font-size: 1.125rem;
  }
}
/* Cart checkout sidebar: same visual as server-configuration .sc-summary (dark card, red CTA) */
.bms-page--cart-checkout .cart-checkout-summary.sc-summary {
  position: sticky;
  top: calc(72px + 16px);
}
.bms-page--cart-checkout .cart-checkout-summary .sc-summary__list {
  margin-bottom: 20px;
}
.bms-page--cart-checkout .cart-checkout-summary .sc-summary__list li.cart-checkout-summary__row--muted {
  font-size: 12px;
}
.bms-page--cart-checkout .cart-checkout-summary .sc-summary__list li.cart-checkout-summary__row--muted .sc-summary__k,
.bms-page--cart-checkout .cart-checkout-summary .sc-summary__list li.cart-checkout-summary__row--muted .sc-summary__v {
  opacity: 0.85;
  font-weight: 500;
}
.bms-page--cart-checkout .cart-checkout-summary .sc-summary__price-label {
  max-width: 100%;
  white-space: normal;
  line-height: 1.35;
}
.bms-page--cart-checkout .cart-checkout-summary .sc-summary__note {
  margin-bottom: 16px;
}
.bms-page--cart-checkout .cart-checkout-summary .sc-summary__deploy.cart-checkout-summary__continue {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-decoration: none;
  margin-top: 10px;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  font-family: var(--font-h);
  font-size: 15px;
  font-weight: 700;
  gap: 8px;
}
.btn--block {
  display: flex;
  width: 100%;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}
@media (max-width: 992px) {
  .cart-checkout__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .cart-checkout-section.integration-section--light {
    padding-bottom: calc(190px + env(safe-area-inset-bottom));
  }
  .cart-checkout-summary.sc-summary {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
  }
  .cart-checkout-summary.sc-summary.cart-checkout-summary--docked {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    z-index: 500;
    margin: 0;
    padding: 0;
    background: linear-gradient(168deg, #151d28 0%, #0c1018 50%, #0a0c14 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.26);
  }
  .cart-checkout-summary.sc-summary .sc-summary__inner {
    margin: 0 auto;
    max-width: 100%;
    border-radius: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    grid-template-columns: 1fr;
    gap: 8px;
    min-height: 0;
    box-sizing: border-box;
  }
  .cart-checkout-summary.sc-summary .sc-summary__title,
  .cart-checkout-summary.sc-summary .sc-summary__list,
  .cart-checkout-summary.sc-summary .sc-summary__note {
    display: none !important;
  }
  .cart-checkout-summary.sc-summary .sc-summary__price {
    margin: 0;
    padding: 0 0 6px;
    border: none;
  }
  .cart-checkout-summary.sc-summary .sc-summary__price-label {
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 4px;
  }
  .cart-checkout-summary.sc-summary .sc-summary__price-value {
    font-size: 2rem;
    line-height: 1.05;
  }
  .cart-checkout-summary.sc-summary .sc-summary__cart {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 13px 16px;
    font-size: 14px;
    line-height: 1.2;
    white-space: normal;
  }
  .cart-checkout-summary.sc-summary .sc-summary__deploy.cart-checkout-summary__continue {
    display: inline-flex;
    width: 100%;
    min-width: 0;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    padding: 6px 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-decoration: none;
    color: var(--text-dim);
    font-family: var(--font-h);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }
  .cart-checkout-summary.sc-summary .sc-summary__deploy.cart-checkout-summary__continue i {
    font-size: 12px;
    transform: translateY(1px);
  }
  .cart-checkout-summary.sc-summary .sc-summary__deploy.cart-checkout-summary__continue:hover {
    color: var(--white);
    transform: none;
  }
}
@media (max-width: 640px) {
  .cart-checkout-section .cf7-row--half {
    grid-template-columns: 1fr;
  }
  .cart-checkout-summary.sc-summary .sc-summary__inner {
    gap: 10px;
  }



  .cart-checkout-summary.sc-summary .sc-summary__price-value {
    font-size: 1.8rem;
  }
  .cart-checkout-summary.sc-summary .sc-summary__cart {
    font-size: 16px;
  }
}

/* ========== Order status (post-checkout) ==========
   UX ref: clear milestone timeline + latest status first (WISMO reduction);
   print pattern: browser print dialog for invoice / receipt (common with Stripe, Shopify).
   ========== */
.bms-page--order-status .integration-section--light.order-status-section.reveal-on-scroll,
.bms-page--order-status .integration-section--light.order-status-section.reveal-on-scroll.reveal-on-scroll--in-view {
  transform: none !important;
}
.order-status-section.integration-section--light {
  padding-top: 48px;
  padding-bottom: 100px;
}
@media (max-width: 992px) {
  /* 與 cart-checkout 底欄同高度預留，避免被 fixed summary 遮內容；覆寫上一段 100px（同特異性下後寫入勝） */
  .bms-page--order-status .order-status-section.integration-section--light {
    padding-bottom: calc(190px + env(safe-area-inset-bottom));
  }
  /* DEBUG/強制：掛到 body 後仍須貼齊視窗底；z-index 高於 .navbar(1000)，低於 .cart-checkout-modal(10050) */
  body.cart-checkout-summary--mobile-docked > #order-status-summary.cart-checkout-summary.sc-summary,
  #order-status-summary.cart-checkout-summary.sc-summary.cart-checkout-summary--docked {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    z-index: 10040 !important;
    transform: none !important;
    -webkit-transform: none !important;
  }
}
.order-status__main {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
  width: 100%;
}
/* 左欄各區塊左右邊緣對齊：覆寫 checkout 的 .cart-items-group 置中 + max-width */
.bms-page--order-status .order-status__main .cart-items-group,
.bms-page--order-status .order-status__main .cart-line-items {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
/* 避免共用 .cart-line-items 的 margin-bottom:48px 與 flex gap 疊加，令 configuration 與 invoice 分太開 */
.bms-page--order-status .order-status-line-items.cart-line-items {
  margin-bottom: 0;
}
.bms-page--order-status .order-status__main .order-status-invoice-wrap {
  width: 100%;
  align-self: stretch;
  margin-top: 0;
}
.order-status-hero-card {
  position: relative;
  border-radius: 16px;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}
.order-status-hero-card__accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(0deg, var(--purple-light) 0%, var(--purple) 50%, var(--red-dark) 100%);
}
.order-status-hero-card__body {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 28px 28px 28px 32px;
}
.order-status-hero-card__icon-wrap {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgb(255 77 77 / 12%) 0%, rgb(255 77 77 / 6%) 100%);
  border: 1px solid rgb(255 77 77 / 20%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  font-size: 20px;
}
.order-status-hero-card__eyebrow {
  margin: 0 0 6px;
  font-family: var(--font-b);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  width: fit-content;
  border: 1px solid var(--red);
  border-radius: 3px;
  padding: 1px 7px;
}
.order-status-hero-card__title {
  margin: 0 0 10px;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--black);
}
.order-status-hero-card__sub {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.75;
  color: #4b5563;
  max-width: 52rem;
}
.order-status-meta {
  margin: 0;
  display: grid;
  gap: 12px 28px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.order-status-meta__row {
  margin: 0;
}
.order-status-meta__row dt {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ca3af;
}
.order-status-meta__row dd {
  margin: 0;
  font-family: var(--font-b);
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
}
.order-status-meta__mono {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  font-size: 18px;
  line-height: 26px;
}
.order-status-timeline {
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fafafa;
  padding: 35px 36px 40px 35px;
}
.order-status-timeline__head {
  margin-bottom: 24px;
}
.order-status-timeline__title {
  margin: 0 0 8px;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--black);
}
.order-status-timeline__lead {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: #6b7280;
  max-width: 48rem;
}
.order-status-timeline__track {
  list-style: none;
  margin: 0;
  padding: 0 0 0 8px;
  border-left: 2px solid #e5e7eb;
  margin-left: 10px;
}
.order-status-timeline__step {
  position: relative;
  padding: 0 0 28px 28px;
}
.order-status-timeline__step:last-child {
  padding-bottom: 0;
}
.order-status-timeline__dot {
  position: absolute;
  left: -21px;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e5e7eb;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #fff;
}
.order-status-timeline__step--done .order-status-timeline__dot {
  background: #111827;
  border-color: #111827;
  box-shadow: none;
}
.order-status-timeline__step--current .order-status-timeline__dot {
  background: var(--red);
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgb(255 77 77 / 20%);
}
.order-status-timeline__dot--pulse {
  animation: order-status-pulse 2s ease-in-out infinite;
}
@keyframes order-status-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 4px rgb(255 77 77 / 20%);
  }
  50% {
    box-shadow: 0 0 0 8px rgb(255 77 77 / 20%);
}
}
@media (prefers-reduced-motion: reduce) {
  .order-status-timeline__dot--pulse {
    animation: none;
  }
}
.order-status-timeline__step--pending .order-status-timeline__dot {
  background: #f3f4f6;
  border-color: #e5e7eb;
}
.order-status-timeline__label {
  display: block;
  font-family: var(--font-b);
  font-weight: 700;
  font-size: 15px;
  color: #111827;
  margin-bottom: 4px;
}
.order-status-timeline__time {
  display: block;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.45;
}
.order-status-line-items .cart-checkout__block-title {
  margin-bottom: 16px;
}
.order-status-line-card .cart-items-card__actions {
  display: none;
}
.order-status-line-card__qty {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
}
.order-status-line-card__price {
  display: flex;
  align-items: center;
}
.order-status-price-line {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}
.order-status-price-unit {
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: #616161;
}
.order-status-price-period {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--text-muted);
}
.order-status-qty-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ca3af;
}
.order-status-qty-value {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--black);
}
.order-status-invoice-wrap {
  margin-top: 0;
}
.order-status-invoice {
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--white);
  padding: 32px 36px;
  box-shadow: 0 2px 16px rgba(15, 23, 42, 0.06);
}
.order-status-invoice__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
}
.order-status-invoice__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.order-status-invoice__logo-img {
  display: block;
  height: auto;
  max-height: 44px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
}
.order-status-invoice__brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.order-status-invoice__company {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--black);
  margin-left: 5px;
  margin-top: 5px;
}
.order-status-invoice__tagline {
  font-size: 12px;
  color: #6b7280;
  margin-left: 5px;
}
.order-status-invoice__doc {
  text-align: right;
}
.order-status-invoice__doc-type {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9ca3af;
}
.order-status-invoice__doc-id {
  display: block;
  margin-top: 4px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
}




.order-status-invoice__meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px 24px;
  margin-bottom: 28px;
}
.order-status-invoice__k {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 6px;
}
.order-status-invoice__v {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #374151;
}
.order-status-invoice__mono {
  font-family: ui-monospace, Menlo, monospace;
  font-weight: 600;
}
.order-status-invoice__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  border-bottom: 1px solid #e5e7eb;
}
.order-status-invoice__table thead th {
  text-align: left;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
  padding: 12px 12px 10px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}
.order-status-invoice__table tbody td {
  padding: 16px 12px 18px;
  border-bottom: none;
  color: #1f2937;
  vertical-align: top;
}
.order-status-invoice__table tfoot td {
  padding: 6px 12px;
  border-bottom: none;
  background: transparent;
}
.order-status-invoice__table tfoot tr:first-child td {
  padding-top: 16px;
}
.order-status-invoice__th-num,
.order-status-invoice__td-num {
  text-align: right;
}
.order-status-invoice__tf-label {
  text-align: right;
  font-weight: 500;
  font-size: 13px;
  color: #6b7280;
}
.order-status-invoice__total-row td {
  font-weight: 800;
  font-size: 15px;
  color: #111827;
  /* border-top: 1px solid #e5e7eb; */
  padding-top: 14px;
  padding-bottom: 6px;
  background: #fff7f7 !important;
}
.order-status-invoice__footer {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
  font-size: 12px;
  line-height: 1.65;
  color: #6b7280;
}
.order-status-invoice__footer a {
  color: var(--red);
  font-weight: 600;
  text-decoration: none;
}
.order-status-invoice__footer a:hover {
  color: var(--red-dark);
  text-decoration: underline;
}
.order-status-invoice__fine {
  margin-top: 12px;
  font-size: 11px;
  color: #9ca3af;
}
.order-status-support {
  border-radius: 14px;
  border: 1px solid rgba(124, 77, 255, 0.2);
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.06) 0%, rgba(0, 0, 0, 0.02) 100%);
  padding: 22px 24px;
}
.order-status-support__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}
.order-status-support__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(124, 77, 255, 0.12);
  color: #5b2fc9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.order-status-support__text {
  flex: 1 1 200px;
  min-width: 0;
}
.order-status-support__title {
  margin: 0 0 4px;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--black);
}
.order-status-support__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #6b7280;
}
.order-status-support__btn {
  margin-left: auto;
}
.cart-checkout-summary.order-status-summary .order-status-summary__status {
  color: #31ff00;
  font-weight: 800;
}
/* Print + Copy：沿用 cart-checkout Order summary 的 .sc-summary__cart / .sc-summary__deploy */
.bms-page--order-status .cart-checkout-summary .sc-summary__cart {
  gap: 10px;
}
.bms-page--order-status .cart-checkout-summary button.sc-summary__deploy.cart-checkout-summary__continue {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  font: inherit;
  cursor: pointer;
  margin-top: 10px;
  background: white!important;
}
.bms-page--order-status .cart-checkout-summary .order-status-copy-btn:disabled {
  opacity: 0.75;
  cursor: default;
}
.order-status-actions__hint {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: #9ca3af;
}
.order-status-back.cart-checkout-summary__continue {
  margin-top: 10px;
}
@media (max-width: 640px) {
  .order-status-hero-card__body {
    flex-direction: column;
    padding: 22px 20px 22px 24px;
  }
  .order-status-support__inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .order-status-support__btn {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
  .order-status-invoice {
    padding: 22px 18px;
  }

  .order-status-support__text {
    flex: 1 1 0px;
}

  .bms-page--order-status .order-status-line-card {
    padding: 16px 14px 18px;
    border-radius: 12px;
  }
  .bms-page--order-status .order-status-line-card .cart-items-card__row1 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      'title title'
      'price qty'
      'sub sub';
    gap: 10px;
    padding-bottom: 14px;
    border-bottom-color: rgba(0, 0, 0, 0.06);
  }
  .bms-page--order-status .order-status-line-card .cart-items-card__title {
    font-size: 1rem;
    line-height: 1.3;
    gap: 10px;
  }
  .bms-page--order-status .order-status-line-card .cart-items-card__title-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 14px;
  }
  .bms-page--order-status .order-status-line-card .cart-items-card__price, 
  .bms-page--order-status .order-status-line-card .cart-items-card__qty, 
  .bms-page--order-status .order-status-line-card .cart-items-card__sub {
    justify-self: stretch;
    text-align: left;
    border: 1px solid rgb(255 0 0 / 17%);
    border-radius: 10px;
    /* background: #f8fafc; */
    padding: 9px 10px;
    min-height: 56px;
}
  .bms-page--order-status .order-status-line-card .cart-items-card__price {
    grid-area: price;
  }
  .bms-page--order-status .order-status-line-card .cart-items-card__qty {
    grid-area: qty;
  }
  .bms-page--order-status .order-status-line-card .cart-items-card__sub {
    grid-area: sub;
    display: flex;
    align-items: center;
  }
  .bms-page--order-status .order-status-line-card .order-status-price-line,
  .bms-page--order-status .order-status-line-card .order-status-line-card__qty {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .bms-page--order-status .order-status-line-card .order-status-price-line {
    justify-content: flex-start;
    gap: 8px;
  }
  .bms-page--order-status .order-status-line-card .order-status-qty-label {
    font-size: 10px;
    letter-spacing: 0.06em;
    color: #6b7280;
  }
  .bms-page--order-status .order-status-line-card .order-status-qty-value {
    font-size: 1rem;
  }
  .bms-page--order-status .order-status-line-card .cart-items-card__sub::before {
    content: 'Subtotal';
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
    margin-right: auto;
  }
  .bms-page--order-status .order-status-line-card .cart-line__subtotal {
    margin-left: 10px;
    font-size: 1.05rem;
  }


}

@media print {
  body {
    background: #fff !important;
  }
  .no-print,
  #header-placeholder,
  #footer-placeholder,
  #support-section-placeholder {
    display: none !important;
  }
  .bms-page--order-status main,
  .order-status-section .container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
  }
  .order-status-section.integration-section--light {
    padding: 0 !important;
  }
  .cart-checkout__grid {
    display: block !important;
  }
  .order-status-section .cart-checkout__main {
    max-width: none !important;
  }
  .order-status-invoice-wrap {
    margin: 0 !important;
  }
  .order-status-invoice {
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
}