/* =========================================================
   Freedom Art by Bogi — landing page
   Modern, értékesítés-fókuszú one-page
   ========================================================= */

/* ---------- 1. Tokenek ---------- */
:root{
  --ink:      #0E0E0F;
  --ink-2:    #17171A;
  --ink-3:    #232327;
  --line-d:   rgba(247,245,241,.13);
  --line-l:   rgba(14,14,15,.12);
  --paper:    #F7F5F1;
  --paper-2:  #EDE9E2;
  --brass:    #C29553;
  --brass-lt: #DCB77E;
  --muted:    #6B6660;
  --muted-d:  rgba(247,245,241,.6);
  --teal:     #2E8FA3;

  --f-d: "Fraunces", "Playfair Display", Georgia, serif;
  --f-b: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1280px;
  --gut: clamp(20px, 4.5vw, 56px);
  --sec: clamp(76px, 10vw, 148px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Alap ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:110px; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-b); font-size:clamp(16px,1.02vw,17px); line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--f-d); font-weight:400; line-height:1.04; letter-spacing:-.025em; margin:0;
  font-variation-settings:"opsz" 40; }
p{ margin:0 0 1.05em; } p:last-child{ margin-bottom:0; }
::selection{ background:var(--brass); color:#fff; }

/* ---------- 3. Segéd ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.wrap--wide{ max-width:1560px; }
.section{ padding-block:var(--sec); position:relative; }
.section--dark{ background:var(--ink); color:var(--paper); }
.section--soft{ background:var(--paper-2); }

.eyebrow{
  font-size:.7rem; letter-spacing:.26em; text-transform:uppercase; font-weight:700;
  color:var(--brass); margin:0 0 22px; display:flex; align-items:center; gap:13px;
}
.eyebrow::before{ content:""; width:30px; height:1px; background:currentColor; flex:none; }
.eyebrow--c{ justify-content:center; }

.h-xl{ font-size:clamp(2.7rem,7vw,6rem); }
.h-lg{ font-size:clamp(2.1rem,4.4vw,3.7rem); }
.h-md{ font-size:clamp(1.5rem,2.3vw,2rem); }
.lead{ font-size:clamp(1.03rem,1.28vw,1.18rem); color:var(--muted); max-width:58ch; }
.section--dark .lead{ color:var(--muted-d); }
.italic{ font-style:italic; color:var(--brass); }
.sec-head{ max-width:66ch; margin-bottom:clamp(42px,5.5vw,78px); }
.sec-head .lead{ margin-top:24px; }
.sec-head--c{ text-align:center; margin-inline:auto; }

/* ---------- 4. Gomb ---------- */
.btn{
  --bg:var(--ink); --fg:var(--paper);
  position:relative; display:inline-flex; align-items:center; gap:11px;
  padding:18px 34px; border:1px solid var(--bg); border-radius:999px;
  background:var(--bg); color:var(--fg); isolation:isolate; overflow:hidden;
  font-size:.8rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  transition:color .4s var(--ease), border-color .4s var(--ease), transform .3s var(--ease);
}
.btn::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--brass);
  transform:translateY(101%); transition:transform .5s var(--ease); }
