:root{
  --bg:#0d0f0e;
  --panel:#171a18;
  --panel2:#111311;
  --line:#454a45;
  --line-soft:#323732;
  --text:#eeefe9;
  --muted:#979d95;
  --amber:#f0a72d;
  --cond:'Barlow Condensed',sans-serif;
  --mono:'IBM Plex Mono',monospace;
  --sans:'Inter',sans-serif
}

*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
html,body{margin:0;min-width:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.45;
  overflow-x:hidden
}
a{color:inherit}
button{font:inherit}

.frame{
  width:100%;
  max-width:1480px;
  margin:0 auto;
  padding:24px
}
.machine{
  border:1px solid var(--line);
  background:var(--panel);
  min-height:calc(100vh - 48px);
  position:relative;
  overflow:hidden;
  box-shadow:
    8px 8px 0 rgba(0,0,0,.34),
    4px 4px 0 rgba(240,167,45,.055),
    0 30px 80px rgba(0,0,0,.30),
    0 10px 28px rgba(0,0,0,.18),
    0 1px 0 rgba(255,255,255,.018)
}
.machine:before,.machine:after{
  content:"";
  position:absolute;
  width:8px;height:8px;
  border:1px solid #70766e;
  border-radius:50%;
  top:14px;
  z-index:20;
  pointer-events:none
}
.machine:before{left:14px}
.machine:after{right:14px}

/* TOPBAR */
.topbar{
  min-height:78px;
  padding:0 30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:15
}
.brand-cluster{
  min-width:0;
  display:flex;
  align-items:center;
  gap:20px
}
.brand{
  flex:0 0 auto;
  font:800 27px/1 var(--cond);
  letter-spacing:.02em;
  text-transform:uppercase
}
.mirror-shortcuts{
  min-width:0;
  display:flex;
  align-items:center;
  gap:15px
}
.mirror-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--text);
  text-decoration:none;
  white-space:nowrap;
  font:600 10px/1 var(--mono);
  letter-spacing:.075em;
  text-transform:uppercase;
  transition:opacity .18s ease
}
.mirror-link .arrow{
  display:inline-block;
  color:var(--text);
  font-size:12px;
  line-height:1;
  transform:translateY(-1px);
  transition:color .18s ease,transform .18s ease
}
.mirror-link:hover{opacity:.78}
.mirror-link:hover .arrow{
  color:var(--amber);
  transform:translate(2px,-3px)
}
.topnav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px
}
.nav-btn{
  min-height:38px;
  padding:0 15px;
  border:1px solid var(--line);
  background:#131613;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  text-decoration:none;
  color:#b8bdb6;
  font:600 10px/1 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  position:relative;
  overflow:hidden;
  transition:border-color .18s ease,color .18s ease,background .18s ease,transform .18s ease
}
.nav-btn:before{
  content:"";
  width:5px;height:5px;
  border-radius:50%;
  border:1px solid #6c736b;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease
}
.nav-btn:after{
  content:"";
  position:absolute;
  left:0;right:100%;bottom:0;
  height:1px;
  background:var(--amber);
  transition:right .22s ease
}
.nav-btn:hover{
  color:var(--text);
  border-color:#717870;
  background:#181b18
}
.nav-btn:hover:before{
  background:var(--amber);
  border-color:var(--amber);
  box-shadow:0 0 10px rgba(240,167,45,.45)
}
.nav-btn:hover:after{right:0}
.nav-btn.primary{
  color:#e9e1d2;
  border-color:#695129;
  background:rgba(240,167,45,.055)
}
.nav-btn.primary:before{
  border-color:var(--amber);
  background:var(--amber);
  box-shadow:0 0 10px rgba(240,167,45,.34)
}


/* LANGUAGE SWITCHER */
.topbar-actions{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px
}
.language-switcher{
  position:relative;
  flex:0 0 auto;
  z-index:40
}
.language-current{
  min-width:92px;
  height:38px;
  padding:0 11px;
  border:1px solid var(--line);
  background:#131613;
  color:#d9ddd6;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  font:600 10px/1 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:border-color .18s ease,background .18s ease,color .18s ease
}
.language-current:hover,
.language-switcher.is-open .language-current{
  color:var(--text);
  border-color:#717870;
  background:#181b18
}
.language-flag{font-size:15px;line-height:1}
.language-code{min-width:20px;text-align:left}
.language-chevron{
  margin-left:auto;
  color:var(--amber);
  font-size:14px;
  transform:translateY(-1px);
  transition:transform .18s ease
}
.language-switcher.is-open .language-chevron{transform:rotate(180deg) translateY(1px)}
.language-menu{
  position:absolute;
  top:calc(100% + 7px);
  right:0;
  width:238px;
  max-height:min(430px,70vh);
  overflow:auto;
  padding:6px;
  border:1px solid #555c55;
  background:#101310;
  box-shadow:8px 8px 0 rgba(0,0,0,.32),0 18px 46px rgba(0,0,0,.42);
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease
}
.language-switcher.is-open .language-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0)
}
.language-option{
  width:100%;
  min-height:39px;
  padding:0 10px;
  border:0;
  border-bottom:1px solid #292e29;
  background:transparent;
  color:#bfc4bd;
  display:grid;
  grid-template-columns:24px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  text-align:left;
  cursor:pointer;
  font:500 10px/1.15 var(--mono);
  letter-spacing:.045em;
  transition:background .14s ease,color .14s ease
}
.language-option:last-child{border-bottom:0}
.language-option:hover,
.language-option:focus-visible,
.language-option[aria-selected="true"]{
  outline:0;
  color:var(--text);
  background:rgba(240,167,45,.065)
}
.language-option[aria-selected="true"]{box-shadow:inset 2px 0 var(--amber)}
.language-option .language-option-flag{font-size:16px}
.language-option small{
  color:#777e76;
  font-size:8px;
  letter-spacing:.09em
}
[dir="rtl"] .language-code{text-align:right}
[dir="rtl"] .language-menu{right:auto;left:0}
[dir="rtl"] .language-option{text-align:right}
[dir="rtl"] .language-option[aria-selected="true"]{box-shadow:inset -2px 0 var(--amber)}
.flow-address,.route{direction:ltr}

