/* ==============================
   GLOBAL TYPOGRAPHY (BAMISOCKS)
   ============================== */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap");

/* Global content font */
html, body {
  font-family: "Space Grotesk", system-ui, -apple-system,
               BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* UI / Header / Navigation */
header,
.topbar,
.topbar *:not(.site-logo),
.nav,
.nav a,
.nav-cta,
.nav-user-pill,
button,
.btn,
input,
select,
textarea {
  font-family: "Inter", system-ui, -apple-system,
               BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.site-logo {
  height: 42px;
  width: auto;
  display: block;
}
/* ========== RESET ========== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ========== GLOBAL ========== */

body {
  font-family: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, #161928 0, #050611 45%, #020308 100%);
  color: #f4f6ff;
  line-height: 1.6;
}

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.4rem;
}

.section {
  padding: 3.2rem 0;
}

.section-alt {
  background: radial-gradient(circle at top left, #141726, #05060b);
}

.section-title {
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f8f6ff;
  margin-bottom: 0.75rem;
}

.section-subtitle {
  max-width: 540px;
  font-size: 0.9rem;
  opacity: 0.8;
  margin-bottom: 2rem;
}

/* ========== FLOATING ORDER BUTTON ========== */

.floating-chat{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;

  display: inline-flex;
  align-items: center;
  gap: .5rem;

  padding: .8rem 1.1rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  font-size: .9rem;

  color: #020617;
  background: linear-gradient(135deg,#22d3ee,#a78bfa);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.18);
}

.floating-chat:hover{
  filter: brightness(1.06);
}
/* ===== Services swing-in on scroll ===== */
#services .swing-card{
  opacity: 0;
  transform: perspective(900px) rotateY(-10deg) translateY(18px) scale(0.98);
  transform-origin: left center;
  transition:
    opacity 700ms ease,
    transform 800ms cubic-bezier(0.2, 0.9, 0.2, 1);
  will-change: opacity, transform;
}

/* alternate direction */
#services .swing-card.swing-right{
  transform-origin: right center;
  transform: perspective(900px) rotateY(10deg) translateY(18px) scale(0.98);
}

#services .swing-card.is-visible{
  opacity: 1;
  transform: perspective(900px) rotateY(0deg) translateY(0) scale(1);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #services .swing-card,
  #services .swing-card.swing-right,
  #services .swing-card.is-visible{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

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

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(6, 7, 19, 0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.topbar-inner {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0;
}

.logo-mark {
  font-weight: 700;
  font-size: 1rem;
  background: linear-gradient(120deg, #57f0ff, #f472ff);
  -webkit-background-clip: text;
  color: transparent;
}

.logo-sub {
  display: block;
  font-size: 0.7rem;
  opacity: 0.7;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  font-size: 0.9rem;
}

.nav a {
  text-decoration: none;
  color: #d5daf9;
  opacity: 0.85;
  letter-spacing: 0.02em;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.nav a:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.nav-cta {
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* (Hamburger button & mobile nav layout are handled in inline <style> in HTML) */

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

.hero {
  padding: 4.5rem 0 3.5rem;
  background:
    radial-gradient(circle at top left, rgba(120, 246, 255, 0.14) 0, transparent 45%),
    radial-gradient(circle at bottom right, rgba(255, 139, 255, 0.16) 0, transparent 50%),
    linear-gradient(to bottom, #050611 0, #020308 100%);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: flex-start;
}

.hero-text h1 {
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1.22;
  font-weight: 700;
  margin-bottom: 1rem;
}

.hero-text p {
  max-width: 560px;
  font-size: 0.95rem;
  opacity: 0.9;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 1.8rem 0 1rem;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.8rem;
  opacity: 0.85;
}

.hero-badges span {
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Hero status card */

.hero-card {
  background:
    radial-gradient(circle at top left, rgba(120, 246, 255, 0.18) 0, rgba(10, 14, 32, 0.96) 40%, #050611 100%);
  border-radius: 22px;
  border: 1px solid rgba(114, 185, 255, 0.55);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(2, 8, 23, 0.9);
  padding: 1.8rem 1.7rem;
}

.hero-card h2 {
  font-size: 0.98rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 0.35rem;
}

.status-dot {
  color: #7dff9a;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.status-dot::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #4ade80;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.85);
  margin-right: 6px;
  transform: translateY(1px);
}

.hero-card ul {
  list-style: none;
  margin-bottom: 1rem;
}

.hero-card li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 0.45rem;
  font-size: 0.9rem;
}

.hero-card li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #40e0ff;
}

.hero-note {
  font-size: 0.75rem;
  opacity: 0.85;
}

/* ========== BUTTONS ========== */

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  padding: 0.8rem 1.3rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: #f5f7ff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.btn.primary,
.btn.full.primary {
  background-image: linear-gradient(120deg, #57f0ff, #ff8bff);
  border: none;
  color: #050409;
  font-weight: 600;
  box-shadow:
    0 10px 30px rgba(91, 243, 255, 0.45),
    0 0 0 1px rgba(3, 9, 30, 0.8);
}

.btn.secondary {
  background: rgba(16, 18, 32, 0.9);
}

.btn.full {
  width: 100%;
  justify-content: center;
}

.btn.ghost {
  background: transparent;
  border-radius: 999px;
  border: 1px solid rgba(145, 158, 255, 0.4);
  color: #e4e8ff;
}

.btn:hover,
.btn.primary:hover,
.btn.full.primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}

.btn.btn-lg {
  padding: 1rem 1.7rem;
  font-size: 1rem;
}

/* ========== CARDS & GRIDS ========== */

.grid {
  display: grid;
  gap: 1.6rem;
}

.services-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-top: 2.2rem;
}

.card,
.price-card {
  background: radial-gradient(circle at top left, #262a45 0, #101425 38%, #050712 100%);
  border-radius: 22px;
  border: 1px solid rgba(137, 154, 255, 0.35);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(2, 8, 23, 0.9);
  padding: 1.6rem 1.5rem;
}

.card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.45rem;
}

.card p {
  font-size: 0.9rem;
  opacity: 0.9;
  margin-bottom: 0.9rem;
}

.card ul {
  list-style: none;
  font-size: 0.86rem;
}

.card li {
  margin-bottom: 0.4rem;
  position: relative;
  padding-left: 1.1rem;
}

.card li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 0;
  color: #40e0ff;
}

/* Pricing */

.pricing-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 2rem;
}

.price-card {
  position: relative;
}

.price {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0.5rem 0 0.9rem;
}

.price span {
  font-size: 0.9rem;
  font-weight: 400;
  opacity: 0.8;
  margin-left: 0.2rem;
}

.price-card-featured {
  background: radial-gradient(circle at top, rgba(64, 224, 255, 0.15), rgba(10, 11, 20, 0.98));
  border-color: rgba(64, 224, 255, 0.5);
  transform: translateY(-4px);
}

.price-card-featured .badge {
  background: linear-gradient(120deg, #57f0ff, #ff6ad5);
  box-shadow: 0 0 18px rgba(113, 234, 255, 0.65);
}

.price-card .badge {
  position: absolute;
  top: 1.2rem;
  right: 1.4rem;
  font-size: 0.7rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  color: #05060b;
  font-weight: 600;
}

.pricing-note {
  margin-top: 1.4rem;
  font-size: 0.8rem;
  opacity: 0.85;
}

/* ========== STEPS ========== */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.step {
  background: rgba(12, 13, 24, 0.96);
  border-radius: 1rem;
  padding: 1.3rem 1.2rem 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.step-number {
  display: inline-flex;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, #57f0ff, #ff8bff);
  color: #050409;
  font-weight: 700;
}

/* ========== FAQ ========== */

.faq {
  margin-top: 2rem;
}

.faq details {
  background: rgba(12, 13, 24, 0.96);
  border-radius: 0.9rem;
  margin-bottom: 0.7rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.95rem;
  font-weight: 500;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq details p {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  opacity: 0.9;
}

/* ========== CONTACT / LEGAL ========== */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: flex-start;
}

.contact-list {
  list-style: none;
  margin: 1rem 0 1.2rem;
  font-size: 0.9rem;
}

.contact-list li {
  margin-bottom: 0.45rem;
}

.contact-list a {
  color: #40e0ff;
  text-decoration: none;
}

.contact-list a:hover {
  text-decoration: underline;
}

.legal-box {
  background: rgba(13, 15, 26, 0.98);
  border-radius: 1.1rem;
  padding: 1.4rem 1.3rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.86rem;
}

.legal-box ul {
  margin: 0.6rem 0 0.6rem 1rem;
}

/* ========== FOOTER ========== */

.footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 1.7rem 0 2rem;
  background: radial-gradient(circle at top, #101323 0, #040511 55%, #020308 100%);
}

.footer-inner {
  text-align: center;
  font-size: 0.8rem;
  opacity: 0.85;
}

.footer-small {
  margin-top: 0.3rem;
}

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

@media (max-width: 768px) {
  .section {
    padding: 2.4rem 0;
  }

  .hero {
    padding-top: 1.4rem;
    padding-bottom: 2.6rem;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  /* Show status card first on mobile */
  .hero-card {
    order: -1;
  }

  .hero-text h1 {
    font-size: 1.45rem;
    line-height: 1.24;
  }

  .hero-text p {
    font-size: 0.92rem;
    opacity: 0.86;
  }

  .hero-cta {
    gap: 0.6rem;
  }

  .hero-cta .btn {
    width: 100%;
    justify-content: center;
  }

  .services-grid > .card,
  .pricing-grid > .card,
  .steps .step {
    margin-bottom: 1.1rem;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }
}
/* === NEW HERO LAYOUT === */

.hero {
  padding: 4rem 0 3.2rem;
  background:
    radial-gradient(circle at top left, rgba(120, 246, 255, 0.14) 0, transparent 45%),
    radial-gradient(circle at bottom right, rgba(255, 139, 255, 0.16) 0, transparent 50%),
    linear-gradient(to bottom, #050611 0, #020308 100%);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.1fr);
  gap: 2.3rem;
  align-items: center;
}

.hero-copy h1 {
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1.22;
  margin-bottom: 0.9rem;
}

.hero-copy p {
  max-width: 560px;
  font-size: 0.95rem;
  opacity: 0.9;
}

/* Right side container */
.hero-right {
  position: relative;
  display: grid;
  gap: 1.4rem;
}

/* Glassy dashboard-style blob */
.hero-visual {
  position: relative;
  border-radius: 26px;
  padding: 2.1rem;
  background:
    radial-gradient(circle at top left, rgba(120, 246, 255, 0.2) 0, rgba(12, 18, 40, 0.95) 40%, #050611 100%);
  border: 1px solid rgba(137, 154, 255, 0.45);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(2, 8, 23, 0.95);
  overflow: hidden;
}

/* circular “orbits” */
.hero-orbit {
  position: absolute;
  border-radius: 999px;
  border: 1px dashed rgba(161, 190, 255, 0.45);
}

.hero-orbit-1 {
  width: 90%;
  height: 62%;
  top: 12%;
  left: 5%;
}

.hero-orbit-2 {
  width: 65%;
  height: 45%;
  top: 25%;
  left: 18%;
  border-style: solid;
  border-color: rgba(87, 240, 255, 0.6);
}

.hero-orbit-3 {
  width: 38%;
  height: 28%;
  top: 35%;
  left: 32%;
  border-color: rgba(255, 139, 255, 0.7);
}

/* nodes: RDP / SOCKS5 / Coins */
.hero-node {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #050409;
  background: #fff;
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(0, 0, 0, 0.7);
}

.node-rdp {
  position: absolute;
  top: 18%;
  left: 20%;
  background: linear-gradient(120deg, #57f0ff, #c1f9ff);
}

.node-socks {
  position: absolute;
  bottom: 20%;
  right: 18%;
  background: linear-gradient(120deg, #ff8bff, #ffd1ff);
}

.node-coins {
  position: absolute;
  bottom: 10%;
  left: 14%;
  background: linear-gradient(120deg, #ffe86b, #ffc14d);
}

/* reuse your existing .hero-card styles, just tighten */
.hero-card {
  margin-top: 0.3rem;
}

/* Mobile layout tweaks */
@media (max-width: 768px) {
  .hero {
    padding-top: 1.6rem;
    padding-bottom: 2.5rem;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  /* make visual come first on phones (can remove if you prefer text first) */
  .hero-right {
    order: -1;
  }

  .hero-visual {
    margin-top: 0.2rem;
  }

  .hero-copy h1 {
    font-size: 1.45rem;
  }

  .hero-cta .btn {
    width: 100%;
    justify-content: center;
  }
}
/* === HERO WITH IMAGE BANNER === */

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.1fr);
  gap: 2.2rem;
  align-items: center;
}

.hero-right {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* Banner image styling */
.hero-banner {
  position: relative;
}

.hero-banner img {
  width: 100%;
  display: block;
  border-radius: 24px;
  border: 1px solid rgba(137, 154, 255, 0.4);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(2, 8, 23, 0.9);
  object-fit: cover;
}

/* Slight card overlap on desktop for premium feel */
@media (min-width: 769px) {
  .hero-card {
    margin-top: -1.2rem;
    max-width: 90%;
  }
}

/* Mobile: stack cleanly */
@media (max-width: 768px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  /* Image first on phone (optional) */
  .hero-right {
    order: -1;
  }

  .hero-banner img {
    border-radius: 20px;
  }
}
/* === FIX HERO BANNER SIZE === */

.hero-banner {
  width: 100%;
  max-width: 520px;   /* Controls desktop size */
  margin: 0 auto;
}

.hero-banner img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  object-fit: cover;
  object-position: center;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.85),
    0 0 0 1px rgba(135,135,255,0.25);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .hero-banner {
    max-width: 95%;
    margin-top: 10px;
  }

  .hero-banner img {
    border-radius: 16px;
  }
}
.xmas-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.8rem;
    color: #f5f7ff;
    background: radial-gradient(circle at top left, rgba(64,224,255,0.22), rgba(16,18,31,0.98));
    box-shadow: 0 0 18px rgba(255, 79, 230, 0.35);
    margin-top: 0.4rem;
    animation: xmasGlow 2.5s ease-in-out infinite alternate;
}

.xmas-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #7dff9a;
    box-shadow: 0 0 10px #7dff9a;
}

@keyframes xmasGlow {
    from {
        box-shadow: 0 0 14px rgba(64, 224, 255, 0.45);
        transform: translateY(0);
    }
    to {
        box-shadow: 0 0 26px rgba(255, 79, 230, 0.6);
        transform: translateY(-1px);
    }
}


/* =========================================================
   FUPROXY-STYLE GLOBAL CONTAINER (EXACT FEEL)
   - Max width: 1200px
   - Consistent padding: 24 / 20 / 16
========================================================== */
.container{
  max-width: 1200px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
@media (max-width: 1024px){
  .container{ padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 768px){
  .container{ padding-left: 0px; padding-right: 10px; }
}

/* =========================================================
   HEADER + NAV (NEON GLASS CYAN/PURPLE EDGE GLOW)
========================================================== */
header.topbar{
  position: relative; /* NOT sticky */
  z-index: 10;
  padding: 8px 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.topbar-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px; /* fixed height */
  gap: 1rem;
  position: relative;
}

.logo{
  display: flex;
  align-items: center;
}

.logo-link{
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

/* Desktop logo */
.site-logo{
  height: 130px;
  width: auto;
  display: block;
  transition: height 0.25s ease;
}

@media (max-width: 992px){
  .site-logo{ height: 64px; }
  .topbar-inner{ height: 68px; }
}

/* ✅ MOBILE: LOGO LEFT + HAMBURGER SAME LINE (doesn't affect ticker) */
@media (max-width: 768px){
  .topbar-inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    gap: 0.75rem;
    overflow: visible;
  }

  .logo{
    justify-content: flex-start;
  }

  .site-logo{
    height: 120px;
    width: auto;
    display: block;
    margin: 0;
  }

  .nav-toggle{
    display: inline-flex;
    flex-direction: column;
    margin: 0 !important;
  }
}

/* ===== NAV BASE LINKS ===== */
.nav{
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.nav a{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  color: rgba(245, 247, 255, 0.92);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.nav a:hover{
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  box-shadow:
    0 10px 26px rgba(0,0,0,0.40),
    0 0 18px rgba(0,224,255,0.14),
    0 0 18px rgba(138,93,255,0.10);
  transform: translateY(-1px);
  color: #ffffff;
}

/* ===== NEON GLASS CTA ===== */
.nav-cta{
  position: relative;
  padding: 0.48rem 1.05rem !important;
  border-radius: 999px !important;
  color: #f8fbff !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05)) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  box-shadow:
    0 14px 35px rgba(0,0,0,0.50),
    0 0 0 1px rgba(0,224,255,0.22) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}

.nav-cta::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(0,224,255,0.85),
    rgba(138,93,255,0.85),
    rgba(0,224,255,0.75)
  );
  filter: blur(10px);
  opacity: 0.55;
  z-index:-1;
  transition: opacity 0.25s ease;
}

.nav-cta::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: radial-gradient(circle at top left, rgba(255,255,255,0.18), transparent 55%);
  opacity: 0.7;
  pointer-events:none;
}

.nav-cta:hover{
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    0 18px 48px rgba(0,0,0,0.58),
    0 0 26px rgba(0,224,255,0.28),
    0 0 26px rgba(138,93,255,0.22) !important;
  border-color: rgba(255,255,255,0.30) !important;
}
.nav-cta:hover::before{ opacity: 0.80; }
.nav-cta:active{ transform: scale(0.985); }

/* ===== Hamburger button ===== */
.nav-toggle{
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
  margin-left: auto;
  -webkit-tap-highlight-color: transparent;
}

.nav-toggle span{
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 999px;
  margin: 4px 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* ===== MOBILE NAV DROPDOWN ===== */
@media (max-width: 768px){
  .nav-toggle{
    display: inline-flex;
    flex-direction: column;
  }

  .nav{
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    margin-top: 0.55rem;
    padding: 0.9rem 1rem;
    display: none;
    flex-direction: column;
    gap: 0.55rem;
    border-radius: 18px;

    background: linear-gradient(135deg, rgba(6,7,19,0.96), rgba(6,7,19,0.92));
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow:
      0 26px 60px rgba(0,0,0,0.65),
      0 0 0 1px rgba(0,224,255,0.12),
      0 0 0 1px rgba(138,93,255,0.10);
    z-index: 9999;
  }

  body.nav-open .nav{ display: flex; }

  .nav a{
    width: 100%;
    justify-content: center;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
  }

  body.nav-open .nav-toggle span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2){ opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
}

/* ==== HERO LAYOUT + BANNER SIZE ==== */
.hero-inner{
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.1fr);
  gap: 2.2rem;
  align-items: center;
}

.hero-copy h1{
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1.22;
  margin-bottom: 0.9rem;
}

.hero-copy p{
  max-width: 560px;
  font-size: 0.95rem;
  opacity: 0.9;
}

.hero-right{
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.hero-banner{
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

.hero-banner img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  object-fit: cover;
  object-position: center;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.85),
    0 0 0 1px rgba(135,135,255,0.25);
}

@media (max-width: 768px){
  .hero-inner{ grid-template-columns: 1fr; gap: 1.8rem; }
  .hero-right{ order: -1; }
  .hero-banner{ max-width: 95%; margin-top: 10px; }
  .hero-banner img{ border-radius: 16px; }
}

/* === WAVE DIVIDER === */
.section-divider{
  width: 100%;
  overflow: hidden;
  line-height: 0;
  margin: 80px 0;
}
.section-divider svg{
  display: block;
  width: 100%;
  height: 130px;
  filter: drop-shadow(0px 10px 18px rgba(91, 151, 255, 0.3));
}
.wave-layer-1{ fill: #a4e9ff; }
.wave-layer-2{ fill: #7a63ff; }
.wave-layer-3{ fill: #1d2b5f; }
.wave-anim{ animation: waveFloat 3.8s ease-in-out infinite; }

@keyframes waveFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(9px); }
}

@media (max-width: 768px){
  .section-divider{ margin: 60px 0; }
  .section-divider svg{
    height: 95px;
    filter: drop-shadow(0px 7px 14px rgba(91, 151, 255, 0.28));
  }
}



/* === STATS STRIP === */
.stats-strip{
  padding: 1.75rem 0 0.75rem;
  background: radial-gradient(circle at top, rgba(125, 90, 255, 0.22), transparent 60%);
}
.stats-inner{
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  text-align: center;
}
.stat-item{ min-width: 120px; }
.stat-number{
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.stat-label{ font-size: 0.8rem; opacity: 0.8; }

/* ===== TRUST BADGES ===== */
.trust-strip{
  padding: 1.6rem 0 1.2rem;
  background: radial-gradient(circle at top, rgba(125, 90, 255, 0.22), transparent 60%);
}
.trust-inner{
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
}
.trust-badge{
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  color: #f5f5ff;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 18px 35px rgba(0,0,0,0.65), 0 0 0 1px rgba(111,120,255,0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  white-space: nowrap;
}
.trust-icon{ font-size: 0.95rem; }

@media (max-width: 768px){
  .trust-strip{ padding: 1.4rem 0 1.1rem; }
  .trust-inner{ gap: 0.6rem; }
  .trust-badge{
    font-size: 0.78rem;
    padding: 0.45rem 0.85rem;
    white-space: normal;
    text-align: center;
  }
}

/* === REVIEWS SECTION === */
#reviews .reviews-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.review-card{
  background: radial-gradient(circle at top left, rgba(126, 87, 255, 0.20), rgba(11, 13, 30, 0.98));
  border-radius: 18px;
  padding: 1.2rem 1.15rem;
  border: 1px solid rgba(255,255,255,0.06);
}
.review-header{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}
.review-avatar{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(135deg,#00e0ff,#8a5dff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
}
.review-name{ font-size: 0.9rem; font-weight: 600; }
.review-tag{ font-size: 0.75rem; opacity: 0.7; }
.review-stars{ font-size: 0.85rem; color: #ffd76a; margin-bottom: 0.45rem; }
.review-text{
  font-size: 0.82rem;
  opacity: 0.9;
  line-height: 1.5;
}
@media (max-width: 992px){
  #reviews .reviews-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px){
  #reviews .reviews-grid{ grid-template-columns: 1fr; }
}

/* ===== MOBILE CENTERING FIX ===== */
@media (max-width: 768px){
  .section-title,
  .section-subtitle{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-copy{ text-align: center; }

  .hero-cta{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 0.75rem;
  }

  .hero-cta a{ width: 90%; max-width: 280px; }

  .hero-badges{ justify-content: center; text-align: center; }
  .stats-inner{ justify-content: center; text-align: center; }
  .services-grid .card{ text-align: center; }
  .pricing-grid .card{ text-align: center; }
  .steps .step{ text-align: center; }
  #reviews .review-card{ text-align: center; }
  .review-header{ justify-content: center; }
  #contact .contact-grid > div{ text-align: center; }
  .contact-list{ text-align: center; }
}

/* ===== LOGIN NOTICE PILL ===== */
.info-pill{
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  font-size: 0.82rem;
  color: #f5f7ff;
  background: radial-gradient(circle at top left, rgba(125, 225, 255, 0.18), rgba(16, 18, 31, 0.98));
  box-shadow: 0 0 18px rgba(0, 224, 255, 0.18);
  margin: 0.4rem 0 0.6rem;
}
.info-dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.7);
}
/* ===== ACTIVE NAV HIGHLIGHT (CYAN) ===== */
.nav a.is-active,
.nav .nav-cta.is-active {
  background: linear-gradient(
    135deg,
    rgba(0, 224, 255, 0.18),
    rgba(0, 224, 255, 0.06)
  ) !important;

  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.40),
    0 0 22px rgba(0, 224, 255, 0.55),
    0 0 40px rgba(0, 224, 255, 0.25) !important;

  border: 1px solid rgba(0, 224, 255, 0.45) !important;
  color: #eaffff !important;
}
/* ===========================
   MOBILE NAV FIX (GLOBAL)
   - Prevent nav overlap on small screens
   =========================== */

@media (max-width: 768px){

  /* Keep header single-line: logo left, burger right */
  .topbar-inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
  }

  /* Show hamburger */
  .nav-toggle{
    display: inline-flex !important;
    flex-direction: column;
    margin: 0 !important;
  }

  /* Hide nav links by default (prevents overlap) */
  .nav{
    display: none !important;
  }

  /* Dropdown when opened */
  body.nav-open .nav{
    display: flex !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 10px;
    padding: 12px 14px;
    flex-direction: column;
    gap: 10px;
    border-radius: 16px;

    background: linear-gradient(135deg, rgba(6,7,19,0.96), rgba(6,7,19,0.92));
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow:
      0 26px 60px rgba(0,0,0,0.65),
      0 0 0 1px rgba(0,224,255,0.12),
      0 0 0 1px rgba(138,93,255,0.10);

    z-index: 9999;
  }

  /* Make links full-width & readable */
  body.nav-open .nav a{
    width: 100%;
    justify-content: center;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 0.95rem;
  }
}
/* ===========================
   MOBILE HAMBURGER + MENU BEAUTIFY (GLOBAL)
=========================== */
@media (max-width: 768px){

  /* Fix the hamburger button (remove the white circle) */
  .nav-toggle{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: 44px;
    height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
  }

  /* Make the 3 lines look like your normal hamburger */
  .nav-toggle span{
    width: 22px;
    height: 2px;
    background: rgba(255,255,255,0.92);
    border-radius: 999px;
    margin: 4px 0;
    display: block;
  }

  /* Dropdown container style */
  body.nav-open .nav{
    display: flex !important;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);   /* ✅ centers the menu */
    width: calc(100% - 24px);      /* nice margin both sides */
    max-width: 420px;              /* looks premium */
    margin-top: 12px;

    padding: 14px;
    flex-direction: column;
    gap: 10px;
    border-radius: 18px;

    background: linear-gradient(135deg, rgba(6,7,19,0.98), rgba(6,7,19,0.92));
    border: 1px solid rgba(255,255,255,0.10);

    box-shadow:
      0 26px 60px rgba(0,0,0,0.70),
      0 0 0 1px rgba(0,224,255,0.14),
      0 0 0 1px rgba(138,93,255,0.10);

    z-index: 9999;
  }

  /* Make links centered and “button-like” */
  body.nav-open .nav a{
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 600;
  }

  /* Extra hover glow on mobile menu items */
  body.nav-open .nav a:hover{
    background: rgba(255,255,255,0.06);
    box-shadow: 0 0 18px rgba(0,224,255,0.16);
  }
}
/* ===== REVIEWS: swipe carousel (mobile-first) ===== */
.reviews-carousel{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 88%;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 8px 2px 6px;
  -webkit-overflow-scrolling: touch;
}
.reviews-carousel::-webkit-scrollbar{ display:none; }

.review-slide{
  scroll-snap-align: start;
  border-radius: 18px;
  padding: 16px 16px 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: radial-gradient(circle at top left, rgba(0,224,255,0.10), rgba(11,13,30,0.95));
  box-shadow: 0 22px 50px rgba(0,0,0,0.55);
}

.reviews-hint{
  margin-top: 10px;
  font-size: .82rem;
  opacity: .7;
  text-align: center;
}

/* Desktop/tablet: show 3 cards nicely */
@media (min-width: 768px){
  .reviews-carousel{ grid-auto-columns: 32%; }
  .reviews-hint{ display:none; }
}

/* ===== ONE TRUE NEWS TICKER (GLOBAL) ===== */
.news-bar{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  background: radial-gradient(circle at left, rgba(0,255,255,0.18), transparent 55%),
              radial-gradient(circle at right, rgba(186,104,255,0.20), transparent 55%),
              #050612;
  color:#f5f4ff;
  font-size:0.78rem;
  padding:0.35rem 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
}

.news-bar-inner{
  display:inline-flex;
  align-items:center;
  gap:3rem;

  /* THIS fixes “stuck” width issues */
  width:max-content;

  padding-left:100vw;
  will-change:transform;

  animation: bamTicker 22s linear infinite;
  transform: translate3d(0,0,0);
}

.news-item{ opacity:0.9; }

.news-label{
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.06em;
  margin-right:0.75rem;
  color:#7de1ff;
}

@keyframes bamTicker{
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-200%,0,0); }
}

@media (max-width:768px){
  .news-bar{ font-size:0.7rem; }
}

/* ===== GET STARTED (DARK THEME LIKE YOUR PRICING SECTION) ===== */
.gs-dark{
  padding: 3.6rem 0;
  /* blends with your body (dark navy gradient) */
  background: radial-gradient(circle at top,
    rgba(126, 240, 255, 0.08),
    rgba(6, 10, 20, 0.0) 55%);
}

.gs-dark-top{
  text-align: center;
  max-width: 760px;
  margin: 0 auto 2.2rem;
}

.gs-dark-pill{
  display: inline-flex;
  align-items: center;
  padding: .42rem .9rem;
  border-radius: 999px;
  background: rgba(0, 210, 255, 0.10);
  border: 1px solid rgba(0, 210, 255, 0.22);
  color: rgba(220, 250, 255, 0.9);
  font-weight: 600;
  font-size: .9rem;
  box-shadow: 0 0 16px rgba(0, 210, 255, 0.15);
}

.gs-dark-title{
  margin: 1rem 0 .6rem;
  font-size: 2rem;
  letter-spacing: -0.02em;
  color: #eafcff;
}

.gs-dark-sub{
  margin: 0 auto;
  color: rgba(220, 245, 255, 0.70);
  line-height: 1.6;
  font-size: 1rem;
}

.gs-dark-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 1.3rem;
  max-width: 1020px;
  margin: 0 auto;
}

.gs-dark-card{
  position: relative;
  border-radius: 22px;
  padding: 1.6rem 1.6rem 1.35rem;
  background: linear-gradient(145deg,
    rgba(18, 30, 52, 0.78),
    rgba(10, 16, 32, 0.92));
  border: 1px solid rgba(140, 240, 255, 0.18);
  box-shadow:
    0 0 0 1px rgba(0, 210, 255, 0.04),
    0 22px 55px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

/* soft inner glow like your pricing card */
.gs-dark-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(circle at 20% 10%,
    rgba(0, 210, 255, 0.14),
    transparent 55%);
  opacity: .9;
  pointer-events:none;
}

.gs-dark-card h3{
  position: relative;
  margin: 0 0 .5rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #eafcff;
}

.gs-dark-card p{
  position: relative;
  margin: 0 0 1.15rem;
  max-width: 60ch;
  font-size: .95rem;
  line-height: 1.6;
  color: rgba(220, 245, 255, 0.72);
}

/* icon circle like fuproxy but dark + cyan glow */
.gs-dark-icon{
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 999px;
  border: 1.5px solid rgba(0, 210, 255, 0.40);
  display: grid;
  place-items: center;
  background: radial-gradient(circle at top,
    rgba(0, 210, 255, 0.14),
    rgba(10, 16, 32, 0.85));
  box-shadow:
    0 0 18px rgba(0, 210, 255, 0.22),
    0 16px 32px rgba(0, 0, 0, 0.45);
}

.gs-dark-icon svg{
  width: 36px;
  height: 36px;
  color: #7ff1ff;
  filter: drop-shadow(0 0 7px rgba(0, 210, 255, 0.65));
}

.gs-dark-bottom{
  margin-top: 1.9rem;
  display: flex;
  justify-content: center;
}

.gs-dark-pill-muted{
  opacity: .85;
}

/* Hover (premium feel) */
.gs-dark-card:hover{
  transform: translateY(-2px);
  transition: .22s ease;
  border-color: rgba(0, 210, 255, 0.32);
  box-shadow:
    0 0 0 1px rgba(0, 210, 255, 0.08),
    0 28px 70px rgba(0, 0, 0, 0.62);
}

/* Mobile stack */
@media (max-width: 820px){
  .gs-dark-grid{ grid-template-columns: 1fr; }
  .gs-dark-title{ font-size: 1.65rem; }
}
/* ===== MOBILE CENTER + RESPONSIVE FIX (GET STARTED) ===== */
@media (max-width: 820px){

  /* Make sure section has padding on both sides */
  .gs-dark{
    padding: 3rem 0;
  }
  .gs-dark .container{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Title + subtitle centered */
  .gs-dark-top{
    text-align: center;
    margin-bottom: 1.6rem;
  }
  .gs-dark-title{
    font-size: 1.55rem;
    line-height: 1.2;
  }
  .gs-dark-sub{
    max-width: 36ch;
    margin-left: auto;
    margin-right: auto;
  }

  /* Grid becomes single column */
  .gs-dark-grid{
    grid-template-columns: 1fr;
    justify-items: center;   /* center items in grid */
  }

  /* Card becomes centered with max width */
  .gs-dark-card{
    width: 100%;
    max-width: 520px;        /* controls the card width */
    margin-left: auto;
    margin-right: auto;
  }

  /* Center icon on mobile */
  .gs-dark-icon{
    margin-left: auto;
    margin-right: auto;
  }

  /* If you add button inside card later, keep it centered */
  .gs-dark-card .order-now,
  .gs-dark-card button,
  .gs-dark-card .btn{
    margin-left: auto;
    margin-right: auto;
    display: inline-flex;
    justify-content: center;
  }

  /* Optional: slightly smaller icon on very small phones */
  @media (max-width: 420px){
    .gs-dark-icon{
      width: 72px;
      height: 72px;
    }
    .gs-dark-icon svg{
      width: 32px;
      height: 32px;
    }
  }
}
/* ===== MOBILE EDGE PADDING FIX (GLOBAL) ===== */
@media (max-width: 820px){
  body{
    overflow-x: hidden;
  }

  /* Your main wrapper/container */
  .container{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Safety: any section wrapper */
  section{
    padding-left: 0;
    padding-right: 0;
  }

  /* Pricing / cards wrappers (center and prevent edge-touching) */
  .pricing-grid,
  .gs-dark-grid,
  .gs-lite-grid,
  .hiw-grid{
    padding-left: 10px;
    padding-right: 10px;
    justify-items: center;
  }

  /* Cards themselves */
  .pricing-card,
  .plan-card,
  .gs-dark-card,
  .gs-lite-card,
  .hiw-card{
    width: 100%;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}
.gradient-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  color: #0b1220;
  text-decoration: none;
  background: linear-gradient(135deg, #22d3ee, #60a5fa, #a78bfa);
  box-shadow:
    0 10px 25px rgba(96,165,250,.35),
    inset 0 0 0 1px rgba(255,255,255,.35);
  transition: transform .15s ease, box-shadow .15s ease;
}

.gradient-btn:hover{
  transform: translateY(-2px);
  box-shadow:
    0 14px 32px rgba(96,165,250,.45),
    inset 0 0 0 1px rgba(255,255,255,.45);
}

/* small glowing dot like your screenshot */
.gradient-btn .dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 8px rgba(255,255,255,.8);
}
.gradient-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  color: #0b1220;
  text-decoration: none;
  background: linear-gradient(135deg, #22d3ee, #60a5fa, #a78bfa);
  box-shadow:
    0 10px 25px rgba(96,165,250,.35),
    inset 0 0 0 1px rgba(255,255,255,.35);
  transition: transform .15s ease, box-shadow .15s ease;
}

.gradient-btn:hover{
  transform: translateY(-2px);
  box-shadow:
    0 14px 32px rgba(96,165,250,.45),
    inset 0 0 0 1px rgba(255,255,255,.45);
}

.gradient-btn .dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 8px rgba(255,255,255,.85);
}
/* ===== Services: Premium glass + hover ===== */
.services-grid .card{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, border-color .18s ease, opacity .18s ease;
}

/* glossy color wash */
.services-grid .card::before{
  content:"";
  position:absolute;
  inset:-70px;
  opacity:.9;
  transform: rotate(-7deg);
  pointer-events:none;
}

/* dark overlay for readability */
.services-grid .card::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.60));
  pointer-events:none;
}

/* keep content above overlays */
.services-grid .card > *{
  position: relative;
  z-index: 2;
}

/* hover lift */
.services-grid .card:hover{
  transform: translateY(-12px) scale(1.01);
  border-color: rgba(255,255,255,.20);
  filter: saturate(1.15);
  box-shadow:
    0 26px 70px rgba(0,0,0,.60),
    0 0 42px rgba(96,165,250,.14);
}

/* dim others when hovering grid */
.services-grid:hover .card{
  opacity: .78;
}
.services-grid:hover .card:hover{
  opacity: 1;
}

/* ===== Color variants ===== */
.services-grid .card.c-teal::before{
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.42), transparent 45%),
    radial-gradient(circle at 72% 85%, rgba(34,211,238,.55), transparent 55%),
    radial-gradient(circle at 18% 92%, rgba(96,165,250,.28), transparent 55%);
}
.services-grid .card.c-blue::before{
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.42), transparent 45%),
    radial-gradient(circle at 72% 85%, rgba(96,165,250,.55), transparent 55%),
    radial-gradient(circle at 15% 90%, rgba(34,211,238,.22), transparent 55%);
}
.services-grid .card.c-purple::before{
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.42), transparent 45%),
    radial-gradient(circle at 80% 78%, rgba(167,139,250,.65), transparent 55%),
    radial-gradient(circle at 15% 90%, rgba(34,211,238,.20), transparent 55%);
}
.services-grid .card.c-pink::before{
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.42), transparent 45%),
    radial-gradient(circle at 78% 80%, rgba(251,113,133,.65), transparent 55%),
    radial-gradient(circle at 18% 92%, rgba(167,139,250,.24), transparent 55%);
}

