/* HydroGrow – közös stíluslap (főoldal; a színeket és a betűt a többi oldal is ezekből veszi) */

:root {
    /* talaj nélküli konyhakert: fehér kaspó, bazsalikomzöld, és a lámpa három fénye */
    --bg: #f2f3ee;
    --surface: #e6e9e1;
    --ink: #13201a;
    --muted: #46534b;
    --accent: #2f6b3a;
    --accent-press: #255630;
    --accent-ink: #ffffff;
    --field: #1c3123;
    --field-ink: #eef1e8;
    --field-muted: #c3cdbf;
    --sage: #dce5d2;
    --mode-blue: #cfdbef;
    --mode-white: #e9ebe4;
    --mode-red: #f1d3cc;

    --font: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
    --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
    --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
    --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
    --step-display: clamp(3.5rem, 1rem + 8.4vw, 8.5rem);
    --step-giant: clamp(5.5rem, 17vw, 18.75rem);

    --margin: clamp(16px, 2.6vw, 40px);
    --gap: clamp(12px, 1.6vw, 24px);
    --section: clamp(96px, 12vw, 200px);

    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    font-family: var(--font);
    font-size: var(--step-body);
    line-height: 1.55;
    background: var(--bg);
    color: var(--ink);
    overflow-x: clip;
}

img, video, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

.wrap { padding-inline: var(--margin); }

.grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
}

h1, h2, h3 { font-weight: 300; letter-spacing: -0.035em; line-height: 1; }
h2 { font-size: var(--step-head); }

.lead { font-size: var(--step-lead); line-height: 1.35; letter-spacing: -0.01em; }

/* Gomb: egy forma az egész oldalon – szögletes, kitöltött */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 14px 28px;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: var(--step-body);
    font-weight: 500;
    text-decoration: none;
    transition: background-color 200ms ease, transform 160ms var(--ease-out);
}
.button:hover { background: var(--accent-press); }
.button:active { transform: scale(0.97); }
.button[disabled] { cursor: default; }

.text-link {
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
    transition: text-underline-offset 200ms var(--ease-out), color 200ms ease;
}
.text-link:hover { text-underline-offset: 8px; color: var(--accent); }

/* ---------- Állandó fejléc ---------- */
/* Az első képernyőn rejtve van (ott a nagy cím és a gomb látszik); utána felülről becsúszik, és végig kéznél marad. */

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.4vw, 36px);
    min-height: 64px;
    padding: 8px var(--margin);
    background: var(--bg);
    border-bottom: 1px solid #d6dbd0;
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 360ms var(--ease-out), visibility 0s linear 360ms;
}
.topbar.is-shown { transform: none; visibility: visible; transition: transform 360ms var(--ease-out); }
.topbar-brand { margin-right: auto; font-size: 1.625rem; font-weight: 300; letter-spacing: -0.045em; line-height: 1; text-decoration: none; }
.topbar-nav { display: flex; gap: clamp(14px, 2vw, 30px); }
.topbar-nav a, .topbar-cart { padding: 10px 0; font-size: var(--step-small); font-weight: 500; text-decoration: none; white-space: nowrap; }
.topbar-nav a:hover, .topbar-cart:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.topbar-cta { min-height: 44px; padding: 10px 22px; font-size: 1rem; white-space: nowrap; }

/* a horgonyra ugráskor a cél ne csússzon a fejléc alá */
html { scroll-padding-top: 80px; }

/* ---------- Első képernyő ---------- */

.hero {
    min-height: 100svh;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr auto;
    column-gap: var(--gap);
    padding: clamp(20px, 3vw, 44px) var(--margin) clamp(20px, 2.4vw, 36px);
}

.hero-top { display: contents; }

.hero h1 {
    grid-column: 1 / 9;
    grid-row: 1;
    font-size: var(--step-display);
    line-height: 0.9;
    letter-spacing: -0.05em;
}

