/* PillarBlock — Landing page
   Tone: B2B fintech infrastructure. Calm, confident, navy + cobalt.
   No gradients, no glow, no crypto vocabulary. */

:root{
  /* Brand */
  --navy:        #001235;
  --navy-2:      #0a1c44;
  --navy-3:      #142a5c;
  --blue:        #1a75e0;
  --blue-2:      #4a93ec;
  --blue-deep:   #0f5ac0;

  /* Neutrals */
  --bg:          #ffffff;
  --bg-2:        #f6f8fc;
  --ink:         #001235;
  --ink-2:       #4a5876;
  --ink-3:       #7a87a3;
  --line:        #e3e8f1;
  --line-2:      #cdd5e3;

  /* Type */
  --sans: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SF Mono, Menlo, monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'ss01','cv11';
  line-height:1.5;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ── TOP NAV ── */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.92);
  backdrop-filter:saturate(180%) blur(10px);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1200px; margin:0 auto;
  padding:10px 28px;
  display:flex; align-items:center; gap:24px;
}
.nav-logo{
  display:flex; align-items:center; gap:10px;
  font-weight:700; font-size:18px; letter-spacing:-0.02em;
  color:var(--navy);
  flex-shrink:0;
}
.nav-logo img{height:106px; width:auto; display:block}
.nav-spacer{flex:1}
.nav-link{
  font-size:14px; color:var(--ink-2); font-weight:500;
  padding:8px 0;
}
.nav-link:hover{color:var(--navy)}
.nav-cta{
  font-size:14px; font-weight:600;
  color:var(--bg);
  background:var(--navy);
  padding:9px 16px; border-radius:8px;
  transition:background .15s ease;
}
.nav-cta:hover{background:var(--navy-3)}

/* ── HERO ── */
.hero{
  position:relative;
  padding:88px 28px 96px;
  max-width:1200px; margin:0 auto;
  text-align:left;
}
.hero-inner{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap:64px; align-items:center;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:600; letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--blue-deep);
  background:#eaf2fd;
  padding:7px 12px; border-radius:999px;
  margin-bottom:24px;
}
.hero-eyebrow .pulse{
  width:6px; height:6px; border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 0 rgba(26,117,224,.55);
  animation:pulse 2s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(26,117,224,.55)}
  70%{box-shadow:0 0 0 10px rgba(26,117,224,0)}
  100%{box-shadow:0 0 0 0 rgba(26,117,224,0)}
}
.hero-headline{
  font-size:clamp(40px, 5.4vw, 68px);
  line-height:1.04;
  letter-spacing:-0.03em;
  font-weight:700;
  color:var(--navy);
  margin:0 0 22px;
  text-wrap:balance;
}
.hero-headline em{
  font-style:normal;
  color:var(--blue);
}
.hero-sub{
  font-size:clamp(17px, 1.4vw, 19px);
  line-height:1.55;
  color:var(--ink-2);
  margin:0 0 36px;
  max-width:540px;
  text-wrap:pretty;
}

