/* ============================================================
   MeldCrew — shared stylesheet (The Museum of Collaboration)
   ============================================================ */
:root{
  --bg:#0a0a0a;
  --bg-2:#111010;
  --fg:#f3eee4;
  --muted:#8d8678;
  --muted-2:#6b655b;
  --gold:#d8a94a;
  --gold-2:#f4d27a;
  --rose:#c8765a;
  --line:rgba(216,169,74,.16);
  --line-soft:rgba(243,238,228,.08);
  --card:rgba(255,255,255,.025);
  --radius:18px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--fg);
  font-family:"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;line-height:1.5;
}
a{color:inherit}
img{max-width:100%;display:block}

/* film grain (optional, add .grain element) */
.grain{position:fixed;inset:-50%;z-index:3;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-2%,1%)}50%{transform:translate(1%,-1%)}75%{transform:translate(-1%,2%)}100%{transform:translate(2%,-2%)}}

/* ---------- NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:18px 30px;
  background:linear-gradient(180deg,rgba(10,10,10,.85),rgba(10,10,10,0));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .4s var(--ease);
}
.nav.solid{background:rgba(10,10,10,.92);border-bottom:1px solid var(--line-soft)}
.brand{font-weight:800;letter-spacing:.22em;font-size:14px;text-transform:uppercase;text-decoration:none;color:var(--fg)}
.brand b{color:var(--gold)}
.nav .links{display:flex;gap:28px;align-items:center;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.nav .links a{text-decoration:none;opacity:.82;transition:opacity .3s,color .3s;padding:6px 0;position:relative}
.nav .links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:width .3s var(--ease)}
.nav .links a:hover{opacity:1;color:var(--gold-2)}
.nav .links a:hover::after{width:100%}
.nav .links a.cta{padding:10px 20px;border-radius:30px;background:linear-gradient(120deg,var(--gold-2),var(--gold));
  color:#1a1206;font-weight:700;opacity:1}
.nav .links a.cta::after{display:none}
.nav .links a.cta:hover{transform:translateY(-1px)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;z-index:60}
.burger span{width:24px;height:2px;background:var(--fg);transition:.3s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:760px){
  .burger{display:flex}
  .nav .links{
    position:fixed;inset:0 0 auto 0;top:0;flex-direction:column;gap:18px;
    background:rgba(8,8,8,.98);padding:90px 30px 40px;align-items:flex-start;
    transform:translateY(-100%);transition:transform .45s var(--ease);font-size:15px}
  .nav .links.open{transform:translateY(0)}
  .nav .links a.cta{align-self:stretch;text-align:center}
}

/* ---------- LAYOUT ---------- */
.page{padding-top:120px;min-height:100vh;position:relative;z-index:4}
.wrap{max-width:1100px;margin:0 auto;padding:0 30px}
.narrow{max-width:760px}
.section{padding:70px 0}
.center{text-align:center}

