/* ===================================================================
   crterm.ai — marketing site (minimal single page)
   Palette and type kept faithful to the Claude Design handoff.
   =================================================================== */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#F1EFE8;
  color:#191712;
  font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:#191712;color:#F1EFE8}
img{display:block;max-width:100%;height:auto}

@keyframes blink{0%,48%{opacity:1}49%,100%{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

.rise{animation:rise .65s cubic-bezier(.2,.7,.2,1) both}
.d08{animation-delay:.08s}.d16{animation-delay:.16s}.d24{animation-delay:.24s}

/* ---------- buttons ---------- */
.btn{cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:600;border:none}
.btn-coral{
  gap:8px;background:#C5634A;color:#FFF7F3;font-size:13px;padding:9px 16px;border-radius:9px;
  box-shadow:0 1px 2px rgba(168,71,43,.4),inset 0 1px 0 rgba(255,255,255,.18);
  transition:background .15s ease;
}
.btn-coral:hover{background:#B5543C}
.btn-ink{background:#191712;color:#F1EFE8;font-size:14px;padding:13px 22px;border-radius:11px;box-shadow:0 2px 14px rgba(25,23,18,.22);transition:background .15s ease}
.btn-ink:hover{background:#000}
.btn-outline{gap:8px;color:#191712;text-decoration:none;font-size:14px;font-weight:600;padding:13px 18px;border-radius:11px;border:1px solid rgba(25,23,18,.18);display:inline-flex;align-items:center;transition:background .15s ease}
.btn-outline:hover{background:rgba(25,23,18,.05)}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  background:rgba(241,239,232,.8);
  border-bottom:1px solid rgba(25,23,18,.10);
}
.nav-inner{
  max-width:1180px;margin:0 auto;padding:0 28px;height:62px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:#191712}
.brand-chevron{font-weight:700;font-size:15px;color:#C5634A}
.brand-name{font-weight:700;font-size:17px;letter-spacing:-.5px}
.brand-cursor{display:inline-block;width:8px;height:15px;background:#C5634A;margin-left:1px;animation:blink 1.05s steps(1) infinite}
.nav-right{display:flex;align-items:center;gap:30px}
.nav-links{display:flex;align-items:center;gap:26px;font-size:13px;font-weight:500}
.nav-link{color:#57534A;text-decoration:none;transition:color .15s ease}
.nav-link:hover{color:#191712}

/* ---------- hero ---------- */
.hero{max-width:1000px;margin:0 auto;padding:66px 28px 28px;text-align:center}
.hero-title{
  font-weight:300;font-size:30px;line-height:1.18;letter-spacing:-1.1px;
  margin:0 auto;max-width:640px;
}
.cta-row{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:26px}
.hero-shot{margin:48px auto 0;max-width:1000px}

/* ---------- navigation section ---------- */
.section{max-width:1180px;margin:0 auto;padding:64px 28px 72px}
.eyebrow{display:flex;align-items:baseline;gap:14px;margin-bottom:8px}
.eyebrow .num{font-weight:700;font-size:13px;color:#C5634A}
.eyebrow .kicker{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8A857A}
.section h2{font-weight:700;font-size:36px;letter-spacing:-1.4px;line-height:1.04;margin:0;max-width:620px}
.section-title{text-align:center;margin:0 auto 16px !important;max-width:600px !important}
.section .intro{font-size:15.5px;line-height:1.6;color:#57534A;max-width:600px;margin:0 auto;text-align:center}
.nav-shot{margin:38px auto 0;max-width:680px}
.shot-cap{margin-top:14px;font-size:12px;color:#8A857A;text-align:center}

/* ---------- footer ---------- */
.footer{max-width:1180px;margin:0 auto;padding:30px 28px 56px;border-top:1px solid rgba(25,23,18,.09)}
.footer-blurb{max-width:420px}
.footer-blurb .brand{margin-bottom:0}
.footer-blurb p{font-size:12.5px;color:#8A857A;line-height:1.6;margin:12px 0 0}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px;color:#8A857A}
.legal-link{color:#8A857A;text-decoration:none;transition:color .15s ease}
.legal-link:hover{color:#191712}
.made-by{display:inline-flex;align-items:center;gap:7px;color:#57534A;text-decoration:none;transition:color .15s ease}
.made-by:hover{color:#191712}
.made-by strong,.made-by span{font-weight:600;color:#C5634A}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .hero-title{font-size:26px;letter-spacing:-.8px}
  .section h2{font-size:28px;letter-spacing:-1px}
  .nav-links{display:none}
}
@media (max-width:560px){
  .hero-title{font-size:23px}
  .cta-row{flex-wrap:wrap}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:10px}
}