/* ============================================
   CLOUDBYTE GROUP — VISUAL UPGRADE v12.0
   Next-level aesthetics & micro-interactions
   ============================================ */

/* ----------------------------------------
   0. CSS CUSTOM PROPERTIES FOR ANIMATIONS
   ---------------------------------------- */
@property --aurora-1 {
  syntax: '<color>';
  inherits: false;
  initial-value: #1a3a2a;
}
@property --aurora-2 {
  syntax: '<color>';
  inherits: false;
  initial-value: #2a2a1a;
}
@property --aurora-3 {
  syntax: '<color>';
  inherits: false;
  initial-value: #1a2a3a;
}
@property --glow-x {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 50%;
}
@property --glow-y {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 50%;
}

/* ----------------------------------------
   1. FOUNDATION — Rich Dark Background
   ---------------------------------------- */

/* Replace flat #000 with rich near-black */
body {
  background: #060608 !important;
}

/* Noise grain overlay for tactile depth */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* Override page-wrapper background */
.page-wrapper > div[style*="background:#000"],
.page-wrapper > div[style*="background: #000"] {
  background: #060608 !important;
}

/* ----------------------------------------
   2. AURORA HERO BACKGROUNDS
   ---------------------------------------- */

/* Shared aurora container — applied to each page's hero canvas area */
.page-wrapper > div > div:first-child {
  position: relative;
}

/* Aurora gradient orbs behind hero sections */
.aurora-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.aurora-bg::before,
.aurora-bg::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.4;
  animation: aurora-drift 20s ease-in-out infinite alternate;
}

.aurora-bg::before {
  width: 60vw;
  height: 60vh;
  top: -20%;
  right: -15%;
  background: radial-gradient(ellipse, var(--aurora-1), transparent 70%);
  animation: aurora-shift-1 12s ease-in-out infinite alternate;
}

.aurora-bg::after {
  width: 50vw;
  height: 50vh;
  bottom: -10%;
  left: -10%;
  background: radial-gradient(ellipse, var(--aurora-2), transparent 70%);
  animation: aurora-shift-2 15s ease-in-out infinite alternate;
}

/* Third orb via extra element */
.aurora-bg .aurora-orb-3 {
  position: absolute;
  width: 40vw;
  height: 40vh;
  top: 30%;
  left: 30%;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.25;
  background: radial-gradient(ellipse, var(--aurora-3), transparent 70%);
  animation: aurora-shift-3 18s ease-in-out infinite alternate;
}

