/* ============================================================
   PrestaServer — site styles (hi-fi, Astro-ready)
   Built on the PrestaServer Design System tokens (var(--*)).
   Components hand-written in CSS to match the DS spec 1:1.
   ============================================================ */

/* ---------- Layout primitives ---------- */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.container.narrow { max-width: 920px; }

section { scroll-margin-top: 90px; }
.section { padding: var(--section-gap-mobile) 0; }
@media (min-width: 768px){ .section { padding: var(--section-gap-tablet) 0; } }
@media (min-width: 1024px){ .section { padding: var(--section-gap-desktop) 0; } }
.section.tight { padding-top: 0; }
.section-alt { background: var(--color-bg-alt); }

.stack > * + * { margin-top: var(--space-4); }

/* ---------- Type helpers ---------- */
.overline {
  font-family: var(--font-body); font-weight: var(--weight-semibold);
  font-size: var(--size-overline); line-height: 1; letter-spacing: var(--tracking-overline);
  text-transform: uppercase; color: var(--brand-primary);
}
.display {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: clamp(38px, 6vw, var(--size-headline)); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display); color: var(--text-primary); margin: 0;
  text-wrap: balance;
}
.h2-section {
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: clamp(26px, 4vw, var(--size-section)); line-height: var(--leading-snug);
  letter-spacing: var(--tracking-heading); color: var(--text-primary); margin: 0;
  text-wrap: balance;
}
.h3-card {
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: var(--size-subhead); line-height: var(--leading-snug);
  letter-spacing: var(--tracking-heading); color: var(--text-primary); margin: 0;
}
.lead { font-size: var(--size-body-lg); line-height: var(--leading-relaxed); color: var(--text-secondary); margin: 0; max-width: 62ch; }
.muted { color: var(--text-muted); }
.body { color: var(--text-secondary); line-height: var(--leading-relaxed); margin: 0; }
.section-head { max-width: 720px; margin-bottom: var(--space-10); }
.section-head .lead { margin-top: var(--space-3); }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 44px; padding: 0 var(--space-5);
  font-family: var(--font-body); font-size: var(--size-body); font-weight: var(--weight-medium); line-height: 1;
  border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--lg { height: 52px; padding: 0 var(--space-6); font-size: var(--size-body-lg); }
.btn--sm { height: 38px; padding: 0 var(--space-4); font-size: var(--size-small); }
.btn--block { width: 100%; }

.btn--primary { background-color: var(--brand-primary); color: var(--text-on-brand); }
.btn--primary:hover { background-color: var(--brand-primary-hover); box-shadow: var(--shadow-btn-glow); color: var(--text-on-brand); }

.btn--secondary { background-color: var(--surface-card); color: var(--text-primary); border-color: var(--border-subtle); }
.btn--secondary:hover { background-color: var(--color-bg-alt); color: var(--text-primary); }

.btn--ghost { background-color: transparent; color: var(--text-secondary); }
.btn--ghost:hover { background-color: var(--color-bg-alt); color: var(--text-primary); }

.btn .ico { width: 18px; height: 18px; flex: none; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-6); overflow: hidden;
  transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.card--hover:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
a.card { text-decoration: none; display: block; }
a.card:hover { text-decoration: none; }

/* ---------- Tags / chips ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 4px var(--space-3);
  font-size: var(--size-caption); font-weight: var(--weight-medium);
  border-radius: var(--radius-full); border: 1px solid var(--border-subtle);
  color: var(--text-secondary); background: var(--surface-card); white-space: nowrap;
}
.tag--quiet { background: var(--interactive-tint); color: var(--brand-primary); border-color: transparent; }
.tag--active { background: var(--brand-primary); color: var(--text-on-brand); border-color: transparent; }

/* ---------- Icon frame ---------- */
.icon-frame {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border-radius: var(--radius-md); background: var(--interactive-tint); color: var(--brand-primary);
}
.icon-frame .ico { width: 22px; height: 22px; }
.icon-frame--ghost { background: var(--color-bg-alt); color: var(--text-primary); border: 1px solid var(--border-subtle); }

