/* reklamAI.sk — MERINEO
   Global styles, interaction states, breakpoints, chat mockup.
   Layout styles live inline in index.html. */

/* Archivo (self-hosted, variable font: wght 100–900, wdth 62–125).
   Zdroj: github.com/google/fonts/tree/main/ofl/archivo (OFL 1.1, licencia v fonts/OFL.txt). */
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-variable.woff2') format('woff2-variations'), url('../fonts/archivo-variable.woff2') format('woff2');
  font-weight:100 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-italic-variable.woff2') format('woff2-variations'), url('../fonts/archivo-italic-variable.woff2') format('woff2');
  font-weight:100 900;
  font-stretch:62% 125%;
  font-style:italic;
  font-display:swap;
}

*{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;scroll-padding-top:104px;}
  body{font-family:'Archivo',system-ui,sans-serif;font-stretch:100%;background:#F7F8FD;color:#0B0D17;line-height:1.5;-webkit-font-smoothing:antialiased;text-wrap:pretty;}
  img{max-width:100%;display:block;}
  a{color:#4A5FD9;text-decoration:none;}
  a:hover{color:#0B0D17;}
  input,select,button,textarea{font-family:inherit;}
  @keyframes blip{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.2;transform:scale(.7);}}
  a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #4A5FD9;outline-offset:3px;box-shadow:0 0 0 6px rgba(253,208,124,0.65);}
  :target{scroll-margin-top:104px;}
  @media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important;}html{scroll-behavior:auto;}}

