/* ============================================================ CODESTAN · LMS product page — page-unique signature visuals accent: --pa (#e3faa2) set on by js/lms.js Shared scaffolding lives in css/product.css (pd-* / lv-* / rv) ============================================================ */ :root{--weak:#f2c94c} /* ============ 01 · HERO DASH — interface assembling itself ============ */ .hd{position:relative} .hd .hd-el{opacity:0;transform:translateY(12px);animation:hdIn .8s var(--ease) forwards;animation-delay:var(--d,0s)} @keyframes hdIn{to{opacity:1;transform:none}} .hd-live-dot{animation:pdPulse 1.8s ease-in-out infinite} .hd-bar{transition:width 1.1s var(--ease)} .hd-ring{transition:stroke-dashoffset 1.2s var(--ease)} /* ============ shared rail wrap ============ */ .lms-rail-wrap{width:min(1200px,94vw);margin:26px auto 0} /* ============ 02 · LEARNING JOURNEY graph ============ */ .lj-visual{padding:12px} .lj-visual svg{width:100%;height:auto;display:block} .lj-edge{fill:none;stroke:#2c312c;stroke-width:1.6;stroke-dasharray:100;stroke-dashoffset:100; transition:stroke-dashoffset .5s linear,stroke .5s} .lj-edge.on{stroke:var(--pa,#e3faa2)} .lj-node{opacity:.28;transition:opacity .6s var(--ease)} .lj-node.on{opacity:1} .lj-node rect{fill:#141714;stroke:#2c312c;stroke-width:1.2;transition:stroke .5s,fill .5s} .lj-node.on rect{stroke:color-mix(in srgb,var(--pa,#e3faa2) 55%,#2c312c)} .lj-node.weak rect{stroke:var(--weak);fill:rgba(242,201,76,.07);animation:ljWeak 1.4s ease-in-out infinite} @keyframes ljWeak{0%,100%{stroke-opacity:1}50%{stroke-opacity:.35}} .lj-node text{font-size:10.5px;fill:var(--text-p1);font-family:inherit} .lj-node .lj-ic{fill:#3a403a;transition:fill .5s} .lj-node.on .lj-ic{fill:var(--pa,#e3faa2)} .lj-ring-bg{fill:none;stroke:#232723;stroke-width:5} .lj-ring-fg{fill:none;stroke:var(--pa,#e3faa2);stroke-width:5;stroke-linecap:round; transform:rotate(-90deg);transform-origin:center;transform-box:fill-box} .lj-core{fill:#101310;stroke:color-mix(in srgb,var(--pa,#e3faa2) 45%,#232723);stroke-width:1.4} .lj-core-txt{font-size:11px;font-weight:700;fill:var(--pa,#e3faa2);letter-spacing:.08em} .lj-pct{font-size:15px;font-weight:700;fill:#f0f6f0} .lj-final{font-size:10px;letter-spacing:.14em;fill:var(--pa,#e3faa2);opacity:0;transition:opacity .8s} .lj-final.on{opacity:1} .lj-halo{fill:none;stroke:var(--pa,#e3faa2);stroke-width:1;opacity:0} .lj-halo.on{opacity:.35;animation:ljHalo 2.4s ease-out infinite} @keyframes ljHalo{0%{transform:scale(.86);opacity:.45}100%{transform:scale(1.28);opacity:0}} /* ============ 03 · LEARNING STORY mocks ============ */ .ls-visual{min-height:380px;display:flex;align-items:center;justify-content:center} .ls-mock{position:absolute;inset:22px;display:flex;align-items:center;justify-content:center; opacity:0;transform:translateY(14px) scale(.97);pointer-events:none; transition:opacity .45s var(--ease),transform .45s var(--ease)} .ls-mock.on{opacity:1;transform:none} .ls-card{width:min(360px,100%);background:#141714;border:1px solid #2a2e2a;border-radius:16px;padding:18px} .ls-card h5{font-size:13.5px;color:#eef4ee;margin-bottom:6px} .ls-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #22261f;font-size:11.5px;color:var(--text-p2)} .ls-row:first-of-type{border-top:none} .ls-dot{width:8px;height:8px;border-radius:50%;background:#3a403a;flex:0 0 auto} .ls-dot.on{background:var(--pa,#e3faa2)} .ls-bar{height:5px;border-radius:3px;background:#232723;overflow:hidden;flex:1} .ls-bar i{display:block;height:100%;background:var(--pa,#e3faa2);border-radius:3px;transition:width 1s var(--ease)} .ls-opt{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid #2a2e2a;border-radius:10px; font-size:11.5px;color:var(--text-p1);margin-top:8px} .ls-opt.sel{border-color:color-mix(in srgb,var(--pa,#e3faa2) 55%,#2a2e2a); background:color-mix(in srgb,var(--pa,#e3faa2) 7%,#141714)} .ls-opt b{width:14px;height:14px;border-radius:50%;border:1.5px solid #3a403a;flex:0 0 auto} .ls-opt.sel b{border-color:var(--pa,#e3faa2);background:radial-gradient(circle,var(--pa,#e3faa2) 42%,transparent 46%)} .ls-play{width:100%;aspect-ratio:16/8.4;border-radius:12px;background: linear-gradient(140deg,#1a1e1a,#101310);border:1px solid #2a2e2a;position:relative;display:grid;place-items:center} .ls-play i{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--pa,#e3faa2);display:grid;place-items:center} .ls-play i::after{content:'';border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent var(--pa,#e3faa2);margin-inline-start:3px} .ls-playbar{position:absolute;bottom:12px;inset-inline:14px;height:4px;border-radius:2px;background:#232723} .ls-playbar u{position:absolute;inset-inline-start:0;top:0;bottom:0;width:38%;background:var(--pa,#e3faa2);border-radius:2px} .ls-cert{width:min(340px,100%);background:linear-gradient(160deg,#191d19,#101310); border:1px solid color-mix(in srgb,var(--pa,#e3faa2) 40%,#2a2e2a);border-radius:14px;padding:20px;text-align:center} .ls-cert .seal{width:34px;height:34px;margin:0 auto 8px;border-radius:50%; border:1.5px solid var(--pa,#e3faa2);display:grid;place-items:center;color:var(--pa,#e3faa2);font-size:14px} .ls-cert h6{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--pa,#e3faa2);margin-bottom:6px} .ls-cert p{font-size:11px;color:var(--text-p2);margin:0} .ls-badge{display:inline-block;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--pa,#e3faa2); border:1px solid color-mix(in srgb,var(--pa,#e3faa2) 40%,transparent);border-radius:999px;padding:3px 10px;margin-bottom:10px} .ls-score{font-size:30px;font-weight:800;color:var(--pa,#e3faa2);line-height:1} /* ============ 04 · CHALLENGES ============ */ .ch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .ch-card{background:#141714;border:1px solid #262a26;border-radius:18px;padding:20px; transition:border-color .35s,transform .45s var(--ease)} .ch-card:hover{transform:translateY(-4px);border-color:#374037} .ch-art{height:74px;margin-bottom:14px} .ch-art svg{width:100%;height:100%} .ch-art .morph{transition:all 1.1s var(--ease)} .ch-grid .a-dot{transition:transform 1.2s var(--ease);transform-box:fill-box} .ch-grid.alt .a-dot{transform:none} .ch-grid .a-bar{transform:scaleY(.08);transform-origin:bottom;transform-box:fill-box;transition:transform 1.1s var(--ease)} .ch-grid.alt .a-bar{transform:scaleY(1)} .ch-grid .a-line{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.3s var(--ease)} .ch-grid.alt .a-line{stroke-dashoffset:0} .ch-grid .a-fade{opacity:0;transition:opacity .9s var(--ease)} .ch-grid.alt .a-fade{opacity:1} .ch-grid .a-scalex{transform:scaleX(.25);transform-origin:left;transform-box:fill-box;transition:transform 1.1s var(--ease)} .ch-grid.alt .a-scalex{transform:scaleX(1)} .ch-grid .a-pop{opacity:.18;transform:translateY(5px);transition:opacity .9s var(--ease),transform .9s var(--ease)} .ch-grid.alt .a-pop{opacity:1;transform:none} .ch-from{font-size:11.5px;color:var(--text-p2);display:flex;align-items:center;gap:7px} .ch-from::before{content:'';width:7px;height:7px;border-radius:50%;background:#4a4a4a;flex:0 0 auto} .ch-arrow{display:block;color:var(--pa,#e3faa2);font-size:13px;margin:5px 0 5px 2px} [dir="rtl"] .ch-arrow{transform:scaleX(-1);display:inline-block} .ch-to{font-size:14px;font-weight:700;color:#eef4ee;display:flex;align-items:center;gap:7px} .ch-to::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--pa,#e3faa2);flex:0 0 auto} /* ============ 05 · COURSE TREE ============ */ .cm-wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:30px;align-items:center} .cm-visual{padding:14px;display:flex;align-items:center;justify-content:center} .cm-visual svg{width:100%;height:auto;display:block} .cm-side{display:flex;flex-direction:column;gap:12px} .cm-feat{background:#121511;border:1px solid #262a26;border-radius:14px;padding:16px 18px} .cm-feat h4{font-size:14px;color:#eef4ee;margin-bottom:5px} .cm-feat p{font-size:12px;color:var(--text-p2);line-height:1.6;margin:0} .ct-edge{fill:none;stroke:#39413a;stroke-width:1.5;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .55s var(--ease),stroke .5s} .ct-edge.on{stroke-dashoffset:0;stroke:color-mix(in srgb,var(--pa,#e3faa2) 60%,#39413a)} .ct-node{opacity:0;transform:scale(.6);transform-origin:center;transform-box:fill-box; transition:opacity .45s var(--ease),transform .45s var(--ease)} .ct-node.on{opacity:1;transform:scale(1)} .ct-node rect{fill:#141714;stroke:#2c312c;stroke-width:1.2} .ct-node.root rect{stroke:var(--pa,#e3faa2);fill:color-mix(in srgb,var(--pa,#e3faa2) 8%,#141714)} .ct-node.leaf rect{stroke:#333a33} .ct-node text{font-size:10px;fill:var(--text-p1);font-family:inherit} .ct-node.root text{fill:var(--pa,#e3faa2);font-weight:700;font-size:11px;letter-spacing:.06em} /* ============ 06 · LEARNER DASHBOARD ============ */ .lx-mount{background:#0c0e0c;border:1px solid #262a26;border-radius:22px;padding:20px} .lx-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid #22261f;margin-bottom:16px} .lx-ava{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700; color:#121212;background:var(--pa,#e3faa2)} .lx-head h4{font-size:14.5px;color:#eef4ee} .lx-head p{font-size:11px;color:var(--text-p2);margin:0} .lx-streak{margin-inline-start:auto;display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--pa,#e3faa2); border:1px solid color-mix(in srgb,var(--pa,#e3faa2) 35%,transparent);border-radius:999px;padding:6px 12px; background:color-mix(in srgb,var(--pa,#e3faa2) 7%,transparent)} .lx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .lx-panel{background:#121511;border:1px solid #22261f;border-radius:14px;padding:14px;min-height:128px; transition:border-color .5s,transform .5s var(--ease),box-shadow .5s} .lx-panel.on{border-color:color-mix(in srgb,var(--pa,#e3faa2) 50%,#22261f);transform:translateY(-3px); box-shadow:0 16px 32px -20px color-mix(in srgb,var(--pa,#e3faa2) 35%,transparent)} .lx-panel h5{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-p2);margin-bottom:10px} .lx-course{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:11.5px;color:var(--text-p1)} .lx-course span{flex:0 0 42%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lx-course em{font-style:normal;font-size:10px;color:var(--pa,#e3faa2);flex:0 0 auto} .lx-ring-wrap{display:flex;align-items:center;gap:14px} .lx-ring-wrap svg{width:74px;height:74px} .lx-big{font-size:22px;font-weight:800;color:var(--pa,#e3faa2);line-height:1.05} .lx-note{font-size:10.5px;color:var(--text-p2)} .lx-item{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--text-p1);padding:6px 0;border-top:1px solid #1e221e} .lx-item:first-of-type{border-top:none} .lx-item time{font-size:10px;color:var(--text-p2);flex:0 0 auto} .lx-badges{display:flex;gap:10px} .lx-badge{width:34px;height:34px;border-radius:50%;border:1px solid #2c312c;display:grid;place-items:center;color:#3f473f} .lx-badge.won{border-color:color-mix(in srgb,var(--pa,#e3faa2) 55%,#2c312c);color:var(--pa,#e3faa2); background:color-mix(in srgb,var(--pa,#e3faa2) 7%,transparent)} .lx-badge svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .lx-rec{display:flex;flex-direction:column;gap:8px} .lx-rec div{font-size:11.5px;color:var(--text-p1);border:1px dashed #2c312c;border-radius:9px;padding:8px 10px} /* ============ 07 · INSTRUCTOR CONSOLE ============ */ .ix-mount{display:grid;grid-template-columns:1fr 56px 1fr;gap:0;align-items:stretch; background:#0c0e0c;border:1px solid #262a26;border-radius:22px;padding:20px} .ix-pane{background:#121511;border:1px solid #22261f;border-radius:16px;padding:16px} .ix-pane h5{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-p2);margin-bottom:12px} .ix-stats{display:flex;gap:14px;margin-bottom:14px} .ix-stats div strong{display:block;font-size:17px;color:var(--pa,#e3faa2)} .ix-stats div span{font-size:9.5px;color:var(--text-p2)} .ix-act{display:flex;align-items:center;gap:10px;width:100%;font:inherit;font-size:12px;color:var(--text-p1); background:#141714;border:1px solid #2a2e2a;border-radius:10px;padding:10px 12px;margin-top:8px; transition:border-color .4s,background .4s} .ix-act i{width:7px;height:7px;border-radius:50%;background:#3a403a;transition:background .4s} .ix-act.on{border-color:color-mix(in srgb,var(--pa,#e3faa2) 55%,#2a2e2a); background:color-mix(in srgb,var(--pa,#e3faa2) 6%,#141714)} .ix-act.on i{background:var(--pa,#e3faa2)} .ix-beam{position:relative;align-self:center;height:2px;background:#232723;border-radius:2px} .ix-beam u{position:absolute;top:50%;width:8px;height:8px;border-radius:50%;background:var(--pa,#e3faa2); transform:translate(-50%,-50%);left:0;transition:left .8s var(--ease); box-shadow:0 0 12px color-mix(in srgb,var(--pa,#e3faa2) 70%,transparent)} [dir="rtl"] .ix-beam u{left:auto;right:0;transition:right .8s var(--ease)} .ix-feed{display:flex;flex-direction:column;gap:8px;min-height:150px} .ix-ev{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--text-p1); border-top:1px solid #1e221e;padding-top:8px} .ix-ev i{width:7px;height:7px;border-radius:50%;background:var(--pa,#e3faa2);flex:0 0 auto} .ix-ev time{margin-inline-start:auto;font-size:9.5px;color:var(--text-ph)} .ix-ev.new{animation:ixIn .5s var(--ease)} @keyframes ixIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .ix-lbar{margin-top:12px} .ix-lbar p{display:flex;justify-content:space-between;font-size:10.5px;color:var(--text-p2);margin:0 0 5px} .ix-lbar .ls-bar{height:6px} /* ============ 08 · ADMIN COMMAND CENTER ============ */ .ad-mount{background:#0c0e0c;border:1px solid #262a26;border-radius:22px;padding:20px} .ad-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px} .ad-flow{display:grid;grid-template-columns:1fr 46px 1fr 46px 1fr;align-items:center;gap:0} .ad-node{background:#121511;border:1px solid #22261f;border-radius:14px;padding:16px;text-align:center} .ad-node h5{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--pa,#e3faa2);margin-bottom:6px} .ad-node p{font-size:11px;color:var(--text-p2);margin:0;line-height:1.5} .ad-link{height:2px;background:repeating-linear-gradient(90deg,var(--pa,#e3faa2) 0 6px,transparent 6px 12px); background-size:24px 2px;opacity:.55;animation:adDash 1.2s linear infinite} @keyframes adDash{to{background-position:24px 0}} [dir="rtl"] .ad-link{animation-name:adDashR} @keyframes adDashR{to{background-position:-24px 0}} /* ============ 09 · ANALYTICS GRID ============ */ .an-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:min(1200px,94vw);margin:0 auto} .an-card{background:#121511;border:1px solid #262a26;border-radius:16px;padding:14px} .an-card h5{font-size:10.5px;color:var(--text-p2);margin-bottom:8px;display:flex;justify-content:space-between;gap:8px} .an-card h5 b{color:var(--pa,#e3faa2);font-size:11.5px} .an-card svg{width:100%;height:auto;display:block} .an-draw{fill:none;stroke:var(--pa,#e3faa2);stroke-width:2;stroke-linecap:round} .an-area{fill:color-mix(in srgb,var(--pa,#e3faa2) 10%,transparent);stroke:none;opacity:0;transition:opacity .6s} .an-bar{fill:#232a23} .an-bar.hot{fill:var(--pa,#e3faa2)} .an-grid-l{stroke:#1e221e;stroke-width:1} .an-txt{font-size:7.5px;fill:#6f7d6f;font-family:inherit} /* ============ 10 · KNOWLEDGE GRAPH ============ */ .kg-sec{background:radial-gradient(900px 500px at 50% 42%,color-mix(in srgb,var(--pa,#e3faa2) 5%,transparent),transparent 65%)} .kg-mount{width:min(760px,92vw);margin:0 auto} .kg-mount svg{width:100%;height:auto;display:block} .kg-edge{fill:none;stroke:#2c312c;stroke-width:1.5;stroke-dasharray:100;stroke-dashoffset:100; transition:stroke-dashoffset .6s linear,stroke .5s} .kg-edge.on{stroke:color-mix(in srgb,var(--pa,#e3faa2) 75%,#2c312c)} .kg-node{opacity:.3;transition:opacity .55s var(--ease)} .kg-node.on{opacity:1} .kg-node circle{fill:#121511;stroke:#2c312c;stroke-width:1.3;transition:stroke .5s,fill .5s} .kg-node.on circle{stroke:color-mix(in srgb,var(--pa,#e3faa2) 60%,#2c312c); fill:color-mix(in srgb,var(--pa,#e3faa2) 5%,#121511)} .kg-node text{font-size:10.5px;fill:var(--text-p1);font-family:inherit} .kg-hub circle{fill:#101310;stroke:var(--pa,#e3faa2);stroke-width:1.5} .kg-hub text{fill:var(--pa,#e3faa2);font-weight:700} .kg-center-lab{font-size:9px;letter-spacing:.22em;fill:#7d8b7d} .kg-live{font-size:9px;letter-spacing:.2em;fill:var(--pa,#e3faa2);opacity:0;transition:opacity .8s} .kg-live.on{opacity:1} .kg-pulse{fill:none;stroke:var(--pa,#e3faa2);opacity:0} .kg-pulse.on{opacity:.4;animation:ljHalo 2.6s ease-out infinite} .kg-pkt{fill:var(--pa,#e3faa2);opacity:0} .kg-pkt.on{opacity:1;animation:kgPkt var(--pd,2.2s) linear infinite} @keyframes kgPkt{ 0%{transform:translate(var(--x1),var(--y1));opacity:0} 12%{opacity:1} 88%{opacity:1} 100%{transform:translate(var(--x2),var(--y2));opacity:0}} .kg-cap{text-align:center;font-size:12px;letter-spacing:.1em;color:var(--pa,#e3faa2);min-height:18px;margin:6px 0 0; text-transform:uppercase} /* ============ 11 · ASSESSMENTS LOOP ============ */ .as-mount{background:#0c0e0c;border:1px solid #262a26;border-radius:22px;padding:26px 22px} .as-flow{position:relative;display:flex;justify-content:space-between;gap:8px;margin-bottom:34px} .as-flow::before{content:'';position:absolute;top:26px;inset-inline:30px;height:2px;background:#232723} .as-step{position:relative;z-index:1;flex:1;text-align:center} .as-step i{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 9px;border-radius:50%; background:#121511;border:1px solid #2c312c;font-style:normal;font-size:11px;font-weight:700;color:var(--text-p2); transition:border-color .45s,color .45s,background .45s,box-shadow .45s} .as-step span{font-size:10.5px;color:var(--text-p2);transition:color .45s} .as-step.on i{border-color:var(--pa,#e3faa2);color:#121212;background:var(--pa,#e3faa2); box-shadow:0 0 22px color-mix(in srgb,var(--pa,#e3faa2) 45%,transparent)} .as-step.done i{border-color:color-mix(in srgb,var(--pa,#e3faa2) 60%,#2c312c);color:var(--pa,#e3faa2)} .as-step.on span,.as-step.done span{color:var(--text-p1)} .as-weak{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .as-wk{background:#121511;border:1px solid #22261f;border-radius:12px;padding:13px 14px} .as-wk p{display:flex;justify-content:space-between;font-size:11px;color:var(--text-p1);margin:0 0 8px} .as-wk p em{font-style:normal;color:var(--weak)} .as-wk.ok p em{color:var(--pa,#e3faa2)} .as-wk .ls-bar i{background:var(--weak)} .as-wk.ok .ls-bar i{background:var(--pa,#e3faa2)} .as-wk small{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--weak)} .as-wk.ok small{color:var(--pa,#e3faa2)} /* ============ 12 · CERTIFICATES ============ */ .cf-mount{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;max-width:980px;margin:0 auto} .cf-course{background:#0c0e0c;border:1px solid #262a26;border-radius:20px;padding:26px;text-align:center} .cf-course h4{font-size:14px;color:#eef4ee;margin:14px 0 4px} .cf-course>p{font-size:11.5px;color:var(--text-p2);margin:0 0 16px} .cf-ring{width:120px;height:120px;margin:0 auto;position:relative} .cf-ring svg{width:100%;height:100%;transform:rotate(-90deg)} .cf-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:21px;color:#f0f6f0} .cf-done{display:inline-block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--pa,#e3faa2); border:1px solid color-mix(in srgb,var(--pa,#e3faa2) 45%,transparent);border-radius:999px;padding:5px 14px; background:color-mix(in srgb,var(--pa,#e3faa2) 8%,transparent); opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease)} .cf-done.on{opacity:1;transform:none} .cf-cert{position:relative;background:linear-gradient(155deg,#1b201b 0%,#101310 70%); border:1px solid color-mix(in srgb,var(--pa,#e3faa2) 45%,#2a2e2a);border-radius:18px;padding:30px 26px;text-align:center; opacity:0;transform:translateY(20px) scale(.94);transition:opacity .9s var(--ease),transform .9s var(--ease);overflow:hidden} .cf-cert.on{opacity:1;transform:none} .cf-cert::before{content:'';position:absolute;inset:8px;border:1px solid color-mix(in srgb,var(--pa,#e3faa2) 22%,transparent); border-radius:12px;pointer-events:none} .cf-sheen{position:absolute;top:0;bottom:0;width:46%;left:-60%;pointer-events:none; background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--pa,#e3faa2) 9%,transparent),transparent)} .cf-cert.on .cf-sheen{animation:cfSheen 1.6s var(--ease) .5s 1 forwards} @keyframes cfSheen{to{left:110%}} .cf-seal{width:52px;height:52px;margin:0 auto 12px;border-radius:50%;border:1.5px solid var(--pa,#e3faa2); display:grid;place-items:center;color:var(--pa,#e3faa2);font-size:19px} .cf-cert h6{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--pa,#e3faa2);margin-bottom:10px} .cf-cert h4{font-size:19px;color:#f0f6f0;margin-bottom:4px} .cf-cert p{font-size:11.5px;color:var(--text-p2);margin:0 0 14px} .cf-meta{display:flex;justify-content:space-between;font-size:9.5px;color:var(--text-ph); border-top:1px solid #22261f;padding-top:12px} /* ============ 13 · NOTIFICATIONS FEED ============ */ .nt-wrap{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center} .nt-copy h2{font-size:clamp(28px,3.6vw,44px);line-height:1.1;color:#f0f6f0;margin-bottom:14px} .nt-copy>p{font-size:15.5px;color:var(--text-p2);line-height:1.65;max-width:48ch} .nt-feed{display:flex;flex-direction:column;gap:10px;max-width:460px;margin-inline-start:auto;width:100%} .nt-item{display:flex;align-items:center;gap:12px;background:#121511;border:1px solid #262a26;border-radius:14px; padding:13px 16px} .nt-item.in{animation:ntIn .55s var(--ease)} @keyframes ntIn{from{opacity:0;transform:translateY(-14px) scale(.97)}to{opacity:1;transform:none}} .nt-ic{width:34px;height:34px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center; background:color-mix(in srgb,var(--pa,#e3faa2) 8%,transparent); border:1px solid color-mix(in srgb,var(--pa,#e3faa2) 30%,transparent)} .nt-ic svg{width:15px;height:15px;stroke:var(--pa,#e3faa2);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .nt-item h5{font-size:12.5px;color:#eef4ee} .nt-item p{font-size:10.5px;color:var(--text-p2);margin:0} .nt-item time{margin-inline-start:auto;font-size:9.5px;color:var(--text-ph);flex:0 0 auto} /* ============ 14 · MULTI-ROLE ECOSYSTEM ============ */ .mr-mount{max-width:760px;margin:0 auto} .mr-mount svg{width:100%;height:auto;display:block} .mr-role rect{fill:#141714;stroke:#2c312c;stroke-width:1.2} .mr-role text{font-size:11px;fill:var(--text-p1);font-family:inherit;font-weight:600} .mr-core rect{fill:#101310;stroke:var(--pa,#e3faa2);stroke-width:1.4} .mr-core text{font-size:11px;font-weight:800;letter-spacing:.12em;fill:var(--pa,#e3faa2)} .mr-link{stroke:#2c312c;stroke-width:1.4;fill:none} .mr-pkt{fill:var(--pa,#e3faa2);opacity:0;animation:kgPkt var(--pd,2.6s) linear infinite;animation-delay:var(--dl,0s)} .mr-flow{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px} .mr-flow span{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text-p1); border:1px solid #2c312c;border-radius:999px;padding:7px 14px;background:#121511} .mr-flow b{color:var(--pa,#e3faa2);font-weight:700} /* ============ 15 · SCALE ============ */ .sc-wrap{display:grid;grid-template-columns:1fr 90px 1.1fr;gap:0;align-items:center;max-width:1020px;margin:0 auto} .sc-orgs{display:flex;flex-direction:column;gap:12px} .sc-org{background:#141714;border:1px solid #262a26;border-radius:14px;padding:15px 18px;display:flex;align-items:center;gap:12px} .sc-org i{width:9px;height:9px;border-radius:50%;background:var(--pa,#e3faa2);flex:0 0 auto} .sc-org h4{font-size:14px;color:#eef4ee} .sc-org p{font-size:11px;color:var(--text-p2);margin:0} .sc-lines svg{width:100%;height:auto;display:block} .sc-lines path{fill:none;stroke:color-mix(in srgb,var(--pa,#e3faa2) 40%,#2c312c);stroke-width:1.4;stroke-dasharray:5 6} .sc-core{background:linear-gradient(160deg,#151915,#0e100e);border:1px solid color-mix(in srgb,var(--pa,#e3faa2) 40%,#262a26); border-radius:20px;padding:30px;text-align:center} .sc-core .pd-live{margin-bottom:14px} .sc-core h3{font-size:21px;color:#f0f6f0;margin-bottom:8px} .sc-core p{font-size:12.5px;color:var(--text-p2);line-height:1.65;margin:0 0 16px} /* ============ 16 · OUTCOMES ============ */ .oc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .oc-card{background:#141714;border:1px solid #262a26;border-radius:16px;padding:20px; transition:border-color .35s,transform .45s var(--ease)} .oc-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--pa,#e3faa2) 40%,#262a26)} .oc-card svg{width:22px;height:22px;stroke:var(--pa,#e3faa2);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px} .oc-card h4{font-size:13.5px;color:#eef4ee;margin-bottom:6px} .oc-card p{font-size:11.5px;color:var(--text-p2);line-height:1.55;margin:0} /* ============ 18 · MOBILE ============ */ .mb-row{display:flex;gap:26px;justify-content:center;align-items:flex-start;flex-wrap:wrap} .mb-phone{width:236px;flex:0 0 auto} .mb-frame{border:1px solid #2c312c;border-radius:30px;background:#0c0e0c;padding:12px; box-shadow:var(--shadow-dark);animation:mbFloat 5.5s ease-in-out infinite;animation-delay:var(--fd,0s)} @keyframes mbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} .mb-notch{width:70px;height:5px;border-radius:3px;background:#232723;margin:0 auto 10px} .mb-screen{border-radius:18px;background:#121511;border:1px solid #22261f;padding:12px;min-height:330px} .mb-screen h6{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-p2);margin-bottom:10px} .mb-cap{text-align:center;font-size:12.5px;color:var(--text-p1);margin-top:14px;font-weight:600} .mb-crow{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid #22261f;border-radius:10px;margin-bottom:8px;font-size:10px;color:var(--text-p1)} .mb-crow .ls-dot{width:6px;height:6px} .mb-mini{display:flex;justify-content:space-between;background:#141714;border:1px solid #22261f;border-radius:9px;padding:8px 9px;margin-bottom:7px;font-size:9.5px;color:var(--text-p2)} .mb-mini b{color:var(--pa,#e3faa2);font-size:11px} /* ============ 19 · AI-READY ============ */ .ai-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .ai-card{position:relative;background:#141714;border:1px solid #262a26;border-radius:16px;padding:20px;padding-top:38px; transition:border-color .35s,transform .45s var(--ease)} .ai-card:hover{transform:translateY(-4px);border-color:#374037} .ai-card svg{width:21px;height:21px;stroke:var(--pa,#e3faa2);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:11px} .ai-card h4{font-size:13.5px;color:#eef4ee;margin-bottom:6px} .ai-card p{font-size:11.5px;color:var(--text-p2);line-height:1.55;margin:0} .ai-badge{position:absolute;top:14px;inset-inline-end:14px;font-size:8px;letter-spacing:.1em;text-transform:uppercase; color:var(--pa,#e3faa2);border:1px dashed color-mix(in srgb,var(--pa,#e3faa2) 45%,transparent); border-radius:999px;padding:3px 9px} /* ============ 21 · BUILDER BAND ============ */ .bb-band{display:flex;justify-content:space-between;align-items:center;gap:34px;flex-wrap:wrap; background:linear-gradient(140deg,#161a16,#0e100e);border:1px solid #2a2e2a;border-radius:26px;padding:44px} .bb-band h2{font-size:clamp(26px,3.4vw,40px);color:#f0f6f0;margin-bottom:10px} .bb-band p{font-size:15px;color:var(--text-p2);max-width:52ch;line-height:1.6;margin:0} .bb-ctas{display:flex;flex-direction:column;gap:12px;flex:0 0 auto} /* ============ 22 · CASE STUDY ============ */ .cs-visual{min-height:380px;display:flex;align-items:center;justify-content:center;overflow:hidden} .cs-ch-num{position:absolute;top:14px;inset-inline-start:20px;font-size:64px;font-weight:800; color:transparent;-webkit-text-stroke:1px #2c312c;line-height:1;transition:.4s} .cs-art{width:100%;height:100%;position:absolute;inset:0} .cs-scene{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.96); transition:opacity .5s var(--ease),transform .5s var(--ease)} .cs-scene.on{opacity:1;transform:none} .cs-scene svg{width:min(380px,80%);height:auto} /* ============ 25 · FINALE ============ */ .fn-wrap{width:min(560px,88vw);margin:0 auto 6px;transform:scale(1.09);transform-origin:center 60%} .pd-finale.fn-on .fn-wrap{transform:scale(1);transition:transform 3s var(--ease)} .fn-live{font-size:10px;letter-spacing:.22em;color:var(--pa,#e3faa2);margin:0 0 26px;text-transform:uppercase; display:flex;align-items:center;justify-content:center;gap:8px} .fn-live::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--pa,#e3faa2); animation:pdPulse 1.8s ease-in-out infinite} .pd-finale.fn-on .fn-core-pulse{animation:fnPulse 1.6s var(--ease) 1} @keyframes fnPulse{0%{stroke-opacity:.2}35%{stroke-opacity:1;stroke-width:2.6}100%{stroke-opacity:.2}} /* ============ RESPONSIVE ============ */ @media (max-width:960px){ .ch-grid{grid-template-columns:1fr 1fr} .lx-grid{grid-template-columns:1fr 1fr} .ad-kpis{grid-template-columns:repeat(2,1fr)} .an-grid{grid-template-columns:repeat(2,1fr)} .oc-grid,.ai-grid{grid-template-columns:repeat(2,1fr)} .cm-wrap{grid-template-columns:1fr} .ix-mount{grid-template-columns:1fr;gap:14px} .ix-beam{display:none} .sc-wrap{grid-template-columns:1fr;gap:18px} .sc-lines{display:none} } @media (max-width:860px){ .nt-wrap{grid-template-columns:1fr;gap:28px} .nt-feed{margin-inline-start:0;max-width:none} .cf-mount{grid-template-columns:1fr} .ls-visual{min-height:320px} .cs-visual{min-height:300px} .bb-band{padding:30px} .bb-ctas{width:100%} .bb-ctas .btn{width:100%;justify-content:center} .ad-flow{grid-template-columns:1fr;gap:10px} .ad-link{height:26px;width:2px;margin:0 auto; background:repeating-linear-gradient(180deg,var(--pa,#e3faa2) 0 6px,transparent 6px 12px)} } @media (max-width:560px){ .ch-grid,.lx-grid,.an-grid,.oc-grid,.ai-grid{grid-template-columns:1fr} .as-weak{grid-template-columns:1fr} .as-step i{width:40px;height:40px;font-size:9px} .as-step span{font-size:8.5px} .as-flow::before{top:20px} .ad-kpis{grid-template-columns:1fr 1fr} .mb-phone{width:min(236px,80vw)} } /* ============ REDUCED MOTION ============ */ @media (prefers-reduced-motion: reduce){ .hd .hd-el{opacity:1;transform:none;animation:none} .hd-live-dot,.fn-live::before,.lj-halo,.kg-pulse{animation:none} .lj-node.weak rect{animation:none} .lj-edge,.lj-node,.kg-edge,.kg-node,.ct-edge,.ct-node{transition:none} .kg-pkt,.mr-pkt{animation:none;opacity:0} .kg-pkt.on,.mr-pkt{opacity:0} .ad-link{animation:none} .mb-frame{animation:none} .ls-mock{transition:none} .ls-mock.on{opacity:1;transform:none} .ix-ev.new,.nt-item.in{animation:none} .ix-beam u{transition:none} .cf-cert{opacity:1;transform:none;transition:none} .cf-cert.on .cf-sheen{display:none} .cf-done{opacity:1;transform:none;transition:none} .cs-scene{transition:none} .fn-wrap{transform:none} .pd-finale.fn-on .fn-core-pulse{animation:none} .ch-art .morph{transition:none} .ch-grid .a-dot,.ch-grid .a-bar,.ch-grid .a-line,.ch-grid .a-fade, .ch-grid .a-pop,.ch-grid .a-scalex{transition:none} .hd-bar,.hd-ring,.ct-edge,.ct-node,.lj-edge,.lj-node rect,.lj-node,.kg-edge,.kg-node, .lx-panel,.ix-act,.cf-ring circle,.as-wk .ls-bar i{transition:none} }