/* TSPLUS-P6-VISUAL-LUXURY v1.5.0 — premium image presentation for desktop and mobile */
.p6-home {
  --p6v-ink: #2d211a;
  --p6v-orange: #f07b38;
  --p6v-orange-soft: #ffb47d;
  --p6v-cream: #fff9f4;
  --p6v-line: rgba(117, 75, 45, .14);
  --p6v-shadow: 0 28px 70px rgba(71, 42, 23, .13), 0 8px 22px rgba(71, 42, 23, .07);
}

/* Product screenshots: warm glass frame, controlled depth and a soft stage light. */
.p6-home .p6-official-shot {
  position: relative;
  isolation: isolate;
  height: 316px;
  padding: 19px;
  border: 1px solid rgba(207, 158, 119, .32);
  border-radius: 23px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.98) 0 14%, transparent 38%),
    radial-gradient(circle at 86% 88%, rgba(247,137,72,.17), transparent 39%),
    linear-gradient(145deg, #fffdfb 0%, #f8eee6 54%, #f2e2d5 100%);
  box-shadow: var(--p6v-shadow), inset 0 1px 0 rgba(255,255,255,.95);
  perspective: 1100px;
}
.p6-home .p6-official-shot::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -34%;
  right: -12%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 169, 107, .24);
  filter: blur(38px);
  pointer-events: none;
}
.p6-home .p6-official-shot::after {
  content: '';
  position: absolute;
  z-index: 3;
  right: 12%;
  bottom: 8px;
  left: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240,123,56,.46), transparent);
  box-shadow: 0 -10px 24px rgba(240,123,56,.15);
  pointer-events: none;
}
.p6-home .p6-official-shot img {
  position: relative;
  z-index: 2;
  width: 100%;
  max-height: 278px;
  border: 1px solid rgba(70, 45, 29, .1);
  border-radius: 13px;
  object-fit: contain;
  filter: saturate(.96) contrast(1.025) drop-shadow(0 18px 22px rgba(43, 28, 19, .18));
  transform: translateY(-2px) rotateX(1.3deg);
  transform-origin: 50% 100%;
  transition: transform .5s cubic-bezier(.22,1,.36,1), filter .5s ease;
}
.p6-home .p6-product-card:hover .p6-official-shot img {
  filter: saturate(1.04) contrast(1.035) drop-shadow(0 22px 27px rgba(43, 28, 19, .22));
  transform: translateY(-7px) rotateX(0deg) scale(1.012);
}

/* Product marks become small premium brand tiles without changing the official artwork. */
.p6-home .p6-product-top strong img {
  width: 42px;
  height: 42px;
  padding: 7px;
  border: 1px solid rgba(240,123,56,.2);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,239,227,.9));
  box-shadow: 0 10px 25px rgba(155,79,31,.12), inset 0 1px 0 #fff;
}
.p6-home .p6-product-card,
.p6-home .p6-security {
  border-color: rgba(179, 119, 77, .2);
  background: linear-gradient(155deg, rgba(255,255,255,.98), rgba(255,251,247,.96));
  box-shadow: 0 24px 70px rgba(74, 43, 23, .09), inset 0 1px 0 #fff;
}
.p6-home .p6-product-card:hover,
.p6-home .p6-security:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 82px rgba(91, 48, 21, .15), 0 10px 28px rgba(240,123,56,.08);
}

/* Security visual: layered glass and metallic rings. */
.p6-home .p6-shield {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.5);
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.42), transparent 25%),
    radial-gradient(circle at 50% 70%, rgba(106,39,10,.26), transparent 56%),
    linear-gradient(145deg, #ffb173 0%, #f17b38 48%, #c94e16 100%);
  box-shadow: 0 28px 60px rgba(178,72,21,.25), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -18px 45px rgba(108,32,5,.18);
}
.p6-home .p6-shield::before,
.p6-home .p6-shield::after {
  content: '';
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
}
.p6-home .p6-shield::before { width: 250px; height: 250px; }
.p6-home .p6-shield::after { width: 330px; height: 330px; }
.p6-home .p6-shield span {
  background: rgba(255,255,255,.12);
  box-shadow: 0 14px 34px rgba(99,30,5,.2), inset 0 0 0 7px rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}

