/* =========================================================
   CORELOGIC SYSTEMS LTD
   ENTERPRISE V6 — PIXEL PERFECT MOBILE SYSTEM
   FULL MASTER CSS (READY TO PASTE)
========================================================= */

/* =========================
   ROOT VARIABLES
========================= */

:root {

  --primary-blue: #1e88ff;
  --secondary-blue: #0052cc;
  --accent-yellow: #f5d300;

  --dark-bg: #071120;
  --dark-secondary: #0b1728;
  --card-bg: #101c2f;

  --white: #ffffff;
  --text-light: #f8fafc;
  --text-muted: #cbd5e1;

  --transition: 0.4s ease;
}

/* =========================
   GLOBAL RESET
========================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  width: 100%;
  font-family: 'Poppins', sans-serif;
  background: var(--dark-bg);
  color: var(--white);
  line-height: 1.7;

  /* PERFORMANCE */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* =========================
   PERFORMANCE BOOST (LCP)
========================= */

img {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.hero,
.cta {
  background-attachment: scroll !important;
}

/* =========================
   SCROLLBAR
========================= */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #08111d;
}

::-webkit-scrollbar-thumb {
  background: var(--primary-blue);
  border-radius: 50px;
}

/* =========================
   TYPOGRAPHY
========================= */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #fff;
}

p {
  color: var(--text-muted);
}

/* =========================================================
   APPLE STYLE GLASS NAVBAR
========================================================= */

.navbar {

  position: fixed;
  top: 0;
  width: 100%;
  min-height: 64px;

  z-index: 99999;
  padding-top: 6px;
  padding-bottom: 6px;


  background: rgba(7, 17, 32, 0.72);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border-bottom: 1px solid rgba(255,255,255,0.08);

  transition:
    background 0.4s ease,
    transform 0.4s ease,
    box-shadow 0.4s ease;

  transform: translateZ(0);
}

.navbar.scrolled {

  background: rgba(7, 17, 32, 0.95);

  box-shadow: 0 10px 35px rgba(0,0,0,0.35);
}

/* LOGO */

.navbar-brand img {

  width: 95px;

  transition: 0.3s ease;
}

/* NAV LINKS */

.nav-link {

  color: #fff !important;

  font-weight: 500;

  margin: 0 10px;

  transition: 0.3s ease;
}

.nav-link:hover,
.nav-link.active {

  color: var(--accent-yellow) !important;
}

/* NAV BUTTON */

.nav-btn {

  background: linear-gradient(
    135deg,
    var(--primary-blue),
    var(--secondary-blue)
  );

  padding: 12px 28px;

  border-radius: 50px;

  color: white;

  font-weight: 600;

  transition: var(--transition);
}

.nav-btn:hover {

  transform: translateY(-3px);

  box-shadow: 0 10px 25px rgba(30,136,255,0.35);
}

/* =========================================================
   MOBILE MENU (APP STYLE SLIDE)
========================================================= */

.navbar-toggler {

  border: 1px solid rgba(255,255,255,0.15);

  background: rgba(255,255,255,0.05);

  padding: 8px 10px;
}

.navbar-toggler:focus {

  box-shadow: none;
}

.navbar-toggler-icon {

  filter: invert(1);
}

/* MOBILE PANEL */

@media (max-width: 991px) {

  .navbar-collapse {

    position: fixed;

    top: 0;
    right: -100%;

    width: 82%;
    max-width: 340px;

    height: 100vh;

    background: rgba(7, 17, 32, 0.98);

    backdrop-filter: blur(20px);

    padding: 100px 30px 40px;

    transition: right 0.35s ease;

    overflow-y: auto;

    z-index: 999999;

    box-shadow: -10px 0 35px rgba(0,0,0,0.4);
  }

  .navbar-collapse.show {

    right: 0;
  }

  .navbar-nav {

    gap: 10px;
  }

  .nav-link {

    font-size: 1.05rem;

    padding: 12px 0;
  }

  .nav-btn {

    margin-top: 15px;

    display: inline-block;

    text-align: center;
  }
}

