/* ============================================================================
   Szoveges oldalak: szolgaltatasok, rolam, kapcsolat, jogi oldalak, hibaoldalak.
   ============================================================================ */

/* ---------------------------------------------------------------
   1. Kapcsolat
   --------------------------------------------------------------- */
.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-16);
    align-items: start;
}

.contact-lede {
    max-width: 42ch;
    margin-top: var(--space-6);
    color: var(--ink-muted);
}

.contact-channels {
    margin-top: var(--space-10);
    border-top: 1px solid var(--line);
}

.contact-channel {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--line);
    transition: padding-left 0.45s var(--ease-out-expo);
}

.contact-channel:hover {
    padding-left: var(--space-3);
}

.contact-channel-label {
    font-family: var(--font-mono);
    font-size: var(--text-8);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.contact-channel-value {
    font-size: var(--text-5);
    color: var(--ink);
    text-align: right;
}

.contact-card {
    padding: var(--space-10);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background-color: var(--paper-raised);
    box-shadow: var(--shadow-card);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.contact-form .btn {
    align-self: flex-start;
    margin-top: var(--space-2);
}

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

    .contact-card {
        padding: var(--space-6);
    }
}

/* ---------------------------------------------------------------
   2. Szolgaltatasok - csomagok
   --------------------------------------------------------------- */
.tiers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
}

/* Harom csomag, harom oszlop. Kettonel a Premium egyedul maradna egy
   sorban, es ugy ugy nezne ki, mint egy utolagos kiegeszites. */
.tiers-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* A harom keskeny oszlop kozepes nezetben csak akkor olvashato, ha a
   kartya belso parnazasa is osszehuzodik vele. */
@media (max-width: 1100px) and (min-width: 901px) {
    .tiers-3 .tier {
        padding: var(--space-8) var(--space-6);
    }
}

.tier {
    display: flex;
    flex-direction: column;
    padding: var(--space-10);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background-color: var(--paper-sunken);
    transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s ease, border-color 0.4s ease;
}

.tier:hover {
    transform: translateY(-5px);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-card);
}

/* A legkeresettebb csomag invertalva emelkedik ki - monokrom kiemeles */
.tier-featured {
    background-color: var(--invert-bg);
    border-color: var(--invert-bg);
    color: var(--invert-ink);
}

.tier-featured .tier-name,
.tier-featured .tier-price,
.tier-featured p,
.tier-featured li {
    color: var(--invert-ink);
}

.tier-featured .tier-index,
.tier-featured .tier-timeline {
    color: var(--invert-ink);
    opacity: 0.55;
}

.tier-featured .tier-list,

:root[data-theme='dark'] .tier-featured .tier-list,

.tier-index {
    display: block;
    margin-bottom: var(--space-6);
    font-family: var(--font-mono);
    font-size: var(--text-8);
    letter-spacing: 0.05em;
    color: var(--ink-faint);
}

.tier-badge {
    display: inline-block;
    margin-bottom: var(--space-4);
    padding: var(--space-1) var(--space-3);
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tier-price {
    margin: var(--space-3) 0 var(--space-5);
    font-size: var(--text-5);
    color: var(--ink-muted);
}

.tier-list {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
}

.tier-list li {
    position: relative;
    padding-left: var(--space-6);
    font-size: var(--text-7);
    font-weight: 400;
    color: var(--ink-muted);
}

.tier-list li + li {
    margin-top: var(--space-3);
}

.tier-list li::before {
    content: '';
    position: absolute;
    top: 0.7em;
    left: 0;
    width: 10px;
    height: 1px;
    background-color: currentColor;
    opacity: 0.6;
}

/* Tobb sor is kerulhet ide (atfutas, egyedi ar, hivatkozas), ezert
   egymas ala allnak - egy sorban osszefolynanak. */
.tier-foot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-8);
}

.tier-timeline {
    font-family: var(--font-mono);
    font-size: var(--text-8);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

@media (max-width: 900px) {
    .tiers {
        grid-template-columns: minmax(0, 1fr);
    }

    .tier {
        padding: var(--space-8) var(--space-6);
    }
}

/* Atvezetes az olcsobb utra. Szandekosan NEM ugy nez ki, mint egy
   csomag-kartya: nem az arlista otodik eleme, hanem egy masik ajto. */
.crosssell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    margin-top: var(--space-16);
    padding: var(--space-10);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-card);
}

.crosssell-body {
    margin-top: var(--space-5);
    max-width: 62ch;
    color: var(--ink-muted);
}