/* Customer marks: elegant gallery tiles, consistent on wide and narrow screens. */
.p6-home .p6-trusted {
  background:
    radial-gradient(circle at 50% -80%, rgba(240,123,56,.08), transparent 52%),
    linear-gradient(180deg, #fff, #fffaf6);
}
.p6-home .p6-customer-logos { gap: 17px !important; }
.p6-home .p6-customer-logos img {
  box-sizing: border-box;
  width: 100%;
  max-width: 188px;
  height: 78px;
  max-height: none;
  padding: 18px 20px;
  border: 1px solid rgba(112,79,57,.1);
  border-radius: 17px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 14px 34px rgba(62,42,29,.065), inset 0 1px 0 #fff;
  filter: grayscale(1) contrast(.92);
  opacity: .76;
  transition: transform .35s cubic-bezier(.22,1,.36,1), filter .35s ease, opacity .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.p6-home .p6-customer-logos img:hover {
  border-color: rgba(240,123,56,.3);
  filter: grayscale(0) contrast(1);
  opacity: 1;
  transform: translateY(-5px);
  box-shadow: 0 22px 42px rgba(90,52,27,.12), 0 0 0 4px rgba(240,123,56,.04);
}

/* Team portrait: editorial framing and a protected readable badge. */
.p6-home .p6-team-photo {
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 30px;
  background: #efe4dc;
  box-shadow: 0 38px 85px rgba(80,45,23,.2), 0 0 0 8px rgba(255,255,255,.58);
}
.p6-home .p6-team-photo::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(118deg, rgba(255,255,255,.2), transparent 24% 72%, rgba(239,119,53,.13)),
    linear-gradient(180deg, transparent 58%, rgba(29,19,13,.24));
  pointer-events: none;
}
.p6-home .p6-team-photo::after {
  content: '';
  position: absolute;
  z-index: 3;
  top: 20px;
  right: 20px;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 50%;
  background: var(--p6v-orange-soft);
  box-shadow: 0 0 0 7px rgba(255,255,255,.18), 0 0 24px rgba(255,150,85,.55);
  pointer-events: none;
}
.p6-home .p6-team-photo img {
  filter: saturate(.9) contrast(1.055) brightness(.985);
  transform: scale(1.012);
  transition: transform .65s cubic-bezier(.22,1,.36,1), filter .65s ease;
}
.p6-home .p6-team-photo:hover img {
  filter: saturate(1) contrast(1.04) brightness(1.01);
  transform: scale(1.045);
}
.p6-home .p6-team-photo span {
  z-index: 4;
  border-color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.82);
  box-shadow: 0 12px 30px rgba(41,25,16,.16);
  backdrop-filter: blur(14px) saturate(1.25);
}

/* Blog imagery: cinematic crop, richer colour and a refined card edge. */
.p6-home .p6-blog-card {
  border-color: rgba(136,87,54,.14);
  border-radius: 22px;
  background: linear-gradient(180deg, #fff, #fffdfb);
  box-shadow: 0 21px 52px rgba(69,42,25,.09), inset 0 1px 0 #fff;
}
.p6-home .p6-blog-card img {
  aspect-ratio: 16 / 9;
  border-bottom: 1px solid rgba(116,75,48,.1);
  object-position: center;
  filter: saturate(.9) contrast(1.07) brightness(.96);
  transform: scale(1.002);
  transition: transform .65s cubic-bezier(.22,1,.36,1), filter .65s ease;
}
.p6-home .p6-blog-card:hover img {
  filter: saturate(1.06) contrast(1.055) brightness(1.01);
  transform: scale(1.055);
}
.p6-home .p6-blog-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 32px 72px rgba(80,46,25,.15), 0 10px 26px rgba(240,123,56,.08);
}

