:root{
  --bone:#FAF6F0;
  --bone-2:#F2ECE2;
  --ink:#171513;
  --ink-2:#3A3430;
  --mute:#7A716A;
  --line:#E6DFD3;
  --terra:#C64F2C;
  --terra-deep:#A83E20;
  --terra-soft:#F2D6C8;
  --mustard:#E8B84A;
  --jade:#1F5E4B;
  --wa:#25D366;
  --wa-deep:#1FB858;
}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', ui-sans-serif, system-ui, sans-serif;
  background:var(--bone);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.font-display{ font-family:'Inter Tight', 'Inter', sans-serif; letter-spacing:-0.022em; }
.font-mono{ font-family:'JetBrains Mono', ui-monospace, monospace; }
.tracking-tightest{ letter-spacing:-0.035em; }

/* subtle paper grain */
.grain::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.08 0 0 0 0 0.07 0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
  opacity:.35; mix-blend-mode:multiply;
}

.btn{ display:inline-flex; align-items:center; gap:.55rem; font-weight:600; border-radius:999px; transition:all .2s ease; white-space:nowrap;}
.btn-wa{ background:var(--wa); color:#fff; padding:.85rem 1.2rem; }
.btn-wa:hover{ background:var(--wa-deep); transform:translateY(-1px); box-shadow:0 10px 24px -10px rgba(37,211,102,.55); }
.btn-ghost{ border:1.5px solid var(--ink); color:var(--ink); padding:.8rem 1.15rem; background:transparent; }
.btn-ghost:hover{ background:var(--ink); color:var(--bone); }
.btn-terra{ background:var(--terra); color:#fff; padding:.85rem 1.2rem; }
.btn-terra:hover{ background:var(--terra-deep); transform:translateY(-1px); box-shadow:0 10px 24px -10px rgba(198,79,44,.6); }
.btn-accent{ padding:.85rem 1.2rem; }
.btn-accent:hover{ transform:translateY(-1px); filter:brightness(.94); }

.card{
  background:#fff; border:1px solid var(--line); border-radius:1.5rem;
  box-shadow: 0 1px 0 rgba(23,21,19,.02), 0 20px 40px -28px rgba(23,21,19,.12);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow: 0 1px 0 rgba(23,21,19,.02), 0 28px 50px -24px rgba(23,21,19,.2); border-color:#DCD3C2;}
.card-static:hover{ transform:none; }

.chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .6rem; border-radius:999px; font-size:.72rem; font-weight:500; border:1px solid var(--line); background:var(--bone); color:var(--ink-2); font-family:'JetBrains Mono', monospace;}

/* reveal on scroll */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease;}
.reveal.in{ opacity:1; transform:none;}

/* marquee */
@keyframes slide { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee-track{ animation: slide 40s linear infinite; }

/* hero arches */
.arch-bg{ background: radial-gradient(120% 85% at 50% 100%, var(--bone-2) 0%, var(--bone) 60%); }

details > summary { list-style:none; cursor:pointer; }
details > summary::-webkit-details-marker{ display:none; }
details[open] .faq-icon{ transform: rotate(45deg); }
.faq-icon{ transition: transform .25s ease; }

/* navbar */
.nav-blur{ backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); }

/* tech badge grid */
.tech-pill{ border:1px solid var(--line); background:#fff; border-radius:.9rem; padding:.65rem .85rem; font-size:.85rem; color:var(--ink-2); display:flex; align-items:center; gap:.5rem;}

/* dot grid */
.dots{ background-image: radial-gradient(rgba(23,21,19,.08) 1px, transparent 1px); background-size: 18px 18px;}

@media (max-width: 640px){
  .hero-h { font-size: 44px; line-height: 1.02; }
}