/* Home page: "How do I join the private sale?" as a 4-step journey. Site tokens; light + dark; RTL + LTR. */
.journey{--j-card:var(--bg-2);--j-soft:rgba(127,130,150,.1);--j-gold:var(--brand,#f0b90b);position:relative}
:root[data-theme=light] .journey{--j-soft:#f3f3f5}
.journey::before{content:"";position:absolute;inset:-40px 0 auto;height:420px;pointer-events:none;z-index:-1;
  background:radial-gradient(50% 60% at 50% 0%,rgba(240,185,11,.14),transparent 70%)}

.j-head{text-align:center;max-width:760px;margin:0 auto 56px}
.j-kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:999px;background:rgba(240,185,11,.14);color:var(--brand-ink,var(--j-gold));
  font-weight:800;font-size:.9rem;letter-spacing:.02em}
.j-head h2{font-size:clamp(1.8rem,4vw,2.8rem);margin:16px 0 10px}
.j-head p{color:var(--muted);font-size:1.08rem;margin:0}
.j-live{display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:10px 18px;border-radius:999px;background:var(--j-card);
  border:1px solid var(--line);box-shadow:0 10px 30px -18px rgba(0,0,0,.35);font-size:.95rem;color:var(--text)}
.j-live i{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:jPulse 1.8s infinite}
.j-live b{color:var(--heading)}.j-live small{color:var(--muted)}
@keyframes jPulse{70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

.j-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;position:relative}
/* connecting line through the numbered nodes */
.j-steps::before{content:"";position:absolute;top:27px;inset-inline:12.5%;height:3px;border-radius:3px;
  background:linear-gradient(90deg,rgba(240,185,11,.15),var(--j-gold),rgba(240,185,11,.15))}
[dir=rtl] .j-steps::before{background:linear-gradient(270deg,rgba(240,185,11,.15),var(--j-gold),rgba(240,185,11,.15))}
.j-step{display:flex;flex-direction:column;align-items:center;gap:22px;opacity:1}
.j-node{position:relative;z-index:1;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--j-card);
  border:3px solid var(--j-gold);box-shadow:0 0 0 8px var(--bg),0 12px 30px -10px rgba(240,185,11,.6)}
.j-node span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--j-gold);color:#181a20;font:900 1.15rem/1 var(--ff-display,inherit)}
.j-card{width:100%;flex:1;display:flex;flex-direction:column;background:var(--j-card);border:1px solid var(--line);border-radius:26px;padding:22px 22px 20px;
  box-shadow:0 1px 2px rgba(20,22,30,.04),0 18px 40px -26px rgba(20,22,30,.35);transition:transform .25s ease,box-shadow .25s ease,border-color .25s}
.j-card:hover{transform:translateY(-6px);border-color:rgba(240,185,11,.55);box-shadow:0 26px 50px -24px rgba(240,185,11,.35)}
.j-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.j-ic{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:rgba(240,185,11,.14);color:var(--brand-ink,var(--j-gold))}
.j-ic .ic{width:24px;height:24px}
.j-chip{font-size:.78rem;font-weight:700;padding:5px 12px;border-radius:999px;background:var(--j-soft);color:var(--muted);white-space:nowrap}
.j-card h3{font-size:1.15rem;margin:0 0 8px;color:var(--heading)}
.j-card p{margin:0 0 18px;color:var(--muted);font-size:.95rem;line-height:1.85}

