/* ============================================
   BKAE INVESTMENTS — Design System v2
   Pure B&W minimalism · Mobile-first · Responsive
   ============================================ */

/* ---------- TOKENS ---------- */
:root{
  /* Palette — pure B&W with subtle gray accents */
  --white:#ffffff;
  --paper:#fafafa;
  --paper-2:#f4f4f4;
  --line:#e5e5e5;
  --line-2:#d4d4d4;
  --gray-100:#a3a3a3;
  --gray-200:#737373;
  --gray-300:#525252;
  --gray-400:#262626;
  --black:#0a0a0a;
  --pure-black:#000000;

  /* Semantic */
  --bg:var(--white);
  --bg-soft:var(--paper);
  --bg-dark:var(--black);
  --fg:var(--black);
  --fg-soft:var(--gray-300);
  --fg-muted:var(--gray-200);
  --border:var(--line);
  --accent:var(--gray-400);

  /* Type */
  --font-display:"Inter Tight","Inter",system-ui,-apple-system,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Layout */
  --max:1320px;
  --gutter:clamp(16px, 4vw, 32px);
  --section-pad:clamp(64px, 10vw, 140px);
  --radius:0px;
  --radius-card:8px;
  --radius-pill:999px;

  /* Motion */
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.18s;
  --t:.32s;
  --t-slow:.6s;
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  font-weight:400;
  background:var(--bg);
  color:var(--fg);
  line-height:1.55;
  overflow-x:hidden;
  font-feature-settings:"ss01","cv11";
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
::selection{background:var(--black);color:var(--white)}

/* ---------- ACCESSIBILITY ---------- */
.skip{
  position:absolute;left:12px;top:-44px;z-index:100;
  background:var(--black);color:var(--white);
  padding:10px 16px;font-size:.85rem;
  border-radius:var(--radius-pill);
  transition:top var(--t) var(--ease);
}
.skip:focus{top:12px;outline:2px solid var(--white);outline-offset:2px}
:focus-visible{outline:2px solid var(--black);outline-offset:3px;border-radius:2px}

/* ---------- LAYOUT PRIMITIVES ---------- */
.container{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{
  padding:var(--section-pad) 0;
  position:relative;
  border-top:1px solid var(--border);
}
.section--soft{background:var(--bg-soft)}
.section--dark{
  background:var(--black);
  color:var(--white);
  border-top-color:var(--gray-400);
}
.section--dark .eyebrow{color:var(--gray-100)}
.section--dark .eyebrow::before{background:var(--gray-100)}
.section--dark .kicker,
.section--dark .lead{color:rgba(255,255,255,.72)}

.section-number{
  position:absolute;
  top:24px;
  left:var(--gutter);
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.1em;
  color:var(--gray-100);
  pointer-events:none;
  font-weight:500;
}
.section--dark .section-number{color:var(--gray-200)}

/* ---------- TYPOGRAPHY ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.7rem;
  font-weight:500;
  color:var(--fg-muted);
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";
  width:24px;height:1px;
  background:var(--fg);
}
.display{
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:1.02;
  margin:0;
  text-wrap:balance;
}
.display em{font-style:normal;color:var(--gray-200);font-weight:400}
.section--dark .display em{color:var(--gray-100)}

h1.display{font-size:clamp(2.5rem, 8vw, 6.5rem)}
h2.display{font-size:clamp(2rem, 5.5vw, 4rem)}
h3.display{font-size:clamp(1.5rem, 3vw, 2.25rem)}

.kicker{
  font-size:clamp(1rem, 1.4vw, 1.125rem);
  color:var(--fg-soft);
  max-width:60ch;
  line-height:1.55;
  margin:18px 0 0;
  text-wrap:pretty;
}
.lead{
  font-size:clamp(1.05rem, 1.5vw, 1.2rem);
  color:var(--fg-soft);
  line-height:1.55;
}
.mono{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
  font-weight:500;
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 22px;
  font-size:.92rem;
  font-weight:500;
  letter-spacing:.005em;
  border:1px solid var(--black);
  border-radius:var(--radius-pill);
  background:transparent;
  color:var(--black);
  white-space:nowrap;
  transition:background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
  position:relative;
  overflow:hidden;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

.btn--solid{background:var(--black);color:var(--white)}
.btn--solid:hover{background:var(--gray-400)}

.btn--ghost{background:transparent;color:var(--black);border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--black);background:var(--paper-2)}

.btn--dark{background:transparent;color:var(--white);border-color:rgba(255,255,255,.3)}
.btn--dark:hover{border-color:var(--white);background:rgba(255,255,255,.06)}

.btn--text{
  padding:0;border:0;border-radius:0;background:transparent;
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
}
.btn--text:hover{transform:translateX(2px)}

.btn__arrow{display:inline-block;transition:transform var(--t) var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}

/* ---------- SHELL & PROGRESS ---------- */
.site-shell{position:relative;isolation:isolate}
.progress{
  position:fixed;left:0;top:0;
  height:2px;width:100%;
  background:var(--black);
  transform:scaleX(0);transform-origin:left;
  z-index:60;pointer-events:none;
  transition:transform .1s linear;
}

/* ---------- NAV ---------- */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:50;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--border);
  transition:background var(--t) var(--ease);
}
.nav__inner{
  max-width:var(--max);
  margin-inline:auto;
  padding:14px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
}
.brand{display:flex;align-items:center;gap:10px;min-width:0;flex-shrink:0}
.brand__mark{
  width:34px;height:34px;
  display:grid;place-items:center;
  background:var(--black);color:var(--white);
  font-family:var(--font-display);
  font-weight:600;font-size:.95rem;
  letter-spacing:.02em;
  border-radius:6px;
}
.brand__text{display:flex;flex-direction:column;line-height:1.1}
.brand__title{
  font-size:.82rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
}
.brand__sub{
  font-family:var(--font-mono);
  font-size:.65rem;letter-spacing:.08em;
  color:var(--fg-muted);text-transform:uppercase;
}

