/*
  Mintarex – Main Stylesheet (Organized - No Rules Changed)
  Generated: 2025-10-02 06:38:08
  Notes:
    - This file preserves every rule, selector, declaration, order, and value from your original.
    - No variables consolidated, no keyframes deduped, no color replacements.
    - Only this header comment has been added on top for documentation.
*/
:root{
  --bg: #F3F6F9;
  --ink: #1A202C;
  --muted: #718096;
  --accent-glow: #A2EBCC;
  --accent-base: #A2EBCC;
  --line: rgba(26, 32, 44, .1);
  --glass-bg: rgba(255, 255, 255, .7);
  --ticker-w: 64px;
  --ticker-h: 26px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;padding:0;background:var(--bg);color:var(--muted);
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;
  -webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden
}
body.menu-open{overflow:hidden}
body::before{
  content:"";position:fixed;inset:0;z-index:-5;
  background:radial-gradient(1000px circle at var(--x,50%) var(--y,50%), rgba(162,235,204,.1), transparent 70%);
  transition:background .2s ease-out;
  opacity: 0.2; /* Corrected Opacity */
}
section[id] {
  scroll-margin-top: 100px; /* Adjust this value if your header height changes */
}
img{display:block;max-width:100%}
a{color:var(--ink);text-decoration:none;position:relative}
a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:var(--accent-base);transition:right .3s ease-out}
a:not(.btn):hover::after{right:0}
.wrap{width:min(1200px,92vw);margin:0 auto}
*::-webkit-scrollbar{height:0;width:0}
*{scrollbar-width:none}

/* ===== HEADER & MENU ===== */
.sticky-top-wrapper{
  position:sticky;
  top:0;
  z-index:1001;
}
.marquee{white-space:nowrap;overflow:hidden;padding:10px 0;border-bottom:1px solid var(--line);background:#fff;font-size:14px}
.track{display:inline-block;animation:scroll 30s linear infinite}
.marquee:hover .track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.tag{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;margin-right:14px;border-radius:999px;background:#F3F6F9;border:1px solid var(--line)}
.up{color:#208D7A;font-weight:700}
.down{color:#c53030;font-weight:700}

header{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);position:relative;z-index:1}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent-base);transform:scaleX(0);transform-origin:0 50%}

.menu-toggle-btn{
  display:block;background:none;border:none;padding:0;cursor:pointer;
  width:24px;height:24px;position:relative;z-index:1001;
}
.menu-toggle-btn .line{
  display:block;width:100%;height:2px;
  background:var(--accent-base);
  border-radius:1px;position:absolute;left:0;
  transition:transform .3s ease, opacity .3s ease, background-color .3s ease;
}
.menu-toggle-btn .line-1{top:4px}
.menu-toggle-btn .line-2{top:11px}
.menu-toggle-btn .line-3{bottom:4px}

.menu-open .menu-toggle-btn .line {
  background-color: var(--accent-base);
}
.menu-open .menu-toggle-btn .line-1{transform:translateY(7px) rotate(45deg)}
.menu-open .menu-toggle-btn .line-2{opacity:0}
.menu-open .menu-toggle-btn .line-3{transform:translateY(-7px) rotate(-45deg)}

.brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;     /* don’t let it stretch */
}

.brand .logo-text {
  display: block;
  height: 20px;       /* visually same as your old text size */
  width: auto;
}

.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s;
  overflow-y: auto;
  padding: 80px 20px 40px;  /* Use fixed padding for stability */
  text-align: center;
  box-sizing: border-box;
}
.menu-open .mobile-menu-overlay{opacity:1;visibility:visible}

.mobile-menu-overlay nav {
  margin-top: 15vh;
  transition: margin-top .3s ease;
}
.mobile-menu-overlay nav a{
  display: block;
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  font-weight:700;
  padding: 12px 20px;
  opacity:0;transform:translateY(20px);
  transition:opacity .4s ease, transform .4s ease, color .3s ease;
}
.mobile-menu-overlay nav a:hover{color: var(--accent-base);}
.menu-open .mobile-menu-overlay nav a{opacity:1;transform:translateY(0)}
.menu-open .mobile-menu-overlay nav a:nth-child(1){transition-delay:.2s}
.menu-open .mobile-menu-overlay nav a:nth-child(2){transition-delay:.25s}
.menu-open .mobile-menu-overlay nav a:nth-child(3){transition-delay:.3s}
.menu-open .mobile-menu-overlay nav a:nth-child(4){transition-delay:.35s}
.menu-open .mobile-menu-overlay nav a:nth-child(5){transition-delay:.4s}

.marquee.is-js .track {
  animation: none !important;     /* kill @keyframes scroll for this marquee */
  will-change: transform;
  display: inline-flex;           /* precise width measuring */
}

/* ===== HERO SECTION ===== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  padding: 20vh 0;
}
.hero-content {
  padding: 20px 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.scroll-down-mouse {
  position: relative;
  width: 28px;
  height: 48px;
  border: 2px solid var(--muted);
  border-radius: 14px;
  opacity: .7;
  margin-top: 8vh;
  margin-left: auto;   /* <-- ADD THIS LINE */
  margin-right: auto;  /* <-- ADD THIS LINE */  
}
.scroll-down-mouse::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 8px;
  background: var(--muted);
  border-radius: 2px;
  animation: scroll-wheel 2.5s cubic-bezier(.165,.84,.44,1) infinite;
}
@keyframes scroll-wheel {
  0%   { transform: translate(-50%, 0); opacity: 1; }
  75%  { transform: translate(-50%, 16px); opacity: 0; }
  100% { transform: translate(-50%, 16px); opacity: 0; }
}