/* HERO */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1.34fr) minmax(390px,.66fr);
  min-height:420px
}
.hero-copy{
  min-width:0;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  justify-content:space-between
}
.hero-main{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:42px 52px 34px
}
.hero h1{
  margin:0 0 34px;
  max-width:100%;
  font:800 clamp(78px,7.2vw,118px)/.82 var(--cond);
  letter-spacing:-.045em;
  text-transform:uppercase;
  white-space:nowrap
}
.hero-lead{
  max-width:590px;
  margin:0 0 34px;
  color:#c5c9c2;
  font:500 16px/1.58 var(--sans)
}
.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  width:250px;
  height:58px;
  border:0;
  background:var(--amber);
  color:#15120b;
  font:800 18px/1 var(--cond);
  text-transform:uppercase;
  letter-spacing:.08em;
  cursor:pointer;
  box-shadow:inset 0 -3px rgba(0,0,0,.28);
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:transform .2s cubic-bezier(.2,.75,.2,1),box-shadow .2s ease,filter .2s ease
}
.cta:before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-35%;bottom:-35%;
  left:-48%;
  width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,248,225,.46),transparent);
  transform:skewX(-19deg);
  opacity:0
}
.cta:after{
  content:"";
  position:absolute;
  left:14px;right:14px;bottom:8px;
  height:1px;
  background:rgba(21,18,11,.34);
  transform:scaleX(.22);
  transform-origin:left center;
  transition:transform .25s cubic-bezier(.2,.75,.2,1),opacity .2s ease
}
.cta:hover{
  transform:translateY(-2px);
  filter:brightness(1.045);
  box-shadow:inset 0 -3px rgba(0,0,0,.24),0 0 0 1px rgba(240,167,45,.14),0 8px 28px rgba(240,167,45,.16)
}
.cta:hover:before{opacity:.66;animation:ctaSweep .68s cubic-bezier(.2,.75,.2,1)}
.cta:hover:after{transform:scaleX(1)}
.cta:active{
  transform:translateY(0) scale(1.012);
  filter:brightness(1.085);
  box-shadow:inset 0 -2px rgba(0,0,0,.2),0 0 0 1px rgba(240,167,45,.24),0 10px 36px rgba(240,167,45,.25)
}
.cta:active:before{opacity:.88;animation:ctaSweep .52s cubic-bezier(.16,.8,.18,1)}
.cta:active:after{transform:scaleX(1.06);opacity:.9}
@keyframes ctaSweep{from{left:-48%}to{left:118%}}

/* HERO STRIP */
.strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line);
  background:#141714
}
.spec{
  min-width:0;
  padding:20px 22px 21px;
  border-right:1px solid var(--line);
  position:relative
}
.spec:last-child{border-right:0}
.spec:before{
  content:"";
  position:absolute;
  left:22px;top:0;
  width:28px;height:1px;
  background:var(--amber)
}
.spec small{
  display:block;
  margin-bottom:9px;
  color:var(--muted);
  font:500 8px/1 var(--mono);
  text-transform:uppercase;
  letter-spacing:.11em
}
.spec b{
  display:block;
  font:800 clamp(24px,2.25vw,31px)/1 var(--cond);
  text-transform:uppercase;
  white-space:nowrap
}

