/* ===========================
   Home Page CSS
   =========================== */

/* Hero */
.hero {
  position: relative;
  min-height: calc(100vh - var(--nav-height));
  display: flex; align-items: center;
  overflow: hidden;
  padding: 4rem 2rem;
}

.hero-inner {
  max-width: 1200px; margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: center;
  position: relative; z-index: 1;
}

.hero-badge {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: rgba(22,72,204,0.1); border: 1px solid rgba(22,72,204,0.25);
  color: var(--blue-accent); font-size: 0.78rem; font-weight: 700;
  padding: 0.4rem 1rem; border-radius: 100px; margin-bottom: 1.5rem;
  letter-spacing: 0.04em;
}

.badge-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--electric);
  box-shadow: 0 0 8px var(--electric);
  animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:0.5; transform:scale(0.7); }
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5.5vw, 4.5rem);
  font-weight: 900; line-height: 1.08;
  letter-spacing: -0.03em; margin-bottom: 1.25rem;
}

.text-gradient {
  background: linear-gradient(135deg, #4f86ff 0%, #00cfff 50%, #4f86ff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: shimmerText 4s linear infinite;
}
@keyframes shimmerText {
  from { background-position: 0% center; }
  to { background-position: 200% center; }
}

.hero-desc {
  color: var(--white-60); font-size: 1.1rem; line-height: 1.75;
  max-width: 480px; margin-bottom: 2rem;
}

.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; }

.hero-stats { display: flex; align-items: center; gap: 2rem; }
.stat { display: flex; flex-direction: column; }
.stat strong {
  font-family: var(--font-display); font-size: 2.2rem; font-weight: 900;
  color: var(--electric); line-height: 1; letter-spacing: -0.02em;
}
.stat span { font-size: 0.78rem; color: var(--white-60); margin-top: 0.25rem; font-weight: 500; }
.stat-divider { width: 1px; height: 40px; background: var(--white-10); }

/* Hero Visual */
.hero-visual { display: flex; justify-content: center; align-items: center; }

.hero-card-stack { position: relative; width: 340px; height: 320px; }

.hero-card {
  position: absolute;
  display: flex; align-items: center; gap: 1rem;
  padding: 1.2rem 1.5rem;
  background: rgba(6, 10, 20, 0.85);
  border: 1px solid rgba(0,207,255,0.15);
  border-radius: 16px; backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
  width: 280px;
}

.hero-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,207,255,0.25), transparent);
}

.card-1 { top: 0; left: 0; animation: floatCard 9s ease-in-out infinite; }
.card-2 { top: 108px; right: 0; animation: floatCard 9s ease-in-out infinite 2.5s; }
.card-3 { bottom: 0; left: 24px; animation: floatCard 9s ease-in-out infinite 5s; }

@keyframes floatCard {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.hc-icon {
  font-size: 1.6rem; min-width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(22,72,204,0.18); border-radius: 10px; flex-shrink: 0;
}
.hc-text strong { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.15rem; }
.hc-text span { font-size: 0.77rem; color: var(--white-60); }

/* ===========================
   Ticker / Marquee strip
   =========================== */
.ticker-strip {
  border-top: 1px solid var(--white-5);
  border-bottom: 1px solid var(--white-5);
  background: rgba(22,72,204,0.04);
  padding: 1rem 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.ticker-track {
  display: flex; gap: 3rem; width: max-content;
  animation: marquee 22s linear infinite;
}

.ticker-item {
  display: flex; align-items: center; gap: 0.75rem;
  font-family: var(--font-display); font-size: 0.95rem;
  font-weight: 700; color: var(--white-40);
  white-space: nowrap; letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ticker-item span { color: var(--electric); font-size: 1rem; }

/* ===========================
   Services Grid
   =========================== */
.services-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }

.service-card {
  display: flex; flex-direction: column; gap: 0.75rem;
  cursor: pointer; text-decoration: none; color: inherit;
}
.sc-icon {
  font-size: 1.9rem; width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(22,72,204,0.1); border-radius: 14px; margin-bottom: 0.5rem;
  transition: var(--transition);
}
.service-card:hover .sc-icon { background: rgba(0,207,255,0.12); transform: scale(1.08); }
.service-card h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; }
.service-card p { color: var(--white-60); font-size: 0.85rem; line-height: 1.6; flex: 1; }
.sc-link { color: var(--electric); font-size: 0.82rem; font-weight: 700; margin-top: auto; letter-spacing: 0.02em; }

/* ===========================
   About Teaser
   =========================== */
.about-teaser { background: rgba(22,72,204,0.03); border-top: 1px solid var(--white-5); border-bottom: 1px solid var(--white-5); }
.about-teaser-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }

.at-avatar { position: relative; width: 200px; height: 200px; margin: 0 auto; }
.avatar-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(0,207,255,0.2);
  animation: spin-slow 20s linear infinite;
}
.ring-1 { inset: 0; }
.ring-2 { inset: -22px; animation-duration: 32s; animation-direction: reverse; border-color: rgba(22,72,204,0.2); }
.avatar-placeholder {
  position: absolute; inset: 14px; border-radius: 50%;
  background: var(--gradient-electric);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 2.8rem; font-weight: 900;
  letter-spacing: 0.02em;
  box-shadow: 0 0 50px rgba(0,207,255,0.35);
  animation: pulseGlow 3s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%,100% { box-shadow: 0 0 30px rgba(0,207,255,0.3); }
  50% { box-shadow: 0 0 60px rgba(0,207,255,0.55); }
}

