/* ===========================================================================
   ClientsFlow — Variant A "Phase 2" components (section-rich rebuild)
   waves · illustrations · bento · mockups · flow cards · gradient-icon cards ·
   zigzag timeline · comparison · monogram marquee · feature rows · cookie banner
   =========================================================================== */

/* ---- inline-SVG wave divider ---- */
.wave{display:block;width:100%;height:clamp(40px,6vw,90px);line-height:0}
.wave svg{display:block;width:100%;height:100%}
.wave--flip svg{transform:scaleY(-1)}

/* ---- illustrations ---- */
.illus{display:block;max-width:100%;height:auto}
.illus--float{animation:illusFloat 7s ease-in-out infinite}
@keyframes illusFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media(prefers-reduced-motion:reduce){.illus--float{animation:none}}
.illus-glow{position:relative;isolation:isolate}
.illus-glow::after{content:"";position:absolute;inset:8% 12%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,rgba(10,207,255,.28),transparent 68%);filter:blur(34px)}

/* ---- hero v2 (free-mockup) ---- */
.hero__badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r-full);padding:.45rem .9rem;
  font-family:var(--f-display);font-weight:600;font-size:.82rem;color:#dfe5f2;margin-bottom:1.2rem}
.hero__badge .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan-400);box-shadow:0 0 10px var(--cyan-400)}
.hero__art{position:relative;display:grid;place-items:center}
.hero__art img{width:min(100%,440px)}
.hero__pricepill{position:absolute;bottom:6%;left:0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);border-radius:var(--r-lg);padding:.7rem 1rem;font-size:.85rem;color:#cdd3e2}
.hero__pricepill b{color:#fff;font-family:var(--f-display)}

/* ---- monogram logo wall ---- */
.logowall{padding-block:clamp(2rem,4vw,3rem);border-bottom:1px solid var(--border);background:var(--bg)}
.chip{display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap;padding:.5rem .9rem;border:1px solid var(--border);
  border-radius:var(--r-full);background:#fff;box-shadow:var(--sh-sm)}
.chip .mono{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--f-display);
  font-weight:800;font-size:.72rem;background:var(--grad)}
.chip span{font-family:var(--f-display);font-weight:600;font-size:.92rem;color:var(--n-700)}
.marquee__track.chips{gap:1rem}

/* ---- 2-card flow (hogyan hozunk ügyfelet) ---- */
.flow{display:grid;gap:1.4rem;align-items:stretch}
@media(min-width:820px){.flow{grid-template-columns:1fr auto 1fr}}
.flow__card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);padding:1.8rem;box-shadow:var(--sh-sm);
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s}
.flow__card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:var(--blue-200)}
.flow__card .ic{width:54px;height:54px;border-radius:15px;background:var(--grad);display:grid;place-items:center;color:#fff;margin-bottom:1rem;box-shadow:var(--sh-brand)}
.flow__card .ic svg{width:28px;height:28px}
.flow__card h3{margin-bottom:.8rem}
.flow__arrow{display:grid;place-items:center;color:var(--blue-400)}
.flow__arrow svg{width:40px;height:40px}
@media(max-width:819px){.flow__arrow{transform:rotate(90deg)}}
.flow__label{display:flex;justify-content:center;gap:.6rem;margin-top:1.4rem;font-family:var(--f-display);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;font-size:.82rem;color:var(--blue-700)}
.flow__label .arr{color:var(--cyan-400)}

/* ---- gradient-icon cards (garancia / 3-card) ---- */
.gcard{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);padding:1.8rem;box-shadow:var(--sh-sm);
  text-align:center;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.gcard:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)}
.gcard .gic{width:72px;height:72px;margin:0 auto 1.1rem;border-radius:20px;display:grid;place-items:center;color:#fff;
  background:var(--grad);box-shadow:0 14px 30px -8px rgba(42,84,255,.5)}
.gcard .gic svg{width:36px;height:36px}
.gcard h3{margin-bottom:.5rem}
.gcard p{color:var(--text-soft);font-size:.96rem}

