(nincs tárgy) 
Kapcsolat fotója
Feladó	Szilveszter a LEDream-től 👋🏼	Címzett	Horvath Mark	Válaszcím	gaal.szilveszter@ledream.hu	Dátum	Ma 19:33
Összegzés Fejlécek Egyszerű szöveg
<div id="ledream-landing">
<style>
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   LEDream — sötét, prémium, magenta. Apple-szerű dinamika.
   Minden szabály a #ledream-landing wrapper alá szűkítve.
   ============================================================ */

#ledream-landing {
  /* Surfaces — közel-fekete, finom magenta árnyalattal */
  --bg:        oklch(0.145 0.012 330);
  --bg-2:      oklch(0.125 0.012 330);
  --surface:   oklch(0.185 0.016 328);
  --surface-2: oklch(0.225 0.020 328);
  --line:      oklch(0.34 0.02 330 / 0.55);
  --line-soft: oklch(0.34 0.02 330 / 0.28);

  /* Szöveg */
  --text:      oklch(0.975 0.006 330);
  --muted:     oklch(0.74 0.016 330);
  --dim:       oklch(0.56 0.018 330);

  /* Magenta accent */
  --accent-h: 330;
  --accent:        oklch(0.635 0.268 var(--accent-h));
  --accent-bright: oklch(0.74 0.27 var(--accent-h));
  --accent-deep:   oklch(0.52 0.24 var(--accent-h));
  --accent-15:     oklch(0.635 0.268 var(--accent-h) / 0.15);
  --accent-10:     oklch(0.635 0.268 var(--accent-h) / 0.10);
  --accent-30:     oklch(0.635 0.268 var(--accent-h) / 0.30);

  --glow: 1;

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);

  --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Teljes szélességű kitörés a téma/Elementor konténer korlátaiból,
     hogy ne látsszon a háttér az oldalakon (full-bleed). */
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

#ledream-landing ::selection { background: var(--accent); color: #fff; }

#ledream-landing a { color: inherit; text-decoration: none; }
#ledream-landing img { display: block; max-width: 100%; }
#ledream-landing button { font-family: inherit; cursor: pointer; }

/* ---------- Layout helpers ---------- */
#ledream-landing .ledream-wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
#ledream-landing .ledream-section { position: relative; }

#ledream-landing .ledream-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-bright);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
#ledream-landing .ledream-eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--accent);
  display: inline-block;
}

#ledream-landing h1, #ledream-landing h2, #ledream-landing h3 { font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; }
#ledream-landing .ledream-h-display { font-size: clamp(40px, 6vw, 76px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.06; text-wrap: balance; }
#ledream-landing .ledream-h2 { font-size: clamp(30px, 4.2vw, 52px); }
#ledream-landing .ledream-lead { font-size: clamp(17px, 1.5vw, 21px); color: var(--muted); line-height: 1.6; }

#ledream-landing .ledream-grad-text {
  background: linear-gradient(105deg, var(--text) 30%, var(--accent-bright) 75%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Buttons ---------- */
#ledream-landing .ledream-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  border-radius: 100px;
  font-size: 15px; font-weight: 600;
  border: 1px solid transparent;
  transition: transform .25s var(--ease), background .25s, box-shadow .25s, border-color .25s;
  white-space: nowrap;
}
#ledream-landing .ledream-btn:active { transform: scale(0.97); }
#ledream-landing .ledream-btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 0 transparent, 0 10px 40px oklch(0.635 0.268 var(--accent-h) / calc(0.45 * var(--glow)));
}
#ledream-landing .ledream-btn-primary:hover {
  background: var(--accent-bright);
  transform: translateY(-2px);
  box-shadow: 0 14px 50px oklch(0.635 0.268 var(--accent-h) / calc(0.6 * var(--glow)));
}
#ledream-landing .ledream-btn-ghost {
  background: oklch(0.99 0 0 / 0.04);
  color: var(--text);
  border-color: var(--line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#ledream-landing .ledream-btn-ghost:hover { background: oklch(0.99 0 0 / 0.09); border-color: var(--line); transform: translateY(-2px); }

/* ---------- Scroll progress ---------- */
#ledream-landing .ledream-scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 200; pointer-events: none;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-bright));
  box-shadow: 0 0 14px var(--accent-30);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* ---------- Nav ---------- */
#ledream-landing .ledream-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .35s, border-color .35s, backdrop-filter .35s;
  border-bottom: 1px solid transparent;
}
#ledream-landing .ledream-nav.ledream-scrolled {
  background: oklch(0.145 0.012 330 / 0.72);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: var(--line-soft);
}
#ledream-landing .ledream-nav-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 16px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
#ledream-landing .ledream-brand { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 21px; letter-spacing: -0.03em; }
#ledream-landing .ledream-brand .ledream-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px 2px var(--accent), 0 0 30px 4px oklch(0.635 0.268 var(--accent-h) / 0.6);
}
#ledream-landing .ledream-brand .ledream-led { color: var(--text); }
#ledream-landing .ledream-brand .ledream-ream { color: var(--accent-bright); }
#ledream-landing .ledream-brand-footer { font-size: 24px; }
#ledream-landing .ledream-logo-img { height: 28px; width: auto; display: block; }
#ledream-landing .ledream-brand-footer .ledream-logo-img { height: 34px; }
#ledream-landing .ledream-nav-links { display: flex; align-items: center; gap: 32px; }
#ledream-landing .ledream-nav-links a { font-size: 15px; color: var(--muted); transition: color .2s; position: relative; }
#ledream-landing .ledream-nav-links a:hover { color: var(--text); }
#ledream-landing .ledream-nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 100%; height: 1.5px;
  background: var(--accent-bright);
  transform: scaleX(0); transform-origin: right center;
  transition: transform .35s var(--ease);
}
#ledream-landing .ledream-nav-links a:hover::after { transform: scaleX(1); transform-origin: left center; }
#ledream-landing .ledream-nav-cta { display: flex; align-items: center; gap: 14px; }
#ledream-landing .ledream-nav-phone {
  font-family: var(--font-mono); font-size: 14px; color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
#ledream-landing .ledream-nav-phone span { color: var(--dim); }
#ledream-landing .ledream-hamburger { display: none; background: none; border: 0; color: var(--text); width: 40px; height: 40px; }
#ledream-landing .ledream-hamburger svg { width: 26px; height: 26px; }

/* mobile menu */
#ledream-landing .ledream-mobile-menu {
  position: fixed; inset: 0; z-index: 99;
  background: oklch(0.125 0.012 330 / 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: var(--gutter);
  transform: translateY(-100%);
  transition: transform .5s var(--ease);
  pointer-events: none;
}
#ledream-landing .ledream-mobile-menu.ledream-open { transform: translateY(0); pointer-events: auto; }
#ledream-landing .ledream-mobile-menu a { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
#ledream-landing .ledream-mobile-menu .ledream-mm-foot { margin-top: 30px; display: flex; flex-direction: column; gap: 14px; }
#ledream-landing .ledream-mobile-menu .ledream-mm-foot a { border-bottom: 0; font-size: 15px; padding: 14px 26px; }