/* ==========================================
   HERO SAAS
========================================== */

.hero-saas{
  position:relative;
  min-height:100vh;

  background:
    radial-gradient(circle at top right, rgba(30,136,255,.18), transparent 40%),
    radial-gradient(circle at bottom left, rgba(245,211,0,.06), transparent 40%),
    linear-gradient(rgba(5,10,20,.92), rgba(5,10,20,.97)),
    url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=1600&auto=format&fit=crop');

  background-size:cover;
  background-position:center;

  display:flex;
  align-items:center;

  overflow:hidden;

  padding-top:90px;
  padding-bottom:60px;
}

.hero-glow{
  position:absolute;
  width:500px;
  height:500px;

  background:rgba(30,136,255,.12);

  border-radius:50%;
  filter:blur(120px);

  top:-150px;
  right:-150px;
}

.hero-saas h1{
  font-size:4rem;
  font-weight:800;
  line-height:1.08;
  margin-bottom:20px;
}

.hero-saas h1 span{
  color:var(--accent-yellow);
}

.hero-saas p{
  max-width:620px;
  font-size:1.05rem;
  margin-bottom:30px;
}

.hero-buttons{
  display:flex;
  gap:15px;
  flex-wrap:wrap;
}

.badge-pill{
  display:inline-flex;
  align-items:center;

  padding:10px 18px;

  background:rgba(255,255,255,.05);

  border:1px solid rgba(255,255,255,.08);

  border-radius:50px;

  color:#cbd5e1;

  font-size:.85rem;

  margin-bottom:25px;
}

.saas-metrics{
  display:flex;
  flex-wrap:wrap;
  gap:15px;
  margin-top:35px;
}

.metric{
  flex:1;
  min-width:120px;

  background:rgba(255,255,255,.05);

  border:1px solid rgba(255,255,255,.08);

  border-radius:18px;

  padding:18px;

  text-align:center;
}

.metric h3{
  font-size:2rem;
  font-weight:700;
  color:#fff;
  margin-bottom:4px;
}

.metric span{
  color:#cbd5e1;
  font-size:.9rem;
}

.glass-dashboard{
  background:rgba(255,255,255,.06);

  backdrop-filter:blur(18px);

  border:1px solid rgba(255,255,255,.08);

  border-radius:24px;

  padding:28px;

  box-shadow:0 20px 40px rgba(0,0,0,.25);
}

.glass-dashboard h4{
  margin-bottom:20px;
}

.dash-card{
  display:flex;
  align-items:center;
  gap:15px;

  padding:15px;

  margin-bottom:15px;

  border-radius:16px;

  background:rgba(255,255,255,.04);
}

.dash-card .icon{
  width:45px;
  height:45px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:12px;

  background:rgba(245,211,0,.12);

  color:var(--accent-yellow);
}

.dash-card h5{
  margin-bottom:4px;
  font-size:1rem;
}

.dash-card p{
  margin:0;
  font-size:.85rem;
}

.dash-highlight{
  margin-top:20px;
  text-align:center;
}

.dash-highlight h3{
  font-size:2.4rem;
  color:var(--accent-yellow);
}


/* ==========================================
   MOBILE FIXES
========================================== */

@media (max-width:991px){

  .hero-saas{
    text-align:center;
    padding-top:120px;
  }

  .glass-dashboard{
    margin-top:40px;
  }

  .hero-buttons{
    justify-content:center;
  }

}

@media (max-width:768px){

  .hero-saas h1{
    font-size:2.4rem;
  }

  .hero-saas p{
    font-size:.95rem;
    max-width:100%;
  }

  .hero-buttons{
    flex-direction:column;
  }

  .primary-btn,
  .secondary-btn{
    width:100%;
  }

  .metric{
    min-width:calc(50% - 8px);
  }

  .glass-dashboard{
    padding:20px;
  }

  .dash-card{
    text-align:left;
  }

}

@media (max-width:480px){

  .hero-saas h1{
    font-size:2rem;
  }

  .badge-pill{
    font-size:.72rem;
  }

  .metric{
    width:100%;
    min-width:100%;
  }

  .section-title h2{
    font-size:1.8rem;
  }

}
/* =========================================================
   BUTTONS
========================================================= */

