/* ============================================================
   ProSpecs - Futuristic ISO Consultancy
   ============================================================ */

:root {
  --bg:        #010102;
  --bg-2:      #08080c;
  --surface:   rgba(255, 255, 255, 0.022);
  --surface-2: rgba(255, 255, 255, 0.038);
  --border:    rgba(255, 255, 255, 0.07);
  --border-2:  rgba(255, 255, 255, 0.13);

  --red:       #c81717;
  --red-bright:#e22626;
  --red-deep:  #7a0c0c;
  --red-glow:  rgba(200, 23, 23, 0.4);

  --text:      #f4f6fb;
  --text-mut:  #9aa0ad;
  --text-dim:  #656b78;

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;

  --maxw: 1200px;
  --r:    18px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 90px; background: #010102; overflow-x: hidden; }
/* Hide content for EN visitors until i18n has swapped the text (no Greek flash on navigation) */
html.i18n-cloak body { visibility: hidden; }

/* ===== Modern translucent scrollbar (global) ===== */
/* Standard props (Firefox) - scoped so they don't disable the ::-webkit rules in Chrome */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.22) transparent; }
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 100px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(226, 38, 38, 0.65); background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: rgba(226, 38, 38, 0.95); background-clip: padding-box; }
::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
::-webkit-scrollbar-corner { background: transparent; }

/* ===== Frosted glass on translucent widgets / buttons / cards ===== */
.eyebrow, .trust-badge, .lang-toggle, .btn--ghost, .nav__link--cta,
.mini-card, .service-card, .why-card, .iso-card, .std-card,
.stats__grid, .contact__form, .iso-dd__trigger, .iso-option:has(input:checked) {
  backdrop-filter: blur(13px) saturate(135%);
  -webkit-backdrop-filter: blur(13px) saturate(135%);
}

body {
  font-family: var(--font-body);
  background: transparent; /* let the fixed .bg-fx grid (z-index:-1) show through; base colour is on html */
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }

.text-grad {
  background: linear-gradient(120deg, var(--red-bright), var(--red) 55%, #8f1212);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   Background FX
   ============================================================ */
.bg-fx { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); isolation: isolate; }

.bg-grid {
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(rgba(255,255,255,0.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.038) 1px, transparent 1px);
  background-size: 64px 64px;
  /* own GPU layer so the scroll-driven opacity change never repaints the blurred glows */
  will-change: opacity; transform: translateZ(0);
  /* full-width, fades in below the header and out around the middle of the viewport */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 95px, #000 30%, transparent 55%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 95px, #000 30%, transparent 55%);
}

.bg-glow {
  position: absolute; border-radius: 50%;
  filter: blur(130px); opacity: 0.55;
  /* own permanent compositor layer so the grid's scroll-fade never repaints / shimmers it */
  transform: translateZ(0); will-change: transform; backface-visibility: hidden;
}
.bg-glow--1 {
  width: 640px; height: 640px;
  top: -250px; right: -130px;
  background: radial-gradient(circle at center,
    rgba(200,23,23,0.38) 0%, rgba(200,23,23,0.24) 18%, rgba(200,23,23,0.13) 36%, rgba(200,23,23,0.05) 56%, rgba(200,23,23,0.015) 70%, transparent 80%);
}
.bg-glow--2 {
  width: 540px; height: 540px;
  top: 60vh; left: -190px;
  background: radial-gradient(circle at center,
    rgba(150,18,18,0.22) 0%, rgba(150,18,18,0.13) 22%, rgba(150,18,18,0.06) 42%, rgba(150,18,18,0.02) 60%, transparent 78%);
}
.bg-noise { display: none; }

/* Desktop only - bake the glows straight into the background colour (opaque stops blending
   to base black), so they blend smoothly with no banding and never shimmer on scroll.
   Mobile keeps the separate blurred-glow elements above. */
@media (min-width: 981px) {
  .bg-glow { display: none; }
  .bg-fx {
    background:
      radial-gradient(72% 68% at 92% -8%,
        #320e11 0%, #200a0c 18%, #130608 36%, #090305 54%, #040203 70%, #010102 86%),
      radial-gradient(70% 74% at -6% 46%,
        #260b0e 0%, #170709 22%, #0c0406 42%, #050203 62%, #010102 82%),
      #010102;
  }
}

/* ============================================================
   Header / Nav
   ============================================================ */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(3, 3, 5, 0);
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  transition: background-color 0.55s var(--ease),
              backdrop-filter 0.55s var(--ease),
              -webkit-backdrop-filter 0.55s var(--ease);
}
/* Fixed height - no resize on scroll, so the bar stays perfectly still */
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 78px;
}
/* Frosted black glass on scroll */
.header.scrolled {
  background: rgba(3, 3, 5, 0.55);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}

.brand__logo { height: 36px; width: auto; }

.nav { display: flex; align-items: center; gap: 6px; }
.nav__title { display: none; }
.nav__link {
  font-size: 0.9rem; font-weight: 500; color: var(--text-mut);
  padding: 9px 14px; border-radius: 10px;
  transition: color 0.25s, background 0.25s;
}
.nav__link:hover { color: var(--text); background: var(--surface-2); }
.nav__link.active { color: var(--red-bright); }
.nav__link--cta {
  color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border-2); margin-left: 8px;
}
.nav__link--cta:hover {
  border-color: var(--red); color: #fff;
  box-shadow: 0 0 24px rgba(200,23,23,0.25);
}

