@import url('https://fonts.cdnfonts.com/css/neue-haas-grotesk-display-pro');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --bg: #120F0A;
  --bg-alt: #1B160E;
  --card: #201A11;
  --text: #F5EFE2;
  --text-muted: #A79A82;
  --gold: #E3A94A;
  --teal: #6FA394;
  --rule: rgba(245,239,226,0.12);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background:
    radial-gradient(1.5px 1.5px at 20px 30px, rgba(245,239,226,0.05) 100%, transparent),
    radial-gradient(1.5px 1.5px at 140px 90px, rgba(245,239,226,0.04) 100%, transparent),
    radial-gradient(1px 1px at 80px 160px, rgba(245,239,226,0.05) 100%, transparent),
    radial-gradient(1.5px 1.5px at 220px 40px, rgba(245,239,226,0.04) 100%, transparent),
    var(--bg);
  background-size: 260px 260px;
  color: var(--text);
  font-family: 'Neue Haas Grotesk Display Pro', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; }

@keyframes rise{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform: translateY(0); } }
@keyframes float{ 0%,100%{ transform: translateY(0) rotate(var(--r,0deg)); } 50%{ transform: translateY(-8px) rotate(var(--r,0deg)); } }
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; }
}

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

/* ---- NAV ---- */
nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 26px 32px;
  border-bottom: 1px solid var(--rule);
  position: sticky; top:0; z-index: 50;
  background: rgba(18,15,10,0.86);
  backdrop-filter: blur(8px);
}
.logo-mark{ height: 26px; width:auto; display:block; }
.logo-mark path{ fill:#F5EFE2; }
.nav-links{ display:flex; align-items:center; gap:36px; font-size:14px; letter-spacing:0.02em; }
.nav-links a{ text-decoration:none; color: var(--text-muted); transition: color .18s ease; }
.nav-links a:hover, .nav-links a:focus-visible{ color: var(--text); }
.nav-tag{
  font-family:'JetBrains Mono', monospace; font-size:12px; color: var(--teal);
  border:1px solid rgba(111,163,148,0.35); padding:6px 10px; border-radius:3px;
  background: rgba(111,163,148,0.06);
}

/* ---- HERO ---- */
.hero{
  padding: 110px 32px 140px;
  position: relative;
  overflow: hidden;
}
.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase;
  color: var(--gold); display:flex; align-items:center; gap:10px; margin-bottom:26px;
  animation: rise .6s ease both;
}
.eyebrow::before{ content:''; width:22px; height:1px; background: var(--gold); display:inline-block; }

h1{
  font-family:'Neue Haas Grotesk Display Pro', Arial, sans-serif; font-weight:600; font-size: clamp(40px, 6vw, 78px);
  line-height: 1.03; letter-spacing:-0.01em; max-width: 15ch; margin: 0 0 28px;
  animation: rise .6s ease .08s both;
}
h1 em{ font-style: italic; font-weight:500; color: var(--gold); }

.hero-sub{
  font-size: 17px; line-height:1.65; color: var(--text-muted); max-width: 48ch; margin: 0 0 40px;
  animation: rise .6s ease .16s both;
}

.cta-row{ display:flex; gap:16px; flex-wrap:wrap; animation: rise .6s ease .24s both; }
.btn{
  font-family:'JetBrains Mono', monospace; font-size: 13.5px;
  padding: 14px 22px; border-radius: 3px; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn-primary{ background: var(--gold); color: #171208; font-weight:700; }
.btn-primary:hover{ transform: translateY(-2px); }
.btn-ghost{ border:1px solid var(--rule); color: var(--text); }
.btn-ghost:hover{ border-color: var(--text-muted); transform: translateY(-2px); }

/* ---- Floating recipe/code cards ---- */
.snippet-field{
  position: relative; margin-top: 90px; height: 300px;
}
.card{
  position:absolute; width: 320px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 24px 48px -20px rgba(0,0,0,0.55);
  overflow:hidden;
}
.card-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 14px; border-bottom: 1px dashed var(--rule);
  font-family:'JetBrains Mono', monospace; font-size:11.5px; color: var(--text-muted);
}
.card-head .tape{
  font-size:10px; letter-spacing:0.08em; color: var(--teal); text-transform:uppercase;
}
.card pre{
  margin:0; padding: 16px 14px 18px; font-family:'JetBrains Mono', monospace;
  font-size: 12.2px; line-height:1.65; overflow:hidden; white-space:pre-wrap;
}
.k{ color:#E39FA8; } .s{ color:#E3C24A; } .c{ color:#6E6355; font-style:italic; }
.fn{ color:#7FB8D9; } .n{ color: var(--teal); }

.card-1{ top: 0; left: 12%; --r: -4deg; z-index:2; animation: float 7s ease-in-out infinite; }
.card-2{ top: 70px; left: 46%; --r: 2.5deg; z-index:1; animation: float 8s ease-in-out infinite .5s; }

@media (max-width: 900px){
  .snippet-field{ height: auto; display:flex; flex-direction:column; gap:22px; }
  .card{ position:static; width:100%; transform:none !important; }
}

/* ---- torn divider ---- */
.torn{
  height: 34px; width:100%;
  background: var(--bg-alt);
  clip-path: polygon(0% 100%, 4% 40%, 9% 90%, 14% 30%, 19% 85%, 24% 20%, 29% 75%, 34% 15%, 39% 80%, 44% 25%, 49% 90%, 54% 35%, 59% 85%, 64% 20%, 69% 75%, 74% 30%, 79% 90%, 84% 25%, 89% 80%, 94% 35%, 100% 90%, 100% 100%);
}

/* ---- FOOTER / CONTACT ---- */
footer{ padding: 90px 32px 60px; }
.footer-grid{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:40px; border-top:1px solid var(--rule); padding-top:48px; }
footer h2{ font-family:'Neue Haas Grotesk Display Pro', Arial, sans-serif; font-style:italic; font-weight:500; font-size: clamp(26px,3.2vw,38px); margin:0 0 10px; max-width:16ch; }
footer p.sub{ color: var(--text-muted); font-size:14.5px;    }
.foot-meta{ font-family:'JetBrains Mono', monospace; font-size:12.5px; color: var(--text-muted); display:flex; flex-direction:column; gap:6px; align-items:flex-end; text-align:right; }
.copyright{ margin-top:60px; font-family:'JetBrains Mono', monospace; font-size:11.5px; color: var(--text-muted); opacity:0.65; }