:root{
  color-scheme: light;
  --bg:#f2f3f7; --bg-alt:#eceef3;
  --surface:#ffffff; --surface-2:#f7f8fb;
  --fg:#1c1e24; --muted:#454b58; --line:#e1e4ea;
  --header-bg: rgba(255,255,255,.78);

  --violet:#6f57d8; --violet-bg: rgba(111,87,216,.10);
  --blue:#2f8fd6;   --blue-bg: rgba(47,143,214,.10);
  --gold:#a97c1f;   --gold-bg: rgba(169,124,31,.12); --gold-text:#7a5613; --gold-strong:#7a5613;
  --red:#c33c30;    --red-bg: rgba(195,60,48,.10);

  --radius-lg: 20px; --radius-md: 14px; --radius-sm: 10px;
  --shadow-card: 0 1px 2px rgba(20,20,40,.06), 0 8px 20px rgba(20,20,40,.07);
  --shadow-pop: 0 12px 28px rgba(20,20,40,.14);
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0d0f12; --bg-alt:#101319;
  --surface:#151920; --surface-2:#1b2029;
  --fg:#e8eaed; --muted:#8b929c; --line:#232a34;
  --header-bg: rgba(13,15,18,.72);

  --violet:#a08bf0; --violet-bg: rgba(160,139,240,.14);
  --blue:#5ec8ff;   --blue-bg: rgba(94,200,255,.14);
  --gold:#e0b15c;   --gold-bg: rgba(224,177,92,.14); --gold-text:#e0b15c; --gold-strong:#8a6a2e;
  --red:#f0685c;    --red-bg: rgba(240,104,92,.14);

  --shadow-card: 0 1px 0 rgba(255,255,255,.02) inset, 0 8px 24px rgba(0,0,0,.35);
  --shadow-pop: 0 10px 30px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:5rem}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  transition: background .2s ease, color .2s ease;
}

img{max-width:100%; display:block}
a{color:inherit}
.wrap{max-width:1120px; margin:0 auto; padding:0 1.5rem}
@media(max-width:480px){.wrap{padding:0 1.1rem}}

.icon{width:1em; height:1em; stroke:currentColor; fill:none; stroke-width:1.6;
      stroke-linecap:round; stroke-linejoin:round; flex:none}
.icon-logo{stroke:none}
.icon-mono{fill:#181a1f; stroke:none}

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:var(--header-bg); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; height:4.2rem}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--fg); font-weight:700; letter-spacing:-.01em}
.brand img{width:28px; height:28px; object-fit:contain}
.brand span{font-size:1.02rem}
nav.primary ul{display:flex; gap:1.6rem; list-style:none; margin:0; padding:0}
nav.primary a{text-decoration:none; color:var(--muted); font-size:.92rem; font-weight:500; transition:color .15s}
nav.primary a:hover{color:var(--fg)}
.header-actions{display:flex; align-items:center; gap:1.2rem}
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.3rem; height:2.3rem; border-radius:50%;
  border:1px solid var(--line); background:var(--surface); color:var(--muted);
  cursor:pointer; font-size:1.1rem; transition:border-color .15s, color .15s;
}
.theme-toggle:hover{color:var(--fg); border-color:var(--blue)}
.theme-toggle .icon-sun{display:none}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:block}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:none}
@media(max-width:760px){ nav.primary{display:none} }

/* ---------- hero ---------- */
.hero{padding:3.4rem 0 2.6rem}
.hero .wrap{display:grid; grid-template-columns:1.25fr 1fr; gap:3rem; align-items:center}
.hero h1{text-align:center; font-size:2.5rem; margin:0 0 .5rem; letter-spacing:-.02em; line-height:1.15}
.hero .lead{text-align:center; margin:1.2rem auto 0; color:var(--muted); max-width:52ch}
.hero-photo{
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-pop);
  border:1px solid var(--line); aspect-ratio:4/5;
}
.hero-photo img{width:100%; height:100%; object-fit:cover}
@media(max-width:860px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-photo{order:-1; max-width:360px; margin:0 auto 1.5rem; aspect-ratio:1/1}
}

