/* ============================================================
   ACXENT.IT — Bootstrap 5 Custom CSS
   Versione: 1.0 (luglio 2026)
   Dipendenze: Bootstrap 5.3, Font Awesome 6, Google Fonts
   ============================================================ */

/* ------------------------------------------------------------
   1. GOOGLE FONTS
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');

/* ------------------------------------------------------------
   2. VARIABILI CSS — PALETTE ACXENT
   ------------------------------------------------------------ */
:root {
  --acx-color1:   #ffffff;     /* sfondo chiaro */
  --acx-color2:   #f9f9fb;     /* sfondo sezioni alternate */
  --acx-color3:   #f2f3f5;     /* sfondo sezioni grigio */
  --acx-color4:   #198fd9;     /* celeste Acxent — primary */
  --acx-color5:   #198fd9;     /* blu link e accenti */
  --acx-color6:   #434549;     /* grigio testo medio */
  --acx-color7:   #212326;     /* grigio testo scuro */
  --acx-color8:   #141617;     /* quasi nero, hero bg */
  --acx-custom1:  #013d85;     /* blu scuro, topbar/footer bar */

  /* Bootstrap primary override */
  --bs-primary:          var(--acx-color4);
  --bs-primary-rgb:      101, 189, 125;
  --bs-link-color:       var(--acx-color5);
  --bs-link-hover-color: var(--acx-color4);

  /* Tipografia base */
  --acx-font-body:   'Inter', sans-serif;
  --acx-font-ui:     'Roboto', sans-serif;

  /* Ombre */
  --acx-shadow-card: 0 4px 18px rgba(5, 21, 41, 0.07);
  --acx-shadow-nav:  0 8px 22px rgba(5, 21, 41, 0.08);
}

/* ------------------------------------------------------------
   3. RESET E BASE
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--acx-font-body);
  color: var(--acx-color7);
  background-color: var(--acx-color1);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--acx-font-ui);
  font-weight: 400;
  color: var(--acx-color7);
  line-height: 1.3;
}

a {
  color: var(--acx-color5);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--acx-color4);
}

img {
  max-width: 100%;
  height: auto;
}

/* Immagini contenuto con radius e shadow */
.acx-img {
  border-radius: 12px;
  box-shadow: var(--acx-shadow-card);
}

/* ------------------------------------------------------------
   4. UTILITIES GENERICHE
   ------------------------------------------------------------ */

/* Sfondi alternati */
.bg-acx-light {
  background-color: var(--acx-color1) !important;
}

.bg-acx-alt {
  background-color: var(--acx-color2) !important;
}

.bg-acx-gray {
  background-color: var(--acx-color3) !important;
}

.bg-acx-dark {
  background-color: var(--acx-color8) !important;
}

/* Padding verticale sezioni */
.section-py {
  padding-top: 80px;
  padding-bottom: 80px;
}

