/*
Theme Name: Nerola
Theme URI: https://nerola.hu
Author: Bognár Eszter
Description: A nerola.hu egyoldalas témája. A teljes tartalom az index.php fájlban van, közvetlenül szerkeszthető. Szándékosan minimális PHP.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Minden jog fenntartva
Text Domain: nerola
*/

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* PALETTA — viktoriánus botanikai, neroli (narancsvirág).
       olive  = az illusztráció levele. SOHA nem szöveg (2,8:1, olvashatatlan).
       sage   = UI kiemelés: címkék, szegélyek, árak, ikonok (5,4:1).
       cream  = fő szövegszín (15,4:1).
       terra  = KIZÁRÓLAG CTA. A ritkaságától erős — ne szórd szét. */
    :root {
      --bg: #121212;
      --surface: #1a1a17;
      --surface2: #1f1f1b;
      --border: #2b2b26;

      --olive: #5d5e46;        /* csak illusztráció és színátmenet indulópontja.
                                  2,81:1 — szövegnek SOHA nem használható. */
      --sage: #8a8b6e;         /* UI kiemelés, keretek, ikonok (5,35:1) */
      --sage-soft: #b3b49a;    /* halvány másodlagos */

      --cream: #ece9df;
      --terra: #c87a53;        /* CTA kitöltve. Kipróbált alternatíva volt a
                                  fakó antik rózsa (#c58c82), de túl lágy hangot ütött. */
      --terra-line: #bc7762;   /* CTA vonalasan. Halkabb és pirosabb (H14 S40%),
                                  mert vékony vonalként a sötét háttér felnagyítja
                                  a telítettséget, és a #c87a53 ott narancsba fordul. */
      --terra-hi: #d68b64;     /* kitöltött CTA hover-árnyalata, ragyogás helyett */
      --on-terra: #121212;     /* felirat a CTA-n, krémmel csak 2,7:1 lenne */

      --nav-h: 64px;           /* a fix navigáció magassága, több helyen kell */

      --text: #ece9df;
      --muted: #a3a294;
      --subtle: #7a7a6d;
      --faint: #5c5c52;
    }

    html { scroll-behavior: smooth; }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'Source Sans 3', sans-serif;
      overflow-x: hidden;
      line-height: 1.6;
    }

    /* AMBIENT GLOWS */
    /* A radiális fényfoltok kikerültek: a hero jobb alsó sarkában lévő
       botanikai illusztráció veszi át a szerepüket. */
    .ambient { display: none; }

    /* NEROLI ÁG — a hero jobb alsó sarkában, L alakban a képernyő széle mentén */
    /* Átlátszó hátterű PNG, olíva színnel. Sima <img>, nincs CSS-maszk. */
    /* A nav fixed és 64px magas, a hero doboza viszont alatta kezdődik,
       ezért a puszta top:50% a nav mögötti sávra is számol -> feljebb csúszna.
       A +32px (a nav fele) korrigálja: a látható sávban lesz középen.
       A --bot-inset a jobb oldali behúzás, hogy ne érjen ki a képernyő széléig. */
    /* A nav fixed és 64px magas, a hero doboza viszont alatta kezdődik,
       ezért a puszta top:50% a nav mögötti sávra is számol. A +32px korrigál.
       Vízszintesen a KONTÉNER jobb széléhez kötjük (nem a viewporthoz):
       széles monitoron így nem szakad el a szövegtől. A negatív érték annyi,
       amennyivel túlnyúlhat a szövegoszlopon. */
    /* A rajz DEKORÁCIÓ, nem tartalom: a szedéstükrön túlnyúlhat, ahogy a
       klasszikus növénytáblákon is a margóban fut az ornamentika.
       A hero .container (max 1100px), ezért a képernyő széléhez a
       (100% - 100vw)/2 negatív eltolás viszi ki — 1100px alatt ez magától 0 lesz.
       A nagyobb méret hidalja át a távolságot a szövegig, nem a pozíció. */
    /* KERET: a hero L-je a JOBB FELSŐ sarokból lóg LE (scaleY(-1) fordítja meg),
       a Kapcsolaté a BAL ALSÓ sarokból indul FÖL (scaleX(-1)).
       A két dísz átlósan zárja körbe az oldalt.
       Mindkettő a képernyő sarkához tapad, eltolás nélkül: a (100% - 100vw)/2
       viszi ki a viewport széléig, 1100px alatt magától 0 lesz. */
    .hero-botanical {
      position: absolute;
      /* A hero doboza a dokumentum tetejétől indul, tehát a fix nav ALATT is
         van 64px, amit sosem látni. Ezért a rajz a nav aljától kezdődik,
         és a magassága is a nav nélküli, VALÓBAN LÁTHATÓ sávra van szabva. */
      top: var(--nav-h);
      right: calc((100% - 100vw) / 2);
      /* A translateY(10%) az elem SAJÁT magasságához mér: annyival tolja el,
         hogy a vízszintes ág szára kerüljön a szekció szélére, az alatta
         csüngő levelek pedig a képernyőn kívülre. A scaleY(-1) miatt a
         +10% itt felfelé mozgat. */
      transform: scaleY(-1) translateY(10%);
      /* MAGASSÁGRA méretezve, nem szélességre. A 111% (= 1/0,9) azért kell,
         mert a translateY(10%) ennyit tol ki belőle — így a látható rész
         pontosan a nav alatti sáv magassága lesz.
         FIGYELEM: a max-width önmagában NEM biztosíték. Ha az auto szélesség
         túllépné, a böngésző a dobozt vágja, a height-et viszont megtartja,
         és a kép vízszintesen összenyomódik. Ezért kell az object-fit,
         és ezért vált a méretezés szélességre keskeny képernyőn (lásd lent). */
      height: calc((100% - var(--nav-h)) * 1.111);
      width: auto; max-width: 86vw;
      object-fit: contain;
      pointer-events: none; user-select: none; z-index: 0;
      opacity: 0.62;
    }

    /* ZÁRÓDÍSZ a Kapcsolat szekcióban: ugyanaz a kép tükrözve, bal alsó sarok. */
    .contact-botanical {
      position: absolute;
      bottom: 0;
      left: calc((100% - 100vw) / 2);
      /* Itt a scaleX nem érinti az Y-t, tehát a +10% lefelé tol — a csüngő
         levelek a szekció alja alá, a footer mögé kerülnek. */
      transform: scaleX(-1) translateY(10%);
      height: 111%; width: auto; max-width: 86vw;   /* ugyanaz a logika, mint fent */
      object-fit: contain;
      pointer-events: none; user-select: none; z-index: 0;
      opacity: 0.38;
    }
    /* KESKENY KÉPERNYŐ — a méretezés megfordul: itt a SZÉLESSÉG a kötött és a
       magasság az auto. Magasságra méretezve a magas, keskeny mobil hero-ból
       olyan szélesség jönne ki, amit a max-width levágna, és a rajz eltorzulna.
       Szélességre méretezve az arány mindig helyes marad. */
    @media (max-width: 700px) {
      .hero-botanical, .contact-botanical {
        height: auto; width: 86vw; max-width: none;
      }
    }
    @media (max-width: 900px) {
      .contact-botanical { opacity: 0.24; }
    }
    /* Mobilon szándékosan MÁS a viselkedés: a rajz nagyobb, kifut a képernyő
       széléig (right:0, tehát a paddingen is túl), és belelóg a szövegbe.
       Ezért kell ott a jóval alacsonyabb átlátszóság — desktopon a szöveg
       720px-es oszlopa és a rajz nem fedi egymást, ott nem indokolt. */
    /* Csak az átlátszóság vált: mobilon a szöveg rákerül a rajzra.
       A SZÉLESSÉG nem vált töréspontnál — a clamp végig folyamatos. */
    @media (max-width: 900px) {
      .hero-botanical { opacity: 0.34; }
    }

    /* NAV */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      background: rgba(18,18,18,0.88);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border);
      padding: 0 48px; height: var(--nav-h);
      display: flex; align-items: center; justify-content: space-between;
    }
    .nav-logo {
      font-family: 'Playfair Display', serif;
      font-weight: 900; font-size: 30px; letter-spacing: -0.5px;
      background: linear-gradient(90deg, var(--olive), var(--terra));
      -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
      cursor: pointer; text-decoration: none;
    }
    .nav-links { display: flex; gap: 28px; align-items: center; }
    /* Három állapot, egyetlen jellel megkülönböztetve: a szín.
       alap = halk szürke · aktív (ott jársz) = zsálya · hover = krém.
       Betűvastagságot szándékosan NEM váltunk, mert attól szélesebb lenne
       a szó, és hover közben odébb tolná a szomszédait. */
    .nav-link {
      color: var(--subtle); font-size: 14px; cursor: pointer;
      text-decoration: none; transition: color 0.2s;
    }
    .nav-link.active { color: var(--sage); }
    .nav-link:hover { color: var(--cream); }
    .nav-toggle {
      display: none; background: none; border: none; cursor: pointer;
      padding: 8px; z-index: 101; align-items: center; justify-content: center;
    }
    /* Teljes szélesség és a nav alatti teljes magasság. Részleges panelnél a
       mögötte maradó sáv félkész benyomást kelt, és külön sötétítő réteg meg
       kívülre kattintás kellene hozzá. Így egyszerűbb és megbízhatóbb.
       Az animáció 0,4 mp, lassuló görbével. Az elegáns hatást nem a hossz adja,
       hanem hogy a mozgás gyorsan indul és lágyan áll meg.
       FÜGGŐLEGESEN nyílik, nem oldalról: a panel teljes szélességű és a nav
       alatt ül, tehát hozzá tartozik. Oldalirányú csúszás akkor indokolt, ha a
       panel keskenyebb a képernyőnél, mert olyankor látszik, hogy "kívülről"
       jön. Teljes szélességnél az csak átsöpör, minden térbeli logika nélkül. */
    .mobile-nav-panel {
      position: fixed; top: var(--nav-h); right: 0;
      width: 100%;
      height: auto; max-height: calc(100vh - var(--nav-h));
      background: var(--bg);
      border-bottom: 1px solid var(--border);
      display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
      padding: 8px 20px 24px; overflow-y: auto;
      transform: translateY(-100%);
      transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      z-index: 99;
    }
    .mobile-nav-panel.open { transform: translateY(0); }
    .mobile-nav-panel .nav-link {
      display: block; width: 100%; padding: 16px 0; font-size: 18px;
      color: var(--text); border-bottom: 1px solid var(--border);
      padding-bottom: 16px;
    }
    .mobile-nav-panel .nav-link:hover { color: var(--cream); }
    .mobile-nav-cta { margin-top: 20px; text-align: center; padding: 14px 22px; font-size: 15px; }
    /* Nyitott menünél a nav gombja elrejtőzik, különben ugyanaz a gomb
       kétszer látszana: egyszer a sávban, egyszer a panel alján. */
    body.menu-open .nav-cta { opacity: 0; visibility: hidden; }
    @media (prefers-reduced-motion: reduce) {
      .mobile-nav-panel { transition: transform 0.01s; }
    }
    .btn-cta {
      background: transparent; color: var(--terra-line) !important;
      border: 1.5px solid var(--terra-line); padding: 9px 22px; border-radius: 7px;
      font-weight: 700; font-size: 14px; cursor: pointer;
      font-family: 'Source Sans 3', sans-serif;
      transition: background-color 0.2s, color 0.2s, transform 0.2s;
      text-decoration: none; display: inline-block;
    }
    .btn-cta:hover {
      background: var(--terra); border-color: var(--terra);
      color: var(--on-terra) !important;
      transform: translateY(-2px);
    }
    /* NAV CTA — csak akkor jelenik meg, ha a hero gombja már kigördült a képből.
       Rejtett állapotban a szélessége és a bal margója is nullázva van, hogy a
       menüpontok ne ugorjanak, hanem átcsússzanak, amikor feltűnik.
       A visibility:hidden a tabsorrendből és a képernyőolvasóból is kiveszi. */
    .nav-cta {
      opacity: 0; visibility: hidden;
      max-width: 0; padding-left: 0; padding-right: 0; border-width: 0;
      margin-left: -28px; overflow: hidden; white-space: nowrap;
      transition: max-width 0.3s ease, margin-left 0.3s ease, padding 0.3s ease,
                  border-width 0.3s ease, opacity 0.25s ease, visibility 0.3s,
                  background-color 0.2s, color 0.2s, transform 0.2s;
    }
    .nav-cta.show {
      opacity: 1; visibility: visible;
      max-width: 200px; padding-left: 22px; padding-right: 22px;
      border-width: 1.5px; margin-left: 0;
    }
    @media (prefers-reduced-motion: reduce) {
      .nav-cta { transition: opacity 0.01s, visibility 0.01s; }
    }
    .btn-cta-lg {
      background: transparent; color: var(--terra-line) !important;
      border: 2px solid var(--terra-line); padding: 16px 36px; border-radius: 8px;
      font-weight: 800; font-size: 16px; cursor: pointer;
      font-family: 'Source Sans 3', sans-serif;
      transition: background-color 0.2s, color 0.2s, transform 0.2s;
      display: inline-block; text-decoration: none;
    }
    .btn-cta-lg:hover {
      background: var(--terra); border-color: var(--terra);
      color: var(--on-terra) !important;
      transform: translateY(-2px);
    }

    /* SECTIONS */
    section { position: relative; z-index: 1; }
    .container { max-width: 1100px; margin: 0 auto; padding: 0 48px; }
    .section-pad { padding: 100px 48px; --pad: 48px; }

    /* TYPOGRAPHY */
    .display { font-family: 'Playfair Display', serif; }
    h1.hero-title {
      font-family: 'Playfair Display', serif;
      font-size: clamp(42px, 6vw, 72px);
      font-weight: 900; line-height: 1.08;
      letter-spacing: -2px; margin-bottom: 12px;
      /* A doboz a leghosszabb sorra zsugorodik, nem a 720px-es szülőre.
         Enélkül a középre zárt "vagy" nem a szöveghez igazodna, hanem egy
         láthatatlan dobozhoz, és képernyőszélességtől függően elcsúszna. */
      width: fit-content;
    }
    h2.section-title {
      font-family: 'Playfair Display', serif;
      font-size: clamp(32px, 4vw, 48px);
      font-weight: 900; line-height: 1.15;
      letter-spacing: -1px; margin-bottom: 16px;
    }
    /* PARKOLVA — jelenleg semmi nem használja. A hero-igék kiemelése volt:
       a két szó a zsálya→terrakotta átmenet egy-egy felét kapta, így fentről
       lefelé olvasva egyetlen folytonos színátmenet. Kikerült, mert ugyanazt az
       elágazást jelölte, mint a csuklópánt, és három terrakotta esemény volt
       egy képernyőn. Ha visszakell, a főcím két igéjét kell spanbe tenni. */
    .grad-a, .grad-b {
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
    }
    .grad-a { background-image: linear-gradient(90deg, var(--sage), #a9724f); }
    .grad-b { background-image: linear-gradient(90deg, #a9724f, var(--terra)); }
    /* PARKOLVA — jelenleg semmi nem használja, a főcím két sorra tért vissza.
       CSUKLÓPÁNT — a "vagy" saját sort kap, de nem az állítások súlyával.
       Kisebb, ritkított, sans-serif, halkabb szín: így elválasztó jelnek látszik,
       nem egy szónak, ami lecsúszott a sor végéről. */
    .hero-title .hinge {
      display: block;
      font-family: 'Source Sans 3', sans-serif;
      font-size: 0.26em; font-weight: 600;
      line-height: 1;
      color: var(--muted);
      text-align: center;
      /* A hely dolgozik, nem a dísz: több levegő, kevesebb ritkítás.
         Alul több, mint felül: fölötte a "honlapot," p-je lelóg, alatta a
         "frissítsük" f, k, í betűi felnyúlnak, ezért a beállított résekből
         alul optikailag többet vesz el a szomszéd sor.
         Minden érték em-ben, hogy a clamp-pel együtt zsugorodjon telefonon. */
      letter-spacing: 0.18em;
      margin: 0.9em 0 1.1em;
      /* A ritkítás a szó után is hagy egy köznyi helyet, ami jobbra tolná
         a látszólagos középpontot; ezt kompenzálja a bal oldali behúzás. */
      text-indent: 0.18em;
    }

    /* HERO */
    #hero { padding-top: 160px; padding-bottom: 50px; }
    .hero-sub { color: var(--muted); font-size: 19px; line-height: 1.75; margin-bottom: 12px; max-width: 540px; }
    .hero-sub em { color: var(--text); font-style: italic; }
    .stats { display: flex; gap: 48px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--border); flex-wrap: wrap; }
    .stats > div { min-width: 90px; }
    .stat-num {
      font-family: 'Playfair Display', serif; font-size: 36px; font-weight: 900;
      color: var(--text);
      line-height: 1;
    }
    .stat-label { color: var(--subtle); font-size: 13px; margin-top: 4px; }

    /* CARDS */
    .grid-3 { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
    .grid-3 > * { flex: 1 1 300px; max-width: 350px; }
    .grid-4 { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
    .grid-4 > * { flex: 1 1 240px; max-width: 260px; }
    .card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 12px; padding: 28px 24px;
      transition: all 0.25s; cursor: pointer;
      display: flex; flex-direction: column;
    }
    .card:hover { transform: translateY(-4px); border-color: rgba(138,139,110,0.4); }
    .card-icon { font-size: 26px; margin-bottom: 16px; }
    .card-title { font-weight: 700; font-size: 18px; margin-bottom: 10px; }
    .card-desc { color: var(--muted); font-size: 14px; line-height: 1.7; margin-bottom: 20px; flex: 1; }
    .card-more {
      margin-top: 16px; font-size: 13px; font-weight: 700;
      letter-spacing: 0.3px; opacity: 0.85; transition: opacity 0.2s, transform 0.2s;
    }
    .card:hover .card-more { opacity: 1; transform: translateX(3px); }

    /* PACKAGES */
    .pkg-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 12px; padding: 24px;
      position: relative; cursor: pointer; transition: all 0.25s;
      display: flex; flex-direction: column;
    }
    .pkg-card:hover { transform: translateY(-4px); border-color: rgba(138,139,110,0.4); }
    .pkg-badge {
      position: absolute; top: -10px; right: 16px;
      font-size: 10px; font-weight: 800; padding: 3px 10px;
      border-radius: 10px; letter-spacing: 1px;
    }
    .pkg-name { font-weight: 700; font-size: 16px; margin-bottom: 8px; }
    .pkg-desc { color: var(--muted); font-size: 13px; line-height: 1.6; margin-top: 8px; flex: 1; }
    .pkg-more {
      margin-top: 16px; font-size: 13px; font-weight: 700;
      letter-spacing: 0.3px; opacity: 0.85; transition: opacity 0.2s, transform 0.2s;
    }
    .pkg-card:hover .pkg-more { opacity: 1; transform: translateX(3px); }

    /* CAROUSEL */
    .carousel-tabs {
      display: flex; gap: 8px; margin-bottom: 24px;
    }
    /* A kiválasztott szint KITÖLTÖTT, a többi vonalas — ugyanaz a logika, mint a
       CTA gomboknál. A zsálya keret 4,72:1-et ad a modal felületén, tehát a
       nem-szöveges elemekre előírt 3:1 felett van; a kitöltött fülön a sötét
       felirat 5,35:1. */
    .carousel-tab {
      flex: 1; padding: 10px 16px; border-radius: 8px; cursor: pointer;
      font-size: 13px; font-weight: 700; font-family: 'Source Sans 3', sans-serif;
      border: 1px solid var(--sage); background: transparent;
      color: var(--sage-soft);
      transition: background-color 0.2s, color 0.2s, border-color 0.2s;
      text-align: center;
    }
    .carousel-tab:hover { color: var(--cream); }
    .carousel-tab.active {
      background: var(--sage);
      border-color: var(--sage);
      color: var(--bg);
    }
    .carousel-tab.active:hover { color: var(--bg); }
    .carousel-tab.coming-soon {
      cursor: not-allowed; position: relative; overflow: visible;
    }
    .unavailable-stamp {
      position: absolute; top: -10px; right: -8px;
      transform: rotate(8deg);
      text-align: center; line-height: 1.15;
      font-size: 13.5px; font-weight: 800; letter-spacing: 0.3px;
      text-transform: uppercase; white-space: nowrap;
      background: linear-gradient(90deg, var(--olive), var(--terra));
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
      pointer-events: none;
    }

    /* CUSTOM SCROLLBAR */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: var(--bg); }
    ::-webkit-scrollbar-thumb { background: var(--subtle); border-radius: 99px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--sage-soft); }

    .modal::-webkit-scrollbar { width: 4px; }
    .modal::-webkit-scrollbar-track { background: var(--surface); border-radius: 0 16px 16px 0; }
    .modal::-webkit-scrollbar-thumb { background: var(--subtle); border-radius: 99px; }
    .modal::-webkit-scrollbar-thumb:hover { background: var(--sage-soft); }
    .modal-overlay {
      display: none; position: fixed; inset: 0; z-index: 999;
      background: rgba(0,0,0,0.75); backdrop-filter: blur(8px);
      align-items: center; justify-content: center; padding: 24px;
    }
    .modal-overlay.active { display: flex; }
    .modal {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 16px; max-width: 580px; width: 100%;
      max-height: 85vh; overflow-y: auto;
      padding: 40px; position: relative;
      animation: modalIn 0.25s ease;
    }
    @keyframes modalIn {
      from { opacity: 0; transform: translateY(20px) scale(0.97); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .modal-nav {
      position: fixed; top: 50%; transform: translateY(-50%);
      width: 44px; height: 44px; border-radius: 50%;
      background: var(--surface); border: 1px solid var(--border); color: var(--text);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; z-index: 1000; transition: background 0.2s, border-color 0.2s;
    }
    .modal-nav:hover { background: var(--faint); border-color: var(--subtle); }
    .modal-nav.prev { left: calc(50% - 350px); }
    .modal-nav.next { left: calc(50% + 306px); }
    @media (max-width: 700px) {
      .modal-overlay { padding: 24px 8px; }
      .modal-nav { width: 36px; height: 36px; }
      .modal-nav.prev { left: 8px; }
      .modal-nav.next { left: auto; right: 8px; }
    }
    .modal-close {
      position: absolute; top: 16px; right: 16px;
      background: var(--border); border: none; color: var(--subtle);
      width: 32px; height: 32px; border-radius: 50%;
      cursor: pointer; font-size: 18px; display: flex;
      align-items: center; justify-content: center;
      transition: background 0.2s;
    }
    .modal-close:hover { background: var(--faint); color: var(--text); }
    .modal-icon { font-size: 32px; margin-bottom: 16px; }
    .modal-title { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 900; margin-bottom: 8px; }
    .modal-subtitle { color: var(--subtle); font-size: 13px; letter-spacing: 1px; margin-bottom: 20px; }
    .modal-desc { color: var(--muted); font-size: 15px; line-height: 1.75; margin-bottom: 24px; }
    .modal-section-label {
      color: var(--subtle); font-size: 10px; font-family: monospace;
      letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px;
    }
    .modal-includes { list-style: none; margin-bottom: 24px; }
    .modal-includes li {
      display: flex; gap: 10px; align-items: flex-start;
      margin-bottom: 8px; color: var(--text); font-size: 14px; line-height: 1.5;
    }
    .modal-not { list-style: none; margin-bottom: 24px; }
    .modal-not li {
      display: flex; gap: 10px; align-items: flex-start;
      margin-bottom: 8px; color: var(--subtle); font-size: 14px; line-height: 1.5;
    }
    .modal-negotiable { list-style: none; margin-bottom: 24px; }
    .modal-negotiable li {
      display: flex; gap: 10px; align-items: flex-start;
      margin-bottom: 8px; color: var(--subtle); font-size: 14px; line-height: 1.5;
    }
    .modal-price-box {
      border-radius: 8px; padding: 16px 20px; margin-bottom: 24px;
      display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
      text-align: center;
    }
    .modal-price-box > div + div { border-left: 1px solid rgba(255,255,255,0.08); padding-left: 12px; }
    .modal-price-label { font-size: 10px; letter-spacing: 1px; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; }
    .modal-price-val { font-size: 14px; font-weight: 700; }
    /* Halk kiegészítés a csomag alján: felelősségi határok és feltételek.
       Nem pipa, mert nem tétel, amit megveszel, hanem keret, amiben a tétel él. */
    .modal-note {
      color: var(--subtle); font-size: 12.5px; line-height: 1.65;
      border-top: 1px solid var(--border);
      padding-top: 14px; margin: 4px 0 22px;
    }
    .modal-cta {
      background: transparent; color: var(--terra-line); border: 1.5px solid var(--terra-line);
      padding: 14px 28px; border-radius: 8px; font-weight: 800; font-size: 15px;
      cursor: pointer; font-family: 'Source Sans 3', sans-serif;
      width: 100%; box-sizing: border-box;
      transition: background-color 0.2s, color 0.2s;
    }
    .modal-cta:hover { background: var(--terra); border-color: var(--terra); color: var(--on-terra); }
    /* Beküldő gomb: kitöltött marad, mert ez az űrlap záró lépése. */
    .modal-cta.is-submit { background: var(--terra); border-color: var(--terra); color: var(--on-terra); }
    .modal-cta.is-submit:hover { background: var(--terra-hi); border-color: var(--terra-hi); }

    /* PROCESS */
    .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
    @media (max-width: 900px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 520px) { .process-grid { grid-template-columns: 1fr; } }
    .process-item { position: relative; }
    .process-num {
      font-family: 'Playfair Display', serif; font-size: 64px; font-weight: 900;
      line-height: 1; margin-bottom: 16px; user-select: none;
    }


    /* PORTFOLIO */
    .portfolio-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 12px; overflow: hidden; transition: border-color 0.25s;
    }
    .portfolio-card:hover { border-color: rgba(138,139,110,0.4); }
    .portfolio-img {
      height: 140px; display: flex; align-items: center; justify-content: center;
      border-bottom: 1px solid var(--border); position: relative; overflow: hidden;
    }
    /* A képernyőképek alapból félúton tompítottak, hogy a három idegen paletta
       ne verje szét az oldal egységét. Hoverre visszakapják a saját színüket. */
    .portfolio-shot {
      width: 100%; height: 100%; object-fit: cover; object-position: top center;
      display: block;
      filter: grayscale(0.55) saturate(0.75) brightness(0.82) contrast(0.95);
      transition: filter 0.35s ease, transform 0.35s ease;
    }
    .portfolio-card:hover .portfolio-shot {
      filter: none; transform: scale(1.03);
    }
    .portfolio-body { padding: 20px 22px; }
    /* Ügyfélidézet a projektkártyán. Bal oldali vonal választja el a leírástól,
       hogy látszódjon: ez már nem az én szövegem, hanem az övék. */
    .portfolio-quote {
      border-left: 2px solid var(--sage);
      padding-left: 12px;
      margin: 16px 0 16px;
      color: var(--sage-soft);
      font-size: 13px; line-height: 1.6; font-style: italic;
    }
    .portfolio-quote-by {
      display: block; margin-top: 6px;
      color: var(--subtle); font-size: 11.5px;
      font-style: normal; font-weight: 700; letter-spacing: 0.2px;
    }

    /* TESTIMONIALS */
    .testimonial-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 12px; padding: 28px;
      display: flex; flex-direction: column; height: 100%;
    }
    .testimonial-quote { font-size: 32px; line-height: 1; margin-bottom: 8px; }
    .testimonial-text { color: var(--muted); font-size: 15px; line-height: 1.75; margin-bottom: 24px; font-style: italic; }

    /* ABOUT */
    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: stretch; }
    .about-divider { position: absolute; left: 56%; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,0.08); }
    .about-photo {
      background: var(--surface); border: 1px dashed var(--border);
      border-radius: 16px; height: 220px;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
      position: relative; overflow: hidden; margin-bottom: 16px;
    }
    .why-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 16px; padding: 22px 24px; position: relative; overflow: hidden;
    }

    /* FAQ */
    .faq-item {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; overflow: hidden;
      transition: border-color 0.2s; margin-bottom: 12px;
    }
    .faq-item.open { border-color: rgba(138,139,110,0.5); }
    .faq-heading { margin: 0; font-size: inherit; font-weight: inherit; }
    .faq-question {
      width: 100%; background: none; border: none; color: inherit; cursor: pointer;
      font-family: inherit; text-align: left;
      padding: 20px 24px; display: flex; justify-content: space-between;
      align-items: center; gap: 16px; font-weight: 600; font-size: 15px;
    }
    .faq-question:focus-visible { outline: 2px solid var(--sage); outline-offset: -2px; }
    .faq-toggle {
      color: var(--subtle); font-size: 20px; flex-shrink: 0;
      transition: color 0.2s, transform 0.25s;
    }
    .faq-item.open .faq-toggle { color: var(--sage); transform: rotate(45deg); }
    .faq-answer {
      padding: 0 24px; max-height: 0; overflow: hidden;
      transition: max-height 0.3s ease, padding 0.3s ease;
      color: var(--muted); font-size: 15px; line-height: 1.7;
    }
    .faq-item.open .faq-answer { max-height: 200px; padding: 0 24px 20px; }

    /* CONTACT */
    .input-label {
      display: block; color: var(--subtle); font-size: 12px;
      letter-spacing: 1px; margin-bottom: 8px; text-transform: uppercase;
    }
    .input-field {
      width: 100%; background: var(--surface); border: 1px solid var(--border);
      border-radius: 8px; padding: 12px 16px; color: var(--text);
      font-size: 15px; font-family: 'Source Sans 3', sans-serif;
      outline: none; transition: border-color 0.2s;
    }
    .input-field:focus { border-color: var(--sage); }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
    .success-box {
      background: rgba(138,139,110,0.1); border: 1px solid rgba(138,139,110,0.3);
      border-radius: 12px; padding: 48px; text-align: center; display: none;
    }

    /* FOOTER */
    footer {
      border-top: 1px solid var(--border); padding: 32px 48px;
      background: var(--bg);
      position: relative; z-index: 1;
    }
    /* Két oszlop: bal a márka és a szolgáltatások, jobb a jogi rész és a
       copyright. Nincs abszolút pozicionálás és nincs fix pixelérték sehol,
       ezért bármilyen szélességen magától rendeződik. */
    /* A két oszlop AZONOS MAGASSÁGÚ: a jobb kinyúlik a bal teljes magasságára
       (stretch), és belül a tartalom a két szélére feszül (space-between).
       Így a jogi rész a logó vonalában kezdődik, a copyright pedig pontosan a
       szolgáltatáslista aljával zár. */
    .footer-grid { display: flex; justify-content: space-between; align-items: stretch; gap: 32px; max-width: 1100px; margin: 0 auto; }
    .footer-grid > div { min-width: 0; }
    .footer-tagline { margin-top: 16px; color: var(--faint); font-size: 15px; }
    .footer-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; text-align: right; }
    /* A két jogi hivatkozás MINDEN szélességen külön sorban áll. Egymás mellett
       felsorolásnak látszanának; egymás alatt két önálló célpont. */
    .footer-legal { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font-size: 15px; color: var(--faint); }
    .footer-legal a:hover { color: var(--sage); }
    .footer-copyright { margin-top: 16px; color: var(--faint); font-size: 15px; }
    /* A szolgáltatások a láblécben megnyitják a saját modaljukat. Gombok, nem
       linkek, mert nem navigálnak máshova, hanem ugyanitt nyitnak egy réteget. */
    .footer-service {
      background: none; border: none; padding: 0; cursor: pointer;
      font: inherit; color: inherit; transition: color 0.2s;
    }
    .footer-service:hover { color: var(--cream); }
    .footer-mail {
      display: inline-block; margin-top: 12px;
      color: var(--sage); font-size: 15px; text-decoration: none;
      transition: color 0.2s;
    }
    .footer-mail:hover { color: var(--cream); }

    /* Billentyűzetes felhasználó első Tab-ja: átugorja a menüt */
    .skip-link {
      position: absolute; left: 8px; top: -48px; z-index: 200;
      background: var(--sage); color: var(--on-terra); font-weight: 700;
      padding: 10px 18px; border-radius: 0 0 8px 8px; text-decoration: none;
      transition: top 0.2s;
    }
    .skip-link:focus { top: 0; }

    /* UTILS */
    .border-top { border-top: 1px solid var(--border); }
    .bg-surface2 { background: var(--surface2); }
    .fade-in { opacity: 0; transform: translateY(28px); transition: opacity 0.65s ease, transform 0.65s ease; }
    .fade-in.visible { opacity: 1; transform: translateY(0); }

    /* 950px: itt már nem fér ki a menüsor, jön a hamburger.
       A nav OLDALMARGÓJÁT viszont NEM itt váltjuk, hanem 768-nál, együtt a
       szekciókkal — különben a logó és a tartalom nem egy vonalban indul. */
    @media (max-width: 950px) {
      .nav-toggle { display: flex; }
      .nav-links { display: none; }
    }

    @media (max-width: 768px) {
      nav { padding: 0 20px; }
      .section-pad { padding: 60px 20px; --pad: 20px; }
      .container { padding: 0 20px; }
      .about-grid { grid-template-columns: 1fr; gap: 40px; }
      .about-grid > div:last-child { justify-content: center !important; }
      .about-divider { display: none; }
      .form-grid { grid-template-columns: 1fr; }
      footer { padding: 32px 25px; }
      /* Mobilon nem kell azonos magasság: a jobb oszlop a tartalmához zsugorodik
         és alulra igazodik, különben a két rövid sor közé nagy üres lyuk kerülne. */
      .footer-grid { gap: 10px; }
      .footer-right { align-self: flex-end; justify-content: flex-end; }
      .footer-tagline { display: flex; flex-direction: column; gap: 2px; text-align: left; font-size: 14px; }
      .footer-dot { display: none; }
      .footer-legal { gap: 6px; font-size: 14px; }
      .footer-copyright { font-size: 14px; margin-top: 24px; }
      /* Mobilon a "Minden jog fenntartva" külön sorba kerül, hogy ne egyetlen
         szó lógjon át a második sorba. */
      .footer-rights { display: block; }
      .footer-rights .footer-dot { display: none; }
      .footer-service { text-align: left; }
      #hero { padding-top: 100px; padding-bottom: 30px; }
    }

