@import url('https://fonts.googleapis.com/css2?family=Saira+Stencil:ital,wght@0,100..900;1,100..900&display=swap');
:root {
    --bg: #05030f;
    --bg2: #0d0820;
    --bg3: #120e2a;
    --card: #15113000;
    --purple: #7c3aed;
    --purple2: #9d5cf6;
    --purple3: #c084fc;
    --neon: #a855f7;
    --neon2: #38bdf8;
    --neon3: #f0abfc;
    --text: #f0e9ff;
    --muted: #9585b8;
    --border: rgba(168,85,247,0.18);
    --border2: rgba(168,85,247,0.32);
    --glow: rgba(168,85,247,0.35);
    --glow2: rgba(56,189,248,0.25);
    --cyan: #22d3ee;
  }
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;font-size:16px}
  body{background:var(--bg);color:var(--text);font-family: "Saira Stencil", sans-serif !important;line-height:1.6;overflow-x:hidden}
  a{text-decoration:none;color:inherit}
  img{max-width:100%;display:block}
  
  /* NAV */
  nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:0.9rem 2rem;display:flex;align-items:center;justify-content:space-between;background:rgba(5,3,15,0.85);backdrop-filter:blur(18px);border-bottom:1px solid var(--border);transition:all 0.3s}
  nav.scrolled{background:rgba(5,3,15,0.97);box-shadow:0 2px 40px rgba(124,58,237,0.15)}
  .logo{font-size:1.5rem;font-weight:800;background:linear-gradient(135deg,#a855f7,#38bdf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-0.5px}
  .logo span{font-weight:400}
  .logo img{width: 60px;
    border-radius: 11px;}
    .footer-logo img{width:80px;
    border-radius: 11px;}
  .nav-links{display:flex;gap:2rem;list-style:none}
  .nav-links a{font-size:16px;color:var(--muted);transition:color 0.2s;font-weight:500}
  .nav-links a:hover{color:var(--purple3)}
  .nav-cta{background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;padding:0.5rem 1.25rem;border-radius:50px;font-size:0.875rem;font-weight:600;border:none;cursor:pointer;transition:all 0.25s;box-shadow:0 0 20px rgba(124,58,237,0.4)}
  .nav-cta:hover{transform:translateY(-1px);box-shadow:0 0 30px rgba(168,85,247,0.6)}
  .hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px}
  .hamburger span{width:22px;height:2px;background:var(--text);border-radius:2px;transition:all 0.3s}
  .mobile-menu{display:none;position:fixed;top:62px;left:0;right:0;background:rgba(5,3,15,0.98);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:1.5rem 2rem;z-index:999;flex-direction:column;gap:1.25rem}
  .mobile-menu a{font-size:1rem;color:var(--muted);font-weight:500}
  .mobile-menu.open{display:flex}
  
  /* HERO */
  .hero{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:7rem 2rem 4rem}
  .hero-bg{position:absolute;inset:0;z-index:0}
  .hero-bg::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 30%,rgba(124,58,237,0.18) 0%,transparent 70%)}
  .hero-bg::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%237c3aed' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
  .floating-cards{position:absolute;inset:0;z-index:0;pointer-events:none}
  .fc{position:absolute;border-radius:12px;border:1px solid rgba(168,85,247,0.2);background:rgba(124,58,237,0.06);font-size:2.5rem;display:flex;align-items:center;justify-content:center;animation:float linear infinite}
  .fc:nth-child(1){width:60px;height:80px;top:15%;left:8%;animation-duration:9s;animation-delay:0s}
  .fc:nth-child(2){width:50px;height:68px;top:65%;left:5%;animation-duration:11s;animation-delay:-3s}
  .fc:nth-child(3){width:55px;height:75px;top:20%;right:10%;animation-duration:10s;animation-delay:-1.5s}
  .fc:nth-child(4){width:50px;height:68px;top:70%;right:8%;animation-duration:8s;animation-delay:-5s}
  .fc:nth-child(5){width:45px;height:62px;top:45%;left:3%;animation-duration:12s;animation-delay:-2s}
  @keyframes float{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-20px) rotate(5deg)}}
  .hero-content{position:relative;z-index:1;text-align:center;max-width:800px}
  .hero-badge{display:inline-flex;align-items:center;gap:0.5rem;background:rgba(168,85,247,0.12);border:1px solid rgba(168,85,247,0.3);border-radius:50px;padding:0.4rem 1.1rem;font-size:0.8rem;font-weight:600;color:var(--purple3);margin-bottom:1.5rem;letter-spacing:0.05em;text-transform:uppercase}
  .hero-badge::before{content:'♠';font-size:1rem}
  .hero h1{font-size:clamp(2.8rem,7vw,4.5rem);font-weight:900;line-height:1.05;letter-spacing:-2px;margin-bottom:0.5rem}
  .hero h1 .line1{display:block;background:linear-gradient(135deg,#fff 20%,#c084fc 60%,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
  .hero h1 .line2{display:block;background:linear-gradient(135deg,#38bdf8,#818cf8,#f0abfc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:0.9em}
  .hero-sub{font-size:clamp(1rem,2.5vw,1.2rem);color:var(--muted);max-width:500px;margin:1.2rem auto 2rem;line-height:1.7}
  
  /* Container Layout */
.hero-highlights {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.hl-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  font-family: "Saira Stencil", sans-serif !important;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* Icon Styling - Neon Glow Effect */
.hl-icon {
  width: 35px;
  height: 35px;
  background: rgba(0, 255, 204, 0.1);
  border: 1px solid rgba(0, 255, 204, 0.3);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00ffcc;
  font-size: 1rem;
  box-shadow: 0 0 15px rgba(0, 255, 204, 0.1);
  transition: 0.3s ease;
}

.hl-item:hover .hl-icon {
  background: #00ffcc;
  color: #000;
  box-shadow: 0 0 20px #00ffcc;
  transform: translateY(-3px);
}

/* Button Container */
.hero-btns {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Primary Button - Futuristic Gradient */
.btn-primary {
  position: relative;
  text-decoration: none;
  padding: 16px 32px;
  background: linear-gradient(135deg, #00ffcc 0%, #0099ff 100%);
  color: #000;
  font-family: "Saira Stencil", sans-serif !important;
  font-weight: 800;
  text-transform: uppercase;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: none;
}

.btn-primary:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(0, 255, 204, 0.5);
}

/* Secondary Button - Glassmorphism */
.btn-secondary {
  text-decoration: none;
  padding: 16px 32px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-family: "Saira Stencil", sans-serif !important;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  transition: 0.3s ease;
  backdrop-filter: blur(10px);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
  letter-spacing: 1px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .hero-highlights {
    gap: 15px;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 29%;
  }
  
  .hero-btns {
    flex-direction: column;
    width: 100%;
    padding: 0 20px;
  }
  
  .btn-primary, .btn-secondary {
    width: 100%;
    justify-content: center;
  }
}
  .hero-highlights{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;margin-bottom:2.5rem}
  .hl-item{display:flex;align-items:center;gap:0.45rem;font-size:0.875rem;font-weight:600;color:var(--purple3)}
  .hl-icon{width:28px;height:28px;border-radius:50%;background:rgba(168,85,247,0.15);display:flex;align-items:center;justify-content:center;font-size:0.85rem}
  .hero-btns{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem}
  .btn-primary{display:inline-flex;align-items:center;gap:0.5rem;background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;padding:0.85rem 2rem;border-radius:50px;font-weight:700;font-size:1rem;border:none;cursor:pointer;transition:all 0.3s;box-shadow:0 0 30px rgba(124,58,237,0.5),0 0 0 1px rgba(168,85,247,0.3);position:relative;overflow:hidden}
  .btn-primary::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.15),transparent);opacity:0;transition:opacity 0.3s}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 50px rgba(168,85,247,0.7),0 0 0 1px rgba(168,85,247,0.5)}
  .btn-primary:hover::before{opacity:1}
  .btn-secondary{display:inline-flex;align-items:center;gap:0.5rem;background:transparent;color:var(--text);padding:0.85rem 2rem;border-radius:50px;font-weight:600;font-size:1rem;border:1px solid var(--border2);cursor:pointer;transition:all 0.3s}
  .btn-secondary:hover{background:rgba(168,85,247,0.1);border-color:var(--neon);transform:translateY(-2px)}
  .reveal-box {
  position: relative;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The sleek "Traveling Line" */
.line-shutter {
  position: absolute;
  left: 0;
  width: 4px;
  height: 100%;
  background: #00ffcc;
  box-shadow: 0 0 15px #00ffcc;
  z-index: 10;
  animation: moveLine 6s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

.sleek-text {
  position: relative;
  margin: 0;
  text-transform: uppercase;
  overflow: hidden;
}

.line1, .line2 {
  display: block;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  animation: revealText 6s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

.line1 {
  font-size: clamp(1.8rem, 5vw, 4.8rem);
  color: #ffffff;
  font-weight: 900;
  letter-spacing: 3px;
}

.line2 {
  font-size: clamp(0.9rem, 3vw, 1.4rem);
  color: #00ffcc;
  font-weight: 400;
  letter-spacing: 8px;
  margin-top: 5px;
  opacity: 0.8;
}

/* The Keyframes */
@keyframes moveLine {
  0% { left: 0; height: 0; opacity: 0; }
  5% { left: 0; height: 100%; opacity: 1; }
  40%, 60% { left: 100%; height: 100%; opacity: 1; }
  95% { left: 100%; height: 100%; opacity: 1; }
  100% { left: 100%; height: 0; opacity: 0; }
}

@keyframes revealText {
  0%, 10% { width: 0; }
  40%, 90% { width: 100%; }
  100% { width: 100%; }
}

/* Mobile Fit */
@media (max-width: 600px) {
  .line2 {
    letter-spacing: 3px;
    font-size:20px !important; /* Reduce spacing so it fits mobile */
  }
  .reveal-box{padding:70px 20px 0;}
  .hero-sub{padding:0 40px;}
}
  /* TIMELINE ANIMATION */
  .timeline-anim {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px; /* Slightly taller for better visual impact */
  overflow: hidden;
  opacity: 0.6;
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.tl-track {
  display: flex;
  gap: 6px;
  padding: 30px 0;
  animation: scroll-tl 25s linear infinite; /* Slower, smoother drift */
  width: max-content;
  align-items: flex-end; /* Aligns bars to bottom like a waveform */
}

.tl-seg {
  height: 30px;
  border-radius: 2px;
  background: linear-gradient(180deg, #00ffcc 0%, rgba(124, 58, 237, 0.4) 100%);
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(0, 255, 204, 0.2);
  /* Adds a slight metallic tilt */
  transform: skewX(-15deg);
}

/* Subtle pulse animation for segments */
.tl-seg:nth-child(even) {
  animation: pulse-seg 3s ease-in-out infinite alternate;
}

.tl-seg:hover {
  background: #ffffff;
  box-shadow: 0 0 20px #00ffcc;
  height: 45px !important; /* Visual feedback on hover */
  opacity: 1 !important;
}

/* Advanced Scrolling */
@keyframes scroll-tl {
  from { transform: translateX(0); }
  to { transform: translateX(-33.33%); } /* Matches the 3x multiplier in your JS */
}

/* Pulse keyframes for a "live" feel */
@keyframes pulse-seg {
  from { filter: brightness(1); height: var(--original-height); }
  to { filter: brightness(1.5); box-shadow: 0 0 15px rgba(0, 255, 204, 0.4); }
}

/* Mobile Fit */
@media (max-width: 600px) {
  .timeline-anim {
    height: 60px;
    opacity: 0.3;
  }
  .tl-seg {
    transform: skewX(0deg); /* Flatten for mobile clarity */
    gap: 3px;
  }
}
  
  /* SECTIONS COMMON */
  section{padding:5rem 2rem}
  .container{max-width:1240px;margin:0 auto}
  .section-tag{display:inline-block;background:rgba(168,85,247,0.12);border:1px solid rgba(168,85,247,0.25);border-radius:50px;padding:0.3rem 1rem;font-size:0.75rem;font-weight:700;color:var(--purple3);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:1rem}
  .section-title{font-size:clamp(2rem,4vw,3rem);font-weight:900;letter-spacing:-1px;margin-bottom:0.75rem;background:linear-gradient(135deg,#fff,#c084fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
  .section-sub{color:var(--muted);font-size:1.05rem;max-width:550px}
  .section-header{margin-bottom:3.5rem}
  .section-header.center{text-align:center}
  .section-header.center .section-sub{margin:0 auto}
  
  /* WHAT WE EDIT */
  .edit-types{background:var(--bg2)}
  .edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(274px, 1fr));
    gap: 18px;
    padding: 15px 0px;
  max-width: 1300px;
  margin: 0 auto;
}

.edit-card {
  background: rgba(21, 17, 48, 0.4); /* Based on your --bg3 with transparency */
  border: 1px solid rgba(168, 85, 247, 0.18); /* --border */
  border-radius: 20px;
  padding: 35px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  /* Initial shuffle-in state */
  opacity: 0;
  transform: translateY(50px) rotateX(15deg);
  animation: cardShuffleIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Card Shuffle Entrance */
@keyframes cardShuffleIn {
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0);
  }
}

/* Eye-Catching Light Beam Sweep */
.edit-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(168, 85, 247, 0.1), /* --neon */
    transparent
  );
  transition: 0.5s;
  pointer-events: none;
}

.edit-card:hover::before {
  left: 100%;
  transition: 0.8s ease-in-out;
}

.edit-card:hover {
  transform: translateY(-12px) scale(1.02);
  border-color: rgba(168, 85, 247, 0.5); /* Intensified --border2 */
  background: rgba(21, 17, 48, 0.7);
  box-shadow: 
    0 20px 40px rgba(5, 3, 15, 0.6), 
    0 0 25px rgba(168, 85, 247, 0.2); /* --glow */
}

/* Icon Box - Poker Chip Style */
.icon-box {
  width: 60px;
  height: 60px;
  background: #0d0820; /* --bg2 */
  border: 2px solid #7c3aed; /* --purple */
  border-radius: 50%; /* Round like a poker chip */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  color: #38bdf8; /* --neon2 (Cyan highlight) */
  font-size: 1.5rem;
  box-shadow: 0 0 15px rgba(124, 58, 237, 0.3);
  transition: 0.4s ease;
}

.edit-card:hover .icon-box {
  transform: rotateY(360deg); /* Modern flip effect */
  border-color: #38bdf8;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
}

/* Typography Fit */
.edit-card h3 {
  color: #f0e9ff; /* --text */
  font-family: "Saira Stencil", sans-serif !important;
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0 0 12px 0;
  letter-spacing: -0.5px;
}

.edit-card p {
  color: #9585b8; /* --muted */
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 30px;
}

/* Pricing Tag - Modern Glow Button */
.card-footer {
  margin-top: auto;
}

.edit-tag {
  display: inline-block;
  padding: 8px 18px;
  background: linear-gradient(135deg, #7c3aed 0%, #38bdf8 100%);
  color: #f0e9ff;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
  border: none;
}

/* Staggered Delay for Cards */
.reveal-delay-1 { animation-delay: 0.1s; }
.reveal-delay-2 { animation-delay: 0.2s; }
.reveal-delay-3 { animation-delay: 0.3s; }
.reveal-delay-4 { animation-delay: 0.4s; }

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
  .edit-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .edit-card {
    padding: 25px;
    transform: rotateX(0); /* Remove tilt on mobile for better readability */
  }
}
  
  /* PRICING */
  .pricing-section {
  position: relative;
  padding: 100px 0;
  background: #05030f;
  overflow: hidden; /* Important to clip the floating SVGs */
}

.poker-floaters {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.poker-svg {
  position: absolute;
  bottom: -100px;
  /* Increased size for better visibility */
  width: 60px; 
  height: 60px;
  /* Using your palette --neon (#a855f7) and --cyan (#22d3ee) */
  color: rgba(168, 85, 247, 0.4); 
  /* Critical: Add a neon glow to the SVG itself */
  filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.6));
  animation: floatUpVisible 15s linear infinite;
  opacity: 0;
}

/* Varied colors for different suits to make it "Eye Catching" */
.p-spade, .p-club { color: rgba(34, 211, 238, 0.4); filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.6)); }
.p-heart, .p-diam { color: rgba(168, 85, 247, 0.4); filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.6)); }

