/* ===========================================
   Site Cinematic - Global Design System
   Applies liquid-glass + dark cinematic theme
   to all sections across all pages
   =========================================== */

/* ── Section backgrounds ── */
.section {
  background: linear-gradient(180deg, #080e1a 0%, #0b1426 50%, #080e1a 100%) !important;
}

.section:nth-child(even),
.section:nth-of-type(even) {
  background: linear-gradient(180deg, #060b15 0%, #0a1628 50%, #060b15 100%) !important;
}

/* ── Section headers ── */
.section-header h2 {
  color: #fff !important;
}
.section-header p {
  color: rgba(255,255,255,0.55) !important;
}
.section-header .divider {
  background: linear-gradient(90deg, transparent, rgba(96,165,250,0.3), transparent) !important;
}
.section-header .divider::after {
  background: rgba(96,165,250,0.5) !important;
}

/* ── Sub-page banners (override inline styles) ── */
section[style*="padding-top:120px"] {
  background: linear-gradient(180deg, #05080f 0%, #0a1628 50%, #060b15 100%) !important;
  position: relative;
  overflow: hidden;
}
section[style*="padding-top:120px"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% -20%, rgba(59,130,246,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(96,165,250,0.06) 0%, transparent 60%);
  pointer-events: none;
}
section[style*="padding-top:120px"] .container {
  position: relative;
  z-index: 1;
}

/* ── Product labels ── */
.products-section-label {
  color: rgba(255,255,255,0.5) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}

/* ── Product cards ── */
.products-grid .product-card {
  background: rgba(255,255,255,0.02) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: none !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.products-grid .product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.1);
}
.products-grid .product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.06) 25%, transparent 50%, rgba(255,255,255,0.06) 75%, rgba(255,255,255,0.25) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.products-grid .product-card h3 {
  color: #fff !important;
}
.products-grid .product-card p {
  color: rgba(255,255,255,0.55) !important;
}
.products-grid .product-card ul li {
  color: rgba(255,255,255,0.65) !important;
}
.products-grid .product-card ul li::before {
  color: rgba(96,165,250,0.6) !important;
}
.products-grid .product-card .product-img-wrap {
  opacity: 0.85;
}
.products-grid .product-card .product-badge {
  background: rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(8px);
  color: rgba(255,255,255,0.8) !important;
  border: none;
}

/* ── About cards ── */
.about-card {
  background: rgba(255,255,255,0.02) !important;
  backdrop-filter: blur(8px) !important;
  border: none !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease;
}
.about-card:hover { transform: translateY(-4px); }
.about-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, transparent 50%, rgba(255,255,255,0.25) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.about-card h3 { color: #fff !important; }
.about-card p { color: rgba(255,255,255,0.6) !important; }
.about-icon { opacity: 0.8; }

/* ── Dev/custom dev cards ── */
.dev-item {
  background: rgba(255,255,255,0.02) !important;
  backdrop-filter: blur(8px) !important;
  border: none !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease;
}
.dev-item:hover { transform: translateY(-3px); }
.dev-item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  background: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, transparent 50%, rgba(255,255,255,0.20) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.dev-item h4 { color: #fff !important; }
.dev-item p { color: rgba(255,255,255,0.6) !important; }
.dev-icon { opacity: 0.8; }

/* ── Process timeline ── */
.process-timeline { position: relative; }
.process-timeline::before {
  background: rgba(255,255,255,0.06) !important;
}
.process-step {
  background: rgba(255,255,255,0.02) !important;
  backdrop-filter: blur(8px) !important;
  border: none !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
}
.process-step::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  background: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, transparent 50%, rgba(255,255,255,0.20) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.process-step h4 { color: #fff !important; }
.process-step p { color: rgba(255,255,255,0.6) !important; }
.process-icon { opacity: 0.8; }

/* ── Why choose us ── */
.why-item {
  background: rgba(255,255,255,0.02) !important;
  backdrop-filter: blur(8px) !important;
  border: none !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease;
}
.why-item:hover { transform: translateY(-3px); }
.why-item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  background: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, transparent 50%, rgba(255,255,255,0.20) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.why-item h3 { color: #fff !important; }
.why-item p { color: rgba(255,255,255,0.6) !important; }
.why-item .why-num {
  color: rgba(96,165,250,0.15) !important;
}

/* ── Service cards ── */
.service-card {
  background: rgba(255,255,255,0.02) !important;
  backdrop-filter: blur(8px) !important;
  border: none !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease;
}
.service-card:hover { transform: translateY(-3px); }
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  background: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, transparent 50%, rgba(255,255,255,0.20) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.service-card h3 { color: #fff !important; }
.service-card p { color: rgba(255,255,255,0.6) !important; }

/* ── Solution cards ── */
.solution-card {
  background: rgba(255,255,255,0.02) !important;
  backdrop-filter: blur(8px) !important;
  border: none !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease;
}
.solution-card:hover { transform: translateY(-3px); }
.solution-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  background: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, transparent 50%, rgba(255,255,255,0.20) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.solution-card h3 { color: #fff !important; }
.solution-card p { color: rgba(255,255,255,0.6) !important; }

/* ── News cards ── */
.news-card {
  background: rgba(255,255,255,0.02) !important;
  backdrop-filter: blur(8px) !important;
  border: none !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease;
}
.news-card:hover { transform: translateY(-3px); }
.news-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  background: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, transparent 50%, rgba(255,255,255,0.20) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.news-card h3 { color: #fff !important; }
.news-card p { color: rgba(255,255,255,0.55) !important; }
.news-tag {
  background: rgba(96,165,250,0.2) !important;
  color: rgba(255,255,255,0.8) !important;
}

/* ── Contact cards ── */
.contact-card {
  background: rgba(255,255,255,0.02) !important;
  backdrop-filter: blur(8px) !important;
  border: none !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
}
.contact-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  background: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, transparent 50%, rgba(255,255,255,0.20) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.contact-card h3 { color: #fff !important; }
.contact-card p { color: rgba(255,255,255,0.6) !important; }

/* ── Partners ── */
.partners {
  background: rgba(255,255,255,0.01) !important;
}
.partner-item {
  color: rgba(255,255,255,0.5) !important;
}

/* ── CTA section ── */
.cta-section {
  background: linear-gradient(180deg, #0a1628 0%, #05080f 100%) !important;
}
.cta-section h2 {
  color: #fff !important;
}
.cta-section p {
  color: rgba(255,255,255,0.6) !important;
}

/* ── Footer ── */
.footer {
  background: #03060c !important;
}
.footer-brand {
  color: rgba(255,255,255,0.9) !important;
}
.footer-col h4 {
  color: rgba(255,255,255,0.8) !important;
}
.footer-col a {
  color: rgba(255,255,255,0.45) !important;
}
.footer-col a:hover {
  color: rgba(255,255,255,0.8) !important;
}
.footer-bottom {
  color: rgba(255,255,255,0.3) !important;
  border-top-color: rgba(255,255,255,0.05) !important;
}

/* ── Buttons ── */
.btn-primary {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(37,99,235,0.2) !important;
}
.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(37,99,235,0.3) !important;
}
.btn-outline {
  border-color: rgba(255,255,255,0.2) !important;
  color: #fff !important;
}

/* ── Basic text overrides on main content areas ── */
.container p, .container li, .container span:not([class*="badge"]):not([class*="chip"]):not([class*="tag"]) {
  color: rgba(255,255,255,0.75) !important;
}
.container h1, .container h2, .container h3, .container h4, .container h5 {
  color: #fff !important;
}

/* ── Section scroll animation via AOS ── */
[data-aos] {
  transition-duration: 0.7s !important;
}