/* ====================================================================== *
 *  GRAPHIK
 *  Only three faces are installed, so the whole stylesheet uses only these
 *  three weights. That matters: CSS weight matching does NOT simply round
 *  down. A request for 400 resolves UP to 500 (Medium) when no 400 exists,
 *  which would quietly make body copy too heavy - so body is set to 300
 *  explicitly rather than left at the default.
 *
 *      300  Light   - body copy, labels, footer
 *      500  Medium  - small UI (switch labels, cookie buttons)
 *      700  Bold    - headline, lead lines, <strong>, CTA, dialog titles
 *
 *  These are .otf desktop files. Converting them to .woff2 would cut the
 *  download by roughly two thirds; see the note in the handover.
 * ====================================================================== */
@font-face{
  font-family:'Graphik';
  src:url('fonts/GraphikLight.otf') format('opentype');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Graphik';
  src:url('fonts/Graphik-Medium.otf') format('opentype');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Graphik';
  src:url('fonts/Graphik-Bold.otf') format('opentype');
  font-weight:700; font-style:normal; font-display:swap;
}


:root{
  --yg-font: 'Graphik', 'Inter', 'Helvetica Neue', Arial, system-ui, sans-serif;


  --yg-bg:        url("media/bg.jpg");
  --yg-bg-fallback:
      radial-gradient(120% 85% at 88% 12%, #2fb0ff 0%, rgba(47,176,255,0) 46%),
      radial-gradient(105% 75% at  6%  4%, #8a35d8 0%, rgba(138,53,216,0) 46%),
      radial-gradient(120% 105% at 96% 72%, #ff5c1a 0%, rgba(255,92,26,0) 55%),
      radial-gradient(120% 100% at  8% 88%, #ff1d7c 0%, rgba(255,29,124,0) 55%),
      linear-gradient(135deg, #ff2d78 0%, #ff4a3c 58%, #ff7f2f 100%);

  --yg-max:        1100px;   
  --yg-radius:       20px;   
  --yg-orange:    #f8461e;   
  --yg-btn:       #525d70;   
  --yg-btn-hover: #3e4757;
  --yg-ink:       #101010;   
  --yg-body:      #2f2f2f;   
  --yg-muted:     #7c7c7c;   
  --yg-h1:  clamp(36px, 4.6vw, 70px);


  --yg-measure: 486px;
}


*, *::before, *::after{ box-sizing:border-box; }

html{ background:#ff3a63; }          
body{ margin:0; font-family:var(--yg-font); font-weight:300; }

.yg-scan :where(h1, p, dl, dt, dd){ margin:0; padding:0; }
.yg-scan :where(img){ display:block; max-width:100%; height:auto; border:0; }
.yg-scan :where(a){ text-decoration:none; }
.yg-scan :where(strong, b){ font-weight:700; }


.yg-scan{
  font-family:var(--yg-font);
  color:#fff;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  background-image: var(--yg-bg), var(--yg-bg-fallback);
  background-size: cover, cover;
  background-position: top;
  background-repeat: no-repeat, no-repeat;
  padding: 34px 20px 0;
}

.yg-scan__inner{ max-width:var(--yg-max); margin:0 auto; }

/* ---- top bar ---- */
.yg-scan__top{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:0 4px 30px;
}
.yg-scan img.yg-scan__logo{ height:42px; width:auto; }
.yg-scan img.yg-scan__flag{ width:34px; height:auto; border-radius:3px; }


.yg-card{
  background:#fff;
  border-radius:var(--yg-radius);
  padding:64px 78px;
  display:grid;
  grid-template-columns: minmax(0,1fr) 300px;
  gap:56px;
  align-items:stretch;
}

.yg-card__title{
  font-size:var(--yg-h1);
  line-height:.98;
  letter-spacing:-.025em;
  font-weight:700;
  color:var(--yg-ink);
  margin-bottom:1em;
}

/* ---- icon + bold lead line ---- */
.yg-lead{
  display:flex; align-items:center; gap:11px;
  font-size:19px; font-weight:700; color:var(--yg-ink);
  margin-bottom:14px;
}
.yg-scan img.yg-lead__ico{ width:26px; height:26px; flex:0 0 26px; }

.yg-text{
  font-size:18px; line-height:1.5; color:var(--yg-body);
  max-width:var(--yg-measure);
}

/* ---- prizes ---- */

.yg-prizes{ margin:2px 0 34px; max-width:var(--yg-measure); }
.yg-scan img.yg-prizes__img{
  width:min(340px,100%); height:auto; margin:0 auto -15px;
}
.yg-prizes__list{
  display:grid;
  grid-template-columns:auto auto;
  justify-content:center;
  column-gap:.45em;
  row-gap:3px;
  font-size:19px; line-height:1.35;
}
.yg-prizes__list dt{ text-align:right; color:var(--yg-muted); font-weight:300; }
.yg-prizes__list dd{ text-align:left;  color:var(--yg-ink);   font-weight:700; }

.yg-block + .yg-block{ margin-top:30px; }

/* ---- CTA ---- */
.yg-btn{
  display:inline-block;
  margin-top:34px;
  padding:19px 44px;
  border-radius:999px;
  background:var(--yg-btn);
  color:#fff;
  font-size:19px; font-weight:700; letter-spacing:.005em;
  text-align:center;
  transition:background-color .18s ease, transform .18s ease;
}
.yg-btn:hover, .yg-btn:focus{ background:var(--yg-btn-hover); transform:translateY(-1px); color:#fff; }
.yg-btn:focus-visible{ outline:3px solid var(--yg-orange); outline-offset:3px; }

/* ---- fruit column ---- */
.yg-card__media{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:0;
}
.yg-scan .yg-card__media img{ width:100%; height:auto; }
.yg-scan .yg-card__media img + img{ margin-top:-3%; }

/* ====================================================================== *
 *  FOOTER
 * ====================================================================== */
.yg-foot{
  margin-top:52px;
  padding:34px 0 30px;
}
.yg-foot__inner{ max-width:var(--yg-max); margin:0 auto; padding:0 52px; }

.yg-foot__row{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:20px; margin-bottom:26px;
}
.yg-scan .yg-foot__social img{ width:38px; height:38px; }
.yg-foot__apps{ display:flex; align-items:center; flex-wrap:wrap; gap:14px; }
.yg-scan .yg-foot__apps img{ height:46px; width:auto; }

.yg-foot__about{

  font-size:14px; line-height:1.55; color:rgba(255,255,255,.92);
  max-width:64em; margin-bottom:22px;
}

.yg-foot__links{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:6px 14px; font-size:14px; margin-bottom:20px;
}
.yg-foot__links a{ color:#fff; opacity:.92; }
.yg-foot__links a:hover{ opacity:1; text-decoration:underline; }
.yg-foot__links .yg-sep{ opacity:.55; }
.yg-foot__links .yg-underline{ text-decoration:underline; }

.yg-foot__copy{ font-size:13px; color:rgba(255,255,255,.85); }


.js .yg-reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .75s ease,
             transform .75s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d, 0ms);
}

.js .yg-reveal--pop{ transform:translateY(10px) scale(.9); }

.js .yg-reveal.is-in{ opacity:1; transform:none; }

.yg-scan__top.yg-reveal{ --d:   0ms; }
.yg-card.yg-reveal     { --d:  60ms; }

.yg-card__content > .yg-reveal:nth-child(1){ --d:260ms; }  
.yg-card__content > .yg-reveal:nth-child(2){ --d:340ms; }  
.yg-card__content > .yg-reveal:nth-child(3){ --d:420ms; }  
.yg-card__content > .yg-reveal:nth-child(4){ --d:500ms; }  
.yg-card__content > .yg-reveal:nth-child(5){ --d:580ms; }  

.yg-card__media > .yg-reveal:nth-child(1){ --d:340ms; }    
.yg-card__media > .yg-reveal:nth-child(2){ --d:440ms; }    
.yg-card__media > .yg-reveal:nth-child(3){ --d:540ms; }    


.yg-foot__row.yg-reveal  { --d:  0ms; }
.yg-foot__about.yg-reveal{ --d: 90ms; }
.yg-foot__links.yg-reveal{ --d:160ms; }
.yg-foot__copy.yg-reveal { --d:220ms; }


p.yg-text.small-txt {
    font-size: 12px;
    margin-top: 20px;
}


/* ====================================================================== *
 *  RESPONSIVE
 * ====================================================================== */
@media (max-width:1000px){
  .yg-card{ padding:52px 44px; gap:40px; grid-template-columns:minmax(0,1fr) 240px; }
  .yg-foot__inner{ padding:0 24px; }
}

@media (max-width:820px){
  .yg-scan{ padding-top:24px; }
  .yg-card{
    grid-template-columns:1fr;
    padding:44px 30px;
    gap:36px;
    text-align:center;
  }
  .yg-card__title{ font-size:clamp(34px,7.5vw,52px); }
  .yg-card__title br{ display:none; }         
  .yg-lead{ justify-content:center; }
  .yg-text, .yg-prizes{ margin-left:auto; margin-right:auto; }
  .yg-card__media{ flex-direction:row; justify-content:center; gap:0; }
  .yg-scan .yg-card__media img{ width:34%; }
  .yg-scan .yg-card__media img + img{ margin-top:0; margin-left:-2%; }
  .yg-foot__row{ justify-content:center; }
  .yg-foot__links{ justify-content:center; }
  .yg-foot__about, .yg-foot__copy{ text-align:center; }
}

@media (max-width:520px){
  .yg-scan{ padding-left:14px; padding-right:14px; }
  .yg-scan img.yg-scan__logo{ height:34px; }
  .yg-card{ padding:34px 20px; border-radius:30px; }
  .yg-lead{ font-size:17px; }
  .yg-text{ font-size:16px; }
  .yg-prizes__list{ font-size:17px; grid-template-columns:1fr; justify-items:center; row-gap:0; }
  .yg-prizes__list dt{ text-align:center; }
  .yg-prizes__list dd{ text-align:center; margin-bottom:8px; }
  .yg-btn{ display:block; padding:17px 24px; }
  .yg-scan .yg-foot__apps img{ height:38px; }
}

@media (prefers-reduced-motion:reduce){
  .yg-scan *{ transition:none !important; }

  .js .yg-reveal{ opacity:1 !important; transform:none !important; }
}


.cc, .cc-modal{
  --cc-font: 'Graphik', 'Inter', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --cc-ink:      #101010;
  --cc-body:     #43474f;
  --cc-line:     #e3e5ea;
  --cc-primary:  #525d70;
  --cc-primary-h:#3e4757;
  --cc-accent:   #f8461e;
}



.cc{
  position:fixed; inset:auto 0 0 0; z-index:9999;
  font-family:var(--cc-font); font-weight:300;
  background:#fff;
  border-top:1px solid var(--cc-line);
  box-shadow:0 -8px 40px rgba(16,18,24,.16);
  padding:20px;
  animation:cc-up .35s cubic-bezier(.16,1,.3,1) both;
}
@keyframes cc-up{ from{ transform:translateY(100%); } to{ transform:none; } }

.cc__inner{
  max-width:1100px; margin:0 auto;
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
}
.cc__copy{ flex:1 1 420px; min-width:0; }
.cc__title{
  margin:0 0 6px; font-size:17px; font-weight:700; color:var(--cc-ink);
  line-height:1.25;
}
.cc__text{
  margin:0; font-size:14px; line-height:1.55; color:var(--cc-body);
  max-width:70ch;
}
.cc__text a{ color:var(--cc-ink); text-decoration:underline; }
.cc__text a:hover{ color:var(--cc-accent); }

.cc__actions{
  flex:0 0 auto;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}

/* ---- buttons ---- */
.cc-btn{
  font:inherit; font-size:15px; font-weight:500;
  padding:13px 24px; border-radius:999px; border:2px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}

.cc-btn--primary{ background:var(--cc-primary); color:#fff; }
.cc-btn--primary:hover{ background:var(--cc-primary-h); }
.cc-btn--ghost{ background:transparent; color:var(--cc-ink); border-color:var(--cc-line); }
.cc-btn--ghost:hover{ border-color:var(--cc-primary); }
.cc-btn:focus-visible{ outline:3px solid var(--cc-accent); outline-offset:2px; }

/* ---- settings dialog ---- */
.cc-modal{ position:fixed; inset:0; z-index:10000; font-family:var(--cc-font); font-weight:300; }
.cc-modal__backdrop{ position:absolute; inset:0; background:rgba(16,18,24,.55); }
.cc-modal__panel{
  position:relative; z-index:1;
  width:min(620px, calc(100% - 32px));
  max-height:min(88vh, 760px);
  margin:max(16px, 6vh) auto;
  background:#fff; border-radius:20px; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 24px 70px rgba(16,18,24,.35);
  animation:cc-pop .3s cubic-bezier(.16,1,.3,1) both;
}
@keyframes cc-pop{ from{ opacity:0; transform:translateY(14px) scale(.985); } to{ opacity:1; transform:none; } }

.cc-modal__head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 24px; border-bottom:1px solid var(--cc-line);
}
.cc-modal__title{ margin:0; font-size:19px; font-weight:700; color:var(--cc-ink); }
.cc-modal__x{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%;
  border:0; background:#f1f2f5; color:var(--cc-ink);
  font-size:22px; line-height:1; cursor:pointer;
}
.cc-modal__x:hover{ background:#e3e5ea; }
.cc-modal__x:focus-visible{ outline:3px solid var(--cc-accent); outline-offset:2px; }

.cc-modal__body{ padding:8px 24px 4px; overflow-y:auto; -webkit-overflow-scrolling:touch; }

.cc-cat{ padding:18px 0; border-bottom:1px solid var(--cc-line); }
.cc-cat__head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.cc-cat__name{ margin:0; font-size:16px; font-weight:700; color:var(--cc-ink); }
.cc-cat__desc{ margin:8px 0 0; font-size:14px; line-height:1.55; color:var(--cc-body); }

.cc-modal__note{
  margin:18px 0 4px; font-size:13px; line-height:1.55; color:var(--cc-body);
}
.cc-modal__note a{ color:var(--cc-ink); }

.cc-modal__foot{
  display:flex; gap:10px; flex-wrap:wrap;
  padding:18px 24px; border-top:1px solid var(--cc-line); background:#fafbfc;
}
.cc-modal__foot .cc-btn{ flex:1 1 auto; }

/* ---- switch ---- */
.cc-switch{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:10px;
  cursor:pointer; user-select:none;
}
.cc-switch input{
  position:absolute; opacity:0; width:44px; height:26px; margin:0; cursor:pointer;
}
.cc-switch__ui{
  position:relative; width:44px; height:26px; flex:0 0 44px;
  border-radius:999px; background:#c9ccd4; transition:background-color .18s ease;
}
.cc-switch__ui::after{
  content:""; position:absolute; top:3px; left:3px;
  width:20px; height:20px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform .18s ease;
}
.cc-switch input:checked + .cc-switch__ui{ background:#2f9e5f; }
.cc-switch input:checked + .cc-switch__ui::after{ transform:translateX(18px); }
.cc-switch input:disabled + .cc-switch__ui{ background:#9aa0ad; cursor:not-allowed; }
.cc-switch input:focus-visible + .cc-switch__ui{ outline:3px solid var(--cc-accent); outline-offset:3px; }
.cc-switch__text{ font-size:13px; font-weight:500; color:var(--cc-body); white-space:nowrap; }


.cc-locked, .cc-locked body{ overflow:hidden; }

@media (max-width:760px){
  .cc{ padding:16px; max-height:85vh; overflow-y:auto; }
  .cc__inner{ gap:16px; }
  .cc__actions{ width:100%; }
  .cc__actions .cc-btn{ flex:1 1 100%; }
  .cc-cat__head{ flex-wrap:wrap; gap:10px; }
  .cc-modal__foot{ flex-direction:column; }
}

@media (prefers-reduced-motion:reduce){
  .cc, .cc-modal__panel{ animation:none !important; }
  .cc-btn, .cc-switch__ui, .cc-switch__ui::after{ transition:none !important; }
}