/* ============================================================
   iCHARLES V6.1 PART 2 — TRY APPS + WORK
   Ghost Ops visual expansion using underutilized production-pack assets.
   No identity replacement. Locked Iko unchanged.
   ============================================================ */

:root{
  --v61-shard:url("/assets/iko-prime/ghostops/part2/iko-energy-shard.webp?v=61");
  --v61-network:url("/assets/iko-prime/ghostops/part2/iko-network-emblem.webp?v=61");
  --v61-frame:url("/assets/iko-prime/ghostops/part2/iko-hud-frame.webp?v=61");
  --v61-rail:url("/assets/iko-prime/ghostops/part2/iko-signal-rail.webp?v=61");
}

/* ============================================================
   TRY APPS — turn the existing orbital composition into a
   command-network launch deck rather than adding more content.
   ============================================================ */
.try-body .live-app-hero{
  position:relative!important;
  isolation:isolate!important;
  border-top:1px solid color-mix(in srgb,var(--v60-line) 54%,transparent)!important;
  border-bottom:1px solid color-mix(in srgb,var(--v60-line) 72%,transparent)!important;
  overflow:hidden!important;
}
.try-body .live-app-hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:min(70vw,940px);
  aspect-ratio:1400/771;
  right:-9%;
  top:50%;
  transform:translateY(-47%);
  background:var(--v61-network) center/contain no-repeat;
  opacity:.14;
  pointer-events:none;
  filter:drop-shadow(0 0 24px rgba(0,231,255,.05));
}
.try-body .live-app-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:min(34vw,390px);
  aspect-ratio:1;
  left:-10%;
  bottom:-31%;
  background:var(--v61-shard) center/contain no-repeat;
  opacity:.07;
  rotate:-14deg;
  pointer-events:none;
}
.try-body .try-hero{
  position:relative;
  z-index:3;
}
.try-body .try-kicker{
  padding:8px 11px;
  border-left:2px solid var(--v60-green);
  background:linear-gradient(90deg,rgba(72,255,155,.045),transparent);
}
.try-body .try-hero h1{
  text-wrap:balance;
}
.try-body .try-hero-actions a{
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
.try-body .try-primary{
  background:
    linear-gradient(110deg,rgba(0,231,255,.14),rgba(4,13,23,.96),rgba(139,92,255,.11))!important;
  color:var(--v60-heading)!important;
  border:1px solid rgba(0,231,255,.46)!important;
}
.try-body .try-secondary{
  background:
    linear-gradient(110deg,rgba(139,92,255,.08),rgba(4,13,23,.94),rgba(255,43,214,.055))!important;
  border-color:rgba(139,92,255,.34)!important;
}
.try-body .live-app-note{
  position:relative;
  border:1px solid var(--v60-line)!important;
  border-left:3px solid var(--v60-violet)!important;
  background:
    linear-gradient(90deg,rgba(139,92,255,.06),rgba(4,11,20,.72),transparent)!important;
}
.try-body .live-app-note::after{
  content:"";
  position:absolute;
  right:12px;top:50%;
  width:72px;height:18px;
  transform:translateY(-50%);
  background:var(--v61-rail) right center/contain no-repeat;
  opacity:.25;
}

.try-body .live-orbit{
  isolation:isolate;
}
.try-body .live-orbit::before{
  content:"";
  position:absolute;
  z-index:-2;
  width:92%;
  aspect-ratio:1;
  background:var(--v61-frame) center/contain no-repeat;
  opacity:.16;
  pointer-events:none;
}
.try-body .live-orbit::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:79%;
  aspect-ratio:1;
  background:radial-gradient(circle,rgba(0,231,255,.065),transparent 52%);
  border:1px solid rgba(0,231,255,.08);
  clip-path:polygon(10% 0,90% 0,100% 10%,100% 90%,90% 100%,10% 100%,0 90%,0 10%);
}
.try-body .live-orbit-app{
  border-color:rgba(74,183,232,.28)!important;
  background:linear-gradient(110deg,rgba(5,13,23,.95),rgba(11,17,30,.86))!important;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.30),0 0 26px rgba(0,231,255,.045)!important;
}
.try-body .live-orbit-app::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--v60-cyan),transparent 56%,var(--v60-magenta));
  opacity:.52;
}
.try-body .live-app-library{
  position:relative;
  isolation:isolate;
}
.try-body .live-app-library::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0 calc(50% - 50vw);
  pointer-events:none;
  background:
    linear-gradient(var(--v60-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--v60-grid) 1px,transparent 1px);
  background-size:72px 72px;
  opacity:.25;
  mask-image:linear-gradient(to bottom,transparent,black 9%,black 88%,transparent);
}
.try-body .live-library-head{
  position:relative;
  padding-bottom:26px;
  border-bottom:1px solid var(--v60-line);
}
.try-body .live-library-head::after{
  content:"";
  position:absolute;
  left:0;bottom:-2px;
  width:min(420px,62%);
  height:4px;
  background:linear-gradient(90deg,var(--v60-cyan),var(--v60-violet),var(--v60-magenta),transparent);
  opacity:.64;
}
.try-body .live-app-card{
  clip-path:polygon(0 0,calc(100% - 15px) 0,100% 15px,100% 100%,0 100%);
  box-shadow:0 24px 68px rgba(0,0,0,.16),0 0 28px rgba(0,231,255,.025)!important;
}
.try-body .live-app-card::after{
  content:"";
  position:absolute;
  z-index:1;
  width:170px;height:170px;
  right:-38px;bottom:-52px;
  background:var(--v61-shard) center/contain no-repeat;
  opacity:.055;
  rotate:18deg;
  pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
}
.try-body .live-app-card:hover::after{
  opacity:.12;
  transform:translate(-8px,-8px);
}
.try-body .live-app-facts{
  background:rgba(4,10,18,.42);
}
.try-body .live-app-facts span{
  position:relative;
}
.try-body .live-app-facts span::after{
  content:"";
  position:absolute;
  left:16px;right:16px;bottom:7px;height:1px;
  background:linear-gradient(90deg,var(--v60-cyan),transparent);
  opacity:.20;
}

