/* ============================================================
   Tomáš Novotný — portfolio
   Paleta je záměrně monochromatická. Jediná barva na celé
   stránce žije v jedné kostce v hlavičce. Nepřidávej další.
   ============================================================ */

:root{
  --paper:#ffffff;
  --ink:#101014;
  --ash:#6e6e78;
  --line:#e9e9ec;
  --wash:#f6f6f8;
  --accent:#2e2af5;

  --display:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  --gut:clamp(20px,5vw,72px);
  --max:1240px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1.02}
p{margin:0}
img,svg{display:block;max-width:100%}

::selection{background:var(--accent);color:#fff}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--ink);color:#fff;padding:12px 18px;
}
.skip:focus{left:12px;top:12px}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ─────────────────────────  HLAVIČKA  ───────────────────────── */

.bar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:16px var(--gut);
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.bar__logo{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--ink);text-decoration:none;
  font-family:var(--display);font-weight:800;letter-spacing:-.02em;font-size:16px;
}
.bar__nav{display:flex;align-items:center;gap:6px}
.bar__nav a{
  color:var(--ash);text-decoration:none;font-size:14.5px;font-weight:500;
  padding:8px 12px;border-radius:6px;transition:color .16s,background .16s;
}
.bar__nav a:hover{color:var(--ink);background:var(--wash)}
.bar__cta{
  color:#fff !important;background:var(--ink) !important;
  padding:9px 16px !important;border-radius:7px;
}
.bar__cta:hover{background:var(--accent) !important}

/* ─────────────────────────  HERO  ───────────────────────── */

.hero{
  max-width:var(--max);margin:0 auto;
  padding:clamp(48px,9vw,110px) var(--gut) clamp(56px,8vw,100px);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,5vw,64px);align-items:center;
}

.eyebrow{
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ash);
  display:inline-flex;align-items:center;gap:9px;margin:0 0 22px;
}
.dot{width:7px;height:7px;background:var(--accent);border-radius:50%;flex:none}

.hero h1{
  font-size:clamp(42px,7.2vw,86px);
  margin-bottom:26px;
}
.hero h1 em{font-style:normal;font-weight:400;font-variation-settings:"wdth" 80}

.lede{
  max-width:44ch;color:var(--ash);font-size:clamp(16px,1.6vw,18.5px);
  margin-bottom:34px;
}

.hero__actions{display:flex;flex-wrap:wrap;gap:12px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 26px;border-radius:8px;text-decoration:none;
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  transition:background .18s,color .18s,border-color .18s,transform .18s;
}
.btn--solid{background:var(--ink);color:#fff}
.btn--solid:hover{background:var(--accent);transform:translateY(-1px)}
.btn--ghost{border:1px solid var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);transform:translateY(-1px)}

/* ── signature: izometrická stavba ── */

