/* Template codex. */
:root{--fb:'Cairo';--fh:'Cairo';--fm:'JetBrains Mono',Consolas,monospace;--bg:#0B1220;--bg2:#111B30;--bg3:#0E1628;--ink:#E6EDF7;--ink2:#9AA8C0;--line:#22304D;--acc:#3DDC97;--acc2:#7AA2F7;--pink:#F7768E;--amber:#E0AF68;--nav-bg:rgba(11,18,32,.9);--nav-solid:#0B1220;--demo-bg:#1A2540;--r-in:10px;--po-bg:#111B30;--po-acc:#3DDC97}
body{background-image:linear-gradient(rgba(122,162,247,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(122,162,247,.045) 1px,transparent 1px);background-size:40px 40px}
.nav{border-bottom:1px solid var(--line)}
.brand>span::before{content:"</>";font-family:var(--fm);color:var(--acc);margin-inline-end:8px;font-size:15px;unicode-bidi:isolate;direction:ltr;display:inline-block}
.brand small{font-family:var(--fm);color:var(--acc2);opacity:1}
.codex .btn{border-radius:8px}
.codex .cta,.codex .b1,form .btn{background:var(--acc);color:#04130C;box-shadow:0 0 0 1px var(--acc),0 10px 30px rgba(61,220,151,.25)}
.codex .b2{background:transparent;color:var(--ink);border:1px solid #33456B}
.codex .b2:hover{border-color:var(--acc2)}
h1,h2,h3{color:#fff}
.kick{font-weight:700;color:var(--acc);font-size:14px}
.kick::before{content:"//";font-family:var(--fm);opacity:.6;margin-inline-end:8px;display:inline-block;direction:ltr}
.sec-h h2{font-size:38px;font-weight:900}

/* hero */
.hero{padding:64px 0 84px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(61,220,151,.16),transparent 70%);inset-inline-end:-160px;top:-200px}
.hero::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(122,162,247,.14),transparent 70%);inset-inline-start:-160px;bottom:-200px}
.hero-in{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center;position:relative;z-index:1}
.prompt{display:inline-flex;gap:10px;align-items:center;font-weight:700;color:var(--acc);background:rgba(61,220,151,.08);border:1px solid rgba(61,220,151,.35);padding:5px 14px;border-radius:6px;font-size:14px}
.prompt i{font-style:normal;font-family:var(--fm)}
.hero h1{font-size:54px;font-weight:900;margin:18px 0;line-height:1.3}
.hero h1 em{font-style:normal;color:var(--acc)}
.hero-t>p{font-size:18px;color:var(--ink2);max-width:540px;margin:0}
.hero-b{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.ide{background:var(--bg3);border:1px solid #2A3A5E;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 6px rgba(122,162,247,.06);overflow:hidden;direction:ltr}
.ide-bar{display:flex;align-items:center;gap:7px;padding:11px 16px;background:#141F36;border-bottom:1px solid var(--line)}
.ide-bar i{width:11px;height:11px;border-radius:50%;background:var(--pink)}.ide-bar i:nth-child(2){background:var(--amber)}.ide-bar i:nth-child(3){background:var(--acc)}
.ide-bar span{margin-inline-start:14px;font-family:var(--fm);font-size:12px;color:var(--ink2);background:var(--bg3);padding:4px 14px;border-radius:6px;border:1px solid var(--line)}
.ide-body{display:grid;grid-template-columns:1.15fr .85fr}
.code{margin:0;padding:18px 16px;font-family:var(--fm);font-size:13px;line-height:2;color:#C0CAF5;overflow:hidden;white-space:pre;text-align:left}
.code .ln{color:#46557A;display:inline-block;width:14px}.code .k{color:#BB9AF7}.code .f{color:var(--acc2)}.code .s{color:var(--acc)}.code .c{color:#5C6B8A}
.out{background:center/cover;min-height:280px;border-inline-start:1px solid var(--line)}
.ide-foot{display:grid;grid-template-columns:repeat(3,1fr);background:#141F36;border-top:1px solid var(--line)}
.ide-foot div{padding:12px 16px;border-inline-start:1px solid var(--line)}.ide-foot div:first-child{border-inline-start:0}
.ide-foot b{display:block;font-family:var(--fm);font-size:24px;color:var(--acc);line-height:1.3}.ide-foot div:nth-child(2) b{color:var(--acc2)}.ide-foot div:nth-child(3) b{color:var(--amber)}
.ide-foot span{font-size:13px;color:var(--ink2)}

/* cards */
.card{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:22px}
.trk{grid-template-columns:repeat(4,1fr)}
.trk .card{padding:0 0 26px;position:relative;overflow:hidden;transition:transform .2s,border-color .2s}
.trk .card:hover{transform:translateY(-4px);border-color:var(--acc)}
.trk-h{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 16px;background:#141F36;border-bottom:1px solid var(--line);font-family:var(--fm);font-size:12px;color:var(--acc)}
.t1 .trk-h{color:var(--acc2)}.t2 .trk-h{color:var(--pink)}.t3 .trk-h{color:var(--amber)}
.trk .ag{background:rgba(255,255,255,.06);color:var(--ink);padding:2px 10px;border-radius:99px;font-family:var(--fb);font-weight:700;font-size:12px}
.trk h3{font-size:21px;margin:18px 18px 6px}.trk p{margin:0 18px;color:var(--ink2)}
.trk .br{position:absolute;inset-inline-end:14px;bottom:6px;font-family:var(--fm);font-size:42px;color:rgba(122,162,247,.14);line-height:1}
.term{grid-template-columns:repeat(3,1fr)}
.term .card{display:flex;gap:16px;align-items:flex-start}
.term .ic{flex:none;width:48px;height:48px;border-radius:10px;display:grid;place-items:center;background:rgba(61,220,151,.1);color:var(--acc);border:1px solid rgba(61,220,151,.3)}
.term h3{font-size:19px;margin-bottom:4px}.term p{margin:0;color:var(--ink2)}
.awards span,.soc a{background:var(--bg2);border-color:var(--line)}

/* sections */
.tracks,.season,.gl,.ct{background:transparent}
.achv,.why,.fq{background:rgba(17,27,48,.75);border-block:1px solid var(--line)}
.pl{background:var(--bg3);border:1px solid var(--line);border-radius:12px;overflow:hidden;padding-bottom:18px}
.pl .ph{height:220px}.pl b{color:#fff;margin-top:4px}.pl span{color:var(--acc);font-family:var(--fm);font-size:13px}
.tl>div{background:var(--bg2);border:1px solid var(--line)}
.tl small{font-family:var(--fm);color:var(--acc2)}
.tl .now{background:linear-gradient(140deg,#14533F,#13284A);border-color:var(--acc)}.tl .now small{color:var(--acc)}.tl .now p{color:#CFEFE2}
.why-v{border-radius:14px;border:1px solid var(--line);min-height:380px}
.ticks .i{width:30px;height:30px;padding:6px;border-radius:8px;background:rgba(61,220,151,.12);color:var(--acc)}
.ticks b{color:#fff}
.rev{background:var(--bg2)}.rv{background:transparent}
.gal div{border:1px solid var(--line);border-radius:10px}
.faqs details{background:var(--bg2);border-color:var(--line)}.faqs summary{color:#fff}
.codex .portal{--po-bg:#0E1628;--po-acc:#3DDC97;border-block:1px solid var(--line)}
.po-card{background:#E6EDF7;color:#0B1220}.po-row div{background:#fff}.po-btn{color:#04130C}
.bk{background:linear-gradient(160deg,#0F2A2A,#0B1220 60%)}
.bk form{background:var(--bg2)}
input,select,textarea{background:var(--bg3);color:var(--ink);border-color:#2A3A5E}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acc);outline-offset:1px}
.crow b{color:#fff}.lnk{color:var(--acc)}
footer{background:#070C16;color:var(--ink2);border-top:1px solid var(--line);font-family:var(--fb)}

@media (max-width:1100px){.trk{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){
 .hero{padding:40px 0 56px}.hero-in{grid-template-columns:1fr;gap:34px}.hero h1{font-size:36px}
 .ide-body{grid-template-columns:1fr}.out{min-height:200px;border-inline-start:0;border-top:1px solid var(--line)}.code{font-size:12px}
 .ide-foot b{font-size:20px}.ide-foot div{padding:10px 12px}
 .sec-h h2{font-size:28px}.trk,.term{grid-template-columns:1fr}.why-v{min-height:260px}
}