/* ---------- Image slots (üres állapot, sötét téma) ---------- */
#ledream-landing .ledream-imgslot {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, oklch(0.205 0.018 328) 0 14px, oklch(0.18 0.015 330) 14px 28px);
}
#ledream-landing .ledream-imgslot img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Hero ---------- */
#ledream-landing .ledream-hero { padding: 180px 0 100px; overflow: hidden; }
#ledream-landing .ledream-hero-glow {
  position: absolute; z-index: 0; pointer-events: none;
  top: -10%; left: 50%; transform: translateX(-50%);
  width: 1100px; height: 800px;
  background: radial-gradient(closest-side, oklch(0.635 0.268 var(--accent-h) / calc(0.42 * var(--glow))), transparent 70%);
  filter: blur(20px);
}
#ledream-landing .ledream-hero-grid-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(oklch(0.99 0 0 / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.99 0 0 / 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 75%);
}
#ledream-landing .ledream-hero-canvas {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  pointer-events: none;
}
#ledream-landing .ledream-hero-inner { position: relative; z-index: 2; max-width: 1000px; margin: 0 auto; text-align: center; }
#ledream-landing .ledream-hero .ledream-badges { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 26px 0 0; }
#ledream-landing .ledream-chip {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em;
  padding: 7px 14px; border-radius: 100px;
  border: 1px solid var(--line); color: var(--muted);
  background: oklch(0.99 0 0 / 0.02);
}
#ledream-landing .ledream-hero .ledream-lead { margin: 26px auto 0; max-width: 640px; }
#ledream-landing .ledream-hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 38px; }

#ledream-landing .ledream-hero-visual {
  position: relative; z-index: 2;
  margin-top: 70px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 40px 120px oklch(0 0 0 / 0.55), 0 0 0 1px oklch(0.99 0 0 / 0.03) inset;
}
#ledream-landing .ledream-hero-visual .ledream-imgslot { height: clamp(320px, 52vw, 620px); }
#ledream-landing .ledream-hero-visual::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 -120px 120px -60px var(--bg);
}

/* stat ribbon */
#ledream-landing .ledream-ribbon {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line-soft);
  border: 1px solid var(--line-soft); border-radius: 18px; overflow: hidden;
  margin-top: 64px;
}
#ledream-landing .ledream-ribbon .ledream-cell { background: var(--bg); padding: 28px 24px; text-align: center; }
#ledream-landing .ledream-ribbon .ledream-num { font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -0.03em; }
#ledream-landing .ledream-ribbon .ledream-num .ledream-u { color: var(--accent-bright); }
#ledream-landing .ledream-ribbon .ledream-lbl { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--dim); text-transform: uppercase; margin-top: 6px; }

/* ---------- Section heading ---------- */
#ledream-landing .ledream-sec { padding: clamp(80px, 11vw, 140px) 0; }
#ledream-landing .ledream-sec-head { max-width: 720px; }
#ledream-landing .ledream-sec-head .ledream-h2 { margin-top: 18px; }
#ledream-landing .ledream-sec-head p { margin-top: 18px; }
#ledream-landing .ledream-sec-head.ledream-center { margin-inline: auto; text-align: center; }

/* ---------- Services ---------- */
#ledream-landing .ledream-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 56px; }
#ledream-landing .ledream-svc-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  padding: 30px 28px 34px;
  overflow: hidden;
  transition: transform .4s var(--ease), border-color .4s, background .4s;
}
#ledream-landing .ledream-svc-card::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .4s;
  background: radial-gradient(120% 80% at 50% 0%, var(--accent-10), transparent 60%);
}
#ledream-landing .ledream-svc-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity .4s;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), oklch(0.99 0 0 / 0.07), transparent 60%);
}
#ledream-landing .ledream-svc-card:hover { transform: translateY(-6px); border-color: var(--accent-30); }
#ledream-landing .ledream-svc-card:hover::before { opacity: 1; }
#ledream-landing .ledream-svc-card:hover::after { opacity: 1; }
#ledream-landing .ledream-svc-ic {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--accent-15); border: 1px solid var(--accent-30);
  color: var(--accent-bright);
  margin-bottom: 22px;
}
#ledream-landing .ledream-svc-ic svg { width: 26px; height: 26px; }
#ledream-landing .ledream-svc-card h3 { font-size: 22px; margin-bottom: 10px; }
#ledream-landing .ledream-svc-card p { color: var(--muted); font-size: 15.5px; }
#ledream-landing .ledream-svc-card .ledream-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
#ledream-landing .ledream-svc-card .ledream-tag { font-family: var(--font-mono); font-size: 11.5px; color: var(--dim); padding: 4px 10px; border: 1px solid var(--line-soft); border-radius: 100px; }
#ledream-landing .ledream-svc-wide { grid-column: span 3; display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; padding: 0; }
#ledream-landing .ledream-svc-wide .ledream-body { padding: 40px; align-self: center; }
#ledream-landing .ledream-svc-wide .ledream-imgslot { height: 100%; min-height: 340px; }

/* ---------- Marquee ---------- */
#ledream-landing .ledream-marquee {
  overflow: hidden;
  padding: clamp(26px, 4vw, 46px) 0;
  border-block: 1px solid var(--line-soft);
  background: var(--bg-2);
}
#ledream-landing .ledream-marquee-track { display: flex; width: max-content; will-change: transform; animation: ledream-marquee 32s linear infinite; }
#ledream-landing .ledream-marquee .ledream-mq {
  display: flex; align-items: center; flex: none;
  gap: clamp(24px, 3.4vw, 52px);
  padding-right: clamp(24px, 3.4vw, 52px);
}
#ledream-landing .ledream-marquee .ledream-mq span {
  font-size: clamp(38px, 5.6vw, 80px);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.1;
  white-space: nowrap; color: var(--text);
}
#ledream-landing .ledream-marquee .ledream-mq span.ledream-o {
  color: transparent;
  -webkit-text-stroke: 1px oklch(0.52 0.03 330);
}
#ledream-landing .ledream-marquee .ledream-mq .ledream-mdot {
  flex: none;
  width: clamp(10px, 1.1vw, 15px); height: clamp(10px, 1.1vw, 15px);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 18px var(--accent), 0 0 40px var(--accent-30);
}
@keyframes ledream-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- References ---------- */
#ledream-landing .ledream-proj-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 232px; gap: 16px; margin-top: 56px; }
#ledream-landing .ledream-proj {
  position: relative; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line-soft);
  grid-column: span 2;
  background: var(--surface);
}
#ledream-landing .ledream-proj.ledream-tall { grid-row: span 2; }
#ledream-landing .ledream-proj.ledream-feat { grid-column: span 3; }
#ledream-landing .ledream-proj.ledream-wide { grid-column: span 4; }
#ledream-landing .ledream-proj .ledream-imgslot { height: 100%; }
#ledream-landing .ledream-proj .ledream-meta {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 22px;
  background: linear-gradient(transparent, oklch(0.10 0.012 330 / 0.92) 65%);
  pointer-events: none;
}
#ledream-landing .ledream-proj .ledream-cat { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-bright); }
#ledream-landing .ledream-proj .ledream-ttl { font-size: 19px; font-weight: 700; margin-top: 6px; letter-spacing: -0.02em; }
#ledream-landing .ledream-proj.ledream-feat .ledream-ttl { font-size: 26px; }

/* ---------- About ---------- */
#ledream-landing .ledream-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 90px); align-items: center; }
#ledream-landing .ledream-about-media { position: relative; }
#ledream-landing .ledream-about-media .ledream-imgslot { height: clamp(360px, 44vw, 540px); border-radius: 22px; }
#ledream-landing .ledream-about-media .ledream-badge-float {
  position: absolute; left: -22px; bottom: 28px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 16px; padding: 18px 22px;
  box-shadow: 0 24px 60px oklch(0 0 0 / 0.5);
  display: flex; align-items: center; gap: 14px;
}
#ledream-landing .ledream-badge-float .ledream-n { font-size: 30px; font-weight: 800; color: var(--accent-bright); letter-spacing: -0.03em; }
#ledream-landing .ledream-badge-float .ledream-t { font-size: 13px; color: var(--muted); line-height: 1.3; }
#ledream-landing .ledream-about-list { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; }
#ledream-landing .ledream-about-li { display: flex; gap: 16px; }
#ledream-landing .ledream-about-li .ledream-chk { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-15); border: 1px solid var(--accent-30); color: var(--accent-bright); display: grid; place-items: center; margin-top: 2px; }
#ledream-landing .ledream-about-li .ledream-chk svg { width: 14px; height: 14px; }
#ledream-landing .ledream-about-li h4 { font-size: 17px; font-weight: 600; }
#ledream-landing .ledream-about-li p { color: var(--muted); font-size: 15px; }

