/* =========================================================
   Instalacje Elektryczne Marek Lasocki — Pruszków
   Design tokens: paleta miedzi i grafitu, motyw schematu elektr.
   ========================================================= */

:root{
  --bg:            #12161b;
  --bg-alt:        #181e25;
  --surface:       #1f2830;
  --surface-2:     #242f39;
  --line:          rgba(243,241,234,0.09);
  --line-strong:   rgba(243,241,234,0.18);

  --copper:        #c9782f;
  --copper-light:  #e2a76b;
  --copper-dim:    #8a5323;
  --amber:         #f2b705;
  --green-live:    #6fbf73;

  --text:          #f3f1ea;
  --text-dim:      #aab2bd;
  --text-faint:    #6d7682;

  --radius-s: 4px;
  --radius-m: 10px;

  --font-display: "Space Grotesk", "Arial Narrow", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;

  --container: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; line-height:1.1; letter-spacing:-0.01em; }
p{ margin:0; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-light);
}
.eyebrow::before{
  content:"";
  width:18px; height:1px;
  background: var(--copper);
  display:inline-block;
}

.section-title{
  font-size: clamp(28px, 4vw, 42px);
  margin-top: 10px;
  max-width: 640px;
}
.section-lead{
  color: var(--text-dim);
  max-width: 560px;
  margin-top: 14px;
  font-size: 16.5px;
}

section{ padding: 96px 0; position:relative; }
.section-alt{ background: var(--bg-alt); }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 14px 26px;
  border-radius: var(--radius-s);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{
  background: var(--copper);
  color: #16110b;
}
.btn-primary:hover{ background: var(--copper-light); }
.btn-ghost{
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text);
}
.btn-ghost:hover{ border-color: var(--copper); color: var(--copper-light); }
.btn-block{ width:100%; }

/* ---------- Header ---------- */
.site-header{
  position: sticky;
  top:0;
  z-index: 50;
  background: rgba(18,22,27,0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content: space-between;
  height: 76px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-family: var(--font-display);
  font-weight:700;
  font-size: 18px;
  letter-spacing: 0.01em;
}
.brand-mark{
  width:38px; height:38px;
  flex-shrink:0;
}
.brand-text b{ color: var(--copper-light); }
.brand-sub{
  display:block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  text-transform: uppercase;
  margin-top:2px;
}

.main-nav{ display:flex; align-items:center; gap: 34px; }
.main-nav a{
  font-size: 14.5px;
  color: var(--text-dim);
  position: relative;
  padding: 6px 0;
  transition: color .2s ease;
}
.main-nav a:hover{ color: var(--text); }
.main-nav a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:2px; background: var(--copper);
  transform: scaleX(0); transform-origin: left;
  transition: transform .2s ease;
}
.main-nav a:hover::after{ transform: scaleX(1); }

.header-actions{ display:flex; align-items:center; gap:16px; }
.header-phone{
  display:flex; flex-direction:column; align-items:flex-end;
  font-family: var(--font-mono);
}
.header-phone span{ font-size: 10.5px; color: var(--text-faint); letter-spacing:0.08em; text-transform:uppercase; }
.header-phone strong{ font-size: 16px; color: var(--copper-light); }

.nav-toggle{
  display:none;
  background:none; border:1px solid var(--line-strong); border-radius: var(--radius-s);
  width:42px; height:42px;
  align-items:center; justify-content:center;
  color: var(--text);
  cursor:pointer;
}
.nav-toggle svg{ width:20px; height:20px; }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  padding-top: 88px;
  padding-bottom: 70px;
  overflow: hidden;
  background:
    radial-gradient(60% 55% at 82% 18%, rgba(201,120,47,0.16), transparent 60%),
    var(--bg);
}
.hero .container{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items:center;
}
.hero-copy h1{
  font-size: clamp(34px, 5vw, 56px);
}
.hero-copy h1 em{
  font-style:normal;
  color: var(--copper-light);
}
.hero-copy .section-lead{ max-width: 500px; font-size: 17.5px; }

.hero-ctas{
  display:flex;
  flex-wrap:wrap;
  gap: 14px;
  margin-top: 34px;
}