.nav__links{
  display:flex;align-items:center;
  gap:clamp(14px,2vw,28px);
  margin:0 auto;
}
.nav__links a{
  position:relative;
  font-size:.88rem;font-weight:450;
  color:var(--fg-soft);
  padding:6px 0;
  transition:color var(--t) var(--ease);
}
.nav__links a::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;
  height:1px;background:var(--black);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t) var(--ease);
}
.nav__links a:hover,.nav__links a.is-active{color:var(--black)}
.nav__links a:hover::after,.nav__links a.is-active::after{transform:scaleX(1)}

.nav__actions{display:flex;align-items:center;gap:10px;flex-shrink:0}

/* Lang switch */
.lang-switch{
  display:flex;align-items:center;gap:0;padding:0;
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  overflow:hidden;
}
.lang-switch a{
  padding:6px 11px;
  font-family:var(--font-mono);
  font-size:.7rem;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg-muted);
  transition:background var(--t) var(--ease), color var(--t) var(--ease);
}
.lang-switch a:hover{color:var(--black)}
.lang-switch a[aria-current="page"]{background:var(--black);color:var(--white)}

/* Mobile nav */
.mobile-nav{display:none;position:relative}
.mobile-nav summary{
  list-style:none;
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  cursor:pointer;position:relative;
  transition:border-color var(--t) var(--ease);
  font-size:0; /* hide text inside summary, show only hamburger */
  color:transparent;
  overflow:hidden;
}
.mobile-nav summary::-webkit-details-marker{display:none}
.mobile-nav summary::before,.mobile-nav summary::after{
  content:"";position:absolute;
  width:16px;height:1.5px;
  background:var(--black);
  transition:transform var(--t) var(--ease);
}
.mobile-nav summary::before{transform:translateY(-4px)}
.mobile-nav summary::after{transform:translateY(4px)}
.mobile-nav[open] summary::before{transform:translateY(0) rotate(45deg)}
.mobile-nav[open] summary::after{transform:translateY(0) rotate(-45deg)}
.mobile-nav[open] summary{border-color:var(--black)}

.mobile-nav__panel{
  position:fixed;
  top:64px;left:12px;right:12px;
  padding:18px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 20px 50px rgba(0,0,0,.08);
  display:grid;gap:2px;
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease);
  max-height:calc(100vh - 84px);
  overflow-y:auto;
}
.mobile-nav[open] .mobile-nav__panel{
  opacity:1;transform:translateY(0);pointer-events:auto;
}
.mobile-nav__panel a{
  padding:14px 12px;
  border-radius:6px;
  font-size:1rem;font-weight:450;
  display:flex;align-items:center;justify-content:space-between;
  transition:background var(--t-fast) var(--ease);
}
.mobile-nav__panel a::after{
  content:"→";color:var(--gray-100);
  transition:transform var(--t) var(--ease), color var(--t) var(--ease);
}
.mobile-nav__panel a:hover{background:var(--paper)}
.mobile-nav__panel a:hover::after{color:var(--black);transform:translateX(3px)}
.mobile-nav__panel .lang-switch{margin-top:10px;justify-self:start}
.mobile-nav__panel .lang-switch a::after{display:none}
.mobile-nav__panel .lang-switch a{padding:8px 14px}