/* ---------- Decision helper card ---------- */
.decide-card {
  display: flex; align-items: center; gap: var(--space-5);
  margin-top: var(--space-10);
  padding: var(--space-5) var(--space-6);
  border: 1px solid transparent; border-radius: var(--radius-lg);
  background: var(--interactive-tint);
}
.decide-card .icon-frame { width: 52px; height: 52px; background: var(--brand-primary); color: var(--text-on-brand); }
.decide-card .icon-frame .ico { width: 26px; height: 26px; }
.decide-text { flex: 1; min-width: 0; }
.decide-text h3 { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--size-subhead); letter-spacing: var(--tracking-heading); color: var(--text-primary); margin: 0; }
.decide-text p { margin-top: var(--space-2); }
.decide-links { display: flex; gap: var(--space-3); flex: none; }
@media (max-width: 767px){
  .decide-card { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .decide-links { width: 100%; flex-direction: column; }
  .decide-links .btn { width: 100%; }
}

.ico { width: 24px; height: 24px; display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Grids ---------- */
.grid { display: grid; gap: var(--grid-gap); }
.cols-2 { grid-template-columns: 1fr; }
.cols-3 { grid-template-columns: 1fr; }
.cols-4 { grid-template-columns: 1fr 1fr; }
@media (min-width: 640px){ .cols-2 { grid-template-columns: 1fr 1fr; } .cols-3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px){ .cols-3 { grid-template-columns: repeat(3,1fr); } .cols-4 { grid-template-columns: repeat(4,1fr); } }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--surface-nav); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--border-subtle);
}
.site-header .bar { display: flex; align-items: center; gap: var(--space-5); height: 72px; }

/* logo */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand .logo { height: 34px; width: auto; display: block; }
.footer-brand .brand .logo { height: 31px; }
.brand .logo-dark { display: none; }
[data-theme="dark"] .brand .logo-light { display: none; }
[data-theme="dark"] .brand .logo-dark { display: block; }

.nav { display: none; align-items: center; gap: 2px; margin-left: var(--space-4); }
@media (min-width: 1024px){ .nav { display: flex; } }
.nav a { font-size: var(--size-body); font-weight: var(--weight-medium); color: var(--text-secondary); padding: 8px 12px; border-radius: var(--radius-sm); }
.nav a:hover { color: var(--text-primary); background: var(--color-bg-alt); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--text-primary); }

/* dropdown */
.nav-item { position: relative; }
.nav-item > a .chev { width: 14px; height: 14px; margin-left: 2px; transition: transform var(--duration-base) var(--ease-standard); }
.nav-item:hover > a .chev { transform: rotate(180deg); }
.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 460px;
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: var(--space-3);
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard), visibility var(--duration-base);
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--radius-sm); }
.dropdown a:hover { background: var(--interactive-tint); }
.dropdown .di { width: 18px; height: 18px; color: var(--brand-primary); flex: none; }
.dropdown a span { font-size: var(--size-body); color: var(--text-primary); font-weight: var(--weight-medium); }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.header-phone { display: none; font-size: var(--size-body); font-weight: var(--weight-medium); color: var(--text-secondary); }
.header-phone:hover { color: var(--text-primary); text-decoration: none; }
@media (min-width: 1280px){ .header-phone { display: inline-flex; align-items: center; gap: 6px; } }

/* theme toggle */
.theme-toggle {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); background: var(--surface-card);
  color: var(--text-secondary); cursor: pointer; transition: all var(--duration-base) var(--ease-standard);
}
.theme-toggle:hover { color: var(--text-primary); background: var(--color-bg-alt); }
.theme-toggle .ico { width: 19px; height: 19px; }
.theme-toggle .moon { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .moon { display: block; }

.header-cta { display: none; }
@media (min-width: 600px){ .header-cta { display: inline-flex; } }

/* hamburger */
.hamburger {
  width: 40px; height: 40px; display: grid; place-items: center; gap: 0;
  border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); background: var(--surface-card);
  color: var(--text-primary); cursor: pointer;
}
.hamburger .ico { width: 20px; height: 20px; }
@media (min-width: 1024px){ .hamburger { display: none; } }

/* mobile header: keep the hamburger always on-screen on narrow widths.
   Hide the theme toggle, tighten the bar gap and let the logo shrink (down to ~165px). */
@media (max-width: 1023px){
  .theme-toggle { display: none; }
  .site-header .bar { gap: var(--space-3); }
  .site-header .bar .brand .logo { height: auto; width: clamp(165px, 48vw, 222px); }
}

/* mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 200; background: var(--color-bg);
  padding: 0 var(--container-pad) var(--space-10); overflow-y: auto; -webkit-overflow-scrolling: touch;
  transform: translateX(100%); visibility: hidden; pointer-events: none;
  display: flex; flex-direction: column; gap: var(--space-1);
}
.mobile-menu.open { transform: translateX(0); visibility: visible; pointer-events: auto; }
.mobile-menu.anim { transition: transform var(--duration-base) var(--ease-standard), visibility 0s linear var(--duration-base); }
.mobile-menu.anim.open { transition: transform var(--duration-base) var(--ease-standard), visibility 0s; }
@media (min-width: 1024px){ .mobile-menu { display: none; } }
.mobile-menu-bar {
  position: sticky; top: 0; z-index: 1;
  margin: 0 calc(-1 * var(--container-pad)) var(--space-3);
  padding: 0 var(--container-pad);
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; background: var(--color-bg); border-bottom: 1px solid var(--border-subtle);
}
.mobile-menu-bar .brand { padding: 0; border: 0; }
.mobile-menu-bar .brand .logo { height: 30px; }
.menu-close {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--radius-sm); border: 1px solid var(--border-subtle);
  background: var(--surface-card); color: var(--text-primary); cursor: pointer;
}
.menu-close .ico { width: 20px; height: 20px; }
.mobile-menu a { font-size: var(--size-subhead); font-family: var(--font-display); font-weight: var(--weight-medium); color: var(--text-primary); padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
.mobile-menu a:hover { text-decoration: none; color: var(--brand-primary); }
.mobile-menu .sub { font-size: var(--size-body); font-family: var(--font-body); font-weight: var(--weight-regular); color: var(--text-secondary); padding: 11px 0 11px 16px; border-bottom: 1px solid var(--border-subtle); }
.mobile-menu .sub:hover { color: var(--brand-primary); }
.mobile-menu .menu-cta { margin-top: var(--space-5); }
body.menu-open { overflow: hidden; }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; overflow: hidden; }
.hero .container { position: relative; z-index: 1; }
.hero-grid { display: grid; gap: var(--space-10); align-items: start; padding: var(--space-12) 0; }
@media (min-width: 1024px){ .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-16); padding: var(--space-20) 0; align-items: start; } }
.hero h1 { margin-top: var(--space-4); }
.hero .lead { margin-top: var(--space-5); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.hero-trust { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-6); color: var(--text-muted); font-size: var(--size-small); }
.hero-trust span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.hero-trust .ico { width: 16px; height: 16px; color: var(--semantic-success); }

.hero-visual { display: flex; flex-direction: column; gap: var(--space-4); }

/* dot grid backdrop */
.dotgrid { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(var(--border-subtle) 1.4px, transparent 1.4px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(120% 90% at 80% 0, #000 30%, transparent 70%);
  mask-image: radial-gradient(120% 90% at 80% 0, #000 30%, transparent 70%);
  opacity: .9;
}

/* ---------- Dashboard mock ---------- */
.mock {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover); overflow: hidden;
}
.mock-bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); background: var(--color-bg-alt); }
.mock-bar .dot { width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--border-strong); }
.mock-bar .url { margin-left: 10px; font-family: var(--font-mono); font-size: var(--size-caption); color: var(--text-muted); }
.mock-body { padding: var(--space-5); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.mock-row { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
.mock-kpi { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4); }
.mock-kpi .k { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 28px; letter-spacing: -0.03em; color: var(--text-primary); }
.mock-kpi .l { font-size: var(--size-caption); color: var(--text-muted); margin-top: 2px; }
.mock-kpi .up { color: var(--semantic-success); font-size: var(--size-caption); font-weight: var(--weight-semibold); display: inline-flex; align-items: center; gap: 3px; margin-top: 6px; }
.mock-chart { grid-column: 1 / -1; height: 92px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-3); display: flex; align-items: flex-end; gap: 8px; }
.mock-chart i { flex: 1; background: var(--interactive-tint); border-radius: 4px 4px 0 0; }
.mock-chart i.hi { background: var(--brand-primary); }
.mock-status { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: var(--size-small); color: var(--text-secondary); }
.dot-ok { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--semantic-success); box-shadow: 0 0 0 4px var(--semantic-success-tint); }

/* ---------- Micro-form ---------- */
.microform { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); }
.microform .mf-title { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--size-body-lg); color: var(--text-primary); margin: 0 0 var(--space-4); }

