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

:root {
  --ink: #171717;
  --bg: #FFFFFF;
  --panel: #EFEFEF; /* same light grey furnitin base theme uses across store tools */
  --panel-alt: #E5E5E5;
  /* Lamello's real brand green (#047840), taken directly from
     fabutorwebaruhaz.hu's own button/hover CSS — kept under the "--gold*"
     names so every rule that already referenced them (originally HOMM's
     coral/red) picks up the new color automatically. */
  --gold: #047840;
  --gold-button: #047840;
  --gold-light: #2E9E63;
  --gold-dim: #035C30;
  --cream: #171717;
  --cream-dim: #4D4D4D;
  --white: #171717;
  --muted: #666666;
  --border: rgba(0,0,0,0.12);
  --border-strong: rgba(0,0,0,0.28);
  --success: #0D8756;
  --radius: 12px;
  --radius-lg: 20px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--cream);
  line-height: 1.6;
  overflow-x: hidden;
}

/* NAV — solid green, matching the actual nav bar (Home/Products/FAQ/…)
   on fabutorwebaruhaz.hu/lamello.hu, rather than the light/translucent bar
   the HOMM version used. */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 0.72rem 2.5rem;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(4,120,64,0.94);
  backdrop-filter: blur(12px);
  border-bottom: 0.5px solid rgba(255,255,255,0.12);
}
.nav-left { display: flex; align-items: center; gap: 1rem; }
/* The logo mark itself is brown/taupe (#634e42, from lamello.hu's own
   header), which reads muddy directly on the green bar — a small white
   chip behind it is the same trick the logo gets on the brand's own white
   logo bar, just compressed into this single nav row. */
.store-logo {
  height: 28px; width: auto; display: block;
  background: #fff;
  padding: 5px 10px;
  border-radius: 8px;
}
.nav-tagline {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(255,255,255,0.7);
  margin-left: 0.85rem;
  padding-left: 0.85rem;
  border-left: 1px solid rgba(255,255,255,0.25);
}
.nav-links { display: flex; gap: 2rem; align-items: center; }
.nav-links a {
  color: rgba(255,255,255,0.9); font-size: 0.875rem;
  text-decoration: none; transition: color 0.2s;
}

.btn-nav {
  background: #fff; color: var(--gold);
  padding: 0.55rem 1.4rem; border-radius: 100px;
  font-size: 0.875rem; font-weight: 600;
  text-decoration: none; transition: background 0.2s, transform 0.15s;
}

/* HAMBURGER */
.hamburger {
  display: none;
  position: relative; z-index: 100;
  background: none; border: none;
  cursor: pointer; padding: 0.5rem;
  flex-direction: column; gap: 5px;
}
.hamburger span {
  display: block; width: 24px; height: 2px;
  background: #fff; border-radius: 2px;
  transition: all 0.3s;
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* HERO */
.hero {
  min-height: 100vh;
  min-height: 100lvh;
  display: flex; align-items: center; justify-content: center;
  padding: 8rem 2rem 5rem;
  position: relative; overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 65% 50%, rgba(4,120,64,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(4,120,64,0.04) 0%, transparent 60%);
}

/* HERO — PHOTO BACKGROUND VARIANT */
.hero-photo .hero-eyebrow { color: var(--gold-light); }
.hero-photo .hero-title { color: #FBF6EA; }
.hero-photo .hero-title em { color: var(--gold-light); }
.hero-photo .hero-sub { color: rgba(251,246,234,0.82); }
.hero-photo .btn-ghost { color: #FBF6EA; border-color: rgba(251,246,234,0.4); }

@media (max-width: 640px) {
  .hero-photo { padding: 7rem 1.25rem 3rem; }
}

/* INTRO WRAP — hero + bemutatkozás share one sticky background image,
   which unpins and scrolls away naturally once this wrapper ends. */
.intro-wrap { position: relative; }
.intro-bg-sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100lvh;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(18,14,10,0.6) 0%, rgba(18,14,10,0.72) 55%, rgba(18,14,10,0.8) 100%),
    url('referenciak/kiraly11.jpg') center 22% / cover no-repeat;
}
.intro-scroll {
  position: relative; z-index: 1;
  margin-top: -100vh; margin-top: -100lvh;
}
@media (max-width: 640px) {
  .intro-bg-sticky { background-position: 52% 8%; background-size: auto 115%; }
}
.hero-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; max-width: 1100px; width: 100%;
  align-items: center; position: relative;
}
.hero-eyebrow {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em;
  color: var(--gold); text-transform: uppercase; margin-bottom: 1.2rem;
}
.hero-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  line-height: 1.15; color: var(--white);
  margin-bottom: 1.5rem;
}
.hero-title em { font-style: italic; color: var(--gold); }
.hero-sub {
  font-size: 1.05rem; color: var(--muted); line-height: 1.75;
  margin-bottom: 2.5rem; max-width: 480px;
}
.hero-actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.btn-primary {
  background: var(--gold-button); color: #fff;
  padding: 0.9rem 2rem; border-radius: 100px;
  font-size: 0.95rem; font-weight: 600;
  text-decoration: none; transition: all 0.2s;
  display: inline-flex; align-items: center; gap: 0.5rem;
}

.btn-ghost {
  color: var(--cream-dim); font-size: 0.9rem;
  text-decoration: none; padding: 0.9rem 1.5rem;
  border: 0.5px solid var(--border-strong); border-radius: 100px;
  transition: all 0.2s;
}

/* HERO VISUAL */
.hero-visual {
  position: relative;
}
/* Distinct from .app-ui (same look) so scrollToDesignerTop()'s
   querySelector('.app-ui') still resolves to the real designer tool. */
.hero-ui {
  background: var(--bg);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* SCROLL HINT */
.scroll-hint {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  color: var(--muted); display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 0.5px solid var(--border-strong); border-radius: 50%;
  background: var(--bg);
  pointer-events: none; cursor: default;
  z-index: 40;
  animation: scrollHintBounce 2s ease-in-out infinite;
  transition: opacity 0.3s;
}
.scroll-hint.scroll-hint-hidden { opacity: 0; }
@keyframes scrollHintBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(7px); }
}

/* TRUST STRIP */
.trust-strip {
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
  padding: 1.5rem 2rem;
  display: flex; justify-content: center; gap: 3rem;
  flex-wrap: wrap;
}
.trust-item {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.85rem; color: var(--muted);
}
.trust-item svg { color: var(--gold); }

