/* .animate-on-scroll/.in-view now lives in base.css (shared site-wide,
   home.html loads it too) - see home-animate.js for this page's own
   container list. */

:root {
  --ink: #12233b; --ink-soft: #4b5768; --ink-faint: #8a94a3;
  --line: #e6e9ee; --canvas: #f6f7f9; --surface: #fff;
  --brand: #1c3f57; --brand-dark: #12293a; --brand-light: #3d6a8a; --brand-tint: #eaf1f5;
  --land: #4a8a6f; --building: #2c4770; --premises: #b8683f;
  /* Gold accent - matches the Nivora wordmark's gradient end - used as the
     "pop" color for CTAs/highlights across the marketing pages, direct
     feedback ("add colors... similar to m2cena.lv") that the all-blue
     palette read as flat/generic rather than modern or branded. */
  --gold: #c8922e; --gold-light: #e0ac4a; --gold-dark: #9c7020; --gold-tint: #fbf1de;
}
body { color: var(--ink); background: var(--surface); }

/* ---------- Hero ---------- */
/* Light hero, search built directly in - not a dark navy banner. Earlier
   passes kept a dark navy box up top (first with a rotated card-stack
   mockup, then a floating result card, then just headline+CTA) and each
   time the feedback was the same: too dark, and too close to either a
   competitor's hero or this project's own pre-redesign hero. The actual
   original ask was "open the page and do the test search right away" -
   that only needs a light section with the input in it, no dark box at
   all. Brand navy/gold now shows up only as accent color (eyebrow pill,
   button, focus ring), not as a full-bleed background. */
/* Padding/type-scale trimmed down from the original pass - direct
   feedback that the hero pushed the "TIRGUS PULSS" strip below it off
   the initial viewport on page load. Smaller hero + tighter search bar
   gets that strip back within the fold on typical screen heights. */
.hero {
  padding: 32px 40px 24px; background: var(--surface); position: relative; overflow: hidden;
}
/* Soft blurred accent shapes, not a solid panel - direct request to make
   the (deliberately light, see note above) hero feel less flat/boring
   without reintroducing the dark full-bleed background that was already
   rejected. Both blobs sit behind .hero-grid (z-index) and are large/blurred
   enough to read as ambient color, not shapes competing with the text. */
.hero::before, .hero::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; z-index: 0;
}
.hero::before {
  width: 420px; height: 420px; top: -180px; right: -80px;
  background: radial-gradient(circle, rgba(200,146,46,.16), rgba(200,146,46,0) 70%);
}
.hero::after {
  width: 380px; height: 380px; bottom: -220px; left: -100px;
  background: radial-gradient(circle, rgba(28,63,87,.12), rgba(28,63,87,0) 70%);
}
.hero-grid {
  max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.62fr);
  gap: 48px; align-items: start; position: relative; z-index: 1;
}
/* Direct feedback: the left column read as much shorter than the card
   stack beside it, leaving the right column trailing off into empty space
   below the text. min-height + space-between spreads the SAME content
   out across the stack's own height instead of adding anything new. */
.hero-left { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; min-height: 565px; }
/* .hero-right and .preview-card-simple are explicitly placed into the
   SAME cell (column 2) - direct feedback that a live search result
   appearing below the search form (in column 1) made that column grow
   taller than the features card beside it, breaking the two-column
   layout's uniform height. Only one of the two is ever visible at once
   (home.js hides #hero-right the moment a real result renders), so the
   result replaces the features card in place instead of lengthening the
   page. */
.hero-right { grid-column: 2; grid-row: 1; }
.preview-card-simple { grid-column: 2; grid-row: 1; }
/* Hero entrance - staggered fade-up on page load (home-animate.js adds
   .hero-enter to every direct child of .hero-left, then .hero-in a frame
   later). Separate from .animate-on-scroll (base.css) because this content
   starts inside the initial viewport and would never cross an
   IntersectionObserver threshold - it needs to animate in immediately
   instead of waiting for a scroll event that may never come. */
.hero-left > .hero-enter { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.hero-left > .hero-enter.hero-in { opacity: 1; transform: translateY(0); }

.hero-left .eyebrow {
  display: inline-block; align-self: flex-start; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--gold-dark); background: var(--gold-tint); border: 1px solid rgba(200,146,46,.35);
  padding: 4px 12px; border-radius: 20px; margin-bottom: 12px;
}
.hero-left h1 { font-size: 32px; line-height: 1.2; margin: 0 0 10px; letter-spacing: -.02em; color: var(--ink); }
.hero-left > p { font-size: 16px; color: var(--ink-soft); margin: 0 0 18px; line-height: 1.6; max-width: 520px; }

/* Pill-shaped unified bar (direct request, referencing a competitor's
   search bar) - one soft rounded outer container holding the pin-icon
   input and the round gold button, instead of two separate boxes. */
