/* The public landing page (templates/landing.html), after app.css: its tokens, fonts and icons. Mobile first; from
   900px wide the hero, "Клиентът вижда това" and the three steps go side by side. Sizes are the canvas's
   artboards "Начална страница (мобилна)" and, at 1440px, "(десктоп)". */

/* Bold, for the headlines: only this page uses it. Google Fonts serves it in two files, one per script. */
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex-sans-700-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex-sans-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.landing-page {
  --lp-soft: #F7F9FC;
  --lp-chip-bg: #EAF2FB;
  --lp-chip-fg: #0B3D6B;
  --lp-card-line: #E8EAED;
  --lp-sum-line: #D8DBE0;
  --lp-pad: 20px;
  background: var(--surface);
}
.landing-page h3, .landing-page ol, .landing-page ul, .landing-page figure { margin: 0; padding: 0; }
.landing-page ol, .landing-page ul { list-style: none; }
.lp-wrap { max-width: 1280px; margin: 0 auto; }

/* Copy the canvas words differently on the phone. */
@media (max-width: 899.98px) { .lp-only-wide { display: none !important; } }
@media (min-width: 900px) { .lp-only-narrow { display: none !important; } }

/* Buttons */
.lp-btn, .lp-btn:hover { color: #FFFFFF; }
.lp-btn { display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); background: var(--accent); font-weight: 600; white-space: nowrap; }
.lp-btn--nav { height: 46px; padding: 0 22px; font-size: var(--fs-base); }
.lp-btn--hero { height: 54px; padding: 0 30px; border-radius: 13px; font-size: 17px; }
.lp-btn--outline, .lp-btn--outline:hover { border: 1px solid var(--line-strong); background: none; color: var(--ink); }
.lp-btn--white, .lp-btn--white:hover { background: var(--surface); color: var(--accent); }