/* Cost chart also receives the same visual language, keeping the page coherent. */
.p6-home .p6-tco-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(155,99,59,.16);
  background:
    radial-gradient(circle at 100% 0, rgba(255,174,116,.13), transparent 37%),
    rgba(255,255,255,.96);
  box-shadow: var(--p6v-shadow), inset 0 1px 0 #fff;
}
.p6-home .p6-tco-card i {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 5px 12px rgba(44,48,58,.1);
}
.p6-home .p6-tco-card .best i {
  background: linear-gradient(90deg, #ffad72, #ef7330);
  box-shadow: 0 6px 16px rgba(239,115,48,.25);
}

@media (max-width: 767px) {
  .p6-home { --p6v-shadow: 0 18px 44px rgba(71,42,23,.11), 0 5px 15px rgba(71,42,23,.055); }
  .p6-home .p6-product-card,
  .p6-home .p6-security { box-shadow: 0 16px 38px rgba(73,43,25,.085), inset 0 1px 0 #fff; }
  .p6-home .p6-product-top strong img { width: 37px; height: 37px; padding: 6px; border-radius: 11px; }
  .p6-home .p6-official-shot {
    height: auto;
    min-height: 0;
    padding: 11px;
    border-radius: 17px;
    box-shadow: 0 16px 34px rgba(70,40,22,.105), inset 0 1px 0 #fff;
  }
  .p6-home .p6-official-shot img {
    max-height: 218px;
    border-radius: 10px;
    filter: saturate(.98) contrast(1.02) drop-shadow(0 10px 13px rgba(43,28,19,.15));
    transform: none;
  }
  .p6-home .p6-shield { min-height: 188px; box-shadow: 0 20px 42px rgba(178,72,21,.2), inset 0 1px 0 rgba(255,255,255,.65); }
  .p6-home .p6-shield::before { width: 190px; height: 190px; }
  .p6-home .p6-shield::after { width: 255px; height: 255px; }
  .p6-home .p6-customer-logos { gap: 12px !important; }
  .p6-home .p6-customer-logos img {
    width: 100%;
    max-width: 158px;
    height: 64px;
    padding: 14px 16px;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(62,42,29,.06), inset 0 1px 0 #fff;
  }
  .p6-home .p6-team-photo {
    border-radius: 21px;
    box-shadow: 0 24px 54px rgba(80,45,23,.16), 0 0 0 5px rgba(255,255,255,.55);
  }
  .p6-home .p6-team-photo img {
    max-height: 390px;
    aspect-ratio: 4 / 3;
    object-position: center 28%;
    transform: none;
  }
  .p6-home .p6-team-photo::after { top: 14px; right: 14px; }
  .p6-home .p6-blog-card { border-radius: 17px; box-shadow: 0 16px 38px rgba(69,42,25,.085), inset 0 1px 0 #fff; }
  .p6-home .p6-blog-card img { aspect-ratio: 16 / 9; transform: none; }
  .p6-home .p6-tco-card { box-shadow: 0 18px 44px rgba(71,42,23,.105), inset 0 1px 0 #fff; }
}

@media (max-width: 420px) {
  .p6-home .p6-official-shot { padding: 9px; border-radius: 15px; }
  .p6-home .p6-official-shot img { max-height: 195px; }
  .p6-home .p6-customer-logos img { max-width: 145px; height: 59px; padding: 12px 14px; }
  .p6-home .p6-team-photo img { max-height: 340px; }
}

@media (hover: none) and (pointer: coarse) {
  .p6-home .p6-product-card:hover,
  .p6-home .p6-security:hover,
  .p6-home .p6-blog-card:hover,
  .p6-home .p6-customer-logos img:hover { transform: none; }
  .p6-home .p6-product-card:hover .p6-official-shot img,
  .p6-home .p6-blog-card:hover img,
  .p6-home .p6-team-photo:hover img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .p6-home .p6-official-shot img,
  .p6-home .p6-customer-logos img,
  .p6-home .p6-team-photo img,
  .p6-home .p6-blog-card img { transition: none !important; }
}