/*
 * The homepage — a port of `River Token Homepage v4.dc.html`.
 *
 * Eight sections in the source's order: hero, the marquee, the pinned
 * source-to-wallet sequence, the product, tokenomics, the liquidity sheet, the
 * horizontal roadmap, the app, and the FAQ sheet. The waitlist block and the
 * footer come from SiteFooter, which v4 imports.
 *
 * Values are the source's, stated inline there and collected by role here.
 * The two pinned sections keep their scroll behaviour — 380vh and 280vh of
 * track with a sticky viewport inside, exactly as v4 declares — because
 * flattening them into static grids is the one thing the brief forbids.
 */

/* ===================== 01 HERO ========================================= */

.rvh-hero{position:relative;min-height:calc(100svh - 72px);max-height:1100px;
  overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--canvas)}
.rvh-hero__canvas{position:absolute;inset:0;width:100%;height:100%}
.rvh-hero__grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 20%,transparent 75%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 20%,transparent 75%)}
.rvh-hero__vig{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 55% 45% at 50% 42%,rgba(6,7,10,.72),rgba(6,7,10,0) 70%),
             linear-gradient(180deg,rgba(6,7,10,0) 75%,#06070A 100%)}
.rvh-hero__in{position:relative;max-width:1100px;width:100%;
  padding:clamp(48px,8vh,96px) var(--gutter) clamp(104px,14vh,140px);
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(22px,3.2vh,34px);text-align:center}

.rvh-hero h1{font-size:clamp(42px,min(8.4vw,12vh),136px);line-height:1;
  font-weight:600;letter-spacing:-.055em}
.rvh-hero h1 span{display:block}
.rvh-hero__lead{max-width:560px;font-size:clamp(16px,1.3vw,19px);line-height:1.6;
  color:var(--ink-2);text-wrap:pretty}
.rvh-hero__lead strong{color:var(--ink-1);font-weight:500}
.rvh-hero__cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.rvh-btn{display:inline-flex;align-items:center;height:52px;padding:0 26px;
  border-radius:var(--pill);background:var(--cyan);color:var(--canvas);
  font-size:15px;font-weight:500}
.rvh-btn:hover{color:var(--canvas);filter:brightness(1.06)}
.rvh-btn--ghost,a.rvh-btn--ghost{padding:0 24px;border:1px solid rgba(255,255,255,.18);
  background:rgba(6,7,10,.45);color:var(--ink-1)}
.rvh-btn--ghost:hover,a.rvh-btn--ghost:hover{color:var(--ink-1);border-color:rgba(255,255,255,.4)}

.rvh-stats{display:flex;align-items:center;gap:clamp(14px,3vw,36px);flex-wrap:wrap;
  justify-content:center;margin-top:clamp(8px,3vh,32px);padding:14px 22px;
  border-radius:22px;border:1px solid var(--line-dark);background:rgba(11,13,18,.6);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--ink-3)}
.rvh-stats b{font-weight:400;color:var(--ink-1);font-variant-numeric:tabular-nums;letter-spacing:.08em}
.rvh-stats i{width:1px;height:14px;background:rgba(255,255,255,.14);display:block}
.rvh-stats em{font-style:normal;color:var(--ink-1)}
.rvh-stats .cy{color:var(--cyan)}
.rvh-scroll{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--ink-3)}
.rvh-scroll i{width:1px;height:36px;background:linear-gradient(var(--cyan),transparent)}

/* ===================== 02 CURENT (marquee) ============================= */

.rvh-cur{position:relative;padding:clamp(40px,5vw,72px) 0;border-bottom:1px solid var(--line-dark)}
.rvh-cur__track{overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.rvh-cur__row{display:flex;width:max-content;align-items:center;gap:clamp(28px,4vw,56px);
  font-size:clamp(28px,4vw,64px);font-weight:600;letter-spacing:-.04em;white-space:nowrap;
  animation:rvh-marquee 38s linear infinite}
.rvh-cur__row span{display:flex;align-items:center;gap:clamp(28px,4vw,56px)}
.rvh-cur__dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);opacity:.8;flex:0 0 auto}
.rvh-cur__o{color:transparent;-webkit-text-stroke:1.5px var(--cyan)}
@keyframes rvh-marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.rvh-cur__row{animation:none}}

