/* =============================================================================
   Trade Symbiotic shared design system
   Loaded by every page. Holds tokens, nav, footer, buttons, reveal animations,
   language switcher, and section primitives. Page-specific layouts live inline
   inside each page's <style> block.
   ========================================================================== */

@font-face {
  font-family:'Geist'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('/assets/fonts/Geist-Variable.woff2') format('woff2');
}

:root {
  --bg:#070A10; --bg-2:#0A0E16; --surface:#10151F; --surface-2:#161D2A; --surface-3:#1C2433;
  --line:rgba(255,255,255,0.07); --line-2:rgba(255,255,255,0.14);
  --text:#F1F4F9; --text-2:#98A2B4; --text-3:#7E8694;
  --teal:#00A19C; --teal-lt:#3BD8D0; --teal-deep:#0B403E;
  --coral:#C97C67; --coral-lt:#E2A593; --coral-deep:#5A382F;
  --pos:#3FD17F; --neg:#EC5B53;
  /* AR/HE families appended after system-ui: only reached for Arabic/Hebrew glyphs
     (Geist has none); Latin always resolves to Geist first, so LTR is unaffected. */
  --display:"Geist","Inter",ui-sans-serif,system-ui,"Geeza Pro","Noto Sans Arabic","Noto Naskh Arabic","Arial Hebrew","Noto Sans Hebrew",sans-serif;
  --body:"Geist","Inter",ui-sans-serif,system-ui,"Geeza Pro","Noto Sans Arabic","Noto Naskh Arabic","Arial Hebrew","Noto Sans Hebrew",sans-serif;
  --mono:"Geist","Inter",ui-sans-serif,system-ui,"Geeza Pro","Noto Sans Arabic","Noto Naskh Arabic","Arial Hebrew","Noto Sans Hebrew",sans-serif;
  --maxw:1200px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:var(--body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--teal); color:#04211F; }
img, svg { display:block; max-width:100%; }

/* Ambient background: orb glow + grid + grain */
.bg-fx { position:fixed; inset:0; z-index:-2; pointer-events:none; }
.bg-fx .grid { position:absolute; inset:0; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 75%); mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 75%); opacity:0.5; }
.bg-fx .orb { position:absolute; border-radius:50%; filter:blur(90px); opacity:0.5; }
.bg-fx .orb-1 { width:620px; height:620px; top:-260px; left:-160px; background:radial-gradient(circle,rgba(0,161,156,0.30),transparent 70%); animation:drift1 26s var(--ease) infinite alternate; }
.bg-fx .orb-2 { width:520px; height:520px; top:200px; right:-200px; background:radial-gradient(circle,rgba(201,124,103,0.20),transparent 70%); animation:drift2 32s var(--ease) infinite alternate; }
@keyframes drift1 { to { transform:translate(120px,80px) scale(1.15); } }
@keyframes drift2 { to { transform:translate(-100px,120px) scale(1.1); } }
.grain { position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:0.04; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Layout helpers */
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 36px; }
.eyebrow { font-family:var(--mono); font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--teal-lt); display:inline-flex; align-items:center; gap:9px; }
.eyebrow::before { content:""; width:6px; height:6px; background:var(--teal-lt); border-radius:50%; box-shadow:0 0 10px var(--teal-lt); animation:blink 2.4s infinite; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.25;} }
.eyebrow.c { color:var(--coral-lt); } .eyebrow.c::before { background:var(--coral-lt); box-shadow:0 0 10px var(--coral-lt); }

