/* Premium preview mode. Existing design is untouched unless body has .design-preview. */
body.design-preview {
  --pv-nav-w: 122px;
  --pv-nav-gap: 16px;
  --pv-ink: #080c14;
  --pv-ink-2: #1f2937;
  --pv-muted: #667085;
  --pv-line: rgba(8, 12, 20, .10);
  --pv-line-strong: rgba(8, 12, 20, .18);
  --pv-panel: rgba(255, 255, 255, .88);
  --pv-paper: #ffffff;
  --pv-bg: #edf2f8;
  --pv-accent: #2563eb;
  --pv-accent-deep: #0f4cd8;
  --pv-accent-soft: #dbeafe;
  --pv-navy: #0b1220;
  --pv-steel: #172033;
  --pv-shadow: 0 22px 58px rgba(8, 12, 20, .14);
  --pv-soft-shadow: 0 14px 34px rgba(8, 12, 20, .08);
  --pv-radius: 8px;
  --accent: var(--pv-accent);
  --bs-primary: #2563eb;
  --bs-primary-rgb: 37, 99, 235;
  --bs-link-color: #2563eb;
  --bs-link-hover-color: #0f4cd8;
  margin-bottom: 0;
  color: var(--pv-ink);
  background:
    radial-gradient(circle at 16% 0%, rgba(37, 99, 235, .12), transparent 28%),
    linear-gradient(180deg, #f8fafc 0%, #e8eef6 48%, #f6f8fb 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body.design-preview.skin-white {
  --pv-bg: #edf2f8;
  --pv-paper: rgba(255,255,255,.92);
  --pv-panel: rgba(255,255,255,.78);
  background:
    radial-gradient(circle at 16% 0%, rgba(37, 99, 235, .12), transparent 28%),
    linear-gradient(180deg, #f8fafc 0%, #e8eef6 48%, #f6f8fb 100%);
}

body.design-preview.skin-black {
  --pv-ink: #f8fafc;
  --pv-ink-2: #dbeafe;
  --pv-muted: #a8b3c7;
  --pv-line: rgba(255,255,255,.13);
  --pv-line-strong: rgba(255,255,255,.20);
  --pv-panel: rgba(15, 23, 42, .82);
  --pv-paper: rgba(15, 23, 42, .92);
  --pv-bg: #070b14;
  --pv-accent: #60a5fa;
  --pv-accent-deep: #2563eb;
  --pv-accent-soft: #dbeafe;
  --pv-shadow: 0 24px 70px rgba(0, 0, 0, .34);
  --pv-soft-shadow: 0 16px 42px rgba(0, 0, 0, .22);
  --accent: var(--pv-accent);
  --bs-primary: #60a5fa;
  --bs-primary-rgb: 96, 165, 250;
  --bs-link-color: #2563eb;
  --bs-link-hover-color: #1d4ed8;
  color: var(--pv-ink);
  background:
    radial-gradient(circle at 86% 12%, rgba(37, 99, 235, .40), transparent 30%),
    radial-gradient(circle at 12% 0%, rgba(96, 165, 250, .16), transparent 24%),
    linear-gradient(180deg, #050814 0%, #07111f 48%, #050814 100%);
}

body.design-preview.skin-blue {
  --pv-bg: #dceafe;
  --pv-paper: rgba(248, 251, 255, .92);
  --pv-panel: rgba(239, 246, 255, .78);
  --pv-line: rgba(29, 78, 216, .16);
  --pv-line-strong: rgba(29, 78, 216, .24);
  --pv-accent: #1d4ed8;
  --pv-accent-deep: #1e40af;
  --pv-accent-soft: #dbeafe;
  --accent: var(--pv-accent);
  --bs-primary: #1d4ed8;
  --bs-primary-rgb: 29, 78, 216;
  --bs-link-color: #1d4ed8;
  --bs-link-hover-color: #1e40af;
  background:
    radial-gradient(circle at 80% 8%, rgba(29, 78, 216, .22), transparent 28%),
    radial-gradient(circle at 8% 0%, rgba(96, 165, 250, .18), transparent 26%),
    linear-gradient(180deg, #eef6ff 0%, #cfe0fb 48%, #e7f1ff 100%);
}

body.design-preview *,
body.design-preview *::before,
body.design-preview *::after {
  letter-spacing: 0 !important;
}

body.design-preview a,
body.design-preview button,
body.design-preview .btn,
body.design-preview .skin-choice,
body.design-preview .skin-switcher-option,
body.design-preview .business-card,
body.design-preview .sf-card,
body.design-preview .build-card,
body.design-preview .maint-card,
body.design-preview .value-card,
body.design-preview .history-box,
body.design-preview .cert-card,
body.design-preview .partner-logo,
body.design-preview .reference-card,
body.design-preview .domain-card,
body.design-preview .level-card,
body.design-preview .capability-card,
body.design-preview .architecture-layer,
body.design-preview .info-box,
body.design-preview .map-box,
body.design-preview .office-photo,
body.design-preview .insight-copy,
body.design-preview .insight-media,
body.design-preview .command-copy,
body.design-preview .command-image,
body.design-preview .reference-profile,
body.design-preview .collaboration-card,
body.design-preview .quality-card,
body.design-preview .pillar-card,
body.design-preview .history-direction-card,
body.design-preview .system-scope-card,
body.design-preview .process-step,
body.design-preview .maintenance-step,
body.design-preview .contact-info-card,
body.design-preview .principle-card,
body.design-preview .output-card,
body.design-preview .summary-card,
body.design-preview .admin-panel {
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease,
    background-color .2s ease,
    color .2s ease;
}

body.design-preview main {
  background: var(--pv-bg);
}

body.design-preview .container {
  max-width: min(1400px, calc(100% - 56px));
}

body.design-preview main > section > .container {
  max-width: min(1400px, calc(100% - 56px)) !important;
}

body.design-preview .container-fluid {
  padding-left: max(28px, 4vw);
  padding-right: max(28px, 4vw);
}

/* Header */
body.design-preview .site-header {
  position: sticky;
  top: 0;
  z-index: 1040;
  border-bottom: 1px solid rgba(8, 12, 20, .08);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 28px rgba(8, 12, 20, .08);
  backdrop-filter: blur(18px);
}

body.design-preview .header-row {
  height: 82px;
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 0 34px;
  grid-template-columns: 230px minmax(0, 1fr) auto;
  column-gap: 24px;
}

body.design-preview #mainNavbar {
  height: 100%;
  align-items: stretch;
}

body.design-preview .site-header .navbar-brand {
  width: 212px;
  height: 44px;
}

body.design-preview .gnb {
  height: 100%;
  grid-template-columns: repeat(4, var(--pv-nav-w));
  gap: var(--pv-nav-gap);
  grid-auto-columns: unset;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  align-items: stretch;
}

body.design-preview .gnb-item {
  height: 100%;
  display: flex;
  align-items: center;
}

body.design-preview .gnb-link {
  min-width: 0;
  height: 100%;
  padding: 0 8px;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pv-ink-2);
  font-size: .98rem;
  font-weight: 900;
}

body.design-preview .gnb-link:hover,
body.design-preview .gnb-link.active {
  color: var(--pv-ink);
  background: transparent;
  box-shadow: none;
}

body.design-preview .gnb-link::after {
  display: block;
  bottom: 18px;
  width: 28px;
  height: 2px;
  border-radius: 999px;
  background: var(--pv-accent);
  opacity: 0;
  transform: translateX(-50%) scaleX(.55);
  transition: opacity .18s ease, transform .18s ease;
}

body.design-preview .gnb-link:hover::after,
body.design-preview .gnb-link.active::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

body.design-preview .admin-top-link {
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--pv-radius);
  border-color: rgba(8, 12, 20, .12);
  background: rgba(255, 255, 255, .86);
  color: var(--pv-ink);
  box-shadow: none;
}

body.design-preview .admin-top-link:hover {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, .28);
  box-shadow: 0 10px 24px rgba(37, 99, 235, .10);
}