/* ---------- Testimonials ---------- */
#ledream-landing .ledream-tst-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 56px; }
#ledream-landing .ledream-tst {
  position: relative;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: 20px; padding: 30px 28px;
  display: flex; flex-direction: column;
}
#ledream-landing .ledream-tst .ledream-stars { display: flex; gap: 3px; color: var(--accent-bright); margin-bottom: 18px; }
#ledream-landing .ledream-tst .ledream-stars svg { width: 16px; height: 16px; }
#ledream-landing .ledream-tst blockquote { font-size: 17px; line-height: 1.55; color: var(--text); flex: 1; }
#ledream-landing .ledream-tst .ledream-who { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
#ledream-landing .ledream-tst .ledream-av { width: 42px; height: 42px; border-radius: 50%; background: var(--accent-15); border: 1px solid var(--accent-30); color: var(--accent-bright); display: grid; place-items: center; font-weight: 700; font-size: 15px; }
#ledream-landing .ledream-tst .ledream-who .ledream-nm { font-weight: 600; font-size: 15px; }
#ledream-landing .ledream-tst .ledream-who .ledream-rl { font-size: 13px; color: var(--dim); }

/* ---------- Quote form (CTA) ---------- */
#ledream-landing .ledream-quote { position: relative; overflow: hidden; }
#ledream-landing .ledream-quote-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(120% 100% at 100% 0%, var(--accent-10), transparent 55%),
    var(--surface);
  display: grid; grid-template-columns: 1fr 1fr;
  overflow: hidden;
}
#ledream-landing .ledream-quote-left { padding: clamp(36px, 5vw, 60px); }
#ledream-landing .ledream-quote-left .ledream-h2 { margin: 18px 0 16px; }
#ledream-landing .ledream-quote-left .ledream-lead { max-width: 420px; }
#ledream-landing .ledream-quote-phone {
  margin-top: 34px; display: inline-flex; align-items: center; gap: 16px;
  padding: 18px 24px; border-radius: 18px;
  background: oklch(0.99 0 0 / 0.04); border: 1px solid var(--line);
}
#ledream-landing .ledream-quote-phone .ledream-pic { width: 48px; height: 48px; border-radius: 50%; background: var(--accent-15); border: 1px solid var(--accent-30); color: var(--accent-bright); display: grid; place-items: center; }
#ledream-landing .ledream-quote-phone .ledream-pic svg { width: 22px; height: 22px; }
#ledream-landing .ledream-quote-phone .ledream-l { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
#ledream-landing .ledream-quote-phone .ledream-n { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
#ledream-landing .ledream-quote-form { padding: clamp(36px, 5vw, 60px); background: oklch(0.99 0 0 / 0.02); border-left: 1px solid var(--line-soft); }
#ledream-landing .ledream-field { margin-bottom: 16px; }
#ledream-landing .ledream-field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 7px; font-weight: 500; }
#ledream-landing .ledream-field input, #ledream-landing .ledream-field select, #ledream-landing .ledream-field textarea {
  width: 100%; padding: 13px 15px;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 12px;
  font-family: inherit; font-size: 15px;
  transition: border-color .2s, box-shadow .2s;
}
#ledream-landing .ledream-field textarea { resize: vertical; min-height: 90px; }
#ledream-landing .ledream-field input:focus, #ledream-landing .ledream-field select:focus, #ledream-landing .ledream-field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-15);
}
#ledream-landing .ledream-field select option { background: var(--bg-2); color: var(--text); }
#ledream-landing .ledream-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#ledream-landing .ledream-form-note { font-size: 12.5px; color: var(--dim); margin-top: 4px; }

/* ---------- FAQ ---------- */
#ledream-landing .ledream-faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(36px, 6vw, 80px); align-items: start; }
#ledream-landing .ledream-faq-list { display: flex; flex-direction: column; }
#ledream-landing .ledream-faq-item { border-bottom: 1px solid var(--line-soft); }
#ledream-landing .ledream-faq-q {
  width: 100%; text-align: left; background: none; border: 0; color: var(--text);
  padding: 26px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-size: 19px; font-weight: 600; letter-spacing: -0.01em;
}
#ledream-landing .ledream-faq-q .ledream-ico { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: background .3s, transform .3s, border-color .3s; }
#ledream-landing .ledream-faq-q .ledream-ico svg { width: 16px; height: 16px; transition: transform .3s; }
#ledream-landing .ledream-faq-item.ledream-open .ledream-faq-q .ledream-ico { background: var(--accent); border-color: var(--accent); color: #fff; }
#ledream-landing .ledream-faq-item.ledream-open .ledream-faq-q .ledream-ico svg { transform: rotate(45deg); }
#ledream-landing .ledream-faq-a { overflow: hidden; height: 0; transition: height .4s var(--ease); }
#ledream-landing .ledream-faq-a-inner { padding: 0 0 26px; color: var(--muted); font-size: 16px; max-width: 90%; }

/* ---------- Footer ---------- */
#ledream-landing .ledream-footer { border-top: 1px solid var(--line-soft); padding: 70px 0 36px; background: var(--bg-2); }
#ledream-landing .ledream-footer-giant {
  font-size: clamp(68px, 15vw, 224px);
  font-weight: 800; letter-spacing: -0.045em; line-height: 0.95;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px oklch(0.42 0.045 330 / 0.8);
  user-select: none;
  margin-bottom: clamp(44px, 6vw, 84px);
}
#ledream-landing .ledream-footer-giant .ledream-a { -webkit-text-stroke-color: oklch(0.55 0.18 var(--accent-h) / 0.9); }
#ledream-landing .ledream-footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
#ledream-landing .ledream-footer .ledream-brand { margin-bottom: 16px; }
#ledream-landing .ledream-footer-col h5 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); margin-bottom: 16px; }
#ledream-landing .ledream-footer-col a, #ledream-landing .ledream-footer-col p { display: block; color: var(--muted); font-size: 15px; margin-bottom: 11px; transition: color .2s; }
#ledream-landing .ledream-footer-col a:hover { color: var(--accent-bright); }
#ledream-landing .ledream-footer-about { color: var(--muted); font-size: 15px; max-width: 320px; }
#ledream-landing .ledream-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line-soft); }
#ledream-landing .ledream-footer-bottom p { font-size: 13px; color: var(--dim); }
#ledream-landing .ledream-footer-bottom .ledream-socials { display: flex; gap: 10px; }
#ledream-landing .ledream-footer-bottom .ledream-socials a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); transition: border-color .25s, color .25s, transform .25s; }
#ledream-landing .ledream-footer-bottom .ledream-socials a:hover { border-color: var(--accent); color: var(--accent-bright); transform: translateY(-2px); }
#ledream-landing .ledream-footer-bottom .ledream-socials svg { width: 17px; height: 17px; }

/* ---------- Scroll reveal ----------
   Alapból LÁTHATÓ; csak ha a JS bekapcsolja (.ledream-armed), akkor rejtett a start. */