h1{margin:0 0 14px;font-size:clamp(2.25rem,7vw,4rem);line-height:1.1;letter-spacing:-.03em;color:var(--ink);font-weight:800}
.lead{margin:0 auto 32px;font-size:clamp(1rem,3vw,1.25rem);color:var(--muted);max-width:720px}
.accent-text{background:linear-gradient(90deg,#64d9b0,#208D7A);-webkit-background-clip:text;background-clip:text;color:transparent}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:0 auto 18px;justify-content:center}
.chip{padding:6px 12px; margin-top: 28px; font-size:13px;border-radius:999px;background:var(--glass-bg);border:1px solid var(--line);backdrop-filter:blur(5px)}

.hero-bg-elements{position:absolute;inset:0;z-index:-1;pointer-events:none}
.vector{position:absolute;inset:0;opacity:.15;will-change:transform;transition:transform .3s ease-out}
#waves path{animation:drift 25s linear infinite alternate;transform-origin:50% 50%}
#waves path:nth-child(2){animation-delay:-5s}
#waves path:nth-child(3){animation-delay:-10s}
@keyframes drift{to{transform:translate3d(2%,2%,0) rotate(.5deg)}}
.particles{position:absolute;inset:0;z-index:-1;pointer-events:none}
.particles i{position:absolute;width:4px;height:4px;border-radius:999px;background:var(--accent-glow);box-shadow:0 0 8px var(--accent-glow),0 0 12px var(--accent-glow);opacity:0;animation:floatUp 15s linear infinite;will-change:transform}
@keyframes floatUp{0%{transform:translateY(0) scale(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-100vh) scale(1.5);opacity:0}}

.actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;flex-direction:column;align-items:center;}
.btn{display:inline-flex; justify-content: center; align-items: center; padding:14px 24px;border-radius:999px;border:1px solid var(--line);background:var(--glass-bg);color:var(--ink);transition:transform .2s ease, box-shadow .2s ease;font-weight:600;width:100%;max-width:250px;}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(0,0,0,.1),0 0 20px rgba(162,235,204,.4);border-color:rgba(162,235,204,.5)}
.btn.primary{background:var(--accent-base);border-color:transparent;color:var(--ink);text-shadow:0 1px 1px rgba(255,255,255,.2)}

/* ===== QUANTUM CONTAINER ===== */
.quantum-container{padding:12vh 0;overflow:hidden}
.rail-perspective{perspective:2000px}
.rail{
  display:flex;gap:4vw;padding:4vh 0;overflow-x:auto;scroll-snap-type:x mandatory;
  cursor:grab;transform-style:preserve-3d;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain
}
.rail.is-dragging{cursor:grabbing;scroll-snap-type:none}
.rail.is-dragging,.rail.is-dragging *{user-select:none}

.slide{
  flex:0 0 min(90vw,800px);
  scroll-snap-align:center;position:relative;padding:25px;border-radius:16px;
  background:var(--glass-bg);border:1px solid var(--line);backdrop-filter:blur(10px);
  transform:rotateY(var(--rotateY,0deg)) translateZ(var(--translateZ,0px)) scale(var(--scale,1));
  opacity:var(--opacity,1);
  transition:transform .6s cubic-bezier(.25,1,.5,1), opacity .6s ease;user-select:none
}
.rail::before,.rail::after{content:"";display:block;flex:0 0 calc(50vw - min(45vw, 400px))}
.slide h2{font-size:clamp(1.75rem,5vw,2.5rem);line-height:1.1;letter-spacing:-.02em;margin:0 0 10px;color:var(--ink)}
.slide p{font-size:clamp(.9rem,2.5vw,1.1rem);max-width:48ch;margin:0 0 24px;color:var(--muted)}
.slide .points{margin:0;padding-left:20px;line-height:1.8}
.points li{transition:color .3s; font-size: clamp(.9rem, 2.5vw, 1rem);}
.slide.is-active .points li{color:var(--ink)}

.visual3d{position:absolute;right:20px;bottom:20px;width:min(30vw,180px);height:auto;pointer-events:none;opacity:.7}
.holo .beam{
  stroke:#208D7A;
  stroke-width:2.5;fill:none;stroke-dasharray:500;stroke-dashoffset:500;
  animation:drawIn 4s ease-out infinite alternate;animation-play-state:paused
}
.slide.is-active .holo .beam{animation-play-state:running}
@keyframes drawIn{to{stroke-dashoffset:0}}

.tagline{display:inline-flex;gap:10px;align-items:center;margin-bottom:14px;font-weight:600;color:var(--ink)}
.dot{width:8px;height:8px;border-radius:999px;background:var(--accent-glow);box-shadow:0 0 10px var(--accent-glow)}

.dots{display:flex;gap:12px;justify-content:center;padding:24px 0}
.dotbtn{width:10px;height:10px;border-radius:999px;background:var(--line);border:none;cursor:pointer;opacity:.5;transition:all .3s}
.dotbtn[aria-current="true"]{background:var(--accent-glow);opacity:1;transform:scale(1.2)}

.cta{padding:80px 0;text-align:center;background:radial-gradient(circle at 50% 0%, rgba(162,235,204,.15), transparent 70%);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cta h3{margin:0 0 12px;font-size:clamp(1.75rem,5vw,2.5rem);color:var(--ink)}

/* Tagline link arrow */
.tagline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-weight: 600;
  color: var(--ink);
}

.taglink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  text-decoration: none;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.taglink svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: transform .2s ease;
}

