/* ==========================================================================
   HAGGLR — home.css  (landing + docs page styling)
   ========================================================================== */

/* background canvas */
.bg{position:fixed;inset:0;z-index:-2;width:100%;height:100%}
.bg-wash{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255,150,60,.10), transparent 55%),
    linear-gradient(180deg, rgba(23,16,25,.55) 0%, rgba(23,16,25,.82) 42%, rgba(23,16,25,.96) 100%);}

/* ---------- hero -------------------------------------------------------- */
.hero{position:relative;padding-block:clamp(40px,7vw,88px) clamp(56px,8vw,110px)}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:center}
@media(max-width:940px){.hero__grid{grid-template-columns:1fr;gap:36px}}

.hero__mark{font-family:var(--f-display);color:var(--gold);
  font-size:clamp(72px,15vw,168px);line-height:.82;margin:6px 0 0;letter-spacing:2px;
  text-shadow:
    0 4px 0 var(--gold-deep), 0 8px 0 #9c6412,
    0 10px 0 #6d440c, 0 14px 30px rgba(0,0,0,.55),
    0 0 44px rgba(255,120,50,.25);}
.hero__tag{font-family:var(--f-head);font-size:clamp(18px,2.6vw,26px);color:var(--parch);
  margin:18px 0 0;letter-spacing:.5px}
.hero__sub{margin:16px 0 0;max-width:46ch}
.hero__cta{margin-top:26px}
.hero__meta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:20px}
.hero__cd{font-family:var(--f-mono);color:var(--gold);font-size:15px}
.hero__cd[data-live="1"]{color:var(--green)}
.hero .cabar{margin-top:20px;max-width:560px}

/* ---------- self-playing haggle demo ----------------------------------- */
.demo{position:relative;background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.14)), var(--ink-2);
  border:2px solid var(--line);box-shadow:var(--shadow);
  padding:18px 18px 20px;transform:rotate(.4deg)}
.demo::before{content:"THE STALL";position:absolute;top:-11px;left:18px;
  font-family:var(--f-pixel);font-size:11px;letter-spacing:2px;color:#3a2408;background:var(--gold);
  padding:3px 9px 2px}
