/* Shaved Ape Studios — mockup build v1 */
:root{
  --paper:#f6ead8;
  --ink:#1e1c20;
  --muted:#6e6673;
  --purple:#7b56a0;
  --purple-deep:#5a3a66;
  --yellow:#f0c23b;
  --yellow-deep:#e3a920;
  --btn:#1e1c20;
  --btn-text:#fff;
  --tab-bg:#f0e5d4;
  --tile-dark:#3b303b;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--ink); background:var(--paper);
}

/* Containers */
.container{width:min(1200px, 92%); margin:0 auto}

/* Topbar */
.topbar{background:var(--paper); border-bottom:1px solid rgba(0,0,0,.06)}
.topbar .container{display:flex; align-items:center; justify-content:space-between; padding:10px 0}
.motto{font-weight:800; letter-spacing:.06em; font-size:.85rem}
.nav{display:flex; align-items:center; gap:22px}
.nav a{color:var(--ink); text-decoration:none; font-weight:600; opacity:.85}
.nav a:hover{opacity:1}
.nav-toggle{display:none; background:none; border:0; padding:6px; cursor:pointer}
.nav-toggle span{display:block; width:22px; height:2px; margin:4px 0; background:var(--ink)}

/* Hero */
.hero{
  background: linear-gradient(90deg, var(--purple), var(--purple-deep));
  color:#fff;
}
body.theme-yellow .hero{
  background: linear-gradient(90deg, var(--yellow), var(--yellow-deep));
  color:#111;
}
.hero-inner{display:grid; grid-template-columns: 420px 1fr; gap:40px; align-items:center; padding:52px 0}
.hero-art{position:relative; display:flex; align-items:flex-end; gap:12px}
.hero-art img{width:220px; height:auto}
.hero-art .razor{width:80px; transform:translateY(-6px)}
.logo-script{
  font-family:Pacifico, cursive; font-size: clamp(40px, 6vw, 72px); margin:0 0 8px 0; line-height:1.05;
}
.logo-script span{letter-spacing:.06em}
.tagline{margin:0 0 20px 0; font-size: clamp(16px, 2.2vw, 20px); opacity:.95}
.cta-row{display:flex; gap:14px}
.btn{display:inline-block; padding:14px 22px; border-radius:10px; text-decoration:none; font-weight:800; letter-spacing:.02em}
.btn.primary{background:var(--btn); color:var(--btn-text)}
body.theme-yellow .btn.primary{background:#1f1a25; color:#fff}
.btn.primary:hover{filter:brightness(1.05)}

/* Tabs band */
.band-tabs{background:var(--tab-bg); border-top:1px solid rgba(0,0,0,.05); border-bottom:1px solid rgba(0,0,0,.05)}
.tabs{display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; padding:14px 0}
.tab{
  display:flex; align-items:center; justify-content:center; padding:18px 10px;
  text-decoration:none; color:var(--ink); font-weight:800; text-transform:uppercase; font-size:.95rem;
}

/* Tiles */
.tiles-section{padding:28px 0 56px}
.tiles{display:grid; grid-template-columns: repeat(3, 1fr); gap:26px}
.tile{
  display:flex; align-items:center; justify-content:center; height:180px; border-radius:10px;
  text-decoration:none; color:#fff; font-weight:800; text-align:center; padding:10px; line-height:1.15;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.t1{background:var(--tile-dark)}
.t2{background:var(--purple-deep)}
.t3{background:#7a837c}

/* Footer */
.footer{border-top:1px solid rgba(0,0,0,.08); padding:22px 0 34px; background:var(--paper)}
.foot{display:flex; align-items:center; justify-content:space-between; gap:20px}
.brand-foot{display:flex; align-items:center; gap:10px}
.foot-mark{width:28px; height:28px; opacity:.9}
.links{display:flex; gap:16px}
.links a{text-decoration:none; color:var(--muted)}
.links a:hover{color:var(--ink)}

/* Responsive */
@media (max-width: 860px){
  .hero-inner{grid-template-columns: 1fr; text-align:center}
  .hero-art{justify-content:center}
  .tabs{grid-template-columns:1fr; gap:8px}
  .tiles{grid-template-columns:1fr; gap:18px}
  .nav a{display:none}
  .nav-toggle{display:block}
}