
:root{
  --bg1:#0c0b0a; --bg2:#14100c; --panel:#16110b; --ink:#f3ede1; --mut:#9a9082;
  --gold:#d9b26a; --brass:#c69a5a; --cream:#f3ede1; --line:rgba(217,178,106,.20);
  --line2:rgba(217,178,106,.34);
  --fd:'Cormorant Garamond',Georgia,serif; --fu:'Inter',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg1);color:var(--ink);font-family:var(--fu);font-weight:300;line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:#20150a}
.wrap{max-width:1300px;margin:0 auto;padding:0 clamp(20px,4vw,52px)}
img{max-width:100%;display:block}

/* zrnitost / vinětace přes celý web */
body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* teplá světelná ambiance */
.amb{position:fixed;inset:-14%;z-index:0;pointer-events:none;filter:blur(90px);opacity:.30}
.amb i{position:absolute;border-radius:50%;mix-blend-mode:screen;animation:drift 56s ease-in-out infinite alternate}
.amb i:nth-child(1){width:52vw;height:52vw;left:-8vw;top:-14vw;background:radial-gradient(circle,rgba(217,178,106,.30),transparent 62%)}
.amb i:nth-child(2){width:46vw;height:46vw;right:-12vw;top:36vh;background:radial-gradient(circle,rgba(180,122,60,.22),transparent 62%);animation-delay:-18s}
.amb i:nth-child(3){width:40vw;height:40vw;left:40vw;bottom:-16vw;background:radial-gradient(circle,rgba(120,92,52,.16),transparent 62%);animation-delay:-30s}
@keyframes drift{to{transform:translate(3vw,2.5vh) scale(1.14)}}
.vig{position:fixed;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 320px 80px rgba(0,0,0,.6)}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:100;transition:.45s}
header.sc{background:rgba(12,11,10,.74);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
html.folia-modal-open header{opacity:0;pointer-events:none;transition:opacity .3s}
nav{display:flex;align-items:center;justify-content:space-between;height:84px}
.brand{display:flex;align-items:baseline;gap:.5rem;font-family:var(--fd);font-weight:500;font-size:1.55rem;letter-spacing:.02em}
.brand .mk{color:var(--gold);font-size:.66em;transform:translateY(-.14em)}
.brand small{font-family:var(--fu);font-size:.42em;font-weight:400;letter-spacing:.42em;text-transform:uppercase;color:var(--mut);margin-left:.25rem}
.nav-links{display:flex;gap:clamp(20px,2.4vw,38px);font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--mut)}
.nav-links a{transition:.3s}.nav-links a:hover{color:var(--gold)}
.navcta{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;padding:12px 24px;border:1px solid var(--line2);border-radius:100px;color:var(--ink);transition:.3s}
.navcta:hover{background:linear-gradient(180deg,var(--gold),var(--brass));color:#20150a;border-color:var(--gold)}
@media(max-width:900px){.nav-links{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:140px clamp(20px,4vw,52px) 90px}
.hero .in{max-width:1300px;margin:0 auto;width:100%}
.hero .eb{font-size:.64rem;letter-spacing:.46em;text-transform:uppercase;color:var(--gold);margin-bottom:1.6rem;display:block;opacity:0;animation:fade 1.1s .2s forwards}
.hero h1{font-family:var(--fd);font-weight:300;line-height:1.0;letter-spacing:.004em;font-size:clamp(2.9rem,8.4vw,7.2rem)}
.hero h1 .l{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.13em}
.hero h1 .l>span{display:block;transform:translateY(112%);animation:rise 1.3s cubic-bezier(.16,1,.3,1) forwards}
.hero h1 .l:nth-child(2)>span{animation-delay:.14s}
.hero h1 em{font-style:italic;color:var(--gold);font-weight:400}
.hero .sub{margin-top:2.4rem;max-width:52ch;color:var(--mut);font-size:clamp(1rem,1.3vw,1.18rem);line-height:1.7;opacity:0;animation:fade 1.2s .7s forwards}
.hero .cta{display:flex;gap:14px;margin-top:2.6rem;flex-wrap:wrap;opacity:0;animation:fade 1.1s .9s forwards}
.hero .rule{display:flex;gap:2.4rem;margin-top:3.4rem;flex-wrap:wrap;opacity:0;animation:fade 1.2s 1.05s forwards}
.hero .rule .ri{display:flex;flex-direction:column;gap:.3rem}
.hero .rule .ri b{font-family:var(--fd);font-weight:500;font-size:2rem;color:var(--gold);line-height:1}
.hero .rule .ri span{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mut)}
@keyframes rise{to{transform:translateY(0)}}@keyframes fade{to{opacity:1}}

.btn{font-family:var(--fu);font-weight:500;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;padding:15px 30px;border-radius:100px;border:1px solid var(--line2);color:var(--ink);transition:.3s;cursor:pointer;display:inline-flex;align-items:center;gap:.6rem}
.btn.g{background:linear-gradient(180deg,var(--gold),var(--brass));color:#20150a;border-color:var(--gold);font-weight:700}
.btn.g:hover{box-shadow:0 14px 40px rgba(217,178,106,.32);transform:translateY(-2px)}
.btn.o:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- sekce obecně ---------- */
section.blk{position:relative;z-index:3;padding:clamp(90px,12vh,150px) 0}
.eyebrow{font-size:.64rem;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);margin-bottom:1.4rem;display:flex;align-items:center;gap:.9rem}
.eyebrow::before{content:"";width:34px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.h2{font-family:var(--fd);font-weight:300;letter-spacing:.006em;line-height:1.04;font-size:clamp(2.1rem,5.2vw,4rem)}
.h2 em{font-style:italic;color:var(--gold);font-weight:400}
.lead{color:var(--mut);font-size:1.06rem;max-width:56ch;margin-top:1.4rem;font-weight:300}
.sep{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);position:relative;z-index:3}

/* reveal */
.rv{opacity:0;transform:translateY(34px);transition:1.1s cubic-bezier(.16,1,.3,1)}.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}

