:root{
  /* One knob to move the carousel */
  --carousel-y: 60px;

  /* Card size */
  --card-w: 740px;
  --card-h: 550px;

  /* Theme */
  --bg-1:#0b1110; --bg-2:#0d1714;
  --stroke:rgba(90,210,170,.45);
  --mint:#bfffe8;
  --txt:#eaf7f1;

  /* Glass */
  --glass-tint: 16,24,20;
  --glass-alpha: .52;
  --glass-blur: 12px;
  --glass-sat:  1.35;
  --glass-edge: rgba(120,255,210,.38);
  --glass-glow: 0 24px 80px rgba(120,255,210,.12), 0 6px 24px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--txt);
  font:16px/1.45 ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial;
  background:linear-gradient(180deg,var(--bg-2),var(--bg-1) 50%);
  overflow-x:hidden;
}

/* Background layers */
.bg{position:fixed; inset:0; z-index:-2; overflow:hidden}
.bg__video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.05) brightness(.94)}
.bg__webgl,.bg__wires{position:absolute; inset:0; width:100%; height:100%; display:block}
.bg__overlay{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70vh 60vh at 30% 15%, #1a4e3a55, transparent 65%),
    radial-gradient(85vh 80vh at 80% 25%, #1655424d, transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.4) 70%, rgba(0,0,0,.6));
}
.highlight {
  color: #11C14A; /* neon lime green */
}

/* Keep content above canvases */
main{ position:relative; z-index:1; }

/* Social icons */
.icons{position:fixed; top:18px; right:18px; display:flex; gap:8px; z-index:10}
.icon{--size:38px; width:var(--size); height:var(--size); display:grid; place-items:center; border-radius:12px; background:rgba(10,16,14,.92); border:1px solid var(--stroke)}
.icon img{width:60%; height:60%; object-fit:contain}

/* Carousel vertical offset */
.carousel{
  position:relative;
  transform: translateY(var(--carousel-y));
  transition: transform .3s ease;
  will-change: transform;
}

/* Track + card layout */
.track{
  list-style:none; margin:0; padding:0;
  height: calc(var(--card-h) + 180px);
  position:relative; perspective:1800px;
}

/* Glass card */
.card{
  position:absolute; top:60px; left:50%;
  width: var(--card-w); height: var(--card-h);
  transform-style:preserve-3d; border-radius:18px; overflow:hidden;
  background: linear-gradient(180deg, rgba(var(--glass-tint), calc(var(--glass-alpha) + .06)) 0%, rgba(var(--glass-tint), calc(var(--glass-alpha) - .06)) 100%);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.25), var(--glass-glow);
  transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .4s;
}
.card__link{display:block; width:100%; height:100%; color:inherit; text-decoration:none}
.card__head{position:absolute; left:16px; top:12px; padding:6px 12px; border-radius:12px; background:rgba(16,24,20,.92); border:1px solid var(--stroke); color:var(--mint); font-size:14px}

/* new wrapper to position both side-by-side */
.card__headrow{
  position:absolute;
  top:12px;
  left:16px;
  right:16px;                 /* span to the right edge */
  display:flex;
  align-items:center;
  justify-content:space-between; /* pushes icon to right end */
}

.card__headrow .card__head{ position:static; }
.card__icon{ display:inline-flex;     padding: 0px;
    color: lightseagreen;
    background: none;
    margin: 0px; }



.card__preview{position:absolute; inset:56px 16px 14px 16px}
.card__preview > img{width:100%; height:100%; object-fit:contain; display:block; border-radius:10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06)}

.card__arrow{position:absolute; right:16px; bottom:16px; width:42px; height:30px; border-radius:12px; background:rgba(16,24,20,.92); border:1px solid var(--stroke)}
.card__arrow::before{content:""; position:absolute; inset:0; margin:auto; width:12px; height:12px; border-top:2px solid var(--mint); border-right:2px solid var(--mint); transform:rotate(45deg)}

/* Nav */
.nav{position:absolute; top:50%; transform:translateY(-50%); width:64px; height:64px; border-radius:50%; border:1px solid var(--stroke); background:rgba(10,16,14,.88); cursor:pointer; z-index:3}
.nav--prev{left:16px} .nav--next{right:16px}
.nav span{position:absolute; inset:0; margin:auto; width:12px; height:12px; border-top:2px solid var(--mint); border-right:2px solid var(--mint)}
.nav--prev span{transform:rotate(-135deg)} .nav--next span{transform:rotate(45deg)}

