@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: optional;
  src: url("../fonts/roboto-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: optional;
  src: url("../fonts/roboto-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: optional;
  src: url("../fonts/roboto-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: optional;
  src: url("../fonts/roboto-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("../fonts/vazirmatn-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url("../fonts/vazirmatn-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url("../fonts/vazirmatn-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 800;
  font-display: optional;
  src: url("../fonts/vazirmatn-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("../fonts/vazirmatn-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url("../fonts/vazirmatn-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url("../fonts/vazirmatn-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 800;
  font-display: optional;
  src: url("../fonts/vazirmatn-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --font-fa: 'Vazirmatn', 'Tahoma', 'Noto Sans Arabic', 'Segoe UI', sans-serif;
  --font-en: 'Roboto', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-body: var(--font-fa);
  --color-mint: #3dcb9c;
  --color-mint-strong: #26b382;
  --color-mint-light: #74f3c5;
  --color-navy: #0e2a47;
  --color-navy-soft: #14385e;
  --color-white: #ffffff;
  --color-surface: #f3f8fb;
  --color-ink: #122033;
  --color-muted: #5c6c80;
  --text-accent: #1b7f5e;
  --text-muted-strong: #516277;
  --status-success-bg: #157e56;
  --status-success-fg: #ffffff;
  --color-warning-soft: #fff0f0;
  --color-warning-border: #f1a8a8;
  --color-warning-text: #8d2f2f;
  --contact-tone-info-bg: color-mix(in srgb, var(--surface-2) 78%, var(--surface-1) 22%);
  --contact-tone-info-border: color-mix(in srgb, var(--panel-border) 72%, var(--color-mint) 28%);
  --contact-tone-info-text: color-mix(in srgb, var(--text-primary) 90%, var(--color-navy) 10%);
  --contact-tone-info-icon-bg: color-mix(in srgb, var(--surface-1) 70%, var(--panel-border) 30%);
  --contact-tone-success-bg: color-mix(in srgb, var(--color-mint) 24%, var(--surface-2) 76%);
  --contact-tone-success-border: color-mix(in srgb, var(--color-mint-strong) 54%, var(--panel-border) 46%);
  --contact-tone-success-text: color-mix(in srgb, var(--text-primary) 74%, var(--color-mint-strong) 26%);
  --contact-tone-success-icon-bg: color-mix(in srgb, var(--color-mint) 38%, var(--surface-1) 62%);
  --contact-tone-error-bg: color-mix(in srgb, var(--color-warning-soft) 66%, var(--surface-2) 34%);
  --contact-tone-error-border: color-mix(in srgb, var(--color-warning-border) 70%, var(--panel-border) 30%);
  --contact-tone-error-text: color-mix(in srgb, var(--color-warning-text) 93%, var(--text-primary) 7%);
  --contact-tone-error-icon-bg: color-mix(in srgb, var(--color-warning-soft) 74%, var(--surface-1) 26%);
  --wizard-progress-bg: rgba(14, 42, 71, 0.12);
  --wizard-progress-fill: linear-gradient(90deg, #74f3c5 0%, #3dcb9c 55%, #0e2a47 100%);
  --shadow-soft: 0 18px 45px rgba(14, 42, 71, 0.1);
  --radius-md: 16px;
  --radius-lg: 24px;
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --container: 1200px;
  --body-bg:
    radial-gradient(circle at 5% 10%, rgba(61, 203, 156, 0.18), transparent 42%),
    radial-gradient(circle at 92% 18%, rgba(14, 42, 71, 0.15), transparent 44%),
    linear-gradient(180deg, #f9fdff 0%, #eef6fb 50%, #ffffff 100%);
  --header-bg: rgba(255, 255, 255, 0.82);
  --header-border: rgba(14, 42, 71, 0.1);
  --panel-bg: var(--color-white);
  --panel-border: rgba(14, 42, 71, 0.12);
  --surface-1: #ffffff;
  --surface-2: #f3f8fb;
  --surface-soft: rgba(255, 255, 255, 0.88);
  --surface-elevated: #ffffff;
  --surface-elevated-soft: color-mix(in srgb, var(--surface-elevated) 90%, var(--surface-2) 10%);
  --text-primary: #122033;
  --text-secondary: #3b516c;
  --border-soft: rgba(14, 42, 71, 0.12);
  --border-strong: rgba(14, 42, 71, 0.28);
  --focus-ring-color: color-mix(in srgb, var(--color-mint-strong) 68%, var(--color-navy) 32%);
  --interactive-bg: rgba(255, 255, 255, 0.92);
  --interactive-text: #16395f;
  --interactive-hover-bg: #8ef2cd;
  --interactive-hover-text: #09263d;
  --investment-bg: linear-gradient(145deg, #0d2944 0%, #133d66 52%, #0f3457 100%);
  --investment-panel-bg: rgba(8, 28, 48, 0.5);
  --investment-panel-border: rgba(194, 228, 255, 0.34);
  --investment-title: #ffffff;
  --investment-text: rgba(235, 246, 255, 0.92);
  --investment-muted: rgba(210, 232, 249, 0.84);
  --investment-value: #8ef8d5;
  --investment-input-bg: rgba(6, 25, 43, 0.68);
  --investment-input-text: #f2f9ff;
  --form-control-bg: #ffffff;
  --form-control-text: #112336;
  --form-control-placeholder: #4e6279;
  --anchor-offset: 0px;
}

html[data-theme='dark'] {
  --color-mint: #43d4a6;
  --color-mint-strong: #58e0b4;
  --color-mint-light: #9bf8d6;
  --color-navy: #d8e8ff;
  --color-navy-soft: #c4dcff;
  --color-white: #0f1826;
  --color-surface: #121d2d;
  --color-ink: #ecf3ff;
  --color-muted: #a8bdd8;
  --text-accent: #74eac4;
  --text-muted-strong: #d0e1f3;
  --status-success-bg: #2e8f69;
  --status-success-fg: #031522;
  --wizard-progress-bg: rgba(116, 243, 197, 0.2);
  --shadow-soft: 0 20px 52px rgba(3, 8, 14, 0.48);
  --body-bg:
    radial-gradient(circle at 5% 10%, rgba(67, 212, 166, 0.14), transparent 42%),
    radial-gradient(circle at 92% 18%, rgba(38, 69, 105, 0.3), transparent 44%),
    linear-gradient(180deg, #0a111b 0%, #111c2c 50%, #0f1826 100%);
  --header-bg: rgba(10, 19, 31, 0.88);
  --header-border: rgba(168, 189, 216, 0.2);
  --panel-bg: #132236;
  --panel-border: rgba(168, 189, 216, 0.24);
  --surface-1: #132236;
  --surface-2: #1a2c43;
  --surface-soft: rgba(19, 34, 54, 0.92);
  --surface-elevated: #1b2f47;
  --surface-elevated-soft: color-mix(in srgb, var(--surface-elevated) 82%, var(--surface-2) 18%);
  --text-primary: #ecf3ff;
  --text-secondary: #c9daef;
  --border-soft: rgba(168, 189, 216, 0.24);
  --border-strong: rgba(168, 189, 216, 0.46);
  --focus-ring-color: color-mix(in srgb, var(--color-mint-light) 74%, var(--color-navy-soft) 26%);
  --interactive-bg: rgba(24, 44, 69, 0.92);
  --interactive-text: #ecf3ff;
  --interactive-hover-bg: #3bbf93;
  --interactive-hover-text: #051925;
  --investment-bg: linear-gradient(145deg, #0b1828 0%, #112840 56%, #102339 100%);
  --investment-panel-bg: rgba(16, 35, 57, 0.72);
  --investment-panel-border: rgba(166, 203, 235, 0.34);
  --investment-title: #f2f8ff;
  --investment-text: rgba(223, 236, 250, 0.93);
  --investment-muted: rgba(188, 210, 231, 0.9);
  --investment-value: #9bf8d6;
  --investment-input-bg: rgba(10, 24, 40, 0.82);
  --investment-input-text: #eef7ff;
  --form-control-bg: #182a41;
  --form-control-text: #e8f1ff;
  --form-control-placeholder: #b8cce3;
  --contact-tone-info-bg: color-mix(in srgb, var(--surface-2) 74%, var(--surface-1) 26%);
  --contact-tone-info-border: color-mix(in srgb, var(--panel-border) 58%, var(--color-mint) 42%);
  --contact-tone-info-text: color-mix(in srgb, var(--text-primary) 92%, var(--color-mint-light) 8%);
  --contact-tone-info-icon-bg: color-mix(in srgb, var(--surface-1) 72%, var(--panel-border) 28%);
  --contact-tone-success-bg: color-mix(in srgb, var(--color-mint) 20%, var(--surface-2) 80%);
  --contact-tone-success-border: color-mix(in srgb, var(--color-mint-strong) 62%, var(--panel-border) 38%);
  --contact-tone-success-text: color-mix(in srgb, var(--text-primary) 68%, var(--color-mint-light) 32%);
  --contact-tone-success-icon-bg: color-mix(in srgb, var(--color-mint) 34%, var(--surface-1) 66%);
  --contact-tone-error-bg: color-mix(in srgb, var(--color-warning-soft) 28%, var(--surface-2) 72%);
  --contact-tone-error-border: color-mix(in srgb, var(--color-warning-border) 74%, var(--panel-border) 26%);
  --contact-tone-error-text: color-mix(in srgb, #ffd7d7 72%, var(--text-primary) 28%);
  --contact-tone-error-icon-bg: color-mix(in srgb, var(--color-warning-soft) 40%, var(--surface-1) 60%);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--anchor-offset);
}

body {
  margin: 0;
  color: var(--text-primary);
  background: var(--body-bg);
  font-family: var(--font-body);
  font-synthesis-weight: none;
  line-height: 1.6;
  transition: background-color 0.3s ease, color 0.3s ease;
}

#main-content,
#home,
#products,
#process,
#certifications,
#blog,
#investment,
#contact,
#contact-form,
#smart-wizard,
#pdf-zone {
  scroll-margin-top: var(--anchor-offset);
}

#top {
  scroll-margin-top: 0;
}

.runtime-banner {
  position: fixed;
  inset-block-start: 0.75rem;
  inset-inline: 0.75rem;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  border: 1px solid transparent;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  color: #fff;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.runtime-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: none;
}

.runtime-banner p {
  margin: 0;
  font-size: 0.92rem;
}

.runtime-banner--info {
  background: #0b5cab;
  border-color: #2f7fcf;
}

.runtime-banner--warning {
  background: #8f5a04;
  border-color: #d79c35;
}

.runtime-banner--error {
  background: #8b2323;
  border-color: #cb4f4f;
}

.runtime-banner-dismiss {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}

.ga-consent-banner {
  position: fixed;
  inset-inline: 0.9rem;
  inset-block-end: 0.9rem;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 0.8rem 0.95rem;
  border-radius: 14px;
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--surface-1) 90%, var(--color-navy) 10%);
  color: var(--text-primary);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
}

.ga-consent-banner[hidden] {
  display: none;
}

.ga-consent-banner p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
}

.ga-consent-accept {
  border: 1px solid color-mix(in srgb, var(--color-mint) 62%, var(--border-strong) 38%);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--color-mint) 42%, var(--surface-1) 58%) 0%,
    color-mix(in srgb, var(--color-mint-strong) 54%, var(--surface-1) 46%) 100%
  );
  color: color-mix(in srgb, var(--text-primary) 88%, var(--color-navy) 12%);
  border-radius: 10px;
  padding: 0.48rem 0.88rem;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
}

.ga-consent-accept:hover {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--color-mint-light) 56%, var(--surface-1) 44%) 0%,
    color-mix(in srgb, var(--color-mint) 62%, var(--surface-1) 38%) 100%
  );
}

.ga-consent-accept:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

html[dir='ltr'] body {
  --font-body: var(--font-en);
}

img,
svg {
  max-width: 100%;
}

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

.skip-link {
  position: absolute;
  top: -4rem;
  inset-inline-start: 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  color: var(--color-white);
  background: var(--color-navy);
  z-index: 1001;
}

.skip-link:focus {
  top: 1rem;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  --header-progress: 0;
  isolation: isolate;
  backdrop-filter: blur(16px) saturate(135%);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--header-bg) 90%, var(--color-white) 10%),
    color-mix(in srgb, var(--header-bg) 97%, transparent 3%)
  );
  border-bottom: 1px solid var(--header-border);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--color-navy) 8%, transparent);
  transition: box-shadow 0.24s ease, background-color 0.24s ease, border-color 0.24s ease, backdrop-filter 0.24s ease;
}

.site-header::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  background: linear-gradient(90deg, var(--color-mint-strong), var(--color-navy-soft));
  transform-origin: 0 50%;
  transform: scaleX(var(--header-progress));
  pointer-events: none;
  z-index: 2;
}

