/* Evenson Power — scroll journey page */
:root {
  --bg: #0f1115;
  --ink: #f4f7fb;
  --muted: #a8b0ba;
  --line: rgba(255, 255, 255, .09);
  --accent: #489DFF;
  --on-accent: #02101f;
  --card: rgba(255, 255, 255, .03);
  --sans: 'Basis Grotesque PRO', system-ui, sans-serif;
  --mono: 'Basis Grotesque PRO Mono', monospace;
  --ease: cubic-bezier(.25, 1, .5, 1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; }
body { font-family: var(--sans); background: var(--bg); color: var(--ink); overflow-x: clip; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--on-accent); }

#stage { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
body.no-webgl #stage { display: none; }
.page { position: relative; z-index: 1; }

/* ---------------- header (live-site replica) ---------------- */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px clamp(18px, 4vw, 44px);
  background: rgba(5, 5, 5, .72);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.hdr__logo img { height: 32px; display: block; }
.hdr__logo span { font-weight: 700; font-size: 18px; }
.hdr__nav { display: flex; align-items: center; gap: 30px; font-size: 16px; }
.hdr__item { position: relative; }
.hdr__item > a { display: inline-flex; align-items: center; gap: 7px; color: #c9cdd3; padding: 18px 0; transition: color .2s; }
.hdr__item > a.on, .hdr__item:hover > a { color: #fff; }
.hdr__item > a svg { width: 11px; height: 11px; opacity: .65; transition: transform .25s; }
.hdr__item:hover > a svg { transform: rotate(180deg); }
.hdr__drop {
  position: absolute; top: 100%; left: -16px; min-width: 240px;
  background: #0c0d10; border: 1px solid rgba(255,255,255,.1); border-radius: 10px;
  padding: 8px 0; opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  box-shadow: 0 24px 50px -16px rgba(0,0,0,.8);
}
.hdr__item:hover .hdr__drop { opacity: 1; visibility: visible; transform: none; }
.hdr__drop a { display: block; padding: 10px 18px; font-size: 14.5px; color: #9aa1ab; }
.hdr__drop a:hover { color: #fff; background: rgba(72,157,255,.08); }
.hdr__actions { display: flex; gap: 14px; }
.hdr__store, .hdr__login {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 15px; text-transform: uppercase;
  padding: 12px 20px; transition: all .2s;
}
.hdr__store { color: var(--accent); border: 1px solid var(--accent); }
.hdr__store:hover { background: #222; border-color: #222; }
.hdr__login { color: #fff; background: #1c1c1e; }
.hdr__login:hover { background: #2a2a2d; }
.hdr__store svg, .hdr__login svg { width: 21px; height: 21px; }
@media (max-width: 1100px) { .hdr__nav { display: none; } }
@media (max-width: 640px) { .hdr__store { display: none; } }

/* ---------------- shared ---------------- */
.kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 16px; }
.h2 { font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -.03em; line-height: 1.08; }
.h2 em, .hero h1 em { font-style: normal; color: var(--accent); }
.btn {
  display: inline-flex; align-items: center; height: 44px; padding: 0 24px;
  border-radius: 999px; font-size: 14.5px; font-weight: 600;
  transition: transform .25s var(--ease), box-shadow .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn--accent { background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 30px -12px var(--accent); }
.btn--ghost { background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--ink); }
.btn--big { height: 54px; padding: 0 34px; font-size: 16px; }
.rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* ---------------- hero ---------------- */
.hero { min-height: 100svh; display: grid; align-items: center; justify-items: start; text-align: left; padding: 110px clamp(20px, 6vw, 90px) 70px; position: relative; }
.hero__persp { perspective: 950px; }
.hero__card { max-width: 560px; will-change: transform, opacity; }
.hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1.04; letter-spacing: -.035em; }
.hero__sub { margin: 24px 0 0; max-width: 480px; color: #b7bdc6; line-height: 1.65; font-size: clamp(1rem, 1.4vw, 1.15rem); }
.hero__ctas { margin-top: 36px; display: flex; gap: 12px; justify-content: flex-start; flex-wrap: wrap; }
.hero__scroll { position: absolute; bottom: 26px; left: clamp(20px, 6vw, 90px); transform: none; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.hero__scroll::after { content: ""; display: block; width: 1px; height: 42px; margin: 10px auto 0; background: linear-gradient(var(--accent), transparent); animation: drip 2s var(--ease) infinite; }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------------- journey track + pinned steps ---------------- */
.journey .act { height: 160vh; }
.steps {
  position: fixed; left: clamp(18px, 3vw, 44px); bottom: clamp(18px, 4vh, 42px);
  z-index: 6; max-width: 470px;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
}
.steps.vis { opacity: 1; visibility: visible; transform: none; }
.step { padding: 10px 0; }
.step__head { display: flex; align-items: center; gap: 12px; }
.step__num { font-family: var(--mono); font-size: 13px; color: var(--muted); border-radius: 8px; padding: 4px 8px; transition: all .35s var(--ease); }
.step__t { font-size: 1.08rem; font-weight: 500; color: var(--muted); transition: all .35s var(--ease); letter-spacing: -.01em; }
.step.on .step__num { background: var(--ink); color: var(--bg); }
.step.on .step__t { font-size: 1.85rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.step__wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.step__wrap > p { overflow: hidden; }
.step.on .step__wrap { grid-template-rows: 1fr; }
.step__body { margin: 10px 0 6px 16px; padding-left: 16px; border-left: 2px solid rgba(255,255,255,.14); font-size: 1.04rem; line-height: 1.7; color: #c3cad4; max-width: 420px; }

/* ---------------- equipment bubble labels (3D-anchored) ---------------- */
.bub {
  position: fixed; left: 0; top: 0; z-index: 5; pointer-events: none;
  display: flex; flex-direction: column; align-items: center;
  visibility: hidden; will-change: transform, opacity;
}
.bub__tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap;
  background: rgba(15, 17, 21, .78); border: 1px solid rgba(255, 255, 255, .16);
  padding: 6px 13px; border-radius: 999px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .7);
  pointer-events: auto; cursor: pointer;
  transition: border-color .2s;
}
.bub:hover .bub__tag { border-color: var(--accent); }
/* hover card: product image + blurb + link */
.bub__card {
  pointer-events: auto;
  position: absolute; bottom: calc(100% + 12px); left: 50%;
  width: 252px; padding: 10px 10px 12px;
  background: rgba(13, 15, 20, .94); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .85);
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.bub:hover .bub__card { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.bub__card::after { /* hover bridge so the cursor can travel from pill to card */
  content: ""; position: absolute; top: 100%; left: 20%; right: 20%; height: 14px;
}
.bub__card img { width: 100%; height: auto; aspect-ratio: 300 / 167; object-fit: cover; border-radius: 9px; display: block; }
.bub__card p {
  font-family: var(--sans); font-size: .84rem; line-height: 1.55; color: #c3cad4;
  letter-spacing: 0; text-transform: none; white-space: normal; margin: 9px 2px 8px;
}
.bub__card a {
  font-family: var(--sans); font-size: .82rem; font-weight: 600; color: var(--accent);
  letter-spacing: 0; text-transform: none; margin-left: 2px;
}
.bub__card a:hover { text-decoration: underline; }
.bub__stem { width: 1px; height: 24px; background: linear-gradient(rgba(72,157,255,0), var(--accent)); }
.bub__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px 2px rgba(72, 157, 255, .55); }

/* ---------------- content sections ---------------- */
section.features, section.faq, section.cta { padding: clamp(80px, 14vh, 150px) clamp(20px, 5vw, 64px); position: relative; }
.features__head { max-width: 1180px; margin: 0 auto 52px; }
.features__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; max-width: 1180px; margin: 0 auto; }
.card {
  display: block; padding: 28px 26px; border-radius: 20px;
  background: var(--card); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.card:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 18px 44px -22px var(--accent); }
.card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.card p { font-size: .92rem; line-height: 1.6; color: var(--muted); }
.card__more { display: inline-block; margin-top: 16px; font-size: .85rem; font-weight: 600; color: var(--accent); }
/* SEO content layer — text-forward sections under the journey */
section.seo { padding: clamp(60px, 10vh, 110px) clamp(20px, 5vw, 64px); position: relative; }
.seo__head { max-width: 1180px; margin: 0 auto 40px; }
.seo__lead { margin-top: 18px; color: var(--muted); line-height: 1.75; font-size: 1.02rem; max-width: 760px; }
.seo__lead a { color: var(--accent); border-bottom: 1px solid rgba(72, 157, 255, .35); }
.seo__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 6px 28px; max-width: 1180px; margin: 0 auto; }
.seo__grid--ind { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.seo__item { display: block; padding: 18px 14px; border-radius: 14px; border-top: 1px solid var(--line); transition: background .25s; }
.seo__item:hover { background: rgba(255, 255, 255, .035); }
.seo__item img {
  width: 100%; height: auto; aspect-ratio: 300 / 167; object-fit: cover;
  border-radius: 10px; margin-bottom: 14px; border: 1px solid var(--line);
  filter: saturate(.88) brightness(.94); transition: filter .3s, transform .3s;
}
.seo__item:hover img { filter: saturate(1) brightness(1.02); transform: scale(1.015); }
.seo__item h3 { font-size: 1.02rem; margin-bottom: 6px; }
.seo__item h3::after { content: " →"; color: var(--accent); font-weight: 400; opacity: 0; transition: opacity .2s; }
.seo__item:hover h3::after { opacity: 1; }
.seo__item p { font-size: .88rem; line-height: 1.6; color: var(--muted); }
.seo__links { display: flex; flex-wrap: wrap; gap: 10px; max-width: 1180px; margin: 26px auto 0; align-items: center; }
.seo__links a {
  font-family: var(--mono); font-size: .82rem; letter-spacing: .04em;
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); color: #c3cad4;
  transition: border-color .2s, color .2s;
}
.seo__links a:hover { border-color: var(--accent); color: #fff; }
.seo__tools { font-size: .85rem; color: var(--muted); margin-right: 6px; }

.faq__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; max-width: 1180px; margin: 0 auto; }
.faq details { border-top: 1px solid var(--line); padding: 4px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 4px; font-weight: 600; font-size: 1.05rem; display: flex; justify-content: space-between; }
.faq summary::after { content: "+"; color: var(--accent); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 28px 18px 4px; color: var(--muted); line-height: 1.7; }
.cta { min-height: 76vh; display: grid; place-items: center; text-align: center; }
.cta h2 { font-size: clamp(2.4rem, 6vw, 4.4rem); letter-spacing: -.035em; line-height: 1.05; }
.cta .btn { margin-top: 34px; }
@media (max-width: 880px) { .faq__grid { grid-template-columns: 1fr; gap: 26px; } }

/* ---------------- footer / loader ---------------- */
.ftr { position: relative; z-index: 1; border-top: 1px solid var(--line); background: rgba(5,5,5,.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 40px clamp(20px, 5vw, 64px) 32px; }
.ftr__links { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-bottom: 24px; font-size: .92rem; color: var(--muted); }
.ftr__links a:hover { color: var(--accent); }
.ftr__meta { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; font-size: .82rem; color: var(--muted); }
#loader { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: grid; place-items: center; transition: opacity .6s ease, visibility .6s; }
#loader.done { opacity: 0; visibility: hidden; }
.loader__in { text-align: center; }
.loader__mark {
  width: 92px; height: 92px; margin: 0 auto 22px;
  background: linear-gradient(125deg,
    #36404f 0%, #36404f 32%,
    var(--accent) 46%, #a8d2ff 50%, var(--accent) 54%,
    #36404f 68%, #36404f 100%);
  background-size: 320% 320%;
  -webkit-mask: url('logo-mark.png') center / contain no-repeat;
  mask: url('logo-mark.png') center / contain no-repeat;
  animation: marksweep 1.7s linear infinite;
  filter: drop-shadow(0 0 18px rgba(72, 157, 255, .35));
}
@keyframes marksweep { 0% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } }
.loader__word { font-family: var(--mono); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .hero__scroll::after { animation: none; }
}

/* ---------------- real WordPress header wrapper ---------------- */
.wp-real-header { position: relative; z-index: 30; }
.wp-real-footer { position: relative; z-index: 1; }
.wp-real-header .elementor-location-header { position: relative; z-index: 30; }
#wpadminbar { display: none !important; }