/* dd/hero – v3: veľký H1, stroj vpravo viditeľný, šikmý spodok, vrtná trasa s kótou (docs/DIZAJN-V3-SPEC.md) */
.hero{--sikmo:48px;position:relative;z-index:1;min-height:680px;display:flex;align-items:flex-end;overflow:hidden;background:var(--navy);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--sikmo)),0 100%);margin-bottom:calc(var(--sikmo) * -1)}
.hero .media{position:absolute;inset:0}
.hero .media img,.hero .media video{width:100%;height:100%;object-fit:cover;object-position:62% 50%;display:block}
.hero .media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000253f7 0%,#000253e6 34%,#0002538c 56%,#00025326 80%,#00025300 100%),linear-gradient(0deg,#000253 0%,#000253d9 20%,#00025300 48%)}
.hero .in{position:relative;max-width:var(--container);margin:0 auto;padding:104px 24px calc(48px + var(--sikmo));width:100%}
.hero .box{max-width:800px}
.hero h1{margin:16px 0 24px;font-size:var(--h1);line-height:.98;letter-spacing:-.25px;text-transform:uppercase}
.hero .lead{color:var(--on-navy-muted);max-width:560px;margin:0 0 36px}
.hero .cta{display:flex;gap:var(--space-4);flex-wrap:wrap;align-items:center}
.hero .vid{display:inline-flex;align-items:center;gap:var(--space-3);min-height:48px;color:var(--on-navy);text-decoration:none;font-size:15px;font-weight:600;margin-left:var(--space-2)}
.hero .vid .pl{width:48px;height:48px;border-radius:var(--radius-full);border:2px solid var(--on-navy-muted);display:inline-flex;align-items:center;justify-content:center;flex:none;transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out)}
.hero .vid .pl .dd-ic,.hero .vid .pl svg{width:22px;height:22px}
.hero .vid:hover .pl{background:var(--yellow);border-color:var(--yellow);color:var(--on-yellow)}
/* Vrtná trasa: terén s pravítkom, jamy, oblúk vrtu pod povrchom a kóta */
.hero .trasa{position:relative;height:64px;margin-top:56px;border-top:1px solid #ffffff59}
.hero .trasa::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;background:repeating-linear-gradient(90deg,#ffffff40 0 1px,transparent 1px 24px)}
.hero .trasa svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:dd-vrt 1.6s var(--ease-io) .4s both}
.hero .vrt{fill:none;stroke:var(--yellow);stroke-width:3;stroke-linecap:round;stroke-dasharray:.011 .007}
.hero .j{position:absolute;top:-1px;width:16px;height:12px;border:2px solid var(--yellow);border-top:0}
.hero .j0{left:4px}
.hero .j1{right:4px;animation:dd-jama .35s var(--ease-out) 1.9s both}
.hero .kota{position:absolute;left:50%;top:20px;transform:translateX(-50%);padding:0 14px;font-family:var(--font-mono);font-size:12px;line-height:16px;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;color:var(--on-navy)}
.hero .kota::before,.hero .kota::after{content:"";position:absolute;top:7px;width:96px;height:1px;background:#ffffff59}
.hero .kota::before{right:100%}
.hero .kota::after{left:100%}
@keyframes dd-vrt{from{clip-path:inset(0 100% -20px 0)}to{clip-path:inset(0 0 -20px 0)}}
@keyframes dd-jama{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* Parametre ako technický pás */
.hero .strip{position:relative;margin:20px 0 0;display:grid;grid-template-columns:repeat(4,1fr)}
.hero .strip div{padding:4px 20px 0;border-left:1px solid #ffffff2e}
.hero .strip div:first-child{border-left:0;padding-left:0}
.hero .strip b{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(32px,3.2vw,46px);line-height:1;letter-spacing:-.5px;color:var(--on-navy)}
.hero .strip b em{font-style:normal;color:var(--yellow)}
.hero .strip span{display:block;margin-top:8px;font-size:14px;line-height:18px;color:var(--on-navy-muted)}
.hero .acc{position:absolute;left:0;bottom:0;width:240px;height:6px;background:var(--yellow)}
@media (max-width:1023px){
  .hero .strip{grid-template-columns:repeat(2,1fr);row-gap:var(--space-5)}
  .hero .strip div:nth-child(odd){border-left:0;padding-left:0}
  .hero .media::after{background:linear-gradient(180deg,#000253e0 0%,#000253c2 50%,#000253f5 100%)}
}
/* Textový odkaz pod tlačidlami (napr. „Od čoho závisí cena“, zámer „cena“ = 29 % klikov v Ads) */
.hero .hero-odkaz{display:inline-flex;align-items:center;gap:var(--space-2);margin-top:var(--space-4);min-height:44px;color:var(--on-navy);font-weight:600;text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:5px}
.hero .hero-odkaz:hover{color:var(--yellow)}
.hero .hero-odkaz:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
@media (max-width:767px){
  .hero{--sikmo:24px;min-height:0}
  .hero .in{padding:40px 16px calc(28px + var(--sikmo))}
  .hero h1{font-size:clamp(36px,10.6vw,52px);margin:var(--space-3) 0 var(--space-4)}
  .hero .lead{margin-bottom:var(--space-5)}
  .hero .cta{flex-direction:column;align-items:stretch}
  .hero .cta .dd-btn{width:100%}
  .hero .vid{margin-left:0}
  .hero .trasa{margin-top:36px;height:52px}
  .hero .kota{top:16px;font-size:10px;padding:0}
  .hero .kota::before,.hero .kota::after{display:none}
  .hero .strip{margin-top:12px;row-gap:var(--space-4)}
  .hero .strip div{padding:var(--space-2) 0 0 var(--space-3)}
  .hero .strip b{font-size:30px}
  .hero .hero-odkaz{margin-top:var(--space-2)}
  .hero .acc{width:120px}
}
/* Telefón: dekoratívna trasa skrytá (kóta opakuje 1. číslo), čísla bližšie k výzvam – prvá obrazovka = H1, veta, výzvy, čísla */
@media (max-width:479px){
  .hero .trasa{display:none}
  .hero .strip{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid #ffffff2e}
  .hero .strip b{font-size:28px}
  .hero .strip span{margin-top:4px;font-size:13px;line-height:17px}
}