/* Madocks dark fintech design system v2: depth, glass, motion */
@property --n{syntax:'<integer>';initial-value:0;inherits:false}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
body{margin:0;background:#070708}
.m{position:relative;overflow:hidden;font-family:'IBM Plex Sans',system-ui,sans-serif;color:#e9e9ea;background:#070708;min-height:100vh;line-height:1.55}
.m *{box-sizing:border-box}
/* ambient background: drifting orange aurora + fading grid */
.m::before{content:"";position:absolute;left:0;right:0;top:0;height:980px;pointer-events:none;z-index:0;
  background:radial-gradient(600px 380px at 82% 4%,rgba(255,122,24,.22),transparent 70%),radial-gradient(520px 340px at 8% 14%,rgba(255,150,60,.10),transparent 70%),radial-gradient(700px 300px at 50% 0%,rgba(255,90,0,.08),transparent 70%);
  animation:drift 16s ease-in-out infinite alternate}
.m::after{content:"";position:absolute;left:0;right:0;top:0;height:760px;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 0%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 70% 80% at 50% 0%,#000 30%,transparent 75%)}
.m>*{position:relative;z-index:1}
.m h1,.m h2,.m h3{font-family:'Sora',sans-serif;margin:0;letter-spacing:-0.02em}
.m h1{font-size:40px;line-height:1.08}.m h2{font-size:22px}.m h3{font-size:18px}
.m p{margin:0}
.m a{color:inherit;text-decoration:none}
.m ul{margin:0;padding:0;list-style:none}
.grad{background:linear-gradient(100deg,#ffb06a,#ff7a18 45%,#ff4d00);-webkit-background-clip:text;background-clip:text;color:transparent}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;padding:20px 0}
.logo{font-family:'Sora',sans-serif;font-weight:700;font-size:22px;display:flex;align-items:center;gap:10px}
.logo i{width:30px;height:30px;border-radius:9px;background:conic-gradient(from 200deg,#ff7a18,#ffb06a,#ff4d00,#ff7a18);display:inline-block;box-shadow:0 0 22px rgba(255,122,24,.55);animation:spin 9s linear infinite}
.links{display:flex;flex-wrap:wrap;gap:8px 24px;flex:1;color:#a7a7ad;font-size:15px}
.links a{position:relative;padding:4px 0}
.links a:after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:#ff7a18;transition:width .25s}
.links a:hover:after,.links a.on:after{width:100%}
.links a.on,.links a:hover{color:#fff}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;border-radius:12px;font-weight:600;font-size:15px;border:1px solid #2e2e33;background:rgba(23,23,26,.8);color:#e9e9ea;cursor:pointer;font-family:inherit;transition:transform .2s,box-shadow .2s,border-color .2s}
.btn:hover{transform:translateY(-2px);border-color:#4a4a52}
.btn.p{border-color:#ff7a18;color:#140a02;background-image:linear-gradient(110deg,#ff7a18 38%,#ffb06a 50%,#ff7a18 62%);background-size:250% 100%;animation:shine 5s linear infinite;box-shadow:0 8px 28px -8px rgba(255,122,24,.7)}
.btn.p:hover{box-shadow:0 12px 36px -6px rgba(255,122,24,.9)}
.btn.d{background:#2a1214;border-color:#5a2227;color:#ff7a7a}
.btn.s{min-height:36px;padding:0 14px;font-size:13px;border-radius:10px}
.btn.w{width:100%}
/* surfaces */
.card{position:relative;background:linear-gradient(180deg,rgba(24,24,27,.92),rgba(16,16,18,.92));border:1px solid #242428;border-radius:18px;padding:24px;transition:transform .3s,border-color .3s,box-shadow .3s}
.card.lift:hover{transform:translateY(-4px);border-color:#4a2c14;box-shadow:0 24px 60px -24px rgba(255,122,24,.45)}
.card.hl{background:linear-gradient(160deg,rgba(40,24,12,.95),rgba(16,16,18,.95));border-color:#3a2616}
.glass{background:rgba(20,20,23,.55);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.09);border-radius:20px}
.gb{position:relative}
.gb:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from var(--ang),transparent 0 55%,#ff7a18 75%,transparent 95%);animation:rot 6s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid #2e2e33;background:rgba(18,18,20,.8);border-radius:999px;padding:3px 12px;font-size:13px;color:#a7a7ad}
.chip.g{color:#44d18d;border-color:#1f4a35;background:rgba(68,209,141,.07)}
.chip.o{color:#ff9a4a;border-color:#5a3a1a;background:rgba(255,122,24,.07)}
.chip.r{color:#ff7a7a;border-color:#5a2227;background:rgba(255,77,77,.07)}
.dot{width:8px;height:8px;border-radius:50%;background:#44d18d;animation:ping 2s infinite}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#ff7a18}
.muted{color:#a7a7ad}
.mono{font-family:'IBM Plex Mono',monospace}
.good{color:#44d18d}
.bad{color:#ff4d4d}
.org{color:#ff7a18}
/* forms */
.lbl{display:block;font-size:13px;color:#a7a7ad;margin-bottom:6px}
.inp{width:100%;min-height:46px;border-radius:12px;border:1px solid #2e2e33;background:rgba(7,7,8,.8);color:#e9e9ea;padding:0 14px;font-size:15px;font-family:inherit;transition:border-color .2s,box-shadow .2s}
textarea.inp{padding:12px 14px;min-height:120px;resize:vertical}
.inp:focus{outline:none;border-color:#ff7a18;box-shadow:0 0 0 4px rgba(255,122,24,.16)}
.form{display:flex;flex-direction:column;gap:14px}
/* layout helpers */
.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.g4{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.between{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:24px}
.sec{padding-bottom:80px}
.hr{border-top:1px solid #1c1c20}
/* product "images": generated art */
.ph,.art{position:relative;height:160px;overflow:hidden;border-bottom:1px solid #242428;background:#101012}
.art:before{content:"";position:absolute;inset:-20%;animation:drift 12s ease-in-out infinite alternate}
.art.a1:before{background:radial-gradient(circle at 30% 30%,rgba(255,122,24,.55),transparent 45%),radial-gradient(circle at 80% 80%,rgba(255,176,106,.25),transparent 40%)}
.art.a2:before{background:conic-gradient(from 90deg at 60% 50%,#1b1410,rgba(255,122,24,.5),#1b1410 60%)}
.art.a3:before{background:repeating-linear-gradient(115deg,rgba(255,122,24,.28) 0 2px,transparent 2px 14px),radial-gradient(circle at 70% 30%,rgba(255,122,24,.35),transparent 50%)}
.art.a4:before{background:radial-gradient(circle,rgba(255,122,24,.5) 1.5px,transparent 2px) 0 0/18px 18px,radial-gradient(circle at 20% 80%,rgba(255,122,24,.3),transparent 50%)}
.art svg{position:absolute;left:0;bottom:0;width:100%;height:70%}
.art .tag{position:absolute;left:14px;top:14px}
.pc{padding:0;overflow:hidden}
.pc .body{padding:20px;display:flex;flex-direction:column;gap:6px}
/* stats */
.stat,.kpi{position:relative;background:rgba(18,18,20,.9);border:1px solid #242428;border-radius:16px;padding:16px;overflow:hidden;transition:transform .3s,border-color .3s}
.stat:hover,.kpi:hover{transform:translateY(-3px);border-color:#4a2c14}
.stat.in{background:rgba(7,7,8,.8)}
.stat .k,.kpi .k{font-size:12px;color:#a7a7ad}
.stat .v,.kpi .v{font-family:'IBM Plex Mono',monospace;font-size:24px;margin-top:2px}
.kpi svg.sp{position:absolute;right:0;bottom:0;width:60%;height:46%;opacity:.9}
.count{counter-reset:n var(--n);animation:count 2.2s cubic-bezier(.2,.7,.2,1) .2s forwards}
.count:after{content:counter(n)}
/* tables & tabs */
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
th{text-align:left;color:#a7a7ad;font-weight:500;padding:10px 12px;border-bottom:1px solid #242428;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
td{padding:12px;border-bottom:1px solid #1c1c20}
tbody tr{transition:background .2s}
tbody tr:hover{background:rgba(255,122,24,.05)}
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tab{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid #2e2e33;color:#a7a7ad;font-size:14px;background:rgba(18,18,20,.6);transition:all .2s}
.tab:hover{color:#fff;border-color:#4a4a52}
.tab.on{background:rgba(255,122,24,.12);border-color:#ff7a18;color:#ff9a4a}
.ico{width:48px;height:48px;border-radius:14px;background:linear-gradient(145deg,#2a1a0e,#15100b);border:1px solid #3a2616;display:flex;align-items:center;justify-content:center;margin-bottom:14px;color:#ff7a18;font-family:'IBM Plex Mono',monospace;font-size:14px;box-shadow:0 0 24px -6px rgba(255,122,24,.5);transition:transform .3s}
.card:hover .ico{transform:rotate(-6deg) scale(1.08)}
.chk li{display:flex;gap:10px;font-size:14px;padding:5px 0}
.chk li:before{content:"\2713";color:#44d18d}
.foot{border-top:1px solid #242428;padding:28px 0;margin-top:24px}
/* app shells */
.app{display:flex;flex-wrap:wrap}
.side{flex:0 0 240px;min-width:200px;background:rgba(10,10,12,.9);border-right:1px solid #242428;padding:24px 16px;display:flex;flex-direction:column;gap:4px}
.side a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:12px;color:#a7a7ad;font-size:15px;transition:all .2s}
.side a:hover{color:#fff;background:rgba(255,255,255,.04)}
.side a.on{background:linear-gradient(90deg,rgba(255,122,24,.2),rgba(255,122,24,.04));color:#ff9a4a;box-shadow:inset 3px 0 0 #ff7a18}
.side a.logo{padding:0 12px 20px;color:#e9e9ea;background:none;box-shadow:none}
.main{flex:999 1 640px;min-width:0;padding:32px;display:flex;flex-direction:column;gap:24px}
.center{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 24px;flex-direction:column;gap:24px}
.bubble{max-width:560px;padding:12px 16px;border-radius:16px 16px 16px 4px;background:#17171a;border:1px solid #242428;font-size:15px}
.bubble.me{background:linear-gradient(145deg,#2a1a0e,#1b1410);border-color:#3a2616;align-self:flex-end;border-radius:16px 16px 4px 16px}
/* motion helpers */
.rise{animation:rise .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
.float{animation:float 5s ease-in-out infinite;animation-delay:var(--d,0s)}
.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.4s ease-out .3s forwards}
.spin{animation:spin 24s linear infinite}
.ticker{overflow:hidden;border-top:1px solid #1c1c20;border-bottom:1px solid #1c1c20;background:rgba(10,10,12,.7)}
.ticker .track{display:flex;gap:44px;width:max-content;padding:12px 0;animation:marq 38s linear infinite;font-family:'IBM Plex Mono',monospace;font-size:13px}
.ticker .track span{display:inline-flex;gap:8px;white-space:nowrap}
.bar{height:8px;border-radius:99px;background:#1c1c20;overflow:hidden}
.bar>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#ff7a18,#ffb06a);animation:grow 1.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes drift{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(2%,3%,0) scale(1.08)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rot{to{--ang:360deg}}
@keyframes shine{to{background-position:-250% 0}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(68,209,141,.6)}70%{box-shadow:0 0 0 9px rgba(68,209,141,0)}100%{box-shadow:0 0 0 0 rgba(68,209,141,0)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes count{from{--n:0}to{--n:var(--to)}}
@keyframes grow{from{width:0}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
/* ---- trading terminal ---- */
.term{display:grid;grid-template-columns:56px minmax(0,1fr) 330px;gap:12px;align-items:stretch}
@media (max-width:1100px){.term{grid-template-columns:48px minmax(0,1fr)}.term .tside{grid-column:1/-1}}
.ttools{display:flex;flex-direction:column;gap:8px;padding:10px 6px;background:rgba(14,14,16,.9);border:1px solid #242428;border-radius:16px;align-items:center}
.tbtn{width:40px;height:40px;border-radius:10px;border:1px solid transparent;background:transparent;color:#a7a7ad;font-size:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:'IBM Plex Mono',monospace;transition:all .2s}
.tbtn:hover{color:#fff;background:#1c1c20}.tbtn.on{color:#ff9a4a;background:rgba(255,122,24,.12);border-color:#5a3a1a}
.tchart{position:relative;background:#09090b;border:1px solid #242428;border-radius:16px;overflow:hidden;min-height:540px}
.tbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px;border-bottom:1px solid #1c1c20;background:rgba(14,14,16,.9)}
.tf{padding:5px 10px;border-radius:8px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:#a7a7ad;border:1px solid transparent;cursor:pointer}
.tf.on{color:#ff9a4a;border-color:#5a3a1a;background:rgba(255,122,24,.1)}
.buy{background:linear-gradient(180deg,#44d18d,#2fa86f);color:#04140c;border:0}
.sell{background:linear-gradient(180deg,#ff6a6a,#e04545);color:#1a0505;border:0}
.modalbox{width:100%;max-width:460px;border-radius:20px;background:linear-gradient(180deg,#1a1a1e,#121214);border:1px solid #2e2e33;padding:26px;box-shadow:0 30px 80px -20px #000}
.modalbox .mi{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:12px}
/* ---- market sessions ---- */
.gantt{display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px 14px;align-items:center}
.gtrack{position:relative;height:32px;border-radius:8px;background:repeating-linear-gradient(90deg,#17171b 0 calc(100%/24 - 1px),#101012 calc(100%/24 - 1px) calc(100%/24))}
.gbar{position:absolute;top:3px;bottom:3px;border-radius:7px;background:linear-gradient(90deg,#ff7a18,#ffb06a);display:flex;align-items:center;padding:0 8px;font-size:11px;color:#140a02;font-weight:600;white-space:nowrap}
.gbar.b{background:linear-gradient(90deg,#44d18d,#8be8bd)}.gbar.c{background:linear-gradient(90deg,#6aa9ff,#a8cdff)}
/* ---- hub tiles ---- */
.tile{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:18px;border:1px solid #242428;background:linear-gradient(180deg,rgba(24,24,27,.92),rgba(16,16,18,.92));transition:all .3s;position:relative;overflow:hidden;min-height:170px}
.tile:hover{transform:translateY(-4px);border-color:#4a2c14;box-shadow:0 24px 60px -24px rgba(255,122,24,.45)}
.tile .go{margin-top:auto;color:#ff9a4a;font-size:14px;font-weight:600}
.tile.lock{opacity:.6}.tile.lock:after{content:"Locked";position:absolute;right:14px;top:14px;font-size:11px;color:#a7a7ad;border:1px solid #2e2e33;border-radius:99px;padding:2px 10px}
.foot2{border-top:1px solid #242428;background:rgba(8,8,10,.8);padding:40px 0 24px;margin-top:40px}
.foot2 h4{margin:0 0 12px;font-family:'Sora',sans-serif;font-size:14px}.foot2 li{padding:4px 0;font-size:14px;color:#a7a7ad}
@media (prefers-reduced-motion:reduce){.m *,.m:before,.m:after{animation:none!important;transition:none!important}.draw{stroke-dashoffset:0}.rise{opacity:1}}
/* ---- shared nav dropdowns (layouts.mk) ---- */
.dd{position:relative;display:inline-block;padding:4px 0}
.ddm{display:none;position:absolute;left:-12px;top:100%;min-width:220px;padding:8px;border-radius:16px;background:rgba(16,16,18,.97);border:1px solid #2e2e33;box-shadow:0 24px 60px -20px #000;z-index:50;flex-direction:column;gap:2px}
.dd:hover>.ddm,.dd:focus-within>.ddm{display:flex}
.ddm a{display:block;padding:9px 12px;border-radius:10px;color:#a7a7ad;font-size:14px}
.ddm a:after{display:none}
.ddm a:hover{background:rgba(255,122,24,.1);color:#fff}
.flash{border-radius:12px;padding:10px 14px}
@media (max-width:760px){.nav{gap:12px}.links{order:3;flex-basis:100%}.m h1{font-size:32px}}
.m a.org,.m .org{color:#ff7a18}.m a.btn.p{color:#140a02}