/* Návrh 03 · Oslava bez starostí: teplý svetlý hero s plánovačom oslavy, konfety, zelená identita parku. */
:root{
  --bg:#FBF5EC;--ink:#24301F;--muted:#55604F;--green:#4A763F;--green-d:#2F5428;--deep:#1F3A26;--coral:#E8735A;--peach:#F7D9C4;--butter:#F6D774;
  --line:rgba(36,48,31,.14);--line-strong:rgba(36,48,31,.32);
  --cta:#2F5428;--on-cta:#fff;--cta-h:#24431F;--cta-shadow:rgba(47,84,40,.5);
  --hdr-bg:rgba(251,245,236,.9);--menu-bg:#FBF5EC;--focus:#2F5428;--r:24px;color-scheme:light
}
.hdr .nav a:hover{--hover:rgba(47,84,40,.08)}
em{font-style:normal;color:var(--green)}
.kicker{font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--coral);margin-bottom:14px}
.kicker,.eyebrow{color:#B4472F}

/* HERO */
.hero{position:relative;padding:calc(var(--hdr) + env(safe-area-inset-top) + 34px) 0 80px;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;z-index:-1;width:900px;height:900px;right:-260px;top:-300px;border-radius:50%;background:radial-gradient(circle,#F7D9C4 0%,rgba(247,217,196,0) 68%)}
.hero::after{content:"";position:absolute;z-index:-1;inset:0;background-image:radial-gradient(circle,#E8735A 2px,transparent 2.5px),radial-gradient(circle,#4A763F 2px,transparent 2.5px),radial-gradient(circle,#E3B93A 2px,transparent 2.5px);background-size:140px 160px,190px 130px,230px 210px;background-position:20px 40px,90px 10px,40px 120px;opacity:.35;-webkit-mask:linear-gradient(180deg,#000,transparent 75%);mask:linear-gradient(180deg,#000,transparent 75%)}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start}
.eyebrow{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 5px rgba(232,115,90,.2)}
.hero h1{font-size:clamp(42px,4.8vw,74px);line-height:1.04}
.hero h1 em{display:block;margin-top:6px}
.lead{font-size:19px;line-height:1.65;color:var(--muted);max-width:33em;margin:22px 0 28px;text-align:justify;hyphens:auto}
.hero-fig{aspect-ratio:16/10;border-radius:28px;box-shadow:0 40px 70px -40px rgba(36,48,31,.6);transform:rotate(-1.2deg)}

/* plánovač */
.plan{position:relative;background:#fff;border-radius:30px;padding:30px 30px 24px;border:1px solid var(--line);box-shadow:0 50px 90px -50px rgba(36,48,31,.55),0 0 0 8px rgba(255,255,255,.55);margin-top:8px}
.plan::before{content:"";position:absolute;top:-16px;right:34px;width:64px;height:64px;border-radius:50%;background:var(--butter);z-index:-1}
.plan-k{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.plan h2{font-size:32px;margin:6px 0 20px}
.field{margin:0 0 18px;border:0;padding:0}
.field label,.lbl,.field legend{display:block;font-weight:700;margin-bottom:8px;padding:0}
.field input[type=date]{width:100%;min-height:54px;padding:0 16px;border-radius:14px;border:1.5px solid var(--line-strong);background:var(--bg);font-size:17px;-webkit-appearance:none;appearance:none}
.field input[type=date]:focus{border-color:var(--green);outline:none;box-shadow:0 0 0 4px rgba(74,118,63,.2)}
.day{font-size:15px;color:var(--muted);margin-top:8px}
.day.ok{color:var(--green-d);font-weight:600}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.step{display:flex;align-items:center;justify-content:space-between;gap:6px;background:var(--bg);border-radius:999px;padding:4px;border:1.5px solid var(--line)}
.step button{width:46px;height:46px;border-radius:50%;border:0;background:#fff;font-size:24px;line-height:1;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.08);touch-action:manipulation}
.step button:hover{background:var(--peach)}
.step output{font-family:'Marcellus',serif;font-size:28px;min-width:40px;text-align:center}
.cap{margin:-2px 0 18px}
.cap-bar{height:10px;border-radius:99px;background:#EFE6D8;overflow:hidden}
.cap-bar span{display:block;height:100%;width:40%;border-radius:99px;background:linear-gradient(90deg,#82B374,#4A763F);transition:width .5s cubic-bezier(.3,1.4,.5,1),background .3s}
.cap.over .cap-bar span{background:linear-gradient(90deg,#F0A35E,#C9452B)}
.cap p{font-size:15px;color:var(--muted);margin-top:6px}
.cap.over p{color:#A0331E;font-weight:600}
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opts legend{width:100%}
.opt{position:relative;cursor:pointer}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt span{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line-strong);font-weight:600;transition:background .2s,border-color .2s,color .2s}
.opt span::before{content:"";width:18px;height:18px;border-radius:6px;border:2px solid currentColor;flex:none}
.opt input:checked+span{background:var(--green-d);border-color:var(--green-d);color:#fff}
.opt input:checked+span::before{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F5428' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat;border-color:#fff}
.opt input:focus-visible+span{outline:3px solid var(--green);outline-offset:3px}
.sum{background:var(--bg);border-radius:16px;padding:14px 16px;font-size:16px;line-height:1.5;margin-bottom:16px;border:1px dashed var(--line-strong)}
.go{width:100%}
.go.wait{opacity:.6}
.fine{font-size:14px;color:var(--muted);margin-top:12px;line-height:1.5}
.fine a{color:var(--green-d);font-weight:700}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:70;width:100%;height:100%}

/* deti */
.kids{padding:100px 0 90px}
.sec-head{max-width:760px;margin-bottom:44px}
.sec-head h2,.salon h2,.faq h2,.final h2{font-size:clamp(34px,3.8vw,54px);margin-bottom:16px}
.sec-head p,.salon-txt p{font-size:18px;color:var(--muted);text-align:justify;hyphens:auto}
.kg{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.kc{background:#fff;border-radius:26px;overflow:hidden;border:1px solid var(--line);transition:transform .3s}
.kc:nth-child(even){transform:translateY(28px)}
.kc:hover{transform:translateY(-4px)}
.kc .fig{border-radius:0;aspect-ratio:4/5}
.kc figcaption{padding:18px 20px 22px;color:var(--muted);font-size:16px;line-height:1.5}
.kc figcaption b{display:block;font-family:'Marcellus',serif;font-weight:400;font-size:24px;color:var(--ink);margin-bottom:4px}
.kc.is-stock figcaption::after{content:"Ilustračná fotografia";display:block;font-size:13px;margin-top:8px;color:#6B7465}

/* salónik */
.salon{background:var(--deep);color:#fff;padding:100px 0}
.salon .kicker{color:var(--butter)}
.salon-in{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center}
.salon-txt p{color:#D5E2CF;margin-bottom:26px}
.salon .btn-p{--cta:#F6D774;--on-cta:#24301F;--cta-h:#FFE28E}
.salon .btn-g{color:#fff}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.stack{position:relative;aspect-ratio:4/3.2}
.stack .fig{position:absolute;width:78%;aspect-ratio:4/3;box-shadow:0 30px 60px -30px rgba(0,0,0,.7);transition:transform .7s cubic-bezier(.3,1.2,.4,1),z-index 0s .2s;border:6px solid #fff;border-radius:20px}
.stack .s1{left:0;top:6%;transform:rotate(-5deg);z-index:1}
.stack .s2{left:12%;top:0;transform:rotate(2deg);z-index:2}
.stack .s3{left:22%;top:14%;transform:rotate(6deg);z-index:3}
.stack-btn{position:absolute;right:0;bottom:0;z-index:5;width:56px;height:56px;border-radius:50%;border:0;background:var(--butter);color:var(--ink);cursor:pointer;display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.5)}
.stack-btn svg{width:22px;height:22px}

/* postup */
.how{padding:100px 0 60px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
.steps li{position:relative;background:#fff;border-radius:26px;padding:30px 28px;border:1px solid var(--line)}
.steps span{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--peach);font-family:'Marcellus',serif;font-size:26px;margin-bottom:18px}
.steps li:nth-child(2) span{background:#DDEBD6}.steps li:nth-child(3) span{background:#F9E8A8}
.steps h3{font-size:28px;margin-bottom:8px}
.steps p{color:var(--muted);text-align:justify;hyphens:auto}

/* otázky */
.faq{padding:60px 0 100px}
.faq-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px}
.faq-p{color:var(--muted);font-size:17px}.faq-p a{color:var(--green-d);font-weight:700}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;cursor:pointer;font-weight:700;font-size:18px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-family:'Marcellus',serif;font-size:30px;color:var(--green);transition:transform .3s}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa p{color:var(--muted);padding:0 0 20px;text-align:justify;hyphens:auto}
.qa a{color:var(--green-d);font-weight:700}

/* záver */
.final{padding:0 0 100px}
.final-in{background:linear-gradient(120deg,#F7D9C4,#F9E8A8);border-radius:36px;padding:64px;text-align:center}
.final-in p{font-size:19px;color:var(--muted);max-width:36em;margin:0 auto 28px}
.final .ctas{justify-content:center}

.foot{background:var(--deep);color:#D5E2CF}.foot h2,.foot a{color:#fff}.foot-logo{height:48px;width:auto;margin-bottom:12px}.foot .luma{border-color:rgba(255,255,255,.14);color:#B9CDB1}
.mbar .btn-g{width:50px;padding:0}

@media (max-width:1100px){.kg{grid-template-columns:1fr 1fr}.kc:nth-child(even){transform:none}}
@media (max-width:899px){
  .hero{padding:calc(var(--hdr) + env(safe-area-inset-top) + 22px) 0 56px}
  .hero-in{grid-template-columns:1fr;gap:28px}
  .hero h1{font-size:clamp(38px,10.5vw,54px)}
  .lead{font-size:17px;margin:16px 0 22px;text-align:left}
  .hero-txt{display:contents}.hero-in>*,.hero-txt>*{order:1}.plan{order:2;margin-top:0}.hero-fig{order:3;transform:none;aspect-ratio:16/10}
  .eyebrow{font-size:13px;letter-spacing:.1em}
  .plan{padding:22px 18px 20px;border-radius:26px}
  .plan h2{font-size:28px}
  .two{gap:10px}
  .step button{width:44px;height:44px}
  .kids{padding:72px 0 56px}.kg{grid-template-columns:1fr}.kc .fig{aspect-ratio:16/10}
  .salon{padding:72px 0}.salon-in,.faq-in{grid-template-columns:1fr;gap:36px}
  .stack{aspect-ratio:4/3.4}
  .how{padding:72px 0 40px}.steps{grid-template-columns:1fr}
  .faq{padding:40px 0 72px}
  .final-in{padding:40px 22px;border-radius:28px}
  .final .btn{flex:1 1 100%}
  .sec-head p,.salon-txt p,.steps p,.qa p{text-align:left}
}