:root{
  --bg:#02070b;
  --panel:#07131d;
  --panel2:#091927;
  --text:#f3f7fb;
  --muted:#7891a3;
  --line:rgba(129,170,196,.15);
  --line2:rgba(129,170,196,.08);
  --gold:#f2c94c;
  --mint:#5af2c1;
  --cyan:#4fc4ea;
  --red:#ff6472;
}

*{
  box-sizing:border-box;
}

html{
  background:var(--bg);
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:
    radial-gradient(
      circle at 50% 10%,
      rgba(25,96,125,.12),
      transparent 38%
    ),
    #02070b;
  color:var(--text);
  font-family:
    Inter,
    Arial,
    sans-serif;
  overflow-x:hidden;
}

button,
a{
  font:inherit;
}

button{
  color:inherit;
}

a{
  color:inherit;
  text-decoration:none;
}


/* =========================================================
   INTRO CURTAIN
========================================================= */

.gallery-intro{
  position:fixed;
  inset:0;
  z-index:9999;
  overflow:hidden;
  background:#010407;
  display:grid;
  place-items:center;
  transition:
    opacity .7s ease,
    visibility .7s ease;
}

.gallery-intro.is-finished{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.intro-space{
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(50,180,220,.12),
      transparent 35%
    ),
    linear-gradient(
      rgba(255,255,255,.015) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.015) 1px,
      transparent 1px
    );
  background-size:
    auto,
    70px 70px,
    70px 70px;
}

.curtain{
  position:absolute;
  top:0;
  bottom:0;
  width:51%;
  z-index:4;
  background:
    radial-gradient(
      ellipse at center,
      rgba(35,100,127,.13),
      transparent 55%
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.025) 0,
      rgba(255,255,255,.005) 4%,
      rgba(0,0,0,.15) 9%
    ),
    linear-gradient(
      90deg,
      #020609,
      #061018 55%,
      #020609
    );
  box-shadow:
    inset 0 0 70px rgba(0,0,0,.72);
  transition:
    transform 1.8s
    cubic-bezier(.77,0,.18,1);
}

.curtain-left{
  left:0;
  transform-origin:left center;
}

.curtain-right{
  right:0;
  transform-origin:right center;
  background:
    radial-gradient(
      ellipse at center,
      rgba(35,100,127,.13),
      transparent 55%
    ),
    repeating-linear-gradient(
      -90deg,
      rgba(255,255,255,.025) 0,
      rgba(255,255,255,.005) 4%,
      rgba(0,0,0,.15) 9%
    ),
    linear-gradient(
      -90deg,
      #020609,
      #061018 55%,
      #020609
    );
}

.gallery-intro.is-opening
.curtain-left{
  transform:
    translateX(-102%)
    skewX(-3deg);
}

.gallery-intro.is-opening
.curtain-right{
  transform:
    translateX(102%)
    skewX(3deg);
}

.curtain-line{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  z-index:7;
  background:
    linear-gradient(
      transparent,
      rgba(90,242,193,.75),
      rgba(242,201,76,.7),
      transparent
    );
  box-shadow:
    0 0 30px rgba(90,242,193,.45);
  transition:
    opacity .5s ease,
    transform 1s ease;
}

.gallery-intro.is-opening
.curtain-line{
  opacity:0;
  transform:scaleY(.1);
}

.intro-copy{
  position:relative;
  z-index:10;
  width:min(760px,90vw);
  text-align:center;
  transition:
    opacity .5s ease,
    transform .5s ease;
}

.gallery-intro.is-opening
.intro-copy{
  opacity:0;
  transform:
    scale(.95)
    translateY(-15px);
}

.intro-eyebrow{
  display:block;
  margin-bottom:18px;
  color:#86a7ba;
  font-size:11px;
  font-weight:800;
  letter-spacing:.28em;
}

.intro-copy h1{
  margin:0;
  font-family:
    "Space Grotesk",
    sans-serif;
  font-size:
    clamp(
      50px,
      6.7vw,
      96px
    );
  line-height:.95;
  letter-spacing:-.055em;
}

.intro-copy h1 em{
  display:block;
  margin-top:8px;
  font-style:normal;
  background:
    linear-gradient(
      90deg,
      var(--gold),
      #e7e06d,
      var(--mint)
    );
  -webkit-background-clip:text;
  color:transparent;
}

.intro-copy p{
  margin:
    24px auto
    30px;
  color:#8198a9;
  font-size:15px;
}

