/* Codensolutions — dark enterprise theme */

body { -webkit-font-smoothing: antialiased; }

/* ---------- Navbar ---------- */
#nav { background: transparent; border-bottom: 1px solid rgba(255,255,255,.08); }
#nav.scrolled {
  background: rgba(10,11,26,.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.8);
}

/* ---------- 3D Hero ---------- */
.hero-3d-wrap {
  position: relative;
  min-height: 60vh;
  overflow: hidden;
  background: linear-gradient(180deg, #05060f 0%, #070820 40%, #05060f 100%);
}

/* Three.js canvas */
.hero-3d-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Overlay gradients for depth */
.hero-3d-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 20% 30%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(800px 500px at 75% 70%, rgba(37,99,235,.15), transparent 55%);
}
.hero-3d-wrap::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 200px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to top, #05060f, transparent);
}

/* Content layer */
.hero-3d-content {
  position: relative;
  z-index: 10;
}

/* ── Animated gradient text ── */
.gradient-text {
  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 30%, #34d399 60%, #60a5fa 100%);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 6s ease-in-out infinite;
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ── Subtitle glow line ── */
.glow-line {
  height: 2px;
  width: 60px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #3b82f6, #7c3aed);
  box-shadow: 0 0 12px rgba(59,130,246,.6), 0 0 40px rgba(124,58,237,.3);
}

/* ── Enhanced glass panel ── */
.glass-panel-3d {
  border-radius: 24px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(10,11,26,.65);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow:
    0 50px 100px -40px rgba(0,0,0,.9),
    0 0 80px -20px rgba(59,130,246,.15),
    inset 0 1px 0 rgba(255,255,255,.1);
  animation: panelFloat 8s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}
.glass-panel-3d::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 24px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(59,130,246,.3), transparent 40%, rgba(124,58,237,.2), transparent 70%, rgba(16,185,129,.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
@keyframes panelFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ── Glow chip ── */
.glow-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 16px;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(10,11,26,.8);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 50px -15px rgba(0,0,0,.8);
  position: relative;
  overflow: hidden;
}
.glow-chip::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(59,130,246,.1), transparent 30%);
  animation: chipRotate 6s linear infinite;
  pointer-events: none;
}
@keyframes chipRotate { to { transform: rotate(360deg); } }

/* ── Floating badge ── */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px 6px 8px;
  border-radius: 9999px;
  border: 1px solid rgba(59,130,246,.3);
  background: rgba(59,130,246,.08);
  backdrop-filter: blur(8px);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #60a5fa;
}
.hero-badge .dot {
  width: 8px; height: 8px;
  border-radius: 9999px;
  background: #3b82f6;
  box-shadow: 0 0 8px rgba(59,130,246,.8);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .6; transform: scale(.8); }
}

/* ── CTA button glow ── */
.cta-glow {
  position: relative;
  overflow: hidden;
  transition: all .3s ease;
}
.cta-glow::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, #3b82f6, #7c3aed, #10b981);
  z-index: -1;
  opacity: 0;
  transition: opacity .3s;
}
.cta-glow:hover::before { opacity: 1; }
.cta-glow:hover {
  box-shadow: 0 0 30px rgba(59,130,246,.4), 0 0 60px rgba(124,58,237,.2);
}

/* ── Floating particles (CSS backup) ── */
.particles { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index: 2; }
.particles::before, .particles::after {
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(147,197,253,.8), transparent),
    radial-gradient(1.5px 1.5px at 65% 20%, rgba(196,181,253,.7), transparent),
    radial-gradient(2px 2px at 80% 60%, rgba(147,197,253,.6), transparent),
    radial-gradient(1.5px 1.5px at 40% 75%, rgba(196,181,253,.6), transparent),
    radial-gradient(1.5px 1.5px at 55% 50%, rgba(255,255,255,.5), transparent),
    radial-gradient(2px 2px at 88% 35%, rgba(147,197,253,.7), transparent);
  animation: drift 16s linear infinite;
}
.particles::after { animation-duration: 26s; animation-direction: reverse; opacity:.6; }
@keyframes drift { from{transform:translateY(0)} to{transform:translateY(-40px)} }

/* bright flare */
.flare {
  position: absolute; right: 18%; top: 24%;
  width: 10px; height: 10px; border-radius: 9999px; background: #fff;
  box-shadow: 0 0 8px 4px rgba(233,213,255,.9), 0 0 40px 16px rgba(139,92,246,.55), 0 0 120px 60px rgba(59,130,246,.25);
  animation: twinkle 3.5s ease-in-out infinite; pointer-events: none;
  z-index: 4;
}
@keyframes twinkle { 0%,100%{opacity:.7;transform:scale(1)} 50%{opacity:1;transform:scale(1.25)} }

