:root{
  --bg:#06111d; --panel:#0a1928; --panel2:#0c2031; --line:#1b3850;
  --gold:#efc366; --gold2:#bd8d34; --text:#f5f1e9; --muted:#8da3b6;
  --green:#3bd792; --blue:#3f8df7; --red:#e65b64; --amber:#d6a644;
  --radius:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text); font-family:"Segoe UI",Tahoma,Arial,sans-serif;
  background:radial-gradient(circle at 70% 0,#173044 0,transparent 24%),linear-gradient(#07131f,#06111d);
  background-attachment:fixed; min-height:100vh;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
button{font:inherit}
a{color:var(--gold)}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px}

.skipLink{position:absolute;right:-9999px;top:0;background:var(--gold);color:#161006;padding:10px 16px;z-index:100}
.skipLink:focus{right:12px;top:12px}
.srOnly{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* ---------------- header ---------------- */
.top{
  min-height:74px; display:flex; align-items:center; gap:18px; justify-content:space-between;
  padding:12px 4%; border-bottom:1px solid #173047; background:#071421e6;
  position:sticky; top:0; z-index:30; backdrop-filter:blur(12px); flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:12px}
.mark{font-size:34px;color:var(--gold);font-weight:900;transform:skew(-12deg);line-height:1}
.brand b{font-size:21px}
.brand small{display:block;color:var(--gold);letter-spacing:3px;font-size:9px;text-align:center}
.nav{display:flex;gap:22px;font-size:12.5px;flex-wrap:wrap}
.nav a{cursor:pointer;color:#dbe3e9;text-decoration:none;padding-bottom:6px;border-bottom:2px solid transparent}
.nav a:hover{color:var(--gold)}
.nav a.active{color:var(--gold);border-bottom-color:var(--gold)}
.topRight{display:flex;align-items:center;gap:12px}
.userBtn{display:flex;align-items:center;gap:10px;border:0;background:transparent;color:var(--muted);font-size:11.5px;cursor:pointer}
.userBtn:hover{color:var(--gold)}
.avatar{width:34px;height:34px;border-radius:50%;background:#263d52;display:grid;place-items:center;font-size:11px;color:#dbe3e9}
.healthBadge{font-size:10px;padding:5px 9px;border-radius:99px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.healthBadge.ok{color:var(--green);border-color:#1b6b4c}
.healthBadge.bad{color:#ff9ba1;border-color:#6d3038}
.navToggle{display:none;background:transparent;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:8px 12px;cursor:pointer}

main{max-width:1480px;margin:auto;padding:0 20px 32px}

/* ---------------- hero ---------------- */
.hero{min-height:420px;display:grid;grid-template-columns:44% 56%;border-bottom:1px solid #173047;overflow:hidden}
.copy{padding:50px 30px 30px 14px}
.logoBig{display:flex;gap:14px;align-items:center}
.logoBig .mark{font-size:64px}
.logoBig h1{font-size:44px;margin:0;color:#f1cf83}
.logoBig em{display:block;font-style:normal;letter-spacing:7px;color:var(--gold);font-size:17px}
.copy h2{font-size:24px;margin:18px 0 8px}
.copy .en{direction:ltr;text-align:right;color:#d8e0e7;font-size:14px;margin:0 0 10px}
.copy p{color:#c3ccd3;line-height:1.9;font-size:14px}
.btns{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.btn{padding:12px 20px;border-radius:10px;border:1px solid #8495a3;background:transparent;color:#fff;cursor:pointer;transition:border-color .15s,transform .15s}
.btn:hover{border-color:var(--gold);transform:translateY(-1px)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn.primary{background:linear-gradient(135deg,#f3cf7c,#d8a847);border:none;color:#161006;font-weight:700}
.btn.wide{width:100%;margin-top:16px}

.mountain{position:relative;min-height:420px;background:
  radial-gradient(circle at 73% 22%,#e5bd76 0,#8e7554 5%,transparent 22%),
  linear-gradient(155deg,transparent 0 37%,#14283a 38% 51%,#0b1c2a 52% 100%)}
.mountain:before{content:"";position:absolute;inset:0;background:linear-gradient(165deg,transparent 48%,#0a1723 49% 100%);
  clip-path:polygon(0 100%,17% 62%,31% 73%,53% 30%,67% 57%,78% 37%,100% 100%)}
.path{position:absolute;left:47%;top:86px;width:240px;height:300px;border-left:5px solid var(--gold);border-radius:50% 0 0 50%;transform:rotate(17deg);filter:drop-shadow(0 0 8px #efc36699)}
.heroWords{position:absolute;right:9%;top:80px;font-size:24px;line-height:1.6;color:#08121b;font-weight:700}
.caption{position:absolute;right:11%;bottom:80px;color:#e8e1d4}
.stage{position:absolute;color:#f1cf83;font-size:12px}
.s1{left:38%;bottom:68px}.s2{left:48%;bottom:142px}.s3{left:57%;bottom:216px}.s4{left:63%;top:108px}

/* ---------------- features ---------------- */
.features{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;padding:22px 0}
.feature{min-height:126px;background:linear-gradient(#0b1b2a,#081723);border:1px solid var(--line);
  padding:20px 12px;text-align:center;color:var(--text);cursor:pointer;border-radius:var(--radius);transition:border-color .15s,transform .15s}
.feature:hover{border-color:var(--gold);transform:translateY(-2px)}
.feature .ico{color:var(--gold);font-size:26px;display:block}
.feature b{display:block;margin:10px 0 5px;font-size:13px}
.feature small{color:var(--muted);font-size:11px}

/* ---------------- layout / cards ---------------- */
.layout{display:grid;grid-template-columns:290px 1fr;gap:16px}
.card{background:linear-gradient(145deg,#0b1d2c,#081723);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.card h3{font-size:14px;margin:0 0 14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.demoTag{font-size:9px;padding:3px 7px;border-radius:99px;border:1px solid #4a5f74;color:var(--muted);font-weight:400}
.account .row{display:flex;justify-content:space-between;border-bottom:1px solid #173047;padding:10px 0;font-size:12.5px}
.account .row span:first-child{color:var(--muted)}
.stable{padding:12px;border:1px solid #16885e;background:#0d493b55;border-radius:9px;color:var(--green);margin:14px 0;font-size:12.5px}
.bankbtn{width:100%;border:1px solid var(--gold);color:#f5dfae;background:transparent;padding:12px;border-radius:9px;cursor:pointer}
.bankbtn:hover{background:#efc3661a}

.content{display:grid;gap:16px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stat{display:flex;align-items:center;gap:13px}
.bubble{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:19px;background:#1c4f8d;flex-shrink:0}
.stats .stat:nth-child(2) .bubble{background:#17704f}
.stats .stat:nth-child(3) .bubble{background:#725a22}
.stats .stat:nth-child(4) .bubble{background:#762d38}
.stat strong{font-size:23px}
.stat small{display:block;color:var(--muted);font-size:11px}

.mid{display:grid;grid-template-columns:1.25fr 1fr;gap:16px}
.chart{position:relative;padding-bottom:46px}
.chart svg{width:100%;height:160px;display:block}
.chartLabels{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;margin-top:8px}

.opp{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid #173047;align-items:center}
.oppDelete{background:none;border:1px solid #3a4f5f;color:var(--muted,#8aa1b3);border-radius:8px;
  width:26px;height:26px;line-height:1;cursor:pointer;flex-shrink:0}
.oppDelete:hover{background:#3a1f24;border-color:#a33;color:#ff8080}
.opp:last-child{border-bottom:0}
.thumb{width:70px;height:44px;border-radius:7px;flex-shrink:0}
.thumb.t1{background:linear-gradient(145deg,#8ab4d7,#274b68)}
.thumb.t2{background:linear-gradient(145deg,#d7d1c3,#7a684f)}
.thumb.t3{background:linear-gradient(145deg,#77a963,#214b2e)}
.opp b{font-size:11.5px}
.opp small{display:block;color:var(--muted);margin-top:4px;font-size:10.5px}
.tag{margin-right:auto;padding:5px 8px;border-radius:10px;font-size:9px;background:#207b54;color:#d9ffec;white-space:nowrap}
.tag.wait{background:#80621f;color:#fff0b3}

.pipeline{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 20px;margin-top:16px;overflow-x:auto}
.exec{display:flex;gap:12px;align-items:center;min-width:200px}
.exec small{display:block;color:var(--muted);font-size:10.5px}
.execIcon{width:52px;height:52px;border:2px solid var(--gold);border-radius:16px;display:grid;place-items:center;color:var(--gold);font-weight:700;flex-shrink:0}
.node{text-align:center;min-width:86px}
.node .n{width:40px;height:40px;margin:auto;border-radius:50%;border:1px solid #45627a;background:#112b40;display:grid;place-items:center}
.node b{font-size:10px;display:block;margin-top:6px}
.node small{font-size:8.5px;color:var(--muted)}
.arrow{color:#4e718d}

/* ---------------- sub pages ---------------- */
.page{display:none}
.page.active{display:block}
.subPage{padding:26px 0}
.pageHead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.pageHead h1{margin:0 0 6px;font-size:26px}
.pageHead p{color:var(--muted);margin:0;font-size:13px}
.headActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

.projectList{display:grid;gap:12px}
.projectItem{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:#0b1525}
.projectItem small{display:block;color:var(--muted);margin-top:5px;font-size:11.5px}
.projectBtns{display:flex;gap:8px;flex-wrap:wrap}
.empty{color:var(--muted);margin:0;padding:8px 0}

.deptGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.deptGrid button{padding:24px;border-radius:14px;border:1px solid var(--line);background:#111f34;color:#fff;cursor:pointer;font-weight:700;transition:border-color .15s,transform .15s}
.deptGrid button:hover{border-color:var(--gold);transform:translateY(-2px)}

.fieldLabel{display:block;color:var(--muted);font-size:12px;margin:12px 0 6px}
.textInput,.deptInput{width:100%;background:#091321;border:1px solid var(--line);color:#fff;border-radius:10px;padding:12px;font:inherit}
.deptInput{min-height:120px;resize:vertical}
.deptCheck{display:block;color:var(--muted);margin:10px 0 14px;font-size:12.5px}
.deptStatus{margin:14px 0 0;padding:10px 12px;border-radius:10px;background:#0f2034;color:var(--muted);font-size:12.5px}
.deptResult{white-space:pre-wrap;line-height:1.9;background:#07111f;border:1px solid var(--line);border-radius:12px;padding:16px;min-height:120px;max-height:460px;overflow:auto;margin-top:12px;font-size:13.5px}
.legalNote{padding:12px;border-right:4px solid var(--gold);background:#332f16;border-radius:10px;color:#fff1aa;font-size:12.5px;line-height:1.8;margin:0}

.bankGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}
.permissions{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.perm{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid #173047;font-size:12.5px}
.ok{color:var(--green)}
.no{color:#ff8a91}

footer{border-top:1px solid #173047;padding:20px 4%;color:#7890a4;font-size:10.5px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------------- dialogs ---------------- */
.modal{display:none;position:fixed;inset:0;background:#030a11e8;z-index:60;place-items:center;padding:18px}
.modal.show{display:grid}
.box{width:min(560px,100%);max-height:92vh;overflow:auto;background:#0b1d2c;border:1px solid #36516a;border-radius:16px;padding:24px;position:relative}
.wideBox{width:min(900px,100%)}
.box h3{margin:0 0 12px;padding-left:34px}
.box p{color:var(--muted);line-height:1.8;font-size:13px}
.subtle{font-size:12px}
.close{position:absolute;left:18px;top:16px;background:none;border:0;color:#fff;font-size:24px;cursor:pointer;line-height:1}
.infoText{white-space:pre-line}

.messages{height:min(52vh,460px);overflow:auto;border:1px solid var(--line);border-radius:12px;padding:14px;background:#07131f;display:flex;flex-direction:column;gap:10px}
.msg{max-width:88%;padding:11px 13px;border-radius:12px;line-height:1.8;font-size:13px;white-space:pre-wrap}
.msg.user{align-self:flex-start;background:#173047}
.msg.ai{align-self:flex-end;background:#132a21;border:1px solid #24543d}
.chatForm{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:12px}
.chatInput{width:100%;resize:vertical;min-height:56px;max-height:170px;border:1px solid #35516a;background:#07131f;color:#fff;border-radius:10px;padding:12px;font:inherit}
.chatTools{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:9px;color:var(--muted);font-size:11px;flex-wrap:wrap}

.aiStatus{color:var(--gold);font-size:12.5px;margin:6px 0 14px}
.aiSteps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}
.aiStep{padding:10px;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:10px;text-align:center}
.aiStep.on{border-color:var(--gold);color:#ffe5ad;background:#725a222b}
.aiResults{display:grid;gap:12px}
.aiOpp{border:1px solid var(--line);background:#081723;border-radius:12px;padding:16px}
.aiOpp.pending{opacity:.85}
.aiOppHead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.aiOppHead b{font-size:14px}
.aiScore{font-size:26px;color:var(--gold);font-weight:800;line-height:1}
.aiScore small{font-size:11px;color:var(--muted);font-weight:400}
.aiMeta{display:flex;gap:7px;flex-wrap:wrap;margin:9px 0}
.pill{font-size:9.5px;border:1px solid #35526a;border-radius:99px;padding:4px 9px;color:#c5d3de}
.pill.d-APPROVE{border-color:#1b6b4c;color:#8ff0c2}
.pill.d-TEST{border-color:#8a6c22;color:#ffdf9c}
.pill.d-WATCHLIST{border-color:#3d5a80;color:#bcd6f5}
.pill.d-REJECT{border-color:#6d3038;color:#ff9ba1}
.aiOpp p{font-size:12.5px;color:var(--muted);line-height:1.85;margin:7px 0}
.aiOpp p b{color:var(--text)}
.bars{display:grid;gap:5px;margin:10px 0}
.bar{display:grid;grid-template-columns:96px 1fr 30px;gap:8px;align-items:center;font-size:10.5px;color:var(--muted)}
.barTrack{height:5px;border-radius:99px;background:#122436;overflow:hidden}
.barFill{height:100%;background:linear-gradient(90deg,#3bd792,#efc366)}
.spin{display:inline-block;width:13px;height:13px;border:2px solid #35526a;border-top-color:var(--gold);border-radius:50%;animation:sp .8s linear infinite;vertical-align:-2px;margin-left:7px}
@keyframes sp{to{transform:rotate(360deg)}}
.aiError{color:#ff9ba1;border:1px solid #6d3038;background:#3b171c;padding:12px;border-radius:8px;font-size:12.5px}
.noteList{margin:6px 0 0;padding-right:18px;color:#ffdf9c;font-size:11.5px;line-height:1.8}

/* ---------------- responsive ---------------- */
@media(max-width:1000px){
  .features{grid-template-columns:repeat(3,1fr)}
  .layout{grid-template-columns:1fr}
  .mid{grid-template-columns:1fr}
}
@media(max-width:820px){
  .navToggle{display:block;order:2}
  .topRight{order:3}
  .nav{display:none;order:4;width:100%;flex-direction:column;gap:0;padding-top:8px;border-top:1px solid var(--line)}
  .nav.open{display:flex}
  .nav a{padding:12px 4px;border-bottom:1px solid #12283c}
  .nav a.active{border-bottom-color:#12283c}
  .hero{grid-template-columns:1fr}
  .mountain{min-height:300px}
  .copy{padding:32px 10px}
  .logoBig h1{font-size:36px}
  .stats,.bankGrid{grid-template-columns:repeat(2,1fr)}
  .permissions,.deptGrid{grid-template-columns:1fr}
  .aiSteps{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .features{grid-template-columns:repeat(2,1fr)}
  .chatForm{grid-template-columns:1fr}
  .projectItem{flex-direction:column;align-items:flex-start}
  .bar{grid-template-columns:80px 1fr 28px}
}