.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(125% 78% at 50% -22%, rgba(61, 203, 156, 0.13), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 70%);
  opacity: calc(0.16 + (var(--header-progress) * 0.3));
  z-index: 1;
}

.site-header.is-compact {
  box-shadow:
    0 16px 34px color-mix(in srgb, var(--color-navy) 16%, transparent),
    0 1px 0 color-mix(in srgb, var(--color-mint-strong) 48%, transparent);
}

.site-header.is-compact .nav-wrap {
  min-height: 64px;
}

.nav-wrap {
  position: relative;
  z-index: 3;
  min-height: 78px;
  display: grid;
  align-items: center;
  grid-template-columns: auto 1fr auto auto;
  gap: 0.9rem;
  transition: min-height 0.24s ease;
}

.nav-wrap > * {
  animation: header-slot-in 0.42s ease both;
}

.nav-wrap > :nth-child(1) {
  animation-delay: 0.04s;
}

.nav-wrap > :nth-child(2) {
  animation-delay: 0.09s;
}

.nav-wrap > :nth-child(3) {
  animation-delay: 0.14s;
}

.nav-wrap > :nth-child(4) {
  animation-delay: 0.19s;
}

.brand {
  display: inline-flex;
  align-items: center;
}

.brand-mark {
  width: 176px;
  height: 56px;
}

.logo-stroke {
  fill: none;
  stroke: var(--color-mint-strong);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
  animation: draw 1.4s ease forwards;
}

.logo-text {
  fill: var(--color-navy);
  font-weight: 800;
  font-size: 1.8rem;
  letter-spacing: 0.08em;
  opacity: 0;
  animation: fade-in 0.4s ease 0.9s forwards;
}

.saw-gear {
  transform-origin: 108px 37px;
  animation: rotate-gear 24s linear infinite;
}

.logo-reveal {
  animation: pulse-logo 8.2s ease-in-out 1.2s infinite;
}

.menu-toggle {
  display: none;
  border: 1px solid color-mix(in srgb, var(--panel-border) 72%, var(--color-mint-strong) 28%);
  background: var(--interactive-bg);
  color: var(--interactive-text);
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  place-items: center;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.menu-toggle:hover,
.menu-toggle:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--color-mint-strong) 66%, var(--color-navy) 34%);
  outline: 0;
}

.menu-toggle .menu-toggle-bar {
  display: block;
  height: 2px;
  width: 22px;
  background: currentColor;
  border-radius: 999px;
  transition: transform 0.2s ease, opacity 0.2s ease, width 0.2s ease;
}

.menu-toggle .menu-toggle-bar + .menu-toggle-bar {
  margin-top: 5px;
}

.menu-toggle[aria-expanded='true'] .menu-toggle-bar:nth-child(2) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded='true'] .menu-toggle-bar:nth-child(3) {
  opacity: 0;
  width: 0;
}

.menu-toggle[aria-expanded='true'] .menu-toggle-bar:nth-child(4) {
  transform: translateY(-7px) rotate(-45deg);
}

.primary-nav ul {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
}

.primary-nav .nav-active-pill {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 50%;
  inline-size: var(--nav-pill-width, 0);
  block-size: 2.2rem;
  border-radius: 999px;
  background:
    linear-gradient(
      130deg,
      rgba(61, 203, 156, 0.2) 0%,
      color-mix(in srgb, var(--color-mint-strong) 30%, var(--color-white) 70%) 100%
    );
  border: 1px solid color-mix(in srgb, var(--color-mint-strong) 52%, transparent);
  box-shadow:
    0 10px 20px color-mix(in srgb, var(--color-navy) 14%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transform: translate3d(var(--nav-pill-x, 0), -50%, 0);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.22s ease, inline-size 0.22s ease, opacity 0.22s ease;
  z-index: 1;
}

.primary-nav .nav-active-pill.is-visible {
  opacity: 1;
}

.primary-nav .nav-item {
  position: relative;
  z-index: 2;
}

.primary-nav .nav-link-group {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  position: relative;
  z-index: 2;
}

.primary-nav .nav-link {
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  padding: 0.65rem 0.8rem;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  position: relative;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.primary-nav .nav-link[aria-current='true']::after {
  content: "";
  position: absolute;
  inset-inline: 0.78rem;
  inset-block-end: 0.28rem;
  block-size: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-mint-strong), var(--color-navy-soft));
}

.primary-nav .nav-link[aria-current='true'],
.primary-nav .nav-item.open .nav-parent-link {
  background: transparent;
  color: var(--color-navy);
  box-shadow: none;
}

.primary-nav .nav-item.open .nav-parent-link {
  background: rgba(61, 203, 156, 0.22);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-mint-strong) 48%, transparent);
}

.primary-nav .nav-mega-toggle {
  border: 0;
  background: transparent;
  color: var(--color-ink);
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.primary-nav .nav-mega-toggle::before {
  content: "";
  inline-size: 0.42rem;
  block-size: 0.42rem;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 0.2s ease;
}

.primary-nav .nav-item.open .nav-mega-toggle::before {
  transform: rotate(-135deg) translateY(-1px);
}

.primary-nav .nav-link:hover,
.primary-nav .nav-link:focus-visible,
.primary-nav .nav-mega-toggle:hover,
.primary-nav .nav-mega-toggle:focus-visible {
  background: rgba(61, 203, 156, 0.16);
  color: var(--color-navy);
}

.primary-nav .mega-menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  inset-inline-start: 0;
  min-inline-size: 250px;
  max-inline-size: 340px;
  background: var(--panel-bg);
  border: 1px solid color-mix(in srgb, var(--panel-border) 76%, var(--color-mint-strong) 24%);
  border-radius: 14px;
  box-shadow:
    0 18px 36px color-mix(in srgb, var(--color-navy) 19%, transparent),
    0 1px 0 color-mix(in srgb, var(--color-mint-strong) 36%, transparent);
  padding: 0.7rem;
  display: grid;
  gap: 0.3rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.primary-nav .nav-item.open .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.mega-menu .mega-menu-link {
  display: block;
  color: var(--color-ink);
  text-decoration: none;
  padding: 0.54rem 0.68rem;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.mega-menu .mega-menu-link:hover,
.mega-menu .mega-menu-link:focus-visible {
  background: rgba(61, 203, 156, 0.2);
  border-color: color-mix(in srgb, var(--color-mint-strong) 46%, transparent);
  transform: translateX(2px);
  outline: 0;
}

.header-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  border: 1px solid color-mix(in srgb, var(--panel-border) 72%, var(--color-mint-strong) 28%);
  border-radius: 999px;
  padding: 0.22rem;
  background: color-mix(in srgb, var(--panel-bg) 87%, var(--color-white) 13%);
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 10px 20px color-mix(in srgb, var(--color-navy) 10%, transparent);
  max-inline-size: 100%;
}

.lang-controls {
  display: inline-flex;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--panel-bg) 88%, var(--color-white) 12%);
}

.lang-btn {
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--color-navy) 88%, var(--color-muted) 12%);
  font: inherit;
  min-block-size: 2.2rem;
  padding: 0.35rem 0.66rem;
  cursor: pointer;
  border-radius: 999px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.lang-btn.is-active {
  background: linear-gradient(135deg, var(--color-navy), var(--color-navy-soft));
  color: var(--color-white);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--color-navy) 28%, transparent);
}

.theme-toggle {
  border: 1px solid color-mix(in srgb, var(--panel-border) 74%, var(--color-mint-strong) 26%);
  background: color-mix(in srgb, var(--panel-bg) 86%, var(--color-white) 14%);
  color: var(--color-ink);
  border-radius: 999px;
  min-block-size: 2.2rem;
  padding: 0.35rem 0.72rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--color-mint-strong) 62%, var(--color-navy) 38%);
  background: color-mix(in srgb, var(--panel-bg) 76%, var(--color-mint-strong) 24%);
  outline: 0;
}

.theme-toggle[aria-pressed='true'] {
  background: linear-gradient(135deg, rgba(61, 203, 156, 0.28), rgba(61, 203, 156, 0.2));
  color: var(--text-primary);
}

.theme-toggle-icon {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  color: var(--color-navy);
}

.menu-toggle:focus-visible,
.primary-nav .nav-link:focus-visible,
.primary-nav .nav-mega-toggle:focus-visible,
.mega-menu .mega-menu-link:focus-visible,
.theme-toggle:focus-visible,
.lang-btn:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

.section {
  padding: var(--space-6) 0;
}

.section-head {
  text-align: center;
  max-width: 820px;
  margin-inline: auto;
  margin-bottom: var(--space-5);
}

.eyebrow {
  margin: 0;
  color: var(--text-accent);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-block: 0;
}

h1,
h2,
h3 {
  color: var(--color-navy);
  line-height: 1.25;
  font-weight: 800;
}

h1 {
  font-size: clamp(2rem, 2.2vw + 1.2rem, 3.4rem);
  margin-top: var(--space-2);
  font-weight: 900;
}

h2 {
  font-size: clamp(1.5rem, 1.1vw + 1.2rem, 2.4rem);
  margin-top: var(--space-2);
}

.lead {
  color: var(--color-muted);
  margin-top: var(--space-3);
}

h1[data-i18n='hero.title'] {
  min-block-size: calc(2 * 1.25em);
}

html[lang='en'] h1[data-i18n='hero.title'] {
  letter-spacing: -0.012em;
  text-wrap: balance;
}

html[lang='fa'] h1[data-i18n='hero.title'] {
  letter-spacing: -0.006em;
}

p.lead[data-i18n='hero.subtitle'] {
  min-block-size: calc(2 * 1.6em);
}

.hero {
  position: relative;
  overflow: clip;
  min-height: 74vh;
  padding-block: clamp(1.1rem, 2vw, 2rem);
  display: flex;
  align-items: center;
}

.hero-gradient {
  position: absolute;
  inset: -22% -4% auto;
  block-size: 140%;
  background:
    radial-gradient(circle at 16% 22%, rgba(116, 243, 197, 0.3) 0%, rgba(116, 243, 197, 0) 44%),
    radial-gradient(circle at 78% 36%, rgba(14, 42, 71, 0.3) 0%, rgba(14, 42, 71, 0) 54%),
    linear-gradient(132deg, rgba(20, 56, 94, 0.74) 0%, rgba(61, 203, 156, 0.26) 54%, rgba(10, 27, 45, 0.78) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cpath d='M22 130h216M44 86l172 88M44 174l172-88' stroke='%230E2A47' stroke-opacity='.08' stroke-width='5'/%3E%3C/svg%3E");
  filter: saturate(118%);
  z-index: -1;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-5);
  align-items: center;
}

.hero article {
  position: relative;
}

.hero-panel {
  background: color-mix(in srgb, var(--panel-bg) 92%, var(--surface-1) 8%);
  border: 1px solid color-mix(in srgb, var(--panel-border) 72%, var(--color-mint-strong) 28%);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: 0 24px 50px rgba(8, 35, 61, 0.14);
  backdrop-filter: blur(10px);
}

.hero-panel p[data-i18n='brand.mission'] {
  min-block-size: calc(4 * 1.6em);
}

.catalog-link {
  display: inline-flex;
  margin-top: var(--space-3);
  color: var(--color-navy);
  font-weight: 700;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.hero-trust-strip {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.5rem;
}

.hero-trust-strip li {
  border: 1px solid color-mix(in srgb, var(--panel-border) 64%, var(--color-mint-strong) 36%);
  border-radius: 999px;
  padding: 0.24rem 0.62rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--interactive-text) 90%, var(--color-navy) 10%);
  background: color-mix(in srgb, var(--surface-1) 70%, var(--color-mint-light) 30%);
  box-shadow: 0 6px 12px color-mix(in srgb, var(--color-navy) 8%, transparent);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.78rem 1.28rem;
  border: 1px solid transparent;
  font-weight: 700;
  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease,
    background-color 0.24s ease,
    border-color 0.24s ease,
    color 0.24s ease;
}

.btn-primary {
  background: linear-gradient(145deg, var(--color-mint) -8%, var(--color-navy-soft) 122%);
  color: var(--color-white);
  box-shadow: 0 14px 26px rgba(20, 56, 94, 0.26);
}

.btn-ghost {
  border-color: var(--border-strong);
  color: var(--interactive-text);
  background: var(--interactive-bg);
  box-shadow: 0 10px 22px rgba(11, 37, 64, 0.12);
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-1px) scale(1.01);
  background: linear-gradient(140deg, var(--interactive-hover-bg) 0%, #35d894 100%);
  border-color: rgba(53, 216, 148, 0.72);
  color: var(--interactive-hover-text);
  box-shadow: 0 18px 28px rgba(43, 179, 132, 0.32);
  outline: 0;
}

.hero-blade-slider {
  margin-top: var(--space-4);
  padding: 0.8rem;
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background: linear-gradient(140deg, var(--surface-soft), var(--surface-2));
  backdrop-filter: blur(8px);
}