.cart-link {
    grid-column: 11 / 13;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    display: inline-flex;
    gap: 8px;
    align-items: baseline;
    padding: 10px 0;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.cart-link span:first-child {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
    transition: text-underline-offset 200ms var(--ease-out);
}
.cart-link:hover span:first-child { text-underline-offset: 8px; }
.cart-count {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    background: var(--ink);
    color: var(--bg);
    font-size: var(--step-small);
    font-variant-numeric: tabular-nums;
}

.hero-copy {
    grid-column: 1 / 6;
    grid-row: 2;
    align-self: center;
    padding: clamp(32px, 5svh, 64px) 0;
    max-width: 34rem;
}
.hero-intro { font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 18px; }
.hero-text { margin-bottom: 32px; }

.hero-buy { display: grid; gap: 12px; justify-items: start; }
.hero-more { margin-top: 18px; }
.buy-note { font-size: var(--step-small); color: var(--muted); max-width: 44ch; }
.unavailable { background: var(--surface); padding: 14px 18px; max-width: 46ch; }
.unavailable a { font-weight: 500; }

.hero-product {
    grid-column: 6 / 13;
    grid-row: 2;
    align-self: center;
    position: relative;
    height: min(66svh, 660px);
    min-height: 380px;
    margin: clamp(32px, 5svh, 64px) 0 0;
    overflow: clip;
}
/* Az állókép és a 3D vászon ugyanazt a helyet tölti ki; a vászon akkor jelenik meg, amikor a modell betöltött */
.hero-poster, .hero-product canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: opacity 600ms ease;
}
.hero-poster { object-fit: contain; }
.hero-product canvas { opacity: 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.hero-product.is-live canvas { opacity: 1; }
/* összeállás után a készülék húzással körbeforgatható (telefonon a függőleges húzás továbbra is görget) */
.hero-product.is-ready canvas { cursor: grab; }
.hero-product.is-dragging canvas { cursor: grabbing; }
.hero-product.is-live .hero-poster { opacity: 0; }
.hero-hint {
    position: absolute;
    left: clamp(14px, 1.6vw, 24px);
    bottom: clamp(12px, 1.4vw, 20px);
    font-size: var(--step-small);
    font-weight: 500;
    color: var(--muted);
    opacity: 0;
    pointer-events: none;
    transition: opacity 400ms ease;
}
/* a felirat az elején a görgetésre, összeállás után a forgatásra hív; az első húzás után eltűnik */
.hero-product.is-live .hero-hint { opacity: 1; }
.hero-product.is-live.is-started .hero-hint { opacity: 0; }
.hero-product.is-live.is-ready .hero-hint { opacity: 1; }
.hero-product.is-live.is-turned .hero-hint { opacity: 0; }
.stage-item.is-drawn .product-photo, .sys-photo.is-drawn img { mix-blend-mode: normal; }

/* Asztali nézetben az első képernyő rögzítve marad, amíg a készülék összeáll (a hero3d.js kapcsolja be) */
@media (min-width: 1081px) and (prefers-reduced-motion: no-preference) {
    .hero3d-pin .hero-pin { height: calc(100svh + 130vh); }
    .hero3d-pin .hero { position: sticky; top: 0; height: 100svh; }
    /* a kép magassága itt az ablakhoz igazodik, hogy az egész első képernyő elférjen */
    .hero3d-pin .hero-product { height: min(660px, 100svh - 330px); min-height: 300px; }
}

.hero-foot {
    grid-column: 1 / 13;
    grid-row: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    padding-top: 28px;
    font-size: var(--step-small);
}
.hero-foot a { padding: 6px 0; }

/* ---------- A HC10 ---------- */

.hc10 { padding-top: var(--section); }
.hc10-head { grid-column: 1 / 5; }
.hc10-head h2 { margin-bottom: 24px; }
.hc10-groups {
    grid-column: 5 / 13;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
    padding-top: 8px;
}
.hc10-group h3 { font-size: clamp(2rem, 1.3rem + 2vw, 3rem); margin-bottom: 20px; }
.hc10-group ul { display: grid; gap: 14px; }
.hc10-group li { padding-left: 22px; position: relative; }
.hc10-group li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 8px;
    height: 8px;
    background: var(--accent);
}