.hero-search-form {
  display: flex; gap: 8px; flex-wrap: wrap; background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 6px; box-shadow: 0 4px 18px rgba(18,35,59,.07);
}
.hero-search-anchor { flex: 1; min-width: 240px; text-align: left; position: relative; display: flex; align-items: center; }
.hero-search-pin { position: absolute; left: 16px; width: 18px; height: 18px; color: var(--ink-faint); pointer-events: none; }
.hero-search-form input {
  width: 100%; box-sizing: border-box; padding: 14px 18px 14px 46px; font-size: 16px; border: none;
  border-radius: 999px; font-family: inherit; background: transparent; color: var(--ink);
}
.hero-search-form input:focus { outline: none; }
.hero-search-form:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,146,46,.18); }
/* Real bug: this button carries .btn (padding:12px 22px, font:14.5px)
   too, and since it's declared later in the cascade with equal
   specificity, .btn's larger padding silently won regardless of the
   smaller values below - the button rendered taller than the input next
   to it. .btn.hero-search-btn (compound selector) outranks the bare .btn
   rule so these values actually apply. */
.btn.hero-search-btn svg { width: 17px; height: 17px; }
.btn.hero-search-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 14px 28px; font-size: 15.5px;
  white-space: nowrap; border-radius: 999px;
}
.demo-error {
  color: #942f22; background: #fbe8e6; border: 1px solid #f2c2bb;
  border-radius: 8px; padding: 8px 14px; font-size: 13px; margin-top: 10px; text-align: left;
}

/* Loading overlay - same real modal pattern as /atskaite/'s own
   #report-loading-overlay (report.css), duplicated here rather than
   loading report.css site-wide on the homepage (same self-contained-
   stylesheet convention this file already follows). See home.html's own
   comment on why this exists at all (the real preview card can render
   off-screen below the fold on phones). */
