@charset "utf-8";
/* Page marketing « Kaj je banka časa » — autonome, à la charte vzajem. */
:root{
  --paper:#EEF1EE; --ink:#14312C; --ink-soft:#3F5A54; --ink-mute:#6A827B;
  --teal:#0F6E5A; --teal-deep:#0A5546; --gold:#D9A02B; --gold-deep:#B4801A;
  --coral:#D96B4A; --sage:#C9D5CE; --line:#DCE4DF; --card:#FBFCFB;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);line-height:1.6;font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  /* Fond : glows + tuile seamless du logo (imgBg.png), adoucie par un voile paper. */
  background:
    radial-gradient(1100px 520px at 84% -8%, #DDE8E1 0%, transparent 60%),
    radial-gradient(800px 460px at 4% 108%, #E4EDE6 0%, transparent 55%),
    linear-gradient(rgba(238,241,238,.42), rgba(238,241,238,.42)),
    url("/imgBg.png") repeat,
    var(--paper);
}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.12;margin:0;text-wrap:balance}
a{color:var(--teal)}
.wrap{max-width:900px;margin:0 auto;padding:0 clamp(18px,4vw,28px)}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(251,252,251,.86);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:14px;height:58px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--teal);flex:0 0 auto}
.brand svg{width:26px;height:30px}
.brand b{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--ink)}
.top nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.langs{display:flex;gap:2px;margin-right:6px}
.langs a{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--ink-mute);text-decoration:none;padding:5px 8px;border-radius:8px}
.langs a[aria-current="true"]{color:var(--ink);background:rgba(20,49,44,.06)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:11px;
  padding:11px 18px;font-weight:700;font-size:14.5px;cursor:pointer;text-decoration:none}
.btn.primary{background:var(--teal);color:#fff}
.btn.primary:hover{background:var(--teal-deep)}
.btn.ghost{background:transparent;color:var(--teal);border:1.5px solid var(--sage)}
.btn.lg{padding:14px 26px;font-size:15.5px}

/* hero */
.hero{padding:clamp(48px,8vw,90px) 0 clamp(30px,5vw,50px)}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);font-weight:700;margin:0 0 16px}
.hero h1{font-size:clamp(36px,6.5vw,60px);letter-spacing:-.01em;margin:0 0 20px}
.hero .lead{font-size:clamp(17px,2.1vw,21px);color:var(--ink-soft);max-width:56ch;margin:0 0 30px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}

/* sections */
section{padding:clamp(34px,6vw,64px) 0;border-top:1px solid var(--line)}
.sec-eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);font-weight:700;margin:0 0 12px}
.sec-title{font-size:clamp(26px,4vw,38px);margin:0 0 14px}
.sec-lead{font-size:clamp(16px,1.9vw,18.5px);color:var(--ink-soft);max-width:60ch;margin:0 0 28px}

/* big idea callout */
.idea{background:linear-gradient(150deg,var(--ink) 0%,#1c453d 100%);color:#fff;border-radius:22px;
  padding:clamp(26px,4vw,44px);position:relative;overflow:hidden}
.idea .ring{position:absolute;right:-50px;top:-50px;width:190px;height:190px;border-radius:50%;
  border:26px solid rgba(217,160,43,.18)}
.idea h2{color:#fff;font-size:clamp(24px,3.4vw,34px);margin:0 0 12px;max-width:20ch}
.idea p{color:rgba(255,255,255,.86);font-size:clamp(16px,1.9vw,18.5px);max-width:52ch;margin:0}
.idea .pill{display:inline-flex;align-items:center;gap:8px;background:rgba(217,160,43,.16);color:var(--gold);
  border:1px solid rgba(217,160,43,.35);border-radius:999px;padding:7px 14px;font-weight:700;font-size:14px;margin-top:20px}

/* values grid */
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.val{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px}
.val .n{width:34px;height:34px;border-radius:50%;background:rgba(15,110,90,.12);color:var(--teal);
  display:grid;place-items:center;margin-bottom:14px}
.val h3{font-size:18px;margin:0 0 7px}
.val p{margin:0;font-size:15px;color:var(--ink-soft)}

/* steps */
.steps{display:grid;gap:18px;counter-reset:s}
.steps li{list-style:none;display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start}
.steps .num{width:44px;height:44px;border-radius:50%;background:var(--teal);color:#fff;display:grid;
  place-items:center;font-family:var(--serif);font-weight:700;font-size:18px}
.steps h3{font-size:18px;margin:4px 0 5px}
.steps p{margin:0;font-size:15px;color:var(--ink-soft)}

/* story */
.story{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:clamp(22px,3.5vw,36px);
  display:grid;gap:14px}
.story p{margin:0;font-size:16px;color:var(--ink-soft)}
.story .quote{font-family:var(--serif);font-size:clamp(19px,2.6vw,24px);color:var(--ink);line-height:1.35;
  border-left:3px solid var(--gold);padding-left:18px}

/* trust list */
.trust{display:grid;gap:14px}
.trust li{list-style:none;display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;
  font-size:15.5px;color:var(--ink-soft)}
.trust li b{color:var(--ink);font-weight:700}
.trust svg{color:var(--teal);flex:0 0 auto;margin-top:2px}

/* final CTA */
.final{text-align:center;border-top:1px solid var(--line)}
.final h2{font-size:clamp(28px,4.5vw,42px);margin:0 0 14px}
.final p{font-size:clamp(16px,2vw,19px);color:var(--ink-soft);max-width:48ch;margin:0 auto 26px}

/* footer */
footer{border-top:1px solid var(--line);padding:26px 0 40px;color:var(--ink-mute);font-size:13px}
footer .wrap{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
footer a{color:var(--ink-soft)}

.muted{color:var(--ink-mute);font-size:13.5px}
@media(max-width:560px){ .top .wrap{gap:8px} .brand b{font-size:20px} .btn{padding:10px 14px;font-size:13.5px} }
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
