:root {







  --navy-950: #051020;







  --navy-900: #091b34;







  --navy-800: #0f2c52;







  --primary: #0d4b7a;







  --primary-bright: #0284c7;







  --line-green: #06c755;







  --line-green-dark: #04a344;







  --gold-500: #f59e0b;







  --gold-600: #d97706;







  --gold-bg: #fffbeb;







  --bg-page: #f8fafc;







  --bg-soft: #f1f5f9;







  --white: #ffffff;







  --text-main: #0f172a;







  --text-body: #1e293b;







  --text-muted: #475569;







  --border: #e2e8f0;







  --border-strong: #cbd5e1;







  --shadow-sm: 0 2px 8px rgba(9, 27, 52, 0.05);







  --shadow-md: 0 12px 32px rgba(9, 27, 52, 0.08);







  --shadow-lg: 0 22px 50px rgba(5, 16, 32, 0.16);







  --radius-md: 12px;







  --radius-lg: 18px;







}















*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }







html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }







body {







  font-family: 'Prompt', 'Plus Jakarta Sans', 'PingFang SC', 'Hiragino Kaku Gothic ProN', 'Meiryo', system-ui, -apple-system, sans-serif;







  color: var(--text-body);







  background: var(--white);







  line-height: 1.72;







  font-size: 16px;







  overflow-x: hidden;







  -webkit-font-smoothing: antialiased;







}







h1, h2, h3, h4, strong {







  font-family: 'Prompt', 'Plus Jakarta Sans', sans-serif;







  color: var(--text-main);







  letter-spacing: -0.01em;







}







a { color: var(--primary); text-decoration: none; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); }







a:hover { color: var(--gold-600); }







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







.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }















/* Live Pulse Indicator */







@keyframes pulseDot {







  0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.75); }







  50% { transform: scale(1.12); opacity: 0.9; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }







}







.live-dot {







  width: 9px;







  height: 9px;







  border-radius: 50%;







  background: #ffffff;







  display: inline-block;







  flex-shrink: 0;







  animation: pulseDot 2s infinite;







}















/* Topbar & Header */







.site-header {







  position: sticky;







  top: 0;







  z-index: 1100;







  background: rgba(255, 255, 255, 0.96);







  backdrop-filter: blur(14px);







  border-bottom: 1px solid rgba(226, 232, 240, 0.9);







  box-shadow: 0 4px 20px rgba(9, 27, 52, 0.06);







}







.topbar {







  background: linear-gradient(90deg, var(--navy-950) 0%, var(--navy-900) 100%);







  color: #cbd5e1;







  font-size: 12.5px;







  padding: 6px 0;







  border-bottom: 1px solid rgba(255, 255, 255, 0.08);







}







.topbar a { color: #ffffff; font-weight: 600; }







.topbar a:hover { color: #fcd34d; }







.topbar-inner {







  max-width: 1380px;







  display: flex;







  justify-content: space-between;







  align-items: center;







  gap: 12px;







  flex-wrap: nowrap;







}







.topbar-contact {







  display: flex;







  align-items: center;







  gap: 14px;







  flex-wrap: nowrap;







  white-space: nowrap;







}







.topbar-contact > span { white-space: nowrap; }







.topbar-badge {







  background: rgba(245, 158, 11, 0.18);







  color: #fde68a;







  border: 1px solid rgba(245, 158, 11, 0.35);







  padding: 2px 10px;







  border-radius: 999px;







  font-weight: 600;







  font-size: 11.5px;







  white-space: nowrap;







}







.lang-switcher { display: flex; gap: 5px; flex-wrap: nowrap; white-space: nowrap; flex-shrink: 0; }







.lang-pill {







  padding: 2px 9px;







  border-radius: 999px;







  background: rgba(255, 255, 255, 0.09);







  border: 1px solid rgba(255, 255, 255, 0.12);







  font-size: 11.5px;







  color: #f1f5f9 !important;







  font-weight: 500;







  white-space: nowrap;







}







.lang-pill.active-lang, .lang-pill:hover {







  background: var(--gold-600);







  border-color: var(--gold-500);







  color: #ffffff !important;







}















/* Main Desktop Navbar (Strictly Single-Line Horizontal Layout & Zero Hover Gap) */







.navbar { padding: 0; position: relative; }







.navbar-container { max-width: 1380px; }







.navbar-inner {







  min-height: 66px;







  display: flex;







  align-items: stretch;







  justify-content: space-between;







  gap: 14px;







  flex-wrap: nowrap;







}







.brand-logo { flex-shrink: 0; display: flex; align-items: center; padding: 8px 0; }







.brand-logo img { height: 46px; width: auto; display: block; }







.nav-list {







  list-style: none;







  display: flex;







  align-items: stretch;







  justify-content: center;







  gap: 4px;







  flex-wrap: nowrap;







  white-space: nowrap;







}







.nav-item {







  position: relative;







  flex-shrink: 0;







  display: flex;







  align-items: center;







}







.nav-item.has-mega { position: static; }







.nav-item > a {







  font-weight: 600;







  font-size: 14.5px;







  line-height: 1.25;







  color: var(--navy-900);







  padding: 9px 12px;







  border-radius: 8px;







  display: inline-flex;







  align-items: center;







  gap: 5px;







  white-space: nowrap;







}







.nav-item > a:hover, .nav-item.active > a, .nav-item.is-open > a {







  color: var(--primary);







  background: #f0f9ff;







}







.caret { font-size: 11px; opacity: 0.7; line-height: 1; }















/* Standard Dropdown (Zero Hover Dead-Zone) */







.dropdown-menu {







  display: none;







  position: absolute;







  top: 100%;







  left: 0;







  min-width: 240px;







  background: var(--white);







  border: 1px solid var(--border);







  border-top: 3px solid var(--gold-500);







  border-radius: 0 0 12px 12px;







  box-shadow: var(--shadow-lg);







  list-style: none;







  padding: 8px;







  z-index: 1200;







}







.dropdown-menu::before {







  content: "";







  position: absolute;







  top: -12px;







  left: 0;







  right: 0;







  height: 14px;







  background: transparent;







}







.nav-item.has-dropdown:hover .dropdown-menu,







.nav-item.has-dropdown:focus-within .dropdown-menu,







.nav-item.has-dropdown.is-open .dropdown-menu { display: block; }







.dropdown-menu li a {







  display: block;







  padding: 9px 12px;







  font-size: 14px;







  font-weight: 500;







  color: var(--text-body);







  border-radius: 8px;







  white-space: nowrap;







}







.dropdown-menu li a:hover { background: #f0f9ff; color: var(--primary); }















/* 4-Column Categorized Mega Menu (Zero Hover Dead-Zone + Diagonal Mouse Bridge) */







.mega-menu {







  display: none;







  position: absolute;







  top: 100%;







  left: 50%;







  transform: translateX(-50%);







  width: min(1260px, calc(100vw - 32px));







  background: var(--white);







  border: 1px solid var(--border);







  border-top: 3px solid var(--gold-500);







  border-radius: 0 0 18px 18px;







  box-shadow: 0 28px 60px rgba(5, 16, 32, 0.22);







  padding: 0;







  z-index: 1250;







  white-space: normal;







  overflow: visible;







}







.mega-menu::before {







  content: "";







  position: absolute;







  top: -14px;







  left: 0;







  right: 0;







  height: 16px;







  background: transparent;







}







.mega-menu-scroll {







  padding: 18px 22px 16px;







  max-height: calc(100vh - 108px);







  overflow-y: auto;







  border-radius: 0 0 18px 18px;







}







.nav-item.has-mega:hover .mega-menu,







.nav-item.has-mega:focus-within .mega-menu,







.nav-item.has-mega.is-open .mega-menu { display: block; }







.mega-menu-grid {







  display: grid;







  grid-template-columns: repeat(4, 1fr);







  gap: 16px;







}







.mega-col {







  background: #f8fafc;







  border: 1px solid #eef2f7;







  border-radius: 12px;







  padding: 12px 13px;







}







.mega-col-head {







  padding-bottom: 8px;







  margin-bottom: 8px;







  border-bottom: 1px solid var(--border);







}







.mega-col-head strong { display: block; font-size: 14px; color: var(--navy-900); }







.mega-col-head span { font-size: 11.5px; color: var(--text-muted); }







.mega-list { list-style: none; display: grid; gap: 2px; }







.mega-list li a {







  display: flex;







  align-items: center;







  justify-content: space-between;







  gap: 6px;







  padding: 5.5px 8px;







  font-size: 12.8px;







  line-height: 1.38;







  color: var(--text-body);







  border-radius: 7px;







  font-weight: 500;







}







.mega-list li a:hover {







  background: var(--white);







  color: var(--primary);







  box-shadow: 0 2px 6px rgba(9, 27, 52, 0.06);







  transform: translateX(2px);







}







.menu-hot-badge {







  background: #fef3c7;







  color: #b45309;







  border: 1px solid #fde68a;







  font-size: 10px;







  font-weight: 700;







  padding: 1px 6px;







  border-radius: 999px;







  flex-shrink: 0;







}







.mega-menu-footer {







  margin-top: 14px;







  padding-top: 12px;







  border-top: 1px solid var(--border);







  display: flex;







  align-items: center;







  justify-content: space-between;







  gap: 16px;







  font-size: 13px;







}







.mega-menu-footer strong { color: var(--navy-900); margin-right: 8px; }







.mega-menu-footer span { color: var(--text-muted); }







.mega-menu-footer-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }















/* Navbar Right CTA */







.nav-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; white-space: nowrap; }







.nav-tel-btn {







  display: inline-flex;







  align-items: center;







  gap: 6px;







  font-size: 13.5px;







  font-weight: 700;







  color: var(--navy-900);







  padding: 9px 14px;







  border-radius: 999px;







  background: #f1f5f9;







  border: 1px solid var(--border);







  white-space: nowrap;







  flex-shrink: 0;







}







.nav-tel-btn:hover { background: #e2e8f0; color: var(--navy-950); }















/* Buttons */







.btn {







  display: inline-flex;







  align-items: center;







  justify-content: center;







  gap: 9px;







  padding: 12px 22px;







  border-radius: 10px;







  font-weight: 700;







  font-size: 15px;







  cursor: pointer;







  line-height: 1.3;







  text-align: center;







  border: none;







  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;







}







.btn:hover { transform: translateY(-2px); }







.btn-lg { padding: 15px 26px; font-size: 16px; border-radius: 12px; }







.btn-block { display: flex; width: 100%; }







.btn-line, .btn-primary {







  background: linear-gradient(135deg, var(--line-green) 0%, var(--line-green-dark) 100%);







  color: #ffffff !important;







  box-shadow: 0 8px 22px rgba(6, 199, 85, 0.34);







}







.btn-line {







  padding: 10px 18px;







  font-size: 14px;







  border-radius: 999px;







  white-space: nowrap;







  flex-shrink: 0;







}







.btn-primary:hover, .btn-line:hover {







  background: linear-gradient(135deg, #07d65c 0%, #059669 100%);







  box-shadow: 0 12px 28px rgba(6, 199, 85, 0.46);







  color: #ffffff !important;







}







.btn-outline {







  border: 1.5px solid rgba(255, 255, 255, 0.38);







  color: #ffffff !important;







  background: rgba(255, 255, 255, 0.08);







  backdrop-filter: blur(6px);







}







.btn-outline:hover {







  background: rgba(255, 255, 255, 0.18);







  border-color: #ffffff;







  color: #ffffff !important;







}







.btn-navy-outline {







  border: 1.5px solid var(--navy-800);







  color: var(--navy-900) !important;







  background: var(--white);







  padding: 11px 20px;







  font-size: 14.5px;







}







.btn-navy-outline:hover {







  background: var(--navy-900);







  color: #ffffff !important;







}







.btn-sm-gold {







  padding: 8px 14px;







  font-size: 13px;







  border-radius: 8px;







  background: #fef3c7;







  color: #92400e !important;







  border: 1px solid #fcd34d;







  white-space: nowrap;







}







.btn-sm-line {







  padding: 8px 16px;







  font-size: 13px;







  border-radius: 8px;







  background: var(--line-green);







  color: #ffffff !important;







  white-space: nowrap;







}















/* Mobile Slide-Over Navigation Drawer (Hidden on Desktop) */







.mob-nav-checkbox {
  position: fixed !important;
  opacity: 0 !important;
  pointer-events: none !important;
  top: -100px !important;
  left: -100px !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (min-width: 1091px) {
  .mob-nav-checkbox,
  .mob-header-actions,
  .mob-menu-trigger,
  .mob-backdrop,
  .mob-drawer,
  .mob-nav-drawer {
    display: none !important;
  }
}















/* Executive Hero & Inner Page Hero */







.hero-section, .page-hero {







  position: relative;







  overflow: hidden;







  background:







    radial-gradient(circle at 14% 18%, rgba(2, 132, 199, 0.32), transparent 44%),







    radial-gradient(circle at 86% 22%, rgba(245, 158, 11, 0.18), transparent 40%),







    linear-gradient(135deg, var(--navy-950) 0%, var(--navy-900) 55%, #0c3559 100%);







  color: var(--white);







  padding: 64px 0 68px;







}







.hero-bg-glow {







  position: absolute;







  inset: 0;







  background-image:







    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),







    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);







  background-size: 44px 44px;







  pointer-events: none;







}







.hero-section .container, .page-hero .container { position: relative; z-index: 2; }







.hero-grid {







  display: grid;







  grid-template-columns: 1.32fr 0.98fr;







  gap: 40px;







  align-items: center;







}







.trust-pill {







  display: inline-flex;







  align-items: center;







  gap: 8px;







  background: rgba(245, 158, 11, 0.14);







  border: 1px solid rgba(251, 191, 36, 0.42);







  color: #fde68a;







  padding: 7px 16px;







  border-radius: 999px;







  font-size: 13px;







  font-weight: 600;







  margin-bottom: 18px;







}







.gold-dot { color: #fbbf24; font-size: 14px; }







.hero-section h1, .page-hero h1 {







  color: #ffffff;







  font-size: clamp(26px, 3.2vw, 38px);







  line-height: 1.28;







  font-weight: 700;







  margin-bottom: 18px;







}







.post-meta-date { font-size: 13.5px; color: #bae6fd; margin-bottom: 14px; font-weight: 500; }







.aeo-direct-answer {







  font-size: 15.5px;







  line-height: 1.72;







  color: #e2e8f0;







  margin-bottom: 24px;







  background: rgba(15, 23, 42, 0.48);







  border: 1px solid rgba(148, 163, 184, 0.24);







  border-left: 4px solid #fbbf24;







  padding: 16px 20px;







  border-radius: 12px;







}







.aeo-direct-answer strong { color: #ffffff; }







.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }







.hero-guarantees {







  display: flex;







  flex-wrap: wrap;







  gap: 16px;







  font-size: 13px;







  color: #a7f3d0;







  font-weight: 500;







  margin-bottom: 26px;







}







.hero-metrics {







  display: grid;







  grid-template-columns: repeat(4, 1fr);







  gap: 12px;







}







.metric-box {







  background: rgba(255, 255, 255, 0.07);







  border: 1px solid rgba(255, 255, 255, 0.14);







  padding: 14px 10px;







  border-radius: 12px;







  text-align: center;







  backdrop-filter: blur(8px);







}







.metric-box strong {







  display: block;







  font-size: 23px;







  font-weight: 800;







  color: #fcd34d;







  line-height: 1.2;







  margin-bottom: 3px;







}







.metric-box span { font-size: 12px; color: #cbd5e1; display: block; line-height: 1.35; }















/* Right-Side Fast-Track Concierge Card */







.hero-card {







  background: var(--white);







  color: var(--text-main);







  padding: 26px 24px 22px;







  border-radius: 20px;







  border: 1px solid rgba(251, 191, 36, 0.35);







  box-shadow: 0 28px 60px rgba(3, 10, 24, 0.42);







  position: relative;







}







.hero-card-ribbon {







  display: inline-block;







  background: linear-gradient(90deg, #fef3c7 0%, #fde68a 100%);







  color: #92400e;







  font-size: 11.5px;







  font-weight: 700;







  padding: 4px 12px;







  border-radius: 999px;







  margin-bottom: 10px;







  border: 1px solid #fcd34d;







}







.hero-card h2 { font-size: 20px; color: var(--navy-900); margin-bottom: 4px; line-height: 1.3; }







.hero-card-sub { font-size: 13.5px; color: var(--text-muted); margin-bottom: 14px; }







.quick-service-list { list-style: none; display: grid; gap: 7px; margin-bottom: 16px; }







.quick-service-list a {







  display: flex;







  align-items: center;







  justify-content: space-between;







  gap: 8px;







  padding: 9px 12px;







  background: #f8fafc;







  border: 1px solid var(--border);







  border-radius: 10px;







  font-weight: 600;







  font-size: 13.5px;







  color: var(--navy-900);







}







.quick-service-list a:hover {







  border-color: var(--primary-bright);







  background: #f0f9ff;







  transform: translateX(3px);







}







.qs-title { line-height: 1.35; }







.qs-tag {







  font-size: 11px;







  font-weight: 700;







  padding: 3px 8px;







  border-radius: 999px;







  white-space: nowrap;







  flex-shrink: 0;







}







.qs-gold { background: #fef3c7; color: #92400e; }







.qs-green { background: #dcfce7; color: #166534; }







.qs-blue { background: #e0f2fe; color: #075985; }







.qs-hot { background: #fee2e2; color: #991b1b; }















.hero-qr-strip {







  display: flex;







  align-items: center;







  gap: 14px;







  padding: 12px 14px;







  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);







  border: 1px solid #bbf7d0;







  border-radius: 12px;







}







.hero-qr-strip img { border-radius: 8px; border: 1px solid #dcfce7; background: #fff; flex-shrink: 0; }







.hero-qr-info { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }







.hero-qr-info strong { color: #065f46; font-size: 15px; }







.hero-qr-info span { color: #047857; }







.hero-qr-tel { font-weight: 700; color: var(--navy-900); margin-top: 2px; }















/* Immediate Executive Social Proof Strip */







.trust-strip-section {







  background: var(--white);







  border-bottom: 1px solid var(--border);







  padding: 24px 0 28px;







}







.trust-strip-head {







  display: flex;







  justify-content: space-between;







  align-items: center;







  flex-wrap: wrap;







  gap: 10px;







  margin-bottom: 16px;







  font-size: 13.5px;







  font-weight: 600;







  color: var(--text-muted);







}







.trust-strip-head a { font-weight: 700; color: var(--primary); }







.trust-strip-grid {







  display: grid;







  grid-template-columns: repeat(12, 1fr);







  gap: 10px;







  align-items: center;







}







.trust-strip-logo {







  background: #ffffff;







  border: 1px solid #eef2f7;







  border-radius: 10px;







  padding: 8px;







  height: 60px;







  display: flex;







  align-items: center;







  justify-content: center;







  transition: transform 0.18s ease, border-color 0.18s ease;







}







.trust-strip-logo:hover { transform: translateY(-2px); border-color: var(--border-strong); }







.trust-strip-logo img { max-height: 42px; max-width: 100%; object-fit: contain; }















/* General Section Styling */







.section { padding: 72px 0; }







.section:nth-of-type(even) { background: var(--bg-page); }







.section-header-center { max-width: 820px; margin: 0 auto 40px; text-align: center; }







.section-header-flex {







  display: flex;







  justify-content: space-between;







  align-items: flex-end;







  gap: 20px;







  flex-wrap: wrap;







}







.section-badge {







  display: inline-block;







  background: #e0f2fe;







  color: #0369a1;







  border: 1px solid #bae6fd;







  font-size: 12px;







  font-weight: 700;







  padding: 5px 14px;







  border-radius: 999px;







  margin-bottom: 12px;







  letter-spacing: 0.04em;







  text-transform: uppercase;







}







.section h2 {







  font-size: clamp(23px, 2.5vw, 32px);







  color: var(--navy-900);







  line-height: 1.32;







  margin-bottom: 12px;







}







.section-lead { color: var(--text-muted); font-size: 16.5px; line-height: 1.65; }















/* Pain vs Solution Comparison Section */







.pain-solution-section { background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important; }







.pain-solution-grid {







  display: grid;







  grid-template-columns: 1fr 1.12fr;







  gap: 28px;







  align-items: stretch;







}







.ps-card {







  border-radius: var(--radius-lg);







  padding: 30px 28px;







  display: flex;







  flex-direction: column;







  justify-content: flex-start;







}







.ps-pain {







  background: #fffafa;







  border: 1px solid #fecaca;







}







.ps-solution {







  background: linear-gradient(160deg, #ffffff 0%, #f0fdf4 100%);







  border: 2px solid #22c55e;







  box-shadow: 0 20px 44px rgba(22, 163, 74, 0.1);







}







.ps-card-head {







  display: flex;







  align-items: center;







  gap: 14px;







  padding-bottom: 18px;







  margin-bottom: 18px;







  border-bottom: 1px solid rgba(148, 163, 184, 0.22);







}







.ps-card-head strong { display: block; font-size: 18px; line-height: 1.35; }







.ps-card-head span { font-size: 13px; color: var(--text-muted); }







.ps-icon-bad, .ps-icon-good {







  width: 42px;







  height: 42px;







  border-radius: 12px;







  display: flex;







  align-items: center;







  justify-content: center;







  font-weight: 800;







  font-size: 18px;







  flex-shrink: 0;







}







.ps-icon-bad { background: #fee2e2; color: #dc2626; }







.ps-icon-good { background: #dcfce7; color: #15803d; }







.ps-list { list-style: none; display: grid; gap: 13px; font-size: 15px; }







.ps-list li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.58; }







.ps-pain .ps-list li > span { color: #dc2626; font-weight: 800; flex-shrink: 0; }







.ps-solution .ps-list li > span { color: #16a34a; font-weight: 800; flex-shrink: 0; }







.ps-cta-row {







  margin-top: auto;







  padding-top: 24px;







  padding-top: 18px;







  border-top: 1px dashed #86efac;







  display: flex;







  align-items: center;







  gap: 14px;







  flex-wrap: wrap;







}







.ps-note { font-size: 13px; color: #15803d; font-weight: 600; }















/* Service Cards (Buyable Package Aesthetic) */







.service-grid {







  display: grid;







  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));







  gap: 24px;







}







.service-card {







  background: var(--white);







  border: 1px solid var(--border);







  border-radius: var(--radius-lg);







  padding: 24px;







  display: flex;







  flex-direction: column;







  justify-content: space-between;







  box-shadow: var(--shadow-sm);







  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;







  position: relative;







  overflow: hidden;







}







.service-card::before {







  content: "";







  position: absolute;







  top: 0;







  left: 0;







  right: 0;







  height: 4px;







  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-bright) 100%);







}







.service-card-featured {







  border-color: #93c5fd;







  box-shadow: 0 10px 28px rgba(13, 75, 122, 0.09);







}







.service-card-featured::before {







  background: linear-gradient(90deg, var(--gold-500) 0%, var(--line-green) 100%);







}







.service-card:hover {







  transform: translateY(-5px);







  box-shadow: var(--shadow-md);







  border-color: var(--primary-bright);







}







.service-card-top {







  display: flex;







  justify-content: space-between;







  align-items: flex-start;







  gap: 10px;







  margin-bottom: 16px;







}







.service-icon-box {







  width: 60px;







  height: 60px;







  border-radius: 14px;







  background: #f8fafc;







  border: 1px solid #eef2f7;







  padding: 6px;







  display: flex;







  align-items: center;







  justify-content: center;







  flex-shrink: 0;







}







.service-icon-box img { max-width: 100%; max-height: 100%; object-fit: contain; }







.service-badge {







  background: #ecfdf5;







  color: #047857;







  border: 1px solid #a7f3d0;







  font-size: 11.5px;







  font-weight: 700;







  padding: 4px 10px;







  border-radius: 999px;







  line-height: 1.3;







}







.service-card h3 { font-size: 18.5px; margin-bottom: 10px; line-height: 1.38; }







.service-card h3 a { color: var(--navy-900); }







.service-card h3 a:hover { color: var(--primary-bright); }







.service-card p { font-size: 14px; color: var(--text-muted); margin-bottom: 16px; line-height: 1.62; }







.service-highlights { list-style: none; font-size: 13.5px; margin-bottom: 20px; display: grid; gap: 7px; color: var(--text-body); }







.service-highlights li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; }







.check-circle {







  width: 18px;







  height: 18px;







  border-radius: 50%;







  background: #dcfce7;







  color: #15803d;







  font-size: 11px;







  font-weight: 800;







  display: inline-flex;







  align-items: center;







  justify-content: center;







  flex-shrink: 0;







  margin-top: 2px;







}







.service-card-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid #f1f5f9; }







.service-cta-btn {







  display: flex;







  align-items: center;







  justify-content: space-between;







  width: 100%;







  padding: 10px 14px;







  border-radius: 10px;







  background: #f0f9ff;







  color: var(--primary) !important;







  font-weight: 700;







  font-size: 14px;







}







.service-card:hover .service-cta-btn {







  background: var(--navy-900);







  color: #ffffff !important;







}















/* Complete 28-Service Directory Pills */







.complete-menu-catalog {







  margin-top: 44px;







  padding: 28px;







  background: var(--white);







  border-radius: var(--radius-lg);







  border: 1px solid var(--border);







  box-shadow: var(--shadow-sm);







}







.catalog-head { margin-bottom: 18px; }







.catalog-head h3 { font-size: 19px; color: var(--navy-900); margin-bottom: 4px; }







.catalog-head span { font-size: 13.5px; color: var(--text-muted); }







.catalog-pills { display: flex; flex-wrap: wrap; gap: 9px; }







.catalog-pill {







  padding: 8px 15px;







  background: #f8fafc;







  border: 1px solid var(--border);







  border-radius: 999px;







  font-size: 13.5px;







  font-weight: 600;







  color: var(--text-body);







}







.catalog-pill:hover {







  background: var(--navy-900);







  border-color: var(--navy-900);







  color: #ffffff !important;







  transform: translateY(-1px);







}















/* 4-Step Fast-Track Workflow Timeline */







.workflow-section {







  background: linear-gradient(135deg, var(--navy-950) 0%, var(--navy-900) 100%) !important;







  color: var(--white);







}







.workflow-section h2 { color: #ffffff; }







.workflow-section .section-lead { color: #cbd5e1; }







.workflow-section .section-badge {







  background: rgba(245, 158, 11, 0.18);







  color: #fde68a;







  border-color: rgba(251, 191, 36, 0.35);







}







.workflow-grid {







  display: grid;







  grid-template-columns: repeat(4, 1fr);







  gap: 22px;







}







.workflow-step {







  background: rgba(255, 255, 255, 0.06);







  border: 1px solid rgba(255, 255, 255, 0.14);







  border-radius: 16px;







  padding: 26px 22px;







  position: relative;







}







.workflow-step .step-num,

.step-num {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 48px;

  height: 48px;

  border-radius: 12px;

  background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-600) 100%);

  color: #ffffff !important;

  font-weight: 800 !important;

  font-size: 18px !important;

  line-height: 1 !important;

  margin-bottom: 16px;

  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.35);

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);

}







.workflow-step h3 { color: #ffffff; font-size: 18px; margin-bottom: 8px; }







.workflow-step p { color: #cbd5e1; font-size: 14px; line-height: 1.65; }







.workflow-step strong { color: #86efac; }















/* Tables */







.table-responsive {







  overflow-x: auto;







  margin: 18px 0;







  border-radius: 14px;







  border: 1px solid var(--border);







  box-shadow: var(--shadow-sm);







  background: var(--white);







}







.comparison-table, .prose table { width: 100%; border-collapse: collapse; min-width: 640px; }







.comparison-table th, .comparison-table td, .prose table th, .prose table td {







  padding: 15px 18px;







  border-bottom: 1px solid var(--border);







  text-align: left;







  font-size: 14.5px;







  vertical-align: middle;







}







.comparison-table th, .prose table th {







  background: var(--navy-900);







  color: var(--white);







  font-weight: 700;







  font-size: 14px;







}







.comparison-table tr:nth-child(even), .prose table tr:nth-child(even) { background: #f8fafc; }







.comparison-table tr:hover { background: #f0f9ff; }







.sla-pill {







  display: inline-block;







  background: #eff6ff;







  color: #1d4ed8;







  font-weight: 700;







  font-size: 13px;







  padding: 4px 10px;







  border-radius: 999px;







  white-space: nowrap;







}







.guarantee-pill {







  display: inline-block;







  background: #fef3c7;







  color: #92400e;







  font-weight: 700;







  font-size: 13px;







  padding: 4px 12px;







  border-radius: 999px;







  white-space: nowrap;







}















/* Blog Cards */







.blog-grid {







  display: grid;







  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));







  gap: 26px;







}







.blog-card {







  background: var(--white);







  border: 1px solid var(--border);







  border-radius: 16px;







  overflow: hidden;







  display: flex;







  flex-direction: column;







  box-shadow: var(--shadow-sm);







  transition: transform 0.2s ease, box-shadow 0.2s ease;







}







.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }







.blog-card-img { display: block; overflow: hidden; background: #f1f5f9; }







.blog-card-img img {







  width: 100%;







  height: 205px;







  object-fit: cover;







  display: block;







  transition: transform 0.35s ease;







}







.blog-card:hover .blog-card-img img { transform: scale(1.04); }







.blog-card-body {







  padding: 20px 22px 24px;







  display: flex;







  flex-direction: column;







  justify-content: space-between;







  flex: 1;







}







.blog-date { font-size: 12.5px; color: var(--text-muted); font-weight: 600; display: block; margin-bottom: 8px; }







.blog-card h3 { font-size: 18px; line-height: 1.42; margin-bottom: 10px; }







.blog-card h3 a { color: var(--navy-900); }







.blog-card p { font-size: 14px; color: var(--text-muted); margin-bottom: 16px; line-height: 1.6; }







.service-link { font-weight: 700; font-size: 14px; color: var(--primary); display: inline-flex; align-items: center; gap: 4px; }















/* Multilingual Hub Cards */







.lang-hub-grid {







  display: grid;







  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));







  gap: 18px;







}







.lang-hub-card {







  display: block;







  padding: 22px 24px;







  background: var(--white);







  border: 1px solid var(--border);







  border-radius: 14px;







  box-shadow: var(--shadow-sm);







  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;







}







.lang-hub-card:hover {







  transform: translateY(-3px);







  border-color: var(--primary-bright);







  box-shadow: var(--shadow-md);







}







.lang-hub-card strong { display: block; font-size: 17.5px; color: var(--navy-900); margin-bottom: 5px; }







.lang-hub-card span { font-size: 14px; color: var(--text-muted); display: block; }















/* Client Logos Showcase */







.client-logo-grid {







  display: grid;







  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));







  gap: 16px;







}







.client-logo-card {







  background: var(--white);







  border: 1px solid var(--border);







  border-radius: 12px;







  padding: 16px 12px;







  text-align: center;







  display: flex;







  flex-direction: column;







  align-items: center;







  justify-content: center;







  gap: 10px;







  transition: transform 0.18s ease, box-shadow 0.18s ease;







}







.client-logo-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }







.client-logo-card img { max-height: 54px; width: auto; object-fit: contain; }







.client-logo-card span { font-size: 12px; color: var(--text-muted); line-height: 1.35; font-weight: 500; }















/* Inner Content Layout & Sticky Concierge Sidebar */







.breadcrumb { font-size: 13.5px; margin-bottom: 14px; color: #cbd5e1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }







.breadcrumb a { color: #7dd3fc; font-weight: 500; }







.content-layout {







  display: grid;







  grid-template-columns: minmax(0, 2.25fr) minmax(300px, 1fr);







  gap: 34px;







  align-items: start;







}







.content-main {







  background: var(--white);







  padding: 36px;







  border: 1px solid var(--border);







  border-radius: var(--radius-lg);







  box-shadow: var(--shadow-sm);







  overflow: hidden;







}







.page-featured-img { margin-bottom: 26px; text-align: center; }







.page-featured-img img { max-width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--border); }







.article-lang-bar {







  display: flex;







  flex-wrap: wrap;







  align-items: center;







  gap: 8px;







  padding: 13px 16px;







  background: #f0f9ff;







  border: 1px solid #bae6fd;







  border-radius: 12px;







  margin-bottom: 24px;







  font-size: 13.5px;







  font-weight: 600;







}







.article-lang-pill {







  padding: 5px 12px;







  border-radius: 999px;







  background: var(--white);







  border: 1px solid var(--border);







  font-weight: 600;







  font-size: 13px;







  color: var(--navy-900);







}







.article-lang-pill.active, .article-lang-pill:hover {







  background: var(--navy-900);







  color: #ffffff !important;







  border-color: var(--navy-900);







}















.prose { font-size: 16.5px; line-height: 1.8; color: var(--text-body); }







.prose h2, .prose h3, .prose h4 { color: var(--navy-900); margin: 28px 0 12px; line-height: 1.36; }







.prose h2 {







  font-size: 23px;







  padding-bottom: 8px;







  border-bottom: 2px solid #f1f5f9;







}







.prose h3 { font-size: 19.5px; }







.prose p { margin-bottom: 16px; }







.prose ul, .prose ol { margin: 0 0 20px 24px; }







.prose li { margin-bottom: 8px; }







.prose img { max-width: 100%; height: auto; border-radius: 12px; margin: 16px 0; border: 1px solid var(--border); }















.info-highlight-box {







  background: linear-gradient(135deg, #f0f9ff 0%, #f8fafc 100%);







  border: 1px solid #bae6fd;







  border-left: 5px solid var(--primary-bright);







  padding: 24px;







  border-radius: 14px;







  margin-bottom: 28px;







}







.info-highlight-box h2 { font-size: 20px; margin-bottom: 14px; color: var(--navy-900); }







.info-highlight-box p { margin-bottom: 12px; color: var(--text-body); line-height: 1.75; }







.info-highlight-box ul { padding-left: 20px; display: grid; gap: 9px; }















/* Certificate Showcase Cards (e.g. /สิทธิบัตร/) */







.cert-showcase-grid {







  display: grid;







  grid-template-columns: repeat(3, 1fr);







  gap: 20px;







  margin: 24px 0 30px;







}







.cert-card {







  background: var(--white);







  border: 1px solid var(--border);







  border-radius: 16px;







  overflow: hidden;







  display: flex;







  flex-direction: column;







  box-shadow: var(--shadow-sm);







  transition: transform 0.2s ease, box-shadow 0.2s ease;







}







.cert-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }







.cert-card-img {







  position: relative;







  display: flex;







  align-items: center;







  justify-content: center;







  background: #f8fafc;







  padding: 16px;







  border-bottom: 1px solid var(--border);







}







.cert-card-img img {







  max-height: 340px;







  width: auto;







  max-width: 100%;







  object-fit: contain;







  border-radius: 8px;







  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);







  margin: 0 !important;







}







.cert-zoom-pill {







  position: absolute;







  bottom: 12px;







  right: 12px;







  background: rgba(5, 16, 32, 0.85);







  color: #ffffff;







  font-size: 11.5px;







  font-weight: 600;







  padding: 4px 10px;







  border-radius: 999px;







}







.cert-card-body { padding: 18px 18px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }







.cert-card-body h3 { font-size: 16.5px; line-height: 1.4; color: var(--navy-900); margin: 0; }







.cert-card-body p { font-size: 14px; color: var(--text-body); line-height: 1.65; margin: 0; }







.cert-card-body ul { padding-left: 18px; margin: 4px 0 0; font-size: 13.5px; color: var(--text-muted); display: grid; gap: 6px; }















/* WordPress Extracted Media, Galleries, Showcases, Info-Boxes, PDFs & Videos */







.wp-media-figure {







  margin: 20px auto;







  text-align: center;







}







.wp-media-figure img {







  max-width: 100%;







  max-height: 620px;







  width: auto;







  height: auto;







  border-radius: 12px;







  border: 1px solid var(--border);







  box-shadow: var(--shadow-sm);







  margin: 0 auto !important;







}







.wp-media-figure figcaption {







  font-size: 13.5px;







  color: var(--text-muted);







  margin-top: 8px;







}







.wp-showcase-block { margin: 28px 0; }







.wp-showcase-block h3 { font-size: 20px; color: var(--navy-900); margin-bottom: 14px; }







.wp-gallery-grid {







  display: grid;







  grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));







  gap: 16px;







  margin: 20px 0 28px;







}







.wp-gallery-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }







.wp-gallery-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }







.wp-gallery-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Service Process Ribbon - 6 circular badges horizontal ribbon matching authentic design (File 1) */
.service-process-ribbon {
  background: linear-gradient(135deg, #007e8c 0%, #0093a2 50%, #006b77 100%);
  border-radius: 16px;
  padding: 24px 20px;
  margin: 24px 0 32px 0;
  box-shadow: 0 10px 30px rgba(0, 126, 140, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-sizing: border-box;
}
.service-process-ribbon .process-ribbon-track {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  align-items: center;
  justify-items: center;
}
.service-process-ribbon .wp-media-figure {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100%;
  max-width: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.service-process-ribbon .wp-media-figure a {
  display: block;
  width: 100%;
  line-height: 0;
  text-decoration: none;
}
.service-process-ribbon .wp-media-figure img,
.prose .service-process-ribbon img,
.prose .service-process-ribbon .wp-media-figure img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  border: none !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: block !important;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.18)) !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease !important;
}
.service-process-ribbon .wp-media-figure a:hover img {
  transform: translateY(-5px) scale(1.06) !important;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.3)) !important;
}
@media (max-width: 991px) {
  .service-process-ribbon {
    padding: 16px 14px;
  }
  .service-process-ribbon .process-ribbon-track {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 12px;
    justify-content: flex-start;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.4) transparent;
  }
  .service-process-ribbon .process-ribbon-track::-webkit-scrollbar {
    height: 5px;
  }
  .service-process-ribbon .process-ribbon-track::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.4);
    border-radius: 999px;
  }
  .service-process-ribbon .wp-media-figure {
    flex: 0 0 120px;
    max-width: 120px;
  }
}
@media (max-width: 575px) {
  .service-process-ribbon .wp-media-figure {
    flex: 0 0 105px;
    max-width: 105px;
  }
}