/* ===== CTA button inside cards ===== */
.service-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top: 14px;
  padding: 11px 18px;
  border-radius: 999px;
  font-weight: 800;
  font-size: .92rem;
  color: #07101a;
  text-decoration:none;
  background: linear-gradient(135deg, #22d3ee, #60a5fa, #a78bfa);
  box-shadow:
    0 10px 22px rgba(96,165,250,.28),
    inset 0 0 0 1px rgba(255,255,255,.35);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

.service-cta .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 10px rgba(255,255,255,.95);
}

.service-cta:hover{
  transform: translateY(-2px);
  filter: brightness(1.12) saturate(1.25);
  box-shadow:
    0 16px 40px rgba(96,165,250,.55),
    inset 0 0 0 1px rgba(255,255,255,.55);
}
/* =========================
   ACCOUNT-SETUP MOBILE FIX
   ========================= */

/* prevent any horizontal scroll */
html, body { max-width: 100%; overflow-x: hidden; }

/* tablet */
@media (max-width: 900px){
  .as-wrap{ padding: 1.35rem 0 2.2rem; }

  .as-head{ gap: .55rem; }
  .as-title{ font-size: clamp(1.7rem, 7vw, 2.25rem); }
  .as-sub{ font-size: 1rem; }

  .as-cta{
    gap: .6rem;
  }
  .ghost-btn{
    padding: 11px 16px;
    font-size: .92rem;
  }

  .stack-stage{
    padding: 1.2rem .9rem;
    border-radius: 22px;
  }

  .glass-cards{
    grid-template-columns: 1fr;   /* ✅ single column */
    gap: 14px;
  }

  .glass-card{
    min-height: auto;            /* ✅ no forced height */
    padding: 16px 16px;
    border-radius: 22px;
  }

  .g-icon{
    width: 58px;
    height: 58px;
    border-radius: 16px;
  }

  .glass-card h3{ font-size: 1.08rem; }
  .glass-card p{ font-size: .96rem; }

  .apply-btn{
    width: 100%;                 /* ✅ full width button on mobile */
    justify-content: center;
    padding: 12px 16px;
  }

  /* remove featured lift on mobile so layout is clean */
  .glass-card.is-featured{ transform: none; }
}

