/* =========================================================================
   FinHome — styles.css
   -------------------------------------------------------------------------
   Single stylesheet for the FinHome landing page.
   All class names are namespaced with the `fh-` prefix.

   TABLE OF CONTENTS
   01. Design tokens (:root) & reset
   02. Base elements (typography, links, focus)
   03. Layout primitives (.fh-wrap, .fh-section, eyebrow, headings)
   04. Skip link
   05. Header / navigation
   06. Hamburger button (mobile)
   07. Mobile menu panel
   08. Language toggle
   09. Buttons (.fh-btn + variants)
   10. Hero
   11. Hero visual (budget / property / puzzle mock)
   12. Cards & grids
   13. Entry cards (buyer / seller / broker)
   14. Split sections & panels
   15. Email mock (personal selection)
   16. Flow / steps (how it works)
   17. Comparison
   18. Forms
   19. Back-to-top & misc helpers
   20. Dark CTA & footer
   21. Responsive — mobile (<=679px)
   22. Responsive — tablet (>=680px)
   23. Responsive — desktop (>=900px)
   24. Responsive — wide (>=1100px)
   25. Reduced motion
   26. Market-analysis pages (researches/pazar-*.html)
   27. Guide pages (guides/*.html)
   28. Clickable vs. readable containers
   The font (Inter) is loaded via <link> in the HTML <head>, not @import.
   ========================================================================= */


/* 01. Design tokens & reset ============================================== */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --fh-blue:#0273AF;        /* brand accent — eyebrows, links, icons, KPIs */
  --fh-blue-700:#025E8C;
  --fh-green:#84BE74;       /* primary ACTION colour — matches the platform */
  --fh-green-700:#6FAE5E;   /* green primary hover */
  --fh-mint:#5CA48A;
  --fh-teal:#308B9E;
  --fh-navy:#111827;
  --fh-ink:#172033;
  --fh-gray:#657083;
  --fh-light:#FAFAFA;       /* neutral-50, like the platform background */
  --fh-soft:#EAF5F1;
  --fh-border:#E5E5E5;      /* neutral-200, like the platform borders */
  --fh-white:#FFFFFF;
  --fh-danger:#B42318;
  --fh-shadow:0 1px 2px rgba(16,32,64,.04), 0 10px 30px rgba(16,32,64,.07);
  --fh-shadow-sm:0 1px 2px rgba(16,32,64,.05), 0 3px 12px rgba(16,32,64,.05);
  --fh-header-h:64px; /* used to anchor the mobile menu below the sticky header */
}


/* 02. Base elements ====================================================== */
html {
  scroll-behavior:smooth;
  /* offset anchor jumps so targets aren't hidden behind the sticky header */
  scroll-padding-top:calc(var(--fh-header-h) + 14px);
}

body {
  margin:0;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--fh-ink);
  background:var(--fh-white);
  line-height:1.55;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Lock scroll while the mobile menu is open (toggled from JS). */
body.fh-menu-open { overflow:hidden; }

h1,h2,h3,p { margin:0; }
h1,h2,h3 { color:var(--fh-navy); letter-spacing:-0.015em; line-height:1.16; }
a { color:inherit; text-decoration:none; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline:3px solid rgba(2,115,175,.35);
  outline-offset:2px;
  border-radius:8px;
}


/* 03. Layout primitives ================================================== */
.fh-wrap { width:100%; max-width:1180px; margin:0 auto; padding:0 16px; }
.fh-section { padding:48px 0; }
.fh-section--soft { background:var(--fh-light); }
.fh-section--green { background:linear-gradient(180deg,#F4FAF6 0%,#FFFFFF 100%); }
.fh-section--dark { background:#07131A; color:#D8E6EC; }

.fh-eyebrow {
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fh-blue);
  margin-bottom:12px;
}

.fh-h2 { font-size:24px; font-weight:800; max-width:780px; }
.fh-lead { font-size:15px; color:var(--fh-gray); max-width:780px; margin-top:10px; }
.fh-lead--sm { font-size:13px; } /* smaller secondary lead (e.g. disclaimers) */


/* 04. Skip link ========================================================== */
.fh-skip { position:absolute; left:-9999px; top:0; }
.fh-skip:focus {
  left:12px; top:12px; z-index:100;
  background:#fff; color:var(--fh-blue);
  padding:10px 16px; border-radius:8px; box-shadow:var(--fh-shadow);
}


/* 05. Header / navigation ================================================ */
.fh-header {
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.93);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--fh-border);
}

.fh-nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:64px;
  gap:16px;
}

.fh-brand {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  font-weight:800;
}

.fh-symbol {
  width:38px;
  height:38px;
  display:block;
  object-fit:contain;
  flex:0 0 auto;
}

.fh-brand-word {
  font-size:24px;
  letter-spacing:-.03em;
  line-height:1;
  color:var(--fh-blue);
}

.fh-brand-word strong { color:var(--fh-green); }

.fh-brand-sub {
  display:block;
  font-size:9px;
  color:var(--fh-gray);
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-top:3px;
  line-height:1;
}

.fh-navlinks {
  display:none;
  align-items:center;
  gap:23px;
}

.fh-navlinks a {
  font-size:14px;
  font-weight:650;
  color:#334155;
}

.fh-navlinks a:hover { color:var(--fh-blue); }

/* Right-side cluster: language toggle + desktop CTA + hamburger. */
.fh-nav-actions {
  display:flex;
  align-items:center;
  gap:12px;
}

.fh-desktop-cta { display:none; }


/* 06. Hamburger button (mobile) ========================================= */
.fh-burger {
  --bar:2px;
  position:relative;
  width:44px;
  height:44px;
  border:1px solid var(--fh-border);
  border-radius:11px;
  background:#fff;
  cursor:pointer;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:0;
  flex:0 0 auto;
}

.fh-burger:hover { border-color:var(--fh-blue); }

.fh-burger span {
  display:block;
  width:20px;
  height:var(--bar);
  border-radius:99px;
  background:var(--fh-navy);
  transition:transform .2s ease, opacity .2s ease;
}

/* Animate to an "X" when open. */
.fh-burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.fh-burger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.fh-burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }


/* 07. Mobile menu panel ================================================== */
.fh-mobile-menu {
  position:fixed;
  left:0;
  right:0;
  top:var(--fh-header-h);
  bottom:0;
  z-index:45;
  background:rgba(255,255,255,.98);
  backdrop-filter:saturate(160%) blur(8px);
  border-top:1px solid var(--fh-border);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:6px;
  overflow-y:auto;
  /* closed state */
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.fh-mobile-menu.is-open {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.fh-mobile-menu a.fh-mobile-link {
  font-size:17px;
  font-weight:700;
  color:var(--fh-navy);
  padding:13px 6px;
  border-bottom:1px solid var(--fh-border);
}

.fh-mobile-menu a.fh-mobile-link:hover { color:var(--fh-blue); }

.fh-mobile-menu .fh-btn { margin-top:14px; }

.fh-mobile-menu .fh-lang { margin-top:16px; align-self:flex-start; }

.fh-mobile-lang-label {
  font-size:12px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--fh-gray);
  margin-top:18px;
}


/* 08. Language toggle ==================================================== */
.fh-lang {
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:3px;
  border:1px solid var(--fh-border);
  border-radius:999px;
  background:#fff;
}

.fh-lang button,
.fh-lang a {
  border:0;
  background:transparent;
  font-family:inherit;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  color:var(--fh-gray);
  padding:6px 11px;
  border-radius:999px;
  cursor:pointer;
  line-height:1;
  text-decoration:none;
  display:inline-block;
}

.fh-lang button:hover,
.fh-lang a:hover { color:var(--fh-blue); }

.fh-lang button:focus-visible,
.fh-lang a:focus-visible {
  outline:2px solid var(--fh-blue);
  outline-offset:2px;
}

/* Two ways of saying "this is the current language", because the control has
   two forms: buttons on a page whose English is swapped in by JavaScript, and
   links on a page that has a real translation at its own URL. Both have to
   look identical — the visitor should not be able to tell which mechanism a
   given page uses. */
.fh-lang button[aria-pressed="true"],
.fh-lang a[aria-current="true"] {
  background:var(--fh-blue);
  color:#fff;
}

/* Hidden in the header until desktop; on mobile it lives in the menu panel. */
.fh-nav-actions .fh-lang { display:none; }


/* 09. Buttons =========================================================== */
.fh-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid transparent;
  border-radius:8px;
  padding:12px 19px;
  font-family:inherit;
  font-size:15px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
}