/* READOUT / MERCURY */
.readout{
  min-width:0;
  display:grid;
  background:var(--panel2)
}
.dial{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:34px 34px;
  position:relative;
  overflow:hidden;
  cursor:crosshair;
  background:
    radial-gradient(circle at center,rgba(240,167,45,.105),transparent 35%),
    radial-gradient(circle at center,rgba(240,167,45,.035),transparent 62%),
    linear-gradient(rgba(240,167,45,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(240,167,45,.022) 1px,transparent 1px);
  background-size:auto,auto,26px 26px,26px 26px
}
.dial:before{
  content:"";
  position:absolute;
  width:86%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(240,167,45,.09),transparent 64%);
  animation:ambientBreath 4.8s ease-in-out infinite
}
.mercury-shell{
  width:min(350px,100%);
  aspect-ratio:1;
  border:1px solid var(--line);
  border-radius:50%;
  display:grid;
  place-items:center;
  position:relative;
  isolation:isolate;
  box-shadow:inset 0 0 42px rgba(240,167,45,.025),0 0 50px rgba(0,0,0,.26);
  transition:transform .13s ease-out
}
.mercury-shell:before{
  content:"";
  position:absolute;
  inset:18px;
  border:1px dashed #5f655e;
  border-radius:50%;
  animation:shellDrift 18s linear infinite
}
.mercury-shell:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(240,167,45,.58) 0 1deg,transparent 1deg 11deg);
  -webkit-mask:radial-gradient(circle,transparent 0 91%,#000 91% 100%);
  mask:radial-gradient(circle,transparent 0 91%,#000 91% 100%);
  opacity:.58;
  animation:ticksSpin 24s linear infinite reverse
}
.field-sweep{
  position:absolute;inset:4px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 78%,rgba(240,167,45,.03) 82%,rgba(240,167,45,.22) 96%,rgba(240,167,45,.75) 100%);
  animation:fieldSweep 7s linear infinite;
  z-index:1;
  -webkit-mask:radial-gradient(circle,transparent 0 83%,#000 84% 100%);
  mask:radial-gradient(circle,transparent 0 83%,#000 84% 100%)
}
.micro-orbit{
  position:absolute;inset:38px;border-radius:50%;
  border:1px solid rgba(240,167,45,.12);
  animation:microOrbit 9s linear infinite
}
.micro-orbit.mo2{inset:53px;animation-duration:6.5s;animation-direction:reverse;border-style:dashed}
.micro-orbit.mo3{inset:78px;animation-duration:4.7s}
.magnet-line{
  position:absolute;
  border:1px solid rgba(240,167,45,.15);
  border-radius:50%;
  inset:54px;
  animation:magnetPulse 3.4s ease-in-out infinite
}
.magnet-line.m2{inset:78px;animation-delay:-1.1s}
.magnet-line.m3{inset:102px;animation-delay:-2.2s}
.magnetic-arc{
  position:absolute;
  inset:34px;
  border-radius:50%;
  border-top:1px solid rgba(255,210,125,.88);
  border-right:1px solid transparent;
  border-bottom:1px solid transparent;
  border-left:1px solid transparent;
  filter:drop-shadow(0 0 10px rgba(240,167,45,.3));
  animation:arcSpin 4.1s linear infinite
}
.magnetic-arc.a2{
  inset:50px;
  animation-duration:6.2s;
  animation-direction:reverse;
  opacity:.52
}
.energy-pulse{
  position:absolute;
  inset:94px;
  border-radius:50%;
  border:1px solid rgba(240,167,45,.5);
  animation:energyPulse 2.8s ease-out infinite;
  z-index:3
}
.energy-pulse.ep2{animation-delay:-1.4s}
.pulse-disc{
  position:absolute;
  width:162px;height:162px;
  border-radius:50%;
  border:1px solid rgba(240,167,45,.18);
  box-shadow:0 0 42px rgba(240,167,45,.06);
  animation:pulseDisc 3.1s ease-in-out infinite;
  z-index:2
}
.pulse-disc.p2{width:218px;height:218px;animation-delay:-1.55s}
.spark{
  position:absolute;
  width:5px;height:5px;
  border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 10px rgba(240,167,45,.8),0 0 24px rgba(240,167,45,.25);
  z-index:3
}
.sp1{left:50%;top:8%;animation:spark1 4.6s ease-in-out infinite}
.sp2{right:10%;top:50%;animation:spark2 5.3s ease-in-out infinite}
.sp3{left:16%;bottom:18%;animation:spark3 3.9s ease-in-out infinite}
.sp4{right:23%;bottom:12%;animation:spark4 6.1s ease-in-out infinite}
.mercury-field{
  position:absolute;
  width:222px;height:222px;
  filter:url(#gooStrong);
  z-index:4;
  transition:transform .1s ease-out;
  will-change:transform
}
.mblob{
  position:absolute;
  left:50%;top:50%;
  background:linear-gradient(145deg,#ffd98f 0%,var(--amber) 42%,#bb6711 100%);
  box-shadow:
    inset 8px 8px 18px rgba(255,240,194,.16),
    inset -10px -12px 22px rgba(93,40,0,.28),
    0 0 28px rgba(240,167,45,.18);
  border-radius:44% 56% 52% 48%/58% 43% 57% 42%
}
.mblob.main{width:130px;height:130px;margin:-65px;animation:mercuryMain 4.2s cubic-bezier(.45,.05,.55,.95) infinite}
.mblob.a{width:54px;height:54px;margin:-27px;animation:mercuryA 3s ease-in-out infinite}
.mblob.b{width:38px;height:38px;margin:-19px;animation:mercuryB 3.7s ease-in-out infinite}
.mblob.c{width:27px;height:27px;margin:-13.5px;animation:mercuryC 2.6s ease-in-out infinite}
.mblob.d{width:21px;height:21px;margin:-10.5px;animation:mercuryD 3.4s ease-in-out infinite}
.mblob.e{width:28px;height:28px;margin:-14px;animation:mercuryE 3.1s ease-in-out infinite}
.mblob.f{width:14px;height:14px;margin:-7px;animation:mercuryF 2.4s ease-in-out infinite}
.orbit-drop{
  position:absolute;
  left:50%;top:50%;
  width:7px;height:7px;
  margin:-3.5px;
  border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 14px rgba(240,167,45,.8);
  z-index:5
}
.od1{animation:dropOrbit1 5.2s linear infinite}
.od2{animation:dropOrbit2 7.1s linear infinite reverse;opacity:.78}
.od3{animation:dropOrbit3 4.4s linear infinite;opacity:.62}
.signal{
  position:absolute;
  width:4px;height:4px;
  border-radius:50%;
  background:#ffd68c;
  box-shadow:0 0 10px rgba(240,167,45,.85);
  opacity:.7
}
.s1{left:17%;top:29%;animation:signalBlink 2.4s ease-in-out infinite}
.s2{right:14%;top:42%;animation:signalBlink 2.9s ease-in-out -1s infinite}
.s3{left:24%;bottom:18%;animation:signalBlink 2.1s ease-in-out -.7s infinite}
.dial-core{
  width:40%;
  aspect-ratio:1;
  border:1px solid #666d65;
  border-radius:50%;
  display:grid;
  place-items:center;
  position:relative;
  background:
    radial-gradient(circle at 35% 30%,rgba(255,255,255,.045),transparent 24%),
    #181b19;
  z-index:8;
  box-shadow:
    0 0 0 12px rgba(13,15,14,.78),
    0 0 38px rgba(240,167,45,.11),
    inset 0 0 24px rgba(240,167,45,.025);
  animation:coreBreath 4.2s ease-in-out infinite
}
.dial-core:before{
  content:"";
  position:absolute;inset:-14px;
  border-radius:50%;
  border:1px solid rgba(240,167,45,.18);
  animation:coreHalo 2.8s ease-in-out infinite
}
.dial-core span{
  position:relative;
  font:700 20px/1 var(--cond);
  text-transform:uppercase;
  letter-spacing:.04em
}
.dial-core span:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-9px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--amber),transparent);
  animation:labelScan 2.1s ease-in-out infinite
}
.core-glint{
  position:absolute;
  width:40%;
  aspect-ratio:1;
  border-radius:50%;
  z-index:9;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.1) 47%,transparent 59%);
  animation:glint 3.8s ease-in-out infinite
}

