/* ============================================================================
   NursingCare — Prodajna prezentacija
   Design tokens ported from the live "Nourse" design system (Clinical Calm).
   ============================================================================ */
:root {
  /* brand */
  --teal: #0f7d77;
  --teal-d: #0a5b56;
  --teal-dd: #073f3b;
  --teal-l: #eef4f2;
  --teal-l2: #dcebe8;

  /* ink / neutrals */
  --ink: #16241f;
  --ink-2: #38463f;
  --mut: #6d7a74;
  --mut-2: #93a09a;
  --line: #e4ebe7;
  --line-2: #eef2f0;
  --bg: #f4f7f5;
  --card: #ffffff;

  /* status */
  --urg: #d4503e;
  --urg-d: #a83b2c;
  --urg-bg: #fdeeeb;
  --warn: #c0860f;
  --warn-bg: #fbf2e0;
  --ok: #2f9e6f;
  --ok-bg: #e6f5ee;
  --info: #2b6cb0;
  --info-bg: #e8f1fa;
  --purple: #6b5bd6;
  --purple-bg: #eeecfb;

  /* radii / shadow */
  --r-sm: 8px;
  --r: 11px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --sh-1: 0 1px 2px rgba(16, 40, 34, 0.05);
  --sh-2: 0 4px 16px rgba(16, 40, 34, 0.07);
  --sh-3: 0 12px 40px rgba(16, 40, 34, 0.14);

  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --maxw: 1140px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Belt-and-braces against sideways scroll on narrow screens. `clip` (not `hidden`)
     because `hidden` would turn body into a scroll container and break the sticky nav. */
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.wrap { width: min(100% - 40px, var(--maxw)); margin-inline: auto; }
.eyebrow {
  font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal-d); margin-bottom: 14px;
}
.section-head { max-width: 660px; margin-bottom: 44px; }
.section-head.center { margin-inline: auto; text-align: center; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; color: var(--ink); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; }
h3 { font-size: 1.18rem; font-weight: 700; }
.lead { font-size: 1.1rem; color: var(--ink-2); margin-top: 14px; }
section { padding: 86px 0; }
.muted { color: var(--mut); }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: inherit; font-size: .98rem; font-weight: 700;
  padding: 13px 22px; border-radius: var(--r); border: 1px solid transparent;
  cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--teal); color: #fff; box-shadow: var(--sh-2); }
.btn-primary:hover { background: var(--teal-d); box-shadow: var(--sh-3); }
.btn-ghost { background: #fff; color: var(--teal-d); border-color: var(--line); box-shadow: var(--sh-1); }
.btn-ghost:hover { border-color: var(--teal-l2); }
.btn-light { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.32); }
.btn-light:hover { background: rgba(255,255,255,.22); }

/* ---- nav ---- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 247, 245, .82); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .25s ease, box-shadow .25s ease;
}
.nav.scrolled { border-color: var(--line); box-shadow: var(--sh-1); }
.nav-inner { display: flex; align-items: center; gap: 18px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.18rem; letter-spacing: -.02em; }
.brand .logo {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, var(--teal), var(--teal-dd));
  display: grid; place-items: center; color: #fff; box-shadow: var(--sh-2);
}
.brand .logo svg { width: 19px; height: 19px; }
.nav-links { display: flex; gap: 2px; margin-left: auto; }
.nav-links a {
  padding: 7px 10px; border-radius: var(--r-sm); font-size: .9rem; font-weight: 600;
  white-space: nowrap; color: var(--ink-2); transition: background .15s ease, color .15s ease;
}
.nav-links a:hover { background: var(--teal-l); color: var(--teal-d); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
/* CTA that lives inside the mobile panel — hidden while the desktop bar CTA is visible */
.nav-links .nav-cta { display: none; }

/* hamburger — only rendered below the desktop breakpoint (see responsive block) */
.nav-toggle {
  display: none; width: 44px; height: 44px; flex: none;
  align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--ink-2); cursor: pointer; box-shadow: var(--sh-1);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.nav-toggle:hover { background: var(--teal-l); color: var(--teal-d); border-color: var(--teal-l2); }
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .ic-close { display: none; }
.nav-toggle[aria-expanded='true'] .ic-open { display: none; }
.nav-toggle[aria-expanded='true'] .ic-close { display: block; }