/* ===================== 03 DE LA IZVOR LA WALLET (pinned) =============== */

.rvh-story{position:relative;height:380vh}
.rvh-story__grid{position:sticky;top:0;height:100svh;max-width:var(--max);margin:0 auto;
  padding:112px var(--gutter) 32px;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  grid-template-rows:minmax(0,1fr);gap:clamp(16px,4vw,80px);align-items:center}
.rvh-story__text{position:relative;z-index:1;display:flex;flex-direction:column;
  gap:clamp(16px,3vh,32px);height:100%;min-height:0;justify-content:center}
.rvh-story__eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cyan)}
.rvh-story__stack{display:grid;grid-template-columns:minmax(0,1fr)}
.rvh-step{grid-area:1/1;display:flex;flex-direction:column;gap:clamp(10px,2vh,22px);
  opacity:0;transition:opacity 600ms ease,transform 700ms var(--ease),filter 600ms ease;
  transform:translateY(24px);filter:blur(6px);pointer-events:none}
.rvh-step.is-on{opacity:1;transform:none;filter:none;pointer-events:auto}
.rvh-step__n{font-size:clamp(48px,min(9vw,12vh),140px);line-height:.85;font-weight:600;
  letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px rgba(69,213,255,.8)}
.rvh-step h2{font-size:clamp(28px,min(4.2vw,7vh),60px);line-height:1.02;font-weight:600;
  letter-spacing:-.04em;text-wrap:balance}
.rvh-step p{max-width:520px;font-size:clamp(14px,min(2.6vh,4vw),18px);line-height:1.5;color:var(--ink-2)}
.rvh-ticks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:520px}
.rvh-ticks div{height:3px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.rvh-ticks i{display:block;height:100%;width:100%;background:var(--cyan);
  transform-origin:left;transform:scaleX(0)}

.rvh-vessel{position:relative;height:100%;min-height:0;max-height:640px;border-radius:32px;
  overflow:hidden;background:radial-gradient(circle at 50% 42%,rgba(69,213,255,.12),transparent 62%),#0A0C11;
  border:1px solid var(--line-dark)}
.rvh-vessel__dots{position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(circle at 50% 45%,#000,transparent 70%);
          mask-image:radial-gradient(circle at 50% 45%,#000,transparent 70%)}
.rvh-shot{position:absolute;inset:0;opacity:0;transform:scale(1.04);
  transition:opacity 700ms ease,transform 1200ms var(--ease)}
.rvh-shot.is-on{opacity:1;transform:none}
.rvh-shot--c{display:flex;align-items:center;justify-content:center}
.rvh-shot img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.rvh-shot__fade{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,7,10,0) 60%,rgba(6,7,10,.85) 100%)}

.rvh-cap{position:relative;width:min(70%,340px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,#151A24,#07090D 70%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 14px rgba(255,255,255,.025),inset 0 0 0 15px rgba(255,255,255,.08),
             0 30px 80px -30px rgba(69,213,255,.35);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.rvh-cap__k{font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--ink-3)}
.rvh-cap__code{font-family:var(--mono);font-size:clamp(20px,2.2vw,30px);letter-spacing:.08em;
  color:var(--ink-1);white-space:nowrap}
.rvh-cap__n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--cyan)}

.rvh-app{width:min(78%,340px);display:flex;flex-direction:column;gap:10px;padding:20px;
  border-radius:28px;background:rgba(6,7,10,.85);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.rvh-app__bar{display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--ink-3)}
.rvh-app__bar b{font-weight:400;color:var(--cyan)}
.rvh-app__pts{padding:18px;border-radius:18px;background:#0E1117;
  display:flex;flex-direction:column;gap:6px}
.rvh-app__pts span{font-size:13px;color:var(--ink-3)}
.rvh-app__pts b{font-size:44px;font-weight:600;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;color:var(--ink-1)}
.rvh-app__toast{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;
  border:1px solid rgba(69,213,255,.4);background:rgba(69,213,255,.08);font-size:14px;
  transition:transform 500ms var(--ease),opacity 500ms ease;opacity:0;transform:translateY(8px)}
.rvh-app__toast.is-on{opacity:1;transform:none}
.rvh-app__toast::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--cyan)}
.rvh-app__prog{display:flex;flex-direction:column;font-size:13px;color:var(--ink-3)}
.rvh-app__prog>div:first-child{display:flex;justify-content:space-between;padding:8px 2px;
  border-bottom:1px solid rgba(255,255,255,.06)}
