/* ================================================================= AP Markets · Animations layer Scroll reveals, counters, marquee, hover effects, page transitions. Respects prefers-reduced-motion. ================================================================= */ /* --- Page-load fade --- NOTE: intentionally opacity-only. Applying transform to creates a new containing block for position:fixed descendants (mobile nav overlay, FAB), which breaks their positioning. */ @keyframes apm-page-in { from { opacity: 0; } to { opacity: 1; } } body { animation: apm-page-in .35s ease-out; } /* --- Scroll reveal --- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.16,.84,.32,1), transform .8s cubic-bezier(.16,.84,.32,1); will-change: opacity, transform; } .reveal.visible { opacity: 1; transform: none; } .reveal-fade { transform: none; } .reveal-left { transform: translateX(-32px); } .reveal-right { transform: translateX(32px); } .reveal-scale { transform: scale(.95); transform-origin: center; } .reveal.visible.reveal-left, .reveal.visible.reveal-right { transform: translateX(0); } .reveal.visible.reveal-scale { transform: scale(1); } /* Stagger children — applied automatically by js/animations.js */ .reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .6s cubic-bezier(.16,.84,.32,1), transform .6s cubic-bezier(.16,.84,.32,1); } .reveal-stagger.visible > * { opacity: 1; transform: none; } .reveal-stagger.visible > *:nth-child(1) { transition-delay: 0ms; } .reveal-stagger.visible > *:nth-child(2) { transition-delay: 80ms; } .reveal-stagger.visible > *:nth-child(3) { transition-delay: 160ms; } .reveal-stagger.visible > *:nth-child(4) { transition-delay: 240ms; } .reveal-stagger.visible > *:nth-child(5) { transition-delay: 320ms; } .reveal-stagger.visible > *:nth-child(6) { transition-delay: 400ms; } .reveal-stagger.visible > *:nth-child(7) { transition-delay: 480ms; } .reveal-stagger.visible > *:nth-child(8) { transition-delay: 560ms; } /* --- Hover lift everywhere --- */ .asset-card, .account-card, .why-card, .platforms-feature, .mod-card-acct, .dl-card, .office-card, .doc-link, .contact-row { transition: transform .35s cubic-bezier(.16,.84,.32,1), box-shadow .35s cubic-bezier(.16,.84,.32,1), border-color .25s ease; } .asset-card:hover, .account-card:hover, .why-card:hover, .platforms-feature:hover, .mod-card-acct:hover, .dl-card:hover, .office-card:hover { transform: translateY(-4px); } /* --- Buttons --- */ .btn { transition: all .22s cubic-bezier(.16,.84,.32,1); position: relative; overflow: hidden; } .btn-primary { position: relative; } .btn-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 60%); opacity: 0; transition: opacity .25s ease; pointer-events: none; } .btn-primary:hover::after { opacity: 1; } .btn:active { transform: translateY(1px) scale(.98); } /* --- Nav link underline animation --- */ .nav-menu a { position: relative; } .nav-menu a::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 100%; height: 2px; background: var(--apm-blue); transform: scaleX(0); transform-origin: right; transition: transform .35s cubic-bezier(.16,.84,.32,1); } .nav-menu a:hover::after { transform: scaleX(1); transform-origin: left; } /* --- Pulse for badges / dots --- */ @keyframes apm-pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,.7); } 70% { box-shadow: 0 0 0 8px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } } .utility-pill .dot { animation: apm-pulse-dot 2s ease-out infinite; } @keyframes apm-pulse-bg { 0%, 100% { background: rgba(46,107,255,.15); } 50% { background: rgba(46,107,255,.30); } } .hero-eyebrow .badge-new { animation: apm-pulse-bg 2.4s ease-in-out infinite; } /* --- Notification dot bobble --- */ @keyframes apm-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } /* --- Hero aurora glow (animated background) --- */ @keyframes apm-aurora { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(40px, -30px) rotate(2deg); } 66% { transform: translate(-30px, 20px) rotate(-2deg); } } .hero::after { animation: apm-aurora 18s ease-in-out infinite; } /* --- Hero chart line draw --- */ @keyframes apm-draw-line { from { stroke-dashoffset: 800; } to { stroke-dashoffset: 0; } } .hero-visual svg path[stroke="#7BA4FF"], .hero-visual svg path[stroke="#2E6BFF"] { stroke-dasharray: 800; animation: apm-draw-line 2s ease-out forwards; } @keyframes apm-blink-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .hero-visual svg circle[opacity="0.25"] { animation: apm-blink-dot 1.6s ease-in-out infinite; } /* --- Hover lift on hero CTAs / chart --- */ .hero-visual { transition: transform .5s cubic-bezier(.16,.84,.32,1); } .hero-visual:hover { transform: translateY(-3px); } /* --- Price ticker marquee (asset strip) --- */ .price-marquee { background: var(--apm-navy); color: rgba(255,255,255,.85); border-top: 1px solid rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.05); overflow: hidden; padding: 0; font-size: 13px; position: relative; } .price-marquee::before, .price-marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; } .price-marquee::before { left: 0; background: linear-gradient(90deg, var(--apm-navy), transparent); } .price-marquee::after { right: 0; background: linear-gradient(-90deg, var(--apm-navy), transparent); } .price-marquee-track { display: flex; gap: 48px; padding: 14px 0; width: max-content; animation: apm-marquee 60s linear infinite; } .price-marquee:hover .price-marquee-track { animation-play-state: paused; } @keyframes apm-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .price-tick { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .price-tick .sym { font-weight: 700; color: rgba(255,255,255,.85); } .price-tick .px { font-variant-numeric: tabular-nums; font-weight: 600; } .price-tick .chg { font-weight: 600; font-size: 11.5px; padding: 1px 6px; border-radius: 999px; } .price-tick .chg.up { color: #4ade80; background: rgba(74,222,128,.10); } .price-tick .chg.dn { color: #f87171; background: rgba(248,113,113,.10); } /* --- Counter (number animation) --- */ [data-counter] { display: inline-block; font-variant-numeric: tabular-nums; } /* --- Scroll progress bar at top of page --- */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--apm-blue), #7BA4FF); z-index: 200; transition: width .12s ease-out; } /* --- Asset card icon gentle float --- */ @keyframes apm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .asset-card:hover .asset-card-icon, .platforms-feature:hover .platforms-feature-icon, .why-card:hover .why-card-icon { animation: apm-float 1.8s ease-in-out infinite; background: var(--apm-blue); color: white; transition: background .25s, color .25s; } /* --- Image lazy entrance --- */ img[loading="lazy"] { transition: opacity .4s ease; } /* ============================================================ Trust strip icons — float on idle, brighten on scroll into view ============================================================ */ .trust-item .icon { transition: transform .35s cubic-bezier(.16,.84,.32,1), filter .35s ease; display: inline-block; } .trust-grid.visible .trust-item:nth-child(1) .icon { animation: apm-float 3.2s ease-in-out infinite; animation-delay: 0s; } .trust-grid.visible .trust-item:nth-child(2) .icon { animation: apm-float 3.2s ease-in-out infinite; animation-delay: .25s; } .trust-grid.visible .trust-item:nth-child(3) .icon { animation: apm-float 3.2s ease-in-out infinite; animation-delay: .5s; } .trust-grid.visible .trust-item:nth-child(4) .icon { animation: apm-float 3.2s ease-in-out infinite; animation-delay: .75s; } .trust-grid.visible .trust-item:nth-child(5) .icon { animation: apm-float 3.2s ease-in-out infinite; animation-delay: 1s; } .trust-grid.visible .trust-item:nth-child(6) .icon { animation: apm-float 3.2s ease-in-out infinite; animation-delay: 1.25s; } .trust-item:hover .icon { transform: scale(1.15) rotate(-4deg); filter: drop-shadow(0 6px 14px rgba(46,107,255,.45)); } /* Number value count-in flash */ @keyframes apm-val-pop { 0% { transform: scale(.92); opacity: 0; } 60% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); } } .trust-grid.visible .trust-item .val { animation: apm-val-pop .6s cubic-bezier(.16,.84,.32,1) both; } .trust-grid.visible .trust-item:nth-child(1) .val { animation-delay: .05s; } .trust-grid.visible .trust-item:nth-child(2) .val { animation-delay: .15s; } .trust-grid.visible .trust-item:nth-child(3) .val { animation-delay: .25s; } .trust-grid.visible .trust-item:nth-child(4) .val { animation-delay: .35s; } .trust-grid.visible .trust-item:nth-child(5) .val { animation-delay: .45s; } /* ============================================================ Hero EUR/USD widget — live ring pulse + flashing dot ============================================================ */ @keyframes apm-ring-pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } } .hero-visual svg circle[r="8"] { transform-origin: center; transform-box: fill-box; animation: apm-ring-pulse 1.8s ease-out infinite; } .hero-visual-price { transition: color .2s ease; } .hero-visual-price.flash-up { color: #4ade80; } .hero-visual-price.flash-dn { color: #f87171; } /* Tab buttons gain shine on hover */ .hero-visual-tab button { transition: background .25s ease, color .25s ease, transform .2s ease; } .hero-visual-tab button:hover:not(.active) { background: rgba(255,255,255,.08); transform: translateY(-1px); } /* ============================================================ Timeline — interactive line draw + dot pulse ============================================================ */ .timeline-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 80px; } @media (max-width: 1023px) { .timeline-track { grid-template-columns: repeat(2, 1fr); gap: 32px; } } @media (max-width: 540px) { .timeline-track { grid-template-columns: 1fr; padding-top: 24px; } } .timeline-track::before { content: ''; position: absolute; top: 42px; left: 24px; right: 24px; height: 3px; background: linear-gradient(90deg, rgba(46,107,255,.10) 0%, rgba(46,107,255,.20) 50%, rgba(46,107,255,.10) 100%); border-radius: 3px; z-index: 0; } .timeline-track::after { content: ''; position: absolute; top: 42px; left: 24px; height: 3px; width: 0; background: linear-gradient(90deg, var(--apm-blue) 0%, #7BA4FF 100%); border-radius: 3px; z-index: 1; transition: width 2.4s cubic-bezier(.16,.84,.32,1); box-shadow: 0 0 12px rgba(46,107,255,.50); } .timeline-track.visible::after { width: calc(100% - 48px); } @media (max-width: 540px) { .timeline-track::before, .timeline-track::after { display: none; } } .timeline-item { position: relative; cursor: pointer; background: transparent; border: 1px solid transparent; border-radius: 18px; padding: 64px 22px 24px; text-align: center; transition: transform .4s cubic-bezier(.16,.84,.32,1), border-color .35s ease, background .35s ease, box-shadow .35s ease, padding .4s ease; min-height: 180px; } .timeline-item:hover, .timeline-item:focus-within, .timeline-item.is-active { transform: translateY(-4px); border-color: var(--apm-blue); background: white; box-shadow: 0 22px 40px -18px rgba(46,107,255,.30); } .timeline-item::before { content: ''; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; border-radius: 50%; background: white; border: 4px solid var(--apm-slate-300); z-index: 2; transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease; } .timeline-track.visible .timeline-item::before { border-color: var(--apm-blue); box-shadow: 0 0 0 6px rgba(46,107,255,.12); } .timeline-track.visible .timeline-item:nth-child(1)::before { transition-delay: .25s; } .timeline-track.visible .timeline-item:nth-child(2)::before { transition-delay: .80s; } .timeline-track.visible .timeline-item:nth-child(3)::before { transition-delay: 1.35s; } .timeline-track.visible .timeline-item:nth-child(4)::before { transition-delay: 1.90s; } .timeline-item:hover::before, .timeline-item:focus-within::before, .timeline-item.is-active::before { transform: translateX(-50%) scale(1.30); box-shadow: 0 0 0 10px rgba(46,107,255,.18); } @keyframes apm-ring-pulse-blue-v2 { 0% { transform: translateX(-50%) scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(46,107,255,.50); } 100% { transform: translateX(-50%) scale(1); opacity: 1; box-shadow: 0 0 0 16px rgba(46,107,255,0); } } .timeline-track.visible .timeline-item:last-child::after { content: ''; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--apm-blue); animation: apm-ring-pulse-blue-v2 2s ease-out infinite; animation-delay: 2.4s; z-index: 1; } .timeline-item .year { font-size: 44px; font-weight: 900; background: linear-gradient(135deg, var(--apm-blue) 0%, #7BA4FF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 8px; letter-spacing: -.02em; line-height: 1; transition: transform .35s cubic-bezier(.16,.84,.32,1), font-size .35s ease; } .timeline-item:hover .year, .timeline-item:focus-within .year, .timeline-item.is-active .year { transform: translateY(-4px) scale(1.05); } /* h4 + p are hidden by default — appear only on hover / focus / active */ .timeline-item h4, .timeline-item p { opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease, max-height .35s ease; max-height: 0; overflow: hidden; margin: 0; } .timeline-item:hover h4, .timeline-item:focus-within h4, .timeline-item.is-active h4 { opacity: 1; transform: none; max-height: 40px; margin-bottom: 8px; margin-top: 6px; transition-delay: .05s; } .timeline-item:hover p, .timeline-item:focus-within p, .timeline-item.is-active p { opacity: 1; transform: none; max-height: 180px; transition-delay: .15s; } .timeline-item h4 { font-size: 17px; font-weight: 700; color: var(--apm-navy); } .timeline-item p { font-size: 13.5px; color: var(--apm-slate-700); line-height: 1.6; } /* Hint indicator below year — "Hover para ver más" */ .timeline-item .year::after { content: ''; display: block; width: 24px; height: 2px; margin: 10px auto 0; background: var(--apm-slate-300); border-radius: 2px; transition: width .35s ease, background .35s ease; } .timeline-item:hover .year::after, .timeline-item:focus-within .year::after, .timeline-item.is-active .year::after { width: 48px; background: var(--apm-blue); } /* ============================================================ Partners (Socios IB) banner — animated gradient + shine sweep ============================================================ */ .partners-cta { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--apm-blue) 0%, #4A82FF 50%, var(--apm-blue) 100%); background-size: 200% 200%; animation: apm-gradient-shift 12s ease-in-out infinite; border-radius: 24px; isolation: isolate; } @keyframes apm-gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .partners-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 15% 20%, rgba(255,255,255,.18), transparent 40%), radial-gradient(circle at 85% 80%, rgba(255,255,255,.10), transparent 50%); z-index: -1; } .partners-cta::after { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.20), transparent); transform: skewX(-20deg); animation: apm-shine 6s ease-in-out infinite; pointer-events: none; } @keyframes apm-shine { 0%, 80% { left: -75%; } 100% { left: 175%; } } .partners-cta .btn:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(10,22,38,.20); } /* ============================================================ Final CTA — Empezá a operar hoy — modern animated background ============================================================ */ .final-cta-section { position: relative; overflow: hidden; padding: 110px 0; background: linear-gradient(135deg, var(--apm-navy) 0%, #0E2240 60%, #102A52 100%); color: white; isolation: isolate; text-align: center; } /* Layered animated aurora background */ .final-cta-section::before { content: ''; position: absolute; top: 50%; left: 50%; width: 1000px; height: 1000px; transform: translate(-50%, -50%); background: radial-gradient(circle at 35% 35%, rgba(46,107,255,.45) 0%, transparent 50%), radial-gradient(circle at 65% 70%, rgba(123,164,255,.30) 0%, transparent 55%); z-index: -1; animation: apm-aurora 14s ease-in-out infinite; filter: blur(50px); } .final-cta-section::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(123,164,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(123,164,255,.06) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%); z-index: -1; pointer-events: none; } .final-cta-section .container, .final-cta-section .container-narrow { position: relative; z-index: 1; } /* Sparkle accent dots */ .final-cta-section .container::before, .final-cta-section .container::after { content: ''; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #7BA4FF; box-shadow: 0 0 12px rgba(123,164,255,.80); animation: apm-blink-dot 2s ease-in-out infinite; } .final-cta-section .container::before { top: 20%; left: 12%; animation-delay: .3s; } .final-cta-section .container::after { bottom: 30%; right: 14%; animation-delay: 1s; } .final-cta-section h2 { font-size: clamp(38px, 5.5vw, 64px); letter-spacing: -.025em; line-height: 1.05; margin-bottom: 18px; color: white; text-shadow: 0 4px 24px rgba(0,8,28,.35); } .final-cta-section p { font-size: 19px; max-width: 600px; margin: 0 auto 40px; color: rgba(255,255,255,.78); line-height: 1.65; } .final-cta-section .cta-buttons, .final-cta-section .bigcta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .final-cta-section .btn { padding: 18px 36px; font-size: 15.5px; font-weight: 800; letter-spacing: -.005em; } .final-cta-section .btn-primary { background: linear-gradient(135deg, var(--apm-blue) 0%, #4A82FF 100%); box-shadow: 0 1px 0 0 rgba(255,255,255,.20) inset, 0 16px 36px -8px rgba(46,107,255,.55), 0 4px 12px rgba(46,107,255,.30); position: relative; overflow: visible; border: 1px solid rgba(123,164,255,.40); } /* Animated gradient border halo on primary CTA */ .final-cta-section .btn-primary::before { content: ''; position: absolute; inset: -4px; border-radius: inherit; background: linear-gradient(135deg, #7BA4FF 0%, var(--apm-blue) 30%, #7BA4FF 60%, var(--apm-blue) 100%); background-size: 300% 100%; z-index: -1; opacity: .85; animation: apm-gradient-shift 3s linear infinite; filter: blur(8px); } .final-cta-section .btn-primary:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 1px 0 0 rgba(255,255,255,.25) inset, 0 24px 50px -10px rgba(46,107,255,.65), 0 8px 20px rgba(46,107,255,.40); } .final-cta-section .btn-primary:hover::before { opacity: 1; filter: blur(12px); } .final-cta-section .btn-ghost, .final-cta-section .btn-ghost-light { background: rgba(255,255,255,.06); color: white; border: 1px solid rgba(255,255,255,.20); backdrop-filter: blur(10px); } .final-cta-section .btn-ghost:hover, .final-cta-section .btn-ghost-light:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.40); transform: translateY(-2px); } /* Placeholder image style — used wherever a real image is yet to land */ .img-placeholder { position: relative; border-radius: 16px; background: linear-gradient(135deg, rgba(46,107,255,.06), rgba(46,107,255,.02)), repeating-linear-gradient(45deg, var(--apm-slate-100) 0 10px, transparent 10px 20px); border: 1px dashed rgba(46,107,255,.30); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: var(--apm-slate-500); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; min-height: 220px; overflow: hidden; } .img-placeholder::before { content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(46,107,255,.15), transparent); animation: apm-shine 4s ease-in-out infinite; } .img-placeholder svg { width: 48px; height: 48px; color: var(--apm-blue); opacity: .55; position: relative; z-index: 1; } .img-placeholder span { position: relative; z-index: 1; } /* ============================================================ Help Center — chips, FAQ accordion, contact channels ============================================================ */ .help-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: white; border: 1px solid var(--apm-slate-200); font-size: 13.5px; font-weight: 600; color: var(--apm-slate-700); cursor: pointer; transition: all .2s ease; font-family: inherit; } .help-chip:hover { border-color: var(--apm-blue); color: var(--apm-blue); } .help-chip.active { background: var(--apm-blue); border-color: var(--apm-blue); color: white; box-shadow: 0 8px 18px -6px rgba(46,107,255,.50); } .help-chip .icon { width: 16px; height: 16px; } .help-group { font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--apm-slate-500); margin: 36px 0 12px; } .faq { background: white; border: 1px solid var(--apm-slate-200); border-radius: 14px; margin-bottom: 10px; transition: border-color .25s ease, box-shadow .25s ease; overflow: hidden; } .faq[open] { border-color: var(--apm-blue); box-shadow: 0 8px 22px -10px rgba(46,107,255,.18); } .faq summary { list-style: none; cursor: pointer; padding: 18px 22px; font-size: 15px; font-weight: 600; color: var(--apm-navy); display: flex; justify-content: space-between; align-items: center; gap: 16px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ''; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E6BFF' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain; transition: transform .25s ease; flex-shrink: 0; } .faq[open] summary::after { transform: rotate(180deg); } .faq-body { padding: 0 22px 18px; color: var(--apm-slate-700); font-size: 14.5px; line-height: 1.75; } .help-empty { text-align: center; padding: 48px 16px; color: var(--apm-slate-500); display: flex; flex-direction: column; align-items: center; gap: 12px; } .help-channel { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 18px; background: white; border: 1px solid var(--apm-slate-200); border-radius: 16px; text-decoration: none; color: inherit; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .help-channel:hover { transform: translateY(-3px); border-color: var(--apm-blue); box-shadow: 0 16px 30px -14px rgba(10,22,38,.20); } .help-channel strong { font-size: 15px; color: var(--apm-navy); } .help-channel span { font-size: 12.5px; color: var(--apm-slate-500); } /* ============================================================ Help Center — quick contact channels + contact form ============================================================ */ .help-quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; } @media (max-width: 880px) { .help-quick-grid { grid-template-columns: 1fr; } } .help-quick-channel { display: flex; align-items: center; gap: 16px; padding: 22px 24px; background: white; border: 1px solid var(--apm-slate-200); border-radius: 18px; text-decoration: none; color: inherit; text-align: left; font-family: inherit; cursor: pointer; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .help-quick-channel:hover { transform: translateY(-4px); border-color: var(--apm-blue); box-shadow: 0 16px 32px -14px rgba(46,107,255,.25); } .help-quick-channel:hover .help-quick-icon { background: var(--apm-blue); color: white; } .help-quick-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--apm-blue-soft, #EEF5FF); color: var(--apm-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .25s ease, color .25s ease; } .help-quick-icon .icon, .help-quick-icon svg { width: 22px; height: 22px; } .help-quick-channel strong { display: block; font-size: 15px; color: var(--apm-navy); font-weight: 700; } .help-quick-channel > div > span { display: block; font-size: 13px; color: var(--apm-blue); font-weight: 600; margin-top: 2px; } .help-quick-channel small { display: block; font-size: 12px; color: var(--apm-slate-500); margin-top: 4px; } .help-form-card { background: white; border: 1px solid var(--apm-slate-200); border-radius: 22px; padding: 32px 32px 28px; box-shadow: 0 22px 48px -24px rgba(10,22,38,.18); } .help-form-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 24px; } .help-form { display: grid; gap: 16px; } .help-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 640px) { .help-form-row { grid-template-columns: 1fr; } } .help-form label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 600; color: var(--apm-slate-700); } .help-form input, .help-form textarea { font: inherit; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--apm-slate-200); background: var(--apm-slate-50); color: var(--apm-navy); outline: none; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; font-weight: 500; } .help-form input::placeholder, .help-form textarea::placeholder { color: var(--apm-slate-400); font-weight: 500; } .help-form input:focus, .help-form textarea:focus { border-color: var(--apm-blue); background: white; box-shadow: 0 0 0 4px rgba(46,107,255,.10); } .help-form textarea { resize: vertical; min-height: 120px; } .help-form-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .help-form-foot small { font-size: 12px; color: var(--apm-slate-500); max-width: 360px; } /* Critical — HTML5 [hidden] must always win over display: flex/grid below */ [hidden] { display: none !important; } .help-form-success { text-align: center; padding: 32px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .help-form-success h3 { font-size: 22px; color: var(--apm-navy); margin: 0; } .help-form-success p { font-size: 15px; color: var(--apm-slate-700); max-width: 480px; margin: 0; line-height: 1.7; } .help-form-error { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; background: #FFF7E6; border: 1px solid rgba(245,158,11,.30); border-radius: 14px; margin-top: 18px; } .help-form-error strong { color: var(--apm-navy); font-size: 14.5px; } .help-form-error p { color: var(--apm-slate-700); } /* ============================================================ Legal entity selector (UAE Branch / Saint Lucia) ============================================================ */ .entity-selector { background: white; border: 1px solid var(--apm-slate-200); border-radius: 18px; padding: 22px 24px; margin-bottom: 28px; box-shadow: 0 12px 28px -18px rgba(10,22,38,.20); } .entity-selector-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 13px; color: var(--apm-slate-500); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .entity-selector-head i { color: var(--apm-blue); width: 18px; height: 18px; } .entity-tabs { display: flex; gap: 8px; flex-wrap: wrap; } .entity-tab { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--apm-slate-50); border: 1px solid transparent; border-radius: 12px; font-family: inherit; font-weight: 600; font-size: 13.5px; color: var(--apm-slate-700); cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; flex: 1; min-width: 220px; } .entity-tab small { display: block; font-size: 11px; font-weight: 600; color: var(--apm-slate-500); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 2px; } .entity-tab strong { display: block; font-size: 14.5px; color: var(--apm-navy); font-weight: 700; } .entity-tab:hover { border-color: var(--apm-slate-300); background: white; } .entity-tab.active { background: linear-gradient(135deg, #EEF5FF 0%, #DCE9FF 100%); border-color: var(--apm-blue); box-shadow: 0 8px 20px -8px rgba(46,107,255,.30); } .entity-tab.active strong { color: var(--apm-blue); } .entity-tab .icon { width: 22px; height: 22px; color: var(--apm-blue); flex-shrink: 0; } .entity-content { display: none; } .entity-content.active { display: block; } .entity-callout { background: #EEF5FF; border-left: 4px solid var(--apm-blue); border-radius: 12px; padding: 18px 22px; margin-bottom: 24px; } .entity-callout strong { color: var(--apm-navy); font-size: 14.5px; } .entity-callout p { margin: 6px 0 0; color: var(--apm-slate-700); font-size: 14px; line-height: 1.7; } /* ============================================================ Markets page — split rows (text + visual) ============================================================ */ .market-row { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; } .market-row-reverse { grid-template-columns: 1fr 1.1fr; } .market-row-reverse .market-row-text { order: 2; } .market-row-reverse .market-row-visual { order: 1; } @media (max-width: 1023px) { .market-row, .market-row-reverse { grid-template-columns: 1fr; gap: 28px; } .market-row-reverse .market-row-text { order: 0; } .market-row-reverse .market-row-visual { order: 1; } } .market-icon { width: 56px; height: 56px; border-radius: 14px; background: rgba(46,107,255,.12); color: var(--apm-blue); display: flex; align-items: center; justify-content: center; margin-bottom: 22px; } .market-icon .icon { width: 26px; height: 26px; } .market-row h2 { font-size: clamp(28px, 3.2vw, 38px); margin-bottom: 14px; letter-spacing: -.02em; } .market-row p { font-size: 16px; color: var(--apm-slate-700); line-height: 1.7; margin: 0 0 22px; } .market-bullets { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; } @media (max-width: 540px) { .market-bullets { grid-template-columns: 1fr; } } .market-bullets li { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: white; border: 1px solid var(--apm-slate-200); border-radius: 12px; } .market-bullets li strong { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--apm-slate-500); } .market-bullets li span { font-size: 15px; font-weight: 700; color: var(--apm-navy); } /* Market icon — always brand blue */ .market-icon { background: var(--apm-blue-soft, #EEF5FF) !important; color: var(--apm-blue) !important; } /* ============================================================ Market visual 3D cards (per market on /markets.html) ============================================================ */ .market-visual-3d { position: relative; perspective: 1400px; perspective-origin: 50% 30%; } .market-visual-glow { position: absolute; inset: -10%; background: radial-gradient(circle at 50% 50%, rgba(46,107,255,.18), transparent 60%); filter: blur(40px); z-index: -1; animation: apm-aurora 14s ease-in-out infinite; } .market-visual-card { background: linear-gradient(160deg, #0E1827 0%, #08111E 100%); border: 1px solid rgba(123,164,255,.20); border-radius: 22px; padding: 22px 22px 20px; transform: rotateX(3deg) rotateY(-4deg); transform-style: preserve-3d; box-shadow: 0 1px 0 0 rgba(255,255,255,.08) inset, 0 30px 60px -22px rgba(0,8,28,.65); transition: transform .5s cubic-bezier(.16,.84,.32,1); } .market-row-visual:hover .market-visual-card { transform: rotateX(1deg) rotateY(-1deg) translateY(-4px); } .market-visual-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: rgba(255,255,255,.55); margin-bottom: 12px; } .market-visual-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; } .market-visual-foot div { background: rgba(255,255,255,.04); border-radius: 8px; padding: 9px 12px; } .market-visual-foot span { display: block; font-size: 10.5px; color: rgba(255,255,255,.50); } .market-visual-foot strong { font-size: 14px; font-weight: 800; color: white; font-variant-numeric: tabular-nums; } /* Stocks ticker pills grid */ .ticker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .ticker-pill { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; background: rgba(255,255,255,.04); border-radius: 999px; border: 1px solid rgba(123,164,255,.10); } .ticker-pill strong { font-size: 12px; color: white; font-weight: 800; } .ticker-pill span { font-size: 11px; font-weight: 700; } .ticker-pill .up, .crypto-line .up { color: #4ade80; } .ticker-pill .dn, .crypto-line .dn { color: #f87171; } /* Crypto prices list */ .crypto-prices { display: grid; gap: 8px; } .crypto-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(123,164,255,.10); border-radius: 12px; } .crypto-line strong { font-size: 13px; color: rgba(255,255,255,.65); font-weight: 700; width: 40px; } .crypto-line .crypto-px { font-size: 16px; font-weight: 800; color: white; font-variant-numeric: tabular-nums; flex: 1; } .crypto-line span:last-child { font-size: 12px; font-weight: 700; } /* ============================================================ Generic modal (partnerships form lives here, reusable) ============================================================ */ .apm-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; } .apm-modal-backdrop { position: absolute; inset: 0; background: rgba(10,22,38,.65); backdrop-filter: blur(8px); animation: consent-fade .25s ease-out; } .apm-modal-card { position: relative; background: white; border-radius: 22px; max-width: 640px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 32px; box-shadow: 0 30px 60px -20px rgba(10,22,38,.45); animation: consent-slide-in .35s cubic-bezier(.16,.84,.32,1); } .apm-modal-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; background: var(--apm-slate-100); color: var(--apm-slate-700); display: flex; align-items: center; justify-content: center; cursor: pointer; border: 0; transition: background .2s ease; } .apm-modal-close:hover { background: var(--apm-slate-200); } .apm-modal-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; } /* ============================================================ About team visual (temp Unsplash image with overlay) ============================================================ */ .about-team-visual { position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 1px 0 0 rgba(255,255,255,.95) inset, 0 30px 60px -22px rgba(10,22,38,.30); aspect-ratio: 16 / 7; max-height: 360px; } .about-team-visual img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.05); } .about-team-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(10,22,38,.65) 100%), linear-gradient(135deg, rgba(46,107,255,.20), transparent 60%); display: flex; align-items: flex-end; justify-content: flex-start; padding: 24px; } .about-team-kicker { display: inline-block; padding: 8px 16px; background: rgba(255,255,255,.90); border-radius: 999px; color: var(--apm-navy); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; backdrop-filter: blur(8px); } /* ============================================================ Hedge Fund — entity disclaimer (bottom, redesigned) ============================================================ */ .hf-entity-disclaimer { background: linear-gradient(180deg, var(--apm-slate-50) 0%, white 100%); padding: 56px 0 96px; } .hf-entity-card { position: relative; display: grid; grid-template-columns: 80px 1fr; gap: 28px; align-items: flex-start; background: linear-gradient(165deg, #FFF8E8 0%, #FFFBF1 100%); border: 1px solid rgba(245,158,11,.30); border-left: 5px solid #F59E0B; border-radius: 22px; padding: 32px 36px; box-shadow: 0 1px 0 0 rgba(255,255,255,.95) inset, 0 18px 36px -18px rgba(245,158,11,.20), 0 26px 50px -28px rgba(10,22,38,.15); } @media (max-width: 640px) { .hf-entity-card { grid-template-columns: 1fr; gap: 18px; padding: 24px 22px; } } .hf-entity-icon { width: 72px; height: 72px; border-radius: 18px; background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%); display: flex; align-items: center; justify-content: center; color: white; box-shadow: 0 1px 0 0 rgba(255,255,255,.40) inset, 0 12px 24px -6px rgba(245,158,11,.55); } .hf-entity-icon i { width: 34px; height: 34px; } .hf-entity-body { min-width: 0; } .hf-entity-kicker { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #92400E; background: rgba(245,158,11,.18); padding: 4px 10px; border-radius: 999px; margin-bottom: 10px; } .hf-entity-body h3 { font-size: 20px; color: var(--apm-navy); margin: 0 0 10px; letter-spacing: -.01em; line-height: 1.25; } .hf-entity-body p { font-size: 14.5px; color: var(--apm-slate-700); line-height: 1.75; margin: 0; } /* ============================================================ Mobile responsive fixes (audit-driven) ============================================================ */ /* 1. Platforms multi-device — collapse and fit at narrow widths */ @media (max-width: 540px) { } /* 2. Social hero mock — stack vertically on small screens */ @media (max-width: 540px) { } /* 3. Trust strip — go to single column on very narrow screens */ @media (max-width: 380px) { .trust-grid-5, .trust-grid-6 { grid-template-columns: 1fr; gap: 10px; } .trust-item { display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px 18px; } .trust-item .icon { margin: 0 !important; flex-shrink: 0; } .trust-item .val { font-size: 20px; } } /* 4. Timeline — hide connector line whenever multi-row */ @media (max-width: 1023px) { .timeline-track::before, .timeline-track::after { display: none; } } /* 5. Compare table CTA row in stacked mode — no stripe background */ @media (max-width: 880px) { .cmp-cta-row td, .cmp-cta-row td.cmp-featured { background: transparent !important; border-top: 0 !important; } .cmp-cta-row td:not(.cmp-row-label) { padding: 8px 0; } } /* 6. Markets 3D card — flatten on mobile to avoid horizontal overflow */ @media (max-width: 540px) { .market-visual-card { transform: none; padding: 18px; } .market-row-visual:hover .market-visual-card { transform: translateY(-4px); } } .market-row, .market-row-text, .market-row-visual { min-width: 0; } section[id="forex"], section[id="indices"], section[id="stocks"], section[id="commodities"], section[id="crypto"] { overflow-x: hidden; } /* 7. Hero grids in pages use inline styles — force single column with !important */ @media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr !important; gap: 40px; } } /* 8. Partnerships modal — tighter padding on small screens */ @media (max-width: 540px) { .apm-modal { padding: 12px; } .apm-modal-card { padding: 22px 18px; border-radius: 16px; max-height: 94vh; } .apm-modal-head { gap: 12px; margin-bottom: 18px; } .apm-modal-head h2 { font-size: 19px !important; } .help-form-row { grid-template-columns: 1fr !important; } } /* ============================================================ About — Mission + Values redesign ============================================================ */ .about-mission-section { padding: 100px 0; background: linear-gradient(180deg, white 0%, var(--apm-slate-50) 100%); position: relative; overflow: hidden; isolation: isolate; } .about-mission-section::before { content: ''; position: absolute; top: -10%; right: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(46,107,255,.08), transparent 65%); border-radius: 50%; z-index: -1; filter: blur(40px); } .about-mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: flex-start; } @media (max-width: 1023px) { .about-mission-grid { grid-template-columns: 1fr; gap: 36px; } } .kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--apm-blue); margin-bottom: 18px; } .kicker span { display: block; width: 22px; height: 2px; background: var(--apm-blue); border-radius: 2px; } .about-mission-left h2 { font-size: clamp(36px, 4.5vw, 56px); letter-spacing: -.025em; line-height: 1.05; margin-bottom: 22px; } .about-mission-left p { font-size: 16.5px; color: var(--apm-slate-700); line-height: 1.75; margin: 0; } .about-mission-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; padding-top: 28px; border-top: 1px dashed var(--apm-slate-300); } .about-mission-stats > div { display: flex; flex-direction: column; gap: 4px; } .about-mission-stats strong { font-size: 28px; font-weight: 900; color: var(--apm-navy); letter-spacing: -.02em; line-height: 1; } .about-mission-stats span { font-size: 12px; color: var(--apm-slate-500); font-weight: 600; } .about-values-card { background: white; border: 1px solid var(--apm-slate-200); border-radius: 24px; padding: 40px 36px; box-shadow: 0 30px 60px -30px rgba(10,22,38,.20); } .about-values-card h2 { font-size: 28px; margin-bottom: 24px; letter-spacing: -.02em; } .about-values-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 640px) { .about-values-grid { grid-template-columns: 1fr; } } .about-value-card { padding: 22px 20px; background: var(--apm-slate-50); border: 1px solid transparent; border-radius: 16px; transition: transform .25s ease, border-color .25s ease, background .25s ease; } .about-value-card:hover { transform: translateY(-3px); border-color: var(--apm-blue); background: linear-gradient(135deg, #EEF5FF 0%, white 100%); } .about-value-icon { width: 42px; height: 42px; border-radius: 12px; background: white; border: 1px solid var(--apm-slate-200); color: var(--apm-blue); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; transition: background .25s ease, color .25s ease; } .about-value-card:hover .about-value-icon { background: var(--apm-blue); color: white; border-color: var(--apm-blue); } .about-value-card strong { display: block; font-size: 15px; font-weight: 700; color: var(--apm-navy); margin-bottom: 4px; } .about-value-card p { font-size: 13.5px; color: var(--apm-slate-700); line-height: 1.6; margin: 0; } /* ============================================================ Legal Hub — Biblioteca legal grid ============================================================ */ .biblioteca-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; } @media (max-width: 880px) { .biblioteca-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .biblioteca-grid { grid-template-columns: 1fr; } } .biblioteca-card { display: flex; align-items: center; gap: 18px; padding: 24px 26px; background: white; border: 1px solid var(--apm-slate-200); border-radius: 18px; text-decoration: none; color: inherit; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .biblioteca-card:hover { transform: translateY(-3px); border-color: var(--apm-blue); box-shadow: 0 18px 36px -18px rgba(46,107,255,.25); } .biblioteca-card-featured { border-color: var(--apm-blue); box-shadow: 0 14px 28px -14px rgba(46,107,255,.30); background: linear-gradient(180deg, #F6F9FF 0%, white 80%); } .biblioteca-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--apm-blue-soft, #EEF5FF); color: var(--apm-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .biblioteca-icon .icon { width: 22px; height: 22px; } .biblioteca-card strong { display: block; font-size: 15.5px; font-weight: 700; color: var(--apm-navy); } .biblioteca-card span { display: block; font-size: 12.5px; color: var(--apm-slate-500); font-weight: 600; margin-top: 2px; } /* ============================================================ Legal hub — doc tiles ============================================================ */ .doc-link { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: white; border: 1px solid var(--apm-slate-200); border-radius: 14px; text-decoration: none; color: inherit; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .doc-link:hover { transform: translateY(-2px); border-color: var(--apm-blue); box-shadow: 0 14px 24px -12px rgba(10,22,38,.18); } .doc-link > .icon { color: var(--apm-blue); flex-shrink: 0; } .doc-link > div { display: flex; flex-direction: column; gap: 2px; } .doc-link strong { font-size: 14.5px; color: var(--apm-navy); } .doc-link span { font-size: 12.5px; color: var(--apm-slate-500); } /* ============================================================ Promotions + News — tag pills & card hover ============================================================ */ .promo-tag { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 800; letter-spacing: .10em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--apm-slate-100); color: var(--apm-slate-500); } .promo-tag-active { background: rgba(16,185,129,.10); color: #10B981; } .promo-card, .news-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .promo-card:hover, .news-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -14px rgba(10,22,38,.18); } /* ============================================================ Why AP Markets — dark navy 2-top + 4-bottom layout ============================================================ */ .why-section-dark { background: linear-gradient(180deg, rgba(10,22,38,.90) 0%, rgba(10,22,38,.94) 100%), url('../assets/bg/bg5.jpg') center/cover no-repeat; background-color: var(--apm-navy); color: white; padding: 96px 0; position: relative; overflow: hidden; isolation: isolate; perspective: 1600px; perspective-origin: 50% 30%; } @media (max-width: 640px) { .why-section-dark { background: linear-gradient(180deg, rgba(10,22,38,.90) 0%, rgba(10,22,38,.94) 100%), url('../assets/bg/bg5-mobile.jpg') center/cover no-repeat; background-color: var(--apm-navy); } } /* Animated layered background: 2 floating gradient orbs + grain pattern */ .why-section-dark::before { content: ''; position: absolute; inset: -10%; background: radial-gradient(circle at 25% 30%, rgba(46,107,255,.22), transparent 50%), radial-gradient(circle at 80% 70%, rgba(123,164,255,.16), transparent 55%), radial-gradient(circle at 60% 20%, rgba(46,107,255,.08), transparent 45%); filter: blur(60px); z-index: -2; animation: apm-aurora 18s ease-in-out infinite; } .why-section-dark::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(123,164,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(123,164,255,.025) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%); z-index: -1; pointer-events: none; } .why-top-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; } .why-bottom-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } @media (max-width: 1023px) { .why-top-grid { grid-template-columns: 1fr; } .why-bottom-grid { grid-template-columns: repeat(2, 1fr); } } .why-card-dark { position: relative; border-radius: 22px; background: linear-gradient(165deg, rgba(46,107,255,.10) 0%, rgba(255,255,255,.04) 35%, rgba(255,255,255,.02) 100%); border: 1px solid rgba(123,164,255,.18); padding: 32px 28px; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.16,.84,.32,1), border-color .35s ease, box-shadow .45s ease, background .35s ease; overflow: hidden; isolation: isolate; box-shadow: 0 1px 0 0 rgba(255,255,255,.08) inset, 0 -1px 0 0 rgba(0,0,0,.30) inset, 0 18px 36px -22px rgba(0,8,28,.55); } /* Subtle top glow strip — only on hover */ .why-card-dark::after { content: ''; position: absolute; top: 0; left: 18px; right: 18px; height: 3px; background: linear-gradient(90deg, transparent 0%, rgba(123,164,255,.70) 30%, var(--apm-blue) 50%, rgba(123,164,255,.70) 70%, transparent 100%); border-radius: 0 0 3px 3px; opacity: 0; transition: opacity .35s ease; } .why-card-dark:hover { transform: translateY(-6px) rotateX(2deg); border-color: rgba(123,164,255,.40); background: linear-gradient(165deg, rgba(46,107,255,.18) 0%, rgba(255,255,255,.06) 35%, rgba(255,255,255,.02) 100%); box-shadow: 0 1px 0 0 rgba(255,255,255,.12) inset, 0 -1px 0 0 rgba(0,0,0,.30) inset, 0 28px 50px -18px rgba(46,107,255,.35), 0 18px 36px -16px rgba(0,8,28,.55); } .why-card-dark:hover::after { opacity: 1; } .why-card-hero { min-height: 220px; } .why-card-hero::before { content: ''; position: absolute; top: -40%; left: -10%; width: 60%; height: 120%; background: radial-gradient(circle, rgba(46,107,255,.18), transparent 60%); pointer-events: none; } .why-card-icon-dark { width: 56px; height: 56px; border-radius: 14px; background: rgba(46,107,255,.12); border: 1px solid rgba(46,107,255,.30); color: #7BA4FF; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; } .why-card-icon-dark .icon { width: 26px; height: 26px; } .why-card-hero h3 { color: white; font-size: 22px; font-weight: 700; margin-bottom: 12px; } .why-card-hero p { color: rgba(255,255,255,.70); font-size: 14.5px; line-height: 1.7; margin: 0; } .why-card-stat { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 28px 24px; } .why-stat-icon { color: rgba(255,255,255,.55); width: 28px; height: 28px; margin-bottom: 8px; } .why-card-stat strong { color: white; font-size: 22px; font-weight: 800; line-height: 1.1; } .why-card-stat span { color: rgba(255,255,255,.55); font-size: 13px; } /* ============================================================ Social Trading promo (home) ============================================================ */ /* ====== Social Trading promo (now light + 3D) ====== */ .social-promo { position: relative; background: linear-gradient(180deg, #FFFFFF 0%, #F4F7FC 100%); color: var(--apm-navy); padding: 96px 0; overflow: hidden; isolation: isolate; perspective: 1600px; perspective-origin: 50% 30%; } .social-promo::before { content: ''; position: absolute; top: -10%; right: -8%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(46,107,255,.10), transparent 60%); filter: blur(40px); z-index: -1; animation: apm-aurora 16s ease-in-out infinite; } .social-promo::after { content: ''; position: absolute; bottom: -10%; left: -8%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(123,164,255,.08), transparent 60%); filter: blur(40px); z-index: -1; animation: apm-aurora 18s ease-in-out infinite reverse; } .social-promo-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; } @media (max-width: 1023px) { .social-promo-grid { grid-template-columns: 1fr; gap: 36px; } } .social-promo-left h2 { color: var(--apm-navy); font-size: clamp(34px, 4.5vw, 56px); letter-spacing: -.025em; line-height: 1.05; margin-bottom: 18px; } .social-promo-left p { color: var(--apm-slate-700); font-size: 16px; line-height: 1.7; } .social-promo-right { display: grid; gap: 14px; } .social-promo-row { position: relative; display: flex; align-items: center; gap: 16px; padding: 22px 26px; background: linear-gradient(180deg, white 0%, #FBFCFE 100%); border: 1px solid var(--apm-slate-200); border-radius: 18px; text-decoration: none; color: var(--apm-navy); transform-style: preserve-3d; transition: transform .4s cubic-bezier(.16,.84,.32,1), border-color .25s ease, box-shadow .35s ease, background .25s ease; box-shadow: 0 1px 0 0 rgba(255,255,255,.95) inset, 0 8px 18px -10px rgba(10,22,38,.10), 0 18px 36px -22px rgba(10,22,38,.16); } .social-promo-row::before { content: ''; position: absolute; top: 0; left: 18px; right: 18px; height: 3px; background: linear-gradient(90deg, transparent 0%, rgba(46,107,255,.50) 30%, var(--apm-blue) 50%, rgba(46,107,255,.50) 70%, transparent 100%); border-radius: 0 0 3px 3px; opacity: 0; transition: opacity .35s ease; } .social-promo-row:hover { transform: translateY(-4px) rotateX(2deg); border-color: var(--apm-blue); background: linear-gradient(180deg, #F6F9FF 0%, white 100%); box-shadow: 0 1px 0 0 rgba(255,255,255,.95) inset, 0 26px 50px -22px rgba(46,107,255,.22), 0 14px 28px -14px rgba(10,22,38,.18); } .social-promo-row:hover::before { opacity: 1; } .social-promo-icon { width: 56px; height: 56px; border-radius: 14px; background: var(--apm-blue-soft, #EEF5FF); color: var(--apm-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 1px 0 0 rgba(255,255,255,.90) inset, 0 0 0 1px rgba(46,107,255,.10) inset, 0 6px 14px -8px rgba(46,107,255,.30); transition: background .25s ease, color .25s ease, transform .25s ease; } .social-promo-row:hover .social-promo-icon { background: var(--apm-blue); color: white; transform: scale(1.05) rotate(-3deg); } .social-promo-row strong { display: block; font-size: 17px; font-weight: 800; color: var(--apm-navy); margin-bottom: 3px; } .social-promo-row span { display: block; font-size: 13.5px; color: var(--apm-slate-500); line-height: 1.55; } /* ============================================================ 3-step onboarding ============================================================ */ .onboarding-section { background: var(--apm-navy); color: white; padding: 96px 0; position: relative; isolation: isolate; } /* Animated gradient orbs background */ .onboarding-section::before { content: ''; position: absolute; top: 10%; left: 10%; width: 380px; height: 380px; background: radial-gradient(circle, rgba(46,107,255,.30), transparent 60%); filter: blur(60px); z-index: -1; animation: apm-aurora 14s ease-in-out infinite; } .onboarding-section::after { content: ''; position: absolute; bottom: 10%; right: 10%; width: 480px; height: 480px; background: radial-gradient(circle, rgba(123,164,255,.20), transparent 60%); filter: blur(60px); z-index: -1; animation: apm-aurora 18s ease-in-out infinite reverse; } /* Subtle dot grid pattern overlay */ .onboarding-section .container { position: relative; z-index: 1; } .onboarding-section .container::before { content: ''; position: absolute; inset: -40px; background-image: radial-gradient(rgba(123,164,255,.10) 1px, transparent 1px); background-size: 24px 24px; mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%); z-index: -1; pointer-events: none; } .onboarding-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; perspective: 1600px; } @media (max-width: 1023px) { .onboarding-grid { grid-template-columns: 1fr; } } /* Connecting flow line — animated dash going through the cards */ .onboarding-grid::before { content: ''; position: absolute; top: 50%; left: 8%; right: 8%; height: 2px; background: repeating-linear-gradient(90deg, rgba(123,164,255,.40) 0 12px, transparent 12px 22px); z-index: -1; opacity: 0; animation: apm-flow-dash 1.6s linear infinite; transition: opacity .6s ease; } .onboarding-grid.visible::before { opacity: 1; } @keyframes apm-flow-dash { to { background-position: 22px 0; } } @media (max-width: 1023px) { .onboarding-grid::before { display: none; } } .onboarding-card { position: relative; background: linear-gradient(165deg, rgba(46,107,255,.12) 0%, rgba(255,255,255,.05) 35%, rgba(255,255,255,.02) 100%); border: 1px solid rgba(123,164,255,.18); border-radius: 24px; padding: 40px 32px 36px; transform-style: preserve-3d; isolation: isolate; transition: transform .5s cubic-bezier(.16,.84,.32,1), border-color .35s ease, box-shadow .45s ease, background .35s ease; box-shadow: 0 1px 0 0 rgba(255,255,255,.08) inset, 0 -1px 0 0 rgba(0,0,0,.30) inset, 0 18px 36px -22px rgba(0,8,28,.55); } .onboarding-card::after { content: ''; position: absolute; top: 0; left: 18px; right: 18px; height: 3px; background: linear-gradient(90deg, transparent 0%, rgba(123,164,255,.70) 30%, var(--apm-blue) 50%, rgba(123,164,255,.70) 70%, transparent 100%); border-radius: 0 0 3px 3px; opacity: 0; transition: opacity .35s ease; } .onboarding-card:hover { transform: translateY(-8px) rotateX(2deg); border-color: rgba(123,164,255,.50); background: linear-gradient(165deg, rgba(46,107,255,.22) 0%, rgba(255,255,255,.08) 35%, rgba(255,255,255,.03) 100%); box-shadow: 0 1px 0 0 rgba(255,255,255,.14) inset, 0 -1px 0 0 rgba(0,0,0,.30) inset, 0 32px 56px -18px rgba(46,107,255,.40), 0 18px 36px -16px rgba(0,8,28,.55); } .onboarding-card:hover::after { opacity: 1; } .onboarding-card-active { border-color: rgba(123,164,255,.55); background: linear-gradient(165deg, rgba(46,107,255,.22) 0%, rgba(255,255,255,.08) 35%, rgba(255,255,255,.03) 100%); box-shadow: 0 1px 0 0 rgba(255,255,255,.14) inset, 0 -1px 0 0 rgba(0,0,0,.30) inset, 0 28px 50px -16px rgba(46,107,255,.45), 0 18px 36px -16px rgba(0,8,28,.55); } .onboarding-card-active::after { opacity: 1; } .onboarding-num { position: absolute; top: 28px; right: 28px; font-size: 64px; font-weight: 900; background: linear-gradient(135deg, rgba(123,164,255,.18) 0%, rgba(123,164,255,.06) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -.04em; line-height: 1; transition: background .35s ease, transform .35s ease; } .onboarding-card:hover .onboarding-num, .onboarding-card-active .onboarding-num { background: linear-gradient(135deg, var(--apm-blue) 0%, #7BA4FF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transform: scale(1.06); } .onboarding-icon { width: 60px; height: 60px; border-radius: 16px; background: rgba(46,107,255,.18); color: #7BA4FF; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; box-shadow: 0 1px 0 0 rgba(255,255,255,.12) inset, 0 0 0 1px rgba(123,164,255,.30) inset, 0 6px 14px -6px rgba(46,107,255,.55); transition: background .35s ease, color .35s ease, transform .35s ease; } .onboarding-card:hover .onboarding-icon, .onboarding-card-active .onboarding-icon { background: var(--apm-blue); color: white; transform: scale(1.05) rotate(-3deg); } .onboarding-icon .icon { width: 28px; height: 28px; } .onboarding-card h3 { color: white; font-size: 22px; font-weight: 800; margin-bottom: 12px; letter-spacing: -.015em; } .onboarding-card p { color: rgba(255,255,255,.72); font-size: 14.5px; line-height: 1.7; margin: 0; } /* ============================================================ Platforms multi-device mockup scene ============================================================ */ @keyframes apm-device-rise { from { opacity: 0; transform: translateY(20px) scale(.95); } to { opacity: 1; transform: none; } } /* ---- Desktop ---- */ /* ---- Tablet ---- */ /* ---- Phone ---- */ @media (max-width: 768px) { } /* ============================================================ Trusted Ecosystem — partner logo strip (auto marquee) ============================================================ */ .ecosystem-section { background: var(--apm-navy); color: white; padding: 80px 0; position: relative; overflow: hidden; } .ecosystem-strip { margin-top: 32px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, white 10%, white 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, white 10%, white 90%, transparent); } .ecosystem-track { display: flex; gap: 64px; align-items: center; width: max-content; animation: apm-marquee 45s linear infinite; } .ecosystem-section:hover .ecosystem-track { animation-play-state: paused; } .ecosystem-logo { display: flex; align-items: center; justify-content: center; height: 56px; min-width: 160px; padding: 0 28px; font-family: inherit; font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: rgba(255,255,255,.55); white-space: nowrap; filter: grayscale(1) opacity(.75); transition: filter .3s ease, color .3s ease; } .ecosystem-logo:hover { filter: grayscale(0) opacity(1); color: white; } /* Placeholder branded styling per logo (until real SVGs ship) */ .ecosystem-logo[data-logo="scope"] { font-weight: 900; letter-spacing: .05em; } .ecosystem-logo[data-logo="exura"] { color: rgba(220,80,60,.65); font-weight: 800; } .ecosystem-logo[data-logo="bnp"] { color: rgba(120,200,140,.65); font-weight: 600; } .ecosystem-logo[data-logo="nasdaq"] { color: rgba(140,180,220,.65); font-weight: 700; } .ecosystem-logo[data-logo="nyse"] { color: rgba(180,200,220,.65); font-weight: 800; letter-spacing: .04em; } .ecosystem-logo[data-logo="citi"] { color: rgba(220,140,80,.65); font-weight: 700; font-style: italic; } .ecosystem-logo[data-logo="goldman"] { color: rgba(180,180,200,.65); font-weight: 600; font-style: italic; } /* --- Reduced motion overrides --- */ @media (prefers-reduced-motion: reduce) { body, .hero::after, .hero-visual svg path, .hero-visual svg circle, .utility-pill .dot, .hero-eyebrow .badge-new, .price-marquee-track, .reveal, .reveal-stagger > * { animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important; } .scroll-progress { display: none; } } /* ============================================================ Accounts comparison table (brand-only · 3D card wrap · responsive) ============================================================ */ .cmp-wrap { margin-top: 40px; position: relative; border-radius: 24px; background: linear-gradient(180deg, white 0%, #FBFCFE 100%); border: 1px solid var(--apm-slate-200); box-shadow: 0 1px 0 0 rgba(255,255,255,.95) inset, 0 8px 18px -10px rgba(10,22,38,.10), 0 28px 50px -28px rgba(10,22,38,.18); overflow: hidden; } .cmp-table { width: 100%; border-collapse: collapse; font-size: 14px; } .cmp-table thead { background: var(--apm-navy); } .cmp-table thead th { padding: 26px 14px 22px; vertical-align: bottom; color: white; font-weight: 700; position: relative; border-bottom: 2px solid rgba(123,164,255,.20); } .cmp-table thead th.cmp-corner { width: 18%; min-width: 180px; background: var(--apm-navy); } .cmp-table thead .cmp-h { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: white; } .cmp-popular { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; background: linear-gradient(135deg, var(--apm-blue) 0%, var(--apm-blue-2, #4A82FF) 100%); color: white; margin-bottom: 8px; box-shadow: 0 4px 12px -2px rgba(46,107,255,.55); } /* Featured column highlight (Standard) */ .cmp-table thead th.cmp-featured { background: linear-gradient(180deg, rgba(46,107,255,.20) 0%, var(--apm-navy) 100%); } .cmp-table tbody td.cmp-featured { background: rgba(46,107,255,.06); border-left: 1px solid rgba(46,107,255,.15); border-right: 1px solid rgba(46,107,255,.15); position: relative; } .cmp-table tbody tr:first-child td.cmp-featured { border-top: 1px solid rgba(46,107,255,.15); } .cmp-table tbody tr:last-child td.cmp-featured { border-bottom: 1px solid rgba(46,107,255,.15); } .cmp-table tbody tr { transition: background .2s ease; } .cmp-table tbody tr:hover { background: rgba(46,107,255,.04); } .cmp-table tbody td { padding: 16px 14px; text-align: center; border-top: 1px solid var(--apm-slate-100); color: var(--apm-slate-700); font-variant-numeric: tabular-nums; } .cmp-table tbody td.cmp-row-label { text-align: left; font-weight: 700; color: var(--apm-navy); background: var(--apm-slate-50); font-size: 13.5px; letter-spacing: -.005em; } .cmp-table tbody td strong { font-weight: 800; color: var(--apm-navy); font-size: 15px; } .cmp-hl { color: var(--apm-blue) !important; font-weight: 800 !important; } .cmp-dash { color: var(--apm-slate-300); font-weight: 600; } .cmp-check { display: inline-block; width: 22px; height: 22px; padding: 3px; border-radius: 999px; background: var(--apm-blue-soft, #EEF5FF); color: var(--apm-blue); } /* CTA row */ .cmp-cta-row td { padding: 22px 12px 28px; background: linear-gradient(180deg, var(--apm-slate-50), white); border-top: 2px solid rgba(46,107,255,.10); } .cmp-cta-row td.cmp-row-label { background: var(--apm-slate-50); } .cmp-cta-row td.cmp-featured { background: linear-gradient(180deg, rgba(46,107,255,.10), white); } .cmp-btn { width: 100%; min-width: 0; padding: 10px 12px !important; font-size: 13px !important; justify-content: center; } /* Responsive: stacked card view on narrow screens */ @media (max-width: 880px) { .cmp-wrap { background: transparent; border: 0; box-shadow: none; padding: 0; } .cmp-table, .cmp-table thead, .cmp-table tbody, .cmp-table tr, .cmp-table th, .cmp-table td { display: block; } .cmp-table thead { display: none; } .cmp-table tr { background: white; border: 1px solid var(--apm-slate-200); border-radius: 18px; padding: 20px 18px 8px; margin-bottom: 16px; box-shadow: 0 8px 18px -12px rgba(10,22,38,.18); } .cmp-table tr.cmp-cta-row { background: white; border-color: var(--apm-blue); box-shadow: 0 14px 28px -10px rgba(46,107,255,.22); } .cmp-table td { text-align: right; border: 0; border-top: 1px solid var(--apm-slate-100); padding: 12px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .cmp-table td:first-child { border-top: 0; } .cmp-table td::before { content: attr(data-label); font-weight: 700; color: var(--apm-slate-500); font-size: 11px; letter-spacing: .10em; text-transform: uppercase; } .cmp-table td.cmp-row-label { background: linear-gradient(135deg, var(--apm-navy), #11253F); color: white; padding: 14px 18px; border-radius: 12px; margin: -4px -4px 8px; font-size: 15px; text-align: left; display: block; } .cmp-table td.cmp-row-label::before { content: none; } .cmp-table td.cmp-featured { background: rgba(46,107,255,.05); border-radius: 8px; } .cmp-cta-row td { padding: 14px 0; } .cmp-cta-row td::before { content: none; } .cmp-cta-row .cmp-btn { width: 100%; } }