.taglink:hover {
  background: rgba(162,235,204,0.12);
  border-color: var(--accent-base);
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -10px var(--accent-glow);
}

.taglink:hover svg {
  transform: translateX(2px);
}

.taglink:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px -8px var(--accent-glow);
}

.taglink:focus-visible {
  outline: 2px solid var(--accent-base);
  outline-offset: 2px;
}

/* a11y helper (optional) */
.sr-only {
  position:absolute !important;
  width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* tiny screens: keep target comfy */
@media (max-width: 380px){
  .taglink { padding: 6px 8px; gap: 6px; font-size: 12px; }
  .taglink svg { width: 13px; height: 13px; }
}


/* ===== RESPONSIVE & HEADER FIXES ===== */
@media (max-width: 767px) and (orientation: portrait) {
  .hero {
    min-height: 80svh; /* A more balanced height */
    padding: 0; /* Padding is now controlled by the flex children */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center the entire block vertically */
  }

  /* We use the 'order' property to guarantee the visual sequence of elements */
  .hero > .hero-bg-elements { order: 1; }
  .hero > .chips { order: 2; }
  .hero > .hero-content { order: 3; }
  .hero > .scroll-down-mouse {
    order: 4;
    margin-top: auto; /* Pushes it to the bottom of the flex container */
    padding-top: 2vh;
    margin-bottom: 3vh;
  }
}

@media (max-height: 600px) {
  .scroll-down-mouse {
    display: none;
  }
}

@media (max-width: 360px) {
  .slide {padding: 20px;}
  .slide h2 {font-size: 1.5rem;}
}

@media (min-width: 480px) {
  .actions {flex-direction: row;}
  .btn {width: auto; max-width: none;}
  .slide {padding: 40px; flex-basis: min(80vw,800px);}
  .rail::before,.rail::after{content:"";display:block;flex:0 0 calc(50vw - min(40vw, 400px))}
  .visual3d {width: min(25vw, 250px);}
}

.desktop-nav-container {
  display: none;
}

@media (min-width: 992px) {
  .menu-toggle-btn {
    display: none;
  }
  .desktop-nav-container {
    display: flex;
    align-items: center;
    gap: 24px;
  }
  .desktop-nav {
    display: flex;
    align-items: center;
  }
  .desktop-nav a {
    margin-left: 24px;
    opacity: .8;
    transition: opacity .2s;
    color: var(--ink);
  }
  .desktop-nav a:hover {
    opacity: 1;
    color: var(--accent-base);
  }
  .desktop-nav a::after {
    bottom: -8px;
  }
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-actions .btn {
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  max-width: none;
  width: auto;
}
.nav-actions .btn-secondary {
  background: transparent;
  border-color: var(--line);
}
.nav-actions .btn-secondary:hover {
  background: var(--glass-bg);
  border-color: var(--muted);
}
.nav-actions .btn-primary {
  box-shadow: 0 4px 15px -5px var(--accent-glow);
}

.mobile-nav-actions {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 280px;
  margin: 40px auto 0;  /* centers the block */
  padding-top: 30px;
  border-top: 1px solid var(--line);
  align-items: center;  /* centers buttons inside */
}
.mobile-nav-actions .btn {
  width: 100%;
}
.mobile-nav-actions .btn-secondary {
  background: transparent;
  border-color: var(--accent-base);
  color: var(--accent-base);
}
.mobile-nav-actions .btn-primary {
  box-shadow: 0 4px 20px -5px var(--accent-glow);
}

@media (min-width: 768px) and (max-width: 1100px) {
  h1 {
    max-width: 650px; 
    margin-left: auto;
    margin-right: auto;
  }
  .slide {
    flex-basis: min(80vw, 600px);
  }
  .rail {
    gap: 5vw;
  }
}

@media (min-width: 1024px) {
  .slide{flex-basis: min(70vw, 800px);}
}

@media (min-width: 1440px) {
  .wrap {width: min(1360px, 92vw);}
  .slide{flex-basis: min(60vw, 800px);}
}

@media (min-width: 2000px) {
  :root {font-size: 18px;}
  .wrap {width: 1800px;}
  .rail{gap: 60px;}
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .track,#waves path,.particles i,.holo .beam{animation:none !important}
  .vector{transform:none !important}
}


/* ===== FUTURISTIC "FLOATING ISLETS" FOOTER ===== */
.islet-footer {
  padding: 8vh 0 4vh;
  position: relative;
  background-color: var(--bg);
  margin-top: 10vh;
  border-top: 1px solid;
  border-image: linear-gradient(to right, transparent, var(--accent-base), transparent) 1;
}

.islet-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 40px 20px;
  margin-bottom: 6vh;
}

.islet {
  padding: 20px;
  text-align: left;
  transition: all .3s ease;
}
.islet:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px -20px rgba(32, 141, 122, 0.2);
}

.islet h4 {
  font-size: 1.1rem;
  color: var(--ink);
  margin: 0 0 20px;
  font-weight: 700;
  position: relative;
  padding-left: 14px;
}

.islet h4::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background-color: var(--accent-base);
  border-radius: 2px;
}

.islet nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
}

.islet nav a {
  color: var(--muted);
  text-decoration: none;
  transition: color .2s ease;
  position: relative;
  padding-left: 14px;
}

.islet nav a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left;
  width: 4px;
  height: 4px;
  background-color: var(--accent-base);
  border-radius: 99px;
  transition: transform .3s cubic-bezier(0.25, 1, 0.5, 1);
}

.islet nav a:hover {
  color: var(--accent-base);
}

