:root{
  --cv-bg-start:#0a0f1e;
  --cv-bg-end:#060913;
  --cv-primary:#9b6bff;     /* purple */
  --cv-primary-2:#63e6be;   /* mint */
  --cv-accent:#ffd166;      /* soft gold */
  --cv-accent-2:#00d4ff;    /* cyan */
  --cv-text:#ffffff;        /* pure white for better contrast */
  --cv-muted:#d1d5db;       /* lighter gray for better readability */
  --cv-card:#1a1a1a;        /* darker card background */
  --cv-soft:#2a2a2a;        /* lighter soft background */
  --cv-border:rgba(255,255,255,.08);
  --token-field-height: 160px; /* keep upload + description exactly equal */
  --nav-offset: 80px; /* offset for sticky navbar when scrolling to anchors */
}

/* Fee tick option layout + descriptions */
#launch #feeTicks{
  display: flex;
  flex-wrap: nowrap; /* keep in a row */
  justify-content: center;
  gap: 1.25rem; /* even gap between items */
  align-items: flex-start;
  margin-bottom: .75rem; /* breathing room before CTA */
  overflow-x: auto; /* allow horizontal scroll on narrow screens */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
#launch #feeTicks .fee-option{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 220px; /* desktop/tablet default */
}
#launch #feeTicks .fee-desc{
  font-weight: 500; /* not bold */
  font-size: .98rem; /* slightly smaller for better fit */
  line-height: 1.25;
  letter-spacing: .1px;
  color: rgba(255,255,255,.95);
  margin: 0 0 .45rem 0; /* a bit tighter */
  text-align: center;
  text-wrap: balance;
  white-space: normal;
}
@media (max-width: 991.98px){
  #launch #feeTicks{ justify-content: space-between; }
  #launch #feeTicks .fee-option{ min-width: 160px; }
  #launch #feeTicks .fee-desc{ font-size: .9rem; }
}
@media (max-width: 767px){
  #launch #feeTicks{ gap: .5rem; justify-content: space-between; overflow-x: hidden; }
  #launch #feeTicks .fee-option{ flex: 1 1 0; min-width: 0; }
  #launch #feeTicks .fee-desc{ font-size: .82rem; line-height: 1.15; margin-bottom: .3rem; min-height: 2.5rem; display: flex; flex-direction: column; justify-content: center; }
  #launch #feeTicks .fee-toggle-row{ gap:.3rem; align-items: center; flex-direction: row; flex-wrap: wrap; justify-content: center; }
  #launch #feeTicks .fee-price{ font-size: .7rem; white-space: nowrap; }
}
/* Toggle switch + price layout */
#launch #feeTicks .fee-toggle-row{ display:flex; align-items:center; gap:.6rem; }
#launch #feeTicks input[type="radio"],
#launch #feeTicks input[type="checkbox"]{ position:absolute; opacity:0; pointer-events:none; }
#launch #feeTicks .toggle-switch{
  width:56px; height:30px; border-radius:999px; flex:0 0 56px;
  background: linear-gradient(135deg, #14c9cb, #2bd4ff); /* ON color */
  position:relative; box-shadow: inset 0 0 0 2px rgba(255,255,255,.15);
  transition: filter .2s ease, background .2s ease;
}
#launch #feeTicks .toggle-switch::after{
  content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%;
  background:#fff; box-shadow: 0 4px 10px rgba(0,0,0,.25); transition: transform .22s ease;
}
/* OFF state uses template background */
#launch #feeTicks input:not(:checked) + .toggle-switch{
  background: var(--cv-soft);
  filter: none;
}
#launch #feeTicks input:not(:checked) + .toggle-switch::after{ transform: translateX(0); }
/* ON state */
#launch #feeTicks input:checked + .toggle-switch{ filter: saturate(1) brightness(1); }
#launch #feeTicks input:checked + .toggle-switch::after{ transform: translateX(26px); }
/* Disabled (locked) */
#launch #feeTicks input[disabled] + .toggle-switch{ cursor:not-allowed; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }
#launch #feeTicks .fee-price{ color: rgba(255,255,255,.8); font-weight:600; letter-spacing:.2px; }

/* Subtle one-line notes under each fee toggle */
#launch #feeTicks .fee-note{
  margin-top: .35rem;
  font-size: .78rem;
  line-height: 1.05;
  color: rgba(255,193,7,.9); /* slightly softer than pure warning */
  white-space: normal; /* allow two-line format */
}

/* Smaller toggles for tight mobile widths */
@media (max-width: 575.98px){
  #launch #feeTicks .toggle-switch{ width:38px; height:20px; flex:0 0 38px; }
  #launch #feeTicks .toggle-switch::after{ width:16px; height:16px; top:2px; left:2px; }
  #launch #feeTicks input:checked + .toggle-switch::after{ transform: translateX(18px); }
  #launch #feeTicks .fee-note{ font-size: .7rem; }
}
html,body{
  height:100%;
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(155,107,255,.18), transparent),
    radial-gradient(1200px 800px at -10% 110%, rgba(99,230,190,.14), transparent),
    linear-gradient(180deg, var(--cv-bg-start) 0%, var(--cv-bg-end) 100%);
  color:var(--cv-text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  overflow-anchor: none; /* prevent scroll anchoring jumps to footer */
}

