/* ========================================================
   Phoenix Consult — styles.css
======================================================== */

/* ---- Smooth scroll ---- */
html { scroll-behavior: smooth; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #1E3A8A; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #2563EB; }
::selection { background: #2563EB; color: #fff; }

/* ---- Navbar shadow on scroll ---- */
#navbar { transition: box-shadow .3s ease; }
#navbar.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,.4); }

/* ---- Nav underline hover ---- */
.nav-link { position: relative; }
.nav-link::after {
  content:''; position:absolute; bottom:-4px; left:0;
  width:0; height:2px; background:#3B82F6;
  transition: width .25s ease;
}
.nav-link:hover::after { width:100%; }

/* ---- Hamburger open ---- */
#menu-btn.open .ham:nth-child(1) { transform: translateY(8px) rotate(45deg); }
#menu-btn.open .ham:nth-child(2) { opacity:0; }
#menu-btn.open .ham:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---- Hero animated orbs ---- */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(37,99,235,.35) 0%, transparent 70%);
  top: -150px; right: -100px;
  animation: orbFloat 8s ease-in-out infinite alternate;
}
.orb-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(30,58,138,.4) 0%, transparent 70%);
  bottom: -100px; left: -100px;
  animation: orbFloat 10s ease-in-out infinite alternate-reverse;
}
.orb-3 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(59,130,246,.2) 0%, transparent 70%);
  top: 50%; right: -80px;
  transform: translateY(-50%);
}
@keyframes orbFloat {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(30px,20px) scale(1.1); }
}

