/* Kreativ Kihivas landing - susanatoth-theme
   Scope: .kihivas-page (a minta gyokere) */

.kihivas-page, .kihivas-page * { margin: 0; padding: 0; box-sizing: border-box; }
.kihivas-page {
  font-family: 'Inter', sans-serif;
  background: #f2efe8;
  color: #12121e;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
.kihivas-page a { color: #7d6417; text-decoration: none; }
.kihivas-page a:hover { color: #7d6417; }
.kihivas-page h1, .kihivas-page h2, .kihivas-page h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: #12121e;
  letter-spacing: -.02em;
}
.kihivas-page em { font-style: normal; font-weight: 600; color: #7d6417; }
.kihivas-page input::placeholder { color: rgba(244,241,233,.55); }
.kihivas-page .kihivas-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- szivarvanyos H1 kiemeles (fallback: arany) ---- */
.kihivas-page .kihivas-rainbow { color: #7d6417; }
@supports (-webkit-background-clip: text) {
  .kihivas-page .kihivas-rainbow {
    background: linear-gradient(100deg,#ff6b4a,#f7b733,#f9d423,#5eead4,#38bdf8,#a78bfa,#ff6b4a);
    background-size: 280% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: rainbowFlow 8s linear infinite;
  }
}

/* ---- hover / focus allapotok ---- */
.kihivas-page .kihivas-btn:hover, .kihivas-page .kihivas-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.kihivas-page .kihivas-btn2:hover, .kihivas-page .kihivas-btn2:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.kihivas-page .kihivas-btn3:hover, .kihivas-page .kihivas-btn3:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.kihivas-page .kihivas-dayrow:hover { border-color: rgba(150,121,28,.35); transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.kihivas-page .kihivas-tl:hover { transform: translateX(4px); }
.kihivas-page .kihivas-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.kihivas-page .kihivas-share-btn:hover, .kihivas-page .kihivas-share-btn:focus-visible { border-color: rgba(150,121,28,.45); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.kihivas-page a:focus-visible, .kihivas-page button:focus-visible { outline: 2px solid #7d6417; outline-offset: 3px; }
.kihivas-page .kihivas-formcard a:focus-visible, .kihivas-page .kihivas-formcard button:focus-visible,
.kihivas-page .kihivas-formcard input:focus-visible { outline: 2px solid #c8a45e; outline-offset: 2px; }

/* ---- layout osztalyok (inline-bol kiemelve, mobil felulirasokhoz) ---- */
.kihivas-page .kihivas-tlgrid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 56px; align-items: start; }
.kihivas-page .kihivas-faqgrid { display: grid; grid-template-columns: repeat(6,1fr); gap: 16px; }
.kihivas-page .kihivas-prizegrid { display: grid; grid-template-columns: repeat(3,1fr); grid-auto-rows: minmax(148px,auto); gap: 16px; }
.kihivas-page .kihivas-s4 { grid-column: span 4; }
.kihivas-page .kihivas-s3 { grid-column: span 3; }
.kihivas-page .kihivas-s2 { grid-column: span 2; }
.kihivas-page .kihivas-s22 { grid-column: span 2; grid-row: span 2; }
.kihivas-page .kihivas-formcard { position: sticky; top: 24px; }
.kihivas-page #feliratkozas { scroll-margin-top: 96px; }

/* ---- scroll reveal (JS teszi hozza a rejto osztalyt) ---- */
.kihivas-page .kihivas-pre-reveal { opacity: 0; transform: translateY(30px); }

/* ---- mobil ---- */
@media (max-width: 1150px) {
  .kihivas-page .kihivas-tile { display: none !important; }
}
@media (max-width: 900px) {
  .kihivas-page .kihivas-tlgrid { grid-template-columns: 1fr; gap: 40px; }
  .kihivas-page .kihivas-formcard { position: static; }
  .kihivas-page .kihivas-formcard input[type="text"],
  .kihivas-page .kihivas-formcard input[type="email"] { font-size: 16px !important; }
}
@media (max-width: 768px) {
  .kihivas-page .kihivas-faqgrid { grid-template-columns: 1fr; }
  .kihivas-page .kihivas-prizegrid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .kihivas-page .kihivas-s4, .kihivas-page .kihivas-s3, .kihivas-page .kihivas-s2,
  .kihivas-page .kihivas-s22 { grid-column: auto; grid-row: auto; }
  .kihivas-page section { padding-top: 60px !important; padding-bottom: 60px !important; }
  .kihivas-page section > div { padding-left: 20px !important; padding-right: 20px !important; }
  .kihivas-page .kihivas-s22 { padding: 28px 22px !important; }
}
@media (max-width: 480px) {
  .kihivas-page .kihivas-dayrow { flex-wrap: wrap; }
  .kihivas-page .kihivas-daybadge { order: 3; margin-left: 66px; }
  .kihivas-page .kihivas-formcard > div { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ---- csokkentett mozgas ---- */
@media (prefers-reduced-motion: reduce) {
  .kihivas-page *, .kihivas-page *::before, .kihivas-page *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .kihivas-page .kihivas-pre-reveal { opacity: 1; transform: none; }
}

/* ---- eredeti animacios retegek (scope-olva) ---- */
@keyframes stBlob{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(340px,60px) scale(1.18)}66%{transform:translate(120px,-40px) scale(.92)}}
@keyframes stFloatA{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(-2deg)}}
@keyframes stFloatB{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
@keyframes rainbowFlow{0%{background-position:0% 50%}100%{background-position:280% 50%}}
@keyframes stReveal{to{opacity:1;transform:none}}
@keyframes stDot{0%{transform:scale(1);opacity:1}70%{transform:scale(1.4);opacity:.4}100%{transform:scale(1);opacity:1}}
.kihivas-page .eye{transform-box:fill-box;transform-origin:center;animation:stBlink 4.4s ease-in-out infinite}
.kihivas-page .leg{animation:stCrabLeg .9s linear infinite}
.kihivas-page .leg-2{animation-delay:.18s}
.kihivas-page .leg-3{animation-delay:.36s}
.kihivas-page .leg-4{animation-delay:.54s}
.kihivas-page .claude{animation:stScuttle 6s ease-in-out infinite}
.kihivas-page .torso{animation:stTorso .5s ease-in-out infinite}
.kihivas-page #g2 .claude,.kihivas-page #g2 .tool-b{animation-delay:.4s}
.kihivas-page #g3 .claude,.kihivas-page #g3 .keyboard{animation-delay:.9s}
.kihivas-page #g4 .claude,.kihivas-page #g4 .tool-k{animation-delay:.2s}
.kihivas-page #g2 .eye{animation-delay:.5s}
.kihivas-page #g3 .eye{animation-delay:1.1s}
.kihivas-page #g4 .eye{animation-delay:.8s}
.kihivas-page .keyboard{animation:stKeyBob 6s ease-in-out infinite}
.kihivas-page .claude,.kihivas-page .keyboard,.kihivas-page .deco-pixels{animation-fill-mode:both}
.kihivas-page #g1 .claude{animation-name:stScuttle1;animation-duration:11s}
.kihivas-page #g1 .keyboard{animation-duration:11s}
.kihivas-page #g2 .claude{animation-name:stScuttle2}
.kihivas-page #g3 .claude{animation-name:stScuttle3}
.kihivas-page #g4 .claude{animation-name:stScuttle4}
.kihivas-page #g1 .keyboard{animation-name:stKeyBob1}
.kihivas-page #g2 .keyboard{animation-name:stKeyBob2}
.kihivas-page #g4 .keyboard{animation-name:stKeyBob4}
.kihivas-page #g3 .keyboard{animation-name:stKeyBob3}
.kihivas-page .key-hit{animation:stKey 1.4s ease-in-out infinite}
.kihivas-page .key-hit:nth-of-type(2){animation-delay:.18s}
.kihivas-page .key-hit:nth-of-type(3){animation-delay:.36s}
.kihivas-page .key-hit:nth-of-type(4){animation-delay:.54s}
.kihivas-page .key-hit:nth-of-type(5){animation-delay:.72s}
.kihivas-page .key-hit:nth-of-type(6){animation-delay:.9s}
.kihivas-page .wf-blocks>*{animation:stDraw 7s ease-in-out infinite}
.kihivas-page .wf-1{animation-delay:0s}.kihivas-page .wf-2{animation-delay:.5s}.kihivas-page .wf-3{animation-delay:1s}.kihivas-page .wf-4{animation-delay:1.4s}.kihivas-page .wf-5{animation-delay:1.9s}
.kihivas-page .wf-cta{animation:stPop 7s ease-in-out infinite 2.6s}
.kihivas-page .wf-diag,.kihivas-page .wf-mark{animation:stFade 7s ease-in-out infinite 3s}
.kihivas-page .hf-hero{animation:stPop 7s ease-in-out infinite .2s}
.kihivas-page .hf-cta{animation:stPop 7s ease-in-out infinite 1.4s}
.kihivas-page .hf-cards>*{animation:stPop 7s ease-in-out infinite 2s}
.kihivas-page .palette>*{animation:stSwatch 7s ease-in-out infinite}
.kihivas-page .sw-1{animation-delay:.1s}.kihivas-page .sw-2{animation-delay:.4s}.kihivas-page .sw-3{animation-delay:.7s}.kihivas-page .sw-4{animation-delay:1s}
.kihivas-page .code-lines>text{animation:stLine 8s ease-in-out infinite}
.kihivas-page .cl-1{animation-delay:0s}.kihivas-page .cl-2{animation-delay:.5s}.kihivas-page .cl-3{animation-delay:1s}.kihivas-page .cl-4{animation-delay:1.5s}
.kihivas-page .cl-5{animation-delay:2s}.kihivas-page .cl-6{animation-delay:2.5s}.kihivas-page .cl-7{animation-delay:3s}.kihivas-page .cl-8{animation-delay:3.6s}
.kihivas-page .caret{animation:stCaret .9s step-end infinite}
.kihivas-page .site-hero{animation:stPop 7.5s ease-in-out infinite .2s}
.kihivas-page .site-cta{animation:stPop 7.5s ease-in-out infinite 1.2s}
.kihivas-page .sb-1{animation:stSlide 7.5s ease-in-out infinite 1.6s}
.kihivas-page .sb-2{animation:stSlide 7.5s ease-in-out infinite 2.1s}
.kihivas-page .sb-3{animation:stSlide 7.5s ease-in-out infinite 2.6s}
.kihivas-page .sb-4{animation:stSlide 7.5s ease-in-out infinite 3.1s}
.kihivas-page .live-ring{transform-box:fill-box;transform-origin:center;animation:stPulse 2s ease-out infinite}
.kihivas-page .deco-pixels{animation:stPixels 4.6s ease-in-out infinite}
.kihivas-page .deco-pixels>*{animation:stPixFade 4.6s ease-in-out infinite}
.kihivas-page .deco-pixels>*:nth-child(2){animation-delay:.2s}
.kihivas-page .deco-pixels>*:nth-child(3){animation-delay:.4s}
.kihivas-page .deco-pixels>*:nth-child(4){animation-delay:.6s}
@keyframes stBlink{0%,42%,49%,100%{transform:scaleY(1)}44.5%,46.5%{transform:scaleY(.12)}}
@keyframes stScuttle1{0%{transform:translate(1660px,398px) rotate(1.2deg)}18%{transform:translate(1150px,398px) rotate(1.2deg)}46%{transform:translate(1150px,398px) rotate(-1.2deg)}72%{transform:translate(1660px,398px) rotate(-1.2deg)}100%{transform:translate(1660px,398px) rotate(1.2deg)}}
@keyframes stScuttle2{0%{transform:translate(430px,700px) rotate(-1.2deg)}50%{transform:translate(300px,700px) rotate(1.2deg)}100%{transform:translate(430px,700px) rotate(-1.2deg)}}
@keyframes stScuttle3{0%{transform:translate(120px,660px) rotate(1.2deg)}50%{transform:translate(250px,660px) rotate(-1.2deg)}100%{transform:translate(120px,660px) rotate(1.2deg)}}
@keyframes stScuttle4{0%{transform:translate(560px,634px) rotate(-1.2deg)}50%{transform:translate(430px,634px) rotate(1.2deg)}100%{transform:translate(560px,634px) rotate(-1.2deg)}}
@keyframes stCrabLeg{0%,100%{transform:translate(0,0)}10%{transform:translate(0,-.55px)}22%{transform:translate(0,0)}}
@keyframes stTorso{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-.18px)}}
@keyframes stKeyBob1{0%{transform:translate(1380px,404px) rotate(-4deg)}18%{transform:translate(870px,404px) rotate(-4deg)}46%{transform:translate(870px,404px) rotate(-4deg)}72%{transform:translate(1380px,404px) rotate(-4deg)}100%{transform:translate(1380px,404px) rotate(-4deg)}}
@keyframes stKeyBob2{0%{transform:translate(88px,800px) rotate(4deg)}50%{transform:translate(-42px,800px) rotate(4deg)}100%{transform:translate(88px,800px) rotate(4deg)}}
@keyframes stToolK4{0%{transform:translate(348px,816px) rotate(0deg)}50%{transform:translate(218px,816px) rotate(0deg)}100%{transform:translate(348px,816px) rotate(0deg)}}
@keyframes stKeyBob4{0%{transform:translate(218px,760px) rotate(4deg)}50%{transform:translate(88px,760px) rotate(4deg)}100%{transform:translate(218px,760px) rotate(4deg)}}
@keyframes stKeyBob3{0%{transform:translate(594px,744px) rotate(-4deg)}50%{transform:translate(724px,744px) rotate(-4deg)}100%{transform:translate(594px,744px) rotate(-4deg)}}
@keyframes stKey{0%,100%{fill:#e8e4da;transform:translateY(0)}50%{fill:#c4a64d;transform:translateY(3px)}}
@keyframes stDraw{0%,4%{stroke-dashoffset:1800}34%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:1800}}
@keyframes stPop{0%,6%{opacity:0;transform:translateY(18px)}20%,88%{opacity:1;transform:none}100%{opacity:0;transform:translateY(18px)}}
@keyframes stFade{0%,10%{opacity:0}26%,88%{opacity:.45}100%{opacity:0}}
@keyframes stSwatch{0%,6%{opacity:0;transform:scale(.4)}18%{opacity:1;transform:scale(1.12)}26%,86%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.4)}}
@keyframes stLine{0%,5%{opacity:0;transform:translateX(-14px)}14%,90%{opacity:1;transform:none}100%{opacity:0;transform:translateX(-14px)}}
@keyframes stCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes stSlide{0%,8%{opacity:0;transform:translateX(64px)}26%,88%{opacity:1;transform:none}100%{opacity:0;transform:translateX(64px)}}
@keyframes stPulse{0%{transform:scale(1);opacity:.45}70%{transform:scale(2.4);opacity:0}100%{transform:scale(2.4);opacity:0}}
@keyframes stPixels{0%,100%{transform:translate(748px,606px)}50%{transform:translate(748px,586px)}}
.kihivas-page #g4 .deco-pixels{animation-name:stPixels4}
@keyframes stPixels4{0%,100%{transform:translate(900px,720px)}50%{transform:translate(900px,702px)}}
@keyframes stPixFade{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes stBrackets{0%,100%{transform:translate(880px,700px)}50%{transform:translate(880px,680px) rotate(-3deg)}}