/* © 2026 AANCER.AI — AANCER v5 design system (shared chrome). Dark neutral tokens; brand teal/cyan lives ONLY in the logo mark. Loaded on every v5 page. Page-specific component CSS stays inline in each v5-body-*.html. Fonts: see v5-fonts.css. */ :root{ --ink:#0F1214; --ink2:#14181B; --fg:#ECE8DF; --dim:#8E8C84; /* brand teal/cyan lives ONLY in the logo mark — page chrome is warm neutral, not neon */ --brand-1:#048CAE; --brand-2:#2DD2C7; --brand-3:#01CCFF; --brand-4:#79EAE2; --acc:#CBC3B2; --acc-deep:#A9A08C; --line:rgba(255,255,255,.10); --disp:'Fraunces',Georgia,serif; --body:'Archivo',system-ui,sans-serif; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--ink);color:var(--fg);font-family:var(--body);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased} .wrap{max-width:none;margin:0 auto;padding:0 clamp(20px,5vw,60px)} .skip{position:absolute;left:-999px;top:0;background:var(--fg);color:var(--ink);padding:10px 16px;z-index:100} .skip:focus{left:8px;top:8px} /* ---------- NAV (mega-menu, matches deployed IA) ---------- */ .nav{position:relative;z-index:40;display:flex;align-items:center;gap:14px;padding:16px clamp(20px,5vw,60px);max-width:none;margin:0 auto} .brand{font-family:var(--disp);font-weight:600;font-size:21px;display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--fg)} .brand .mk{height:21px;width:auto} .brand em{font-style:normal;color:var(--acc);font-size:.72em;opacity:.9} .navcheck{display:none} .navlinks{display:flex;align-items:center;gap:2px;margin-left:12px;flex:1} .navlinks>a,.navitem>a{display:inline-flex;align-items:center;gap:6px;padding:9px 11px;font-size:14px;color:var(--dim);text-decoration:none;border-radius:3px;white-space:nowrap;transition:color .15s} .navlinks>a:hover,.navitem:hover>a,.navlinks>a.active,.navitem.active>a{color:var(--fg)} .navitem{position:relative} .car{font-size:8px;opacity:.55} .drop{position:absolute;top:calc(100% - 2px);left:0;min-width:320px;background:#12171a;border:1px solid var(--line);border-radius:10px;padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s,transform .16s,visibility .16s;box-shadow:0 30px 60px -28px rgba(0,0,0,.85);z-index:50} .navitem:hover .drop{opacity:1;visibility:visible;transform:none} .drop a{display:block;padding:10px 12px;border-radius:7px;text-decoration:none} .drop a b{display:block;color:var(--fg);font-size:14px;font-weight:600} .drop a span{display:block;color:var(--dim);font-size:12px;margin-top:2px;line-height:1.4} .drop a:hover{background:rgba(255,255,255,.045)} .drop hr{border:0;border-top:1px solid var(--line);margin:6px 8px} .navspacer{margin-left:auto} .langsw .drop{min-width:150px} .langsw .drop a{color:var(--dim);font-weight:500}.langsw .drop a.cur{color:var(--fg)} .mono4{font-weight:600;letter-spacing:.05em;font-size:13px} .navpill{font-size:13px;font-weight:600;color:var(--ink);background:var(--fg);padding:10px 18px;border-radius:3px;text-decoration:none;white-space:nowrap;transition:background .15s} .navpill:hover{background:#FBF8F1} .burgerlbl{display:none} @media(max-width:1120px){ .burgerlbl{display:block;cursor:pointer;margin-left:auto;width:26px;height:18px;position:relative} .burgerlbl i,.burgerlbl::before,.burgerlbl::after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--fg);border-radius:2px} .burgerlbl::before{top:0}.burgerlbl i{top:8px}.burgerlbl::after{bottom:0} .navlinks{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;margin:0;flex:none;padding:8px clamp(20px,5vw,60px) 20px;background:#0f1417;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:none} .navcheck:checked~.navlinks{display:flex} .navlinks>a,.navitem>a{padding:12px 4px} .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:transparent;padding:0 0 8px 12px;min-width:0} .navspacer{display:none} } /* ---------- PRODUCTS MEGA-MENU (WORK / CONSOLE / VISION) ---------- */ .drop.mega{min-width:760px;padding:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:0 14px} .megacol h6{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);padding:4px 12px 8px;font-weight:600;margin:0;border-bottom:1px solid var(--line);margin-bottom:4px} .megacol a{padding:8px 12px} .megacol a span{white-space:normal} .megacol hr{border:0;border-top:1px solid var(--line);margin:6px 8px} @media(max-width:1120px){.drop.mega{grid-template-columns:1fr;min-width:0;padding:0 0 8px 12px}.megacol h6{padding:8px 0 4px}} /* ---------- SHARED PRIMITIVES ---------- */ .eyebrow{display:inline-flex;align-items:center;gap:11px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);margin-bottom:22px} .eyebrow::before{content:"";width:32px;height:1px;background:var(--acc-deep)} .btn{font-size:15px;font-weight:600;text-decoration:none;padding:14px 28px;border-radius:2px;display:inline-flex;align-items:center;gap:10px;transition:transform .15s,background .15s,color .15s,border-color .15s;cursor:pointer;border:0} .btn--p{background:var(--fg);color:var(--ink)} .btn--p:hover{transform:translateY(-2px);background:#FBF8F1} .btn--g{color:var(--fg);border:1px solid var(--line);background:rgba(255,255,255,.02)} .btn--g:hover{border-color:var(--acc-deep);color:var(--acc)} .btn .ar{transition:transform .15s}.btn:hover .ar{transform:translateX(4px)} /* ---------- SECTION HEADS ---------- */ .section{padding:clamp(70px,11vh,140px) 0} .sec-head{max-width:680px;margin:0 auto clamp(40px,6vh,72px);text-align:center} .sec-head h2{font-family:var(--disp);font-weight:500;font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.02;letter-spacing:-.02em;margin-bottom:18px} .sec-head h2 em{font-style:italic;color:var(--acc)} .sec-head .lead{margin:0 auto;color:#B7C1C0} .sec-head .eyebrow{justify-content:center} /* ---------- CTA BAND ---------- */ .ctaband{position:relative;margin:clamp(40px,7vh,90px) auto 0;max-width:1120px;text-align:center; padding:clamp(50px,8vh,96px) clamp(24px,5vw,60px);border:1px solid var(--line);border-radius:16px; background:radial-gradient(120% 140% at 50% 0%, rgba(255,255,255,.06), transparent 60%), rgba(20,24,27,.5)} .ctaband h2{font-family:var(--disp);font-weight:500;font-size:clamp(2rem,4vw,3.2rem);line-height:1.03;margin-bottom:18px} .ctaband p{color:#B7C1C0;max-width:52ch;margin:0 auto 30px;font-size:17px;line-height:1.6} .ctaband .cta{justify-content:center;display:flex;flex-wrap:wrap;gap:14px;align-items:center} /* ---------- ARABIC / RTL ---------- Fraunces + Archivo have no Arabic glyphs. Redefine the font VARIABLES at html[dir=rtl] — this out-specifies the decomposed pages' inline :root{--disp:...} and the base :root, so anything using var(--disp)/var(--body) (headings, stat numbers, body) resolves to the self-hosted IBM Plex Sans Arabic. Italics are dropped (no Arabic italic). */ html[dir="rtl"]{--disp:'IBM Plex Sans Arabic','Fraunces',serif;--body:'IBM Plex Sans Arabic','Archivo',system-ui,sans-serif} [dir="rtl"] body,[dir="rtl"] input,[dir="rtl"] select,[dir="rtl"] textarea,[dir="rtl"] button{font-family:var(--body)} /* Arabic is cursive/joined — ANY letter-spacing (esp. the pages' negative heading tracking) breaks glyph shaping and can blank the text. Reset it everywhere under RTL, overriding inline heading CSS. */ [dir="rtl"] *{letter-spacing:normal !important} [dir="rtl"] h1 em,[dir="rtl"] h2 em,[dir="rtl"] h3 em,[dir="rtl"] .ihero h1 em,[dir="rtl"] .sec-head h2 em{font-style:normal} [dir="rtl"] .eyebrow::before{margin-left:0} [dir="rtl"] .article{margin-right:auto;margin-left:auto} [dir="rtl"] .ichecks li,[dir="rtl"] .checks li{padding:8px 30px 8px 0} [dir="rtl"] .ichecks li::before,[dir="rtl"] .checks li::before{left:auto;right:4px;transform:rotate(45deg)} [dir="rtl"] .btn .ar,[dir="rtl"] .morelink .ar{transform:scaleX(-1)} [dir="rtl"] .btn:hover .ar{transform:scaleX(-1) translateX(4px)} /* ---------- INTERIOR PAGES (company / partners / legal / webinar / 404) ---------- Prefixed .i* so nothing collides with the feature pages' own inline component CSS. */ .ihero{padding:clamp(48px,8vh,110px) clamp(20px,5vw,60px) clamp(30px,5vh,60px);max-width:1000px;margin:0 auto} .ihero .crumb{font-size:12.5px;color:var(--dim);margin-bottom:18px} .ihero .crumb a{color:var(--acc);text-decoration:none} .ihero h1{font-family:var(--disp);font-weight:500;font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.02;letter-spacing:-.015em;margin-bottom:20px} .ihero h1 em{font-style:italic;color:var(--acc)} .ihero .lead{font-size:clamp(15px,1.35vw,18px);line-height:1.6;color:#B7C1C0;max-width:60ch} .iprose{max-width:1000px;margin:0 auto;padding:0 clamp(20px,5vw,60px) clamp(40px,7vh,90px)} .iprose h2{font-family:var(--disp);font-weight:500;font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:-.01em;margin:clamp(34px,5vh,56px) 0 14px} .iprose h3{font-family:var(--disp);font-weight:500;font-size:1.15rem;margin:8px 0 8px} .iprose p{color:#B3BBBA;line-height:1.7;margin-bottom:14px;max-width:74ch} .iprose a{color:var(--acc)} .iprose .mono{font-family:ui-monospace,'JetBrains Mono',monospace;font-size:.92em} .iprose .rv{color:var(--dim);font-size:13px;margin-top:28px} .icard{border:1px solid var(--line);border-radius:12px;padding:24px 26px;background:rgba(20,24,27,.4)} .icard h3{margin-top:0} .igrid2{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:22px 0} .igrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:22px 0} .igrid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:22px 0} @media(max-width:860px){.igrid2,.igrid3,.igrid4{grid-template-columns:1fr}} .istat{text-align:left} .istat .v{font-family:var(--disp);font-weight:500;font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;color:var(--fg);font-style:normal;display:block} .istat .l{color:var(--dim);font-size:13px;margin-top:8px;display:block} .ipillrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px} .ipill{font-size:13px;color:var(--acc);border:1px solid var(--line);border-radius:40px;padding:7px 15px} .ipill b{color:var(--fg)} .ichecks{list-style:none;margin:16px 0;padding:0} .ichecks li{position:relative;padding:8px 0 8px 30px;color:#B3BBBA;line-height:1.6;border-bottom:1px solid var(--line)} .ichecks li::before{content:"";position:absolute;left:4px;top:14px;width:9px;height:9px;border:1.5px solid var(--acc);border-top:0;border-right:0;transform:rotate(-45deg)} .ichecks li b{color:var(--fg)} .iform{display:grid;gap:14px} .iform label{display:block;font-size:13px;color:var(--dim);margin-bottom:6px} .iform input,.iform select,.iform textarea{width:100%;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:6px;padding:11px 13px;color:var(--fg);font-family:var(--body);font-size:14px} .iform input:focus,.iform select:focus,.iform textarea:focus{outline:0;border-color:var(--acc-deep)} .iform .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:600px){.iform .row2{grid-template-columns:1fr}} .iform .hint{font-size:12px;color:var(--dim)} .iform .ok,.iform .err{display:none;font-size:13px;padding:10px 12px;border-radius:6px} .iform.sent .ok{display:block;color:#7fcf9e;border:1px solid rgba(127,207,158,.3)} .iform.failed .err{display:block;color:#d98b7a;border:1px solid rgba(217,139,122,.3)} .i404{max-width:640px;margin:0 auto;text-align:center;padding:clamp(80px,16vh,180px) clamp(20px,5vw,60px)} .i404 .big{font-family:var(--disp);font-weight:500;font-size:clamp(4rem,14vw,9rem);line-height:1;color:var(--acc);font-style:italic} /* ---------- v5 DETAIL PAGES (articles / stories / marketplace, emitted by build.py) ---------- Styles the v3-era emitter markup under the v5 shell. Detail pages carry no inline