/* Calypsion — shared styles for the interactive product showcase pages (LinkSim, LinkTwin, ...).
   Dark navy sections, glass cards, hero canvas frame, before/after slider, tabbed differentiators,
   the closed-loop ecosystem strip, security cards and the suite strip. Loaded after site.css. */

:root {
  --cyan: #6FE3E3;
  --cyan-soft: #5FC2C2;
  --glass: rgba(255,255,255,.05);
  --glass-line: rgba(255,255,255,.13);
  --ok: #1FA971; --ok-2: #3CC48D; --load: #F5900B; --bad: #E5484D; --info: #2F80B8;
  --d-text: #EAF2FA; --d-body: #B9CBDD; --d-muted: #8FB0C4; --d-faint: #6F8A9E;
}

/* ---- Dark sections: navy + faint circuit traces + infinity ribbon ---- */
.ls-dark { position: relative; overflow: hidden; color: var(--d-text);
  background:
    radial-gradient(1000px 560px at 85% -10%, rgba(14,156,156,.22), transparent 60%),
    radial-gradient(800px 600px at 0% 110%, rgba(10,110,110,.28), transparent 55%),
    linear-gradient(160deg, #071722 0%, #0C2230 55%, #071722 100%); }
.ls-circuit { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .5; }
.ls-circuit path { fill: none; stroke: rgba(111,227,227,.16); stroke-width: 1.2; }
.ls-circuit circle { fill: rgba(111,227,227,.35); }
.ls-circuit .ribbon { stroke: rgba(111,227,227,.10); stroke-width: 26; stroke-linecap: round; }
.ls-dark > .wrap { position: relative; z-index: 2; }
.ls-dark .rd-eyebrow { color: var(--cyan); }
.ls-dark h2, .ls-dark h3 { color: #fff; }
.ls-dark .rd-sec-lead { color: var(--d-body); }
.ls-glass { background: var(--glass); border: 1px solid var(--glass-line); border-radius: 18px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ls-panel { position: relative; border-radius: 18px; padding: 22px; color: var(--d-text); background: linear-gradient(160deg, #071722, #0C2230); border: 1px solid #13394A; box-shadow: var(--shadow-lg); overflow: hidden; }
.ls-note { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--d-faint); }
.ls-phead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ls-phead h4 { color: #fff; font-size: 15.5px; }
.ls-hint { font-size: 13px; color: #9FB6C9; margin-top: 14px; }

/* ================= 1. HERO ================= */
.ls-hero-inner { max-width: var(--maxw); margin: 0 auto; padding: clamp(118px, 14vh, 156px) 24px clamp(72px, 9vh, 104px);
  display: grid; grid-template-columns: .92fr 1.08fr; gap: 48px; align-items: center; }
.ls-hero-text h1 { color: #fff; font-size: clamp(38px, 4vw, 60px); line-height: 1.03; letter-spacing: -.025em; margin: 18px 0 20px; text-wrap: balance; font-weight: 700; }
.ls-hero-text h1 em { font-style: normal; color: var(--cyan); }
.ls-hero-text .rd-lede { color: var(--d-body); font-size: 17.5px; line-height: 1.7; max-width: 54ch; }
.ls-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; }
.ls-kpis { display: flex; gap: 32px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--glass-line); flex-wrap: wrap; }
.ls-kpis b { display: block; font-family: var(--mono); color: #fff; font-size: 26px; font-weight: 600; line-height: 1.1; }
.ls-kpis span { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--d-muted); }

.ls-canvas { padding: 16px; box-shadow: 0 50px 90px -40px rgba(0,0,0,.85); }
.ls-cbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 2px 4px 14px; border-bottom: 1px solid var(--glass-line); }
.ls-ctitle { font-family: var(--mono); font-size: 12px; color: #CFE0EE; letter-spacing: .04em; display: flex; align-items: center; gap: 10px; }
.ls-live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; color: var(--ok); letter-spacing: .08em; text-transform: uppercase; }
.ls-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: ls-ping 1.8s infinite; }
@keyframes ls-ping { 0% { box-shadow: 0 0 0 0 rgba(31,169,113,.55); } 80%,100% { box-shadow: 0 0 0 8px rgba(31,169,113,0); } }

.ls-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: rgba(0,0,0,.25); border: 1px solid var(--glass-line); }
.ls-seg button { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: #9FB6C9; background: none; border: 0; border-radius: 7px; padding: 7px 13px; cursor: pointer; transition: background .2s, color .2s; }
.ls-seg button[aria-pressed="true"] { background: var(--teal); color: #fff; box-shadow: 0 0 18px rgba(14,156,156,.45); }
.ls-seg button:hover:not([aria-pressed="true"]) { color: #fff; }

.ls-cmp { position: relative; margin-top: 44px; border-radius: 18px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-lg); height: 470px; user-select: none; background: #fff; }
.ls-cmp-layer { position: absolute; inset: 0; }
.ls-cmp-after { clip-path: inset(0 0 0 var(--split, 50%)); }
.ls-cmp-tag { position: absolute; top: 16px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 6px 12px; border-radius: 30px; z-index: 3; }
.ls-cmp-before .ls-cmp-tag { left: 16px; background: #FDECEC; color: #B42318; border: 1px solid #F5C2C0; }
.ls-cmp-after .ls-cmp-tag { right: 16px; background: var(--teal); color: #fff; }
.ls-cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--split, 50%); width: 2px; margin-left: -1px; background: var(--teal); z-index: 4; pointer-events: none; box-shadow: 0 0 16px rgba(14,156,156,.6); }
.ls-cmp-handle::after { content: "\f053\00a0\00a0\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 46px; height: 46px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; font-size: 14px; box-shadow: 0 6px 20px rgba(7,23,34,.35); }
.ls-cmp-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 5; margin: 0; }
.ls-cmp-range:focus-visible + .ls-cmp-handle::after { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ================= 3. ECOSYSTEM (simple closed loop) ================= */
.ls-eco { display: grid; grid-template-columns: 1fr 72px 1fr 72px 1fr; align-items: stretch; margin-top: 44px; }
.ls-eco-node { padding: 24px 22px; display: flex; flex-direction: column; gap: 8px; color: inherit; transition: transform .25s, border-color .25s, box-shadow .25s; }
a.ls-eco-node:hover { transform: translateY(-5px); border-color: rgba(111,227,227,.6); box-shadow: 0 0 0 1px rgba(111,227,227,.25), 0 24px 50px -20px rgba(14,156,156,.6); }
.ls-eco-node .ix { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.ls-eco-node h3 { font-size: 22px; }
.ls-eco-node .role { font-family: var(--mono); font-size: 12px; color: #9FB6C9; }
.ls-eco-node p { font-size: 14.5px; color: var(--d-body); line-height: 1.6; }
.ls-eco-node .go { margin-top: auto; padding-top: 8px; font-weight: 600; font-size: 14px; color: var(--cyan); }
.ls-eco-node.self { background: linear-gradient(160deg, rgba(14,156,156,.28), rgba(14,156,156,.08)); border-color: rgba(111,227,227,.55); }
.ls-eco-link { position: relative; align-self: center; height: 2px; background: rgba(111,227,227,.25); margin: 0 6px; }
.ls-eco-link::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left: 8px solid rgba(111,227,227,.6); border-right: 0; }
.ls-eco-link i { position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: ls-packet 2.2s linear infinite; }
.ls-eco-link i:nth-child(2) { animation-delay: .73s; } .ls-eco-link i:nth-child(3) { animation-delay: 1.46s; }
@keyframes ls-packet { from { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } to { left: calc(100% - 8px); opacity: 0; } }
@keyframes ls-packetV { from { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { top: calc(100% - 8px); opacity: 0; } }
.ls-eco-loop { margin: 22px auto 0; width: 68%; height: 44px; border: 2px dashed rgba(111,227,227,.32); border-top: 0; border-radius: 0 0 22px 22px; display: grid; place-items: end center; }
.ls-eco-loop span { transform: translateY(50%); font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); background: #0C2230; padding: 4px 14px; border: 1px solid rgba(111,227,227,.3); border-radius: 30px; }

/* ================= 4. DIFFERENTIATORS (tabbed showcase) ================= */
.ls-pt { display: grid; grid-template-columns: .85fr 1.15fr; gap: 28px; margin-top: 40px; align-items: start; }
.ls-pi-list { display: grid; gap: 10px; }
.ls-pi { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; transition: border-color .2s, box-shadow .2s; }
.ls-pi.on { border-color: var(--teal); box-shadow: inset 3px 0 0 var(--teal), var(--shadow-sm); }
.ls-pi-btn { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 16px 18px; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; border-radius: 14px; }
.ls-pi-btn .n { grid-row: span 2; font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--muted); padding-top: 2px; }
.ls-pi.on .ls-pi-btn .n, .ls-pi.on .ls-pi-btn .k { color: var(--teal-dark); }
.ls-pi-btn .k { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ls-pi-btn b { font-size: 16px; color: var(--ink); line-height: 1.35; }
.ls-pi-btn:hover b { color: var(--teal-dark); }
.ls-pi-body { display: none; padding: 0 18px 18px 44px; }
.ls-pi.on .ls-pi-body { display: block; }
.ls-pi-body p { font-size: 14.5px; line-height: 1.65; }
.ls-pv[hidden] { display: none; }
.ls-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ls-tags span { font-family: var(--mono); font-size: 11.5px; color: var(--teal-dark); background: rgba(14,156,156,.08); border: 1px solid rgba(14,156,156,.22); border-radius: 6px; padding: 4px 10px; }
.ls-tags span.road { color: #8A5A06; background: rgba(245,144,11,.1); border-color: rgba(245,144,11,.35); }

/* ================= 7. SECURITY (inside the comparison section) ================= */
.ls-sec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-top: 36px; }
.ls-sec-title { grid-column: 1 / -1; font-size: 18px; }
.ls-sec-card { padding: 20px 22px; display: flex; gap: 16px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-sm); }
.ls-sec-card .ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(14,156,156,.1); border: 1px solid rgba(14,156,156,.28); color: var(--teal-dark); }
.ls-sec-card h3 { font-size: 16.5px; margin-bottom: 4px; }
.ls-sec-card p { font-size: 14.5px; line-height: 1.6; }

/* suite links inside the CTA band */
.ls-suite { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); }
.ls-suite span { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8FB0C4; margin-right: 6px; }
.ls-suite a { font-size: 14px; font-weight: 500; color: #CFE0EE; border: 1px solid rgba(255,255,255,.16); border-radius: 30px; padding: 6px 14px; }
.ls-suite a:hover { border-color: var(--cyan); color: #fff; }
.ls-suite a[aria-current] { background: var(--teal); border-color: var(--teal); color: #fff; }


/* tabbed differentiators on a dark section */
.ls-dark .ls-pi { background: var(--glass); border-color: var(--glass-line); }
.ls-dark .ls-pi.on { border-color: rgba(111,227,227,.6); background: rgba(14,156,156,.14); box-shadow: inset 3px 0 0 var(--cyan); }
.ls-dark .ls-pi-btn b { color: #fff; }
.ls-dark .ls-pi-btn:hover b { color: var(--cyan); }
.ls-dark .ls-pi-btn .n, .ls-dark .ls-pi-btn .k { color: var(--d-muted); }
.ls-dark .ls-pi.on .ls-pi-btn .n, .ls-dark .ls-pi.on .ls-pi-btn .k { color: var(--cyan); }
.ls-dark .ls-pi-body p { color: var(--d-body); }

@media (max-width: 1100px) {
  .ls-hero-inner { grid-template-columns: 1fr; }
  .ls-pt { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .ls-eco { grid-template-columns: 1fr; }
  .ls-eco-loop { display: none; }
  .ls-eco-link { width: 2px; height: 40px; margin: 0 auto; }
  .ls-eco-link::after { right: auto; left: -5px; top: auto; bottom: -2px; border: 6px solid transparent; border-top: 8px solid rgba(111,227,227,.7); border-bottom: 0; }
  .ls-eco-link i { left: -3px; animation-name: ls-packetV; }
  .ls-sec-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}