/* =========================================================
   PANDA COMMERCIAL PLATFORM — FASE III
   Engines: Hero, Showcase, Conversion, CMS & Integrations
   ========================================================= */

/* Hero Engine */
.hero-engine {
  --pointer-x: 0;
  --pointer-y: 0;
  position: relative;
  min-height: calc(94vh - var(--header));
  display: grid;
  align-items: center;
  overflow: clip;
  isolation: isolate;
  background:
    radial-gradient(circle at calc(84% + var(--pointer-x) * 1px) calc(18% + var(--pointer-y) * 1px),
      rgba(197,210,3,.20), transparent 27%),
    radial-gradient(circle at calc(96% - var(--pointer-x) * .6px) calc(76% - var(--pointer-y) * .6px),
      rgba(0,168,143,.16), transparent 30%),
    linear-gradient(180deg,#fff,#fafafa);
}
.hero-engine::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.035;
  background-image:
    linear-gradient(rgba(19,15,51,.45) 1px,transparent 1px),
    linear-gradient(90deg,rgba(19,15,51,.45) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,transparent,black 16%,black 82%,transparent);
}
.hero-engine__grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(480px,.95fr);
  gap:var(--s8);
  align-items:center;
}
.hero-engine__copy h1 { max-width:10.5ch; margin-bottom:var(--s5); }
.hero-engine__scene {
  position:relative;
  min-height:590px;
  border-radius:var(--rxl);
  overflow:hidden;
  background:
    radial-gradient(circle at 72% 20%,rgba(197,210,3,.48),transparent 22%),
    radial-gradient(circle at 18% 87%,rgba(241,136,35,.48),transparent 27%),
    linear-gradient(145deg,#12324c 0%,var(--panda-navy) 58%,#071b29 100%);
  box-shadow:var(--sh3);
  perspective:1100px;
}
.hero-engine__scene::before {
  content:"";
  position:absolute;
  inset:0;
  opacity:.10;
  background-image:
    linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px);
  background-size:44px 44px;
}
.scene-item {
  position:absolute;
  overflow:hidden;
  border-radius:var(--rlg);
  background:#fff;
  box-shadow:0 30px 70px rgba(0,0,0,.32);
  transform-style:preserve-3d;
  will-change:transform;
  transition:filter .25s ease, box-shadow .25s ease;
}
.scene-item img { width:100%; height:100%; object-fit:cover; }
.scene-item:hover { filter:saturate(1.05); box-shadow:0 38px 82px rgba(0,0,0,.38); }
.scene-item[data-depth="1"] { left:5%; top:12%; width:59%; height:68%; z-index:2; }
.scene-item[data-depth="2"] { right:6%; top:9%; width:30%; height:35%; z-index:4; }
.scene-item[data-depth="3"] { right:5%; bottom:7%; width:38%; height:39%; z-index:5; }
.scene-item[data-depth="4"] { left:12%; bottom:4%; width:24%; height:27%; z-index:6; }
.hero-engine__trust {
  display:flex;
  flex-wrap:wrap;
  gap:var(--s5);
  margin-top:var(--s6);
  color:var(--panda-gray);
}
.hero-engine__trust strong { display:block; font-size:1.25rem; color:var(--panda-navy); }

/* Showcase Engine */
.showcase-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--s4);
  margin-bottom:var(--s6);
}
.filter-group { display:flex; flex-wrap:wrap; gap:var(--s2); }
.filter-button {
  border:1px solid var(--n300);
  border-radius:var(--rfull);
  background:#fff;
  padding:.68rem 1rem;
  font-weight:700;
  cursor:pointer;
}
.filter-button.is-active { background:var(--panda-navy); color:#fff; border-color:var(--panda-navy); }
.showcase-grid {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:110px;
  gap:var(--s4);
}
.showcase-item {
  position:relative;
  overflow:hidden;
  border-radius:var(--rlg);
  background:var(--n100);
  box-shadow:var(--sh1);
}
.showcase-item:nth-child(6n+1){grid-column:span 7;grid-row:span 4}
.showcase-item:nth-child(6n+2){grid-column:span 5;grid-row:span 2}
.showcase-item:nth-child(6n+3){grid-column:span 5;grid-row:span 2}
.showcase-item:nth-child(6n+4){grid-column:span 4;grid-row:span 3}
.showcase-item:nth-child(6n+5){grid-column:span 4;grid-row:span 3}
.showcase-item:nth-child(6n+6){grid-column:span 4;grid-row:span 3}
.showcase-item img { width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease); }
.showcase-item:hover img { transform:scale(1.045); }
.showcase-item__overlay {
  position:absolute;
  inset:auto 0 0;
  padding:var(--s5);
  color:#fff;
  background:linear-gradient(transparent,rgba(19,15,51,.88));
  transform:translateY(15%);
  transition:transform .25s var(--ease);
}
.showcase-item:hover .showcase-item__overlay { transform:none; }
.case-study {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:var(--s6);
  align-items:center;
  padding:var(--s6);
  border:1px solid var(--n200);
  border-radius:var(--rxl);
  background:#fff;
  box-shadow:var(--sh2);
}
.case-study__media img { width:100%; min-height:380px; object-fit:cover; border-radius:var(--rlg); }
.before-after {
  --position:50%;
  position:relative;
  overflow:hidden;
  min-height:460px;
  border-radius:var(--rxl);
  background:var(--n100);
}
.before-after img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.before-after__after { clip-path:inset(0 calc(100% - var(--position)) 0 0); }
.before-after__line {
  position:absolute;
  top:0; bottom:0; left:var(--position);
  width:3px; background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.15);
  transform:translateX(-50%);
}
.before-after input {
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:0; cursor:ew-resize;
}
.carousel {
  position:relative;
  overflow:hidden;
}
.carousel__track {
  display:flex;
  gap:var(--s4);
  transition:transform .5s var(--ease);
}
.carousel__slide {
  flex:0 0 min(78vw,720px);
  border-radius:var(--rlg);
  overflow:hidden;
  background:#fff;
  box-shadow:var(--sh2);
}
.carousel__slide img { width:100%; height:430px; object-fit:cover; }
.carousel__controls { display:flex; gap:var(--s2); margin-top:var(--s4); }

