/* Astelytics Static Site v1.0 */
:root{
  --bg:#0b1020;
  --bg2:#0f1730;
  --card:#121c3a;
  --text:#e8edf9;
  --muted:#aab6d3;
  --muted2:#7f8bb0;
  --brand:#7aa7ff;
  --brand2:#6ee7ff;
  --ok:#8bffb0;
  --warn:#ffd27a;
  --danger:#ff7a9b;
  --border:rgba(255,255,255,.10);
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --radius: 18px;
  --radius2: 26px;
  --max: 1180px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  background: radial-gradient(1200px 600px at 15% 10%, rgba(122,167,255,.22), transparent 55%),
              radial-gradient(900px 500px at 80% 15%, rgba(110,231,255,.16), transparent 55%),
              linear-gradient(180deg, var(--bg), #070a14 70%);
  color:var(--text);
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}

.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  background: rgba(11,16,32,.65);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{
  display:flex; gap:10px; align-items:center;
}
.logo{
  width:34px; height:34px; border-radius:10px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: 0 10px 30px rgba(122,167,255,.25);
}
.brand-name{font-weight:750; letter-spacing:.2px}
.brand-sub{font-size:12px; color:var(--muted); margin-top:1px}
.brand-text{line-height:1.05}
.menu{display:flex; gap:14px; align-items:center}
.menu a{
  font-size:14px; color:var(--muted);
  padding:9px 10px; border-radius:12px;
}
.menu a:hover{color:var(--text); background: rgba(255,255,255,.06)}
.menu a.active{color:var(--text); background: rgba(122,167,255,.12); border:1px solid rgba(122,167,255,.25)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  border-radius:14px;
  padding:12px 14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
  font-weight:650;
}
.btn:hover{background: rgba(255,255,255,.10)}
.btn.primary{
  background: linear-gradient(135deg, rgba(122,167,255,.95), rgba(110,231,255,.85));
  color:#071022;
  border:1px solid rgba(255,255,255,.18);
}
.btn.primary:hover{filter:brightness(1.02)}
.btn.ghost{background: transparent}
.btn.small{padding:10px 12px; border-radius:12px; font-size:14px}
.badge{
  display:inline-flex; align-items:center;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--muted);
  font-size:12px;
  background: rgba(255,255,255,.04);
}

.hero{
  padding:58px 0 26px;
}
.hero-grid{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:26px;
  align-items:stretch;
}
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr; gap:16px}
}
.h-eyebrow{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:18px
}
h1{
  margin:0;
  font-size: 44px;
  line-height: 1.06;
  letter-spacing:-.6px;
}
@media (max-width: 520px){
  h1{font-size:34px}
}
.lead{
  margin:14px 0 22px;
  font-size: 16px;
  line-height: 1.55;
  color:var(--muted);
  max-width: 58ch;
}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap}
.card{
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(18,28,58,.74), rgba(10,16,35,.66));
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
}
.card.pad{padding:18px}
.card.soft{box-shadow:none; background: rgba(18,28,58,.45)}
.kpi{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.kpi .box{
  padding:14px; border:1px solid var(--border); border-radius:16px;
  background: rgba(255,255,255,.03);
}
.kpi .val{font-size:18px; font-weight:760}
.kpi .lbl{font-size:12px; color:var(--muted); margin-top:6px}

.section{padding:34px 0}
.section-title{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; margin-bottom:14px
}
.section-title h2{
  margin:0; font-size:22px; letter-spacing:-.2px
}
.section-title p{margin:0; color:var(--muted); font-size:14px; max-width:65ch}

.grid3{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px}
.grid2{display:grid; grid-template-columns:repeat(2, 1fr); gap:14px}
.grid4{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px}
@media (max-width: 980px){ .grid3{grid-template-columns:1fr} .grid4{grid-template-columns:1fr 1fr} }
@media (max-width: 640px){ .grid2{grid-template-columns:1fr} .grid4{grid-template-columns:1fr} }

.feature{
  padding:16px;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
}
.feature h3{margin:0 0 8px; font-size:16px}
.feature p{margin:0; color:var(--muted); font-size:14px; line-height:1.55}
.feature .meta{
  margin-top:12px; display:flex; flex-wrap:wrap; gap:8px
}

.pills{display:flex; gap:8px; flex-wrap:wrap}
.pill{
  padding:9px 12px; border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color:var(--muted);
  font-size:13px;
  cursor:pointer;
}
.pill.active{color:var(--text); border-color: rgba(122,167,255,.35); background: rgba(122,167,255,.12)}
.pill:hover{color:var(--text)}
.muted{color:var(--muted)}
.small{font-size:13px}
.hr{height:1px; background: var(--border); margin:18px 0}

.tabs{display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 14px}
.tab{padding:10px 12px; border-radius:14px; border:1px solid var(--border); background: rgba(255,255,255,.03); color:var(--muted); cursor:pointer; font-size:13px}
.tab.active{background: rgba(110,231,255,.10); border-color: rgba(110,231,255,.35); color:var(--text)}

.notice{
  border-left: 3px solid rgba(110,231,255,.8);
  padding:12px 14px;
  background: rgba(110,231,255,.06);
  border-radius: 14px;
  color: var(--muted);
  font-size:14px;
}

.footer{
  padding:26px 0 34px;
  border-top:1px solid var(--border);
  color:var(--muted);
}
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:16px;
}
@media (max-width: 980px){ .footer-grid{grid-template-columns: 1fr} }
.footer a{color:var(--muted)}
.footer a:hover{color:var(--text)}
.footer .mini{font-size:12px; color:var(--muted2)}

.form{
  display:grid; gap:10px;
}
.input, select, textarea{
  width:100%;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text);
  outline:none;
}
textarea{min-height:110px; resize:vertical}
label{font-size:13px; color:var(--muted)}
.row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width: 640px){ .row{grid-template-columns:1fr} }

