@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;700;900&display=swap');

:root {
  --bg:#090908; --panel:#171715; --text:#f7f1de; --muted:#c8bfa5;
  --yellow:#f7bf19; --orange:#f08b21; --line:rgba(247,191,25,.28);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; color:var(--text); background:radial-gradient(circle at 80% 10%, rgba(247,191,25,.18), transparent 30rem), var(--bg);
  font-family:Inter,system-ui,sans-serif;
}
body:before {
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.08;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:48px 48px;
}
header {
  position:sticky; top:0; z-index:10; display:flex; justify-content:space-between; align-items:center;
  padding:18px clamp(20px,5vw,72px); background:rgba(9,9,8,.88); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.brand { display:flex; gap:14px; align-items:center; color:var(--text); text-decoration:none; }
.logo { width:54px; height:54px; display:grid; place-items:center; border:2px solid var(--yellow); border-radius:50%; font-size:31px; background:#15120b; }
.brand strong { display:block; font-family:Anton,Impact,sans-serif; font-size:30px; line-height:.9; letter-spacing:.04em; }
.brand small { color:var(--yellow); font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
nav { display:flex; gap:28px; }
nav a { color:var(--text); text-decoration:none; font-size:13px; text-transform:uppercase; font-weight:900; letter-spacing:.08em; }
nav a:hover { color:var(--yellow); }

.hero {
  min-height:620px; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:36px;
  padding:70px clamp(20px,5vw,72px); border-bottom:1px solid var(--line);
}
.eyebrow { margin:0 0 8px; color:var(--yellow); font-family:Anton,Impact,sans-serif; font-size:28px; text-transform:uppercase; letter-spacing:.06em; }
h1 { margin:0; font-family:Anton,Impact,sans-serif; font-size:clamp(68px,11vw,150px); line-height:.86; text-transform:uppercase; color:var(--yellow); text-shadow:0 6px 0 rgba(0,0,0,.35); }
.lead { max-width:680px; color:var(--muted); font-size:clamp(18px,2vw,24px); line-height:1.55; }
.buttons { display:flex; gap:16px; flex-wrap:wrap; margin-top:30px; }
.button { min-height:54px; display:inline-flex; align-items:center; padding:0 22px; border-radius:10px; text-decoration:none; font-weight:900; text-transform:uppercase; border:2px solid var(--yellow); }
.primary { background:var(--yellow); color:#15110a; }
.secondary { color:var(--text); background:rgba(255,255,255,.04); }

.monkey-card {
  position:relative; min-height:430px; border-radius:28px; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(circle at 50% 38%, rgba(247,191,25,.25), transparent 12rem), linear-gradient(145deg,#1f1c15,#0d0d0b);
  border:1px solid var(--line); box-shadow:0 24px 80px rgba(0,0,0,.45);
}
.monkey-card:before { content:""; position:absolute; inset:auto -10% -36% -10%; height:50%; background:linear-gradient(180deg,var(--yellow),var(--orange)); transform:rotate(-2deg); }
.monkey { font-size:clamp(150px,22vw,290px); filter:drop-shadow(0 18px 18px rgba(0,0,0,.5)); }
.shades { position:absolute; top:30%; left:50%; transform:translateX(-50%) rotate(-4deg); font-size:clamp(58px,8vw,105px); }

.features { display:grid; grid-template-columns:repeat(4,1fr); background:linear-gradient(90deg,var(--yellow),var(--orange)); color:#17110a; }
.features article { padding:38px clamp(18px,3vw,42px); border-right:1px solid rgba(0,0,0,.18); }
.features article div { font-size:44px; }
.features h2,.section-title,.banner h2 { font-family:Anton,Impact,sans-serif; text-transform:uppercase; letter-spacing:.04em; }
.features h2 { font-size:30px; margin:14px 0 8px; }
.features p { font-weight:800; line-height:1.5; }

.section { padding:70px clamp(20px,5vw,72px); }
.center { text-align:center; }
.section-title { text-align:center; margin:0 0 34px; font-size:clamp(38px,5vw,70px); }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.card { padding:18px; border:1px solid rgba(247,191,25,.2); border-radius:20px; background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025)); color:var(--text); text-decoration:none; box-shadow:0 20px 60px rgba(0,0,0,.36); }
.card:hover { transform:translateY(-3px); border-color:rgba(247,191,25,.55); }
.card-art { height:170px; border-radius:14px; display:grid; place-items:center; font-family:Anton,Impact,sans-serif; font-size:52px; letter-spacing:.05em; margin-bottom:18px; }
.blue { background:radial-gradient(circle,#2b77d6,#07152d 70%); }
.dark { background:linear-gradient(135deg,#394246,#111); }
.gold { background:linear-gradient(135deg,#705a0e,#17110a); color:var(--yellow); }
.card h3 { margin:0 0 8px; font-family:Anton,Impact,sans-serif; font-size:30px; text-transform:uppercase; }
.card p { color:var(--muted); line-height:1.55; }
.card span { color:var(--yellow); font-weight:900; }

.banner { margin:0 clamp(20px,5vw,72px); padding:42px; border-radius:26px; background:linear-gradient(135deg,var(--yellow),var(--orange)); color:#17110a; box-shadow:0 24px 80px rgba(0,0,0,.45); }
.banner h2 { margin:0; font-size:clamp(34px,5vw,66px); }
.banner p { font-size:20px; font-weight:900; max-width:850px; }

.about { padding:70px clamp(20px,5vw,72px); text-align:center; max-width:900px; margin:auto; color:var(--muted); }
.quote { color:var(--yellow); font-size:clamp(28px,4vw,48px); font-family:Anton,Impact,sans-serif; text-transform:uppercase; }
footer { display:flex; justify-content:space-between; gap:18px; padding:28px clamp(20px,5vw,72px); color:var(--muted); border-top:1px solid var(--line); }

@media (max-width:880px) {
  nav{display:none}.hero{grid-template-columns:1fr}.features{grid-template-columns:1fr 1fr}.cards{grid-template-columns:1fr}footer{flex-direction:column}
}
@media (max-width:520px) {
  .brand strong{font-size:24px}.features{grid-template-columns:1fr}.hero{padding-top:44px}
}