.trust-strip{
  display:flex;
  flex-wrap:wrap;
  gap: 26px;
  margin-top: 46px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.trust-item{ display:flex; flex-direction:column; gap:4px; }
.trust-item strong{ font-family: var(--font-display); font-size: 24px; color: var(--copper-light); }
.trust-item span{ font-size: 12.5px; color: var(--text-faint); text-transform:uppercase; letter-spacing:0.06em; }

/* Signature: animated schematic */
.hero-schema{
  position:relative;
  aspect-ratio: 1 / 1;
  max-width: 480px;
  margin: 0 auto;
}
.hero-schema svg{ width:100%; height:100%; }
.schema-line{
  fill:none;
  stroke: var(--line-strong);
  stroke-width: 1.4;
}
.schema-pulse{
  fill:none;
  stroke: var(--amber);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 10 620;
  filter: drop-shadow(0 0 6px rgba(242,183,5,0.7));
  animation: flow 6s linear infinite;
}
.schema-pulse.d2{ animation-delay: -2s; stroke: var(--copper-light); filter: drop-shadow(0 0 6px rgba(226,167,107,0.6)); }
.schema-pulse.d3{ animation-delay: -4s; }
@keyframes flow{
  from{ stroke-dashoffset: 0; }
  to{ stroke-dashoffset: -630; }
}
.schema-node{ fill: var(--surface-2); stroke: var(--line-strong); stroke-width:1.4; }
.schema-node.live{ fill: var(--copper); stroke: var(--copper-light); }
.schema-label{
  font-family: var(--font-mono);
  font-size: 8.5px;
  fill: var(--text-faint);
  letter-spacing: 0.08em;
}

/* Divider between sections: thin schematic rail */
.rail{
  height: 46px;
  width:100%;
  overflow:hidden;
}
.rail svg{ width:100%; height:100%; }
.rail-line{ stroke: var(--line); stroke-width:1; fill:none; }
.rail-dot{ fill: var(--copper); }

/* ---------- O firmie ---------- */
.about-grid{
  display:grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 64px;
  margin-top: 56px;
  align-items: start;
}
.about-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 28px;
}
.about-card + .about-card{ margin-top: 18px; }
.about-card dt{
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
.about-card dd{
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--text);
}
.about-body p{ color: var(--text-dim); }
.about-body p + p{ margin-top: 16px; }
.about-badges{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top: 26px;
}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text-dim);
}
.badge svg{ width:15px; height:15px; color: var(--copper-light); }

/* ---------- Usługi ---------- */
.services-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 54px;
}
.service-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 28px 26px;
  transition: border-color .2s ease, transform .2s ease;
}
.service-card:hover{ border-color: var(--copper-dim); transform: translateY(-4px); }
.service-icon{
  width: 46px; height:46px;
  border-radius: var(--radius-s);
  background: var(--surface-2);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 18px;
}
.service-icon svg{ width:24px; height:24px; color: var(--copper-light); }
.service-card h3{ font-size: 19px; margin-bottom:10px; }
.service-card p{ color: var(--text-dim); font-size: 14.5px; }
.service-card.emergency{
  background: linear-gradient(135deg, rgba(201,120,47,0.14), rgba(242,183,5,0.06));
  border-color: rgba(242,183,5,0.35);
}

/* ---------- Proces ---------- */
.process{
  margin-top: 56px;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position:relative;
}
.process::before{
  content:"";
  position:absolute; top:23px; left:5%; right:5%; height:1px;
  background: repeating-linear-gradient(to right, var(--line-strong) 0 8px, transparent 8px 14px);
}
.process-step{ position:relative; padding: 0 14px; text-align:left; }
.process-num{
  width:46px; height:46px;
  border-radius:50%;
  background: var(--bg-alt);
  border: 1px solid var(--copper-dim);
  color: var(--copper-light);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono);
  font-size: 15px;
  margin-bottom: 18px;
  position:relative; z-index:2;
}
.process-step h4{ font-size: 15.5px; margin-bottom:8px; }
.process-step p{ color: var(--text-dim); font-size: 13.5px; }

/* ---------- Galeria ---------- */
.gallery-tabs{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top: 36px;
}
.gallery-tab{
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 13.5px;
  color: var(--text-dim);
  cursor:pointer;
  background:transparent;
  font-family: var(--font-body);
  transition: all .2s ease;
}
.gallery-tab:hover{ color: var(--text); }
.gallery-tab.active{ background: var(--copper); border-color: var(--copper); color:#16110b; font-weight:600; }

.gallery-grid{
  margin-top: 30px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.gallery-item{
  position:relative;
  border-radius: var(--radius-m);
  overflow:hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4/3;
  background: var(--surface);
}
.gallery-item img{
  width:100%; height:100%; object-fit: cover;
  transition: transform .4s ease;
}
.gallery-item:hover img{ transform: scale(1.05); }
.gallery-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding: 14px 16px;
  background: linear-gradient(to top, rgba(10,12,15,0.88), transparent);
  font-size: 13px;
  color: var(--text);
}
.gallery-note{
  margin-top: 22px;
  font-size: 13px;
  color: var(--text-faint);
  font-family: var(--font-mono);
}

/* ---------- Opinie ---------- */
.testimonials{
  margin-top: 54px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.testimonial{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 26px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.stars{ color: var(--amber); letter-spacing: 2px; font-size: 14px; }
.testimonial p{ color: var(--text-dim); font-size: 14.5px; }
.testimonial-author{
  display:flex; align-items:center; gap:12px;
  margin-top:auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-faint);
}
.avatar{
  width:34px; height:34px; border-radius:50%;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display);
  color: var(--copper-light);
  font-size:13px;
}

/* ---------- Obszar działania ---------- */
.area-list{
  margin-top: 30px;
  display:flex; flex-wrap:wrap; gap:10px;
}
.area-list span{
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  color: var(--text-dim);
}

/* ---------- Kontakt / formularz ---------- */
.contact-grid{
  margin-top: 54px;
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items:start;
}
.contact-info{
  display:flex; flex-direction:column; gap:20px;
}
.contact-block{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 22px 24px;
  display:flex; gap:16px; align-items:flex-start;
}
.contact-block svg{ width:22px; height:22px; color: var(--copper-light); flex-shrink:0; margin-top:2px; }
.contact-block h4{ font-size: 14.5px; margin-bottom:4px; }
.contact-block p, .contact-block a{ color: var(--text-dim); font-size: 14.5px; }
.contact-block a:hover{ color: var(--copper-light); }
.map-embed{
  border-radius: var(--radius-m);
  overflow:hidden;
  border: 1px solid var(--line);
  filter: grayscale(0.35) invert(0.92) contrast(0.9);
}
.map-embed iframe{ width:100%; height:220px; border:0; display:block; }

.form-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 34px;
}
.form-card h3{ font-size: 22px; }
.form-card > p{ color: var(--text-dim); margin-top:8px; font-size:14.5px; }