/* small phones */
@media (max-width: 420px){
  .as-kicker{ font-size: .86rem; padding: .4rem .65rem; }
  .as-title{ font-size: 1.85rem; }
  .as-tagline{ font-size: .98rem; }
  .as-sub{ font-size: .95rem; }

  .ghost-btn{
    width: 100%;
  }

  .as-cta{
    flex-direction: column;      /* ✅ stack buttons */
    align-items: stretch;
  }

  .stack-stage{ padding: 1.05rem .85rem; }
}
/* ===== Contact & Orders (new) ===== */
.contact-header{
  margin-bottom: 14px;
}
.contact-grid-new{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 980px){
  .contact-grid-new{ grid-template-columns: 1fr; }
}

/* card look */
.contact-card{
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,0.20);
  background: rgba(15,23,42,0.55);
  padding: 14px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.35);
}
.contact-card.glass{
  background:
    radial-gradient(circle at top left, rgba(34,211,238,.12), transparent 55%),
    radial-gradient(circle at top right, rgba(167,139,250,.12), transparent 55%),
    rgba(15,23,42,0.60);
}
.contact-card.compliance{
  grid-column: 1 / -1;
}
@media (max-width: 980px){
  .contact-card.compliance{ grid-column: auto; }
}

.card-top h3{
  margin: 6px 0 6px;
  font-size: 1.05rem;
  font-weight: 900;
}
.card-top p{
  margin: 0;
  color: rgba(255,255,255,.72);
  line-height: 1.55;
  font-size: .95rem;
}

.card-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,.85);
  font-weight: 900;
  font-size: .78rem;
}
.badge-alt{
  border-color: rgba(59,130,246,0.35);
  background: rgba(59,130,246,0.10);
}
.badge-warn{
  border-color: rgba(251,191,36,0.35);
  background: rgba(251,191,36,0.10);
}

.btn-stack{ display:grid; gap:10px; margin-top: 12px; }
.btn-row{ margin-top: 12px; }

.btn-full{ width:100%; }

/* uses your existing .btn classes; add a "ghost" style */
.btn.ghost{
  border: 1px solid rgba(148,163,184,0.35);
  background: rgba(255,255,255,0.04);
  color: #e5e7eb;
}

.contact-list-new{
  list-style:none;
  margin: 12px 0 0;
  padding: 0;
  display:grid;
  gap: 10px;
}
.contact-list-new li{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(255,255,255,0.04);
}
.contact-list-new .k{
  color: rgba(255,255,255,.70);
  font-weight: 800;
  font-size: .86rem;
}
.contact-list-new .v{
  font-weight: 900;
  color: #fff;
  text-align: right;
}
.contact-list-new a{ color:#c7d2fe; text-decoration: none; }
.contact-list-new a:hover{ text-decoration: underline; }

.compliance-list{
  margin: 12px 0 0;
  padding-left: 1.1rem;
  color: rgba(255,255,255,.80);
  line-height: 1.6;
}
.compliance-list li{ margin: 6px 0; }

.mini-note{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,.75);
  font-size: .9rem;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap: wrap;
}
.mini-note a{
  color:#fff;
  font-weight: 900;
  text-decoration: underline;
}
.mini-note.warn{
  border-color: rgba(251,191,36,0.25);
  background: rgba(251,191,36,0.08);
}
.dot{
  width:10px; height:10px;
  border-radius: 999px;
  background: rgba(167,139,250,1);
  box-shadow: 0 0 14px rgba(167,139,250,.45);
}
.dot-green{
  background: rgba(34,197,94,1);
  box-shadow: 0 0 14px rgba(34,197,94,.45);
}
.alt-service-cta {
  margin: 18px 0 26px;
}

.alt-service-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    rgba(34,211,238,0.08),
    rgba(167,139,250,0.08)
  );
  border: 1px solid rgba(255,255,255,0.12);
}

.alt-text p {
  margin: 4px 0 0;
  font-size: 0.9rem;
  color: rgba(244,246,255,0.8);
}

.alt-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(34,211,238,0.15);
  color: #22d3ee;
}

.alt-btn {
  white-space: nowrap;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.85rem;
  text-decoration: none;
  color: #020617;
  background: linear-gradient(135deg,#22d3ee,#a78bfa);
  box-shadow: 0 10px 28px rgba(96,165,250,.35);
}

.alt-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

@media (max-width: 768px) {
  .alt-service-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .alt-btn {
    width: 100%;
    text-align: center;
  }
}
/* RDP variant */
.alt-badge-rdp{
  background: rgba(34,197,94,0.14);
  color: #22c55e;
}

.alt-btn-rdp{
  background: linear-gradient(135deg,#22c55e,#0ea5e9);
}
/* Shared CTA base */
.alt-service-cta{
  margin: 28px 0;
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(56,189,248,.12), transparent 55%),
    rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}

.alt-service-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 20px;
  flex-wrap:wrap;
}

.alt-text{
  max-width:520px;
}

.alt-text p{
  margin:6px 0 0;
  color:rgba(244,246,255,.75);
  font-size:.95rem;
  line-height:1.6;
}

.alt-badge{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:.72rem;
  letter-spacing:.08em;
}

/* Badge variants */
.alt-badge-account{
  background: rgba(168,85,247,.14);
  color:#c084fc;
}

/* Buttons */
.alt-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.alt-btn{
  padding:10px 16px;
  border-radius:999px;
  font-weight:900;
  font-size:.82rem;
  text-decoration:none;
  color:#020617;
  white-space:nowrap;
  transition:transform .15s ease, filter .15s ease;
}

.alt-btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
}

/* PayPal */
.alt-btn-paypal{
  background: linear-gradient(135deg,#22d3ee,#60a5fa);
}

/* Payoneer */
.alt-btn-payoneer{
  background: linear-gradient(135deg,#a78bfa,#fb7185);
}

/* Mobile */
@media (max-width: 768px){
  .alt-service-inner{
    flex-direction:column;
    align-items:flex-start;
  }
  .alt-actions{
    width:100%;
  }
  .alt-btn{
    width:100%;
    text-align:center;
  }
}
/* Fix iOS extra space below footer */
html, body {
  height: auto;
  min-height: 100%;
}

.page-shell {
  min-height: auto !important;
}

/* reduce huge bottom padding on mobile */
@media (max-width: 768px) {
  .wrap {
    padding-bottom: 22px !important;
  }
}

/* prevent body from leaving extra scroll space */
body {
  overflow-x: hidden;
}
/* =========================
   SOCKS5 GUIDE STYLES
========================= */
.socks-guide{ margin: 12px 0 18px; }

.sg-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 980px){
  .sg-grid{ grid-template-columns: 1fr; }
}

.sg-card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(15,23,42,0.55);
  padding: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
}

.sg-glass{
  background:
    radial-gradient(circle at top left, rgba(34,211,238,.10), transparent 55%),
    radial-gradient(circle at top right, rgba(167,139,250,.10), transparent 55%),
    rgba(15,23,42,0.60);
}

.sg-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(244,246,255,0.85);
  font-weight: 900;
  font-size: .78rem;
}

.sg-badge-alt{
  border-color: rgba(59,130,246,0.25);
  background: rgba(59,130,246,0.10);
}

.sg-title{
  margin: 10px 0 8px;
  font-size: 1.25rem;
  font-weight: 950;
  letter-spacing: -0.01em;
}

.sg-lead{
  margin: 0 0 12px;
  color: rgba(244,246,255,0.78);
  line-height: 1.65;
  font-size: .98rem;
}

.sg-points{ display:grid; gap: 10px; margin-top: 10px; }
.sg-point{
  display:flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}
.sg-icon{ font-size: 1.1rem; line-height: 1; margin-top: 2px; }
.sg-muted{ color: rgba(244,246,255,0.70); font-size: .92rem; line-height: 1.55; }

.sg-note{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border-left: 4px solid rgba(251,191,36,0.75);
  background: rgba(251,191,36,0.08);
  color: rgba(244,246,255,0.80);
  font-size: .92rem;
  line-height: 1.55;
}

.sg-illus{ overflow:hidden; }
.sg-svg{ width:100%; height:auto; display:block; margin-top: 10px; }
.sg-mini{
  margin-top: 10px;
  color: rgba(244,246,255,0.75);
  font-size: .92rem;
  line-height: 1.55;
}

.sg-howto{ margin-top: 14px; }
.sg-h3{ margin: 10px 0 12px; font-size: 1.05rem; font-weight: 950; }

.sg-how-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 900px){
  .sg-how-grid{ grid-template-columns: 1fr; }
}

.sg-step{
  display:flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}
.sg-step-num{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(34,211,238,0.16);
  border: 1px solid rgba(34,211,238,0.25);
  font-weight: 950;
}

.sg-faq{
  margin-top: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  padding: 10px 12px;
}
.sg-faq summary{
  cursor:pointer;
  font-weight: 900;
  color: rgba(244,246,255,0.88);
}
.sg-faq-body{
  margin-top: 10px;
  color: rgba(244,246,255,0.75);
  line-height: 1.6;
}
.sg-faq-body ul{ margin: 8px 0 0; padding-left: 1.1rem; }
/* =========================
   RDP GUIDE STYLES
========================= */
.rdp-guide{ margin: 12px 0 18px; }

.rg-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 980px){
  .rg-grid{ grid-template-columns: 1fr; }
}

.rg-card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(15,23,42,0.55);
  padding: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
}

.rg-glass{
  background:
    radial-gradient(circle at top left, rgba(34,211,238,.10), transparent 55%),
    radial-gradient(circle at top right, rgba(167,139,250,.10), transparent 55%),
    rgba(15,23,42,0.60);
}

.rg-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(244,246,255,0.85);
  font-weight: 900;
  font-size: .78rem;
}
.rg-badge-alt{
  border-color: rgba(59,130,246,0.25);
  background: rgba(59,130,246,0.10);
}

.rg-title{
  margin: 10px 0 8px;
  font-size: 1.25rem;
  font-weight: 950;
  letter-spacing: -0.01em;
}
.rg-lead{
  margin: 0 0 12px;
  color: rgba(244,246,255,0.78);
  line-height: 1.65;
  font-size: .98rem;
}

.rg-points{ display:grid; gap: 10px; margin-top: 10px; }
.rg-point{
  display:flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}
.rg-icon{ font-size: 1.1rem; line-height: 1; margin-top: 2px; }
.rg-muted{ color: rgba(244,246,255,0.70); font-size: .92rem; line-height: 1.55; }

.rg-note{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border-left: 4px solid rgba(34,197,94,0.75);
  background: rgba(34,197,94,0.08);
  color: rgba(244,246,255,0.80);
  font-size: .92rem;
  line-height: 1.55;
}

.rg-illus{ overflow:hidden; }
.rg-svg{ width:100%; height:auto; display:block; margin-top: 10px; }
.rg-mini{
  margin-top: 10px;
  color: rgba(244,246,255,0.75);
  font-size: .92rem;
  line-height: 1.55;
}

.rg-howto{ margin-top: 14px; }
.rg-h3{ margin: 10px 0 12px; font-size: 1.05rem; font-weight: 950; }

.rg-how-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 900px){
  .rg-how-grid{ grid-template-columns: 1fr; }
}

.rg-step{
  display:flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}
.rg-step-num{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(34,211,238,0.16);
  border: 1px solid rgba(34,211,238,0.25);
  font-weight: 950;
}

.rg-faq{
  margin-top: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  padding: 10px 12px;
}
.rg-faq summary{
  cursor:pointer;
  font-weight: 900;
  color: rgba(244,246,255,0.88);
}
.rg-faq-body{
  margin-top: 10px;
  color: rgba(244,246,255,0.75);
  line-height: 1.6;
}
.rg-faq-body ul{ margin: 8px 0 0; padding-left: 1.1rem; }

