.home-hero {
  border-bottom: 1px solid var(--border);
  background: var(--surface-info);
}

.home-hero-inner {
  padding-top: 40px;
  padding-bottom: 40px;
  text-align: center;
}

.home-hero h1 {
  max-width: 760px;
  margin: 0 auto 12px;
  font-size: clamp(2rem, 5vw, 3.35rem);
  line-height: 1.08;
}

.home-hero > .container > p {
  max-width: 680px;
  margin: 0 auto;
  color: var(--text-light);
  font-size: 1.05rem;
  line-height: 1.65;
}

.home-search {
  margin: 28px auto 14px;
  text-align: left;
}

.home-search label {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 750;
}

.home-search input {
  min-height: 56px;
  border-color: #b8c7db;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07);
}

.primary-link,
.text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  color: var(--primary);
  font-weight: 800;
  text-decoration: none;
}

.primary-link::after,
.text-link::after {
  content: "→";
  margin-left: 8px;
}

.primary-link:focus-visible,
.text-link:focus-visible {
  outline: 3px solid rgba(11, 102, 242, 0.28);
  outline-offset: 3px;
}

.home-sections {
  padding-top: 8px;
  padding-bottom: var(--space-xl);
}

.home-section,
.learning-highlight,
.trust-band,
.about-home,
.home-faq {
  margin: 48px 0;
}

.section-intro {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}

.section-intro h2,
.learning-highlight h2,
.about-home h2,
.home-faq h2 {
  margin: 0;
  line-height: 1.2;
}

.section-intro > p {
  max-width: 600px;
  margin: 0;
  color: var(--text-light);
  line-height: 1.6;
}

.category-grid {
  display: grid;
  gap: var(--space-md);
}

.home-category-grid .card,
.popular-grid .card {
  min-height: 154px;
}

.home-category-grid .card h3,
.popular-grid .card h3 {
  margin: 0 0 8px;
  padding-right: 72px;
  font-size: 1.08rem;
}

.home-category-grid .card p,
.popular-grid .card p {
  max-width: 80%;
  margin: 0;
}

.learning-highlight {
  display: grid;
  align-items: center;
  gap: 18px;
  padding: 24px 0;
  border-top: 1px solid #b9d0f5;
  border-bottom: 1px solid #b9d0f5;
}

.learning-highlight p {
  max-width: 680px;
  margin: 10px 0 0;
  color: var(--text-light);
  line-height: 1.65;
}

.learning-mark {
  width: 58px;
  height: 58px;
  background: url("../../favicon/kb-logo-mark.png") center / contain no-repeat;
}

.trust-band {
  padding: 24px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.trust-band ul {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trust-band li {
  min-width: 0;
}

.trust-band strong,
.trust-band span {
  display: block;
}

.trust-band strong {
  margin-bottom: 4px;
  color: var(--text);
}

.trust-band span,
.trust-band > p {
  color: var(--text-light);
  font-size: 0.92rem;
  line-height: 1.5;
}

.trust-band > p {
  margin: 20px 0 0;
}

.about-home {
  display: grid;
  gap: 20px;
}

.about-home p {
  margin: 0 0 14px;
  color: var(--text-light);
  line-height: 1.75;
}

.home-faq {
  max-width: 820px;
}

@media (min-width: 620px) {
  .trust-band ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .home-hero-inner {
    padding-top: 56px;
    padding-bottom: 50px;
  }

  .section-intro {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.7fr);
    align-items: end;
  }

  .section-intro .text-link {
    justify-self: end;
  }

  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .learning-highlight {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 28px 0;
  }

  .trust-band ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .about-home {
    grid-template-columns: minmax(220px, 0.65fr) minmax(0, 1.35fr);
  }
}

@media (min-width: 1024px) {
  .category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 380px) {
  .home-hero-inner {
    padding-top: 32px;
    padding-bottom: 34px;
  }

  .home-hero h1 {
    font-size: 1.9rem;
  }

  .home-category-grid .card h3,
  .popular-grid .card h3 {
    padding-right: 56px;
  }
}

/* Finom, teljesítménykímélő hero háttéranimáció */
.home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 12%, rgba(11, 102, 242, 0.10), transparent 32%),
    radial-gradient(circle at 84% 78%, rgba(67, 145, 255, 0.09), transparent 34%),
    linear-gradient(135deg, var(--surface-info) 0%, #f7fbff 52%, var(--surface-info) 100%);
}