.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 26px;
}
.form-field{ display:flex; flex-direction:column; gap:8px; }
.form-field.full{ grid-column: 1 / -1; }
.form-field label{
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-family: var(--font-mono);
}
.form-field input, .form-field textarea, .form-field select{
  background: var(--bg-alt);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14.5px;
  resize: vertical;
}
.form-field input::placeholder, .form-field textarea::placeholder{ color: var(--text-faint); }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{
  border-color: var(--copper);
}
.form-note{
  font-size: 12px;
  color: var(--text-faint);
  margin-top:14px;
}
.honeypot{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }

.form-status{
  margin-top: 18px;
  padding: 13px 16px;
  border-radius: var(--radius-s);
  font-size: 14px;
  display:none;
}
.form-status.show{ display:block; }
.form-status.ok{ background: rgba(111,191,115,0.12); border: 1px solid rgba(111,191,115,0.4); color: var(--green-live); }
.form-status.err{ background: rgba(224,90,90,0.1); border: 1px solid rgba(224,90,90,0.4); color: #e58080; }

/* ---------- CTA final ---------- */
.cta-final{
  text-align:center;
  padding: 90px 0;
}
.cta-final h2{ font-size: clamp(26px, 4vw, 40px); max-width: 620px; margin: 0 auto; }
.cta-final p{ color: var(--text-dim); margin-top:14px; }
.cta-final .hero-ctas{ justify-content:center; margin-top: 30px; }

/* ---------- Footer ---------- */
.site-footer{
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  padding: 60px 0 28px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer-brand p{ color: var(--text-faint); font-size: 13.5px; margin-top:14px; max-width:280px; }
.footer-col h5{
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin-bottom: 16px;
}
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ color: var(--text-dim); font-size: 14px; }
.footer-col a:hover{ color: var(--copper-light); }
.footer-bottom{
  margin-top: 50px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size: 12.5px;
  color: var(--text-faint);
}

/* ---------- Back to top / phone float ---------- */
.float-call{
  position:fixed;
  right: 22px; bottom: 22px;
  z-index: 60;
  background: var(--copper);
  color:#16110b;
  border-radius: 999px;
  padding: 14px 20px;
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-display);
  font-weight:700;
  font-size:14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.float-call svg{ width:18px; height:18px; }

/* =========================================================
   Responsywność
   ========================================================= */
@media (max-width: 980px){
  .hero .container{ grid-template-columns: 1fr; }
  .hero-schema{ order:-1; max-width: 320px; }
  .about-grid{ grid-template-columns: 1fr; }
  .services-grid{ grid-template-columns: repeat(2, 1fr); }
  .process{ grid-template-columns: repeat(3, 1fr); gap: 28px 0; }
  .process::before{ display:none; }
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
  .testimonials{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px){
  .main-nav{
    position: fixed;
    top: 76px; left:0; right:0; bottom:0;
    background: var(--bg);
    flex-direction: column;
    align-items:flex-start;
    padding: 30px 24px;
    gap: 22px;
    transform: translateX(100%);
    transition: transform .25s ease;
    overflow-y:auto;
  }
  .main-nav.open{ transform: translateX(0); }
  .main-nav a{ font-size: 18px; }
  .header-phone{ display:none; }
  .nav-toggle{ display:flex; }
  section{ padding: 64px 0; }
  .services-grid{ grid-template-columns: 1fr; }
  .process{ grid-template-columns: 1fr 1fr; }
  .gallery-grid{ grid-template-columns: 1fr 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; gap: 30px; }
  .trust-strip{ gap: 20px; }
}

@media (max-width: 420px){
  .gallery-grid{ grid-template-columns: 1fr; }
  .process{ grid-template-columns: 1fr; }
}