.chips{display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.6rem}
.chip{
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:.4rem .9rem .4rem .4rem; font-size:.88rem; font-weight:500; color:var(--fg);
}
.chip .badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.7rem; height:1.7rem; border-radius:50%; font-size:1.1rem;
  background:var(--surface-2); border:1px solid var(--line);
}
.chip .badge.brand{background:#fff; border-color:rgba(0,0,0,.12)}

/* ---------- section heading ---------- */
h2.eyebrow{font-size:.78rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--muted); margin:0 0 1.1rem; font-weight:700}
section{padding:2.2rem 0}

/* ---------- cards generic ---------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
}

/* ---------- podpora / zakázky split ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:1.3rem}
@media(max-width:780px){.split{grid-template-columns:1fr}}

.panel{padding:1.9rem 2rem; border-radius:var(--radius-lg); border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-card)}
.panel h3{margin:0 0 .6rem; font-size:1.3rem; display:flex; align-items:center; gap:.55rem}
.panel h3 .icon{width:1.3rem; height:1.3rem}
.panel p{margin:.4rem 0 0; color:var(--muted)}

.panel.podpora h3{color:var(--violet)}
.panel.zakazky h3{color:var(--gold)}

stripe-buy-button{display:block; margin-top:1.1rem}
.account{margin:.9rem 0 0; color:var(--muted); font-size:.9rem}
.account strong{color:var(--fg); font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:.01em}
.qr-amount{margin:1rem 0 0; max-width:280px}
.qr-amount label{display:block; color:var(--muted); font-size:.9rem; margin-bottom:.45rem}
.qr-amount label strong{color:var(--violet); font-weight:700; font-variant-numeric:tabular-nums}
.qr-amount input[type=range]{width:100%; accent-color:var(--violet); cursor:pointer}
.qr-pay{display:flex; flex-direction:column; align-items:flex-start; gap:.45rem; margin-top:.9rem}
.qr-box{width:132px; height:132px; border-radius:var(--radius-sm); background:#fff; padding:8px; box-sizing:border-box}
.qr-box svg, .qr-box img{display:block; width:100%; height:100%}
.qr-pay .qr-hint{color:var(--muted); font-size:.8rem; margin:0}

.job-list{list-style:none; margin:1.1rem 0 0; padding:0; display:grid; gap:.7rem}
.job-list li{display:flex; align-items:flex-start; gap:.7rem}
.job-list .badge{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:2rem; height:2rem; border-radius:50%; background:var(--gold-bg); color:var(--gold); margin-top:.05rem;
}
.job-list .badge .icon{width:1.1rem; height:1.1rem}
.job-list .job-title{font-weight:600; font-size:.95rem}
.job-list .job-desc{color:var(--muted); font-size:.87rem; margin-top:.1rem}
.job-price{margin:1.1rem 0 0; color:var(--muted); font-size:.92rem}
.job-cta{display:inline-flex; align-items:center; gap:.5rem; margin-top:1rem;
  background:var(--gold-bg); color:var(--gold-text); font-weight:700; border:1px solid var(--gold);
  text-decoration:none; border-radius:var(--radius-sm); padding:.75rem 1.2rem;
  transition:background .15s, transform .15s}
.job-cta:hover{background:var(--gold-strong); color:#fff; transform:translateY(-1px)}
.job-phone{display:inline-flex; align-items:center; gap:.5rem; margin:.7rem 0 0 .3rem;
  color:var(--muted); text-decoration:none; font-size:.92rem; font-weight:600}
.job-phone:hover{color:var(--gold)}
.job-phone .icon{width:1.05rem; height:1.05rem}

/* ---------- projekty ---------- */
.grid-projects{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem}
@media(max-width:900px){.grid-projects{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-projects{grid-template-columns:1fr}}

.project-card{
  display:flex; flex-direction:column; padding:1.7rem; text-decoration:none; color:var(--fg);
  border-radius:var(--radius-lg); border:1px solid var(--line); background:var(--surface);
  box-shadow:var(--shadow-card); transition:transform .15s, border-color .15s;
}
.project-card:hover{transform:translateY(-2px)}
.project-card .badge{
  display:inline-flex; align-items:center; justify-content:center;
  height:2.8rem; width:auto; min-width:2.8rem; padding:0 .5rem;
  border-radius:var(--radius-sm); margin-bottom:1rem;
}
.project-card .badge .icon{width:1.5rem; height:1.5rem}
.project-card .badge img{height:100%; width:auto; max-width:9rem; object-fit:contain; display:block}
.project-card.v .badge{background:var(--violet-bg); color:var(--violet)}
.project-card.b .badge{background:var(--blue-bg); color:var(--blue)}
.project-card.r .badge{background:var(--red-bg); color:var(--red)}
.project-card .name{font-weight:700; font-size:1.1rem; margin:0 0 .4rem}
.project-card .desc{color:var(--muted); font-size:.9rem; margin:0; flex:1}
.project-card .links{margin-top:1rem; display:flex; flex-direction:column; gap:.5rem}
.project-card .links a{font-size:.9rem; font-weight:600; text-decoration:none; color:var(--blue); display:flex; align-items:center; gap:.4rem}
.project-card .links a:hover{text-decoration:underline}
.project-card .links a .icon{width:1.05rem; height:1.05rem; flex:none}
.project-card .arrow{margin-top:1rem; color:var(--muted); font-size:.9rem}

/* ---------- kontakt ---------- */
.grid{display:flex; flex-wrap:wrap; gap:.6rem}
.contact-card{
  display:flex; align-items:center; gap:.6rem; text-decoration:none;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:.85rem 1rem; color:var(--fg); transition:border-color .15s, transform .15s;
  flex:0 1 calc(50% - .3rem);
}
.contact-card:hover{border-color:var(--blue); transform:translateY(-1px)}
@media(max-width:640px){.contact-card{flex-basis:100%}}
.contact-card .contact-link{
  display:flex; align-items:center; gap:.8rem; text-decoration:none; color:var(--fg);
  flex:1; min-width:0;
}
.contact-card .badge{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:2.2rem; height:2.2rem; border-radius:50%; background:var(--blue-bg); color:var(--blue);
}
.contact-card .badge.brand{background:#fff; border-color:rgba(0,0,0,.12)}
.contact-card .badge .icon{width:1.15rem; height:1.15rem}
.contact-card .text{display:flex; flex-direction:column; min-width:0}
.contact-card .name{font-weight:600}
.contact-card .desc{color:var(--muted); font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.contact-card .arrow{margin-left:auto; color:var(--muted); flex:none}
.copy-btn{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:1.9rem; height:1.9rem; border-radius:50%; border:1px solid var(--line);
  background:transparent; color:var(--muted); cursor:pointer; padding:0;
  vertical-align:middle; transition:color .15s, border-color .15s;
}
.copy-btn:hover{color:var(--blue); border-color:var(--blue)}
.copy-btn.copied{color:#1f9d68; border-color:#1f9d68}
.copy-btn .icon{width:1rem; height:1rem}
.account .copy-btn{margin-left:.5rem}

/* ---------- donate page ---------- */
.donate-page{padding:4rem 0 3rem}
.donate-wrap{max-width:520px; margin:0 auto; padding:0 1.5rem; text-align:center}
.donate-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:4rem; height:4rem; border-radius:50%;
  background:var(--violet-bg); color:var(--violet); margin-bottom:1.3rem;
}
.donate-icon .icon{width:2rem; height:2rem}
.donate-page h1{font-size:2rem; margin:0 0 .9rem; letter-spacing:-.02em}
.donate-page .lead{color:var(--muted); margin:0 auto 2.2rem; max-width:44ch}
.donate-stripe{display:flex; justify-content:center; margin-bottom:2rem}
.donate-divider{display:flex; align-items:center; gap:.9rem; margin:0 0 1.5rem; color:var(--muted); font-size:.85rem}
.donate-divider::before, .donate-divider::after{content:""; flex:1; height:1px; background:var(--line)}
.donate-page .account{display:flex; align-items:center; justify-content:center; gap:.2rem}
.donate-page .qr-amount{margin:1.5rem auto 0; text-align:left}
.donate-page .qr-pay{align-items:center; margin-top:1rem}
.back-link{display:inline-block; margin-top:2.6rem; color:var(--muted); font-size:.9rem; text-decoration:none}
.back-link:hover{color:var(--blue)}

/* ---------- footer ---------- */
footer.site{
  margin-top:1.5rem; border-top:1px solid var(--line); padding:1.6rem 0 2.4rem;
  color:var(--muted); font-size:.88rem;
}
footer.site .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.8rem}
footer.site .foot-links{display:flex; flex-wrap:wrap; gap:1.2rem}
footer.site .foot-links span{display:inline-flex; align-items:center; gap:.4rem}
footer.site a{color:var(--blue); text-decoration:none}
footer.site a:hover{text-decoration:underline}