.wp-gallery-item {







  background: #f8fafc;







  border: 1px solid var(--border);







  border-radius: 12px;







  padding: 12px;







  text-align: center;







  display: flex;







  flex-direction: column;







  justify-content: space-between;







  gap: 8px;







  margin: 0;







  transition: transform 0.18s ease, box-shadow 0.18s ease;







}







.wp-gallery-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); background: #ffffff; }







.wp-gallery-item img {







  max-height: 220px;







  width: auto;







  max-width: 100%;







  object-fit: contain;







  margin: 0 auto !important;







  border-radius: 8px;







  border: none !important;







}







.wp-gallery-item figcaption { font-size: 12.5px; font-weight: 600; color: var(--navy-900); line-height: 1.4; }















.wp-carousel-grid {







  display: grid;







  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));







  gap: 14px;







  align-items: center;







  margin: 22px 0;







}







.wp-carousel-grid .wp-media-figure {







  margin: 0;







  background: #f8fafc;







  border: 1px solid var(--border);







  border-radius: 12px;







  padding: 12px;







}







.wp-carousel-grid .wp-media-figure img {







  max-height: 150px;







  border: none;







  box-shadow: none;







}















.wp-info-box-grid {







  display: grid;







  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));







  gap: 18px;







  margin: 24px 0;







}







.wp-info-box {







  background: #f8fafc;







  border: 1px solid var(--border);







  border-radius: 14px;







  padding: 18px 20px;







  display: flex;







  align-items: flex-start;







  gap: 16px;







  margin-bottom: 14px;







  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;







}







.wp-info-box-grid .wp-info-box { margin-bottom: 0; flex-direction: column; align-items: center; text-align: center; }







.wp-info-box:hover { background: #ffffff; border-color: var(--primary-bright); transform: translateY(-2px); box-shadow: var(--shadow-sm); }







.wp-info-icon img { width: 68px; height: 68px; object-fit: contain; margin: 0 !important; border: none !important; background: var(--navy-900); padding: 10px; border-radius: 14px !important; }







.wp-info-body h3 { font-size: 17px; margin: 0 0 6px !important; color: var(--navy-900); }







.wp-info-body p { font-size: 14.5px; margin: 0 0 8px !important; color: var(--text-muted); }















.wp-pdf-card {







  background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);







  border: 1px solid #93c5fd;







  border-radius: 14px;







  padding: 20px 24px;







  margin: 22px 0;







  display: flex;







  flex-wrap: wrap;







  justify-content: space-between;







  align-items: center;







  gap: 16px;







}







.wp-pdf-info strong { display: block; font-size: 17px; color: var(--navy-900); margin-bottom: 4px; }







.wp-pdf-info span { font-size: 13.5px; color: var(--text-muted); }







.wp-pdf-actions { display: flex; flex-wrap: wrap; gap: 10px; }















.wp-video-card {







  display: block;







  position: relative;







  max-width: 640px;







  margin: 20px auto;







  border-radius: 14px;







  overflow: hidden;







  border: 1px solid var(--border);







  box-shadow: var(--shadow-sm);







}







.wp-video-card img { width: 100%; height: auto; display: block; margin: 0 !important; border: none !important; }







.wp-video-play {







  display: block;







  background: var(--navy-900);







  color: #ffffff;







  text-align: center;







  padding: 10px 16px;







  font-weight: 700;







  font-size: 14px;







}







.wp-video-card:hover .wp-video-play { background: var(--primary-bright); }















.wp-price-card {







  border: 1px solid var(--border);







  border-radius: 16px;







  overflow: hidden;







  margin: 20px 0;







  background: var(--white);







  box-shadow: var(--shadow-sm);







}







.wp-price-head {







  background: var(--navy-900);







  color: #ffffff;







  padding: 18px 22px;







  display: flex;







  justify-content: space-between;







  align-items: center;







  gap: 12px;







}







.wp-price-head h3 { color: #ffffff !important; margin: 0 !important; font-size: 18px; }







.wp-price-head strong { color: #fde68a; font-size: 22px; font-weight: 800; }







.wp-price-body { padding: 20px 24px; }















.wp-tab-section { margin: 28px 0; }







.wp-tab-heading {







  background: #f1f5f9;







  padding: 10px 16px;







  border-left: 4px solid var(--navy-900);







  border-radius: 8px;







  margin-bottom: 16px !important;







}







.wp-tab-logos {







  display: grid;







  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));







  gap: 14px;







  align-items: center;







}







.wp-tab-logos img {







  max-height: 82px;







  width: auto;







  margin: 0 auto !important;







  padding: 10px;







  background: #ffffff;







  border: 1px solid var(--border);







  border-radius: 10px;







  object-fit: contain;







}







.wp-check-list { list-style: none !important; margin-left: 0 !important; padding-left: 0 !important; display: grid; gap: 10px; }







.wp-check-list li {







  position: relative;







  padding: 10px 14px 10px 38px;







  background: #f8fafc;







  border: 1px solid var(--border);







  border-radius: 10px;







  margin-bottom: 0 !important;







}







.wp-check-list li::before {







  content: "✓";







  position: absolute;







  left: 14px;







  top: 10px;







  color: var(--line-green-dark);







  font-weight: 800;







}







.wp-map-embed { margin: 22px 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-sm); }







.wp-btn-wrap { margin: 18px 0; }















/* Inline End-of-Article Conversion Card */







.inline-conversion-card {







  margin-top: 36px;







  padding: 28px;







  border-radius: 16px;







  background: linear-gradient(135deg, var(--navy-950) 0%, var(--navy-800) 100%);







  color: #ffffff;







  display: grid;







  grid-template-columns: 1.5fr 1fr;







  gap: 24px;







  align-items: center;







}







/* Section Pills & Badges (WCAG AAA Contrast Optimization) */
/* Light / White Backgrounds: Rich warm amber text on soft amber badge (#92400e on #fef3c7) */
.gold-pill,
.trust-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fef3c7 !important;
  border: 1px solid #fcd34d !important;
  color: #92400e !important;
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 3px rgba(217, 119, 6, 0.08);
  line-height: 1.4;
  white-space: normal;
  text-align: left;
}

/* Dark Background Overrides - Preserves high-contrast bright gold text on dark backgrounds (User Attachment 2) */
.hero-section .gold-pill,
.page-hero .gold-pill,
.prep-hero .gold-pill,
.closing-cta-banner .gold-pill,
.closing-cta-copy .gold-pill,
.closing-cta .gold-pill,
.line-carousel-section .gold-pill,
.line-advanced-api-box .gold-pill,
.line-final-cta-section .gold-pill,
.line-final-cta-strip .gold-pill,
.final-cta-text .gold-pill,
.portfolio-inquiry-box .gold-pill,
.portfolio-inquiry-content .gold-pill,
.inline-conversion-card .gold-pill,
.inline-conv-text .gold-pill,
.inner-workflow-ribbon .gold-pill,
.ie-specialties-banner .gold-pill,
.workflow-section .gold-pill,
.dark-section .gold-pill,
.bg-dark .gold-pill,
.site-footer .gold-pill,
[data-theme="dark"] .gold-pill {
  background: rgba(245, 158, 11, 0.18) !important;
  border: 1px solid rgba(251, 191, 36, 0.45) !important;
  color: #fde68a !important;
  box-shadow: none !important;
}

/* White cards inside dark sections must stay light badges */
.consultation-form-card .gold-pill,
.cf-card-header .gold-pill,
.white-card .gold-pill,
.bg-white .gold-pill {
  background: #fef3c7 !important;
  border: 1px solid #fcd34d !important;
  color: #92400e !important;
}