/* ============================================================
   WORK / PORTFOLIO — convert the hero and project deck into the
   same restrained command-center language as Home.
   ============================================================ */
.site-header + main .hero{
  isolation:isolate!important;
}
.site-header + main .hero::before{
  content:"";
  position:absolute;
  z-index:-2;
  width:min(61vw,870px);
  aspect-ratio:1400/771;
  right:-10%;
  top:49%;
  transform:translateY(-48%);
  background:var(--v61-network) center/contain no-repeat;
  opacity:.11;
  pointer-events:none;
}
.site-header + main .hero::after{
  content:"";
  position:absolute;
  z-index:-2;
  left:0;right:0;bottom:0;height:35%;
  background:
    linear-gradient(to top,var(--v60-bg),transparent),
    linear-gradient(var(--v60-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--v60-grid) 1px,transparent 1px);
  background-size:auto,72px 72px,72px 72px;
  opacity:.28;
  mask-image:linear-gradient(to top,black,transparent);
}
.site-header + main .hero .hero-copy{
  position:relative;
  z-index:2;
}
.site-header + main .hero .hero-copy::before{
  content:"";
  position:absolute;
  left:-18px;top:0;bottom:0;width:1px;
  background:linear-gradient(transparent,var(--v60-cyan) 22%,rgba(0,231,255,.12) 72%,transparent);
  opacity:.36;
}
.site-header + main .hero .hero-visual{
  isolation:isolate;
}
.site-header + main .hero .hero-visual::before{
  content:"";
  position:absolute;
  z-index:-2;
  width:96%;
  aspect-ratio:1;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  background:var(--v61-frame) center/contain no-repeat;
  opacity:.15;
  pointer-events:none;
}
.site-header + main .hero .hero-visual::after{
  content:"";
  position:absolute;
  z-index:-3;
  width:112%;
  aspect-ratio:1400/771;
  left:48%;top:51%;
  transform:translate(-50%,-50%);
  background:var(--v61-network) center/contain no-repeat;
  opacity:.12;
  pointer-events:none;
}
.site-header + main .hero .hero-actions a{
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))!important;
}
.site-header + main .hero .hero-meta{
  border-top:1px solid var(--v60-line)!important;
  border-bottom:1px solid var(--v60-line)!important;
  background:linear-gradient(90deg,rgba(0,231,255,.025),transparent,rgba(255,43,214,.018))!important;
}

.portfolio-launch-section,
.work-section{
  position:relative;
  isolation:isolate;
}
.portfolio-launch-section::before,
.work-section::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:0 calc(50% - 50vw);
  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);
}
.portfolio-launch-head,
.section-head{
  position:relative;
  padding-bottom:24px;
  border-bottom:1px solid var(--v60-line);
}
.portfolio-launch-head::after,
.section-head::after{
  content:"";
  position:absolute;
  left:0;bottom:-2px;
  width:min(410px,58%);
  height:4px;
  background:linear-gradient(90deg,var(--v60-cyan),var(--v60-violet),var(--v60-magenta),transparent);
  opacity:.62;
}