.hero-blade-viewport {
  overflow: hidden;
  border-radius: 14px;
  aspect-ratio: 5 / 4;
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
}

.hero-blade-track {
  display: flex;
  width: 100%;
  transition: transform 0.45s ease;
}

.hero-blade-slide {
  min-width: 100%;
  margin: 0;
}

.hero-blade-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-blade-controls {
  margin-top: 0.7rem;
  display: flex;
  gap: 0.5rem;
}

.hero-blade-prev,
.hero-blade-next,
.hero-blade-toggle {
  border: 1px solid var(--border-strong);
  background: var(--interactive-bg);
  color: var(--interactive-text);
  border-radius: 999px;
  padding: 0.38rem 0.75rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.24s ease;
}

.hero-blade-prev:hover,
.hero-blade-prev:focus-visible,
.hero-blade-next:hover,
.hero-blade-next:focus-visible,
.hero-blade-toggle:hover,
.hero-blade-toggle:focus-visible {
  background: var(--color-mint-light);
  border-color: rgba(53, 216, 148, 0.72);
  color: var(--interactive-hover-text);
  outline: 0;
}

.hero-blade-prev:disabled,
.hero-blade-next:disabled,
.hero-blade-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.hero-blade-dots {
  margin-top: 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.hero-blade-dot {
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--border-strong);
  cursor: pointer;
}

.hero-blade-dot:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

.hero-blade-dot.is-active {
  background: var(--color-mint-strong);
  transform: scale(1.15);
}

.hero-blade-caption {
  margin: 0.65rem 0 0;
  color: var(--text-secondary);
  font-size: 0.92rem;
  min-block-size: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--panel-border) 68%, var(--color-mint-strong) 32%);
  border-radius: 10px;
  padding: 0.46rem 0.58rem;
  background: linear-gradient(
    140deg,
    color-mix(in srgb, var(--surface-soft) 88%, var(--color-mint-light) 12%) 0%,
    color-mix(in srgb, var(--surface-soft) 94%, var(--surface-2) 6%) 100%
  );
}

html.no-js .hero-blade-controls,
html.no-js .hero-blade-dots,
html.no-js .hero-blade-toggle {
  display: none;
}

@media (min-width: 1025px) {
  .hero article::before {
    content: "";
    position: absolute;
    inset-inline-start: -1.2rem;
    inset-block-start: -1.8rem;
    inline-size: min(54vw, 540px);
    block-size: 240px;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    opacity: 0.08;
    filter: blur(24px);
    background:
      radial-gradient(circle at 24% 48%, color-mix(in srgb, var(--color-mint-light) 78%, transparent), transparent 58%),
      radial-gradient(circle at 70% 38%, color-mix(in srgb, var(--color-mint) 56%, transparent), transparent 64%);
  }

  html.js .hero article h1[data-i18n='hero.title'],
  html.js .hero article p.lead[data-i18n='hero.subtitle'],
  html.js .hero article .hero-actions,
  html.js .hero article .hero-trust-strip {
    opacity: 0;
    transform: translateY(10px);
    animation: hero-fade-up 0.5s ease forwards;
  }

  html.js .hero article p.lead[data-i18n='hero.subtitle'] {
    animation-delay: 80ms;
  }

  html.js .hero article .hero-actions {
    animation-delay: 140ms;
  }

  html.js .hero article .hero-trust-strip {
    animation-delay: 200ms;
  }
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

.catalog-header,
.product-filters,
.product-explorer,
.viewer-zone,
.wizard-zone,
.pdf-zone,
.demo-zone {
  margin-bottom: var(--space-5);
}

.catalog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.catalog-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  font-weight: 700;
  color: var(--color-navy);
}

.catalog-stat strong {
  font-size: 2rem;
}

.catalog-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.product-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid rgba(14, 42, 71, 0.1);
  border-radius: var(--radius-md);
  background: var(--surface-elevated-soft);
}

.product-filters label {
  display: grid;
  gap: 0.35rem;
  color: var(--text-primary);
  font-weight: 600;
}

.filter-label-head {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.filter-label-icon {
  inline-size: 1.4rem;
  block-size: 1.4rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(61, 203, 156, 0.2);
  color: var(--text-primary);
}

.filter-label-icon svg {
  inline-size: 0.95rem;
  block-size: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-filters select {
  border: 1px solid rgba(14, 42, 71, 0.18);
  border-radius: 9px;
  background: var(--form-control-bg);
  color: var(--form-control-text);
  padding: 0.6rem 0.55rem;
  font: inherit;
}

.product-explorer {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--space-3);
}

.product-explorer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-2);
}

.product-card-wrap {
  display: grid;
  gap: 0.5rem;
}

.product-card {
  position: relative;
  --blade-tilt-x: 12deg;
  --blade-tilt-y: -8deg;
  --blade-tilt-x-active: 8deg;
  --blade-tilt-y-active: 3deg;
  --tooth-accent: color-mix(in srgb, var(--color-mint-strong) 66%, var(--text-primary) 34%);
  --tooth-glow: color-mix(in srgb, var(--color-mint-light) 52%, transparent);
  border: 1px solid color-mix(in srgb, var(--panel-border) 74%, var(--color-mint-strong) 26%);
  background:
    radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--color-mint-light) 20%, transparent), transparent 42%),
    linear-gradient(180deg, var(--surface-1) 0%, color-mix(in srgb, var(--surface-2) 72%, var(--surface-1) 28%) 100%);
  border-radius: 14px;
  padding: 0.9rem;
  cursor: pointer;
  text-align: start;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.product-card.tooth-tone-micro {
  --blade-tilt-x: 10deg;
  --blade-tilt-y: -10deg;
  --blade-tilt-x-active: 6deg;
  --blade-tilt-y-active: -2deg;
  --tooth-accent: color-mix(in srgb, #39c6ff 70%, var(--text-primary) 30%);
  --tooth-glow: color-mix(in srgb, #7de0ff 46%, transparent);
}

.product-card.tooth-tone-balanced {
  --tooth-accent: color-mix(in srgb, #3dcb9c 70%, var(--text-primary) 30%);
  --tooth-glow: color-mix(in srgb, #74f3c5 52%, transparent);
}

.product-card.tooth-tone-aggressive {
  --blade-tilt-x: 13deg;
  --blade-tilt-y: -14deg;
  --blade-tilt-x-active: 6deg;
  --blade-tilt-y-active: 8deg;
  --tooth-accent: color-mix(in srgb, #ff7b58 74%, var(--text-primary) 26%);
  --tooth-glow: color-mix(in srgb, #ff9f85 44%, transparent);
}

.product-card.tooth-tone-dual {
  --blade-tilt-x: 11deg;
  --blade-tilt-y: -6deg;
  --blade-tilt-x-active: 7deg;
  --blade-tilt-y-active: 4deg;
  --tooth-accent: color-mix(in srgb, #8a93ff 70%, var(--text-primary) 30%);
  --tooth-glow: color-mix(in srgb, #a7b0ff 44%, transparent);
}

.product-card::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, var(--color-mint-light), var(--color-mint-strong));
  opacity: 0.35;
  transition: opacity 0.22s ease;
}

.product-card:hover,
.product-card:focus-visible,
.product-card.is-active {
  border-color: color-mix(in srgb, var(--color-mint-strong) 64%, var(--panel-border) 36%);
  transform: translateY(-3px);
  box-shadow: 0 18px 32px color-mix(in srgb, var(--color-navy) 16%, transparent);
  outline: 0;
}

.product-card:hover::after,
.product-card:focus-visible::after,
.product-card.is-active::after {
  opacity: 1;
}

.product-card-visual {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(circle at 15% 15%, color-mix(in srgb, var(--surface-1) 84%, transparent), transparent 42%),
    linear-gradient(140deg, color-mix(in srgb, var(--color-mint) 34%, var(--surface-1) 66%), color-mix(in srgb, var(--color-navy) 62%, transparent));
  margin-bottom: 0.65rem;
  isolation: isolate;
}

.product-card-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 18%, var(--tooth-glow), transparent 48%);
  opacity: 0.72;
  transition: opacity 0.22s ease;
  z-index: 0;
}

.product-card-3d {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 1;
}

.product-card-3d img {
  width: 86%;
  height: 86%;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(14, 42, 71, 0.25));
  transform: perspective(800px) rotateX(var(--blade-tilt-x)) rotateY(var(--blade-tilt-y));
  transition: transform 0.2s ease, filter 0.2s ease;
}

.product-card:hover .product-card-3d img,
.product-card.is-active .product-card-3d img {
  transform: perspective(800px) rotateX(var(--blade-tilt-x-active)) rotateY(var(--blade-tilt-y-active));
  filter: drop-shadow(0 10px 22px color-mix(in srgb, var(--tooth-accent) 48%, transparent));
}

.product-card:hover .product-card-visual::after,
.product-card.is-active .product-card-visual::after {
  opacity: 1;
}

.product-card-finish {
  position: absolute;
  inset-inline-end: 0.5rem;
  inset-block-start: 0.5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--panel-border) 65%, var(--color-mint-strong) 35%);
  background: color-mix(in srgb, var(--surface-1) 88%, var(--color-mint-light) 12%);
  color: var(--text-primary);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.3;
  padding: 0.24rem 0.55rem;
}

.product-card-code {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--panel-border) 58%, var(--color-mint-strong) 42%);
  padding: 0.15rem 0.52rem;
  font-weight: 800;
  color: color-mix(in srgb, var(--tooth-accent) 76%, var(--text-primary) 24%);
  background: color-mix(in srgb, var(--surface-1) 78%, var(--tooth-glow) 22%);
}

.product-card h3 {
  margin: 0.35rem 0;
  font-size: 1rem;
  color: var(--text-primary);
}

.product-card p {
  margin: 0 0 0.45rem;
  color: var(--text-secondary);
  line-height: 1.5;
  font-size: 0.88rem;
}

.product-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.product-card-meta span {
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--panel-border) 68%, var(--color-mint-strong) 32%);
  background: color-mix(in srgb, var(--surface-1) 76%, var(--surface-2) 24%);
  padding: 0.17rem 0.5rem;
}

.product-card-link {
  display: inline-flex;
  width: fit-content;
  font-size: 0.83rem;
  color: var(--text-primary);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--panel-border) 38%, var(--color-mint-strong) 62%);
  padding-bottom: 0.06rem;
}

.product-internal-links {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.1rem;
}

.product-internal-links a {
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 0.22rem;
}

.product-detail {
  background: var(--panel-bg);
  border: 1px solid rgba(14, 42, 71, 0.1);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  box-shadow: var(--shadow-soft);
}

.product-detail-head p {
  margin-top: 0.45rem;
  color: var(--text-muted-strong);
}

.product-detail-badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: var(--space-3) 0;
}

.product-badge {
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-elevated) 74%, var(--color-mint-light) 26%);
  color: var(--text-primary);
  padding: 0.35rem 0.75rem;
  font-size: 0.82rem;
}

.product-detail-grid {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.product-detail-grid dt {
  font-weight: 700;
  color: var(--text-primary);
}

.product-detail-grid dd {
  margin: 0.2rem 0 0;
  color: var(--text-muted-strong);
}

.product-claims {
  margin-top: var(--space-3);
  display: grid;
  gap: 0.4rem;
}

.product-compare-strip {
  margin-top: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--panel-border) 70%, var(--color-mint-light) 30%);
  border-radius: 12px;
  padding: 0.75rem;
  background: color-mix(in srgb, var(--surface-1) 84%, var(--surface-2) 16%);
}

.product-compare-head h4 {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.product-compare-head p {
  margin: 0.18rem 0 0;
  color: var(--text-secondary);
  font-size: 0.81rem;
}

.product-compare-grid {
  margin-top: 0.62rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.product-compare-card {
  border: 1px solid color-mix(in srgb, var(--panel-border) 74%, var(--color-mint-strong) 26%);
  border-radius: 10px;
  padding: 0.55rem;
  background: color-mix(in srgb, var(--surface-1) 82%, var(--surface-2) 18%);
}

.product-compare-code {
  margin: 0;
  font-weight: 800;
  color: var(--text-primary);
}

.product-compare-meta {
  margin: 0.32rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.34rem;
}

.product-compare-meta span {
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--panel-border) 66%, var(--color-mint-strong) 34%);
  padding: 0.11rem 0.45rem;
  font-size: 0.74rem;
  color: var(--text-secondary);
}

.product-compare-score {
  margin: 0.45rem 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.77rem;
  color: var(--text-secondary);
}

.product-compare-score strong {
  color: var(--text-primary);
}

.product-compare-select {
  margin-top: 0.48rem;
  width: 100%;
}

.viewer-zone,
.wizard-zone,
.pdf-zone,
.demo-zone {
  border: 1px solid rgba(14, 42, 71, 0.1);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--surface-soft);
}