.inline-conv-text h3 { color: #ffffff; font-size: 20px; line-height: 1.38; margin-bottom: 8px; }







.inline-conv-text p { color: #cbd5e1; font-size: 14.5px; line-height: 1.6; }







.inline-conv-text strong { color: #86efac; }







.inline-conv-actions { display: grid; gap: 10px; }







.inline-conv-actions .btn-navy-outline {







  background: rgba(255, 255, 255, 0.1);







  border-color: rgba(255, 255, 255, 0.35);







  color: #ffffff !important;







}















/* Sticky Sidebar */







.content-sidebar { position: sticky; top: 94px; display: grid; gap: 22px; }







.sidebar-concierge-card {







  background: linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 100%);







  color: #ffffff;







  border-radius: var(--radius-lg);







  padding: 26px 22px;







  box-shadow: var(--shadow-md);







  border: 1px solid rgba(251, 191, 36, 0.3);







  text-align: center;







}







.concierge-badge {







  display: inline-block;







  background: rgba(6, 199, 85, 0.16);







  color: #86efac;







  border: 1px solid rgba(6, 199, 85, 0.35);







  font-size: 12px;







  font-weight: 700;







  padding: 4px 12px;







  border-radius: 999px;







  margin-bottom: 12px;







}







.sidebar-concierge-card h3 { color: #ffffff; font-size: 20px; margin-bottom: 6px; }







.concierge-sub { font-size: 13.5px; color: #cbd5e1; margin-bottom: 16px; }







.concierge-qr {







  background: #ffffff;







  padding: 10px;







  border-radius: 12px;







  display: inline-block;







  margin-bottom: 14px;







}







.concierge-qr img { display: block; border-radius: 6px; }







.concierge-tel-btn {







  display: block;







  margin-top: 10px;







  padding: 11px;







  border-radius: 10px;







  background: rgba(255, 255, 255, 0.1);







  border: 1px solid rgba(255, 255, 255, 0.24);







  color: #ffffff !important;







  font-weight: 700;







  font-size: 14.5px;







}







.concierge-tel-btn:hover { background: rgba(255, 255, 255, 0.2); }







.concierge-trust-list {







  list-style: none;







  text-align: left;







  margin-top: 18px;







  padding-top: 16px;







  border-top: 1px solid rgba(255, 255, 255, 0.12);







  font-size: 12.5px;







  color: #cbd5e1;







  display: grid;







  gap: 7px;







}







.concierge-trust-list a { color: #7dd3fc; font-weight: 600; }















.sidebar-card {







  background: var(--white);







  border: 1px solid var(--border);







  border-radius: var(--radius-lg);







  padding: 22px;







  box-shadow: var(--shadow-sm);







}







.sidebar-card h3 { font-size: 17.5px; margin-bottom: 14px; color: var(--navy-900); }







.sidebar-links { list-style: none; display: grid; gap: 6px; }







.sidebar-links li a {







  display: flex;







  justify-content: space-between;







  align-items: center;







  padding: 9px 12px;







  border-radius: 9px;







  background: #f8fafc;







  font-size: 13.5px;







  font-weight: 600;







  color: var(--text-body);







}







.sidebar-links li a:hover { background: #f0f9ff; color: var(--primary); }















/* FAQ Accordion (AEO / GEO / UX Enhanced) */







.faq-list {







  display: grid;







  gap: 14px;







  max-width: 920px;







  margin: 0 auto;







}







details.faq-item {







  background: var(--white);







  border: 1px solid var(--border);







  border-radius: 14px;







  padding: 18px 22px;







  box-shadow: var(--shadow-sm);







  transition: border-color 0.2s ease, box-shadow 0.2s ease;







}







details.faq-item:hover {







  border-color: #cbd5e1;







  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);







}







summary.faq-question {







  font-weight: 700;







  cursor: pointer;







  color: var(--navy-900);







  font-size: 16.5px;







  line-height: 1.45;







  list-style: none;







  display: flex;







  justify-content: space-between;







  align-items: center;







  gap: 16px;







  user-select: none;







}







summary.faq-question::-webkit-details-marker {







  display: none;







}







summary.faq-question::marker {







  display: none;







}







.faq-icon {







  width: 32px;







  height: 32px;







  border-radius: 50%;







  background: #eff6ff;







  color: var(--primary);







  display: inline-flex;







  align-items: center;







  justify-content: center;







  font-size: 20px;







  font-weight: 700;







  line-height: 1;







  flex-shrink: 0;







  pointer-events: none;







  transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;







}







details.faq-item[open] .faq-icon {







  transform: rotate(45deg);







  background: var(--navy-900);







  color: #ffffff;







}







details.faq-item[open] > .faq-answer {







  display: block !important;







  margin-top: 14px;







  padding-top: 14px;







  border-top: 1px solid #f1f5f9;







  color: #475569;







  font-size: 15.5px;







  line-height: 1.75;







  animation: faqFadeIn 0.22s ease-in-out;







}







details.faq-item:not([open]) > .faq-answer {







  display: none !important;







}







.faq-answer p {







  margin: 0;







  color: inherit;







  font-size: inherit;







  line-height: inherit;







}







.faq-answer p + p {







  margin-top: 10px;







}







@keyframes faqFadeIn {







  from { opacity: 0; transform: translateY(-4px); }







  to { opacity: 1; transform: translateY(0); }







}















/* Pre-Footer Closing Conversion Banner */







.closing-cta-banner {







  background:







    radial-gradient(circle at 85% 50%, rgba(6, 199, 85, 0.22), transparent 45%),







    linear-gradient(135deg, #07192f 0%, #0d325c 100%);







  color: #ffffff;







  padding: 58px 0;







  border-top: 3px solid var(--gold-500);







}







.closing-cta-inner {







  display: grid;







  grid-template-columns: 1.55fr 0.9fr;







  gap: 36px;







  align-items: center;







}







.closing-cta-copy h2 { color: #ffffff; font-size: clamp(23px, 2.5vw, 31px); line-height: 1.32; margin-bottom: 12px; }







.closing-cta-copy p { color: #dbeafe; font-size: 16px; margin-bottom: 18px; }







.closing-cta-copy strong { color: #86efac; }







.closing-trust-points { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13.5px; color: #fde68a; font-weight: 600; }







.closing-cta-box {







  background: var(--white);







  color: var(--text-main);







  padding: 24px;







  border-radius: 18px;







  text-align: center;







  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.3);







  display: flex;







  flex-direction: column;







  align-items: center;







  gap: 12px;







}







.closing-cta-box img { border-radius: 10px; border: 1px solid var(--border); }







.closing-tel-link { font-weight: 700; font-size: 14.5px; color: var(--navy-900); }















/* Footer */







.site-footer { background: var(--navy-950); color: #cbd5e1; padding-top: 56px; font-size: 14px; }







.footer-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 44px; }







.footer-about { margin-top: 14px; color: #94a3b8; line-height: 1.7; font-size: 13.5px; }







.footer-about strong { color: #ffffff; }







.footer-col h3 { color: var(--white); font-size: 16px; margin-bottom: 16px; }







.footer-links { list-style: none; display: grid; gap: 8px; }







.footer-links a, .site-footer a { color: #94a3b8; }







.footer-links a:hover, .site-footer a:hover { color: #fcd34d; }







.footer-contact-item { margin-bottom: 10px; color: #cbd5e1; line-height: 1.6; }







.footer-contact-item strong { color: #ffffff; }







.footer-qr { margin-top: 12px; }







.footer-qr img { border-radius: 10px; background: #fff; padding: 4px; }







.footer-bottom { background: #020813; padding: 18px 0; font-size: 13px; border-top: 1px solid rgba(255,255,255,0.07); }







.footer-bottom-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: #64748b; }















/* Desktop Floating Quick Actions */







.floating-cta {







  position: fixed;







  bottom: 22px;







  right: 22px;







  display: flex;







  flex-direction: column;







  gap: 10px;







  z-index: 1200;







}







.float-btn {







  display: inline-flex;







  align-items: center;







  gap: 8px;







  padding: 12px 20px;







  border-radius: 999px;







  font-weight: 700;







  font-size: 14px;







  color: #ffffff !important;







  box-shadow: 0 10px 26px rgba(5, 16, 32, 0.28);







}







.float-btn:hover { transform: translateY(-2px); }







.float-line { background: linear-gradient(135deg, var(--line-green) 0%, var(--line-green-dark) 100%); }







.float-tel { background: linear-gradient(135deg, #0284c7 0%, var(--navy-800) 100%); }















/* Mobile Sticky Bottom Bar (Hidden on Desktop) */







.mobile-sticky-bar { display: none; }















/* RTL Support for Arabic (/ar/) */







[dir="rtl"] .aeo-direct-answer { border-left: none; border-right: 4px solid #fbbf24; }







[dir="rtl"] .info-highlight-box { border-left: 1px solid #bae6fd; border-right: 5px solid var(--primary-bright); }







[dir="rtl"] .comparison-table th, [dir="rtl"] .comparison-table td, [dir="rtl"] .prose table th, [dir="rtl"] .prose table td { text-align: right; }







[dir="rtl"] .prose ul, [dir="rtl"] .prose ol { margin: 0 24px 20px 0; }







[dir="rtl"] .concierge-trust-list { text-align: right; }















/* ==========================================================================







   RESPONSIVE & MOBILE-FIRST OPTIMIZATION (Laptop, Tablet & Smartphone)







   ========================================================================== */







@media (max-width: 1360px) {







  .nav-tel-btn { display: none; }







  .topbar-badge { display: none; }







  .nav-item > a { font-size: 14px; padding: 8px 10px; }







  .brand-logo img { height: 42px; }







}















@media (max-width: 1090px) {







  .nav-list, .nav-cta, .hide-md { display: none !important; }







  .mob-header-actions {







    display: flex;







    align-items: center;







    gap: 8px;







    flex-shrink: 0;







    white-space: nowrap;







  }







  .mob-quick-line {







    display: inline-flex;







    align-items: center;







    gap: 6px;







    padding: 8px 13px;







    border-radius: 999px;







    background: linear-gradient(135deg, var(--line-green) 0%, var(--line-green-dark) 100%);







    color: #ffffff !important;







    font-weight: 700;







    font-size: 13px;







    white-space: nowrap;







    box-shadow: 0 4px 12px rgba(6, 199, 85, 0.28);







  }







  .mob-menu-trigger {







    display: inline-flex;







    align-items: center;







    gap: 7px;







    padding: 8px 13px;







    border-radius: 999px;







    background: var(--navy-900);







    color: #ffffff;







    font-weight: 700;







    font-size: 13.5px;







    cursor: pointer;







    white-space: nowrap;







    flex-shrink: 0;







  }







  .hamburger-bars { display: flex; flex-direction: column; gap: 4px; width: 16px; }







  .hamburger-bars span { display: block; height: 2px; width: 100%; background: #ffffff; border-radius: 2px; }















  .mob-backdrop {







    position: fixed;







    inset: 0;







    background: rgba(5, 16, 32, 0.62);







    backdrop-filter: blur(4px);







    z-index: 1400;







    opacity: 0;







    pointer-events: none;







    transition: opacity 0.25s ease;







    display: block;







  }







  .mob-drawer {







    display: flex;







    flex-direction: column;







    position: fixed;







    top: 0;







    right: 0;







    width: min(390px, 90vw);







    height: 100dvh;







    background: var(--white);







    z-index: 1500;







    box-shadow: -16px 0 44px rgba(5, 16, 32, 0.28);







    transform: translateX(102%);







    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);







    overflow-y: auto;







    padding: 18px 18px 96px;







  }







  [dir="rtl"] .mob-drawer { right: auto; left: 0; transform: translateX(-102%); }







  .mob-nav-checkbox:checked ~ .mob-backdrop { opacity: 1; pointer-events: auto; }







  .mob-nav-checkbox:checked ~ .mob-drawer { transform: translateX(0); }















  .mob-drawer-header {







    display: flex;







    justify-content: space-between;







    align-items: center;







    padding-bottom: 14px;







    border-bottom: 1px solid var(--border);







    margin-bottom: 14px;







  }







  .mob-close-btn {







    padding: 7px 13px;







    border-radius: 8px;







    background: #f1f5f9;







    font-weight: 700;







    font-size: 13.5px;







    color: var(--navy-900);







    cursor: pointer;







    white-space: nowrap;







  }







    .mob-drawer-title { font-size: 15px; font-weight: 800; color: var(--navy-900); letter-spacing: 0.05em; }
  .mob-drawer-close { padding: 4px 10px; border-radius: 8px; background: #f1f5f9; font-weight: 700; font-size: 20px; line-height: 1; color: var(--navy-900); cursor: pointer; white-space: nowrap; border: none; }
  .mob-drawer-close:hover { background: #e2e8f0; }
  .mob-drawer-lang { padding: 12px; background: var(--navy-950); border-radius: 12px; margin-bottom: 14px; }
  .mob-lang-title { font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
  .mob-lang-grid { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .mob-lang-grid .lang-pill { display: flex !important; align-items: center; justify-content: center; gap: 6px; text-align: center; font-size: 12px; font-weight: 600; padding: 9px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); color: #f1f5f9 !important; text-decoration: none; transition: all 0.2s ease; cursor: pointer; line-height: 1.3; white-space: nowrap; }
  .mob-lang-grid .lang-pill:hover,
  .mob-lang-grid .lang-pill.active-lang { background: #f59e0b !important; border-color: #fbbf24 !important; color: #0f172a !important; font-weight: 800; box-shadow: 0 2px 10px rgba(245, 158, 11, 0.4); }
  .mob-drawer-footer { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); display: grid; gap: 10px; }
  .mob-contact-row { font-size: 13px; color: var(--text-body); }
  .mob-contact-row a { color: var(--primary); font-weight: 700; text-decoration: none; }

  .mob-drawer-cta { display: grid; gap: 8px; margin-bottom: 14px; }







  .mob-lang-strip {







    display: flex;







    flex-wrap: wrap;







    gap: 6px;







    padding: 10px;







    background: var(--navy-900);







    border-radius: 10px;







    margin-bottom: 14px;







  }







  .mob-nav-list { list-style: none; display: grid; gap: 7px; }







  .mob-direct-link, .mob-accordion summary {







    display: flex;







    justify-content: space-between;







    align-items: center;







    gap: 8px;







    padding: 12px 14px;







    background: #f8fafc;







    border: 1px solid var(--border);







    border-radius: 10px;







    font-weight: 700;







    font-size: 15px;







    color: var(--navy-900);







    cursor: pointer;







    list-style: none;







  }







  .mob-count-pill {







    margin-left: auto;







    margin-right: 6px;







    padding: 2px 9px;







    border-radius: 999px;







    background: #fef3c7;







    color: #92400e;







    font-size: 11.5px;







    font-weight: 700;







    white-space: nowrap;







  }







  .mob-accordion summary::-webkit-details-marker { display: none; }







  .mob-accordion summary::after { content: "▾"; font-size: 13px; color: var(--primary); }







  .mob-accordion[open] summary { background: #eff6ff; border-color: #93c5fd; }







  .mob-accordion-body { padding: 10px 4px 4px; display: grid; gap: 12px; }







  .mob-view-all {







    display: block;







    padding: 9px 12px;







    background: #fef3c7;







    color: #92400e !important;







    border-radius: 8px;







    font-weight: 700;







    font-size: 13.5px;







    text-align: center;







  }







  .mob-svc-group-title {







    font-size: 13px;







    font-weight: 700;







    color: var(--primary);







    margin-bottom: 6px;







    padding: 0 6px;







  }







  .mob-svc-group ul, .mob-sublist { list-style: none; display: grid; gap: 4px; padding-top: 6px; }







  .mob-svc-group li a, .mob-sublist li a {







    display: flex;







    justify-content: space-between;







    align-items: center;







    gap: 8px;







    padding: 9px 12px;







    border-radius: 8px;







    font-size: 13.5px;







    color: var(--text-body);







    background: #ffffff;







    border: 1px solid #f1f5f9;







  }















  .trust-strip-grid { grid-template-columns: repeat(6, 1fr); }







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







}















@media (max-width: 960px) {







  body { padding-bottom: 76px; }







  .hero-grid, .pain-solution-grid, .content-layout, .closing-cta-inner, .inline-conversion-card {







    grid-template-columns: 1fr;







  }







  .cert-showcase-grid, .wp-gallery-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }







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







  .content-sidebar { position: static; }







  .floating-cta { display: none !important; }















  /* Fixed Thumb-Friendly Mobile Bottom Conversion Bar */







  .mobile-sticky-bar {







    position: fixed;







    bottom: 0;







    left: 0;







    right: 0;







    z-index: 1350;







    background: rgba(5, 16, 32, 0.96);







    backdrop-filter: blur(12px);







    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));







    display: grid;







    grid-template-columns: 0.92fr 1.28fr;







    gap: 8px;







    border-top: 1px solid rgba(255, 255, 255, 0.14);







    box-shadow: 0 -8px 28px rgba(5, 16, 32, 0.28);







  }







  .mob-bar-btn {







    display: flex;







    flex-direction: column;







    align-items: center;







    justify-content: center;







    padding: 8px 10px;







    border-radius: 10px;







    color: #ffffff !important;







    text-align: center;







    line-height: 1.25;







  }







  .mob-bar-btn strong { color: #ffffff; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }







  .mob-bar-btn span { font-size: 11px; opacity: 0.92; }







  .mob-bar-tel { background: linear-gradient(135deg, #0284c7 0%, #0f2c52 100%); }







  .mob-bar-line { background: linear-gradient(135deg, var(--line-green) 0%, var(--line-green-dark) 100%); }







}















@media (max-width: 640px) {







  .container { padding: 0 16px; }







  .hide-sm { display: none !important; }







  .topbar { font-size: 11.5px; padding: 6px 0; }







  .topbar-inner { justify-content: center; }







  .topbar-badge { display: none; }







  .topbar .lang-switcher { display: none; } /* Available right inside mobile drawer */







  .brand-logo img { height: 37px; }







  .mob-quick-line { padding: 7px 11px; font-size: 12.5px; }







  .mob-menu-trigger { padding: 7px 11px; font-size: 13px; }















  .hero-section, .page-hero { padding: 36px 0 44px; }







  .trust-pill { font-size: 11.5px; padding: 6px 12px; }







  .hero-section h1, .page-hero h1 { font-size: 24px; line-height: 1.34; }







  .aeo-direct-answer { font-size: 14.5px; padding: 14px 15px; }







  .hero-actions { flex-direction: column; }







  .hero-actions .btn { width: 100%; }







  .hero-guarantees { gap: 8px; font-size: 12.5px; flex-direction: column; }







  .hero-metrics { grid-template-columns: repeat(2, 1fr); gap: 10px; }







  .metric-box strong { font-size: 20px; }















  .hero-card { padding: 20px 16px; border-radius: 16px; }







  .quick-service-list a { font-size: 13px; padding: 9px 10px; }















  .trust-strip-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }







  .section { padding: 48px 0; }







  .ps-card { padding: 22px 18px; }







  .workflow-grid, .footer-grid, .lang-hub-grid, .service-grid, .blog-grid, .cert-showcase-grid, .wp-gallery-grid.cols-2, .wp-gallery-grid.cols-3, .wp-gallery-grid.cols-4 {







    grid-template-columns: 1fr;







  }







  .client-logo-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }







  .content-main { padding: 20px 16px; }







  .complete-menu-catalog { padding: 20px 16px; }







  .inline-conversion-card { padding: 22px 18px; }







}















/* Authentic FDA Page Top Hero, 8-Card Grid, Process Ribbon & Video Player */







.fda-hero-section {







  background: linear-gradient(135deg, #005b66 0%, #008796 50%, #00a4b4 100%);







  color: #ffffff;







  padding: 3rem 1.5rem 5.5rem 1.5rem;







  margin-top: -1.5rem;







  margin-bottom: 0;







  box-shadow: inset 0 -20px 40px rgba(0, 0, 0, 0.12);







}







.fda-hero-container {







  max-width: 1240px;







  margin: 0 auto;







  display: grid;







  grid-template-columns: 1fr 1.15fr;







  gap: 2.5rem;







  align-items: center;







}







.breadcrumb-hero {







  font-size: 13.5px;







  color: rgba(255, 255, 255, 0.85);







  margin-bottom: 0.85rem;







}







.breadcrumb-hero a {







  color: #ffffff;







  text-decoration: underline;







  text-underline-offset: 3px;







}







.breadcrumb-hero span {







  margin: 0 4px;







}







.fda-trust-badge {







  display: inline-flex;







  align-items: center;







  background: rgba(255, 255, 255, 0.18);







  border: 1px solid rgba(255, 255, 255, 0.35);







  color: #ffffff;







  font-size: 12.5px;







  font-weight: 700;







  padding: 4px 14px;







  border-radius: 999px;







  margin-bottom: 1rem;







  backdrop-filter: blur(4px);







}







.fda-hero-title {







  font-size: 2.75rem;







  font-weight: 800;







  color: #ffffff;







  line-height: 1.15;







  margin: 0 0 0.75rem 0;







  letter-spacing: -0.02em;







}







.fda-hero-sub {







  font-size: 1.25rem;







  font-weight: 600;







  color: #c7f9cc;







  line-height: 1.45;







  margin: 0 0 1.25rem 0;







}







.fda-hero-desc {







  font-size: 1.02rem;







  color: #f1f5f9;







  line-height: 1.7;







  margin: 0 0 1.75rem 0;







}







.fda-hero-contact-row {







  display: flex;







  align-items: center;







  gap: 1.25rem;







  background: rgba(0, 0, 0, 0.18);







  padding: 1.1rem 1.35rem;







  border-radius: 18px;







  margin-bottom: 1.75rem;







  border: 1px solid rgba(255, 255, 255, 0.15);







  backdrop-filter: blur(8px);







}







.fda-qr-box img {







  border-radius: 12px;







  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);







  width: 86px;







  height: 86px;







  display: block;







  background: #ffffff;







  padding: 2px;







}







.fda-qr-text h3 {







  color: #ffffff;







  font-size: 1.3rem;







  font-weight: 700;







  margin: 0 0 0.25rem 0;







}







.fda-qr-text p {







  color: #e2e8f0;







  font-size: 0.92rem;







  margin: 0 0 0.65rem 0;







}







.btn-fda-line {







  display: inline-flex;







  align-items: center;







  gap: 8px;







  background: #06c755;







  color: #ffffff !important;







  font-weight: 700;







  font-size: 1rem;







  padding: 0.55rem 1.35rem;







  border-radius: 9999px;







  text-decoration: none;







  box-shadow: 0 4px 16px rgba(6, 199, 85, 0.4);







  transition: transform 0.2s, background 0.2s;







}







.btn-fda-line:hover {







  background: #05a847;







  transform: translateY(-2px);







  color: #ffffff !important;







}







.fda-hero-hotline h3 {







  color: #ffffff;







  font-size: 1.15rem;







  font-weight: 700;







  margin: 0 0 0.35rem 0;







}







.fda-hero-hotline p {







  color: #cbd5e1;







  font-size: 0.88rem;







  margin: 0 0 0.75rem 0;







}







.fda-hotline-btns {







  display: flex;







  gap: 10px;







  flex-wrap: wrap;







}







.btn-tel-cyan {







  display: inline-flex;







  align-items: center;







  justify-content: center;







  background: #00bcd4;







  color: #ffffff !important;







  font-weight: 700;







  font-size: 1.05rem;







  padding: 0.6rem 1.35rem;







  border-radius: 10px;







  text-decoration: none;







  box-shadow: 0 4px 12px rgba(0, 188, 212, 0.35);







  transition: transform 0.2s, background 0.2s;







}







.btn-tel-cyan:hover {







  background: #00acc1;







  transform: translateY(-2px);







  color: #ffffff !important;







}







.btn-tel-white {







  display: inline-flex;







  align-items: center;







  justify-content: center;







  background: #ffffff;







  color: #00606e !important;







  font-weight: 700;







  font-size: 1.05rem;







  padding: 0.6rem 1.35rem;







  border-radius: 10px;







  text-decoration: none;







  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);







  transition: transform 0.2s, background 0.2s;







}







.btn-tel-white:hover {







  background: #f8fafc;







  transform: translateY(-2px);







  color: #004d57 !important;







}







.fda-cards-grid {







  display: grid;







  grid-template-columns: repeat(4, 1fr);







  gap: 14px;







}







.fda-card-item {







  display: block;







  border-radius: 14px;







  overflow: hidden;







  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;







  background: transparent;







}







.fda-card-item:hover {







  transform: translateY(-6px);







  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);







}







.fda-card-item img {







  width: 100%;







  height: auto;







  display: block;







  border-radius: 14px;







}







.fda-process-ribbon {







  display: flex;







  justify-content: center;







  align-items: center;







  gap: 16px;







  flex-wrap: wrap;







  margin: -3.8rem auto 2.5rem auto;







  position: relative;







  z-index: 10;







  max-width: 1140px;







  padding: 0 1rem;







}







.fda-process-item {







  flex: 0 1 155px;







  max-width: 175px;







  transition: transform 0.25s ease;







}







.fda-process-item:hover {







  transform: translateY(-5px);







}







.fda-process-item img {







  width: 100%;







  height: auto;







  display: block;







  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.18));







}







.fda-video-section {







  text-align: center;







  padding: 2.75rem 1.5rem;







  background: #ffffff;







  border-radius: 24px;







  margin: 2.5rem auto;







  max-width: 1100px;







  box-shadow: 0 10px 35px rgba(0, 96, 110, 0.08);







  border: 1px solid var(--slate-100);







}







.fda-video-title {







  color: #0097a7;







  font-size: 2.3rem;







  font-weight: 800;







  margin: 0 0 0.5rem 0;







  letter-spacing: -0.01em;







}







.fda-video-desc {







  color: var(--slate-700);







  font-size: 1.08rem;







  max-width: 740px;







  margin: 0 auto 1.35rem auto;







  line-height: 1.65;







}







.btn-fda-yt {







  display: inline-flex;







  align-items: center;







  gap: 8px;







  background: #ff0000;







  color: #ffffff !important;







  font-weight: 700;







  font-size: 1.02rem;







  padding: 0.65rem 1.85rem;







  border-radius: 9999px;







  text-decoration: none;







  box-shadow: 0 4px 16px rgba(255, 0, 0, 0.32);







  margin-bottom: 1.85rem;







  transition: transform 0.2s, background 0.2s;







}







.btn-fda-yt:hover {







  background: #cc0000;







  transform: scale(1.04);







  color: #ffffff !important;







}







.fda-video-wrapper {







  position: relative;







  padding-bottom: 56.25%; /* 16:9 ratio */







  height: 0;







  overflow: hidden;







  max-width: 940px;







  margin: 0 auto;







  border-radius: 18px;







  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);







  background: #000;







}







.fda-video-wrapper iframe {







  position: absolute;







  top: 0;







  left: 0;







  width: 100%;







  height: 100%;







  border: 0;







}















/* Sticky Bottom Contact Bar (Images 3, 4, 5) */







.sticky-bottom-bar {







  position: fixed;







  bottom: 0;







  left: 0;







  right: 0;







  background: rgba(255, 255, 255, 0.98);







  backdrop-filter: blur(12px);







  border-top: 2px solid #00bcd4;







  box-shadow: 0 -6px 25px rgba(0, 0, 0, 0.12);







  padding: 0.6rem 1rem;







  z-index: 99999;







  display: flex;







  align-items: center;







  justify-content: center;







  font-family: inherit;







}







.sticky-bar-content {







  display: flex;







  align-items: center;







  justify-content: center;







  gap: 1.75rem;







  flex-wrap: wrap;







  max-width: 1200px;







  width: 100%;







}







.sticky-bar-text {







  text-align: right;







  line-height: 1.25;







}







.sticky-bar-text strong {







  display: block;







  font-size: 1.08rem;







  color: var(--navy-950);







  font-weight: 800;







}







.sticky-bar-text small {







  font-size: 0.82rem;







  color: var(--slate-600);







}







.sticky-bar-qr-link {



  display: inline-flex;



  align-items: center;



  justify-content: center;



  flex-shrink: 0;



  text-decoration: none;



  transition: transform 0.2s ease;



}



.sticky-bar-qr-link:hover {



  transform: scale(1.08);



}



.sticky-bar-qr {



  width: 86px;



  height: 86px;



  border-radius: 10px;



  border: 2px solid #06c755;



  background: #ffffff;



  padding: 3px;



  box-shadow: 0 4px 14px rgba(6, 199, 85, 0.25);



  display: block;



}







.sticky-bar-line {







  display: inline-flex;







  align-items: center;







  gap: 8px;







}







.sticky-bar-line span {







  font-weight: 700;







  font-size: 0.95rem;







  color: var(--navy-900);







}







.btn-line-pill {







  display: inline-flex;







  align-items: center;







  gap: 6px;







  background: #06c755;







  color: #fff !important;







  font-weight: 700;







  font-size: 0.9rem;







  padding: 0.45rem 1.15rem;







  border-radius: 9999px;







  text-decoration: none;







  box-shadow: 0 3px 10px rgba(6, 199, 85, 0.35);







  transition: transform 0.2s, background 0.2s;







}







.btn-line-pill:hover {







  background: #05a847;







  transform: translateY(-2px);







  color: #fff !important;







}







.sticky-bar-call {







  display: inline-flex;







  align-items: center;







  gap: 8px;







}







.sticky-bar-call span {







  font-weight: 700;







  font-size: 0.88rem;







  color: var(--slate-700);







}







.btn-phone-pill {







  display: inline-flex;







  align-items: center;







  gap: 6px;







  background: #00bcd4;







  color: #fff !important;







  font-weight: 700;







  font-size: 0.95rem;







  padding: 0.45rem 1.25rem;







  border-radius: 9999px;







  text-decoration: none;







  box-shadow: 0 3px 10px rgba(0, 188, 212, 0.35);







  transition: transform 0.2s, background 0.2s;







}







.btn-phone-pill:hover {







  background: #00acc1;







  transform: translateY(-2px);







  color: #fff !important;







}







.sticky-bar-close {







  position: absolute;







  right: 14px;







  top: 50%;







  transform: translateY(-50%);







  background: #e2e8f0;







  color: #475569;







  border: none;







  width: 28px;







  height: 28px;







  border-radius: 50%;







  cursor: pointer;







  display: flex;







  align-items: center;







  justify-content: center;







  font-size: 14px;







  font-weight: bold;







  transition: background 0.2s;







}







.sticky-bar-close:hover {







  background: #cbd5e1;







}















/* Full Width Landing Page Layout */







.content-layout-full {







  max-width: 1200px;







  margin: 0 auto;







  width: 100%;







}







.content-main-full {







  background: var(--white);







  padding: 42px 40px;







  border: 1px solid var(--border);







  border-radius: var(--radius-lg);







  box-shadow: var(--shadow-sm);







}















/* FDA Fee Table (Issue 1) */







.fda-fee-table-wrap {







  margin: 28px 0;







  border-radius: var(--radius-md);







  border: 1px solid var(--border);







  overflow-x: auto;







  box-shadow: var(--shadow-sm);







}







.fda-fee-table {







  width: 100%;







  border-collapse: collapse;







  font-size: 14.5px;







  background: var(--white);







  min-width: 760px;







}







.fda-fee-table th {







  background: #0a1e3f;







  color: #ffffff;







  padding: 15px 18px;







  font-weight: 600;







  text-align: left;







  border-bottom: 2px solid #005b66;







  white-space: nowrap;







}







.fda-fee-table td {







  padding: 13px 18px;







  border-bottom: 1px solid #e2e8f0;







  vertical-align: middle;







  color: #334155;







  line-height: 1.5;







}







.fda-fee-table tbody tr:hover td {







  background: #f8fafc;







}







.table-group-header td {







  background: #f0f9ff !important;







  color: #0369a1 !important;







  font-weight: 700;







  font-size: 15px;







  border-top: 2px solid #bae6fd;







  border-bottom: 2px solid #bae6fd;







  padding: 12px 18px;







}







.fee-cat-pill {







  display: inline-block;







  padding: 4px 10px;







  border-radius: 6px;







  font-size: 12.5px;







  font-weight: 600;







  background: #f1f5f9;







  color: #475569;







  white-space: nowrap;







}







.fee-cat-pill.pill-food { background: #fef3c7; color: #92400e; }







.fee-cat-pill.pill-cosmetic { background: #fce7f3; color: #9d174d; }







.fee-cat-pill.pill-medical { background: #e0f2fe; color: #075985; }







.fee-cat-pill.pill-hazard { background: #fee2e2; color: #991b1b; }







.fee-badge {







  display: inline-block;







  background: #e0f2fe;







  color: #0369a1;







  font-weight: 700;







  padding: 5px 12px;







  border-radius: 9999px;







  white-space: nowrap;







  font-size: 13.5px;







  border: 1px solid #bae6fd;







}







.fee-badge-var {







  background: #fef3c7;







  color: #b45309;







  border-color: #fde68a;







}







.btn-table-inquire {







  display: inline-flex;







  align-items: center;







  gap: 4px;







  font-size: 13px;







  color: #0284c7;







  font-weight: 600;







  text-decoration: none;







  margin-left: 8px;







  white-space: nowrap;







}







.btn-table-inquire:hover {







  text-decoration: underline;







  color: #0369a1;







}







.table-disclaimer {







  display: flex;







  align-items: flex-start;







  gap: 12px;







  background: #f8fafc;







  border: 1px solid #cbd5e1;







  border-left: 4px solid #0284c7;







  border-radius: 8px;







  padding: 16px 20px;







  margin-top: 16px;







  margin-bottom: 28px;







  font-size: 13.5px;







  color: #475569;







  line-height: 1.6;







}







.table-disclaimer .disclaimer-icon {







  font-size: 20px;







  line-height: 1;







}















/* Social Proof Banner (Issue 2) */







.social-proof-banner {







  background: linear-gradient(135deg, #f0f7ff 0%, #e0effe 100%);







  border: 1px solid #bfdbfe;







  border-radius: var(--radius-lg);







  padding: 24px 28px;







  margin: 32px 0;







  display: flex;







  justify-content: space-between;







  align-items: center;







  flex-wrap: wrap;







  gap: 20px;







  box-shadow: 0 2px 8px rgba(30, 64, 175, 0.05);







}







.social-proof-info {







  display: flex;







  align-items: center;







  gap: 16px;







  flex: 1 1 450px;







}







.social-proof-icon {







  width: 48px;







  height: 48px;







  background: #ffffff;







  border-radius: 50%;







  display: flex;







  align-items: center;







  justify-content: center;







  box-shadow: 0 2px 6px rgba(0,0,0,0.08);







  flex-shrink: 0;







}







.social-proof-text h4 {







  margin: 0 0 4px 0;







  font-size: 17px;







  color: var(--navy-900);







  font-weight: 700;







}







.social-proof-text p {







  margin: 0;







  font-size: 13.5px;







  color: #475569;







  line-height: 1.5;







}







.social-proof-actions {







  display: flex;







  gap: 12px;







  flex-wrap: wrap;







}







.btn-fb {







  background: #1877f2;







  color: #ffffff !important;







  padding: 10px 18px;







  border-radius: 8px;







  font-weight: 600;







  font-size: 14px;







  display: inline-flex;







  align-items: center;







  gap: 8px;







  text-decoration: none;







  box-shadow: 0 2px 4px rgba(24, 119, 242, 0.2);







  transition: all 0.2s ease;







}







.btn-fb:hover {







  background: #166fe5;







  color: #ffffff !important;







  transform: translateY(-1px);







}















/* FDA Categories Overview (Issue 3) */







.fda-categories-overview {







  margin: 44px 0;







  display: grid;







  grid-template-columns: minmax(320px, 1fr) minmax(420px, 1.35fr);







  gap: 36px;







  align-items: start;







}







.fda-categories-diagram {







  position: sticky;







  top: 96px;







}







.diagram-card {







  background: #ffffff;







  border: 1px solid var(--border);







  border-radius: var(--radius-lg);







  padding: 20px;







  text-align: center;







  box-shadow: var(--shadow-sm);







}







.diagram-card img {







  max-width: 100%;







  height: auto;







  border-radius: 8px;







  transition: transform 0.3s ease;







}







.diagram-card:hover img {







  transform: scale(1.02);







}







.diagram-hint {







  margin: 12px 0 0 0;







  font-size: 13px;







  color: var(--text-muted);







  font-weight: 500;







}







.fda-cat-section-header {







  margin-bottom: 20px;







}







.fda-cat-title {







  font-size: 26px;







  color: var(--navy-900);







  margin: 10px 0 6px 0;







  font-weight: 700;







}







.fda-cat-desc {







  color: var(--text-muted);







  font-size: 14.5px;







  margin: 0;







  line-height: 1.6;







}







.fda-cat-card {







  background: #ffffff;







  border: 1px solid #e2e8f0;







  border-radius: 12px;







  padding: 18px 22px;







  margin-bottom: 16px;







  box-shadow: 0 1px 4px rgba(0,0,0,0.03);







  transition: all 0.2s ease;







}







.fda-cat-card:hover {







  border-color: #0284c7;







  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.08);







  transform: translateY(-2px);







}







.fda-cat-header {







  display: flex;







  align-items: center;







  gap: 14px;







  margin-bottom: 12px;







}







.fda-cat-header img {







  width: 46px;







  height: 46px;







  object-fit: contain;







  flex-shrink: 0;







}







.fda-cat-header h4 {







  margin: 0;







  font-size: 17px;







  color: var(--navy-900);







  font-weight: 700;







}







.fda-cat-card ul.wp-check-list {







  margin: 0;







  padding-left: 0;







}







.fda-cat-card ul.wp-check-list li {







  font-size: 13.5px;







  color: #475569;







  line-height: 1.55;







  margin-bottom: 6px;







}















/* Client Trust Section & Logo Wall (CI-Aligned & Enhanced) */







.client-trust-section {







  margin: 48px 0;







  padding: 40px 36px;







  background: #f8fafc;







  border-radius: var(--radius-xl);







  border: 1px solid #e2e8f0;







}







.client-trust-header {







  display: flex;







  justify-content: space-between;







  align-items: center;







  flex-wrap: wrap;







  gap: 18px;







  margin-bottom: 28px;







  padding-bottom: 22px;







  border-bottom: 2px solid #e2e8f0;







}







.client-trust-titles h2,







.client-trust-titles h3 {







  font-size: 26px;







  color: var(--navy-900);







  margin: 8px 0 6px;







  font-weight: 800;







  line-height: 1.3;







}







.client-trust-lead {







  margin: 0;







  color: #475569;







  font-size: 15px;







  line-height: 1.6;







}















/* Featured VIP Brands Grid & Luxury Cards */







.featured-brands-container {







  margin: 32px 0 36px;







}







.featured-brands-wrap {







  text-align: center;







}







.featured-brands-title {







  text-align: center;







  font-size: 0.95rem;







  font-weight: 800;







  letter-spacing: 0.04em;







  color: var(--navy-900);







  background: #f0fdfa;







  border: 1px solid rgba(0, 96, 110, 0.2);







  border-radius: 50px;







  padding: 10px 24px;







  margin: 0 auto 24px;







  display: inline-flex;







  align-items: center;







  gap: 10px;







  box-shadow: 0 2px 10px rgba(0, 96, 110, 0.06);







}







.featured-brands-grid {







  display: grid;







  grid-template-columns: repeat(3, 1fr);







  gap: 22px;







}







.featured-brand-card {







  background: #ffffff;







  border: 2px solid rgba(201, 168, 76, 0.35);







  border-radius: 18px;







  padding: 28px 20px 20px;







  display: flex;







  flex-direction: column;







  align-items: center;







  justify-content: space-between;







  text-align: center;







  position: relative;







  box-shadow: 0 10px 25px rgba(10, 30, 63, 0.06);







  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);







  overflow: hidden;







}







.featured-brand-card::after {







  content: '';







  position: absolute;







  top: 0;







  left: 0;







  right: 0;







  height: 4px;







  background: linear-gradient(90deg, #c9a84c, #e2c974, #00606e);







}







.featured-brand-card:hover {







  transform: translateY(-6px);







  box-shadow: 0 18px 40px rgba(0, 96, 110, 0.16);







  border-color: var(--teal);







}







.featured-brand-badge {







  position: absolute;







  top: 12px;







  right: 12px;







  font-size: 0.72rem;







  font-weight: 700;







  color: #5c3e06;







  background: linear-gradient(135deg, #fef3c7, #fde68a);







  border: 1px solid #f59e0b;







  padding: 4px 10px;







  border-radius: 50px;







  letter-spacing: 0.02em;







  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.2);







}







.featured-brand-img-wrap {







  height: 90px;







  display: flex;







  align-items: center;







  justify-content: center;







  margin: 10px 0 16px;







  width: 100%;







  padding: 6px;







}







.featured-brand-img-wrap img {







  max-height: 80px;







  max-width: 90%;







  object-fit: contain;







  transition: transform 0.3s ease;







  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.06));







}







.featured-brand-card:hover .featured-brand-img-wrap img {







  transform: scale(1.08);







}







.featured-brand-name {







  font-size: 1.2rem;







  font-weight: 800;







  color: var(--navy-900);







  margin-bottom: 4px;







  line-height: 1.3;







}







.featured-brand-desc {







  font-size: 0.85rem;







  color: #475569;







  font-weight: 500;







  margin-bottom: 12px;







}







.featured-brand-service {







  font-size: 0.76rem;







  font-weight: 600;







  color: var(--teal);







  background: #f0fdfa;







  border: 1px solid rgba(0, 96, 110, 0.15);







  border-radius: 6px;







  padding: 5px 10px;







  width: 100%;







}















/* 4 Industry Partners Wall */







.industry-partners-section {







  margin: 44px 0 36px;







  background: #ffffff;







  border: 1px solid #e2e8f0;







  border-radius: 20px;







  padding: 36px 30px;







  box-shadow: 0 4px 20px rgba(0,0,0,0.03);







}







.industry-grid {







  display: grid;







  grid-template-columns: repeat(2, 1fr);







  gap: 24px;







  margin: 28px 0;







}







.industry-card {







  background: #f8fafc;







  border: 1px solid #e2e8f0;







  border-radius: 16px;







  padding: 24px;







  box-shadow: 0 2px 8px rgba(0,0,0,0.02);







  transition: all 0.3s ease;







}







.industry-card:hover {







  border-color: var(--teal);







  box-shadow: 0 10px 25px rgba(0, 96, 110, 0.08);







  transform: translateY(-3px);







  background: #ffffff;







}







.industry-card-header {







  display: flex;







  align-items: center;







  gap: 12px;







  margin-bottom: 14px;







  padding-bottom: 12px;







  border-bottom: 2px solid #e2e8f0;







}







.industry-icon {







  font-size: 1.8rem;







  line-height: 1;







}







.industry-card-header h3 {







  font-size: 1.15rem;







  font-weight: 800;







  color: var(--navy-900);







  margin: 0 !important;







}







.industry-badge {







  font-size: 0.72rem;







  font-weight: 700;







  color: var(--teal);







  background: #f0fdfa;







  border: 1px solid rgba(0,96,110,0.15);







  padding: 3px 8px;







  border-radius: 6px;







  margin-left: auto;







}







.industry-brands-list {







  font-size: 0.92rem;







  line-height: 1.6;







  color: #1e293b;







  margin-bottom: 12px;







}







.industry-services-desc {







  font-size: 0.82rem;







  color: #64748b;







  background: #ffffff;







  border: 1px solid #e2e8f0;







  border-radius: 8px;







  padding: 10px 12px;







  line-height: 1.5;







  border-left: 3px solid var(--teal);







}















/* Trust Pillars Row */







.trust-pillars-row {







  display: grid;







  grid-template-columns: repeat(3, 1fr);







  gap: 20px;







  margin-top: 32px;







  padding-top: 28px;







  border-top: 2px dashed #cbd5e1;







}







.trust-pillar-card {







  text-align: center;







  padding: 20px 16px;







  background: #ffffff;







  border-radius: 14px;







  border: 1px solid #e2e8f0;







  box-shadow: 0 2px 8px rgba(0,0,0,0.03);







  transition: all 0.25s ease;







}







.trust-pillar-card:hover {







  transform: translateY(-2px);







  border-color: var(--teal);







  box-shadow: 0 6px 16px rgba(0,96,110,0.08);







}







.pillar-icon {







  font-size: 2rem;







  display: block;







  margin-bottom: 8px;







}







.trust-pillar-card h4 {







  font-size: 1.05rem;







  font-weight: 800;







  color: var(--navy-900);







  margin: 0 0 6px 0 !important;







}







.trust-pillar-card p {







  font-size: 0.82rem;







  color: #64748b;







  line-height: 1.45;







  margin: 0 !important;







}















/* FDA Client Logo Grid */







.fda-client-wall {







  margin: 40px 0 20px;







}







.fda-client-wall-header {







  text-align: center;







  margin-bottom: 24px;







}







.fda-client-wall-header h3 {







  font-size: 1.35rem;







  font-weight: 800;







  color: var(--navy-900);







  margin-bottom: 8px !important;







}







.fda-client-wall-header p {







  font-size: 0.92rem;







  color: #64748b;







  max-width: 750px;







  margin: 0 auto !important;







}







.fda-client-grid {







  display: grid;







  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));







  gap: 16px;







  align-items: center;







}







.fda-client-item {







  background: #ffffff;







  border: 1px solid #e2e8f0;







  border-radius: 12px;







  padding: 14px 12px;







  display: flex;







  align-items: center;







  justify-content: center;







  min-height: 88px;







  transition: all 0.25s ease;







  box-shadow: 0 2px 6px rgba(0,0,0,0.02);







}







.fda-client-item:hover {







  border-color: var(--teal);







  box-shadow: 0 8px 20px rgba(0, 96, 110, 0.12);







  transform: translateY(-3px);







}







.fda-client-item img {







  max-height: 64px;







  max-width: 90%;







  width: auto;







  object-fit: contain;







  transition: transform 0.25s ease;







}







.fda-client-item:hover img {







  transform: scale(1.08);







}















/* Clients Page Hero Layout */







.clients-page-hero {







  margin-bottom: 30px;







}







.clients-page-header {







  text-align: center;







  margin-bottom: 28px;







}







.clients-main-title {







  font-size: 2.1rem;







  font-weight: 800;







  color: var(--navy-900);







  margin: 14px 0 10px;







  line-height: 1.3;







}







.clients-lead-text {







  font-size: 1.05rem;







  color: #475569;







  max-width: 820px;







  margin: 0 auto;







  line-height: 1.7;







}















@media (max-width: 991px) {







  .featured-brands-grid {







    grid-template-columns: repeat(2, 1fr);







  }







  .industry-grid {







    grid-template-columns: 1fr;







  }







  .trust-pillars-row {







    grid-template-columns: 1fr;







    gap: 14px;







  }







  .clients-main-title {







    font-size: 1.7rem;







  }







}







@media (max-width: 640px) {







  .featured-brands-grid {







    grid-template-columns: 1fr;







    gap: 16px;







  }







  .featured-brand-card {







    padding: 24px 16px 16px;







  }







  .fda-client-grid {







    grid-template-columns: repeat(3, 1fr);







    gap: 10px;







  }







  .fda-client-item {







    min-height: 64px;







    padding: 8px 6px;







  }







  .fda-client-item img {







    max-height: 40px;







  }







}







@media (max-width: 420px) {







  .fda-client-grid {







    grid-template-columns: repeat(2, 1fr);







  }







}















/* FDA Why Choose Us & Hotline (Files 1 & 2) */







.fda-why-section {







  margin: 44px 0;







  padding: 36px 32px;







  background: #f8fafc;







  border-radius: var(--radius-lg);







  border: 1px solid var(--border);







}







.fda-why-intro {







  text-align: center;







  max-width: 820px;







  margin: 0 auto 32px auto;







}







.fda-why-intro h3 {







  font-size: 24px;







  color: var(--navy-900);







  margin: 10px 0 8px 0;







  font-weight: 700;







  line-height: 1.4;







}







.fda-why-intro p {







  color: var(--text-muted);







  font-size: 15px;







  margin: 0;







}







.fda-why-grid {







  display: grid;







  grid-template-columns: repeat(3, 1fr);







  gap: 18px;







  margin-bottom: 28px;







}







.fda-why-card {







  background: #ffffff;







  border: 1px solid #e2e8f0;







  border-radius: 12px;







  padding: 20px;







  display: flex;







  align-items: flex-start;







  gap: 14px;







  box-shadow: 0 1px 4px rgba(0,0,0,0.03);







  transition: all 0.2s ease;







}







.fda-why-card:hover {







  transform: translateY(-2px);







  border-color: #0284c7;







  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.08);







}







.fda-why-icon {







  font-size: 26px;







  line-height: 1;







  flex-shrink: 0;







}







.fda-why-body h4 {







  margin: 0 0 4px 0;







  font-size: 16px;







  color: var(--navy-900);







  font-weight: 700;







}







.fda-why-body p {







  margin: 0;







  font-size: 13px;







  color: #64748b;







  line-height: 1.5;







}







.fda-hotline-banner {







  background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);







  border: 1px solid #bae6fd;







  border-radius: 12px;







  padding: 20px 24px;







  display: flex;







  justify-content: space-between;







  align-items: center;







  flex-wrap: wrap;







  gap: 16px;







}







.fda-hotline-info h4 {







  margin: 0 0 4px 0;







  font-size: 17px;







  color: #0369a1;







  font-weight: 700;







}







.fda-hotline-info p {







  margin: 0;







  font-size: 13.5px;







  color: #475569;







}







.fda-hotline-actions {







  display: flex;







  gap: 10px;







  flex-wrap: wrap;







}















/* FDA Knowledge & Ad Permits Hub (File 3) */







.fda-knowledge-section {







  margin: 48px 0;







}







.fda-knowledge-header {







  text-align: center;







  max-width: 820px;







  margin: 0 auto 30px auto;







}







.fda-knowledge-header h3 {







  font-size: 26px;







  color: var(--navy-900);







  margin: 10px 0 6px 0;







  font-weight: 700;







}







.fda-knowledge-header p {







  color: var(--text-muted);







  font-size: 15px;







  margin: 0;







}







.fda-knowledge-grid {







  display: grid;







  grid-template-columns: repeat(3, 1fr);







  gap: 20px;







}







.fda-knowledge-card {







  background: #ffffff;







  border: 1px solid #e2e8f0;







  border-radius: 14px;







  overflow: hidden;







  box-shadow: 0 2px 6px rgba(0,0,0,0.04);







  transition: all 0.25s ease;







  display: flex;







  flex-direction: column;







}







.fda-knowledge-card:hover {







  transform: translateY(-4px);







  border-color: #0284c7;







  box-shadow: 0 10px 24px rgba(2, 132, 199, 0.1);







}







.fda-knowledge-img-wrap {







  display: block;







  overflow: hidden;







  background: #f1f5f9;







  aspect-ratio: 16 / 10;







}







.fda-knowledge-img-wrap img {







  width: 100%;







  height: 100%;







  object-fit: cover;







  transition: transform 0.3s ease;







}







.fda-knowledge-card:hover .fda-knowledge-img-wrap img {







  transform: scale(1.04);







}







.fda-knowledge-body {







  padding: 18px 20px;







  display: flex;







  flex-direction: column;







  flex-grow: 1;







}







.fda-knowledge-body h4 {







  margin: 0 0 6px 0;







  font-size: 17px;







  color: var(--navy-900);







  font-weight: 700;







}







.fda-knowledge-body p {







  margin: 0 0 14px 0;







  font-size: 13.5px;







  color: #64748b;







  line-height: 1.5;







  flex-grow: 1;







}







.knowledge-link {







  font-size: 13.5px;







  color: #0284c7;







  font-weight: 600;







  text-decoration: none;







  display: inline-flex;







  align-items: center;







  gap: 4px;







}







.knowledge-link:hover {







  text-decoration: underline;







  color: #0369a1;







}















@media (max-width: 991px) {







  .content-main-full {







    padding: 24px 20px;







  }







  .fda-why-grid {







    grid-template-columns: repeat(2, 1fr);







  }







  .fda-knowledge-grid {







    grid-template-columns: repeat(2, 1fr);







  }







  .fda-categories-overview {







    grid-template-columns: 1fr;







  }







  .fda-categories-diagram {







    position: static;







  }







  .fda-hero-container {







    grid-template-columns: 1fr;







    gap: 2rem;







  }







  .fda-hero-title {







    font-size: 2.25rem;







  }







}







@media (max-width: 768px) {







  .fda-why-grid {







    grid-template-columns: 1fr;







  }







  .fda-knowledge-grid {







    grid-template-columns: 1fr;







  }







  .fda-why-section {







    padding: 24px 16px;







  }







  .fda-hotline-banner {







    flex-direction: column;







    align-items: flex-start;







  }







  .fda-hero-section {







    padding: 2rem 1rem 4rem 1rem;







  }







  .fda-hero-title {







    font-size: 1.85rem;







  }







  .fda-cards-grid {







    grid-template-columns: repeat(2, 1fr);







    gap: 10px;







  }







  .fda-process-ribbon {







    margin: -2.5rem auto 1.5rem auto;







    gap: 8px;







  }







  .fda-process-item {







    flex: 0 1 100px;







    max-width: 110px;







  }







  .fda-video-title {







    font-size: 1.7rem;







  }







  .sticky-bar-text {







    display: none;







  }







  .sticky-bar-qr, .sticky-bar-qr-link { display: none !important; }







  .sticky-bottom-bar {







    padding: 0.45rem 0.5rem;







  }







  .sticky-bar-content {







    gap: 0.65rem;







  }







  body {







    padding-bottom: 60px;







  }







}








/* ==========================================================================
   Portfolio Single Page Styles (Porto Inspired + Modern Responsive Clean UX)
   ========================================================================== */
.portfolio-single-page {
  background: #f8fafc;
  min-height: 0;
}

.portfolio-single-hero {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  padding: 16px 0;
}

.portfolio-header-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;
  gap: 12px;
}

.portfolio-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  color: var(--navy-800);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  transition: all 0.2s ease;
}
.portfolio-back-btn:hover {
  background: var(--navy-900);
  color: #ffffff;
  border-color: var(--navy-900);
}

.portfolio-prev-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.portfolio-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  color: #475569;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}
.portfolio-nav-btn:hover {
  background: var(--navy-900);
  color: #ffffff;
  border-color: var(--navy-900);
}

.portfolio-single-section {
  padding: 36px 0 60px;
}

.portfolio-showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  margin-bottom: 40px;
}
@media (max-width: 900px) {
  .portfolio-showcase-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.portfolio-media-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.portfolio-featured-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  background-color: #ffffff;
}

.portfolio-featured-card img {
  max-width: 100%;
  max-height: 480px;
  height: auto;
  border-radius: 10px;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.portfolio-featured-card:hover img {
  transform: scale(1.02);
}

.portfolio-details-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
}
@media (max-width: 640px) {
  .portfolio-details-card {
    padding: 20px;
  }
}

.portfolio-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.portfolio-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #0e7490;
  background: rgba(14, 116, 144, 0.08);
  padding: 4px 12px;
  border-radius: 999px;
  text-transform: uppercase;
}

.portfolio-date-badge {
  font-size: 0.85rem;
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  padding: 4px 10px;
  border-radius: 6px;
}

.portfolio-single-title {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--navy-900);
  line-height: 1.35;
  margin: 0 0 16px 0;
}
@media (max-width: 640px) {
  .portfolio-single-title {
    font-size: 1.35rem;
  }
}

.portfolio-meta-box {
  background: #f8fafc;
  border: 1px solid #edf2f7;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.portfolio-meta-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.92rem;
  color: #475569;
  flex-wrap: wrap;
}
.portfolio-meta-row strong {
  color: var(--navy-900);
  font-weight: 700;
  min-width: 140px;
}

.portfolio-cat-link {
  color: #0e7490;
  text-decoration: none;
  font-weight: 600;
  background: rgba(14, 116, 144, 0.06);
  padding: 3px 10px;
  border-radius: 4px;
  transition: all 0.2s ease;
}
.portfolio-cat-link:hover {
  background: rgba(14, 116, 144, 0.15);
  text-decoration: none;
}

.portfolio-desc-header h4 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--navy-900);
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #f1f5f9;
}

.portfolio-prose {
  font-size: 1rem;
  line-height: 1.75;
  color: #334155;
  margin-bottom: 20px;
}
.portfolio-prose p {
  margin-bottom: 14px;
}
.portfolio-prose figure, .portfolio-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 16px 0;
  display: block;
}
.portfolio-prose figure {
  padding: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  line-height: 0;
}
.portfolio-prose figure a { display: block; }
.portfolio-prose figure img {
  margin: 0;
  width: 100%;
  border-radius: 0;
  box-shadow: none;
  border: 0;
}
.portfolio-prose figure figcaption {
  line-height: 1.5;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: #64748b;
}

.portfolio-live-wrap {
  margin: 16px 0 8px;
}
.btn-live-preview {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #0e7490, #1e3a8a);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.98rem;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(14, 116, 144, 0.3);
  transition: all 0.25s ease;
}
.btn-live-preview:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(14, 116, 144, 0.4);
}

.portfolio-skills-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}
.portfolio-skills-box strong {
  display: block;
  font-size: 0.88rem;
  color: var(--navy-900);
  margin-bottom: 10px;
  font-weight: 700;
}
.portfolio-skills-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.portfolio-skill-pill {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #334155;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 6px;
}

.portfolio-inquiry-box {
  background: linear-gradient(135deg, #0b1528, #162444);
  color: #ffffff;
  border-radius: 16px;
  padding: 32px 36px;
  margin: 40px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  box-shadow: 0 10px 25px -5px rgba(11, 21, 40, 0.2);
}
@media (max-width: 860px) {
  .portfolio-inquiry-box {
    flex-direction: column;
    text-align: center;
    padding: 24px;
  }
}
.portfolio-inquiry-content h3 {
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  margin: 8px 0;
}
.portfolio-inquiry-content p {
  color: #cbd5e1;
  font-size: 0.95rem;
  margin: 0;
}
.portfolio-inquiry-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
@media (max-width: 540px) {
  .portfolio-inquiry-actions {
    flex-direction: column;
    width: 100%;
  }
}

.btn-outline-white {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  color: #ffffff !important;
  font-weight: 700;
  border-radius: 8px;
  padding: 12px 20px;
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-outline-white:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #ffffff;
}

.portfolio-related-section {
  margin-top: 48px;
  padding-top: 36px;
  border-top: 2px solid #e2e8f0;
}
.portfolio-related-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--navy-900);
  margin-bottom: 24px;
}
.portfolio-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 860px) {
  .portfolio-related-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.portfolio-related-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
  text-decoration: none;
  color: inherit;
}
.portfolio-related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
  border-color: #cbd5e1;
}
.portfolio-related-img-wrap {
  width: 100%;
  height: 180px;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid #f1f5f9;
}
.portfolio-related-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
}
.portfolio-related-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.portfolio-related-card-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--navy-900);
  line-height: 1.4;
  margin-bottom: 10px;
}
.portfolio-related-meta {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: #64748b;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}

/* ==========================================================================
   LINE OA Landing Page Styles (Matching File 1 Hero + File 2 Auto-Slider)
   ========================================================================== */

.line-oa-landing {
  font-family: inherit;
  color: #1e293b;
  overflow-x: hidden;
}

/* Hero Section (File 1 Exact Match) */
.line-hero-section {
  position: relative;
  background: linear-gradient(135deg, #009999 0%, #00b4b6 35%, #06c755 85%, #05a847 100%);
  color: #ffffff;
  padding: 56px 0 64px;
  overflow: hidden;
}
.line-hero-glow {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.line-hero-container {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 991px) {
  .line-hero-container {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.line-hero-badge {
  margin-bottom: 16px;
}
.line-logo-img {
  width: 76px;
  height: 76px;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.15));
}
.line-hero-eyebrow {
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: 0.05em;
  color: #ffffff;
}
.line-hero-title {
  font-size: 2.75rem;
  font-weight: 900;
  line-height: 1.2;
  margin: 0 0 16px 0;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.line-hero-title-en {
  font-size: 3rem;
  letter-spacing: -0.02em;
  font-weight: 900;
}
.line-hero-title-sub {
  font-size: 2.1rem;
  font-weight: 700;
  opacity: 0.95;
}
@media (max-width: 768px) {
  .line-hero-title {
    font-size: 1.85rem;
  }
  .line-hero-title-en {
    font-size: 2rem;
  }
  .line-hero-title-sub {
    font-size: 1.5rem;
  }
}
.line-hero-desc {
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 24px;
  max-width: 620px;
}
@media (max-width: 991px) {
  .line-hero-desc {
    margin-left: auto;
    margin-right: auto;
  }
}

.line-hero-hours-card {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  padding: 20px 24px;
  display: inline-block;
  width: 100%;
  max-width: 580px;
}
.line-hours-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.15rem;
  margin-bottom: 4px;
}
@media (max-width: 991px) {
  .line-hours-header {
    justify-content: center;
  }
}
.line-hours-sub {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 16px;
}
.line-hero-cta-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
@media (max-width: 991px) {
  .line-hero-cta-group {
    justify-content: center;
  }
}
.line-cta-btn {
  display: inline-flex;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.line-cta-btn img {
  height: 52px;
  width: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.line-cta-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.line-hero-mockup-col {
  display: flex;
  justify-content: center;
  position: relative;
}
.line-mockup-wrap {
  position: relative;
  max-width: 540px;
  width: 100%;
}
.line-hero-phone-img {
  width: 100%;
  height: auto;
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 40px rgba(6, 199, 85, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: block;
  animation: floatPhone 5s ease-in-out infinite;
}
@keyframes floatPhone {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.line-floating-badge {
  position: absolute;
  background: #ffffff;
  color: #1e293b;
  border-radius: 12px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  font-size: 0.88rem;
  animation: floatBadge 5s ease-in-out infinite;
}
.line-floating-badge strong {
  display: block;
  color: #0b1528;
  font-size: 0.92rem;
}
.line-floating-badge small {
  color: #64748b;
}
.badge-top {
  top: 15%;
  left: -20px;
}
.badge-bottom {
  bottom: 12%;
  right: -20px;
  animation-delay: 2s;
}
@media (max-width: 640px) {
  .line-floating-badge {
    display: none;
  }
}
@keyframes floatBadge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Contact Strip (File 1 Exact Match) */
.line-contact-strip {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
  padding: 14px 0;
}
.line-strip-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
@media (max-width: 860px) {
  .line-strip-container {
    flex-direction: column;
    text-align: center;
  }
}
.line-strip-item {
  display: flex;
  align-items: center;
  gap: 14px;
}
@media (max-width: 860px) {
  .line-strip-item {
    justify-content: center;
  }
}
.strip-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ecfdf5;
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
.strip-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: #0b1528;
}
.highlight-green {
  color: #059669;
}
.strip-subtitle {
  margin: 0;
  font-size: 0.88rem;
  color: #64748b;
}
.strip-qr-img {
  width: 68px;
  height: 68px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 2px;
}
.strip-id-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.strip-id-label {
  font-size: 0.95rem;
  color: #0f172a;
}
.strip-add-btn {
  background: #06c755;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 6px 14px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s;
}
.strip-add-btn:hover {
  background: #05a847;
}
.strip-hotline-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hotline-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
}
.hotline-btn {
  background: #00b4b6;
  color: #ffffff !important;
  font-weight: 800;
  font-size: 1.15rem;
  padding: 8px 18px;
  border-radius: 8px;
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: background 0.2s;
}
.hotline-btn:hover {
  background: #009999;
}

/* Anchor Navigation - Executive Modern Upgrade */
.line-anchor-nav {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #e2e8f0;
  padding: 12px 0;
  position: sticky;
  top: 72px;
  z-index: 40;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}
.anchor-nav-scroll {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  white-space: nowrap;
  padding: 4px 6px 6px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.anchor-nav-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
@media (min-width: 992px) {
  .anchor-nav-scroll {
    justify-content: center;
    flex-wrap: wrap;
    overflow-x: visible;
    padding: 2px 0;
  }
}
.anchor-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #1e293b;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}
.anchor-pill:hover {
  background: #06c755;
  color: #ffffff;
  border-color: #06c755;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(6, 199, 85, 0.25);
}
.anchor-pill:active {
  transform: translateY(0);
}

/* Section Header Pills - High Contrast WCAG AAA Compliant */
.line-section .gold-pill,
.gold-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fef3c7 !important;
  border: 1px solid #fcd34d !important;
  color: #92400e !important;
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 3px rgba(217, 119, 6, 0.08);
}

/* Dark Sections Keep Luminous Bright Gold Text (User Attachment 2) */
.line-carousel-section .gold-pill,
.line-advanced-api-box .gold-pill,
.line-final-cta-section .gold-pill,
.line-final-cta-strip .gold-pill,
.final-cta-text .gold-pill {
  background: rgba(245, 158, 11, 0.18) !important;
  border: 1px solid rgba(251, 191, 36, 0.45) !important;
  color: #fde68a !important;
  box-shadow: none !important;
}

/* Sections */
.line-section {
  padding: 64px 0;
}
.bg-light-section {
  background: #f8fafc;
}
.bg-packages-section {
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
}

.section-header-center {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 44px;
}
.section-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: #0b1528;
  line-height: 1.3;
  margin: 12px 0 16px;
}
@media (max-width: 768px) {
  .section-title {
    font-size: 1.65rem;
  }
}
.text-teal {
  color: #009999;
}
.section-lead-center {
  font-size: 1.05rem;
  color: #64748b;
  line-height: 1.7;
}

.line-grid-2col {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 900px) {
  .line-grid-2col {
    grid-template-columns: 1fr;
  }
  .reverse-mobile {
    display: flex;
    flex-direction: column-reverse;
  }
}

.stat-highlight-box {
  background: #ecfdf5;
  border-left: 4px solid #06c755;
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  margin: 24px 0;
  display: flex;
  align-items: center;
  gap: 20px;
}
.stat-number {
  font-size: 2.2rem;
  font-weight: 900;
  color: #059669;
}
.stat-text {
  font-size: 0.95rem;
  color: #065f46;
}

.feature-checklist {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.check-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.check-icon {
  background: #06c755;
  color: #ffffff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 2px;
}
.check-item strong {
  display: block;
  font-size: 1.05rem;
  color: #0f172a;
}
.check-item p {
  margin: 2px 0 0;
  font-size: 0.92rem;
  color: #64748b;
}

.line-infographic-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
  text-align: center;
}
.line-infographic-card img {
  border-radius: 12px;
  max-width: 100%;
  height: auto;
}

/* ==================== 10 FEATURES AUTO-SLIDER (File 2 Exact Match) ==================== */
.line-carousel-section {
  background: #082416;
  background: linear-gradient(180deg, #06381e 0%, #032111 100%);
  color: #ffffff;
}
.line-carousel-section .section-title {
  color: #ffffff;
}
.line-carousel-section .text-teal {
  color: #34d399;
}
.line-carousel-section .section-lead-center {
  color: #a7f3d0;
}

.line-slider-wrapper {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  padding: 10px 0;
}
.line-slider-track {
  display: flex;
  gap: 16px;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}
.line-slide-card {
  flex: 0 0 calc(25% - 12px);
  min-width: 260px;
  box-sizing: border-box;
}
@media (max-width: 1023px) {
  .line-slide-card {
    flex: 0 0 calc(33.333% - 11px);
    min-width: 240px;
  }
}
@media (max-width: 767px) {
  .line-slide-card {
    flex: 0 0 calc(50% - 8px);
    min-width: 210px;
  }
}
@media (max-width: 479px) {
  .line-slide-card {
    flex: 0 0 calc(85% - 8px);
    min-width: 260px;
  }
}

.slide-card-inner {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  height: 100%;
}
.slide-card-inner:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.35);
}
.slide-card-inner img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  background: #f1f5f9;
}
.slide-caption {
  padding: 14px 16px 18px;
  color: #1e293b;
}
.slide-caption h4 {
  font-size: 1rem;
  font-weight: 800;
  color: #047857;
  margin: 0 0 6px 0;
}
.slide-caption p {
  font-size: 0.85rem;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

.line-slider-nav {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.9);
  color: #064e3b;
  border: none;
  border-radius: 50%;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  transition: all 0.2s ease;
}
.line-slider-nav:hover {
  background: #06c755;
  color: #ffffff;
  transform: translateY(-50%) scale(1.1);
}
.prev-btn { left: 8px; }
.next-btn { right: 8px; }

/* 4 Pillars Grid */
.features-4pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}
@media (max-width: 1024px) {
  .features-4pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .features-4pillars-grid {
    grid-template-columns: 1fr;
  }
}
.pillar-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.pillar-card .pillar-icon {
  font-size: 2rem;
  margin-bottom: 12px;
}
.pillar-card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 14px 0;
}
.pillar-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pillar-card li {
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.5;
  padding-left: 14px;
  position: relative;
}
.pillar-card li::before {
  content: "•";
  color: #06c755;
  position: absolute;
  left: 0;
  font-weight: bold;
}

/* Advanced API Box */
.line-advanced-api-box {
  background: linear-gradient(135deg, #0b1528 0%, #162444 100%);
  color: #ffffff;
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 16px 40px rgba(11,21,40,0.25);
}
@media (max-width: 768px) {
  .line-advanced-api-box {
    padding: 24px;
  }
}
.advanced-api-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 36px;
}
.advanced-api-header h3 {
  font-size: 1.85rem;
  font-weight: 800;
  color: #ffffff;
  margin: 12px 0 10px;
}
.advanced-api-header p {
  color: #cbd5e1;
  font-size: 0.95rem;
  margin: 0;
}
.advanced-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
@media (max-width: 860px) {
  .advanced-grid {
    grid-template-columns: 1fr;
  }
}
.advanced-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.adv-media {
  width: 100%;
  height: 220px;
  background: #020617;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.adv-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.adv-text {
  padding: 20px 24px;
}
.adv-text h4 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #38bdf8;
  margin: 0 0 8px 0;
}
.adv-text p {
  font-size: 0.9rem;
  color: #cbd5e1;
  line-height: 1.6;
  margin: 0;
}