/* ---------- HERO ---------- */
.hero{
  min-height:100vh;
  min-height:100svh;
  background:var(--white);
  color:var(--black);
  position:relative;
  display:flex;align-items:center;
  padding:140px 0 60px;
  border-top:0;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:80px 80px;
  background-position:center center;
  mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%);
  opacity:.6;
  pointer-events:none;
}
.hero__content{
  position:relative;z-index:2;
  width:100%;max-width:var(--max);
  margin-inline:auto;padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:1.3fr .9fr;
  gap:48px;align-items:end;
}
.hero__main{
  display:grid;gap:18px;
  animation:fadeUp .9s var(--ease-out) both;
}
.hero__headline{
  font-size:clamp(2.75rem, 9vw, 7rem);
  max-width:14ch;
  letter-spacing:-.04em;
}
.hero__headline em{
  font-style:normal;
  position:relative;
  color:var(--gray-200);
  font-weight:400;
}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.hero__side{
  padding:28px;
  border:1px solid var(--border);
  background:var(--white);
  border-radius:var(--radius-card);
  animation:fadeUp 1.1s .15s var(--ease-out) both;
}
.hero__side .eyebrow{margin-bottom:14px}
.hero__side .kicker{margin-top:0;font-size:.95rem}
.hero__meta{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;margin-top:24px;
}
.hero__meta .stat{
  padding-top:14px;
  border-top:1px solid var(--border);
}
.hero__meta strong{
  display:block;
  font-family:var(--font-mono);
  font-size:1rem;font-weight:600;
  margin-bottom:4px;
  color:var(--black);
  letter-spacing:.02em;
}
.hero__meta span{
  font-size:.72rem;
  color:var(--fg-muted);
  letter-spacing:.04em;
}
.hero__scroll{
  position:absolute;
  bottom:24px;left:var(--gutter);
  z-index:3;
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fg-muted);
}
.hero__scroll::after{
  content:"";
  width:1px;height:40px;
  background:linear-gradient(to bottom, var(--black), transparent);
  transform-origin:top;
  animation:scrollHint 2s var(--ease) infinite;
}
@keyframes scrollHint{
  0%,100%{transform:scaleY(.3);opacity:.4}
  50%{transform:scaleY(1);opacity:1}
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:none}
}

/* ---------- SPLIT HEAD ---------- */
.split-head{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:32px;
  margin-bottom:48px;
  align-items:end;
}
.split-head__title h2{font-size:clamp(1.8rem,4.5vw,3.5rem)}

