:root{ --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.08); }
html, body { height: 100%; }
body{
  background: radial-gradient(1100px 420px at 12% 12%, rgba(99,102,241,.16) 0%, rgba(255,255,255,0) 60%),
              radial-gradient(900px 420px at 86% 18%, rgba(236,72,153,.14) 0%, rgba(255,255,255,0) 60%),
              linear-gradient(180deg, #f6f8ff 0%, #ffffff 55%, #f5faff 100%);
}
.navbar-blur{
  backdrop-filter: blur(14px);
  background: rgba(255,255,255,.72)!important;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.card{
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,.06);
}
.btn, .form-control, .form-select, .badge{ border-radius: 14px; }
.hero{
  border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,.06);
  background: radial-gradient(1200px 500px at 15% 10%, rgba(99,102,241,.16) 0%, rgba(255,255,255,0) 60%),
              radial-gradient(900px 500px at 85% 20%, rgba(236,72,153,.14) 0%, rgba(255,255,255,0) 60%),
              rgba(255,255,255,.82);
}
.badge-soft{
  background: rgba(99,102,241,.12);
  color: #3730a3;
  border: 1px solid rgba(99,102,241,.18);
  border-radius: 999px;
  padding: .35rem .6rem;
  font-weight: 700;
}
.small-muted{ color: rgba(107,114,128,1); }
.price{ font-weight: 900; letter-spacing: -.02em; }
.kpi{
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.7);
  padding: 14px;
}
.footer{
  border-top: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(14px);
}
.dark body{
  background: radial-gradient(1100px 420px at 12% 12%, rgba(99,102,241,.12) 0%, rgba(0,0,0,0) 60%),
              radial-gradient(900px 420px at 86% 18%, rgba(236,72,153,.10) 0%, rgba(0,0,0,0) 60%),
              #0b1220;
  color: #e5e7eb;
}
.dark .navbar-blur{ background: rgba(17,24,39,.65)!important; border-bottom-color: rgba(255,255,255,.08); }
.dark .card, .dark .kpi{
  background: rgba(17,24,39,.72);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.dark .hero{ background: rgba(17,24,39,.65); border-color: rgba(255,255,255,.08); }
.dark .footer{ background: rgba(17,24,39,.65); border-top-color: rgba(255,255,255,.08); }
.dark .form-control, .dark .form-select{ background: rgba(15,23,42,.65); border-color: rgba(255,255,255,.10); color:#e5e7eb; }
.dark .small-muted{ color: rgba(156,163,175,1); }
a{ text-decoration:none; }



/* Service cards */
.service-thumb{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius: 14px;
}
.service-card .badge-soft{ white-space:nowrap; }
.service-card .small{ line-height:1.35; }


/* Mockups (light/minimal) */
.mockup{
  border:1px solid rgba(0,0,0,.08);
  border-radius: 20px;
  background: rgba(255,255,255,.75);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  overflow:hidden;
}
.mockup .mockup-screen{ background: #fff; }
.mockup-img{ width:100%; height:100%; object-fit:cover; display:block; }
.mockup-desktop .mockup-bar{
  height: 34px;
  background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.01));
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.mockup-desktop .mockup-screen{ height: 300px; }
.mockup-phone{ position:relative; border-radius: 28px; }
.mockup-phone .mockup-notch{
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  width: 90px; height: 18px; border-radius: 999px;
  background: rgba(0,0,0,.10);
  z-index:2;
}
.mockup-phone .mockup-screen{ height: 360px; padding-top: 24px; }

.carousel-indicators [data-bs-target]{
  width:10px; height:10px; border-radius:999px; border:1px solid rgba(0,0,0,.18);
}



/* FIXED IMAGE SIZES */
.service-thumb{
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
    border-radius: 16px;
    background: #f3f4f6;
    display: block;
}

/* Card layout fix */
.service-card{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.service-card .price{
    margin-top: auto;
}

/* Carousel images */
.carousel-item img{
    width: 100%;
    height: 360px;
    object-fit: cover;
    object-position: center;
    border-radius: 18px;
    background: #f3f4f6;
}

/* Mockups strict sizing */
.mockup-desktop .mockup-screen{
    height: 320px;
    overflow: hidden;
}
.mockup-phone .mockup-screen{
    height: 380px;
    overflow: hidden;
}



/* === Cards: equal height + hover + image perf === */
.service-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  will-change: transform;
}
.service-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 42px rgba(0,0,0,.12);
  border-color: rgba(0,0,0,.10);
}
.dark .service-card:hover{
  box-shadow: 0 16px 42px rgba(0,0,0,.55);
  border-color: rgba(255,255,255,.14);
}

/* image wrapper: fixed height (prevents overflow/CLS) */
.service-card .service-image{
  width:100%;
  height:160px;
  overflow:hidden;
  border-radius:14px;
  background: rgba(243,244,246,1);
  aspect-ratio: 16/9; /* modern browsers */
}
.service-card .service-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* content spacing */
.service-card .service-title{ font-weight: 700; }
.service-card .service-desc{ color: rgba(107,114,128,1); }
.dark .service-card .service-desc{ color: rgba(156,163,175,1); }

/* footer pinned to bottom (price/button line always aligned) */
.service-card .service-footer{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}

@media (max-width:768px){
  .service-card .service-image{ height:140px; }
}