/* Portfolio Showcase */
.portfolio-block-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: #0b1528;
  margin-bottom: 20px;
}
.showcase-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 1024px) {
  .showcase-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .showcase-cards-grid {
    grid-template-columns: 1fr;
  }
}
.showcase-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
  transition: transform 0.2s ease;
  text-align: center;
}
.showcase-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}
.showcase-card img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}
.showcase-name {
  padding: 12px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #334155;
}

/* Pricing 4-Column Grid */
.pricing-4col-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: stretch;
  margin-bottom: 40px;
}
@media (max-width: 1100px) {
  .pricing-4col-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .pricing-4col-grid {
    grid-template-columns: 1fr;
  }
}
.pricing-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 32px 24px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.1);
}
.card-popular {
  border: 2px solid #06c755;
  box-shadow: 0 12px 30px rgba(6,199,85,0.15);
  transform: scale(1.02);
}
.card-popular:hover {
  transform: scale(1.02) translateY(-6px);
}
.popular-ribbon {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #06c755, #00b4b6);
  color: #ffffff;
  padding: 4px 16px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 10px rgba(6,199,85,0.3);
}

.pkg-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.badge-blue { background: #e0f2fe; color: #0284c7; }
.badge-yellow { background: #fef3c7; color: #b45309; }
.badge-red { background: #fee2e2; color: #dc2626; }
.badge-green { background: #dcfce7; color: #15803d; }

.pkg-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #0b1528;
  margin: 4px 0 6px;
}
.pkg-subtitle {
  font-size: 0.82rem;
  color: #64748b;
  min-height: 38px;
  margin-bottom: 14px;
}
.pkg-price {
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid #f1f5f9;
}
.price-currency {
  font-size: 1.4rem;
  font-weight: 700;
  color: #06c755;
}
.price-amount {
  font-size: 2.5rem;
  font-weight: 900;
  color: #0b1528;
}
.price-period {
  font-size: 0.85rem;
  color: #64748b;
}

.pkg-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}
.pkg-features-list li {
  font-size: 0.9rem;
  color: #334155;
  line-height: 1.45;
}

.btn-pkg-action {
  display: block;
  text-align: center;
  padding: 12px 20px;
  background: #f1f5f9;
  color: #0f172a !important;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.btn-pkg-action:hover {
  background: #0b1528;
  color: #ffffff !important;
}
.btn-pkg-popular {
  background: #06c755;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(6,199,85,0.3);
}
.btn-pkg-popular:hover {
  background: #05a847;
  box-shadow: 0 6px 18px rgba(6,199,85,0.4);
}

/* Monthly Maintenance Card */
.line-monthly-maintenance-card {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 20px;
  padding: 32px 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}
@media (max-width: 860px) {
  .line-monthly-maintenance-card {
    flex-direction: column;
    text-align: center;
    padding: 24px;
  }
}
.monthly-card-left h3 {
  font-size: 1.4rem;
  font-weight: 800;
  color: #0b1528;
  margin: 8px 0;
}
.monthly-card-left p {
  color: #64748b;
  font-size: 0.95rem;
  max-width: 680px;
  margin: 0;
}
.monthly-price-tag {
  font-size: 1.15rem;
  color: #0b1528;
  margin-bottom: 12px;
}
.monthly-price-tag strong {
  font-size: 1.8rem;
  color: #06c755;
}
.btn-monthly-cta {
  display: inline-block;
  padding: 10px 24px;
  background: #0b1528;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s;
}
.btn-monthly-cta:hover {
  background: #06c755;
}

/* Verified Account */
.verified-img-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  text-align: center;
}
.verified-img-box img {
  border-radius: 12px;
  max-width: 100%;
  height: auto;
}
.verified-benefits-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}
.v-benefit-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.v-icon {
  font-size: 1.4rem;
  background: #f0fdf4;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.v-benefit-item strong {
  display: block;
  font-size: 1.05rem;
  color: #0b1528;
}
.v-benefit-item p {
  margin: 2px 0 0;
  font-size: 0.9rem;
  color: #64748b;
}

