/* South African English LTR localisation layer. */
:root {
  --southafrica-ink: #071d1b;
  --southafrica-slate: #102e2a;
  --southafrica-ivory: #eef5ef;
  --southafrica-gold: #ffb612;
  --southafrica-green: #007a4d;
  --southafrica-red: #de3831;
  --southafrica-blue: #002395;
  --english: Inter, Arial, sans-serif;
  --english-display: Montserrat, Inter, Arial, sans-serif;
}

html,
body {
  background: var(--southafrica-ink);
}

body {
  direction: ltr;
  color: var(--southafrica-ivory);
  font-family: var(--english);
  background:
    radial-gradient(circle at 9% 14%, rgba(255, 182, 18, .08), transparent 26%),
    radial-gradient(circle at 91% 61%, rgba(0, 122, 77, .11), transparent 30%),
    var(--southafrica-ink);
}

.site-shell { direction: ltr; }
.south-africa-sparkles { position: fixed; z-index: 9; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .26; mix-blend-mode: screen; }

.site-header {
  height: 76px;
  border-bottom-color: rgba(255, 182, 18, .28);
  background: linear-gradient(90deg, rgba(6, 28, 27, .985), rgba(11, 43, 39, .96) 55%, rgba(8, 30, 48, .97));
}

.site-header::after {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--southafrica-green) 18%, var(--southafrica-gold) 48%, var(--southafrica-red) 72%, var(--southafrica-blue) 88%, transparent);
  opacity: .78;
}

