/* Final premium polish layer for Adin Webdesign */

:root {
  --am-deep: #001f16;
  --am-deep-2: #062b20;
  --am-mint: #86efac;
  --am-mint-2: #44d17a;
  --am-paper: #f5f7f2;
  --am-ink: #101f18;
}

body {
  overflow-x: hidden;
}

.navbar {
  backdrop-filter: blur(18px);
}

.navbar.scrolled,
.navbar.menu-open {
  background: rgba(0, 31, 22, 0.86) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hero {
  min-height: 100svh;
  background:
    radial-gradient(circle at 78% 24%, rgba(134, 239, 172, 0.2), transparent 36%),
    linear-gradient(135deg, #00170f 0%, #04261b 54%, #00120d 100%) !important;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.34;
  background-image:
    linear-gradient(rgba(134, 239, 172, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(134, 239, 172, 0.08) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 82%);
}

.hero > .container {
  position: relative;
  z-index: 1;
}

.hero-title {
  max-width: 980px;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.gradient-text {
  background: linear-gradient(135deg, #86efac 0%, #44d17a 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-badge,
.availability-badge {
  border-color: rgba(134, 239, 172, 0.25) !important;
  background: rgba(134, 239, 172, 0.08) !important;
  color: var(--am-mint) !important;
}

.btn-primary,
.nav-cta,
.mobile-cta {
  color: #00170f !important;
  background: linear-gradient(135deg, var(--am-mint) 0%, #6ee79b 100%) !important;
  box-shadow: 0 18px 60px rgba(134, 239, 172, 0.22) !important;
}

.device-frame,
.pricing-card,
.portfolio-card,
.testimonial-card,
.service-card,
.process-card,
.contact-form-wrapper,
.lead-magnet-card {
  border-radius: 28px;
}

.pricing-card,
.service-card,
.portfolio-card,
.testimonial-card {
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.pricing-card:hover,
.service-card:hover,
.portfolio-card:hover,
.testimonial-card:hover {
  transform: translateY(-5px);
  border-color: rgba(134, 239, 172, 0.35);
  box-shadow: 0 26px 80px rgba(0, 45, 36, 0.18);
}

.pricing-featured {
  border-color: rgba(134, 239, 172, 0.5) !important;
  box-shadow: 0 30px 90px rgba(68, 209, 122, 0.18) !important;
}

.lead-magnet-section {
  background:
    radial-gradient(circle at 82% 24%, rgba(134, 239, 172, 0.14), transparent 34%),
    #00170f;
}

.lead-magnet-card {
  border: 1px solid rgba(134, 239, 172, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.26);
}

.contact {
  background:
    radial-gradient(circle at 76% 30%, rgba(134, 239, 172, 0.12), transparent 34%),
    linear-gradient(135deg, #00170f, #062b20);
}

.contact .section-title,
.contact .contact-subtitle,
.contact-info,
.contact-item,
.footer {
  color: #fff;
}

.contact-form-wrapper {
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.26);
}

.hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.cookie-consent {
  max-width: 380px;
  border-radius: 18px;
  border: 1px solid rgba(0, 31, 22, 0.1);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
}

.cookie-content {
  padding: 20px;
}

.cookie-header h3 {
  color: var(--am-ink);
}

.btn-cookie-primary {
  background: var(--am-deep) !important;
}

.chat-toggle {
  background: rgba(17, 24, 20, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(18px);
}

.chat-toggle:hover {
  background: linear-gradient(135deg, var(--am-mint), var(--am-mint-2)) !important;
}

@media (max-width: 760px) {
  .hero-title {
    font-size: clamp(3rem, 14vw, 4.3rem) !important;
    line-height: 0.92 !important;
    max-width: 100%;
  }

  .hero-subtitle,
  .section-subtitle {
    font-size: 1rem !important;
  }

  .live-chat {
    right: 14px !important;
    bottom: 14px !important;
  }

  .chat-toggle-inner {
    width: 56px;
    height: 56px;
    padding: 0 !important;
    justify-content: center;
  }

  .chat-toggle-text,
  .chat-toggle-badge {
    display: none !important;
  }

  .cookie-consent {
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
    max-width: none;
  }
}