/* HOW IT WORKS */
section { padding: 6rem 2rem; max-width: 1100px; margin: 0 auto; }
.section-label {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em;
  color: var(--gold); text-transform: uppercase;
  text-align: center; margin-bottom: 1rem;
}
.section-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  text-align: center; color: var(--white);
  margin-bottom: 1rem; line-height: 1.2;
}
.section-sub {
  text-align: center; color: var(--muted);
  font-size: 1rem; max-width: 520px;
  margin: 0 auto 4rem;
}

/* BEMUTATKOZÁS (dark) */
.about-section {
  max-width: none; padding: 6rem 2rem;
  position: relative;
}
.about-grid {
  display: grid; grid-template-columns: 260px 1fr;
  gap: 3.5rem; align-items: center;
  max-width: 1100px; margin: 0 auto;
}
.about-photo {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  object-position: center 15%; border-radius: var(--radius-lg);
  border: 0.5px solid rgba(251,246,234,0.15);
}
.about-name {
  font-family: 'Inter', sans-serif; font-style: italic;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  color: #FBF6EA; line-height: 1.35; margin-bottom: 1.2rem;
}
.about-text {
  color: rgba(251,246,234,0.72); font-size: 1rem; line-height: 1.75;
  margin-bottom: 1.1rem; max-width: 620px;
}
.about-text:last-child { margin-bottom: 0; }
@media (max-width: 700px) {
  .about-grid { grid-template-columns: 1fr; gap: 2rem; }
  .about-photo { max-width: 220px; margin: 0 auto; }
  .about-name, .about-text { text-align: center; }
  .about-text { margin-left: auto; margin-right: auto; }
}

.steps-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  background: var(--border);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.step {
  background: var(--panel);
  padding: 2.5rem 2rem;
  position: relative;
}

.step-num {
  font-family: 'Inter', sans-serif;
  font-size: 3rem; font-weight: 600;
  color: var(--gold);
  line-height: 1; margin-bottom: 1.5rem;
}
.step-icon {
  width: 44px; height: 44px;
  background: rgba(4,120,64,0.1);
  border: 0.5px solid var(--border-strong);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; margin-bottom: 1.2rem;
}
.step h3 {
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem; color: var(--white);
  margin-bottom: 0.75rem;
}
.step p { font-size: 0.9rem; color: var(--muted); line-height: 1.7; }

/* STEP MOCKUPS — small illustrative replicas of the actual app UI,
   used instead of abstract icons so each step is recognizable at a glance. */
.step-mockup {
  background: var(--bg);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.4rem;
}
.step-mockup-bar {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.5rem 0.7rem;
  border-bottom: 0.5px solid var(--border);
  background: rgba(26,20,16,0.03);
}
.step-mockup-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.step-mockup-bar-title {
  margin-left: auto; margin-right: auto;
  font-size: 0.6rem; color: var(--muted); font-family: 'Inter', monospace;
}
.step-mockup-body {
  padding: 1.1rem; min-height: 132px;
  display: flex; flex-direction: column; justify-content: center; gap: 0.55rem;
}

.mock-upload {
  border: 1.2px dashed var(--border-strong);
  border-radius: 10px; padding: 1.3rem 1rem;
  text-align: center; background: rgba(4,120,64,0.03);
}
.mock-upload-icon { font-size: 1.5rem; margin-bottom: 0.35rem; }
.mock-upload-title { font-family: 'Inter', sans-serif; font-size: 0.8rem; color: var(--cream); margin-bottom: 0.25rem; }
.mock-upload-sub { font-size: 0.62rem; color: var(--muted); }
.mock-upload-sub em { color: var(--gold); font-style: normal; }