#ledream-landing [data-reveal] { transition: opacity .85s var(--ease), transform .85s var(--ease); }
#ledream-landing.ledream-armed [data-reveal] { opacity: 0; transform: translateY(28px); }
#ledream-landing.ledream-armed [data-reveal].ledream-visible { opacity: 1; transform: none; }
#ledream-landing.ledream-armed [data-reveal][data-delay="1"] { transition-delay: .08s; }
#ledream-landing.ledream-armed [data-reveal][data-delay="2"] { transition-delay: .16s; }
#ledream-landing.ledream-armed [data-reveal][data-delay="3"] { transition-delay: .24s; }
#ledream-landing.ledream-armed [data-reveal][data-delay="4"] { transition-delay: .32s; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  #ledream-landing .ledream-svc-grid { grid-template-columns: repeat(2, 1fr); }
  #ledream-landing .ledream-svc-wide { grid-column: span 2; grid-template-columns: 1fr; }
  #ledream-landing .ledream-svc-wide .ledream-imgslot { min-height: 260px; }
  #ledream-landing .ledream-tst-grid { grid-template-columns: 1fr; }
  #ledream-landing .ledream-ribbon { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  #ledream-landing .ledream-nav-links, #ledream-landing .ledream-nav-phone { display: none; }
  #ledream-landing .ledream-hamburger { display: grid; place-items: center; }
  #ledream-landing .ledream-about-grid { grid-template-columns: 1fr; }
  #ledream-landing .ledream-about-media { order: -1; }
  #ledream-landing .ledream-quote-card { grid-template-columns: 1fr; }
  #ledream-landing .ledream-quote-form { border-left: 0; border-top: 1px solid var(--line-soft); }
  #ledream-landing .ledream-faq-grid { grid-template-columns: 1fr; }
  #ledream-landing .ledream-footer-top { grid-template-columns: 1fr 1fr; }
  #ledream-landing .ledream-proj-grid { grid-template-columns: repeat(2, 1fr); }
  #ledream-landing .ledream-proj, #ledream-landing .ledream-proj.ledream-feat, #ledream-landing .ledream-proj.ledream-wide { grid-column: span 2; }
  #ledream-landing .ledream-proj.ledream-tall { grid-row: span 1; }
}
@media (max-width: 560px) {
  #ledream-landing .ledream-hero { padding: 130px 0 70px; }
  #ledream-landing .ledream-svc-grid { grid-template-columns: 1fr; }
  #ledream-landing .ledream-svc-wide { grid-column: span 1; }
  #ledream-landing .ledream-ribbon { grid-template-columns: 1fr 1fr; }
  #ledream-landing .ledream-row2 { grid-template-columns: 1fr; }
  #ledream-landing .ledream-footer-top { grid-template-columns: 1fr; }
  #ledream-landing .ledream-footer-bottom { flex-direction: column; align-items: flex-start; }
  #ledream-landing .ledream-about-media .ledream-badge-float { left: 12px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #ledream-landing.ledream-armed [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  #ledream-landing .ledream-marquee-track { animation: none; }
  #ledream-landing .ledream-scroll-progress { display: none; }
  #ledream-landing .ledream-hero-canvas { display: none; }
  #ledream-landing .ledream-btn:hover, #ledream-landing .ledream-svc-card:hover { transform: none; }
}
</style>

<!-- Scroll progress -->
<div class="ledream-scroll-progress" aria-hidden="true"></div>

<!-- ================= NAV ================= -->
<nav class="ledream-nav">
  <div class="ledream-nav-inner">
    <a href="#ledream-top" class="ledream-brand"><img class="ledream-logo-img" src="cid:f1f67acebca57164861ef4bb1378ec37@ledream.hu" alt="LEDream"></a>
    <div class="ledream-nav-links">
      <a href="#ledream-szolgaltatasok">Szolgáltatások</a>
      <a href="#ledream-referenciak">Referenciák</a>
      <a href="#ledream-rolunk">Rólunk</a>
      <a href="#ledream-velemenyek">Vélemények</a>
      <a href="#ledream-gyik">GYIK</a>
    </div>
    <div class="ledream-nav-cta">
      <a href="tel:+36302564658" class="ledream-nav-phone"><span>HÍVJON</span> +36 30 256 4658</a>
      <a href="tel:+36302564658" class="ledream-btn ledream-btn-primary">Hívjon most</a>
      <button class="ledream-hamburger" type="button" aria-label="Menü">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M3 12h18M3 18h18"></path></svg>
      </button>
    </div>
  </div>
</nav>

<div class="ledream-mobile-menu">
  <a href="#ledream-szolgaltatasok">Szolgáltatások</a>
  <a href="#ledream-referenciak">Referenciák</a>
  <a href="#ledream-rolunk">Rólunk</a>
  <a href="#ledream-velemenyek">Vélemények</a>
  <a href="#ledream-gyik">GYIK</a>
  <div class="ledream-mm-foot">
    <a href="tel:+36302564658" class="ledream-btn ledream-btn-primary">Hívjon most · +36 30 256 4658</a>
    <a href="#ledream-ajanlatkeres" class="ledream-btn ledream-btn-ghost">Árajánlatot kérek</a>
  </div>
</div>

<!-- ================= HERO ================= -->
<header class="ledream-hero" id="ledream-top">
  <div class="ledream-hero-grid-bg"></div>
  <div class="ledream-hero-glow"></div>
  <canvas class="ledream-hero-canvas" aria-hidden="true"></canvas>
  <div class="ledream-wrap ledream-hero-inner">
    <div data-reveal><span class="ledream-eyebrow">Villanyszerelés · LED világítás · Szombathely</span></div>
    <h1 class="ledream-h-display" data-reveal data-delay="1" style="margin-top:24px">Tervezett fény.<br><span class="ledream-grad-text">Megbízható villany.</span></h1>
    <p class="ledream-lead" data-reveal data-delay="2">LED világítás tervezése és kivitelezése, teljes körű villanyszerelés Szombathelyen és Vas megyében — lakossági, üzleti és ipari ügyfeleknek egyaránt.</p>
    <div class="ledream-badges" data-reveal data-delay="3">
      <span class="ledream-chip">Lakossági</span>
      <span class="ledream-chip">Üzleti</span>
      <span class="ledream-chip">Ipari</span>
      <span class="ledream-chip">Energiahatékony</span>
    </div>
    <div class="ledream-hero-actions" data-reveal data-delay="3">
      <a href="tel:+36302564658" class="ledream-btn ledream-btn-primary">
        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
        Hívjon most
      </a>
      <a href="#ledream-referenciak" class="ledream-btn ledream-btn-ghost">Referenciák megtekintése</a>
    </div>
  </div>

  <div class="ledream-wrap" style="margin-top:0">
    <div class="ledream-hero-visual" data-reveal data-delay="2">
      <!-- Kép: hero főkép — ajánlott 1200×620px — látványos LED-világított belső tér / csarnok -->
      <div class="ledream-imgslot"><img loading="lazy" alt="LED-világított belső tér referencia – LEDream" src="cid:b06fb79db40b64cf1b2dd3e7280357c1@ledream.hu"></div>
    </div>

    <div class="ledream-ribbon" data-reveal>
      <div class="ledream-cell"><div class="ledream-num"><span data-count="12">12</span><span class="ledream-u">+</span></div><div class="ledream-lbl">Év tapasztalat</div></div>
      <div class="ledream-cell"><div class="ledream-num"><span data-count="800">800</span><span class="ledream-u">+</span></div><div class="ledream-lbl">Befejezett projekt</div></div>
      <div class="ledream-cell"><div class="ledream-num"><span data-count="100">100</span><span class="ledream-u">%</span></div><div class="ledream-lbl">Garancia</div></div>
      <div class="ledream-cell"><div class="ledream-num"><span data-count="24">24</span><span class="ledream-u">ó</span></div><div class="ledream-lbl">Visszajelzés</div></div>
    </div>
  </div>
</header>