.islet nav a:hover::before {
  transform: translateY(-50%) scaleX(1);
}

.islet nav a::after {
  content: none;
}

.islet-bottom {
  border-top: 1px solid var(--line);
  padding-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  font-size: 13px;
  color: var(--muted);
}

.islet-bottom .social-icons {
  display: flex;
  gap: 20px;
}

.islet-bottom .social-icons a svg {
  width: 24px;
  height: 24px;
  fill: var(--muted);
  transition: all .3s ease;
}
.islet-bottom .social-icons a:hover svg {
  fill: var(--accent-base);
  transform: translateY(-3px);
}

.islet-bottom #y {
  display: inline;
}

@media (max-width: 1024px) {
  .islet-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .islet-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .islet {
    padding: 10px;
  }
}

@media (max-width: 480px) {
  .islet-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .islet {
    align-items: center;
    text-align: center;
  }
  .islet h4,
  .islet nav a {
    padding-left: 0;
  }
  .islet h4::before,
  .islet nav a::before {
    display: none;
  }
}

@media (max-height: 520px) {
  .mobile-menu-overlay nav {
    margin-top: 20px;
  }
}

@media (max-height: 200px) {
  .mobile-menu-overlay nav {
    margin-top: 20px;
  }
}

@media (max-height: 550px) {
  .mobile-menu-overlay nav {
    margin-top: 20px;
  }
}

.footer-disclaimer {
  font-size: 14px;
  text-align: center;
  opacity: 0.9;
  max-width: 1000px;
  margin: 20px auto 0;
  line-height: 1.6;
}

/* ===== NEW: HOMEPAGE CONTENT SECTIONS ===== */

/* --- General Info Section Styling --- */
.info-section {
  padding: 10vh 0;
  text-align: center;
}
.info-section.alt-bg {
  background-color: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section-title {
  font-size: clamp(2rem, 6vw, 3rem);
  color: var(--ink);
  margin: 0 0 15px;
}
.section-subtitle {
  font-size: clamp(1rem, 3vw, 1.15rem);
  color: var(--muted);
  max-width: 650px;
  margin: 0 auto 50px;
}

/* --- Features Grid Styling (For Trust & Security) --- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  text-align: left;
}
.feature-card {
  background: var(--glass-bg); /* Use glass background */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  padding: 30px;
  border-radius: 12px;
  transition: all .3s ease;
}
.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px -15px rgba(0,0,0,0.1);
}
.feature-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 20px;
  color: var(--accent-base);
}
.feature-card h3 {
  font-size: 1.2rem;
  color: var(--ink);
  margin: 0 0 10px;
}
.feature-card p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* ===== NEW: "Gradient Flow" Section Styling ===== */

.gradient-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px; /* Space between steps and connectors */
}

.flow-step {
  display: flex;
  align-items: center;
  gap: 25px;
  width: 100%;
  max-width: 550px;
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 25px;
  text-align: left;
  transition: all .3s ease;
}
.flow-step:hover {
  transform: scale(1.02);
  box-shadow: 0 20px 40px -15px rgba(0,0,0,0.1);
}

.step-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--accent-base);
  color: var(--ink);
  font-size: 1.5rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 20px -10px var(--accent-glow);
}

.step-content h3 {
  font-size: 1.2rem;
  color: var(--ink);
  margin: 0 0 5px;
}
.step-content p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.flow-connector {
  height: 40px;
  width: 2px;
  background-image: linear-gradient(to bottom, var(--line) 50%, transparent 50%);
  background-size: 2px 10px;
  background-repeat: repeat-y;
}

/* Responsive adjustment for the flow */
@media (max-width: 480px) {
  .flow-step {
    flex-direction: column;
    text-align: center;
    gap: 15px;
    padding: 30px 20px;
  }
}

/* ===== DESKTOP SPACING CORRECTIONS ===== */

@media (min-width: 992px) {
  /* Reduce hero section padding on desktop */
  .hero {
    padding: 120px 0;
  }

  /* Reduce product slider section padding on desktop */
  .quantum-container {
    padding: 100px 0;
  }

  /* Reduce info section padding on desktop */
  .info-section {
    padding: 100px 0;
  }

  /* Reduce footer padding on desktop */
  .islet-footer {
    padding: 80px 0 40px;
    margin-top: 100px;
  }
}

/* ===== HOLO ICON FIXES FOR FEATURE CARDS ===== */
.feature-card {
  position: relative;
  padding: 96px 24px 24px;   /* reserve room above for the icon */
  border-radius: 16px;       /* (optional) keeps layout tidy */
}

.feature-holo {
  position: absolute;
  top: 24px;                 /* was bottom/right */
  left: 24px;
  width: 60px;
  height: 60px;
  opacity: 0.7;
  color: var(--accent-base);
}

/* keep your animation rules */
.feature-holo .beam {
  stroke-width: 4;
  fill: none;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: drawIn 4s ease-out infinite alternate;
  animation-play-state: paused;
}
.feature-card.is-visible .holo .beam {
  animation-play-state: running;
}

/* optional: tighten spacing */
.feature-card .feature-content h3 {
  margin: 0 0 6px;
}

/* responsive tweak (smaller icon/space on narrow screens) */
@media (max-width: 640px) {
  .feature-card { padding-top: 80px; }
  .feature-holo { width: 48px; height: 48px; top: 20px; left: 20px; }
}

/* ===== Futuristic Spotlight Logo Bar (updated) ===== */
.featured-logos {
  padding: 8vh 0;
}

/* Keep structure and spotlight; read --x/--y from body (already set in your JS) */
.logo-bar.spotlight-effect {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  gap: 40px;
  overflow: hidden; /* Keep this */
}