.mock-label { font-size: 0.62rem; color: var(--cream-dim); margin-bottom: 0.3rem; letter-spacing: 0.03em; }
.mock-select, .mock-pill {
  font-size: 0.72rem; color: var(--cream);
  background: rgba(26,20,16,0.055);
  border: 0.5px solid var(--border-strong);
  border-radius: 7px; padding: 0.4rem 0.6rem;
}
.mock-pill { color: var(--gold); }
.mock-chips { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.mock-chip {
  font-size: 0.62rem; color: var(--muted);
  border: 0.5px solid var(--border-strong);
  border-radius: 100px; padding: 0.22rem 0.55rem;
}
.mock-chip.active { color: #fff; background: var(--gold-button); border-color: var(--gold-button); font-weight: 600; }

.mock-report-card {
  background: rgba(26,20,16,0.045);
  border: 0.5px solid var(--border);
  border-radius: 8px; padding: 0.6rem 0.7rem;
}
.mock-report-header {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.7rem; color: var(--white); font-weight: 600;
  margin-bottom: 0.4rem;
}
.mock-report-line { height: 5px; border-radius: 3px; background: rgba(26,20,16,0.12); margin-bottom: 0.3rem; }
.mock-report-line.short { width: 60%; margin-bottom: 0; }
.mock-furniture-item {
  display: flex; align-items: center; gap: 0.55rem;
  background: rgba(26,20,16,0.045);
  border: 0.5px solid var(--border);
  border-radius: 8px; padding: 0.5rem 0.6rem;
}
.mock-furn-thumb {
  width: 30px; height: 30px; border-radius: 6px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(4,120,64,0.35), rgba(4,120,64,0.1));
}
.mock-furn-info { flex: 1; min-width: 0; }
.mock-furn-name { font-size: 0.68rem; color: var(--cream); font-weight: 500; }
.mock-furn-store { font-size: 0.6rem; color: var(--muted); }
.mock-furn-price { font-size: 0.66rem; color: var(--gold); font-weight: 600; white-space: nowrap; }

.studio-callout {
  margin-top: 2rem;
  display: flex; flex-direction: column; gap: 1.5rem;
  background: linear-gradient(135deg, rgba(4,120,64,0.12), rgba(4,120,64,0.04));
  border: 1.5px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 2rem 2.25rem;
  box-shadow: 0 12px 32px rgba(4,120,64,0.14);
}
.studio-callout-top {
  display: flex; align-items: center; gap: 1.5rem;
  flex-wrap: wrap;
}
.studio-callout-num { margin-bottom: 0; flex-shrink: 0; }
.studio-callout-icon {
  width: 64px; height: 64px; flex-shrink: 0;
  background: rgba(4,120,64,0.18);
  border: 0.5px solid var(--border-strong);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem;
}
.studio-callout-text { flex: 1; min-width: 240px; }
.studio-callout-text p {
  font-family: 'Inter', sans-serif;
  font-size: 1.15rem; color: var(--white); line-height: 1.5;
}
.studio-callout-text strong { color: var(--gold); font-weight: 600; font-style: italic; }
.studio-callout-gallery { display: flex; gap: 0.75rem; }
.studio-callout-gallery img {
  flex: 1; width: 100%; height: 220px;
  object-fit: cover; border-radius: 10px;
  border: 0.5px solid var(--border-strong);
  display: block;
}

.quote-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.5px;
  background: var(--border);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.quote-grid-3 { grid-template-columns: repeat(3, 1fr); }
.quote-card {
  background: var(--panel);
  padding: 2.5rem 2rem;
  text-align: center;
  transition: background 0.2s, transform 0.2s;
}

.quote-card .step-icon { margin-left: auto; margin-right: auto; }
.quote-value {
  font-family: 'Inter', sans-serif;
  font-size: 1.8rem; color: var(--gold);
  margin-bottom: 0.75rem;
}
.quote-card p { font-size: 0.9rem; color: var(--muted); line-height: 1.7; }

/* CHOICE SCREEN */
.choice-screen {
  padding: 9rem 2rem 6rem;
  max-width: 980px; margin: 0 auto;
  text-align: center;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.choice-grid {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 2rem; margin-top: 3.5rem;
}
.choice-or {
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  font-size: 0.8rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.choice-card {
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left; gap: 0.9rem;
  padding: 3rem 2.5rem;
  min-height: 340px;
  background: var(--bg);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-lg);
  cursor: pointer; font-family: inherit;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
/* Brief press feedback the instant a card is clicked, before the screen
   transition (below) takes over — without this the click felt unregistered
   right up until content suddenly swapped in. */
.choice-card.choice-card-pressed {
  transform: scale(0.97);
  border-color: var(--gold);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.choice-icon { font-size: 2.5rem; }
.choice-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.5rem; color: var(--cream);
}
.choice-text { font-size: 1rem; color: var(--muted); line-height: 1.7; }
@media (max-width: 700px) {
  .choice-screen { padding: 6.5rem 1.25rem 2.5rem; }
  .choice-grid { grid-template-columns: 1fr; gap: 0.75rem; margin-top: 1.5rem; }
  .choice-card { padding: 1.75rem 1.5rem; min-height: 0; gap: 0.55rem; }
  .choice-icon { font-size: 1.75rem; }
  .choice-title { font-size: 1.15rem; }
  .choice-text { font-size: 0.9rem; line-height: 1.55; }
}

/* APP SECTION */
.app-section {
  padding: 6rem 2rem;
  background: var(--panel);
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.app-section > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
/* Entry state for a section right as it's switched to (see selectMode() /
   goBackToChoice() in app.js, shared with .choice-screen above) — applied
   then immediately cleared on the next frame so it transitions in, rather
   than just appearing instantly. */
.app-section.section-fade-enter,
.choice-screen.section-fade-enter {
  opacity: 0;
  transform: translateY(14px);
}
/* Leave state applied to whichever section is being switched away from —
   the mirror of section-fade-enter above. */
.app-section.section-fade-leave,
.choice-screen.section-fade-leave {
  opacity: 0;
  transform: translateY(-10px) scale(0.98);
  pointer-events: none;
}

.back-to-choice {
  display: inline-flex; align-items: center;
  margin: 0 0 1.5rem !important;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 0.85rem; font-weight: 500;
  color: var(--muted); padding: 0;
  transition: color 0.2s;
}

.app-ui {
  background: var(--bg);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 3rem;
}
.app-topbar {
  padding: 1rem 1.5rem;
  display: flex; align-items: center; gap: 0.75rem;
  background: var(--bg);
}
.dot { width: 15px; height: 15px; border-radius: 50%; }
.dot-r { background: #FF5F57; }
.dot-y { background: #FFBD2E; }
.dot-g { background: #28CA41; }

.app-body {
  display: grid; grid-template-columns: 1fr;
  min-height: 480px;
}
.app-left {
  padding: 2rem; min-width: 0;
  display: flex; flex-direction: column; gap: 1.5rem;
}
.app-right { padding: 2rem; min-width: 0; display: none; }

.upload-zone {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 3rem 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  background: #FAFAFA;
  position: relative;
  overflow: hidden;
}
.upload-zone.drag-over {
  border-color: var(--gold);
  background: #F0F0F0;
  transform: scale(1.01);
}
.upload-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.upload-title { font-family: 'Inter', sans-serif; font-size: 1.1rem; color: var(--cream); margin-bottom: 0.5rem; }
.upload-sub { font-size: 0.8rem; color: var(--muted); }
.upload-sub span { color: var(--gold); cursor: pointer; }

.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.form-label { font-size: 0.8rem; font-weight: 500; color: var(--cream-dim); letter-spacing: 0.05em; }
.form-select {
  width: 100%; min-width: 0;
  background: #FAFAFA;
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--cream);
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23047840' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
.form-select:focus { outline: none; border-color: var(--gold); }

.btn-generate {
  width: 100%;
  background: var(--gold-button); color: #fff;
  border: none; border-radius: 100px;
  padding: 1rem; font-size: 1rem; font-weight: 700;
  cursor: pointer; font-family: 'Inter', sans-serif;
  transition: all 0.2s;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}

/* Loading state: swap the label for a spinning ring while a search/plan
   request is in flight (see setButtonLoading() in app.js) — reused by both
   the text-search button and (if given the same id="…Btn" markup) any
   other .btn-generate. */
.btn-generate .btn-spinner {
  display: none;
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pdf-spin 0.7s linear infinite;
}
.btn-generate.is-loading { cursor: not-allowed; }

.btn-generate.is-loading .btn-label { display: none; }
.btn-generate.is-loading .btn-spinner { display: inline-block; }

/* RESULT PANEL */
.result-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.2rem;
}
.result-title { font-family: 'Inter', sans-serif; font-size: 1rem; color: var(--white); }
.result-meta { font-size: 0.75rem; color: var(--muted); }
.result-img {
  width: 100%; aspect-ratio: 4/3;
  background: var(--panel);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 0.85rem;
  margin-bottom: 1.2rem;
  position: relative; overflow: hidden;
}
.result-img-compact {
  width: 50%; aspect-ratio: auto; height: auto;
  margin-left: auto; margin-right: auto;
}
.result-img-inner {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--panel) 0%, var(--panel-alt) 100%);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 0.75rem;
}
.result-shimmer {
  width: 80%; height: 8px; background: rgba(4,120,64,0.15);
  border-radius: 4px; animation: shimmer 1.8s ease-in-out infinite;
}
.result-shimmer-2 { width: 60%; animation-delay: 0.3s; }

.btn-retry {
  width: 100%; margin-top: 0.6rem; padding: 0.6rem;
  background: rgba(4,120,64,0.1); border: 0.5px solid var(--border-strong);
  color: var(--gold); border-radius: 8px; cursor: pointer;
  font-size: 0.8rem; font-weight: 600; font-family: 'Inter', sans-serif;
}

.result-shimmer-3 { width: 70%; animation-delay: 0.6s; }
@keyframes shimmer {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.9; }
}

/* ============ ANIMATIONS ============ */
@keyframes heroRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes visualRise { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes cardRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes uploadBreathe {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.08); opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Scroll reveal — applied to sections/cards as they enter the viewport */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(.2,.8,.2,1), transform 0.7s cubic-bezier(.2,.8,.2,1);
  }
  .reveal.reveal-visible { opacity: 1; transform: none; }
  .steps-grid .step.reveal:nth-child(2) { transition-delay: 0.08s; }
  .steps-grid .step.reveal:nth-child(3) { transition-delay: 0.16s; }
  .gallery-grid .gallery-item.reveal:nth-child(2) { transition-delay: 0.08s; }
  .gallery-grid .gallery-item.reveal:nth-child(3) { transition-delay: 0.16s; }
  .quote-grid .quote-card.reveal:nth-child(2) { transition-delay: 0.08s; }

  /* Hero entrance */
  .hero-eyebrow, .hero-title, .hero-sub, .hero-actions { opacity: 0; }
  .hero-eyebrow { animation: heroRise 0.7s cubic-bezier(.2,.8,.2,1) 0.05s forwards; }
  .hero-title { animation: heroRise 0.7s cubic-bezier(.2,.8,.2,1) 0.15s forwards; }
  .hero-sub { animation: heroRise 0.7s cubic-bezier(.2,.8,.2,1) 0.28s forwards; }
  .hero-actions { animation: heroRise 0.7s cubic-bezier(.2,.8,.2,1) 0.4s forwards; }
  .hero-visual { opacity: 0; animation: visualRise 0.8s cubic-bezier(.2,.8,.2,1) 0.25s forwards; }
  .room-badge { opacity: 0; animation: heroRise 0.6s cubic-bezier(.2,.8,.2,1) 0.7s forwards; }

  /* Upload zone: idle invitation to interact, gone once a photo replaces the icon */
  .upload-icon { display: inline-block; animation: uploadBreathe 2.6s ease-in-out infinite; }

  /* AI report cards: cascade in instead of appearing all at once */
  #furnitureList .report-card { animation: cardRise 0.5s cubic-bezier(.2,.8,.2,1) both; }
  #furnitureList .report-card:nth-of-type(1) { animation-delay: 0.05s; }
  #furnitureList .report-card:nth-of-type(2) { animation-delay: 0.12s; }
  #furnitureList .report-card:nth-of-type(3) { animation-delay: 0.19s; }
  #furnitureList .report-card:nth-of-type(4) { animation-delay: 0.26s; }
  #furnitureList .report-card:nth-of-type(5) { animation-delay: 0.33s; }
}

.furniture-list { display: flex; flex-direction: column; gap: 0.5rem; }
.furniture-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: rgba(26,20,16,0.035);
  border: 0.5px solid var(--border);
  border-radius: 8px;
}
.furn-swatch {
  width: 48px; height: 48px; border-radius: 8px;
  flex-shrink: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.furn-swatch img {
  width: 100%; height: 100%; object-fit: cover;
}
.furn-info { flex: 1; min-width: 0; }
.furn-name { font-size: 0.8rem; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.furn-name a { color: var(--cream); text-decoration: none; }

.furn-store { font-size: 0.7rem; color: var(--muted); }
.furn-store a { color: var(--gold); text-decoration: none; font-weight: 500; }

.furn-price { font-size: 0.85rem; font-weight: 600; color: var(--gold); flex-shrink: 0; }

.total-row {
  border-top: 0.5px solid var(--border-strong);
  margin-top: 0.75rem; padding-top: 0.75rem;
  display: flex; justify-content: space-between;
  align-items: center;
}
.total-label { font-size: 0.85rem; color: var(--cream-dim); }
.total-price { font-family: 'Inter', sans-serif; font-size: 1.3rem; color: var(--gold); }

/* PRICING */
.pricing-section { padding: 6rem 2rem; }
.pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem; max-width: 900px; margin: 3rem auto 0;
}
.plan {
  background: var(--panel);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  position: relative;
  transition: transform 0.2s, border-color 0.2s;
}

.plan.featured {
  border: 1.5px solid var(--gold);
  background: rgba(4,120,64,0.05);
}
.plan-badge {
  position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%);
  background: var(--gold-button); color: #fff;
  padding: 0.3rem 1rem; border-radius: 100px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em;
  white-space: nowrap;
}
.plan-name {
  font-size: 0.75rem; font-weight: 600; color: var(--gold);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 1rem;
}
.plan-price {
  font-family: 'Inter', sans-serif;
  font-size: 2.5rem; color: var(--white);
  line-height: 1; margin-bottom: 0.4rem;
}
.plan-price sup { font-size: 1.2rem; vertical-align: top; margin-top: 0.5rem; }
.plan-period { font-size: 0.8rem; color: var(--muted); margin-bottom: 1.5rem; }
.plan-features { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 2rem; }
.plan-features li {
  display: flex; align-items: flex-start; gap: 0.5rem;
  font-size: 0.85rem; color: var(--cream-dim);
}
.plan-features li::before {
  content: "\2713"; color: var(--gold);
  font-size: 0.75rem; margin-top: 0.1rem; flex-shrink: 0;
}
.plan-features li.no::before { content: "\2013"; color: var(--muted); }
.plan-features li.no { color: var(--muted); }
.btn-plan {
  width: 100%; padding: 0.8rem;
  border-radius: 100px;
  font-size: 0.9rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
  font-family: 'Inter', sans-serif;
  text-align: center;
}
.btn-plan-outline {
  background: transparent; color: var(--cream);
  border: 0.5px solid var(--border-strong);
}

.btn-plan-solid {
  background: var(--gold-button); color: #fff;
  border: none;
}

/* TESTIMONIALS */
.testimonials {
  padding: 6rem 2rem;
  background: var(--panel);
  border-top: 0.5px solid var(--border);
}
.testimonials > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.testi-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; margin-top: 3rem;
}
.testi-card {
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}
.testi-stars { color: var(--gold); font-size: 0.9rem; margin-bottom: 1rem; letter-spacing: 2px; }
.testi-text { font-size: 0.9rem; color: var(--cream-dim); line-height: 1.7; margin-bottom: 1.25rem; font-style: italic; }
.testi-author { display: flex; align-items: center; gap: 0.75rem; }
.testi-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(4,120,64,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 600; color: var(--gold);
}
.testi-name { font-size: 0.85rem; color: var(--cream); font-weight: 500; }
.testi-role { font-size: 0.75rem; color: var(--muted); }