.btn:hover::before{ transform:translateY(0); }
.btn:hover{ color:#fff; border-color:var(--brass); }
.btn:active{ transform:scale(.98); }
.btn .arr{ transition:transform .4s var(--ease); }
.btn:hover .arr{ transform:translateX(5px); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); border-color:var(--line-l); }
.section--dark .btn--ghost{ --fg:var(--paper); border-color:var(--line-d); }
.hero .btn--ghost{ --fg:var(--paper); border-color:rgba(247,245,241,.42); backdrop-filter:blur(6px); }
.btn--light{ --bg:var(--paper); --fg:var(--ink); }
.btn--brass{ --bg:var(--brass); --fg:#fff; }
.btn--brass::before{ background:var(--ink); }
.btn--brass:hover{ border-color:var(--ink); }
.btn--sm{ padding:13px 24px; font-size:.71rem; }

/* ---------- 5. Képhely ---------- */
.ph{ position:relative; overflow:hidden; background:var(--paper-2);
  background-image:radial-gradient(120% 90% at 25% 15%, #F2EEE7 0%, #DFD8CD 50%, #C6BDB0 100%);
  display:flex; align-items:center; justify-content:center; }
.ph__tag{ position:relative; z-index:2; text-align:center; padding:16px 20px; max-width:86%;
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  color:rgba(14,14,15,.5); border:1px dashed rgba(14,14,15,.28); background:rgba(247,245,241,.55); }
.ph__tag span{ display:block; margin-top:5px; font-size:.7rem; font-weight:500; letter-spacing:.05em;
  text-transform:none; opacity:.78; }

/* ---------- 6. Fejléc ---------- */
.hdr{ position:fixed; inset:16px 0 auto; z-index:1000; transition:inset .5s var(--ease); }
.hdr__in{
  display:flex; align-items:center; justify-content:space-between; gap:26px;
  padding:12px 12px 12px 26px; border-radius:999px;
  background:rgba(14,14,15,.42); backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(247,245,241,.12); color:var(--paper);
  transition:background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.hdr.is-stuck .hdr__in{ background:rgba(247,245,241,.86); color:var(--ink); border-color:rgba(14,14,15,.09);
  box-shadow:0 10px 40px rgba(14,14,15,.1); }
.hdr.is-stuck .btn--light{ --bg:var(--ink); --fg:var(--paper); }

.logo{ display:flex; flex-direction:column; line-height:1; flex:none; }
.logo b{ font-family:var(--f-d); font-size:1.2rem; font-weight:500; }
.logo i{ font-style:normal; font-size:.55rem; letter-spacing:.36em; text-transform:uppercase; opacity:.65; margin-top:5px; }

.nav{ display:flex; align-items:center; gap:30px; }
.nav a{ font-size:.76rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  position:relative; padding-block:4px; opacity:.85; transition:opacity .3s; }
.nav a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease); }
.nav a:hover{ opacity:1; } .nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav .btn{ display:none; }

.burger{ display:none; background:none; border:0; padding:11px; }
.burger span{ display:block; width:24px; height:1.5px; background:currentColor;
  transition:transform .4s var(--ease), opacity .3s; }
.burger span+span{ margin-top:6px; }
body.nav-open .burger span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
body.nav-open .burger span:nth-child(2){ opacity:0; }
body.nav-open .burger span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* ---------- 7. Hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end;
  color:var(--paper); overflow:hidden; }
.hero__bg{ position:absolute; inset:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:26% 50%;
  animation:kb 26s ease-in-out infinite alternate; }
@keyframes kb{ from{ transform:scale(1.04); } to{ transform:scale(1.14); } }
.hero__bg::after{ content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(8,10,12,.82) 0%, rgba(8,10,12,.5) 42%, rgba(8,10,12,.18) 72%, rgba(8,10,12,.35) 100%),
    linear-gradient(180deg, rgba(8,10,12,.6) 0%, rgba(8,10,12,.1) 30%, rgba(8,10,12,.45) 66%, rgba(8,10,12,.92) 100%); }
.hero__in{ position:relative; z-index:2; width:100%; padding-block:clamp(120px,15vh,170px) clamp(38px,6vh,70px); }
.hero h1{ max-width:16ch; }
.hero h1 .ln{ display:block; overflow:hidden; }
.hero h1 .ln>span{ display:block; transform:translateY(105%); animation:up 1.05s var(--ease) forwards; }
.hero h1 .ln:nth-child(2)>span{ animation-delay:.1s; }
.hero h1 .ln:nth-child(3)>span{ animation-delay:.2s; }
@keyframes up{ to{ transform:translateY(0); } }
.hero__sub{ max-width:48ch; margin-top:28px; color:rgba(247,245,241,.82); font-size:clamp(1.02rem,1.28vw,1.16rem); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }
.fade{ opacity:0; animation:fade 1s var(--ease) .5s forwards; }
@keyframes fade{ to{ opacity:1; } }
.hero__meta{ display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,64px);
  margin-top:clamp(44px,6.5vh,84px); padding-top:28px; border-top:1px solid var(--line-d); }
.hero__meta b{ display:block; font-family:var(--f-d); font-size:clamp(1.6rem,2.5vw,2.3rem); font-weight:400; }
.hero__meta span{ font-size:.7rem; letter-spacing:.17em; text-transform:uppercase; color:rgba(247,245,241,.58); }
.scrollcue{ position:absolute; right:var(--gut); bottom:clamp(38px,6vh,70px); z-index:3;
  writing-mode:vertical-rl; font-size:.63rem; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(247,245,241,.5); display:flex; align-items:center; gap:13px; }