.lang-toggle {
  font-family: var(--font-display); font-weight: 600; font-size: 0.82rem;
  letter-spacing: 0.03em; color: var(--text-mut); cursor: pointer;
  padding: 8px 13px; border-radius: 9px; margin-left: 8px;
  background: var(--surface-2); border: 1px solid var(--border-2);
  transition: 0.25s var(--ease); line-height: 1;
}
.lang-toggle:hover { color: #fff; border-color: var(--red); box-shadow: 0 0 18px rgba(200,23,23,0.22); }

/* First-visit language picker */
.lang-modal {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  padding: 24px; background: rgba(4, 4, 7, 0.88);
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.lang-modal--in { opacity: 1; }
.lang-modal__card {
  width: 100%; max-width: 380px; text-align: center;
  padding: 40px 34px; border-radius: 20px;
  background: linear-gradient(180deg, var(--surface-2), var(--bg-2));
  border: 1px solid var(--border-2); box-shadow: 0 30px 90px rgba(0,0,0,0.6);
  transform: translateY(12px) scale(0.98); transition: transform 0.35s var(--ease);
}
.lang-modal--in .lang-modal__card { transform: none; }
.lang-modal__logo { height: 34px; margin: 0 auto 22px; }
.lang-modal__title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--text);
}
.lang-modal__title span { display: block; font-size: 0.92rem; font-weight: 400; color: var(--text-mut); margin-top: 5px; }
.lang-modal__btns { display: grid; gap: 12px; margin-top: 26px; }
.lang-modal__btns button {
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; cursor: pointer;
  padding: 15px; border-radius: 13px; border: 1px solid var(--border-2);
  background: var(--surface-2); color: var(--text); transition: 0.25s var(--ease);
}
.lang-modal__btns button:hover { border-color: var(--red); color: #fff; transform: translateY(-2px); }
.lang-modal__btns button.primary {
  background: linear-gradient(135deg, var(--red-bright), var(--red-deep));
  border-color: transparent; color: #fff;
  box-shadow: 0 8px 28px rgba(200,23,23,0.32);
}

.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 8px;
  /* own stable layer so the header's backdrop-filter repaints don't make the bars jitter */
  transform: translateZ(0); backface-visibility: hidden;
}
.nav-toggle span {
  width: 24px; height: 2px; background: var(--text); border-radius: 2px;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
  padding: 14px 28px; border-radius: 12px; cursor: pointer;
  border: 1px solid transparent; transition: 0.3s var(--ease); position: relative;
}
.btn--primary {
  background: linear-gradient(135deg, var(--red-bright), var(--red-deep));
  color: #fff; box-shadow: 0 8px 30px rgba(255,42,42,0.32), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 44px rgba(255,42,42,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
}
.btn--ghost {
  background: var(--surface-2); color: var(--text); border-color: var(--border-2);
}
.btn--ghost:hover { border-color: var(--red); color: #fff; transform: translateY(-2px); }
.btn--sm { padding: 11px 22px; font-size: 0.88rem; }
.btn--full { width: 100%; }

/* ============================================================
   Hero
   ============================================================ */
.hero { padding-top: 160px; padding-bottom: 80px; position: relative; }
.hero__inner {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 60px; align-items: center;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-mut);
  padding: 8px 16px; border: 1px solid var(--border); border-radius: 100px;
  background: var(--surface); margin-bottom: 28px;
}
.eyebrow__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 10px var(--red); animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }

.hero__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.6rem, 5.6vw, 4.4rem); line-height: 1.04;
  letter-spacing: -0.02em; margin-bottom: 24px;
}
.hero__sub {
  font-size: 1.12rem; color: var(--text-mut); max-width: 540px; margin-bottom: 36px;
}
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }

.hero__trust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.trust-badge {
  font-family: var(--font-display); font-size: 0.8rem; font-weight: 600;
  color: var(--text-mut); padding: 7px 13px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface);
}
.trust-badge--more { color: var(--red-bright); border-color: rgba(255,42,42,0.3); }

/* Hero scanner visual */
.hero__visual { display: flex; align-items: center; justify-content: center; }
.scanner {
  position: relative; width: 340px; height: 340px;
  display: grid; place-items: center;
}
.scanner__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--border-2);
  animation: spin 24s linear infinite;
}
.scanner__ring::before {
  content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px;
  border-radius: 50%; background: var(--red); box-shadow: 0 0 16px var(--red);
  transform: translateX(-50%);
}
.scanner__ring--2 {
  inset: 46px; border-color: var(--border);
  border-top-color: var(--red); animation: spin 14s linear infinite reverse;
}
@keyframes spin { to { transform: rotate(360deg); } }

