/* =============================================================================
   far360 — PUBLIKUS HERO-SZEKCIÓ a marketing-kezdőlap formanyelvével.

   Megrendelői döntés (2026-09-20): „a lapok nézzenek ki úgy, mint az új
   reklám-kezdőlap". Amit ÁTVESZÜNK: a hűvös törtfehér lap 40 px-es sarkokkal, az
   óriás Archivo-címsor szoros betűközzel és szoros sortávval, a DM Mono
   szemöldök-felirat, a pirula-gombok sora.

   A dekoratív formák a doboz NÉGY SARKÁBAN ülnek (shapes.css), a szöveg pedig a
   sarkoktól befelé eső sávban: a hero vízszintes belső margója tartja távol őket
   egymástól, a címsor pedig nem törik sorba (lásd lent). 860 px alatt a formák
   eltűnnek, mert ott a szöveg a teljes szélességet megkapja. A hero CSAK a publikus kezdő- és köszönő-oldalon jelenik meg;
   a varázsló lépései, a portál-listák és az admin munkafelületek (DESIGN.md).
   ============================================================================= */
.f-hero {
    position: relative;
    z-index: 0;
    overflow: hidden;
    margin: -0.75rem 0 2.5rem;
    padding: clamp(2.25rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem) clamp(2.25rem, 4.5vw, 3.25rem);
    border-radius: var(--f-radius-section);
    background: var(--f-hero);
}

.f-hero__inner {
    position: relative;
    z-index: 1;
    /* A formák a sarkokban ülnek, ezért a szövegoszlop szélesebb lehet; a felső és
       alsó sarok-sávot a hero függőleges belső margója tartja szabadon. */
    max-width: min(52rem, 82%);
}

.f-hero h1 {
    margin-bottom: 0.5em;
    font-size: var(--t-h1-hero);
    font-weight: 500;
    line-height: 0.99;
    letter-spacing: -0.048em;
    /* Megrendelői kérés (2026-09-20): a hero-címsor EGY SORBAN álljon. A betűméret
       a rendelkezésre álló szélességhez igazodik, ezért a cím akkor sem törik, ha
       a képernyő keskenyebb — 640 px alatt viszont engedjük a tördelést, mert ott
       a zsugorítás már olvashatatlan méretet adna. */
    text-wrap: nowrap;
    font-size: min(var(--t-h1-hero), 9.2vw);
}

@media (max-width: 640px) {
    .f-hero h1 {
        text-wrap: balance;
        font-size: var(--t-h1-hero);
    }
}

.f-hero .f-lead {
    max-width: 38rem;
    font-size: var(--t-lead);
}

.f-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 1.5rem;
}

/* DM Mono szemöldök-felirat a címsor fölött. */
.f-eyebrow {
    display: block;
    margin-bottom: 1rem;
    font-family: var(--f-font-mono);
    font-size: var(--t-mono);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--f-primary);
}

@media (max-width: 860px) {
    /* Nincs forma (shapes.css), tehát a szöveg megkapja a teljes szélességet. */
    .f-hero__inner { max-width: 100%; }
}