.eyebrow{font-size:11px;letter-spacing:.5em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:22px}
.eyebrow span{color:var(--muted);font-weight:400}
h1.title{font-size:clamp(44px,7vw,90px);line-height:.98;font-weight:300;letter-spacing:-.02em}
h1.title b,h2.title b{font-weight:800;background:linear-gradient(120deg,var(--gold-2),var(--gold),var(--rose));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
h2.title{font-size:clamp(32px,5vw,60px);line-height:1;font-weight:300;letter-spacing:-.02em}
.lead{font-size:18px;line-height:1.7;color:var(--muted);margin-top:22px;max-width:620px}
.center .lead{margin-left:auto;margin-right:auto}
.serif{font-family:Georgia,"Times New Roman",serif;font-style:italic}

/* ---------- BUTTONS ---------- */
.btn{display:inline-block;cursor:pointer;text-decoration:none;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  padding:15px 32px;border-radius:40px;font-weight:700;border:1px solid transparent;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s}
.btn.solid{background:linear-gradient(120deg,var(--gold-2),var(--gold));color:#1a1206;box-shadow:0 10px 40px rgba(216,169,74,.28)}
.btn.solid:hover{transform:translateY(-3px);box-shadow:0 16px 50px rgba(216,169,74,.4)}
.btn.ghost{border-color:var(--line);color:var(--fg);background:transparent}
.btn.ghost:hover{transform:translateY(-3px);border-color:var(--gold);color:var(--gold-2)}
.btn-row{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.center .btn-row{justify-content:center}

/* ---------- CARDS / GRID ---------- */
.grid{display:grid;gap:22px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card-b{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);padding:34px;
  transition:transform .35s var(--ease),border-color .35s,background .35s}
.card-b:hover{transform:translateY(-6px);border-color:var(--line);background:rgba(216,169,74,.04)}
.step-n{font-family:Georgia,serif;font-style:italic;font-size:44px;color:var(--gold);opacity:.5;line-height:1}
.card-b h3{font-size:24px;font-weight:700;margin:14px 0 12px}
.card-b p{color:var(--muted);font-size:15px;line-height:1.6}

.pair{display:flex;flex-direction:column;justify-content:space-between;min-height:200px;
  background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);padding:28px;
  position:relative;overflow:hidden;transition:transform .35s var(--ease),border-color .35s}
.pair::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle at 80% 20%,rgba(216,169,74,.16),transparent 60%)}
.pair:hover{transform:translateY(-6px);border-color:var(--line)}
.pair:hover::before{opacity:1}
.pair .combo{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:700}
.pair .combo b{color:var(--rose)}
.pair .name{font-size:26px;font-weight:300;margin-top:auto;position:relative}
.pair .name .serif{color:var(--gold-2)}

/* ---------- FORMS ---------- */
.form-wrap{max-width:440px;margin:0 auto;background:var(--card);border:1px solid var(--line-soft);
  border-radius:24px;padding:42px 38px}
.field{margin-bottom:18px;text-align:left}
.field label{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field input,.field textarea,.field select{
  width:100%;background:rgba(0,0,0,.35);border:1px solid var(--line-soft);border-radius:12px;
  color:var(--fg);font-size:15px;padding:14px 16px;font-family:inherit;transition:border-color .3s,box-shadow .3s}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(216,169,74,.12)}
.field.err input,.field.err textarea,.field.err select{border-color:var(--rose)}
.field .msg{font-size:12px;color:var(--rose);margin-top:6px;min-height:14px}
.form-wrap .btn{width:100%;text-align:center;margin-top:8px}
.form-note{font-size:12px;color:var(--muted-2);margin-top:18px;text-align:center;line-height:1.5}
.form-note a{color:var(--gold)}
.toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(140%);z-index:80;
  background:linear-gradient(120deg,var(--gold-2),var(--gold));color:#1a1206;font-weight:700;
  padding:15px 26px;border-radius:40px;box-shadow:0 12px 44px rgba(216,169,74,.4);
  transition:transform .5s var(--ease);font-size:14px}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ---------- PROSE (legal) ---------- */
.prose h2{font-size:24px;font-weight:700;margin:38px 0 14px;color:var(--fg)}
.prose p{color:var(--muted);margin-bottom:16px;line-height:1.8}
.prose ul{color:var(--muted);margin:0 0 16px 22px;line-height:1.8}
.updated{color:var(--muted-2);font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-top:8px}

/* ---------- FOOTER ---------- */
.foot{position:relative;z-index:4;border-top:1px solid var(--line);margin-top:40px;
  padding:50px 30px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;
  color:var(--muted);font-size:13px;max-width:1100px;margin-left:auto;margin-right:auto}
.foot .fl a{color:var(--muted);text-decoration:none;margin-left:22px;transition:color .3s}
.foot .fl a:first-child{margin-left:0}
.foot .fl a:hover{color:var(--gold-2)}

/* ============================================================
   SCROLL ANIMATION ENGINE  (auto-wired by meld.js)
   ============================================================ */
