:root {
  /* === NABE BRAND COLORS === */
  --nabe-primary:      #0A3D62;   /* main dark blue */
  --nabe-secondary:    #4EC8EF;   /* light blue accent */
  --nabe-gradient:     linear-gradient(135deg, #0A3D62 0%, #4EC8EF 100%);
  --nabe-mono-black:   #1C2526;
  --nabe-bg:           #F8FAFC;
  --nabe-bg-alt:       #FFFFFF;
  --nabe-footer:       #003366;

  /* Standardized Transitions & Shadows */
  --nabe-transition:   all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  --nabe-shadow:       0 15px 40px rgba(10, 61, 98, 0.06);
  --nabe-shadow-hover: 0 25px 50px rgba(78, 200, 239, 0.15);

  /* Glassmorphism & Modern UI */
  --nabe-glass-bg:     rgba(255, 255, 255, 0.7);
  --nabe-glass-border: rgba(255, 255, 255, 0.2);
  --nabe-glass-blur:   blur(12px);

  /* Text */
  --nabe-text:         #4A5568;
  --nabe-text-light:   #FFFFFF;
  
  /* Overrides for existing theme variables */
  --tp-theme-primary: var(--nabe-primary);
  --tp-theme-secondary: var(--nabe-secondary);
  --tp-theme-dark: var(--nabe-mono-black);
  
  /* Bootstrap overrides */
  --bs-primary: var(--nabe-primary);
  --bs-secondary: var(--nabe-secondary);
}

.dark {
  --nabe-primary:      #4EC8EF;
  --nabe-text:         #E0F0FF;
}

/* --- Global Utility Classes for Extreme Makeover --- */

/* Gradient Text */
.nabe-gradient-text {
  background: var(--nabe-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

/* Glass Card — gentle default, component styles can override */
.nabe-glass-card {
  background: var(--nabe-glass-bg);
  backdrop-filter: var(--nabe-glass-blur);
  -webkit-backdrop-filter: var(--nabe-glass-blur);
  border: 1px solid var(--nabe-glass-border);
  box-shadow: var(--nabe-shadow);
  transition: var(--nabe-transition);
}

.nabe-glass-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--nabe-shadow-hover);
  border-color: rgba(78, 200, 239, 0.3);
}

/* Reveal Animation */
@keyframes nabeReveal {
  0% { opacity: 0; transform: translateY(40px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.nabe-reveal {
  opacity: 0;
}

.nabe-reveal.show {
  animation: nabeReveal 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards !important;
}

/* Background Texture */
.nabe-bg-pattern {
  position: relative;
}

.nabe-bg-pattern::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: radial-gradient(var(--nabe-secondary) 0.5px, transparent 0.5px);
  background-size: 20px 20px;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

/* --- Global Typography & Background Setup --- */
body {
    background-color: var(--nabe-bg);
    color: var(--nabe-text);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .tp-section-title {
    color: var(--nabe-primary);
    font-family: 'Unbounded', sans-serif !important;
    letter-spacing: -1px;
}

/* ── Primary CTA buttons (hero, main actions) ── */
.tp-btn, .tp-btn-primary, .btn-primary, .tm-hero-btn {
    background: var(--nabe-gradient);
    border: none;
    color: var(--nabe-text-light) !important;
    border-radius: 50px;
    transition: var(--nabe-transition);
}

.tp-btn:hover, .tp-btn-primary:hover, .btn-primary:hover, .tm-hero-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(10, 61, 98, 0.2);
    color: white !important;
}

/* ── Secondary / "All Services" style button ── */
.tp-btn-green {
    background: var(--nabe-primary, #0A3D62);
    border: none;
    color: var(--nabe-text-light) !important;
    border-radius: 50px;
    transition: var(--nabe-transition);
}

.tp-btn-green:hover {
    background: var(--nabe-secondary, #4EC8EF);
    color: #0A3D62 !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(78, 200, 239, 0.25);
}

/* ── ds-btn: no global override — styled per component ── */

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--nabe-primary);
}

/* Links */
a {
    color: var(--nabe-primary);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--nabe-secondary);
}

/* Accent Colors */
.text-primary, .brand-name {
    color: var(--nabe-primary) !important;
}

.text-secondary {
    color: var(--nabe-secondary) !important;
}

.bg-primary {
    background-color: var(--nabe-primary) !important;
}

.bg-secondary {
    background-color: var(--nabe-secondary) !important;
}

/* UI Elements */
/* Modern Magnetic Cursor */
#magic-cursor, .mouse-cursor {
    border: 2px solid var(--nabe-primary) !important;
    width: 45px !important;
    height: 45px !important;
    transition: width 0.3s, height 0.3s, background-color 0.3s, border-color 0.3s;
    mix-blend-mode: exclusion;
}
#ball, .cursor-inner {
    background-color: var(--nabe-secondary) !important;
    width: 8px !important;
    height: 8px !important;
}

/* Interactive Cursor States based on native hovers */
a:hover ~ #magic-cursor, button:hover ~ #magic-cursor,
.tp-btn:hover ~ #magic-cursor, .ds-btn:hover ~ #magic-cursor {
    width: 70px !important;
    height: 70px !important;
    background-color: rgba(78, 200, 239, 0.4) !important;
    border-color: transparent !important;
}

/* Modern Spinning Preloader */
#preloader, .preloader, .preloader-wrapper {
    background-color: var(--nabe-bg) !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preloader {
    width: 60px;
    height: 60px;
    background: var(--nabe-gradient);
    border-radius: 15px;
    animation: nabe-spin 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}

.preloader > span {
    display: none !important; /* Hide old generic spinners */
}

@keyframes nabe-spin {
    0% { transform: scale(0.5) rotate(0deg); border-radius: 15px; }
    50% { transform: scale(1.2) rotate(180deg); border-radius: 50%; opacity: 0.8; }
    100% { transform: scale(0.5) rotate(360deg); border-radius: 15px; }
}

.back-to-top-wrapper, .back-to-top-btn {
    background-color: var(--nabe-primary) !important;
    color: var(--nabe-text-light) !important;
    border-radius: 50px !important;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s ease;
}
.back-to-top-btn:hover {
    background-color: var(--nabe-secondary) !important;
    transform: translateY(-8px) scale(1.1);
}