/* ==========================================================================
   FinTech Studio — site.css
   One stylesheet. No build step, no framework, no JavaScript anywhere.
   Order: tokens · reset · type · layout · components · sections · motion · queries
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */

:root{
  /* Colour */
  --ink:#020203;
  --paper:#FFFFFF;
  --paper-2:#F5F5F7;
  --text:#1D1D1F;
  --text-muted:#6E6E73;
  --void:#000000;
  --text-inv:#F5F5F7;
  --text-inv-muted:#98989D;
  --signal:#0A5BFF;
  --signal-lift:#2F74FF;
  --signal-2:#6E4BFF;
  --line:rgb(0 0 0 / .10);
  --line-inv:rgb(255 255 255 / .14);

  /* Per-surface aliases. Sections flip these, components never flip. */
  --bg:var(--paper);
  --fg:var(--text);
  --fg-muted:var(--text-muted);
  --rule:var(--line);
  --card:var(--paper-2);

  /* Type */
  --font:-apple-system,BlinkMacSystemFont,"Inter","Helvetica Neue",Arial,sans-serif;
  --fs-hero:clamp(2.75rem,8vw,7rem);
  --fs-h2:clamp(2rem,5vw,4.25rem);
  --fs-manifest:clamp(1.6rem,3.4vw,2.875rem);
  --fs-h3:1.5rem;
  --fs-lead:clamp(1.125rem,1.6vw,1.5rem);
  --fs-body:1.0625rem;
  --fs-eyebrow:.75rem;
  --fs-fine:.8125rem;

  /* Space (8pt) */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --s6:64px; --s7:96px; --s8:128px; --s9:160px;

  /* Layout */
  --rail:1200px;
  --measure:68ch;
  --gutter:clamp(20px,5vw,80px);
  --ease:cubic-bezier(.32,.72,0,1);

  color-scheme:light;
}

@property --ccc{syntax:'<integer>';initial-value:0;inherits:false}
@property --spin{syntax:'<angle>';initial-value:0deg;inherits:false}

/* --- 2. Reset ------------------------------------------------------------ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--font);font-size:var(--fs-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}

:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--signal);outline-offset:3px;border-radius:4px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--void);color:var(--text-inv);padding:12px 20px;border-radius:0 0 12px 0;
}
.skip:focus{left:0}

/* --- 3. Type ------------------------------------------------------------- */

h1,h2{font-weight:700;text-wrap:balance}
h1{font-size:var(--fs-hero);letter-spacing:-.035em;line-height:1.02}
h2{font-size:var(--fs-h2);letter-spacing:-.03em;line-height:1.06}
h3{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.015em;line-height:1.3;text-wrap:balance}

.eyebrow{
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-muted);
}
.lead{font-size:var(--fs-lead);line-height:1.45;letter-spacing:-.01em;color:var(--fg-muted)}
.fine{font-size:var(--fs-fine);line-height:1.5;color:var(--fg-muted)}
.prose{max-width:var(--measure)}
.prose p + p{margin-top:var(--s3)}
strong{font-weight:600;color:var(--fg)}
em{font-style:italic}

/* --- 4. Layout ----------------------------------------------------------- */

.rail{max-width:var(--rail);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(var(--s7),13vh,var(--s9));position:relative}
.section--tall{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.stack{display:flex;flex-direction:column}
.stack-3{gap:var(--s3)} .stack-4{gap:var(--s4)}
.stack-5{gap:var(--s5)} .stack-6{gap:var(--s6)}

.grid{display:grid;gap:var(--s3)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Surfaces. A section sets the aliases once; everything inside follows. */
.on-dark{background:var(--void);color:var(--text-inv);
  --bg:var(--void);--fg:var(--text-inv);--fg-muted:var(--text-inv-muted);
  --rule:var(--line-inv);--card:rgb(255 255 255 / .05);}
.on-light{background:var(--paper);color:var(--text);
  --bg:var(--paper);--fg:var(--text);--fg-muted:var(--text-muted);
  --rule:var(--line);--card:var(--paper-2);}
.on-tint{background:var(--paper-2);color:var(--text);
  --bg:var(--paper-2);--fg:var(--text);--fg-muted:var(--text-muted);
  --rule:var(--line);--card:var(--paper);}

/* --- 5. Components ------------------------------------------------------- */

.logo{
  display:block;width:140px;aspect-ratio:67.167/34.667;
  background-color:currentColor;
  -webkit-mask:url("../img/logo.svg") no-repeat center/contain;
  mask:url("../img/logo.svg") no-repeat center/contain;
}
.logo--sm{width:108px}

.siteheader{position:relative;z-index:10;padding-block:var(--s3)}
.siteheader .inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px);flex-wrap:wrap}
.nav a{
  text-decoration:none;font-size:.9375rem;font-weight:500;letter-spacing:-.01em;
  color:var(--fg-muted);transition:color .2s var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--fg)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:980px;padding:14px 26px;border:1px solid transparent;
  font-size:1rem;font-weight:600;letter-spacing:-.01em;text-decoration:none;
  transition:transform .25s var(--ease),background-color .25s var(--ease),border-color .25s var(--ease);
}
.btn-primary{background:var(--signal);color:#fff}
.btn-primary:hover{background:var(--signal-lift);transform:translateY(-1px)}
.btn-ghost{border-color:var(--rule);color:var(--fg)}
.btn-ghost:hover{border-color:var(--fg-muted);transform:translateY(-1px)}
.btn-sm{padding:10px 20px;font-size:.9375rem}

.card{
  border:1px solid var(--rule);border-radius:18px;padding:var(--s4);
  background:var(--card);display:flex;flex-direction:column;gap:var(--s2);
}
.card h3{margin:0}
.card .meta{font-size:var(--fs-fine);color:var(--fg-muted)}

.steps{counter-reset:step;display:grid;gap:var(--s3);grid-template-columns:repeat(4,minmax(0,1fr))}
.step{display:flex;flex-direction:column;gap:var(--s2);padding-top:var(--s3);border-top:1px solid var(--rule)}
.step .num{font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.16em;color:var(--fg-muted)}

.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--rule)}
.fact{padding:var(--s4) var(--s3) 0 0;border-right:1px solid var(--rule)}
.fact:last-child{border-right:0}
.fact .big{font-size:clamp(1.75rem,3.4vw,2.75rem);font-weight:700;letter-spacing:-.03em;line-height:1.05}
.fact p{margin-top:var(--s1);font-size:var(--fs-fine);color:var(--fg-muted)}

