/* DPPassport's 3D artwork is paired with the same soft light on every surface. */
:root {
  --dp-3d-orb: radial-gradient(circle at 28% 22%, #fff9ff 2%, #e5cbfa 26%, #b88be7 58%, #8055bc 85%, #664399);
  --dp-3d-mint: radial-gradient(circle at 27% 23%, #fbfff8 3%, #d0f1e1 27%, #97cab6 57%, #598f7e 90%);
  --dp-3d-rim: linear-gradient(135deg, #fff 12%, #f5edff 47%, #d8c2f0 100%);
  --dp-3d-shadow: 0 4px 4px #4d32600a, 0 15px 28px -18px #58349167;
  --dp-3d-highlight: inset 0 1px 0 #fff, inset 0 -2px 2px #9b78bb16;
}

.unified-header .unified-brand img {
  box-shadow: 0 2px 0 #a281c5, 0 8px 15px -6px #55317d8a;
}

.unified-header .unified-links a[href^="/genera-passaporti-digitali-prodotti"],
.unified-header .unified-links a[href^="/app/en/"] {
  box-shadow: inset 0 1px 0 #ffffff32, 0 3px 0 #160e22, 0 7px 12px -8px #2c163c;
}

:root:has(link[href^="/assets/site.css"]) body .hero .visual img,
.dp-about-art {
  filter: drop-shadow(0 22px 17px #4d286421);
}

:root:has(link[href^="/assets/site.css"]) body .hero .visual img {
  border: 0;
  border-radius: 30px;
  box-shadow: 0 1px 1px #fff, 0 23px 40px -34px #4d28647a;
}

:root:has(link[href^="/assets/site.css"]) body .hero .visual::before {
  top: 1%;
  right: 1%;
  width: clamp(60px, 10vw, 132px);
}

:root:has(link[href^="/assets/site.css"]) body .hero .visual::after {
  left: 0;
  bottom: 3%;
  width: clamp(44px, 8vw, 110px);
}

:root:has(link[href^="/assets/site.css"]) body .three {
  gap: clamp(10px, 2.5vw, 24px);
}

.three .item {
  min-width: 0;
  padding: clamp(14px, 2vw, 23px);
  border: 1px solid #ebdff4;
  border-radius: 19px;
  background: linear-gradient(132deg, #fff, #f7f0fc 85%);
  box-shadow: var(--dp-3d-highlight), var(--dp-3d-shadow);
}

:root:has(link[href^="/assets/site.css"]) body .item .symbol {
  border: 1px solid #e7d3f8;
  background: var(--dp-3d-rim);
  transform: perspective(150px) rotateY(-13deg) rotateX(10deg);
  box-shadow: inset 1px 1px 2px #fff, inset -2px -2px 3px #9d6cc33b, 3px 5px 0 #d4b8ed, 8px 11px 15px -9px #6d4783;
}

.three .item:nth-child(2) .symbol {
  color: #345f52;
  border-color: #d7e9df;
  background: linear-gradient(140deg, #fff, #e7f5eb 48%, #b7ddcf);
  box-shadow: inset 1px 1px 2px #fff, inset -2px -2px 3px #6ea99436, 3px 5px 0 #b7d8cc, 8px 11px 15px -9px #49816e;
}

.three .item:nth-child(3) .symbol {
  color: #7c5337;
  border-color: #f2e1d4;
  background: linear-gradient(140deg, #fff, #f9eee3 49%, #edcaba);
  box-shadow: inset 1px 1px 2px #fff, inset -2px -2px 3px #c28f7f3b, 3px 5px 0 #e5c9bb, 8px 11px 15px -9px #9a694d;
}

/* Keep the artwork at full tile width, even on narrow screens. */
:root:has(link[href^="/assets/site.css"]) body .sectorgrid {
  gap: clamp(15px, 2.25vw, 29px);
}

:root:has(link[href^="/assets/site.css"]) body .sector {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  min-height: 0;
  border-radius: 23px;
  background: linear-gradient(155deg, #fff 30%, #fbf7fe);
  box-shadow: var(--dp-3d-highlight), var(--dp-3d-shadow);
}

:root:has(link[href^="/assets/site.css"]) body .sector img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center;
  background: #eee5f6;
  transition: scale .4s ease;
}

:root:has(link[href^="/assets/site.css"]) body .sector .words {
  position: relative;
  justify-content: flex-start;
  padding: clamp(14px, 2vw, 24px);
  border-top: 1px solid #ecdef5;
  background: linear-gradient(155deg, #fff 25%, #faf5fe);
}

:root:has(link[href^="/assets/site.css"]) body .sector b {
  font-size: clamp(17px, 1.65vw, 23px);
  font-weight: 700;
  letter-spacing: -.025em;
}

:root:has(link[href^="/assets/site.css"]) body .sector small {
  font-size: 14px;
  margin-top: 5px;
}

@media (hover: hover) and (pointer: fine) {
  :root:has(link[href^="/assets/site.css"]) body .sector:hover {
    transform: translateY(-6px);
    box-shadow: 0 23px 36px -21px #64418774;
  }

  :root:has(link[href^="/assets/site.css"]) body .sector:hover img {
    scale: 1.05;
  }
}

:root:has(link[href^="/assets/site.css"]) body :is(.sectiontop, .feature, .domain, .foot),
:root:has(link[href^="/assets/site.css"]) body main.section,
.dp-about :is(.dp-about-portrait, .dp-about-card, .dp-about-contact),
body:has(> .unified-header) :is(.viewer-hero, .account-shell, .account-main),
body:has(> .topline + .unified-header) :is(.viewer-hero, .account-shell, .account-main),
body:has(> .topline + .viewer-shell) .viewer-hero,
body:has(.hero-panel.hero-brand) .hero,
body:has(> .topline + .unified-header) .footer {
  position: relative;
  isolation: isolate;
}

:root:has(link[href^="/assets/site.css"]) body :is(.sectiontop, .feature)::after,
:root:has(link[href^="/assets/site.css"]) body main.section::after,
.dp-about-portrait::after,
.dp-about-contact::after,
.viewer-hero::after,
:is(.account-shell, .account-main)::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: 0;
  right: 3%;
  width: clamp(54px, 10vw, 136px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--dp-3d-orb);
  box-shadow: inset -10px -7px 20px #6b3b9432, 10px 19px 25px -18px #644281;
  opacity: .47;
}

:root:has(link[href^="/assets/site.css"]) body .feature::after {
  top: 12%;
  right: 4%;
  opacity: .3;
}

:root:has(link[href^="/assets/site.css"]) body .sectiontop::after {
  width: clamp(40px, 6vw, 86px);
  top: auto;
  bottom: -3%;
  right: 16%;
  opacity: .32;
}

:root:has(link[href^="/assets/site.css"]) body :is(.domain, .foot),
body:has(> .topline + .unified-header) .footer {
  overflow: hidden;
}

:root:has(link[href^="/assets/site.css"]) body :is(.domain, .foot)::after,
body:has(> .topline + .unified-header) .footer::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  width: clamp(72px, 13vw, 170px);
  aspect-ratio: 1;
  right: 7%;
  bottom: -22%;
  border: clamp(12px, 2vw, 28px) solid #dbbff7;
  border-top-color: #f0dfff;
  border-right-color: #b28ad8;
  border-radius: 50%;
  box-shadow: inset 2px 3px 8px #7446ad4a, 0 16px 26px -14px #3b225698;
  transform: rotateX(53deg) rotateZ(-19deg) rotateY(20deg);
  opacity: .48;
}

:root:has(link[href^="/assets/site.css"]) body .domain::before {
  content: "";
  width: clamp(45px, 9vw, 115px);
  aspect-ratio: 1;
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: 57%;
  top: -30%;
  border-radius: 50%;
  background: var(--dp-3d-orb);
  box-shadow: 7px 17px 22px -14px #241237;
  opacity: .72;
}

:root:has(link[href^="/assets/site.css"]) body .faq details,
.dp-ecosystem-strip a {
  box-shadow: var(--dp-3d-highlight), 0 5px 12px -10px #6942947d;
}

:root:has(link[href^="/assets/site.css"]) body .faq details {
  border: 1px solid #ebdef4;
  margin-bottom: 11px;
  padding: 14px 17px;
  border-radius: 15px;
  background: linear-gradient(155deg, #fff, #faf6fe);
}

.dp-about-art {
  background-image: url("/assets/3d/hero.webp");
  background-size: 92% auto;
}

.dp-about-portrait::after {
  right: 0;
  top: -13px;
  background: var(--dp-3d-mint);
  opacity: .86;
}

.dp-about-card {
  padding-top: clamp(62px, 7vw, 96px);
  box-shadow: var(--dp-3d-highlight), var(--dp-3d-shadow);
}

.dp-about-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 20px;
  top: 16px;
  width: clamp(29px, 4vw, 55px);
  aspect-ratio: 1;
  border: 1px solid #e5d1fa;
  border-radius: 26%;
  background: var(--dp-3d-rim);
  box-shadow: inset 1px 1px 3px #fff, inset -3px -2px 4px #8f56c540, 4px 6px 0 #c9ade9, 7px 11px 14px -7px #7943a2;
  transform: perspective(130px) rotateX(19deg) rotateY(-26deg) rotateZ(-11deg);
  pointer-events: none;
}

.dp-about-card:nth-child(2)::before {
  border-radius: 50%;
  border-color: #cae9d9;
  background: var(--dp-3d-mint);
  box-shadow: inset 1px 1px 3px #fff, inset -3px -2px 4px #3a79534c, 5px 8px 10px -4px #3b886c84;
}

.dp-about-card:nth-child(3)::before {
  border-radius: 50%;
  border: clamp(6px, .95vw, 13px) solid #e4c2f2;
  border-top-color: #f7e7fd;
  border-bottom-color: #ba8ed4;
  background: transparent;
  box-shadow: inset 1px 1px 3px #ac70c63f, 6px 8px 13px -5px #9159ad92;
  transform: perspective(150px) rotateX(30deg) rotateY(-18deg) rotateZ(-11deg);
}

.dp-about-contact::after {
  right: 8%;
  top: 14%;
  background: var(--dp-3d-mint);
  opacity: .38;
}

body:has(.hero-panel.hero-brand) .hero::before {
  content: "";
  position: absolute;
  top: 2%;
  right: 9%;
  width: clamp(90px, 18vw, 230px);
  aspect-ratio: 1;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background: var(--dp-3d-orb);
  box-shadow: 12px 28px 34px -22px #644281;
  opacity: .32;
}

.hero .hero-panel.hero-brand,
:is(.viewer-shell, .account-shell, .account-main) :is(.card, .account-card),
.hero .step-chip {
  box-shadow: var(--dp-3d-highlight), var(--dp-3d-shadow);
}

.hero .hero-panel.hero-brand {
  border-radius: 23px;
}

.hero .hero-brand .hero-logo-art {
  aspect-ratio: 4 / 3;
  object-position: center;
  box-shadow: 0 11px 18px -14px #59427887;
}

.viewer-hero::after {
  top: 8%;
  right: 4%;
}

.dp-3d-guide::before,
.viewer-hero::before {
  content: "";
  display: block;
  aspect-ratio: 3 / 2;
  background: #eee5f6 url("/assets/3d/tools.webp") center / contain no-repeat;
  border-radius: 22px;
  box-shadow: var(--dp-3d-shadow);
}

.dp-3d-guide::before {
  float: right;
  width: min(44%, 380px);
  margin: 0 0 20px 32px;
}

.viewer-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(22px, 3.75vw, 42px);
}

.viewer-hero > * {
  grid-column: 1;
}

.viewer-hero::before {
  grid-column: 2;
  grid-row: 1 / span 3;
  transform: perspective(900px) rotateY(-9deg) rotateZ(2deg);
}

.viewer-hero h1 {
  font-size: clamp(36px, 4.3vw, 60px);
}

:is(.account-shell, .account-main)::after {
  top: 5%;
  right: 8%;
}

@media (min-width: 951px) {
  :root:has(link[href^="/assets/site.css"]) body .dp-3d-sector-hero .visual img {
    max-width: min(100%, 475px);
  }
}

@media (max-width: 950px) {
  :root:has(link[href^="/assets/site.css"]) body .hero .visual {
    padding-block: 16px 23px;
  }
}

@media (max-width: 650px) {
  :root:has(link[href^="/assets/site.css"]) body .sector {
    border-radius: 17px;
  }

  :root:has(link[href^="/assets/site.css"]) body .sector img {
    aspect-ratio: 1;
  }

  :root:has(link[href^="/assets/site.css"]) body :is(.sectiontop, .feature)::after,
  :root:has(link[href^="/assets/site.css"]) body main.section::after,
  .viewer-hero::after,
  :is(.account-shell, .account-main)::after {
    opacity: .24;
  }

  .dp-about-card {
    padding-top: 60px;
  }

  .dp-3d-guide,
  .viewer-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .dp-3d-guide::before,
  .viewer-hero::before {
    float: none;
    grid-column: 1;
    grid-row: 4;
    width: min(100%, 360px);
    margin: 12px 0 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root:has(link[href^="/assets/site.css"]) body .sector,
  :root:has(link[href^="/assets/site.css"]) body .sector img,
  .dp-about-card {
    transition: none;
  }

  :root:has(link[href^="/assets/site.css"]) body .sector:hover,
  a.dp-about-card:hover {
    transform: none;
  }

  :root:has(link[href^="/assets/site.css"]) body .sector:hover img {
    scale: 1;
  }
}

@media print {
  .dp-3d-guide::before,
  .viewer-hero::before,
  .viewer-hero::after {
    display: none;
  }
}