.open-gallery{
  border:
    1px solid
    rgba(242,201,76,.45);
  background:
    rgba(9,20,29,.82);
  min-width:300px;
  height:66px;
  padding:8px 14px 8px 8px;
  border-radius:16px;
  display:inline-flex;
  align-items:center;
  gap:18px;
  cursor:pointer;
  box-shadow:
    0 20px 60px rgba(0,0,0,.4),
    inset 0 0 40px rgba(242,201,76,.03);
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.open-gallery:hover{
  transform:translateY(-3px);
  border-color:
    rgba(242,201,76,.8);
  box-shadow:
    0 25px 80px rgba(0,0,0,.55),
    0 0 30px rgba(242,201,76,.08);
}

.space-key{
  min-width:78px;
  height:48px;
  border:
    1px solid
    rgba(242,201,76,.48);
  border-radius:11px;
  display:grid;
  place-items:center;
  color:var(--gold);
  font-size:10px;
  font-weight:800;
}

.open-gallery strong{
  flex:1;
  text-align:left;
  font-size:12px;
  letter-spacing:.08em;
}

.open-gallery .arrow{
  color:var(--gold);
  font-size:20px;
}

.intro-copy small{
  display:block;
  margin-top:14px;
  color:#3f5666;
  font-size:9px;
  letter-spacing:.18em;
  text-transform:uppercase;
}


/* =========================================================
   NAV
========================================================= */

.gallery-page{
  min-height:100vh;
}

.gallery-nav{
  position:relative;
  z-index:40;
  width:min(
    1480px,
    calc(100% - 80px)
  );
  height:90px;
  margin:22px auto 0;
  padding:0 22px;
  border:
    1px solid
    rgba(132,170,195,.14);
  border-radius:22px;
  background:
    rgba(4,13,20,.78);
  backdrop-filter:
    blur(20px);
  display:grid;
  grid-template-columns:
    1fr auto 1fr;
  align-items:center;
}

.gallery-brand{
  display:flex;
  align-items:center;
  gap:14px;
}

.brand-icon{
  width:44px;
  height:44px;
  border-radius:12px;
  border:
    1px solid
    rgba(242,201,76,.38);
  display:grid;
  place-items:center;
  color:var(--gold);
  font-weight:800;
}

.gallery-brand strong{
  display:block;
  font-family:
    "Space Grotesk",
    sans-serif;
  font-size:19px;
}

.gallery-brand small{
  display:block;
  margin-top:2px;
  color:#4c6475;
  font-size:8px;
  letter-spacing:.15em;
}

.gallery-nav-center{
  color:#718b9d;
  font-size:9px;
  font-weight:800;
  letter-spacing:.22em;
}

.live-dot{
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  margin-right:8px;
  background:var(--mint);
  box-shadow:
    0 0 15px var(--mint);
}

.gallery-buy{
  justify-self:end;
  padding:13px 18px;
  border-radius:11px;
  border:
    1px solid
    rgba(242,201,76,.36);
  color:#eff4f7;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
}

.gallery-buy span{
  margin-left:15px;
  color:var(--gold);
}


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

.gallery-hero{
  width:min(
    1400px,
    calc(100% - 80px)
  );
  min-height:420px;
  margin:0 auto;
  padding:
    95px
    30px
    55px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:80px;
}

.hero-copy{
  max-width:820px;
}

.section-kicker{
  color:#7996a8;
  font-size:10px;
  font-weight:800;
  letter-spacing:.27em;
}

.hero-copy h2{
  margin:18px 0;
  font-family:
    "Space Grotesk",
    sans-serif;
  font-size:
    clamp(
      52px,
      6vw,
      91px
    );
  line-height:.95;
  letter-spacing:-.055em;
}

.hero-copy h2 span{
  display:block;
  background:
    linear-gradient(
      90deg,
      var(--gold),
      var(--mint)
    );
  -webkit-background-clip:text;
  color:transparent;
}

.hero-copy p{
  max-width:600px;
  color:#7890a1;
  font-size:15px;
  line-height:1.75;
}

.hero-product-button{
  width:330px;
  min-width:330px;
  height:92px;
  padding:14px;
  border-radius:20px;
  border:
    1px solid
    rgba(90,242,193,.22);
  background:
    linear-gradient(
      135deg,
      rgba(10,27,39,.92),
      rgba(5,17,27,.92)
    );
  display:flex;
  align-items:center;
  text-align:left;
  cursor:pointer;
  box-shadow:
    0 25px 80px rgba(0,0,0,.32);
  transition:
    transform .3s ease,
    border-color .3s ease;
}

.hero-product-button:hover{
  transform:
    translateY(-5px);
  border-color:
    rgba(90,242,193,.5);
}

.hero-product-icon{
  width:56px;
  height:56px;
  border-radius:14px;
  display:grid;
  place-items:center;
  margin-right:15px;
  background:
    rgba(90,242,193,.07);
  border:
    1px solid
    rgba(90,242,193,.18);
  color:var(--mint);
  font-size:27px;
}

.hero-product-button span:nth-child(2){
  flex:1;
}

.hero-product-button small{
  display:block;
  color:#658092;
  font-size:8px;
  font-weight:800;
  letter-spacing:.16em;
}

.hero-product-button strong{
  display:block;
  margin-top:6px;
  font-size:13px;
}

.hero-product-button b{
  color:var(--gold);
  font-size:20px;
}


/* =========================================================
   ROOM
========================================================= */

.terminal-gallery{
  position:relative;
  width:100%;
  min-height:1050px;
  overflow:hidden;
}

.gallery-room{
  position:relative;
  width:min(
    1600px,
    96vw
  );
  height:900px;
  margin:20px auto 0;
  perspective:1600px;
  overflow:hidden;
  border-radius:50px 50px 0 0;
  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(19,102,129,.18),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      #06121c,
      #02080d
    );
  border:
    1px solid
    rgba(124,169,197,.10);
}