@media (max-width: 767.98px) {
  .section-py {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* Titoli sezione H2 con sottotitolo */
.acx-section-title {
  text-align: center;
  margin-bottom: 48px;
}

.acx-section-title h2 {
  font-size: 2rem;
  font-weight: 600;
  color: var(--acx-color7);
  margin-bottom: 14px;
}

.acx-section-title p {
  font-size: 1rem;
  color: var(--acx-color6);
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.8;
}

/* Testo colori */
.text-acx-primary { color: var(--acx-color4) !important; }
.text-acx-blue    { color: var(--acx-color5) !important; }
.text-acx-dark    { color: var(--acx-color7) !important; }
.text-acx-mid     { color: var(--acx-color6) !important; }

/* ------------------------------------------------------------
   5. BOTTONI CUSTOM
   ------------------------------------------------------------ */

/* Bottone celeste principale */
.btn-acx-primary {
  background-color: var(--acx-color4);
  color: #ffffff;
  font-family: var(--acx-font-ui);
  font-size: 1rem;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  padding: 14px 40px;
  display: inline-block;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 10px rgba(101, 189, 125, 0.30);
  cursor: pointer;
  text-decoration: none;
}

.btn-acx-primary:hover,
.btn-acx-primary:focus {
  background-color: #1380c5;
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(101, 189, 125, 0.40);
  transform: translateY(-1px);
}

.btn-acx-primary:active {
  transform: translateY(0);
}

/* Bottone quasi-nero */
.btn-acx-dark {
  background-color: var(--acx-color8);
  color: #ffffff;
  font-family: var(--acx-font-ui);
  font-size: 1rem;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  padding: 14px 40px;
  display: inline-block;
  transition: background-color 0.2s ease, transform 0.15s ease;
  cursor: pointer;
  text-decoration: none;
}

.btn-acx-dark:hover,
.btn-acx-dark:focus {
  background-color: #2a2d30;
  color: #ffffff;
  transform: translateY(-1px);
}

/* Mobile: bottoni full-width nella hero */
@media (max-width: 575.98px) {
  .acx-hero-buttons .btn-acx-primary,
  .acx-hero-buttons .btn-acx-dark {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 12px;
    border-radius: 0;
    padding: 18px 20px;
  }
}

/* ------------------------------------------------------------
   6. TOPBAR
   ------------------------------------------------------------ */
.acx-topbar {
  background-color: var(--acx-custom1);
  color: #ffffff;
  font-size: 12px;
  font-family: var(--acx-font-ui);
  padding: 6px 0;
}

.acx-topbar a {
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  transition: color 0.2s;
}

.acx-topbar a:hover {
  color: #ffffff;
}

.acx-topbar i {
  margin-right: 5px;
  font-size: 11px;
}

/* Layout topbar: sinistra | centro | destra */
.acx-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.acx-topbar__center {
  flex: 1;
  text-align: center;
}

@media (max-width: 575.98px) {
  .acx-topbar__center {
    display: none;
  }
  .acx-topbar__inner {
    justify-content: space-between;
  }
}

/* ------------------------------------------------------------
   7. NAVBAR
   ------------------------------------------------------------ */
.acx-navbar {
  background-color: #ffffff;
  box-shadow: var(--acx-shadow-nav);
  padding: 0;
  min-height: 68px;
  font-family: var(--acx-font-ui);
}

/* Logo */
.acx-navbar .navbar-brand img {
  max-width: 180px;
  height: auto;
}

/* Link menu */
.acx-navbar .nav-link {
  font-size: 14px;
  font-weight: 400;
  color: var(--acx-color7);
  text-transform: none;
  padding: 22px 12px;
  transition: color 0.2s ease;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.acx-navbar .nav-link:hover,
.acx-navbar .nav-link.active,
.acx-navbar .nav-link:focus {
  color: var(--acx-color4);
  border-bottom-color: var(--acx-color4);
}

/* Item speciale Shop con icona */
.acx-navbar .nav-link.acx-shop-link {
  color: var(--acx-color5);
  font-weight: 500;
}

.acx-navbar .nav-link.acx-shop-link:hover {
  color: var(--acx-color4);
}

/* Dropdown */
.acx-navbar .dropdown-menu {
  border: none;
  border-top: 3px solid var(--acx-color4);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 12px 32px rgba(5, 21, 41, 0.12);
  padding: 8px 0;
  min-width: 220px;
  animation: acxDropFade 0.18s ease;
}

@keyframes acxDropFade {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.acx-navbar .dropdown-item {
  font-size: 13.5px;
  color: var(--acx-color6);
  padding: 8px 20px;
  transition: background-color 0.15s, color 0.15s;
}

.acx-navbar .dropdown-item:hover,
.acx-navbar .dropdown-item:focus {
  background-color: var(--acx-color2);
  color: var(--acx-color4);
}

/* Caret personalizzato */
.acx-navbar .dropdown-toggle::after {
  border-top-color: var(--acx-color6);
  vertical-align: 0.2em;
}

/* Hamburger colore */
.acx-navbar .navbar-toggler {
  border: none;
  padding: 6px 10px;
}

.acx-navbar .navbar-toggler:focus {
  box-shadow: none;
}

.acx-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23212326' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Mobile collapse */
@media (max-width: 991.98px) {
  .acx-navbar .nav-link {
    padding: 10px 4px;
    border-bottom: 1px solid var(--acx-color3);
  }

  .acx-navbar .nav-link:last-child {
    border-bottom: none;
  }

  .acx-navbar .dropdown-menu {
    border-top: none;
    box-shadow: none;
    padding-left: 14px;
    animation: none;
  }
}

/* ------------------------------------------------------------
   8. HERO HOMEPAGE
   ------------------------------------------------------------ */
.acx-hero {
  background-color: var(--acx-color8);
  background-image:
    linear-gradient(152deg,
      var(--acx-color8) 0%,
      rgba(20, 22, 23, 0.15) 70%),
    url('/_img/bannerCode-1200x800.png');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  position: relative;
  padding: 9vw 0 0 0;
  overflow: hidden;
}

/* Su mobile: background solo colore (niente immagine) */
@media (max-width: 767.98px) {
  .acx-hero {
    background-image: linear-gradient(180deg, var(--acx-color8) 0%, #1e2124 100%);
    padding: 60px 0 0 0;
  }
}

/* Testo hero */
.acx-hero__content {
  text-align: center;
  padding-bottom: 5vw;
}

@media (max-width: 767.98px) {
  .acx-hero__content {
    padding-bottom: 60px;
  }
}

.acx-hero h1 {
  color: #ffffff;
  font-family: var(--acx-font-ui);
  font-size: clamp(1.75rem, 4vw, 3.1rem);
  font-weight: 400;
  margin-bottom: 20px;
  line-height: 1.25;
}

.acx-hero__sub {
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  line-height: 1.8;
  max-width: 640px;
  margin: 0 auto 36px;
}

/* Bottoni hero */
.acx-hero-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

@media (max-width: 575.98px) {
  .acx-hero-buttons {
    flex-direction: column;
    gap: 0;
    padding: 0 10px;
  }
}

/* Separatore mezza luna in basso */
.acx-hero__separator {
  display: block;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  margin-top: 40px;
}

@media (max-width: 767.98px) {
  .acx-hero__separator {
    margin-top: 30px;
  }
}

.acx-hero__separator svg {
  display: block;
  width: 100%;
  height: 60px;
}

/* ------------------------------------------------------------
   9. SEZIONE SERVIZI
   ------------------------------------------------------------ */
.acx-services {
  background-color: var(--acx-color1);
}

/* Card servizio */
.acx-service-card {
  text-align: center;
  padding: 16px 12px;
}

/* Icona cerchio celeste */
.acx-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: var(--acx-color4);
  color: #ffffff;
  font-size: 26px;
  margin: 0 auto 18px;
  transition: background-color 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}

.acx-service-card:hover .acx-icon-circle {
  background-color: var(--acx-color5);
  transform: scale(1.08);
}

.acx-service-card h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--acx-color7);
  margin-bottom: 10px;
}

.acx-service-card p {
  font-size: 0.92rem;
  color: var(--acx-color6);
  line-height: 1.7;
  margin-bottom: 0;
}

/* Grid layout servizi: 5 su desktop, 3 su tablet, 1 su mobile */
.acx-services-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 -8px;
}

.acx-services-row .acx-service-card {
  flex: 0 0 20%;
  max-width: 20%;
  padding-left: 8px;
  padding-right: 8px;
}

@media (max-width: 991.98px) {
  .acx-services-row .acx-service-card {
    flex: 0 0 33.333%;
    max-width: 33.333%;
    margin-bottom: 32px;
  }
}

@media (max-width: 575.98px) {
  .acx-services-row .acx-service-card {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 32px;
  }
}

/* ------------------------------------------------------------
   10. FOOTER
   ------------------------------------------------------------ */

/* Separatore celeste doppio sopra il footer */
.acx-footer-separator {
  border: none;
  border-top: 4px solid var(--acx-color4);
  box-shadow: 0 2px 0 rgba(101, 189, 125, 0.25);
  margin: 0;
}

/* Footer principale */
.acx-footer {
  background-color: var(--acx-color2);
  padding: 36px 0 24px;
}

/* Logo footer */
.acx-footer__logo img {
  max-width: 100px;
  height: auto;
  margin-bottom: 16px;
}

/* Nav link footer */
.acx-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  list-style: none;
  padding: 0;
}