.rg-mini-cta{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: rgba(244,246,255,0.78);
  font-size: .92rem;
  line-height: 1.55;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap: wrap;
}
.rg-mini-dot:before{
  content:"";
}
.rg-mini-dot{
  width:10px;height:10px;border-radius:999px;
  background: rgba(167,139,250,1);
  box-shadow: 0 0 14px rgba(167,139,250,.45);
  display:inline-block;
}
.rg-mini-cta a{ color:#fff; font-weight: 900; text-decoration: underline; }
/* RDP Illustration Image */
.rg-img{
  width: 100%;
  max-width: 520px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 18px;
  background: rgba(15,23,42,0.45);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 20px 55px rgba(0,0,0,0.55);
}
/* SOCKS5 Illustration */
.socks-img{
  width: 100%;
  max-width: 520px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(15,23,42,0.45);
  box-shadow: 0 20px 55px rgba(0,0,0,0.55);
}
/* ===== Strong Swing-In Animation (Services) ===== */
#services .swing-card{
  opacity: 0;
  transform:
    perspective(1200px)
    rotateY(-22deg)
    translateY(50px)
    scale(0.94);
  transform-origin: left center;
  transition:
    opacity 0.6s ease,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

/* Alternate direction for depth */
#services .swing-card.swing-right{
  transform-origin: right center;
  transform:
    perspective(1200px)
    rotateY(22deg)
    translateY(50px)
    scale(0.94);
}

#services .swing-card.is-visible{
  opacity: 1;
  transform:
    perspective(1200px)
    rotateY(0deg)
    translateY(0)
    scale(1);
}

/* Mobile tuning (still obvious, not aggressive) */
@media (max-width: 768px){
  #services .swing-card,
  #services .swing-card.swing-right{
    transform:
      perspective(1000px)
      rotateY(-14deg)
      translateY(36px)
      scale(0.96);
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  #services .swing-card,
  #services .swing-card.swing-right{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* ===== Swing Animation ===== */
.swing-card {
  opacity: 0;
  transform: translateY(60px) rotate(-2deg) scale(0.96);
  transition:
    opacity 0.6s ease,
    transform 0.9s cubic-bezier(.22,1.61,.36,1);
  will-change: transform, opacity;
}

.swing-card.swing-right {
  transform: translateY(60px) rotate(2deg) scale(0.96);
}

/* Visible state */
.swing-card.is-visible {
  opacity: 1;
  transform: translateY(0) rotate(0deg) scale(1);
  animation: settleBounce 0.65s ease-out;
}

/* Premium bounce */
@keyframes settleBounce {
  0%   { transform: translateY(0) scale(1); }
  55%  { transform: translateY(-6px) scale(1.01); }
  80%  { transform: translateY(2px) scale(0.995); }
  100% { transform: translateY(0) scale(1); }
}

/* Mobile optimization */
@media (max-width: 768px) {
  .swing-card {
    transform: translateY(36px) scale(0.97);
  }
}
/* ===== Header actions wrapper ===== */
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* 🔔 Bell */
.nav-bell{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(15,23,42,.35);
  color:#e5e7eb;
  text-decoration:none;
}

.nav-bell:hover{
  border-color: rgba(34,197,94,.55);
}

.bell-icon{ font-size:18px; line-height:1; }

.bell-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  background:#ef4444;
  color:#fff;
  font-weight:900;
  font-size:.72rem;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 0 0 2px rgba(2,6,23,.9);
}

/* Inline notif count inside the menu link */
.nav-notif-inline{
  margin-left:8px;
  background:#ef4444;
  color:#fff;
  font-weight:900;
  font-size:.72rem;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align: middle;
}

/* Mobile: keep bell visible, menu toggles */
@media (max-width: 900px){
  .nav-actions{ margin-left:auto; }
}
/* ===== Premium Header Layout ===== */
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  position: relative;
}

/* Main nav center */
.nav-main{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Actions right */
.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Bell */
.nav-bell{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(15,23,42,.35);
  color:#e5e7eb;
  text-decoration:none;
}
.bell-badge{
  position:absolute;
  top:-6px; right:-6px;
  background:#ef4444; color:#fff;
  font-weight:900; font-size:.72rem;
  min-width:18px; height:18px;
  padding:0 6px;
  border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow: 0 0 0 2px rgba(2,6,23,.9);
}

/* User pill */
.nav-user-pill{
  display:inline-flex;
  align-items:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(15,23,42,.25);
  color:#e5e7eb;
  font-weight:700;
  font-size:.9rem;
  white-space:nowrap;
}

/* Buttons */
.nav-cta{
  padding:10px 14px;
  border-radius:999px;
  background: linear-gradient(135deg,#22c55e,#0ea5e9);
  color:#020617 !important;
  font-weight:900;
  border:none !important;
}
.nav-cta-soft{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(15,23,42,.35);
  color:#e5e7eb;
  font-weight:800;
}
.nav a.is-active, .nav-cta-soft.is-active{
  border-color: rgba(34,197,94,.55);
  box-shadow: 0 0 0 2px rgba(34,197,94,.12);
}

/* Dropdown */
.nav-more{ position: relative; }
.nav-more-btn{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(15,23,42,.35);
  color:#e5e7eb;
  font-weight:800;
  cursor:pointer;
}
.nav-more-menu{
  display:none;
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  min-width: 180px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(2,6,23,.95);
  box-shadow: 0 25px 60px rgba(0,0,0,.55);
  z-index: 5000;
}
.nav-more-menu a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(15,23,42,.35);
  margin-bottom:8px;
}
.nav-more-menu a:last-child{ margin-bottom:0; }
.nav-more:hover .nav-more-menu{ display:block; }

/* Mobile nav hidden by default */
.nav-mobile{ display:none; }

/* Mobile behavior */
@media (max-width: 980px){
  .nav-main{ display:none; }
  .nav-user-pill{ display:none; } /* keeps header shorter on mobile */

  .nav-mobile{
    display:none;
    position:absolute;
    left:16px; right:16px;
    top: calc(100% + 10px);
    padding:12px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(2,6,23,.95);
    box-shadow: 0 25px 60px rgba(0,0,0,.55);
    z-index: 5000;
    flex-direction:column;
    gap:10px;
  }

  body.nav-open .nav-mobile{ display:flex; }
  body.nav-open .nav-toggle{ outline:2px solid rgba(34,197,94,.35); }

  .nav-mobile a{
    width:100%;
    padding:12px 14px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(15,23,42,.35);
  }
}
/* ===== Premium Header: Short + Clean ===== */
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  position:relative;
}

/* Logged-out main nav */
.nav-main{
  display:flex;
  align-items:center;
  gap:10px;
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}

/* Bell */
.nav-bell{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(15,23,42,.35);
  color:#e5e7eb;
  text-decoration:none;
}
.nav-bell:hover{ border-color: rgba(34,197,94,.55); }
.bell-icon{ font-size:18px; line-height:1; }
.bell-badge{
  position:absolute;
  top:-6px; right:-6px;
  background:#ef4444; color:#fff;
  font-weight:900; font-size:.72rem;
  min-width:18px; height:18px;
  padding:0 6px;
  border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow: 0 0 0 2px rgba(2,6,23,.9);
}

/* Soft button */
.nav-cta-soft{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(15,23,42,.35);
  color:#e5e7eb;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
}
.nav-cta-soft:hover{ border-color: rgba(34,197,94,.55); }

/* Primary CTA */
.nav-cta{
  padding:10px 14px;
  border-radius:999px;
  background: linear-gradient(135deg,#22c55e,#0ea5e9);
  color:#020617 !important;
  font-weight:900;
  border:none !important;
  text-decoration:none;
}

/* Logged-out dropdown */
.nav-more{ position: relative; }
.nav-more-btn{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(15,23,42,.35);
  color:#e5e7eb;
  font-weight:800;
  cursor:pointer;
}
.nav-more-menu{
  display:none;
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  min-width: 190px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(2,6,23,.95);
  box-shadow: 0 25px 60px rgba(0,0,0,.55);
  z-index: 5000;
}
.nav-more-menu a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(15,23,42,.35);
  margin-bottom:8px;
  text-decoration:none;
  color:#e5e7eb;
}
.nav-more-menu a:last-child{ margin-bottom:0; }
.nav-more:hover .nav-more-menu{ display:block; }

/* Profile dropdown (logged in) */
.nav-profile{ position:relative; }
.nav-profile-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(15,23,42,.25);
  color:#e5e7eb;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}
.nav-avatar{
  width:30px;height:30px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background: linear-gradient(135deg,#22c55e,#0ea5e9);
  color:#020617;
  font-weight:900;
}
.nav-name{ max-width: 140px; overflow:hidden; text-overflow:ellipsis; }
.nav-caret{ opacity:.8; }

.nav-profile-menu{
  display:none;
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  min-width: 220px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(2,6,23,.95);
  box-shadow: 0 25px 60px rgba(0,0,0,.55);
  z-index: 5000;
}
.nav-profile:hover .nav-profile-menu{ display:block; }
.nav-profile-menu a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(15,23,42,.35);
  margin-bottom:8px;
  text-decoration:none;
  color:#e5e7eb;
}
.nav-profile-menu a:last-child{ margin-bottom:0; }
.nav-profile-menu a:hover{ border-color: rgba(34,197,94,.55); }
.nav-profile-menu a.danger-link{
  border-color: rgba(248,113,113,.25);
}
.nav-profile-menu a.danger-link:hover{
  border-color: rgba(248,113,113,.65);
  color: #fecaca;
}

/* Mobile menu */
.nav-mobile{ display:none; }

/* On mobile: hide desktop nav & show dropdown menu when nav-open */
@media (max-width: 980px){
  .nav-main{ display:none; }
  .nav-name{ display:none; } /* keeps header short */
  .nav-profile-btn{ padding:8px; }

  .nav-mobile{
    display:none;
    position:absolute;
    left:16px; right:16px;
    top: calc(100% + 10px);
    padding:12px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(2,6,23,.95);
    box-shadow: 0 25px 60px rgba(0,0,0,.55);
    z-index: 5000;
    flex-direction:column;
    gap:10px;
  }
  body.nav-open .nav-mobile{ display:flex; }
  .nav-mobile a{
    width:100%;
    padding:12px 14px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(15,23,42,.35);
    text-decoration:none;
    color:#e5e7eb;
    font-weight:800;
  }
}
/* Layout */
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  position:relative;
}

/* Main nav */
.nav-main{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Right actions */
.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}

/* Soft pill links */
.nav-cta-soft{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(15,23,42,.35);
  color:#e5e7eb;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
}
.nav-cta-soft:hover{ border-color: rgba(34,197,94,.55); }

/* Bell */
.nav-bell{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(15,23,42,.35);
  color:#e5e7eb;
  text-decoration:none;
}
.nav-bell:hover{ border-color: rgba(34,197,94,.55); }
.bell-icon{ font-size:18px; line-height:1; }
.bell-badge{
  position:absolute;
  top:-6px; right:-6px;
  background:#ef4444; color:#fff;
  font-weight:900; font-size:.72rem;
  min-width:18px; height:18px;
  padding:0 6px;
  border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow: 0 0 0 2px rgba(2,6,23,.9);
}

/* Dropdowns */
.nav-more{ position:relative; }
.nav-more-btn{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(15,23,42,.35);
  color:#e5e7eb;
  font-weight:800;
  cursor:pointer;
}
.nav-more-menu{
  display:none;
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  min-width: 190px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(2,6,23,.95);
  box-shadow: 0 25px 60px rgba(0,0,0,.55);
  z-index: 5000;
}
.nav-more-menu a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(15,23,42,.35);
  margin-bottom:8px;
  color:#e5e7eb;
  text-decoration:none;
}
.nav-more-menu a:last-child{ margin-bottom:0; }
.nav-more:hover .nav-more-menu{ display:block; }

/* Profile dropdown */
.nav-profile{ position:relative; }
.nav-profile-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(15,23,42,.25);
  color:#e5e7eb;
  font-weight:800;
  cursor:pointer;
}
.nav-avatar{
  width:30px;height:30px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background: linear-gradient(135deg,#22c55e,#0ea5e9);
  color:#020617;
  font-weight:900;
}
.nav-profile-menu{
  display:none;
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  min-width: 240px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(2,6,23,.95);
  box-shadow: 0 25px 60px rgba(0,0,0,.55);
  z-index: 5000;
}
.nav-profile:hover .nav-profile-menu{ display:block; }
.nav-profile-head{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(15,23,42,.22);
  margin-bottom:10px;
}
.nav-profile-name{ font-weight:900; }
.nav-profile-sub{ opacity:.75; font-size:.8rem; margin-top:2px; }

.nav-profile-menu a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(15,23,42,.35);
  margin-bottom:8px;
  color:#e5e7eb;
  text-decoration:none;
}
.nav-profile-menu a:last-child{ margin-bottom:0; }
.nav-profile-menu a:hover{ border-color: rgba(34,197,94,.55); }

.nav-profile-menu a.danger-link{
  border-color: rgba(248,113,113,.25);
}
.nav-profile-menu a.danger-link:hover{
  border-color: rgba(248,113,113,.65);
  color: #fecaca;
}

/* Mobile menu */
.nav-mobile{ display:none; }
.nav-mobile-divider{ height:1px; background:rgba(255,255,255,.10); margin:6px 0; }