/* ---------- Így működik ---------- */

.how { padding-top: var(--section); }
.how-intro { align-items: end; padding-bottom: clamp(36px, 4vw, 60px); }
.how-intro h2 { grid-column: 1 / 7; }
.how-intro p { grid-column: 8 / 13; max-width: 46ch; }

.steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap);
}
.step-media { aspect-ratio: 3 / 4; overflow: clip; background: #24302a; margin-bottom: 18px; }
.step-media img, .step-media video { width: 100%; height: 100%; object-fit: cover; transition: transform 1600ms var(--ease-out); }
.step h3 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); margin-bottom: 10px; }
.step p { max-width: 34ch; }

/* ---------- Rendszerek ---------- */

.systems { padding-top: var(--section); }
.systems-grid { align-items: start; }

.systems-stage {
    grid-column: 1 / 6;
    position: sticky;
    top: 84px; /* az állandó fejléc alatt */
    aspect-ratio: 4 / 5;
    max-height: calc(100svh - 104px);
    background: var(--surface);
}
.stage-item {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: 1fr auto;
    padding: 6% 6% 5%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 500ms ease, visibility 0s linear 500ms;
}
.stage-item.is-active { opacity: 1; visibility: visible; transition: opacity 500ms ease; }
.stage-item .photo-zoom { min-height: 0; cursor: zoom-in; }
.stage-item .product-photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform 600ms var(--ease-out);
}
.stage-item .photo-zoom:hover .product-photo { transform: scale(1.03); }
.stage-item.is-drawn .photo-zoom { cursor: default; }
.stage-item.is-drawn .photo-zoom:hover .product-photo { transform: none; }
.stage-empty { height: 100%; }

.thumbs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding-top: 14px; }
.thumb {
    width: 56px;
    height: 56px;
    padding: 4px;
    background: var(--bg);
    transition: background-color 200ms ease, transform 160ms var(--ease-out);
}
.thumb:hover { transform: translateY(-2px); }
.thumb[aria-pressed="true"] { background: var(--accent); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }

.systems-stage { grid-row: 1 / span 2; }
.systems-head { grid-column: 7 / 13; grid-row: 1; }
.systems-head h2 { margin-bottom: 24px; }
.systems-head p { max-width: 46ch; margin-bottom: clamp(32px, 4vw, 56px); }
.systems-list { grid-column: 7 / 13; grid-row: 2; }

/* Minden termék külön lap: fehér felület a szürkés alapon, a kiválasztottnál zöld jelölő a bal szélen */
.sys {
    position: relative;
    background: #ffffff;
    padding: 8px clamp(18px, 2vw, 32px);
    transition: background-color 300ms ease;
}
.sys + .sys { margin-top: 14px; }
.sys::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--accent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 400ms var(--ease-out);
}
.sys.is-active::before { transform: none; }
.sys.is-unavailable { background: var(--surface); }
.sys-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding: 12px 0;
    color: var(--muted);
    cursor: pointer;
    transition: color 300ms ease;
}
.sys-row:hover, .sys.is-active .sys-row { color: var(--ink); }
.sys-head { font-size: var(--step-lead); font-weight: 300; letter-spacing: -0.02em; line-height: 1.2; }
.sys.is-active .sys-head { font-weight: 400; }
.sys-toggle { text-align: left; letter-spacing: inherit; }
.sys-price { font-size: var(--step-body); font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; text-align: right; }
.sys-state { display: block; font-size: var(--step-small); font-weight: 500; color: var(--accent); }
.sys.is-unavailable .sys-state { color: var(--muted); }
.sys-body .buy-note { margin-top: 12px; }