.viewer-head p {
  margin-top: 0.4rem;
  color: var(--text-muted-strong);
}

.viewer-body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  align-items: center;
}

.viewer-stage {
  margin: 0;
  aspect-ratio: 16 / 10;
}

.viewer-stage img {
  width: 100%;
  height: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(14, 42, 71, 0.12);
}

.viewer-stage figcaption {
  margin-top: 0.45rem;
  color: var(--text-muted-strong);
}

.viewer-controls {
  display: grid;
  gap: 0.5rem;
}

.viewer-canvas-wrap {
  margin-top: var(--space-2);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(14, 42, 71, 0.14);
  display: none;
}

.viewer-canvas-wrap.is-visible {
  display: block;
}

.viewer-canvas {
  width: 100%;
  height: 320px;
  display: block;
}

.viewer-status {
  margin-top: 0.5rem;
  color: var(--text-muted-strong);
}

.wizard-grid,
.pdf-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

.wizard-grid label,
.pdf-grid label {
  display: grid;
  gap: 0.35rem;
  font-weight: 600;
  color: var(--text-primary);
}

.wizard-progress {
  margin-top: var(--space-2);
  border-radius: 999px;
  background: var(--wizard-progress-bg);
  block-size: 0.72rem;
  overflow: hidden;
}

.wizard-progress-fill {
  inline-size: 0%;
  block-size: 100%;
  border-radius: inherit;
  background: var(--wizard-progress-fill);
  transition: inline-size 0.22s ease;
}

.wizard-progress-label {
  margin: 0.5rem 0 0;
  color: var(--text-muted-strong);
  font-size: 0.9rem;
}

.wizard-results {
  margin-top: var(--space-3);
  display: grid;
  gap: var(--space-2);
}

.wizard-result-card {
  border: 1px solid rgba(14, 42, 71, 0.12);
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
  background: var(--surface-1);
}

.pdf-note {
  margin-top: var(--space-2);
  color: var(--text-muted-strong);
}

.demo-warning {
  border-inline-start: 4px solid var(--color-warning-border);
  padding-inline-start: 0.65rem;
  color: var(--color-warning-text);
  background: var(--color-warning-soft);
  border-radius: 8px;
  padding-block: 0.45rem;
}

.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-2);
}

.demo-card {
  text-align: start;
  cursor: pointer;
  border: 1px solid rgba(14, 42, 71, 0.1);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-1);
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.demo-card:hover,
.demo-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(61, 203, 156, 0.75);
  outline: 0;
}

.demo-media img,
.video-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(61, 203, 156, 0.22), rgba(14, 42, 71, 0.22));
  color: var(--text-primary);
  font-weight: 700;
}

.demo-body {
  padding: 0.7rem 0.8rem 1rem;
}

.demo-body > p:not(.demo-claim):not(.demo-disclaimer) {
  color: var(--text-muted-strong);
}

.demo-claim {
  margin-top: 0.4rem;
  color: var(--text-accent);
  font-weight: 700;
}

.demo-disclaimer {
  margin-top: 0.35rem;
  color: var(--text-muted-strong);
  font-size: 0.86rem;
}

.demo-duration {
  color: var(--text-muted-strong);
  font-size: 0.88rem;
}

.demo-modal[hidden] {
  display: none;
}

.demo-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
}

.demo-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 23, 38, 0.55);
}

.demo-modal-panel {
  position: relative;
  z-index: 1;
  inline-size: min(760px, calc(100% - 2rem));
  max-block-size: calc(100vh - 2rem);
  overflow: auto;
  background: var(--surface-1);
  border-radius: 16px;
  border: 1px solid rgba(14, 42, 71, 0.16);
  box-shadow: 0 25px 60px rgba(14, 42, 71, 0.32);
  padding: 1rem;
}

.demo-modal-close {
  position: absolute;
  inset-inline-end: 0.65rem;
  inset-block-start: 0.65rem;
  border: 0;
  border-radius: 50%;
  inline-size: 2rem;
  block-size: 2rem;
  background: rgba(14, 42, 71, 0.08);
  color: var(--color-navy);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.demo-warning-soft {
  margin-top: 0.5rem;
  border: 1px solid var(--color-warning-border);
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
  border-radius: 9px;
  padding: 0.55rem 0.7rem;
}

.demo-modal-media {
  margin-top: 0.8rem;
}

.demo-modal-media video {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(14, 42, 71, 0.14);
  background: #0e2a47;
}

.demo-modal-caption,
.demo-modal-claim,
.demo-modal-disclaimer,
.demo-modal-duration {
  margin: 0.45rem 0 0;
}

.demo-modal-claim {
  color: var(--text-accent);
  font-weight: 700;
}

.demo-modal-disclaimer,
.demo-modal-duration {
  color: var(--text-muted-strong);
  font-size: 0.92rem;
}

.demo-modal-actions {
  margin-top: 0.8rem;
  display: flex;
  justify-content: flex-end;
}

.product-error {
  margin: 0;
  color: #8f2d2d;
}

.product-empty {
  display: grid;
  gap: 0.7rem;
  align-content: start;
  border: 1px dashed color-mix(in srgb, var(--panel-border) 62%, var(--color-mint-strong) 38%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-1) 82%, var(--surface-2) 18%);
  padding: 1rem;
}

.product-empty p {
  margin: 0;
  color: var(--text-secondary);
}

.product-empty-visual {
  position: relative;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--panel-border) 70%, var(--color-mint-strong) 30%);
  background:
    radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--color-mint-light) 35%, transparent), transparent 46%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-1) 88%, var(--surface-2) 12%), color-mix(in srgb, var(--surface-2) 86%, var(--surface-1) 14%));
  padding: 0.5rem;
  color: color-mix(in srgb, var(--color-mint-strong) 64%, var(--text-primary) 36%);
}

.product-empty-visual svg {
  width: 100%;
  height: auto;
  display: block;
}

.product-empty-visual[data-lang='fa'] svg {
  transform: scaleX(-1);
}

.product-empty-visual[data-lang='fa'] .product-empty-caption {
  transform: scaleX(-1);
  transform-origin: center;
}

.product-empty-bg {
  fill: color-mix(in srgb, var(--surface-1) 84%, var(--surface-2) 16%);
  stroke: color-mix(in srgb, var(--panel-border) 72%, var(--color-mint-strong) 28%);
  stroke-width: 1;
}

.product-empty-grid circle {
  fill: color-mix(in srgb, var(--panel-border) 64%, var(--text-secondary) 36%);
}

.product-empty-blade {
  fill: url(#emptyBladeGradient);
}

.product-empty-ring {
  fill: none;
  stroke: color-mix(in srgb, var(--tooth-accent, var(--color-mint-strong)) 70%, var(--text-primary) 30%);
  stroke-width: 7;
}

.product-empty-cross {
  stroke: color-mix(in srgb, #ff7b58 76%, var(--text-primary) 24%);
  stroke-width: 5;
  stroke-linecap: round;
}

.product-empty-caption {
  fill: currentColor;
  font-size: 16px;
  font-family: inherit;
  font-weight: 700;
}

.product-empty-badge {
  position: absolute;
  inset-inline-end: 0.45rem;
  inset-block-start: 0.42rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--panel-border) 64%, var(--color-mint-strong) 36%);
  background: color-mix(in srgb, var(--surface-1) 80%, var(--surface-2) 20%);
  color: var(--text-primary);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.2rem 0.52rem;
}

html[data-theme='dark'] .product-empty-visual {
  color: color-mix(in srgb, var(--color-mint-light) 68%, var(--text-primary) 32%);
  background:
    radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--color-mint) 32%, transparent), transparent 46%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-1) 88%, #0d1724 12%), color-mix(in srgb, var(--surface-2) 84%, #0d1724 16%));
}

.product-empty-reset {
  width: fit-content;
}

.product-table-empty {
  text-align: center;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--surface-1) 82%, var(--surface-2) 18%);
  font-weight: 600;
}

.card {
  border-radius: var(--radius-md);
  border: 1px solid rgba(14, 42, 71, 0.1);
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
  overflow: clip;
}

.card-visual {
  aspect-ratio: 4 / 3;
  background: linear-gradient(145deg, rgba(61, 203, 156, 0.25), rgba(14, 42, 71, 0.3));
}

.card-body {
  padding: var(--space-3);
}

.card-meta {
  margin-top: var(--space-2);
  color: var(--text-muted-strong);
}

.blog-card,
.blog-detail {
  border-color: var(--panel-border);
  background: var(--surface-1);
}

.blog-card {
  position: relative;
  overflow: hidden;
}

.blog-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 4px;
  background: linear-gradient(90deg, var(--color-mint-strong), var(--color-navy-soft));
}

.blog-card-visual,
.blog-detail-cover {
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(61, 203, 156, 0.2), rgba(14, 42, 71, 0.2));
}

.blog-card-visual img,
.blog-detail-cover img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.blog-card h3,
.blog-detail h3 {
  margin: 0.25rem 0 0;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.35;
}

.blog-card-meta {
  margin: 0.55rem 0 0;
  color: var(--text-secondary);
  font-size: 0.86rem;
}

.blog-card-link,
.blog-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: var(--space-2);
  color: var(--interactive-text);
  text-decoration: none;
  font-weight: 700;
}

.blog-card-link:hover,
.blog-card-link:focus-visible,
.blog-back-link:hover,
.blog-back-link:focus-visible {
  color: var(--interactive-hover-text);
  outline: none;
}

.blog-card-link:focus-visible,
.blog-back-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(61, 203, 156, 0.28);
  border-radius: 10px;
}

.blog-card .card-meta {
  min-block-size: 3.5rem;
  color: var(--text-muted-strong);
}

#blog-cards .blog-detail,
#blog-cards .blog-empty-state {
  grid-column: 1 / -1;
}

.blog-detail {
  padding: var(--space-3);
}

.blog-detail .card-body {
  padding-inline: 0;
  padding-block-end: 0;
}

.blog-detail-lead {
  margin: 0.8rem 0;
  color: var(--text-secondary);
  font-size: 1.02rem;
}

.blog-detail-body {
  display: grid;
  gap: 0.85rem;
}

.blog-detail-body p {
  margin: 0;
}

.blog-invalid-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
  color: var(--text-secondary);
}

.cert-card {
  border-radius: var(--radius-md);
  border: 1px solid rgba(14, 42, 71, 0.14);
  background: var(--surface-1);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.cert-scan-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(120deg, #eef4fb, #f8fbff);
}

.cert-scan {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cert-status-chip {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-end: 0.75rem;
  border-radius: 999px;
  padding: 0.22rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--status-success-fg);
}

.cert-status-chip.is-active {
  background: var(--status-success-bg);
}

.cert-status-chip.is-past {
  background: #2667c7;
  color: #ffffff;
}

.cert-validity {
  margin-top: 0.35rem;
  color: var(--text-primary);
  font-weight: 600;
}

.cert-actions {
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.cert-cta {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(14, 42, 71, 0.18);
  padding: 0.45rem 0.85rem;
  color: var(--text-primary);
  font-weight: 700;
  text-decoration: none;
}

.cert-cta:hover,
.cert-cta:focus-visible {
  border-color: rgba(14, 42, 71, 0.45);
}

.cert-qr {
  inline-size: 4.2rem;
  block-size: 4.2rem;
  border: 1px solid rgba(14, 42, 71, 0.15);
  border-radius: 8px;
  background: var(--surface-1);
}

.cert-timeline {
  margin-top: var(--space-4);
  border: 1px solid rgba(14, 42, 71, 0.1);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  padding: var(--space-3);
}

.cert-timeline h3 {
  margin: 0;
}

.cert-timeline-track {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0.4rem 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  position: relative;
}

.cert-timeline-track::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 16px;
  block-size: 2px;
  background: linear-gradient(90deg, rgba(23, 138, 95, 0.3), rgba(38, 103, 199, 0.3));
}

.cert-node {
  position: relative;
  display: grid;
  gap: 0.35rem;
  padding-top: 0.85rem;
}

.cert-node-dot {
  inline-size: 0.85rem;
  block-size: 0.85rem;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}

.cert-node-title {
  font-weight: 700;
  color: var(--text-primary);
}

.cert-node-date {
  color: var(--text-muted-strong);
  font-size: 0.9rem;
}

.cert-node.is-active .cert-node-dot {
  background: #178a5f;
}

.cert-node.is-past .cert-node-dot {
  background: #2667c7;
}

.cert-proof-slider {
  margin-top: var(--space-4);
  border: 1px solid rgba(14, 42, 71, 0.1);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  padding: var(--space-3);
}

.cert-proof-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.cert-proof-head h3 {
  margin: 0;
}

.cert-proof-controls {
  display: inline-flex;
  gap: 0.5rem;
}

.cert-proof-viewport {
  margin-top: var(--space-3);
  border-radius: 12px;
  overflow: hidden;
  direction: ltr;
}

.cert-proof-track {
  display: flex;
  transition: transform 0.4s ease;
  will-change: transform;
}

.cert-proof-slide {
  margin: 0;
  min-inline-size: 100%;
  border: 1px solid rgba(14, 42, 71, 0.12);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2);
}

