/* ==========================================================================
   PROTOCOLO LIBRE — PORTAL BIO STYLES
   Silicon Valley Post-SaaS & Cyberpunk Premium Esthetic
   ========================================================================== */

:root {
  --bio-bg: #030509;
  --bio-primary: #00D4FF;
  --bio-secondary: #6C4CFF;
  --bio-emerald: #10B981;
  --bio-amber: #F59E0B;
}

/* Prevent unwanted horizontal overflow on any mobile viewport */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}

/* Subtle Animated Ambient Background */
.bio-ambient-grid {
  background-size: 32px 32px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

/* Glow Lights (Constrained to prevent mobile overflow) */
.glow-spot-primary {
  position: absolute;
  top: -5%;
  left: 50%;
  transform: translateX(-50%);
  width: min(500px, 90vw);
  height: min(500px, 90vw);
  background: radial-gradient(circle, rgba(99, 102, 241, 0.18) 0%, rgba(3, 5, 9, 0) 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.glow-spot-emerald {
  position: absolute;
  bottom: 5%;
  right: -5%;
  width: min(450px, 80vw);
  height: min(450px, 80vw);
  background: radial-gradient(circle, rgba(16, 185, 129, 0.12) 0%, rgba(3, 5, 9, 0) 70%);
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

/* 9:16 Video Wrapper */
.video-frame-9-16 {
  aspect-ratio: 9 / 16;
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 20px 50px -10px rgba(0, 0, 0, 0.8),
    0 0 30px -5px rgba(0, 212, 255, 0.25);
}

/* Button Card Hover Effects */
.bio-card-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.bio-card-btn:hover {
  transform: translateY(-3px) scale(1.01);
}

.bio-card-btn:active {
  transform: translateY(0) scale(0.99);
}

/* Accordion Card & Fluid Expansion Animation */
.bio-accordion-card {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.bio-accordion-card:hover {
  box-shadow: 0 15px 45px -10px rgba(0, 0, 0, 0.9), 0 0 30px -5px rgba(0, 212, 255, 0.2);
}

/* Web3 & DeFi Dedicated Card */
.web3-glow-card {
  position: relative;
  border: 1px solid rgba(0, 212, 255, 0.3);
  background: radial-gradient(ellipse at top right, rgba(0, 212, 255, 0.08), transparent 70%),
              radial-gradient(ellipse at bottom left, rgba(108, 76, 255, 0.08), transparent 70%),
              rgba(10, 15, 25, 0.75);
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.8), 0 0 25px -5px rgba(0, 212, 255, 0.15);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.web3-glow-card:hover {
  border-color: rgba(0, 212, 255, 0.55);
  box-shadow: 0 15px 45px -10px rgba(0, 0, 0, 0.9), 0 0 35px -5px rgba(0, 212, 255, 0.25);
  transform: translateY(-2px);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #030509;
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #334155;
}