/* ============================================================
   PRODUCT SHOWCASE — dashboard replica, phone mock, fleet gallery
   ============================================================ */

/* ----- browser-framed admin dashboard replica ----- */
.showcase { background: var(--mist-2); overflow: hidden; }
.showcase-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 44px; align-items: center; }
.shot-browser {
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
}
.shot-browser .bar {
  background: var(--navy-deep); padding: 11px 16px; display: flex; align-items: center; gap: 7px;
}
.shot-browser .bar i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.shot-browser .bar i:nth-child(1) { background: #FF5F57; }
.shot-browser .bar i:nth-child(2) { background: #FEBC2E; }
.shot-browser .bar i:nth-child(3) { background: #28C840; }
.shot-browser .bar span { margin-left: 8px; color: #8FA5C2; font-size: 11px; }

.afd { display: flex; min-height: 380px; font-size: 11px; }
.afd-side {
  flex: 0 0 148px; color: #fff; padding: 14px 0;
  background: linear-gradient(170deg, #2E9E8F 0%, #1D6E62 100%);
}
.afd-side .brand {
  background: #fff; border-radius: 6px; margin: 0 12px 12px; padding: 5px 8px; width: fit-content;
}
.afd-side .brand img { height: 14px; }
.afd-user { display: flex; align-items: center; gap: 8px; padding: 8px 14px 12px; border-bottom: 1px solid rgba(255,255,255,.16); }
.afd-user .av { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.25); display: grid; place-items: center; font-size: 12px; }
.afd-user .n { font-weight: 700; font-size: 10.5px; }
.afd-user .e { font-size: 8.5px; opacity: .75; }
.afd-nav { margin-top: 8px; display: grid; }
.afd-nav span {
  padding: 6px 14px; font-size: 10px; letter-spacing: .3px; color: #D8EFEA;
  display: flex; align-items: center; gap: 7px;
}
.afd-nav span::before { content: ""; width: 5px; height: 5px; border-radius: 2px; background: rgba(255,255,255,.4); }
.afd-nav span.on { background: rgba(255,255,255,.16); color: #fff; font-weight: 700; border-left: 3px solid #FFC241; padding-left: 11px; }
.afd-main { flex: 1; background: #F4F6F9; padding: 14px 16px; min-width: 0; }
.afd-crumb { color: #9AA7B4; font-size: 9px; margin-bottom: 6px; }
.afd-crumb b { color: var(--teal); font-weight: 600; }
.afd-titlebar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.afd-title { font-family: var(--font-body); font-size: 14px; color: #3B4652; }
.afd-title b { font-weight: 700; }
.afd-gauges { display: flex; gap: 12px; }
.afd-gauge { display: flex; align-items: center; gap: 6px; font-size: 8.5px; color: #7A8794; }
.afd-gauge .ring2 {
  width: 22px; height: 22px; border-radius: 50%;
  background: conic-gradient(var(--g1) var(--p), #E3E8EF 0);
  display: grid; place-items: center;
}
.afd-gauge .ring2::after { content: ""; width: 13px; height: 13px; background: #F4F6F9; border-radius: 50%; }
.afd-gauge b { color: #3B4652; font-size: 9.5px; }
.afd-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.afd-kpi { border-radius: 8px; color: #fff; padding: 10px 10px 8px; position: relative; overflow: hidden; }
.afd-kpi .v { font-size: 17px; font-weight: 800; line-height: 1; }
.afd-kpi .k { font-size: 8px; opacity: .92; margin-top: 3px; }
.afd-kpi::after {
  content: ""; position: absolute; right: -12px; bottom: -14px;
  width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.16);
}
.afd-kpi.p { background: #A97BD5; } .afd-kpi.y { background: #FFC241; }
.afd-kpi.t { background: #4BDBC3; } .afd-kpi.b { background: #57A8F5; }
.afd-panel { background: #fff; border-radius: 8px; padding: 10px 12px; box-shadow: 0 2px 8px rgba(20,40,70,.06); }
.afd-panel .ph { font-size: 10px; font-weight: 700; color: #3B4652; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; }
.afd-pills { display: flex; gap: 6px; }
.afd-pills span {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 7.5px; color: #6B7683; background: #F1F3F7; border-radius: 99px; padding: 2px 7px;
}
.afd-pills span::before { content: ""; width: 12px; height: 7px; border-radius: 99px; background: #7B5FC0; }
.afd-chart { width: 100%; height: 84px; }
.afd-months { display: flex; justify-content: space-between; font-size: 7px; color: #A6B0BB; padding: 2px 6px 0; }

/* ----- phone mockup of mobile app ----- */
.phone {
  width: 232px; border-radius: 34px; background: #0E1E38; padding: 10px;
  box-shadow: var(--shadow-lg), inset 0 0 0 2px #2A3C58;
  margin-inline: auto; position: relative;
}
.phone .notch {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 86px; height: 18px; background: #0E1E38; border-radius: 0 0 12px 12px; z-index: 3;
}
.phone .screen { border-radius: 26px; overflow: hidden; background: #F4F6F9; }
.papp-head {
  background: linear-gradient(140deg, var(--navy-2), #17456B);
  color: #fff; padding: 26px 14px 10px;
  display: flex; justify-content: space-between; align-items: center;
}
.papp-head .hi { font-size: 8.5px; opacity: .8; }
.papp-head .nm { font-size: 12px; font-weight: 700; }
.papp-head .av { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.25); display: grid; place-items: center; font-size: 10px; }
.papp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px; }
.papp-tile { border-radius: 8px; padding: 7px 8px; color: #fff; }
.papp-tile .k { font-size: 6.5px; opacity: .92; text-transform: uppercase; letter-spacing: .4px; }
.papp-tile .v { font-size: 10.5px; font-weight: 800; margin-top: 1px; }
.papp-tile.y { background: #FFC241; } .papp-tile.r { background: #F0616B; }
.papp-tile.g { background: #43C59E; } .papp-tile.o { background: #F5821F; }
.papp-map { position: relative; height: 150px; background:
  linear-gradient(#E9EEF3 1px, transparent 1px), linear-gradient(90deg, #E9EEF3 1px, transparent 1px),
  linear-gradient(140deg, #F2F6F4, #E8F0EE);
  background-size: 22px 22px, 22px 22px, 100% 100%;
}
.papp-map svg.route { position: absolute; inset: 0; width: 100%; height: 100%; }
.papp-map .car {
  position: absolute; width: 40px; left: 46%; top: 44%;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.25));
  animation: floaty 4s ease-in-out infinite;
}
.papp-map .eta {
  position: absolute; left: 10px; bottom: 10px;
  background: #fff; border-radius: 99px; padding: 4px 10px;
  font-size: 8px; font-weight: 700; color: var(--navy);
  box-shadow: 0 4px 10px rgba(20,40,70,.18);
  display: flex; align-items: center; gap: 5px;
}
.papp-map .eta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.papp-tabs {
  display: flex; justify-content: space-around; background: #fff;
  padding: 8px 0 10px; border-top: 1px solid #E7ECF1;
}
.papp-tabs svg { width: 15px; height: 15px; stroke: #A6B0BB; }
.papp-tabs svg.on { stroke: var(--teal); }
.phone-caption {
  text-align: center; margin-top: 18px;
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--teal);
}

/* showcase floating badges */
.shot-wrap { position: relative; }
.shot-badge {
  position: absolute; background: #fff; border-radius: 12px; padding: 10px 16px;
  box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--navy);
  animation: floaty 5s ease-in-out infinite; z-index: 4;
}
.shot-badge .dot2 { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(46,158,143,.2); }

/* ----- fleet gallery ----- */
.fleet-gallery { overflow: hidden; }
.gal-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 200px; gap: 18px; }
.gal-item {
  position: relative; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-md);
}
.gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.3,1); }
.gal-item:hover img { transform: scale(1.08); }
.gal-item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, transparent 45%, rgba(14,30,56,.78) 100%);
}
.gal-item .cap {
  position: absolute; left: 16px; bottom: 13px; z-index: 2; color: #fff;
  font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: 1px;
}
.gal-item .cap small {
  display: block; font-family: var(--font-body); font-size: 11px; font-weight: 400;
  color: #BFE7DF; letter-spacing: .4px; text-transform: none;
}
.gal-item .tag2 {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(14,30,56,.72); backdrop-filter: blur(4px); color: #7FD1C5;
  font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  border-radius: 99px; padding: 4px 11px;
}
.gal-a { grid-column: span 3; } .gal-b { grid-column: span 3; }
.gal-c { grid-column: span 2; } .gal-d { grid-column: span 2; } .gal-e { grid-column: span 2; }

@media (max-width: 1024px) {
  .showcase-grid { grid-template-columns: 1fr; gap: 60px; }
  .gal-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
  .gal-a, .gal-b, .gal-c, .gal-d, .gal-e { grid-column: span 1; }
}
@media (max-width: 720px) {
  .afd-side { flex-basis: 116px; }
  .afd-kpis { grid-template-columns: 1fr 1fr; }
  .gal-grid { grid-template-columns: 1fr; }
  .shot-badge { display: none; }
}