/* ---------- Form fields ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field + .field { margin-top: var(--space-3); }
.field label { font-size: var(--size-small); font-weight: var(--weight-medium); color: var(--text-secondary); }
.field label .req { color: var(--semantic-error); }
.control {
  height: 44px; padding: 0 var(--space-3); width: 100%;
  font-family: var(--font-body); font-size: var(--size-body); color: var(--text-primary);
  background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
  appearance: none; -webkit-appearance: none;
}
textarea.control { height: auto; min-height: 110px; padding: var(--space-3); resize: vertical; line-height: var(--leading-relaxed); }
.control::placeholder { color: var(--text-muted); }
.control:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-focus-ring); }
.control[aria-invalid="true"] { border-color: var(--semantic-error); }
.field .err { font-size: var(--size-small); color: var(--semantic-error); }
.select-wrap { position: relative; }
.select-wrap .chev { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; }
select.control { cursor: pointer; padding-right: 36px; }

/* ============================================================
   STAT COUNTER
   ============================================================ */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
@media (min-width: 768px){ .stats { grid-template-columns: repeat(4,1fr); } }
.stat { text-align: center; }
.stat .num { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: clamp(36px, 5vw, 52px); letter-spacing: -0.04em; color: var(--text-primary); line-height: 1; }
.stat .num b { color: var(--brand-primary); font-weight: inherit; }
.stat .lbl { margin-top: var(--space-2); font-size: var(--size-small); color: var(--text-secondary); }

/* ============================================================
   SERVICE / BENEFIT CARDS
   ============================================================ */
.service-card { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; }
.service-card .h3-card { margin-top: var(--space-1); font-size: var(--size-body-lg); }
.service-card .body { font-size: var(--size-body); flex: 1; }
.service-card .more { display: inline-flex; align-items: center; gap: 6px; font-size: var(--size-small); font-weight: var(--weight-semibold); color: var(--brand-primary); }
.service-card .more .ico { width: 16px; height: 16px; transition: transform var(--duration-base) var(--ease-standard); }
.service-card:hover .more .ico { transform: translateX(3px); }

.benefit { display: flex; gap: var(--space-4); align-items: flex-start; }
.benefit .body { font-size: var(--size-body); margin-top: 4px; }

/* ============================================================
   PROCESS STEPS
   ============================================================ */
.steps { display: grid; gap: var(--space-6); counter-reset: step; }
@media (min-width: 768px){ .steps { grid-template-columns: repeat(4,1fr); } .steps.s3 { grid-template-columns: repeat(3,1fr); } }
.step { position: relative; }
.step .step-n {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-full);
  background: var(--brand-primary); color: var(--text-on-brand);
  font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--size-body-lg);
  margin-bottom: var(--space-4);
}
.step .h3-card { font-size: var(--size-body-lg); }
.step .body { font-size: var(--size-body); margin-top: var(--space-2); }
.steps.connected .step::after {
  content: ""; position: absolute; top: 20px; left: 52px; right: -12px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--border-strong) 0 6px, transparent 6px 12px);
}
@media (min-width: 768px){ .steps.connected .step:last-child::after { display: none; } }
@media (max-width: 767px){ .steps.connected .step::after { display: none; } }

/* ============================================================
   INTEGRATION LOGOS
   ============================================================ */
.int-cat + .int-cat { margin-top: var(--space-8); }
.int-cat-label { display: flex; align-items: center; gap: var(--space-3); font-size: var(--size-small); font-weight: var(--weight-semibold); color: var(--text-secondary); margin-bottom: var(--space-4); }
.int-cat-label::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }
.logos { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-3); }
@media (min-width: 640px){ .logos { grid-template-columns: repeat(4,1fr); } }
.logo-chip {
  height: 64px; display: grid; place-items: center; border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--surface-card); color: var(--text-muted);
  font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--size-body); letter-spacing: -0.02em;
  transition: color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.logo-chip:hover { color: var(--text-primary); border-color: var(--border-strong); }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quote-card { display: flex; flex-direction: column; gap: var(--space-5); height: 100%; }
