.ag-hero {
    --zold: #054D3B;
    /* rendszer-betűtípusok: ahol van kerekített változat (Apple, Office), azt használja */
    --betu: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Segoe UI", Roboto, system-ui, sans-serif;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    max-width: 1100px;
    margin: 18px auto 0;
    border-radius: 28px;
    padding: 46px 20px 100px;            /* alul hely a fűnek */
    background: linear-gradient(180deg, #cdeeff 0%, #e6f7ff 55%, #f3fbf4 100%);
    font-family: var(--betu);
    text-align: center;
    box-shadow: 0 8px 30px rgba(5, 77, 59, .10);
  }

  /* --- nap --- */
  .ag-hero__nap {
    position: absolute;
    top: 26px;
    right: 7%;
    width: 110px;
    height: 110px;
    z-index: -1;
  }
  .ag-hero__nap .sugar { transform-origin: 50px 50px; animation: ag-forog 40s linear infinite; }

  /* --- felhők --- */
  .ag-hero__felho {
    position: absolute;
    z-index: -1;
    opacity: .95;
    animation: ag-usz 60s linear infinite;
  }
  .ag-hero__felho--1 { top: 30px;  left: -160px; width: 150px; animation-duration: 70s; }
  .ag-hero__felho--2 { top: 110px; left: -220px; width: 110px; animation-duration: 95s; animation-delay: -40s; }

  @keyframes ag-forog { to { transform: rotate(360deg); } }
  @keyframes ag-usz   { to { transform: translateX(calc(1100px + 400px)); } }

  /* --- cím --- */
  .ag-hero__cim {
    margin: 0;
    font-family: var(--betu);
    font-weight: 800;
    font-size: clamp(2.2rem, 6vw, 3.6rem);
    line-height: 1.05;
    color: var(--zold);
    letter-spacing: .01em;
    text-shadow: 0 3px 0 rgba(255,255,255,.8);
  }
  .ag-hero__cim span { display: inline-block; }
  .ag-hero__al {
    margin: 10px 0 30px;
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    color: #3b5d53;
    font-weight: 600;
  }

  /* --- csempe-gombok --- */
  .ag-hero__gombok {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 220px));
    justify-content: center;
    gap: 18px;
  }
  .ag-hero__gomb {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 150px;
    padding: 18px 14px;
    border-radius: 24px;
    background: var(--hatter);
    color: var(--zold);
    text-decoration: none;
    font-weight: 800;
    font-size: 1.15rem;
    line-height: 1.2;
    border: 3px solid #fff;
    box-shadow: 0 6px 0 var(--arnyek), 0 12px 22px rgba(0,0,0,.10);   /* "vastag" játékos alj */
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
    -webkit-tap-highlight-color: transparent;
  }
  .ag-hero__gomb:hover,
  .ag-hero__gomb:focus-visible {
    transform: translateY(-6px) rotate(var(--billen, -2deg));
    box-shadow: 0 12px 0 var(--arnyek), 0 20px 28px rgba(0,0,0,.14);
    color: var(--zold);
  }
  .ag-hero__gomb:active { transform: translateY(2px); box-shadow: 0 3px 0 var(--arnyek); }
  .ag-hero__gomb:focus-visible { outline: 3px solid var(--zold); outline-offset: 4px; }

  .ag-hero__gomb--sarga { --hatter: #FFE27A; --arnyek: #E8B92E; --billen: -2deg; }
  .ag-hero__gomb--lila  { --hatter: #E7D9FF; --arnyek: #B79AE8; --billen: 2deg; }
  .ag-hero__gomb--rozsa { --hatter: #FFD6E0; --arnyek: #EFA3B6; --billen: -2deg; }

  .ag-hero__ikon { width: 64px; height: 64px; display: block; }

  /* a "Csoportjaink" csempén az 5 jelvény kicsiben, egymásra csúsztatva */
  .ag-hero__jelek { display: flex; justify-content: center; }
  .ag-hero__jelek img {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    margin-left: -16px;
    box-shadow: 0 2px 5px rgba(0,0,0,.18);
    background: #fff;
    transition: transform .25s;
  }
  .ag-hero__jelek img:first-child { margin-left: 0; }
  .ag-hero__gomb:hover .ag-hero__jelek img:nth-child(odd)  { transform: translateY(-4px); }
  .ag-hero__gomb:hover .ag-hero__jelek img:nth-child(even) { transform: translateY(3px); }

  /* --- fű alul --- */
  .ag-hero__fu {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: 100px;
    z-index: -1;
  }

  /* --- telefon / keskeny kijelző --- */
  @media (max-width: 640px) {
    .ag-hero { border-radius: 0 0 24px 24px; margin-top: 0; padding: 74px 16px 84px; }   /* felül hely a napnak, hogy ne takarja a címet */
    .ag-hero__nap { width: 64px; height: 64px; top: 8px; right: 14px; }
    .ag-hero__felho--1 { width: 100px; top: 16px; }
    .ag-hero__felho--2 { display: none; }
    .ag-hero__al { margin-bottom: 22px; }
    .ag-hero__gombok { grid-template-columns: 1fr; max-width: 420px; gap: 14px; }
    .ag-hero__gomb {
      flex-direction: row;                  /* ikon balra, felirat jobbra */
      justify-content: flex-start;
      min-height: 0;
      padding: 12px 16px;
      gap: 14px;
      text-align: left;
      font-size: 1.1rem;
    }
    .ag-hero__ikon { width: 42px; height: 42px; flex: none; }
    .ag-hero__jelek img { width: 34px; height: 34px; margin-left: -12px; }
    .ag-hero__fu { height: 70px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ag-hero__nap .sugar, .ag-hero__felho { animation: none; }
    .ag-hero__felho--1 { left: 6%; }
    .ag-hero__gomb { transition: none; }
  }

  /* a horgonyokhoz ugráskor a ragadós menü ne takarja ki a szakasz elejét
     (a --ag-fejlec értékét a script méri a menü valós magasságából) */
  [id="2"], [id="3"], [id="4"] { scroll-margin-top: var(--ag-fejlec, 150px); }