@import url("fonts/montserrat.css");

:root { --teal:#63a5a7; --teal-dark:#267b80; --lime:#efff00; --white:#f7f7ed; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--teal); color:var(--white); font-family:"Montserrat",Arial,sans-serif; font-size:15px; font-weight:300; }
img { max-width:100%; display:block; }
.wrap { width:min(1110px, calc(100% - 40px)); margin-inline:auto; }
.hero { min-height:310px; display:grid; grid-template-columns:311px 167px minmax(280px,1fr); align-items:center; gap:54px; padding:54px 0 42px 114px; }
.brand { display:flex; width:311px; flex-direction:column; align-items:center; gap:15px; }
.campaign-logo { width:311px; }
.brand span { width:100%; background:var(--lime); color:#267b80; padding:9px 25px 7px; text-align:center; font-size:17px; line-height:1.1; white-space:nowrap; text-transform:uppercase; letter-spacing:.04em; }
.hero-product { width:167px; max-height:206px; margin:0; }
.meta { margin:0; font-size:15px; line-height:1.42; }
.meta div { display:flex; gap:5px; }.meta dt { color:var(--lime); font-weight:800; }.meta dd { margin:0; }
.dashboard { display:grid; grid-template-columns:520px 520px; gap:25px; padding:0 22px 45px; }
.dashboard h2 { margin:0 0 8px; font-size:20px; line-height:1.15; font-weight:300; }.dashboard h2 em { color:var(--lime); font-style:normal; font-weight:800; }
.stats-side h2 em::after { content:""; display:inline-block; width:.48em; height:.48em; margin-left:.48em; border-radius:50%; vertical-align:.08em; opacity:1; transform:scale(1); background:#37ed78; box-shadow:0 0 0 3px rgba(55,237,120,.16),0 0 9px rgba(55,237,120,.75); animation:live-pulse 1.35s ease-in-out .6s infinite; animation-fill-mode:backwards; }
@keyframes live-pulse { 0%,24%,100% { opacity:1; transform:scale(1); } 62% { opacity:.28; transform:scale(.82); } }
@media (prefers-reduced-motion:reduce) { .stats-side h2 em::after { animation:none; } }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }.stat { display:grid; grid-template-rows:31px 64px; height:95px; background:#a3c5c4; color:#26747a; text-align:center; }
.stat span { display:flex; align-items:center; justify-content:center; padding:4px; border-bottom:2px solid var(--teal); font-size:10px; line-height:1.05; text-transform:uppercase; font-weight:700; }.stat strong { display:flex; align-items:center; justify-content:center; padding:4px; font-size:45px; line-height:1; font-weight:800; }
.progress-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }.progress { display:grid; grid-template-rows:31px 64px; height:95px; background:var(--teal-dark); text-align:center; }.progress strong,.progress span { display:flex; align-items:center; justify-content:center; }.progress strong { padding:4px; border-bottom:2px solid var(--teal); font-size:18px; line-height:1; font-weight:400; }.progress-icon { padding:7px 12px; }.progress-icon img { width:auto; height:auto; max-width:78px; max-height:47px; object-fit:contain; }
.progress:nth-child(1) .progress-icon { padding:4px 8px; }
.progress:nth-child(1) .progress-icon img { max-width:92px; max-height:56px; }
.progress:nth-child(2) .progress-icon img { max-width:50px; max-height:41px; }
.progress:nth-child(3) .progress-icon img { max-width:48px; max-height:41px; }
.progress:nth-child(4) .progress-icon img { max-width:64px; max-height:36px; }
.content { position:relative; }.content:before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent); pointer-events:none; }
.case-section { position:relative; z-index:1; border-bottom:1px solid rgba(32,111,115,.28); padding:46px 120px; }
.case-section:nth-child(even) { background:rgba(255,255,255,.022); }
.case-section.with-image { display:grid; grid-template-columns:minmax(0,600px) minmax(200px,250px); align-items:center; gap:55px; }
.case-section.image-left { grid-template-columns:260px minmax(0,666px); padding-inline:50px; }.case-section.image-left .section-visual { order:-1; }
.case-section h2 { color:var(--lime); font-size:58px; line-height:.95; font-weight:900; font-style:italic; margin:0 0 22px; letter-spacing:-.018em; }
.case-section p { margin:0 0 18px; font-size:19px; line-height:1.38; font-weight:400; }.case-section b { font-weight:700; }
.case-section .highlight-fact { margin:24px 0 26px; color:var(--lime); font-size:21px; line-height:1.32; font-weight:600; font-style:italic; letter-spacing:-.01em; }
blockquote { color:var(--lime); font-size:21px; font-weight:600; font-style:italic; margin:26px 0 0; line-height:1.32; letter-spacing:-.01em; } blockquote b { font-weight:800; font-style:normal; }
.section-visual { position:relative; isolation:isolate; }
.section-visual img { max-height:418px; margin:auto; object-fit:contain; }
.case-section { scroll-margin-top:24px; }
.parallax-target { translate:0 var(--parallax-y,0px); transition:translate 80ms linear; will-change:translate; }
#background { min-height:270px; }
#challenge { min-height:420px; grid-template-columns:310px minmax(0,590px); padding-left:35px; gap:50px; }
#challenge .section-visual img { width:100%; max-height:430px; }
#strategie { min-height:430px; }
#mechanika { min-height:510px; grid-template-columns:237px minmax(0,666px); padding-left:87px; gap:58px; }
.phone-composite { position:relative; width:237px; height:418px; }
.phone-composite img { position:absolute; inset:0; width:100%; height:100%; max-height:none; object-fit:contain; }
.phone-screen-art { z-index:1; padding:8px 7px 7px 6px; }
.phone-frame-art { z-index:2; pointer-events:none; }
#vyhry { min-height:590px; }
#gamifikace { min-height:415px; grid-template-columns:175px minmax(0,430px) 175px; justify-content:center; align-items:center; gap:35px; }
#gamifikace .copy { grid-column:2; text-align:left; }
#gamifikace .phone-triptych { display:contents; }
#gamifikace .mini-phone:first-child { grid-column:1; grid-row:1; }
#gamifikace .mini-phone:last-child { grid-column:3; grid-row:1; }
.mini-phone { position:relative; width:175px; height:auto; aspect-ratio:715/1496; overflow:hidden; border:4px solid #152f35; border-radius:25px; background:#152f35; box-shadow:0 3px 18px rgba(184,226,224,.28); }
.mini-phone:before { content:""; position:absolute; z-index:3; inset:0; border-radius:20px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); pointer-events:none; }
.mini-phone span { position:absolute; z-index:4; top:9px; left:50%; width:47px; height:14px; border-radius:999px; background:#0b1114; box-shadow:0 1px 2px rgba(0,0,0,.35); transform:translateX(-50%); }
.mini-phone video { position:absolute; inset:0; display:block; width:100%; height:100%; object-position:center; }
.phone-video-main { z-index:2; object-fit:cover; }
#influenceri { min-height:285px; grid-template-columns:323px 520px; padding-left:87px; gap:45px; }
#materialy { min-height:370px; grid-template-columns:555px 222px; grid-template-rows:auto auto; column-gap:90px; row-gap:0; align-items:start; }
#materialy .copy { display:contents; }
#materialy h2 { grid-column:1; grid-row:1; font-size:clamp(27px,6.2vw,54px); white-space:nowrap; }
#materialy .downloads { grid-column:1; grid-row:2; }
#materialy .section-visual { position:relative; top:0; grid-column:2; grid-row:2; display:flex; height:auto; min-height:0; align-self:stretch; align-items:stretch; justify-content:center; isolation:isolate; }
#materialy .section-visual img { position:absolute; z-index:1; top:0; bottom:0; left:50%; width:auto; max-width:none; height:100%; object-fit:contain; transform:translateX(-50%); }
.prize-list { display:grid; grid-template-columns:260px 145px 165px 180px; justify-content:space-between; align-items:stretch; column-gap:42px; margin-top:40px; text-align:center; }.prize-list article { display:flex; min-height:250px; flex-direction:column; justify-content:space-between; align-items:center; }.prize-label { min-height:82px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }.prize-list img { width:auto; height:auto; max-width:100%; max-height:148px; object-fit:contain; margin-top:auto; }.prize-list strong { color:var(--lime); font-size:36px; line-height:.95; font-weight:800; font-style:italic; }.prize-list span { max-width:190px; margin-top:7px; font-size:17px; line-height:1.12; font-weight:600; }.prize-list .main-prize img { max-height:174px; }.prize-list .main-prize strong { color:var(--yellow); font-size:42px; text-shadow:0 2px 0 rgba(0,0,0,.22); }.prize-list .main-prize span { color:var(--yellow); font-weight:800; }
.handles { display:flex; flex-wrap:wrap; gap:0 7px; color:var(--white); font-size:18px; font-weight:300; }.handles a { color:var(--lime); font-weight:800; text-decoration-color:transparent; text-underline-offset:4px; transition:text-decoration-color .2s; }.handles a:hover,.handles a:focus-visible { color:var(--lime); text-decoration-color:currentColor; }.handles span { color:var(--white); font-weight:300; }
.downloads { list-style:none; padding:0; margin:0; font-size:16px; line-height:1.25; }
.downloads li { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid rgba(247,247,237,.2); }
.downloads li:last-child { border-bottom:0; }
.file-icon { display:flex; width:38px; height:42px; align-items:center; justify-content:center; border:1px solid rgba(239,255,0,.78); border-radius:5px; color:var(--lime); background:rgba(38,123,128,.18); font-size:9px; font-weight:800; letter-spacing:.05em; }
.file-info { display:flex; min-width:0; flex-direction:column; gap:2px; }
.file-info strong { color:var(--white); font-size:19px; font-weight:700; }
.file-info small { overflow:hidden; color:rgba(247,247,237,.72); font-size:12px; font-weight:400; text-overflow:ellipsis; white-space:nowrap; }
.downloads a { color:var(--lime); font-size:15px; font-weight:700; text-decoration:none; white-space:nowrap; transition:transform .18s ease,color .18s ease; }
.downloads a:hover,.downloads a:focus-visible { color:var(--white); transform:translateX(2px); }
.download-pending { color:rgba(247,247,237,.62); font-size:13px; font-weight:600; white-space:nowrap; }
.winners { min-height:527px; }.winners h2 { margin-bottom:35px; }.winner-grid { display:grid; grid-template-columns:repeat(3,236px); justify-content:space-between; gap:0; }.winner-grid article { text-align:center; }.winner-photo { position:relative; width:236px; height:236px; margin-bottom:17px; background:#a5cdcc; }.winner-grid img { width:100%; height:100%; object-fit:cover; background:#a5cdcc; }.winner-photo b { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(38,123,128,.58); font-size:92px; line-height:1; font-weight:800; font-style:italic; }.winner-grid strong,.winner-grid span { display:block; }.winner-grid strong { font-size:21px; line-height:1.15; font-weight:800; }.winner-grid span { margin-top:5px; font-size:18px; line-height:1.2; font-weight:500; }
.winners { min-height:460px; border-bottom:0; }
footer { display:grid; grid-template-columns:1fr auto 1fr; gap:38px; align-items:center; padding-block:45px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent); } footer span { height:1px; background:var(--white); } footer a { display:block; } footer img { width:112px; height:auto; }

/* Refined spacing and restrained depth for isolated campaign visuals. */
#vyhry { padding-inline:75px; }
.prize-list { grid-template-columns:250px 145px 165px 180px; justify-content:center; column-gap:55px; }
.prize-list article { min-height:265px; justify-content:flex-end; }
.prize-image { width:100%; height:174px; display:flex; align-items:center; justify-content:center; }
.prize-label { margin-top:16px; }
.prize-list img { margin:0; }
.hero-product,#background .section-visual img,#strategie .section-visual img { filter:drop-shadow(0 3px 12px rgba(184,226,224,.34)); }
.phone-composite { filter:drop-shadow(0 3px 14px rgba(184,226,224,.3)); }
.prize-list img { filter:drop-shadow(0 2px 11px rgba(184,226,224,.32)); }
.prize-list article:not(.main-prize) img { max-width:70%; max-height:104px; }
#influenceri .section-visual img { filter:drop-shadow(0 2px 10px rgba(184,226,224,.28)); }
.winner-photo { box-shadow:0 2px 18px rgba(184,226,224,.26); }
#materialy .section-visual img { filter:none; }

@media (max-width:760px) {
  body { font-size:14px; }.wrap { width:min(100% - 28px, 560px); }
  .hero { grid-template-columns:1fr 120px; gap:20px; padding:34px 0 28px; }.brand { width:230px; }.campaign-logo { width:230px; }.hero-product { width:auto; max-height:150px; }.meta { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:3px 14px; }
  .dashboard { grid-template-columns:1fr; gap:25px; }.dashboard h2 { font-size:19px; }.stat strong { font-size:27px; }.progress strong { font-size:15px; }
  .case-section,.case-section.with-image,.case-section.image-left,#background,#challenge,#strategie,#mechanika,#vyhry,#gamifikace,#influenceri,#materialy,.winners { min-height:0; display:flex; flex-direction:column; gap:28px; padding:44px 14px; }.case-section.image-left .section-visual { order:0; }.case-section h2 { font-size:40px; }.case-section p { font-size:20px; line-height:1.42; }.case-section blockquote { font-size:20px; }.section-visual img { width:auto; max-width:100%; max-height:320px; }.phone-composite { width:210px; height:370px; }.phone-composite img { width:100%; max-height:none; }.phone-triptych { max-width:100%; }.mini-phone { height:300px; }#materialy .section-visual { top:0; height:auto; }#materialy .section-visual img { position:relative; top:auto; bottom:auto; left:auto; width:222px; max-width:100%; height:auto; transform:none; }
  .prize-list { grid-template-columns:1fr 1fr; gap:38px 24px; }.prize-list article { min-height:245px; }.prize-list img { max-height:126px; }.prize-list .main-prize img { max-height:150px; }.prize-list strong { font-size:32px; }.prize-list .main-prize strong { font-size:38px; }.prize-list span { font-size:16px; }
  .winner-grid { grid-template-columns:repeat(3,1fr); gap:14px; }.winner-photo { width:100%; height:auto; aspect-ratio:1; }.winner-grid strong { font-size:17px; }.winner-grid span { font-size:15px; }.winner-photo b { font-size:68px; }
}
@media (max-width:760px) { .stat strong { font-size:37px; } }
@media (max-width:420px) { .stat strong { font-size:30px; } }
@media (max-width:760px) { .prize-image { height:150px; } }

@media (max-width:760px) {
  .hero { grid-template-columns:minmax(0,230px) minmax(60px,100px) minmax(0,1fr); gap:clamp(10px,2.5vw,20px); }
  .brand { width:100%; }
  .campaign-logo { width:100%; }
  .hero-product { width:100%; max-height:150px; }
  .meta { grid-column:auto; display:block; font-size:clamp(9px,1.9vw,12px); line-height:1.3; }
}

@media (max-width:420px) {
  .hero { grid-template-columns:minmax(0,1.2fr) 58px minmax(0,1fr); gap:6px; }
  .brand { gap:8px; }
  .brand span { padding:6px 4px 5px; font-size:clamp(8px,2.7vw,11px); letter-spacing:.02em; }
  .hero-product { max-height:105px; }
  .meta { font-size:8.5px; line-height:1.2; }
  .meta div { display:block; margin-bottom:2px; }
  .meta dt,.meta dd { display:block; }
}

/* Mobile header: campaign information below the campaign mark, product alongside. */
@media (max-width:760px) {
  .hero { grid-template-columns:minmax(0,230px) minmax(75px,110px); grid-template-rows:auto auto; justify-content:center; align-items:start; gap:14px 22px; }
  .brand { grid-column:1; grid-row:1; width:100%; }
  .hero-product { grid-column:2; grid-row:1/3; width:100%; max-height:190px; align-self:center; justify-self:center; }
  .meta { grid-column:1; grid-row:2; display:block; width:100%; font-size:12px; line-height:1.3; }
  .meta div { display:flex; gap:4px; margin-bottom:2px; }
  .meta dt,.meta dd { display:block; }
}

@media (max-width:420px) {
  .hero { grid-template-columns:minmax(0,190px) 74px; gap:11px 14px; }
  .brand { gap:8px; }
  .brand span { padding:6px 4px 5px; font-size:clamp(8px,2.7vw,11px); }
  .hero-product { max-height:150px; }
  .meta { font-size:10.5px; line-height:1.25; }
  .meta div { display:flex; gap:3px; margin-bottom:2px; }
}

.stat span { font-size:14px; font-weight:400; }
@media (max-width:760px) { .stat span { font-size:11px; font-weight:400; } }
@media (max-width:420px) { .stat span { font-size:9px; } }

@media (max-width:760px) {
  .hero-product { height:100%; max-height:none; align-self:stretch; object-fit:contain; }
  .case-section h2 { text-align:center; }
}

@media (max-width:760px) {
  .hero { grid-template-columns:minmax(0,250px) minmax(105px,135px); gap:20px 28px; padding:46px 0 40px; }
  .hero-product { width:100%; height:100%; }
}

@media (max-width:420px) {
  .hero { grid-template-columns:minmax(0,1.55fr) minmax(90px,.85fr); gap:16px 12px; padding:42px 0 38px; }
  .brand { gap:11px; }
}

@media (max-width:760px) {
  .prize-list { grid-template-columns:1fr; gap:48px; }
  .prize-list article { width:100%; max-width:290px; margin-inline:auto; }
}
@media (max-width:760px) { .stat span { font-size:12px; } }
@media (max-width:420px) { .stat span { font-size:10.5px; } }

@media (max-width:420px) {
  .hero { grid-template-columns:minmax(0,1fr) 90px; }.brand { width:100%; }.brand span { font-size:clamp(11px,3.6vw,14px); padding-inline:8px; }.meta { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:1fr 1fr 1fr; }.stat span { font-size:8px; }.stat strong { font-size:22px; }.progress strong { font-size:12px; }.progress-icon { padding-inline:7px; }.progress:nth-child(1) .progress-icon img { max-width:64px; max-height:42px; }.progress:nth-child(2) .progress-icon img { max-width:38px; max-height:32px; }.progress:nth-child(3) .progress-icon img { max-width:36px; max-height:32px; }.progress:nth-child(4) .progress-icon img { max-width:48px; max-height:28px; }
  .case-section h2 { font-size:36px; }.downloads { font-size:17px; }.winner-grid { grid-template-columns:1fr; gap:28px; }.winner-grid img { max-width:236px; margin-inline:auto; }
}

@media (max-width:760px) { .case-section h2 { font-size:50px; } }
@media (max-width:420px) { .case-section h2 { font-size:46px; } }
@media (max-width:760px) {
  #gamifikace .copy { order:0; text-align:left; }
  #gamifikace .phone-triptych { order:1; display:grid; grid-template-columns:repeat(2,minmax(0,175px)); justify-content:center; width:100%; gap:12px; }
  #gamifikace .mini-phone:first-child,#gamifikace .mini-phone:last-child { grid-column:auto; grid-row:auto; }
  #gamifikace .mini-phone { width:100%; height:auto; aspect-ratio:715/1496; }
}

/* Prominent mobile prize captions, with the bicycle clearly marked as the main prize. */
@media (max-width:760px) {
  .prize-list strong { font-size:44px; line-height:.95; }
  .prize-list span { max-width:270px; font-size:21px; line-height:1.12; }
  .prize-list .main-prize .prize-label { padding:11px 18px 13px; border-radius:14px; background:rgba(38,123,128,.2); }
  .prize-list .main-prize strong { color:var(--white); font-size:54px; }
  .prize-list .main-prize span { color:var(--white); font-size:24px; font-weight:800; }
  .file-info strong { font-size:18px; }
}

/* Progressive section reveal: content remains fully available without JavaScript. */
.motion-ready .case-section .copy,
.motion-ready .case-section > .section-visual,
.motion-ready .winners > h2,
.motion-ready .winners > .winner-grid,
.motion-ready .dashboard > div { opacity:0; transform:translateY(22px); }
.motion-ready .case-section.is-visible .copy,
.motion-ready .case-section.is-visible > .section-visual,
.motion-ready .winners.is-visible > h2,
.motion-ready .winners.is-visible > .winner-grid,
.motion-ready .dashboard.is-visible > div { opacity:1; transform:translateY(0); transition:opacity .5s ease,transform .55s cubic-bezier(.22,1,.36,1); }
.motion-ready .case-section.is-visible > .section-visual,
.motion-ready .winners.is-visible > .winner-grid,
.motion-ready .dashboard.is-visible > div:nth-child(2) { transition-delay:.12s; }

/* Quiet right-edge section navigation. */
.section-nav { position:fixed; z-index:20; top:50%; right:22px; display:flex; flex-direction:column; gap:11px; transform:translateY(-50%); }
.section-nav a { position:relative; width:9px; height:9px; border:1px solid rgba(247,247,237,.72); border-radius:50%; background:rgba(38,123,128,.35); transition:transform .2s ease,background .2s ease,box-shadow .2s ease; }
.section-nav a > span { position:absolute; top:50%; right:18px; width:max-content; padding:5px 8px 4px; border-radius:5px; color:var(--white); background:rgba(38,123,128,.92); font-size:11px; font-weight:600; letter-spacing:.02em; opacity:0; pointer-events:none; transform:translate(6px,-50%); transition:opacity .18s ease,transform .18s ease; }
.section-nav a:hover > span,.section-nav a:focus-visible > span { opacity:1; transform:translate(0,-50%); }
.section-nav a[aria-current="true"] { background:var(--lime); border-color:var(--lime); box-shadow:0 0 0 4px rgba(239,255,0,.12),0 0 9px rgba(239,255,0,.38); transform:scale(1.22); }
.section-nav a:focus-visible { outline:2px solid var(--white); outline-offset:4px; }

/* Small tactile responses for prize items. */
.prize-list article,.prize-list img,.prize-list .prize-label { transition:transform .32s cubic-bezier(.22,1,.36,1),filter .32s ease,color .25s ease; }
@media (hover:hover) {
  .prize-list article:hover { transform:translateY(-5px); }
  .prize-list article:hover img { transform:scale(1.045); filter:drop-shadow(0 5px 15px rgba(184,226,224,.52)); }
  .prize-list article:hover .prize-label { transform:translateY(2px); }
  .prize-list .main-prize:hover img { filter:drop-shadow(0 6px 18px rgba(239,255,0,.22)) drop-shadow(0 3px 12px rgba(184,226,224,.55)); }
}

@media (max-width:1180px) { .section-nav { display:none; } }
@media (max-width:760px) { .parallax-target { translate:none; transition:none; will-change:auto; } }
@media (prefers-reduced-motion:reduce) {
  .motion-ready .case-section .copy,.motion-ready .case-section > .section-visual,.motion-ready .winners > h2,.motion-ready .winners > .winner-grid,.motion-ready .dashboard > div { opacity:1; transform:none; transition:none; }
  .prize-list article,.prize-list img,.prize-list .prize-label { transition:none; }
  .parallax-target { translate:none; transition:none; will-change:auto; }
}

@media (max-width:760px) {
  #materialy h2 { width:100%; max-width:390px; margin-inline:auto; font-size:50px; white-space:normal; text-align:center; }
  #materialy .downloads { width:min(100%,480px); align-self:center; }
  #materialy .section-visual { width:100%; align-self:center; justify-content:center; }
  #materialy .section-visual img { margin-inline:auto; }
}
@media (max-width:420px) {
  #materialy h2 { max-width:340px; font-size:46px; }
}