/* scroll-progress bar */
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--rose),var(--gold),var(--gold-2));
  box-shadow:0 0 12px rgba(216,169,74,.55)}

/* ambient drifting background (injected on pages without the 3D stage) */
.bgfx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--bg)}
.bgfx .stars{position:absolute;inset:-10%;opacity:.55;animation:twinkle 6s ease-in-out infinite alternate;
  background-image:radial-gradient(1px 1px at 18% 24%,rgba(255,255,255,.55),transparent),radial-gradient(1px 1px at 68% 58%,rgba(255,255,255,.45),transparent),radial-gradient(1px 1px at 42% 82%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 84% 30%,rgba(255,255,255,.45),transparent),radial-gradient(1px 1px at 30% 60%,rgba(255,255,255,.35),transparent)}
@keyframes twinkle{from{opacity:.35}to{opacity:.65}}
.bgfx .orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;animation:drift 26s ease-in-out infinite}
.bgfx .o1{width:540px;height:540px;background:radial-gradient(circle,rgba(216,169,74,.5),transparent 70%);top:-140px;left:-120px}
.bgfx .o2{width:480px;height:480px;background:radial-gradient(circle,rgba(200,118,90,.45),transparent 70%);bottom:-160px;right:-100px;animation-delay:-9s}
.bgfx .o3{width:400px;height:400px;background:radial-gradient(circle,rgba(216,169,74,.32),transparent 70%);top:38%;left:58%;animation-delay:-16s}
@keyframes drift{0%,100%{transform:translate(0,0)}33%{transform:translate(46px,-34px)}66%{transform:translate(-34px,44px)}}

/* reveal-on-scroll (direction variants + per-element stagger via style="--d:.15s") */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .85s var(--ease) var(--d,0s),transform .85s var(--ease) var(--d,0s)}
.reveal.in{opacity:1;transform:none}
.reveal.from-l{transform:translateX(-46px)}
.reveal.from-r{transform:translateX(46px)}
.reveal.zoom{transform:scale(.92)}
.reveal.from-l.in,.reveal.from-r.in,.reveal.zoom.in{transform:none}
[data-parallax]{will-change:transform}

/* subpage hero band */
.hero{min-height:56vh;display:flex;flex-direction:column;justify-content:center;text-align:center;padding-top:40px}
.hero .lead{margin-left:auto;margin-right:auto}

@media(max-width:860px){.g3{grid-template-columns:1fr}.g2{grid-template-columns:1fr}}
@media(max-width:760px){.foot{flex-direction:column;text-align:center}.foot .fl a{margin:0 11px}}

/* ---------- MOBILE / PHONE ---------- */
@media(max-width:640px){
  .nav{padding:14px 18px}
  .brand{font-size:13px}
  .page{padding-top:96px}
  .wrap{padding:0 22px}
  .section{padding:46px 0}
  .hero{min-height:auto;padding-top:24px;padding-bottom:8px}
  h1.title{font-size:clamp(34px,10vw,54px)}
  h2.title{font-size:clamp(28px,8vw,40px)}
  .lead{font-size:16px}
  /* stack buttons full-width, easy thumb targets */
  .btn-row{flex-direction:column;gap:12px;width:100%}
  .btn-row .btn{width:100%;text-align:center;padding:16px 24px}
  .center .btn-row{align-items:stretch}
  .card-b{padding:26px}
  .pair{min-height:160px;padding:24px}
  .pair .name{font-size:22px}
  .form-wrap{padding:30px 20px;border-radius:20px}
  /* lighter ambient effects = faster on phones */
  .bgfx .orb{filter:blur(46px);opacity:.42}
  .bgfx .o1{width:340px;height:340px}
  .bgfx .o2{width:300px;height:300px}
  .bgfx .o3{width:240px;height:240px}
}
@media(max-width:400px){
  h1.title{font-size:clamp(30px,11vw,42px)}
  .wrap{padding:0 18px}
}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important}.bgfx .orb,.bgfx .stars{animation:none}html{scroll-behavior:auto}}