/* Smooth, GPU-friendly */
.logo-bar.spotlight-effect::before {
  content: '';
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--accent-glow) 0%, rgba(162, 235, 204, 0) 60%);
  width: 400px;
  height: 400px;
  opacity: 0;
  transition: opacity .3s ease-in-out;
  pointer-events: none;
  will-change: transform, opacity;
}
.logo-bar.spotlight-effect:hover::before { opacity: 0.15; }

/* Normalize SVG rendering (Wikimedia raw SVGs) */
.logo-bar img,
.logo-bar .logo {
  display: block;              /* avoid inline gaps */
  max-height: 30px;
  width: auto;
  filter: grayscale(100%) opacity(0.5);
  transition: transform .3s ease, filter .3s ease;
  position: relative;
  z-index: 2;
  image-rendering: auto;
}

.logo-bar img:hover,
.logo-bar .logo:hover {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.1);
}

/* ===== Futuristic Logo Scroller (Mobile) ===== */
.mobile-only { display: none; } /* Hidden by default */

.logo-scroller {
  max-width: 600px;
  margin: 0 auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, white 20%, white 80%, transparent);
  mask-image: linear-gradient(to right, transparent, white 20%, white 80%, transparent);
}

.scroller-inner {
  display: flex;
  gap: 50px;
  padding-block: 10px;
  width: max-content;          /* Critical for the animation */
  animation: scroll 20s linear infinite;
  will-change: transform;
}

/* Speed knobs via data-speed (keeps your current data-speed="slow") */
.logo-scroller[data-speed="slow"]  .scroller-inner { animation-duration: 28s; }
.logo-scroller[data-speed="normal"] .scroller-inner { animation-duration: 20s; }
.logo-scroller[data-speed="fast"]  .scroller-inner { animation-duration: 12s; }
.logo-scroller.is-js .scroller-inner { animation: none; }

.logo-scroller img,
.logo-scroller .logo {
  display: block;
  max-height: 24px;            /* Slightly smaller for mobile */
  width: auto;
  filter: grayscale(100%) opacity(0.6);
  transition: transform .3s ease, filter .3s ease;
  image-rendering: auto;
}

/* Seamless loop: half-width travel + half-gap (50px gap => 25px) */
@keyframes scroll {
  to { transform: translateX(calc(-50% - 25px)); }
}

/* ===== Accessibility & Interaction polish ===== */
@media (hover: none) {
  /* Avoid sticky hover on touch */
  .logo-bar img:hover,
  .logo-bar .logo:hover { transform: none; filter: grayscale(100%) opacity(0.7); }
  /* Keep scroller motion but slightly calmer on touch */
  .logo-scroller .scroller-inner { animation-duration: 32s; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-bar.spotlight-effect::before { transition: none; }
  .scroller-inner { animation: none; transform: none; }
}

/* ===== Responsive Swapping Logic (unchanged, with minor spacing tune) ===== */
@media (max-width: 767px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: block !important; }
  .featured-logos { padding: 6vh 0; }
}

/* ===== INTEL HUB — COMPLETE CSS (Desktop align + Mobile fix) ===== */

/* Container */
.intel-hub-container{
  display:grid;
  grid-template-columns:250px 1fr;
  gap:40px;
  background:var(--glass-bg);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line);
  border-radius:16px;
  padding:20px;
  min-height:500px;
}

/* Selector (left list / top row on mobile) */
.intel-hub-selector{
  list-style:none;
  margin:0;
  padding:10px;
  border-right:1px solid var(--line);
  overflow-y:auto;
}

/* ===== Desktop / Tablet pills =====
   Grid reserves fixed space for ticker so ALL badges are identical */
.hub-item{
  display:grid;
  grid-template-columns:1fr var(--ticker-w);  /* name grows, ticker fixed width */
  column-gap:12px;                            /* breathing space */
  align-items:center;
  justify-items:stretch;
  text-align:left;
  min-height:44px;
  padding:14px 16px;
  border-radius:8px;
  cursor:pointer;
  transition:background-color .3s ease, color .3s ease, box-shadow .3s ease;
}

/* Name (left) */
.hub-item .item-name{
  font-weight:600;
  color:var(--muted);
  min-width:0;                /* allow wrapping */
  line-height:1.2;
  white-space:normal;
  overflow-wrap:anywhere;
  text-align:left;
}

/* Ticker badge (right) — UNIFORM SIZE */
.hub-item .item-ticker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--ticker-w);
  height:var(--ticker-h);
  flex:0 0 var(--ticker-w);   /* never grow/shrink */
  box-sizing:border-box;

  font-size:13px;
  font-weight:600;
  line-height:1;              /* avoid vertical jitter */
  color:var(--muted);
  background-color:rgba(0,0,0,.05);
  border-radius:4px;
  white-space:nowrap;
  text-align:center;
  justify-self:end;           /* pin to right edge */
}

/* Hover / Active */
.hub-item:hover{ background-color:rgba(162,235,204,.10); }
.hub-item.is-active{
  background-color:var(--accent-base);
  box-shadow:0 5px 20px -5px var(--accent-glow);
}
.hub-item.is-active .item-name,
.hub-item.is-active .item-ticker{ color:var(--ink); }

/* Display pane */
.intel-hub-display{
  padding:20px;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  position:relative;
}

/* Content states */
.display-content{
  display:none;
  flex-direction:column;
  align-items:center;
  animation:fadeIn .5s ease;
}
.display-content.is-active{ display:flex; }