/* ---------- MANIFESTO ---------- */
.manifesto{background:var(--white)}
.manifesto__content{max-width:1000px}
.manifesto__lead{
  font-family:var(--font-display);
  font-size:clamp(1.5rem, 3vw, 2.5rem);
  line-height:1.15;
  font-weight:400;
  letter-spacing:-.02em;
  margin:0 0 36px;
  text-wrap:balance;
}
.manifesto__lead .drop{
  float:left;
  font-size:4.5rem;font-weight:300;
  line-height:.8;
  margin:.05em .12em 0 0;
  color:var(--black);
}
[dir="rtl"] .manifesto__lead .drop{float:right;margin:.05em 0 0 .12em}
.manifesto__body{
  columns:2;column-gap:48px;
  max-width:78ch;
  color:var(--fg-soft);
  font-size:.98rem;
}
.manifesto__body p{margin:0 0 16px;break-inside:avoid}
.compliance-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}
.chip{
  padding:8px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  font-size:.8rem;
  color:var(--fg-soft);
  background:var(--white);
  transition:border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.chip:hover{border-color:var(--black);color:var(--black)}

/* ---------- PANELS / CARDS ---------- */
.panel{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  transition:border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.panel:hover{
  border-color:var(--gray-100);
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(0,0,0,.04);
}
.section--dark .panel,.panel--dark{
  background:transparent;
  border-color:rgba(255,255,255,.1);
}
.section--dark .panel:hover,.panel--dark:hover{
  border-color:rgba(255,255,255,.25);
  background:rgba(255,255,255,.02);
  box-shadow:none;
}

.alpha{
  font-family:var(--font-mono);
  font-weight:600;font-size:1.1rem;
  color:var(--gray-200);
  letter-spacing:.04em;
  margin-bottom:14px;
}
.section--dark .alpha{color:var(--gray-100)}

/* ---------- CARD GRIDS ---------- */
.clients__grid,.mandate__grid,.governance__grid,
.custody__grid,.network__grid,.opps__grid,
.why__grid,.facts__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
}
.client-card,.mandate-card,.governance-card,.custody-card,
.case-card,.network-card,.fact-card,.why-card{
  padding:32px 28px;
  display:grid;gap:12px;
  align-content:start;
  min-height:240px;
}
.client-card h3,.mandate-card h3,.governance-card h3,
.custody-card h3,.case-card h3,.network-card h3,
.fact-card h3,.why-card h3{
  margin:0;
  font-family:var(--font-display);
  font-size:1.25rem;font-weight:500;
  letter-spacing:-.01em;line-height:1.2;
}
.client-card p,.mandate-card p,.governance-card p,
.custody-card p,.case-card p,.network-card p,
.fact-card p,.why-card p{
  margin:0;color:var(--fg-soft);font-size:.95rem;
}
.section--dark .client-card p,.section--dark .mandate-card p,
.section--dark .governance-card p,.section--dark .custody-card p,
.section--dark .case-card p,.section--dark .network-card p,
.section--dark .fact-card p,.section--dark .why-card p{color:rgba(255,255,255,.7)}

.client-card ul,.mandate-card ul,.governance-card ul,
.custody-card ul,.case-card ul,.network-card ul,.page-card ul{
  margin:8px 0 0;padding:0;list-style:none;
  color:var(--fg-soft);font-size:.92rem;
}
.client-card li,.mandate-card li,.governance-card li,
.custody-card li,.case-card li,.network-card li,.page-card li{
  padding:8px 0;
  border-top:1px solid var(--border);
  position:relative;
  padding-left:18px;
}
.client-card li::before,.mandate-card li::before,
.governance-card li::before,.custody-card li::before,
.case-card li::before,.network-card li::before,.page-card li::before{
  content:"";position:absolute;
  left:0;top:14px;
  width:8px;height:1px;background:var(--black);
}
[dir="rtl"] .client-card li,[dir="rtl"] .mandate-card li,
[dir="rtl"] .governance-card li,[dir="rtl"] .custody-card li,
[dir="rtl"] .case-card li,[dir="rtl"] .network-card li,[dir="rtl"] .page-card li{
  padding-left:0;padding-right:18px;
}
[dir="rtl"] .client-card li::before,[dir="rtl"] .mandate-card li::before,
[dir="rtl"] .governance-card li::before,[dir="rtl"] .custody-card li::before,
[dir="rtl"] .case-card li::before,[dir="rtl"] .network-card li::before,
[dir="rtl"] .page-card li::before{
  left:auto;right:0;
}
.section--dark .client-card li,.section--dark .mandate-card li,
.section--dark .governance-card li,.section--dark .custody-card li,
.section--dark .case-card li,.section--dark .network-card li,
.section--dark .page-card li{border-color:rgba(255,255,255,.08)}
.section--dark .client-card li::before,.section--dark .mandate-card li::before,
.section--dark .governance-card li::before,.section--dark .custody-card li::before,
.section--dark .case-card li::before,.section--dark .network-card li::before,
.section--dark .page-card li::before{background:var(--white)}

/* ---------- STRIP UNDER CLIENTS ---------- */
.clients__strip{
  margin-top:16px;
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
.metric-panel{padding:32px 28px}
.metric-row{
  display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  padding:16px 0;
  border-top:1px solid var(--border);
  font-size:.92rem;
}
.metric-row:first-of-type{margin-top:8px}
.metric-row span{color:var(--fg-muted)}
.metric-row strong{
  font-weight:500;color:var(--black);
  max-width:30ch;text-align:right;
}
[dir="rtl"] .metric-row strong{text-align:left}

.callout{
  padding:32px 28px;
  display:grid;gap:16px;align-content:start;
  background:var(--black);color:var(--white);
  border-radius:var(--radius-card);
}
.callout p{margin:0;color:rgba(255,255,255,.72);font-size:.98rem}
.callout .eyebrow{color:var(--gray-100)}
.callout .eyebrow::before{background:var(--gray-100)}
.callout .btn{justify-self:start}
[dir="rtl"] .callout .btn{justify-self:end}

/* ---------- PILLARS ---------- */
.pillars__intro{
  display:grid;grid-template-columns:1.3fr 1fr;gap:32px;
  margin-bottom:48px;align-items:end;
}
.pillars__title{font-size:clamp(2rem,5vw,4rem);max-width:14ch}
.pillar-list{display:grid;gap:16px}
.pillar-card{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  overflow:hidden;min-height:380px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  transition:border-color var(--t) var(--ease);
}
.pillar-card:hover{border-color:var(--black)}
.pillar-card:nth-child(even){grid-template-columns:1fr 1fr}
.pillar-card:nth-child(even) .pillar-card__image{order:2}
.pillar-card:nth-child(even) .pillar-card__content{order:1}
.pillar-card__image{
  overflow:hidden;background:var(--paper);
  position:relative;min-height:280px;
}
.pillar-card__image img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.05);
  transition:transform .8s var(--ease-out);
}
.pillar-card:hover .pillar-card__image img{transform:scale(1.04)}
.pillar-card__content{
  padding:36px 32px;
  display:flex;flex-direction:column;
  justify-content:space-between;gap:18px;
}
.pillar-card__top{display:grid;gap:12px}
.pillar-num{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-muted);font-weight:500;
}
.pillar-card h3{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(1.6rem,2.6vw,2.4rem);
  font-weight:500;line-height:1.05;
  letter-spacing:-.02em;
}
.pillar-card p{margin:0;color:var(--fg-soft);font-size:.98rem}
.pillar-card__foot{
  display:flex;justify-content:space-between;
  gap:18px;align-items:flex-end;flex-wrap:wrap;
  padding-top:16px;
  border-top:1px solid var(--border);
}
.pillar-tag{
  color:var(--fg-muted);font-size:.85rem;
  max-width:36ch;line-height:1.5;
}

/* ---------- FACTS (dark) ---------- */
.facts__grid{
  gap:0;
  border:1px solid var(--gray-400);
  border-radius:var(--radius-card);
  overflow:hidden;
}
.fact-card{
  color:var(--white);background:transparent;
  border-right:1px solid var(--gray-400);
  border-bottom:1px solid var(--gray-400);
  padding:36px 28px;min-height:200px;
}
.fact-card:nth-last-child(-n+3){border-bottom:0}
.fact-card:last-child,.fact-card:nth-child(3n){border-right:0}
.fact-card .num{
  font-family:var(--font-mono);
  font-size:clamp(2rem,3.5vw,3rem);
  line-height:1;font-weight:500;
  color:var(--white);
  margin-bottom:14px;letter-spacing:.01em;
}
.fact-card h3{color:var(--white);margin-bottom:6px}
.fact-card p{color:rgba(255,255,255,.6);font-size:.9rem}