.rvh-app__prog>div:first-child b{font-weight:400;color:var(--ink-2)}
.rvh-app__bar2{height:4px;margin-top:10px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.rvh-app__bar2 i{display:block;height:100%;width:0;background:linear-gradient(90deg,#5277FF,#45D5FF)}

.rvh-orbit{position:relative;width:min(80%,360px);aspect-ratio:1;
  display:flex;align-items:center;justify-content:center}
.rvh-orbit svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rvh-orbit__core{position:relative;width:44%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#6FE3FF,#45D5FF 40%,#2A6FD6 100%);
  box-shadow:0 0 60px rgba(69,213,255,.45);display:flex;align-items:center;justify-content:center}
.rvh-orbit__core span{font-size:clamp(22px,2.4vw,32px);font-weight:700;letter-spacing:-.03em;color:var(--canvas)}
.ogs-comet{fill:none;stroke-dasharray:24 176;animation:rvh-comet 3.2s linear infinite}
@keyframes rvh-comet{to{stroke-dashoffset:-200}}

.rvh-vessel__foot{position:absolute;left:24px;right:24px;bottom:22px;
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--ink-2)}
.rvh-vessel__foot b{font-weight:400;color:var(--cyan)}

/* ===================== 04 PRODUSUL ==================================== */

.rvh-prod{position:relative;max-width:var(--max);margin:0 auto;
  padding:clamp(72px,10vw,140px) var(--gutter);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));
  gap:clamp(40px,6vw,96px);align-items:center}
.rvh-prod__img{position:relative;border-radius:36px;overflow:hidden;aspect-ratio:1;
  background:var(--deep);border:1px solid var(--line-dark)}
.rvh-prod__img img{width:100%;height:108%;object-fit:cover;margin-top:-4%}
.rvh-prod__b{display:flex;flex-direction:column;gap:28px}
.rvh-prod h2{font-size:clamp(40px,5vw,76px);line-height:.98;font-weight:600;
  letter-spacing:-.045em;text-wrap:balance}
.rvh-prod__p{max-width:520px;font-size:18px;line-height:1.6;color:var(--ink-2)}
.rvh-facts{display:flex;flex-direction:column;border-top:1px solid var(--line-dark)}
.rvh-facts div{display:flex;justify-content:space-between;gap:16px;padding:16px 0;
  border-bottom:1px solid var(--line-dark);font-size:15px}
.rvh-facts b{font-weight:400;color:var(--ink-3)}

/* ===================== 05 TOKENOMICS ================================== */