/* Header */
.lp-header { padding: 16px var(--lp-pad); border-bottom: 1px solid var(--hairline); }
.lp-header__row { display: flex; align-items: center; justify-content: space-between; }
.lp-brand { display: flex; align-items: center; gap: 10px; }
.lp-logo { display: flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 7px; background: var(--accent); color: #FFFFFF; }
.lp-logo .i { width: 16px; height: 16px; }
.lp-brand__name { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.lp-nav { display: flex; align-items: center; gap: 28px; }
.lp-nav__link, .lp-nav__link:hover { color: var(--ink-2); }
.lp-nav__link { position: relative; font-size: var(--fs-base); }
.lp-nav__link::after { content: ""; position: absolute; inset: -13px -8px; }
.lp-nav__login { font-weight: 500; }

/* Hero */
.lp-hero { padding: 36px var(--lp-pad) 40px; background: linear-gradient(180deg, var(--lp-soft) 0%, var(--surface) 100%); }
.lp-hero__row { display: flex; flex-direction: column; gap: 18px; }
.lp-hero__text { display: flex; flex-direction: column; gap: 18px; }
.lp-chip { align-self: flex-start; padding: 6px 12px; border-radius: var(--r-pill); background: var(--lp-chip-bg); color: var(--lp-chip-fg); font-size: var(--fs-sm); font-weight: 500; }
.lp-hero__title { font-size: 34px; line-height: 1.14; font-weight: 700; letter-spacing: -0.01em; }
.lp-hero__lead { font-size: var(--fs-lg); line-height: 1.55; color: var(--text); }
.lp-hero__actions { display: flex; flex-direction: column; }
.lp-trust { display: flex; justify-content: center; gap: 14px; font-size: var(--fs-sm); color: var(--muted); }
/* On the phone the pair stands one under the other, each with its label (canvas version 82); side by side when wide. */
.lp-hero__mocks { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 10px; }

/* The phone mockups: one offer, drawn as the editor and as the client's page. */
.lp-mock-figure { display: flex; flex-direction: column; }
.lp-mock-caption { margin-bottom: 10px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); text-align: center; }
.lp-mock { display: flex; flex-direction: column; width: 299px; max-width: 100%; border: 1px solid var(--line); border-radius: 26px; background: var(--surface); box-shadow: 0 18px 40px rgba(16, 24, 40, 0.14); overflow: hidden; }
.lp-mock-figure > .lp-mock { flex: 1; }
/* The demo video in the hero (Marketing video document; canvas version 76): the box is the video's size, 70% of the
   screen's width on the phone, at most 299 px, centred; the still stays at its top underneath. A drop shadow follows what is drawn, so a missing file
   leaves no shadow of an empty box. */
.lp-demo { position: relative; width: min(70vw, 299px); max-width: 100%; aspect-ratio: 720 / 1560; margin: 0 auto; }
.lp-demo > .lp-mock { width: 100%; }
.lp-demo__video, .lp-demo__still { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 26px; filter: drop-shadow(0 18px 20px rgba(16, 24, 40, 0.14)); }
.lp-mock__head { padding: 14px 14px 10px; border-bottom: 1px solid var(--hairline); }
.lp-mock__title { font-size: var(--fs-base); font-weight: 600; }
.lp-mock__sub { font-size: 11px; color: var(--muted); }
.lp-mock__body { flex: 1; padding: 12px 14px; }
.lp-mock__body--draft { padding: 10px 14px; background: var(--ground); }
.lp-mock__item { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--lp-card-line); }
.lp-mock__item:last-child { border-bottom: 0; }
.lp-mock__name { font-size: var(--fs-xs); font-weight: 500; }
.lp-mock__calc { font-size: 10px; color: var(--muted); }
.lp-mock__amount { font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.lp-mock__total { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--lp-sum-line); font-size: var(--fs-base); font-weight: 600; }
.lp-mock__foot { padding: 12px 14px; }
.lp-mock__btn { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: var(--r-sm); background: var(--accent); color: #FFFFFF; font-size: var(--fs-sm); font-weight: 600; }
.lp-mock__btn--sm { height: 34px; border-radius: 9px; font-size: 11px; }
.lp-mock__btn--outline { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); }
.lp-mock__biz { display: flex; align-items: center; gap: 9px; padding: 13px 14px; border-bottom: 1px solid var(--hairline); }
.lp-mock__avatar { display: flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: #FFFFFF; font-size: 11px; font-weight: 600; }
.lp-mock__biz-name { font-size: var(--fs-xs); font-weight: 600; }
.lp-mock__biz-meta { font-size: 10px; color: var(--muted); }
.lp-mock__offer { font-size: var(--fs-md); font-weight: 600; }
.lp-mock__for { margin-bottom: 8px; font-size: 10px; color: var(--muted); }
.lp-mock__row { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--hairline); font-size: 11px; }
.lp-mock__row span:last-child { font-weight: 500; white-space: nowrap; }
.lp-mock__row--sum { color: var(--muted); }
.lp-mock__row--sum span:last-child { font-weight: 400; }
.lp-mock__sum { display: flex; justify-content: space-between; margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--lp-sum-line); font-size: var(--fs-md); font-weight: 600; }
.lp-mock__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 14px 14px; }

/* Sections */
.lp-h2 { font-size: 26px; line-height: 1.22; font-weight: 600; }
.lp-lead { font-size: var(--fs-lg); line-height: 1.6; color: var(--text); }

.lp-problem { padding: 44px var(--lp-pad) 10px; }
.lp-problem__inner { display: flex; flex-direction: column; gap: 12px; }

.lp-steps { padding: 24px var(--lp-pad) 44px; }
.lp-steps__list { display: flex; flex-direction: column; gap: 12px; }
.lp-step { display: flex; gap: 14px; padding: 18px; border: 1px solid var(--lp-card-line); border-radius: 16px; background: var(--surface); }
.lp-step__num { display: flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--lp-chip-bg); color: var(--accent); font-size: var(--fs-base); font-weight: 700; }
.lp-step__body { display: flex; flex-direction: column; gap: 4px; }
.lp-step__title { font-size: 17px; font-weight: 600; }
.lp-step__text { font-size: var(--fs-md); line-height: 1.5; color: var(--text); }

.lp-client { padding: 44px var(--lp-pad); background: var(--lp-soft); }
.lp-client__grid { display: grid; gap: 16px; }
.lp-client__mock { display: flex; justify-content: center; margin: 6px 0; }
.lp-proofs { display: flex; flex-direction: column; gap: 10px; }
.lp-proofs li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-base); color: var(--ink-2); }
.lp-proofs .i { width: 18px; height: 18px; margin-top: 2px; color: var(--green); stroke-width: 2.5; }