/* Preparation Steps */
.prep-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 900px) {
  .prep-steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .prep-steps-grid {
    grid-template-columns: 1fr;
  }
}
.prep-step-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
  position: relative;
  transition: transform 0.2s ease;
}
.prep-step-card:hover {
  transform: translateY(-4px);
}
.prep-step-card .step-num {
  font-size: 2.2rem;
  font-weight: 900;
  color: #06c755;
  opacity: 0.8;
  margin-bottom: 8px;
  line-height: 1;
}
.prep-step-card h4 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0b1528;
  margin: 0 0 10px 0;
}
.prep-step-card p {
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

/* Final CTA Section */
.line-final-cta-section {
  background: linear-gradient(135deg, #0b1528 0%, #032111 60%, #064e3b 100%);
  color: #ffffff;
  padding: 64px 0;
  text-align: center;
}
.line-final-cta-container {
  max-width: 860px;
  margin: 0 auto;
}
.final-cta-text h2 {
  font-size: 2.2rem;
  font-weight: 800;
  color: #ffffff;
  margin: 14px 0 16px;
}
@media (max-width: 768px) {
  .final-cta-text h2 {
    font-size: 1.7rem;
  }
}
.final-cta-text p {
  font-size: 1.08rem;
  color: #cbd5e1;
  line-height: 1.7;
  margin: 0 0 32px;
}
.final-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ==========================================================================
   UNIVERSAL INNER PAGE CRO & WORKFLOW STYLES
   ========================================================================== */

/* 4-Step Workflow Ribbon */
.inner-workflow-ribbon {
  background: linear-gradient(135deg, #091b34 0%, #0d4b7a 100%);
  color: #ffffff;
  border-radius: 18px;
  padding: 36px 32px;
  margin: 45px 0 24px;
  box-shadow: 0 16px 36px rgba(9, 27, 52, 0.12);
}
.inner-workflow-ribbon .ribbon-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 32px;
}
.inner-workflow-ribbon .ribbon-header h3 {
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 800;
  margin: 10px 0 8px;
}
.inner-workflow-ribbon .ribbon-header p {
  color: #94a3b8;
  font-size: 0.95rem;
  margin: 0;
}
.workflow-step-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.wf-step-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 22px 18px;
  transition: transform 0.2s ease, background 0.2s ease;
}
.wf-step-card:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-3px);
}
.wf-step-card .step-badge {
  display: inline-block;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.wf-step-card h4 {
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.35;
}
.wf-step-card p {
  color: #cbd5e1;
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 0;
}

/* Trust Guarantee Bar */
.inner-trust-guarantee-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 20px 0 35px;
}
.trust-guarantee-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.trust-guarantee-item:hover {
  background: #ffffff;
  border-color: #0284c7;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.08);
}
.trust-guarantee-item .tg-icon {
  font-size: 26px;
  flex-shrink: 0;
}
.trust-guarantee-item strong {
  display: block;
  font-size: 0.95rem;
  color: #0f172a;
  line-height: 1.3;
}
.trust-guarantee-item span {
  font-size: 0.82rem;
  color: #64748b;
}