.quote-card .q-mark { width: 34px; height: 34px; color: var(--brand-primary-soft); }
.quote-card blockquote { margin: 0; font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--size-subhead); line-height: var(--leading-snug); letter-spacing: -0.02em; color: var(--text-primary); flex: 1; }
.quote-foot { display: flex; align-items: center; gap: var(--space-3); }
.avatar { width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--brand-primary); color: var(--text-on-brand); display: grid; place-items: center; font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--size-body); flex: none; }
.quote-foot > div:not(.quote-result) { min-width: 0; }
.quote-foot .who { font-size: var(--size-body); font-weight: var(--weight-medium); color: var(--text-primary); }
.quote-foot .where { font-size: var(--size-small); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote-result { margin-left: auto; text-align: right; flex: none; white-space: nowrap; }
.quote-result .r { white-space: nowrap; }
.quote-result .r { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--size-subhead); color: var(--semantic-success); letter-spacing: -0.03em; }
.quote-result .rl { font-size: var(--size-caption); color: var(--text-muted); }

/* ============================================================
   BLOG CARDS
   ============================================================ */
.blog-card { display: flex; flex-direction: column; height: 100%; padding: 0; }
.blog-thumb { aspect-ratio: 16 / 9; background: var(--color-bg-alt); position: relative; overflow: hidden; border-bottom: 1px solid var(--border-subtle); }
.blog-thumb .dotgrid { mask-image: none; -webkit-mask-image: none; opacity: .6; }
.blog-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blog-thumb .tag { position: absolute; left: 14px; top: 14px; }
.blog-card .blog-in { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.blog-meta { font-size: var(--size-caption); color: var(--text-muted); }
.blog-card .h3-card { font-size: var(--size-body-lg); }
.blog-card .body { font-size: var(--size-body); flex: 1; }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band { background: var(--brand-primary); border-radius: var(--radius-lg); padding: var(--space-12) var(--space-8); position: relative; overflow: hidden; }
.cta-band .dotgrid { background-image: radial-gradient(rgba(255,255,255,.18) 1.4px, transparent 1.4px); mask-image: radial-gradient(120% 120% at 90% 10%, #000 20%, transparent 65%); -webkit-mask-image: radial-gradient(120% 120% at 90% 10%, #000 20%, transparent 65%); opacity: 1; }
.cta-band-in { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-6); align-items: flex-start; }
@media (min-width: 900px){ .cta-band-in { flex-direction: row; align-items: center; } }
.cta-band h2 { color: #fff; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: clamp(24px,3.4vw,34px); letter-spacing: -0.03em; margin: 0; }
.cta-band p { color: rgba(255,255,255,.82); margin: var(--space-2) 0 0; font-size: var(--size-body-lg); }
.cta-band .grow { flex: 1; }
.cta-band .btns { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.btn--on-brand { background-color: #fff; color: var(--brand-primary-hover); }
.btn--on-brand:hover { background-color: var(--brand-primary-tint); color: var(--brand-primary-hover); box-shadow: none; }
.btn--on-brand-ghost { background-color: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn--on-brand-ghost:hover { background-color: rgba(255,255,255,.12); color: #fff; }

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq { display: flex; flex-direction: column; gap: var(--space-3); }
.faq-item { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-card); overflow: hidden; }
.faq-q { width: 100%; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--size-body-lg); letter-spacing: -0.02em; color: var(--text-primary); }
.faq-q .pm { margin-left: auto; width: 22px; height: 22px; flex: none; color: var(--text-muted); transition: transform var(--duration-base) var(--ease-standard); }
.faq-item[aria-expanded="true"] .faq-q .pm { transform: rotate(45deg); color: var(--brand-primary); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height var(--duration-base) var(--ease-standard); }
.faq-a-in { padding: 0 var(--space-5) var(--space-5); }
.faq-a-in .answer-first { color: var(--text-primary); border-left: 2px solid var(--brand-primary); padding-left: var(--space-4); font-weight: var(--weight-medium); }
.faq-a-in .body { margin-top: var(--space-3); }

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--size-small); color: var(--text-muted); padding-top: var(--space-6); }
.crumbs a { color: var(--text-secondary); white-space: nowrap; }
.crumbs > span { white-space: nowrap; }
.crumbs .sep { width: 14px; height: 14px; transform: rotate(-90deg); opacity: .55; flex: none; }

/* ============================================================
   INNER PAGE COMPONENTS
   ============================================================ */
/* breadcrumbs spacing when first thing under header */
.crumbs.top { padding-top: var(--space-8); }

/* compact page hero */
.page-hero { padding: var(--space-8) 0 0; }
.page-hero .display { font-size: clamp(30px, 4.6vw, 46px); margin-top: var(--space-3); }
.page-hero .hero-cta { margin-top: var(--space-6); }
.page-hero-grid { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 1024px){ .page-hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-12); align-items: center; } }

/* answer-first card (AEO) */
.answer-card {
  border: 1px solid var(--border-subtle); border-left: 3px solid var(--brand-primary);
  border-radius: var(--radius-md); background: var(--surface-card);
  padding: var(--space-5) var(--space-6); margin-top: var(--space-5);
  font-size: var(--size-body-lg); line-height: var(--leading-relaxed); color: var(--text-primary);
}

/* meta chip row */
.meta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }

/* check list */
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.check-list li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--size-body-lg); color: var(--text-secondary); }
.check-list li .ico { width: 22px; height: 22px; flex: none; color: var(--brand-primary); margin-top: 2px; }
.check-list li b { color: var(--text-primary); font-weight: var(--weight-semibold); }

/* two-up panel */
.panel { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); }
.panel-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.panel-head .h3-card { font-size: var(--size-subhead); }

/* comparison / data table */
.ps-table-wrap { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.ps-table { width: 100%; border-collapse: collapse; font-size: var(--size-body); min-width: 520px; }
.ps-table th, .ps-table td { padding: var(--space-4) var(--space-5); text-align: left; border-bottom: 1px solid var(--border-subtle); }
.ps-table thead th { background: var(--color-bg-alt); font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--size-small); color: var(--text-secondary); letter-spacing: 0; }
.ps-table tbody tr:last-child td { border-bottom: 0; }
.ps-table tbody tr.hl { background: var(--interactive-tint); }
.ps-table td b { color: var(--text-primary); font-weight: var(--weight-semibold); }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: var(--size-small); font-weight: var(--weight-medium); padding: 3px 10px; border-radius: var(--radius-full); white-space: nowrap; }
.pill--ok { background: var(--semantic-success-tint); color: var(--semantic-success); }
.pill--warn { background: var(--semantic-warning-tint); color: var(--semantic-warning); }
.pill--muted { background: var(--color-bg-alt); color: var(--text-muted); }
/* ============================================================
   PRICING
   ============================================================ */
.pricing { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; }
@media (min-width: 640px){ .pricing { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px){ .pricing { grid-template-columns: repeat(4,1fr); } }
.tier { display: flex; flex-direction: column; gap: var(--space-4); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); position: relative; }
.tier.reco { border: 2px solid var(--brand-primary); box-shadow: var(--shadow-card-hover); }
.tier .ribbon { position: absolute; top: -13px; left: var(--space-6); background: var(--brand-primary); color: #fff; font-size: var(--size-caption); font-weight: var(--weight-semibold); padding: 4px 12px; border-radius: var(--radius-full); }
.tier .tier-name { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--size-subhead); color: var(--text-primary); }
.tier .price { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 38px; letter-spacing: -0.04em; color: var(--text-primary); line-height: 1; }
.tier .price small { font-size: var(--size-body); font-weight: var(--weight-regular); color: var(--text-muted); letter-spacing: 0; }
.tier .tier-desc { font-size: var(--size-small); color: var(--text-secondary); }
.tier .feats { list-style: none; margin: 0; padding: var(--space-2) 0 0; display: flex; flex-direction: column; gap: var(--space-3); flex: 1; border-top: 1px solid var(--border-subtle); }
.tier .feats li { display: flex; gap: 10px; font-size: var(--size-body); color: var(--text-secondary); }
.tier .feats li .ico { width: 18px; height: 18px; color: var(--brand-primary); flex: none; margin-top: 3px; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 1024px){ .contact-grid { grid-template-columns: 1.25fr 0.75fr; gap: var(--space-12); } }
.form-row { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 560px){ .form-row { grid-template-columns: 1fr 1fr; } }
.form-note { font-size: var(--size-small); color: var(--text-muted); }
.info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.info-list li { display: flex; gap: var(--space-3); align-items: flex-start; }
.info-list .icon-frame { width: 40px; height: 40px; }
.info-list .it { font-size: var(--size-small); color: var(--text-muted); }
.info-list .iv { font-size: var(--size-body); color: var(--text-primary); font-weight: var(--weight-medium); display: block; }
.info-list a.iv:hover { color: var(--brand-primary); }
.map-slot { position: relative; overflow: hidden; height: 200px; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); background: var(--color-bg-alt); display: grid; place-items: center; margin-top: var(--space-5); }
.map-slot .dotgrid { mask-image: none; -webkit-mask-image: none; opacity: .55; }
.map-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.map-slot .map-label { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); padding: 8px 16px; font-size: var(--size-small); font-weight: var(--weight-medium); color: var(--text-primary); box-shadow: var(--shadow-card-hover); }
.map-slot .map-label .ico { width: 16px; height: 16px; color: var(--brand-primary); }

