:root{
  --bg:#0a0a0a; --surface:#161618; --surface2:#1f1f22; --ink:#f3ead8; --muted:#a79f8e;
  --gold:#c9a24b; --on-gold:#0a0a0a; --line:#2c2c30;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Inter","Helvetica Neue",Arial,sans-serif;
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#f3ead8; --surface:#eadfc6; --surface2:#e0d3b6; --ink:#161616; --muted:#5d563f;
    --gold:#8a6a1f; --on-gold:#fff8e6; --line:#cfc19f; color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#f3ead8; --surface:#eadfc6; --surface2:#e0d3b6; --ink:#161616; --muted:#5d563f;
  --gold:#8a6a1f; --on-gold:#fff8e6; --line:#cfc19f; color-scheme:light;
}
html{height:100%;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 4.5rem);scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:60}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.wrap{width:min(1120px,100%);margin:0 auto;padding:0 clamp(1.25rem,5vw,3rem)}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.1;margin:0}
p{margin:0}

/* Hlavička */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:4.2rem}
.logo{font-family:var(--serif);font-weight:700;font-size:1.35rem;text-decoration:none;letter-spacing:.02em}
.logo b{color:var(--gold)}
.menu{display:flex;align-items:center;gap:1.6rem}
.menu a{font-size:.95rem;text-decoration:none;color:var(--muted)}
.menu a:hover{color:var(--ink)}
.menu a.cta{color:var(--on-gold);background:var(--gold);padding:.55rem 1.1rem;border-radius:.4rem;font-weight:600}
.menu a.cta:hover{filter:brightness(1.1)}
.burger{display:none;background:none;border:1px solid var(--line);color:var(--ink);border-radius:.4rem;padding:.5rem .8rem;font:inherit;font-size:.95rem;cursor:pointer}

/* Úvod */
.hero{padding:clamp(3.5rem,11vw,8rem) 0 clamp(3.5rem,9vw,6rem)}
.brand{font-family:var(--serif);font-weight:700;letter-spacing:-.03em;line-height:.9;font-size:clamp(4rem,19vw,13rem)}
.brand b{color:var(--gold)}
.rule{height:2px;background:var(--gold);width:100%;max-width:100%;transform-origin:left;animation:draw 1.3s cubic-bezier(.2,.7,.2,1) both;margin:1.2rem 0 1.4rem}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.tag{font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.hero h2{font-size:clamp(2rem,5.2vw,3.6rem);margin:2.4rem 0 1.1rem;max-width:18ch;font-weight:500}
.hero .lead{max-width:36rem;color:var(--muted);font-size:1.15rem;margin-bottom:2rem}
.btn{display:inline-block;font:inherit;font-weight:600;text-decoration:none;cursor:pointer;border:1px solid var(--gold);background:var(--gold);color:var(--on-gold);padding:.9rem 1.6rem;border-radius:.4rem;transition:background .15s,color .15s}
.btn:hover{background:transparent;color:var(--gold)}
.btn.ghost{background:transparent;color:var(--gold)}
.btn.ghost:hover{background:var(--gold);color:var(--on-gold)}
.motto{margin-top:2.2rem;color:var(--muted);font-family:var(--serif);font-style:italic;font-size:1.1rem}

/* Sekce */
section{padding:clamp(3rem,8vw,6rem) 0;border-top:1px solid var(--line)}
.head{margin-bottom:clamp(1.8rem,4vw,3rem);max-width:40rem}
.head h2{font-size:clamp(1.9rem,4.4vw,3rem)}
.head p{color:var(--muted);margin-top:.9rem}
.eyebrow{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem;display:block}

/* Služby */
.svc{list-style:none;margin:0;padding:0}
.svc li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:1.5rem;align-items:baseline;padding:1.6rem 0;border-top:1px solid var(--line)}
.svc li:last-child{border-bottom:1px solid var(--line)}
.svc h3{font-size:clamp(1.4rem,3vw,2rem);font-weight:500}
.svc p{color:var(--muted)}

