/* ============================================================
   Indextier – Custom Styles
   Complements Tailwind CSS (cdn.tailwindcss.com)
   ============================================================ */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap');

/* ---------- CSS Variables ---------- */
:root {
  --primary:       #2563EB;
  --primary-dark:  #1D4ED8;
  --primary-light: #3B82F6;
  --navy:          #0F172A;
  --navy-light:    #1E293B;
  --accent:        #60A5FA;
  --text-muted:    #64748B;
  --border:        #E2E8F0;
  --radius:        0.75rem;
}

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

body {
  font-family: 'Inter', sans-serif;
  color: #1E293B;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ---------- Gradient Text ---------- */
.gradient-text {
  background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 50%, #2563EB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-white {
  background: linear-gradient(135deg, #FFFFFF 0%, #93C5FD 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------- Backgrounds ---------- */
.hero-bg {
  /* background-color is separate from background-image so .grid-pattern overlay cannot override it */
  background-color: #0F172A;
  position: relative;
  overflow: hidden;
}

/* Floating decorative particles — must be absolute so they don't push content */
.particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59,130,246,.18) 0%, rgba(37,99,235,.06) 60%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  animation: float 8s ease-in-out infinite;
}

.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 50%, rgba(37,99,235,.22) 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 80% 15%, rgba(59,130,246,.15) 0%, transparent 50%),
    radial-gradient(ellipse 50% 60% at 55% 85%, rgba(29,78,216,.12) 0%, transparent 50%),
    linear-gradient(135deg, rgba(15,23,42,.6) 0%, rgba(26,51,88,.5) 50%, rgba(15,23,42,.6) 100%);
  pointer-events: none;
  z-index: 0;
}

.section-dark {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
}

.section-blue {
  background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 50%, #1E40AF 100%);
}

/* Grid dot pattern overlay */
.grid-pattern {
  background-image:
    linear-gradient(rgba(59,130,246,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,.06) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ---------- Sticky Header ---------- */
#main-header {
  transition: background-color .3s ease, box-shadow .3s ease;
}
#main-header.scrolled {
  background-color: rgba(15,23,42,.97) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(0,0,0,.35);
}

/* ---------- Buttons ---------- */
.btn-primary {
  background: linear-gradient(135deg, #3B82F6, #2563EB);
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transition: left .5s ease;
}
.btn-primary:hover::before { left: 100%; }
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(37,99,235,.4);
}

.btn-outline {
  transition: background .25s, color .25s, transform .25s, box-shadow .25s;
}
.btn-outline:hover {
  background: rgba(59,130,246,.1);
  transform: translateY(-1px);
}

/* ---------- Cards ---------- */
.card-hover {
  transition: transform .3s ease, box-shadow .3s ease;
}
.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 48px rgba(37,99,235,.12);
}

.service-card {
  transition: border-color .3s, transform .3s, box-shadow .3s;
  border: 1px solid #E2E8F0;
}
.service-card:hover {
  border-color: #3B82F6;
  transform: translateY(-5px);
  box-shadow: 0 18px 42px rgba(37,99,235,.09);
}
.service-card:hover .service-icon {
  background: linear-gradient(135deg, #3B82F6, #2563EB);
  color: white;
}
.service-icon {
  transition: background .3s, color .3s;
}

/* ---------- Pricing Cards ---------- */
.pricing-card {
  transition: transform .3s, box-shadow .3s;
  border: 1px solid #E2E8F0;
}
.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(37,99,235,.12);
}
.pricing-card.featured {
  border: 2px solid #3B82F6;
  box-shadow: 0 0 0 4px rgba(59,130,246,.08);
}
.popular-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
}

/* ---------- Partner / Logo Slider ---------- */
.partner-slider-wrapper { overflow: hidden; }
#partner-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 0;
}