.codebox{
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  padding:12px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.22);
  overflow:auto;
}

/* Demo canvases */
.demo-canvas{
  width:100%;
  height:auto;
  border-radius: 16px;
  border:1px solid var(--border);
  background: radial-gradient(600px 300px at 25% 40%, rgba(122,167,255,.16), rgba(0,0,0,0) 60%),
              radial-gradient(600px 300px at 75% 60%, rgba(110,231,255,.10), rgba(0,0,0,0) 60%),
              rgba(255,255,255,.02);
}

/* ---------------- Motion + microinteractions ---------------- */
:root{ --ease-out: cubic-bezier(.16,1,.3,1); }

html.page-in body{ animation: pageFade .7s var(--ease-out) both; }
@keyframes pageFade{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform: translateY(0);} }

.nav.nav-scrolled{
  background: rgba(15,18,29,.55) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

[data-reveal]{
  opacity:0;
  transform: translateY(12px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  will-change: transform, opacity;
}
[data-reveal].reveal-in{ opacity:1; transform: translateY(0); }
[data-reveal="fade"]{ transform:none; }
[data-reveal="fade"].reveal-in{ transform:none; }

.btn{ transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s var(--ease-out); }
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0px) scale(.99); }

.card, .feature{ transition: transform .24s var(--ease-out), border-color .24s var(--ease-out), background-color .24s var(--ease-out); }
.card:hover, .feature:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.18); }

.cursor-glow{
  position: fixed; left:0; top:0;
  width:280px; height:280px;
  border-radius: 999px;
  pointer-events:none;
  background: radial-gradient(circle at 30% 30%, rgba(110,231,255,.12), rgba(122,167,255,.08), rgba(0,0,0,0) 70%);
  filter: blur(2px);
  opacity: .9;
  mix-blend-mode: screen;
  z-index: 0;
}
main, header, footer, .nav{ position:relative; z-index:1; }

.carousel{
  border:1px solid var(--border);
  border-radius: 16px;
  overflow:hidden;
  background: rgba(255,255,255,.02);
}
.carousel-track{
  display:flex;
  width:100%;
  transition: transform .65s var(--ease-out);
}
.carousel-item{ min-width:100%; padding:18px; }
.carousel-controls{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  padding:12px 12px 0 12px;
}
.btn.small{ padding:8px 12px; font-size: 13px; }

.hero-blob{
  position:absolute;
  inset:-120px -80px auto -120px;
  width:520px; height:520px;
  background: radial-gradient(circle at 30% 30%, rgba(110,231,255,.16), rgba(122,167,255,.10), rgba(0,0,0,0) 70%);
  border-radius: 999px;
  filter: blur(12px);
  animation: blobFloat 10s var(--ease-out) infinite;
  pointer-events:none;
  z-index:0;
}
@keyframes blobFloat{
  0%{ transform: translate(0,0) scale(1); opacity:.9; }
  50%{ transform: translate(42px, 26px) scale(1.05); opacity:.75; }
  100%{ transform: translate(0,0) scale(1); opacity:.9; }
}

/* ---------------- Animated solution illustrations ---------------- */
.illu{
  border:1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.02);
  overflow:hidden;
  position: relative;
}
.illu svg{
  width:100%;
  height:auto;
  display:block;
}
.illu .cap{
  position:absolute;
  left:12px; bottom:10px;
  font-size:12px;
  color: var(--muted);
  background: rgba(15,18,29,.55);
  border:1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding:6px 10px;
  backdrop-filter: blur(10px);
}

/* shared strokes */
.illu .s-line{ stroke: rgba(255,255,255,.18); stroke-width:2; fill:none; stroke-linecap:round; }
.illu .s-node{ fill: rgba(255,255,255,.06); stroke: rgba(255,255,255,.14); stroke-width:2; }
.illu .s-accent{ stroke: rgba(110,231,255,.55); }
.illu .fill-accent{ fill: rgba(110,231,255,.18); stroke: rgba(110,231,255,.55); stroke-width:2; }
.illu .pulse{ animation: illuPulse 1.6s var(--ease-out) infinite; transform-origin:center; }
@keyframes illuPulse{
  0%{ opacity:.25; transform: scale(.92); }
  50%{ opacity:.75; transform: scale(1.05); }
  100%{ opacity:.25; transform: scale(.92); }
}
.illu .dash{
  stroke-dasharray: 6 8;
  animation: illuFlow 1.8s linear infinite;
}
@keyframes illuFlow{
  from{ stroke-dashoffset: 0; }
  to{ stroke-dashoffset: -28; }
}
.illu .float{
  animation: illuFloat 6.5s var(--ease-out) infinite;
}
@keyframes illuFloat{
  0%{ transform: translateY(0px); }
  50%{ transform: translateY(-6px); }
  100%{ transform: translateY(0px); }
}
.illu .blink{
  animation: illuBlink 4.6s steps(1) infinite;
}
@keyframes illuBlink{
  0%, 92%{ opacity: 1; }
  93%, 96%{ opacity: 0; }
  97%, 100%{ opacity: 1; }
}