.scanner__core {
  width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255,42,42,0.2), rgba(11,13,18,0.32));
  border: 1px solid var(--border-2);
  display: grid; place-items: center;
  backdrop-filter: blur(7px) saturate(135%);
  -webkit-backdrop-filter: blur(7px) saturate(135%);
  box-shadow: 0 0 60px rgba(255,42,42,0.35), inset 0 0 40px rgba(255,42,42,0.12);
}
.scanner__core svg {
  width: 64px; height: 64px; color: var(--red-bright);
  transform-origin: center;
  animation: heartbeat 1.6s ease-in-out infinite;
}
@keyframes heartbeat {
  0%   { transform: scale(1);     filter: drop-shadow(0 0 4px rgba(226,38,38,0.3)); }
  10%  { transform: scale(1.045); filter: drop-shadow(0 0 8px rgba(226,38,38,0.5)); }
  20%  { transform: scale(1);     filter: drop-shadow(0 0 4px rgba(226,38,38,0.3)); }
  30%  { transform: scale(1.03);  filter: drop-shadow(0 0 7px rgba(226,38,38,0.42)); }
  44%  { transform: scale(1);     filter: drop-shadow(0 0 4px rgba(226,38,38,0.3)); }
  100% { transform: scale(1);     filter: drop-shadow(0 0 4px rgba(226,38,38,0.3)); }
}

.scanner__line {
  position: absolute; left: 8%; right: 8%; top: 50%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  box-shadow: 0 0 14px var(--red);
  animation: scan 3.4s ease-in-out infinite;
  will-change: transform;
}
/* transform-based (composited) - animating `top` forced a layout+repaint every frame,
   which made fixed elements (hamburger / AI button) jitter on mobile */
@keyframes scan { 0%,100%{ transform: translateY(-96px); } 50%{ transform: translateY(96px); } }

.scanner__label {
  position: absolute; display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-display); font-size: 0.74rem; font-weight: 600;
  padding: 6px 11px; border-radius: 8px; background: rgba(11,13,18,0.85);
  border: 1px solid var(--border-2); backdrop-filter: blur(8px); white-space: nowrap;
  color: var(--text-mut);
  animation: float 5s ease-in-out infinite;
  transition: color 0.9s var(--ease), border-color 0.9s var(--ease), box-shadow 0.9s var(--ease);
}
.scanner__label--1 { top: 8%; right: -6%; }
.scanner__label--2 { bottom: 18%; left: -10%; animation-delay: 1.2s; }
.scanner__label--3 { bottom: -2%; right: 6%; animation-delay: 2.4s; }
.scanner__check {
  display: inline-block; width: 0; overflow: hidden;
  color: var(--red-bright); font-weight: 700;
  opacity: 0; transform: scale(0.4);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), width 0.7s var(--ease);
}
.scanner__label.ticked {
  color: #fff; border-color: rgba(200,23,23,0.55);
  box-shadow: 0 0 22px rgba(200,23,23,0.35);
}
.scanner__label.ticked .scanner__check {
  width: 1em; opacity: 1; transform: scale(1);
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

/* ============================================================
   Stats
   ============================================================ */
.stats { padding: 30px 0 50px; }
.stats__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  padding: 36px; border: 1px solid var(--border); border-radius: var(--r);
  background: linear-gradient(180deg, var(--surface-2), transparent);
  position: relative; overflow: hidden;
}
.stats__grid::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
}
.stat { text-align: center; }
.stat__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1;
  background: linear-gradient(180deg, #fff, #c9ccd4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat__label { color: var(--text-mut); font-size: 0.92rem; margin-top: 10px; }

/* ============================================================
   Sections (generic)
   ============================================================ */
.section { padding: 100px 0; position: relative; }
.section__tag {
  display: inline-block; font-family: var(--font-display); font-size: 0.8rem;
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--red-bright); margin-bottom: 18px;
}
.section__tag::before {
  content: ""; display: inline-block; width: 18px; height: 2px; border-radius: 2px;
  background: var(--red); vertical-align: middle; margin: 0 10px 3px 0;
}
.section__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem); line-height: 1.12; letter-spacing: -0.02em;
}
.section__head { max-width: 760px; margin-bottom: 60px; }
.section__intro { color: var(--text-mut); font-size: 1.08rem; margin-top: 20px; }
.lead { font-size: 1.15rem; color: var(--text); margin: 24px 0 16px; }

/* ============================================================
   About
   ============================================================ */