table.data{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
table.data caption{text-align:left;padding-bottom:var(--s2);font-size:var(--fs-fine);color:var(--fg-muted)}
table.data th,table.data td{
  text-align:left;padding:14px 16px 14px 0;border-bottom:1px solid var(--rule);vertical-align:top;
}
table.data thead th{
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted);
}
table.data td.num,table.data th.num{text-align:right;padding-right:0}
table.data tbody tr:last-child td{border-bottom:0}
table.data tr.total td{font-weight:600;border-top:1px solid var(--fg);border-bottom:0}
.tablewrap{overflow-x:auto}

.ledger{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
.ledger h3{margin-bottom:var(--s3)}
.ledger li{padding:14px 0;border-bottom:1px solid var(--rule)}
.ledger li:last-child{border-bottom:0}

.thesis{padding-block:var(--s6);border-top:1px solid var(--rule)}
.thesis:first-of-type{border-top:0}
.thesis .status{
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--signal);
}
.thesis .status.is-next{color:var(--fg-muted)}
.thesis h3{font-size:clamp(1.5rem,2.6vw,2.125rem);letter-spacing:-.022em;margin-block:var(--s2) var(--s3)}
.thesis dl{display:grid;gap:var(--s3);max-width:var(--measure)}
.thesis dt{
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-muted);margin-bottom:6px;
}
.thesis dd{margin:0}

.people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.person .portrait{
  aspect-ratio:4/5;border-radius:18px;background:var(--card);
  border:1px solid var(--rule);margin-bottom:var(--s3);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-fine);color:var(--fg-muted);text-align:center;padding:var(--s3);
}
.person h3{margin-bottom:4px}
.person .role{font-size:var(--fs-fine);color:var(--fg-muted);margin-bottom:var(--s2)}

.closer{border-top:1px solid var(--rule)}
.closer h2{max-width:20ch}

.sitefooter{padding-block:var(--s6) var(--s5);border-top:1px solid var(--rule)}
.sitefooter .row{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);justify-content:space-between;align-items:flex-end}
.sitefooter nav{display:flex;flex-wrap:wrap;gap:var(--s3)}
.sitefooter a{font-size:.9375rem;color:var(--fg-muted);text-decoration:none}
.sitefooter a:hover{color:var(--fg)}
.sitefooter .mail{color:var(--fg);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule)}

.todo{
  border:1px dashed var(--rule);border-radius:18px;padding:var(--s4);
  background:var(--card);font-size:var(--fs-fine);color:var(--fg-muted);
}
.todo strong{color:var(--fg)}

/* --- 6. Sections --------------------------------------------------------- */

/* 01 Hero */
.hero{overflow:hidden;min-height:92svh;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(var(--s7),14vh,180px)}
.hero::before{
  content:"";position:absolute;inset:-40%;z-index:0;pointer-events:none;
  background:conic-gradient(from var(--spin),
    rgb(47 116 255 / .18), rgb(110 75 255 / .11), transparent 45%, transparent 75%, rgb(47 116 255 / .18));
  filter:blur(90px);
}
.hero > *{position:relative;z-index:1}
.hero h1{max-width:16ch}
.hero .lead{margin-top:var(--s4);max-width:56ch}
.hero .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(var(--s4),5vh,var(--s5))}

