/* ============================================================
   iCHARLES V6.2 — REAL SOFTWARE SHOWCASE
   Real screenshots only. No mockup images generated here.
   ============================================================ */

.v62-home-showcase,
.v62-case-showcase{
  width:min(calc(100% - 40px),1500px);
  margin:0 auto;
  padding:clamp(70px,8vw,118px) 0;
  position:relative;
  isolation:isolate;
}
.v62-home-showcase::before,
.v62-case-showcase::before{
  content:"";
  position:absolute;
  inset:0 calc(50% - 50vw);
  z-index:-1;
  background:
    linear-gradient(var(--v60-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--v60-grid) 1px,transparent 1px);
  background-size:76px 76px;
  opacity:.18;
  mask-image:linear-gradient(to bottom,transparent,black 12%,black 90%,transparent);
}
.v62-home-showcase-head,
.v62-case-showcase-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,.52fr);
  gap:48px;
  align-items:end;
  border-bottom:1px solid var(--v60-line);
  padding-bottom:24px;
  margin-bottom:26px;
  position:relative;
}
.v62-home-showcase-head::after,
.v62-case-showcase-head::after{
  content:"";
  position:absolute;
  left:0;bottom:-2px;width:min(430px,62%);height:4px;
  background:linear-gradient(90deg,var(--v60-cyan),var(--v60-violet),var(--v60-magenta),transparent);
  opacity:.64;
}
.v62-home-showcase-head span,
.v62-case-showcase-head span,
.v62-app-showcase-head span{
  color:var(--v60-cyan);
  font:900 10px "Space Mono",monospace;
  letter-spacing:.10em;
}
.v62-home-showcase-head h2,
.v62-case-showcase-head h2{
  margin:12px 0 0;
  color:var(--v60-heading);
  font-size:clamp(46px,5.8vw,84px);
  line-height:.88;
  letter-spacing:-.06em;
}
.v62-home-showcase-head h2 em,
.v62-case-showcase-head h2 em{
  font-style:normal;
  color:transparent;
  -webkit-text-stroke:1px color-mix(in srgb,var(--v60-muted) 68%,transparent);
}
.v62-home-showcase-head p,
.v62-case-showcase-head p{
  color:var(--v60-muted);
  font-size:15px;
  line-height:1.65;
  margin:0;
}

.v62-home-showcase-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.v62-home-app{
  border:1px solid var(--v60-line);
  background:linear-gradient(145deg,var(--v60-surface),var(--v60-surface-3));
  box-shadow:0 24px 64px rgba(0,0,0,.14);
  clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,0 100%);
  padding:10px;
  min-width:0;
}
.v62-home-app-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 5px 3px;
}
.v62-home-app-meta small{
  color:var(--v60-cyan);
  font:900 9px "Space Mono",monospace;
}
.v62-home-app-meta span{
  color:var(--v60-muted);
  font:700 9px "Space Mono",monospace;
  text-align:right;
}

