/* ============================================================================
   Cimlap.
   A felepites a referencia aranyait koveti: egy nagyon nagy, kozepre zart
   cimsor, alatta egy vekony teny-sor, majd valtakozo ritmusban a munkak, egy
   allitas-szekcio es a sablonok. A tipografia viszi az oldalt, nem a diszites.
   ============================================================================ */

/* ---------------------------------------------------------------
   1. Hero
   --------------------------------------------------------------- */
.hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100svh;
    padding-top: calc(72px + var(--space-16));
    padding-bottom: var(--space-16);
    text-align: center;
}

.hero-eyebrow {
    margin-bottom: var(--space-10);
    color: var(--ink-faint);
}

.hero-title {
    margin-inline: auto;
    max-width: 13ch;
}

/* A masodik sor halkabb - a mondat igy ket ritmusban erkezik */
.hero-title .split-line:nth-child(2) {
    color: var(--ink-muted);
}

.hero-lede {
    max-width: 46ch;
    margin: var(--space-10) auto 0;
    color: var(--ink-muted);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-12);
}

/* Teny-sor a hero aljan */
.hero-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-3) var(--space-6);
    margin-top: var(--space-20);
    padding-top: var(--space-8);
    border-top: 1px solid var(--line);
    color: var(--ink-faint);
}

.hero-facts span[aria-hidden] {
    opacity: 0.4;
}

/* Gorgetesre biztato jel */
.hero-scroll {
    display: block;
    width: 1px;
    height: 48px;
    margin: var(--space-12) auto 0;
    background: linear-gradient(to bottom, var(--line-strong), transparent);
    overflow: hidden;
}

.hero-scroll::after {
    content: '';
    display: block;
    width: 100%;
    height: 40%;
    background-color: var(--ink);
    animation: hero-scroll-run 2.4s var(--ease-in-out-quint) infinite;
}

@keyframes hero-scroll-run {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(250%); }
}

@media (max-width: 768px) {
    .hero {
        min-height: auto;
        padding-top: calc(72px + var(--space-20));
        padding-bottom: var(--space-12);
    }

    .hero-facts {
        margin-top: var(--space-12);
    }
}

/* ---------------------------------------------------------------
   1/b. Szalag
   ----------------------------------------------------------------
   Nagy, halk tipografia egy vekony savban. A meret a cimsor-skalarol
   jon, de a szin a halvany fokozat: a szalagnak jelen kell lennie,
   nem elvinnie a figyelmet. A mozgast a motion.js adja.
   --------------------------------------------------------------- */
.ribbon {
    padding-block: var(--space-16);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}

.ribbon-word {
    font-size: var(--text-3);
    letter-spacing: -0.02em;
    color: var(--ink-faint);
}

.ribbon-dot {
    font-size: var(--text-4);
    color: var(--line-strong);
}

/* ---------------------------------------------------------------
   2. Allitas-szekcio
   Egy nagy mondat, sok levegovel - a szekciok kozotti szunet.
   --------------------------------------------------------------- */
.statement {
    padding-block: var(--space-41);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

/* Itt szandekosan NINCS ch-ben megadott szelesseg.
   A "ch" mindig az ELEM sajat betumeretehez mer, ez a doboz viszont 18px-es
   folyoszoveget orokol - a 22ch igy ~248px lett, amibe a 96px-es cimsor
   sorai nem fertek be, es otsoros, bal oldalra szorult oszlop lett belole.
   A harom sort amugy is kezzel torjuk (harom .split-line), tehat nincs mit
   korlatozni: a racs szelessege a hatar. */
.statement-inner {
    max-width: none;
}

.statement-mark {
    display: block;
    margin-top: var(--space-8);
    color: var(--ink-faint);
}

@media (max-width: 768px) {
    .statement {
        padding-block: var(--space-24);
    }
}

/* ---------------------------------------------------------------
   3. Kepessegek sav
   --------------------------------------------------------------- */
.capabilities {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-12);
}


.capability {
    padding-top: var(--space-6);
    border-top: 1px solid var(--ink);
}

.capability-index {
    display: block;
    margin-bottom: var(--space-5);
    color: var(--ink-faint);
}

.capability h3 {
    margin-bottom: var(--space-4);
}

.capability p {
    color: var(--ink-muted);
}

.capability-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
    font-family: var(--font-mono);
    font-size: var(--text-8);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink);
}

@media (max-width: 900px) {
    .capabilities {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-10);
    }
}