/* Wider horizontal spread */
.s1 { left: 8%;  animation-duration: 18s; animation-delay: 0s; }
.s2 { left: 22%; animation-duration: 14s; animation-delay: -3s; }
.s3 { left: 40%; animation-duration: 20s; animation-delay: -7s; }
.s4 { left: 55%; animation-duration: 16s; animation-delay: -11s; }
.s5 { left: 75%; animation-duration: 22s; animation-delay: -5s; }
.s6 { left: 90%; animation-duration: 19s; animation-delay: -15s; }

@keyframes floatUpVisible {
  0% {
    transform: translateY(0) rotate(0deg) scale(0.5);
    opacity: 0;
  }
  15% {
    /* Quickly fade in and grow */
    opacity: 0.8;
    transform: translateY(-15vh) rotate(45deg) scale(1);
  }
  50% {
    /* Mid-way sway and pulse */
    opacity: 0.5;
    transform: translateY(-50vh) rotate(180deg) translateX(50px) scale(1.2);
  }
  85% {
    opacity: 0.8;
  }
  100% {
    /* Fade out as it exits the top */
    transform: translateY(-120vh) rotate(360deg) translateX(-30px) scale(0.8);
    opacity: 0;
  }
}

/* Ensure the background section has enough contrast to see the glow */
.pricing-section {
  background: #05030f; /* Your --bg color */
  position: relative;
  overflow: hidden;
}

