@font-face{font-family:"Cormorant";src:url(fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url(fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Archivo";src:url(fonts/archivo-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Archivo";src:url(fonts/archivo-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Archivo";src:url(fonts/archivo-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}

:root{
  color-scheme:dark;
  --bg:#0c0a08;--bg2:#15110d;--card:#1d1813;--line:rgba(236,227,208,.13);
  --tx:#ece3d0;--tx2:#bcae98;--tx3:#8a7d68;--hi:#faf6ec;
  --cu:#c47a45;--cu2:#a8612b;--cu-glow:rgba(196,122,69,.35);
  --serif:"Cormorant",Georgia,serif;--sans:"Archivo",system-ui,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-in:cubic-bezier(.7,0,.84,0);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
  --w:1180px;--gut:clamp(16px,4vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:400 17px/1.6 var(--sans);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--cu)}
h1,h2,h3{font-family:var(--serif);font-weight:500;color:var(--hi);letter-spacing:-.01em;margin:0}
em{font-style:italic;color:var(--cu)}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gut)}
.eyebrow{font:600 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--cu)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 30px;border-radius:999px;border:0;cursor:pointer;
  font:600 16px/1 var(--sans);text-decoration:none;background:var(--cu);color:#140e09;transition:transform .2s var(--ease-out),background .2s}
.btn:hover{background:#d68b55}
.btn:active{transform:scale(.98)}
.btn:focus-visible,.box:focus-within,input:focus-visible{outline:2px solid var(--hi);outline-offset:3px}
.btn[disabled]{opacity:.55;cursor:wait}
.link{color:var(--tx2);font-size:15px;text-underline-offset:4px}

/* Top */
.top{position:absolute;inset:0 0 auto 0;z-index:5;padding:18px 0}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.top img{width:92px}
.top a.tel{color:var(--tx2);font-size:14px;text-decoration:none}

/* Hero */
.hero{position:relative;min-height:min(100svh,880px);display:flex;align-items:flex-end;overflow:hidden;background:#050404}
.hero picture img{position:absolute;top:0;right:0;width:56%;height:100%;object-fit:cover;object-position:50% 70%;opacity:1}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#050404 0%,#050404 42%,rgba(5,4,4,.4) 50%,rgba(5,4,4,0) 58%),linear-gradient(0deg,var(--bg) 0%,rgba(12,10,8,0) 35%)}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:120px;padding-bottom:clamp(40px,8vh,90px)}
.hero h1{font-size:clamp(46px,7.4vw,104px);line-height:.95;max-width:11ch}
.hero h1 span{display:block}
.hero .lead{max-width:34ch;margin:22px 0 30px;font-size:clamp(18px,1.6vw,21px);color:var(--tx)}
.hero .lead strong{color:var(--hi)}
.hero .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px}
.price-tag{display:inline-flex;align-items:baseline;gap:12px;margin-top:6px;font-family:var(--serif)}
.price-tag s{color:var(--tx3);font-size:24px}
.price-tag b{font-weight:500;font-size:clamp(40px,4vw,56px);color:var(--hi)}
.price-tag small{font:400 14px var(--sans);color:var(--tx2)}
.ki-note{position:absolute;right:12px;bottom:12px;z-index:3;font:600 12px var(--sans);color:var(--hi);background:rgba(12,10,8,.7);padding:5px 9px;border-radius:6px}
.how-img{position:relative}

/* Facts */
.facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2)}
.facts ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr}
.facts li{padding:26px 22px;border-left:1px solid var(--line)}
.facts li:first-child{border-left:0;padding-left:0}
.facts b{display:block;font:500 34px/1 var(--serif);color:var(--hi);margin-bottom:6px}
.facts span{font-size:14px;color:var(--tx2)}

