/* Design system rebuilt from the Fintech template (measured at 1440): ink #04050B, card #0A0B11, white sections #F5F5F5,
   green gradient #05C51F → #00A115, accent #18E933, Manrope headings, Inter text. */
:root {
  --ink: #04050b; --card: #0a0b11; --paper: #f5f5f5; --white: #fff;
  --mute: rgba(255, 255, 255, .72); --mute2: rgba(255, 255, 255, .48); --grey: #686868; --line: rgba(255, 255, 255, .08);
  --green: #18e933; --green-a: #05c51f; --green-b: #00a115; --mint: #2aed78; --blue: #3b6cff; --red: #ff4d4d; --amber: #f5b638;
  --w: 1040px; --pad: 200px;
  --spring: cubic-bezier(.22, 1.2, .36, 1);
  --ease: cubic-bezier(.25, .1, .25, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { background: var(--ink); color: var(--white); font: 400 16px/1.2 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--green); color: var(--ink); }
.wrap { width: min(var(--w), calc(100% - 48px)); margin: 0 auto; position: relative; }
.mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---------- type ---------- */
.h1 { font: 700 64px/1.1 Manrope, Inter, sans-serif; letter-spacing: 0; }
.h2 { font: 600 52px/1.1 Inter, sans-serif; }
.grad { background: linear-gradient(323deg, rgba(255, 255, 255, .6) 36%, #fff 49%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad::selection { -webkit-text-fill-color: var(--ink); }
.lead { font-size: 18px; line-height: 25.2px; letter-spacing: .18px; color: var(--mute); }
.p { font-size: 16px; line-height: 19.2px; color: var(--mute); }
.light .h2 { color: var(--ink); }
.light .p { color: var(--grey); }

/* ---------- buttons (template: gradient border + inner fill + inset shine) ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 17px; border-radius: 8px; border: 0; cursor: pointer; white-space: nowrap;
  font: 400 16px/19.2px Inter, sans-serif; color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .04) 100%); isolation: isolate; transition: transform .25s var(--spring), filter .25s; }
.btn::before { content: ''; position: absolute; inset: 1px; border-radius: 7px; z-index: -1; background: linear-gradient(180deg, var(--green-a) 0%, var(--green-b) 100%); }
.btn::after { content: ''; position: absolute; inset: 1px; border-radius: 7px; z-index: -1; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03)); box-shadow: inset 0 4px 6.2px -4px rgba(255, 255, 255, .25); }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(.97); }
.btn.dark { height: 37px; padding: 0 17px; background: linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .04) 100%); }
.btn.dark::before { background: var(--ink); }
.btn.dark::after { background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .12)); opacity: .5; }
.btn.grey { background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .06)); }
.btn.grey::before { background: linear-gradient(180deg, #5b5c62, #3a3b41); }
.btn .arr { width: 20px; height: 20px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; }
.btn .arr svg { width: 10px; height: 10px; }
.btn.sm { height: 29px; font-size: 12px; padding: 0 12px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.tlink { display: inline-flex; align-items: center; height: 40px; color: #fff; transition: color .2s; }
.tlink:hover { color: var(--green); }

/* ---------- nav ---------- */
.nav { position: fixed; top: 24px; left: 50%; transform: translateX(-50%); width: min(var(--w), calc(100% - 32px)); height: 56px; z-index: 50; border-radius: 16px;
  background: rgba(255, 255, 255, .05); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: space-between; padding: 0 12px;
  transition: background .4s var(--ease), box-shadow .4s var(--ease); }
.nav .logo { display: flex; align-items: center; gap: 8px; height: 22px; font: 700 19px/1 Manrope, sans-serif; color: #fff; transition: color .4s; }
.nav .logo svg { height: 22px; width: auto; }
.logo-face { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px rgba(24, 233, 51, .55); }
.wordmark { font: 700 21px/1 'IBM Plex Sans', Inter, sans-serif; letter-spacing: -.03em; }
.soon-x { display: block; font-size: 15px; color: var(--mute2); line-height: 1.4; }
.nav .links { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 0; }
.nav .links a { font-size: 16px; color: #fff; padding: 0 8px; transition: color .2s; }
.nav .links a:hover, .nav .links a.on { color: var(--green); }
.nav .links i { font-style: normal; color: var(--mute2); }
.nav .right { display: flex; align-items: center; gap: 12px; }
.nav .burger { display: none; width: 40px; height: 40px; border-radius: 8px; border: 0; background: rgba(255, 255, 255, .06); cursor: pointer; place-items: center; }
.nav .burger span { display: block; width: 16px; height: 1.5px; background: #fff; margin: 3px auto; transition: transform .3s, opacity .3s; }
body.over-light .nav { background: rgba(4, 5, 11, .8); }
.drawer { position: fixed; inset: 92px 16px auto; z-index: 49; background: rgba(10, 11, 17, .96); border: 1px solid var(--line); border-radius: 16px; padding: 12px; display: none; flex-direction: column; backdrop-filter: blur(12px); }
.drawer a { padding: 14px 12px; border-radius: 10px; font-size: 17px; }
.drawer a:hover { background: rgba(255, 255, 255, .05); }
.drawer .btn { margin-top: 8px; }
body.menu .drawer { display: flex; }
body.menu .burger span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
body.menu .burger span:nth-child(2) { opacity: 0; }
body.menu .burger span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

/* ---------- sections ---------- */
.sec { position: relative; }
.dark-grid { background: var(--ink) url(/img/tpl/dark-grid.png) repeat; }
.light { background: var(--paper); color: var(--ink); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }

/* light rays canvas (port of the template's Light Rays component) */
.rays { position: absolute; left: 0; top: 0; width: 1024px; height: 803px; pointer-events: none; z-index: 0; }
.rays canvas { width: 100% !important; height: 100% !important; display: block; }

/* hairline with a travelling green beam (template "Line Animation") */
.beam-line { position: relative; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .08) 15%, rgba(255, 255, 255, .08) 85%, rgba(255, 255, 255, 0)); overflow: hidden; }
.beam-line::after { content: ''; position: absolute; top: 0; left: 0; width: 70px; height: 1px; background: linear-gradient(90deg, rgba(24, 233, 51, 0), var(--green), rgba(24, 233, 51, 0)); animation: beam 4.6s linear infinite; }
@keyframes beam { from { transform: translateX(-70px); } to { transform: translateX(1300px); } }

/* ---------- reveal (template appear: y 85 → 0, opacity 0 → 1, spring 150/40) ---------- */
/* the template's spring (stiffness 150, damping 40, mass 1) sampled into linear(); fallback: an ease-out close to it */
:root { --appear: cubic-bezier(.12, .8, .3, 1); }
@supports (transition-timing-function: linear(0, 1)) { :root { --appear: linear(0.0000 0.0%, 0.0740 2.5%, 0.1978 5.0%, 0.3172 7.5%, 0.4216 10.0%, 0.5108 12.5%, 0.5864 15.0%, 0.6504 17.5%, 0.7046 20.0%, 0.7503 22.5%, 0.7891 25.0%, 0.8218 27.5%, 0.8495 30.0%, 0.8730 32.5%, 0.8928 35.0%, 0.9095 37.5%, 0.9237 40.0%, 0.9357 42.5%, 0.9458 45.0%, 0.9544 47.5%, 0.9616 50.0%, 0.9678 52.5%, 0.9730 55.0%, 0.9773 57.5%, 0.9811 60.0%, 0.9842 62.5%, 0.9868 65.0%, 0.9891 67.5%, 0.9910 70.0%, 0.9926 72.5%, 0.9940 75.0%, 0.9951 77.5%, 0.9961 80.0%, 0.9969 82.5%, 0.9976 85.0%, 0.9982 87.5%, 0.9987 90.0%, 0.9991 92.5%, 0.9994 95.0%, 0.9997 97.5%, 1.0000 100.0%); } }
.rv { opacity: 0; transform: translateY(85px); transition: opacity 1.6s var(--appear), transform 1.6s var(--appear); will-change: transform, opacity; }
.rv.down { transform: translateY(-85px); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } .beam-line::after { animation: none; } }

/* ---------- card shell (template: 1px gradient border, #0A0B11 fill, r15) ---------- */
.tcard { position: relative; border-radius: 15px; background: linear-gradient(125deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .02) 100%); padding: 1px; }
.tcard > .in { position: relative; height: 100%; border-radius: 14px; background: var(--card); overflow: hidden; }
.tcard h3 { font: 500 20px/24px Manrope, sans-serif; color: #fff; }
.tcard .p { margin-top: 11px; }

/* logo ticker (template Ticker: 19.9 px/s, faded edges) */
.ticker { width: 520px; height: 48px; margin-top: 24px; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ticker ul { display: flex; gap: 32px; list-style: none; height: 100%; align-items: center; width: max-content; animation: tick var(--tick, 40s) linear infinite; }
.ticker li { display: flex; align-items: center; gap: 8px; height: 24px; color: #fff; font: 600 17px/1 Inter, sans-serif; letter-spacing: -.3px; opacity: .9; white-space: nowrap; }
.ticker li img { height: 22px; width: 22px; border-radius: 50%; filter: grayscale(1) brightness(1.6) contrast(1.1); }
.ticker li img.mono-logo { border-radius: 0; filter: invert(1); width: 20px; }
@keyframes tick { to { transform: translateX(var(--tick-w, -50%)); } }

/* ---------- footer ---------- */
.foot { position: relative; background: var(--ink); overflow: hidden; }
.foot .cta { position: relative; text-align: center; padding: 120px 0 80px; }
.foot .mark-big { position: relative; width: 420px; height: 420px; margin: 0 auto -170px; }
.foot .mark-big .glow { position: absolute; inset: -60px; background: radial-gradient(closest-side, rgba(24, 233, 51, .3), rgba(24, 233, 51, 0) 70%); filter: blur(10px); }
.foot .mark-big .safu { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; -webkit-mask: linear-gradient(180deg, #000 55%, transparent 92%); mask: linear-gradient(180deg, #000 55%, transparent 92%); }
.foot .cta h2 { position: relative; font: 700 64px/70.4px Manrope, sans-serif; max-width: 800px; margin: 0 auto; }
.scanbar { position: relative; width: 400px; max-width: 100%; height: 36px; margin: 32px auto 0; border-radius: 8px; padding: 1px; background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)); display: flex; }
.scanbar .box { flex: 1; display: flex; align-items: center; background: #0a0b11; border-radius: 7px; padding: 2px; gap: 6px; }
.scanbar input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: 0; padding: 0 10px; font-size: 14px; color: #fff; }
.scanbar input::placeholder { color: var(--mute2); }
.scanbar .btn { height: 30px; font-size: 14px; padding: 0 6px 0 12px; }
.scanbar .btn.grey .arr { width: 18px; height: 18px; }
.foot .cols { display: grid; grid-template-columns: 426fr 199fr 261fr 154fr; gap: 0; padding: 40px 0 64px; }
.foot .cols h6 { font: 400 16px/26px Inter, sans-serif; color: var(--mute); margin-bottom: 15px; }
.foot .cols a { display: block; font-size: 16px; line-height: 19.2px; letter-spacing: .16px; color: #fff; margin-bottom: 11px; transition: color .2s; }
.foot .cols a:hover, .foot .cols a.on { color: var(--mint); }
.foot .brandcol .logo { display: flex; align-items: center; gap: 8px; font: 700 19px/1 Manrope, sans-serif; }
.foot .brandcol .logo svg { height: 22px; }
.foot .brandcol .logo { gap: 10px; }
.foot .brandcol p { margin-top: 16px; font-size: 16px; letter-spacing: .16px; }
.foot .bottom { display: flex; justify-content: space-between; padding: 0 0 48px; color: var(--mute); font-size: 16px; letter-spacing: .16px; gap: 16px; }
.foot .legal-note { color: var(--mute2); font-size: 13px; line-height: 1.5; max-width: 760px; padding-bottom: 28px; }

/* ---------- chips / status ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 80px; font-size: 12px; letter-spacing: -.2px; background: rgba(255, 255, 255, .06); color: #fff; white-space: nowrap; }
.chip.pass { color: var(--green); background: rgba(24, 233, 51, .1); }
.chip.warn { color: var(--amber); background: rgba(245, 182, 56, .1); }
.chip.fail { color: var(--red); background: rgba(255, 77, 77, .1); }
.chip.open { color: var(--mute); background: rgba(255, 255, 255, .06); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.band-lower { color: var(--green); } .band-mixed { color: var(--amber); } .band-higher { color: var(--red); }

/* ---------- forms ---------- */
.field { display: block; }
.field > span { display: block; font-size: 14px; margin-bottom: 10px; color: #fff; }
.input { width: 100%; height: 44px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .08); background: #11121a; padding: 0 14px; outline: 0; font-size: 15px; transition: border-color .2s; }
.input:focus { border-color: rgba(24, 233, 51, .6); }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #9ba1a5 50%), linear-gradient(135deg, #9ba1a5 50%, transparent 50%); background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px; background-size: 5px 5px; background-repeat: no-repeat; }

/* ---------- tables ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-weight: 400; color: var(--mute2); font-size: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr.link { cursor: pointer; transition: background .2s; }
.tbl tr.link:hover { background: rgba(255, 255, 255, .03); }
.tok { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tok img, .tok .ph { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; background: #1a1b22; }
.tok .ph { display: grid; place-items: center; font-size: 11px; color: var(--mute); }
.tok b { font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tok small { color: var(--mute2); font-size: 12px; }
.num { font-variant-numeric: tabular-nums; }
.score-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 26px; padding: 0 8px; border-radius: 7px; font-weight: 600; font-size: 14px; background: rgba(255, 255, 255, .06); }
.score-pill.lower { color: var(--green); background: rgba(24, 233, 51, .1); }
.score-pill.mixed { color: var(--amber); background: rgba(245, 182, 56, .1); }
.score-pill.higher { color: var(--red); background: rgba(255, 77, 77, .1); }
.skeleton { display: inline-block; height: 12px; width: 60px; border-radius: 6px; background: linear-gradient(90deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .1), rgba(255, 255, 255, .04)); background-size: 200% 100%; animation: sk 1.4s linear infinite; }
@keyframes sk { to { background-position: -200% 0; } }

/* ---------- page header (inner pages: template About/Contact hero) ---------- */
.phero { position: relative; padding: 168px 0 72px; overflow: hidden; }
.phero .eyebrow { font-size: 14px; color: var(--green); margin-bottom: 18px; display: inline-flex; gap: 8px; align-items: center; }
.icon-tile { width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; position: relative;
  background: linear-gradient(160deg, #12a52a 0%, #0b5c1a 55%, #073d12 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -6px 12px rgba(0, 0, 0, .35), 0 10px 24px rgba(0, 0, 0, .35), 0 0 0 1px rgba(24, 233, 51, .35); }
.icon-tile svg { width: 26px; height: 26px; color: #6dff7f; filter: drop-shadow(0 0 6px rgba(24, 233, 51, .7)); }
.icon-tile.sm { width: 36px; height: 36px; border-radius: 9px; }
.icon-tile.sm svg { width: 18px; height: 18px; }
.panel { border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); padding: 1px; }
.panel > .in { border-radius: 15px; background: #0b0c12; padding: 24px; position: relative; overflow: hidden; height: 100%; }
.panel .glowtop { position: absolute; left: 50%; top: -120px; width: 300px; height: 220px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(24, 233, 51, .22), rgba(24, 233, 51, 0)); pointer-events: none; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .nav .links { display: none; }
  .nav .right .btn.dark { display: none; }
  .nav .burger { display: grid; }
}
@media (max-width: 860px) {
  .h1, .foot .cta h2 { font-size: 44px; line-height: 1.1; }
  .h2 { font-size: 38px; }
  .foot .cols { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .foot .brandcol { grid-column: 1 / -1; }
  .foot .mark-big { width: 280px; height: 280px; margin-bottom: -110px; }
}
@media (max-width: 560px) {
  .h1, .foot .cta h2 { font-size: 36px; }
  .h2 { font-size: 32px; }
  .nav { top: 16px; }
  .nav .right .btn:not(.dark) { display: none; }
  .foot .bottom { flex-direction: column; }
  .drawer { inset: 80px 12px auto; }
}