body.design-preview .preview-top-link {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--pv-accent), var(--pv-accent-deep));
  box-shadow: 0 12px 24px rgba(37, 99, 235, .18);
}

body.design-preview .preview-top-link.is-active {
  background: linear-gradient(135deg, var(--pv-accent), #3b82f6 48%, var(--pv-accent-deep));
}

body.design-preview .skin-top-link {
  border-color: rgba(37, 99, 235, .22);
  background: #fff;
  color: var(--pv-ink);
}

body.design-preview .skin-top-link:hover {
  color: #fff;
  border-color: var(--pv-accent);
  background: var(--pv-accent);
}

body.design-preview .skin-switcher {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  color: rgba(255,255,255,.66);
  background: #050814;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 28px rgba(8, 12, 20, .14);
}

body.design-preview .skin-switcher-label {
  padding: 0 8px 0 10px;
  color: rgba(255,255,255,.58);
  font-size: .82rem;
  font-weight: 800;
}

body.design-preview .skin-switcher-option {
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: rgba(255,255,255,.62);
  background: transparent;
  font-size: .82rem;
  font-weight: 850;
  line-height: 1;
}

body.design-preview .skin-switcher-option:hover {
  color: #fff;
  background: rgba(255,255,255,.08);
}

body.design-preview .skin-switcher-option.is-active {
  color: #fff;
  border-color: rgba(255,255,255,.10);
  background: linear-gradient(135deg, var(--pv-accent-deep), var(--pv-accent));
  box-shadow: 0 8px 18px rgba(37, 99, 235, .26);
}

body.design-preview .mobile-skin-switcher {
  display: none;
}

body.design-preview .design-preview-bar {
  min-height: 42px;
  background: linear-gradient(90deg, #050814, #0b1220 58%, #2563eb);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

body.design-preview.skin-black .site-header {
  border-bottom-color: rgba(255,255,255,.12);
  background: rgba(5, 8, 20, .94);
  box-shadow: 0 18px 42px rgba(5, 8, 20, .22);
}

body.design-preview.skin-black .site-header .navbar-brand {
  padding: 0;
  background: transparent;
}

body.design-preview.skin-black .site-header .navbar-brand img {
  filter: brightness(0) invert(1);
}

body.design-preview.skin-black .gnb {
  border-color: transparent;
  background: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

body.design-preview.skin-black .gnb-link {
  color: rgba(255,255,255,.82);
}

body.design-preview.skin-black .gnb-link:hover,
body.design-preview.skin-black .gnb-link.active {
  color: #fff;
  background: transparent;
}

body.design-preview.skin-black .admin-top-link:not(.preview-top-link),
body.design-preview.skin-black .skin-top-link {
  border-color: rgba(255,255,255,.18);
  color: #fff;
  background: rgba(255,255,255,.08);
}

body.design-preview.skin-black .admin-top-link:not(.preview-top-link):hover,
body.design-preview.skin-black .skin-top-link:hover {
  color: #0b1220;
  border-color: #fff;
  background: #fff;
}

body.design-preview.skin-black .mega-menu {
  border-top-color: rgba(255,255,255,.10);
  background: rgba(5, 8, 20, .96);
}

body.design-preview.skin-black .mega-item {
  color: rgba(255,255,255,.76);
}

body.design-preview.skin-black .mega-item:hover {
  color: #fff;
  background: rgba(96, 165, 250, .18);
}

body.design-preview.skin-black .mega-close {
  color: rgba(255,255,255,.72);
}

body.design-preview.skin-black .navbar-toggler {
  background: #fff;
}

body.design-preview.skin-blue .site-header {
  border-bottom-color: rgba(37, 99, 235, .14);
  background: rgba(239, 246, 255, .90);
}

body.design-preview.skin-blue .gnb {
  border-color: transparent;
  background: transparent;
}

body.design-preview.skin-blue .design-preview-bar,
body.design-preview.skin-blue .admin-mode-bar {
  background: linear-gradient(90deg, #0b1220, #1e3a8a 58%, #2563eb);
}

body.design-preview.skin-blue section.py-5,
body.design-preview.skin-blue .our-business,
body.design-preview.skin-blue .partner-content,
body.design-preview.skin-blue .certification-content,
body.design-preview.skin-blue .history-content,
body.design-preview.skin-blue .history-timeline,
body.design-preview.skin-blue .reference-section,
body.design-preview.skin-blue .journey-section {
  background:
    linear-gradient(180deg, rgba(248,251,255,.96), rgba(219,234,254,.88)) !important;
}

body.design-preview .skin-settings-modal .modal-content {
  overflow: hidden;
  border: 1px solid var(--pv-line);
  border-radius: var(--pv-radius);
  background: rgba(255,255,255,.98);
  box-shadow: 0 28px 80px rgba(8, 12, 20, .22);
}

body.design-preview .skin-settings-modal .modal-header {
  align-items: flex-start;
  border-bottom: 1px solid var(--pv-line);
  background: linear-gradient(180deg, #fff, #f8fbff);
}

body.design-preview .skin-settings-modal .modal-title {
  margin: 0;
  color: var(--pv-ink);
  font-weight: 950;
}

body.design-preview .skin-modal-desc {
  margin: 5px 0 0;
  color: var(--pv-muted);
  font-size: .9rem;
  font-weight: 700;
}

body.design-preview .skin-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body.design-preview .skin-choice {
  display: flex;
  min-height: 150px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 9px;
  padding: 14px;
  border: 1px solid rgba(8, 12, 20, .12);
  border-radius: var(--pv-radius);
  background: #fff;
  color: var(--pv-ink);
  text-align: left;
}

body.design-preview .skin-choice:hover,
body.design-preview .skin-choice.is-active {
  transform: translateY(-2px);
  border-color: var(--pv-accent);
  box-shadow: 0 14px 34px rgba(37, 99, 235, .14);
}

body.design-preview .skin-choice strong {
  display: block;
  font-size: 1rem;
  font-weight: 950;
}

body.design-preview .skin-choice small {
  display: block;
  color: var(--pv-muted);
  font-size: .78rem;
  line-height: 1.45;
  font-weight: 700;
}

body.design-preview .skin-swatch {
  display: block;
  width: 100%;
  height: 42px;
  border: 1px solid rgba(8, 12, 20, .10);
  border-radius: 7px;
}

body.design-preview .skin-swatch-white {
  background: linear-gradient(90deg, #fff 0 34%, #0b1220 34% 67%, #2563eb 67% 100%);
}

body.design-preview .skin-swatch-black {
  background: linear-gradient(90deg, #050814 0 44%, #fff 44% 70%, #60a5fa 70% 100%);
}

body.design-preview .skin-swatch-blue {
  background: linear-gradient(90deg, #1d4ed8 0 44%, #eff6ff 44% 70%, #0b1220 70% 100%);
}

body.design-preview .design-preview-bar a,
body.design-preview .admin-mode-bar a,
body.design-preview .admin-mode-bar button {
  border-radius: 6px;
}

body.design-preview .admin-mode-bar {
  background: #050814;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

body.design-preview .mega-menu {
  border-top: 1px solid rgba(8, 12, 20, .06);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 24px 56px rgba(8, 12, 20, .10);
  backdrop-filter: blur(18px);
}

body.design-preview .mega-inner {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 14px 34px 20px;
  display: grid;
  grid-template-columns: 1fr;
}

body.design-preview .mega-spacer {
  display: none;
}

body.design-preview .mega-grid {
  width: calc((var(--pv-nav-w) * 4) + (var(--pv-nav-gap) * 3));
  margin: 0 auto;
  padding: 4px 0 14px;
  display: grid;
  grid-template-columns: repeat(4, var(--pv-nav-w));
  column-gap: var(--pv-nav-gap);
  justify-content: center;
  transform: translateX(var(--mega-align-x, 0));
}

body.design-preview .mega-col {
  min-height: 0;
}

body.design-preview .mega-item {
  margin-top: 3px;
  padding: 8px 8px;
  border-radius: 6px;
  color: #475467;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
  line-height: 1.35;
}

body.design-preview .mega-item:hover {
  color: var(--pv-ink);
  background: rgba(37, 99, 235, .08);
}

/* Shared page typography */
body.design-preview h1,
body.design-preview h2,
body.design-preview h3,
body.design-preview h4,
body.design-preview h5 {
  color: var(--pv-ink);
}

body.design-preview .text-muted {
  color: var(--pv-muted) !important;
}

body.design-preview .text-primary,
body.design-preview .business-header h2 span,
body.design-preview .section-title span {
  color: var(--pv-accent) !important;
}

body.design-preview section.py-5,
body.design-preview .our-business,
body.design-preview .core-competitiveness,
body.design-preview .partner-content,
body.design-preview .certification-content,
body.design-preview .history-content,
body.design-preview .history-timeline,
body.design-preview .reference-section,
body.design-preview .journey-section {
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(244,246,249,.96)) !important;
}

body.design-preview section.py-5,
body.design-preview .partner-content,
body.design-preview .certification-content,
body.design-preview .history-content,
body.design-preview .history-timeline,
body.design-preview .reference-section,
body.design-preview .journey-section {
  padding-top: 66px !important;
  padding-bottom: 74px !important;
}

body.design-preview.skin-white main,
body.design-preview.skin-white .admin-page {
  background:
    radial-gradient(circle at 18% 8%, rgba(37, 99, 235, .10), transparent 28%),
    linear-gradient(180deg, #edf2f8, #f7f9fc) !important;
}

body.design-preview.skin-blue main,
body.design-preview.skin-blue .admin-page {
  background:
    radial-gradient(circle at 82% 4%, rgba(29, 78, 216, .22), transparent 30%),
    linear-gradient(180deg, #dceafe, #eef6ff) !important;
}

body.design-preview.skin-black main,
body.design-preview.skin-black .admin-page {
  background:
    radial-gradient(circle at 86% 6%, rgba(37, 99, 235, .32), transparent 32%),
    linear-gradient(180deg, #050814, #07111f 52%, #050814) !important;
}

body.design-preview.skin-blue section.py-5,
body.design-preview.skin-blue .our-business,
body.design-preview.skin-blue .partner-content,
body.design-preview.skin-blue .certification-content,
body.design-preview.skin-blue .history-content,
body.design-preview.skin-blue .history-timeline,
body.design-preview.skin-blue .reference-section,
body.design-preview.skin-blue .journey-section {
  background:
    linear-gradient(180deg, rgba(229,240,255,.92), rgba(205,224,251,.90)) !important;
}

body.design-preview.skin-black section.py-5,
body.design-preview.skin-black .our-business,
body.design-preview.skin-black .partner-content,
body.design-preview.skin-black .certification-content,
body.design-preview.skin-black .history-content,
body.design-preview.skin-black .history-timeline,
body.design-preview.skin-black .reference-section,
body.design-preview.skin-black .journey-section {
  background:
    linear-gradient(180deg, rgba(7, 13, 24, .96), rgba(12, 22, 38, .94)) !important;
}

body.design-preview.skin-black h1,
body.design-preview.skin-black h2,
body.design-preview.skin-black h3,
body.design-preview.skin-black h4,
body.design-preview.skin-black h5,
body.design-preview.skin-black .business-card h4,
body.design-preview.skin-black .cert-title,
body.design-preview.skin-black .customer-category-title,
body.design-preview.skin-black .reference-card h3,
body.design-preview.skin-black .admin-page h1 {
  color: var(--pv-ink) !important;
}

body.design-preview.skin-black p,
body.design-preview.skin-black .text-muted,
body.design-preview.skin-black .business-card p,
body.design-preview.skin-black .mega-item,
body.design-preview.skin-black .managed-content-item p,
body.design-preview.skin-black .admin-form-help {
  color: var(--pv-muted) !important;
}

body.design-preview .admin-page {
  --admin-page-bg:
    radial-gradient(circle at 82% 4%, rgba(37,99,235,.12), transparent 30%),
    linear-gradient(180deg, #edf2f8, #f7f9fc);
  --admin-panel-bg: rgba(255,255,255,.92);
  --admin-panel-ink: #0f172a;
  --admin-panel-muted: #64748b;
  --admin-panel-line: rgba(15,23,42,.12);
  --admin-input-bg: #fff;
  --admin-input-ink: #111827;
  --admin-input-line: rgba(15,23,42,.18);
  --admin-empty-bg: rgba(248,250,252,.86);
  --admin-table-hover: rgba(37,99,235,.06);
  color: var(--admin-panel-ink);
}

body.design-preview.skin-blue .admin-page {
  --admin-page-bg:
    radial-gradient(circle at 82% 4%, rgba(29,78,216,.22), transparent 30%),
    linear-gradient(180deg, #dceafe, #eef6ff);
  --admin-panel-bg: rgba(248,251,255,.94);
  --admin-panel-ink: #0f1f3d;
  --admin-panel-muted: #526784;
  --admin-panel-line: rgba(29,78,216,.18);
  --admin-input-bg: #fff;
  --admin-input-line: rgba(29,78,216,.22);
  --admin-empty-bg: rgba(239,246,255,.86);
  --admin-table-hover: rgba(29,78,216,.08);
}

body.design-preview.skin-black .admin-page {
  --admin-page-bg:
    radial-gradient(circle at 86% 6%, rgba(37,99,235,.32), transparent 32%),
    linear-gradient(180deg, #050814, #07111f 52%, #050814);
  --admin-panel-bg: rgba(15,23,42,.92);
  --admin-panel-ink: #f8fafc;
  --admin-panel-muted: #b7c4d8;
  --admin-panel-line: rgba(255,255,255,.14);
  --admin-input-bg: rgba(2,6,23,.78);
  --admin-input-ink: #f8fafc;
  --admin-input-line: rgba(148,163,184,.34);
  --admin-empty-bg: rgba(2,6,23,.30);
  --admin-table-hover: rgba(96,165,250,.10);
}

body.design-preview .admin-panel {
  border-color: var(--admin-panel-line) !important;
  background: var(--admin-panel-bg) !important;
  color: var(--admin-panel-ink) !important;
  box-shadow: var(--pv-shadow) !important;
  backdrop-filter: blur(16px);
}

body.design-preview .admin-panel h1,
body.design-preview .admin-panel h2,
body.design-preview .admin-panel h3,
body.design-preview .admin-panel h4,
body.design-preview .admin-panel h5,
body.design-preview .admin-panel h6,
body.design-preview .admin-panel label,
body.design-preview .admin-panel .form-label,
body.design-preview .admin-panel .display-6,
body.design-preview .admin-panel .fw-bold,
body.design-preview .admin-panel td,
body.design-preview .admin-panel th {
  color: var(--admin-panel-ink) !important;
}

body.design-preview .admin-panel .text-muted,
body.design-preview .admin-panel .admin-form-help {
  color: var(--admin-panel-muted) !important;
}

body.design-preview .admin-panel .form-control,
body.design-preview .admin-panel .form-select,
body.design-preview .admin-panel textarea {
  border-color: var(--admin-input-line) !important;
  background-color: var(--admin-input-bg) !important;
  color: var(--admin-input-ink) !important;
  box-shadow: none !important;
}

body.design-preview .admin-panel .form-control:focus,
body.design-preview .admin-panel .form-select:focus,
body.design-preview .admin-panel textarea:focus {
  border-color: var(--pv-accent) !important;
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .18) !important;
}

body.design-preview .admin-panel .form-control::placeholder,
body.design-preview .admin-panel textarea::placeholder {
  color: var(--admin-panel-muted) !important;
}

body.design-preview .admin-panel .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--admin-panel-ink);
  --bs-table-border-color: var(--admin-panel-line);
  --bs-table-hover-bg: var(--admin-table-hover);
  color: var(--admin-panel-ink) !important;
}

body.design-preview .admin-empty {
  border-color: var(--admin-panel-line) !important;
  background: var(--admin-empty-bg) !important;
  color: var(--admin-panel-muted) !important;
}

body.design-preview.skin-black .admin-panel .btn-dark {
  background: #2563eb !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(37,99,235,.28);
}

body.design-preview.skin-black .admin-panel .btn-outline-dark,
body.design-preview.skin-black .admin-panel .btn-outline-secondary,
body.design-preview.skin-black .admin-panel .btn-outline-primary {
  border-color: rgba(191,219,254,.42) !important;
  color: #bfdbfe !important;
}

body.design-preview.skin-black .admin-panel .btn-outline-dark:hover,
body.design-preview.skin-black .admin-panel .btn-outline-secondary:hover,
body.design-preview.skin-black .admin-panel .btn-outline-primary:hover {
  border-color: #60a5fa !important;
  background: #2563eb !important;
  color: #fff !important;
}

/* Home hero */
body.design-preview .hero,
body.design-preview .hero.hero-slide {
  min-height: calc(100vh - 76px);
  align-items: flex-end;
  justify-content: flex-start;
  overflow: hidden;
  text-align: left;
  padding: 0 0 108px;
}

body.design-preview .hero::before,
body.design-preview .hero.hero-slide::before {
  background:
    linear-gradient(90deg, rgba(7, 10, 18, .88) 0%, rgba(7, 10, 18, .72) 42%, rgba(7, 10, 18, .20) 100%),
    linear-gradient(0deg, rgba(7, 10, 18, .56), transparent 42%);
}

body.design-preview .hero .container {
  position: relative;
  max-width: min(1400px, calc(100% - 56px));
  padding-bottom: 0 !important;
  text-align: left !important;
}

body.design-preview .hero .container::before {
  content: "A&T SOLUTION";
  display: inline-flex;
  margin-bottom: 18px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 6px;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.08);
  font-size: .78rem;
  font-weight: 900;
}

body.design-preview .hero h1 {
  max-width: 980px;
  margin-bottom: 24px !important;
  color: #fff;
  font-size: clamp(2.7rem, 4vw, 4.2rem) !important;
  line-height: 1.06 !important;
  font-weight: 950;
  text-wrap: balance;
}

body.design-preview #heroTitle br {
  display: none;
}

body.design-preview .hero .lead,
body.design-preview .hero p {
  max-width: 670px;
  color: rgba(255,255,255,.82) !important;
  font-size: 1.13rem;
  line-height: 1.82;
}

body.design-preview .hero-controls {
  left: 50%;
  right: auto;
  bottom: 34px;
  transform: translateX(-50%);
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: var(--pv-radius);
  background: rgba(7, 10, 18, .42);
  box-shadow: 0 14px 34px rgba(0,0,0,.20);
  backdrop-filter: blur(14px);
}

body.design-preview .hero-dot {
  width: 9px;
  height: 9px;
  border: 0;
  background: rgba(255,255,255,.38);
}

body.design-preview .hero-dot.is-active {
  width: 30px;
  transform: none;
  background: #fff;
}

/* Home sections */
body.design-preview .our-business {
  padding: 72px 0 84px;
}

body.design-preview .business-header {
  max-width: min(1400px, calc(100% - 56px));
  margin: 0 auto 34px;
  text-align: left;
}

body.design-preview .business-header h2 {
  font-size: clamp(2.2rem, 4vw, 4.2rem);
  line-height: 1;
  font-weight: 950;
}

body.design-preview .business-header p {
  max-width: 1020px;
  color: var(--pv-muted);
  font-size: 1.03rem;
  line-height: 1.82;
}

body.design-preview .business-proof-grid,
body.design-preview .ecosystem-summary,
body.design-preview .collaboration-grid,
body.design-preview .quality-grid,
body.design-preview .greeting-pillars,
body.design-preview .history-direction-grid,
body.design-preview .system-scope-grid,
body.design-preview .process-line,
body.design-preview .maintenance-process,
body.design-preview .contact-info-grid {
  width: 100%;
  max-width: none;
}

body.design-preview .business-proof-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 28px 0 32px;
}

body.design-preview .business-proof,
body.design-preview .collaboration-card,
body.design-preview .quality-card,
body.design-preview .pillar-card,
body.design-preview .history-direction-card,
body.design-preview .system-scope-card,
body.design-preview .process-step,
body.design-preview .maintenance-step,
body.design-preview .contact-info-card,
body.design-preview .principle-card,
body.design-preview .output-card,
body.design-preview .summary-card {
  border-radius: var(--pv-radius) !important;
  min-height: 178px;
}

body.design-preview .business-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding: 18px;
  border: 1px solid var(--pv-line) !important;
  border-radius: var(--pv-radius) !important;
  background: var(--pv-paper) !important;
  box-shadow: var(--pv-soft-shadow) !important;
}

body.design-preview .business-img {
  margin: -18px -18px 22px;
  border-radius: var(--pv-radius) var(--pv-radius) 0 0 !important;
}

body.design-preview .business-img img {
  height: 270px;
  filter: saturate(1.05) contrast(1.04);
}

body.design-preview .business-card h4 {
  font-size: 1.38rem;
  font-weight: 950;
}

body.design-preview .business-card p {
  color: #4b5563;
}

body.design-preview .detail-link,
body.design-preview .voc-btn,
body.design-preview .btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--pv-radius);
  color: #fff !important;
  background: #0b1220 !important;
  box-shadow: 0 12px 24px rgba(8, 12, 20, .16);
  text-decoration: none !important;
}

body.design-preview .detail-link {
  width: fit-content;
  margin-top: auto;
}

body.design-preview .detail-link:hover,
body.design-preview .voc-btn:hover,
body.design-preview .btn-dark:hover {
  transform: translateY(-2px);
  background: var(--pv-accent) !important;
}

body.design-preview .core-competitiveness {
  padding: 108px 0;
  background:
    linear-gradient(135deg, #050814 0%, #0b1220 56%, #2563eb 100%) !important;
}

body.design-preview .core-competitiveness h2,
body.design-preview .core-competitiveness h3,
body.design-preview .core-competitiveness strong {
  color: #fff;
}

body.design-preview .core-competitiveness p,
body.design-preview .core-hi-d,
body.design-preview .competitiveness-list p {
  color: rgba(255,255,255,.70);
}

body.design-preview .section-eyebrow {
  color: #8bb7ff;
  font-weight: 950;
}

body.design-preview .section-title {
  color: #fff;
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 1.05;
  font-weight: 950;
}

body.design-preview .section-title span {
  color: #fff !important;
}

body.design-preview .core-hi,
body.design-preview .check-icon {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--pv-radius);
  background: rgba(255,255,255,.08);
  box-shadow: none;
}

body.design-preview .core-hi-t,
body.design-preview .check-icon {
  color: #fff;
}

body.design-preview .core-competitiveness .competitiveness-image {
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--pv-radius);
  box-shadow: 0 28px 76px rgba(0,0,0,.34);
}

body.design-preview .contact-station::before {
  background:
    linear-gradient(90deg, rgba(7, 10, 18, .92), rgba(7, 10, 18, .64) 64%, rgba(7, 10, 18, .24));
}

body.design-preview .partner-band-top {
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 46px rgba(20, 24, 36, .18);
  backdrop-filter: blur(12px);
  z-index: 4;
}

body.design-preview .partner-band-top.is-voc-visible {
  position: fixed;
  top: var(--partner-band-top-offset, 76px);
  z-index: 1038;
  border-top: 1px solid rgba(20, 24, 36, .08);
  border-bottom: 1px solid rgba(20, 24, 36, .10);
}

body.design-preview .contact-inner {
  border-radius: 0;
}

body.design-preview .voc-inner {
  margin-left: 0;
  text-align: left;
}

body.design-preview .voc-eyebrow {
  color: #8bb7ff;
  font-weight: 950;
}

body.design-preview .voc-title {
  max-width: 820px;
  font-size: clamp(2.4rem, 4.5vw, 4.6rem);
  line-height: 1.05;
}

body.design-preview .voc-desc {
  max-width: 720px;
}

/* Subpage hero */
body.design-preview .sub-visual {
  min-height: 340px;
  height: 340px;
  overflow: hidden;
}

body.design-preview .sub-visual-overlay {
  background:
    linear-gradient(90deg, rgba(7, 10, 18, .84), rgba(7, 10, 18, .52) 48%, rgba(7, 10, 18, .20)),
    linear-gradient(135deg, rgba(37, 99, 235, .28), transparent 44%);
}

body.design-preview .sub-visual .container {
  max-width: min(1400px, calc(100% - 56px));
  text-align: left !important;
}

body.design-preview .sub-visual h1 {
  color: #fff;
  font-size: clamp(2.5rem, 4.8vw, 4.8rem);
  line-height: 1;
  font-weight: 950;
}

body.design-preview .breadcrumb-box {
  padding: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
}

body.design-preview .breadcrumb {
  justify-content: flex-start !important;
}

body.design-preview .breadcrumb-item,
body.design-preview .breadcrumb-desc {
  color: rgba(255,255,255,.78);
}

body.design-preview .breadcrumb-item.active {
  color: #fff;
}

/* Cards, logos, timeline */
body.design-preview .business-card,
body.design-preview .sf-card,
body.design-preview .build-card,
body.design-preview .maint-card,
body.design-preview .value-card,
body.design-preview .history-box,
body.design-preview .cert-card,
body.design-preview .partner-logo,
body.design-preview .reference-card,
body.design-preview .domain-card,
body.design-preview .level-card,
body.design-preview .capability-card,
body.design-preview .architecture-layer,
body.design-preview .info-box,
body.design-preview .map-box,
body.design-preview .office-photo,
body.design-preview .insight-copy,
body.design-preview .insight-media,
body.design-preview .command-copy,
body.design-preview .command-image,
body.design-preview .reference-profile,
body.design-preview .journey-col,
body.design-preview .business-proof,
body.design-preview .collaboration-card,
body.design-preview .quality-card,
body.design-preview .pillar-card,
body.design-preview .history-direction-card,
body.design-preview .system-scope-card,
body.design-preview .process-step,
body.design-preview .maintenance-step,
body.design-preview .contact-info-card,
body.design-preview .principle-card,
body.design-preview .output-card,
body.design-preview .summary-card,
body.design-preview .card {
  border: 1px solid var(--pv-line) !important;
  border-radius: var(--pv-radius) !important;
  background: var(--pv-paper) !important;
  box-shadow: var(--pv-soft-shadow) !important;
}

body.design-preview.skin-blue .business-card,
body.design-preview.skin-blue .sf-card,
body.design-preview.skin-blue .build-card,
body.design-preview.skin-blue .maint-card,
body.design-preview.skin-blue .value-card,
body.design-preview.skin-blue .history-box,
body.design-preview.skin-blue .cert-card,
body.design-preview.skin-blue .partner-logo,
body.design-preview.skin-blue .reference-card,
body.design-preview.skin-blue .domain-card,
body.design-preview.skin-blue .level-card,
body.design-preview.skin-blue .capability-card,
body.design-preview.skin-blue .architecture-layer,
body.design-preview.skin-blue .info-box,
body.design-preview.skin-blue .map-box,
body.design-preview.skin-blue .office-photo,
body.design-preview.skin-blue .insight-copy,
body.design-preview.skin-blue .insight-media,
body.design-preview.skin-blue .command-copy,
body.design-preview.skin-blue .command-image,
body.design-preview.skin-blue .reference-profile,
body.design-preview.skin-blue .card,
body.design-preview.skin-blue .journey-col,
body.design-preview.skin-blue .business-proof,
body.design-preview.skin-blue .collaboration-card,
body.design-preview.skin-blue .quality-card,
body.design-preview.skin-blue .pillar-card,
body.design-preview.skin-blue .history-direction-card,
body.design-preview.skin-blue .system-scope-card,
body.design-preview.skin-blue .process-step,
body.design-preview.skin-blue .maintenance-step,
body.design-preview.skin-blue .contact-info-card,
body.design-preview.skin-blue .principle-card,
body.design-preview.skin-blue .output-card,
body.design-preview.skin-blue .summary-card {
  border-color: rgba(29, 78, 216, .18) !important;
  background: rgba(248, 251, 255, .88) !important;
}

body.design-preview.skin-black .business-card,
body.design-preview.skin-black .sf-card,
body.design-preview.skin-black .build-card,
body.design-preview.skin-black .maint-card,
body.design-preview.skin-black .value-card,
body.design-preview.skin-black .history-box,
body.design-preview.skin-black .cert-card,
body.design-preview.skin-black .partner-logo,
body.design-preview.skin-black .reference-card,
body.design-preview.skin-black .domain-card,
body.design-preview.skin-black .level-card,
body.design-preview.skin-black .capability-card,
body.design-preview.skin-black .architecture-layer,
body.design-preview.skin-black .info-box,
body.design-preview.skin-black .map-box,
body.design-preview.skin-black .office-photo,
body.design-preview.skin-black .insight-copy,
body.design-preview.skin-black .insight-media,
body.design-preview.skin-black .command-copy,
body.design-preview.skin-black .command-image,
body.design-preview.skin-black .reference-profile,
body.design-preview.skin-black .card,
body.design-preview.skin-black .journey-col,
body.design-preview.skin-black .business-proof,
body.design-preview.skin-black .collaboration-card,
body.design-preview.skin-black .quality-card,
body.design-preview.skin-black .pillar-card,
body.design-preview.skin-black .history-direction-card,
body.design-preview.skin-black .system-scope-card,
body.design-preview.skin-black .process-step,
body.design-preview.skin-black .maintenance-step,
body.design-preview.skin-black .contact-info-card,
body.design-preview.skin-black .principle-card,
body.design-preview.skin-black .output-card,
body.design-preview.skin-black .summary-card {
  border-color: rgba(255,255,255,.13) !important;
  background: rgba(15, 23, 42, .86) !important;
  box-shadow: 0 16px 44px rgba(0,0,0,.24) !important;
}

body.design-preview .business-card:hover,
body.design-preview .sf-card:hover,
body.design-preview .build-card:hover,
body.design-preview .maint-card:hover,
body.design-preview .value-card:hover,
body.design-preview .history-box:hover,
body.design-preview .cert-card:hover,
body.design-preview .partner-logo:hover,
body.design-preview .reference-card:hover,
body.design-preview .domain-card:hover,
body.design-preview .level-card:hover,
body.design-preview .capability-card:hover,
body.design-preview .architecture-layer:hover,
body.design-preview .insight-copy:hover,
body.design-preview .command-copy:hover,
body.design-preview .reference-profile:hover,
body.design-preview .collaboration-card:hover,
body.design-preview .quality-card:hover,
body.design-preview .pillar-card:hover,
body.design-preview .history-direction-card:hover,
body.design-preview .system-scope-card:hover,
body.design-preview .contact-info-card:hover,
body.design-preview .principle-card:hover,
body.design-preview .output-card:hover,
body.design-preview .summary-card:hover {
  transform: translateY(-5px);
  border-color: rgba(37, 99, 235, .24) !important;
  box-shadow: var(--pv-shadow) !important;
}

body.design-preview .build-card.light {
  border-color: rgba(255,255,255,.16) !important;
  color: #fff !important;
  background:
    linear-gradient(135deg, rgba(15,23,42,.96), rgba(29,78,216,.88)) !important;
  box-shadow: 0 18px 42px rgba(8, 12, 20, .26) !important;
}

body.design-preview .build-card.light .build-title,
body.design-preview .build-card.light .fallback-title {
  color: #fff !important;
}

body.design-preview .build-card.light .fallback-desc {
  color: rgba(255,255,255,.82) !important;
}

body.design-preview .domain-card h3,
body.design-preview .level-card h4,
body.design-preview .capability-card h4,
body.design-preview .architecture-layer span,
body.design-preview .info-title,
body.design-preview .insight-copy h2,
body.design-preview .insight-points span,
body.design-preview .command-copy h2,
body.design-preview .reference-intro h2,
body.design-preview .reference-profile strong,
body.design-preview .business-proof strong,
body.design-preview .contact-info-card h3,
body.design-preview .quality-card h3,
body.design-preview .pillar-card h4,
body.design-preview .history-direction-card h4,
body.design-preview .system-scope-card h4,
body.design-preview .summary-card strong,
body.design-preview .collaboration-card h4 {
  color: var(--pv-ink) !important;
}

body.design-preview .domain-card p,
body.design-preview .level-card p,
body.design-preview .capability-card p,
body.design-preview .architecture-layer p,
body.design-preview .info-text,
body.design-preview .insight-copy p,
body.design-preview .command-copy p,
body.design-preview .reference-intro .intro-copy,
body.design-preview .reference-profile span,
body.design-preview .business-proof span,
body.design-preview .contact-info-card p,
body.design-preview .quality-card p,
body.design-preview .pillar-card p,
body.design-preview .history-direction-card p,
body.design-preview .system-scope-card p,
body.design-preview .summary-card span,
body.design-preview .collaboration-card p,
body.design-preview .sf-card p,
body.design-preview .output-card p {
  color: var(--pv-muted) !important;
}

body.design-preview .domain-card i,
body.design-preview .level-card i,
body.design-preview .capability-card i,
body.design-preview .business-proof i,
body.design-preview .system-scope-card i,
body.design-preview .quality-card i,
body.design-preview .pillar-card i,
body.design-preview .history-direction-card i,
body.design-preview .contact-info-card i,
body.design-preview .collaboration-card i {
  color: var(--pv-accent) !important;
  background: rgba(var(--bs-primary-rgb), .10) !important;
}

body.design-preview .architecture-layer strong {
  color: var(--pv-accent) !important;
}

body.design-preview .section-kicker,
body.design-preview .insight-points strong,
body.design-preview .reference-tags span,
body.design-preview .command-badges span {
  color: var(--pv-accent) !important;
}

body.design-preview .insight-points div,
body.design-preview .reference-tags span,
body.design-preview .command-badges span {
  border: 1px solid rgba(var(--bs-primary-rgb), .14) !important;
  background: #eaf2ff !important;
}

body.design-preview.skin-blue .insight-points div,
body.design-preview.skin-blue .reference-tags span,
body.design-preview.skin-blue .command-badges span {
  color: #1e40af !important;
  border-color: rgba(29, 78, 216, .18) !important;
  background: #dbeafe !important;
}

body.design-preview.skin-black .insight-points div,
body.design-preview.skin-black .reference-tags span,
body.design-preview.skin-black .command-badges span {
  color: #dbeafe !important;
  border-color: rgba(96, 165, 250, .24) !important;
  background: #10203a !important;
}

body.design-preview.skin-black .insight-points span,
body.design-preview.skin-black .command-badges span,
body.design-preview.skin-black .reference-tags span {
  color: #dbeafe !important;
}

body.design-preview .reference-profile div {
  border-bottom-color: var(--pv-line) !important;
}

body.design-preview .info-box {
  border-left-color: var(--pv-accent) !important;
}

body.design-preview .office-photo img {
  width: 100%;
  display: block;
}

body.design-preview .photo-caption {
  color: #fff !important;
  background: rgba(5, 8, 20, .70) !important;
}

body.design-preview .sf-card,
body.design-preview .maint-card,
body.design-preview .value-card {
  padding: 24px !important;
}

body.design-preview .sf-card i,
body.design-preview .maint-card i,
body.design-preview .value-card i {
  color: var(--pv-accent) !important;
}

body.design-preview .build-card {
  overflow: hidden;
}

body.design-preview .build-media,
body.design-preview .business-img,
body.design-preview .history-image-box {
  border-radius: var(--pv-radius) !important;
}

body.design-preview .system-blue,
body.design-preview .maintenance-blue {
  background: linear-gradient(135deg, #050814, #0b1220 58%, #2563eb) !important;
}

body.design-preview .reference-section {
  overflow: hidden;
}

body.design-preview .reference-card {
  min-width: 356px;
  min-height: 312px;
  border-top: 0 !important;
  padding: 28px;
}

body.design-preview .reference-card .badge {
  border-radius: 6px;
  background: rgba(37, 99, 235, .12) !important;
  color: #1d4ed8 !important;
}

body.design-preview .ref-box {
  padding-top: 15px;
  border-top: 1px solid var(--pv-line);
}

body.design-preview .journey-stats {
  gap: 28px;
}

body.design-preview .journey-col {
  width: min(330px, 100%);
  padding: 30px 22px;
  border: 1px solid var(--pv-line);
  border-radius: var(--pv-radius);
  background: #fff;
  box-shadow: var(--pv-soft-shadow);
}

body.design-preview .stat-big,
body.design-preview .history-year {
  color: var(--pv-accent) !important;
}

body.design-preview .history-timeline {
  background:
    linear-gradient(180deg, rgba(244,246,249,.92), rgba(255,255,255,.94)) !important;
}

body.design-preview .cert-card {
  overflow: hidden;
  padding: 14px !important;
}

body.design-preview .cert-card img {
  border-radius: 6px;
}

body.design-preview .cert-title {
  font-weight: 900;
}

body.design-preview .partner-grid {
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)) !important;
}

body.design-preview .partner-logo {
  height: 132px;
  padding: 22px;
}

body.design-preview .partner-logo img {
  max-height: 86px;
  filter: saturate(1.04) contrast(1.04);
}

body.design-preview .customer-category-title-wrap {
  border-left-color: var(--pv-accent) !important;
}

body.design-preview .customer-category-title {
  font-weight: 950;
}

/* Admin */
body.design-preview .admin-page {
  min-height: 76vh;
  padding: 64px 0 82px;
  background: var(--admin-page-bg) !important;
}

body.design-preview .admin-shell {
  width: min(1240px, calc(100% - 32px));
}

body.design-preview .admin-page h1 {
  margin-bottom: 20px;
  color: var(--pv-ink);
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  line-height: 1;
  font-weight: 950;
}

body.design-preview .admin-panel {
  border: 1px solid var(--admin-panel-line) !important;
  border-radius: var(--pv-radius) !important;
  background: var(--admin-panel-bg) !important;
  color: var(--admin-panel-ink) !important;
  box-shadow: var(--pv-soft-shadow) !important;
}

body.design-preview .admin-panel .display-6 {
  color: var(--pv-accent);
}

body.design-preview .admin-actions {
  gap: 8px;
}

body.design-preview .admin-table {
  border-collapse: separate;
  border-spacing: 0;
}

body.design-preview .admin-table thead th {
  border-bottom: 1px solid var(--pv-line-strong);
  color: #475467;
  background: #f8fafc;
  font-size: .88rem;
}

body.design-preview .admin-table tbody td {
  border-bottom-color: rgba(20, 24, 36, .07);
}

body.design-preview .admin-table tbody tr:hover td {
  background: #fbfcff;
}

body.design-preview .admin-thumb,
body.design-preview .admin-current-image {
  border-radius: var(--pv-radius);
  border-color: var(--pv-line);
  background: #fff;
}

body.design-preview .form-control,
body.design-preview .form-select,
body.design-preview textarea {
  min-height: 42px;
  border-radius: var(--pv-radius);
  border-color: rgba(20, 24, 36, .16);
  background: #fff;
}

body.design-preview .form-control:focus,
body.design-preview .form-select:focus,
body.design-preview textarea:focus {
  border-color: rgba(37, 99, 235, .46);
  box-shadow: 0 0 0 .22rem rgba(37, 99, 235, .12);
}

body.design-preview .btn {
  border-radius: var(--pv-radius);
  font-weight: 850;
}

body.design-preview .btn-outline-primary,
body.design-preview .btn-outline-dark,
body.design-preview .btn-outline-secondary {
  color: var(--pv-ink);
  border-color: rgba(20, 24, 36, .22);
  background: #fff;
}

body.design-preview .btn-outline-primary:hover,
body.design-preview .btn-outline-dark:hover,
body.design-preview .btn-outline-secondary:hover {
  color: #fff;
  border-color: #0b1220;
  background: #0b1220;
}

body.design-preview .btn-outline-danger {
  color: #0b1220;
  border-color: rgba(37, 99, 235, .36);
  background: #fff;
}

body.design-preview .btn-outline-danger:hover,
body.design-preview .btn-danger:hover {
  color: #fff;
  border-color: var(--pv-accent-deep);
  background: var(--pv-accent-deep);
}

body.design-preview .admin-empty {
  border-radius: var(--pv-radius);
  background: #f8fafc;
}

/* Contact form */
body.design-preview .contact-phone-wrap .form-control {
  text-align: center;
}

body.design-preview footer {
  margin-top: 0;
  border-top: 0 !important;
  color: rgba(255,255,255,.68) !important;
  background: #050814;
}

@media (max-width: 991.98px) {
  body.design-preview .container,
  body.design-preview main > section > .container,
  body.design-preview .hero .container,
  body.design-preview .sub-visual .container,
  body.design-preview .business-header {
    max-width: calc(100% - 32px) !important;
  }

  body.design-preview .header-row {
    height: 72px;
    padding: 0 16px;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
  }

  body.design-preview .header-actions {
    flex-wrap: nowrap;
    gap: 8px;
    min-width: 0;
  }

  body.design-preview .site-header .navbar-brand {
    width: 176px;
  }

  body.design-preview .navbar-toggler {
    border-radius: var(--pv-radius);
    background: #fff;
  }

  body.design-preview .desktop-skin-switcher {
    display: none !important;
  }

  body.design-preview .design-preview-bar {
    min-height: 0;
    padding: 8px 12px;
    flex-wrap: wrap;
    gap: 8px;
    line-height: 1.2;
  }

  body.design-preview .design-preview-bar > span {
    flex: 1 1 100%;
    text-align: center;
  }

  body.design-preview .design-preview-bar a {
    white-space: nowrap;
  }

  body.design-preview .mobile-skin-switcher {
    display: inline-flex;
    min-height: 34px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  }

  body.design-preview .mobile-skin-switcher .skin-switcher-label {
    display: none;
  }

  body.design-preview .mobile-skin-switcher .skin-switcher-option {
    min-height: 26px;
    padding: 0 10px;
    font-size: .78rem;
  }

  body.design-preview .hero,
  body.design-preview .hero.hero-slide {
    min-height: clamp(520px, calc(100svh - 142px), 660px);
    align-items: center;
    justify-content: center;
    padding: 42px 0 48px;
    text-align: center;
  }

  body.design-preview .hero .container,
  body.design-preview .voc-inner {
    text-align: center !important;
  }

  body.design-preview .hero .container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  body.design-preview .hero h1,
  body.design-preview .hero .lead,
  body.design-preview .hero p,
  body.design-preview .voc-title,
  body.design-preview .voc-desc {
    margin-left: auto;
    margin-right: auto;
  }

  body.design-preview .hero h1 {
    max-width: 760px;
    margin-bottom: 18px !important;
    font-size: clamp(2.05rem, 6.7vw, 3.1rem) !important;
    line-height: 1.08 !important;
  }

  body.design-preview .hero .lead,
  body.design-preview .hero p {
    max-width: 620px;
    font-size: clamp(1rem, 2.8vw, 1.12rem) !important;
    line-height: 1.7;
  }

  body.design-preview .hero-controls {
    position: relative;
    left: auto;
    bottom: auto;
    order: 20;
    width: fit-content;
    margin: 18px auto 0;
    transform: none;
  }

  body.design-preview .sub-visual {
    height: 280px;
    min-height: 280px;
  }

  body.design-preview .sub-visual .container,
  body.design-preview .breadcrumb {
    text-align: center !important;
    justify-content: center !important;
  }

  body.design-preview .core-competitiveness {
    display: block;
  }

  body.design-preview .core-highlights {
    grid-template-columns: 1fr;
  }

  body.design-preview .business-header {
    text-align: center;
  }

  body.design-preview .business-proof-grid,
  body.design-preview .collaboration-grid,
  body.design-preview .quality-grid,
  body.design-preview .greeting-pillars,
  body.design-preview .history-direction-grid,
  body.design-preview .system-scope-grid,
  body.design-preview .process-line,
  body.design-preview .maintenance-process,
  body.design-preview .contact-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 575.98px) {
  body.design-preview .container,
  body.design-preview main > section > .container,
  body.design-preview .hero .container,
  body.design-preview .sub-visual .container,
  body.design-preview .business-header {
    max-width: calc(100% - 24px) !important;
  }

  body.design-preview .container-fluid {
    padding-left: 12px;
    padding-right: 12px;
  }

  body.design-preview .business-proof-grid,
  body.design-preview .collaboration-grid,
  body.design-preview .quality-grid,
  body.design-preview .greeting-pillars,
  body.design-preview .history-direction-grid,
  body.design-preview .system-scope-grid,
  body.design-preview .process-line,
  body.design-preview .maintenance-process,
  body.design-preview .contact-info-grid {
    grid-template-columns: 1fr !important;
  }

  body.design-preview .preview-top-link span {
    font-size: .78rem;
  }

  body.design-preview .admin-top-link {
    padding: 0 10px;
  }

  body.design-preview .skin-switcher {
    justify-content: center;
  }

  body.design-preview .site-header .navbar-brand {
    width: min(154px, 40vw);
    height: 40px;
  }

  body.design-preview .header-row {
    height: 66px;
    padding: 0 12px;
    column-gap: 8px;
  }

  body.design-preview .header-actions {
    gap: 6px;
  }

  body.design-preview .admin-top-link {
    min-height: 38px;
    padding: 0 9px;
  }

  body.design-preview .navbar-toggler {
    min-width: 42px;
    min-height: 38px;
    padding: 8px 10px;
  }

  body.design-preview .design-preview-bar {
    padding: 8px 10px 9px;
    gap: 7px;
  }

  body.design-preview .hero,
  body.design-preview .hero.hero-slide {
    min-height: clamp(500px, calc(100svh - 142px), 600px);
    padding: 34px 0 38px;
  }

  body.design-preview .hero .container::before {
    margin-bottom: 14px;
    padding: 6px 9px;
    font-size: .72rem;
  }

  body.design-preview .hero h1 {
    max-width: 100%;
    margin-bottom: 15px !important;
    font-size: clamp(1.82rem, 7.25vw, 2.25rem) !important;
    line-height: 1.1 !important;
  }

  body.design-preview .hero .lead,
  body.design-preview .hero p {
    max-width: 100%;
    font-size: .98rem !important;
    line-height: 1.65;
  }

  body.design-preview .hero-controls {
    margin-top: 16px;
    padding: 8px 11px;
    gap: 11px;
  }

  body.design-preview .hero-dot {
    width: 8px;
    height: 8px;
  }

  body.design-preview .hero-dot.is-active {
    width: 28px;
  }

  body.design-preview .hero-play {
    padding: 5px 7px;
  }

  body.design-preview .sub-visual {
    height: 236px;
    min-height: 236px;
  }

  body.design-preview .sub-visual h1 {
    font-size: clamp(2rem, 9vw, 2.5rem);
    line-height: 1.08;
  }

  body.design-preview .breadcrumb-box {
    max-width: 100%;
  }

  body.design-preview section.py-5,
  body.design-preview .partner-content,
  body.design-preview .certification-content,
  body.design-preview .history-content,
  body.design-preview .history-timeline,
  body.design-preview .reference-section,
  body.design-preview .journey-section {
    padding-top: 46px !important;
    padding-bottom: 52px !important;
  }

  body.design-preview .business-header h2,
  body.design-preview .section-title,
  body.design-preview .voc-title,
  body.design-preview .reference-intro h2,
  body.design-preview .insight-copy h2,
  body.design-preview .command-copy h2 {
    font-size: clamp(1.85rem, 8vw, 2.45rem) !important;
    line-height: 1.12 !important;
  }

  body.design-preview .business-header p,
  body.design-preview .section-desc,
  body.design-preview .voc-desc,
  body.design-preview .intro-copy,
  body.design-preview .insight-copy p,
  body.design-preview .command-copy p {
    font-size: .98rem !important;
    line-height: 1.72 !important;
  }

  body.design-preview .business-card,
  body.design-preview .insight-copy,
  body.design-preview .command-copy,
  body.design-preview .reference-profile,
  body.design-preview .quality-card,
  body.design-preview .pillar-card,
  body.design-preview .history-direction-card,
  body.design-preview .system-scope-card,
  body.design-preview .contact-info-card,
  body.design-preview .principle-card,
  body.design-preview .summary-card,
  body.design-preview .collaboration-card,
  body.design-preview .domain-card,
  body.design-preview .level-card,
  body.design-preview .capability-card,
  body.design-preview .architecture-layer,
  body.design-preview .sf-card,
  body.design-preview .maint-card,
  body.design-preview .value-card,
  body.design-preview .output-card,
  body.design-preview .card {
    min-height: auto !important;
    padding: 20px !important;
  }

  body.design-preview .business-img img {
    height: 210px;
  }

  body.design-preview .insight-media,
  body.design-preview .command-image,
  body.design-preview .architecture-image {
    min-height: 220px !important;
  }

  body.design-preview .build-media {
    height: 210px !important;
  }

  body.design-preview .cert-card img {
    height: auto !important;
    max-height: 240px;
  }

  body.design-preview .partner-logo {
    height: 108px;
  }

  body.design-preview .reference-card {
    min-width: 306px;
  }

  body.design-preview .skin-choice-grid {
    grid-template-columns: 1fr;
  }

  body.design-preview .skin-choice {
    min-height: 122px;
  }
}

@media (max-width: 420px) {
  body.design-preview .site-header .navbar-brand {
    width: min(136px, 38vw);
  }

  body.design-preview .preview-top-link span {
    display: none;
  }

  body.design-preview .admin-top-link {
    min-width: 38px;
    justify-content: center;
  }

  body.design-preview .mobile-skin-switcher .skin-switcher-option {
    padding: 0 9px;
  }
}