/* Hologram */
.display-holo{
  width:120px;
  height:120px;
  margin-bottom:20px;
  color:var(--accent-base);
  filter:drop-shadow(0 0 15px var(--accent-glow));
}
.display-holo .beam{
  stroke-width:4;
  fill:none;
  stroke-dasharray:500;
  stroke-dashoffset:500;
  animation:drawIn 4s ease-out infinite alternate;
}

/* Titles & text */
.intel-hub-display h3{
  font-size:clamp(1.5rem,4vw,2.2rem);
  color:var(--ink);
  margin:0 0 10px;
}
.intel-hub-display p{
  max-width:45ch;
  line-height:1.6;
  margin:0 auto 25px;
}

/* CTA */
.learn-more-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--accent-base);
  font-weight:600;
  margin-top:auto;
}
.learn-more-link svg{
  width:24px; height:24px;
  stroke:currentColor; stroke-width:2;
  fill:none; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .3s ease;
}
.learn-more-link:hover svg{ transform:translateX(5px); }
.learn-more-link::after{ content:none; }

/* Animations */
@keyframes fadeIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes drawIn{
  0%{ stroke-dashoffset:500; opacity:.85; }
  100%{ stroke-dashoffset:0; opacity:1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .display-content{ animation:none; }
  .display-holo .beam{ animation:none; }
}

/* ===== Responsive tweaks ===== */
@media (min-width:1200px){
  .intel-hub-selector .hub-item{ column-gap:14px; }
}

@media (max-width:992px){
  .intel-hub-container{ grid-template-columns:200px 1fr; gap:20px; }
}

/* ===== Mobile (≤767px): horizontal pills, same ticker size ===== */
@media (max-width:767px){
  .intel-hub-container{ grid-template-columns:1fr; min-height:0; }

  .intel-hub-selector{
    border-right:none;
    border-bottom:1px solid var(--line);
    display:flex;
    overflow-x:auto;
    padding:10px 0;
    gap:10px;
  }

  .intel-hub-selector .hub-item{
    display:inline-flex;       /* inline row pills */
    align-items:center;
    gap:12px;
    padding:10px 14px;
    min-height:40px;
    white-space:nowrap;        /* keep each pill on one line */
  }

  .intel-hub-selector .hub-item .item-name{
    white-space:nowrap;
    overflow-wrap:normal;
    word-break:keep-all;
    line-height:1.2;
    text-align:left;
  }

  /* ticker keeps the same fixed size as desktop */
  .intel-hub-selector .hub-item .item-ticker{
    width:var(--ticker-w);
    height:var(--ticker-h);
    flex:0 0 var(--ticker-w);
  }

  /* optional edge padding for first/last pill */
  .hub-item:first-child{ margin-left:10px; }
  .hub-item:last-child{ margin-right:10px; }
}

/* === Surface Pro / desktop: stop per-letter breaks and keep layout tidy === */
@media (min-width: 768px){
  /* let the name column shrink safely, ticker stays fixed */
  .intel-hub-selector .hub-item{
    grid-template-columns: minmax(0, 1fr) var(--ticker-w);
  }

  /* keep words intact; wrap only at spaces/hyphens */
  .intel-hub-selector .hub-item .item-name{
    white-space: normal;
    overflow-wrap: normal;   /* override earlier 'anywhere' */
    word-break: keep-all;    /* no mid-word breaks */
    hyphens: auto;           /* optional: hyphenate very long tokens if needed */
  }
}

/* ==========================================================
   Ultra-small phones ONLY (e.g., 240×320) — safe micro-fix
   Scoped so it cannot affect desktop or landscape.
   ========================================================== */
@media (max-width: 320px) and (max-height: 480px), (max-width: 260px) {

  /* 1) Headlines: smaller floor so H1 doesn't dominate at 240px */
  h1 {
    /* Overrides global rule at line ~160 only for tiny screens */
    font-size: clamp(1.35rem, 8.5vw, 1.8rem);
    line-height: 1.2;
  }

  /* 2) Features grid: avoid the 280px min that overflows at 240px */
  .features-grid {
    /* Overrides definition around line ~585 safely */
    grid-template-columns: 1fr !important;
  }
  .features-grid > * {
    min-width: 0; /* let cards shrink within the single column */
  }

  /* 3) Product slides: ease padding/basis so a card fits visually */
  .slide {
    padding: 16px !important;        /* lighter than your default */
    flex-basis: 94vw !important;     /* a touch wider than 90vw for nicer wrap */
  }
  .slide h2 { font-size: 1.1rem; line-height: 1.15; }
  .slide p  { font-size: .95rem; }

  /* 4) Buttons: ensure no fixed min-width forces overflow */
  .actions .btn { min-width: auto; max-width: 100%; }

  /* (Optional) If the chips still nudge the layout, uncomment:
  #track .tag { font-size: .8rem; padding: 4px 6px; }
  */
}

/* ==========================================================
   Footer bottom (islet-bottom) — ultra-small screens only
   Targets ~240–320px wide devices (e.g., JioPhone 2 @ 240×320)
   ========================================================== */
@media (max-width: 320px) and (max-height: 480px), (max-width: 260px) {

  /* Layout the block as a single column with tight, centered rhythm */
  .islet-bottom.wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    text-align: center;
    padding-block: 12px;
    padding-inline: 10px; /* avoids edge clipping at 240px */
  }

  /* Social icons: wrap neatly, smaller hit targets, centered */
  .islet-bottom .social-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 10px;        /* row x column */
    margin: 0 auto;
    max-width: 92vw;      /* prevents overflow in very narrow viewports */
  }
  .islet-bottom .social-icons a {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .islet-bottom .social-icons a svg {
    width: 20px;
    height: 20px;
  }

  /* Disclaimer: allow soft wrapping and smaller, readable type */
  .islet-bottom .footer-disclaimer {
    font-size: 0.8rem;
    line-height: 1.35;
    margin: 0 auto;
    max-width: 92vw;
    text-wrap: pretty;        /* modern wrap (safe to ignore if unsupported) */
    overflow-wrap: anywhere;  /* prevents a single long token from overflowing */
    hyphens: auto;            /* improves wrap on supported browsers */
  }

  /* Copyright line */
  .islet-bottom.wrap > p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.25;
  }
}