/* FAQ */
.faq { padding: 6rem 2rem; max-width: 720px; margin: 0 auto; }
.faq-item {
  border-bottom: 0.5px solid var(--border);
  padding: 1.5rem 0;
  cursor: pointer;
}
.faq-q {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.95rem; color: var(--cream); font-weight: 500;
  gap: 1rem;
}
.faq-toggle { color: var(--gold); font-size: 1.2rem; flex-shrink: 0; transition: transform 0.2s; }
.faq-a {
  font-size: 0.875rem; color: var(--muted);
  line-height: 1.75; margin-top: 1rem;
  display: none;
}
.faq-item.open .faq-toggle { transform: rotate(45deg); }
.faq-item.open .faq-a { display: block; }

/* CTA FOOTER */
.cta-section {
  padding: 8rem 2rem;
  text-align: center;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(4,120,64,0.08) 0%, transparent 70%);
}
.cta-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--white); margin-bottom: 1.2rem;
}
.cta-title em { color: var(--gold); font-style: italic; }
.cta-sub { color: var(--muted); font-size: 1rem; margin-bottom: 3rem; max-width: 500px; margin-left: auto; margin-right: auto; }

footer {
  border-top: 0.5px solid rgba(255,255,255,0.08);
  padding: 2rem 2.5rem;
  /* Matches fabutorwebaruhaz.hu/lamello.hu's own near-black footer
     (#0d0b0b / #000000), not the light cream the HOMM version used —
     every color below is overridden to a light tone to stay readable
     against it. */
  background: #0d0b0b;
}
.footer-main {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem;
}
.footer-brand {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem;
}
.footer-logo { font-family: 'Inter', sans-serif; color: var(--gold-light); font-size: 1rem; }
.footer-logo-prefix { font-family: 'Inter', sans-serif; font-style: italic; color: rgba(255,255,255,0.45); font-size: 0.8rem; margin-right: 0.35rem; }
.footer-links { display: flex; gap: 2rem; }
.footer-links a { font-size: 0.8rem; color: rgba(255,255,255,0.55); text-decoration: none; }

