/* ============================================
   Xpensive Burundi — Printing & Branding Hub
   Design tokens: black + lemon-lime, neon glow
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg:        #0A0C08;
  --bg-alt:    #12150D;
  --card:      #15180F;
  --lime:      #C6FF00;
  --lime-soft: #9FE870;
  --white:     #F5F7EF;
  --muted:     rgba(245,247,239,0.62);
  --line:      rgba(198,255,0,0.16);
  --line-soft: rgba(245,247,239,0.10);
  --radius:    18px;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--white);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

img{max-width:100%; display:block;}

a{color:inherit; text-decoration:none;}

.wrap{max-width:1120px; margin:0 auto; padding:0 32px;}

h1,h2,h3{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  line-height:1.08;
  letter-spacing:-0.01em;
}

.glow{
  color:var(--lime);
  text-shadow:0 0 24px rgba(198,255,0,0.45);
}

.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--lime-soft);
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";
  width:20px; height:1px;
  background:var(--lime);
  display:inline-block;
}

/* ---------- nav ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,12,8,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
nav.wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:78px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:18px;
}
.brand .mark{
  width:38px; height:38px;
  border-radius:50%;
  border:2px solid var(--lime);
  display:flex; align-items:center; justify-content:center;
  font-size:13px;
  color:var(--lime);
  box-shadow:0 0 16px rgba(198,255,0,0.35);
}
.brand .biz-sub{
  display:block;
  font-family:'JetBrains Mono', monospace;
  font-weight:400;
  font-size:10px;
  letter-spacing:0.08em;
  color:var(--muted);
  text-transform:uppercase;
}
.nav-links{
  display:flex; align-items:center; gap:36px;
  font-size:14px; font-weight:500;
}
.nav-links a{color:var(--muted); transition:color .15s;}
.nav-links a:hover, .nav-links a.active{color:var(--lime);}
.nav-cta{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700; font-size:14px;
  background:var(--lime);
  color:var(--bg);
  padding:11px 22px;
  border-radius:100px;
  box-shadow:0 0 22px rgba(198,255,0,0.3);
}
.menu-btn{display:none; background:none; border:none; color:var(--white); font-size:24px; cursor:pointer;}

/* WhatsApp button shown inside the mobile menu only — hidden on desktop
   since the regular .nav-cta already handles that. */
.nav-cta-mobile{display:none;}

@media (max-width:860px){
  .nav-links{
    position:absolute; top:78px; left:0; right:0;
    background:var(--bg-alt);
    flex-direction:column; align-items:flex-start;
    padding:24px 32px; gap:20px;
    border-bottom:1px solid var(--line-soft);
    display:none;
  }
  .nav-links.open{display:flex;}
  .menu-btn{display:block;}
  .nav-cta{display:none;}
  .nav-cta-mobile{
    display:flex;
    justify-content:center;
    width:100%;
    margin-top:4px;
  }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Space Grotesk', sans-serif;
  font-weight:700; font-size:15px;
  padding:15px 28px;
  border-radius:100px;
  cursor:pointer; border:none;
}
.btn-primary{
  background:var(--lime); color:var(--bg);
  box-shadow:0 0 28px rgba(198,255,0,0.35);
}
.btn-ghost{
  background:transparent; color:var(--white);
  border:1px solid var(--line-soft);
}

/* ---------- crop-mark decoration (signature element) ---------- */
.crop{
  position:relative;
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
}
.crop::before, .crop::after,
.crop .cm-tl, .crop .cm-tr, .crop .cm-bl, .crop .cm-br{
  content:"";
  position:absolute;
  width:14px; height:14px;
  border:1.5px solid var(--lime);
  opacity:0.8;
}
.crop .cm-tl{top:-1px; left:-1px; border-right:none; border-bottom:none;}
.crop .cm-tr{top:-1px; right:-1px; border-left:none; border-bottom:none;}
.crop .cm-bl{bottom:-1px; left:-1px; border-right:none; border-top:none;}
.crop .cm-br{bottom:-1px; right:-1px; border-left:none; border-top:none;}

/* ---------- image placeholder ----------
   Swap any .img-ph div for a real <img src="images/your-file.jpg" alt="...">
   Keep the same class on the <img> if you want the crop-mark corners to stay.
------------------------------------------- */
.img-ph{
  width:100%; height:100%;
  min-height:180px;
  background:
    repeating-linear-gradient(135deg, rgba(198,255,0,0.06) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, #1b1f12, #0d0f0a);
  border-radius:calc(var(--radius) - 1px);
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  color:rgba(245,247,239,0.35);
  text-align:center;
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding:12px;
}

/* ---------- sections ---------- */
section{padding:88px 0;}
.section-head{max-width:640px; margin-bottom:48px;}
.section-head h2{font-size:34px; margin-bottom:14px;}
.section-head p{color:var(--muted); font-size:16px;}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--line-soft);
  padding:56px 0 40px;
  background:var(--bg-alt);
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr;
  gap:40px;
  margin-bottom:40px;
}
footer h4{
  font-family:'JetBrains Mono', monospace;
  font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--lime-soft); margin-bottom:16px;
}
footer p, footer a{color:var(--muted); font-size:14px; display:block; margin-bottom:10px;}
footer a:hover{color:var(--lime);}
.footer-bottom{
  border-top:1px solid var(--line-soft);
  padding-top:24px;
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  color:var(--muted);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}

@media (max-width:720px){
  .footer-grid{grid-template-columns:1fr; gap:32px;}
  section{padding:64px 0;}
  .section-head h2{font-size:28px;}
}

/* ---------- responsive layout grids ---------- */
.grid-2-wide{display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center;}
.grid-2-even{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.grid-3-tight{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}

@media (max-width:860px){
  .grid-2-wide, .grid-2-even, .grid-3, .grid-3-tight, .grid-4{
    grid-template-columns:1fr;
  }
  h1{font-size:38px !important;}
}