#tbh-hero, #tbh-hero * { box-sizing: border-box; margin: 0; padding: 0; }
  #tbh-hero {
    --tbh-ink: #2a2318;
    --tbh-muted: rgba(42, 35, 24, .66);
    --tbh-gold: #c8951a;
    --tbh-gold-deep: #7a5a0e;
    --tbh-line: rgba(122, 90, 14, .32);
    --tbh-pad: clamp(20px, 5vw, 64px);
    position: relative; isolation: isolate; overflow: clip;
    display: flex; align-items: center; justify-content: center;
    min-height: clamp(500px, calc(100svh - 170px), 700px);
    padding: clamp(16px, 2.2vh, 28px) var(--tbh-pad) clamp(18px, 2.4vh, 30px);
    background: #f6efe3;
    color: var(--tbh-ink);
    font-family: 'Barlow', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-align: center;
  }

  /* ---- plate ---- */
  #tbh-hero .tbh-bg { position: absolute; inset: 0; z-index: 0; }
  #tbh-hero .tbh-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
  /* fade into the white media-logo strip that follows */
  #tbh-hero::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 130px; z-index: 1;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
  }
  #tbh-hero .tbh-grain {
    position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
  }

  /* ---- golden motes drifting up through the rays ---- */
  #tbh-hero .tbh-motes { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
  #tbh-hero .tbh-mote {
    position: absolute; bottom: -6%; border-radius: 50%; opacity: 0;
    background: radial-gradient(circle, rgba(255, 246, 212, .95), rgba(255, 246, 212, 0) 70%);
    animation: tbhMoteRise linear infinite;
  }
  @keyframes tbhMoteRise {
    0% { transform: translateY(0); opacity: 0; }
    12% { opacity: .8; }
    55% { opacity: .45; }
    100% { transform: translateY(-115%); opacity: 0; }
  }
  #tbh-hero .tbh-mote:nth-child(1)  { left: 7%;  width: 5px; height: 5px; animation-duration: 17s; animation-delay: 0s; }
  #tbh-hero .tbh-mote:nth-child(2)  { left: 15%; width: 7px; height: 7px; animation-duration: 21s; animation-delay: 4s; }
  #tbh-hero .tbh-mote:nth-child(3)  { left: 24%; width: 4px; height: 4px; animation-duration: 15s; animation-delay: 8s; }
  #tbh-hero .tbh-mote:nth-child(4)  { left: 33%; width: 8px; height: 8px; animation-duration: 24s; animation-delay: 2s; }
  #tbh-hero .tbh-mote:nth-child(5)  { left: 42%; width: 5px; height: 5px; animation-duration: 18s; animation-delay: 11s; }
  #tbh-hero .tbh-mote:nth-child(6)  { left: 51%; width: 6px; height: 6px; animation-duration: 20s; animation-delay: 6s; }
  #tbh-hero .tbh-mote:nth-child(7)  { left: 60%; width: 4px; height: 4px; animation-duration: 14s; animation-delay: 9s; }
  #tbh-hero .tbh-mote:nth-child(8)  { left: 68%; width: 9px; height: 9px; animation-duration: 26s; animation-delay: 1s; }
  #tbh-hero .tbh-mote:nth-child(9)  { left: 76%; width: 5px; height: 5px; animation-duration: 16s; animation-delay: 13s; }
  #tbh-hero .tbh-mote:nth-child(10) { left: 84%; width: 6px; height: 6px; animation-duration: 22s; animation-delay: 5s; }
  #tbh-hero .tbh-mote:nth-child(11) { left: 91%; width: 4px; height: 4px; animation-duration: 15s; animation-delay: 10s; }
  #tbh-hero .tbh-mote:nth-child(12) { left: 97%; width: 7px; height: 7px; animation-duration: 19s; animation-delay: 3s; }

  #tbh-hero .tbh-inner {
    position: relative; z-index: 2; width: 100%; max-width: 1180px;
    display: flex; flex-direction: column; align-items: center;
  }

  /* ---- the glow field: the figure, and the field as nothing but its boundary ---- */
  #tbh-hero .tbh-field {
    position: relative; z-index: 2;
    width: clamp(196px, 31vh, 310px); height: clamp(196px, 31vh, 310px);
    display: grid; place-items: center;
  }
  /* the ring is drawn here rather than baked into the asset, so "subtle" stays tunable:
     a hairline boundary and a faint outer bloom, nothing filling the inside */
  @keyframes tbhFieldPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.012); opacity: .82; } }
  #tbh-hero .tbh-field::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    border: 1px solid rgba(200, 149, 26, .42);
    box-shadow: 0 0 16px 1px rgba(224, 164, 34, .18);
    animation: tbhFieldPulse 7s ease-in-out infinite;
  }
  #tbh-hero .tbh-figure { display: block; height: clamp(149px, 23.5vh, 236px); width: auto; max-width: none; }

  /* ---- copy ---- */
  @keyframes tbhIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  #tbh-hero .tbh-copy { display: flex; flex-direction: column; align-items: center; margin-top: clamp(4px, 0.8vh, 10px); }
  #tbh-hero .tbh-h1 {
    font-size: clamp(26px, 3.2vw, 42px); font-weight: 800; line-height: 1.07; letter-spacing: -.02em;
    color: var(--tbh-ink); margin-bottom: 8px; text-wrap: balance; max-width: 24ch;
  }
  #tbh-hero .tbh-h1 .tbh-gold { color: var(--tbh-gold-deep); }
  #tbh-hero .tbh-sub {
    font-size: clamp(14.5px, 1.4vw, 17px); font-weight: 400; color: var(--tbh-muted); line-height: 1.5;
    max-width: 50ch; margin-bottom: clamp(9px, 1.3vh, 13px);
  }
  #tbh-hero .tbh-sub strong { color: var(--tbh-ink); font-weight: 600; }

  /* ---- capture ---- */
  #tbh-hero .tbh-capture { width: 100%; max-width: 540px; }
  #tbh-hero .tbh-row { display: flex; gap: 10px; }
  #tbh-hero .tbh-row input[type="email"] {
    flex: 1; min-width: 0; font: inherit; font-size: 16px; line-height: 1.2; color: var(--tbh-ink);
    background: rgba(255, 255, 255, .9); border: 1px solid var(--tbh-line); border-radius: 999px;
    padding: 15px 22px; outline: none; text-align: left; height: auto;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  #tbh-hero .tbh-row input[type="email"]::placeholder { color: rgba(42, 35, 24, .38); }
  #tbh-hero .tbh-row input[type="email"]:focus { border-color: var(--tbh-gold); box-shadow: 0 0 0 3px rgba(200, 149, 26, .25); }
  #tbh-hero .tbh-row button {
    font: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; white-space: nowrap;
    color: #1c1405; background: var(--tbh-gold); border: 0; border-radius: 999px;
    padding: 15px 28px; cursor: pointer; height: auto;
    box-shadow: 0 10px 26px -10px rgba(138, 100, 16, .55);
    transition: filter .2s ease, transform .15s ease;
  }
  #tbh-hero .tbh-row button:hover { filter: brightness(1.12); }
  #tbh-hero .tbh-row button:active { transform: scale(.98); }
  #tbh-hero .tbh-row button:disabled { opacity: .6; cursor: wait; }
  #tbh-hero .tbh-hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
  #tbh-hero .tbh-note { margin-top: 8px; font-size: clamp(11.5px, 1.15vw, 13px); color: var(--tbh-muted); line-height: 1.55; }
  #tbh-hero .tbh-note a { color: var(--tbh-muted); text-decoration: underline; text-underline-offset: 2px; }
  #tbh-hero .tbh-err { display: none; margin-top: 10px; font-size: 14px; color: #a8321f; }

  /* ---- thank-you ---- */
  #tbh-hero .tbh-done { display: none; max-width: 540px; }
  #tbh-hero .tbh-done h2 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px; color: var(--tbh-ink); }
  #tbh-hero .tbh-num { font-size: clamp(38px, 5vw, 62px); font-weight: 800; color: var(--tbh-gold-deep); letter-spacing: -.02em; line-height: 1.1; margin: 8px 0 12px; }
  #tbh-hero .tbh-done p { font-size: 15px; color: var(--tbh-muted); line-height: 1.55; max-width: 46ch; margin: 0 auto; }
  #tbh-hero .tbh-share {
    margin-top: 18px; font: inherit; font-size: 15px; font-weight: 600; color: var(--tbh-gold-deep);
    background: rgba(255, 255, 255, .6); border: 1px solid var(--tbh-line); border-radius: 999px;
    padding: 12px 24px; cursor: pointer; transition: border-color .2s ease, color .2s ease;
  }
  #tbh-hero .tbh-share:hover { border-color: var(--tbh-gold); color: var(--tbh-ink); }

  /* ---- bottom strip: countdown + proof, side by side on the banner's width ---- */
  #tbh-hero .tbh-strip {
    display: flex; flex-direction: column; align-items: center;
    gap: clamp(7px, 0.9vh, 10px); margin-top: clamp(8px, 1.1vh, 12px);
  }
  #tbh-hero .tbh-count { display: flex; flex-direction: column; align-items: center; gap: 7px; }
  #tbh-hero .tbh-count-label { font-size: clamp(10px, 1.05vw, 11.5px); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--tbh-gold-deep); }
  #tbh-hero .tbh-cells { display: flex; align-items: stretch; gap: clamp(5px, .8vw, 9px); }
  #tbh-hero .tbh-cell {
    text-align: center; position: relative; min-width: clamp(46px, 5vw, 62px); padding: 7px 6px 5px;
    background: rgba(255, 255, 255, .6); border: 1px solid rgba(200, 149, 26, .45); border-radius: 13px;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: 0 8px 22px -12px rgba(122, 90, 14, .35), inset 0 1px 0 rgba(255, 255, 255, .8);
    perspective: 320px;
  }
  #tbh-hero .tbh-cell b { display: block; font-size: clamp(19px, 2.3vw, 28px); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--tbh-ink); }
  #tbh-hero .tbh-cell span { font-size: 10px; color: var(--tbh-muted); letter-spacing: .08em; text-transform: uppercase; }
  #tbh-hero .tbh-cell b.tick { animation: tbhNumDrop .5s cubic-bezier(.2, .75, .25, 1); }
  @keyframes tbhNumDrop {
    0% { transform: rotateX(78deg) translateY(-8px); opacity: 0; filter: blur(3px); }
    60% { filter: none; }
    100% { transform: none; opacity: 1; }
  }
  #tbh-hero .tbh-cell.tick { animation: tbhCellGlow .55s ease-out; }
  @keyframes tbhCellGlow {
    0% { box-shadow: 0 8px 22px -12px rgba(122, 90, 14, .35), inset 0 1px 0 rgba(255, 255, 255, .8); }
    35% { box-shadow: 0 0 26px 3px rgba(232, 190, 90, .6), inset 0 1px 0 rgba(255, 255, 255, .8); }
    100% { box-shadow: 0 8px 22px -12px rgba(122, 90, 14, .35), inset 0 1px 0 rgba(255, 255, 255, .8); }
  }
  #tbh-hero .tbh-sep {
    align-self: center; padding-bottom: 13px; font-weight: 800; font-size: clamp(15px, 1.8vw, 21px);
    color: var(--tbh-gold-deep); animation: tbhBlink 1s steps(2, jump-none) infinite;
  }
  @keyframes tbhBlink { 50% { opacity: .22; } }

  /* proof badge cards, teaser pattern */
  /* proof, one compact line: the two stacked cards were the heaviest block on the banner */
  #tbh-hero .tbh-proof { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 16px; }
  #tbh-hero .tbh-proof-item { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: var(--tbh-muted); font-size: clamp(11.5px, 1.15vw, 13px); line-height: 1.3; white-space: nowrap; transition: color .2s ease; }
  #tbh-hero .tbh-proof-item:hover { color: var(--tbh-ink); }
  #tbh-hero .tbh-proof-item b { color: var(--tbh-ink); font-weight: 700; }
  #tbh-hero .tbh-proof-seal { width: 24px; height: 24px; display: block; flex-shrink: 0; }
  #tbh-hero .tbh-proof-fb { width: 20px; height: 20px; border-radius: 50%; background: #1877F2; display: grid; place-items: center; flex-shrink: 0; }
  #tbh-hero .tbh-proof-fb svg { width: 12px; height: 12px; fill: #fff; display: block; }
  #tbh-hero .tbh-proof-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(122, 90, 14, .35); }

  /* keeps the site's floating "Objednať HIT" pill on its original scroll trigger
     (hit-launch-homepage.js observes .hl-cta .hl-btn-p; without a target it would
     pin the pill open from the first paint) */
  #tbh-hero .hl-cta {
    display: block !important; width: 2px !important; height: 2px !important; margin: -2px auto 0 !important;
    padding: 0 !important; opacity: 0 !important; pointer-events: none; overflow: hidden;
  }
  #tbh-hero .hl-cta .hl-btn-p {
    display: block !important; width: 2px !important; height: 2px !important; min-height: 0 !important;
    padding: 0 !important; margin: 0 !important; border: 0 !important; font-size: 0 !important; background: none !important;
  }

  /* ---- short desktop ---- */
  @media (min-width: 981px) and (max-height: 820px) {
    #tbh-hero { min-height: 0; }
    #tbh-hero .tbh-h1 { font-size: clamp(26px, 3.2vw, 40px); }
    #tbh-hero .tbh-note br { display: none; }
    /* buys back the 18px the hint icon costs, so the countdown clears 800px */
    #tbh-hero .tbh-field { width: clamp(170px, 25vh, 226px); height: clamp(170px, 25vh, 226px); }
    #tbh-hero .tbh-figure { height: clamp(129px, 19vh, 172px); }
    #tbh-hero .tbh-copy { margin-top: 6px; }
    #tbh-hero .tbh-strip { margin-top: 10px; }
  }

  /* ---- mobile ---- */
  @media (max-width: 980px) {
    #tbh-hero { min-height: 0; padding-top: clamp(24px, 4vh, 40px); }
    #tbh-hero .tbh-h1 { font-size: clamp(26px, 6.6vw, 36px); max-width: 15ch; }
    #tbh-hero .tbh-sub { font-size: 15.5px; }
    #tbh-hero .tbh-row { flex-direction: column; }
    #tbh-hero .tbh-field { width: clamp(170px, 27vh, 250px); height: clamp(170px, 27vh, 250px); }
    #tbh-hero .tbh-figure { height: clamp(129px, 20.5vh, 190px); }
    #tbh-hero .tbh-strip { margin-top: 8px; }
  }
  @media (max-width: 700px) and (max-height: 760px) {
    #tbh-hero { padding-top: 20px; padding-bottom: 26px; }
    #tbh-hero .tbh-field { width: 170px; height: 170px; }
    #tbh-hero .tbh-figure { height: 129px; }
    #tbh-hero .tbh-sub { margin-bottom: 12px; }
  }
  @media (prefers-reduced-motion: reduce) {
    #tbh-hero *, #tbh-hero *::after { transition: none !important; animation: none !important; }
  }

  #tbh-hero .tbh-h1 .gold { color: var(--tbh-gold-deep); }

  /* Nette newsletter form — same pills as agency .tbh-row */
  #tbh-hero .ibt-form label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  #tbh-hero .ibt-nl { width: 100%; max-width: 540px; }
  #tbh-hero .ibt-form { width: 100%; display: flex; flex-direction: column; align-items: stretch; }
  #tbh-hero .form-row {
    display: flex; flex-direction: row; flex-wrap: nowrap;
    align-items: stretch; gap: 10px;
  }
  #tbh-hero .form-row input[type="email"] {
    flex: 1; min-width: 0; font: inherit; font-size: 16px; line-height: 1.2; color: var(--tbh-ink);
    background: rgba(255, 255, 255, .9); border: 1px solid var(--tbh-line); border-radius: 999px;
    padding: 15px 22px; outline: none; text-align: left; height: auto;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  #tbh-hero .form-row input[type="email"]::placeholder { color: rgba(42, 35, 24, .38); }
  #tbh-hero .form-row input[type="email"]:focus { border-color: var(--tbh-gold); box-shadow: 0 0 0 3px rgba(200, 149, 26, .25); }
  #tbh-hero .form-row input[type="email"]:user-invalid,
  #tbh-hero .form-row input[type="email"].error,
  #tbh-hero .form-row input[type="email"].form--control-error { border-color: #a8321f; }
  #tbh-hero .form-row > .error,
  #tbh-hero .form-row > .form--error,
  #tbh-hero .ibt-form > .error,
  #tbh-hero .ibt-form > .form--error { display: none; }
  #tbh-hero .form-error-host {
    width: 100%; margin-top: 8px; font-size: 14px; font-weight: 500;
    color: #a8321f; line-height: 1.4; text-align: left;
  }
  #tbh-hero .form-error-host:empty { display: none; margin: 0; }
  #tbh-hero .form-error-host .form--error,
  #tbh-hero .form-error-host .error { display: block; margin: 0; color: inherit; font: inherit; font-weight: 500; }
  #tbh-hero .form-row button,
  #tbh-hero .form-row input[type="submit"] {
    flex: 0 0 auto; font: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; white-space: nowrap;
    color: #1c1405; background: var(--tbh-gold); border: 0; border-radius: 999px;
    padding: 15px 28px; cursor: pointer; height: auto;
    box-shadow: 0 10px 26px -10px rgba(138, 100, 16, .55);
    transition: filter .2s ease, transform .15s ease;
  }
  #tbh-hero .form-row button:hover,
  #tbh-hero .form-row input[type="submit"]:hover { filter: brightness(1.12); }
  #tbh-hero .form-row button:active,
  #tbh-hero .form-row input[type="submit"]:active { transform: scale(.98); }
  #tbh-hero .form-row button:disabled,
  #tbh-hero .form-row input[type="submit"]:disabled { opacity: .6; cursor: wait; }
  #tbh-hero .ibt-form .hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
  #tbh-hero .form-note { margin-top: 8px; font-size: clamp(11.5px, 1.15vw, 13px); color: var(--tbh-muted); line-height: 1.55; }
  #tbh-hero .form-note a { color: var(--tbh-muted); text-decoration: underline; text-underline-offset: 2px; }
  #tbh-hero .ibt-nl .done { max-width: 540px; }
  #tbh-hero .ibt-nl .done h2 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px; color: var(--tbh-ink); }
  #tbh-hero .ibt-nl .done p { font-size: 15px; color: var(--tbh-muted); line-height: 1.55; max-width: 46ch; margin: 0 auto; }
  #tbh-hero .ibt-nl .share-btn {
    margin-top: 18px; font: inherit; font-size: 15px; font-weight: 600; color: var(--tbh-gold-deep);
    background: rgba(255, 255, 255, .6); border: 1px solid var(--tbh-line); border-radius: 999px;
    padding: 12px 24px; cursor: pointer; transition: border-color .2s ease, color .2s ease;
  }
  #tbh-hero .ibt-nl .share-btn:hover { border-color: var(--tbh-gold); color: var(--tbh-ink); }

  @media (max-width: 980px) {
    #tbh-hero .form-row { flex-direction: column; align-items: stretch; }
    #tbh-hero .form-row input[type="email"],
    #tbh-hero .form-row button,
    #tbh-hero .form-row input[type="submit"] { width: 100%; flex: none; }
  }

  @media (min-width: 1024px) {
    #snippet--header .main-menu__wrapper { min-height: 0 !important; height: auto !important; top: auto !important; }
    #snippet--header header.is-without-top { height: auto !important; min-height: 0 !important; }
  }