.rvh-tok{position:relative;border-top:1px solid var(--line-dark)}
.rvh-tok__grid{max-width:var(--max);margin:0 auto;padding:clamp(72px,10vw,140px) var(--gutter);
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(32px,6vw,96px);align-items:start}
.rvh-tok__side{position:sticky;top:120px;display:flex;flex-direction:column;gap:24px}
.rvh-tok__supply{font-size:clamp(48px,6.4vw,104px);line-height:.9;font-weight:600;letter-spacing:-.055em}
.rvh-tok__meta{font-family:var(--mono);font-size:13px;letter-spacing:.18em;color:var(--cyan)}
.rvh-tok__p{max-width:460px;font-size:17px;line-height:1.6;color:var(--ink-2)}
.rvh-arow{display:flex;flex-direction:column;gap:14px;padding:28px 0;border-top:1px solid var(--line-dark)}
.rvh-arow__h{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.rvh-arow__name{font-size:20px;font-weight:500;letter-spacing:-.01em}
.rvh-arow__p{font-size:clamp(32px,3.4vw,52px);font-weight:600;letter-spacing:-.045em;line-height:1}
.rvh-arow__track{height:2px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.rvh-arow__bar{height:100%;width:0;transition:width 1600ms var(--ease)}
html.no-js .rvh-arow__bar,html.rvf-static .rvh-arow__bar{width:var(--w)}
.rvh-arow__f{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px}
.rvh-arow__f b{font-family:var(--mono);font-weight:400;color:var(--ink-2)}
.rvh-arow__f span{color:var(--ink-3)}

/* ===================== 06 LICHIDITATE (light sheet) =================== */

.rvh-liq{position:relative;overflow:hidden}
.rvh-liq__in{position:relative;max-width:var(--max);margin:0 auto;
  padding:clamp(96px,12vw,180px) var(--gutter);
  display:flex;flex-direction:column;gap:clamp(48px,6vw,88px)}
.rvh-liq h2{font-size:clamp(40px,5.4vw,80px);line-height:.98;font-weight:600;
  letter-spacing:-.045em;color:var(--onlight-1);text-wrap:balance}
.rvh-liq__cards{position:relative;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(24px,6vw,120px)}
.rvh-liq__wave{position:absolute;left:0;right:0;top:50%;width:100%;height:120px;
  transform:translateY(-50%);pointer-events:none}
.rvh-liq__card{position:relative;display:flex;flex-direction:column;gap:16px;
  padding:clamp(28px,3vw,44px);border-radius:32px;background:#fff;
  border:1px solid var(--line-light);color:var(--onlight-1)}
.rvh-liq__card--I{border-color:rgba(14,127,163,.35)}
.rvh-liq__k{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--onlight-3)}
.rvh-liq__card--I .rvh-liq__k{color:var(--onlight-deep)}
.rvh-liq__v{font-size:clamp(48px,6vw,88px);font-weight:600;letter-spacing:-.05em;line-height:.95}
.rvh-liq__v small{font-size:.4em;color:var(--onlight-2);letter-spacing:-.02em}
.rvh-liq__card p{font-size:16px;line-height:1.6;color:var(--onlight-2)}

/* ===================== 07 ÎN AVAL (horizontal roadmap) ================ */

.rvh-road{position:relative;height:280vh}
.rvh-road__pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;
  flex-direction:column;justify-content:center;gap:clamp(20px,4vh,56px);padding:104px 0 32px}