/* 02 Manifest */
.manifest{max-width:28ch;font-size:var(--fs-manifest);font-weight:600;
  letter-spacing:-.022em;line-height:1.2;color:var(--fg)}
.manifest w{color:var(--fg-muted)}

/* 03 Inversion */
.inversion{height:320vh}
.invStage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(var(--s6),8vh,120px)}
.invStage h2{max-width:18ch}
.readout{display:flex;align-items:baseline;gap:14px;margin-top:clamp(var(--s5),6vh,var(--s7))}
.counter{font-size:clamp(3.5rem,11vw,9rem);font-weight:700;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--fg-muted)}
.counter::after{counter-reset:ccc var(--ccc);content:counter(ccc)}
.counter-unit{font-size:clamp(1rem,2vw,1.75rem);font-weight:600;color:var(--fg-muted);letter-spacing:-.01em}
.track{position:relative;height:84px;margin-top:clamp(var(--s3),4vh,var(--s5))}
.axis{position:absolute;inset-inline:0;top:40px;height:1px;background:var(--rule)}
.zero{position:absolute;left:50%;top:8px;bottom:22px;width:1px;background:rgb(255 255 255 / .34)}
.zeroLabel{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.14em;color:var(--fg-muted)}
.bar{position:absolute;top:28px;height:24px;border-radius:12px;transform:scaleX(0)}
.bar-pos{left:50%;width:42%;transform-origin:left center;background:rgb(255 255 255 / .32)}
.bar-neg{right:50%;width:34%;transform-origin:right center;transform:scaleX(1);
  background:linear-gradient(90deg,var(--signal-2),var(--signal-lift))}

/* 06 Two routes */
.routes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
.route{border-top:1px solid var(--rule);padding-top:var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.route h3{font-size:clamp(1.375rem,2.2vw,1.75rem);letter-spacing:-.02em}

/* 09 WALBING */
.partner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--s6);align-items:start}
.partner .wordmark{font-size:clamp(2rem,4.5vw,3.5rem);font-weight:700;letter-spacing:-.03em;line-height:1}

/* --- 7. Motion ----------------------------------------------------------- */

@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes spin{to{--spin:360deg}}
@keyframes lighten{from{color:var(--fg-muted)}to{color:var(--fg)}}
@keyframes growPos{0%{transform:scaleX(0)}34%{transform:scaleX(1)}58%,100%{transform:scaleX(0)}}
@keyframes growNeg{0%,58%{transform:scaleX(0)}88%,100%{transform:scaleX(1)}}
@keyframes count{0%{--ccc:0}34%{--ccc:60}58%{--ccc:0}88%,100%{--ccc:-42}}
@keyframes tint{0%,60%{color:var(--fg-muted)}88%,100%{color:var(--signal-lift)}}

.hero h1,.hero .lead,.hero .actions{animation:rise .8s var(--ease) backwards}
.hero .lead{animation-delay:.08s}
.hero .actions{animation-delay:.16s}
.hero::before{animation:spin 48s linear infinite}

@supports (animation-timeline:view()){
  .manifest w{
    animation:lighten linear both;animation-timeline:view(block);
    animation-range:entry 42% contain calc(14% + var(--i) * 1.45%);
  }
  .reveal{
    animation:rise .9s var(--ease) both;animation-timeline:view(block);
    animation-range:entry 10% entry 90%;
  }
  .inversion{view-timeline-name:--inv;view-timeline-axis:block}
  .bar-pos{animation:growPos linear both;animation-timeline:--inv;animation-range:contain 0% contain 100%}
  .bar-neg{animation:growNeg linear both;animation-timeline:--inv;animation-range:contain 0% contain 100%}
  .counter{
    animation:count linear both,tint linear both;
    animation-timeline:--inv,--inv;
    animation-range:contain 0% contain 100%,contain 0% contain 100%;
  }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .manifest w{color:var(--fg)}
  .inversion{height:auto}
  .invStage{position:static;height:auto;min-height:0}
  .bar-pos{transform:scaleX(0)}
  .bar-neg{transform:scaleX(1)}
  .counter{color:var(--signal-lift)}
  .counter::after{content:"\2212 42"}
}

/* --- 8. Queries ---------------------------------------------------------- */

@media (max-width:900px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fact:nth-child(2){border-right:0}
  .people{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
  .partner{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:640px){
  .steps,.facts,.ledger,.routes,.people,.grid-2,.grid-3{grid-template-columns:minmax(0,1fr)}
  .fact{border-right:0;border-bottom:1px solid var(--rule);padding-bottom:var(--s3)}
  .fact:last-child{border-bottom:0}
  .track{height:72px}
  .bar-pos{width:38%}
  .bar-neg{width:32%}
  .nav{gap:14px}
  .nav .nav-hide{display:none}
  .sitefooter .row{align-items:flex-start}
}

@media print{
  .hero::before,.siteheader{display:none}
  .inversion{height:auto}
  .invStage{position:static;height:auto}
  body{background:#fff;color:#000}
}