.launch-card{
  position:relative!important;
  overflow:hidden!important;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)!important;
  border-color:var(--v60-line)!important;
  background:
    linear-gradient(135deg,var(--v60-surface),var(--v60-surface-3))!important;
  box-shadow:0 22px 56px rgba(0,0,0,.14),0 0 28px rgba(0,231,255,.025)!important;
}
.launch-card::after{
  content:"";
  position:absolute;
  right:-48px;bottom:-56px;
  width:175px;height:175px;
  background:var(--v61-shard) center/contain no-repeat;
  opacity:.05;
  rotate:18deg;
  pointer-events:none;
  transition:.25s ease;
}
.launch-card:hover::after{
  opacity:.12;
  transform:translate(-8px,-8px);
}
.launch-card:hover{
  border-color:var(--v60-line-strong)!important;
  transform:translateY(-4px)!important;
}

.project-stage{
  position:relative;
  overflow:hidden;
  border:1px solid var(--v60-line)!important;
  background:
    linear-gradient(145deg,var(--v60-surface),rgba(5,12,21,.82))!important;
  box-shadow:0 32px 82px rgba(0,0,0,.18),0 0 40px rgba(0,231,255,.025)!important;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)!important;
}
.project-stage::after{
  content:"";
  position:absolute;
  z-index:0;
  width:260px;height:260px;
  right:-72px;bottom:-85px;
  background:var(--v61-shard) center/contain no-repeat;
  opacity:.055;
  rotate:15deg;
  pointer-events:none;
}
.project-stage>*{
  position:relative;
  z-index:1;
}
.stage-chrome{
  border-color:var(--v60-line)!important;
}
.stage-topbar{
  background:linear-gradient(90deg,rgba(0,231,255,.035),rgba(8,15,25,.96),rgba(255,43,214,.025))!important;
}
.project-screen{
  background:
    radial-gradient(circle at 70% 20%,rgba(0,231,255,.035),transparent 30%),
    linear-gradient(145deg,rgba(3,9,16,.94),rgba(5,10,18,.84))!important;
}
.project-screen::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--v61-frame) center/72% auto no-repeat;
  opacity:.035;
  pointer-events:none;
}
.project-info-card,
.project-selector,
.project-nav{
  border-color:var(--v60-line)!important;
  background:linear-gradient(145deg,var(--v60-surface),var(--v60-surface-3))!important;
}

/* ============================================================
   LIGHT THEME
   ============================================================ */
html[data-ui-theme="light"] .try-body .live-app-hero::before,
html[data-ui-theme="light"] .site-header + main .hero::before,
html[data-ui-theme="light"] .site-header + main .hero .hero-visual::after{
  opacity:.075;
}
html[data-ui-theme="light"] .try-body .live-orbit::before,
html[data-ui-theme="light"] .site-header + main .hero .hero-visual::before{
  opacity:.10;
}
html[data-ui-theme="light"] .try-body .try-primary{
  color:#071a2c!important;
  background:linear-gradient(110deg,rgba(0,184,225,.12),rgba(255,255,255,.96),rgba(139,92,255,.07))!important;
}
html[data-ui-theme="light"] .try-body .try-secondary,
html[data-ui-theme="light"] .try-body .live-app-note,
html[data-ui-theme="light"] .try-body .live-orbit-app,
html[data-ui-theme="light"] .launch-card,
html[data-ui-theme="light"] .project-stage,
html[data-ui-theme="light"] .project-info-card,
html[data-ui-theme="light"] .project-selector,
html[data-ui-theme="light"] .project-nav{
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(238,247,254,.90))!important;
  color:var(--v60-text)!important;
}
html[data-ui-theme="light"] .try-body .live-app-facts{
  background:rgba(244,250,255,.76)!important;
}
html[data-ui-theme="light"] .project-screen{
  background:
    radial-gradient(circle at 70% 20%,rgba(0,164,229,.05),transparent 31%),
    linear-gradient(145deg,rgba(249,252,255,.96),rgba(232,243,252,.92))!important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
  .try-body .live-app-hero::before{
    width:118%;
    right:-50%;
    opacity:.09;
  }
  .try-body .live-app-hero::after{
    display:none;
  }
  .try-body .live-orbit::before{
    width:108%;
  }
  .site-header + main .hero::before{
    width:118%;
    right:-45%;
    opacity:.075;
  }
}
@media(max-width:720px){
  .try-body .live-app-hero::before,
  .site-header + main .hero::before,
  .site-header + main .hero .hero-visual::after{
    display:none;
  }
  .try-body .live-orbit::before{
    opacity:.10;
  }
  .try-body .live-app-card::after,
  .launch-card::after,
  .project-stage::after{
    width:120px;height:120px;
    opacity:.035;
  }
  .portfolio-launch-head::after,
  .section-head::after,
  .try-body .live-library-head::after{
    width:52%;
  }
}