/* --- База за самостоятелен сайт (извън WordPress) ---
   В WordPress темата задаваше margin:0 на <body>. Тук го задаваме сами,
   за да няма бял кант около секциите на цял екран. */
html,body{margin:0;padding:0;background:#FFFFFF}

/* ============================================================
   YOANA CLUB CARD — landing page
   Цветовете са извлечени директно от логото на Бензиностанции Йоана.
   ============================================================ */

:root{
  /* Одобрената гама: зелено и оранжево от логото, тъмни секции. */
  --green-900:#0A3A1B;
  --green-800:#0E4C22;
  --green-700:#17712A;   /* зеленото на логото */
  --green-500:#2E8C3E;
  --green-050:#EEF5EE;
  --green-100:#DCEBDD;

  --orange:#F47B1E;      /* оранжевото на логото */
  --orange-700:#DE6710;  /* hover */
  --orange-600:#DE6710;  /* надзаглавия и връзки */
  --orange-050:#FEF1E4;

  --ink:#152018;
  --body:#4A5A50;
  --muted:#7B8A80;
  --line:#E3E9E3;

  --paper:#FFFFFF;
  --paper-2:#F6F8F5;
  --surface:#FFFFFF;

  --gold:#E7B23A;
  --gold-deep:#C9992F;

  --wrap:1180px;
  --r:16px;
  --r-lg:24px;
  --shadow:0 1px 2px rgba(10,58,27,.05), 0 12px 32px -12px rgba(10,58,27,.16);
  --shadow-lg:0 2px 6px rgba(10,58,27,.06), 0 28px 60px -22px rgba(10,58,27,.30);

  --header-h:120px;
}

#yc,#yc *,#yc *::before,#yc *::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:140px}
#yc{
  margin:0;
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:17px;line-height:1.62;color:var(--body);background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
#yc img{max-width:100%;height:auto;display:block}
#yc a{color:inherit}
#yc button{font:inherit}
#yc h1,#yc h2,#yc h3,#yc h4{color:var(--ink);line-height:1.14;margin:0;letter-spacing:-.02em;font-weight:800}
#yc p{margin:0}
/* нулира стилове, които темата може да наложи върху връзки и бутони */
#yc a,#yc button{text-transform:none;letter-spacing:normal;box-shadow:none;text-shadow:none}

#yc .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
#yc .section{padding:88px 0}
#yc .section--tight{padding:64px 0}
#yc .bg-soft{background:var(--paper-2)}
#yc .bg-mint{background:var(--green-050)}

#yc .eyebrow{
  font-size:.75rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--orange-600);margin:0 0 14px;
}
#yc .eyebrow--light{color:var(--gold)}

#yc h1{font-size:clamp(2rem,4.6vw,3.4rem)}
#yc h2{font-size:clamp(1.65rem,3.4vw,2.5rem)}
#yc h3{font-size:1.15rem;font-weight:800}

#yc .lead{font-size:clamp(1.02rem,1.6vw,1.15rem);max-width:60ch}
#yc .section-head{max-width:44rem;margin-bottom:44px}
#yc .section-head p{margin-top:16px}

/* ------------------------------------------------------------
   Бутони
   ------------------------------------------------------------ */
#yc .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:999px;border:2px solid transparent;
  font-weight:800;font-size:1rem;text-decoration:none;cursor:pointer;
  transition:transform .15s ease, background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
  line-height:1.2;
}
#yc .btn:hover{transform:translateY(-2px)}
#yc .btn--orange{background:var(--orange);color:#fff;box-shadow:0 10px 24px -10px rgba(244,123,30,.55)}
#yc .btn--orange:hover{background:var(--orange-700)}
#yc .btn--green{background:var(--green-700);color:#fff;box-shadow:0 10px 24px -10px rgba(23,113,42,.5)}
#yc .btn--green:hover{background:var(--green-800)}
#yc .btn--ghost{background:transparent;color:var(--green-800);border-color:var(--green-700)}
#yc .btn--ghost:hover{background:var(--green-050)}
#yc .btn--sm{padding:11px 20px;font-size:.92rem}
#yc .btn--wide{width:100%}

/* Бутони към магазините */
#yc .stores{display:flex;flex-wrap:wrap;gap:12px}
#yc .store{
  display:inline-flex;align-items:center;gap:12px;text-decoration:none;
  padding:11px 22px 11px 18px;border-radius:14px;
  background:var(--surface);color:var(--ink);border:1px solid rgba(0,0,0,.08);
  box-shadow:0 8px 22px -12px rgba(0,0,0,.45);
  transition:transform .15s ease, box-shadow .15s ease;
}
#yc .store:hover{transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(0,0,0,.5)}
#yc .store svg{flex:none}
#yc .store span{display:block}
#yc .store .s1{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:#6B7A70;font-weight:700;line-height:1.3}
#yc .store .s2{font-size:1.02rem;font-weight:800;line-height:1.2;letter-spacing:-.01em}
#yc .stores--dark .store{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#fff;backdrop-filter:blur(6px)}
#yc .stores--dark .store .s1{color:rgba(255,255,255,.72)}
#yc .stores--dark .store:hover{background:rgba(255,255,255,.12)}