/* ============================================================
   BLOG LIST + ARTICLE
   ============================================================ */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.chip { display: inline-flex; align-items: center; height: 38px; padding: 0 var(--space-4); border-radius: var(--radius-full); border: 1px solid var(--border-subtle); background: var(--surface-card); color: var(--text-secondary); font-family: inherit; font-size: var(--size-small); font-weight: var(--weight-medium); cursor: pointer; }
.chip:hover { color: var(--text-primary); border-color: var(--border-strong); text-decoration: none; }
.chip.active { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }
.chip.active:hover { color: #fff; }
.blog-card[hidden] { display: none; }

.article-head { max-width: 760px; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: var(--space-4) 0; font-size: var(--size-small); color: var(--text-muted); }
.article-meta .dotsep { width: 3px; height: 3px; border-radius: 50%; background: var(--text-muted); }

.article-layout { display: grid; gap: var(--space-10); }
@media (min-width: 1024px){ .article-layout { grid-template-columns: minmax(0,1fr) 290px; gap: var(--space-12); align-items: start; } }

.prose { max-width: 720px; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--size-section); letter-spacing: var(--tracking-heading); color: var(--text-primary); margin-top: var(--space-10); }
.prose h3 { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--size-subhead); letter-spacing: var(--tracking-heading); color: var(--text-primary); margin-top: var(--space-8); }
.prose p { font-size: var(--size-body-lg); line-height: var(--leading-relaxed); color: var(--text-secondary); }
.prose ul { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.prose ul li { position: relative; padding-left: 22px; font-size: var(--size-body-lg); line-height: var(--leading-relaxed); color: var(--text-secondary); }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-primary); }
.prose a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--text-primary); font-weight: var(--weight-semibold); }

.article-aside { display: flex; flex-direction: column; gap: var(--space-5); }
@media (min-width: 1024px){ .article-aside { position: sticky; top: 96px; } }
.toc-card h4, .aside-cta h4 { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--size-body-lg); margin: 0 0 var(--space-3); color: var(--text-primary); }
.toc-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.toc-card a { font-size: var(--size-body); color: var(--text-secondary); }
.toc-card a:hover { color: var(--brand-primary); }
.aside-cta { background: var(--interactive-tint); border-color: transparent; }
.aside-cta p { font-size: var(--size-body); color: var(--text-secondary); margin: 0 0 var(--space-4); }

.site-footer { background: var(--color-bg-alt); border-top: 1px solid var(--border-subtle); padding: var(--space-16) 0 var(--space-8); margin-top: var(--space-12); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); }
@media (min-width: 640px){ .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px){ .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.footer-col h4 { font-family: var(--font-display); font-size: var(--size-body); font-weight: var(--weight-semibold); color: var(--text-primary); margin: 0 0 var(--space-4); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.footer-col a, .footer-col li { font-size: var(--size-body); color: var(--text-secondary); }
.footer-col a:hover { color: var(--text-primary); }
.footer-brand .body { margin-top: var(--space-4); font-size: var(--size-body); max-width: 34ch; }
.footer-nap { font-size: var(--size-small); color: var(--text-secondary); line-height: var(--leading-relaxed); font-style: normal; }
.footer-nap strong { color: var(--text-primary); font-weight: var(--weight-semibold); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); font-size: var(--size-small); color: var(--text-muted); }
.footer-trust { display: inline-flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.footer-trust b { color: var(--text-primary); font-weight: var(--weight-semibold); }
.footer-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.footer-meta a { color: var(--text-secondary); }
.footer-meta a:hover { color: var(--brand-primary); }
.footer-social { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.footer-social a { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 var(--space-3); border-radius: 999px; border: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: var(--size-small); font-weight: var(--weight-medium); white-space: nowrap; transition: color .2s, border-color .2s, background-color .2s; }
.footer-social a:hover { color: var(--brand-primary); border-color: var(--brand-primary); background: var(--brand-primary-tint); }
.footer-social .ico { width: 16px; height: 16px; flex: none; }

/* ============================================================
   STICKY MOBILE CTA
   ============================================================ */

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-standard), transform .6s var(--ease-standard); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- a11y helpers ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--brand-primary); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm); }
.skip-link:focus { left: 16px; }


