@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");


/* =========================================================
   ISS VIETNAM STATIC UI
   CSS architecture: tokens -> reset -> layout -> components
   -> page modules -> utilities -> responsive
   ========================================================= */

:root {
  --iss-blue-900:#0b2740;
  --iss-blue-800:#0a3f69;
  --iss-blue-700:#075b96;
  --iss-blue-600:#0b6fb3;
  --iss-blue-500:#1688d1;
  --iss-blue-100:#eaf5fd;
  --iss-blue-050:#f4faff;

  --iss-red-600:#d61f26;
  --iss-green-600:#178a55;

  --ink-950:#101828;
  --ink-800:#1f2937;
  --ink-700:#344054;
  --ink-600:#475467;
  --ink-500:#667085;
  --ink-300:#d0d5dd;
  --ink-200:#eaecf0;
  --ink-100:#f2f4f7;
  --ink-050:#f9fafb;
  --white:#ffffff;

  --container:1200px;
  --header-top:42px;
  --header-main:74px;

  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;
  --radius-xl:24px;

  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow-sm:0 4px 14px rgba(16,24,40,.06);
  --shadow-md:0 12px 32px rgba(16,24,40,.10);

  --transition:180ms ease;
}

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

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

body {
  margin:0;
  color:var(--ink-950);
  background:var(--white);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size:16px;
  line-height:1.6;
  text-rendering:optimizeLegibility;
  font-synthesis:none;
}

img, svg { display:block; max-width:100%; }
button, input, select, textarea { font:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
p, h1, h2, h3, h4 { overflow-wrap:anywhere; }

h1,h2,h3,h4 {
  margin:0;
  color:var(--ink-950);
  line-height:1.2;
}
h1 { font-size:clamp(2.2rem,5vw,4.25rem); }
h2 { font-size:clamp(1.75rem,3vw,2.35rem); }
h3 { font-size:1.22rem; }
p { margin:0; color:var(--ink-600); }

:focus-visible {
  outline:3px solid rgba(22,136,209,.35);
  outline-offset:2px;
}

.container {
  width:min(var(--container), calc(100% - 32px));
  margin-inline:auto;
}

.section { padding:72px 0; }
.section--soft { background:var(--ink-050); }
.section--blue { background:var(--iss-blue-050); }

.section-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:28px;
}
.section-head__copy { max-width:760px; }
.section-head__copy p { margin-top:8px; }
.eyebrow {
  display:inline-block;
  margin-bottom:9px;
  color:var(--iss-blue-600);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.skip-link {
  position:fixed;
  left:16px;
  top:-100px;
  z-index:2000;
  background:var(--white);
  color:var(--iss-blue-900);
  border-radius:8px;
  padding:10px 14px;
  box-shadow:var(--shadow-md);
}
.skip-link:focus { top:16px; }

/* Header */
.site-topbar {
  position:sticky;
  top:0;
  z-index:1000;
  min-height:var(--header-top);
  background:var(--iss-blue-900);
  color:var(--white);
}
.site-topbar__inner {
  min-height:var(--header-top);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.site-topbar__contacts {
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  font-size:.875rem;
}
.site-topbar__contacts a:hover { text-decoration:underline; }
.site-topbar__lang {
  display:flex;
  gap:6px;
}
.site-topbar__lang a {
  border:1px solid rgba(255,255,255,.35);
  padding:2px 8px;
  border-radius:999px;
  font-weight:700;
  font-size:.78rem;
}
.site-topbar__lang a[aria-current="true"] {
  background:var(--white);
  color:var(--iss-blue-900);
}

.site-header {
  position:sticky;
  top:var(--header-top);
  z-index:990;
  background:rgba(255,255,255,.98);
  border-bottom:1px solid var(--ink-200);
  backdrop-filter:saturate(180%) blur(10px);
}
.site-header__inner {
  min-height:var(--header-main);
  display:flex;
  align-items:center;
  gap:24px;
}
.site-logo {
  display:flex;
  align-items:center;
  gap:10px;
  flex:none;
  font-weight:700;
  color:var(--iss-blue-700);
  letter-spacing:-.02em;
  font-size:1.28rem;
}
.site-logo__mark {
  width:44px;
  height:44px;
}

.site-nav {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:3px;
}
.site-nav__item { position:relative; }
.site-nav__link {
  display:block;
  padding:12px 13px;
  border-radius:var(--radius-sm);
  font-weight:700;
  color:var(--ink-800);
  transition:background var(--transition), color var(--transition);
}
.site-nav__link:hover,
.site-nav__item:hover > .site-nav__link,
.site-nav__link[aria-current="page"] {
  background:var(--iss-blue-600);
  color:var(--white);
}
.site-nav__dropdown {
  display:none;
  position:absolute;
  left:0;
  top:calc(100% + 4px);
  width:260px;
  padding:8px;
  background:var(--white);
  border:1px solid var(--ink-200);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
}
.site-nav__item:hover .site-nav__dropdown,
.site-nav__item:focus-within .site-nav__dropdown { display:block; }
.site-nav__dropdown a {
  display:block;
  padding:10px 12px;
  border-radius:8px;
  color:var(--ink-700);
  font-weight:650;
}
.site-nav__dropdown a:hover {
  color:var(--white);
  background:var(--iss-blue-600);
}
.site-header__toggle {
  display:none;
  margin-left:auto;
  background:var(--white);
  color:var(--ink-800);
  border:1px solid var(--ink-300);
  border-radius:8px;
  padding:9px 11px;
  font-weight:700;
}

/* Hero */
.home-hero {
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 85% 25%, rgba(255,255,255,.16), transparent 26%),
    linear-gradient(125deg, var(--iss-blue-600), var(--iss-blue-900));
  color:var(--white);
}
.home-hero__inner {
  min-height:470px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:48px;
  align-items:center;
  padding:58px 0;
}
.home-hero h1 { color:var(--white); }
.home-hero p {
  color:#eaf6ff;
  max-width:720px;
  margin-top:18px;
  font-size:1.1rem;
}
.home-hero__actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:24px;
}
.home-hero__visual {
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radius-xl);
  padding:16px;
  box-shadow:var(--shadow-md);
}