/* ------------------------------------------------------------
   БЛОК 1 — Хедър
   ------------------------------------------------------------ */
#yc .header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
  transition:transform .28s ease;
}
#yc .header--hidden{transform:translateY(-100%)}
#yc .header__in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--header-h)}
#yc .header__logo{display:flex;align-items:center;flex:none}
#yc .header__logo img{height:96px;width:auto}
#yc .header .btn{white-space:nowrap}

/* Навигация в хедъра */
#yc .nav{display:flex;align-items:center;gap:4px}
#yc .nav a{
  text-decoration:none;font-weight:700;font-size:.9rem;color:var(--body);
  padding:9px 13px;border-radius:999px;white-space:nowrap;
  transition:color .15s ease, background-color .15s ease;
}
#yc .nav a:hover{color:var(--green-700);background:var(--green-050)}
/* CTA бутонът е <a> и вътре в .nav — нужна е по-висока специфичност */
#yc .nav a.btn{margin-left:12px;padding:12px 22px;font-size:.92rem;color:#fff;background:var(--orange)}
#yc .nav a.btn:hover{color:#fff;background:var(--orange-700)}

/* Бургер — вижда се само под 1024px */
#yc .burger{
  display:none;width:46px;height:46px;border:0;background:transparent;cursor:pointer;
  position:relative;border-radius:12px;flex:none;
}
#yc .burger:hover{background:var(--green-050)}
#yc .burger span,#yc .burger::before,#yc .burger::after{
  content:"";position:absolute;left:12px;width:22px;height:2.5px;border-radius:2px;
  background:var(--green-800);transition:transform .22s cubic-bezier(.16,1,.3,1), top .22s cubic-bezier(.16,1,.3,1), opacity .15s ease;
}
#yc .burger span{top:22px}
#yc .burger::before{top:15px}
#yc .burger::after{top:29px}
#yc .burger[aria-expanded="true"] span{opacity:0}
#yc .burger[aria-expanded="true"]::before{top:22px;transform:rotate(45deg)}
#yc .burger[aria-expanded="true"]::after{top:22px;transform:rotate(-45deg)}

/* ------------------------------------------------------------
   БЛОК 2 — Hero
   ------------------------------------------------------------ */
#yc .hero{
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(900px 520px at 78% 12%, rgba(244,123,30,.28), transparent 62%),
    radial-gradient(700px 480px at 6% 88%, rgba(46,140,62,.42), transparent 60%),
    linear-gradient(165deg, #114F26 0%, #0A3A1B 58%, #072B14 100%);
}
#yc .hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:100% 44px;
  -webkit-mask-image:linear-gradient(to bottom, #000, transparent 70%);
  mask-image:linear-gradient(to bottom, #000, transparent 70%);
}
/* Три елемента: текст, телефон, бутони.
   Desktop — текстът и бутоните в лявата колона, телефонът в дясната.
   Мобилно — телефонът застава между текста и бутоните. */
#yc .hero__in{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  grid-template-areas:
    "head  media"
    "cta   media";
  column-gap:56px;
  align-content:center;
  padding:72px 0 84px;
}
#yc .hero__head{grid-area:head}
#yc .hero__media{grid-area:media;align-self:center}
#yc .hero__cta{grid-area:cta}
#yc .hero h1{color:#fff;font-size:clamp(2.05rem,4.4vw,3.45rem);max-width:15ch}
#yc .hero h1 em{font-style:normal;color:var(--gold)}
#yc .hero__sub{color:rgba(255,255,255,.88);font-size:clamp(1.02rem,1.5vw,1.15rem);max-width:46ch;margin-top:20px}
#yc .hero__cta{margin-top:32px}
#yc .hero__micro{
  display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px;
  font-size:.86rem;color:rgba(255,255,255,.72);font-weight:600;
}
#yc .hero__micro span{display:inline-flex;align-items:center;gap:7px}
#yc .hero__micro span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}

/* QR — скрит навсякъде; показва се само от 1024px нагоре (в медия заявката долу).
   Плочката под кода остава чисто бяла, за да го хващат камерите. */
#yc .hero__qr{display:none}

#yc .phone{
  position:relative;margin-inline:auto;width:min(300px,86%);
  border-radius:38px;padding:11px;background:#0C1A11;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.1) inset;
}
#yc .phone img{border-radius:28px;display:block;width:100%}
#yc .phone__glow{
  position:absolute;inset:-14% -18%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side, rgba(244,123,30,.34), transparent 72%);
  filter:blur(12px);
}

/* Лента с факти — бели полета, разделени с косъмни линии вместо плътен цвят */
#yc .strip{background:var(--green-800);color:#fff}
#yc .strip__in{display:grid;grid-template-columns:repeat(4,1fr)}
#yc .strip__i{position:relative;padding:26px 20px;text-align:center}
#yc .strip__i + .strip__i::before{
  content:"";position:absolute;left:0;top:24%;bottom:24%;width:1px;background:rgba(255,255,255,.16);
}
#yc .strip__i b{display:block;font-size:1.3rem;font-weight:800;color:#fff;letter-spacing:-.02em}
#yc .strip__i span{display:block;font-size:.8rem;color:rgba(255,255,255,.72);margin-top:4px;font-weight:600}

