/* ============================================
   DARK ENTERPRISE THEME — Curious Minds Consultancy
   ONE UNIFIED DESIGN SYSTEM
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── DARK THEME TOKENS ── */
:root {
  --bg-main:        #070B14;
  --bg-secondary:   #0E1525;
  --bg-elevated:    rgba(255,255,255,0.03);
  --accent-primary: #6D5EF8;
  --accent-blue:    #38BDF8;
  --accent-glow:    rgba(109,94,248,0.35);
  --text-heading:   #FFFFFF;
  --text-body:      #A6B0CF;
  --text-muted-dt:  #6E7891;
  --border-dt:      rgba(255,255,255,0.08);
  --glass-bg-dt:    rgba(255,255,255,0.04);
  --nav-height:     80px;

  /* Map to existing variables */
  --primary:        #6D5EF8;
  --primary-hover:  #5843d4;
  --secondary:      #38BDF8;
  --accent:         #6D5EF8;
  --text-main:      #FFFFFF;
  --text-muted:     #A6B0CF;
  --glass-border:   rgba(255,255,255,0.08);
  --glass-bg:       rgba(255,255,255,0.04);
  --bg-body:        #070B14;
  --bg-card:        #0E1525;
  --bg-dark:        #0E1525;
  --nav-bg:         #0E1525;
  --logo-accent:    #8BFF00;
}

/* ── BASE ── */