.room-back-wall{
  position:absolute;
  left:18%;
  right:18%;
  top:4%;
  bottom:20%;
  background:
    linear-gradient(
      rgba(93,141,171,.04) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(93,141,171,.04) 1px,
      transparent 1px
    );
  background-size:
    72px 72px;
  border:
    1px solid
    rgba(126,168,195,.08);
}

.room-left-wall,
.room-right-wall{
  position:absolute;
  top:0;
  width:28%;
  height:80%;
  background:
    linear-gradient(
      180deg,
      rgba(10,27,38,.9),
      rgba(3,11,17,.8)
    );
}

.room-left-wall{
  left:-10%;
  transform:
    rotateY(65deg);
}

.room-right-wall{
  right:-10%;
  transform:
    rotateY(-65deg);
}

.room-floor{
  position:absolute;
  left:-5%;
  right:-5%;
  bottom:-30%;
  height:58%;
  transform:
    rotateX(68deg);
  transform-origin:center top;
  background:
    linear-gradient(
      rgba(80,141,169,.10) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(80,141,169,.10) 1px,
      transparent 1px
    );
  background-size:
    70px 70px;
  mask-image:
    linear-gradient(
      to bottom,
      #000,
      transparent
    );
}

.room-ceiling{
  position:absolute;
  left:18%;
  right:18%;
  top:0;
  height:2px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(90,242,193,.38),
      rgba(242,201,76,.32),
      transparent
    );
  box-shadow:
    0 0 40px rgba(90,242,193,.14);
}

.ambient{
  position:absolute;
  width:500px;
  height:500px;
  border-radius:50%;
  filter:blur(100px);
  opacity:.14;
}

.ambient-a{
  left:-150px;
  top:100px;
  background:#20a9db;
}

.ambient-b{
  right:-150px;
  bottom:50px;
  background:#53efc1;
}


/* =========================================================
   TERMINAL FRAMES
========================================================= */

.terminal-frame{
  position:absolute;
  border:none;
  padding:0;
  background:transparent;
  cursor:pointer;
  text-align:left;
  transform-style:preserve-3d;
  transition:
    transform .45s
      cubic-bezier(.2,.8,.2,1),
    filter .45s ease;
}

.terminal-frame:hover{
  z-index:20;
  filter:
    drop-shadow(
      0 30px 70px
      rgba(0,0,0,.6)
    );
}

.frame-main{
  width:620px;
  left:50%;
  top:145px;
  transform:
    translateX(-50%)
    translateZ(50px);
}

.frame-main:hover{
  transform:
    translateX(-50%)
    translateZ(80px)
    scale(1.025);
}

.frame-left{
  width:390px;
  left:6%;
  top:350px;
  transform:
    rotateY(14deg)
    rotateZ(-1deg);
}

.frame-left:hover{
  transform:
    rotateY(6deg)
    translateZ(40px)
    scale(1.03);
}

.frame-right{
  width:390px;
  right:6%;
  top:330px;
  transform:
    rotateY(-14deg)
    rotateZ(1deg);
}

.frame-right:hover{
  transform:
    rotateY(-6deg)
    translateZ(40px)
    scale(1.03);
}

.frame-far-left{
  width:300px;
  left:18%;
  top:650px;
  transform:
    rotateY(8deg)
    scale(.88);
}

.frame-far-right{
  width:300px;
  right:18%;
  top:645px;
  transform:
    rotateY(-8deg)
    scale(.88);
}

.frame-screen{
  position:relative;
  padding:11px;
  border-radius:19px;
  background:
    linear-gradient(
      145deg,
      #bbc2c6,
      #5c666d 40%,
      #dce1e3 75%,
      #636d73
    );
  box-shadow:
    0 30px 70px rgba(0,0,0,.55),
    inset 0 1px 1px rgba(255,255,255,.75);
}

.frame-screen::after{
  content:"";
  position:absolute;
  inset:11px;
  border-radius:11px;
  pointer-events:none;
  box-shadow:
    inset 0 0 35px
    rgba(79,196,234,.08);
}

.mini-terminal{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:11px;
  border:
    1px solid
    rgba(105,159,190,.2);
  background:
    #06131e;
  padding:22px;
}

.mini-terminal.compact{
  padding:18px;
}

.mini-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#dce8ef;
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
}

.mini-topbar b{
  color:var(--mint);
  font-size:7px;
}

.mini-market{
  margin-top:20px;
}

.mini-market small{
  display:block;
  color:#567184;
  font-size:7px;
  font-weight:700;
}

.mini-market strong{
  display:block;
  margin-top:4px;
  font-size:10px;
}

.mini-market b{
  display:inline-block;
  margin-top:4px;
  font-size:21px;
}

.mini-market em{
  margin-left:8px;
  color:var(--mint);
  font-style:normal;
  font-size:8px;
  font-weight:800;
}

.mini-chart{
  position:absolute;
  left:24px;
  right:24px;
  bottom:48px;
  width:calc(100% - 48px);
  height:42%;
}