@keyframes ambientBreath{0%,100%{transform:scale(.9);opacity:.35}50%{transform:scale(1.1);opacity:1}}
@keyframes shellDrift{to{transform:rotate(360deg)}}
@keyframes ticksSpin{to{transform:rotate(360deg)}}
@keyframes fieldSweep{to{transform:rotate(360deg)}}
@keyframes microOrbit{to{transform:rotate(360deg)}}
@keyframes arcSpin{to{transform:rotate(360deg)}}
@keyframes magnetPulse{0%,100%{transform:scale(.9);opacity:.08}50%{transform:scale(1.1);opacity:.8}}
@keyframes pulseDisc{0%,100%{transform:scale(.88);opacity:.08}50%{transform:scale(1.08);opacity:.65}}
@keyframes energyPulse{0%{transform:scale(.55);opacity:0}18%{opacity:.8}100%{transform:scale(1.9);opacity:0}}
@keyframes spark1{0%,100%{transform:translate(-50%,0) scale(.6);opacity:.2}45%{transform:translate(-50%,24px) scale(1.4);opacity:1}}
@keyframes spark2{0%,100%{transform:translate(0,-50%) scale(.55);opacity:.18}50%{transform:translate(-24px,-50%) scale(1.3);opacity:1}}
@keyframes spark3{0%,100%{transform:scale(.6);opacity:.15}50%{transform:translate(18px,-18px) scale(1.25);opacity:.95}}
@keyframes spark4{0%,100%{transform:scale(.5);opacity:.15}50%{transform:translate(-16px,-24px) scale(1.45);opacity:1}}
@keyframes mercuryMain{
  0%,100%{transform:rotate(0deg) scale(1,.88)}
  22%{transform:rotate(64deg) scale(.82,1.18)}
  48%{transform:rotate(138deg) scale(1.14,.84)}
  72%{transform:rotate(216deg) scale(.9,1.10)}
}
@keyframes mercuryA{0%,100%{transform:translate(-78px,-16px) scale(.78)}50%{transform:translate(80px,42px) scale(1.22)}}
@keyframes mercuryB{0%,100%{transform:translate(62px,-74px)}50%{transform:translate(-64px,66px) scale(1.28)}}
@keyframes mercuryC{0%,100%{transform:translate(-26px,84px)}50%{transform:translate(32px,-84px) scale(.7)}}
@keyframes mercuryD{0%,100%{transform:translate(92px,8px)}50%{transform:translate(-90px,-12px)}}
@keyframes mercuryE{0%,100%{transform:translate(-95px,12px) scale(.6)}50%{transform:translate(90px,-26px) scale(1.3)}}
@keyframes mercuryF{0%,100%{transform:translate(12px,-96px) scale(.5)}50%{transform:translate(-20px,92px) scale(1.4)}}
@keyframes dropOrbit1{from{transform:rotate(0deg) translateX(132px) rotate(0deg)}to{transform:rotate(360deg) translateX(132px) rotate(-360deg)}}
@keyframes dropOrbit2{from{transform:rotate(30deg) translateX(108px) rotate(-30deg)}to{transform:rotate(390deg) translateX(108px) rotate(-390deg)}}
@keyframes dropOrbit3{from{transform:rotate(130deg) translateX(84px) rotate(-130deg)}to{transform:rotate(490deg) translateX(84px) rotate(-490deg)}}
@keyframes signalBlink{0%,100%{opacity:.15;transform:scale(.65)}50%{opacity:1;transform:scale(1.5)}}
@keyframes coreBreath{
  0%,100%{box-shadow:0 0 0 12px rgba(13,15,14,.78),0 0 34px rgba(240,167,45,.08),inset 0 0 24px rgba(240,167,45,.025)}
  50%{box-shadow:0 0 0 12px rgba(13,15,14,.78),0 0 54px rgba(240,167,45,.19),inset 0 0 24px rgba(240,167,45,.025)}
}
@keyframes coreHalo{0%,100%{transform:scale(.94);opacity:.12}50%{transform:scale(1.08);opacity:.8}}
@keyframes labelScan{0%,100%{opacity:.2;transform:scaleX(.5)}50%{opacity:1;transform:scaleX(1)}}
@keyframes glint{0%,100%{transform:rotate(0deg);opacity:.12}50%{transform:rotate(180deg);opacity:.68}}


/* TRANSACTION FLOW */
.flow-embed{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#141714;
  overflow:hidden
}
.flow-diagram{
  position:relative;
  width:100%;
  height:146px;
  overflow:hidden;
  background:
    linear-gradient(rgba(240,167,45,.014) 1px,transparent 1px),
    linear-gradient(90deg,rgba(240,167,45,.014) 1px,transparent 1px),
    var(--panel2);
  background-size:26px 26px
}
.flow-diagram:before,
.flow-diagram:after{
  content:"";
  position:absolute;
  top:10px;
  width:6px;
  height:6px;
  border:1px solid #646a63;
  border-radius:50%
}
.flow-diagram:before{left:10px}
.flow-diagram:after{right:10px}