/* ---------------- VMS hero video (VisionLabs-style) ---------------- */
.hero-media{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.35);
  min-height: 420px;
}
.hero-media video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  filter: saturate(1.05) contrast(1.05);
}
.hero-media .shade{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(12,14,20,.82) 0%, rgba(12,14,20,.35) 42%, rgba(12,14,20,.15) 100%);
  pointer-events:none;
}
.hero-media .topbar{
  position:absolute; left:0; right:0; top:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 14px 0 14px;
  gap:12px;
}
.pills.scenarios{
  display:flex; gap:8px; flex-wrap:wrap;
  padding:8px;
  background: rgba(15,18,29,.55);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  backdrop-filter: blur(10px);
}
.pills.scenarios .pill{ border-radius:999px; }
.hero-media .actions{
  display:flex; gap:10px;
  padding:8px;
  background: rgba(15,18,29,.55);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  backdrop-filter: blur(10px);
}
.overlay-ui{
  position:absolute;
  right: 14px;
  bottom: 14px;
  width: min(360px, 42vw);
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}
.ui-card{
  background: rgba(15,18,29,.62);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 12px 12px;
  backdrop-filter: blur(10px);
}
.ui-title{
  font-size: 13px;
  color: rgba(232,237,249,.85);
  margin:0 0 6px;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
}
.badge-live{
  font-size: 11px;
  padding:4px 8px;
  border-radius: 999px;
  background: rgba(110,231,255,.14);
  border:1px solid rgba(110,231,255,.35);
  color: rgba(232,237,249,.9);
}
.ui-list{
  margin:0; padding:0;
  list-style:none;
  display:flex; flex-direction:column; gap:6px;
  font-size: 12px;
  color: rgba(232,237,249,.72);
}
.ui-list li{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
}
.ui-dot{
  width:8px; height:8px; border-radius:999px;
  background: rgba(110,231,255,.75);
  box-shadow: 0 0 0 6px rgba(110,231,255,.10);
}
.ui-dot.warn{
  background: rgba(255,210,122,.85);
  box-shadow: 0 0 0 6px rgba(255,210,122,.10);
}
.ui-dot.red{
  background: rgba(255,122,122,.85);
  box-shadow: 0 0 0 6px rgba(255,122,122,.10);
}
.ui-mini{ font-size: 11px; color: rgba(232,237,249,.60); margin-top:6px; }

.hero-copy{
  position:absolute;
  left: 18px;
  bottom: 18px;
  max-width: min(560px, 56vw);
  pointer-events:none;
}
.hero-copy h1{ margin:0 0 10px; }
.hero-copy p{ margin:0 0 14px; }
.hero-copy .cta-row{
  display:flex; gap:10px; flex-wrap:wrap;
  pointer-events:auto;
}

.det-layer{
  position:absolute; inset:0;
  pointer-events:none;
}
.box{
  position:absolute;
  border: 2px solid rgba(110,231,255,.65);
  border-radius: 8px;
  box-shadow: 0 0 0 6px rgba(110,231,255,.10);
}
.box .lbl{
  position:absolute;
  left: 8px; top: -26px;
  font-size: 11px;
  padding:4px 8px;
  border-radius: 999px;
  background: rgba(15,18,29,.70);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(232,237,249,.90);
  white-space:nowrap;
}
.box.warn{ border-color: rgba(255,210,122,.75); box-shadow: 0 0 0 6px rgba(255,210,122,.10); }
.box.warn .lbl{ color: rgba(255,235,190,.95); }
.box.red{ border-color: rgba(255,122,122,.75); box-shadow: 0 0 0 6px rgba(255,122,122,.10); }
.box.red .lbl{ color: rgba(255,190,190,.95); }

@media (max-width: 900px){
  .hero-media{ min-height: 520px; }
  .overlay-ui{ width: min(360px, 86vw); }
  .hero-copy{ max-width: 92vw; }
}

/* ---------------- Tabbed hero (VisionLabs-style) ---------------- */
.hero-tabs{
  max-width: 1200px;
  margin: 0 auto;
}
.hero-top{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding: 18px 0 14px;
}
.hero-top h1{ margin:0 0 10px; }
.hero-top p{ margin:0 0 14px; max-width: 920px; }
.hero-top .cta{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }

.tabbar{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  padding: 10px;
  margin: 10px auto 14px;
  width: fit-content;
  background: rgba(15,18,29,.35);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  backdrop-filter: blur(10px);
}
.tabbar .tab{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(232,237,249,.85);
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  cursor:pointer;
  transition: transform .18s var(--ease-out), background-color .18s var(--ease-out), border-color .18s var(--ease-out);
}
.tabbar .tab:hover{ transform: translateY(-1px); }
.tabbar .tab.active{
  background: rgba(110,231,255,.14);
  border-color: rgba(110,231,255,.35);
  color: rgba(232,237,249,.95);
}

.demo-row{
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
  align-items:stretch;
}

/* Stacked solutions (Retail / Banking / Safe City) */
.solutions-stack{
  margin-top: 22px;
  display: grid;
  gap: 26px;
}

.demo-row.reverse{
  grid-template-columns: 1fr 1.4fr;
}

.demo-row.reverse .demo-panel{ grid-column: 1; }
.demo-row.reverse .demo-video{ grid-column: 2; }

/* Banking stacked row: always keep the "panel left / video right" layout on desktop */
.solution-block[data-kind="banking"] .demo-row{
  display: grid !important;
  grid-template-columns: 1fr 1.4fr;
}
.solution-block[data-kind="banking"] .demo-panel{ grid-column: 1; }
.solution-block[data-kind="banking"] .demo-video{ grid-column: 2; }

/* v33 FIX: In the stacked (one-below-another) layout, use flexbox for each row.
   This prevents the Banking panel from unexpectedly dropping below the video on
   some browsers / widths.

   Default: media + panel stay in a single line.
   Banking uses `.reverse` so the panel can be on the left and the video on the right.
*/
.solutions-stack .demo-row{
  display: flex !important;
  align-items: stretch;
  justify-content: space-between;
  gap: 28px;
}
.solutions-stack .demo-row.reverse{
  flex-direction: row-reverse;
}
.solutions-stack .demo-video{
  flex: 1 1 60%;
  min-width: 0;
}
.solutions-stack .demo-panel{
  flex: 0 0 40%;
  min-width: 0;
  height: auto;
  display: flex;
  flex-direction: column;
}
.solutions-stack .demo-panel .cta-row{
  margin-top: auto;
}