.stage{
  --s:clamp(58px,7.4vw,96px);
  display:grid;place-items:center;
  min-height:clamp(280px,38vw,440px);
  perspective:1400px;
  background:radial-gradient(ellipse 50% 42% at 50% 68%,rgba(16,16,20,.055),transparent 70%);
}
.scene{
  position:relative;width:var(--s);height:var(--s);
  transform-style:preserve-3d;
  transform:rotateX(calc(-30deg + var(--rx,0deg))) rotateY(calc(45deg + var(--ry,0deg)));
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.cube{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  translate:calc(var(--x) * var(--s)) calc(var(--y) * var(--s)) calc(var(--z) * var(--s));
  animation:drop .8s cubic-bezier(.18,.85,.25,1) both;
  animation-delay:var(--d,0s);
}
@keyframes drop{
  from{opacity:0;transform:translate3d(0,-90px,0)}
  to{opacity:1;transform:none}
}
.f{position:absolute;inset:0;border:1px solid #dcdce2}
.f.t{background:#ffffff;transform:rotateX(90deg) translateZ(calc(var(--s) / 2))}
.f.r{background:#f4f4f7;transform:translateZ(calc(var(--s) / 2))}
.f.l{background:#e6e6ec;transform:rotateY(-90deg) translateZ(calc(var(--s) / 2))}

.cube--accent .f{border-color:#1a17b8}
.cube--accent .f.t{background:#4b47ff}
.cube--accent .f.r{background:var(--accent)}
.cube--accent .f.l{background:#1e1bc4}

/* ─────────────────────────  SEKCE  ───────────────────────── */

.band{
  max-width:var(--max);margin:0 auto;
  padding:clamp(56px,8vw,110px) var(--gut);
  border-top:1px solid var(--line);
}
.band--wash{
  max-width:none;background:var(--wash);border-top:1px solid var(--line);
}
.band--wash > *{max-width:var(--max);margin-inline:auto}

.band__head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:clamp(28px,4vw,52px);
}
.band__head .eyebrow{margin:0}
.band__note{font-size:14px;color:var(--ash)}

/* ── case study ── */

.case{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(28px,4.5vw,60px);align-items:start;
}
.case__title{font-size:clamp(30px,4vw,50px);margin-bottom:10px}
.case__sub{color:var(--ash);font-size:16.5px;margin-bottom:22px}
.case__body{margin-bottom:28px;max-width:46ch}

.spec{margin:0 0 26px;border-top:1px solid var(--line)}
.spec > div{
  display:grid;grid-template-columns:88px minmax(0,1fr);gap:16px;
  padding:11px 0;border-bottom:1px solid var(--line);
}
.spec dt{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ash);padding-top:3px;
}
.spec dd{margin:0;font-size:15px;font-weight:500}

.link{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--ink);font-weight:600;font-size:15px;text-decoration:none;
  border-bottom:1.5px solid var(--ink);padding-bottom:2px;
  transition:color .16s,border-color .16s;
}
.link:hover{color:var(--accent);border-color:var(--accent)}

/* ── náhled projektu (mockup) ── */

.shot{position:relative}
.chrome{
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:#fff;box-shadow:0 24px 60px -28px rgba(16,16,20,.28);
}
.chrome__bar{
  display:flex;align-items:center;gap:14px;
  padding:11px 14px;border-bottom:1px solid var(--line);background:#fbfbfc;
}
.chrome__dots{display:flex;gap:6px}
.chrome__dots i{width:9px;height:9px;border-radius:50%;background:#dfdfe5}
.chrome__url{
  font-family:var(--mono);font-size:11.5px;color:var(--ash);
  background:#fff;border:1px solid var(--line);border-radius:5px;
  padding:3px 12px;
}
.chrome__view{padding:22px;background:#fff}

.mk{display:grid;gap:18px}
.mk__top{display:flex;align-items:center;justify-content:space-between}
.mk__logo{width:74px;height:11px;background:var(--ink);border-radius:2px}
.mk__nav{display:flex;gap:9px}
.mk__nav i{width:34px;height:7px;background:#e4e4ea;border-radius:2px}
.mk__hero{display:grid;gap:8px;padding:6px 0 2px}
.mk__h1{width:62%;height:19px;background:var(--ink);border-radius:3px}
.mk__h2{width:41%;height:9px;background:#dcdce3;border-radius:3px}
.mk__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mk__card{
  border:1px solid var(--line);border-radius:8px;padding:9px;
  display:grid;gap:7px;background:#fff;
}
.mk__thumb{
  height:52px;border-radius:5px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.55),transparent),
    repeating-linear-gradient(45deg,#ececf2 0 6px,#f5f5f9 6px 12px);
}
.mk__thumb--b{background:
  linear-gradient(135deg,rgba(255,255,255,.5),transparent),
  repeating-linear-gradient(-45deg,#e7e7ef 0 6px,#f3f3f8 6px 12px)}
.mk__thumb--c{background:
  linear-gradient(160deg,#4b47ff,#2e2af5)}
.mk__thumb--d{background:
  repeating-linear-gradient(0deg,#ececf2 0 5px,#f6f6fa 5px 10px)}
.mk__thumb--e{background:
  repeating-linear-gradient(90deg,#e9e9f0 0 5px,#f4f4f9 5px 10px)}
.mk__thumb--f{background:
  linear-gradient(135deg,#e4e4ec,#f7f7fa)}
.mk__l{width:70%;height:7px;background:#d9d9e1;border-radius:2px}
.mk__s{width:38%;height:6px;background:#e8e8ee;border-radius:2px}

/* ─────────────────────────  KARTY SLUŽEB  ───────────────────────── */

.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.card{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:28px 26px 24px;display:flex;flex-direction:column;
  transition:border-color .18s,transform .18s,box-shadow .18s;
}
.card:hover{
  border-color:#d3d3da;transform:translateY(-3px);
  box-shadow:0 18px 40px -26px rgba(16,16,20,.3);
}
.card h3{font-size:21px;letter-spacing:-.025em;margin-bottom:11px}
.card > p{color:var(--ash);font-size:15px;margin-bottom:18px}
.card ul{margin:0 0 22px;padding:0;list-style:none;display:grid;gap:9px}
.card li{
  position:relative;padding-left:20px;font-size:14.5px;
}
.card li::before{
  content:"";position:absolute;left:0;top:8px;
  width:7px;height:7px;background:var(--ink);
}
.card__price{
  margin-top:auto;padding-top:18px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
}
.card__price span{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.03em}
.card__price em{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--ash);letter-spacing:.06em}

.addon{
  margin-top:22px;padding:18px 22px;
  border:1px dashed #d6d6dd;border-radius:10px;
  font-size:15px;color:var(--ash);text-align:center;
}
.addon strong{color:var(--ink);font-weight:600}

/* ─────────────────────────  O MNĚ  ───────────────────────── */

.about{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,64px)}
.about__h{font-size:clamp(30px,4.4vw,54px)}
.about__body{display:grid;gap:18px;color:var(--ash);max-width:56ch;font-size:16.5px}
.about__body p:first-child{color:var(--ink)}

/* ─────────────────────────  CTA  ───────────────────────── */

.cta{text-align:center}
.cta .eyebrow{justify-content:center}
.cta__h{font-size:clamp(34px,6vw,72px);margin-bottom:20px}
.cta__p{color:var(--ash);max-width:42ch;margin:0 auto 32px}
.cta__mail{
  display:inline-block;font-family:var(--mono);font-size:clamp(14px,2vw,17px);
  color:var(--ink);text-decoration:none;
  border:1px solid var(--line);border-radius:8px;padding:12px 22px;
  margin-bottom:28px;transition:border-color .18s,color .18s;
}
.cta__mail:hover{border-color:var(--accent);color:var(--accent)}
.cta__row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ─────────────────────────  PATIČKA  ───────────────────────── */

.foot{
  max-width:var(--max);margin:0 auto;
  padding:26px var(--gut) 40px;
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
  font-size:13.5px;color:var(--ash);
}
.foot a{color:var(--ash);text-decoration:none}
.foot a:hover{color:var(--ink)}

/* ─────────────────────────  REVEAL  ───────────────────────── */

.js [data-r]{opacity:0;transform:translateY(14px)}
.js [data-r].in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.js [data-r]:nth-child(2).in{transition-delay:.06s}
.js [data-r]:nth-child(3).in{transition-delay:.12s}
.js [data-r]:nth-child(4).in{transition-delay:.18s}

/* ─────────────────────────  RESPONZIVITA  ───────────────────────── */

@media (max-width:960px){
  .hero{grid-template-columns:1fr;padding-top:44px}
  .stage{order:-1;min-height:250px}
  .case{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
}

@media (max-width:640px){
  body{font-size:16px}
  .bar{padding:12px 18px}
  .bar__logo span{display:none}
  .bar__nav a{padding:7px 9px;font-size:13.5px}
  .bar__nav a[href="#o-mne"],
  .bar__nav a[href="#sluzby"]{display:none}
  .mk__grid{grid-template-columns:repeat(2,1fr)}
  .chrome__view{padding:14px}
  .foot{flex-direction:column;gap:6px}
  .foot__mid{order:3}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js [data-r]{opacity:1;transform:none}
  .scene{transition:none}
}