.flow-node{
  position:absolute;
  top:36px;
  height:74px;
  border:1px solid var(--line);
  background:var(--panel);
  z-index:6;
  transition:opacity .34s ease,border-color .28s ease,transform .34s ease
}
.flow-node--client{left:28px;width:150px}
.flow-node--deposit{width:164px;right:calc(50% + 76px)}
.flow-node--reserve{width:160px;left:calc(50% + 76px)}
.flow-node--destination{
  right:28px;
  width:154px;
  opacity:.32;
  transform:translateX(4px)
}
.flow-label{
  position:absolute;
  left:11px;
  top:10px;
  color:var(--muted);
  font:500 7px/1 var(--mono);
  letter-spacing:.10em;
  text-transform:uppercase
}
.flow-value{
  position:absolute;
  left:11px;
  top:31px;
  font:700 16px/1 var(--cond);
  letter-spacing:.008em;
  text-transform:uppercase;
  white-space:nowrap
}
.flow-address{
  position:absolute;
  left:11px;
  bottom:9px;
  color:#777d76;
  font:500 7px/1 var(--mono);
  white-space:nowrap
}
.flow-port{
  position:absolute;
  top:50%;
  width:7px;
  height:7px;
  margin-top:-3.5px;
  border:1px solid #686f67;
  border-radius:50%;
  background:var(--panel);
  transition:.25s ease
}
.flow-port--left{left:-4px}
.flow-port--right{right:-4px}
.flow-reserve-bars{
  position:absolute;
  left:11px;
  right:11px;
  bottom:10px;
  display:grid;
  gap:3px
}
.flow-reserve-bar{
  height:2px;
  background:#292e29;
  overflow:hidden
}
.flow-reserve-bar i{
  display:block;
  height:100%;
  width:var(--w);
  background:#70766f;
  transition:background .25s ease
}
.flow-break{
  position:absolute;
  left:50%;
  top:56px;
  width:34px;
  height:34px;
  transform:translateX(-50%) scale(.82);
  opacity:.18;
  z-index:5;
  transition:opacity .32s ease,transform .32s ease
}
.flow-break:before,
.flow-break:after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:29px;
  height:1px;
  background:#626861
}
.flow-break:before{transform:translate(-50%,-50%) rotate(45deg)}
.flow-break:after{transform:translate(-50%,-50%) rotate(-45deg)}
.flow-connector{
  position:absolute;
  top:72px;
  height:1px;
  z-index:3;
  background:#303630;
  overflow:visible
}
.flow-connector--input{
  left:178px;
  right:calc(50% + 240px)
}
.flow-connector--output{
  left:calc(50% + 236px);
  right:182px
}
.flow-trace{
  position:absolute;
  inset:0;
  transform:scaleX(0);
  opacity:0;
  transform-origin:left center
}
.flow-connector--input .flow-trace{background:var(--amber)}
.flow-connector--output .flow-trace{background:#c9cdc7}
.flow-packet{
  position:absolute;
  top:-2.5px;
  left:0;
  width:6px;
  height:6px;
  border-radius:50%;
  opacity:0;
  z-index:9
}
.flow-connector--input .flow-packet{
  background:var(--amber);
  box-shadow:0 0 8px rgba(240,167,45,.55)
}
.flow-connector--output .flow-packet{
  background:#d7dbd5;
  box-shadow:0 0 7px rgba(215,219,213,.26)
}
.flow-done{
  position:absolute;
  right:8px;
  bottom:8px;
  width:14px;
  height:14px;
  border:1px solid #505750;
  display:grid;
  place-items:center;
  color:#5e655e;
  font-size:8px;
  opacity:0;
  transition:opacity .22s ease,color .22s ease,border-color .22s ease
}
.flow-node--destination .flow-value{
  opacity:0;
  transform:translateY(3px);
  transition:opacity .24s ease,transform .24s ease
}

/* flow states */
.flow-diagram.is-deposit-start .flow-node--client,
.flow-diagram.is-deposit-arrived .flow-node--deposit,
.flow-diagram.is-reserve-active .flow-node--reserve,
.flow-diagram.is-payout-arrived .flow-node--destination{border-color:#806a44}
.flow-diagram.is-deposit-start .flow-node--client .flow-port--right,
.flow-diagram.is-deposit-arrived .flow-node--deposit .flow-port--left,
.flow-diagram.is-reserve-active .flow-node--reserve .flow-port--right,
.flow-diagram.is-payout-arrived .flow-node--destination .flow-port--left{
  background:var(--amber);
  border-color:var(--amber);
  box-shadow:0 0 8px rgba(240,167,45,.32)
}
.flow-diagram.is-input-closed .flow-node--client,
.flow-diagram.is-reserve-active .flow-node--client,
.flow-diagram.is-payout-moving .flow-node--client,
.flow-diagram.is-payout-arrived .flow-node--client,
.flow-diagram.is-complete .flow-node--client{opacity:.38}
.flow-diagram.is-input-closed .flow-break,
.flow-diagram.is-reserve-active .flow-break,
.flow-diagram.is-payout-moving .flow-break,
.flow-diagram.is-payout-arrived .flow-break,
.flow-diagram.is-complete .flow-break{
  opacity:1;
  transform:translateX(-50%) scale(1)
}
.flow-diagram.is-reserve-active .flow-reserve-bar i,
.flow-diagram.is-payout-moving .flow-reserve-bar i{background:var(--amber)}
.flow-diagram.is-payout-moving .flow-node--destination,
.flow-diagram.is-payout-arrived .flow-node--destination,
.flow-diagram.is-complete .flow-node--destination{
  opacity:1;
  transform:translateX(0)
}
.flow-diagram.is-payout-arrived .flow-node--destination .flow-value,
.flow-diagram.is-complete .flow-node--destination .flow-value{
  opacity:1;
  transform:translateY(0)
}
.flow-diagram.is-complete .flow-done{
  opacity:1;
  color:var(--amber);
  border-color:#756039
}

/* PROCESS */
.process{border-top:1px solid var(--line)}
.process-head{
  padding:30px 38px;
  border-bottom:1px solid var(--line)
}
.process-head h2,
.parameters-head h2{
  margin:0;
  font:800 clamp(42px,4.7vw,70px)/.9 var(--cond);
  letter-spacing:-.025em;
  text-transform:uppercase
}
.step{
  display:grid;
  grid-template-columns:116px minmax(220px,.8fr) minmax(0,1.35fr);
  min-height:112px;
  border-bottom:1px solid var(--line)
}
.step-no{
  padding:22px 28px;
  display:flex;
  align-items:center;
  color:var(--amber);
  border-right:1px solid var(--line);
  font:800 52px/.85 var(--cond)
}
.step-title{
  padding:22px 28px;
  display:flex;
  align-items:center;
  border-right:1px solid var(--line);
  font:700 25px/1 var(--cond);
  text-transform:uppercase
}
.step p{
  margin:0;
  padding:22px 32px;
  display:flex;
  align-items:center;
  color:#b6bbb4;
  font-size:15px;
  max-width:720px
}

/* PARAMETERS */
.parameters{border-top:1px solid var(--line)}
.parameters-head{
  padding:30px 38px;
  border-bottom:1px solid var(--line)
}
.params-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.param{
  min-height:142px;
  padding:25px 28px 27px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:24px
}
.param:nth-child(3n){border-right:0}
.param:nth-child(n+4){border-bottom:0}
.param:after{
  content:"";
  position:absolute;
  width:7px;height:7px;
  right:18px;top:18px;
  border:1px solid #5d645d;
  border-radius:50%
}
.param-no{
  color:var(--amber);
  font:600 9px/1 var(--mono);
  letter-spacing:.12em
}
.param p{
  max-width:330px;
  margin:0;
  color:#d5d8d1;
  font:600 18px/1.23 var(--cond);
  text-transform:uppercase
}


.param-policy{justify-content:space-between}
.policy-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  padding-right:18px
}
.policy-tags span{
  min-height:28px;
  padding:0 9px;
  display:inline-flex;
  align-items:center;
  border:1px solid #4b514b;
  background:#131613;
  color:#d0d4cd;
  font:600 9px/1 var(--mono);
  letter-spacing:.075em;
  white-space:nowrap
}
.policy-tags span:nth-child(1),
.policy-tags span:nth-child(2){
  border-color:#695129;
  color:#e8d8b8
}

/* MIRRORS */
.mirrors{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  border-top:1px solid var(--line)
}
.mirrors h2{
  margin:0;
  min-height:138px;
  padding:28px;
  border-right:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font:800 34px/1 var(--cond);
  text-transform:uppercase
}
.routes{
  min-width:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.route{
  color:inherit;
  text-decoration:none;
  min-width:0;
  padding:31px 28px;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  justify-content:center;
  font:600 12px/1.5 var(--mono);
  overflow-wrap:anywhere
}
.route:last-child{border-right:0}
.route span{
  display:block;
  margin-bottom:12px;
  color:var(--amber);
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase
}

footer{
  padding:20px 30px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--muted);
  font:500 9px/1.2 var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase
}


@media(max-width:1220px){
  .topbar{
    align-items:flex-start;
    flex-direction:column;
    gap:14px;
    padding-top:20px;
    padding-bottom:17px
  }
  .brand-cluster{
    width:100%;
    justify-content:space-between
  }
  .topnav{
    width:100%;
    justify-content:flex-start
  }
}

/* TABLET */
@media(max-width:1050px){
  .frame{padding:14px}
  .hero{
    grid-template-columns:minmax(0,1.08fr) minmax(330px,.92fr);
    min-height:392px
  }
  .hero-main{padding:36px 36px 30px}
  .hero h1{font-size:clamp(67px,8vw,92px)}
  .spec{padding:18px 16px}
  .spec:before{left:16px}
  .spec b{font-size:24px}
  .dial{padding:30px 22px}
  .step{grid-template-columns:94px minmax(190px,.72fr) minmax(0,1.28fr)}
  .step-no{padding:20px 22px;font-size:45px}
  .step-title{padding:20px 22px;font-size:23px}
  .step p{padding:20px 24px}
  .mirrors{grid-template-columns:245px minmax(0,1fr)}
  .mirrors h2{font-size:30px}
}

/* MOBILE */
@media(max-width:780px){
  .frame{padding:0}
  .machine{
    border-left:0;
    border-right:0;
    min-height:100vh;
    box-shadow:none
  }
  .machine:before,.machine:after{top:12px}
  .topbar{
    min-height:auto;
    padding:20px 18px 15px;
    display:grid;
    grid-template-columns:1fr;
    gap:16px
  }
  .brand-cluster{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:13px
  }
  .brand{font-size:25px}
  .mirror-shortcuts{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line)
  }
  .mirror-link{
    min-width:0;
    min-height:38px;
    padding:0 7px;
    justify-content:center;
    text-align:center;
    white-space:normal;
    font-size:9px;
    line-height:1.2;
    border-right:1px solid var(--line)
  }
  .mirror-link:last-child{border-right:0}
  .mirror-link .arrow{font-size:11px}
  .topnav{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px
  }
  .nav-btn{
    min-width:0;
    min-height:42px;
    padding:0 9px;
    font-size:9px;
    letter-spacing:.045em
  }

  .hero{
    grid-template-columns:1fr;
    min-height:0
  }
  .hero-copy{border-right:0}
  .hero-main{
    padding:30px 22px 26px
  }
  .hero h1{
    margin-bottom:25px;
    font-size:clamp(48px,14.2vw,72px);
    white-space:nowrap
  }
  .hero-lead{
    max-width:560px;
    margin-bottom:27px;
    font-size:14px;
    line-height:1.55
  }
  .cta{
    width:100%;
    max-width:310px;
    height:55px
  }

  .strip{
    grid-template-columns:1fr;
    background:#141714
  }
  .spec{
    min-height:72px;
    padding:16px 22px;
    border-right:0;
    border-bottom:1px solid var(--line);
    display:grid;
    grid-template-columns:1fr auto;
    gap:15px;
    align-items:center
  }
  .spec:last-child{border-bottom:0}
  .spec:before{
    left:22px;
    width:22px
  }
  .spec small{margin:0}
  .spec b{
    font-size:25px;
    text-align:right
  }

  .readout{
    min-height:330px;
    border-top:1px solid var(--line)
  }
  .dial{
    min-height:330px;
    padding:22px 20px
  }
  .mercury-shell{
    width:min(286px,82vw)
  }

  .process-head,
  .parameters-head{padding:27px 22px}
  .process-head h2,
  .parameters-head h2{
    font-size:clamp(42px,13vw,58px)
  }
  .step{
    min-height:0;
    grid-template-columns:66px minmax(0,1fr);
    grid-template-rows:auto auto
  }
  .step-no{
    grid-row:1/3;
    padding:18px 14px;
    align-items:flex-start;
    justify-content:center;
    font-size:40px
  }
  .step-title{
    border-right:0;
    padding:18px 18px 7px;
    font-size:23px
  }
  .step p{
    grid-column:2;
    padding:0 18px 19px;
    display:block;
    font-size:14px;
    line-height:1.48
  }

  .params-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .param{
    min-width:0;
    min-height:138px;
    padding:17px 16px 18px;
    border-right:0;
    border-bottom:0!important;
    gap:14px
  }
  .param:nth-child(odd){border-right:1px solid var(--line)}
  .param:nth-child(-n+4){border-bottom:1px solid var(--line)!important}
  .param:nth-child(n+5){border-bottom:0!important}
  .param:after{right:12px;top:12px}
  .param-no{font-size:8px}
  .param p{
    max-width:none;
    padding-right:10px;
    font-size:clamp(15px,4.25vw,18px);
    line-height:1.14
  }
  .param-policy .policy-tags{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:5px;
    padding-right:0
  }
  .param-policy .policy-tags span{
    min-width:0;
    min-height:26px;
    padding:0 5px;
    justify-content:center;
    font-size:8px;
    letter-spacing:.04em
  }

  .mirrors{grid-template-columns:1fr}
  .mirrors h2{
    min-height:0;
    padding:28px 22px;
    border-right:0;
    border-bottom:1px solid var(--line);
    font-size:32px;
    justify-content:flex-start;
    text-align:left
  }
  .mirrors h2 br{display:none}
  .routes{grid-template-columns:1fr}
  .route{
    min-height:78px;
    padding:19px 22px;
    border-right:0;
    border-bottom:1px solid var(--line)
  }
  .route:last-child{border-bottom:0}

  footer{
    padding:18px 22px;
    flex-direction:column;
    gap:8px;
    line-height:1.35
  }
}