@media (max-width: 980px){
  .solutions-stack .demo-row,
  .solutions-stack .demo-row.reverse{
    flex-direction: column;
    gap: 18px;
  }
  .solutions-stack .demo-panel{
    flex: 1 1 auto;
  }
}
@media (max-width: 860px){
  .demo-row{ grid-template-columns: 1fr; }
}

.demo-video{
  position:relative;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.35);
  min-height: 420px;
}
.demo-video video{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center center;
  display:block;
}

/* Banking demo videos are typically phone-screen recordings with key UI near the edges.
   Use `contain` so the full device frame remains visible and doesn't look "shifted". */
.tabpane[data-pane="banking"] .demo-video video{
  object-fit: contain;
  background: rgba(0,0,0,0.35);
}
.demo-video .shade{
  position:absolute; inset:0;
  background: radial-gradient(circle at 65% 30%, rgba(0,0,0,.10), rgba(0,0,0,.35), rgba(0,0,0,.70));
  pointer-events:none;
}

.play-btn{
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%,-50%);
  width: 86px; height: 86px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(15,18,29,.55);
  backdrop-filter: blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .18s var(--ease-out), background-color .18s var(--ease-out);
}
.play-btn:hover{ transform: translate(-50%,-50%) scale(1.03); }
.play-btn svg{ width: 30px; height: 30px; fill: rgba(232,237,249,.90); margin-left:3px; }

.demo-panel{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  background: rgba(255,255,255,.02);
  padding: 18px;
}
.demo-panel h2{ margin:0 0 8px; }
.demo-panel p{ margin:0 0 14px; }
.demo-panel .bullets{
  margin:0; padding:0;
  list-style:none;
  display:flex; flex-direction:column; gap:10px;
  color: rgba(232,237,249,.75);
  font-size: 13px;
}
.demo-panel .bullets li{
  display:flex; align-items:flex-start; gap:10px;
}
.bcheck{
  width:18px; height:18px; border-radius:6px;
  background: rgba(110,231,255,.14);
  border:1px solid rgba(110,231,255,.35);
  flex: 0 0 auto;
  margin-top:1px;
  position:relative;
}
.bcheck:after{
  content:"";
  position:absolute;
  left:5px; top:3px;
  width:6px; height:10px;
  border-right:2px solid rgba(110,231,255,.95);
  border-bottom:2px solid rgba(110,231,255,.95);
  transform: rotate(45deg);
}

.tabpane{ display:none; }
.tabpane.active{ display:block; }

/* ---------------- Safe City overlay (video UI) ---------------- */
.det-layer.safe .box{ border-color: rgba(110,231,255,.70); }
.det-layer.safe .box.vehicle{ border-color: rgba(255,210,122,.80); box-shadow: 0 0 0 6px rgba(255,210,122,.10); }
.det-layer.safe .box.vehicle .lbl{ color: rgba(255,235,190,.95); }
.det-layer.safe .box.alert{ border-color: rgba(255,122,122,.78); box-shadow: 0 0 0 6px rgba(255,122,122,.10); }
.det-layer.safe .box.alert .lbl{ color: rgba(255,190,190,.95); }

.safe-card{
  position:absolute;
  right: 14px;
  top: 14px;
  width: min(360px, 45vw);
  pointer-events:none;
}
.safe-card .ui-card{ border-radius: 18px; }
.safe-card .title{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.safe-card .incident{
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 8px 0 8px;
  color: rgba(232,237,249,.95);
}
.safe-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top:10px;
}
.safe-mini{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 10px;
  min-height: 74px;
}
.safe-mini .k{ font-size: 11px; color: rgba(232,237,249,.60); }
.safe-mini .v{ font-size: 12px; color: rgba(232,237,249,.85); margin-top:6px; }
.map{
  position:absolute;
  left: 14px;
  bottom: 14px;
  width: 180px;
  height: 120px;
  border-radius: 16px;
  background: rgba(15,18,29,.62);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  overflow:hidden;
  pointer-events:none;
}
.map svg{ width:100%; height:100%; display:block; }
.map .pin{ fill: rgba(255,122,122,.9); }
.map .route{ stroke: rgba(110,231,255,.7); stroke-width:2; fill:none; stroke-dasharray: 6 8; animation: illuFlow 1.8s linear infinite; }