/* Fix main content positioning */
body.landing {
  position: relative;
  min-height: 100vh;
}

.navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background:
    linear-gradient(180deg, rgba(20,27,48,.85), rgba(12,18,36,.6));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cv-border);
}
a{ color: var(--cv-accent); }
a:hover{ color: var(--cv-accent-2); }
.btn-brand{
  background: linear-gradient(135deg, var(--cv-primary), var(--cv-accent-2));
  color:#111;
  font-weight:700;
  border:none;
  border-radius: .65rem;
  box-shadow: 0 10px 28px rgba(0,212,255,.20), 0 2px 0 0 rgba(0,0,0,.25), 0 0 0 .15rem rgba(0,212,255,.08);
}
.btn-brand:hover{ filter: brightness(1.07); box-shadow: 0 12px 34px rgba(0,212,255,.26), 0 2px 0 0 rgba(0,0,0,.28), 0 0 0 .2rem rgba(0,212,255,.10); }
.btn-outline-brand{
  color: var(--cv-accent);
  border:2px solid var(--cv-accent);
  border-radius: .65rem;
  background: transparent;
  box-shadow: 0 0 0 .14rem rgba(255,209,102,.08);
}
.btn-outline-brand:hover{ background: var(--cv-accent); color:#111; box-shadow: 0 10px 30px rgba(255,209,102,.18), 0 0 0 .18rem rgba(255,209,102,.10); }
.btn-outline-brand:focus{ box-shadow: 0 0 0 .22rem rgba(255,209,102,.18); }
.glass{
  background: rgba(255,255,255,.04);
  border:1px solid var(--cv-border);
  box-shadow: 0 8px 36px rgba(0,0,0,.38);
  backdrop-filter: blur(8px);
  border-radius: 1.25rem;
}
/* Slightly stronger hero stat card (matches screenshot) */
.hero .glass{
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 10px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06);
}
/* Prominent wallet options */
.wallet-option{
  border-radius: .9rem;
  border: 1px solid transparent;
  color: #0d0d0d;
  font-weight: 700;
  box-shadow: 0 12px 34px rgba(0,0,0,.35), 0 0 0 .15rem rgba(255,255,255,.06) inset;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.wallet-option .icon{ font-size: 1.25rem; }
.wallet-option .logo{ width: 24px; height: 24px; border-radius: 6px; display:inline-block; }
.wallet-option.phantom{
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  border-color: rgba(167,139,250,.6);
  color: #0d0d0d;
}
.wallet-option.solflare{
  background: linear-gradient(135deg, #ffb703, #fb5607);
  border-color: rgba(255,183,3,.55);
  color: #0d0d0d;
}
.wallet-option.backpack{
  /* Backpack brand-inspired gradient */
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  border-color: rgba(124,58,237,.55);
  color: #0d0d0d;
}
.wallet-option.sollet{
  /* Sollet/solana-inspired gradient */
  background: linear-gradient(135deg, #00ffa3, #dc1fff);
  border-color: rgba(220,31,255,.45);
  color: #0d0d0d;
}
.wallet-option:hover{ transform: translateY(-2px); filter: brightness(1.05); }
.wallet-option:active{ transform: translateY(0); filter: brightness(.98); }

/* Sidebar mobile menu */
.sidebar-overlay{
  position: fixed; inset:0; background: rgba(0,0,0,.4);
  opacity:0; visibility:hidden; transition: opacity .25s ease, visibility .25s step-end;
  z-index: 1040;
}
.sidebar{
  position: fixed; inset:0 auto 0 0; width: 78%; max-width: 380px; height: 100vh;
  background: rgba(10,15,30,.92);
  backdrop-filter: blur(10px);
  transform: translateX(-100%);
  transition: transform .3s ease; z-index: 1050; display:flex; flex-direction: column;
}
.sidebar.open{ transform: translateX(0); }
.sidebar-overlay.open{ opacity:1; visibility:visible; transition: opacity .25s ease, visibility .25s step-start; }
.sidebar-header{ padding: 1rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-body{ display:flex; flex-direction:column; padding: 1rem; gap:.25rem; }
.sidebar-link{ color:#fff; text-decoration:none; padding:.9rem 1rem; border-radius:.75rem; }
.sidebar-link:hover{ background: rgba(255,255,255,.06); }
.sidebar-footer{ margin-top:auto; padding: 1rem; border-top: 1px solid rgba(255,255,255,.08); }
@media (min-width: 992px){
  .sidebar, .sidebar-overlay{ display:none; }
}

/* Small logos inside navbar Select Wallet button */
.wallet-logo{ width: 18px; height: 18px; border-radius: 4px; display:inline-block; object-fit: cover; }
.btn .logos{ display:inline-flex; align-items:center; gap:.25rem; margin-right:.35rem; }
.hero{
  position:relative; overflow:hidden;
  contain: layout style paint; /* Containment optimization */
}
.hero:before{
  content:""; position:absolute; inset:-40% -20% 0 -20%;
  background:
    radial-gradient(720px 320px at 62% 12%, rgba(99,230,190,.20), transparent),
    radial-gradient(940px 400px at 12% 88%, rgba(155,107,255,.22), transparent);
  z-index: 0;
  pointer-events: none; /* do not block clicks on buttons */
  will-change: transform; /* GPU optimization */
  transform: translateZ(0); /* Force hardware acceleration */
}
.hero > .container{ position: relative; z-index: 1; }
.badge-soft{
  background: rgba(155,107,255,.16);
  border:1px solid rgba(155,107,255,.35);
  color:#e9d5ff;
}
.card-ghost{
  background: linear-gradient(170deg, #0d142a 0%, #0a0f20 100%);
  border:1px solid var(--cv-border);
  border-radius:1rem;
  box-shadow:0 16px 50px rgba(0,0,0,.5);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card-ghost:hover{ transform: translateY(-6px) rotateX(2deg); box-shadow:0 24px 70px rgba(0,0,0,.6); }
/* Pricing cards */
.pricing-card{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,209,102,.45);
  border-radius: 1rem;
  box-shadow: 0 16px 50px rgba(0,0,0,.5), 0 0 0 .15rem rgba(255,209,102,.15);
}
.pricing-card:hover{ box-shadow:0 24px 70px rgba(0,0,0,.6), 0 0 0 .15rem rgba(255,209,102,.15); transform: translateY(-4px); }
.pricing-card .display-6, .pricing-card .h3{ line-height: 1.1; }
.pricing-card ul{ padding-left: 1.1rem; }
.ribbon{
  position:absolute; right:-6px; top:14px; background:var(--cv-accent); color:#121212; font-weight:800; font-size:.8rem; padding:.25rem .6rem; border-radius:.3rem 0 0 .3rem;
}
.ticker{ white-space:nowrap; overflow:hidden; }
.ticker-inner{ display:inline-block; padding-left:100%; animation:ticker 24s linear infinite; }
@keyframes ticker{ 0%{ transform:translateX(0)} 100%{ transform:translateX(-100%)} }
.bar{ height:10px; border-radius:8px; background:#111827; overflow:hidden; }
.bar>span{ display:block; height:100%; background: linear-gradient(90deg, #1ed760, #77ffc0); }

/* Live activity card outline (exact mint outline like original) */
.stat-panel{
  border-color: rgba(119,255,192,.35) !important;
  box-shadow: 0 6px 40px rgba(0,0,0,.35), 0 0 0 .15rem rgba(119,255,192,.10) inset !important;
}
.stat-panel > .p-3{
  border: 1px solid rgba(119,255,192,.22) !important;
}
.form-control,.form-select{
  background: rgba(255,255,255,.03);
  border:1px solid var(--cv-border);
  color:var(--cv-text);
}
.form-control:focus,.form-select:focus{
  background: rgba(255,255,255,.05);
  border-color: #ffd166;
  box-shadow: 0 0 0 2px rgba(255,209,102,.4);
  color:#fff;
}
.divider{ height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent); }
.footer{ border-top:1px solid var(--cv-border); }
.anchor-offset{ display:block; height:0; scroll-margin-top: var(--nav-offset); }
/* Removed: a[href^="#"]{ scroll-behavior: smooth; } - conflicts with JS offset scrolling */
#launch, #features, #pricing, #how, #testimonials, #contact{ scroll-margin-top: var(--nav-offset); }
.wallet-pill{
  display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .75rem; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid var(--cv-border);
}
.tick-pill input{ display:none; }
.tick-pill label{
  display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .9rem; border-radius:999px; cursor:pointer;
  background: rgba(255,255,255,.06); border:1px solid var(--cv-border); margin-right:.5rem; user-select:none;
}
.tick-pill input:checked + label{
  background: linear-gradient(135deg, var(--cv-accent), var(--cv-accent-2));
  color:#121212; border-color: transparent; font-weight:700;
}
/* Colorful tick labels + animated gradient text */
.tick-pill label.colorful{
  position: relative;
  background:
    linear-gradient(var(--cv-soft), var(--cv-soft)) padding-box,
    linear-gradient(135deg, #ffd166, #00d4ff, #9b6bff) border-box;
  border: 1px solid transparent;
}
.tick-pill label.colorful .tick-text{
  background: linear-gradient(90deg, #ffd166, #00d4ff, #63e6be, #9b6bff, #ffd166);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: text-sheen 6s linear infinite;
  font-weight: 700;
}
@keyframes text-sheen{ 0%{ background-position: 0% 50% } 100%{ background-position: 100% 50% } }
/* Ensure checked colorful labels keep same colorful style and animated text */
.tick-pill input:checked + label.colorful{
  background:
    linear-gradient(var(--cv-soft), var(--cv-soft)) padding-box,
    linear-gradient(135deg, #ffd166, #00d4ff, #9b6bff) border-box;
  color: inherit;
  border: 1px solid transparent;
  box-shadow: 0 0 0 0.15rem rgba(255,209,102,.15);
}
.carousel-item img{
  width:100%; height: 360px; object-fit: cover; border-radius: 1rem;
}
.team-card{
  text-align:center; padding:1rem; border-radius:1rem; background:rgba(255,255,255,.04); border:1px solid var(--cv-border);
}
.badge-gradient{
  background: linear-gradient(135deg, var(--cv-primary), var(--cv-accent-2));
  color:#111; font-weight:700;
  padding: 1.5rem 2.5rem;
  font-size: 1.5rem;
  /* Add subtle outline and ambient glow so it matches desktop/web view */
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 6px 22px rgba(0,0,0,.35), 0 0 0 .14rem rgba(0,212,255,.12);
  border-radius: .65rem;
}

/* Responsive navbar badge sizing */
@media (max-width: 991.98px) {
  .badge-gradient {
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
  }
}

@media (max-width: 575.98px) {
  .badge-gradient {
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
  }
}
/* Mobile sidebar header logo containment */
.sidebar-header{
  align-items: center;
}
.sidebar-header .badge-gradient{
  display: inline-block;
  max-width: 65%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: .55rem 1rem; /* slightly smaller in constrained header */
  font-size: 1rem;
}
/* Very small phones: keep logo inside header and away from close icon */
@media (max-width: 380px){
  .sidebar-header .badge-gradient{
    max-width: 58%;
    padding: .45rem .85rem;
    font-size: .92rem;
  }
}
/* Social media row in Why Choose Crptom */
.social-row{
  display:flex; align-items:center; gap:.5rem; flex-wrap: nowrap;
  overflow-x: auto; padding-bottom:.25rem;
}
.btn-social{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .7rem; border-radius:.75rem; text-decoration:none;
  background: rgba(255,255,255,.06);
  border:1px solid var(--cv-border);
  color: var(--cv-text);
  transition: transform .15s ease, filter .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.btn-social:hover{ transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.btn-social i{ font-size: 1rem; line-height:1; }
.btn-social .icon{ width:18px; height:18px; display:inline-block; }
/* Platform accents */
.btn-telegram{ border-color: rgba(34,158,217,.45); }
.btn-telegram:hover{ box-shadow: 0 0 0 .15rem rgba(34,158,217,.15); }
.btn-discord{ border-color: rgba(88,101,242,.45); }
.btn-discord:hover{ box-shadow: 0 0 0 .15rem rgba(88,101,242,.18); }
.btn-twitter{ border-color: rgba(255,255,255,.35); }
.btn-twitter:hover{ box-shadow: 0 0 0 .15rem rgba(255,255,255,.15); }
.btn-instagram{ border-color: rgba(228,64,95,.5); }
.btn-instagram:hover{ box-shadow: 0 0 0 .15rem rgba(228,64,95,.18); }
.btn-linkedin{ border-color: rgba(10,102,194,.5); }
.btn-linkedin:hover{ box-shadow: 0 0 0 .15rem rgba(10,102,194,.18); }
.btn-wechat{ border-color: rgba(9,187,7,.5); }
.btn-wechat:hover{ box-shadow: 0 0 0 .15rem rgba(9,187,7,.18); }
/* Why Choose panel refinements */
.why-panel .social-row{ margin-top:.3rem; } /* ~70% tighter than default spacing */
.why-panel .stats-card .desc{
  font-size: .8rem;
  line-height: 1.25;
  color: rgba(255,255,255,.65);
  margin-top: .2rem;
}
/* Responsive typography for Uptime/Support cards */
.why-panel .stats-card .small{ font-size: .85rem; }
.why-panel .stats-card .h5{ font-size: 1.15rem; }
.why-panel .stats-card .bullets{ margin: .25rem 0 0; padding-left: 1rem; font-size: .85rem; line-height: 1.25; }

@media (max-width: 575.98px){
  .why-panel .stats-card .small{ font-size: .8rem; }
  .why-panel .stats-card .h5{ font-size: 1rem; }
  .why-panel .stats-card .desc{ font-size: .75rem; }
  .why-panel .stats-card .bullets{ font-size: .8rem; }
}
@media (min-width: 576px) and (max-width: 991.98px){
  .why-panel .stats-card .small{ font-size: .82rem; }
  .why-panel .stats-card .h5{ font-size: 1.08rem; }
  .why-panel .stats-card .desc{ font-size: .78rem; }
  .why-panel .stats-card .bullets{ font-size: .82rem; }
}
@media (min-width: 1200px){
  .why-panel .stats-card .small{ font-size: .9rem; }
  .why-panel .stats-card .h5{ font-size: 1.2rem; }
  .why-panel .stats-card .desc{ font-size: .82rem; }
  .why-panel .stats-card .bullets{ font-size: .88rem; }
}
/* Mobile layout fixes */
@media (max-width: 991.98px){
  /* Stack fee mode buttons vertically with spacing */
  #launch .tick-pill{ display:grid; grid-template-columns: 1fr; gap:.5rem; }
  #launch .tick-pill label{ width:100%; justify-content:center; margin-right:0; }
  #launch .tick-pill .tick-text{ display:inline-flex; align-items:center; gap:.4rem; }
}
/* Desktop/tablet vertical balance for Pricing section */
@media (min-width: 992px){
  #pricing{ padding-top: 5rem; padding-bottom: 6rem; }
  #pricing .row.g-4{ margin-top: -2rem; }
}
@media (min-width: 1200px){
  #pricing{ padding-top: 6rem; padding-bottom: 9rem; }
  #pricing .row.g-4{ margin-top: -3rem; }
}
/* Ensure 3 pricing cards in one row on tablets (iPad Mini/Air landscape) */
@media (min-width: 768px) and (max-width: 991.98px){
  #pricing .col-md-6.col-lg-4{ flex: 0 0 33.3333%; max-width: 33.3333%; }
}

/* Desktop/tablet vertical balance for Features section */
@media (min-width: 992px){
  #features{ padding-top: 5rem; padding-bottom: 6rem; }
  #features .row.g-4{ margin-top: -1.5rem; }
}
@media (min-width: 1200px){
  #features{ padding-top: 6rem; padding-bottom: 8rem; }
  #features .row.g-4{ margin-top: -2rem; }
}

/* Desktop/tablet vertical balance for How It Works section */
@media (min-width: 992px){
  #how{ padding-top: 5rem; padding-bottom: 6rem; }
  #how .row.g-4{ margin-top: -1.25rem; }
}
@media (min-width: 1200px){
  #how{ padding-top: 6rem; padding-bottom: 8rem; }
  #how .row.g-4{ margin-top: -1.75rem; }
}
/* Make navbar brand badge slightly larger */
.navbar .navbar-brand .badge{
  font-size: 1.05rem;
  padding: .5rem 1.2rem;
  border-radius: .5rem !important;
}
@media (min-width: 992px){
  .navbar .navbar-brand .badge{ font-size: 1.1rem; }
}
/* Upload & preview */
.upload-box{
  background: rgba(255,255,255,.03);
  border: 1px dashed var(--cv-border);
  border-radius: .75rem;
  height: var(--token-field-height); /* exact match to description box */
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:.5rem;
  padding:.5rem 1rem;
  box-sizing: border-box;
}
.avatar-preview{ width:100px; height:100px; border-radius:999px; overflow:hidden; border:1px solid var(--cv-border); background:linear-gradient(135deg, rgba(155,107,255,.2), rgba(0,212,255,.15)); display:flex; align-items:center; justify-content:center; }
.avatar-preview img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Make description height explicit to match upload box */
#tokenDescription{ height:var(--token-field-height); box-sizing: border-box; resize: none; }

/* Improve text rendering and contrast */
body, .text-white, .text-light, .navbar-brand, .nav-link {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: #ffffff !important;
  text-shadow: 0 0 1px rgba(0,0,0,0.5);
}

/* Form inputs with better contrast */
.form-control, .form-select {
  background-color: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  color: #ffffff !important;
  backdrop-filter: blur(10px);
}

.form-control:focus, .form-select:focus {
  background-color: rgba(255,255,255,0.15) !important;
  border-color: var(--cv-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(155, 107, 255, 0.25) !important;
  color: #ffffff !important;
}

/* Glass effect improvements (admin-only to avoid overriding landing UI) */
.admin-panel .glass,
.main-content .glass {
  background: rgba(26, 26, 26, 0.8) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}

/* Button improvements (admin-only; keep landing page original button look) */
.admin-panel .btn-brand,
.admin-panel .btn-primary {
  background: linear-gradient(135deg, var(--cv-primary), var(--cv-primary-2)) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

/* Card improvements - default dark cards (only for non-admin sections) */
.card:not(.dashboard-stats .card):not(.payment-stats .card):not(.service-monitoring .card):not(.bg-primary):not(.bg-success):not(.bg-warning):not(.bg-danger):not(.bg-info):not(.bg-secondary) {
  background: rgba(26, 26, 26, 0.9) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  backdrop-filter: blur(15px) !important;
}

.card-body {
  color: #ffffff !important;
}

/* Admin panel colorful cards - restored original design */
.card.bg-primary {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

.card.bg-success {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.card.bg-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.card.bg-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.card.bg-info {
  background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
  border: 1px solid rgba(6, 182, 212, 0.3) !important;
}

.card.bg-secondary {
  background: linear-gradient(135deg, #6b7280, #4b5563) !important;
  border: 1px solid rgba(107, 114, 128, 0.3) !important;
}

/* Opacity variants for colorful backgrounds */
.card.bg-primary.bg-opacity-10 {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(29, 78, 216, 0.15)) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

.card.bg-success.bg-opacity-10 {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.15)) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.card.bg-info.bg-opacity-10 {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(8, 145, 178, 0.15)) !important;
  border: 1px solid rgba(6, 182, 212, 0.3) !important;
}

.card.bg-warning.bg-opacity-10 {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.15)) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

/* Service monitoring cards */
.service-card {
  background: linear-gradient(135deg, rgba(26, 26, 26, 0.9), rgba(38, 38, 38, 0.8)) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  backdrop-filter: blur(15px) !important;
}

.service-card.online {
  border-left: 4px solid #10b981 !important;
}

.service-card.offline {
  border-left: 4px solid #ef4444 !important;
}

/* Table fixes with better contrast */
.table-dark {
  background-color: rgba(26, 26, 26, 0.95) !important;
  color: #ffffff !important;
}

.table-dark th,
.table-dark td {
  background-color: transparent !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.2) !important;
}

.table-dark tbody tr:hover {
  background-color: rgba(255,255,255,0.1) !important;
  color: #ffffff !important;
}

/* Dropdown and select fixes */
.form-select, .dropdown-menu {
  background-color: rgba(26, 26, 26, 0.95) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
}

.form-select option, .dropdown-item {
  background-color: rgba(26, 26, 26, 0.95) !important;
  color: #ffffff !important;
}

.dropdown-item:hover, .dropdown-item:focus {
  background-color: rgba(155, 107, 255, 0.2) !important;
  color: #ffffff !important;
}

/* Content sections */
.content-section {
  background: transparent !important;
  color: #ffffff !important;
}

/* Bootstrap overrides for admin panel */
.bg-dark {
  background-color: rgba(26, 26, 26, 0.9) !important;
}

.text-secondary {
  color: #d1d5db !important;
}

.text-muted {
  color: #9ca3af !important;
}
/* Dashboard stats cards with colors */
.dashboard-stats .col-md-3:nth-child(1) .card {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

.dashboard-stats .col-md-3:nth-child(2) .card {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.dashboard-stats .col-md-3:nth-child(3) .card {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.dashboard-stats .col-md-3:nth-child(4) .card {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.dashboard-stats .col-md-3:nth-child(5) .card {
  background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
  border: 1px solid rgba(6, 182, 212, 0.3) !important;
}

.dashboard-stats .col-md-3:nth-child(6) .card {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
  border: 1px solid rgba(139, 92, 246, 0.3) !important;
}

/* Payment system cards */
.payment-stats .col-md-3:nth-child(1) .card {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.payment-stats .col-md-3:nth-child(2) .card {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

.payment-stats .col-md-3:nth-child(3) .card {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.payment-stats .col-md-3:nth-child(4) .card {
  background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
  border: 1px solid rgba(6, 182, 212, 0.3) !important;
}

/* Service monitoring cards */
.service-monitoring .col-md-3:nth-child(1) .card {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

.service-monitoring .col-md-3:nth-child(2) .card {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.service-monitoring .col-md-3:nth-child(3) .card {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.service-monitoring .col-md-3:nth-child(4) .card {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.main-content {
  background: transparent !important;
}

.main-content .card,
.main-content .table-responsive,
.admin-panel .card {
  color: #ffffff !important;
}

/* Ensure all text in admin sections is visible */
.admin-panel h1,
.admin-panel h2, 
.admin-panel h3,
.admin-panel h4,
.admin-panel h5,
.admin-panel h6,
.admin-panel p,
.admin-panel span,
.admin-panel div,
.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.main-content h5,
.main-content h6,
.main-content p,
.main-content span,
.main-content div {
  color: #ffffff !important;
}

/* Loading and empty states */
.spinner-border {
  color: var(--cv-primary) !important;
}

.alert-info {
  background-color: rgba(59, 130, 246, 0.2) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  color: #ffffff !important;
}

/* Make file input smaller inside upload box without affecting global inputs */
.upload-box input.form-control{ height: 34px; padding: .25rem .5rem; font-size: .9rem; }

/* ========== LANDING PAGE SPECIFIC STYLES ========== */
/* HTML and Body background gradients for landing */
html, body {
  height: 100%;
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(155,107,255,.18), transparent),
    radial-gradient(1200px 800px at -10% 110%, rgba(99,230,190,.14), transparent),
    linear-gradient(180deg, var(--cv-bg-start) 0%, var(--cv-bg-end) 100%);
  color: var(--cv-text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  overflow-anchor: none;
}

/* Base link colors */
a { color: var(--cv-accent); }
a:hover { color: var(--cv-accent-2); }

/* Navbar base styling */
.navbar {
  background: rgba(10, 15, 30, .6);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cv-border);
}

/* Button base styles */
.btn-brand {
  background: linear-gradient(135deg, var(--cv-primary), var(--cv-accent-2));
  color: #111;
  font-weight: 700;
  border: none;
  box-shadow: 0 10px 30px rgba(0,212,255,.2);
}
.btn-brand:hover { 
  filter: brightness(1.06); 
}

.btn-outline-brand {
  color: var(--cv-accent);
  border: 2px solid var(--cv-accent);
}
.btn-outline-brand:hover { 
  background: var(--cv-accent); 
  color: #111; 
}

/* Glass effects */
.glass {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--cv-border);
  box-shadow: 0 6px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  border-radius: 1.25rem;
}

/* Wallet options */
.wallet-option {
  border-radius: .9rem;
  border: 1px solid transparent;
  color: #0d0d0d;
  font-weight: 700;
  box-shadow: 0 12px 34px rgba(0,0,0,.35), 0 0 0 .15rem rgba(255,255,255,.06) inset;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.wallet-option .icon { font-size: 1.25rem; }
.wallet-option .logo { width: 24px; height: 24px; border-radius: 6px; display: inline-block; }
.wallet-option.phantom {
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  border-color: rgba(167,139,250,.6);
  color: #0d0d0d;
}
.wallet-option.solflare {
  background: linear-gradient(135deg, #ffb703, #fb5607);
  border-color: rgba(255,183,3,.55);
  color: #0d0d0d;
}
.wallet-option:hover { transform: translateY(-2px); filter: brightness(1.05); }
.wallet-option:active { transform: translateY(0); filter: brightness(.98); }

/* Hero section */
.hero {
  position: relative;
  overflow: hidden;
}
.hero:before {
  content: "";
  position: absolute;
  inset: -40% -20% 0 -20%;
  background:
    radial-gradient(700px 300px at 60% 10%, rgba(99,230,190,.20), transparent),
    radial-gradient(900px 380px at 10% 90%, rgba(155,107,255,.22), transparent);
  z-index: 0;
  pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; }

/* Badge styles */
.badge-soft {
  background: rgba(155,107,255,.16);
  border: 1px solid rgba(155,107,255,.35);
  color: #e9d5ff;
}
.badge-gradient {
  background: linear-gradient(135deg, var(--cv-primary), var(--cv-accent-2));
  color: #111;
  font-weight: 700;
}

/* Card styles */
.card-ghost {
  background: linear-gradient(170deg, #0d142a 0%, #0a0f20 100%);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 1rem;
  box-shadow: 0 16px 50px rgba(0,0,0,.5);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card-ghost:hover { 
  transform: translateY(-6px) rotateX(2deg); 
  box-shadow: 0 24px 70px rgba(0,0,0,.6); 
}

/* Pricing cards */
.pricing-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,209,102,.45);
  border-radius: 1rem;
  box-shadow: 0 16px 50px rgba(0,0,0,.5), 0 0 0 .15rem rgba(255,209,102,.15);
}
.pricing-card:hover { 
  box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 0 .15rem rgba(255,209,102,.15); 
  transform: translateY(-4px); 
}
.pricing-card .display-6, .pricing-card .h3 { line-height: 1.1; }
.pricing-card ul { padding-left: 1.1rem; }

.ribbon {
  position: absolute;
  right: -6px;
  top: 14px;
  background: var(--cv-accent);
  color: #121212;
  font-weight: 800;
  font-size: .8rem;
  padding: .25rem .6rem;
  border-radius: .3rem 0 0 .3rem;
}

/* Footer and dividers */
.divider { 
  height: 1px; 
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent); 
}
.footer { 
  border-top: 1px solid var(--cv-border); 
}
.anchor-offset { 
  display: block; 
  height: 0; 
  scroll-margin-top: var(--nav-offset); 
}

/* Wallet pill */
.wallet-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--cv-border);
}

/* Small wallet logos */
.wallet-logo { 
  width: 18px; 
  height: 18px; 
  border-radius: 4px; 
  display: inline-block; 
  object-fit: cover; 
}
.btn .logos { 
  display: inline-flex; 
  align-items: center; 
  gap: .25rem; 
  margin-right: .35rem; 
}

/* Sidebar mobile menu */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s step-end;
  z-index: 1040;
}
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 72%;
  max-width: 420px;
  height: 100vh;
  background: rgba(10,15,30,.92);
  backdrop-filter: blur(10px);
  transform: translateX(-100%);
  transition: transform .3s ease;
  z-index: 1050;
  display: flex;
  flex-direction: column;
}
.sidebar.open { transform: translateX(0); }
.sidebar-overlay.open { 
  opacity: 1; 
  visibility: visible; 
  transition: opacity .25s ease, visibility .25s step-start; 
}
.sidebar-header { 
  padding: 1rem 1rem; 
  border-bottom: 1px solid rgba(255,255,255,.08); 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
}
.sidebar-header > .d-flex:first-child { 
  flex: 1 1 auto; 
  min-width: 0; 
  padding-right: .5rem; 
}
.sidebar-header .btn-close { 
  flex: 0 0 auto; 
}
.sidebar-body { 
  display: flex; 
  flex-direction: column; 
  padding: 1rem; 
  gap: .25rem; 
}
.sidebar-link { 
  color: #fff; 
  text-decoration: none; 
  padding: .9rem 1rem; 
  border-radius: .75rem;
  background: transparent !important;
  color: #ffd166 !important;
  font-weight: 600 !important;
  border: 2px solid #ffd166 !important;
  border-radius: .65rem !important;
  box-shadow: 0 0 0 .15rem rgba(255,209,102,.08) !important;
  margin-bottom: .5rem !important;
  text-decoration: none !important;
  padding: .6rem 1rem !important;
  display: block !important;
}
.sidebar-link:hover { 
  background: #ffd166 !important;
  color: #111 !important;
  text-decoration: none !important;
  box-shadow: 0 10px 30px rgba(255,209,102,.18), 0 0 0 .18rem rgba(255,209,102,.10) !important;
}
.sidebar-footer { 
  margin-top: auto; 
  padding: 1rem; 
  border-top: 1px solid rgba(255,255,255,.08); 
}
@media (min-width: 992px) {
  .sidebar, .sidebar-overlay { display: none; }
}

/* Mobile sidebar header: gold outlined style */
aside#sidebarMenu .sidebar-header .badge,
aside#sidebarMenu .sidebar-header .badge-gradient {
  background: linear-gradient(135deg, var(--cv-primary), var(--cv-accent-2)) !important;
  color: #0f1111 !important;
  border: 2px solid #ffd166 !important;
  box-shadow: inset 0 0 0 1px rgba(255,209,102,.35), 0 0 0 .12rem rgba(255,209,102,.12) !important; 
  border-radius: .5rem !important;
  padding: .48rem .9rem !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: .15px !important;
  white-space: nowrap;
  overflow: visible !important;
  max-width: none !important;
}
@media (max-width: 380px) {
  aside#sidebarMenu .sidebar-header .badge,
  aside#sidebarMenu .sidebar-header .badge-gradient {
    padding: .44rem .8rem !important;
    font-size: .95rem !important;
  }
}
/* Landing-only: exact navbar visuals */
body.landing .navbar .nav-link{ 
  color: #ffd166 !important; 
  border: 2px solid #ffd166 !important;
  border-radius: .5rem !important;
  padding: .4rem .8rem !important;
  margin: 0 .25rem !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: all .2s ease !important;
}
body.landing .navbar .nav-link:hover{ 
  color: #111 !important; 
  background: #ffd166 !important;
  text-decoration: none !important;
}
body.landing .navbar .navbar-brand .badge{
  border-radius: .5rem !important;
  padding: .5rem 1.2rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .15px;
  background: linear-gradient(135deg, var(--cv-primary), var(--cv-accent-2)) !important;
  color:#0f1111;
  border: 2px solid #ffd166 !important;
  box-shadow: 0 0 0 .12rem rgba(255, 209, 102, .10) !important;
}
body.landing .navbar .btn-brand{
  border-radius: 999px;
  padding: .38rem 1rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--cv-primary), var(--cv-accent-2));
  color:#0b0d0e;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 6px 18px rgba(0,0,0,.25), 0 0 0 .12rem rgba(0,212,255,.10);
  text-shadow: 0 1px 1px rgba(255,255,255,0);
  transition: filter .15s ease, box-shadow .15s ease, transform .12s ease, color .12s ease, text-shadow .12s ease;
}
body.landing .navbar .btn-brand:hover{
  filter: brightness(1.12) saturate(1.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.32), 0 0 0 .16rem rgba(0,212,255,.14);
  transform: translateY(-1px);
  color:#ffffff;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
  animation: btn-blink .28s ease-in-out 1;
}
body.landing .navbar .btn-brand:focus-visible{
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(0,212,255,.22), 0 8px 22px rgba(0,0,0,.3);
}
@keyframes btn-blink{
  0%{ filter: brightness(1) }
  50%{ filter: brightness(1.22) }
  100%{ filter: brightness(1.12) }
}

/* Landing page form styles */
body.landing #contact .form-control,
body.landing #contact .form-select,
body.landing #contact textarea.form-control{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--cv-border) !important;
  color: var(--cv-text) !important;
  box-shadow: none !important;
}
body.landing #contact .form-control::placeholder,
body.landing #contact textarea.form-control::placeholder{ color: rgba(255,255,255,.75); }

body.landing #contact .form-control:focus,
body.landing #contact .form-select:focus,
body.landing #contact textarea.form-control:focus{
  background: rgba(255,255,255,.05) !important;
  border-color: #9b6bff !important;
  box-shadow: 0 0 0 2px rgba(155,107,255,.5) !important;
  color:#fff !important;
}

body.landing #launch .form-control,
body.landing #launch .form-select{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--cv-border) !important;
  color: var(--cv-text) !important;
  border-radius: .75rem;
}
body.landing #launch .form-control:focus,
body.landing #launch .form-select:focus{
  background: rgba(255,255,255,.05) !important;
  border-color: #ffd166 !important;
  box-shadow: 0 0 0 2px rgba(255,209,102,.6) !important;
  color:#fff !important;
}

/* Landing sidebar specific styles */
#connectBtnSidebar,
#disconnectBtnSidebar{
  background: linear-gradient(135deg, #ffd166, #fbbf24) !important;
  background-image: linear-gradient(135deg, #ffd166, #fbbf24) !important;
  background-color: #fbbf24 !important;
  color: #111 !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: .65rem !important;
  box-shadow: 0 10px 28px rgba(251,191,36,.22), 0 2px 0 0 rgba(0,0,0,.25), 0 0 0 .15rem rgba(251,191,36,.12) !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: .42rem .9rem !important;
}

/* Hero section buttons - ensure full visibility on all mobiles like iPhone 14 Pro Max */
@media (max-width: 767px) {
  .hero .d-flex.gap-2 {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    align-items: center;
    overflow: visible !important;
    width: 100%;
    gap: 0.5rem !important;
  }
  
  .hero .btn-lg {
    white-space: nowrap;
    flex: 0 1 auto;
    min-width: 0;
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }
}

/* Extra small screens - slightly reduce button size to fit both */
@media (max-width: 380px) {
  .hero .d-flex.gap-2 {
    gap: 0.4rem !important;
  }
  
  .hero .btn-lg {
    font-size: 0.9rem;
    padding: 0.45rem 0.85rem;
  }
  
  .hero .btn-lg i {
    font-size: 0.85rem;
  }
}

/* Team section carousel - controls visible, text on top */
#testimonialCarousel .carousel-control-prev,
#testimonialCarousel .carousel-control-next {
  z-index: 15 !important;
  width: 15%;
}

#testimonialCarousel .carousel-control-prev-icon,
#testimonialCarousel .carousel-control-next-icon {
  z-index: 15 !important;
}

#testimonialCarousel .carousel-item .mt-3 {
  position: relative;
  z-index: 20 !important;
  background: rgba(10, 15, 30, 0.95);
  padding: 0.75rem;
  border-radius: 0.5rem;
  margin-top: 1rem;
}

#testimonialCarousel .carousel-item .h5,
#testimonialCarousel .carousel-item .small {
  position: relative;
  z-index: 20 !important;
}