/* SMALL PHONES */
@media(max-width:390px){
  .topbar{padding-left:15px;padding-right:15px}
  .nav-btn{font-size:8px;padding:0 6px}
  .hero-main{padding-left:18px;padding-right:18px}
  .hero h1{font-size:13.4vw}
  .spec{padding-left:18px;padding-right:18px}
  .spec:before{left:18px}
  .spec b{font-size:23px}
  .dial{padding-left:14px;padding-right:14px}
  .mercury-shell{width:min(300px,88vw)}
  .mercury-field{width:196px;height:196px}
  .mblob.main{width:116px;height:116px;margin:-58px}
  .dial-core span{font-size:18px}
  .process-head,.parameters-head{padding-left:18px;padding-right:18px}
  .param{
    min-height:132px;
    padding:15px 13px 16px
  }
  .param p{
    padding-right:6px;
    font-size:14.5px
  }
  .param-policy .policy-tags{gap:4px}
  .param-policy .policy-tags span{font-size:7.5px;padding:0 4px}
}


/* RESPONSIVE REFINEMENTS */
@media(max-width:1220px){
  .topbar-actions{width:100%;justify-content:space-between}
  .topnav{width:auto;min-width:0;flex:1 1 auto}
}

@media(max-width:920px){
  .flow-diagram{
    height:auto;
    min-height:0;
    padding:14px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    align-items:stretch
  }
  .flow-diagram:before,
  .flow-diagram:after,
  .flow-break,
  .flow-connector,
  .flow-port{display:none!important}
  .flow-node,
  .flow-node--client,
  .flow-node--deposit,
  .flow-node--reserve,
  .flow-node--destination{
    position:relative;
    inset:auto;
    top:auto;
    left:auto;
    right:auto;
    width:auto;
    height:92px;
    transform:none
  }
  .flow-node--client{grid-column:1;grid-row:1}
  .flow-node--deposit{grid-column:2;grid-row:1}
  .flow-node--reserve{grid-column:1;grid-row:2}
  .flow-node--destination{
    grid-column:2;
    grid-row:2;
    opacity:.34
  }
  .flow-diagram.is-payout-moving .flow-node--destination,
  .flow-diagram.is-payout-arrived .flow-node--destination,
  .flow-diagram.is-complete .flow-node--destination{opacity:1;transform:none}
}