.footer-copy { font-size: 0.75rem; color: rgba(255,255,255,0.35); }

/* REQUEST COUNTER — live count of AI requests across the whole furnitin
   AI technology (this worker + the furnitin AI worker). Kept as plain,
   small text matching .footer-copy's proportions (not a standalone pill —
   that read as an oversized, disconnected card sitting in the footer)
   with just the pulsing dot and gold number for a touch of life. */
.request-counter {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; color: rgba(255,255,255,0.5);
  text-align: left; white-space: nowrap;
}
.request-counter-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--success);
  animation: requestCounterPulse 1.8s ease-out infinite;
}
@keyframes requestCounterPulse {
  0% { box-shadow: 0 0 0 0 rgba(13,135,86,0.45); }
  70% { box-shadow: 0 0 0 6px rgba(13,135,86,0); }
  100% { box-shadow: 0 0 0 0 rgba(13,135,86,0); }
}
.request-counter-number {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem; font-weight: 600;
  /* --gold is a dark green — unlike the rest of this light-theme page, the
     footer itself is dark (see footer{} above), so this needs the lighter
     tint to stay readable instead of the usual --gold. */
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
  transition: transform 0.25s ease, color 0.25s ease;
}
/* Toggled briefly by JS whenever the count changes, so periodic live
   refreshes are eye-catching too, not just the first count-up. */
.request-counter-number.is-updating {
  color: #fff;
  transform: scale(1.12);
}
@media (max-width: 480px) {
  /* Flexbox cross-axis alignment (align-items) has no good answer for
     "center this small dot on just the first line of wrapped text" — it
     centers/aligns the dot against the whole (multi-line-tall) box instead,
     which read as sitting too high. Switching to plain inline flow with
     vertical-align:middle on the dot is the standard fix: as the first
     inline element, its middle aligns with the middle of the first line
     specifically, and the text after it wraps normally as plain text would.
     Extra margin-bottom on .footer-brand (not the counter itself) puts a
     visibly bigger gap after the whole logo+counter block, before the
     footer links row that follows it in the stacked mobile layout. */
  .footer-brand { margin-bottom: 1.25rem; }
  .request-counter {
    display: block; white-space: normal;
    max-width: 260px; margin: 0 auto; text-align: center;
  }
  .request-counter-dot {
    display: inline-block; vertical-align: middle;
    margin-right: 0.4rem;
  }
}

/* MODALS */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10,8,6,0.85);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.modal-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
.modal {
  background: var(--panel);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  max-width: 480px; width: 100%;
  max-height: 85vh; overflow-y: auto;
  position: relative;
  transform: scale(0.96);
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1);
}
.modal-overlay.open .modal { transform: scale(1); }
.modal-story { max-width: 600px; }
.modal-story .modal-title { margin-bottom: 1.5rem; }
.modal-legal h4 {
  font-size: 0.85rem; color: var(--cream); font-weight: 600;
  margin: 1.4rem 0 0.4rem;
}
.modal-legal h4:first-child { margin-top: 0; }
.modal-legal p {
  font-size: 0.82rem; color: var(--cream-dim); line-height: 1.6;
}
.modal-close {
  position: absolute; top: 1.2rem; right: 1.2rem;
  background: none; border: none;
  color: var(--muted); font-size: 1.3rem;
  cursor: pointer; transition: color 0.2s;
}