/* ---- bento capabilities ---- */
.bento{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.bento{grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr}}
.bento__cell{position:relative;overflow:hidden;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:1.5rem;box-shadow:var(--sh-sm);transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s;min-height:170px}
.bento__cell:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:var(--blue-200)}
.bento__cell h3{font-size:1.12rem;margin-bottom:.4rem}
.bento__cell p{font-size:.9rem;color:var(--text-soft)}
.bento__cell .illus{position:absolute;right:-10px;bottom:-10px;width:120px;opacity:.95;pointer-events:none}
@media(min-width:760px){
  .bento__cell--lg{grid-column:span 2;grid-row:span 2;min-height:360px}
  .bento__cell--wide{grid-column:span 2}
}
.bento__cell--dark{background:var(--bg-dark);color:#fff;border-color:#26242e}
.bento__cell--dark h3{color:#fff}.bento__cell--dark p{color:#aab2c4}
.bento__cell--lg .illus{width:230px}
.bento__cell .tag{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--blue-700);margin-bottom:.7rem}
.bento__cell--dark .tag{color:var(--cyan-400)}

/* ---- feature row (text + illustration, alternating) ---- */
.frow{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center}
@media(min-width:880px){.frow{grid-template-columns:1fr 1fr}.frow--rev .frow__media{order:-1}}
.frow__media{display:grid;place-items:center}
.frow__media img{width:min(100%,420px)}
.frow ul{margin-top:1rem;display:grid;gap:.6rem}
.frow ul li{position:relative;padding-left:1.8rem;color:var(--n-700)}
.frow ul li::before{content:"";position:absolute;left:0;top:.15rem;width:22px;height:22px;border-radius:50%;
  background:var(--blue-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230d52b3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat}

/* ---- zigzag timeline ---- */
.zz{position:relative;max-width:780px;margin-inline:auto;padding:1rem 0}
.zz::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(var(--blue-200),var(--blue-400));transform:translateX(-50%)}
.zz__item{position:relative;width:50%;padding:1rem 2.2rem;box-sizing:border-box}
.zz__item:nth-child(odd){left:0;text-align:right}
.zz__item:nth-child(even){left:50%}
.zz__item .node{position:absolute;top:1.4rem;width:34px;height:34px;border-radius:50%;background:var(--grad);color:#fff;
  display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:.9rem;box-shadow:var(--sh-brand);z-index:1}
.zz__item:nth-child(odd) .node{right:-17px}
.zz__item:nth-child(even) .node{left:-17px}
.zz__item h3{font-size:1.08rem;margin-bottom:.3rem}
.zz__item p{font-size:.92rem;color:var(--text-soft)}
@media(max-width:680px){
  .zz::before{left:17px}
  .zz__item{width:100%;left:0!important;text-align:left!important;padding-left:3.2rem;padding-right:0}
  .zz__item .node{left:0!important;right:auto!important}
}

/* ---- comparison table ---- */
.compare{overflow:hidden;border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-md);background:#fff}
.compare table{width:100%;border-collapse:collapse;font-size:.96rem}
.compare th,.compare td{padding:1rem 1.1rem;text-align:left;border-bottom:1px solid var(--border)}
.compare thead th{font-family:var(--f-display);font-size:.92rem;background:var(--bg-subtle);color:var(--n-700)}
.compare thead th.us{background:var(--grad);color:#fff;border-radius:0}
.compare td.us{background:var(--blue-50);font-weight:600;color:var(--n-900)}
.compare tbody tr:last-child td{border-bottom:0}
.compare .yes{color:#16a34a;font-weight:700}
.compare .no{color:#c0c6d2}
.compare td:first-child{font-weight:600;color:var(--n-800)}
@media(max-width:640px){.compare{font-size:.84rem}.compare th,.compare td{padding:.7rem .6rem}}

/* ---- reference bento mockups ---- */
.refbento{display:grid;gap:1.1rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:780px){.refbento{grid-template-columns:repeat(3,1fr)}}
.refb{position:relative;display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-sm);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}
.refb:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)}
.refb--lg{grid-column:span 2}
@media(max-width:779px){.refb--lg{grid-column:span 2}}
.browser{background:#eef1f6;padding:8px 10px 0;border-bottom:1px solid var(--border)}
.browser__bar{display:flex;align-items:center;gap:6px;padding-bottom:8px}
.browser__bar i{width:9px;height:9px;border-radius:50%;background:#cfd6e2;display:block}
.browser__bar .url{margin-left:8px;flex:1;height:16px;border-radius:8px;background:#fff;border:1px solid #e0e5ee;
  font-size:.62rem;color:#9aa3b8;display:flex;align-items:center;padding:0 8px;overflow:hidden}
.browser__shot{aspect-ratio:16/10;overflow:hidden;background:#fff}
.browser__shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:object-position 3s ease}
.refb:hover .browser__shot img{object-position:bottom}
.refb__foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:1rem 1.2rem}
.refb__foot .t{font-family:var(--f-display);font-weight:700;color:var(--n-900);font-size:1rem}
.refb__foot .tag{font-size:.72rem;font-weight:700;text-transform:uppercase;color:var(--blue-700);background:var(--blue-50);padding:.25rem .55rem;border-radius:var(--r-full)}
.refb__foot .go{color:var(--blue-700)}.refb__foot .go svg{width:15px;height:15px}
/* phone mockup overlay on large cards */
.refb__phone{position:absolute;right:14px;bottom:54px;width:84px;border-radius:14px;border:3px solid #15131a;
  overflow:hidden;box-shadow:0 18px 40px -10px rgba(20,19,24,.4);background:#000;display:none}
@media(min-width:780px){.refb--lg .refb__phone{display:block}}
.refb__phone img{width:100%;display:block}

/* ---- cookie banner ---- */
.cc{position:fixed;left:1rem;right:1rem;bottom:1rem;max-width:560px;margin-inline:auto;z-index:120;
  background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:0 24px 60px -18px rgba(20,40,90,.45);
  padding:1.2rem 1.3rem;display:none;animation:ccUp .5s cubic-bezier(.2,.7,.3,1)}
.cc.show{display:block}
@keyframes ccUp{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
.cc__row{display:flex;gap:.9rem;align-items:flex-start}
.cc__dot{flex:0 0 auto;width:38px;height:38px;border-radius:11px;background:var(--grad);display:grid;place-items:center;color:#fff}
.cc h4{font-size:1rem;margin-bottom:.25rem}
.cc p{font-size:.86rem;color:var(--text-soft)}
.cc__btns{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap}
.cc__btns .btn{flex:1;min-width:120px}

/* ---- section intro with side illustration ---- */
.split-intro{display:grid;gap:2rem;align-items:center}
@media(min-width:880px){.split-intro{grid-template-columns:1.1fr .9fr}}

/* ---- map card ---- */
.mapcard{border-radius:20px;overflow:hidden;box-shadow:0 25px 50px -18px rgba(20,40,90,.35);border:1px solid var(--border);min-height:320px}
.mapcard iframe{width:100%;height:100%;min-height:320px;border:0;display:block}
.infoline{display:flex;gap:.9rem;align-items:center;padding:.7rem 0}
.infoline .ic{flex:0 0 auto;width:44px;height:44px;border-radius:12px;background:var(--grad);display:grid;place-items:center;color:#fff;box-shadow:0 8px 18px -6px rgba(42,84,255,.45)}
.infoline b{display:block;font-family:var(--f-display);font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-soft)}
.infoline a,.infoline span.v{font-weight:600;color:var(--n-900)}

/* ---- blog illustration thumbnails ---- */
.post-card__thumb{display:grid;place-items:center;padding:1.4rem}
.post-card__thumb img.illus{position:relative;width:auto;max-width:62%;max-height:120px;filter:drop-shadow(0 10px 20px rgba(20,40,90,.25))}
.post-card__thumb span{position:relative}
/* article hero with illustration */
.article-hero .ah-grid{display:grid;gap:1.6rem;align-items:center}
@media(min-width:820px){.article-hero .ah-grid{grid-template-columns:1.5fr .5fr}}
.article-hero .ah-art{display:grid;place-items:center}
.article-hero .ah-art img{width:min(60%,180px)}
@media(max-width:819px){.article-hero .ah-art{display:none}}