.lp-trades { padding: 44px var(--lp-pad); }
.lp-trades__inner { display: flex; flex-direction: column; gap: 14px; }
.lp-trades .lp-lead { line-height: 1.55; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.lp-chips li { padding: 9px 15px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); font-size: var(--fs-md); font-weight: 500; }

.lp-pricing { padding: 44px var(--lp-pad); }
.lp-pricing__inner { display: flex; flex-direction: column; gap: 14px; }
.lp-pricing .lp-lead { line-height: 1.55; }
.lp-plans { display: flex; flex-direction: column; gap: 12px; }
.lp-plan { display: flex; flex-direction: column; gap: 14px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.lp-plan--top { border: 2px solid var(--accent); }
.lp-plan__head { display: flex; align-items: center; justify-content: space-between; }
.lp-plan__head h3 { font-size: var(--fs-xl); font-weight: 600; }
.lp-plan__badge { padding: 3px 8px; border-radius: var(--r-pill); background: var(--accepted-bg); color: var(--accepted-fg); font-size: 11px; font-weight: 600; }
.lp-plan__price { display: flex; flex-direction: column; gap: 2px; }
.lp-plan__price strong { font-size: 30px; font-weight: 700; letter-spacing: -0.01em; }
.lp-plan__price span { color: var(--muted); font-size: var(--fs-sm); }
.lp-plan__points { display: flex; flex-direction: column; gap: 8px; }
.lp-plan__points li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); }
.lp-plan__points .i { width: 16px; height: 16px; color: var(--green); stroke-width: 2.5; }

.lp-faq { padding: 44px var(--lp-pad); background: var(--lp-soft); }
.lp-faq__inner { display: flex; flex-direction: column; gap: 10px; }
.lp-faq__inner .lp-h2 { margin-bottom: 4px; }
.lp-faq__item { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--lp-card-line); border-radius: var(--r-lg); background: var(--surface); }
.lp-faq__item h3 { font-size: var(--fs-base); font-weight: 600; }
.lp-faq__item p { font-size: var(--fs-md); line-height: 1.5; color: var(--text); }

