/* ── documentassistant.pro — public landing page ──────────────────────────────
   Standalone on purpose: the portal's style.css is built for logged-in app
   screens (cards, tables, forms) and would be mostly dead weight here. Only the
   brand tokens are shared, copied below, so the landing page and the product
   read as one thing when a visitor clicks through to a portal. */

:root {
  /* Brand palette — taken from the logo (assets/documentassistant_logo.svg):
     #452449 main, #6f5969 secondary, with the tints derived from them. */
  --accent:      #6f5969;   /* secondary — highlights, icons, chips */
  --accent-dark: #5a4358;   /* readable-on-white version of the above */
  --blue:        #452449;   /* main — headings, primary button, dark sections */
  --light:       #faf7fa;   /* section tint — near-white, so text on it stays crisp */
  --border:      #e2d8e1;
  --text:        #2a2029;
  --muted:       #5f5260;   /* body copy: ~7:1 on white, ~6.9:1 on --light */
  --radius:      12px;
  --shadow:      0 4px 24px rgba(0, 0, 0, .09);
  --shadow-lg:   0 18px 50px rgba(69, 36, 73, .18);
  --wrap:        1120px;
}

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

body {
  font-family: 'Sofia Sans', 'Segoe UI', system-ui, Arial, sans-serif;
  color: var(--text);
  background: #fff;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--accent-dark); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.ld-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.ld-header .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 66px;
}
.ld-logo { display: flex; align-items: center; text-decoration: none; }
/* Horizontal lockup (3072×981 ≈ 3.13:1) — height-driven, width follows */
.ld-logo img { height: 48px; width: auto; }

.ld-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.ld-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 500;
}
.ld-nav a:hover { color: var(--blue); }
/* The CTA is a button, not a nav link: `.ld-nav a` (0,2,0) outranks
   `.btn-primary` (0,1,0), so without this it renders in muted grey on the dark
   button — the contrast bug this header actually had. */
.ld-nav a.btn-primary { color: #fff; }
.ld-nav a.btn-primary:hover { color: #fff; }
/* Header CTA label: full wording normally, „Демо" on a phone where the bar has
   to fit the logo too. Both live in the markup so it stays a CSS swap. */
.ld-cta-short { display: none; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border: 0;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, transform .15s, box-shadow .15s;
}
/* The main brand colour, not the secondary: white on #6f5969 is ~5:1 — fine
   for text, thin for a button — while on #452449 it sits at ~12:1 and passes
   WCAG AA everywhere the button appears, header included. */
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 6px 18px rgba(69, 36, 73, .28); }
.btn-primary:hover { background: #5c3361; transform: translateY(-1px); }
.btn-ghost { background: #fff; color: var(--blue); border: 1.5px solid var(--border); }
.btn-ghost:hover { border-color: var(--accent); }
.btn-sm { padding: 9px 18px; font-size: .92rem; }

/* ── Sections ─────────────────────────────────────────────────────────────── */
.ld-section { padding: 84px 0; }
.ld-section-alt { background: var(--light); }

.ld-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(111, 89, 105, .14);
  color: var(--accent-dark);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.ld-h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  line-height: 1.2;
  color: var(--blue);
  letter-spacing: -.5px;
}
.ld-lead {
  margin-top: 14px;
  max-width: 62ch;
  color: var(--muted);
  font-size: 1.05rem;
}
.ld-center { text-align: center; }
.ld-center .ld-lead { margin-left: auto; margin-right: auto; }
.ld-head { margin-bottom: 46px; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.ld-hero {
  padding: 72px 0 84px;
  background:
    radial-gradient(900px 420px at 78% -8%, rgba(111, 89, 105, .20), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--light) 100%);
}
.ld-hero .wrap {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 54px;
  align-items: center;
}
.ld-hero h1 {
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.1;
  color: var(--blue);
  letter-spacing: -1px;
}
.ld-hero-sub {
  margin-top: 20px;
  max-width: 54ch;
  font-size: 1.12rem;
  color: var(--muted);
}
.ld-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.ld-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 34px;
  color: var(--muted);
  font-size: .86rem;
}
.ld-trust span { display: flex; align-items: center; gap: 7px; }
.ld-trust svg { width: 16px; height: 16px; color: var(--accent-dark); flex: 0 0 auto; }

/* ── Phone mockup (hero + app section) ────────────────────────────────────── */
.ld-phone {
  width: 290px;
  max-width: 100%;
  margin: 0 auto;
  padding: 12px;
  border: 2px solid var(--blue);
  border-radius: 34px;
  background: var(--blue);
  box-shadow: var(--shadow-lg);
}
.ld-phone-screen {
  border-radius: 24px;
  background: #fff;
  overflow: hidden;
}
.ld-phone-bar {
  display: flex;
  justify-content: center;
  padding: 9px 0 4px;
}
.ld-phone-bar i {
  width: 78px;
  height: 5px;
  border-radius: 3px;
  background: var(--border);
}
.ld-phone-body { padding: 12px 14px 18px; }
/* Stands in for the tenant's own logo inside the portal mockup */
.ld-phone-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 108px;
  margin: 4px auto 14px;
  border: 1.5px dashed var(--border);
  border-radius: 7px;
  color: var(--muted);
  font-size: .68rem;
  letter-spacing: .3px;
}
.ld-phone-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 2px;
}
.ld-phone-who { font-size: .72rem; color: var(--muted); margin-bottom: 14px; }
.ld-tile {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  margin-bottom: 9px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fcfafc;
}
.ld-tile svg { width: 22px; height: 22px; color: var(--accent); flex: 0 0 auto; }
.ld-tile b { display: block; font-size: .82rem; color: var(--blue); }
.ld-tile span { font-size: .7rem; color: var(--muted); }