/* Fix for modern sleek look */
.pricing-container {
  position: relative;
  z-index: 5; /* Keeps content above the floating icons */
}
  .pricing-tabs{display:flex;justify-content:center;gap:0.75rem;flex-wrap:wrap;margin-bottom:3rem}
  .ptab{padding:0.5rem 1.25rem;border-radius:50px;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:0.875rem;font-weight:600;cursor:pointer;transition:all 0.25s}
  .ptab.active{background:rgba(124,58,237,0.25);border-color:var(--purple2);color:var(--purple3)}
  .pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(257px,1fr));gap:1.5rem;padding:0 30px;}
  .price-card{background:rgba(21,17,48,0.6);border:1px solid var(--border);border-radius:20px;padding:4rem 2rem 01.5rem;position:relative;overflow:visible;z-index:1;transition:all 0.35s}
  .price-card.featured{border-color:var(--purple2);background:rgba(124,58,237,0.08);box-shadow:0 0 60px rgba(124,58,237,0.15)}
  .price-card:hover{transform:translateY(-4px)}
  .price-badge{position:absolute;top:9px;right:7px;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;font-size:0.7rem;font-weight:700;padding:0.3rem 0.75rem;border-radius:50px;text-transform:uppercase;letter-spacing:0.05em}
  .price-label{font-size:0.8rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.75rem}
  .price-amount{font-size:3rem;font-weight:900;letter-spacing:-2px;color:#fff;margin-bottom:0.25rem}
  .price-amount sup{font-size:1.2rem;font-weight:600;vertical-align:super;letter-spacing:0}
  .price-note{font-size:0.8rem;color:var(--muted);margin-bottom:1.5rem}
  .price-features{list-style:none;margin-bottom:2rem;display:flex;flex-direction:column;gap:0.6rem}
  .price-features li{display:flex;align-items:center;gap:0.6rem;font-size:0.9rem;color:var(--muted)}
  .price-features li::before{content:'✓';color:var(--neon);font-weight:700;font-size:0.9rem;flex-shrink:0}
  .price-features li.highlight{color:var(--purple3);font-weight:600}
  .btn-outline{display:block;width:100%;text-align:center;padding:0.75rem;border-radius:50px;border:1px solid var(--border2);color:var(--purple3);font-weight:600;font-size:0.9rem;cursor:pointer;transition:all 0.25s;background:transparent}
  .btn-outline:hover{background:rgba(168,85,247,0.15);border-color:var(--neon)}
  .btn-solid{display:block;width:100%;text-align:center;padding:0.75rem;border-radius:50px;background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;font-weight:700;font-size:0.9rem;cursor:pointer;transition:all 0.25s;border:none;box-shadow:0 0 25px rgba(124,58,237,0.4)}
  .btn-solid:hover{box-shadow:0 0 40px rgba(168,85,247,0.6);transform:translateY(-1px)}
  
  /* WHY CHOOSE US */
  .why-section{background:var(--bg2)}
  .why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  padding: 40px 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.why-card {
  background: rgba(18, 14, 42, 0.4); /* --bg3 with transparency */
  border: 1px solid rgba(168, 85, 247, 0.18); /* --border */
  border-radius: 24px;
  padding: 40px 30px;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

/* Hover Effect: Glow and Lift */
.why-card:hover {
  transform: translateY(-10px);
  border-color: #a855f7; /* --neon */
  background: rgba(21, 17, 48, 0.8);
  box-shadow: 0 20px 40px rgba(5, 3, 15, 0.8), 
              0 0 20px rgba(168, 85, 247, 0.2);
}

/* Icon Container - Modern Hexagon/Shield Shape */
.why-icon-container {
  width: 70px;
  height: 70px;
  margin: 0 auto 25px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(124, 58, 237, 0.1); /* --purple with opacity */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: transform 0.5s ease;
}

.why-icon {
  font-size: 1.8rem;
  color: #22d3ee; /* --cyan */
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.5));
}

.why-card:hover .why-icon-container {
  transform: rotateY(180deg);
  background: #a855f7;
}

.why-card:hover .why-icon {
  color: #ffffff;
  transform: rotateY(180deg); /* Counter-rotate to stay upright */
}

/* Typography */
.why-card h3 {
  color: #f0e9ff; /* --text */
  font-family: "Saira Stencil", sans-serif !important;
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 15px;
  letter-spacing: -0.5px;
}

.why-card p {
  color: #9585b8; /* --muted */
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Animation: Staggered Fade-In-Up */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  animation: revealUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes revealUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal-delay-1 { animation-delay: 0.1s; }
.reveal-delay-2 { animation-delay: 0.2s; }
.reveal-delay-3 { animation-delay: 0.3s; }
.reveal-delay-4 { animation-delay: 0.4s; }

/* Mobile Optimization */
@media (max-width: 600px) {
  .why-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .why-card {
    padding: 30px 20px;
  }
}
  
  /* FACTS */
  .facts-section{background:var(--bg);position:relative;overflow:hidden}
  .facts-section::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:400px;background:radial-gradient(ellipse,rgba(124,58,237,0.12),transparent 70%);pointer-events:none}
  .facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  padding: 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.fact-card {
  background: rgba(18, 14, 42, 0.5); /* --bg3 with transparency */
  border: 1px solid rgba(168, 85, 247, 0.2); /* --border */
  border-radius: 20px;
  padding: 40px 25px;
  text-align: center;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  transition: all 0.4s ease;
}

.fact-card:hover {
  transform: translateY(-8px);
  border-color: #22d3ee; /* --cyan hover accent */
  background: rgba(21, 17, 48, 0.8);
  box-shadow: 0 15px 35px rgba(5, 3, 15, 0.8);
}