.demo__top{display:flex;align-items:center;gap:14px;border-bottom:2px dashed var(--line);padding-bottom:14px}
.demo__spr{width:66px;height:66px;background:#0f0a12;border:2px solid var(--line);padding:5px}
.demo__who{font-family:var(--f-head);font-size:20px;color:var(--parch)}
.demo__sub{font-family:var(--f-pixel);font-size:12px;color:var(--parch-2);letter-spacing:1px;margin-top:3px}
.demo__price{margin-left:auto;text-align:right}
.demo__pricelab{font-family:var(--f-pixel);font-size:10px;letter-spacing:1px;color:var(--parch-2)}
.demo__tag{margin-top:5px}
.demo__log{min-height:150px;display:flex;flex-direction:column;gap:9px;padding-top:14px}
.demo__msg{max-width:82%;padding:9px 12px;font-size:15px;line-height:1.4;border:2px solid var(--line-soft)}
.demo__msg--v{align-self:flex-start;background:#241726;border-bottom-left-radius:0}
.demo__msg--p{align-self:flex-end;background:#123018;border-color:#2b5c30;border-bottom-right-radius:0;color:#eaf6d4}
.demo__msg b{font-family:var(--f-pixel);font-size:10px;letter-spacing:1px;display:block;opacity:.7;margin-bottom:2px}
.demo__sold{position:absolute;right:22px;bottom:16px;font-size:26px}

/* ---------- section header ---------------------------------------------- */
.sec-head{max-width:60ch;margin-bottom:36px}
.sec-head .lead{margin-top:12px}

/* ---------- how it works (real sequence → numbered) --------------------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding:26px 22px 24px;overflow:hidden}
.step__n{font-family:var(--f-display);font-size:58px;color:var(--gold-deep);line-height:1;opacity:.85}
.step__t{font-family:var(--f-head);font-size:22px;margin:10px 0 8px;color:var(--parch)}
.step__d{color:var(--parch-2);font-size:16px}
.step::after{content:"";position:absolute;inset:0;border-top:3px solid var(--gold);opacity:.5}

/* ---------- merchants ---------------------------------------------------- */
.merch{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.merch{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.merch{grid-template-columns:1fr}}
.mcard{position:relative;padding:20px 18px 18px;border-left:4px solid var(--accent,var(--gold))}
.mcard__top{display:flex;align-items:center;gap:12px}
.mcard__spr{width:52px;height:52px;background:#0f0a12;border:2px solid var(--line);padding:4px}
.mcard__name{font-family:var(--f-head);font-size:20px;color:var(--parch)}
.mcard__title{font-family:var(--f-pixel);font-size:11px;letter-spacing:1px;color:var(--accent,var(--gold));text-transform:uppercase;margin-top:2px}
.mcard__blurb{color:var(--parch-2);font-size:15px;margin-top:12px;line-height:1.45}
.mcard__tell{margin-top:12px;font-family:var(--f-pixel);font-size:11px;letter-spacing:.5px;color:var(--parch)}
.mcard__tell b{color:var(--green)}

/* ---------- tokenomics teaser ------------------------------------------- */
.tok{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,54px);align-items:center}
@media(max-width:860px){.tok{grid-template-columns:1fr}}
.tok__tags{display:flex;flex-direction:column;gap:14px}
.tokrow{display:flex;align-items:center;gap:14px}
.tokrow .tag{min-width:150px;text-align:center}
.tokrow__lab{font-family:var(--f-head);font-size:17px;color:var(--parch)}
.tokrow__sub{font-family:var(--f-pixel);font-size:12px;color:var(--parch-2);margin-top:2px;letter-spacing:.5px}

/* ---------- faq teaser -------------------------------------------------- */
.faqs{display:grid;gap:12px;max-width:820px}
.faq{padding:18px 20px}
.faq__q{font-family:var(--f-head);font-size:18px;color:var(--parch);margin:0}
.faq__a{color:var(--parch-2);font-size:16px;margin:9px 0 0;line-height:1.55}

/* ---------- CTA band ---------------------------------------------------- */
.cta{position:relative;text-align:center;padding-block:clamp(56px,8vw,96px)}
.cta__mark{font-family:var(--f-display);font-size:clamp(40px,8vw,88px);color:var(--gold);line-height:.9;
  text-shadow:0 4px 0 var(--gold-deep),0 8px 24px rgba(0,0,0,.5)}
.cta__sub{max-width:52ch;margin:16px auto 0}
.cta__btns{margin-top:28px;justify-content:center}

/* ---------- docs page --------------------------------------------------- */
.doc-hero{padding-block:clamp(40px,6vw,72px) 20px}
.doc-title{font-family:var(--f-display);font-size:clamp(44px,9vw,92px);color:var(--gold);line-height:.86;
  text-shadow:0 4px 0 var(--gold-deep),0 8px 24px rgba(0,0,0,.5)}
.doc-toc{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.doc-toc a{font-family:var(--f-head);font-size:14px;color:var(--parch-2);border:2px solid var(--line);padding:8px 13px}
.doc-toc a:hover{border-color:var(--gold);color:var(--gold)}
.doc-sec{padding-block:clamp(30px,4vw,50px);border-top:2px solid var(--line-soft)}
.doc-sec h2{font-family:var(--f-head);font-size:clamp(26px,4vw,40px);color:var(--parch);margin:0 0 6px}
.doc-lead{color:var(--parch-2);max-width:70ch;margin:0 0 22px}
.doc-body{max-width:78ch}
.doc-body p{color:var(--parch-2);margin:0 0 16px;line-height:1.65}
.doc-body strong{color:var(--parch)}
.tok-table{width:100%;border-collapse:collapse;font-size:15px;margin:6px 0 8px}
.tok-table td{border:2px solid var(--line-soft);padding:12px 14px}
.tok-table td:first-child{font-family:var(--f-head);color:var(--parch);width:42%}
.tok-table td:last-child{font-family:var(--f-mono);color:var(--gold)}
.doc-faq{display:grid;gap:12px;max-width:820px}
.doc-faq details{border:2px solid var(--line);background:var(--ink-2)}
.doc-faq summary{cursor:pointer;padding:16px 18px;font-family:var(--f-head);font-size:17px;color:var(--parch);list-style:none}
.doc-faq summary::-webkit-details-marker{display:none}
.doc-faq summary::before{content:"+ ";color:var(--gold)}
.doc-faq details[open] summary::before{content:"– "}
.doc-faq details[open] summary{border-bottom:2px solid var(--line-soft)}
.doc-faq .a{padding:14px 18px 18px;color:var(--parch-2);line-height:1.6}