/* ========= Back to Top ========= */
:root{
  /* falls back to your brand colors */
  --brand-mint: #A2EBCC;
  --brand-mint-dark: #208D7A;
}

.back-to-top{
  position: fixed;
  right: 16px;
  bottom: 18px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: var(--brand-mint);
  color: #0b2d26; /* readable on mint */
  box-shadow: 0 6px 18px rgba(32,141,122,.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px) scale(.9);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease;
  z-index: 999;
}
.back-to-top:hover{
  box-shadow: 0 8px 22px rgba(32,141,122,.35);
}
.back-to-top:focus-visible{
  outline: 2px solid var(--brand-mint-dark);
  outline-offset: 2px;
}
.back-to-top.is-visible{
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* keep good size on very small screens like JioPhone 2 */
@media (max-width: 320px){
  .back-to-top{
    right: 10px;
    bottom: 12px;
    width: 40px;
    height: 40px;
  }
}

/* don’t show in print */
@media print{
  .back-to-top{ display: none !important; }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .back-to-top{ transition: none; }
}

/* ===== Mintarex Preloader (blocking, no skip) ===== */
:root{
  --brand-mint: #A2EBCC;
  --brand-mint-dark: #208D7A;
}

body.preload-lock { overflow: hidden; }

/* full screen veil */
.mx-preloader{
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1000px 600px at 50% 45%, rgba(162,235,204,.06), transparent 60%),
    linear-gradient(180deg, rgba(3,15,12,.98), rgba(3,15,12,.99));
  display: grid;
  place-items: center;
  z-index: 10000;
  transition: opacity .35s ease, visibility .35s ease;
}

/* hide once loaded */
.mx-preloader.is-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* loader card */
.mx-core{
  position: relative;
  width: min(320px, 86vw);
  aspect-ratio: 1/1;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: rgba(10,28,24,.35);
  border: 1px solid rgba(162,235,204,.16);
  box-shadow:
    0 0 40px rgba(162,235,204,.25),
    0 0 100px rgba(32,141,122,.18) inset;
  overflow: hidden;
  isolation: isolate;
}

/* ring */
.mx-ring{ width: 62%; height: auto; z-index: 2; }
.mx-arc{
  stroke-dasharray: 230 190;
  transform-origin: 60px 60px;
  animation: mxSpin 1.05s linear infinite, mxArc 2.2s ease-in-out infinite;
}

/* subtle 3D core (three layered rotated plates) */
.mx-core3d{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  perspective: 600px;
  z-index: 1;
}
.mx-core3d span{
  position: absolute;
  width: 48%;
  height: 48%;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(162,235,204,.18), rgba(32,141,122,.08));
  border: 1px solid rgba(162,235,204,.18);
  box-shadow: 0 10px 20px rgba(0,0,0,.25) inset, 0 0 24px rgba(162,235,204,.12);
  transform-style: preserve-3d;
  animation: mxTilt 2.8s ease-in-out infinite;
}
.mx-core3d span:nth-child(2){ width: 58%; height: 58%; animation-delay: .25s; }
.mx-core3d span:nth-child(3){ width: 38%; height: 38%; animation-delay: .5s; }

/* wordmark */
.mx-wordmark{
  position: absolute;
  bottom: 16px;
  font-family: "Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight: 800;
  letter-spacing: .4px;
  color: rgba(255,255,255,.9);
  z-index: 3;
}
.mx-wordmark .w1{ color: var(--brand-mint); }
.mx-wordmark .w2{ color: rgba(255,255,255,.9); }

/* progress bar */
.mx-progress{
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(162,235,204,.15);
  overflow: hidden;
  z-index: 4;
}
.mx-progress .mx-bar{
  width: 12%;
  height: 100%;
  background: linear-gradient(90deg, var(--brand-mint), var(--brand-mint-dark));
  box-shadow: 0 0 16px rgba(162,235,204,.5);
  animation: mxSweep 1.2s ease-in-out infinite;
  transform-origin: left center;
}

/* tiny screens */
@media (max-width: 320px){
  .mx-core{ width: 90vw; border-radius: 16px; }
  .mx-wordmark{ bottom: 12px; font-size: 14px; }
}

/* reduced motion: keep it clean */
@media (prefers-reduced-motion: reduce){
  .mx-arc, .mx-core3d span, .mx-progress .mx-bar{ animation: none !important; }
}

/* keyframes */
@keyframes mxSpin { to { transform: rotate(360deg); } }
@keyframes mxArc {
  0%,100% { stroke-dasharray: 230 190; }
  50%     { stroke-dasharray: 120 300; }
}
@keyframes mxTilt {
  0%,100% { transform: rotateX(12deg) rotateY(-10deg); }
  50%     { transform: rotateX(-6deg) rotateY(8deg); }
}
@keyframes mxSweep {
  0%   { transform: translateX(-30%) scaleX(.8); opacity: .8; }
  50%  { transform: translateX(60%)  scaleX(1.1); opacity: 1; }
  100% { transform: translateX(130%) scaleX(.9); opacity: .85; }
}