<!-- ================= SZOLGÁLTATÁSOK ================= -->
<section class="ledream-sec" id="ledream-szolgaltatasok">
  <div class="ledream-wrap">
    <div class="ledream-sec-head" data-reveal>
      <span class="ledream-eyebrow">Szolgáltatások</span>
      <h2 class="ledream-h2">Amiben otthon vagyunk</h2>
      <p class="ledream-lead">A fényterv megálmodásától a kapcsoló felszereléséig — egy csapat, egy felelős, tiszta és szabványos kivitelezés.</p>
    </div>

    <div class="ledream-svc-grid">
      <article class="ledream-svc-card" data-reveal data-delay="1">
        <div class="ledream-svc-ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M9 18h6M10 21h4M12 3a6 6 0 0 0-4 10.5c.7.7 1 1.3 1 2.5h6c0-1.2.3-1.8 1-2.5A6 6 0 0 0 12 3z"></path></svg></div>
        <h3>LED világítástervezés</h3>
        <p>Egyedi fényterv otthonra, üzletbe vagy csarnokba — hangulat, energiahatékonyság és pontos fényszint együtt, látványtervvel.</p>
        <div class="ledream-tags"><span class="ledream-tag">Fényterv</span><span class="ledream-tag">Hangulatvilágítás</span><span class="ledream-tag">Energiahatékony</span></div>
      </article>

      <article class="ledream-svc-card" data-reveal data-delay="2">
        <div class="ledream-svc-ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M3 11l9-8 9 8M5 9.5V21h14V9.5M9 21v-6h6v6"></path></svg></div>
        <h3>Lakossági villanyszerelés</h3>
        <p>Új építés, felújítás, hibakeresés és okosotthon-rendszerek — biztonságos, igényes munka, ami évekre megbízható.</p>
        <div class="ledream-tags"><span class="ledream-tag">Felújítás</span><span class="ledream-tag">Okosotthon</span><span class="ledream-tag">Hibakeresés</span></div>
      </article>

      <article class="ledream-svc-card" data-reveal data-delay="3">
        <div class="ledream-svc-ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M3 9l1.5-5h15L21 9M3 9h18M3 9v11h18V9M4 9a2.5 2.5 0 0 0 5 0 2.5 2.5 0 0 0 5 0 2.5 2.5 0 0 0 5 0"></path></svg></div>
        <h3>Üzleti &amp; kereskedelmi</h3>
        <p>Üzletek, irodák és vendéglátóhelyek világítása és elektromos hálózata — minimális leállással, nyitva tartás mellett.</p>
        <div class="ledream-tags"><span class="ledream-tag">Üzletek</span><span class="ledream-tag">Irodák</span><span class="ledream-tag">Portálok</span></div>
      </article>

      <article class="ledream-svc-card ledream-svc-wide" data-reveal>
        <div class="ledream-body">
          <div class="ledream-svc-ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M2 20h20M4 20V8l6-3v3l6-3v15M8 11v0M8 15v0M14 11v0M14 15v0"></path></svg></div>
          <h3 style="font-size:28px">Ipari villanyszerelés</h3>
          <p style="margin-top:12px;max-width:440px">Gyártósorok, csarnokvilágítás, karbantartás és üzemi elektromos rendszerek — nagy felelősséggel, ipari szabványok szerint. Olyan partnerekkel dolgozunk, mint a <strong style="color:var(--text)">Nestlé Bük</strong>.</p>
          <div class="ledream-tags" style="margin-top:20px"><span class="ledream-tag">Csarnokvilágítás</span><span class="ledream-tag">Karbantartás</span><span class="ledream-tag">Gyártósor</span><span class="ledream-tag">Üzemi hálózat</span></div>
        </div>
        <!-- Kép: ipari szolgáltatás — ajánlott 640×440px — csarnok / gyártósor -->
        <div class="ledream-imgslot"><img loading="lazy" alt="Ipari csarnok villanyszerelés és világítás – LEDream" src="cid:f2c22cffb1914c00c08a327e241cdc56@ledream.hu"></div>
      </article>
    </div>
  </div>
</section>

<!-- ================= MARQUEE ================= -->
<div class="ledream-marquee" aria-hidden="true">
  <div class="ledream-marquee-track">
    <div class="ledream-mq">
      <span>LED világítás</span><span class="ledream-mdot"></span><span class="ledream-o">Villanyszerelés</span><span class="ledream-mdot"></span><span>Fényterv</span><span class="ledream-mdot"></span><span class="ledream-o">Okosotthon</span><span class="ledream-mdot"></span><span>Ipari kivitelezés</span><span class="ledream-mdot"></span><span class="ledream-o">Garancia</span><span class="ledream-mdot"></span>
    </div>
    <div class="ledream-mq">
      <span>LED világítás</span><span class="ledream-mdot"></span><span class="ledream-o">Villanyszerelés</span><span class="ledream-mdot"></span><span>Fényterv</span><span class="ledream-mdot"></span><span class="ledream-o">Okosotthon</span><span class="ledream-mdot"></span><span>Ipari kivitelezés</span><span class="ledream-mdot"></span><span class="ledream-o">Garancia</span><span class="ledream-mdot"></span>
    </div>
  </div>
</div>

<!-- ================= REFERENCIÁK ================= -->
<section class="ledream-sec" id="ledream-referenciak" style="background:var(--bg-2)">
  <div class="ledream-wrap">
    <div class="ledream-sec-head ledream-center" data-reveal>
      <span class="ledream-eyebrow">Referenciák</span>
      <h2 class="ledream-h2">Munkáink önmagukért beszélnek</h2>
      <p class="ledream-lead">Lakásoktól a gyárcsarnokig — válogatás a befejezett projektjeinkből.</p>
    </div>

    <div class="ledream-proj-grid">
      <div class="ledream-proj ledream-feat ledream-tall" data-reveal>
        <!-- Kép: Nestlé Bük ipari projekt — ajánlott 640×480px -->
        <div class="ledream-imgslot"><img loading="lazy" alt="Nestlé Bük ipari villanyszerelési projekt – LEDream" src="cid:2f79eab4d166994f6879a34589eea4a0@ledream.hu"></div>
        <div class="ledream-meta"><div class="ledream-cat">Ipari · Nestlé Bük</div><div class="ledream-ttl">Strukturált hálózatépítés</div></div>
      </div>
      <div class="ledream-proj" data-reveal data-delay="1">
        <!-- Kép: modern családi ház — ajánlott 420×232px -->
        <div class="ledream-imgslot"><img loading="lazy" alt="Modern családi ház villanyszerelése – LEDream" src="cid:59092a0b8566ef0ee790e24cfcc59fa6@ledream.hu" style="object-fit:contain"></div>
        <div class="ledream-meta"><div class="ledream-cat">Lakossági</div><div class="ledream-ttl">Modern családi ház</div></div>
      </div>
      <div class="ledream-proj" data-reveal data-delay="2">
        <!-- Kép: üzlettér / vendéglátás — ajánlott 420×232px -->
        <div class="ledream-imgslot"><img loading="lazy" alt="Üzlettér LED-világítás – LEDream" src="cid:568d9255541d8199ece06b96d8f0d187@ledream.hu"></div>
        <div class="ledream-meta"><div class="ledream-cat">Üzleti</div><div class="ledream-ttl">Üzlettér világítás</div></div>
      </div>
      <div class="ledream-proj ledream-tall" data-reveal data-delay="1">
        <!-- Kép: iroda LED-rendszer — ajánlott 420×480px -->
        <div class="ledream-imgslot"><img loading="lazy" alt="Iroda LED-világítási rendszer – LEDream" src="cid:499d78af77c7254f5c8489abffb14a1e@ledream.hu"></div>
        <div class="ledream-meta"><div class="ledream-cat">Üzleti</div><div class="ledream-ttl">Iroda LED-rendszer</div></div>
      </div>
      <div class="ledream-proj ledream-tall" data-reveal data-delay="2">
        <!-- Kép: club fénytechnika — ajánlott 420×480px -->
        <div class="ledream-imgslot"><img loading="lazy" alt="Club fénytechnika kivitelezés – LEDream" src="cid:e353c8e73bee78bbbead3639fbc27232@ledream.hu"></div>
        <div class="ledream-meta"><div class="ledream-cat">Üzleti</div><div class="ledream-ttl">Club fénytechnika</div></div>
      </div>
      <div class="ledream-proj" data-reveal data-delay="3">
        <!-- Kép: üzlethelyiség kivitelezés — ajánlott 420×232px -->
        <div class="ledream-imgslot"><img loading="lazy" alt="Üzlethelyiség elektromos kivitelezés – LEDream" src="cid:3bf3a1816982f0997f834c06eb20736a@ledream.hu"></div>
        <div class="ledream-meta"><div class="ledream-cat">Kereskedelmi</div><div class="ledream-ttl">Üzlethelyiség kivitelezés</div></div>
      </div>
    </div>
  </div>
