{"id":94,"date":"2026-06-25T08:20:40","date_gmt":"2026-06-25T08:20:40","guid":{"rendered":"https:\/\/bemutato.betonguru.hu\/?page_id=94"},"modified":"2026-07-07T10:49:29","modified_gmt":"2026-07-07T10:49:29","slug":"kezdolap","status":"publish","type":"page","link":"https:\/\/bemutato.betonguru.hu\/","title":{"rendered":"Kezd\u0151lap"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"94\" class=\"elementor elementor-94\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-79d74c7 e-flex e-con-boxed e-con e-parent\" data-id=\"79d74c7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-359278f e-flex e-con-boxed e-con e-parent\" data-id=\"359278f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-09a224a elementor-widget elementor-widget-betonguru_scroll_widget\" data-id=\"09a224a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"betonguru_scroll_widget.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n\t\t<style>\r\n.betonguru-wrapper {\r\n\t\t\t\t--bg-dark: #040508;\r\n\t\t\t\t--bg-card: rgba(6, 8, 14, 0.85);\r\n\t\t\t\t--bg-card-hover: rgba(10, 14, 24, 0.90);\r\n\t\t\t\t--border-light: rgba(255, 255, 255, 0.06);\r\n\t\t\t\t--brand-yellow: #ffcc00;\r\n\t\t\t\t--brand-yellow-hover: #f0bd00;\r\n\t\t\t\t--brand-yellow-dim: rgba(255, 204, 0, 0.15);\r\n\t\t\t\t--text-white: #ffffff;\r\n\t\t\t\t--text-muted: #8a99ad;\r\n\t\t\t\t--text-gray: #ccd6e0;\r\n\t\t\t\t--font-headline: 'Barlow Condensed', sans-serif;\r\n\t\t\t\t--font-body: 'Inter', sans-serif;\r\n\t\t\t\t--transition-smooth: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);\r\n\t\t\t\t\r\n\t\t\t\tposition: relative;\r\n\t\t\t\tbackground-color: var(--bg-dark);\r\n\t\t\t\tcolor: var(--text-white);\r\n\t\t\t\tfont-family: var(--font-body);\r\n\t\t\t\t-webkit-font-smoothing: antialiased;\r\n\t\t\t\tmargin: 0;\r\n\t\t\t\tpadding: 0;\r\n\t\t\t\twidth: 100%;\r\n\t\t\t\tmin-height: 100vh;\r\n\t\t\t\tbox-sizing: border-box;\r\n\t\t\t\toverflow-x: hidden;\r\n\t\t\t\tscrollbar-width: none; \/* Firefox *\/\r\n\t\t\t\t-ms-overflow-style: none; \/* IE \/ Edge *\/\r\n\t\t\t}\r\n\r\n\t\t\t.betonguru-wrapper::-webkit-scrollbar {\r\n\t\t\t\tdisplay: none; \/* Chrome, Safari, Edge *\/\r\n\t\t\t}\r\n\r\n\t\t\t\/* Global scrollbar hide for the page *\/\r\n\t\t\thtml, body {\r\n\t\t\t\tscrollbar-width: none;\r\n\t\t\t\t-ms-overflow-style: none;\r\n\t\t\t}\r\n\t\t\thtml::-webkit-scrollbar,\r\n\t\t\tbody::-webkit-scrollbar {\r\n\t\t\t\tdisplay: none;\r\n\t\t\t}\r\n\r\n\t\t\t.betonguru-wrapper *, \r\n\t\t\t.betonguru-wrapper *::before, \r\n\t\t\t.betonguru-wrapper *::after {\r\n\t\t\t\tbox-sizing: border-box;\r\n\t\t\t}\r\n\r\n\r\n    \r\n    \r\n\r\n    html::-webkit-scrollbar,\r\n    body::-webkit-scrollbar {\r\n      display: none; \r\n    }\r\n\r\n    \r\n    #scroll-video-container {\r\n      position: fixed;\r\n      inset: 0;\r\n      z-index: 1;\r\n      background: var(--bg-dark);\r\n      overflow: hidden;\r\n      pointer-events: none;\r\n    }\r\n\r\n    #scroll-video-container canvas {\r\n      position: absolute;\r\n      inset: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      object-fit: cover;\r\n    }\r\n\r\n\t\t#scroll-video-container .overlay {\r\n\t\t\tdisplay: none !important;\r\n\t\t}\r\n\r\n    \r\n    #particles-canvas {\r\n      position: fixed;\r\n      inset: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      pointer-events: none;\r\n      z-index: 25;\r\n    }\r\n\r\n    \r\n    nav {\r\n      position: fixed;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      z-index: 50;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      padding: 1.5rem 3rem;\r\n      background: rgba(4, 5, 8, 0.2);\r\n      border-bottom: 1px solid rgba(255, 255, 255, 0.02);\r\n      backdrop-filter: blur(8px);\r\n      -webkit-backdrop-filter: blur(8px);\r\n      transition: var(--transition-smooth);\r\n    }\r\n\r\n    nav.scrolled {\r\n      padding: 0.9rem 3rem;\r\n      background: rgba(4, 5, 8, 0.85);\r\n      border-bottom: 1px solid var(--border-light);\r\n      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);\r\n    }\r\n\r\n    nav .logo-container {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 0.75rem;\r\n      text-decoration: none;\r\n    }\r\n\r\n    nav .logo-img {\r\n      height: 40px;\r\n      width: auto;\r\n      object-fit: contain;\r\n      transition: var(--transition-smooth);\r\n    }\r\n\r\n    nav.scrolled .logo-img {\r\n      height: 34px;\r\n    }\r\n\r\n    nav .logo-text {\r\n      font-family: var(--font-headline);\r\n      font-weight: 700;\r\n      font-size: 1.75rem;\r\n      color: var(--text-white);\r\n      letter-spacing: -0.02em;\r\n      text-transform: uppercase;\r\n      display: flex;\r\n      align-items: center;\r\n    }\r\n\r\n    nav .logo-text span {\r\n      color: var(--brand-yellow);\r\n    }\r\n\r\n    nav .nav-links {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 2.5rem;\r\n    }\r\n\r\n    nav .nav-links a {\r\n      font-size: 0.875rem;\r\n      font-weight: 500;\r\n      color: var(--text-gray);\r\n      text-decoration: none;\r\n      text-transform: uppercase;\r\n      letter-spacing: 0.08em;\r\n      transition: var(--transition-smooth);\r\n      position: relative;\r\n      padding: 0.25rem 0;\r\n    }\r\n\r\n    nav .nav-links a::after {\r\n      content: '';\r\n      position: absolute;\r\n      bottom: 0;\r\n      left: 0;\r\n      width: 0;\r\n      height: 2px;\r\n      background-color: var(--brand-yellow);\r\n      transition: var(--transition-smooth);\r\n    }\r\n\r\n    nav .nav-links a:hover {\r\n      color: var(--text-white);\r\n    }\r\n\r\n    nav .nav-links a:hover::after {\r\n      width: 100%;\r\n    }\r\n\r\n    nav .cta-phone {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 0.5rem;\r\n      background: var(--brand-yellow);\r\n      color: #000;\r\n      font-weight: 700;\r\n      font-size: 0.875rem;\r\n      padding: 0.65rem 1.35rem;\r\n      border-radius: 9999px;\r\n      text-decoration: none;\r\n      transition: var(--transition-smooth);\r\n      box-shadow: 0 4px 15px rgba(255, 204, 0, 0.2);\r\n    }\r\n\r\n    nav .cta-phone:hover {\r\n      background: var(--brand-yellow-hover);\r\n      transform: translateY(-2px);\r\n      box-shadow: 0 6px 20px rgba(255, 204, 0, 0.35);\r\n    }\r\n\r\n    \/* Phone numbers: copyable text + clickable tel: links *\/\r\n    nav .cta-phone span,\r\n    .info-card-mini .ic-value a[href^=\"tel:\"],\r\n    .footer-contact-item a[href^=\"tel:\"],\r\n    .phone-cta-highlight a[href^=\"tel:\"] {\r\n      user-select: text !important;\r\n      -webkit-user-select: text !important;\r\n      -moz-user-select: text !important;\r\n      -ms-user-select: text !important;\r\n      cursor: pointer;\r\n    }\r\n\r\n    .menu-toggle {\r\n      display: none;\r\n      background: none;\r\n      border: none;\r\n      color: var(--text-white);\r\n      font-size: 1.5rem;\r\n      cursor: pointer;\r\n      transition: var(--transition-smooth);\r\n    }\r\n\r\n    \r\n    #content-wrapper {\r\n      position: fixed;\r\n      inset: 0;\r\n      z-index: 10;\r\n      height: 100vh;\r\n      overflow: visible;\r\n      pointer-events: none;\r\n    }\r\n\r\n    .scroll-slide {\r\n      position: absolute;\r\n      inset: 0;\r\n      width: 100%;\r\n      height: 100vh;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      padding: 6rem 1.5rem;\r\n      perspective: 1000px;\r\n      opacity: 0;\r\n      transform: translateY(100vh) scale(0.95);\r\n      pointer-events: none;\r\n      will-change: opacity, transform;\r\n    }\r\n\r\n    .scroll-slide.active-slide {\r\n      pointer-events: auto;\r\n    }\r\n\r\n    .slide-content {\r\n      width: 100%;\r\n      max-width: 76rem;\r\n      margin: 0 auto;\r\n      opacity: 1 !important;\r\n      transform: none !important;\r\n      filter: none !important;\r\n      pointer-events: auto;\r\n    }\r\n\r\n    .glass-panel {\r\n      background: var(--bg-card);\r\n      border: 1px solid var(--border-light);\r\n      border-radius: 1.5rem;\r\n      padding: 3rem;\r\n      backdrop-filter: blur(16px);\r\n      -webkit-backdrop-filter: blur(16px);\r\n      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);\r\n    }\r\n\r\n    \r\n    .section-label {\r\n      font-size: 0.75rem;\r\n      font-weight: 700;\r\n      color: var(--brand-yellow);\r\n      letter-spacing: 0.2em;\r\n      text-transform: uppercase;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 0.75rem;\r\n      margin-bottom: 0.75rem;\r\n    }\r\n\r\n    .section-label::before {\r\n      content: '';\r\n      display: inline-block;\r\n      width: 2rem;\r\n      height: 1px;\r\n      background: var(--brand-yellow);\r\n    }\r\n\r\n    .section-title {\r\n      font-family: var(--font-headline);\r\n      font-size: clamp(2rem, 4vw, 3.25rem);\r\n      font-weight: 800;\r\n      text-transform: uppercase;\r\n      font-style: italic;\r\n      line-height: 1.05;\r\n    }\r\n\r\n    .section-title span {\r\n      color: var(--brand-yellow);\r\n    }\r\n\r\n    \r\n    .hero-slide {\r\n      text-align: center;\r\n      justify-content: center;\r\n      height: 100vh;\r\n    }\r\n\r\n    .hero-slide .subtitle {\r\n      font-size: 0.875rem;\r\n      font-weight: 700;\r\n      color: var(--brand-yellow);\r\n      margin-bottom: 1.25rem;\r\n      letter-spacing: 0.2em;\r\n      text-transform: uppercase;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 0.75rem;\r\n      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);\r\n    }\r\n\r\n    .hero-slide .subtitle::before,\r\n    .hero-slide .subtitle::after {\r\n      content: '';\r\n      display: inline-block;\r\n      width: 1.5rem;\r\n      height: 1px;\r\n      background-color: var(--brand-yellow);\r\n    }\r\n\r\n    .hero-slide h1 {\r\n      font-family: var(--font-headline);\r\n      font-size: clamp(2.5rem, 8vw, 6.25rem);\r\n      font-weight: 800;\r\n      line-height: 0.95;\r\n      text-transform: uppercase;\r\n      letter-spacing: -0.02em;\r\n      margin-bottom: 1.5rem;\r\n      font-style: italic;\r\n      filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.95)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));\r\n    }\r\n\r\n    .hero-slide h1 span.outline {\r\n      color: transparent;\r\n      -webkit-text-stroke: 1.5px var(--text-white);\r\n    }\r\n\r\n    .hero-slide h1 span.highlight {\r\n      color: var(--brand-yellow);\r\n      text-shadow: 0 0 25px rgba(255, 204, 0, 0.25);\r\n    }\r\n\r\n    .hero-slide .desc {\r\n      font-size: clamp(1rem, 2.5vw, 1.25rem);\r\n      color: #ffffff; \/* Use white for higher contrast *\/\r\n      max-width: 38rem;\r\n      line-height: 1.6;\r\n      margin: 0 auto 2.5rem auto;\r\n      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95), 0 1px 3px rgba(0, 0, 0, 0.95);\r\n    }\r\n\r\n    .hero-slide .ctas {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 1.25rem;\r\n      flex-wrap: wrap;\r\n      justify-content: center;\r\n    }\r\n\r\n    \r\n    .btn {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      gap: 0.75rem;\r\n      font-family: var(--font-body);\r\n      font-weight: 600;\r\n      font-size: 0.937rem;\r\n      text-decoration: none;\r\n      padding: 0.95rem 2.25rem;\r\n      border-radius: 9999px;\r\n      transition: var(--transition-smooth);\r\n      cursor: pointer;\r\n      line-height: 1.2;\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    .btn i {\r\n      color: inherit !important;\r\n    }\r\n\r\n    .btn-primary {\r\n      background: var(--brand-yellow) !important;\r\n      color: #000 !important;\r\n      border: 1.5px solid var(--brand-yellow) !important;\r\n      box-shadow: 0 5px 20px rgba(255, 204, 0, 0.25) !important;\r\n    }\r\n\r\n    .btn-primary:hover {\r\n      background: var(--brand-yellow-hover) !important;\r\n      border-color: var(--brand-yellow-hover) !important;\r\n      color: #000 !important;\r\n      transform: translateY(-2px);\r\n      box-shadow: 0 8px 25px rgba(255, 204, 0, 0.4) !important;\r\n    }\r\n\r\n    .btn-secondary {\r\n      background: rgba(4, 5, 8, 0.45) !important;\r\n      color: var(--text-white) !important;\r\n      border: 1.5px solid rgba(255, 255, 255, 0.4) !important;\r\n      backdrop-filter: blur(8px) !important;\r\n      -webkit-backdrop-filter: blur(8px) !important;\r\n    }\r\n\r\n    .btn-secondary:hover {\r\n      background: rgba(255, 255, 255, 0.15) !important;\r\n      border-color: var(--text-white) !important;\r\n      color: var(--text-white) !important;\r\n      transform: translateY(-2px);\r\n    }\r\n\r\n    .bounce-arrow {\r\n      position: absolute;\r\n      bottom: 2.5rem;\r\n      left: 50%;\r\n      transform: translateX(-50%);\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      gap: 0.5rem;\r\n      color: var(--text-muted);\r\n      font-size: 0.75rem;\r\n      letter-spacing: 0.1em;\r\n      text-transform: uppercase;\r\n      text-decoration: none;\r\n      cursor: pointer;\r\n    }\r\n\r\n    .bounce-arrow svg {\r\n      width: 1.25rem;\r\n      height: 1.25rem;\r\n      animation: bounce 1.8s infinite;\r\n      color: var(--brand-yellow);\r\n    }\r\n\r\n    @keyframes bounce {\r\n      0%, 100% { transform: translateY(0); }\r\n      50% { transform: translateY(-30%); }\r\n    }\r\n\r\n    \r\n    .intro-grid {\r\n      display: grid;\r\n      grid-template-columns: 1fr 1fr;\r\n      gap: 3rem;\r\n      align-items: center;\r\n    }\r\n\r\n    .intro-text h2 {\r\n      font-family: var(--font-headline);\r\n      font-size: clamp(2rem, 4vw, 3.5rem);\r\n      font-weight: 800;\r\n      text-transform: uppercase;\r\n      font-style: italic;\r\n      line-height: 1.05;\r\n      margin-bottom: 1.5rem;\r\n    }\r\n\r\n    .intro-text h2 span {\r\n      color: var(--brand-yellow);\r\n    }\r\n\r\n    .intro-text p {\r\n\t\t\t\tcolor: #f1f5f9;\r\n\t\t\t\tfont-size: 1.05rem;\r\n\t\t\t\tline-height: 1.65;\r\n\t\t\t\tfont-weight: 450;\r\n\t\t\t\tmargin-bottom: 1.5rem;\r\n\t\t\t\ttext-shadow: 0 1px 2px rgba(0,0,0,0.5);\r\n\t\t\t}\r\n\r\n    .intro-stats {\r\n      display: grid;\r\n      grid-template-columns: repeat(2, 1fr);\r\n      gap: 1.5rem;\r\n    }\r\n\r\n    .stat-card {\r\n      background: rgba(255, 255, 255, 0.02);\r\n      border: 1px solid var(--border-light);\r\n      border-radius: 1rem;\r\n      padding: 1.5rem;\r\n      text-align: center;\r\n      transition: var(--transition-smooth);\r\n    }\r\n\r\n    .stat-card:hover {\r\n      background: rgba(255, 255, 255, 0.04);\r\n      border-color: rgba(255, 204, 0, 0.2);\r\n    }\r\n\r\n    .stat-card .num {\r\n      font-family: var(--font-headline);\r\n      font-size: 3rem;\r\n      font-weight: 800;\r\n      color: var(--brand-yellow);\r\n      margin-bottom: 0.25rem;\r\n    }\r\n\r\n    .stat-card .label {\r\n      font-size: 0.812rem;\r\n      color: var(--text-muted);\r\n      text-transform: uppercase;\r\n      font-weight: 600;\r\n      letter-spacing: 0.05em;\r\n    }\r\n\r\n    \r\n    .services-slide .section-header {\r\n      text-align: center;\r\n      margin-bottom: 3rem;\r\n    }\r\n\r\n    .services-slide .section-header p {\r\n      color: var(--brand-yellow);\r\n      font-weight: 700;\r\n      letter-spacing: 0.15em;\r\n      text-transform: uppercase;\r\n      font-size: 0.812rem;\r\n      margin-bottom: 0.5rem;\r\n    }\r\n\r\n    .services-slide .section-header h2 {\r\n      font-family: var(--font-headline);\r\n      font-size: clamp(2rem, 4vw, 3.25rem);\r\n      font-weight: 800;\r\n      text-transform: uppercase;\r\n      font-style: italic;\r\n    }\r\n\r\n    .services-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, 1fr);\r\n      gap: 1.5rem;\r\n    }\r\n\r\n    .service-card {\r\n      background: var(--bg-card);\r\n      border: 1px solid var(--border-light);\r\n      border-radius: 1.25rem;\r\n      padding: 2rem 1.5rem;\r\n      transition: var(--transition-smooth);\r\n      display: flex;\r\n      flex-direction: column;\r\n      height: 100%;\r\n      position: relative;\r\n      overflow: hidden;\r\n    }\r\n\r\n    .service-card::after {\r\n      content: '';\r\n      position: absolute;\r\n      bottom: 0;\r\n      left: 0;\r\n      width: 0;\r\n      height: 3px;\r\n      background: var(--brand-yellow);\r\n      transition: var(--transition-smooth);\r\n    }\r\n\r\n    .service-card:hover::after {\r\n      width: 100%;\r\n    }\r\n\r\n    .service-card:hover {\r\n      transform: translateY(-8px) scale(1.02);\r\n      border-color: rgba(255, 204, 0, 0.4);\r\n      background: var(--bg-card-hover);\r\n      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 204, 0, 0.15);\r\n    }\r\n\r\n    .service-card .icon-box {\r\n      width: 3.5rem;\r\n      height: 3.5rem;\r\n      background: rgba(255, 204, 0, 0.1);\r\n      border-radius: 0.75rem;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      color: var(--brand-yellow);\r\n      font-size: 1.5rem;\r\n      margin-bottom: 1.25rem;\r\n      border: 1px solid rgba(255, 204, 0, 0.15);\r\n      transition: var(--transition-smooth);\r\n    }\r\n\r\n    .service-card:hover .icon-box {\r\n      background: var(--brand-yellow);\r\n      color: #000;\r\n      transform: scale(1.05);\r\n    }\r\n\r\n    .service-card h3 {\r\n      font-family: var(--font-headline);\r\n      font-size: 1.5rem;\r\n      font-weight: 700;\r\n      color: var(--text-white);\r\n      margin-bottom: 0.75rem;\r\n      text-transform: uppercase;\r\n      letter-spacing: -0.01em;\r\n    }\r\n\r\n    .service-card p {\r\n      color: var(--text-gray);\r\n      font-size: 0.85rem;\r\n      line-height: 1.6;\r\n    }\r\n\r\n    .service-card .features-list {\r\n      margin-top: 1rem;\r\n      list-style: none;\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 0.4rem;\r\n      font-size: 0.78rem;\r\n      color: var(--text-muted);\r\n    }\r\n\r\n    .service-card .features-list li {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 0.5rem;\r\n    }\r\n\r\n    .service-card .features-list li i {\r\n      color: var(--brand-yellow);\r\n      font-size: 0.7rem;\r\n    }\r\n\r\n    \r\n    .showcase-grid {\r\n      display: grid;\r\n      grid-template-columns: 1.05fr 0.95fr;\r\n      gap: 4rem;\r\n      align-items: center;\r\n    }\r\n\r\n    .poster-showcase {\r\n      position: relative;\r\n      border-radius: 1.5rem;\r\n      overflow: hidden;\r\n      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);\r\n      border: 1px solid var(--border-light);\r\n      background: #000;\r\n      transition: var(--transition-smooth);\r\n    }\r\n\r\n    .poster-showcase:hover {\r\n      transform: scale(1.01) translateY(-5px);\r\n      border-color: rgba(255, 204, 0, 0.2);\r\n    }\r\n\r\n    .poster-img {\r\n      width: 100%;\r\n      height: auto;\r\n      display: block;\r\n      transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);\r\n    }\r\n\r\n    .poster-showcase:hover .poster-img {\r\n      transform: scale(1.03);\r\n    }\r\n\r\n    .poster-badge {\r\n      position: absolute;\r\n      top: 1.5rem;\r\n      left: 1.5rem;\r\n      background: var(--brand-yellow);\r\n      color: #000;\r\n      font-weight: 800;\r\n      font-size: 0.75rem;\r\n      letter-spacing: 0.1em;\r\n      text-transform: uppercase;\r\n      padding: 0.5rem 1rem;\r\n      border-radius: 0.375rem;\r\n      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);\r\n      z-index: 5;\r\n    }\r\n\r\n    .value-list-container h2 {\r\n      font-family: var(--font-headline);\r\n      font-size: clamp(2rem, 3.5vw, 3rem);\r\n      font-weight: 800;\r\n      text-transform: uppercase;\r\n      font-style: italic;\r\n      line-height: 1;\r\n      margin-bottom: 1.5rem;\r\n    }\r\n\r\n    .value-list-container h2 span {\r\n      color: var(--brand-yellow);\r\n    }\r\n\r\n    .value-list {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 1.25rem;\r\n    }\r\n\r\n    .value-item {\r\n      display: flex;\r\n      align-items: flex-start;\r\n      gap: 1.25rem;\r\n      padding: 1.25rem;\r\n      background: rgba(255, 255, 255, 0.02);\r\n      border: 1px solid var(--border-light);\r\n      border-radius: 0.85rem;\r\n      transition: var(--transition-smooth);\r\n    }\r\n\r\n    .value-item:hover {\r\n      background: rgba(255, 255, 255, 0.04);\r\n      border-color: rgba(255, 204, 0, 0.15);\r\n    }\r\n\r\n    .value-item .icon {\r\n      width: 2.75rem;\r\n      height: 2.75rem;\r\n      border-radius: 50%;\r\n      background: rgba(255, 204, 0, 0.1);\r\n      color: var(--brand-yellow);\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      font-size: 1.1rem;\r\n      flex-shrink: 0;\r\n    }\r\n\r\n    .value-item .details h4 {\r\n      font-size: 0.875rem;\r\n      color: var(--text-muted);\r\n      margin-bottom: 0.25rem;\r\n      text-transform: uppercase;\r\n      letter-spacing: 0.05em;\r\n    }\r\n\r\n    .value-item .details p {\r\n      font-size: 1.05rem;\r\n      color: var(--text-white);\r\n      font-weight: 600;\r\n    }\r\n\r\n    \r\n    .projects-grid {\r\n      display: grid;\r\n      grid-template-columns: 1fr 1fr;\r\n      gap: 1.5rem;\r\n    }\r\n\r\n    .project-card {\r\n      position: relative;\r\n      overflow: hidden;\r\n      border-radius: 1.25rem;\r\n      height: 260px;\r\n      cursor: pointer;\r\n      border: 1px solid var(--border-light);\r\n      transition: var(--transition-smooth);\r\n    }\r\n\r\n    .project-card.wide {\r\n      grid-column: 1 \/ -1;\r\n      height: 220px;\r\n    }\r\n\r\n    .project-card img {\r\n      width: 100%;\r\n      height: 100%;\r\n      object-fit: cover;\r\n      transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);\r\n    }\r\n\r\n    .project-card:hover img {\r\n      transform: scale(1.08);\r\n    }\r\n\r\n    .project-card .project-overlay {\r\n      position: absolute;\r\n      inset: 0;\r\n      background: linear-gradient(to top, rgba(4, 5, 8, 0.95) 0%, rgba(4, 5, 8, 0.3) 50%, transparent 100%);\r\n      display: flex;\r\n      flex-direction: column;\r\n      justify-content: flex-end;\r\n      padding: 1.5rem;\r\n    }\r\n\r\n    .project-card .project-type {\r\n      font-size: 0.65rem;\r\n      font-weight: 700;\r\n      color: var(--brand-yellow);\r\n      text-transform: uppercase;\r\n      letter-spacing: 0.15em;\r\n      margin-bottom: 0.35rem;\r\n    }\r\n\r\n    .project-card h3 {\r\n      font-family: var(--font-headline);\r\n      font-size: 1.5rem;\r\n      font-weight: 700;\r\n      color: var(--text-white);\r\n      text-transform: uppercase;\r\n    }\r\n\r\n    .project-card .project-location {\r\n      font-size: 0.75rem;\r\n      color: var(--text-muted);\r\n      margin-top: 0.25rem;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 0.35rem;\r\n    }\r\n\r\n    .project-card .project-badge {\r\n      position: absolute;\r\n      top: 1rem;\r\n      right: 1rem;\r\n      background: rgba(4, 5, 8, 0.6);\r\n      backdrop-filter: blur(10px);\r\n      border: 1px solid rgba(255, 255, 255, 0.1);\r\n      padding: 0.5rem 0.85rem;\r\n      border-radius: 0.5rem;\r\n    }\r\n\r\n    .project-card .project-badge .badge-label {\r\n      font-size: 0.6rem;\r\n      color: var(--text-muted);\r\n      text-transform: uppercase;\r\n      letter-spacing: 0.1em;\r\n    }\r\n\r\n    .project-card .project-badge .badge-value {\r\n      font-family: var(--font-headline);\r\n      font-size: 1.1rem;\r\n      font-weight: 700;\r\n      color: var(--brand-yellow);\r\n    }\r\n\r\n    .project-card:hover {\r\n      border-color: rgba(255, 204, 0, 0.3);\r\n      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);\r\n    }\r\n\r\n    \r\n    .guarantees-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, 1fr);\r\n      gap: 2rem;\r\n    }\r\n\r\n    .guarantee-card {\r\n      background: var(--bg-card);\r\n      border: 1px solid var(--border-light);\r\n      border-left: 3px solid var(--brand-yellow);\r\n      border-radius: 0 1rem 1rem 0;\r\n      padding: 2rem;\r\n      transition: var(--transition-smooth);\r\n      position: relative;\r\n    }\r\n\r\n    .guarantee-card::before {\r\n      content: attr(data-code);\r\n      position: absolute;\r\n      top: 1rem;\r\n      right: 1rem;\r\n      font-size: 0.6rem;\r\n      font-weight: 700;\r\n      color: rgba(255, 204, 0, 0.3);\r\n      letter-spacing: 0.15em;\r\n      text-transform: uppercase;\r\n    }\r\n\r\n    .guarantee-card:hover {\r\n      background: var(--bg-card-hover);\r\n      border-color: rgba(255, 204, 0, 0.3);\r\n      transform: translateY(-4px);\r\n      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);\r\n    }\r\n\r\n    .guarantee-card .g-icon {\r\n      width: 3rem;\r\n      height: 3rem;\r\n      background: rgba(255, 204, 0, 0.08);\r\n      border-radius: 0.75rem;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      color: var(--brand-yellow);\r\n      font-size: 1.25rem;\r\n      margin-bottom: 1.25rem;\r\n    }\r\n\r\n    .guarantee-card h4 {\r\n      font-family: var(--font-headline);\r\n      font-size: 1.35rem;\r\n      font-weight: 700;\r\n      color: var(--text-white);\r\n      text-transform: uppercase;\r\n      margin-bottom: 0.75rem;\r\n    }\r\n\r\n    .guarantee-card p {\r\n      font-size: 0.875rem;\r\n      color: var(--text-gray);\r\n      line-height: 1.6;\r\n    }\r\n\r\n    \r\n    .quote-layout {\r\n      display: grid;\r\n      grid-template-columns: 1fr 1fr;\r\n      gap: 3rem;\r\n      align-items: center;\r\n    }\r\n\r\n    .quote-box {\r\n      background: rgba(255, 204, 0, 0.03);\r\n      border: 1px solid rgba(255, 204, 0, 0.12);\r\n      border-left: 4px solid var(--brand-yellow);\r\n      border-radius: 0 1.25rem 1.25rem 0;\r\n      padding: 2.5rem;\r\n    }\r\n\r\n    .quote-box blockquote {\r\n      font-family: var(--font-headline);\r\n      font-size: clamp(1.5rem, 2.5vw, 2rem);\r\n      font-weight: 700;\r\n      font-style: italic;\r\n      color: var(--text-white);\r\n      line-height: 1.35;\r\n      margin-bottom: 1.5rem;\r\n    }\r\n\r\n    .quote-box .quote-author {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 1rem;\r\n    }\r\n\r\n    .quote-box .author-avatar {\r\n      width: 3rem;\r\n      height: 3rem;\r\n      border-radius: 50%;\r\n      background: rgba(255, 204, 0, 0.1);\r\n      border: 2px solid rgba(255, 204, 0, 0.3);\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      color: var(--brand-yellow);\r\n    }\r\n\r\n    .quote-box .author-name {\r\n      font-weight: 700;\r\n      color: var(--text-white);\r\n      font-size: 0.95rem;\r\n    }\r\n\r\n    .quote-box .author-title {\r\n      font-size: 0.75rem;\r\n      color: var(--brand-yellow);\r\n      text-transform: uppercase;\r\n      letter-spacing: 0.1em;\r\n    }\r\n\r\n    .about-features {\r\n      display: grid;\r\n      grid-template-columns: 1fr 1fr;\r\n      gap: 1rem;\r\n    }\r\n\r\n    .about-feature-card {\r\n      background: rgba(255, 255, 255, 0.02);\r\n      border: 1px solid var(--border-light);\r\n      border-radius: 1rem;\r\n      padding: 1.25rem;\r\n      text-align: center;\r\n      transition: var(--transition-smooth);\r\n    }\r\n\r\n    .about-feature-card:hover {\r\n      background: rgba(255, 255, 255, 0.04);\r\n      border-color: rgba(255, 204, 0, 0.15);\r\n    }\r\n\r\n    .about-feature-card i {\r\n      font-size: 1.5rem;\r\n      color: var(--brand-yellow);\r\n      margin-bottom: 0.75rem;\r\n      display: block;\r\n    }\r\n\r\n    .about-feature-card .af-title {\r\n      font-weight: 700;\r\n      font-size: 0.85rem;\r\n      color: var(--text-white);\r\n      text-transform: uppercase;\r\n      letter-spacing: 0.03em;\r\n    }\r\n\r\n    \r\n    .contact-grid {\r\n      display: grid;\r\n      grid-template-columns: 1.1fr 0.9fr;\r\n      gap: 3.5rem;\r\n      align-items: stretch;\r\n    }\r\n\r\n    .contact-column {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 1.5rem;\r\n      justify-content: space-between;\r\n    }\r\n\r\n    .contact-heading-group {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 0.5rem;\r\n    }\r\n\r\n    .contact-heading {\r\n      font-family: var(--font-headline);\r\n      font-size: clamp(2rem, 3.5vw, 2.75rem);\r\n      text-transform: uppercase;\r\n      font-style: italic;\r\n      font-weight: 800;\r\n      line-height: 1.1;\r\n      letter-spacing: -0.01em;\r\n    }\r\n\r\n    .contact-heading span {\r\n      color: var(--brand-yellow);\r\n      text-shadow: 0 0 15px rgba(255, 204, 0, 0.15);\r\n    }\r\n\r\n    .contact-sub {\r\n      color: var(--text-gray);\r\n      font-size: 0.9rem;\r\n      line-height: 1.5;\r\n    }\r\n\r\n    .contact-cards-row {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, 1fr);\r\n      gap: 0.75rem;\r\n    }\r\n\r\n    .info-card-mini {\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      text-align: center;\r\n      gap: 0.5rem;\r\n      padding: 1.25rem 0.75rem;\r\n      background: rgba(255, 255, 255, 0.02);\r\n      border: 1px solid var(--border-light);\r\n      border-radius: 1rem;\r\n      transition: var(--transition-smooth);\r\n    }\r\n\r\n    .info-card-mini:hover {\r\n      background: rgba(255, 255, 255, 0.04);\r\n      border-color: rgba(255, 204, 0, 0.25);\r\n      transform: translateY(-2px);\r\n    }\r\n\r\n    .info-card-mini .ic-icon {\r\n      width: 2.5rem;\r\n      height: 2.5rem;\r\n      border-radius: 50%;\r\n      background: rgba(255, 204, 0, 0.08);\r\n      color: var(--brand-yellow);\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      font-size: 1.1rem;\r\n      flex-shrink: 0;\r\n      border: 1px solid rgba(255, 204, 0, 0.1);\r\n      transition: var(--transition-smooth);\r\n    }\r\n\r\n    .info-card-mini:hover .ic-icon {\r\n      background: var(--brand-yellow);\r\n      color: #000;\r\n    }\r\n\r\n    .info-card-mini .ic-label {\r\n      font-size: 0.65rem;\r\n      color: var(--text-muted);\r\n      text-transform: uppercase;\r\n      letter-spacing: 0.08em;\r\n      font-weight: 700;\r\n    }\r\n\r\n    .info-card-mini .ic-value {\r\n      font-size: 0.85rem;\r\n      color: var(--text-white);\r\n      font-weight: 600;\r\n      line-height: 1.3;\r\n    }\r\n\r\n    .info-card-mini .ic-value a {\r\n      color: var(--text-white);\r\n      text-decoration: none;\r\n      transition: var(--transition-smooth);\r\n    }\r\n\r\n    .info-card-mini .ic-value a:hover {\r\n      color: var(--brand-yellow);\r\n    }\r\n\r\n    \r\n    .calc-container {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 1rem;\r\n      border-top: 1px solid rgba(255, 255, 255, 0.06);\r\n      padding-top: 1.5rem;\r\n    }\r\n\r\n    .calc-title {\r\n      font-family: var(--font-headline);\r\n      font-size: 1.25rem;\r\n      font-weight: 700;\r\n      text-transform: uppercase;\r\n      color: var(--brand-yellow);\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 0.5rem;\r\n      letter-spacing: 0.02em;\r\n    }\r\n\r\n    .calc-inputs {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, 1fr);\r\n      gap: 0.75rem;\r\n    }\r\n\r\n    .input-group {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 0.4rem;\r\n    }\r\n\r\n    .input-group label,\r\n    .form-group label {\r\n      font-size: 0.65rem;\r\n      color: var(--text-muted);\r\n      text-transform: uppercase;\r\n      font-weight: 700;\r\n      letter-spacing: 0.08em;\r\n    }\r\n\r\n    .input-group input,\r\n    .form-group input,\r\n    .form-group select,\r\n    .form-group textarea {\r\n      background: rgba(0, 0, 0, 0.35);\r\n      border: 1px solid var(--border-light);\r\n      border-radius: 0.6rem;\r\n      color: var(--text-white);\r\n      padding: 0.75rem 0.85rem;\r\n      font-family: var(--font-body);\r\n      font-size: 0.875rem;\r\n      font-weight: 500;\r\n      outline: none;\r\n      transition: var(--transition-smooth);\r\n      width: 100%;\r\n    }\r\n\r\n    .input-group input {\r\n      font-weight: 600;\r\n      font-size: 0.9rem;\r\n    }\r\n\r\n    .input-group input:hover,\r\n    .form-group input:hover,\r\n    .form-group select:hover,\r\n    .form-group textarea:hover {\r\n      border-color: rgba(255, 204, 0, 0.25);\r\n      background-color: rgba(0, 0, 0, 0.45);\r\n    }\r\n\r\n    .input-group input:focus,\r\n    .form-group input:focus,\r\n    .form-group select:focus,\r\n    .form-group textarea:focus {\r\n      border-color: var(--brand-yellow);\r\n      background-color: rgba(0, 0, 0, 0.55);\r\n      box-shadow: 0 0 12px rgba(255, 204, 0, 0.2);\r\n    }\r\n\r\n    .result-display {\r\n      background: rgba(255, 204, 0, 0.03);\r\n      border: 1px dashed rgba(255, 204, 0, 0.2);\r\n      padding: 0.85rem 1.25rem;\r\n      border-radius: 0.75rem;\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n    }\r\n\r\n    .result-display .label {\r\n      font-size: 0.85rem;\r\n      color: var(--text-gray);\r\n      font-weight: 500;\r\n    }\r\n\r\n    .result-display .value {\r\n      font-family: var(--font-headline);\r\n      font-size: 1.65rem;\r\n      font-weight: 800;\r\n      color: var(--brand-yellow);\r\n      text-shadow: 0 0 10px rgba(255, 204, 0, 0.15);\r\n    }\r\n\r\n    \r\n    .form-container {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 1.1rem;\r\n    }\r\n\r\n    .form-row {\r\n      display: grid;\r\n      grid-template-columns: 1fr 1fr;\r\n      gap: 0.85rem;\r\n    }\r\n\r\n    .form-row.split-custom {\r\n      grid-template-columns: 1.35fr 0.65fr;\r\n    }\r\n\r\n    .form-group {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 0.4rem;\r\n    }\r\n\r\n    .form-group.full {\r\n      grid-column: 1 \/ -1;\r\n    }\r\n\r\n    .form-group textarea {\r\n      resize: none;\r\n    }\r\n\r\n    .form-group select {\r\n      -webkit-appearance: none;\r\n      -moz-appearance: none;\r\n      appearance: none;\r\n      background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' fill='%23ffcc00' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'\/%3E%3C\/svg%3E\");\r\n      background-repeat: no-repeat;\r\n      background-position: right 1rem center;\r\n      padding-right: 2.25rem;\r\n      cursor: pointer;\r\n      text-overflow: ellipsis;\r\n      white-space: nowrap;\r\n      overflow: hidden;\r\n    }\r\n\r\n    .form-group select option {\r\n      background: #0d111a;\r\n      color: var(--text-white);\r\n      padding: 0.75rem;\r\n    }\r\n\r\n    \r\n    #premium-footer {\r\n      position: absolute;\r\n      top: 100vh;\r\n      left: 0;\r\n      right: 0;\r\n      z-index: 20;\r\n      background: transparent;\r\n      pointer-events: none;\r\n    }\r\n\r\n    .footer-content-bg {\r\n      background: #05060b;\r\n      border-top: 1px solid rgba(255, 204, 0, 0.08);\r\n      box-shadow: 0 -30px 60px rgba(0, 0, 0, 0.8), 0 -10px 30px rgba(255, 204, 0, 0.04);\r\n      pointer-events: auto !important;\r\n    }\r\n\r\n    .footer-inner {\r\n      max-width: 76rem;\r\n      margin: 0 auto;\r\n      padding: 3rem 2rem 1.5rem;\r\n    }\r\n\r\n    .footer-top {\r\n      display: grid;\r\n      grid-template-columns: 1.5fr 1fr 1fr 1.2fr;\r\n      gap: 3rem;\r\n      margin-bottom: 2.5rem;\r\n    }\r\n\r\n    .footer-brand .footer-logo-big {\r\n      font-family: var(--font-headline);\r\n      font-size: 2rem;\r\n      font-weight: 800;\r\n      text-transform: uppercase;\r\n      color: var(--text-white);\r\n      letter-spacing: -0.02em;\r\n      margin-bottom: 1rem;\r\n      display: block;\r\n      text-decoration: none;\r\n    }\r\n\r\n    .footer-brand .footer-logo-big span {\r\n      color: var(--brand-yellow);\r\n    }\r\n\r\n    .footer-brand .footer-desc {\r\n      color: var(--text-muted);\r\n      font-size: 0.85rem;\r\n      line-height: 1.6;\r\n      margin-bottom: 1.25rem;\r\n      max-width: 20rem;\r\n    }\r\n\r\n    .footer-social {\r\n      display: flex;\r\n      gap: 0.75rem;\r\n    }\r\n\r\n    .footer-social a {\r\n      width: 2.5rem;\r\n      height: 2.5rem;\r\n      border-radius: 50%;\r\n      background: rgba(255, 255, 255, 0.04);\r\n      border: 1px solid var(--border-light);\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      color: var(--text-muted);\r\n      font-size: 0.95rem;\r\n      transition: var(--transition-smooth);\r\n      text-decoration: none;\r\n    }\r\n\r\n    .footer-social a:hover {\r\n      background: var(--brand-yellow);\r\n      color: #000;\r\n      border-color: var(--brand-yellow);\r\n      transform: translateY(-3px);\r\n    }\r\n\r\n    .footer-col h4 {\r\n      font-family: var(--font-headline);\r\n      font-size: 0.85rem;\r\n      font-weight: 700;\r\n      text-transform: uppercase;\r\n      letter-spacing: 0.1em;\r\n      color: var(--brand-yellow);\r\n      margin-bottom: 1.25rem;\r\n      position: relative;\r\n      padding-bottom: 0.75rem;\r\n    }\r\n\r\n    .footer-col h4::after {\r\n      content: '';\r\n      position: absolute;\r\n      bottom: 0;\r\n      left: 0;\r\n      width: 1.5rem;\r\n      height: 2px;\r\n      background: var(--brand-yellow);\r\n    }\r\n\r\n    .footer-col ul {\r\n      list-style: none;\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 0.6rem;\r\n    }\r\n\r\n    .footer-col ul li a {\r\n      color: var(--text-muted);\r\n      font-size: 0.812rem;\r\n      text-decoration: none;\r\n      transition: var(--transition-smooth);\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 0.4rem;\r\n    }\r\n\r\n    .footer-col ul li a:hover {\r\n      color: var(--text-white);\r\n      transform: translateX(3px);\r\n    }\r\n\r\n    .footer-col ul li a i {\r\n      font-size: 0.6rem;\r\n      color: rgba(255, 204, 0, 0.4);\r\n    }\r\n\r\n    .footer-contact-item {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 0.75rem;\r\n      margin-bottom: 0.85rem;\r\n    }\r\n\r\n    .footer-contact-item .fci-icon {\r\n      width: 2rem;\r\n      height: 2rem;\r\n      border-radius: 0.4rem;\r\n      background: rgba(255, 204, 0, 0.06);\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      color: var(--brand-yellow);\r\n      font-size: 0.75rem;\r\n      flex-shrink: 0;\r\n    }\r\n\r\n    .footer-contact-item span,\r\n    .footer-contact-item a {\r\n      font-size: 0.812rem;\r\n      color: var(--text-muted);\r\n      text-decoration: none;\r\n      transition: var(--transition-smooth);\r\n    }\r\n\r\n    .footer-contact-item a:hover {\r\n      color: var(--brand-yellow);\r\n    }\r\n\r\n    .footer-divider {\r\n      height: 1px;\r\n      background: linear-gradient(90deg, transparent, rgba(255, 204, 0, 0.15), rgba(255, 255, 255, 0.05), transparent);\r\n      margin-bottom: 1.25rem;\r\n    }\r\n\r\n    .footer-bottom {\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n      flex-wrap: wrap;\r\n      gap: 1rem;\r\n    }\r\n\r\n    .footer-bottom .fb-copy {\r\n      font-size: 0.75rem;\r\n      color: rgba(138, 153, 173, 0.6);\r\n    }\r\n\r\n    .footer-bottom .fb-copy span {\r\n      color: var(--brand-yellow);\r\n      font-weight: 600;\r\n    }\r\n\r\n    .footer-bottom .fb-badges {\r\n      display: flex;\r\n      gap: 0.75rem;\r\n      align-items: center;\r\n    }\r\n\r\n    .footer-bottom .fb-badge {\r\n      font-size: 0.6rem;\r\n      font-weight: 700;\r\n      color: var(--text-muted);\r\n      text-transform: uppercase;\r\n      letter-spacing: 0.1em;\r\n      padding: 0.35rem 0.75rem;\r\n      border: 1px solid var(--border-light);\r\n      border-radius: 9999px;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 0.35rem;\r\n    }\r\n\r\n    .footer-bottom .fb-badge i {\r\n      color: var(--brand-yellow);\r\n      font-size: 0.65rem;\r\n    }\r\n\r\n    \r\n    .mobile-nav-overlay {\r\n      position: fixed;\r\n      inset: 0;\r\n      z-index: 45;\r\n      background: rgba(5, 7, 10, 0.97);\r\n      backdrop-filter: blur(20px);\r\n      -webkit-backdrop-filter: blur(20px);\r\n      display: flex;\r\n      flex-direction: column;\r\n      justify-content: center;\r\n      align-items: center;\r\n      gap: 2rem;\r\n      opacity: 0;\r\n      pointer-events: none;\r\n      transition: var(--transition-smooth);\r\n    }\r\n\r\n    .mobile-nav-overlay.active {\r\n      opacity: 1;\r\n      pointer-events: auto;\r\n    }\r\n\r\n    .mobile-nav-overlay a {\r\n      font-family: var(--font-headline);\r\n      font-size: 2.5rem;\r\n      font-weight: 700;\r\n      color: var(--text-white);\r\n      text-decoration: none;\r\n      text-transform: uppercase;\r\n      letter-spacing: 0.05em;\r\n      transition: var(--transition-smooth);\r\n      transform: translateY(20px);\r\n    }\r\n\r\n    .mobile-nav-overlay.active a {\r\n      transform: translateY(0);\r\n      transition-delay: 0.1s;\r\n    }\r\n\r\n    .mobile-nav-overlay a:hover {\r\n      color: var(--brand-yellow);\r\n    }\r\n\r\n    .mobile-nav-overlay .cta-phone {\r\n      margin-top: 1rem;\r\n      transform: translateY(20px);\r\n      transition: var(--transition-smooth);\r\n    }\r\n\r\n    .mobile-nav-overlay.active .cta-phone {\r\n      transform: translateY(0);\r\n      transition-delay: 0.3s;\r\n    }\r\n\r\n    \/* Responsive & Mobile\/Tablet Deactivation of Scroll Engine *\/\r\n    @media (max-width: 1024px) {\r\n      \/* Hide the scroll-driven video, canvas, particles, and overlay *\/\r\n      #scroll-video-container,\r\n      #particles-canvas {\r\n        display: none !important;\r\n      }\r\n\r\n      \/* Static background image set on the hero section instead of wrapper *\/\r\n      .betonguru-wrapper {\r\n        position: relative !important;\r\n      }\r\n\r\n      \/* Kill the invisible scroll-spacer so there's no phantom scrolling *\/\r\n      #scroll-spacer {\r\n        display: none !important;\r\n      }\r\n\r\n      \/* Remove scrollbar hiding & enable native scrolling *\/\r\n      html::-webkit-scrollbar,\r\n      body::-webkit-scrollbar {\r\n        display: block !important;\r\n      }\r\n      html, body {\r\n        scrollbar-width: auto !important;\r\n        overflow: auto !important;\r\n      }\r\n\r\n      \/* Content wrapper: make it flow naturally, not fixed *\/\r\n      #content-wrapper {\r\n        position: relative !important;\r\n        height: auto !important;\r\n        overflow: visible !important;\r\n        pointer-events: auto !important;\r\n        transform: none !important;\r\n      }\r\n\r\n      \/* Each slide: position relative, flowing naturally, visible, no transforms *\/\r\n      .scroll-slide {\r\n        position: relative !important;\r\n        top: auto !important;\r\n        right: auto !important;\r\n        bottom: auto !important;\r\n        left: auto !important;\r\n        height: auto !important;\r\n        min-height: auto !important;\r\n        opacity: 1 !important;\r\n        transform: none !important;\r\n        pointer-events: auto !important;\r\n        display: block !important;\r\n        padding: 5rem 1rem 3rem !important;\r\n      }\r\n\r\n      .scroll-slide.hero-slide {\r\n        min-height: 100vh !important;\r\n        display: flex !important;\r\n        align-items: center !important;\r\n        justify-content: center !important;\r\n        padding-top: 6rem !important;\r\n        padding-bottom: 3rem !important;\r\n        background: linear-gradient(rgba(4, 5, 8, 0.45), rgba(4, 5, 8, 0.75)), url('https:\/\/bemutato.betonguru.hu\/wp-content\/uploads\/2026\/07\/bfc04062-86a2-40eb-9d71-435971111dfe.png') center center \/ cover no-repeat !important;\r\n      }\r\n\r\n      .slide-content {\r\n        opacity: 1 !important;\r\n        transform: none !important;\r\n        filter: none !important;\r\n        pointer-events: auto !important;\r\n      }\r\n\r\n      \/* Hero text sizing for mobile\/tablet *\/\r\n      .hero-slide h1 {\r\n        font-size: clamp(2rem, 8vw, 4.5rem) !important;\r\n        text-align: center !important;\r\n      }\r\n      .hero-slide .desc {\r\n        font-size: 1.1rem !important;\r\n        text-align: center !important;\r\n      }\r\n      .hero-slide .ctas {\r\n        justify-content: center !important;\r\n        flex-direction: column !important;\r\n        gap: 0.75rem !important;\r\n      }\r\n      .hero-slide .ctas .btn {\r\n        width: 100% !important;\r\n        justify-content: center !important;\r\n      }\r\n\r\n      \/* Content slides get a semi-transparent dark background for readability *\/\r\n      .scroll-slide:not(.hero-slide) {\r\n        background: rgba(4, 5, 8, 0.88) !important;\r\n      }\r\n\r\n      \/* Premium footer: relative, not absolute *\/\r\n      #premium-footer {\r\n        position: relative !important;\r\n        top: auto !important;\r\n      }\r\n\r\n      \/* Bounce arrow hidden *\/\r\n      .bounce-arrow {\r\n        display: none !important;\r\n      }\r\n\r\n      \/* Navigation menu mobile adaptation *\/\r\n      nav {\r\n        padding: 1.25rem 2rem;\r\n      }\r\n      nav.scrolled {\r\n        padding: 0.8rem 2rem;\r\n      }\r\n      nav .nav-links,\r\n      nav .cta-phone {\r\n        display: none;\r\n      }\r\n      .menu-toggle {\r\n        display: block;\r\n      }\r\n\r\n      \/* Grid structure for tablet screens *\/\r\n      .intro-grid,\r\n      .showcase-grid,\r\n      .quote-layout,\r\n      .contact-grid {\r\n        grid-template-columns: 1fr !important;\r\n        gap: 2.5rem !important;\r\n      }\r\n      .services-grid {\r\n        grid-template-columns: repeat(2, 1fr) !important;\r\n        gap: 2rem !important;\r\n      }\r\n      .guarantees-grid {\r\n        grid-template-columns: repeat(2, 1fr) !important;\r\n        gap: 2rem !important;\r\n      }\r\n      .projects-grid {\r\n        grid-template-columns: repeat(2, 1fr) !important;\r\n        gap: 1.5rem !important;\r\n      }\r\n      .project-card.wide {\r\n        grid-column: 1 \/ -1 !important;\r\n      }\r\n      .about-features {\r\n        grid-template-columns: repeat(4, 1fr) !important;\r\n        gap: 1rem !important;\r\n      }\r\n      .footer-top {\r\n        grid-template-columns: 1fr 1fr !important;\r\n        gap: 2.5rem !important;\r\n      }\r\n      .glass-panel {\r\n        padding: 3rem 2rem !important;\r\n      }\r\n      .intro-stats {\r\n        grid-template-columns: repeat(2, 1fr) !important;\r\n        gap: 1.5rem !important;\r\n      }\r\n      .footer-bottom {\r\n        flex-direction: row !important;\r\n        justify-content: space-between !important;\r\n        align-items: center !important;\r\n      }\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n      .contact-cards-row {\r\n        grid-template-columns: 1fr;\r\n        gap: 0.5rem;\r\n      }\r\n    }\r\n    \r\n    \r\n    .phone-cta-highlight {\r\n      display: flex !important;\r\n      flex-direction: column !important;\r\n      align-items: center !important;\r\n      justify-content: center !important;\r\n      background: var(--bg-panel) !important;\r\n      border: 1px solid rgba(255, 204, 0, 0.2) !important;\r\n      border-radius: 1rem !important;\r\n      padding: 1.5rem !important;\r\n      text-align: center !important;\r\n      margin-top: 1rem !important;\r\n      text-decoration: none !important;\r\n      color: var(--text-white) !important;\r\n      transition: var(--transition-smooth) !important;\r\n    }\r\n    .phone-cta-highlight:hover {\r\n      border-color: var(--brand-yellow) !important;\r\n      box-shadow: 0 0 15px rgba(255, 204, 0, 0.15) !important;\r\n      transform: translateY(-2px) !important;\r\n    }\r\n    .phone-cta-highlight div {\r\n      display: flex !important;\r\n      align-items: center !important;\r\n      gap: 0.5rem !important;\r\n      font-size: 0.9rem !important;\r\n      color: var(--text-gray) !important;\r\n      margin-bottom: 0.5rem !important;\r\n      text-decoration: none !important;\r\n    }\r\n    .phone-cta-highlight div i {\r\n      color: var(--brand-yellow) !important;\r\n      font-size: 1.1rem !important;\r\n    }\r\n    .phone-cta-highlight div span {\r\n      color: var(--text-gray) !important;\r\n      text-decoration: none !important;\r\n    }\r\n    .phone-cta-highlight .cta-label {\r\n      font-family: var(--font-headline) !important;\r\n      font-size: 1.6rem !important;\r\n      font-weight: 800 !important;\r\n      color: var(--brand-yellow) !important;\r\n      letter-spacing: 0.02em !important;\r\n      text-decoration: none !important;\r\n    }\r\n    .pulse-btn {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 0.5rem;\r\n      background: var(--brand-yellow);\r\n      color: #000;\r\n      font-family: var(--font-headline);\r\n      font-weight: 800;\r\n      font-size: 1.2rem;\r\n      padding: 0.85rem 2rem;\r\n      border-radius: 0.75rem;\r\n      text-decoration: none;\r\n      animation: pulseGlow 2s infinite;\r\n      box-shadow: 0 4px 15px rgba(255, 204, 0, 0.4);\r\n      text-transform: uppercase;\r\n    }\r\n    .pulse-btn i {\r\n      color: #000 !important;\r\n    }\r\n    @keyframes pulseGlow {\r\n      0% {\r\n        transform: scale(1);\r\n        box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.7);\r\n      }\r\n      70% {\r\n        transform: scale(1.05);\r\n        box-shadow: 0 0 0 15px rgba(255, 204, 0, 0);\r\n      }\r\n      100% {\r\n        transform: scale(1);\r\n        box-shadow: 0 0 0 0 rgba(255, 204, 0, 0);\r\n      }\r\n    }\r\n    .google-map-container {\r\n      position: relative;\r\n      border-radius: 1rem;\r\n      overflow: hidden;\r\n      border: 1px solid var(--border-light);\r\n      height: 250px;\r\n      margin-top: 1rem;\r\n    }\r\n    .google-map-container iframe {\r\n      width: 100%;\r\n      height: 100%;\r\n      border: 0;\r\n    }\r\n    .hero-phone-badge {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 0.5rem;\r\n      background: rgba(255, 204, 0, 0.15);\r\n      border: 1px solid rgba(255, 204, 0, 0.3);\r\n      padding: 0.5rem 1rem;\r\n      border-radius: 9999px;\r\n      color: var(--brand-yellow);\r\n      font-weight: 700;\r\n      font-size: 0.9rem;\r\n      margin-bottom: 1rem;\r\n      text-decoration: none;\r\n      transition: var(--transition-smooth);\r\n    }\r\n    .hero-phone-badge:hover {\r\n      background: var(--brand-yellow);\r\n      color: #000;\r\n      transform: scale(1.05);\r\n    }\r\n    .service-pillar-btn {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 0.5rem;\r\n      background: var(--brand-yellow);\r\n      color: #000;\r\n      font-family: var(--font-headline);\r\n      font-weight: 700;\r\n      font-size: 1rem;\r\n      padding: 0.6rem 1.5rem;\r\n      border-radius: 0.5rem;\r\n      text-decoration: none;\r\n      margin-top: auto;\r\n      transition: var(--transition-smooth);\r\n      text-transform: uppercase;\r\n      box-shadow: 0 4px 10px rgba(255, 204, 0, 0.15);\r\n    }\r\n    .service-pillar-btn:hover {\r\n      background: var(--brand-yellow-hover);\r\n      transform: translateY(-2px);\r\n      box-shadow: 0 6px 15px rgba(255, 204, 0, 0.3);\r\n    }\r\n\r\n    \/* ==========================================================================\r\n       MOBILE RESPONSIVE: Stacking columns, sizing adjustments for smaller screens\r\n       ========================================================================== *\/\r\n    @media (max-width: 768px) {\r\n      .scroll-slide {\r\n        padding: 4rem 1rem 2rem !important;\r\n      }\r\n\r\n      .glass-panel {\r\n        padding: 2rem 1.25rem !important;\r\n        border-radius: 1.25rem !important;\r\n      }\r\n\r\n      \/* Stack grids into 1 column for smaller mobile screens *\/\r\n      .services-grid,\r\n      .guarantees-grid,\r\n      .projects-grid,\r\n      .intro-stats,\r\n      .footer-top {\r\n        grid-template-columns: 1fr !important;\r\n        gap: 1.5rem !important;\r\n      }\r\n\r\n      .about-features {\r\n        grid-template-columns: repeat(2, 1fr) !important;\r\n        gap: 0.75rem !important;\r\n      }\r\n\r\n      .contact-cards-row {\r\n        grid-template-columns: 1fr !important;\r\n        gap: 0.5rem !important;\r\n      }\r\n\r\n      .form-row,\r\n      .form-row.split-custom {\r\n        grid-template-columns: 1fr !important;\r\n        gap: 0.75rem !important;\r\n      }\r\n\r\n      .project-card.wide {\r\n        grid-column: auto !important;\r\n      }\r\n\r\n      .footer-bottom {\r\n        flex-direction: column !important;\r\n        text-align: center !important;\r\n        gap: 1rem !important;\r\n      }\r\n\r\n      .fb-badges {\r\n        flex-wrap: wrap !important;\r\n        justify-content: center !important;\r\n      }\r\n\r\n      .section-title {\r\n        font-size: clamp(1.5rem, 6vw, 2.5rem) !important;\r\n      }\r\n\r\n      .poster-showcase {\r\n        border-radius: 1rem !important;\r\n      }\r\n\r\n      .stat-card {\r\n        padding: 1rem !important;\r\n      }\r\n      .stat-card .num {\r\n        font-size: 1.8rem !important;\r\n      }\r\n\r\n      .google-map-container {\r\n        border-radius: 0.75rem !important;\r\n      }\r\n      .google-map-container iframe {\r\n        height: 200px !important;\r\n      }\r\n\r\n      .pulse-btn {\r\n        font-size: 1rem !important;\r\n        padding: 0.75rem 1.5rem !important;\r\n      }\r\n\r\n      .calc-grid {\r\n        grid-template-columns: 1fr !important;\r\n      }\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n      .contact-cards-row {\r\n        grid-template-columns: 1fr !important;\r\n        gap: 0.5rem !important;\r\n      }\r\n    }\r\n\r\n    \/* Preloader Overlay *\/\r\n    #betonguru-preloader {\r\n      position: fixed;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      background-color: #040508;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      z-index: 999999;\r\n      opacity: 1;\r\n      transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.5s;\r\n      pointer-events: all;\r\n    }\r\n\r\n    #betonguru-preloader.fade-out {\r\n      opacity: 0;\r\n      visibility: hidden;\r\n      pointer-events: none;\r\n    }\r\n\r\n    .preloader-content {\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      gap: 2rem;\r\n      text-align: center;\r\n      max-width: 90%;\r\n    }\r\n\r\n    .preloader-logo-container {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 0.75rem;\r\n      animation: preloader-pulse 2s infinite ease-in-out;\r\n    }\r\n\r\n    .preloader-logo-img {\r\n      height: 60px;\r\n      width: auto;\r\n      object-fit: contain;\r\n    }\r\n\r\n    .preloader-logo-text {\r\n      font-family: var(--font-headline), sans-serif;\r\n      font-weight: 700;\r\n      font-size: 2.5rem;\r\n      color: var(--text-white, #ffffff);\r\n      letter-spacing: -0.02em;\r\n      text-transform: uppercase;\r\n      display: flex;\r\n      align-items: center;\r\n    }\r\n\r\n    .preloader-logo-text span {\r\n      color: var(--brand-yellow, #ffcc00);\r\n    }\r\n\r\n    .preloader-spinner-wrapper {\r\n      position: relative;\r\n      width: 60px;\r\n      height: 60px;\r\n    }\r\n\r\n    .preloader-spinner {\r\n      box-sizing: border-box;\r\n      width: 100%;\r\n      height: 100%;\r\n      border: 3px solid rgba(255, 255, 255, 0.05);\r\n      border-radius: 50%;\r\n      border-top-color: var(--brand-yellow, #ffcc00);\r\n      animation: preloader-spin 1s linear infinite;\r\n    }\r\n\r\n    .preloader-text {\r\n      font-size: 0.9rem;\r\n      color: rgba(255, 255, 255, 0.5);\r\n      text-transform: uppercase;\r\n      letter-spacing: 0.15em;\r\n      font-family: var(--font-headline), sans-serif;\r\n      margin-top: -0.5rem;\r\n    }\r\n\r\n    @keyframes preloader-spin {\r\n      to { transform: rotate(360deg); }\r\n    }\r\n\r\n    @keyframes preloader-pulse {\r\n      0%, 100% {\r\n        transform: scale(0.98);\r\n        opacity: 0.95;\r\n      }\r\n      50% {\r\n        transform: scale(1.02);\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n\t\t<\/style>\r\n\r\n\t\t<div class=\"betonguru-wrapper\">\r\n\r\n  <!-- Preloader Overlay -->\r\n  <div id=\"betonguru-preloader\">\r\n    <div class=\"preloader-content\">\r\n      <div class=\"preloader-logo-container\">\r\n        <img decoding=\"async\" src=\"https:\/\/bemutato.betonguru.hu\/wp-content\/themes\/betonguru-child-theme\/logo.png\" alt=\"Betonguru log\u00f3\" class=\"preloader-logo-img\" \/>\r\n      <\/div>\r\n      <div class=\"preloader-spinner-wrapper\">\r\n        <div class=\"preloader-spinner\"><\/div>\r\n      <\/div>\r\n      <div class=\"preloader-text\">Oldal bet\u00f6lt\u00e9se...<\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n\t\t\t<!-- Scroll Video Background Container -->\r\n  <div id=\"scroll-video-container\">\r\n    <canvas id=\"video-canvas\"><\/canvas>\r\n    <video id=\"video-source\" autoplay muted playsinline preload=\"none\" \r\n      style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.02; pointer-events: none; z-index: -20;\"\r\n      data-src=\"https:\/\/bemutato.betonguru.hu\/wp-content\/themes\/betonguru-child-theme\/Concrete_mixer_truck_rotating_drum_202606240930.mp4\"\r\n    ><\/video>\r\n    <div class=\"overlay\"><\/div>\r\n  <\/div>\r\n\r\n  <!-- Custom Particles System -->\r\n  <canvas id=\"particles-canvas\"><\/canvas>\r\n\r\n  <!-- Navigation Bar -->\r\n  <nav id=\"navbar\">\r\n    <a href=\"#\" class=\"logo-container\">\r\n      <img decoding=\"async\" src=\"https:\/\/bemutato.betonguru.hu\/wp-content\/themes\/betonguru-child-theme\/logo.png\" alt=\"Betonguru log\u00f3\" class=\"logo-img\" \/>\r\n      <span class=\"logo-text\">BETON<span>GURU<\/span><\/span>\r\n    <\/a>\r\n    <div class=\"nav-links\">\r\n      <a href=\"#hero-slide\">Kezd\u0151lap<\/a>\r\n      <a href=\"#intro-slide\">R\u00f3lunk<\/a>\r\n      <a href=\"#services-slide\">Szolg\u00e1ltat\u00e1sok<\/a>\r\n      <a href=\"#calc-slide\">Kalkul\u00e1tor<\/a>\r\n      <a href=\"#projects-slide\">Projektek<\/a>\r\n      <a href=\"#showcase-slide\">Min\u0151s\u00e9g<\/a>\r\n      <a href=\"#contact-slide\">Kapcsolat<\/a>\r\n    <\/div>\r\n    <a href=\"tel:+36205154342\" class=\"cta-phone\">\r\n      <i class=\"fa-solid fa-phone\"><\/i>\r\n      <span>+36 20 515 4342<\/span>\r\n    <\/a>\r\n    <button class=\"menu-toggle\" id=\"menu-btn\" aria-label=\"Men\u00fc megnyit\u00e1sa\">\r\n      <i class=\"fa-solid fa-bars\"><\/i>\r\n    <\/button>\r\n  <\/nav>\r\n\r\n  <!-- Mobile Drawer Overlay Menu -->\r\n  <div class=\"mobile-nav-overlay\" id=\"mobile-menu\">\r\n    <a href=\"#hero-slide\" class=\"mobile-link\">Kezd\u0151lap<\/a>\r\n    <a href=\"#intro-slide\" class=\"mobile-link\">R\u00f3lunk<\/a>\r\n    <a href=\"#services-slide\" class=\"mobile-link\">Szolg\u00e1ltat\u00e1sok<\/a>\r\n    <a href=\"#calc-slide\" class=\"mobile-link\">Kalkul\u00e1tor<\/a>\r\n    <a href=\"#projects-slide\" class=\"mobile-link\">Projektek<\/a>\r\n    <a href=\"#showcase-slide\" class=\"mobile-link\">Min\u0151s\u00e9g<\/a>\r\n    <a href=\"#guarantees-slide\" class=\"mobile-link\">Garanci\u00e1k<\/a>\r\n    <a href=\"#contact-slide\" class=\"mobile-link\">Kapcsolat<\/a>\r\n    <a href=\"tel:+36205154342\" class=\"cta-phone mobile-link\">\r\n      <i class=\"fa-solid fa-phone\"><\/i>\r\n      <span>+36 20 515 4342<\/span>\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <!-- Main Website Content Wrapper -->\r\n  <div id=\"content-wrapper\">\r\n\r\n    <!-- Slide 1: Hero Section -->\r\n    <section class=\"scroll-slide hero-slide\" id=\"hero-slide\">\r\n      <div class=\"slide-content\" style=\"opacity: 1; transform: translateY(0); filter: blur(0);\">\r\n        <p class=\"subtitle\">A biztos alapok szak\u00e9rt\u0151je<\/p>\r\n        <h1>\r\n          Megnyitott <br\/>\r\n          <span class=\"outline\">Gy\u0151r\u00fajbar\u00e1t<\/span> <br\/>\r\n          <span class=\"highlight\">\u00daj Beton\u00fczeme!<\/span>\r\n        <\/h1>\r\n        <p class=\"desc\">\r\n          Min\u0151s\u00e9gi transzportbeton k\u00f6zvetlen\u00fcl a gy\u00e1rt\u00f3t\u00f3l, professzion\u00e1lis betonpump\u00e1l\u00e1s \u00e9s gyors kisz\u00e1ll\u00edt\u00e1s saj\u00e1t, modern g\u00e9pparkunkkal.        <\/p>\r\n        <div class=\"ctas\">\r\n          <a href=\"#contact-slide\" class=\"btn btn-primary\">\r\n            <i class=\"fa-solid fa-file-invoice\"><\/i> Aj\u00e1nlatot k\u00e9rek          <\/a>\r\n          <a href=\"#services-slide\" class=\"btn btn-secondary\">\r\n            <i class=\"fa-solid fa-circle-info\"><\/i> Szolg\u00e1ltat\u00e1saink          <\/a>\r\n        <\/div>\r\n      <\/div>\r\n      <a href=\"#intro-slide\" class=\"bounce-arrow\">\r\n        <span>G\u00f6rgessen a r\u00e9szletek\u00e9rt<\/span>\r\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke=\"currentColor\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\"\/>\r\n        <\/svg>\r\n      <\/a>\r\n    <\/section>\r\n\r\n    <!-- Slide 2: Intro -->\r\n    <section class=\"scroll-slide\" id=\"intro-slide\">\r\n      <div class=\"slide-content\">\r\n        <div class=\"glass-panel intro-grid\">\r\n          <div class=\"intro-text\">\r\n            <h2>A biztos alapok <span>szak\u00e9rt\u0151je!<\/span><\/h2>\r\n                        <p>\r\n              Gy\u0151r\u00fajbar\u00e1ti beton\u00fczem\u00fcnk a legmodernebb sv\u00e1jci technol\u00f3gi\u00e1val, egy Ammann Elba CBT 60 SL t\u00edpus\u00fa pr\u00e9mium, teljesen automatiz\u00e1lt, sz\u00e1m\u00edt\u00f3g\u00e9p-vez\u00e9relt rendszerrel gy\u00e1rtja a transzportbetont. A digit\u00e1lis m\u00e9rlegrendszer grammra pontosan adagolja a cementet, a vizet, a kavicsot \u00e9s az adal\u00e9kszereket, kik\u00fcsz\u00f6b\u00f6lve az emberi mulaszt\u00e1st. A nagyteljes\u00edtm\u00e9ny\u0171 k\u00e9nyszerkever\u0151 homog\u00e9n, csom\u00f3mentes betonszerkezetet biztos\u00edt, mik\u00f6zben az \u00f3r\u00e1nk\u00e9nti ak\u00e1r 60 m\u00b3-es kapacit\u00e1s z\u00f6kken\u0151mentes \u00e9s v\u00e1rakoz\u00e1smentes kiszolg\u00e1l\u00e1st garant\u00e1l a nagyobb projektekn\u00e9l is.            <\/p>\r\n            <p>\r\n              M\u00e1sik f\u0151 szolg\u00e1ltat\u00e1si oszlopunk a lakoss\u00e1gi \u00e9s v\u00e1llalati kont\u00e9neres hullad\u00e9ksz\u00e1ll\u00edt\u00e1s, amelyet a gy\u0151r\u00fajbar\u00e1ti telephely\u00fcnkt\u0151l sz\u00e1m\u00edtott legfeljebb 20 km-es k\u00f6rzetben v\u00e9gz\u00fcnk. Saj\u00e1t, modern j\u00e1rm\u0171parkunkkal \u00e9s kont\u00e9nereinkkel \u00e9p\u00edt\u00e9si t\u00f6rmel\u00e9k, lom \u00e9s egy\u00e9b hullad\u00e9k elsz\u00e1ll\u00edt\u00e1s\u00e1t biztos\u00edtjuk. Kiemelt figyelmet ford\u00edtunk a k\u00f6rnyezettudatoss\u00e1gra, a tiszta technol\u00f3gi\u00e1ra \u00e9s a megbesz\u00e9lt sz\u00e1ll\u00edt\u00e1si hat\u00e1rid\u0151k prec\u00edz betart\u00e1s\u00e1ra.            <\/p>\r\n            <a href=\"#services-slide\" id=\"intro-cta-btn\" class=\"btn btn-primary\" style=\"margin-top: 1rem;\">Ismerje meg k\u00edn\u00e1latunkat<\/a>\r\n          <\/div>\r\n          <div class=\"intro-stats\">\r\n                                                          <div class=\"stat-card\">\r\n                  <div class=\"num\"><i class=\"fa-solid fa-truck-monster\"><\/i><\/div>\r\n                  <div class=\"label\">Saj\u00e1t g\u00e9ppark<\/div>\r\n                <\/div>\r\n                                              <div class=\"stat-card\">\r\n                  <div class=\"num\">500+<\/div>\r\n                  <div class=\"label\">Sikeres projekt<\/div>\r\n                <\/div>\r\n                                              <div class=\"stat-card\">\r\n                  <div class=\"num\">24h<\/div>\r\n                  <div class=\"label\">Gyors kiszolg\u00e1l\u00e1s<\/div>\r\n                <\/div>\r\n                                              <div class=\"stat-card\">\r\n                  <div class=\"num\">100%<\/div>\r\n                  <div class=\"label\">Min\u0151s\u00e9gi garancia<\/div>\r\n                <\/div>\r\n                                    <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- Slide 3: Services Grid (6 cards) -->\r\n    <section class=\"scroll-slide services-slide\" id=\"services-slide\">\r\n      <div class=\"slide-content\">\r\n        <div class=\"section-header\">\r\n          <p>Miben seg\u00edthet\u00fcnk?<\/p>\r\n          <h2>Szolg\u00e1ltat\u00e1saink<\/h2>\r\n        <\/div>\r\n        <div class=\"services-grid\" style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); max-width: 70rem; margin: 0 auto; gap: 1.5rem;\">\r\n                        <div class=\"service-card\" style=\"display: flex; flex-direction: column; height: 100%;\">\r\n                <div class=\"icon-box\"><i class=\"fa-solid fa-industry\"><\/i><\/div>\r\n                <h3>Betongy\u00e1rt\u00e1s<\/h3>\r\n                <p>Saj\u00e1t kever\u0151telep\u00fcnkr\u0151l biztos\u00edtjuk a legmagasabb min\u0151s\u00e9g\u0171 betont, folyamatos laborat\u00f3riumi kontroll mellett.<\/p>\r\n                                  <ul class=\"features-list\" style=\"margin-bottom: 1.5rem;\">\r\n                    <li><i class=\"fa-solid fa-check\"><\/i> Gy\u0151r\u00fajbar\u00e1t, P\u00e1ndzsa u. 6.<\/li><li><i class=\"fa-solid fa-check\"><\/i> Prec\u00edz kever\u00e9si ar\u00e1nyok<\/li>                  <\/ul>\r\n                                \r\n                <a href=\"https:\/\/bemutato.betonguru.hu\/index.php\/beton\/\" class=\"service-pillar-btn\" style=\"margin-top: auto;\">Tov\u00e1bbi inform\u00e1ci\u00f3<\/a>              <\/div>\r\n          \r\n                      <div class=\"service-card\" style=\"display: flex; flex-direction: column; height: 100%;\">\r\n              <div class=\"icon-box\"><i class=\"fa-solid fa-recycle\"><\/i><\/div>\r\n              <h3>Hullad\u00e9ksz\u00e1ll\u00edt\u00e1s<\/h3>\r\n              <p>K\u00f6rnyezetbar\u00e1t hullad\u00e9ksz\u00e1ll\u00edt\u00e1s, \u00e9p\u00edt\u00e9si t\u00f6rmel\u00e9k, lom \u00e9s z\u00f6ldhullad\u00e9k elsz\u00e1ll\u00edt\u00e1sa, kont\u00e9ner lehelyez\u00e9s 20 km-es k\u00f6rzetben.<\/p>\r\n              <ul class=\"features-list\" style=\"margin-bottom: 1.5rem;\">\r\n                <li><i class=\"fa-solid fa-check\"><\/i> Rugalmas kont\u00e9ner lehelyez\u00e9s<\/li>\r\n                <li><i class=\"fa-solid fa-check\"><\/i> Min\u0151s\u00edtett hullad\u00e9kkezel\u00e9s<\/li>\r\n              <\/ul>\r\n              <a href=\"https:\/\/bemutato.betonguru.hu\/index.php\/hulladekszallitas\/\" class=\"service-pillar-btn\" style=\"margin-top: auto;\">Tov\u00e1bbi inform\u00e1ci\u00f3<\/a>\r\n            <\/div>\r\n                  <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- Slide 4: Poster Showcase & Values -->\r\n    <section class=\"scroll-slide\" id=\"showcase-slide\">\r\n      <div class=\"slide-content\">\r\n        <div class=\"glass-panel showcase-grid\">\r\n          <!-- Left: Image Poster Mockup -->\r\n          <div class=\"poster-showcase\">\r\n                        <img decoding=\"async\" src=\"https:\/\/bemutato.betonguru.hu\/wp-content\/uploads\/2026\/06\/IMG_3655.jpg\" alt=\"Betonguru Gy\u0151r\u00fajbar\u00e1t Plak\u00e1t\" class=\"poster-img\" \/>\r\n          <\/div>\r\n\r\n          <!-- Right: Core value list -->\r\n          <div class=\"value-list-container\">\r\n            <h2>Mi\u00e9rt v\u00e1lassza a <span>Betongurut?<\/span><\/h2>\r\n            <div class=\"value-list\">\r\n                                          <div class=\"value-item\">\r\n                  <div class=\"icon\"><i class=\"fa-solid fa-certificate\"><\/i><\/div>\r\n                  <div class=\"details\">\r\n                    <h4>Min\u0151s\u00e9gi beton k\u00f6zvetlen\u00fcl a gy\u00e1rt\u00f3t\u00f3l<\/h4>\r\n                    <p>Minden k\u00f6bm\u00e9ter betonunk szigor\u00fa laborvizsg\u00e1latokon esik \u00e1t \u00e9s tan\u00fas\u00edtv\u00e1nnyal rendelkezik.<\/p>\r\n                  <\/div>\r\n                <\/div>\r\n                              <div class=\"value-item\">\r\n                  <div class=\"icon\"><i class=\"fa-solid fa-gears\"><\/i><\/div>\r\n                  <div class=\"details\">\r\n                    <h4>Saj\u00e1t g\u00e9ppark \u00e9s beton\u00fczem<\/h4>\r\n                    <p>Mivel a gy\u00e1rt\u00e1st \u00e9s a logisztik\u00e1t is saj\u00e1t k\u00e9zben tartjuk, nem vagyunk kiszolg\u00e1ltatva alv\u00e1llalkoz\u00f3knak.<\/p>\r\n                  <\/div>\r\n                <\/div>\r\n                              <div class=\"value-item\">\r\n                  <div class=\"icon\"><i class=\"fa-solid fa-users\"><\/i><\/div>\r\n                  <div class=\"details\">\r\n                    <h4>Lakoss\u00e1gi \u00e9s c\u00e9ges megrendel\u00e9sek<\/h4>\r\n                    <p>Egyar\u00e1nt kiszolg\u00e1lunk kisebb lakoss\u00e1gi munk\u00e1kat \u00e9s nagyobb volumen\u0171 v\u00e1llalkoz\u00f3i megrendel\u00e9seket is.<\/p>\r\n                  <\/div>\r\n                <\/div>\r\n                              <div class=\"value-item\">\r\n                  <div class=\"icon\"><i class=\"fa-solid fa-leaf\"><\/i><\/div>\r\n                  <div class=\"details\">\r\n                    <h4>K\u00f6rnyezettudatos megold\u00e1sok<\/h4>\r\n                    <p>Z\u00e1rt rendszer\u0171 gy\u00e1rt\u00e1s \u00e9s igazolt hullad\u00e9kkezel\u00e9s a minim\u00e1lis \u00f6kol\u00f3giai l\u00e1bnyom\u00e9rt.<\/p>\r\n                  <\/div>\r\n                <\/div>\r\n                                    <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- Slide 5: Projects \/ Referenci\u00e1k -->\r\n    <section class=\"scroll-slide\" id=\"projects-slide\">\r\n      <div class=\"slide-content\">\r\n        <div class=\"section-label\">Kiemelt referenci\u00e1ink<\/div>\r\n        <h2 class=\"section-title\" style=\"margin-bottom: 2rem;\">Projektjeink<\/h2>\r\n        <div class=\"projects-grid\">\r\n                    <div class=\"project-card\">\r\n                        <img decoding=\"async\" src=\"https:\/\/bemutato.betonguru.hu\/wp-content\/uploads\/2026\/06\/Gemini_Generated_Image_vb4uzfvb4uzfvb4u-scaled.png\" alt=\"Lak\u00f3park Alapoz\u00e1s\" \/>\r\n                        <div class=\"project-overlay\">\r\n              <span class=\"project-type\">T\u00edpus: Alapoz\u00e1s<\/span>\r\n              <h3>Lak\u00f3park Alapoz\u00e1s<\/h3>\r\n              <span class=\"project-location\"><i class=\"fa-solid fa-location-dot\"><\/i> Gy\u0151r, R\u00f3mai \u00fat, 9027<\/span>\r\n            <\/div>\r\n                        <div class=\"project-badge\">\r\n              <div class=\"badge-label\">Volume<\/div>\r\n              <div class=\"badge-value\">12,500 m\u00b3<\/div>\r\n            <\/div>\r\n                      <\/div>\r\n                    <div class=\"project-card\">\r\n                        <img decoding=\"async\" src=\"https:\/\/bemutato.betonguru.hu\/wp-content\/uploads\/2026\/06\/Gemini_Generated_Image_6hnz286hnz286hnz.png\" alt=\"Ipari Csarnok\" \/>\r\n                        <div class=\"project-overlay\">\r\n              <span class=\"project-type\">T\u00edpus: Burkolat<\/span>\r\n              <h3>Ipari Csarnok<\/h3>\r\n              <span class=\"project-location\"><i class=\"fa-solid fa-location-dot\"><\/i> Gy\u0151r, Gesztenyefa \u00fat 4, 9027<\/span>\r\n            <\/div>\r\n                        <div class=\"project-badge\">\r\n              <div class=\"badge-label\">Ter\u00fclet<\/div>\r\n              <div class=\"badge-value\">60,000 m\u00b2<\/div>\r\n            <\/div>\r\n                      <\/div>\r\n                    <div class=\"project-card wide\">\r\n                        <img decoding=\"async\" src=\"https:\/\/bemutato.betonguru.hu\/wp-content\/uploads\/2026\/06\/Gemini_Generated_Image_xqzqtwxqzqtwxqzq-scaled.png\" alt=\"M85 Fel\u00fclj\u00e1r\u00f3 Rekonstrukci\u00f3\" \/>\r\n                        <div class=\"project-overlay\">\r\n              <span class=\"project-type\">T\u00edpus: Szerkezet \u00b7 9 h\u00f3nap \u00b7 C30\/37 XF3<\/span>\r\n              <h3>M85 Fel\u00fclj\u00e1r\u00f3 Rekonstrukci\u00f3<\/h3>\r\n              <span class=\"project-location\"><i class=\"fa-solid fa-location-dot\"><\/i> Gy\u0151r t\u00e9rs\u00e9ge<\/span>\r\n            <\/div>\r\n                      <\/div>\r\n                  <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- Slide 6: Guarantees -->\r\n    <section class=\"scroll-slide\" id=\"guarantees-slide\">\r\n      <div class=\"slide-content\">\r\n        <div style=\"text-align: center; margin-bottom: 2.5rem;\">\r\n          <div class=\"section-label\" style=\"justify-content: center;\">Megb\u00edzhat\u00f3s\u00e1g<\/div>\r\n          <h2 class=\"section-title\">Garanci\u00e1ink<\/h2>\r\n        <\/div>\r\n        <div class=\"guarantees-grid\">\r\n                                          <div class=\"guarantee-card\">\r\n                  <div class=\"g-icon\"><i class=\"fa-solid fa-clock\"><\/i><\/div>\r\n                  <h3>Pontos Sz\u00e1ll\u00edt\u00e1s<\/h3>\r\n                  <p>Garant\u00e1ljuk a megbesz\u00e9lt id\u0151ablakban t\u00f6rt\u00e9n\u0151 \u00e9rkez\u00e9st, minimaliz\u00e1lva a holtid\u0151t az \u00e9p\u00edtkez\u00e9sen. GPS-k\u00f6vet\u00e9ssel felszerelt flotta biztos\u00edtja a val\u00f3s idej\u0171 nyomon k\u00f6vet\u00e9st.<\/p>\r\n                <\/div>\r\n                              <div class=\"guarantee-card\">\r\n                  <div class=\"g-icon\"><i class=\"fa-solid fa-flask-vial\"><\/i><\/div>\r\n                  <h3>Min\u0151s\u00e9g-ellen\u0151rz\u00e9s<\/h3>\r\n                  <p>Minden betonadag szigor\u00fa laborat\u00f3riumi vizsg\u00e1laton esik \u00e1t a szabv\u00e1nyok marad\u00e9ktalan betart\u00e1sa \u00e9rdek\u00e9ben. Nyom\u00f3szil\u00e1rds\u00e1g: 45.2 MPa, Slump Test: 125 mm.<\/p>\r\n                <\/div>\r\n                              <div class=\"guarantee-card\">\r\n                  <div class=\"g-icon\"><i class=\"fa-solid fa-seedling\"><\/i><\/div>\r\n                  <h3>K\u00f6rnyezettudatoss\u00e1g<\/h3>\r\n                  <p>Z\u00e1rt rendszer\u0171 gy\u00e1rt\u00e1s \u00e9s igazolt hullad\u00e9kkezel\u00e9s a minim\u00e1lis \u00f6kol\u00f3giai l\u00e1bnyom\u00e9rt. K\u00f6rnyezetbar\u00e1t alapanyagok \u00e9s \u00fajrahasznos\u00edt\u00e1si folyamatok.<\/p>\r\n                <\/div>\r\n                                    <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- Slide 7: Quote & About -->\r\n    <section class=\"scroll-slide\" id=\"about-slide\">\r\n      <div class=\"slide-content\">\r\n        <div class=\"glass-panel quote-layout\">\r\n          <div>\r\n            <div class=\"quote-box\">\r\n              <blockquote>\r\n                \u201eAmit meg\u00edg\u00e9r\u00fcnk, azt teljes\u00edtj\u00fck \u2013 pontosan, id\u0151re, becs\u00fclettel.&quot;              <\/blockquote>\r\n              <div class=\"quote-author\">\r\n                <div class=\"author-avatar\"><i class=\"fa-solid fa-hard-hat\"><\/i><\/div>\r\n                <div>\r\n                  <div class=\"author-name\">Betonguru Alap\u00edt\u00f3i Csapat<\/div>\r\n                  <div class=\"author-title\">SAJ\u00c1T FLOTTA \u00b7 SV\u00c1JCI TECHNOL\u00d3GIA<\/div>\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n            <p style=\"color: var(--text-gray); margin-top: 1.5rem; font-size: 0.95rem; line-height: 1.6;\">\r\n              A Betongurun\u00e1l a megb\u00edzhat\u00f3s\u00e1g a m\u0171k\u00f6d\u00e9s\u00fcnk alapja. Saj\u00e1t sz\u00e1ll\u00edt\u00f3i flott\u00e1nkkal, sv\u00e1jci technol\u00f3gi\u00e1val gy\u00e1rtott term\u00e9keinkkel \u00e9s pontos logisztik\u00e1nkkal biztos\u00edtjuk, hogy partnereink minden projektj\u00fckh\u00f6z id\u0151ben, kifog\u00e1stalan min\u0151s\u00e9g\u0171 \u00e9p\u00edt\u0151anyaghoz jussanak.            <\/p>\r\n          <\/div>\r\n          <div class=\"about-features\">\r\n                                          <div class=\"about-feature-card\">\r\n                  <i class=\"fa-solid fa-award\"><\/i>\r\n                  <div class=\"af-title\">Garant\u00e1lt<br \/>\nmin\u0151s\u00e9g<\/div>\r\n                <\/div>\r\n                              <div class=\"about-feature-card\">\r\n                  <i class=\"fa-solid fa-shipping-fast\"><\/i>\r\n                  <div class=\"af-title\">Pontos<br \/>\nsz\u00e1ll\u00edt\u00e1s<\/div>\r\n                <\/div>\r\n                              <div class=\"about-feature-card\">\r\n                  <i class=\"fa-solid fa-hand-holding-dollar\"><\/i>\r\n                  <div class=\"af-title\">Korrekt<br \/>\n\u00e1raz\u00e1s<\/div>\r\n                <\/div>\r\n                              <div class=\"about-feature-card\">\r\n                  <i class=\"fa-solid fa-headset\"><\/i>\r\n                  <div class=\"af-title\">Szak\u00e9rt\u0151<br \/>\nt\u00e1mogat\u00e1s<\/div>\r\n                <\/div>\r\n                                    <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- Slide 8: Concrete Volume Calculator -->\r\n    <section class=\"scroll-slide\" id=\"calc-slide\">\r\n      <div class=\"slide-content\">\r\n        <div class=\"glass-panel contact-grid\">\r\n          <!-- Left Column: Info & Tips -->\r\n          <div class=\"contact-column\">\r\n            <div class=\"contact-heading-group\">\r\n              <h2 class=\"contact-heading\">Beton <span>Kalkul\u00e1tor<\/span><\/h2>\r\n              <p class=\"contact-sub\">Sz\u00e1molja ki a sz\u00fcks\u00e9ges betonmennyis\u00e9get egyszer\u0171en!<\/p>\r\n            <\/div>\r\n            \r\n            <div style=\"color: var(--text-gray); font-size: 0.95rem; line-height: 1.6; display: flex; flex-direction: column; gap: 1.25rem;\">\r\n              <p>\r\n                Adja meg a tervezett betonszerkezet m\u00e9reteit (hossz\u00fas\u00e1g, sz\u00e9less\u00e9g, vastags\u00e1g m\u00e9terben), v\u00e1lassza ki a sz\u00fcks\u00e9ges betonmin\u0151s\u00e9get, \u00e9s rendszer\u00fcnk azonnal kisz\u00e1m\u00edtja az elm\u00e9leti k\u00f6bm\u00e9ter mennyis\u00e9get.\r\n              <\/p>\r\n              <p>\r\n                <strong style=\"color: var(--brand-yellow); font-weight: 600;\">Gyakorlati tan\u00e1cs:<\/strong> Rendel\u00e9sn\u00e9l javasolt 5-10% r\u00e1hagy\u00e1ssal (t\u00f6m\u00f6r\u00f6d\u00e9si t\u00e9nyez\u0151 \u00e9s sz\u00f3r\u00f3d\u00e1s miatt) sz\u00e1molni, hogy biztosan elegend\u0151 legyen a mennyis\u00e9g a bedolgoz\u00e1s sor\u00e1n.\r\n              <\/p>\r\n              <p>\r\n                A gomb megnyom\u00e1s\u00e1val a kalkul\u00e1lt adatokat k\u00f6zvetlen\u00fcl elk\u00fcldheti nek\u00fcnk e-mailben, \u00edgy azonnal megkezdhetj\u00fck a szem\u00e9lyre szabott \u00e1raj\u00e1nlat \u00f6ssze\u00e1ll\u00edt\u00e1s\u00e1t!\r\n              <\/p>\r\n            <\/div>\r\n            \r\n            <!-- Highlighted Pulsing Phone Button as a CTA alternative on calculator page -->\r\n            <a href=\"tel:+36205154342\" class=\"phone-cta-highlight\" style=\"margin-top: 1rem;\">\r\n              <div>\r\n                <i class=\"fa-solid fa-phone-volume\"><\/i>\r\n                <span>Ink\u00e1bb telefonon k\u00e9rne aj\u00e1nlatot?<\/span>\r\n              <\/div>\r\n              <span class=\"cta-label\">06 20 515 4342<\/span>\r\n            <\/a>\r\n          <\/div>\r\n          \r\n          <!-- Right Column: Calculator Inputs & Result -->\r\n          <div class=\"contact-column\" style=\"justify-content: center;\">\r\n            <div class=\"calc-container\" style=\"background: rgba(255,255,255,0.01); border: 1px solid var(--border-light); padding: 1.75rem; border-radius: 1rem; width: 100%;\">\r\n              <h3 class=\"calc-title\" style=\"margin-bottom: 1.25rem; font-size: 1.2rem; color: var(--text-white); font-weight: 600;\"><i class=\"fa-solid fa-calculator\" style=\"color: var(--brand-yellow); margin-right: 0.5rem;\"><\/i> M\u00e9retek megad\u00e1sa<\/h3>\r\n              \r\n              <div class=\"calc-inputs\" style=\"display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem;\">\r\n                <div class=\"input-group\">\r\n                  <label for=\"calc-length\" style=\"display: block; font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.4rem;\">Hossz\u00fas\u00e1g (m)<\/label>\r\n                  <input type=\"number\" id=\"calc-length\" placeholder=\"pl. 10\" step=\"0.1\" min=\"0\" style=\"width: 100%; padding: 0.65rem; border-radius: 0.4rem; background: #0c101b; color: white; border: 1px solid var(--border-light); font-size: 0.9rem;\" \/>\r\n                <\/div>\r\n                <div class=\"input-group\">\r\n                  <label for=\"calc-width\" style=\"display: block; font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.4rem;\">Sz\u00e9less\u00e9g (m)<\/label>\r\n                  <input type=\"number\" id=\"calc-width\" placeholder=\"pl. 5\" step=\"0.1\" min=\"0\" style=\"width: 100%; padding: 0.65rem; border-radius: 0.4rem; background: #0c101b; color: white; border: 1px solid var(--border-light); font-size: 0.9rem;\" \/>\r\n                <\/div>\r\n                <div class=\"input-group\">\r\n                  <label for=\"calc-depth\" style=\"display: block; font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.4rem;\">Vastags\u00e1g (m)<\/label>\r\n                  <input type=\"number\" id=\"calc-depth\" placeholder=\"pl. 0.15\" step=\"0.01\" min=\"0\" style=\"width: 100%; padding: 0.65rem; border-radius: 0.4rem; background: #0c101b; color: white; border: 1px solid var(--border-light); font-size: 0.9rem;\" \/>\r\n                <\/div>\r\n              <\/div>\r\n\r\n              <!-- Quality & Segment -->\r\n              <div class=\"calc-inputs\" style=\"display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 0.75rem; margin-top: 1rem;\">\r\n                <div class=\"input-group\">\r\n                  <label for=\"calc-quality\" style=\"display: block; font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.4rem;\">Beton min\u0151s\u00e9g<\/label>\r\n                  <select id=\"calc-quality\" style=\"background: #0c101b; border: 1px solid var(--border-light); border-radius: 0.4rem; color: var(--text-white); padding: 0.65rem; font-size: 0.85rem; width: 100%;\">\r\n                    <option value=\"C8\/10\">C8\/10 (Szerel\u0151beton)<\/option>\r\n                    <option value=\"C12\/15\">C12\/15 (Alap, ker\u00edt\u00e9s)<\/option>\r\n                    <option value=\"C16\/20\" selected>C16\/20 (F\u00f6d\u00e9m, s\u00e1vkatalap)<\/option>\r\n                    <option value=\"C20\/25\">C20\/25 (Teherhord\u00f3 szerkezet)<\/option>\r\n                    <option value=\"C25\/30\">C25\/30 (K\u00fcl\u00f6nleges teherb\u00edr\u00e1s)<\/option>\r\n                    <option value=\"C30\/37\">C30\/37 (Ipari burkolat)<\/option>\r\n                  <\/select>\r\n                <\/div>\r\n                <div class=\"input-group\">\r\n                  <label for=\"calc-segment\" style=\"display: block; font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.4rem;\">Megrendel\u0151<\/label>\r\n                  <select id=\"calc-segment\" style=\"background: #0c101b; border: 1px solid var(--border-light); border-radius: 0.4rem; color: var(--text-white); padding: 0.65rem; font-size: 0.85rem; width: 100%;\">\r\n                    <option value=\"Lakoss\u00e1g\">Lakoss\u00e1g<\/option>\r\n                    <option value=\"C\u00e9g\">C\u00e9gek<\/option>\r\n                  <\/select>\r\n                <\/div>\r\n              <\/div>\r\n\r\n              <div class=\"result-display\" style=\"background: rgba(255, 204, 0, 0.05); border: 1px solid rgba(255, 204, 0, 0.2); padding: 1.25rem; border-radius: 0.75rem; display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; margin-bottom: 1rem;\">\r\n                <span class=\"label\" style=\"font-size: 0.95rem; color: var(--text-gray); font-weight: 500;\">Sz\u00fcks\u00e9ges mennyis\u00e9g:<\/span>\r\n                <span class=\"value\" id=\"calc-result\" style=\"font-size: 1.6rem; color: var(--brand-yellow); font-weight: 800;\">0.00 m\u00b3<\/span>\r\n              <\/div>\r\n              \r\n              <p style=\"font-size: 0.75rem; color: var(--text-muted); margin-bottom: 1.25rem; text-align: center; font-style: italic; line-height: 1.4;\">\r\n                * A kalkul\u00e1lt mennyis\u00e9g elm\u00e9leti \u00e9rt\u00e9k. Val\u00f3s rendel\u00e9shez k\u00e9rje munkat\u00e1rsunk meger\u0151s\u00edt\u00e9s\u00e9t.\r\n              <\/p>\r\n\r\n              <button class=\"btn btn-primary\" style=\"width: 100%; border-radius: 0.65rem; padding: 0.75rem 1.5rem; display: flex; justify-content: center; align-items: center; gap: 0.5rem;\" id=\"calc-share-btn\">\r\n                <i class=\"fa-solid fa-envelope\" style=\"font-size: 1.1rem;\"><\/i> Aj\u00e1nlatk\u00e9r\u00e9s e-mailben\r\n              <\/button>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- Slide 9: Contact -->\r\n    <section class=\"scroll-slide\" id=\"contact-slide\">\r\n      <div class=\"slide-content\">\r\n        <div class=\"glass-panel contact-grid\">\r\n          \r\n          <!-- Left Column: Contact details + Map -->\r\n          <div class=\"contact-column\">\r\n            <div class=\"contact-heading-group\">\r\n              <h2 class=\"contact-heading\">Kapcsolatfelv\u00e9tel <span>Gy\u0151r\u00fajbar\u00e1t<\/span><\/h2>\r\n              <p class=\"contact-sub\">Keresse koll\u00e9g\u00e1inkat k\u00f6zvetlen\u00fcl, vagy l\u00e1togasson el \u00fczem\u00fcnkbe!<\/p>\r\n            <\/div>\r\n\r\n            <!-- Compact contact cards -->\r\n            <div class=\"contact-cards-row\">\r\n              <div class=\"info-card-mini\">\r\n                <div class=\"ic-icon\"><i class=\"fa-solid fa-location-dot\"><\/i><\/div>\r\n                <div class=\"ic-label\">Beton\u00fczem<\/div>\r\n                <div class=\"ic-value\">9081 Gy\u0151r\u00fajbar\u00e1t,<br>P\u00e1ndzsa u. 6.<\/div>\r\n              <\/div>\r\n              <div class=\"info-card-mini\">\r\n                <div class=\"ic-icon\"><i class=\"fa-solid fa-phone\"><\/i><\/div>\r\n                <div class=\"ic-label\">Telefon<\/div>\r\n                <div class=\"ic-value\"><a href=\"tel:+36205154342\">06 20 515 4342<\/a><\/div>\r\n              <\/div>\r\n              <div class=\"info-card-mini\">\r\n                <div class=\"ic-icon\"><i class=\"fa-solid fa-envelope\"><\/i><\/div>\r\n                <div class=\"ic-label\">E-mail<\/div>\r\n                <div class=\"ic-value\"><a href=\"mailto:betonguru@betonguru.hu\">betonguru@betonguru.hu<\/a><\/div>\r\n              <\/div>\r\n            <\/div>\r\n\r\n            <!-- Google Map Embed & Pulsing Phone -->\r\n            <div class=\"google-map-container\">\r\n              <iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d2693.376822180862!2d17.6367503!3d47.6324838!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x476bc1050e051c27%%3A0xe543e387c9ad3b48!2zR3nFkXLDynamicbGU!5e0!3m2!1shu!2shu!4v1719747192305!5m2!1shu!2shu\" allowfullscreen=\"\" loading=\"lazy\" referrerpolicy=\"no-referrer-when-downgrade\"><\/iframe>\r\n            <\/div>\r\n\r\n            <div class=\"phone-cta-highlight\">\r\n              <p style=\"font-size: 0.9rem; color: var(--text-gray); margin-bottom: 0.75rem;\">Gyorsabb a telefonos kommunik\u00e1ci\u00f3? H\u00edvjon minket most k\u00f6zvetlen\u00fcl!<\/p>\r\n              <a href=\"tel:+36205154342\" class=\"pulse-btn\">\r\n                <i class=\"fa-solid fa-phone-volume\" style=\"color: #000000 !important; display: inline-block !important; font-family: 'Font Awesome 6 Free' !important; font-weight: 900 !important; margin-right: 0.5rem !important; font-size: 1.1rem;\"><\/i> H\u00edv\u00e1s ind\u00edt\u00e1sa\r\n              <\/a>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <!-- Right Column: Contact Form -->\r\n          <div class=\"contact-column\">\r\n            <div class=\"contact-heading-group\">\r\n              <h2 class=\"contact-heading\">K\u00e9rjen <span>Aj\u00e1nlatot!<\/span><\/h2>\r\n              <p class=\"contact-sub\">T\u00f6ltse ki az \u0171rlapot, \u00e9s munkat\u00e1rsunk hamarosan felveszi a kapcsolatot!<\/p>\r\n            <\/div>\r\n\r\n            <form id=\"contact-form\" class=\"form-container\">\r\n              <div class=\"form-row\">\r\n                <div class=\"form-group\">\r\n                  <label>N\u00e9v \/ C\u00e9gn\u00e9v<\/label>\r\n                  <input type=\"text\" id=\"form-name\" placeholder=\"Kov\u00e1cs Istv\u00e1n \/ ABC Kft.\" required \/>\r\n                <\/div>\r\n                <div class=\"form-group\">\r\n                  <label>Telefon \/ Email<\/label>\r\n                  <input type=\"text\" id=\"form-phone\" placeholder=\"+36 20 123 4567\" required \/>\r\n                <\/div>\r\n              <\/div>\r\n              <div class=\"form-row split-custom\">\r\n                <div class=\"form-group\">\r\n                  <label>Szolg\u00e1ltat\u00e1s t\u00edpusa<\/label>\r\n                  <select id=\"form-service-type\">\r\n                    <option value=\"Transzportbeton rendel\u00e9s\">Transzportbeton rendel\u00e9s<\/option>\r\n                    <option value=\"Betonpump\u00e1l\u00e1s\">Betonpump\u00e1l\u00e1s<\/option>\r\n                    <option value=\"Kont\u00e9neres sz\u00e1ll\u00edt\u00e1s\">Kont\u00e9neres sz\u00e1ll\u00edt\u00e1s<\/option>\r\n                    <option value=\"Hullad\u00e9ksz\u00e1ll\u00edt\u00e1s\">Hullad\u00e9ksz\u00e1ll\u00edt\u00e1s<\/option>\r\n                    <option value=\"B\u00e9rkont\u00e9ner rendel\u00e9s\">B\u00e9rkont\u00e9ner rendel\u00e9s<\/option>\r\n                    <option value=\"Egy\u00e9b\">Egy\u00e9b<\/option>\r\n                  <\/select>\r\n                <\/div>\r\n                <div class=\"form-group\">\r\n                  <label>\u00dcgyf\u00e9lt\u00edpus<\/label>\r\n                  <select id=\"form-client-type\">\r\n                    <option value=\"Lakoss\u00e1gi\">Lakoss\u00e1gi \u00fcgyf\u00e9l<\/option>\r\n                    <option value=\"C\u00e9ges\">C\u00e9ges megrendel\u0151<\/option>\r\n                  <\/select>\r\n                <\/div>\r\n              <\/div>\r\n\r\n              <!-- Container options sub-panel -->\r\n              <div id=\"container-options-panel\" style=\"display: none; background: rgba(255,255,255,0.02); border: 1px dashed rgba(255, 204, 0, 0.2); padding: 1rem; border-radius: 0.75rem; margin-bottom: 1rem;\">\r\n                <p style=\"font-size: 0.8rem; color: var(--brand-yellow); margin-bottom: 0.75rem; font-weight: 700; text-transform: uppercase;\">Kont\u00e9ner sz\u00e1ll\u00edt\u00e1si param\u00e9terek<\/p>\r\n                <div class=\"form-row\" style=\"grid-template-columns: 1fr 1fr; gap: 0.75rem;\">\r\n                  <div class=\"form-group\">\r\n                    <label>Sz\u00e1ll\u00edt\u00e1si t\u00e1vols\u00e1g<\/label>\r\n                    <select id=\"container-distance\">\r\n                      <option value=\"0-15km\">0-15 km (Pl. Gy\u0151r\u00fajbar\u00e1t \u00e9s k\u00f6rny\u00e9ke)<\/option>\r\n                      <option value=\"15-20km\">15-20 km (K\u00f6z\u00e9pk\u00f6rzet)<\/option>\r\n                    <\/select>\r\n                  <\/div>\r\n                  <div class=\"form-group\">\r\n                    <label>Hullad\u00e9k jellege<\/label>\r\n                    <select id=\"container-waste-type\">\r\n                      <option value=\"Inert t\u00f6rmel\u00e9k\">Inert \/ \u00c9p\u00edt\u00e9si t\u00f6rmel\u00e9k<\/option>\r\n                      <option value=\"Lom \/ Z\u00f6ldhullad\u00e9k\">Lom \/ Z\u00f6ldhullad\u00e9k<\/option>\r\n                    <\/select>\r\n                  <\/div>\r\n                <\/div>\r\n                <p style=\"font-size: 0.75rem; color: var(--text-muted); margin-top: 0.5rem;\">\r\n                  Figyelem: Csak 6 m\u00b3-es kont\u00e9nert biztos\u00edtunk, maximum 20 km-es k\u00f6rzetben!\r\n                <\/p>\r\n              <\/div>\r\n\r\n              <div class=\"form-row\">\r\n                <div class=\"form-group full\">\r\n                  <label>Mennyis\u00e9g<\/label>\r\n                  <input type=\"text\" id=\"form-qty\" placeholder=\"pl. 15 m\u00b3 vagy 1 db kont\u00e9ner\" \/>\r\n                <\/div>\r\n              <\/div>\r\n              <div class=\"form-row\">\r\n                <div class=\"form-group full\">\r\n                  <label>\u00dczenet \/ Param\u00e9terek<\/label>\r\n                  <textarea id=\"form-msg\" rows=\"3\" placeholder=\"Megjegyz\u00e9s, k\u00fcl\u00f6nleges ig\u00e9nyek...\"><\/textarea>\r\n                <\/div>\r\n              <\/div>\r\n              <button type=\"button\" class=\"btn btn-primary\" style=\"width: 100%; border-radius: 0.65rem; padding: 0.75rem 1.5rem;\" id=\"form-submit-btn\">\r\n                <i class=\"fa-solid fa-paper-plane\"><\/i> Adatok k\u00fcld\u00e9se\r\n              <\/button>\r\n            <\/form>\r\n          <\/div>\r\n\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n    \r\n    <!-- Premium Footer (inside content wrapper, reveals when scrolling down) -->\r\n    <footer id=\"premium-footer\">\r\n      <div class=\"footer-spacer\" style=\"height: 140px;\"><\/div>\r\n      <div class=\"footer-content-bg\">\r\n        <div class=\"footer-inner\">\r\n          <div class=\"footer-top\">\r\n            <!-- Brand Column -->\r\n            <div class=\"footer-brand\">\r\n              <span class=\"footer-logo-big\">BETON<span>GURU<\/span><\/span>\r\n              <p class=\"footer-desc\">\r\n                Prec\u00edzi\u00f3s betongy\u00e1rt\u00e1s \u00e9s logisztikai megold\u00e1sok az ipari szabv\u00e1nyok maxim\u00e1lis figyelembev\u00e9tel\u00e9vel. Gy\u0151r\u00fajbar\u00e1t leg\u00fajabb beton\u00fczeme.              <\/p>\r\n              <div class=\"footer-social\">\r\n                <a href=\"https:\/\/facebook.com\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Facebook\"><i class=\"fa-brands fa-facebook-f\"><\/i><\/a>\r\n                <a href=\"https:\/\/instagram.com\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Instagram\"><i class=\"fa-brands fa-instagram\"><\/i><\/a>\r\n                <a href=\"tel:+36205154342\" aria-label=\"Telefon\"><i class=\"fa-solid fa-phone\"><\/i><\/a>\r\n                <a href=\"mailto:betonguru@betonguru.hu\" aria-label=\"Email\"><i class=\"fa-solid fa-envelope\"><\/i><\/a>\r\n              <\/div>\r\n            <\/div>\r\n            <!-- Nav Column -->\r\n            <div class=\"footer-col\">\r\n              <h4>Navig\u00e1ci\u00f3<\/h4>\r\n              <ul>\r\n                <li><a href=\"https:\/\/bemutato.betonguru.hu\/#hero-slide\"><i class=\"fa-solid fa-chevron-right\"><\/i> Kezd\u0151lap<\/a><\/li>\r\n                <li><a href=\"https:\/\/bemutato.betonguru.hu\/#intro-slide\"><i class=\"fa-solid fa-chevron-right\"><\/i> R\u00f3lunk<\/a><\/li>\r\n                <li><a href=\"https:\/\/bemutato.betonguru.hu\/#services-slide\"><i class=\"fa-solid fa-chevron-right\"><\/i> Szolg\u00e1ltat\u00e1sok<\/a><\/li>\r\n                <li><a href=\"https:\/\/bemutato.betonguru.hu\/#projects-slide\"><i class=\"fa-solid fa-chevron-right\"><\/i> Projektjeink<\/a><\/li>\r\n                <li><a href=\"https:\/\/bemutato.betonguru.hu\/#guarantees-slide\"><i class=\"fa-solid fa-chevron-right\"><\/i> Garanci\u00e1k<\/a><\/li>\r\n                <li><a href=\"https:\/\/bemutato.betonguru.hu\/#contact-slide\"><i class=\"fa-solid fa-chevron-right\"><\/i> Kapcsolat<\/a><\/li>\r\n              <\/ul>\r\n            <\/div>\r\n            <!-- Services Column -->\r\n                        <div class=\"footer-col\">\r\n              <h4>Szolg\u00e1ltat\u00e1sok<\/h4>\r\n              <ul>\r\n                <li><a href=\"https:\/\/bemutato.betonguru.hu\/index.php\/beton\/\"><i class=\"fa-solid fa-chevron-right\"><\/i> Betongy\u00e1rt\u00e1s<\/a><\/li>\r\n                <li><a href=\"https:\/\/bemutato.betonguru.hu\/index.php\/beton\/\"><i class=\"fa-solid fa-chevron-right\"><\/i> Transzportbeton<\/a><\/li>\r\n                <li><a href=\"https:\/\/bemutato.betonguru.hu\/index.php\/beton\/\"><i class=\"fa-solid fa-chevron-right\"><\/i> Betonpump\u00e1l\u00e1s<\/a><\/li>\r\n                <li><a href=\"https:\/\/bemutato.betonguru.hu\/index.php\/beton\/\"><i class=\"fa-solid fa-chevron-right\"><\/i> Gyors Sz\u00e1ll\u00edt\u00e1s<\/a><\/li>\r\n                <li><a href=\"https:\/\/bemutato.betonguru.hu\/index.php\/hulladekszallitas\/\"><i class=\"fa-solid fa-chevron-right\"><\/i> Hullad\u00e9ksz\u00e1ll\u00edt\u00e1s<\/a><\/li>\r\n                <li><a href=\"https:\/\/bemutato.betonguru.hu\/index.php\/hulladekszallitas\/\"><i class=\"fa-solid fa-chevron-right\"><\/i> B\u00e9rkont\u00e9ner<\/a><\/li>\r\n              <\/ul>\r\n            <\/div>\r\n            <!-- Contact Column -->\r\n            <div class=\"footer-col\">\r\n              <h4>El\u00e9rhet\u0151s\u00e9gek<\/h4>\r\n              <div class=\"footer-contact-item\">\r\n                <div class=\"fci-icon\"><i class=\"fa-solid fa-location-dot\"><\/i><\/div>\r\n                <span>Gy\u0151r\u00fajbar\u00e1t, P\u00e1ndzsa u. 6.<\/span>\r\n              <\/div>\r\n              <div class=\"footer-contact-item\">\r\n                <div class=\"fci-icon\"><i class=\"fa-solid fa-phone\"><\/i><\/div>\r\n                <a href=\"tel:+36205154342\">+36 20 515 4342<\/a>\r\n              <\/div>\r\n              <div class=\"footer-contact-item\">\r\n                <div class=\"fci-icon\"><i class=\"fa-solid fa-envelope\"><\/i><\/div>\r\n                <a href=\"mailto:betonguru@betonguru.hu\">betonguru@betonguru.hu<\/a>\r\n              <\/div>\r\n              <div class=\"footer-contact-item\">\r\n                <div class=\"fci-icon\"><i class=\"fa-solid fa-clock\"><\/i><\/div>\r\n                <span>H-P: 06:00 \u2013 16:00 | Szo: El\u0151zetes egyeztet\u00e9ssel<\/span>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"footer-divider\"><\/div>\r\n          <div class=\"footer-bottom\">\r\n            <div class=\"fb-copy\">&copy; 2026 &lt;span&gt;Betonguru&lt;\/span&gt;. Minden jog fenntartva. | Gy\u0151r\u00fajbar\u00e1t \u00daj Beton\u00fczeme<\/div>\r\n            <div class=\"fb-badges\">\r\n                                                <div class=\"fb-badge\"><i class=\"fa-solid fa-shield-halved\"><\/i> ISO Tan\u00fas\u00edtott<\/div>\r\n                                  <div class=\"fb-badge\"><i class=\"fa-solid fa-leaf\"><\/i> K\u00f6rnyezettudatos<\/div>\r\n                                  <div class=\"fb-badge\"><i class=\"fa-solid fa-award\"><\/i> +500 projekt<\/div>\r\n                                  <div class=\"fb-badge\"><i class=\"fa-solid fa-shield-halved\"><\/i> Elba CBT 60 SL<\/div>\r\n                                          <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/footer>\r\n\r\n  <\/div> <!-- End of content-wrapper -->\r\n\r\n  <!-- Scroll spacer to drive scroll events -->\r\n  <div id=\"scroll-spacer\" style=\"height: 800vh; pointer-events: none;\"><\/div>\r\n\r\n  <!-- Javascript Logic -->\r\n\r\n\t\t<\/div><!-- \/.betonguru-wrapper -->\r\n\r\n\t\t<!-- Javascript Logic -->\r\n\t\t<script>\r\n\r\n    (function() {\r\n      \/\/ Elegant Preloader Fade-out (runs on both mobile and desktop before any early return)\r\n      const preloader = document.getElementById('betonguru-preloader');\r\n      if (preloader) {\r\n        const fadeOutPreloader = () => {\r\n          if (preloader.classList.contains('fade-out')) return;\r\n          preloader.classList.add('fade-out');\r\n          setTimeout(() => {\r\n            preloader.style.display = 'none';\r\n          }, 500);\r\n        };\r\n\r\n        \/\/ Wait for the full window 'load' event (images, stylesheets, fonts) on both mobile and desktop.\r\n        \/\/ This ensures the browser's main thread is fully ready, preventing scroll stuttering or freezes.\r\n        if (document.readyState === 'complete') {\r\n          fadeOutPreloader();\r\n        } else {\r\n          window.addEventListener('load', fadeOutPreloader);\r\n          \/\/ Safety fallback: hide preloader after 10 seconds anyway if something gets stuck\r\n          setTimeout(fadeOutPreloader, 10000);\r\n        }\r\n      }\r\n\r\n      const isMobileLayout = window.matchMedia('(max-width: 1024px)').matches;\r\n\r\n      \/\/ Shared map used by both mobile (native section scroll) and desktop (scroll engine).\r\n      const slideMap = {\r\n        '#hero-slide': 0,\r\n        '#intro-slide': 1,\r\n        '#services-slide': 2,\r\n        '#showcase-slide': 3,\r\n        '#projects-slide': 4,\r\n        '#guarantees-slide': 5,\r\n        '#about-slide': 6,\r\n        '#calc-slide': 7,\r\n        '#contact-slide': 8\r\n      };\r\n\r\n      function initMobileMenu() {\r\n        const menuBtn = document.getElementById('menu-btn');\r\n        const mobileMenu = document.getElementById('mobile-menu');\r\n        if (!menuBtn || !mobileMenu) return;\r\n\r\n        const menuIcon = menuBtn.querySelector('i');\r\n        menuBtn.addEventListener('click', () => {\r\n          const isActive = mobileMenu.classList.toggle('active');\r\n          if (menuIcon) {\r\n            menuIcon.className = isActive ? 'fa-solid fa-xmark' : 'fa-solid fa-bars';\r\n          }\r\n          document.body.style.overflow = isActive ? 'hidden' : '';\r\n        });\r\n\r\n        const mobileLinks = document.querySelectorAll('.mobile-link');\r\n        mobileLinks.forEach((link) => {\r\n          link.addEventListener('click', () => {\r\n            mobileMenu.classList.remove('active');\r\n            if (menuIcon) {\r\n              menuIcon.className = 'fa-solid fa-bars';\r\n            }\r\n            document.body.style.overflow = '';\r\n          });\r\n        });\r\n      }\r\n\r\n      function initFormLogic() {\r\n        const lengthInput = document.getElementById('calc-length');\r\n        const widthInput = document.getElementById('calc-width');\r\n        const depthInput = document.getElementById('calc-depth');\r\n        const qualitySelect = document.getElementById('calc-quality');\r\n        const segmentSelect = document.getElementById('calc-segment');\r\n        const resultDisplay = document.getElementById('calc-result');\r\n        const shareBtn = document.getElementById('calc-share-btn');\r\n\r\n        function calculateVolume() {\r\n          const length = parseFloat(lengthInput.value) || 0;\r\n          const width = parseFloat(widthInput.value) || 0;\r\n          const depth = parseFloat(depthInput.value) || 0;\r\n\r\n          const volume = length * width * depth;\r\n          resultDisplay.textContent = volume.toFixed(2) + ' m\u00b3';\r\n          return volume.toFixed(2);\r\n        }\r\n\r\n        [lengthInput, widthInput, depthInput].forEach((input) => {\r\n          input.addEventListener('input', calculateVolume);\r\n        });\r\n\r\n        shareBtn.addEventListener('click', () => {\r\n          const l = lengthInput.value || 0;\r\n          const w = widthInput.value || 0;\r\n          const d = depthInput.value || 0;\r\n          const q = qualitySelect.value;\r\n          const s = segmentSelect.value;\r\n          const total = calculateVolume();\r\n\r\n          if (parseFloat(total) === 0) {\r\n            alert('K\u00e9rj\u00fck, adjon meg \u00e9rv\u00e9nyes m\u00e9reteket a kalkul\u00e1ci\u00f3hoz!');\r\n            return;\r\n          }\r\n\r\n          const messageText = `Tisztelt Betonguru! \u00c1raj\u00e1nlatot szeretn\u00e9k k\u00e9rni az al\u00e1bbi betonmennyis\u00e9gre:\\nMegrendel\u0151 t\u00edpusa: ${s}\\nV\u00e1lasztott min\u0151s\u00e9g: ${q}\\nSz\u00e9less\u00e9g: ${w}m\\nHossz\u00fas\u00e1g: ${l}m\\nVastags\u00e1g: ${d}m\\n\u00d6sszesen sz\u00fcks\u00e9ges mennyis\u00e9g: ${total} m\u00b3`;\r\n\r\n          const mailtoUrl = `mailto:betonguru@betonguru.hu?subject=${encodeURIComponent('\u00c1raj\u00e1nlat k\u00e9r\u00e9s - Beton kalkul\u00e1tor')}&body=${encodeURIComponent(messageText)}`;\r\n          window.location.href = mailtoUrl;\r\n        });\r\n\r\n        const serviceSelect = document.getElementById('form-service-type');\r\n        const containerPanel = document.getElementById('container-options-panel');\r\n        const distanceSelect = document.getElementById('container-distance');\r\n\r\n        function toggleContainerPanel() {\r\n          const val = serviceSelect.value;\r\n          if (val.includes('Kont\u00e9neres') || val.includes('Hullad\u00e9k') || val.includes('B\u00e9rkont\u00e9ner')) {\r\n            containerPanel.style.display = 'block';\r\n          } else {\r\n            containerPanel.style.display = 'none';\r\n          }\r\n        }\r\n\r\n        serviceSelect.addEventListener('change', toggleContainerPanel);\r\n\r\n        const formSubmitBtn = document.getElementById('form-submit-btn');\r\n        if (formSubmitBtn) {\r\n          formSubmitBtn.addEventListener('click', () => {\r\n            const name = document.getElementById('form-name').value;\r\n            const phone = document.getElementById('form-phone').value;\r\n\r\n            if (!name || !phone) {\r\n              alert('K\u00e9rj\u00fck, t\u00f6ltse ki a N\u00e9v \u00e9s Telefon\/Email mez\u0151ket!');\r\n              return;\r\n            }\r\n\r\n            if (containerPanel.style.display === 'block') {\r\n              const distance = distanceSelect.value;\r\n            }\r\n\r\n            alert('K\u00f6sz\u00f6nj\u00fck \u00e9rdekl\u0151d\u00e9s\u00e9t! Munkat\u00e1rsaink hamarosan felveszik \u00d6nnel a kapcsolatot.');\r\n          });\r\n        }\r\n      }\r\n\r\n      if (isMobileLayout) {\r\n        const navbar = document.getElementById('navbar');\r\n\r\n        function setMobileNavbarState() {\r\n          if (!navbar) return;\r\n          if (window.scrollY > 20) {\r\n            navbar.classList.add('scrolled');\r\n          } else {\r\n            navbar.classList.remove('scrolled');\r\n          }\r\n        }\r\n\r\n        \/\/ On mobile we use native section scrolling, no scroll-video engine.\r\n        document.querySelectorAll('a').forEach((link) => {\r\n          const href = link.getAttribute('href');\r\n          if (!href) return;\r\n\r\n          let hash = '';\r\n          if (href.startsWith('#')) {\r\n            hash = href;\r\n          } else if (href.includes('#')) {\r\n            hash = '#' + href.split('#')[1];\r\n          }\r\n\r\n          if (slideMap[hash] !== undefined) {\r\n            link.addEventListener('click', (e) => {\r\n              const target = document.querySelector(hash);\r\n              if (!target) return;\r\n              e.preventDefault();\r\n              target.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n            });\r\n          }\r\n        });\r\n\r\n        function handleMobileHashRouting() {\r\n          const hash = window.location.hash;\r\n          if (!hash || slideMap[hash] === undefined) return;\r\n          const target = document.querySelector(hash);\r\n          if (!target) return;\r\n          setTimeout(() => {\r\n            target.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n          }, 120);\r\n        }\r\n\r\n        window.addEventListener('scroll', setMobileNavbarState, { passive: true });\r\n        window.addEventListener('load', () => {\r\n          setMobileNavbarState();\r\n          handleMobileHashRouting();\r\n        });\r\n        window.addEventListener('hashchange', handleMobileHashRouting);\r\n\r\n        initMobileMenu();\r\n        initFormLogic();\r\n        return;\r\n      }\r\n\r\n      \/\/ ===================== SCROLL VIDEO CONTROL =====================\r\n      const VIDEO_URL = 'Concrete_mixer_truck_rotating_drum_202606240930.mp4';\r\n      const canvas = document.getElementById('video-canvas');\r\n      const video = document.getElementById('video-source');\r\n      if (video) {\r\n        const dataSrc = video.getAttribute('data-src');\r\n        if (dataSrc) {\r\n          video.src = dataSrc;\r\n          video.preload = 'auto';\r\n        }\r\n      }\r\n      const ctx = canvas ? canvas.getContext('2d', { alpha: false }) : null;\r\n      \r\n      let targetProgress = 0;\r\n      let currentProgress = 0;\r\n      let lastProgress = -1;\r\n      let isUnlocked = false;\r\n      let footerHeight = 0;\r\n      \r\n      let isSeeking = false;\r\n      let pendingSeekTime = null;\r\n\r\n      const TOTAL_SLIDES = 9; \/\/ 9 content slides\r\n      const SLIDE_STEP = 0.91 \/ (TOTAL_SLIDES - 1); \/\/ 0.11375\r\n\r\n      \/\/ Camera keyframes for dynamic scroll transitions\r\n      const cameraKeyframes = [\r\n        { progress: 0.0,   scale: 1.0,  panX: 0.0,   panY: 0.0 },\r\n        { progress: 0.11,  scale: 1.25, panX: 0.12,  panY: -0.04 },\r\n        { progress: 0.23,  scale: 1.15, panX: -0.06, panY: 0.03 },\r\n        { progress: 0.34,  scale: 1.35, panX: 0.16,  panY: -0.05 },\r\n        { progress: 0.45,  scale: 1.2,  panX: -0.1,  panY: 0.02 },\r\n        { progress: 0.57,  scale: 1.1,  panX: 0.08,  panY: -0.03 },\r\n        { progress: 0.68,  scale: 1.3,  panX: -0.12, panY: 0.04 },\r\n        { progress: 0.80,  scale: 1.05, panX: 0.08,  panY: -0.02 },\r\n        { progress: 0.91,  scale: 1.02, panX: 0.0,   panY: 0.0 },\r\n        { progress: 1.0,   scale: 1.01, panX: 0.0,   panY: 0.0 }\r\n      ];\r\n\r\n      function getCamera(p) {\r\n        let i = 0;\r\n        for (; i < cameraKeyframes.length - 1; i++) {\r\n          if (p >= cameraKeyframes[i].progress && p <= cameraKeyframes[i + 1].progress) {\r\n            break;\r\n          }\r\n        }\r\n        const kf1 = cameraKeyframes[i];\r\n        const kf2 = cameraKeyframes[i + 1];\r\n        \r\n        const range = kf2.progress - kf1.progress;\r\n        const t = range > 0 ? (p - kf1.progress) \/ range : 0;\r\n        \r\n        const tSmooth = t * t * (3 - 2 * t);\r\n        \r\n        return {\r\n          scale: kf1.scale + (kf2.scale - kf1.scale) * tSmooth,\r\n          panX: kf1.panX + (kf2.panX - kf1.panX) * tSmooth,\r\n          panY: kf1.panY + (kf2.panY - kf1.panY) * tSmooth\r\n        };\r\n      }\r\n\r\n      function resizeCanvas() {\r\n        if (!canvas || !ctx) return;\r\n        const dpr = Math.min(window.devicePixelRatio || 1, 2);\r\n        const cw = window.innerWidth;\r\n        const ch = window.innerHeight;\r\n        \r\n        canvas.width = cw * dpr;\r\n        canvas.height = ch * dpr;\r\n        canvas.style.width = cw + 'px';\r\n        canvas.style.height = ch + 'px';\r\n        \r\n        ctx.setTransform(1, 0, 0, 1, 0, 0);\r\n        ctx.scale(dpr, dpr);\r\n        \r\n        if (premiumFooter) {\r\n          footerHeight = premiumFooter.offsetHeight;\r\n        }\r\n        \r\n        drawCurrentFrame(currentProgress);\r\n      }\r\n\r\n      function drawCurrentFrame(p) {\r\n        if (!canvas || !ctx || !video) return;\r\n        const cw = window.innerWidth;\r\n        const ch = window.innerHeight;\r\n        \r\n        const fw = video.videoWidth;\r\n        const fh = video.videoHeight;\r\n        \r\n        if (!fw || !fh) return;\r\n        \r\n        \/\/ To prevent black flickering, do not draw if the video is currently seeking\r\n        if (isSeeking) return;\r\n        \r\n        const cam = getCamera(p);\r\n        \r\n        const scaleBase = Math.max(cw \/ fw, ch \/ fh);\r\n        const dw = fw * scaleBase * cam.scale;\r\n        const dh = fh * scaleBase * cam.scale;\r\n        \r\n        const offsetX = cw * cam.panX;\r\n        const offsetY = ch * cam.panY;\r\n        \r\n        const dx = (cw - dw) \/ 2 + offsetX;\r\n        const dy = (ch - dh) \/ 2 + offsetY;\r\n        \r\n        \/\/ Do not clear the canvas to preserve the last drawn frame\r\n        ctx.drawImage(video, dx, dy, dw, dh);\r\n      }\r\n      \r\n      let lastSeekCall = 0;\r\n      const SEEK_THROTTLE_MS = 50; \/\/ Max 20 seek\/sec to drastically improve CPU\/GPU performance and eliminate scroll lag\r\n\r\n      function seekVideo(time) {\r\n        if (!video) return;\r\n        const now = performance.now();\r\n        if (isSeeking) {\r\n          pendingSeekTime = time;\r\n          return;\r\n        }\r\n        if (now - lastSeekCall < SEEK_THROTTLE_MS) {\r\n          pendingSeekTime = time;\r\n          return;\r\n        }\r\n        isSeeking = true;\r\n        lastSeekCall = now;\r\n        video.currentTime = time;\r\n      }\r\n\r\n      function getScrollProgress() {\r\n        const winScroll = window.scrollY;\r\n        const height = document.documentElement.scrollHeight - window.innerHeight;\r\n        if (height <= 0) return 0;\r\n        return Math.max(0, Math.min(1, winScroll \/ height));\r\n      }\r\n\r\n      const slides = document.querySelectorAll('.scroll-slide');\r\n      const navbar = document.getElementById('navbar');\r\n      const premiumFooter = document.getElementById('premium-footer');\r\n\r\n      function renderLoop() {\r\n        const lerpFactor = 0.08;\r\n        currentProgress += (targetProgress - currentProgress) * lerpFactor;\r\n        \r\n        if (Math.abs(targetProgress - currentProgress) < 0.0001) {\r\n          currentProgress = targetProgress;\r\n        }\r\n\r\n        let progressChanged = false;\r\n        if (currentProgress !== lastProgress) {\r\n          progressChanged = true;\r\n          lastProgress = currentProgress;\r\n        }\r\n\r\n        if (progressChanged) {\r\n          if (video && video.duration && isFinite(video.duration)) {\r\n            const targetTime = currentProgress * video.duration;\r\n            if (Math.abs(video.currentTime - targetTime) > 0.03) {\r\n              seekVideo(targetTime);\r\n            }\r\n          }\r\n\r\n          if (video && video.readyState >= 2) {\r\n            drawCurrentFrame(currentProgress);\r\n          }\r\n\r\n          \/\/ Slide animations\r\n          slides.forEach((slide, idx) => {\r\n            const center = idx * SLIDE_STEP;\r\n            const dist = currentProgress - center;\r\n            const halfStep = SLIDE_STEP;\r\n            \r\n            if (idx === TOTAL_SLIDES - 1 && dist > 0) {\r\n              slide.style.opacity = 1;\r\n              slide.style.transform = 'translateY(0) scale(1)';\r\n              slide.style.filter = 'none';\r\n              slide.style.pointerEvents = 'auto';\r\n              slide.classList.add('active-slide');\r\n            } else if (dist > halfStep || dist < -halfStep) {\r\n              slide.style.opacity = 0;\r\n              slide.style.transform = `translateY(${dist > 0 ? -100 : 100}vh) scale(0.95)`;\r\n              slide.style.filter = 'none';\r\n              slide.style.pointerEvents = 'none';\r\n              slide.classList.remove('active-slide');\r\n            } else {\r\n              const x = dist \/ halfStep;\r\n              const opacity = 1 - Math.abs(x);\r\n              const translateY = x * -100;\r\n              const scale = 1 - Math.abs(x) * 0.05;\r\n              \r\n              slide.style.opacity = opacity;\r\n              slide.style.transform = `translateY(${translateY}vh) scale(${scale})`;\r\n              slide.style.filter = 'none';\r\n              \r\n              if (opacity > 0.15) {\r\n                slide.style.pointerEvents = 'auto';\r\n                slide.classList.add('active-slide');\r\n              } else {\r\n                slide.style.pointerEvents = 'none';\r\n                slide.classList.remove('active-slide');\r\n              }\r\n            }\r\n          });\r\n\r\n          \/\/ Premium footer scroll-up transition\r\n          let wrapperTranslateY = 0;\r\n          let videoOpacity = 1.0;\r\n          let blurAmount = 0;\r\n          if (currentProgress > 0.91) {\r\n            const footerProgress = (currentProgress - 0.91) \/ (1.0 - 0.91); \/\/ 0.0 to 1.0\r\n            const easeProgress = footerProgress * footerProgress * (3 - 2 * footerProgress); \/\/ Smooth transition\r\n            wrapperTranslateY = easeProgress * footerHeight;\r\n            \r\n            \/\/ Eased video opacity fade and blur\r\n            videoOpacity = 1.0 - easeProgress;\r\n            blurAmount = easeProgress * 12; \/\/ Max 12px blur\r\n          }\r\n          const contentWrapper = document.getElementById('content-wrapper');\r\n          if (contentWrapper) {\r\n            contentWrapper.style.transform = `translateY(${-wrapperTranslateY}px)`;\r\n          }\r\n          if (canvas) {\r\n            canvas.style.opacity = videoOpacity;\r\n            canvas.style.filter = blurAmount > 0 ? `blur(${blurAmount}px)` : 'none';\r\n          }\r\n          \r\n          \/\/ Dynamically fade overlay opacity: 0 on Hero slide (currentProgress = 0), fading to 1 on Slide 2 (currentProgress = SLIDE_STEP)\r\n          const overlay = document.querySelector('#scroll-video-container .overlay');\r\n          if (overlay) {\r\n            const overlayProgress = Math.min(1, currentProgress \/ SLIDE_STEP);\r\n            overlay.style.opacity = overlayProgress;\r\n          }\r\n        }\r\n\r\n        requestAnimationFrame(renderLoop);\r\n      }\r\n\r\n      if (video) {\r\n        video.addEventListener('seeked', () => {\r\n          isSeeking = false;\r\n          if (video.readyState >= 2) {\r\n            drawCurrentFrame(currentProgress);\r\n          }\r\n          if (pendingSeekTime !== null) {\r\n            const nextTime = pendingSeekTime;\r\n            pendingSeekTime = null;\r\n            const now = performance.now();\r\n            if (now - lastSeekCall >= SEEK_THROTTLE_MS) {\r\n              seekVideo(nextTime);\r\n            }\r\n          }\r\n        });\r\n        video.addEventListener('error', (e) => console.error(\"Video element error: \", video.error));\r\n        \r\n        video.addEventListener('playing', () => {\r\n          video.pause();\r\n        }, { once: true });\r\n\r\n        video.addEventListener('loadedmetadata', onMetadataLoaded);\r\n        video.addEventListener('loadeddata', () => drawCurrentFrame(currentProgress));\r\n\r\n        if (video.readyState >= 1) {\r\n          onMetadataLoaded();\r\n        }\r\n        if (video.readyState >= 2) {\r\n          drawCurrentFrame(currentProgress);\r\n        }\r\n\r\n        video.load();\r\n      }\r\n\r\n      function onMetadataLoaded() {\r\n        resizeCanvas();\r\n        targetProgress = getScrollProgress();\r\n        currentProgress = targetProgress;\r\n        drawCurrentFrame(currentProgress);\r\n      }\r\n\r\n      requestAnimationFrame(renderLoop);\r\n\r\n      \/\/ ===================== FLOATING PARTICLES =====================\r\n      const pCanvas = document.getElementById('particles-canvas');\r\n      const pCtx = pCanvas ? pCanvas.getContext('2d') : null;\r\n      let particles = [];\r\n\r\n      function resizeParticles() {\r\n        if (!pCanvas || !pCtx) return;\r\n        pCanvas.width = window.innerWidth;\r\n        pCanvas.height = window.innerHeight;\r\n        createParticles();\r\n      }\r\n\r\n      function createParticles() {\r\n        if (!pCanvas) return;\r\n        particles = [];\r\n        const count = Math.floor((pCanvas.width * pCanvas.height) \/ 25000);\r\n        for (let i = 0; i < count; i++) {\r\n          particles.push({\r\n            x: Math.random() * pCanvas.width,\r\n            y: Math.random() * pCanvas.height + pCanvas.height,\r\n            vx: (Math.random() - 0.5) * 0.4,\r\n            vy: -(Math.random() * 0.7 + 0.3),\r\n            size: Math.random() * 2 + 0.5,\r\n            color: Math.random() > 0.65 ? '255, 204, 0' : '255, 255, 255',\r\n            opacity: Math.random() * 0.35 + 0.1,\r\n            oscAmplitude: Math.random() * 1.5,\r\n            oscSpeed: Math.random() * 0.04\r\n          });\r\n        }\r\n      }\r\n\r\n      function animateParticles() {\r\n        if (!pCanvas || !pCtx) return;\r\n        pCtx.clearRect(0, 0, pCanvas.width, pCanvas.height);\r\n        \r\n        for (const p of particles) {\r\n          p.y += p.vy;\r\n          p.x += p.vx + Math.sin(p.y * p.oscSpeed) * p.oscAmplitude * 0.04;\r\n          \r\n          if (p.y < -10) {\r\n            p.y = pCanvas.height + 10;\r\n            p.x = Math.random() * pCanvas.width;\r\n          }\r\n          if (p.x < -10) p.x = pCanvas.width + 10;\r\n          if (p.x > pCanvas.width + 10) p.x = -10;\r\n\r\n          pCtx.beginPath();\r\n          pCtx.arc(p.x, p.y, p.size, 0, Math.PI * 2);\r\n          pCtx.fillStyle = `rgba(${p.color},${p.opacity})`;\r\n          pCtx.fill();\r\n        }\r\n        requestAnimationFrame(animateParticles);\r\n      }\r\n\r\n      if (pCanvas && pCtx) {\r\n        resizeParticles();\r\n        window.addEventListener('resize', resizeParticles);\r\n        animateParticles();\r\n      }\r\n\r\n      \/\/ ===================== SCROLL EVENT =====================\r\n      function onScroll() {\r\n        targetProgress = getScrollProgress();\r\n        \r\n        if (window.scrollY > 50) {\r\n          navbar.classList.add('scrolled');\r\n        } else {\r\n          navbar.classList.remove('scrolled');\r\n        }\r\n      }\r\n\r\n      window.addEventListener('scroll', onScroll, { passive: true });\r\n      onScroll();\r\n\r\n      resizeCanvas();\r\n      window.addEventListener('resize', resizeCanvas);\r\n      window.addEventListener('load', () => {\r\n        if (premiumFooter) {\r\n          footerHeight = premiumFooter.offsetHeight;\r\n        }\r\n      });\r\n\r\n      \/\/ Unlock video decoder\r\n      function unlockVideo() {\r\n        if (isUnlocked) return;\r\n        isUnlocked = true;\r\n        \r\n        if (video) {\r\n          video.play().then(() => {\r\n            video.pause();\r\n            targetProgress = getScrollProgress();\r\n          }).catch(err => {\r\n            console.log(\"Decoder unlock failed: \", err);\r\n          });\r\n        }\r\n\r\n        window.removeEventListener('click', unlockVideo);\r\n        window.removeEventListener('touchstart', unlockVideo);\r\n        window.removeEventListener('scroll', unlockVideo);\r\n      }\r\n\r\n      window.addEventListener('click', unlockVideo);\r\n      window.addEventListener('touchstart', unlockVideo, { passive: true });\r\n      window.addEventListener('scroll', unlockVideo, { passive: true });\r\n\r\n      \/\/ ===================== ANCHOR NAVIGATION =====================\r\n\r\n      const navLinksAll = document.querySelectorAll('#navbar .nav-links a, #mobile-menu .mobile-link, #premium-footer a[href^=\"#\"]');\r\n      const logoLink = document.querySelector('#navbar .logo-container');\r\n      const bounceArrow = document.querySelector('.bounce-arrow');\r\n\r\n      function scrollToSlideIndex(index) {\r\n        const spacerHeight = document.documentElement.scrollHeight - window.innerHeight;\r\n        const targetProgress = index * SLIDE_STEP;\r\n        const targetScroll = targetProgress * spacerHeight;\r\n        window.scrollTo({\r\n          top: targetScroll,\r\n          behavior: 'smooth'\r\n        });\r\n      }\r\n\r\n      \/\/ Add smooth scrolling to all anchors pointing to slides (including hero CTAs, footer links, etc.)\r\n      document.querySelectorAll('a').forEach((link) => {\r\n        const href = link.getAttribute('href');\r\n        if (!href) return;\r\n        \r\n        let hash = '';\r\n        if (href.startsWith('#')) {\r\n          hash = href;\r\n        } else if (href.includes('#')) {\r\n          hash = '#' + href.split('#')[1];\r\n        }\r\n        \r\n        const index = slideMap[hash];\r\n        if (index !== undefined) {\r\n          link.addEventListener('click', (e) => {\r\n            e.preventDefault();\r\n            scrollToSlideIndex(index);\r\n            \r\n            \/\/ Close mobile menu if active\r\n            const mobileMenu = document.getElementById('mobile-menu');\r\n            const menuBtn = document.getElementById('menu-btn');\r\n            if (mobileMenu && mobileMenu.classList.contains('active')) {\r\n              mobileMenu.classList.remove('active');\r\n              if (menuBtn) {\r\n                const menuIcon = menuBtn.querySelector('i');\r\n                if (menuIcon) menuIcon.className = 'fa-solid fa-bars';\r\n              }\r\n              document.body.style.overflow = '';\r\n            }\r\n          });\r\n        }\r\n      });\r\n\r\n      if (logoLink) {\r\n        logoLink.addEventListener('click', (e) => {\r\n          e.preventDefault();\r\n          scrollToSlideIndex(0);\r\n        });\r\n      }\r\n\r\n      if (bounceArrow) {\r\n        bounceArrow.addEventListener('click', (e) => {\r\n          e.preventDefault();\r\n          scrollToSlideIndex(1);\r\n        });\r\n      }\r\n\r\n      \/\/ Handle the \"Ismerje meg k\u00edn\u00e1latunkat\" intro CTA button explicitly\r\n      const introCtaBtn = document.getElementById('intro-cta-btn');\r\n      if (introCtaBtn) {\r\n        introCtaBtn.addEventListener('click', (e) => {\r\n          e.preventDefault();\r\n          scrollToSlideIndex(2); \/\/ Services slide is at index 2\r\n        });\r\n      }\r\n\r\n      initMobileMenu();\r\n      initFormLogic();\r\n\r\n      \/\/ Handle initial hash routing and hashchange events for subpage redirection\r\n      function handleHashRouting(smooth = false) {\r\n        const hash = window.location.hash;\r\n        if (hash && slideMap[hash] !== undefined) {\r\n          const index = slideMap[hash];\r\n          setTimeout(() => {\r\n            const spacerHeight = document.documentElement.scrollHeight - window.innerHeight;\r\n            const targetProgress = index * SLIDE_STEP;\r\n            const targetScroll = targetProgress * spacerHeight;\r\n            window.scrollTo({\r\n              top: targetScroll,\r\n              behavior: smooth ? 'smooth' : 'auto'\r\n            });\r\n          }, 150);\r\n        }\r\n      }\r\n\r\n      window.addEventListener('load', () => handleHashRouting(false));\r\n      window.addEventListener('hashchange', () => handleHashRouting(true));\r\n\r\n    })();\r\n\r\n\t\t<\/script>\r\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Oldal bet\u00f6lt\u00e9se&#8230; BETONGURU Kezd\u0151lap R\u00f3lunk Szolg\u00e1ltat\u00e1sok Kalkul\u00e1tor Projektek Min\u0151s\u00e9g Kapcsolat +36 20 515 4342 Kezd\u0151lap R\u00f3lunk Szolg\u00e1ltat\u00e1sok Kalkul\u00e1tor Projektek Min\u0151s\u00e9g Garanci\u00e1k Kapcsolat +36 20 515 4342 A biztos alapok szak\u00e9rt\u0151je Megnyitott Gy\u0151r\u00fajbar\u00e1t \u00daj Beton\u00fczeme! Min\u0151s\u00e9gi transzportbeton k\u00f6zvetlen\u00fcl a gy\u00e1rt\u00f3t\u00f3l, professzion\u00e1lis betonpump\u00e1l\u00e1s \u00e9s gyors kisz\u00e1ll\u00edt\u00e1s saj\u00e1t, modern g\u00e9pparkunkkal. Aj\u00e1nlatot k\u00e9rek Szolg\u00e1ltat\u00e1saink G\u00f6rgessen a r\u00e9szletek\u00e9rt A biztos [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-94","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bemutato.betonguru.hu\/index.php\/wp-json\/wp\/v2\/pages\/94","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bemutato.betonguru.hu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bemutato.betonguru.hu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bemutato.betonguru.hu\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bemutato.betonguru.hu\/index.php\/wp-json\/wp\/v2\/comments?post=94"}],"version-history":[{"count":58,"href":"https:\/\/bemutato.betonguru.hu\/index.php\/wp-json\/wp\/v2\/pages\/94\/revisions"}],"predecessor-version":[{"id":244,"href":"https:\/\/bemutato.betonguru.hu\/index.php\/wp-json\/wp\/v2\/pages\/94\/revisions\/244"}],"wp:attachment":[{"href":"https:\/\/bemutato.betonguru.hu\/index.php\/wp-json\/wp\/v2\/media?parent=94"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}