/* Network marketing JINAK – Jiřího navy, stavba ve stylu Lídrem svého života (viz moodboard.html) */ :root{ --navy:#161B2C; --navy-deep:#0D101A; --navy-card:#1B2236; --navy-rich:#1C2C66; --gold:#DDC789; --ink:#F3F5FA; --ink-2:#AEB6CC; --ink-3:#7C86A3; --line:rgba(174,182,204,.14); --line-2:rgba(174,182,204,.26); --ok:#9BE3B8; --bad:#F28B82; --grad:linear-gradient(90deg,#DDC789,#FEEBB6); --tgrad:linear-gradient(95deg,#FFFFFF 0%,#FEEBB6 40%,#DDC789 100%); --display:"Oswald","Arial Narrow",Impact,sans-serif; --body:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif; color-scheme:dark; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;background:var(--navy);color:var(--ink);font:400 16px/1.65 var(--body);-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} a{color:var(--gold)} :focus-visible{outline:2px solid var(--gold);outline-offset:3px} [hidden]{display:none!important} .wrap{width:min(1160px,100% - 40px);margin-inline:auto} .grad{background:var(--tgrad);-webkit-background-clip:text;background-clip:text;color:transparent} h1,h2,h3{font-family:var(--display);text-transform:uppercase;margin:0;text-wrap:balance} h2{font-weight:600;font-size:clamp(34px,4.6vw,56px);line-height:1} .eyebrow{display:flex;align-items:center;gap:10px;font:700 12px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)} .eyebrow::before{content:"";width:18px;height:1px;background:currentColor} .sec{padding-top:clamp(64px,9vw,112px)} .sec-head{display:grid;gap:14px;max-width:760px;margin-bottom:36px} .sec-head p{margin:0;color:var(--ink-2);max-width:62ch} .ico{color:var(--gold);flex:none} /* A/B nadpisu – verzi nastaví skript v */ html[data-v="B"] .v-a,html:not([data-v="B"]) .v-b{display:none} .annc{background:var(--grad);color:#141826;text-align:center;font:600 15px/1.25 var(--display);letter-spacing:.06em;text-transform:uppercase;padding:10px 16px} .nav{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0} .nav img{height:18px;width:auto} .btn-ghost{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);color:var(--ink);padding:11px 16px;border-radius:10px;font:600 13.5px/1 var(--body);text-decoration:none;background:rgba(13,16,26,.45)} .btn-ghost:hover{border-color:var(--gold)} /* Na přání Jiřího: oranžová = akce, jen tlačítka. Zlatá zůstává pro zvýraznění. */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:linear-gradient(90deg,#FF7A1A,#FFA43B);color:#141826;font:600 17px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;padding:18px 26px;border-radius:10px;text-decoration:none;border:0;cursor:pointer;box-shadow:0 14px 36px -12px rgba(255,122,26,.75),inset 0 0 0 1px rgba(255,190,110,.35);transition:transform .15s ease,box-shadow .2s ease,filter .2s ease} .btn:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 18px 44px -12px rgba(255,122,26,.9),inset 0 0 0 1px rgba(255,190,110,.45)} .btn svg{transition:transform .2s ease} .btn:hover svg{transform:translateX(4px)} .btn[disabled]{opacity:.65;cursor:progress} .pill{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(221,199,137,.55);background:rgba(221,199,137,.09);font:600 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;padding:8px 13px;border-radius:999px} .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)} .meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:24px;font:500 14px/1.3 var(--body);color:var(--ink-2)} .meta span{display:flex;align-items:center;gap:8px} /* úvod */ .hero{position:relative;isolation:isolate;overflow:hidden} .hero::before{content:"";position:absolute;z-index:-1;width:1000px;height:1000px;left:70%;top:52%;transform:translate(-50%,-50%);background:repeating-radial-gradient(circle,transparent 0 119px,rgba(174,182,204,.1) 120px 121px);-webkit-mask:radial-gradient(circle,#000 25%,transparent 68%);mask:radial-gradient(circle,#000 25%,transparent 68%)} .hero::after{content:"";position:absolute;z-index:-1;width:660px;height:660px;left:72%;top:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(61,95,165,.6),rgba(28,44,102,.28) 42%,transparent 68%)} .hero-in{display:grid;grid-template-columns:1.08fr .92fr;gap:24px;align-items:center;padding:20px 0 64px} .hero h1{font-weight:700;font-size:clamp(46px,6.4vw,92px);line-height:.92;margin:20px 0 14px} html[data-v="B"] .hero h1{font-size:clamp(36px,4.6vw,64px);line-height:.98} .kicker{font:500 clamp(19px,2vw,26px)/1.2 var(--display);text-transform:uppercase;letter-spacing:.02em;margin:0 0 16px;text-wrap:balance} .lead{color:var(--ink-2);font-size:17px;max-width:46ch;margin:0 0 22px} .proof{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink-2);margin-bottom:24px} .proof b{color:var(--ink)} .avatars{display:flex;padding-left:8px} .avatars span{width:32px;height:32px;border-radius:50%;border:2px solid var(--navy);margin-left:-8px;display:grid;place-items:center;font:700 11px/1 var(--body);color:var(--navy-deep);background:linear-gradient(140deg,#E9EDF7,#9FB0D6)} .avatars span:nth-child(2){background:linear-gradient(140deg,#FEEBB6,#C9B27A)} .avatars span:nth-child(4){background:linear-gradient(140deg,#B8C6FF,#5E7BE8)} .hero-visual{position:relative;justify-self:center;width:min(100%,440px)} .hero-visual img{-webkit-mask:linear-gradient(#000 80%,transparent);mask:linear-gradient(#000 80%,transparent)} .chip{position:absolute;display:flex;gap:10px;align-items:center;background:rgba(13,16,26,.78);backdrop-filter:blur(8px);border:1px solid var(--line-2);border-radius:14px;padding:12px 14px;font-size:13px;line-height:1.35;max-width:250px} .chip small{display:block;color:var(--ink-3);font-size:11.5px;margin-top:3px} .chip .q{font:700 28px/.8 var(--display);color:var(--gold);align-self:flex-start} .chip.quote{top:-4%;right:-10%} .chip.date{bottom:12%;left:-8%} .chip.date b{font:600 22px/1 var(--display);letter-spacing:.02em} /* čísla */ .stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--line);border-radius:18px;background:rgba(13,16,26,.5)} .stat{padding:24px 22px;border-left:1px solid var(--line)} .stat:first-child{border-left:0} .stat b{display:block;font:600 44px/1 var(--display);font-variant-numeric:tabular-nums} .stat b em{font-style:normal;color:var(--gold)} .stat span{display:block;margin-top:8px;font-size:13px;line-height:1.4;color:var(--ink-2)} /* registrace */ .reg{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center} .when{display:grid;gap:22px} .when h2{font-size:clamp(32px,4vw,50px)} .dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;margin:0;align-items:center} .dl dt{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--gold)} .dl dd{margin:0;font-size:14px;color:var(--ink-2);line-height:1.4} .dl dd b{display:block;color:var(--ink);font:600 20px/1.15 var(--display);letter-spacing:.02em;text-transform:uppercase} .card{background:linear-gradient(180deg,var(--navy-card),var(--navy-deep));border:1px solid var(--line-2);border-radius:18px;padding:clamp(22px,3vw,32px)} .card.lift{border-color:rgba(221,199,137,.5);box-shadow:0 24px 60px -26px rgba(221,199,137,.45)} .form h3{font-weight:600;font-size:28px;line-height:1.05;margin-bottom:6px} .form .sub{margin:0 0 20px;color:var(--ink-2);font-size:14.5px} .fields{position:relative;display:grid;gap:14px} .field{display:grid;gap:7px} .field label{font:600 13px/1 var(--body);color:var(--ink-2)} .field label i{font-style:normal;font-weight:500;color:var(--ink-3)} .field input{width:100%;background:rgba(13,16,26,.75);border:1px solid var(--line-2);border-radius:10px;padding:14px;font:500 16px/1.2 var(--body);color:var(--ink);outline:none} .field input::placeholder{color:var(--ink-3)} .field input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(221,199,137,.25)} .fields [aria-invalid="true"]{border-color:var(--bad);outline:2px solid var(--bad)} .consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--ink-3);cursor:pointer} .consent input{margin:2px 0 0;width:16px;height:16px;accent-color:var(--gold);flex:none} .consent a{color:var(--ink-2)} .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden} .form .btn{width:100%} .form-err{margin:0;color:var(--bad);font-size:14px;font-weight:600} .form-err:empty{display:none} /* témata, pro koho */ .topics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .topic{padding:26px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(165deg,rgba(28,44,102,.6),rgba(22,27,44,.15) 70%)} .topic h3{font-weight:600;font-size:25px;line-height:1.06;margin:16px 0 10px} .topic p{margin:0;color:var(--ink-2);font-size:15px} .fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 40px} .fit .col{border-top:2px solid var(--ok);padding-top:18px} .fit .col.no{border-top-color:var(--bad)} .fit h3{font:700 13px/1 var(--body);letter-spacing:.16em;margin-bottom:18px;color:var(--ok)} .fit .no h3{color:var(--bad)} .fit ul{list-style:none;margin:0;padding:0;display:grid;gap:14px} .fit li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;font-size:16.5px;line-height:1.45} .fit li svg{margin-top:3px;color:var(--ok)} .fit .no li svg{color:var(--bad)} /* o Jiřím, reference */ .about{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:center} .about-img{background:radial-gradient(circle at 55% 60%,rgba(61,95,165,.55),transparent 62%)} .about h2{margin:14px 0 20px} .about p{color:var(--ink-2);margin:0 0 16px;max-width:60ch} .book{display:flex;gap:18px;align-items:center;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)} .book img{width:112px} .book p{margin:0;font-size:14.5px} .book b{color:var(--ink)} .reviews{columns:3 300px;column-gap:16px} .review{break-inside:avoid;margin:0 0 16px;display:flex;flex-direction:column;gap:14px} .stars{display:flex;gap:3px;color:var(--gold)} .review blockquote{margin:0;font-size:15px;line-height:1.6} .who{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600} .av{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;font:700 12px/1 var(--body);color:var(--navy-deep);background:linear-gradient(140deg,#E9EDF7,#9FB0D6)} .src-note{font-size:13px;color:var(--ink-3);margin:4px 0 0} /* FAQ, závěr, patička */ .faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:start} .faq-list{display:grid;gap:10px} details.faq{border:1px solid var(--line-2);border-radius:14px;background:rgba(13,16,26,.55)} details.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;font:600 16px/1.35 var(--body)} details.faq summary::-webkit-details-marker{display:none} details.faq summary svg{flex:none;color:var(--gold);transition:transform .2s ease} details.faq[open] summary svg{transform:rotate(180deg)} details.faq p{margin:0;padding:0 20px 18px;color:var(--ink-2);font-size:15px} .final{position:relative;overflow:hidden;isolation:isolate;border:1px solid var(--line-2);border-radius:26px;background:linear-gradient(160deg,var(--navy-rich),var(--navy) 60%);padding:clamp(28px,5vw,64px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:40px;align-items:center} .final::before{content:"";position:absolute;z-index:-1;width:900px;height:900px;left:20%;top:50%;transform:translate(-50%,-50%);background:repeating-radial-gradient(circle,transparent 0 99px,rgba(174,182,204,.09) 100px 101px);-webkit-mask:radial-gradient(circle,#000 20%,transparent 65%);mask:radial-gradient(circle,#000 20%,transparent 65%)} .final h2{font-weight:700;font-size:clamp(36px,5vw,64px);line-height:.95;margin:18px 0 16px} .final p{color:var(--ink-2);margin:0;max-width:44ch} .foot{margin-top:96px;border-top:1px solid var(--line);padding:28px 0 40px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;font-size:13px;color:var(--ink-3)} .foot a,.foot button{color:var(--ink-2)} .foot button{background:none;border:0;padding:0;font:inherit;text-decoration:underline;cursor:pointer} /* cookies */ .cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:50;max-width:560px;margin-inline:auto;background:rgba(13,16,26,.97);border:1px solid var(--line-2);border-radius:16px;padding:18px 20px;box-shadow:0 20px 50px -20px #000;display:grid;gap:12px;font-size:13.5px;color:var(--ink-2)} .cookies p{margin:0} .cookies .row{display:flex;flex-wrap:wrap;gap:10px} .cookies button{flex:1 1 160px;font:600 14px/1 var(--body);padding:13px 16px;border-radius:10px;cursor:pointer;border:1px solid var(--line-2);background:transparent;color:var(--ink)} .cookies button:hover{border-color:var(--gold)} /* děkovací stránka */ .thanks{padding:32px 0 0;max-width:780px} .thanks h1{font-weight:700;font-size:clamp(40px,6vw,80px);line-height:.94;margin:18px 0 16px} .next{list-style:none;counter-reset:n;margin:36px 0 0;padding:0} .next li{counter-increment:n;display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;padding:22px 0;border-top:1px solid var(--line);color:var(--ink-2)} .next li::before{content:counter(n,decimal-leading-zero);font:600 30px/1 var(--display);color:var(--gold);font-variant-numeric:tabular-nums} .next b{display:block;color:var(--ink);font:600 21px/1.2 var(--display);text-transform:uppercase;margin-bottom:6px} .row-wrap{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px} @media (max-width:960px){ .hero-in,.reg,.about,.faq-wrap,.final{grid-template-columns:1fr} .hero-visual{width:min(100%,360px)} .chip.quote{right:0;top:0}.chip.date{left:0} .topics,.fit{grid-template-columns:1fr} .stats{grid-template-columns:repeat(2,minmax(0,1fr))} .stat{border-left:0;border-top:1px solid var(--line)} .stat:nth-child(-n+2){border-top:0} .stat:last-child{grid-column:span 2} } @media (max-width:560px){ .annc{font-size:13px} .nav .btn-ghost{display:none} .chip{position:static;margin-top:10px;max-width:none} .stat b{font-size:36px} } @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}