/* ---------- EXPLAINER (motion graphics) ---------- */
.expl{position:relative;z-index:3;padding:clamp(90px,12vh,150px) 0}
.expl-head{text-align:center;max-width:720px;margin:0 auto}
.expl-head .eyebrow{justify-content:center}.expl-head .eyebrow::before{display:none}
.stage{margin-top:clamp(48px,7vh,90px);position:relative}
.stage-svg{width:100%;height:auto;display:block;overflow:visible}
.stage-cap{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:36px}
@media(max-width:820px){.stage-cap{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.stage-cap{grid-template-columns:1fr}}
.cap{padding:20px 20px 22px;border:1px solid var(--line);border-radius:4px;background:linear-gradient(180deg,rgba(217,178,106,.045),transparent);position:relative;transition:.5s}
.cap.act{border-color:var(--line2);background:linear-gradient(180deg,rgba(217,178,106,.11),rgba(217,178,106,.01));box-shadow:0 20px 50px -30px rgba(217,178,106,.5)}
.cap .cn{font-family:var(--fd);font-style:italic;font-weight:500;font-size:1.5rem;color:var(--gold);line-height:1;opacity:.5;transition:.5s}
.cap.act .cn{opacity:1}
.cap h4{font-family:var(--fd);font-weight:500;font-size:1.28rem;margin:.5rem 0 .35rem;letter-spacing:.01em}
.cap p{color:var(--mut);font-size:.85rem;line-height:1.55;font-weight:300}
.cap .bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(217,178,106,.14);overflow:hidden;border-radius:2px}
.cap .bar i{position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,var(--brass),var(--gold))}

/* ---------- galerie (pin-scroll) ---------- */
.gal{position:relative;z-index:3;padding:clamp(70px,9vh,120px) 0 0}
.galhead{text-align:center;max-width:760px;margin:0 auto}
.galhead .eyebrow{justify-content:center}.galhead .eyebrow::before{display:none}
.galnote{color:var(--mut);font-size:.86rem;margin-top:1.2rem;letter-spacing:.02em}
.prolet-scroll{position:relative;margin-top:clamp(30px,5vh,60px)}
.prolet-sticky{position:sticky;top:0;height:100vh;will-change:transform;width:100%;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg1)}
#proletFrame{width:100%;height:100%;border:0;display:block}