/* ------------------------------------------------------------
   БЛОК 3 — Калкулатор
   ------------------------------------------------------------ */
#yc .calc{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);overflow:hidden;
  display:grid;grid-template-columns:1.05fr .95fr;
}
#yc .calc__left{padding:36px}
#yc .calc__right{
  background:linear-gradient(160deg,#114F26,#072B14);color:#fff;
  padding:36px;display:flex;flex-direction:column;justify-content:center;
}

/* Две колони с minmax(0,1fr): при обикновено 1fr колоната не може да се
   свие под ширината на текста и по-дългият надпис разширява своя бутон. */
#yc .tabs{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:5px;
  background:var(--paper-2);border-radius:999px;border:1px solid var(--line);
  width:100%;margin:0;
}
#yc .tabs .tab{
  display:flex;align-items:center;justify-content:center;text-align:center;
  width:100%;min-width:0;max-width:none;margin:0;padding:13px 8px;
  border:0;border-radius:999px;background:transparent;
  font-family:inherit;font-weight:800;font-size:.92rem;line-height:1.2;
  text-transform:none;letter-spacing:normal;text-decoration:none;box-shadow:none;
  color:var(--body);cursor:pointer;transition:.15s;
}
#yc .tabs .tab[aria-selected="true"]{background:var(--green-700);color:#fff;box-shadow:0 6px 16px -8px rgba(23,113,42,.65)}

#yc .slider-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:32px 0 6px}
#yc .slider-head label{font-weight:700;color:var(--ink);font-size:.95rem}
#yc .slider-val{font-size:1.9rem;font-weight:800;color:var(--green-700);letter-spacing:-.03em;line-height:1}
#yc .slider-val small{font-size:1rem;color:var(--muted);font-weight:700;margin-left:2px}

#yc input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:34px;background:transparent;cursor:pointer;margin:6px 0 0;
}
#yc input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:999px;background:var(--track,#E3E9E3)}
#yc input[type=range]::-moz-range-track{height:10px;border-radius:999px;background:#E3E9E3}
#yc input[type=range]::-moz-range-progress{height:10px;border-radius:999px;background:var(--orange)}
#yc input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;
  background:#fff;border:4px solid var(--orange);margin-top:-9px;
  box-shadow:0 4px 12px rgba(0,0,0,.22);transition:transform .12s ease;
}
#yc input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid var(--orange);
  box-shadow:0 4px 12px rgba(0,0,0,.22);
}
#yc input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12)}
#yc input[type=range]:focus-visible{outline:none}
#yc input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(244,123,30,.32)}

#yc .slider-wrap{position:relative;padding-top:38px}
#yc .slider-bubble{
  position:absolute;top:0;left:0;transform:translateX(-50%);
  background:var(--green-700);color:#fff;font-weight:800;font-size:.82rem;
  padding:5px 11px;border-radius:8px;white-space:nowrap;pointer-events:none;
  box-shadow:0 4px 12px -2px rgba(0,0,0,.25);transition:opacity .15s;
}
#yc .slider-bubble::after{
  content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--green-700);
}
#yc .slider-wrap input[type=range]{margin-top:0}
#yc .ticks{position:relative;height:1.1em;font-size:.75rem;color:var(--muted);font-weight:700;margin:6px 14px 0}
#yc .ticks span{position:absolute;transform:translateX(-50%);white-space:nowrap}
#yc .ticks span:first-child{transform:none;margin-left:-14px}
#yc .ticks span:last-child{transform:translateX(-100%);margin-right:-14px}
#yc .calc__note{margin-top:26px;font-size:.82rem;color:var(--muted);line-height:1.6;border-top:1px solid var(--line);padding-top:18px}

#yc .badge-tier{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  padding:7px 16px 7px 12px;border-radius:999px;font-weight:800;font-size:.82rem;
  letter-spacing:.1em;text-transform:uppercase;
}
#yc .badge-tier::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor}
#yc .t-standard{background:rgba(255,255,255,.12);color:#CFE3D2}
#yc .t-silver{background:rgba(215,228,231,.18);color:#DCE9EC}
#yc .t-gold{background:rgba(231,178,58,.18);color:var(--gold)}

#yc .calc__save{margin-top:22px}
#yc .calc__save .k{font-size:.9rem;color:rgba(255,255,255,.7);font-weight:600}
#yc .calc__save .v{font-size:clamp(2.6rem,6vw,3.5rem);font-weight:800;color:#fff;letter-spacing:-.04em;line-height:1.02}
#yc .calc__save .v small{font-size:.42em;font-weight:700;color:rgba(255,255,255,.62);letter-spacing:0}
#yc .calc__month{margin-top:8px;font-size:1.05rem;color:var(--gold);font-weight:800}
#yc .calc__break{
  margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);
  display:grid;gap:8px;font-size:.9rem;color:rgba(255,255,255,.8);
}
#yc .calc__break div{display:flex;justify-content:space-between;gap:14px}
#yc .calc__break b{color:#fff;font-weight:800;white-space:nowrap}
#yc .calc__right .btn{margin-top:26px}

/* ------------------------------------------------------------
   БЛОК 4 — Три стъпки
   ------------------------------------------------------------ */
