:root{
  --radius: 1.25rem;
  --ink: #17212b;
  --soft: #f3f7fb;
  --line: rgba(23, 33, 43, .09);
}

body {
  color: var(--ink);
  background: #fff;
}

.navbar {
  background: rgba(255, 255, 255, .88) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.hero{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 560px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.93) 48%, rgba(255,255,255,.35) 100%),
    url("assets/img/stock-designer.jpg") center / cover no-repeat;
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 420px;
  height: 420px;
  right: -150px;
  bottom: -220px;
  border-radius: 50%;
  background: rgba(13, 110, 253, .22);
  filter: blur(8px);
}

.card, .border, .rounded-4{
  border-radius: var(--radius) !important;
}

.services-showcase {
  position: relative;
  background:
    radial-gradient(circle at 10% 10%, rgba(13,110,253,.12), transparent 30%),
    radial-gradient(circle at 90% 85%, rgba(25,135,84,.12), transparent 28%),
    var(--soft);
}

.services-showcase .card {
  border: 1px solid rgba(255,255,255,.8) !important;
  background: rgba(255,255,255,.76);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(25, 45, 70, .08) !important;
  transition: transform .25s ease, box-shadow .25s ease;
}

.services-showcase .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(25, 45, 70, .14) !important;
}

.feature-item {
  border-left: 3px solid #0d6efd;
  background: linear-gradient(135deg, #fff, #f7faff);
  border-radius: .35rem 1.8rem 1.8rem .35rem;
  box-shadow: 0 12px 32px rgba(25,45,70,.07);
}

.contact-banner {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(8,25,42,.96), rgba(8,25,42,.70)),
    url("assets/img/stock-editor.jpg") center 48% / cover no-repeat;
}

.page-surface {
  min-height: calc(100vh - 140px);
  background:
    radial-gradient(circle at 0 0, rgba(13,110,253,.10), transparent 28%),
    radial-gradient(circle at 100% 100%, rgba(25,135,84,.09), transparent 30%),
    #f8fafc;
}

.service-item,
.contact-panel {
  border: 1px solid rgba(255,255,255,.82);
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(12px);
  border-radius: 1.6rem .55rem 1.6rem .55rem;
  box-shadow: 0 16px 42px rgba(25,45,70,.09);
  transition: transform .25s ease, box-shadow .25s ease;
}

.service-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(25,45,70,.14);
}

.visual-header {
  position: relative;
  background:
    linear-gradient(90deg, rgba(5,29,48,.94), rgba(5,29,48,.46)),
    url("assets/img/stock-editor.jpg") center 48% / cover no-repeat;
}

.text-white-75 {
  color: rgba(255,255,255,.78);
}

.portfolio-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center;
}

.card {
  overflow: hidden;
}

.card-img-top {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.card:hover .portfolio-img {
  transform: scale(1.03);
}

.portfolio-img {
  transition: transform 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-img,
  .services-showcase .card,
  .service-item {
    transition: none;
  }
}

@media (max-width: 991.98px) {
  .hero {
    min-height: auto;
    background:
      linear-gradient(rgba(255,255,255,.94), rgba(255,255,255,.94)),
      url("assets/img/stock-designer.jpg") center / cover no-repeat;
  }
}