/* ---------- TIMELINE ---------- */
.timeline{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:0;position:relative;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.timeline-card{
  position:relative;
  padding:40px 24px 32px;
  display:grid;gap:12px;align-content:start;
  border-right:1px solid var(--border);
  transition:background var(--t) var(--ease);
}
.timeline-card:last-child{border-right:0}
[dir="rtl"] .timeline-card{border-right:0;border-left:1px solid var(--border)}
[dir="rtl"] .timeline-card:last-child{border-left:0}

.timeline-card::before{
  content:"";position:absolute;
  top:-1px;left:0;
  width:32px;height:2px;background:var(--black);
  transition:width var(--t) var(--ease);
}
[dir="rtl"] .timeline-card::before{left:auto;right:0}
.timeline-card:hover::before{width:64px}
.timeline-card:hover{background:var(--paper)}

.timeline-card .num{
  font-family:var(--font-mono);
  font-size:.78rem;font-weight:600;
  color:var(--black);
  letter-spacing:.06em;margin-bottom:6px;
}
.timeline-card h3{
  margin:0;
  font-family:var(--font-display);
  font-size:1.3rem;font-weight:500;
  letter-spacing:-.01em;
}
.timeline-card p{
  margin:0;color:var(--fg-soft);
  font-size:.92rem;line-height:1.55;
}

/* ---------- OPPS / CASES ---------- */
.opps{background:var(--paper)}
.opp{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.opp:hover{border-color:var(--black);transform:translateY(-3px)}
.opp__media{
  aspect-ratio:1.5;overflow:hidden;
  background:var(--paper-2);
}
.opp__media img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.05);
  transition:transform .6s var(--ease-out);
}
.opp:hover .opp__media img{transform:scale(1.05)}
.opp__body{padding:24px;display:grid;gap:14px;flex:1}
.opp__meta{
  display:flex;justify-content:space-between;
  gap:10px;flex-wrap:wrap;
  font-family:var(--font-mono);
  font-size:.72rem;letter-spacing:.06em;
  color:var(--fg-muted);text-transform:uppercase;
}
.opp__title{
  font-family:var(--font-display);
  font-size:1.15rem;line-height:1.25;
  margin:0;font-weight:500;
  letter-spacing:-.01em;
}

/* ---------- WHY (dark) ---------- */
.why-card{
  color:var(--white);background:transparent;
  border:1px solid rgba(255,255,255,.1);
  padding:32px 28px;
  border-radius:var(--radius-card);
  transition:border-color var(--t) var(--ease);
}
.why-card:hover{border-color:rgba(255,255,255,.3)}
.why-card p{color:rgba(255,255,255,.7)}

/* ---------- INSIGHTS ---------- */
.insights__list{display:grid;gap:0;border-top:1px solid var(--border)}
.insight{
  display:grid;
  grid-template-columns:140px 1fr 24px;
  gap:24px;align-items:center;
  padding:28px 0;
  border-bottom:1px solid var(--border);
  transition:padding var(--t) var(--ease);
  background:transparent;
}
.insight:hover{padding-left:8px;padding-right:8px}
.insight time{
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--fg-muted);letter-spacing:.04em;
}
.insight h3{
  margin:0;
  font-family:var(--font-display);
  font-size:1.2rem;font-weight:500;
  line-height:1.3;letter-spacing:-.005em;
}
.insight p{margin:6px 0 0;color:var(--fg-soft);font-size:.92rem}
.insight .arrow{
  font-size:1.2rem;color:var(--gray-100);
  transition:transform var(--t) var(--ease), color var(--t) var(--ease);
}
.insight:hover .arrow{color:var(--black);transform:translateX(4px)}
[dir="rtl"] .insight:hover .arrow{transform:translateX(-4px)}

