/*
  Giftiary – bemutatkozó oldal stílusai
  scroll-margin-top értékek: a fejléc magassága a szegéllyel (desktop 73 px, mobil 65 px) + 20 px térköz – a böngésző saját #hash-görgetése is ehhez igazodik.
  Színek: hangsúly #D6455D (gombokon a kontraszt miatt #C23A52), háttér #F7F2E8, szöveg #122F2A.
  Töréspontok: 960 px (egy oszlop), 760 px (mobil fejléc és térközök), 400 px (keskeny telefon).
*/
[hidden]{display:none !important}
.js [data-view]:not(.is-active){display:none}
body{background:#F7F2E8}
body{margin:0}
html{scroll-behavior:smooth}
a{color:#122F2A}a:hover{color:#B0344B}
.g-root{width:100%;background:#F7F2E8;color:#122F2A;font-family:"Figtree","Segoe UI",system-ui,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
.g-root *{box-sizing:border-box}
.g-root img{max-width:100%}
.g-root :focus-visible{outline:3px solid #122F2A;outline-offset:3px;border-radius:10px}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.disp{font-family:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;letter-spacing:-0.02em}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* header */
.hdr{position:sticky;top:0;z-index:20;background:rgba(247,242,232,0.95);border-bottom:1px solid #E6DDCB}
.hdr-in{display:flex;align-items:center;gap:20px;min-height:72px}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:#122F2A;font-weight:700;font-size:20px;flex:none}
.brand img{width:38px;height:38px;border-radius:10px;display:block}
.nav{display:flex;gap:4px;margin:0 0 0 12px;padding:0;list-style:none}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;text-decoration:none;color:#122F2A;font-weight:500;font-size:16px}
.nav a:hover{background:#EFE7D7;color:#122F2A}
.spacer{flex:1 1 0;min-width:0}
.lang{display:flex;flex:none;gap:2px;padding:2px;border:1px solid #DCD2BE;border-radius:12px;background:#fff}
.lang button{min-width:44px;min-height:44px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:#122F2A;font:600 14px/1 "Figtree",system-ui,sans-serif;cursor:pointer;letter-spacing:0.04em}
.lang button:hover{background:#F3EEE3}
.lang button[aria-pressed="true"]{background:#122F2A;color:#fff}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:10px 22px;border-radius:14px;font-weight:600;font-size:16px;line-height:1.25;text-align:center;text-decoration:none;transition:transform .15s ease,background-color .15s ease;border:1.5px solid transparent;max-width:100%}
.btn svg{flex:none}
.btn-p{background:#C23A52;color:#fff}
.btn-p:hover{background:#A8304A;color:#fff;transform:translateY(-1px)}
.btn-s{background:transparent;color:#122F2A;border-color:#122F2A}
.btn-s:hover{background:#122F2A;color:#fff}
.btn-sm{min-height:44px;padding:0 16px;font-size:15px;border-radius:12px;flex:none;white-space:nowrap}
.short{display:none}

/* hero */
.hero{padding:clamp(40px,7vw,96px) 0 clamp(48px,7vw,104px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:center}
.status{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:500;color:#3D5650;margin-bottom:24px}
.status i{width:8px;height:8px;border-radius:50%;background:#D6455D;display:block;flex:none}
.h1{font-size:clamp(40px,6.2vw,80px);line-height:1.04;font-weight:700;margin:0 0 24px;text-wrap:balance;overflow-wrap:break-word}
.h1 em{font-style:italic;color:#C23A52;font-family:"Instrument Serif",Georgia,serif;font-weight:400;letter-spacing:0;font-size:1.12em}
.lead{font-size:clamp(17px,1.6vw,21px);line-height:1.55;color:#2C4842;max-width:34em;margin:0 0 32px;text-wrap:pretty}
.ctas{display:flex;flex-wrap:wrap;gap:12px}

.hv{position:relative;padding:28px 8px 28px 28px;min-width:0}
.paper{position:absolute;inset:0 30px 6px 0;border-radius:22px;background-color:#FFFDF8;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 31px,#ECE3D2 31px,#ECE3D2 32px);border:1px solid #E6DDCB;transform:rotate(-3deg)}
.card{position:relative;background:#fff;border:1px solid #E3D9C6;border-radius:22px;box-shadow:0 1px 0 #E3D9C6,0 18px 40px -24px rgba(18,47,42,0.35);padding:22px}
.shot{position:relative;display:block;width:100%;height:auto;border-radius:22px;border:1px solid #E3D9C6;box-shadow:0 18px 40px -24px rgba(18,47,42,0.35)}
.prev{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:#4F605B;background:#F3EEE3;border:1px dashed #B9AD95;border-radius:999px;padding:4px 10px}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;margin-bottom:16px;flex-wrap:wrap}
.card-title{font-size:22px;font-weight:700;margin:0}
.seg{display:grid;grid-template-columns:1fr 1fr;padding:4px;background:#F3EEE3;border-radius:14px;margin-bottom:12px}
.seg button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:0;border-radius:11px;background:transparent;font:600 16px/1 "Figtree",system-ui,sans-serif;color:#3D5650;cursor:pointer;transition:background-color .15s ease}
.seg button:hover{background:rgba(255,255,255,0.6)}
.seg button[aria-pressed="true"]{background:#fff;color:#122F2A;box-shadow:0 1px 3px rgba(18,47,42,0.22),inset 0 -3px 0 #C23A52}
.seg button.recv[aria-pressed="true"]{box-shadow:0 1px 3px rgba(18,47,42,0.22),inset 0 -3px 0 #1F6B58}
.seg button.give[aria-pressed="true"] svg{color:#C23A52}
.seg button.recv[aria-pressed="true"] svg{color:#1F6B58}
.entries{display:flex;flex-direction:column}
.entry{display:grid;grid-template-columns:76px minmax(0,1fr);gap:16px;padding:14px 4px;border-top:1px dashed #E3D9C6;animation:fadein .25s ease both}
.entry:first-child{border-top:0}
.date{font-family:"Instrument Serif",Georgia,serif;font-size:22px;line-height:1.05;color:#122F2A}
.date small{display:block;font-family:"Figtree",system-ui,sans-serif;font-size:13px;color:#4F605B;margin-top:4px}
.gift{font-weight:600;font-size:17px;line-height:1.3;margin:0 0 4px}
.meta{font-size:14px;color:#4A5E59;display:flex;flex-wrap:wrap;gap:2px 6px;align-items:center}
.who{font-weight:600;color:#122F2A}
.note{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:17px;color:#3D5650;margin-top:4px}

.tag{position:absolute;right:-6px;top:-18px;transform:rotate(6deg);z-index:2;filter:drop-shadow(0 6px 10px rgba(18,47,42,0.18))}
.tag-body{background:#D6455D;color:#fff;padding:12px 18px 12px 34px;clip-path:polygon(18px 0,100% 0,100% 100%,18px 100%,0 50%);font-size:14px;line-height:1.3;max-width:220px;position:relative}
.tag-body::before{content:"";position:absolute;left:14px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#F7F2E8}
.tag-body b{display:block;font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;font-size:19px}

/* sections */
.sec{padding:clamp(56px,8vw,112px) 0;scroll-margin-top:77px}
.kick{display:flex;align-items:center;gap:10px;font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:22px;color:#B0344B;margin-bottom:12px}
.h2{font-size:clamp(30px,4vw,52px);line-height:1.08;font-weight:700;margin:0 0 16px;text-wrap:balance;max-width:22ch;overflow-wrap:break-word}
.sub{font-size:18px;color:#2C4842;max-width:36em;margin:0;text-wrap:pretty}

.ex{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:24px;margin-top:40px}
.ex-card{position:relative;background:#fff;border:1px solid #E3D9C6;border-radius:20px;padding:36px 24px 24px;display:flex;flex-direction:column;gap:12px;min-width:0}
.ex-card::before{content:"";position:absolute;top:14px;left:24px;width:10px;height:10px;border-radius:50%;border:2px solid #D8CDB8;background:#F7F2E8}
.ex-q{font-size:24px;line-height:1.2;font-weight:700;margin:0}
.ex-d{margin:0;color:#3D5650;font-size:16px;text-wrap:pretty}
.mini{margin-top:auto;background:#FBF8F1;border:1px solid #ECE3D2;border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px;font-size:15px;min-width:0}
.mini-h{display:flex;align-items:center;gap:10px;font-weight:600}
.av{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:none}
.av-a{background:#F9DCE1;color:#8E2238}
.av-b{background:#D9ECE5;color:#174E41}
.av-c{background:#EFE3C8;color:#5E4512}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:10px;background:#fff;border:1px solid #EFE7D7}
.row.hl{border-color:#D6455D;box-shadow:inset 3px 0 0 #D6455D}
.row span:first-child{min-width:0}
.yr{font-family:"Instrument Serif",Georgia,serif;font-size:18px;color:#4F605B;flex:none}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:0.03em;padding:3px 9px;border-radius:999px;flex:none;white-space:nowrap}
.c-give{background:#FBE1E6;color:#9A2A41}
.c-recv{background:#DCEDE6;color:#174E41}
.c-last{background:#122F2A;color:#fff}
.chk{width:18px;height:18px;border-radius:6px;border:2px solid #B9AD95;flex:none;margin-top:2px}
.idea{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;background:#fff;border:1px solid #EFE7D7;border-radius:10px}
.idea p{margin:0;line-height:1.35;min-width:0}
.idea small{display:block;color:#4A5E59;font-size:13px;margin-top:2px}

/* features */
.feat{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;margin-top:40px}
.f{background:#fff;border:1px solid #E3D9C6;border-radius:24px;padding:26px;display:flex;flex-direction:column;gap:12px;min-width:0}
.f-main{grid-row:span 2;background:#122F2A;color:#F7F2E8;border-color:#122F2A;padding:30px}
.f-main .f-d{color:#D5E2DD}
.f-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.f-num{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:20px;color:#B0344B}
.f-main .f-num{color:#F4A6B4}
.f-t{font-size:26px;font-weight:700;margin:0;line-height:1.15}
.f-main .f-t{font-size:clamp(28px,3vw,38px)}
.f-d{margin:0;color:#3D5650;font-size:17px;text-wrap:pretty}
.f-ui{margin-top:8px;background:#fff;color:#122F2A;border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.f-ui-top{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters button{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid #CFC3AB;background:#fff;color:#122F2A;font:600 14px/1 "Figtree",system-ui,sans-serif;cursor:pointer}
.filters button:hover{background:#F3EEE3}
.filters button[aria-pressed="true"]{background:#122F2A;border-color:#122F2A;color:#fff}
.tl{display:flex;flex-direction:column;position:relative;padding-left:22px}
.tl::before{content:"";position:absolute;left:6px;top:10px;bottom:10px;width:2px;background:#ECE3D2}
.tl-i{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:10px 0;border-top:1px dashed #ECE3D2;animation:fadein .25s ease both}
.tl-i:first-child{border-top:0}
.tl-i::before{content:"";position:absolute;left:-21px;top:16px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #D6455D}
.tl-i.recv::before{border-color:#1F6B58}
.tl-g{font-weight:600}
.tl-i .chip{align-self:start}
.tl-m{grid-column:1/-1;font-size:14px;color:#4A5E59}
.plan{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.plan-r{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:10px 12px;border:1px solid #EFE7D7;border-radius:12px;background:#FBF8F1}
.plan-r p{margin:0;line-height:1.35;font-weight:600}
.plan-r small{display:block;font-weight:400;color:#4A5E59;font-size:14px;margin-top:2px}
.f .prev,.mini .prev,.plan .prev{align-self:flex-start}

/* testing */
.test{position:relative;background:#fff;border:1px solid #E3D9C6;border-radius:28px;padding:clamp(28px,6vw,72px);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px;align-items:center}
.test-bow{justify-self:center;width:min(260px,70%)}
.test-act{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.test-note{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:16px;color:#2C4842;max-width:32em}
.test-note svg{flex:none;margin-top:3px;color:#B0344B}

/* footer */
.ftr{border-top:1px solid #E3D9C6;padding:44px 0 36px;margin-top:clamp(56px,8vw,96px)}
.ftr-grid{display:flex;flex-wrap:wrap;gap:28px 64px;justify-content:space-between}
.ftr h3{font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:#4A5E59;margin:0 0 8px;font-weight:700}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.ftr li a{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;min-height:44px;text-decoration:none;font-weight:500}
.ftr li a:hover{text-decoration:underline}
.soon{font-size:12px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;padding:2px 8px;border-radius:999px;border:1px dashed #9D8F74;color:#5E4F33;background:#F7F2E8}
.copy{margin-top:32px;font-size:14px;color:#4A5E59}

/* legal view */
.legal{padding:clamp(40px,6vw,72px) 0 clamp(40px,6vw,80px);scroll-margin-top:72px}
.legal-in{max-width:860px}
.back{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px 0 8px;margin-left:-8px;border-radius:10px;text-decoration:none;font-weight:600}
.back:hover{background:#EFE7D7;color:#122F2A}
.soon-lg{display:inline-flex;font-size:12px;padding:4px 10px}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0}
.toc a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid #D8CDB8;border-radius:999px;background:#fff;text-decoration:none;font-weight:600;font-size:15px}
.blk{background:#fff;border:1px solid #E3D9C6;border-radius:22px;padding:clamp(22px,4vw,40px);margin-top:24px;scroll-margin-top:93px}
.blk-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;justify-content:space-between}
.ph{margin-top:20px;border:2px dashed #D3C7AF;border-radius:16px;padding:22px;background:#FBF8F1;display:flex;flex-direction:column;gap:10px}
.ph p{margin:0;color:#3D5650}
.bar{height:12px;border-radius:6px;background:#ECE3D2}

@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rise{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.rise2{animation:rise .5s .1s cubic-bezier(.2,.7,.2,1) both}

@media (max-width:960px){
.hero-grid,.test{grid-template-columns:minmax(0,1fr)}
.feat{grid-template-columns:minmax(0,1fr)}
.f-main{grid-row:auto}
.hv{max-width:560px}
.test-bow{display:none}
}
@media (max-width:760px){
.blk{scroll-margin-top:85px}
.nav{display:none}
.long{display:none}
.short{display:inline}
.hdr-in{gap:10px;min-height:64px}
.hv{padding:24px 6px 12px 6px}
.paper{inset:2px 10px 0 2px;transform:rotate(-1.5deg)}
.tag{right:4px;top:-16px;transform:rotate(3deg)}
.tag-body{max-width:190px;font-size:13px;padding:10px 14px 10px 30px}
.tag-body b{font-size:17px}
.card{padding:18px 16px}
.entry{grid-template-columns:58px minmax(0,1fr);gap:12px;padding:12px 2px}
.date{font-size:19px}
.ctas .btn{flex:1 1 100%}
.ex{gap:16px;margin-top:28px}
.ex-card{padding:32px 20px 20px}
.f,.f-main{padding:22px 18px}
.f-ui{padding:14px}
.feat{gap:16px;margin-top:28px}
.test-act .btn{width:100%}
.sec{scroll-margin-top:69px}
}
@media (max-width:400px){
.brand span{display:none}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.g-root *,.g-root *::before,.g-root *::after{animation:none !important;transition:none !important}
}