/* ---------------- Safe City compact alert (auto-hide) ---------------- */
.alert-card{
  position:absolute;
  right: 14px;
  top: 14px;
  width: min(320px, 44vw);
  background: rgba(15,18,29,.62);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 12px 12px;
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .6s ease, transform .6s ease;
  pointer-events:none;
  z-index: 6;
}
.alert-card.visible{ opacity: 1; transform: translateY(0); }
.alert-card.idle{ opacity: .22; }
.alert-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.alert-tag{ font-size:12px; color: rgba(232,237,249,.60); }
.alert-title{ font-size:16px; font-weight:700; margin: 8px 0 10px; color: rgba(232,237,249,.95); }
.alert-rows{ display:flex; flex-direction:column; gap:8px; font-size:12px; color: rgba(232,237,249,.78); }
.alert-rows > div{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.alert-rows .k{ color: rgba(232,237,249,.60); }

/* Keep minimap compact */
.map{ width: 150px; height: 100px; }
@media (max-width: 640px){
  .map{ width: 130px; height: 90px; }
  .alert-card{ width: min(320px, 86vw); }
}

/* ---------------- Safe City video crop (hide embedded UI in source video) ---------------- */
.tabpane[data-pane="safe"] .demo-video video{
  transform: scale(1.18) translateX(-6%) translateY(2%);
  transform-origin: left center;
}
@media (max-width: 640px){
  .tabpane[data-pane="safe"] .demo-video video{
    transform: scale(1.22) translateX(-8%) translateY(3%);
  }
}

/* ---------------- Mini map positioning (Safe City) ---------------- */
.tabpane[data-pane="safe"] .demo-video { position: relative; }
.tabpane[data-pane="safe"] .demo-video .map{
  position:absolute;
  left: 14px;
  bottom: 14px;
  width: 170px;
  height: 110px;
  background: rgba(15,18,29,.55);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 10px;
  backdrop-filter: blur(10px);
  z-index: 6;
}
.tabpane[data-pane="safe"] .demo-video .map svg{ width:100%; height:100%; }
.tabpane[data-pane="safe"] .demo-video .map .route{
  fill:none;
  stroke: rgba(120,200,255,.85);
  stroke-width: 2.5;
  stroke-dasharray: 5 5;
}
.tabpane[data-pane="safe"] .demo-video .map .pin{ fill: rgba(255,90,90,.95); }
@media (max-width: 640px){
  .tabpane[data-pane="safe"] .demo-video .map{ width: 140px; height: 92px; left: 10px; bottom: 10px; }
}

/* ---------------- Fix Safe City panel alignment ---------------- */
.tabpane[data-pane="safe"] .demo-row{
  align-items: flex-start;
}
.tabpane[data-pane="safe"] .demo-panel{
  margin-top: 0 !important;
  align-self: flex-start;
}


/* ---------------- Safe City: lock 2-column layout + crop video UI ---------------- */
.tabpane[data-pane="safe"] .demo-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 24px;
  align-items: start;
}
.tabpane[data-pane="safe"] .demo-video{ min-width: 0; }
.tabpane[data-pane="safe"] .demo-panel{ width: 420px; margin-top: 0 !important; }

@media (max-width: 980px){
  .tabpane[data-pane="safe"] .demo-row{
    grid-template-columns: 1fr;
  }
  .tabpane[data-pane="safe"] .demo-panel{
    width: 100%;
  }
}

/* The minimap you still see is baked into the SOURCE VIDEO.
   This crop hides the bottom-left corner area (adjust if needed). */
.tabpane[data-pane="safe"] .demo-video video{
  transform: scale(1.18) translateX(8%) translateY(8%);
  transform-origin: center;
}

/* ---------------- Safe City equal heights (video + panel) ---------------- */
.tabpane[data-pane="safe"]{
  --safeH: 430px;
}
.tabpane[data-pane="safe"] .demo-row{
  align-items: stretch;
}
.tabpane[data-pane="safe"] .demo-video,
.tabpane[data-pane="safe"] .demo-panel{
  height: var(--safeH);
}
.tabpane[data-pane="safe"] .demo-video{
  overflow:hidden;
}
.tabpane[data-pane="safe"] .demo-video video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Keep panel content scrollable if text is long */
.tabpane[data-pane="safe"] .demo-panel{
  overflow: auto;
}
@media (max-width: 980px){
  .tabpane[data-pane="safe"]{
    --safeH: auto;
  }
  .tabpane[data-pane="safe"] .demo-video,
  .tabpane[data-pane="safe"] .demo-panel{
    height: auto;
  }
  .tabpane[data-pane="safe"] .demo-panel{
    overflow: visible;
  }
}


/* ---------------- Safe City: no scroll, wider panel, compact bullets ---------------- */
.tabpane[data-pane="safe"] .demo-row{
  grid-template-columns: minmax(0, 1fr) 480px;
}
.tabpane[data-pane="safe"] .demo-panel{
  width: 480px;
  overflow: hidden !important; /* no scrollbars */
  display: flex;
  flex-direction: column;
  padding: 24px 26px;
}
.tabpane[data-pane="safe"] .demo-panel .bullets{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin: 14px 0 18px;
}
.tabpane[data-pane="safe"] .demo-panel .bullets li{
  margin: 0;
  font-size: 13.5px;
  line-height: 1.25;
}
.tabpane[data-pane="safe"] .demo-panel .bullets .bcheck{
  margin-top: 2px;
}
.tabpane[data-pane="safe"] .demo-panel .cta-row{
  margin-top: auto; /* keep buttons pinned to bottom */
}
@media (max-width: 1100px){
  .tabpane[data-pane="safe"] .demo-row{
    grid-template-columns: minmax(0, 1fr) 440px;
  }
  .tabpane[data-pane="safe"] .demo-panel{ width: 440px; }
}
@media (max-width: 980px){
  .tabpane[data-pane="safe"] .demo-panel{
    width: 100%;
    overflow: visible !important;
    display: block;
  }
  .tabpane[data-pane="safe"] .demo-panel .bullets{
    grid-template-columns: 1fr;
  }
}

/* ---------------- Safe City: taller area so CTA fits inside panel (no duplicates) ---------------- */
.tabpane[data-pane="safe"]{
  --safeH: 520px; /* more vertical space */
}
@media (max-width: 1100px){
  .tabpane[data-pane="safe"]{ --safeH: 500px; }
}
@media (max-width: 980px){
  .tabpane[data-pane="safe"]{ --safeH: auto; }
}

.tabpane[data-pane="safe"] .demo-panel .cta-row{
  display:flex;
  gap:12px;
  flex-wrap: nowrap;
}
.tabpane[data-pane="safe"] .demo-panel .cta-row .btn{
  padding: 10px 14px;
  min-width: 0;
  white-space: nowrap;
}