/* ---- Grid overlay on hero ---- */
.grid-overlay {
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ---- Hero static blue logo ---- */
.hero-static-logo {
  height: 220px;
  width: auto;
  display: block;
}
@media (max-width: 640px) {
  .hero-static-logo { height: 160px; }
}

/* ---- Hero metallic phoenix centrepiece ---- */
.hero-metal-wrap {
  position: relative;
  width: 420px;
  height: 420px;
  max-width: 90vw;
  max-height: 90vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Outer ambient glow */
.hero-glow-ring {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(80,140,255,.30) 0%,
    rgba(37,99,235,.12) 45%,
    transparent 70%
  );
  animation: heroGlowPulse 3.5s ease-in-out infinite;
}
@keyframes heroGlowPulse {
  0%,100% { transform:scale(1);   opacity:.85; }
  50%      { transform:scale(1.12); opacity:1;  }
}

/* Soft chrome reflection ring */
.hero-chrome-band {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(160,200,255,.15);
  box-shadow:
    inset 0 0 40px rgba(100,160,255,.08),
    0 0 60px rgba(37,99,235,.12);
  animation: heroGlowPulse 3.5s ease-in-out infinite reverse;
}

/* The phoenix with full metallic/chrome treatment */
.hero-metal-phoenix {
  position: relative;
  z-index: 2;
  width: 380px;
  height: 380px;
  max-width: 88vw;
  max-height: 88vw;
  object-fit: contain;
  filter:
    grayscale(1)
    contrast(1.4)
    brightness(2.1)
    drop-shadow(0 0 40px rgba(130,190,255,.65))
    drop-shadow(0 0 12px rgba(220,235,255,.55))
    drop-shadow(0 4px 20px rgba(0,30,80,.6));
  animation: heroPhoenixFloat 6s ease-in-out infinite;
}
@keyframes heroPhoenixFloat {
  0%,100% { transform:translateY(0)     rotate(0deg)   scale(1);    }
  30%      { transform:translateY(-14px) rotate(.6deg)  scale(1.02); }
  70%      { transform:translateY(-7px)  rotate(-.4deg) scale(1.01); }
}

/* Diagonal shine sweep over the phoenix */
.hero-shine {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  border-radius: 50%;
  pointer-events: none;
}
.hero-shine::after {
  content:'';
  position:absolute;
  top:-50%; left:-70%;
  width:45%; height:200%;
  background: linear-gradient(
    110deg,
    transparent 20%,
    rgba(255,255,255,.28) 50%,
    transparent 80%
  );
  animation: heroShineSweep 5s ease-in-out infinite;
}
@keyframes heroShineSweep {
  0%   { transform:translateX(-100%); }
  55%  { transform:translateX(500%); }
  100% { transform:translateX(500%); }
}

/* ---- Hero text entrance ---- */
.hero-content { animation: fadeUp .9s .2s ease both; }
@keyframes fadeUp {
  from { opacity:0; transform:translateY(30px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ---- Hero pill badge ---- */
.pill-badge {
  background: rgba(37,99,235,.15);
  border: 1px solid rgba(59,130,246,.3);
  color: #93C5FD;
}

/* ---- Text gradient ---- */
.text-gradient {
  background: linear-gradient(135deg, #60A5FA, #3B82F6, #93C5FD);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- Scroll cue ---- */
.scroll-cue { animation: scrollBob 2s ease-in-out infinite; }
@keyframes scrollBob {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50%      { transform:translateX(-50%) translateY(6px); }
}

/* ---- Primary button ---- */
.btn-primary {
  background: linear-gradient(135deg, #2563EB, #1E3A8A);
  box-shadow: 0 8px 24px rgba(37,99,235,.4);
}
.btn-primary:hover { box-shadow: 0 12px 30px rgba(37,99,235,.5); }

/* ---- Section badge ---- */
.section-badge {
  display: inline-block;
  background: #EFF6FF;
  color: #2563EB;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .4rem 1rem;
  border-radius: 999px;
  border: 1px solid #BFDBFE;
}
.section-badge-light {
  display: inline-block;
  background: rgba(37,99,235,.2);
  color: #93C5FD;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .4rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(59,130,246,.3);
}

/* ---- Service cards ---- */
.service-card {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #E9EEFF;
  border-radius: 1.25rem;
  padding: 1.75rem;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(13,27,62,.1);
  border-color: #BFDBFE;
}
.service-icon-wrap {
  flex-shrink: 0;
  width: 52px; height: 52px;
  background: #EFF6FF;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
}

/* ---- Featured service card (full-width KI card) ---- */
.service-card-featured {
  background: linear-gradient(135deg, #F0F6FF 0%, #ffffff 100%);
  border-color: #BFDBFE;
  border-width: 1.5px;
}
.service-card-featured:hover {
  border-color: #2563EB;
  box-shadow: 0 20px 50px rgba(37,99,235,.13);
}

/* ---- KI feature grid items ---- */
.ki-feature {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  background: rgba(255,255,255,.8);
  border: 1px solid #E9EEFF;
  border-radius: .75rem;
  padding: .75rem .9rem;
  transition: background .2s, box-shadow .2s;
}
.ki-feature:hover {
  background: #fff;
  box-shadow: 0 4px 16px rgba(37,99,235,.08);
}

/* ---- Process steps ---- */
.process-num {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #BFDBFE;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  color: #1E3A8A;
  box-shadow: 0 4px 20px rgba(37,99,235,.12);
  transition: all .3s ease;
}
.process-step:hover .process-num {
  background: #2563EB;
  color: #fff;
  border-color: #2563EB;
  box-shadow: 0 8px 24px rgba(37,99,235,.4);
}

/* ---- Why cards ---- */
.why-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 1rem;
  padding: 1.25rem;
  transition: background .3s ease, transform .3s ease;
}
.why-card:hover {
  background: rgba(255,255,255,.1);
  transform: translateY(-4px);
}

/* ---- Tags (about section) ---- */
.tag {
  display: inline-block;
  background: #EFF6FF;
  color: #1E3A8A;
  font-size: .85rem;
  font-weight: 600;
  padding: .35rem .85rem;
  border-radius: 999px;
  border: 1px solid #BFDBFE;
}

/* ---- Contact info cards ---- */
.contact-info-card {
  display: flex; align-items: center; gap: 1rem;
  background: #fff;
  border: 1px solid #E9EEFF;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  transition: box-shadow .3s ease;
}
.contact-info-card:hover { box-shadow: 0 8px 24px rgba(13,27,62,.08); }
.contact-icon {
  width: 42px; height: 42px;
  background: #EFF6FF;
  border-radius: .75rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ---- Form inputs ---- */
.form-label {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: .4rem;
  letter-spacing: .02em;
}
.form-input {
  width: 100%;
  border: 1.5px solid #E5E7EB;
  border-radius: .75rem;
  padding: .75rem 1rem;
  font-size: 1rem;
  color: #111827;
  background: #F9FAFB;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  outline: none;
  font-family: inherit;
}
.form-input:focus {
  border-color: #2563EB;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.form-input::placeholder { color: #9CA3AF; }
.form-error {
  font-size: .75rem;
  color: #EF4444;
  margin-top: .3rem;
}
.form-input.error { border-color: #EF4444; }

/* ---- Stat items ---- */
.stat-item { transition: transform .3s ease; }
.stat-item:hover { transform: translateY(-4px); }

/* ---- Scroll-to-top ---- */
#scroll-top.show { display:flex !important; }

/* ---- Fade-up animation (scroll triggered) ---- */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================================
   METAL PHOENIX SECTION
======================================================== */

/* Scan-line texture overlay for that industrial metal feel */
.scanlines-overlay {
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(255,255,255,.012) 3px,
    rgba(255,255,255,.012) 4px
  );
  pointer-events: none;
}

/* The outer container — positions the glow, image, and shine */
.metal-phoenix-container {
  position: relative;
  width: 380px;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pulsing radial glow ring behind the phoenix */
.metal-glow-ring {
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(100,160,255,.18) 0%,
    rgba(37,99,235,.08)  40%,
    transparent          70%
  );
  animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse {
  0%,100% { transform: scale(1);   opacity:.8; }
  50%      { transform: scale(1.1); opacity:1;  }
}

/* The actual phoenix image — metallic treatment */
.metal-phoenix-img {
  position: relative;
  z-index: 2;
  width: 340px;
  height: 340px;
  object-fit: contain;
  /* Desaturate + boost contrast to turn the navy logo into a steel-chrome look */
  filter:
    grayscale(1)
    contrast(1.35)
    brightness(1.8)
    drop-shadow(0 0 24px rgba(120,180,255,.55))
    drop-shadow(0 0  8px rgba(200,220,255,.4));
  animation: metalFloat 5s ease-in-out infinite;
}
@keyframes metalFloat {
  0%,100% { transform: translateY(0)    rotate(0deg); }
  33%      { transform: translateY(-12px) rotate(.5deg); }
  66%      { transform: translateY(-6px)  rotate(-.4deg); }
}

/* Diagonal shine sweep across the phoenix */
.metal-shine-sweep {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}
.metal-shine-sweep::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,.22) 50%,
    transparent 70%
  );
  animation: shineSweep 4s ease-in-out infinite;
}
@keyframes shineSweep {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(400%); }
  100% { transform: translateX(400%); }
}

/* Tick/check items in metal section */
.metal-check {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(37,99,235,.25);
  border: 1px solid rgba(59,130,246,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  color: #93C5FD;
  margin-top: 1px;
}

/* Responsive: shrink container on mobile */
@media (max-width: 640px) {
  .metal-phoenix-container { width: 260px; height: 260px; }
  .metal-phoenix-img        { width: 230px; height: 230px; }
}