.mini-bottom{
  position:absolute;
  left:22px;
  right:22px;
  bottom:15px;
  display:grid;
  grid-template-columns:
    repeat(3,1fr);
  gap:8px;
}

.mini-bottom span{
  color:#547084;
  font-size:6px;
}

.mini-bottom b{
  display:block;
  margin-top:3px;
  color:var(--mint);
  font-size:7px;
}

.risk-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:
    1fr 1fr;
  gap:9px;
}

.risk-grid span{
  min-height:52px;
  padding:10px;
  border:
    1px solid
    rgba(111,156,184,.12);
  border-radius:10px;
  color:#587286;
  font-size:7px;
}

.risk-grid b{
  display:block;
  margin-top:8px;
  color:var(--mint);
  font-size:9px;
}

.coin-list{
  margin-top:14px;
}

.coin-list span{
  min-height:32px;
  border-bottom:
    1px solid
    rgba(110,150,178,.09);
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#647f92;
  font-size:7px;
}

.coin-list b{
  color:#edf5fa;
  font-size:8px;
}

.decision-lines{
  margin-top:22px;
}

.decision-lines span{
  display:block;
  width:100%;
  height:12px;
  margin-bottom:10px;
  border-radius:6px;
  background:
    linear-gradient(
      90deg,
      rgba(90,242,193,.18),
      rgba(79,196,234,.04)
    );
}

.decision-lines span:nth-child(2){
  width:77%;
}

.decision-lines span:nth-child(3){
  width:91%;
}

.decision-lines span:nth-child(4){
  width:63%;
}

.decision-lines span:nth-child(5){
  width:82%;
}

.frame-number{
  position:absolute;
  left:-12px;
  top:-12px;
  z-index:5;
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#07141e;
  border:
    1px solid
    rgba(242,201,76,.34);
  color:var(--gold);
  font-size:9px;
  font-weight:800;
}

.frame-caption{
  padding:12px 5px 0;
  display:block;
}

.frame-caption span{
  display:block;
  color:#547084;
  font-size:7px;
  font-weight:800;
  letter-spacing:.14em;
}

.frame-caption b{
  display:block;
  margin-top:4px;
  color:#cfdae1;
  font-size:10px;
}

.expand-icon{
  position:absolute;
  right:18px;
  bottom:10px;
  color:#6d899b;
  font-size:14px;
}


/* =========================================================
   FLOATING CRYPTO
========================================================= */

.crypto-float{
  position:absolute;
  z-index:15;
  width:66px;
  height:66px;
  border-radius:50%;
  border:
    1px solid
    rgba(135,177,202,.16);
  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255,255,255,.12),
      rgba(10,26,37,.78) 55%,
      rgba(3,10,16,.9)
    );
  display:grid;
  place-items:center;
  box-shadow:
    0 20px 55px
    rgba(0,0,0,.4);
  backdrop-filter:
    blur(12px);
  animation:
    floatCoin 7s
    ease-in-out infinite;
}

.crypto-float span{
  color:#dce8ee;
  font-family:
    "Space Grotesk",
    sans-serif;
  font-size:20px;
  font-weight:700;
}

.crypto-float.btc{
  left:12%;
  top:125px;
  border-color:
    rgba(242,201,76,.26);
}

.crypto-float.btc span{
  color:var(--gold);
  font-size:28px;
}

.crypto-float.eth{
  right:15%;
  top:120px;
  animation-delay:-2s;
}

.crypto-float.sol{
  right:3%;
  top:560px;
  width:76px;
  height:76px;
  animation-delay:-4s;
}

.crypto-float.sol span{
  font-size:14px;
  color:var(--mint);
}

.crypto-float.pepe{
  left:4%;
  top:600px;
  width:74px;
  height:74px;
  animation-delay:-1.5s;
}

.crypto-float.pepe span{
  color:#8bea82;
  font-size:12px;
}

.crypto-float.doge{
  left:31%;
  top:92px;
  width:48px;
  height:48px;
  animation-delay:-3.2s;
}

.crypto-float.doge span{
  color:#d9c06b;
}

.crypto-float.usdt{
  right:31%;
  top:85px;
  width:48px;
  height:48px;
  animation-delay:-5s;
}

.crypto-float.usdt span{
  color:#56e6b5;
}

@keyframes floatCoin{
  0%,100%{
    transform:
      translate3d(
        0,
        0,
        0
      )
      rotate(-3deg);
  }

  50%{
    transform:
      translate3d(
        0,
        -24px,
        0
      )
      rotate(4deg);
  }
}


/* =========================================================
   CENTER
========================================================= */

.gallery-center{
  position:absolute;
  left:50%;
  bottom:30px;
  width:530px;
  height:80px;
  transform:
    translateX(-50%);
  border-radius:18px;
  border:
    1px solid
    rgba(242,201,76,.18);
  background:
    rgba(5,14,22,.90);
  display:grid;
  grid-template-columns:
    1.2fr 1fr 1fr;
  align-items:center;
  padding:0 24px;
  box-shadow:
    0 20px 60px
    rgba(0,0,0,.45);
}