</section>

<!-- ================= RÓLUNK ================= -->
<section class="ledream-sec" id="ledream-rolunk">
  <div class="ledream-wrap ledream-about-grid">
    <div class="ledream-about-media" data-reveal>
      <!-- Kép: csapatfotó / tulajdonos a helyszínen — ajánlott 620×540px -->
      <div class="ledream-imgslot"><img loading="lazy" alt="A LEDream csapata a helyszínen" src="cid:d16bf7e8267a1a41b409c9177b2fe9f2@ledream.hu"></div>
      <div class="ledream-badge-float">
        <div class="ledream-n">Vas</div>
        <div class="ledream-t">megye<br>helyi csapat</div>
      </div>
    </div>
    <div class="ledream-about-text">
      <div data-reveal><span class="ledream-eyebrow">Rólunk</span></div>
      <h2 class="ledream-h2" data-reveal data-delay="1" style="margin-top:18px">Szombathelyi csapat,<br>országos színvonal</h2>
      <p class="ledream-lead" data-reveal data-delay="2" style="margin-top:20px">A LEDream egy szombathelyi villanyszerelő és LED-világítással foglalkozó csapat. A lakossági felújítástól a gyártósorig ugyanazzal az igényességgel dolgozunk — pontosan, tisztán, garanciával.</p>
      <div class="ledream-about-list">
        <div class="ledream-about-li" data-reveal data-delay="1">
          <div class="ledream-chk"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 6L9 17l-5-5"></path></svg></div>
          <div><h4>Tervezéstől kivitelezésig</h4><p>Fényterv, anyagbeszerzés és szerelés egy kézben — nem kell több vállalkozót egyeztetned.</p></div>
        </div>
        <div class="ledream-about-li" data-reveal data-delay="2">
          <div class="ledream-chk"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 6L9 17l-5-5"></path></svg></div>
          <div><h4>Garancia minden munkára</h4><p>Szabványos, dokumentált kivitelezés, amire írásos garanciát adunk.</p></div>
        </div>
        <div class="ledream-about-li" data-reveal data-delay="3">
          <div class="ledream-chk"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 6L9 17l-5-5"></path></svg></div>
          <div><h4>Ipari tapasztalat</h4><p>Nagy üzemi projektekben szerzett rutin — a részletekre is figyelünk.</p></div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ================= VÉLEMÉNYEK ================= -->
<section class="ledream-sec" id="ledream-velemenyek" style="background:var(--bg-2)">
  <div class="ledream-wrap">
    <div class="ledream-sec-head ledream-center" data-reveal>
      <span class="ledream-eyebrow">Vélemények</span>
      <h2 class="ledream-h2">Amit ügyfeleink mondanak</h2>
      <p class="ledream-lead">Néhány visszajelzés elégedett ügyfeleinktől.</p>
    </div>
    <div class="ledream-tst-grid">
      <article class="ledream-tst" data-reveal data-delay="1">
        <div class="ledream-stars"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 6.5 7 .9-5 4.8 1.3 7L12 18l-6.6 3.2L6.7 14l-5-4.8 7-.9z"></path></svg><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 6.5 7 .9-5 4.8 1.3 7L12 18l-6.6 3.2L6.7 14l-5-4.8 7-.9z"></path></svg><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 6.5 7 .9-5 4.8 1.3 7L12 18l-6.6 3.2L6.7 14l-5-4.8 7-.9z"></path></svg><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 6.5 7 .9-5 4.8 1.3 7L12 18l-6.6 3.2L6.7 14l-5-4.8 7-.9z"></path></svg><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 6.5 7 .9-5 4.8 1.3 7L12 18l-6.6 3.2L6.7 14l-5-4.8 7-.9z"></path></svg></div>
        <blockquote>„A teljes lakásfelújításnál ők csinálták a villanyt és a világítást. Pontosak, tiszták, és a végeredmény sokkal jobb lett, mint amit elképzeltem."</blockquote>
        <div class="ledream-who"><div class="ledream-av">KB</div><div><div class="ledream-nm">Kovács Bálint</div><div class="ledream-rl">Lakossági ügyfél · Szombathely</div></div></div>
      </article>
      <article class="ledream-tst" data-reveal data-delay="2">
        <div class="ledream-stars"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 6.5 7 .9-5 4.8 1.3 7L12 18l-6.6 3.2L6.7 14l-5-4.8 7-.9z"></path></svg><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 6.5 7 .9-5 4.8 1.3 7L12 18l-6.6 3.2L6.7 14l-5-4.8 7-.9z"></path></svg><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 6.5 7 .9-5 4.8 1.3 7L12 18l-6.6 3.2L6.7 14l-5-4.8 7-.9z"></path></svg><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 6.5 7 .9-5 4.8 1.3 7L12 18l-6.6 3.2L6.7 14l-5-4.8 7-.9z"></path></svg><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 6.5 7 .9-5 4.8 1.3 7L12 18l-6.6 3.2L6.7 14l-5-4.8 7-.9z"></path></svg></div>
        <blockquote>„Az üzletünk világítását tervezték és cserélték le LED-re. Szebb a tér, és érezhetően csökkent a villanyszámla. Korrekt csapat."</blockquote>
        <div class="ledream-who"><div class="ledream-av">SZA</div><div><div class="ledream-nm">Szabó Anna</div><div class="ledream-rl">Üzlettulajdonos</div></div></div>
      </article>
      <article class="ledream-tst" data-reveal data-delay="3">
        <div class="ledream-stars"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 6.5 7 .9-5 4.8 1.3 7L12 18l-6.6 3.2L6.7 14l-5-4.8 7-.9z"></path></svg><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 6.5 7 .9-5 4.8 1.3 7L12 18l-6.6 3.2L6.7 14l-5-4.8 7-.9z"></path></svg><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 6.5 7 .9-5 4.8 1.3 7L12 18l-6.6 3.2L6.7 14l-5-4.8 7-.9z"></path></svg><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 6.5 7 .9-5 4.8 1.3 7L12 18l-6.6 3.2L6.7 14l-5-4.8 7-.9z"></path></svg><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 6.5 7 .9-5 4.8 1.3 7L12 18l-6.6 3.2L6.7 14l-5-4.8 7-.9z"></path></svg></div>
        <blockquote>„Üzemi karbantartásban dolgoztunk velük. Megbízhatóak, betartják a határidőt és az ipari előírásokat. Visszahívjuk őket."</blockquote>
        <div class="ledream-who"><div class="ledream-av">NT</div><div><div class="ledream-nm">Nagy Tamás</div><div class="ledream-rl">Üzemvezető · ipari partner</div></div></div>
      </article>
    </div>
  </div>
</section>

