/* ============ TOKENS ============ */
:root{
  --bg: #000;
  --panel: #0e0e10;
  --panel-alt: #101012;
  --header-bg: #0a0a0b;
  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);
  --text: #f5f5f7;
  --text-dim: #a1a1a6;
  --text-mute: #8e8e93;
  --text-faint: #6a6a70;
  --accent: #0e6b47;
  --accent-bright: #5fd6a0;
  --accent-mid: #1c8d5f;
  --font-sans: 'Schibsted Grotesk', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
h1,h2,h3,p{margin:0}
a{color:var(--accent-bright);text-decoration:none}

.eyebrow{
  font:400 11.5px/1 var(--font-mono);
  color:var(--accent-bright);
  letter-spacing:.12em;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  font:600 15px/1 var(--font-sans);
  cursor:pointer;
  padding:15px 26px;
  border:1px solid transparent;
  transition:transform 120ms ease-out, border-color 160ms ease-out;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:#fff}
.btn-outline{border-color:rgba(255,255,255,.24);color:var(--text);font-weight:500}
.btn-outline:hover{border-color:rgba(255,255,255,.5)}
.btn-small{padding:9px 14px;font-size:12.5px;border-radius:7px}

/* generic mockup atoms - reused across hero/service/uslugi mockups */
.bar{border-radius:6px}
.stack{display:flex;flex-direction:column;gap:9px}
.row-gap{display:flex;align-items:center;gap:8px}
.row-between{display:flex;align-items:center;justify-content:space-between}
.tile-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.tile{height:44px;border-radius:8px;background:rgba(255,255,255,.06)}
.pill-btn{width:96px;height:26px;border-radius:7px;background:rgba(95,214,160,.85)}
.tag-btn{width:52px;height:18px;border-radius:7px;background:rgba(95,214,160,.9)}
.dot-accent{width:12px;height:12px;border-radius:4px;background:var(--accent-mid);flex:none}
.dot-dim{width:12px;height:12px;border-radius:4px;background:rgba(255,255,255,.23);flex:none}
.dot-plain{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.26);flex:none}
.list-row{height:34px;border-radius:10px;background:rgba(255,255,255,.1)}

/* p-desktop: shown only at desktop breakpoint (see media query below) */
.p-desktop{display:none}

/* ============ HEADER ============ */
.site-header{
  position:sticky;top:0;z-index:20;
  background:var(--header-bg);
  border-bottom:1px solid var(--border-strong);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;height:56px;
}
/* offset anchor-scroll targets so the sticky header doesn't cover them */
#top,#kontakt,#realizacje,#cennik{scroll-margin-top:56px}
.logo{height:13px;width:auto;opacity:.95}
.main-nav{display:none}
.header-actions{display:flex;align-items:center;gap:14px}
.header-phone{display:none}
.nav-toggle{
  display:flex;flex-direction:column;gap:4px;
  width:20px;padding:8px 0;
  background:none;border:none;cursor:pointer;
}
.nav-toggle span{height:1.5px;background:rgba(255,255,255,.8);display:block}

.main-nav.is-open{
  display:flex;
  flex-direction:column;
  position:absolute;
  left:0;right:0;top:56px;
  background:var(--header-bg);
  border-bottom:1px solid var(--border-strong);
  padding:8px 20px 16px;
}
.main-nav.is-open a{
  padding:12px 0;
  color:rgba(255,255,255,.72);
  font:500 15px/1 var(--font-sans);
  border-bottom:1px solid var(--border);
}
.main-nav.is-open a:last-child{border-bottom:none}
.main-nav.is-open a.is-active{color:#fff;text-shadow:0 0 10px rgba(255,255,255,.85),0 0 22px rgba(255,255,255,.45)}

/* Shared hero atoms (button row + ambient glow) reused by home hero and uslugi heroes */
.hero-actions{display:flex;flex-direction:column;gap:10px;margin-bottom:36px}
.hero-actions .btn{width:100%}

.hero-glow{
  position:absolute;left:50%;top:46%;width:320px;height:200px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(95,214,160,.22),rgba(95,214,160,0));
  filter:blur(18px);
  animation:nmGlow 9s ease-in-out infinite;
}

