:root{
--bg: #0b1220;
--bg-2: #0f182b;
--surface: #10192e;
--card: #131f38;
--muted: #aab3c3;
--text: #e9eef7;
--accent: #f4f6ff; /* silver primary */
--accent-2: #aeb6c3; /* silver secondary */
--success: #22c55e;
--warning: #f59e0b;
--danger: #ef4444;
/* Gold palette for brand theme */
/* Remapped gold palette to dark tones (request: change gold to dark across all pages) */
--gold: #1f2937; /* main dark */
--gold-2: #111827; /* darker dark */
--gold-3: #0b1220; /* deepest dark */
--gold-light: #374151; /* light dark */
--radius: 36px;
--shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{ box-sizing:border-box; }
html,body{
height:100%;
background: #ffffff;
color: #0b1220;
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
margin:0;
}
/* Global vertical spacing between sections */
:root{ --section-gap-min: 32px; --section-gap-fluid: 6vw; --section-gap-max: 96px; }
/* Add consistent whitespace between stacked sections without modifying internal paddings */
section + section{ margin-top: clamp(var(--section-gap-min), var(--section-gap-fluid), var(--section-gap-max)); }
/* Make sure anchor jumps account for sticky nav (if any) */
section{ scroll-margin-top: 112px; }
/* Decorative grid + waves */
.hero::before{
content:"";
position:absolute; inset:0;
background:
radial-gradient(60% 40% at 50% 50%, rgba(176,184,196,.10) 0%, rgba(13,22,40,0) 60%),
repeating-linear-gradient( to right, rgba(0,0,0,.04) 0 1px, transparent 1px 120px),
repeating-linear-gradient( to bottom, rgba(0,0,0,.04) 0 1px, transparent 1px 80px);
pointer-events:none;
z-index:0;
-webkit-mask: none;
mask: none;
}
/* Vignette overlay removed for a cleaner, flatter hero */
.hero::after{
content: none;
display: none;
}
.nav{
position:sticky; top:0; z-index:5;
/* Match hero section background color */
background: var(--bg);
border-bottom: 1px solid rgba(255,255,255,.06);
/* Avoid animating backdrop-filter to prevent white flash on scroll */
transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
will-change: background-color, border-color, box-shadow;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* Blurred navbar when page is scrolled */
.nav.scrolled{
/* Keep navbar dark on scroll */
background: var(--surface);
-webkit-backdrop-filter: saturate(1.4) blur(12px);
backdrop-filter: saturate(1.4) blur(12px);
border-bottom-color: rgba(0,0,0,.08);
box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
/* Light theme overrides for navbar content when scrolled */
.nav.scrolled .menu a,
.nav.scrolled .right a{ color:#334155; }
.nav.scrolled .menu a:hover,
.nav.scrolled .right a:hover{ color:#111827; }
.nav.scrolled .right-meta .divider{ background: rgba(0,0,0,.12); }
.nav.scrolled .btn.ghost{ border:1px solid rgba(0,0,0,.14); color:#0b1220; background: rgba(0,0,0,0.02); }
/* Swap logos depending on navbar state */
.logo-light{ display:block; }
.logo-dark{ display:none; }
.nav.scrolled .logo-light{ display:none; }
.nav.scrolled .logo-dark{ display:block; }
.container{ max-width:1200px; margin:0 auto; padding:0 20px; }
.nav-inner{
display:flex; align-items:center; justify-content:space-between; height: 96px;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.4px; }
.logo{
height: 200px; max-height: 100px; width: auto; border-radius:10px;
object-fit: contain;
display:block;
}
/* Company name to the right of the logo */
.brand-name{
color: #D4AF37; /* Gold */
font-weight: 800;
font-size: 18px;
letter-spacing: .3px;
white-space: nowrap;
}
/* Stack brand name and tagline */
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-tagline{
color: var(--muted);
font-weight: 600;
font-size: 12px;
letter-spacing: .2px;
margin-top: 2px;
white-space: nowrap;
}
@media (max-width: 560px){
.brand-name{ display:none; }
.brand-tagline{ display:none; }
}
/* Ensure only one logo is visible depending on navbar state (order matters) */
.nav:not(.scrolled) .logo-dark{ display:none; }
.nav.scrolled .logo-light{ display:none; }
.nav.scrolled .logo-dark{ display:block; }
.menu { display:flex; align-items:center; gap:22px; flex: 1 1 auto; }
.right{ display:flex; flex-direction:row; align-items:center; gap:16px; }
.right-meta{ display:flex; align-items:center; gap:14px; transition: opacity .22s ease, transform .22s ease, max-height .22s ease; overflow:hidden; }
.menu .right-meta{ margin-left:auto; }
.right-meta.right-meta--hidden{ opacity:0; transform: translateY(-6px); max-height:0; }
.right-meta .divider{ width:1px; height:14px; background: rgba(255,255,255,.18); display:inline-block; }
.right-actions{ display:flex; align-items:center; gap:12px; }
.menu a, .right a{ color:var(--muted); text-decoration:none; font-weight:600; font-size:14px; }
.menu a:hover, .right a:hover{ color:#cfe0ff; }
.chev{ opacity:.6; font-size:12px; margin-left:4px; }
/* Language selector flag icon */
.lang{ display:inline-flex; align-items:center; gap:8px; }
.lang-flag{ display:inline-block; width:18px; height:12px; border-radius:2px; background-repeat:no-repeat; background-position:center; background-size:cover; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
/* UK flag (Union Jack) */
.lang-flag-uk{ background-image: url('data:image/svg+xml;utf8,'); }
.nav.scrolled .lang-flag{ box-shadow: inset 0 0 0 1px rgba(0,0,0,.22); }
/* Emphasize Partnership link like reference */
.nav .partnership{ color: var(--accent); }
.nav .partnership:hover{ color:#b7c0cc; }
.nav.scrolled .partnership{ color:#5b6574; }
.nav.scrolled .partnership:hover{ color:#3e4652; }
.btn{ display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:10px; text-decoration:none; font-weight:700; }
.btn.primary{
background: linear-gradient(180deg, #a39d91 0%, var(--accent) 45%, #b8a99d 100%);
color:#0b1220;
box-shadow: 0 10px 22px rgba(180,188,200,.35), inset 0 1px 0 rgba(255,255,255,.6);
border: 1px solid rgba(160,170,185,.6);
}
.btn.ghost{ border:1px solid rgba(255,255,255,.1); color:white; }
/* Light hero override for ghost button */
.hero .btn.ghost{ border:1px solid rgba(0,0,0,.14); color:#0b1220; background: rgba(0,0,0,.02); }
.hero{ position:relative; z-index:1; padding: 64px 0 80px; background: linear-gradient(180deg, #a39d91 0%, var(--accent) 45%, #b8a99d 100%); color: #0b1220; overflow:hidden; }
/* Canvas layer for animated crypto graph */
.crypto-bg{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:-1; opacity:.9; }
.hero h1{ margin: 48px auto 12px; max-width: 960px; text-align:center; line-height:1.05; font-size: clamp(26px, 4.6vw, 48px); font-weight:900; letter-spacing:.5px; }
.hero h1 span{ display:block; }
.hero p.sub{ text-align:center; color: var(--muted); max-width: 820px; margin:0 auto; font-size: clamp(13px, 2vw, 16px); }
/* Why Trust Us: stats panel */
.stats-panel{
margin: 48px auto 0;
background: #ffffff;
color: #0b1220;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,.08);
border: 1px solid rgba(0,0,0,.06);
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
align-items: center;
gap: 0;
max-width: 920px;
padding: 26px 32px;
}
.stats-panel .divider{ width:1px; height: 72px; background: rgba(0,0,0,.08); }
.stat{ text-align:center; padding: 6px 10px; }
.stat-value{ font-size: clamp(28px, 5vw, 44px); font-weight: 900; letter-spacing:.5px; }
.stat-value .plus{ color:#2a63ff; margin-left:4px; }
.stat-unit{ font-weight: 800; margin-top: 4px; font-size: 15px; color:#1f2937; }
.stat-desc{ margin-top:10px; color:#6b7280; font-size: 13px; }
@media (max-width: 740px){
.stats-panel{ grid-template-columns: 1fr; gap:16px; padding:20px; }
.stats-panel .divider{ display:none; }
.stat{ padding:6px 0; }
}
.cta{ display:flex; flex-direction:column; align-items:center; gap:8px; margin: 22px 0 32px; }
.cta .btn{ padding:14px 22px; font-size:15px; border-radius:12px; }
.tiny{ color:#96a8c9; font-size:12px; opacity:.85; }
.cards{
display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:14px; max-width:980px; margin: 26px auto 56px;
}
.card{
position:relative;
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.08);
border-radius: 14px; padding:14px 16px; display:flex; gap:12px; align-items:center; box-shadow: var(--shadow);
transition:.18s transform ease, .18s background ease, .18s border-color ease;
}
.card:hover{ transform: translateY(-3px); border-color: rgba(208,215,226,.6); background: linear-gradient(180deg, rgba(207,215,230,.18), rgba(90,100,120,.18)); }
.badge{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:white; font-weight:900; font-size:12px; }
.flag{ background: linear-gradient(90deg, #b22234 0 33%, white 33% 66%, #3c3b6e 66%); }
.gold{ background: linear-gradient(180deg, var(--gold-light), var(--gold)); }
.coffee{ background: linear-gradient(180deg, #6b3f24, #3c2315); }
.index{ background: linear-gradient(180deg, #f0f3f9, #aeb6c3); }
.apple{ background: linear-gradient(180deg, #0f141e, #2a3549); }
.label{ font-weight:800; font-size:13px; }
.muted{ color: var(--muted); font-size:11px; }
/* marquee awards */
.logos{
position:relative;
overflow:hidden;
opacity:1;
filter: saturate(.9);
/* fade the scrolling line at left and right edges */
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/* Fallback edge fades for browsers without mask-image support */
.logos::before,
.logos::after{
content:"";
position:absolute;
top:0; bottom:0;
width:70px;
pointer-events:none;
z-index:2;
}
.logos::before{ left:0; background: linear-gradient(to right, var(--bg) 0%, rgba(11,18,32,0) 100%); }
.logos::after{ right:0; background: linear-gradient(to left, var(--bg) 0%, rgba(11,18,32,0) 100%); }
@supports ((-webkit-mask-image: linear-gradient(black, black)) or (mask-image: linear-gradient(black, black))){
.logos::before,
.logos::after{ display:none; }
}
.logos-track{ display:flex; align-items:center; gap:36px; width:max-content; animation: awards-marquee 48s linear infinite; }
@keyframes awards-marquee{
from{ transform: translateX(0); }
to{ transform: translateX(-50%); }
}
.logo-pill{ border:1px dashed rgba(255,255,255,.24); color:#334155; padding:10px 14px; border-radius:999px; font-size:12px; white-space:nowrap; }
.logo-pill img.partner-logo{ height:28px; max-width:160px; display:block; object-fit:contain; }
/* responsive */
@media (max-width: 980px){
.cards{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px){
.menu{ display:none; }
.cards{ grid-template-columns: 1fr; }
.nav-inner{ height: 64px; }
.hero{ padding: 38px 0 56px; }
}
/* Cards slider (horizontal) */
.cards-slider{ position:relative; max-width:1100px; margin: 0 auto 56px; padding: 0 44px; }
.cards.slider{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 10px; }
.cards.slider::-webkit-scrollbar{ height:8px; }
.cards.slider::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius:999px; }
.cards.slider .card{ flex: 0 0 auto; width: clamp(200px, 28vw, 260px); scroll-snap-align: start; }
.snav{ position:absolute; top:50%; transform: translateY(-50%); width:34px; height:34px; border-radius:999px; display:grid; place-items:center; color:#eaf2ff; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); box-shadow: 0 6px 16px rgba(0,0,0,.35); cursor:pointer; font-size:20px; line-height:1; }
.snav:hover{ background: rgba(255,255,255,.12); }
.snav.prev{ left:6px; }
.snav.next{ right:6px; }
@media (max-width: 680px){
.cards-slider{ padding: 0 10px; }
.snav{ display:none; }
}
/* Slider indicators (pagination dots) */
.slider-indicators{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:10px; }
.slider-indicators .dot{ width:8px; height:8px; border-radius:999px; background: rgba(255,255,255,.28); border:1px solid rgba(255,255,255,.28); display:inline-block; cursor:pointer; }
.slider-indicators .dot[aria-current="true"]{ background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(63,183,255,.22); }
@media (prefers-reduced-motion: reduce){ .slider-indicators .dot{ transition: none; } }
/* Favourites section */
.favourites{ background:#ffffff; color:#0b1220; border-top-left-radius:0; border-top-right-radius:0; padding:2cm 0 2cm; box-shadow: inset 0 1px 0 rgba(0,0,0,.06); }
/* Make favourites section use full width */
.favourites .container{ max-width:1200px; width:80%; margin:0 auto; }
.fav-title{ text-align:center; font-weight:900; letter-spacing:.2px; font-size: clamp(24px, 3.6vw, 34px); margin: 4px 0 6px; }
.fav-title .accent-word{ color: var(--accent); }
.fav-sub{ text-align:center; color:#50618a; max-width:760px; margin:0 auto 18px; font-size:14px; }
/* Allow the grid to span full width */
.favourites .fav-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:18px; max-width:none; margin:22px auto 0; }
.fav-card{ position:relative; border-radius:16px; overflow:hidden; min-height:170px; background: linear-gradient(180deg, #f3f6ff, #edf2ff); border:1px solid #e6ecff; box-shadow: 0 8px 24px rgba(13,30,70,.08); isolation:isolate; }
.fav-card .fav-content{ position:relative; z-index:1; padding:22px; }
.fav-card h3{ margin:0 0 6px; font-size:18px; }
.fav-card p{ margin:0 0 10px; font-size:13px; color:#43537a; }
.text-link{ color: var(--accent); font-weight:800; text-decoration:none; }
.text-link:hover{ text-decoration:underline; }
.fav-tall{ min-height:300px; }
/* Themed variants */
.fav-app{
/* Use Iron Market Mobile App image with a subtle gray dim for text readability */
background:
linear-gradient(0deg, rgba(0,0,0,.12), rgba(0,0,0,.12)),
url('assets/features/Iron%20Market%20Mobile%20App.png') center right / cover no-repeat,
radial-gradient(600px 240px at 30% 0%, rgba(61,130,255,.18), rgba(61,130,255,0)),
linear-gradient(180deg, #eef2ff, #eaf1ff);
color:#1f2937;
border-color: rgba(80,130,255,.20);
}
.fav-app p{ color:#1f2937; }
.fav-bonus{
/* Use 100% Deposit Bonus image as the card's background with a subtle gray dim for readability */
background:
linear-gradient(0deg, rgba(0,0,0,.12), rgba(0,0,0,.12)),
url('assets/features/100%25%20Deposit%20Bonus.png') right center / cover no-repeat,
radial-gradient(600px 240px at 30% 0%, rgba(61,130,255,.18), rgba(61,130,255,0)),
linear-gradient(180deg, #eef2ff, #eaf1ff);
color:#1f2937;
border-color: rgba(80,130,255,.20);
}
.fav-bonus p{ color:#1f2937; }
.fav-competitions{
/* Use Competitions image as the card's background with a subtle gray dim for readability */
background:
linear-gradient(0deg, rgba(0,0,0,.12), rgba(0,0,0,.12)),
url('assets/features/Trading%20Competitions.png') right center / cover no-repeat,
radial-gradient(600px 240px at 30% 0%, rgba(61,130,255,.28), rgba(61,130,255,0)),
linear-gradient(180deg, #162034, #0f172a);
color:#eaf2ff;
border-color: rgba(80,130,255,.28);
}
.fav-competitions p{ color:#cfe0ff; }
.fav-copy{
/* Use Copy Trading image as the card's background with a subtle gray dim for readability */
background:
linear-gradient(0deg, rgba(0,0,0,.12), rgba(0,0,0,.12)),
url('assets/features/Copy%20Trading%20by%20Iron%20Market.png') right center / cover no-repeat,
radial-gradient(600px 240px at 30% 0%, rgba(61,130,255,.28), rgba(61,130,255,0)),
linear-gradient(180deg, #162034, #0f172a);
color:#eaf2ff;
border-color: rgba(80,130,255,.28);
}
.fav-copy p{ color:#cfe0ff; }
/* Decorative emoji marks to echo the reference visuals */
.fav-card::after{ position:absolute; right:16px; bottom:8px; font-size:120px; opacity:.22; filter: drop-shadow(0 6px 16px rgba(0,0,0,.15)); z-index:0; }
.fav-app::after{ content:none; display:none; }
.fav-bonus::after{ content:none; display:none; }
.fav-competitions::after{ content:none; display:none; }
.fav-copy::after{ content:none; display:none; }
/* Responsive adjustments for favourites */
@media (max-width: 980px){
.fav-grid{ grid-template-columns: 1fr; }
.fav-tall{ min-height:220px; }
}
@media (max-width: 680px){
.favourites .container{ width:100%; }
}
/* Results section */
.results{ position:relative; z-index:1; padding:64px 0 96px; border-top:1px solid rgba(255,255,255,.06); border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); overflow:visible; color: var(--text); background: linear-gradient(180deg, var(--bg), var(--bg-2)); }
.results-title{ text-align:center; font-size: clamp(22px, 3.2vw, 28px); font-weight:900; letter-spacing:.2px; margin:0 0 14px; }
.results-sub{ text-align:center; color: var(--muted); margin:0 auto 32px; max-width:720px; font-size:14px; }
.kpis{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:24px; max-width:860px; margin: 16px auto 32px; }
.kpi{ text-align:center; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.07); border-radius:16px; padding:18px 16px; box-shadow: var(--shadow); }
.kpi-value{ font-weight:900; font-size: clamp(26px, 4.2vw, 40px); letter-spacing:.4px; }
.kpi-value span{ font-weight:800; font-size: .6em; color:#cfe0ff; margin-left:6px; }
.kpi-note{ color:#9fb1d3; font-size:12px; margin-top:6px; }
.result-features{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:20px; max-width:980px; margin: 24px auto 40px; }
.r-card{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:16px; box-shadow: var(--shadow); transition:.18s transform ease, .18s border-color ease, .18s background ease; min-height:120px; display:flex; align-items:flex-start; gap:12px; }
.r-card:hover{ transform: translateY(-3px); border-color: rgba(208,215,226,.6); background: linear-gradient(180deg, rgba(207,215,230,.18), rgba(90,100,120,.18)); }
.r-card h3{ margin:6px 0 6px; font-size:14px; }
.r-card p{ margin:0; color:#a7b8d7; font-size:12px; }
.r-icon{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background: linear-gradient(180deg, #f5f7fb, var(--accent), #9aa3b2); box-shadow: 0 6px 18px rgba(160,170,185,.35); flex: 0 0 34px; position:relative; overflow:visible; }
.r-icon::after{ content:""; position:absolute; inset:6px; background-repeat:no-repeat; background-position:center; background-size:contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
/* Branded-style icons */
.r-icon--spreads::after{ background-image:url('data:image/svg+xml;utf8,'); }
.r-icon--costs::after{ background-image:url('data:image/svg+xml;utf8,'); }
.r-icon--execution::after{ background-image:url('data:image/svg+xml;utf8,'); }
.r-icon--withdrawals::after{ background-image:url('data:image/svg+xml;utf8,'); }
.results-cta{ text-align:center; margin-top:32px; }
.results-cta .btn{ font-size:13px; padding:12px 18px; border-radius:12px; }
@media (max-width: 980px){
.kpis{ grid-template-columns: 1fr; max-width:560px; }
.result-features{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
.result-features{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
.r-card{ transition:none; }
}
/* Trust/Security banner beneath Results */
.trust-banner{
position:relative;
width:100%;
margin:48px auto 0;
padding:34px 28px;
border-radius:20px;
color:#eaf2ff;
z-index:1;
/* Add a subtle gray dim overlay for better text readability over the background image */
background:
linear-gradient(0deg, rgba(0,0,0,.14), rgba(0,0,0,.14)),
url('assets/features/website%20security.png');
background-repeat: no-repeat, no-repeat;
background-position: center center, center center;
background-size: cover, cover;
border:1px solid rgba(180,188,200,.18);
box-shadow:
inset 0 0 0 1px rgba(176,184,196,.12),
0 16px 36px rgba(0,0,0,.42);
backdrop-filter: saturate(1.15) blur(6px);
-webkit-backdrop-filter: saturate(1.15) blur(6px);
overflow:hidden; /* keep artwork fully inside the banner */
}
.trust-banner h3{
margin:0 0 10px;
text-align:center;
font-size: clamp(20px, 2.8vw, 32px);
font-weight:900;
letter-spacing:.2px;
}
.trust-banner p{
margin:0;
text-align:center;
color:#cfe0ff;
font-size:15px;
line-height:1.55;
max-width:860px;
margin-inline:auto;
}
/* lock badge on the top edge */
.trust-banner::before{
content:none;
display:none;
}
.trust-banner::after{
content:none;
display:none;
}
/* Journey (New vs Experienced) */
.journey{
/* Add background image of model (curly) while preserving light theme */
background: #f3f6fb url('assets/Model/curly.png') right 20px center / clamp(260px, 32vw, 520px) auto no-repeat;
padding:120px 0 80px;
color:#0b1220;
}
/* push down content to clear the overlapping trust banner */
.journey .container{ max-width:1200px; padding-top:0; }
.journey-title{ text-align:center; font-weight:900; letter-spacing:.2px; font-size: clamp(24px, 3.6vw, 36px); margin:0 0 6px; }
.journey-sub{ text-align:center; color:#4a5d84; max-width:820px; margin:0 auto 22px; font-size:14px; }
.journey-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
.j-card{ position:relative; border-radius:18px; overflow:hidden; min-height:260px; box-shadow: 0 10px 28px rgba(13,30,70,.10); border:1px solid rgba(0,0,0,.06); display:flex; align-items:stretch; }
.j-body{ position:relative; z-index:1; padding:26px; max-width:640px; }
/* reserve space for background artwork on pro card so text doesn’t overlap */
.j-pro .j-body{ padding-right: clamp(140px, 24vw, 320px); padding-left: 34px; }
.j-card h3{ margin:0 0 8px; font-size:22px; }
.j-card p{ margin:0 0 12px; font-size:14px; color:#455784; }
.j-link{ color:var(--accent-2); font-weight:800; text-decoration:none; }
.j-link:hover{ text-decoration:underline; }
/* variant styles */
.j-new{
position: relative;
color:#1f2937;
background:
linear-gradient(0deg, rgba(255,255,255,.14), rgba(255,255,255,.14)),
url('assets/features/trend.png');
background-repeat: no-repeat, no-repeat;
background-position: center right, center right;
background-size: cover, cover;
border-color: rgba(255,255,255,.10);
}
.j-new p{ color:#1f2937; }
.j-new .j-link{ color:#1f66ff; }
.j-new .j-link:hover{ color:#1547d9; }
/* hide decorative art on j-new when using full background image */
.j-card.j-new .j-art{ display:none; }
.j-pro{
position: relative;
color:#ffffff;
background:
linear-gradient(0deg, rgba(0,0,0,.18), rgba(0,0,0,.18)),
url('assets/features/Experienced%20Trader.png');
background-repeat: no-repeat, no-repeat;
background-position: center right, center right;
background-size: cover, cover;
border-color: rgba(255,255,255,.10);
}
.j-pro p{ color:#e4edff; }
.j-link--pro{ color:#8ecbff; }
.j-link--pro:hover{ color:#b6deff; }
/* decorative art blocks */
.j-art{ position:absolute; right:8px; bottom:-8px; width:40%; height:80%; border-top-left-radius:24px; background:
radial-gradient(300px 200px at 60% 20%, rgba(61,130,255,.20), rgba(61,130,255,0) 70%),
linear-gradient(180deg, #e7edf9, #dfe8ff);
filter: drop-shadow(0 12px 24px rgba(13,30,70,.15));
}
.j-art::after{ content:"📈"; position:absolute; inset:0; display:grid; place-items:center; font-size:84px; opacity:.18; }
.j-art--pro{ background:
radial-gradient(400px 240px at 40% 10%, rgba(61,130,255,.30), rgba(61,130,255,0) 70%),
linear-gradient(180deg, #112544, #0b1d36);
box-shadow: inset 0 0 0 1px rgba(150,200,255,.08), 0 16px 30px rgba(0,0,0,.35);
}
.j-art--pro::after{ content:"🧊"; font-size:90px; opacity:.22; }
/* Hide decorative art on pro when using full background image */
.j-card.j-pro .j-art{ display:none; }
/* responsive */
@media (max-width: 980px){
.journey-grid{ grid-template-columns: 1fr; }
.j-art{ position:absolute; width:38%; height:50%; right:8px; bottom:-12px; }
.j-pro .j-body{ padding-right: 24px; }
}
/* Override to make hero container full width and rounded at the bottom */
.hero.container{ max-width: none; width: 100%; padding-left: 0; padding-right: 0; overflow: hidden; }
@media (max-width: 900px){
.trust-banner{
/* Keep the background image covering and centered on medium screens */
background-size: cover;
background-position: center center;
}
}
@media (max-width: 640px){
.trust-banner{
/* Keep the background image covering and centered on small screens */
background-size: cover;
background-position: center center;
}
}
/* Support CTA section */
.support{
position:relative;
background: #ffffff url('assets/model/support.png') center center / cover no-repeat;
padding: 96px 0 96px;
overflow:hidden;
}
/* light grey bands above and below to mimic reference */
.support::before,
.support::after{
content:"";
position:absolute; left:0; right:0; height:80px; background:#eceff4; z-index:0;
}
.support::before{ top:0; transform: translateY(-100%); }
.support::after{ bottom:0; transform: translateY(100%); }
.support-inner{ position:relative; display:flex; align-items:center; justify-content:center; min-height:320px; }
.support-copy{ text-align:center; max-width:760px; z-index:1; }
.support-copy h2{ margin:0 0 10px; font-size: clamp(28px, 4vw, 44px); font-weight:900; letter-spacing:.2px; color:#0b1220; }
.support-copy p{ margin:0 0 18px; color:#5a6a87; font-size:16px; }
/* dark button variant */
.btn.dark{ background:#111827; color:#ffffff; box-shadow: 0 10px 20px rgba(17,24,39,.15); border-radius:12px; padding:12px 20px; }
.btn.dark:hover{ background:#0b1220; }
/* artwork on the right */
.support-art{ display:none; }
.support-svg{ width:100%; height:auto; display:block; }
@media (max-width: 900px){
.support-art{ width: clamp(180px, 40vw, 320px); right: -20px; bottom: -20px; opacity:.6; }
}
@media (max-width: 640px){
.support-inner{ justify-content:center; padding-right: 0; }
.support-art{ display:none; }
}
/* Connect/Footer section matching screenshot */
.connect{ background:#eef2f6; padding:56px 0 36px; color:#0b1220; border-top:1px solid rgba(0,0,0,.06); }
.connect .container{ max-width:1200px; }
.connect-top{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
.connect h2{ margin:0; font-size: clamp(22px, 3vw, 28px); font-weight:800; letter-spacing:.2px; }
.socials{ display:flex; gap:12px; flex-wrap:wrap; }
.s-btn{ width:36px; height:36px; display:grid; place-items:center; border-radius:10px; border:1px solid rgba(0,0,0,.08); background:#ffffff; color:#111827; text-decoration:none; box-shadow: 0 4px 10px rgba(0,0,0,.04); }
.s-btn:hover{ background:#f5f7fa; }
/* Support both inline SVG (legacy) and Bootstrap Icons () */
.s-btn svg{ width:18px; height:18px; fill: currentColor; }
.s-btn i.bi{ font-size:18px; line-height:1; display:inline-block; }
/* Brand colors */
.s-btn[aria-label="Facebook"]{ color:#1877F2; }
.s-btn[aria-label="Instagram"]{ color:#E4405F; }
.s-btn[aria-label="X"]{ color:#111111; }
.s-btn[aria-label="YouTube"]{ color:#FF0000; }
.s-btn[aria-label="LinkedIn"]{ color:#0A66C2; }
.s-btn[aria-label="Telegram"]{ color:#229ED9; }
.s-btn[aria-label="TikTok"]{ color: #aa8b14; }
/* Legacy Instagram inline SVG stroke override */
.s-btn[aria-label="Instagram"] svg{ fill:none; stroke: currentColor; stroke-width:1.6; }
.sep{ height:1px; background: rgba(0,0,0,.08); margin:18px 0 8px; }
.connect-grid{ display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:28px; padding:12px 0 28px; }
.c-col h4{ margin:0 0 10px; font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:#6b7280; }
.c-col ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.c-col a{ color:#1f2937; text-decoration:none; font-size:13px; }
.c-col a:hover{ text-decoration:underline; }
.connect-bottom{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:22px; border-top:1px solid rgba(0,0,0,.06); }
.c-brand img{ height:44px; width:auto; object-fit:contain; filter: grayscale(0.1) contrast(1.05); }
.store-badges{ display:flex; align-items:center; gap:12px; }
.store{ display:flex; align-items:center; gap:10px; background:#ffffff; border:1px solid rgba(0,0,0,.12); border-radius:12px; padding:8px 12px; text-decoration:none; color:#111827; box-shadow: 0 6px 16px rgba(0,0,0,.06); }
.store .ico{ font-size:18px; line-height:1; }
.store .copy{ display:flex; flex-direction:column; font-size:10px; letter-spacing:.2px; color:#4b5563; }
.store .copy strong{ font-size:13px; color:#111827; font-weight:800; }
.more{ width:36px; height:36px; border-radius:10px; border:1px solid rgba(0,0,0,.12); background:#ffffff; box-shadow: 0 6px 16px rgba(0,0,0,.06); display:grid; place-items:center; }
.more .dots{ width:16px; height:16px; background:
radial-gradient(circle at 25% 25%, #111827 2px, transparent 3px),
radial-gradient(circle at 75% 25%, #111827 2px, transparent 3px),
radial-gradient(circle at 25% 75%, #111827 2px, transparent 3px),
radial-gradient(circle at 75% 75%, #111827 2px, transparent 3px); }
@media (max-width: 980px){
.connect-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px){
.connect-top{ flex-direction:column; align-items:flex-start; }
.connect-grid{ grid-template-columns: repeat(2, 1fr); }
.connect-bottom{ flex-direction:column; align-items:flex-start; gap:14px; }
}
@media (max-width: 420px){
.connect-grid{ grid-template-columns: 1fr; }
}
/** Legal/Disclaimer section (matches screenshot) **/
.legal{ background:#eef2f6; color:#1f2937; padding:24px 0 26px; border-top:1px solid rgba(0,0,0,.06); }
.legal .container{ max-width:1200px; }
/* top policy links */
.legal-top{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; padding:8px 0 10px; }
.legal-top a{ color:var(--accent-2); text-decoration:none; font-weight:500; font-size:12px; }
.legal-top a:hover{ text-decoration:underline; }
/* copy paragraphs */
.legal-copy{ margin-top:6px; }
.legal-copy p{ margin:8px 0; font-size:12px; line-height:1.55; color:#4b5563; }
.legal-copy a{ color:var(--accent-2); text-decoration:none; }
.legal-copy a:hover{ text-decoration:underline; }
.legal-copy strong{ color:#374151; }
.legal-heading{ margin:0 0 8px; font-size:13px; font-weight:800; letter-spacing:.2px; color:#374151; }
/* badges row */
.legal-badges{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; border-top:1px solid rgba(0,0,0,.08); margin-top:14px; padding-top:12px; }
.legal-badges .badge{
font-size:11px; color:#374151; background:#ffffff; border:1px solid rgba(0,0,0,.12); border-radius:8px; padding:6px 10px; box-shadow: 0 4px 10px rgba(0,0,0,.04);
}
@media (max-width: 680px){
.legal{ padding:20px 0 22px; }
.legal-top{ gap:12px; }
.legal-copy p{ font-size:11px; }
.legal-badges .badge{ font-size:10px; padding:6px 8px; }
}
/* Stats/Performance band */
.stats-band{ background: linear-gradient(180deg, var(--bg), var(--bg-2)); color: var(--text); padding: 56px 0 60px; position:relative; }
.stats-band .container{ max-width:1200px; }
.stats-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:18px; }
.stat{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:18px; box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.stat-num{ font-weight:900; font-size: clamp(24px, 3.6vw, 36px); color:#ffffff; letter-spacing:.2px; }
.stat-num .unit{ font-weight:800; font-size:.6em; opacity:.95; margin-left:4px; }
.stat-label{ color:#cfe0ff; font-size:13px; margin-top:6px; }
.features-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:14px; margin-top:16px; }
.feature{ display:flex; align-items:flex-start; gap:10px; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:12px 14px; }
.f-dot{ width:10px; height:10px; border-radius:999px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); margin-top:6px; box-shadow: 0 4px 10px rgba(160,170,185,.3); }
.f-text h3{ margin:0 0 4px; font-size:14px; color:#ffffff; font-weight:800; }
.f-text p{ margin:0; font-size:12px; color:#cfe0ff; }
/* responsive for stats band */
@media (max-width: 980px){
.stats-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.features-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
.stats-grid{ grid-template-columns: 1fr; }
.features-grid{ grid-template-columns: 1fr; }
.stats-band{ padding: 44px 0 48px; }
}
/* Screen-reader only utility */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip: rect(0, 0, 1px, 0); white-space:nowrap; border:0; }
/* Value Propositions section */
.value-props{ position:relative; background:#ffffff; padding:90px 0 90px; }
.value-props .container{ max-width:1200px; }
.value-title{ text-align:center; font-weight:900; letter-spacing:.2px; font-size: clamp(24px, 3.4vw, 36px); margin:0 0 8px; color:#0b1220; }
.value-sub{ text-align:center; color:#5a6a87; max-width:820px; margin:0 auto 24px; font-size:14px; }
.value-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; margin-top:18px; }
.v-card{ display:flex; align-items:flex-start; gap:14px; background: linear-gradient(180deg, #f7f9fc, #f0f3f9); border:1px solid #e3e7ee; border-radius:16px; padding:18px; box-shadow: 0 10px 24px rgba(13,30,70,.08); transition:.18s transform ease, .18s border-color ease, .18s background ease; min-height:120px; }
.v-card:hover{ transform: translateY(-3px); border-color: rgba(160,170,185,.4); background: linear-gradient(180deg, #f5f7fb, #eef2f7); }
.v-body h3{ margin:2px 0 6px; font-size:16px; font-weight:800; color:#0f172a; }
.v-body p{ margin:0; font-size:13px; color:#455784; line-height:1.5; }
.v-icon{ width:44px; height:44px; border-radius:12px; flex:0 0 44px; background: linear-gradient(180deg, #f5f7fb, var(--accent), #9aa3b2); box-shadow: 0 10px 22px rgba(160,170,185,.35); position:relative; }
.v-icon::after{ content:""; position:absolute; inset:8px; background-repeat:no-repeat; background-position:center; background-size:contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
/* Icon variants (white strokes) */
.v-icon--shield::after{ background-image:url('data:image/svg+xml;utf8,'); }
.v-icon--support::after{ background-image:url('data:image/svg+xml;utf8,'); }
.v-icon--years::after{ background-image:url('data:image/svg+xml;utf8,'); }
.v-icon--tech::after{ background-image:url('data:image/svg+xml;utf8,'); }
.v-icon--fast::after{ background-image:url('data:image/svg+xml;utf8,'); }
.v-icon--payments::after{ background-image:url('data:image/svg+xml;utf8,'); }
/* New icon variants for Stable Leverage page */
.v-icon--percent::after{ background-image:url('data:image/svg+xml;utf8,'); }
.v-icon--leverage::after{ background-image:url('data:image/svg+xml;utf8,'); }
@media (max-width: 980px){
.value-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
.value-props{ padding:64px 0 72px; }
.value-grid{ grid-template-columns: 1fr; }
}
/* Impact comparison section (Stable Leverage) */
.impact{ background: linear-gradient(180deg, var(--bg), var(--bg-2)); color: var(--text); padding: 64px 0 72px; border-top:1px solid rgba(255,255,255,.06); }
.impact .container{ max-width: 1200px; }
.impact-title{ text-align:center; font-weight:900; letter-spacing:.2px; font-size: clamp(22px, 3.2vw, 30px); margin:0 0 18px; }
.impact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:24px; max-width:980px; margin: 12px auto 16px; }
.impact-card{ background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:18px; box-shadow: var(--shadow); }
.impact-card.good{ border-color:var(--gold); box-shadow: 0 10px 28px rgba(0,0,0,.20); }
.impact-card.bad{ border-color: rgba(255,255,255,.14); }
.i-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.i-head h3{ margin:0; font-size:14px; font-weight:800; color:#eaf2ff; }
.i-badge{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:999px; background:#ffffff; color:#0b1220; font-weight:900; font-size:12px; border:1px solid rgba(0,0,0,.08); box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.i-badge.gray{ background:#e5e7eb; color:#111827; }
.i-list{ margin:0; padding:0; list-style:none; display:grid; gap:10px; color:#cfe0ff; font-size:12px; }
.dot{ display:inline-block; width:18px; height:18px; border-radius:999px; margin-right:8px; vertical-align:middle; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); position:relative; top:-1px; }
.dot.ok{ background: radial-gradient(circle at 50% 50%, #22c55e 0 40%, transparent 41%); border-color: rgba(34,197,94,.6); box-shadow: 0 0 0 2px rgba(34,197,94,.15) inset; }
.dot.no{ background: radial-gradient(circle at 50% 50%, #ef4444 0 40%, transparent 41%); border-color: rgba(239,68,68,.6); box-shadow: 0 0 0 2px rgba(239,68,68,.15) inset; }
@media (max-width: 860px){ .impact-grid{ grid-template-columns: 1fr; } }
/* Profit comparison table (light section) */
.comparison{ background:#ffffff; color:#0b1220; padding:56px 0 70px; }
.comparison .container{ max-width:1200px; }
.cmp-title{ text-align:center; font-weight:900; letter-spacing:.2px; font-size: clamp(22px, 3.4vw, 32px); margin:0 0 8px; }
.cmp-sub{ text-align:center; color:#50618a; max-width:860px; margin:0 auto 22px; font-size:14px; }
.cmp-table{ max-width:980px; margin: 14px auto 12px; border-radius:14px; }
.cmp-grid{ display:grid; grid-template-columns: 1.1fr 1fr 1fr; gap:0; align-items:stretch; }
.cmp-head{ text-align:center; background:#ffffff; border:1px solid #e6ebf3; border-radius:12px; padding:10px 8px; margin: 0 10px 10px; box-shadow: 0 8px 20px rgba(0,0,0,.05); }
.cmp-head strong{ display:block; font-size:13px; font-weight:800; }
.cmp-head span{ display:block; font-size:11px; color:#64748b; }
.cmp-head.xm{ border-color:var(--gold-light); box-shadow: 0 0 0 2px rgba(212,175,55,.35) inset, 0 10px 24px rgba(212,175,55,.12); }
.cmp-head.im{ border-color:var(--gold-light); box-shadow: 0 0 0 2px rgba(212,175,55,.35) inset, 0 10px 24px rgba(212,175,55,.12); }
.cmp-label{ background:#f5f7fb; border:1px solid #e3e7ee; color:#334155; padding:12px 14px; font-size:12px; font-weight:700; }
.cmp-label.cmp-empty{ visibility:hidden; border-color: transparent; background: transparent; padding:0; margin:0; }
.cmp-val{ text-align:center; padding:12px 10px; border-bottom:1px solid #eef2f7; border-left:1px solid #f1f5f9; border-right:1px solid #f1f5f9; font-size:12px; color:#1f2937; }
.cmp-grid > .cmp-label + .cmp-val + .cmp-val{ /* keep row grouping visually tight */ }
.cmp-note{ text-align:center; color:#6b7280; font-size:11px; max-width:860px; margin: 12px auto 0; }
@media (max-width: 760px){
.cmp-table{ overflow:auto; }
.cmp-grid{ min-width:720px; }
}
/* Scroll reveal animations (site-wide) */
.reveal{
opacity: 0;
transform: translateY(16px);
transition: opacity .6s ease, transform .6s ease;
will-change: opacity, transform;
}
.reveal--in{
opacity: 1;
transform: none;
}
/* allow slight directional variants if needed */
.reveal[data-reveal="down"]{ transform: translateY(-16px); }
.reveal[data-reveal="left"]{ transform: translateX(16px); }
.reveal[data-reveal="right"]{ transform: translateX(-16px); }
@media (prefers-reduced-motion: reduce){
.reveal{ opacity:1; transform:none; transition: none; }
}
/* Hero enhancements: market ticker, dual CTA buttons, trust chips */
.hero-ticker{
position: relative; z-index: 3;
max-width: 980px; margin: 14px auto 8px; padding:8px 12px;
border-radius:999px;
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.1);
overflow:hidden; white-space: nowrap;
}
.ticker-track{ display:inline-flex; align-items:center; gap:16px; will-change: transform; animation: ticker-marquee 38s linear infinite; }
.t-item{ color:#d9e6ff; font-size:12px; opacity:.9; position:relative; }
.t-item strong{ font-weight:800; margin-left:6px; font-size:12px; color:#ffffff; }
.t-item em{ font-style:normal; margin-left:6px; font-weight:800; font-size:12px; }
.t-item.up em{ color: var(--success); }
.t-item.down em{ color: var(--danger); }
/* Attribute badges for ticker */
.t-item[data-hot]::after, .t-item[data-new]::after{
content: attr(data-badge);
position: relative; display:inline-block; margin-left:8px; padding:2px 6px; border-radius:999px; font-size:10px; font-weight:800; line-height:1; border:1px solid rgba(255,255,255,.16);
}
.t-item[data-hot]{ --badge-bg: linear-gradient(180deg, #f97316, #ea580c); }
.t-item[data-hot]::after{ background: var(--badge-bg); color:#fff; border-color: rgba(249,115,22,.6); text-shadow:0 1px 0 rgba(0,0,0,.3); }
.t-item[data-new]{ --badge-bg: linear-gradient(180deg, #6366f1, #3b82f6); }
.t-item[data-new]::after{ background: var(--badge-bg); color:#fff; border-color: rgba(99,102,241,.6); text-shadow:0 1px 0 rgba(0,0,0,.3); }
.t-sep{ color: rgba(255,255,255,.38); }
@keyframes ticker-marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .ticker-track{ animation: none; } }
/* CTA buttons row and trust chips */
.cta-buttons{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.trust-chips{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:8px; }
.chip{ border:1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); color:#cfe0ff; padding:6px 10px; border-radius:999px; font-size:11px; }
@media (max-width: 680px){ .hero-ticker{ margin-top:10px; padding:6px 10px; } }
/* Ticker variant placed under navbar (outside hero) */
.nav-ticker{
max-width: 1200px;
margin: 0 auto 10px;
padding:8px 12px;
background: linear-gradient(180deg, #ffffff, #f5f7fb);
border:1px solid rgba(0,0,0,.08);
box-shadow: 0 8px 16px rgba(0,0,0,.06);
}
.nav-ticker .t-item{ color:#334155; opacity:.95; }
.nav-ticker .t-item strong{ color:#0b1220; }
.nav-ticker .t-sep{ color: rgba(0,0,0,.38); }
/* Crypto-styled tweaks for Favourites without changing white background */
.favourites{ position:relative; overflow:hidden; }
/* ultra-subtle grid overlay to suggest "crypto" while keeping bg white */
.favourites::before{
content:""; position:absolute; inset:0; pointer-events:none; opacity:.14;
background:
repeating-linear-gradient(to right, rgba(0,0,0,.03) 0 1px, transparent 1px 120px),
repeating-linear-gradient(to bottom, rgba(0,0,0,.025) 0 1px, transparent 1px 80px);
}
/* Neon-ish links only inside favourites */
.favourites .text-link{
color: var(--accent-2);
text-shadow: 0 0 10px rgba(160,170,185,.35);
}
/* Gentle glass and hover glow for cards */
.fav-card{
backdrop-filter: saturate(1.1) blur(2px);
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.fav-card:hover{
transform: translateY(-3px);
border-color: rgba(176,184,196,.35);
box-shadow: 0 12px 32px rgba(13,30,70,.12);
}
/* Hero Market widget (nested panel) */
.hero-market{ max-width:980px; margin:18px auto 26px; border-radius:18px; padding:16px; background: #0B1220; border:1px solid rgba(255,255,255,.10); box-shadow: var(--shadow); color: var(--text); }
.hm-top{ display:grid; grid-template-columns: 2fr 1fr; gap:12px; }
.hm-depth, .hm-candles{ position:relative; border-radius:12px; border:1px solid rgba(255,255,255,.1); overflow:hidden; background:#0c1426; }
/* Depth chart: stepped blue valley using layered gradients */
.hm-depth{
background:
/* grid lines */
repeating-linear-gradient(to right, rgba(255,255,255,.06) 0 1px, transparent 1px 56px),
repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px 42px),
linear-gradient(180deg, #0e1629, #0a1220);
}
.hm-depth::after{
content:""; position:absolute; inset:0 6% 0 0; background:
linear-gradient(180deg, rgba(212,175,55,.18), rgba(212,175,55,0) 70%),
linear-gradient(90deg, rgba(212,175,55,.65), rgba(255,196,0,.35));
/* create a V valley silhouette */
-webkit-mask: polygon(0% 10%, 6% 14%, 12% 18%, 18% 22%, 24% 26%, 30% 30%, 36% 34%, 42% 38%, 48% 42%, 54% 46%, 60% 50%, 66% 46%, 72% 42%, 78% 38%, 84% 34%, 90% 30%, 96% 26%, 100% 22%, 100% 100%, 0 100%);
mask: polygon(0% 10%, 6% 14%, 12% 18%, 18% 22%, 24% 26%, 30% 30%, 36% 34%, 42% 38%, 48% 42%, 54% 46%, 60% 50%, 66% 46%, 72% 42%, 78% 38%, 84% 34%, 90% 30%, 96% 26%, 100% 22%, 100% 100%, 0 100%);
}
/* Right side candles panel */
.hm-candles{ background:
/* horizontal levels */
linear-gradient(0deg, transparent calc(25% - 1px), rgba(255,255,255,.12) calc(25% - 1px) 25%, transparent 25%),
linear-gradient(0deg, transparent calc(50% - 1px), rgba(255,255,255,.12) calc(50% - 1px) 50%, transparent 50%),
linear-gradient(0deg, transparent calc(75% - 1px), rgba(255,255,255,.12) calc(75% - 1px) 75%, transparent 75%),
repeating-linear-gradient(to right, rgba(255,255,255,.06) 0 1px, transparent 1px 18px),
linear-gradient(180deg, #0e1629, #0a1220);
}
.hm-candles::after{
content:""; position:absolute; inset:10% 8% 12% 8%; background:
/* green candles */
linear-gradient(#22c55e, #22c55e) 12% 54% / 4% 28%,
linear-gradient(#22c55e, #22c55e) 20% 62% / 4% 18%,
linear-gradient(#22c55e, #22c55e) 36% 58% / 4% 26%,
/* red candles */
linear-gradient(#ef4444, #ef4444) 28% 44% / 4% 20%,
linear-gradient(#ef4444, #ef4444) 44% 40% / 4% 18%,
linear-gradient(#ef4444, #ef4444) 64% 36% / 4% 22%,
linear-gradient(#22c55e, #22c55e) 76% 56% / 4% 24%,
linear-gradient(#22c55e, #22c55e) 88% 60% / 4% 18%;
background-repeat:no-repeat;
}
.price-tag{ position:absolute; right:10px; top:50%; transform: translateY(-50%); background:#0d2b1a; color:#a7f3d0; border:1px solid rgba(34,197,94,.5); padding:4px 8px; border-radius:8px; font-size:12px; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.hm-mid{ display:grid; grid-template-columns: repeat(3, 1fr) auto; gap:10px; align-items:center; padding:12px 4px 6px; }
.hm-metric{ background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:10px 12px; }
.hm-metric .m-label{ color:#9fb1d3; font-size:11px; }
.hm-metric .m-value{ font-size:14px; font-weight:800; color:#e5eefc; }
.hm-cta{ justify-self:end; display:flex; gap:10px; }
.hero-market .btn{ border-radius:999px; padding:10px 22px; font-weight:900; font-size:13px; text-decoration:none; }
.hero-market .btn.buy{ background: linear-gradient(180deg, #22c55e, #16a34a); color:white; box-shadow: 0 10px 22px rgba(34,197,94,.35); }
.hero-market .btn.sell{ background: linear-gradient(180deg, #ef4444, #dc2626); color:white; box-shadow: 0 10px 22px rgba(239,68,68,.35); }
/* Table */
.hm-table{ margin-top:10px; border:1px solid rgba(255,255,255,.08); border-radius:12px; overflow:hidden; }
.hm-table .tr{ display:grid; grid-template-columns: 1.1fr 1.5fr 1fr 1fr 1fr 1fr 1.2fr .7fr; gap:10px; padding:10px 12px; align-items:center; }
.hm-table .head{ background: rgba(255,255,255,.04); color:#b9c6e6; font-weight:700; font-size:11px; text-transform:none; }
.hm-table .tr:not(.head){ border-top:1px solid rgba(255,255,255,.06); font-size:12px; color:#e5eefc; }
.hm-table .td{ color:#dbe7ff; }
.hm-table .td.asset{ display:inline-flex; align-items:center; gap:8px; }
.hm-table .badge-tag{ display:inline-flex; align-items:center; gap:6px; padding:2px 6px; border-radius:999px; font-size:10px; font-weight:800; letter-spacing:.2px; line-height:1; border:1px solid rgba(255,255,255,.14); box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.hm-table .badge-tag.hot{ background: linear-gradient(180deg, #f97316, #ea580c); color:#fff; border-color: rgba(249,115,22,.6); text-shadow: 0 1px 0 rgba(0,0,0,.3); }
.hm-table .badge-tag.new{ background: linear-gradient(180deg, var(--gold), var(--gold-2)); color:#1a1205; border-color: rgba(212,175,55,.6); text-shadow: none; }
.hm-table .td.pos{ color: var(--success); font-weight:800; }
.hm-table .td.neg{ color: var(--danger); font-weight:800; }
.hm-table .td.neu{ color:#9fb1d3; font-weight:800; }
@media (max-width: 980px){
.hm-top{ grid-template-columns: 1fr; }
.hm-mid{ grid-template-columns: 1fr 1fr; grid-auto-rows:minmax(0,auto); }
.hm-cta{ grid-column: 1 / -1; justify-self:center; }
}
@media (max-width: 680px){
.hero-market{ padding:12px; }
.hm-table{ overflow:auto; }
.hm-table .tr{ width:860px; }
}
/* Market row (full-width, two columns) */
.market-row{ background: transparent; padding: 0; display: contents; }
.market-grid{ display:grid; grid-template-columns: 1.25fr 1fr; gap: 18px; align-items:start; }
.market-left, .market-right{ min-width:0; }
/* Bars panel (crypto performance) */
.bars-panel{ background:#0b1220; color:var(--text); border:1px solid rgba(255,255,255,.10); border-radius:18px; padding:16px; box-shadow: var(--shadow); }
.bp-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.bp-head h3{ margin:0; font-size:14px; font-weight:800; letter-spacing:.2px; color:#eaf2ff; }
.bp-legend{ display:flex; gap:10px; font-size:10px; color:#9fb1d3; }
.bp-legend .leg{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.bp-legend .leg.pos::before{ content:""; width:8px; height:8px; border-radius:2px; background: linear-gradient(180deg, #22c55e, #16a34a); display:inline-block; }
.bp-legend .leg.neg::before{ content:""; width:8px; height:8px; border-radius:2px; background: linear-gradient(180deg, #ef4444, #dc2626); display:inline-block; }
/* Two-column lists */
.bp-lists{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.bp-col{ background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:10px; }
.bp-col-title{ margin:0 0 8px; font-size:12px; color:#cfe0ff; letter-spacing:.25px; font-weight:800; }
.bp-olist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.bp-item{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); }
.bp-item .bp-sym{ font-weight:900; color:#eaf2ff; letter-spacing:.4px; }
.bp-item .bp-pct{ font-weight:900; font-variant-numeric: tabular-nums; }
.bp-item.pos .bp-pct{ color: var(--success); }
.bp-item.neg .bp-pct{ color: var(--danger); }
.bp-empty{ color:#9fb1d3; padding:8px 4px; font-size:12px; }
/* Old bar chart styles kept for backward-compatibility (no longer used) */
.bp-chart{ display:none; }
.bar{ display:none; }
.bp-footer{ display:flex; justify-content:flex-end; margin-top:10px; }
.bars-panel .btn.small{ padding:8px 12px; border-radius:10px; font-size:12px; }
@media (max-width: 680px){
.bp-lists{ grid-template-columns: 1fr; }
}
@media (max-width: 1080px){
.market-grid{ grid-template-columns: 1fr; }
}
/* Ensure hero-market and market-right panel render above hero vignette */
.hero .hero-market,
.hero .bars-panel{ position: relative; z-index: 2; }
/* Full-bleed expansion for market grid to mimic logos-track width */
.hero .market-grid{
max-width: none;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-left: 20px; /* keep same site gutters */
padding-right: 20px;
}
/* Ensure the Illustrative trading panel fills its grid column */
.market-left .hero-market{
max-width: none;
width: 100%;
margin: 18px 0 26px; /* remove auto-centering */
}
/* Smooth fade when switching highlighted crypto */
.mh-chart-box{ transition: opacity .6s ease; }
.mh-chart-box.switching{ opacity:.45; }
/* Lightweight flash for updated table rows */
@keyframes hmRowFlash {
0% { background-color: rgba(176,184,196,0.18); }
100% { background-color: transparent; }
}
.hm-table .tr.hm-row-flash { animation: hmRowFlash .9s ease forwards; }
@media (prefers-reduced-motion: reduce){
.hm-table .tr.hm-row-flash { animation: none; }
}
@media (prefers-reduced-motion: reduce){
.bp-chart .bar{ transition: none; }
}
/* Badges on Popular Markets cards only */
.cards .badge-tag{ position:absolute; top:8px; right:8px; display:inline-flex; align-items:center; gap:6px; padding:2px 6px; border-radius:999px; font-size:10px; font-weight:800; letter-spacing:.2px; line-height:1; border:1px solid rgba(255,255,255,.14); box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.cards .badge-tag.hot{ background: linear-gradient(180deg, #f97316, #ea580c); color:#fff; border-color: rgba(249,115,22,.6); text-shadow: 0 1px 0 rgba(0,0,0,.3); }
.cards .badge-tag.new{ background: linear-gradient(180deg, #6366f1, #3b82f6); color:#fff; border-color: rgba(99,102,241,.6); text-shadow: 0 1px 0 rgba(0,0,0,.3); }
/* Market Highlights section (professional redesign) */
.market-highlights{ position:relative; z-index:1; padding:64px 0 80px; background: linear-gradient(180deg, var(--bg), var(--bg-2)); color: var(--text); border-top:1px solid rgba(255,255,255,.06); }
.market-highlights .container{ max-width:1680px; width:98%; margin:0 auto; }
.mh-title{ text-align:center; font-weight:900; letter-spacing:.3px; font-size: clamp(24px, 3.2vw, 34px); margin:0 0 8px; }
.mh-sub{ text-align:center; color:#9fb1d3; margin:0 auto 24px; max-width:720px; font-size:13px; opacity:.9; }
.mh-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:20px; }
.mh-card{ position:relative; overflow:hidden; background: rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.10); border-radius:14px; padding:18px; box-shadow: 0 10px 30px rgba(0,0,0,.45); display:flex; align-items:center; gap:14px; min-height:100px; isolation:isolate; backdrop-filter: saturate(1.15) blur(6px); transition: .2s transform ease, .2s border-color ease, .2s background-color ease, .2s box-shadow ease; }
.mh-card:hover{ transform: translateY(-4px); border-color: rgba(176,184,196,.55); background-color: rgba(176,184,196,.08); box-shadow: 0 14px 34px rgba(160,170,185,.22), 0 8px 20px rgba(0,0,0,.35); }
.mh-ico{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background: linear-gradient(180deg, #f5f7fb, var(--accent), #9aa3b2); box-shadow: 0 8px 18px rgba(160,170,185,.35); font-size:16px; color:#0b1220; }
.mh-body h3{ margin:0 0 4px; font-size:13px; font-weight:800; letter-spacing:.2px; color:#eaf2ff; }
.mh-body p{ margin:0; font-size:12px; color:#a7b8d7; }
.mh-body .mh-pct.pos{ color: var(--success); font-weight:800; }
.mh-body .mh-pct.neg{ color: var(--danger); font-weight:800; }
.mh-note{ color:#b9c6e6; }
/* Remove decorative sparklines for cleaner professional look */
.mh-spark{ display:none !important; }
/* Chart area inside Market Highlights */
.mh-chart-wrap{ margin-top:18px; }
.mh-chart-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.mh-chart-title{ margin:0; font-size:14px; font-weight:800; color:#eaf2ff; letter-spacing:.2px; }
.mh-actions{ display:flex; align-items:center; gap:8px; }
.mh-actions .chip{ padding:6px 10px; border-radius:999px; font-size:11px; color:#cfe0ff; border:1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); }
.mh-chart-box{ background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:10px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
#mh-candlestick{ width:100%; height:420px; min-height:420px; }
@media (max-width: 1080px){
.mh-grid{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
@media (max-width: 720px){
#mh-candlestick{ height: 420px; }
}
@media (max-width: 640px){
.market-highlights{ padding:48px 0 64px; }
.mh-grid{ grid-template-columns: 1fr; }
}
/* Override to ensure hero has no rounded bottom corners */
.hero{ border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* Responsive: remove the background image in Journey on small screens for clarity */
@media (max-width: 720px){
.journey{ background-color:#f3f6fb; background-image:none; }
}
/* Market Highlights select styling for symbol picker */
.mh-actions{ display:flex; align-items:center; gap:8px; flex-wrap: wrap; }
.mh-timeframes{ display:flex; align-items:center; gap:8px; }
.mh-select{ appearance:none; -webkit-appearance:none; -moz-appearance:none; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.14); color:#cfe0ff; padding:6px 10px; border-radius:999px; font-size:11px; line-height:1.2; }
.mh-select-label{ font-size:11px; color:#9fb1d3; margin-right:2px; }
/* Market Highlights visual enhancements */
.market-highlights::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:
radial-gradient(1000px 420px at 20% -10%, rgba(176,184,196,.12), transparent 60%),
radial-gradient(800px 360px at 85% 110%, rgba(158,166,178,.10), transparent 60%);
}
.mh-title::after{ content:""; display:block; width:72px; height:3px; margin:10px auto 0; border-radius:999px; background: linear-gradient(90deg, rgba(176,184,196,.95), rgba(158,166,178,.95)); box-shadow: 0 2px 8px rgba(160,170,185,.35); }
/* Slightly increase spacing above chart for breathing room */
.mh-chart-wrap{ margin-top:24px; }
/* Typewriting word in hero headline */
.typewrite{ white-space: nowrap; display:inline-block; }
.typewrite .tw-word{ color: var(--accent-2); font-weight: 900; }
/* Blinking caret aligned to the word baseline using a CSS bar */
.tw-caret{
position: relative;
display: inline-block;
margin-left: 2px;
width: 2px;
line-height: 1em;
vertical-align: -0.1em; /* nudge to align with text baseline */
color: transparent; /* hide '|' glyph in case it's present */
font-size: 0; /* fully hide text glyph and rely on ::after */
opacity: .95;
animation: twBlink 1s steps(1, end) infinite;
}
.tw-caret::after{
content: "";
display: block;
width: 2px;
height: 0.95em;
background: var(--accent-2);
border-radius: 1px;
}
@keyframes twBlink{ 50% { opacity: 0; } }
/* Alignment fix: keep the typewritten word perfectly aligned with surrounding h1 text */
.hero h1 .typewrite,
.hero h1 .typewrite .tw-word{
display: inline-block;
line-height: 1em; /* match glyph box, avoid extra ascent/descent from h1 line-height */
vertical-align: -0.05em; /* subtle nudge to sit on the same baseline as “we’ve” */
}
/* Navbar layout polish without changing logo size */
/* Hide the middle menu bar if it has no items to keep clean spacing */
.menu:empty { display:none; }
/* Slight gap so brand and right cluster don't feel cramped */
.nav .nav-inner { gap: 16px; }
/* Ensure logo aligns nicely with the row without altering its size */
.brand .logo { vertical-align: middle; }
/* Responsive refinements: keep navbar tidy on smaller widths */
@media (max-width: 1024px){
.right-meta{ display:none; }
}
@media (max-width: 720px){
.nav .nav-inner{ height: 64px; }
.right-actions .btn.ghost{ display:none; }
.btn.primary{ padding:10px 14px; }
}
/* Auth Modal Styles */
html.no-scroll, body.no-scroll{ overflow:hidden; }
.auth-overlay{
position: fixed; inset: 0; z-index: 1000; display: none;
}
.auth-overlay.is-open{ display:block; }
.auth-backdrop{
position:absolute; inset:0; background: rgba(4,9,20,.6); backdrop-filter: blur(6px);
}
.auth-modal{
position: absolute; left:50%; top:50%; transform: translate(-50%,-48%);
width: min(92vw, 450px); max-height: 86vh; overflow:auto;
background: #ffffff; color:#0b1220; border-radius: 20px;
box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.35));
padding: 22px; display: grid; gap: 18px;
}
@media (min-width: 820px){
.auth-modal{ grid-template-columns: 1fr; padding: 28px; justify-items: center; }
}
.auth-close{
position:absolute; right:12px; top:10px; border:0; background:transparent; font-size:28px; line-height:1; cursor:pointer; color:#0b1220;
}
.auth-header{ grid-column: 1 / -1; text-align:center; padding-top:6px; }
.auth-header h2{ margin: 6px 0 2px; font-weight:800; font-size: clamp(20px, 2.6vw, 28px); }
.auth-header p{ margin: 0; color:#475569; }
.auth-tabs{ margin-top: 14px; display:inline-flex; background:#f1f5f9; border-radius: 12px; padding: 4px; gap:4px; }
.auth-tab{ border:0; background:transparent; padding:8px 14px; border-radius:10px; cursor:pointer; color:#334155; font-weight:600; }
.auth-tab.is-active{ background:#ffffff; color:#0b1220; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.auth-panel{ display:none; padding: 6px 6px 10px; width: min(450px, 100%); margin: 0 auto; }
.auth-panel.is-active{ display:block; }
@media (min-width: 820px){
.auth-panel--login{ padding-right: 0; border-right: 0; }
.auth-panel--signup{ padding-left: 0; }
}
.field{ display:flex; flex-direction:column; gap:6px; margin:12px 0; }
.field-row{ flex-direction:row; align-items:center; justify-content:space-between; }
.field label{ font-size: 12px; font-weight:700; color:#111827; text-transform:uppercase; letter-spacing:.04em; }
.field input[type="email"],
.field input[type="text"],
.field input[type="password"]{
width:100%; padding:12px 14px; border-radius:12px; border:1px solid #e5e7eb; background:#ffffff; color:#0b1220; outline:none;
transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
.field input::placeholder{ color:#94a3b8; }
.field input:focus{ border-color: var(--accent, #d0d7e2); box-shadow: 0 0 0 4px rgba(176,184,196,.22); }
.field input.is-invalid{ border-color: var(--danger, #ef4444); box-shadow: 0 0 0 4px rgba(239,68,68,.12); }
.field .field-msg{ min-height: 16px; font-size: 12px; color: var(--danger, #ef4444); }
.pass-wrap{ position:relative; }
.pass-toggle{ position:absolute; right:8px; top:50%; transform: translateY(-50%); border:0; background:transparent; cursor:pointer; color:#475569; padding:6px; border-radius:8px; }
.pass-toggle:hover{ background:#f1f5f9; }
.btn.btn-block{ display:block; width:100%; text-align:center; }
.btn.social{ background:#0f172a; color: #ffffff; border: 1px solid rgba(255,255,255,.06); }
.btn.social:hover{ background:#111827; }
.checkbox{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.checkbox input{ width:16px; height:16px; }
.link{ color: var(--accent, #aeb6c3); text-decoration:none; }
.link:hover{ text-decoration:underline; }
.or{ display:flex; align-items:center; gap:12px; color:#64748b; font-size: 12px; margin: 12px 0; }
.or::before, .or::after{ content:""; flex:1; height:1px; background: #e2e8f0; }
.socials{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.swap{ color:#64748b; font-size: 14px; text-align:center; }
/* Loading state for demo submission */
.auth-panel.is-loading .btn.primary{ opacity:.7; pointer-events:none; }
.auth-panel.is-loading{ position:relative; }
.auth-panel.is-loading::after{ content:""; position:absolute; inset:0; background: rgba(255,255,255,.5); border-radius: 16px; animation: pulse 1s infinite; }
@keyframes pulse{ 0%{opacity:.4} 50%{opacity:.8} 100%{opacity:.4} }
/* Crypto Alt Hero Variant (silver gray, crypto-focused) */
.hero.hero--crypto-alt{
/* layered metallic/silver base with gentle vertical gradient */
background:
linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,247,251,.97) 40%, rgba(234,238,244,.98) 100%),
radial-gradient(1200px 600px at 50% -10%, #f1f4f9 0%, #e3e7ee 55%, #cdd3dd 100%);
color:#0b1220;
}
/* Override hero decorative grid with a subtle hex/circuit vibe for the crypto alt */
.hero--crypto-alt::before{
content:"";
position:absolute; inset:0; pointer-events:none; z-index:0;
background:
/* soft light sheen */
linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,0) 22%, rgba(255,255,255,0) 78%, rgba(255,255,255,.18)),
/* hex-like lattice using angled repeating lines */
repeating-linear-gradient(60deg, rgba(0,0,0,.035) 0 1px, transparent 1px 46px),
repeating-linear-gradient(-60deg, rgba(0,0,0,.03) 0 1px, transparent 1px 46px),
/* faint vertical separators */
repeating-linear-gradient(to right, rgba(0,0,0,.03) 0 1px, transparent 1px 120px),
/* faint horizontal separators */
repeating-linear-gradient(to bottom, rgba(0,0,0,.03) 0 1px, transparent 1px 80px);
-webkit-mask: none;
mask: none;
}
/* Keep vignette from existing hero for depth (already provided by .hero::after) */
/* Crypto badges row */
.crypto-badges{
display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
margin: 10px auto 6px; padding:6px 8px; max-width: 980px;
}
.c-badge{
display:inline-flex; align-items:center; justify-content:center;
width:42px; height:42px; border-radius:12px;
background: linear-gradient(180deg, #ffffff, #f3f6fb);
border:1px solid #e3e7ee;
box-shadow: 0 6px 18px rgba(13,30,70,.08), inset 0 1px 0 rgba(255,255,255,.8);
}
.c-badge img{ max-width:70%; max-height:70%; display:block; object-fit:contain; filter: grayscale(100%) contrast(1.05) brightness(0.9); }
.c-badge:hover{ border-color: rgba(160,170,185,.6); box-shadow: 0 10px 24px rgba(13,30,70,.12); }
@media (max-width: 680px){
.c-badge{ width:36px; height:36px; border-radius:10px; }
}
/* Accessibility/readability improvements: darker text in hero */
.hero .typewrite .tw-word{ color:#0b1220; }
.hero .tw-caret::after{ background:#334155; }
.hero p.sub{ color:#334155; }
.hero .tiny{ color:#475569; opacity:.95; }
/* Darker ticker text on light hero background for contrast */
.hero .t-item{ color:#475569; opacity:.95; }
.hero .t-item strong{ color:#0b1220; }
.hero .t-sep{ color: rgba(0,0,0,.38); }
/* Hero image block */
.hero-media{ position:relative; z-index:2; max-width: 980px; margin: 16px auto 12px; padding: 0 20px; }
.hero-media img{ width:100%; height:auto; display:block; object-fit: contain; border-radius: 20px; background-color: transparent; mix-blend-mode: darken; }
@media (max-width: 900px){
.hero-media{ max-width: 820px; }
}
@media (max-width: 680px){
.hero-media{ margin: 12px auto 8px; padding: 0 12px; max-width: 92%; }
.hero-media img{ border-radius: 14px; }
}
.promo-banner{ position:relative; z-index:2; max-width:1100px; margin: 6px auto 22px; padding: 0 20px; }
.promo-inner{
position:relative;
display:flex; align-items:center; justify-content:space-between; gap:16px;
border-radius:18px; padding:18px 20px;
background:
linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,247,251,.97)),
radial-gradient(800px 360px at 10% -20%, rgba(176,184,196,.20), rgba(176,184,196,0) 60%);
border:1px solid rgba(0,0,0,.06);
box-shadow: 0 10px 26px rgba(13,30,70,.10);
overflow:hidden;
}
.promo-title{ margin:0 0 4px; font-size: clamp(18px, 3vw, 26px); font-weight:900; letter-spacing:.2px; color:#0b1220; }
.promo-sub{ margin:0; font-size:13px; color:#455784; }
.promo-sub .promo-limited{ color:#0f4ccf; font-weight:800; }
.promo-btn{ border-radius:999px; padding:12px 18px; font-weight:900; white-space:nowrap; }
@media (max-width: 900px){
.promo-inner{ background-size: 240px auto; }
}
@media (max-width: 680px){
.promo-banner{ padding: 0 12px; }
.promo-inner{ flex-direction:column; align-items:flex-start; text-align:left; background-image: linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,247,251,.97)), radial-gradient(800px 360px at 10% -20%, rgba(176,184,196,.20), rgba(176,184,196,0) 60%); }
.promo-btn{ align-self:stretch; text-align:center; width:100%; }
}
/* Floating promo variant (popup-like) */
.promo-banner.is-floating{
position: fixed;
right: 16px;
bottom: 16px;
z-index: 60;
width: min(92vw, 420px);
padding: 0; /* inner handles its own padding */
margin: 0; /* taken out of normal flow */
/* Use smooth visibility transition instead of display swap */
opacity: 0;
transform: translateY(8px) scale(0.98);
pointer-events: none;
transition: opacity .22s ease, transform .22s ease;
}
.promo-banner.is-floating .promo-inner{ padding: 14px 16px; border-radius: 16px; box-shadow: 0 16px 36px rgba(13,30,70,.22); }
.promo-banner.is-floating.is-open{ opacity:1; transform:none; pointer-events:auto; }
/* Close button (restyled, inside corner) */
.promo-close{
position:absolute;
top: 8px; right: 8px;
width: 32px; height: 32px;
border-radius: 10px;
border: 1px solid rgba(0,0,0,.06);
background: rgba(255,255,255,.8);
color: #334155;
box-shadow: 0 2px 10px rgba(0,0,0,.08);
cursor:pointer;
line-height: 1;
font-size: 18px;
display:grid; place-items:center;
backdrop-filter: saturate(1.1) blur(4px);
}
.promo-close:hover{ background:#ffffff; color:#0b1220; border-color: rgba(0,0,0,.10); }
.promo-close:focus{ outline: 2px solid var(--gold); outline-offset: 2px; }
/* Provide space so close button doesn't overlap text */
.promo-banner.is-floating .promo-inner{ padding-right: 54px; }
@media (max-width: 680px){
.promo-banner.is-floating{
left: 10px; right: 10px; bottom: 10px;
width: auto;
}
.promo-banner.is-floating .promo-inner{ padding: 12px 12px; border-radius: 14px; padding-right: 50px; }
.promo-close{ top: 6px; right: 6px; width: 30px; height: 30px; font-size: 16px; border-radius: 8px; }
}
/* Hover fade behavior for floating promo banner on hover-capable devices */
@media (hover: hover){
.promo-banner.is-floating.is-open .promo-inner{ transition: opacity .2s ease, box-shadow .2s ease; }
.promo-banner.is-floating.is-open:not(:hover) .promo-inner{ opacity: .65; box-shadow: 0 10px 24px rgba(13,30,70,.18); }
.promo-banner.is-floating.is-open:hover .promo-inner{ opacity: 1; }
}
/* Darker promo CTA button per request */
.promo-banner .promo-btn{
background: #0b1220; /* deeper dark */
color: #ffffff;
border: 1px solid rgba(255,255,255,.08);
box-shadow: 0 12px 28px rgba(0,0,0,.28);
}
.promo-banner .promo-btn:hover{
background: #000814; /* even darker on hover */
}
/** Advantage section (Discover The XM Advantage) */
.advantage{ padding: 38px 0 18px; }
.advantage .adv-title{ text-align:center; font-weight:900; letter-spacing:.3px; font-size: clamp(22px, 3.6vw, 34px); margin: 6px auto 6px; }
.advantage .adv-sub{ text-align:center; color:#6b7280; margin: 4px auto 24px; max-width: 780px; font-size: 14px; }
/* Grid layout: 2 columns, cards of two heights; large spans two rows */
.adv-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: 160px; gap: 18px; max-width: 980px; margin: 0 auto 18px; }
.adv-card{ position:relative; overflow:hidden; border-radius: 14px; padding: 18px 18px 18px; color:#0b1220; box-shadow: 0 12px 36px rgba(0,0,0,.08); border:1px solid rgba(0,0,0,.06); }
.adv-card.small{ grid-row: span 1; min-height: 160px; }
.adv-card.large{ grid-row: span 2; min-height: 340px; }
/* Visual styles */
.adv-card.light{ background: #f5f7fb; }
.adv-card.blue{ background: radial-gradient(110% 120% at 70% 40%, var(--gold-light) 0%, var(--gold-2) 50%, var(--gold-3) 100%); color:#1a1205; border-color: rgba(212,175,55,.35); }
.adv-card.green{ background: linear-gradient(135deg, #2f8b78 0%, #245a66 50%, #143a49 100%); color:#e6fbf7; border-color: rgba(16,57,65,.3); }
.adv-heading{ margin: 2px 0 6px; font-size: 18px; font-weight: 800; }
.adv-copy{ margin: 0; font-size: 12px; line-height: 1.5; opacity:.9; max-width: 70ch; }
.adv-link{ display:inline-block; margin-top: 10px; font-weight: 700; font-size: 13px; color: var(--gold-2); text-decoration:none; }
.adv-card.blue .adv-link{ color:var(--gold-light); }
.adv-card.green .adv-link{ color:#b7f4e6; }
/* Decorative art image bottom-right */
.adv-art{ position:absolute; right: 8px; bottom: 6px; width: 160px; height:auto; opacity:.95; filter: drop-shadow(0 10px 18px rgba(0,0,0,.25)); pointer-events:none; }
.adv-card.small .adv-art{ width: 120px; opacity:.9; }
/* Inline features row */
.adv-inline{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; max-width: 980px; margin: 8px auto 8px; }
.inline-item{ display:flex; align-items:center; gap:14px; background:#ffffff; border:1px solid rgba(0,0,0,.06); border-radius: 12px; padding: 14px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.inline-icon{ width:48px; height:48px; border-radius:12px; background:#f7f0da; display:grid; place-items:center; flex:0 0 auto; }
.inline-icon img{ max-width:34px; max-height:34px; object-fit:contain; }
.inline-title{ font-weight:800; font-size: 14px; }
.inline-sub{ font-size: 12px; color:#6b7280; }
/* Responsive adjustments */
@media (max-width: 920px){
.adv-grid{ grid-auto-rows: 150px; }
}
@media (max-width: 760px){
.adv-grid{ grid-template-columns: 1fr; grid-auto-rows: auto; }
.adv-card.small, .adv-card.large{ grid-row: span 1; min-height: auto; }
.adv-art{ width: 120px; }
.adv-inline{ grid-template-columns: 1fr; }
}
/* Safety & Security section */
.security{ position:relative; padding: 66px 0 70px; background: linear-gradient(180deg, #0b1220 0%, #0f182b 100%); color:#e9eef7; }
.security .sec-title{ text-align:center; font-weight:900; letter-spacing:.3px; font-size: clamp(22px, 3.6vw, 34px); margin: 0 auto 8px; color:#e9eef7; }
.security .sec-sub{ text-align:center; color:#aab3c3; margin: 0 auto 26px; max-width: 820px; font-size: 14px; }
.sec-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; max-width: 980px; margin: 18px auto 34px; }
.sec-card{ background: #10192e; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 22px 18px; text-align:center; box-shadow: 0 12px 36px rgba(0,0,0,.25); }
.sec-icon{ width: 48px; height:48px; margin: 4px auto 12px; display:grid; place-items:center; background: rgba(212,175,55,.14); border-radius:12px; }
.sec-heading{ margin: 2px 0 6px; font-size: 14px; font-weight: 800; color:#e5ecf7; }
.sec-copy{ margin: 0; font-size: 12px; color:#aeb6c3; line-height: 1.5; }
/* Support banner (glassy blue) */
.support-banner{ position:relative; overflow:hidden; border-radius: 18px; border: 1px solid rgba(212,175,55,.35); background: radial-gradient(120% 160% at 30% 0%, rgba(212,175,55,.55) 0%, rgba(181,139,43,.55) 40%, rgba(138,109,29,.7) 100%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow: 0 18px 50px rgba(0,0,0,.35); display:flex; align-items:center; justify-content: space-between; gap: 16px; padding: 28px; max-width: 1080px; margin: 0 auto; }
.support-title{ font-size: clamp(18px, 3.2vw, 28px); font-weight: 900; color:#ffffff; margin: 0 0 6px; text-shadow: 0 4px 16px rgba(0,0,0,.35); }
.support-sub{ color:#e5ecf7; opacity:.95; font-size: 13px; margin:0; }
.support-art{ position:absolute; right: 10px; bottom: -6px; width: 220px; height:auto; opacity:.9; filter: drop-shadow(0 18px 30px rgba(0,0,0,.45)); pointer-events:none; }
.support-copy{ position:relative; z-index:1; }
@media (max-width: 900px){
.sec-grid{ grid-template-columns: 1fr; }
.support-banner{ padding-right: 24px; }
.support-art{ width: 160px; right: 6px; bottom: -10px; opacity:.75; }
}
@media (max-width: 560px){
.support-art{ display:none; }
}
/* Ready to Experience the XM Difference (final CTA) */
.ready{ background:#ffffff; padding: 24px 0 80px; }
.ready .ready-title{ text-align:center; font-weight:900; letter-spacing:.3px; font-size: clamp(24px, 4vw, 40px); margin: 0 auto 6px; color:#0b1220; }
.ready .ready-sub{ text-align:center; color:#6b7280; margin: 0 auto 8px; max-width: 760px; font-size: 13px; }
/* Reuse existing .cta and .btn.dark styles for alignment and button look */
/* Execution Policy: features band under hero */
.exec-band{ background: #0b1220; color:#e9eef7; padding: 46px 0 54px; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); }
.exec-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 28px; align-items:start; }
.exec-item{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; }
.exec-ico{ width:72px; height:72px; border-radius:18px; display:grid; place-items:center; border:1px solid rgba(212,175,55,.45); color:var(--gold-2); background:#f7f0da; }
.exec-ico svg{ width:40px; height:40px; stroke:var(--gold-2); stroke-width:2; fill:none; }
.exec-copy strong{ display:block; font-size:13px; font-weight:800; color:#ffffff; }
.exec-copy span{ display:block; font-size:12px; color:#b9c6e6; line-height:1.35; }
@media (max-width: 900px){ .exec-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .exec-grid{ grid-template-columns: 1fr; } .exec-ico{ width:64px; height:64px; } }
/* Execution Policy: quote block */
.exec-quote{ background:#ffffff; color:#0b1220; padding: 48px 0 64px; }
.exec-quote-box{ max-width: 900px; margin: 0 auto; text-align:center; position:relative; }
.exec-quote-box blockquote{ margin:0; }
.exec-quote-box p{ font-size: clamp(18px, 2.6vw, 22px); font-weight:900; line-height:1.45; }
.q-mark{ position:absolute; left:50%; top: -10px; transform: translateX(-50%); font-size: 72px; color:#dbe3f4; opacity:.65; pointer-events:none; line-height:1; }
.q-author{ margin-top: 18px; font-weight:800; font-size: 12px; color:#111827; }
.q-role{ font-size: 11px; color:#6b7280; }
.q-logo{ display:block; height:20px; margin: 10px auto 0; object-fit:contain; filter: grayscale(100%) contrast(1.1); }
/* Execution Policy: two feature cards */
.exec-cards{ background:#f2f6fb; padding: 36px 0 60px; }
.exgrid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:22px; max-width: 980px; margin: 0 auto 12px; }
.excard{ display:flex; align-items:flex-start; gap:14px; background:#ffffff; border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:18px; box-shadow: 0 10px 24px rgba(0,0,0,.06); }
.ex-ico{ flex:0 0 54px; width:54px; height:54px; border-radius:12px; display:grid; place-items:center; border:1px solid rgba(212,175,55,.35); color:var(--gold-2); background:#f7f0da; }
.ex-ico svg{ width:30px; height:30px; stroke:var(--gold-2); fill:none; }
.ex-body h3{ margin:0 0 6px; font-size:16px; font-weight:800; color:#0b1220; }
.ex-body p{ margin:0; font-size:12px; color:#475569; line-height:1.5; }
@media (max-width: 820px){ .exgrid{ grid-template-columns: 1fr; } }
/* Account Types: dark hero matching screenshot */
.hero--accounts{
position:relative;
background: linear-gradient(180deg, #0b1220 0%, #10192e 60%, #0b1220 100%);
color:#e9eef7;
padding: 86px 0 120px;
overflow:hidden;
border-bottom: 0;
}
.hero--accounts .container{ text-align:center; }
.hero--accounts .eyebrow{ color:#9fb1d3; font-size:12px; margin: 6px 0 8px; opacity:.95; }
.hero--accounts .hero-title{ margin:0 0 8px; font-size: clamp(28px, 4.6vw, 46px); font-weight:900; letter-spacing:.3px; color:#ffffff; }
.hero--accounts .hero-sub{ margin:0 auto; max-width:820px; color:#cfe0ff; font-size:14px; }
.hero--accounts .cta .btn.primary{ border-radius:12px; }
/* dotted wave background approximation */
.accounts-wave{
position:absolute; left:0; right:0; bottom:-140px; height:340px; pointer-events:none; opacity:.55;
background:
radial-gradient(1000px 300px at 50% 0, rgba(255,255,255,.06), transparent 70%),
url('assets/background/results.png') center top/cover no-repeat;
}
/* Accounts cards grid inside hero */
.accounts-grid{
position:relative; z-index:2;
display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:22px;
max-width:1200px; margin: 60px auto 0; padding: 0 10px;
}
.acc-card{
background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
border:1px solid rgba(176,184,196,.25);
border-radius:18px;
padding: 22px 18px 18px;
color:#e9eef7;
box-shadow: 0 16px 36px rgba(0,0,0,.35);
text-align:center;
transition: .18s ease border-color, .18s ease box-shadow, .18s ease transform;
}
.acc-card.is-active{ border-color:var(--gold); box-shadow: 0 18px 40px rgba(212,175,55,.25); }
.acc-card:hover{ transform: translateY(-4px); border-color: rgba(208,215,226,.6); }
.acc-top{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:6px; }
.acc-icon{ width:74px; height:74px; border-radius:18px; position:relative; background: linear-gradient(180deg, #f5f7fb, var(--accent), #9aa3b2); box-shadow: 0 12px 30px rgba(160,170,185,.35); }
/* Fake layered stack inside icon */
.acc-icon::before, .acc-icon::after{ content:""; position:absolute; left:50%; transform: translateX(-50%); width:52px; height:12px; border-radius:6px; }
.acc-icon::before{ top:22px; background: rgba(0,0,0,.18); opacity:.25; filter: blur(6px); height:10px; }
.acc-icon::after{ top:14px; background: rgba(255,255,255,.9); box-shadow: 0 6px 0 rgba(0,0,0,.08), 0 12px 0 rgba(0,0,0,.06), 0 18px 0 rgba(0,0,0,.04); }
.acc-icon--blue{ background: linear-gradient(180deg, var(--gold-light), var(--gold) 50%, var(--gold-2) 100%); }
.acc-icon--green{ background: linear-gradient(180deg, #e7fbf3, #9fe8c7 50%, #40c197 100%); }
.acc-icon--gold-alt{ background: linear-gradient(180deg, #fff9e6, #f4e6b3 50%, #d4af37 100%); }
/* New icon themes for tiered accounts */
.acc-icon--bronze{ background: linear-gradient(180deg, #f7e7d3, #cd7f32 50%, #8a4b12 100%); }
.acc-icon--silver{ background: linear-gradient(180deg, #f5f7fb, #c0c0c0 50%, #8e9aa9 100%); }
.acc-icon--gold{ background: linear-gradient(180deg, var(--gold-light), var(--gold) 50%, var(--gold-2) 100%); }
.acc-icon--platinum{ background: linear-gradient(180deg, #eef3f9, #b9c6d6 50%, #8fa3b8 100%); }
.acc-title{ margin:4px 0 0; font-size:22px; font-weight:900; color:#ffffff; }
.acc-sub{ font-size:14px; color:#b9c6e6; }
.acc-copy{ color:#cfe0ff; font-size:14px; line-height:1.55; margin: 10px 0 14px; min-height: 66px; }
.acc-min{ font-weight:800; color:#eaf2ff; font-size:14px; margin: 4px 0 12px; }
.acc-min strong{ color:#ffffff; }
.acc-btn{ display:block; margin: 0 auto 10px; width: 86%; }
.acc-more{ display:inline-block; color:#9fb1d3; font-weight:700; font-size:13px; text-decoration:none; }
.acc-more:hover{ text-decoration:underline; }
/* Positioning context for card badges */
.acc-card{ position:relative; }
/* Most Popular chip */
.acc-chip{
position:absolute; top:10px; left:10px; z-index:3;
display:inline-flex; align-items:center; gap:6px;
padding:4px 8px; border-radius:999px;
font-size:10px; font-weight:900; letter-spacing:.2px;
color:#0b1220; background: linear-gradient(180deg, #f5f7fb, var(--accent), #9aa3b2);
border:1px solid rgba(176,184,196,.6);
box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.6);
}
/* Hero animated sheen + subtle texture */
.hero--accounts::after{
content:""; position:absolute; inset:-10% -10% -20% -10%; pointer-events:none; z-index:0;
background:
radial-gradient(60% 40% at var(--sx,50%) var(--sy,0%), rgba(176,184,196,.12), rgba(176,184,196,0) 60%),
repeating-linear-gradient(to right, rgba(255,255,255,.02) 0 1px, transparent 1px 140px),
repeating-linear-gradient(to bottom, rgba(255,255,255,.015) 0 1px, transparent 1px 120px);
animation: accountsSheen 18s linear infinite;
}
@keyframes accountsSheen{
0%{ --sx: 0%; --sy: 0%; opacity:.45; }
50%{ --sx: 100%; --sy: 10%; opacity:.65; }
100%{ --sx: 0%; --sy: 0%; opacity:.45; }
}
@media (prefers-reduced-motion: reduce){
.hero--accounts::after{ animation: none; }
}
/* Improve CTA focus visibility on dark background */
.hero--accounts .btn.primary:focus-visible,
.hero--accounts .btn.ghost:focus-visible,
.hero--accounts .acc-btn:focus-visible,
.hero--accounts .acc-more:focus-visible{
outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 12px;
}
/* Ghost button on dark hero */
.hero--accounts .btn.ghost{ color:#e9eef7; border:1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); }
.hero--accounts .btn.ghost:hover{ background: rgba(255,255,255,.08); }
/* Competitions: dark hero and stat cards */
.hero--competitions{
position:relative;
background: linear-gradient(180deg, #0b1220 0%, #0e1729 70%, #0b1220 100%);
color:#e9eef7;
padding: 96px 0 180px; /* extra bottom to allow overlapping cards */
overflow:hidden;
}
.hero--competitions .container{ text-align:center; }
.hero--competitions .eyebrow{ color:#8aa3cf; font-weight:800; font-size:12px; margin-bottom:8px; }
.hero--competitions .hero-title{ margin:0 0 10px; font-size: clamp(30px, 5vw, 56px); font-weight:900; color:#ffffff; line-height:1.08; }
.hero--competitions .hero-sub{ margin:0 auto; max-width:820px; color:#cfe0ff; font-size:14px; }
.hero--competitions .cta .btn.ghost{ border:1px solid rgba(255,255,255,.16); color:#e9eef7; background: rgba(255,255,255,.06); }
.hero--competitions .cta .btn.ghost:hover{ background: rgba(255,255,255,.1); }
/* Three cards row that overlaps bottom of hero */
.comp-stats{
position:relative; z-index:2;
display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px;
max-width: 980px; margin: 42px auto -90px; /* negative to overlap next section (or hero bottom) */
padding: 0 10px;
}
.comp-card{
background:#ffffff; color:#0b1220; border-radius:18px; padding:26px 20px; text-align:center;
border:1px solid rgba(0,0,0,.06);
box-shadow: 0 20px 50px rgba(0,0,0,.12);
}
.comp-card--focus{ box-shadow: 0 28px 60px rgba(212,175,55,.25); border-color: rgba(212,175,55,.45); transform: translateY(-18px); }
.comp-ico{ width:56px; height:56px; margin: 0 auto 8px; display:grid; place-items:center; color:var(--gold-2); font-size:28px; border-radius:14px; background:#f7f0da; border:1px solid rgba(212,175,55,.35); }
.comp-over{ color:#6b7280; font-size:12px; margin-top:6px; }
.comp-value{ font-size: clamp(26px, 4.4vw, 38px); font-weight:900; color:var(--gold-2); margin-top:4px; }
.comp-value--big{ font-size: clamp(30px, 5.2vw, 44px); }
.comp-desc{ color:#1f2937; font-weight:800; font-size:14px; margin-top:6px; }
@media (max-width: 820px){
.comp-stats{ grid-template-columns: 1fr; margin: 30px auto -70px; }
.comp-card--focus{ transform:none; }
}
/* Competitions list/cards section under hero */
.comp-section{ background:#f6f8fc; padding: 40px 0 60px; }
.comp-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:22px; max-width:1080px; margin:0 auto; }
.comp-cardbox{
background:#ffffff; border:1px solid rgba(0,0,0,.06); border-radius:18px; padding:20px; color:#0b1220;
box-shadow: 0 10px 28px rgba(0,0,0,.06);
}
.comp-topline{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.chip{ display:inline-block; padding:4px 8px; font-size:11px; font-weight:800; border-radius:999px; background:#f9f1d0; color:#3a2d10; border:1px solid rgba(212,175,55,.25); }
.chip--yellow{ background:#fff7cc; color:#6b5500; border-color: rgba(155,120,0,.25); }
.chip--pink{ background:#ffe3ec; color:#9b174c; border-color: rgba(219,39,119,.25); }
.comp-title{ margin:6px 0 4px; font-size:22px; font-weight:900; }
.comp-copy{ margin:0 0 12px; font-size:13px; color:#475569; max-width: 90%; }
.mini-btn{ display:inline-block; padding:8px 10px; border-radius:10px; border:1px solid rgba(0,0,0,.12); font-weight:800; font-size:12px; color:#0b1220; text-decoration:none; }
.mini-btn:hover{ background:#0b1220; color:#ffffff; border-color:#0b1220; }
/* dark banner strip inside each card */
.comp-banner{ position:relative; margin-top:12px; border-radius:12px; overflow:hidden; min-height:120px; display:flex; align-items:center; justify-content:space-between; padding:16px 18px; color:#e9eef7; }
.banner-a{ background: radial-gradient(800px 200px at 10% 10%, #1f2342, #0a0f1f 60%); }
.banner-b{ background: radial-gradient(800px 200px at 20% 10%, #15223d, #070c18 60%); }
.banner-left .pill{ display:inline-flex; align-items:center; gap:6px; background:#0b1324; color:#f9fbff; border:1px solid rgba(255,255,255,.15); border-radius:999px; padding:6px 10px; font-size:11px; font-weight:900; }
.banner-left .money{ margin-top:10px; font-size:22px; font-weight:900; }
.banner-left .money strong{ font-size:26px; }
.tags{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.tag{ display:inline-block; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.22); font-size:11px; color:#e5edff; opacity:.95; }
.text{ font-size:18px; font-weight:900; }
.pager{ display:flex; justify-content:center; gap:14px; margin: 16px 0 6px; }
.icon-btn{ width:36px; height:36px; border-radius:10px; border:1px solid rgba(0,0,0,.12); background:#ffffff; color:#111827; font-weight:900; }
.icon-btn:hover{ background:#0b1220; color:#ffffff; border-color:#0b1220; }
@media (max-width: 900px){ .comp-grid{ grid-template-columns: 1fr; } }
/* Help banner section under competitions */
.comp-help{ background:#0d1628; color:#e9eef7; padding: 40px 0 48px; }
.comp-help .container{ background:#0e1729; border:1px solid rgba(255,255,255,.08); border-radius:20px; padding: 34px 16px 36px; box-shadow: 0 20px 60px rgba(0,0,0,.18); max-width: 1080px; }
.help-title{ text-align:center; margin: 0 0 12px; font-size: clamp(20px, 3.6vw, 30px); font-weight:900; color:#ffffff; }
.help-cta{ margin-top: 8px; }
.help-btn{ background:#ffffff; color:#0b1220; border:1px solid rgba(0,0,0,.1); border-radius:12px; padding:12px 22px; font-weight:800; }
.help-btn:hover{ background:#f3f4f6; }
/* Professional polish for Social Competitions page */
/* Subtle animated sheen/texture on competitions hero (reuses accountsSheen keyframes) */
.hero--competitions::after{
content:""; position:absolute; inset:-8% -8% -18% -8%; pointer-events:none; z-index:0;
background:
radial-gradient(60% 40% at var(--sx,50%) var(--sy,0%), rgba(176,184,196,.10), rgba(176,184,196,0) 60%),
repeating-linear-gradient(to right, rgba(255,255,255,.018) 0 1px, transparent 1px 140px),
repeating-linear-gradient(to bottom, rgba(255,255,255,.012) 0 1px, transparent 1px 120px);
animation: accountsSheen 22s linear infinite;
}
@media (prefers-reduced-motion: reduce){ .hero--competitions::after{ animation: none; } }
/* Improve CTA focus visibility on dark background */
.hero--competitions .btn.ghost:focus-visible,
.hero--competitions .btn.primary:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 12px; }
/* Card polish: elevation, borders, transitions */
.comp-cardbox{ transition: .18s ease border-color, .18s ease box-shadow, .18s ease transform; }
.comp-cardbox:hover{ transform: translateY(-4px); border-color: rgba(0,0,0,.16); box-shadow: 0 16px 36px rgba(0,0,0,.10); }
.comp-title{ letter-spacing:.2px; color:#0b1220; }
.comp-topline{ margin-bottom:8px; }
/* Banner subtle shine */
.comp-banner::after{
content:""; position:absolute; inset:0; pointer-events:none;
background: radial-gradient(400px 120px at 10% 0%, rgba(255,255,255,.08), rgba(255,255,255,0) 60%);
}
/* Pager buttons: better focus and subtle active state */
.icon-btn{ transition: .16s ease background, .16s ease color, .16s ease border-color, .16s ease transform; }
.icon-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.icon-btn:active{ transform: translateY(1px); }
/* Responsive refinements */
@media (max-width: 680px){
.comp-section{ padding: 28px 0 46px; }
.comp-copy{ max-width: 100%; }
.comp-banner{ min-height: 96px; padding:14px; }
}
/* Icon subtle inner shading */
.acc-icon{ box-shadow: inset 0 -6px 12px rgba(0,0,0,.12), 0 12px 30px rgba(160,170,185,.35); }
/* Adjust grid gap slightly for air */
.accounts-grid{ gap:24px; }
@media (max-width: 980px){ .accounts-grid{ grid-template-columns: 1fr; max-width:640px; margin-top: 36px; } }
@media (max-width: 680px){
.hero--accounts{ padding: 56px 0 86px; }
.hero--accounts .cta-buttons{ margin-bottom: 24px; }
.acc-copy{ min-height: 0; }
.accounts-grid{ margin-top: 28px; }
}
/* Accounts note under plan cards */
.hero--accounts .accounts-note{
margin: 14px auto 0;
max-width: 920px;
color: #9fb1d3;
font-size: 12px;
line-height: 1.55;
text-align: center;
padding: 0 12px;
}
@media (max-width: 680px){
.hero--accounts .accounts-note{ margin-top: 12px; font-size: 11px; }
}
/* Demo Practice CTA (Account Types) */
.demo-cta{
background:#ffffff;
color:#0b1220;
padding: 70px 0 90px;
}
.demo-cta .container{ text-align:center; }
.demo-title{ margin:0 0 8px; font-weight:900; letter-spacing:.2px; font-size: clamp(24px, 3.8vw, 40px); }
.demo-sub{ margin:0 auto 20px; max-width: 820px; color:#5a6a87; font-size:14px; }
.demo-btn{ border-radius:12px; padding:12px 20px; }
@media (max-width: 680px){
.demo-cta{ padding: 56px 0 70px; }
}
/* Traders Club Hero (dark) */
.club-hero{
background: #b59626;
color:#fff;
padding: 80px 0 44px;
}
.club-hero .club-inner{
max-width:1200px; margin:0 auto; padding:0 24px;
display:grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items:center;
}
.club-hero .eyebrow{ color: #61521a; font-weight:800; letter-spacing:.2px; font-size:14px; margin-bottom:12px; }
.club-hero h1{ font-weight:900; font-size: clamp(28px, 4.6vw, 56px); line-height:1.02; margin:0 0 14px; }
.club-hero h1 span{ display:block; }
.club-hero .club-sub{ max-width: 560px; color:#c9d3e7; margin: 10px 0 18px; font-size:16px; }
.club-hero .club-actions{ margin: 10px 0 10px; }
.club-hero .btn.club-btn{
background: #61521a; color:#fff; border:1px solid rgba(255,255,255,.15);
padding: 12px 18px; border-radius:10px; font-weight:800; text-decoration:none;
box-shadow: 0 12px 28px rgba(212,175,55,.45);
}
.club-hero .btn.club-btn:hover{ background:#b8922b; }
.club-hero .club-terms{ font-size:12px; color:#9fb1d9; margin-top:12px; }
/* Right visual: blue coin glow built with CSS */
.coin-scene{ position:relative; width:100%; aspect-ratio: 1 / 1; max-width:560px; margin: 0 auto; }
.coin-scene::before{
content:""; position:absolute; inset:0; border-radius:50%;
background: radial-gradient(closest-side, rgba(245,208,97,.9), rgba(212,175,55,.55) 40%, rgba(0,0,0,0) 70%);
filter: blur(18px); opacity:.9;
}
.coin-core{
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
width: 220px; height:220px; border-radius:50%;
background: radial-gradient(circle at 30% 30%, #fff2bf, #f0c14b 60%, #8d6b21 100%);
display:grid; place-items:center; font-weight:900; font-size:64px; letter-spacing:2px;
color:#10203a; box-shadow: 0 30px 80px rgba(212,175,55,.5), inset 0 8px 20px rgba(255,255,255,.6);
}
.coin-rays{ position:absolute; left:50%; top:50%; width:100%; height:100%; transform: translate(-50%,-50%); pointer-events:none; }
.coin-rays img{
position:absolute; left:50%; top:50%; width:160px; height:160px; margin:-80px 0 0 -80px;
object-fit: contain; filter: drop-shadow(0 10px 28px rgba(212,175,55,.35)); opacity:.92;
/* radial layout variables */
--r: 240px; /* radius from center (desktop) */
--a: 0deg; /* angle around the circle */
--s: 1; /* individual scale for variation */
transform: rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a))) scale(var(--s));
animation: floatY 6s ease-in-out infinite;
}
/* evenly distribute five decorative images around the coin */
.coin-rays img:nth-child(1){ --a: 0deg; --s: 1.00; }
.coin-rays img:nth-child(2){ --a: 72deg; --s: 0.94; }
.coin-rays img:nth-child(3){ --a: 144deg; --s: 1.06; }
.coin-rays img:nth-child(4){ --a: 216deg; --s: 0.98; }
.coin-rays img:nth-child(5){ --a: 288deg; --s: 1.02; }
@keyframes floatY{
0%,100%{ transform: rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a))) scale(var(--s)) translateY(0); }
50%{ transform: rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a))) scale(var(--s)) translateY(-6px); }
}
/* Stats bar under hero */
.club-stats{
max-width: 1040px; margin: 34px auto 0; padding: 26px 24px; border-radius: 16px;
background:#eef2f7; color:#0b1220; display:grid; grid-template-columns: 1fr auto 1fr; align-items:center;
box-shadow: 0 20px 60px rgba(0,0,0,.18); border:1px solid rgba(0,0,0,.06);
}
.club-stats .divider{ width:1px; height:70px; background: rgba(0,0,0,.08); }
.club-stat{ text-align:center; }
.club-stat .over{ color:#64748b; font-weight:700; font-size:12px; margin-bottom:6px; }
.club-stat .value{ font-size: clamp(28px, 5vw, 44px); font-weight:900; color:#1f2937; }
.club-stat .value.blue{ color:#d4af37; }
.club-stat .label{ font-weight:800; margin-top:6px; }
/* Responsive adjustments */
@media (max-width: 980px){
.club-hero .club-inner{ grid-template-columns: 1fr; gap: 30px; }
.coin-core{ width: 180px; height:180px; font-size:48px; }
.coin-rays img{ width:120px; height:120px; margin:-60px 0 0 -60px; --r: 180px; }
.club-stats{ grid-template-columns: 1fr; gap: 14px; }
.club-stats .divider{ display:none; }
}
/* Why Join the Club section */
.club-why{ background:#ffffff; color:#0b1220; padding: 40px 0 70px; }
.club-why .why-inner{ max-width:1200px; margin:0 auto; padding:0 24px; }
.club-why h2{ text-align:center; font-weight:900; font-size: clamp(22px, 3.6vw, 40px); margin: 6px 0 22px; }
.why-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.benefit{
position:relative; overflow:hidden; border-radius:18px; padding: 26px 26px; min-height: 180px;
color:#ffffff; box-shadow: 0 16px 40px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.08);
}
.benefit .benefit-title{ margin:0 0 8px; font-size: clamp(18px, 2.6vw, 24px); font-weight:900; letter-spacing:.2px; }
.benefit .benefit-sub{ margin:0; color:#e1e8ff; max-width: 520px; font-size:14px; }
/* Gradient variants to match reference look */
.benefit.purple{ background: linear-gradient(135deg, #2a154b, #2a154b 20%, #2b1c57 50%, #2b1c57 100%); }
.benefit.blue{ background: linear-gradient(135deg, var(--gold-3), var(--gold-2) 60%, var(--gold) 100%); }
.benefit.indigo{ background: linear-gradient(135deg, #18254a, #1c2b59 55%, #1e2f62 100%); }
.benefit.violet{ background: linear-gradient(135deg, #351b6a, #3c1d76 60%, #442186 100%); }
/* Decorative abstract art block at bottom-right to mimic images */
.benefit .benefit-art{
position:absolute; right:-18px; bottom:-18px; width: 160px; height: 160px; border-radius: 24px;
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,.1) 60%, rgba(255,255,255,0) 70%),
linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.06));
box-shadow: 0 10px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.4);
transform: rotate(18deg);
}
.benefit.blue .benefit-art{ filter: hue-rotate(-20deg) saturate(1.1); }
.benefit.indigo .benefit-art{ filter: hue-rotate(10deg) saturate(1.2); }
.benefit.violet .benefit-art{ filter: hue-rotate(40deg) saturate(1.2); }
/* Rounded card corners like in reference */
.benefit::before{
content:""; position:absolute; inset:10px; border-radius: 14px; pointer-events:none;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
@media (max-width: 900px){
.why-grid{ grid-template-columns: 1fr; }
.benefit{ min-height: 160px; }
}
/* Club Steps (3-up cards) */
.club-steps{ background:#0b1220; color:#e9eef7; padding: 40px 0 90px; }
.club-steps .steps-inner{ max-width:1200px; margin:0 auto; padding:0 24px; }
.club-steps h2{ text-align:center; font-weight:900; font-size: clamp(22px, 3.6vw, 40px); margin: 8px 0 26px; }
.steps-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.step-card{
position:relative; background: radial-gradient(120% 120% at 50% -20%, rgba(88,139,255,.22), rgba(10,24,45,0) 60%), linear-gradient(180deg, #11213d, #0f1d36);
border:1px solid rgba(255,255,255,.06); border-radius: 18px; padding: 32px 24px 26px; text-align:center;
box-shadow: 0 30px 80px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
.step-badge{ display:inline-grid; place-items:center; width:40px; height:40px; margin:-50px auto 8px; border-radius:10px; font-weight:900; background:#2a63ff; color:#fff; box-shadow: 0 10px 30px rgba(42,99,255,.45), inset 0 1px 0 rgba(255,255,255,.6); }
.step-title{ margin: 6px 0 6px; font-size:18px; font-weight:900; }
.step-sub{ margin: 0 auto 18px; max-width: 320px; color:#b9c7dd; font-size:14px; }
/* art areas at bottom of cards */
.step-art{ margin: 14px auto 0; width: 78%; min-height: 86px; border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); position:relative; }
/* Chart mock */
.step-chart{ background: linear-gradient(180deg, rgba(9,20,38,.8), rgba(9,20,38,.6)); }
.step-chart::before{ content:""; position:absolute; inset:10px; border-radius:10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.step-chart .line{ position:absolute; left:8%; right:8%; top:45%; height:2px; background: linear-gradient(90deg, #4a90ff, #87b3ff); border-radius:2px; transform: translateY(-6px); }
.step-chart .line::before{ content:""; position:absolute; left:0; right:0; top:-18px; height:44px; background: conic-gradient(from 190deg at 0 100%, rgba(0,0,0,0), rgba(90,150,255,.2)); filter: blur(8px); }
/* Redeem mock */
.step-redeem{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; padding: 12px; background: linear-gradient(180deg, rgba(14,34,64,.8), rgba(14,34,64,.6)); }
.pill{ display:flex; align-items:center; gap:12px; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:10px 12px; color:#e6f0ff; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.pill .label{ font-weight:900; letter-spacing:.2px; }
.pill .val{ color:#bcd1ff; font-weight:700; margin-left:6px; }
.coin{ width:28px; height:28px; border-radius:50%; background: radial-gradient(circle at 30% 30%, #bcd1ff, #5f86ff 60%, #1f2f55 100%); box-shadow: 0 10px 20px rgba(56,110,255,.35), inset 0 1px 0 rgba(255,255,255,.7); margin-left:auto; position:relative; }
.coin-xm::after{ content:"IM"; position:absolute; inset:0; display:grid; place-items:center; font-weight:900; font-size:10px; color:#10203a; }
.coin.arrow{ background: linear-gradient(180deg, #6ba3ff, #2f6bff); width:26px; height:26px; border-radius:999px; }
.coin.arrow::after{ content:"↓"; position:absolute; inset:0; display:grid; place-items:center; font-weight:900; color:#0b1220; }
.pill.bonus .dollar, .coin.dollar{ background: radial-gradient(circle at 30% 30%, #d6e7ff, #9fbaff 60%, #345 100%); }
.coin.dollar::after{ content:"$"; position:absolute; inset:0; display:grid; place-items:center; font-weight:900; color:#0b1220; }
/* Upgrade mock */
.step-upgrade{ padding: 16px 14px; background: linear-gradient(180deg, rgba(14,34,64,.8), rgba(14,34,64,.55)); }
.step-upgrade .bar-top{ display:inline-block; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); padding:8px 12px; border-radius:10px; font-weight:800; color:#d3e2ff; font-size:13px; margin-bottom:12px; }
.step-upgrade .bar{ display:flex; align-items:center; gap:10px; }
.gem{ width:28px; height:28px; border-radius:8px; background: linear-gradient(135deg, #7ad0ff, #2b8fff); box-shadow: 0 10px 20px rgba(43,143,255,.45); position:relative; }
.gem.right{ background: linear-gradient(135deg, #ff8ae0, #b04dff); box-shadow: 0 10px 20px rgba(176,77,255,.45); }
.track{ position:relative; flex:1; height:16px; border-radius:999px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); overflow:hidden; }
.track .fill{ position:absolute; left:0; top:0; bottom:0; width:60%; background: linear-gradient(90deg, #5ea1ff, #88c4ff); }
@media (max-width: 980px){
.steps-grid{ grid-template-columns: 1fr; }
.step-badge{ margin-top:-40px; }
.step-art{ width: 90%; }
}
/* Progress Tracker section */
.club-progress{ background:#000; color:#e9eef7; padding: 40px 0 90px; }
.club-progress .prog-inner{ max-width:1200px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns: 1.05fr 1fr; gap: 26px; align-items:center; }
.club-progress h2{ font-weight:900; font-size: clamp(24px, 4.4vw, 48px); line-height:1.05; margin:0 0 10px; }
.club-progress h2 .break{ display:block; }
.prog-sub{ max-width:520px; color:#b9c7dd; font-size:15px; margin: 8px 0 0; }
/* Right side stacked cards */
.prog-scene{ position:relative; height: 360px; max-width: 560px; margin: 0 auto; }
.prog-card{ position:absolute; background: linear-gradient(180deg, #0f1d36, #0c1a31); border:1px solid rgba(255,255,255,.06); border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06); }
.prog-card .card-head{ display:flex; align-items:center; justify-content:space-between; padding: 12px 14px; }
.prog-card .logo{ font-weight:900; letter-spacing:.3px; color:#cfe0ff; }
.prog-card .dots{ width:34px; height:10px; border-radius:6px; background: linear-gradient(90deg, rgba(255,255,255,.12) 0 30%, rgba(255,255,255,.06) 30% 60%, rgba(255,255,255,.12) 60% 100%); }
/* Back bars card */
.prog-card.bars{ right: 20px; top: 10px; width: 320px; height: 220px; opacity:.9; }
.bars-wrap{ position:absolute; left:16px; right:16px; bottom:16px; top:58px; display:flex; align-items:flex-end; gap:18px; padding: 0 8px; }
.bar{ flex:1; background: linear-gradient(180deg, #4e7bff, #83a4ff); border-radius:10px; height: 60px; box-shadow: 0 10px 20px rgba(66,120,255,.35); }
.bar.b1{ height: 80%; background: linear-gradient(180deg, #86b3ff, #4e7bff); }
.bar.b2{ height: 55%; }
.bar.b3{ height: 90%; background: linear-gradient(180deg, #a6c5ff, #5f8cff); }
.bar.b4{ height: 40%; background: linear-gradient(180deg, #ff6b6b, #e34141); }
/* Donut card */
.prog-card.donut{ left: 0; right:0; margin: auto; top: 90px; width: 300px; height: 240px; z-index:2; background: linear-gradient(180deg, #111f39, #0e1a30); }
.donut-wrap{ position:absolute; left:0; right:0; bottom:18px; top:58px; display:grid; place-items:center; }
.ring{ width: 160px; height:160px; border-radius:50%; background:
conic-gradient(#4e7bff 0 280deg, #ff4d4d 280deg 300deg, rgba(255,255,255,.1) 300deg 360deg);
-webkit-mask: radial-gradient(circle 60px at 50% 50%, transparent 64px, #000 65px);
mask: radial-gradient(circle 60px at 50% 50%, transparent 64px, #000 65px);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 16px 40px rgba(0,0,0,.45);
}
.center{ position:absolute; display:grid; place-items:center; text-align:center; }
.center .c-top{ color:#a8c5ff; font-weight:800; font-size:12px; letter-spacing:.3px; }
.center .c-val{ color:#dce8ff; font-weight:900; font-size:16px; margin-top:4px; }
/* Floating price pill */
.prog-pill{ position:absolute; right: -10px; bottom: 40px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#e6f0ff; border-radius:12px; padding:10px 14px; display:flex; align-items:center; gap:10px; box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06); z-index:3; }
.pill-coin{ width:26px; height:26px; border-radius:50%; background: radial-gradient(circle at 30% 30%, #bcd1ff, #5f86ff 60%, #1f2f55 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 20px rgba(56,110,255,.35); position:relative; }
.pill-coin::after{ content:"IM"; position:absolute; inset:0; display:grid; place-items:center; font-weight:900; font-size:10px; color:#10203a; }
.pill-text{ font-weight:800; letter-spacing:.2px; }
@media (max-width: 980px){
.club-progress .prog-inner{ grid-template-columns: 1fr; }
.prog-scene{ height: 320px; }
.prog-card.bars{ left: 0; right: 60px; margin:auto; }
.prog-card.donut{ top: 100px; }
.prog-pill{ right: 10px; bottom: 20px; }
}
/* Traders Club - Final Join CTA */
.club-join{ background:#ffffff; color:#0b1220; padding: 70px 0 120px; }
.club-join .join-inner{ max-width: 900px; margin: 0 auto; padding: 0 24px; text-align: center; }
.club-join h2{ margin:0 0 16px; font-weight:900; letter-spacing:.2px; font-size: clamp(26px, 4.4vw, 48px); }
.club-join .join-btn{
display:inline-block; margin-top:8px; padding:12px 18px; border-radius:10px; font-weight:800; text-decoration:none;
background:#2a63ff; color:#fff; border:1px solid rgba(0,0,0,.06);
box-shadow: 0 12px 28px rgba(42,99,255,.35);
}
.club-join .join-btn:hover{ background:#234fd6; }
@media (max-width: 680px){
.club-join{ padding: 56px 0 90px; }
}
/* =============================
Refer a Friend - Hero Styles
============================= */
.raf-hero{ padding: clamp(36px,6vw,80px) 20px; max-width:1200px; margin:0 auto; }
.raf-inner{ display:grid; grid-template-columns: 1.05fr .95fr; align-items:center; gap: clamp(20px,5vw,60px); }
/* Left copy */
.raf-left .eyebrow{ color:#1d4ed8; font-weight:800; letter-spacing:.2px; font-size:14px; margin-bottom:10px; }
.raf-title{ font-size: clamp(28px, 4.6vw, 52px); line-height:1.06; margin:0 0 14px; font-weight:900; letter-spacing:-.4px; }
.raf-title span{ display:block; }
.raf-sub{ color:#475569; max-width:560px; margin: 6px 0 18px; font-size:16px; line-height:1.6; }
.raf-actions .raf-btn{ padding:12px 18px; border-radius:10px; font-weight:800; font-size:14px; text-decoration:none; }
.raf-terms{ color:#64748b; font-size:12px; margin-top:14px; }
/* Right collage */
.raf-right{ position:relative; }
.raf-scene{ position:relative; width:100%; aspect-ratio: 1.6 / 1; min-height:340px; }
/* Main blue blob behind primary avatar */
.raf-scene .blob.big{ position:absolute; right:4%; top:18%; width:46%; aspect-ratio:1/1; border-radius:50%; background:#3b82f6; filter: saturate(1.1); }
/* Avatar shells */
.raf-scene .avatar{ position:absolute; border-radius:50%; background:#e5e7eb; box-shadow: 0 12px 30px rgba(0,0,0,.12); overflow:hidden; }
.raf-scene .avatar .cutout{ position:absolute; inset:0; background: radial-gradient(120% 120% at 70% 20%, #f8fafc 0, #e5e7eb 38%, #d1d5db 70%); mix-blend-mode:multiply; }
/* Primary large avatar on top of the blue blob */
.raf-scene .avatar.main{ right:10%; top:8%; width:46%; aspect-ratio:1/1; border:10px solid #fff; }
/* Top-left smaller avatar with green circle */
.raf-scene .avatar.top{ left:16%; top:8%; width:28%; aspect-ratio:1/1; border:10px solid #fff; }
.raf-scene .avatar.top::before{ content:""; position:absolute; inset:-14%; background:#10b981; border-radius:50%; z-index:-1; }
/* Bottom-left avatar with red circle */
.raf-scene .avatar.bottom{ left:28%; bottom:0%; width:28%; aspect-ratio:1/1; border:10px solid #fff; }
.raf-scene .avatar.bottom::before{ content:""; position:absolute; inset:-14%; background:#ef4444; border-radius:50%; z-index:-1; }
/* Money bubbles */
.dot-bubble{ position:absolute; background:#fff; color:#0b1220; border:1px solid rgba(0,0,0,.08); box-shadow:0 8px 20px rgba(0,0,0,.08); padding:6px 10px; font-weight:800; font-size:12px; border-radius:999px; }
.dot-bubble.top{ left:46%; top:22%; }
.dot-bubble.bottom{ left:50%; bottom:16%; }
/* Connector lines */
.raf-scene svg.links{ position:absolute; inset:0; pointer-events:none; }
.raf-scene svg.links path{ fill:none; stroke:#9ca3af; stroke-width:2; }
/* Responsive */
@media (max-width: 980px){
.raf-inner{ grid-template-columns: 1fr; }
.raf-right{ order:-1; }
.raf-hero{ padding-top: 24px; }
.raf-title{ text-wrap: balance; }
.raf-scene{ aspect-ratio: 16/12; min-height:280px; }
}
/* =============================
Refer a Friend - Stats Band
============================= */
.raf-stats{ max-width:1200px; margin: clamp(24px,4vw,40px) auto; padding: 0 20px; }
.raf-stats .stats-wrap{
background:#eef2f7; border:1px solid rgba(0,0,0,.06); border-radius:18px;
padding: clamp(16px,3.6vw,30px);
display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(10px,2.4vw,26px);
align-items:center; text-align:center;
}
.raf-stats .stat .over{ color:#6b7280; font-size:12px; font-weight:700; text-transform:none; margin-bottom:6px; }
.raf-stats .stat .val{ font-weight:900; font-size: clamp(26px,4.5vw,40px); letter-spacing:.2px; color:#0b1220; }
.raf-stats .stat .val.blue{ color:var(--gold-2); }
.raf-stats .stat .label{ color:#334155; font-weight:700; margin-top:6px; }
@media (max-width: 780px){
.raf-stats .stats-wrap{ grid-template-columns: 1fr; gap:14px; }
.raf-stats .stat{ padding: 6px 0; }
}
/* =============================
Refer a Friend - Steps
============================= */
.raf-steps{ padding: clamp(36px,6vw,70px) 20px; max-width:1200px; margin: 0 auto; text-align:center; }
.raf-steps .steps-inner{ max-width: 980px; margin: 0 auto; }
.raf-steps h2{ margin:0; font-size: clamp(26px, 4.2vw, 42px); font-weight:900; letter-spacing:.2px; }
.raf-steps .steps-sub{ color:#6b7280; margin: 10px 0 26px; }
.raf-steps .steps-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px,3vw,26px); align-items:start; }
.raf-steps .step{ text-align:center; position:relative; padding-top: 24px; }
.raf-steps .step .num{ font-size: clamp(54px,8vw,84px); font-weight:900; color:#1d4ed8; line-height:1; filter: drop-shadow(0 10px 14px rgba(37,99,235,.15)); }
.raf-steps .step h3{ margin:8px 0 6px; font-weight:800; }
.raf-steps .step p{ color:#6b7280; margin:0; font-size:14px; }
.raf-steps .steps-cta{ margin-top: 28px; }
.raf-steps .raf-btn{ padding:12px 18px; border-radius:10px; font-weight:800; }
.raf-steps .raf-terms.center{ margin-top:10px; color:#6b7280; font-size:12px; }
@media (max-width: 900px){
.raf-steps .steps-grid{ grid-template-columns: 1fr; gap: 18px; }
.raf-steps .step{ padding-top:4px; }
}
/* =============================
Refer a Friend - Why Trade With Us
============================= */
.raf-whytrade{ background: radial-gradient(120% 120% at 50% 0%, #0f182b 0%, #0b1220 60%); color:#e9eef7; padding: clamp(44px,6vw,88px) 20px; }
.raf-whytrade .wt-inner{ max-width: 1200px; margin: 0 auto; text-align: center; }
.raf-whytrade h2{ margin:0 0 6px; font-size: clamp(26px,4.4vw,44px); font-weight:900; letter-spacing:.2px; }
.raf-whytrade .wt-sub{ color:#9aa6bd; margin: 0 0 22px; }
.raf-whytrade .wt-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px,2.6vw,24px); margin-top: clamp(14px,2.4vw,22px); text-align:left; }
.raf-whytrade .wt-card{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding: 22px; position:relative; }
.raf-whytrade .wt-card:hover{ border-color: rgba(212,175,55,.45); box-shadow: 0 12px 30px rgba(2,6,23,.45), inset 0 0 0 1px rgba(212,175,55,.18); }
.raf-whytrade .wt-card .ico{ width:56px; height:56px; display:grid; place-items:center; border-radius:50%; color:var(--gold); background: radial-gradient(100% 100% at 50% 30%, rgba(212,175,55,.22), rgba(2,6,23,.0)); border:1px solid rgba(212,175,55,.35); box-shadow: inset 0 0 14px rgba(212,175,55,.25); font-size:22px; }
.raf-whytrade .wt-card h3{ margin: 14px 0 6px; color:#e9eef7; font-size:16px; font-weight:800; }
.raf-whytrade .wt-card p{ margin:0; color:#9aa6bd; font-size:14px; line-height:1.55; }
.raf-whytrade .wt-cta{ margin-top: clamp(20px,4vw,28px); }
.raf-whytrade .wt-btn{ background:#2563eb; color:#fff; border-radius:10px; padding:12px 18px; font-weight:800; text-decoration:none; border:1px solid rgba(255,255,255,.06); box-shadow: 0 12px 28px rgba(37,99,235,.35); }
.raf-whytrade .wt-btn:hover{ background:#1d4ed8; }
@media (max-width: 1000px){
.raf-whytrade .wt-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px){
.raf-whytrade .wt-grid{ grid-template-columns: 1fr; }
}
/* =============================
Refer a Friend - Help CTA
============================= */
.raf-help{ max-width:1200px; margin: 0 auto; padding: 0 20px; }
.raf-help .help-inner{ margin: clamp(24px,5vw,50px) 0 clamp(36px,6vw,70px); }
.raf-help .help-box{
background:#0f182b; color:#e9eef7; text-align:center;
border:1px solid rgba(255,255,255,.06);
border-radius:22px;
padding: clamp(28px,5.5vw,62px) clamp(20px,5vw,48px);
box-shadow: 0 16px 40px rgba(2,6,23,.35);
}
.raf-help h2{ margin:0 0 16px; font-weight:900; letter-spacing:.2px; font-size: clamp(22px, 3.8vw, 34px); }
.raf-help .help-btn{
display:inline-block; padding:10px 16px; border-radius:10px; text-decoration:none; font-weight:800; font-size:14px;
background:#ffffff; color:#0b1220; border:1px solid rgba(0,0,0,.08);
box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.raf-help .help-btn:hover{ background:#f5f7fb; }
.raf-help .help-btn:focus{ outline:2px solid #93c5fd; outline-offset:2px; }
/* Web Trading hero (two-column promo with phone mockup) */
.wt-hero{ background: #f3f7fd; padding: 32px 0 60px; }
.wt-panel{
background: #f5f8fe;
border: 1px solid rgba(0,0,0,.06);
border-radius: 22px;
box-shadow: 0 16px 40px rgba(0,0,0,.06);
padding: 28px;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 18px;
align-items: center;
}
.wt-left{ padding: 14px 10px 14px 6px; }
.wt-right{ display:flex; align-items:center; justify-content:center; }
.wt-title{ font-size: clamp(28px, 3.8vw, 44px); line-height:1.06; font-weight: 900; letter-spacing:.2px; margin: 6px 0 6px; }
.wt-title span{ display:block; }
.wt-kicker{ font-weight: 800; color:#3e587c; margin: 6px 0 10px; }
.wt-sub{ color:#4b5563; max-width: 700px; }
.wt-cta-row{ display:flex; gap:18px; align-items:flex-start; margin:16px 0 10px; }
.wt-qr img{ width:120px; height:120px; border-radius: 10px; border:1px solid rgba(0,0,0,.1); display:block; background:#fff; }
.wt-stores{ display:flex; flex-direction:column; gap:8px; }
.wt-store-title{ font-weight:800; }
.wt-store-sub{ color:#6b7280; font-size: 13px; }
.wt-store-buttons{ display:flex; gap:10px; flex-wrap:wrap; }
.store-btn{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; border:1px solid rgba(0,0,0,.12); background:#fff; color:#111827; text-decoration:none; box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.store-btn i{ font-size:24px; }
.store-btn .sb-text{ display:flex; flex-direction:column; line-height:1.1; }
.store-btn .sb-text span{ font-size:10px; color:#6b7280; }
.store-btn .sb-text strong{ font-size:14px; }
.wt-ratings{ display:flex; gap:16px; align-items:center; color:#6b7280; font-size:13px; }
.rating .stars{ color:#f59e0b; letter-spacing:1px; margin-right:6px; }
.wt-start{ margin-top:6px; }
.phone-mock{ max-width: 100%; height:auto; filter: drop-shadow(0 18px 50px rgba(0,0,0,.18)); }
@media (max-width: 980px){
.wt-panel{ grid-template-columns: 1fr; padding: 22px; }
.wt-right{ order: -1; }
.wt-left{ padding-right:0; }
}
/* Web Trading: Why the XM App (features grid) */
.wt-features{ background:#ffffff; padding: 26px 0 70px; }
.wtf-kicker{ text-align:center; color:#567; font-weight:800; font-size:13px; margin: 8px 0; }
.wtf-title{ text-align:center; font-size: clamp(26px, 4vw, 38px); font-weight:900; margin: 0 0 22px; letter-spacing:.2px; }
.wtf-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; max-width: 1100px; margin: 0 auto; }
.wtf-card{
background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:18px; display:flex; gap:12px; align-items:flex-start;
box-shadow: 0 10px 28px rgba(0,0,0,.05);
}
.wtf-ico{ width:34px; height:34px; border-radius:9px; background:#111827; color:#fff; display:grid; place-items:center; flex:0 0 34px; }
.wtf-ico .bi{ font-size:18px; line-height:1; }
.wtf-h{ font-size:14px; font-weight:700; color:#0b1220; margin: 4px 0 0; }
.wtf-link{ color:#1d4ed8; text-decoration:none; border-bottom:1px solid rgba(29,78,216,.35); }
.wtf-link:hover{ color:#153fa6; border-bottom-color: rgba(21,63,166,.6); }
@media (max-width: 960px){
.wtf-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
.wtf-grid{ grid-template-columns: 1fr; }
}
/* Web Trading: Dark download CTA */
.wt-start{ padding: 8px 0 16px; }
.wt-start .container{ max-width: 1100px; }
.wt-start-card{
background:#0f182b; color:#e9eef7; text-align:center;
border:1px solid rgba(255,255,255,.06);
border-radius:22px;
padding: clamp(28px,5.5vw,62px) clamp(20px,5vw,48px);
box-shadow: 0 16px 40px rgba(2,6,23,.35);
overflow:hidden;
}
.wts-title{ font-weight:900; letter-spacing:.2px; font-size: clamp(24px, 4.6vw, 44px); margin:0 0 8px; }
.wts-sub{ color:#aab3c3; max-width:740px; margin: 0 auto 18px; font-size: clamp(13px, 2vw, 16px); }
.wts-qr img{ width:120px; height:120px; border-radius:8px; background:#fff; display:block; margin: 12px auto; }
.wts-scan{ margin-top: 10px; font-weight:800; }
.wts-os{ color:#aab3c3; font-size:13px; margin-top:2px; }
.wt-start .wt-store-buttons{ display:flex; justify-content:center; gap:10px; margin: 12px 0 6px; flex-wrap:wrap; }
.wt-start .store-btn{ background:#fff; color:#111827; border:1px solid rgba(0,0,0,.14); }
.wts-ratings{ justify-content:center; color:#c7d0df; margin: 6px 0 6px; }
.wts-ratings .stars{ color:#f59e0b; }
.wts-phone img{ display:block; width: min(780px, 96%); margin: 26px auto -34px; filter: drop-shadow(0 18px 50px rgba(0,0,0,.45)); }
@media (max-width: 600px){
.wts-phone img{ width: 100%; margin-bottom: -22px; }
}
/* Privacy Policy page styles */
.policy-hero{
position:relative;
background: linear-gradient(180deg, #0b1220 0%, #10192e 60%, #0b1220 100%);
color:#e9eef7;
padding: 86px 0 42px;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.policy-hero .eyebrow{ color:#9fb1d3; font-size:12px; margin: 6px 0 8px; opacity:.95; }
.policy-hero .hero-title{ margin:0 0 8px; font-size: clamp(28px, 4.6vw, 46px); font-weight:900; color:#ffffff; }
.policy-hero .hero-sub{ margin:0 auto; max-width:820px; color:#cfe0ff; font-size:14px; }
.policy{ padding: 28px 0 80px; background:#f7f9fc; }
.policy-grid{ display:grid; grid-template-columns: 260px minmax(0,1fr); gap:22px; align-items:start; }
.policy-toc{ position:sticky; top:84px; align-self:start; background:#ffffff; border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:14px; box-shadow:0 10px 24px rgba(0,0,0,.06); }
.policy-toc .toc-title{ font-weight:800; font-size:12px; letter-spacing:.3px; color:#334155; margin-bottom:8px; text-transform:uppercase; }
.policy-toc ol{ list-style: decimal; padding-left: 18px; margin:0; }
.policy-toc a{ color:#0b1220; text-decoration:none; font-weight:600; font-size:13px; }
.policy-toc a:hover{ text-decoration:underline; }
.policy-body{ display:flex; flex-direction:column; gap:14px; }
.card{ background:#ffffff; border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:18px; box-shadow: 0 10px 24px rgba(0,0,0,.06); }
.card h2{ margin:0 0 8px; font-size:20px; font-weight:900; color:#0b1220; }
.card p, .card li, .policy-intro p{ color:#475569; font-size:14px; line-height:1.6; }
.policy-intro{ border-left:4px solid var(--gold); }
.policy-note{ padding: 10px 14px; border-left:4px solid rgba(11,18,32,.1); }
@media (max-width: 980px){
.policy-grid{ grid-template-columns: 1fr; }
.policy-toc{ position:relative; top:auto; }
}
/* =====================
Privacy Policy redesign enhancements (2025-10-03)
===================== */
/* Hero polish: subtle diagonal sheen and improved spacing */
.policy-hero{
padding: 96px 0 56px;
}
.policy-hero::after{
content:""; position:absolute; inset:0; pointer-events:none;
background:
radial-gradient(800px 240px at 20% 0%, rgba(255,255,255,.08), rgba(255,255,255,0) 60%),
radial-gradient(800px 240px at 80% 0%, rgba(212,175,55,.10), rgba(212,175,55,0) 60%);
}
.policy-hero .hero-title{ letter-spacing:.2px; }
.policy-hero .hero-sub{ font-size: 15px; color:#d6e3ff; }
/* Layout: give the grid a comfortable max width and breathing room */
.policy{ padding-top: 36px; }
.policy .container{ max-width: 1200px; }
.policy-grid{ align-items:start; gap:26px; }
/* TOC: card polish + active state */
.policy-toc{ position: sticky; top: 90px; border-radius:16px; padding:16px; }
.policy-toc ol{ display:flex; flex-direction:column; gap:8px; }
.policy-toc li{ margin-left: 2px; }
.policy-toc a{
display:block; padding:8px 10px; border-radius:10px;
color:#0b1220; text-decoration:none; font-weight:700; font-size:13px;
border:1px solid rgba(0,0,0,.06);
background: linear-gradient(180deg, #ffffff, #f9fbff);
}
.policy-toc a:hover{ border-color: rgba(212,175,55,.45); box-shadow: 0 6px 16px rgba(212,175,55,.12); }
.policy-toc a.is-active{
border-color: rgba(212,175,55,.7);
box-shadow: 0 8px 22px rgba(212,175,55,.22);
background: linear-gradient(180deg, #fff8dc, #fff);
}
/* Cards: elevate, add accent top border and better spacing */
.policy-body{ gap:18px; }
.policy-body .card{
position:relative;
border-radius:16px;
border:1px solid rgba(0,0,0,.08);
box-shadow: 0 16px 44px rgba(0,0,0,.08);
}
.policy-body .card::before{
content:""; position:absolute; left:0; right:0; top:0; height:4px; border-top-left-radius:16px; border-top-right-radius:16px;
background: linear-gradient(90deg, rgba(212,175,55,1), rgba(212,175,55,.25));
}
.policy-body .card h2{ font-size: 22px; margin-top: 2px; }
.policy-body .card p,
.policy-body .card li{ font-size:15px; line-height:1.7; }
.policy-body .card ul{ padding-left: 18px; margin: 10px 0; }
/* Intro and note blocks */
.policy-intro{ background: linear-gradient(180deg, #ffffff, #fbfcff); border-left-width: 0; }
.policy-note{ background:#ffffff; border-radius: 12px; border:1px dashed rgba(0,0,0,.12); }
/* Back to top floating button */
.back-to-top{
position: fixed; right: 22px; bottom: 22px; z-index: 20;
width: 46px; height: 46px; border-radius: 50%;
border: 1px solid rgba(0,0,0,.12);
background: #ffffff;
color: #0b1220; font-weight: 900;
box-shadow: 0 12px 30px rgba(0,0,0,.16);
display: grid; place-items: center;
opacity: 0; transform: translateY(10px); pointer-events: none;
transition: .2s ease opacity, .2s ease transform, .2s ease box-shadow;
}
.back-to-top:hover{ box-shadow: 0 16px 36px rgba(0,0,0,.22); }
.back-to-top.show{ opacity: 1; transform: translateY(0); pointer-events: auto; }
/* Accessibility: focus rings */
.policy-toc a:focus-visible,
.back-to-top:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }
/* Responsive refinements */
@media (max-width: 980px){
.policy-toc{ border-radius: 14px; }
}
@media (max-width: 740px){
.policy-hero{ padding: 72px 0 42px; }
.policy-hero .hero-title{ font-size: clamp(26px, 7vw, 40px); }
.policy-hero .hero-sub{ font-size: 14px; }
.policy-body .card h2{ font-size: 20px; }
.policy-body .card p, .policy-body .card li{ font-size:14px; }
}
/* Crypto slider: official logo badge styles (2025-10-03) */
.badge--logo{
width: 36px;
height: 36px;
border-radius: 10px;
display: grid;
place-items: center;
background: #ffffff;
border: 1px solid rgba(0,0,0,.12);
box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.badge--logo .c-logo{
width: 22px;
height: 22px;
display: block;
object-fit: contain;
}
@media (max-width: 520px){
.badge--logo{ width: 32px; height: 32px; }
.badge--logo .c-logo{ width: 20px; height: 20px; }
}
/* ===== Auth Fullscreen Experience ===== */
.auth-screen{
position:fixed; inset:0; z-index: 9999;
display:flex; align-items:center; justify-content:center;
background: #070b14; /* base color for very dark */
background-image: var(--auth-bg, none);
background-size: cover; background-position: center; background-attachment: fixed;
}
.auth-scrim{
position:absolute; inset:0;
background: radial-gradient(60% 60% at 50% 30%, rgba(9,13,24,.72) 0%, rgba(7,11,20,.92) 60%, rgba(5,8,16,.96) 100%);
-webkit-backdrop-filter: blur(12px) saturate(1.1);
backdrop-filter: blur(12px) saturate(1.1);
}
.auth-card{
position:relative; z-index:1;
width: min(92vw, 560px);
padding: 28px;
border-radius: 20px;
background: rgba(16,25,46,.6);
box-shadow: 0 20px 60px rgba(0,0,0,.55);
border: 1px solid rgba(255,255,255,.08);
color: #e7eefc;
}
@media (min-width: 560px){ .auth-card{ padding: 34px; border-radius: 24px; } }
.auth-card__title{ margin:6px 0 4px; font-size: clamp(22px, 3.2vw, 28px); font-weight: 800; letter-spacing:.2px; color:#fff; }
.auth-card__sub{ margin:0 0 18px; color:#c7d3ea; font-size:14px; }
.auth-form{ display:block; }
.a-field{ margin: 14px 0 14px; }
.a-label{ display:block; font-weight:700; font-size:13px; color:#dfe8fb; margin-bottom:8px; }
.a-input{
width:100%; padding: 12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.14);
background: rgba(6,10,20,.55); color:#f4f7ff;
outline:none; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.a-input::placeholder{ color:#9fb1d3; }
.a-input:focus{ border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,.18); background: rgba(8,12,22,.7); }
.a-input.is-invalid{ border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.2); }
.a-msg{ display:block; min-height:16px; font-size:12px; color:#fda4af; margin-top:6px; }
.a-pass{ position:relative; }
.a-pass .a-input{ padding-right: 42px; }
.a-toggle{
position:absolute; right:8px; top:50%; transform: translateY(-50%);
border:0; background: transparent; color:#c9d5f0; cursor:pointer; font-size:18px; line-height:1;
}
.a-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin: 6px 0 14px; }
.a-check{ display:inline-flex; align-items:center; gap:8px; color:#c8d3e8; font-size:14px; }
.a-link{ color: var(--gold-light); text-decoration:none; font-weight:700; }
.a-link:hover{ text-decoration: underline; }
.a-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 12px 16px; border-radius: 12px; font-weight:800; cursor:pointer; border:1px solid transparent; }
.a-btn--primary{ width:100%; background: linear-gradient(180deg, var(--gold), var(--gold-2)); color:#0b1220; box-shadow: 0 10px 24px rgba(212,175,55,.25); }
.a-btn--primary:hover{ filter: brightness(1.03); }
.a-btn--social{ width:100%; background: rgba(255,255,255,.9); color:#0b1220; border:1px solid rgba(0,0,0,.08); }
.a-btn--social svg{ width:18px; height:18px; display:block; }
.a-socials{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.a-or{ display:flex; align-items:center; gap:10px; color:#a9b8d6; font-size:12px; margin: 14px 0; }
.a-or::before, .a-or::after{ content:""; height:1px; flex:1; background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.18), rgba(255,255,255,.06)); }
.a-swap{ color:#c8d3e8; font-size:14px; margin-top:10px; }
/* tiny loading state */
.auth-form.is-loading .a-btn--primary{ opacity:.75; pointer-events:none; }
/* ===== Awards (after Support section) ===== */
.awards{ background:#ffffff; color:#0b1220; padding:48px 0; border-top:1px solid rgba(0,0,0,.06); border-bottom:1px solid rgba(0,0,0,.06); }
.awards .container{ max-width:1200px; width:80%; margin:0 auto; }
.awards-title{ text-align:center; font-weight:900; letter-spacing:.2px; font-size: clamp(22px, 3.2vw, 30px); margin:0 0 8px; }
.awards-sub{ text-align:center; color:#50618a; max-width:760px; margin:0 auto 24px; font-size:14px; }
.awards-strip{ display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap; }
.award{ flex:0 1 auto; background: linear-gradient(180deg, #f8fbff, #eef3ff); border:1px solid #e6ecff; border-radius:14px; padding:16px 18px; box-shadow: 0 8px 22px rgba(13,30,70,.06); }
.award img{ display:block; height:140px; width:auto; max-width:100%; object-fit:contain; }
@media (max-width: 980px){ .award img{ height:120px; } }
@media (max-width: 680px){ .awards{ padding:36px 0; } .awards-strip{ gap:16px; } .award{ padding:12px 14px; } .award img{ height:100px; } }
/* ===== Client Sentiment (within Market Highlights) ===== */
.client-sentiment{
margin-top: 18px;
background: linear-gradient(180deg, var(--bg), var(--bg-2));
color: var(--text);
border-radius: 14px;
border:1px solid rgba(255,255,255,.10);
box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.cs-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border-bottom: 1px solid rgba(255,255,255,.10); border-top-left-radius:14px; border-top-right-radius:14px; }
.cs-head h3{ margin:0; font-size: 20px; font-weight: 900; letter-spacing: .2px; }
.cs-update{ color:#9fb1d3; font-size: 12px; }
.cs-table{ display:block; }
.cs-row{ display:grid; grid-template-columns: 160px 120px 86px 1fr 70px; align-items:center; gap:10px; padding:14px 18px; }
.cs-row + .cs-row{ border-top:1px solid rgba(255,255,255,.06); }
.cs-row.cs-header{ color:#9fb1d3; font-weight:700; font-size:12px; background: rgba(255,255,255,.02); position:sticky; top:0; z-index:1; }
.cs-cell{ min-width:0; }
.cs-link{ color:#1a4cff; font-weight:800; text-decoration:none; }
.cs-link:hover{ text-decoration:underline; }
.cs-signal{ font-weight:800; }
.cs-signal.bullish{ color:#10b981; }
.cs-signal.bearish{ color:#dc2626; }
.cs-signal.mixed{ color:#334155; }
.cs-chip{ display:inline-block; padding:4px 8px; border-radius:8px; font-size:12px; font-weight:800; color:#fff; }
.cs-chip--long{ background:#16a34a; }
.cs-bar{ display:flex; align-items:center; height:10px; background: rgba(255,255,255,.08); border-radius:999px; padding:0; }
.bar{ display:block; height:100%; border-radius:999px; }
.bar--long{ background:#16a34a; margin-right:8px; }
.bar--short{ background:#dc2626; margin-left:8px; }
/* widths are set inline via JS; ensure flex-basis respects width */
.cs-bar .bar{ flex: 0 0 auto; }
.cs-short-label{ text-align:right; color:#dc2626; font-weight:800; }
.cs-long-label{ color:#16a34a; font-weight:800; }
.cs-note{ margin: 4px 18px 16px; color:#9fb1d3; font-size:12px; }
@media (max-width: 900px){
.cs-row{ grid-template-columns: 120px 100px 70px 1fr 60px; }
}
@media (max-width: 640px){
.cs-row{ grid-template-columns: 1fr; gap:8px; padding:12px 14px; }
.cs-row.cs-header{ display:none; }
.cs-bars{ order: 4; }
.cs-short-label{ order: 5; text-align:left; }
}
/* ===== Market Highlights Candlestick Chart ===== */
.mh-chart{ margin-top:18px; background: linear-gradient(180deg, var(--bg), var(--bg-2)); color: var(--text); border-radius:14px; border:1px solid rgba(255,255,255,.10); box-shadow: 0 16px 40px rgba(0,0,0,.45); }
.mh-chart__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border-bottom:1px solid rgba(255,255,255,.10); border-top-left-radius:14px; border-top-right-radius:14px; }
.mh-chart__head h3{ margin:0; font-size:18px; font-weight:900; letter-spacing:.2px; }
.mh-chart__meta{ display:flex; align-items:center; gap:8px; }
.mh-chart__symbol, .mh-chart__tf{ padding:6px 8px; border-radius:8px; border:1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); color:#cfe0ff; font-weight:700; font-size:12px; }
.mh-chart__wrap{ position:relative; padding:8px 8px 12px; }
.mh-chart__wrap canvas{ width:100%; height:320px; display:block; }
.mh-chart__wrap .mh-apex{ width:100%; height:320px; }
@media (max-width: 640px){
.mh-chart__wrap canvas{ height:260px; }
.mh-chart__wrap .mh-apex{ height:260px; }
}
.mh-chart__tooltip{ position:absolute; pointer-events:none; background:#0b1220; color:#fff; font-size:12px; padding:6px 8px; border-radius:8px; border:1px solid rgba(255,255,255,.12); box-shadow:0 6px 16px rgba(0,0,0,.35); transform: translate(-50%, -120%); white-space:nowrap; z-index: 3; }
/* ===== Deposits & Withdrawals page (scoped) ===== */
.hero--payments{
position: relative;
background: linear-gradient(180deg, #fdf8e7, #fff);
padding: 80px 0 40px;
}
.hero--payments .hero-inner{ display:flex; gap:40px; align-items:center; }
.hero--payments .hero-copy{ flex:1 1 60%; }
.hero--payments h1{ font-size: clamp(28px, 5vw, 44px); margin:0 0 12px; line-height:1.1; }
.hero--payments .lead{ font-size: 18px; color:#334155; max-width: 60ch; }
.hero--payments .cta{ margin-top:18px; display:flex; gap:12px; }
.hero--payments .hero-bullets{ display:flex; flex-wrap:wrap; gap:12px 18px; padding:0; margin:18px 0 0; list-style:none; color:#475569; }
.hero--payments .hero-bullets li{ position:relative; padding-left:22px; }
.hero--payments .hero-bullets li::before{ content:"✓"; color:#16a34a; position:absolute; left:0; top:-1px; }
.hero--payments .hero-art{ flex:1 1 40%; display:flex; justify-content:center; }
.hero--payments .glass-card{
background: rgba(255,255,255,.7);
border:1px solid rgba(0,0,0,.06);
box-shadow: 0 10px 30px rgba(0,0,0,.08);
border-radius:16px; padding:20px; min-width:260px;
backdrop-filter: blur(6px);
}
.hero--payments .g-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px dashed rgba(0,0,0,.08); }
.hero--payments .g-row:last-of-type{ border-bottom:0; padding-bottom:0; }
.hero--payments .g-label{ color:#64748b; font-size:13px; }
.hero--payments .g-value{ font-weight:700; color:#111827; }
.hero--payments .g-foot{ display:block; margin-top:10px; color:#6b7280; font-size:12px; }
.payments-benefits{ padding: 24px 0 8px; }
.grid-3{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; }
.p-card{ background:#ffffff; border:1px solid rgba(0,0,0,.06); border-radius:14px; padding:18px; box-shadow: 0 6px 14px rgba(0,0,0,.04); }
.p-card h3{ margin:0 0 8px; font-size:18px; }
.p-card p{ margin:0; color:#475569; }
.payments-methods{ padding: 8px 0 8px; }
.payments-methods h2{ font-size:24px; margin:0 0 10px; }
.methods-list{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:0 0 8px; }
.methods-list li{ background:#0f172a; color:#fff; border:1px solid rgba(255,255,255,.08); border-radius:999px; padding:8px 14px; font-size:13px; }
.payments-methods .muted{ color:#64748b; font-size:14px; }
.cta--payments{ padding: 40px 0 60px; background: linear-gradient(180deg, #fff, #f9fafb); text-align:center; }
.cta--payments h2{ font-size:28px; margin:0 0 8px; }
.cta--payments .lead{ color:#475569; margin:0 0 16px; }
.cta--payments .cta-actions{ display:flex; gap:12px; justify-content:center; }
/* Enhancements */
.methods-icons li{ display:inline-flex; align-items:center; gap:8px; }
.methods-icons svg{ flex:0 0 auto; }
/* Gentle float for hero glass card */
@media (prefers-reduced-motion: no-preference){
.hero--payments .glass-card{ animation: floatY 6s ease-in-out infinite; }
@keyframes floatY{ 0%{ transform: translateY(0);} 50%{ transform: translateY(-6px);} 100%{ transform: translateY(0);} }
}
/* How it works stepper */
.payments-flow{ padding: 12px 0 8px; }
.payments-flow h2{ font-size:24px; margin:0 0 12px; }
.flow-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:20px; }
.flow-col h3{ margin:0 0 10px; font-size:16px; color:#0f172a; }
.flow-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.flow-steps li{ display:grid; grid-template-columns: 28px 1fr; align-items:center; gap:10px; background:#ffffff; border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:8px 12px; box-shadow: 0 4px 10px rgba(0,0,0,.03); }
.flow-steps .step{ width:28px; height:28px; border-radius:50%; background:#0f172a; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; }
.flow-steps .label{ color:#334155; font-weight:600; }
/* Trust bar */
.trustbar{ padding: 8px 0 8px; }
.trustbar-inner{ display:flex; align-items:center; gap:16px; border:1px solid rgba(0,0,0,.06); border-radius:14px; background:#ffffff; padding:10px 14px; box-shadow: 0 6px 14px rgba(0,0,0,.04); }
.trust-label{ font-size:14px; font-weight:800; color:#0f172a; white-space:nowrap; }
.trust-logos{ display:flex; align-items:center; gap:14px; list-style:none; margin:0; padding:0; overflow:auto; }
.trust-logos img{ height:28px; width:auto; filter: grayscale(1) contrast(1) brightness(1.1); opacity:.9; transition: filter .2s ease, opacity .2s ease; }
.trust-logos img:hover{ filter:none; opacity:1; }
@media (max-width: 900px){
.hero--payments .hero-inner{ flex-direction:column; text-align:left; }
.hero--payments .hero-art{ order:-1; }
.grid-3{ grid-template-columns: 1fr; }
.flow-grid{ grid-template-columns: 1fr; }
}
.payments-reading{ padding: 16px 0 24px; }
.payments-reading .container{ max-width: 940px; }
.payments-reading h2{ margin: 22px 0 10px; font-size: 22px; }
.payments-reading h3{ margin: 16px 0 8px; font-size: 18px; }
.payments-reading p{ color:#334155; }
.payments-reading ul{ padding-left: 18px; }
.payments-reading li{ margin: 6px 0; }
.payments-toc{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom: 14px; background:#ffffff; border:1px solid rgba(0,0,0,.06); border-radius: 12px; padding:10px 12px; box-shadow: 0 6px 14px rgba(0,0,0,.04); }
.payments-toc .toc-label{ font-weight: 800; color:#0f172a; margin-right: 4px; font-size: 12px; letter-spacing:.2px; text-transform: uppercase; }
.payments-toc a{ display:inline-block; padding:6px 10px; border-radius:999px; background:#0f172a; color:#fff; text-decoration:none; font-weight:700; font-size:12px; border:1px solid rgba(255,255,255,.12); }
.payments-toc a:hover{ background:#111827; }
.payments-toc a:focus-visible{ outline: 2px solid #0b5cff; outline-offset: 2px; }
/* Subtle callout styling for important notes already wrapped in */
.payments-reading i{ display:block; background:#f5f7fb; color:#334155; border-left:3px solid #0f172a; padding:8px 10px; border-radius:8px; margin: 8px 0; font-style: normal; }
/* Markets Tabs Section */
.markets-tabs{ max-width:1200px; margin: 40px auto; padding: 0 20px; }
.mt-heading{ margin: 0 0 14px; font-size: clamp(18px, 2.8vw, 24px); font-weight: 900; letter-spacing:.4px; color:#0b1220; text-align:center; }
.mt-wrap{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; background: linear-gradient(180deg, #ffffff, #f7f9fc); border:1px solid rgba(0,0,0,.06); border-radius:14px; padding:10px; box-shadow: 0 10px 26px rgba(0,0,0,.06); }
.mt-tab{ appearance:none; border:1px solid transparent; background: transparent; color:#334155; font-weight:800; font-size:14px; padding:10px 14px; border-radius:10px; cursor:pointer; transition: all .18s ease; }
.mt-tab:hover{ color:#0b1220; background: rgba(0,0,0,.04); }
.mt-tab.is-active{ color:#0b1220; background: #ffffff; border-color: rgba(0,0,0,.10); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.mt-panels{ margin-top:14px; }
.mt-panel{ background: #ffffff; border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:16px; box-shadow: 0 16px 40px rgba(0,0,0,.06); }
.mt-panel:not(.is-active){ display:block; /* keep height stability with hidden attribute */ }
.mt-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; }
@media (max-width: 920px){ .mt-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .mt-grid{ grid-template-columns: 1fr; } }
.mt-card{ background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86)); border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:14px; display:flex; align-items:center; justify-content:space-between; gap:8px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.mt-card:hover{ transform: translateY(-2px); border-color: rgba(0,0,0,.12); box-shadow: 0 12px 28px rgba(0,0,0,.08); }
.mt-card .label{ font-weight:900; color:#0b1220; letter-spacing:.3px; }
.mt-card .muted{ color:#64748b; font-weight:700; font-size:12px; }
/* Readability overrides when Markets Tabs are inside the dark Market Highlights section */
.market-highlights .mt-heading{ color: var(--text); }