.scrollcue::after{ content:""; width:1px; height:60px;
  background:linear-gradient(rgba(247,245,241,.6),transparent); animation:cue 2.2s ease-in-out infinite; }
@keyframes cue{ 0%,100%{ transform:scaleY(.4); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } }

/* ---------- 8. Bevezető ---------- */
.intro{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(38px,6vw,100px); align-items:start; }
.statement{ font-family:var(--f-d); font-size:clamp(1.28rem,1.95vw,1.65rem); line-height:1.42; }
.tick{ list-style:none; margin:32px 0 0; padding:0; display:grid; gap:14px; }
.tick li{ position:relative; padding-left:32px; color:var(--muted); }
.tick li::before{ content:""; position:absolute; left:0; top:.62em; width:15px; height:1px; background:var(--brass); }
.tick li b{ color:var(--ink); font-weight:700; }

/* ---------- 9. Felületek (tipográfiai rács) ---------- */
.surfaces{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-l); border-block:1px solid var(--line-l); }
.surf{ background:var(--paper-2); padding:clamp(30px,3.2vw,44px) clamp(24px,2.6vw,38px);
  transition:background .5s var(--ease); position:relative; }
.surf:hover{ background:var(--paper); }
.surf__no{ font-size:.68rem; letter-spacing:.2em; font-weight:700; color:var(--brass); }
.surf h3{ font-size:clamp(1.32rem,1.8vw,1.6rem); margin:20px 0 12px; }
.surf p{ color:var(--muted); font-size:.94rem; }
.surf__tags{ margin-top:20px; display:flex; flex-wrap:wrap; gap:7px; }
.surf__tags span{ font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  padding:6px 12px; border:1px solid var(--line-l); border-radius:999px; color:var(--muted); }

/* ---------- 10. Galéria ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:36px; }
.filters button{ padding:11px 22px; border:1px solid var(--line-l); background:none; border-radius:999px;
  font-size:.73rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  transition:all .35s var(--ease); }
.filters button:hover{ border-color:var(--ink); }
.filters button.is-on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.grid-g{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(10px,1vw,16px); }
.gitem{ position:relative; overflow:hidden; cursor:pointer; grid-column:span 6; aspect-ratio:6/4; border-radius:4px; }
.gitem--sm{ grid-column:span 4; aspect-ratio:4/3.2; }
.gitem img,.gitem .ph{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease); }
.gitem:hover img{ transform:scale(1.06); }
.gitem::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(transparent 40%, rgba(8,10,12,.82)); opacity:.5; transition:opacity .5s var(--ease); }
.gitem:hover::after{ opacity:1; }
.gitem__cap{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:26px; color:var(--paper);
  transform:translateY(10px); opacity:.9; transition:transform .55s var(--ease), opacity .5s var(--ease); }
.gitem:hover .gitem__cap{ transform:none; opacity:1; }
.gitem__cap b{ display:block; font-family:var(--f-d); font-size:1.25rem; font-weight:400; }
.gitem__cap span{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; opacity:.75; }
.gitem--ph{ cursor:default; }
.gitem--ph::after{ display:none; }
.gitem[hidden]{ display:none; }

/* ---------- 11. Így készül ---------- */
.craft{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(14px,1.6vw,26px); align-items:end; }
.craft__a{ grid-column:1/8; }
.craft__b{ grid-column:8/13; }
.craft__c{ grid-column:1/6; }
.craft__t{ grid-column:6/13; padding-bottom:14px; }
.craft figure{ margin:0; position:relative; overflow:hidden; border-radius:4px; }
.craft img{ width:100%; height:100%; object-fit:cover; }
.craft__a{ aspect-ratio:16/10; } .craft__b{ aspect-ratio:4/5; } .craft__c{ aspect-ratio:4/3; }
.craft figcaption{ position:absolute; left:0; bottom:0; padding:18px 22px; color:var(--paper);
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  background:linear-gradient(transparent, rgba(8,10,12,.75)); width:100%; }