.about__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.about__text p { color: var(--text-mut); margin-bottom: 16px; }
.checklist { margin-top: 28px; display: grid; gap: 14px; }
.checklist li {
  position: relative; padding-left: 34px; color: var(--text);
}
.checklist li::before {
  content: "✓"; position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
  font-size: 0.75rem; color: #fff; background: linear-gradient(135deg, var(--red-bright), var(--red-deep));
  box-shadow: 0 0 14px rgba(255,42,42,0.35);
}
.about__cards { display: grid; gap: 16px; }
.mini-card {
  padding: 24px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); transition: 0.3s var(--ease);
}
.mini-card:hover { border-color: var(--border-2); transform: translateX(6px); background: var(--surface-2); }
.mini-card__icon { font-size: 1.4rem; color: var(--red-bright); margin-bottom: 8px; }
.mini-card h3 { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 6px; }
.mini-card p { color: var(--text-mut); font-size: 0.95rem; }

/* ============================================================
   Services
   ============================================================ */
.services__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.service-card {
  position: relative; padding: 32px; border-radius: var(--r);
  border: 1px solid var(--border); background: var(--surface);
  overflow: hidden; transition: 0.4s var(--ease);
}
.service-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(400px circle at var(--mx,50%) var(--my,0%), rgba(255,42,42,0.1), transparent 60%);
  opacity: 0; transition: opacity 0.4s;
}
.service-card:hover { border-color: var(--border-2); transform: translateY(-6px); }
.service-card:hover::before { opacity: 1; }
.service-card__icon {
  width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(255,42,42,0.18), rgba(255,42,42,0.04));
  border: 1px solid rgba(255,42,42,0.2); margin-bottom: 22px;
}
.service-card__icon svg { width: 26px; height: 26px; color: var(--red-bright); }
.service-card h3 { font-family: var(--font-display); font-size: 1.18rem; margin-bottom: 12px; line-height: 1.3; }
.service-card p { color: var(--text-mut); font-size: 0.96rem; }
.service-card--cta {
  background: linear-gradient(160deg, rgba(255,42,42,0.12), var(--surface));
  border-color: rgba(255,42,42,0.25);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.service-card--cta h3 { font-size: 1.3rem; }
.service-card--cta .btn { margin-top: 18px; }

/* ============================================================
   Why
   ============================================================ */
.why__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.why-card {
  padding: 30px 26px; border-radius: var(--r);
  border: 1px solid var(--border); background: var(--surface);
  transition: 0.35s var(--ease); position: relative; overflow: hidden;
}
.why-card::after {
  content: ""; position: absolute; bottom: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--red), var(--red-bright)); transition: width 0.4s var(--ease);
}
.why-card:hover { transform: translateY(-6px); border-color: var(--border-2); background: var(--surface-2); }
.why-card:hover::after { width: 100%; }
.why-card__num {
  font-family: var(--font-display); font-weight: 700; font-size: 2rem;
  color: transparent; -webkit-text-stroke: 1px rgba(255,42,42,0.5); margin-bottom: 16px;
}
.why-card h3 { font-family: var(--font-display); font-size: 1.12rem; margin-bottom: 10px; }
.why-card p { color: var(--text-mut); font-size: 0.94rem; }

/* ============================================================
   Process / Timeline
   ============================================================ */
.timeline {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  position: relative; counter-reset: step;
}
.timeline::before {
  content: ""; position: absolute; top: 22px; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-2), var(--red), var(--border-2), transparent);
}
.tl-step { padding: 0 16px; text-align: center; position: relative; }
.tl-step__dot {
  width: 46px; height: 46px; margin: 0 auto 22px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 700;
  font-size: 0.9rem; color: var(--text);
  background: var(--bg-2); border: 1px solid var(--border-2); position: relative; z-index: 1;
  transition: 0.3s var(--ease);
}
.tl-step:hover .tl-step__dot {
  border-color: var(--red); color: #fff;
  box-shadow: 0 0 28px rgba(255,42,42,0.4); background: linear-gradient(135deg, var(--red-deep), var(--red));
}
.tl-step h3 { font-family: var(--font-display); font-size: 1.02rem; margin-bottom: 8px; }
.tl-step p { color: var(--text-mut); font-size: 0.9rem; }

/* ============================================================
   ISO Standards
   ============================================================ */
.iso__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px;
}
.iso-card {
  display: flex; flex-direction: column;
  padding: 22px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--surface); transition: 0.3s var(--ease); cursor: pointer;
  position: relative; overflow: hidden; color: inherit;
}
.iso-card:hover {
  border-color: rgba(200,23,23,0.45); background: var(--surface-2); transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.iso-card__code {
  display: inline-block; font-family: var(--font-display); font-weight: 700;
  font-size: 1.15rem; color: var(--red-bright); margin-bottom: 4px;
}
.iso-card__name { font-family: var(--font-display); font-weight: 600; font-size: 0.96rem; margin-bottom: 10px; }
.iso-card__desc { color: var(--text-mut); font-size: 0.88rem; line-height: 1.55; }
.iso-card__more {
  margin-top: 16px; font-family: var(--font-display); font-size: 0.82rem; font-weight: 600;
  color: var(--text-dim); transition: color 0.25s var(--ease), transform 0.25s var(--ease);
}
.iso-card:hover .iso-card__more { color: var(--red-bright); transform: translateX(4px); }

/* ============================================================
   Contact
   ============================================================ */
.section--contact {
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, transparent, rgba(255,42,42,0.03));
}
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.contact__list { margin-top: 40px; display: grid; gap: 24px; }
.contact__list li { display: flex; gap: 18px; align-items: flex-start; }
.contact__ico {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  font-size: 1.2rem; color: var(--red-bright);
  background: linear-gradient(135deg, rgba(255,42,42,0.16), rgba(255,42,42,0.03));
  border: 1px solid rgba(255,42,42,0.2);
}
.contact__k {
  display: block; font-family: var(--font-display); font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 3px;
}
.contact__list a:hover { color: var(--red-bright); }

