/* ============================================================
   home.css — Főoldal (homepage) components.
   Extends styles.css; never overrides the locked baseline tokens.
   Reuses .section / .section-head / .btn / .experts / .expert / .eyebrow.
   ============================================================ */

/* shared little text link with arrow */
.text-link{
  display:inline-flex;align-items:center;gap:7px;margin-top:26px;
  font-size:15px;font-weight:500;color:var(--navy);
}
.text-link .arr{color:var(--accent);font-size:16px;transition:transform .15s ease;}
.text-link:hover{color:var(--accent-press);}
.text-link:hover .arr{transform:translateX(3px);}

.section-note{font-size:15.5px;color:var(--muted);margin-top:26px;max-width:60ch;text-wrap:pretty;}

/* ===========================================================
   S1 — Hero float kártya mint blogbejegyzés-promó
   =========================================================== */
.hero-float{display:block;text-decoration:none;color:inherit;cursor:pointer;}
.hero-float:hover{border-color:var(--accent);}
.hero-float .teaser{font-size:12.5px;line-height:1.46;color:var(--muted);margin-top:8px;text-wrap:pretty;}
.hero-float .cta{
  font-family:var(--font-label);font-size:11.5px;letter-spacing:var(--label-tracking);
  font-weight:500;color:var(--accent-text);display:inline-flex;align-items:center;gap:6px;
}
.hero-float .cta .arr{font-size:13px;transition:transform .15s ease;}
.hero-float:hover .cta .arr{transform:translateX(3px);}
/* photo (glass) hero: lift text + CTA for contrast on the dark card */
body[data-herobg]:not([data-herobg="none"]) .hero .hero-float .teaser{color:rgba(233,240,246,.82);}
body[data-herobg]:not([data-herobg="none"]) .hero .hero-float .cta{color:#F4A937;}

/* ===========================================================
   S1.5 — Bizalom (logó-sáv)
   =========================================================== */
.logo-band{padding:38px 0;border-bottom:1px solid var(--line);background:var(--bg);}
.logo-band .wrap{display:flex;align-items:center;gap:40px;flex-wrap:wrap;}
.logo-band-label{white-space:nowrap;color:var(--faint);}
.logo-strip{
  flex:1;display:grid;grid-template-columns:repeat(3,1fr);
  gap:18px;align-items:center;min-width:0;
}
.logo-img{
  display:block;width:100%;height:80px;
  object-fit:contain;padding:16px 22px;box-sizing:border-box;
  background:#fff;border:1px solid var(--line);border-radius:10px;
}
@media (max-width:760px){
  .logo-band .wrap{gap:22px;}
  .logo-strip{grid-template-columns:repeat(3,1fr);width:100%;flex:none;gap:12px;}
  .logo-img{padding:12px 14px;height:64px;}
}

/* ===========================================================
   S2 — A probléma ("Ismeri ezt?")
   =========================================================== */
.prob-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.prob-card{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;
}
.prob-card .pc-num{
  font-family:var(--font-label);font-size:12.5px;font-weight:500;
  color:var(--accent-text);letter-spacing:var(--label-tracking);flex-shrink:0;padding-top:1px;
}
.prob-card p{font-size:15.5px;color:var(--ink);line-height:1.55;text-wrap:pretty;}

/* ===========================================================
   S3 — A megoldás (value cards)
   =========================================================== */
.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.value-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.value-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px 22px;display:flex;flex-direction:column;
}
.v-ic{
  width:42px;height:42px;border:1px solid var(--line-strong);border-radius:9px;
  display:flex;align-items:center;justify-content:center;color:var(--accent-text);
  background:var(--accent-tint);margin-bottom:18px;
}
.v-ic svg{width:21px;height:21px;}
.value-card h3{font-size:16px;font-weight:500;color:var(--navy);letter-spacing:-.005em;line-height:1.25;text-wrap:balance;}
.value-card p{font-size:13.5px;color:var(--muted);margin-top:9px;line-height:1.5;text-wrap:pretty;}

/* ===========================================================
   S4 — Hogyan kezdjük (process steps)
   =========================================================== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.step{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px 24px;display:flex;flex-direction:column;position:relative;
}
.step.is-free{border:1.5px solid var(--accent);}
.step .st-num{
  font-family:var(--font-label);font-size:12.5px;font-weight:500;
  color:var(--navy);letter-spacing:var(--label-tracking);
}
.step.is-free .st-num{color:var(--accent-text);}
.step .st-free-tag{
  display:inline-block;margin-left:8px;font-family:var(--font-label);font-size:10.5px;
  letter-spacing:var(--label-tracking);color:var(--on-accent);background:var(--accent);
  border-radius:20px;padding:2px 9px;vertical-align:middle;
}
.step h3{font-size:18px;font-weight:500;color:var(--navy);margin-top:14px;letter-spacing:-.008em;}
.step p{font-size:14px;color:var(--muted);margin-top:9px;line-height:1.55;text-wrap:pretty;}
.phase-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;}
.phase-chips span{
  font-family:var(--font-label);font-size:11px;letter-spacing:var(--label-tracking);
  color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:4px 10px;background:#fff;
}
.steps-cta{margin-top:30px;}

/* ===========================================================
   S5 — Az Ön iparága (industry grid)
   =========================================================== */
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.ind-card{
  display:flex;align-items:center;gap:13px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 18px;transition:border-color .15s ease,transform .15s ease;
}
.ind-card .i-ic{
  width:34px;height:34px;flex-shrink:0;border:1px solid var(--line-strong);border-radius:8px;
  display:flex;align-items:center;justify-content:center;color:var(--navy);background:#fff;
}
.ind-card .i-ic svg{width:19px;height:19px;}
.ind-card .i-name{font-size:14.5px;font-weight:500;color:var(--navy);line-height:1.25;flex:1;text-wrap:balance;}
.ind-card .arr{color:var(--line-strong);font-size:16px;transition:transform .15s ease,color .15s ease;}
.ind-card:hover{border-color:var(--accent);}
.ind-card:hover .arr{color:var(--accent);transform:translateX(3px);}
.ind-card:hover .i-ic{border-color:var(--accent);color:var(--accent-text);}