/* ── ÖNÁLLÓ OLDALAK (impresszum, adatkezelési, süti tájékoztató) ──────
   A page.php használja. Ugyanaz a paletta és tipográfia, mint a
   nyitóoldalon, csak sokkal egyszerűbb elrendezésben. */
.nerola-doc {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 24px 96px;
  font-family: 'Source Sans 3', Arial, sans-serif;
  line-height: 1.8;
  color: var(--muted);
}
.nerola-doc-logo {
  display: inline-block;
  margin-bottom: 48px;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: 28px;
  line-height: 1;
  text-decoration: none;
  background: linear-gradient(90deg, var(--olive), var(--terra));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.nerola-doc h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(30px, 5vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 32px;
}
.nerola-doc-body h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--sage);
  margin: 40px 0 12px;
}
.nerola-doc-body h3 { font-size: 18px; font-weight: 700; color: var(--text); margin: 28px 0 10px; }
.nerola-doc-body p,
.nerola-doc-body li { color: var(--muted); font-size: 16px; }
.nerola-doc-body p  { margin-bottom: 16px; }
.nerola-doc-body ul,
.nerola-doc-body ol { margin: 0 0 16px 22px; }
.nerola-doc-body li { margin-bottom: 6px; }
.nerola-doc-body a  { color: var(--sage); }
.nerola-doc-body strong { color: var(--text); }
.nerola-doc-body table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 15px; }
.nerola-doc-body th,
.nerola-doc-body td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; }
.nerola-doc-body th { color: var(--text); font-weight: 700; }
.nerola-doc-back { margin-top: 56px; }
.nerola-doc-back a { color: var(--sage); text-decoration: none; }
.nerola-doc-back a:hover { text-decoration: underline; }