/* language toggle */
.lang {
  display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 3px; box-shadow: var(--sh-1);
}
.lang button {
  font-family: inherit; font-size: .82rem; font-weight: 700; color: var(--mut);
  border: none; background: transparent; cursor: pointer; padding: 5px 13px; border-radius: 999px;
  transition: all .15s ease;
}
.lang button.active { background: var(--teal); color: #fff; }

/* ---- hero ---- */
.hero { padding: 70px 0 80px; position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 460px at 78% -8%, var(--teal-l2), transparent 60%),
    radial-gradient(680px 420px at 6% 18%, #e9f3f0, transparent 55%);
}
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); font-weight: 800; }
.hero h1 .hl { color: var(--teal-d); }
.hero .lead { font-size: 1.18rem; max-width: 540px; }
.hero-cta { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px 6px 8px; font-size: .85rem; font-weight: 600; color: var(--ink-2);
  box-shadow: var(--sh-1); margin-bottom: 22px;
}
.hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-bg); }

.stat-row { display: flex; gap: 30px; margin-top: 40px; flex-wrap: wrap; }
.stat .num { font-size: 1.9rem; font-weight: 800; color: var(--teal-d); letter-spacing: -.02em; }
.stat .lbl { font-size: .85rem; color: var(--mut); font-weight: 600; }

