/* Angel Glow Nails Salon — Tatabánya
   Minden vizuális stílus itt van osztályokon keresztül; a HTML csak
   szerkezetet és tartalmat hordoz, inline style nincs benne. */

/* Önhosztolt betűtípusok (korábban Google Fonts CDN-ről @import-tal — GDPR miatt lokálisra váltva) */
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300; font-display: swap; src: url('assets/fonts/cormorant-garamond-300-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300; font-display: swap; src: url('assets/fonts/cormorant-garamond-300-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: swap; src: url('assets/fonts/cormorant-garamond-300-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: swap; src: url('assets/fonts/cormorant-garamond-300-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/cormorant-garamond-400-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/cormorant-garamond-400-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Italiana'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/Italiana-Regular.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/ibm-plex-mono-400-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/ibm-plex-mono-400-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 200; font-display: swap; src: url('assets/fonts/jost-200-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 200; font-display: swap; src: url('assets/fonts/jost-200-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300; font-display: swap; src: url('assets/fonts/jost-300-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300; font-display: swap; src: url('assets/fonts/jost-300-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/jost-400-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/jost-400-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #FAF7F4; overflow-x: hidden; overscroll-behavior-x: none; touch-action: pan-y; }
body { margin: 0; background: #FAF7F4; color: #241D19; font-family: 'Jost', system-ui, sans-serif; overflow-x: clip; overscroll-behavior-x: none; touch-action: pan-y; text-wrap: pretty; }

/* iOS Safari: a notch/Dynamic Island mögötti sáv áttetsző, a mögötte
   lévő oldaltartalmat mutatja — ez a fix csík biztosítja, hogy ott
   mindig a márka sötét színe (#241D19) legyen, függetlenül a .nav
   görgetéshez kötött navSolid animációjától. */
.status-bar-fill { position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top); background: #241D19; z-index: 99999999; pointer-events: none; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.65; }
img { max-width: 100%; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

/* --- görgetéshez kötött animációk (Chrome / Edge natívan, Safari: script.js) --- */
@keyframes far { from { transform: translate3d(0,-8%,0) scale(1.18); } to { transform: translate3d(0,8%,0) scale(1.18); } }
@keyframes uncrop { from { clip-path: inset(16% 26% 16% 26%); } to { clip-path: inset(0% 0% 0% 0%); } }
@keyframes rise { from { opacity: 0; transform: translate3d(0,44px,0); } to { opacity: 1; transform: none; } }
@keyframes wordUp { from { opacity: 0; transform: translate3d(0,0.55em,0); } to { opacity: 1; transform: none; } }
@keyframes lineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes navSolid { from { background-color: rgba(36,29,25,0); border-color: rgba(168,92,107,0); } to { background-color: rgba(36,29,25,0.92); border-color: rgba(168,92,107,0.45); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* minden időalapú "reveal" animáció (rise/wordUp) ugyanazzal az egységes
   sebességgel fusson végig a fájlban — mint a monday.com marquee__track,
   ahol minden elem egy közös, egységes ütemben mozog */
:root { --reveal-duration: 1s; }

/* ==========================================================================
   Megosztott / utility osztályok
   ========================================================================== */

.container { max-width: 1700px; margin: 0 auto; box-sizing: border-box; }

/* két hasábos, "0.X fr" arányú fejezetrácsok (Bevezető, Rólam, Árlista, GYIK) */
.split { display: grid; gap: 100px; align-items: start; }
.split--125-75 { grid-template-columns: 1.25fr 0.75fr; }
.split--90-110 { grid-template-columns: 0.9fr 1.1fr; }
.split--70-130 { grid-template-columns: 0.7fr 1.3fr; }

/* számozott szakasz-előcímke, pl. "01 / Rólam" */
.eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: #A85C6B; margin-bottom: 22px; }
.eyebrow--light { color: inherit; opacity: 0.8; }

/* nagy, keskeny szerif szakaszcím (h2) */
.section-title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(46px, 5vw, 88px); line-height: 0.92; letter-spacing: -0.04em; margin: 0; color: #6B3341; }

/* arany, uppercase mono szöveglink (pl. "Követés →", "Megnyitás Google Térképen →") */
.link-gold { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: #A85C6B; white-space: nowrap; }

/* gomb alap + színváltozatok */
.btn { display: inline-flex; align-items: center; min-height: 56px; padding: 0 28px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }
.btn--dark { background: #241D19; color: #FAF7F4; }
.btn--light { background: #FAF7F4; color: #241D19; min-height: 58px; padding: 0 30px; }
.btn--outline { border: 1px solid rgba(36,29,25,0.2); }
.btn--outline-light { border: 1px solid rgba(250,247,244,0.5); min-height: 58px; padding: 0 30px; }

/* pin-stage + pin-cover: a kép egy ideig "háttérként" fixen áll (sticky),
   utána a következő, tömör hátterű tartalom lekerekített felső éllel
   ráscúszik és eltakarja (Rólam / Kapcsolat) */
.pin-stage { position: relative; }
.pin-stage--18 { height: 118vh; }
.pin-stage--20 { height: 120vh; }
.pin-cover { position: relative; z-index: 2; background: #FAF7F4; border-radius: 44px 44px 0 0; box-shadow: 0 -30px 60px rgba(36,29,25,0.22); }
.pin-cover--18 { margin-top: -18vh; }
/* kis, biztonságos átfedés a Hero/Kapcsolat képére, amin a szöveg alul ül —
   ennyi még nem ér bele a szövegbe/gombba, de már érezhetően "ráfolyik" */
.pin-cover--6 { margin-top: -6vh; }

/* teljes szélességű, "far" parallax háttérdoboz (Szolgáltatások) */
.parallax { position: relative; overflow: hidden; }
.parallax--108 { height: 108vh; }
.parallax__bg { position: absolute; inset: -12% 0; background-size: cover; background-position: center; filter: brightness(0.78) saturate(0.95); animation: far linear both; animation-timeline: view(); }

/* sticky "pin" doboz: pontosan a viewportot tölti ki, ameddig a
   .pin-stage (vagy a szekció) extra magassága engedi, hogy fixen álljon.
   A kép maga statikus (nincs zoom/pan) — a "parallax" itt magából a
   pinnelésből jön: a kép áll, a következő tartalom csúszik rá görgetéskor. */
.pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.pin__bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(0.7) saturate(0.95); }

.js-reveal { will-change: opacity, transform; }

/* ==========================================================================
   Navigáció
   ========================================================================== */

.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 80; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: calc(16px + env(safe-area-inset-top)) 40px 26px; color: #FAF7F4; min-height: 74px; box-sizing: border-box; background-image: linear-gradient(to bottom, rgba(36,29,25,0.62), rgba(36,29,25,0)); border-bottom: 1px solid rgba(168,92,107,0); backdrop-filter: blur(10px); animation: navSolid linear both; animation-timeline: scroll(); animation-range: 55vh 95vh; }
.nav__brand { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-family: 'Cormorant Garamond', serif; font-size: 23px; letter-spacing: 0.18em; text-transform: uppercase; }
.nav__mark { height: 30px; width: auto; }
.nav__links { display: flex; gap: 26px; white-space: nowrap; font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { position: relative; height: 120vh; }
/* a kéz/köröm (a lényeg) a fotó jobb oldalán van, ezért a kivágás
   jobbra igazítva marad, sosem a bal oldali polcot részesíti előnyben */
.hero__bg { background-image: url('assets/new/hero_gem2.jpeg'); background-position: right center; }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(36,29,25,0.9) 0%, rgba(36,29,25,0.76) 42%, rgba(36,29,25,0.64) 76%, rgba(36,29,25,0.68)); }
.hero__row { position: absolute; left: 40px; right: 40px; bottom: 56px; color: #FAF7F4; display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; }
.hero__logo { width: min(420px, 30vw); height: auto; display: block; margin-bottom: 26px; filter: drop-shadow(0 4px 30px rgba(36,29,25,0.5)); animation: rise var(--reveal-duration) ease-out both; }
.hero__title { font-family: 'Italiana', 'Cormorant Garamond', serif; font-weight: 400; font-size: clamp(80px, 10.5vw, 190px); line-height: 0.88; letter-spacing: -0.01em; margin: 0; color: #FFFFFF; text-shadow: 0 2px 24px rgba(36,29,25,0.35); }
.hero__word { display: block; animation: wordUp var(--reveal-duration) ease-out both; }
.hero__word--1 { animation-delay: 0.05s; }
.hero__word--2 { padding-left: 0.12em; animation-delay: 0.18s; }

/* ==========================================================================
   Bevezető
   ========================================================================== */

.intro { padding: 130px 40px 120px; }
.intro__lead { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(34px, 3.4vw, 60px); line-height: 1.14; letter-spacing: -0.02em; margin: 0; animation: rise var(--reveal-duration) ease-out both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
.stat-row { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0; border-top: 1px solid rgba(36,29,25,0.18); }
.intro__stats .stat-row:last-child { border-bottom: 1px solid rgba(36,29,25,0.18); }
.stat-row__label { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: #8A7A70; }
.stat-row__value { font-family: 'Cormorant Garamond', serif; font-size: 32px; }
.intro__cta { display: flex; gap: 10px; margin-top: 28px; }

/* ==========================================================================
   Rólam
   ========================================================================== */

.about { padding: 0 0 130px; }
.about__frame { animation: uncrop linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
.about__bg { background-image: url('assets/work-about.jpg'); }
.about__content { padding: 90px 40px 0; }
.about__text { max-width: 620px; padding-top: 10px; }
.about__text p { font-size: 18px; line-height: 1.8; color: #6B5D54; font-weight: 300; margin: 0 0 22px; }
.about__text p:last-child { margin: 0; }

/* ==========================================================================
   Idézet
   ========================================================================== */

.quote { position: relative; height: 120vh; }
.quote__pin { display: flex; align-items: center; justify-content: center; }
.quote__bg { background-image: url('assets/work-quote.jpg'); }
.quote__scrim { position: absolute; inset: 0; background: rgba(36,29,25,0.32); }
.quote__text { position: relative; z-index: 2; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: clamp(46px, 5.6vw, 104px); line-height: 1.04; letter-spacing: -0.035em; text-align: center; color: #E3B79C; max-width: 1250px; margin: 0; padding: 0 40px; }
.quote__by { position: absolute; left: 40px; bottom: 40px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(250,247,244,0.78); }

/* ==========================================================================
   Szolgáltatások
   ========================================================================== */

.services { padding: 130px 0 0; }
.services__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; padding: 0 40px 60px; }
.services__intro { font-size: 16px; line-height: 1.72; color: #6B5D54; font-weight: 300; max-width: 320px; margin: 0; }

.service-card__bg--gel { background-image: url('assets/work-gel.jpg'); }
.service-card__bg--epites { background-image: url('assets/work-epites.jpg'); }
.service-card__bg--toltes { background-image: url('assets/work-toltes.jpg'); }
.service-card__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(36,29,25,0.76) 0%, rgba(36,29,25,0.56) 34%, rgba(36,29,25,0.3) 72%, rgba(36,29,25,0.42)); }
.service-card__content { position: absolute; left: 40px; right: 40px; bottom: 48px; color: #FAF7F4; }
.service-card__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; border-bottom: 1px solid rgba(250,247,244,0.32); padding-bottom: 18px; }
.service-card__title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(52px, 6vw, 108px); line-height: 0.9; letter-spacing: -0.04em; margin: 0; }
.service-card__price { text-align: right; }
.service-card__price-label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.22em; }
.service-card__price-value { font-family: 'Cormorant Garamond', serif; font-size: 40px; line-height: 1.1; }
.service-card__desc { font-size: 17px; line-height: 1.7; font-weight: 300; margin: 20px 0 0; max-width: 560px; opacity: 0.88; }
.service-card__num { position: absolute; top: 48px; left: 40px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.24em; color: rgba(250,247,244,0.8); }

/* ==========================================================================
   Videó (önálló, automatikusan újrainduló bemutató-klip)
   ========================================================================== */

.showcase { padding: 100px 40px; display: flex; justify-content: center; }
.showcase__video { width: 100%; max-width: 380px; aspect-ratio: 3 / 4; object-fit: contain; background: #241D19; border: 1px solid rgba(36,29,25,0.18); box-shadow: 0 24px 60px rgba(36,29,25,0.16); }

/* ==========================================================================
   Árlista
   ========================================================================== */

.pricing { position: relative; padding: 130px 40px; }
.pricing__watermark { position: absolute; top: 70px; right: 0; width: 52%; opacity: 0.11; pointer-events: none; }
.pricing__intro .section-title { margin: 0 0 26px; }
.pricing__discounts { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; line-height: 2; letter-spacing: 0.18em; text-transform: uppercase; color: #8A7A70; margin: 0; }

.price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 40px; padding: 17px 0; border-top: 1px solid rgba(36,29,25,0.18); }
.pricing__list .price-row:last-child { border-bottom: 1px solid rgba(36,29,25,0.18); }
.price-row__label { display: flex; gap: 20px; align-items: baseline; }
.price-row__name { font-size: 19px; font-weight: 300; }
.price-row__tag { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: #A85C6B; }
.price-row__price { font-family: 'Cormorant Garamond', serif; font-size: 32px; line-height: 1; white-space: nowrap; }

/* ==========================================================================
   Vélemények
   ========================================================================== */

.reviews { padding: 0 40px 130px; }
.reviews .eyebrow { margin-bottom: 40px; }
.review-row { display: flex; justify-content: space-between; align-items: baseline; gap: 80px; padding: 40px 0; border-top: 1px solid rgba(36,29,25,0.18); animation: rise var(--reveal-duration) ease-out both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
.reviews .review-row:last-child { border-bottom: 1px solid rgba(36,29,25,0.18); }
.review-row__quote { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: clamp(30px, 3.2vw, 54px); line-height: 1.16; letter-spacing: -0.02em; margin: 0; max-width: 1100px; }
.review-row__name { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: #8A7A70; white-space: nowrap; }

/* ==========================================================================
   Instagram
   ========================================================================== */

.instagram { padding: 0 0 130px; }
.instagram__head { display: flex; align-items: baseline; justify-content: space-between; gap: 40px; padding: 0 40px 26px; }
.instagram__title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(34px, 3.4vw, 56px); letter-spacing: -0.02em; margin: 0; }
.instagram__grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; }
.instagram__grid--dynamic { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.instagram__item { aspect-ratio: 1; background-color: #E6DAD2; display: block; position: relative; overflow: hidden; }
.instagram__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.instagram__item:hover img, .instagram__item:focus-visible img { transform: scale(1.12); }

/* ==========================================================================
   GYIK
   ========================================================================== */

.faq { padding: 0 40px 130px; }
.faq-item { border-top: 1px solid rgba(36,29,25,0.18); }
.faq__list .faq-item:last-child { border-bottom: 1px solid rgba(36,29,25,0.18); }
.faq-item__q { display: flex; justify-content: space-between; align-items: center; gap: 40px; min-height: 78px; font-size: 21px; font-weight: 300; }
.faq-item__icon { font-family: 'IBM Plex Mono', monospace; color: #A85C6B; }
.faq-item__a { font-size: 16.5px; line-height: 1.8; color: #6B5D54; font-weight: 300; margin: 0 0 28px; max-width: 760px; }

/* ==========================================================================
   Kapcsolat
   ========================================================================== */

.contact { position: relative; }
.contact__bg { background-image: url('assets/work-contact.PNG'); }
.contact__scrim { position: absolute; inset: 0; background: rgba(36,29,25,0.34); }
.contact__row { position: absolute; left: 40px; right: 40px; bottom: 56px; color: #FAF7F4; display: flex; align-items: flex-end; justify-content: space-between; gap: 80px; }
.contact__title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(52px, 6.4vw, 120px); line-height: 0.9; letter-spacing: -0.045em; margin: 0; }
.contact__actions { display: flex; gap: 10px; padding-bottom: 14px; }
.contact__info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; padding: 70px 40px 0; }
.info-block { border-top: 1px solid rgba(36,29,25,0.18); padding-top: 18px; }
.info-block__label { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: #8A7A70; }
.info-block__value { font-size: 19px; font-weight: 300; margin-top: 10px; }
.contact__map { padding: 60px 40px 0; }
.contact__map-head { display: flex; align-items: baseline; justify-content: space-between; gap: 40px; border-top: 1px solid rgba(36,29,25,0.18); padding-top: 18px; margin-bottom: 18px; }
.contact__map-frame { display: block; width: 100%; border: 1px solid rgba(36,29,25,0.18); filter: grayscale(0.35) contrast(1.05); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { padding: 120px 40px 40px; }
.site-footer__inner { text-align: center; }
.site-footer__logo { width: min(300px, 24vw); height: auto; display: block; margin: 0 auto 24px; }
.site-footer__divider { display: flex; align-items: center; gap: 18px; max-width: 760px; margin: 0 auto 34px; }
.site-footer__rule { flex: 1; height: 1px; }
.site-footer__rule--l { background: linear-gradient(to right, rgba(168,92,107,0), #A85C6B); }
.site-footer__rule--r { background: linear-gradient(to left, rgba(168,92,107,0), #A85C6B); }
.site-footer__tagline { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: #7C3B4A; white-space: nowrap; }
.site-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 30px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: #8A7A70; }
.site-footer__copyright { text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #A8968B; margin-top: 60px; border-top: 1px solid rgba(36,29,25,0.14); padding-top: 20px; }

/* ==========================================================================
   Árlista (megosztható kép-oldal, arlista.html)
   ========================================================================== */

.price-sheet { min-height: 100vh; background: #F1EAE0; }
.price-sheet__inner { min-height: 100vh; display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 34px 18px 54px; box-sizing: border-box; font-family: 'IBM Plex Mono', monospace; color: #241D19; }
.price-sheet__brand { display: flex; align-items: center; gap: 12px; font-family: 'Cormorant Garamond', serif; font-size: 20px; letter-spacing: 0.2em; text-transform: uppercase; }
.price-sheet__mark { height: 40px; width: auto; }
.price-sheet__image { width: 100%; max-width: 620px; height: auto; display: block; box-shadow: 0 24px 60px rgba(36,29,25,0.16); }
.price-sheet__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; max-width: 620px; }
.price-sheet__btn { flex: 1 1 200px; display: flex; align-items: center; justify-content: center; min-height: 54px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }
.price-sheet__btn--download { background: #241D19; color: #F1EAE0; }
.price-sheet__btn--back { border: 1px solid #A85C6B; }
.price-sheet__footer { text-align: center; font-size: 10.5px; line-height: 2; letter-spacing: 0.18em; text-transform: uppercase; color: #8A7A70; }

/* ==========================================================================
   Reszponzív törések
   ========================================================================== */

/* --- tablet --- */
@media (max-width: 1100px) {
  .nav__links { gap: 18px; font-size: 11px; }
  .split { gap: 56px; }
}

/* --- mobil --- */
@media (max-width: 860px) {
  .pin-stage--18 { height: 112vh; }
  .pin-cover--18 { margin-top: -8vh; }
  .pin-stage--20 { height: 110vh; }
  .pin-cover--6 { margin-top: -4vh; }
  .parallax--108 { height: 78vh; }
  /* keskeny, magas mobilnézetben a "right center" már csak a szövet
     ujjrészét mutatná — 72%-nál a köröm is jól látszik */
  .hero__bg { background-position: 72% center; }
  .nav { padding: calc(12px + env(safe-area-inset-top)) 18px 20px; min-height: 58px; }
  .nav__brand { font-size: 17px; gap: 5px; }
  .nav__mark { height: 22px; }
  .nav__links a { display: none; }
  .nav__links a.nav__cta { display: inline-flex; color: #C98194; font-size: 11px; }

  .intro, .pricing, .reviews, .faq, .site-footer, .showcase { padding-left: 18px; padding-right: 18px; }
  .services__head, .instagram__head { padding-left: 18px; padding-right: 18px; }
  .site-footer__links { gap: 12px 18px; }

  .split { grid-template-columns: 1fr; gap: 34px; }
  .contact__info { grid-template-columns: 1fr; gap: 34px; }
  .instagram__grid { grid-template-columns: repeat(3, 1fr); }
  .review-row { gap: 34px; }
  .price-row { flex-direction: column; align-items: flex-start; gap: 4px; }

  h1 { font-size: 46px; line-height: 0.94; }
  h2 { font-size: 38px; }
  h3 { font-size: 40px; }
  .hero__logo { width: 240px; }
  .hero__row, .contact__row { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* ==========================================================================
   Jogi oldalak (Impresszum, Adatkezelési tájékoztató, Felhasználási feltételek)
   ========================================================================== */
.legal { padding: calc(150px + env(safe-area-inset-top)) 40px 120px; max-width: 860px; margin: 0 auto; }
.legal__back { display: inline-block; margin-bottom: 40px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #8A7A70; }
.legal__title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(38px, 5vw, 64px); line-height: 1; letter-spacing: -0.03em; margin: 0 0 8px; }
.legal__updated { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: #8A7A70; margin: 0 0 40px; }
.legal__notice { background: rgba(168,92,107,0.14); border: 1px solid rgba(168,92,107,0.45); border-radius: 10px; padding: 20px 24px; font-size: 15px; line-height: 1.7; color: #6B5D54; margin-bottom: 50px; }
.legal__notice strong { color: #241D19; }
.legal h2 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.02em; margin: 48px 0 16px; color: #6B3341; }
.legal p { font-size: 16px; line-height: 1.8; color: #6B5D54; font-weight: 300; margin: 0 0 18px; }
.legal ul { margin: 0 0 18px; padding-left: 22px; }
.legal li { font-size: 16px; line-height: 1.8; color: #6B5D54; font-weight: 300; margin-bottom: 8px; }
.legal table { width: 100%; border-collapse: collapse; margin: 0 0 30px; font-size: 15px; }
.legal table td { padding: 10px 0; border-bottom: 1px solid rgba(36,29,25,0.1); vertical-align: top; }
.legal table td:first-child { color: #8A7A70; width: 42%; padding-right: 20px; }
.legal table td:first-child { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.legal strong { color: #241D19; font-weight: 400; }
.legal a { color: #241D19; text-decoration: underline; text-decoration-color: rgba(168,92,107,0.6); text-underline-offset: 3px; }