/* ===========================================================
   S6 — experts credibility (reuses .experts/.expert)
   =========================================================== */
.experts.cols-2{grid-template-columns:repeat(2,1fr);gap:20px;max-width:760px;}
.expert image-slot.portrait{display:block;width:100%;height:320px;border-bottom:1px solid var(--line);}
.expert .bio{font-size:13.5px;color:var(--muted);margin-top:10px;line-height:1.55;text-wrap:pretty;}
.cred-points{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;}
.cred-points .cp{
  flex:1 1 200px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);padding:18px 20px;
}
.cred-points .cp-n{display:block;font-size:22px;font-weight:500;color:var(--navy);letter-spacing:-.01em;}
.cred-points .cp-l{display:block;font-size:13px;color:var(--muted);margin-top:6px;line-height:1.45;text-wrap:pretty;}

/* ===========================================================
   S7 — A gyakorlatból (reference case)
   =========================================================== */
.home-case{
  border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius);
  background:var(--paper);padding:30px 32px;max-width:840px;
}
.home-case .hc-tag{
  font-family:var(--font-label);font-size:11.5px;letter-spacing:var(--label-tracking);color:var(--accent-text);
}
.home-case .hc-rows{display:grid;gap:14px;margin-top:18px;}
.home-case .hc-row{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:baseline;}
.home-case .hc-k{
  font-family:var(--font-label);font-size:11.5px;letter-spacing:var(--label-tracking);
  color:var(--faint);padding-top:2px;
}
.home-case .hc-v{font-size:16px;line-height:1.55;color:var(--ink);text-wrap:pretty;}

/* ===========================================================
   S8 — Tudásközpont (pillar links)
   =========================================================== */
.kn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.kn-card{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 20px;min-height:84px;transition:border-color .15s ease;
}
.kn-card span:first-child{font-size:15px;font-weight:500;color:var(--navy);line-height:1.3;text-wrap:balance;}
.kn-card .arr{color:var(--accent);font-size:16px;transition:transform .15s ease;}
.kn-card:hover{border-color:var(--line-strong);}
.kn-card:hover .arr{transform:translateX(3px);}

/* ===========================================================
   S9 — ATEXdb (auxiliary, restrained)
   =========================================================== */
.atexdb-note{
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);padding:26px 30px;
}
.atexdb-note .an-tag{
  font-family:var(--font-label);font-size:11.5px;letter-spacing:var(--label-tracking);color:var(--faint);
}
.atexdb-note h3{font-size:19px;font-weight:500;color:var(--navy);margin-top:7px;letter-spacing:-.008em;}
.atexdb-note p{font-size:14.5px;color:var(--muted);margin-top:6px;max-width:52ch;text-wrap:pretty;}

/* ===========================================================
   S10 — Záró CTA (full-width navy band)
   =========================================================== */
.home-closing{background:var(--navy);color:#fff;padding:76px 0;}
.home-closing .wrap{max-width:780px;text-align:center;}
.home-closing h2{font-size:34px;line-height:1.12;font-weight:500;letter-spacing:-.015em;color:#fff;text-wrap:balance;}
.home-closing p{font-size:17px;color:#AFC0CD;margin-top:16px;text-wrap:pretty;}
.closing-actions{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:30px;}
.closing-sec{font-size:14.5px;color:#AFC0CD;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(175,192,205,.5);}
.closing-sec:hover{color:#fff;}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:980px){
  .value-grid{grid-template-columns:repeat(2,1fr);}
  .value-grid.cols-3{grid-template-columns:repeat(2,1fr);}
  .ind-grid{grid-template-columns:repeat(2,1fr);}
  .kn-grid{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:1fr;}
  .experts.cols-2{grid-template-columns:1fr;max-width:420px;}
}
@media (max-width:640px){
  .prob-grid{grid-template-columns:1fr;}
  .value-grid{grid-template-columns:1fr;}
  .value-grid.cols-3{grid-template-columns:1fr;}
  .ind-grid{grid-template-columns:1fr;}
  .kn-grid{grid-template-columns:1fr;}
  .home-case{padding:24px 22px;}
  .home-case .hc-row{grid-template-columns:1fr;gap:4px;}
  .home-closing h2{font-size:27px;}
}