.rvh-road__head{max-width:var(--max);width:100%;margin:0 auto;padding:0 var(--gutter);
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.rvh-road__head h2{font-size:clamp(40px,5.4vw,80px);line-height:.98;font-weight:600;letter-spacing:-.045em}
.rvh-road__head p{max-width:440px;font-size:17px;line-height:1.55;color:var(--ink-2)}
.rvh-road__rail{position:relative}
.rvh-road__line{position:absolute;left:0;top:50%;width:100%;height:80px;transform:translateY(-50%)}
.rvh-road__track{position:relative;display:flex;gap:clamp(16px,2vw,28px);padding:0 var(--gutter);
  width:max-content;will-change:transform}
.rvh-card{width:min(82vw,clamp(300px,34vw,480px));flex-shrink:0;display:flex;flex-direction:column;
  gap:18px;padding:clamp(28px,3vw,40px);border-radius:32px;background:var(--canvas-2);
  border:1px solid var(--line-dark);min-height:min(340px,42vh)}
.rvh-card__h{display:flex;justify-content:space-between;align-items:center;gap:12px}
.rvh-card__s{font-family:var(--mono);font-size:12px;letter-spacing:.16em}
.rvh-card__n{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.rvh-card h3{margin-top:auto;font-size:clamp(28px,2.6vw,40px);line-height:1.02;
  font-weight:600;letter-spacing:-.035em}
.rvh-card p{font-size:15px;line-height:1.6;color:var(--ink-2)}

/* ===================== 08 APLICAȚIA =================================== */

.rvh-appsec{position:relative;max-width:var(--max);margin:0 auto;
  padding:clamp(72px,10vw,140px) var(--gutter);
  display:flex;flex-direction:column;gap:clamp(48px,6vw,80px)}
.rvh-appsec__head{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap:24px 64px;align-items:end}
.rvh-appsec h2{font-size:clamp(40px,5.4vw,80px);line-height:.98;font-weight:600;
  letter-spacing:-.045em;text-wrap:balance}
.rvh-appsec__badges{display:flex;gap:10px;flex-wrap:wrap}
.rvh-appsec__badges img{height:48px;width:auto}
.rvh-shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:16px;align-items:start}
.rvh-shotcard{display:flex;flex-direction:column;gap:20px;padding:16px 16px 28px;
  border-radius:32px;background:var(--canvas-2);border:1px solid var(--line-dark)}
.rvh-shotcard--mid{margin-top:64px}
.rvh-shotcard__img{border-radius:22px;overflow:hidden;background:#0E1117;display:flex;justify-content:center}
.rvh-shotcard__img img{width:100%;height:auto}
.rvh-shotcard__b{display:flex;flex-direction:column;gap:8px;padding:0 12px}
.rvh-shotcard__k{font-family:var(--mono);font-size:12px;letter-spacing:.22em;color:var(--cyan)}
.rvh-shotcard__t{font-size:22px;font-weight:600;letter-spacing:-.02em}
.rvh-shotcard__d{font-size:15px;line-height:1.55;color:var(--ink-2)}

/* ===================== 09 FAQ + rail ================================== */

.rvh-faq-more{max-width:880px;margin:0 auto;padding:0 clamp(24px,3vw,32px) clamp(72px,8vw,120px)}

.rvh-rail{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:40;
  display:none;flex-direction:column;gap:4px;padding:8px;border-radius:var(--pill);
  background:rgba(11,13,18,.6);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--line-dark);transition:opacity .4s ease}
.rvh-rail button{width:22px;height:22px;border-radius:50%;border:0;background:none;padding:0;
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.rvh-rail button::after{content:'';width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.3);transition:all .3s ease}
.rvh-rail button.is-on::after{background:var(--cyan);width:9px;height:9px;
  box-shadow:0 0 10px var(--cyan)}
@media (min-width:1200px){.rvh-rail{display:flex}}

/* ===================== narrow widths ================================== */

@media (max-width:900px){
  .rvh-story{height:auto}
  .rvh-story__grid{position:static;height:auto;grid-template-columns:minmax(0,1fr);
    padding:clamp(72px,10vw,140px) var(--gutter);gap:40px}
  /* Pinning needs a viewport tall enough to hold a heading, a paragraph and a
     640px vessel side by side. Below 900px the source's own grid collapses to
     one column, so the sequence is shown as four stacked steps instead — each
     fully visible, none of them animated into a state a phone cannot leave. */
  .rvh-story__stack{display:flex;flex-direction:column;gap:48px}
  .rvh-step{opacity:1;transform:none;filter:none;pointer-events:auto}
  .rvh-ticks{display:none}
  .rvh-vessel{height:min(70vh,520px);max-height:none}
  .rvh-shot{opacity:1;transform:none;position:relative;inset:auto}
  .rvh-shot:not(:first-child){display:none}
  .rvh-tok__grid{grid-template-columns:minmax(0,1fr)}
  .rvh-tok__side{position:static}
  .rvh-road{height:auto}
  .rvh-road__pin{position:static;height:auto;padding:clamp(72px,10vw,140px) 0}
  .rvh-road__track{width:auto;flex-direction:column;transform:none!important}
  .rvh-card{width:auto;min-height:0}
  .rvh-road__line{display:none}
  .rvh-shotcard--mid{margin-top:0}
}