*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Arial,sans-serif;line-height:1.6;color:#2b2b2b;background:#fff}
a{text-decoration:none}
.container{width:92%;max-width:1180px;margin:auto}
.site-header{background:#0B1220;color:#fff;position:sticky;top:0;z-index:10}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.logo{font-size:24px;font-weight:700;color:#fff}
nav a{color:#fff;margin-left:22px;font-size:15px}
.nav-cta{background:#00B8D9;padding:10px 16px;border-radius:22px}
.menu-btn{display:none;background:none;border:0;color:#fff;font-size:26px}
.hero{
background:
linear-gradient(rgba(11,18,32,.82),rgba(18,59,85,.82)),
url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1600&q=80');
background-size:cover;
background-position:center;
color:#fff;
padding:90px 0}
.hero-grid{display:grid;grid-template-columns:1.5fr .8fr;gap:40px;align-items:center}
.eyebrow{color:#8EEBFF;font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:1px}
.hero h1{font-size:52px;line-height:1.1;margin:16px 0}
.hero p{font-size:19px;max-width:700px}
.btn{display:inline-block;padding:13px 24px;border-radius:30px;font-weight:700;margin:10px 8px 10px 0;border:0;cursor:pointer}
.primary{background:#00B8D9;color:#fff}
.secondary{background:#fff;color:#0B1220}
.trust-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px}
.trust-row span{background:rgba(255,255,255,.12);padding:9px 12px;border-radius:20px;font-size:14px}
.hero-card{background:#fff;color:#2b2b2b;border-radius:18px;padding:30px;box-shadow:0 15px 40px rgba(0,0,0,.18)}
.hero-card h3{color:#0B1220;margin-bottom:10px}
.hero-card ul{padding-left:20px}
.section{padding:70px 0}
.light{background:#F4F8FB}
.section-title{text-align:center;font-size:36px;color:#0B1220;margin-bottom:10px}
.section-subtitle{text-align:center;max-width:740px;margin:0 auto 35px;color:#555}
.cards{display:grid;gap:24px}
.four{grid-template-columns:repeat(4,1fr)}
.three{grid-template-columns:repeat(3,1fr)}
.two{grid-template-columns:repeat(2,1fr)}
.card,.price-card,.contact-box,.admin-card{background:#fff;border-radius:16px;padding:28px;box-shadow:0 8px 25px rgba(0,0,0,.08);border:1px solid #eee}
.card h2,.card h3{color:#0B1220;margin-bottom:10px}
.card strong{display:block;margin-top:15px;color:#00B8D9}
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.split h2{font-size:34px;color:#0B1220;margin-bottom:15px}
.feature-list{display:grid;gap:12px}
.feature-list div{background:#fff;padding:16px;border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,.06)}
.price-card{text-align:center}
.price-card.featured{border:2px solid #00B8D9;transform:scale(1.03)}
.price{font-size:34px;color:#00B8D9;font-weight:800;margin:10px 0}
.price-card ul{list-style:none;margin-top:15px}
.cta{background:#0B1220;color:#fff;text-align:center;padding:70px 0}
.cta h2{font-size:36px}
.cta p{margin:15px auto 25px;max-width:700px}
.footer{background:#070B12;color:#fff;text-align:center;padding:22px 0}
.page-hero{background:#0B1220;color:#fff;padding:70px 0;text-align:center}
.page-hero h1{font-size:44px}
.page-hero p{max-width:720px;margin:10px auto 0}
.narrow{max-width:850px}
.narrow h2{color:#0B1220;margin:25px 0 10px}
.contact-box{text-align:center;max-width:720px}
.contact-box p{margin:12px 0}
.contact-box a{color:#0B1220;font-weight:700}
.read-more{display:inline-block;margin-top:15px;color:#00B8D9;font-weight:700}
.blog-article p{margin-bottom:18px}
.blog-meta{color:#666;font-size:14px;margin-bottom:20px}
input,textarea{width:100%;padding:12px;border:1px solid #ccc;border-radius:8px;margin:6px 0 15px;font-size:15px}
textarea{min-height:180px}
label{font-weight:700;color:#0B1220}
.admin-actions{display:flex;gap:10px;flex-wrap:wrap}
.notice{background:#F4F8FB;border-left:4px solid #00B8D9;padding:14px;border-radius:8px;margin-bottom:20px}
.error{background:#fff1f1;border-left:4px solid #cc3333;padding:14px;border-radius:8px;margin-bottom:20px}
.success{background:#f0fff5;border-left:4px solid #2c9a50;padding:14px;border-radius:8px;margin-bottom:20px}
table{width:100%;border-collapse:collapse;margin-top:20px}
th,td{border-bottom:1px solid #eee;padding:12px;text-align:left}
@media(max-width:900px){.hero-grid,.split{grid-template-columns:1fr}.four,.three,.two{grid-template-columns:1fr 1fr}.hero h1{font-size:40px}}
@media(max-width:650px){.menu-btn{display:block}nav{display:none;width:100%;padding-top:15px}nav.show{display:block}nav a{display:block;margin:10px 0}.nav-wrap{flex-wrap:wrap}.four,.three,.two{grid-template-columns:1fr}.hero{padding:60px 0}.hero h1{font-size:34px}.section-title{font-size:30px}.price-card.featured{transform:none}.page-hero h1{font-size:34px}}



/* Premium Button Animations */
.btn,
.nav-cta,
button.btn {
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  will-change: transform;
}

.btn::before,
.nav-cta::before,
button.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
}

.btn:hover,
.nav-cta:hover,
button.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,184,217,.32);
}

.btn:hover::before,
.nav-cta:hover::before,
button.btn:hover::before {
  left: 130%;
}

.btn:active,
.nav-cta:active,
button.btn:active {
  transform: translateY(-1px) scale(.98);
}

.primary:hover {
  background: #06ccef;
}

.secondary:hover {
  color: #0B1220;
  background: #EAFBFF;
}

/* Card hover effect for premium feel */
.card,
.price-card,
.hero-card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.card:hover,
.price-card:hover,
.hero-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 38px rgba(0,0,0,.12);
  border-color: rgba(0,184,217,.35);
}

/* Accessibility: reduce motion for users who prefer less animation */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .nav-cta,
  button.btn,
  .card,
  .price-card,
  .hero-card {
    transition: none;
  }

  .btn::before,
  .nav-cta::before,
  button.btn::before {
    display: none;
  }

  .btn:hover,
  .nav-cta:hover,
  button.btn:hover,
  .card:hover,
  .price-card:hover,
  .hero-card:hover {
    transform: none;
  }
}


/* Temporary Remote Hero Image */
.hero {
  background:
    linear-gradient(rgba(11,18,32,.84), rgba(18,59,85,.84)),
    url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1600&q=80') !important;
  background-size: cover !important;
  background-position: center !important;
}
.service-img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 16px;
  display: block;
}


/* CLEAN HOMEPAGE SERVICE GRID - FINAL */
body {
  overflow-x: hidden;
}

.services-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 22px !important;
  width: 100% !important;
  max-width: 100% !important;
}

.service-card {
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 8px 25px rgba(0,0,0,.08);
  border: 1px solid #eee;
  overflow: hidden;
  min-width: 0;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 38px rgba(0,0,0,.12);
  border-color: rgba(0,184,217,.35);
}

.service-card img {
  width: 100% !important;
  height: 120px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 12px !important;
  margin-bottom: 14px !important;
  display: block !important;
}

.service-card h3 {
  color: #0B1220;
  font-size: 18px;
  line-height: 1.25;
  margin-bottom: 9px;
}

.service-card p {
  color: #444;
  font-size: 14.5px;
  line-height: 1.55;
  margin-bottom: 10px;
}

.service-card strong {
  display: block;
  color: #00B8D9;
  font-size: 14.5px;
  margin-top: 10px;
}

/* Tablet */
@media (max-width: 1050px) {
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .service-card img {
    height: 155px !important;
  }
}

/* Mobile */
@media (max-width: 650px) {
  .services-grid {
    grid-template-columns: 1fr !important;
  }

  .service-card img {
    height: 190px !important;
  }
}



/* =====================================================
   FORCE FIX: KatVerra Homepage Services 4-Column Grid
   This must stay at the VERY BOTTOM of style.css
===================================================== */

.section .container > .services-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 22px !important;
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  align-items: stretch !important;
}

.section .container > .services-grid > .service-card {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  display: block !important;
  background: #ffffff !important;
  border: 1px solid #eeeeee !important;
  border-radius: 16px !important;
  padding: 18px !important;
  box-shadow: 0 8px 25px rgba(0,0,0,.08) !important;
  overflow: hidden !important;
}

.section .container > .services-grid > .service-card img {
  width: 100% !important;
  height: 115px !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 12px !important;
  display: block !important;
  margin: 0 0 14px 0 !important;
}

.section .container > .services-grid > .service-card h3 {
  font-size: 18px !important;
  line-height: 1.25 !important;
  margin: 0 0 9px 0 !important;
  color: #0B1220 !important;
}

.section .container > .services-grid > .service-card p {
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  margin: 0 0 10px 0 !important;
  color: #444444 !important;
}

.section .container > .services-grid > .service-card strong {
  display: block !important;
  color: #00B8D9 !important;
  font-size: 14.5px !important;
  margin-top: 10px !important;
}

/* Tablet: 2 columns */
@media screen and (max-width: 1050px) {
  .section .container > .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .section .container > .services-grid > .service-card img {
    height: 150px !important;
  }
}

/* Mobile: 1 column */
@media screen and (max-width: 650px) {
  .section .container > .services-grid {
    grid-template-columns: 1fr !important;
  }

  .section .container > .services-grid > .service-card img {
    height: 185px !important;
  }
}