/* ── Problem list ─────────────────────────────────────────────────────────── */
.ld-pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ld-pain {
  padding: 26px 24px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--border);
}
.ld-pain svg { width: 26px; height: 26px; color: #d97706; margin-bottom: 12px; }
.ld-pain p { color: var(--text); font-weight: 500; }
/* The line that turns the pain list into the pitch */
.ld-transition { margin-top: 34px; font-weight: 500; color: var(--blue); }

/* ── Steps ────────────────────────────────────────────────────────────────── */
.ld-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; counter-reset: step; }
.ld-step { position: relative; padding-top: 8px; }
.ld-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
}
.ld-step h3 { font-size: 1.08rem; color: var(--blue); margin-bottom: 6px; }
.ld-step p { color: var(--muted); font-size: .95rem; }

/* ── Pillar cards ─────────────────────────────────────────────────────────── */
.ld-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.ld-card {
  display: flex;
  flex-direction: column;
  padding: 30px 26px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.ld-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: rgba(111, 89, 105, .14);
}
.ld-card-icon svg { width: 26px; height: 26px; color: var(--accent-dark); }
.ld-card h3 { font-size: 1.18rem; color: var(--blue); margin-bottom: 8px; }
.ld-card-benefit { color: var(--text); font-weight: 500; margin-bottom: 16px; }
.ld-card ul { list-style: none; margin-bottom: 16px; }
.ld-card li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: .93rem;
}
.ld-card li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: .55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.ld-card-note {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .84rem;
}

/* ── App section ──────────────────────────────────────────────────────────── */
.ld-app .wrap {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 54px;
  align-items: center;
}
.ld-app-points { list-style: none; margin-top: 26px; }
.ld-app-points li {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--text);
}
.ld-app-points svg { width: 21px; height: 21px; color: var(--accent-dark); flex: 0 0 auto; margin-top: 2px; }
.ld-app-points b { display: block; color: var(--blue); }
.ld-app-points span { color: var(--muted); font-size: .93rem; }

/* Home-screen mockup: the branded icon among ordinary apps */
.ld-home {
  display: grid;
  /* minmax(0,…) so the icon <img> can't widen its own column */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 14px;
  padding: 20px 16px;
}
.ld-home i {
  display: block;
  aspect-ratio: 1;
  border-radius: 22%;
  background: #ece5eb;
}
/* The one live tile among the greyed-out ones — it represents the accounting
   house's OWN app, so it shows „вашето лого", never a real icon. */
.ld-home .ld-home-app {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 22%;
  background: linear-gradient(135deg, var(--blue) 0%, var(--accent) 100%);
  box-shadow: 0 6px 16px rgba(69, 36, 73, .3);
  color: #fff;
  font-size: .52rem;
  line-height: 1.25;
  text-align: center;
  letter-spacing: .2px;
}
.ld-home-label {
  grid-column: 1 / -1;
  margin-top: -6px;
  text-align: center;
  font-size: .72rem;
  color: var(--muted);
}

/* ── Fit / integrations ───────────────────────────────────────────────────── */
.ld-fit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ld-fit-item svg { width: 26px; height: 26px; color: var(--accent-dark); margin-bottom: 10px; }
.ld-fit-item h3 { font-size: 1rem; color: var(--blue); margin-bottom: 5px; }
.ld-fit-item p { color: var(--muted); font-size: .92rem; }

/* ── USP grid ─────────────────────────────────────────────────────────────── */
.ld-usps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.ld-usp {
  display: flex;
  gap: 16px;
  padding: 24px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--border);
}
.ld-usp-n {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
}
.ld-usp h3 { font-size: 1.02rem; color: var(--blue); margin-bottom: 4px; }
.ld-usp p { color: var(--muted); font-size: .93rem; }

/* ── Security ─────────────────────────────────────────────────────────────── */
/* auto-fit so the five points sit on one row on a wide screen and reflow
   sensibly below it, without hard-coding a count that copy changes will break */
.ld-sec { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 20px; }
.ld-sec-item {
  padding: 22px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .6);
  border: 1px solid var(--border);
  text-align: center;
}
.ld-sec-item svg { width: 24px; height: 24px; color: var(--accent-dark); margin-bottom: 10px; }
.ld-sec-item b { display: block; color: var(--blue); font-size: .96rem; margin-bottom: 4px; }
.ld-sec-item p { color: var(--muted); font-size: .86rem; }

