/* G1 · layouts and motion adapted from reusable-template-kit/website_template_v1.html
   (sticky header progress, ticker, trust badges, sticky scroll, process, stats count-up,
   Google review columns, contact block as checkout, FAQ, fade-in), restyled with the
   komplexlogopedia.hu skin from ../shared/kl-site.css. Loaded after kl.css + kl-site.css. */

/* Template rule: no overflow hidden/auto on body, html or any ancestor of a sticky element.
   kl.css sets body{overflow-x:hidden}. clip does not create a scroll container. */
body{overflow-x:clip}
.rv,.topbar{position:relative;z-index:41}

/* sticky header + scroll progress (template .header-sticky-wrapper + #scroll-progress) */
.g1-progress{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--blue);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

/* fade-in reveals (template .fade-in). Only hidden when JS runs. */
.js .fade-in{opacity:0;transform:translateY(30px);transition:opacity .8s ease-out,transform .8s ease-out}
.js .fade-in.is-visible{opacity:1;transform:none}

/* shared bits */
.g1-g{width:24px;height:24px;flex:none}
.g1-stars{display:inline-flex;gap:2px;color:#FBBC05;vertical-align:-1px}
.g1-stars svg{width:15px;height:15px}
.section-cta-wrapper{margin-top:40px;display:flex;justify-content:center}
.g1-btn-light{background:#fff;color:var(--ink);border:1px solid #fff}
.g1-btn-light:hover{background:var(--blue-50)}

/* ===== HERO ===== */
.g1-hero{padding:76px 0 92px}
.g1-hero .hero-grid{grid-template-columns:1.12fr .88fr;gap:64px}
.g1-hero h1{font-size:clamp(2.2rem,4vw,3rem);line-height:1.15}
.g1-hero h1 .hl{white-space:nowrap}
.g1-hero .lead{font-size:1.12rem;max-width:580px}
.g1-price{margin-top:22px;font-size:1rem;color:var(--text)}
.g1-price b{font:800 1.2rem var(--f-head);color:var(--ink)}
.g1-rate{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.g1-rate .it{display:flex;align-items:center;gap:10px;font-size:.9rem;line-height:1.3;color:var(--muted)}
.g1-rate .it b{display:flex;align-items:center;gap:6px;font:800 1.1rem/1.2 var(--f-head);color:var(--ink)}
.g1-rate .g1-g{width:30px;height:30px}
.g1-rate .it+.it{padding-left:28px;border-left:1px solid var(--line)}

/* hero visual: video-call frame */
.g1-call{position:relative;margin:0 22px;padding:10px;background:#fff;border:1px solid var(--line-2);border-radius:6px;box-shadow:var(--sh-2)}
.g1-call-bar{display:flex;align-items:center;gap:6px;padding:4px 6px 10px;font:700 .84rem/1 var(--f-head);color:var(--ink)}
.g1-call-bar i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.g1-call-bar i:first-child{background:#F28B82}.g1-call-bar i:nth-child(2){background:#FDD663}.g1-call-bar i:nth-child(3){background:#81C995}
.g1-call-bar span{margin-left:8px}
.g1-call>img{width:100%;height:auto;aspect-ratio:1/1.02;object-fit:cover;object-position:50% 22%;border-radius:3px}
.g1-call-nm{position:absolute;left:24px;bottom:24px;padding:9px 13px;border-radius:3px;background:rgba(13,6,45,.8);color:#fff;font:700 .92rem/1.25 var(--f-head)}
.g1-call-nm span{display:block;font:500 .8rem var(--f-body);color:#E3E1EE}
.g1-float{position:absolute;display:flex;align-items:center;gap:10px;padding:11px 15px;background:#fff;border:1px solid var(--line-2);border-radius:3px;box-shadow:var(--sh-2);font:700 .92rem/1.2 var(--f-head);color:var(--ink);animation:g1Bob 6s ease-in-out infinite}
.g1-float small{display:block;margin-top:2px;font:500 .8rem var(--f-body);color:var(--muted)}
.g1-float .g1-g{width:30px;height:30px}
.g1-fa{top:64px;right:-34px}
.g1-fb{bottom:96px;left:-40px;animation-delay:-3s}
.g1-fi{width:34px;height:34px;display:grid;place-items:center;border-radius:3px;background:var(--blue);color:#fff;flex:none}
.g1-fi svg{width:18px;height:18px}
@keyframes g1Bob{50%{transform:translateY(-6px)}}

/* ===== TICKER (template scrollTicker) ===== */
.g1-ticker{padding:20px 0;background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.ticker-wrapper{display:flex;width:max-content;animation:scrollTicker 42s linear infinite}
.ticker-wrapper:hover{animation-play-state:paused}
.ticker-track{display:flex;align-items:center;gap:48px;padding-right:48px;flex:none}
.ticker-track span{display:inline-flex;align-items:center;gap:10px;font:700 1.02rem/1 var(--f-head);color:var(--ink);white-space:nowrap}
.ticker-track svg{width:22px;height:22px;color:var(--blue)}
@keyframes scrollTicker{to{transform:translateX(-50%)}}

/* ===== PAIN cards ===== */
.g4 .card h3{font-size:1.14rem}
.adq.mt48{margin-top:48px}
.checks.mt24{margin-top:24px}
/* kl.css adds margin between adjacent accordions, which offsets the 2-column grid */
.days>details.acc+details.acc{margin-top:0}

/* ===== TRUST BADGES ===== */
.trust-badges{padding:64px 0;background:var(--ink);color:#fff}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;text-align:center}
.trust-item{display:flex;flex-direction:column;align-items:center;gap:16px;font:700 1.15rem/1.35 var(--f-head);color:#fff}
.trust-item i{width:60px;height:60px;display:grid;place-items:center;border-radius:3px;background:rgba(0,138,230,.18);border:1px solid rgba(0,138,230,.55);color:#7CC4F5}
.trust-item svg{width:28px;height:28px}

/* ===== STICKY SECTION (template .sticky-section) ===== */
.sticky-wrapper{display:flex;gap:72px;align-items:flex-start}
.sticky-left{position:sticky;top:100px;width:40%}
.sticky-left-inner{padding-top:12px}
.sticky-left h2{font-size:clamp(1.8rem,2.8vw,2.5rem)}
.sticky-right{width:60%;display:flex;flex-direction:column;gap:40px}
.scroll-card{background:var(--bg-soft);border:1px solid var(--blue);border-radius:3px;box-shadow:var(--sh-1);overflow:hidden}
.scroll-card>.ph{border-radius:0;border-width:0 0 1px;border-style:solid;border-color:var(--line-2)}
.scroll-vis{display:grid;place-items:center;padding:36px 20px;background:#fff;border-bottom:1px solid var(--line-2)}
.scroll-card-content{padding:32px 34px 34px}
.scroll-card-content h3{font-size:1.45rem;margin:6px 0 10px}
.g1-num{font:800 .9rem/1 var(--f-head);color:var(--blue);letter-spacing:.04em}
.scroll-feature-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.scroll-feature-item{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;background:#fff;border:1px solid var(--line-2);border-radius:3px;font:700 .86rem/1.2 var(--f-head);color:var(--ink)}
.scroll-feature-item svg{width:16px;height:16px;color:var(--blue);flex:none}

/* ===== PROCESS (template .process-v1) ===== */
.process-v1{background:var(--bg-soft)}
.process-grid-v1{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;text-align:center;padding-top:26px}
.process-step-v1{position:relative;padding:54px 24px 30px;background:#fff;border:1px solid var(--blue);border-radius:3px;box-shadow:var(--sh-1);transition:transform .3s ease,box-shadow .3s ease}
.process-step-v1:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.process-number-v1{position:absolute;top:-26px;left:50%;transform:translateX(-50%);width:52px;height:52px;display:grid;place-items:center;border-radius:3px;background:var(--blue);color:#fff;font:800 1.4rem/1 var(--f-head);box-shadow:0 0 0 7px var(--bg-soft);transition:background .3s ease}
.process-step-v1:hover .process-number-v1{background:var(--ink)}
.process-step-v1>svg{width:38px;height:38px;margin:0 auto 16px;color:var(--blue)}
.process-step-v1 h3{font-size:1.15rem;margin-bottom:8px}
.process-step-v1 p{font-size:.96rem}

/* ===== STATS (template .stats-section) ===== */
.stats-section{padding:80px 0;background:#fff}
.stats-section .sec-head{margin-bottom:40px}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:960px;margin:0 auto}
.stat-item{padding:6px 0 6px 26px;border-left:2px solid var(--line-2)}
.stat-item small{display:block;font:600 .98rem/1.3 var(--f-body);color:var(--ink)}
.stat-item b{display:block;margin:4px 0;font:800 clamp(2.4rem,4vw,3.1rem)/1.1 var(--f-head);color:var(--blue);font-variant-numeric:tabular-nums}
.stat-item p{font-size:1rem;color:var(--ink)}

/* ===== GOOGLE REVIEWS (template .testimonials + scrollVertical) ===== */
.testimonials{background:var(--bg-soft)}
.testimonials .sec-head{margin-bottom:36px}
.g1-rating{display:inline-flex;align-items:center;gap:12px;margin-top:24px;padding:12px 20px;background:#fff;border:1px solid var(--line-2);border-radius:3px;box-shadow:var(--sh-1)}
.g1-rating .g1-g{width:32px;height:32px}
.g1-rating b{font:800 1.55rem/1 var(--f-head);color:var(--ink)}
.g1-rating .g1-stars svg{width:18px;height:18px}
.g1-rc{font-size:.92rem;color:var(--muted)}
.test-columns{display:flex;gap:24px;justify-content:center;height:640px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent)}
.test-col{flex:1;min-width:0;max-width:370px}
.test-col-inner{display:flex;flex-direction:column;gap:20px;animation:scrollVertical 40s linear infinite}
.test-col-inner.reverse{animation-name:scrollVerticalReverse}
.test-columns:hover .test-col-inner{animation-play-state:paused}
@keyframes scrollVertical{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 10px))}}
@keyframes scrollVerticalReverse{from{transform:translateY(calc(-50% - 10px))}to{transform:translateY(0)}}
.test-card{display:flex;flex-direction:column;padding:24px;background:#fff;border:1px solid rgba(13,6,45,.06);border-radius:3px;box-shadow:0 4px 15px rgba(0,0,0,.07)}
.test-card .g1-stars svg{width:18px;height:18px}
.test-card p{margin-top:12px;font-size:.98rem;line-height:1.6;color:var(--ink)}
.test-author-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.test-author-info{display:flex;align-items:center;gap:12px;min-width:0}
.test-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.test-name-role strong{display:block;font:700 1rem/1.25 var(--f-head);color:var(--ink)}
.test-name-role span{display:block;font-size:.84rem;color:#6B7A78}
.test-author-row .g1-g{width:26px;height:26px}

/* ===== OFFER (template .contact-redesigned) ===== */
.contact-redesigned{background:#fff}
.contact-grid{display:grid;grid-template-columns:1fr 1.22fr;gap:28px;max-width:1080px;margin:0 auto}
.contact-left{display:flex;flex-direction:column;padding:44px 32px;background:var(--ink);border-radius:6px;color:#fff}
.contact-left h3{font-size:1.85rem;color:#fff;margin-bottom:14px}
.contact-left>p{color:#D6D4E2;margin-bottom:28px}
.contact-info-block{display:flex;align-items:center;gap:16px;padding:16px 18px;margin-bottom:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:3px}
.icon-circle{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:var(--blue);color:#fff;flex:none}
.icon-circle svg{width:22px;height:22px}
.contact-info-block small{display:block;font:600 .84rem/1.3 var(--f-body);color:#B9B6CC}
.contact-info-block strong{display:block;font:800 1.08rem/1.3 var(--f-head);color:#fff}
.g1-who{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:24px;border-top:1px solid rgba(255,255,255,.12)}
.g1-who img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 18%;flex:none}
.g1-who p{font-size:.92rem;line-height:1.4;color:#D6D4E2}
.g1-who b{display:block;font:800 1.02rem/1.3 var(--f-head);color:#fff}
.contact-right{padding:40px 36px;background:var(--bg-soft);border:1px solid var(--blue);border-radius:6px;box-shadow:var(--sh-2)}
.g1-lbl{font:800 1.12rem/1.3 var(--f-head);color:var(--ink);margin-bottom:16px}
.g1-pricebox{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line-2)}
.g1-pricebox small{display:block;font:700 .8rem var(--f-head);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:6px}
.g1-pricebox .price{font-weight:800}
.g1-pricebox p{text-align:right;line-height:1.4}
.contact-right .addon{background:#fff}

/* ===== GUARANTEE ===== */
.g1-guar{padding-top:0;background:#fff}
.g1-guar .guarantee{border:1px solid var(--green);gap:32px}
.g1-guar h3{font-size:1.4rem}
.g1-stamp{flex:none;width:128px;height:128px;display:grid;place-items:center;border-radius:50%;border:3px solid var(--ink);outline:2px dashed var(--ink);outline-offset:-10px;text-align:center;font:800 .82rem/1.2 var(--f-head);color:var(--ink)}

/* ===== FAQ (template .faq-section) ===== */
.faq-section{background:var(--bg-soft)}
.faq-grid{display:flex;flex-direction:column;gap:12px;max-width:820px;margin:0 auto}
.faq-item{background:#fff;border:1px solid var(--line-2);border-radius:3px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.faq-item[open]{border-color:var(--blue);box-shadow:var(--sh-1)}
.faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;list-style:none;cursor:pointer;font:700 1.08rem/1.35 var(--f-head);color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{background:var(--blue-50)}
.faq-item summary::after{content:"+";flex:none;font:400 1.7rem/1 var(--f-body);color:var(--blue);transition:transform .3s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-content{padding:0 24px 22px;color:var(--text)}

.final{background:#fff}

/* ===== responsive ===== */
@media (max-width:1100px){
  .g1-fa{right:-12px}.g1-fb{left:-16px}
}
@media (max-width:992px){
  .sticky-wrapper{flex-direction:column;gap:40px}
  .sticky-left{position:relative;top:0;width:100%}
  .sticky-left-inner{padding-top:0}
  .sticky-right{width:100%}
  .process-grid-v1{grid-template-columns:repeat(2,1fr);gap:56px 24px}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:860px){
  .g1-hero{padding:40px 0 60px}
  .g1-hero .hero-grid{grid-template-columns:1fr;gap:40px}
  .g1-call{margin:0 6px;max-width:520px;justify-self:center;width:calc(100% - 12px)}
  .g1-fa{top:52px;right:-6px}
  .g1-fb{bottom:76px;left:-6px}
  .test-columns{height:560px}
  .contact-left,.contact-right{padding:28px 20px}
  .contact-left h3{font-size:1.5rem}
}
@media (max-width:720px){
  .trust-grid,.stats-grid{grid-template-columns:1fr}
  .trust-badges{padding:48px 0}
  .trust-item{flex-direction:row;text-align:left;gap:14px}
  .trust-item i{width:48px;height:48px;flex:none}
  .stat-item{padding:4px 0 4px 18px}
  .g1-rate .it+.it{padding-left:0;border-left:0}
  .scroll-card-content{padding:24px 20px 26px}
  .scroll-card-content h3{font-size:1.25rem}
  .g1-guar .guarantee{gap:20px}
  .g1-pricebox{flex-wrap:wrap}
  .g1-pricebox p{text-align:left}
  .g1-rate{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .g1-rate .it:first-child{grid-column:1/-1}
}
@media (max-width:560px){
  .process-grid-v1{grid-template-columns:1fr}
  .g1-float{padding:9px 11px;font-size:.84rem}
  .g1-float .g1-g{width:24px;height:24px}
  .g1-fi{width:28px;height:28px}
  .g1-rating{flex-wrap:wrap;justify-content:center}
  .section-cta-wrapper .btn{width:100%}
}

/* reduced motion: pause the scroll animations, show reveals, allow manual scrolling of the columns */
@media (prefers-reduced-motion:reduce){
  .ticker-wrapper,.test-col-inner,.g1-float{animation-play-state:paused!important}
  .test-col{overflow-y:auto}
  .js .fade-in{opacity:1;transform:none}
}