.v62-app-showcase{
  position:relative;
  z-index:2;
  margin-top:16px;
  padding:16px;
  border:1px solid var(--v60-line);
  background:linear-gradient(135deg,rgba(0,231,255,.025),rgba(5,12,21,.58),rgba(139,92,255,.025));
}
.v62-app-showcase-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding-bottom:12px;
  margin-bottom:12px;
  border-bottom:1px solid var(--v60-line);
}
.v62-app-showcase-head small{
  color:var(--v60-muted-2);
  font:700 9px "Space Mono",monospace;
}
.v62-app-showcase-track{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.v62-case-showcase-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.v62-case-showcase-grid .v62-shot.featured{
  grid-column:1/-1;
}

.v62-shot{
  margin:0;
  min-width:0;
}
.v62-shot-open{
  width:100%;
  padding:0;
  border:0;
  background:none;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.v62-shot-frame{
  display:block;
  position:relative;
  overflow:hidden;
  aspect-ratio:16/10;
  border:1px solid var(--v60-line);
  background:#02060b;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);
}
.v62-shot-frame::before{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,var(--v60-cyan),transparent 22%,transparent 78%,var(--v60-magenta)) top/100% 1px no-repeat,
    linear-gradient(180deg,rgba(255,255,255,.025),transparent 28%);
  opacity:.60;
}
.v62-shot-frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  transition:transform .38s cubic-bezier(.16,1,.3,1),filter .28s ease;
}
.v62-shot-frame i{
  position:absolute;
  right:10px;bottom:10px;
  width:26px;height:26px;
  border-right:2px solid var(--v60-cyan);
  border-bottom:2px solid var(--v60-magenta);
  opacity:.55;
}
.v62-shot-open:hover .v62-shot-frame img{
  transform:scale(1.018);
  filter:brightness(1.05);
}
.v62-shot figcaption{
  display:grid;
  grid-template-columns:1fr auto;
  gap:4px 12px;
  padding:10px 2px 2px;
}
.v62-shot figcaption small{
  grid-column:1/-1;
  color:var(--v60-muted-2);
  font:800 7px "Space Mono",monospace;
  letter-spacing:.07em;
}
.v62-shot figcaption strong{
  color:var(--v60-heading);
  font:850 11px/1.3 "Space Mono",monospace;
}
.v62-shot figcaption b{
  color:var(--v60-cyan);
  font:900 8px "Space Mono",monospace;
  align-self:center;
}

/* Full-screen preview */
.v62-showcase-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  place-items:center;
  padding:clamp(18px,4vw,54px);
  background:rgba(1,4,8,.90);
  backdrop-filter:blur(14px);
}
.v62-showcase-modal[data-open="1"]{display:grid}
.v62-showcase-modal-inner{
  width:min(1200px,96vw);
  max-height:92vh;
  border:1px solid rgba(0,231,255,.35);
  background:#03080e;
  box-shadow:0 40px 120px rgba(0,0,0,.60),0 0 42px rgba(0,231,255,.07);
}
.v62-showcase-modal-inner img{
  display:block;
  width:100%;
  max-height:78vh;
  object-fit:contain;
  background:#02060a;
}
.v62-showcase-modal-inner>div{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:13px 16px;
  border-top:1px solid rgba(0,231,255,.18);
}
.v62-showcase-modal-inner strong{color:#f2f7ff}
.v62-showcase-modal-inner span{color:#91a5ba}
.v62-showcase-close{
  position:fixed;
  top:18px;right:20px;
  width:44px;height:44px;
  border:1px solid rgba(0,231,255,.28);
  background:#06101a;
  color:#fff;
  cursor:pointer;
  font-size:26px;
}

/* Light theme */
html[data-ui-theme="light"] .v62-home-app,
html[data-ui-theme="light"] .v62-app-showcase{
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(237,247,254,.92));
}
html[data-ui-theme="light"] .v62-shot-frame{
  background:#dfeaf4;
  border-color:rgba(20,126,188,.24);
}
html[data-ui-theme="light"] .v62-home-showcase-head h2 em,
html[data-ui-theme="light"] .v62-case-showcase-head h2 em{
  -webkit-text-stroke:1px rgba(18,67,101,.42);
}

/* Responsive */
@media(max-width:900px){
  .v62-home-showcase-head,
  .v62-case-showcase-head{
    grid-template-columns:1fr;
    gap:16px;
  }
  .v62-home-showcase-grid{
    grid-template-columns:1fr;
  }
  .v62-app-showcase-track{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:620px){
  .v62-home-showcase,
  .v62-case-showcase{
    width:calc(100vw - 24px);
    max-width:calc(100vw - 24px);
    padding:56px 0;
  }
  .v62-home-showcase-head h2,
  .v62-case-showcase-head h2{
    font-size:40px;
  }
  .v62-app-showcase{
    padding:12px;
  }
  .v62-app-showcase-track,
  .v62-case-showcase-grid{
    grid-template-columns:1fr;
  }
  .v62-case-showcase-grid .v62-shot.featured{
    grid-column:auto;
  }
  .v62-app-showcase-head{
    align-items:flex-start;
    flex-direction:column;
  }
}