/* hero visual — mock app */
.mock {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-3);
  overflow: hidden; transform: perspective(1400px) rotateY(-9deg) rotateX(3deg); transform-origin: center;
}
.mock-top { display: flex; align-items: center; gap: 7px; padding: 12px 15px; border-bottom: 1px solid var(--line-2); background: var(--teal-l); }
.mock-top .d { width: 10px; height: 10px; border-radius: 50%; }
.mock-top .d.r { background: #e88; } .mock-top .d.y { background: #ecb85a; } .mock-top .d.g { background: #7cc59a; }
.mock-top .t { margin-left: 8px; font-size: .78rem; font-weight: 700; color: var(--teal-dd); }
.mock-body { padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.kpi { background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r); padding: 13px; }
.kpi .k-num { font-size: 1.5rem; font-weight: 800; color: var(--ink); }
.kpi .k-lbl { font-size: .72rem; color: var(--mut); font-weight: 600; }
.kpi .k-bar { height: 5px; border-radius: 3px; background: var(--teal-l2); margin-top: 9px; overflow: hidden; }
.kpi .k-bar i { display: block; height: 100%; background: var(--teal); border-radius: 3px; }
.kpi.span2 { grid-column: span 2; display: flex; align-items: center; gap: 12px; }
.pill { font-size: .68rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.urg { background: var(--urg-bg); color: var(--urg-d); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }

/* ---- generic cards / grids ---- */
.grid { display: grid; gap: 20px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 26px; box-shadow: var(--sh-1); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--teal-l2); }
.card .ico {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--teal-l); color: var(--teal-d); margin-bottom: 16px;
}
.card .ico svg { width: 24px; height: 24px; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--ink-2); font-size: .96rem; }
.feat-list { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.feat-list li { display: flex; gap: 9px; font-size: .9rem; color: var(--ink-2); }
.feat-list li svg { width: 17px; height: 17px; flex: none; color: var(--teal); margin-top: 3px; }

/* icon color variants per module group */
.ico.c-teal { background: var(--teal-l); color: var(--teal-d); }
.ico.c-info { background: var(--info-bg); color: var(--info); }
.ico.c-purple { background: var(--purple-bg); color: var(--purple); }
.ico.c-warn { background: var(--warn-bg); color: var(--warn); }
.ico.c-ok { background: var(--ok-bg); color: var(--ok); }
.ico.c-urg { background: var(--urg-bg); color: var(--urg-d); }

/* problem section (dark) */
.dark { background: var(--teal-dd); color: #eaf3f1; }
.dark h2, .dark h3 { color: #fff; }
.dark .eyebrow { color: #8fd6cf; }
.dark .lead { color: #c4ddd9; }
.problem-card {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-md);
  padding: 24px;
}
.problem-card .pico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(212,80,62,.16); color: #f0a594; margin-bottom: 14px; }
.problem-card .pico svg { width: 22px; height: 22px; }
.problem-card h3 { font-size: 1.05rem; }
.problem-card p { color: #bcd5d0; font-size: .93rem; margin-top: 6px; }

/* module group label */
.modgroup { margin-top: 44px; }
.modgroup:first-of-type { margin-top: 0; }
.modgroup-label {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
.modgroup-label span { font-size: 1.05rem; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.modgroup-label .ln { flex: 1; height: 1px; background: var(--line); }
.modgroup-label .tag { font-size: .72rem; font-weight: 700; color: var(--teal-d); background: var(--teal-l);
  padding: 4px 10px; border-radius: 999px; }

/* benefits / metrics */
.metric { text-align: center; padding: 18px; }
.metric .m-num { font-size: 2.6rem; font-weight: 800; color: var(--teal-d); letter-spacing: -.03em; }
.metric .m-lbl { color: var(--ink-2); font-weight: 600; margin-top: 6px; }
.benefit-li { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.benefit-li:last-child { border-bottom: none; }
.benefit-li .bico { width: 44px; height: 44px; flex: none; border-radius: 11px; background: var(--ok-bg);
  color: var(--ok); display: grid; place-items: center; }
.benefit-li .bico svg { width: 23px; height: 23px; }
.benefit-li h3 { font-size: 1.05rem; margin-bottom: 4px; }
.benefit-li p { color: var(--ink-2); font-size: .95rem; }

/* steps */
.steps { counter-reset: step; display: grid; gap: 22px; }
.step { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px; box-shadow: var(--sh-1); }
.step .n { counter-increment: step; width: 48px; height: 48px; border-radius: 13px;
  background: var(--teal); color: #fff; font-weight: 800; font-size: 1.25rem; display: grid; place-items: center; }
.step .n::before { content: counter(step); }
.step h3 { margin-bottom: 5px; }
.step p { color: var(--ink-2); font-size: .96rem; }

/* strategy columns */
.strat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.strat-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 26px; box-shadow: var(--sh-1); }
.strat-card h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.strat-card h3 .ico { width: 38px; height: 38px; margin: 0; border-radius: 10px;
  display: grid; place-items: center; flex: none; }
.strat-card h3 .ico svg { width: 20px; height: 20px; }
.strat-card ul { display: flex; flex-direction: column; gap: 10px; }
.strat-card li { display: flex; gap: 9px; font-size: .94rem; color: var(--ink-2); }
.strat-card li svg { width: 17px; height: 17px; flex: none; color: var(--teal); margin-top: 3px; }

/* pricing */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.price {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 28px;
  box-shadow: var(--sh-1); display: flex; flex-direction: column;
}
.price.featured { border: 2px solid var(--teal); box-shadow: var(--sh-3); position: relative; }
.price.featured::before {
  content: attr(data-badge); position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--teal); color: #fff; font-size: .72rem; font-weight: 700; padding: 5px 14px; border-radius: 999px;
  letter-spacing: .03em;
}
.price .tier { font-size: 1.15rem; font-weight: 800; }
.price .desc { color: var(--mut); font-size: .9rem; margin: 6px 0 18px; min-height: 40px; }
.price .amt { font-size: 2.4rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.price .amt small { font-size: .9rem; font-weight: 600; color: var(--mut); }
.price .per { font-size: .85rem; color: var(--mut); margin-bottom: 22px; }
.price ul { display: flex; flex-direction: column; gap: 11px; margin-bottom: 26px; flex: 1; }
.price li { display: flex; gap: 10px; font-size: .92rem; color: var(--ink-2); }
.price li svg { width: 18px; height: 18px; flex: none; color: var(--teal); margin-top: 2px; }
.price .btn { width: 100%; justify-content: center; }
.price-note { text-align: center; color: var(--mut); font-size: .85rem; margin-top: 22px; }

/* CTA band */
.cta-band { background: linear-gradient(135deg, var(--teal-d), var(--teal-dd)); border-radius: var(--r-xl);
  padding: 56px; text-align: center; color: #fff; box-shadow: var(--sh-3); }
.cta-band h2 { color: #fff; }
.cta-band .lead { color: #c8e2de; margin-inline: auto; max-width: 560px; }
.cta-band .hero-cta { justify-content: center; }
.demo-creds { display: inline-flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin-top: 26px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: var(--r); padding: 14px 20px;
  font-size: .88rem; }
.demo-creds code { background: rgba(0,0,0,.22); padding: 2px 8px; border-radius: 6px; font-family: ui-monospace, monospace; color: #d8efeb; }

/* ---- mobile app section (signature) ---- */
.mobsec { background: linear-gradient(157deg, var(--teal) 0%, var(--teal-d) 62%, var(--teal-dd) 100%); color: #eaf4f2; overflow: hidden; }
.mobsec .eyebrow { color: #a9e0d8; }
.mobsec h2 { color: #fff; }
.mobsec-head { max-width: 680px; margin: 0 auto; text-align: center; }
.mobsec-head .lead { color: #cfe6e2; }
.mob-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #eaf4f2; font-size: .78rem; font-weight: 700; padding: 6px 14px; border-radius: 999px; margin-bottom: 16px; }
.mob-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #7fe0cf; box-shadow: 0 0 0 4px rgba(127,224,207,.25); }
.mob-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; max-width: 760px; margin: 24px auto 0; }
.mob-chip { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 8px 15px; font-size: .85rem; font-weight: 600; color: #eaf4f2; }
.mob-chip svg { width: 16px; height: 16px; color: #bfeae2; flex: none; }

/* 3-phone fan showcase */
.phone-fan { display: flex; justify-content: center; align-items: flex-end; margin-top: 60px; }
.phone { position: relative; width: 232px; height: 476px; border-radius: 38px; background: #0a1f1c; padding: 10px; box-shadow: 0 34px 70px rgba(4,26,23,.5), inset 0 0 0 2px rgba(255,255,255,.06); flex: none; }
.phone--back { width: 210px; height: 436px; z-index: 1; box-shadow: 0 24px 54px rgba(4,26,23,.42), inset 0 0 0 2px rgba(255,255,255,.06); }
.phone--l { transform: rotate(-8deg) translate(46px, 20px); transform-origin: bottom center; }
.phone--r { transform: rotate(8deg) translate(-46px, 20px); transform-origin: bottom center; }
.phone--front { z-index: 2; }
@media (prefers-reduced-motion: no-preference) { .phone--front { animation: phone-float 6.5s ease-in-out infinite; } }
@keyframes phone-float { 0%,100% { transform: translateY(-7px); } 50% { transform: translateY(7px); } }
.phone::before { content: ""; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 92px; height: 19px; border-radius: 12px; background: #0a1f1c; z-index: 3; }
.phone-screen { position: relative; height: 100%; border-radius: 30px; background: var(--bg); overflow: hidden; display: flex; flex-direction: column; }
.phone-bar { background: linear-gradient(135deg, var(--teal), var(--teal-d)); color: #fff; padding: 34px 18px 16px; }
.phone-bar .pb-sub { font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: #bfeae2; font-weight: 700; }
.phone-bar .pb-title { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; }
.phone-body { padding: 14px; display: flex; flex-direction: column; gap: 9px; overflow: hidden; }
.p-row { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 10px 11px; box-shadow: var(--sh-1); }
.p-row .p-ic { width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; }
.p-row .p-ic svg { width: 16px; height: 16px; }
.p-row.warn .p-ic { background: var(--warn-bg); color: var(--warn); }
.p-row .p-tx { flex: 1; min-width: 0; }
.p-row .p-tx b { display: block; font-size: .78rem; color: var(--ink); font-weight: 700; }
.p-row .p-tx span { font-size: .68rem; color: var(--mut); }
.p-row .p-badge { font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); }
.p-row.warn .p-badge { background: var(--warn-bg); color: var(--warn); }
.p-scan { margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--teal); color: #fff; font-size: .8rem; font-weight: 700; padding: 12px; border-radius: 14px; box-shadow: var(--sh-2); }
.p-scan svg { width: 17px; height: 17px; }
.p-offline { display: flex; align-items: center; gap: 7px; justify-content: center; font-size: .66rem; font-weight: 700; color: var(--teal-d); background: var(--teal-l2); border-radius: 999px; padding: 6px; margin-top: 2px; }
.p-offline .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
/* family-portal + vitals screen bits */
.p-hero { display: flex; gap: 11px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 11px; box-shadow: var(--sh-1); }
.p-av { width: 42px; height: 42px; flex: none; border-radius: 12px; background: linear-gradient(135deg, var(--teal), var(--teal-d)); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .9rem; }
.p-hero b { display: block; font-size: .82rem; color: var(--ink); }
.p-hero small { font-size: .68rem; color: var(--mut); }
.p-stat { display: flex; gap: 8px; }
.p-stat .ps { flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 9px 10px; box-shadow: var(--sh-1); }
.p-stat .ps .n { font-size: 1.02rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.p-stat .ps .l { font-size: .58rem; color: var(--mut); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; margin-top: 1px; }
.p-spark { display: flex; align-items: flex-end; gap: 3px; height: 40px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px; box-shadow: var(--sh-1); }
.p-spark i { flex: 1; background: linear-gradient(var(--teal), var(--teal-l2)); border-radius: 3px 3px 0 0; }
.p-photo { height: 92px; border-radius: 12px; background: linear-gradient(135deg, #cfe0db, #a9cbc4); border: 1px solid var(--line); position: relative; overflow: hidden; }
.p-photo::after { content: ""; position: absolute; right: 22px; bottom: 20px; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle, rgba(212,80,62,.55), rgba(212,80,62,0) 70%); }
.p-note { font-size: .72rem; line-height: 1.4; color: var(--teal-dd); background: var(--teal-l); border-radius: 11px; padding: 9px 11px; }
@media (max-width: 720px) {
  .phone-fan { justify-content: flex-start; overflow-x: auto; gap: 16px; padding-bottom: 10px; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
  .phone { scroll-snap-align: center; }
  .phone--l, .phone--r { transform: none; }
  .phone--back { width: 232px; height: 476px; }
  .phone--front { animation: none; }
}

/* ---- blog ---- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.blog-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); transition: transform .18s ease, box-shadow .18s ease; }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.blog-cover { height: 128px; position: relative; }
.blog-cover.c1 { background: linear-gradient(135deg, var(--teal), var(--teal-d)); }
.blog-cover.c2 { background: linear-gradient(135deg, #3f7fb8, var(--info)); }
.blog-cover.c3 { background: linear-gradient(135deg, #7b6ad8, var(--purple)); }
.blog-cover svg { position: absolute; right: 16px; bottom: 14px; width: 40px; height: 40px; color: rgba(255,255,255,.9); }
.blog-cat { position: absolute; top: 14px; left: 14px; font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.18); padding: 5px 11px; border-radius: 999px; }
.blog-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.blog-body h3 { font-size: 1.12rem; line-height: 1.25; }
.blog-body p { color: var(--ink-2); font-size: .92rem; margin-top: 10px; flex: 1; }
.blog-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.blog-meta .read { font-size: .8rem; color: var(--mut); }
.blog-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9rem; color: var(--teal-d); }
.blog-more svg { width: 15px; height: 15px; }
@media (max-width: 860px) { .blog-grid { grid-template-columns: 1fr; } }

/* footer */
footer { background: var(--ink); color: #aebbb5; padding: 56px 0 30px; }
footer h4 { color: #fff; font-size: .95rem; margin-bottom: 14px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
footer a { color: #aebbb5; font-size: .9rem; line-height: 2; }
footer a:hover { color: #fff; }
.foot-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; color: #fff; margin-bottom: 14px; }
.foot-brand .logo { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, var(--teal), var(--teal-dd));
  display: grid; place-items: center; }
.foot-brand .logo svg { width: 18px; height: 18px; }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 40px; padding-top: 22px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .85rem; }

/* ---- personas ---- */
.persona {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px;
  box-shadow: var(--sh-1); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.persona:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--teal-l2); }
.persona .ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px; }
.persona .ico svg { width: 24px; height: 24px; }
.persona-role { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--teal-d); background: var(--teal-l); padding: 4px 10px; border-radius: 999px; margin-bottom: 10px; }
.persona h3 { font-size: 1.08rem; margin-bottom: 12px; }

/* ---- timeline (day in the home) ---- */
.timeline { position: relative; max-width: 760px; margin-inline: auto; padding-left: 18px; }
/* 18px padding + 64px time column + half of the 28px dot column = 96px, so the rail
   runs through the centre of .tl-dot::before instead of 10px to its left. */
.timeline::before { content: ''; position: absolute; left: 96px; top: 8px; bottom: 8px; width: 2px; background: var(--teal-l2); }
.tl-item { position: relative; display: grid; grid-template-columns: 64px 28px 1fr; align-items: start; gap: 0; margin-bottom: 18px; }
.tl-time { font-weight: 800; color: var(--teal-d); font-size: .95rem; padding-top: 16px; text-align: right; padding-right: 8px; }
.tl-dot { position: relative; }
.tl-dot::before { content: ''; position: absolute; left: 50%; top: 20px; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%; background: var(--teal); border: 3px solid #fff; box-shadow: var(--sh-1); }
.tl-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 20px; box-shadow: var(--sh-1); }
.tl-card h3 { font-size: 1.04rem; margin-bottom: 4px; }
.tl-card p { color: var(--ink-2); font-size: .94rem; }

/* ---- deep-dive cards ---- */
.deepcard { display: flex; flex-direction: column; }
.dd-benefit { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; gap: 8px;
  font-size: .92rem; font-weight: 600; color: var(--teal-d); }
.dd-benefit .dd-arrow { font-weight: 800; }

/* ---- comparison & matrix tables ---- */
.cmp-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-1); }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.cmp-table th, .cmp-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.cmp-table thead th { font-size: .9rem; font-weight: 800; color: var(--ink); background: var(--teal-l); }
.cmp-table th:not(:first-child), .cmp-table td:not(:first-child) { text-align: center; }
.cmp-table td:first-child { font-size: .94rem; color: var(--ink-2); font-weight: 600; }
.cmp-table tbody tr:last-child td { border-bottom: none; }
.cmp-table .hl-col { background: var(--teal-l); }
.cmp-table thead th.hl-col { background: var(--teal); color: #fff; }
.cmp-table .yes { color: var(--ok); font-weight: 700; font-size: .9rem; }
.cmp-table .no { color: var(--mut-2); font-weight: 600; font-size: .9rem; }
.cmp-table .part { color: var(--warn); font-weight: 700; font-size: .9rem; }
.matrix-title { text-align: center; margin-bottom: 18px; font-size: 1.25rem; }
.cmp-table.matrix { min-width: 600px; }

/* ---- ROI ---- */
.roi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.roi-col { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 26px; box-shadow: var(--sh-1); }
.roi-col.highlight { border: 2px solid var(--teal); box-shadow: var(--sh-2); background: var(--teal-l); }
.roi-col h3 { font-size: 1.05rem; margin-bottom: 12px; }
.roi-big { font-size: 2.4rem; font-weight: 800; color: var(--teal-d); letter-spacing: -.02em; margin-bottom: 8px; }
.roi-col p { color: var(--ink-2); font-size: .94rem; }
.roi-list { display: flex; flex-direction: column; gap: 10px; }
.roi-list li { display: flex; justify-content: space-between; gap: 12px; font-size: .94rem; color: var(--ink-2);
  padding-bottom: 9px; border-bottom: 1px solid var(--line-2); }
.roi-list li.roi-total { border-bottom: none; padding-top: 4px; font-weight: 800; color: var(--ink); }
.roi-list .roi-v { font-weight: 700; color: var(--teal-d); white-space: nowrap; }
.roi-list li.roi-total .roi-v { color: var(--ok); }

/* ---- security (dark) ---- */
.sec-head-light h2 { color: #fff; }
.sec-head-light .eyebrow { color: #8fd6cf; }
.sec-head-light .lead { color: #c4ddd9; }
.seccard { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-md); padding: 24px; }
.seccard .sico { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(143,214,207,.16); color: #8fd6cf; margin-bottom: 14px; }
.seccard .sico svg { width: 23px; height: 23px; }
.seccard h3 { color: #fff; font-size: 1.05rem; margin-bottom: 6px; }
.seccard p { color: #bcd5d0; font-size: .93rem; }

/* ---- trust / quotes ---- */
.quote { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px; box-shadow: var(--sh-1);
  position: relative; }
.quote::before { content: '\201C'; position: absolute; top: 6px; left: 16px; font-size: 3rem; line-height: 1;
  color: var(--teal-l2); font-weight: 800; }
.quote p { color: var(--ink); font-size: 1rem; font-weight: 600; padding-top: 18px; }
.quote-by { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: .9rem; color: var(--mut); font-weight: 700; }
.quote-illu { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--warn); background: var(--warn-bg); padding: 3px 9px; border-radius: 999px; }

/* ---- FAQ ---- */
.faq-list { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 4px 22px; box-shadow: var(--sh-1); }
.faq-item summary { cursor: pointer; list-style: none; padding: 16px 0; font-weight: 700; color: var(--ink);
  font-size: 1.02rem; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 1.4rem; font-weight: 700; color: var(--teal-d); flex: none; transition: transform .2s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { color: var(--ink-2); font-size: .96rem; padding: 0 0 18px; }

/* ---- guarantee ---- */
.grt-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px; box-shadow: var(--sh-1);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.grt-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--teal-l2); }
.grt-card .bico { width: 44px; height: 44px; border-radius: 11px; background: var(--ok-bg); color: var(--ok);
  display: grid; place-items: center; margin-bottom: 14px; }
.grt-card .bico svg { width: 23px; height: 23px; }
.grt-card h3 { font-size: 1.06rem; margin-bottom: 6px; }
.grt-card p { color: var(--ink-2); font-size: .94rem; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Reduced motion: content must be visible immediately, never animated in. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .phone--front { animation: none; }
  .btn:hover, .card:hover, .persona:hover, .grt-card:hover, .blog-card:hover { transform: none; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* responsive */

/* The nav collapses earlier than the page layout does: brand + 8 links + language
   toggle + CTA demand ~980px, so between 941px and 1060px the desktop bar used to
   spill past the viewport. This breakpoint is about the nav's own width, which is
   why it is not folded into the 940px layout query below. */
@media (max-width: 1060px) {
  /* The links move into a hamburger panel instead of vanishing. The panel is
     positioned against .nav (sticky ⇒ it is the containing block), so it spans
     the full viewport width rather than the centred .wrap. */
  .nav-toggle { display: inline-flex; }
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 2px; margin-left: 0;
    padding: 10px 20px 16px;
    background: var(--bg);
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-2);
    max-height: calc(100dvh - 68px); overflow-y: auto; overscroll-behavior: contain;
  }
  .nav.menu-open .nav-links { display: flex; }
  .nav-links a { min-height: 44px; display: flex; align-items: center; padding: 10px 12px; font-size: .98rem; }
  .nav-links .nav-cta {
    display: flex; justify-content: center; margin-top: 8px;
    background: var(--teal); color: #fff; font-weight: 700;
  }
  .nav-links .nav-cta:hover { background: var(--teal-d); color: #fff; }
}

@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .mock { transform: none; max-width: 460px; }
  .g-4 { grid-template-columns: repeat(2, 1fr); }
  .g-3, .strat-grid, .price-grid, .roi-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }

  /* Touch targets in the footer — desktop keeps its tighter rhythm. */
  footer a { display: inline-block; padding: 11px 0; line-height: 1.5; min-height: 44px; }
}
@media (max-width: 560px) {
  .g-2, .g-4 { grid-template-columns: 1fr; }
  section { padding: 64px 0; }
  .cta-band { padding: 36px 22px; }
  .stat-row { gap: 22px; }
  .timeline { padding-left: 0; }
  /* 52px time column + half of the 22px dot column = 63px, matching .tl-dot::before */
  .timeline::before { left: 63px; }
  .tl-item { grid-template-columns: 52px 22px 1fr; }
  .tl-time { font-size: .85rem; }

  /* The bar CTA is what pushed the header past the viewport (406px of content in
     350px of space). It is redundant on .nav--menu — the same action sits in the
     hamburger panel, the hero and the closing CTA band. Article pages carry no
     hamburger, so they keep their only CTA and stay well inside the viewport. */
  .nav--menu .nav-actions > .btn { display: none; }
  .nav-inner { gap: 12px; }
  .brand { font-size: 1.05rem; }

  /* Two footer columns cannot hold "kontakt@nursingcare.info": a grid item defaults
     to min-width:auto, so the unbreakable address pushed the page 47px wide at 320px. */
  .foot-grid { grid-template-columns: 1fr; gap: 26px; }
  .foot-grid > * { min-width: 0; }
  footer a { overflow-wrap: anywhere; }
  .brand .logo { width: 30px; height: 30px; }
  .lang button { padding: 0 14px; min-height: 38px; }
  .lang { padding: 0; }
}

/* Small phones (iPhone SE, 320-400px Android). The header still needed 290px of a
   280px wrap at 320px — the hamburger was clipped off the right edge, and only the
   body's overflow-x:clip hid the resulting page overflow. Tighten the header's own
   gutter and chrome, and let the wordmark truncate rather than push, so the bar
   survives a missing webfont or an enlarged system text size instead of relying on
   any exact viewport width. */
@media (max-width: 420px) {
  .nav-inner { width: min(100% - 26px, var(--maxw)); gap: 10px; }
  .brand { font-size: 1rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .brand .logo { width: 28px; height: 28px; flex: none; }
  .nav-actions { flex: none; gap: 8px; }
  .lang button { padding: 0 11px; }
  .nav-toggle { width: 42px; height: 42px; }
}

/* ---- blog article page ---- */
.article-hero { background: var(--teal-l); border-bottom: 1px solid var(--line); padding: 40px 0 34px; }
.article-back { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: .9rem; color: var(--teal-d); margin-bottom: 18px; }
.article-back svg { width: 15px; height: 15px; }
.article-cat { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--teal-d); background: #fff; border: 1px solid var(--line); padding: 5px 12px; border-radius: 999px; }
.article-hero h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 800; margin: 16px 0 10px; max-width: 760px; }
.article-meta { color: var(--mut); font-size: .9rem; }
.article { width: min(100% - 40px, 720px); margin: 46px auto 20px; }
.article > p { font-size: 1.06rem; color: var(--ink-2); margin-bottom: 18px; }
.article > p.lead-p { font-size: 1.18rem; color: var(--ink); font-weight: 500; }
.article h2 { font-size: 1.5rem; font-weight: 800; margin: 34px 0 12px; }
.article h3 { font-size: 1.15rem; font-weight: 700; margin: 24px 0 8px; }
.article ul { margin: 0 0 18px; padding-left: 4px; }
.article ul li { position: relative; padding-left: 26px; margin-bottom: 10px; color: var(--ink-2); }
.article ul li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.article blockquote { border-left: 3px solid var(--teal); background: var(--teal-l); padding: 16px 20px; border-radius: 0 var(--r) var(--r) 0; margin: 22px 0; color: var(--ink); font-size: 1.05rem; }
.article-cta { background: var(--teal-l); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; text-align: center; margin: 40px 0 10px; }
.article-cta h3 { font-size: 1.2rem; margin-bottom: 8px; }
.article-cta p { color: var(--ink-2); margin-bottom: 16px; }