.cert-proof-slide img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  display: block;
}

.cert-proof-slide figcaption {
  padding: 0.65rem 0.85rem;
  color: var(--text-primary);
  font-weight: 600;
}

.cert-proof-dots {
  margin-top: 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cert-proof-dot {
  inline-size: 0.62rem;
  block-size: 0.62rem;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: rgba(14, 42, 71, 0.25);
  cursor: pointer;
}

.cert-proof-dot.is-active {
  background: var(--color-mint-strong);
  transform: scale(1.12);
}

.cert-proof-caption {
  margin: 0.6rem 0 0;
  color: var(--text-muted-strong);
}

.spec-table-wrap {
  margin-top: var(--space-5);
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
}

th,
td {
  text-align: start;
  border-bottom: 1px solid rgba(14, 42, 71, 0.08);
  padding: 0.9rem 1rem;
}

th {
  color: var(--color-white);
  background: var(--color-navy);
}

.process {
  background:
    linear-gradient(180deg, rgba(14, 42, 71, 0.03), rgba(14, 42, 71, 0.08)),
    radial-gradient(circle at center, rgba(61, 203, 156, 0.16), transparent 65%);
}

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.timeline li {
  background: var(--surface-elevated-soft);
  border: 1px solid rgba(14, 42, 71, 0.14);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: var(--space-3);
  position: relative;
  overflow: hidden;
}

.timeline li::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 22%, rgba(61, 203, 156, 0.18), transparent 42%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.4), transparent 45%);
  pointer-events: none;
}

.timeline-icon-wrap {
  display: grid;
  place-items: center;
  gap: 0.35rem;
}

.timeline-icon {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-navy);
  color: var(--color-white);
  box-shadow: 0 10px 24px rgba(14, 42, 71, 0.18);
}

.timeline-icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

.timeline-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.timeline-copy {
  position: relative;
  z-index: 1;
}

.timeline-copy h3 {
  margin: 0 0 0.25rem;
}

.timeline-copy p {
  margin: 0;
}

.timeline-flow {
  display: inline-flex;
  gap: 0.2rem;
  color: var(--text-accent);
  font-size: 1rem;
  font-weight: 800;
}

.timeline-flow-arrow {
  opacity: 0.2;
  transform: translateX(0);
  animation: timeline-arrow-move 1.1s ease-in-out infinite;
}

.timeline-flow-arrow:nth-child(2) {
  animation-delay: 0.2s;
}

.timeline-flow-arrow:nth-child(3) {
  animation-delay: 0.4s;
}

.timeline-step-material_selection .timeline-icon,
.timeline-step-proprietary_toothing .timeline-icon,
.timeline-step-heat_treatment .timeline-icon {
  background: linear-gradient(145deg, #0e2a47, #26b382);
}

.process-module {
  margin-top: var(--space-4);
  border: 1px solid rgba(14, 42, 71, 0.14);
  border-radius: var(--radius-md);
  background: var(--surface-elevated-soft);
  padding: var(--space-3);
}

.process-module-head p {
  margin-top: 0.4rem;
  color: var(--text-muted-strong);
}

.process-location {
  font-weight: 700;
  color: var(--text-primary);
}

.process-tour-media {
  margin-top: var(--space-3);
  position: relative;
}

.process-map-overlay {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  z-index: 3;
  max-inline-size: 270px;
  border: 1px solid rgba(14, 42, 71, 0.16);
  border-radius: 14px;
  background: var(--surface-elevated);
  box-shadow: 0 16px 30px rgba(14, 42, 71, 0.2);
  padding: 0.85rem;
}

.process-map-overlay h4 {
  margin: 0;
  color: var(--text-primary);
}

.process-map-overlay p {
  margin: 0.45rem 0 0.65rem;
  color: var(--text-muted-strong);
  font-size: 0.95rem;
}

.process-map-link {
  width: 100%;
  justify-content: center;
}

.process-tour-controls {
  margin-top: var(--space-2);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.process-tour-btn {
  min-height: 3rem;
  font-size: 0.95rem;
  font-weight: 700;
}

#process-tour-frame,
#process-tour-fallback {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(14, 42, 71, 0.14);
  border-radius: 12px;
  background: rgba(14, 42, 71, 0.08);
}

#process-tour-frame {
  min-height: 340px;
}

#process-tour-fallback {
  display: none;
  object-fit: cover;
}

.process-stage-grid {
  margin-top: var(--space-3);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-2);
}

.process-stage-btn {
  border: 1px solid rgba(14, 42, 71, 0.2);
  background: var(--surface-elevated);
  border-radius: 12px;
  text-align: start;
  padding: 0.7rem 0.8rem;
  display: grid;
  gap: 0.35rem;
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.process-stage-btn:hover,
.process-stage-btn:focus-visible {
  border-color: rgba(61, 203, 156, 0.88);
  transform: translateY(-1px);
  outline: 0;
  box-shadow: 0 8px 20px rgba(14, 42, 71, 0.12);
}

.process-stage-btn.is-active {
  border-color: var(--color-mint-strong);
  background: rgba(61, 203, 156, 0.09);
}

.process-stage-btn-index {
  inline-size: 1.65rem;
  block-size: 1.65rem;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-weight: 700;
  color: var(--color-white);
  background: var(--color-navy);
}

.process-stage-btn-title {
  font-weight: 700;
  color: var(--text-primary);
}

.process-stage-details {
  margin-top: var(--space-3);
  border: 1px solid rgba(14, 42, 71, 0.15);
  border-radius: 12px;
  background: var(--surface-elevated);
  padding: var(--space-3);
}

.process-stage-details h4 {
  margin: 0 0 0.4rem;
}

.process-stage-details ul {
  margin: 0.5rem 0 0;
  padding-inline-start: 1.2rem;
  color: var(--text-muted-strong);
}

.process-stage-details li + li {
  margin-top: 0.35rem;
}

.process-detail-label {
  margin-top: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
}

.process-footnote {
  margin-top: var(--space-2);
  color: var(--text-muted-strong);
  font-size: 0.9rem;
}

.step-index {
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: var(--color-navy);
  color: var(--color-white);
  font-weight: 700;
}

#process-compare-table td.process-compare-feature {
  font-weight: 700;
  color: var(--text-primary);
}

#process-compare-table td.process-compare-ipss {
  background: color-mix(in srgb, var(--surface-elevated) 72%, var(--color-mint-light) 28%);
  color: var(--text-primary);
  font-weight: 700;
}

#process-compare-table td.process-compare-market {
  background: color-mix(in srgb, var(--surface-elevated) 80%, var(--surface-2) 20%);
  color: var(--text-muted-strong);
}

.investment {
  background: var(--investment-bg);
  color: var(--investment-text);
}

.investment .section-head {
  max-inline-size: 76ch;
}

.investment .section-head h2 {
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.investment h2,
.investment .lead,
.investment h3,
.investment h4 {
  color: var(--investment-title);
}

.investment .lead {
  color: var(--investment-text);
}

.investment .eyebrow {
  color: color-mix(in srgb, var(--investment-value) 82%, #ffffff 18%);
}

.investment-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.investment-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--investment-panel-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--investment-panel-bg);
  box-shadow: 0 20px 40px rgba(4, 18, 34, 0.26);
  backdrop-filter: blur(8px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.investment-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--investment-panel-border) 65%, transparent);
}

.investment-panel-title {
  margin: 0;
  font-size: 1.16rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.investment-chart-panel {
  position: relative;
  display: grid;
  gap: var(--space-3);
}

.investment-chart-panel::before {
  content: "";
  position: absolute;
  inset: -20% auto auto -16%;
  inline-size: 260px;
  block-size: 220px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(116, 243, 197, 0.16), transparent 68%);
  filter: blur(0.5px);
  pointer-events: none;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-2);
}

.kpi {
  border: 1px solid rgba(143, 234, 206, 0.44);
  border-radius: 14px;
  padding: var(--space-3);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(61, 203, 156, 0.09));
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.kpi-donut {
  --donut-size: 58px;
  inline-size: var(--donut-size);
  block-size: var(--donut-size);
  border-radius: 50%;
  background:
    radial-gradient(circle closest-side, rgba(8, 28, 48, 0.98) 72%, transparent 74%),
    conic-gradient(var(--color-mint-light) calc(var(--progress, 50) * 1%), rgba(223, 241, 255, 0.22) 0);
  border: 1px solid rgba(143, 234, 206, 0.5);
}

.kpi-content strong {
  display: block;
  font-size: 1.52rem;
  line-height: 1.15;
  color: var(--investment-title);
  letter-spacing: 0.01em;
}

.kpi-content span {
  color: var(--investment-muted);
}

.kpi-trend-up {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  margin-top: 0.2rem;
  color: var(--investment-value);
  font-size: 0.9rem;
  font-weight: 700;
}

.kpi-trend-up::before {
  content: "▲";
  color: var(--investment-value);
}

.investment-chart-card {
  border: 1px solid rgba(166, 216, 246, 0.34);
  border-radius: 14px;
  padding: var(--space-3);
  background: rgba(255, 255, 255, 0.08);
}

.market-growth-meta h3 {
  margin: 0;
  font-size: 1.03rem;
}

.market-growth-meta p {
  margin: 0.35rem 0 0;
  color: var(--investment-muted);
}

.market-growth-track {
  margin-top: var(--space-3);
  inline-size: 100%;
  block-size: 0.78rem;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(210, 236, 255, 0.2);
}

.market-growth-fill {
  block-size: 100%;
  inline-size: 62%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-mint) 0%, var(--color-mint-light) 100%);
  box-shadow: 0 0 20px rgba(116, 243, 197, 0.4);
}

.market-growth-value {
  margin: var(--space-2) 0 0;
  color: var(--investment-value);
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.market-growth-source {
  margin: 0.55rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
  align-items: baseline;
  color: var(--investment-muted);
  font-size: 0.82rem;
}

.market-growth-source a {
  color: var(--investment-value);
  font-weight: 700;
  text-decoration-color: color-mix(in srgb, var(--investment-value) 70%, transparent);
}

.market-growth-source a:hover,
.market-growth-source a:focus-visible {
  text-decoration-color: currentColor;
}

.market-growth-note {
  margin: 0.28rem 0 0;
  color: var(--investment-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.investment-cta-wrap {
  display: flex;
  justify-content: flex-start;
}

.investment-cta-lg {
  min-inline-size: min(100%, 360px);
  min-block-size: 3.45rem;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  font-weight: 760;
  border: 1px solid rgba(122, 234, 206, 0.34);
  background: linear-gradient(130deg, #2fbe95, #1c8f8d);
  color: #f4fffb;
  box-shadow: 0 14px 26px rgba(8, 33, 52, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.investment-cta-lg:hover,
.investment-cta-lg:focus-visible {
  transform: translateY(-1px);
  background: linear-gradient(130deg, #31c79b, #1e9795);
  box-shadow: 0 16px 28px rgba(8, 33, 52, 0.32);
}

.pulse-cta {
  animation: pulse-cta 2.4s ease-in-out infinite;
}

.roi-calculator h3 {
  margin: 0;
}

.roi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.roi-grid label {
  display: grid;
  gap: 0.45rem;
}

.roi-grid label > span {
  color: var(--investment-muted);
  font-weight: 600;
}

.roi-grid select,
.roi-grid input {
  width: 100%;
  border: 1px solid rgba(204, 230, 248, 0.4);
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
  color: var(--investment-input-text);
  background: var(--investment-input-bg);
  font: inherit;
}

.roi-grid select:focus-visible,
.roi-grid input:focus-visible {
  border-color: var(--color-mint-light);
  box-shadow: 0 0 0 3px rgba(116, 243, 197, 0.22);
  outline: 0;
}

.roi-validation {
  min-block-size: 1.3rem;
  margin: var(--space-2) 0 0;
  color: #ffd8d8;
  font-size: 0.9rem;
}

.roi-results {
  margin-top: var(--space-2);
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: var(--space-2);
}

.roi-result-card {
  padding: 0.9rem;
  border-radius: 12px;
  border: 1px solid rgba(125, 227, 196, 0.38);
  background: rgba(2, 17, 33, 0.4);
}

.roi-result-card h4 {
  margin: 0;
  font-size: 0.84rem;
  color: var(--investment-muted);
}

.roi-result-card strong {
  margin-top: 0.4rem;
  display: block;
  color: var(--investment-value);
  font-size: 0.95rem;
  line-height: 1.5;
  min-block-size: 1.5rem;
}

.roi-horizon-lines {
  display: grid;
  gap: 0.3rem;
}

.roi-horizon-line {
  display: block;
}

.roi-disclaimer {
  margin: 0.78rem 0 0;
  color: var(--investment-muted);
  font-size: 0.79rem;
  line-height: 1.5;
}

.export-opportunities {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: var(--space-3);
}

.export-opportunities > h3 {
  margin: 0;
  grid-column: 1 / -1;
  color: var(--investment-title);
}

.export-card {
  border-radius: var(--radius-md);
  border: 1px solid rgba(180, 221, 246, 0.36);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.12), rgba(13, 40, 67, 0.14)),
    rgba(255, 255, 255, 0.08);
  padding: var(--space-3);
}

.export-svg {
  inline-size: 100%;
  block-size: 120px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(3, 28, 50, 0.78), rgba(61, 203, 156, 0.24));
}

.export-card h4 {
  margin: 0.65rem 0 0.3rem;
  color: var(--investment-title);
}

.export-card p {
  margin: 0;
  color: var(--investment-text);
}

html[data-theme='light'] .export-card p {
  color: color-mix(in srgb, var(--investment-text) 86%, #ffffff 14%);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--space-4) + 0.4rem);
  align-items: start;
}

.contact-card,
.contact-form {
  border: 1px solid color-mix(in srgb, var(--panel-border) 80%, var(--color-mint) 20%);
  border-radius: calc(var(--radius-md) + 4px);
  padding: calc(var(--space-4) + 0.35rem);
  color: var(--text-primary);
  background-color: var(--surface-elevated);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--panel-bg) 90%, var(--color-mint-light) 10%) 0%, var(--panel-bg) 58%),
    var(--panel-bg);
  box-shadow: 0 22px 48px rgba(14, 42, 71, 0.14);
  backdrop-filter: blur(8px);
}

.contact-card h3 {
  margin: 0 0 0.9rem;
  font-size: 1.24rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}

.contact-card p {
  margin: 0 0 0.68rem;
  color: color-mix(in srgb, var(--text-primary) 86%, var(--text-secondary) 14%);
  line-height: 1.7;
}

.contact-card {
  position: relative;
  overflow: hidden;
}

.contact-card::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block: 1rem;
  inline-size: 4px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-mint-strong) 88%, white 12%),
    color-mix(in srgb, var(--color-navy) 64%, var(--color-mint-strong) 36%)
  );
}