.at-info-badge {
  background: var(--white-5); border: 1px solid var(--white-10);
  border-radius: 14px; padding: 1rem 1.5rem; text-align: center; margin-top: 1.5rem;
}
.at-info-badge strong { display: block; font-weight: 700; margin-bottom: 0.25rem; font-size: 0.95rem; }
.at-info-badge span { font-size: 0.8rem; color: var(--electric); font-weight: 600; }

/* ===========================
   Clients Marquee
   =========================== */
.clients-marquee {
  overflow: hidden; padding: 2.5rem 0;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.marquee-track { display: flex; gap: 4rem; animation: marquee 25s linear infinite; width: max-content; }
.marquee-track span {
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 800;
  color: var(--white-20); white-space: nowrap; letter-spacing: 0.05em;
  text-transform: uppercase; transition: color 0.3s;
}
.marquee-track span:hover { color: var(--electric); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ===========================
   Process Steps
   =========================== */
.process-steps { display: flex; align-items: stretch; gap: 1rem; margin-top: 3rem; }
.process-step {
  flex: 1; background: var(--white-5); border: 1px solid var(--white-10);
  border-radius: var(--border-radius); padding: 1.75rem; transition: var(--transition); position: relative;
}
.process-step:hover { border-color: rgba(0,207,255,0.25); transform: translateY(-4px); }
.ps-number {
  font-family: var(--font-display); font-size: 3.5rem; font-weight: 900;
  color: rgba(22,72,204,0.18); line-height: 1; margin-bottom: 1rem; letter-spacing: -0.02em;
}
.ps-content h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; margin-bottom: 0.5rem; }
.ps-content p { color: var(--white-60); font-size: 0.85rem; line-height: 1.6; }
.process-arrow { color: var(--white-20); font-size: 1.5rem; margin-top: 2.5rem; flex-shrink: 0; }

/* ===========================
   Why Us stats row
   =========================== */
.stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem; margin: 3rem 0;
}
.stat-box {
  background: var(--white-5); border: 1px solid var(--white-10);
  border-radius: var(--border-radius); padding: 2rem 1.5rem; text-align: center;
  transition: var(--transition); position: relative; overflow: hidden;
}
.stat-box::before {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 60%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--electric), transparent);
  opacity: 0; transition: opacity 0.3s;
}
.stat-box:hover { border-color: rgba(0,207,255,0.2); transform: translateY(-4px); }
.stat-box:hover::before { opacity: 1; }
.stat-box-num {
  font-family: var(--font-display); font-size: 2.8rem; font-weight: 900;
  background: linear-gradient(135deg, #4f86ff, #00cfff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1; margin-bottom: 0.5rem; letter-spacing: -0.02em;
}
.stat-box-label { color: var(--white-60); font-size: 0.85rem; font-weight: 600; }

/* ===========================
   CTA Banner
   =========================== */
.cta-banner { padding: 4rem 0; }
.cta-inner {
  background: linear-gradient(135deg, rgba(9,20,34,0.9), rgba(6,9,15,0.9));
  border: 1px solid rgba(0,207,255,0.15); border-radius: var(--border-radius-lg);
  padding: 4rem; display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; position: relative; overflow: hidden;
}
.cta-inner::before {
  content: ''; position: absolute; top: -60%; right: -10%;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(22,72,204,0.15), transparent 70%);
  pointer-events: none;
}
.cta-btns { display: flex; gap: 1rem; flex-shrink: 0; flex-wrap: wrap; }

/* ===========================
   Responsive
   =========================== */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2,1fr); }
  .process-steps { flex-wrap: wrap; }
  .process-arrow { display: none; }
  .process-step { min-width: calc(50% - 0.5rem); }
  .stats-row { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 768px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; gap: 2rem; }
  .hero-visual { display: none; }
  .hero-btns { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-badge { margin: 0 auto 1.5rem; }
  .about-teaser-inner { grid-template-columns: 1fr; }
  .at-visual { display: none; }
  .cta-inner { flex-direction: column; text-align: center; }
  .cta-btns { justify-content: center; width: 100%; }
}

@media (max-width: 600px) {
  .services-grid { grid-template-columns: 1fr; }
  .process-step { min-width: 100%; }
  .stats-row { grid-template-columns: 1fr 1fr; }
}

/* Team mini cards */
.team-cards-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:2.5rem; }
.team-mini-card { display:flex; align-items:flex-start; gap:1.5rem; }
.tmc-avatar {
  width:70px; height:70px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:1.4rem; font-weight:900; color:#fff;
  box-shadow:0 0 30px rgba(22,72,204,0.35);
}
.tmc-info { flex:1; }
.tmc-info strong { display:block; font-family:var(--font-display); font-size:1.1rem; font-weight:800; margin-bottom:0.2rem; }
.tmc-info span { display:block; color:var(--electric); font-size:0.75rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:0.6rem; }
.tmc-info p { color:var(--white-60); font-size:0.85rem; line-height:1.6; margin-bottom:0.75rem; }
.tmc-link { color:var(--blue-accent); font-size:0.82rem; font-weight:700; text-decoration:none; transition:color 0.2s; }
.tmc-link:hover { color:var(--electric); }
@media(max-width:640px){ .team-cards-grid{grid-template-columns:1fr;} }