/* Conversion Engine */
.conversion-shell {
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:var(--s6);
  align-items:start;
}
.smart-form {
  padding:var(--s6);
  border-radius:var(--rxl);
  border:1px solid var(--n200);
  background:#fff;
  box-shadow:var(--sh2);
}
.form-step { display:none; }
.form-step.is-active { display:grid; gap:var(--s4); }
.form-progress {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--s2);
  margin-bottom:var(--s5);
}
.form-progress span { height:5px; border-radius:999px; background:var(--n200); }
.form-progress span.is-active { background:var(--panda-yellow); }
.form-actions { display:flex; justify-content:space-between; gap:var(--s3); margin-top:var(--s4); }
.quote-summary {
  position:sticky;
  top:100px;
  padding:var(--s5);
  border-radius:var(--rlg);
  background:var(--panda-navy);
  color:#fff;
}
.quote-line { display:flex; justify-content:space-between; gap:var(--s4); padding:.7rem 0; border-bottom:1px solid rgba(255,255,255,.12); }
.quote-total { font-size:1.5rem; font-weight:700; padding-top:var(--s4); }
.slot-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); }
.slot {
  border:1px solid var(--n300);
  border-radius:var(--rmd);
  background:#fff;
  padding:.75rem;
  cursor:pointer;
  text-align:center;
}
.slot.is-selected { background:var(--panda-navy); color:#fff; border-color:var(--panda-navy); }
.crm-board { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); }
.crm-column { padding:var(--s4); border-radius:var(--rlg); background:var(--n100); }
.crm-card { padding:var(--s4); border-radius:var(--rmd); background:#fff; box-shadow:var(--sh1); margin-bottom:var(--s3); }

/* CMS / Admin */
.admin-shell { min-height:100vh; background:var(--n50); }
.admin-header { padding:var(--s4) 0; background:var(--panda-navy); color:#fff; }
.admin-layout { display:grid; grid-template-columns:240px 1fr; min-height:calc(100vh - 72px); }
.admin-sidebar { padding:var(--s5); background:#fff; border-right:1px solid var(--n200); }
.admin-sidebar a { display:block; padding:.75rem; text-decoration:none; border-radius:var(--rmd); font-weight:700; }
.admin-sidebar a:hover { background:var(--n100); }
.admin-main { padding:var(--s6); }
.admin-table { width:100%; border-collapse:collapse; background:#fff; border-radius:var(--rlg); overflow:hidden; }
.admin-table th,.admin-table td { padding:.85rem; border-bottom:1px solid var(--n200); text-align:left; vertical-align:top; }

/* Integrations */
.integration-card { position:relative; overflow:hidden; }
.integration-card::after {
  content:"";
  position:absolute;
  width:140px; height:140px;
  border-radius:50%;
  right:-60px; bottom:-70px;
  background:var(--green);
  opacity:.22;
}
.portal-hero,.marketplace-hero {
  padding:var(--s12) 0;
  background:linear-gradient(135deg,#fff,var(--n50));
}
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
.product-card img { width:100%; height:230px; object-fit:cover; border-radius:var(--rmd); margin-bottom:var(--s4); }

@media(max-width:980px){
  .hero-engine__grid,.case-study,.conversion-shell{grid-template-columns:1fr}
  .hero-engine__scene{min-height:490px}
  .crm-board{grid-template-columns:1fr 1fr}
  .showcase-item:nth-child(n){grid-column:span 6}
  .admin-layout{grid-template-columns:1fr}
  .admin-sidebar{border-right:0;border-bottom:1px solid var(--n200)}
}
@media(max-width:700px){
  .hero-engine__scene{min-height:430px}
  .scene-item[data-depth="1"]{width:67%;height:62%}
  .scene-item[data-depth="2"]{width:34%}
  .scene-item[data-depth="3"]{width:43%}
  .scene-item[data-depth="4"]{display:none}
  .showcase-grid{grid-template-columns:1fr;grid-auto-rows:260px}
  .showcase-item:nth-child(n){grid-column:auto;grid-row:auto}
  .carousel__slide{flex-basis:90vw}
  .carousel__slide img{height:310px}
  .slot-grid,.crm-board,.product-grid{grid-template-columns:1fr}
}