/* small illustrative mock-ups (decorative, aria-hidden) */
.j-mock{margin-top:auto;background:var(--j-soft);border-radius:18px;padding:14px;min-height:96px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.jm-code{display:flex;align-items:center;gap:10px;background:var(--j-card);border-radius:12px;padding:10px 12px}
.jm-code small{font-weight:800;color:var(--brand-ink,var(--j-gold));font-size:.75rem}
.jm-code b{flex:1;font:800 1.05rem/1 ui-monospace,"IBM Plex Mono",monospace;letter-spacing:.14em;color:var(--heading)}
.jm-copy{width:16px;height:18px;border:2px solid var(--muted);border-radius:4px;box-shadow:3px -3px 0 -1px var(--j-card),3px -3px 0 1px var(--muted);opacity:.7}
.jm-link{font:500 .72rem/1.4 ui-monospace,monospace;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jm-label{color:var(--muted);font-size:.78rem}
.jm-otp{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.jm-otp i{height:38px;border-radius:10px;background:var(--j-card);display:grid;place-items:center;font:800 1.05rem/1 inherit;font-style:normal;color:var(--heading);border:2px solid transparent}
.jm-otp i.on{border-color:var(--j-gold);position:relative}
.jm-otp i.on::after{content:"";width:2px;height:16px;background:var(--j-gold);animation:jCaret 1s steps(1) infinite}
@keyframes jCaret{50%{opacity:0}}
.jm-addr{display:flex;align-items:center;gap:12px;background:var(--j-card);border-radius:12px;padding:10px 12px}
.jm-addr div{flex:1;min-width:0;display:flex;flex-direction:column}
.jm-addr small{color:var(--muted);font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jm-addr b{font:700 .85rem/1.4 ui-monospace,monospace;color:var(--heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jm-addr em{font-style:normal;font-size:.7rem;font-weight:800;padding:3px 8px;border-radius:8px;background:rgba(240,185,11,.16);color:var(--brand-ink,var(--j-gold))}
.jm-qr{flex:none;width:38px;height:38px;border-radius:6px;background:
  conic-gradient(var(--heading) 25%,transparent 0 50%,var(--heading) 0 75%,transparent 0) 0 0/12px 12px,var(--j-soft);
  outline:3px solid var(--j-card);opacity:.85}
.jm-buy{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--j-card);border-radius:12px;padding:10px 12px}
.jm-buy div{display:flex;flex-direction:column}
.jm-buy small{color:var(--muted);font-size:.72rem}
.jm-buy b{font:800 1.1rem/1.3 var(--ff-display,inherit);color:var(--heading)}
.jm-buy b em{font-style:normal;font-size:.75rem;color:var(--muted)}
.jm-btn{background:var(--j-gold);color:#181a20;font-weight:800;font-size:.85rem;padding:8px 16px;border-radius:999px}
.jm-bar{height:7px;border-radius:999px;background:var(--j-card);overflow:hidden}
.jm-bar i{display:block;height:100%;width:38%;background:linear-gradient(90deg,var(--j-gold),#fcd535);border-radius:inherit}

.j-cta{margin-top:44px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
.j-trust{list-style:none;margin:8px 0 0;padding:0;flex-basis:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;color:var(--muted);font-size:.9rem}
.j-trust li{display:inline-flex;align-items:center;gap:6px}
.j-trust .ic{width:16px;height:16px;color:#16a34a}

/* entrance: steps rise one after another when the section scrolls in */
html.js .j-step.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease calc(var(--i) * .12s),transform .6s ease calc(var(--i) * .12s)}
html.js .j-step.reveal.in{opacity:1;transform:none}

@media (max-width:1100px){
  .j-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}
  .j-steps::before{display:none}
}
@media (max-width:640px){
  .j-head{margin-bottom:34px;text-align:start}
  .j-live{font-size:.85rem}
  .j-steps{grid-template-columns:1fr;gap:18px;padding-inline-start:30px}
  /* vertical timeline on the start side */
  .j-steps::before{display:block;top:20px;bottom:20px;inset-inline:13px auto;width:3px;height:auto;background:linear-gradient(180deg,var(--j-gold),rgba(240,185,11,.15))}
  .j-step{flex-direction:row;align-items:flex-start;gap:0;position:relative}
  .j-node{position:absolute;inset-inline-start:-30px;top:18px;width:30px;height:30px;border-width:2px;box-shadow:0 0 0 5px var(--bg)}
  .j-node span{width:22px;height:22px;font-size:.8rem}
  .j-card{margin-inline-start:12px;padding:18px}
  .j-card:hover{transform:none}
  .j-cta{justify-content:stretch}.j-cta .btn{flex:1;text-align:center;justify-content:center}
  .j-trust{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html.js .j-step.reveal{opacity:1;transform:none;transition:none}
  .j-live i,.jm-otp i.on::after{animation:none}
  .j-card{transition:none}
}