:root{
  --bg:#FBFAF6;
  --bg-raised:#FFFFFF;
  --bg-sunken:#F3F1EA;
  --ink:#17231F;
  --ink-muted:#5B685F;
  --ink-faint:#8B958D;
  --line:rgba(23,35,31,0.11);
  --line-strong:rgba(23,35,31,0.20);
  --teal-900:#0B3F39;
  --teal-700:#0F6B62;
  --teal-600:#15877A;
  --teal-100:#E4F2EF;
  --amber:#AD7A2A;
  --amber-100:#F7EBD6;
  --coral:#BE4E3B;
  --coral-100:#F9E7E2;
  --slate-700:#4B5A63;
  --slate-100:#EAEDF0;
  --shadow: 0 1px 2px rgba(23,35,31,0.04), 0 10px 30px -12px rgba(23,35,31,0.14);
  --font-display: ui-serif, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1815; --bg-raised:#16211D; --bg-sunken:#0B1310;
    --ink:#ECF2EF; --ink-muted:#9FB0A9; --ink-faint:#6C7C74;
    --line:rgba(236,242,239,0.10); --line-strong:rgba(236,242,239,0.18);
    --teal-700:#2AA492; --teal-600:#38BCA9; --teal-100:rgba(42,164,146,0.16);
    --amber:#D5A24E; --amber-100:rgba(173,122,42,0.20);
    --coral:#DE8570; --coral-100:rgba(190,78,59,0.20);
    --slate-700:#B9C4CA; --slate-100:rgba(185,196,202,0.14);
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 10px 30px -12px rgba(0,0,0,0.5);
  }
}
:root[data-theme="dark"]{
  --bg:#0F1815; --bg-raised:#16211D; --bg-sunken:#0B1310;
  --ink:#ECF2EF; --ink-muted:#9FB0A9; --ink-faint:#6C7C74;
  --line:rgba(236,242,239,0.10); --line-strong:rgba(236,242,239,0.18);
  --teal-700:#2AA492; --teal-600:#38BCA9; --teal-100:rgba(42,164,146,0.16);
  --amber:#D5A24E; --amber-100:rgba(173,122,42,0.20);
  --coral:#DE8570; --coral-100:rgba(190,78,59,0.20);
  --slate-700:#B9C4CA; --slate-100:rgba(185,196,202,0.14);
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 10px 30px -12px rgba(0,0,0,0.5);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; display:block;}
a{color:inherit;}
.wrap{max-width:1160px; margin:0 auto; padding:0 28px;}
.narrow{max-width:720px;}
h1,h2,h3{font-family:var(--font-display); font-weight:600; line-height:1.12; text-wrap:balance; margin:0;}
.eyebrow{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--teal-700); font-weight:600; margin:0 0 10px;
}
.lede{color:var(--ink-muted); font-size:1.06rem; max-width:56ch; margin:14px 0 0;}
p.body-text{color:var(--ink-muted); font-size:1.02rem; margin:0 0 20px;}

/* Nav */
header.site{
  position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 0;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:700; font-size:1.08rem; color:var(--ink);}
.brand svg{width:28px; height:28px;}
.navlinks{display:flex; align-items:center; gap:4px;}
.navlinks a{
  text-decoration:none; color:var(--ink-muted); font-size:0.92rem; font-weight:500;
  padding:8px 14px; border-radius:8px; transition:background .15s, color .15s;
}
.navlinks a:hover{background:var(--bg-sunken); color:var(--ink);}
.navlinks a.current{color:var(--teal-700); font-weight:600;}
.btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-family:var(--font-body); font-weight:600; font-size:0.92rem;
  padding:10px 20px; border-radius:9px; border:1px solid transparent; cursor:pointer;
}
.btn-primary{background:var(--teal-700); color:#fff;}
.btn-primary:hover{background:var(--teal-600);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-strong);}
.btn-ghost:hover{background:var(--bg-sunken);}

/* Hero */
.hero{padding:76px 0 88px; border-bottom:1px solid var(--line);}
.hero-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:center;}
.hero h1{font-size:3rem;}
.hero-actions{display:flex; gap:12px; margin-top:32px; flex-wrap:wrap;}