/* ---------- Testimonial Slider ---------- */
[data-slide] { transition: opacity .5s ease; }
.active-dot  { background-color: #2563EB !important; transform: scale(1.3); }
.inactive-dot{ background-color: #CBD5E1; }

/* ---------- FAQ Accordion ---------- */
[data-faq-content] { transition: max-height .35s ease, opacity .3s ease; }
.faq-open [data-faq-btn] { color: #2563EB; }

/* ---------- Pricing Toggle ---------- */
.active-toggle   { background-color: #2563EB !important; color: #fff !important; box-shadow: 0 2px 8px rgba(37,99,235,.3); }
.inactive-toggle { background-color: transparent; color: #64748B; }

/* ---------- Scroll Animations ---------- */
[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s ease, transform .65s ease;
}
[data-animate].animate-in { opacity: 1; transform: translateY(0); }
[data-animate="fade-left"]  { transform: translateX(-24px); }
[data-animate="fade-right"] { transform: translateX(24px); }
[data-animate="fade-left"].animate-in,
[data-animate="fade-right"].animate-in { transform: translateX(0); }
[data-animate="zoom"] { transform: scale(.95); }
[data-animate="zoom"].animate-in { transform: scale(1); }

/* Stagger delays */
[data-delay="1"] { transition-delay: .1s; }
[data-delay="2"] { transition-delay: .2s; }
[data-delay="3"] { transition-delay: .3s; }
[data-delay="4"] { transition-delay: .4s; }
[data-delay="5"] { transition-delay: .5s; }

/* ---------- Order Steps ---------- */
.step-active   .step-circle { background: linear-gradient(135deg,#3B82F6,#2563EB); color:#fff; border-color:#2563EB; }
.step-completed .step-circle{ background:#10B981; color:#fff; border-color:#10B981; }
.step-inactive  .step-circle{ background:#F1F5F9; color:#94A3B8; border-color:#E2E8F0; }
.step-circle { transition: background .3s, border-color .3s, color .3s; }

/* ---------- Tabs ---------- */
.tab-active  { border-bottom: 2px solid #2563EB !important; color: #2563EB !important; font-weight: 600; }
.tab-inactive{ border-bottom: 2px solid transparent; color: #64748B; }

/* ---------- Back to Top ---------- */
#back-to-top { transition: opacity .3s ease, transform .3s ease; }
#back-to-top:hover { transform: translateY(-3px); }

/* ---------- Floating Actions ---------- */
#floating-actions { transition: opacity .3s, transform .3s; }

/* ---------- Blog Card ---------- */
.blog-card { transition: transform .3s, box-shadow .3s; }
.blog-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,.08); }
.blog-card:hover .blog-thumb { transform: scale(1.05); }
.blog-thumb { transition: transform .4s ease; }

/* ---------- Inputs ---------- */
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #3B82F6 !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}

/* ---------- Custom Scrollbar ---------- */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #F8FAFC; }
::-webkit-scrollbar-thumb { background: #3B82F6; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #2563EB; }

/* ---------- Dividers ---------- */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #E2E8F0 30%, #E2E8F0 70%, transparent);
}

/* ---------- Glow ---------- */
.glow-blue { box-shadow: 0 0 32px rgba(59,130,246,.25); }
.glow-sm   { box-shadow: 0 0 16px rgba(59,130,246,.2); }

/* ---------- Animations ---------- */
@keyframes float {
  0%,100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-16px) scale(1.04); }
}
@keyframes pulse-ring {
  0%   { transform: scale(.95); box-shadow: 0 0 0 0 rgba(59,130,246,.5); }
  70%  { transform: scale(1);   box-shadow: 0 0 0 12px rgba(59,130,246,0); }
  100% { transform: scale(.95); box-shadow: 0 0 0 0 rgba(59,130,246,0); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

.animate-float   { animation: float 6s ease-in-out infinite; }
.animate-pulse-ring { animation: pulse-ring 2.5s ease infinite; }
.spinner { border:2px solid #E2E8F0; border-top-color:#3B82F6; border-radius:50%; animation:spin .8s linear infinite; }

/* ---------- Blog Article Prose ---------- */
.prose-content p { margin-bottom: 1rem; line-height: 1.75; color: #334155; }
.prose-content h2 { font-size: 1.375rem; font-weight: 700; color: #0F172A; margin-top: 2rem; margin-bottom: 0.75rem; }
.prose-content h3 { font-size: 1.1rem; font-weight: 700; color: #1E293B; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.prose-content ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose-content li { margin-bottom: 0.4rem; color: #475569; line-height: 1.6; }
.prose-content strong { color: #0F172A; font-weight: 600; }
.prose-content table { width: 100%; border-collapse: collapse; }
.prose-content a { color: #2563EB; text-decoration: underline; }
.map-placeholder { display: flex; align-items: center; justify-content: center; }

/* ---------- Map Placeholder ---------- */
.map-placeholder {
  background: linear-gradient(135deg, #E2E8F0 0%, #F1F5F9 100%);
  position: relative;
  overflow: hidden;
}
.map-placeholder::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232563EB' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Data Center visual ---------- */
.rack-card {
  background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%);
  border: 1px solid rgba(59,130,246,.2);
}
.rack-card:hover { border-color: rgba(59,130,246,.5); box-shadow: 0 0 24px rgba(59,130,246,.15); }
.rack-led { width:8px; height:8px; border-radius:50%; }
.led-green  { background:#22C55E; box-shadow: 0 0 6px #22C55E; animation: pulse-ring 2s infinite; }
.led-blue   { background:#3B82F6; box-shadow: 0 0 6px #3B82F6; }
.led-orange { background:#F97316; box-shadow: 0 0 6px #F97316; }

/* ---------- Trust badge ---------- */
.trust-badge {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(8px);
}

/* ---------- Responsive Utilities ---------- */
@media (max-width: 640px) {
  .pricing-table { font-size: 13px; }
}

/* ---------- Print ---------- */
@media print {
  #main-header, footer, #back-to-top, #floating-actions { display: none !important; }
}