.page-hero {
  padding:56px 0;
  border-bottom:1px solid var(--ink-200);
  background:linear-gradient(135deg, var(--iss-blue-050), #fff);
}
.page-hero h1 { font-size:clamp(2rem,4vw,3.2rem); }
.page-hero p { margin-top:10px; max-width:760px; }
.breadcrumb {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:13px;
  color:var(--ink-500);
  font-size:.875rem;
}
.breadcrumb a:hover { color:var(--iss-blue-600); }

/* Buttons */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 17px;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  background:var(--iss-blue-600);
  color:var(--white);
  font-weight:700;
  transition:transform var(--transition), background var(--transition), border-color var(--transition);
}
.btn:hover {
  background:var(--iss-blue-700);
  transform:translateY(-1px);
}
.btn--outline {
  border-color:var(--iss-blue-600);
  background:transparent;
  color:var(--iss-blue-700);
}
.home-hero .btn--outline {
  border-color:rgba(255,255,255,.65);
  color:var(--white);
}
.btn--red { background:var(--iss-red-600); }
.btn--red:hover { background:#b5181e; }
.btn--sm { min-height:36px; padding:7px 12px; font-size:.9rem; }

.link-more {
  color:var(--iss-blue-600);
  font-weight:700;
}
.link-more:hover { text-decoration:underline; }

/* Cards / grids */
.grid { display:grid; gap:20px; }
.grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid--5 { grid-template-columns:repeat(5,minmax(0,1fr)); }

.card {
  height:100%;
  background:var(--white);
  border:1px solid var(--ink-200);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-xs);
  transition:transform var(--transition), box-shadow var(--transition);
}
.card:hover {
  transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
}
.card__media {
  aspect-ratio:16/10;
  background:linear-gradient(135deg, #eef7fd, #d5eaf8);
  display:grid;
  place-items:center;
  overflow:hidden;
  color:var(--iss-blue-700);
  font-weight:700;
  text-align:center;
  padding:18px;
}
.card__body { padding:18px; }
.card__body p { margin-top:7px; }

.placeholder {
  min-height:220px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:24px;
  border:1px dashed #a8c5da;
  border-radius:var(--radius-md);
  background:linear-gradient(135deg,#eff8ff,#dceef9);
  color:var(--iss-blue-800);
  font-weight:700;
}

/* Trust bar */
.trust-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
}
.trust-item {
  background:var(--white);
  border:1px solid var(--ink-200);
  border-radius:var(--radius-md);
  padding:18px;
  text-align:center;
}
.trust-item__logo {
  min-height:52px;
  display:grid;
  place-items:center;
  color:var(--iss-blue-700);
  font-weight:700;
  font-size:1.05rem;
}
.trust-item small {
  display:block;
  margin-top:8px;
  color:var(--ink-600);
}

/* Brand presentation */
.brand-block {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:24px;
  margin-bottom:34px;
}
.brand-summary {
  border:1px solid var(--ink-200);
  border-radius:var(--radius-lg);
  padding:20px;
  background:var(--white);
}
.brand-summary p { margin:10px 0 14px; }
.brand-links {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.catalog-link {
  display:block;
  border:1px solid var(--ink-800);
  background:var(--white);
  color:var(--ink-950);
  padding:11px 12px;
  text-align:center;
  font-weight:700;
  transition:background var(--transition), color var(--transition), border-color var(--transition);
}
.catalog-link:hover {
  background:var(--iss-blue-600);
  border-color:var(--iss-blue-600);
  color:var(--white);
}

/* Feature / support boxes */
.feature-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.feature-box {
  height:100%;
  padding:22px;
  border:1px solid var(--ink-200);
  border-radius:var(--radius-lg);
  background:var(--white);
}
.feature-box__icon {
  width:44px;
  height:44px;
  margin-bottom:14px;
  border-radius:12px;
  display:grid;
  place-items:center;
  color:var(--iss-blue-700);
  background:var(--iss-blue-100);
  font-weight:700;
}

/* Sidebar + product listing */
.layout-sidebar {
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:30px;
  align-items:start;
}
.sidebar {
  overflow:hidden;
  border:1px solid var(--ink-200);
  border-radius:var(--radius-md);
  background:var(--white);
}
.sidebar__title {
  margin:0;
  padding:16px 18px;
  background:var(--iss-blue-900);
  color:var(--white);
  font-size:1rem;
}
.sidebar__body { max-height:720px; overflow:auto; }
.sidebar__group { border-top:1px solid var(--ink-200); }
.sidebar__group:first-child { border-top:0; }
.sidebar__group > button {
  width:100%;
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  border:0;
  background:var(--white);
  color:var(--ink-800);
  font-weight:700;
  text-align:left;
}
.sidebar__group > button:hover { color:var(--iss-blue-600); }
.sidebar__children { display:none; padding:0 8px 9px; }
.sidebar__group.is-open .sidebar__children { display:block; }
.sidebar__children a,
.sidebar__single {
  display:block;
  padding:9px 11px;
  border-radius:7px;
  color:var(--ink-700);
}
.sidebar__children a:hover,
.sidebar__single:hover,
.sidebar__children a.is-active {
  background:var(--iss-blue-600);
  color:var(--white);
}

.products-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.product-card {
  border:1px solid var(--ink-200);
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--white);
  box-shadow:var(--shadow-xs);
}
.product-card__media {
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#f5f9fc,#e2eef6);
  color:var(--iss-blue-700);
  padding:14px;
  font-weight:700;
  text-align:center;
}
.product-card__body { padding:14px; }
.product-card__code {
  margin-top:5px;
  color:var(--ink-500);
  font-size:.82rem;
}
.product-card:hover h3 { color:var(--iss-blue-600); }

.pagination {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:7px;
  margin-top:30px;
}
.pagination a {
  min-width:38px;
  min-height:38px;
  display:grid;
  place-items:center;
  border:1px solid var(--ink-300);
  border-radius:8px;
  background:var(--white);
  font-weight:700;
}
.pagination a:hover,
.pagination a[aria-current="page"] {
  background:var(--iss-blue-600);
  border-color:var(--iss-blue-600);
  color:var(--white);
}

.article-block {
  margin-top:48px;
  padding-top:38px;
  border-top:1px solid var(--ink-200);
}
.article-block p + p { margin-top:14px; }

/* Product detail */
.product-detail {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:38px;
  align-items:start;
}
.product-gallery {
  border:1px solid var(--ink-200);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.product-gallery__main {
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#f4f8fb,#ddeaf3);
  color:var(--iss-blue-700);
  font-weight:700;
}
.product-detail__info h1 { font-size:clamp(2rem,4vw,3rem); }
.meta-table {
  margin-top:22px;
  border-top:1px solid var(--ink-200);
}
.meta-row {
  display:grid;
  grid-template-columns:155px 1fr;
  gap:16px;
  border-bottom:1px solid var(--ink-200);
}
.meta-row strong,
.meta-row span { padding:10px 0; }
.meta-row strong { color:var(--ink-950); }

.tabs { margin-top:40px; }
.tabs__bar {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--ink-200);
}
.tabs__btn {
  border:0;
  padding:11px 15px;
  border-radius:8px 8px 0 0;
  background:var(--ink-100);
  font-weight:700;
  color:var(--ink-700);
}
.tabs__btn.is-active {
  background:var(--iss-blue-600);
  color:var(--white);
}
.tabs__panel { display:none; padding:24px 0; }
.tabs__panel.is-active { display:block; }

.file-box {
  padding:16px;
  border:1px dashed #98a2b3;
  border-radius:var(--radius-md);
  background:var(--ink-050);
}

/* Forms */
.form-card {
  padding:24px;
  border:1px solid var(--ink-200);
  border-radius:var(--radius-lg);
  background:var(--white);
  box-shadow:var(--shadow-sm);
}
.form-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.field { display:block; }
.field--full { grid-column:1/-1; }
.field__label {
  display:block;
  margin-bottom:6px;
  color:var(--ink-800);
  font-weight:700;
  font-size:.9rem;
}
.field__required { color:var(--iss-red-600); }
input,
select,
textarea {
  width:100%;
  border:1px solid #cbd5e1;
  border-radius:9px;
  background:var(--white);
  color:var(--ink-950);
  padding:11px 12px;
  transition:border-color var(--transition), box-shadow var(--transition);
}
input:focus,
select:focus,
textarea:focus {
  border-color:var(--iss-blue-500);
  box-shadow:0 0 0 3px rgba(22,136,209,.12);
  outline:0;
}
textarea { min-height:128px; resize:vertical; }
.checkbox-row {
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
}
.checkbox-row label {
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:650;
}
.checkbox-row input { width:auto; }
.form-status {
  margin-top:12px;
  font-size:.9rem;
  color:var(--iss-green-600);
}
.note {
  padding:13px 15px;
  border-left:4px solid var(--iss-blue-600);
  border-radius:8px;
  background:var(--iss-blue-050);
  color:var(--ink-700);
}

/* About */
.about-split {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:38px;
  align-items:start;
}
.stats-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.stat-circle {
  width:180px;
  height:180px;
  margin:auto;
  border:10px solid var(--iss-blue-100);
  border-radius:50%;
  display:grid;
  place-items:center;
  text-align:center;
  background:var(--white);
  box-shadow:var(--shadow-sm);
}
.stat-circle strong {
  display:block;
  color:var(--iss-blue-600);
  font-size:2rem;
}
.cert-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

/* Sliders */
.slider {
  position:relative;
}
.slider__track {
  display:flex;
  gap:18px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  padding:2px 2px 10px;
}
.slider__item {
  min-width:calc((100% - 36px)/3);
  scroll-snap-align:start;
}
.slider__controls {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:13px;
}
.slider__btn {
  width:42px;
  height:38px;
  border:1px solid var(--ink-300);
  border-radius:8px;
  background:var(--white);
  font-weight:700;
}
.slider__btn:hover {
  background:var(--iss-blue-600);
  color:var(--white);
  border-color:var(--iss-blue-600);
}

/* Process */
.process-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
}
.process-step {
  padding:20px 16px;
  border:1px solid var(--ink-200);
  border-radius:var(--radius-lg);
  text-align:center;
  background:var(--white);
}
.process-step__number {
  width:38px;
  height:38px;
  margin:0 auto 11px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--iss-blue-600);
  color:var(--white);
  font-weight:700;
}