/* Roster mock (homepage) */
.roster-card{background:var(--bg-raised); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); overflow:hidden;}
.roster-head{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line);}
.roster-head .title{font-weight:700; font-size:0.95rem;}
.roster-head .sub{font-family:var(--font-mono); font-size:0.72rem; color:var(--ink-faint);}
.roster-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line);}
.roster-col{background:var(--bg-raised); padding:12px 8px 14px; display:flex; flex-direction:column; gap:6px;}
.roster-col.today{background:var(--amber-100);}
.roster-daylabel{
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink-faint); display:flex; justify-content:space-between; align-items:baseline; padding:0 4px 4px;
  font-variant-numeric:tabular-nums;
}
.roster-col.today .roster-daylabel{color:var(--amber);}
.roster-daylabel .num{font-weight:700; font-size:0.82rem; color:var(--ink);}
.roster-col.today .roster-daylabel .num{color:var(--amber);}
.chip{
  font-size:0.7rem; font-weight:600; padding:6px 7px; border-radius:6px; line-height:1.25;
  opacity:0; transform:translateY(4px);
  animation:chip-in .5s ease forwards;
}
.chip.slate{background:var(--slate-100); color:var(--slate-700);}
.chip.coral{background:var(--coral-100); color:var(--coral);}
.chip.amber{background:var(--amber-100); color:var(--amber);}
@keyframes chip-in{ to{opacity:1; transform:translateY(0);} }
.roster-foot{
  display:flex; align-items:center; gap:8px; padding:12px 20px; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:0.72rem; color:var(--ink-faint);
}
.dot{width:6px; height:6px; border-radius:50%; background:var(--teal-600); flex-shrink:0;}
@media (prefers-reduced-motion: reduce){ .chip{animation:none; opacity:1; transform:none;} }

/* Ledger feature rows (used on homepage + sestry) */
.ledger{padding:88px 0; border-bottom:1px solid var(--line);}
.ledger-intro{max-width:60ch; margin-bottom:52px;}
.ledger-intro h2{font-size:2rem;}
.ledger-row{display:grid; grid-template-columns:200px 1fr; gap:32px; padding:32px 0; border-top:1px solid var(--line); align-items:baseline;}
.ledger-row:last-child{border-bottom:1px solid var(--line);}
.ledger-row .num{font-family:var(--font-mono); font-size:0.78rem; color:var(--ink-faint);}
.ledger-row .eyebrow{margin-bottom:6px;}
.ledger-row h3{font-size:1.32rem; margin-bottom:8px;}
.ledger-row p{color:var(--ink-muted); margin:0; max-width:58ch;}

/* Split section (homepage: sestry / o nas teasers) */
.split{padding:88px 0; border-bottom:1px solid var(--line);}
.split-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px;}
.split-card{
  background:var(--bg-raised); border:1px solid var(--line); border-radius:16px; padding:36px;
  display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow);
}
.split-card h3{font-size:1.5rem;}
.split-card p{color:var(--ink-muted); margin:0;}
.split-card .link{
  margin-top:auto; font-weight:600; font-size:0.9rem; color:var(--teal-700); text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
}
.split-card .link:hover{text-decoration:underline;}
.mini-shift{display:flex; gap:6px; flex-wrap:wrap;}
.mini-shift span{font-family:var(--font-mono); font-size:0.68rem; padding:4px 8px; border-radius:6px; font-weight:600;}

/* CTA banner */
.cta{padding:84px 0; text-align:center; background:var(--bg-sunken); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.cta h2{font-size:2.2rem;}
.cta p{color:var(--ink-muted); max-width:48ch; margin:16px auto 28px;}
.cta .hero-actions{justify-content:center;}

/* Inner page heading block (sestry / o-nas) */
.page-head{padding:64px 0 48px; border-bottom:1px solid var(--line);}
.page-head h1{font-size:2.5rem;}

/* Shift roster grid (sestry) */
.shift-card{background:var(--bg-raised); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; margin:44px 0 0;}
.shift-head{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line);}
.shift-head .title{font-weight:700; font-size:0.95rem;}
.shift-head .sub{font-family:var(--font-mono); font-size:0.72rem; color:var(--ink-faint);}
.shift-grid{display:grid; grid-template-columns:120px repeat(7,1fr); border-top:1px solid var(--line);}
.shift-grid > div{padding:10px 8px; border-bottom:1px solid var(--line); border-right:1px solid var(--line); font-size:0.8rem;}
.shift-grid > div:last-child{border-right:none;}
.shift-label{font-family:var(--font-mono); font-size:0.72rem; color:var(--ink-faint); display:flex; align-items:center;}
.shift-daylabel{font-family:var(--font-mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-faint); text-align:center; font-weight:700;}
.cell{display:flex; align-items:center; justify-content:center;}
.cell span{font-size:0.68rem; font-weight:600; padding:4px 7px; border-radius:6px; text-align:center;}
.cell.off span{color:var(--ink-faint); font-family:var(--font-mono); font-weight:500;}
.r{background:var(--slate-100); color:var(--slate-700);}
.o{background:var(--amber-100); color:var(--amber);}
.n{background:var(--coral-100); color:var(--coral);}

