/* ========================================================================== marketing-home.css · Copy AI Trading — Phase 1 homepage redesign -------------------------------------------------------------------------- SAFETY CONTRACT 1. Load this AFTER /assets/css/site.css. It never replaces it. 2. EVERY rule is scoped under .marketing-home (on of the homepage only). Nothing here can reach any other page. 3. NOTHING here targets dashboard-owned selectors: #errbox #loader #app .tabs .tab .pane #pane-* #toast #growth-chart #st-balance #st-profit #st-days #st-trades #accdot #acctxt #metaline #refreshBtn — these keep whatever site.css already gives them. The ONE exception is layout spacing on the .dash-sec WRAPPER, which does not affect any element dashboard.js reads or writes. 4. No !important is used anywhere, so site.css can always win if needed. ========================================================================== */ /* ---------- scoped design tokens (do NOT put these on :root) -------------- */ .marketing-home{ --mh-bg:#060a13; --mh-bg-2:#0a1120; --mh-surface:#0e1626; --mh-surface-2:#121c30; --mh-line:#1d2942; --mh-ink:#e9eefb; --mh-ink-2:#aebbd4; --mh-ink-3:#7d8cab; --mh-brand:#2f6dff; --mh-brand-2:#5b8cff; --mh-teal:#2dd4bf; --mh-gold:#f5b544; --mh-up:#22c55e; --mh-down:#ef4444; --mh-r-sm:10px; --mh-r:16px; --mh-r-lg:22px; --mh-gap:clamp(16px,2.2vw,26px); --mh-sec-y:clamp(56px,7vw,110px); --mh-shadow:0 18px 50px -22px rgb(0 0 0 / .75); --mh-ring:0 0 0 1px var(--mh-line); } /* ---------- section rhythm ------------------------------------------------ */ .marketing-home main > section{ padding-block:var(--mh-sec-y); } /* nothing in the marketing sections may cause horizontal page scroll */ .marketing-home main > section{ overflow-x:clip; } .marketing-home .mh-hero-grid, .marketing-home .mh-flow-wrap, .marketing-home .feat-grid, .marketing-home .bigstats, .marketing-home .trustgrid, .marketing-home .pricegrid, .marketing-home .steps-row{ min-width:0; } .marketing-home .feat,.marketing-home .step,.marketing-home .bstat, .marketing-home .trustcard,.marketing-home .pricecard,.marketing-home .mh-node, .marketing-home .mh-cap,.marketing-home .mh-vis-cell{ min-width:0; overflow-wrap:anywhere; } .marketing-home .container{ width:min(1240px,92vw); margin-inline:auto; } .marketing-home .sec-title{ font-size:clamp(1.6rem,3.4vw,2.7rem); line-height:1.28; font-weight:900; letter-spacing:-.01em; color:var(--mh-ink); margin:0 0 12px; } .marketing-home .sec-title em{ font-style:normal; background:linear-gradient(95deg,var(--mh-brand-2),var(--mh-teal)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .marketing-home .sec-sub{ max-width:70ch; color:var(--mh-ink-2); font-size:clamp(.98rem,1.15vw,1.09rem); line-height:1.95; margin:0 0 clamp(26px,3.4vw,46px); } /* ---------- reveal-on-scroll (opt-in, motion-safe) ------------------------ */ @media (prefers-reduced-motion:no-preference){ .marketing-home [data-mh-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); } .marketing-home [data-mh-reveal].mh-in{ opacity:1; transform:none; } } /* ========================================================================== 1 · HERO ========================================================================== */ .marketing-home .hero-land{ position:relative; overflow:clip; padding-block:clamp(38px,6vw,88px) var(--mh-sec-y); } .marketing-home .mh-hero-grid{ display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1.1fr); gap:clamp(26px,4vw,56px); align-items:center; } @media (max-width:1024px){ .marketing-home .mh-hero-grid{ grid-template-columns:1fr; } } .marketing-home .hero-land .pill{ display:inline-flex; align-items:center; gap:9px; padding:7px 15px; border-radius:999px; background:linear-gradient(180deg,#12203a,#0d1729); box-shadow:var(--mh-ring); color:var(--mh-ink-2); font-size:.82rem; font-weight:600; margin-bottom:22px; } .marketing-home .mh-eyebrow{ font-size:.84rem; font-weight:800; letter-spacing:.16em; color:var(--mh-teal); text-transform:uppercase; margin:0 0 12px; } .marketing-home .hero-land h1{ font-size:clamp(2.05rem,5.4vw,4.05rem); line-height:1.16; font-weight:900; letter-spacing:-.022em; color:#fff; margin:0 0 20px; text-wrap:balance; } .marketing-home .hero-land h1 em{ font-style:normal; display:block; background:linear-gradient(95deg,var(--mh-brand-2) 10%,var(--mh-teal) 90%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .marketing-home .hero-land .lead{ max-width:60ch; color:var(--mh-ink-2); font-size:clamp(1rem,1.3vw,1.14rem); line-height:2.05; margin:0 0 30px; } /* CTAs */ .marketing-home .cta-row{ display:flex; flex-wrap:wrap; gap:12px; } .marketing-home .cta{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:14px 26px; border-radius:var(--mh-r-sm); font-weight:800; font-size:1rem; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; } .marketing-home .cta.main{ background:linear-gradient(180deg,var(--mh-brand-2),var(--mh-brand)); color:#fff; box-shadow:0 10px 26px -10px rgb(47 109 255 / .85); } .marketing-home .cta.main:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -12px rgb(47 109 255 / .95); } .marketing-home .cta.ghost{ background:#0e1626cc; color:var(--mh-ink); box-shadow:var(--mh-ring); } .marketing-home .cta.ghost:hover{ background:var(--mh-surface-2); transform:translateY(-2px); } .marketing-home .cta.xl{ padding:17px 34px; font-size:1.06rem; } .marketing-home .cta:focus-visible{ outline:2px solid var(--mh-brand-2); outline-offset:3px; } .marketing-home .cta-note{ display:flex; flex-wrap:wrap; gap:8px 20px; margin:20px 0 0; color:var(--mh-ink-3); font-size:.87rem; } /* hero stat row */ .marketing-home .hero-land .stats-row{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:34px; padding-top:28px; border-top:1px solid var(--mh-line); } @media (max-width:600px){ .marketing-home .hero-land .stats-row{ grid-template-columns:repeat(2,1fr); } } .marketing-home .hero-land .stat b{ display:block; font-size:clamp(1.5rem,2.6vw,2.05rem); font-weight:900; color:#fff; line-height:1.1; } .marketing-home .hero-land .stat span{ display:block; margin-top:6px; color:var(--mh-ink-3); font-size:.8rem; line-height:1.6; } /* ---------- hero marketing visual (decorative — NOT the live dashboard) --- */ .marketing-home .mh-visual{ position:relative; border-radius:var(--mh-r-lg); background:linear-gradient(160deg,#101a2e,#0a1120 62%); box-shadow:var(--mh-ring),var(--mh-shadow); padding:14px; overflow:hidden; } .marketing-home .mh-visual::before{ content:""; position:absolute; inset-block-start:-40%; inset-inline-end:-25%; width:70%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgb(47 109 255 / .22),transparent 68%); pointer-events:none; } .marketing-home .mh-vis-bar{ display:flex; align-items:center; gap:8px; padding:6px 8px 14px; } .marketing-home .mh-vis-dot{ width:9px; height:9px; border-radius:50%; background:#243250; } .marketing-home .mh-vis-title{ margin-inline-start:6px; color:var(--mh-ink-2); font-size:.82rem; font-weight:700; } .marketing-home .mh-vis-live{ margin-inline-start:auto; display:inline-flex; align-items:center; gap:6px; color:var(--mh-up); font-size:.74rem; font-weight:800; } .marketing-home .mh-vis-live i{ width:7px; height:7px; border-radius:50%; background:var(--mh-up); font-style:normal; } @media (prefers-reduced-motion:no-preference){ .marketing-home .mh-vis-live i{ animation:mh-pulse 2.2s ease-in-out infinite; } } @keyframes mh-pulse{ 0%,100%{opacity:1} 50%{opacity:.28} } .marketing-home .mh-vis-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .marketing-home .mh-vis-cell{ background:#0c1424; border-radius:var(--mh-r-sm); padding:12px 13px; box-shadow:var(--mh-ring); } .marketing-home .mh-vis-cell small{ display:block; color:var(--mh-ink-3); font-size:.7rem; margin-bottom:6px; } .marketing-home .mh-vis-cell b{ color:#fff; font-size:1rem; font-weight:800; letter-spacing:.01em; } .marketing-home .mh-vis-chart{ grid-column:1 / -1; background:#0c1424; border-radius:var(--mh-r-sm); padding:14px; box-shadow:var(--mh-ring); } .marketing-home .mh-vis-chart svg{ display:block; width:100%; height:auto; } .marketing-home .mh-vis-rows{ grid-column:1 / -1; display:grid; gap:7px; } .marketing-home .mh-vis-row{ display:grid; grid-template-columns:auto auto 1fr auto; align-items:center; gap:10px; background:#0c1424; border-radius:var(--mh-r-sm); padding:10px 13px; box-shadow:var(--mh-ring); font-size:.82rem; } .marketing-home .mh-vis-row .sym{ color:#fff; font-weight:800; } .marketing-home .mh-tag{ padding:3px 9px; border-radius:999px; font-size:.68rem; font-weight:800; } .marketing-home .mh-tag.buy{ background:rgb(34 197 94 / .14); color:var(--mh-up); } .marketing-home .mh-tag.sell{ background:rgb(239 68 68 / .14); color:var(--mh-down); } .marketing-home .mh-tag.wait{ background:rgb(245 181 68 / .14); color:var(--mh-gold); } .marketing-home .mh-vis-row .conf{ color:var(--mh-ink-3); font-size:.74rem; justify-self:start; } .marketing-home .mh-vis-note{ grid-column:1 / -1; color:var(--mh-ink-3); font-size:.72rem; text-align:center; padding-top:4px; } @media (max-width:520px){ .marketing-home .mh-vis-grid{ grid-template-columns:repeat(2,1fr); } } /* ========================================================================== 2 · CAPABILITIES STRIP ========================================================================== */ .marketing-home .mh-caps{ padding-block:clamp(22px,3vw,34px) !important; border-block:1px solid var(--mh-line); background:var(--mh-bg-2); } .marketing-home .mh-caps-grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; } @media (max-width:900px){ .marketing-home .mh-caps-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:420px){ .marketing-home .mh-caps-grid{ grid-template-columns:1fr; } } .marketing-home .mh-cap{ display:flex; align-items:center; gap:12px; padding:12px 6px; } .marketing-home .mh-cap .ic{ flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; font-size:1.05rem; background:linear-gradient(180deg,#152340,#101a2e); box-shadow:var(--mh-ring); } .marketing-home .mh-cap b{ display:block; color:var(--mh-ink); font-size:.92rem; font-weight:800; } .marketing-home .mh-cap span{ display:block; color:var(--mh-ink-3); font-size:.76rem; margin-top:2px; } /* ========================================================================== 3 · CARDS (features / services / product ecosystem) ========================================================================== */ .marketing-home .feat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:var(--mh-gap); } .marketing-home .feat{ position:relative; background:linear-gradient(180deg,var(--mh-surface),#0b1322); border-radius:var(--mh-r); padding:26px 24px; box-shadow:var(--mh-ring); /* opacity included so site.js's .reveal -> .in fade is not clipped */ transition:transform .22s ease, box-shadow .22s ease, opacity .5s ease; } .marketing-home .feat:hover{ transform:translateY(-4px); box-shadow:0 0 0 1px #2a3d63, 0 22px 44px -24px rgb(0 0 0 / .9); } .marketing-home .feat .fic{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:1.28rem; margin-bottom:16px; background:linear-gradient(180deg,#16243f,#101a2e); box-shadow:var(--mh-ring); } .marketing-home .feat h3{ font-size:1.06rem; font-weight:800; color:#fff; margin:0 0 9px; line-height:1.5; } .marketing-home .feat p{ color:var(--mh-ink-2); font-size:.92rem; line-height:1.9; margin:0; } .marketing-home .mh-cardlink{ display:inline-flex; align-items:center; gap:6px; margin-top:16px; color:var(--mh-brand-2); font-weight:800; font-size:.88rem; text-decoration:none; } .marketing-home .mh-cardlink::after{ content:"‹"; font-size:1.15rem; line-height:1; transition:transform .18s ease; } .marketing-home .mh-cardlink:hover::after{ transform:translateX(-4px); } /* ========================================================================== 4 · COPY-TRADING FLOW ========================================================================== */ .marketing-home .mh-flow-wrap{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; gap:14px; } @media (max-width:900px){ .marketing-home .mh-flow-wrap{ grid-template-columns:1fr; } .marketing-home .mh-arrow{ transform:rotate(-90deg); justify-self:center; } } .marketing-home .mh-node{ background:linear-gradient(180deg,var(--mh-surface),#0b1322); border-radius:var(--mh-r); padding:22px 20px; box-shadow:var(--mh-ring); text-align:center; } .marketing-home .mh-node.is-engine{ background:linear-gradient(180deg,#132445,#0d1830); box-shadow:0 0 0 1px #2b4a86, 0 16px 40px -20px rgb(47 109 255 / .6); } .marketing-home .mh-node .nic{ font-size:1.5rem; display:block; margin-bottom:10px; } .marketing-home .mh-node b{ display:block; color:#fff; font-size:1rem; margin-bottom:6px; } .marketing-home .mh-node span{ display:block; color:var(--mh-ink-3); font-size:.82rem; line-height:1.75; } .marketing-home .mh-node .mh-accts{ display:flex; justify-content:center; gap:6px; margin-top:12px; } .marketing-home .mh-node .mh-accts i{ width:26px; height:26px; border-radius:8px; background:#16233c; box-shadow:var(--mh-ring); display:grid; place-items:center; font-style:normal; font-size:.7rem; color:var(--mh-ink-2); } /* RTL: flow reads right→left, so the arrow glyph points LEFT */ .marketing-home .mh-arrow{ align-self:center; color:var(--mh-brand-2); font-size:1.5rem; line-height:1; user-select:none; } /* ========================================================================== 5 · STEPS (5-step how it works) ========================================================================== */ .marketing-home .steps-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:var(--mh-gap); counter-reset:mhstep; } .marketing-home .step{ position:relative; background:linear-gradient(180deg,var(--mh-surface),#0b1322); border-radius:var(--mh-r); padding:26px 22px 22px; box-shadow:var(--mh-ring); } .marketing-home .step .stepnum{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:12px; background:linear-gradient(180deg,var(--mh-brand-2),var(--mh-brand)); color:#fff; font-weight:900; font-size:1rem; margin-bottom:15px; box-shadow:0 8px 20px -10px rgb(47 109 255 / .9); } .marketing-home .step h3{ font-size:1rem; font-weight:800; color:#fff; margin:0 0 8px; line-height:1.5; } .marketing-home .step p{ color:var(--mh-ink-2); font-size:.88rem; line-height:1.85; margin:0; } .marketing-home .steplink{ display:inline-block; margin-top:14px; color:var(--mh-brand-2); font-weight:800; font-size:.85rem; text-decoration:none; } .marketing-home .steplink:hover{ text-decoration:underline; } /* ========================================================================== 6 · PERFORMANCE / LIVE NUMBERS NOTE: the VALUES inside #st-* are written by dashboard.js. Styling only. ========================================================================== */ .marketing-home .statsband{ background:var(--mh-bg-2); border-block:1px solid var(--mh-line); } .marketing-home .bigstats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--mh-gap); } .marketing-home .bstat{ background:linear-gradient(180deg,var(--mh-surface),#0b1322); border-radius:var(--mh-r); padding:24px 22px; box-shadow:var(--mh-ring); } .marketing-home .bstat .num{ display:block; font-size:clamp(1.6rem,3vw,2.3rem); font-weight:900; color:#fff; line-height:1.15; font-variant-numeric:tabular-nums; direction:ltr; text-align:start; } .marketing-home .bstat span{ display:block; margin-top:8px; color:var(--mh-ink-3); font-size:.84rem; line-height:1.7; } .marketing-home .statsband .card{ background:linear-gradient(180deg,var(--mh-surface),#0b1322); border-radius:var(--mh-r); padding:24px; box-shadow:var(--mh-ring); } .marketing-home .statsband .card h2, .marketing-home .statsband .card h3{ font-size:1.05rem; font-weight:800; color:#fff; margin:0 0 16px; } .marketing-home .chartbox{ position:relative; min-height:240px; } .marketing-home .mh-perf-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:26px; } .marketing-home .mh-perf-note{ color:var(--mh-ink-3); font-size:.83rem; line-height:1.8; margin:0; } /* ========================================================================== 7 · TRUST / SECURITY ========================================================================== */ .marketing-home .trustgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--mh-gap); } .marketing-home .trustcard{ display:flex; gap:14px; padding:22px 20px; border-radius:var(--mh-r); background:linear-gradient(180deg,var(--mh-surface),#0b1322); box-shadow:var(--mh-ring); } .marketing-home .trustcard .tico{ font-size:1.3rem; flex:0 0 auto; line-height:1.4; } .marketing-home .trustcard b{ display:block; color:#fff; font-size:.98rem; margin-bottom:7px; } .marketing-home .trustcard p{ color:var(--mh-ink-2); font-size:.88rem; line-height:1.85; margin:0; } .marketing-home .trustcard a{ color:var(--mh-brand-2); } .marketing-home .proof-strip{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; } .marketing-home .proof-chip{ padding:8px 15px; border-radius:999px; background:#0e1626; box-shadow:var(--mh-ring); color:var(--mh-ink-2); font-size:.82rem; font-weight:600; } /* ========================================================================== 8 · COMPARISON / PRICING / FAQ ========================================================================== */ .marketing-home .cmpwrap{ overflow-x:auto; border-radius:var(--mh-r); box-shadow:var(--mh-ring); } .marketing-home .cmptable{ width:100%; border-collapse:collapse; min-width:620px; background:var(--mh-surface); } .marketing-home .cmptable th,.marketing-home .cmptable td{ padding:15px 18px; text-align:start; border-bottom:1px solid var(--mh-line); font-size:.9rem; color:var(--mh-ink-2); } .marketing-home .cmptable th{ color:#fff; font-weight:800; background:#0c1424; } .marketing-home .cmptable th.us{ color:var(--mh-teal); } .marketing-home .cmptable td.yes{ color:var(--mh-ink); } .marketing-home .cmptable td.no{ color:var(--mh-ink-3); } .marketing-home .cmptable tr:last-child td{ border-bottom:0; } .marketing-home .pricegrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--mh-gap); } .marketing-home .pricecard{ background:linear-gradient(180deg,var(--mh-surface),#0b1322); border-radius:var(--mh-r); padding:26px 24px; box-shadow:var(--mh-ring); } .marketing-home .pricecard h3{ font-size:1.05rem; font-weight:800; color:#fff; margin:0 0 12px; } .marketing-home .pricecard p{ color:var(--mh-ink-2); font-size:.9rem; line-height:1.9; margin:0 0 14px; } .marketing-home .pricecard ul{ margin:0; padding-inline-start:1.1em; color:var(--mh-ink-3); font-size:.85rem; line-height:2; } .marketing-home blockquote{ border-inline-start:3px solid var(--mh-brand); background:#0c1424; border-radius:var(--mh-r-sm); padding:18px 22px; color:var(--mh-ink-2); font-size:.94rem; line-height:1.95; } .marketing-home .faqsec .container{ max-width:900px; } .marketing-home .faq{ background:linear-gradient(180deg,var(--mh-surface),#0b1322); border-radius:var(--mh-r-sm); box-shadow:var(--mh-ring); margin-bottom:11px; overflow:hidden; } .marketing-home .faq summary{ cursor:pointer; padding:18px 22px; font-weight:800; color:var(--mh-ink); font-size:.98rem; line-height:1.7; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:14px; } .marketing-home .faq summary::-webkit-details-marker{ display:none; } .marketing-home .faq summary::after{ content:"+"; flex:0 0 auto; color:var(--mh-brand-2); font-size:1.3rem; font-weight:700; transition:transform .22s ease; } .marketing-home .faq[open] summary::after{ transform:rotate(45deg); } .marketing-home .faq p{ padding:0 22px 20px; margin:0; color:var(--mh-ink-2); font-size:.91rem; line-height:2; } .marketing-home .faq a{ color:var(--mh-brand-2); } /* ========================================================================== 9 · FINAL CTA ========================================================================== */ .marketing-home .mh-final{ text-align:center; } .marketing-home .mh-final-inner{ position:relative; overflow:hidden; border-radius:var(--mh-r-lg); padding:clamp(38px,6vw,74px) clamp(22px,4vw,56px); background:linear-gradient(150deg,#132445,#0a1120 70%); box-shadow:var(--mh-ring),var(--mh-shadow); } .marketing-home .mh-final-inner::before{ content:""; position:absolute; inset-block-start:-60%; inset-inline-start:50%; width:80%; aspect-ratio:1; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle,rgb(47 109 255 / .2),transparent 66%); pointer-events:none; } .marketing-home .mh-final h2{ position:relative; font-size:clamp(1.6rem,3.6vw,2.6rem); font-weight:900; color:#fff; margin:0 0 14px; } .marketing-home .mh-final p{ position:relative; max-width:60ch; margin:0 auto 28px; color:var(--mh-ink-2); line-height:1.95; } .marketing-home .mh-final .cta-row{ position:relative; justify-content:center; } .marketing-home .mh-final .cta-note{ position:relative; justify-content:center; } /* ========================================================================== 10 · DASHBOARD SECTION — WRAPPER SPACING ONLY Nothing below touches #errbox #loader #app .tabs .tab .pane #pane-*. ========================================================================== */ .marketing-home .dash-sec{ background:var(--mh-bg-2); border-block:1px solid var(--mh-line); } .marketing-home .dash-head{ margin-bottom:26px; } /* ========================================================================== 11 · RTL CORRECTNESS The page is dir="rtl". These rules make that intentional rather than incidental. Numeric/latin runs are forced LTR so prices, tickers and percentages read correctly inside Arabic sentences. ========================================================================== */ .marketing-home .num, .marketing-home .mh-vis-cell b, .marketing-home .mh-vis-row .conf, .marketing-home .bstat .num{ direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums; } .marketing-home .mh-ltr{ direction:ltr; unicode-bidi:isolate; display:inline-block; } /* Directional glyphs: in RTL "forward" is leftward. */ .marketing-home .mh-arrow::before{ content:"←"; } /* Logical properties everywhere means no LTR/RTL forks are needed for padding, margin or borders. Kept as a note for future maintainers. */ /* ========================================================================== 12 · RESPONSIVE — verified breakpoints 320 · 375 · 390 · 430 · 768 · 1024 · 1440+ ========================================================================== */ @media (max-width:560px){ /* 4-column mockup rows cannot hold Arabic labels below ~560px */ .marketing-home .mh-vis-row{ grid-template-columns:auto auto 1fr; row-gap:6px; } .marketing-home .mh-vis-row > :last-child{ grid-column:1 / -1; justify-self:start; } } @media (max-width:430px){ .marketing-home .cta{ width:100%; } .marketing-home .cta-row{ flex-direction:column; } .marketing-home .hero-land h1{ font-size:clamp(1.75rem,8vw,2.3rem); } .marketing-home .mh-vis-grid{ grid-template-columns:1fr; } } @media (max-width:360px){ .marketing-home .container{ width:94vw; } .marketing-home .feat,.marketing-home .step,.marketing-home .bstat{ padding-inline:18px; } } /* ========================================================================== 13 · LIGHT MODE site.css owns the theme toggle (#themeBtn). If it sets a light theme on or , these keep the marketing sections readable. ========================================================================== */ /* site.js owns theming: document.body.classList.toggle('dark', dark) persisted in localStorage['cat_theme'], DEFAULT = dark. prefers-color-scheme is deliberately NOT used here — the site ignores it, and keying off it would light up the marketing sections inside a dark page. */ .marketing-home:not(.dark){ --mh-bg:#f5f8fc; --mh-bg-2:#eef3f9; --mh-surface:#ffffff; --mh-surface-2:#f3f7fc; --mh-line:#dbe4f0; --mh-ink:#0f1c30; --mh-ink-2:#3d4d68; --mh-ink-3:#68789a; --mh-shadow:0 18px 44px -26px rgb(15 28 48 / .28); } .marketing-home:not(.dark) .hero-land h1, .marketing-home:not(.dark) .hero-land .stat b, .marketing-home:not(.dark) .feat h3, .marketing-home:not(.dark) .step h3, .marketing-home:not(.dark) .bstat .num, .marketing-home:not(.dark) .trustcard b, .marketing-home:not(.dark) .pricecard h3, .marketing-home:not(.dark) .cmptable th, .marketing-home:not(.dark) .mh-cap b, .marketing-home:not(.dark) .mh-node b, .marketing-home:not(.dark) .mh-final h2, .marketing-home:not(.dark) .statsband .card h2, .marketing-home:not(.dark) .statsband .card h3{ color:#0f1c30; } /* surfaces that were hard-coded dark */ .marketing-home:not(.dark) .feat, .marketing-home:not(.dark) .step, .marketing-home:not(.dark) .bstat, .marketing-home:not(.dark) .trustcard, .marketing-home:not(.dark) .pricecard, .marketing-home:not(.dark) .mh-node, .marketing-home:not(.dark) .faq, .marketing-home:not(.dark) .statsband .card{ background:linear-gradient(180deg,#ffffff,#f7fafd); } .marketing-home:not(.dark) .mh-vis-cell, .marketing-home:not(.dark) .mh-vis-chart, .marketing-home:not(.dark) .mh-vis-row, .marketing-home:not(.dark) .cmptable th, .marketing-home:not(.dark) blockquote{ background:#f3f7fc; } .marketing-home:not(.dark) .mh-visual, .marketing-home:not(.dark) .mh-final-inner{ background:linear-gradient(160deg,#eef4fc,#f7fafd 62%); } .marketing-home:not(.dark) .cta.ghost{ background:#ffffffcc; } .marketing-home:not(.dark) .proof-chip{ background:#ffffff; } .marketing-home:not(.dark) .cmptable{ background:#ffffff; } /* ========================================================================== 14 · PRINT + MOTION SAFETY ========================================================================== */ @media print{ .marketing-home .mh-visual,.marketing-home .hero-glow,.marketing-home .hero-fx{ display:none; } } @media (prefers-reduced-motion:reduce){ .marketing-home *,.marketing-home *::before,.marketing-home *::after{ animation-duration:.001ms; animation-iteration-count:1; transition-duration:.001ms; } } /* ========================================================================== 15 · LTR SUPPORT (English /en/ pages) -------------------------------------------------------------------------- Everything above uses logical properties, so layout mirrors automatically. Only DIRECTIONAL GLYPHS and their hover nudges need a fork. Guard: `html:not([dir="rtl"])`. The Arabic homepage is , so NONE of these rules can ever match it — verified by selector audit. This block is inert for Arabic even though both languages share this one stylesheet. `:not([dir="rtl"])` (rather than `[dir="ltr"]`) is used deliberately so it still applies if the English page omits the dir attribute entirely. ========================================================================== */ html:not([dir="rtl"]) .marketing-home .mh-arrow::before{ content:"\2192"; } /* → */ html:not([dir="rtl"]) .marketing-home .mh-cardlink::after{ content:"\203A"; } /* › */ html:not([dir="rtl"]) .marketing-home .mh-cardlink:hover::after{ transform:translateX(4px); } @media (max-width:900px){ /* stacked flow: arrow must point DOWN, not up */ html:not([dir="rtl"]) .marketing-home .mh-arrow{ transform:rotate(90deg); } } /* English sets tighter line-height than Arabic — Cairo needs more leading */ html:not([dir="rtl"]) .marketing-home .sec-sub{ line-height:1.75; } html:not([dir="rtl"]) .marketing-home .hero-land .lead{ line-height:1.7; } html:not([dir="rtl"]) .marketing-home .feat p, html:not([dir="rtl"]) .marketing-home .step p, html:not([dir="rtl"]) .marketing-home .trustcard p, html:not([dir="rtl"]) .marketing-home .faq p{ line-height:1.75; } html:not([dir="rtl"]) .marketing-home .hero-land h1{ letter-spacing:-.03em; } /* ========================================================================== 16 · PERFORMANCE PAGE (/performance/ and /en/performance/) Additive only. Every selector is scoped under .marketing-home AND uses .mhp-* / .crumbs classes that do not exist on either homepage, so this block is inert for the home pages. ========================================================================== */ .marketing-home .crumbs{ font-size:.84rem; color:var(--mh-ink-3); margin-bottom:18px; } .marketing-home .crumbs a{ color:var(--mh-ink-2); text-decoration:none; } .marketing-home .crumbs a:hover{ color:var(--mh-brand-2); text-decoration:underline; } .marketing-home .mhp-hero{ padding-block:clamp(34px,5vw,72px) clamp(40px,5vw,80px); } .marketing-home .mhp-hero h1{ max-width:20ch; } .marketing-home .mhp-panel{ margin-top:8px; } .marketing-home .mhp-empty{ display:grid; place-items:center; gap:12px; text-align:center; padding:clamp(34px,6vw,66px) 22px; background:#0c1424; border-radius:var(--mh-r-sm); box-shadow:var(--mh-ring); } .marketing-home .mhp-empty p{ margin:0; color:var(--mh-ink-2); font-size:.92rem; line-height:1.9; max-width:52ch; } .marketing-home .mhp-empty p b{ color:#fff; font-size:1.02rem; } .marketing-home .mhp-empty .cta{ margin-top:6px; } /* six-up summary that degrades cleanly and never overflows */ .marketing-home .mhp-hero + .statsband .bigstats, .marketing-home .statsband .bigstats{ grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); } .marketing-home .bstat b[data-mhp]{ color:var(--mh-ink-2); } .marketing-home:not(.dark) .mhp-empty{ background:#f3f7fc; } .marketing-home:not(.dark) .mhp-empty p b{ color:#0f1c30; } /* ========================================================================== 17 · DASHBOARD VISUAL ALIGNMENT — homepage only Style-only overrides for the existing homepage markup. No content changes. ========================================================================== */ .marketing-home.dark, .marketing-home{ --bg:#050a14; --card:#0b1424; --line:#1b2b45; --ink:#eef4ff; --muted:#8393ad; --gold:#4f7cff; --gold-soft:#0f1d3b; --gold-deep:#79a2ff; --dow:#3b82f6; --dow-soft:#0c1b36; --dow-deep:#60a5fa; --green:#18d39e; --green-bg:#082820; --red:#ff5f76; --red-bg:#32131b; --amber:#f5b544; --amber-bg:#2d2412; --blue:#4f7cff; --blue-bg:#0d1a36; --radius:14px; --shadow:0 10px 32px rgba(0,0,0,.22); --shadow-lift:0 18px 50px rgba(0,0,0,.34),0 0 0 1px rgba(79,124,255,.14); --topbar-bg:rgba(5,10,20,.86); --hero-grad:linear-gradient(180deg,rgba(10,19,36,.72),rgba(5,10,20,.96)); background:#050a14; color:var(--ink); } .marketing-home.dark{ background: radial-gradient(900px 420px at 82% -8%,rgba(55,104,255,.11),transparent 60%), radial-gradient(760px 360px at 12% 0%,rgba(24,211,158,.055),transparent 62%), #050a14; } .marketing-home .topbar{ min-height:72px; background:rgba(5,10,20,.88); border-bottom:1px solid #17253d; box-shadow:0 8px 28px rgba(0,0,0,.18); } .marketing-home .brand .logo{filter:drop-shadow(0 0 16px rgba(79,124,255,.28));} .marketing-home .brand .brandname .ai{ background:linear-gradient(90deg,#5f8cff,#7b61ff); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .marketing-home .navlinks a{color:#7f90ab;border:1px solid transparent;} .marketing-home .navlinks a:hover{color:#eef4ff;background:#0c1628;border-color:#1b2b45;} .marketing-home .navcta.main, .marketing-home .cta.main{ color:#fff; background:linear-gradient(135deg,#3478ff 0%,#5657ff 100%); box-shadow:0 10px 28px rgba(60,92,255,.25),inset 0 1px rgba(255,255,255,.16); } .marketing-home .navcta.ghost, .marketing-home .cta.ghost, .marketing-home .themebtn, .marketing-home .statuschip{ color:#dce7fa;background:#0a1425;border-color:#1b2b45;box-shadow:none; } .marketing-home .hero-land{ min-height:620px; display:flex;align-items:center; background: linear-gradient(90deg,rgba(5,10,20,.96),rgba(5,10,20,.76) 52%,rgba(5,10,20,.9)), linear-gradient(180deg,rgba(20,43,84,.12),rgba(5,10,20,.92)), url('/assets/img/hero.webp') center 24%/cover no-repeat; border-bottom:1px solid #17253d; } .marketing-home .hero-land::after{background:linear-gradient(180deg,transparent 58%,#050a14 100%);} .marketing-home .hero-glow.g1{background:radial-gradient(circle,rgba(60,92,255,.32),transparent 67%);} .marketing-home .hero-glow.g2{background:radial-gradient(circle,rgba(24,211,158,.16),transparent 67%);} .marketing-home .hero-land .pill{ background:rgba(8,19,34,.78);border:1px solid rgba(24,211,158,.22);color:#9fb0ca;box-shadow:none; } .marketing-home .hero-land h1{font-size:clamp(32px,5vw,58px);line-height:1.28;letter-spacing:-.02em;} .marketing-home .hero-land h1 em{ background:linear-gradient(90deg,#5d8cff,#6f67ff 50%,#27d7ad); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .marketing-home .hero-land p.lead{color:#a7b5c9;max-width:860px;} .marketing-home .hero-land .stats-row{border-top:1px solid rgba(115,145,190,.16);padding-top:28px;} .marketing-home .hero-land .stat b{ background:none;-webkit-text-fill-color:initial;color:#f5f8ff; } .marketing-home .hero-land .stat span{color:#71829d;} .marketing-home main > section:not(.hero-land){position:relative;} .marketing-home .statsband, .marketing-home .features, .marketing-home .probsec, .marketing-home .services, .marketing-home .brokers, .marketing-home .dash-sec, .marketing-home .trustband, .marketing-home .tgsec, .marketing-home .howto, .marketing-home .cmpsec, .marketing-home .faqsec{ background:#050a14; border-color:#17253d; } .marketing-home .statsband, .marketing-home .howto, .marketing-home .trustband, .marketing-home .tgsec{ background:linear-gradient(180deg,#08111f 0%,#050a14 100%); } .marketing-home .sec-title{color:#f2f6ff;letter-spacing:-.015em;} .marketing-home .sec-title em{ background:linear-gradient(90deg,#5d8cff,#27d7ad); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .marketing-home .sec-sub{color:#7f90aa;} .marketing-home .feat, .marketing-home .step, .marketing-home .card, .marketing-home .trustcard, .marketing-home .pricecard, .marketing-home .faq, .marketing-home .broker-card, .marketing-home .service-card{ background:linear-gradient(180deg,#0c1628 0%,#091321 100%); border:1px solid #1b2b45; box-shadow:0 12px 34px rgba(0,0,0,.16); } .marketing-home .feat:hover, .marketing-home .step:hover, .marketing-home .trustcard:hover, .marketing-home .pricecard:hover{ transform:translateY(-4px); border-color:#2c4773; box-shadow:0 18px 44px rgba(0,0,0,.26),0 0 28px rgba(52,120,255,.07); } .marketing-home .feat::after{height:2px;background:linear-gradient(90deg,#3478ff,#5657ff,#18d39e);} .marketing-home .feat .fic, .marketing-home .stepnum{ background:linear-gradient(145deg,#132541,#0c1729); border:1px solid #24416c; box-shadow:inset 0 1px rgba(255,255,255,.04),0 8px 20px rgba(0,0,0,.18); } .marketing-home .feat h3,.marketing-home .step h3,.marketing-home .card h2,.marketing-home .card h3{color:#edf3ff;} .marketing-home .feat p,.marketing-home .step p{color:#8191aa;} .marketing-home .bigstats{gap:14px;} .marketing-home .bstat{ text-align:start; padding:20px 22px; border:1px solid #1b2b45 !important; border-radius:14px; background:linear-gradient(180deg,#0c1628,#091321); box-shadow:0 10px 28px rgba(0,0,0,.14); } .marketing-home .bstat b{font-size:clamp(27px,3.5vw,40px);color:#f2f6ff;} .marketing-home .bstat span{color:#71819a;letter-spacing:.3px;} .marketing-home .dash-sec{background:radial-gradient(800px 320px at 50% 0%,rgba(52,120,255,.06),transparent 70%),#050a14;} .marketing-home .dash-sec .card{border-color:#1d3150;} .marketing-home .faq summary{color:#e8effc;} .marketing-home .faq p{color:#8191aa;} .marketing-home a{transition:color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;} .marketing-home .steplink,.marketing-home .footlinks a:hover{color:#6f9cff;} .marketing-home footer{background:#040812;border-top:1px solid #17253d;} @media (max-width:820px){ .marketing-home .hero-land{min-height:auto;background-position:center top;} .marketing-home .topbar{min-height:64px;} .marketing-home .bstat{text-align:center;} } /* ====================================================================== 18 · PREMIUM BLUE FINTECH POLISH — 2026-08-17 Visual-only pass requested for the homepage. Keeps content/markup intact. ====================================================================== */ .marketing-home.dark, .marketing-home{ --bg:#07111f; --card:#0d1a2d; --line:#203553; --ink:#f4f7ff; --muted:#95a6bf; --gold:#4f8dff; --gold-deep:#83adff; --dow:#4ba3ff; --dow-deep:#7fc0ff; --green:#20d6a4; --blue:#4f8dff; --radius:16px; --topbar-bg:rgba(6,16,30,.82); background: radial-gradient(1100px 520px at 84% -12%,rgba(72,121,255,.18),transparent 62%), radial-gradient(800px 420px at 10% 6%,rgba(33,157,255,.10),transparent 65%), linear-gradient(180deg,#081425 0%,#07111f 46%,#06101d 100%); } .marketing-home .topbar{ background:rgba(6,16,30,.82); border-bottom:1px solid rgba(84,126,190,.22); box-shadow:0 14px 40px rgba(0,0,0,.20); backdrop-filter:blur(18px) saturate(130%); -webkit-backdrop-filter:blur(18px) saturate(130%); } .marketing-home .navlinks a{color:#90a2bd;} .marketing-home .navlinks a:hover{ color:#fff; background:linear-gradient(180deg,rgba(23,46,80,.78),rgba(12,29,52,.78)); border-color:rgba(87,136,211,.28); } .marketing-home .brand .logo{ filter:drop-shadow(0 0 20px rgba(75,137,255,.34)); } .marketing-home .navcta.main, .marketing-home .cta.main{ background:linear-gradient(135deg,#3e8dff 0%,#4d6dff 48%,#6754ff 100%); box-shadow:0 14px 32px rgba(62,104,255,.28),inset 0 1px rgba(255,255,255,.22); } .marketing-home .navcta.main:hover, .marketing-home .cta.main:hover{ box-shadow:0 18px 38px rgba(62,104,255,.38),0 0 0 1px rgba(255,255,255,.06) inset; } .marketing-home .navcta.ghost, .marketing-home .cta.ghost, .marketing-home .themebtn, .marketing-home .statuschip{ background:linear-gradient(180deg,rgba(15,31,54,.92),rgba(10,24,43,.92)); border-color:rgba(72,113,175,.28); } /* Make the existing hero artwork materially more visible while retaining text contrast. */ .marketing-home .hero-land{ min-height:660px; background: linear-gradient(90deg,rgba(6,15,29,.90) 0%,rgba(6,15,29,.72) 42%,rgba(6,15,29,.46) 68%,rgba(6,15,29,.58) 100%), linear-gradient(180deg,rgba(38,104,196,.10) 0%,rgba(7,17,31,.18) 55%,rgba(7,17,31,.74) 100%), url('/assets/img/hero.webp') center 24%/cover no-repeat; border-bottom:1px solid rgba(74,113,170,.25); isolation:isolate; } .marketing-home .hero-land::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background: radial-gradient(720px 460px at 76% 40%,rgba(72,139,255,.18),transparent 68%), linear-gradient(180deg,rgba(6,20,38,.02),rgba(7,17,31,.10)); } .marketing-home .hero-land::after{ background:linear-gradient(180deg,transparent 70%,#07111f 100%); } .marketing-home .hero-land .container{position:relative;z-index:2;} .marketing-home .hero-glow.g1{opacity:.62;background:radial-gradient(circle,rgba(55,124,255,.32),transparent 68%);} .marketing-home .hero-glow.g2{opacity:.45;background:radial-gradient(circle,rgba(45,187,255,.17),transparent 68%);} .marketing-home .hero-land .pill{ background:linear-gradient(180deg,rgba(12,31,55,.82),rgba(9,24,43,.76)); border-color:rgba(70,151,255,.30); color:#b9c9de; box-shadow:0 8px 24px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.04); } .marketing-home .hero-land h1{ color:#fff; text-shadow:0 4px 30px rgba(0,0,0,.56),0 0 44px rgba(48,104,213,.10); } .marketing-home .hero-land h1 em{ background:linear-gradient(90deg,#79adff 0%,#5f8fff 46%,#52c3ff 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .marketing-home .hero-land p.lead{ color:#c0ccdc; text-shadow:0 2px 14px rgba(0,0,0,.45); } .marketing-home .hero-land .stats-row{ border-top:1px solid rgba(119,154,206,.18); } .marketing-home .hero-land .stat b{color:#fff;} .marketing-home .hero-land .stat span{color:#95a5bc;} /* Slightly lighter, more premium surfaces with a blue cast. */ .marketing-home .statsband, .marketing-home .features, .marketing-home .probsec, .marketing-home .services, .marketing-home .brokers, .marketing-home .dash-sec, .marketing-home .trustband, .marketing-home .tgsec, .marketing-home .howto, .marketing-home .cmpsec, .marketing-home .faqsec{ background:linear-gradient(180deg,#081525 0%,#07111f 100%); border-color:rgba(74,113,170,.22); } .marketing-home .statsband, .marketing-home .howto, .marketing-home .trustband, .marketing-home .tgsec{ background: radial-gradient(760px 260px at 82% 0%,rgba(56,116,255,.07),transparent 70%), linear-gradient(180deg,#0a182b 0%,#07111f 100%); } .marketing-home .feat, .marketing-home .step, .marketing-home .card, .marketing-home .trustcard, .marketing-home .pricecard, .marketing-home .faq, .marketing-home .broker-card, .marketing-home .service-card, .marketing-home .mh-node, .marketing-home .mh-visual{ background:linear-gradient(155deg,#10213a 0%,#0b182b 58%,#091524 100%); border:1px solid rgba(72,113,175,.30); box-shadow:0 16px 38px rgba(0,0,0,.19),inset 0 1px rgba(255,255,255,.025); } .marketing-home .feat:hover, .marketing-home .step:hover, .marketing-home .trustcard:hover, .marketing-home .pricecard:hover, .marketing-home .broker-card:hover, .marketing-home .service-card:hover{ border-color:rgba(83,146,255,.56); box-shadow:0 22px 52px rgba(0,0,0,.27),0 0 36px rgba(58,124,255,.10),inset 0 1px rgba(255,255,255,.035); } .marketing-home .feat .fic, .marketing-home .stepnum{ background:linear-gradient(145deg,#183359,#102441); border-color:rgba(83,146,255,.38); } .marketing-home .sec-title{color:#f7f9ff;} .marketing-home .sec-title em{ background:linear-gradient(90deg,#78a9ff,#55bdfb); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .marketing-home .sec-sub{color:#94a6bf;} .marketing-home .mh-vis-cell, .marketing-home .mh-vis-chart, .marketing-home .mh-vis-row{ background:linear-gradient(180deg,#0e1d34,#0a1729); box-shadow:0 0 0 1px rgba(75,117,178,.28); } /* Cleaner premium depth for live dashboard wrapper without touching its internals. */ .marketing-home .dash-sec{ background: radial-gradient(900px 300px at 50% 0%,rgba(58,119,255,.075),transparent 72%), linear-gradient(180deg,#091729 0%,#07111f 100%); } @media (max-width:820px){ .marketing-home .hero-land{ min-height:auto; background: linear-gradient(180deg,rgba(6,15,29,.64) 0%,rgba(6,15,29,.55) 36%,rgba(7,17,31,.80) 100%), url('/assets/img/hero-mobile.webp') center top/cover no-repeat; } .marketing-home .hero-land::before{ background:radial-gradient(520px 320px at 50% 28%,rgba(65,135,255,.16),transparent 70%); } }