{"id":20,"date":"2026-04-18T11:35:33","date_gmt":"2026-04-18T11:35:33","guid":{"rendered":"https:\/\/instalmed.apptools.it\/?page_id=20"},"modified":"2026-04-18T11:35:55","modified_gmt":"2026-04-18T11:35:55","slug":"instalemd-hmtl-demo","status":"publish","type":"page","link":"https:\/\/instalmed.apptools.it\/?page_id=20","title":{"rendered":"instalemd hmtl demo"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n INSTALMED Sp. z o.o. \u2013 Produkcja wyrob\u00f3w metalowych<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n <link\r\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Barlow:wght@300;400;500;600;700;800&display=swap\"\r\n rel=\"stylesheet\"\r\n \/>\r\n <style>\r\n \/* =============================================\r\n DESIGN TOKENS\r\n ============================================= *\/\r\n :root {\r\n --primary: #0D9FD8;\r\n --accent: #E32320;\r\n --green: #56A82B;\r\n --dark: #1C1F24;\r\n --darker: #0F1114;\r\n --light-bg: #F7F8FA;\r\n --text: #212529;\r\n --muted: #6B7280;\r\n --border: #E5E7EB;\r\n --white: #FFFFFF;\r\n }\r\n\r\n *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\n html { scroll-behavior: smooth; }\r\n\r\n body {\r\n font-family: 'Barlow', sans-serif;\r\n color: var(--text);\r\n background: var(--light-bg);\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* =============================================\r\n NAVIGATION\r\n ============================================= *\/\r\n nav {\r\n position: fixed;\r\n inset: 0 0 auto 0;\r\n z-index: 1000;\r\n height: 70px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 0 48px;\r\n background: transparent;\r\n transition: background 0.35s ease, box-shadow 0.35s ease;\r\n }\r\n\r\n nav.scrolled {\r\n background: rgba(12, 13, 16, 0.94);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n box-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);\r\n }\r\n\r\n .nav-logo {\r\n text-decoration: none;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n flex-shrink: 0;\r\n }\r\n\r\n \/* Logo-box \u2013 3 kolorowe kwadraty nawi\u0105zuj\u0105ce do logo *\/\r\n .nav-logo-icon {\r\n width: 32px;\r\n height: 32px;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 3px;\r\n }\r\n\r\n .nav-logo-icon span {\r\n border-radius: 2px;\r\n }\r\n\r\n .nav-logo-icon span:nth-child(1) { background: var(--primary); }\r\n .nav-logo-icon span:nth-child(2) { background: var(--accent); }\r\n .nav-logo-icon span:nth-child(3) { background: var(--green); }\r\n .nav-logo-icon span:nth-child(4) { background: rgba(255,255,255,0.15); }\r\n\r\n .nav-logo-text {\r\n font-size: 18px;\r\n font-weight: 700;\r\n color: var(--white);\r\n letter-spacing: 0.06em;\r\n }\r\n\r\n .nav-logo-text small {\r\n display: block;\r\n font-size: 9px;\r\n font-weight: 500;\r\n letter-spacing: 0.12em;\r\n color: rgba(255,255,255,0.45);\r\n text-transform: uppercase;\r\n }\r\n\r\n .nav-links {\r\n display: flex;\r\n align-items: center;\r\n gap: 36px;\r\n list-style: none;\r\n }\r\n\r\n .nav-links a {\r\n color: rgba(255, 255, 255, 0.75);\r\n text-decoration: none;\r\n font-size: 12px;\r\n font-weight: 600;\r\n letter-spacing: 0.1em;\r\n text-transform: uppercase;\r\n transition: color 0.2s;\r\n }\r\n\r\n .nav-links a:hover { color: var(--white); }\r\n\r\n .nav-cta {\r\n background: var(--accent) !important;\r\n color: var(--white) !important;\r\n padding: 10px 22px !important;\r\n border-radius: 3px;\r\n letter-spacing: 0.08em !important;\r\n transition: background 0.2s, transform 0.15s !important;\r\n }\r\n\r\n .nav-cta:hover {\r\n background: #c71d1b !important;\r\n transform: translateY(-1px);\r\n }\r\n\r\n \/* Hamburger mobile *\/\r\n .hamburger {\r\n display: none;\r\n flex-direction: column;\r\n gap: 5px;\r\n cursor: pointer;\r\n padding: 6px;\r\n background: none;\r\n border: none;\r\n }\r\n\r\n .hamburger span {\r\n display: block;\r\n width: 24px;\r\n height: 2px;\r\n background: var(--white);\r\n transition: 0.3s;\r\n border-radius: 2px;\r\n }\r\n\r\n .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }\r\n .hamburger.open span:nth-child(2) { opacity: 0; }\r\n .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }\r\n\r\n .mobile-menu {\r\n display: none;\r\n position: fixed;\r\n inset: 70px 0 0 0;\r\n background: rgba(12, 13, 16, 0.97);\r\n z-index: 999;\r\n flex-direction: column;\r\n padding: 40px 32px;\r\n gap: 28px;\r\n }\r\n\r\n .mobile-menu.open { display: flex; }\r\n\r\n .mobile-menu a {\r\n color: var(--white);\r\n text-decoration: none;\r\n font-size: 20px;\r\n font-weight: 600;\r\n letter-spacing: 0.04em;\r\n border-bottom: 1px solid rgba(255,255,255,0.08);\r\n padding-bottom: 20px;\r\n }\r\n\r\n .mobile-menu a.mobile-cta {\r\n background: var(--accent);\r\n text-align: center;\r\n padding: 16px;\r\n border-radius: 4px;\r\n border-bottom: none;\r\n }\r\n\r\n \/* =============================================\r\n HERO\r\n ============================================= *\/\r\n .hero {\r\n position: relative;\r\n height: 100vh;\r\n min-height: 660px;\r\n display: flex;\r\n align-items: center;\r\n overflow: hidden;\r\n background: var(--darker);\r\n }\r\n\r\n \/* \u2500\u2500 T\u0142o gradientowe \u2013 zast\u0105p image url gdy b\u0119dzie zdj\u0119cie spawacza \u2500\u2500\r\n Aby u\u017cy\u0107 zdj\u0119cia:\r\n 1. dodaj plik welder.jpg do katalogu\r\n 2. usu\u0144 .hero-bg-gradient\r\n 3. odkomentuj .hero-photo poni\u017cej\r\n *\/\r\n .hero-bg-gradient {\r\n position: absolute;\r\n inset: 0;\r\n background:\r\n radial-gradient(ellipse 55% 60% at 23% 72%, rgba(255, 130, 30, 0.15) 0%, transparent 55%),\r\n radial-gradient(ellipse 40% 40% at 23% 72%, rgba(255, 200, 60, 0.08) 0%, transparent 40%),\r\n radial-gradient(ellipse 80% 80% at 60% 40%, rgba(13, 159, 216, 0.04) 0%, transparent 70%),\r\n linear-gradient(160deg, #0a0c0f 0%, #1a1d22 45%, #0f1114 100%);\r\n }\r\n\r\n \/* Subtelna siatka techniczna *\/\r\n .hero-bg-gradient::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background-image:\r\n linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);\r\n background-size: 60px 60px;\r\n }\r\n\r\n \/*\r\n .hero-photo {\r\n position: absolute;\r\n inset: 0;\r\n background: url('welder.jpg') center 30% \/ cover no-repeat;\r\n }\r\n .hero-photo::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(\r\n to right,\r\n rgba(10, 12, 15, 0.25) 0%,\r\n rgba(10, 12, 15, 0.55) 40%,\r\n rgba(10, 12, 15, 0.88) 100%\r\n );\r\n }\r\n *\/\r\n\r\n \/* Canvas iskier \u2013 kryje si\u0119 na ca\u0142ym hero *\/\r\n #sparksCanvas {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 2;\r\n pointer-events: none;\r\n }\r\n\r\n .hero-content {\r\n position: relative;\r\n z-index: 3;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 48px;\r\n width: 100%;\r\n }\r\n\r\n .hero-eyebrow {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 12px;\r\n font-size: 11px;\r\n font-weight: 700;\r\n letter-spacing: 0.2em;\r\n text-transform: uppercase;\r\n color: var(--primary);\r\n margin-bottom: 22px;\r\n }\r\n\r\n .hero-eyebrow::before {\r\n content: '';\r\n width: 32px;\r\n height: 2px;\r\n background: var(--primary);\r\n flex-shrink: 0;\r\n }\r\n\r\n .hero h1 {\r\n font-size: clamp(34px, 5.2vw, 68px);\r\n font-weight: 800;\r\n color: var(--white);\r\n line-height: 1.07;\r\n max-width: 720px;\r\n margin-bottom: 26px;\r\n letter-spacing: -0.01em;\r\n }\r\n\r\n .hero h1 em {\r\n font-style: normal;\r\n color: var(--primary);\r\n }\r\n\r\n .hero-subtitle {\r\n font-size: clamp(15px, 1.8vw, 19px);\r\n color: rgba(255, 255, 255, 0.62);\r\n max-width: 500px;\r\n line-height: 1.65;\r\n margin-bottom: 42px;\r\n font-weight: 400;\r\n }\r\n\r\n .hero-ctas {\r\n display: flex;\r\n gap: 14px;\r\n flex-wrap: wrap;\r\n margin-bottom: 52px;\r\n }\r\n\r\n \/* \u2500\u2500 Buttons \u2500\u2500 *\/\r\n .btn-primary {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n background: var(--accent);\r\n color: var(--white);\r\n padding: 15px 34px;\r\n border: none;\r\n border-radius: 3px;\r\n font-family: 'Barlow', sans-serif;\r\n font-size: 14px;\r\n font-weight: 700;\r\n letter-spacing: 0.06em;\r\n text-transform: uppercase;\r\n text-decoration: none;\r\n cursor: pointer;\r\n transition: background 0.2s, transform 0.15s, box-shadow 0.2s;\r\n }\r\n\r\n .btn-primary:hover {\r\n background: #c71d1b;\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 24px rgba(227, 35, 32, 0.4);\r\n }\r\n\r\n .btn-outline {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n background: transparent;\r\n color: var(--white);\r\n padding: 15px 34px;\r\n border: 1.5px solid rgba(255, 255, 255, 0.35);\r\n border-radius: 3px;\r\n font-family: 'Barlow', sans-serif;\r\n font-size: 14px;\r\n font-weight: 600;\r\n letter-spacing: 0.06em;\r\n text-transform: uppercase;\r\n text-decoration: none;\r\n cursor: pointer;\r\n transition: border-color 0.2s, background 0.2s, transform 0.15s;\r\n }\r\n\r\n .btn-outline:hover {\r\n border-color: var(--white);\r\n background: rgba(255, 255, 255, 0.08);\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* Inline-stats pod CTA *\/\r\n .hero-badges {\r\n display: flex;\r\n gap: 32px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .hero-badge {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: rgba(255, 255, 255, 0.45);\r\n font-size: 12px;\r\n font-weight: 500;\r\n letter-spacing: 0.05em;\r\n text-transform: uppercase;\r\n }\r\n\r\n .hero-badge::before {\r\n content: '';\r\n width: 5px;\r\n height: 5px;\r\n border-radius: 50%;\r\n background: var(--green);\r\n flex-shrink: 0;\r\n }\r\n\r\n \/* Scroll indicator *\/\r\n .scroll-indicator {\r\n position: absolute;\r\n bottom: 28px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n z-index: 3;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n\r\n .scroll-indicator span {\r\n font-size: 10px;\r\n letter-spacing: 0.15em;\r\n text-transform: uppercase;\r\n color: rgba(255, 255, 255, 0.3);\r\n }\r\n\r\n .scroll-arrow {\r\n width: 22px;\r\n height: 22px;\r\n border-right: 1.5px solid rgba(255, 255, 255, 0.25);\r\n border-bottom: 1.5px solid rgba(255, 255, 255, 0.25);\r\n transform: rotate(45deg);\r\n animation: bounce 2s ease-in-out infinite;\r\n }\r\n\r\n @keyframes bounce {\r\n 0%, 100% { transform: rotate(45deg) translateY(0); }\r\n 50% { transform: rotate(45deg) translateY(5px); }\r\n }\r\n\r\n \/* =============================================\r\n TRUST BAR\r\n ============================================= *\/\r\n .trust-bar {\r\n background: var(--dark);\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.06);\r\n padding: 36px 48px;\r\n }\r\n\r\n .trust-bar-inner {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 8px;\r\n text-align: center;\r\n }\r\n\r\n .trust-item {\r\n padding: 16px;\r\n border-right: 1px solid rgba(255, 255, 255, 0.08);\r\n }\r\n\r\n .trust-item:last-child { border-right: none; }\r\n\r\n .trust-number {\r\n font-size: clamp(28px, 3.5vw, 42px);\r\n font-weight: 800;\r\n color: var(--primary);\r\n line-height: 1;\r\n letter-spacing: -0.02em;\r\n }\r\n\r\n .trust-label {\r\n font-size: 11px;\r\n font-weight: 600;\r\n letter-spacing: 0.12em;\r\n text-transform: uppercase;\r\n color: rgba(255, 255, 255, 0.45);\r\n margin-top: 8px;\r\n }\r\n\r\n \/* =============================================\r\n PRODUCTS SECTION \u2013 TABS\r\n ============================================= *\/\r\n .products {\r\n padding: 90px 48px;\r\n background: var(--light-bg);\r\n }\r\n\r\n .products-inner {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n }\r\n\r\n .section-eyebrow {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 12px;\r\n font-size: 11px;\r\n font-weight: 700;\r\n letter-spacing: 0.2em;\r\n text-transform: uppercase;\r\n color: var(--primary);\r\n margin-bottom: 16px;\r\n }\r\n\r\n .section-eyebrow::before {\r\n content: '';\r\n width: 32px;\r\n height: 2px;\r\n background: var(--primary);\r\n }\r\n\r\n .products-inner h2 {\r\n font-size: clamp(26px, 3.5vw, 42px);\r\n font-weight: 800;\r\n color: var(--text);\r\n line-height: 1.1;\r\n margin-bottom: 10px;\r\n letter-spacing: -0.01em;\r\n }\r\n\r\n .products-inner .section-desc {\r\n font-size: 17px;\r\n color: var(--muted);\r\n max-width: 520px;\r\n line-height: 1.65;\r\n margin-bottom: 48px;\r\n }\r\n\r\n \/* \u2500\u2500 Tabs nav \u2500\u2500 *\/\r\n .tabs-nav {\r\n display: flex;\r\n border-bottom: 2px solid var(--border);\r\n margin-bottom: 40px;\r\n overflow-x: auto;\r\n scrollbar-width: none;\r\n -webkit-overflow-scrolling: touch;\r\n gap: 0;\r\n }\r\n\r\n .tabs-nav::-webkit-scrollbar { display: none; }\r\n\r\n .tab-btn {\r\n flex-shrink: 0;\r\n background: none;\r\n border: none;\r\n border-bottom: 3px solid transparent;\r\n margin-bottom: -2px;\r\n padding: 14px 28px;\r\n font-family: 'Barlow', sans-serif;\r\n font-size: 13px;\r\n font-weight: 700;\r\n letter-spacing: 0.1em;\r\n text-transform: uppercase;\r\n color: var(--muted);\r\n cursor: pointer;\r\n transition: color 0.2s, border-color 0.2s;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n white-space: nowrap;\r\n }\r\n\r\n .tab-btn:hover { color: var(--text); }\r\n\r\n .tab-btn.active {\r\n color: var(--primary);\r\n border-bottom-color: var(--primary);\r\n }\r\n\r\n .tab-count {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-width: 20px;\r\n height: 20px;\r\n border-radius: 10px;\r\n background: var(--border);\r\n font-size: 10px;\r\n font-weight: 700;\r\n color: var(--muted);\r\n padding: 0 5px;\r\n transition: background 0.2s, color 0.2s;\r\n }\r\n\r\n .tab-btn.active .tab-count {\r\n background: rgba(13, 159, 216, 0.12);\r\n color: var(--primary);\r\n }\r\n\r\n \/* \u2500\u2500 Tab panels \u2500\u2500 *\/\r\n .tab-panel {\r\n display: none;\r\n animation: fadeUp 0.25s ease;\r\n }\r\n\r\n .tab-panel.active { display: block; }\r\n\r\n @keyframes fadeUp {\r\n from { opacity: 0; transform: translateY(10px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n \/* \u2500\u2500 Subcategory cards grid \u2500\u2500 *\/\r\n .subcategory-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));\r\n gap: 20px;\r\n }\r\n\r\n .subcategory-card {\r\n background: var(--white);\r\n border: 1px solid var(--border);\r\n border-radius: 6px;\r\n overflow: hidden;\r\n text-decoration: none;\r\n display: flex;\r\n flex-direction: column;\r\n transition: box-shadow 0.22s, transform 0.22s, border-color 0.22s;\r\n cursor: pointer;\r\n }\r\n\r\n .subcategory-card:hover {\r\n box-shadow: 0 10px 36px rgba(0, 0, 0, 0.10);\r\n transform: translateY(-4px);\r\n border-color: var(--primary);\r\n }\r\n\r\n \/* Placeholder obrazka z unikalnym kolorem per kategoria *\/\r\n .card-img {\r\n width: 100%;\r\n height: 155px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n overflow: hidden;\r\n flex-shrink: 0;\r\n }\r\n\r\n .card-img svg { opacity: 0.35; }\r\n\r\n \/* Photo label *\/\r\n .card-img::after {\r\n content: '+ DODAJ ZDJ\u0118CIE';\r\n position: absolute;\r\n bottom: 8px;\r\n right: 10px;\r\n font-size: 8px;\r\n letter-spacing: 0.12em;\r\n font-weight: 700;\r\n color: rgba(255, 255, 255, 0.25);\r\n }\r\n\r\n \/* Gradients per category group *\/\r\n .grad-wiaty { background: linear-gradient(135deg, #1a2535 0%, #2a3d52 100%); }\r\n .grad-meble { background: linear-gradient(135deg, #1c2a1a 0%, #2b4228 100%); }\r\n .grad-schody { background: linear-gradient(135deg, #2a1a1a 0%, #3d2828 100%); }\r\n .grad-ogrodzenia{ background: linear-gradient(135deg, #1a1a2a 0%, #282840 100%); }\r\n .grad-magazyny { background: linear-gradient(135deg, #211a10 0%, #3a2f1a 100%); }\r\n\r\n .card-body {\r\n padding: 18px 20px;\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .card-name {\r\n font-size: 13px;\r\n font-weight: 700;\r\n color: var(--text);\r\n letter-spacing: 0.06em;\r\n text-transform: uppercase;\r\n margin-bottom: 7px;\r\n }\r\n\r\n .card-desc {\r\n font-size: 13px;\r\n color: var(--muted);\r\n line-height: 1.55;\r\n flex: 1;\r\n }\r\n\r\n .card-footer {\r\n padding: 11px 20px 14px;\r\n border-top: 1px solid var(--border);\r\n background: #FAFAFA;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n }\r\n\r\n .card-cta-text {\r\n font-size: 11px;\r\n font-weight: 700;\r\n letter-spacing: 0.1em;\r\n text-transform: uppercase;\r\n color: var(--primary);\r\n }\r\n\r\n .card-arrow {\r\n width: 20px;\r\n height: 20px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: transform 0.2s;\r\n }\r\n\r\n .subcategory-card:hover .card-arrow { transform: translateX(4px); }\r\n\r\n .card-arrow svg { width: 14px; height: 14px; fill: none; stroke: var(--primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }\r\n\r\n \/* \u2500\u2500 CTA banner pod tabami \u2500\u2500 *\/\r\n .products-cta-row {\r\n margin-top: 44px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 20px;\r\n padding: 28px 36px;\r\n background: var(--dark);\r\n border-radius: 6px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .products-cta-row p {\r\n font-size: 16px;\r\n color: rgba(255, 255, 255, 0.7);\r\n max-width: 560px;\r\n line-height: 1.6;\r\n }\r\n\r\n .products-cta-row p strong {\r\n color: var(--white);\r\n }\r\n\r\n \/* =============================================\r\n RESPONSIVE\r\n ============================================= *\/\r\n @media (max-width: 900px) {\r\n nav { padding: 0 24px; }\r\n .nav-links { display: none; }\r\n .hamburger { display: flex; }\r\n\r\n .hero-content { padding: 0 24px; }\r\n .trust-bar { padding: 28px 24px; }\r\n .products { padding: 60px 24px; }\r\n\r\n .trust-bar-inner {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 0;\r\n }\r\n\r\n .trust-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }\r\n .trust-item:nth-child(3),\r\n .trust-item:last-child { border-bottom: none; }\r\n\r\n .tab-btn { padding: 12px 16px; font-size: 11px; }\r\n }\r\n\r\n @media (max-width: 540px) {\r\n .hero-ctas { flex-direction: column; }\r\n .btn-primary,\r\n .btn-outline { text-align: center; justify-content: center; }\r\n .hero-badges { flex-direction: column; gap: 12px; }\r\n\r\n .subcategory-grid { grid-template-columns: 1fr 1fr; }\r\n\r\n .products-cta-row { flex-direction: column; align-items: flex-start; }\r\n }\r\n\r\n @media (max-width: 380px) {\r\n .subcategory-grid { grid-template-columns: 1fr; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- =============================================\r\n NAVIGATION\r\n ============================================= -->\r\n <nav id=\"mainNav\">\r\n <a href=\"#\" class=\"nav-logo\" aria-label=\"INSTALMED \u2013 strona g\u0142\u00f3wna\">\r\n <div class=\"nav-logo-icon\" aria-hidden=\"true\">\r\n <span><\/span><span><\/span><span><\/span><span><\/span>\r\n <\/div>\r\n <div class=\"nav-logo-text\">\r\n INSTALMED\r\n <small>Sp. z o.o.<\/small>\r\n <\/div>\r\n <\/a>\r\n\r\n <ul class=\"nav-links\" role=\"list\">\r\n <li><a href=\"#uslugi\">Us\u0142ugi<\/a><\/li>\r\n <li><a href=\"#produkty\">Produkty<\/a><\/li>\r\n <li><a href=\"#realizacje\">Realizacje<\/a><\/li>\r\n <li><a href=\"#o-nas\">O nas<\/a><\/li>\r\n <li><a href=\"#kontakt\" class=\"nav-cta\">Wy\u015blij zapytanie<\/a><\/li>\r\n <\/ul>\r\n\r\n <button class=\"hamburger\" id=\"hamburger\" aria-label=\"Menu\" aria-expanded=\"false\">\r\n <span><\/span><span><\/span><span><\/span>\r\n <\/button>\r\n <\/nav>\r\n\r\n <!-- Mobile menu -->\r\n <nav class=\"mobile-menu\" id=\"mobileMenu\" aria-hidden=\"true\">\r\n <a href=\"#uslugi\" onclick=\"closeMobileMenu()\">Us\u0142ugi<\/a>\r\n <a href=\"#produkty\" onclick=\"closeMobileMenu()\">Produkty<\/a>\r\n <a href=\"#realizacje\" onclick=\"closeMobileMenu()\">Realizacje<\/a>\r\n <a href=\"#o-nas\" onclick=\"closeMobileMenu()\">O nas<\/a>\r\n <a href=\"#kontakt\" class=\"mobile-cta\" onclick=\"closeMobileMenu()\">Wy\u015blij zapytanie<\/a>\r\n <\/nav>\r\n\r\n <!-- =============================================\r\n HERO\r\n ============================================= -->\r\n <!--\r\n PHOTO TIP: Gdy b\u0119dziesz mia\u0142 zdj\u0119cie spawacza:\r\n 1. Dodaj klas\u0119 hero-photo zamiast hero-bg-gradient\r\n 2. Odkomentuj regu\u0142\u0119 .hero-photo w CSS\r\n 3. Zmie\u0144 \u015bcie\u017ck\u0119 na w\u0142a\u015bciw\u0105\r\n -->\r\n <section class=\"hero\" id=\"hero\" aria-label=\"Sekcja g\u0142\u00f3wna\">\r\n <div class=\"hero-bg-gradient\" aria-hidden=\"true\"><\/div>\r\n <canvas id=\"sparksCanvas\" aria-hidden=\"true\"><\/canvas>\r\n\r\n <div class=\"hero-content\">\r\n <div class=\"hero-eyebrow\" aria-hidden=\"true\">Produkcja wyrob\u00f3w metalowych od 2016 r.<\/div>\r\n\r\n <h1>\r\n Metalowe rozwi\u0105zania<br \/>\r\n <em>skrojone pod Tw\u00f3j projekt<\/em>\r\n <\/h1>\r\n\r\n <p class=\"hero-subtitle\">\r\n Obr\u00f3bka stali, us\u0142ugi spawalnicze i produkcja na zam\u00f3wienie \u2014\r\n od prototypu po seri\u0119. Stal czarna, nierdzewna i aluminium.\r\n <\/p>\r\n\r\n <div class=\"hero-ctas\">\r\n <a href=\"#kontakt\" class=\"btn-primary\">\r\n <!-- strza\u0142ka SVG -->\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\r\n Wy\u015blij zapytanie\r\n <\/a>\r\n <a href=\"#produkty\" class=\"btn-outline\">\r\n <!-- galeria SVG -->\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"\/><\/svg>\r\n Zobacz produkty\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"hero-badges\">\r\n <span class=\"hero-badge\">Produkcja wed\u0142ug dokumentacji klienta<\/span>\r\n <span class=\"hero-badge\">Prototyp i seria<\/span>\r\n <span class=\"hero-badge\">Wycena w 48 h<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"scroll-indicator\" aria-hidden=\"true\">\r\n <span>Przewi\u0144<\/span>\r\n <div class=\"scroll-arrow\"><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- =============================================\r\n TRUST BAR\r\n ============================================= -->\r\n <section class=\"trust-bar\" aria-label=\"Kluczowe liczby\">\r\n <div class=\"trust-bar-inner\">\r\n <div class=\"trust-item\">\r\n <div class=\"trust-number\" data-target=\"9\">0<\/div>\r\n <div class=\"trust-label\">Lat do\u015bwiadczenia<\/div>\r\n <\/div>\r\n <div class=\"trust-item\">\r\n <div class=\"trust-number\" data-target=\"300\" data-suffix=\"+\">0<\/div>\r\n <div class=\"trust-label\">Zrealizowanych projekt\u00f3w<\/div>\r\n <\/div>\r\n <div class=\"trust-item\">\r\n <div class=\"trust-number\" data-target=\"3\">0<\/div>\r\n <div class=\"trust-label\">Rodzaje materia\u0142\u00f3w<\/div>\r\n <\/div>\r\n <div class=\"trust-item\">\r\n <div class=\"trust-number\" data-target=\"48\" data-suffix=\"h\">0<\/div>\r\n <div class=\"trust-label\">Na wycen\u0119<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- =============================================\r\n PRODUKTY \u2013 TABS (Opcja B)\r\n ============================================= -->\r\n <section class=\"products\" id=\"produkty\" aria-label=\"Nasze produkty\">\r\n <div class=\"products-inner\">\r\n\r\n <div class=\"section-eyebrow\" aria-hidden=\"true\">Zakres produkcji<\/div>\r\n <h2>Co produkujemy<\/h2>\r\n <p class=\"section-desc\">\r\n Pe\u0142en zakres wyrob\u00f3w metalowych \u2014 od element\u00f3w ma\u0142ej architektury\r\n po zabudowy maszyn przemys\u0142owych.\r\n <\/p>\r\n\r\n <!-- Tabs nav -->\r\n <div class=\"tabs-nav\" role=\"tablist\" aria-label=\"Kategorie produkt\u00f3w\">\r\n <button class=\"tab-btn active\" role=\"tab\" aria-selected=\"true\" aria-controls=\"tab-wiaty\" data-tab=\"tab-wiaty\" id=\"btn-wiaty\">\r\n Wiaty <span class=\"tab-count\">3<\/span>\r\n <\/button>\r\n <button class=\"tab-btn\" role=\"tab\" aria-selected=\"false\" aria-controls=\"tab-meble\" data-tab=\"tab-meble\" id=\"btn-meble\">\r\n Meble miejskie <span class=\"tab-count\">5<\/span>\r\n <\/button>\r\n <button class=\"tab-btn\" role=\"tab\" aria-selected=\"false\" aria-controls=\"tab-schody\" data-tab=\"tab-schody\" id=\"btn-schody\">\r\n Schody <span class=\"tab-count\">2<\/span>\r\n <\/button>\r\n <button class=\"tab-btn\" role=\"tab\" aria-selected=\"false\" aria-controls=\"tab-ogrodzenia\" data-tab=\"tab-ogrodzenia\" id=\"btn-ogrodzenia\">\r\n Ogrodzenia <span class=\"tab-count\">2<\/span>\r\n <\/button>\r\n <button class=\"tab-btn\" role=\"tab\" aria-selected=\"false\" aria-controls=\"tab-magazyny\" data-tab=\"tab-magazyny\" id=\"btn-magazyny\">\r\n Magazyny i hale <span class=\"tab-count\">2<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <!-- \u2500\u2500 TAB 1: WIATY \u2500\u2500 -->\r\n <div class=\"tab-panel active\" id=\"tab-wiaty\" role=\"tabpanel\" aria-labelledby=\"btn-wiaty\">\r\n <div class=\"subcategory-grid\">\r\n\r\n <a href=\"#kontakt\" class=\"subcategory-card\">\r\n <div class=\"card-img grad-wiaty\">\r\n <!-- ikona wiaty \u015bmietnikowej -->\r\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\">\r\n <rect x=\"8\" y=\"24\" width=\"48\" height=\"30\" rx=\"1\"\/>\r\n <polyline points=\"4,24 32,8 60,24\"\/>\r\n <line x1=\"22\" y1=\"24\" x2=\"22\" y2=\"54\"\/>\r\n <line x1=\"42\" y1=\"24\" x2=\"42\" y2=\"54\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <div class=\"card-name\">Wiaty \u015bmietnikowe<\/div>\r\n <p class=\"card-desc\">Zabudowy na pojemniki odpad\u00f3w, estetyczne i trwa\u0142e. Dost\u0119pne w dowolnym wymiarze, lakierowane proszkowo.<\/p>\r\n <\/div>\r\n <div class=\"card-footer\">\r\n <span class=\"card-cta-text\">Zapytaj o wycen\u0119<\/span>\r\n <span class=\"card-arrow\"><svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg><\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <a href=\"#kontakt\" class=\"subcategory-card\">\r\n <div class=\"card-img grad-wiaty\">\r\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\">\r\n <rect x=\"4\" y=\"22\" width=\"56\" height=\"32\" rx=\"1\"\/>\r\n <polyline points=\"2,22 32,6 62,22\"\/>\r\n <rect x=\"10\" y=\"34\" width=\"18\" height=\"20\"\/>\r\n <rect x=\"36\" y=\"34\" width=\"18\" height=\"20\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <div class=\"card-name\">Wiaty samochodowe<\/div>\r\n <p class=\"card-desc\">Zadaszenia dla samochod\u00f3w osobowych i dostawczych. Konstrukcja ze stali ocynkowanej lub aluminium.<\/p>\r\n <\/div>\r\n <div class=\"card-footer\">\r\n <span class=\"card-cta-text\">Zapytaj o wycen\u0119<\/span>\r\n <span class=\"card-arrow\"><svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg><\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <a href=\"#kontakt\" class=\"subcategory-card\">\r\n <div class=\"card-img grad-wiaty\">\r\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\">\r\n <polyline points=\"4,28 32,10 60,28\"\/>\r\n <line x1=\"12\" y1=\"28\" x2=\"12\" y2=\"54\"\/>\r\n <line x1=\"52\" y1=\"28\" x2=\"52\" y2=\"54\"\/>\r\n <line x1=\"12\" y1=\"54\" x2=\"52\" y2=\"54\"\/>\r\n <line x1=\"20\" y1=\"38\" x2=\"44\" y2=\"38\"\/>\r\n <line x1=\"20\" y1=\"44\" x2=\"44\" y2=\"44\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <div class=\"card-name\">Wiaty rowerowe<\/div>\r\n <p class=\"card-desc\">Zadaszenia z miejscami na rowery dla osiedli, szk\u00f3\u0142 i obiekt\u00f3w us\u0142ugowych. Mo\u017cliwo\u015b\u0107 zabudowy z sidingu.<\/p>\r\n <\/div>\r\n <div class=\"card-footer\">\r\n <span class=\"card-cta-text\">Zapytaj o wycen\u0119<\/span>\r\n <span class=\"card-arrow\"><svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg><\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u2500\u2500 TAB 2: MEBLE MIEJSKIE \u2500\u2500 -->\r\n <div class=\"tab-panel\" id=\"tab-meble\" role=\"tabpanel\" aria-labelledby=\"btn-meble\">\r\n <div class=\"subcategory-grid\">\r\n\r\n <a href=\"#kontakt\" class=\"subcategory-card\">\r\n <div class=\"card-img grad-meble\">\r\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\">\r\n <rect x=\"6\" y=\"26\" width=\"52\" height=\"8\" rx=\"2\"\/>\r\n <line x1=\"14\" y1=\"34\" x2=\"12\" y2=\"50\"\/>\r\n <line x1=\"50\" y1=\"34\" x2=\"52\" y2=\"50\"\/>\r\n <line x1=\"22\" y1=\"34\" x2=\"20\" y2=\"50\"\/>\r\n <line x1=\"42\" y1=\"34\" x2=\"44\" y2=\"50\"\/>\r\n <rect x=\"10\" y=\"18\" width=\"44\" height=\"8\" rx=\"2\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <div class=\"card-name\">\u0141awki sportowe<\/div>\r\n <p class=\"card-desc\">Siedziska przy boiskach, kortach i obiektach sportowych. Ocynkowane z wype\u0142nieniem plastikowym lub drewnianym.<\/p>\r\n <\/div>\r\n <div class=\"card-footer\">\r\n <span class=\"card-cta-text\">Zapytaj o wycen\u0119<\/span>\r\n <span class=\"card-arrow\"><svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg><\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <a href=\"#kontakt\" class=\"subcategory-card\">\r\n <div class=\"card-img grad-meble\">\r\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\">\r\n <rect x=\"6\" y=\"28\" width=\"52\" height=\"6\" rx=\"2\"\/>\r\n <line x1=\"14\" y1=\"34\" x2=\"12\" y2=\"52\"\/>\r\n <line x1=\"50\" y1=\"34\" x2=\"52\" y2=\"52\"\/>\r\n <line x1=\"10\" y1=\"18\" x2=\"10\" y2=\"28\"\/>\r\n <line x1=\"54\" y1=\"18\" x2=\"54\" y2=\"28\"\/>\r\n <line x1=\"10\" y1=\"18\" x2=\"54\" y2=\"18\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <div class=\"card-name\">\u0141awki parkowe<\/div>\r\n <p class=\"card-desc\">\u0141awki do park\u00f3w i przestrzeni wsp\u00f3lnych. Projektowane indywidualnie lub wed\u0142ug wzornika.<\/p>\r\n <\/div>\r\n <div class=\"card-footer\">\r\n <span class=\"card-cta-text\">Zapytaj o wycen\u0119<\/span>\r\n <span class=\"card-arrow\"><svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg><\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <a href=\"#kontakt\" class=\"subcategory-card\">\r\n <div class=\"card-img grad-meble\">\r\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\">\r\n <rect x=\"10\" y=\"10\" width=\"44\" height=\"44\" rx=\"3\"\/>\r\n <rect x=\"18\" y=\"22\" width=\"28\" height=\"22\" rx=\"2\"\/>\r\n <line x1=\"10\" y1=\"10\" x2=\"18\" y2=\"22\"\/>\r\n <line x1=\"54\" y1=\"10\" x2=\"46\" y2=\"22\"\/>\r\n <line x1=\"10\" y1=\"54\" x2=\"18\" y2=\"44\"\/>\r\n <line x1=\"54\" y1=\"54\" x2=\"46\" y2=\"44\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <div class=\"card-name\">Piaskownice<\/div>\r\n <p class=\"card-desc\">Metalowe ramy piaskownic dla plac\u00f3w zabaw. Ocynkowane, bezpieczne dla dzieci, odporne na warunki atmosferyczne.<\/p>\r\n <\/div>\r\n <div class=\"card-footer\">\r\n <span class=\"card-cta-text\">Zapytaj o wycen\u0119<\/span>\r\n <span class=\"card-arrow\"><svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg><\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <a href=\"#kontakt\" class=\"subcategory-card\">\r\n <div class=\"card-img grad-meble\">\r\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\">\r\n <rect x=\"20\" y=\"12\" width=\"24\" height=\"30\" rx=\"2\"\/>\r\n <path d=\"M20 42 L14 56 L50 56 L44 42\"\/>\r\n <line x1=\"32\" y1=\"12\" x2=\"32\" y2=\"6\"\/>\r\n <circle cx=\"32\" cy=\"5\" r=\"2\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <div class=\"card-name\">Kosze uliczne<\/div>\r\n <p class=\"card-desc\">Stalowe kosze na odpady do przestrzeni publicznych. Montowane w betonie lub na ko\u0142nierzu.<\/p>\r\n <\/div>\r\n <div class=\"card-footer\">\r\n <span class=\"card-cta-text\">Zapytaj o wycen\u0119<\/span>\r\n <span class=\"card-arrow\"><svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg><\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <a href=\"#kontakt\" class=\"subcategory-card\">\r\n <div class=\"card-img grad-meble\">\r\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\">\r\n <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"56\"\/>\r\n <line x1=\"52\" y1=\"8\" x2=\"52\" y2=\"56\"\/>\r\n <line x1=\"8\" y1=\"8\" x2=\"56\" y2=\"8\"\/>\r\n <line x1=\"12\" y1=\"24\" x2=\"52\" y2=\"24\"\/>\r\n <line x1=\"12\" y1=\"40\" x2=\"52\" y2=\"40\"\/>\r\n <line x1=\"24\" y1=\"24\" x2=\"24\" y2=\"40\"\/>\r\n <line x1=\"36\" y1=\"24\" x2=\"36\" y2=\"40\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <div class=\"card-name\">Wieszaki i trzepaki<\/div>\r\n <p class=\"card-desc\">Osiedlowe trzepaki i wieszaki na pranie wed\u0142ug norm. Malowane proszkowo w wybranym kolorze RAL.<\/p>\r\n <\/div>\r\n <div class=\"card-footer\">\r\n <span class=\"card-cta-text\">Zapytaj o wycen\u0119<\/span>\r\n <span class=\"card-arrow\"><svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg><\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u2500\u2500 TAB 3: SCHODY \u2500\u2500 -->\r\n <div class=\"tab-panel\" id=\"tab-schody\" role=\"tabpanel\" aria-labelledby=\"btn-schody\">\r\n <div class=\"subcategory-grid\">\r\n\r\n <a href=\"#kontakt\" class=\"subcategory-card\">\r\n <div class=\"card-img grad-schody\">\r\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\">\r\n <polyline points=\"8,56 8,44 20,44 20,32 32,32 32,20 44,20 44,8 56,8\"\/>\r\n <line x1=\"8\" y1=\"56\" x2=\"56\" y2=\"56\"\/>\r\n <line x1=\"56\" y1=\"8\" x2=\"56\" y2=\"56\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <div class=\"card-name\">Schody zewn\u0119trzne<\/div>\r\n <p class=\"card-desc\">Stalowe schody do wej\u015b\u0107 budynk\u00f3w, taras\u00f3w i podest\u00f3w zewn\u0119trznych. Kraty pomostowe lub wype\u0142nienie blach\u0105.<\/p>\r\n <\/div>\r\n <div class=\"card-footer\">\r\n <span class=\"card-cta-text\">Zapytaj o wycen\u0119<\/span>\r\n <span class=\"card-arrow\"><svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg><\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <a href=\"#kontakt\" class=\"subcategory-card\">\r\n <div class=\"card-img grad-schody\">\r\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\">\r\n <polyline points=\"56,56 56,44 44,44 44,32 32,32 32,20 20,20 20,8 8,8\"\/>\r\n <line x1=\"8\" y1=\"8\" x2=\"8\" y2=\"56\"\/>\r\n <line x1=\"8\" y1=\"56\" x2=\"56\" y2=\"56\"\/>\r\n <line x1=\"8\" y1=\"8\" x2=\"6\" y2=\"8\"\/>\r\n <line x1=\"56\" y1=\"8\" x2=\"56\" y2=\"14\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <div class=\"card-name\">Schody wewn\u0119trzne<\/div>\r\n <p class=\"card-desc\">Schody stalowe do wn\u0119trz z balustradami. Mo\u017cliwo\u015b\u0107 wyko\u0144czenia drewnem lub szk\u0142em bezpiecznym.<\/p>\r\n <\/div>\r\n <div class=\"card-footer\">\r\n <span class=\"card-cta-text\">Zapytaj o wycen\u0119<\/span>\r\n <span class=\"card-arrow\"><svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg><\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u2500\u2500 TAB 4: OGRODZENIA \u2500\u2500 -->\r\n <div class=\"tab-panel\" id=\"tab-ogrodzenia\" role=\"tabpanel\" aria-labelledby=\"btn-ogrodzenia\">\r\n <div class=\"subcategory-grid\">\r\n\r\n <a href=\"#kontakt\" class=\"subcategory-card\">\r\n <div class=\"card-img grad-ogrodzenia\">\r\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\">\r\n <line x1=\"8\" y1=\"16\" x2=\"8\" y2=\"56\"\/>\r\n <line x1=\"22\" y1=\"16\" x2=\"22\" y2=\"56\"\/>\r\n <line x1=\"36\" y1=\"16\" x2=\"36\" y2=\"56\"\/>\r\n <line x1=\"50\" y1=\"16\" x2=\"50\" y2=\"56\"\/>\r\n <line x1=\"4\" y1=\"28\" x2=\"58\" y2=\"28\"\/>\r\n <line x1=\"4\" y1=\"44\" x2=\"58\" y2=\"44\"\/>\r\n <polyline points=\"4,16 8,10 22,10 36,10 50,10 58,16\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <div class=\"card-name\">Ogrodzenia stalowe<\/div>\r\n <p class=\"card-desc\">Prz\u0119s\u0142a, s\u0142upki i bramy z profili stalowych. Ocynkowanie ogniowe + malowanie proszkowe, dowolny kolor RAL.<\/p>\r\n <\/div>\r\n <div class=\"card-footer\">\r\n <span class=\"card-cta-text\">Zapytaj o wycen\u0119<\/span>\r\n <span class=\"card-arrow\"><svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg><\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <a href=\"#kontakt\" class=\"subcategory-card\">\r\n <div class=\"card-img grad-ogrodzenia\">\r\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\">\r\n <rect x=\"4\" y=\"16\" width=\"8\" height=\"40\" rx=\"1\"\/>\r\n <rect x=\"20\" y=\"22\" width=\"6\" height=\"34\" rx=\"1\"\/>\r\n <rect x=\"34\" y=\"22\" width=\"6\" height=\"34\" rx=\"1\"\/>\r\n <rect x=\"48\" y=\"16\" width=\"8\" height=\"40\" rx=\"1\"\/>\r\n <line x1=\"4\" y1=\"28\" x2=\"56\" y2=\"28\"\/>\r\n <line x1=\"4\" y1=\"42\" x2=\"56\" y2=\"42\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <div class=\"card-name\">Ogrodzenia aluminiowe<\/div>\r\n <p class=\"card-desc\">Lekkie, korozjoodporne ogrodzenia aluminiowe do zastosowa\u0144 rezydencjalnych i komercyjnych.<\/p>\r\n <\/div>\r\n <div class=\"card-footer\">\r\n <span class=\"card-cta-text\">Zapytaj o wycen\u0119<\/span>\r\n <span class=\"card-arrow\"><svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg><\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u2500\u2500 TAB 5: MAGAZYNY I HALE \u2500\u2500 -->\r\n <div class=\"tab-panel\" id=\"tab-magazyny\" role=\"tabpanel\" aria-labelledby=\"btn-magazyny\">\r\n <div class=\"subcategory-grid\">\r\n\r\n <a href=\"#kontakt\" class=\"subcategory-card\">\r\n <div class=\"card-img grad-magazyny\">\r\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\">\r\n <rect x=\"4\" y=\"28\" width=\"56\" height=\"28\" rx=\"1\"\/>\r\n <polyline points=\"4,28 32,12 60,28\"\/>\r\n <line x1=\"14\" y1=\"56\" x2=\"14\" y2=\"38\"\/>\r\n <line x1=\"50\" y1=\"56\" x2=\"50\" y2=\"38\"\/>\r\n <rect x=\"24\" y=\"40\" width=\"16\" height=\"16\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <div class=\"card-name\">Magazyny z p\u0142yty warstwowej<\/div>\r\n <p class=\"card-desc\">Hale magazynowe na konstrukcji stalowej z poszytem z p\u0142yty warstwowej. Dowolna wielko\u015b\u0107 i uk\u0142ad wn\u0119trza.<\/p>\r\n <\/div>\r\n <div class=\"card-footer\">\r\n <span class=\"card-cta-text\">Zapytaj o wycen\u0119<\/span>\r\n <span class=\"card-arrow\"><svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg><\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <a href=\"#kontakt\" class=\"subcategory-card\">\r\n <div class=\"card-img grad-magazyny\">\r\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\">\r\n <rect x=\"8\" y=\"30\" width=\"48\" height=\"26\" rx=\"1\"\/>\r\n <line x1=\"8\" y1=\"30\" x2=\"32\" y2=\"14\"\/>\r\n <line x1=\"56\" y1=\"30\" x2=\"32\" y2=\"14\"\/>\r\n <line x1=\"18\" y1=\"56\" x2=\"18\" y2=\"30\"\/>\r\n <line x1=\"46\" y1=\"56\" x2=\"46\" y2=\"30\"\/>\r\n <line x1=\"32\" y1=\"56\" x2=\"32\" y2=\"30\"\/>\r\n <line x1=\"8\" y1=\"44\" x2=\"56\" y2=\"44\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <div class=\"card-name\">Konstrukcje stalowe kubaturowe<\/div>\r\n <p class=\"card-desc\">Szkielety stalowe hal przemys\u0142owych, zadasze\u0144 i obiekt\u00f3w us\u0142ugowych. Projektowanie i monta\u017c.<\/p>\r\n <\/div>\r\n <div class=\"card-footer\">\r\n <span class=\"card-cta-text\">Zapytaj o wycen\u0119<\/span>\r\n <span class=\"card-arrow\"><svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg><\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- CTA row pod tabami -->\r\n <div class=\"products-cta-row\">\r\n <p>\r\n <strong>Nie widzisz tego, czego potrzebujesz?<\/strong><br \/>\r\n Realizujemy niestandardowe zlecenia \u2014 wy\u015blij opis lub dokumentacj\u0119, a otrzymasz wycen\u0119 w 48 godziny.\r\n <\/p>\r\n <a href=\"#kontakt\" class=\"btn-primary\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\r\n Wy\u015blij zapytanie\r\n <\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- =============================================\r\n SCRIPTS\r\n ============================================= *\/\r\n <script>\r\n 'use strict';\r\n\r\n \/* \u2500\u2500 Sticky nav \u2500\u2500 *\/\r\n const nav = document.getElementById('mainNav');\r\n window.addEventListener('scroll', () => {\r\n nav.classList.toggle('scrolled', window.scrollY > 60);\r\n }, { passive: true });\r\n\r\n \/* \u2500\u2500 Hamburger mob menu \u2500\u2500 *\/\r\n const hamburger = document.getElementById('hamburger');\r\n const mobileMenu = document.getElementById('mobileMenu');\r\n\r\n hamburger.addEventListener('click', () => {\r\n const isOpen = hamburger.classList.toggle('open');\r\n hamburger.setAttribute('aria-expanded', String(isOpen));\r\n mobileMenu.classList.toggle('open', isOpen);\r\n mobileMenu.setAttribute('aria-hidden', String(!isOpen));\r\n document.body.style.overflow = isOpen ? 'hidden' : '';\r\n });\r\n\r\n function closeMobileMenu() {\r\n hamburger.classList.remove('open');\r\n hamburger.setAttribute('aria-expanded', 'false');\r\n mobileMenu.classList.remove('open');\r\n mobileMenu.setAttribute('aria-hidden', 'true');\r\n document.body.style.overflow = '';\r\n }\r\n\r\n \/* \u2500\u2500 Tabs \u2500\u2500 *\/\r\n const tabBtns = document.querySelectorAll('.tab-btn');\r\n const tabPanels = document.querySelectorAll('.tab-panel');\r\n\r\n tabBtns.forEach(btn => {\r\n btn.addEventListener('click', () => {\r\n const target = btn.dataset.tab;\r\n tabBtns.forEach(b => {\r\n b.classList.remove('active');\r\n b.setAttribute('aria-selected', 'false');\r\n });\r\n tabPanels.forEach(p => p.classList.remove('active'));\r\n btn.classList.add('active');\r\n btn.setAttribute('aria-selected', 'true');\r\n document.getElementById(target).classList.add('active');\r\n });\r\n });\r\n\r\n \/* \u2500\u2500 Trust bar counter animation \u2500\u2500 *\/\r\n function animateCounters() {\r\n document.querySelectorAll('.trust-number[data-target]').forEach(el => {\r\n const target = parseInt(el.dataset.target, 10);\r\n const suffix = el.dataset.suffix || '';\r\n const duration = 1400;\r\n const startTime = performance.now();\r\n\r\n function step(now) {\r\n const elapsed = now - startTime;\r\n const progress = Math.min(elapsed \/ duration, 1);\r\n \/\/ easeOutQuart\r\n const eased = 1 - Math.pow(1 - progress, 4);\r\n el.textContent = Math.round(eased * target) + suffix;\r\n if (progress < 1) requestAnimationFrame(step);\r\n }\r\n requestAnimationFrame(step);\r\n });\r\n }\r\n\r\n const trustBar = document.querySelector('.trust-bar');\r\n const observer = new IntersectionObserver(\r\n entries => {\r\n if (entries[0].isIntersecting) {\r\n animateCounters();\r\n observer.disconnect();\r\n }\r\n },\r\n { threshold: 0.4 }\r\n );\r\n observer.observe(trustBar);\r\n\r\n \/* \u2500\u2500 Spark animation \u2500\u2500 *\/\r\n const canvas = document.getElementById('sparksCanvas');\r\n const ctx = canvas.getContext('2d');\r\n\r\n function resizeCanvas() {\r\n canvas.width = window.innerWidth;\r\n canvas.height = document.querySelector('.hero').offsetHeight;\r\n }\r\n resizeCanvas();\r\n window.addEventListener('resize', resizeCanvas, { passive: true });\r\n\r\n const SPARK_COLORS = ['#FF6B1A', '#FFD000', '#FFFFFF', '#FFA040', '#FF8C00', '#FFE566'];\r\n const MAX_SPARKS = 90;\r\n let sparks = [];\r\n let frame = 0;\r\n\r\n class Spark {\r\n constructor() { this.reset(); }\r\n\r\n reset() {\r\n \/* Punkt spawnu \u2013 lewy-dolny kwadrant (pozycja spawacza) *\/\r\n this.x = canvas.width * 0.22 + (Math.random() - 0.5) * 90;\r\n this.y = canvas.height * 0.68 + (Math.random() - 0.5) * 35;\r\n this.prevX = this.x;\r\n this.prevY = this.y;\r\n\r\n \/* Wektor pr\u0119dko\u015bci \u2013 wachlarz w g\u00f3r\u0119 *\/\r\n const angle = -(Math.random() * Math.PI * 0.65 + Math.PI * 0.18);\r\n const speed = Math.random() * 10 + 2;\r\n this.vx = Math.cos(angle) * speed;\r\n this.vy = Math.sin(angle) * speed;\r\n\r\n this.life = 1.0;\r\n this.decay = Math.random() * 0.020 + 0.011;\r\n this.size = Math.random() * 1.8 + 0.4;\r\n this.gravity = 0.11;\r\n this.color = SPARK_COLORS[Math.floor(Math.random() * SPARK_COLORS.length)];\r\n\r\n \/* Co ~15% iskra jest wi\u0119ksza i \u015bwieci mocniej *\/\r\n this.bright = Math.random() < 0.15;\r\n if (this.bright) this.size *= 2.2;\r\n }\r\n\r\n update() {\r\n this.prevX = this.x;\r\n this.prevY = this.y;\r\n this.vx += (Math.random() - 0.5) * 0.45;\r\n this.vy += this.gravity;\r\n this.x += this.vx;\r\n this.y += this.vy;\r\n this.life -= this.decay;\r\n }\r\n\r\n draw(c) {\r\n if (this.life <= 0) return;\r\n c.save();\r\n c.globalAlpha = Math.max(0, this.life) * (this.bright ? 0.92 : 0.78);\r\n\r\n if (this.bright) {\r\n \/* Blask wok\u00f3\u0142 du\u017cych iskier *\/\r\n const grd = c.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size * 3.5);\r\n grd.addColorStop(0, 'rgba(255, 240, 160, 0.7)');\r\n grd.addColorStop(1, 'rgba(255, 120, 20, 0)');\r\n c.fillStyle = grd;\r\n c.beginPath();\r\n c.arc(this.x, this.y, this.size * 3.5, 0, Math.PI * 2);\r\n c.fill();\r\n }\r\n\r\n \/* Smuga *\/\r\n c.strokeStyle = this.color;\r\n c.lineWidth = this.size * 0.7;\r\n c.lineCap = 'round';\r\n c.beginPath();\r\n c.moveTo(this.prevX, this.prevY);\r\n c.lineTo(this.x, this.y);\r\n c.stroke();\r\n\r\n \/* Rdze\u0144 *\/\r\n c.fillStyle = '#FFFFFF';\r\n c.beginPath();\r\n c.arc(this.x, this.y, this.size * 0.4, 0, Math.PI * 2);\r\n c.fill();\r\n\r\n c.restore();\r\n }\r\n\r\n isDead() {\r\n return this.life <= 0\r\n || this.y > canvas.height + 80\r\n || this.x < -60\r\n || this.x > canvas.width + 60;\r\n }\r\n }\r\n\r\n \/* Po\u015bwiata \u0142uku spawalniczego *\/\r\n function drawWeldGlow() {\r\n const wx = canvas.width * 0.22;\r\n const wy = canvas.height * 0.68;\r\n const pulse = 0.28 + Math.sin(Date.now() * 0.009) * 0.18;\r\n\r\n const g1 = ctx.createRadialGradient(wx, wy, 0, wx, wy, 110);\r\n g1.addColorStop(0, `rgba(255, 210, 100, ${pulse * 0.65})`);\r\n g1.addColorStop(0.4, `rgba(255, 120, 25, ${pulse * 0.3})`);\r\n g1.addColorStop(1, 'rgba(0,0,0,0)');\r\n ctx.fillStyle = g1;\r\n ctx.beginPath();\r\n ctx.arc(wx, wy, 110, 0, Math.PI * 2);\r\n ctx.fill();\r\n }\r\n\r\n function loop() {\r\n requestAnimationFrame(loop);\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n\r\n drawWeldGlow();\r\n\r\n frame++;\r\n \/* Normalne tempo = 1 iskra co 2 klatki; burst ~5% szans na 4 naraz *\/\r\n if (frame % 2 === 0 && sparks.length < MAX_SPARKS) {\r\n const n = Math.random() < 0.05 ? 4 : 1;\r\n for (let i = 0; i < n; i++) sparks.push(new Spark());\r\n }\r\n\r\n sparks = sparks.filter(s => !s.isDead());\r\n sparks.forEach(s => { s.update(); s.draw(ctx); });\r\n }\r\n\r\n loop();\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\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>INSTALMED Sp. z o.o. \u2013 Produkcja wyrob\u00f3w metalowych INSTALMED Sp. z o.o. Us\u0142ugi Produkty Realizacje O nas Wy\u015blij zapytanie Us\u0142ugi […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-20","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/instalmed.apptools.it\/index.php?rest_route=\/wp\/v2\/pages\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/instalmed.apptools.it\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/instalmed.apptools.it\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/instalmed.apptools.it\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/instalmed.apptools.it\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=20"}],"version-history":[{"count":4,"href":"https:\/\/instalmed.apptools.it\/index.php?rest_route=\/wp\/v2\/pages\/20\/revisions"}],"predecessor-version":[{"id":24,"href":"https:\/\/instalmed.apptools.it\/index.php?rest_route=\/wp\/v2\/pages\/20\/revisions\/24"}],"wp:attachment":[{"href":"https:\/\/instalmed.apptools.it\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}