/* layout.css
   Logo, nawigacja, hero, stopka — szkielet strony.
   Lucifer's Garage */

/* ============================================================
   Logo (maska PNG — barwi się kolorem tekstu)
   ============================================================ */
.logo{
  width:42px; height:42px; flex:none;
  background-color:currentColor;
  -webkit-mask:url(../assets/logo.png) center/contain no-repeat;
  mask:url(../assets/logo.png) center/contain no-repeat;
}
.logo--xl{width:min(340px,58vw); height:min(340px,58vw)}
/* ============================================================
   Nawigacja
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:60;
  background:var(--bg);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.nav__in{
  max-width:var(--maxw); margin:0 auto; padding:0 22px; height:var(--nav-h);
  display:flex; align-items:center; gap:26px;
}
.brand{display:flex; align-items:center; gap:12px; flex:none}
.brand__name{
  font-family:var(--f-display); font-size:20px; font-weight:600;
  letter-spacing:.01em; white-space:nowrap;
}
.brand__name span{color:var(--brass)}
.nav__links{display:flex; align-items:center; gap:4px; margin-left:auto}
.nav__link{
  padding:9px 13px; border-radius:var(--r-sm); font-size:14px; font-weight:500;
  color:var(--dim); transition:color .18s, background .18s; position:relative;
}
.nav__link:hover{color:var(--text); background:var(--surface)}
.nav__link.is-active{color:var(--text)}
.nav__link.is-active::after{
  content:""; position:absolute; left:13px; right:13px; bottom:2px;
  height:1px; background:var(--brass);
}
.nav__link .ext{font-size:10px; opacity:.55; margin-left:5px}
.nav__tools{display:flex; align-items:center; gap:8px}
.burger{display:none}

.iconbtn{
  width:38px; height:38px; display:grid; place-items:center;
  background:transparent; border:1px solid var(--line); border-radius:var(--r-sm);
  cursor:pointer; color:var(--dim); transition:.18s;
}
.iconbtn:hover{color:var(--text); border-color:var(--line-2); background:var(--surface)}
/* ============================================================
   Hero
   ============================================================ */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.hero__grid{
  max-width:var(--maxw); margin:0 auto; padding:96px 22px 88px;
  display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center;
}
.hero__mark{display:grid; place-items:center; color:var(--text); opacity:.09}
.hero h1{margin:0 0 20px}
.hero__sub{font-size:18px; color:var(--dim); max-width:46ch; margin-bottom:32px}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:38px}
.hero__facts{
  display:flex; gap:34px; flex-wrap:wrap; padding-top:26px;
  border-top:1px solid var(--line);
}
.fact__k{font-family:var(--f-mono); font-size:22px; color:var(--brass)}
.fact__v{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}
/* ============================================================
   Stopka
   ============================================================ */
.foot{border-top:1px solid var(--line); background:var(--bg-2); padding:52px 0 30px; margin-top:20px}
.foot__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px}
.foot__t{font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); margin-bottom:14px}
.foot__l{display:block; padding:4px 0; font-size:14px; color:var(--dim); transition:.15s}
.foot__l:hover{color:var(--brass)}
.foot__bar{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:38px; padding-top:20px; border-top:1px solid var(--line);
  font-size:12px; color:var(--dim);
}