/* landing.css — úvodní stránka Fanroa (Sportovní deník) */
:root{
  --paper:#f6f2ea; --paper-2:#efeadf; --paper-3:#e6e0d2; --card:#fdfbf5;
  --ink:#18211c; --ink-2:#202c24; --ink-soft:#3a443d; --ink-mute:#717a72;
  --on-ink:#f4f0e8; --on-ink-dim:rgba(244,240,232,.62);
  --rule:rgba(24,33,28,.14); --rule-strong:rgba(24,33,28,.30);
  --turf:#1f7a43; --turf-deep:#15592f; --mint:#9fe6b6;
  --clay:#c9551f; --clay-bg:rgba(201,85,31,.12);
  --gk:#c68a1e; --df:#2f6f9e; --mf:#1f7a43; --fw:#bb3f2c;
  --ui:'Manrope',system-ui,sans-serif; --display:'Bebas Neue',Impact,sans-serif;
  --r:5px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--ui); color:var(--ink);
  background:repeating-linear-gradient(90deg,transparent 0 95px,rgba(24,33,28,.035) 95px 96px),var(--paper-3);
  -webkit-font-smoothing:antialiased;
}
.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:800;
  letter-spacing:.2em; text-transform:uppercase; color:var(--clay); margin:0 0 14px; }
.eyebrow::before{ content:""; width:14px; height:14px; background:var(--clay); flex:0 0 auto; }

/* ---- buttons ---- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  font-family:var(--display); font-weight:400; font-size:16px; letter-spacing:.05em; text-transform:uppercase;
  padding:10px 20px; border-radius:var(--r); text-decoration:none; border:1px solid transparent; white-space:nowrap;
  transition:background .14s, color .14s, border-color .14s; }
.btn.lg{ font-size:19px; padding:14px 28px; }
.btn-ink{ background:var(--ink); color:var(--on-ink); }
.btn-ink:hover{ background:var(--turf); }
.btn-lime{ background:var(--turf); color:#fff; }
.btn-lime:hover{ background:var(--mint); color:var(--ink); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--rule-strong); }
.btn-ghost:hover{ border-color:var(--turf); color:var(--turf); background:rgba(31,122,67,.06); }
.btn-ghost-dark{ background:transparent; color:var(--on-ink); border-color:rgba(244,240,232,.3); }
.btn-ghost-dark:hover{ border-color:var(--mint); color:var(--mint); }

/* ===================== NAV ===================== */
.nav{ position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:26px;
  padding:14px clamp(18px,5vw,64px); background:rgba(253,251,245,.9); backdrop-filter:blur(8px);
  border-bottom:2px solid var(--ink); }
.nav-brand{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.nav-word{ font-family:var(--display); font-size:24px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); }
.nav-word em{ font-style:normal; color:var(--turf); }
.nav-links{ display:flex; gap:24px; margin-left:auto; }
.nav-links a{ font-size:13px; font-weight:800; letter-spacing:.02em; color:var(--ink-soft); text-decoration:none;
  text-transform:uppercase; white-space:nowrap; }
.nav-links a:hover{ color:var(--turf); }
.nav-cta{ display:flex; align-items:center; gap:10px; }

/* ===================== HERO ===================== */
.hero{ padding:clamp(40px,6vw,80px) clamp(18px,5vw,64px) 0; max-width:1320px; margin:0 auto; }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(36px,5vw,64px); align-items:center; }

/* hero lineup pitch */
.hero-pitch-wrap{ display:flex; justify-content:center; }
.hpitch{ width:100%; max-width:420px; background:var(--card); border:1px solid var(--rule-strong);
  border-radius:var(--r); overflow:hidden; box-shadow:12px 14px 0 rgba(24,33,28,.08); }
.hp-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 16px; background:var(--ink); color:var(--on-ink); }
.hp-bar span:first-child{ font-family:var(--display); font-size:16px; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; }
.hp-form{ font-family:var(--display); font-size:15px; letter-spacing:.05em; color:var(--ink); background:var(--on-ink); padding:2px 9px; white-space:nowrap; flex:0 0 auto; }
.hp-field{ position:relative; aspect-ratio:5/6; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 50%, rgba(8,30,18,.07) 100%),
    repeating-linear-gradient(180deg, #3a7350 0, #3a7350 9.0909%, #326647 9.0909%, #326647 18.1818%);
  border-top:3px solid var(--ink); }
.hp-line{ position:absolute; left:0; right:0; top:50%; height:1.5px; background:rgba(255,255,255,.5); }
.hp-circle{ position:absolute; top:50%; left:50%; width:22%; aspect-ratio:1; transform:translate(-50%,-50%);
  border:1.5px solid rgba(255,255,255,.5); border-radius:50%; }
.hp-box{ position:absolute; left:50%; transform:translateX(-50%); border:1.5px solid rgba(255,255,255,.5); }
.hp-box-b{ bottom:-2px; width:54%; height:15%; border-bottom:none; }
.hp-slot{ position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:4px; z-index:2;
  opacity:0; animation:hpPlace .62s cubic-bezier(.22,1.2,.4,1) both; }
