:root {
      --primary: #2563eb;
      --primary-light: #dbeafe;
      --primary-dark: #1d4ed8;
      --accent: #22c55e;
      --bg: #0b1220;
      --bg-alt: #020617;
      --text: #e5e7eb;
      --muted: #9ca3af;
      --card-bg: #020617;
      --border: #1f2937;
      --radius-lg: 18px;
      --radius-md: 12px;
      --radius-pill: 999px;
      --shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.6);
      --shadow-subtle: 0 10px 30px rgba(15, 23, 42, 0.4);
      --transition-fast: 180ms ease-out;
    }

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

    body {
      font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
      background: radial-gradient(circle at top, #0f172a 0, #020617 45%, #000 100%);
      color: var(--text);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    img {
      max-width: 100%;
      display: block;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .page-wrapper {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    .container {
      width: 100%;
      max-width: 1120px;
      margin: 0 auto;
      padding: 0 1.25rem;
    }

    /* Header */
    header {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(14px);
      background: linear-gradient(to bottom, rgba(2, 6, 23, 0.95), rgba(2, 6, 23, 0.82), transparent);
      border-bottom: 1px solid rgba(30, 64, 175, 0.2);
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 0.25rem;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: -40px;
      margin-bottom: -40px;

    }

    nav ul {
      display: flex;
      gap: 1.5rem;
      list-style: none;
      font-size: 0.9rem;
    }

    nav a {
      position: relative;
      color: var(--muted);
      transition: color var(--transition-fast);
    }

    nav a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -0.25rem;
      width: 0;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(to right, var(--primary), var(--accent));
      transition: width 180ms ease-out;
    }

    nav a:hover {
      color: var(--text);
    }

    nav a:hover::after {
      width: 100%;
    }

    .nav-cta {
      display: flex;
      align-items: center;
      gap: 0.6rem;
    }

    .pill-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.2rem 0.65rem;
      border-radius: var(--radius-pill);
      border: 1px solid rgba(148, 163, 184, 0.4);
      font-size: 0.7rem;
      color: var(--muted);
      background: radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.2), rgba(15, 23, 42, 0.9));
    }

    .pill-dot {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: #22c55e;
      box-shadow: 0 0 10px rgba(34, 197, 94, 0.9);
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      border-radius: var(--radius-pill);
      padding: 0.55rem 1.15rem;
      font-size: 0.85rem;
      font-weight: 500;
      border: 1px solid transparent;
      cursor: pointer;
      transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
      white-space: nowrap;
    }

    .btn-primary {
      background: linear-gradient(135deg, #2563eb, #22c55e);
      color: #e5e7eb;
      box-shadow: 0 16px 35px rgba(37, 99, 235, 0.55);
    }

    .btn-primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 20px 45px rgba(37, 99, 235, 0.75);
    }

    .btn-outline {
      background: transparent;
      border-color: rgba(148, 163, 184, 0.5);
      color: var(--muted);
    }

    .btn-outline:hover {
      border-color: rgba(59, 130, 246, 0.8);
      color: var(--text);
      background: radial-gradient(circle at top, rgba(37, 99, 235, 0.18), transparent);
    }

    /* Hero */
    main {
      flex: 1;
    }

    .hero {
      padding: 4.5rem 0 3.5rem;
    }

    .hero-inner {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.1fr);
      gap: 3.5rem;
      align-items: center;
    }

    .hero-kicker {
      margin-bottom: 1.1rem;
      display: flex;
      align-items: center;
      gap: 0.6rem;
      flex-wrap: wrap;
    }

    .hero-kicker span {
      font-size: 0.75rem;
      color: var(--muted);
    }

    .hero-title {
      font-size: clamp(2.35rem, 4vw, 3.2rem);
      line-height: 1.11;
      font-weight: 600;
      margin-bottom: 0.85rem;
      letter-spacing: 0.02em;
    }

    .hero-title span.gradient {
      background: linear-gradient(135deg, #60a5fa, #22c55e);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero-subtitle {
      font-size: 0.96rem;
      color: var(--muted);
      max-width: 32rem;
      margin-bottom: 1.6rem;
    }

    .hero-cta {
      display: flex;
      align-items: center;
      gap: 0.9rem;
      flex-wrap: wrap;
      margin-bottom: 1.5rem;
    }

    .hero-note {
      font-size: 0.8rem;
      color: var(--muted);
    }

    .hero-note strong {
      font-weight: 500;
      color: #e5e7eb;
    }

    .hero-secondary {
      display: flex;
      gap: 1.5rem;
      align-items: center;
      flex-wrap: wrap;
    }

    .hero-secondary-item {
      font-size: 0.8rem;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .hero-badge-dot {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: #38bdf8;
    }

    /* Hero visual */
    .hero-visual {
      position: relative;
    }

    .glass-panel {
      background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.2), rgba(15, 23, 42, 0.95));
      border-radius: 26px;
      border: 1px solid rgba(148, 163, 184, 0.4);
      padding: 1.4rem 1.35rem;
      box-shadow: var(--shadow-soft);
      position: relative;
      overflow: hidden;
    }

    .glass-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at -10% -20%, rgba(56, 189, 248, 0.2), transparent 55%);
      pointer-events: none;
    }

    .glass-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1.2rem;
    }

    .glass-dots {
      display: flex;
      gap: 0.3rem;
    }

    .glass-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #1f2937;
    }

    .glass-dot:nth-child(1) { background: #f97373; }
    .glass-dot:nth-child(2) { background: #fbbf24; }
    .glass-dot:nth-child(3) { background: #34d399; }

    .glass-title {
      font-size: 0.78rem;
      color: var(--muted);
    }

    .stacked-cards {
      display: grid;
      gap: 0.8rem;
    }

    .card {
      border-radius: var(--radius-lg);
      padding: 0.9rem 1rem;
      background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.15), rgba(15, 23, 42, 0.95));
      border: 1px solid rgba(30, 64, 175, 0.6);
      box-shadow: var(--shadow-subtle);
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.4rem;
    }

    .card-title {
      font-size: 0.85rem;
      font-weight: 500;
    }

    .card-tag {
      font-size: 0.68rem;
      padding: 0.18rem 0.5rem;
      border-radius: var(--radius-pill);
      border: 1px solid rgba(148, 163, 184, 0.5);
      color: var(--muted);
    }

    .card-body {
      font-size: 0.78rem;
      color: var(--muted);
    }

    .metrics-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-top: 0.5rem;
      font-size: 0.7rem;
      color: var(--muted);
    }

    .metric-value {
      font-size: 0.9rem;
      font-weight: 500;
      color: #e5e7eb;
    }

    .pill-metric {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.15rem 0.55rem;
      border-radius: var(--radius-pill);
      background: rgba(34, 197, 94, 0.12);
      color: #bbf7d0;
      font-size: 0.7rem;
    }

    .pill-metric span {
      font-size: 0.9rem;
    }

    .future-note {
      margin-top: 0.7rem;
      font-size: 0.75rem;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }

    .future-tag {
      font-size: 0.7rem;
      padding: 0.1rem 0.6rem;
      border-radius: var(--radius-pill);
      border: 1px dashed rgba(148, 163, 184, 0.5);
    }

    .floating-badge {
      position: absolute;
      right: 20px;
      bottom: 20px;
      transform: translateY(-40%);
      border-radius: var(--radius-lg);
      padding: 0.8rem 1.2rem;
      max-width: 16rem;
      background: radial-gradient(circle at top left, rgba(34, 197, 94, 0.25), rgba(15, 23, 42, 0.98));
      border: 1px solid rgba(34, 197, 94, 0.5);
      font-size: 0.72rem;
      color: var(--muted);
      box-shadow: 0 18px 40px rgba(22, 163, 74, 0.5);
    }

    .floating-badge strong {
      color: #bbf7d0;
      font-weight: 500;
      display: block;
    font-size: 0.78rem;
    line-height: 1.4;
    margin-bottom: 0.3rem;

    }

    .floating-badge span {
      display: block;
      font-size: 0.7rem;
      line-height: 1.4;
      color: #9ca3af;
      margin-top: 0.15rem;
    }

    /* Services section */
    .section {
      padding: 0 0 4rem;
    }

    .section-header {
      text-align: center;
      margin-bottom: 2.4rem;
    }

    .section-kicker {
      font-size: 0.8rem;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.18em;
      margin-bottom: 0.4rem;
    }

    .section-title {
      font-size: 1.4rem;
      margin-bottom: 0.4rem;
    }

    .section-subtitle {
      font-size: 0.9rem;
      color: var(--muted);
      max-width: 30rem;
      margin: 0 auto;
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1.25rem;
    }

    .service-card {
      background: radial-gradient(circle at top, rgba(30, 64, 175, 0.22), rgba(15, 23, 42, 0.98));
      border-radius: var(--radius-lg);
      border: 1px solid rgba(30, 64, 175, 0.6);
      padding: 1.1rem 1.1rem 1.2rem;
      box-shadow: var(--shadow-subtle);
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
    }

    .service-icon {
      width: 28px;
      height: 28px;
      border-radius: 999px;
      background: radial-gradient(circle at 40% 0, #60a5fa, #1e40af);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem;
    }

    .service-title {
      font-size: 0.95rem;
      font-weight: 500;
    }

    .service-body {
      font-size: 0.8rem;
      color: var(--muted);
      flex: 1;
    }

    .service-tag {
      font-size: 0.72rem;
      padding: 0.2rem 0.6rem;
      border-radius: var(--radius-pill);
      border: 1px solid rgba(148, 163, 184, 0.5);
      align-self: flex-start;
      color: var(--muted);
    }

    /* CTA section */
    .cta {
      padding-bottom: 3rem;
    }

    .cta-box {
      border-radius: 22px;
      padding: 1.6rem 1.4rem;
      background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.35), rgba(15, 23, 42, 0.98));
      border: 1px solid rgba(59, 130, 246, 0.7);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1.2rem;
      box-shadow: var(--shadow-soft);
    }

    .cta-text-main {
      font-size: 1rem;
      font-weight: 500;
      margin-bottom: 0.25rem;
    }

    .cta-text-sub {
      font-size: 0.84rem;
      color: var(--muted);
    }

    .cta-actions {
      display: flex;
      align-items: center;
      gap: 0.7rem;
      flex-wrap: wrap;
    }

    .cta-contact {
      font-size: 0.8rem;
      color: var(--muted);
    }

    .cta-contact span {
      color: #e5e7eb;
    }

    /* Footer */
    footer {
      border-top: 1px solid rgba(15, 23, 42, 0.9);
      background: linear-gradient(to top, #020617, rgba(15, 23, 42, 0.9));
      padding: 1.4rem 0;
    }

    .footer-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      flex-wrap: wrap;
      font-size: 0.78rem;
      color: var(--muted);
    }

    .footer-links {
      display: flex;
      gap: 1.1rem;
      flex-wrap: wrap;
    }

    .footer-links a {
      color: var(--muted);
    }

    .footer-links a:hover {
      color: #e5e7eb;
    }

    /* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 1001;
}

.mobile-menu-toggle span {
  width: 25px;
  height: 3px;
  background: var(--text);
  margin: 2px 0;
  transition: 0.3s;
  border-radius: 3px;
}

.mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -6px);
}

/* Responsive Design */
@media (max-width: 1200px) {
  .container {
    padding: 0 2rem;
  }
  
  .hero-title {
    font-size: 2.8rem;
  }
}