/* ---------- interaction states ---------- */
.skip-link{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.skip-link:focus{position:fixed;top:12px;left:12px;width:auto;height:auto;clip-path:none;z-index:200;background:#FDD07C;color:#0B0D17;padding:13px 24px;border-radius:100px;font-family:'Archivo',sans-serif;font-stretch:112%;font-weight:800;font-size:0.95rem;}

.btn-amber:hover{background:#FFDD99;}
.btn-light:hover{background:#738DFF;color:#0B0D17;}
.btn-outline:hover{border-color:#738DFF;color:#BFCEFF;}
.btn-dark:hover{background:#738DFF;color:#0B0D17;}
.nav-link:hover{background:#1E2440;color:#F7F8FD;}
.field:focus{outline:2px solid #738DFF;outline-offset:1px;border-color:transparent;}
.faq-q:hover span:first-child{color:#4A5FD9;}

.chat-anim-toggle{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:5;width:44px;height:44px;border-radius:50%;border:1px solid #2A3154;background:#12162A;color:#738DFF;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;box-shadow:0 10px 24px rgba(6,9,14,0.45);}
.chat-anim-toggle:hover{background:#1E2440;}
.chat-anim-toggle[hidden]{display:none !important;}

/* ---------- header / navigation ---------- */
/* layout styles are inline, so state rules need to win */
[hidden]{display:none !important;}
.site-header{position:sticky;}
.nav-mobile{display:none !important;}
#menu-btn[aria-expanded="true"] [data-bar="1"]{transform:translateY(7px) rotate(45deg);}
#menu-btn[aria-expanded="true"] [data-bar="2"]{opacity:0;}
#menu-btn[aria-expanded="true"] [data-bar="3"]{transform:translateY(-7px) rotate(-45deg);}

@media (max-width:859px){
  .site-header{position:relative;}
  .nav-desktop{display:none !important;}
  .nav-mobile{display:flex !important;}
  .float-cta{opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s,transform .25s,visibility .25s;}
  .float-cta.is-visible{opacity:1;visibility:visible;transform:none;}
}

/* background O-marks: only where there is room beside the text */
@media (max-width:1099px){
  .ring-wide{display:none;}
}

/* ---------- phone mockup ---------- */
.phone{width:402px;height:874px;border-radius:48px;overflow:hidden;position:relative;background:#F2F2F7;box-shadow:0 40px 80px rgba(0,0,0,0.18),0 0 0 1px rgba(0,0,0,0.12);-webkit-font-smoothing:antialiased;}
.phone-island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:126px;height:37px;border-radius:24px;background:#000;z-index:50;}
.phone-status{position:absolute;top:0;left:0;right:0;height:59px;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:21px 30px 0;font-family:-apple-system,"SF Pro",system-ui,sans-serif;}
.phone-time{font-size:17px;line-height:22px;font-weight:600;color:#0B0D17;}
.phone-icons{display:flex;align-items:center;gap:7px;}
.phone-screen{position:absolute;inset:0;overflow:hidden;}
.phone-home{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:139px;height:5px;border-radius:100px;background:rgba(0,0,0,0.25);z-index:60;}

.chat{height:100%;display:flex;flex-direction:column;background:#FFFFFF;font-family:'Archivo',system-ui,sans-serif;}
.chat-top{padding:58px 14px 8px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0;}
.chat-vp{flex:1;overflow:hidden;padding:10px 16px 0;position:relative;}
.chat-thread{display:flex;flex-direction:column;transition:transform .75s cubic-bezier(.2,.8,.2,1);}
.chat-body{font-size:0.95rem;line-height:1.5;color:#0B0D17;}
.chat-bubble{background:#F1F1F3;border-radius:20px;padding:12px 16px;font-size:0.95rem;line-height:1.45;color:#0B0D17;max-width:84%;margin-left:auto;margin-bottom:20px;animation:bubbleIn .42s cubic-bezier(.2,.8,.2,1) both;}
.chat-bubble.second{margin-top:26px;}
.chat-typing{display:flex;align-items:center;gap:5px;padding:2px 2px 8px;animation:msgIn .25s both;}
.chat-typing span{width:7px;height:7px;border-radius:50%;background:#0B0D17;animation:dotBlink 1.1s infinite;}
.chat-typing span:nth-child(2){animation-delay:.16s;}
.chat-typing span:nth-child(3){animation-delay:.32s;}
.chat-line{animation:msgIn .34s both;}
.chat-bullets{display:flex;flex-direction:column;gap:7px;padding-left:4px;}
.chat-bullet{display:flex;gap:9px;animation:msgIn .3s both;}
.chat-bullet i{color:#6B6B75;flex-shrink:0;font-style:normal;}
.chat-bullet strong{font-weight:700;}
.chat-actions{display:flex;gap:20px;align-items:center;padding:16px 2px 14px;color:#8E8E98;animation:msgIn .3s both;}
.chat-ad{border-top:1px solid #ECECEF;padding-top:14px;animation:cardIn .52s cubic-bezier(.2,.8,.2,1) both;}
.chat-ad.second{margin-top:16px;padding-bottom:16px;}
.chat-ad-inner{display:flex;gap:12px;border:1px solid #E4E4E8;border-radius:16px;padding:10px;}
.chat-ad-thumb{width:104px;height:104px;flex-shrink:0;background:#F4F4F6;border-radius:12px;object-fit:contain;}
.chat-ad-meta{display:flex;align-items:center;gap:7px;margin-bottom:5px;}
.chat-ad-avatar{width:17px;height:17px;border-radius:50%;background:#0B0D17;font-size:0.56rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.chat-ad-site{font-size:0.79rem;font-weight:600;color:#3C4360;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-ad-tag{background:#F1F1F3;border-radius:5px;padding:2px 6px;font-family:'Archivo',sans-serif;font-stretch:75%;font-weight:600;text-transform:uppercase;font-size:0.6rem;letter-spacing:0.05em;color:#6B6B75;flex-shrink:0;}
.chat-ad-title{font-size:0.88rem;font-weight:700;color:#0B0D17;margin-bottom:3px;line-height:1.3;}
.chat-ad-text{font-size:0.82rem;color:#5C5C66;line-height:1.4;}

.composer{margin:0 16px;display:flex;align-items:center;gap:10px;background:#F7F7F8;border-radius:100px;padding:9px 10px 9px 14px;flex-shrink:0;}
.composer-line{flex:1;min-width:0;font-size:0.92rem;line-height:1.3;white-space:nowrap;overflow:hidden;}
.caret{display:inline-block;width:1.5px;height:0.95em;margin-left:1px;background:#0B0D17;vertical-align:-0.12em;animation:caretBlink 1s step-end infinite;}
.send{width:34px;height:34px;border-radius:50%;background:#0B0D17;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .25s;}
.send.active{background:#FDD07C;}

@keyframes msgIn{from{opacity:0;transform:translateY(9px);}to{opacity:1;transform:none;}}
@keyframes bubbleIn{from{opacity:0;transform:translateY(18px) scale(.96);}to{opacity:1;transform:none;}}
@keyframes cardIn{from{opacity:0;transform:translateY(20px) scale(.97);}to{opacity:1;transform:none;}}
@keyframes dotBlink{0%,80%,100%{opacity:.25;transform:translateY(0);}40%{opacity:1;transform:translateY(-3px);}}
@keyframes caretBlink{0%,49%{opacity:1;}50%,100%{opacity:0;}}

.form-status-spinner {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -0.08em;
  animation: form-status-spin 0.7s linear infinite;
}

@keyframes form-status-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .form-status-spinner {
    animation: none;
    border-right-color: currentColor;
    opacity: 0.75;
  }
}