/* SecuPi Lab — shared look for the catalog (/labs) and its demo cover pages.
   Glass cards, blurred gradient blobs, big rounded corners, in SecuPi blue.
   Kept separate from app.css, which styles the technical demo screens (a different,
   more utilitarian visual language) rather than this sales/partner-facing catalog. */
:root{
  --ink-900:#122436; --ink-700:#233a52; --ink-500:#4c5e72;
  --line:rgba(18,54,90,.10); --line-strong:rgba(18,54,90,.16);
  --glass:rgba(255,255,255,.62); --glass-strong:rgba(255,255,255,.82); --glass-border:rgba(255,255,255,.70);
  --brand-900:#0f4984; --brand-700:#155a96; --brand-500:#2f7fe0; --brand-400:#4da1f6; --brand-300:#8cc4fb; --brand-100:#dcebfb;
  --shadow-1:0 24px 60px -28px rgba(15,73,132,.35);
  --shadow-2:0 10px 26px -14px rgba(15,73,132,.28);
  --radius-lg:26px; --radius-md:18px;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Manrope',system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink-900);
     -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* overflow:hidden clips the decorative blobs below, which are deliberately positioned
   partly outside the page (right:-160px etc.) for the soft bleed-off-the-edge look.
   Without it every page here gets a ~160px horizontal scrollbar -- not visible at full
   desktop width, but real and clipping content once the viewport narrows. */
.page{position:relative;overflow:hidden;background:linear-gradient(180deg,#e9f2fb 0%,#f6fafd 46%,#ffffff 100%)}
.blob{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}
.blob-a{width:620px;height:620px;top:-260px;right:-160px;background:radial-gradient(circle at 30% 30%,#9fcdfc,#4da1f6 60%,transparent 75%);opacity:.55}
.blob-b{width:460px;height:460px;bottom:-200px;left:-140px;background:radial-gradient(circle at 40% 40%,#bcdcfb,#2f7fe0 65%,transparent 78%);opacity:.4}

.nav{position:sticky;top:0;z-index:20;min-height:76px;display:flex;align-items:center;
  background:var(--glass);backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid var(--line)}
.nav-inner{max-width:1180px;margin:0 auto;padding:12px 40px;width:100%;display:flex;align-items:center;
  gap:14px;flex-wrap:wrap}
.brand-lockup{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.brand-sep{width:1px;height:22px;background:var(--line);display:block}
.wordmark{font-weight:800;font-size:17px;letter-spacing:-.01em}
.wordmark span{color:var(--ink-500);font-weight:600}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:7px 13px;border-radius:99px;background:var(--brand-100);color:var(--brand-900);
  border:1px solid rgba(15,73,132,.14);white-space:nowrap}

.wrap{position:relative;max-width:1180px;margin:0 auto;padding:0 40px 72px;z-index:1}

.eyebrow{display:inline-flex;align-items:center;font-size:12px;font-weight:800;letter-spacing:.10em;
  text-transform:uppercase;color:var(--brand-700);background:var(--glass-strong);border:1px solid var(--line-strong);
  padding:8px 14px;border-radius:99px;box-shadow:var(--shadow-2)}
h1.hero{font-size:clamp(34px,4.6vw,54px);line-height:1.08;letter-spacing:-.02em;font-weight:800;margin:22px 0 16px;max-width:16ch}
.lede{font-size:16.5px;line-height:1.55;color:var(--ink-500);max-width:56ch;margin:0 0 26px;font-weight:500}
.chiprow{display:flex;gap:10px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--ink-700);
  background:var(--glass-strong);border:1px solid var(--line);padding:7px 13px 7px 11px;border-radius:99px}
.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--brand-400)}
.chip.soon{color:var(--brand-700);background:var(--brand-100);border-color:rgba(15,73,132,.16)}

.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
@media (max-width:900px){ .grid3{grid-template-columns:1fr} }
.card{position:relative;display:flex;flex-direction:column;border-radius:var(--radius-lg);
  background:var(--glass);backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--glass-border);box-shadow:var(--shadow-1);overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 34px 74px -26px rgba(15,73,132,.42);border-color:rgba(77,161,246,.55)}
.cover{height:132px;position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.cover svg{width:40px;height:40px;color:#eef6ff;position:relative}
.cover .grain{position:absolute;inset:0;opacity:.18;
  background-image:radial-gradient(rgba(255,255,255,.5) 1px,transparent 1px);background-size:14px 14px}
.cover-compliance{background:linear-gradient(135deg,#123a63,#1e63a8 55%,#4da1f6)}
.cover-unstructured{background:linear-gradient(135deg,#0b2c4d,#155a96 55%,#3e8ee8)}
.cover-application{background:linear-gradient(135deg,#0f2f52,#2570b8 55%,#63b3fb)}
.cover-decryption{background:linear-gradient(135deg,#102a4c,#1d5a9e 55%,#4f9ff0)}
.cover .logo-row{display:flex;gap:12px;position:relative}
.cover .logo-row svg{width:42px;height:42px;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.card-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.badge{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--brand-700);background:var(--brand-100);padding:5px 10px;border-radius:7px}
.badge.outline{background:transparent;border:1px solid rgba(15,73,132,.22);color:var(--ink-500)}
.card h3{margin:2px 0 0;font-size:19px;font-weight:800;letter-spacing:-.01em}
.card p{margin:0;font-size:13.8px;line-height:1.55;color:var(--ink-500);font-weight:500;flex:1}
.card-meta{display:flex;gap:14px;margin-top:6px;padding-top:14px;border-top:1px solid var(--line);flex-wrap:wrap}
.meta-item{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--ink-500)}
.meta-item svg{width:14px;height:14px;color:var(--brand-500);flex:0 0 auto}
.card-cta{display:flex;align-items:center;gap:6px;margin-top:14px;font-size:13.5px;font-weight:800;color:var(--brand-900)}
.card-cta svg{width:16px;height:16px;transition:transform .18s ease}
.card:hover .card-cta svg{transform:translateX(3px)}

.card.ghost{background:rgba(255,255,255,.34);border:1.5px dashed rgba(15,73,132,.28);box-shadow:none;cursor:default}
.card.ghost:hover{transform:none;box-shadow:none;border-color:rgba(15,73,132,.28)}
.card.ghost .cover{background:var(--brand-100)}
.card.ghost .cover svg{color:var(--brand-500)}
.card.ghost h3{color:var(--ink-700)}
.card.ghost p{color:var(--ink-500)}

.backlink{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--ink-500);margin-bottom:22px}
.backlink svg{width:15px;height:15px}
.backlink:hover{color:var(--brand-900)}
h1.detail{font-size:clamp(28px,3.6vw,40px);line-height:1.1;letter-spacing:-.02em;font-weight:800;margin:16px 0 14px;max-width:22ch}
.detail-lede{font-size:16px;line-height:1.6;color:var(--ink-500);max-width:58ch;font-weight:500;margin:0}

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:start;margin-top:34px}
@media (max-width:860px){ .split{grid-template-columns:1fr} }
.value-list{display:flex;flex-direction:column;gap:16px;margin-bottom:26px}
.value-item{display:flex;gap:13px;align-items:flex-start}
.value-ic{flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:var(--brand-100);
  display:flex;align-items:center;justify-content:center}
.value-ic svg{width:18px;height:18px;color:var(--brand-900)}
.value-item p{margin:0;font-size:14.5px;line-height:1.58;color:var(--ink-700);font-weight:500}
.value-item p b{color:var(--ink-900);font-weight:800}

.panel-glass{border-radius:var(--radius-md);padding:18px;background:var(--glass-strong);
  border:1px solid var(--glass-border);box-shadow:var(--shadow-2)}
.panel-title{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500);margin:0 0 12px}
.steps{display:flex;flex-direction:column;gap:12px}
.step{display:flex;gap:11px;align-items:flex-start}
.step-n{flex:0 0 auto;width:22px;height:22px;border-radius:7px;background:var(--brand-900);color:#fff;
  font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center}
.step p{margin:0;font-size:13.3px;color:var(--ink-700);font-weight:600;line-height:1.5}

.preview{border-radius:var(--radius-lg);overflow:hidden;position:relative;height:300px;
  background:linear-gradient(150deg,#0b2c4d,#155a96 55%,#3e8ee8);box-shadow:var(--shadow-1);
  display:flex;align-items:center;justify-content:center}
.preview .grain{position:absolute;inset:0;opacity:.14;
  background-image:radial-gradient(rgba(255,255,255,.6) 1px,transparent 1px);background-size:16px 16px}
.playbtn{position:relative;width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px -8px rgba(0,0,0,.45);
  cursor:pointer;border:none}
.playbtn svg{width:26px;height:26px;color:var(--brand-900);margin-left:3px}
.preview-cap{position:absolute;left:20px;bottom:16px;color:#eaf3ff;font-size:12.5px;font-weight:700;
  background:rgba(10,30,55,.4);padding:6px 11px;border-radius:99px;backdrop-filter:blur(6px)}

.ctarow{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:800;padding:14px 24px;
  border-radius:13px;border:none;cursor:pointer}
.btn svg{width:17px;height:17px;flex:0 0 auto}
.btn-primary{color:#fff;background:linear-gradient(135deg,var(--brand-900),var(--brand-500));
  box-shadow:0 16px 30px -12px rgba(15,73,132,.55)}
.btn-secondary{background:var(--glass-strong);color:var(--ink-900);border:1px solid var(--line-strong)}
.foot-note{font-size:12.5px;color:var(--ink-500);margin-top:12px;font-weight:600}

.secondary{display:flex;gap:20px;margin-top:20px;flex-wrap:wrap}
.secondary a{font-size:13px;font-weight:700;color:var(--brand-700);display:inline-flex;align-items:center;gap:5px}
.secondary a:hover{text-decoration:underline}

/* ---- demo credentials box (for a demo that has its own login, not this app's gate) ---- */
.creds{border-radius:var(--radius-md);padding:14px 16px;background:var(--glass-strong);
  border:1px solid var(--glass-border);display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
.creds-title{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500)}
.creds-row{display:flex;align-items:center;gap:10px;font-size:13px}
.creds-k{color:var(--ink-500);font-weight:700;min-width:70px;flex:0 0 auto}
.creds-row code{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;background:var(--brand-100);
  color:var(--brand-900);padding:3px 9px;border-radius:6px;font-size:13px}
.copy-btn{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--brand-700);background:none;
  border:1px solid var(--line-strong);border-radius:7px;padding:4px 10px;cursor:pointer;flex:0 0 auto}
.copy-btn:hover{background:var(--brand-100)}
.copy-btn.copied{color:#fff;background:var(--brand-700);border-color:var(--brand-700)}

/* ---- video lightbox (shared by lab-video-modal.js) ---- */
#videoModal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:24px}
#videoModal.open{display:flex}
.vm-backdrop{position:absolute;inset:0;background:rgba(10,24,40,.62);backdrop-filter:blur(3px)}
.vm-box{position:relative;width:min(880px,92vw);background:#0b1e33;border-radius:20px;overflow:hidden;
  box-shadow:0 40px 100px -20px rgba(0,0,0,.55)}
.vm-box iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.vm-close{position:absolute;top:12px;right:14px;width:34px;height:34px;border-radius:50%;border:0;
  background:rgba(255,255,255,.14);color:#fff;font-size:20px;line-height:1;cursor:pointer;z-index:2}
.vm-close:hover{background:rgba(255,255,255,.24)}
.vm-soon{padding:56px 40px;text-align:center;color:#eaf3ff}
.vm-soon-ic{width:56px;height:56px;margin:0 auto 18px;border-radius:50%;background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;font-size:20px}
.vm-soon h3{margin:0 0 10px;font-size:19px;font-weight:800}
.vm-soon p{margin:0 auto;font-size:14px;line-height:1.6;color:#b9cfe8;max-width:44ch}

/* ---- narrow screens: last in the cascade on purpose, so these win ties ---- */
@media (max-width:640px){
  .nav-inner{padding:10px 20px}
  .wrap{padding-left:20px;padding-right:20px}
  .pill{display:none}
}