*,*:before,*:after{margin:0; padding:0; box-sizing:border-box;}

html{font-size:20px; height:100%; font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;}
body{
  height:100%; color:#9aa3b2; line-height:1.6;
  background:
    radial-gradient(700px 400px at 50% 35%, rgba(220,53,69,.16), transparent 70%),
    #0e1116;
  -webkit-font-smoothing:antialiased;
}

/* ikony: jednotný linkový styl */
svg{width:1.1em; height:1.1em; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}

.box{display:flex; align-items:center; justify-content:center; height:100%; text-align:center; padding:0 20px;}

.note span{
  display:inline-flex; align-items:center; gap:.4em; font-weight:700; letter-spacing:.02em;
  background:#DC3545; color:#fff; padding:6px 22px; font-size:34px;
  border-radius:999px; box-shadow:0 8px 30px rgba(220,53,69,.35);
}
.note svg{width:.85em; height:.85em;}

h1{
  font-size:72px; font-weight:800; letter-spacing:-.03em; line-height:1.05;
  padding:24px 0 16px;
  background:linear-gradient(180deg,#fff 30%,#a9b2c3 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.text{max-width:32em; margin:0 auto; font-size:21px;}

.offer{padding:36px 0 0 0;}
.offer a{
  display:inline-flex; align-items:center; gap:.65em;
  color:#e6e9ef; text-decoration:none;
  font-weight:500; font-size:15px; letter-spacing:.02em;
  padding:12px 22px; border-radius:8px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.05);
  transition:background .2s, border-color .2s;
}
.offer a svg{width:1.2em; height:1.2em; color:#ff6b7a; transition:transform .2s;}
.offer a:hover{background:rgba(220,53,69,.14); border-color:rgba(220,53,69,.7);}
.offer a:hover svg{transform:scale(1.1);}
.offer a:focus-visible{outline:3px solid #fff; outline-offset:4px;}

@media screen and (max-width:800px){
  html{font-size:18px;}
  .note span{font-size:24px; padding:6px 18px;}
  h1{font-size:38px;}
  .offer a{font-size:14px; padding:11px 20px;}
}
@media screen and (max-height:700px){ .box{height:auto; min-height:100%; padding:40px 20px;} }
@media (prefers-reduced-motion:reduce){ .offer a, .offer a svg{transition:none;} }