/* ---------- FAQ ---------- */
.faq-list{display:grid;gap:0;border-top:1px solid var(--border)}
.faq-item{border-bottom:1px solid var(--border);background:transparent}
.faq-item summary{
  list-style:none;
  display:flex;justify-content:space-between;
  gap:18px;align-items:center;
  padding:24px 0;cursor:pointer;
  transition:color var(--t) var(--ease);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary span:first-child{
  font-size:1rem;font-weight:500;line-height:1.4;
}
.faq-item summary span:last-child{
  font-family:var(--font-mono);
  font-size:1.4rem;color:var(--black);
  transition:transform var(--t) var(--ease);
  flex-shrink:0;
}
.faq-item[open] summary span:last-child{transform:rotate(45deg)}
.faq-item p{
  margin:0;padding:0 0 24px;
  color:var(--fg-soft);font-size:.96rem;
  max-width:65ch;
}

/* ---------- PRIVATE MATERIALS ---------- */
.private-materials{
  display:grid;grid-template-columns:1.1fr .9fr;gap:16px;
}
.private-box{padding:32px 28px}
.private-list{display:grid;gap:0;margin-top:24px}
.private-row{
  display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  padding:16px 0;
  border-top:1px solid var(--border);
  font-size:.93rem;
}
.private-row span{color:var(--fg-muted)}
.private-row strong{font-weight:500;color:var(--black)}

/* ---------- ABOUT ---------- */
.about-grid{
  display:grid;grid-template-columns:.9fr 1.1fr;
  gap:24px;align-items:stretch;
}
.about__media{
  border-radius:var(--radius-card);
  overflow:hidden;background:var(--paper);
  min-height:380px;
}
.about__media img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1);
}
.about__panel{padding:36px 32px}
.about__panel h2{margin-top:14px}
.about__rows{display:grid;gap:0;margin-top:28px}
.about__row{
  padding:16px 0;
  border-top:1px solid var(--border);
  display:flex;justify-content:space-between;
  gap:18px;flex-wrap:wrap;font-size:.93rem;
}
.about__row span{color:var(--fg-muted)}
.about__row strong{font-weight:500;color:var(--black)}

/* ---------- CONTACT ---------- */
.contact{background:var(--black);color:var(--white)}
.contact__grid{
  display:grid;grid-template-columns:1fr 1.1fr;
  gap:32px;align-items:start;
}
.contact__panel{
  padding:32px 28px;background:transparent;
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-card);
}
.contact__panel h2{margin-top:14px;color:var(--white)}
.contact__panel p{color:rgba(255,255,255,.72)}
.contact__list{display:grid;gap:0;margin-top:32px}
.contact__list .item{
  padding:18px 0;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:.93rem;
}
.contact__list .label{color:rgba(255,255,255,.5)}
.contact__list strong,.contact__list a{color:var(--white);font-weight:500}

/* Forms */
form{display:grid;gap:16px}
.field{display:grid;gap:6px}
label{
  font-size:.78rem;
  color:rgba(255,255,255,.6);
  letter-spacing:.04em;text-transform:uppercase;
}
input,select,textarea{
  width:100%;
  padding:14px 16px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.03);
  color:var(--white);outline:none;
  font-size:.95rem;
  transition:border-color var(--t) var(--ease), background var(--t) var(--ease);
}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.3)}
input:focus,select:focus,textarea:focus{
  border-color:var(--white);
  background:rgba(255,255,255,.06);
}
textarea{min-height:140px;resize:vertical;font-family:inherit}
select{
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='white' stroke-width='1.5' d='M1 1l5 5 5-5'/></svg>");
  background-repeat:no-repeat;
  background-position:right 16px center;
  padding-right:42px;
}
[dir="rtl"] select{
  background-position:left 16px center;
  padding-right:16px;padding-left:42px;
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.contact .btn--solid{background:var(--white);color:var(--black);border-color:var(--white)}
.contact .btn--solid:hover{background:transparent;color:var(--white)}
.fineprint{font-size:.8rem;color:rgba(255,255,255,.4);margin-top:6px}

/* ---------- FOOTER ---------- */
.footer{
  background:var(--black);
  color:rgba(255,255,255,.7);
  padding:48px 0 32px;
  border-top:1px solid var(--gray-400);
}
.footer__top{
  display:grid;grid-template-columns:1fr auto;
  gap:20px;align-items:start;
  padding-bottom:32px;margin-bottom:32px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.footer__brand{display:grid;gap:8px}
.footer__name{
  font-family:var(--font-display);
  font-size:clamp(1.5rem, 3vw, 2.2rem);
  line-height:1;color:var(--white);
  margin:0;letter-spacing:-.02em;font-weight:500;
}
.footer__cols{
  display:grid;
  grid-template-columns:1.4fr .9fr .9fr .9fr;
  gap:24px;margin-bottom:32px;
}
.footer h3{
  margin:0 0 14px;
  font-size:.7rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--gray-100);
}
.footer p,.footer li{
  margin:0;color:rgba(255,255,255,.6);
  font-size:.88rem;line-height:1.6;
}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.footer ul a{transition:color var(--t) var(--ease)}
.footer ul a:hover{color:var(--white)}
.footer__legal{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:24px;
  display:grid;gap:10px;
  font-size:.82rem;color:rgba(255,255,255,.45);
}

/* Floating licence */
.floating-licence{
  position:fixed;
  right:20px;bottom:20px;z-index:24;
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;
  border-radius:var(--radius-pill);
  background:var(--white);color:var(--black);
  border:1px solid var(--border);
  box-shadow:0 8px 32px rgba(0,0,0,.08);
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.04em;font-weight:500;
}
.floating-licence::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--black);
  box-shadow:0 0 0 4px rgba(0,0,0,.06);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 4px rgba(0,0,0,.06)}
  50%{box-shadow:0 0 0 8px rgba(0,0,0,.02)}
}