/* Form */
.contact__form {
  padding: 36px; border-radius: var(--r); border: 1px solid var(--border);
  background: var(--surface-2); display: grid; gap: 18px;
}
.field { position: relative; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 15px 16px; font-family: var(--font-body); font-size: 0.96rem;
  color: var(--text); background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 12px; outline: none; transition: 0.25s var(--ease); resize: vertical;
}
.field select { appearance: none; color: var(--text); cursor: pointer; }
.field select option { background: var(--bg-2); color: var(--text); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--red); box-shadow: 0 0 0 3px rgba(200,23,23,0.16);
}
/* Label sits as an inline placeholder and fades out once the field is in use */
.field label {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  font-size: 0.96rem; color: var(--text-dim);
  pointer-events: none; transition: opacity 0.18s var(--ease); opacity: 1;
}
.field textarea + label { top: 18px; transform: none; }
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field select:focus + label,
.field select:valid + label { opacity: 0; }
.field input.invalid, .field select.invalid, .field textarea.invalid { border-color: var(--red); }
.form-note {
  text-align: center; color: var(--red-bright); font-weight: 500; font-size: 0.95rem;
  padding: 12px; border: 1px solid rgba(200,23,23,0.35); border-radius: 10px;
  background: rgba(200,23,23,0.07);
}
.form-note--error {
  color: #f0a83a; border-color: rgba(240,168,58,0.4); background: rgba(240,168,58,0.08);
}

/* ISO multi-select dropdown */
.iso-dd { position: relative; }
.iso-dd__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 16px; font-family: var(--font-body); font-size: 0.96rem; text-align: left;
  color: var(--text); background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 12px; cursor: pointer; outline: none; transition: 0.25s var(--ease);
}
.iso-dd__trigger:hover { border-color: var(--border-2); }
.iso-dd.open .iso-dd__trigger,
.iso-dd__trigger:focus-visible {
  border-color: var(--red); box-shadow: 0 0 0 3px rgba(200,23,23,0.16);
}
.iso-dd__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iso-dd__value--empty { color: var(--text-dim); }
.iso-dd__chev { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-mut); transition: transform 0.3s var(--ease), color 0.3s var(--ease); }
.iso-dd.open .iso-dd__chev { transform: rotate(180deg); color: var(--red-bright); }
.iso-dd__panel {
  display: none; flex-direction: column;
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 30;
  max-height: 280px; overflow-y: auto; overflow-x: hidden; padding: 6px;
  background: var(--bg-2); border: 1px solid var(--border-2); border-radius: 12px;
  box-shadow: 0 22px 55px rgba(0,0,0,0.55);
  transform-origin: top center;
}
.iso-dd.open .iso-dd__panel { display: flex; animation: ddIn 0.24s var(--ease); }
@keyframes ddIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}
.iso-dd__panel::-webkit-scrollbar { width: 8px; }
.iso-dd__panel::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 8px; }
.iso-dd__panel::-webkit-scrollbar-track { background: transparent; }
.iso-option {
  display: flex; align-items: center; gap: 12px; width: 100%; flex: 0 0 auto;
  cursor: pointer; user-select: none;
  padding: 10px 12px; border-radius: 9px; border: 1px solid transparent; margin-bottom: 2px;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease);
}
.iso-option:last-child { margin-bottom: 0; }
.iso-option:hover { background: var(--surface-2); }
.iso-option input { position: absolute; opacity: 0; pointer-events: none; }
.iso-option__box {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px;
  border: 1px solid var(--border-2); background: var(--bg);
  display: grid; place-items: center; transition: 0.18s var(--ease);
}
.iso-option__box::after {
  content: "✓"; font-size: 0.74rem; font-weight: 700; color: #fff;
  opacity: 0; transform: scale(0.5); transition: 0.18s var(--ease);
}
.iso-option__code {
  flex-shrink: 0; font-family: var(--font-display); font-weight: 600; font-size: 0.86rem;
  color: var(--text); min-width: 72px;
}
.iso-option__name { font-size: 0.86rem; color: var(--text-mut); }
.iso-option:has(input:checked) {
  background: linear-gradient(135deg, rgba(200,23,23,0.14), rgba(200,23,23,0.03));
  border-color: rgba(200,23,23,0.4);
}
.iso-option:has(input:checked) .iso-option__box {
  background: linear-gradient(135deg, var(--red-bright), var(--red-deep));
  border-color: var(--red);
}
.iso-option:has(input:checked) .iso-option__box::after { opacity: 1; transform: scale(1); }
.iso-option:has(input:checked) .iso-option__code { color: var(--red-bright); }
.iso-option:has(input:checked) .iso-option__name { color: var(--text); }
.iso-option input:focus-visible + .iso-option__box { box-shadow: 0 0 0 3px rgba(200,23,23,0.25); }