.home-hero-inner {
  position: relative;
  z-index: 2;
}

.home-hero-motion {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.9;
}

.hero-orb,
.hero-symbol,
.hero-chart {
  position: absolute;
  display: block;
  will-change: transform;
}

.hero-orb {
  border-radius: 50%;
  filter: blur(1px);
  background: linear-gradient(145deg, rgba(11, 102, 242, 0.10), rgba(77, 156, 255, 0.03));
  border: 1px solid rgba(11, 102, 242, 0.08);
}

.hero-orb-one {
  width: 260px;
  height: 260px;
  top: -155px;
  left: -70px;
  animation: hero-float-one 18s ease-in-out infinite alternate;
}

.hero-orb-two {
  width: 330px;
  height: 330px;
  right: -170px;
  bottom: -235px;
  animation: hero-float-two 22s ease-in-out infinite alternate;
}

.hero-symbol {
  color: rgba(11, 102, 242, 0.12);
  font-weight: 800;
  line-height: 1;
  user-select: none;
}

.hero-symbol-one {
  top: 21%;
  left: 7%;
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  animation: hero-drift 16s ease-in-out infinite alternate;
}

.hero-symbol-two {
  top: 14%;
  right: 11%;
  font-size: clamp(2rem, 4vw, 3.6rem);
  animation: hero-drift 19s ease-in-out -5s infinite alternate-reverse;
}

.hero-symbol-three {
  right: 5%;
  bottom: 16%;
  font-size: clamp(2rem, 4.5vw, 4rem);
  animation: hero-drift 17s ease-in-out -8s infinite alternate;
}

.hero-chart {
  width: 190px;
  height: 82px;
  opacity: 0.16;
  background:
    linear-gradient(135deg, transparent 0 17%, rgba(11, 102, 242, 0.65) 17.5% 19%, transparent 19.5% 37%, rgba(11, 102, 242, 0.65) 37.5% 39%, transparent 39.5% 58%, rgba(11, 102, 242, 0.65) 58.5% 60%, transparent 60.5% 77%, rgba(11, 102, 242, 0.65) 77.5% 79%, transparent 79.5%);
  mask: linear-gradient(#000 0 0);
  clip-path: polygon(0 78%, 18% 60%, 38% 71%, 58% 34%, 78% 48%, 100% 9%, 100% 17%, 79% 57%, 59% 43%, 39% 80%, 19% 69%, 0 88%);
}

.hero-chart-one {
  left: 12%;
  bottom: 8%;
  transform: rotate(-4deg);
  animation: hero-chart-pulse 12s ease-in-out infinite alternate;
}

.hero-chart-two {
  top: 26%;
  right: 17%;
  width: 150px;
  height: 65px;
  transform: rotate(8deg) scaleX(-1);
  animation: hero-chart-pulse 15s ease-in-out -4s infinite alternate-reverse;
}

.home-hero .section-label,
.home-hero h1,
.home-hero-inner > p,
.home-search,
.home-hero .primary-link {
  position: relative;
  z-index: 3;
}

@keyframes hero-float-one {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(38px, 26px, 0) scale(1.08); }
}

@keyframes hero-float-two {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-44px, -22px, 0) scale(1.06); }
}

@keyframes hero-drift {
  from { transform: translate3d(0, 0, 0) rotate(-4deg); }
  to { transform: translate3d(18px, -14px, 0) rotate(5deg); }
}

@keyframes hero-chart-pulse {
  from { opacity: 0.10; transform: translate3d(0, 0, 0) rotate(-4deg); }
  to { opacity: 0.22; transform: translate3d(12px, -8px, 0) rotate(1deg); }
}

@media (max-width: 767px) {
  .home-hero-motion {
    opacity: 0.72;
  }

  .hero-chart {
    width: 125px;
    height: 54px;
  }

  .hero-chart-one {
    left: -14px;
    bottom: 5%;
  }

  .hero-chart-two {
    right: -28px;
    top: 22%;
  }

  .hero-symbol-one {
    left: 2%;
  }

  .hero-symbol-two {
    right: 4%;
  }

  .hero-symbol-three {
    right: 1%;
    bottom: 10%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-motion * {
    animation: none !important;
    will-change: auto;
  }
}