.modal-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.5rem; color: var(--white);
  margin-bottom: 0.5rem;
}
.modal-sub { font-size: 0.85rem; color: var(--muted); margin-bottom: 2rem; }
.form-input {
  width: 100%;
  background: rgba(26,20,16,0.055);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--cream);
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  margin-bottom: 1rem;
}
.form-input::placeholder { color: var(--muted); }
.form-input:focus { outline: none; border-color: var(--gold); }
.modal-divider { text-align: center; color: var(--muted); font-size: 0.8rem; margin: 1rem 0; }

/* LIGHTBOX (referencia képek teljes méretben) */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(10,8,6,0.92);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.lightbox-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
.lightbox-overlay img {
  max-width: 90vw; max-height: 85vh;
  width: auto; height: auto;
  display: block;
  border-radius: var(--radius);
  border: 0.5px solid var(--border-strong);
  transform: scale(0.96);
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1);
}
.lightbox-overlay.open img { transform: scale(1); }
.lightbox-close {
  position: absolute; top: 1.5rem; right: 1.5rem;
  background: none; border: none;
  color: #FDFCFA; font-size: 1.6rem;
  cursor: pointer; transition: color 0.2s;
  line-height: 1;
}

.plan-selector { display: flex; gap: 0.75rem; margin-bottom: 1.5rem; }
.plan-chip {
  flex: 1; padding: 0.75rem; border-radius: var(--radius);
  border: 0.5px solid var(--border-strong);
  background: transparent; cursor: pointer;
  text-align: center; transition: all 0.2s;
}
.plan-chip.selected {
  border-color: var(--gold);
  background: rgba(4,120,64,0.1);
}
.plan-chip-name { font-size: 0.8rem; font-weight: 600; color: var(--cream); display: block; }
.plan-chip-price { font-size: 0.75rem; color: var(--muted); display: block; }
.plan-chip.selected .plan-chip-name { color: var(--gold); }

/* FORM FEEDBACK */
.form-success {
  background: rgba(76,175,122,0.15);
  border: 0.5px solid var(--success);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  color: var(--success);
  font-size: 0.85rem;
  text-align: center;
  margin-top: 1rem;
}
.form-error {
  background: rgba(226,75,74,0.15);
  border: 0.5px solid #E24B4A;
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  color: #E24B4A;
  font-size: 0.85rem;
  text-align: center;
  margin-top: 0.5rem;
}

/* DESIGN REPORT */
.report-card {
  background: rgba(26,20,16,0.035);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem;
  margin-bottom: 0.75rem;
}
.report-card-muted { opacity: 0.8; }
.report-card-header {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 0.5px solid var(--border);
}
.report-card-icon { font-size: 1.1rem; }
.report-card-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem; color: var(--white); font-weight: 600;
}
.report-text {
  font-size: 0.85rem; color: var(--cream-dim);
  line-height: 1.75;
}
.report-text-accent {
  color: var(--cream);
  font-style: italic;
  border-left: 2px solid var(--gold);
  padding-left: 0.75rem;
}
.report-tags {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  margin-top: 0.6rem;
}
.report-tag {
  font-size: 0.72rem;
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
  background: rgba(26,20,16,0.055);
  border: 0.5px solid var(--border);
  color: var(--cream-dim);
}
.report-tag-green { background: rgba(76,175,122,0.15); border-color: rgba(76,175,122,0.3); color: var(--success); font-weight: 600; }
.report-tag-orange { background: rgba(255,152,0,0.12); border-color: rgba(255,152,0,0.25); color: #FFB74D; font-weight: 600; }

.report-furniture-list { display: flex; flex-direction: column; gap: 0.75rem; }

.report-furniture-item {
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(26,20,16,0.03);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  transition: border-color 0.2s;
}

.report-furn-main { display: flex; gap: 0.75rem; }

.report-furn-visual {
  width: 180px; height: 180px;
  border-radius: 8px; overflow: hidden;
  flex-shrink: 0; position: relative;
  background: rgba(26,20,16,0.055);
}
.report-furn-num {
  width: 180px; height: 180px; border-radius: 8px;
  background: rgba(4,120,64,0.15); color: var(--gold);
  font-size: 1.2rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.report-furn-visual img {
  /* contain (not cover) — the box is a fixed max area, but the whole
     photo must stay visible; any mismatch in aspect ratio leaves empty
     space on the sides or top/bottom instead of cropping the furniture. */
  width: 100%; height: 100%; object-fit: contain; display: block;
}

.report-furn-content { flex: 1; min-width: 0; }
.report-furn-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 0.5rem; margin-bottom: 0.5rem;
}
.report-furn-category {
  font-size: 0.65rem; font-weight: 600; color: var(--gold);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 0.15rem;
}
.report-furn-name {
  font-size: 0.85rem; color: var(--cream); font-weight: 500;
}
.report-furn-store {
  font-size: 0.7rem; color: var(--muted); margin-top: 0.15rem;
}

.report-furn-price {
  font-size: 0.95rem; font-weight: 700; color: var(--gold);
  white-space: nowrap;
}

/* Product-page link — a full-width footer button on its own row, kept off
   the photo (an overlay would cover part of the product) and off the price
   (which stays scannable up top instead of sharing a cramped corner). A
   full-width bar is also an easier tap target on mobile than a small
   corner badge, and carries a text label since a bare icon isn't reliably
   understood by every shopper (no hover tooltip on mobile to explain it).
   Also gives the PDF export a small, precise target to turn into a real
   link annotation, instead of the whole card being one giant clickable
   area. */
.report-furn-link-icon {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0.55rem;
  background: var(--gold-button); color: #fff;
  border-radius: 8px;
  font-size: 0.78rem; font-weight: 700;
  transition: background 0.15s;
}

.report-furn-link-icon svg { width: 13px; height: 13px; flex-shrink: 0; display: block; }
.report-furn-detail {
  font-size: 0.78rem; color: var(--cream-dim);
  line-height: 1.6; margin-top: 0.3rem;
}
.report-furn-detail strong { color: var(--cream); font-weight: 500; }

.report-total {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--border-strong);
  margin-top: 1rem; padding-top: 0.75rem;
}
.report-total-label { font-size: 0.9rem; color: var(--cream); font-weight: 500; }
.report-total-price {
  font-family: 'Inter', sans-serif;
  font-size: 1.5rem; color: var(--gold); font-weight: 600;
}

