/* ============================================================ CODESTAN · REAL ESTATE MANAGEMENT — page-unique visuals Motion identity: architectural network — grid lines, building silhouettes, connection paths drawing, pipeline movement. Shared product classes live in css/product.css (frozen). Accent: --pa = #9df0b4 (set on by js/realestate.js) ============================================================ */ /* ---------- 01 · HERO command center ---------- */ .re-hero-dash svg{width:100%;height:auto;display:block} .re-hero-dash .re-cell{fill:#12160f;stroke:#262a26;transition:fill .5s} .re-hero-dash .re-cell.lit{fill:color-mix(in srgb,var(--pa) 14%,#0e120e);stroke:color-mix(in srgb,var(--pa) 45%,#262a26)} .re-hero-dash .re-scan{stroke:var(--pa);opacity:.35} /* ---------- 02 · DIGITAL PROPERTY NETWORK ---------- */ .re-net-visual{padding:0;overflow:hidden} .re-net-visual svg{width:100%;height:auto;display:block} .re-net-grid line{stroke:#1c201c;stroke-width:1} .re-bldg{fill:#141814;stroke:#232823;transition:opacity .6s var(--ease),transform .6s var(--ease)} .re-bldg.up{opacity:1;transform:none} .re-net-link{fill:none;stroke:color-mix(in srgb,var(--pa) 70%,#ffffff);stroke-width:1.6; stroke-linecap:round;stroke-dasharray:100;transition:stroke-dashoffset .12s linear} .re-net-node circle{fill:#101310;stroke:#2c322c;stroke-width:1.4;transition:stroke .4s,fill .4s} .re-net-node text{font-size:9.5px;fill:#8a978a;text-anchor:middle;transition:fill .4s} .re-net-node.on circle{stroke:var(--pa);fill:color-mix(in srgb,var(--pa) 16%,#101310)} .re-net-node.on text{fill:var(--pa)} .re-net-chip rect{fill:#12160f;stroke:#2c322c;transition:stroke .5s} .re-net-chip text{font-size:8.5px;fill:#9aa89a;text-anchor:middle;letter-spacing:.08em} .re-net-chip.docked rect{stroke:color-mix(in srgb,var(--pa) 55%,#2c322c)} .re-net-analytics{transition:opacity .8s var(--ease)} /* ---------- 03 · PROPERTY JOURNEY ---------- */ .re-j-visual{display:flex;flex-direction:column;gap:14px} .re-j-asset{display:flex;align-items:center;gap:12px;background:#0d100d;border:1px solid color-mix(in srgb,var(--pa) 40%,#262a26); border-radius:14px;padding:12px 16px;box-shadow:0 10px 30px -18px color-mix(in srgb,var(--pa) 60%,transparent)} .re-j-asset svg{width:22px;height:22px;stroke:var(--pa);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto} .re-j-asset strong{font-size:13px;color:#eef4ee;letter-spacing:.04em} .re-j-asset span{font-size:10.5px;color:var(--text-p2);margin-inline-start:auto;white-space:nowrap} .re-j-track{display:flex;gap:0;position:relative;height:26px;align-items:center} .re-j-track::before{content:'';position:absolute;inset-inline:8px;top:50%;height:2px;background:#232823;transform:translateY(-50%)} .re-j-track i{flex:1;position:relative;z-index:1;display:flex;justify-content:center} .re-j-track i b{width:9px;height:9px;border-radius:50%;background:#2c322c;transition:background .4s,box-shadow .4s,transform .4s var(--ease)} .re-j-track i.done b{background:var(--pa)} .re-j-track i.cur b{background:var(--pa);transform:scale(1.5);box-shadow:0 0 12px color-mix(in srgb,var(--pa) 70%,transparent)} .re-j-panels{position:relative;min-height:150px} .re-j-panel{position:absolute;inset:0;background:#0e110e;border:1px solid #262a26;border-radius:14px;padding:16px 18px; opacity:0;transform:translateY(14px) scale(.98);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none} .re-j-panel.on{opacity:1;transform:none;pointer-events:auto} .re-j-panel h5{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--pa);margin-bottom:10px} .re-j-panel .row{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--text-p2);padding:5px 0;border-bottom:1px dashed #20251f} .re-j-panel .row:last-child{border-bottom:none} .re-j-panel .row b{color:#eef4ee;font-weight:600} .re-j-steps .pd-step{padding:7px 0} .re-j-steps .pd-step p{display:none} /* ---------- 04 · CHALLENGES ---------- */ .re-chx{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .re-chx-card{background:#121511;border:1px solid #262a26;border-radius:18px;padding:22px;position:relative;overflow:hidden; transition:border-color .4s,transform .5s var(--ease)} .re-chx-card:hover{border-color:color-mix(in srgb,var(--pa) 40%,#262a26);transform:translateY(-4px)} .re-chx-from{font-size:12.5px;color:var(--text-p2);display:flex;gap:9px;align-items:flex-start} .re-chx-from i{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#3a403a;margin-top:5px} .re-chx-arrow{margin:14px 0;display:flex;align-items:center;gap:8px;color:var(--pa)} .re-chx-arrow svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .re-chx-arrow::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--pa) 45%,transparent),transparent)} [dir="rtl"] .re-chx-arrow svg{transform:scaleX(-1)} [dir="rtl"] .re-chx-arrow::after{background:linear-gradient(-90deg,color-mix(in srgb,var(--pa) 45%,transparent),transparent)} .re-chx-to{font-size:15.5px;font-weight:700;color:#eef4ee;display:flex;gap:9px;align-items:flex-start;line-height:1.35} .re-chx-to i{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--pa);margin-top:7px;box-shadow:0 0 10px color-mix(in srgb,var(--pa) 60%,transparent)} .re-chx-card p{font-size:12px;color:var(--text-p2);line-height:1.6;margin:12px 0 0} /* ---------- 05 · PROPERTY MANAGEMENT ---------- */ .re-pm{display:grid;grid-template-columns:1.25fr .85fr;gap:18px;align-items:start} .re-pm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .re-pm-card{background:#12160f;border:1px solid #262a26;border-radius:16px;padding:15px;cursor:pointer;text-align:start;font:inherit; transition:border-color .35s,transform .4s var(--ease)} .re-pm-card:hover{transform:translateY(-3px);border-color:#39423a} .re-pm-card.on{border-color:color-mix(in srgb,var(--pa) 60%,#262a26);background:color-mix(in srgb,var(--pa) 6%,#12160f)} .re-pm-card svg{width:20px;height:20px;stroke:var(--pa);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:9px} .re-pm-card h4{font-size:12.5px;color:#eef4ee;margin-bottom:5px} .re-pm-card small{font-size:10px;color:var(--text-p2);display:block} .re-pm-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-inline-end:5px;vertical-align:1px} .re-pm-dot.av{background:var(--pa)}.re-pm-dot.rsv{background:#e8c47a}.re-pm-dot.sld{background:#6f7d6f} .re-pm-detail{position:sticky;top:96px;background:#10130f;border:1px solid #2a302a;border-radius:18px;padding:22px} .re-pm-detail h3{font-size:16px;color:#eef4ee;margin-bottom:3px} .re-pm-detail .re-pm-loc{font-size:11.5px;color:var(--text-p2);margin-bottom:16px} .re-pm-detail .row{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--text-p2);padding:8px 0;border-bottom:1px dashed #20251f} .re-pm-detail .row b{color:#eef4ee;font-weight:600;text-align:end} .re-pm-detail .row b.accent{color:var(--pa)} .re-pm-badge{display:inline-block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--pa); border:1px solid color-mix(in srgb,var(--pa) 40%,transparent);border-radius:999px;padding:4px 11px;margin-bottom:14px; background:color-mix(in srgb,var(--pa) 8%,transparent)} /* ---------- 06 · LISTING MANAGEMENT ---------- */ .re-lm-flow{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:34px} .re-lm-step{background:#12160f;border:1px solid #262a26;border-radius:13px;padding:13px 12px;text-align:center;position:relative; transition:border-color .4s,background .4s} .re-lm-step.on{border-color:color-mix(in srgb,var(--pa) 55%,#262a26);background:color-mix(in srgb,var(--pa) 7%,#12160f)} .re-lm-step em{display:block;font-style:normal;font-size:9px;letter-spacing:.1em;color:var(--pa);margin-bottom:5px} .re-lm-step span{font-size:11px;color:var(--text-p1);line-height:1.35;display:block} .re-lm-stage{display:grid;grid-template-columns:1fr;gap:16px;max-width:460px;margin:0 auto} .re-lm-card{background:#10130f;border:1px solid #2a302a;border-radius:18px;padding:20px;transition:border-color .5s,box-shadow .5s} .re-lm-card h4{font-size:14.5px;color:#eef4ee;margin-bottom:4px} .re-lm-card small{font-size:11px;color:var(--text-p2);display:block;margin-bottom:14px} .re-lm-card .row{display:flex;justify-content:space-between;font-size:12px;color:var(--text-p2);padding:6px 0;border-bottom:1px dashed #20251f} .re-lm-card .row b{color:#eef4ee;font-weight:600} .re-lm-card .re-lm-status{font-weight:700;transition:color .4s} .re-lm-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .re-lm-chips span{font-size:10.5px;padding:6px 13px;border-radius:999px;border:1px solid #2c322c;background:#12160f;color:var(--text-p1);transition:.4s} .re-lm-chips span.on{border-color:var(--pa);color:var(--pa);background:color-mix(in srgb,var(--pa) 9%,transparent)} /* ---------- 07 · LEAD PIPELINE ---------- */ .re-ld-board{position:relative;direction:ltr;background:#0e110e;border:1px solid #262a26;border-radius:20px;padding:16px; overflow-x:auto;max-width:1072px;margin-inline:auto} .re-ld-cols{display:grid;grid-template-columns:repeat(8,minmax(120px,1fr));gap:10px;min-width:1040px} .re-ld-col h4{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-p2);text-align:center; padding:7px 4px;border-bottom:1px solid #232823;margin-bottom:8px} .re-ld-col h4 b{color:var(--pa);font-weight:700;margin-inline-start:4px} .re-ld-slot{height:52px;border-radius:10px;border:1px dashed #22271f;margin-bottom:8px} .re-ld-chips{position:absolute;inset:0;pointer-events:none;min-width:1040px} .re-ld-chip{position:absolute;width:calc((100% - 102px)/8 - 8px);background:#141a12;border:1px solid color-mix(in srgb,var(--pa) 35%,#262a26); border-radius:10px;padding:6px 8px;font-size:9.5px;color:#dfe9df;line-height:1.4; transition:transform 1.1s var(--ease),opacity .5s;box-shadow:0 6px 18px -10px rgba(0,0,0,.7)} .re-ld-chip small{display:block;font-size:8px;color:var(--text-p2)} .re-ld-chip.won{border-color:var(--pa);background:color-mix(in srgb,var(--pa) 12%,#141a12)} .re-ld-chip.lost{border-color:#5a4a4a;opacity:.45} /* ---------- 08 · AGENT MANAGEMENT ---------- */ .re-ag{display:grid;grid-template-columns:.95fr 1.05fr;gap:18px;align-items:start} .re-ag-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} .re-ag-flow{background:#0e110e;border:1px solid #262a26;border-radius:20px;padding:22px} .re-ag-flow h4{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-p2);margin-bottom:18px} .re-ag-track{display:flex;align-items:center;justify-content:space-between;position:relative;margin-bottom:22px} .re-ag-track::before{content:'';position:absolute;inset-inline:18px;top:50%;height:2px;background:#232823;transform:translateY(-50%)} .re-ag-node{position:relative;z-index:1;width:34px;height:34px;border-radius:50%;background:#101310;border:1px solid #2c322c; display:grid;place-items:center;transition:border-color .4s,background .4s} .re-ag-node svg{width:15px;height:15px;stroke:var(--text-p2);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s} .re-ag-node.on{border-color:var(--pa);background:color-mix(in srgb,var(--pa) 12%,#101310)} .re-ag-node.on svg{stroke:var(--pa)} .re-ag-pulse{position:absolute;top:50%;width:10px;height:10px;border-radius:50%;background:var(--pa);z-index:2; transform:translate(-50%,-50%);box-shadow:0 0 12px var(--pa);transition:inset-inline-start 1s var(--ease)} .re-ag-labels{display:flex;justify-content:space-between;font-size:9px;color:var(--text-p2);text-align:center} .re-ag-labels span{width:14%} .re-ag-log{display:flex;flex-direction:column;gap:8px} .re-ag-log div{font-size:11.5px;color:var(--text-p1);background:#12160f;border:1px solid #232823;border-radius:10px;padding:9px 12px; display:flex;justify-content:space-between;gap:10px} .re-ag-log div b{color:var(--pa);font-weight:600} /* ---------- 09 · VIEWINGS ---------- */ .re-vw{display:grid;grid-template-columns:1.1fr .9fr .9fr 1.1fr;gap:14px;align-items:stretch} .re-vw-pane{background:#10130f;border:1px solid #262a26;border-radius:16px;padding:16px;transition:border-color .5s} .re-vw-pane.hot{border-color:color-mix(in srgb,var(--pa) 55%,#262a26)} .re-vw-pane h4{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-p2);margin-bottom:12px} .re-vw-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px} .re-vw-cal i{aspect-ratio:1;border-radius:6px;background:#141814;border:1px solid #22271f;display:grid;place-items:center; font-size:8.5px;color:var(--text-ph);font-style:normal;transition:.4s} .re-vw-cal i.hot{background:color-mix(in srgb,var(--pa) 20%,#141814);border-color:var(--pa);color:var(--pa)} .re-vw-prop{border:1px solid #232823;border-radius:12px;padding:12px} .re-vw-prop svg{width:18px;height:18px;stroke:var(--pa);fill:none;stroke-width:1.6;margin-bottom:8px} .re-vw-prop strong{font-size:12px;color:#eef4ee;display:block;margin-bottom:4px} .re-vw-prop span{font-size:10.5px;color:var(--text-p2)} .re-vw-prop .st{display:inline-block;margin-top:8px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px; border:1px solid #2c322c;color:var(--text-p1);transition:.4s} .re-vw-prop .st.rsv{border-color:var(--pa);color:var(--pa);background:color-mix(in srgb,var(--pa) 8%,transparent)} .re-vw-rows div{font-size:10.5px;color:var(--text-p1);background:#12160f;border:1px solid #22271f;border-radius:8px;padding:7px 9px;margin-bottom:6px;transition:.4s} .re-vw-rows div.hot{border-color:var(--pa);color:var(--pa)} .re-vw-lead{border:1px solid #232823;border-radius:12px;padding:12px;font-size:11px;color:var(--text-p2)} .re-vw-lead strong{font-size:12.5px;color:#eef4ee;display:block;margin-bottom:8px} .re-vw-lead .st{display:inline-block;font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px; border:1px solid #2c322c;color:var(--text-p1);transition:.4s} .re-vw-lead .st.sch{border-color:var(--pa);color:var(--pa);background:color-mix(in srgb,var(--pa) 8%,transparent)} /* ---------- 10 · DEAL PIPELINE ---------- */ .re-dl{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;position:relative} .re-dl-stage{background:#12160f;border:1px solid #262a26;border-radius:14px;padding:16px 12px;text-align:center;position:relative; transition:border-color .5s,background .5s,transform .5s var(--ease)} .re-dl-stage.on{border-color:color-mix(in srgb,var(--pa) 55%,#262a26);background:color-mix(in srgb,var(--pa) 7%,#12160f);transform:translateY(-4px)} .re-dl-stage em{display:block;font-style:normal;font-size:16px;font-weight:700;color:var(--text-ph);margin-bottom:6px;transition:color .5s} .re-dl-stage.on em{color:var(--pa)} .re-dl-stage span{font-size:10.5px;color:var(--text-p1);display:block;line-height:1.3} .re-dl-stage i{display:block;font-size:9px;color:var(--text-ph);margin-top:6px;font-style:normal} /* ---------- 11 · CONTRACTS & PAYMENTS ---------- */ .re-ct-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:30px} .re-ct-node{background:#12160f;border:1px solid #262a26;border-radius:14px;padding:16px 12px;text-align:center;transition:border-color .5s,background .5s} .re-ct-node.on{border-color:color-mix(in srgb,var(--pa) 55%,#262a26);background:color-mix(in srgb,var(--pa) 7%,#12160f)} .re-ct-node svg{width:20px;height:20px;stroke:var(--text-p2);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:8px;transition:stroke .4s} .re-ct-node.on svg{stroke:var(--pa)} .re-ct-node span{font-size:11px;color:var(--text-p1);display:block} .re-ct-lists{display:grid;grid-template-columns:repeat(5,1fr);gap:12px} .re-ct-list{background:#10130f;border:1px solid #262a26;border-radius:16px;padding:15px} .re-ct-list h4{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--pa);margin-bottom:10px} .re-ct-list div{font-size:10.5px;color:var(--text-p1);padding:7px 0;border-bottom:1px dashed #20251f;display:flex;justify-content:space-between;gap:8px} .re-ct-list div:last-child{border-bottom:none} .re-ct-list div small{color:var(--text-ph);font-size:9px} /* ---------- 12 · COMMAND CENTER ---------- */ .re-cc{background:#0c0f0c;border:1px solid #262a26;border-radius:22px;padding:22px; background-image:linear-gradient(#151a1510 1px,transparent 1px),linear-gradient(90deg,#151a1510 1px,transparent 1px); background-size:34px 34px} .re-cc-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px} .re-cc-kpi{background:#12160f;border:1px solid #232823;border-radius:14px;padding:14px;transition:border-color .4s} .re-cc-kpi.tick{border-color:color-mix(in srgb,var(--pa) 45%,#232823)} .re-cc-kpi strong{font-size:19px;color:var(--pa);display:block;line-height:1.1;font-variation-settings:'wdth' 104} .re-cc-kpi span{font-size:9.5px;color:var(--text-p2);display:block;margin-top:5px;line-height:1.3} .re-cc-kpi .bars{display:flex;gap:2px;align-items:flex-end;height:14px;margin-top:8px} .re-cc-kpi .bars i{flex:1;background:color-mix(in srgb,var(--pa) 45%,transparent);border-radius:2px;transition:height .8s var(--ease)} /* ---------- 13 · MODULES view ---------- */ .re-mod-view{background:#10130f;border:1px solid #2a302a;border-radius:20px;padding:26px;min-height:300px} .re-mod-view .ic{width:46px;height:46px;border-radius:13px;background:color-mix(in srgb,var(--pa) 10%,transparent); border:1px solid color-mix(in srgb,var(--pa) 35%,transparent);display:grid;place-items:center;margin-bottom:16px} .re-mod-view .ic svg{width:21px;height:21px;stroke:var(--pa);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .re-mod-view h3{font-size:19px;color:#eef4ee;margin-bottom:8px} .re-mod-view p{font-size:13px;color:var(--text-p2);line-height:1.65;margin-bottom:16px} .re-mod-view .pd-chips span{border-color:#2c322c;background:#12160f} /* ---------- 14 · MULTI-BRANCH ---------- */ .re-mb{background:#0c0f0c;border:1px solid #262a26;border-radius:22px;padding:10px;overflow:hidden} .re-mb svg{width:100%;height:auto;display:block} .re-mb .br{fill:#12160f;stroke:#2c322c} .re-mb .br-t{font-size:10px;fill:#dfe9df;text-anchor:middle} .re-mb .br-s{font-size:7.5px;fill:#8a978a;text-anchor:middle} .re-mb .lnk{stroke:color-mix(in srgb,var(--pa) 55%,transparent);stroke-width:1.5;fill:none;stroke-dasharray:5 6; animation:reFlow 2.6s linear infinite} .re-mb .core{fill:color-mix(in srgb,var(--pa) 10%,#101310);stroke:var(--pa)} .re-mb .core-t{font-size:11px;fill:var(--pa);text-anchor:middle;font-weight:700} @keyframes reFlow{to{stroke-dashoffset:-22}} /* ---------- 15 · OUTCOMES ---------- */ .re-out{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .re-out-card{background:#12160f;border:1px solid #262a26;border-radius:16px;padding:20px;transition:border-color .4s,transform .5s var(--ease)} .re-out-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--pa) 40%,#262a26)} .re-out-card svg{width:20px;height:20px;stroke:var(--pa);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px} .re-out-card h4{font-size:14px;color:#eef4ee;margin-bottom:7px} .re-out-card p{font-size:11.5px;color:var(--text-p2);line-height:1.55;margin:0} /* ---------- 16 · ANALYTICS ---------- */ .re-an-visual{padding:14px} .re-an-visual svg{width:100%;height:auto;display:block} .re-an-g rect,.re-an-g path,.re-an-g circle{transition:none} .re-an-g text{font-size:8px;fill:#8a978a;letter-spacing:.06em} .re-an-g .ttl{font-size:9px;fill:#dfe9df;font-weight:700} .re-an-bar{fill:color-mix(in srgb,var(--pa) 55%,#1a201a)} .re-an-line{fill:none;stroke:var(--pa);stroke-width:1.6;stroke-linecap:round} .re-an-arc{fill:none;stroke:var(--pa);stroke-width:5;stroke-linecap:round} .re-an-arc-bg{fill:none;stroke:#232823;stroke-width:5} .re-an-demo{margin-bottom:60px} .re-an-steps .pd-step{padding:7px 0} .re-an-steps .pd-step p{display:none} /* ---------- 17 · NOTIFICATIONS ---------- */ .re-ntf{max-width:620px;margin:0 auto;display:flex;flex-direction:column;gap:10px;min-height:340px} .re-ntf-item{display:flex;align-items:center;gap:13px;background:#12160f;border:1px solid #262a26;border-radius:14px;padding:13px 16px; opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)} .re-ntf-item.in{opacity:1;transform:none} .re-ntf-item.old{opacity:.45} .re-ntf-ic{flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--pa) 9%,transparent); border:1px solid color-mix(in srgb,var(--pa) 30%,transparent);display:grid;place-items:center} .re-ntf-ic svg{width:16px;height:16px;stroke:var(--pa);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .re-ntf-item strong{font-size:13px;color:#eef4ee;display:block} .re-ntf-item small{font-size:10.5px;color:var(--text-p2)} .re-ntf-item time{margin-inline-start:auto;font-size:9.5px;color:var(--text-ph);white-space:nowrap} /* ---------- 19 · MOBILE ---------- */ .re-mob{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:900px;margin:0 auto} .re-ph{background:#0d100d;border:1px solid #2a302a;border-radius:30px;padding:12px;box-shadow:0 24px 50px -30px rgba(0,0,0,.8)} .re-ph:nth-child(2){transform:translateY(22px)} .re-ph-screen{background:#12160f;border:1px solid #232823;border-radius:22px;padding:14px;min-height:330px;display:flex;flex-direction:column;gap:9px} .re-ph-notch{width:52px;height:5px;border-radius:3px;background:#2c322c;margin:0 auto 4px} .re-ph-title{font-size:11px;font-weight:700;color:var(--pa);text-align:center} .re-ph-row{display:flex;align-items:center;gap:8px;background:#161b14;border:1px solid #232823;border-radius:9px;padding:8px 9px} .re-ph-row i{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--pa)} .re-ph-row span{font-size:9.5px;color:#dfe9df} .re-ph-row small{margin-inline-start:auto;font-size:8px;color:var(--text-ph)} .re-ph-cap{text-align:center;font-size:11.5px;color:var(--text-p1);margin-top:12px;font-weight:600} .re-ph-kpi{display:flex;justify-content:space-between;background:#161b14;border:1px solid #232823;border-radius:9px;padding:8px 10px;font-size:9.5px;color:var(--text-p2)} .re-ph-kpi b{color:var(--pa)} /* ---------- 20 · AI-READY ---------- */ .re-ai{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .re-ai-card{background:#12160f;border:1px solid #262a26;border-radius:16px;padding:20px;position:relative; transition:border-color .4s,transform .5s var(--ease)} .re-ai-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--pa) 40%,#262a26)} .re-ai-card svg{width:20px;height:20px;stroke:var(--pa);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px} .re-ai-card h4{font-size:14px;color:#eef4ee;margin-bottom:7px} .re-ai-card p{font-size:11.5px;color:var(--text-p2);line-height:1.55;margin:0 0 13px} .re-ai-badge{display:inline-block;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--pa); border:1px dashed color-mix(in srgb,var(--pa) 45%,transparent);border-radius:999px;padding:4px 10px} /* ---------- 22 · BUILDER BAND ---------- */ .re-bd{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap; background:linear-gradient(135deg,color-mix(in srgb,var(--pa) 9%,#12160f),#0e110e 60%); border:1px solid color-mix(in srgb,var(--pa) 30%,#262a26);border-radius:24px;padding:44px; position:relative;overflow:hidden} .re-bd::before{content:'';position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(color-mix(in srgb,var(--pa) 6%,transparent) 1px,transparent 1px), linear-gradient(90deg,color-mix(in srgb,var(--pa) 6%,transparent) 1px,transparent 1px); background-size:38px 38px} .re-bd>*{position:relative} .re-bd h2{font-size:clamp(24px,3vw,36px);color:#f2f7f2;margin-bottom:10px} .re-bd p{font-size:14.5px;color:var(--text-p2);max-width:52ch;line-height:1.6;margin:0} /* ---------- 23 · CASE STUDY ---------- */ .re-cs-visual{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:340px} .re-cs-art{width:min(300px,70%)} .re-cs-art svg{width:100%;height:auto;display:block} .re-cs-art.swap,.re-cs-text-swap{opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s} .re-cs-art{transition:opacity .3s,transform .3s} .re-cs-meta{font-size:11px;color:var(--text-p2);border:1px solid #2c322c;border-radius:999px;padding:7px 16px;background:#12160f} .re-cs-all{display:none;flex-direction:column;gap:16px;padding:60px 0} .re-cs-ch{background:#12160f;border:1px solid #262a26;border-radius:16px;padding:20px;display:flex;gap:16px} .re-cs-ch em{flex:0 0 auto;font-style:normal;font-size:11px;letter-spacing:.14em;color:var(--pa)} .re-cs-ch h4{font-size:15px;color:#eef4ee;margin-bottom:5px} .re-cs-ch p{font-size:12.5px;color:var(--text-p2);line-height:1.6;margin:0} /* ---------- 26 · FINALE network backdrop ---------- */ .pd-finale .re-fin-net[aria-hidden]{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5} .re-fin-net svg{width:100%;height:100%;display:block} .re-fin-net .n{fill:color-mix(in srgb,var(--pa) 30%,transparent)} .re-fin-net .l{stroke:color-mix(in srgb,var(--pa) 22%,transparent);stroke-width:1;stroke-dasharray:4 6;animation:reFlow 3.2s linear infinite} /* ---------- flat mode (mobile / reduced motion) ---------- */ body.re-flat .pd-space{height:auto!important} body.re-flat .re-j-panels{min-height:0;display:flex;flex-direction:column;gap:10px} body.re-flat .re-j-panel{position:static;opacity:1;transform:none;pointer-events:auto} body.re-flat .re-j-track{display:none} body.re-flat .re-cs-visual{display:none} body.re-flat #csSpace{display:none} body.re-flat .re-cs-all{display:flex} body.re-flat .re-ph:nth-child(2){transform:none} /* ---------- responsive ---------- */ @media (max-width:960px){ .re-chx{grid-template-columns:1fr 1fr} .re-pm{grid-template-columns:1fr} .re-pm-detail{position:static} .re-ag{grid-template-columns:1fr} .re-vw{grid-template-columns:1fr 1fr} .re-dl{grid-template-columns:repeat(4,1fr)} .re-ct-flow{grid-template-columns:repeat(3,1fr)} .re-ct-lists{grid-template-columns:repeat(3,1fr)} .re-cc-kpis{grid-template-columns:repeat(3,1fr)} .re-out,.re-ai{grid-template-columns:1fr 1fr} .re-lm-flow{grid-template-columns:repeat(3,1fr)} } @media (max-width:860px){ .re-lm-flow{grid-template-columns:1fr 1fr} .re-dl{grid-template-columns:repeat(2,1fr)} .re-ct-lists{grid-template-columns:1fr 1fr} .re-mob{grid-template-columns:1fr;max-width:340px} .re-ph:nth-child(2){transform:none} .re-bd{padding:30px} .re-j-asset span{display:none} } @media (max-width:560px){ .re-chx{grid-template-columns:1fr} .re-pm-grid{grid-template-columns:1fr 1fr} .re-vw{grid-template-columns:1fr} .re-dl{grid-template-columns:1fr 1fr} .re-ct-flow{grid-template-columns:1fr 1fr} .re-ct-lists{grid-template-columns:1fr} .re-cc-kpis{grid-template-columns:1fr 1fr} .re-out,.re-ai{grid-template-columns:1fr} .re-ag-kpis{grid-template-columns:1fr 1fr} } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce){ .re-mb .lnk,.re-fin-net .l{animation:none} .re-ld-chip,.re-j-panel,.re-ntf-item,.re-cs-art{transition:none} .re-ntf-item{opacity:1;transform:none} .re-net-link{transition:none} .re-chx-card:hover,.re-out-card:hover,.re-ai-card:hover,.re-pm-card:hover{transform:none} .re-dl-stage.on{transform:none} }