/* Share/article pages */
.topic-layout {
  display:grid;
  grid-template-columns:270px minmax(0,1fr);
  gap:30px;
  align-items:start;
}
.topic-sidebar {
  position:sticky;
  top:calc(var(--header-top) + var(--header-main) + 18px);
  max-height:68vh;
  overflow:auto;
}
.article-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:34px;
  align-items:start;
}
.article-content {
  font-size:1.05rem;
  color:var(--ink-700);
}
.article-content h2 { margin:28px 0 12px; }
.article-content p + p { margin-top:14px; }
.article-hero-image {
  max-width:820px;
  margin:24px auto;
}
.other-articles {
  position:sticky;
  top:calc(var(--header-top) + var(--header-main) + 18px);
}
.mini-article {
  display:grid;
  grid-template-columns:92px 1fr;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--ink-200);
}
.mini-article__thumb {
  aspect-ratio:4/3;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#e8f2f9;
  color:var(--iss-blue-700);
  font-size:.72rem;
  font-weight:700;
  text-align:center;
  padding:6px;
}

/* Contact */
.contact-grid {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:30px;
}
.contact-list {
  display:grid;
  gap:12px;
  margin-top:20px;
}
.contact-item {
  padding:14px;
  border:1px solid var(--ink-200);
  border-radius:var(--radius-md);
  background:var(--white);
}
.map-box {
  min-height:340px;
  border:1px solid var(--ink-200);
  border-radius:var(--radius-lg);
  display:grid;
  place-items:center;
  background:
    linear-gradient(45deg, transparent 48%, rgba(11,111,179,.08) 49%, rgba(11,111,179,.08) 51%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(11,111,179,.08) 49%, rgba(11,111,179,.08) 51%, transparent 52%),
    #edf3f7;
  background-size:34px 34px;
  color:var(--ink-600);
  font-weight:700;
  text-align:center;
  padding:24px;
}