/* ---------- partneři ---------- */
.logos{position:relative;z-index:3;padding:clamp(70px,9vh,110px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.logostrip{display:flex;flex-wrap:wrap;gap:16px;margin-top:2.2rem}
.lgo{display:flex;flex-direction:column;justify-content:center;gap:.25rem;padding:20px 30px;border:1px solid var(--line);border-radius:3px;filter:grayscale(1);opacity:.6;transition:.4s;background:rgba(217,178,106,.02)}
.lgo b{font-family:var(--fd);font-weight:600;font-size:1.4rem;letter-spacing:.01em;color:var(--ink)}
.lgo small{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.lgo:hover{filter:none;opacity:1;border-color:var(--line2);transform:translateY(-2px)}
a.lgo:hover{border-color:var(--gold)}
.lgo.add{justify-content:center;color:var(--mut);border-style:dashed;font-family:var(--fu);font-size:.9rem;letter-spacing:.04em;opacity:.8}
.lnote{color:var(--mut);font-size:.86rem;margin-top:1.8rem}
.lnote a{color:var(--gold);border-bottom:1px solid rgba(217,178,106,.4)}

/* ---------- substance / versus ---------- */
.proof{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,68px);align-items:center;margin-top:2.6rem}
@media(max-width:900px){.proof{grid-template-columns:1fr;gap:40px}}
.frame{border:1px solid var(--line2);border-radius:4px;overflow:hidden;background:var(--panel);box-shadow:0 50px 120px rgba(0,0,0,.6),0 0 90px rgba(217,178,106,.05);transform:perspective(1600px) rotateY(-7deg) rotateX(3deg);transition:.7s}
.frame:hover{transform:perspective(1600px) rotateY(-1deg)}
.frame .bar{display:flex;gap:6px;padding:12px 15px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#1b160f,#120f0a)}
.frame .bar i{width:9px;height:9px;border-radius:50%;background:#3a2e1c}
.plist{display:flex;flex-direction:column}
.prow{padding:22px 0;border-top:1px solid var(--line)}
.prow:first-child{border-top:0;padding-top:0}
.prow h4{font-family:var(--fd);font-weight:500;font-size:1.4rem;margin-bottom:.4rem;letter-spacing:.01em}
.prow p{color:var(--mut);font-size:.94rem;font-weight:300}
.versus{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:3rem}
@media(max-width:760px){.versus{grid-template-columns:1fr}}
.vcard{border:1px solid var(--line);border-radius:5px;padding:38px 34px;background:rgba(217,178,106,.015)}
.vcard.win{border-color:var(--line2);background:linear-gradient(180deg,rgba(217,178,106,.08),transparent)}
.vcard h3{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;margin-bottom:1.6rem;color:var(--mut)}.vcard.win h3{color:var(--gold)}
.vcard ul{list-style:none;display:flex;flex-direction:column;gap:1rem}
.vcard li{display:flex;gap:.8rem;font-size:1rem;color:var(--mut);font-weight:300}
.vcard.win li{color:var(--ink)}.vcard.win li b{color:var(--gold)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:3.4rem}
@media(max-width:640px){.stats{grid-template-columns:1fr}}
.stat{border-top:1px solid var(--line);padding-top:1.4rem}
.stat .n{font-family:var(--fd);font-weight:300;font-size:clamp(2.8rem,6vw,4.2rem);line-height:1;color:var(--gold)}
.stat .l{color:var(--mut);margin-top:.7rem;font-size:.92rem;font-weight:300}

/* ---------- moduly ---------- */
.mods{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:2.8rem}
.mod{display:flex;flex-direction:column;padding:26px;border:1px solid var(--line);border-radius:4px;background:rgba(217,178,106,.02);transition:.4s}
.mod:hover{border-color:var(--line2);transform:translateY(-4px);box-shadow:0 26px 60px -34px rgba(217,178,106,.5)}
.mod .ic{width:30px;height:30px;color:var(--gold);margin-bottom:16px;stroke-width:1.4}
.mod h4{font-family:var(--fd);font-weight:500;font-size:1.35rem;margin-bottom:.4rem;letter-spacing:.01em}
.mod p{color:var(--mut);font-size:.88rem;line-height:1.55;flex:1;font-weight:300}
.mod .mf{display:flex;align-items:center;justify-content:space-between;margin-top:1.4rem;gap:.6rem}
.mod .mp{font-family:var(--fd);font-weight:500;font-size:1.7rem;color:var(--ink)}
.mbuy{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;padding:10px 17px;border-radius:100px;border:1px solid var(--line2);color:var(--ink);transition:.3s;white-space:nowrap}
.mbuy:hover{background:linear-gradient(180deg,var(--gold),var(--brass));color:#20150a;border-color:var(--gold)}

/* ---------- kroky ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:3rem}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{padding:34px 30px;border:1px solid var(--line);border-radius:4px;background:rgba(217,178,106,.015);transition:.4s}
.step:hover{border-color:var(--line2)}
.step .num{font-family:var(--fd);font-style:italic;font-weight:500;font-size:2.6rem;color:var(--gold);line-height:1}
.step h4{font-family:var(--fd);font-weight:500;font-size:1.5rem;margin:1rem 0 .6rem;letter-spacing:.01em}
.step p{color:var(--mut);font-size:.92rem;line-height:1.6;font-weight:300}

/* ---------- ceník ---------- */
.price{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:3.2rem;align-items:stretch}
@media(max-width:960px){.price{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.price{grid-template-columns:1fr}}
.tier{position:relative;padding:38px 30px;border:1px solid var(--line);border-radius:6px;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(217,178,106,.03),rgba(217,178,106,.005));transition:.5s cubic-bezier(.16,1,.3,1)}
.tier:hover{border-color:var(--line2);transform:translateY(-6px);box-shadow:0 30px 70px rgba(0,0,0,.5)}
.tier.best{border-color:var(--gold);background:linear-gradient(180deg,rgba(217,178,106,.11),rgba(217,178,106,.01));box-shadow:0 30px 80px -30px rgba(217,178,106,.36)}
.tier .tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(180deg,var(--gold),var(--brass));color:#20150a;font-size:.56rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:6px 16px;border-radius:100px;box-shadow:0 6px 22px rgba(217,178,106,.4);white-space:nowrap}
.tier .tn{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:500}
.tier .amt{font-family:var(--fd);font-weight:300;font-size:3.1rem;line-height:1;margin:1rem 0 .1rem;letter-spacing:.005em}
.tier .amt small{font-size:1rem;color:var(--mut);font-family:var(--fu)}
.tier .once{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin-bottom:1.6rem}
.tfeat{list-style:none;display:grid;gap:.85rem;margin:0 0 1.9rem;flex:1;border-top:1px solid var(--line);padding-top:1.6rem}
.tfeat li{position:relative;padding-left:26px;color:var(--ink);font-size:.9rem;line-height:1.45;font-weight:300}
.tfeat li::before{content:"";position:absolute;left:0;top:1px;width:17px;height:17px;border-radius:50%;background-color:rgba(217,178,106,.16);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23d9b26a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}
.tier .btn{justify-content:center;width:100%}
.pnote{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 20px;text-align:center;color:var(--mut);font-size:.92rem;margin-top:2.6rem;padding-top:2.4rem;border-top:1px solid var(--line);font-weight:300}
.pnote .pn-t{max-width:48ch}
.pnote b{color:var(--ink);font-weight:400}
.pnote a{color:var(--gold);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;padding:11px 19px;border:1px solid var(--line2);border-radius:100px;transition:.3s;white-space:nowrap}
.pnote a:hover{background:linear-gradient(180deg,var(--gold),var(--brass));color:#20150a;border-color:var(--gold)}

/* ---------- bespoke ---------- */
.bespoke{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start;margin-top:2.6rem}.bespoke>.bcard{position:sticky;top:88px;align-self:start}
@media(max-width:820px){.bespoke{grid-template-columns:1fr}}
.bespoke ul{list-style:none;display:grid;gap:.85rem;margin-top:1.6rem}
.bespoke li{color:var(--ink);font-size:1rem;display:flex;gap:.8rem;align-items:center;font-weight:300}
.bespoke li b{color:var(--gold)}
.bcard{padding:42px 38px;border:1px solid var(--gold);border-radius:6px;background:rgba(217,178,106,.05);text-align:center}
.bcard .k{color:var(--mut);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;margin-bottom:.9rem}
.bcard .amt{font-family:var(--fd);font-weight:300;font-size:3.4rem;line-height:1}
.bcard .amt small{font-size:1.05rem;color:var(--mut);font-family:var(--fu)}
.bcard .btn{margin-top:1.8rem;width:100%;justify-content:center}

/* ---------- final ---------- */
.final{position:relative;z-index:3;text-align:center;padding:clamp(110px,16vh,180px) clamp(20px,4vw,52px)}
.final h2{font-family:var(--fd);font-weight:300;font-size:clamp(2.6rem,8vw,6.4rem);line-height:1.0}
.final h2 em{font-style:italic;color:var(--gold)}
.final p{color:var(--mut);max-width:46ch;margin:1.6rem auto 2.4rem;font-weight:300}

footer{position:relative;z-index:3;border-top:1px solid var(--line);padding:52px 0;color:var(--mut);font-size:.8rem;letter-spacing:.06em}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;align-items:center}
footer .brand{font-size:1.2rem}

/* vp-btn-align-fix */
@media(min-width:901px){#hd .soc{left:auto !important;right:0 !important;}}

/* mobile-gap-fix: .expl/.gal/.logos/.final používaly clamp() s vh, na mobilu (výška
   obrazovky) počítají skoro maximum → obří prázdné mezery. Zmenšuje jen vertikální
   odsazení pod 640px, desktop/tablet beze změny. */
@media(max-width:640px){
  section.blk{padding-top:48px;padding-bottom:48px}
  .expl{padding-top:48px;padding-bottom:48px}
  .gal{padding-top:32px}
  .logos{padding-top:40px;padding-bottom:40px}
  .final{padding-top:64px;padding-bottom:64px}
}
