/* ===== OFSL Techno PAGE (prefix el-) ===== */

/* hero */
.el-hero{position:relative;overflow:hidden;padding:150px 0 84px;background:linear-gradient(180deg,#fbfbff,#f4f5fc)}
.el-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.el-hero .ofsl-crumb{color:var(--ofsl-muted)}
.el-hero .ofsl-crumb a{color:var(--ofsl-muted)}.el-hero .ofsl-crumb a:hover{color:var(--ofsl-accent)}
.el-hero .ofsl-crumb .cur{color:var(--ofsl-accent)}
.el-hero-title{font-size:clamp(34px,5vw,54px);margin:18px 0 18px}
.el-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.el-hero-visual{position:relative;display:flex;justify-content:center}
.el-statecard{position:relative;z-index:2;width:100%;max-width:360px;background:#fff;border:1px solid var(--ofsl-line);
  border-radius:26px;padding:34px;text-align:center;box-shadow:var(--ofsl-shadow-lg)}
.el-state-ic{width:76px;height:76px;border-radius:22px;background:var(--ofsl-grad);color:#fff;display:grid;place-items:center;
  font-size:30px;margin:0 auto 16px;box-shadow:0 16px 34px -10px rgba(79,70,229,.6)}
.el-statecard b{font-family:'Plus Jakarta Sans';font-size:22px;color:var(--ofsl-ink);display:block}
.el-statecard small{font-size:13px;color:#16a34a;font-weight:600;display:block;margin-top:4px}
.el-state-line{display:flex;justify-content:space-between;margin-top:22px;font-size:13px;color:var(--ofsl-muted);font-weight:600}
.el-state-track{height:8px;background:var(--ofsl-soft-2);border-radius:5px;margin-top:10px;overflow:hidden}
.el-state-track i{display:block;height:100%;width:0;background:var(--ofsl-grad);border-radius:5px;transition:width 1.3s var(--ofsl-ease)}
.el-mini{position:absolute;z-index:3;background:#fff;border:1px solid var(--ofsl-line);border-radius:12px;padding:10px 14px;
  font-family:'Plus Jakarta Sans';font-weight:600;font-size:12.5px;color:var(--ofsl-ink);box-shadow:var(--ofsl-shadow);
  display:flex;align-items:center;gap:9px;animation:elbob 5.5s ease-in-out infinite}
.el-mini .d{width:8px;height:8px;border-radius:50%}
.el-mini .d.ok{background:#16a34a}.el-mini .d.lock{background:var(--ofsl-accent)}
.el-mini.a{top:6px;right:-8px;animation-delay:-1s}
.el-mini.b{bottom:20px;left:-16px;animation-delay:-3s}
@keyframes elbob{50%{transform:translateY(-11px)}}

/* flow */
.el-flow-row{display:flex;align-items:stretch;justify-content:center;gap:8px;flex-wrap:nowrap}
.el-flow-node{background:#fff;border:1px solid var(--ofsl-line);border-radius:18px;padding:22px 16px;text-align:center;flex:1;
  transition:transform .3s var(--ofsl-ease),box-shadow .3s}
.el-flow-node:hover{transform:translateY(-5px);box-shadow:var(--ofsl-shadow)}
.el-flow-node.accent{background:linear-gradient(160deg,#141a38,#0f1430);border-color:transparent}
.el-flow-node.accent b{color:#fff}.el-flow-node.accent small{color:#aeb6cc}
.el-flow-node.accent .el-fn-ic{background:var(--ofsl-grad);color:#fff}
.el-fn-ic{width:52px;height:52px;border-radius:15px;background:var(--ofsl-accent-soft);color:var(--ofsl-accent);
  display:grid;place-items:center;font-size:20px;margin:0 auto 12px}
.el-flow-node b{font-family:'Plus Jakarta Sans';font-size:14.5px;color:var(--ofsl-ink);display:block}
.el-flow-node small{font-size:11.5px;color:var(--ofsl-muted)}
.el-flow-arrow{color:var(--ofsl-accent);font-size:16px;align-self:center;flex:none;opacity:.5}

/* enforcement */
.el-enforce-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.el-rulecard{background:#fff;border:1px solid var(--ofsl-line);border-radius:22px;padding:28px;box-shadow:var(--ofsl-shadow);max-width:420px}
.el-rule-head{font-family:'Plus Jakarta Sans';font-weight:700;color:var(--ofsl-ink);display:flex;align-items:center;gap:9px;margin-bottom:18px}
.el-rule-head i{color:var(--ofsl-accent)}
.el-rule-line{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-top:1px dashed var(--ofsl-line);font-size:14px;color:var(--ofsl-muted)}
.el-rule-line b{font-family:'Plus Jakarta Sans';color:var(--ofsl-ink)}
.el-rule-line b.warn{color:#b45309}.el-rule-line b.ok{color:#15803d}
.el-rule-foot{margin-top:16px;padding-top:16px;border-top:1px solid var(--ofsl-line);font-size:12.5px;color:var(--ofsl-muted);display:flex;align-items:center;gap:8px}
.el-rule-foot .dot{width:8px;height:8px;border-radius:50%;background:#16a34a}
.el-enforce-copy .ofsl-eyebrow{margin-bottom:18px}
.el-enforce-copy h2{margin-bottom:16px}
.el-ticks{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.el-ticks li{display:flex;align-items:center;gap:11px;font-size:15px;color:var(--ofsl-ink-soft)}
.el-ticks i{color:var(--ofsl-accent)}

/* states grid */
.el-states-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.el-state{background:#fff;border:1px solid var(--ofsl-line);border-radius:18px;padding:26px;text-align:center;
  transition:transform .3s var(--ofsl-ease),box-shadow .3s;border-top:3px solid var(--ofsl-line)}
.el-state:hover{transform:translateY(-5px);box-shadow:var(--ofsl-shadow)}
.el-state i{font-size:26px;margin-bottom:12px;display:block}
.el-state b{font-family:'Plus Jakarta Sans';font-size:17px;color:var(--ofsl-ink);display:block;margin-bottom:5px}
.el-state span{font-size:13px;color:var(--ofsl-muted)}
.el-state.s-ok{border-top-color:#22c55e}.el-state.s-ok i{color:#22c55e}
.el-state.s-due{border-top-color:#f59e0b}.el-state.s-due i{color:#f59e0b}
.el-state.s-pend{border-top-color:#eab308}.el-state.s-pend i{color:#eab308}
.el-state.s-lock{border-top-color:#ef4444}.el-state.s-lock i{color:#ef4444}
.el-state.s-clear{border-top-color:#3b82f6}.el-state.s-clear i{color:#3b82f6}
.el-state.s-unlock{border-top-color:var(--ofsl-accent)}.el-state.s-unlock i{color:var(--ofsl-accent)}

/* dashboard showcase */
.el-dash{background:#fff;border:1px solid var(--ofsl-line);border-radius:24px;box-shadow:var(--ofsl-shadow-lg);
  display:grid;grid-template-columns:220px 1fr;overflow:hidden}
.el-dash-side{background:var(--ofsl-dark);padding:24px 16px;display:flex;flex-direction:column;gap:6px}
.el-dash-brand{font-family:'Plus Jakarta Sans';font-weight:700;color:#fff;font-size:15px;display:flex;align-items:center;gap:9px;
  margin-bottom:18px;padding:0 8px}
.el-dash-brand i{color:var(--ofsl-accent-3)}
.el-dash-side a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:11px;color:#9aa3be;font-size:13.5px;
  font-family:'Plus Jakarta Sans';font-weight:600;cursor:pointer;transition:.2s}
.el-dash-side a:hover{background:rgba(255,255,255,.05);color:#fff}
.el-dash-side a.active{background:var(--ofsl-grad);color:#fff}
.el-dash-main{padding:24px}
.el-dash-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.el-dc{background:var(--ofsl-soft);border:1px solid var(--ofsl-line);border-radius:15px;padding:16px}
.el-dc span{font-size:12px;color:var(--ofsl-muted)}
.el-dc b{font-family:'Plus Jakarta Sans';font-weight:800;font-size:26px;color:var(--ofsl-ink);display:block;margin:4px 0 6px}
.el-dc i{font-style:normal;font-size:11.5px;font-weight:600}
.el-dc .up{color:#16a34a}.el-dc .warn{color:#b45309}.el-dc .bad{color:#dc2626}
.el-dash-lower{display:grid;grid-template-columns:1.3fr 1fr;gap:16px}
.el-dash-chart,.el-dash-activity{background:var(--ofsl-soft);border:1px solid var(--ofsl-line);border-radius:15px;padding:18px}
.el-dash-chart-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.el-dash-chart-h span{font-family:'Plus Jakarta Sans';font-weight:700;font-size:14px;color:var(--ofsl-ink)}
.el-dash-chart-h .tag{font-size:11px;color:var(--ofsl-muted);font-weight:500;background:#fff;padding:4px 10px;border-radius:100px;border:1px solid var(--ofsl-line)}
.el-dash-bars{display:flex;align-items:flex-end;gap:7px;height:120px}
.el-dash-bars i{flex:1;height:var(--h);background:var(--ofsl-grad);border-radius:5px 5px 0 0;opacity:.9;animation:elgrow 1.1s var(--ofsl-ease) both}
@keyframes elgrow{from{height:4px;opacity:.3}}
.el-dash-legend{display:flex;gap:18px;margin-top:12px;font-size:12px;color:var(--ofsl-muted)}
.el-dash-legend b{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px}
.el-dash-legend .l1{background:#4f46e5}.el-dash-legend .l2{background:#c7ccf5}
.el-act{display:flex;gap:11px;align-items:center;padding:9px 0;border-top:1px solid var(--ofsl-line)}
.el-act:first-of-type{border-top:none}
.el-act .ai{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:13px;flex:none}
.el-act .ai.ok{background:#dcfce7;color:#16a34a}
.el-act .ai.warn{background:#fef3c7;color:#b45309}
.el-act .ai.bad{background:#fee2e2;color:#dc2626}
.el-act b{font-family:'Plus Jakarta Sans';font-size:13px;color:var(--ofsl-ink);display:block}
.el-act small{font-size:11.5px;color:var(--ofsl-muted)}
.el-dash-note{text-align:center;font-size:12px;color:var(--ofsl-muted);margin-top:18px}

/* security dark */
.el-security{overflow:hidden}
.el-sec-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.el-sec-grid .ofsl-eyebrow{margin-bottom:18px}
.el-sec-grid h2{margin-bottom:16px}
.el-sec-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.el-sc{background:var(--ofsl-dark-card);border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:24px;
  transition:transform .3s var(--ofsl-ease),border-color .3s}
.el-sc:hover{transform:translateY(-5px);border-color:rgba(124,92,246,.5)}
.el-sc i{font-size:23px;color:#a78bfa;margin-bottom:13px;display:block}
.el-sc b{font-family:'Plus Jakarta Sans';color:#fff;font-size:15.5px;display:block;margin-bottom:5px}
.el-sc span{font-size:13px;color:#9aa3be}

/* responsive */
@media(max-width:992px){
  .el-hero-grid,.el-enforce-grid,.el-sec-grid{grid-template-columns:1fr;gap:40px}
  .el-flow-row{flex-wrap:wrap;gap:14px}
  .el-flow-arrow{transform:rotate(90deg)}
  .el-flow-node{flex:1 1 40%;min-width:130px}
  .el-states-grid{grid-template-columns:1fr 1fr}
  .el-dash{grid-template-columns:1fr}
  .el-dash-side{flex-direction:row;overflow-x:auto;gap:6px}
  .el-dash-brand{display:none}
  .el-dash-side a{white-space:nowrap}
  .el-dash-cards{grid-template-columns:1fr 1fr}
  .el-dash-lower{grid-template-columns:1fr}
}
@media(max-width:576px){
  .el-states-grid{grid-template-columns:1fr}
  .el-dash-cards{grid-template-columns:1fr 1fr}
  .el-enforce-visual{display:flex;justify-content:center}
  .el-sec-cards{grid-template-columns:1fr}
  .el-flow-node{flex:1 1 100%}
  .el-flow-arrow{display:none}
}