.acx-footer__nav li a {
  font-size: 13.5px;
  color: var(--acx-color6);
  transition: color 0.2s;
}

.acx-footer__nav li a:hover {
  color: var(--acx-color4);
}

/* Copyright */
.acx-footer__copy {
  font-size: 12.5px;
  color: var(--acx-color6);
  text-align: center;
  line-height: 1.7;
}

/* Footer bar blu scuro */
.acx-footer-bar {
  background-color: var(--acx-custom1);
  padding: 8px 0;
}

.acx-footer-bar p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.80);
  text-align: center;
  margin: 0;
  font-family: var(--acx-font-ui);
}

/* ------------------------------------------------------------
   11. CARD GENERICHE (riutilizzabili nelle inner page)
   ------------------------------------------------------------ */
.acx-card {
  border: none;
  border-radius: 12px;
  box-shadow: var(--acx-shadow-card);
  background-color: var(--acx-color1);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  overflow: hidden;
}

.acx-card:hover {
  box-shadow: 0 8px 32px rgba(5, 21, 41, 0.13);
  transform: translateY(-3px);
}

.acx-card__body {
  padding: 28px 24px;
}

/* ------------------------------------------------------------
   12. OVERRIDE BOOTSTRAP — COLORE PRIMARY
   ------------------------------------------------------------ */