@media(max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero-copy{border-right:0}
  .readout{border-top:1px solid var(--line);min-height:330px}
  .dial{min-height:330px;padding:24px}
  .mercury-shell{width:min(300px,74vw)}
}

@media(max-width:780px){
  .frame{padding:10px 10px 16px}
  .machine{
    border:1px solid var(--line);
    min-height:calc(100vh - 26px);
    box-shadow:6px 6px 0 rgba(0,0,0,.32),3px 3px 0 rgba(240,167,45,.05),0 18px 46px rgba(0,0,0,.28)
  }

  /* Mobile header: brand and language share the first row. */
  .topbar{
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:12px;
    row-gap:13px;
    align-items:center
  }
  .brand-cluster,
  .topbar-actions{display:contents}
  .brand{
    grid-column:1;
    grid-row:1;
    align-self:center
  }
  .language-switcher{
    grid-column:2;
    grid-row:1;
    width:118px;
    justify-self:end
  }
  .mirror-shortcuts{
    grid-column:1 / -1;
    grid-row:2
  }
  .topnav{
    grid-column:1 / -1;
    grid-row:3;
    width:100%
  }
  .language-current{width:100%}
  .language-menu{width:min(238px,calc(100vw - 40px))}

  .hero-main{
    align-items:center;
    text-align:center;
    padding-top:34px;
    padding-bottom:30px
  }
  .hero h1{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align:center
  }
  .hero-lead{
    margin-left:auto;
    margin-right:auto;
    text-align:center
  }
  .cta{margin-left:auto;margin-right:auto}

  .flow-diagram{padding:12px;gap:8px}
  .flow-node,
  .flow-node--client,
  .flow-node--deposit,
  .flow-node--reserve,
  .flow-node--destination{height:90px}
}

@media(max-width:560px){
  .flow-diagram{
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:9px;
    gap:7px
  }
  .flow-node,
  .flow-node--client,
  .flow-node--deposit,
  .flow-node--reserve,
  .flow-node--destination{
    min-width:0;
    height:88px
  }
  .flow-label{left:9px;top:9px;font-size:6.5px}
  .flow-value{left:9px;top:31px;font-size:15px}
  .flow-address{left:9px;bottom:9px;font-size:6.5px}
  .flow-reserve-bars{left:9px;right:9px;bottom:10px}
  .flow-done{right:7px;bottom:7px}
}

@media(max-width:390px){
  .frame{padding:7px 7px 13px}
  .machine{box-shadow:5px 5px 0 rgba(0,0,0,.30),2px 2px 0 rgba(240,167,45,.05),0 14px 34px rgba(0,0,0,.24)}
  .hero h1{font-size:12.8vw}
  .language-switcher{width:108px}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important
  }
}


/* TRACK ORDER MODAL */
.track-modal{
  position:fixed;
  inset:0;
  z-index:500;
  display:none
}
.track-modal.is-open{display:block}
.track-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(5,7,6,.78);
  backdrop-filter:blur(5px)
}
.track-modal-panel{
  position:absolute;
  left:50%;
  top:50%;
  width:min(620px,calc(100vw - 36px));
  transform:translate(-50%,-50%);
  border:1px solid var(--line);
  background:var(--panel);
  box-shadow:
    10px 10px 0 rgba(0,0,0,.35),
    0 28px 90px rgba(0,0,0,.55)
}
.track-modal-head{
  min-height:92px;
  padding:20px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid var(--line)
}
.track-modal-kicker{
  margin-bottom:8px;
  color:var(--amber);
  font:600 8px/1 var(--mono);
  letter-spacing:.13em
}
.track-modal-head h2{
  margin:0;
  font:800 38px/.9 var(--cond);
  text-transform:uppercase
}
.track-modal-close{
  width:42px;
  height:42px;
  border:1px solid var(--line);
  background:#111311;
  color:var(--text);
  cursor:pointer;
  font:400 24px/1 var(--sans)
}
.track-modal-form{
  padding:24px 22px 26px
}
.track-modal-form label{
  display:block;
  margin-bottom:9px;
  color:var(--muted);
  font:600 8px/1 var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase
}
.track-modal-form input{
  width:100%;
  height:54px;
  padding:0 15px;
  border:1px solid #5a6059;
  outline:0;
  background:#101310;
  color:var(--text);
  font:500 12px/1 var(--mono);
  transition:border-color .18s ease,box-shadow .18s ease
}
.track-modal-form input:focus{
  border-color:var(--amber);
  box-shadow:0 0 0 1px rgba(240,167,45,.18)
}
.track-modal-form button{
  width:100%;
  height:52px;
  margin-top:10px;
  border:0;
  background:var(--amber);
  color:#15120b;
  cursor:pointer;
  font:800 17px/1 var(--cond);
  letter-spacing:.07em;
  text-transform:uppercase
}
.track-modal-note{
  margin:13px 0 0;
  color:var(--muted);
  font:500 9px/1.5 var(--mono)
}
body.track-modal-open{overflow:hidden}

@media(max-width:560px){
  .track-modal-panel{
    width:calc(100vw - 22px)
  }
  .track-modal-head{
    min-height:80px;
    padding:17px
  }
  .track-modal-head h2{
    font-size:32px
  }
  .track-modal-form{
    padding:19px 17px 21px
  }
}


/* OPENMIX STATIC UTILITIES BEGIN */
.om-static-238415530f{--w:82%}
.om-static-86de7ac63a{margin-top:18px}
.om-static-b7f0c81e69{--w:61%}
.om-static-bb6a43fd28{position:absolute}
.om-static-fc94b5703a{--w:93%}
/* OPENMIX STATIC UTILITIES END */