.sys-body { padding: 8px 0 28px; max-width: 52ch; }
.js .sys:not(.is-active) .sys-body { display: none; }
.sys-tag { font-size: var(--step-small); color: var(--muted); margin-bottom: 6px; }
.sys-desc { margin-bottom: 18px; }
.sys-features { margin-bottom: 26px; display: grid; gap: 6px; }
.sys-features li { padding-left: 22px; position: relative; }
.sys-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 8px;
    height: 8px;
    background: var(--accent);
}
.sys-photo { display: none; }
.added-link { display: inline-block; margin-left: 20px; padding: 14px 0; }

/* ---------- Kérdések ---------- */

.faq {
    margin-top: var(--section);
    background: var(--field);
    color: var(--field-ink);
    padding-bottom: clamp(64px, 8vw, 120px);
}
.faq-text { grid-column: 1 / 6; padding-top: clamp(64px, 8vw, 120px); }
.faq-text h2 { margin-bottom: 28px; }
.faq-facts { display: grid; gap: 6px; font-size: var(--step-lead); line-height: 1.35; margin-bottom: 40px; }
.faq details { padding-block: 12px; }
.faq summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    min-height: 44px;
    padding: 6px 0;
    font-size: var(--step-lead);
    line-height: 1.3;
    cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: '';
    flex: none;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    transition: transform 300ms var(--ease-out);
}
.faq details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.faq details p { color: var(--field-muted); padding: 4px 0 8px; max-width: 48ch; }
.faq-actions { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; margin-top: 40px; }
.faq .button { background: var(--field-ink); color: var(--field); }
.faq .button:hover { background: #ffffff; }
.faq-photos { grid-column: 7 / 13; align-self: start; position: relative; }
.faq-photos .tall { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.faq-photos figcaption { font-size: var(--step-small); color: var(--field-muted); padding-top: 12px; }

/* ---------- Lábléc ---------- */

.footer {
    position: relative;
    min-height: 100svh;
    color: #f4f6f0;
    background: #1b231e;
    overflow: clip;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.footer-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.5);
}
.footer-top {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    padding: 32px var(--margin) 0;
}
.footer-top nav { grid-column: span 3; }
.footer-top h2 { font-size: var(--step-body); font-weight: 500; letter-spacing: 0; margin-bottom: 10px; line-height: 1.4; }
.footer-top a, .footer-top p { display: block; padding: 3px 0; text-decoration: none; }
.footer-top a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-contact { grid-column: 10 / 13; }
.footer-bottom { position: relative; padding: 0 var(--margin) 24px; }
.footer-word {
    font-size: 20.5vw;
    font-weight: 300;
    letter-spacing: -0.06em;
    line-height: 0.85;
    margin-bottom: 28px;
    margin-left: -0.04em;
}
.footer-legal { font-size: var(--step-small); color: #d4dbd0; max-width: 120ch; }
.footer-legal a { text-underline-offset: 3px; }
.footer-legal p + p { margin-top: 6px; }

/* ---------- Nagyított kép ---------- */

.lightbox {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(12, 18, 14, 0.94);
    color: #ffffff;
}
.lightbox::backdrop { background: rgba(12, 18, 14, 0.94); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox img { max-width: calc(100vw - 140px); max-height: calc(100vh - 120px); object-fit: contain; background: #ffffff; user-select: none; }
.lb-btn {
    position: absolute;
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: 28px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 200ms ease;
}
.lb-btn[hidden] { display: none; }
.lb-btn:hover { background: rgba(255, 255, 255, 0.28); }
.lb-close { top: 18px; right: 18px; }
.lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
.lb-caption { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; font-size: var(--step-small); padding: 0 70px; }

/* ---------- Mozgás ---------- */

@media (prefers-reduced-motion: no-preference) {
    .js .hero [data-load] { opacity: 0; transform: translateY(18px); animation: rise 800ms var(--ease-out) forwards; animation-delay: var(--d, 0ms); }
    .js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: var(--d, 0ms); }
    .js [data-reveal].is-in { opacity: 1; transform: none; }
    .js .step .step-media > * { transform: scale(1.12); }
    .js .step.is-in .step-media > * { transform: none; }
    .js .step.is-in:hover .step-media > * { transform: scale(1.04); }
    .footer-photo { animation: drift 30s ease-in-out infinite alternate; }
}
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes drift { from { transform: scale(1.04) translateY(0); } to { transform: scale(1.12) translateY(-2%); } }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; }
}

/* ---------- Tablet ---------- */

@media (max-width: 1080px) {
    .hero h1 { grid-column: 1 / 10; }
    .cart-link { grid-column: 10 / 13; }
    .hero-copy { grid-column: 1 / 13; grid-row: 2; max-width: 40rem; padding-bottom: 0; }
    .hero-product { grid-column: 1 / 13; grid-row: 3; height: auto; aspect-ratio: 4 / 3; min-height: 0; }
    .hero-foot { grid-row: 4; }

    .hc10-head, .hc10-groups { grid-column: 1 / 13; }
    .hc10-head { margin-bottom: 40px; max-width: 40rem; }
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }

    .how-intro h2, .how-intro p { grid-column: 1 / 13; }
    .how-intro p { margin-top: 20px; }


    .systems-stage { display: none; }
    .systems-head, .systems-list { grid-column: 1 / 13; }
    .sys-photo { display: block; width: 100%; max-width: 560px; aspect-ratio: 4 / 3; background: var(--surface); margin: 6px 0 18px; padding: 16px; cursor: zoom-in; }
    .sys-photo img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
    .sys-photo.is-drawn { cursor: default; }

    .faq-text { grid-column: 1 / 8; }
    .faq-photos { grid-column: 8 / 13; padding-top: clamp(64px, 8vw, 120px); }

    .footer-top nav { grid-column: span 4; }
    .footer-contact { grid-column: 9 / 13; }
}