/* ---------- 12. Folyamat ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-d); }
.step{ background:var(--ink); padding:clamp(30px,3vw,44px) clamp(22px,2.4vw,34px) clamp(38px,4vw,54px);
  transition:background .5s var(--ease); }
.step:hover{ background:var(--ink-2); }
.step__no{ font-family:var(--f-d); font-size:clamp(2.4rem,4vw,3.4rem); line-height:1; display:block;
  color:transparent; -webkit-text-stroke:1px rgba(194,149,83,.6); margin-bottom:24px; }
.step h3{ font-size:1.26rem; margin-bottom:13px; }
.step p{ color:var(--muted-d); font-size:.93rem; }
.step__note{ margin-top:17px; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brass-lt); font-weight:700; }

/* ---------- 13. Miért mi ---------- */
.why{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,3vw,48px); }
.why__it{ padding-top:24px; border-top:1px solid var(--line-l); }
.why__it h3{ font-size:1.22rem; margin-bottom:11px; }
.why__it p{ color:var(--muted); font-size:.93rem; }

/* ---------- 14. Rólam ---------- */
.about{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(34px,5vw,90px); align-items:center; }
.about__img{ position:relative; aspect-ratio:4/5; border-radius:4px; overflow:hidden; }
.about__img img{ width:100%; height:100%; object-fit:cover; }
.sig{ font-family:var(--f-d); font-style:italic; font-size:1.6rem; margin-top:28px; color:var(--brass); }

/* ---------- 15. Vélemények ---------- */
.revs{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,26px); }
.rev{ background:var(--paper); padding:clamp(28px,3vw,38px); border:1px solid var(--line-l);
  border-radius:4px; display:flex; flex-direction:column; }
.rev__stars{ color:var(--brass); letter-spacing:.2em; font-size:.88rem; margin-bottom:16px; }
.rev p{ font-family:var(--f-d); font-size:1.08rem; line-height:1.5; flex:1; }
.rev footer{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line-l);
  font-size:.76rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.rev footer b{ display:block; color:var(--ink); letter-spacing:.02em; text-transform:none;
  font-size:.96rem; font-weight:700; margin-bottom:2px; }

/* ---------- 16. GYIK ---------- */
.faq{ max-width:900px; margin-inline:auto; border-top:1px solid var(--line-l); }
.faq details{ border-bottom:1px solid var(--line-l); }
.faq summary{ list-style:none; cursor:pointer; padding:25px 54px 25px 0; position:relative;
  font-family:var(--f-d); font-size:clamp(1.08rem,1.6vw,1.36rem); line-height:1.3; transition:color .3s; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--brass); }
.faq summary::after{ content:""; position:absolute; right:6px; top:50%; width:14px; height:14px; margin-top:-7px;
  background:linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,
             linear-gradient(currentColor,currentColor) center/1px 100% no-repeat;
  transition:transform .4s var(--ease); }
.faq details[open] summary::after{ transform:rotate(135deg); }
.faq .ans{ padding:0 clamp(28px,6vw,80px) 28px 0; color:var(--muted); }

/* ---------- 17. CTA sáv ---------- */
.cta-band{ position:relative; overflow:hidden; text-align:center; color:var(--paper); }
.cta-band img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cta-band::after{ content:""; position:absolute; inset:0; background:rgba(8,10,12,.7); }
.cta-band .wrap{ position:relative; z-index:3; }

/* ---------- 18. Kapcsolat ---------- */
.contact{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(38px,5.5vw,90px); }
.cinfo dl{ margin:32px 0 0; display:grid; gap:22px; }
.cinfo dt{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-lt); margin-bottom:5px; }
.cinfo dd{ margin:0; font-family:var(--f-d); font-size:1.2rem; }
.cinfo dd a:hover{ color:var(--brass-lt); }
.socials{ display:flex; gap:10px; margin-top:34px; }
.socials a{ width:44px; height:44px; border:1px solid var(--line-d); display:grid; place-items:center;
  border-radius:50%; font-size:.72rem; font-weight:700; letter-spacing:.06em; transition:all .4s var(--ease); }
.socials a:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }

.form{ display:grid; gap:19px; grid-template-columns:1fr 1fr; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field--full{ grid-column:1/-1; }
.field label{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brass-lt); font-weight:700; }
.field input,.field select,.field textarea{ background:transparent; border:0; border-bottom:1px solid var(--line-d);
  color:var(--paper); font:inherit; font-size:1rem; padding:12px 2px; transition:border-color .35s var(--ease); }