/* Portfolio */
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
.tile{position:relative;min-height:15rem;border-radius:.5rem;padding:1.3rem;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;border:1px solid var(--line);grid-column:span 2}
.tile:nth-child(1){grid-column:span 4;min-height:20rem}
.tile:nth-child(2){grid-column:span 2}
.tile:nth-child(3){grid-column:span 3}
.tile:nth-child(4){grid-column:span 3}
.tile::before{content:"";position:absolute;left:1.3rem;right:1.3rem;top:1.3rem;height:.55rem;border-top:2px solid color-mix(in srgb,var(--ink) 35%,transparent);border-bottom:2px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.t1{background:linear-gradient(160deg,#2a2118,#0f0c09 70%)}
.t2{background:linear-gradient(200deg,#16222b,#0b1015 75%)}
.t3{background:linear-gradient(140deg,#2b1a1a,#120a0a 70%)}
.t4{background:linear-gradient(210deg,#1d1d1d,#101010 70%)}
.tile h3,.tile p{color:#f3ead8}
.tile h3{font-size:clamp(1.4rem,3vw,2rem);font-weight:500}
.tile p{font-size:.95rem;opacity:.75;margin-top:.3rem}
.badge{align-self:flex-start;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid #c9a24b;color:#c9a24b;padding:.2rem .6rem;border-radius:999px;margin-bottom:.8rem}
.note{margin-top:1.4rem;color:var(--muted);font-size:.95rem}

/* O mně */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(2rem,6vw,5rem)}
.about h2{font-size:clamp(1.9rem,4.4vw,3rem);font-weight:500}
.about .body p{margin-bottom:1.1rem;max-width:36rem}
.about .body p:last-child{margin:0;font-family:var(--serif);font-size:1.3rem;color:var(--gold)}

/* Reference */
.trust{background:var(--surface);border-left:3px solid var(--gold);padding:clamp(1.5rem,4vw,2.6rem);border-radius:0 .5rem .5rem 0;max-width:46rem}
.trust h2{font-size:clamp(1.7rem,4vw,2.4rem);font-weight:500;margin-bottom:.9rem}
.trust p{color:var(--muted)}

/* Spolupráce – skutečná posloupnost */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;grid-template-columns:repeat(5,1fr);gap:1.2rem}
.steps li{counter-increment:s;border-top:2px solid var(--gold);padding-top:1rem}
.steps li::before{content:counter(s);font-family:var(--serif);font-size:1.6rem;color:var(--gold);display:block;margin-bottom:.4rem}
.steps h3{font-size:1.2rem;font-family:var(--sans);font-weight:600;margin-bottom:.4rem}
.steps p{color:var(--muted);font-size:.95rem;line-height:1.55}

/* Ceník */
.tbl{width:100%;max-width:46rem;border-collapse:collapse}
.tbl th,.tbl td{text-align:left;padding:1rem .8rem;border-bottom:1px solid var(--line)}
.tbl th{font-weight:500;color:var(--muted);font-size:.9rem}
.tbl td:last-child,.tbl th:last-child{text-align:right;color:var(--gold)}

/* Kontakt */
form{display:grid;gap:1rem;max-width:36rem;margin-top:1.8rem}
label{display:grid;gap:.4rem;font-size:.92rem;color:var(--muted)}
input,select,textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:.4rem;padding:.8rem .9rem;width:100%}
textarea{min-height:8rem;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 40%,transparent)}
#msg{color:var(--gold);font-size:.95rem;margin-bottom:.8rem}
.choices{display:flex;flex-wrap:wrap;gap:.7rem}
.choices .btn{padding:.7rem 1.1rem;font-size:.95rem}
footer{padding:2rem 0;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem}

@media (max-width:900px){
  .burger{display:block}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);flex-direction:column;align-items:flex-start;gap:1rem;padding:1.2rem clamp(1.25rem,5vw,3rem);border-bottom:1px solid var(--line)}
  .menu.open{display:flex}
  .steps{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .svc li,.about{grid-template-columns:1fr;gap:.5rem}
  .about{gap:1.4rem}
  .grid{grid-template-columns:1fr}
  .tile,.tile:nth-child(n){grid-column:auto;min-height:13rem}
  .steps{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rule{animation:none}
  *{transition:none!important}
}