/* ---------------- Safe City: 8 bullets, larger typography, no empty space ---------------- */
.tabpane[data-pane="safe"] .demo-panel{
  padding: 26px 28px;
}
.tabpane[data-pane="safe"] .demo-panel .bullets{
  margin: 18px 0 16px;
  gap: 14px 18px;
}
.tabpane[data-pane="safe"] .demo-panel .bullets li{
  font-size: 15px;
  line-height: 1.3;
}
.tabpane[data-pane="safe"] .demo-panel .bullets .bcheck{
  width: 18px;
  height: 18px;
  border-radius: 6px;
}
.tabpane[data-pane="safe"] .demo-panel .cta-row{
  margin-top: 18px;
}

/* ---------------- Safe City: keep CTA inside panel (no overflow) ---------------- */
.tabpane[data-pane="safe"] .demo-panel{
  display: flex;
  flex-direction: column;
}
.tabpane[data-pane="safe"] .demo-panel .bullets{
  flex: 1;
}
.tabpane[data-pane="safe"] .demo-panel .cta-row{
  margin-top: 12px;
}

/* ---------------- Safe City: wider right panel so text wraps less and CTA fits ---------------- */
.tabpane[data-pane="safe"] .demo-row{
  display: grid;
  grid-template-columns: 1.15fr 1.0fr; /* left video ~53%, right panel ~47% */
  gap: 22px;
  align-items: stretch;
}
@media (max-width: 1100px){
  .tabpane[data-pane="safe"] .demo-row{
    grid-template-columns: 1.1fr 1.0fr; /* still favor panel */
    gap: 18px;
  }
}
@media (max-width: 980px){
  .tabpane[data-pane="safe"] .demo-row{
    display: block; /* stacked on mobile */
  }
}

/* keep panel internal layout stable */
.tabpane[data-pane="safe"] .demo-panel{
  display:flex;
  flex-direction:column;
  padding: 26px 30px;
}
.tabpane[data-pane="safe"] .demo-panel .bullets{
  flex:1;
}
.tabpane[data-pane="safe"] .demo-panel .cta-row{
  margin-top:auto;
  padding-top: 14px;
}

/* ================= FINAL Safe City panel layout ================= */
.tabpane[data-pane="safe"] .demo-panel{
  display:flex;
  flex-direction:column;
  height:100%;
  padding: 26px 30px;
}
.tabpane[data-pane="safe"] .panel-header{}
.tabpane[data-pane="safe"] .panel-content{
  flex:1;
}
.tabpane[data-pane="safe"] .panel-footer{
  margin-top:auto;
  padding-top:16px;
}
/* widen right panel slightly for better wrapping */
.tabpane[data-pane="safe"] .demo-row{
  display:grid;
  grid-template-columns: 1.12fr 1fr;
  gap:22px;
  align-items:stretch;
}
@media (max-width: 980px){
  .tabpane[data-pane="safe"] .demo-row{ display:block; }
}

/* ===== Banking (eKYC) — match Safe City equal-height layout ===== */
.tabpane[data-pane="banking"] .demo-row{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap:22px;
  align-items:stretch;
}
.tabpane[data-pane="banking"] .demo-video-card{
  border-radius:24px;
  overflow:hidden;
  position:relative;
  height:100%;
}
.tabpane[data-pane="banking"] .demo-panel{
  border-radius:24px;
  height:100%;
  display:flex;
  flex-direction:column;
  padding:28px 30px;
}
.tabpane[data-pane="banking"] .panel-content{ flex:1; }
.tabpane[data-pane="banking"] .panel-footer{ margin-top:auto; padding-top:16px; }
.tabpane[data-pane="banking"] .cta-row{ display:flex; gap:14px; flex-wrap:wrap; }
.tabpane[data-pane="banking"] .incident-card .ok{ color: rgba(180,255,210,0.95); }
.tabpane[data-pane="banking"] .incident-card .warn{ color: rgba(255,220,160,0.95); }
/* Banking: keep side-by-side on most laptops; stack only on smaller screens */
@media (max-width: 860px){
  .tabpane[data-pane="banking"] .demo-row{ display:block; }
  .tabpane[data-pane="banking"] .demo-panel{ margin-top:16px; }
}


/* --- Safe City overlay (UI panel inside video) --- */
.demo-video-card{position:relative;overflow:hidden;}
.demo-overlay{position:absolute;inset:0;pointer-events:none;}
.safecity-overlay{display:block;}

.safecity-card{
  position:absolute;
  top:14px; right:14px;
  width:min(360px, 44%);
  background:rgba(12,18,28,0.55);
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius:16px;
  padding:14px 14px 12px;
  color:rgba(255,255,255,0.92);
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

.safecity-card .sc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.safecity-card .sc-pill{
  font-size:11px; letter-spacing:0.08em;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(86, 204, 242, 0.14);
  border:1px solid rgba(86, 204, 242, 0.30);
  color:rgba(208, 247, 255, 0.92);
}
.safecity-card .sc-domain{font-size:12px;color:rgba(255,255,255,0.70);}
.safecity-card .sc-title{font-size:18px;font-weight:700;margin:2px 0 10px;}
.safecity-card .sc-grid{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:6px 10px;
  font-size:12px;
  line-height:1.25;
}
.safecity-card .sc-k{color:rgba(255,255,255,0.58);}
.safecity-card .sc-v{color:rgba(255,255,255,0.92);text-align:right;white-space:nowrap;}
.safecity-card .sc-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:middle;}
.safecity-card .sc-dot.red{background:#ff6b6b;box-shadow:0 0 0 3px rgba(255,107,107,0.18);}

.safecity-card .sc-meter{display:flex;align-items:center;gap:10px;margin-top:12px;}
.safecity-card .sc-meter-label{font-size:10px;letter-spacing:0.08em;color:rgba(255,255,255,0.55);}
.safecity-card .sc-bar{
  flex:1;height:8px;border-radius:999px;
  background:rgba(255,255,255,0.10);
  overflow:hidden;
}
.safecity-card .sc-bar span{
  display:block;height:100%;width:86%;
  background:linear-gradient(90deg, rgba(86,204,242,0.95), rgba(124,255,212,0.95));
  border-radius:999px;
}
.safecity-card .sc-meter-val{font-size:12px;color:rgba(255,255,255,0.85);}

.safecity-card .sc-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.safecity-card .sc-btn{
  font-size:11px;
  padding:6px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.82);
}