#yc .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:s}
#yc .step{position:relative;padding-top:22px;border-top:3px solid var(--green-100)}
#yc .step::before{
  counter-increment:s;content:"0" counter(s);
  position:absolute;top:-16px;left:0;background:var(--paper);padding-right:12px;
  font-size:.9rem;font-weight:800;color:var(--orange);letter-spacing:.08em;
}
#yc .step h3{margin-bottom:8px}
#yc .step p{font-size:.98rem}

/* ------------------------------------------------------------
   БЛОК 5 — Нива
   ------------------------------------------------------------ */
#yc .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
#yc .tier{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 26px;display:flex;flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#yc .tier:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
#yc .tier--gold{border-color:var(--gold);box-shadow:0 24px 50px -26px rgba(201,153,47,.55)}
#yc .tier__flag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--gold);color:#3B2A05;font-size:.72rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;padding:6px 14px;border-radius:999px;white-space:nowrap;
}
#yc .tier__name{font-size:1.05rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--green-700)}
#yc .tier--gold .tier__name{color:#A9791A}
#yc .tier__range{font-size:.88rem;color:var(--muted);font-weight:700;margin-top:4px}
#yc .tier__hero{margin:22px 0 4px;display:flex;align-items:baseline;gap:6px}
#yc .tier__hero b{font-size:2.5rem;font-weight:800;color:var(--ink);letter-spacing:-.04em;line-height:1}
#yc .tier__hero span{font-size:.92rem;color:var(--muted);font-weight:700}
#yc .tier ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px;border-top:1px solid var(--line);padding-top:18px}
#yc .tier li{position:relative;padding-left:26px;font-size:.95rem}
/* Пояснението как се сменя нивото — под трите карти */
#yc .tier-note{
  margin-top:28px;padding:18px 22px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line);
  font-size:.94rem;line-height:1.6;color:var(--body);
}
#yc .tier-note b{color:var(--ink)}

/* Давността на точките */
#yc .expiry{
  margin-top:22px;padding-top:20px;border-top:1px dashed var(--line);
  font-size:.86rem;color:var(--muted);line-height:1.6;
}
#yc .expiry b{color:var(--body)}

#yc .inline-link{
  color:var(--orange-600);font-weight:700;text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px;
  border-radius:3px;transition:color .15s;
}
#yc .inline-link:hover{color:var(--orange-700)}
#yc .inline-link:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
#yc .expiry:target{animation:hl 1.6s ease}
@keyframes hl{0%,60%{background:var(--orange-050)}100%{background:transparent}}

#yc .tier li::before{
  content:"";position:absolute;left:0;top:.52em;width:14px;height:8px;
  border-left:2.5px solid var(--orange);border-bottom:2.5px solid var(--orange);
  transform:rotate(-45deg);border-radius:1px;
}

/* ------------------------------------------------------------
   БЛОК 5б — Колко се спестява за година
   ------------------------------------------------------------ */
#yc .savings{
  color:#fff;
  background:
    radial-gradient(760px 420px at 82% 0%, rgba(244,123,30,.24), transparent 66%),
    linear-gradient(170deg,#114F26,#072B14);
}
#yc .savings .section-head h2{color:#fff}
#yc .savings .lead{color:rgba(255,255,255,.82)}

#yc .savings__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
#yc .sv{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:18px;padding:26px 22px;
  transition:transform .18s ease, border-color .18s ease;
}
#yc .sv:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.34)}
#yc .sv--gold{border-color:rgba(231,178,58,.45);background:rgba(231,178,58,.10)}
#yc .sv--gold:hover{border-color:rgba(231,178,58,.75)}

#yc .sv__l{
  display:block;font-size:.74rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.68);
}
#yc .sv__v{
  font-size:clamp(1.9rem,2.6vw,2.4rem);font-weight:800;color:var(--gold);
  letter-spacing:-.03em;line-height:1;margin:14px 0 0;
}
#yc .sv__v small{font-size:.4em;font-weight:700;color:rgba(255,255,255,.7);letter-spacing:0;white-space:nowrap}
#yc .sv__m{margin-top:6px;font-size:.92rem;font-weight:700;color:#fff}
#yc .sv__b{
  margin-top:14px;padding-top:13px;border-top:1px solid rgba(255,255,255,.15);
  font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.7);
}

#yc .savings__note{margin-top:26px;font-size:.84rem;line-height:1.6;color:rgba(255,255,255,.6);max-width:74ch}
#yc .savings__cta{margin-top:28px}

/* ------------------------------------------------------------
   БЛОК 6 — Бонус точки
   ------------------------------------------------------------ */
#yc .points{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
#yc .rate{
  display:inline-flex;align-items:center;gap:14px;
  background:var(--green-800);color:#fff;padding:16px 26px;border-radius:14px;
  font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin:22px 0 24px;
}
#yc .rate span{color:var(--gold)}
#yc .plist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
#yc .plist li{position:relative;padding-left:30px;font-weight:600;color:var(--ink)}
#yc .plist li::before{
  content:"";position:absolute;left:0;top:.36em;width:18px;height:18px;border-radius:50%;
  background:var(--orange-050);border:2px solid var(--orange);
}
#yc .plist li::after{content:"";position:absolute;left:6px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--orange)}

