/* ZolnaPay: clean, responsive payments platform presentation. */
:root { --font-base: 'Manrope','Tajawal',sans-serif; --font-display: 'Manrope','Tajawal',sans-serif; --radius-m: 8px; --radius-l: 12px; }
html[dir='rtl'] { --font-base: 'Tajawal','Manrope',sans-serif; --font-display: 'Tajawal','Manrope',sans-serif; }
html[data-theme='light'] { --color-brand-bg: #635bff; --color-brand-fg: #635bff; }
.f-wrap { max-width: 1200px; }
.f-nav-header { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.f-nav-item { font-size: 13px; }
.f-btn { border-radius: 8px; min-height: 44px; font-weight: 600; transition: transform .18s ease,box-shadow .18s ease,background .18s ease; }
.f-btn--primary { background: #635bff; border-color: #635bff; box-shadow: 0 3px 8px #635bff24; }
.f-btn--primary:hover { background: #5145dc; border-color: #5145dc; transform: translateY(-2px); box-shadow: 0 7px 18px #635bff30; }
.f-hero { position: relative; isolation: isolate; padding-block: 100px 112px; }
html[data-theme='light'] .f-hero { background: linear-gradient(135deg,#fff 18%,#f5f3ff 70%,#e8f8fc); }
.f-hero::before { content: ''; position: absolute; z-index: -1; width: 700px; height: 420px; inset-inline-end: -280px; top: -180px; background: linear-gradient(130deg,#a78bfa44,#67e8f944); filter: blur(65px); border-radius: 50%; pointer-events: none; }
.f-hero-title { font-size: clamp(38px,4.8vw,66px); line-height: 1.16; letter-spacing: -.045em; font-weight: 700; }
[dir='rtl'] .f-hero-title { letter-spacing: -.025em; line-height: 1.5; }
.f-hero-lede { max-width: 510px; font-size: 16px; line-height: 1.9; }
.f-hero-content { animation: platform-enter .65s ease both; }
.f-hero .f-session-card { border-radius: 18px; box-shadow: 0 30px 80px -30px #0a254040,0 3px 8px #0a254010; animation: platform-enter .8s .12s ease both; min-width: 0; }
.f-section { padding-block: 88px; }
.f-section-title { letter-spacing: -.025em; line-height: 1.4; }
.f-section-desc { line-height: 1.9; }
.f-card { border-radius: 14px; box-shadow: 0 2px 6px #0a254006; }
.f-card--interactive:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -14px #0a254025; }
.f-hero-telemetry { flex-wrap: wrap; row-gap: 12px; }
a:focus-visible,button:focus-visible { outline: 3px solid #8b83ff; outline-offset: 4px; }
@keyframes platform-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 767px) {
 .f-wrap { padding-inline: 20px; }
 .f-hero { padding-block: 44px 56px; }
 .f-hero-grid { gap: 36px; }
 .f-hero-title { font-size: clamp(32px,8.5vw,48px); }
 .f-hero-lede { font-size: 15px; }
 .f-hero-cta { width: 100%; display: grid; gap: 12px; }
 .f-hero-cta .f-btn { width: 100%; text-align: center; white-space: normal; min-height: 48px; }
 .f-section { padding-block: 52px; }
 .f-section-title { font-size: 28px; }
 .f-session-card { max-width: 100%; }
 .f-nav-actions { gap: 6px; }
 input,select,textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 767px) {
 .f-nav-inner { gap: 8px; }
 .f-nav-actions { min-width: 0; margin-inline-start: auto; }
 .f-nav-actions > a { display: none; }
 .f-feature-content, .f-feature-visual, .f-hero-content, .f-grid > *, .f-hero-grid > * { min-width: 0; max-width: 100%; }
 .f-feature-content pre { overflow-x: auto; max-width: 100%; }
}
@media (max-width: 767px) {
 .f-feature-row { grid-template-columns: minmax(0, 1fr); }
 .f-feature-row > * { min-width: 0; }
 .f-bullet-text { min-width: 0; overflow-wrap: anywhere; }
}
@media (max-width: 767px) {
 .f-btn { white-space: normal; text-align: center; }
 .f-code-header { flex-wrap: wrap; gap: 10px; }
 .f-code-tabs { flex-wrap: wrap; min-width: 0; }
 .f-code-terminal { min-width: 0; max-width: 100%; }
}
@media (min-width: 1100px) { #fluentOpenDrawerBtn { display: none !important; } }
html[data-theme='dark'] { --color-brand-bg:#8179ff; --color-brand-fg:#a19aff; }
html[data-theme='dark'] .f-hero { background:linear-gradient(135deg,#0b1423,#171e37); }
html[data-theme='dark'] .f-nav-header { background:rgba(11,20,35,.94); border-color:#2a3a50; }
html[data-theme='dark'] .f-hero .f-session-card { box-shadow:0 30px 80px -30px #0009; }

/* Compact, readable landing layout across languages and screen sizes. */
html[dir='rtl'] .f-hero-title, html[dir='rtl'] .f-section-title { letter-spacing: normal; }
.f-section-desc { max-width: 600px; margin-inline: auto; line-height: 1.65; }
.f-hero-lede { line-height: 1.75; }
.f-section-title, .f-feature-content h3 { text-wrap: balance; word-break: normal; overflow-wrap: normal; }
@media (max-width: 767px) {
 .f-wrap { padding-inline: 18px; }
 .f-section { padding-block: 40px; }
 .f-hero { padding-block: 36px 44px; }
 .f-hero-title { font-size: clamp(30px,8vw,44px); }
 html[dir='rtl'] .f-hero-title { line-height: 1.4; }
 .f-section-title { font-size: 26px; line-height: 1.35; margin-bottom: 10px; }
 .f-section-desc { font-size: 15px; }
 .f-feature-content h3 { font-size: 23px; line-height: 1.4; }
 .f-feature-row { gap: 24px; margin-bottom: 40px; }
 .f-feature-content p, .f-bullet-text { line-height: 1.65; }
 .f-feature-bullets { gap: 12px; }
 .f-bullet-text { overflow-wrap: normal; }
 .f-hero-telemetry { gap: 12px; }
 .f-product-tabs { max-width: 100%; overflow-x: auto; }
}

/* The footer always has a dark surface, independent of the page theme. */
html .f-footer {
 --color-neutral-fg-1: #ffffff;
 --color-neutral-fg-3: #d3deef;
 --color-brand-fg: #bcb8ff;
 --color-neutral-stroke-2: #344761;
 background: #0b1930;
 color: #d3deef;
}
.f-footer-col h5 { color: #ffffff; }
.f-footer-links a { color: #d3deef; }
.f-footer-links a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 4px; }
.f-footer .f-brand-logo { align-self: flex-start; background: #ffffff; padding: 10px 12px; border-radius: 10px; }
.f-footer .f-status-indicator { background: #163f35; color: #b4f4ce; }
.f-footer-bottom { border-color: #344761; }
@media (max-width: 767px) {
 .f-footer { padding-block: 36px 28px; }
 .f-footer-grid { gap: 28px; }
 .f-footer-links a { display: inline-flex; align-items: center; min-height: 36px; }
 .f-footer-links { gap: 4px; }
}

/* Tighter surfaces, clear headers, and quiet ambient motion. */
:root { --radius-l: 9px; --radius-xl: 12px; }
.f-section { padding-block: 60px; }
.f-section-header { margin-bottom: 28px; }
.f-card, .f-audience-card, .f-timeline-card {
 border-radius: 10px;
 padding: 20px;
 box-shadow: 0 1px 2px #0a254008, 0 5px 16px -8px #0a25401f;
 backdrop-filter: none;
}
.f-card--interactive:hover { transform: translateY(-3px); box-shadow: 0 2px 4px #0a254008, 0 12px 24px -12px #0a254033; }
.f-channels-grid, .f-audience-grid { gap: 16px; }
.f-channel-card { gap: 12px; }
.f-channel-top { justify-content: flex-start; gap: 10px; min-width: 0; }
.f-channel-icon { width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px; }
.f-channel-title { font-size: 16px; line-height: 1.35; margin: 0; }
.f-channel-card > .f-badge { align-self: flex-start; font-size: 10px; padding: 3px 7px; }
.f-channel-desc { line-height: 1.65; }
.f-audience-card { border-top-width: 2px; }
.f-audience-title { margin-bottom: 8px; }
.f-audience-desc { margin-bottom: 16px; }
.f-feature-row { gap: 32px; margin-bottom: 52px; }
.f-feature-content p, .f-feature-bullets { margin-bottom: 18px; }
.f-theater-frame, .f-code-terminal, .f-hero .f-session-card, .f-trust-strip {
 border-radius: 12px;
 box-shadow: 0 2px 5px #0a254008, 0 14px 32px -20px #0a254040;
}
.f-trust-strip { padding: 20px; }
/* Remove the decorative rings around step numbers. */
.f-timeline-step-badge, .f-card--interactive:hover .f-timeline-step-badge {
 border-radius: 7px; box-shadow: none; border: 0; background: var(--color-brand-bg-subtle); transform: none;
}
.f-timeline-step-badge::before { content: none; }
.f-hero::before { content: none; }
html[data-theme='dark'] .f-card, html[data-theme='dark'] .f-hero .f-session-card {
 box-shadow: 0 1px 2px #0003, 0 8px 24px -12px #0006;
}
@media (prefers-reduced-motion: no-preference) {
 .f-channel-icon {
  background: linear-gradient(125deg, #635bff16, #0ba5b82a, #635bff20);
  background-size: 250% 250%;
  animation: platform-color-flow 9s ease-in-out infinite;
 }
 .f-channel-card:nth-child(2n) .f-channel-icon { animation-delay: -4s; }
 .f-channel-card:nth-child(3n) .f-channel-icon { animation-delay: -7s; }
 .f-hero-title .f-brand-accent {
  animation: platform-ink 8s ease-in-out infinite;
 }
 .f-virtual-card::before { animation: platform-card-light 10s ease-in-out infinite; }
}
@keyframes platform-color-flow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes platform-ink { 0%,100% { color: #635bff; } 50% { color: #098da8; } }
@keyframes platform-card-light { 0%,65% { transform: translateX(-115%); } 90%,100% { transform: translateX(115%); } }
@media (max-width: 767px) {
 .f-section { padding-block: 32px; }
 .f-section-header { margin-bottom: 22px; }
 .f-card, .f-audience-card, .f-timeline-card { padding: 16px; border-radius: 9px; }
 .f-channels-grid { grid-template-columns: minmax(0,1fr); gap: 12px; }
 .f-channel-title { font-size: 15px; }
 .f-feature-row { gap: 20px; margin-bottom: 32px; }
 .f-trust-strip { padding: 16px; }
}

/* Deep-space hero, isolated from the payment simulator and the rest of the page. */
html .f-hero { background: #070e24; }
.f-space-scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: linear-gradient(125deg,#080f26,#101337 65%,#081d30); }
.f-space-nebula { position: absolute; inset: -12%; opacity: .85; background: radial-gradient(ellipse at 72% 28%,#7349e75c,transparent 48%),radial-gradient(ellipse at 35% 80%,#125ea65c,transparent 45%),radial-gradient(ellipse at 90% 80%,#16b6c838,transparent 38%); animation: space-nebula-drift 24s ease-in-out infinite alternate; }
.f-space-canvas { width: 100%; height: 100%; display: block; }
.f-space-scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#070e2459,transparent 70%),linear-gradient(0deg,#070e24,transparent 18%); }
.f-hero-content { --color-neutral-fg-1:#f1f5ff; --color-neutral-fg-3:#bbc9e4; color:#f1f5ff; }
.f-hero-title { color:#f1f5ff; }
.f-hero .f-muted-accent { color:#b5c5e7; }
.f-hero-lede { color:#c4d0e7; }
.f-hero .f-hero-telemetry { color:#c4d0e7; border-color:#ffffff26; }
.f-hero .f-hero-telemetry > *, .f-hero .f-hero-telemetry strong { color:#c4d0e7; }
.f-hero .f-hero-badge-wrap .f-badge { color:#d4ceff; background:#a697ff14; border-color:#b4a7ff44; }
.f-hero-content .f-btn--secondary { background:#ffffff0a; color:#e3eaff; border-color:#ffffff40; }
.f-hero-content .f-btn--secondary:hover { background:#ffffff18; }
.f-space-toggle { position:absolute; inset-inline-end:20px; bottom:44px; z-index:2; width:36px; height:36px; border:1px solid #ffffff40; border-radius:8px; background:#0c1731; color:#d9e6ff; cursor:pointer; }
.is-space-paused .f-space-nebula { animation-play-state:paused; }
@keyframes space-nebula-drift { from { transform:translate3d(-2%,0,0) rotate(-4deg) scale(1); } to { transform:translate3d(3%,2%,0) rotate(5deg) scale(1.12); } }
@media(max-width:767px) { .f-space-toggle { bottom:44px; inset-inline-end:18px; } .f-space-scene::after { background:linear-gradient(0deg,#070e24,transparent 20%); } }
@media(prefers-reduced-motion:reduce) { .f-space-nebula { animation:none; } }