@keyframes aurora-shift-1 {
  0%   { --aurora-1: #1a3a2a; transform: translate(0, 0) scale(1); }
  33%  { --aurora-1: #2a3a1a; }
  66%  { --aurora-1: #1a2a3a; }
  100% { --aurora-1: #2a1a3a; transform: translate(40px, -30px) scale(1.15); }
}

@keyframes aurora-shift-2 {
  0%   { --aurora-2: #2a2a1a; transform: translate(0, 0) scale(1); }
  33%  { --aurora-2: #1a3a2a; }
  66%  { --aurora-2: #3a2a1a; }
  100% { --aurora-2: #1a2a2a; transform: translate(-30px, 20px) scale(1.1); }
}

@keyframes aurora-shift-3 {
  0%   { --aurora-3: #1a2a3a; transform: translate(0, 0); }
  50%  { --aurora-3: #2a1a2a; transform: translate(20px, 15px); }
  100% { --aurora-3: #1a3a2a; transform: translate(-10px, -20px); }
}

/* ----------------------------------------
   3. NAVIGATION POLISH
   ---------------------------------------- */

/* Stronger glass effect on nav */
#__next > nav {
  background: rgba(6, 6, 8, 0.7) !important;
  backdrop-filter: blur(40px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(40px) saturate(1.6) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  transition: background 0.3s, border-color 0.3s;
}

/* Nav link hover — subtle underline glow */
.cbg-desktop-nav a,
.cbg-desktop-nav span {
  position: relative;
  transition: color 0.3s !important;
}

.cbg-desktop-nav a::after,
.cbg-desktop-nav > div > span::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 0;
  height: 1px;
  background: rgba(107, 143, 74, 0.6);
  transition: width 0.3s, left 0.3s;
}

.cbg-desktop-nav a:hover::after,
.cbg-desktop-nav > div:hover > span::after {
  width: 60%;
  left: 20%;
}

/* Glowing "Let's Talk" CTA button in nav */
.cbg-desktop-nav > a[href="/contact"] {
  background: rgba(107, 143, 74, 0.12) !important;
  border: 1px solid rgba(107, 143, 74, 0.25) !important;
  color: #fff !important;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cbg-desktop-nav > a[href="/contact"]:hover {
  background: rgba(107, 143, 74, 0.2) !important;
  border-color: rgba(107, 143, 74, 0.45) !important;
  box-shadow: 0 0 20px rgba(107, 143, 74, 0.15), inset 0 0 20px rgba(107, 143, 74, 0.05);
  transform: translateY(-1px);
}

/* Dropdown menus — elevated glass */
.cbg-desktop-nav > div > div[style*="position:absolute"],
.cbg-desktop-nav > div > div[style*="position: absolute"] {
  backdrop-filter: blur(32px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5) !important;
}

/* ----------------------------------------
   4. TYPOGRAPHY ENHANCEMENTS
   ---------------------------------------- */

/* Hero titles — richer white */
.ht {
  color: #f0ede8 !important;
  text-shadow: 0 0 80px rgba(244, 241, 235, 0.05);
}

/* Emphasized words in hero (italic bold) — olive gradient */
.ht em, .ht i,
.ht span[style*="italic"],
.ht .hw[style*="italic"] {
  background: linear-gradient(135deg, #8fa86b, #c4d4a0) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Section numbers [01]-[08] — accent colored */
.page-wrapper div[style*="font-family:var(--mono)"],
.page-wrapper span[style*="JetBrains Mono"] {
  color: rgba(107, 143, 74, 0.5) !important;
}

/* Section labels — brighter olive */
.page-wrapper div[style*="letter-spacing:0.2em"],
.page-wrapper div[style*="letter-spacing: 0.2em"] {
  color: rgba(107, 143, 74, 0.7) !important;
}

/* Subtext on dark sections — warmer, more readable */
.page-wrapper div[style*="color:rgba(255,255,255,0.5)"],
.page-wrapper p[style*="color:rgba(255,255,255,0.5)"],
.page-wrapper div[style*="color: rgba(255,255,255,0.5)"] {
  color: rgba(244, 241, 235, 0.55) !important;
}

/* ----------------------------------------
   5. CARD SYSTEM OVERHAUL
   ---------------------------------------- */

/* --- Glass cards (dark) --- */
.glass {
  background: rgba(12, 12, 10, 0.6) !important;
  backdrop-filter: blur(32px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 8px !important;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative;
  overflow: hidden;
}

.glass:hover {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(16, 16, 12, 0.7) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

/* Mouse-tracking spotlight on glass cards */
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(107, 143, 74, 0.06),
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.4s;
  z-index: 1;
  pointer-events: none;
}

.glass:hover::before {
  opacity: 1;
}

/* --- Glass olive cards --- */
.glass-ol {
  background: rgba(88, 88, 64, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.glass-ol:hover {
  background: rgba(88, 88, 64, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

/* --- Glass light cards (cream sections) --- */
.glass-lt {
  background: rgba(244, 241, 235, 0.7) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 8px !important;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative;
  overflow: hidden;
}

.glass-lt:hover {
  background: rgba(244, 241, 235, 0.85) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

/* Mouse-tracking spotlight on light cards */
.glass-lt::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(107, 143, 74, 0.08),
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.4s;
  z-index: 1;
  pointer-events: none;
}

.glass-lt:hover::before {
  opacity: 1;
}

/* --- Guarantee cards --- */
.g-card.glass {
  border-radius: 8px !important;
}

.g-card.glass:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}

/* --- Service cards (home grid) --- */
.svc-card {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border-radius: 2px;
}

.svc-card:hover {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* --- Pillar cards --- */
.pillar {
  border-radius: 6px !important;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.pillar:hover {
  border-color: rgba(107, 143, 74, 0.2) !important;
  background: rgba(107, 143, 74, 0.04) !important;
  transform: translateY(-2px);
}

/* --- DIB cards (government) --- */
.dib-card {
  border-radius: 6px !important;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* --- Path cards (contact) --- */
.path-card {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.path-card:hover {
  transform: translateY(-2px);
}

/* --- Contrast cards (services) --- */
.contrast-card {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border-radius: 6px !important;
}

.contrast-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* --- Fit cards (about) --- */
.fit-card {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.fit-card:hover {
  transform: translateY(-2px);
}

/* --- Mid cards (getting-started) --- */
.mid-card {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mid-card:hover {
  transform: translateY(-2px);
}

/* ----------------------------------------
   6. CTA / BUTTON SYSTEM
   ---------------------------------------- */

/* CTA strip — top border glow */
.cta-s {
  border-top: 1px solid rgba(107, 143, 74, 0.15) !important;
  position: relative;
}

.cta-s::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(107, 143, 74, 0.3), transparent);
}

/* CTA buttons — glow on hover */
.cta-b {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative;
}

.cta-b:hover {
  background: rgba(107, 143, 74, 0.08) !important;
  color: #c4d4a0 !important;
}

/* Primary link-style CTAs within pages */
a[style*="color:#6b8f4a"],
a[style*="color: #6b8f4a"] {
  transition: all 0.3s !important;
  position: relative;
}

a[style*="color:#6b8f4a"]:hover,
a[style*="color: #6b8f4a"]:hover {
  text-shadow: 0 0 20px rgba(107, 143, 74, 0.3);
}

/* Standalone buttons / pill buttons */
.page-wrapper a[style*="border-radius:2px"],
.page-wrapper a[style*="border-radius: 2px"] {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.page-wrapper a[style*="border-radius:2px"]:hover,
.page-wrapper a[style*="border-radius: 2px"]:hover {
  box-shadow: 0 0 24px rgba(107, 143, 74, 0.12);
}

/* Credit / phase buttons */
.credit-btn,
.phase-btn {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.credit-btn:hover,
.phase-btn:hover {
  transform: translateY(-1px);
}

/* ----------------------------------------
   7. SCROLL REVEAL SYSTEM
   ---------------------------------------- */

/* Elements waiting to be revealed */
.sr {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Revealed state */
.sr.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for grid children */
.sr-stagger > .sr:nth-child(1) { transition-delay: 0s; }
.sr-stagger > .sr:nth-child(2) { transition-delay: 0.08s; }
.sr-stagger > .sr:nth-child(3) { transition-delay: 0.16s; }
.sr-stagger > .sr:nth-child(4) { transition-delay: 0.24s; }
.sr-stagger > .sr:nth-child(5) { transition-delay: 0.32s; }
.sr-stagger > .sr:nth-child(6) { transition-delay: 0.4s; }
.sr-stagger > .sr:nth-child(7) { transition-delay: 0.48s; }
.sr-stagger > .sr:nth-child(8) { transition-delay: 0.56s; }

/* ----------------------------------------
   8. EXPAND BAR ENHANCEMENTS
   ---------------------------------------- */

.expand-bar {
  border-radius: 6px !important;
  border: 1px solid rgba(107, 143, 74, 0.12) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.expand-bar:hover {
  border-color: rgba(107, 143, 74, 0.25) !important;
  background: rgba(107, 143, 74, 0.06) !important;
  transform: translateX(4px);
}

.expand-bar .eb-icon {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.expand-bar:hover .eb-icon {
  background: rgba(107, 143, 74, 0.2) !important;
  border-color: rgba(107, 143, 74, 0.35) !important;
  box-shadow: 0 0 12px rgba(107, 143, 74, 0.15);
}

/* ----------------------------------------
   9. CROSS-LINK BAR
   Injected via JS above footer
   ---------------------------------------- */

.cross-links {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 28px 40px;
  border-top: 1px solid rgba(107, 143, 74, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(107, 143, 74, 0.02);
}

.cl-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  margin-right: 8px;
  white-space: nowrap;
}

.cl-link {
  font-size: 12px;
  font-weight: 500;
  color: rgba(196, 212, 160, 0.7);
  text-decoration: none;
  padding: 6px 16px;
  border: 1px solid rgba(107, 143, 74, 0.15);
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.cl-link:hover {
  color: #c4d4a0;
  background: rgba(107, 143, 74, 0.1);
  border-color: rgba(107, 143, 74, 0.3);
  box-shadow: 0 0 16px rgba(107, 143, 74, 0.08);
}

@media (max-width: 768px) {
  .cross-links {
    flex-wrap: wrap;
    padding: 20px 24px;
    gap: 8px;
  }
  .cl-label {
    width: 100%;
    margin-bottom: 4px;
  }
}

/* ----------------------------------------
   10. FOOTER ELEVATION
   ---------------------------------------- */

/* Target footer container */
.page-wrapper > div > div:last-child > div:last-child,
footer,
div[style*="border-top:1px solid rgba(255,255,255,0.04)"] {
  border-top: 1px solid rgba(107, 143, 74, 0.1) !important;
  position: relative;
}

/* Gradient glow above footer */
.page-wrapper > div > div:last-child {
  position: relative;
}

/* Footer links — accent on hover */
.fl {
  transition: color 0.3s, transform 0.2s !important;
}

.fl:hover {
  color: rgba(196, 212, 160, 0.85) !important;
  transform: translateX(3px);
}

/* ----------------------------------------
   10. PLEDGE / GUARANTEE GRID ENHANCEMENTS
   ---------------------------------------- */

.pledge-grid > div {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border-radius: 6px;
}

.pledge-grid > div:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* ----------------------------------------
   11. PRICING CALCULATOR ENHANCEMENTS
   ---------------------------------------- */

/* Scale row hover */
.scale-row {
  transition: all 0.3s !important;
  border-radius: 4px;
}

.scale-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.scale-row.active {
  background: rgba(107, 143, 74, 0.06) !important;
  border-color: rgba(107, 143, 74, 0.2) !important;
}

/* Comparison columns */
.compare-cols > div {
  transition: all 0.4s !important;
}

.compare-cols > div:hover {
  transform: translateY(-2px);
}

/* ----------------------------------------
   12. TAG / BADGE PILLS
   ---------------------------------------- */

/* Tags like "OPEN OPERATIONS", "EVERYTHING INCLUDED" */
.page-wrapper div[style*="border:1px solid rgba(107,143,74"] {
  transition: all 0.3s !important;
}

.page-wrapper div[style*="border:1px solid rgba(107,143,74"]:hover {
  background: rgba(107, 143, 74, 0.1) !important;
}

/* Tech stack badges (why-cloudbyte) */
.page-wrapper div[style*="border:1px solid rgba(255,255,255,0.08)"][style*="padding:10px 20px"] {
  transition: all 0.3s !important;
  border-radius: 4px;
}

.page-wrapper div[style*="border:1px solid rgba(255,255,255,0.08)"][style*="padding:10px 20px"]:hover {
  border-color: rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.03);
}

/* ----------------------------------------
   13. FORM ENHANCEMENTS (Contact)
   ---------------------------------------- */

/* Input/textarea focus glow */
.page-wrapper input[type="text"]:focus,
.page-wrapper input[type="email"]:focus,
.page-wrapper textarea:focus,
.page-wrapper select:focus {
  outline: none !important;
  border-color: rgba(107, 143, 74, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(107, 143, 74, 0.1), 0 0 20px rgba(107, 143, 74, 0.05) !important;
}

/* Submit button enhancement */
.page-wrapper button[type="submit"] {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.page-wrapper button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 24px rgba(107, 143, 74, 0.2) !important;
}

/* ----------------------------------------
   14. SMOOTH SCROLL AND BASE TRANSITIONS
   ---------------------------------------- */

html {
  scroll-behavior: smooth;
}

/* All links get smooth transitions */
a {
  transition: color 0.3s, opacity 0.3s;
}

/* Selection color — branded */
::selection {
  background: rgba(107, 143, 74, 0.3) !important;
  color: #fff !important;
}

/* ----------------------------------------
   15. REDUCED MOTION RESPECT
   ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .sr {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .aurora-bg::before,
  .aurora-bg::after,
  .aurora-bg .aurora-orb-3 {
    animation: none !important;
  }

  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ----------------------------------------
   16. RESPONSIVE REFINEMENTS
   ---------------------------------------- */

@media (max-width: 900px) {
  /* Softer aurora on mobile (performance) */
  .aurora-bg::before,
  .aurora-bg::after {
    filter: blur(80px);
    opacity: 0.3;
  }

  .aurora-bg .aurora-orb-3 {
    display: none;
  }

  /* Disable mouse-tracking spotlight on touch */
  .glass::before,
  .glass-lt::before {
    display: none;
  }

  /* Reduce reveal distance on mobile */
  .sr {
    transform: translateY(20px);
  }
}