/* ===========================================================
   ZILCH • Site styles
   - Hero with soft glass panel behind text/buttons
   =========================================================== */

/* ========== PALETTE ========== */
:root{
  --blue:#286DF6;
  --ink:#0b1220;
  --text:#1e293b;
  --muted:#475569;
  --bg:#ffffff;
  --line:#e5e7eb;
  --shadow:0 10px 30px rgba(2,8,23,.10);
}

/* ========== GLOBAL ========== */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
}

/* ========== HEADER ========== */
.site-header{
  position:sticky; top:0; z-index:20;
  background:transparent;
  backdrop-filter:none;
  border-bottom:1px solid rgba(255,255,255,.3);
}
.container{ width:min(1180px,92vw); margin:0 auto; }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:.85rem 0; }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:#042B2F; font-weight:800; }
.brand .logo{ width:28px; height:28px; background:url('/assets/images/Zilch_colour_logo.png') center/contain no-repeat; }
.nav-actions{ display:flex; gap:.5rem; align-items:center; }
.link{ text-decoration:none; color:#042B2F; font-weight:700; padding:.5rem .75rem; border-radius:10px; }
.link:hover{ color:#042B2F; background:rgba(4,43,47,.1); }

/* ========== BUTTONS ========== */
.btn{
  display:inline-block; text-decoration:none; font-weight:800;
  border-radius:14px; padding:.8rem 1.1rem; transition:transform .06s ease;
  box-shadow:var(--shadow);
}
.btn:active{ transform:translateY(1px) }
.btn.primary{ background:var(--blue); color:#fff; border:2px solid rgba(255,255,255,.12); box-shadow:0 8px 24px rgba(40,109,246,.28); }
.btn.primary:hover{ filter:brightness(1.07) }
.btn.ghost{ color:#fff; background:rgba(0,0,0,.35); border:2px solid rgba(255,255,255,.65); backdrop-filter:saturate(120%) blur(2px); }
.btn.ghost:hover{ background:rgba(0,0,0,.43) }
.btn.light{ background:#eef3ff; color:var(--blue); border:2px solid #d7e2ff; }

/* ========== HERO ========== */
.hero{
  position:relative;
  min-height:60vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:transparent;
  isolation:isolate;
}

/* Full screen background */
body{
  background:url('/assets/images/Zilch_Leaf Group with road.jpg') center/cover no-repeat fixed;
  background-attachment: fixed;
}


/* Road Content Section */
.road-content{
  position:absolute;
  top:50%;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  text-align:center;
}

.road-inner{
  background:rgba(0,0,0,.4);
  backdrop-filter:blur(8px) saturate(120%);
  -webkit-backdrop-filter:blur(8px) saturate(120%);
  padding:1.5rem 2rem;
  border-radius:16px;
  box-shadow:0 6px 20px rgba(0,0,0,.3);
}


.road-cta-row{
  display:flex; 
  gap:.6rem; 
  justify-content:center; 
  flex-wrap:wrap;
}

.road-cta-row .btn{ 
  min-width:120px;
}

/* Text inside road content box */
.road-inner .kicker{
  letter-spacing:.08em; text-transform:uppercase; font-weight:900;
  font-size:.9rem; color:#fff; opacity:.95;
  margin-bottom: 1rem;
}
.road-inner h1{
  margin:.35rem 0 1.5rem;
  font-size:clamp(2rem,5vw,3rem);
  line-height:1.04; font-weight:900; color:#fff;
}

/* Optional masked logo-word inside H1 */
.logo-word{
  display:inline-block; height:1.25em; aspect-ratio:3.2/1;
  background-color: currentColor;
  -webkit-mask:url("/assets/images/Zilch_colour_logo.png") center/contain no-repeat;
          mask:url("/assets/images/Zilch_colour_logo.png") center/contain no-repeat;
  margin:0 -0.6em; vertical-align:-0.20em;
}

/* QUICK LINKS (optional) */
.quick{ padding:2rem 0 1.5rem }
.quick .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem }
.card{ border:1px solid var(--line); border-radius:18px; padding:1rem; background:#fff; box-shadow:var(--shadow); }
.card h3{ margin:.3rem 0 .25rem; color:var(--ink) }
.card p{ margin:0; color:var(--muted) }

/* RESPONSIVE */
@media (max-width:880px){
  .brand span{ display:none }
  .hero{ min-height:100vh }
  .road-content{ top:45%; }
  .road-inner{ 
    padding:1.5rem 1.2rem; 
    max-width: 90vw;
    margin: 0 auto;
  }
  .road-inner h1{ font-size:clamp(1.6rem,5vw,2.2rem) }
  .road-inner .kicker{ font-size: 0.8rem; }
  .road-cta-row{ gap:.4rem; flex-direction: column; }
  .road-cta-row .btn{ width: 100%; }
  .quick .cards{ grid-template-columns:1fr }
  
  /* Mobile navigation visibility */
  .nav-toggle{ color:#042B2F !important; }
  .nav-toggle:hover{ background:rgba(4,43,47,.1); }
}
@media (max-width:520px){
  .hero{ min-height:100vh }
  .road-content{ top:40%; }
  .road-inner{ 
    padding:1.2rem 1rem; 
    max-width: 95vw;
  }
  .road-inner h1{ font-size:clamp(1.4rem,6vw,1.8rem) }
  .road-inner .kicker{ font-size: 0.75rem; margin-bottom: 0.8rem; }
  .road-cta-row .btn{ 
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
  }
}