/* Glowing Icon Styling */
.fact-icon {
  font-size: 2rem;
  color: #a855f7; /* --neon */
  margin-bottom: 20px;
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.5));
  transition: 0.3s ease;
}

.fact-card:hover .fact-icon {
  color: #22d3ee;
  filter: drop-shadow(0 0 12px rgba(34, 211, 238, 0.6));
  transform: scale(1.1);
}

/* Big Statistics Styling */
.fact-number {
  font-size: 3.5rem;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 10px;
  font-family: "Saira Stencil", sans-serif !important;
  letter-spacing: -2px;
  line-height: 1;
}

.fact-number .unit {
  font-size: 1.2rem;
  color: #38bdf8; /* --neon2 */
  margin-left: 5px;
}

/* Label Styling */
.fact-label {
  color: #9585b8; /* --muted */
  font-size: 0.9rem;
  line-height: 1.5;
  font-weight: 500;
}

.fact-highlight {
  color: #f0e9ff; /* --text */
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 1px;
}

/* Animation Hooks */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  animation: factFadeUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes factFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal-delay-1 { animation-delay: 0.1s; }
.reveal-delay-2 { animation-delay: 0.2s; }
.reveal-delay-3 { animation-delay: 0.3s; }

/* Mobile Fit */
@media (max-width: 768px) {
  .facts-grid {
    grid-template-columns: 1fr 1fr; /* 2x2 grid on tablets/mobile */
  }
  .fact-number {
    font-size: 2.5rem;
  }
}

@media (max-width: 480px) {
  .facts-grid {
    grid-template-columns: 1fr; /* Stack on small phones */
  }
}
  
  /* REVIEWS */
  .reviews-section{background:var(--bg2)}
  .reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
  .review-card{background:rgba(21,17,48,0.8);border:1px solid var(--border);border-radius:16px;padding:1.75rem;transition:all 0.35s}
  .review-card:hover{border-color:var(--border2);transform:translateY(-3px)}
  .review-stars{color:#f59e0b;font-size:1rem;margin-bottom:1rem;letter-spacing:2px}
  .review-text{font-size:0.9rem;color:var(--muted);line-height:1.7;margin-bottom:1.25rem;font-style:italic}
  .reviewer{display:flex;align-items:center;gap:0.75rem}
  .avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#a855f7);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;color:#fff;flex-shrink:0}
  .reviewer-name{font-weight:700;font-size:0.9rem;color:#fff}
  .reviewer-role{font-size:0.78rem;color:var(--muted)}
  
  
  /* --- TESTIMONIAL SECTION BASE --- */
.testimonial-nexus {
  position: relative;
  background: #05030f;
  padding: 140px 0; /* Increased vertical spacing */
  overflow: hidden;
}

.nt-relative {
  position: relative;
  z-index: 10;
  max-width: 1200px;
  margin: 0 auto;
}

/* --- CENTER CIRCLE BLUR ANIMATION --- */
.tn-power-core {
  position: absolute;
  top: 55%; 
  left: 50%;
  width: 400px;
  height: 400px;
  background: #a855f7;
  filter: blur(100px);
  border-radius: 50%;
  opacity: 0.2;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: corePulse 6s infinite alternate ease-in-out;
  z-index: 1;
}

@keyframes corePulse {
  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.15; filter: blur(100px); }
  100% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.3; filter: blur(130px); background: #22d3ee; }
}

/* --- HEADER SPACING --- */
.tn-header {
  text-align: center;
  margin-bottom: 80px; /* Better spacing between title and cards */
}

/* --- SLIDER CARDS --- */
.tn-slider {
  padding: 20px 0 80px 0 !important; /* Spacing for bottom pagination */
}

.tn-card {
  background: #0a081a; /* Solid Modern Background */
  border: 1px solid rgba(168, 85, 247, 0.4);
  padding: 50px 40px; /* Generous internal padding */
  border-radius: 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.tn-card:hover {
  border-color: #22d3ee;
  transform: translateY(-10px);
}

.tn-stars {
  color: #ffb800;
  font-size: 0.8rem;
  margin-bottom: 25px;
  letter-spacing: 2px;
}

.tn-quote {
  font-size: 15px;
  line-height: 24px;
  color: #e2e8f0;
  margin-bottom: 40px;
  flex-grow: 1;
}

/* --- ROUND AVATAR SYSTEM --- */
.tn-user {
  display: flex;
  align-items: center;
  gap: 20px;
  border-top: 1px solid rgba(168, 85, 247, 0.2);
  padding-top: 30px;
}

.tn-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #a855f7;
  padding: 3px;
  background: #05030f;
}

.tn-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.tn-name {
  display: block;
  font-weight: 800;
  color: #fff;
  font-size: 1.1rem;
}

.tn-role {
  font-size: 0.75rem;
  color: #22d3ee;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
}

/* --- PAGINATION DOTS --- */
.swiper-pagination { bottom: 0 !important; }
.swiper-pagination-bullet { background: #a855f7 !important; width: 10px; height: 10px; }
.swiper-pagination-bullet-active { background: #22d3ee !important; width: 30px !important; border-radius: 5px !important; }
/* Ensure the swiper container has a fixed height/behavior */
.tn-slider {
  width: 100%;
  height: auto;
  /* Prevent overflow issues during transitions */
  display: block; 
  overflow: visible !important; 
}

.swiper-wrapper {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ensure slides don't shrink */
.swiper-slide {
  height: auto;
  display: flex;
  justify-content: center;
}
/* --- MOBILE RESPONSIVE --- */
@media (max-width: 992px) {
  .testimonial-nexus { padding: 80px 0; }
  .tn-card { padding: 35px 25px; }
  .tn-header { margin-bottom: 50px; }
}

@media (max-width: 600px) {
  .tn-power-core { width: 250px; height: 250px; }
  .tn-quote { font-size: 1rem; }
  .tn-user { gap: 15px; }
  .tn-avatar { width: 50px; height: 50px; }
}
  
  /* FREE TRIAL CTA */
  .trial-section {
  background: #05030f; /* Base background */
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(56, 189, 248, 0.08));
  border-top: 1px solid rgba(168, 85, 247, 0.18); /* --border */
  border-bottom: 1px solid rgba(168, 85, 247, 0.18);
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 80px 20px;
}

/* Eye-catching Radial Glow */
.trial-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(124, 58, 237, 0.25), transparent);
  pointer-events: none;
  z-index: 1;
}

/* Money & Poker Animation Container */
.trial-bg-elements {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.trial-icon {
  position: absolute;
  font-size: 1.5rem;
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.6));
  animation: moneyRain 10s linear infinite;
}