.contact-address {
  line-height: 1.9;
  margin-bottom: 0.9rem;
}

.contact-actions {
  margin-top: 1.1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.82rem;
}

.contact-ltr {
  direction: ltr;
  unicode-bidi: plaintext;
}

.contact-action-link {
  --contact-action-icon: none;
  display: inline-flex;
  align-items: center;
  gap: 0.56rem;
  width: fit-content;
  min-inline-size: 0;
  min-height: 2.56rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--panel-border) 58%, var(--color-mint-strong) 42%);
  padding: 0.48rem 0.96rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  text-decoration: none;
  background: color-mix(in srgb, var(--surface-elevated) 86%, var(--color-mint-light) 14%);
  overflow-wrap: anywhere;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}

.contact-action-link::before {
  content: '';
  inline-size: 1rem;
  block-size: 1rem;
  background: currentColor;
  opacity: 0.95;
  -webkit-mask-image: var(--contact-action-icon);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: var(--contact-action-icon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.contact-action-phone {
  --contact-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 3.5h3.3l1.4 3.3-1.8 1.8a14 14 0 0 0 6.4 6.4l1.8-1.8 3.3 1.4v3.3a1.4 1.4 0 0 1-1.4 1.4C11.5 20.7 3.3 12.5 3.3 4.9A1.4 1.4 0 0 1 4.7 3.5Z' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.contact-action-email {
  --contact-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.2' y='5.5' width='17.6' height='13' rx='1.8' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='m4.3 7 7.7 5.9L19.7 7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.contact-action-call {
  --contact-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 3.5h3.3l1.4 3.3-1.8 1.8a14 14 0 0 0 6.4 6.4l1.8-1.8 3.3 1.4v3.3a1.4 1.4 0 0 1-1.4 1.4C11.5 20.7 3.3 12.5 3.3 4.9A1.4 1.4 0 0 1 4.7 3.5Z' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 4.7h4m-2-2v4' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

.contact-action-link:hover,
.contact-action-link:focus-visible {
  transform: translateY(-2px);
  border-color: var(--color-mint-strong);
  box-shadow: 0 14px 28px rgba(20, 56, 94, 0.2);
  background: color-mix(in srgb, var(--surface-elevated) 72%, var(--color-mint-light) 28%);
  outline: 0;
}

.contact-action-link:focus-visible {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--color-mint-strong) 30%, transparent),
    0 14px 28px rgba(20, 56, 94, 0.2);
}

.contact-action-call {
  border-color: color-mix(in srgb, var(--color-navy) 44%, var(--color-mint-strong));
  background: linear-gradient(
    140deg,
    #0f3450,
    #1a6f69
  );
  color: #f3fffb;
  font-weight: 760;
}

.contact-action-call:hover,
.contact-action-call:focus-visible {
  border-color: #69c7bb;
  background: linear-gradient(
    140deg,
    #0b2940,
    #145a61
  );
  color: #f3fffb;
}

.contact-action-call:focus-visible {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--color-mint-light) 26%, transparent),
    0 14px 28px rgba(8, 26, 43, 0.34);
}

.contact-action-call:active {
  transform: translateY(-1px);
}

.contact-action-link[aria-disabled='true'] {
  pointer-events: none;
  opacity: 0.6;
}

.contact-form {
  display: grid;
  gap: 1.05rem;
  position: relative;
}

.contact-confidence {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.15rem;
  padding: 0.78rem 0.88rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--panel-border) 74%, var(--color-mint) 26%);
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--surface-1) 76%, var(--color-mint-light) 24%),
      color-mix(in srgb, var(--surface-2) 86%, var(--surface-1) 14%)
    );
}

.contact-confidence p {
  margin: 0;
  padding-inline-start: 1.05rem;
  font-size: 0.84rem;
  font-weight: 630;
  line-height: 1.45;
  color: color-mix(in srgb, var(--text-primary) 90%, var(--text-secondary) 10%);
  position: relative;
}

.contact-confidence p::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.47rem;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-mint-strong) 88%, white 12%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-mint-strong) 20%, transparent);
}

.contact-form::before {
  content: '';
  position: absolute;
  inset-inline-start: 1.2rem;
  inset-inline-end: 1.2rem;
  inset-block-start: 0.92rem;
  block-size: 1px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--panel-border) 55%, transparent),
    color-mix(in srgb, var(--color-mint) 38%, transparent),
    color-mix(in srgb, var(--panel-border) 55%, transparent)
  );
  pointer-events: none;
}

.contact-form label {
  display: grid;
  gap: 0.45rem;
  font-weight: 600;
  color: var(--text-primary);
}

.contact-form label span {
  font-size: 0.93rem;
  font-weight: 650;
  letter-spacing: 0.005em;
  color: color-mix(in srgb, var(--text-primary) 93%, var(--text-secondary) 7%);
}

html[lang='fa'] .contact-form label span {
  line-height: 1.66;
}

.contact-help-text {
  margin-top: -0.1rem;
  color: color-mix(in srgb, var(--text-secondary) 84%, var(--text-primary) 16%);
  font-size: 0.78rem;
  line-height: 1.48;
}

input,
textarea {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
  font: inherit;
  color: var(--form-control-text);
  background: var(--form-control-bg);
  color-scheme: normal;
}

input::placeholder,
textarea::placeholder {
  color: var(--form-control-placeholder);
  opacity: 1;
}

select {
  color: var(--form-control-text);
  background: var(--form-control-bg);
  color-scheme: normal;
}

option {
  color: var(--form-control-text);
  background: var(--form-control-bg);
}

.contact-form input,
.contact-form textarea {
  border-color: color-mix(in srgb, var(--border-strong) 90%, var(--color-mint) 10%);
  padding: 0.8rem 0.9rem;
  background: var(--surface-elevated);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease;
}

html[data-theme='dark'] .contact-form input,
html[data-theme='dark'] .contact-form textarea {
  color: var(--form-control-text);
  background-color: var(--surface-elevated);
  background-image: none;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  border-color: color-mix(in srgb, var(--color-mint-strong) 78%, var(--color-navy) 22%);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--color-mint-strong) 38%, transparent),
    0 10px 22px rgba(20, 56, 94, 0.12);
  transform: translateY(-1px);
  outline: 0;
}

.contact-form input.is-invalid,
.contact-form textarea.is-invalid {
  border-color: var(--color-warning-border);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-warning-border) 26%, transparent);
}

.contact-form.is-submitting input,
.contact-form.is-submitting textarea {
  opacity: 0.78;
}

.contact-captcha {
  margin: 0;
  display: grid;
  gap: 0.55rem;
  padding: 0.84rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--panel-border) 72%, var(--color-mint) 28%);
  background: color-mix(in srgb, var(--surface-2) 80%, var(--surface-1) 20%);
}

.contact-captcha legend {
  padding-inline: 0.35rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-primary);
}

.contact-captcha-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.contact-captcha-question {
  margin: 0;
  display: inline-flex;
  align-items: center;
  min-block-size: 2.1rem;
  padding: 0.34rem 0.6rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--panel-border) 60%, var(--color-mint-strong) 40%);
  background: color-mix(in srgb, var(--surface-1) 84%, var(--color-mint-light) 16%);
  font-size: 0.9rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}

.contact-captcha-refresh {
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--panel-border) 58%, var(--color-mint-strong) 42%);
  background: color-mix(in srgb, var(--surface-1) 80%, var(--color-mint-light) 20%);
  color: color-mix(in srgb, var(--text-primary) 88%, var(--color-navy) 12%);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1;
  padding: 0.52rem 0.76rem;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.contact-captcha-refresh:hover:not(:disabled),
.contact-captcha-refresh:focus-visible:not(:disabled) {
  border-color: var(--color-mint-strong);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(14, 42, 71, 0.16);
  outline: 0;
}

.contact-captcha-refresh:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.contact-captcha-answer-wrap {
  margin-top: 0.16rem;
}

.contact-form button[type='submit'] {
  margin-top: 0.35rem;
  min-height: 3.2rem;
  border-color: color-mix(in srgb, var(--color-mint-strong) 40%, transparent);
  background-color: var(--color-mint-strong);
  background-image: none;
  color: #062033;
  font-weight: 800;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.54rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.contact-form button[type='submit']:hover:not(:disabled),
.contact-form button[type='submit']:focus-visible:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(14, 42, 71, 0.24);
  filter: saturate(1.04);
}

.contact-form button[type='submit']:focus-visible:not(:disabled) {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--color-mint-strong) 34%, transparent),
    0 12px 28px rgba(14, 42, 71, 0.24);
}

.contact-form button[type='submit']:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.contact-submit-label {
  white-space: nowrap;
}

.contact-submit-spinner {
  inline-size: 0.86rem;
  block-size: 0.86rem;
  border: 2px solid color-mix(in srgb, #062033 66%, transparent);
  border-top-color: transparent;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.84);
  animation: rotate-gear 0.85s linear infinite;
  animation-play-state: paused;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.contact-submit-btn.is-loading .contact-submit-spinner {
  opacity: 1;
  transform: scale(1);
  animation-play-state: running;
}

.contact-submit-btn.is-loading .contact-submit-label {
  opacity: 0.98;
}

.contact-field-error {
  margin: 0;
  min-height: 1.28rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-warning-text);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.contact-field-error.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.contact-form-status {
  margin: 0;
  min-height: 2.7rem;
  border-radius: 10px;
  border: 1px solid var(--contact-tone-info-border);
  padding: 0.66rem 0.88rem;
  font-size: 0.9rem;
  font-weight: 670;
  line-height: 1.5;
  color: var(--contact-tone-info-text);
  background: var(--contact-tone-info-bg);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.58rem;
  align-items: start;
}

.contact-form-status-icon {
  inline-size: 1.06rem;
  block-size: 1.06rem;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  margin-top: 0.16rem;
  color: color-mix(in srgb, var(--contact-tone-info-text) 90%, var(--color-navy) 10%);
  background: var(--contact-tone-info-icon-bg);
}

.contact-status-glyph {
  inline-size: 0.7rem;
  block-size: 0.7rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: none;
}

.contact-form-status-text {
  min-inline-size: 0;
}

.contact-form-status.is-info .contact-status-glyph-info,
.contact-form-status.is-success .contact-status-glyph-success,
.contact-form-status.is-error .contact-status-glyph-error,
.contact-form-status:not(.is-success):not(.is-error) .contact-status-glyph-info {
  display: block;
}

.contact-form-status.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.contact-form-status.is-info {
  border-color: var(--contact-tone-info-border);
  color: var(--contact-tone-info-text);
  background: var(--contact-tone-info-bg);
}

.contact-form-status.is-info .contact-form-status-icon {
  color: color-mix(in srgb, var(--contact-tone-info-text) 90%, var(--color-navy) 10%);
  background: var(--contact-tone-info-icon-bg);
}

.contact-form-status.is-success {
  border-color: var(--contact-tone-success-border);
  color: var(--contact-tone-success-text);
  background: var(--contact-tone-success-bg);
}

.contact-form-status.is-success .contact-form-status-icon {
  color: color-mix(in srgb, var(--contact-tone-success-text) 84%, var(--color-mint-strong) 16%);
  background: var(--contact-tone-success-icon-bg);
}

.contact-form-status.is-error {
  border-color: var(--contact-tone-error-border);
  color: var(--contact-tone-error-text);
  background: var(--contact-tone-error-bg);
}

.contact-form-status.is-error .contact-form-status-icon {
  color: color-mix(in srgb, var(--contact-tone-error-text) 90%, var(--text-primary) 10%);
  background: var(--contact-tone-error-icon-bg);
}

.contact-privacy-note {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--text-secondary) 88%, var(--text-primary) 12%);
}

