/* ============================================================
   OJÀ — Marketplace Design System
   Palette: Onyx black + antique gold (classy, not caution-yellow)
   Display: Fraunces (serif, editorial, warm)
   Body: Manrope (clean, geometric)
   Utility/labels: Space Grotesk (letterspaced caps)
   ============================================================ */

:root{
  --black:        #0A0908;
  --black-soft:   #14120F;
  --surface:      #1C1914;
  --surface-2:    #262119;
  --line:         #35301F;
  --gold:         #C9A227;
  --gold-bright:  #E8C468;
  --gold-dim:     #8A701E;
  --cream:        #F4EFE2;
  --cream-dim:    #B9B2A0;
  --success:      #7A9B6E;

  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Manrope", -apple-system, sans-serif;
  --font-label:   "Space Grotesk", monospace;

  --container: 1200px;
  --radius: 2px;
  --ease: cubic-bezier(.22,.68,.28,1);
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  background:var(--black);
  color:var(--cream);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
ul{list-style:none;}

::selection{background:var(--gold-dim);color:var(--cream);}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}
}

/* ---------- Typography ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--cream);
  letter-spacing:-0.01em;
  line-height:1.08;
}

.eyebrow{
  font-family:var(--font-label);
  font-size:12px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--gold);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:24px;height:1px;
  background:var(--gold);
  display:inline-block;
}

.lede{
  color:var(--cream-dim);
  font-size:18px;
  line-height:1.7;
  max-width:52ch;
}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;
  z-index:100;
  background:rgba(10,9,8,0.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.nav.scrolled{
  border-bottom:1px solid var(--line);
  background:rgba(10,9,8,0.92);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 32px;
  max-width:var(--container);
  margin:0 auto;
}
.brand{
  font-family:var(--font-display);
  font-size:26px;
  font-weight:700;
  color:var(--cream);
  letter-spacing:0.02em;
  display:flex;align-items:center;gap:10px;
}
.brand .dot{color:var(--gold);}
.nav-links{
  display:flex;gap:40px;align-items:center;
}
.nav-links a{
  font-family:var(--font-label);
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--cream-dim);
  position:relative;
  padding:4px 0;
  transition:color .25s;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;
  width:0;height:1px;background:var(--gold);
  transition:width .3s var(--ease);
}
.nav-links a:hover, .nav-links a.active{color:var(--cream);}
.nav-links a:hover::after, .nav-links a.active::after{width:100%;}

.nav-cta{
  font-family:var(--font-label);
  font-size:13px;letter-spacing:0.08em;text-transform:uppercase;
  border:1px solid var(--gold-dim);
  padding:10px 22px;
  color:var(--gold-bright);
  transition:all .3s var(--ease);
}
.nav-cta:hover{background:var(--gold);color:var(--black);border-color:var(--gold);}

.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;}
.nav-toggle span{width:24px;height:1px;background:var(--cream);}

@media (max-width:860px){
  .nav-links{
    position:fixed;top:0;right:0;height:100vh;width:280px;
    background:var(--black-soft);
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    padding:0 40px;
    gap:28px;
    transform:translateX(100%);
    transition:transform .4s var(--ease);
    border-left:1px solid var(--line);
  }
  .nav-links.open{transform:translateX(0);}
  .nav-cta{display:none;}
  .nav-toggle{display:flex;z-index:101;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-label);
  font-size:13px;letter-spacing:0.1em;text-transform:uppercase;
  padding:16px 32px;
  transition:all .35s var(--ease);
  border:1px solid transparent;
}
.btn-gold{
  background:var(--gold);
  color:var(--black);
}
.btn-gold:hover{background:var(--gold-bright);transform:translateY(-2px);box-shadow:0 12px 24px -8px rgba(201,162,39,.4);}
.btn-outline{
  border-color:var(--line);
  color:var(--cream);
}
.btn-outline:hover{border-color:var(--gold);color:var(--gold-bright);}

/* ---------- Seal / signature motif ----------
   The recurring "verified" wax-seal-like badge used across cards.
*/
.seal{
  width:44px;height:44px;
  border-radius:50%;
  border:1px solid var(--gold-dim);
  display:flex;align-items:center;justify-content:center;
  position:relative;
  flex-shrink:0;
}
.seal::before{
  content:"";
  position:absolute;inset:5px;
  border-radius:50%;
  border:1px solid var(--gold);
  opacity:.6;
}
.seal svg{width:16px;height:16px;fill:var(--gold-bright);}

/* ---------- Section rhythm ---------- */
section{padding:120px 0;position:relative;}
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:64px;gap:40px;flex-wrap:wrap;
}
.section-head h2{font-size:clamp(32px,4vw,48px);}

/* ---------- Reveal on scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-stagger > *{transition-delay:calc(var(--i, 0) * 80ms);}

/* ---------- Footer ---------- */
footer{
  background:var(--black-soft);
  border-top:1px solid var(--line);
  padding:80px 0 32px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:48px;
  padding-bottom:56px;
  border-bottom:1px solid var(--line);
}
.footer-grid h4{
  font-family:var(--font-label);
  font-size:12px;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--gold);
  margin-bottom:20px;
}
.footer-grid ul li{margin-bottom:12px;}
.footer-grid ul a{color:var(--cream-dim);font-size:14px;transition:color .25s;}
.footer-grid ul a:hover{color:var(--gold-bright);}
.footer-bottom{
  padding-top:28px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:13px;color:var(--cream-dim);
  flex-wrap:wrap;gap:12px;
}
@media (max-width:860px){
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr;}
  section{padding:80px 0;}
}