/* Client Reviews Showcase (Replaces [wp-testimonials]) */
.client-reviews-showcase {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 36px 30px;
  margin: 36px 0;
  box-shadow: 0 8px 24px rgba(9, 27, 52, 0.04);
}
.reviews-showcase-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 28px;
}
.reviews-showcase-header h3 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #091b34;
  margin: 10px 0 6px;
}
.reviews-showcase-header p {
  color: #64748b;
  font-size: 0.92rem;
  margin: 0;
}
.reviews-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.review-quote-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.review-quote-card:hover {
  background: #ffffff;
  border-color: #0284c7;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(9, 27, 52, 0.06);
}
.review-stars {
  color: #f59e0b;
  font-size: 1.15rem;
  letter-spacing: 2px;
}
.review-text {
  color: #334155;
  font-size: 0.92rem;
  line-height: 1.65;
  font-style: italic;
  margin: 0;
  flex-grow: 1;
}
.reviewer-meta strong {
  display: block;
  font-size: 0.95rem;
  color: #091b34;
  margin-bottom: 2px;
}
.reviewer-meta span {
  font-size: 0.82rem;
  color: #64748b;
}

/* Consultation Form Card (Replaces [fluentform]) */
.consultation-form-card {
  background: linear-gradient(135deg, #091b34 0%, #0d4b7a 100%);
  color: #ffffff;
  border-radius: 18px;
  padding: 32px 30px;
  margin: 35px 0;
  box-shadow: 0 16px 36px rgba(9, 27, 52, 0.12);
  text-align: center;
}
.cf-card-header {
  max-width: 680px;
  margin: 0 auto 24px;
}
.cf-card-header h3 {
  color: #ffffff;
  font-size: 1.55rem;
  font-weight: 800;
  margin: 10px 0 6px;
}
.cf-card-header p {
  color: #cbd5e1;
  font-size: 0.95rem;
  margin: 0;
}
.cf-quick-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 740px;
  margin: 0 auto 22px;
}
.cf-btn-line {
  background: linear-gradient(135deg, #06c755 0%, #04a344 100%);
  color: #ffffff !important;
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(6, 199, 85, 0.3);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cf-btn-line:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(6, 199, 85, 0.45);
}
.cf-btn-tel {
  background: #ffffff;
  color: #091b34 !important;
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cf-btn-tel:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.btn-txt-wrap {
  text-align: left;
  line-height: 1.3;
}
.btn-txt-wrap strong {
  display: block;
  font-size: 1.05rem;
}
.btn-txt-wrap span {
  font-size: 0.8rem;
  opacity: 0.9;
}
.cf-tel-icon {
  font-size: 24px;
}
.cf-trust-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  color: #cbd5e1;
  font-size: 0.85rem;
}

/* Horizontal Button Grid for Consecutive Buttons */
.wp-btn-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 18px 0 24px;
}
.wp-btn-grid .wp-btn-wrap {
  margin: 0 !important;
}

/* ==========================================================================
   EXTENDED RICH PAGES STYLES
   ========================================================================== */

/* 1. Contact Page */
.rich-contact-page {
  margin: 10px 0 35px;
}
.contact-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 35px;
}
.contact-channel-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 26px 22px;
  box-shadow: 0 4px 16px rgba(9, 27, 52, 0.04);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.contact-channel-card:hover {
  transform: translateY(-3px);
  border-color: #0284c7;
  box-shadow: 0 10px 28px rgba(9, 27, 52, 0.08);
}
.card-icon-wrap {
  font-size: 32px;
  margin-bottom: 12px;
}
.contact-channel-card h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #091b34;
  margin-bottom: 12px;
}
.hq-address {
  font-size: 0.92rem;
  color: #475569;
  line-height: 1.65;
  margin-bottom: 14px;
}
.card-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.meta-tag {
  font-size: 0.82rem;
  color: #64748b;
  background: #f1f5f9;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-block;
}
.contact-tel-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.contact-tel-list li {
  padding: 8px 0;
  border-bottom: 1px dashed #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
}
.contact-tel-list li:last-child { border-bottom: none; }
.tel-link strong {
  color: #0284c7;
  font-size: 1.05rem;
}
.online-channel-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.online-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.online-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  width: fit-content;
}
.line-badge { background: #dcfce7; color: #15803d; }
.email-badge { background: #e0f2fe; color: #0369a1; }
.btn-line-inline {
  background: #06c755;
  color: #ffffff !important;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  margin-top: 4px;
  width: fit-content;
}

.contact-interactive-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 30px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 32px;
}
.section-badge-header {
  margin-bottom: 22px;
}
.section-badge-header h3 {
  font-size: 1.45rem;
  font-weight: 800;
  color: #091b34;
  margin: 10px 0 6px;
}
.section-badge-header p {
  color: #64748b;
  font-size: 0.92rem;
  margin: 0;
}
/* Direct Instant Contact Section (Replacing Unused Email Form) */
.contact-direct-section {
  display: flex;
  flex-direction: column;
}
.direct-consult-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
}
.direct-qr-row {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f1f5f9;
}
.direct-qr-img-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.direct-qr-link {
  display: inline-block;
  border-radius: 14px;
  padding: 4px;
  background: #ffffff;
  border: 2px solid #06c755;
  box-shadow: 0 4px 14px rgba(6, 199, 85, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.direct-qr-link:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(6, 199, 85, 0.35);
}
.direct-contact-qr {
  display: block;
  width: 140px;
  height: 140px;
  border-radius: 10px;
  object-fit: contain;
}
.qr-scan-hint {
  font-size: 11.5px;
  font-weight: 700;
  color: #065f46;
}
.direct-qr-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.line-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  color: #065f46;
  width: fit-content;
}
.direct-qr-info h4 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #091b34;
  margin: 0;
}
.direct-qr-info p {
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}
.direct-line-btn {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  font-weight: 800;
  border-radius: 10px;
  font-size: 0.95rem;
}
.direct-hotline-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px 0;
}
.hotline-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hotline-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.hotline-primary {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}
.hotline-office {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
}
.hotline-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.hotline-text {
  display: flex;
  flex-direction: column;
}
.hotline-sub {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}
.hotline-text strong {
  font-size: 1.05rem;
  font-weight: 800;
  color: #091b34;
}
.direct-trust-footer {
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: #475569;
  font-weight: 500;
}
@media (max-width: 768px) {
  .direct-qr-row {
    flex-direction: column;
    text-align: center;
  }
  .line-status-pill {
    margin: 0 auto;
  }
  .direct-hotline-grid {
    grid-template-columns: 1fr;
  }
}

.map-card-wrap {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.map-head {
  margin-bottom: 14px;
}
.map-head h4 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #091b34;
  margin-bottom: 2px;
}
.map-head span {
  font-size: 0.85rem;
  color: #64748b;
}
.transit-tips {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
}
.transit-tips h5 {
  font-size: 0.95rem;
  color: #091b34;
  margin-bottom: 8px;
}
.transit-tips ul {
  padding-left: 18px;
  margin: 0;
  font-size: 0.85rem;
  color: #475569;
  line-height: 1.6;
}

/* 2. About Us Page */
.about-executive-banner {
  background: linear-gradient(135deg, #091b34 0%, #0f2c52 100%);
  color: #ffffff;
  border-radius: 20px;
  padding: 40px 36px;
  margin-bottom: 40px;
  box-shadow: 0 16px 40px rgba(9, 27, 52, 0.12);
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 32px;
  align-items: center;
}
.about-exec-content h2 {
  color: #ffffff;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.35;
  margin: 12px 0 10px;
}
.about-executive-banner strong {
  color: #ffffff;
}
.about-lead {
  color: #e2e8f0;
  font-size: 0.98rem;
  line-height: 1.75;
  margin: 0;
}
.about-lead strong {
  color: #ffffff !important;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.about-exec-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.stat-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 18px 16px;
  text-align: center;
}
.stat-card strong {
  display: block;
  font-size: 1.8rem;
  font-weight: 800;
  color: #fde68a;
  line-height: 1.2;
}
.stat-card span {
  font-size: 0.8rem;
  color: #cbd5e1;
}

.about-pillars-section {
  margin-bottom: 45px;
}
.section-title-center {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 30px;
}
.section-title-center h3 {
  font-size: 1.6rem;
  font-weight: 800;
  color: #091b34;
  margin: 10px 0 6px;
}
.section-title-center p {
  color: #64748b;
  font-size: 0.95rem;
  margin: 0;
}
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.pillar-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 26px 20px;
  box-shadow: 0 4px 14px rgba(9, 27, 52, 0.04);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.pillar-card:hover {
  transform: translateY(-4px);
  border-color: #0284c7;
  box-shadow: 0 10px 24px rgba(2, 132, 199, 0.08);
}
.pillar-icon {
  font-size: 32px;
  margin-bottom: 12px;
}
.pillar-card h4 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #091b34;
  margin-bottom: 8px;
  line-height: 1.35;
}
.pillar-card p {
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

.vision-mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 45px;
}
.vm-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 30px 26px;
}
.vm-icon { font-size: 32px; margin-bottom: 10px; }
.vm-card h3 {
  font-size: 1.35rem;
  font-weight: 800;
  color: #091b34;
  margin-bottom: 12px;
}
.vm-card p {
  color: #475569;
  font-size: 0.94rem;
  line-height: 1.7;
  margin: 0;
}
.vm-list {
  padding-left: 20px;
  margin: 0;
}
.vm-list li {
  margin-bottom: 8px;
  color: #475569;
  font-size: 0.92rem;
  line-height: 1.6;
}

.about-pdf-downloads {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 36px 30px;
  margin-bottom: 40px;
}
.pdf-download-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 26px;
}
.pdf-download-header h3 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #091b34;
  margin: 10px 0 6px;
}
.pdf-download-header p {
  color: #64748b;
  font-size: 0.92rem;
  margin: 0;
}
.pdf-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.pdf-box {
  background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}
.pdf-lang-badge {
  display: inline-block;
  background: #dbeafe;
  color: #1e40af;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}
.pdf-box h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #091b34;
  margin-bottom: 6px;
}
.pdf-box p {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}
.pdf-box-actions {
  display: flex;
  gap: 8px;
}

/* 3. Company Registration Page */
.rich-company-reg-hero {
  margin: 10px 0 35px;
}
.comp-reg-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 35px;
}
.comp-reg-header h2 {
  font-size: 1.75rem;
  font-weight: 800;
  color: #091b34;
  margin: 12px 0 10px;
}
.comp-lead {
  font-size: 0.96rem;
  color: #64748b;
  line-height: 1.7;
}
.comp-packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}
.comp-pkg-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  box-shadow: 0 4px 16px rgba(9, 27, 52, 0.04);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.comp-pkg-card:hover {
  transform: translateY(-4px);
  border-color: #0284c7;
  box-shadow: 0 12px 32px rgba(9, 27, 52, 0.08);
}
.comp-pkg-card.featured-pkg {
  border: 2px solid #0284c7;
  box-shadow: 0 8px 30px rgba(2, 132, 199, 0.12);
}
.pkg-popular-tag {
  position: absolute;
  top: -12px;
  right: 24px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
}
.pkg-badge {
  font-size: 12px;
  font-weight: 700;
  color: #0284c7;
  background: #e0f2fe;
  padding: 3px 10px;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 8px;
}
.comp-pkg-card h3 {
  font-size: 1.4rem;
  font-weight: 800;
  color: #091b34;
  margin-bottom: 6px;
}
.pkg-desc {
  font-size: 0.88rem;
  color: #64748b;
  margin-bottom: 18px;
}
.pkg-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  flex-grow: 1;
}
.pkg-features li {
  padding: 8px 0;
  border-bottom: 1px dashed #f1f5f9;
  font-size: 0.9rem;
  color: #334155;
  line-height: 1.5;
}
.pkg-features li:last-child { border-bottom: none; }

.comp-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}
.comp-doc-card, .comp-steps-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 28px 24px;
}
.comp-doc-card h4, .comp-steps-card h4 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #091b34;
  margin-bottom: 18px;
}
.comp-check-list {
  padding-left: 20px;
  margin: 0;
}
.comp-check-list li {
  margin-bottom: 12px;
  font-size: 0.92rem;
  color: #475569;
  line-height: 1.65;
}
.step-mini-timeline {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.smt-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.smt-num {
  background: #0284c7;
  color: #ffffff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}
.smt-item strong {
  font-size: 0.95rem;
  color: #091b34;
}
.smt-item p {
  font-size: 0.85rem;
  color: #64748b;
  margin: 2px 0 0;
  line-height: 1.5;
}

/* 4. Import-Export Page */
.rich-import-export-hero {
  margin: 10px 0 35px;
}
.ie-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 32px;
}
.ie-header h2 {
  font-size: 1.7rem;
  font-weight: 800;
  color: #091b34;
  margin: 12px 0 10px;
}
.ie-lead {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.7;
}
.ie-modes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 35px;
}
.ie-mode-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 26px 20px;
  box-shadow: 0 4px 14px rgba(9, 27, 52, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.ie-mode-card:hover {
  transform: translateY(-3px);
  border-color: #0284c7;
}
.ie-mode-icon { font-size: 32px; margin-bottom: 12px; }
.ie-mode-card h4 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #091b34;
  margin-bottom: 8px;
}
.ie-mode-card p {
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0 0 14px;
  flex-grow: 1;
}
.ie-mode-tag {
  font-size: 11px;
  font-weight: 700;
  color: #0369a1;
  background: #e0f2fe;
  padding: 3px 8px;
  border-radius: 6px;
  width: fit-content;
}

