:root {
  --ixp-primary: #0f3f5f;
  --ixp-primary-2: #0b2f47;
  --ixp-accent: #36b7c8;
  --ixp-accent-soft: #e8f8fb;
  --ixp-ink: #183142;
  --ixp-muted: #64748b;
  --ixp-line: #dbe7ee;
  --ixp-bg: #f6fafc;
  --ixp-card: #ffffff;
  --ixp-radius: 24px;
  --ixp-shadow: 0 18px 45px rgba(15, 63, 95, .12);
}

html { scroll-behavior: smooth; }
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  color: var(--ixp-ink);
  background: #fff;
  line-height: 1.75;
}
a { text-decoration: none; }
.site-header {
  background: rgba(9, 37, 56, .94);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 8px 22px rgba(9,37,56,.12);
}
.navbar-brand, .nav-link { color: rgba(255,255,255,.82) !important; font-weight: 700; }
.nav-link:hover, .nav-link.active { color: #fff !important; }
.nav-cta { border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding-left: 1rem !important; padding-right: 1rem !important; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg,var(--ixp-accent),#eefcff); display:inline-flex; align-items:center; justify-content:center; color:var(--ixp-primary); font-weight:900; margin-right:.55rem; }
.brand-logo-img { width: 38px; height: 38px; border-radius: 12px; margin-right: .6rem; background: #fff; object-fit: cover; box-shadow: 0 10px 24px rgba(14,165,233,.18); }
.navbar-brand span { letter-spacing: .01em; }

.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: radial-gradient(circle at 20% 20%, rgba(54,183,200,.35), transparent 26%), linear-gradient(135deg, rgba(11,47,71,.92), rgba(9,37,56,.88)), url('/img/homepage-slide.png') center/cover no-repeat;
}
.hero::after { content:""; position:absolute; inset:auto -8% -28% auto; width:540px; height:540px; border-radius:50%; background:rgba(54,183,200,.16); }
.hero-inner { position:relative; z-index:1; padding: 6.5rem 0 5.5rem; }
.eyebrow { display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .8rem; border-radius:999px; color:var(--ixp-accent); background:rgba(255,255,255,.10); font-weight:800; letter-spacing:.05em; font-size:.9rem; }
.hero h1 { font-weight: 900; letter-spacing: -.04em; line-height:1.08; font-size: clamp(2.4rem, 5vw, 4.9rem); }
.hero .lead { color: rgba(255,255,255,.82); font-size: clamp(1.05rem, 2vw, 1.35rem); max-width: 760px; }
.btn-ixp { background: var(--ixp-accent); color: #062635; border: 0; font-weight: 900; border-radius:999px; padding:.85rem 1.35rem; box-shadow: 0 12px 24px rgba(54,183,200,.28); }
.btn-ixp:hover { background:#68d4df; color:#062635; }
.btn-ixp-outline { border: 1px solid rgba(255,255,255,.45); color:#fff; border-radius:999px; padding:.85rem 1.35rem; font-weight:800; }
.btn-ixp-outline:hover { background:#fff; color:var(--ixp-primary); }
.section { padding: 5rem 0; }
.section-sm { padding: 3.5rem 0; }
.section-bg { background: var(--ixp-bg); }
.section-dark { background: linear-gradient(135deg, var(--ixp-primary-2), var(--ixp-primary)); color: #fff; }
.section-title { font-weight: 900; letter-spacing:-.02em; color:var(--ixp-ink); }
.section-dark .section-title { color:#fff; }
.section-subtitle { color: var(--ixp-muted); max-width: 760px; }
.section-dark .section-subtitle { color:rgba(255,255,255,.75); }
.feature-card, .price-card, .team-card, .step-card, .trust-card {
  background: var(--ixp-card); border: 1px solid var(--ixp-line); border-radius: var(--ixp-radius); padding: 1.6rem; height: 100%; box-shadow: 0 8px 24px rgba(15,63,95,.06);
}
.feature-card:hover, .price-card.featured { box-shadow: var(--ixp-shadow); transform: translateY(-2px); transition:.2s ease; }
.icon-badge { width:48px; height:48px; border-radius:16px; display:inline-flex; align-items:center; justify-content:center; background:var(--ixp-accent-soft); color:var(--ixp-primary); font-size:1.35rem; margin-bottom:1rem; }
.medical-strip { background: linear-gradient(90deg, var(--ixp-primary), var(--ixp-accent)); height: 7px; }
.screenshot-placeholder {
  border: 2px dashed rgba(15,63,95,.28); border-radius: 22px; min-height: 260px; background: linear-gradient(135deg,#f8fdff,#edf8fb); display:flex; align-items:center; justify-content:center; text-align:center; color:var(--ixp-primary); padding:2rem; font-weight:800;
}
.screenshot-placeholder small { display:block; color:var(--ixp-muted); font-weight:600; margin-top:.35rem; }
.product-shot { border-radius:22px; box-shadow: var(--ixp-shadow); border: 1px solid rgba(255,255,255,.55); }
.check-list { list-style:none; padding-left:0; margin:0; }
.check-list li { margin:.55rem 0; display:flex; gap:.55rem; align-items:flex-start; }
.check-list li::before { content:"✓"; color: var(--ixp-accent); font-weight:900; }
.usecase-pill { display:inline-flex; border:1px solid var(--ixp-line); border-radius:999px; padding:.45rem .8rem; margin:.25rem; background:#fff; color:var(--ixp-primary); font-weight:800; }
.table-ixp { border-radius: 18px; overflow:hidden; box-shadow: 0 8px 24px rgba(15,63,95,.06); }
.table-ixp th { background: var(--ixp-primary); color:#fff; }
.table-ixp td, .table-ixp th { padding:1rem; vertical-align:middle; }
.price { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; color:var(--ixp-primary); letter-spacing:-.03em; }
.footer { background:#071f30; color:rgba(255,255,255,.72); }
.footer a { color:rgba(255,255,255,.88); font-weight:700; }
.footer a:hover { color:#fff; }
.hero-mini { background: linear-gradient(135deg, rgba(11,47,71,.96), rgba(15,63,95,.88)); color:#fff; padding:5.5rem 0 4.25rem; }
.hero-mini h1 { font-size: clamp(2.2rem, 4vw, 4rem); font-weight:900; letter-spacing:-.03em; }
.kpi-card { border-left: 5px solid var(--ixp-accent); background:#fff; border-radius:18px; padding:1.25rem; box-shadow:0 8px 20px rgba(15,63,95,.06); }
@media (max-width: 767px) {
  .hero-inner { padding: 4.5rem 0 3.75rem; }
  .section { padding: 3.5rem 0; }
  .nav-cta { border: 0; padding-left:0 !important; }
}

/* Language switch: aligned with admin portal pill style */
.admin-language-switch {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  box-shadow: 0 10px 30px rgba(15,23,42,.08);
  backdrop-filter: blur(10px);
}
.admin-language-switch .lang-pill {
  border: 0;
  border-radius: 999px;
  padding: .45rem .75rem;
  font-size: .9rem;
  font-weight: 700;
  color: rgba(255,255,255,.78);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;
}
.admin-language-switch .lang-pill.active {
  color: #fff;
  background: linear-gradient(135deg,#0ea5e9,#4f46e5);
}
.admin-language-switch .lang-pill:hover {
  color: #fff;
}
.site-language-switch {
  margin-left: .35rem;
  margin-right: .25rem;
}
@media (max-width: 991.98px) {
  .site-language-switch {
    margin: .75rem 0 .25rem;
    align-self: flex-start;
  }
}

/* Fix KPI cards on dark sections: prevent white text on white cards */
.section-dark .kpi-card,
.kpi-card {
  color: var(--ixp-ink);
}
.section-dark .kpi-card h5,
.kpi-card h5 {
  color: var(--ixp-primary);
  font-weight: 900;
}
.section-dark .kpi-card p,
.kpi-card p {
  color: var(--ixp-muted);
}

/* Pricing page product showcase thumbnails */
.pricing-showcase-shot {
  min-height: 0;
  margin: 1.1rem 0 1.35rem;
  padding: .7rem;
  border-radius: 20px;
  background: linear-gradient(135deg, #f9fdff, #eef8ff);
}
.pricing-showcase-shot img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(13, 56, 96, .08);
}
.pricing-showcase-note {
  display: block;
  margin-top: -.7rem;
  margin-bottom: 1.05rem;
  color: var(--ixp-muted);
  font-size: .88rem;
  font-weight: 700;
}

/* Screenshot thumbnail + lightbox preview */
.screenshot-placeholder.screenshot-zoomable {
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  outline: none;
}

.screenshot-placeholder.screenshot-zoomable::after {
  content: attr(data-zoom-text);
  position: absolute;
  right: 18px;
  bottom: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(13, 56, 96, .12);
  background: rgba(255, 255, 255, .92);
  color: #17466f;
  font-size: .82rem;
  font-weight: 700;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .12);
  backdrop-filter: blur(10px);
}

.screenshot-placeholder.screenshot-zoomable:hover::after,
.screenshot-placeholder.screenshot-zoomable:focus-visible::after {
  background: linear-gradient(135deg, #1fa2ff, #7c3aed);
  color: #fff;
  border-color: transparent;
}

.screenshot-placeholder.screenshot-zoomable:hover,
.screenshot-placeholder.screenshot-zoomable:focus-visible {
  box-shadow: 0 22px 58px rgba(15, 23, 42, .18);
  transform: translateY(-2px);
}

.screenshot-placeholder img,
.screenshot-zoomable img,
.js-lightbox-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
}

.ixp-lightbox-lock {
  overflow: hidden;
}

.ixp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(8, 18, 34, .82);
  backdrop-filter: blur(10px);
}

.ixp-lightbox.open {
  display: flex;
}

.ixp-lightbox-content {
  width: min(1180px, 96vw);
  max-height: 92vh;
  text-align: center;
}

.ixp-lightbox-image {
  display: block;
  max-width: 100%;
  max-height: 84vh;
  margin: 0 auto;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .38);
}

.ixp-lightbox-caption {
  display: none;
  margin-top: 14px;
  color: rgba(255, 255, 255, .9);
  font-size: .95rem;
}

.ixp-lightbox-close {
  position: fixed;
  top: 20px;
  right: 22px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.ixp-lightbox-close:hover {
  background: rgba(255, 255, 255, .22);
}

@media (max-width: 576px) {
  .screenshot-placeholder.screenshot-zoomable::after {
    right: 12px;
    bottom: 12px;
    font-size: .76rem;
  }

  .ixp-lightbox {
    padding: 14px;
  }

  .ixp-lightbox-image {
    border-radius: 16px;
  }
}