#yc .example{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px;box-shadow:var(--shadow);
}
#yc .example__t{font-size:.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
#yc .example__row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
#yc .chip{
  background:var(--green-050);border:1px solid var(--green-100);border-radius:12px;
  padding:12px 16px;font-weight:700;color:var(--ink);font-size:.95rem;
}
#yc .arrow{color:var(--orange);font-weight:800;font-size:1.2rem}
#yc .example__out{
  margin-top:22px;padding-top:20px;border-top:1px dashed var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
#yc .example__out b{font-size:2rem;font-weight:800;color:var(--green-700);letter-spacing:-.03em}
#yc .example__out span{font-size:.86rem;color:var(--muted);font-weight:600}

/* ------------------------------------------------------------
   БЛОК 7 — Какво има в приложението
   ------------------------------------------------------------ */
#yc .feat{display:grid;grid-template-columns:1fr .9fr;gap:60px;align-items:center}
#yc .flist{list-style:none;margin:0;padding:0;display:grid;gap:22px}
#yc .flist li{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start}
#yc .ficon{
  width:44px;height:44px;border-radius:12px;background:var(--green-050);
  display:grid;place-items:center;color:var(--green-700);
}
#yc .flist h3{font-size:1.02rem;margin-bottom:3px}
#yc .flist p{font-size:.95rem}
#yc .shots{display:flex;gap:18px;justify-content:center;align-items:flex-start}
#yc .shot{
  border-radius:26px;padding:8px;background:#0C1A11;box-shadow:var(--shadow-lg);
  width:calc(50% - 9px);max-width:230px;
}
#yc .shot img{border-radius:19px;width:100%}
#yc .shot:first-child{transform:translateY(-16px) rotate(-2deg)}
#yc .shot:last-child{transform:translateY(16px) rotate(2deg)}

/* ------------------------------------------------------------
   БЛОК 8 — Гориво и качество
   ------------------------------------------------------------ */
#yc .quality{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
#yc .quality__img{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3}
#yc .quality__img img{width:100%;height:100%;object-fit:cover}
#yc .tag-bardahl{
  display:inline-flex;align-items:center;gap:11px;margin-top:26px;
  border:2px solid var(--green-700);border-radius:999px;padding:10px 20px 10px 14px;
  font-weight:800;color:var(--green-800);font-size:.92rem;
}
#yc .tag-bardahl svg{flex:none;color:var(--orange)}

/* ------------------------------------------------------------
   БЛОК 9 — Обекти
   ------------------------------------------------------------ */
#yc .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:44px}
#yc .gallery img{border-radius:var(--r);width:100%;aspect-ratio:500/290;object-fit:cover}

/* Управление на галерията. На desktop трите снимки се виждат наведнъж,
   затова стрелките и точките стоят скрити и се включват само под 760px,
   където галерията става плъзгаща. */
#yc .gallery-view{position:relative}
#yc .gal-nav{display:none}
#yc .gal-dots{display:none}
#yc .loc{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
#yc .map{
  border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow);background:var(--green-050);position:sticky;top:96px;
}
#yc #yoanaMap{display:block;width:100%;height:460px;background:var(--green-050)}
#yc #yoanaMap .leaflet-container{font:inherit}
/* оранжев капкообразен маркер в стила на бранда */
#yc .yoana-pin span{
  display:block;width:22px;height:22px;border-radius:50% 50% 50% 0;
  background:var(--orange);border:2.5px solid #fff;transform:rotate(-45deg);
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
#yc .loclist{display:grid;gap:8px}
#yc .locitem{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 18px;
  text-decoration:none;color:inherit;transition:.15s;
}
#yc .locitem:hover{border-color:var(--green-700);background:var(--green-050);transform:translateX(3px)}
#yc .locitem b{display:block;color:var(--ink);font-size:.98rem;font-weight:800}
#yc .locitem span{display:block;font-size:.83rem;color:var(--muted);font-weight:600;margin-top:1px}
#yc .locitem em{
  font-style:normal;color:var(--orange-600);font-weight:800;font-size:.85rem;white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px;
}
#yc .nonstop{color:var(--green-500)!important}

/* ------------------------------------------------------------
   БЛОК 10 — Често задавани въпроси
   ------------------------------------------------------------ */
#yc .faq{max-width:820px;margin-inline:auto;border-top:1px solid var(--line)}
#yc .qa{border-bottom:1px solid var(--line)}
#yc .qa__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:none;border:0;padding:22px 4px;text-align:left;cursor:pointer;
  font-size:1.05rem;font-weight:800;color:var(--ink);
}
#yc .qa__q:hover{color:var(--green-700)}
#yc .qa__q:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px}
#yc .qa__ic{
  flex:none;width:30px;height:30px;border-radius:50%;border:2px solid var(--green-100);
  display:grid;place-items:center;position:relative;transition:.2s;
}
#yc .qa__ic::before,#yc .qa__ic::after{content:"";position:absolute;background:var(--green-700);border-radius:2px;transition:.2s}
#yc .qa__ic::before{width:12px;height:2.5px}
#yc .qa__ic::after{width:2.5px;height:12px}
#yc .qa__q[aria-expanded="true"] .qa__ic{background:var(--green-700);border-color:var(--green-700);transform:rotate(180deg)}
#yc .qa__q[aria-expanded="true"] .qa__ic::before{background:#fff}
#yc .qa__q[aria-expanded="true"] .qa__ic::after{opacity:0}
#yc .qa__a{display:none;padding:0 60px 24px 4px;font-size:1rem}
#yc .qa__a.open{display:block}
#yc .qa__a a{color:var(--green-700);font-weight:700}