/* O nas: story + values + contact */
.story{padding:8px 0 72px; border-bottom:1px solid var(--line);}
.values{padding:64px 0 80px; border-bottom:1px solid var(--line);}
.values-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden;}
.value{background:var(--bg-raised); padding:28px 24px;}
.value .num{font-family:var(--font-mono); font-size:0.75rem; color:var(--ink-faint); margin-bottom:10px; display:block;}
.value h3{font-size:1.1rem; margin-bottom:8px;}
.value p{color:var(--ink-muted); margin:0; font-size:0.94rem;}
.contact{padding:72px 0 88px; text-align:center;}
.contact h2{font-size:1.9rem;}
.contact p{color:var(--ink-muted); max-width:46ch; margin:14px auto 26px;}

/* Demo page */
.demo-section{padding:64px 0 96px;}
.demo-grid{display:grid; grid-template-columns:1fr 420px; gap:56px; align-items:start;}
.roles{display:flex; flex-direction:column; gap:12px; margin-top:32px;}
.role{display:flex; align-items:center; gap:14px; padding:16px 18px; border:1px solid var(--line); border-radius:12px; background:var(--bg-raised);}
.role .icon{width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:0.8rem; font-weight:700; flex-shrink:0;}
.role.doc .icon{background:var(--teal-100); color:var(--teal-700);}
.role.nurse .icon{background:var(--amber-100); color:var(--amber);}
.role.support .icon{background:var(--slate-100); color:var(--slate-700);}
.role h3{font-size:1rem; font-family:var(--font-body); font-weight:700; margin-bottom:2px;}
.role p{margin:0; color:var(--ink-muted); font-size:0.88rem;}
.note{margin-top:28px; padding:14px 16px; border-radius:10px; background:var(--bg-sunken); font-size:0.85rem; color:var(--ink-muted); border:1px solid var(--line);}
.note code{font-family:var(--font-mono); background:var(--bg-raised); padding:1px 6px; border-radius:5px; border:1px solid var(--line);}
.login-card{background:var(--bg-raised); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:32px; position:sticky; top:96px;}
.login-card .tag{font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px; display:block;}
.login-card h3{font-size:1.2rem; margin-bottom:20px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:0.82rem; font-weight:600; margin-bottom:6px; color:var(--ink-muted);}
.field input{width:100%; padding:11px 13px; border-radius:9px; border:1px solid var(--line-strong); background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:0.94rem;}
.field input:focus{outline:2px solid var(--teal-600); outline-offset:1px;}
.chiprow{display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap;}
.rolechip{font-family:var(--font-mono); font-size:0.72rem; padding:7px 12px; border-radius:999px; border:1px solid var(--line-strong); background:var(--bg); cursor:pointer; color:var(--ink-muted);}
.rolechip.active{background:var(--teal-700); color:#fff; border-color:var(--teal-700);}
.login-foot{margin-top:16px; font-size:0.78rem; color:var(--ink-faint); text-align:center;}

footer{padding:48px 0 56px;}
.footer-grid{display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap;}
.footer-note{font-family:var(--font-mono); font-size:0.78rem; color:var(--ink-faint); max-width:44ch;}
.footer-links{display:flex; gap:20px; flex-wrap:wrap;}
.footer-links a{text-decoration:none; color:var(--ink-muted); font-size:0.88rem;}
.footer-links a:hover{color:var(--teal-700);}

@media (max-width: 880px){
  .hero-grid{grid-template-columns:1fr; gap:44px;}
  .hero h1{font-size:2.3rem;}
  .split-grid{grid-template-columns:1fr;}
  .ledger-row{grid-template-columns:1fr; gap:6px;}
  .navlinks{display:none;}
  .roster-grid{grid-template-columns:repeat(5,minmax(74px,1fr)); overflow-x:auto;}
  .page-head h1{font-size:2rem;}
  .shift-grid{grid-template-columns:80px repeat(7,minmax(60px,1fr)); overflow-x:auto; font-size:0.7rem;}
  .values-grid{grid-template-columns:1fr;}
  .demo-grid{grid-template-columns:1fr;}
  .login-card{position:static;}
}