/* Buttons: conic-gradient border w/ JS-driven angle, shimmer sweep on hover */
@property --btn-angle { syntax:'<angle>'; initial-value:0deg; inherits:true; }
@keyframes btnSweep { 0% { transform:translateX(-160%) skewX(-14deg); } 100% { transform:translateX(220%) skewX(-14deg); } }
.btn { font-family:var(--body); font-weight:500; font-size:14.5px; padding:13px 22px; border-radius:11px; cursor:pointer; border:none; white-space:nowrap; transition:transform .14s var(--ease), background .25s ease, box-shadow .35s ease, color .25s ease; display:inline-flex; align-items:center; gap:9px; will-change:transform; position:relative; overflow:hidden; isolation:isolate; text-decoration:none; }
.btn::before { content:''; position:absolute; inset:0; border-radius:inherit; padding:2.5px; background:conic-gradient(from var(--btn-angle,0deg), var(--coral) 0deg, var(--coral-lt) 22deg, rgba(201,124,103,0.30) 58deg, rgba(255,255,255,0.04) 90deg, rgba(0,161,156,0.30) 122deg, var(--teal-lt) 158deg, var(--teal) 180deg, var(--teal-lt) 202deg, rgba(0,161,156,0.30) 238deg, rgba(255,255,255,0.04) 270deg, rgba(201,124,103,0.30) 302deg, var(--coral-lt) 338deg, var(--coral) 360deg); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; opacity:0.72; transition:opacity .4s ease, filter .4s ease; }
/* Shimmer glaze runs CONTINUOUSLY in the background so there's no hard start/stop on hover.
   We only fade the opacity in/out, which lets the moving sweep ramp in and ramp out smoothly. */
.btn::after  { content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.22) 50%, transparent 62%); pointer-events:none; transform:translateX(-160%) skewX(-14deg); opacity:0; transition:opacity .55s ease; mix-blend-mode:overlay; animation:btnSweep 2s linear infinite; will-change:transform, opacity; }
.btn-ghost::after { background:linear-gradient(105deg, transparent 36%, rgba(255,255,255,0.28) 50%, transparent 64%); }
.btn:hover::before { opacity:1; filter:brightness(1.22); }
.btn:hover::after  { opacity:1; }
.btn-primary { background:var(--teal); color:#04211F; box-shadow:0 0 22px -8px rgba(0,161,156,0.45), 0 0 0 0 rgba(201,124,103,0); }
.btn-primary:hover { background:var(--teal-lt); box-shadow:0 14px 44px -8px rgba(59,216,208,0.55), 0 0 30px -2px rgba(201,124,103,0.35); }
.btn-ghost { background:rgba(255,255,255,0.03); color:var(--text); }
.btn-ghost:hover { background:var(--surface-2); box-shadow:0 8px 30px -10px rgba(59,216,208,0.3), 0 0 22px -4px rgba(201,124,103,0.22); }
.btn-lg { padding:16px 30px; font-size:15.5px; border-radius:13px; }
.btn-sm { padding:9px 16px; font-size:13px; border-radius:9px; }
.btn-xs { padding:6px 11px; font-size:11.5px; border-radius:7px; gap:6px; }
.btn-xs::before { padding:1.6px; }
.btn .arrow { transition:transform .2s var(--ease); }
.btn:hover .arrow { transform:translateX(3px); }

/* Navigation */
nav { position:sticky; top:0; z-index:80; border-bottom:1px solid transparent; transition:background .3s,border-color .3s,backdrop-filter .3s; }
nav.scrolled { background:rgba(7,10,16,0.55); backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%); border-color:var(--line); }
.nav-in { display:flex; align-items:center; justify-content:space-between; height:76px; }
.brand { font-family:var(--display); font-weight:600; font-size:20px; letter-spacing:-0.01em; display:flex; align-items:center; gap:11px; color:var(--text); }
.brand .mark { position:relative; width:30px; height:20px; }
.brand .mark span { position:absolute; width:20px; height:20px; border-radius:50%; }
.brand .mark .m1 { left:0; background:var(--teal); }
.brand .mark .m2 { left:10px; background:var(--coral); mix-blend-mode:screen; }
.nav-collapse { display:flex; align-items:center; gap:32px; }
.nav-links { display:flex; align-items:baseline; gap:28px; }
.nav-links a { font-size:14.5px; color:var(--text-2); transition:color .18s; position:relative; }
.nav-links a:hover { color:var(--text); }
.nav-links a.is-active { color:var(--text); }
.nav-links a.is-active::after { content:''; position:absolute; left:0; right:0; bottom:-26px; height:2px; background:linear-gradient(90deg,var(--teal),var(--coral)); border-radius:2px; }