<!-- ================= ÁRAJÁNLATKÉRÉS ================= -->
<section class="ledream-sec ledream-quote" id="ledream-ajanlatkeres">
  <div class="ledream-wrap">
    <div class="ledream-quote-card" data-reveal>
      <div class="ledream-quote-left">
        <span class="ledream-eyebrow">Árajánlat</span>
        <h2 class="ledream-h2">Kérjen ingyenes árajánlatot</h2>
        <p class="ledream-lead">Mondja el röviden, mire van szüksége — felmérés után pontos, írásos ajánlatot adunk. A leggyorsabb, ha felhív minket.</p>
        <a href="tel:+36302564658" class="ledream-quote-phone">
          <div class="ledream-pic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"></path></svg></div>
          <div><div class="ledream-l">Hívjon most</div><div class="ledream-n">+36 30 256 4658</div></div>
        </a>
        <p class="ledream-form-note" style="margin-top:18px">Vagy írjon a <a href="mailto:info@ledream.hu" style="color:var(--accent-bright)">info@ledream.hu</a> címre.</p>
      </div>

      <div class="ledream-quote-form">
        <!-- IDE jön egy Elementor Form widget — mezők: Név (kötelező), Telefonszám (kötelező), E-mail (kötelező), Munka típusa (legördülő: Lakossági villanyszerelés / Üzleti / kereskedelmi / Ipari villanyszerelés / LED világítástervezés / Egyéb), Üzenet (szövegmező), elküldő gomb. A vizuális stílust az alábbi mezők adják vissza. -->
        <div class="ledream-row2">
          <div class="ledream-field"><label>Név</label><input type="text" placeholder="Teljes név"></div>
          <div class="ledream-field"><label>Telefonszám</label><input type="tel" placeholder="+36 ..."></div>
        </div>
        <div class="ledream-field"><label>E-mail</label><input type="email" placeholder="pelda@email.hu"></div>
        <div class="ledream-field"><label>Munka típusa</label>
          <select>
            <option value="">Válasszon…</option>
            <option>Lakossági villanyszerelés</option>
            <option>Üzleti / kereskedelmi</option>
            <option>Ipari villanyszerelés</option>
            <option>LED világítástervezés</option>
            <option>Egyéb</option>
          </select>
        </div>
        <div class="ledream-field"><label>Üzenet</label><textarea placeholder="Röviden a feladatról, helyszínről, határidőről…"></textarea></div>
        <button type="button" class="ledream-btn ledream-btn-primary" style="width:100%;justify-content:center;margin-top:6px">Ajánlatkérés elküldése</button>
        <p class="ledream-form-note">Az adatait kizárólag az ajánlatadáshoz használjuk fel.</p>
      </div>
    </div>
  </div>
</section>

<!-- ================= GYIK ================= -->
<section class="ledream-sec" id="ledream-gyik" style="background:var(--bg-2)">
  <div class="ledream-wrap ledream-faq-grid">
    <div class="ledream-faq-head">
      <div data-reveal><span class="ledream-eyebrow">GYIK</span></div>
      <h2 class="ledream-h2" data-reveal data-delay="1" style="margin-top:18px">Gyakori kérdések</h2>
      <p class="ledream-lead" data-reveal data-delay="2" style="margin-top:18px">Nem találja a választ? <a href="tel:+36302564658" style="color:var(--accent-bright)">Hívjon minket</a>, és szívesen segítünk.</p>
    </div>
    <div class="ledream-faq-list" data-reveal>
      <div class="ledream-faq-item ledream-open">
        <button class="ledream-faq-q" type="button">Milyen területen vállalnak munkát?<span class="ledream-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"></path></svg></span></button>
        <div class="ledream-faq-a"><div class="ledream-faq-a-inner">Elsősorban Szombathelyen és Vas megyében dolgozunk, de nagyobb projekteknél a régió más pontjaira is kimegyünk. Kérdezzen bátran a konkrét helyszínről.</div></div>
      </div>
      <div class="ledream-faq-item">
        <button class="ledream-faq-q" type="button">Vállalnak ipari villanyszerelést is?<span class="ledream-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"></path></svg></span></button>
        <div class="ledream-faq-a"><div class="ledream-faq-a-inner">Igen. Gyártósorok, csarnokvilágítás, üzemi elektromos hálózatok és karbantartás is a profilunk — több ipari partnerrel, köztük a Nestlé Bük üzemmel dolgoztunk.</div></div>
      </div>
      <div class="ledream-faq-item">
        <button class="ledream-faq-q" type="button">Adnak garanciát a munkára?<span class="ledream-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"></path></svg></span></button>
        <div class="ledream-faq-a"><div class="ledream-faq-a-inner">Minden kivitelezésre írásos garanciát adunk. Szabványos, dokumentált munkát végzünk, és a beépített anyagokra a gyártói garancia is érvényes.</div></div>
      </div>
      <div class="ledream-faq-item">
        <button class="ledream-faq-q" type="button">Mennyibe kerül egy LED világítás tervezése?<span class="ledream-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"></path></svg></span></button>
        <div class="ledream-faq-a"><div class="ledream-faq-a-inner">A fényterv ára a tér méretétől és az igényektől függ. Ingyenes felmérés után pontos, tételes ajánlatot adunk — meglepetések nélkül.</div></div>
      </div>
      <div class="ledream-faq-item">
        <button class="ledream-faq-q" type="button">Mennyi idő alatt kapok ajánlatot?<span class="ledream-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"></path></svg></span></button>
        <div class="ledream-faq-a"><div class="ledream-faq-a-inner">A megkeresésre általában 24 órán belül reagálunk, és a felmérést követően 1–2 munkanapon belül elküldjük az írásos árajánlatot.</div></div>
      </div>
    </div>
  </div>
</section>

<!-- ================= FOOTER ================= -->
<footer class="ledream-footer">
  <div class="ledream-wrap">
    <div class="ledream-footer-giant" aria-hidden="true">LED<span class="ledream-a">ream</span></div>
    <div class="ledream-footer-top">
      <div>
        <a href="#ledream-top" class="ledream-brand ledream-brand-footer"><img class="ledream-logo-img" src="cid:f1f67acebca57164861ef4bb1378ec37@ledream.hu" alt="LEDream"></a>
        <p class="ledream-footer-about">LED világítás tervezése és kivitelezése, teljes körű villanyszerelés Szombathelyen — lakossági, üzleti és ipari ügyfeleknek.</p>
      </div>
      <div class="ledream-footer-col">
        <h5>Szolgáltatások</h5>
        <a href="#ledream-szolgaltatasok">LED világítástervezés</a>
        <a href="#ledream-szolgaltatasok">Lakossági</a>
        <a href="#ledream-szolgaltatasok">Üzleti &amp; kereskedelmi</a>
        <a href="#ledream-szolgaltatasok">Ipari villanyszerelés</a>
      </div>
      <div class="ledream-footer-col">
        <h5>Cég</h5>
        <a href="#ledream-rolunk">Rólunk</a>
        <a href="#ledream-referenciak">Referenciák</a>
        <a href="#ledream-velemenyek">Vélemények</a>
        <a href="#ledream-gyik">GYIK</a>
      </div>
      <div class="ledream-footer-col">
        <h5>Kapcsolat</h5>
        <a href="tel:+36302564658">+36 30 256 4658</a>
        <a href="mailto:info@ledream.hu">info@ledream.hu</a>
        <p>9700 Szombathely,<br>Puskás Tivadar utca 3-5.</p>
      </div>
    </div>
    <div class="ledream-footer-bottom">
      <p>© 2026 LEDream. Minden jog fenntartva.</p>
      <div class="ledream-socials">
        <a href="https://facebook.com/ledream.hu" target="_blank" rel="noopener" aria-label="Facebook"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M14 9h3l.5-3H14V4.5c0-.8.3-1.3 1.5-1.3H17.5V.6C17.2.5 16.2.4 15.1.4 12.7.4 11 1.9 11 4.2V6H8v3h3v9h3z"></path></svg></a>
        <a href="https://instagram.com/ledream.hu" target="_blank" rel="noopener" aria-label="Instagram"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="5"></rect><circle cx="12" cy="12" r="4"></circle><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"></circle></svg></a>
        <a href="https://tiktok.com/@ledream.hu" target="_blank" rel="noopener" aria-label="TikTok"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M16.5 2h-3v13.2a2.7 2.7 0 1 1-2.1-2.63V9.5a5.8 5.8 0 1 0 5.1 5.76V8.9a6.6 6.6 0 0 0 4 1.35V7.2a3.6 3.6 0 0 1-2.92-1.5A3.6 3.6 0 0 1 16.5 3.6z"></path></svg></a>
      </div>
    </div>
  </div>