@media (max-width: 900px) {
  .mobile-menu-toggle {
    display: flex;
  }

  .nav {
    position: relative;
    justify-content: center;
  }

  .logo {
    height: 150px;
    width: 150px;
    margin-top: -40;
    margin-bottom: -40;
  }

  .mobile-menu-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .lang-switch{
    display: flex;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  nav {
    position: fixed;
    top: 0;
    left: -100%;
    width: 80%;
    max-width: 400px;
    height: 100vh;
    background: var(--card-bg);
    border-right: 1px solid var(--border);
    transition: left 0.3s ease;
    z-index: 1000;
    padding: 6rem 2rem 2rem;
    overflow-y: auto;
  }

  nav.active {
    left: 0;
  }

  nav ul {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  nav ul li a {
    font-size: 1.1rem;
    padding: 1rem;
    border-radius: var(--radius-md);
    transition: background 0.2s ease;
    color: var(--text);
  }

  nav ul li a:hover {
    background: rgba(59, 130, 246, 0.1);
    color: white;
  }

  .nav-cta {
    display: none;
  }

  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }

  .hero {
    padding-top: 3.2rem;
    padding-bottom: 4rem;
  }

  .hero-visual {
    order: 1;
  }

  .hero-title {
    font-size: 2.4rem;
  }

  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 1.5rem;
  }

  .hero-title {
    font-size: 2.2rem;
    line-height: 1.2;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

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

  .section-subtitle {
    font-size: 0.95rem;
  }

  .cta-box {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
    padding: 2rem 1.5rem;
  }

  .cta-actions {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .services-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }

  .pricing-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }
}