@media (max-width: 980px){
  .nav-main{ display:none; }

  .nav-mobile{
    display:none;
    position:absolute;
    left:16px; right:16px;
    top: calc(100% + 10px);
    padding:12px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(2,6,23,.95);
    box-shadow: 0 25px 60px rgba(0,0,0,.55);
    z-index: 5000;
    flex-direction:column;
    gap:10px;
  }
  body.nav-open .nav-mobile{ display:flex; }

  .nav-mobile a{
    width:100%;
    padding:12px 14px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(15,23,42,.35);
    text-decoration:none;
    color:#e5e7eb;
    font-weight:800;
  }

  /* keep header short */
  .nav-profile-btn .nav-caret{ display:none; }
}
/* ✅ Header font only (won't affect logo sizes/layout) */
.topbar,
.topbar .nav,
.topbar .nav a,
.topbar .nav-toggle,
.topbar .nav-user-pill,
.topbar .nav-cta,
.topbar .nav-more-btn {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* 🔔 Notification bell badge */
.nav-bell{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-bell-badge{
  position: absolute;
  top: -6px;
  right: -10px;
  background: #ef4444;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px rgba(2,6,23,.9);
}
/* ===============================
   MOBILE HAMBURGER FIX (FORCED)
   Put this at the BOTTOM of style.css
   =============================== */

.topbar-inner{
  position: relative;
}

/* Keep right actions aligned */
.nav-actions{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* FORCE hamburger to always show on mobile */
.nav-toggle{
  display: none; /* default desktop can still hide */
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,23,42,.35);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 99999;           /* ✅ always above everything */
  pointer-events: auto;     /* ✅ clickable */
}

.nav-toggle span{
  display: block;
  width: 22px;
  height: 2px;
  background: #e5e7eb;
  margin: 5px 0;
  border-radius: 999px;
}

/* ✅ Mobile behavior */
@media (max-width: 900px){
  /* If any CSS is messing with header layout, this stabilizes it */
  .topbar-inner{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  /* Hide desktop links; mobile uses dropdown */
  .nav-left{
    display: none !important;
  }

  /* Show hamburger on mobile */
  .nav-toggle{
    display: inline-flex !important;
  }

  /* Keep action pills from pushing hamburger away */
  .nav-actions{
    margin-left: auto !important;
    flex-wrap: nowrap !important;
  }

  /* Optional: if pills are too many on mobile, hide wallet/logout text and keep only icon bell + toggle */
  .nav-pill{
    display: none !important; /* ✅ keeps header clean & ensures hamburger visible */
  }

  /* But keep bell visible on mobile */
  .nav-bell{
    display: inline-flex !important;
  }
}

/* ✅ Make sure ticker never blocks taps */
.news-bar{
  pointer-events: none;
}
.news-bar *{
  pointer-events: none;
}

/* ✅ Mobile dropdown panel always above content */
.nav-mobile{
  z-index: 99998;
}
body.nav-open .nav-mobile { display: flex !important; }
/* ===== iPhone hamburger click fix ===== */

/* Make header always above everything */
.topbar{
  position: sticky;
  top: 0;
  z-index: 999999 !important;
}

/* Ensure the header container doesn't block taps */
.topbar *{
  pointer-events: auto;
}

/* Force hamburger to be clickable */
.nav-toggle{
  position: relative;
  z-index: 1000000 !important;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* IMPORTANT: News bar must NOT block taps */
.news-bar,
.news-bar-inner{
  pointer-events: none !important;
}
/* Mobile nav visibility */
.nav-mobile{
  display: none;
}

body.nav-open .nav-mobile{
  display: flex;
}

/* Prevent news bar blocking taps (iOS fix) */
.news-bar,
.news-bar-inner{
  pointer-events: none;
}

/* Hamburger always clickable */
.nav-toggle{
  z-index: 999999;
  pointer-events: auto;
}
/* ===== FIX: iPhone menu links not clickable ===== */

/* Make sure the mobile menu sits above everything */
.nav-mobile{
  position: fixed !important;
  left: 12px !important;
  right: 12px !important;
  top: 72px !important;          /* below header */
  z-index: 9999999 !important;   /* highest */
  pointer-events: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Force menu items to accept taps */
.nav-mobile a,
.nav-mobile *{
  pointer-events: auto !important;
}

/* Ensure the header itself is not blocking taps */
.topbar{
  z-index: 9999998 !important;
}

/* News bar must never block taps */
.news-bar,
.news-bar-inner,
.news-bar *{
  pointer-events: none !important;
}
/* ===== Premium subtle reveal animation ===== */
.swing-card {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.45s ease-out,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

/* Visible state */
.swing-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile: even softer */
@media (max-width: 768px) {
  .swing-card {
    transform: translateY(10px);
    transition:
      opacity 0.4s ease-out,
      transform 0.45s ease-out;
  }
}
/* ================================
   HARD OVERRIDE: MOBILE MENU FIX
   Put at VERY BOTTOM of style.css
   ================================ */

/* Hide any old mobile drawers/side menus */
.nav-mobile,
nav.nav-mobile,
.nav.nav-mobile{
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;

  top: 92px !important;
  width: min(92vw, 420px) !important;
  max-height: calc(100vh - 120px) !important;
  overflow: auto !important;

  position: fixed !important;
  border-radius: 18px !important;
  z-index: 999999 !important;

  /* Make it center panel, not drawer */
  display: none !important;
}

/* Only show when nav-open */
body.nav-open .nav-mobile,
body.nav-open nav.nav-mobile,
body.nav-open .nav.nav-mobile{
  display: block !important;
}

/* Ensure links are tappable */
.nav-mobile a{
  pointer-events: auto !important;
}

/* Overlay always behind menu, above page */
.nav-overlay{
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.55) !important;
  z-index: 999998 !important;
}
body.nav-open .nav-overlay{
  display: block !important;
}

/* Prevent ticker from stealing taps */
.news-bar,
.news-bar *{
  pointer-events: none !important;
}

/* Make hamburger clickable always */
.nav-toggle{
  z-index: 1000000 !important;
  pointer-events: auto !important;
  position: relative !important;
}
/* ===== STOP DESKTOP NAV FROM SHOWING ON MOBILE ===== */
@media (max-width: 900px){
  .nav-desktop{
    display: none !important;
  }
}
/* ==========================================
   KILL OLD MOBILE DRAWER (LEFT SIDE MENU)
   Put at VERY BOTTOM of style.css
   ========================================== */

/* Old drawer systems often use .nav, .nav-open, .nav-toggle */
@media (max-width: 900px){

  /* If your old menu uses .nav as a fixed drawer, hide it */
  header .nav,
  .topbar .nav,
  nav.nav {
    display: none !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    transform: none !important;
  }

  /* Stop old "nav-open" from revealing any legacy nav */
  body.nav-open header .nav,
  body.nav-open .topbar .nav,
  body.nav-open nav.nav {
    display: none !important;
  }
}
/* ===============================
   SHORT MOBILE HAMBURGER MENU
   =============================== */

@media (max-width: 768px) {
  .nav-mobile .hide-mobile {
    display: none !important;
  }
}
.flash-welcome {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;

  background: linear-gradient(135deg, rgba(15, 185, 129, 0.95), rgba(56, 189, 248, 0.95));
  color: #020617;
  padding: 14px 22px;
  border-radius: 999px;

  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 20px 40px rgba(0,0,0,0.35);

  animation: toastSlide 4.5s ease forwards;
  pointer-events: none;
}

@keyframes toastSlide {
  0% {
    opacity: 0;
    transform: translate(-50%, -12px);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -12px);
  }
}

/* Mobile */
@media (max-width: 480px) {
  .flash-welcome {
    top: 12px;
    font-size: 0.9rem;
    padding: 12px 18px;
  }
}
/* ===== Pricing Tabs (RDP / SOCKS5) ===== */
.pricing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.pricing-tabs {
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);
}

.pricing-tab {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.82);
  background: transparent;
  transition: transform .15s ease, background .2s ease, color .2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pricing-tab:hover { transform: translateY(-1px); }

.pricing-tab.is-active {
  background: linear-gradient(135deg, rgba(56,189,248,0.95), rgba(34,197,94,0.70));
  color: #06121f;
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
}

.pricing-group { display: none; }
.pricing-group.is-active { display: block; }

.pricing-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* If you want 4 columns later, keep this handy */
/* .pricing-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } */

@media (max-width: 980px) {
  .pricing-grid-3 { grid-template-columns: 1fr; }
}

/* Optional: keep featured card slightly lifted like Cloudzy */
.price-card-featured {
  transform: translateY(-6px);
}
@media (max-width: 980px) {
  .price-card-featured { transform: none; }
}
.pricing-group { display: none !important; }
.pricing-group.is-active { display: block !important; }
/* Pricing tab switch */
.pricing-group {
  display: none;
}

.pricing-group.is-active {
  display: block;
}
/* ===== RDP GUIDE COLLAPSIBLE ===== */
.rdp-guide-toggle{
  border: 0;
  margin: 14px 0;
}

.rdp-guide-summary{
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(15,23,42,0.55);
  box-shadow: 0 18px 45px rgba(0,0,0,0.25);
}

.rdp-guide-summary::-webkit-details-marker{ display:none; }

.rg-sum-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.rg-sum-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  border: 1px solid rgba(56,189,248,0.35);
  background: rgba(56,189,248,0.12);
  color: rgba(219,234,254,0.95);
}

.rg-sum-title{
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(255,255,255,0.92);
}

.rg-sum-right{
  display:flex;
  align-items:center;
  gap:10px;
  color: rgba(255,255,255,0.72);
  font-weight: 700;
  font-size: 12.5px;
}

.rg-sum-caret{
  display:inline-block;
  transition: transform .18s ease;
}

.rdp-guide-toggle[open] .rg-sum-caret{
  transform: rotate(180deg);
}

/* Add a bit of spacing above the opened content */
.rdp-guide-toggle > .rdp-guide{
  margin-top: 12px;
}
.socks-guide-wrapper {
  margin-top: 24px;
  border-radius: 14px;
}

.socks-guide-summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.socks-guide-summary small {
  display: block;
  font-size: 12px;
  opacity: 0.7;
  font-weight: 400;
}

.socks-guide-wrapper[open] .socks-guide-summary {
  background: rgba(255,255,255,0.08);
}

.socks-guide-summary::-webkit-details-marker {
  display: none;
}
/* =========================
   FAQ (Premium Accordion)
========================= */
.faq-section{
  padding: 3.5rem 0;
  position: relative;
}

.faq-wrap{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 1.5rem;
  align-items: start;
}

.faq-head{
  position: sticky;
  top: 92px;
  padding: 1.2rem;
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
}

.faq-kicker{
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin: 0 0 .4rem;
}

.faq-title{
  margin: 0 0 .5rem;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  letter-spacing: .02em;
}

.faq-sub{
  margin: 0;
  color: rgba(255,255,255,0.70);
  line-height: 1.65;
  font-size: 0.98rem;
}

.faq-accordion{
  display: grid;
  gap: .9rem;
}

.faq-item{
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(12px);
  transition: transform .18s ease, border-color .18s ease;
}

.faq-item::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 18px;
  background: radial-gradient(1100px 220px at 20% 0%,
    rgba(0, 255, 255, 0.15),
    rgba(0, 110, 255, 0.08),
    transparent 60%);
  pointer-events:none;
  opacity: 0;
  transition: opacity .2s ease;
}

.faq-item:hover{
  transform: translateY(-2px);
  border-color: rgba(110, 220, 255, 0.25);
}

.faq-item:hover::before{ opacity: 1; }

.faq-q{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.05rem;
  text-align: left;
  background: transparent;
  border: 0;
  color: #f4f6ff;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
}

.faq-q:focus-visible{
  outline: 2px solid rgba(110, 220, 255, 0.55);
  outline-offset: -2px;
}

.faq-ico{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  position: relative;
  flex: 0 0 auto;
}

.faq-ico::before,
.faq-ico::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width: 14px;
  height: 2px;
  background: rgba(255,255,255,0.85);
  transform: translate(-50%,-50%);
}

.faq-ico::after{
  width: 2px;
  height: 14px;
}

.faq-item.is-open .faq-ico::after{
  opacity: 0;
}

.faq-a{
  height: 0;
  overflow: hidden;
  transition: height .28s ease;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.faq-a-inner{
  padding: 0.95rem 1.05rem 1.1rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.7;
  font-size: 0.98rem;
}

/* Mobile */
@media (max-width: 900px){
  .faq-wrap{
    grid-template-columns: 1fr;
  }
  .faq-head{
    position: relative;
    top: auto;
  }
}
/* ===============================
   Cloudzy-style OS badge (Windows)
================================ */

.price-card {
  position: relative;
}

.os-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  pointer-events: none;
}