/* CTA */
.cta-row{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-size:15px; font-weight:600;
  padding:14px 22px; border-radius:10px;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn-primary{
  color:#fff; background:var(--navy);
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset, 0 6px 18px rgba(0,18,53,.18);
}
.btn-primary:hover{background:var(--navy-3); transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-primary .arrow{
  display:inline-block; transition:transform .18s ease;
}
.btn-primary:hover .arrow{transform:translateX(3px)}
.btn-ghost{
  color:var(--ink-2);
  font-weight:500;
  padding:14px 6px;
}
.btn-ghost:hover{color:var(--navy)}

/* Inline email capture (alt CTA mode) */
.capture{
  display:flex; gap:0; align-items:stretch;
  background:#fff;
  border:1px solid var(--line-2);
  border-radius:12px;
  padding:6px;
  max-width:480px;
  box-shadow:0 1px 2px rgba(0,18,53,.04);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.capture:focus-within{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(26,117,224,.18);
}
.capture input{
  flex:1; min-width:0;
  border:none; outline:none; background:transparent;
  font:inherit; font-size:15px;
  padding:10px 14px;
  color:var(--ink);
}
.capture input::placeholder{color:var(--ink-3)}
.capture button{
  font-size:14px; font-weight:600;
  color:#fff; background:var(--navy);
  padding:10px 18px; border-radius:8px;
  transition:background .15s ease;
}
.capture button:hover{background:var(--navy-3)}
.capture-thanks{
  display:flex; align-items:center; gap:10px;
  font-size:14px; font-weight:500;
  color:var(--blue-deep);
  background:#eaf2fd;
  padding:14px 18px; border-radius:12px;
  max-width:480px;
}
.capture-note{
  font-size:13px; color:var(--ink-3);
  margin-top:12px;
}

/* Hero visual — abstract payment card */
.hero-visual{
  position:relative;
  aspect-ratio: 4/5;
  max-width:460px;
  justify-self:end;
  width:100%;
}
.payment-card{
  position:absolute; inset:0;
  background:var(--navy);
  border-radius:20px;
  padding:28px;
  color:#fff;
  display:flex; flex-direction:column;
  box-shadow:
    0 24px 60px -20px rgba(0,18,53,.45),
    0 8px 16px -8px rgba(0,18,53,.25);
  overflow:hidden;
}
.payment-card::before{
  content:''; position:absolute;
  top:-30%; right:-30%;
  width:80%; height:80%;
  background:radial-gradient(circle, rgba(26,117,224,.22), transparent 70%);
  pointer-events:none;
}
.pc-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:auto;
  position:relative;
}
.pc-mark{
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600;
  color:rgba(255,255,255,.85);
}
.pc-mark img{height:58px; width:auto; filter:brightness(0) invert(1)}
.pc-status{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:600; letter-spacing:0.06em;
  text-transform:uppercase;
  color:#7ec1ff;
  background:rgba(26,117,224,.18);
  padding:4px 9px; border-radius:999px;
}
.pc-status .dot{
  width:5px; height:5px; border-radius:50%;
  background:#7ec1ff;
  animation:blink 1.4s ease-in-out infinite;
}
@keyframes blink{50%{opacity:.3}}
.pc-amount{
  font-size:38px; font-weight:700;
  letter-spacing:-0.02em;
  margin:24px 0 4px;
  position:relative;
}
.pc-amount .currency{
  font-size:18px; color:rgba(255,255,255,.5);
  font-weight:500; margin-right:4px;
  vertical-align:top;
  position:relative; top:6px;
}
.pc-label{
  font-size:11px; font-weight:500; letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  margin-bottom:24px;
  position:relative;
}
.pc-flow{
  display:flex; align-items:center; gap:12px;
  padding:16px 0;
  border-top:1px solid rgba(255,255,255,.1);
  position:relative;
}
.pc-party{flex:1; min-width:0}
.pc-party-name{
  font-size:13px; font-weight:600;
  color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pc-party-meta{
  font-size:11px;
  color:rgba(255,255,255,.5);
  font-family:var(--mono);
  margin-top:2px;
}
.pc-arrow{
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; flex-shrink:0;
  background:rgba(26,117,224,.2);
  border-radius:50%;
  color:#7ec1ff;
}
.pc-rail{
  display:flex; align-items:center; gap:8px;
  font-size:11px; font-weight:500; letter-spacing:0.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.1);
  position:relative;
}
.pc-rail .rail-dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--blue-2);
}
.pc-rail .rail-time{margin-left:auto; color:#fff; font-weight:600; font-family:var(--mono)}

/* Floating chip behind card */
.float-chip{
  position:absolute;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px 16px;
  display:flex; align-items:center; gap:12px;
  box-shadow:0 12px 32px -12px rgba(0,18,53,.18);
  font-size:13px;
  z-index:2;
}
.float-chip-1{
  top:12%; left:-14%;
  animation:float1 6s ease-in-out infinite;
}
.float-chip-2{
  bottom:14%; right:-10%;
  animation:float2 7s ease-in-out infinite;
}
@keyframes float1{50%{transform:translateY(-8px)}}
@keyframes float2{50%{transform:translateY(8px)}}
.fc-icon{
  width:34px; height:34px; flex-shrink:0;
  border-radius:9px;
  background:#eaf2fd;
  display:flex; align-items:center; justify-content:center;
  color:var(--blue);
}
.fc-label{font-size:11px; color:var(--ink-3); font-weight:500; letter-spacing:0.04em; text-transform:uppercase}
.fc-value{font-size:14px; font-weight:600; color:var(--navy); margin-top:1px}

/* ── TRUST BAR ── */
.trust{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:28px 28px;
  background:var(--bg-2);
}
.trust-inner{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; gap:48px;
  flex-wrap:wrap;
}
.trust-label{
  font-size:11px; font-weight:600; letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.trust-items{
  display:flex; gap:36px; flex-wrap:wrap; align-items:center;
}
.trust-item{
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:500; color:var(--ink-2);
}
.trust-item .check{
  width:16px; height:16px;
  color:var(--blue);
  flex-shrink:0;
}

/* ── FEATURES ── */
.features{
  padding:120px 28px;
  max-width:1200px; margin:0 auto;
}
.features-head{
  max-width:720px; margin-bottom:64px;
}
.features-eyebrow{
  font-size:12px; font-weight:600; letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--blue-deep);
  margin-bottom:16px;
}
.features-title{
  font-size:clamp(30px, 3.4vw, 44px);
  line-height:1.1;
  letter-spacing:-0.025em;
  font-weight:700;
  color:var(--navy);
  margin:0;
  text-wrap:balance;
}
.features-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.feature{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:36px 30px 32px;
  display:flex; flex-direction:column;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.feature:hover{
  border-color:var(--line-2);
  transform:translateY(-3px);
  box-shadow:0 12px 32px -16px rgba(0,18,53,.12);
}
.feature-icon{
  width:48px; height:48px;
  border-radius:12px;
  background:var(--navy);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:24px;
  position:relative;
}
.feature-icon::after{
  content:''; position:absolute;
  inset:auto -6px -6px auto;
  width:14px; height:14px;
  background:var(--blue);
  border-radius:4px;
  border:2px solid #fff;
}
.feature-title{
  font-size:20px; font-weight:700;
  letter-spacing:-0.02em;
  color:var(--navy);
  margin:0 0 12px;
}
.feature-body{
  font-size:15px; line-height:1.55;
  color:var(--ink-2);
  margin:0 0 20px;
  text-wrap:pretty;
  flex:1;
}
.feature-tags{
  display:flex; gap:6px; flex-wrap:wrap;
}
.feature-tag{
  font-size:11px; font-weight:600; letter-spacing:0.04em;
  color:var(--ink-2);
  background:var(--bg-2);
  padding:4px 9px; border-radius:6px;
  font-family:var(--mono);
}

/* ── BOTTOM CTA ── */
.bottom-cta{
  margin:0 28px 80px;
  max-width:1200px;
  margin-left:auto; margin-right:auto;
  background:var(--navy);
  border-radius:24px;
  padding:64px 56px;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:48px;
  align-items:center;
  position:relative;
  overflow:hidden;
  color:#fff;
}
.bottom-cta::before{
  content:''; position:absolute;
  bottom:-40%; left:-10%;
  width:60%; height:120%;
  background:radial-gradient(ellipse, rgba(26,117,224,.18), transparent 60%);
}
.bottom-cta::after{
  content:''; position:absolute;
  top:-30%; right:-10%;
  width:50%; height:80%;
  background:radial-gradient(circle, rgba(26,117,224,.15), transparent 60%);
}
.bottom-cta-inner{position:relative}
.bottom-cta h2{
  font-size:clamp(28px, 3.2vw, 40px);
  line-height:1.1;
  letter-spacing:-0.02em;
  font-weight:700;
  margin:0 0 18px;
  text-wrap:balance;
}
.bottom-cta p{
  font-size:16px; line-height:1.55;
  color:rgba(255,255,255,.7);
  margin:0 0 28px;
  max-width:460px;
}
.bottom-cta .btn-primary{
  background:var(--blue);
  box-shadow:0 8px 22px rgba(26,117,224,.35);
}
.bottom-cta .btn-primary:hover{background:var(--blue-deep)}
.bottom-cta-mark{
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.bottom-cta-mark img{
  width:80%; max-width:280px;
  height:auto;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.3));
}

/* ── FOOTER ── */
.footer{
  padding:48px 28px 56px;
  border-top:1px solid var(--line);
  background:var(--bg);
}
.footer-inner{
  max-width:1200px; margin:0 auto;
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:40px;
  align-items:start;
}
.footer-brand img{height:115px; width:auto; margin:0 0 24px; display:block}
.footer-tag{
  font-size:13px; color:var(--ink-3);
  max-width:340px; line-height:1.5;
}
.footer-col-title{
  font-size:11px; font-weight:600; letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0 0 14px;
}
.footer-col{display:flex; flex-direction:column; gap:10px}
.footer-col a{
  font-size:14px; color:var(--ink-2); font-weight:500;
  display:inline-flex; align-items:center; gap:8px;
}
.footer-col a:hover{color:var(--navy)}
.footer-bottom{
  max-width:1200px; margin:36px auto 0;
  padding-top:28px;
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px; color:var(--ink-3);
  flex-wrap:wrap; gap:12px;
}
.footer-bottom .built{
  font-family:var(--mono);
  font-size:11px;
}

/* ── RESPONSIVE ── */
@media (max-width: 960px){
  .hero-inner{grid-template-columns:1fr; gap:48px}
  .hero-visual{justify-self:center; max-width:380px}
  .features-grid{grid-template-columns:1fr; gap:18px}
  .bottom-cta{grid-template-columns:1fr; padding:48px 32px; text-align:left}
  .bottom-cta-mark{display:none}
  .footer-inner{grid-template-columns:1fr 1fr; gap:32px}
}
@media (max-width: 640px){
  .nav-inner{padding:12px 20px}
  .nav-link{display:none}
  .hero{padding:56px 20px 64px}
  .hero-visual{max-width:320px}
  .features{padding:80px 20px}
  .feature{padding:28px 24px}
  .bottom-cta{margin:0 20px 56px; padding:40px 24px; border-radius:18px}
  .footer{padding:40px 20px}
  .footer-inner{grid-template-columns:1fr; gap:28px}
  .float-chip-1{left:-4%; top:6%}
  .float-chip-2{right:-2%; bottom:8%}
}