.ie-specialties-banner {
  background: linear-gradient(135deg, #091b34 0%, #0d4b7a 100%);
  color: #ffffff;
  border-radius: 18px;
  padding: 32px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  box-shadow: 0 12px 32px rgba(9, 27, 52, 0.1);
}
.ie-spec-content h3 {
  color: #ffffff;
  font-size: 1.45rem;
  font-weight: 800;
  margin: 10px 0 8px;
}
.ie-spec-content p {
  color: #cbd5e1;
  font-size: 0.92rem;
  line-height: 1.65;
  margin: 0;
}
.ie-spec-action {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

/* 5. TISI Page */
.rich-tisi-hero {
  margin: 10px 0 35px;
}
.tisi-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 32px;
}
.tisi-header h2 {
  font-size: 1.7rem;
  font-weight: 800;
  color: #091b34;
  margin: 12px 0 10px;
}
.tisi-lead {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.7;
}
.tisi-types-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 35px;
}
.tisi-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 30px 24px;
  box-shadow: 0 4px 16px rgba(9, 27, 52, 0.04);
}
.tisi-card.card-mandatory { border-top: 4px solid #ef4444; }
.tisi-card.card-voluntary { border-top: 4px solid #3b82f6; }
.tisi-mark-pill {
  font-size: 12px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 12px;
}
.pill-red { background: #fee2e2; color: #b91c1c; }
.pill-blue { background: #dbeafe; color: #1d4ed8; }
.tisi-card h4 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #091b34;
  margin-bottom: 8px;
}
.tisi-card p {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 14px;
}
.tisi-example-list {
  padding-left: 20px;
  margin: 0;
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.65;
}

.tisi-process-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px 20px;
}
.tisi-step-box {
  text-align: center;
}
.t-step-num {
  background: #0284c7;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
}
.tisi-step-box strong {
  display: block;
  font-size: 0.95rem;
  color: #091b34;
  margin-bottom: 4px;
}
.tisi-step-box p {
  font-size: 0.82rem;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

/* 6. Advertising Permits Page (ฆอ. ฆพ. ฆท. ฆส.) */
.rich-ad-permits-hero {
  margin: 10px 0 35px;
}
.ad-permits-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 32px;
}
.ad-permits-header h2 {
  font-size: 1.7rem;
  font-weight: 800;
  color: #091b34;
  margin: 12px 0 10px;
}
.ad-lead {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.7;
}
.ad-matrix-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.ad-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 14px rgba(9, 27, 52, 0.04);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.ad-card:hover {
  transform: translateY(-4px);
  border-color: #0284c7;
  box-shadow: 0 12px 28px rgba(9, 27, 52, 0.08);
}
.ad-card-badge {
  font-size: 13px;
  font-weight: 800;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 4px 12px;
  border-radius: 999px;
  width: fit-content;
  margin-bottom: 12px;
}
.ad-card h4 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #091b34;
  margin-bottom: 8px;
  line-height: 1.35;
}
.ad-desc {
  font-size: 0.85rem;
  color: #64748b;
  margin-bottom: 14px;
}
.ad-points {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  flex-grow: 1;
}
.ad-points li {
  font-size: 0.85rem;
  color: #334155;
  padding: 5px 0;
  border-bottom: 1px dashed #f1f5f9;
}
.ad-points li:last-child { border-bottom: none; }
.ad-btn-inquire {
  color: #0284c7;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}
.ad-btn-inquire:hover { text-decoration: underline; }

/* 7. All Services Hub Page */
.rich-all-services-hub {
  margin: 10px 0 35px;
}
.all-services-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 35px;
}
.all-services-header h2 {
  font-size: 1.75rem;
  font-weight: 800;
  color: #091b34;
  margin: 12px 0 10px;
}
.all-services-lead {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.7;
}
.all-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.service-hub-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 14px rgba(9, 27, 52, 0.04);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.service-hub-card:hover {
  transform: translateY(-4px);
  border-color: #0284c7;
  box-shadow: 0 10px 24px rgba(2, 132, 199, 0.08);
}
.sh-icon { font-size: 32px; margin-bottom: 12px; }
.service-hub-card h4 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #091b34;
  margin-bottom: 8px;
  line-height: 1.35;
}
.service-hub-card p {
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0 0 14px;
  flex-grow: 1;
}
.sh-link {
  color: #0284c7;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}
.sh-link:hover { text-decoration: underline; }

/* 8. Visa & Work Permit Page */
.rich-visa-hero {
  margin: 10px 0 35px;
}
.visa-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 32px;
}
.visa-header h2 {
  font-size: 1.7rem;
  font-weight: 800;
  color: #091b34;
  margin: 12px 0 10px;
}
.visa-lead {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.7;
}
.visa-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.visa-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 26px 20px;
  box-shadow: 0 4px 14px rgba(9, 27, 52, 0.04);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.visa-card:hover {
  transform: translateY(-4px);
  border-color: #0284c7;
}
.v-icon { font-size: 32px; margin-bottom: 12px; }
.visa-card h4 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #091b34;
  margin-bottom: 8px;
  line-height: 1.35;
}
.visa-card p {
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS FOR NEW CARDS & WORKFLOWS
   ========================================================================== */
@media (max-width: 1024px) {
  .workflow-step-cards,
  .inner-trust-guarantee-bar,
  .pillars-grid,
  .ie-modes-grid,
  .tisi-process-strip,
  .ad-matrix-grid,
  .all-services-grid,
  .visa-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .contact-cards-grid,
  .comp-packages-grid,
  .reviews-showcase-grid,
  .pdf-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .contact-interactive-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .workflow-step-cards,
  .inner-trust-guarantee-bar,
  .pillars-grid,
  .vision-mission-grid,
  .ie-modes-grid,
  .tisi-types-grid,
  .tisi-process-strip,
  .ad-matrix-grid,
  .all-services-grid,
  .visa-grid,
  .contact-cards-grid,
  .comp-packages-grid,
  .comp-details-grid,
  .reviews-showcase-grid,
  .pdf-cards-grid,
  .about-executive-banner {
    grid-template-columns: 1fr;
  }
  .about-executive-banner { padding: 26px 20px; }
  .about-exec-stats { grid-template-columns: repeat(2, 1fr); }
  .inner-workflow-ribbon { padding: 26px 18px; }
  .cf-quick-actions { grid-template-columns: 1fr; }
  .interactive-quote-form .form-row { grid-template-columns: 1fr; }
  .ie-specialties-banner { flex-direction: column; text-align: center; }

  /* CRITICAL UX FIX: Keep gallery items in 2 columns on mobile so logos do NOT stretch to full width! */
  .wp-gallery-grid.cols-4,
  .wp-gallery-grid.cols-3,
  .wp-gallery-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* Section Pills for Rich Pages (WCAG AAA Contrast) */
.gold-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fef3c7 !important;
  border: 1px solid #fcd34d !important;
  color: #92400e !important;
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}
.inner-workflow-ribbon .gold-pill,
.ie-specialties-banner .gold-pill {
  background: rgba(245, 158, 11, 0.18) !important;
  border: 1px solid rgba(251, 191, 36, 0.45) !important;
  color: #fde68a !important;
}

/* ==========================================================================
   COSMETIC FDA LANDING PAGE STYLES (/บริการของเรา/รับจด-อย-เครื่องสำอาง/)
   ========================================================================== */

.cosmetic-hero-section {
  position: relative;
  background: linear-gradient(135deg, #06162e 0%, #0a2f44 50%, #005b66 100%);
  color: #ffffff;
  padding: 3.5rem 1.5rem 4.5rem 1.5rem;
  overflow: hidden;
}

.cosmetic-hero-glow {
  position: absolute;
  top: -150px;
  right: -100px;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(6, 199, 85, 0.18) 0%, rgba(0, 164, 180, 0.12) 40%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.cosmetic-hero-container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
}

.breadcrumb-white {
  margin-bottom: 16px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}

.breadcrumb-white a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.breadcrumb-white a:hover {
  color: #38bdf8;
  text-decoration: underline;
}

.breadcrumb-white span {
  color: rgba(255, 255, 255, 0.5);
  margin: 0 6px;
}

.trust-pill-gold {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(251, 191, 36, 0.45);
  color: #fde68a !important;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 18px;
  letter-spacing: 0.02em;
}

.gold-star {
  color: #fbbf24;
}

.cosmetic-hero-title {
  font-size: clamp(1.85rem, 3.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.22;
  color: #ffffff;
  margin: 0 0 16px 0;
  letter-spacing: -0.02em;
}

.cosmetic-hero-subtitle {
  display: block;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 600;
  color: #7dd3fc;
  margin-top: 6px;
}

.cosmetic-hero-desc {
  font-size: 1rem;
  line-height: 1.68;
  color: #e2e8f0;
  margin-bottom: 24px;
}

.cosmetic-hero-desc strong {
  color: #fde68a;
}

.cosmetic-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}

.metric-pill-item {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 12px 10px;
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.metric-pill-item:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.5);
}

.metric-num {
  display: block;
  font-size: 1.45rem;
  font-weight: 800;
  color: #38bdf8;
  line-height: 1.1;
  margin-bottom: 4px;
}

.metric-lbl {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: #cbd5e1;
}

.cosmetic-hero-cta-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.btn-cosmetic-line {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #06c755 0%, #05a847 100%);
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 14px 22px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(6, 199, 85, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-cosmetic-line:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(6, 199, 85, 0.45);
}

.live-dot-green {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 10px #ffffff;
  animation: pulse-dot 1.5s infinite;
  flex-shrink: 0;
}

@keyframes pulse-dot {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

.btn-cosmetic-tel {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 12px 22px;
  border-radius: 14px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.btn-cosmetic-tel:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
}

.cta-tel-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
}

.cta-txt-wrap {
  display: flex;
  flex-direction: column;
}

.cta-txt-wrap strong {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.25;
}

.cta-txt-wrap span {
  font-size: 0.78rem;
  opacity: 0.88;
}

.cosmetic-hero-guarantees {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.76rem;
  color: #94a3b8;
}

.cosmetic-hero-guarantees span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cosmetic-hero-card {
  position: relative;
  border-radius: 20px;
  overflow: visible;
}

.cosmetic-hero-img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  display: block;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
  border: 2px solid rgba(251, 191, 36, 0.35);
  transition: transform 0.3s ease;
}

.cosmetic-hero-card:hover .cosmetic-hero-img {
  transform: scale(1.015);
}

.hero-floating-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(6, 22, 46, 0.92);
  border: 1px solid rgba(251, 191, 36, 0.45);
  backdrop-filter: blur(12px);
  padding: 10px 16px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  z-index: 3;
}

.badge-top-right {
  top: -16px;
  right: -16px;
}

.badge-bottom-left {
  bottom: -16px;
  left: -16px;
}

.hero-floating-badge .badge-icon {
  font-size: 1.35rem;
}

.hero-floating-badge strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fde68a;
  line-height: 1.2;
}

.hero-floating-badge small {
  display: block;
  font-size: 0.72rem;
  color: #cbd5e1;
}

/* Feature Showcase */
.cosmetic-showcase-section {
  background: #ffffff;
  padding: 70px 0;
}

.cosmetic-feature-row {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 50px;
  align-items: center;
}

.feature-img-wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
  border: 1px solid #e2e8f0;
}

.feature-img-luxury {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}

.feature-img-wrap:hover .feature-img-luxury {
  transform: scale(1.025);
}

.feature-caption-bar {
  background: #06162e;
  color: #ffffff;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  font-weight: 500;
}

.badge-gold-mini {
  background: #d97706;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.feature-title {
  font-size: clamp(1.65rem, 2.5vw, 2.25rem);
  font-weight: 800;
  color: #06162e;
  line-height: 1.28;
  margin: 14px 0 16px 0;
}

.feature-lead {
  font-size: 1.02rem;
  line-height: 1.68;
  color: #475569;
  margin-bottom: 24px;
}

.feature-check-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
}

.feature-check-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.check-icon-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e0f2fe;
  color: #0284c7;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.feature-check-item strong {
  display: block;
  font-size: 0.98rem;
  color: #0f172a;
  margin-bottom: 4px;
}

.feature-check-item p {
  margin: 0;
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.5;
}

.feature-action-strip {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 24px;
}

.feature-action-strip .btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, #059669 0%, #06c755 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 13px 26px !important;
  border-radius: 12px !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(6, 199, 85, 0.35) !important;
  text-decoration: none !important;
  transition: all 0.22s ease !important;
}

.feature-action-strip .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(6, 199, 85, 0.45) !important;
  filter: brightness(1.05) !important;
}

.feature-action-strip .btn-outline,
.feature-action-strip .btn-tel-dark,
.feature-action-strip .btn-feature-tel,
.feature-action-strip .btn-outline-dark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  padding: 13px 26px !important;
  border-radius: 12px !important;
  border: 2px solid #cbd5e1 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06) !important;
  text-decoration: none !important;
  transition: all 0.22s ease !important;
  cursor: pointer !important;
}

.feature-action-strip .btn-outline:hover,
.feature-action-strip .btn-tel-dark:hover,
.feature-action-strip .btn-feature-tel:hover,
.feature-action-strip .btn-outline-dark:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(2, 132, 199, 0.3) !important;
}

@media (max-width: 640px) {
  .feature-action-strip {
    flex-direction: column;
    align-items: stretch;
  }
  .feature-action-strip a {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Certificates Showcase */
.certificates-showcase-section {
  background: #f8fafc;
  padding: 70px 0;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.certificates-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 36px;
}

.certificate-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.certificate-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.cert-img-frame {
  background: #f1f5f9;
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cert-img-frame img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.cert-info {
  padding: 20px;
}

.cert-tag {
  display: inline-block;
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.cert-info h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px 0;
}

.cert-info p {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}

.cert-trust-banner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
  padding: 24px;
}

.tb-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.tb-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
}

.tb-item strong {
  display: block;
  font-size: 0.95rem;
  color: #0f172a;
  margin-bottom: 4px;
}

.tb-item span {
  font-size: 0.82rem;
  color: #64748b;
  line-height: 1.45;
}

/* Bento Product Grid */
.cosmetic-bento-section {
  background: #ffffff;
  padding: 70px 0;
}

.cosmetic-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.bento-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 26px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.bento-card:hover {
  transform: translateY(-3px);
  border-color: #0284c7;
  box-shadow: 0 10px 24px rgba(2, 132, 199, 0.08);
  background: #ffffff;
}

.bento-icon {
  font-size: 2.2rem;
  margin-bottom: 14px;
}

.bento-card h3 {
  font-size: 1.18rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px 0;
}

.bento-card p {
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.55;
  margin-bottom: 14px;
}

.bento-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.8rem;
  color: #0369a1;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Workflow Steps */
.cosmetic-workflow-section {
  background: #f8fafc;
  padding: 70px 0;
}

.cosmetic-steps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.cosmetic-step-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.step-card-highlight {
  border: 2px solid #0284c7;
  background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%);
}

.step-num-pill {
  display: inline-block;
  align-self: flex-start;
  background: #06162e;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.step-card-highlight .step-num-pill {
  background: #0284c7;
}

.cosmetic-step-card h4 {
  font-size: 0.98rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px 0;
  line-height: 1.35;
}

.cosmetic-step-card p {
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0 0 14px 0;
  flex-grow: 1;
}

.step-time {
  font-size: 0.74rem;
  font-weight: 700;
  color: #059669;
  border-top: 1px dashed #e2e8f0;
  padding-top: 10px;
}

/* Comparison Section */
.cosmetic-comparison-section {
  background: #ffffff;
  padding: 70px 0;
}

.cosmetic-comp-wrap {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}

.comp-table th {
  padding: 16px 20px;
  font-size: 0.95rem;
}

.comp-table td {
  padding: 16px 20px;
  font-size: 0.88rem;
  border-bottom: 1px solid #f1f5f9;
}

.text-green {
  color: #059669;
  font-weight: 600;
}

.text-gray {
  color: #94a3b8;
}

/* Pricing Section */
.cosmetic-pricing-section {
  background: #f8fafc;
  padding: 70px 0;
}

.cosmetic-packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: stretch;
}

.package-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.package-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.1);
}

.package-featured {
  border: 2px solid #0284c7;
  box-shadow: 0 10px 30px rgba(2, 132, 199, 0.15);
}

.pkg-popular-tag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 16px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}

.pkg-badge {
  display: inline-block;
  background: #f1f5f9;
  color: #475569;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.badge-featured {
  background: #e0f2fe;
  color: #0369a1;
}

.pkg-header h3 {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 10px 0;
}

.pkg-header p {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 20px;
}

.pkg-features ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pkg-features li {
  font-size: 0.86rem;
  color: #334155;
  line-height: 1.45;
}

.pkg-sla {
  border-top: 1px dashed #e2e8f0;
  padding: 14px 0;
  font-size: 0.82rem;
  color: #0f172a;
  text-align: center;
}

.pkg-sla strong {
  color: #059669;
}

.pkg-action {
  margin-top: 8px;
}

/* Reviews Section */
.cosmetic-reviews-section {
  background: #ffffff;
  padding: 70px 0;
}

.cosmetic-reviews-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.review-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.review-stars {
  color: #f59e0b;
  font-size: 1.1rem;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.review-comment {
  font-size: 0.86rem;
  color: #334155;
  line-height: 1.6;
  margin: 0 0 18px 0;
  flex-grow: 1;
  font-style: italic;
}

.review-author {
  display: flex;
  gap: 12px;
  align-items: center;
  border-top: 1px solid #e2e8f0;
  padding-top: 14px;
}

.author-avatar {
  font-size: 1.8rem;
}

.review-author strong {
  display: block;
  font-size: 0.9rem;
  color: #0f172a;
}

.review-author span {
  display: block;
  font-size: 0.74rem;
  color: #64748b;
}

/* QR Code */
.qr-scan-wrap {
  text-align: center;
  margin-bottom: 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 16px;
}

.qr-scan-img {
  border-radius: 10px;
  border: 2px solid #06c755;
  background: #ffffff;
  padding: 4px;
  display: block;
  margin: 0 auto 8px auto;
}

.qr-scan-wrap small {
  display: block;
  font-size: 0.76rem;
  color: #e2e8f0;
}

/* ==========================================================================
   RESPONSIVE DESIGN BREAKPOINTS FOR COSMETIC FDA
   ========================================================================== */
@media (max-width: 1090px) {
  .cosmetic-hero-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .cosmetic-hero-image-col {
    max-width: 600px;
    margin: 0 auto;
  }
  .cosmetic-feature-row {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .certificates-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cosmetic-bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cosmetic-steps-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .cosmetic-packages-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
  }
  .cosmetic-reviews-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cert-trust-banner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .cosmetic-hero-section {
    padding: 2rem 1rem 3rem 1rem;
  }
  .cosmetic-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .certificates-grid {
    grid-template-columns: 1fr;
  }
  .cosmetic-bento-grid {
    grid-template-columns: 1fr;
  }
  .cosmetic-steps-grid {
    grid-template-columns: 1fr;
  }
  .cosmetic-reviews-grid {
    grid-template-columns: 1fr;
  }
  .hero-floating-badge {
    position: static;
    margin-top: 10px;
  }
}


/* ==========================================================================
   WEBSITE DEVELOPMENT LANDING PAGE STYLES (/บริการของเรา/บริการพัฒนาเว็บไซต์/)
   ========================================================================== */

.webdev-hero-section {
  position: relative;
  background: linear-gradient(135deg, #06162e 0%, #0d2a4a 50%, #0284c7 100%);
  color: #ffffff;
  padding: 3.5rem 1.5rem 4.5rem 1.5rem;
  overflow: hidden;
}

.webdev-hero-glow {
  position: absolute;
  top: -150px;
  right: -100px;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(2, 132, 199, 0.25) 0%, rgba(6, 199, 85, 0.15) 40%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.webdev-hero-container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
}

.webdev-hero-title {
  font-size: clamp(1.85rem, 3.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.22;
  color: #ffffff;
  margin: 0 0 16px 0;
  letter-spacing: -0.02em;
}

.webdev-hero-subtitle {
  display: block;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 600;
  color: #38bdf8;
  margin-top: 6px;
}

.webdev-hero-desc {
  font-size: 1rem;
  line-height: 1.68;
  color: #e2e8f0;
  margin-bottom: 24px;
}

.webdev-hero-desc strong {
  color: #fde68a;
}

.webdev-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}

.webdev-metric-item {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 12px 10px;
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.webdev-metric-item:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.6);
}

.webdev-metric-num {
  display: block;
  font-size: 1.38rem;
  font-weight: 800;
  color: #38bdf8;
  line-height: 1.1;
  margin-bottom: 4px;
}

.webdev-metric-lbl {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: #cbd5e1;
}

.webdev-hero-cta-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.btn-webdev-line {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #06c755 0%, #05a847 100%);
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 14px 22px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(6, 199, 85, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-webdev-line:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(6, 199, 85, 0.45);
}

.btn-webdev-tel {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 12px 22px;
  border-radius: 14px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.btn-webdev-tel:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
}

.webdev-hero-guarantees {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.76rem;
  color: #94a3b8;
}

.webdev-hero-card {
  position: relative;
  border-radius: 20px;
  overflow: visible;
}

.webdev-hero-img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  display: block;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
  border: 2px solid rgba(56, 189, 248, 0.35);
  transition: transform 0.3s ease;
}

.webdev-hero-card:hover .webdev-hero-img {
  transform: scale(1.015);
}

/* ==========================================================================
   RRCT DRONE SERVICES CASE STUDY SHOWCASE
   ========================================================================== */

.rrct-showcase-section {
  background: #ffffff;
  padding: 75px 0;
}

.case-story-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 32px 28px;
  margin-bottom: 40px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.case-story-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.case-story-col {
  display: flex;
  flex-direction: column;
}

.case-badge-pill {
  display: inline-block;
  align-self: flex-start;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.case-badge-pill.pill-blue {
  background: #e0f2fe;
  color: #0369a1;
  border-color: #bae6fd;
}

.case-badge-pill.pill-green {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

.case-story-col h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px 0;
  line-height: 1.35;
}

.case-story-col p {
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.6;
  margin: 0;
}

.showcase-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 36px;
}

.showcase-item-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.showcase-item-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.1);
}

.showcase-img-wrap {
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  padding: 8px;
  overflow: hidden;
}

.showcase-img-wrap img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  transition: transform 0.3s ease;
}

.showcase-item-card:hover .showcase-img-wrap img {
  transform: scale(1.02);
}

.showcase-content {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.showcase-tag {
  display: inline-block;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
  align-self: flex-start;
}

.showcase-content h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px 0;
  line-height: 1.35;
}

.showcase-content p {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.55;
  margin: 0 0 16px 0;
  flex-grow: 1;
}

.showcase-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px dashed #e2e8f0;
  padding-top: 12px;
  font-size: 0.78rem;
  color: #334155;
}

.showcase-meta strong {
  color: #0284c7;
}

