@font-face{font-family:Lora;font-weight:600;font-display:swap;src:url(fonts/lora-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Lora;font-weight:600;font-display:swap;src:url(fonts/lora-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(fonts/poppins-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(fonts/poppins-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(fonts/poppins-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(fonts/poppins-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(fonts/poppins-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(fonts/poppins-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --papier:#f5eee6;--karta:#f3ebe3;--jasny:#fffaf3;
  --braz:#33241a;--braz2:#55422f;--zloto-t:#85501c;--zloto:#b1832f;--zloto-j:#e5c678;
}
*{box-sizing:border-box;margin:0}
html{background:var(--papier);-webkit-text-size-adjust:100%}
body{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--papier);color:var(--braz);font:400 16px/1.5 Poppins,Arial,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,.przod-marka,.tyl-imie,.logo{font-family:Lora,Georgia,serif;font-weight:600;line-height:1.2}
b{font-weight:600}
:focus-visible{outline:3px solid var(--zloto-t);outline-offset:3px}

#tlo{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#lapa{position:fixed;left:0;top:0;z-index:50;height:auto;pointer-events:none;will-change:transform;visibility:hidden;filter:drop-shadow(0 18px 18px rgba(51,36,26,.35))}

.pasek{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;min-height:64px;padding:8px max(16px,3vw);background:rgba(245,238,230,.92);border-bottom:1px solid rgba(177,131,47,.35)}
.logo{font-size:24px}
.pauza{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border:1px solid var(--zloto);border-radius:999px;background:var(--jasny);font-size:15px;font-weight:500}
.pauza svg{width:20px;height:20px;fill:var(--zloto-t)}

.uklad{position:relative;z-index:10;flex:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:center;width:100%;max-width:1240px;margin:0 auto;padding:32px max(16px,3vw)}
.lewa{display:flex;flex-direction:column;align-items:center;gap:20px}
.scena{width:100%;max-width:620px;perspective:1300px}
.karta{position:relative;width:100%;aspect-ratio:1063/590;container-type:inline-size;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));cursor:pointer;border-radius:16px}
.karta::before{content:"";position:absolute;inset:6% 4% -5%;background:rgba(51,36,26,.32);filter:blur(26px);transform:translateZ(-30px);border-radius:24px}
.strona{position:absolute;inset:0;border-radius:16px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--karta);border:1px solid rgba(177,131,47,.6);transition:transform .75s cubic-bezier(.3,.9,.3,1)}
.tyl{transform:rotateY(180deg)}
.karta.odwrocona .przod{transform:rotateY(-180deg)}
.karta.odwrocona .tyl{transform:rotateY(0)}
.przod-lapa{position:absolute;right:-1%;bottom:3%;height:84%;width:auto}
.przod-tekst{position:absolute;left:6%;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;max-width:56%}
.przod-marka{font-size:max(26px,7.6cqw)}
.przod-pseudonim{font:600 max(17px,3.6cqw)/1.25 Lora,Georgia,serif;color:var(--braz)}
.przod-tel{margin-top:2.6cqw;font-size:max(15px,3cqw);font-weight:500;color:var(--braz)}
.kreska{width:30%;height:3px;margin:2.4cqw 0 2cqw;min-width:64px;background:linear-gradient(90deg,var(--zloto),var(--zloto-j))}
.przod-haslo{font-size:max(13px,2.5cqw);font-weight:500;letter-spacing:.16em;color:var(--zloto-t);text-transform:uppercase;white-space:nowrap}
.blask{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--bx,30%) var(--by,20%),rgba(255,246,214,.5),transparent 42%)}
.tyl{display:flex;align-items:center;gap:6cqw;padding:6cqw}
.qr{flex:none;width:38cqw;height:38cqw;max-height:100%;padding:1.5cqw;background:var(--jasny);border-radius:10px}
.qr svg{display:block;width:100%;height:100%}
.tyl-tekst{min-width:0}
.tyl-imie{font-size:max(20px,4.2cqw);margin-bottom:2cqw}
.tyl-opis{font-size:max(14px,2.8cqw);line-height:1.4;color:var(--braz2)}
.odwroc{min-height:48px;padding:0 20px;font-weight:500;font-size:15px;color:var(--zloto-t);text-decoration:underline;text-underline-offset:4px;background:rgba(245,238,230,.82);border-radius:999px}

.tafla{padding:28px;background:rgba(255,250,243,.88);border:1px solid rgba(177,131,47,.45);border-radius:20px;box-shadow:0 18px 44px rgba(51,36,26,.14)}
h1{font-size:clamp(32px,3.4vw,44px)}
.rola{margin:4px 0 20px;font-size:17px;color:var(--zloto-t);font-weight:500}
.przycisk{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;padding:6px 12px;border:1px solid var(--zloto);border-radius:12px;background:var(--jasny);font-size:16px;font-weight:500;line-height:1.2;transition:transform .18s,box-shadow .18s,background .18s;overflow:hidden}
.przycisk svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--zloto-t);stroke-width:1.700;stroke-linecap:round;stroke-linejoin:round}
.przycisk:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(51,36,26,.18);background:#fff}
.glowny{min-height:60px;margin-bottom:12px;border:0;font-weight:600;font-size:17px;color:#26190f;background:linear-gradient(105deg,#c79a45,#ecd08a 45%,#c79a45 70%,#dcb868);background-size:220% 100%;animation:folia 7s linear infinite}
.glowny:hover{background:linear-gradient(105deg,#c79a45,#ecd08a 45%,#c79a45 70%,#dcb868);background-size:220% 100%}
.glowny svg{stroke:#26190f}
@keyframes folia{to{background-position:-220% 0}}
.siatka{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.szeroki{grid-column:1/-1}
.dana{white-space:nowrap}
.panel{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(177,131,47,.4)}
.panel[hidden]{display:none}
.maly{min-height:48px;font-size:15px}
.tylko-telefon{display:none}
.telefon .tylko-telefon{display:flex}
.drap{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;pointer-events:none;stroke:var(--zloto-t);stroke-width:2.500;fill:none;stroke-linecap:round;stroke-dasharray:40;animation:drap .55s ease-out forwards}
@keyframes drap{0%{stroke-dashoffset:40;opacity:1}55%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}

.stopka{position:relative;z-index:10;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;padding:16px max(16px,3vw);background:var(--papier);border-top:1px solid rgba(177,131,47,.35)}
.podpis{display:inline-flex;align-items:center;gap:12px;min-height:48px}
.podpis img{height:40px;width:auto}
.podpis small{display:block;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--zloto-t);font-weight:500}
.podpis b{font:600 17px/1.3 Lora,Georgia,serif}
.zaproszenie{min-height:48px;display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:15px;color:var(--braz2)}
.zaproszenie b{color:var(--zloto-t);text-decoration:underline;text-underline-offset:3px}

.dymek{position:fixed;left:50%;bottom:24px;z-index:60;padding:12px 20px;background:var(--braz);color:#fff;border-radius:999px;font-size:15px;transform:translate(-50%,20px);opacity:0;transition:.25s;pointer-events:none}
.dymek.widac{opacity:1;transform:translate(-50%,0)}

.js.intro .wejscie,.js.intro .tafla,.js.intro .stopka,.js.intro .pasek{opacity:0}
.wejscie{transition:opacity .6s,transform .75s cubic-bezier(.2,.9,.25,1.1);transition-delay:calc(var(--d,0)*70ms)}
.tafla,.stopka,.pasek{transition:opacity .6s .15s}
.js.intro .wejscie{transform:translateY(26px)}
.js.intro .lewa{transform:translateY(70px) scale(.9) rotate(-3deg)}
.lewa.wejscie{transition-duration:.8s,1s}

@media (max-width:900px){
  .uklad{grid-template-columns:minmax(0,1fr);gap:16px;padding-top:20px;padding-bottom:24px;align-items:start}
  .tafla{padding:20px 16px}
  .lewa{gap:8px}
}
@media (max-width:480px){
  .przod-tekst{max-width:60%}
  .przod-lapa{right:-3%;height:62%}
  .stopka{flex-direction:column;align-items:flex-start}
}
@media (max-width:360px){
  .szeroki svg{display:none}
  .szeroki{font-size:14px;padding:6px}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01s!important;animation:none!important}}
.pauzowane .glowny{animation-play-state:paused}