/* keep overlay readable on smaller screens */
@media (max-width: 860px){
  .safecity-card{width:min(360px, 84%); right:10px; top:10px;}
}

/* ===== Overlay dropdown cycle (shows ~5s, hides ~5s) ===== */
.overlay-cycle{
  animation: overlayCycle 10s ease-in-out infinite;
  will-change: opacity, transform;
  pointer-events:none; /* visual demo overlays only */
}
.overlay-cycle.delay-2{animation-delay:2s;}
.kyc-overlay.overlay-cycle{
  /* eKYC overlay: show once for ~4s then hide and never reappear */
  animation: overlayOnceCentered 4s ease-in-out 1 forwards;
}

@keyframes overlayCycle{
  0%{opacity:1;transform:translateY(0);}      /* visible */
  45%{opacity:1;transform:translateY(0);}     /* stay */
  50%{opacity:0;transform:translateY(-10px);} /* hide */
  95%{opacity:0;transform:translateY(-10px);} /* stay hidden */
  100%{opacity:1;transform:translateY(0);}    /* show again */
}


@keyframes overlayCycleCentered{
  0%{opacity:1;transform:translateY(-50%) translateX(0);}
  45%{opacity:1;transform:translateY(-50%) translateX(0);}
  50%{opacity:0;transform:translateY(-50%) translateX(18px);}
  95%{opacity:0;transform:translateY(-50%) translateX(18px);}
  100%{opacity:1;transform:translateY(-50%) translateX(0);}
}

@keyframes overlayOnceCentered{
  /* visible for ~3.2s, then hide by 4.0s */
  0%{opacity:1;transform:translateY(-50%) translateX(0);}
  80%{opacity:1;transform:translateY(-50%) translateX(0);}
  100%{opacity:0;transform:translateY(-50%) translateX(18px);}
}