/* ===== Live Market Table Section ===== */
.market-table-container {
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px 20px;
  overflow-x: auto; /* Enables horizontal scroll on narrow viewports when table layout is active */
  scroll-snap-type: x proximity; /* subtle alignment for horizontal scroll */
}
.market-table-container table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px; /* Keep a healthy min-width for readable columns when table layout is active */
  scroll-snap-align: start;
}
.market-table-container th,
.market-table-container td {
  padding: 16px 12px;
  text-align: left;
  vertical-align: middle;
}
.market-table-container th {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.market-table-container tbody tr {
  border-bottom: 1px solid var(--line);
  transition: background-color 0.2s ease;
}
.market-table-container tbody tr:last-child { border-bottom: none; }
.market-table-container tbody tr:hover { background-color: rgba(162, 235, 204, 0.1); }

.asset-cell {
  display: flex;
  align-items: center;
  gap: 14px;
}
.crypto-icon { width: 36px; height: 36px; }
.asset-cell strong { color: var(--ink); font-weight: 600; }
.asset-cell .ticker { display: block; font-size: 13px; color: var(--muted); }
.market-table-container td { font-weight: 600; color: var(--ink); }
.trade-cell { text-align: right; }

.btn-trade {
  display: inline-flex;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  background: var(--accent-base);
  color: var(--ink);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-trade:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 15px -5px var(--accent-glow);
}

/* --- Helpful subtle scrollbar on WebKit (doesn't affect Firefox/Edge) --- */
.market-table-container::-webkit-scrollbar { height: 8px; }
.market-table-container::-webkit-scrollbar-track { background: transparent; }
.market-table-container::-webkit-scrollbar-thumb {
  background: rgba(162,235,204,.25);
  border-radius: 999px;
}

/* ================== Responsive ================== */

/* Tablet refinements without changing layout */
@media (max-width: 1024px) {
  .market-table-container { padding: 10px 14px; }
  .market-table-container th, .market-table-container td { padding: 14px 10px; }
  .crypto-icon { width: 32px; height: 32px; }
}

/* Your existing mobile rules stay, with minor spacing tweaks */
@media (max-width: 767px) {
  .info-section#markets { padding-top: 5vh; } /* Tighter padding on mobile */
  .desktop-only-cell { display: none; }       /* Hide Market Cap column on small screens */

  /* Keep min-width for readability if staying as a table >= 601px wide phones */
  .market-table-container table { min-width: 600px; }

  .market-table-container { padding: 10px 12px; }
  .market-table-container th, .market-table-container td { padding: 12px 10px; }
  .asset-cell { gap: 12px; }
  .crypto-icon { width: 30px; height: 30px; }
  .btn-trade { padding: 8px 16px; font-size: 13px; }
}

/* <= 600px: Switch to stacked “card” rows for perfect readability on tiny devices */
@media (max-width: 600px) {
  /* Turn table structure into blocks */
  .market-table-container table,
  .market-table-container thead,
  .market-table-container tbody,
  .market-table-container th,
  .market-table-container td,
  .market-table-container tr {
    display: block;
    width: 100%;
  }

  /* Hide header; we’ll use data-labels on cells */
  .market-table-container thead {
    position: absolute;
    left: -9999px; top: -9999px;
    height: 0; overflow: hidden;
  }

  /* Each row becomes a card */
  .market-table-container tbody tr {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    margin: 12px 0;
  }
  .market-table-container tbody tr:hover { background-color: rgba(162,235,204,0.06); }

  /* Cells stack with a left label derived from data-label */
  .market-table-container td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px dashed rgba(162,235,204,.15);
  }
  .market-table-container tbody tr td:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .market-table-container td::before {
    content: attr(data-label);
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: .2px;
    margin-right: 8px;
  }

  /* Asset cell: custom layout; don’t show a label for it */
  .market-table-container td:first-child {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
    border-bottom: 1px dashed rgba(162,235,204,.15);
  }
  .market-table-container td:first-child::before { content: ''; display: none; }

  .asset-cell { gap: 10px; }
  .crypto-icon { width: 28px; height: 28px; }
  .asset-cell strong { font-size: 14px; }
  .asset-cell .ticker { font-size: 12px; }

  /* Keep Market Cap hidden on tiny screens */
  .desktop-only-cell { display: none !important; }

  /* Trade button row: no label; align right and keep compact */
  .trade-cell {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
  }
  .trade-cell::before { content: ''; } /* suppress label for button row */
  .btn-trade {
    width: auto;
    padding: 10px 18px;
    font-size: 13px;
  }

  /* Table min-width no longer relevant in block mode */
  .market-table-container table { min-width: 0; }
}

/* Ultra-small (JioPhone-class ≤320px) refinements */
@media (max-width: 320px) {
  .market-table-container { padding: 8px; }
  .market-table-container tbody tr { padding: 10px; margin: 10px 0; }
  .market-table-container td { padding: 8px 2px; gap: 8px; }
  .market-table-container td::before { font-size: 11px; }
  .crypto-icon { width: 24px; height: 24px; }
  .asset-cell strong { font-size: 13px; }
  .asset-cell .ticker { font-size: 11px; }
  .btn-trade {
    width: 100%;
    justify-content: center;
    padding: 10px 14px;
    font-size: 12.5px;
  }
}

/* Color helpers (if not already defined globally) */
.up { color: #21c07a; }
.down { color: #e65252; }