/* ===========================================================
   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:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
}
.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:var(--ink); 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:var(--muted); font-weight:700; padding:.5rem .75rem; border-radius:10px; }
.link:hover{ color:var(--ink); background:#eef2f6; }

/* ========== 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:72vh;
  display:grid; place-items:center;
  overflow:hidden;
  background:url('/assets/images/image_2.png') center/cover no-repeat;
  isolation:isolate;
}

/* Bottom gradient only, very subtle */
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.15) 0%, rgba(0,0,0,.0) 45%);
  z-index:0;
}

/* Glass panel wrapper */
.hero-inner{
  position:relative; z-index:1; text-align:center; color:#fff;
  padding:1.6rem 2rem;
  max-width:min(100%, 700px);
  margin-inline:auto;
  border-radius:20px;

  /* Glassmorphism effect */
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(12px) saturate(160%);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  box-shadow:0 8px 30px rgba(0,0,0,.25);
}

/* Text inside hero */
.kicker{
  letter-spacing:.08em; text-transform:uppercase; font-weight:900;
  font-size:.9rem; color:#e0e9ff; opacity:.97;
}
h1{
  margin:.35rem 0 .6rem;
  font-size:clamp(2.2rem,6.6vw,3.9rem);
  line-height:1.04; font-weight:900; color:#fff;
}
.lede{
  margin:0 auto 1.2rem; max-width:60ch;
  font-size:clamp(1rem,1.7vw,1.25rem);
  color:#f6f8fc; opacity:.99;
}

/* CTA row */
.cta-row{
  display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap;
  margin-top:.8rem;
}
.cta-row .btn{ min-width:148px }

/* 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:64vh }
  .hero-inner{ padding:1.6rem 1.2rem;max-width:92%; }
  .hero-inner h1{ font-size:clamp(2rem,8vw,3.2rem) }
  .cta-row{ gap:.5rem }
  .quick .cards{ grid-template-columns:1fr }
}
@media (max-width:520px){
  .cta-row .btn{ flex:1 1 100%; min-width:auto }
}