:root {
  --primary: #000000;
  --secondary: #ffffff;
  --accent: #ef4444; /* Signature Red */
  --background: #ffffff;
  --surface: #f8f8f8;
  --ink: #000000;
  --muted: #71717a;
  --border: #e4e4e7;
  --font-heading: 'Syne', sans-serif;
  --font-body: 'Inter', sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6;
  background-color: var(--background);
}
h1,h2,h3{margin:0;font-family:var(--font-heading);line-height:0.9; letter-spacing: -0.05em; text-transform: uppercase;}
h1{font-size:clamp(2.4rem,6.5vw,4.6rem); font-weight: 800;}
h2{font-size:clamp(2.5rem,8vw,5rem);margin-bottom:1.5rem; font-weight: 700;}
h3{font-size:1.5rem;margin-bottom:.5rem;}
p{margin-top:0;}
a{color:inherit; text-decoration: none;}

.container{width:100%;max-width:1400px;margin-inline:auto;padding-inline:40px}
.section{padding-block:clamp(6rem,15vw,12rem)}

.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0; /* Minimalist sharp corners */
  padding: 0;
  transition: 0.4s;
  overflow: hidden;
}
.card:hover {
  border-color: var(--accent);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  font-weight:700;
  border-radius:0;
  padding:1.2rem 3rem;
  transition: 0.3s;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.btn-primary{
  background: var(--primary);
  color: var(--secondary);
}
.btn-primary:hover {
  background: var(--accent);
}
.btn-secondary{
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}

.site-header{
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  z-index: 100;
  border-bottom: 1px solid var(--border);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;min-height:100px}
.site-logo{font-family:var(--font-heading);font-weight:800;font-size:1.8rem; color: #000; letter-spacing: -2px;}

.nav-toggle{
  display:none;
  border:1px solid var(--border);
  background:#fff;
  width:44px;
  height:44px;
  padding:10px;
  border-radius:0;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
}
.nav-toggle-bar{
  display:block;
  width:20px;
  height:2px;
  background:var(--ink);
  transition:transform .2s ease, opacity .2s ease;
}

.nav-menu{display:flex;gap:48px; align-items: center;}
.nav-menu a{font-weight:700;color:var(--ink); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px;}
.nav-menu a:not(.btn):not(.nav-cta):hover{color:var(--accent)}

.hero-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.grid-3{display:grid;gap:40px;grid-template-columns:repeat(3,minmax(0,1fr))}

@media (max-width:900px){
  .grid-3{grid-template-columns:1fr}
  .site-header .container{position:relative; min-height:84px}
  .nav-toggle{display:inline-flex}
  .nav-menu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:rgba(255,255,255,.98);
    border-bottom:1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    padding:8px 24px 16px;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
  }
  .nav-menu a{
    width:100%;
    padding:12px 2px;
    border-top:1px solid var(--border);
  }
  .nav-menu.is-open { display: flex; }
  .site-header.menu-open .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .site-header.menu-open .nav-toggle-bar:nth-child(2){opacity:0}
  .site-header.menu-open .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}