.gallery-center span,
.gallery-center b{
  color:#60798b;
  font-size:8px;
  letter-spacing:.07em;
}

.gallery-center strong{
  font-size:11px;
}

.gallery-hint{
  margin:30px auto 0;
  width:max-content;
  padding:12px 18px;
  border-radius:30px;
  color:#597385;
  font-size:9px;
  font-weight:700;
  letter-spacing:.1em;
  background:
    rgba(6,16,24,.65);
  border:
    1px solid
    rgba(119,157,181,.10);
}

.mouse-icon{
  margin-right:8px;
  color:var(--mint);
}


/* =========================================================
   CTA
========================================================= */

.inside-cta{
  width:min(
    1280px,
    calc(100% - 80px)
  );
  margin:
    80px auto
    150px;
  padding:
    85px 70px;
  border-radius:32px;
  text-align:center;
  border:
    1px solid
    rgba(125,168,195,.13);
  background:
    radial-gradient(
      circle at 50% 0,
      rgba(65,188,215,.10),
      transparent 45%
    ),
    rgba(5,14,21,.72);
}

.inside-cta > span{
  color:#668295;
  font-size:9px;
  font-weight:800;
  letter-spacing:.22em;
}

.inside-cta h2{
  margin:18px 0;
  font-family:
    "Space Grotesk",
    sans-serif;
  font-size:
    clamp(
      45px,
      5vw,
      72px
    );
  letter-spacing:-.05em;
}

.inside-cta h2 em{
  font-style:normal;
  color:var(--mint);
}

.inside-cta p{
  max-width:650px;
  margin:0 auto;
  color:#748c9d;
  line-height:1.75;
}

.inside-cta-actions{
  margin-top:35px;
  display:flex;
  justify-content:center;
  gap:12px;
}

.cta-secondary,
.cta-primary{
  min-height:54px;
  padding:0 22px;
  border-radius:13px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.07em;
  cursor:pointer;
}

.cta-secondary{
  border:
    1px solid
    rgba(131,169,194,.18);
  color:#dce7ed;
  background:
    rgba(7,19,29,.8);
}

.cta-primary{
  display:inline-flex;
  align-items:center;
  gap:30px;
  border:
    1px solid
    rgba(242,201,76,.4);
  background:
    linear-gradient(
      135deg,
      rgba(242,201,76,.14),
      rgba(7,20,29,.9)
    );
}


/* =========================================================
   FULLSCREEN VIEWER
========================================================= */

.screen-viewer{
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  visibility:hidden;
  pointer-events:none;
}

.screen-viewer.is-open{
  visibility:visible;
  pointer-events:auto;
}

.viewer-backdrop{
  position:absolute;
  inset:0;
  background:
    rgba(0,4,7,.88);
  backdrop-filter:
    blur(18px);
  opacity:0;
  transition:
    opacity .45s ease;
}

.screen-viewer.is-open
.viewer-backdrop{
  opacity:1;
}

.viewer-shell{
  position:relative;
  width:min(
    1500px,
    94vw
  );
  height:min(
    880px,
    88vh
  );
  display:grid;
  grid-template-rows:
    72px
    1fr
    65px;
  border:
    1px solid
    rgba(131,174,200,.18);
  border-radius:26px;
  overflow:hidden;
  background:#05101a;
  box-shadow:
    0 40px 140px
    rgba(0,0,0,.8);
  opacity:0;
  transform:
    scale(.76)
    translateY(40px);
  transition:
    opacity .5s ease,
    transform .55s
    cubic-bezier(.2,.8,.2,1);
}

.screen-viewer.is-open
.viewer-shell{
  opacity:1;
  transform:
    scale(1)
    translateY(0);
}

.viewer-topbar{
  padding:0 25px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:
    1px solid
    rgba(128,168,193,.10);
}

.viewer-topbar span{
  display:block;
  color:#607a8d;
  font-size:8px;
  letter-spacing:.15em;
}

.viewer-topbar strong{
  display:block;
  margin-top:4px;
  font-size:12px;
}

.viewer-topbar button{
  width:42px;
  height:42px;
  border-radius:50%;
  border:
    1px solid
    rgba(124,161,184,.16);
  background:
    rgba(9,23,34,.8);
  color:#b8c7d0;
  font-size:24px;
  cursor:pointer;
}

.viewer-content{
  min-height:0;
  padding:28px;
  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(25,128,159,.12),
      transparent 45%
    ),
    #030b12;
}

.viewer-content
.mini-terminal{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  border-radius:18px;
  padding:50px;
}

.viewer-content
.mini-topbar{
  font-size:16px;
}

.viewer-content
.mini-topbar b{
  font-size:12px;
}

.viewer-content
.mini-market small{
  font-size:11px;
}

.viewer-content
.mini-market strong{
  font-size:18px;
}

.viewer-content
.mini-market b{
  font-size:48px;
}

.viewer-content
.mini-market em{
  font-size:13px;
}

.viewer-content
.mini-chart{
  left:50px;
  right:50px;
  bottom:100px;
  width:calc(100% - 100px);
  height:48%;
}