/* Banking (eKYC) overlay panel */
.demo-overlay.banking{position:absolute; inset:0; pointer-events:none;}
.kyc-overlay{
  position:absolute;
  top:50%;
  right:14px;
  left:auto;
  transform:translateY(-50%);
  width:min(360px, 88%);
  padding:14px 14px 12px;
  border-radius:18px;
  background:rgba(17,23,32,0.55);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 10px 40px rgba(0,0,0,0.25);
  backdrop-filter:blur(10px);
}
.kyc-top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px;}
.kyc-badge{font-size:11px; letter-spacing:0.08em; padding:4px 10px; border-radius:999px; background:rgba(104,166,255,0.12); border:1px solid rgba(104,166,255,0.25); color:rgba(190,220,255,0.95);} 
.kyc-title{font-size:18px; font-weight:700; color:#E9F2FF; margin:0 0 2px;}
.kyc-sub{font-size:12px; color:rgba(231,241,255,0.7); margin:0 0 10px;}
.kyc-rows{display:flex; flex-direction:column; gap:7px;}
.kyc-row{display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12.5px; color:rgba(231,241,255,0.78);} 
.kyc-row strong{color:rgba(231,241,255,0.92); font-weight:600;}
.kyc-pill{font-size:12px; padding:4px 8px; border-radius:10px; background:rgba(79,209,197,0.10); border:1px solid rgba(79,209,197,0.22); color:rgba(210,255,250,0.9);} 

@media (max-width: 860px){
   .kyc-overlay{top:10px; right:10px; left:auto; width:min(320px, 92%);} 
}



/* ===== Retail overlay card (queue + dwell + people count) ===== */
.demo-video{ position:relative; overflow:hidden; border-radius:24px; }
.demo-overlay{ position:absolute; inset:0; pointer-events:none; }
.demo-overlay.retail{ display:block; }

.retail-card{
  position:absolute;
  right:14px; bottom:14px;
  width:min(360px, 46%);
  background:rgba(12,18,28,0.55);
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius:16px;
  padding:14px 14px 12px;
  color:rgba(255,255,255,0.92);
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

.retail-card .rc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.retail-card .rc-pill{
  font-size:11px; letter-spacing:0.08em;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(86, 204, 242, 0.14);
  border:1px solid rgba(86, 204, 242, 0.30);
  color:rgba(208, 247, 255, 0.92);
}
.retail-card .rc-domain{font-size:12px;color:rgba(255,255,255,0.70);}

.retail-card .rc-metrics{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px 14px;
  margin-top:6px;
}
.retail-card .rc-metric{padding:10px 10px;border-radius:14px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.10);}
.retail-card .rc-k{font-size:11px;color:rgba(255,255,255,0.62);margin-bottom:6px;}
.retail-card .rc-v{display:flex;align-items:baseline;gap:6px;justify-content:space-between;}
.retail-card .rc-num{font-size:18px;font-weight:750;letter-spacing:0.01em;color:rgba(255,255,255,0.92);}
.retail-card .rc-unit{font-size:11px;color:rgba(255,255,255,0.62);}

.retail-card .rc-status{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.retail-card .rc-chip{
  font-size:11px;
  padding:6px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.82);
  display:flex; align-items:center; gap:8px;
}
.retail-card .rc-dot{width:7px;height:7px;border-radius:50%;display:inline-block;}
.retail-card .rc-dot.ok{background:#7CFFD4;box-shadow:0 0 0 3px rgba(124,255,212,0.18);}
.retail-card .rc-dot.warn{background:#FFD38A;box-shadow:0 0 0 3px rgba(255,211,138,0.18);}

@media (max-width: 860px){
  .retail-card{width:min(360px, 86%); right:10px; bottom:10px;}
  .retail-card .rc-metrics{grid-template-columns: 1fr;}
}

/* ===== More Solutions (cards grid) ===== */
.more-solutions{
  max-width: 1200px;
  margin: 70px auto 0;
  padding: 0 20px 70px;
}
.more-solutions-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom: 18px;
}
.more-solutions-head h2{
  margin:0;
  font-size: 34px;
  letter-spacing: -0.02em;
}
.more-solutions-head p{
  margin:0;
  max-width: 560px;
  color: rgba(255,255,255,0.72);
  line-height: 1.45;
}
.more-solutions-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.ms-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 16px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(10,16,28,0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-decoration:none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.ms-card:hover{
  transform: translateY(-2px);
  border-color: rgba(99,179,255,0.35);
  background: rgba(10,16,28,0.58);
}
.ms-icon{
  width: 44px;
  height: 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  font-size: 20px;
  flex: 0 0 auto;
}
.ms-title{
  color: rgba(255,255,255,0.92);
  font-weight: 650;
  font-size: 16px;
  letter-spacing: -0.01em;
}

@media (max-width: 980px){
  .more-solutions-head{flex-direction:column;align-items:flex-start;}
  .more-solutions-grid{grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width: 560px){
  .more-solutions-grid{grid-template-columns: 1fr;}
}

/* --- Added for Solutions pages (v42) --- */
/* v45 FIX: Solution detail pages must match the first 3 solutions layout:
   - Video block is always larger
   - Text panel is always smaller
   - Both blocks have the same height (row stretches)
   - Reverse only swaps sides
*/
body.solution-page .demo-row{
  display:flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 28px;
}

body.solution-page .demo-video{
  flex: 1 1 60%;
  min-width: 0;
  max-width: 980px;
  /* keep the same visual height across all solutions */
  min-height: 420px;
}

body.solution-page .demo-panel{
  flex: 0 0 460px;
  min-width: 360px;
  max-width: 460px;
  /* stretch to match video height */
  min-height: 420px;
  display:flex;
  flex-direction: column;
}

body.solution-page .demo-row.reverse{
  flex-direction: row-reverse;
}

/* Keep desktop side-by-side until tablet widths; then stack */
@media (max-width: 980px){
  body.solution-page .demo-row{
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }
  body.solution-page .demo-video{
    max-width: 980px;
    width: 100%;
    min-height: 360px;
  }
  body.solution-page .demo-panel{
    max-width: 720px;
    width: 100%;
    min-height: 0;
  }
}


.demo-row.reverse { flex-direction: row-reverse; }
.back-link{
  display:inline-block;
  margin-top:8px;
  font-size:14px;
  opacity:.85;
  text-decoration:none;
}
.back-link:hover{ opacity:1; text-decoration:underline; }

.other-solutions{ margin-top:28px; padding-top:18px; border-top:1px solid rgba(255,255,255,.08); }
.os-title{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; opacity:.7; margin-bottom:10px; }
.os-links{ display:flex; flex-wrap:wrap; gap:10px; }
.os-links .mini-link{
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  text-decoration:none;
  font-size:13px;
  opacity:.9;
}
.os-links .mini-link:hover{ opacity:1; border-color:rgba(255,255,255,.22); }

/* Compact overlay metrics card */
.mini-card{
  position:absolute;
  right:14px;
  top:14px;
  width:min(320px, 88%);
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  border-radius:14px;
  padding:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.mini-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.mini-pill{
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.14);
}
.mini-brand{ font-size:12px; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mini-metric{ padding:8px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); }
.mm-k{ font-size:11px; opacity:.75; margin-bottom:2px; }
.mm-v{ font-size:14px; font-weight:600; }



/* === Restored card frames for demo blocks (all solutions) === */

.demo-media,
.demo-panel {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(10, 18, 32, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  border-radius: 28px;
  overflow: hidden;
}

.demo-panel {
  padding: 26px 28px;
}

.demo-media {
  padding: 0; /* keep video flush */
}

.demo-media video {
  display: block;
  width: 100%;
  height: 100%;
}

/* Make More Solutions clickable (fix overlay blocking clicks) */
.more-solutions {
  position: relative;
  z-index: 50;
}

.more-solutions .ms-card {
  position: relative;
  z-index: 51;
}

/* Most common blockers in your layout */
.demo-overlay,
.overlay-cycle,
.safecity-overlay,
.demo-video::before,
.demo-video::after,
.hero-tabs::before,
.hero-tabs::after {
  pointer-events: none !important;
}
/* --- FORCE CLICKABILITY FOR "More Solutions" --- */
.more-solutions,
.more-solutions * {
  pointer-events: auto !important;
}

.more-solutions {
  position: relative !important;
  z-index: 99999 !important;
}

.more-solutions .ms-card {
  position: relative !important;
  z-index: 100000 !important;
}

/* --- TURN OFF POINTER EVENTS FOR ANY ABSOLUTE/FIXED OVERLAYS ABOVE --- */
.hero-tabs,
.hero-tabs * {
  /* keep links clickable inside hero */
}

.demo-overlay,
.overlay-cycle,
.safecity-overlay,
.kyc-overlay,
.retail-card,
.demo-video::before,
.demo-video::after,
.hero-tabs::before,
.hero-tabs::after,
.section::before,
.section::after,
.container::before,
.container::after,
.stack-item::before,
.stack-item::after {
  pointer-events: none !important;
}

/* Overlay show/hide (5s on each loop start) */
.demo-overlay,
.overlay-cycle {
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none !important;
}

.demo-overlay.is-visible,
.overlay-cycle.is-visible {
  opacity: 1;
}