/* Homepage v5 (desktop ≥768px). Phone keeps the existing .home-m layout. */

@font-face { font-family: 'Satoshi'; src: url('../webfonts/satoshi/satoshi-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('../webfonts/satoshi/satoshi-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('../webfonts/satoshi/satoshi-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('../webfonts/satoshi/satoshi-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* ---- One layout per breakpoint ---- */
@media (max-width: 767px) {
    .v5 { display: none !important; }
}
@media (min-width: 768px) {
    .home-m,
    body.home-v5 #navbar,
    body.home-v5 .site-footer,
    body.home-v5 .noise-overlay,
    body.home-v5 .global-vignette { display: none !important; }
    body.home-v5 { background: #000; }
    html[data-theme="light"] body.home-bw-theme.home-v5 { background: rgb(246 246 247) !important; }
}

/* ---- Theme tokens ----
 * Every colour in the partials and scripts is written against these, so light mode is its own
 * palette rather than an inverted picture of the dark one:
 *   --fg ink (text, lines, fills)   --bg page   --sf base of opaque near-black surfaces
 *   --tk text-alpha boost (secondary text needs more ink on white than light needs on black)
 *   --glow light-emitting glows     --hl inset bevel highlights     --sh / --shk drop shadows
 *   --chrome metallic gradient used for the big numerals
 * [data-v5-dark] blocks (payment cards, closing banner, avatars) and [data-v5-brand] logos keep the
 * dark values in both themes; shadows and the --p* page tokens are not reset inside them. */
.v5,
html[data-theme="light"] .v5 :is([data-v5-dark], [data-v5-brand]) {
    --fg: 255 255 255; --bg: 0 0 0; --sf: 0 0 0; --tk: 1; --glow: 255 255 255; --hl: 255 255 255; --nav: 14 14 16;
    --chrome: linear-gradient(180deg, #ffffff 0%, #f1f1f4 30%, #a9a9b0 52%, #e6e6ea 55%, #85858d 78%, #3c3c42 100%);
    /* --acc / --on-acc: filled actions (buttons, Top badge). Same as ink here; blue in white mode. */
    --acc: 255 255 255; --on-acc: 0 0 0;
}
.v5 { --sh: 0 0 0; --shk: 1; --pfg: var(--fg); --pbg: var(--bg); }
html[data-theme="light"] .v5 {
    /* Same soft paper palette as theme-light-mono.css: page #efedea, cards #f8f6f4, deep ink #080706. */
    --fg: 8 7 6; --bg: 239 237 234; --sf: 248 246 244; --tk: 1.38; --acc: 29 78 216; --on-acc: 255 255 255; --glow: 255 255 255; --hl: 255 255 255; --nav: 248 246 244;
    --sh: 46 36 22; --shk: 0.26;
    --chrome: linear-gradient(180deg, #000000 0%, #0d0d0f 30%, #3a3a40 52%, #141416 55%, #4a4a51 78%, #6e6e76 100%);
    color-scheme: light;
}
html[data-theme="light"] .v5 [data-v5-dark] { color: rgb(var(--fg)); color-scheme: dark; }

/* ---- Base (scoped) ---- */
.v5 { position: relative; background: rgb(var(--bg)); color: rgb(var(--fg)); font-family: Satoshi, 'Noto Sans Arabic', system-ui, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
.v5 *, .v5 *::before, .v5 *::after { box-sizing: border-box; }
.v5 a { color: rgb(var(--fg)); text-decoration: none; transition: color .3s ease, background .4s ease, border-color .4s ease; }
.v5 button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
.v5 h1, .v5 h2, .v5 h3, .v5 p { margin: 0; }
.v5 img { display: block; max-width: 100%; }
.v5 ::selection { background: rgb(var(--fg) / 0.25); color: rgb(var(--fg)); }
.v5 [hidden] { display: none !important; }
.v5 :focus-visible { outline: 2px solid rgb(var(--fg)); outline-offset: 3px; border-radius: 8px; }
.v5 .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.v5 section[data-v5-anchor] { scroll-margin-top: 96px; }

/* ---- Layout helpers ---- */
.v5-faq-chips { flex-direction: row; overflow-x: auto; }
.v5-faq-chips > button { width: 300px; }
@media (min-width: 1000px) {
    .v5-faq-chips { flex-direction: column; overflow-x: visible; }
    .v5-faq-chips > button { width: auto; }
}
.v5-tape:hover { animation-play-state: paused !important; }

/* ---- Hover states (inline styles win over :hover, so these need !important) ---- */
.v5 .v5h1:hover{color:rgb(var(--fg)) !important;background:rgb(var(--fg) / 0.07) !important}
.v5 .v5h2:hover{transform:translateY(-1px) !important;box-shadow:0 6px 20px rgb(var(--glow) / 0.18), 0 8px 18px -8px rgb(var(--sh) / calc(0.9 * var(--shk))) !important}
.v5 .v5h6:hover{color:rgb(var(--fg)) !important}
.v5 .v5h9:hover{background:color-mix(in srgb, rgb(var(--acc)) 88%, rgb(var(--bg))) !important;color:rgb(var(--on-acc)) !important}
.v5 .v5h10:hover{opacity:1 !important}
.v5 .v5h11:hover{border-color:rgb(var(--fg) / 0.32) !important;color:rgb(var(--fg)) !important}
.v5 .v5h12:hover{background:rgb(var(--fg) / 0.16) !important}
.v5 .v5h13:hover{border-color:rgb(var(--fg) / 0.4) !important;color:rgb(var(--fg)) !important}
.v5 .v5h14:hover{background:rgb(var(--fg) / 0.14) !important;color:rgb(var(--fg)) !important}
.v5 .v5h15:hover{background:rgb(var(--fg) / 0.04) !important}
/* Payment tabs: white brand chips in both themes; the active one gets a ring in the page colours. */
.v5 .v5-paytab { box-shadow: 0 6px 18px -8px rgb(var(--sh) / calc(0.9 * var(--shk))); }
.v5 .v5-paytab[aria-pressed="true"] { box-shadow: 0 0 0 2px rgb(var(--pbg)), 0 0 0 4px rgb(var(--pfg)), 0 10px 26px -8px rgb(var(--pfg) / 0.3); }
html[data-theme="light"] .v5 .v5-paytab { outline: 1px solid rgb(var(--pfg) / 0.08); outline-offset: -1px; }

/* ---- Motion (prefixed to avoid clashing with site keyframes) ---- */
@keyframes v5Blink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.85); } }
@keyframes v5Rise { from { opacity: 0; transform: translateY(26px); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes v5Ping { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes v5Tape { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
    .v5 *, .v5 *::before, .v5 *::after { animation: none !important; transition: none !important; }
}

/* RTL: text-glyph arrows (→) are inline spans, which ignore transforms until they are inline-block. */
html[dir="rtl"] .v5 span.icon-dir { display: inline-block; transform: scaleX(-1); }

/* ---- Light-only adjustments ---- */
/* The silver logo becomes graphite. */
html[data-theme="light"] .v5 .v5-logo { filter: invert(1) contrast(1.15); }
/* theme-light.css styles every footer and focus ring on the site; the homepage has its own. */
html[data-theme="light"] body.home-bw-theme .v5 footer { color: inherit; background: transparent !important; border-color: rgb(var(--fg) / 0.12) !important; }
html[data-theme="light"] body.home-bw-theme .v5 footer a:hover { color: rgb(var(--fg)) !important; }
html[data-theme="light"] body.home-bw-theme .v5 :is(a, button, input):focus-visible { outline-color: rgb(var(--fg)) !important; }

/* ---- Performance ----
 * Sections below the first screen are neither laid out nor painted until they come near the
 * viewport (their last real height is remembered, so the scrollbar stays stable). */
.v5 > section:not(.v5-hero), .v5 > footer { content-visibility: auto; contain-intrinsic-size: auto 900px; }
/* Blocks scrolled out of view (core.js sets data-v5-off) stop their looping CSS animations. */
.v5 > [data-v5-off], .v5 > [data-v5-off] * { animation-play-state: paused !important; }