/* ── Final CTA ────────────────────────────────────────────────────────────── */
.ld-cta {
  padding: 76px 0;
  background: linear-gradient(135deg, var(--blue) 0%, #6f5969 100%);
  color: #fff;
  text-align: center;
}
.ld-cta h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); letter-spacing: -.5px; }
.ld-cta p { margin: 16px auto 0; max-width: 56ch; color: rgba(255, 255, 255, .82); }
.ld-cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }
/* Inverted here — a dark button would vanish on the dark section */
.ld-cta .btn-primary { background: #fff; color: var(--blue); box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.ld-cta .btn-primary:hover { background: var(--light); }
.ld-cta .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.ld-cta .btn-ghost:hover { border-color: #fff; }
.ld-cta-note { margin-top: 20px; font-size: .88rem; color: rgba(255, 255, 255, .7); }
.ld-cta-note a { color: #fff; }
.ld-contact { margin-top: 22px; font-size: 1.02rem; }
.ld-contact a { color: #fff; }

/* ── Demo request form (inside the dark CTA section) ──────────────────────── */
.ld-form {
  max-width: 660px;
  margin: 30px auto 0;
  text-align: left;
}
.ld-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.ld-form-field span {
  display: block;
  margin-bottom: 5px;
  font-size: .85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
}
.ld-form-field input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font: inherit;
  outline: none;
  transition: border-color .15s, background .15s;
}
.ld-form-field input::placeholder { color: rgba(255, 255, 255, .5); }
.ld-form-field input:focus {
  border-color: var(--accent);
  background: rgba(255, 255, 255, .16);
}
/* Chrome's yellow autofill would erase the dark field entirely */
.ld-form-field input:-webkit-autofill {
  -webkit-text-fill-color: var(--blue);
  box-shadow: 0 0 0 40px #fff inset;
}
.ld-form .btn { width: 100%; margin-top: 6px; }
.ld-form-note { margin-top: 12px; font-size: .8rem; color: rgba(255, 255, 255, .6); }

/* Honeypot — off-screen rather than display:none, which some bots skip */
.ld-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ld-form-ok {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 560px;
  margin: 30px auto 0;
  padding: 20px 24px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  text-align: left;
}
.ld-form-ok svg { width: 30px; height: 30px; color: var(--accent); flex: 0 0 auto; }
.ld-form-ok b { display: block; }
.ld-form-ok span { color: rgba(255, 255, 255, .78); font-size: .92rem; }

.ld-form-err {
  max-width: 660px;
  margin: 24px auto 0;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: rgba(220, 38, 38, .22);
  border: 1px solid rgba(255, 255, 255, .3);
  font-size: .92rem;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.ld-footer {
  padding: 34px 0;
  background: var(--blue);
  color: rgba(255, 255, 255, .6);
  font-size: .86rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.ld-footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; }
.ld-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.ld-footer a:hover { text-decoration: underline; }
.ld-footer .ld-copy { margin-left: auto; }

/* ── Portal finder (find_portal.php) ──────────────────────────────────────── */
.ld-finder { min-height: 72vh; display: flex; align-items: center; padding: 60px 0; }
.ld-finder-box {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 40px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.ld-finder-box h1 { font-size: 1.5rem; color: var(--blue); margin-bottom: 8px; }
.ld-finder-box > p { color: var(--muted); margin-bottom: 24px; }
.ld-finder-box label { display: block; font-weight: 600; font-size: .9rem; color: var(--blue); margin-bottom: 6px; }
.ld-finder-box input[type="text"] {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  outline: none;
}
.ld-finder-box input[type="text"]:focus { border-color: var(--accent); }
.ld-finder-box .btn { width: 100%; margin-top: 18px; }
.ld-note {
  margin-top: 22px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--light);
  color: var(--muted);
  font-size: .87rem;
}
.ld-error {
  margin-bottom: 18px;
  padding: 12px 15px;
  border-radius: var(--radius);
  background: #fee2e2;
  color: #b91c1c;
  font-size: .9rem;
}
.ld-back { display: inline-block; margin-top: 20px; color: var(--muted); font-size: .88rem; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ld-hero .wrap,
  .ld-app .wrap { grid-template-columns: 1fr; gap: 40px; }
  .ld-hero-visual, .ld-app-visual { order: -1; }
  .ld-cards, .ld-steps, .ld-pains { grid-template-columns: 1fr; }
  .ld-fit, .ld-sec { grid-template-columns: repeat(2, 1fr); }
  .ld-usps { grid-template-columns: 1fr; }
  .ld-nav a:not(.ld-login):not(.btn) { display: none; }
}

@media (max-width: 600px) {
  .ld-section { padding: 58px 0; }
  .ld-hero { padding: 46px 0 58px; }
  .ld-head { margin-bottom: 32px; }
  .ld-fit, .ld-sec { grid-template-columns: 1fr; }
  .ld-header .wrap { height: 60px; gap: 12px; }
  .ld-logo img { height: 48px; }
  .ld-cta-long { display: none; }
  .ld-cta-short { display: inline; }
  .ld-form-row { grid-template-columns: 1fr; gap: 12px; }
  .btn { width: 100%; }
  .btn-sm { width: auto; }
  .ld-finder-box { padding: 26px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
}