/* Bottoni Bootstrap .btn-primary → celeste Acxent */
.btn-primary {
  --bs-btn-bg:               var(--acx-color4);
  --bs-btn-border-color:     var(--acx-color4);
  --bs-btn-hover-bg:         #1380c5;
  --bs-btn-hover-border-color: #1380c5;
  --bs-btn-active-bg:        #0f6faa;
  --bs-btn-active-border-color: #0f6faa;
  --bs-btn-disabled-bg:      var(--acx-color4);
  --bs-btn-disabled-border-color: var(--acx-color4);
  color: #fff;
}

/* Outline primary */
.btn-outline-primary {
  --bs-btn-color:            var(--acx-color4);
  --bs-btn-border-color:     var(--acx-color4);
  --bs-btn-hover-bg:         var(--acx-color4);
  --bs-btn-hover-border-color: var(--acx-color4);
  --bs-btn-hover-color:      #fff;
  --bs-btn-active-bg:        #1380c5;
  --bs-btn-active-border-color: #1380c5;
  --bs-btn-active-color:     #fff;
}

/* Badge primary */
.badge.bg-primary {
  background-color: var(--acx-color4) !important;
}

/* Focus ring */
*:focus-visible {
  outline: 2px solid var(--acx-color4);
  outline-offset: 2px;
}

/* ── Powered by OpenClaw ── */
.acx-hero__badge {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.01em;
}
.acx-hero__badge strong {
  color: #fff;
  font-weight: 600;
}

.badge-tech {
  display: inline-block;
  background: rgba(25, 143, 217, 0.1);
  border: 1px solid rgba(25, 143, 217, 0.35);
  color: var(--acx-color4);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.2em 0.7em;
  border-radius: 2em;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
.badge-tech strong {
  color: var(--acx-color4);
}

/* ------------------------------------------------------------
   13. FRAMEWORK ECOMMERCE — GALLERIE E INTEGRAZIONI
   ------------------------------------------------------------ */
.acx-screenshot-card {
  height: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(5, 21, 41, 0.10);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(5, 21, 41, 0.08);
}

.acx-screenshot-card a {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #eef2f5;
}

.acx-screenshot-card a::after {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(5, 21, 41, 0.76);
  color: #fff;
  content: "↗";
  display: grid;
  place-items: center;
  font-size: 17px;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .2s ease, transform .2s ease;
}

.acx-screenshot-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .25s ease;
}

.acx-screenshot-card:hover img,
.acx-screenshot-card:focus-within img {
  transform: scale(1.035);
}

.acx-screenshot-card:hover a::after,
.acx-screenshot-card:focus-within a::after {
  opacity: 1;
  transform: translateY(0);
}

.acx-screenshot-card figcaption {
  padding: 10px 12px;
  color: var(--acx-color8);
  font-family: var(--acx-font-ui);
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.3;
}

.acx-integration {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  height: 100%;
  padding: 18px;
  border-radius: 10px;
  background: #f2f3f5;
}