/* Windows logo (pure CSS) */
.os-badge.windows::before {
  content: "";
  width: 18px;
  height: 18px;
  background:
    linear-gradient(#fff 0 0) top left,
    linear-gradient(#fff 0 0) top right,
    linear-gradient(#fff 0 0) bottom left,
    linear-gradient(#fff 0 0) bottom right;
  background-size: 8px 8px;
  background-repeat: no-repeat;
  opacity: 0.85;
}

/* Featured card emphasis */
.price-card-featured .os-badge {
  background: rgba(120, 220, 255, 0.12);
  border-color: rgba(120, 220, 255, 0.35);
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .os-badge {
    width: 34px;
    height: 34px;
    top: 10px;
    right: 10px;
  }

  .os-badge.windows::before {
    width: 14px;
    height: 14px;
    background-size: 6px 6px;
  }
}
/* ===============================
   Fix "Most Popular" overlap
================================ */

/* Featured card badge reposition */
.price-card-featured .badge {
  top: 14px;
  right: 64px; /* move away from Windows icon */
  z-index: 3;
}

/* Mobile adjustment */
@media (max-width: 640px) {
  .price-card-featured .badge {
    top: 10px;
    right: 56px;
    font-size: 0.7rem;
    padding: 0.25rem 0.55rem;
  }
}
/* =========================
   Soften the whole page (premium)
   Paste at END of <style>
========================= */

/* 1) Global text: reduce harsh contrast */
body{
  color: rgba(255,255,255,0.88);
}

/* 2) Headlines: less thick */
.hero h1{
  font-weight: 750;           /* was 800 */
  letter-spacing: 0;
}
.section-title{
  font-weight: 750;           /* was 900/800 */
  font-size: 15.5px;          /* slightly smaller */
}
.section-sub{
  color: rgba(255,255,255,0.62);
  font-weight: 500;
}

/* 3) Cards: thinner borders + less shadow */
.hero,
.card{
  box-shadow: 0 14px 35px rgba(0,0,0,0.45); /* softer */
  border-color: rgba(148,163,184,0.18);     /* thinner feel */
}

/* 4) Option boxes: calmer borders + less aggressive hover */
.type-option,
.plan,
.rowitem{
  border-color: rgba(148,163,184,0.16);
  background: rgba(255,255,255,0.028);
}
.type-option:hover,
.plan:hover,
.rowitem:hover{
  border-color: rgba(148,163,184,0.26);
  background: rgba(255,255,255,0.04);
  box-shadow: none;
}

/* 5) Selected state: still clear but not loud */
.type-option.active,
.plan.active,
.rowitem.active{
  border-color: rgba(96,165,250,0.75);
  box-shadow: 0 0 0 2px rgba(96,165,250,0.10);
  background: rgba(96,165,250,0.06);
}

/* 6) Make bold labels less shouty */
.type-name,
.price,
.sumrow b{
  font-weight: 750; /* was 900 */
}

/* 7) Pills & chips: reduce visual weight */
.chip,
.pill{
  border-color: rgba(148,163,184,0.18);
  background: rgba(255,255,255,0.035);
}
.pill.hot{
  border-color: rgba(239,68,68,0.18);
  background: rgba(239,68,68,0.07);
}

/* 8) Buttons: slightly calmer */
.btn{
  font-weight: 800;
  border-color: rgba(148,163,184,0.22);
}
/* =========================
   Disabled / Out of stock
========================= */

.type-option.disabled{
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.4);
  background: rgba(255,255,255,0.02);
}

.type-option.disabled:hover{
  transform: none;
  border-color: rgba(148,163,184,0.16);
  box-shadow: none;
}

/* Optional badge text */
.type-option.disabled::after{
  content: "Out of stock";
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.25);
  color: #fecaca;
  font-weight: 800;
}
.bami-center-glow{
  position: relative;
  width: 90px;
  height: 90px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 22px;
  z-index:2;
}

.bami-center-glow img{
  width: 58px;
  height: auto;
  position: relative;
  z-index: 3;
  filter: drop-shadow(0 0 12px rgba(0,220,255,.9));
}

/* glowing energy ring */
.glow-ring{
  position:absolute;
  inset:-16px;
  border-radius:50%;
  background:
    radial-gradient(circle,
      rgba(0,220,255,.45),
      rgba(0,140,255,.25),
      transparent 70%);
  filter: blur(10px);
  animation: pulseGlow 2.8s ease-in-out infinite;
}

/* outer soft halo */
.bami-center-glow::after{
  content:"";
  position:absolute;
  inset:-28px;
  border-radius:50%;
  background:
    radial-gradient(circle,
      rgba(120,80,255,.18),
      transparent 70%);
  filter: blur(20px);
  animation: slowAura 6s linear infinite;
}

@keyframes pulseGlow{
  0%,100%{ transform: scale(.95); opacity:.7; }
  50%{ transform: scale(1.15); opacity:1; }
}

@keyframes slowAura{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
/* ==========================
   BAMISOCKS: Animated Flow Diagram
========================== */
.bami-flow-card{
  margin-top: 18px;
  border-radius: 22px;
  border: 1px solid rgba(148,163,184,.18);
  background: radial-gradient(circle at top left, rgba(34,197,94,.10), transparent 55%),
              radial-gradient(circle at bottom right, rgba(14,165,233,.10), transparent 60%),
              rgba(2,6,23,.60);
  box-shadow: 0 22px 60px rgba(0,0,0,.45);
  overflow: hidden;
}
.bami-flow-head{ padding: 16px 16px 10px; }
.bami-flow-badge{
  display:inline-flex;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(15,23,42,.55);
  font-weight: 800;
  font-size: .82rem;
}
.bami-flow-title{ margin: 10px 0 6px; font-size: 1.05rem; font-weight: 800; }
.bami-flow-sub{ margin: 0; color: rgba(226,232,240,.78); font-size: .9rem; line-height: 1.6; }

.bami-flow-diagram{ padding: 8px 12px 16px; }
.bami-flow-svg{ width:100%; height:auto; display:block; }

.bami-node{
  fill: rgba(15,23,42,.72);
  stroke: rgba(148,163,184,.22);
}

.bami-h{ fill: #e5e7eb; font-size: 22px; font-weight: 900; }
.bami-p{ fill: rgba(226,232,240,.78); font-size: 14px; font-weight: 600; }
.bami-pill{ fill: #e5e7eb; font-size: 14px; font-weight: 900; }
.bami-note{ fill: rgba(226,232,240,.75); font-size: 14px; font-weight: 700; }

.bami-route{
  fill: none;
  stroke: rgba(34,197,94,.80);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 10 12;
  animation: bamiDash 1.9s linear infinite;
  opacity: .95;
}
.bami-route-b{
  stroke: rgba(14,165,233,.85);
  animation-duration: 2.2s;
}
@keyframes bamiDash{
  to { stroke-dashoffset: -44; }
}

.bami-dot{ fill: #22c55e; filter: drop-shadow(0 0 10px rgba(34,197,94,.55)); }
.bami-dot-b{ fill:#0ea5e9; filter: drop-shadow(0 0 10px rgba(14,165,233,.55)); }

.bami-dot-a{ animation: bamiMoveA 2.4s ease-in-out infinite; }
.bami-dot-b{ animation: bamiMoveB 2.7s ease-in-out infinite; }

@keyframes bamiMoveA{
  0%{ transform: translateX(0px); opacity:.3; }
  35%{ opacity:1; }
  50%{ transform: translateX(110px); opacity:1; }
  100%{ transform: translateX(220px); opacity:.25; }
}
@keyframes bamiMoveB{
  0%{ transform: translateX(0px); opacity:.3; }
  35%{ opacity:1; }
  50%{ transform: translateX(110px); opacity:1; }
  100%{ transform: translateX(220px); opacity:.25; }
}

@media (max-width: 700px){
  .bami-h{ font-size: 18px; }
  .bami-p, .bami-note, .bami-pill{ font-size: 13px; }
}
/* =========================
   STATS STRIP (Premium + Mobile)
========================= */
.stats-strip{
  padding: 18px 0 10px;
}

.stats-inner{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: stretch;
}

/* Card */
.stat-item{
  text-align: center;
  padding: 18px 14px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(2,6,23,.40);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
}

/* Number */
.stat-number{
  font-size: 44px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.03em;
  margin-bottom: 8px;

  background: linear-gradient(135deg, #22c55e, #38bdf8, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 22px rgba(56,189,248,.18);
}

/* Label */
.stat-label{
  font-size: 13.5px;
  line-height: 1.35;
  color: rgba(226,232,240,.78);
  max-width: 20ch;
  margin: 0 auto;
}

/* ✅ Mobile: 2×2 grid + tighter spacing */
@media (max-width: 700px){
  .stats-strip{ padding: 10px 0 8px; }

  .stats-inner{
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .stat-item{
    padding: 14px 12px;
    border-radius: 18px;
  }

  .stat-number{
    font-size: 34px;
    margin-bottom: 6px;
  }

  .stat-label{
    font-size: 12.5px;
    max-width: 18ch;
  }
}

/* ✅ Small phones: single column if you want more breathing space */
@media (max-width: 380px){
  .stats-inner{ grid-template-columns: 1fr; }
}
/* =========================
   TRUST PILLS (Premium)
========================= */
.trust-pills{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 820px;
  margin: 0 auto;
}

.trust-pill{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(15,23,42,.55), rgba(2,6,23,.55));
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}

.tp-ico{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: radial-gradient(circle at 30% 30%, rgba(34,197,94,.25), rgba(56,189,248,.18), rgba(168,85,247,.12));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 0 6px rgba(56,189,248,.08);
  flex: 0 0 auto;
  font-size: 18px;
}

.trust-pill span:last-child{
  font-weight: 800;
  letter-spacing: -0.01em;
  color: rgba(226,232,240,.92);
  line-height: 1.2;
  font-size: 15.5px;
}

/* Desktop: 2 columns for better organization */
@media (min-width: 900px){
  .trust-pills{
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  /* Make the last item span full width (looks clean) */
  .trust-pills .trust-pill:last-child{
    grid-column: 1 / -1;
    justify-content: center;
  }
}

/* Small phones: tighter */
@media (max-width: 380px){
  .trust-pill{ padding: 12px 14px; }
  .trust-pill span:last-child{ font-size: 14.5px; }
}
/* ===== Mobile centered stacked layout ===== */
@media (max-width: 700px){
  .trust-pill{
    flex-direction: column;
    text-align: center;
    padding: 18px 16px;
    gap: 10px;
  }

  .trust-pill .pill-icon{
    width: 54px;
    height: 54px;
    font-size: 1.6rem;
  }

  .trust-pill .pill-text{
    font-size: .95rem;
    line-height: 1.4;
  }
}
/* =========================
   BAMISOCKS FEATURE CARDS
   ========================= */

.bami-features{
  display:grid;
  gap: 16px;
  margin-top: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px){
  .bami-features{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .bami-features{ grid-template-columns: 1fr; }
}

.bami-card{
  position: relative;
  border-radius: 18px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,23,42,.35);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  display:flex;
  flex-direction: column;
  min-height: 260px; /* keeps them consistent on desktop */
  overflow:hidden;
}

.bami-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 18px;
  background: radial-gradient(700px 200px at 20% 0%,
    rgba(34,197,94,.18),
    rgba(14,165,233,.12),
    rgba(0,0,0,0));
  pointer-events:none;
}

.bami-card.is-accent::before{
  background: radial-gradient(700px 200px at 20% 0%,
    rgba(14,165,233,.20),
    rgba(168,85,247,.12),
    rgba(0,0,0,0));
}

.bami-card-top{
  position: relative;
  display:flex;
  gap: 12px;
  align-items:flex-start;
}

.bami-ico{
  width: 44px;
  height: 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(2,6,23,.45);
  font-size: 1.2rem;
  flex: 0 0 auto;
}

.bami-title{
  margin: 0;
  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: .02em;
}

.bami-desc{
  margin: 6px 0 0;
  color: rgba(229,231,235,.86);
  font-size: .92rem;

  /* keeps cards short on desktop */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bami-points{
  position: relative;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display:grid;
  gap: 8px;
}

.bami-points li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: rgba(229,231,235,.92);
  font-size: .92rem;
}

.bami-points li::before{
  content:"›";
  color: rgba(34,197,94,.95);
  font-weight: 900;
  line-height: 1;
  margin-top: 1px;
}

.bami-actions{
  position: relative;
  margin-top: auto; /* pins CTA to the bottom */
  padding-top: 14px;
  display:grid;
  gap: 10px;
}

.bami-meta{
  font-size: .86rem;
  color: rgba(229,231,235,.72);
}

/* Make cards feel tighter on mobile */
@media (max-width: 640px){
  .bami-card{ padding: 14px; min-height: unset; }
  .bami-ico{ width: 42px; height: 42px; }
}
/* ===== HOW IT WORKS: Scroll Step Highlight ===== */
.gs-dark-card{
  position: relative;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  border: 1px solid rgba(255,255,255,.10);
}

/* Default icon */
.gs-dark-icon{
  transition: transform .35s ease, filter .35s ease, opacity .35s ease;
  opacity: .9;
}

/* Active card highlight */
.gs-dark-card.is-active{
  transform: translateY(-6px);
  border-color: rgba(34,197,94,.22);
  box-shadow:
    0 18px 55px rgba(0,0,0,.45),
    0 0 0 1px rgba(34,197,94,.08) inset;
}

/* Active glow line on left (nice premium cue) */
.gs-dark-card.is-active::before{
  content:"";
  position:absolute;
  left:-1px;
  top:14px;
  bottom:14px;
  width:3px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(34,197,94,.95), rgba(14,165,233,.85));
  box-shadow: 0 0 18px rgba(34,197,94,.30);
}

/* Icon pulse only on active */
.gs-dark-card.is-active .gs-dark-icon{
  opacity: 1;
  transform: scale(1.04);
  filter: drop-shadow(0 10px 18px rgba(14,165,233,.18));
  animation: gsPulse 1.6s ease-in-out infinite;
}

@keyframes gsPulse{
  0%, 100% { transform: scale(1.04); }
  50% { transform: scale(1.09); }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  .gs-dark-card,
  .gs-dark-icon{
    transition: none !important;
    animation: none !important;
  }
}
/* =========================
   BAMISOCKS FLOW (RESPONSIVE)
   ========================= */

.bami-flow{
  padding: 28px 0;
}

.bami-flow-inner{
  max-width: 1120px;         /* ✅ prevents “too wide” look */
  margin: 0 auto;
  padding: 0 18px;
}

.bami-flow-head{
  margin-bottom: 14px;
}

.bami-flow-badge{
  display:inline-flex;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,23,42,.35);
  color: rgba(229,231,235,.92);
  font-weight: 800;
  font-size: .82rem;
}

.bami-flow-title{
  margin: 10px 0 6px;
  font-size: 1.15rem;
  font-weight: 900;
}

.bami-flow-sub{
  margin: 0;
  color: rgba(229,231,235,.78);
  max-width: 72ch;
}

/* Track wrapper (glass) */
.bami-flow-track{
  position: relative;
  margin-top: 14px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.38);
  box-shadow: 0 22px 70px rgba(0,0,0,.38);
  overflow: hidden;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* soft background glow */
.bami-flow-track::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(900px 220px at 15% 0%,
    rgba(34,197,94,.18),
    rgba(14,165,233,.14),
    rgba(0,0,0,0));
  pointer-events:none;
}

/* connector lines (desktop) */
@media (min-width: 901px){
  .bami-flow-track::after{
    content:"";
    position:absolute;
    left: 10%;
    right: 10%;
    top: 52%;
    height: 2px;
    background: repeating-linear-gradient(
      90deg,
      rgba(34,197,94,.75) 0 14px,
      rgba(34,197,94,0) 14px 24px
    );
    opacity: .65;
    pointer-events:none;
  }
}

/* Node cards */
.bami-flow-node{
  position: relative;
  z-index: 1;
  border-radius: 18px;
  padding: 14px 14px 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,23,42,.40);
  box-shadow: 0 16px 45px rgba(0,0,0,.28);
}

.bami-flow-node.is-center{
  background: rgba(15,23,42,.52);
  border-color: rgba(34,197,94,.20);
}

.bami-flow-node-top{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 8px;
}

.bami-flow-ico{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(2,6,23,.45);
  font-size: 1.1rem;
}

.bami-flow-node-title{
  font-weight: 900;
  letter-spacing: .02em;
}

.bami-flow-node-sub{
  color: rgba(229,231,235,.82);
  font-size: .92rem;
  margin-top: 4px;
}

.bami-flow-pills{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.bami-flow-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(255,255,255,.06);
  color: rgba(229,231,235,.92);
  font-weight: 800;
  font-size: .86rem;
}

/* footer tip */
.bami-flow-foot{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(15,23,42,.28);
  color: rgba(229,231,235,.85);
  font-weight: 700;
}
.bami-flow-tip{
  color: rgba(34,197,94,.95);
  font-weight: 900;
}

/* ===== Mobile layout: stack vertically ===== */
@media (max-width: 900px){
  .bami-flow-track{
    grid-template-columns: 1fr;
  }

  /* vertical connector */
  .bami-flow-track::after{
    content:"";
    position:absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 80px;
    bottom: 80px;
    width: 2px;
    background: repeating-linear-gradient(
      180deg,
      rgba(14,165,233,.75) 0 14px,
      rgba(14,165,233,0) 14px 24px
    );
    opacity: .55;
    pointer-events:none;
  }
}
/* =========================
   PREMIUM TOUCH: MOVING DOTS
   ========================= */

/* Base animated dots */
.bami-flow-track .bami-flow-dot{
  position: absolute;
  z-index: 2;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(34,197,94,.95);
  box-shadow:
    0 0 0 6px rgba(34,197,94,.12),
    0 0 18px rgba(34,197,94,.30);
  pointer-events: none;
  opacity: .95;
}

/* Dot 2 color */
.bami-flow-track .bami-flow-dot.is-blue{
  background: rgba(14,165,233,.95);
  box-shadow:
    0 0 0 6px rgba(14,165,233,.12),
    0 0 18px rgba(14,165,233,.30);
}

/* ===== Desktop: horizontal travel ===== */
@media (min-width: 901px){
  .bami-flow-track .bami-flow-dot{
    top: 52%;
    transform: translateY(-50%);
    left: 10%;
    animation: bamiDotX 2.8s linear infinite;
  }

  .bami-flow-track .bami-flow-dot.is-blue{
    animation-duration: 3.4s;
    animation-delay: .45s;
  }

  @keyframes bamiDotX{
    0%   { left: 10%; opacity: 0; }
    10%  { opacity: .95; }
    90%  { opacity: .95; }
    100% { left: 90%; opacity: 0; }
  }
}

/* ===== Mobile: vertical travel ===== */
@media (max-width: 900px){
  .bami-flow-track .bami-flow-dot{
    left: 50%;
    transform: translateX(-50%);
    top: 80px;
    animation: bamiDotY 2.8s linear infinite;
  }

  .bami-flow-track .bami-flow-dot.is-blue{
    animation-duration: 3.4s;
    animation-delay: .45s;
  }

  @keyframes bamiDotY{
    0%   { top: 80px; opacity: 0; }
    10%  { opacity: .95; }
    90%  { opacity: .95; }
    100% { top: calc(100% - 80px); opacity: 0; }
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .bami-flow-track .bami-flow-dot{ animation: none !important; display:none; }
}
/* =========================
   STATS STRIP (RESPONSIVE + NOT TOO WIDE)
   ========================= */

.stats-strip{
  padding: 18px 0 10px;
}

.stats-wrap{
  max-width: 1120px;         /* ✅ keeps it contained */
  margin: 0 auto;
  padding: 0 18px;
}

.stats-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

/* Tablet */
@media (max-width: 1000px){
  .stats-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile */
@media (max-width: 520px){
  .stats-grid{ grid-template-columns: 1fr; }
}

.stat-card{
  border-radius: 18px;
  padding: 14px 14px 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(15,23,42,.35);
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
  text-align: center;
}

.stat-number{
  font-weight: 950;
  font-size: 2.15rem;
  line-height: 1;
  letter-spacing: .02em;
  color: rgba(147,197,253,.95); /* soft neon */
  text-shadow: 0 14px 30px rgba(14,165,233,.15);
}

.stat-label{
  margin-top: 8px;
  font-size: .92rem;
  color: rgba(229,231,235,.78);
  line-height: 1.35;
}

/* Optional: hover lift on desktop */
@media (hover:hover){
  .stat-card{
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .stat-card:hover{
    transform: translateY(-4px);
    border-color: rgba(34,197,94,.20);
    box-shadow: 0 24px 70px rgba(0,0,0,.35);
  }
}

.stats-footnote{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap: 10px;
  color: rgba(229,231,235,.65);
  font-size: .86rem;
}

.stats-dot{
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: rgba(34,197,94,.9);
  box-shadow: 0 0 0 6px rgba(34,197,94,.12);
}
/* =========================
   BENEFIT BADGES (COMPACT)
   ========================= */

.bami-badges{
  max-width: 1120px;
  margin: 12px auto 0;
  padding: 0 18px;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* Tablet */
@media (max-width: 1000px){
  .bami-badges{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile */
@media (max-width: 560px){
  .bami-badges{ grid-template-columns: 1fr; }
}

.bami-badge{
  display:flex;
  align-items:center;
  gap: 10px;

  padding: 10px 12px;              /* ✅ less height */
  border-radius: 999px;            /* chip look */
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(15,23,42,.28);
  box-shadow: 0 14px 45px rgba(0,0,0,.22);
}

.bami-badge-ico{
  width: 30px;                     /* ✅ smaller icon */
  height: 30px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(2,6,23,.45);
  font-size: .95rem;
  flex: 0 0 auto;
}

.bami-badge-text{
  font-weight: 800;
  color: rgba(229,231,235,.88);
  font-size: .92rem;
  line-height: 1.2;
}
/* =========================
   TRUST STRIP (CENTERED + PREMIUM)
   ========================= */

.trust-strip{
  padding: 22px 0 16px;
}

.trust-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px;

  border-radius: 26px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.38);
  box-shadow: 0 30px 80px rgba(0,0,0,.38);
}

/* ===== Stats ===== */

.trust-stats{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  padding: 18px;
}

/* Tablet */
@media (max-width: 1000px){
  .trust-stats{ grid-template-columns: repeat(2,1fr); }
}

/* Mobile */
@media (max-width: 520px){
  .trust-stats{ grid-template-columns: 1fr; }
}

.trust-card{
  text-align:center;
  padding: 14px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(15,23,42,.35);
  box-shadow: 0 16px 45px rgba(0,0,0,.28);
}

.trust-number{
  font-size: 2.1rem;
  font-weight: 950;
  color: rgba(147,197,253,.95);
  text-shadow: 0 14px 30px rgba(14,165,233,.15);
}

.trust-label{
  margin-top: 6px;
  font-size: .92rem;
  color: rgba(229,231,235,.78);
}

/* ===== Badges ===== */

.trust-badges{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  padding: 0 18px 18px;
}

/* Tablet */
@media (max-width: 1000px){
  .trust-badges{ grid-template-columns: repeat(2,1fr); }
}

/* Mobile */
@media (max-width: 560px){
  .trust-badges{ grid-template-columns: 1fr; }
}

.trust-badge{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(15,23,42,.28);
  box-shadow: 0 14px 45px rgba(0,0,0,.22);
  text-align:center;
  font-weight: 800;
  font-size: .92rem;
  color: rgba(229,231,235,.9);
}

/* subtle hover lift */
@media (hover:hover){
  .trust-card, .trust-badge{
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .trust-card:hover, .trust-badge:hover{
    transform: translateY(-3px);
    box-shadow: 0 22px 60px rgba(0,0,0,.35);
  }
}
/* Emphasize How-it-works headline */
.bami-flow-title{
  text-align: center;
  font-weight: 900;
  letter-spacing: .01em;
}

.bami-flow-sub{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  font-weight: 600;              /* slightly bolder */
  max-width: 64ch;              /* keeps it clean & readable */
  opacity: .9;
}
/* ===== Trust badges base ===== */
.trust-badge{
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(15,23,42,.28);
  box-shadow: 0 14px 45px rgba(0,0,0,.22);

  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;

  text-align:center;
}

/* icon style */
.trust-ico{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(2,6,23,.45);
  font-size: 1rem;
  flex: 0 0 auto;
}

/* text style */
.trust-text{
  font-weight: 850;
  font-size: .92rem;
  color: rgba(229,231,235,.9);
  line-height: 1.2;
}

/* ✅ Mobile: center + icon on top */
@media (max-width: 560px){
  .trust-badges{
    justify-items: center;      /* makes each badge centered in the grid */
  }

  .trust-badge{
    width: 100%;
    max-width: 420px;           /* keeps it nicely centered, not stretched */
    flex-direction: column;     /* icon on top */
    gap: 8px;
    padding: 14px 12px;
  }

  .trust-text{
    font-size: .95rem;
  }
}
/* ===== Feature cards section heading ===== */
.section-title{
  text-align: center;
  font-weight: 900;
  letter-spacing: .06em;
}

.section-subtitle{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 68ch;
  font-weight: 600;
  opacity: .9;
}
/* =========================================================
   ✅ PREMIUM SPACING + ALIGNMENT PATCH (INDEX)
   Paste at bottom of style.css
========================================================= */

/* Consistent section rhythm */
:root{
  --sec-y: 3.2rem;
  --sec-y-m: 2.2rem;
  --max: 1120px;
}

.container{
  max-width: var(--max);
}

/* Tighten generic sections */
.section{
  padding: var(--sec-y) 0;
}
@media (max-width: 768px){
  .section{ padding: var(--sec-y-m) 0; }
}

/* Waves: reduce “too much space” */
.section-divider{
  margin: 0;
}
.section-divider .wave-anim{
  height: 170px;
}
@media (max-width: 768px){
  .section-divider .wave-anim{ height: 120px; }
}

/* Center and make headings feel premium */
.contact-header{
  text-align: center;
  max-width: 820px;
  margin: 0 auto 1.2rem;
}
.section-title{
  font-weight: 700;
  letter-spacing: .2px;
}
.section-subtitle{
  max-width: 760px;
  margin: .55rem auto 0;
  opacity: .9;
}

/* Your “How it works (visual)” block: keep it not-too-wide */
.bami-flow-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem;
}
.bami-flow-head{
  text-align: center;
  max-width: 820px;
  margin: 0 auto 1rem;
}
.bami-flow-title{
  font-weight: 700;
}

/* Trust strip: stop it from feeling too wide */
.trust-wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Trust badges: CENTER + icon on top (mobile) */
.trust-badges{
  display: grid;
  gap: 10px;
  justify-content: center;
}

.trust-badge{
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  text-align: center;
}

@media (max-width: 520px){
  .trust-badge{
    flex-direction: column;
    gap: 6px;
    padding: 12px 12px;
  }
  .trust-ico{
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }
  .trust-text{
    text-align: center;
  }
}
/* ✅ Center + slightly bolder "Transparent pricing" heading (safe) */
#pricing .pricing-head{
  align-items: center;
}

#pricing .pricing-head > div{
  width: 100%;
  text-align: center;
  margin: 0 auto 12px;
}

#pricing .pricing-head .section-title{
  font-weight: 700;        /* a little bolder */
  text-transform: none;    /* keep clean */
  margin: 0;
}

#pricing .pricing-head .section-subtitle{
  margin: .55rem auto 0;
  max-width: 720px;
  opacity: .92;
}

/* Keep tabs aligned nicely */
#pricing .pricing-tabs{
  margin-left: auto;
}

/* On mobile: center tabs too */
@media (max-width: 768px){
  #pricing .pricing-head{
    flex-direction: column;
    gap: 12px;
  }
  #pricing .pricing-tabs{
    margin-left: 0;
    justify-content: center;
  }
}
/* ✅ Stop the long "pill" — make the tabs wrap tight */
#pricing .pricing-tabs{
  width: fit-content;          /* shrink to content */
  max-width: 100%;
  display: inline-flex;        /* keep buttons tight */
  gap: 10px;
  padding: 8px;
  border-radius: 999px;
  margin: 14px auto 0;         /* center it */
}