.crosssell-cta {
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .crosssell {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-8);
        padding: var(--space-8) var(--space-6);
    }
}

/* ---------------------------------------------------------------
   3. Folyamat
   --------------------------------------------------------------- */
.steps {
    border-top: 1px solid var(--line);
}

.step {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--space-8);
    align-items: baseline;
    padding: var(--space-8) var(--space-2);
    border-bottom: 1px solid var(--line);
    transition: background-color 0.45s ease, padding-left 0.5s var(--ease-out-expo);
}

.step:hover {
    background-color: var(--paper-sunken);
    padding-left: var(--space-5);
}

.step-number {
    font-family: var(--font-mono);
    font-size: var(--text-8);
    letter-spacing: 0.05em;
    color: var(--ink-faint);
}

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

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

    .step p {
        grid-column: 2;
    }
}

/* ---------------------------------------------------------------
   4. Harmonika (GYIK, ertekek, termekadatok)
   --------------------------------------------------------------- */
.accordion {
    border-top: 1px solid var(--line);
}

.accordion-item {
    border-bottom: 1px solid var(--line);
}

.accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    width: 100%;
    padding: var(--space-6) 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-size: var(--text-5);
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--ink);
    transition: padding-left 0.45s var(--ease-out-expo);
}

.accordion-trigger:hover {
    padding-left: var(--space-3);
}

.accordion-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    position: relative;
}

/* Plusz -> minusz: csak a fuggoleges szar fordul el */
.accordion-icon::before,
.accordion-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1.5px;
    background-color: currentColor;
    transition: transform 0.45s var(--ease-out-expo);
}

.accordion-icon::after {
    transform: rotate(90deg);
}

.accordion-item.is-open .accordion-icon::after {
    transform: rotate(0deg);
}

.accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s var(--ease-out-expo);
}

.accordion-item.is-open .accordion-panel {
    grid-template-rows: 1fr;
}

.accordion-panel > div {
    overflow: hidden;
}

.accordion-panel p {
    max-width: 68ch;
    padding-bottom: var(--space-6);
    color: var(--ink-muted);
}

/* ---------------------------------------------------------------
   5. Rolam
   --------------------------------------------------------------- */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: var(--space-16);
    align-items: start;
}

.split-body > p + p {
    margin-top: var(--space-5);
}

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

.about-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
}

.about-card {
    display: block;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    overflow: hidden;
    background-color: var(--paper-sunken);
    transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s ease, border-color 0.4s ease;
}

.about-card:hover {
    transform: translateY(-5px);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-card-hover);
}

.about-card .frame {
    aspect-ratio: 16 / 10;
    border-radius: 0;
}

.about-card-body {
    padding: var(--space-8);
}

.about-card-body p {
    margin: var(--space-4) 0 var(--space-6);
    color: var(--ink-muted);
}

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

/* ---------------------------------------------------------------
   6. Jogi es hibaoldalak
   --------------------------------------------------------------- */
.prose {
    max-width: 68ch;
}

.prose h2 {
    margin-top: var(--space-12);
    margin-bottom: var(--space-4);
    font-size: var(--text-4);
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ink);
}

.prose h3 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
    font-size: var(--text-5);
    font-weight: 600;
    color: var(--ink);
}

.prose p,
.prose li {
    margin-bottom: var(--space-4);
    font-size: var(--text-6);
    line-height: 1.65;
    color: var(--ink-muted);
}

.prose ul {
    margin-bottom: var(--space-6);
    padding-left: var(--space-5);
    list-style: disc;
}

.prose li {
    margin-bottom: var(--space-2);
}

.prose a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.prose strong {
    color: var(--ink);
    font-weight: 600;
}

/* Gepelt nev a folyoszovegben: sutinev, adatbazisnev, utvonal. Nem
   kodblokk, csak annyi jelzes, hogy ez szo szerint ertendo. */
.prose code,
.legal-table code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    color: var(--ink);
}

.prose dl {
    margin-bottom: var(--space-6);
}

.prose dt {
    margin-top: var(--space-4);
    font-weight: 600;
    color: var(--ink);
}

.prose dd {
    color: var(--ink-muted);
}

/* Hibaoldal */
.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 78svh;
    padding-top: calc(72px + var(--space-16));
    text-align: center;
}

.error-code {
    font-size: var(--text-1);
    font-weight: 600;
    line-height: 0.85;
    letter-spacing: -0.05em;
    color: var(--ink);
}