.viewer-content
.mini-bottom{
  left:50px;
  right:50px;
  bottom:35px;
}

.viewer-content
.mini-bottom span{
  font-size:10px;
}

.viewer-content
.mini-bottom b{
  font-size:12px;
}

.viewer-content
.risk-grid{
  margin-top:70px;
  grid-template-columns:
    repeat(2,1fr);
  gap:22px;
}

.viewer-content
.risk-grid span{
  min-height:140px;
  padding:30px;
  font-size:12px;
}

.viewer-content
.risk-grid b{
  margin-top:20px;
  font-size:24px;
}

.viewer-content
.coin-list{
  margin-top:35px;
}

.viewer-content
.coin-list span{
  height:95px;
  font-size:15px;
}

.viewer-content
.coin-list b{
  font-size:24px;
}

.viewer-content
.decision-lines{
  margin-top:75px;
}

.viewer-content
.decision-lines span{
  height:36px;
  margin-bottom:28px;
}

.viewer-footer{
  padding:0 25px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:
    1px solid
    rgba(128,168,193,.10);
}

.viewer-footer button{
  border:none;
  background:none;
  color:#8aa0ae;
  font-size:9px;
  font-weight:800;
  letter-spacing:.1em;
  cursor:pointer;
}

.viewer-footer span{
  color:#435c6c;
  font-size:8px;
  letter-spacing:.12em;
}


/* =========================================================
   MAIN SITE BUTTON
========================================================= */

.inside-launcher{
  position:fixed;
  right:26px;
  top:50%;
  z-index:500;
  transform:
    translateY(-50%);
  min-height:48px;
  padding:0 17px;
  border-radius:14px;
  border:
    1px solid
    rgba(90,242,193,.25);
  background:
    rgba(5,17,26,.88);
  backdrop-filter:
    blur(14px);
  box-shadow:
    0 15px 45px
    rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  gap:12px;
  color:#dfe9ee;
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
}

.inside-launcher::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--mint);
  box-shadow:
    0 0 14px var(--mint);
}

.inside-launcher b{
  color:var(--gold);
}