.live-proof-cta-bar {
  background: linear-gradient(135deg, #06162e 0%, #0b2545 100%);
  color: #ffffff;
  border-radius: 20px;
  padding: 30px 36px;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 28px;
  align-items: center;
  box-shadow: 0 12px 35px rgba(6, 22, 46, 0.25);
}

.lp-badge {
  display: inline-block;
  background: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.live-proof-cta-bar h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px 0;
  line-height: 1.35;
}

.highlight-kw {
  color: #fde68a;
  background: rgba(245, 158, 11, 0.2);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(251, 191, 36, 0.35);
}

.live-proof-cta-bar p {
  font-size: 0.88rem;
  color: #cbd5e1;
  margin: 0;
  line-height: 1.5;
}

/* ==========================================================================
   6 PILLARS SECTION
   ========================================================================== */

.webdev-pillars-section {
  background: #f8fafc;
  padding: 70px 0;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

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

.pillar-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 26px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pillar-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.pillar-icon {
  font-size: 2.2rem;
  margin-bottom: 14px;
}

.pillar-card h3 {
  font-size: 1.12rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px 0;
}

.pillar-card p {
  font-size: 0.86rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

/* ==========================================================================
   BENTO WEB TYPES GRID
   ========================================================================== */

.webdev-bento-section {
  background: #ffffff;
  padding: 70px 0;
}

.webdev-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.wb-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 26px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.wb-card:hover {
  transform: translateY(-3px);
  border-color: #0284c7;
  box-shadow: 0 10px 24px rgba(2, 132, 199, 0.08);
  background: #ffffff;
}

.wb-highlight {
  border: 2px solid #0284c7;
  background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%);
}

.wb-icon {
  font-size: 2.2rem;
  margin-bottom: 14px;
}

.wb-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px 0;
}

.wb-card p {
  font-size: 0.86rem;
  color: #64748b;
  line-height: 1.55;
  margin-bottom: 14px;
}

.wb-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.8rem;
  color: #0369a1;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ==========================================================================
   4-STEP AGILE PROCESS
   ========================================================================== */

.webdev-process-section {
  background: #f8fafc;
  padding: 70px 0;
}

.webdev-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.webdev-step-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.w-step-highlight {
  border: 2px solid #0284c7;
  background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%);
}

.w-step-num {
  display: inline-block;
  align-self: flex-start;
  background: #06162e;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.w-step-highlight .w-step-num {
  background: #0284c7;
}

.webdev-step-card h4 {
  font-size: 1.02rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px 0;
}

.webdev-step-card p {
  font-size: 0.82rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0 0 14px 0;
  flex-grow: 1;
}

.w-step-time {
  font-size: 0.74rem;
  font-weight: 700;
  color: #059669;
  border-top: 1px dashed #e2e8f0;
  padding-top: 10px;
}

/* ==========================================================================
   COMPARISON & PRICING
   ========================================================================== */

.webdev-comparison-section {
  background: #ffffff;
  padding: 70px 0;
}

.webdev-comp-wrap {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}

.webdev-pricing-section {
  background: #f8fafc;
  padding: 70px 0;
}

.webdev-packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: stretch;
}

/* ==========================================================================
   RESPONSIVE DESIGN BREAKPOINTS FOR WEB DEV
   ========================================================================== */
@media (max-width: 1090px) {
  .webdev-hero-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .webdev-hero-image-col {
    max-width: 600px;
    margin: 0 auto;
  }
  .case-story-grid {
    grid-template-columns: 1fr;
  }
  .showcase-gallery-grid {
    grid-template-columns: 1fr;
    max-width: 550px;
    margin: 0 auto 36px auto;
  }
  .live-proof-cta-bar {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .webdev-bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .webdev-steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .webdev-packages-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .webdev-hero-section {
    padding: 2rem 1rem 3rem 1rem;
  }
  .webdev-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pillars-grid {
    grid-template-columns: 1fr;
  }
  .webdev-bento-grid {
    grid-template-columns: 1fr;
  }
  .webdev-steps-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   UNIVERSAL HIGH-CONTRAST CLOSING CTA BOX & BUTTON STYLES
   ========================================================================== */
.closing-cta-box {
  background: #ffffff !important;
  color: #0f172a !important;
  padding: 26px 24px !important;
  border-radius: 20px !important;
  text-align: center !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 14px !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
}

.closing-cta-box .qr-scan-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  background: #f8fafc !important;
  padding: 14px 18px !important;
  border-radius: 14px !important;
  border: 1px solid #e2e8f0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.closing-cta-box .qr-scan-wrap img,
.closing-cta-box .qr-scan-img {
  border-radius: 12px !important;
  border: 2px solid #06c755 !important;
  box-shadow: 0 4px 12px rgba(6, 199, 85, 0.2) !important;
}

.closing-cta-box .qr-scan-wrap small,
.closing-cta-box .qr-scan-hint {
  color: #475569 !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  text-align: center !important;
}

.btn-line-cta-green,
.closing-cta-box .btn-line-cta-green,
.closing-cta-box .btn-primary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: linear-gradient(135deg, #06c755 0%, #05a847 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  padding: 14px 20px !important;
  border-radius: 12px !important;
  border: none !important;
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(6, 199, 85, 0.35) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
  cursor: pointer !important;
}

.btn-line-cta-green:hover,
.closing-cta-box .btn-line-cta-green:hover,
.closing-cta-box .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(6, 199, 85, 0.45) !important;
  filter: brightness(1.05) !important;
  color: #ffffff !important;
}

.btn-tel-cta-dark,
.closing-cta-box .btn-tel-cta-dark,
.closing-cta-box .btn-outline-white {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  padding: 13px 18px !important;
  border-radius: 12px !important;
  border: 2px solid #cbd5e1 !important;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.btn-tel-cta-dark:hover,
.closing-cta-box .btn-tel-cta-dark:hover,
.closing-cta-box .btn-outline-white:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.3) !important;
}


/* ==========================================================================
   DEDICATED STYLES FOR LINE CHATBOT LANDING PAGE (HIGH-CONVERSION CRO)
   ========================================================================== */

/* Hero Section */
.chatbot-hero-section {
  background: linear-gradient(135deg, #06162e 0%, #0b2545 50%, #0d3868 100%);
  color: #ffffff;
  padding: 3.5rem 1.5rem 4rem 1.5rem;
  border-radius: 24px;
  margin: 1.5rem 0 3rem 0;
  box-shadow: 0 20px 50px rgba(6, 22, 46, 0.25);
  position: relative;
  overflow: hidden;
}

.chatbot-hero-section::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(6, 199, 85, 0.15) 0%, rgba(2, 132, 199, 0.08) 50%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.chatbot-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.chatbot-hero-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.hero-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(6, 199, 85, 0.15);
  border: 1px solid rgba(6, 199, 85, 0.35);
  color: #86efac;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 700;
  width: fit-content;
  box-shadow: 0 4px 12px rgba(6, 199, 85, 0.15);
}

.chatbot-hero-content h1 {
  font-size: clamp(1.85rem, 3.2vw, 2.75rem);
  font-weight: 900;
  line-height: 1.28;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.02em;
}

.chatbot-hero-content .hero-highlight-green {
  color: #06c755;
  background: linear-gradient(135deg, #06c755 0%, #34d399 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.chatbot-hero-content p.hero-subtitle {
  font-size: 1.05rem;
  line-height: 1.68;
  color: #cbd5e1;
  margin: 0;
}

/* Metric Strip */
.chatbot-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0.75rem 0 1.25rem 0;
}

.chatbot-metric-box {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 12px 10px;
  text-align: center;
  backdrop-filter: blur(8px);
}

.chatbot-metric-num {
  display: block;
  font-size: 1.35rem;
  font-weight: 900;
  color: #38bdf8;
  line-height: 1.2;
}

.chatbot-metric-box:first-child .chatbot-metric-num {
  color: #86efac;
}

.chatbot-metric-lbl {
  display: block;
  font-size: 0.78rem;
  color: #cbd5e1;
  margin-top: 4px;
  font-weight: 500;
}

/* Hero CTA Row */
.chatbot-hero-cta-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.btn-chatbot-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #06c755 0%, #05a847 100%);
  color: #ffffff !important;
  font-size: 1.05rem;
  font-weight: 800;
  padding: 14px 24px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(6, 199, 85, 0.4);
  transition: all 0.2s ease;
}

.btn-chatbot-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(6, 199, 85, 0.55);
  color: #ffffff !important;
}

.btn-chatbot-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff !important;
  font-size: 1rem;
  font-weight: 700;
  padding: 14px 22px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: all 0.2s ease;
}

.btn-chatbot-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #38bdf8;
  color: #ffffff !important;
  transform: translateY(-2px);
}

.hero-trust-bullets {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.85rem;
  color: #94a3b8;
  font-weight: 500;
}

.hero-trust-bullets span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #cbd5e1;
}

.hero-trust-bullets span strong {
  color: #86efac;
}

/* Hero Visual Showcase */
.chatbot-hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-device-frame {
  background: #091a32;
  border: 3px solid rgba(56, 189, 248, 0.35);
  border-radius: 24px;
  padding: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  max-width: 440px;
  width: 100%;
  position: relative;
}

.hero-device-frame img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
}

.floating-hero-pill {
  position: absolute;
  background: rgba(9, 27, 52, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.floating-hero-pill.pill-top-right {
  top: -15px;
  right: -15px;
  border-color: rgba(6, 199, 85, 0.4);
}

.floating-hero-pill.pill-bottom-left {
  bottom: -15px;
  left: -15px;
  border-color: rgba(56, 189, 248, 0.4);
}

.pill-icon {
  font-size: 1.35rem;
}

.pill-text strong {
  display: block;
  font-size: 0.85rem;
  color: #ffffff;
  line-height: 1.2;
}

.pill-text small {
  display: block;
  font-size: 0.74rem;
  color: #94a3b8;
  margin-top: 2px;
}

/* Pain Point vs Solution Section */
.chatbot-pain-section {
  margin: 3.5rem 0;
}

.section-centered-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 2.5rem auto;
}

.section-tag-pill {
  display: inline-block;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 10px;
  border: 1px solid #bae6fd;
}

.section-centered-header h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.25rem);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  margin: 0 0 12px 0;
}

.section-centered-header p {
  font-size: 1.02rem;
  color: #475569;
  line-height: 1.65;
  margin: 0;
}

.pain-solution-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.pain-col-card {
  background: #fff1f2;
  border: 1.5px solid #fecdd3;
  border-radius: 18px;
  padding: 28px 24px;
}

.solution-col-card {
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  border-radius: 18px;
  padding: 28px 24px;
}

.card-status-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.pain-col-card .card-status-title {
  color: #be123c;
}

.solution-col-card .card-status-title {
  color: #15803d;
}

.pain-list, .solution-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pain-list li, .solution-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #334155;
}

.pain-list li strong {
  color: #9f1239;
}

.solution-list li strong {
  color: #166534;
}

.bullet-icon {
  font-size: 1.15rem;
  flex-shrink: 0;
  line-height: 1.3;
}

/* 6 Core Capabilities Bento Grid */
.chatbot-bento-section {
  margin: 4rem 0;
}

.bento-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.bento-feature-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 26px 22px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bento-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.09);
  border-color: #06c755;
}

.feature-icon-badge {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  background: linear-gradient(135deg, #e0f2fe 0%, #dcfce7 100%);
  border: 1px solid #bae6fd;
}

.bento-feature-card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.35;
}

.bento-feature-card p {
  font-size: 0.92rem;
  color: #475569;
  line-height: 1.6;
  margin: 0;
  flex-grow: 1;
}

.feature-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.feature-tag-list span {
  font-size: 0.76rem;
  font-weight: 600;
  background: #f1f5f9;
  color: #334155;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

/* Industry Showcase Section (Replaces broken layout in User Screenshot) */
.chatbot-industry-section {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 3.5rem 2rem;
  margin: 4rem 0;
}

.industry-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.industry-box-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.2s ease;
}

.industry-box-card:hover {
  transform: translateY(-3px);
  border-color: #0284c7;
  box-shadow: 0 12px 24px rgba(2, 132, 199, 0.1);
}

.ind-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ind-icon {
  font-size: 1.75rem;
  flex-shrink: 0;
}

.industry-box-card h4 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.industry-box-card p {
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.55;
  margin: 0;
}

.ind-sample-pill {
  font-size: 0.78rem;
  color: #0369a1;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 6px;
  padding: 4px 8px;
  font-weight: 600;
  margin-top: 4px;
  width: fit-content;
}

/* Live Demo CTA Ribbon */
.chatbot-live-ribbon {
  background: linear-gradient(135deg, #091b34 0%, #0d4b7a 100%);
  color: #ffffff;
  border-radius: 20px;
  padding: 32px 30px;
  margin: 3.5rem 0;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 28px;
  align-items: center;
  box-shadow: 0 16px 40px rgba(9, 27, 52, 0.2);
}

.ribbon-text-col h3 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 10px 0;
}

.ribbon-text-col p {
  font-size: 0.98rem;
  color: #cbd5e1;
  line-height: 1.6;
  margin: 0;
}

.ribbon-qr-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

.ribbon-qr-box img {
  border-radius: 12px;
  border: 2px solid #06c755;
  background: #ffffff;
  padding: 4px;
}

.ribbon-qr-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ribbon-qr-info strong {
  color: #86efac;
  font-size: 0.92rem;
}

/* Pricing Section */
.chatbot-pricing-section {
  margin: 4rem 0;
}

.pricing-packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.pricing-plan-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pricing-plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
}

.pricing-plan-card.is-popular {
  border: 2px solid #06c755;
  box-shadow: 0 12px 32px rgba(6, 199, 85, 0.18);
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
}

.popular-badge-pill {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #06c755 0%, #05a847 100%);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(6, 199, 85, 0.35);
  letter-spacing: 0.02em;
}

.plan-header {
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.plan-tier-name {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px 0;
}

.plan-desc {
  font-size: 0.85rem;
  color: #64748b;
  margin: 0 0 14px 0;
  min-height: 38px;
  line-height: 1.45;
}

.plan-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.plan-price-val {
  font-size: 2.15rem;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.is-popular .plan-price-val {
  color: #059669;
}

.plan-price-period {
  font-size: 0.85rem;
  color: #64748b;
  font-weight: 600;
}

.plan-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}

.plan-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  color: #334155;
  line-height: 1.45;
}

.plan-features-list li strong {
  color: #0f172a;
}

.check-green {
  color: #06c755;
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1.2;
}

.btn-plan-select {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 18px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.2s ease;
  margin-top: auto;
}

.btn-plan-outline {
  background: #f8fafc;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1;
}

.btn-plan-outline:hover {
  background: #0284c7;
  color: #ffffff !important;
  border-color: #0284c7;
}

.btn-plan-solid {
  background: linear-gradient(135deg, #06c755 0%, #05a847 100%);
  color: #ffffff !important;
  border: none;
  box-shadow: 0 6px 18px rgba(6, 199, 85, 0.35);
}

.btn-plan-solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(6, 199, 85, 0.5);
  color: #ffffff !important;
}

/* 4-Step Process Section */
.chatbot-process-section {
  margin: 4rem 0;
}

.process-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.process-step-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px 18px;
  position: relative;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
}

.step-number-bubble {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  margin-bottom: 14px;
}

.process-step-card h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 8px 0;
}

.process-step-card p {
  font-size: 0.86rem;
  color: #64748b;
  line-height: 1.55;
  margin: 0;
}

/* FAQ Section */
.chatbot-faq-section {
  margin: 4rem 0 3rem 0;
}

.chatbot-faq-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 860px;
  margin: 0 auto;
}

.faq-card-item {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: border-color 0.2s ease;
}

.faq-card-item:hover {
  border-color: #38bdf8;
}

.faq-question-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.08rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 8px 0;
}

.faq-q-badge {
  background: #e0f2fe;
  color: #0369a1;
  font-size: 0.85rem;
  font-weight: 900;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.faq-answer-body {
  font-size: 0.94rem;
  color: #475569;
  line-height: 1.65;
  margin: 0;
  padding-left: 38px;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .chatbot-hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .chatbot-hero-visual {
    max-width: 480px;
    margin: 0 auto;
  }
  .pain-solution-grid {
    grid-template-columns: 1fr;
  }
  .bento-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .industry-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pricing-packages-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
  }
  .process-steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .chatbot-live-ribbon {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .ribbon-qr-box {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .chatbot-hero-section {
    padding: 2.5rem 1.25rem 3rem 1.25rem;
  }
  .chatbot-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .bento-features-grid {
    grid-template-columns: 1fr;
  }
  .industry-cards-grid {
    grid-template-columns: 1fr;
  }
  .process-steps-grid {
    grid-template-columns: 1fr;
  }
  .hero-cta-buttons {
    flex-direction: column;
  }
  .btn-chatbot-primary, .btn-chatbot-secondary {
    width: 100%;
    box-sizing: border-box;
  }
  .faq-answer-body {
    padding-left: 0;
    margin-top: 8px;
  }
}

/* ==========================================================================
   DEDICATED STYLES FOR CENTRAL SERVICES HUB PAGE (/บริการของเรา/)
   ========================================================================== */

/* Hub Hero Section */
.hub-hero-section {
  background: linear-gradient(135deg, #06162e 0%, #0b2545 55%, #083363 100%);
  color: #ffffff;
  padding: 3.5rem 1.5rem 4rem 1.5rem;
  border-radius: 24px;
  margin: 1.5rem 0 3rem 0;
  box-shadow: 0 20px 50px rgba(6, 22, 46, 0.28);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.hub-hero-section::before {
  content: "";
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 750px;
  height: 450px;
  background: radial-gradient(circle, rgba(2, 132, 199, 0.2) 0%, rgba(6, 199, 85, 0.1) 45%, transparent 70%);
  pointer-events: none;
}

.hub-hero-inner {
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.hub-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(2, 132, 199, 0.18);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #7dd3fc;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}

.hub-hero-inner h1 {
  font-size: clamp(1.95rem, 3.4vw, 2.85rem);
  font-weight: 900;
  line-height: 1.28;
  color: #ffffff;
  margin: 0 0 16px 0;
  letter-spacing: -0.02em;
}

.hub-hero-inner .hub-gold-highlight {
  color: #fbbf24;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hub-hero-inner p.hub-hero-subtitle {
  font-size: 1.08rem;
  line-height: 1.7;
  color: #cbd5e1;
  margin: 0 auto 26px auto;
  max-width: 840px;
}

/* Category Filter Navigation Bar */
.hub-category-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 24px 0 28px 0;
}

.hub-cat-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: all 0.2s ease;
}

.hub-cat-link:hover, .hub-cat-link.active {
  background: #0284c7;
  border-color: #38bdf8;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}

/* Hero Action CTAs */
.hub-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.btn-hub-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #06c755 0%, #05a847 100%);
  color: #ffffff !important;
  font-size: 1.02rem;
  font-weight: 800;
  padding: 13px 24px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(6, 199, 85, 0.4);
  transition: all 0.2s ease;
}

.btn-hub-line:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(6, 199, 85, 0.55);
  color: #ffffff !important;
}

.btn-hub-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff !important;
  font-size: 1rem;
  font-weight: 700;
  padding: 13px 22px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-hub-phone:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: #38bdf8;
  color: #ffffff !important;
  transform: translateY(-2px);
}

/* Pillar Section Header */
.hub-pillar-section {
  margin: 4rem 0 2rem 0;
}

.pillar-header {
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 16px;
  margin-bottom: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.pillar-title-group h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.95rem);
  font-weight: 900;
  color: #0f172a;
  margin: 0 0 6px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.pillar-title-group p {
  font-size: 0.98rem;
  color: #64748b;
  margin: 0;
}

.pillar-badge {
  background: #f1f5f9;
  color: #334155;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

/* Service Cards Grid (3 Columns) */
.hub-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.hub-service-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.hub-service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
  border-color: #0284c7;
}

/* Image Thumbnail Container (High-Resolution 16:9 Banner) */
.hsc-media-wrap {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: #f1f5f9;
}

.hsc-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.hub-service-card:hover .hsc-img {
  transform: scale(1.05);
}

.hsc-turnaround-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(9, 27, 52, 0.92);
  color: #38bdf8;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: 8px;
  border: 1px solid rgba(56, 189, 248, 0.4);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.01em;
}

.hsc-body {
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.hsc-category-tag {
  font-size: 0.76rem;
  font-weight: 700;
  color: #0284c7;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  display: inline-block;
}

.hsc-title {
  font-size: 1.18rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.35;
  margin: 0 0 10px 0;
}

.hsc-title a {
  color: #0f172a;
  text-decoration: none;
  transition: color 0.2s ease;
}

.hsc-title a:hover {
  color: #0284c7;
}

.hsc-desc {
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.55;
  margin: 0 0 16px 0;
}

.hsc-deliverables {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px dashed #e2e8f0;
  padding-top: 14px;
}

.hsc-deliverables li {
  font-size: 0.84rem;
  color: #334155;
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.hsc-deliverables li strong {
  color: #0f172a;
}

.hsc-footer {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
}

.btn-hsc-details {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  color: #0284c7 !important;
  border: 1.5px solid #cbd5e1;
  font-size: 0.86rem;
  font-weight: 800;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-hsc-details:hover {
  background: #0284c7;
  color: #ffffff !important;
  border-color: #0284c7;
}

.btn-hsc-consult {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #06c755 0%, #05a847 100%);
  color: #ffffff !important;
  font-size: 0.84rem;
  font-weight: 800;
  padding: 10px 10px;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 3px 8px rgba(6, 199, 85, 0.25);
  transition: all 0.2s ease;
}

.btn-hsc-consult:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* Trust & Guarantee Banner */
.hub-trust-guarantee-bar {
  background: linear-gradient(135deg, #06162e 0%, #0c2b52 100%);
  color: #ffffff;
  border-radius: 20px;
  padding: 38px 30px;
  margin: 4.5rem 0 3rem 0;
  box-shadow: 0 16px 40px rgba(6, 22, 46, 0.2);
}

.trust-bar-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 30px auto;
}

.trust-bar-header h3 {
  font-size: 1.7rem;
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 10px 0;
}

.trust-bar-header p {
  color: #94a3b8;
  font-size: 0.96rem;
  margin: 0;
}

.trust-pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.trust-pillar-item {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 20px 16px;
  text-align: center;
  backdrop-filter: blur(8px);
}

.pillar-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin: 0 auto 12px auto;
}

.trust-pillar-item h4 {
  font-size: 1rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 6px 0;
}

.trust-pillar-item p {
  font-size: 0.82rem;
  color: #cbd5e1;
  line-height: 1.45;
  margin: 0;
}

/* FAQ Section */
.hub-faq-section {
  margin: 3.5rem 0 2rem 0;
}

.hub-faq-container {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .hub-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .trust-pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .hub-hero-section {
    padding: 2.5rem 1.25rem 3rem 1.25rem;
  }
  .hub-cards-grid {
    grid-template-columns: 1fr;
  }
  .trust-pillars-grid {
    grid-template-columns: 1fr;
  }
  .hsc-media-wrap {
    height: 180px;
  }
  .hsc-footer {
    grid-template-columns: 1fr;
  }
  .btn-hsc-details, .btn-hsc-consult {
    width: 100%;
    box-sizing: border-box;
  }
  .hub-hero-ctas {
    flex-direction: column;
  }
  .btn-hub-line, .btn-hub-phone {
    width: 100%;
    box-sizing: border-box;
  }
}