/* XEPA site additions on top of base.css (the proposal UI). Same tokens, same motion.
   (c) 2026 XEPA International Trading FZ-LLC. All rights reserved. */

/* hero: the courtesy-page orbits, large, behind a "Fast Forward" wordmark with the lime word */
.hero { isolation: isolate; }
.orbit { position: absolute; z-index: -1; right: -14vmin; top: 50%; width: 82vmin; height: 82vmin; translate: 0 -50%; pointer-events: none; }
.orbit circle { fill: none; stroke: var(--accent); stroke-opacity: .16; }
.orbit .dot { fill: var(--accent); stroke: none; }
.orbit g { transform-origin: 50% 50%; animation: spin 60s linear infinite; }
.orbit g:nth-child(2) { animation-duration: 90s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
[dir="rtl"] .orbit { right: auto; left: -14vmin; }
.mono { flex-direction: column; align-items: center; gap: .04em; }
/* "Fast Forward" stays; below it the holding's fields rotate in lime italic */
.rw-wrap { display: grid; justify-items: center; font-size: .5em; line-height: 1.15; }
.rw { grid-area: 1 / 1; color: var(--accent); font-style: italic; padding-inline: .06em; opacity: 0; transform: translateY(.35em); filter: blur(6px);
  transition: opacity .6s, transform .8s cubic-bezier(.2,.7,.2,1), filter .6s; }
.rw.on { opacity: 1; transform: none; filter: none; }
.rw.out { opacity: 0; transform: translateY(-.35em); filter: blur(6px); }
.mono > * { opacity: 0; translate: 0 .18em; animation: up 1.1s cubic-bezier(.2,.7,.2,1) forwards; }
.mono > .rw-wrap { animation-delay: .25s; }
@keyframes up { to { opacity: 1; translate: 0 0; } }

/* hero background: the fast-forward journey (point, cube, city, fly-through), drawn in lime wireframe, kept faint */
.grid-fx { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; pointer-events: none; opacity: .45; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 32% at 50% 42%, rgba(15,15,15,.75), transparent 75%), linear-gradient(to top, #0f0f0f 0, transparent 30%); }


/* small mockup atoms */
.mk .push { margin-top: auto; }
.soc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.soc > div { display: grid; gap: 4px; padding: 12px; border-radius: 8px; background: #202020; }
.soc .ui-n { font-size: 22px; }
.mk-ev { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.mk-ev > div { display: flex; flex-direction: column; gap: 10px; }
.seats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 10px; }
.seats i { aspect-ratio: 1.6; border-radius: 6px; background: #2c2c2c; transition: background .4s; }
.seats i.on { background: var(--accent); }
.ask { align-self: flex-end; background: #262626; padding: 10px 14px; border-radius: 12px 12px 4px 12px; font-size: 14px; }
.mk-web .sq1 { background: linear-gradient(160deg, #2c3a18, #191919); }
.mk-web .sq2 { background: linear-gradient(200deg, #dafa9c 0 18%, #262626 18%); }
.pname { font: 400 clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem)/1.05 var(--display); letter-spacing: -.02em; color: #fff; }
.portal { aspect-ratio: 5 / 4; }

/* footer: two founders, legal row with languages */
.foot .sig .b2 { margin-top: 18px; }
.foot .legal { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 40px; font-size: var(--step-small); color: var(--paper-muted); }

/* Arabic: Bodoni and Jost have no Arabic, so Amiri carries display and Plex Sans Arabic carries text. */
[dir="rtl"] { --display: "Bodoni Moda", "Amiri", serif; --text: "Jost", "IBM Plex Sans Arabic", sans-serif; }
[dir="rtl"] body, [dir="rtl"] .disp, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; }
[dir="rtl"] .bottom h1, [dir="rtl"] .gh h3, [dir="rtl"] h2, [dir="rtl"] .cta-h, [dir="rtl"] .foot .inv, [dir="rtl"] .tk { line-height: 1.3; }
[dir="rtl"] .intro .st { line-height: 1.6; }
[dir="rtl"] .go svg { transform: scaleX(-1); }
[dir="rtl"] .bubble { border-radius: 12px 12px 4px 12px; }
[dir="rtl"] .ask { align-self: flex-start; border-radius: 12px 12px 12px 4px; }
[dir="rtl"] .steps span::after, [dir="rtl"] .st3 span::after { transform-origin: right; }

@media (max-width: 720px) {
  .nav .lang { margin-left: auto; }
  [dir="rtl"] .nav .lang { margin-left: 0; margin-right: auto; }
  .orbit { width: 120vmin; height: 120vmin; right: -50vmin; }
  [dir="rtl"] .orbit { left: -50vmin; }
  .mk-ev { grid-template-columns: 1fr; }
  .mk-ev .tl { display: none; }
  .portal { aspect-ratio: auto; min-height: 380px; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit g { animation: none; }
  .mono > * { animation: none; opacity: 1; translate: none; }
  .rw { transition: none; }
}
.mk-cs .bubble, .mk-cs .ask { max-width: 62%; }
@media (max-width: 720px) { .mk-cs .bubble, .mk-cs .ask { max-width: 92%; } }
.mk-brands .ln { padding: 5px 0; }
.mk-brands .chip { transition: background .3s, color .3s; }
.show ul.pts li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* statement as a scroll story: the section pins and plays one sentence at a time,
   words rising in sequence, <mark> phrases in lime. Without JS or with reduced motion it reads as one block. */
.story { padding-block: 12vh 0; }
.story-pin { display: grid; gap: 28px; justify-items: center; }
.story .st { max-width: 26ch; margin: 0 auto; font-size: clamp(1.75rem, 1rem + 2.6vw, 3.75rem); line-height: 1.18; text-align: center; text-wrap: balance; }
.story .st mark { background: none; color: var(--accent); font-weight: 500; }
.story-dots { display: none; }
.js .story { height: calc(var(--n) * 80vh + 100svh); padding: 0; }
.js .story-pin { position: sticky; top: 0; height: 100svh; place-items: center; grid-template-areas: "s"; }
.js .story .chunk { grid-area: s; opacity: 0; transform: translateY(60px) scale(.96); filter: blur(10px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1), filter .7s; }
.js .story .chunk.on { opacity: 1; transform: none; filter: none; }
.js .story .chunk.past { opacity: 0; transform: translateY(-60px) scale(1.04); filter: blur(10px); }
.js .story .chunk { perspective: 900px; }
/* words flip up out of a blur, one after another; on exit they lift away and dissolve in the same order */
.js .story .chunk .wd { display: inline-block; opacity: 0; transform-origin: 50% 100%; transform: translateY(.7em) rotateX(-75deg); filter: blur(10px);
  transition: opacity .55s, transform .9s cubic-bezier(.2,.8,.2,1), filter .6s; transition-delay: calc(var(--w) * 32ms); }
.js .story .chunk.on .wd { opacity: 1; transform: none; filter: none; }
.js .story .chunk.past .wd { opacity: 0; transform: translateY(-.6em) rotateX(55deg) scale(.96); filter: blur(10px); transition-duration: .45s, .6s, .45s; transition-delay: calc(var(--w) * 12ms); }
.js .story .chunk.past { opacity: 1; transform: none; filter: none; transition: opacity .3s .7s; }
.js .story .chunk.on mark .wd { animation: glow 1.8s calc(.5s + var(--w) * 32ms) ease-out both; }
@keyframes glow { 0% { text-shadow: 0 0 0 rgba(218,250,156,0); } 35% { text-shadow: 0 0 22px rgba(218,250,156,.75); } 100% { text-shadow: 0 0 0 rgba(218,250,156,0); } }
.js .story-dots { display: flex; gap: 8px; position: absolute; bottom: 7vh; }
.js .story-dots i { width: 7px; height: 7px; border-radius: 50%; background: #3a3a3a; transition: background .3s, transform .3s; }
.js .story-dots i.on { background: var(--accent); transform: scale(1.4); }
.story-pin { position: relative; }
.seal { padding-block: 40px 140px; }
.seal .sealed { margin-top: 0; }

/* stamp: ring text turns slowly, the XEPA mark breathes, a hover re-stamps it */
.stamp .ring-rot { transform-origin: 100px 100px; animation: spin 28s linear infinite; }
.stamp .seal-x { transform-origin: 100px 100px; transform-box: view-box; animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.06); } }
.sealed.in:hover .stamp { animation: stampin .7s cubic-bezier(.2,.7,.2,1) both; }

@media (prefers-reduced-motion: reduce) {
  .js .story { height: auto; padding-block: 12vh 0; }
  .js .story-pin { position: static; height: auto; grid-template-areas: none; }
  .js .story .chunk, .js .story .chunk.past, .js .story .chunk .wd { grid-area: auto; opacity: 1; transform: none; filter: none; transition: none; }
  .js .story-dots { display: none; }
  .stamp .ring-rot, .stamp .seal-x { animation: none; }
}

/* the giant closing word is the call to action itself */
.cta .word { display: flex; align-items: center; justify-content: space-between; gap: .1em; text-decoration: none; color: inherit; line-height: 1; padding-block: .05em .1em; border-top: 2px solid rgba(15,15,15,.85); }
.cta .word span { transition: transform .5s cubic-bezier(.2,.7,.2,1), font-style .2s; }
.cta .word svg { flex: none; width: .62em; height: .62em; transition: transform .5s cubic-bezier(.2,.7,.2,1); animation: nudge 3.2s infinite cubic-bezier(.2,.7,.2,1); }
.cta .word:hover span, .cta .word:focus-visible span { transform: translateX(.06em); font-style: italic; }
.cta .word:hover svg, .cta .word:focus-visible svg { transform: translate(.08em, -.08em) rotate(0deg); }
[dir="rtl"] .cta .word svg { transform: scaleX(-1); }
.cta .word:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 6px; }
/* footer wordmark: big, no longer the size of the page */
.foot .big { font-size: clamp(5rem, 1rem + 17vw, 17rem); margin-top: 72px; }
@media (prefers-reduced-motion: reduce) { .cta .word svg { animation: none; } }

/* story icons: one faint lime line drawing behind each sentence, playing while that sentence is on screen */
.story-ic { display: none; }
.js .story-ic { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: scale(1.05); transition: opacity .9s, transform 1.2s cubic-bezier(.2,.7,.2,1); pointer-events: none;
  fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; z-index: -2; }
.js .story-ic.on { opacity: .13; transform: none; }
/* the scene icons are drawn in white, faint, so the lime stays for the words */
.js .story-ic { --accent: #ffffff; }
/* the motifs drift a little, each at its own pace, so the scene feels alive */
.story-ic.on .sc { animation: drift2 9s ease-in-out infinite alternate; }
.story-ic .s1 { animation-duration: 11s !important; } .story-ic .s2 { animation-duration: 7s !important; } .story-ic .s3 { animation-duration: 13s !important; }
@keyframes drift2 { to { translate: 0 -14px; } }
/* keep the centre clear for the sentence */
.js .story-pin::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(34% 40% at 50% 50%, var(--bg) 30%, transparent 100%); }
.js .story .chunk { position: relative; z-index: 1; }
.story-ic .dr { stroke-dasharray: 420; stroke-dashoffset: 420; }
.story-ic.on .dr { animation: icdraw 2.4s cubic-bezier(.65,0,.25,1) forwards; }
@keyframes icdraw { to { stroke-dashoffset: 0; } }
.story-ic .blink { fill: var(--accent); stroke: none; animation: blink 1.2s infinite; } .story-ic .b2 { animation-delay: .3s; } .story-ic .b3 { animation-delay: .6s; }
.story-ic .lock .shackle { animation: icdraw 2.4s forwards, shut 2.4s 2.4s infinite; }
.story-ic .wave { opacity: 0; animation: wv 2s infinite; } .story-ic .w2 { animation-delay: .3s; } .story-ic .w3 { animation-delay: .6s; }
@keyframes wv { 0%, 100% { opacity: 0; } 40% { opacity: 1; } }
.story-ic .bar { fill: var(--accent); stroke: none; opacity: .5; transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); }
.story-ic.on .bar { animation: barup 1s cubic-bezier(.2,.7,.2,1) forwards; } .story-ic .b2 { animation-delay: .15s; } .story-ic .b3 { animation-delay: .3s; } .story-ic .b4 { animation-delay: .45s; }
@keyframes barup { to { transform: scaleY(1); } }
.story-ic .ly { transform-box: view-box; } .story-ic.on .ly { animation: stack 3s cubic-bezier(.2,.7,.2,1) infinite; }
.story-ic .l2 { animation-delay: .2s !important; } .story-ic .l3 { animation-delay: .4s !important; }
@keyframes stack { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } }
.story-ic .crowd circle { fill: var(--accent); stroke: none; opacity: 0; }
.story-ic.on .crowd circle { animation: pop .4s calc(1.4s + var(--k) * 90ms) forwards; }
@keyframes pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
.story-ic .crowd circle { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .js .story-ic { display: none; } }
.js .story-pin { isolation: isolate; }

/* extra motifs: globe meridian turning, arcs, ticket perforation, heart beat, live dot, shared packet */
.story-ic .mer { transform-box: fill-box; transform-origin: center; animation: mer 4s linear infinite; }
@keyframes mer { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
.story-ic .dashl { stroke-dasharray: 5 6; }
.story-ic .beat { transform-box: fill-box; transform-origin: center; animation: beat 1.4s ease-in-out infinite; }
@keyframes beat { 0%, 60%, 100% { transform: scale(1); } 20% { transform: scale(1.12); } 35% { transform: scale(.98); } }
.story-ic .cnt, .story-ic .lv { fill: var(--accent); stroke: none; font: 500 22px var(--text); }
.story-ic .lv { font-size: 30px; letter-spacing: .08em; }
.story-ic .rec { fill: var(--accent); stroke: none; animation: blink 1.1s infinite; }
.story-ic .pkt { fill: var(--accent); stroke: none; animation: pkt 2.2s cubic-bezier(.65,0,.25,1) infinite; }
@keyframes pkt { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 50% { transform: translate(62px, -30px); opacity: 1; } 55% { opacity: 0; transform: translate(0, 0); } 70% { opacity: 1; } 100% { transform: translate(62px, 30px); opacity: 0; } }

/* money, markets, compliance */
.story-ic .coinf { fill: none; stroke: var(--accent); }
.story-ic .cur { fill: var(--accent); stroke: none; font: 500 24px var(--text); }
.story-ic .drop { animation: drop 2.4s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes drop { 0% { transform: translateY(-30px); opacity: 0; } 20% { opacity: 1; } 70% { transform: translateY(54px); opacity: 1; } 85%, 100% { transform: translateY(54px); opacity: 0; } }
.story-ic .cup { fill: var(--accent); stroke: none; opacity: .6; transform-box: fill-box; transform-origin: bottom; animation: barup 1.2s calc(var(--k) * .2s) cubic-bezier(.2,.7,.2,1) both, blink 2.4s calc(1.4s + var(--k) * .2s) infinite; }
.story-ic .tick { stroke-dasharray: 30; stroke-dashoffset: 30; animation: tick 3.2s infinite; } .story-ic .t1 { animation-delay: .4s; } .story-ic .t2 { animation-delay: .8s; } .story-ic .t3 { animation-delay: 1.2s; }
@keyframes tick { 0%, 10% { stroke-dashoffset: 30; } 25%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 30; } }
/* Tron: light cycles running the traces, code being typed */
.story-ic .cyc { stroke-width: 3.2; stroke-dasharray: 18 400; animation: cyc 2.6s linear infinite; filter: drop-shadow(0 0 4px rgba(255,255,255,.8)); }
.story-ic .c1 { animation-delay: .7s; } .story-ic .c2 { animation-delay: 1.3s; } .story-ic .c3 { animation-delay: 1.9s; }
@keyframes cyc { from { stroke-dashoffset: 18; } to { stroke-dashoffset: -400; } }
.story-ic .node { fill: var(--accent); stroke: none; animation: blink 1.6s infinite; }
.story-ic .code { fill: var(--accent); stroke: none; font: 500 20px ui-monospace, "SF Mono", Menlo, monospace; }
.story-ic .cline { stroke-width: 3; stroke-dasharray: 100; stroke-dashoffset: 100; animation: cltype 4s steps(12) infinite; } .story-ic .l1 { animation-delay: .5s; } .story-ic .l2 { animation-delay: 1s; } .story-ic .l3 { animation-delay: 1.5s; }
@keyframes cltype { 0% { stroke-dashoffset: 100; } 40%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 100; } }
.story-ic .caret { fill: var(--accent); stroke: none; animation: blink .9s steps(1) infinite; }
/* idea to customers: people appear one by one */
.story-ic .crowd g { opacity: 0; transform-box: fill-box; transform-origin: center; }
.story-ic.on .crowd g { animation: pop .4s calc(1s + var(--k) * 110ms) forwards; }


/* Dubai and the rest of the new motifs */
.story-ic .tip { fill: var(--accent); stroke: none; animation: blink 1.2s infinite; }
.story-ic .win { fill: var(--accent); stroke: none; animation: blink 2.6s infinite; } .story-ic .w1 { animation-delay: .6s; } .story-ic .w2 { animation-delay: 1.2s; } .story-ic .w3 { animation-delay: 1.8s; }
.story-ic .wave2 { stroke-dasharray: 6 5; animation: cyc 6s linear infinite; }
.story-ic .script { animation: blink 3s infinite; } .story-ic .s1 { animation-delay: .4s; } .story-ic .s2 { animation-delay: .8s; } .story-ic .s3 { animation-delay: 1.2s; } .story-ic .s4 { animation-delay: 1.6s; }
.story-ic .fly { offset-path: path("M20 160Q100 20 182 120"); offset-rotate: auto; animation: fly 4s ease-in-out infinite; }
@keyframes fly { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.story-ic .planef, .story-ic .flagf, .story-ic .slice { fill: var(--accent); stroke: none; }
.story-ic .slice { opacity: .5; transform-box: view-box; transform-origin: 100px 100px; animation: spin 14s linear infinite; }
.story-ic .flagf { transform-box: fill-box; transform-origin: left; animation: wavef 1.6s ease-in-out infinite alternate; }
@keyframes wavef { to { transform: skewY(6deg) scaleX(.92); } }
.story-ic .updn { animation: blink 1.4s infinite; } .story-ic .u2 { animation-delay: .7s; }
.story-ic .ok2 { font-size: 15px; }
.story-ic .spin2 { transform-box: fill-box; transform-origin: center; animation: spin 10s linear infinite; }
.story-ic .arrow { animation: hit 2.4s cubic-bezier(.6,0,.2,1) infinite; }
@keyframes hit { 0% { transform: translate(40px, -40px); opacity: 0; } 30% { opacity: 1; } 50%, 85% { transform: none; opacity: 1; } 100% { opacity: 0; } }
.story-ic .lift { animation: lift 3s ease-in-out infinite; } @keyframes lift { 50% { transform: translateY(-10px); } }
.story-ic .flame { animation: blink .4s infinite; }
.story-ic .sparkle { animation: blink 1s infinite; }

.story-ic .bg { stroke-dasharray: 3 4; opacity: .5; }
.story-ic .cab { fill: var(--accent); stroke: none; }

/* site-wide reveal: a touch of blur and a clip wipe on big headings */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { filter: blur(6px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), filter .8s, clip-path 1.1s cubic-bezier(.65,0,.25,1); transition-delay: calc(var(--i, 0) * 80ms); }
  .js .rv.in { filter: none; }
  .js h2.rv { clip-path: inset(0 0 100% 0); }
  .js .gh.rv h3 { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s cubic-bezier(.65,0,.25,1) .1s; }
  .js h2.rv.in, .js .gh.rv.in h3 { clip-path: inset(0 0 -10% 0); }
}

.story-ic .tk1 { fill: var(--accent); stroke: none; font: 500 15px var(--text); letter-spacing: .14em; }
.story-ic .tk2 { fill: var(--accent); stroke: none; font: 500 8px var(--text); letter-spacing: .08em; }
.story-ic .tkt { transform-box: fill-box; transform-origin: center; animation: tilt 4s ease-in-out infinite alternate; }
@keyframes tilt { from { transform: rotate(-4deg); } to { transform: rotate(3deg); } }

/* company details for KYC: the stamp (real XEPA wordmark) beside a clean register of the legal data */
.kyc { padding-block: 120px 150px; }
.kyc-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.kyc-seal { display: grid; place-items: center; }
.kyc .stamp { width: min(100%, 280px); height: auto; opacity: 1; transform: rotate(-8deg); }
.kyc-seal.in .stamp { animation: stampin .7s .35s cubic-bezier(.2,.7,.2,1) both; }
.kyc h2 { font: 400 var(--step-head)/1.02 var(--display); letter-spacing: -.02em; }
.kyc-lead { color: var(--muted); margin-top: 14px; max-width: 46ch; }
.kyc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin: 36px 0 0; }
.kyc-row { padding: 18px 0; border-top: 1px solid #262626; } /* taste-skill-ignore: register rows */
.kyc-row dt { font-size: var(--step-small); color: #8a8a8a; letter-spacing: .02em; }
.kyc-row dd { margin: 6px 0 0; font-size: var(--step-body); color: #fff; font-variant-numeric: tabular-nums; line-height: 1.45; }
.kyc-row dd a { color: var(--accent); text-decoration: none; }
.kyc-row:nth-child(4) dd { font: 500 clamp(1.6rem, 1rem + 1.6vw, 2.4rem)/1 var(--display); color: var(--accent); letter-spacing: .02em; }
.kyc-row:nth-child(1) dd { font-weight: 500; }
@media (max-width: 900px) { .kyc-in { grid-template-columns: 1fr; } .kyc .stamp { width: 200px; } .kyc-grid { grid-template-columns: 1fr; } }

/* nav layout */
.nav { gap: 24px; }
.nav ul { margin-left: auto; }
[dir="rtl"] .nav ul { margin-left: 0; margin-right: auto; }
/* language dropdown: a quiet pill; the menu drops down with a short rise, the current language carries a lime tick */
.lang { position: relative; font-size: var(--step-small); }
.lang summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 14px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); color: var(--ink); transition: box-shadow .2s, background .2s; user-select: none; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.lang[open] summary { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.lang summary svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.lang[open] summary svg { transform: rotate(180deg); }
.lang ul { position: absolute; z-index: 20; top: calc(100% + 8px); inset-inline-end: 0; min-width: 190px; margin: 0; padding: 6px; border-radius: 14px;
  background: #1a1a1a; box-shadow: 0 0 0 1px #2c2c2c, 0 20px 40px -12px rgba(0,0,0,.6); animation: langdrop .28s cubic-bezier(.2,.7,.2,1); }
.lang.up ul { top: auto; bottom: calc(100% + 8px); animation-name: dropup; }
@keyframes langdrop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes dropup { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.lang li a { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 4px; padding: 10px 12px; border-radius: 10px; color: #d9d9d9; text-decoration: none; transition: background .15s, color .15s; }
.lang li a b { font-weight: 500; color: #8a8a8a; font-size: 12px; letter-spacing: .06em; }
.lang li a:hover, .lang li a:focus-visible { background: #262626; color: #fff; }
.lang li a[aria-current="page"] { color: #fff; }
.lang li a[aria-current="page"]::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.light .lang summary, .foot .lang summary, .lg-top .lang summary { color: var(--paper-ink); box-shadow: inset 0 0 0 1px rgba(15,15,15,.2); }
.foot .lang[open] summary { box-shadow: inset 0 0 0 1px var(--paper-ink); }
/* footer is paper: the picker goes light too, never black on black */
.light .lang ul, .foot .lang ul, .lg-top .lang ul { background: #fff; box-shadow: 0 0 0 1px rgba(15,15,15,.12), 0 20px 40px -12px rgba(15,15,15,.25); }
.light .lang li a, .foot .lang li a, .lg-top .lang li a { color: var(--paper-ink); }
.light .lang li a b, .foot .lang li a b, .lg-top .lang li a b { color: var(--paper-muted); }
.light .lang li a:hover, .light .lang li a:focus-visible, .foot .lang li a:hover, .foot .lang li a:focus-visible { background: rgba(15,15,15,.06); color: var(--paper-ink); }
.light .lang li a[aria-current="page"], .foot .lang li a[aria-current="page"], .lg-top .lang li a[aria-current="page"] { color: var(--paper-ink); }
.light .lang li a[aria-current="page"]::after, .foot .lang li a[aria-current="page"]::after, .lg-top .lang li a[aria-current="page"]::after { background: var(--paper-ink); }
@media (prefers-reduced-motion: reduce) { .lang ul { animation: none; } }
.nav .lang ul { display: block; margin: 0; font-size: var(--step-small); }
.nav .lang ul li { display: block !important; }
/* base.css has a mockup class also called .lang (proposal) — neutralise it inside the picker */
details.lang span { font-size: inherit; padding: 0; border-radius: 0; background: none; color: inherit; }
details.lang { display: block; background: none; padding: 0; border-radius: 0; }

/* nav wordmark: the real X symbol + EPA in the text sans */
.nav .wm { display: inline-flex; align-items: center; gap: .08em; }
.nav .wm .xsym { height: .78em; width: auto; margin-right: .06em; }
.mk.mk-brands { height: auto; min-height: 270px; gap: 4px; } .mk-brands .ln { padding: 4px 0; }

/* slim company band on the home page: stamp, legal name, four facts in one row */
.kyc { padding-block: 90px 110px; }
.kyc .stamp { width: min(100%, 210px); }
.kyc h2 { font-size: clamp(1.6rem, 1rem + 1.8vw, 2.6rem); }
.kyc-slim { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); margin-top: 28px; }
.kyc-slim .kyc-row dd { font-size: var(--step-lead); }
.kyc-slim .kyc-row:nth-child(2) dd { font: 500 clamp(1.8rem, 1rem + 2vw, 3rem)/1 var(--display); color: var(--accent); }
.kyc-slim .kyc-row:nth-child(4) dd { font: inherit; color: #fff; }
@media (max-width: 640px) { .kyc-slim { grid-template-columns: 1fr; } }

/* sticky floating menu: a dark glass pill that follows the page, tightens after the hero,
   a lime marker slides under the section you are reading, the call to action appears once you scroll */
.hero { padding-top: 104px; }
.nav { position: fixed; z-index: 40; top: 16px; left: 50%; transform: translateX(-50%); width: min(1180px, calc(100% - 2 * var(--m)));
  padding: 8px 8px 8px 20px; border-radius: 999px; background: rgba(15,15,15,.42); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); transition: top .4s cubic-bezier(.2,.7,.2,1), background .4s, box-shadow .4s, padding .4s; }
.nav.scrolled { top: 10px; background: rgba(15,15,15,.82); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 18px 40px -18px rgba(0,0,0,.7); }
.nav .navl { position: relative; display: flex; gap: 4px; margin-left: auto; padding: 0; }
.nav .navl a { position: relative; z-index: 1; display: block; padding: 8px 14px; border-radius: 999px; color: var(--muted); text-decoration: none; transition: color .25s; }
.nav .navl a:hover, .nav .navl a.on { color: #fff; }
.nav-ind { position: absolute; z-index: 0; bottom: 3px; height: 1px; left: 0; width: 0; background: var(--accent);
  opacity: 0; transition: transform .5s cubic-bezier(.2,.7,.2,1), width .5s cubic-bezier(.2,.7,.2,1), opacity .3s; }
.nav-cta { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-size: var(--step-small); font-weight: 500;
  max-width: 0; padding-inline: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .5s cubic-bezier(.2,.7,.2,1), padding .5s cubic-bezier(.2,.7,.2,1), opacity .3s; }
.nav.scrolled .nav-cta { max-width: 220px; padding-inline: 16px; opacity: 1; }
.nav-cta:hover { background: #c9f27a; }
[dir="rtl"] .nav .navl { margin-left: 0; margin-right: auto; }
@media (max-width: 720px) { .nav { padding-left: 16px; } .nav .navl { display: none; } .nav.scrolled .nav-cta { max-width: 160px; } }
@media (prefers-reduced-motion: reduce) { .nav, .nav-ind, .nav-cta { transition: none; } }
.hero { grid-template-rows: 1fr auto; }

/* nav wordmark: XEPA set in the display serif, like the giant footer mark */
.nav .wm { font: 500 24px/1 var(--display); letter-spacing: .04em; text-transform: none; }
.nav .wm .xsym { display: none; }

/* split menu: sections on the left, the wordmark in the centre, language and call to action on the right */
.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 8px 8px 8px 10px; }
.nav .navl { margin: 0; justify-self: start; }
.nav .wm { justify-self: center; font-size: 26px; letter-spacing: .06em; }
.nav-r { justify-self: end; display: flex; align-items: center; gap: 8px; }
[dir="rtl"] .nav .navl { margin: 0; }
@media (max-width: 720px) { .nav { grid-template-columns: 1fr auto 1fr; padding-left: 8px; } .nav .navl { display: block; visibility: hidden; } }
.nav.scrolled { background: rgba(15,15,15,.92); }

/* the menu hides while you read down the page and slides back as soon as you scroll up */
.nav { transition: top .4s cubic-bezier(.2,.7,.2,1), background .4s, box-shadow .4s, padding .4s, transform .45s cubic-bezier(.2,.7,.2,1); }
.nav.away { transform: translate(-50%, calc(-100% - 24px)); }

/* one shape for every button: pill, like the nav */
.btn { border-radius: 999px; }

/* ===== what we do, chapter 1: software that is yours. A pinned stage on one side plays one scene per chapter;
   the lime dot in every scene is the client. Without JS the chapters read as a list next to the first scene. ===== */
.kick { font-size: var(--step-small); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.light .kick { color: var(--paper-muted); }
.own { padding-block: clamp(110px, 18vh, 200px) clamp(60px, 10vh, 120px); }
.own-head, .brx-head, .arr-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; row-gap: 18px; align-items: end; }
.own-head .kick, .brx-head .kick, .arr-head .kick { grid-column: 1 / -1; }
.own-head h2, .brx-head h2, .arr-head h2 { grid-column: 1 / 8; font: 400 clamp(2.6rem, 1.2rem + 5.4vw, 6.5rem)/.95 var(--display); letter-spacing: -.03em; }
.own-lead, .brx-lead, .arr-lead { grid-column: 8 / 13; font-size: var(--step-lead); line-height: 1.35; color: var(--muted); }
.own-body { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(32px, 6vw, 110px); margin-top: clamp(48px, 8vh, 96px); }
.own-stage { position: sticky; top: 9vh; height: 82vh; display: grid; place-items: center; }
.own-stage svg { direction: ltr; grid-area: 1 / 1; width: min(100%, 76vh); height: auto; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.own-n { grid-area: 1 / 1; align-self: start; justify-self: start; font: 400 clamp(5rem, 2rem + 9vw, 11rem)/1 var(--display); color: transparent; -webkit-text-stroke: 1px #333; transition: opacity .4s; }
.own-chs { position: relative; padding-inline-start: 34px; }
.own-chs::before, .own-chs::after { content: ""; position: absolute; inset-inline-start: 0; top: 0; width: 1px; height: 100%; background: #262626; }
.own-chs::after { background: var(--accent); height: calc(var(--p, 0) * 100%); }
.och { min-height: 82vh; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding-block: 40px; }
.och-n { font-size: var(--step-small); letter-spacing: .14em; color: var(--accent); }
.och h3 { font: 400 clamp(2rem, 1.2rem + 2.6vw, 3.6rem)/1 var(--display); letter-spacing: -.02em; }
.och p { color: #cfcfcf; max-width: 46ch; line-height: 1.6; }
.och ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.och ul li { font-size: var(--step-small); padding: 6px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px #333; color: #d9d9d9; }
.js .och { opacity: .55; transition: opacity .6s; }
.js .och.on { opacity: 1; }
.js .och.on ul li { box-shadow: inset 0 0 0 1px rgba(218,250,156,.5); }

/* scenes */
.os { opacity: 0; transform: scale(.94); transition: opacity .7s, transform 1s cubic-bezier(.2,.7,.2,1); }
.os.on { opacity: 1; transform: none; }
.os .dr { stroke: rgba(255,255,255,.75); stroke-dasharray: 900; stroke-dashoffset: 900; }
.os.on .dr { animation: odraw 2.2s cubic-bezier(.65,0,.25,1) forwards; }
@keyframes odraw { to { stroke-dashoffset: 0; } }
.os .you { fill: var(--accent); stroke: none; }
.os .halo { fill: none; stroke: var(--accent); transform-box: fill-box; transform-origin: center; animation: halo 2.2s ease-out infinite; }
@keyframes halo { from { transform: scale(1); opacity: .9; } to { transform: scale(4); opacity: 0; } }
.os .tx, .os .geo, .os .zz { fill: #9a9a9a; stroke: none; font: 500 13px var(--text); letter-spacing: .08em; }
/* 1 code -> key */
.os .cl { fill: #fff; stroke: none; opacity: .3; transform-box: fill-box; transform-origin: left; transform: scaleX(0); }
[dir="rtl"] .os .cl { transform-origin: right; }
.os.on .cl { animation: ostype .5s calc(var(--k) * 90ms) cubic-bezier(.2,.7,.2,1) forwards, dim .8s 1.6s forwards; }
@keyframes ostype { to { transform: scaleX(1); } }
@keyframes dim { to { opacity: .1; } }
.os .key .dr { stroke: #fff; stroke-width: 2.4; }
.os.on .key .dr { animation-delay: 1.2s; }
/* 2 rented boxes fall away, the owned tower rises */
.os .rent { animation: none; }
.os.on .rent { animation: rentoff 6s calc(var(--k) * .5s) infinite; }
@keyframes rentoff { 0%, 30% { opacity: 1; } 55%, 85% { opacity: .15; } 100% { opacity: 1; } }
.os .cut { stroke: var(--accent); stroke-dasharray: 120; stroke-dashoffset: 120; }
.os.on .cut { animation: cut 6s calc(var(--k) * .5s) infinite; }
@keyframes cut { 0%, 25% { stroke-dashoffset: 120; } 40%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 120; } }
.os .slab { opacity: 0; transform: translateY(18px); }
.os.on .slab { animation: slab 6s calc(.4s + var(--k) * .45s) infinite; }
.os .slab .dr { stroke-dashoffset: 0; animation: none !important; }
@keyframes slab { 0% { opacity: 0; transform: translateY(18px); } 10%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.os .top { opacity: 0; } .os.on .top { animation: topin 6s 3s infinite; }
@keyframes topin { 0% { opacity: 0; } 8%, 60% { opacity: 1; } 75%, 100% { opacity: 0; } }
/* 3 UAE hub: the skyline draws, the sun crosses, links reach three continents */
.os .bg { stroke: rgba(255,255,255,.25); }
.os .wave2 { stroke: rgba(255,255,255,.35); }
.os .win { fill: #fff; stroke: none; opacity: .5; }
.os .tip { fill: var(--accent); stroke: none; }
.os .arc { stroke: rgba(255,255,255,.2); stroke-dasharray: 3 7; }
.os .sun { fill: #fff; stroke: none; opacity: .8; }
.os .link { stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 600; stroke-dashoffset: 600; opacity: .8; }
.os.on .link { animation: odraw 1.6s calc(1.4s + var(--k) * .25s) cubic-bezier(.65,0,.25,1) forwards; }
.os .geo { fill: #d9d9d9; }
/* 4 the globe turns, packets travel from the client to every city */
.os .mer { stroke: rgba(255,255,255,.28); transform-box: fill-box; transform-origin: center; animation: mer2 7s linear infinite; }
.os .m1 { animation-delay: -2.3s; } .os .m2 { animation-delay: -4.6s; }
@keyframes mer2 { 0% { transform: scaleX(1); } 50% { transform: scaleX(.05); } 100% { transform: scaleX(1); } }
.os .par { stroke: rgba(255,255,255,.18); }
.os .city { fill: #fff; stroke: none; opacity: .85; }
.os .pkt { fill: var(--accent); stroke: none; }
/* 5 a node goes down, traffic reroutes, the client sleeps */
.os .spoke { stroke: rgba(255,255,255,.35); }
.os .node { fill: var(--bg); stroke: #fff; }
.os.on .spoke.down, .os.on .node.down { animation: down 6s infinite; }
@keyframes down { 0%, 30% { stroke: #fff; opacity: 1; } 40%, 80% { stroke: #444; opacity: .5; } 100% { stroke: #fff; opacity: 1; } }
.os .xmark { stroke: #ff6b5e; opacity: 0; }
.os.on .xmark { animation: xm 6s infinite; }
@keyframes xm { 0%, 34% { opacity: 0; } 40%, 78% { opacity: 1; } 84%, 100% { opacity: 0; } }
.os .reroute { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 300; stroke-dashoffset: 300; }
.os.on .reroute { animation: rr 6s infinite; }
@keyframes rr { 0%, 40% { stroke-dashoffset: 300; } 50%, 80% { stroke-dashoffset: 0; } 90%, 100% { stroke-dashoffset: -300; } }
.os .moon { fill: rgba(255,255,255,.85); stroke: none; }
.os .zz { font-size: 18px; fill: #bdbdbd; animation: zz 3s infinite; } .os .z2 { animation-delay: 1.5s; }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 6px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-10px, -14px); } }

@media (max-width: 900px) {
  .own-head h2, .own-lead, .brx-head h2, .brx-lead, .arr-head h2, .arr-lead { grid-column: 1 / -1; }
  .own-body { grid-template-columns: 1fr; }
  .own-stage { top: 64px; height: 40vh; z-index: 1; background: var(--bg); }
  .own-stage svg { width: auto; height: 100%; }
  .own-n { font-size: 4rem; }
  .och { min-height: 64vh; }
}
@media (prefers-reduced-motion: reduce) {
  .os *, .os.on * { animation: none !important; }
  .os .dr, .os .link, .os .cut { stroke-dashoffset: 0; }
  .os .cl { transform: none; } .os .slab, .os .top { opacity: 1; transform: none; }
}

/* ===== chapter 2: the XEPA brands, an editorial index. The row crossing the middle of the screen
   lights up: name in ink with a lime marker stroke, its icon draws. ===== */
.brx { padding-block: clamp(110px, 18vh, 200px); }
.brx-list { margin-top: clamp(48px, 8vh, 96px); border-bottom: 1px solid rgba(15,15,15,.85); }
.br { display: grid; grid-template-columns: 64px minmax(0, 6fr) minmax(0, 4fr) 64px; column-gap: clamp(16px, 2.4vw, 40px); align-items: center; padding-block: clamp(22px, 3.4vh, 40px); border-top: 1px solid rgba(15,15,15,.85); }
.br-n { font-size: var(--step-small); letter-spacing: .14em; color: var(--paper-muted); }
.br-name { font: 400 clamp(2.4rem, 1rem + 5vw, 6rem)/1 var(--display); letter-spacing: -.03em; }
[dir="rtl"] .br-name { text-align: right; }
.br-name span { padding-inline: .04em; background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 88% / 0% .34em; transition: background-size .9s cubic-bezier(.2,.7,.2,1), color .5s; }
[dir="rtl"] .br-name span { background-position: 100% 88%; }
.br-cat { font-size: var(--step-small); letter-spacing: .1em; text-transform: uppercase; color: var(--paper-muted); margin-bottom: 8px; }
.br-txt p:last-child { line-height: 1.5; }
.br-ic { width: 56px; height: 56px; fill: none; stroke: var(--paper-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; justify-self: end; }
.br-ic .w { stroke: var(--paper-ink); }
.js .br .br-name span { color: #c4c4c4; }
.js .br .br-txt { opacity: .35; transition: opacity .5s; }
.js .br .br-ic * { stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 1.2s cubic-bezier(.65,0,.25,1); }
.js .br.on .br-name span { color: var(--paper-ink); background-size: 100% .34em; }
.js .br.on .br-txt { opacity: 1; }
.js .br.on .br-ic * { stroke-dashoffset: 0; }
.js .br.on .br-ic .w { transition-delay: .5s; }
@media (hover: hover) { .js .br:hover .br-name span { color: var(--paper-ink); } }
@media (max-width: 900px) {
  .br { grid-template-columns: 40px minmax(0, 1fr) 40px; row-gap: 12px; }
  .br-txt { grid-column: 2 / 4; }
  .br-ic { width: 36px; height: 36px; grid-row: 1; grid-column: 3; }
}
@media (prefers-reduced-motion: reduce) { .js .br .br-name span, .js .br .br-txt, .js .br .br-ic * { transition: none; } }

/* ===== chapter 3: customers who arrive. A crowd of strangers flows through four gates and walks
   through a door, turning lime: the TOP Social road, drawn live on a canvas. ===== */
.arr { padding-block: clamp(110px, 18vh, 200px); overflow: hidden; }
.arr-flow { position: relative; margin-top: clamp(40px, 7vh, 80px); }
.arr-cv { display: block; width: 100%; height: clamp(260px, 38vw, 520px); }
.arr-gates li { position: absolute; top: 0; inset-inline-start: var(--x); transform: translateX(-50%); font-size: var(--step-small); color: #d9d9d9; white-space: nowrap; display: grid; justify-items: center; gap: 2px; }
[dir="rtl"] .arr-gates li { transform: translateX(50%); }
.arr-gates b { font-weight: 500; color: var(--accent); letter-spacing: .14em; font-size: 11px; }
.arr-gates .door { top: calc(52% + 40px); color: var(--accent); font: 500 var(--step-body)/1 var(--display); font-style: italic; }
.arr-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin-top: clamp(40px, 6vh, 72px); }
.arr-steps li { border-top: 1px solid #333; padding-top: 22px; display: grid; gap: 10px; align-content: start; }
.arr-steps span { font-size: var(--step-small); letter-spacing: .14em; color: var(--accent); }
.arr-steps h3 { font: 400 clamp(1.6rem, 1rem + 1.6vw, 2.4rem)/1 var(--display); }
.arr-steps p { color: #bdbdbd; line-height: 1.55; }
.arr-end { margin-top: clamp(56px, 9vh, 110px); font-size: var(--step-lead); color: #cfcfcf; max-width: 40ch; }
.arr-end b { display: block; font: 400 clamp(3rem, 1.4rem + 6vw, 7.5rem)/1 var(--display); font-style: italic; color: var(--accent); letter-spacing: -.02em; margin-bottom: 14px; }
@media (max-width: 900px) {
  .arr-steps { grid-template-columns: 1fr 1fr; }
  .arr-gates li:not(.door) { font-size: 0; } .arr-gates li:not(.door) b { font-size: 11px; }
}
@media (max-width: 520px) { .arr-steps { grid-template-columns: 1fr; } }

/* ===== suite: one live preview per product ===== */
.pv { display: grid; gap: 12px; font-size: 14px; }
.pv .k { color: #9a9a9a; font-size: 12.5px; }
.pv svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pv .ln0 { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
/* bookings: the week fills up, a new booking lands in lime, the client card below */
.cal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 14px; background: #202020; border-radius: 8px; }
.cal .dh { font-size: 11px; color: #9a9a9a; text-align: center; padding-bottom: 2px; }
.cal i { height: 22px; border-radius: 4px; background: #2a2a2a; }
.cal i.b { background: #3d3d3d; }
.pane.on .cal i.b { animation: book .5s calc(var(--k) * 120ms) both cubic-bezier(.2,.7,.2,1); }
@keyframes book { from { transform: scale(.6); opacity: 0; } }
.cal i.nw { background: var(--accent); animation: newb 3.2s 1.6s infinite both; }
@keyframes newb { 0% { transform: scale(.4); opacity: 0; } 12%, 80% { transform: none; opacity: 1; box-shadow: 0 0 0 4px rgba(218,250,156,.18); } 100% { opacity: 1; } }
.crm { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; background: #202020; border-radius: 8px; }
.crm .av { width: 40px; height: 40px; border-radius: 50%; background: #2f2f2f; display: grid; place-items: center; font-size: 13px; color: #d9d9d9; }
.crm b { display: block; font-weight: 500; }
/* video: the film plays, chapters light up one after another */
.scr { position: relative; aspect-ratio: 16 / 7; border-radius: 8px; overflow: hidden; background: radial-gradient(120% 140% at 70% 20%, #3a3a3a, #161616 60%); }
.scr::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(218,250,156,.12) 50%, transparent 70%); animation: vsheen 4s infinite; } /* own name: base.css already has a 'sheen' for the CTA button */
@keyframes vsheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.scr .badge { position: absolute; top: 10px; inset-inline-end: 10px; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.5); color: #fff; z-index: 1; }
.scr .play, .lesson .play { position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; border-radius: 50%; background: var(--accent); z-index: 1; }
.scr .play::after, .lesson .play::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-left: 13px solid var(--accent-ink); border-block: 8px solid transparent; translate: 2px 0; }
.prog { position: absolute; inset-inline: 12px; bottom: 10px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.2); z-index: 1; }
.prog i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 3px; background: var(--accent); width: 0; }
.pane.on .prog i { animation: playb 8s linear infinite; }
@keyframes playb { to { width: 100%; } }
.chs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.chs span { font-size: 12px; padding: 6px 8px; border-radius: 6px; background: #202020; color: #9a9a9a; }
.pane.on .chs span { animation: chap 8s calc(var(--k) * 2s) infinite; }
@keyframes chap { 0%, 24% { background: #2f3a22; color: var(--accent); } 25%, 100% { background: #202020; color: #9a9a9a; } }
/* email: the campaign leaves, opens and clicks climb */
.env { position: relative; display: grid; gap: 6px; padding: 14px; background: #202020; border-radius: 8px; }
.env b { font-weight: 500; font-size: 15px; }
.env .lines { display: grid; gap: 6px; margin-top: 4px; } .env .lines i { height: 6px; border-radius: 3px; background: #2e2e2e; } .env .lines i:nth-child(2) { width: 82%; } .env .lines i:nth-child(3) { width: 60%; }
.env .sent { position: absolute; top: 12px; inset-inline-end: 12px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.pane.on .env { animation: fly 4.5s infinite; }
.pane.on .env .sent { animation: pop2 4.5s infinite; }
@keyframes fly { 0%, 20% { transform: none; } 30% { transform: translateY(-6px) rotate(-1deg); } 40%, 100% { transform: none; } }
@keyframes pop2 { 0%, 30% { transform: scale(0); } 38%, 100% { transform: scale(1); } }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stats > div { display: grid; gap: 4px; padding: 12px 14px; background: #202020; border-radius: 8px; }
.stats b { font: 500 26px/1 var(--display); }
.pv .bar { display: block; height: 5px; border-radius: 3px; background: #2e2e2e; overflow: hidden; }
.stats .bar i { display: block; height: 100%; width: var(--w); background: var(--accent); border-radius: 3px; transform-origin: left; }
[dir="rtl"] .stats .bar i { transform-origin: right; }
.pane.on .stats .bar i { animation: fill 4.5s calc(1.6s + var(--k) * .3s) infinite both; }
@keyframes fill { 0% { transform: scaleX(0); } 40%, 100% { transform: scaleX(1); } }
/* Core AI: it thinks, answers with an insight and proposes the next step */
.pv-core .ask { justify-self: end; background: #262626; padding: 10px 14px; border-radius: 12px 12px 4px 12px; }
[dir="rtl"] .pv-core .ask { justify-self: start; border-radius: 12px 12px 12px 4px; }
.pv-core .ai { justify-self: start; display: grid; max-width: 88%; }
.pv-core .ai > * { grid-area: 1 / 1; }
.pane.on .pv-core .typing { animation: hide 6s infinite; }
.pv-core .txt { opacity: 0; }
.pane.on .pv-core .txt { animation: show 6s infinite; }
@keyframes hide { 0%, 25% { opacity: 1; } 28%, 100% { opacity: 0; } }
@keyframes show { 0%, 27% { opacity: 0; } 32%, 100% { opacity: 1; } }
.pv-core .acts { display: flex; gap: 8px; opacity: 0; }
.pane.on .pv-core .acts { animation: show2 6s infinite; }
@keyframes show2 { 0%, 45% { opacity: 0; transform: translateY(6px); } 52%, 100% { opacity: 1; transform: none; } }
/* Off Record: four people, the speaker ring moves, the clock runs, the lock stays on */
.mtiles { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mtiles span { aspect-ratio: 16 / 6; border-radius: 8px; background: #232323; display: grid; place-items: center; font: 500 20px var(--display); color: #bdbdbd; }
.pane.on .mtiles span { animation: speak 8s calc(var(--s, 0) * 2s) infinite; }
.mtiles .t1 { --s: 1; } .mtiles .t2 { --s: 2; } .mtiles .t3 { --s: 3; }
@keyframes speak { 0%, 22% { box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent); } 25%, 100% { box-shadow: none; } }
.mtiles .clock { position: absolute; top: 8px; inset-inline-start: 8px; width: max-content; height: max-content; aspect-ratio: auto; padding: 3px 10px; border-radius: 999px; background: #0f0f0f; font: 500 12px var(--text); color: #fff; animation: none !important; }
.e2e { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: 13px; }
/* Hidden Library: the lesson plays, modules complete one by one */
.lesson { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; padding: 12px; background: #202020; border-radius: 8px; }
.lesson .play { position: relative; inset: auto; margin: 0; width: 56px; height: 56px; border-radius: 10px; }
.lesson b { display: block; font: 500 20px/1.1 var(--display); }
.mods { display: grid; gap: 6px; }
.mods li { display: grid; grid-template-columns: 22px 1fr 34%; gap: 10px; align-items: center; padding: 8px 12px; background: #202020; border-radius: 8px; font-size: 13.5px; }
.mods .ck { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px #3a3a3a; color: transparent; }
.mods .bar i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
[dir="rtl"] .mods .bar i { transform-origin: right; }
.pane.on .mods .bar i { animation: mod 8s calc(var(--k) * 1.6s) infinite both; }
.pane.on .mods .ck { animation: ck 8s calc(var(--k) * 1.6s) infinite both; }
@keyframes mod { 0% { transform: scaleX(0); } 18%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes ck { 0%, 17% { background: none; color: transparent; } 20%, 92% { background: var(--accent); color: var(--accent-ink); box-shadow: none; } 100% { background: none; } }
@media (prefers-reduced-motion: reduce) { .pv *, .pv { animation: none !important; } .pv-core .txt, .pv-core .acts { opacity: 1; } .pv-core .typing { opacity: 0; } }

/* ===== infrastructure: a real headline, the guarantee up front ===== */
.guar { padding-block: clamp(110px, 18vh, 200px) 160px; }
.guar-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; row-gap: 18px; align-items: end; }
.guar-head .kick { grid-column: 1 / -1; }
.guar-head h2 { grid-column: 1 / 8; margin: 0; font: 400 clamp(2.6rem, 1.2rem + 5.4vw, 6.5rem)/.95 var(--display); letter-spacing: -.03em; }
.guar-lead { grid-column: 8 / 13; font-size: var(--step-lead); line-height: 1.35; color: var(--paper-muted); }
@media (max-width: 900px) { .guar-head h2, .guar-lead { grid-column: 1 / -1; } }

/* ===== closing marquee: soft paper grey between the white infrastructure and the lime call to action; every other word in outline ===== */
.band { background: var(--paper-2); color: var(--paper-ink); border-top: 1px solid rgba(15,15,15,.08); }
.band .track-x span::after { background: var(--paper-ink); width: .14em; height: .14em; }
.band .track-x span:nth-child(even) { font-style: italic; color: transparent; -webkit-text-stroke: 1.5px var(--paper-ink); }

/* ===== guarantees band: letters rise one by one out of a blur, the lime badge spins in, then everything leaves upward ===== */
.js .tk { transition: opacity .3s; filter: none; transform: none; }
.js .tk .ch { display: inline-block; opacity: 0; transform: translateY(.6em) rotateX(-80deg); filter: blur(8px); transform-origin: 50% 100%; transition: opacity .5s, transform .8s cubic-bezier(.2,.8,.2,1), filter .5s; transition-delay: calc(var(--c) * 28ms); }
.js .tk.on .ch { opacity: 1; transform: none; filter: none; }
.js .tk.out { opacity: 1; transform: none; filter: none; }
.js .tk.out .ch { opacity: 0; transform: translateY(-.5em) rotateX(70deg); filter: blur(8px); transition-duration: .35s, .5s, .35s; transition-delay: calc(var(--c) * 14ms); }
.js .tk .ic { transform: scale(0) rotate(-120deg); transition: transform .8s cubic-bezier(.3,1.4,.4,1); }
.js .tk.on .ic { transform: none; }
.js .tk.out .ic { transform: scale(0) rotate(120deg); transition-duration: .4s; }
.js .tk.on .ic::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(218,250,156,.6); animation: ring 1.4s .4s ease-out; }
.tk .ic { position: relative; }
@keyframes ring { to { box-shadow: 0 0 0 22px rgba(218,250,156,0); } }
@media (prefers-reduced-motion: reduce) { .js .tk .ch, .js .tk .ic { transition: none; } }
.scr { background: radial-gradient(circle at 72% 38%, rgba(218,250,156,.55) 0 6%, rgba(218,250,156,.12) 7%, transparent 22%), linear-gradient(#262626, #141414); }
.scr::before { content: ""; position: absolute; inset: 0; background: #0d0d0d; clip-path: polygon(0 78%, 14% 64%, 26% 72%, 42% 52%, 58% 68%, 70% 58%, 84% 70%, 100% 60%, 100% 100%, 0 100%); }
.pane.on .scr::before { animation: pan 8s linear infinite alternate; }
@keyframes pan { to { transform: scale(1.08) translateX(-3%); } }
.ins { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-items: end; height: 150px; padding: 14px 14px 8px; background: #202020; border-radius: 8px; }
.ins span { display: grid; grid-template-rows: 1fr auto; gap: 6px; height: 100%; align-items: end; }
.ins i { display: block; height: var(--h); border-radius: 4px 4px 0 0; background: #3a3a3a; transform-origin: bottom; }
.ins i.hi { background: var(--accent); }
.pane.on .ins i { animation: barup2 6s infinite both; }
@keyframes barup2 { 0% { transform: scaleY(0); } 15%, 100% { transform: scaleY(1); } }
.pane.on .ins i.hi { animation: barup2 6s infinite both, higlow 6s infinite; }
@keyframes higlow { 0%, 27% { box-shadow: none; } 32%, 100% { box-shadow: 0 0 0 4px rgba(218,250,156,.2); } }
.ins em { font-style: normal; font-size: 11px; color: #9a9a9a; text-align: center; }

/* ===== suite apps: app-style cards are the tabs; the active one lights up, its icon plays, a lime bar counts to the next ===== */
.show .side { justify-content: center; }
.apps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.apps .app { all: unset; box-sizing: border-box; cursor: pointer; position: relative; overflow: hidden; display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: start; padding: 16px; border-radius: 16px; background: var(--paper);
  box-shadow: 0 0 0 1px rgba(15,15,15,.06); transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .3s, background .3s; }
.apps .app:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(15,15,15,.14), 0 14px 30px -18px rgba(15,15,15,.35); }
.apps .app[aria-selected="true"] { background: #141414; color: #fff; box-shadow: 0 18px 40px -20px rgba(15,15,15,.6); }
.apps .app:focus-visible { outline: 2px solid var(--paper-ink); outline-offset: 3px; }
.app-ic { width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(145deg, #2a2a2a, #121212); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 14px -6px rgba(0,0,0,.5); transition: transform .5s cubic-bezier(.3,1.4,.4,1); }
.app[aria-selected="true"] .app-ic { transform: rotate(-6deg) scale(1.06); background: linear-gradient(145deg, #e9ffbf, var(--accent) 55%, #b9e86a); }
.app-ic svg { width: 34px; height: 34px; fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.app[aria-selected="true"] .app-ic svg { stroke: #18240a; }
.app-t { display: grid; gap: 4px; }
.app-t b { font: 500 var(--step-lead)/1.05 var(--display); letter-spacing: -.01em; }
.app-t span { font-size: 13px; line-height: 1.4; color: var(--paper-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.app[aria-selected="true"] .app-t span { color: #bdbdbd; }
.app-bar { position: absolute; inset-inline: 0; bottom: 0; height: 3px; }
.app-bar i { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
[dir="rtl"] .app-bar i { transform-origin: right; }
.apps:not(.manual) .app[aria-selected="true"] .app-bar i { animation: appbar 6s linear forwards; }
@keyframes appbar { to { transform: scaleX(1); } }
/* each icon plays its own gesture while its card is active or hovered */
.app .a-ck { stroke-dasharray: 30; stroke-dashoffset: 30; }
.app[aria-selected="true"] .a-ck, .app:hover .a-ck { animation: adraw .6s .2s forwards; }
@keyframes adraw { to { stroke-dashoffset: 0; } }
.app[aria-selected="true"] .a-pl, .app:hover .a-pl { animation: apulse 1.2s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes apulse { 50% { transform: scale(1.18); } }
.app .a-pg { stroke-dasharray: 44; stroke-dashoffset: 44; }
.app[aria-selected="true"] .a-pg, .app:hover .a-pg { animation: aprog 3s linear infinite; }
@keyframes aprog { to { stroke-dashoffset: 0; } }
.app .a-dt { fill: currentColor; stroke: none; opacity: 0; color: var(--accent); }
.app[aria-selected="true"] .a-dt { color: #18240a; }
.app[aria-selected="true"] .a-dt, .app:hover .a-dt { animation: adot 1.6s infinite; }
@keyframes adot { 0% { opacity: 0; transform: scale(0); } 30%, 100% { opacity: 1; transform: none; } }
.app .a-dt { transform-box: fill-box; transform-origin: center; }
.app[aria-selected="true"] .a-fl, .app:hover .a-fl { animation: aflap 1.6s infinite; transform-box: fill-box; transform-origin: top; }
@keyframes aflap { 0%, 100% { transform: none; } 40% { transform: scaleY(-.6); } }
.app[aria-selected="true"] .a-st, .app:hover .a-st { animation: aspin 3s cubic-bezier(.6,0,.4,1) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes aspin { 50% { transform: rotate(90deg) scale(.86); } 100% { transform: rotate(180deg); } }
.app .a-o1, .app .a-o2 { fill: currentColor; stroke: none; color: var(--accent); }
.app[aria-selected="true"] .a-o1, .app[aria-selected="true"] .a-o2 { color: #18240a; animation: blink 1.2s infinite; } .app .a-o2 { animation-delay: .6s !important; }
.app .a-sh { transform-box: fill-box; transform-origin: bottom; }
.app[aria-selected="true"] .a-sh, .app:hover .a-sh { animation: ashut 2s infinite; }
@keyframes ashut { 0%, 30% { transform: translateY(-3px); } 45%, 100% { transform: none; } }
.app[aria-selected="true"] .a-pg2, .app:hover .a-pg2 { animation: aflip 2.4s cubic-bezier(.6,0,.4,1) infinite; transform-box: view-box; transform-origin: 32px 32px; }
@keyframes aflip { 0%, 20% { transform: scaleX(1); } 60%, 100% { transform: scaleX(-1); } }
@media (max-width: 1100px) { .apps { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .apps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .apps { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .app *, .app-ic { animation: none !important; transition: none !important; } .app .a-ck, .app .a-pg { stroke-dashoffset: 0; } }
/* nightly copies: the 30 dots span the full card width, like every other row */
.nights { grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 6px; justify-items: center; }
.nights i { width: min(100%, 16px); }

/* customers who arrive continues the brands index on the same paper: TOP Social, brand 01, told in full */
.brx { padding-bottom: clamp(60px, 9vh, 100px); }
.arr.light { padding-top: clamp(40px, 6vh, 72px); }
.arr.light .kick { color: var(--paper-muted); }
.arr.light .arr-lead { color: var(--paper-muted); }
.arr.light .arr-gates li { color: var(--paper-ink); }
.arr.light .arr-gates b, .arr.light .arr-steps span { color: var(--paper-muted); }
.arr.light .arr-gates .door { color: var(--paper-ink); }
.arr.light .arr-steps li { border-top-color: rgba(15,15,15,.85); }
.arr.light .arr-steps p, .arr.light .arr-end { color: var(--paper-muted); }
.arr.light .arr-end b { color: var(--paper-ink); }
.arr.light .arr-end b { display: table; background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 86% / 100% .3em; }

/* brands + suite are one chapter: the header introduces the brands, the software ones follow right away as app cards */
.brx { padding-bottom: clamp(24px, 4vh, 48px); }
.show.suite-in { background: var(--paper); }
.show.suite-in .half { min-height: 0; }
.show.suite-in .portal { box-shadow: 0 30px 60px -30px rgba(15,15,15,.45); }
.show.suite-in h2 { font: 400 clamp(1.6rem, 1rem + 1.6vw, 2.4rem)/1.05 var(--display); }
.show.suite-in .app { background: var(--paper-2); box-shadow: none; }
.show.suite-in .app[aria-selected="true"] { background: #141414; }
/* footer picker sits on the edge of the giant XEPA: give it its own paper ground so it never reads ink on ink */
.foot .legal { position: relative; z-index: 2; }
.foot .lang summary { background: var(--paper); }
.foot .lang[open] summary { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
/* nav wordmark: small, airy, lime. Letters rise in on load, then a soft glint runs across them now and then */
.nav .wm { font: 400 18px/1 var(--display); letter-spacing: .32em; margin-inline-end: -.32em; color: var(--accent); }
.nav .wm span { display: inline-block; animation: wmin .9s calc(.2s + var(--k) * 90ms) cubic-bezier(.2,.8,.2,1) both, wmglint 7s calc(2s + var(--k) * 140ms) ease-in-out infinite; }
@keyframes wmin { from { opacity: 0; transform: translateY(.5em); filter: blur(4px); } }
@keyframes wmglint { 0%, 86%, 100% { opacity: 1; text-shadow: none; } 90% { opacity: .55; } 94% { opacity: 1; text-shadow: 0 0 12px rgba(218,250,156,.8); } }
.nav .wm:hover span { animation: wmhop .5s calc(var(--k) * 60ms) cubic-bezier(.2,.8,.2,1); }
@keyframes wmhop { 40% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .nav .wm span { animation: none !important; } }
/* the fifth step is the payoff: closed, in lime */
.arr-steps li:last-child { border-top-color: var(--accent); }
.arr-steps li:last-child h3 { color: var(--accent); font-style: italic; }
.arr-gates li:nth-child(5) { color: var(--accent); }
@media (max-width: 1100px) { .arr-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .arr-steps { grid-template-columns: 1fr; } }
/* Off Record: the benefits tick in one after another */
.ben { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ben li { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 8px; background: #202020; font-size: 13px; color: #d9d9d9; }
.ben svg { flex: none; width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: var(--accent); stroke: var(--accent-ink); }
.pane.on .ben li { animation: benin .5s calc(.4s + var(--k) * .18s) cubic-bezier(.2,.7,.2,1) both; }
@keyframes benin { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 520px) { .ben { grid-template-columns: 1fr; } }

/* brands + suite: a faint dot grid (fixed, so it runs seamless across both blocks) and a soft lime glow behind the live preview */
.brx, .show.suite-in { background-color: var(--paper); background-image: radial-gradient(rgba(15,15,15,.09) 1px, transparent 1.4px); background-size: 22px 22px; background-attachment: fixed; }
.show.suite-in .plate { position: relative; }
.show.suite-in .plate::before { content: ""; position: absolute; inset: 6% 4%; z-index: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(218,250,156,.55), rgba(218,250,156,0)); filter: blur(30px); animation: glowb 9s ease-in-out infinite alternate; pointer-events: none; }
.show.suite-in .portal { position: relative; z-index: 1; }
@keyframes glowb { to { transform: translate(4%, -3%) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .show.suite-in .plate::before { animation: none; } }

/* ===== guided brief: the contact form is the focus of the closing lime section. A dark card that talks:
   the assistant asks one thing at a time, answers appear as lime bubbles, chips and fields change per step. ===== */
.brief { position: relative; z-index: 1; width: 100%; max-width: 920px; margin-inline: auto; display: grid; grid-template-rows: auto auto 1fr auto; min-height: min(640px, 82svh);
  background: #0f0f0f; color: #fff; border-radius: 28px; box-shadow: 0 40px 80px -40px rgba(15,15,15,.6), 0 0 0 1px rgba(15,15,15,.9); overflow: hidden; }
.bf-top { display: flex; align-items: center; gap: 14px; padding: 20px 24px; border-bottom: 1px solid #222; }
.bf-top b { display: block; font: 500 var(--step-lead)/1.1 var(--display); }
.bf-top span { font-size: 13px; color: #9a9a9a; }
.bf-step { margin-inline-start: auto; font-size: 13px; color: var(--accent) !important; letter-spacing: .06em; }
.bf-av { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f2ffd6, var(--accent) 45%, #9ccc4a); box-shadow: 0 0 0 4px rgba(218,250,156,.12); }
.bf-av::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(218,250,156,.5); animation: halo 2.4s ease-out infinite; }
.bf-prog { height: 2px; background: #222; }
.bf-prog i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
[dir="rtl"] .bf-prog i { transform-origin: right; }
.bf-log { display: flex; flex-direction: column; gap: 10px; padding: 24px; overflow-y: auto; max-height: 46svh; scroll-behavior: smooth; }
.bf-a, .bf-u { max-width: 78%; padding: 12px 16px; font-size: var(--step-body); line-height: 1.45; animation: bfin .45s cubic-bezier(.2,.7,.2,1) both; }
.bf-a { align-self: flex-start; background: #1d1d1d; border-radius: 18px 18px 18px 6px; }
.bf-u { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-radius: 18px 18px 6px 18px; font-weight: 500; }
[dir="rtl"] .bf-a { border-radius: 18px 18px 6px 18px; } [dir="rtl"] .bf-u { border-radius: 18px 18px 18px 6px; }
@keyframes bfin { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.bf-dots { display: inline-flex; gap: 4px; padding: 4px 0; } .bf-dots i { width: 7px; height: 7px; border-radius: 50%; background: #8a8a8a; animation: blink 1s infinite; } .bf-dots i:nth-child(2) { animation-delay: .2s; } .bf-dots i:nth-child(3) { animation-delay: .4s; }
.bf-in { display: grid; gap: 14px; padding: 18px 24px 24px; border-top: 1px solid #222; background: #121212; transition: opacity .3s; }
.bf-in.wait { opacity: .35; pointer-events: none; }
.bf-in:empty { display: none; }
.bf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bf-chip { all: unset; box-sizing: border-box; cursor: pointer; padding: 11px 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px #3a3a3a; font-size: 15px; color: #e6e6e6;
  transition: background .2s, color .2s, box-shadow .2s, transform .2s; animation: bfin .4s calc(var(--i) * 50ms) both; }
.bf-chip:hover { box-shadow: inset 0 0 0 1px var(--accent); transform: translateY(-2px); }
.bf-chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.bf-chips.multi .bf-chip[aria-pressed="true"]::before { content: "✓ "; }
.bf-chip:focus-visible, .bf-next:focus-visible, .bf-back:focus-visible, .bf-send:focus-visible, .bf-skip:focus-visible, .bf-edit:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.bf-text { width: 100%; box-sizing: border-box; padding: 14px 18px; border-radius: 14px; border: 1px solid #333; background: #0b0b0b; color: #fff; font: inherit; font-size: var(--step-body); resize: vertical; transition: border-color .2s; }
.bf-text:focus { outline: none; border-color: var(--accent); }
.bf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bf-lbl { font-size: 13px; color: #9a9a9a; margin-bottom: -4px; }
.bf-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: #bdbdbd; line-height: 1.45; cursor: pointer; }
.bf-consent input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; flex: none; }
.bf-err { color: #ff8a7a; font-size: 13px; min-height: 0; }
.bf-err:empty { display: none; }
.bf-row { display: flex; align-items: center; gap: 10px; }
.bf-next, .bf-send { all: unset; box-sizing: border-box; cursor: pointer; margin-inline-start: auto; padding: 13px 26px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 500; transition: transform .2s, box-shadow .2s; }
.bf-next:hover, .bf-send:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(218,250,156,.6); }
.bf-back, .bf-skip, .bf-edit { all: unset; cursor: pointer; font-size: 14px; color: #9a9a9a; padding: 8px 4px; }
.bf-back:hover, .bf-skip:hover, .bf-edit:hover { color: #fff; }
.bf-send { justify-self: end; padding: 16px 32px; font-size: var(--step-body); }
.bf-plan { padding: 16px 18px; border-radius: 16px; background: linear-gradient(135deg, rgba(218,250,156,.14), rgba(218,250,156,.04)); box-shadow: inset 0 0 0 1px rgba(218,250,156,.3); }
.bf-planh { font-size: 13px; color: var(--accent); margin-bottom: 8px; }
.bf-plan ul { display: grid; gap: 6px; }
.bf-plan li { position: relative; padding-inline-start: 20px; animation: bfin .4s calc(var(--i) * 90ms) both; }
.bf-plan li::before { content: ""; position: absolute; inset-inline-start: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.bf-sum { display: grid; border-radius: 16px; box-shadow: inset 0 0 0 1px #262626; }
.bf-sr { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: baseline; padding: 10px 16px; border-top: 1px solid #222; font-size: 14px; }
.bf-sr:first-child { border-top: 0; }
.bf-sk { color: #8a8a8a; } .bf-sv { color: #eee; overflow-wrap: anywhere; }
.cta > .talk { text-align: center; }
.cta > .talk p { margin: 0; }
@media (max-width: 640px) {
  .brief { border-radius: 20px; min-height: 0; }
  .bf-log { max-height: 52svh; padding: 18px; }
  .bf-a, .bf-u { max-width: 90%; }
  .bf-grid { grid-template-columns: 1fr; }
  .bf-sr { grid-template-columns: 1fr auto; } .bf-sk { grid-column: 1 / -1; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .brief *, .bf-av::after { animation: none !important; transition: none !important; } }
.brief.at-sum .bf-log { max-height: 20svh; }

/* ===== cookie banner: a small dark card, bottom corner, never covering the content on desktop ===== */
.ccb { position: fixed; z-index: 60; bottom: max(16px, env(safe-area-inset-bottom)); inset-inline-start: 16px; width: min(400px, calc(100vw - 32px)); padding: 20px; border-radius: 20px;
  background: rgba(15,15,15,.96); color: #fff; box-shadow: 0 24px 60px -20px rgba(0,0,0,.6), 0 0 0 1px #2a2a2a; backdrop-filter: blur(12px);
  opacity: 0; transform: translateY(16px); transition: opacity .35s, transform .45s cubic-bezier(.2,.7,.2,1); }
.ccb.in { opacity: 1; transform: none; }
.cc-t { font: 500 20px/1.15 var(--display); margin: 0 0 8px; }
.cc-p { font-size: 14px; line-height: 1.5; color: #cfcfcf; }
.cc-p a { color: var(--accent); }
.cc-prefs { display: grid; gap: 8px; margin-top: 14px; }
.cc-prefs[hidden] { display: none; }
.cc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #1c1c1c; cursor: pointer; }
.cc-rt b { display: block; font-weight: 500; font-size: 14px; } .cc-rt span { font-size: 12.5px; color: #9a9a9a; }
.cc-row input { appearance: none; flex: none; width: 40px; height: 24px; border-radius: 999px; background: #3a3a3a; position: relative; cursor: pointer; transition: background .2s; margin: 0; }
.cc-row input::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; }
.cc-row input:checked { background: var(--accent); } .cc-row input:checked::after { transform: translateX(16px); background: var(--accent-ink); }
[dir="rtl"] .cc-row input:checked::after { transform: translateX(-16px); }
.cc-row input:disabled { opacity: .6; cursor: default; }
.cc-row input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cc-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cc-b { all: unset; box-sizing: border-box; cursor: pointer; flex: 1 1 auto; text-align: center; padding: 11px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; box-shadow: inset 0 0 0 1px #444; color: #fff; transition: background .2s, box-shadow .2s; }
.cc-b:hover { box-shadow: inset 0 0 0 1px #fff; }
.cc-b.ghost { box-shadow: none; color: #bdbdbd; text-decoration: underline; text-underline-offset: 3px; flex: 0 0 auto; }
.cc-b.ok { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.cc-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ccb { transition: none; } }

/* footer policy links */
.lg-links { display: inline-flex; flex-wrap: wrap; gap: 6px 18px; }
.lg-links a, .lg-links button { all: unset; cursor: pointer; color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(15,15,15,.3); }
.lg-links a:hover, .lg-links button:hover { text-decoration-color: currentColor; }
.lg-links a:focus-visible, .lg-links button:focus-visible { outline: 2px solid var(--paper-ink); outline-offset: 3px; }

/* ===== privacy / cookie pages ===== */
.legal-page { background: var(--paper); color: var(--paper-ink); }
.lg-top { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding-block: 16px; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(15,15,15,.08); }
.lg-top .wm { font: 400 18px/1 var(--display); letter-spacing: .32em; margin-inline-end: -.32em; color: var(--paper-ink); text-decoration: none; }
.lg-top .lang { justify-self: end; }
.lg-back { justify-self: start; color: var(--paper-muted); text-decoration: none; font-size: var(--step-small); }
.lg-back::before { content: "← "; } [dir="rtl"] .lg-back::before { content: "→ "; }
.lg-back:hover { color: var(--paper-ink); }
.lg { padding-block: clamp(48px, 9vh, 110px) 96px; }
.lg article { max-width: 72ch; margin-inline: auto; }
.lg h1 { font: 400 clamp(2.4rem, 1.4rem + 4vw, 4.5rem)/1 var(--display); letter-spacing: -.02em; }
.lg-up { color: var(--paper-muted); font-size: var(--step-small); margin-top: 14px; }
.lg-toc { margin: 36px 0 12px; padding: 18px 22px; border-radius: 16px; background: var(--paper-2); }
.lg-toc ol { list-style: decimal; padding-inline-start: 20px; display: grid; gap: 6px; font-size: var(--step-small); }
.lg-toc a { color: inherit; }
.lg section { padding-top: 36px; scroll-margin-top: 90px; }
.lg h2 { font: 500 clamp(1.4rem, 1.1rem + 1vw, 1.9rem)/1.15 var(--display); margin-bottom: 12px; }
.lg p, .lg li { line-height: 1.7; color: #2b2b2b; }
.lg p + p, .lg p + ul, .lg ul + p { margin-top: 12px; }
.lg ul { list-style: disc; padding-inline-start: 22px; display: grid; gap: 8px; }
.lg a { color: var(--paper-ink); text-underline-offset: 3px; }
.lg table { width: 100%; border-collapse: collapse; font-size: var(--step-small); margin-top: 6px; }
.lg th, .lg td { text-align: start; padding: 10px 12px; border-bottom: 1px solid rgba(15,15,15,.12); vertical-align: top; }
.lg th { font-weight: 500; background: var(--paper-2); }
.lg-foot { padding-block: 32px 40px; border-top: 1px solid rgba(15,15,15,.08); }
.lg-foot .legal { margin-top: 0; }
@media (max-width: 640px) {
  .lg-top { grid-template-columns: auto 1fr; } .lg-top .wm { display: none; }
  .lg table, .lg thead, .lg tbody, .lg tr, .lg th, .lg td { display: block; } .lg thead { display: none; }
  .lg td { border: 0; padding: 4px 0; } .lg tr { padding: 12px 0; border-bottom: 1px solid rgba(15,15,15,.12); }
}

/* ===== mobile-first hardening ===== */
body { overflow-x: clip; }
@media (max-width: 900px) {
  .own-stage { overflow: hidden; }
  .own-stage svg { height: 100%; width: auto; max-width: 100%; max-height: 100%; }
}
.story-pin, .story { overflow-x: clip; }
.arr-gates .door { inset-inline-start: auto !important; inset-inline-end: 0; transform: none !important; text-align: end; }
.bf-av::after { inset: -3px; }
.rv-s { display: block; grid-column: 1 / -1; width: 100%; height: 1px; margin-bottom: -1px; pointer-events: none; }

/* ===== review fixes ===== */
/* the CTA grid: every child spans the full width (the brief would otherwise land in a 0px implicit column) */
.cta > * { grid-column: 1 / -1; }
.cta > .talk { justify-self: center; }
@supports not (overflow: clip) { .story-pin { overflow: hidden; } body { overflow-x: hidden; } }
/* keep the nav on screen while it holds keyboard focus */
.nav:focus-within { transform: translateX(-50%) !important; }
/* focus rings readable on paper and on lime */
.foot :focus-visible, .cta :focus-visible, .legal-page :focus-visible { outline-color: var(--paper-ink); }
.brief :focus-visible { outline-color: var(--accent); }
/* story scenes: animations only run in the scene on screen */
.story-ic:not(.on) *, .os:not(.on) * { animation-play-state: paused !important; }
/* mobile: own-stage never covers the chapter in the middle of the screen */
@media (max-width: 900px) { .own-stage { height: min(40vh, calc(50vh - 80px)); } }
/* mobile nav: wordmark stays put; section links hidden until there is room for them */
@media (max-width: 780px) {
  .nav { grid-template-columns: 1fr auto; padding-inline-start: 18px; }
  .nav .navl { display: none; }
  .nav .wm { justify-self: start; }
  .nav .nav-r { justify-self: end; }
}
/* RTL: mirror the arrows with an independent property, so animations and hover transforms don't undo it */
[dir="rtl"] .cta .word svg, [dir="rtl"] .go svg { transform: none; scale: -1 1; }
/* reduced motion: the last loops */
@media (prefers-reduced-motion: reduce) {
  .scr::before, .scr::after, .kyc-seal.in .stamp, .nav .wm span { animation: none !important; }
  .bf-log { scroll-behavior: auto; }
}
/* the closing door label sits under the drawn door (93%) without leaving the canvas */
.arr-gates .door { inset-inline-start: 93% !important; inset-inline-end: auto; transform: translateX(-50%) !important; text-align: center; }
[dir="rtl"] .arr-gates .door { transform: translateX(50%) !important; }
@media (max-width: 640px) { .arr-gates .door { inset-inline-start: auto !important; inset-inline-end: 0; transform: none !important; } }
/* brands background: static pattern (fixed attachment repaints on every scroll) */
.brx, .show.suite-in { background-attachment: scroll; }
.card h3.ch { font: 500 var(--step-body)/1.3 var(--text); margin: 18px 0 6px; letter-spacing: normal; }
.bf-back[hidden], .bf-skip[hidden] { display: none; }
.brief { min-height: min(560px, 80svh); }