body {
  background-color: #070B14 !important;
  color: #A6B0CF;
  font-family: 'Inter', 'Campton', 'Outfit', sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6 {
  color: #FFFFFF;
}

/* ── BACKGROUND ATMOSPHERE ── */
/* Old background grid removed to use HexagonBackground component */
body::before {
  display: none;
}

body::after {
  content: '';
  position: fixed;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 900px;
  background: radial-gradient(circle, rgba(109,94,248,0.07) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  filter: blur(80px);
}

/* ── AMBIENT GLOW SPOTS ── */
.bg-glow-spot {
  position: absolute;
  width: min(800px, 80vw);
  height: min(800px, 80vw);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  filter: blur(140px);
  opacity: 0.04;
  will-change: transform, opacity;
}

/* Upper transition glow — Soft Purple */
.spot-1 {
  top: 120vh;
  left: -15%;
  background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
  animation: atmosphericDrift1 22s ease-in-out infinite alternate;
}

/* Lower transition glow — Soft Blue-Violet */
.spot-2 {
  top: 280vh;
  right: -10%;
  background: radial-gradient(circle, var(--secondary) 0%, transparent 70%);
  animation: atmosphericDrift2 28s ease-in-out infinite alternate;
}

@keyframes atmosphericDrift1 {
  0% { transform: translate(0, 0) scale(1); opacity: 0.03; }
  50% { transform: translate(60px, 40px) scale(1.15); opacity: 0.06; }
  100% { transform: translate(-30px, 80px) scale(0.9); opacity: 0.02; }
}

@keyframes atmosphericDrift2 {
  0% { transform: translate(0, 0) scale(1.1); opacity: 0.02; }
  50% { transform: translate(-80px, 30px) scale(1); opacity: 0.05; }
  100% { transform: translate(40px, -60px) scale(1.2); opacity: 0.03; }
}

/* ── GLASS PANEL ── */
.glass-panel {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 20px;
  backdrop-filter: blur(30px) saturate(180%) brightness(120%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(120%) !important;
  color: #FFFFFF !important;
}

.glass-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #A6B0CF !important;
}

/* ── NAVBAR ── */
body .navbar {
  position: relative !important;
  background: rgba(7, 11, 20, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 100px !important;
  box-shadow: 0 25px 75px rgba(0,0,0,0.8), 0 0 50px rgba(109,94,248,0.25) !important;
  backdrop-filter: blur(15px) saturate(200%) brightness(120%) !important;
  -webkit-backdrop-filter: blur(15px) saturate(200%) brightness(120%) !important;
  z-index: 10 !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
}

/* ── SEARCH BAR DARK MODE ── */
.nav-search-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.nav-search-box {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 15px 50px rgba(0,0,0,0.7) !important;
  width: 64px !important;
  height: 64px !important;
}

.search-icon-main {
  color: #FFFFFF !important;
  text-shadow: 0 0 12px rgba(109,94,248,0.6), 0 0 20px rgba(109,94,248,0.2);
}

.nav-search-box.is-expanded {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--primary) !important;
  width: 400px !important;
  border-radius: 100px !important;
}

.nav-search-input {
  color: #FFFFFF !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 0 !important;
  padding: 4px 0 !important;
  box-shadow: none !important;
}

.nav-search-input:focus {
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.nav-search-input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

.nav-link {
  color: #A6B0CF !important;
}

.nav-link:hover {
  color: #a78bfa !important;
}

.nav-link.active {
  color: #a78bfa !important;
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
  border-color: transparent !important;
  animation: none !important;
}

.hamburger span {
  background-color: #A6B0CF !important;
}

/* Mobile nav dark */




/* ── LOGO ── */
.logo { display: flex !important; }
.css-logo .shape-1, .css-logo .shape-2 { background: #6D5EF8 !important; }
.css-logo .shape-3 { background: #38BDF8 !important; }

/* ── BUTTONS ── */
.btn-primary {
  background: linear-gradient(135deg, #6D5EF8, #8B72FF) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(109,94,248,0.35) !important;
}

.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 32px rgba(109,94,248,0.5) !important;
  color: #fff !important;
}

.btn:not(.btn-primary) {
  background: rgba(255,255,255,0.05) !important;
  color: #A6B0CF !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}

.btn:not(.btn-primary):hover {
  background: rgba(109,94,248,0.12) !important;
  border-color: rgba(109,94,248,0.4) !important;
  color: #FFFFFF !important;
}

/* ── SECTION HEADER ── */
.section-header h2 { color: #FFFFFF; }
.section-header p { color: #A6B0CF; }

/* ── GRADIENT TEXT ── */
.gradient-text {
  background: linear-gradient(135deg, #6D5EF8, #38BDF8) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── DARK ICON ── */
.dark-icon {
  color: #6D5EF8 !important;
  background: none !important;
  -webkit-text-fill-color: #6D5EF8 !important;
}

/* ── BOX-4 DARK ── */
.box-4 {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
.box-4 h2, .box-4 h3, .box-4 p { color: #A6B0CF !important; }

/* ── FORMS ── */
input, textarea, select {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #FFFFFF !important;
}

input:focus, textarea:focus, select:focus {
  border-color: rgba(109,94,248,0.5) !important;
  box-shadow: 0 0 0 3px rgba(109,94,248,0.1) !important;
}

input::placeholder, textarea::placeholder { color: #6E7891 !important; }
label { color: #A6B0CF !important; }

select option { background: #0E1525; color: #A6B0CF; }

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236D5EF8' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-color: rgba(255,255,255,0.04) !important;
}

.checkbox-item {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #A6B0CF !important;
}

.checkbox-item:hover {
  border-color: rgba(109,94,248,0.4) !important;
  background: rgba(109,94,248,0.08) !important;
  color: #FFFFFF !important;
}

/* ── SCROLL ITEMS ── */
.scroll-item {
  background: rgba(14,21,37,0.9) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

.scroll-item h3 { color: #FFFFFF !important; }
.scroll-item p { color: #A6B0CF !important; }

/* ── ABOUT/CONTACT PAGE ── */
body.about-page .glass-panel:not(.navbar),
body.contact-page .glass-panel:not(.navbar) {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #A6B0CF !important;
}

/* ── EXPERTISE CARDS ── */
.expertise-card {
  background: rgba(14,21,37,0.8) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #A6B0CF !important;
}

.expertise-card h3 { color: #FFFFFF !important; }
.expertise-card p { color: #A6B0CF !important; }

/* Why Choose Us styles are now managed in WhyUs.css */


/* ── WHY CAROUSEL BUTTONS ── */
.why-btn {
  background: rgba(109,94,248,0.2) !important;
  border: 1px solid rgba(109,94,248,0.3) !important;
  color: #FFFFFF !important;
}

.why-btn:hover { background: #6D5EF8 !important; }

/* ── WORKFLOW VISUAL ── */
.workflow-visual {
  background: rgba(14,21,37,0.8) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

.visual-metric-card {
  background: rgba(7,11,20,0.9) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

.visual-metric-label { color: #6E7891 !important; }
.visual-metric-value { color: #FFFFFF !important; }
.visual-metric-value.primary { color: #6D5EF8 !important; }
.visual-metric-value.success { color: #38BDF8 !important; }

.node-icon-box {
  background: rgba(7,11,20,0.9) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #6D5EF8 !important;
}

.node-label {
  background: none !important;
  border: none !important;
  color: #A6B0CF !important;
  box-shadow: none !important;
}

/* ── WORKFLOW CONTENT ── */
.workflow-step-number {
  background: rgba(109,94,248,0.15) !important;
  color: #6D5EF8 !important;
}

.workflow-step-text h4 { color: #FFFFFF !important; }
.workflow-step-text p { color: #A6B0CF !important; }
.workflow-content h2 { color: #FFFFFF !important; }
.workflow-description { color: #A6B0CF !important; }

/* ── HERO DASHBOARD ── */
.dashboard-ui {
  background: rgba(14,21,37,0.85) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

.dashboard-header { border-bottom-color: rgba(255,255,255,0.06) !important; }
.dashboard-header h4 { color: #FFFFFF !important; }

.stat-box.primary {
  background: rgba(109,94,248,0.08) !important;
  border: 1px solid rgba(109,94,248,0.2) !important;
}

.stat-box.secondary {
  background: rgba(56,189,248,0.08) !important;
  border: 1px solid rgba(56,189,248,0.2) !important;
}

.dashboard-workflow {
  background: rgba(7,11,20,0.6) !important;
}

.workflow-node {
  background: rgba(14,21,37,0.9) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}

.floating-badge {
  background: rgba(14,21,37,0.95) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}

/* ── SERVICE CARDS ── */
.service-card-clickable {
  background: rgba(14,21,37,0.8) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

.service-card-clickable h3, .service-card-clickable h4 { color: #FFFFFF !important; }
.service-card-clickable p { color: #A6B0CF !important; }

/* ── MODAL ── */
.modal-content {
  background: #0E1525 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}

.modal-header { border-bottom-color: rgba(255,255,255,0.08) !important; }
.modal-header h2 { color: #FFFFFF !important; }
.modal-subtitle { color: #A6B0CF !important; }
.modal-section h3 { color: #FFFFFF !important; }
.modal-section p { color: #A6B0CF !important; }
.modal-cta { border-top-color: rgba(255,255,255,0.08) !important; }

.benefit-item {
  background: rgba(109,94,248,0.06) !important;
  border: 1px solid rgba(109,94,248,0.15) !important;
}

.benefit-item h4 { color: #FFFFFF !important; }
.benefit-item p { color: #A6B0CF !important; }

.modal-close {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #A6B0CF !important;
}

.modal-close:hover {
  background: #6D5EF8 !important;
  color: #fff !important;
}

/* ── SUCCESS MODAL ── */
.success-modal-content {
  background: #0E1525 !important;
  border: 1px solid rgba(109,94,248,0.3) !important;
}

.success-modal-content h3 { color: #FFFFFF !important; }
.success-modal-content p { color: #A6B0CF !important; }

/* ── SECTION LABELS ── */
.workflow-label, .ecosystem-label, .small-label {
  color: #6D5EF8 !important;
}

/* ── HERO SECTION ── */
.hero { position: relative; z-index: 1; }
.hero-content h1 { color: #FFFFFF !important; }

/* ── PREMIUM SERVICES PAGE ── */
.premium-header {
  background: #070B14 !important;
}

.ecosystem-section {
  background: #070B14 !important;
}

.mini-stacked-card {
  background: rgba(20, 28, 48, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.mini-stacked-card h4 { color: #FFFFFF !important; }
.mini-stacked-card p { color: #A6B0CF !important; }

.mini-stacked-card:hover {
  border-color: rgba(109,94,248,0.4) !important;
  background: rgba(109,94,248,0.08) !important;
}

.ecosystem-title { color: #FFFFFF !important; }
.ecosystem-text { color: #A6B0CF !important; }

/* ── TIMELINE ── */
.workflow-timeline { background: #0E1525 !important; }
.timeline-title { color: #FFFFFF !important; }
.step-node { background: rgba(109,94,248,0.15) !important; border-color: rgba(109,94,248,0.4) !important; color: #6D5EF8 !important; }
.step-content h4 { color: #FFFFFF !important; }
.step-content p { color: #A6B0CF !important; }

/* ── METRICS STRIP ── */
.metrics-strip { background: rgba(14,21,37,0.5) !important; border-top: 1px solid rgba(255,255,255,0.06) !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
.metric-item h2 { color: #6D5EF8 !important; }
.metric-item p { color: #A6B0CF !important; }
.metric-divider { background: rgba(255,255,255,0.08) !important; }

/* ── IMMERSIVE MODAL ── */
.immersive-modal-content {
  background: #0E1525 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}

/* ── FOOTER OVERRIDE ── */
.modern-footer {
  background: linear-gradient(180deg, #0E1525 0%, #060A12 100%) !important;
  border-top: none !important;
  position: relative;
  padding-top: 5rem !important; /* Reduced from 8rem for tighter spacing */
}

/* Footer Top Blend */
.modern-footer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 250px; /* Reduced deep blend for tighter layout */
  background: linear-gradient(to bottom, var(--bg-body) 0%, transparent 100%);
  pointer-events: none;
  z-index: 5;
}

.modern-footer::before {
  display: none;
}

.footer-brand h2 { color: #FFFFFF !important; }
.footer-brand p { color: #6E7891 !important; }
.modern-footer h3 { color: #FFFFFF !important; }
.footer-links li, .footer-contact li, .footer-focus li { color: #6E7891 !important; }
.footer-links a, .footer-contact a { color: #6E7891 !important; }
.footer-links a:hover, .footer-contact a:hover { color: #FFFFFF !important; }
.footer-contact i { color: #6D5EF8 !important; }
.footer-bottom { background: rgba(0,0,0,0.4) !important; border-top: 1px solid rgba(255,255,255,0.05) !important; color: #6E7891 !important; }
.footer-copyright { color: #6E7891 !important; }
.footer-legal a { color: #6E7891 !important; }
.footer-legal a:hover { color: #FFFFFF !important; }

/* ── LEADERSHIP SECTION ── */
.leadership-section h2 { color: #FFFFFF !important; }

/* ── TESTIMONIALS ── */
.testimonials-page .glass-panel:not(.navbar), .reviews-page .glass-panel:not(.navbar) {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* ── SCROLL ANIMATIONS ── */
.hidden-element {
  opacity: 0;
  transform: translateY(30px);
}

.animate-on-scroll {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ── GLOW ANIMATIONS ── */
@keyframes subtleGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(109,94,248,0.1); }
  50% { box-shadow: 0 0 40px rgba(109,94,248,0.2), 0 0 80px rgba(109,94,248,0.05); }
}

/* All page sections inherit dark background */
/* ── SECTION BLENDING & ATMOSPHERIC CONTINUITY ── */
section {
  position: relative;
  z-index: 1;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4rem 0 !important; /* Reduced from 10rem for tighter spacing */
  transition: opacity 0.6s ease;
}

.workflow-section, .why-carousel-section {
  padding: 0 !important; /* Pinned sections handle their own internal centering */
}

/* Atmospheric Fade Overlays to soften section boundaries */
section::before, 
section::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 10rem;
  pointer-events: none;
  z-index: 5;
}

/* Top Transition: Fade into the section */
section::before {
  top: 0;
  background: linear-gradient(to bottom, 
    #070B14 0%, 
    rgba(7, 11, 20, 0.9) 20%,
    transparent 100%
  );
}

/* Bottom Transition: Fade out of the section */
section::after {
  bottom: 0;
  background: linear-gradient(to top, 
    #070B14 0%, 
    rgba(7, 11, 20, 0.9) 20%,
    transparent 100%
  );
}

/* Disable top fade for hero section to maintain header/nav clarity */
#hero::before {
  display: none;
}

/* Hero section specific padding - top should respect nav, bottom should blend */
#hero {
  padding-top: 180px !important;
  padding-bottom: 8rem !important;
}

/* Ensure these overlays don't cover interactive content */
.container, 
.workflow-pin-target, 
.why-carousel-pin {
  position: relative;
  z-index: 20;
}

.navbar {
  position: fixed;
  z-index: 9999;
}

/* Subtle depth glows for background continuity */
.workflow-section, .why-carousel-section {
  overflow: visible !important; /* Allow glows to bleed out slightly */
}


/* ── CONTACT INFO BOXES ── */
body.contact-page div[style*="background: rgba(255,255,255,0.05)"] {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* ── EXPERTISE SECTION ── */
#expertise { background: transparent; }

/* About page specific */
body.about-page section { background: transparent !important; }

/* ── RESPONSIVE ── */