/* Footer */
.site-footer {
  padding:52px 0 22px;
  background:#081e31;
  color:#d9e7f3;
}
.site-footer__grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:30px;
}
.site-footer h3 {
  color:var(--white);
  margin-bottom:12px;
  font-size:1rem;
}
.site-footer p { color:#c4d6e5; }
.site-footer a {
  display:block;
  margin:7px 0;
  color:#d9e7f3;
}
.site-footer a:hover { color:var(--white); text-decoration:underline; }
.site-footer__bottom {
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.14);
  color:#9eb4c6;
  font-size:.875rem;
}

/* Utilities */
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}
.mb-0{margin-bottom:0}
.text-center{text-align:center}
.text-muted{color:var(--ink-500)}
.hide-desktop{display:none}

/* Responsive */
@media (max-width:1100px) {
  .site-header__toggle { display:block; }
  .site-nav {
    display:none;
    position:absolute;
    left:16px;
    right:16px;
    top:calc(100% + 8px);
    flex-direction:column;
    align-items:stretch;
    padding:10px;
    background:var(--white);
    border:1px solid var(--ink-200);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-md);
  }
  .site-nav.is-open { display:flex; }
  .site-nav__dropdown {
    display:block;
    position:static;
    width:auto;
    box-shadow:none;
    border:0;
    border-radius:0;
    padding:0 0 0 14px;
  }
  .site-nav__link { padding:10px 12px; }
  .home-hero__inner { grid-template-columns:1fr; min-height:auto; }
  .home-hero__visual { max-width:680px; }
  .trust-grid { grid-template-columns:repeat(3,1fr); }
  .feature-grid { grid-template-columns:repeat(2,1fr); }
  .products-grid { grid-template-columns:repeat(3,1fr); }
  .grid--5 { grid-template-columns:repeat(3,1fr); }
  .site-footer__grid { grid-template-columns:repeat(2,1fr); }
  .process-grid { grid-template-columns:repeat(3,1fr); }
}