/* Indicator dropdown */
.nav-dd { position:relative; }
.nav-dd-trigger { display:inline-flex; align-items:center; gap:6px; font-family:inherit; font-size:14.5px; line-height:1.6; color:var(--text-2); background:transparent; border:none; padding:0; cursor:pointer; transition:color .18s; }
.nav-dd-trigger:hover { color:var(--text); }
.nav-dd-trigger.is-active { color:var(--text); }
.nav-dd-chev { color:var(--teal-lt); transition:transform .2s var(--ease); }
.nav-dd:hover .nav-dd-chev,
.nav-dd.open .nav-dd-chev { transform:rotate(180deg); }
.nav-dd-menu { display:none; position:absolute; left:0; top:34px; background:var(--surface); border:1px solid var(--line-2); border-radius:12px; padding:6px; min-width:178px; box-shadow:0 24px 50px -16px rgba(0,0,0,0.7); z-index:90; }
.nav-dd-menu::before { content:""; position:absolute; left:0; right:0; top:-22px; height:22px; }
.nav-dd:hover .nav-dd-menu,
.nav-dd.open .nav-dd-menu { display:block; }
.nav-dd-menu a { display:block; color:var(--text-2); font-size:13.5px; padding:9px 11px; border-radius:8px; transition:color .18s,background .18s; }
.nav-dd-menu a:hover,
.nav-dd-menu a.is-active { background:rgba(255,255,255,0.04); color:var(--text); }
.nav-dd-menu a.is-active::after { display:none; }

.nav-cta { display:flex; align-items:center; gap:12px; }
.nav-toggle { display:none; width:42px; height:42px; background:transparent; border:1px solid var(--line-2); border-radius:10px; color:var(--text); cursor:pointer; align-items:center; justify-content:center; }
.nav-toggle .ic-close { display:none; }
.nav-toggle.is-open .ic-menu { display:none; } .nav-toggle.is-open .ic-close { display:block; }

/* Language switcher */
.lang { position:relative; }
.lang-btn { display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px; color:var(--text-2); background:rgba(255,255,255,0.03); border:1px solid var(--line-2); border-radius:9px; padding:9px 11px; cursor:pointer; }
.lang-btn:hover { color:var(--text); }
.lang-menu { display:none; position:absolute; right:0; top:48px; background:var(--surface); border:1px solid var(--line-2); border-radius:12px; padding:6px; min-width:332px; box-shadow:0 24px 50px -16px rgba(0,0,0,0.7); z-index:120; }
.lang-menu.open { display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.lang-menu button { display:flex; width:100%; justify-content:space-between; gap:8px; background:transparent; border:none; color:var(--text-2); font-family:var(--body); font-size:13.5px; padding:9px 11px; border-radius:8px; cursor:pointer; }
.lang-menu button:hover { background:var(--surface-2); color:var(--text); }
.lang-menu .lc { font-family:var(--mono); font-size:10.5px; color:var(--text-3); }

/* Reveal-on-scroll */
.rv { opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease),transform .7s var(--ease); }
.rv.in { opacity:1; transform:none; }
.rv-d1 { transition-delay:.08s; } .rv-d2 { transition-delay:.16s; } .rv-d3 { transition-delay:.24s; } .rv-d4 { transition-delay:.32s; }
.reveal-up { opacity:0; transform:translateY(20px); }

/* Section primitives */
section { position:relative; padding:clamp(72px,9vw,128px) 0; }
.sec-tag { display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; margin-bottom:56px; }
.sec-tag h2 { font-family:var(--display); font-weight:600; font-size:clamp(2rem,4.4vw,3rem); letter-spacing:-0.032em; line-height:1.05; max-width:660px; }
.sec-tag p { font-size:15.5px; color:var(--text-2); max-width:540px; }
.sec-tag.left { align-items:flex-start; text-align:start; }
.sec-tag.left h2, .sec-tag.left p { max-width:760px; }

/* Page hero: reused on every subpage */
.page-hero { position:relative; padding:74px 0 60px; border-bottom:1px solid var(--line); }
.page-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(0,161,156,0.10),transparent 70%); pointer-events:none; }
.page-hero-in { position:relative; max-width:880px; margin:0 auto; text-align:center; padding:0 36px; }
.page-hero h1 { font-family:var(--display); font-weight:600; letter-spacing:-0.034em; line-height:1.02; font-size:clamp(2.6rem,5.4vw,4.2rem); margin:14px 0 18px; }
.page-hero h1 .accent { color:var(--teal-lt); }
.page-hero h1 .accent.coral { color:var(--coral-lt); }
.page-hero > .page-hero-in > p { font-size:clamp(1rem,1.4vw,1.15rem); color:var(--text-2); max-width:640px; margin:0 auto; }
.page-hero.tight { padding:60px 0 36px; }