/* ------------------------------------------------------------
   БЛОК 11 — Финален призив
   ------------------------------------------------------------ */
#yc .final{
  color:#fff;position:relative;overflow:hidden;padding:72px 0;
  background:
    radial-gradient(760px 420px at 22% 0%, rgba(244,123,30,.28), transparent 66%),
    linear-gradient(170deg,#114F26,#072B14);
}
/* Три колони: лого · текст · бутони вдясно */
#yc .final__in{display:flex;align-items:center;gap:clamp(32px,4vw,64px)}
#yc .final__txt{flex:1 1 auto;min-width:0}
#yc .final h2{color:#fff;margin:0;font-size:clamp(1.6rem,2.9vw,2.3rem)}
#yc .final p{color:rgba(255,255,255,.8);max-width:42ch;margin:14px 0 0}
#yc .final .stores{flex:none;flex-direction:column;align-items:stretch;gap:12px;margin:0}
#yc .final .store{padding:13px 26px 13px 20px}
#yc .applogo{
  flex:none;width:200px;height:200px;border-radius:44px;background:#fff;padding:18px;margin:0;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.66);
}
#yc .applogo img{width:100%;height:100%;object-fit:contain}

/* ------------------------------------------------------------
   БЛОК 12 — Футър
   ------------------------------------------------------------ */
#yc .footer{background:#07220F;color:rgba(255,255,255,.72);font-size:.9rem}
#yc .footer__in{
  padding:34px 0;display:flex;flex-wrap:wrap;gap:18px 32px;
  align-items:center;justify-content:space-between;
}
#yc .footer nav{display:flex;flex-wrap:wrap;gap:8px 26px}
#yc .footer a{color:rgba(255,255,255,.78);text-decoration:none;font-weight:600}
#yc .footer a:hover{color:var(--gold);text-decoration:underline}

/* многоколонен футър с контакти */
#yc .footer__cols{
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
  padding:44px 0 32px;
}
#yc .footer__cols--2{grid-template-columns:1.4fr 1fr;max-width:640px}
#yc .footer__col h3{
  color:#fff;font-size:.82rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;margin:0 0 12px;
}
#yc .footer__col p{margin:0;line-height:1.9}
#yc .footer__col nav{flex-direction:column;gap:9px}
#yc .footer__bar{
  border-top:1px solid rgba(255,255,255,.12);padding:20px 0 28px;
}
#yc .footer__bar p{margin:0;color:rgba(255,255,255,.55);font-size:.85rem}

/* ------------------------------------------------------------
   ПРАВНИ СТРАНИЦИ (Общи условия / Поверителност)
------------------------------------------------------------ */
#yc .legal{background:var(--surface);padding:52px 0 72px}
#yc .legal__wrap{max-width:860px}
#yc .legal h1{font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.2;margin:0 0 8px}
#yc .legal h2{font-size:clamp(1.15rem,2.2vw,1.4rem);margin:38px 0 12px;color:var(--green-700)}
#yc .legal h3{font-size:1.05rem;margin:30px 0 10px;color:var(--green-700)}
#yc .legal p{margin:0 0 14px;line-height:1.75}
#yc .legal__meta{color:var(--muted);font-size:.9rem;margin-bottom:26px}
#yc .legal__back{margin:0 0 26px}
#yc .legal__back a{color:var(--orange-600);font-weight:700;text-decoration:none}
#yc .legal__back a:hover{text-decoration:underline}
#yc .legal__list{margin:0 0 18px;padding-left:22px;line-height:1.75}
#yc .legal__list > li{margin-bottom:14px;padding-left:4px}
#yc .legal__ul{margin:0 0 18px;padding-left:22px;line-height:1.8}
#yc .legal__ul li{margin-bottom:8px}
#yc .legal__example{
  margin:10px 0 0;padding:12px 16px;background:var(--green-050);
  border-left:3px solid var(--green-200,var(--green-700));border-radius:0 8px 8px 0;
  font-size:.94rem;color:var(--muted);
}
#yc .legal__example em{font-size:.88rem}
#yc .legal__hr{border:0;border-top:1px solid var(--line);margin:44px 0}
#yc .legal__tablewrap{overflow-x:auto;margin:14px 0 20px;-webkit-overflow-scrolling:touch}
#yc .legal__table{
  width:100%;border-collapse:collapse;font-size:.92rem;min-width:420px;
  background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;
}
#yc .legal__table caption{
  text-align:left;font-weight:700;padding:0 0 8px;color:var(--muted);font-size:.9rem;
}
#yc .legal__table th{
  background:var(--green-050);color:var(--green-700);font-weight:800;
  text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);
}
#yc .legal__table td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
#yc .legal__table tr:last-child td{border-bottom:0}
#yc .legal__todo{
  margin:16px 0 22px;padding:14px 18px;border-radius:10px;
  background:#FFF7E6;border:1px solid #F0C36B;color:#6B4E00;font-size:.92rem;line-height:1.65;
}
#yc .nav--legal{display:flex;align-items:center;gap:18px}

