/* CodeTrader landing — tokens match the product (dark emerald terminal style, RTL). */
:root{--bg:#050a13;--panel:#09111d;--panel2:#0c1624;--line:rgba(140,180,200,.14);--line2:rgba(140,180,200,.26);--fg:#e5edf4;--muted:#8da1b3;--em:#19d6a0;--em-soft:rgba(25,214,160,.1);--em-line:rgba(25,214,160,.4);--cy:#3cc4de;--on-em:#02140e;--amber:#e9a15f;--r:14px;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;--ui:"Vazirmatn",Tahoma,system-ui,sans-serif;color-scheme:dark}
:root[data-theme=light]{--bg:#eef3f6;--panel:#fff;--panel2:#f6f9fb;--line:rgba(15,45,65,.12);--line2:rgba(15,45,65,.22);--fg:#0b1a26;--muted:#4d6273;--em:#08906a;--em-soft:rgba(8,144,106,.1);--em-line:rgba(8,144,106,.42);--cy:#0b7f98;--on-em:#fff;--amber:#b4691f;color-scheme:light}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:76px}
body{background:var(--bg);color:var(--fg);font:15px/1.8 var(--ui);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--cy);outline-offset:3px;border-radius:6px}
.mono{font-family:var(--mono);direction:ltr;unicode-bidi:isolate}
.wrap{max-width:1160px;margin:0 auto;padding:0 22px}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--em);color:var(--on-em);padding:8px 14px;border-radius:8px;z-index:100}.skip:focus{top:10px}
/* header */
.hdr{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:24px;height:64px}
.logo{display:flex;align-items:center;gap:9px;font:600 20px var(--mono);direction:ltr}
.logo svg{width:28px;height:28px;color:var(--em)}
.nav{display:flex;gap:22px;font-size:14px;color:var(--muted)}.nav a:hover{color:var(--fg)}
.sp{flex:1}
.tbtn{width:36px;height:36px;border-radius:50%;border:1px solid var(--em-line);background:var(--em-soft)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 20px;border-radius:10px;border:1px solid var(--line2);background:transparent;font-weight:600;font-size:14px;transition:.15s}
.btn:hover{border-color:var(--em);color:var(--em)}
.btn.p{background:var(--em);border-color:var(--em);color:var(--on-em)}.btn.p:hover{color:var(--on-em);box-shadow:0 0 22px -4px var(--em)}
.btn.lg{height:48px;padding:0 26px;font-size:15px}
.menu{display:none}
/* hero */
.hero{padding:76px 0 56px;background:radial-gradient(900px 400px at 75% -10%,var(--em-soft),transparent 70%)}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.eyebrow{display:inline-block;font-size:12.5px;color:var(--em);border:1px solid var(--em-line);background:var(--em-soft);border-radius:999px;padding:2px 14px;margin-bottom:18px}
h1{font-size:clamp(30px,4.4vw,48px);line-height:1.35;font-weight:700;text-wrap:balance}
h1 em{font-style:normal;color:var(--em)}
.lead{margin-top:18px;color:var(--muted);font-size:16.5px;max-width:56ch}
.who{margin-top:12px;color:var(--muted);font-size:14px;max-width:56ch}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.risk{margin-top:18px;font-size:12.5px;color:var(--muted);max-width:60ch}
/* preview */
.pv{border:1px solid var(--line2);border-radius:var(--r);background:var(--panel);overflow:hidden}
.pv-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.pv-bar i{width:9px;height:9px;border-radius:50%;background:var(--line2)}.pv-bar b{margin-inline-start:auto;font-weight:500;color:var(--cy)}
.pv svg{display:block;width:100%;height:auto}
.node rect{fill:var(--panel2);stroke:var(--line2)}.node.hl rect{stroke:var(--em)}.node text{fill:var(--fg);font:500 12px var(--mono)}.node .k{fill:var(--muted);font:11px var(--ui)}
.wire{fill:none;stroke:var(--em);stroke-width:1.6;opacity:.7}
.cap{padding:9px 14px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
/* sections */
section{padding:72px 0}section.alt{background:var(--panel);border-block:1px solid var(--line)}
.sh{max-width:680px;margin-bottom:36px}.sh h2{font-size:clamp(24px,3vw,32px);line-height:1.4}.sh p{color:var(--muted);margin-top:8px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:22px;display:flex;flex-direction:column;gap:8px}
section.alt .card{background:var(--panel2)}
.card .ic{width:38px;height:38px;border-radius:10px;border:1px solid var(--em-line);background:var(--em-soft);display:grid;place-items:center;color:var(--em)}
.card .ic svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:17px}.card p{color:var(--muted);font-size:14px}.card .gain{font-size:13px;color:var(--em);margin-top:auto;padding-top:6px}
.card.link:hover{border-color:var(--em-line)}
/* app preview */
.app{display:grid;grid-template-columns:150px 1fr;min-height:260px}
.app aside{border-inline-end:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--muted)}
.app aside span{padding:5px 10px;border-radius:8px}.app aside .on{color:var(--em);background:var(--em-soft);border:1px solid var(--em-line)}
.app main{padding:16px}.kp{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.kp div{border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:12px;color:var(--muted)}.kp b{display:block;color:var(--fg);font:500 17px var(--mono)}
table{width:100%;border-collapse:collapse;font-size:12.5px}th,td{text-align:start;padding:8px 10px;border-bottom:1px solid var(--line)}th{color:var(--muted);font-weight:500}
.bd{font:11px var(--mono);border:1px solid var(--line2);border-radius:999px;padding:1px 9px;color:var(--muted)}.bd.ok{color:var(--em);border-color:var(--em-line)}
/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s}
.step{border:1px solid var(--line);border-radius:var(--r);padding:22px;background:var(--panel);position:relative}
.step::before{counter-increment:s;content:counter(s);font:500 13px var(--mono);color:var(--em);border:1px solid var(--em-line);border-radius:50%;width:30px;height:30px;display:grid;place-items:center;margin-bottom:12px}
.step h3{font-size:16px}.step p{color:var(--muted);font-size:13.5px;margin-top:4px}
/* credits */
.cr{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center}
.cr ul{list-style:none;display:grid;gap:10px;margin-top:16px}.cr li{display:flex;gap:10px;color:var(--muted)}.cr li::before{content:"✓";color:var(--em);font-weight:700}
.crbox{border:1px solid var(--em-line);background:var(--em-soft);border-radius:var(--r);padding:26px}
.crbox h3{font-size:18px}.crbox p{color:var(--muted);margin:8px 0 18px;font-size:14px}
/* final + footer */
.final{text-align:center}.final .cta{justify-content:center}
footer{border-top:1px solid var(--line);padding:40px 0 28px;font-size:13.5px;color:var(--muted)}
.fg{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}.fg h4{color:var(--fg);font-size:14px;margin-bottom:8px}.fg a{display:block;padding:2px 0}.fg a:hover{color:var(--em)}
.legal{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px}
[data-r]{opacity:1}.js [data-r]{opacity:0;transform:translateY(10px);transition:.5s}.js [data-r].in{opacity:1;transform:none}
@media(max-width:900px){.hero .wrap,.cr{grid-template-columns:1fr}.grid3,.steps{grid-template-columns:1fr 1fr}.fg{grid-template-columns:1fr 1fr}.nav{display:none}.nav.open{display:flex;position:absolute;top:64px;inset-inline:0;flex-direction:column;background:var(--panel);padding:16px 22px;border-bottom:1px solid var(--line)}.menu{display:grid}}
@media(max-width:560px){.grid3,.steps,.fg{grid-template-columns:1fr}.app{grid-template-columns:1fr}.app aside{display:none}.hero{padding-top:44px}.hdr .btn.hide-s{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.pv svg{direction:ltr}.node text.k{direction:rtl}
@media(max-width:560px){.hdr .wrap{gap:8px}.hdr .btn{padding:0 12px}.logo{font-size:17px}}

/* ===== Wide layout polish: fluid, full-bleed sections, larger type on big screens ===== */
body{font-size:16px}
.wrap{max-width:1640px;padding-inline:clamp(20px,4.5vw,80px)}
.hdr .wrap{height:68px}
.hero{padding:clamp(56px,8vw,112px) 0 clamp(48px,6vw,88px);background:radial-gradient(1200px 520px at 80% -10%,var(--em-soft),transparent 70%),radial-gradient(900px 400px at 0% 10%,color-mix(in srgb,var(--cy) 8%,transparent),transparent 70%)}
.hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(32px,5vw,88px)}
h1{font-size:clamp(32px,4.6vw,64px);line-height:1.3;letter-spacing:-.01em}
.lead{font-size:clamp(16px,1.35vw,19px);max-width:60ch}
.who{font-size:15px;max-width:60ch}
.hero .pv{box-shadow:0 30px 80px -40px color-mix(in srgb,var(--em) 35%,transparent)}
section{padding:clamp(64px,8vw,120px) 0}
.sh{max-width:780px;margin-bottom:clamp(28px,4vw,52px)}.sh h2{font-size:clamp(26px,3.2vw,42px)}.sh p{font-size:17px}
/* product preview spans the full content width */
.app{grid-template-columns:200px minmax(0,1fr);min-height:clamp(320px,34vw,460px)}
.app aside{padding:18px 14px;font-size:14px;gap:8px}.app main{padding:clamp(16px,2.4vw,32px)}
.kp b{font-size:clamp(18px,2vw,26px)}.kp div{padding:14px 16px;font-size:13px}
table{font-size:clamp(12.5px,1.1vw,15px)}th,td{padding:12px 14px}
/* features: 3 + 2 rhythm instead of one tight box grid */
#features .grid3{grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
#features .card{grid-column:span 2}#features .card:nth-child(n+4){grid-column:span 3}
.card{padding:clamp(20px,2vw,32px);gap:10px}.card h3{font-size:clamp(17px,1.4vw,21px)}.card p{font-size:15px}
.steps{gap:clamp(14px,1.6vw,24px)}.step{padding:clamp(20px,2vw,30px)}.step h3{font-size:18px}.step p{font-size:15px}
.cr{gap:clamp(28px,5vw,88px)}.crbox{padding:clamp(24px,3vw,44px)}
.footer,footer{padding-top:56px}
@media(max-width:1100px){#features .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}#features .card,#features .card:nth-child(n+4){grid-column:auto}#features .card:last-child{grid-column:1/-1}}
@media(max-width:900px){.hero .wrap{grid-template-columns:minmax(0,1fr)}.app{grid-template-columns:150px minmax(0,1fr)}}
@media(max-width:560px){#features .grid3{grid-template-columns:minmax(0,1fr)}#features .card:last-child{grid-column:auto}.app{grid-template-columns:minmax(0,1fr)}}

/* strategy-logic flow (HTML, replaces the SVG sketch) */
.flowbox{align-self:center}
.flow{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:clamp(18px,2.4vw,32px) clamp(14px,2vw,26px)}
.flow li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:0 clamp(8px,1vw,16px)}
.flow li:not(:last-child)::after{content:"";position:absolute;top:15px;inset-inline-end:calc(-50% + 22px);width:calc(100% - 44px);height:1px;background:linear-gradient(90deg,var(--em-line),var(--line2));transform:translateX(0)}
.flow .n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:500 13px var(--ui);color:var(--em);border:1px solid var(--em-line);background:var(--em-soft);position:relative;z-index:1}
.flow h3{font-size:clamp(15px,1.3vw,18px)}.flow p{font-size:clamp(12.5px,1vw,14px);color:var(--muted);line-height:1.7}
@media(max-width:560px){.flow{grid-template-columns:minmax(0,1fr);gap:18px}.flow li{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:12px;padding:0}.flow li h3{flex:1}.flow li p{flex-basis:100%;padding-inline-start:42px;margin-top:-2px}.flow li:not(:last-child)::after{top:34px;inset-inline-end:auto;inset-inline-start:15px;width:1px;height:calc(100% - 16px + 18px);background:var(--line2)}}
/* flow connector + headline refinements */
h1{font-size:clamp(30px,3.7vw,54px)}
.flow li{padding:0 0 0 clamp(8px,1vw,16px)}
.flow li:not(:last-child)::after{top:15px;inset-inline-start:40px;inset-inline-end:10px;width:auto;height:1px;transform:none}
@media(max-width:560px){.flow li{padding:0}.flow li:not(:last-child)::after{top:34px;inset-inline-start:15px;inset-inline-end:auto;width:1px;height:calc(100% - 16px + 18px)}}

/* Expert Builder showcase */
#builder .pv{overflow:hidden}
.stagebox{position:relative;padding:clamp(14px,2vw,28px);overflow:hidden;background:radial-gradient(var(--line) 1px,transparent 1px) 0 0/22px 22px}
.stage{position:absolute;inset-inline-start:0;top:0;width:1130px;height:370px;transform-origin:top right;right:0;left:auto;direction:ltr}
.stage svg{position:absolute;left:0;top:0}
.wn{position:absolute;width:104px;height:56px;border:1.5px solid var(--line2);border-top:3px solid var(--c);border-radius:10px;background:var(--panel2);padding:5px 8px;direction:rtl;font-size:11px;line-height:1.35;overflow:visible}
.wn b{display:block;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wn small{display:block;color:var(--muted);font-size:9.5px;margin-top:2px}
.wn .p{position:absolute;top:24px;width:10px;height:10px;border-radius:50%;background:var(--c);border:2px solid var(--panel2)}.wn .p.in{right:-6px}.wn .p.out{left:-6px}
.vflow{display:none;list-style:none;counter-reset:v;padding:6px 4px;gap:0}
.vflow li{counter-increment:v;position:relative;padding:8px 44px 12px 0;min-height:52px}
.vflow li::before{content:counter(v);position:absolute;right:0;top:8px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:500 12px var(--ui);color:var(--em);border:1px solid var(--em-line);background:var(--em-soft)}
.vflow li:not(:last-child)::after{content:"";position:absolute;right:14px;top:38px;bottom:-2px;width:1px;background:var(--line2)}
.vflow b{display:block;font-size:14.5px}.vflow small{color:var(--muted);font-size:12.5px}
.bfeat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,28px);margin-top:clamp(24px,3vw,40px)}
.bfeat h3{font-size:16px}.bfeat p{color:var(--muted);font-size:14px;margin-top:4px}
@media(max-width:900px){.bfeat{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.stage{display:none}.stagebox{height:auto!important}.vflow{display:block}.bfeat{grid-template-columns:1fr}}