/* ============================================================
   AUDIT BLOCK — kontaktný formulár na mieru služby (#audit)
   ============================================================ */
#audit { scroll-margin-top: 96px; }
.audit-grid { display: grid; gap: var(--space-6); align-items: stretch; scroll-margin-top: 96px; }
@media (min-width: 960px){ .audit-grid { grid-template-columns: 0.95fr 1.05fr; gap: var(--space-8); } }
.audit-intro { background: var(--brand-primary); border-radius: var(--radius-lg); padding: var(--space-8); position: relative; overflow: hidden; display: flex; }
.audit-intro .dotgrid { background-image: radial-gradient(rgba(255,255,255,.18) 1.4px, transparent 1.4px); mask-image: radial-gradient(120% 120% at 90% 10%, #000 20%, transparent 65%); -webkit-mask-image: radial-gradient(120% 120% at 90% 10%, #000 20%, transparent 65%); opacity: 1; }
.audit-intro-in { position: relative; z-index: 1; align-self: center; }
.audit-intro .overline { color: rgba(255,255,255,.72); }
.audit-intro h2 { color: #fff; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: clamp(22px,2.6vw,30px); letter-spacing: -0.03em; margin: var(--space-2) 0 0; }
.audit-intro-in > p { color: rgba(255,255,255,.84); margin: var(--space-3) 0 0; font-size: var(--size-body-lg); line-height: 1.55; }
.audit-checklist { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.audit-checklist li { display: flex; gap: 10px; align-items: flex-start; color: rgba(255,255,255,.92); font-size: var(--size-body); line-height: 1.45; }
.audit-checklist .ico { width: 18px; height: 18px; flex: none; margin-top: 2px; color: #fff; }
.audit-trust { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-6); align-items: center; }
.audit-trust span, .audit-trust a { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: var(--size-small); font-weight: var(--weight-medium); }
.audit-trust a:hover { color: var(--brand-primary-tint); }
.audit-trust .ico { width: 16px; height: 16px; }
.audit-form-panel { display: flex; flex-direction: column; }
.audit-form { display: flex; flex-direction: column; gap: var(--space-4); }
.audit-form .field + .field { margin-top: 0; }
.gdpr-label { display: flex; gap: 10px; align-items: flex-start; font-weight: var(--weight-regular); cursor: pointer; }
.gdpr-label input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--brand-primary); flex: none; }
.form-success { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.form-success:not([hidden]) { display: flex; }
.form-success .icon-frame { color: var(--brand-primary); }
.form-success h3 { margin: 0; }
[hidden] { display: none !important; }


/* ============================================================
   MOBILE OVERFLOW GUARDS — zabránenie vodorovnému presahu
   ============================================================ */
/* Grid/flex bunky sa smú zmrštiť pod šírku svojho obsahu */
.page-hero-grid > *, .hero-grid > *, .article-layout > *,
.contact-grid > *, .audit-grid > * { min-width: 0; }
/* Dlhý nezalomiteľný text (cesty, URL, dlhé slová) sa zalomí */
.prose, .answer-card, .hero .lead, .page-hero .lead,
.article-head, .faq-a-in { overflow-wrap: break-word; }
.prose a { word-break: break-word; }
/* Bunky tabuliek sa lámu normálne po slovách (nie po písmenách) */
.ps-table th, .ps-table td { overflow-wrap: normal; word-break: normal; }
/* Obrázky a média nikdy nepretečú svoj kontajner */
.prose img, .prose video, .prose iframe { max-width: 100%; height: auto; }
/* Backstop: žiadny vodorovný scroll stránky na mobile
   (clip neruší position: sticky, na rozdiel od hidden) */
@media (max-width: 1023px){
  html, body { overflow-x: clip; }
}

/* ============================================================
   LANGUAGE SWITCHER
   ============================================================ */
.lang-switch { font-size: var(--size-body); font-weight: var(--weight-semibold); color: var(--text-secondary); padding: 8px 12px; border-radius: var(--radius-sm); }
.lang-switch:hover { color: var(--brand-primary); }