/* Staggered Positions & Colors */
.ti-1 { left: 10%; color: #7c3aed; animation-delay: 0s; }
.ti-2 { left: 30%; color: #38bdf8; animation-delay: -3s; }
.ti-3 { left: 55%; color: #a855f7; animation-delay: -6s; }
.ti-4 { left: 80%; color: #22d3ee; animation-delay: -2s; }
.ti-5 { left: 92%; color: #7c3aed; animation-delay: -8s; }

@keyframes moneyRain {
  0% { transform: translateY(-100px) rotate(0deg); opacity: 0; }
  10% { opacity: 0.5; }
  90% { opacity: 0.5; }
  100% { transform: translateY(600px) rotate(360deg); opacity: 0; }
}

/* Steps Layout */
.trial-steps {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 2.5rem 0 3rem;
  position: relative;
  z-index: 2; /* Content above animation */
}

.trial-step {
  text-align: center;
  max-width: 160px;
  transition: transform 0.3s ease;
}

.trial-step:hover {
  transform: translateY(-5px);
}

/* Step Circle styled like a Poker Chip */
.step-num {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #0d0820; /* --bg2 */
  border: 3px dashed #7c3aed; /* Dashed border looks like chip edge */
  color: #fff;
  font-weight: 900;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.4);
  position: relative;
}

.step-num::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.trial-step h4 {
  font-size: 1rem;
  font-weight: 800;
  color: #f0e9ff;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.trial-step p {
  font-size: 0.85rem;
  color: #9585b8; /* --muted */
  line-height: 1.4;
}

/* Arrow Styling */
.trial-arrow {
  font-size: 1.5rem;
  color: rgba(168, 85, 247, 0.32); /* --border2 */
  align-self: center;
  margin-top: -1.5rem;
  animation: arrowPulse 2s ease-in-out infinite;
}

@keyframes arrowPulse {
  0%, 100% { transform: translateX(0); opacity: 0.3; }
  50% { transform: translateX(10px); opacity: 1; }
}

/* Mobile Fit */
@media (max-width: 768px) {
  .trial-steps { gap: 1rem; }
  .trial-arrow { display: none; } /* Hide arrows on stack */
  .trial-step { max-width: 100%; width: 45%; }
}
  
  /* PAYMENT */
  .payment-section {
  position: relative;
  background: #05030f; /* --bg */
  padding: 100px 20px;
  overflow: hidden;
  border-top: 1px solid rgba(168, 85, 247, 0.15);
}

/* Futuristic Data Flow Background */
.payment-bg-flow {
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(rgba(5, 3, 15, 0.9), rgba(5, 3, 15, 0.9)),
    repeating-linear-gradient(0deg, transparent 0, rgba(34, 211, 238, 0.03) 1px, transparent 2px);
  background-size: 100% 4px;
  animation: scanline 10s linear infinite;
  z-index: 1;
}

@keyframes scanline {
  from { background-position: 0 0; }
  to { background-position: 0 100%; }
}

.payment-section .container {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
}

/* Grid Layout */
.payment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
  margin-top: 50px;
}

/* Payment Card Styling */
.payment-card {
  background: rgba(18, 14, 42, 0.6);
  border: 1px solid rgba(168, 85, 247, 0.2);
  border-radius: 24px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(15px);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.payment-card:hover {
  transform: translateY(-10px);
  border-color: #22d3ee;
  box-shadow: 0 20px 50px rgba(5, 3, 15, 0.9), 0 0 20px rgba(34, 211, 238, 0.1);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
}

.card-icon {
  font-size: 1.5rem;
  color: #22d3ee;
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.6));
}

.payment-card h3 {
  color: #f0e9ff;
  font-size: 1.4rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.card-text {
  font-size: 0.95rem;
  color: #9585b8;
  line-height: 1.8;
  margin-bottom: 25px;
}

.highlight-cyan {
  color: #22d3ee;
  font-weight: 900;
}

/* Notice Box */
.notice-box {
  background: rgba(124, 58, 237, 0.08);
  border-left: 4px solid #7c3aed;
  padding: 20px;
  display: flex;
  gap: 15px;
  border-radius: 0 12px 12px 0;
}

.notice-icon {
  color: #a855f7;
  font-size: 1.2rem;
}

.notice-text {
  font-size: 0.85rem;
  color: #9585b8;
  line-height: 1.5;
}

/* Payment Methods */
.pay-method {
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(255, 255, 255, 0.03);
  padding: 15px 20px;
  border-radius: 16px;
  margin-bottom: 15px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: 0.3s;
}

.pay-method:hover {
  background: rgba(34, 211, 238, 0.05);
  border-color: rgba(34, 211, 238, 0.3);
}

.pay-logo {
  font-size: 1.8rem;
  color: #f0e9ff;
  width: 50px;
  text-align: center;
}

.pay-name {
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
}

.pay-note {
  color: #9585b8;
  font-size: 0.8rem;
}

.footer-note {
  font-size: 0.8rem;
  color: #9585b8;
  margin-top: 20px;
  font-style: italic;
}

/* Responsive Scaling */
@media (max-width: 768px) {
  .payment-grid {
    grid-template-columns: 1fr;
  }
  .payment-card {
    padding: 30px 20px;
  }
}
  
/* --- 1. CORE SECTION STYLING --- */
.contact-section {
  position: relative;
  background-color: #05030f; /* Base Dark */
  padding: 100px 0;
  overflow: hidden;
  border-top: 1px solid rgba(168, 85, 247, 0.2);
  min-height: 100vh;
  display: flex;
  align-items: center;
}

/* --- 2. LAYERED BACKGROUND ANIMATIONS --- */

/* Layer 1: Animated Mesh Gradient */
.contact-section::before {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: 0;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(124, 58, 237, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(34, 211, 238, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 50% 10%, rgba(168, 85, 247, 0.25) 0%, transparent 60%);
  filter: blur(100px);
  animation: meshFlow 18s ease-in-out infinite alternate;
}

/* Layer 2: Data-Grid Overlay */
.data-grid-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(34, 211, 238, 0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(34, 211, 238, 0.03) 1px, transparent 1px);
  background-size: 45px 45px;
  z-index: 1;
  pointer-events: none;
}

/* Layer 3: Rising Poker Icons */
.poker-float-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.float-icon {
  position: absolute;
  bottom: -80px;
  color: #a855f7;
  filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.6));
  font-size: 2.8rem;
  animation: risingIcon 14s linear infinite;
  opacity: 0;
}

.fi-1 { left: 8%; animation-delay: 0s; color: #22d3ee; }
.fi-2 { left: 28%; animation-delay: -4s; }
.fi-3 { left: 55%; animation-delay: -8s; color: #22d3ee; }
.fi-4 { left: 82%; animation-delay: -2s; }
.fi-5 { left: 45%; animation-delay: -11s; font-size: 3.5rem; }

/* --- 3. CONTENT & GRID LAYOUT --- */
.relative-content {
  position: relative;
  z-index: 10; /* Keeps content above all animations */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.adaptive-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 50px;
  margin-top: 60px;
}

/* --- 4. GLASS-CARD STYLING (Info Side) --- */
.glass-card {
  background: rgba(18, 14, 42, 0.6);
  border: 1px solid rgba(168, 85, 247, 0.2);
  padding: 40px;
  border-radius: 28px;
  backdrop-filter: blur(20px);
  transition: transform 0.4s ease;
}

.channel-link {
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(255, 255, 255, 0.03);
  padding: 20px;
  border-radius: 18px;
  margin-bottom: 15px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.channel-link:hover {
  background: rgba(124, 58, 237, 0.1);
  border-color: #22d3ee;
  transform: translateX(10px);
}

.channel-icon {
  font-size: 1.6rem;
  color: #22d3ee;
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.5));
}

.platform-alias {
  display: block;
  font-weight: 800;
  color: #f0e9ff;
  font-size: 1rem;
}

.contact-id {
  color: #9585b8;
  font-size: 0.85rem;
}

.arrow-icon {
  margin-left: auto;
  color: rgba(168, 85, 247, 0.4);
  font-size: 0.9rem;
}

/* Protocol Box Pulse Animation */
.protocol-box {
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.2);
  padding: 20px;
  border-radius: 18px;
  display: flex;
  gap: 15px;
  align-items: center;
}

.pulse {
  animation: neonPulse 2s infinite ease-in-out;
}

/* --- 5. FUTURISTIC FORM STYLING --- */
.action-card {
  background: rgba(13, 8, 32, 0.8);
  border: 1px solid rgba(34, 211, 238, 0.2);
  padding: 45px;
  border-radius: 28px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.field-icon {
  position: absolute;
  left: 15px;
  color: #7c3aed;
  font-size: 1.1rem;
}

.futuristic-form input, 
.futuristic-form textarea {
  width: 100%;
  padding: 15px 15px 15px 45px;
  background: rgba(5, 3, 15, 0.7);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 14px;
  color: #fff;
  font-size: 0.95rem;
  transition: 0.3s;
}

.futuristic-form input:focus, 
.futuristic-form textarea:focus {
  outline: none;
  border-color: #22d3ee;
  box-shadow: 0 0 15px rgba(34, 211, 238, 0.2);
  background: rgba(5, 3, 15, 0.9);
}

.btn-neon-submit {
  width: 100%;
  padding: 18px;
  background: linear-gradient(135deg, #7c3aed 0%, #22d3ee 100%);
  border: none;
  border-radius: 14px;
  color: #fff;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top:17px;
  transition: 0.4s ease;
}

.btn-neon-submit:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(124, 58, 237, 0.4);
  filter: brightness(1.1);
}

/* --- 6. KEYFRAME DEFINITIONS --- */
@keyframes meshFlow {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.1) translate(5%, 5%); }
}