/* Game */
.game{padding:clamp(70px,10vw,130px) 0;position:relative}
.game-head{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:46px}
.game-head h2{font-size:clamp(38px,5vw,66px);line-height:1}
.game-head p{color:var(--tx2);margin:0;max-width:44ch}
.boxes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2.4vw,28px)}
.sr{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.box{box-sizing:border-box;cursor:pointer;position:relative;aspect-ratio:1/1.08;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding:0 0 22px;border-radius:18px;background:radial-gradient(120% 90% at 50% 0%,#221b14 0%,#0f0c0a 70%);border:1px solid var(--line);
  transition:transform .35s var(--ease-spring),border-color .25s,opacity .3s,filter .3s}
.box svg{width:62%;height:auto;margin-bottom:auto;margin-top:12%;transition:transform .45s var(--ease-spring)}
.box .n{font:500 22px var(--serif);color:var(--tx2)}
.box .n i{font-style:italic;color:var(--cu)}
@media (hover:hover) and (pointer:fine){.box:hover{transform:translateY(-6px);border-color:rgba(196,122,69,.55)} .box:hover svg{transform:rotate(-3deg) scale(1.03)}}
.box.is-picked{border-color:var(--cu);box-shadow:0 0 0 1px var(--cu),0 30px 80px -30px var(--cu-glow)}
.box.is-picked svg{transform:translateY(-4px) scale(1.04)}
.boxes.has-pick .box:not(.is-picked){opacity:.38;filter:saturate(.4)}
.box .lid{transition:transform .6s var(--ease-spring);transform-origin:50% 100%}
.box.is-open .lid{transform:translateY(-26px) rotate(-14deg)}
.box .glow{opacity:0;transition:opacity .6s .15s}
.box.is-open .glow{opacity:1}

.step{margin-top:36px;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,5vw,70px);align-items:start}
.step[hidden]{display:none}
.step-copy h3{font-size:clamp(30px,3.4vw,44px);line-height:1.05;margin-bottom:12px}
.step-copy p{color:var(--tx2);margin:0 0 10px}
.step-copy .proof{color:var(--tx);font-size:15px;margin-top:18px}.proof span{color:var(--cu);letter-spacing:2px;margin-right:6px}
form.claim{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:clamp(22px,3vw,34px)}
.field{margin-bottom:16px}
.field label{display:block;font-size:14px;font-weight:600;color:var(--tx);margin-bottom:7px}
.field input{width:100%;min-height:52px;padding:0 16px;border-radius:12px;border:1px solid rgba(236,227,208,.22);background:#0f0c0a;color:var(--hi);font:400 17px var(--sans)}
.field input[aria-invalid="true"]{border-color:#e07a5f}
.err{display:block;min-height:1em;font-size:13px;color:#f0a28c;margin-top:5px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--tx2);margin:6px 0 16px;cursor:pointer}
.check input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--cu)}
.claim .btn{width:100%}
.fine{font-size:13px;color:var(--tx3);margin:14px 0 0;line-height:1.5}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{font-size:14px;color:#f0a28c;margin:10px 0 0;min-height:1em}

/* Reveal */
.reveal{margin-top:40px;border-radius:22px;border:1px solid rgba(196,122,69,.5);background:radial-gradient(90% 120% at 15% 0%,rgba(196,122,69,.22),rgba(12,10,8,0) 60%),var(--card);padding:clamp(26px,4vw,52px);display:grid;grid-template-columns:1.2fr .8fr;gap:30px}
.reveal[hidden]{display:none}
.reveal h3{font-size:clamp(34px,4.4vw,58px);line-height:1}
.reveal .bonus{font:500 clamp(26px,3vw,38px)/1.1 var(--serif);color:var(--cu);margin:14px 0 8px}
.reveal p{color:var(--tx2);margin:0 0 12px}
.code{border:1px dashed rgba(236,227,208,.35);border-radius:14px;padding:20px;text-align:center;align-self:center}
.code small{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx3)}
.code b{display:block;font:600 30px/1.2 var(--sans);letter-spacing:.12em;color:var(--hi);margin-top:6px}
.next{list-style:none;padding:0;margin:18px 0 0;counter-reset:n}
.next li{counter-increment:n;padding:10px 0 10px 40px;position:relative;border-top:1px solid var(--line);color:var(--tx)}
.next li::before{content:counter(n);position:absolute;left:0;top:9px;width:26px;height:26px;border-radius:50%;border:1px solid var(--cu);color:var(--cu);font-size:13px;display:grid;place-items:center}

/* Prices */
.prices{padding:clamp(70px,9vw,120px) 0;background:var(--bg2);border-top:1px solid var(--line)}
.prices-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,6vw,90px);align-items:start}
.prices h2{font-size:clamp(36px,4.6vw,60px);line-height:1}
.prices .intro p{color:var(--tx2)}
table.tarife{width:100%;border-collapse:collapse}
.tarife th,.tarife td{text-align:left;padding:18px 8px;border-bottom:1px solid var(--line);vertical-align:baseline}
.tarife thead th{font:600 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--tx3);padding-top:0}
.tarife tbody th{font:500 26px var(--serif);color:var(--hi);white-space:nowrap}
.tarife tbody th small{display:block;font:400 13px var(--sans);color:var(--tx3)}
.tarife td s{color:var(--tx3)}
.tarife td b{font:500 28px var(--serif);color:var(--hi);white-space:nowrap}
.tarife tr.top-row b{color:var(--cu)}
.tarife td.save{color:var(--tx2);font-size:15px}
.extras{margin-top:22px;display:grid;gap:10px;font-size:15px;color:var(--tx2)}
.extras strong{color:var(--hi)}