.lp-cta { padding: 52px var(--lp-pad); background: var(--accent); color: #FFFFFF; text-align: center; }
.lp-cta__inner { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lp-cta__title { font-size: 28px; line-height: 1.2; font-weight: 700; }
.lp-cta__text { font-size: var(--fs-lg); line-height: 1.55; opacity: 0.9; }
.lp-cta .lp-btn { align-self: stretch; margin-top: 4px; }

.lp-footer { padding: 28px var(--lp-pad) 34px; border-top: 1px solid var(--hairline); }
.lp-footer__row { display: flex; flex-direction: column; gap: 14px; }
.lp-brand--footer .lp-logo { width: 26px; height: 26px; border-radius: 6px; }
.lp-brand--footer .lp-logo .i { width: 14px; height: 14px; }
.lp-brand--footer .lp-brand__name { font-size: var(--fs-lg); }
.lp-footer__links { display: flex; flex-wrap: wrap; gap: 14px 16px; font-size: var(--fs-sm); color: var(--muted); }
.lp-footer__links a, .lp-footer__links a:hover { position: relative; color: var(--muted); }
.lp-footer__links a::after { content: ""; position: absolute; inset: -14px -8px; }
.lp-footer__copy { flex-basis: 100%; color: var(--faint); }

/* Wide: from 900px; the sizes reach the desktop artboard's at 1440px. */
@media (min-width: 900px) {
  .landing-page { --lp-pad: clamp(32px, 5.56vw, 80px); }

  .lp-header { padding-block: 22px; }
  .lp-logo { width: 34px; height: 34px; border-radius: 8px; }
  .lp-logo .i { width: 19px; height: 19px; }
  .lp-brand__name { font-size: 21px; }
  .lp-nav__login { font-weight: 400; }

  .lp-hero { padding-block: 76px 84px; }
  .lp-hero__row { flex-direction: row; align-items: center; gap: clamp(32px, 5vw, 72px); }
  .lp-hero__text { flex: 1.1; gap: 22px; }
  .lp-chip { padding: 7px 14px; font-size: var(--fs-md); }
  .lp-hero__title { max-width: 600px; font-size: clamp(36px, 3.48vw, 50px); line-height: 1.1; letter-spacing: -0.02em; }
  .lp-hero__lead { max-width: 520px; font-size: 19px; }
  .lp-hero__actions { flex-direction: row; gap: 16px; margin-top: 6px; }
  .lp-btn--hero { height: 56px; border-radius: 14px; }
  .lp-btn--outline { padding: 0 26px; }
  .lp-trust { justify-content: flex-start; gap: 20px; font-size: var(--fs-md); }
  .lp-hero__mocks { flex: none; flex-direction: row; align-items: flex-start; gap: 22px; margin-top: 0; }
  .lp-mock-caption { text-align: left; }
  .lp-hero .lp-demo { width: clamp(210px, 18.06vw, 260px); }
  .lp-hero .lp-mock { width: clamp(210px, 18.06vw, 260px); }

  .lp-h2 { font-size: 34px; line-height: 1.2; }
  .lp-lead { font-size: 18px; }

  .lp-problem { padding-block: 70px; }
  .lp-problem__inner { max-width: 760px; gap: 14px; text-align: center; }

  .lp-steps { padding-block: 20px 80px; }
  .lp-steps__list { flex-direction: row; gap: 22px; }
  .lp-step { flex: 1; flex-direction: column; gap: 10px; padding: 28px; border-radius: 18px; }
  .lp-step__num { width: 40px; height: 40px; border-radius: var(--r-md); font-size: 17px; }
  .lp-step__body { gap: 10px; }
  .lp-step__title { font-size: var(--fs-xl); }
  .lp-step__text { font-size: var(--fs-base); line-height: 1.55; }

  /* The card left, the text beside it, centred on it. */
  .lp-client { padding-block: 80px; }
  .lp-client__grid { grid-template-columns: 295px 1fr; grid-template-rows: 1fr auto auto auto 1fr; column-gap: clamp(32px, 5vw, 72px); row-gap: 18px; }
  .lp-client__mock { grid-column: 1; grid-row: 1 / -1; align-self: center; margin: 0; }
  .lp-client__title { grid-column: 2; grid-row: 2; }
  .lp-client__lead { grid-column: 2; grid-row: 3; max-width: 520px; }
  .lp-proofs { grid-column: 2; grid-row: 4; gap: 12px; margin-top: 6px; }
  .lp-proofs li { gap: 11px; font-size: var(--fs-lg); }
  .lp-proofs .i { width: 20px; height: 20px; }
  .lp-client .lp-mock { width: 295px; }

  .lp-trades { padding-block: 76px; }
  .lp-trades__inner { align-items: center; gap: 22px; }
  .lp-trades .lp-lead { max-width: 640px; line-height: normal; text-align: center; }
  .lp-chips { justify-content: center; gap: 11px; max-width: 900px; margin-top: 6px; }
  .lp-chips li { padding: 11px 20px; font-size: var(--fs-base); }

  .lp-pricing { padding-block: 76px; }
  .lp-pricing__inner { align-items: center; gap: 22px; }
  .lp-pricing .lp-lead { max-width: 640px; line-height: normal; text-align: center; }
  .lp-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; width: 100%; max-width: 1000px; margin-top: 10px; }
  .lp-plan__points li { font-size: var(--fs-base); }

  .lp-faq { padding-block: 76px; }
  .lp-faq__inner { max-width: 860px; gap: 16px; }
  .lp-faq__inner .lp-h2 { margin-bottom: 6px; text-align: center; }
  .lp-faq__item { gap: 7px; padding: 22px 24px; border-radius: 16px; }
  .lp-faq__item h3 { font-size: 17px; }
  .lp-faq__item p { font-size: var(--fs-base); line-height: 1.55; }

  .lp-cta { padding-block: 86px; }
  .lp-cta__inner { max-width: 720px; gap: 18px; }
  .lp-cta__title { font-size: 38px; line-height: 1.18; }
  .lp-cta__text { font-size: 18px; }
  .lp-cta .lp-btn { align-self: center; padding: 0 34px; margin-top: 6px; }

  .lp-footer { padding-block: 34px; }
  .lp-footer__row { flex-direction: row; align-items: center; justify-content: space-between; }
  .lp-brand--footer .lp-logo { width: 28px; height: 28px; border-radius: 7px; }
  .lp-brand--footer .lp-logo .i { width: 15px; height: 15px; }
  .lp-brand--footer .lp-brand__name { font-size: 17px; }
  .lp-footer__links { flex-wrap: nowrap; gap: 26px; font-size: var(--fs-md); }
  .lp-footer__copy { flex-basis: auto; color: var(--muted); }
}