/* OPENMIX — brand home link */
.brand-home{
  color:inherit;
  text-decoration:none;
}

.brand-home:visited{
  color:inherit;
}

.brand-home:hover,
.brand-home:focus-visible{
  color:inherit;
  text-decoration:none;
}



/* OPENMIX ENGLISH ONLY SUPPORT V2 */

.language-switcher{
  display:none!important;
}

.om-footer-system-links,
.om-footer-links{
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 14px;
}

.om-footer-system-links a,
.om-footer-links a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid currentColor;
  opacity:.78;
}

.om-footer-system-links a:hover,
.om-footer-system-links a:focus-visible,
.om-footer-links a:hover,
.om-footer-links a:focus-visible{
  opacity:1;
}

@media(max-width:780px){
  .topbar{
    grid-template-columns:1fr!important;
  }

  .brand{
    grid-column:1 / -1!important;
    grid-row:1!important;
    justify-self:center!important;
    text-align:center!important;
    font-size:31px!important;
  }

  .mirror-shortcuts{
    grid-column:1 / -1!important;
    grid-row:2!important;
  }

  .topnav{
    grid-column:1 / -1!important;
    grid-row:3!important;
  }

  .language-switcher{
    display:none!important;
  }
}

@media(max-width:390px){
  .brand{
    font-size:29px!important;
  }
}

/* OPENMIX LOCAL MEDIA / SEO MEDIA V1 */

.brand-home{
  display:inline-flex!important;
  align-items:center!important;
  gap:.22em!important;
}

.brand-word{
  display:inline-block;
}

.brand-motion{
  display:block;
  width:1em;
  height:1em;
  flex:0 0 1em;
  object-fit:cover;
  border:1px solid rgba(238,239,233,.18);
}

.om-gif-readout{
  position:relative;
  display:grid;
  place-items:center;
  min-height:100%;
  overflow:hidden;
  padding:0!important;
  background:#151816!important;
  cursor:default!important;
}

.om-gif-readout:before{
  display:none!important;
}

.om-readout-gif{
  display:block;
  width:100%;
  height:100%;
  min-height:100%;
  object-fit:cover;
}

@media(max-width:900px){
  .om-readout-gif{
    min-height:330px;
  }
}

@media(max-width:780px){
  .brand-home{
    justify-self:center!important;
  }

  .brand-motion{
    width:1em;
    height:1em;
  }
}

/* OPENMIX UI FIX 20260831-A */

/* Animated square belongs LEFT of the wordmark. */
.brand-home{
  display:inline-flex!important;
  align-items:center!important;
  gap:.22em!important;
}

.brand-motion{
  order:-1!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
}

/*
 * Four official routes do not fit the old three-item geometry.
 * Use a stable 2x2 matrix and allow the onion hostname to wrap.
 */
.mirrors .routes{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:stretch!important;
}

.mirrors .route{
  min-width:0!important;
  overflow:hidden!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}

@media(max-width:780px){
  /* Heavy readout animation is intentionally omitted on mobile. */
  .readout{
    display:none!important;
  }

  .mirrors{
    grid-template-columns:1fr!important;
  }

  .mirrors .routes{
    grid-template-columns:1fr!important;
  }
}

/* OPENMIX HOMEPAGE CORRECT FIX 20260831 */


/* =========================================================
   DESKTOP — PARAMS + PROCESS ROWS
   Same compact height: 112px
   ========================================================= */

@media(min-width:781px){

  .param{
    min-height:112px !important;
    padding:18px 24px !important;
  }

  .step{
    min-height:112px !important;
  }

}


/* =========================================================
   STEP NUMBER
   Same typography size as .step-title
   ========================================================= */

.step-no{
  font-size:25px !important;
  line-height:1 !important;
}

@media(
  min-width:781px
) and (
  max-width:1180px
){

  .step-no{
    font-size:23px !important;
  }

}

@media(max-width:780px){

  .step-no{
    font-size:23px !important;
  }

}


/* =========================================================
   MIRRORS — DESKTOP
   Keep original left title + four routes in ONE row.
   ========================================================= */

@media(min-width:781px){

  .mirrors{
    display:grid !important;
    grid-template-columns:300px minmax(0,1fr) !important;

    border-top:1px solid var(--line) !important;
    border-left:0 !important;
    border-right:0 !important;
    border-bottom:0 !important;

    overflow:visible !important;
  }

  .mirrors h2{
    min-height:118px !important;

    padding:24px 28px !important;

    border-right:1px solid var(--line) !important;
    border-bottom:0 !important;

    box-sizing:border-box !important;
  }

  .mirrors .routes{
    min-width:0 !important;

    display:grid !important;

    /* FOUR routes = FOUR columns */
    grid-template-columns:
      repeat(4,minmax(0,1fr)) !important;

    gap:0 !important;
  }

  .mirrors .route{
    min-width:0 !important;
    min-height:118px !important;

    margin:0 !important;

    padding:20px 18px !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;

    border:0 !important;
    border-right:1px solid var(--line) !important;
    border-bottom:0 !important;

    box-sizing:border-box !important;

    overflow:visible !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }

  .mirrors .route:last-child{
    border-right:0 !important;
  }

}


/* Slightly narrower desktop keeps the same 4-column geometry. */

@media(
  min-width:781px
) and (
  max-width:1180px
){

  .mirrors{
    grid-template-columns:245px minmax(0,1fr) !important;
  }

  .mirrors .route{
    padding-left:13px !important;
    padding-right:13px !important;
  }

}


/* =========================================================
   MIRRORS — MOBILE
   Original one-column structure with separators.
   ========================================================= */

@media(max-width:780px){

  .mirrors{
    grid-template-columns:1fr !important;

    border-top:1px solid var(--line) !important;
    border-left:0 !important;
    border-right:0 !important;
    border-bottom:0 !important;
  }

  .mirrors h2{
    border-right:0 !important;
    border-bottom:1px solid var(--line) !important;
  }

  .mirrors .routes{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:0 !important;
  }

  .mirrors .route{
    min-height:78px !important;

    border:0 !important;
    border-bottom:1px solid var(--line) !important;
  }

  .mirrors .route:last-child{
    border-bottom:0 !important;
  }

}


/* END OPENMIX HOMEPAGE CORRECT FIX 20260831 */


/* OPENMIX MOBILE FLOW EMBED HIDE 20260910 */
@media(max-width:780px){
  .flow-embed{
    display:none!important;
  }
}
/* END OPENMIX MOBILE FLOW EMBED HIDE 20260910 */