#demo-loading-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 20, 30, .55);
  align-items: center; justify-content: center;
}
#demo-loading-overlay.active { display: flex; }
.demo-loading-box {
  width: 100%; max-width: 300px; padding: 28px 26px; text-align: center;
  background: var(--surface, #fff); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.demo-loading-spinner {
  width: 34px; height: 34px; margin: 0 auto 16px; border-radius: 50%;
  border: 3px solid var(--line-soft, #f0f2f5); border-top-color: var(--gold-light);
  animation: demo-loading-spin .9s linear infinite;
}
@keyframes demo-loading-spin { to { transform: rotate(360deg); } }
.demo-loading-title { color: var(--ink, #16202c); font-size: 15px; font-weight: 700; margin-bottom: 16px; }
.demo-loading-steps { list-style: none; margin: 0; padding: 0; display: inline-flex; flex-direction: column; gap: 2px; }
.demo-loading-steps li {
  display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 13px; text-align: left;
  color: var(--ink-faint); transition: color .2s;
}
.demo-loading-steps li::before {
  content: ""; flex: none; width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid var(--line); transition: border-color .2s, background .2s;
  background-size: 10px 10px; background-position: center; background-repeat: no-repeat;
}
.demo-loading-steps li.active { color: var(--ink, #16202c); font-weight: 600; }
.demo-loading-steps li.active::before {
  border-color: var(--gold-light); box-shadow: 0 0 0 3px rgba(224,172,74,.18);
}
.demo-loading-steps li.done { color: var(--ink, #16202c); }
.demo-loading-steps li.done::before {
  border-color: var(--gold-light); background-color: var(--gold-light);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312293a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* Real usage stat, not a fabricated big number - inspired by a
   competitor's homepage live-counter, built on this project's own actual
   SavedReport count instead (see views.py::_report_stats). */
.hero-trust {
  display: flex; align-items: center; gap: 7px;
  margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--ink-soft);
}
.hero-trust svg { width: 17px; height: 17px; color: var(--gold-dark); flex: none; }

.hero-types {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 10px; font-size: 14px; color: var(--ink-soft);
}
.hero-types-label { font-weight: 600; color: var(--ink-faint); }
.hero-type { display: inline-flex; align-items: center; gap: 6px; }
.hero-type svg { width: 17px; height: 17px; color: var(--brand); flex: none; }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 12px 22px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 14.5px; transition: all .15s; }
.btn-primary { background: linear-gradient(135deg, var(--gold-light), var(--gold-dark)); color: #fff; box-shadow: 0 4px 18px rgba(200,146,46,.35); border: none; cursor: pointer; font-family: inherit; }
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }

.hero-links { margin-top: 14px; font-size: 14.5px; }
.hero-links a { color: var(--ink-soft); text-decoration: none; font-weight: 600; }
.hero-links a:hover { color: var(--gold-dark); text-decoration: underline; }
.hero-links-sep { color: var(--ink-faint); margin: 0 8px; }

/* Real, visible button (not another plain text link) - direct feedback
   that it needed to stand out from the Sākt bez maksas / jaunākie
   sludinājumi row above it, on its own line below. */
.hero-demo-link {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; margin-top: 14px;
  padding: 13px 24px; border-radius: 8px; font-size: 15.5px; font-weight: 700;
  color: #fff; background: linear-gradient(135deg, var(--gold-light), var(--gold-dark)); border: none;
  text-decoration: none; transition: all .15s; box-shadow: 0 3px 12px rgba(200,146,46,.3);
}
.hero-demo-link:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ---------- Live result card - small, plain white card, appears inline
   below the form once a real search returns data. Starts [hidden] (no
   illustrative placeholder). Numbers, not a risk score - direct feedback
   to remove the earlier 0-100 risk badge entirely and instead show real
   per-category counts (deals, listings, apgrūtinājumi, debts), each
   colored by whether that specific finding is reassuring or a flag. ---------- */
.preview-card-simple {
  width: 100%; margin: 0; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 18px 20px; box-shadow: 0 8px 26px -8px rgba(18,35,59,.18);
  color: var(--ink); text-align: left;
}
.preview-address { font-size: 14.5px; font-weight: 700; margin-bottom: 8px; }
.preview-value-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-faint); margin-bottom: 2px; }
.preview-main-value { font-size: 25px; font-weight: 800; line-height: 1.1; color: var(--ink); }
/* Real computed numbers, visually blurred behind a signup CTA - a
   marketing teaser (like Zillow/Redfin's blurred-Zestimate pattern), not
   the app's actual tier-enforcement boundary (see explore.js's
   renderPlaceholderCard for that - fake placeholders, since real hidden
   product data would still sit in the page source either way). This is a
   public homepage lead-gen hook, lower stakes than gating real product
   usage, so blurring the real figure is an accepted, common pattern here.
   Both the total and the €/m² sub-figure are blurred together (home.js) -
   leaving the per-m² number in the clear would let anyone back out the
   real total from the visibly-shown area_sqm in preview-specs. */
.preview-main-value.blurred { filter: blur(6px); user-select: none; }
.preview-main-sub { font-size: 12px; color: var(--ink-faint); margin: 3px 0 10px; }
.preview-main-sub.blurred { filter: blur(4px); user-select: none; }

.preview-specs { font-size: 12.5px; color: var(--ink-soft); padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.preview-specs[hidden] { display: none; }

/* Small, non-interactive - a glance at where the property is, not a
   full map widget (interactive:false in home.js, no zoom/pan controls). */
.preview-map { width: 100%; height: 110px; border-radius: 10px; overflow: hidden; margin-bottom: 10px; border: 1px solid var(--line); }
.preview-map[hidden] { display: none; }
#preview-map-canvas { width: 100%; height: 100%; }

.preview-stats { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.preview-stat {
  font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 20px;
  background: var(--canvas); color: var(--ink-soft);
}
.preview-stat strong { font-weight: 800; }
/* Priced/graded figures (parādi, energoklase, NĪN, īre, apkaimes vieta)
   blur just the number/letter, same signup-teaser pattern as the
   headline value - the label stays legible so it's clear what's hidden. */
.preview-stat strong.blurred { filter: blur(3px); user-select: none; }
.preview-stat-good { background: #e6f6ec; color: #0a7a4e; }
.preview-stat-bad { background: #fbe8e6; color: #942f22; }
.preview-stat-neutral { background: var(--canvas); color: var(--ink-soft); }
.preview-stat-energy { background: color-mix(in srgb, var(--energy-color) 14%, #fff); color: var(--energy-color); }

/* Real gold-gradient button (same treatment as every other primary CTA
   site-wide) instead of a plain text link - direct feedback that it read
   as too minor for what's actually the card's main call to action. */
.preview-full-link {
  display: block; width: fit-content; text-align: center; font-size: 13px; font-weight: 700;
  color: #fff; text-decoration: none; margin: 6px auto 0; padding: 9px 20px;
  border-radius: 999px; background: linear-gradient(135deg, #e0ac4a, #9c7020);
  box-shadow: 0 3px 10px rgba(200,146,46,.35); transition: filter .15s, transform .15s;
}
.preview-full-link:hover { filter: brightness(1.08); transform: translateY(-1px); }
/* Real bug, caught by direct visual inspection (same class of bug as the
   GA consent banner earlier this session) - an author `display` rule
   unconditionally overrides the browser's own default [hidden]{display:
   none} UA rule regardless of the hidden attribute's state. */
.preview-full-link[hidden] { display: none; }

/* ---------- Fanned 3-card stack, right of the search - matches the
   competitor reference image directly (cascading, rotated, front card
   fully visible, back two visibly overlapped but not hidden). Real ss.lv
   photos (same files the live product's own "Darījumi un sludinājumi" tab
   shows, not fabricated) for the flagship listing-history-with-photos
   feature, plus real-feature risk/valuation cards behind it. No animation
   this time (a floating translate/rotate combo was the likely cause of an
   earlier "very blurry" report - removed rather than debugged further,
   since the fan's visual identity doesn't depend on motion). Numbers/dates
   are illustrative (direct instruction - "we can use fake data, it's just
   for showcase"), same convention as .showcase-block below. Kept on the
   light hero background (a dark full-bleed hero was already tried and
   rejected earlier as "too close to a competitor's hero"). */
.hero-right { padding-top: 4px; }

.hero-stack { position: relative; height: 565px; margin: 18px 14px 0; }
.hero-stack-card {
  position: absolute; left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 20px; box-shadow: 0 18px 40px -14px rgba(18,35,59,.22);
}
.hero-stack-card-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint);
  margin-bottom: 10px;
}
.stack-back { top: 0; transform: rotate(-4deg); z-index: 1; }
/* Colored row chips (direct feedback: "its boring all just white") - each
   row's own background tints red/green by finding, same real bad/good
   split as before, not just the icon color. */
.hero-stack-risk-row {
  display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-soft); margin-bottom: 6px; line-height: 1.3;
  padding: 5px 8px; border-radius: 8px;
}
.hero-stack-risk-row:last-child { margin-bottom: 0; }
.hero-stack-risk-row.bad { background: #fdecea; }
.hero-stack-risk-row.good { background: #e8f5ee; }
.hero-stack-risk-icon { font-size: 12px; font-weight: 800; flex: none; width: 14px; text-align: center; }
.hero-stack-risk-row.bad .hero-stack-risk-icon { color: #c0392b; }
.hero-stack-risk-row.good .hero-stack-risk-icon { color: #0a7a4e; }

/* Direct feedback: a solid gold-tinted background read as "fully yellow" -
   an accent left-border + colored label is enough to mark this as the
   "highlighted" card without washing the whole card in one color. */
.stack-mid { top: 170px; transform: rotate(3deg); z-index: 2; border-left: 3px solid var(--gold); }
.stack-mid .hero-stack-card-label { color: var(--gold-dark); }
.hero-stack-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hero-stack-checklist li {
  display: flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--ink-soft); line-height: 1.3;
}
.hero-stack-checklist li::before { content: "✓"; color: var(--gold-dark); font-weight: 700; flex: none; }
/* Three attempts before this one all missed: a pastel-cream gradient read
   as "a Windows XP sticky note," a rich gold-CTA gradient read as "ugly,"
   and plain white lost the "still light [colored]" request. This is a
   genuinely subtle warm off-white (barely distinguishable from white at a
   glance, but not stark) - light without being saturated enough to read
   as "yellow" the way the full gold-tint fill did on the mid card earlier. */
.stack-front {
  top: 315px; transform: rotate(-2deg); z-index: 3;
  background: #fbf9f5; border-left: 3px solid var(--gold);
}
.stack-front .hero-stack-card-label { color: var(--gold-dark); }
.stack-front .hero-stack-checklist li { font-size: 13px; font-weight: 600; }
/* Small real thumbnails - same shape/size as the per-row photo already
   used in the real "Darījumi un sludinājumi" history feed, not a big
   gallery grid. */
.hero-stack-front-photos { display: flex; gap: 6px; }
.hero-stack-front-photos img { flex: 1; min-width: 0; height: 46px; border-radius: 6px; object-fit: cover; display: block; box-shadow: 0 0 0 1px rgba(18,35,59,.08); }
.hero-stack-listing-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; }
.hero-stack-listing-col { flex: 1; min-width: 0; }
.hero-stack-listing-val { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.hero-stack-listing-val.good { color: #0a7a4e; }
.hero-stack-listing-arrow { font-size: 15px; color: var(--ink-faint); flex: none; margin-top: 4px; }
.hero-stack-listing-date { font-size: 10.5px; color: var(--ink-faint); margin-top: 3px; line-height: 1.3; }

.hero-features-title { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 14px; }
.hero-features-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.hero-features-list li {
  display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.4;
}
.hero-features-list li::before { content: "✓"; color: var(--gold-dark); font-weight: 700; flex: none; }

/* Mobile-only copy of the same "what's in the full report" list - direct
   request: .hero-right (the desktop version above) is hidden entirely
   below 900px (it shares its grid cell with the live preview card), so
   mobile visitors never saw this list at all. Placed as its own block
   right above .sources-strip rather than un-hiding .hero-right, since that
   element's hide/show is tied to the preview-card swap logic in home.js
   and isn't safe to repurpose. Neon green dots (direct request) instead of
   the gold checkmark - same neon green already used for the price-history
   chart line elsewhere in the product (report.css's .activity-chart-line).

   Revised, direct feedback: shrinking this on mobile still left it
   competing with .sources-strip for the same screen before a visitor had
   done anything - now it stays hidden entirely until home.js reveals it
   (adds .is-visible) once a real preview has been generated, so a fresh
   mobile visit goes straight from the search box to the trust-building
   "Dati no:" strip instead of a features list nobody asked for yet. */
.mobile-features-card { display: none; }
.hero-features-list-neon li::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22e07a;
  box-shadow: 0 0 6px rgba(34,224,122,.85), 0 0 12px rgba(34,224,122,.5); align-self: center;
}

@media (max-width: 900px) {
  .mobile-features-card.is-visible {
    display: block; max-width: 1180px; margin: 0 auto 24px; padding: 20px 22px;
    background: var(--canvas); border: 1px solid var(--line); border-radius: 16px;
  }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-right { display: none; }
  /* Real bug: max-width without re-centering left the card sitting flush
     left (margin:0 from the base rule) instead of centered on any phone
     wider than 380px - direct report ("everything isn't centered"). */
  .preview-card-simple { grid-column: 1; grid-row: 2; max-width: 380px; margin: 22px auto 0; }
  /* Real bug found live: at desktop size the two blurred accent blobs
     (.hero::before/::after) sit off to the sides of a two-column layout,
     but the single-column mobile layout is narrower than either blob
     (420px/380px) - they ended up directly behind the H1/paragraph,
     washing out the text instead of reading as ambient background color. */
  .hero::before, .hero::after { width: 220px; height: 220px; opacity: .6; }
  .hero::before { top: -110px; right: -90px; }
  .hero::after { bottom: -120px; left: -90px; }
}

/* Phone-specific tightening - direct feedback that "Informācija pieejama
   par: Dzīvokļi Mājas Zeme" was wrapping across multiple lines (icon+gap
   per item adds up fast at ~360px content width) and that the hero
   overall felt loose/uneven on a phone screen. Icons drop (text alone is
   what needs to read at a glance here) and everything tightens down one
   notch; overflow-x:auto is a safety net, not the primary fix - the goal
   is for this to fit without ever needing to scroll on a normal phone. */
@media (max-width: 480px) {
  .hero { padding: 22px 18px 18px; }
  .hero-left h1 { font-size: 22px; }
  /* Real bug found live: the pill bar (border-radius:999px) works fine
     as a single row, but on a narrow phone the button wraps onto its own
     row underneath the input - a 999px radius on a now-two-row container
     reads as one oversized rounded blob instead of a normal search bar.
     Smaller, ordinary radius once it's stacked; button goes full-width so
     the wrapped row still looks deliberate, not like an overflow. */
  .hero-search-form { border-radius: 16px; padding: 8px; }
  .hero-search-btn { width: 100%; justify-content: center; border-radius: 12px; }
  .hero-types {
    flex-wrap: nowrap; overflow-x: auto; gap: 8px; font-size: 11px;
    padding-bottom: 2px; -ms-overflow-style: none; scrollbar-width: none;
  }
  .hero-types::-webkit-scrollbar { display: none; }
  .hero-types-label { flex: none; white-space: nowrap; }
  .hero-type { flex: none; white-space: nowrap; }
  .hero-type svg { display: none; }
}

/* Reused era-badge (same 4 colors as everywhere else in the product) and
   energy-class colors, duplicated here (not cross-linked to report.css/
   card.css) since the homepage deliberately stays a lightweight, separate
   stylesheet - same reasoning as blog.css's self-contained .blog-example. */
.era-badge {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 20px; color: #fff; white-space: nowrap;
}
.era-badge.era-0 { background: #b08968; } .era-badge.era-1 { background: #7d8597; }
.era-badge.era-2 { background: #4a7c95; } .era-badge.era-3 { background: #1f5c85; }

/* ---------- Feature showcase (product mockups, not stock photos) ----------
   .showcase-block/.showcase-frame stretch to equal height within each grid
   row (flex column + flex:1 on the body) - direct feedback that mixing a
   tall 3-row card next to a short single-chart card made the grid look
   uneven/unorganized. */
/* Direct feedback: the page read as "plain white" section after section -
   a soft tint band (not a hard color block) gives this section its own
   identity without competing with the real screenshots inside it. Tint on
   the full-width section, max-width kept on a new inner wrapper so the
   band itself spans the whole viewport, not just the centered content. */
.showcase-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px; }
.showcase-block { display: flex; flex-direction: column; height: 100%; }
.showcase-frame {
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 8px 28px rgba(18,35,59,.1); display: flex; flex-direction: column; flex: 1;
  transition: box-shadow .2s, transform .2s;
}
.showcase-frame:hover { box-shadow: 0 14px 36px rgba(18,35,59,.16); transform: translateY(-2px); }
.showcase-chrome { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f2f4f7; border-bottom: 1px solid var(--line); }
.showcase-chrome span { width: 9px; height: 9px; border-radius: 50%; background: #d7dce2; }
.showcase-url { margin-left: 8px; font-size: 11px; color: var(--ink-faint); font-family: monospace; }
.showcase-body { padding: 18px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.showcase-caption { font-size: 12.5px; color: var(--ink-faint); margin: 12px 4px 0; text-align: center; line-height: 1.5; }

/* Mirrors the real report's .risk-flag-warn/-info colors (report.css) -
   same vocabulary, kept as its own copy since this stylesheet never
   imports another page's CSS (same pattern as every other page here). */
.showcase-risk-flags { display: flex; flex-direction: column; gap: 7px; }
.showcase-risk-flag { font-size: 11.5px; line-height: 1.4; padding: 7px 10px; border-radius: 6px; border-left: 3px solid; }
.showcase-risk-flag.warn { background: #fdf3e7; border-left-color: #c8922e; color: #6b4a10; }
.showcase-risk-flag.info { background: var(--canvas); border-left-color: var(--line); color: var(--ink-soft); }

.fact-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.fact-chip {
  font-size: 11.5px; color: var(--ink-soft); background: var(--canvas); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 10px;
}
.stat-cards { display: flex; gap: 10px; flex-wrap: wrap; }
.stat-card { flex: 1; min-width: 90px; background: var(--canvas); border-radius: 10px; padding: 10px 12px; text-align: center; }
.stat-num { font-size: 15px; font-weight: 800; color: var(--ink); }
.stat-num.energy-class-e { display: inline-flex; padding: 1px 10px; border-radius: 6px; background: #d9642b; color: #fff; }
.stat-num.energy-class-d { display: inline-flex; padding: 1px 10px; border-radius: 6px; background: #d98a2b; color: #fff; }
.stat-lbl { font-size: 10.5px; color: var(--ink-faint); margin-top: 2px; }

/* Same neon-green price-line chart as the real listing cards (card.css) -
   duplicated here rather than linked, same reasoning as the era-badge
   colors above: the homepage deliberately stays a self-contained
   stylesheet. Used for the showcase's price-history mockup so that
   feature reads as the same distinctive visual it actually is, not a
   generic chip list. */
.activity-chart-label { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 4px; }

/* Illustrative photo-history strip (same "example, not a live screenshot"
   convention as the rest of .showcase-block - a real crawled thumbnail
   turned out to be a broken/blank placeholder file when checked directly,
   so this is a deliberate illustration of the real feature (per-listing
   photos kept across years), not a literal (and misleadingly tiny) real
   image passed off as one. */
.showcase-photo-row { display: flex; gap: 8px; margin-top: 10px; }
.showcase-photo {
  flex: 1; aspect-ratio: 4/3; border-radius: 10px; position: relative; overflow: hidden;
  display: flex; align-items: flex-end; padding: 6px;
}
.showcase-photo-year {
  font-size: 10.5px; font-weight: 700; color: #fff; background: rgba(18,35,59,.55);
  padding: 2px 7px; border-radius: 999px; backdrop-filter: blur(2px);
}
.showcase-photo-1 { background: linear-gradient(135deg, #c9d4de, #8fa2b3); }
.showcase-photo-2 { background: linear-gradient(135deg, #d8cdb8, #ad9a72); }
.showcase-photo-3 { background: linear-gradient(135deg, #bcd0c6, #6f9683); }
.activity-chart { width: 100%; height: auto; display: block; margin-bottom: 6px; }
.activity-chart-axis { stroke: #e4e7ec; stroke-width: 1; }
.activity-chart-line {
  fill: none; stroke: #22e07a; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(34, 224, 122, .65));
}
.activity-chart-dot { fill: #22e07a; filter: drop-shadow(0 0 5px rgba(34, 224, 122, .9)) drop-shadow(0 0 10px rgba(34, 224, 122, .45)); }
.activity-chart-dot-latest { filter: drop-shadow(0 0 7px rgba(34, 224, 122, 1)) drop-shadow(0 0 14px rgba(34, 224, 122, .65)); }
.activity-chart-price { font-size: 11px; font-weight: 700; fill: var(--ink); }
.activity-chart-price-latest { fill: #17b869; }
.activity-chart-date { font-size: 10px; fill: var(--ink-faint); }

.era-pie-wrap { display: flex; align-items: center; gap: 16px; }
.era-pie { border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px var(--line); }
.era-legend { display: flex; flex-direction: column; gap: 6px; }
.era-legend-row { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.era-legend-swatch { width: 10px; height: 10px; border-radius: 3px; }
.era-legend-pct { font-weight: 700; color: var(--ink); min-width: 32px; }
.era-legend-label { color: var(--ink-soft); }

/* ---------- Data-sources strip - real orgs this project actually pulls
   from (same list as /avoti/). Logos downloaded directly from each org's
   own official site (backend/static/mapui/logos/), not hotlinked, so this
   still renders even if their site is briefly down. Grayscale + low
   opacity by default (full color on hover) keeps six differently-styled
   real logos (some color, some line-art) visually consistent as one
   compact credit strip instead of a clashing row. */
.sources-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.sources-strip-inner {
  max-width: 900px; margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 22px;
}
.sources-strip-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-faint);
}
.sources-strip-logos { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 22px; }
.source-logo { display: inline-flex; align-items: center; opacity: .6; filter: grayscale(1); transition: opacity .15s, filter .15s; }
.source-logo:hover { opacity: 1; filter: grayscale(0); }
.source-logo img { height: 20px; width: auto; display: block; }
.sources-strip-more { font-size: 11.5px; font-weight: 600; color: var(--gold-dark); text-decoration: none; }
.sources-strip-more:hover { text-decoration: underline; }

/* ---------- Stats strip ---------- */
.stats-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--canvas); }
.stats-strip-inner {
  max-width: 1180px; margin: 0 auto; padding: 16px 24px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; text-align: center;
}
.stat-item .stat-num { font-size: 26px; font-weight: 800; color: var(--gold-dark); letter-spacing: -.02em; }
.stat-item .stat-label { font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; }

/* Lightened (direct feedback: "black with blue bars" read as an
   unexplained one-off dark block) - same light/canvas family as
   sources-strip and stats-strip right above it, so all three trust strips
   now read as one connected group instead of three different treatments. */
.pulse-strip { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pulse-strip-inner {
  max-width: 1180px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center;
  gap: 22px; flex-wrap: wrap; font-size: 13px; color: var(--ink-soft);
}
/* Small pulsing green dot in front of the label - reinforces that these
   are live, recomputed numbers (not a static marketing figure), same green
   already used for real up-moves elsewhere on this strip/product. */
.pulse-label { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 6px; }
.pulse-label::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #0a7a4e; flex: none;
  animation: pulse-dot-ping 1.8s ease-out infinite;
}
@keyframes pulse-dot-ping {
  0% { box-shadow: 0 0 0 0 rgba(10,122,78,.45); }
  70% { box-shadow: 0 0 0 6px rgba(10,122,78,0); }
  100% { box-shadow: 0 0 0 0 rgba(10,122,78,0); }
}
.pulse-item strong { color: var(--ink); }
.pulse-change { font-size: 11.5px; font-weight: 700; margin-left: 3px; }
.pulse-change.up { color: #0a7a4e; }
.pulse-change.down { color: #c0392b; }
.pulse-meta { margin-left: auto; font-size: 11px; color: var(--ink-faint); }

/* ---------- Features ---------- */
/* Short "what is Nivora" blurb - direct request to give first-time
   visitors/crawlers unfamiliar with the brand a plain-language answer
   before the feature grid dives into specifics. Reuses .section-heading
   as-is (eyebrow/h2/p, centered, 560px max-width) rather than inventing a
   parallel text style for one paragraph. */
.about-intro { max-width: 1080px; margin: 0 auto; padding: 56px 24px 8px; }

/* Direct feedback: distinct per-section gradient tints ended up reading as
   "completely different" sections rather than one cohesive page - every
   section below now shares the same plain white/canvas surfaces and gets
   separated by a single consistent divider line instead. */
.features { border-top: 1px solid var(--line); }
.features-inner { max-width: 1080px; margin: 0 auto; padding: 80px 24px; }
.section-heading { text-align: center; max-width: 560px; margin: 0 auto 48px; }
.section-heading .eyebrow { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gold-dark); margin-bottom: 10px; }
.section-heading h2 { font-size: 28px; margin: 0 0 10px; letter-spacing: -.01em; }
.section-heading p { color: var(--ink-soft); font-size: 15px; margin: 0; line-height: 1.55; }

/* minmax(300px,1fr) deliberately lands on exactly 3 columns at this
   section's 1080px max-width (4 would need ~1260px) - with 9 real feature
   cards that's a clean 3x3 grid instead of the 4/4/1 an even-wider minmax
   produced (a lonely last-row card). Cards themselves are smaller too
   (less padding/icon size/type scale) to match - 9 short cards read
   better dense than spaced out like the original 4. */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.feature-card {
  display: flex; flex-direction: column; height: 100%; box-sizing: border-box;
  padding: 20px; border-radius: 12px; border: 1px solid var(--line); background: #fff;
  border-top: 3px solid var(--card-accent, var(--brand)); transition: box-shadow .2s, transform .2s, border-color .2s;
  text-decoration: none; color: inherit;
}
.feature-card:hover { box-shadow: 0 14px 32px rgba(18,35,59,.13); transform: translateY(-4px); border-color: var(--card-accent, var(--brand)); }
.feature-icon {
  width: 32px; height: 32px; border-radius: 9px; background: var(--card-accent, var(--brand)); color: #fff;
  display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
  transition: transform .25s ease;
}
.feature-icon svg { width: 16px; height: 16px; }
.feature-card:hover .feature-icon { transform: scale(1.1) rotate(-4deg); }
/* Rotating accent per card (nth-child), cycled every 3 to match the 3
   columns - a small palette pulled straight from colors already used
   elsewhere in the product (land/building kind colors + the gold brand
   accent), so "colorful" still reads as this product's own system rather
   than random decoration. */
.feature-grid .feature-card:nth-child(3n+1) { --card-accent: var(--gold-dark); }
.feature-grid .feature-card:nth-child(3n+2) { --card-accent: var(--building); }
.feature-grid .feature-card:nth-child(3n+3) { --card-accent: var(--land); }
.feature-card h3 { font-size: 14px; margin: 0 0 6px; }
/* Direct feedback: the feature grid read as "empty AI generated stuff" -
   one concrete real number/fact per card (reusing real stats already
   shown elsewhere on this page - 1.1M+ darījumu, 42 reģioni, etc. - never
   fabricated) turns each card from a generic capability claim into a
   specific, checkable one. */
.feature-card-proof {
  display: inline-block; align-self: flex-start; font-size: 11px; font-weight: 700;
  color: var(--card-accent, var(--brand)); background: color-mix(in srgb, var(--card-accent, var(--brand)) 12%, #fff);
  padding: 3px 9px; border-radius: 999px; margin-bottom: 8px;
}
.feature-card p { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; margin: 0; }

/* Per-card detail bullets + footer link - direct request that the cards
   carry "a lot of info" instead of one summary sentence each. Every card
   has exactly 3 bullets so grid rows stay even without needing flex
   trickery to pin the footer link to the bottom. */
.feature-card-details { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.feature-card-details li { font-size: 11.5px; color: var(--ink-faint); line-height: 1.45; display: flex; gap: 6px; align-items: baseline; }
.feature-card-details li::before { content: "–"; color: var(--card-accent, var(--brand)); font-weight: 700; flex: none; }
.feature-card-more {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--card-accent, var(--gold-dark));
}
.feature-card-more-arrow { transition: transform .2s ease; }
.feature-card:hover .feature-card-more-arrow { transform: translateX(3px); }

/* ---------- Skyline accent ---------- */
.skyline-band { background: var(--ink); padding: 0; overflow: hidden; }
.skyline-svg { display: block; width: 100%; height: auto; }

/* ---------- Pricing ---------- */
.tiers { background: var(--canvas); padding: 80px 24px; border-top: 1px solid var(--line); }
.tier-cards { max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tier-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 28px; position: relative; }
.tier-card.featured { border-color: var(--gold); box-shadow: 0 10px 30px rgba(200,146,46,.18); }
.tier-card .tier-badge {
  position: absolute; top: -11px; left: 24px; background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  color: #1a1204; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; letter-spacing: .02em;
}
.tier-card h3 { margin: 0 0 4px; font-size: 18px; }
.tier-card .tier-price { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 16px; }
.tier-card ul { list-style: none; padding: 0; margin: 0 0 20px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.9; }
.tier-card ul li { display: flex; gap: 8px; align-items: baseline; }
.tier-card ul li::before { content: "✓"; color: var(--gold-dark); font-weight: 700; }
.tier-btn-form { margin: 0; }
.tier-btn { display: block; width: 100%; box-sizing: border-box; text-align: center; justify-content: center; border: none; cursor: pointer; font-family: inherit; }
.tier-card .tier-btn.btn-secondary {
  background: var(--canvas); color: var(--ink); border: 1px solid var(--line); box-shadow: none;
}
.tier-card .tier-btn.btn-secondary:hover { border-color: var(--gold-dark); color: var(--gold-dark); background: #fff; }
.tiers-note {
  max-width: 760px; margin: 24px auto 0; text-align: center; font-size: 13.5px; color: var(--ink-soft);
}
.tiers-note a { color: var(--gold-dark); font-weight: 600; text-decoration: none; }
.tiers-note a:hover { text-decoration: underline; }

/* ---------- Homepage FAQ - plain <details>/<summary>, no JS needed, so
   every answer is present in the initial HTML (crawlable) and matches the
   FAQPage JSON-LD built from the exact same list server-side. ---------- */
.home-faq { max-width: 760px; margin: 0 auto; padding: 60px 24px 80px; border-top: 1px solid var(--line); }
.home-faq-list { display: flex; flex-direction: column; gap: 10px; }
.home-faq-item {
  border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; background: #fff;
}
.home-faq-item summary {
  font-size: 15px; font-weight: 700; cursor: pointer; list-style: none; display: flex;
  align-items: center; justify-content: space-between; gap: 12px;
}
.home-faq-item summary::-webkit-details-marker { display: none; }
.home-faq-item summary::after {
  content: "+"; font-size: 20px; font-weight: 400; color: var(--gold-dark); flex: none; transition: transform .15s;
}
.home-faq-item[open] summary::after { transform: rotate(45deg); }
.home-faq-item p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin: 12px 0 0; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 40px 24px 28px; }
/* Short "what is Nivora" line - moved here from a dedicated homepage
   section, direct feedback that it belonged in the footer rather than as
   its own body block. */
.site-footer-about { max-width: 640px; margin: 0 auto 20px; font-size: 12.5px; color: var(--ink-faint); line-height: 1.6; text-align: center; }
.site-footer-inner { max-width: 1180px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.site-footer .brand-mini { font-size: 17px; }
.site-footer .footer-meta { font-size: 12.5px; color: var(--ink-faint); }
.site-footer .footer-meta a { color: var(--ink-faint); text-decoration: underline; }
.site-footer .footer-meta a:hover { color: var(--gold-dark, #9c7020); }
.footer-social-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-faint);
  font-size: 12.5px; font-weight: 600; text-decoration: none;
  transition: border-color .15s, color .15s;
}
.footer-social-btn:hover { border-color: var(--gold-dark, #9c7020); color: var(--gold-dark, #9c7020); }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; text-align: center; }
  .hero-copy p { margin-inline: auto; }
  .cta-row { justify-content: center; }
  .tier-cards { grid-template-columns: 1fr; }
}