/* Footer */
footer { border-top:1px solid var(--line); padding:60px 0 40px; margin-top:80px; }
.foot-top { display:flex; justify-content:space-between; gap:48px; flex-wrap:wrap; margin-bottom:36px; }
.foot-brand { max-width:300px; }
.foot-brand .brand { margin-bottom:14px; }
.foot-brand p { font-size:13px; color:var(--text-3); }
.foot-cols { display:flex; gap:60px; flex-wrap:wrap; }
.foot-col h2 { font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; color:var(--text-3); margin-bottom:14px; }
.foot-col a { display:block; font-size:13.5px; color:var(--text-2); padding:5px 0; transition:color .16s; }
.foot-col a:hover { color:var(--teal-lt); }
.disclosure { background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:22px 26px; margin-bottom:28px; }
.disclosure h2 { font-family:var(--mono); font-size:10.5px; letter-spacing:0.07em; color:var(--text-2); margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.disclosure h2 svg { color:#F0B429; }
.disclosure p { font-size:12px; color:var(--text-3); line-height:1.65; }
.foot-bottom { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:24px; }
.foot-bottom .cc { font-family:var(--mono); font-size:11.5px; color:var(--text-3); }
.foot-bottom .mini { display:flex; gap:18px; }
.foot-bottom .mini a { font-size:11.5px; color:var(--text-3); }
.foot-bottom .mini a:hover { color:var(--teal-lt); }

/* Final CTA box (used in many pages) */
.final-box { position:relative; border:1px solid var(--line-2); border-radius:24px; padding:clamp(48px,7vw,84px) 40px; text-align:center; overflow:hidden; background:linear-gradient(180deg,var(--surface),var(--bg-2)); }
.final-box .fg { position:absolute; inset:0; background:radial-gradient(ellipse 60% 80% at 50% 0%,rgba(0,161,156,0.22),transparent 70%); pointer-events:none; }
.final-box .fgrid { position:absolute; inset:0; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:48px 48px; -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 100%,#000,transparent 70%); mask-image:radial-gradient(ellipse 70% 70% at 50% 100%,#000,transparent 70%); opacity:0.6; }
.final-box h2 { position:relative; font-family:var(--display); font-weight:600; font-size:clamp(2rem,4.6vw,3.2rem); letter-spacing:-0.034em; line-height:1.04; }
.final-box p { position:relative; color:var(--text-2); font-size:16px; margin:16px auto 30px; max-width:440px; }
.final-box .cta-row { position:relative; display:flex; gap:13px; justify-content:center; flex-wrap:wrap; }

/* Card: base for many surfaces */
.card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:28px; }
.card:hover { border-color:var(--line-2); }

/* Breadcrumb */
.crumb { font-family:var(--mono); font-size:11.5px; color:var(--text-3); letter-spacing:0.06em; text-transform:uppercase; }
.crumb a { color:var(--text-2); transition:color .18s; }
.crumb a:hover { color:var(--text); }
.crumb .sep { margin:0 8px; color:var(--text-3); }

/* Signal pill (used in markets & analysis) */
.sig-pill { font-family:var(--mono); font-size:11px; letter-spacing:0.1em; padding:4px 10px; border-radius:7px; text-transform:uppercase; white-space:nowrap; }
.sig-pill.long { background:rgba(0,161,156,0.18); color:var(--teal-lt); }
.sig-pill.short { background:rgba(201,124,103,0.18); color:var(--coral-lt); }
.sig-pill.neutral { background:rgba(107,126,138,0.16); color:var(--text-3); }

/* ── Responsive base ───────────────────────────────────────────────────── */

/* Tablet: nav collapses, footer + page-hero tighten */
@media (max-width:920px) {
  .nav-toggle { display:flex; }
  .nav-collapse { position:absolute; top:76px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--bg-2); border-bottom:1px solid var(--line); padding:8px 0 20px; display:none; max-height:calc(100vh - 76px); overflow-y:auto; }
  .nav-collapse.open { display:flex; }
  .nav-links { flex-direction:column; align-items:stretch; gap:0; }
  .nav-links a { padding:14px 28px; font-size:15px; border-bottom:1px solid var(--line); }
  .nav-links a.is-active::after { display:none; }
  .nav-dd-trigger { width:100%; justify-content:space-between; padding:14px 28px; font-size:15px; border-bottom:1px solid var(--line); }
  .nav-dd-menu { position:static; display:block; border:none; border-radius:0; box-shadow:none; background:transparent; padding:0; min-width:0; max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
  .nav-dd-menu::before { display:none; }
  .nav-dd.open .nav-dd-menu { max-height:200px; }
  .nav-dd-menu a { padding:13px 28px 13px 40px; font-size:14.5px; border-bottom:1px solid var(--line); border-radius:0; }
  /* nav-cta flattens so the language picker can sit at the TOP of the mobile menu
     (order:-1) while the buttons stay at the bottom — no DOM change, desktop intact. */
  .nav-cta { display:contents; }
  .nav-cta .btn { width:auto; justify-content:center; margin:10px 28px 0; }
  .lang { order:-1; width:auto; padding:14px 28px; border-bottom:1px solid var(--line); }
  .lang-btn { width:100%; justify-content:center; }
  .lang-menu { left:28px; right:28px; min-width:0; top:56px; max-height:calc(100vh - 180px); overflow-y:auto; overscroll-behavior:contain; }
  .foot-top { gap:36px; }
  .foot-cols { gap:28px 36px; }
  .page-hero { padding:48px 0 40px; }
  section { padding:clamp(48px,9vw,96px) 0; }
}

/* Phablet: wrap padding tightens, hero text trims, footer down to 2-col */
@media (max-width:720px) {
  .wrap { padding:0 22px; }
  .page-hero-in { padding:0 22px; }
  .page-hero h1 { font-size:clamp(2.1rem,8vw,3rem); }
  .sec-tag h2 { font-size:clamp(1.7rem,6vw,2.4rem); }
  .sec-tag p, .page-hero > .page-hero-in > p { font-size:14.5px; }
  .foot-cols { gap:24px 24px; }
  .foot-top { gap:28px; }
  .foot-brand { max-width:100%; }
  .foot-col { min-width:130px; }
  .final-box { padding:42px 22px; border-radius:18px; }
  .final-box h2 { font-size:clamp(1.7rem,6.5vw,2.4rem); }
  .final-box p { font-size:15px; }
  .card { padding:22px; }
}

/* Phone: full mobile compaction */
@media (max-width:520px) {
  .wrap { padding:0 18px; }
  .page-hero-in { padding:0 18px; }
  .page-hero { padding:36px 0 28px; }
  .page-hero h1 { font-size:clamp(1.95rem,9vw,2.6rem); line-height:1.06; }
  .page-hero > .page-hero-in > p { font-size:14px; }
  section { padding:48px 0; }
  .nav-in { height:64px; }
  .brand { font-size:17px; }
  .brand .mark { width:26px; height:18px; }
  .brand .mark span { width:18px; height:18px; }
  .brand .mark .m2 { left:8px; }
  .nav-collapse { top:64px; max-height:calc(100vh - 64px); }
  .nav-toggle { width:38px; height:38px; }
  .btn { padding:12px 18px; font-size:14px; }
  .btn-lg { padding:14px 24px; font-size:15px; }
  .foot-cols { grid-template-columns:1fr 1fr; gap:24px; display:grid; }
  .foot-brand p { font-size:12.5px; }
  .disclosure { padding:18px; }
  .disclosure p { font-size:11.5px; }
  .foot-bottom { gap:10px; }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ── RTL (Arabic / Hebrew) ──────────────────────────────────────────────────
   dir="rtl" on <html> already auto-mirrors the flex/grid layout, text flow, and
   text-align (default + logical `start`). These overrides fix the few rules
   pinned to a physical edge or nudging in a physical direction. Scoped to
   [dir=rtl] so the 16 LTR locales are completely untouched. */
[dir="rtl"] .nav-dd-menu { left:auto; right:0; }
[dir="rtl"] .nav-dd-menu::before { left:auto; right:0; }
[dir="rtl"] .lang-menu { right:auto; left:0; }
[dir="rtl"] .btn:hover .arrow { transform:translateX(-3px); }   /* nudge toward the RTL reading edge */
@media (max-width:920px) {
  [dir="rtl"] .nav-dd-menu a { padding:13px 40px 13px 28px; }   /* deeper indent on the inline-start (right) edge */
}