/* ==========================================================================
   WildMiner Hash — landing (Figma node 33:4310, 1440x4615)
   ========================================================================== */

@font-face {
  font-family: 'Cornerita';
  src: url('assets/fonts/Cornerita-VF.woff2') format('woff2-variations'),
       url('assets/fonts/Cornerita-VF.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face { font-family: 'Cornerita Static'; src: url('assets/fonts/Cornerita-370.woff2') format('woff2'); font-weight: 370; font-display: swap; }
@font-face { font-family: 'Cornerita Static'; src: url('assets/fonts/Cornerita-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Cornerita Static'; src: url('assets/fonts/Cornerita-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Cornerita Static'; src: url('assets/fonts/Cornerita-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --bg: #040E13;
  --accent: #18FEFE;
  --accent2: #4ECFEA;
  --white: #FFFFFF;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  background: var(--bg);
  color: var(--white);
  font-family: 'Cornerita', 'Cornerita Static', sans-serif;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
h1, h2, h3, p { margin: 0; }
img { max-width: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.stage {
  position: relative;
  width: 1440px;
  height: 4615px;
  margin: 0 auto;
  background: var(--bg);
  overflow: hidden;
}

/* generic absolutely-positioned text node */
.tx {
  position: absolute;
  margin: 0;
  white-space: pre-line;
}

/* generic absolutely-positioned graphic asset */
.gfx {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* invisible clickable hit-areas placed over baked-in raster buttons/links */
.hit {
  position: absolute;
  display: block;
}

/* ---- header / footer nav bars (background image bakes logo+nav+EN/RU) --- */
.navbar { position: absolute; left: 118px; width: 1202px; height: 20px; }
.navbar.top { top: 8px; }
.navbar.bottom { top: 4539px; }

/* ---- divider under hero ------------------------------------------------- */
.divider {
  position: absolute; left: 120px; width: 1200px; height: 0;
  border-top: 1px solid rgba(255,255,255,.3);
}

/* ---- 3 highlight icon circles -------------------------------------------- */
.hl-icon {
  position: absolute;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2E9AA8, #1B5F6C 70%);
  display: flex; align-items: center; justify-content: center;
}
.hl-icon svg { width: 28px; height: 28px; }

/* ---- 4-feature number badges --------------------------------------------- */
.feat-badge {
  position: absolute; width: 75px; height: 75px; border-radius: 6px;
  background: linear-gradient(180deg, rgba(24,254,254,.12), rgba(24,254,254,.02));
  border: 1px solid rgba(24,254,254,.25);
}
.feat-panel {
  position: absolute; left: 119px; top: 1570px; width: 1201px; height: 301px;
  background: rgba(217,217,217,.03);
  border-top: 1px solid rgba(255,255,255,.16);
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.feat-rule {
  position: absolute; top: 1570px; width: 1px; height: 290px;
  background: rgba(255,255,255,.16);
}

/* ---- roadmap Q-badges ---------------------------------------------------- */
.rm-line {
  position: absolute; left: 120px; top: 3018px; width: 1200px; height: 0;
  border-top: 1px solid rgba(255,255,255,.16);
}
.rm-badge {
  position: absolute; top: 3001px; width: 56px; height: 32px;
  border: 1px solid rgba(78,207,234,.4);
  background: rgba(4,14,19,.9);
  display: flex; align-items: center; justify-content: center;
}
.rm-badge .tx { position: static; color: var(--accent2); }

/* ---- social icon row (about section) ------------------------------------ */
.soc-row { position: absolute; left: 118px; top: 1308px; width: 341px; height: 66px; }
.soc-icon {
  position: absolute; top: 0; width: 56px; height: 66px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  display: flex; align-items: center; justify-content: center;
}
.soc-icon svg { width: 22px; height: 22px; fill: #E8F7F9; }

/* ---- headline two-tone ---------------------------------------------------- */
.headline {
  position: absolute; left: 182px; top: 134px; width: 346px;
  font-family: 'Cornerita','Cornerita Static',sans-serif; font-weight: 600;
  font-size: 62.73px; line-height: 57.1px; color: var(--white);
}
.headline .accent { color: var(--accent2); }

.ach-heading {
  position: absolute; left: 121px; top: 2181px; width: 308px;
  font-family: 'Cornerita','Cornerita Static',sans-serif; font-weight: 600;
  font-size: 44px; line-height: 46.2px;
}
.ach-heading .accent { color: var(--accent2); display:block; }
.ach-heading .white { color: var(--white); display:block; }

/* ---- FAQ accordion -------------------------------------------------------- */
.faq-item {
  position: absolute; left: 416px; width: 523px;
  border-bottom: 1px solid rgba(255,255,255,.16);
  padding-bottom: 20px;
}
.faq-q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  cursor: pointer; background: none; border: 0; width: 100%; text-align: left; color: var(--white);
  font-family: 'Cornerita','Cornerita Static',sans-serif; font-weight: 370; font-size: 18px; line-height: 18.9px;
}
.faq-chev { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; transition: transform .2s; }
.faq-item.open .faq-chev { transform: rotate(180deg); }
.faq-a {
  overflow: hidden; max-height: 0; transition: max-height .25s ease;
  font-family: 'IBM Plex Mono', monospace; font-weight: 400; font-size: 14px; line-height: 16.8px;
  color: var(--white); opacity: .5;
}
.faq-item.open .faq-a { max-height: 200px; margin-top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   RESPONSIVE (tablet / mobile) — reflowed layout, shown < 1280px
   The desktop .stage above is a pixel-exact fixed 1440px canvas and does
   not reflow, so a separate flow-based layout takes over below that width.
   ========================================================================== */

.mq { display: none; }

@media (max-width: 1279px) {
  .stage { display: none; }
  .mq { display: block; }
}

.mq {
  background: var(--bg);
  color: var(--white);
  overflow-x: hidden;
}
.mq * { box-sizing: border-box; }
.mq img { max-width: 100%; height: auto; display: block; }
.mq section { padding: 56px 20px; position: relative; }
.mq h1, .mq h2, .mq h3, .mq p { margin: 0; }
.mq .eyebrow { color: var(--accent2); }
.mq .muted { opacity: .55; }
.mq .mono { font-family: 'IBM Plex Mono', monospace; }

.mq .wrap { max-width: 640px; margin: 0 auto; }

.mq .btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 26px; border-radius: 4px;
  background: linear-gradient(100deg, #29A9E0 0%, #1FE0A8 100%);
  color: #0A1A1F; font-family: 'Cornerita','Cornerita Static',sans-serif;
  font-weight: 600; font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
}
.mq .btn svg { width: 14px; height: 14px; }

/* ---- header --------------------------------------------------------- */
.mq-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; background: #071219;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mq-logo { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 18px; }
.mq-logo img { width: 42px; height: auto; }
.mq-header-right { display: flex; align-items: center; gap: 16px; }
.mq-burger { width: 32px; height: 32px; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.mq-burger span { display: block; width: 100%; height: 2px; background: var(--white); transition: transform .2s, opacity .2s; }
.mq-langs { display: flex; align-items: center; gap: 12px; }
.mq-langs .lang { font-weight: 700; font-size: 12px; display: flex; gap: 4px; }
.mq-langs .lang .on { color: var(--accent); }
.mq-langs .lang .off { opacity: .5; }

.mq-nav {
  position: fixed; inset: 0 0 auto 0; top: 65px; z-index: 19;
  background: #061419; border-bottom: 1px solid rgba(255,255,255,.1);
  padding: 12px 20px 24px;
  transform: translateY(-8px); opacity: 0; pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
}
.mq-nav.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.mq-nav a {
  display: block; padding: 14px 4px; font-family: 'IBM Plex Mono', monospace; font-size: 15px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* ---- hero ------------------------------------------------------------- */
.mq-hero { padding-top: 40px; }
.mq-hero h1 {
  font-family: 'Cornerita','Cornerita Static',sans-serif; font-weight: 600;
  font-size: 40px; line-height: 1.08; margin-bottom: 16px;
}
.mq-hero h1 .accent { color: var(--accent2); }
.mq-hero p.lead { font-family: 'IBM Plex Mono', monospace; font-size: 15px; line-height: 1.5; opacity: .55; margin-bottom: 24px; }
.mq-hero .hero-art { margin-top: 40px; border-radius: 8px; overflow: hidden; }

/* ---- highlights --------------------------------------------------------*/
.mq-highlights { display: grid; grid-template-columns: 1fr; gap: 32px; }
.mq-hl-icon {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #2E9AA8, #1B5F6C 70%);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.mq-hl-icon svg { width: 24px; height: 24px; }
.mq-highlights h3 { font-family: 'Cornerita','Cornerita Static',sans-serif; font-weight: 370; font-size: 17px; margin-bottom: 6px; }
.mq-highlights p { font-family: 'IBM Plex Mono', monospace; font-size: 13px; line-height: 1.5; opacity: .5; }

/* ---- about -------------------------------------------------------------*/
.mq-about h2, .mq-section h2 {
  font-family: 'Cornerita','Cornerita Static',sans-serif; font-weight: 600;
  font-size: 32px; line-height: 1.12; margin-bottom: 14px;
}
.mq-about p.body, .mq-section p.body {
  font-family: 'IBM Plex Mono', monospace; font-size: 14px; line-height: 1.55; opacity: .6; margin-bottom: 20px;
}
.mq-soc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.mq-soc a {
  width: 48px; height: 48px; border-radius: 4px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03);
  display: flex; align-items: center; justify-content: center;
}
.mq-soc svg { width: 20px; height: 20px; fill: #E8F7F9; }
.mq-about .about-art { margin-top: 32px; border-radius: 8px; overflow: hidden; }

/* ---- 4 features ----------------------------------------------------------*/
.mq-features { display: grid; grid-template-columns: 1fr; gap: 20px; }
.mq-feat-card {
  border: 1px solid rgba(24,254,254,.18);
  background: linear-gradient(180deg, rgba(24,254,254,.06), rgba(24,254,254,.01));
  border-radius: 8px; padding: 20px;
}
.mq-feat-card .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 6px; margin-bottom: 14px;
  font-family: 'Cornerita','Cornerita Static',sans-serif; font-weight: 600; font-size: 18px;
  color: var(--accent2); background: rgba(24,254,254,.1); border: 1px solid rgba(24,254,254,.3);
}
.mq-feat-card h3 { font-family: 'Cornerita','Cornerita Static',sans-serif; font-weight: 370; font-size: 17px; margin-bottom: 8px; }
.mq-feat-card p { font-family: 'IBM Plex Mono', monospace; font-size: 13px; line-height: 1.5; opacity: .5; }

/* ---- telegram banner -----------------------------------------------------*/
.mq-tg {
  border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
  background: radial-gradient(120% 140% at 100% 0%, rgba(24,254,254,.12), transparent 60%), #071b21;
  padding: 28px 20px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start;
}
.mq-tg-icon { width: 52px; height: 52px; border-radius: 8px; background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; }
.mq-tg-icon svg { width: 24px; height: 24px; fill: #fff; }
.mq-tg h3 { font-family: 'Cornerita','Cornerita Static',sans-serif; font-weight: 600; font-size: 22px; margin: 12px 0 6px; }
.mq-tg p { font-family: 'IBM Plex Mono', monospace; font-size: 14px; opacity: .55; margin-bottom: 4px; }

/* ---- achievements ----------------------------------------------------------*/
.mq-ach-list { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
.mq-ach-card {
  border: 1px solid rgba(78,207,234,.2); border-radius: 8px; padding: 20px;
  background: linear-gradient(160deg, rgba(78,207,234,.09), rgba(78,207,234,.01));
}
.mq-ach-card .num { color: var(--accent2); font-family: 'Cornerita','Cornerita Static',sans-serif; font-weight: 600; font-size: 20px; display: block; margin-bottom: 10px; }
.mq-ach-card h3 { font-family: 'Cornerita','Cornerita Static',sans-serif; font-weight: 370; font-size: 18px; margin-bottom: 8px; }
.mq-ach-card p { font-family: 'Cornerita','Cornerita Static',sans-serif; font-weight: 370; font-size: 14px; line-height: 1.5; opacity: .55; }
.mq-portfolio-link { display: inline-block; margin-top: 20px; font-size: 14px; opacity: .45; font-family: 'Cornerita','Cornerita Static',sans-serif; }

/* ---- roadmap ---------------------------------------------------------------*/
.mq-roadmap-list { position: relative; margin-top: 32px; padding-left: 28px; }
.mq-roadmap-list::before {
  content: ''; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 1px;
  background: rgba(255,255,255,.16);
}
.mq-rm-item { position: relative; padding-bottom: 32px; }
.mq-rm-item:last-child { padding-bottom: 0; }
.mq-rm-badge {
  position: absolute; left: -28px; top: 0; width: 20px; height: 20px; border-radius: 4px;
  border: 1px solid rgba(78,207,234,.5); background: #040E13;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cornerita','Cornerita Static',sans-serif; font-weight: 600; font-size: 10px; color: var(--accent2);
}
.mq-rm-item h3 { font-family: 'Cornerita','Cornerita Static',sans-serif; font-weight: 370; font-size: 17px; margin-bottom: 8px; }
.mq-rm-item p { font-family: 'Cornerita','Cornerita Static',sans-serif; font-weight: 370; font-size: 13px; line-height: 1.55; opacity: .5; }

/* ---- FAQ ---------------------------------------------------------------------*/
.mq-faq-item { border-bottom: 1px solid rgba(255,255,255,.14); padding: 20px 0; }
.mq-faq-q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; width: 100%;
  font-family: 'Cornerita','Cornerita Static',sans-serif; font-weight: 370; font-size: 16px; text-align: left;
}
.mq-faq-chev { flex: none; width: 18px; height: 18px; transition: transform .2s; }
.mq-faq-item.open .mq-faq-chev { transform: rotate(180deg); }
.mq-faq-a {
  overflow: hidden; max-height: 0; transition: max-height .25s ease;
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; line-height: 1.5; opacity: .5;
}
.mq-faq-item.open .mq-faq-a { max-height: 260px; margin-top: 12px; }

/* ---- final CTA -----------------------------------------------------------------*/
.mq-cta {
  border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(24,254,254,.12), transparent 60%), #071b21;
  padding: 32px 20px; text-align: center;
}
.mq-cta h2 { font-size: 30px; margin-bottom: 12px; }
.mq-cta h2 .accent { color: var(--accent2); }
.mq-cta p { font-family: 'IBM Plex Mono', monospace; font-size: 14px; opacity: .55; margin-bottom: 22px; }
.mq-cta .mq-soc { justify-content: center; margin-top: 22px; }
.mq-cta .qr { width: 140px; margin: 24px auto 0; border-radius: 8px; overflow: hidden; }

/* ---- footer --------------------------------------------------------------------*/
.mq-footer { padding: 32px 20px 40px; text-align: center; border-top: 1px solid rgba(255,255,255,.08); }
.mq-footer .mq-logo { justify-content: center; margin-bottom: 18px; }
.mq-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; opacity: .7; margin-bottom: 14px; }

/* ---- tablet refinements (>=700px) ----------------------------------------------*/
@media (min-width: 700px) {
  .mq .wrap { max-width: 680px; }
  .mq section { padding: 72px 40px; }
  .mq-hero h1 { font-size: 52px; }
  .mq-highlights { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .mq-features { grid-template-columns: repeat(2, 1fr); }
  .mq-ach-list { grid-template-columns: repeat(2, 1fr); }
  .mq-ach-list .mq-ach-card:first-child { grid-column: 1 / -1; }
  .mq-tg { flex-direction: row; align-items: center; justify-content: space-between; }
  .mq-tg .mq-tg-copy { flex: 1; }
  .mq-cta { padding: 48px; }
  .mq-roadmap-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 40px; padding-left: 0; }
  .mq-roadmap-list::before { display: none; }
  .mq-rm-item { padding-left: 28px; padding-bottom: 0; }
  .mq-rm-badge { left: 0; }
}

@media (min-width: 1024px) {
  .mq .wrap { max-width: 900px; }
  .mq-header { padding: 20px 48px; }
  .mq-nav { display: flex; align-items: center; gap: 28px; position: static; padding: 0; background: none;
    border: 0; transform: none; opacity: 1; pointer-events: auto; }
  .mq-nav a { display: inline; padding: 0; border: 0; font-size: 14px; }
  .mq-burger { display: none; }
  .mq-header-right { gap: 24px; }
  .mq-logo img { width: 32px; }
}

/* ==========================================================================
   MOTION — scroll reveals, hover micro-interactions, parallax
   Everything here is transform/opacity only (GPU-friendly) and is fully
   disabled for prefers-reduced-motion. Parallax is additionally skipped on
   touch/small screens via JS (see index.html) to keep scrolling smooth.
   ========================================================================== */

/* ---- scroll reveal -------------------------------------------------------*/
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
  transition-delay: var(--rd, 0ms);
  will-change: opacity, transform;
}
.reveal.reveal-scale { transform: translateY(18px) scale(.96); }
.reveal.reveal-left  { transform: translateX(-32px); }
.reveal.reveal-right { transform: translateX(32px); }
.reveal.in-view {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.reveal-scale, .reveal.reveal-left, .reveal.reveal-right {
    opacity: 1; transform: none; transition: none;
  }
}

/* ---- hover micro-interactions ---------------------------------------------*/
a, button, .hit, .soc-icon, .hl-icon, .mq-soc a, .mq-hl-icon,
.mq-feat-card, .mq-ach-card, .mq-rm-badge, .feat-badge, .rm-badge,
.faq-q, .mq-faq-q, .btn {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease,
              background .25s ease, color .25s ease, filter .25s ease, opacity .25s ease;
}

/* invisible hit-areas over baked buttons/links get a soft highlight */
.hit { border-radius: 4px; }
.hit:hover { background: rgba(255,255,255,.07); }
.hit:active { background: rgba(255,255,255,.12); }

/* hero CTA image reacts through its hit-area sibling */
.hit:hover + img.gfx { transform: scale(1.035); filter: brightness(1.08); }
.hit:active + img.gfx { transform: scale(1.01); filter: brightness(1.03); }

/* live gradient buttons (.mq) */
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(24,254,254,.25); filter: brightness(1.05); }
.btn:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(24,254,254,.18); }

/* highlight / feature icon circles */
.hl-icon:hover, .mq-hl-icon:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 6px rgba(24,254,254,.08);
}

/* social icons */
.soc-icon:hover, .mq-soc a:hover {
  transform: translateY(-3px);
  border-color: rgba(24,254,254,.5);
  background: rgba(24,254,254,.06);
}
.soc-icon:hover svg, .mq-soc a:hover svg { fill: var(--accent2); }

/* feature number badges (desktop absolute canvas + .mq cards) */
.feat-badge:hover { border-color: rgba(24,254,254,.55); box-shadow: 0 0 24px rgba(24,254,254,.12); transform: translateY(-2px); }
.mq-feat-card:hover, .mq-ach-card:hover {
  transform: translateY(-4px);
  border-color: rgba(78,207,234,.45);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}

/* roadmap badges */
.rm-badge:hover, .mq-rm-badge:hover {
  border-color: var(--accent2);
  box-shadow: 0 0 16px rgba(78,207,234,.3);
  transform: scale(1.08);
}

/* FAQ question rows */
.faq-q:hover span, .mq-faq-q:hover span { color: var(--accent2); }
.faq-chev, .mq-faq-chev { transition: transform .25s ease; }

/* nav + footer links */
.mq-nav a, .mq-footer-links a { position: relative; }
.mq-nav a:hover, .mq-footer-links a:hover { color: var(--accent2); }

@media (prefers-reduced-motion: reduce) {
  a, button, .hit, .soc-icon, .hl-icon, .mq-soc a, .mq-hl-icon,
  .mq-feat-card, .mq-ach-card, .mq-rm-badge, .feat-badge, .rm-badge,
  .faq-q, .mq-faq-q, .btn, .hit + img.gfx {
    transition: none !important;
  }
}

/* ---- parallax targets ------------------------------------------------------*/
[data-parallax] { will-change: transform; }