body:has(#qantova-intro)
.inside-launcher{
  opacity:0;
  pointer-events:none;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1100px){

  .gallery-nav{
    width:calc(100% - 30px);
  }

  .gallery-nav-center{
    display:none;
  }

  .gallery-nav{
    grid-template-columns:
      1fr 1fr;
  }

  .gallery-hero{
    width:calc(100% - 30px);
    flex-direction:column;
    align-items:flex-start;
    gap:30px;
  }

  .terminal-gallery{
    min-height:auto;
  }

  .gallery-room{
    width:calc(100% - 20px);
    height:auto;
    min-height:1400px;
    padding:70px 20px;
    display:flex;
    flex-direction:column;
    gap:35px;
  }

  .room-back-wall,
  .room-left-wall,
  .room-right-wall,
  .room-floor{
    display:none;
  }

  .terminal-frame,
  .frame-main,
  .frame-left,
  .frame-right,
  .frame-far-left,
  .frame-far-right{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    width:min(700px,100%);
    margin:0 auto;
    transform:none !important;
  }

  .crypto-float{
    opacity:.4;
  }

  .gallery-center{
    position:relative;
    left:auto;
    bottom:auto;
    transform:none;
    width:min(530px,100%);
    margin:30px auto 0;
  }

  .inside-cta{
    width:calc(100% - 30px);
    padding:60px 25px;
  }

}

@media(max-width:700px){

  .gallery-nav{
    height:72px;
    margin-top:10px;
  }

  .gallery-buy{
    padding:10px;
    font-size:8px;
  }

  .gallery-brand small{
    display:none;
  }

  .gallery-hero{
    padding:
      70px
      10px
      40px;
  }

  .hero-product-button{
    width:100%;
    min-width:0;
  }

  .gallery-room{
    border-radius:25px 25px 0 0;
  }

  .crypto-float{
    display:none;
  }

  .gallery-center{
    grid-template-columns:1fr;
    height:auto;
    gap:8px;
    padding:20px;
  }

  .inside-cta-actions{
    flex-direction:column;
  }

  .inside-launcher{
    right:14px;
    top:auto;
    bottom:20px;
  }

}


/* =========================================================
   GALLERY CLEAN HERO V2
   Only changes /inside.html
========================================================= */


/* ---------------------------------------------------------
   HERO — SMALL, CENTERED, ONE LINE
--------------------------------------------------------- */

.gallery-hero{
  width:min(
    1500px,
    calc(100% - 50px)
  ) !important;

  min-height:0 !important;

  margin:0 auto !important;

  padding:
    62px
    20px
    34px !important;

  display:block !important;

  text-align:center !important;
}


.hero-copy{
  width:100% !important;

  max-width:none !important;

  margin:0 auto !important;

  text-align:center !important;
}


/*
 * Remove little label above headline.
 */

.section-kicker{
  display:none !important;
}


/*
 * One clean line.
 */

.hero-copy h2{
  margin:0 !important;

  font-family:
    "Space Grotesk",
    sans-serif !important;

  font-size:
    clamp(
      34px,
      4.1vw,
      67px
    ) !important;

  line-height:1 !important;

  letter-spacing:
    -.045em !important;

  white-space:
    nowrap !important;
}


.hero-copy h2 span{
  display:inline !important;

  margin-left:.16em !important;

  background:
    linear-gradient(
      90deg,
      #f2c94c 0%,
      #dcdc69 45%,
      #67efb9 100%
    ) !important;

  -webkit-background-clip:
    text !important;

  background-clip:
    text !important;

  color:
    transparent !important;
}


/*
 * Remove description underneath.
 */

.hero-copy p{
  display:none !important;
}


/*
 * Remove button on the right.
 */

.hero-product-button{
  display:none !important;
}



/* ---------------------------------------------------------
   GALLERY STARTS IMMEDIATELY
--------------------------------------------------------- */

.terminal-gallery{
  min-height:
    930px !important;

  margin-top:
    0 !important;
}


.gallery-room{
  margin:
    0 auto !important;

  height:
    870px !important;

  border-radius:
    38px
    38px
    0
    0 !important;

  background:
    radial-gradient(
      circle at 50% 18%,
      rgba(50,178,213,.12),
      transparent 33%
    ),
    radial-gradient(
      circle at 50% 75%,
      rgba(44,129,150,.07),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      #06121c 0%,
      #030b11 65%,
      #02070b 100%
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.025) !important;
}


/*
 * Bring main terminal upward.
 */

.frame-main{
  top:
    78px !important;
}


/*
 * Side terminals follow main terminal.
 */

.frame-left{
  top:
    300px !important;
}


.frame-right{
  top:
    285px !important;
}


.frame-far-left{
  top:
    600px !important;
}


.frame-far-right{
  top:
    595px !important;
}



/* ---------------------------------------------------------
   REMOVE UNNECESSARY BOTTOM UI
--------------------------------------------------------- */

.gallery-hint{
  display:none !important;
}


.gallery-center{
  display:none !important;
}



/* =========================================================
   PREMIUM FLOATING CRYPTO OBJECTS
========================================================= */

.crypto-float{

  --coin-size:
    58px;

  position:absolute !important;

  z-index:
    16 !important;

  width:
    var(--coin-size) !important;

  height:
    var(--coin-size) !important;

  border-radius:
    50% !important;

  border:
    1px solid
    rgba(161,202,225,.20) !important;

  background:

    radial-gradient(
      circle at 32% 24%,
      rgba(255,255,255,.19),
      transparent 20%
    ),

    radial-gradient(
      circle at 50% 70%,
      rgba(81,224,211,.07),
      transparent 55%
    ),

    linear-gradient(
      145deg,
      rgba(13,34,47,.88),
      rgba(3,12,19,.94)
    ) !important;

  box-shadow:

    inset
    0
    1px
    1px
    rgba(255,255,255,.15),

    inset
    0
    -10px
    30px
    rgba(0,0,0,.35),

    0
    20px
    55px
    rgba(0,0,0,.46),

    0
    0
    35px
    rgba(80,196,218,.07) !important;

  display:grid !important;

  place-items:center !important;

  backdrop-filter:
    blur(13px) !important;

  -webkit-backdrop-filter:
    blur(13px) !important;

  pointer-events:
    none !important;

  will-change:
    transform !important;

  animation:
    qantovaCoinFloat
    8s
    cubic-bezier(.45,0,.55,1)
    infinite !important;
}


/*
 * Outer orbital ring
 */

.crypto-float::before{
  content:"";

  position:absolute;

  inset:-9px;

  border-radius:50%;

  border:
    1px solid
    rgba(118,187,215,.11);

  box-shadow:
    0 0 20px
    rgba(87,205,225,.04);

  transform:
    rotateX(62deg)
    rotateZ(18deg);
}


/*
 * Moving specular highlight
 */

.crypto-float::after{
  content:"";

  position:absolute;

  width:38%;

  height:18%;

  left:20%;

  top:15%;

  border-radius:50%;

  background:
    rgba(255,255,255,.13);

  filter:
    blur(5px);

  transform:
    rotate(-28deg);
}


.crypto-float span{
  position:relative;

  z-index:2;

  font-family:
    "Space Grotesk",
    sans-serif !important;

  font-size:
    16px !important;

  font-weight:
    700 !important;

  letter-spacing:
    -.04em;

  color:
    #dce9f0 !important;

  text-shadow:
    0 0 16px
    rgba(160,218,235,.25);
}



/* ---------------------------------------------------------
   BTC
--------------------------------------------------------- */

.crypto-float.btc{

  --coin-size:
    67px;

  left:
    10% !important;

  top:
    150px !important;

  border-color:
    rgba(242,201,76,.28) !important;

  box-shadow:

    inset
    0 1px 1px
    rgba(255,255,255,.14),

    0
    22px
    60px
    rgba(0,0,0,.48),

    0
    0
    45px
    rgba(242,201,76,.10) !important;

  animation-duration:
    8.8s !important;
}


.crypto-float.btc span{
  color:
    #f2c94c !important;

  font-size:
    28px !important;
}



/* ---------------------------------------------------------
   ETH
--------------------------------------------------------- */

.crypto-float.eth{

  --coin-size:
    54px;

  right:
    12% !important;

  top:
    135px !important;

  animation-duration:
    9.6s !important;

  animation-delay:
    -3s !important;
}


.crypto-float.eth span{
  color:
    #c5d5ff !important;

  font-size:
    25px !important;
}



/* ---------------------------------------------------------
   SOL
--------------------------------------------------------- */

.crypto-float.sol{

  --coin-size:
    70px;

  right:
    5% !important;

  top:
    535px !important;

  border-color:
    rgba(90,242,193,.22) !important;

  animation-duration:
    10.4s !important;

  animation-delay:
    -5.2s !important;
}


.crypto-float.sol span{

  font-size:
    13px !important;

  letter-spacing:
    .03em !important;

  background:
    linear-gradient(
      120deg,
      #9d7cff,
      #59efd0
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

  color:
    transparent !important;
}



/* ---------------------------------------------------------
   PEPE
--------------------------------------------------------- */

.crypto-float.pepe{

  --coin-size:
    60px;

  left:
    4% !important;

  top:
    545px !important;

  border-color:
    rgba(132,238,137,.18) !important;

  animation-duration:
    9.1s !important;

  animation-delay:
    -2.2s !important;
}


.crypto-float.pepe span{

  color:
    #87ed8b !important;

  font-size:
    10px !important;

  letter-spacing:
    .06em !important;
}



/* ---------------------------------------------------------
   DOGE
--------------------------------------------------------- */

.crypto-float.doge{

  --coin-size:
    43px;

  left:
    29% !important;

  top:
    80px !important;

  animation-duration:
    7.8s !important;

  animation-delay:
    -4s !important;
}


.crypto-float.doge span{

  color:
    #dbc66e !important;

  font-size:
    19px !important;
}



/* ---------------------------------------------------------
   USDT
--------------------------------------------------------- */

.crypto-float.usdt{

  --coin-size:
    45px;

  right:
    29% !important;

  top:
    76px !important;

  animation-duration:
    8.5s !important;

  animation-delay:
    -6s !important;
}


.crypto-float.usdt span{

  color:
    #62e5ba !important;

  font-size:
    19px !important;
}



/* ---------------------------------------------------------
   BETTER MOVEMENT

   Not just up/down.
   Each coin moves in a soft arc.
--------------------------------------------------------- */

@keyframes qantovaCoinFloat{

  0%{

    transform:
      translate3d(
        0,
        0,
        0
      )
      rotate(-4deg)
      scale(1);

  }


  22%{

    transform:
      translate3d(
        11px,
        -12px,
        0
      )
      rotate(1deg)
      scale(1.025);

  }


  48%{

    transform:
      translate3d(
        -4px,
        -27px,
        0
      )
      rotate(5deg)
      scale(1);

  }


  72%{

    transform:
      translate3d(
        -13px,
        -10px,
        0
      )
      rotate(1deg)
      scale(.985);

  }


  100%{

    transform:
      translate3d(
        0,
        0,
        0
      )
      rotate(-4deg)
      scale(1);

  }

}



/* =========================================================
   CLEAN MAIN TERMINAL PRESENCE
========================================================= */

.frame-main .frame-screen{

  box-shadow:

    0
    38px
    100px
    rgba(0,0,0,.62),

    0
    0
    70px
    rgba(75,190,215,.055),

    inset
    0
    1px
    1px
    rgba(255,255,255,.7) !important;
}


.frame-main::before{

  content:"";

  position:absolute;

  left:8%;

  right:8%;

  bottom:-25px;

  height:30px;

  border-radius:50%;

  background:
    rgba(26,151,181,.14);

  filter:
    blur(26px);

  pointer-events:none;
}



/* =========================================================
   MOBILE
========================================================= */

@media(max-width:1000px){

  .gallery-hero{
    padding:
      45px
      15px
      25px !important;
  }


  .hero-copy h2{

    white-space:
      normal !important;

    font-size:
      clamp(
        38px,
        8vw,
        64px
      ) !important;

  }


  .hero-copy h2 span{

    display:block !important;

    margin:
      6px
      0
      0 !important;

  }


  .gallery-room{

    height:auto !important;

  }

}


/* GALLERY CLEAN HERO V2 END */

/* QANTOVA-OFFICIAL-LOGO-START */

.qantova-brand-image{
  display:block;
  width:78%;
  height:78%;
  margin:auto;
  object-fit:contain;
  object-position:center;
}

.brand-icon .qantova-brand-image{
  width:80%;
  height:80%;
}

/* QANTOVA-OFFICIAL-LOGO-END */


/* QANTOVA-REAL-LOGO-V2 */

.qantova-brand-image{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  padding:4px !important;
  margin:0 !important;
  object-fit:contain !important;
  object-position:center !important;
  opacity:1 !important;
  visibility:visible !important;
}

.brand-icon .qantova-brand-image{
  width:100% !important;
  height:100% !important;
  padding:3px !important;
}

/* QANTOVA-REAL-LOGO-V2-END */