@media (max-width:820px) {
  :root { --header-top:0px; }
  .site-topbar { position:relative; }
  .site-topbar__inner { padding:8px 0; align-items:flex-start; }
  .site-topbar__contacts { gap:6px 14px; }
  .site-header { top:0; }
  .section { padding:54px 0; }
  .section-head { align-items:flex-start; flex-direction:column; }
  .brand-block,
  .layout-sidebar,
  .topic-layout,
  .article-layout,
  .contact-grid,
  .about-split,
  .product-detail {
    grid-template-columns:1fr;
  }
  .topic-sidebar,
  .other-articles { position:static; max-height:none; }
  .brand-links { grid-template-columns:repeat(2,1fr); }
  .grid--4,.grid--3 { grid-template-columns:repeat(2,1fr); }
  .products-grid { grid-template-columns:repeat(2,1fr); }
  .cert-grid { grid-template-columns:repeat(2,1fr); }
  .process-grid { grid-template-columns:repeat(2,1fr); }
  .slider__item { min-width:calc((100% - 18px)/2); }
}

@media (max-width:560px) {
  .container { width:min(var(--container), calc(100% - 22px)); }
  .site-topbar__inner { flex-direction:column; gap:8px; }
  .site-header__inner { min-height:64px; }
  .site-logo__mark { width:38px; height:38px; }
  .home-hero__inner { padding:42px 0; }
  .feature-grid,
  .trust-grid,
  .grid--2,.grid--3,.grid--4,.grid--5,
  .products-grid,
  .brand-links,
  .stats-grid,
  .cert-grid,
  .process-grid,
  .site-footer__grid,
  .form-grid {
    grid-template-columns:1fr;
  }
  .slider__item { min-width:88%; }
  .field--full { grid-column:auto; }
  .meta-row { grid-template-columns:1fr; gap:0; padding:8px 0; }
  .meta-row strong,.meta-row span { padding:2px 0; }
  .stat-circle { width:160px; height:160px; }
}


/* =========================================================
   REVISION: PPTX fidelity - scrolling/slider sections
   ========================================================= */