/* If your CSS previously forced it full width, override it */
#pricing .pricing-tabs,
#pricing .pricing-tabs *{
  flex: unset !important;
}

/* Optional: ensure the parent centers it nicely */
#pricing .pricing-head{
  flex-direction: column;
  align-items: center;
}
#pricing .pricing-tabs{ width: fit-content !important; }
.bami-seo-intro{
  max-width: 980px;
  margin: 0 auto;
  padding: 12px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(244,246,255,.88);
  font-size: .92rem;
  line-height: 1.45;
  text-align: center;
}
.bami-seo-intro strong{ color: #fff; }
@media (max-width: 640px){
  .bami-seo-intro{ border-radius: 16px; text-align: left; }
}
/* ===== SEO RDP Page ===== */
.bami-seo-hero{ padding-top: 10px; }
.bami-seo-hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items: start;
}
.bami-kicker{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(56,189,248,.12);
  border: 1px solid rgba(56,189,248,.22);
  color: rgba(244,246,255,.9);
  font-size: .78rem;
  letter-spacing: .2px;
  margin: 0 0 10px;
}
.bami-h1{ margin: 0 0 10px; }
.bami-lead{
  margin: 0 0 14px;
  color: rgba(244,246,255,.78);
  line-height: 1.7;
  max-width: 720px;
}
.bami-cta-row{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 10px;
}
.bami-mini-badges{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  color: rgba(244,246,255,.72);
  font-size: .9rem;
}
.bami-media-card{
  border-radius: 18px;
  overflow:hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.30);
}
.bami-media-card img{ width:100%; height:auto; display:block; }
.bami-quick-card{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(244,246,255,.82);
}
.bami-quick-row{ margin: 6px 0; }

.bami-sec-head{ margin-bottom: 14px; }
.bami-seo-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.bami-seo-card{
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 32px rgba(0,0,0,.22);
}
.bami-seo-card h3{ margin: 0 0 6px; }
.bami-seo-card p{ margin: 0; color: rgba(244,246,255,.76); line-height: 1.65; }

.bami-steps{
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(244,246,255,.82);
  line-height: 1.8;
}
.bami-cta-center{ margin-top: 14px; display:flex; gap:10px; flex-wrap: wrap; }

@media (max-width: 900px){
  .bami-seo-hero-grid{ grid-template-columns: 1fr; }
  .bami-seo-grid{ grid-template-columns: 1fr; }
}
.bami-card .btn.ghost{
  opacity:.85;
  font-size:.9rem;
}
/* =========================
   BAMISOCKS SEO VISUAL PACK
========================= */

/* Section head */
.bami-vhead{margin:0 0 14px}
.bami-vkicker{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(56,189,248,.12);
  border: 1px solid rgba(56,189,248,.22);
  color: rgba(244,246,255,.92);
  font-size:.78rem;
}
.bami-vkicker .dot{width:8px;height:8px;border-radius:999px;background:rgba(56,189,248,.9);box-shadow:0 0 16px rgba(56,189,248,.45)}
.bami-vsub{margin:8px 0 0; color: rgba(244,246,255,.72); line-height:1.65}

/* Visual cards */
.bami-vgrid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px}
.bami-vcard{
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 32px rgba(0,0,0,.22);
}
.bami-vcard h3{margin:0 0 6px}
.bami-vcard p{margin:0; color: rgba(244,246,255,.76); line-height:1.65}
.bami-vmeta{margin-top:10px; color: rgba(244,246,255,.62); font-size:.9rem}

/* Diagram container */
.bami-diagram{
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  padding: 14px;
  overflow:hidden;
}
.bami-diagram svg{width:100%; height:auto; display:block}

/* Comparison chips */
.bami-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(244,246,255,.88);
  font-size:.85rem;
}
.bami-chip.good{border-color: rgba(34,197,94,.22); background: rgba(34,197,94,.10)}
.bami-chip.info{border-color: rgba(56,189,248,.22); background: rgba(56,189,248,.10)}
.bami-chip.warn{border-color: rgba(245,158,11,.22); background: rgba(245,158,11,.10)}

/* Decision rows */
.bami-decision{
  display:grid; grid-template-columns: 1fr 1fr;
  gap:12px;
}
.bami-decision .bami-vcard ul{margin:8px 0 0; padding-left:18px; color: rgba(244,246,255,.76); line-height:1.7}

/* Responsive */
@media (max-width: 980px){
  .bami-vgrid{grid-template-columns:1fr}
  .bami-decision{grid-template-columns:1fr}
}
/* =========================
   BAMISOCKS CYBER NEON PACK
   (SEO-safe: visuals only)
========================= */

/* Neon section shell */
.bami-neon{
  position: relative;
  border-radius: 18px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 44px rgba(0,0,0,.36);
  overflow: hidden;
}
.bami-neon:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(circle at 20% 15%, rgba(56,189,248,.22), transparent 46%),
    radial-gradient(circle at 80% 70%, rgba(168,85,247,.18), transparent 48%),
    radial-gradient(circle at 40% 85%, rgba(34,197,94,.12), transparent 45%);
  filter: blur(14px);
  pointer-events:none;
}
.bami-neon > *{ position:relative; z-index:1; }

/* Kicker */
.bami-vkicker{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(56,189,248,.12);
  border: 1px solid rgba(56,189,248,.25);
  color: rgba(244,246,255,.92);
  font-size:.78rem;
}
.bami-vkicker .dot{
  width:8px;height:8px;border-radius:999px;
  background: rgba(56,189,248,.95);
  box-shadow: 0 0 18px rgba(56,189,248,.55);
}

/* Diagram frame */
.bami-diagram{
  border-radius: 18px;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 20px 50px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(56,189,248,.06);
  padding: 14px;
  overflow:hidden;
}
.bami-diagram svg{width:100%; height:auto; display:block}

/* Neon nodes */
.bami-node{
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.32));
}
.bami-node--cyan{
  fill: rgba(255,255,255,.06);
  stroke: rgba(56,189,248,.38);
}
.bami-node--purple{
  fill: rgba(255,255,255,.06);
  stroke: rgba(168,85,247,.32);
}
.bami-node--green{
  fill: rgba(255,255,255,.06);
  stroke: rgba(34,197,94,.28);
}

/* Animated neon line */
.bami-line{
  stroke: rgba(56,189,248,.95);
  stroke-width: 4;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 7 10;
  animation: bami-dash 2.4s linear infinite;
  filter: drop-shadow(0 0 10px rgba(56,189,248,.35));
}
.bami-line--purple{
  stroke: rgba(168,85,247,.9);
  filter: drop-shadow(0 0 10px rgba(168,85,247,.30));
}
@keyframes bami-dash{ to { stroke-dashoffset: -34; } }

/* Neon chips */
.bami-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(244,246,255,.88);
  font-size:.85rem;
}
.bami-chip.good{border-color: rgba(34,197,94,.25); background: rgba(34,197,94,.10)}
.bami-chip.info{border-color: rgba(56,189,248,.25); background: rgba(56,189,248,.10)}
.bami-chip.warn{border-color: rgba(245,158,11,.25); background: rgba(245,158,11,.10)}

/* Cards grid */
.bami-vgrid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px}
.bami-vcard{
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 32px rgba(0,0,0,.22);
}
.bami-vcard h3{margin:0 0 6px}
.bami-vcard p{margin:0; color: rgba(244,246,255,.76); line-height:1.65}
.bami-vmeta{margin-top:10px; color: rgba(244,246,255,.62); font-size:.9rem}

@media (prefers-reduced-motion: reduce){
  .bami-line{ animation:none !important; stroke-dasharray:none !important; }
}
@media (max-width: 980px){
  .bami-vgrid{grid-template-columns:1fr}
}
/* =========================
   CONTACT PAGE (contact.php)
   ========================= */
.bami-contact-wrap { max-width: 1100px; margin: 24px auto 60px; padding: 0 16px; }
.bami-contact-head { text-align: center; margin-bottom: 18px; }
.bami-contact-title { font-size: 18px; letter-spacing: .16em; opacity: .9; margin: 0; }
.bami-contact-sub { margin: 8px auto 0; max-width: 800px; opacity: .78; }

.bami-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
@media (max-width: 900px){ .bami-contact-grid{ grid-template-columns: 1fr; } }

.bami-card { border-radius: 16px; padding: 16px; }
.bami-card-glass { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); backdrop-filter: blur(10px); }

.bami-chip { display: inline-flex; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 999px; font-size: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10); }
.bami-h2 { margin: 10px 0 6px; font-size: 18px; }
.bami-muted { opacity: .8; margin: 0; }

.bami-btn-stack { display: grid; gap: 10px; margin-top: 14px; }
.bami-btn { display:flex; align-items:center; gap: 10px; padding: 12px 14px; border-radius: 999px; text-decoration: none; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); }
.bami-btn-wide { width: 100%; justify-content: center; margin-top: 14px; }
.bami-btn-ico { width: 22px; text-align:center; }
.bami-btn-primary { background: linear-gradient(90deg, rgba(34,197,94,.18), rgba(14,165,233,.18)); }
.bami-btn-secondary { background: linear-gradient(90deg, rgba(59,130,246,.18), rgba(236,72,153,.18)); }
.bami-btn-ghost { background: rgba(255,255,255,.04); }

.bami-tip { display:flex; gap: 10px; align-items:flex-start; margin-top: 14px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); }
.bami-link { margin-left: 8px; text-decoration: underline; }

.bami-footnote { margin-top: 12px; opacity: .82; display:flex; align-items:center; gap: 10px; }
.bami-dot { width: 10px; height: 10px; border-radius: 50%; display:inline-block; }
.bami-dot-ok { background: #22c55e; box-shadow: 0 0 12px rgba(34,197,94,.55); }
.bami-dot-warn { background: #f59e0b; box-shadow: 0 0 12px rgba(245,158,11,.55); }

.bami-info-list { display: grid; gap: 10px; margin-top: 14px; }
.bami-info-row { display:grid; grid-template-columns: 24px 1fr auto; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); }
.bami-info-k { opacity: .85; }
.bami-info-v { opacity: .9; }

.bami-mt { margin-top: 18px; }
.bami-checklist { margin: 10px 0 0; padding-left: 16px; opacity: .9; }
.bami-checklist li { margin: 8px 0; }
/* =========================
   BUTTON HOVER EFFECT
========================= */

.bami-btn {
  transition: 
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.3s ease,
    border-color 0.3s ease;
}

.bami-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  border-color: rgba(255,255,255,0.25);
}

/* Stronger hover for primary buttons */
.bami-btn-primary:hover {
  background: linear-gradient(90deg, rgba(34,197,94,.35), rgba(14,165,233,.35));
  box-shadow: 0 10px 30px rgba(14,165,233,0.4);
}

/* Secondary button hover */
.bami-btn-secondary:hover {
  background: linear-gradient(90deg, rgba(59,130,246,.35), rgba(236,72,153,.35));
  box-shadow: 0 10px 30px rgba(236,72,153,0.35);
}

/* WhatsApp button glow */
.bami-btn-wide:hover {
  box-shadow: 0 0 20px rgba(34,197,94,.5);
}
/* =========================
   BUTTON TEXT COLOR FIX
========================= */

.bami-btn {
  color: #e8f1ff; /* clean premium white */
  font-weight: 500;
  letter-spacing: .02em;
}

.bami-btn span {
  color: inherit;
}

/* Subtle neon accent on hover */
.bami-btn:hover {
  color: #ffffff;
}

/* Optional soft glow on text */
.bami-btn-primary:hover,
.bami-btn-secondary:hover {
  text-shadow: 0 0 8px rgba(180,220,255,.35);
}

/* Remove default link blue everywhere inside cards */
.bami-card a {
  color: inherit;
}
/* ======================================================
   BAMISOCKS CHATBOT – WORKING ANIMATION (NO display:none)
====================================================== */

/* Bubble */
#bamiChatFab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  cursor: pointer;
  font-weight: 700;
  color: #fff;
  transition: transform 160ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

#bamiChatFab:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.25);
}

/* Overlay (click outside to close) */
.bami-chat-overlay{
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,.18);
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.bami-chat-overlay[data-open="1"]{
  opacity: 1;
  visibility: visible;
}

/* Chat box base (CLOSED state) */
.bami-chat-box{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 340px;
  max-width: calc(100vw - 36px);
  height: 440px;
  z-index: 10000;

  background: rgba(10,14,22,.92);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 45px rgba(0,0,0,.45);

  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.98);
  filter: blur(6px);
  transform-origin: bottom right;

  transition:
    transform 220ms cubic-bezier(.22,1.2,.36,1),
    opacity 180ms ease,
    filter 220ms ease,
    visibility 180ms ease;
}

/* OPEN state */
.bami-chat-box[data-open="1"]{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Bounce on open */
.bami-chat-box.is-bounce{
  animation: bamiBounce 380ms cubic-bezier(.22,1.4,.36,1) 1;
}

@keyframes bamiBounce{
  0%   { transform: translateY(16px) scale(.96); }
  55%  { transform: translateY(-2px) scale(1.01); }
  100% { transform: translateY(0) scale(1); }
}

/* Header */
.bami-chat-head{
  display:flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  color: #fff;
}

#bamiChatClose{
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.85);
  cursor: pointer;
  font-size: 16px;
  transition: transform 120ms ease, opacity 120ms ease;
}

#bamiChatClose:hover{
  transform: scale(1.08);
  opacity: .95;
}

/* Log */
.bami-chat-log{
  padding: 12px;
  flex: 1;
  overflow: auto;
  display: grid;
  gap: 10px;
}

/* Bubbles */
.bami-msg{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  line-height: 1.35;
  color: #fff;
}

.bami-msg.user{
  margin-left: auto;
  max-width: 85%;
  background: rgba(14,165,233,.14);
}

.bami-msg.bot{
  margin-right: auto;
  max-width: 90%;
}

/* Form */
.bami-chat-form{
  display:flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
}

#bamiChatInput{
  flex:1;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
  outline: none;
}

.bami-chat-form button{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(34,197,94,.12);
  color: #fff;
  cursor: pointer;
}

/* Typing dots */
.bami-typing{ background: rgba(255,255,255,.06); }

.bami-dots{
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 2px 0;
}

.bami-dots i{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  display: inline-block;
  animation: bamiDot 900ms infinite ease-in-out;
}

.bami-dots i:nth-child(2){ animation-delay: 120ms; }
.bami-dots i:nth-child(3){ animation-delay: 240ms; }

@keyframes bamiDot{
  0%, 80%, 100% { transform: translateY(0); opacity: .55; }
  40% { transform: translateY(-6px); opacity: 1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #bamiChatFab, .bami-chat-overlay, .bami-chat-box, #bamiChatClose{
    transition: none !important;
  }
  .bami-dots i{ animation: none !important; }
  .bami-chat-box.is-bounce{ animation: none !important; }
}
/* Typing dots: make them more visible + cyan */
.bami-typing{
  background: rgba(34,211,238,.08) !important;
  border-color: rgba(34,211,238,.18) !important;
}

