/* ---------- Base ---------- */
:root{
  --bg:#0f0f12;
  --card:#17181c;
  --text:#e8e8ea;
  --muted:#a6a8ad;
  --accent:#39b54a; /* Festool green */
  --accent-2:#1f80bf; /* Tunap blue */
  --brand:#ffffff;
  --active:#ffd34d;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  background:#f5f5f7;
  color:#1f2328;
  line-height:1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container{ width:min(1100px, 92%); margin-inline:auto; }

/* ---------- Header / Top Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(15,15,18,0.9);
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}

.nav-row{ display:flex; align-items:center; justify-content:space-between; min-height:64px; gap:16px; }

.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.logo{ height:30px; display:block; }
.company-name{
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: .3px;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

.topnav{ display:flex; gap:.25rem; align-items:center; }
.nav-link{
  color:#f0f0f0; text-decoration:none; padding:.55rem .9rem; border-radius:999px;
  transition:transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
  font-weight:700;
  font-size: .95rem;
}
.nav-link:hover{ background:rgba(255,255,255,0.10); transform:translateY(-1px); }
.nav-link.active{ background:var(--active); color:#111; box-shadow:0 2px 10px rgba(0,0,0,.15); }
.nav-link[href*="festool"]{ border:1px solid rgba(57,181,74,.45); }
.nav-link[href*="tunap"]{ border:1px solid rgba(31,128,191,.45); }

/* Mobile nav */
.nav-toggle{ display:none; }
.burger{ display:none; gap:6px; cursor:pointer; padding:10px; }
.burger span{ display:block; width:22px; height:2px; background:#fff; }

@media (max-width: 860px){
  .company-name{ font-size: 1.02rem; }
}
@media (max-width: 800px){
  .burger{ display:flex; }
  .topnav{
    position:fixed; inset:64px 0 auto 0; background:rgba(15,15,18,0.98);
    flex-direction:column; padding:12px; gap:8px; display:none;
    border-bottom:1px solid rgba(255,255,255,0.06);
  }
  .nav-toggle:checked ~ .topnav{ display:flex; }
}

/* ---------- Hero (unchanged) ---------- */
.hero{
  position:relative; height:100vh; display:flex; justify-content:center; align-items:center;
  text-align:center; color:white;
  background: url('assets/engineer-car.jpg') no-repeat center center/cover;
}
.hero::after{ content:""; position:absolute; inset:0; background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.7)); }
.hero-content{ position:relative; z-index:1; padding:0 20px; }
.hero-content h1{
  font-size: clamp(1.9rem, 4vw + 1rem, 3.2rem);
  line-height:1.15; max-width: 900px; margin: 0 auto;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}
@media (max-width: 768px){ .hero{ height:60vh; } }

/* ---------- Utility spacing ---------- */
.page-padding{ padding:40px 0; }

/* ---------- Brands ---------- */
.brands{ padding:60px 0; background:#fff; }
.brands h2{ text-align:center; margin:0 0 22px; font-size:1.8rem; }
.brand-boxes{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:18px; }
.brand-box{
  display:flex; align-items:center; justify-content:center;
  padding:28px; border-radius:18px; text-decoration:none; font-weight:800; font-size:1.1rem;
  background:#f1f3f5; color:#111; box-shadow: 0 2px 10px rgba(0,0,0,.05);
  transition: transform .18s ease, box-shadow .18s ease;
}
.brand-box:hover{ transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0,0,0,.08); }
.brand-box.festool{ border:2px solid var(--accent); }
.brand-box.tunap{ border:2px solid var(--accent-2); }

/* ---------- Contact ---------- */
.contact{ padding:60px 0; background:#0f0f12; color:#eaeaea; }
.contact a{ color:#ffd34d; }
.btn{ display:inline-block; margin-top:10px; padding:.7rem 1rem; background:#fff; color:#0f0f12; border-radius:10px; text-decoration:none; font-weight:800; }

/* ---------- Footer ---------- */
.site-footer{ background:#0c0c10; color:#cfcfd4; padding:18px 0; border-top:1px solid rgba(255,255,255,.06); }
.footer-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.footer-link{ color:#cfcfd4; text-decoration:none; }
.footer-link:hover{ text-decoration:underline; }