/* Screenshot showcases: platform hero slideshow, Reporting library and Home dashboard.
   Dark glass frames (no white backgrounds), animated gradient borders, aura glow, shine sweep,
   pointer tilt and floating chips. Hero slides change every 2.5s with a ~1.1s 3D slide/blur transition. */
@property --edge { syntax:'<angle>'; inherits:false; initial-value:0deg; }

.showcase,.holo-hero { position:relative; isolation:isolate; width:100%; min-width:0; }
.holo-hero.section-visual { height:auto; overflow:visible; }
.showcase-aura { position:absolute; inset:-9% -7%; z-index:-1; pointer-events:none; filter:blur(34px); opacity:.9;
  background:radial-gradient(42% 48% at 22% 28%,rgba(47,123,240,.55),transparent 72%),radial-gradient(40% 46% at 82% 74%,rgba(79,199,214,.42),transparent 72%),radial-gradient(34% 40% at 74% 12%,rgba(139,92,246,.38),transparent 72%);
  animation:auraShift 9s ease-in-out infinite alternate; }
@keyframes auraShift { from { transform:translate3d(-2%,-1%,0) scale(1); } to { transform:translate3d(2%,2%,0) scale(1.06); } }

.showcase-float { animation:showcaseFloat 7s ease-in-out infinite; }
@keyframes showcaseFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }

.showcase-frame { --rx:0deg; --ry:0deg; position:relative; border-radius:20px; padding:0 14px 14px; color:#dbe8fb;
  background:linear-gradient(155deg,rgba(22,42,78,.9),rgba(8,15,30,.94)); backdrop-filter:blur(10px);
  box-shadow:0 34px 90px rgba(0,0,0,.55),0 0 70px rgba(47,123,240,.22),inset 0 1px 0 rgba(255,255,255,.09);
  transform:perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)); transition:transform .45s cubic-bezier(.2,.8,.2,1); will-change:transform; }
.showcase-frame::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none; z-index:3;
  background:conic-gradient(from var(--edge),#2f7bf0,#4fc7d6,#8b5cf6,#2f7bf0 60%,#2f7bf0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:edgeSpin 6s linear infinite; }
@keyframes edgeSpin { to { --edge:360deg; } }
.showcase-frame::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:3; opacity:0; transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(120,175,255,.16),transparent 60%); }
[data-tilt]:hover .showcase-frame::after { opacity:1; }