@keyframes nmGlow{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}50%{opacity:.85;transform:translate(-50%,-50%) scale(1.06)}}
@keyframes nmSweep{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
@keyframes nmShake{0%,13%{transform:translate(0,0) rotate(0deg)}15%{transform:translate(-2px,0) rotate(-.6deg)}17%{transform:translate(2px,0) rotate(.6deg)}19%{transform:translate(-1.8px,0) rotate(-.5deg)}21%{transform:translate(1.8px,0) rotate(.5deg)}23%{transform:translate(-1.3px,0) rotate(-.35deg)}25%{transform:translate(1.3px,0) rotate(.35deg)}27%{transform:translate(-.7px,0) rotate(-.2deg)}29%,100%{transform:translate(0,0) rotate(0deg)}}
@keyframes nmFix{0%,12%{background:#1c8d5f}15%,29%{background:#e5484d}36%,100%{background:#1c8d5f}}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important}
  html{scroll-behavior:auto}
}

/* ============ CTA ============ */
.cta{padding:60px 20px;background:#000;border-top:1px solid var(--border);text-align:left}
.cta h2{
  margin:0 0 12px;
  font:700 30px/1.12 var(--font-sans);
  letter-spacing:-.025em;
}
.cta p{margin:0 0 24px;font:400 16px/1.55 var(--font-sans);color:var(--text-mute)}

/* ============ FOOTER ============ */
.site-footer{
  padding:26px 20px;background:var(--header-bg);
  display:flex;flex-direction:column;gap:14px;
  border-top:1px solid var(--border);
}
.footer-logo{height:11px;width:auto;opacity:.55;align-self:flex-start;flex:none}
.footer-links{display:flex;flex-wrap:wrap;gap:16px;font:400 12px/1 var(--font-sans);color:var(--text-faint)}
.footer-links a{color:inherit;text-decoration:none}
.footer-links a:hover{color:var(--text-mute);text-decoration:underline}

/* ================================================================
   DESKTOP - min-width 768px
   ================================================================ */
@media (min-width:768px){
  .p-desktop{display:block}

  .header-inner{padding:0 34px;height:64px;gap:40px;max-width:1440px;margin:0 auto}
  #top,#kontakt,#realizacje,#cennik{scroll-margin-top:64px}
  .logo{height:15px}
  .main-nav{
    display:flex;align-items:center;gap:26px;
    font:500 13.5px/1 var(--font-sans);
    position:static;background:none;border:none;padding:0;flex-direction:row;
  }
  .main-nav a{color:rgba(255,255,255,.72);border-bottom:none;padding:0;transition:color 140ms ease-out,text-shadow 140ms ease-out}
  .main-nav a:hover{color:#fff}
  .main-nav a.is-active{color:#fff;text-shadow:0 0 12px rgba(255,255,255,.9),0 0 26px rgba(255,255,255,.5)}
  .header-actions{margin-left:auto;gap:22px}
  .header-phone{display:block;font:400 13px/1 var(--font-mono);color:rgba(255,255,255,.42)}
  .btn-small{padding:11px 18px;font-size:13.5px}
  .nav-toggle{display:none}

  .hero-actions{flex-direction:row;justify-content:center;margin-bottom:72px}
  .hero-actions .btn{width:auto}
  .hero-glow{width:720px;height:360px;animation-duration:9s}

  .cta{padding:120px 40px 112px;text-align:center;border-top:1px solid var(--border-strong)}
  .cta h2{font-size:46px;line-height:1.1;letter-spacing:-.03em;margin-bottom:18px}
  .cta p{margin:0 auto 44px;max-width:520px;font-size:18px}

  .site-footer{
    padding:36px 40px;flex-direction:row;align-items:center;justify-content:space-between;
  }
  .footer-links{gap:26px;font-size:12.5px}
}