/* ---------- Hero carousel slides ---------- */
.hero-slides { position: relative; }
.hero-slide { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.hero-slide.is-active { position: relative; opacity: 1; visibility: visible; transform: translateY(0); }

#heroDots button { width: 30px; height: 3px; border-radius: 9999px; background: rgba(255,255,255,.25); transition: background .3s, width .3s; }
#heroDots button.active { background: #fff; width: 46px; }

/* ---------- Case study / blog gradient placeholders ---------- */
.ph-1 { background: linear-gradient(135deg,#1d4ed8,#60a5fa); }
.ph-2 { background: linear-gradient(135deg,#059669,#34d399); }
.ph-3 { background: linear-gradient(135deg,#7c3aed,#a78bfa); }

.stat-num { font-variant-numeric: tabular-nums; }

/* ---------- Interactive 3D hero scene (CSS tilt for glass panel) ---------- */
.hero-scene { position: relative; perspective: 1400px; perspective-origin: 50% 40%; min-height: 340px; }
.hero-stage {
  position: relative; width: 100%; min-height: 340px;
  transform-style: preserve-3d;
  transform: rotateX(var(--ry, 6deg)) rotateY(var(--rx, -14deg));
  transition: transform .25s ease-out;
}
.layer { position: absolute; transform-style: preserve-3d; }
.layer-main { top: 4%; left: 2%; right: 2%; transform: translateZ(0); }

.chip {
  display: flex; align-items: center; gap: 9px;
  border-radius: 14px; padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(17,19,39,.92);
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.8);
  white-space: nowrap;
}
.layer-f1 { top: -6%;  right: -4%; transform: translateZ(90px);  animation: bob 6s ease-in-out infinite; }
.layer-f2 { bottom: 2%; left: -6%; transform: translateZ(110px); animation: bob 6s ease-in-out infinite -3s; }
@keyframes bob { 0%,100%{transform:translateZ(var(--z,90px)) translateY(0)} 50%{transform:translateZ(var(--z,90px)) translateY(-10px)} }
.layer-f1 { --z: 90px; } .layer-f2 { --z: 110px; }

.cube { height: 34px; width: 34px; border-radius: 9px; background: linear-gradient(135deg,#3b82f6,#1e40af); box-shadow: 0 16px 30px -10px rgba(59,130,246,.7); }
.cube-accent { background: linear-gradient(135deg,#10b981,#059669); box-shadow: 0 16px 30px -10px rgba(16,185,129,.7); }
.layer-cube1 { top: 12%; left: -8%; transform: translateZ(150px); animation: spin3d 9s linear infinite; }
.layer-cube2 { bottom: 14%; right: -2%; transform: translateZ(140px); animation: spin3d 12s linear infinite reverse; }
@keyframes spin3d { from{transform:translateZ(145px) rotateX(0) rotateY(0)} to{transform:translateZ(145px) rotateX(360deg) rotateY(360deg)} }

.chart-bar { transform-origin: bottom; animation: grow 2.4s ease-in-out infinite alternate; }
.chart-bar:nth-child(2){animation-delay:.1s} .chart-bar:nth-child(3){animation-delay:.2s}
.chart-bar:nth-child(4){animation-delay:.3s} .chart-bar:nth-child(5){animation-delay:.4s} .chart-bar:nth-child(6){animation-delay:.5s}
@keyframes grow { from{transform:scaleY(.7)} to{transform:scaleY(1)} }

/* ---------- Scroll indicator ---------- */
.scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: scrollBounce 2.5s ease-in-out infinite;
}
.scroll-indicator .mouse {
  width: 22px; height: 34px;
  border-radius: 11px;
  border: 2px solid rgba(255,255,255,.3);
  position: relative;
}
.scroll-indicator .mouse::after {
  content: "";
  position: absolute;
  top: 6px; left: 50%;
  width: 3px; height: 8px;
  margin-left: -1.5px;
  border-radius: 9999px;
  background: #60a5fa;
  animation: scrollWheel 2s ease-in-out infinite;
}
@keyframes scrollBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }
@keyframes scrollWheel { 0%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(10px)} }

@media (prefers-reduced-motion: reduce) {
  .glass-panel-3d, .glow-chip, .hero-badge .dot,
  .flare, .particles::before, .particles::after,
  .chart-bar, .layer-f1, .layer-f2, .layer-cube1, .layer-cube2,
  .scroll-indicator, .scroll-indicator .mouse::after { animation: none; }
  .gradient-text { animation: none; background-position: 0% 50%; }
}
@media (max-width: 640px) {
  .hero-3d-wrap { min-height: 90vh; }
}