.report-tips {
  list-style: none; display: flex; flex-direction: column; gap: 0.5rem;
}
.report-tips li {
  font-size: 0.82rem; color: var(--cream-dim); line-height: 1.7;
  padding-left: 1.2rem; position: relative;
}
.report-tips li::before {
  content: "→"; position: absolute; left: 0;
  color: var(--gold); font-weight: 600;
}

.report-stores {
  font-size: 0.75rem; color: var(--muted);
  display: flex; flex-direction: column; gap: 0.25rem;
}

/* RESPONSIVE */
/* Nav collapses to the hamburger menu earlier than the rest of the
   mobile layout — with 7 links plus the email button, the full nav
   row starts crowding/wrapping well above the 900px content breakpoint. */
@media (max-width: 1250px) {
  .hamburger { display: flex; }
  /* backdrop-filter on nav would make it the containing block for the
     fixed-position mobile menu below, clipping it to the navbar's own
     height instead of the full viewport — disable it here. */
  nav { backdrop-filter: none; }
  .nav-links {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    /* Solid, not translucent — .nav-links a is white text (see above),
       so this needs to stay dark for it to stay readable regardless of
       whatever's behind it. */
    background: #047840;
    backdrop-filter: blur(12px);
    flex-direction: column;
    align-items: center; justify-content: flex-start;
    gap: 2rem;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s;
    z-index: 99;
    /* On short viewports the link list + email button can be taller
       than the screen. justify-content:center would leave the top
       items unreachable once scrolling is needed (a well-known flexbox
       centering quirk), so the menu top-aligns and scrolls instead,
       with padding to clear the fixed nav bar above. */
    overflow-y: auto;
    padding: 6rem 1.5rem 3rem;
  }
  .nav-links.open {
    opacity: 1; pointer-events: auto;
  }
  .nav-links a { font-size: 1.2rem; display: block; }
  .nav-links .btn-nav { font-size: 1.1rem; padding: 0.8rem 2rem; white-space: nowrap; }

  nav { padding: 0.6rem 1.5rem; }
  .nav-left { gap: 0.6rem; }
}

@media (max-width: 900px) {
  .contact-btn { min-height: 86px; }
  .hero { padding: 7rem 1.5rem 3rem; }
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-sub { max-width: 100%; }

  /* Hero result mockup: it's a decorative preview, not real content, so
     keep it compact on mobile — small row-style thumbnails instead of
     full-width photo blocks, and drop the 3rd item so it doesn't push
     the rest of the page far down the screen. */
  .hero-ui .report-furniture-item { flex-direction: row; }
  .hero-ui .report-furn-visual,
  .hero-ui .report-furn-num { width: 56px; height: 56px; aspect-ratio: auto; }
  .hero-ui .report-furniture-item:nth-child(3) { display: none; }

  /* AI designer window: reaches the screen edges on mobile (no gap from
     the section's own padding), for both the text-search and the
     photo-designer tool — but keeps its rounded corners, which now sit
     flush against the viewport edge. Stop the grid column from being
     forced wider than the viewport by its content (which was clipping
     the form controls on the right). */
  .app-section { padding: 7rem 1rem 3rem; }
  .app-ui {
    margin-left: -1rem; margin-right: -1rem;
    border-left: none; border-right: none;
  }
  .app-left, .app-right { padding: 1.25rem; min-width: 0; }

  /* Result panel: full-width photo, and furniture cards stack instead
     of a cramped side-by-side row that left almost no room for text. */
  .result-img-compact { width: 100%; }
  .report-furn-main { flex-direction: column; }
  .report-furn-visual { width: 100%; height: auto; aspect-ratio: 4/3; }
  .report-furn-num { width: 100%; height: 100%; aspect-ratio: 4/3; }

  /* A long "2× 67 860 Ft = 135 720 Ft"-style price (shown when quantity > 1)
     doesn't fit next to the category/name column on a narrow screen — the
     column was shrinking to a sliver and its text wrapped into a jumbled
     one-word-per-line mess right underneath the price. Stack the price on
     its own line below instead of squeezing them side by side. */
  .report-furn-top { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .report-furn-price { white-space: normal; }

  .steps-grid { grid-template-columns: 1fr; }
  .studio-callout { padding: 1.5rem; }
  .studio-callout-top { flex-direction: column; text-align: center; }
  .studio-callout .btn-primary { width: 100%; justify-content: center; }
  .studio-callout-gallery { flex-wrap: wrap; }
  .studio-callout-gallery img { flex: 1 1 calc(50% - 0.375rem); min-width: 100px; height: 140px; }

  .upload-zone { padding: 2rem 1rem; }

  .pricing-grid { grid-template-columns: 1fr; max-width: 400px; }
  .testi-grid { grid-template-columns: 1fr; }
  .quote-grid { grid-template-columns: 1fr; }

  .trust-strip { gap: 1.5rem; padding: 1.2rem 1rem; }
  .trust-item { font-size: 0.78rem; }

  footer { padding: 2rem 1.5rem; }
  .footer-main { flex-direction: column; text-align: center; }
  .footer-brand { align-items: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 1rem; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 1.8rem; }
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost { width: 100%; text-align: center; justify-content: center; }
  .plan-selector { flex-direction: column; }
}

/* GALLERY (látványterv referenciák) */
.gallery-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 2rem; margin-top: 3rem;
}
.gallery-item {
  background: var(--panel);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column; align-items: stretch;
  transition: transform 0.2s, border-color 0.2s;
}

.gallery-item img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  display: block; cursor: zoom-in; flex-shrink: 0;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
}

.gallery-caption {
  padding: 1.1rem 1.3rem;
  font-size: 0.9rem; color: var(--cream-dim);
}
.gallery-caption strong { display: block; color: var(--cream); font-weight: 500; margin-bottom: 0.2rem; }

@media (max-width: 700px) {
  .gallery-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  #referenciak { padding-left: 0.75rem; padding-right: 0.75rem; }
}