.contact-honeypot {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.site-footer {
  position: relative;
  padding: 2.6rem 0 2.9rem;
  color: var(--text-secondary);
  transition: color 0.24s ease;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--color-mint) 20%, transparent), transparent 50%),
    radial-gradient(circle at 92% 88%, color-mix(in srgb, var(--color-navy) 16%, transparent), transparent 56%);
}

.site-footer::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 2px;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--color-mint-strong) 74%, transparent) 0%,
      color-mix(in srgb, var(--color-navy) 66%, var(--color-mint-light) 34%) 52%,
      color-mix(in srgb, var(--color-mint-strong) 74%, transparent) 100%
    );
  opacity: 0.68;
  pointer-events: none;
}

.site-footer-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.92rem;
  border: 1px solid var(--panel-border);
  border-radius: calc(var(--radius-lg) + 2px);
  background:
    linear-gradient(
      148deg,
      color-mix(in srgb, var(--panel-bg) 90%, var(--color-mint-light) 10%) 0%,
      color-mix(in srgb, var(--panel-bg) 94%, var(--surface-2) 6%) 54%
    ),
    var(--panel-bg);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--color-white) 70%, transparent),
    0 22px 48px color-mix(in srgb, var(--color-navy) 12%, transparent);
  padding: clamp(1rem, 2vw, 1.35rem);
  position: relative;
  overflow: hidden;
}

.footer-block {
  border: 1px solid color-mix(in srgb, var(--panel-border) 72%, var(--color-mint) 28%);
  border-radius: 14px;
  background:
    linear-gradient(
      148deg,
      color-mix(in srgb, var(--surface-soft) 88%, var(--color-mint-light) 12%) 0%,
      color-mix(in srgb, var(--surface-soft) 94%, var(--surface-2) 6%) 100%
    );
  padding: 1rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 10px 24px color-mix(in srgb, var(--color-navy) 10%, transparent);
  backdrop-filter: blur(5px);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.footer-block:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--panel-border) 56%, var(--color-mint-strong) 44%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 14px 28px color-mix(in srgb, var(--color-navy) 12%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .contact-form-status.is-visible {
    animation: contact-status-enter 0.17s cubic-bezier(0.24, 0.82, 0.34, 1);
  }

  .contact-submit-btn.is-loading {
    filter: saturate(1.03);
  }

  .footer-block {
    opacity: 0;
    transform: translateY(10px);
    animation: footer-block-enter 0.42s cubic-bezier(0.24, 0.84, 0.34, 1) forwards;
  }

  .footer-block:nth-child(1) {
    animation-delay: 0.03s;
  }

  .footer-block:nth-child(2) {
    animation-delay: 0.08s;
  }

  .footer-block:nth-child(3) {
    animation-delay: 0.13s;
  }

  .footer-block:nth-child(4) {
    animation-delay: 0.18s;
  }

  .footer-block:nth-child(5) {
    animation-delay: 0.23s;
  }
}

.footer-brand {
  grid-column: span 3;
}

.footer-links {
  grid-column: span 2;
}

.footer-contact {
  grid-column: span 3;
}

.footer-social {
  grid-column: span 2;
}

.footer-map {
  grid-column: span 2;
}

.footer-title {
  margin: 0 0 0.6rem;
  font-size: 1.01rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.015em;
}

.footer-brand-summary {
  margin: 0 0 0.7rem;
  font-size: 0.92rem;
  line-height: 1.62;
}

#footer-text {
  margin: 0;
  color: color-mix(in srgb, var(--text-secondary) 82%, var(--text-primary) 18%);
  font-size: 0.88rem;
}

.footer-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.36rem;
}

.footer-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  color: var(--interactive-text);
  text-decoration: none;
  font-weight: 700;
  border-radius: 9px;
  padding: 0.16rem 0.34rem;
  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.footer-nav-link::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-mint-strong) 62%, var(--interactive-text) 38%);
  flex: 0 0 6px;
}

.footer-contact-company,
.footer-contact-address,
.footer-meta-line,
.footer-map-note,
.footer-map-noscript {
  margin: 0;
  font-size: 0.87rem;
  line-height: 1.55;
}

.footer-contact-links {
  display: grid;
  gap: 0.4rem;
  margin: 0.64rem 0 0.72rem;
}

.footer-contact-link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 0.38rem;
  color: var(--interactive-text);
  text-decoration: none;
  font-weight: 700;
  border-radius: 9px;
  padding: 0.16rem 0.36rem;
  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.footer-primary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 2.25rem;
  margin-block-end: 0.72rem;
  padding: 0.38rem 0.82rem;
  border: 1px solid color-mix(in srgb, var(--color-mint-strong) 66%, var(--panel-border) 34%);
  border-radius: 10px;
  background:
    linear-gradient(
      140deg,
      color-mix(in srgb, var(--color-mint-light) 65%, var(--surface-1) 35%) 0%,
      color-mix(in srgb, var(--color-mint) 54%, var(--surface-1) 46%) 100%
    );
  color: color-mix(in srgb, var(--color-navy) 86%, var(--interactive-text) 14%);
  text-decoration: none;
  font-size: 0.87rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    0 10px 22px color-mix(in srgb, var(--color-mint) 24%, transparent);
  transition:
    transform 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.footer-primary-cta:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--color-mint-strong) 78%, var(--panel-border) 22%);
  color: color-mix(in srgb, var(--interactive-text) 94%, var(--color-navy) 6%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 14px 24px color-mix(in srgb, var(--color-mint) 30%, transparent);
}

.footer-cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
  margin: 0 0 0.7rem;
  border-radius: 999px;
  padding: 0.18rem 0.62rem;
  border: 1px solid color-mix(in srgb, var(--panel-border) 58%, var(--color-mint-strong) 42%);
  color: color-mix(in srgb, var(--interactive-text) 88%, var(--color-navy) 12%);
  background: color-mix(in srgb, var(--surface-1) 70%, var(--color-mint-light) 30%);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.4;
}

.footer-cta-badge::before {
  content: "";
  inline-size: 0.48rem;
  block-size: 0.48rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-mint-strong) 82%, var(--color-navy) 18%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-mint) 22%, transparent);
}

.footer-social-links {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.footer-social-link svg {
  width: 1rem;
  height: 1rem;
}

.footer-panel {
  border: 1px solid color-mix(in srgb, var(--panel-border) 70%, var(--color-mint-strong) 30%);
  border-radius: 12px;
  padding: 0.64rem;
  background: color-mix(in srgb, var(--surface-1) 74%, var(--color-mint-light) 26%);
}

.footer-social-links a,
#footer-map-link,
.footer-back-to-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.04rem;
  padding: 0.24rem 0.56rem;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--panel-border) 62%, var(--color-mint-strong) 38%);
  background: color-mix(in srgb, var(--surface-1) 75%, var(--color-mint-light) 25%);
  color: var(--interactive-text);
  text-decoration: none;
  font-weight: 700;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.footer-nav-link:hover,
.footer-contact-link:hover,
.footer-social-links a:hover,
#footer-map-link:hover,
.footer-back-to-top:hover {
  color: var(--text-accent);
  background: color-mix(in srgb, var(--surface-1) 58%, var(--color-mint-light) 42%);
  border-color: color-mix(in srgb, var(--color-mint-strong) 58%, var(--panel-border) 42%);
}

.footer-nav-link:active,
.footer-contact-link:active,
.footer-social-links a:active,
#footer-map-link:active,
.footer-back-to-top:active,
.footer-primary-cta:active {
  transform: translateY(1px);
}

.footer-nav-link[aria-disabled='true'],
.footer-contact-link[aria-disabled='true'],
.footer-social-links a[aria-disabled='true'],
#footer-map-link[aria-disabled='true'],
.footer-back-to-top[aria-disabled='true'],
.footer-primary-cta[aria-disabled='true'] {
  opacity: 0.58;
  pointer-events: none;
}

.footer-social-link {
  position: relative;
  inline-size: 2.2rem;
  min-inline-size: 2.2rem;
  block-size: 2.2rem;
  min-block-size: 2.2rem;
  padding: 0;
}

@media (hover: hover) and (pointer: fine) {
  .footer-social-link[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    inset-inline-start: 50%;
    inset-block-end: calc(100% + 0.55rem);
    transform: translateX(-50%) translateY(4px);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--panel-border) 58%, var(--color-mint-strong) 42%);
    background: color-mix(in srgb, var(--surface-1) 80%, var(--color-mint-light) 20%);
    color: var(--text-primary);
    padding: 0.2rem 0.42rem;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.35;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--color-navy) 20%, transparent);
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 3;
  }

  .footer-social-link[data-tooltip]::before {
    content: "";
    position: absolute;
    inset-inline-start: 50%;
    inset-block-end: calc(100% + 0.34rem);
    transform: translateX(-50%) translateY(4px);
    opacity: 0;
    pointer-events: none;
    border-inline: 0.3rem solid transparent;
    border-block-start: 0.34rem solid color-mix(in srgb, var(--surface-1) 80%, var(--color-mint-light) 20%);
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 2;
  }

  .footer-social-link[data-tooltip]:hover::after,
  .footer-social-link[data-tooltip]:hover::before,
  .footer-social-link[data-tooltip]:focus-visible::after,
  .footer-social-link[data-tooltip]:focus-visible::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.footer-map-frame {
  overflow: hidden;
  margin: 0.48rem 0 0.62rem;
  position: relative;
  display: grid;
  place-items: center;
  min-height: 174px;
}

.footer-map-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 20% 24%, color-mix(in srgb, var(--color-mint-light) 36%, transparent), transparent 52%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 68%, var(--surface-1) 32%), var(--surface-2));
  opacity: 1;
  transition: opacity 0.24s ease;
}

.footer-map-frame.is-map-loaded::before {
  opacity: 0;
}

.footer-map-load {
  position: relative;
  z-index: 1;
  border: 1px solid color-mix(in srgb, var(--panel-border) 60%, var(--color-mint-strong) 40%);
  background: color-mix(in srgb, var(--surface-1) 62%, var(--color-mint-light) 38%);
  color: var(--interactive-text);
  border-radius: 10px;
  padding: 0.52rem 0.9rem;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.footer-map-load:hover:not(:disabled) {
  background: color-mix(in srgb, var(--surface-1) 46%, var(--color-mint-light) 54%);
}

.footer-map-load:disabled {
  cursor: default;
  opacity: 0.82;
}

.footer-nav-link:focus-visible,
.footer-contact-link:focus-visible,
.footer-social-links a:focus-visible,
#footer-map-link:focus-visible,
.footer-map-load:focus-visible,
.footer-primary-cta:focus-visible,
.footer-back-to-top:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--color-mint-strong) 32%, transparent),
    0 0 0 1px color-mix(in srgb, var(--color-mint-strong) 76%, var(--panel-border) 24%);
}

#footer-map-embed {
  display: block;
  width: 100%;
  min-height: 180px;
  border: 0;
  border-radius: 10px;
  position: relative;
  z-index: 0;
}

#footer-map-embed[hidden] {
  display: none;
}

.footer-trust-wrap {
  margin-top: 0.86rem;
  display: flex;
  gap: 0.72rem;
  align-items: center;
}

.footer-trust-strip {
  flex: 1;
  border: 1px solid color-mix(in srgb, var(--panel-border) 72%, var(--color-mint-strong) 28%);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface-1) 80%, var(--color-mint-light) 20%);
  padding: 0.72rem 0.86rem;
  display: grid;
  gap: 0.52rem;
}

.footer-trust-title {
  margin: 0;
  color: var(--text-primary);
  font-size: 0.88rem;
  font-weight: 800;
}