/* Steps / proof */
.how{padding:clamp(70px,9vw,120px) 0}
.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.how-img{border-radius:20px;overflow:hidden;border:1px solid var(--line);max-width:460px}
.how h2{font-size:clamp(34px,4.2vw,56px);line-height:1;margin-bottom:26px}
.how ol{list-style:none;margin:0;padding:0}
.how li{display:grid;grid-template-columns:56px 1fr;gap:4px 14px;padding:20px 0;border-top:1px solid var(--line)}
.how li b{grid-row:span 2;font:500 40px/1 var(--serif);color:var(--cu)}
.how li strong{color:var(--hi);font-weight:600}
.how li span{color:var(--tx2)}
.quotes{padding:0 0 clamp(70px,9vw,110px)}
.quotes-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:20px}
blockquote{margin:0;padding:28px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
blockquote p{font:500 clamp(22px,2.2vw,28px)/1.25 var(--serif);color:var(--hi);margin:0 0 14px}
blockquote footer{font-size:14px;color:var(--tx3)}
.quotes .src{font-size:13px;color:var(--tx3);margin-top:12px}

/* FAQ */
.faq{padding:clamp(60px,8vw,110px) 0;border-top:1px solid var(--line)}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,6vw,90px)}
.faq h2{font-size:clamp(34px,4vw,52px);line-height:1}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;font-weight:600;color:var(--hi)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:16px;font:400 26px var(--serif);color:var(--cu)}
details[open] summary::after{content:"\2013"}
details p{margin:0 0 20px;color:var(--tx2)}
details[open] p{animation:fade .35s var(--ease-out)}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* Final + footer */
.final{padding:clamp(60px,8vw,100px) 0;text-align:left;background:var(--bg2);border-top:1px solid var(--line)}
.final .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px}
.final h2{font-size:clamp(32px,4vw,52px);line-height:1.02;max-width:18ch}
footer.site{padding:36px 0 50px;font-size:14px;color:var(--tx3)}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
footer.site nav{display:flex;flex-wrap:wrap;gap:10px 22px}
footer.site a{color:var(--tx2);text-underline-offset:3px}

/* Studio picker */
.picker{min-height:100svh;display:grid;place-items:center;text-align:center;padding:40px var(--gut)}
.picker h1{font-size:clamp(40px,6vw,72px);line-height:1;margin:18px 0 30px}
.picker nav{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* Motion: reveal on enter */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}
.hero h1 span{opacity:0;transform:translateY(22px);animation:line .7s var(--ease-out) forwards}
.hero h1 span:nth-child(2){animation-delay:.08s}.hero h1 span:nth-child(3){animation-delay:.16s}
@keyframes line{to{opacity:1;transform:none}}

@media (max-width:900px){
  .facts ul{grid-template-columns:1fr 1fr}
  .facts li:nth-child(3){border-left:0;padding-left:0}
  .facts li{border-top:1px solid var(--line)} .facts li:nth-child(-n+2){border-top:0}
  .game-head,.step,.reveal,.prices-grid,.how-grid,.quotes-grid,.faq-grid{grid-template-columns:1fr}
  .hero::after{background:linear-gradient(0deg,var(--bg) 0%,rgba(12,10,8,.82) 45%,rgba(5,4,4,.25) 100%)}
  .hero picture img{width:100%;object-position:50% 78%}
  .hero .eyebrow .opt{display:none}
  .how-img{max-width:none;aspect-ratio:4/3}
  .how-img img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
}
@media (max-width:560px){
  body{font-size:16px}
  .hero h1{font-size:60px}
  .facts li{padding:18px 12px} .facts b{font-size:28px}
  .box{border-radius:14px;padding-bottom:12px} .box .n{font-size:17px}
  .tarife th,.tarife td{padding:14px 4px}
  .tarife td.save{display:none}
  .tarife thead th.save{display:none}
  .tarife tbody th{font-size:22px} .tarife td b{font-size:24px}
  .hero .cta-row .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  [data-reveal],.hero h1 span{opacity:1;transform:none}
}

.tarife td small{display:block;font:400 12px var(--sans);color:var(--tx3);white-space:nowrap;margin-top:4px}