/*
 * PluginPip 2027 / Luminous Interfaces v1.6.0
 * Original smooth vector-like artwork made in responsive HTML/CSS.
 * No rasterised text, fake screenshots, external fonts or assets.
 */
.pp-folio-art {
  --pp-glass-bright: #c5a1ff;
  --pp-glass-edge: #aa6dff;
  --pp-glass-soft: rgba(161,90,255,.39);
  min-height:clamp(330px,34vw,490px);
  isolation:isolate;
  perspective:1100px;
  transform:translateZ(0);
}
.pp-folio-art::before {
  content:"";
  position:absolute;
  inset:3% -7%;
  z-index:-3;
  pointer-events:none;
  background:
    repeating-radial-gradient(ellipse at 54% 42%,transparent 0 19px,rgba(183,126,255,.11) 20px 21px,transparent 22px 39px),
    radial-gradient(ellipse at 50% 60%,rgba(151,72,250,.30),transparent 62%);
  opacity:.8;
  mask-image:radial-gradient(ellipse at center,#000 15%,transparent 73%);
}
.pp-folio-art::after {
  content:"";
  position:absolute;
  z-index:-1;
  left:13%;
  right:11%;
  bottom:6%;
  height:15%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(165,88,255,.47),transparent 65%);
  filter:blur(22px);
  pointer-events:none;
}
.pp-folio-art__orbit {
  inset:7% -6%;
  z-index:0;
  border:2px solid rgba(189,134,255,.8);
  border-top-color:#d9b5ff;
  border-right-color:rgba(218,163,255,.85);
  border-bottom-color:rgba(190,126,255,.95);
  border-radius:50%;
  opacity:.95;
  transform:rotate(-20deg) scaleY(.58);
  box-shadow:0 0 10px rgba(188,95,255,.75),0 0 29px rgba(156,70,255,.4),inset 0 0 12px rgba(199,125,255,.32);
}
.pp-folio-art__orbit--b {
  inset:16% 2%;
  opacity:.4;
  border-width:1px;
  border-color:rgba(206,164,255,.5);
  transform:rotate(22deg) scaleY(.68);
  box-shadow:0 0 10px rgba(167,91,245,.25);
}
.pp-folio-art__panel {
  border-radius:clamp(18px,2vw,30px);
  background:linear-gradient(145deg,rgba(120,70,179,.67) 0%,rgba(55,30,95,.93) 46%,rgba(29,16,62,.98) 100%);
  border:1.5px solid rgba(212,173,255,.83);
  box-shadow:0 0 0 1px rgba(222,181,255,.16) inset,0 0 17px rgba(172,102,255,.32),0 22px 56px rgba(9,2,26,.5);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.pp-folio-art__panel--back {
  z-index:1;
  width:69%;height:61%;
  padding:2rem;
  opacity:.66;
  transform:translate(14%,-17%) rotate(12deg);
  background:linear-gradient(145deg,rgba(117,76,178,.45),rgba(39,20,81,.6));
  border-color:rgba(192,144,249,.64);
}
.pp-folio-art__panel--back::before {
  content:"";
  position:absolute;inset:-11px 7% 11px -7%;border-radius:inherit;
  border:1px solid rgba(198,142,255,.42);
  background:linear-gradient(138deg,rgba(135,85,207,.19),rgba(44,23,80,.14));
  z-index:-1;pointer-events:none;
}
.pp-folio-art__panel--back span {
  height:8px;
  background:linear-gradient(90deg,rgba(188,135,255,.6),rgba(204,172,255,.22));
  border-radius:10px;
}
.pp-folio-art__panel--front {
  z-index:2;
  width:79%;
  min-height:clamp(255px,24vw,322px);
  padding:clamp(1.25rem,2vw,2rem);
  transform:translate(-3%,3%) rotate(-5deg);
  border:2px solid rgba(224,186,255,.94);
  background:
    radial-gradient(ellipse at 76% 10%,rgba(157,97,234,.28),transparent 54%),
    linear-gradient(147deg,rgba(79,42,137,.98),rgba(40,21,84,.98) 55%,rgba(30,15,68,.99));
  box-shadow:
    inset 0 1px 0 rgba(249,225,255,.8),
    inset 0 -1px 0 rgba(173,117,244,.32),
    0 0 0 1px rgba(193,118,255,.35),
    0 0 13px rgba(200,131,255,.74),
    0 0 35px rgba(156,76,255,.30),
    0 27px 45px rgba(8,2,27,.58);
  transition:transform .55s cubic-bezier(.2,.8,.25,1),box-shadow .55s ease;
}
.pp-folio-art__panel--front::before {
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid rgba(229,191,255,.25);
  border-radius:calc(clamp(18px,2vw,30px) - 7px);
  pointer-events:none;
}
.pp-folio-art__panel--front::after {
  content:"";
  position:absolute;
  right:0;bottom:9%;width:45%;height:57%;
  background:linear-gradient(132deg,transparent,rgba(155,111,239,.15),transparent);
  clip-path:polygon(0 100%,62% 9%,100% 46%,100% 100%);
  pointer-events:none;
}
.pp-folio-art:hover .pp-folio-art__panel--front {
  transform:translate(-3%,-1%) rotate(-3deg);
  box-shadow:inset 0 1px 0 rgba(249,225,255,.8),0 0 15px rgba(200,131,255,.8),0 0 46px rgba(160,80,255,.38),0 30px 50px rgba(8,2,27,.58);
}
.pp-folio-art__top {
  position:relative;z-index:1;
  padding-bottom:1.05rem;
  border-bottom:1px solid rgba(218,181,255,.31);
}
.pp-folio-art__dots {gap:7px}
.pp-folio-art__dots i {
  width:9px;height:9px;
  background:linear-gradient(135deg,#d5b1ff,#9780dd);
  box-shadow:0 0 7px rgba(185,124,255,.34);
}
.pp-folio-art__brand {
  color:#faf3ff;
  font-size:clamp(.78rem,.95vw,1rem);
  font-weight:830;
  letter-spacing:-.025em;
  text-shadow:0 1px 8px rgba(215,163,255,.25);
}
.pp-folio-art__lines {
  display:grid;
  gap:clamp(11px,1.65vw,20px);
  padding-top:clamp(1.5rem,2.6vw,2.65rem);
  position:relative;
  z-index:1;
}
.pp-folio-art__lines i {
  display:block;height:clamp(9px,.85vw,13px);
  border-radius:999px;
  background:linear-gradient(90deg,#c7a1ff 0%,#9f8fff 39%,#b7a9ce 40%,rgba(190,165,230,.40) 76%,transparent 77%);
  box-shadow:0 0 11px rgba(156,118,255,.12);
}
.pp-folio-art__lines i:nth-child(2){margin-left:17%;width:68%}
.pp-folio-art__lines i:nth-child(3){
  width:81%;
  background:linear-gradient(90deg,#c7a1ff 0%,#a6a1ff 40%,#cbfa53 64%,rgba(204,249,83,.15) 65%,transparent 66%);
  filter:drop-shadow(0 0 3px rgba(203,250,75,.33));
}
.pp-folio-art__lines i:nth-child(4){margin-left:27%;width:56%}
.pp-folio-art__lines i:nth-child(5){width:89%}
.pp-folio-art__caption {
  position:relative;z-index:1;
  margin-top:clamp(1.4rem,2vw,2.15rem);
  padding-left:19px;
  font-size:clamp(.58rem,.75vw,.78rem);
  letter-spacing:.16em;
  line-height:1.45;
  font-weight:820;
  color:#f4eaff;
}
.pp-folio-art__caption::before {
  content:"";
  width:10px;height:2px;
  position:absolute;left:0;top:.67em;
  background:#c9f53d;
  border-radius:2px;
  box-shadow:0 0 9px rgba(201,245,61,.57);
}
.pp-folio-art__spark {
  z-index:4;
  bottom:5%;
  right:5%;
  width:clamp(61px,7vw,86px);
  height:clamp(61px,7vw,86px);
  border-radius:clamp(17px,2vw,24px);
  background:linear-gradient(138deg,#d7bdff,#a98afd 55%,#8b6fe7);
  border:2px solid rgba(251,235,255,.92);
  color:#24124b;
  transform:rotate(-15deg);
  font-size:clamp(2.7rem,4.2vw,4rem);
  text-shadow:none;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.75),0 0 14px rgba(181,108,255,.76),0 0 36px rgba(169,94,255,.37),0 14px 25px rgba(12,3,37,.48);
}
.pp-folio-art--server .pp-folio-art__servers,
.pp-folio-art--browser .pp-folio-art__window,
.pp-folio-art--local .pp-folio-art__map,
.pp-folio-art--pricing .pp-folio-art__receipt,
.pp-folio-art--research .pp-folio-art__graph,
.pp-folio-art--growth .pp-folio-art__graph,
.pp-folio-art--editorial .pp-folio-art__document,
.pp-folio-art--studio .pp-folio-art__document {
  position:relative;z-index:1;
}
.pp-folio-art--server .pp-folio-art__servers i {
  border-color:rgba(206,158,255,.32);
  background:rgba(18,10,42,.4);
  box-shadow:inset 0 1px 2px rgba(195,147,255,.12);
}
.pp-folio-art--server .pp-folio-art__servers i::before{background:#c9f53d;box-shadow:0 0 11px #c9f53d66}
.pp-folio-art--browser .pp-folio-art__square {
  background:linear-gradient(145deg,#cebbff,#8666c9 50%,#32215e);
  box-shadow:inset 0 0 0 1px rgba(245,218,255,.25);
}
.pp-folio-art--browser .pp-folio-art__copy i {
  background:linear-gradient(90deg,#bca5ff,rgba(201,183,255,.3));
}
.pp-folio-art--browser .pp-folio-art__copy b {background:#c9f53d;box-shadow:0 0 14px #c9f53d55}
.pp-folio-art--local .pp-folio-art__pin{border-color:#c9f53d}
.pp-folio-art--local .pp-folio-art__pin::after{background:#c9f53d}
.pp-folio-art--pricing .pp-folio-art__receipt{background:rgba(159,111,224,.13);border:1px solid rgba(215,176,255,.23)}
.pp-folio-art--research .pp-folio-art__graph i,
.pp-folio-art--growth .pp-folio-art__graph i {background:linear-gradient(#d2afff,#8762d5)}
.pp-folio-art--research .pp-folio-art__graph i:nth-child(4),
.pp-folio-art--growth .pp-folio-art__graph i:nth-child(4){background:linear-gradient(#d8fc62,#9ac637)}
@media(max-width:800px){
  .pp-folio-art {
    width:min(100%,520px);
    min-height:clamp(280px,59vw,390px);
    margin:0 auto;
  }
  .pp-folio-art__panel--front {min-height:clamp(215px,39vw,290px);width:76%}
  .pp-folio-art__panel--back {width:68%;height:58%}
}
@media(max-width:480px){
  .pp-folio-art{min-height:275px}
  .pp-folio-art__panel--front{min-height:210px;padding:1.05rem 1.15rem}
  .pp-folio-art__panel--back{height:59%;padding:1.1rem}
  .pp-folio-art__lines{gap:11px;padding-top:1.6rem}
  .pp-folio-art__caption{font-size:.52rem;margin-top:1.3rem}
  .pp-folio-art__spark{right:3%;bottom:6%;width:56px;height:56px;font-size:2.6rem}
}
@media(prefers-reduced-motion:reduce){
  .pp-folio-art__panel--front{transition:none}
  .pp-folio-art:hover .pp-folio-art__panel--front{transform:translate(-3%,3%) rotate(-5deg)}
}