/* ============================================================
   Footer
   ============================================================ */
.footer {
  border-top: 1px solid var(--border); padding: 64px 0 32px;
  background: rgba(6, 6, 9, 0.55);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
}
.footer__inner {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px;
}
.footer__logo { height: 34px; margin-bottom: 18px; }
.footer__brand p { color: var(--text-mut); font-size: 0.94rem; max-width: 320px; }
.footer__col h4 { font-family: var(--font-display); font-size: 0.95rem; margin-bottom: 16px; }
.footer__col a, .footer__col span { display: block; color: var(--text-mut); font-size: 0.92rem; margin-bottom: 10px; transition: color 0.2s; }
.footer__col a:hover { color: var(--red-bright); }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  padding-top: 28px; border-top: 1px solid var(--border); color: var(--text-dim); font-size: 0.86rem;
}
.footer__made { font-family: var(--font-display); color: var(--text-mut); }

/* ============================================================
   ISO Standard detail pages
   ============================================================ */
.std-hero { padding: 150px 0 60px; position: relative; }
.breadcrumb {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 0.85rem; color: var(--text-dim); margin-bottom: 32px;
}
.breadcrumb a { color: var(--text-mut); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--red-bright); }
.breadcrumb span { color: var(--text-dim); }
.breadcrumb__current { color: var(--text); }
.std-hero__badge {
  display: inline-block; font-family: var(--font-display); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--red-bright);
  padding: 6px 14px; border: 1px solid rgba(200,23,23,0.3); border-radius: 100px;
  background: rgba(200,23,23,0.06); margin-bottom: 22px;
}
.std-hero__code {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3rem, 8vw, 5.5rem); line-height: 1; letter-spacing: -0.02em;
  background: linear-gradient(120deg, var(--red-bright), var(--red) 60%, #8f1212);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.std-hero__name {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 3vw, 2rem);
  margin: 8px 0 18px; color: var(--text);
}
.std-hero__tagline { font-size: 1.15rem; color: var(--text-mut); max-width: 620px; margin-bottom: 32px; }

.std-body { display: grid; grid-template-columns: 1.7fr 0.9fr; gap: 50px; padding-top: 40px; padding-bottom: 40px; align-items: start; }
.std-block { margin-bottom: 50px; }
.std-block:last-child { margin-bottom: 0; }
.std-block__title {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.01em; margin: 10px 0 18px;
}
.std-block p { color: var(--text-mut); margin-bottom: 14px; }
.std-block .lead { color: var(--text); }

.std-reqs { display: grid; gap: 12px; }
.std-req {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); transition: 0.25s var(--ease); color: var(--text);
}
.std-req:hover { border-color: var(--border-2); background: var(--surface-2); transform: translateX(5px); }
.std-req__n {
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  color: transparent; -webkit-text-stroke: 1px rgba(200,23,23,0.55); flex-shrink: 0;
}

.std-side { position: sticky; top: 100px; display: grid; gap: 16px; }
.std-card {
  padding: 26px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface);
}
.std-card h4 { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 12px; }
.std-card p { color: var(--text-mut); font-size: 0.95rem; margin-bottom: 16px; }
.std-card p:last-child { margin-bottom: 0; }
.std-card--cta {
  background: linear-gradient(160deg, rgba(200,23,23,0.13), var(--surface));
  border-color: rgba(200,23,23,0.28);
}

.std-related { padding-top: 30px; padding-bottom: 90px; }
.std-related .std-block__title { margin-bottom: 26px; }
.std-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