.hp-slot:nth-child(4){ animation-delay:.20s; }
.hp-slot:nth-child(5){ animation-delay:.42s; }
.hp-slot:nth-child(6){ animation-delay:.56s; }
.hp-slot:nth-child(7){ animation-delay:.70s; }
.hp-slot:nth-child(8){ animation-delay:.84s; }
.hp-slot:nth-child(9){ animation-delay:1.06s; }
.hp-slot:nth-child(10){ animation-delay:1.20s; }
.hp-slot:nth-child(11){ animation-delay:1.34s; }
.hp-slot:nth-child(12){ animation-delay:1.56s; }
.hp-slot:nth-child(13){ animation-delay:1.70s; }
.hp-slot:nth-child(14){ animation-delay:1.84s; }
@keyframes hpPlace{
  0%{ opacity:0; transform:translate(-50%,-50%) translateY(-18px) scale(.5) rotate(-7deg); }
  70%{ opacity:1; transform:translate(-50%,-50%) translateY(0) scale(1.12) rotate(0deg); }
  100%{ opacity:1; transform:translate(-50%,-50%) scale(1); }
}
.hp-sub .hp-unit{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.hp-sub .u-b{ position:absolute; left:50%; top:0; transform:translateX(-50%); opacity:0; }
.hp-sub .u-a{ animation:hpSubA 9s ease-in-out infinite both; }
.hp-sub .u-b{ animation:hpSubB 9s ease-in-out infinite both; }
.hp-sub.sub-1 .u-a, .hp-sub.sub-1 .u-b{ animation-delay:.6s; }
.hp-sub.sub-2 .u-a, .hp-sub.sub-2 .u-b{ animation-delay:3.6s; }
.hp-sub.sub-3 .u-a, .hp-sub.sub-3 .u-b{ animation-delay:6.6s; }
@keyframes hpSubA{
  0%,6%{ opacity:1; transform:translateY(0) scale(1); }
  10%{ opacity:0; transform:translateY(-16px) scale(.82); }
  14%,24%{ opacity:0; transform:translateY(16px) scale(.82); }
  30%,100%{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes hpSubB{
  0%,8%{ opacity:0; transform:translateX(-50%) translateY(16px) scale(.82); }
  14%,24%{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
  28%{ opacity:0; transform:translateX(-50%) translateY(-16px) scale(.82); }
  30%,100%{ opacity:0; transform:translateX(-50%) translateY(16px) scale(.82); }
}
.hp-shirt{ position:relative; width:37px; height:37px; display:grid; place-items:center;
  font-family:var(--display); font-size:18px; color:#fff; letter-spacing:.02em;
  clip-path:polygon(28% 8%, 40% 16%, 60% 16%, 72% 8%, 92% 22%, 82% 38%, 72% 32%, 72% 96%, 28% 96%, 28% 32%, 18% 38%, 8% 22%);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.hp-shirt.gk{ background:var(--gk); } .hp-shirt.df{ background:var(--df); }
.hp-shirt.mf{ background:var(--mf); } .hp-shirt.fw{ background:var(--fw); }
.hp-shirt.cap{ animation:hpCap 2.2s ease-in-out 2.2s infinite; }
@keyframes hpCap{
  0%,100%{ filter:drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
  50%{ filter:drop-shadow(0 0 7px rgba(201,85,31,.85)) drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
}
.hp-shirt.cap::after{ content:"C"; position:absolute; top:-5px; right:-6px; width:16px; height:16px; border-radius:50%;
  background:var(--clay); color:#fff; font-family:var(--ui); font-size:9px; font-weight:900; display:grid; place-items:center;
  clip-path:none; box-shadow:0 1px 2px rgba(0,0,0,.4); }
.hp-slot i{ font-style:normal; font-size:10px; font-weight:800; color:#fff; background:rgba(8,20,14,.62);
  padding:1px 6px; border-radius:3px; white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,.5); }
@media (prefers-reduced-motion:reduce){
  .hp-slot{ opacity:1; animation:none; }
  .hp-shirt.cap, .hp-slot .hp-shirt, .hp-sub .u-a{ animation:none; }
  .hp-sub .u-b{ display:none; }
}
.hero-h1{ font-family:var(--display); font-weight:400; font-size:clamp(58px,9vw,118px); line-height:.86;
  letter-spacing:.005em; text-transform:uppercase; margin:0 0 22px; color:var(--ink); }
.hero-h1 em{ font-style:normal; color:var(--turf); }
.hero-sub{ font-size:clamp(16px,1.5vw,19px); line-height:1.6; color:var(--ink-soft); max-width:54ch; margin:0 0 28px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-actions.center{ justify-content:center; }

/* ===================== BANDS ===================== */
.band{ max-width:1320px; margin:0 auto; padding:clamp(54px,7vw,96px) clamp(18px,5vw,64px); }
.band.alt{ background:var(--paper-2); max-width:none; }
.band.alt .leagues-grid{ max-width:1320px; margin:0 auto; }
.band-head{ margin:0 0 40px; }
.band-h2{ font-family:var(--display); font-weight:400; font-size:clamp(36px,5vw,60px); line-height:.95;
  letter-spacing:.01em; text-transform:uppercase; margin:0; color:var(--ink); }
.band-sub{ font-size:17px; line-height:1.6; color:var(--ink-soft); max-width:60ch; margin:14px 0 0; }

/* steps */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.step{ background:var(--card); border:1px solid var(--rule-strong); border-top:3px solid var(--turf); border-radius:var(--r);
  padding:26px 24px 28px; box-shadow:6px 8px 0 rgba(24,33,28,.05); }
.step-n{ font-family:var(--display); font-size:44px; font-weight:400; letter-spacing:.02em; color:var(--clay); line-height:.8; display:block; margin-bottom:16px; }
.step h3{ font-family:var(--display); font-weight:400; font-size:24px; letter-spacing:.03em; text-transform:uppercase; margin:0 0 9px; color:var(--ink); }
.step p{ font-size:15px; line-height:1.6; color:var(--ink-soft); margin:0; }

/* leagues */
.leagues-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.ticks{ list-style:none; margin:22px 0 28px; padding:0; display:flex; flex-direction:column; gap:11px; }
.ticks li{ position:relative; padding-left:30px; font-size:16px; font-weight:600; color:var(--ink-soft); }
.ticks li::before{ content:""; position:absolute; left:0; top:2px; width:18px; height:18px; border-radius:50%; background:var(--turf); }
.ticks li::after{ content:""; position:absolute; left:5px; top:8px; width:7px; height:4px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg); }
.leagues-board{ background:var(--card); border:1px solid var(--rule-strong); border-radius:var(--r); overflow:hidden; box-shadow:10px 12px 0 rgba(24,33,28,.07); }
.lb-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background:var(--ink); color:var(--on-ink); }
.lb-head span:first-child{ font-family:var(--display); font-size:20px; letter-spacing:.04em; text-transform:uppercase; }
.lb-tag{ font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--on-ink-dim); border:1px solid rgba(244,240,232,.25); border-radius:3px; padding:3px 8px; }
.lb-list{ list-style:none; margin:0; padding:0; }
.lb-row{ display:flex; align-items:center; gap:13px; padding:12px 18px; border-bottom:1px solid var(--rule); }
.lb-row:last-child{ border-bottom:none; }
.lb-n{ width:24px; text-align:center; font-family:var(--display); font-size:21px; color:var(--ink-mute); }
.lb-row.lead .lb-n{ color:var(--clay); }
.lb-name{ flex:1; display:flex; align-items:center; gap:8px; font-size:14px; font-weight:800; color:var(--ink); }
.lb-pts{ font-family:var(--display); font-size:21px; letter-spacing:.02em; color:var(--ink); }
.lb-row.lead{ background:rgba(31,122,67,.08); box-shadow:inset 3px 0 0 var(--turf); }
.lb-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-top:2px solid var(--ink); background:var(--paper-2); }
.lb-pot{ display:flex; flex-direction:column; gap:2px; }
.lb-pot i{ font-style:normal; font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); }
.lb-pot b{ font-family:var(--display); font-weight:400; font-size:24px; letter-spacing:.02em; color:var(--turf); line-height:.9; }
.lb-foot-tag{ font-family:var(--display); font-size:14px; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--clay); padding:5px 11px; }

/* ===================== CTA ===================== */
.cta{ background:var(--ink); color:var(--on-ink); }
.cta-inner{ max-width:1320px; margin:0 auto; padding:clamp(60px,8vw,110px) clamp(18px,5vw,64px) clamp(40px,5vw,60px); text-align:center; }
.cta-h2{ font-family:var(--display); font-weight:400; font-size:clamp(44px,7vw,84px); line-height:.9; letter-spacing:.01em; text-transform:uppercase; margin:0 0 12px; color:var(--on-ink); }
.cta-h2 + p{ font-size:18px; color:var(--on-ink-dim); margin:0 0 30px; }

/* ===================== FOOTER ===================== */
.foot{ background:var(--ink); margin:0; padding:0 clamp(18px,5vw,64px) 30px; display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; }
.foot-copy{ font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--on-ink-dim); }

/* ===================== RESPONSIVE ===================== */
@media (max-width:920px){
  .hero-grid{ grid-template-columns:1fr; gap:36px; }
  .hero-pitch-wrap{ order:-1; }
  .hpitch{ max-width:360px; }
  .steps{ grid-template-columns:1fr; }
  .leagues-grid{ grid-template-columns:1fr; gap:32px; }
  .nav-links{ display:none; }
  .nav-cta{ margin-left:auto; }  /* odkazy skryté → CTA drží vpravo */
}
@media (max-width:560px){
  .nav{ gap:12px; padding:11px 16px; }
  .nav-cta .btn-ghost{ display:none; }
  .foot-copy{ margin-left:0; width:100%; }
}