.primary-btn,
.secondary-btn {

  display: inline-block;

  text-align: center;
}

.primary-btn {

  background: linear-gradient(
    135deg,
    var(--primary-blue),
    var(--secondary-blue)
  );

  color: white;

  padding: 14px 32px;

  border-radius: 50px;

  font-weight: 600;

  transition: var(--transition);
}

.primary-btn:hover {

  transform: translateY(-5px);

  color: white;

  box-shadow: 0 15px 35px rgba(30,136,255,0.35);
}

.secondary-btn {

  border: 2px solid var(--accent-yellow);

  color: var(--accent-yellow);

  padding: 14px 32px;

  border-radius: 50px;

  transition: var(--transition);
}

.secondary-btn:hover {

  background: var(--accent-yellow);

  color: #000;
}

/* =========================================================
   SECTION SPACING
========================================================= */

.about,
.services,
.stats,
.cta,
.contact-section {

  padding: 80px 0;
}

/* =========================================================
   SECTION TITLES
========================================================= */

.section-title {

  text-align: center;

  margin-bottom: 50px;
}

.section-title h2 {

  font-size: 2.7rem;

  font-weight: 700;

  margin-bottom: 15px;
}

.section-title p {

  max-width: 720px;

  margin: auto;
}

/* =========================================================
   ABOUT
========================================================= */

.about {

  background: var(--dark-secondary);
}

.about-image {

  overflow: hidden;

  border-radius: 24px;
}

.about-image img {

  width: 100%;

  transition: transform 0.5s ease;
}

.about-image:hover img {

  transform: scale(1.03);
}

/* =========================================================
   SERVICE CARDS
========================================================= */

.service-card {

  background: var(--card-bg);

  border-radius: 24px;

  padding: 35px;

  height: 100%;

  transition: var(--transition);

  border: 1px solid rgba(255,255,255,0.05);

  position: relative;

  overflow: hidden;
}

/* HOVER DEPTH */

.service-card:hover {

  transform: translateY(-12px);

  border-color: rgba(245,211,0,0.25);

  box-shadow: 0 25px 50px rgba(0,0,0,0.35);
}

/* CARD GLOW */

.service-card::before {

  content: '';

  position: absolute;

  width: 130px;
  height: 130px;

  background: rgba(30,136,255,0.08);

  border-radius: 50%;

  top: -50px;
  right: -50px;
}

/* =========================================================
   INDUSTRIES
========================================================= */

.stat-box {

  background: var(--card-bg);

  border-radius: 20px;

  padding: 35px 25px;

  text-align: center;

  transition: var(--transition);

  border: 1px solid rgba(255,255,255,0.05);
}