@keyframes risingIcon {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  15% { opacity: 0.5; }
  85% { opacity: 0.5; }
  100% { transform: translateY(-115vh) rotate(360deg); opacity: 0; }
}

@keyframes neonPulse {
  0%, 100% { opacity: 1; filter: brightness(1); }
  50% { opacity: 0.5; filter: brightness(1.5); }
}
.form-group label{margin:9px 0;}
/* --- 7. RESPONSIVE --- */
@media (max-width: 992px) {
  .adaptive-grid { grid-template-columns: 1fr; }
  .contact-section { padding: 60px 0; }
}

  @media(max-width:720px){.contact-grid{grid-template-columns:1fr}}
  .social-links{display:flex;flex-direction:column;gap:1rem;margin:1.5rem 0}
  .social-link{display:flex;align-items:center;gap:1rem;padding:1rem;background:rgba(21,17,48,0.7);border:1px solid var(--border);border-radius:12px;transition:all 0.25s;font-weight:600}
  .social-link:hover{border-color:var(--border2);background:rgba(124,58,237,0.1);transform:translateX(4px)}
  .social-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem}
  .si-ig{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)}
  .si-wa{background:#25D366}
  .si-em{background:linear-gradient(135deg,#7c3aed,#a855f7)}
  .contact-label{font-size:0.8rem;color:var(--muted)}
  .contact-form{display:flex;flex-direction:column;gap:1rem}
  .form-group{display:flex;flex-direction:column;gap:0.4rem}
  .form-group label{font-size:0.82rem;    margin: 9px 0;font-weight:600;color:var(--purple3)}
  .form-group input,.form-group textarea{background:rgba(21,17,48,0.8);border:1px solid var(--border);border-radius:10px;padding:0.8rem 3rem;color:var(--text);font-size:0.9rem;font-family:inherit;outline:none;transition:border-color 0.25s,box-shadow 0.25s;resize:vertical}
  .form-group input:focus,.form-group textarea:focus{border-color:var(--purple2);box-shadow:0 0 0 3px rgba(124,58,237,0.15)}
  .form-group input::placeholder,.form-group textarea::placeholder{color:var(--muted);font-size:0.875rem}
  .form-group textarea{min-height:120px}
  
  /* FAQ */
 .faq-section {
  position: relative;
  background: #05030f;
  padding: 100px 20px;
  overflow: hidden;
}

/* --- HIGH VISIBILITY POKER BACKGROUND --- */
.faq-bg-visuals {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.poker-float {
  position: absolute;
  color: rgba(168, 85, 247, 0.15); /* Purple Neon tint */
  filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.4));
  font-size: 4rem;
  animation: floatMove 15s infinite ease-in-out;
  opacity: 0.6;
}

.pf-1 { top: 10%; left: 5%; animation-delay: 0s; color: rgba(34, 211, 238, 0.2); } /* Cyan tint */
.pf-2 { top: 40%; right: 8%; animation-delay: -3s; }
.pf-3 { bottom: 15%; left: 15%; animation-delay: -7s; }
.pf-4 { bottom: 20%; right: 20%; animation-delay: -10s; color: rgba(34, 211, 238, 0.2); }

@keyframes floatMove {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50% { transform: translate(30px, -50px) rotate(180deg) scale(1.2); }
}

/* --- FAQ CONTENT --- */
.faq-section .container {
  position: relative;
  z-index: 10;
  max-width: 850px;
  margin: 0 auto;
}

.faq-list {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.faq-item {
  background: rgba(18, 14, 42, 0.6);
  border: 1px solid rgba(168, 85, 247, 0.15);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(15px);
}

.faq-item:hover {
  border-color: #22d3ee;
  background: rgba(18, 14, 42, 0.9);
}

.faq-q {
  width: 100%;
  padding: 24px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  color: #f0e9ff;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: left;
}

.q-content {
  display: flex;
  align-items: center;
  gap: 18px;
}

.q-icon {
  color: #7c3aed;
  font-size: 1.3rem;
  filter: drop-shadow(0 0 5px rgba(124, 58, 237, 0.5));
}

.faq-toggle-icon {
  font-size: 0.9rem;
  color: #9585b8;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Active State Styles */
.faq-item.active {
  border-color: #a855f7;
  box-shadow: 0 0 30px rgba(168, 85, 247, 0.15);
}

.faq-item.active .faq-toggle-icon {
  transform: rotate(180deg);
  color: #22d3ee;
}

/* --- ACCORDION ANIMATION --- */
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(5, 3, 15, 0.4);
}

.faq-a-inner {
  padding: 10px 40px 25px 69px;
  color: #9585b8;
  line-height: 1.8;
  font-size: 0.95rem;
}

/* Responsive */
@media (max-width: 600px) {
  .faq-q { padding: 20px; font-size: 1rem; }
  .faq-a-inner { padding: 0 20px 20px 58px; }
  .poker-float { font-size: 3rem; }
}
  
  /* NOTICE */
  .notice-section {
  position: relative;
  background: #05030f; /* --bg */
  padding: 180px 20px 50px;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

/* Red Ambient Glow for Warning Status */
.notice-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(239, 68, 68, 0.1) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.notice-inner {
  position: relative;
  z-index: 10;
  max-width: 1100px;
  width: 100%;
}

.notice-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
  text-align: center;
}

.warning-icon {
  font-size: 2.5rem;
  color: #ef4444; /* High-vis Red */
  filter: drop-shadow(0 0 15px rgba(239, 68, 68, 0.6));
  margin-bottom: 15px;
}

.notice-title {
  color: #fff;
  font-size: 1.8rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Notice Cards Grid */
.notice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.notice-card {
  background: rgba(18, 14, 42, 0.8);
  border: 1px solid rgba(239, 68, 68, 0.2);
  padding: 30px;
  border-radius: 20px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  position: relative;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.notice-card:hover {
  border-color: #ef4444;
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(239, 68, 68, 0.1);
}

/* Neon Accent Edge */
.card-edge {
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 4px;
  background: #ef4444;
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 10px #ef4444;
}

.n-icon {
  font-size: 1.5rem;
  color: #f59e0b; /* Amber/Gold for contrast */
  margin-top: 5px;
}

.n-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #ef4444;
  letter-spacing: 1px;
  margin-bottom: 5px;
}

.n-content p {
  color: #9585b8; /* --muted */
  font-size: 0.9rem;
  line-height: 1.6;
}

.n-content strong {
  color: #f0e9ff; /* --text */
}

/* Animation */
.pulse-red {
  animation: noticePulse 2s infinite ease-in-out;
}

@keyframes noticePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .notice-grid {
    grid-template-columns: 1fr;
  }
}
  
  /* FOOTER */
 .cyber-footer {
  position: relative;
  background-color: #05030f;
  padding: 60px 20px 30px;
  overflow: hidden;
  border-top: 1px solid rgba(168, 85, 247, 0.2);
}

/* --- RACE TRACK ANIMATION --- */
.circuit-background {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.track-line {
  position: absolute;
  background: linear-gradient(90deg, transparent, #22d3ee, transparent);
  height: 1px;
  width: 100%;
  opacity: 0.15;
}

.t1 { top: 20%; animation: raceTrack 4s linear infinite; }
.t2 { top: 50%; animation: raceTrack 6s linear infinite reverse; }
.t3 { top: 80%; animation: raceTrack 5s linear infinite; }

@keyframes raceTrack {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Adding a "Glow" at the end of the tracks */
.track-line::after {
  content: '';
  position: absolute;
  right: 0;
  width: 50px;
  height: 2px;
  background: #22d3ee;
  box-shadow: 0 0 15px #22d3ee, 0 0 30px #22d3ee;
}

/* --- LAYOUT & TYPOGRAPHY --- */
.footer-container {
  position: relative;
  z-index: 10;
  max-width: 1100px;
  margin: 0 auto;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-logo {
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -1px;
  text-transform: uppercase;
}

.footer-logo span {
  color: #a855f7;
  text-shadow: 0 0 15px rgba(168, 85, 247, 0.5);
}

.brand-status {
  font-size: 0.75rem;
  color: #9585b8;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-dot {
  width: 6px;
  height: 6px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 10px #22c55e;
  animation: pulseGreen 2s infinite;
}

.footer-info {
  display: flex;
  gap: 40px;
}

.info-item {
  display: flex;
  flex-direction: column;
}

.info-label {
  font-size: 0.7rem;
  color: #a855f7;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 5px;
}

.info-value {
  font-size: 0.95rem;
  color: #f0e9ff;
  font-weight: 500;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
  flex-wrap: wrap;
  gap: 20px;
}

.copyright {
  font-size: 0.85rem;
  color: #9585b8;
}

.footer-links {
  display: flex;
  gap: 25px;
}

.footer-links a {
  font-size: 0.85rem;
  color: #9585b8;
  text-decoration: none;
  transition: 0.3s;
}

.footer-links a:hover {
  color: #22d3ee;
}

/* --- ANIMATIONS --- */
@keyframes pulseGreen {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  .footer-top {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .footer-info {
    flex-direction: column;
    gap: 20px;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}
  
  /* SCROLL ANIMATIONS */
  .reveal{opacity:0;transform:translateY(30px);transition:opacity 0.7s ease,transform 0.7s ease}
  .reveal.visible{opacity:1;transform:translateY(0)}
  .reveal-delay-1{transition-delay:0.1s}
  .reveal-delay-2{transition-delay:0.2s}
  .reveal-delay-3{transition-delay:0.3s}
  .reveal-delay-4{transition-delay:0.4s}
  
  /* RESPONSIVE */
  @media(max-width:768px){
    .nav-links,.nav-cta{display:none}
    .hamburger{display:flex}
    section{padding:4rem 1.25rem}
    .hero{padding:6rem 1.25rem 3rem}
    .hero h1{letter-spacing:-1px}
    .trial-steps{gap:1rem}
  }
  @media(max-width:480px){
    .edit-grid{grid-template-columns: 1fr}
    .why-grid{grid-template-columns: 1fr}
  }
  @media(max-width:360px){
    .edit-grid{grid-template-columns:1fr}
  }
  
  /* NEON PULSE on btn */
  @keyframes neon-pulse{0%,100%{box-shadow:0 0 30px rgba(168,85,247,0.5),0 0 0 1px rgba(168,85,247,0.3)}50%{box-shadow:0 0 50px rgba(168,85,247,0.8),0 0 0 1px rgba(168,85,247,0.5)}}
  .btn-primary{animation:neon-pulse 2.5s ease-in-out infinite}
  .btn-primary:hover{animation:none}
  
  
/* --- UPDATED DROPDOWN CORE --- */

/* 1. CRITICAL: The parent card must allow content to spill out */
.price-card {
  position: relative;
  overflow: visible !important; /* Forces the card to show the dropdown */
  z-index: 1; /* Default stacking */
  transition: transform 0.3s ease;
}

/* 2. When the menu is open, lift this specific card to the very top */
.price-card:has(.dropdown-menu.show),
.price-card:focus-within {
  z-index: 100; 
}

.action-dropdown { 
  position: relative; 
  width: 100%; 
  margin-top: 25px; 
}

.dropdown-menu {
  position: absolute;
  /* Changed top to 120% to give it more 'float' distance */
  top: 120%; 
  left: 0;
  width: 100%;
  background: rgba(18, 14, 42, 0.98);
  border: 1px solid rgba(168, 85, 247, 0.4);
  border-radius: 12px;
  backdrop-filter: blur(20px);
  padding: 10px;
  /* z-index here ensures it stays above its own card content */
  z-index: 9999; 
  display: none; 
  /* Heavier shadow to make it look higher off the page */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.9);
}

/* 3. Smooth Floating Animation */
.dropdown-menu.show { 
  display: block; 
  animation: floatUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
}

.dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  border-radius: 8px;
  transition: 0.2s;
}

.dropdown-menu a:hover { 
  background: rgba(168, 85, 247, 0.1); 
  transform: translateX(5px); /* Professional hover slide */
}

/* Icons */
.ig-color { color: #e1306c; filter: drop-shadow(0 0 5px rgba(225, 48, 108, 0.3)); }
.wa-color { color: #25d366; filter: drop-shadow(0 0 5px rgba(37, 211, 102, 0.3)); }
.em-color { color: #22d3ee; filter: drop-shadow(0 0 5px rgba(34, 211, 238, 0.3)); }

@keyframes floatUp {
  from { 
    opacity: 0; 
    transform: translateY(20px) scale(0.95); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
}

.nexus-terminal-section {
  position: relative;
  background: #05030f; /* Base Dark Violet */
  padding: 100px 0;
  overflow: hidden;
  color: #ffffff;
  font-family: "Saira Stencil", sans-serif !important;
}

/* --- 1. CYAN NEON LINE ANIMATION --- */
.nt-rain-line {
  position: absolute;
  top: 0;
  left: 5%; /* Positioned slightly off-center for style */
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, #22d3ee, transparent);
  animation: neonLineMove 3s infinite linear;
  box-shadow: 0 0 15px #22d3ee;
  z-index: 1;
}

@keyframes neonLineMove {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* --- 2. POKER ICON RAIN (VIOLET) --- */
.nt-poker-rain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.nt-drop {
  position: absolute;
  color: #a855f7; /* Solid Violet */
  font-size: 2.5rem;
  opacity: 0;
  filter: drop-shadow(0 0 10px #a855f7);
  animation: pokerRain 7s infinite linear;
}

/* Randomized Rain Columns */
.d1 { left: 5%;  animation-duration: 6s; animation-delay: 0s; }
.d2 { left: 25%; animation-duration: 9s; animation-delay: -2s; font-size: 1.5rem; }
.d3 { left: 45%; animation-duration: 7s; animation-delay: -4s; }
.d4 { left: 65%; animation-duration: 10s; animation-delay: -1s; font-size: 2rem; }
.d5 { left: 85%; animation-duration: 8s; animation-delay: -5s; }
.d6 { left: 15%; animation-duration: 11s; animation-delay: -3s; opacity: 0.1; }

@keyframes pokerRain {
  0% { transform: translateY(-100px) rotate(0deg); opacity: 0; }
  10% { opacity: 0.4; }
  90% { opacity: 0.4; }
  100% { transform: translateY(120vh) rotate(360deg); opacity: 0; }
}

/* --- 3. LAYOUT & MODULES --- */
.nt-relative {
  position: relative;
  z-index: 10;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.nt-header {
  text-align: center;
  margin-bottom: 50px;
}

.nt-badge {
  color: #22d3ee;
  border: 1px solid #22d3ee;
  padding: 5px 15px;
  border-radius: 50px;
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.nt-title {
  font-size: 2.5rem;
  margin: 20px 0;
  font-weight: 800;
}

.nt-main-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 30px;
}

/* Solid Module Styles */
.nt-module-inner, 
.nt-cyber-form {
  background: #0a081a; /* Solid deep background */
  border: 2px solid #a855f7; /* Sharp Violet Border */
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* --- 4. CONTACT LINKS --- */
.nt-channels {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

.nt-link {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px;
  background: #120e2a;
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 15px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.nt-link:hover {
  border-color: #22d3ee;
  transform: translateX(10px);
  background: #1a1538;
}

.nt-link-icon { font-size: 1.4rem; color: #a855f7; }
.nt-link-label { display: block; font-size: 0.7rem; color: #22d3ee; text-transform: uppercase; }
.nt-link-id { display: block; font-size: 1rem; color: #ffffff; font-weight: 600; }

/* --- 5. FORM ELEMENTS --- */
.nt-input-group {
  margin-bottom: 20px;
}

.nt-input-group label {
  display: block;
  margin-bottom: 8px;
  color: #a855f7;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}

.nt-input-group input, 
.nt-input-group textarea {
  width: 100%;
  background: #05030f;
  border: 1px solid rgba(168, 85, 247, 0.5);
  padding: 15px;
  color: #fff;
  border-radius: 10px;
  transition: 0.3s;
}

.nt-input-group input:focus, 
.nt-input-group textarea:focus {
  border-color: #22d3ee;
  outline: none;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.2);
}

.nt-input-group textarea { height: 120px; resize: none; }

.nt-submit-btn {
  width: 100%;
  padding: 18px;
  background: #a855f7;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: 0.3s;
  box-shadow: 0 5px 15px rgba(168, 85, 247, 0.4);
}

.nt-submit-btn:hover {
  background: #7c3aed;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(168, 85, 247, 0.6);
}

/* --- PROJECT PROTOCOL DROPDOWN STYLES --- */

.nt-input-group {
  margin-bottom: 25px;
  position: relative;
}

.nt-select {
  width: 100%;
  background: #05030f; /* Matches your deep background */
  border: 1px solid rgba(168, 85, 247, 0.5); /* Violet Border */
  padding: 15px 47px;
  color: #ffffff;
  border-radius: 12px;
  font-size: 1rem;
  cursor: pointer;
  outline: none;
  transition: all 0.3s ease;
  
  /* Resetting default browser appearance */
  appearance: none; 
  -webkit-appearance: none;
  -moz-appearance: none;

  /* Custom Neon Arrow Icon */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2322d3ee' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 20px;
}

/* Hover & Focus States */
.nt-select:hover {
  border-color: #a855f7;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.2);
}

.nt-select:focus {
  border-color: #22d3ee; /* Switches to Cyan on active focus */
  box-shadow: 0 0 15px rgba(34, 211, 238, 0.3);
}

/* Styling the Options (Note: Limited styling possible on native select options) */
.nt-select option {
  background: #0a081a;
  color: #ffffff;
  padding: 10px;
}

/* Label styling to match your form */
.nt-input-group label {
  display: block;
  margin-bottom: 10px;
  color: #a855f7; /* Violet Label */
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
/* --- 6. MOBILE RESPONSIVENESS --- */
@media (max-width: 992px) {
  .nt-main-grid {
    grid-template-columns: 1fr; /* Stacks vertically */
  }
  
  .nt-title { font-size: 2rem; }
}

@media (max-width: 600px) {
  .nt-module-inner, 
  .nt-cyber-form {
    padding: 25px;
    border-radius: 15px;
  }
  
  .nt-drop { font-size: 1.5rem; }
  
  .nt-header { margin-bottom: 30px; }
}

/* --- ABOUT MAINFRAME ROOT --- */
.about-mainframe {
    position: relative;
    background: #05030f; /* Deep Black-Violet */
    padding: 120px 0;
    overflow: hidden;
    color: #ffffff;
    font-family: "Saira Stencil", sans-serif !important;
}

/* --- ANIMATION ENGINE --- */
.mainframe-visuals {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* SUBTLE CENTER NEON STRIP */
.neon-protocol-strip {
    position: absolute;
    top: 50%; /* Moved to middle */
    left: 0;
    width: 100%;
    height: 1px;
    /* Reduced visibility: subtle cyan gradient */
    background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.3), transparent);
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.1);
    animation: neonScan 6s infinite linear;
}

@keyframes neonScan {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* POKER RAIN ENGINE */
.poker-rain-layer { position: absolute; inset: 0; }
.rain-drop {
    position: absolute;
    color: #a855f7;
    font-size: 2rem;
    opacity: 0;
    filter: drop-shadow(0 0 5px #a855f7);
    animation: rainFall 8s infinite linear;
}

.rd-1 { left: 5%; animation-duration: 7s; }
.rd-2 { left: 25%; animation-duration: 10s; animation-delay: -2s; font-size: 1.2rem; }
.rd-3 { left: 48%; animation-duration: 8s; animation-delay: -4s; }
.rd-4 { left: 72%; animation-duration: 11s; animation-delay: -1s; font-size: 1.5rem; }
.rd-5 { left: 92%; animation-duration: 9s; }

@keyframes rainFall {
    0% { transform: translateY(-100px) rotate(0deg); opacity: 0; }
    20% { opacity: 0.25; }
    80% { opacity: 0.25; }
    100% { transform: translateY(120vh) rotate(360deg); opacity: 0; }
}

/* --- LAYOUT COMPONENTS --- */
.nt-relative { position: relative; z-index: 10; max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.about-hero { text-align: center; margin-bottom: 80px; }
.protocol-tag { color: #a855f7; letter-spacing: 3px; font-weight: 700; font-size: 0.75rem; margin-bottom: 15px; text-transform: uppercase; }

.glitch-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 900;
    background: linear-gradient(to bottom, #fff 40%, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.hero-lead { max-width: 700px; margin: 0 auto; color: #94a3b8; font-size: 1.1rem; line-height: 1.6; }

/* MODERN CARDS */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 80px;
}

.about-card {
    background: rgba(18, 14, 42, 0.8);
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 24px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-card:hover {
    border-color: #22d3ee;
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.card-edge {
    position: absolute;
    top: 0; left: 0; width: 4px; height: 100%;
    background: #a855f7;
}

.module-header { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; }
.module-icon { font-size: 1.5rem; color: #22d3ee; }

.spec-list { list-style: none; padding: 0; margin-top: 20px; }
.spec-list li { color: #94a3b8; margin-bottom: 10px; font-size: 0.95rem; display: flex; align-items: center; gap: 10px; }
.spec-list i { color: #a855f7; font-size: 0.8rem; }

.service-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.service-tags span {
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.3);
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 0.8rem;
    transition: 0.3s;
}
.service-tags span:hover { border-color: #22d3ee; background: rgba(34, 211, 238, 0.1); }

/* ECOSYSTEM */
.ecosystem-section { text-align: center; margin-bottom: 100px; }
.ecosystem-flex { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin-top: 40px; }
.eco-item {
    background: #0a081a;
    border: 1px solid rgba(168, 85, 247, 0.3);
    padding: 15px 30px;
    border-radius: 15px;
    font-weight: 600;
    transition: 0.3s;
}
.eco-item:hover { border-color: #22d3ee; color: #22d3ee; transform: scale(1.05); }

/* FOOTER */
.about-footer { text-align: center; padding-top: 50px; border-top: 1px solid rgba(168, 85, 247, 0.2); }
.contact-terminal-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: #a855f7;
    padding: 18px 45px;
    border-radius: 100px;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    text-transform: uppercase;
    margin-top: 30px;
    transition: 0.3s;
    box-shadow: 0 10px 20px rgba(168, 85, 247, 0.3);
}

.contact-terminal-btn:hover { background: #22d3ee; transform: scale(1.05); color: #05030f; box-shadow: 0 10px 20px rgba(34, 211, 238, 0.3); }

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .about-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .glitch-title { font-size: 2.5rem; }
    .about-card { padding: 30px 20px; }
    .eco-item { width: 100%; }
}