@media (max-width: 640px) {
  .container {
    padding: 0 1rem;
  }

  .hero {
    padding: 2rem 0 3rem;
  }

  .hero-title {
    font-size: 2rem;
    line-height: 1.1;
  }

  .hero-subtitle {
    font-size: 0.95rem;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 1rem;
  }

  .hero-buttons .btn {
    width: 100%;
    text-align: center;
  }

  .service-card {
    padding: 1.5rem;
  }

  .cta-box {
    padding: 1.5rem 1rem;
  }

  .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .footer-links {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 1.8rem;
  }

  .section-title {
    font-size: 1.6rem;
  }

  .service-card,
  .pricing-card,
  .portfolio-card {
    padding: 1.25rem;
  }

  .modal-content {
    padding: 1.5rem;
    max-width: calc(100vw - 2rem);
  }

  .modal-title {
    font-size: 1.3rem;
  }

  .modal-form input,
  .modal-form textarea {
    padding: 0.8rem;
    font-size: 0.95rem;
  }
  .lang-switch {
    display: flex;
    justify-content: left;
    margin-left: 0px;
  
  }
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Modal Base */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 1rem;
}


.modal.active {
  display: flex;
}


.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
}

.modal-content {
  position: relative;
  background: var(--card-bg);
  padding: 2.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  width: 100%;
  max-width: 520px;
  overflow-y: auto;
  z-index: 101;
  animation: fadeIn 0.25s ease-out;
}


@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.6rem;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.modal-close:hover {
  color: var(--text);
}