.field select option{ background:var(--ink); }
.field textarea{ resize:vertical; min-height:104px; }
.field :focus{ outline:none; border-color:var(--brass); }
.field input::placeholder,.field textarea::placeholder{ color:rgba(247,245,241,.28); }
.consent{ grid-column:1/-1; display:flex; gap:12px; align-items:flex-start; font-size:.81rem; color:var(--muted-d); }
.consent input{ margin-top:4px; accent-color:var(--brass); width:17px; height:17px; flex:none; }
.consent a{ text-decoration:underline; }
.form .btn{ grid-column:1/-1; justify-self:start; }
.form-note{ grid-column:1/-1; font-size:.77rem; color:rgba(247,245,241,.42); }

/* ---------- 19. Lábléc ---------- */
.ftr{ background:var(--ink); color:var(--paper); padding-block:clamp(52px,6.5vw,80px) 32px; }
.ftr__top{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:clamp(28px,4vw,60px);
  padding-bottom:46px; border-bottom:1px solid var(--line-d); }
.ftr h4{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; font-family:var(--f-b);
  font-weight:700; color:var(--brass-lt); margin-bottom:18px; }
.ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ftr a{ color:rgba(247,245,241,.7); font-size:.93rem; transition:color .3s; }
.ftr a:hover{ color:var(--paper); }
.ftr__bot{ padding-top:24px; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  font-size:.77rem; color:rgba(247,245,241,.42); }
.ftr__bot a{ font-size:.77rem; }

/* ---------- 20. Lightbox ---------- */
.lb{ position:fixed; inset:0; z-index:2000; background:rgba(8,10,12,.96); display:none; place-items:center; padding:6vh 5vw; }
.lb.is-on{ display:grid; }
.lb img{ max-width:min(1200px,100%); max-height:80vh; object-fit:contain; margin-inline:auto; border-radius:4px; }
.lb__cap{ text-align:center; color:var(--paper); margin-top:18px; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; }
.lb__x{ position:absolute; top:3vh; right:5vw; background:none; border:0; color:var(--paper); font-size:2rem; line-height:1; }

/* ---------- 21. Ragadós mobil CTA ---------- */
.mcta{ position:fixed; left:12px; right:12px; bottom:12px; z-index:1200; display:none; gap:9px;
  transform:translateY(140%); transition:transform .6s var(--ease); }
.mcta.is-on{ transform:none; }
.mcta .btn{ flex:1; justify-content:center; padding:16px 18px; font-size:.72rem; }

/* ---------- 22. Cookie ---------- */
.cookie{ position:fixed; left:var(--gut); bottom:20px; z-index:1500; max-width:355px; border-radius:6px;
  background:var(--paper); color:var(--ink); padding:19px 21px; box-shadow:0 20px 60px rgba(8,10,12,.3);
  border:1px solid var(--line-l); font-size:.84rem; transform:translateY(160%); transition:transform .7s var(--ease); }
.cookie.is-on{ transform:none; }
.cookie__btns{ display:flex; gap:8px; margin-top:13px; }
.cookie__btns .btn{ white-space:nowrap; }
.cookie p{ font-size:.8rem; line-height:1.5; }