/* Dots */
.dots{display:flex; justify-content:center; gap:12px; margin-top:28px}
.dots button{width:16px; height:10px; border-radius:999px; background:rgba(16,24,20,.92); border:1px solid var(--stroke); cursor:pointer}
.dots button[aria-selected="true"]{background:linear-gradient(90deg,#6bffb8,#90ffe0); border-color:rgba(170,255,230,.9)}

/* Responsive */
@media (max-width: 980px){
  :root{ --card-w: 84vw; --card-h: 52vw; }
  .track{ height: calc(var(--card-h) + 18vw); }
}
/* ========== WELCOME CARD (terminal/cyber look) ========== */
.card--welcome{
  display:grid; place-items:center;
  background: radial-gradient(120% 90% at 20% 10%, rgba(0,255,160,.12), rgba(0,0,0,0) 55%),
              linear-gradient(180deg, rgba(10,20,16,.85), rgba(10,16,14,.75));
}

.card--welcome .card__content{
  position:relative;
  width:min(92%, 780px);
  padding: clamp(18px, 3vw, 28px);
  border-radius: 14px;
  border: 1px solid rgba(120,255,210,.35);
  background: linear-gradient(180deg, rgba(16,24,20,.65), rgba(8,12,10,.55));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 24px 80px rgba(120,255,210,.10);
  backdrop-filter: blur(10px) saturate(1.25);
  -webkit-backdrop-filter: blur(10px) saturate(1.25);
  overflow:hidden;
}

/* Title line */
.wel__title{
  font-family: "Share Tech Mono", ui-monospace, Menlo, Consolas, monospace;
  color:#8effd9;
  letter-spacing:.6em;
  font-size: clamp(18px, 1.8vw, 18px);
  padding: 6px 10px;
  border:1px solid rgba(120,255,210,.35);
  border-radius:10px;
  width:max-content;
  background: rgba(8,14,12,.85);
  margin-bottom: clamp(14px, 2vw, 18px);
  position:relative;
  overflow:hidden;
}

/* Body text */
.wel__body{
  font-family: "Share Tech Mono", ui-monospace, Menlo, Consolas, monospace;
  color:#e9fff6;
  font-size: clamp(18px, 2.8vw, 24px);
  line-height:1.35;
  text-shadow: 0 0 10px rgba(0,255,160,.15);
}
.wel__body .accent{ color:#9bffe2; text-shadow:0 0 18px rgba(120,255,210,.35); }

/* Blinking terminal cursor */
.cursor{
  display:inline-block;
  margin-left: .2em;
  color:#9bffe2;
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

/* CTA button */
.wel__cta{
  display:inline-grid; place-items:center;
  margin-top: clamp(16px, 2.2vw, 22px);
  width: 160px; height: 42px;
  border-radius: 12px;
  color:#bfffe8; text-decoration:none;
  font-family: "Share Tech Mono", ui-monospace, monospace;
  border:1px solid rgba(120,255,210,.45);
  background: rgba(12,18,16,.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 40px rgba(120,255,210,.12);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.wel__cta:hover{
  transform: translateY(-2px);
  border-color: rgba(170,255,230,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 14px 60px rgba(120,255,210,.22);
}

/* Scanlines overlay */
.wel__scan{
  pointer-events:none;
  position:absolute; inset:0;
  background:
    linear-gradient(rgba(0,0,0,0) 50%, rgba(0,255,160,.06) 51%, rgba(0,0,0,0) 52%);
  background-size: 100% 3px;
  mix-blend-mode: screen;
  opacity:.35;
  animation: scanScroll 9s linear infinite;
}
@keyframes scanScroll{
  0%{ background-position-y: 0; }
  100%{ background-position-y: 300px; }
}

/* Noise/fuzz overlay */
.wel__noise{
  pointer-events:none;
  position:absolute; inset:-30%;
  background-image: url('../assets/noise.png'); /* optional; or leave it out */
  background-size: 320px 320px;
  opacity: .06;
  animation: noiseShift 2.5s steps(4) infinite;
  filter: contrast(120%) saturate(140%);
}
@keyframes noiseShift{
  0%{ transform: translate3d(0,0,0) }
  25%{ transform: translate3d(-10px, 6px, 0) }
  50%{ transform: translate3d(12px, -8px, 0) }
  75%{ transform: translate3d(-6px, 4px, 0) }
  100%{ transform: translate3d(0,0,0) }
}

/* Small ambient glow sweep */
.card--welcome .card__content::after{
  content:"";
  position:absolute; inset:-20%;
  background: radial-gradient(40% 30% at 20% 10%, rgba(0,255,160,.28), rgba(0,0,0,0) 60%);
  mix-blend-mode: screen;
  animation: glowDrift 12s ease-in-out infinite alternate;
}
@keyframes glowDrift{
  0%{ transform: translate3d(-8%, -4%, 0); opacity:.6; }
  100%{ transform: translate3d(8%, 4%, 0); opacity:.3; }
}
/* ====== KITA Loader (sequential lines → giant pulsing // KITA) ====== */
#kitaLoader{
  position: fixed; inset: 0; z-index: 9999;
  display:grid; place-items:center;
  background:
    radial-gradient(80vh 60vh at 30% 20%, #0f2b2140, transparent 70%),
    linear-gradient(180deg, #07110e, #0b1412 40%, #09110f);
  transition: opacity .5s ease, visibility .5s ease;
}
#kitaLoader.is-hidden{ opacity:0; visibility:hidden; }

.kl__wrap{ position:relative; width:min(92vw, 1100px); padding:24px; }
.kl__panel{
  position:relative; overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(120,255,210,.4);
  background: linear-gradient(180deg, rgba(16,24,20,.75), rgba(8,12,10,.6));
  backdrop-filter: blur(12px) saturate(1.25);
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 30px 120px rgba(120,255,210,.12);
  padding: clamp(18px, 3.2vw, 32px);
  min-height: clamp(220px, 38vh, 420px);
  display:grid; place-items:center;
}

/* one-line terminal text area */
.kl__line{
  font-family:"Share Tech Mono", ui-monospace, Menlo, Consolas, monospace;
  color:#cffff1;
  font-size: clamp(18px, 3vw, 28px);
  line-height:1.45;
  opacity:0; transform: translateY(8px);
  pointer-events:none;
  text-align:center;
}
.kl__line.in  { opacity:1; transform:none;    transition: opacity .35s ease, transform .35s ease; }
.kl__line.out { opacity:0; transform:translateY(-6px); transition: opacity .28s ease, transform .28s ease; }

/* final giant brand fills the panel and pulses */
.kl__brand{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:"Share Tech Mono", ui-monospace, Menlo, Consolas, monospace;
  font-weight:700; letter-spacing:.06em;
  color:#87ffd6;
  text-shadow: 0 0 10px rgba(0,255,160,.3), 0 0 30px rgba(0,255,160,.2);
  font-size: clamp(42px, 14vw, 180px);
  line-height:1; opacity:0; transform: scale(.96);
  pointer-events:none;
}
.kl__brand.show { opacity:1; transform: scale(1); transition: opacity .4s ease, transform .4s ease; }
.kl__brand.pulse{
  animation: kitaPulse 1.8s ease-in-out infinite alternate;
}
@keyframes kitaPulse{
  0%  { transform: scale(0.985); text-shadow: 0 0 14px rgba(0,255,160,.35), 0 0 44px rgba(0,255,160,.24); }
  100%{ transform: scale(1.03);  text-shadow: 0 0 22px rgba(0,255,160,.55), 0 0 84px rgba(0,255,160,.28); }
}

/* scanlines + noise (optional flair) */
.kl__scan{
  pointer-events:none; position:absolute; inset:-20%;
  background: repeating-linear-gradient(to bottom,
              rgba(0,255,160,.03) 0 2px, rgba(0,0,0,0) 3px 5px);
  mix-blend-mode: screen; opacity:.35; animation: scanScroll 8s linear infinite;
}
@keyframes scanScroll{ 0%{ transform: translateY(0) } 100%{ transform: translateY(120px) } }

.kl__noise{
  pointer-events:none; position:absolute; inset:-25%;
  background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,.02) 0 40%, transparent 41%),
                    radial-gradient(circle at 70% 70%, rgba(255,255,255,.04) 0 34%, transparent 35%),
                    radial-gradient(circle at 40% 60%, rgba(255,255,255,.03) 0 27%, transparent 28%);
  filter: contrast(120%) saturate(140%);
  opacity:.08; animation: noiseShift 2.4s steps(4) infinite;
}
@keyframes noiseShift{
  0%{ transform: translate3d(0,0,0) }
  25%{ transform: translate3d(-10px, 6px, 0) }
  50%{ transform: translate3d(12px, -8px, 0) }
  75%{ transform: translate3d(-6px, 4px, 0) }
  100%{ transform: translate3d(0,0,0) }
}

/* hide state after overall loader finishes */
#kitaLoader.is-hidden .kl__brand{ animation: none; }

/* Loader one-line region starts hidden (JS manages opacity) */
#klText { opacity: 0; transition: opacity .2s ease; }


.dex-chart-wrap{
  /*position: relative;*/
  width: 100%;
  /* matches pb-[130%] for tall mobile aspect */
  padding-bottom: 130%;
  background: #0b0b0b;    /* optional: subtle dark backdrop */
  border-radius: 12px;     /* matches rounded-xl */
  overflow: hidden;        /* keep rounded corners clean */
}

/* xl:pb-[75%] — tighten aspect on large screens */
@media (min-width: 1280px){
  .dex-chart-wrap{
    padding-bottom: 75%;
  }
}

.dex-chart-iframe{
  position: absolute;
  inset: 0;               /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 12px;    /* keep the iframe corners rounded too */
}

.card.expanded {
  /*position: fixed;
  inset: 5vh 5vw;        
  width: auto;           
  height: auto;
  z-index: 1000;
  transform: none;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);*/
  width: 95%;
 /* height: 95%;*/
}

/* Dim background when expanded */
#card-backdrop {
  /*position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 900;*/
}

/* Tablets (~65%) */
@media (min-width: 641px) and (max-width: 980px){
  :root{
    --card-w: 65vw;
    --card-h: 75vw; /* keep aspect ratio */
  }
  .track{ height: calc(var(--card-h) + 16vw); }
  .card{ height: 95vw; }
}

/* Phones (75–80%) */
@media (max-width: 640px){
  :root{
    --card-w: 92vw; /* ~75–80% */
    --card-h: 85vw; /* proportional height */
  }
  .track{ height: calc(var(--card-h) + 22vw); }
  .card{ height: 150vw; }
}