.modal-title {
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.modal-subtitle {
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.modal-form .form-group {
  margin-bottom: 1.2rem;
}

.modal-form input,
.modal-form textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: #0f172a;
  color: var(--text);
  font-size: 1rem;
  transition: border var(--transition-fast), background var(--transition-fast);
}

.modal-form input:focus,
.modal-form textarea:focus {
  border-color: var(--primary);
  background: #0b1220;
  outline: none;
}

.cta-social {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.social-link svg {
  transition: opacity 0.2s ease;
}

.social-link:hover svg {
  opacity: 0.7;
}

/* Portfolio Grid */
/* Portfolio Grid */
.portfolio-grid {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Portfolio Card */
.portfolio-card {
  background: radial-gradient(circle at top, rgba(30, 64, 175, 0.22), rgba(15, 23, 42, 0.98));
  border-radius: var(--radius-lg);
  border: 1px solid rgba(30, 64, 175, 0.6);
  padding: 1.1rem 1.1rem 1.2rem;
  box-shadow: var(--shadow-subtle);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* Image */
.portfolio-image img {
  width: 100%;
  border-radius: var(--radius-md);
  object-fit: cover;
}

/* Title */
.portfolio-title {
  font-size: 0.95rem;
  font-weight: 500;
}

/* Body */
.portfolio-body {
  font-size: 0.8rem;
  color: var(--muted);
  flex: 1;
}

/* Link */
.portfolio-link {
  font-size: 0.8rem;
  font-weight: 500;
  color: #60a5fa;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.portfolio-link:hover {
  opacity: 0.7;
}

.lang-switch button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-weight: 600;
  cursor: pointer;
  margin-left: 8px;
  color: var(--text);
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
  z-index: 1000;
  position: relative;
}

.lang-switch button:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

.featured {
  border: 2px solid #6c5cff;
  transform: scale(1.05);
}

.about-text {
  font-size: 1rem;
  color: var(--muted);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
  margin-top: 4rem;
  max-width: 700px;
  text-align: center;
  padding: 1rem;
}

/* Comfortable gutters; higher specificity prevents Tailwind's container utility
   from stretching content too close to the viewport edge. */
body .container {
  width: min(1120px, calc(100% - 96px));
  max-width: none;
  margin-inline: auto;
}

@media (max-width: 760px) {
  body .container {
    width: calc(100% - 36px);
  }
}

/* ===== 2026 premium redesign layer ===== */
:root{--ink:#070b12;--panel:#0d1420;--panel-2:#111b2a;--white:#f7f9fc;--silver:#98a6b8;--cyan:#68dff0;--indigo:#7c83ff;--hair:rgba(160,180,205,.14);--ease:cubic-bezier(.22,1,.36,1)}
html{scroll-behavior:smooth;scroll-padding-top:90px}body{background:var(--ink);color:var(--white);overflow-x:hidden}body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.22;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,#000,transparent 85%)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:200;background:rgba(255,255,255,.03)}.scroll-progress span{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--cyan),var(--indigo));will-change:transform}
header{transition:background .35s,border-color .35s,box-shadow .35s}header.is-scrolled{background:rgba(7,11,18,.91);border-color:rgba(160,180,205,.18);box-shadow:0 12px 40px rgba(0,0,0,.22)}
nav a::after{height:1px;background:var(--cyan);bottom:-7px}.lang-switch button.is-active{color:#071018;background:var(--cyan)}
.hero{min-height:calc(100vh - 78px);display:block;padding:92px 0 72px}.hero>.container{min-height:620px;display:flex;align-items:center}.hero::before{content:"";position:absolute;width:720px;height:720px;right:-260px;top:-230px;border:1px solid rgba(104,223,240,.09);border-radius:50%;box-shadow:0 0 0 110px rgba(104,223,240,.018),0 0 0 220px rgba(124,131,255,.014);animation:orbit 18s linear infinite}.hero-copy>*{opacity:0;transform:translateY(22px);animation:hero-in .9s var(--ease) forwards}.hero-copy>:nth-child(1){animation-delay:.08s}.hero-copy>:nth-child(2){animation-delay:.16s}.hero-copy>:nth-child(3){animation-delay:.25s}.hero-copy>:nth-child(4){animation-delay:.34s}.hero-copy>:nth-child(5){animation-delay:.42s}.hero-copy>:nth-child(7){animation-delay:.5s}.hero-title{font-size:clamp(3.25rem,5.25vw,5.4rem);max-width:780px}.hero-title .gradient{background:linear-gradient(100deg,#eefeff 0%,var(--cyan) 52%,#a3a8ff 100%);-webkit-background-clip:text;background-clip:text}.hero-subtitle{max-width:600px;line-height:1.75}.hero-visual{opacity:0;animation:visual-in 1.15s .28s var(--ease) forwards}.glass-panel{--rx:0deg;--ry:-3deg;isolation:isolate;transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .25s ease;border-color:rgba(147,197,253,.18);box-shadow:0 44px 100px rgba(0,0,0,.44)}.glass-panel::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at var(--mx,20%) var(--my,10%),rgba(104,223,240,.14),transparent 35%);pointer-events:none}.glass-panel .card{transition:transform .3s var(--ease),border-color .3s}.glass-panel .card:hover{transform:translateX(-4px);border-color:rgba(104,223,240,.25)}
.about-text{font-size:1.05rem;line-height:1.85}.trust-strip{border-block:1px solid var(--hair);background:rgba(255,255,255,.016)}.trust-grid{display:grid;grid-template-columns:1.7fr repeat(3,1fr);align-items:stretch}.trust-grid>*{padding:34px 28px;border-right:1px solid var(--hair)}.trust-grid>*:first-child{padding-left:0}.trust-grid>*:last-child{border-right:0}.eyebrow{display:block;color:var(--cyan);font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.16em}.trust-intro p{max-width:280px;margin-top:7px;color:#c5cfdb;font-size:.88rem}.stat{display:flex;flex-direction:column;justify-content:center}.stat strong{font-size:2.35rem;line-height:1;font-weight:700;letter-spacing:-.06em}.stat span{margin-top:7px;color:#758398;font-size:.68rem;text-transform:uppercase;letter-spacing:.1em}
.section{position:relative;padding:120px 0}.section-header{margin-bottom:56px}.section-title{max-width:720px}.services-grid{gap:18px}.service-card{position:relative;overflow:hidden;min-height:300px;padding:30px}.service-card::after{content:"";position:absolute;width:160px;height:160px;right:-90px;bottom:-100px;border:1px solid rgba(104,223,240,.12);border-radius:50%;transition:transform .55s var(--ease),opacity .4s}.service-card:hover::after{transform:scale(1.8);opacity:.7}.service-card:hover{transform:translateY(-8px);box-shadow:0 30px 70px rgba(0,0,0,.28)}.service-icon{font-size:.75rem}.service-title{font-size:1.15rem}.service-body{line-height:1.75}
#pricing{background:linear-gradient(180deg,transparent,rgba(124,131,255,.035),transparent)}#pricing .service-card{min-height:420px}#pricing .service-card:nth-child(3){border-color:rgba(104,223,240,.4);background:linear-gradient(145deg,rgba(18,39,54,.92),rgba(11,18,31,.95));box-shadow:0 25px 70px rgba(31,119,148,.11)}#pricing .service-card>h3[style]{font-size:1.65rem;letter-spacing:-.04em}
.why-section{border-block:1px solid var(--hair);background:#090e17}.why-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:100px}.why-grid .section-header{position:sticky;top:130px;align-self:start;margin:0}.principles{border-top:1px solid var(--hair)}.principle{display:grid;grid-template-columns:54px 1fr;gap:20px;padding:30px 0;border-bottom:1px solid var(--hair)}.principle>span{color:var(--cyan);font-size:.68rem;font-weight:700}.principle h3{font-size:1.2rem;margin-bottom:8px}.principle p{max-width:510px;color:var(--silver);font-size:.84rem}
.portfolio-grid{gap:24px}.portfolio-card{position:relative;padding:12px 12px 26px}.portfolio-image{overflow:hidden}.portfolio-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 65%,rgba(7,11,18,.35));pointer-events:none}.portfolio-image img{transition:transform .8s var(--ease),filter .5s}.portfolio-card:hover img{transform:scale(1.055);filter:saturate(1.12)}.portfolio-card:hover{transform:translateY(-7px)}.portfolio-link{display:inline-flex;align-items:center;gap:8px}.portfolio-link::after{content:"↗";transition:transform .25s}.portfolio-link:hover::after{transform:translate(3px,-3px)}
.process-section{overflow:hidden;background:rgba(255,255,255,.012)}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}.process-step{position:relative;min-height:260px;padding:30px 28px;border-right:1px solid var(--hair)}.process-step:last-child{border:0}.process-step>span{display:block;color:var(--cyan);font-size:.65rem;font-weight:700;margin-bottom:74px}.process-step h3{font-size:1.15rem;margin-bottom:10px}.process-step p{color:var(--silver);font-size:.78rem}.process-step::before{content:"";position:absolute;top:-4px;left:28px;width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 16px var(--cyan)}
.results-section{padding:20px 0 110px}.results-card{position:relative;padding:70px 80px;border:1px solid var(--hair);border-radius:30px;background:radial-gradient(circle at 85% 10%,rgba(124,131,255,.14),transparent 36%),#0b121e}.quote-mark{position:absolute;top:26px;right:54px;color:rgba(104,223,240,.14);font:800 8rem/1 Georgia}.results-card blockquote{max-width:900px;font-size:clamp(1.65rem,3vw,3rem);line-height:1.25;letter-spacing:-.04em}.result-meta{display:flex;justify-content:space-between;gap:20px;margin-top:45px;padding-top:20px;border-top:1px solid var(--hair);color:#7f8da0;font-size:.68rem;text-transform:uppercase;letter-spacing:.1em}
.cta-box{overflow:hidden}.cta-box::after{content:"";position:absolute;width:220px;height:220px;right:-60px;bottom:-120px;border:1px solid rgba(104,223,240,.15);border-radius:50%;box-shadow:0 0 0 48px rgba(104,223,240,.025)}.btn{position:relative;overflow:hidden}.btn::before{content:"";position:absolute;inset:0;transform:translateX(-105%);background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transition:transform .55s}.btn:hover::before{transform:translateX(105%)}
.will-reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease) var(--delay,0ms),transform .8s var(--ease) var(--delay,0ms)}.will-reveal.is-visible{opacity:1;transform:none}
@keyframes hero-in{to{opacity:1;transform:none}}@keyframes visual-in{from{opacity:0;transform:translateY(28px) scale(.975)}to{opacity:1;transform:none}}@keyframes orbit{to{transform:rotate(360deg)}}
@media(max-width:980px){.trust-grid{grid-template-columns:1.4fr repeat(3,1fr)}.trust-grid>*{padding:28px 18px}.why-grid{grid-template-columns:1fr;gap:50px}.why-grid .section-header{position:static}.process-grid{grid-template-columns:repeat(2,1fr)}.process-step:nth-child(2){border-right:0}.process-step:nth-child(-n+2){border-bottom:1px solid var(--hair)}}
@media(max-width:760px){body .container{width:calc(100% - 36px)}.mobile-menu-toggle{display:flex!important;width:42px;height:42px;align-items:center;justify-content:center}.hero{min-height:auto;padding:56px 0 46px;max-width:none}.hero>.container{min-height:0;display:block}.hero::before{width:390px;height:390px;right:-240px;top:-90px}.hero-inner{gap:48px}.hero-title{font-size:clamp(2.65rem,13vw,3.7rem)}.hero-subtitle{font-size:.94rem}.hero-secondary{gap:12px}.glass-panel{transform:none}.about-text{clear:both}.trust-grid{grid-template-columns:repeat(3,1fr)}.trust-intro{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--hair)}.trust-grid>*{padding:22px 10px}.trust-grid>*:first-child{padding-left:0}.stat strong{font-size:1.65rem}.stat span{font-size:.55rem}.section{padding:82px 0}.section-header{margin-bottom:38px}.section-title{font-size:clamp(2.1rem,10vw,3rem)}.service-card{min-height:260px}#pricing .service-card{min-height:380px}.why-grid{gap:38px}.principle{grid-template-columns:38px 1fr}.portfolio-grid{grid-template-columns:1fr}.process-grid{grid-template-columns:1fr}.process-step{min-height:auto;padding:28px 12px;border-right:0;border-bottom:1px solid var(--hair)!important}.process-step:last-child{border-bottom:0!important}.process-step>span{margin-bottom:38px}.results-section{padding-bottom:80px}.results-card{padding:52px 24px}.quote-mark{right:20px;font-size:6rem}.result-meta{flex-direction:column}.cta{padding-bottom:80px}.cta-box{padding:38px 24px}.modal{padding:12px}.modal-content{max-height:92vh}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero::before{animation:none}.hero-copy>*,.hero-visual{opacity:1;transform:none;animation:none}.will-reveal{opacity:1;transform:none;transition:none}.glass-panel{transform:none!important}.scroll-progress{display:none}}

@media (max-width:760px) {
  header .container,
  header .nav,
  .hero,
  .hero > .container,
  .hero-inner,
  .hero-copy {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  header .container { width: calc(100% - 36px); }
  .hero { overflow: hidden; }
  .hero-title,
  .hero-subtitle,
  .hero-note { max-width: 100%; overflow-wrap: break-word; }
  .hero-title { font-size: clamp(2.55rem,12.2vw,3.35rem); }
  .mobile-menu-toggle { right: 0!important; visibility: visible!important; opacity: 1!important; }
}

/* Modern Tailwind-era visual refresh */
body{font-family:Inter,system-ui,sans-serif;background:#070b14;color:#f8fafc;letter-spacing:-.01em}
body:before{content:"";position:fixed;inset:0;z-index:-2;background:radial-gradient(circle at 12% 8%,rgba(34,211,238,.12),transparent 28%),radial-gradient(circle at 88% 28%,rgba(99,102,241,.13),transparent 30%),linear-gradient(180deg,#080d18,#060911 60%,#080c15)}
header{height:auto;background:rgba(7,11,20,.72);border-bottom:1px solid rgba(148,163,184,.15);backdrop-filter:blur(20px)}
.nav{min-height:78px;padding:0;gap:28px}.logo{width:108px;height:108px;object-fit:contain;margin:-15px 0}.nav>a:first-child{margin-right:auto}
nav ul{gap:28px}nav a{font-size:.84rem;font-weight:600;color:#a8b3c5}.nav-cta{gap:10px}
.pill-badge{border-color:rgba(103,232,249,.2);background:rgba(8,145,178,.08);padding:7px 11px;font-weight:600}.lang-switch{display:flex;padding:3px;border:1px solid rgba(148,163,184,.15);border-radius:999px;background:rgba(255,255,255,.03)}.lang-switch button{border:0;background:transparent;color:#94a3b8;padding:5px 8px;border-radius:999px;font:600 .68rem Inter;cursor:pointer}
.btn{min-height:44px;padding:0 18px;font-size:.82rem;font-weight:700}.btn-primary{color:#061018;background:linear-gradient(135deg,#a5f3fc,#67e8f9 45%,#818cf8);box-shadow:0 14px 40px rgba(34,211,238,.18)}.btn-outline{background:rgba(255,255,255,.035);border-color:rgba(148,163,184,.15);color:#d7e0ec}
.hero{padding:104px 0 60px}.hero-inner{grid-template-columns:1.08fr .92fr;gap:68px}.hero-title{max-width:720px;font-size:clamp(3rem,5.3vw,5.1rem);line-height:1.02;letter-spacing:-.055em;font-weight:800;margin-bottom:24px}.hero-title span.gradient{background:linear-gradient(100deg,#a5f3fc 5%,#67e8f9 38%,#818cf8 95%);background-clip:text;-webkit-background-clip:text}.hero-subtitle{font-size:1.04rem;color:#a7b3c5;margin-bottom:30px}.hero-cta{gap:12px;margin-bottom:22px}.hero-secondary{margin-top:24px}
.glass-panel{padding:18px;border-color:rgba(148,163,184,.2);border-radius:28px;background:linear-gradient(145deg,rgba(18,30,50,.82),rgba(8,13,24,.92));box-shadow:0 30px 80px rgba(0,0,0,.35);transform:perspective(1000px) rotateY(-3deg)}.card{padding:18px;border-color:rgba(148,163,184,.13);border-radius:17px;background:rgba(255,255,255,.035)}
.about-text{width:min(900px,calc(100% - 96px));max-width:900px;margin:88px auto 0;padding:30px 34px;border-left:2px solid #67e8f9;text-align:left;color:#a3afc1;background:linear-gradient(90deg,rgba(103,232,249,.06),transparent)}
.section{padding:104px 0}.section-header{max-width:700px;margin-bottom:48px}.section-kicker{color:#67e8f9;font-size:.72rem;font-weight:800;letter-spacing:.18em}.section-title{font-size:clamp(2.1rem,4vw,3.5rem);line-height:1.08;letter-spacing:-.04em;font-weight:750}.section-subtitle{color:#8e9baf;margin-top:16px}
.services-grid{grid-template-columns:repeat(3,1fr);gap:16px}.service-card{min-height:275px;padding:26px;border-color:rgba(148,163,184,.15);border-radius:22px;background:linear-gradient(145deg,rgba(16,26,45,.76),rgba(9,14,25,.88));transition:.3s ease}.service-card:hover{transform:translateY(-6px);border-color:rgba(103,232,249,.3);box-shadow:0 24px 60px rgba(0,0,0,.24)}.service-icon{width:42px;height:42px;margin-bottom:28px;border-color:rgba(103,232,249,.22);border-radius:13px;background:rgba(103,232,249,.07);color:#a5f3fc}.service-tag{color:#67e8f9}
.portfolio-grid{grid-template-columns:repeat(2,1fr);gap:22px}.portfolio-card{padding:12px 12px 22px;border-color:rgba(148,163,184,.15);border-radius:24px;background:rgba(13,21,36,.72)}.portfolio-image{aspect-ratio:16/9;border-radius:16px}.portfolio-image img{width:100%;height:100%;object-fit:cover}.portfolio-title{margin:20px 12px 8px}.portfolio-body{margin:0 12px 18px}.portfolio-link{margin:0 12px;color:#7dd3fc}
.cta{padding:56px 0 110px}.cta-box{grid-template-columns:1.3fr auto;padding:56px;border-color:rgba(103,232,249,.22);border-radius:30px;background:radial-gradient(circle at 90% 10%,rgba(99,102,241,.25),transparent 38%),linear-gradient(135deg,rgba(15,31,51,.95),rgba(9,15,27,.96));box-shadow:0 30px 80px rgba(0,0,0,.35)}.cta-text-main{font-size:clamp(1.8rem,3vw,2.8rem);line-height:1.12;font-weight:750;letter-spacing:-.04em}
.modal-content{border-radius:25px;background:#0c1423;box-shadow:0 30px 80px rgba(0,0,0,.35)}
@media(max-width:980px){.hero-inner{grid-template-columns:1fr}.services-grid{grid-template-columns:repeat(2,1fr)}.cta-box{grid-template-columns:1fr}}
@media(max-width:760px){.hero{padding:72px 0 36px}.hero-title{font-size:clamp(2.7rem,14vw,4rem)}.glass-panel{transform:none}.about-text{width:calc(100% - 36px);margin-top:60px;padding:24px 20px}.section{padding:78px 0}.services-grid,.portfolio-grid{grid-template-columns:1fr}.cta-box{padding:34px 24px}}

/* Phone header: reserve independent space for language, logo, and menu. */
@media (max-width: 760px) {
  .nav {
    position: relative;
    min-height: 68px;
    justify-content: center;
  }

  .nav > a:first-child {
    position: absolute;
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
  }

  .logo {
    width: 82px;
    height: 82px;
    margin: 0;
  }

  .lang-switch {
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 2;
    margin: 0;
    transform: translateY(-50%);
  }

  .mobile-menu-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    z-index: 2;
    margin: 0;
    transform: translateY(-50%);
  }
}

/* Final phone constraints (kept last to prevent legacy rules from widening the page). */
@media (max-width: 760px) {
  body .container { width: calc(100% - 36px); max-width: none; }
  header .container { width: calc(100% - 36px); }
  .nav { width:100%; min-width:0; }
  .nav > a:first-child { margin:0; }
  .mobile-menu-toggle { display:flex!important; right:0!important; visibility:visible!important; opacity:1!important; }
  .hero { width:100%; max-width:100%; min-height:auto; padding:56px 0 46px; overflow:hidden; }
  .hero > .container { width:calc(100% - 36px); max-width:none; min-height:0; display:block; }
  .hero-inner,.hero-copy { width:100%; max-width:100%; min-width:0; grid-template-columns:minmax(0,1fr); }
  .hero-copy { width:calc(100% - 18px); }
  .hero-title { max-width:100%; font-size:clamp(2.45rem,11.6vw,3.2rem); overflow-wrap:break-word; }
  .hero-subtitle,.hero-note { max-width:100%; overflow-wrap:break-word; }
  .glass-panel { transform:none; }
  .mobile-menu-toggle {
    display:flex!important;
    position:absolute!important;
    top:50%!important;
    right:4px!important;
    width:42px!important;
    min-width:42px!important;
    height:42px!important;
    border:1px solid rgba(148,163,184,.25)!important;
    border-radius:50%;
    transform:translateY(-50%)!important;
  }
}

/* Consistent section-title alignment. */
.section > .container > .section-header {
  margin-inline: auto;
  text-align: center;
}

.section > .container > .section-header .section-title,
.section > .container > .section-header .section-subtitle {
  margin-inline: auto;
}

.why-section .why-grid > .section-header {
  margin-inline: 0;
  text-align: left;
}

.why-section .section-header .section-title,
.why-section .section-header .section-subtitle {
  margin-inline: 0;
}

/* Lazy live website previews; screenshots remain underneath as fallbacks. */
.portfolio-image[data-live-preview] {
  position: relative;
  isolation: isolate;
  background: #0b111c;
}

.live-preview-viewport {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
  contain: strict;
  clip-path: inset(0);
}

.live-site-frame {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: 100%;
  border: 0;
  opacity: 0;
  pointer-events: none;
  transform-origin: top left;
  background: #fff;
  transition: opacity .55s var(--ease);
}

.portfolio-image.has-live-preview .live-site-frame {
  opacity: 1;
}

.live-preview-badge {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #effffc;
  background: rgba(5,12,20,.76);
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  backdrop-filter: blur(10px);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .4s ease .25s;
}

.portfolio-image.has-live-preview .live-preview-badge { opacity: 1; }
.live-preview-badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 10px #34d399;
}

/* Prevent transformed previews and decorative layers from widening mobile pages. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

.page-wrapper {
  position: relative;
  width: 100%;
  max-width: 100vw;
  overflow-x: clip!important;
  overflow-y: visible!important;
}

main {
  width: 100%;
  max-width: 100vw;
  overflow-x: clip!important;
  overflow-y: visible!important;
}

.page-wrapper,
main,
.section,
.cta,
.results-section,
.portfolio-grid,
.portfolio-card,
.portfolio-image {
  min-width: 0;
  max-width: 100%;
}

.portfolio-image[data-live-preview] {
  contain: size layout paint;
  overflow: hidden;
}

@media (max-width: 760px) {
  .portfolio-card,
  .results-card,
  .cta-box,
  .process-grid,
  .why-grid,
  .services-grid {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .live-site-frame { max-width:none; }

  .live-preview-viewport {
    width: 100%!important;
    max-width: 100%!important;
    overflow: hidden!important;
    contain: strict!important;
  }

  .cta-box::after,
  .hero::before {
    pointer-events: none;
    contain: strict;
  }
}

/* Viewport-anchored mobile navigation drawer. */
@media (max-width: 900px) {
  body.menu-open header {
    z-index: 200!important;
  }

  header {
    background: rgba(7,11,20,.97);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  #primary-navigation {
    position: fixed!important;
    z-index: 120!important;
    top: 0!important;
    right: -100%!important;
    bottom: 0!important;
    left: auto!important;
    width: min(360px, 88vw)!important;
    height: 100vh!important;
    height: 100dvh!important;
    max-height: 100vh!important;
    max-height: 100dvh!important;
    padding: 92px 22px 28px!important;
    overflow-x: hidden!important;
    overflow-y: auto!important;
    background: #0a111e!important;
    border: 0!important;
    border-left: 1px solid rgba(148,163,184,.16)!important;
    box-shadow: -24px 0 70px rgba(0,0,0,.4);
    transform: none!important;
    transition: right .38s var(--ease)!important;
    overscroll-behavior: contain;
  }

  #primary-navigation.active {
    right: 0!important;
    left: auto!important;
  }

  #mobile-menu-overlay {
    position: fixed!important;
    z-index: 110!important;
    inset: 0!important;
    width: 100%!important;
    height: auto!important;
  }

  .mobile-menu-toggle.active {
    position: fixed!important;
    z-index: 150!important;
    top: 13px!important;
    right: 18px!important;
    left: auto!important;
    margin: 0!important;
    transform: none!important;
    background: rgba(12,20,34,.96)!important;
    border-color: rgba(104,223,240,.35)!important;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
  }
}

@media (max-width: 760px) {
  .portfolio-image img,
  .portfolio-card:hover .portfolio-image img {
    width: 100%;
    height: 100%;
    object-fit: contain!important;
    transform: none!important;
    filter: none!important;
  }

  .portfolio-image {
    background: #0b111c;
  }
}