/* ============================================================
   OKK Neon Glass Web3 - Global Theme & Foundation
   Based on OKK Master Design Specification
   ============================================================ */

:root {
  /* Background */
  --okk-bg: #080512;
  --okk-bg-secondary: #0A0615;

  /* Surfaces */
  --okk-surface: #181424;
  --okk-surface-2: #1F1930;
  --okk-surface-hover: #241B38;

  /* Brand Palette */
  --okk-purple: #7C3CFF;
  --okk-purple-light: #8D43FF;
  --okk-purple-bright: #A66CFF;

  --okk-pink: #D63DFF;
  --okk-pink-soft: #EC77FF;

  --okk-blue: #2B53FF;
  --okk-blue-soft: #4A7EFF;

  /* Semantic Highlights */
  --okk-success: #37DC97;
  --okk-warning: #F5B84B;
  --okk-gold: #F5B84B;
  --okk-danger: #FF5A73;

  /* Text Typography */
  --okk-text: #F5F3FA;
  --okk-text-secondary: #AAA1BD;
  --okk-text-muted: #928AA5;
  --okk-text-disabled: #514B5D;

  /* Borders */
  --okk-border: rgba(255, 255, 255, 0.09);
  --okk-border-light: rgba(161, 91, 255, 0.45);
  --okk-border-active: rgba(124, 60, 255, 0.6);

  /* Radius */
  --okk-radius-sm: 10px;
  --okk-radius-md: 14px;
  --okk-radius-lg: 20px;
  --okk-radius-xl: 24px;
  --okk-radius-pill: 999px;

  /* Shadows & Neon Glows */
  --okk-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  --okk-glow-purple: 0 0 35px rgba(148, 65, 255, 0.55);
  --okk-glow-button: 0 10px 35px rgba(130, 55, 255, 0.35);
  --okk-glow-pink: 0 0 30px rgba(214, 61, 255, 0.45);
  --okk-glow-gold: 0 0 30px rgba(245, 184, 75, 0.4);
}

/* Reset & Box Sizing */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background-color: var(--okk-bg);
  color: var(--okk-text);
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Responsive Master Container */
.okk-container {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

@media (max-width: 575px) {
  .okk-container {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* 3-Layer Atmospheric Radial Background */
.okk-ambient-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
  background:
    radial-gradient(circle at 15% 20%, rgba(126, 55, 255, 0.22), transparent 35%),
    radial-gradient(circle at 85% 75%, rgba(220, 48, 255, 0.16), transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(43, 83, 255, 0.08), transparent 45%),
    #080512;
  pointer-events: none;
}

/* Technological Grid */
.okk-grid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 55px 55px;
  opacity: 0.22;
  pointer-events: none;
}

/* Floating Ambient Orbs */
.okk-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: -1;
  animation: okkFloat 12s ease-in-out infinite;
}

.okk-orb-purple {
  width: 320px;
  height: 320px;
  background: rgba(126, 55, 255, 0.18);
  top: 10%;
  right: 5%;
}

.okk-orb-pink {
  width: 260px;
  height: 260px;
  background: rgba(220, 48, 255, 0.14);
  bottom: 15%;
  left: 5%;
  animation-delay: -5s;
}

@keyframes okkFloat {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(25px, -30px) scale(1.08); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Responsive Containers */
.okk-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 768px) {
  .okk-container {
    padding: 0 24px;
  }
}

/* Typography Classes */
h1, h2, h3, h4, h5, h6 {
  color: var(--okk-text);
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.25;
}

.display-1 {
  font-size: clamp(2.2rem, 5.5vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -1.5px;
}

.display-2 {
  font-size: clamp(1.6rem, 3.8vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -1px;
}

.okk-gradient-text {
  background: linear-gradient(90deg, #FFFFFF 15%, #D7C1FF 48%, #EC77FF 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

.okk-gold-text {
  background: linear-gradient(90deg, #FFE17D 0%, #F5B84B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-secondary { color: var(--okk-text-secondary) !important; }
.text-muted { color: var(--okk-text-muted) !important; }
.text-success { color: var(--okk-success) !important; }
.text-warning { color: var(--okk-warning) !important; }
.text-danger { color: var(--okk-danger) !important; }

/* Links */
a {
  color: var(--okk-purple-bright);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--okk-pink-soft);
}

/* ============================================================
   RESPONSIVE UTILITY CLASSES (Grid, Flex, Visibility)
   ============================================================ */

/* Generic Displays */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }

/* Small Screen Breakpoint: >= 576px */
@media (min-width: 576px) {
  .d-sm-none { display: none !important; }
  .d-sm-block { display: block !important; }
  .d-sm-inline { display: inline !important; }
  .d-sm-inline-flex { display: inline-flex !important; }
  .d-sm-flex { display: flex !important; }
}

/* Medium Screen Breakpoint (Tablet): >= 768px */
@media (min-width: 768px) {
  .d-md-none { display: none !important; }
  .d-md-block { display: block !important; }
  .d-md-flex { display: flex !important; }
  .d-md-inline-flex { display: inline-flex !important; }
  .d-md-grid { display: grid !important; }
}

/* Large Screen Breakpoint (Desktop): >= 992px */
@media (min-width: 992px) {
  .d-lg-none { display: none !important; }
  .d-lg-block { display: block !important; }
  .d-lg-flex { display: flex !important; }
  .d-lg-inline-flex { display: inline-flex !important; }
  .d-lg-grid { display: grid !important; }
}

/* Extra Large Breakpoint: >= 1200px */
@media (min-width: 1200px) {
  .d-xl-none { display: none !important; }
  .d-xl-block { display: block !important; }
  .d-xl-flex { display: flex !important; }
}

/* Custom Scrollbar for sleek dark Web3 theme */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: var(--okk-bg);
}

::-webkit-scrollbar-thumb {
  background: rgba(124, 60, 255, 0.35);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(166, 108, 255, 0.65);
}