.showcase-top { display:flex; align-items:center; gap:6px; padding:13px 2px 12px; font-size:12px; border-bottom:1px solid rgba(140,180,235,.16); }
.showcase-top strong { margin-left:8px; font-size:13px; font-weight:700; color:#f1f6ff; letter-spacing:.01em; }
.showcase-top .mock-dot { width:8px; height:8px; border-radius:50%; background:rgba(160,190,230,.4); }
.showcase-top .mock-dot:nth-child(1) { background:#ff6b6b; } .showcase-top .mock-dot:nth-child(2) { background:#ffc247; } .showcase-top .mock-dot:nth-child(3) { background:#3fd68a; }
.showcase-badge { margin-left:auto; padding:3px 9px; border:1px solid rgba(110,175,255,.4); border-radius:999px; font-size:9px; font-weight:700; letter-spacing:.14em; color:#9cc4ff; background:rgba(47,123,240,.14); }

.showcase-media { position:relative; margin-top:14px; overflow:hidden; border-radius:12px; background:#06101f; box-shadow:0 0 0 1px rgba(120,170,235,.22),0 18px 44px rgba(0,0,0,.5); }
.showcase-media img { display:block; width:100%; height:auto; }
.showcase-media::after,.shot::after { content:""; position:absolute; inset:0; pointer-events:none; transform:translateX(-130%);
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.17) 50%,transparent 62%); animation:shineSweep 6.5s ease-in-out 1.4s infinite; }
@keyframes shineSweep { 0%,55% { transform:translateX(-130%); } 100% { transform:translateX(130%); } }

.showcase-chip { position:absolute; z-index:4; padding:8px 14px; border:1px solid rgba(120,175,255,.38); border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.02em; color:#eaf3ff; white-space:nowrap;
  background:linear-gradient(135deg,rgba(32,64,120,.88),rgba(14,30,62,.92)); backdrop-filter:blur(8px); box-shadow:0 12px 30px rgba(0,0,0,.45),0 0 24px rgba(47,123,240,.3); animation:chipFloat 5s ease-in-out infinite; }
.showcase-chip::before { content:""; display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:#4fe0c0; box-shadow:0 0 10px #4fe0c0; vertical-align:1px; }
.chip-a { top:-14px; left:-18px; } .chip-b { right:-14px; bottom:-18px; animation-delay:-1.6s; } .chip-c { left:9%; bottom:-18px; animation-delay:-3.1s; }
@keyframes chipFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }

/* ---- Hero slideshow stage ---- */
.slideshow-stage { --fade:1.1s; position:relative; aspect-ratio:var(--slide-ratio,3/2); width:100%; margin:14px 0 10px; overflow:hidden; border-radius:12px; perspective:1100px;
  background:radial-gradient(70% 80% at 50% 40%,#12274a 0%,#08121f 70%,#050b15 100%); box-shadow:inset 0 0 0 1px rgba(120,170,235,.2); }
.stage-grid { position:absolute; inset:-30% -10%; pointer-events:none; opacity:.55; transform:perspective(500px) rotateX(58deg) translateY(0); animation:gridMove 3.2s linear infinite;
  background-image:linear-gradient(rgba(79,160,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(79,160,255,.22) 1px,transparent 1px); background-size:38px 38px;
  -webkit-mask-image:radial-gradient(60% 55% at 50% 60%,#000,transparent 75%); mask-image:radial-gradient(60% 55% at 50% 60%,#000,transparent 75%); }
@keyframes gridMove { to { background-position:0 38px,38px 0; } }

.slideshow-stage .slide { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none;
  transform:translate3d(9%,0,0) rotateY(-14deg) scale(.88); filter:blur(10px);
  transition:opacity var(--fade) ease,transform var(--fade) cubic-bezier(.22,.8,.2,1),filter var(--fade) ease; }
.slideshow-stage .slide.is-active { opacity:1; transform:none; filter:none; pointer-events:auto; z-index:1; }
.slideshow-stage .slide.is-leaving { opacity:0; transform:translate3d(-9%,0,0) rotateY(14deg) scale(.93); filter:blur(8px); z-index:0; }

.shot { position:relative; display:block; overflow:hidden; border-radius:12px; aspect-ratio:var(--ar); background:#0b1628;
  box-shadow:0 26px 60px rgba(0,0,0,.6),0 0 46px rgba(47,123,240,.38); }
.shot.is-wide { width:80%; height:auto; } .shot.is-tall { height:80%; width:auto; }
.shot.is-full { width:100%; height:100%; border-radius:0; box-shadow:none; }
.shot img { display:block; width:100%; height:100%; object-fit:contain; }
.shot:not(.is-full)::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none; z-index:2;
  background:conic-gradient(from var(--edge),#2f7bf0,#4fc7d6,#8b5cf6,#2f7bf0 60%,#2f7bf0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:edgeSpin 4s linear infinite; }
.slide.is-active .shot:not(.is-full) { animation:shotDrift 2.5s ease-in-out both; }
@keyframes shotDrift { from { transform:translateY(8px) scale(.985); } to { transform:translateY(-4px) scale(1.012); } }
.slide.is-active .shot.is-full img { animation:fullZoom 2.8s ease-out both; }
@keyframes fullZoom { from { transform:scale(1.04); } to { transform:scale(1); } }

/* ---- Controls (dark) ---- */
.slideshow-bar { display:flex; align-items:center; justify-content:center; gap:10px; padding:2px 0 0; }
.slide-dots { display:flex; align-items:center; gap:7px; flex-wrap:wrap; justify-content:center; max-width:100%; }
.slide-dot { width:8px; height:8px; padding:0; border:0; border-radius:50%; background:rgba(160,190,230,.35); transition:transform .25s,background .25s,width .25s; }
.slide-dot:hover { background:rgba(190,215,255,.7); }
.slide-dot.is-active { width:24px; border-radius:8px; background:linear-gradient(90deg,#2f7bf0,#4fc7d6); box-shadow:0 0 12px rgba(79,199,214,.55); }
.slide-btn { width:30px; height:30px; flex:none; display:grid; place-items:center; padding:0; border:1px solid rgba(140,180,235,.3); border-radius:50%; background:rgba(255,255,255,.06); color:#cfe1ff; transition:background .2s,border-color .2s,transform .2s; }
.slide-btn:hover { background:rgba(47,123,240,.3); border-color:rgba(150,195,255,.7); transform:translateY(-1px); }
.slide-btn svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.slide-toggle .icon-play { display:none; fill:currentColor; stroke:none; }
.slide-toggle[aria-pressed="true"] .icon-play { display:block; }
.slide-toggle[aria-pressed="true"] .icon-pause { display:none; }
.slide-btn:focus-visible,.slide-dot:focus-visible { outline:2px solid #7fb2ff; outline-offset:2px; }
.slide-progress { height:3px; margin:12px 0 0; border-radius:3px; background:rgba(255,255,255,.1); overflow:hidden; }
.slide-progress span { display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg,#2879ef,#4fc7d6,#8b5cf6); }
[data-slideshow].is-playing .slide-progress span { animation:slideProgress var(--interval,2500ms) linear forwards; }
@keyframes slideProgress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.dashboard-slideshow .slide-title { transition:opacity .3s; }

/* ---- Reporting page: copy left, screenshot right ---- */
.report-grid { grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:56px; align-items:center; }
.report-copy h2 { max-width:12em; }
.report-accordion { display:grid; gap:12px; margin-top:28px; }
.report-group { position:relative; border:1px solid rgba(130,170,225,.22); border-radius:14px; background:linear-gradient(145deg,rgba(24,44,80,.55),rgba(10,20,40,.55)); transition:border-color .3s,box-shadow .3s; }
.report-group::before { content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1.5px; pointer-events:none; opacity:0; transition:opacity .3s;
  background:conic-gradient(from var(--edge),#2f7bf0,#4fc7d6,#8b5cf6,#f5a524,#2f7bf0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:edgeSpin 3s linear infinite; }
.report-group:hover::before,.report-group:focus-within::before { opacity:1; }
.report-group:hover { box-shadow:0 0 24px rgba(79,160,255,.25); }
.report-group[open] { border-color:#f5a524; box-shadow:0 0 0 1px rgba(245,165,36,.35),0 14px 34px rgba(0,0,0,.35); }
.report-group summary { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:17px 20px; cursor:pointer; list-style:none; font-size:17px; font-weight:700; color:#fff; border-radius:14px; }
.report-group summary::-webkit-details-marker { display:none; }
.report-group summary:hover { color:#bcd8ff; }
.report-group summary:focus-visible { outline:2px solid #7fb2ff; outline-offset:2px; }
.report-group summary svg { flex:none; width:20px; height:20px; fill:none; stroke:#9cc4ff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s; }
.report-group[open] summary svg { transform:rotate(180deg); stroke:#f5a524; }
.report-list { list-style:none; margin:0; padding:0 16px 16px; display:grid; grid-template-columns:1fr 1fr; gap:12px; animation:groupOpen .35s ease both; }
.report-list li:only-child { grid-column:1 / -1; }
.report-list li:last-child:nth-child(odd) { grid-column:1 / -1; }
@keyframes groupOpen { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.report-list li { display:flex; gap:12px; align-items:flex-start; padding:13px 14px; border:1px solid rgba(130,170,225,.2); border-radius:12px; background:rgba(8,16,32,.55); transition:transform .3s,border-color .3s,box-shadow .3s; }
.report-list li:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--c) 70%,#fff 10%); box-shadow:0 14px 30px rgba(0,0,0,.35),0 0 22px color-mix(in srgb,var(--c) 35%,transparent); }
.report-list i { flex:none; width:30px; height:30px; margin-top:1px; border-radius:9px; background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 55%,#000)); box-shadow:0 0 16px color-mix(in srgb,var(--c) 50%,transparent); position:relative; }
.report-list i::after { content:""; position:absolute; inset:9px; border:2px solid rgba(255,255,255,.9); border-radius:3px; }
.report-list strong { display:block; font-size:13.5px; line-height:1.3; color:#fff; }
.report-list span { display:block; margin-top:3px; font-size:12px; line-height:1.5; color:#a9bbd1; }
.report-showcase .showcase-media { aspect-ratio:1672/941; }

@media(max-width:1000px) {
  .report-grid { grid-template-columns:1fr; gap:44px; }
  .report-copy h2 { max-width:none; }
  .chip-a { left:0; } .chip-b { right:0; }
}
@media(max-width:600px) {
  .report-list { grid-template-columns:1fr; padding:0 12px 12px; }
  .report-group summary { padding:15px 16px; font-size:16px; }
  .showcase-chip { font-size:10.5px; padding:6px 10px; }
  .chip-b { display:none; }
  .slide-dot { width:6px; height:6px; } .slide-dot.is-active { width:16px; }
  .slideshow-bar { gap:6px; }
  .showcase-frame { padding:0 9px 9px; border-radius:15px; }
  .showcase-badge { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  .showcase-aura,.showcase-float,.showcase-chip,.stage-grid,.showcase-frame::before,.shot::before,.showcase-media::after,.shot::after,.slide.is-active .shot,.slide.is-active .shot img,.report-list,.report-group::before { animation:none!important; }
  .showcase-frame { transform:none!important; }
  .slideshow-stage .slide,.slideshow-stage .slide.is-active,.slideshow-stage .slide.is-leaving { transform:none!important; filter:none!important; transition:opacity .25s linear!important; }
  .slide-progress { display:none; }
}

#reporting-screens,.dashboard-showcase { overflow-x:clip; }