.bami-dots i{
  background: rgba(34,211,238,.95) !important;
  box-shadow: 0 0 10px rgba(34,211,238,.25) !important;
}
/* =========================
   FLAG LOCATIONS (IPRoyal-style)
========================= */
.flag-locations{
  padding: 28px 0;
}

.flag-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px;
}

.flag-title{
  text-align: left;
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 16px;
}

.flag-grid{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.flag-card{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 14px 12px;
  text-align: center;
  cursor: default;
  user-select: none;
}

.flag-img{
  width: 72px;        /* ✅ HARD LIMIT so it never becomes huge */
  height: auto;
  display: block;
  margin: 0 auto 10px;
}

.flag-name{
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 4px;
}

.flag-meta{
  font-size: 12px;
  opacity: 0.75;
}

/* Tablet */
@media (max-width: 980px){
  .flag-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Mobile */
@media (max-width: 520px){
  .flag-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flag-title{ font-size: 20px; }
}
/* ===============================
   ASK BAMI – CYAN NEON OVERRIDE
   (paste at very bottom of style.css)
================================ */

#bamiChatFab{
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;

  background: linear-gradient(135deg,#22f0ff,#00b7ff) !important;
  color: #00141f !important;

  border: none !important;
  border-radius: 999px !important;

  padding: 14px 20px !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: .3px !important;

  display: flex !important;
  align-items: center !important;
  gap: 8px !important;

  cursor: pointer !important;

  box-shadow:
    0 0 12px rgba(34,240,255,.65),
    0 0 28px rgba(34,240,255,.45),
    0 18px 45px rgba(0,0,0,.6) !important;

  backdrop-filter: blur(10px) !important;
  z-index: 99999 !important;

  transition: transform .25s ease, box-shadow .25s ease !important;
}

#bamiChatFab:hover{
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow:
    0 0 18px rgba(34,240,255,.9),
    0 0 40px rgba(34,240,255,.7),
    0 22px 55px rgba(0,0,0,.7) !important;
}

#bamiChatFab:active{
  transform: scale(.96) !important;
}

/* text inside */
#bamiChatFab .bami-fab-text{
  font-weight: 800 !important;
}

/* mobile polish */
@media(max-width:600px){
  #bamiChatFab{
    padding: 12px 16px !important;
    font-size: 13px !important;
  }
}
/* ==========================================
   BAMISOCKS CHATBOT – HARD OVERRIDES (FINAL)
   Paste at VERY BOTTOM of style.css
========================================== */

/* Chat box sizing */
#bamiChatBox.bami-chat-box{
  width: 360px !important;
  max-width: calc(100vw - 28px) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* Make log breathe */
#bamiChatLog.bami-chat-log{
  padding: 12px !important;
}

/* ✅ Quick buttons: premium pills */
#bamiChatLog .bami-quick{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 6px 0 12px !important;
}

#bamiChatLog .bami-q{
  appearance: none !important;
  border: 1px solid rgba(34,240,255,0.22) !important;
  background: rgba(34,240,255,0.08) !important;
  color: #eaffff !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.22) !important;
}

#bamiChatLog .bami-q:hover{
  transform: translateY(-1px) !important;
  background: rgba(34,240,255,0.14) !important;
  box-shadow: 0 0 14px rgba(34,240,255,0.35), 0 16px 30px rgba(0,0,0,0.34) !important;
}

#bamiChatLog .bami-q:active{
  transform: scale(.98) !important;
}

/* ✅ Messages look nicer */
#bamiChatLog .bami-msg{
  border-radius: 14px !important;
  padding: 10px 12px !important;
  font-size: 13.5px !important;
  line-height: 1.35 !important;
  margin: 8px 0 !important;
}

#bamiChatLog .bami-msg.bot{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: #f3fbff !important;
}

#bamiChatLog .bami-msg.user{
  margin-left: auto !important;
  background: rgba(34,240,255,0.12) !important;
  border: 1px solid rgba(34,240,255,0.18) !important;
  color: #eaffff !important;
}

/* ✅ FIX: form layout – prevents ANY overlap */
#bamiChatForm.bami-chat-form{
  display: grid !important;
  grid-template-columns: 1fr auto !important; /* input then button */
  gap: 10px !important;
  padding: 12px !important;
  border-top: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(10,14,22,0.55) !important;
}

/* Input */
#bamiChatInput{
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: rgba(255,255,255,0.06) !important;
  color: #ffffff !important;
  outline: none !important;
}

/* Submit button – fixed width, never overlaps */
#bamiChatForm button[type="submit"]{
  position: static !important;        /* kills absolute/fixed from old css */
  width: auto !important;
  min-width: 120px !important;
  height: 46px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(34,240,255,0.22) !important;
  background: linear-gradient(135deg,#22f0ff,#00b7ff) !important;
  color: #00141f !important;
  font-weight: 900 !important;
  cursor: pointer !important;

  box-shadow:
    0 0 12px rgba(34,240,255,.55),
    0 0 26px rgba(34,240,255,.35),
    0 18px 45px rgba(0,0,0,.55) !important;
}

#bamiChatForm button[type="submit"]:hover{
  transform: translateY(-1px) !important;
}

/* Mobile: reduce button width */
@media (max-width: 420px){
  #bamiChatBox.bami-chat-box{ width: 340px !important; }
  #bamiChatForm button[type="submit"]{ min-width: 96px !important; }
}
/* ==========================================
   BAMISOCKS CHATBOT – ULTIMATE NO-OVERLAP FIX
   Paste at VERY BOTTOM of style.css
========================================== */

/* 1) Force consistent z-index stacking */
#bamiChatFab{
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 90000 !important;
}

#bamiChatBox{
  position: fixed !important;
  right: 18px !important;
  bottom: 88px !important;      /* ✅ chat sits ABOVE the FAB */
  z-index: 95000 !important;    /* ✅ always above FAB */
}

#bamiChatOverlay{
  position: fixed !important;
  inset: 0 !important;
  z-index: 94000 !important;    /* overlay below box but above page */
}

/* 2) If your old CSS uses transforms, this prevents weird stacking */
#bamiChatBox,
#bamiChatFab,
#bamiChatOverlay{
  transform: none !important;
}

/* 3) Make sure the chat form area can never be covered */
#bamiChatBox .bami-chat-form,
#bamiChatForm{
  position: sticky !important;
  bottom: 0 !important;
  z-index: 3 !important;
  background: rgba(10,14,22,0.85) !important;
}

/* 4) Extra spacing inside the box so bottom area stays clear */
#bamiChatBox .bami-chat-log,
#bamiChatLog{
  padding-bottom: 18px !important;
}

/* 5) Form layout hard reset (kills absolute button overlap) */
#bamiChatForm{
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 10px !important;
  padding: 12px !important;
}

#bamiChatInput{
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  border-radius: 14px !important;
}

#bamiChatForm button[type="submit"]{
  position: static !important;     /* ✅ kills absolute/fixed */
  min-width: 120px !important;
  height: 46px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

/* Mobile safety */
@media (max-width: 520px){
  #bamiChatBox{
    right: 12px !important;
    bottom: 84px !important;
    width: calc(100vw - 24px) !important;
    max-width: 420px !important;
  }
  #bamiChatFab{
    right: 12px !important;
    bottom: 12px !important;
  }
}
/* Chatbot link buttons inside replies */
#bamiChatBox .bami-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

#bamiChatBox .bami-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border-radius:999px;
  text-decoration:none;
  font-weight:900;
  font-size:12.5px;

  border:1px solid rgba(34,240,255,0.22);
  background: rgba(34,240,255,0.10);
  color:#eaffff;
}

#bamiChatBox .bami-link:hover{
  background: rgba(34,240,255,0.16);
}

#bamiChatBox .bami-arrow{
  opacity:.9;
}
/* ===== Bami live avatar ===== */

.bami-head-wrap{
  display:flex;
  align-items:center;
  gap:12px;
}

.bami-avatar{
  position:relative;
  width:42px;
  height:42px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid rgba(34,240,255,.6);
  box-shadow:0 0 14px rgba(34,240,255,.5);
}

.bami-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Online dot */
.bami-online{
  position:absolute;
  bottom:2px;
  right:2px;
  width:10px;
  height:10px;
  background:#22ff88;
  border-radius:50%;
  border:2px solid #0b1e24;
  box-shadow:0 0 8px #22ff88;
}
/* ===== FORCE GREEN SEND BUTTON (CHAT) ===== */

#bamiChatBox .bami-chat-form button[type="submit"]{
  background: linear-gradient(135deg,#22ff88,#00c853) !important;
  color:#042015 !important;
  font-weight:900 !important;
  border:none !important;
  box-shadow:
    0 0 14px rgba(34,255,136,.6),
    0 0 28px rgba(34,255,136,.35) !important;
  transition:transform .15s ease, box-shadow .15s ease;
}

#bamiChatBox .bami-chat-form button[type="submit"]:hover{
  transform:translateY(-1px) scale(1.03);
  box-shadow:
    0 0 18px rgba(34,255,136,.9),
    0 0 36px rgba(34,255,136,.5) !important;
}

#bamiChatBox .bami-chat-form button[type="submit"]:active{
  transform:scale(.97);
}
/* ===== Bami Avatar Pop + Wave ===== */

@keyframes bamiAvatarPop {
  0%   { transform: translateY(0) scale(1); }
  20%  { transform: translateY(-6px) scale(1.08); }
  40%  { transform: translateY(0) scale(1); }
  60%  { transform: translateY(-3px) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes bamiAvatarWave {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(12deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(12deg); }
  80% { transform: rotate(-6deg); }
  100% { transform: rotate(0deg); }
}

.bami-avatar.pop-wave{
  animation: bamiAvatarPop 1s ease-out, bamiAvatarWave .9s ease-in-out;
  box-shadow: 0 0 20px rgba(34,240,255,.6);
}
/* ===== FAB Avatar style ===== */
#bamiChatFab{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}

#bamiChatFab .bami-fab-avatar{
  position:relative;
  width:30px;
  height:30px;
  border-radius:999px;
  overflow:hidden;
  border:2px solid rgba(34,240,255,.55);
  box-shadow:0 0 12px rgba(34,240,255,.35);
  flex:0 0 auto;
}

#bamiChatFab .bami-fab-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Online dot */
#bamiChatFab .bami-online{
  position:absolute;
  bottom:1px;
  right:1px;
  width:9px;
  height:9px;
  background:#22ff88;
  border-radius:50%;
  border:2px solid #051318;
  box-shadow:0 0 8px rgba(34,255,136,.8);
}

/* ===== Cartoon pop + wave animation ===== */
@keyframes bamiFabPop {
  0%   { transform: translateY(0) scale(1); }
  18%  { transform: translateY(-7px) scale(1.08); }
  35%  { transform: translateY(0) scale(1); }
  55%  { transform: translateY(-3px) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes bamiFabWave {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(14deg); }
  40% { transform: rotate(-12deg); }
  60% { transform: rotate(14deg); }
  80% { transform: rotate(-8deg); }
  100% { transform: rotate(0deg); }
}

#bamiChatFab .bami-fab-avatar.pop-wave{
  animation: bamiFabPop 1s ease-out, bamiFabWave .9s ease-in-out;
  box-shadow:0 0 18px rgba(34,240,255,.6), 0 0 32px rgba(34,240,255,.25);
}
/* 🔥 Gradient Ask Bami Button – premium style */

#bamiChatFab,
.bami-chat-form button {
  background: linear-gradient(135deg,
    #7c3aed,
    #22d3ee,
    #06b6d4
  ) !important;

  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;

  box-shadow:
    0 0 12px rgba(34,211,238,.55),
    0 0 28px rgba(124,58,237,.35);

  transition: transform .18s ease, box-shadow .18s ease;
}

/* Hover premium lift */
#bamiChatFab:hover,
.bami-chat-form button:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 0 18px rgba(34,211,238,.8),
    0 0 40px rgba(124,58,237,.5);
}

/* Click feedback */
#bamiChatFab:active,
.bami-chat-form button:active {
  transform: scale(.96);
}
#bamiChatFab {
  font-weight: 600;
  letter-spacing: .2px;
  text-shadow:
    0 1px 2px rgba(0,0,0,.45),
    0 0 6px rgba(0,0,0,.35);
}
#bamiChatFab {
  background: linear-gradient(135deg,#06b6d4,#3b82f6);
}
.bami-seo-intro {
  max-width: 900px;
  margin: 0 auto 24px;
  font-size: 0.95rem;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 12px 20px;
  color: #dbeafe;
}
.bami-seo-intro {
  max-width: 900px;
  margin: 0 auto 28px;
  padding: 12px 22px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #e5f6ff;

  background: linear-gradient(
    120deg,
    rgba(34,211,238,0.12),
    rgba(59,130,246,0.10),
    rgba(34,211,238,0.12)
  );

  backdrop-filter: blur(10px);
  border-radius: 999px;
  border: 1px solid rgba(34,211,238,0.25);

  box-shadow:
    0 0 12px rgba(34,211,238,0.18),
    inset 0 0 10px rgba(34,211,238,0.08);

  animation: bamiGlow 4s ease-in-out infinite;
}

/* ✨ subtle premium pulse */
@keyframes bamiGlow {
  0% {
    box-shadow:
      0 0 10px rgba(34,211,238,0.15),
      inset 0 0 8px rgba(34,211,238,0.06);
  }
  50% {
    box-shadow:
      0 0 18px rgba(34,211,238,0.35),
      inset 0 0 14px rgba(34,211,238,0.12);
  }
  100% {
    box-shadow:
      0 0 10px rgba(34,211,238,0.15),
      inset 0 0 8px rgba(34,211,238,0.06);
  }
}
html{
  scroll-behavior: smooth;
}
/* =========================================
   TRUST STRIP — MOBILE COMPACT FIX
   (targets your exact classes)
   ========================================= */

@media (max-width: 600px){

  /* overall spacing */
  .trust-strip{
    padding: 14px 0 !important;
  }

  .trust-wrap{
    padding: 0 12px !important;
  }

  /* STATS: 2 columns */
  .trust-stats{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
  }

  .trust-card{
    padding: 14px 12px !important;
    border-radius: 16px !important;
    min-height: auto !important;
  }

  .trust-number{
    font-size: 22px !important;
    line-height: 1.05 !important;
    margin-bottom: 6px !important;
  }

  .trust-label{
    font-size: 12px !important;
    line-height: 1.2 !important;
    opacity: .9 !important;
  }

  /* BADGES: 2 columns */
  .trust-badges{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .trust-badge{
    padding: 10px 10px !important;
    border-radius: 14px !important;
    min-height: auto !important;

    /* compact row layout */
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .trust-ico{
    width: 30px !important;
    height: 30px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    flex: 0 0 30px !important;
    font-size: 14px !important;
  }

  .trust-text{
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
}

/* Optional: make it even tighter on very small screens */
@media (max-width: 360px){
  .trust-stats{ gap: 8px !important; }
  .trust-badges{ gap: 8px !important; }
  .trust-card{ padding: 12px 10px !important; }
  .trust-badge{ padding: 9px 9px !important; }
}
/* =========================================
   TRUST STRIP — SHORTER + DIVIDER (MOBILE)
   Uses your exact classes:
   .trust-stats .trust-card .trust-badges .trust-badge
   ========================================= */

@media (max-width: 600px){

  /* overall tighter spacing */
  .trust-strip{ padding: 12px 0 !important; }
  .trust-wrap{ padding: 0 12px !important; }

  /* ---------- STATS: smaller cards ---------- */
  .trust-stats{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  .trust-card{
    padding: 12px 10px !important;
    border-radius: 16px !important;
    min-height: auto !important;
  }

  .trust-number{
    font-size: 20px !important;
    line-height: 1.05 !important;
    margin-bottom: 4px !important;
    letter-spacing: -0.02em !important;
  }

  .trust-label{
    font-size: 11.5px !important;
    line-height: 1.15 !important;
    opacity: .92 !important;
  }

  /* ---------- DEMARCATION between stats + badges ---------- */
  .trust-stats{
    position: relative !important;
    padding-bottom: 14px !important;
  }

  .trust-stats::after{
    content: "Why clients trust us" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: -10px !important;
    transform: translateX(-50%) !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;

    padding: 6px 10px !important;
    border-radius: 999px !important;

    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    color: rgba(255,255,255,.78) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  .trust-badges{
    position: relative !important;
    margin-top: 16px !important; /* space after label */
    padding-top: 14px !important;
  }

  .trust-badges::before{
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: 1px !important;
    background: linear-gradient(
      90deg,
      rgba(255,255,255,0),
      rgba(255,255,255,.16),
      rgba(255,255,255,0)
    ) !important;
  }

  /* ---------- BENEFITS: compact row pills (SHORTER) ---------- */
  .trust-badges{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px !important;
  }

  .trust-badge{
    padding: 10px 10px !important;
    border-radius: 16px !important;
    min-height: auto !important;

    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .trust-ico{
    width: 30px !important;
    height: 30px !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 30px !important;

    border-radius: 12px !important;
    font-size: 14px !important;

    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
  }

  .trust-text{
    font-size: 12px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    opacity: .92 !important;
  }

  /* Make last badge full width (looks premium) */
  .trust-badges .trust-badge:last-child{
    grid-column: 1 / -1 !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* extra small devices */
@media (max-width: 360px){
  .trust-label{ font-size: 11px !important; }
  .trust-text{ font-size: 11.5px !important; }
}