@media (max-width: 980px) {
  .std-body { grid-template-columns: 1fr; gap: 36px; }
  .std-side { position: static; }
  .std-related__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Legal pages (privacy / terms)
   ============================================================ */
.legal-section { padding-bottom: 90px; }
.legal-doc { max-width: 820px; margin: 0 auto; }
.legal-doc .lead { margin-bottom: 34px; }
.legal-doc .std-block { margin-bottom: 30px; }
.legal-doc .std-block__title { font-size: clamp(1.15rem, 2.4vw, 1.4rem); margin: 0 0 12px; }
.legal-prose p { color: var(--text-mut); margin-bottom: 14px; line-height: 1.75; }
.legal-prose ul.checklist { margin: 14px 0 6px; }
.legal-prose a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   Floating chat assistant
   ============================================================ */
.ps-chat {
  position: fixed; right: 22px; bottom: 22px; z-index: 250;
  font-family: var(--font-body);
  /* own stable layer so nearby backdrop-filter repaints don't make it jitter on mobile */
  transform: translateZ(0); backface-visibility: hidden;
}

.ps-chat__launcher {
  position: relative; width: 58px; height: 58px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.16); display: grid; place-items: center;
  background: linear-gradient(135deg, var(--red-bright), var(--red-deep));
  color: #fff; box-shadow: 0 10px 34px rgba(200,23,23,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.ps-chat__launcher:hover { transform: translateY(-3px); box-shadow: 0 16px 44px rgba(200,23,23,0.55); }
.ps-chat__launcher svg { width: 26px; height: 26px; position: absolute; transition: opacity 0.2s var(--ease), transform 0.3s var(--ease); }
.ps-chat__ico-close { opacity: 0; transform: rotate(-45deg) scale(0.6); }
.ps-chat--open .ps-chat__ico-open { opacity: 0; transform: rotate(45deg) scale(0.6); }
.ps-chat--open .ps-chat__ico-close { opacity: 1; transform: none; }
.ps-chat__launcher::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--red); opacity: 0.6; animation: psPing 2.6s ease-out infinite;
}
.ps-chat--open .ps-chat__launcher::after { display: none; }
@keyframes psPing { 0% { transform: scale(1); opacity: 0.5; } 70%,100% { transform: scale(1.5); opacity: 0; } }

.ps-chat__panel {
  position: absolute; right: 0; bottom: 74px; width: 360px; max-width: calc(100vw - 32px);
  height: 540px; max-height: calc(100dvh - 130px); display: flex; flex-direction: column;
  background: var(--bg-2); border: 1px solid var(--border-2); border-radius: 18px; overflow: hidden;
  opacity: 0; transform: translateY(16px) scale(0.96); transform-origin: bottom right;
  visibility: hidden; pointer-events: none;
  transition: opacity 0.26s var(--ease), transform 0.3s var(--ease), visibility 0.26s var(--ease);
}
.ps-chat--open .ps-chat__panel { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }

.ps-chat__head {
  display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(200,23,23,0.10), transparent);
}
.ps-chat__head-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #35d07f; flex-shrink: 0;
  box-shadow: 0 0 10px #35d07f;
}
.ps-chat__head-txt { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.ps-chat__head-txt strong { font-family: var(--font-display); font-size: 0.98rem; color: var(--text); }
.ps-chat__head-txt span { font-size: 0.78rem; color: var(--text-mut); }
.ps-chat__x {
  background: none; border: none; color: var(--text-mut); cursor: pointer; padding: 6px;
  border-radius: 8px; transition: 0.2s var(--ease); display: grid; place-items: center;
}
.ps-chat__x svg { width: 18px; height: 18px; }
.ps-chat__x:hover { color: #fff; background: var(--surface-2); }

.ps-chat__body {
  flex: 1 1 auto; min-height: 0; /* min-height:0 lets the messages area shrink under the clamp so the header is never pushed off-screen */
  overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.ps-chat__body::-webkit-scrollbar { width: 8px; }
.ps-chat__body::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 8px; }

.ps-msg {
  max-width: 84%; padding: 11px 14px; border-radius: 14px; font-size: 0.92rem; line-height: 1.5;
  white-space: pre-wrap; word-wrap: break-word; animation: psIn 0.3s var(--ease);
}
@keyframes psIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ps-msg--bot {
  align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); border-bottom-left-radius: 5px;
}
.ps-msg--user {
  align-self: flex-end; color: #fff; border-bottom-right-radius: 5px;
  background: linear-gradient(135deg, var(--red-bright), var(--red-deep));
}
.ps-typing { display: flex; gap: 4px; align-items: center; }
.ps-typing span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim);
  animation: psBlink 1.2s infinite both;
}
.ps-typing span:nth-child(2) { animation-delay: 0.2s; }
.ps-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes psBlink { 0%,80%,100% { opacity: 0.25; } 40% { opacity: 1; } }

.ps-chat__cta {
  align-self: stretch; text-align: center; padding: 16px;
  border: 1px solid rgba(200,23,23,0.3); border-radius: 14px;
  background: linear-gradient(160deg, rgba(200,23,23,0.12), var(--surface));
}
.ps-chat__cta p { font-size: 0.9rem; color: var(--text-mut); margin-bottom: 12px; }
.ps-chat__cta-btn {
  display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: 0.9rem;
  color: #fff; padding: 11px 22px; border-radius: 11px;
  background: linear-gradient(135deg, var(--red-bright), var(--red-deep));
  box-shadow: 0 8px 24px rgba(200,23,23,0.32);
}
.ps-chat__cta-tel { display: block; margin-top: 10px; font-size: 0.88rem; color: var(--red-bright); }