/* ---------- Telefon ---------- */

@media (max-width: 720px) {
    .topbar { min-height: 56px; }
    .topbar-nav { display: none; }
    .topbar-brand { font-size: 1.375rem; }
    .topbar-cta { min-height: 40px; padding: 8px 16px; }

    .hero { display: flex; flex-direction: column; min-height: auto; padding-top: 20px; gap: 0; }
    .hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
    .hero h1 { font-size: clamp(3rem, 14vw, 4.5rem); }
    .hero-copy { padding: 24px 0 0; }
    .hero-buy, .hero-buy .button { width: 100%; }
    .sys-price { text-align: left; }
    .hero-product { margin-top: 32px; aspect-ratio: 4 / 5; align-self: stretch; width: 100%; }
    .hero-foot { padding-top: 28px; }

    .hc10-groups { grid-template-columns: 1fr; row-gap: 40px; }

    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; row-gap: 32px; }
    .step-media { margin-bottom: 12px; }

    .sys-row { flex-direction: column; gap: 2px; }
    .add-to-cart { width: 100%; }
    .added-link { margin: 6px 0 0; }


    .faq-photos { grid-column: 1 / 13; grid-row: 1; padding-top: 0; margin-inline: calc(var(--margin) * -1); }
    .faq-photos .tall { aspect-ratio: 4 / 5; }
    .faq-photos figcaption { padding: 12px var(--margin) 0; }
    .faq-text { grid-column: 1 / 13; grid-row: 2; padding-top: 24px; }
    .faq-actions .button { width: 100%; }

    .footer { min-height: 88svh; }
    .footer-top { grid-template-columns: 1fr 1fr; row-gap: 20px; padding-top: 24px; }
    .footer-top nav, .footer-contact { grid-column: auto; }
    .footer-word { font-size: 19.5vw; }

    .lightbox img { max-width: calc(100vw - 20px); max-height: calc(100vh - 150px); }
    .lb-prev, .lb-next { top: auto; bottom: 60px; transform: none; }
}