.hx{--hx-bg:#120b18;--hx-text:#f6f1fb;--hx-muted:#a99fb5;--hx-line:rgb(255 255 255 / 12%);--hx-accent:#bb92f6;--hx-trace:#c9a8ff;--hx-ease:cubic-bezier(.2,.75,0,1);--gx:74%;--gy:44%;position:relative;overflow:hidden;isolation:isolate;background:var(--hx-bg);color:var(--hx-text);padding-block:clamp(36px,4vw,64px) clamp(48px,5vw,72px)}
.hx a:focus-visible,.hx button:focus-visible{outline-color:var(--hx-trace)}
.hx-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hx-bg>i{position:absolute;inset:0}
.hx-glow{background:radial-gradient(40% 56% at var(--gx) var(--gy),rgb(116 54 201 / 58%),rgb(116 54 201 / 12%) 55%,transparent 75%),radial-gradient(34% 44% at 6% 104%,rgb(116 54 201 / 24%),transparent 72%),linear-gradient(180deg,#170f1f,var(--hx-bg) 55%,#0e0813);animation:hx-fade 1.8s var(--hx-ease) both}
.hx-grid{background-image:linear-gradient(rgb(255 255 255 / 5.5%) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / 5.5%) 1px,transparent 1px);background-size:72px 72px;background-position:-1px -1px;-webkit-mask-image:radial-gradient(64% 78% at 72% 42%,#000 18%,transparent 78%);mask-image:radial-gradient(64% 78% at 72% 42%,#000 18%,transparent 78%)}
.hx-grain{opacity:.06;background:url('/assets/img/grain.webp') 0 0 / 160px 160px}


.hx-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(32px,5vw,96px);align-items:center}
.hx-kicker{color:var(--hx-muted);margin-bottom:30px;animation:hx-fade 1s .2s both}
.hx h1{font-size:clamp(56px,6.5vw,114px);font-weight:500;letter-spacing:-.068em;line-height:.98;max-width:none}
.hx-line{display:block;overflow:hidden;padding:0 .06em .1em 0;margin-bottom:-.1em}
.hx-line>span{display:block;animation:hx-rise 1.15s .15s var(--hx-ease) both}
.hx-line+.hx-line>span{animation-delay:.27s}
.hx h1 em{font-style:normal;background:linear-gradient(100deg,#e4d2ff 0%,#b184f4 42%,#8a4fe4 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hx-intro{color:var(--hx-muted);font-size:16px;line-height:1.75;max-width:44ch;margin-block:34px 38px;animation:hx-up 1s .45s var(--hx-ease) both}
.hx-actions{display:flex;align-items:center;gap:34px;animation:hx-up 1s .55s var(--hx-ease) both}
.hx .button.primary{box-shadow:inset 0 0 0 1px rgb(255 255 255 / 10%),0 22px 60px -18px rgb(140 80 230 / 90%);transition:background .2s,box-shadow .3s,transform .3s var(--hx-ease)}
.hx .button.primary:hover{background:#8247dc;box-shadow:inset 0 0 0 1px rgb(255 255 255 / 16%),0 26px 70px -16px rgb(150 90 240 / 100%);transform:translateY(-1px)}
.hx .button.primary:active{transform:translateY(0) scale(.99)}
.hx .text-link:hover{color:var(--hx-accent)}
.hx-facts{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:clamp(44px,5vw,72px) 0 0;padding:22px 0 0;border-top:1px solid var(--hx-line);animation:hx-up 1s .65s var(--hx-ease) both}
.hx-facts li,.hx-facts a{display:flex;flex-direction:column;gap:8px}
.hx-facts b{font-size:40px;font-weight:400;letter-spacing:-.065em;line-height:1;font-variant-numeric:tabular-nums}
.hx-facts .eyebrow{color:var(--hx-muted);line-height:1.5}
.hx-facts a:hover .eyebrow,.hx-facts a:hover b{color:var(--hx-accent)}

.hx-timer{position:absolute;width:0;height:0;animation:hx-timer 6.5s linear forwards}
.hx.is-paused .hx-timer{animation-play-state:paused}
.hx-instrument{position:relative;min-width:0;container-type:inline-size}
.hx-stage{--rx:0;--ry:0;position:relative;aspect-ratio:1.3}
.hx-reticle{position:absolute;inset:0;margin:auto;height:100%;width:auto;max-width:none;aspect-ratio:1;overflow:visible;fill:none;stroke-width:1;translate:calc(var(--rx) * -10px) calc(var(--ry) * -8px);animation:hx-reticle-in 1.6s .2s var(--hx-ease) both}
.hx-ring{stroke:rgb(255 255 255 / 13%)}
.hx-ring-dash{stroke:rgb(255 255 255 / 22%);stroke-dasharray:2 7}
.hx-ticks{stroke:rgb(255 255 255 / 30%);transform-origin:300px 300px;animation:hx-spin 160s linear infinite}
.hx-arcs{transform-origin:300px 300px;animation:hx-spin 10s linear infinite}
.hx-arc{stroke:var(--hx-accent);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:12 88}
.hx-arc-glow{stroke-width:7;opacity:.16}
.hx-cross{stroke:rgb(255 255 255 / 16%)}
.hx-plus{stroke:var(--hx-accent);stroke-width:1.3}
.hx-float{position:absolute;inset:0;display:grid;place-items:center;translate:calc(var(--rx) * 18px) calc(var(--ry) * 12px);rotate:calc(var(--rx) * 1.8deg)}
.hx-vials{position:relative;width:58cqw;aspect-ratio:1;animation:hx-bob 7s ease-in-out infinite}
.hx-vials::before{content:'';position:absolute;left:24%;right:24%;bottom:1%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgb(196 156 255 / 55%),transparent);filter:blur(8px)}
.hx-vial{position:absolute;inset:0;margin:0;opacity:0;transform:translateY(28px) scale(1.04);filter:blur(10px);transition:opacity .8s var(--hx-ease),transform 1.15s var(--hx-ease),filter .8s var(--hx-ease)}
.hx-vial.is-active{opacity:1;transform:none;filter:none;animation:hx-vial-in 1.3s .35s var(--hx-ease) both}
.hx-vial.is-leaving{opacity:0;transform:translateY(-24px) scale(.96);filter:blur(8px)}
.hx-vial img{width:100%;height:100%;-webkit-box-reflect:below -2.2cqw linear-gradient(transparent 80%,rgb(255 255 255 / 20%))}
.hx-vial::after{content:'';position:absolute;inset:0;-webkit-mask:var(--src) center / contain no-repeat;mask:var(--src) center / contain no-repeat;background:linear-gradient(100deg,transparent 38%,rgb(255 255 255 / 42%) 49%,transparent 60%) no-repeat;background-size:260% 100%;background-position:150% 0;animation:hx-sheen 7s 2s ease-in-out infinite}
.hx-scan{position:absolute;inset:14% 30% 0;pointer-events:none;opacity:0;animation:hx-scan 6.5s 2.2s cubic-bezier(.45,0,.25,1) infinite}
.hx-scan::before{content:'';position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,var(--hx-trace),transparent);box-shadow:0 0 16px 1px rgb(187 146 246 / 70%)}

.hx-tags{position:absolute;inset:0;margin:0;pointer-events:none}
.hx-tag{--d:1s;position:absolute;left:0;display:flex;flex-direction:column;gap:5px;max-width:31cqw;padding-top:14px;animation:hx-up .9s var(--d) var(--hx-ease) both}
.hx-tag dt{font:500 11px/1.5 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--hx-muted)}
.hx-tag dd{margin:0;font:13px/1.5 var(--font-mono);letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.hx-tag>i{position:absolute;top:0;left:0;width:var(--len,35cqw);height:1px;background:linear-gradient(90deg,rgb(255 255 255 / 45%),var(--hx-accent));transform-origin:left;animation:hx-line .9s calc(var(--d) + .1s) var(--hx-ease) both}
.hx-tag>i::after{content:'';position:absolute;right:-3px;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--hx-text);box-shadow:0 0 0 3px rgb(187 146 246 / 25%),0 0 14px 2px var(--hx-accent)}
.hx-right{left:auto;right:0;text-align:right;align-items:flex-end}
.hx-right>i{left:auto;right:0;background:linear-gradient(270deg,rgb(255 255 255 / 45%),var(--hx-accent));transform-origin:right}
.hx-right>i::after{right:auto;left:-3px}
.hx-tag-lot{top:14cqw;--d:.95s;--len:36cqw}
.hx-tag-id{top:24cqw;--d:1.05s;--len:39cqw}
.hx-tag-endo{top:50cqw;--d:1.15s;--len:36cqw}
.hx-tag-purity{top:38cqw;--d:1.25s;--len:36cqw}
.hx-tag-purity dd{font:400 7.4cqw/1 var(--font-sans);letter-spacing:-.06em;margin-top:4px}
.hx-tag-purity small{font-size:.42em;letter-spacing:-.02em;margin-left:3px;color:var(--hx-accent)}
.hx-redraw .hx-tag>i{animation:hx-line-again .8s var(--hx-ease) both}

.hx-chrom{position:relative;z-index:1;margin:-6cqw 0 0}
.hx-chrom svg{display:block;width:100%;height:auto;aspect-ratio:5;overflow:visible}
.hx-base{stroke:rgb(255 255 255 / 18%);stroke-width:1.5}
.hx-trace{opacity:0;transition:opacity .45s}
.hx-trace.is-active{opacity:1;animation:hx-reveal 2.6s .25s cubic-bezier(.55,.05,.35,1) both}
.hx-area{fill:url(#hx-fill)}
.hx-line-path{fill:none;stroke:var(--hx-trace);stroke-width:2.2;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgb(187 146 246 / 60%))}
.hx-sweep{position:absolute;top:0;left:0;width:1px;aspect-ratio:auto;height:calc(100% - 30px);background:linear-gradient(transparent,var(--hx-trace));opacity:0;pointer-events:none}
.hx-chrom.is-drawing .hx-sweep{animation:hx-sweep 2.6s .25s cubic-bezier(.55,.05,.35,1) both}
.hx-chrom figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:10px;font:500 11px/1.5 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--hx-muted)}
.hx-chrom figcaption b{font-weight:500;color:var(--hx-accent)}
.hx-chrom .hx-peak{position:absolute;left:calc(50% + 16px);top:4%;color:var(--hx-text);white-space:nowrap}
.hx-chrom .hx-peak b{color:var(--hx-text)}
.hx-plate{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:22px;padding-top:20px;border-top:1px solid var(--hx-line)}
.hx-plate a{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:14px;row-gap:8px;min-width:0}
.hx-plate .eyebrow{flex-basis:100%;color:var(--hx-muted)}
.hx-plate strong{font-size:30px;font-weight:500;letter-spacing:-.05em;line-height:1.1}
.hx-plate em{font:normal 12px var(--font-mono);color:var(--hx-muted);letter-spacing:.04em}
.hx-plate a>span[aria-hidden]{font-size:22px;color:var(--hx-accent);transition:transform .25s var(--hx-ease)}
.hx-plate a:hover strong{color:var(--hx-accent)}
.hx-plate a:hover>span[aria-hidden]{transform:translate(3px,-3px)}
.hx-cert{justify-content:flex-end;text-align:right;font:13px var(--font-mono);letter-spacing:.02em}
.hx-cert .eyebrow{text-align:right}
.hx-cert:hover [data-hx="report"]{color:var(--hx-accent)}
.hx.is-offscreen *,.hx.is-offscreen *::before,.hx.is-offscreen *::after{animation-play-state:paused!important}

@keyframes hx-fade{from{opacity:0}}
@keyframes hx-up{from{opacity:0;transform:translateY(18px)}}
@keyframes hx-rise{from{transform:translateY(108%)}}
@keyframes hx-spin{to{transform:rotate(360deg)}}
@keyframes hx-bob{50%{transform:translateY(-1.6cqw)}}
@keyframes hx-reticle-in{from{opacity:0;scale:.9;rotate:-24deg}}
@keyframes hx-vial-in{from{opacity:0;transform:translateY(6cqw) scale(.94);filter:blur(14px)}}
@keyframes hx-sheen{0%,50%{background-position:150% 0}80%,100%{background-position:-60% 0}}
@keyframes hx-scan{0%{transform:translateY(0);opacity:0}8%{opacity:.85}46%{transform:translateY(72%);opacity:.85}54%,100%{transform:translateY(72%);opacity:0}}
@keyframes hx-line{from{transform:scaleX(0)}}
@keyframes hx-line-again{from{transform:scaleX(0)}}
@keyframes hx-reveal{from{clip-path:inset(-20% 100% -20% 0)}to{clip-path:inset(-20% 0 -20% 0)}}
@keyframes hx-sweep{from{left:0;opacity:1}90%{opacity:1}to{left:100%;opacity:0}}
@keyframes hx-timer{to{opacity:1}}

@media(max-width:1100px){.hx-main{gap:40px}.hx h1{font-size:6.7vw}.hx-intro{font-size:15px}.hx-facts b{font-size:34px}.hx-plate strong{font-size:26px}}
@media(max-width:900px){.hx-main{grid-template-columns:minmax(0,1fr);gap:48px}.hx h1{font-size:clamp(52px,10.4vw,96px)}.hx-intro{font-size:16px}.hx-instrument{width:100%;max-width:680px;margin-inline:auto}.hx-facts{margin-top:44px}}
@media(max-width:600px){
  .hx{padding-top:30px}
  .hx-main{gap:36px}
  .hx-kicker{margin-bottom:20px}
  .hx h1{font-size:clamp(44px,12.6vw,66px);letter-spacing:-.062em}
  .hx-intro{margin-block:24px 28px}
  .hx-actions{flex-direction:column;align-items:stretch}
  .hx-facts{gap:14px;margin-top:38px}
  .hx-facts b{font-size:30px}
  .hx-facts .eyebrow{font-size:11px;letter-spacing:.06em}
  .hx-stage{aspect-ratio:.82}
  .hx-reticle{width:112%;height:auto;left:-6%;right:-6%}
  .hx-vials{width:80cqw}
  .hx-chrom{margin-top:18px}
  .hx-tag{max-width:48cqw;padding-top:10px}
  .hx-tag>i{display:none}
  .hx-tag dt{font-size:10px}
  .hx-tag dd{font-size:12px}
  .hx-tag-lot,.hx-tag-id{top:0}
  .hx-tag-endo,.hx-tag-purity{top:auto;bottom:0}
  .hx-tag-purity dd{font-size:11cqw}
  .hx-chrom .hx-peak{font-size:10px}
  .hx-chrom figcaption{font-size:10px;letter-spacing:.06em}
  .hx-plate{flex-direction:column;align-items:flex-start;gap:18px}
  .hx-cert,.hx-cert .eyebrow{justify-content:flex-start;text-align:left}
  .hx-plate strong{font-size:28px}
}
a.hx-vials{display:block;cursor:pointer}
a.hx-vials:focus-visible{outline:2px solid var(--hx-accent);outline-offset:6px}