/* ------------------------------------------------------------
   Sticky бутон — само мобилен
   ------------------------------------------------------------ */
#yc .stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);box-shadow:0 -8px 24px -12px rgba(0,0,0,.3);
  transform:translateY(120%);transition:transform .3s cubic-bezier(.16,1,.3,1);
}
#yc .stickybar.show{transform:translateY(0)}

/* ------------------------------------------------------------
   Появяване при скрол + достъпност
   ------------------------------------------------------------ */
#yc .rv{opacity:0;transform:translateY(18px);transition:opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1)}
#yc .rv.in{opacity:1;transform:none}

#yc .skip{
  position:absolute;left:-9999px;top:0;background:var(--orange);color:#fff;
  padding:12px 20px;z-index:200;font-weight:800;border-radius:0 0 10px 0;
}
#yc .skip:focus{left:0}

#yc a:focus-visible,#yc button:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:8px}

/* ------------------------------------------------------------
   Адаптивност
   ------------------------------------------------------------ */
/* --- само desktop: двата QR кода за сканиране --- */
@media (min-width:1024px){
  #yc .hero__qr{
    display:flex;align-items:center;gap:26px;
    margin-top:32px;padding-top:26px;border-top:1px solid rgba(255,255,255,.16);
  }
  #yc .hero__qr-txt{max-width:19ch}
  #yc .hero__qr-txt b{
    display:block;color:#fff;font-size:1rem;font-weight:800;
    line-height:1.35;margin-bottom:6px;
  }
  #yc .hero__qr-txt small{display:block;color:rgba(255,255,255,.66);font-size:.82rem;line-height:1.5}

  #yc .qr{
    display:flex;flex-direction:column;align-items:center;gap:9px;
    text-decoration:none;transition:transform .15s ease;
  }
  #yc .qr:hover{transform:translateY(-2px)}
  #yc .qr img{
    width:108px;height:108px;padding:8px;
    background:#fff;border:1px solid rgba(255,255,255,.22);border-radius:12px;
  }
  #yc .qr:hover img{border-color:var(--gold)}
  #yc .qr span{font-size:.78rem;font-weight:800;color:rgba(255,255,255,.82);letter-spacing:.01em}
}

/* --- таблет и надолу: хедърът минава на бургер меню --- */
@media (max-width:1023px){
  :root{--header-h:68px}
  html{scroll-padding-top:88px}

  #yc .burger{display:block}
  #yc .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--surface);border-bottom:1px solid var(--line);
    padding:8px 20px 20px;
    box-shadow:0 24px 44px -22px rgba(10,58,27,.45);
  }
  #yc .nav.open{display:flex}
  #yc .nav a{padding:15px 4px;font-size:1rem;border-radius:8px;border-bottom:1px solid var(--line)}
  #yc .nav a:nth-last-of-type(2){border-bottom:0}
  #yc .nav a.btn{margin:16px 0 0;padding:15px 22px;font-size:1rem;justify-content:center;border-bottom:0}

  #yc .header__logo img{height:52px}

  #yc .hero__in{
    grid-template-columns:1fr;
    grid-template-areas:"head" "media" "cta";
    row-gap:36px;
    padding:52px 0 64px;
  }
  #yc .hero__cta{margin-top:0}
  #yc .phone{width:min(260px,70%)}
  #yc .calc{grid-template-columns:1fr}
  #yc .points,#yc .feat,#yc .quality,#yc .loc{grid-template-columns:1fr;gap:40px}
  #yc .savings__grid{grid-template-columns:repeat(2,1fr)}
  #yc .map{position:static}
  #yc #yoanaMap{height:340px}
  #yc .shots{max-width:440px;margin-inline:auto}

  /* под 1024px: лого + текст горе, бутоните под тях в редица */
  #yc .final__in{flex-wrap:wrap;gap:28px 32px;justify-content:center}
  #yc .final__txt{flex:1 1 300px}
  #yc .final .stores{flex:1 1 100%;flex-direction:row;justify-content:center}
  #yc .applogo{width:150px;height:150px;border-radius:34px;padding:14px}
}