/* ---------- INTERIOR PAGES ---------- */
.page-hero{
  padding:160px 0 80px;
  background:var(--white);color:var(--black);
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--border);
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at 80% 30%, black 20%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at 80% 30%, black 20%, transparent 70%);
  opacity:.5;pointer-events:none;
}
.page-hero__inner{position:relative;z-index:1;display:grid;gap:18px}
.page-hero__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:-.035em;line-height:1.02;
  font-size:clamp(2.4rem, 6.5vw, 5rem);
  max-width:14ch;text-wrap:balance;
}
.page-hero__meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}

.page-section{padding:78px 0;border-top:1px solid var(--border)}
.page-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.page-card{padding:32px 28px}
.page-card h2,.page-card h3{
  margin:0 0 14px;
  font-family:var(--font-display);
  font-weight:500;letter-spacing:-.015em;
}
.page-card p{margin:0 0 14px;color:var(--fg-soft);font-size:.96rem}
.page-list{display:grid;gap:0}
.page-stat{
  padding:14px 0;
  border-top:1px solid var(--border);
  display:flex;justify-content:space-between;
  gap:18px;flex-wrap:wrap;font-size:.93rem;
}
.page-stat span{color:var(--fg-muted)}
.page-stat strong{font-weight:500;color:var(--black)}

/* ---------- UTILITIES ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.note-card{padding:32px 28px;display:grid;gap:12px}
.note-card h3{
  margin:0;
  font-family:var(--font-display);
  font-size:1.15rem;font-weight:500;
  letter-spacing:-.01em;
}
.note-card p{margin:0;color:var(--fg-soft);font-size:.94rem}
.section--dark .note-card{
  background:transparent;
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-card);
  color:var(--white);
}
.section--dark .note-card p{color:rgba(255,255,255,.7)}

.subtle-list{display:grid;gap:0;margin:8px 0 0}
.subtle-row{
  padding:15px 0;
  border-top:1px solid var(--border);
  display:flex;justify-content:space-between;
  gap:18px;flex-wrap:wrap;font-size:.92rem;
}
.subtle-row span{color:var(--fg-muted)}
.subtle-row strong{font-weight:500;max-width:36ch;color:var(--black)}
.section--dark .subtle-row{border-color:rgba(255,255,255,.1)}
.section--dark .subtle-row span{color:rgba(255,255,255,.5)}
.section--dark .subtle-row strong{color:var(--white)}

.lang-inline{display:inline-flex;align-items:center;gap:8px}

.table-like{display:grid;gap:0}
.table-like .row{
  display:grid;grid-template-columns:1fr 1.4fr;gap:16px;
  padding:14px 0;
  border-top:1px solid var(--border);
  font-size:.93rem;
}
.table-like .row strong{font-weight:500}
.table-like .row span{color:var(--fg-muted)}
[dir="rtl"] .table-like .row{grid-template-columns:1.4fr 1fr}

.image-panel{
  border-radius:var(--radius-card);
  overflow:hidden;background:var(--paper);
  min-height:100%;
}
.image-panel img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1);
}

/* ---------- ARABIC TYPE ---------- */
html[lang="ar"] body{
  font-family:"Noto Sans Arabic","Inter",system-ui,sans-serif;
  line-height:1.75;
}
html[lang="ar"] .display,
html[lang="ar"] .footer__name,
html[lang="ar"] .page-hero__title,
html[lang="ar"] .manifesto__lead{
  font-family:"Noto Sans Arabic","Inter Tight",system-ui,sans-serif;
  font-weight:600;letter-spacing:0;line-height:1.3;
}
html[lang="ar"] .eyebrow,
html[lang="ar"] .brand__title,
html[lang="ar"] .brand__sub,
html[lang="ar"] .mono,
html[lang="ar"] .lang-switch a,
html[lang="ar"] .pillar-num,
html[lang="ar"] label{
  letter-spacing:0;text-transform:none;
  font-family:"Noto Sans Arabic","Inter",sans-serif;
}
html[lang="ar"] .hero__meta strong,
html[lang="ar"] .timeline-card .num,
html[lang="ar"] .fact-card .num{
  font-family:"JetBrains Mono",monospace;
}

/* RTL adjustments */
html[dir="rtl"] .eyebrow{flex-direction:row-reverse}
html[dir="rtl"] .section-number{left:auto;right:var(--gutter)}
html[dir="rtl"] .hero__scroll{left:auto;right:var(--gutter)}
html[dir="rtl"] .mobile-nav__panel{left:12px;right:12px}
html[dir="rtl"] .floating-licence{right:auto;left:20px}
html[dir="rtl"] .faq-item summary{text-align:right}
html[dir="rtl"] .page-stat,
html[dir="rtl"] .about__row,
html[dir="rtl"] .metric-row,
html[dir="rtl"] .private-row,
html[dir="rtl"] .subtle-row,
html[dir="rtl"] .contact__list .item{flex-direction:row-reverse}