.ps-chat__foot {
  display: flex; align-items: center; gap: 8px; padding: 12px; border-top: 1px solid var(--border);
}
.ps-chat__foot input {
  flex: 1; padding: 12px 14px; font-family: var(--font-body); font-size: 0.92rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 11px; outline: none;
  transition: 0.2s var(--ease);
}
.ps-chat__foot input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(200,23,23,0.14); }
.ps-chat__foot input:disabled { opacity: 0.5; }
.ps-chat__foot button {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px; cursor: pointer; border: none;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--red-bright), var(--red-deep)); transition: 0.2s var(--ease);
}
.ps-chat__foot button svg { width: 18px; height: 18px; }
.ps-chat__foot button:hover { transform: translateY(-1px); }
.ps-chat__foot button:disabled { opacity: 0.5; cursor: default; transform: none; }
.ps-chat__note {
  padding: 0 14px 12px; font-size: 0.68rem; color: var(--text-dim); text-align: center; line-height: 1.4;
}

@media (max-width: 520px) {
  .ps-chat { right: 14px; bottom: 14px; }
  .ps-chat__launcher { width: 50px; height: 50px; }
  .ps-chat__launcher svg { width: 22px; height: 22px; }
  /* hide the floating button while the chat is open so the window uses that space (close via the header ✕) */
  .ps-chat--open .ps-chat__launcher { display: none; }
  .ps-chat__panel {
    width: calc(100vw - 24px); bottom: 14px;
    height: auto; max-height: calc(100dvh - 42px);
  }
}

/* ============================================================
   Dark obsidian crystal surfaces
   Translucent dark glass that lets the blurred grid/glow show
   through. Original outlines are kept (no dark edges).
   ============================================================ */
.mini-card, .service-card, .why-card, .iso-card, .std-card,
.stats__grid, .contact__form {
  /* dark obsidian glass + a soft grey gloss across the top so it looks a touch shiny */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01) 24%, transparent 50%),
    rgba(7, 8, 12, 0.25);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}
.eyebrow, .trust-badge, .lang-toggle, .btn--ghost, .nav__link--cta {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.018) 48%, transparent 85%),
    rgba(7, 8, 12, 0.3);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.service-card--cta {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), transparent 45%),
    linear-gradient(160deg, rgba(200,23,23,0.16), rgba(7,8,12,0.3)) !important;
}

/* ============================================================
   Reveal animation
   ============================================================ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; gap: 50px; }
  .hero__visual { order: -1; }
  .scanner { width: 280px; height: 280px; }
  .about__grid, .contact__grid { grid-template-columns: 1fr; gap: 40px; }
  .services__grid, .why__grid { grid-template-columns: repeat(2, 1fr); }
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .timeline { grid-template-columns: 1fr; gap: 28px; }
  .timeline::before { display: none; }
  .tl-step {
    display: grid; grid-template-columns: 46px 1fr; column-gap: 18px; row-gap: 4px;
    text-align: left; align-items: start; padding: 0;
  }
  .tl-step__dot { margin: 0; grid-row: 1 / 3; }
  .tl-step h3 { grid-column: 2; margin-top: 8px; }
  .tl-step p { grid-column: 2; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .nav {
    position: fixed; top: 0; right: 0; left: auto; bottom: auto;
    height: 100vh; height: 100dvh; width: min(80vw, 320px);
    overflow-y: auto;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px;
    padding: 100px 24px 40px; background: #0a0c12;
    border-left: 1px solid var(--border); transform: translateX(100%);
    transition: transform 0.4s var(--ease); z-index: 90;
  }
  .nav.open { transform: translateX(0); }
  .nav__title {
    display: block; font-family: var(--font-display); font-size: 0.74rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim);
    padding: 0 14px 16px; margin-bottom: 6px; border-bottom: 1px solid var(--border);
  }
  .nav__link { padding: 14px; font-size: 1.05rem; }
  /* Contact matches the other items in the drawer (no button styling) */
  .nav__link--cta {
    margin-left: 0; text-align: left; padding: 14px;
    background: none; border: none; box-shadow: none; color: var(--text-mut);
  }
  .lang-toggle {
    margin: 14px 14px 0; width: calc(100% - 28px); text-align: center;
    padding: 13px; font-size: 0.95rem;
  }
  .nav-toggle { display: flex; z-index: 95; }
  .services__grid, .why__grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .section { padding: 70px 0; }
  .hero { padding-top: 130px; }
  .footer__inner { grid-template-columns: 1fr; gap: 30px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  /* Stats bubble: give it room to breathe at the screen edges */
  .stats { padding-left: 16px; padding-right: 16px; }
  .stats__grid { padding: 28px 20px; gap: 26px 16px; }

  /* ISO standards: compact two-per-row tiles instead of one long column */
  .iso__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .iso-card { padding: 15px 14px; }
  .iso-card__code { font-size: 1rem; margin-bottom: 3px; }
  .iso-card__name { font-size: 0.8rem; margin-bottom: 0; line-height: 1.3; }
  .iso-card__desc, .iso-card__more { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}