/* --- телефон --- */
@media (max-width:760px){
  #yc{font-size:16px}
  #yc .section{padding:56px 0}
  #yc .section--tight{padding:44px 0}
  #yc .wrap{padding-inline:18px}

  :root{--header-h:64px}
  html{scroll-padding-top:84px}
  #yc .header__logo img{height:48px}

  /* hero */
  #yc .hero__in{padding:40px 0 52px;row-gap:30px}
  #yc .hero h1{max-width:100%}
  #yc .hero__sub{margin-top:16px}
  #yc .phone{width:min(230px,64%)}

  /* лента с факти */
  #yc .strip__in{grid-template-columns:repeat(2,1fr)}
  #yc .strip__i{padding:20px 12px}
  #yc .strip__i b{font-size:1.08rem}
  #yc .strip__i span{font-size:.75rem}
  /* при две колони първият елемент от всеки ред няма линия отляво,
     а вторият ред получава линия отгоре */
  #yc .strip__i:nth-child(2n+1)::before{display:none}
  #yc .strip__i:nth-child(n+3){border-top:1px solid var(--line)}

  /* калкулатор */
  #yc .calc__left,#yc .calc__right{padding:24px 20px}
  #yc .tabs .tab{font-size:.82rem;padding:12px 6px}
  #yc .slider-head{margin-top:26px}

  /* стъпки и нива — една колона */
  #yc .steps{grid-template-columns:1fr;gap:22px}
  #yc .savings__grid{grid-template-columns:1fr;gap:14px}
  #yc .tiers{grid-template-columns:1fr;gap:18px}
  #yc .tier{padding:26px 22px}
  #yc .tier--gold{margin-top:16px}

  /* точки */
  #yc .rate{font-size:1.25rem;padding:14px 20px;margin:18px 0 20px}
  #yc .example{padding:22px}
  #yc .example__row{gap:10px}
  #yc .chip{padding:10px 13px;font-size:.9rem}
  #yc .example__out b{font-size:1.6rem}

  /* екрани на приложението */
  #yc .shots{gap:12px;max-width:340px}
  #yc .shot{padding:6px;border-radius:20px}
  #yc .shot img{border-radius:15px}
  #yc .shot:first-child,#yc .shot:last-child{transform:none}

  /* галерия обекти — плъзгащ се ред вместо дълга колона */
  #yc .gallery{
    display:flex;gap:12px;margin-bottom:14px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:8px;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  #yc .gallery::-webkit-scrollbar{display:none}
  #yc .gallery img{flex:0 0 82%;scroll-snap-align:start}

  /* --- стрелки --- */
  #yc .gal-nav{
    position:absolute;top:calc(50% - 4px);transform:translateY(-50%);
    display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;padding:0;border:0;border-radius:50%;
    background:rgba(255,255,255,.95);color:var(--green-800);
    box-shadow:0 4px 16px -2px rgba(0,0,0,.28);
    cursor:pointer;z-index:3;
    transition:opacity .22s,visibility .22s,background .18s;
  }
  #yc .gal-nav:active{background:#FFFFFF}
  #yc .gal-nav:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
  #yc .gal-nav--prev{left:6px}
  #yc .gal-nav--next{right:6px}
  /* скриваме стрелката, когато няма накъде в тази посока */
  #yc .gal-nav.is-off{opacity:0;visibility:hidden}

  /* --- точки за позиция --- */
  #yc .gal-dots{
    display:flex;justify-content:center;align-items:center;gap:8px;
    margin-bottom:30px;
  }
  #yc .gal-dots button{
    width:8px;height:8px;padding:0;border:0;border-radius:999px;
    background:#C2D2C5;cursor:pointer;
    transition:width .22s,background .22s;
  }
  #yc .gal-dots button.is-active{width:24px;background:var(--orange)}

  #yc .locitem{padding:13px 15px}
  #yc .locitem:hover{transform:none}

  /* ЧЗВ */
  #yc .qa__q{font-size:.98rem;padding:19px 2px}
  #yc .qa__a{padding:0 8px 20px 2px}

  /* финален блок */
  #yc .final{padding:56px 0}
  #yc .final__in{flex-direction:column;text-align:center;gap:26px}
  /* при вертикална подредба flex-basis важи за ВИСОЧИНАТА —
     затова се нулира, иначе бутоните се разтягат и остава празно поле */
  #yc .final__txt{flex:0 0 auto;width:100%}
  #yc .final p{margin-inline:auto}
  #yc .final .stores{flex:0 0 auto;width:100%;flex-direction:row;flex-wrap:wrap;justify-content:center}
  #yc .applogo{width:132px;height:132px;border-radius:30px;padding:13px}

  /* футър */
  #yc .footer__in{flex-direction:column;align-items:flex-start;gap:16px;padding:28px 0}
  #yc .footer nav{flex-direction:column;gap:10px}
  #yc .footer__cols{grid-template-columns:1fr;gap:28px;padding:34px 0 24px}
  #yc .legal{padding:36px 0 56px}
  #yc .legal__list{padding-left:18px}

  /* лепкав бутон долу */
  #yc .stickybar{display:block}
  body.has-sticky{padding-bottom:76px}
}

/* --- малки телефони --- */
@media (max-width:420px){
  #yc .wrap{padding-inline:16px}
  #yc .header__logo img{height:46px}
  #yc .stores{width:100%}
  #yc .store{flex:1 1 100%;justify-content:flex-start}
  #yc .hero__micro{gap:6px 14px;font-size:.8rem}
  #yc .slider-val{font-size:1.6rem}
  #yc .calc__save .v{font-size:2.6rem}
  #yc .example__row{flex-direction:column;align-items:stretch;text-align:center}
  #yc .arrow{text-align:center}
  #yc .gallery img{flex:0 0 86%}
  #yc .gal-nav{width:36px;height:36px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #yc,#yc *,#yc *::before,#yc *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  #yc .rv{opacity:1;transform:none}
}