.stat-box:hover {

  transform: translateY(-8px);

  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

/* =========================================================
   CTA
========================================================= */

.cta {

  background:
    linear-gradient(rgba(0,0,0,0.78), rgba(0,0,0,0.88)),
    url('https://images.unsplash.com/photo-1552664730-d307ca884978?q=80&w=1600&auto=format&fit=crop');

  background-size: cover;
  background-position: center;

  text-align: center;
}

/* =========================================================
   FOOTER
========================================================= */

footer {

  background: #040b16;

  padding: 70px 0 110px;
}

footer h5 {

  margin-bottom: 20px;

  font-weight: 700;
}

footer a {

  color: #cbd5e1;

  transition: 0.3s ease;
}

footer a:hover {

  color: var(--accent-yellow);
}

/* =========================================================
   PARTNERS SLIDER
========================================================= */

.footer-partners {

  margin-top: 50px;

  overflow: hidden;

  border-top: 1px solid rgba(255,255,255,0.08);

  padding-top: 30px;
}

.partner-track {

  display: flex;

  gap: 55px;

  width: max-content;

  animation: scrollPartners 20s linear infinite;

  align-items: center;

  will-change: transform;
}

.partner-logo img {

  height: 45px;

  opacity: 0.75;

  filter: grayscale(100%);

  transition: 0.3s ease;
}

.partner-logo img:hover {

  filter: grayscale(0);

  opacity: 1;
}

@keyframes scrollPartners {

  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* =========================================================
   FLOATING WHATSAPP
========================================================= */

.whatsapp-float {

  position: fixed;

  bottom: 90px;
  right: 18px;

  width: 58px;
  height: 58px;

  background: #25D366;

  border-radius: 50%;

  display: flex;

  align-items: center;
  justify-content: center;

  color: white;

  font-size: 28px;

  z-index: 999999;

  box-shadow: 0 12px 30px rgba(0,0,0,0.35);

  transition: 0.3s ease;
}

.whatsapp-float:hover {

  transform: scale(1.08);
}

/* =========================================================
   STICKY MOBILE BOTTOM BAR
========================================================= */

.mobile-bottom-bar {

  position: fixed;

  bottom: 0;
  left: 0;

  width: 100%;

  background: rgba(7,17,32,0.96);

  backdrop-filter: blur(15px);

  border-top: 1px solid rgba(255,255,255,0.08);

  z-index: 999999;

  display: none;

  padding: 10px 0;
}

.mobile-bottom-bar .bottom-nav {

  display: flex;

  justify-content: space-around;

  align-items: center;
}

.mobile-bottom-bar a {

  color: white;

  text-decoration: none;

  display: flex;

  flex-direction: column;

  align-items: center;

  font-size: 0.75rem;

  gap: 5px;

  transition: 0.3s ease;
}

.mobile-bottom-bar a i {

  font-size: 1.2rem;
}

.mobile-bottom-bar a:hover {

  color: var(--accent-yellow);
}

/* =========================================================
   COPYRIGHT
========================================================= */

.copyright {

  border-top: 1px solid rgba(255,255,255,0.08);

  margin-top: 40px;

  padding-top: 20px;

  text-align: center;
}

/* =========================================================
   AOS MICRO INTERACTIONS
========================================================= */

[data-aos] {

  transition-timing-function:
    cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* =========================================================
   RESPONSIVE SYSTEM
========================================================= */

/* LARGE TABLETS */

@media (max-width: 991px) {

  .hero h1 {

    font-size: 3rem;
  }

  .section-title h2 {

    font-size: 2.2rem;
  }

  .service-card {

    margin-bottom: 20px;
  }
}

/* MOBILE */

@media (max-width: 768px) {

  .hero {

    text-align: center;

    padding-top: 80px;
  }

  .hero h1 {

    font-size: 2.3rem;
  }

  .hero-buttons {

    flex-direction: column;

    width: 100%;
  }

  .primary-btn,
  .secondary-btn {

    width: 100%;
  }

  .section-title h2 {

    font-size: 2rem;
  }

  .about,
  .services,
  .stats,
  .cta,
  .contact-section {

    padding: 65px 0;
  }

  .partner-track {

    gap: 35px;
  }

  .partner-logo img {

    height: 34px;
  }

  /* SHOW MOBILE BOTTOM BAR */

  .mobile-bottom-bar {

    display: block;
  }

  footer {

    padding-bottom: 130px;
  }
}

/* IPHONE SE + ULTRA SMALL DEVICES */

@media (max-width: 375px) {

  .hero h1 {

    font-size: 1.9rem;
  }

  .hero p {

    font-size: 0.92rem;
  }

  .section-title h2 {

    font-size: 1.7rem;
  }

  .service-card {

    padding: 28px 22px;
  }

  .navbar-brand img {

    width: 100px;
  }

  .partner-logo img {

    height: 28px;
  }

  .mobile-bottom-bar a {

    font-size: 0.68rem;
  }
}

/* ULTRA SMALL ANDROID */

@media (max-width: 320px) {

  .hero h1 {

    font-size: 1.7rem;
  }

  .nav-btn {

    padding: 10px 20px;
  }

  .service-card {

    padding: 24px 18px;
  }

  .mobile-bottom-bar a i {

    font-size: 1rem;
  }
}