/* ============================================================
   HSE.swiss LMS — Landing page
   Palette matches public/css/style.css + lms-theme.css of the app.
   ============================================================ */

:root {
  --brand-primary: #1D857D;
  --brand-primary-dark: #37634C;
  --brand-teal-deep: #005F58;
  --brand-teal-tint: #DDF4F1;

  --brand-edit: #386CA0;
  --brand-edit-tint: #E1F0FF;
  --brand-result: #D9B24F;
  --brand-result-deep: #AF8A1C;
  --brand-result-tint: #fbebc3;
  --brand-copy: #9D486C;
  --brand-copy-tint: #FFE6EF;
  --brand-bundle: #725195;
  --brand-bundle-tint: #F3EAFF;
  --brand-green: #37634C;
  --brand-green-deep: #123F2A;
  --brand-delete: #A8351B;
  --brand-rust-tint: #FFE5DC;

  --ink: #2B2B2B;
  --ink-2: #56534E;
  --ink-3: #6E6A65;
  --line: #E4E2DE;
  --line-strong: #CFCCC7;
  --surface: #FFFFFF;
  --bg: #FAFAF9;
  --bg-sunk: #F2F1EF;

  --radius: 6px;
  --radius-card: 12px;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --shadow-card: 0 1px 2px rgba(43,43,43,.04), 0 8px 24px rgba(43,43,43,.06);
  --shadow-lift: 0 16px 40px rgba(43,43,43,.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
/* height:auto is required — the width/height attributes on the <img> tags are the
   real intrinsic sizes (so the browser reserves the right box and there's no
   layout shift), and without this they'd also be applied as literal layout
   heights, stretching the image once max-width kicks in. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-primary); }
h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 600;
  margin: 0 0 .5rem;
  line-height: 1.15;
  overflow-wrap: break-word;
  hyphens: auto;
}
p { line-height: 1.6; }
section { padding: 5.5rem 0; }
.container { max-width: 1160px; margin: 0 auto; padding: 0 1.5rem; }
.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand-primary);
  background: var(--brand-teal-tint);
  padding: .3rem .7rem;
  border-radius: 20px;
  margin-bottom: 1rem;
}
.section-head { max-width: 700px; margin-bottom: 3rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { color: var(--ink-3); font-size: 1.05rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 48px;
  padding: 0 1.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.btn-primary { background: var(--brand-primary); color: #fff; }
.btn-primary:hover { background: var(--brand-teal-deep); color: #fff; }
.btn-secondary { background: #fff; color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--bg); border-color: var(--ink-3); }
.btn-block { width: 100%; }
.btn:active { transform: translateY(1px); }

/* ---------- Header / nav ---------- */
/* Header/nav rules live in the shared public/css/viewslatte/marketing-nav.css,
   loaded alongside this file — keeps home.latte and layout.latte's guest header
   visually identical instead of two hand-maintained copies drifting apart. */

/* ---------- Hero ---------- */
.hero {
  padding: 5rem 0 4rem;
  background:
    radial-gradient(1100px 500px at 85% -10%, var(--brand-teal-tint) 0%, transparent 60%),
    var(--bg);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 3.5rem;
  align-items: center;
}
.hero h1 { font-size: clamp(1.7rem, 4.8vw, 2.6rem); letter-spacing: -.01em; }
.hero-lead { font-size: 1.15rem; color: var(--ink-2); max-width: 540px; margin-bottom: 2rem; }
.hero-ctas { display: flex; gap: .9rem; flex-wrap: wrap; margin-bottom: 2.2rem; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 1.4rem; color: var(--ink-3); font-size: .88rem; }
.hero-trust span { display: inline-flex; align-items: center; gap: .4rem; }
.hero-trust i { color: var(--brand-primary); }

.hero-visual { position: relative; }
.browser-frame {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  transform: rotate(-1.2deg);
}
.browser-chrome {
  height: 34px;
  background: var(--bg-sunk);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
}
.browser-chrome span { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.browser-frame img { display: block; }
.phone-float {
  position: absolute;
  right: -34px;
  bottom: -46px;
  width: 168px;
  border-radius: 26px;
  border: 6px solid var(--ink);
  box-shadow: var(--shadow-lift);
  transform: rotate(4deg);
  background: var(--ink);
}
.phone-float img { border-radius: 20px; }
/* Below ~1240px the container has no spare gutter left, so the phone's outward
   offset plus its rotation would push past the viewport and create a horizontal
   scrollbar. Tuck it flush against the visual instead. */
@media (max-width: 1240px) {
  .phone-float { right: 0; }
}

/* ---------- Logo strip ---------- */
.logo-strip { padding: 2.2rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.logo-strip p { text-align: center; color: var(--ink-3); font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 1.1rem; }
.logo-strip-row { display: flex; justify-content: center; gap: 2.6rem; flex-wrap: wrap; color: var(--ink-3); font-weight: 600; font-size: 1.05rem; opacity: .75; }

/* ---------- Feature grid ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.feature-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.8rem;
  box-shadow: var(--shadow-card);
}
.feature-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  margin-bottom: 1.1rem;
}
.feature-card h3 { font-size: 1.08rem; margin-bottom: .5rem; }
.feature-card p { font-size: .94rem; color: var(--ink-3); margin: 0; }

.fi-teal   { background: var(--brand-teal-tint); color: var(--brand-primary); }
.fi-edit   { background: var(--brand-edit-tint); color: var(--brand-edit); }
.fi-result { background: var(--brand-result-tint); color: var(--brand-result-deep); }
.fi-copy   { background: var(--brand-copy-tint); color: var(--brand-copy); }
.fi-bundle { background: var(--brand-bundle-tint); color: var(--brand-bundle); }

/* ---------- Steps grid (How it works) ---------- */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.step-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.8rem;
  box-shadow: var(--shadow-card);
}
.step-number {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 1.1rem;
  background: var(--brand-teal-tint);
  color: var(--brand-primary);
}
.step-card h3 { font-size: 1.08rem; margin-bottom: .5rem; }
.step-card p { font-size: .94rem; color: var(--ink-3); margin: 0; }
.fi-green  { background: #EAF1EC; color: var(--brand-green); }

/* ---------- Screens showcase ---------- */
.showcase-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 2.2rem; }
.showcase-tab {
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink-2);
  padding: .55rem 1.05rem;
  border-radius: 20px;
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
}
.showcase-tab.active { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.showcase-stage { display: grid; grid-template-columns: 1.55fr .95fr; gap: 2rem; align-items: center; }
.showcase-desktop {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: #fff;
}
.showcase-desktop .browser-chrome { height: 30px; }
.showcase-panel { display: none; }
.showcase-panel.active { display: block; }
.showcase-caption { padding: 1.1rem 1.3rem; border-top: 1px solid var(--line); }
.showcase-caption h4 { margin: 0 0 .2rem; font-size: 1rem; }
.showcase-caption p { margin: 0; font-size: .89rem; color: var(--ink-3); }

.showcase-mobile { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.phone-shell {
  width: 240px;
  border: 8px solid var(--ink);
  border-radius: 32px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  background: var(--ink);
}
.phone-shell img { display: block; }
.showcase-mobile p { text-align: center; font-size: .89rem; color: var(--ink-3); max-width: 230px; }

/* ---------- Live demo bundles ---------- */
.demo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.demo-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.8rem;
  box-shadow: var(--shadow-card);
  text-align: center;
}
.demo-card--visitor { border-top-color: var(--brand-primary); }
.demo-card--staff { border-top-color: var(--brand-edit); }
.demo-qr { display: block; margin: 0 auto 1.1rem; border-radius: 8px; }
.demo-card h3 { font-size: 1.08rem; margin-bottom: .6rem; }
.demo-tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 500;
  color: var(--ink-3);
  background: var(--bg-sunk);
  border-radius: 20px;
  padding: .15rem .6rem;
  margin-left: .3rem;
  vertical-align: middle;
}
.demo-card--visitor .demo-tag { color: var(--brand-primary-dark); background: var(--brand-teal-tint); }
.demo-card--staff .demo-tag { color: var(--brand-edit); background: var(--brand-edit-tint); }
.demo-card p { font-size: .92rem; color: var(--ink-3); margin-bottom: 1.2rem; }

/* ---------- Compliance / Swiss hosting ---------- */
.compliance-section { background: var(--brand-primary-dark); color: #fff; }
.compliance-section .section-head p { color: #DCEAE3; }
.compliance-section .eyebrow { background: rgba(255,255,255,.14); color: #fff; }
.compliance-section h2 { color: #fff; }
.compliance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}
.compliance-card {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-card);
  padding: 1.6rem;
}
.compliance-card i { font-size: 1.3rem; margin-bottom: .8rem; display: block; color: #B9E6DC; }
.compliance-card h3 { color: #fff; font-size: 1rem; }
.compliance-card p { color: #DCEAE3; font-size: .9rem; margin: 0; }

/* ---------- Pricing calculator ---------- */
.pricing-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.2rem;
  align-items: start;
}
.calc-card, .plan-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 2rem;
}
.calc-field { margin-bottom: 1.6rem; }
.calc-field label { display: flex; justify-content: space-between; font-weight: 600; font-size: .92rem; color: var(--ink); margin-bottom: .6rem; }
.calc-field label span.val { color: var(--brand-primary); font-weight: 700; }
input[type="range"] {
  width: 100%;
  accent-color: var(--brand-primary);
}
.calc-toggles { display: flex; flex-direction: column; gap: .7rem; margin-bottom: 1rem; }
.calc-toggle {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .8rem 1rem;
  font-size: .9rem;
}
.calc-toggle span.tname { font-weight: 600; color: var(--ink); }
.calc-toggle span.tdesc { display: block; font-weight: 400; color: var(--ink-3); font-size: .82rem; margin-top: .1rem; }
.switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider-toggle {
  position: absolute; inset: 0; cursor: pointer;
  background: var(--line-strong); border-radius: 24px; transition: .15s;
}
.slider-toggle::before {
  content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: .15s;
}
.switch input:checked + .slider-toggle { background: var(--brand-primary); }
.switch input:checked + .slider-toggle::before { transform: translateX(18px); }
.switch input:disabled + .slider-toggle { cursor: not-allowed; opacity: .7; }
.calc-toggle-locked {
  background: var(--bg-sunk);
  border-style: dashed;
  cursor: default;
}
.calc-toggle-lock-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  flex-shrink: 0;
  color: var(--ink-3);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: .3rem .7rem;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}
.calc-toggle-lock-badge i { font-size: .72rem; }

.plan-card { position: sticky; top: 90px; }
.plan-price-row { display: flex; align-items: baseline; gap: .4rem; margin: 1rem 0 .3rem; }
.plan-price { font-size: 2.6rem; font-weight: 700; color: var(--ink); }
.plan-price-note { color: var(--ink-3); font-size: .95rem; }
.plan-sub { color: var(--ink-3); font-size: .88rem; margin-bottom: 1.6rem; }
.plan-breakdown { list-style: none; margin: 0 0 1.6rem; padding: 0; font-size: .9rem; }
.plan-breakdown li { display: flex; justify-content: space-between; padding: .55rem 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.plan-breakdown li:last-child { border-bottom: none; }
.plan-note {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  font-size: .82rem;
  color: var(--ink-3);
  margin-top: 1rem;
}

/* ---------- Testimonial / CTA banner ---------- */
.cta-banner {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 3rem;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.cta-banner h2 { font-size: 1.8rem; }
.cta-banner p { max-width: 560px; margin: 0 auto 1.8rem; color: var(--ink-3); }

/* ---------- Contact ---------- */
.contact-wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3rem; }
.contact-info h2 { font-size: 1.9rem; }
.contact-list { list-style: none; padding: 0; margin: 2rem 0 0; }
.contact-list li { display: flex; gap: .9rem; margin-bottom: 1.4rem; align-items: flex-start; }
.contact-list i { color: var(--brand-primary); width: 22px; margin-top: .2rem; }
.contact-list strong { display: block; color: var(--ink); font-size: .95rem; }
.contact-list span.sub { color: var(--ink-3); font-size: .88rem; }

.contact-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 2.2rem;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { margin-bottom: 1.1rem; }
.form-group label { display: block; font-weight: 600; font-size: .88rem; color: var(--ink); margin-bottom: .4rem; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  font-family: var(--font);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: .7rem .8rem;
  font-size: .95rem;
  color: var(--ink);
  background: #fff;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(29,133,125,.18);
}
.form-group textarea { min-height: 110px; resize: vertical; }
.form-consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .82rem; color: var(--ink-3); margin-bottom: 1.3rem; }
.form-consent input { margin-top: .2rem; }
.form-status { font-size: .88rem; margin-top: .9rem; display: none; }
.form-status.ok { color: var(--brand-green); display: block; }
.form-status.err { color: var(--brand-delete); display: block; }

/* ---------- Footer ---------- */
footer.site-footer { border-top: 1px solid var(--line); padding: 3rem 0 2rem; background: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; margin-bottom: 2.2rem; }
.footer-brand img { height: 28px; margin-bottom: .9rem; }
.footer-brand p { font-size: .85rem; color: var(--ink-3); max-width: 260px; }
footer h5 { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin-bottom: .9rem; }
footer ul { list-style: none; margin: 0; padding: 0; }
footer li { margin-bottom: .6rem; }
footer a { color: var(--ink-2); text-decoration: none; font-size: .9rem; }
footer a:hover { color: var(--brand-primary); }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .8rem;
  font-size: .82rem; color: var(--ink-3);
}

/* ---------- Responsive ---------- */

/* =====================================================================
   Homepage v2 — problem framing, industry use cases, FAQ
   ===================================================================== */

/* Keyboard-only shortcut past the sticky header. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand-primary); color: #fff;
  padding: .7rem 1.1rem; font-weight: 600; text-decoration: none;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: #fff; }

.hero h1 em { font-style: normal; color: var(--brand-primary); }

/* Global `hyphens: auto` earns its keep on the long hero headline, but in the
   narrow card grids it chops short words ("et-was", "blei-ben"). Cards wrap on
   word boundaries instead. */
.problem-card h3,
.feature-card h3,
.step-card h3,
.uc-intro h3,
.compliance-card h3,
.demo-card h3,
.faq-item summary { hyphens: manual; }
.hero-microcopy { font-size: .86rem; color: var(--ink-3); margin: 1.2rem 0 2rem; }

/* ---------- Problem cards ---------- */
.problem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
.problem-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand-result);
  border-radius: var(--radius-card);
  padding: 1.7rem 1.5rem;
  box-shadow: var(--shadow-card);
}
.problem-card i { color: var(--brand-result-deep); font-size: 1.1rem; margin-bottom: .9rem; display: block; }
.problem-card h3 { font-size: 1.02rem; margin-bottom: .5rem; }
.problem-card p { font-size: .93rem; color: var(--ink-3); margin: 0; }

/* ---------- Contrast (today / with us) ---------- */
.contrast {
  display: grid; grid-template-columns: 1fr 1fr;
  margin-top: 3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.contrast-col { padding: 2rem 2.1rem; }
.contrast-col + .contrast-col { border-left: 1px solid var(--line); }
.contrast-col.after { background: linear-gradient(180deg, #F4FBF9 0%, #fff 100%); }
.contrast-col h3 {
  font-size: 1rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-3); font-weight: 700; margin-bottom: 1.2rem;
}
.contrast-col.after h3 { color: var(--brand-primary); }
.contrast-list { list-style: none; margin: 0; padding: 0; }
.contrast-list li { display: flex; gap: .75rem; align-items: flex-start; font-size: .96rem; padding: .58rem 0; }
.contrast-list i { margin-top: .22rem; font-size: .85rem; flex-shrink: 0; }
.contrast-col.before i { color: var(--line-strong); }
.contrast-col.after i { color: var(--brand-primary); }
.contrast-note {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  padding: 1.1rem 2.1rem;
  font-size: .9rem; color: var(--ink-3);
  background: var(--bg); margin: 0;
}

/* ---------- Training types ----------
   Deliberately not pill-shaped: the tab row below is interactive, so these
   read as plain labels — no border, no card background, no hover. */
.chip-row {
  display: flex; flex-wrap: wrap; gap: .55rem 1.7rem;
  justify-content: center; margin: 0 auto 2.8rem; max-width: 1000px;
}
.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .95rem; font-weight: 500; color: var(--ink-2); white-space: nowrap;
}
.chip i { color: var(--brand-primary); font-size: .78rem; opacity: .85; }

/* ---------- Industry use-case tabs ---------- */
.uc-tabs { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-bottom: 2.2rem; }
.uc-tab {
  border: 1px solid var(--line-strong); background: #fff; color: var(--ink-2);
  padding: .6rem 1.15rem; border-radius: 24px;
  font-family: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.uc-tab:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.uc-tab.active { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }

.uc-panel { display: none; }
.uc-panel.active { display: block; animation: ucFade .28s ease both; }
@keyframes ucFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.uc-body {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line); border-radius: var(--radius-card);
  overflow: hidden; background: var(--surface); box-shadow: var(--shadow-card);
}
.uc-intro { padding: 2.3rem 2.2rem; }
.uc-intro h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin-bottom: .8rem; }
.uc-intro p { font-size: 1rem; color: var(--ink-2); margin: 0 0 1.5rem; }
.uc-areas { font-size: .84rem; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 1.1rem; }
.uc-areas strong {
  display: block; text-transform: uppercase; letter-spacing: .07em;
  font-size: .72rem; color: var(--ink-3); margin-bottom: .45rem;
}
.uc-points {
  padding: 2.3rem 2.2rem;
  background: linear-gradient(180deg, #F4FBF9 0%, #FBFDFC 100%);
  border-left: 1px solid var(--line);
}
.uc-points ul { list-style: none; margin: 0; padding: 0; }
.uc-points li { display: flex; gap: .75rem; align-items: flex-start; font-size: .96rem; color: var(--ink-2); padding: .6rem 0; }
.uc-points li i { color: var(--brand-primary); margin-top: .22rem; font-size: .85rem; flex-shrink: 0; }
.uc-footnote { text-align: center; font-size: .93rem; color: var(--ink-3); margin: 1.8rem auto 0; max-width: 640px; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); margin-bottom: .8rem;
  box-shadow: var(--shadow-card); overflow: hidden;
}
.faq-item summary {
  list-style: none; cursor: pointer; padding: 1.15rem 1.5rem;
  font-weight: 600; color: var(--ink); font-size: 1rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free"; font-weight: 900;
  font-size: .75rem; color: var(--brand-primary);
  transition: transform .18s ease; flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-item[open] summary { border-bottom: 1px solid var(--line); }
.faq-body { padding: 1.1rem 1.5rem 1.35rem; font-size: .96rem; color: var(--ink-2); }
.faq-body p { margin: 0; }

/* ---------- CTA banner actions ---------- */
.cta-actions { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }
.btn-ghost-light {
  background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.5);
}
.btn-ghost-light:hover { background: rgba(255,255,255,.28); color: #fff; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .uc-panel.active { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .phone-float { display: none; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .problem-grid { grid-template-columns: repeat(2, 1fr); }
  .contrast { grid-template-columns: 1fr; }
  .contrast-col + .contrast-col { border-left: none; border-top: 1px solid var(--line); }
  .uc-body { grid-template-columns: 1fr; }
  .uc-points { border-left: none; border-top: 1px solid var(--line); }
  .compliance-grid { grid-template-columns: repeat(2, 1fr); }
  .showcase-stage { grid-template-columns: 1fr; }
  .pricing-wrap { grid-template-columns: 1fr; }
  .plan-card { position: static; }
  .contact-wrap { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  section { padding: 3.5rem 0; }
  .feature-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .problem-grid { grid-template-columns: 1fr; }
  .contrast-col, .uc-intro, .uc-points { padding: 1.6rem 1.3rem; }
  .contrast-note { padding: 1rem 1.3rem; }
  .compliance-grid { grid-template-columns: 1fr; }
  .demo-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cta-banner { padding: 2rem 1.4rem; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  /* Grid/flex items default to min-width:auto, so the calculator's long German
     module labels set a min-content floor wider than the track and pushed the
     card past the viewport on ~360px screens. */
  .pricing-wrap, .calc-card, .plan-card { min-width: 0; }
  .calc-card, .plan-card { padding: 1.4rem 1.2rem; }
  .calc-toggle { padding: .7rem .8rem; gap: .6rem; }
  .calc-toggle span.tname, .calc-toggle span.tdesc { overflow-wrap: break-word; }
  .plan-price { font-size: 2.1rem; }
  /* flex-shrink:0 + white-space:nowrap makes the locked-module badge an
     unshrinkable block; let it wrap under the label on the narrowest screens. */
  .calc-toggle { flex-wrap: wrap; }
  .calc-toggle-lock-badge { flex-shrink: 1; white-space: normal; }
}