.acx-integration > i {
  flex: 0 0 auto;
  padding-top: 2px;
  color: var(--acx-color4);
  font-size: 1.35rem;
}

.acx-integration strong,
.acx-integration small {
  display: block;
}

.acx-integration small {
  margin-top: 3px;
  color: rgba(5, 21, 41, .7);
  line-height: 1.35;
}

.acx-framework-cta {
  background: #013d85;
  color: #fff;
}

.acx-framework-cta h2,
.acx-framework-cta a:not(.btn-acx-primary):not(.btn-acx-dark) {
  color: #fff;
}

.acx-framework-cta p {
  color: rgba(255, 255, 255, .88);
}

@media (max-width: 575.98px) {
  .acx-screenshot-card a {
    aspect-ratio: 4 / 3;
  }
}

/* ------------------------------------------------------------
   13. GALLERIE CASI STUDIO ECOMMERCE
   ------------------------------------------------------------ */
.acx-case-gallery figure {
  height: 100%;
}

.acx-case-gallery figure > a {
  display: block;
  overflow: hidden;
  border-radius: 12px;
}

.acx-case-gallery img {
  display: block;
  transition: transform 0.25s ease;
}

.acx-case-gallery a:hover img,
.acx-case-gallery a:focus-visible img {
  transform: scale(1.025);
}

.acx-case-gallery figcaption {
  margin-top: 0.65rem;
  color: var(--acx-color6);
  font-size: 0.82rem;
  line-height: 1.35;
}

.acx-case-gallery--mobile img {
  max-height: 28rem;
  margin: 0 auto;
  object-fit: contain;
}

/* ============================================================
   Overlay form "Invio in corso"
   ============================================================ */
.acx-form-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: 0.5rem;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.acx-form-overlay__content {
  text-align: center;
  color: #fff;
  background: rgba(0,0,0,0.35);
  padding: 1.25rem 1.5rem;
  border-radius: 0.75rem;
}
.acx-form-overlay__content .spinner-border {
  color: #fff !important;
}

/* ------------------------------------------------------------
   Captcha visivo a caratteri colorati
   ------------------------------------------------------------ */
.acx-captcha-box {
  background: #f4f6f9;
  border: 2px solid #dde2e8;
}
.acx-captcha-box #captcha-question {
  color: var(--acx-color7);
  letter-spacing: 0.01em;
  line-height: 1.4;
}

.acx-captcha-char {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 38px;
}
.acx-captcha-char__num {
  font-size: 0.65rem;
  font-weight: 600;
  color: #6c757d;
  line-height: 1;
}
.acx-captcha-char__val {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 1.2rem;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  border-radius: 6px;
  user-select: none;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.2),
    0 0 3px rgba(0,0,0,0.08);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.12);
}

/* Rumore visivo per confondere OCR bot — strato bianco */
.acx-captcha-char__val::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.45) 2.5px, transparent 2.5px),
    radial-gradient(circle at 65% 20%, rgba(255,255,255,0.4) 2px, transparent 2px),
    radial-gradient(circle at 85% 70%, rgba(255,255,255,0.5) 3px, transparent 3px),
    radial-gradient(circle at 10% 80%, rgba(255,255,255,0.35) 2px, transparent 2px),
    radial-gradient(circle at 45% 50%, rgba(255,255,255,0.4) 2.5px, transparent 2.5px);
  pointer-events: none;
  border-radius: 6px;
  z-index: 1;
}

/* Rumore visivo — strato nero */
.acx-captcha-char__val::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 30% 15%, rgba(0,0,0,0.3) 2px, transparent 2px),
    radial-gradient(circle at 75% 45%, rgba(0,0,0,0.25) 2.5px, transparent 2.5px),
    radial-gradient(circle at 15% 65%, rgba(0,0,0,0.3) 2px, transparent 2px),
    radial-gradient(circle at 90% 85%, rgba(0,0,0,0.35) 3px, transparent 3px),
    radial-gradient(circle at 50% 10%, rgba(0,0,0,0.2) 2px, transparent 2px);
  pointer-events: none;
  border-radius: 6px;
  z-index: 2;
}