.fh-btn:active { transform:translateY(1px); }

.fh-btn--primary { background:var(--fh-green); color:#fff; box-shadow:0 1px 2px rgba(16,32,64,.10); }
.fh-btn--primary:hover { background:var(--fh-green-700); }

.fh-btn--green { background:var(--fh-green); color:#0D2718; }
.fh-btn--green:hover { background:#7AAD68; }

.fh-btn--ghost {
  background:#fff;
  color:var(--fh-navy);
  border-color:var(--fh-border);
}

.fh-btn--ghost:hover { border-color:var(--fh-blue); color:var(--fh-blue); }

.fh-btn--on-dark {
  background:#fff;
  color:#07131A;
}

.fh-btn--on-dark:hover { background:#EAF5F1; }

.fh-btn--sm { padding:9px 15px; font-size:14px; border-radius:6px; }


/* 10. Hero ============================================================== */
.fh-hero { padding:30px 0 38px; overflow:hidden; }

.fh-hero-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  align-items:center;
}

.fh-hero h1 {
  font-size:31px;
  font-weight:850;
  letter-spacing:-.035em;
  max-width:680px;
}

.fh-hero-sub {
  font-size:15.5px;
  color:var(--fh-gray);
  margin-top:14px;
  max-width:640px;
}

.fh-hero-cta {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
}

.fh-hero-tags {
  display:flex;
  flex-wrap:wrap;
  gap:7px 13px;
  margin-top:18px;
}

.fh-hero-tag {
  font-size:13px;
  color:#3C485B;
  display:flex;
  align-items:center;
  gap:7px;
}

.fh-dot {
  width:8px;
  height:8px;
  border-radius:99px;
  background:var(--fh-green);
  flex:0 0 auto;
}


/* 11. Hero visual ======================================================= */
.fh-visual {
  position:relative;
  border:1px solid var(--fh-border);
  border-radius:16px;
  padding:14px;
  background:
    radial-gradient(circle at 18% 12%, rgba(141,188,121,.24), transparent 30%),
    radial-gradient(circle at 86% 8%, rgba(2,115,175,.18), transparent 34%),
    #fff;
  box-shadow:var(--fh-shadow);
  overflow:hidden;
}

.fh-flow-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}

.fh-flow-pill {
  font-size:12px;
  font-weight:800;
  color:#225E3A;
  background:#EAF5E6;
  border:1px solid #D1E8C8;
  border-radius:999px;
  padding:6px 10px;
}

.fh-flow-status {
  font-size:12px;
  font-weight:800;
  color:var(--fh-blue);
  background:#E8F5FB;
  border:1px solid #CDE8F4;
  border-radius:999px;
  padding:6px 10px;
}

.fh-match {
  display:grid;
  grid-template-columns:1fr;
  gap:11px;
}

.fh-match-card {
  background:#fff;
  border:1px solid var(--fh-border);
  border-radius:12px;
  padding:14px;
  box-shadow:var(--fh-shadow-sm);
}

.fh-match-kicker {
  font-size:11px;
  font-weight:850;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--fh-gray);
  margin-bottom:9px;
}

.fh-budget-amount {
  font-size:26px;
  line-height:1;
  font-weight:850;
  color:var(--fh-blue);
  letter-spacing:-.03em;
}

.fh-small {
  font-size:13px;
  color:var(--fh-gray);
  margin-top:7px;
}

.fh-budget-lines {
  display:grid;
  gap:8px;
  margin-top:14px;
}

.fh-line {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
  padding-top:8px;
  border-top:1px solid #EDF2F5;
}

.fh-line span:first-child { color:var(--fh-gray); }
.fh-line strong { color:var(--fh-navy); }

.fh-property {
  display:grid;
  gap:12px;
}

.fh-property-img {
  height:86px;
  border-radius:14px;
  background:
    linear-gradient(135deg,rgba(2,115,175,.88),rgba(95,174,155,.8)),
    linear-gradient(90deg,#DDE8EE,#F5F9FB);
  position:relative;
  overflow:hidden;
}

.fh-property-img::before,
.fh-property-img::after {
  content:"";
  position:absolute;
  bottom:20px;
  background:rgba(255,255,255,.82);
  border-radius:6px 6px 0 0;
}

.fh-property-img::before {
  left:24px;
  width:48px;
  height:54px;
  clip-path:polygon(0 20%, 50% 0, 100% 20%, 100% 100%, 0 100%);
}

.fh-property-img::after {
  left:88px;
  width:72px;
  height:82px;
  clip-path:polygon(0 16%, 50% 0, 100% 16%, 100% 100%, 0 100%);
}

.fh-property h3 {
  font-size:17px;
  font-weight:800;
}

.fh-match-indicator {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:#F4FAF6;
  border:1px solid #D9EEDD;
  border-radius:12px;
  padding:10px 12px;
  color:#225E3A;
  font-size:13px;
  font-weight:800;
}

.fh-puzzle {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
  margin-top:14px;
}

.fh-piece {
  min-height:74px;
  border-radius:12px;
  padding:13px 12px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

.fh-piece--budget {
  background:#EAF5E6;
  color:#225E3A;
  border:1px solid #D1E8C8;
}

.fh-piece--home {
  background:#E8F5FB;
  color:#0B547B;
  border:1px solid #CDE8F4;
}

.fh-piece strong {
  font-size:14px;
  line-height:1.2;
}

.fh-piece span {
  font-size:12px;
  opacity:.86;
  margin-top:5px;
}

.fh-plus {
  width:32px;
  height:32px;
  border-radius:99px;
  background:#fff;
  border:1px solid var(--fh-border);
  display:grid;
  place-items:center;
  color:var(--fh-blue);
  font-weight:900;
  box-shadow:var(--fh-shadow-sm);
}


/* 12. Cards & grids ===================================================== */
.fh-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:22px;
}

.fh-card {
  background:#fff;
  border:1px solid var(--fh-border);
  border-radius:12px;
  padding:16px;
  box-shadow:var(--fh-shadow-sm);
}

/* Feature cards (3-up grids: "Решението", "Доверие") get more breathing room. */
.fh-grid--3 .fh-card { padding:26px 20px; }

.fh-icon {
  width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#E8F5FB;
  color:var(--fh-blue);
  font-weight:850;
  margin-bottom:10px;
}

.fh-card h3 {
  font-size:16px;
  font-weight:800;
  margin-bottom:7px;
}

.fh-card p {
  font-size:14px;
  color:var(--fh-gray);
}

.fh-problem .fh-icon {
  background:#FFF0EA;
  color:#B9502C;
}

/* Varied icon tints on the 3-up feature cards (like the platform's quick actions):
   1st stays blue (default), 2nd green, 3rd amber. */
.fh-grid--3 .fh-card:nth-child(2) .fh-icon { background:#EAF5E6; color:#4E8C3A; }
.fh-grid--3 .fh-card:nth-child(3) .fh-icon { background:#FFF3E6; color:#B9772C; }

.fh-card .fh-btn {
  white-space:normal;
  text-align:center;
  line-height:1.18;
}

/* Below the 3-column breakpoint the 6-up grid becomes a swipeable row rather
   than six stacked cards — it takes the section from ~1120px to ~510px on a
   375px screen. Snap points land one card at a time; the next card peeks by
   ~80px so the swipe is discoverable without dots or arrows. Deliberately no
   auto-advance: the text would move while it is being read. */
@media (max-width:899px) {
  .fh-grid--6 {
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:12px;
    /* Bleed to the viewport edges, then re-inset so the first and last card
       still line up with .fh-wrap's 18px gutter. */
    margin-inline:-18px;
    padding:4px 18px 12px;
  }

  .fh-grid--6::-webkit-scrollbar { display:none; }

  .fh-grid--6 .fh-card {
    flex:0 0 84%;
    scroll-snap-align:start;
  }
}


/* 13. Entry cards ======================================================= */
.fh-entry {
  display:flex;
  flex-direction:column;
  gap:12px;
  background:#fff;
  border:1px solid var(--fh-border);
  border-radius:12px;
  padding:18px;
  box-shadow:var(--fh-shadow-sm);
}

/* Icon badge sits on its own row above the title. */
.fh-entry-icon {
  width:46px;
  height:46px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:#E8F5FB;
  color:var(--fh-blue);
  flex:0 0 auto;
}

.fh-entry-icon svg {
  width:24px;
  height:24px;
  display:block;
}

.fh-entry-head { min-width:0; }

.fh-entry h3 {
  font-size:19px;
  font-weight:850;
  margin-bottom:5px;
}

/* Reserve a uniform 2-line title when cards sit side by side, so the
   subtitle / body text / button line up across all three entries. */
@media (min-width:760px) {
  .fh-entry h3 { min-height:2.32em; }
}

.fh-entry-sub {
  font-size:14px;
  font-weight:800;
  color:var(--fh-blue);
}

.fh-entry p {
  font-size:14px;
  color:var(--fh-gray);
}

.fh-entry .fh-btn {
  align-self:flex-start;
  margin-top:auto; /* pin the button to the card bottom so all three align */
}

/* Entry cards carry up to two CTAs: the platform login and the guides hub.
   The row (not the buttons) takes over the bottom-pinning so the pair stays
   aligned across all three cards. Sized to content, so a card with only one
   button still looks like the single-button version. */
.fh-entry-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:auto;
}

.fh-entry-actions .fh-btn {
  align-self:auto;
  margin-top:0;
}

.fh-list {
  list-style:none;
  padding:0;
  margin:16px 0 0;
  display:grid;
  gap:10px;
}

.fh-list li {
  display:flex;
  align-items:flex-start;
  gap:9px;
  color:var(--fh-navy);
  font-size:14px;
}

.fh-check {
  width:21px;
  height:21px;
  border-radius:8px;
  background:#EAF5E6;
  color:#225E3A;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  font-weight:900;
  margin-top:1px;
}

/* Entry cards — balanced three-entry layout */
.fh-entry-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:22px;
}


/* 14. Split sections & panels =========================================== */
.fh-split {
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
  align-items:center;
}

.fh-panel {
  background:#fff;
  border:1px solid var(--fh-border);
  border-radius:16px;
  padding:22px;
  box-shadow:var(--fh-shadow-sm);
}


/* 15. Email mock ======================================================== */
.fh-email {
  border:1px solid var(--fh-border);
  border-radius:14px;
  background:#fff;
  overflow:hidden;
  box-shadow:var(--fh-shadow);
}

.fh-email-head {
  background:#F7FAFC;
  border-bottom:1px solid var(--fh-border);
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.fh-email-title {
  font-size:13px;
  font-weight:850;
  color:var(--fh-navy);
}

.fh-email-meta {
  font-size:11px;
  font-weight:800;
  color:var(--fh-blue);
  background:#E8F5FB;
  padding:4px 8px;
  border-radius:999px;
}

.fh-email-body {
  padding:16px;
  display:grid;
  gap:12px;
}

.fh-mini-property {
  display:grid;
  grid-template-columns:74px 1fr;
  gap:12px;
  align-items:center;
  padding:10px;
  border:1px solid #EDF2F5;
  border-radius:14px;
  background:#fff;
}

.fh-mini-photo {
  height:62px;
  border-radius:12px;
  background:linear-gradient(135deg,rgba(2,115,175,.9),rgba(141,188,121,.82));
}

.fh-mini-property h4 {
  margin:0 0 4px;
  font-size:14px;
  color:var(--fh-navy);
}

.fh-mini-property p {
  margin:0;
  font-size:12.5px;
  color:var(--fh-gray);
}

.fh-match-bar {
  height:7px;
  border-radius:99px;
  background:#E7EDF2;
  overflow:hidden;
  margin-top:8px;
}

.fh-match-bar i {
  display:block;
  height:100%;
  border-radius:99px;
  background:var(--fh-green);
}


/* 16. Flow / steps ====================================================== */
.fh-flow {
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  margin-top:30px;
}

.fh-step {
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  padding:0 0 24px 0;
}

.fh-step:last-child { padding-bottom:0; }

.fh-step::before {
  content:"";
  position:absolute;
  top:40px;
  bottom:0;
  left:19px;
  width:2px;
  background:var(--fh-border);
}

.fh-step:last-child::before { display:none; }

.fh-step-no {
  width:40px;
  height:40px;
  border-radius:99px;
  background:var(--fh-blue);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:850;
  z-index:1;
}

.fh-step-body h3 {
  font-size:16px;
  margin-bottom:4px;
}

.fh-step-body p {
  color:var(--fh-gray);
  font-size:14px;
}


/* 17. Comparison ======================================================== */
.fh-compare {
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-top:30px;
}

.fh-compare-card {
  background:#fff;
  border:1px solid var(--fh-border);
  border-radius:14px;
  padding:22px;
  box-shadow:var(--fh-shadow-sm);
}

.fh-compare-card h3 {
  font-size:19px;
  font-weight:850;
  margin-bottom:14px;
}

.fh-compare-card ul {
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}

.fh-compare-card li {
  display:flex;
  gap:10px;
  font-size:14.5px;
  color:var(--fh-gray);
}

.fh-bad {
  color:#B9502C;
  font-weight:900;
}

.fh-good {
  color:#225E3A;
  font-weight:900;
}


/* 18. Forms ============================================================= */
.fh-form-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:30px;
  margin-top:30px;
  align-items:start;
}

.fh-form {
  background:#fff;
  border:1px solid var(--fh-border);
  border-radius:12px;
  padding:18px;
  box-shadow:var(--fh-shadow);
}

.fh-field { margin-bottom:14px; }

.fh-field label {
  display:block;
  font-size:13px;
  font-weight:800;
  color:var(--fh-navy);
  margin-bottom:6px;
}

.fh-field .req { color:var(--fh-danger); }

.fh-input, .fh-select {
  width:100%;
  font-family:inherit;
  font-size:15px;
  color:var(--fh-ink);
  padding:11px 13px;
  border:1px solid var(--fh-border);
  border-radius:10px;
  background:#fff;
}

.fh-input::placeholder { color:#9AA7BC; }

.fh-login-note {
  text-align:center;
  margin:12px 0 0;
  font-size:13.5px;
  color:var(--fh-gray);
}

.fh-login-note a {
  color:var(--fh-blue);
  font-weight:800;
}

.fh-login-note a:hover { text-decoration:underline; }

.fh-form-note {
  font-size:12.5px;
  color:var(--fh-gray);
  margin-top:12px;
}

.fh-dark-note {
  font-size:13px;
  color:rgba(216,230,236,.72);
  max-width:680px;
  margin:16px auto 0;
  line-height:1.5;
}


/* 19. Back-to-top & misc helpers ======================================== */
.fh-back-top {
  position:fixed;
  right:16px;
  bottom:18px;
  z-index:60;
  width:42px;
  height:42px;
  border-radius:999px;
  background:rgba(17,24,39,.92);
  color:#fff;
  display:grid;
  place-items:center;
  box-shadow:var(--fh-shadow);
  font-weight:900;
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:saturate(160%) blur(8px);
}

.fh-back-top:hover { background:var(--fh-blue); }

.fh-account-note {
  font-size:13px;
  color:var(--fh-gray);
  background:#F7FAFC;
  border:1px solid var(--fh-border);
  border-radius:13px;
  padding:12px;
  margin-bottom:16px;
}

.fh-agency-field[data-visible="false"] { display:none; }


/* 20. Dark CTA & footer ================================================= */
.fh-dark-cta { text-align:center; }

.fh-section--dark .fh-eyebrow { color:#8ED2E9; }

.fh-dark-cta h2 {
  color:#fff;
  font-size:28px;
  font-weight:850;
  max-width:720px;
  margin:0 auto;
}

.fh-dark-cta p {
  color:#AFC4CE;
  max-width:650px;
  margin:14px auto 27px;
}

.fh-footer {
  background:#02070A;
  color:#B8C8D0;
  padding:34px 0 24px;
}

.fh-footer-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
}

.fh-footer-logo {
  width:260px;
  max-width:100%;
  height:auto;
  display:block;
}

.fh-footer-tag {
  font-size:13px;
  color:#82929A;
  margin-top:12px;
  max-width:360px;
}

.fh-fcol h4 {
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#697981;
  margin:0 0 12px;
  font-weight:850;
}

.fh-fcol a, .fh-fcol span {
  display:block;
  margin-bottom:9px;
  font-size:14px;
  color:#B8C8D0;
}

.fh-fcol a:hover { color:#fff; }

.fh-footer-bottom {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:34px;
  padding-top:22px;
  border-top:1px solid #182329;
  color:#82929A;
  font-size:13px;
}


/* 20b. Sub-pages & legal documents ====================================== */
/* Title band at the top of inner pages (privacy.html, terms.html) */
.fh-page-head {
  background:linear-gradient(180deg,#F4FAF6 0%,#FFFFFF 100%);
  border-bottom:1px solid var(--fh-border);
  padding:36px 0 28px;
}

.fh-page-head h1 {
  font-size:30px;
  font-weight:850;
  letter-spacing:-.025em;
  max-width:820px;
}

.fh-page-meta {
  font-size:13px;
  color:var(--fh-gray);
  margin-top:10px;
}

/* Draft / disclaimer callout */
.fh-notice {
  max-width:820px;
  margin:0 0 26px;
  padding:14px 16px;
  border:1px solid #E7D9A8;
  background:#FCF8EC;
  border-radius:13px;
  font-size:13.5px;
  line-height:1.5;
  color:#6B5A1E;
}

.fh-notice strong { color:#5A4A12; }

/* Long-form legal body */
.fh-legal { max-width:820px; padding:34px 0 8px; }

.fh-legal > section { margin-bottom:26px; }

.fh-legal h2 {
  font-size:20px;
  font-weight:850;
  margin-bottom:10px;
  scroll-margin-top:calc(var(--fh-header-h) + 14px);
}

.fh-legal h3 {
  font-size:16px;
  font-weight:800;
  margin:16px 0 6px;
}

.fh-legal p { margin-bottom:10px; font-size:14.5px; color:var(--fh-ink); }
.fh-legal p.fh-legal-lead { color:var(--fh-gray); }

.fh-legal ul {
  margin:0 0 12px;
  padding-left:20px;
  display:grid;
  gap:7px;
}

.fh-legal li { font-size:14.5px; color:var(--fh-ink); }

.fh-legal a { color:var(--fh-blue); font-weight:600; }
.fh-legal a:hover { text-decoration:underline; }

/* the [brackets] in the draft that still need real data */
.fh-legal .fh-fill { color:var(--fh-danger); font-style:italic; }

@media (min-width:680px) {
  .fh-page-head { padding:52px 0 40px; }
  .fh-page-head h1 { font-size:38px; }
  .fh-legal h2 { font-size:22px; }
}


/* 20c. Cookie consent (injected by assets/js/consent.js) ================ */
.fh-consent {
  position:fixed;
  left:16px;
  right:16px;
  bottom:16px;
  z-index:80;
  max-width:760px;
  margin:0 auto;
  display:none;
  gap:16px 22px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  background:#fff;
  border:1px solid var(--fh-border);
  border-radius:12px;
  padding:18px 20px;
  box-shadow:0 2px 8px rgba(16,32,64,.10), 0 18px 44px rgba(16,32,64,.18);
}
.fh-consent.is-open { display:flex; }

.fh-consent-text { flex:1 1 320px; min-width:0; }
.fh-consent-title { font-size:16px; font-weight:850; margin:0 0 5px; }
.fh-consent-body { font-size:13.5px; color:var(--fh-gray); margin:0; line-height:1.5; }
.fh-consent-body a { color:var(--fh-blue); font-weight:700; }
.fh-consent-body a:hover { text-decoration:underline; }

.fh-consent-actions { display:flex; flex-wrap:wrap; gap:9px; align-items:center; }

.fh-c-btn {
  font-family:inherit;
  font-size:14px;
  font-weight:800;
  line-height:1;
  border-radius:10px;
  padding:11px 16px;
  cursor:pointer;
  border:1px solid transparent;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
/* Accept and Reject carry equal visual weight (КЗЛД/EDPB requirement). */
.fh-c-primary { background:var(--fh-green); color:#fff; }
.fh-c-primary:hover { background:var(--fh-green-700); }
.fh-c-secondary { background:#fff; color:var(--fh-navy); border-color:var(--fh-border); }
.fh-c-secondary:hover { border-color:var(--fh-blue); color:var(--fh-blue); }
.fh-c-link {
  background:transparent;
  border:0;
  color:var(--fh-gray);
  font-weight:700;
  padding:11px 8px;
  text-decoration:underline;
}
.fh-c-link:hover { color:var(--fh-blue); }

/* Preferences modal */
.fh-consent-modal { position:fixed; inset:0; z-index:90; display:none; }
.fh-consent-modal.is-open { display:block; }
.fh-consent-backdrop {
  position:absolute; inset:0;
  background:rgba(7,19,26,.55);
  backdrop-filter:blur(2px);
}
.fh-consent-dialog {
  position:relative;
  max-width:520px;
  margin:8vh auto 0;
  width:calc(100% - 32px);
  max-height:84vh;
  overflow-y:auto;
  background:#fff;
  border-radius:14px;
  padding:24px;
  box-shadow:0 24px 60px rgba(7,19,26,.35);
}
.fh-consent-x {
  position:absolute; top:12px; right:14px;
  width:34px; height:34px;
  border:0; border-radius:9px;
  background:transparent; color:var(--fh-gray);
  font-size:24px; line-height:1; cursor:pointer;
}
.fh-consent-x:hover { background:var(--fh-light); color:var(--fh-navy); }

.fh-consent-cats { display:grid; gap:10px; margin:18px 0 22px; }
.fh-consent-cat {
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  border:1px solid var(--fh-border);
  border-radius:13px;
  padding:14px 16px;
}
.fh-consent-cat-name { display:block; font-weight:800; font-size:14.5px; color:var(--fh-navy); }
.fh-consent-always { font-style:normal; font-weight:700; font-size:12px; color:#225E3A; }
.fh-consent-cat-desc { display:block; font-size:13px; color:var(--fh-gray); margin-top:3px; }

/* toggle switch */
.fh-consent-switch { flex:0 0 auto; position:relative; width:44px; height:26px; margin-top:2px; }
.fh-consent-switch input { position:absolute; inset:0; margin:0; opacity:0; cursor:pointer; }
.fh-consent-track {
  position:absolute; inset:0;
  background:#CBD5DF; border-radius:99px;
  transition:background .15s ease;
}
.fh-consent-track::after {
  content:""; position:absolute; top:3px; left:3px;
  width:20px; height:20px; border-radius:99px; background:#fff;
  box-shadow:0 1px 3px rgba(16,32,64,.3);
  transition:transform .15s ease;
}
.fh-consent-switch input:checked + .fh-consent-track { background:var(--fh-blue); }
.fh-consent-switch input:checked + .fh-consent-track::after { transform:translateX(18px); }
.fh-consent-switch input:disabled + .fh-consent-track { background:var(--fh-green); opacity:.9; cursor:not-allowed; }
.fh-consent-switch input:focus-visible + .fh-consent-track { outline:3px solid rgba(2,115,175,.35); outline-offset:2px; }

@media (max-width:560px) {
  .fh-consent { padding:16px; }
  .fh-consent-actions { width:100%; }
  .fh-consent-actions .fh-c-primary,
  .fh-consent-actions .fh-c-secondary { flex:1 1 auto; text-align:center; justify-content:center; }
}

@media (prefers-reduced-motion:reduce) {
  .fh-consent-track, .fh-consent-track::after { transition:none; }
}


/* 21. Responsive — mobile (<=679px) ===================================== */
@media (max-width:679px) {
  :root { --fh-header-h:66px; }

  .fh-header .fh-wrap { padding-left:18px; padding-right:18px; }
  .fh-nav { min-height:66px; }
  .fh-brand { gap:10px; }
  .fh-symbol { width:36px; height:36px; }
  .fh-brand-word { font-size:23px; }
  .fh-brand-sub { font-size:8.5px; letter-spacing:.11em; }
  .fh-btn { padding:10px 14px; font-size:14px; border-radius:9px; }

  .fh-hero-cta .fh-btn {
    white-space:normal;
    text-align:center;
    line-height:1.18;
  }
  .fh-entry .fh-btn {
    white-space:normal;
    text-align:center;
    line-height:1.18;
  }
  .fh-btn--sm { padding:8px 12px; font-size:13.5px; }

  .fh-eyebrow { font-size:11px; margin-bottom:9px; }
  .fh-section { padding:40px 0; }
  .fh-section + .fh-section { border-top:1px solid rgba(221,232,238,.5); }

  .fh-card,
  .fh-entry,
  .fh-compare-card,
  .fh-panel,
  .fh-form { box-shadow:0 1px 2px rgba(16,32,64,.04), 0 5px 16px rgba(16,32,64,.045); }

  .fh-grid--6 .fh-card,
  .fh-grid--3 .fh-card { min-height:auto; }

  .fh-card h3 { margin-bottom:5px; }
  .fh-card p { line-height:1.48; }

  /* Mobile: make generic cards consistent with entry cards — icon + title in one row */
  .fh-card {
    display:grid;
    grid-template-columns:34px 1fr;
    column-gap:12px;
    row-gap:6px;
    align-items:start;
  }

  .fh-card .fh-icon {
    grid-column:1;
    grid-row:1;
    margin-bottom:0;
  }

  .fh-card h3 {
    grid-column:2;
    grid-row:1;
    align-self:center;
    margin-bottom:0;
    padding-top:2px;
  }

  .fh-card p,
  .fh-card .fh-btn {
    grid-column:1 / -1;
  }

  .fh-card .fh-btn {
    justify-self:start;
    margin-top:8px !important;
  }

  .fh-grid--6 .fh-card,
  .fh-grid--3 .fh-card {
    row-gap:8px;
  }

  .fh-icon {
    border-radius:11px;
    font-size:15px;
  }

  .fh-problem .fh-icon { margin-bottom:9px; }

  .fh-entry .fh-btn { width:auto; min-width:150px; }

  /* Two CTAs will not both clear the 150px floor inside a ~303px card, so
     inside the actions row the buttons size to their label instead. */
  .fh-entry-actions .fh-btn { min-width:0; }

  .fh-entry-grid { margin-top:18px; }
  .fh-entry-grid .fh-entry:nth-child(3) {
    border-color:#CDE8F4;
    background:linear-gradient(180deg,#FFFFFF 0%,#F8FCFE 100%);
  }
  .fh-entry-grid .fh-entry:nth-child(3) .fh-btn { align-self:start; }

  .fh-flow { margin-top:22px; }
  .fh-step { padding-bottom:18px; }
  .fh-step-no { width:34px; height:34px; font-size:14px; }
  .fh-step::before { top:34px; left:16px; }
  .fh-step-body h3 { font-size:15px; }
  .fh-step-body p { font-size:13.5px; }

  .fh-email-body { padding:12px; gap:10px; }
  .fh-mini-property { grid-template-columns:60px 1fr; gap:10px; padding:8px; }
  .fh-mini-photo { height:52px; }

  .fh-compare { margin-top:22px; gap:12px; }
  .fh-compare-card { padding:17px; }
  .fh-compare-card h3 { font-size:17px; margin-bottom:10px; }

  .fh-dark-cta h2 { font-size:24px; }
  .fh-dark-cta p { font-size:15px; margin-bottom:20px; }

  .fh-footer-logo { width:210px; }

  .fh-back-top { bottom:18px; right:14px; }
}


/* 22. Responsive — tablet (>=680px) ===================================== */
@media (min-width:680px) {
  .fh-hero h1 { font-size:44px; }
  .fh-h2 { font-size:32px; }
  .fh-grid { grid-template-columns:1fr 1fr; }
  .fh-match { grid-template-columns:1fr 1fr; }
  .fh-match-card--wide { grid-column:1 / -1; }
  .fh-compare { grid-template-columns:1fr 1fr; }
}

@media (min-width:760px) and (max-width:1099px) {
  .fh-entry-grid { grid-template-columns:1fr 1fr; }
  .fh-entry-grid .fh-entry:nth-child(3) {
    grid-column:1 / -1;
    max-width:560px;
    justify-self:center;
  }
}


/* 23. Responsive — desktop (>=900px) ==================================== */
@media (min-width:900px) {
  .fh-desktop-cta { display:inline-flex; }
  .fh-nav-actions .fh-lang { display:inline-flex; }
  .fh-burger { display:none; }
  .fh-mobile-menu { display:none; }

  .fh-section { padding:60px 0; }
  .fh-navlinks { display:flex; }
  .fh-hero-grid { grid-template-columns:1.03fr .97fr; gap:48px; }
  .fh-hero h1 { font-size:52px; }
  .fh-grid--3 { grid-template-columns:repeat(3,1fr); }
  .fh-grid--6 { grid-template-columns:repeat(3,1fr); }
  .fh-split { grid-template-columns:.94fr 1.06fr; gap:44px; }
  .fh-split--reverse { grid-template-columns:1.06fr .94fr; }
  .fh-form-grid { grid-template-columns:1.02fr .98fr; gap:44px; }
  .fh-footer-grid { grid-template-columns:1.4fr 1fr 1fr; }
  .fh-footer-bottom {
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
  }
  .fh-flow {
    grid-template-columns:repeat(6,1fr);
    gap:10px;
  }
  .fh-step {
    grid-template-columns:1fr;
    gap:12px;
    padding:0;
  }
  .fh-step::before {
    top:19px;
    left:40px;
    right:0;
    bottom:auto;
    width:auto;
    height:2px;
  }
  .fh-step-body h3 { font-size:14px; }
  .fh-step-body p { font-size:12.5px; }
}

@media (min-width:1100px) {
  .fh-entry-grid {
    grid-template-columns:repeat(3,1fr);
    gap:15px;
  }
}


/* 24. Responsive — wide (>=1100px) ====================================== */
/* The 6-up grid deliberately stops at 3 columns (see the >=900px block) and
   wraps onto two rows. Six across leaves ~230px per card, which breaks the
   Bulgarian headings onto three lines and makes the row heights ragged. */


/* 25. Reduced motion ==================================================== */
@media (prefers-reduced-motion:reduce) {
  html, * { scroll-behavior:auto !important; transition:none !important; }
}


/* 26. Market-analysis pages (pazar-*.html) ============================== */
/* Imported city market research, re-skinned with our tokens. The hero here
   is `.fh-mhero` (not `.fh-hero`) to avoid clashing with the homepage hero. */
.fh-mhero { padding:36px 0 30px; }
.fh-mhero h1 { font-size:28px; font-weight:850; letter-spacing:-.03em; max-width:820px; }
.fh-mhero-sub { font-size:15.5px; color:var(--fh-gray); margin-top:14px; max-width:760px; }

.fh-updated {
  display:inline-block;
  margin-top:16px;
  font-size:12px;
  font-weight:800;
  color:var(--fh-blue);
  background:#E8F5FB;
  border:1px solid #CDE8F4;
  border-radius:999px;
  padding:6px 12px;
}

/* City switcher strip */
.fh-cities { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; align-items:center; }
.fh-cities .lbl {
  font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--fh-gray); margin-right:4px;
}
.fh-cities a {
  font-size:13.5px; font-weight:700; color:#3C485B; background:#fff;
  border:1px solid var(--fh-border); border-radius:999px; padding:7px 13px;
}
.fh-cities a:hover { border-color:var(--fh-blue); color:var(--fh-blue); }
.fh-cities a[aria-current="page"] { background:var(--fh-blue); border-color:var(--fh-blue); color:#fff; }

/* KPI cards */
.fh-kpis { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px; }
.fh-kpi {
  background:#fff; border:1px solid var(--fh-border); border-radius:12px;
  padding:18px; box-shadow:var(--fh-shadow-sm);
}
.fh-kpi-big { font-size:26px; font-weight:850; color:var(--fh-blue); letter-spacing:-.03em; line-height:1.05; }
.fh-kpi h3 { font-size:13.5px; font-weight:800; margin-top:8px; }
.fh-kpi p { font-size:12.5px; color:var(--fh-gray); margin-top:5px; }

/* Tighter section rhythm for short prose sections (::::section compact) */
.fh-section--compact { padding:36px 0; }
@media (min-width:900px) {
  .fh-section--compact { padding:52px 0; }
}

/* Long-form article body */
.fh-narrow { max-width:900px; }
.fh-article h2 { font-size:21px; font-weight:850; margin-top:0; }
.fh-article h3 { font-size:16.5px; font-weight:800; margin-top:24px; }
.fh-article p { font-size:15px; color:#3C485B; margin-top:12px; }
.fh-article ul { margin:12px 0 0; padding-left:22px; color:#3C485B; font-size:15px; }
.fh-article li { margin-top:8px; }
.fh-article li::marker { color:var(--fh-green); }

.fh-callout {
  margin-top:18px; padding:16px 18px; border-radius:14px;
  background:var(--fh-soft); border:1px solid #D9EEDD; font-size:14px; color:#1E3A2B;
}
.fh-callout strong { color:#14301F; }
.fh-callout--blue { background:#E8F5FB; border-color:#CDE8F4; color:#0B3B55; }
.fh-callout--blue strong { color:#062C40; }

/* Neighbourhood price table (scoped to article so it can't leak) */
.fh-article table {
  width:100%; border-collapse:collapse; margin-top:16px; font-size:14px; background:#fff;
  border:1px solid var(--fh-border); border-radius:14px; overflow:hidden; box-shadow:var(--fh-shadow-sm);
}
.fh-article th, .fh-article td {
  text-align:left; padding:11px 13px; border-bottom:1px solid #EDF2F5; vertical-align:top;
}
.fh-article th {
  background:var(--fh-light); font-size:12.5px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--fh-gray);
}
.fh-article tr:last-child td { border-bottom:none; }
.fh-article td strong { color:var(--fh-navy); }
/* Ranges may wrap (e.g. onto two rows on mobile). Non-breaking spaces inside the
   numbers keep each value intact, so a range only breaks at the " – ". */
.fh-price { font-weight:800; color:var(--fh-blue); }

/* Tighten the price table on small screens so it never overflows the viewport. */
@media (max-width:560px) {
  .fh-article th, .fh-article td { padding:9px 10px; font-size:13px; }
  .fh-article table { font-size:13px; }
}

/* Buyer / seller perspective blocks */
.fh-persp {
  border-radius:16px; padding:24px 22px; border:1px solid var(--fh-border);
  background:#fff; box-shadow:var(--fh-shadow-sm);
}
.fh-persp + .fh-persp { margin-top:22px; }
.fh-persp-tag {
  display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; border-radius:999px; padding:5px 11px;
}
.fh-persp--buy .fh-persp-tag { background:#E8F5FB; color:var(--fh-blue); border:1px solid #CDE8F4; }
.fh-persp--sell .fh-persp-tag { background:#EAF5E6; color:#225E3A; border:1px solid #D1E8C8; }
.fh-persp h2 { font-size:21px; margin-top:12px; }
.fh-persp p { font-size:15px; color:#3C485B; margin-top:12px; }
.fh-persp ul { margin:12px 0 0; padding-left:22px; color:#3C485B; font-size:15px; }
.fh-persp li { margin-top:8px; }
.fh-persp li::marker { color:var(--fh-green); }

/* Sources */
.fh-sources {
  font-size:12.5px; color:var(--fh-gray); margin-top:28px; padding-top:16px;
  border-top:1px solid var(--fh-border); max-width:900px;
}
.fh-sources li { margin-top:5px; }

/* City buttons block on the homepage ("Пазарни анализи") */
.fh-market-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.fh-market-links .fh-btn { font-size:14px; padding:10px 16px; }

@media (min-width:760px) {
  .fh-mhero h1 { font-size:36px; }
  .fh-kpis { grid-template-columns:repeat(4,1fr); }
  .fh-kpis--3 { grid-template-columns:repeat(3,1fr); }
  .fh-kpis--2 { grid-template-columns:repeat(2,1fr); }
}


/* 27. Guide pages (guides/*.html) ======================================= */
/* Buyer/seller guides. They reuse the market-analysis furniture — .fh-mhero,
   .fh-narrow, .fh-article, .fh-callout, .fh-updated — and add the components
   below. Note the numbered steps are .fh-gstep, NOT .fh-step: .fh-step is the
   homepage's "Как работи" flow item and carries a connector line. */

/* Hub cards — the 3-up guide index on guides/kupuvachi.html & prodavachi.html */
.fh-guide-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-top:24px;
}

.fh-guide-card {
  display:flex;
  flex-direction:column;
  gap:9px;
  background:#fff;
  border:1px solid var(--fh-border);
  border-radius:14px;
  padding:22px 20px;
  box-shadow:var(--fh-shadow-sm);
  text-decoration:none;
  color:inherit;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.fh-guide-card:hover {
  border-color:#CDE8F4;
  box-shadow:var(--fh-shadow);
  transform:translateY(-2px);
}

.fh-guide-card .fh-icon { margin-bottom:2px; }
.fh-guide-card h3 { font-size:17.5px; font-weight:850; color:var(--fh-navy); }
.fh-guide-card p { font-size:14.5px; color:var(--fh-gray); }

.fh-guide-more {
  margin-top:auto;
  padding-top:6px;
  font-size:14px;
  font-weight:800;
  color:var(--fh-blue);
}

/* Regulatory "big number" cards (mortgage guide: the three BNB limits) */
.fh-rules {
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:22px;
}

.fh-rule {
  background:#fff;
  border:1px solid var(--fh-border);
  border-radius:12px;
  padding:20px;
  box-shadow:var(--fh-shadow-sm);
}

.fh-rule-big {
  font-size:30px;
  font-weight:850;
  letter-spacing:-.02em;
  color:var(--fh-blue);
  margin-bottom:8px;
}

.fh-rule h3 { font-size:16px; font-weight:800; margin-bottom:6px; }
.fh-rule p { font-size:14px; color:var(--fh-gray); }

/* Numbered steps with an optional time estimate */
.fh-gsteps {
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:22px;
}

.fh-gstep {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:start;
  background:#fff;
  border:1px solid var(--fh-border);
  border-radius:12px;
  padding:18px;
  box-shadow:var(--fh-shadow-sm);
}

.fh-gstep-num {
  width:34px;
  height:34px;
  border-radius:11px;
  display:grid;
  place-items:center;
  background:#E8F5FB;
  color:var(--fh-blue);
  font-weight:850;
  flex:0 0 auto;
}

.fh-gstep h3 { font-size:16px; font-weight:800; margin-bottom:5px; }
.fh-gstep p { font-size:14px; color:var(--fh-gray); }

.fh-gstep-time {
  display:inline-block;
  margin-top:8px;
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.02em;
  color:#225E3A;
  background:#EAF5E6;
  border-radius:99px;
  padding:3px 10px;
}

/* Interactive checklist — phases of ticked items with a progress bar */
.fh-progress-card {
  background:#fff;
  border:1px solid var(--fh-border);
  border-radius:14px;
  padding:18px 20px;
  box-shadow:var(--fh-shadow-sm);
  margin-top:22px;
}

.fh-progress-top {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:space-between;
  align-items:baseline;
  font-size:14px;
  font-weight:800;
  color:var(--fh-navy);
}

.fh-progress-bar {
  height:9px;
  border-radius:99px;
  background:#EDF1F4;
  overflow:hidden;
  margin-top:11px;
}

.fh-progress-fill {
  display:block;
  height:100%;
  width:0;
  border-radius:99px;
  background:var(--fh-green);
  transition:width .25s ease;
}

.fh-progress-note {
  margin-top:10px;
  font-size:13px;
  color:var(--fh-gray);
}

.fh-phase { margin-top:26px; }

.fh-phase-head {
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:12px;
}

.fh-phase-num {
  width:30px;
  height:30px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:#E8F5FB;
  color:var(--fh-blue);
  font-weight:850;
  font-size:14px;
  flex:0 0 auto;
}

.fh-phase-head h2 { font-size:19px; font-weight:850; margin:0; }

.fh-items {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:8px;
}

.fh-item {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:11px;
  align-items:start;
  background:#fff;
  border:1px solid var(--fh-border);
  border-radius:11px;
  padding:13px 15px;
  box-shadow:var(--fh-shadow-sm);
  font-size:14.5px;
  color:#3C485B;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}

.fh-item:hover { border-color:#CDE8F4; }

.fh-item input[type=checkbox] {
  width:19px;
  height:19px;
  margin-top:1px;
  accent-color:var(--fh-green);
  flex:0 0 auto;
  cursor:pointer;
}

.fh-item.done {
  background:#F6FBF4;
  border-color:#D6EACD;
  color:var(--fh-gray);
}

/* Strike only the bold lead-in, so the explanatory tail and any .fh-warn
   inside the label stay readable once the item is ticked. */
.fh-item.done label > strong { text-decoration:line-through; }

.fh-item label { cursor:pointer; }

.fh-warn {
  display:block;
  margin-top:10px;
  background:#FFF6ED;
  border:1px solid #F4DCC0;
  border-radius:11px;
  padding:13px 15px;
  font-size:14px;
  color:#6B4415;
}

.fh-warn strong { color:#4A2E0B; }

/* Collapsible FAQ */
.fh-faq {
  border:1px solid var(--fh-border);
  border-radius:12px;
  background:#fff;
  padding:0 16px;
  margin-top:10px;
  box-shadow:var(--fh-shadow-sm);
}

.fh-faq summary {
  cursor:pointer;
  list-style:none;
  padding:15px 26px 15px 0;
  font-size:15px;
  font-weight:800;
  color:var(--fh-navy);
  position:relative;
}

.fh-faq summary::-webkit-details-marker { display:none; }

.fh-faq summary::after {
  content:'+';
  position:absolute;
  right:2px;
  top:50%;
  transform:translateY(-50%);
  font-size:19px;
  font-weight:700;
  color:var(--fh-blue);
}

.fh-faq[open] summary::after { content:'–'; }

.fh-faq-body {
  padding:0 0 16px;
  font-size:14.5px;
  color:#3C485B;
}

.fh-faq-body p + p { margin-top:10px; }

/* Closing CTA band + the legal note that follows it */
.fh-cta-band {
  background:#07131A;
  color:#D8E6EC;
  border-radius:16px;
  padding:30px 24px;
  margin-top:30px;
  text-align:center;
}

.fh-cta-band h2 { font-size:23px; font-weight:850; color:#fff; margin:0 0 10px; }
.fh-cta-band p { font-size:15px; color:#B9CFD9; max-width:620px; margin:0 auto 18px; }

.fh-disclaimer {
  margin-top:20px;
  font-size:12.5px;
  line-height:1.62;
  color:var(--fh-gray);
}

/* "Свързани ресурси" cross-links at the foot of every guide */
.fh-rel-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:20px;
}

.fh-rel-card {
  display:block;
  background:#fff;
  border:1px solid var(--fh-border);
  border-radius:12px;
  padding:16px 18px;
  box-shadow:var(--fh-shadow-sm);
  text-decoration:none;
  transition:border-color .15s ease, transform .15s ease;
}

.fh-rel-card:hover { border-color:#CDE8F4; transform:translateY(-2px); }
.fh-rel-card strong { display:block; font-size:15px; color:var(--fh-navy); margin-bottom:4px; }
.fh-rel-card span { font-size:13.5px; color:var(--fh-gray); }

/* Wide tables (5+ columns) scroll inside their own box instead of pushing the
   page sideways. The 3-column price tables in researches/ don't need this; the
   comparison tables in the finance guides do. */
.fh-tablewrap {
  margin-top:16px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.fh-tablewrap > table { margin-top:0; min-width:620px; }

/* Caption under a table — same treatment the researches pages apply inline. */
.fh-table-cap {
  margin-top:10px;
  font-size:13px;
  line-height:1.6;
  color:var(--fh-gray);
}

/* Cell emphasis inside an article table. Blue = the published/headline figure,
   green = what it actually works out to in practice, grey = not applicable. */
.fh-article .muted  { color:var(--fh-gray); }
.fh-article .accent { font-weight:800; color:var(--fh-blue); }
.fh-article .real   { font-weight:800; color:#225E3A; }
.fh-article .neg    { font-weight:800; color:var(--fh-danger); }

/* Links inside running text. The reset makes every <a> inherit its colour,
   which left links in articles, callouts and source lists invisible. */
.fh-article p a:not(.fh-btn), .fh-article li a:not(.fh-btn),
.fh-callout a, .fh-sources a {
  color:var(--fh-blue); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:2px;
}
.fh-article p a:not(.fh-btn):hover, .fh-article li a:not(.fh-btn):hover,
.fh-callout a:hover, .fh-sources a:hover { color:var(--fh-blue-700); }

/* Data tables in blog articles: numbers align right, a highlighted row
   (usually Bulgaria), a totals footer, and small pass/fail marks. */
.fh-article table.fh-data td, .fh-article table.fh-data th { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.fh-article table.fh-data td:first-child, .fh-article table.fh-data th:first-child { text-align:left; }
.fh-article table.fh-data tr.hl td { background:#FFF8E6; }
.fh-article table.fh-data tfoot td { font-weight:800; color:var(--fh-navy); background:var(--fh-light); border-top:2px solid var(--fh-border); }
.fh-mark {
  display:inline-block; min-width:20px; height:20px; line-height:20px; margin-left:4px;
  border-radius:10px; text-align:center; font-size:11.5px; font-weight:800;
}
.fh-mark--ok   { background:#E7F3EA; color:#225E3A; }
.fh-mark--no   { background:#FBEAE8; color:var(--fh-danger); }
.fh-mark--warn { background:#FDF3E1; color:#8A5A12; }
.fh-mark--eu   { background:#E3F0F8; color:var(--fh-blue); margin-left:0; }
.fh-mark--out  { background:var(--fh-danger); color:#fff; margin-left:0; }

/* Paired horizontal bars: share of countries vs share of GDP. */
.fh-bars {
  margin-top:16px; padding:16px 18px; background:#fff;
  border:1px solid var(--fh-border); border-radius:14px; box-shadow:var(--fh-shadow-sm);
}
.fh-bars-legend { display:flex; flex-wrap:wrap; gap:16px; font-size:13px; color:var(--fh-gray); margin-bottom:6px; }
.fh-bars-legend i { display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.fh-bars-row {
  display:grid; grid-template-columns:104px 1fr; gap:12px; align-items:center;
  padding:9px 0; border-top:1px solid #EDF2F5; font-size:14px; color:var(--fh-ink);
}
.fh-bars-row > div { display:flex; flex-direction:column; gap:4px; padding-right:48px; }
.fh-bars-row s { position:relative; display:block; height:14px; min-width:3px; border-radius:0 4px 4px 0; text-decoration:none; }
.fh-bars-row s em {
  position:absolute; left:calc(100% + 6px); top:50%; transform:translateY(-50%);
  font-style:normal; font-size:12.5px; font-weight:800; color:var(--fh-navy); white-space:nowrap;
}
.fh-bars-n { background:#B9D5E6; }
.fh-bars-w { background:var(--fh-blue); }
@media (max-width:560px) {
  .fh-bars-row { grid-template-columns:82px 1fr; font-size:13px; }
}

/* Amber callout — the same warning palette as .fh-warn, at callout size. */
.fh-callout--warn { background:#FDF6E8; border-color:#F2E2BE; color:#4A2E0B; }
.fh-callout--warn strong { color:#3A2408; }

/* Inline code — used for cadastral identifiers and similar literal strings. */
code {
  font-family:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size:.92em;
  background:var(--fh-light);
  border:1px solid var(--fh-border);
  border-radius:5px;
  padding:1px 5px;
  white-space:nowrap;
}

@media (min-width:680px) {
  .fh-rules { grid-template-columns:repeat(3,1fr); }
  .fh-rel-grid { grid-template-columns:repeat(3,1fr); }
  .fh-guide-grid { grid-template-columns:repeat(3,1fr); }
  /* Four hub cards read better as a 2×2 block than as 3 + a lonely orphan. */
  .fh-guide-grid--4 { grid-template-columns:repeat(2,1fr); }
}

@media (min-width:760px) {
  .fh-cta-band { padding:40px 32px; }
  .fh-cta-band h2 { font-size:27px; }
}

/* Paired positive/negative columns. Used for the price adjusters (повишават /
   понижават) and the photo do/don't lists — same shape, different labels, so
   they share one component with a colour modifier. */
.fh-duo {
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:22px;
}

.fh-duo-col {
  background:#fff;
  border:1px solid var(--fh-border);
  border-radius:12px;
  padding:20px;
  box-shadow:var(--fh-shadow-sm);
}

.fh-duo-col h3 {
  font-size:15.5px;
  font-weight:850;
  margin-bottom:10px;
  padding-left:26px;
  position:relative;
}

.fh-duo-col h3::before {
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:19px;
  height:19px;
  border-radius:7px;
  display:grid;
  place-items:center;
  font-size:13px;
  font-weight:900;
}

.fh-duo-col--pos { border-color:#D6EACD; }
.fh-duo-col--pos h3 { color:#225E3A; }
.fh-duo-col--pos h3::before { content:'+'; background:#EAF5E6; color:#225E3A; }

.fh-duo-col--neg { border-color:#F4DCC0; }
.fh-duo-col--neg h3 { color:#8A4B12; }
.fh-duo-col--neg h3::before { content:'–'; background:#FFF0EA; color:#B9502C; }

.fh-duo-col ul {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:8px;
}

.fh-duo-col li {
  font-size:14px;
  color:#3C485B;
  padding-left:15px;
  position:relative;
}

.fh-duo-col li::before {
  content:'';
  position:absolute;
  left:0;
  top:8px;
  width:5px;
  height:5px;
  border-radius:99px;
  background:var(--fh-gray);
}

/* Time-of-day cards (photo guide: when to shoot what) */
.fh-tod-card {
  background:#fff;
  border:1px solid var(--fh-border);
  border-radius:12px;
  padding:18px;
  box-shadow:var(--fh-shadow-sm);
}

.fh-tod-when {
  display:inline-block;
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--fh-blue);
  background:#E8F5FB;
  border-radius:99px;
  padding:4px 11px;
  margin-bottom:10px;
}

.fh-tod-card h3 { font-size:16px; font-weight:800; margin-bottom:6px; }
.fh-tod-card p { font-size:14px; color:var(--fh-gray); }

/* Numbered shot list — denser than .fh-gstep, one line of copy per row */
.fh-shots {
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin-top:20px;
}

.fh-shot {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:start;
  background:#fff;
  border:1px solid var(--fh-border);
  border-radius:11px;
  padding:13px 15px;
  box-shadow:var(--fh-shadow-sm);
  font-size:14.5px;
  color:#3C485B;
}

.fh-shot-n {
  width:26px;
  height:26px;
  border-radius:9px;
  display:grid;
  place-items:center;
  background:#E8F5FB;
  color:var(--fh-blue);
  font-weight:850;
  font-size:13px;
  flex:0 0 auto;
}

.fh-shot strong { color:var(--fh-navy); }

@media (min-width:680px) {
  .fh-duo { grid-template-columns:1fr 1fr; }
  .fh-tods { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:22px; }
}

@media (min-width:900px) {
  .fh-shots { grid-template-columns:1fr 1fr; }
}

/* Embedded third-party lead form (budget-now.html). The form markup is injected
   into #lending-free-slot by future.lendingfree.eu/embedForm.js (into a shadow
   root), so this is just the hosting card. min-height reserves space so the page
   doesn't jump when the form arrives. */
.fh-form-embed {
  background:#fff;
  border:1px solid var(--fh-border);
  border-radius:16px;
  padding:0;
  box-shadow:var(--fh-shadow-sm);
  margin-top:24px;
  min-height:220px;
  overflow: hidden;
}

@media (min-width:760px) {
  .fh-form-embed { padding:30px; }
}

/* =========================================================================
   28. Clickable vs. readable containers
   -------------------------------------------------------------------------
   The guide hubs put four link cards next to callouts, tables and note boxes
   that share the same white fill, 1px border, 14px radius and small shadow —
   so nothing said which ones go somewhere. Hover said it, but hover does not
   exist on a phone, and the small blue "Към ръководството →" read as a label
   rather than a control.

   The fix is to spend the signals by role rather than adding more of them:
   a card that is a link now carries a link's conventions at rest (an
   underlined call to action, a pointer, an arrow that moves), and a container
   that is only content gives up the shadow that made it look like an object.
   ========================================================================= */

/* ---- links that happen to be cards ------------------------------------ */
.fh-guide-card,
.fh-rel-card {
  cursor: pointer;
  /* A link card is a single target: keep the whole thing one focus ring
     rather than letting a nested element take it. */
  position: relative;
}

.fh-guide-card:focus-visible,
.fh-rel-card:focus-visible {
  outline: 2px solid var(--fh-blue);
  outline-offset: 3px;
  border-color: var(--fh-blue);
}

/* The brand gradient marks the interactive family.
   -------------------------------------------------------------------------
   Scoped to .fh-guide-card on purpose: .fh-icon is also used twelve times on
   the homepage inside .fh-card, which is NOT clickable. Filling it globally
   would mark the wrong things as actionable — the exact opposite of the point.

   The gradient runs to 75% rather than 100% so the blue end dominates the
   centre of the chip, where the glyph sits: white on the pure green is the
   platform's own low-contrast pairing and is fine on a button, but a 34px
   badge needs the darker half under the character. */
.fh-guide-card .fh-icon {
  background: linear-gradient(135deg, var(--fh-green) 0%, var(--fh-blue) 75%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(2, 115, 175, .22);
}

/* The call to action reads as a link at rest: underlined, not merely blue.
   -------------------------------------------------------------------------
   `align-self: flex-start` is load-bearing. .fh-guide-card is a flex column,
   which blockifies its children and stretches them to full width — so an
   underline on this element ran the entire width of the card and read as a
   second stray divider rather than as a link. It has to shrink to its text.

   Plain blue rather than a gradient: the card's background is the gradient
   now, and a second one here would compete with it. */
.fh-guide-more {
  align-self: flex-start;
  text-decoration: underline;
  text-decoration-color: rgba(2, 115, 175, .4);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: text-decoration-color .15s ease, transform .15s ease;
}

.fh-guide-card:hover .fh-guide-more,
.fh-guide-card:focus-visible .fh-guide-more {
  text-decoration-color: currentColor;
  transform: translateX(2px);
}

/* The related cards have no icon to carry the gradient, so their arrow does. */
/* The related cards have no icon to carry the gradient, so their arrow does.
   The gradient text is applied only where background-clip:text is supported —
   `color: transparent` without it renders an invisible arrow, which is how the
   first attempt at this failed. */
.fh-rel-card { padding-right: 40px; }

.fh-rel-card::after {
  content: "→";
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  color: var(--fh-blue);
  opacity: .7;
  transition: opacity .15s ease, transform .15s ease;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .fh-rel-card::after {
    background: linear-gradient(135deg, var(--fh-green), var(--fh-blue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.fh-rel-card:hover::after,
.fh-rel-card:focus-visible::after {
  opacity: 1;
  transform: translateX(3px);
}

/* The card's own background carries the gradient.
   -------------------------------------------------------------------------
   An earlier attempt drew it as a 3px bar along the top edge. It read as a
   stray divider floating above the card rather than as part of it — the bar
   sat inside the 1px border but outside the 14px corner radius, so its ends
   hung in the white of the rounded corners.

   Tinting the whole surface is both what was asked for and the better signal:
   the link cards become a different KIND of surface from the plain white
   containers around them, which is legible at a glance and on a phone, where
   there is no hover.

   The tints are deliberately pale. Headings here are --fh-navy on top of them
   and have to stay comfortably readable; the gradient is doing identification,
   not decoration. */
.fh-guide-card,
.fh-rel-card {
  background: linear-gradient(135deg, #F3FAF1 0%, #EDF6FC 100%);
  transition: background .18s ease, border-color .15s ease,
              box-shadow .15s ease, transform .15s ease;
}

.fh-guide-card:hover,
.fh-guide-card:focus-visible,
.fh-rel-card:hover,
.fh-rel-card:focus-visible {
  background: linear-gradient(135deg, #E8F5E4 0%, #E0EFFA 100%);
}

/* Hover also commits to a colour, so the change is visible to someone who is
   not looking for it. */
.fh-guide-card:hover,
.fh-rel-card:hover {
  border-color: var(--fh-blue);
}

.fh-guide-card:hover h3,
.fh-guide-card:focus-visible h3,
.fh-rel-card:hover strong,
.fh-rel-card:focus-visible strong {
  color: var(--fh-blue);
}

/* ---- containers that are only content --------------------------------- */
/* A shadow says "separate object you can pick up". A price table is text in a
   grid — it keeps its border and radius and gives up the shadow, so the cards
   above it are the only things on the page that float. */
.fh-article table { box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .fh-guide-card,
  .fh-rel-card,
  .fh-guide-more,
  .fh-rel-card::after { transition: none; }
  .fh-guide-card:hover,
  .fh-rel-card:hover { transform: none; }
}