:root{
  --tabs-bg: rgba(15,23,42,0.04);
  --tabs-border: rgba(15,23,42,0.08);
  --tabs-pill: #fff;
  --tabs-pill-text: #1b2559;
  --tabs-pill-hover: translateY(-2px);
  --tabs-pill-shadow: 0 10px 20px rgba(15,23,42,0.10);
  --tabs-pill-active-shadow: 0 18px 32px rgba(47,67,187,0.25);
  --tabs-panel-shadow: 0 32px 60px rgba(15,23,42,0.12);
  --tabs-panel-bg: #fff;
}

[data-tabs-shell]{
  display:flex;
  flex-direction:column;
  gap:18px;
}

[data-tabs-shell] .token-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0;
  padding:12px;
  border-radius:18px;
  background:var(--tabs-bg);
  border:1px solid var(--tabs-border);
  position:relative;
  z-index:3;
  margin-bottom:-20px;
}

[data-tabs-shell] .token-tab{
  border:1px solid transparent;
  background:var(--tabs-pill);
  color:var(--tabs-pill-text);
  padding:8px 14px;
  border-radius:999px;
  font-weight:600;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  box-shadow:var(--tabs-pill-shadow);
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.token-tab-icon{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,0.14);
  flex-shrink:0;
}
.token-tab-icon svg{
  width:100%;
  height:100%;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}
.icon-free svg{color:#1bd2a2;}
.icon-premium svg{color:#ff9f43;}
.icon-demo svg{color:#6e5eff;}
.icon-lab svg{color:#0ac5ff;}
.icon-referral svg{color:#ff6fb5;}
.icon-profile svg{color:#8896ff;}
.icon-eth svg{color:#627eea;}
.icon-bnb svg{color:#f3ba2f;}
.icon-sol svg{color:#14f195; fill:none;}
.icon-overview svg{color:#5c6b8f;}
.icon-utility svg{color:#0abf83;}
.icon-roadmap svg{color:#ff7b7b;}
.icon-disclosure svg{color:#4c8dff;}

[data-tabs-shell] .token-tab:hover{
  transform:var(--tabs-pill-hover);
}

[data-tabs-shell] .token-tab.active{
  background:linear-gradient(135deg,#6e5eff,#1bd2a2);
  color:#fff;
  border-color:transparent;
  box-shadow:var(--tabs-pill-active-shadow);
  margin-bottom:-2px;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}

[data-tabs-shell] .token-panels{
  display:flex;
  flex-direction:column;
  gap:0;
}

[data-tabs-shell] .token-panel{
  display:none;
  scroll-margin-top:120px;
}

[data-tabs-shell] .token-panel.active{
  display:block;
}

[data-tabs-shell] .token-panel[hidden]{
  display:none!important;
}

[data-tabs-shell] .token-panel-content{
  display:flex;
  flex-direction:column;
  gap:18px;
  background:var(--tabs-panel-bg);
  border-radius:24px;
  padding:24px 14px;
}

[data-tabs-shell] .token-panel-content.token-panel-content--flush{
  padding:0;
}

[data-tabs-shell] .token-panel-stack{
  position:relative;
  margin-top:-12px;
  border-radius:32px;
  padding:46px 16px 24px;
  background:var(--tabs-panel-bg);
  box-shadow:var(--tabs-panel-shadow);
}

[data-tabs-shell] .token-panel-stack::before,
[data-tabs-shell] .token-panel-stack::after{
  content:"";
  position:absolute;
  pointer-events:none;
}

[data-tabs-shell] .token-panel-stack::before{
  inset:-34px -3px -3px;
  border-radius:36px;
  background:var(--brand-grad, linear-gradient(135deg,#6e5eff,#1bd2a2));
  z-index:-2;
}

[data-tabs-shell] .token-panel-stack::after{
  inset:-24px 0 0;
  border-radius:30px;
  background:var(--tabs-panel-bg);
  z-index:-1;
}

/* Trust & Security section */
.security-section{
  border-radius:32px;
  padding:36px;
  background:linear-gradient(135deg,#03091f,#0f1f4b 50%,#1f4ed6);
  color:#e6eeff;
  display:flex;
  flex-direction:column;
  gap:24px;
  border:1px solid rgba(70,90,200,0.4);
  box-shadow:0 30px 80px rgba(15,23,42,0.55);
  margin-top:32px;
}
.security-section h2{
  margin:0;
  font-size:28px;
  font-weight:800;
  color:#f8fafc;
}
.security-section p{
  margin:10px 0 0;
  color:#cbd5f5;
  font-size:14px;
  line-height:1.6;
}
.security-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
  margin-top:12px;
}
.security-card{
  border-radius:24px;
  padding:22px;
  background:linear-gradient(180deg,rgba(12,22,49,0.95),rgba(12,21,43,0.9));
  border:1px solid rgba(92,154,255,0.35);
  box-shadow:0 24px 50px rgba(6,11,25,0.65);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.security-card h3{
  margin:0;
  font-size:16px;
  font-weight:700;
  color:#c3d3ff;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.security-card p{
  margin:0;
  color:#d0daff;
  font-size:14px;
}
.security-card ul{
  margin:0;
  padding-left:18px;
  color:#9eb7ff;
  font-size:12px;
  line-height:1.6;
  list-style:disc;
}

@media (max-width:640px){
  .security-grid{
    display:flex;
    gap:16px;
    overflow-x:auto;
    padding-bottom:6px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .security-card{
    min-width:240px;
    scroll-snap-align:start;
  }
}

.tiers-table-scroll{
  width:100%;
}

@media (max-width: 720px){
  [data-tabs-shell] .token-tabs{
    overflow-x:auto;
    padding-bottom:4px;
  }
  [data-tabs-shell] .token-tab{
    flex:1 0 auto;
    white-space:nowrap;
    padding:6px 10px;
  }
  [data-tabs-shell] .token-panel-content{
    padding:20px 10px;
  }
  [data-tabs-shell] .token-panel-stack{
    padding:36px 12px 20px;
  }
  .tiers-table-scroll{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .tiers-table-scroll .gradient-table{
    min-width:520px;
  }
}