/* ---------- 23. Reveal ---------- */
.rv{ opacity:0; transform:translateY(30px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.rv.is-in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.1s; } .rv-d2{ transition-delay:.2s; } .rv-d3{ transition-delay:.3s; }

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

/* ---------- 24. Reszponzív ---------- */
@media (max-width:1100px){
  .surfaces{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .why{ grid-template-columns:repeat(2,1fr); }
  .revs{ grid-template-columns:1fr; }
  .contact{ grid-template-columns:1fr; }
  .ftr__top{ grid-template-columns:1fr 1fr; }
  .craft__a{ grid-column:1/8; } .craft__b{ grid-column:8/13; }
  .craft__c{ grid-column:1/7; } .craft__t{ grid-column:7/13; }
}
@media (max-width:880px){
  .hdr{ inset:10px 0 auto; }
  .nav{ position:fixed; inset:0; z-index:999; background:var(--ink); color:var(--paper);
    flex-direction:column; justify-content:center; gap:24px;
    clip-path:circle(0% at calc(100% - 42px) 42px); transition:clip-path .75s var(--ease); }
  body.nav-open .nav{ clip-path:circle(150% at calc(100% - 42px) 42px); }
  body.nav-open{ overflow:hidden; }
  .nav a{ font-size:1.35rem; font-family:var(--f-d); text-transform:none; letter-spacing:0; }
  .nav .btn{ display:inline-flex; margin-top:12px; font-family:var(--f-b); }
  .burger{ display:block; position:relative; z-index:1001; }
  .hdr__in>.btn{ display:none; }
  body.nav-open .hdr__in{ background:transparent; border-color:transparent; box-shadow:none; color:var(--paper); }
  .intro,.about,.contact{ grid-template-columns:1fr; }
  .about__img{ max-width:400px; }
  .form{ grid-template-columns:1fr; }
  .scrollcue{ display:none; }
  .mcta{ display:flex; }
  .cookie{ bottom:86px; }
  .craft{ grid-template-columns:1fr; }
  .craft__a,.craft__b,.craft__c,.craft__t{ grid-column:1/-1; }
  .craft__b{ aspect-ratio:16/11; }
  .grid-g{ grid-template-columns:repeat(6,1fr); }
  .gitem,.gitem--sm{ grid-column:span 6; aspect-ratio:6/4; }
}
@media (max-width:560px){
  .surfaces,.steps,.why,.ftr__top{ grid-template-columns:1fr; }
  .cookie{ left:12px; right:12px; max-width:none; }
  .hero__meta{ gap:22px 32px; }
  .hero__cta .btn{ width:100%; justify-content:center; }
}

/* =========================================================
   25. WordPress-specifikus kiegészítések
   ========================================================= */

/* Akadálymentes ugrólink */
.screen-reader-text{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link:focus{
  position:fixed!important; top:12px; left:12px; z-index:3000; width:auto; height:auto;
  clip:auto; margin:0; padding:14px 22px; background:var(--ink); color:var(--paper);
  border-radius:999px; font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}

/* Egyedi logó a fejlécben és a láblécben */
.custom-logo-link{ display:block; flex:none; line-height:0; }
.custom-logo{ max-height:46px; width:auto; }
.ftr .custom-logo{ max-height:40px; }

/* Lábléc bevezető */
.ftr__lead{ color:rgba(247,245,241,.6); max-width:34ch; font-size:.93rem; }

/* Rólam törzsszöveg */
.about__body{ margin-top:18px; color:var(--muted); }

/* CTA sáv középre zárt szövegei */
.cta-band__cim{ max-width:20ch; margin-inline:auto; }
.cta-band__lead{ margin:24px auto 36px; color:rgba(247,245,241,.8); }

/* Mézesbödön – valódi látogatónak láthatatlan, képernyőolvasónak rejtett */
.fa-mez{ position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Űrlap visszajelzés */
.form-uzenet{
  grid-column:1/-1; padding:16px 20px; border-radius:4px; font-size:.92rem;
  border:1px solid var(--line-d); margin-bottom:22px;
}
.form-uzenet--ok{ border-color:rgba(194,149,83,.5); background:rgba(194,149,83,.12); color:var(--brass-lt); }
.form-uzenet--hiba{ border-color:rgba(200,90,70,.5); background:rgba(200,90,70,.12); color:#E8A697; }

/* Egyszerű aloldalak (impresszum, adatkezelés, süti) */
.fa-oldal{ max-width:800px; margin-inline:auto; padding-top:clamp(40px,7vw,90px); }
.fa-oldal h1{ margin-bottom:34px; }
.fa-oldal__tartalom h2{ font-size:clamp(1.5rem,2.4vw,2rem); margin:44px 0 16px; }
.fa-oldal__tartalom h3{ font-size:1.25rem; margin:32px 0 12px; }
.fa-oldal__tartalom ul,.fa-oldal__tartalom ol{ padding-left:22px; margin:0 0 1.1em; }
.fa-oldal__tartalom li{ margin-bottom:8px; }
.fa-oldal__tartalom a{ text-decoration:underline; }
.fa-oldal__tartalom table{ width:100%; border-collapse:collapse; margin:0 0 1.4em; }
.fa-oldal__tartalom th,.fa-oldal__tartalom td{
  text-align:left; padding:12px 14px; border-bottom:1px solid var(--line-l); font-size:.94rem;
}

/* Ha nincs telefonszám megadva, a mobil CTA egyetlen gombja teljes szélességű */
.mcta__hivas{ background:rgba(14,14,15,.9); color:var(--paper); border-color:rgba(247,245,241,.2); }

/* Elementor űrlap beillesztésekor a téma mezőstílusai ne ütközzenek */
.contact .elementor-widget-form .elementor-field-group{ margin-bottom:6px; }