/* ---- PDF EXPORT (print) — AI design report ---- */
.print-only { display: none; }
.report-print-header {
  padding-bottom: 1rem; margin-bottom: 1.5rem;
  border-bottom: 2px solid #047840;
}
.report-print-header .print-logo-row {
  display: flex; align-items: center; gap: 0.5rem;
}
.report-print-header .print-store-logo {
  height: 24px; width: auto; display: block;
}
.report-print-header .print-tagline {
  font-family: 'Inter', sans-serif; font-style: italic;
  font-size: 1rem; color: #666666;
  margin-left: 0.6rem; padding-left: 0.6rem;
  border-left: 1px solid #d9d9d9;
}
.report-print-header .print-date {
  font-size: 0.8rem; color: #6b6b6b; margin-top: 0.3rem;
}
.report-print-header .print-photo {
  /* A shrunk-but-uncropped <img> would need object-fit:contain, which
     html2canvas doesn't support (it just stretches the image to fill the
     box — see the old comment this replaced). A background-image div with
     background-size:contain scales correctly under html2canvas instead:
     the whole photo stays visible, shrunk to fit within a box capped at
     roughly the top third of an A4 page, with empty space (not cropping)
     taking up any leftover room. background-repeat:no-repeat is required
     here — without it, that leftover room would tile the photo instead of
     staying blank. */
  display: block; width: 100%; height: 90mm;
  background-size: contain; background-position: center; background-repeat: no-repeat;
  border-radius: 8px; margin-top: 1rem;
}

/* Applied to an off-screen clone of #furnitureList that gets rasterized by
   html2pdf (see downloadReportAsPdf in app.js) — this replaced window.print(),
   which opened a print dialog on desktop and, on iOS Safari, both mis-paginated
   flex layouts and required manual "Save PDF" steps instead of downloading. */
.pdf-export.no-print,
.pdf-export .no-print {
  display: none !important;
}
.pdf-export {
  /* Deliberately NO position/z-index override here. html2canvas has two
     separate bugs that both produce a "successfully sized but blank" (or
     zero-height) canvas: (1) it mis-paints elements that sit far down a
     long document, which #furnitureList does — thousands of pixels down
     this page — and (2) it mis-measures position:absolute/fixed elements
     as zero-height, regardless of offset. The only combination that
     reliably works is a plain static-flow element inserted at the very
     top of <body>. downloadReportAsPdf() in app.js does that (and covers
     the resulting layout jump with a full-screen loading overlay) rather
     than this CSS trying to reposition it. */
  display: block !important;
  background: #fff !important;
  color: #1A1410 !important;
  width: 700px !important;
  max-width: 700px !important;
  margin: 0 !important;
  padding: 1.5rem !important;
  border: none !important;
  box-shadow: none !important;
}
/* Full-screen cover shown while downloadReportAsPdf() briefly inserts the
   .pdf-export clone at the top of <body> (see the comment above) — without
   this the page would visibly jump as that block appears and disappears. */
.pdf-loading-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem;
  font-family: 'Inter', sans-serif; color: var(--cream-dim); font-size: 0.9rem;
}
.pdf-loading-overlay .spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border-strong);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: pdf-spin 0.8s linear infinite;
}
@keyframes pdf-spin { to { transform: rotate(360deg); } }

.pdf-export .print-only { display: block; }
.pdf-export .report-card {
  background: #fff !important;
  border: 1px solid #ddd !important;
  box-shadow: none !important;
  color: #1A1410 !important;
}
.pdf-export .report-text,
.pdf-export .report-furn-name,
.pdf-export .report-furn-detail,
.pdf-export .report-tips li {
  color: #1A1410 !important;
}
/* html2canvas doesn't reliably resolve CSS custom properties (var(...)) —
   every other .pdf-export override above already hardcodes literal colors
   for exactly this reason. This button relied on var(--gold-button) /
   var(--gold-light), which is why it rasterized washed-out instead of the
   real brand red. */
.pdf-export .report-furn-link-icon {
  background: #047840 !important;
  color: #fff !important;
}

/* Deliberately no block+float or break-inside overrides here (an earlier
   attempt tried both to keep cards from splitting across a page — first to
   dodge WebKit's native print-engine bug, moot now that export goes through
   html2canvas/html2pdf instead of window.print(); then via html2pdf's own
   "avoid break" page-break modes, which measured floated elements' height
   wrong and, worse, turned out unpredictable even without floats — the same
   8-item report scored anywhere from 3 to 8 pages across runs. downloadReportAsPdf()
   in app.js now uses plain 'legacy' pagination instead: a card can
   occasionally get cut mid-box, but page count is a deterministic division
   of content height, so nothing is ever silently dropped. Plain flex (the
   base, non-.pdf-export rules already above) is what's rendered either way. */

.toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translate(-50%, 12px);
  background: var(--ink);
  color: var(--bg);
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 10000;
}
.toast.toast-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Touch devices have no real "mouse leave" — tapping a button applies its
   :hover style (iOS Safari in particular keeps it applied) with nothing to
   ever clear it, so every button looked "stuck" in its hover state after a
   tap until something else on the page was touched. Restricting :hover to
   devices that report actual hover capability fixes this without touching
   tap/active feedback (which mobile browsers already handle natively). */
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { color: #fff; }
  .btn-nav:hover { background: rgba(255,255,255,0.85); transform: translateY(-1px); }
  .hero-photo .btn-ghost:hover { border-color: var(--gold-light); color: var(--gold-light); }
  .btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(4,120,64,0.25); }
  .btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
  .step:hover { background: var(--panel-alt); }
  .quote-card:hover { background: var(--panel-alt); transform: translateY(-4px); }
  .choice-card:hover {
    transform: translateY(-3px);
    border-color: var(--gold);
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  }
  .back-to-choice:hover { color: var(--gold); }
  .upload-zone:hover {
    border-color: var(--gold);
    background: #F5F5F5;
  }
  .btn-generate:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(4,120,64,0.3); }
  .btn-generate.is-loading:hover { transform: none; box-shadow: none; }
  .btn-retry:hover { border-color: var(--gold); }
  .furn-name a:hover { color: var(--gold); text-decoration: underline; }
  .furn-store a:hover { text-decoration: underline; }
  .plan:hover { transform: translateY(-4px); }
  .btn-plan-outline:hover { border-color: var(--gold); color: var(--gold); }
  .btn-plan-solid:hover { background: var(--gold-light); box-shadow: 0 6px 20px rgba(4,120,64,0.3); }
  .footer-links a:hover { color: #fff; }
  .modal-close:hover { color: var(--cream); }
  .lightbox-close:hover { color: var(--gold-light); }
  .plan-chip:hover { border-color: var(--gold); background: rgba(4,120,64,0.1); }
  .report-furniture-item:hover { border-color: var(--border-strong); }
  .report-furn-link-icon:hover { background: var(--gold-light); }
  .gallery-item:hover { transform: translateY(-4px); border-color: var(--border-strong); }
  .gallery-item:hover img { transform: scale(1.06); }
}