.footer-trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.footer-trust-badge {
  --footer-badge-delay: 0ms;
  border: 1px solid color-mix(in srgb, var(--panel-border) 66%, var(--color-mint-strong) 34%);
  border-radius: 999px;
  padding: 0.24rem 0.64rem;
  color: var(--interactive-text);
  background: color-mix(in srgb, var(--surface-1) 72%, var(--color-mint-light) 28%);
  font-size: 0.79rem;
  font-weight: 700;
  white-space: nowrap;
}

html.footer-trust-animate .footer-trust-badge {
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition:
    opacity 0.42s ease,
    transform 0.42s cubic-bezier(0.25, 0.82, 0.32, 1);
  transition-delay: var(--footer-badge-delay);
}

html.footer-trust-animate .footer-trust-badge.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.footer-back-to-top {
  min-inline-size: 136px;
  font-size: 0.82rem;
  font-weight: 800;
}

html[data-theme='dark'] .footer-block {
  box-shadow:
    inset 0 1px 0 rgba(207, 226, 255, 0.09),
    0 14px 34px rgba(2, 6, 10, 0.38);
}

html[data-theme='dark'] .footer-trust-strip {
  box-shadow:
    inset 0 1px 0 rgba(207, 226, 255, 0.08),
    0 10px 24px rgba(2, 6, 10, 0.36);
}

html[data-theme='dark'] .footer-primary-cta {
  color: #082137;
  box-shadow:
    inset 0 1px 0 rgba(237, 255, 248, 0.36),
    0 12px 24px color-mix(in srgb, var(--color-mint) 26%, transparent);
}

html[data-theme='dark'] .footer-primary-cta:hover {
  color: #041829;
}

html[data-theme='dark'] .footer-social-link[data-tooltip]::after {
  color: #081a2d;
}

@media (min-width: 1440px) {
  :root {
    --container: 1320px;
  }

  .hero {
    min-height: 78vh;
    padding-block: clamp(1.4rem, 2.1vw, 2.5rem);
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 2.5rem;
  }

  h1[data-i18n='hero.title'] {
    max-inline-size: 18.5ch;
  }

  p.lead[data-i18n='hero.subtitle'] {
    max-inline-size: 60ch;
  }

  .hero-panel {
    padding: clamp(1.45rem, 1.6vw, 2rem);
  }
}

@media (min-width: 1680px) {
  :root {
    --container: 1460px;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 3rem;
  }

  h1[data-i18n='hero.title'] {
    max-inline-size: 17.5ch;
  }

  p.lead[data-i18n='hero.subtitle'] {
    max-inline-size: 62ch;
  }

  .hero-actions {
    gap: 1rem 1.25rem;
  }
}

@media (max-width: 1250px) {
  .footer-brand,
  .footer-contact {
    grid-column: span 4;
  }

  .footer-links,
  .footer-social,
  .footer-map {
    grid-column: span 4;
  }
}

html.js-reveal-enabled .reveal-target {
  opacity: 1;
  transform: translateY(14px);
  transition: transform 0.46s ease;
}

html.js-reveal-enabled .reveal-target.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

html[dir='ltr'] th,
html[dir='ltr'] td {
  text-align: left;
}

html[dir='rtl'] th,
html[dir='rtl'] td {
  text-align: right;
}

@media (max-width: 1024px) {
  html.nav-open,
  body.nav-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .nav-wrap {
    grid-template-columns: auto auto 1fr auto;
  }

  html.js .menu-toggle {
    display: inline-grid;
  }

  html.js .primary-nav {
    position: absolute;
    top: calc(100% + 1px);
    inset-inline: 0;
    background: var(--panel-bg);
    border-bottom: 1px solid var(--panel-border);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-0.45rem);
    transform-origin: top;
    max-block-size: 0;
    overflow: hidden;
    transition:
      opacity 0.22s ease,
      transform 0.22s ease,
      max-block-size 0.22s ease,
      visibility 0.22s ease;
  }

  html.js .primary-nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    max-block-size: min(80vh, 38rem);
  }

  html.no-js .menu-toggle {
    display: none;
  }

  html.no-js .primary-nav {
    position: static;
    inset-inline: auto;
    border-bottom: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    max-block-size: none;
    overflow: visible;
    background: transparent;
  }

  html.no-js .primary-nav .nav-mega-toggle {
    display: none;
  }

  html.no-js .primary-nav .nav-link-group {
    width: 100%;
    display: block;
  }

  html.no-js .primary-nav .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    max-block-size: none;
    margin-inline: 0;
    border-inline-start: 0;
    padding: 0.2rem 0 0.4rem 0.8rem;
  }

  .primary-nav ul {
    flex-direction: column;
    align-items: stretch;
    padding: 0.8rem;
    gap: 0.45rem;
  }

  .primary-nav .nav-link-group {
    width: 100%;
    display: flex;
    align-items: center;
  }

  .primary-nav .nav-link {
    width: auto;
    flex: 1;
    justify-content: space-between;
  }

  .primary-nav .nav-active-pill {
    display: none;
  }

  .primary-nav .nav-link[aria-current='true'] {
    background: rgba(61, 203, 156, 0.18);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-mint-strong) 44%, transparent);
  }

  .primary-nav .nav-mega-toggle {
    inline-size: 2.3rem;
    block-size: 2.3rem;
  }

  .primary-nav .mega-menu {
    position: static;
    box-shadow: none;
    border: 0;
    border-inline-start: 2px solid rgba(14, 42, 71, 0.14);
    border-radius: 0;
    margin-inline: 0.75rem;
    margin-bottom: 0.5rem;
    transform: none;
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    max-block-size: 0;
    overflow: hidden;
    transition: opacity 0.16s ease, max-block-size 0.16s ease, visibility 0.16s ease;
  }

  .primary-nav .nav-item.open .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    max-block-size: 15rem;
  }

  .mega-menu .mega-menu-link:hover,
  .mega-menu .mega-menu-link:focus-visible {
    transform: none;
  }

  .hero-grid,
  .contact-grid,
  .product-explorer,
  .viewer-body {
    grid-template-columns: 1fr;
  }

  .contact-form {
    order: 1;
    padding: var(--space-4);
  }

  .contact-card {
    order: 2;
    padding: var(--space-4);
  }

  .contact-form-status {
    min-height: 2.9rem;
  }

  .contact-action-link {
    width: 100%;
    justify-content: center;
    font-size: 0.84rem;
    min-height: 2.64rem;
    padding-inline: 0.72rem;
  }

  .contact-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.66rem;
  }

  .contact-actions .contact-action-call {
    grid-column: 1 / -1;
  }

  .contact-confidence {
    padding: 0.7rem 0.78rem;
  }

  .contact-captcha-head {
    flex-direction: column;
    align-items: stretch;
  }

  .contact-captcha-refresh {
    inline-size: 100%;
    min-height: 2.4rem;
  }

  .investment-layout {
    grid-template-columns: 1fr;
  }

  .export-opportunities {
    grid-template-columns: 1fr;
  }

  .hero-panel {
    order: 2;
  }

  .product-filters,
  .wizard-grid,
  .pdf-grid {
    grid-template-columns: 1fr 1fr;
  }

  .product-card-3d img {
    width: 80%;
    height: 80%;
  }

  #process-tour-frame {
    min-height: 260px;
  }

  .process-tour-controls {
    grid-template-columns: 1fr;
  }

  .process-map-overlay {
    position: static;
    max-inline-size: 100%;
    margin-bottom: var(--space-2);
  }

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

  .footer-block {
    grid-column: span 1;
  }

  .footer-brand {
    order: 1;
  }

  .footer-contact {
    order: 2;
  }

  .footer-links {
    order: 3;
  }

  .footer-social {
    order: 4;
  }

  .footer-map {
    order: 5;
    grid-column: 1 / -1;
  }

  .footer-trust-wrap {
    align-items: stretch;
  }

  .footer-back-to-top {
    min-inline-size: 0;
    inline-size: fit-content;
    align-self: center;
  }
}

@media (max-width: 680px) {
  .header-controls {
    justify-self: end;
    gap: 0.35rem;
  }

  .brand-mark {
    width: 140px;
  }

  .ga-consent-banner {
    inset-inline: 0.65rem;
    inset-block-end: 0.65rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }

  .ga-consent-accept {
    inline-size: 100%;
    min-block-size: 2.5rem;
  }

  .site-footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-block {
    grid-column: span 1;
  }

  .footer-map {
    grid-column: span 1;
  }

  .footer-trust-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .footer-back-to-top {
    inline-size: 100%;
  }

  .footer-cta-badge {
    max-inline-size: 100%;
  }

  .section {
    padding: var(--space-5) 0;
  }

  .hero-blade-controls {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .hero-blade-prev,
  .hero-blade-next {
    flex: 1 1 calc(50% - 0.25rem);
    min-block-size: 2.3rem;
  }

  .hero-blade-toggle {
    flex: 1 1 100%;
    min-block-size: 2.3rem;
  }

  .product-detail-grid,
  .product-filters,
  .wizard-grid,
  .pdf-grid {
    grid-template-columns: 1fr;
  }

  .product-compare-grid {
    grid-template-columns: 1fr;
  }

  .roi-grid,
  .roi-results {
    grid-template-columns: 1fr;
  }

  .investment-panel {
    padding: calc(var(--space-3) + 0.35rem);
  }

  .market-growth-source {
    font-size: 0.78rem;
  }

  .market-growth-note,
  .roi-disclaimer {
    font-size: 0.74rem;
  }

  .roi-horizon-lines {
    gap: 0.24rem;
  }

  .investment-cta-wrap {
    justify-content: stretch;
  }

  .investment-cta-lg {
    inline-size: 100%;
    min-block-size: 3.2rem;
    font-size: 0.98rem;
  }

  .demo-modal-panel {
    inline-size: calc(100% - 1rem);
    max-block-size: calc(100vh - 1rem);
    padding: 0.85rem;
  }

  #process-tour-frame {
    min-height: 220px;
  }

  .timeline li {
    grid-template-columns: 1fr;
    row-gap: 0.8rem;
  }

  .timeline-flow {
    justify-content: flex-start;
  }

  .cert-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .cert-timeline-track {
    grid-auto-flow: column;
    grid-auto-columns: minmax(190px, 1fr);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.6rem;
  }

  .cert-node {
    scroll-snap-align: start;
  }

  .contact-card,
  .contact-form {
    padding: calc(var(--space-3) + 0.35rem);
  }

  .contact-form {
    gap: 0.84rem;
  }

  .contact-confidence p {
    font-size: 0.8rem;
  }

  .contact-form-status {
    min-height: 3.1rem;
    font-size: 0.88rem;
    padding: 0.64rem 0.72rem;
  }

  .blog-detail {
    padding: calc(var(--space-2) + 0.1rem);
  }

  .blog-card .card-meta {
    min-block-size: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.footer-trust-animate .footer-trust-badge {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .contact-form-status.is-visible {
    animation: none !important;
  }

  .contact-submit-spinner {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .product-card-3d img {
    transform: none !important;
  }

  .pulse-cta {
    animation: none !important;
  }

  html.js-reveal-enabled .reveal-target {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@keyframes footer-block-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

@media (max-width: 420px) {
  .container {
    width: min(var(--container), calc(100% - 1rem));
  }

  .nav-wrap {
    min-height: 68px;
    gap: 0.45rem;
  }

  .site-header.is-compact .nav-wrap {
    min-height: 60px;
  }

  .brand-mark {
    width: 116px;
    height: 38px;
  }

  .menu-toggle {
    inline-size: 40px;
    block-size: 40px;
  }

  .menu-toggle .menu-toggle-bar {
    width: 20px;
  }

  .header-controls {
    gap: 0.2rem;
    padding: 0.15rem;
  }

  .lang-btn {
    min-block-size: 1.9rem;
    padding: 0.24rem 0.44rem;
    font-size: 0.74rem;
  }

  .theme-toggle {
    min-block-size: 1.95rem;
    padding: 0.26rem 0.45rem;
    gap: 0;
  }

  #theme-toggle-label {
    display: none;
  }

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

@keyframes header-slot-in {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

@keyframes contact-status-enter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

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

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}

@keyframes rotate-gear {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse-logo {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  30% {
    transform: translateY(-0.45px) rotate(0.22deg);
  }

  70% {
    transform: translateY(0.35px) rotate(-0.18deg);
  }
}

@keyframes timeline-arrow-move {
  0% {
    opacity: 0.2;
    transform: translateX(0);
  }

  55% {
    opacity: 1;
    transform: translateX(3px);
  }

  100% {
    opacity: 0.2;
    transform: translateX(0);
  }
}

@keyframes pulse-cta {
  0%,
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 14px 26px rgba(20, 56, 94, 0.24), 0 0 0 0 rgba(116, 243, 197, 0.32);
  }

  50% {
    transform: translateY(-1px) scale(1.011);
    box-shadow: 0 16px 30px rgba(20, 56, 94, 0.3), 0 0 0 8px rgba(116, 243, 197, 0);
  }
}