/* Generic horizontal carousel used for PPTX sections that must scroll */
.h-scroll {
  position:relative;
}
.h-scroll__viewport {
  overflow:hidden;
}
.h-scroll__track {
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding:2px 2px 8px;
}
.h-scroll__track::-webkit-scrollbar { display:none; }
.h-scroll__item {
  flex:0 0 auto;
  scroll-snap-align:start;
}
.h-scroll__controls {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:14px;
}
.h-scroll__btn {
  width:42px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid var(--ink-300);
  border-radius:8px;
  background:var(--white);
  color:var(--ink-800);
  font-weight:700;
}
.h-scroll__btn:hover {
  background:var(--iss-blue-600);
  border-color:var(--iss-blue-600);
  color:var(--white);
}

/* Homepage hero slider */
.hero-slider {
  position:relative;
  overflow:hidden;
  background:var(--iss-blue-900);
  color:var(--white);
}
.hero-slider__viewport {
  overflow:hidden;
}
.hero-slider__track {
  display:flex;
  transition:transform .5s ease;
}
.hero-slide {
  min-width:100%;
  background:
    radial-gradient(circle at 85% 20%, rgba(255,255,255,.15), transparent 26%),
    linear-gradient(125deg, var(--iss-blue-600), var(--iss-blue-900));
}
.hero-slide:nth-child(2) {
  background:
    radial-gradient(circle at 15% 80%, rgba(255,255,255,.12), transparent 25%),
    linear-gradient(125deg, var(--iss-blue-800), #143f58);
}
.hero-slide:nth-child(3) {
  background:
    radial-gradient(circle at 78% 68%, rgba(255,255,255,.13), transparent 24%),
    linear-gradient(125deg, #0b5f87, #081e31);
}
.hero-slider__controls {
  position:absolute;
  inset-inline:0;
  bottom:18px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:9px;
  pointer-events:none;
}
.hero-slider__dot {
  width:10px;
  height:10px;
  padding:0;
  border:1px solid rgba(255,255,255,.9);
  border-radius:999px;
  background:transparent;
  pointer-events:auto;
}
.hero-slider__dot.is-active {
  width:28px;
  background:var(--white);
}
.hero-slider__arrow {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:50%;
  background:rgba(8,30,49,.35);
  color:var(--white);
  font-size:1.3rem;
  font-weight:700;
}
.hero-slider__arrow:hover { background:rgba(8,30,49,.65); }
.hero-slider__arrow--prev { left:16px; }
.hero-slider__arrow--next { right:16px; }

/* PPTX Trust bar: logos scroll horizontally */
.trust-carousel .h-scroll__item {
  width:calc((100% - 56px) / 5);
  min-width:190px;
}
.trust-carousel .trust-item {
  height:100%;
}

/* Service slides: 3 visible on desktop */
.service-carousel .h-scroll__item {
  width:calc((100% - 36px) / 3);
  min-width:280px;
}

/* Article slides: 4 visible on desktop */
.article-carousel .h-scroll__item {
  width:calc((100% - 54px) / 4);
  min-width:230px;
}

/* Partner logos feel like a continuous trust bar */
.trust-carousel {
  padding:4px 0;
}
.trust-carousel .h-scroll__track {
  align-items:stretch;
}

/* Keep dropdown links clickable on touch/mouse and above hero */
.site-nav__dropdown {
  z-index:1100;
}

@media (max-width:1100px) {
  .trust-carousel .h-scroll__item { width:calc((100% - 32px) / 3); }
  .article-carousel .h-scroll__item { width:calc((100% - 32px) / 3); }
}

@media (max-width:820px) {
  .trust-carousel .h-scroll__item { width:calc((100% - 16px) / 2); }
  .service-carousel .h-scroll__item { width:calc((100% - 18px) / 2); }
  .article-carousel .h-scroll__item { width:calc((100% - 18px) / 2); }
  .hero-slider__arrow { width:38px;height:38px; }
}

@media (max-width:560px) {
  .trust-carousel .h-scroll__item,
  .service-carousel .h-scroll__item,
  .article-carousel .h-scroll__item {
    width:86%;
  }
  .hero-slider__arrow { display:none; }
}

/* ISSVN V12.3 header logo */
.site-logo__image{display:block;width:auto;height:58px;max-width:310px;object-fit:contain}
@media(max-width:720px){.site-logo__image{height:46px;max-width:230px}}

/* ISS_THEME_DYNAMIC_DEPTH: preserve DB menu hierarchy/order without hard-coded theme menu. */
.site-nav__dropdown-link--depth-2{padding-left:24px!important}
.site-nav__dropdown-link--depth-3{padding-left:36px!important}
.site-nav__dropdown-link--depth-4{padding-left:48px!important}


/* ======================================================================
   PH7 / ISS MENU CLASS BRIDGE
   Keep this block aligned with themes/mocdecor/partials/navigation.php.
   Menu data remains MenuBuilder-owned; this block only styles PH classes.
   ====================================================================== */
.site-topbar{background:var(--iss-topbar-bg,var(--iss-blue-900));color:var(--iss-topbar-text,#fff)}
body:not(.iss-topbar-sticky) .site-topbar{position:relative;top:auto}
body.iss-topbar-sticky .site-topbar{position:sticky;top:var(--ph-admin-toolbar-height,0px);z-index:1400}
.site-header{background:var(--iss-header-bg,#fff);border-bottom-color:var(--iss-header-border,#e4e9ee)}
body:not(.iss-header-sticky) .site-header{position:relative;top:auto}
body.iss-header-sticky .site-header{position:sticky;top:var(--ph-admin-toolbar-height,0px);z-index:1390}
body.iss-header-sticky.iss-topbar-sticky .site-header{top:calc(var(--ph-admin-toolbar-height,0px) + var(--header-top,42px))}

.site-header .ph-site-nav{margin-left:auto;display:flex;align-items:center;min-width:0}
.site-header .navbar-collapse{display:block;min-width:0}
.site-header .ph-site-menu{display:flex;align-items:center;gap:var(--iss-menu-gap,3px);list-style:none;margin:0;padding:0}
.site-header .ph-site-menu>.ph-menu-item{position:relative;list-style:none;margin:0;padding:0}
.site-header .ph-menu-item>a{display:flex;align-items:center;gap:7px;padding:12px 13px;border-radius:var(--radius-sm);font-size:var(--iss-menu-font-size,16px);font-weight:700;color:var(--iss-menu-color,#252b31);white-space:nowrap;transition:background var(--transition),color var(--transition)}
.site-header .ph-menu-item>a:hover,.site-header .ph-menu-item:focus-within>a{background:var(--iss-menu-hover-bg,#edf7fd);color:var(--iss-menu-hover,#0b669f)}
.site-header .ph-menu-item.active>a{background:var(--iss-menu-active-bg,#0b669f);color:var(--iss-menu-active,#fff)}
.site-header .ph-menu-caret{font-size:.7em;opacity:.7}
.site-header .ph-submenu-toggle{display:none}
.site-header .ph-submenu{display:none;position:absolute;left:0;top:100%;z-index:1500;min-width:270px;list-style:none;margin:0;padding:8px;background:#fff;border:1px solid var(--ink-200);border-radius:var(--radius-md);box-shadow:var(--shadow-md)}
.site-header .ph-menu-item:hover>.ph-submenu,.site-header .ph-menu-item:focus-within>.ph-submenu{display:block}
.site-header .ph-submenu .ph-menu-item{position:relative;list-style:none}
.site-header .ph-submenu .ph-menu-item>a{width:100%;padding:10px 12px;border-radius:8px;font-size:.94rem;font-weight:600;color:var(--ink-700);white-space:normal}
.site-header .ph-submenu .ph-menu-item>a:hover{background:var(--iss-menu-active-bg,#0b669f);color:#fff}
.site-header .ph-submenu .ph-submenu{left:100%;top:-8px}
.site-header .ph-mobile-menu-check{position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important}
.site-header .ph-mobile-menu-label{display:none}
.site-header .ph-mobile-menu-label__close{display:none}
.iss-header-actions{display:flex;align-items:center;gap:8px;flex:none}

@media(max-width:1100px){
  .site-header__inner{position:relative}
  .site-header .ph-site-nav{margin-left:auto}
  .site-header .ph-mobile-menu-label{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--ink-300);border-radius:8px;background:#fff;color:var(--ink-800);cursor:pointer}
  .site-header .ph-mobile-menu-check:checked + .ph-mobile-menu-label .ph-mobile-menu-label__open{display:none}
  .site-header .ph-mobile-menu-check:checked + .ph-mobile-menu-label .ph-mobile-menu-label__close{display:inline-flex}
  .site-header .navbar-collapse{display:none;position:absolute;left:16px;right:16px;top:calc(100% + 8px);z-index:1500;padding:10px;background:#fff;border:1px solid var(--ink-200);border-radius:var(--radius-md);box-shadow:var(--shadow-md);max-height:calc(100vh - 150px);overflow:auto}
  .site-header .ph-mobile-menu-check:checked ~ .navbar-collapse{display:block}
  .site-header .ph-site-menu{display:flex;flex-direction:column;align-items:stretch;gap:2px}
  .site-header .ph-site-menu>.ph-menu-item{width:100%}
  .site-header .ph-menu-item>a{padding:10px 12px;padding-right:46px;white-space:normal}
  .site-header .ph-menu-item-has-children{position:relative}
  .site-header .ph-submenu-toggle{display:flex;position:absolute;right:4px;top:4px;z-index:2;width:36px;height:36px;align-items:center;justify-content:center;border:0;border-radius:7px;background:transparent;color:var(--ink-700);font-weight:700}
  .site-header .ph-submenu-toggle__close{display:none}
  .site-header .ph-submenu-open>.ph-submenu-toggle .ph-submenu-toggle__open{display:none}
  .site-header .ph-submenu-open>.ph-submenu-toggle .ph-submenu-toggle__close{display:inline}
  .site-header .ph-submenu{display:none!important;position:static;min-width:0;margin:2px 0 4px 14px;padding:2px 0 2px 10px;border:0;border-left:1px solid var(--ink-200);border-radius:0;box-shadow:none}
  .site-header .ph-menu-item.ph-submenu-open>.ph-submenu{display:block!important}
  .site-header .ph-submenu .ph-submenu{left:auto;top:auto}
  .iss-header-actions{margin-left:8px}
}
@media(max-width:820px){
  body.iss-topbar-sticky .site-topbar{position:relative;top:auto}
  body.iss-header-sticky .site-header,body.iss-header-sticky.iss-topbar-sticky .site-header{top:var(--ph-admin-toolbar-height,0px)}
}
@media(max-width:680px){.iss-header-actions .ph-header-search{display:none}.ph-header-cart__label{display:none}.site-logo span{display:none}}

/* BUILD81.45.6.6.72 - shared ISS section/page title accent.
   Customer-approved visual: compact ~20px bold title, blue left bar and short underline. */
body.iss-theme .page-hero h1,
body.iss-theme .section-head h2,
body.iss-theme h1.title-section,
body.iss-theme .service-customer-hero h1,
body.iss-theme .service-customer-heading,
body.iss-theme .iss-product-heading h1,
body.iss-theme .iss-product-heading h2,
body.iss-theme .iss-product-subheading h2,
body.iss-theme .contact-page h1.contact-title{
  position:relative !important;
  display:block;
  margin:0 0 20px !important;
  padding:0 0 10px 16px !important;
  border-left:5px solid var(--iss-blue-600,#245493) !important;
  color:#151c28 !important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif !important;
  font-size:20px !important;
  font-weight:800 !important;
  line-height:1.3 !important;
  letter-spacing:.01em !important;
  text-align:left !important;
  text-transform:none;
}
body.iss-theme .page-hero h1::after,
body.iss-theme .section-head h2::after,
body.iss-theme h1.title-section::after,
body.iss-theme .service-customer-hero h1::after,
body.iss-theme .service-customer-heading::after,
body.iss-theme .iss-product-heading h1::after,
body.iss-theme .iss-product-heading h2::after,
body.iss-theme .iss-product-subheading h2::after,
body.iss-theme .contact-page h1.contact-title::after{
  content:"";
  position:absolute;
  left:16px;
  bottom:0;
  width:68px;
  height:3px;
  background:var(--iss-blue-600,#245493);
}


/* BUILD81.45.6.6.73 - true Inter 800 + shared page-title/breadcrumb rhythm.
   Product list spacing is the reference: breadcrumb top 18px, then 56px to page content/title. */
body.iss-theme .iss-accent-title{
  position:relative;
  display:block;
  margin:0 0 24px;
  padding:0 0 10px 16px;
  border-left:5px solid var(--iss-blue-600,#245493);
  color:#151c28;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:20px;
  font-weight:800;
  line-height:1.3;
  letter-spacing:.01em;
  text-align:left;
}
body.iss-theme .iss-accent-title::after{
  content:"";
  position:absolute;
  left:16px;
  bottom:0;
  width:68px;
  height:3px;
  background:var(--iss-blue-600,#245493);
}
body.iss-theme .iss-breadcrumb-wrap{
  padding-top:18px !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
}
body.iss-theme .iss-breadcrumb-wrap .iss-breadcrumb{margin:0 !important;}
body.iss-theme .iss-breadcrumb-wrap + .page-hero,
body.iss-theme .iss-breadcrumb-wrap + .section{padding-top:56px !important;}