</footer>

<script>
(function () {
  var root = document.getElementById('ledream-landing');
  if (!root) return;

  var reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  /* ---------- Nav scrolled state + scroll progress ---------- */
  var nav = root.querySelector('.ledream-nav');
  var progress = root.querySelector('.ledream-scroll-progress');
  function onScroll() {
    var y = window.pageYOffset || document.documentElement.scrollTop || 0;
    if (nav) { if (y > 20) nav.classList.add('ledream-scrolled'); else nav.classList.remove('ledream-scrolled'); }
    if (progress) {
      var h = document.documentElement.scrollHeight - window.innerHeight;
      var p = h > 0 ? y / h : 0;
      progress.style.transform = 'scaleX(' + Math.min(1, Math.max(0, p)) + ')';
    }
  }
  window.addEventListener('scroll', onScroll, { passive: true });
  onScroll();

  /* ---------- Smooth anchor scrolling (saját anchorokra) ---------- */
  var navHeight = 72;
  root.addEventListener('click', function (e) {
    var a = e.target.closest ? e.target.closest('a[href^="#"]') : null;
    if (!a) return;
    var id = a.getAttribute('href');
    if (!id || id === '#') return;
    var target = root.querySelector(id) || document.querySelector(id);
    if (!target) return;
    e.preventDefault();
    closeMenu();
    var top = target.getBoundingClientRect().top + (window.pageYOffset || 0) - navHeight + 1;
    window.scrollTo({ top: top, behavior: reduceMotion ? 'auto' : 'smooth' });
  });

  /* ---------- Mobile menu ---------- */
  var hamb = root.querySelector('.ledream-hamburger');
  var menu = root.querySelector('.ledream-mobile-menu');
  function closeMenu() { if (menu) menu.classList.remove('ledream-open'); }
  if (hamb && menu) {
    hamb.addEventListener('click', function () { menu.classList.toggle('ledream-open'); });
  }

  /* ---------- Scroll reveal ---------- */
  var revealEls = root.querySelectorAll('[data-reveal]');
  if ('IntersectionObserver' in window && !reduceMotion) {
    root.classList.add('ledream-armed');
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (en) {
        if (en.isIntersecting) {
          en.target.classList.add('ledream-visible');
          io.unobserve(en.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    revealEls.forEach(function (el) { io.observe(el); });
  }
  /* Fallback: nincs IO / reduced motion → minden látszik (CSS alapból látható). */

  /* ---------- Counters ---------- */
  function animateCount(el) {
    var target = parseInt(el.getAttribute('data-count'), 10) || 0;
    if (reduceMotion) { el.textContent = target; return; }
    var dur = 1400, start = null;
    function step(ts) {
      if (start === null) start = ts;
      var t = Math.min(1, (ts - start) / dur);
      var eased = 1 - Math.pow(1 - t, 3);
      el.textContent = Math.round(eased * target);
      if (t < 1) requestAnimationFrame(step); else el.textContent = target;
    }
    requestAnimationFrame(step);
  }
  var counters = root.querySelectorAll('[data-count]');
  if ('IntersectionObserver' in window) {
    var cio = new IntersectionObserver(function (entries) {
      entries.forEach(function (en) {
        if (en.isIntersecting) { animateCount(en.target); cio.unobserve(en.target); }
      });
    }, { threshold: 0.5 });
    counters.forEach(function (el) { cio.observe(el); });
  }

  /* ---------- FAQ accordion ---------- */
  var faqItems = root.querySelectorAll('.ledream-faq-item');
  function setOpen(item, open) {
    var ans = item.querySelector('.ledream-faq-a');
    var inner = item.querySelector('.ledream-faq-a-inner');
    if (!ans || !inner) return;
    if (open) {
      item.classList.add('ledream-open');
      ans.style.height = inner.offsetHeight + 'px';
    } else {
      item.classList.remove('ledream-open');
      ans.style.height = ans.offsetHeight + 'px';
      void ans.offsetHeight;
      ans.style.height = '0px';
    }
  }
  faqItems.forEach(function (item) {
    var q = item.querySelector('.ledream-faq-q');
    if (item.classList.contains('ledream-open')) {
      var inner = item.querySelector('.ledream-faq-a-inner');
      var ans = item.querySelector('.ledream-faq-a');
      if (ans && inner) ans.style.height = inner.offsetHeight + 'px';
    }
    if (q) q.addEventListener('click', function () {
      var isOpen = item.classList.contains('ledream-open');
      faqItems.forEach(function (other) { if (other !== item) setOpen(other, false); });
      setOpen(item, !isOpen);
    });
  });
  window.addEventListener('resize', function () {
    faqItems.forEach(function (item) {
      if (item.classList.contains('ledream-open')) {
        var inner = item.querySelector('.ledream-faq-a-inner');
        var ans = item.querySelector('.ledream-faq-a');
        if (ans && inner) ans.style.height = inner.offsetHeight + 'px';
      }
    });
  });

  /* ---------- Service card glare ---------- */
  if (window.matchMedia && window.matchMedia('(hover: hover) and (pointer: fine)').matches) {
    root.querySelectorAll('.ledream-svc-card').forEach(function (card) {
      card.addEventListener('mousemove', function (e) {
        var r = card.getBoundingClientRect();
        card.style.setProperty('--mx', (e.clientX - r.left) + 'px');
        card.style.setProperty('--my', (e.clientY - r.top) + 'px');
      });
    });
  }

  /* ---------- Hero particle canvas ---------- */
  var canvas = root.querySelector('.ledream-hero-canvas');
  if (canvas && canvas.getContext && !reduceMotion) {
    var ctx = canvas.getContext('2d');
    var particles = [], raf = null, w = 0, h = 0, dpr = Math.min(window.devicePixelRatio || 1, 2);
    function resize() {
      var rect = canvas.getBoundingClientRect();
      w = rect.width; h = rect.height;
      canvas.width = Math.floor(w * dpr); canvas.height = Math.floor(h * dpr);
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      var count = Math.max(28, Math.min(70, Math.floor(w / 22)));
      particles = [];
      for (var i = 0; i < count; i++) {
        particles.push({
          x: Math.random() * w, y: Math.random() * h,
          r: Math.random() * 1.7 + 0.5,
          vx: (Math.random() - 0.5) * 0.25,
          vy: (Math.random() - 0.5) * 0.25,
          a: Math.random() * 0.5 + 0.2
        });
      }
    }
    function draw() {
      ctx.clearRect(0, 0, w, h);
      for (var i = 0; i < particles.length; i++) {
        var p = particles[i];
        p.x += p.vx; p.y += p.vy;
        if (p.x < 0) p.x = w; if (p.x > w) p.x = 0;
        if (p.y < 0) p.y = h; if (p.y > h) p.y = 0;
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
        ctx.fillStyle = 'rgba(240, 54, 122, ' + p.a + ')';
        ctx.shadowColor = 'rgba(240, 54, 122, 0.8)';
        ctx.shadowBlur = 8;
        ctx.fill();
      }
      raf = requestAnimationFrame(draw);
    }
    resize();
    draw();
    window.addEventListener('resize', function () {
      if (raf) cancelAnimationFrame(raf);
      resize(); draw();
    });
  }
})();
</script>
</div>