/* ===================
   RESET & KOLORY
=================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  --bg:#121212; --panel:#1c1c1c; --text:#ffffff; --muted:#aaaaaa;
  --green:#4CAF50; --green-dark:#388E3C; --green-bg:rgba(76,175,80,.08);
}

html,body{height:100%;}
body{
  font-family: Arial, sans-serif;
  background: var(--bg); color: var(--text);
  display:flex; flex-direction:column; min-height:100vh;
}

/* ===================
   TOPBAR + LOGO
=================== */
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:.75rem 1rem; background:var(--panel); border-bottom:1px solid #333;
}
.brand{
  display:flex; align-items:center; text-decoration:none; color:var(--text);
  font-weight:800; letter-spacing:.5px; font-size:1.15rem;
}
.brand-logo{ height:36px; margin-right:10px; }
.brand-name{ font-family:'Russo One',sans-serif; font-weight:400; letter-spacing:1px; text-transform:uppercase; }

/* ===================
   HAMBURGER
=================== */
.menu-toggle{ width:40px; height:32px; position:relative; border:none; background:transparent; cursor:pointer; }
.menu-toggle .bar{
  position:absolute; left:6px; right:6px; height:2px; background:var(--green);
  transition: transform .25s ease, opacity .25s ease, top .25s ease, background .25s ease;
}
.menu-toggle .bar:nth-child(1){ top:8px; }
.menu-toggle .bar:nth-child(2){ top:15px; }
.menu-toggle .bar:nth-child(3){ top:22px; }
.menu-toggle.is-open .bar:nth-child(1){ top:15px; transform:rotate(45deg); }
.menu-toggle.is-open .bar:nth-child(2){ opacity:0; }
.menu-toggle.is-open .bar:nth-child(3){ top:15px; transform:rotate(-45deg); }

/* ===================
   MENU ROZWIJANE – panel glass, linki tekstowe, glow + smużenie
=================== */
.main-nav{
  background: var(--panel);
  overflow:hidden;
  max-height:0;
  transition: max-height .35s ease, padding .25s ease, background .25s ease, box-shadow .25s ease, border-color .25s ease;
  padding:0 1rem;
  border-radius:0 0 12px 12px;
  position:relative; border:1px solid transparent; border-top:none;
}
.main-nav.open{
  max-height:320px;
  padding:.6rem 1rem 1rem;
  background: linear-gradient(180deg, rgba(18,18,18,.92), rgba(18,18,18,.86));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.main-nav ul{ list-style:none; position:relative; z-index:1; }
.main-nav li{ margin:.35rem 0; }

/* Linki – bez stałych „kolumn” */
.main-nav a{
  display:block; color:var(--text); text-decoration:none;
  font-size:1rem; font-weight:700;
  padding:.75rem .2rem; border-radius:10px;
  background:transparent; border:none;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .06s ease;
}
.main-nav a:hover,
.main-nav a:focus-visible{
  color:#fff;
  background: rgba(76,175,80,.10);
  box-shadow: 0 0 0 2px rgba(123,255,162,.22) inset, 0 10px 26px rgba(0,0,0,.35);
  outline:none;
}
.main-nav a:active{ transform:scale(.985); }

/* Smużenie – wyraźniejsze, ale subtelne; widoczne tylko .visible (JS) */
.menu-sheen{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  --x:-200px; --y:-200px;
  background:
    radial-gradient(320px 260px at var(--x) var(--y), rgba(123,255,162,.16), rgba(123,255,162,0) 60%),
    radial-gradient(520px 420px at 70% 10%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%);
  filter: blur(.5px);
  opacity:0; transition: opacity .2s ease;
}
.menu-sheen.visible{ opacity:1; }

/* ===================
   HERO
=================== */
#hero{ flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:2.5rem 1rem; }
.hero-logo{ display:inline-block; }
.hero-logo-img{
  max-width:200px; display:block;
  animation: floatPulse 4s ease-in-out infinite; -webkit-animation: floatPulse 4s ease-in-out infinite;
  will-change: transform, filter;
}

/* BOXSTONE – Russo One */
.hero-title{
  font-family:'Russo One',sans-serif; font-size:clamp(2.8rem,7vw,4rem);
  font-weight:400; letter-spacing:1px; text-transform:uppercase; margin-bottom:2rem;
}
.hero-eyebrow{
  font-size:1rem; letter-spacing:1.5px; color:var(--muted);
  margin-bottom:.5rem; font-weight:800; text-transform:uppercase;
}

/* ===================
   PRZYCISK
=================== */
.btn{ display:inline-block; padding:.9rem 2rem; border-radius:999px; text-decoration:none; font-weight:800; font-size:1rem; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease; user-select:none; }
.btn-outline-primary{
  background:transparent; color:var(--green); border:2px solid var(--green); box-shadow:0 6px 20px rgba(76,175,80,.15);
}
.btn-outline-primary:hover,.btn-outline-primary:focus{ background:var(--green); color:#fff; transform:translateY(-2px); box-shadow:0 10px 26px rgba(76,175,80,.35); }
.btn-outline-primary:active{ background:var(--green-dark); border-color:var(--green-dark); transform:translateY(0); box-shadow:0 6px 18px rgba(56,142,60,.45); }

/* ===================
   ANIMACJA LOGO
=================== */
@keyframes floatPulse{
  0%{ transform:translateY(0) scale(1); filter:drop-shadow(0 0 0 rgba(76,175,80,0)); }
  50%{ transform:translateY(-6px) scale(1.04); filter:drop-shadow(0 0 10px rgba(76,175,80,.25)); }
  100%{ transform:translateY(0) scale(1); filter:drop-shadow(0 0 0 rgba(76,175,80,0)); }
}
@-webkit-keyframes floatPulse{
  0%{ -webkit-transform:translateY(0) scale(1); filter:drop-shadow(0 0 0 rgba(76,175,80,0)); }
  50%{ -webkit-transform:translateY(-6px) scale(1.04); filter:drop-shadow(0 0 10px rgba(76,175,80,.25)); }
  100%{ -webkit-transform:translateY(0) scale(1); filter:drop-shadow(0 0 0 rgba(76,175,80,0)); }
}

/* ===================
   RESPONSYWNOŚĆ
=================== */
@media (min-width:768px){
  .main-nav{ max-height:none; padding:.5rem 1rem; background:transparent; border:none; box-shadow:none; }
  .topbar,.main-nav{ display:flex; align-items:center; justify-content:space-between; }
  .main-nav ul{ display:flex; gap:1.25rem; }
  .menu-toggle{ display:none; }
  .menu-sheen{ display:none; }
  .main-nav a{ padding:.5rem 0; border-radius:8px; }
  .main-nav a:hover,.main-nav a:focus-visible{ background: rgba(76,175,80,.10); box-shadow:none; }
}