/* ---------- RESPONSIVE — Tablet ---------- */
@media (max-width:1024px){
  .hero__content{grid-template-columns:1fr;gap:32px}
  .hero__side{justify-self:stretch}
  .clients__strip,
  .private-materials,
  .about-grid,
  .contact__grid,
  .page-grid,
  .pillars__intro,
  .split-head{grid-template-columns:1fr;gap:20px}
  .manifesto__body{columns:1}
  .pillar-card,.pillar-card:nth-child(even){grid-template-columns:1fr;min-height:auto}
  .pillar-card:nth-child(even) .pillar-card__image,
  .pillar-card:nth-child(even) .pillar-card__content{order:initial}
  .pillar-card__image{min-height:220px}
  .clients__grid,.mandate__grid,.governance__grid,
  .custody__grid,.network__grid,.opps__grid,
  .why__grid{grid-template-columns:1fr 1fr}
  .facts__grid{grid-template-columns:1fr 1fr}
  .fact-card:nth-child(3n){border-right:1px solid var(--gray-400)}
  .fact-card:nth-child(2n),.fact-card:last-child{border-right:0}
  .fact-card:nth-last-child(-n+3){border-bottom:1px solid var(--gray-400)}
  .fact-card:nth-last-child(-n+2){border-bottom:0}
  .timeline{grid-template-columns:1fr 1fr}
  .timeline-card{
    border-right:1px solid var(--border);
    border-bottom:1px solid var(--border);
  }
  .timeline-card:nth-child(2n){border-right:0}
  .timeline-card:nth-last-child(-n+2){border-bottom:0}
  .footer__cols{grid-template-columns:1fr 1fr;gap:32px}
  /* hide desktop nav CTA earlier to avoid overflow */
  .nav__actions .btn--ghost{display:none}
}

/* ---------- RESPONSIVE — Mobile ---------- */
@media (max-width:900px){
  .nav__links,
  .nav__actions > .lang-switch{display:none}
  .mobile-nav{display:block}

  .hero{padding-top:110px;padding-bottom:50px}
  .hero__scroll{display:none}
  .hero__meta{grid-template-columns:1fr 1fr 1fr;gap:12px}
  .hero__meta .stat{padding-top:10px}
  .hero__side{padding:22px}

  .clients__grid,.mandate__grid,.governance__grid,
  .custody__grid,.network__grid,.opps__grid,
  .why__grid,.facts__grid,
  .form-grid,
  .footer__top,.footer__cols,
  .clients__strip{grid-template-columns:1fr;gap:12px}

  .footer__top{gap:24px}
  .footer__cols{gap:28px}

  .timeline{grid-template-columns:1fr}
  .timeline-card{border-right:0;border-bottom:1px solid var(--border)}
  .timeline-card:last-child{border-bottom:0}
  [dir="rtl"] .timeline-card{border-left:0}

  .insight{
    grid-template-columns:1fr;
    gap:8px;padding:24px 0;
  }
  .insight .arrow{display:none}

  .section-number{top:16px;font-size:.7rem}
  .section{padding:60px 0}

  .floating-licence{
    right:12px;left:12px;bottom:12px;
    justify-content:center;
    font-size:.7rem;
    padding:8px 12px;
  }
  /* Hero needs breathing room at bottom to not clash with floating licence */
  .hero{padding-bottom:90px}

  .pillar-card__content{padding:28px 24px}
  .opp__body{padding:20px}

  .client-card,.mandate-card,.governance-card,
  .custody-card,.case-card,.network-card,
  .fact-card,.why-card{
    padding:28px 24px;min-height:auto;
  }
  .metric-panel,.callout,.private-box,
  .about__panel,.contact__panel,
  .page-card,.note-card{padding:28px 24px}

  .compliance-strip{margin-top:28px}
  .chip{font-size:.78rem}

  .btn{width:100%;padding:14px 22px}
  .actions .btn--text,.hero__actions .btn--text{width:auto}

  .fact-card .num{font-size:2rem}
  .manifesto__body{font-size:.95rem}
  .manifesto__lead .drop{font-size:3.6rem}
}

/* ---------- RESPONSIVE — Small mobile ---------- */
@media (max-width:480px){
  :root{--gutter:18px}
  .hero__headline{font-size:clamp(2.2rem, 11vw, 3.4rem)}
  .brand__sub{display:none}
  .brand__mark{width:30px;height:30px;font-size:.85rem}
  .brand__title{font-size:.78rem}
  .hero__meta{grid-template-columns:1fr 1fr;gap:14px}
  .hero__meta .stat:last-child{grid-column:1 / -1}
  .pillar-card__foot{flex-direction:column;align-items:flex-start}
  .opp__meta{flex-direction:column;gap:4px}
  .nav__inner{padding:12px var(--gutter)}
}

/* ---------- MOTION REDUCED ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .progress{display:none}
}

/* ---------- PRINT ---------- */
@media print{
  .nav,.floating-licence,.progress,.hero__scroll{display:none}
  .section{padding:24px 0;break-inside:avoid}
  .pillar-card,.panel{break-inside:avoid}
}