.brand { direction: ltr; }
.brand-type { direction: ltr; text-align: left; }
.brand-type strong { font-family: var(--english-display); }
.brand-type small { color: #d5e1db; font-family: var(--english); font-size: 7px; letter-spacing: 1.1px; }
.main-nav { direction: ltr; }
.main-nav a { font-family: var(--terminal-mono); font-size: 11px; }
.nav-actions { direction: ltr; }
.terminal-status { color: #cfe0d5; }
.terminal-status i, .market-online, .terminal-dot, .live-dot, .ticker-item-dot { background: var(--southafrica-green); box-shadow: 0 0 12px rgba(0, 122, 77, .8); }
.language { color: var(--southafrica-ivory); font-family: var(--english); font-size: 11px; }

.download-art {
  display: inline-block;
  width: 168px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  line-height: 1;
  transition: transform .2s ease, filter .2s ease;
}

.download-art-image {
  display: block;
  width: 100%;
  height: auto;
}

.download-art:hover { filter: brightness(1.07) saturate(1.06); transform: translateY(-2px); }
.download-art:focus-visible { outline: 3px solid var(--southafrica-gold); outline-offset: 4px; }
.download-art-nav { width: 168px; }
.download-art-app { width: min(100%, 360px); margin-top: 14px; }
.mobile-download.download-art { direction: ltr; }

.market-strip { border-bottom-color: rgba(255, 182, 18, .2); background: rgba(5, 23, 28, .92); }
.market-strip-inner { direction: ltr; }
.market-cell { border-right-color: rgba(255, 182, 18, .18); text-align: left; }
.market-cell:first-child { padding-left: 0; }
.market-cell span, .market-cell strong, .market-cell em { font-family: var(--english); }
.market-cell span { color: #b9c9c1; }
.market-cell strong { color: var(--southafrica-ivory); }
.market-cell:first-child strong, .market-cell.market-task-reward strong { color: var(--southafrica-gold); }
.market-cell em { color: #9aaea3; }

.hero { min-height: 735px; isolation: isolate; }
.hero::before {
  background-image: linear-gradient(rgba(238, 245, 239, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(238, 245, 239, .04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, .22) 62%, transparent 88%);
  opacity: .68;
}

.hero-backdrop {
  background-image:
    linear-gradient(90deg, rgba(4, 24, 23, .99) 0%, rgba(4, 24, 23, .96) 37%, rgba(4, 24, 23, .74) 62%, rgba(4, 24, 23, .87) 100%),
    linear-gradient(180deg, rgba(0, 122, 77, .08), rgba(0, 35, 57, .34)),
    url('../images/johannesburg-fintech-hero-bg.webp');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.hero-backdrop::after {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 82% 77%, rgba(255, 182, 18, .14), transparent 25%),
    linear-gradient(90deg, transparent 54%, rgba(0, 122, 77, .12) 78%, transparent),
    repeating-conic-gradient(from 18deg at 90% 42%, rgba(238, 245, 239, .05) 0deg 4deg, transparent 4deg 12deg);
  content: '';
  mix-blend-mode: screen;
  opacity: .65;
  pointer-events: none;
}

.hero-grid { direction: ltr; }
.hero-copy { max-width: 560px; text-align: left; }
.eyebrow { color: #c8d7cd; font-family: var(--english); font-size: 10px; letter-spacing: 1.25px; }
.eyebrow > span { background: var(--southafrica-red); }
.terminal-kicker { color: #7bd3aa; font-family: var(--terminal-mono); font-size: 10px; letter-spacing: 1px; }
.terminal-kicker b { padding-left: 8px; border-left: 1px solid rgba(255, 182, 18, .3); color: #c5d1ca; }
.hero-copy h1 { font-family: var(--english-display); font-size: clamp(54px, 5.1vw, 78px); font-weight: 900; line-height: .97; letter-spacing: -3px; }
.hero-copy h1 > span:first-child { color: var(--southafrica-ivory); }
.south-africa-word { display: inline-block; background: linear-gradient(110deg, var(--southafrica-green) 4%, #79c691 35%, var(--southafrica-gold) 56%, #ef6c57 78%, var(--southafrica-blue) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-intro { max-width: 47ch; margin-top: 16px; color: #d4e0d8; font-family: var(--english); font-size: 14px; line-height: 1.8; text-wrap: pretty; }
.hero-intro b { color: var(--southafrica-gold); padding-inline: .12em; }
.reward-block { border-right: 1px solid rgba(238, 245, 239, .16); border-left: 2px solid var(--southafrica-gold); border-radius: 0 11px 11px 0; background: linear-gradient(90deg, rgba(255, 182, 18, .12), rgba(10, 45, 39, .3) 60%, transparent); box-shadow: inset 0 1px rgba(238, 245, 239, .05), 0 16px 36px rgba(0, 0, 0, .16); }
.amount, .amount span, .amount b { direction: ltr; unicode-bidi: isolate; font-family: var(--english-display); }
.amount span { color: var(--southafrica-gold); }
.amount b { color: var(--southafrica-ivory); }
.reward-label { color: #d9e7dc; font-family: var(--english-display); font-size: 10px; letter-spacing: 2px; }
.reward-tags::before { height: 1px; background: linear-gradient(90deg, var(--southafrica-green), var(--southafrica-gold), transparent); opacity: .75; }
.reward-tags li { color: #d2ddd5; font-family: var(--english); font-size: 12px; line-height: 1.65; }
.tag-icon { border-color: rgba(255, 182, 18, .42); color: var(--southafrica-gold); background: rgba(9, 45, 39, .62); transform: none; }
.south-africa-geometry { position: absolute; z-index: 0; width: 260px; height: 260px; border: 1px solid rgba(255, 182, 18, .15); border-radius: 50%; background: repeating-conic-gradient(from 11deg, rgba(238, 245, 239, .055) 0deg 8deg, transparent 8deg 18deg), radial-gradient(circle, transparent 0 30%, rgba(0, 122, 77, .1) 30.5% 31.5%, transparent 32% 48%, rgba(255, 182, 18, .09) 48.5% 49.5%, transparent 50%); opacity: .68; pointer-events: none; }
.south-africa-geometry-hero { top: 85px; left: -130px; }
.hero-visual { direction: ltr; filter: saturate(.88) contrast(.98); }
.hero-visual .coin { opacity: .68; filter: saturate(.75) brightness(.9) drop-shadow(0 10px 18px rgba(0, 0, 0, .22)); }
.south-africa-flag { position: absolute; z-index: 3; top: 9%; right: 2%; width: 39%; opacity: .58; filter: saturate(.75) brightness(.9) drop-shadow(0 9px 18px rgba(0, 0, 0, .28)); }
.terminal-card { left: 2%; right: auto; border-color: rgba(255, 182, 18, .34); background: linear-gradient(145deg, rgba(8, 42, 36, .87), rgba(6, 39, 57, .76)); box-shadow: 0 16px 32px rgba(0, 0, 0, .2); transform: rotate(-4deg); }
.terminal-card-head, .terminal-card-foot { font-family: var(--terminal-mono); letter-spacing: .5px; }
.terminal-card-head b, .terminal-card-foot strong { color: var(--southafrica-gold); }

.reward-pulse, .exchange-board { background: linear-gradient(105deg, rgba(0, 122, 77, .11), rgba(7, 28, 29, .98) 43%, rgba(0, 35, 149, .09)); border-color: rgba(255, 182, 18, .3); }
.reward-pulse::before { background: repeating-conic-gradient(rgba(255, 182, 18, .09) 0deg 8deg, transparent 8deg 16deg); }
.campaign-timer { border-right: 1px solid rgba(255, 182, 18, .16); border-left: 0; background: linear-gradient(140deg, rgba(21, 48, 42, .4), rgba(6, 35, 50, .28)); }
.campaign-timer:last-child { border-right: 1px solid rgba(255, 182, 18, .16); }
.campaign-timer-head, .timer-caption, .timer-disclosure, .ticker-disclosure { font-family: var(--english); }
.campaign-timer-head strong, .task-timer .campaign-timer-head strong, .account-ledger li:nth-child(2) b, .market-cell.market-task-reward strong, .task-benefit-card h2 > span { color: var(--southafrica-gold); font-family: var(--english-display); }
.campaign-countdown { justify-content: flex-start; }
.campaign-countdown b { color: #78d6a6; font-family: var(--terminal-mono); }
.campaign-countdown small { font-family: var(--english); }
.campaign-countdown i { color: var(--southafrica-gold); }
.ticker-heading strong { color: var(--southafrica-ivory); font-family: var(--english-display); }
.ticker-heading small { font-family: var(--english); }
.verified-activity { direction: ltr; }
.ticker-heading { direction: ltr; }
.ticker-viewport { direction: ltr; }
.ticker-track { animation-name: tickerScroll; }
.ticker-item { direction: ltr; font-family: var(--english); padding-right: 40px; }
.exchange-board { direction: ltr; }
.exchange-board-head, .exchange-board-head > span, .exchange-board-head small, .exchange-board li span, .exchange-board li strong, .exchange-board li em { font-family: var(--english); }
.exchange-board li:first-child strong { color: var(--southafrica-gold); }

.benefit-card { text-align: left; border-radius: 12px; background: linear-gradient(145deg, rgba(13, 41, 40, .99), rgba(6, 22, 30, .99)) padding-box, linear-gradient(135deg, rgba(0, 122, 77, .55), rgba(255, 182, 18, .35), rgba(0, 35, 149, .46)) border-box; }
.benefit-card::before { right: 13px; left: auto; background: repeating-conic-gradient(rgba(255, 182, 18, .14) 0deg 8deg, transparent 8deg 16deg); }
.card-kicker, .performance-note { color: #7bd3aa; font-family: var(--english); letter-spacing: 1.2px; }
.benefit-card h2, .benefit-card p { font-family: var(--english); }
.benefit-card h2 { font-family: var(--english-display); }
.claim-section { background: linear-gradient(120deg, #081a22, #0a302b 54%, #081633); }
.claim-section::after { background: repeating-conic-gradient(rgba(255, 182, 18, .12) 0deg 8deg, transparent 8deg 16deg); }
.section-heading h2, .section-heading p, .step h3, .step p { font-family: var(--english); }
.section-heading h2 { font-family: var(--english-display); }
.section-heading h2 span { color: var(--southafrica-gold); }
.steps { direction: ltr; }
.step { text-align: left; }
.step-number { color: #7bd3aa; font-family: var(--terminal-mono); }
.step-icon { color: #7bd3aa; border-color: rgba(0, 122, 77, .52); background: radial-gradient(circle at 35% 29%, rgba(0, 122, 77, .25), rgba(0, 35, 149, .1) 42%, transparent 66%); }
.step h3 { min-height: 0; line-height: 1.35; }
.step:not(:last-child)::after { background: linear-gradient(90deg, rgba(0, 122, 77, .75), rgba(255, 182, 18, .18)); transform: none; }
.step:not(:last-child)::before { border-color: var(--southafrica-green); }

.app-section { direction: ltr; background: linear-gradient(#0b2728, #0b2728) padding-box, linear-gradient(135deg, rgba(0, 122, 77, .62), rgba(255, 182, 18, .42) 48%, rgba(0, 35, 149, .55)) border-box; }
.app-backdrop { background: radial-gradient(ellipse at 14% 84%, rgba(255, 182, 18, .25), transparent 31%), radial-gradient(circle at 82% 22%, rgba(0, 122, 77, .22), transparent 24%), linear-gradient(90deg, rgba(7, 29, 27, .25), rgba(7, 29, 27, .78)), linear-gradient(135deg, #173727, #0c3041 55%, #071a21); }
.south-africa-geometry-app { right: -103px; left: auto; bottom: -112px; opacity: .56; }
.app-copy { text-align: left; }
.app-copy h2, .app-copy p { font-family: var(--english); }
.app-copy h2 { font-family: var(--english-display); }
.app-copy h2 span { color: #7bd3aa; }
.app-subtitle { color: var(--southafrica-gold); }
.app-flag { filter: drop-shadow(0 9px 18px rgba(0, 0, 0, .3)); }
.app-meta { font-family: var(--english); }
.site-footer { direction: ltr; background: #071817; }
.site-footer::before { background: linear-gradient(90deg, var(--southafrica-green) 0 33%, var(--southafrica-gold) 33% 55%, var(--southafrica-red) 55% 77%, var(--southafrica-blue) 77% 100%); }
.footer-inner { font-family: var(--english); }
.footer-brand { direction: ltr; }
.download-modal { direction: ltr; }
.modal-card { text-align: left; background: linear-gradient(145deg, #123a30, #091d2c); border-color: rgba(255, 182, 18, .5); }
.modal-card h2, .modal-card p, .button-modal { font-family: var(--english); }
.modal-close { right: 13px; left: auto; }
.button-modal { background: linear-gradient(135deg, var(--southafrica-green), #045d3c); }

.exchange-hub { background: linear-gradient(135deg, rgba(10, 42, 37, .96), rgba(7, 28, 31, .98)), var(--southafrica-ink); }
.exchange-hub-head h2 { color: var(--southafrica-ivory); font-family: var(--english-display); line-height: 1.1; }
.exchange-hub-head h2 span { color: var(--southafrica-gold); }
.exchange-hub-head > div:first-child > p:last-child, .market-source-note span, .market-source-note small, .market-observer-card em, .market-observer-card small, .exchange-product-card p, .exchange-product-card h3, .exchange-product-card small, .exchange-service-line b, .exchange-service-line small, .portfolio-panel > header span, .platform-journey-panel > header span, .portfolio-panel > header small, .platform-journey-panel > header small, .portfolio-panel > p, .account-ledger span, .account-ledger b, .account-ledger em, .platform-tabs span, .platform-journey-list b, .platform-journey-list small { font-family: var(--english); }
.market-source-note i { background: var(--southafrica-green); box-shadow: 0 0 12px rgba(0, 122, 77, .65); }
.market-observer-card { border-right: 1px solid rgba(238, 245, 239, .1); border-left: 0; }
.market-observer-card:last-child { border-right: 0; }
.market-observer-card strong, .portfolio-balance strong, .portfolio-balance span, .pair-symbol { font-family: var(--english-display); }
.market-observer-card strong, .portfolio-balance strong { color: var(--southafrica-gold); }
.exchange-product-icon, .portfolio-panel > header i, .platform-journey-panel > header i, .platform-journey-list i { border-color: rgba(255, 182, 18, .38); color: var(--southafrica-gold); }
.exchange-product-card:hover { border-color: rgba(255, 182, 18, .38); }
.exchange-service-line > span { border-right: 1px solid rgba(238, 245, 239, .1); border-left: 0; }
.exchange-service-line > span:last-child { border-right: 0; }
.account-ledger li:first-child b { font-family: var(--english-display); color: var(--southafrica-gold); }
.platform-tabs span:first-child { background: rgba(0, 122, 77, .2); color: #a8e0bd; }

@media (max-width: 1040px) { .terminal-status { display: none; } }
@media (max-width: 760px) {
  .south-africa-sparkles { opacity: .2; }
  .site-header { height: 65px; }
  .download-art-nav { width: 128px; }
  .hero { min-height: 775px; }
  .hero-grid { min-height: 775px; }
  .hero-copy { text-align: left; }
  .hero-copy h1 { font-size: clamp(39px, 11vw, 48px); line-height: 1.04; }
  .hero-intro { max-width: 34ch; font-size: 11.5px; line-height: 1.7; }
  .south-africa-flag { right: 6%; width: 43%; }
  .terminal-card { display: none; }
  .south-africa-geometry-hero { left: -150px; top: 100px; width: 220px; height: 220px; }
  .campaign-timer, .campaign-timer:last-child { border-right: 0; border-bottom: 1px solid rgba(255, 182, 18, .15); }
  .market-observer-card { border-right: 0; border-bottom: 1px solid rgba(238, 245, 239, .1); }
  .market-observer-card:last-child { border-bottom: 0; }
  .exchange-service-line > span { border-right: 0; }
  .app-section { min-height: 805px; }
  .mobile-download.download-art { right: 50%; left: auto; display: inline-block; width: min(52vw, 230px); min-height: 0; transform: translateX(50%); border-radius: 0; background: transparent; box-shadow: none; }
  .mobile-download.download-art:hover { transform: translateX(50%) translateY(-2px); }
  .site-footer { padding-bottom: 85px; }
}

@media (max-width: 430px) {
  .download-art-nav { width: 118px; }
  .hero { min-height: 765px; }
  .hero-grid { min-height: 765px; }
  .hero-copy h1 { font-size: 39px; }
  .app-section { min-height: 790px; }
}

@media (prefers-reduced-motion: reduce) {
  .south-africa-sparkles { display: none; }
  .terminal-dot, .ticker-track { animation: none; }
  .ticker-track { transform: none !important; }
}