.error-message {
    max-width: 44ch;
    margin: var(--space-8) auto 0;
    color: var(--ink-muted);
}

.error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-10);
}

/* Kiemelt adatblokk a jogi oldalakon (szolgaltatoi adatok, adatkezelo) */
.legal-card {
    margin: var(--space-6) 0 var(--space-8);
    padding: var(--space-8);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background-color: var(--paper-sunken);
}

.legal-card p:last-child,
.legal-card dd:last-child {
    margin-bottom: 0;
}

/* Jogi tablazat.
   A jogi szovegek tablai kesztol jobbra hosszuak (dij, oldalszam, hatarido
   egy sorban), ezert sajat gorgetheto sav viszi oket: a tablazat sose
   tolhatja oldalra az egesz lapot egy keskeny kepernyon. */
.legal-scroll {
    margin: var(--space-6) 0 var(--space-8);
    overflow-x: auto;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-7);
    line-height: 1.5;
    text-align: left;
}

.legal-table th,
.legal-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--line);
    color: var(--ink-muted);
    vertical-align: top;
}

.legal-table th:first-child,
.legal-table td:first-child {
    padding-left: 0;
}

.legal-table thead th {
    border-bottom: 1px solid var(--ink);
    font-family: var(--font-mono);
    font-size: var(--text-8);
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink);
    white-space: nowrap;
}

.legal-table tbody th {
    font-weight: 600;
    color: var(--ink);
}

.legal-table tbody tr:last-child th,
.legal-table tbody tr:last-child td {
    border-bottom: 0;
}

/* ---------------------------------------------------------------
   7. Kiegeszitok
   Nem csomagkartya: ezek kis tetelek, ezert nincs keretuk sem. A
   felso vonal es az ar viszi a ritmust.
   --------------------------------------------------------------- */
.addons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-12) var(--space-10);
}

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

.addon-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
}

.addon-price {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: var(--text-8);
    letter-spacing: 0.03em;
    color: var(--ink);
    white-space: nowrap;
}

.addon-summary {
    margin-top: var(--space-4);
    color: var(--ink-muted);
}

/* Ami mar benne van egy szintben: halvany, de nem elrejtett - pont ez
   az az informacio, ami penzt sporol az olvasonak. */
.addon-included {
    display: inline-block;
    margin-top: var(--space-5);
    padding: var(--space-1) var(--space-3);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

@media (max-width: 1000px) {
    .addons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

/* ---------------------------------------------------------------
   8. Alapito
   A portre nem dekoracio: ez az egyetlen hely az oldalon, ahol arc
   van. Ezert kap sajat oszlopot, nem egy kis kerek belyegkepet.
   --------------------------------------------------------------- */
.founder {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: var(--space-16);
    align-items: center;
}

.founder-portrait {
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-card);
    /* A felvetel fekete hatteru, ezert vilagos temaban is sotet folt
       marad - szandekosan. A sunken hatter csak addig latszik, amig a
       kep megerkezik. */
    background-color: var(--paper-sunken);
    aspect-ratio: 4 / 5;
}

.founder-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* A fej a kep felso haromnegyedeben ul; kozepre vagva a homlok
       levagodna. */
    object-position: center 30%;
}

.founder-name {
    margin-top: var(--space-4);
}

.founder-lede {
    margin-top: var(--space-8);
    max-width: 46ch;
}

.founder-body > p + p {
    margin-top: var(--space-5);
    color: var(--ink-muted);
}

/* Negy savra osztva, mert a harom ertek nem egyforma hosszu: a
   technologia-lista ketszer annyi helyet kap, kulonben harom sorra
   toredezne, mig a masik ketto egysoros marad. */
.founder-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-10);
    padding-top: var(--space-6);
    border-top: 1px solid var(--line);
}

.founder-fact-wide {
    grid-column: span 2;
}

.founder-facts dt {
    font-family: var(--font-mono);
    font-size: var(--text-8);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.founder-facts dd {
    margin-top: var(--space-2);
    font-size: var(--text-7);
    color: var(--ink);
}

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

    /* Telefonon a portre szelesebb es alacsonyabb: allo kepkent az
       egesz elso kepernyot elvinne. */
    .founder-portrait {
        aspect-ratio: 3 / 2;
    }

    .founder-facts {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-5);
    }

    .founder-fact-wide {
        grid-column: auto;
    }

    .founder-facts div + div {
        padding-top: var(--space-5);
        border-top: 1px solid var(--line);
    }
}