/* ==========================================================================
Zephira theme layer — sits on top of the Alexstrap template stylesheet.
1. Re-points the template's colour tokens to the Zephira blue system
2. Re-skins the template shell (ticker, header, banner, cards, footer)
3. Adds Zephira components (corridor board, coverage table, forms)
========================================================================== */
/* ---------- 1. Template tokens, repainted ---------- */
.money-var {
--v-anchor-base:#5B8CFF;
--v-primarylight-base:#C9D9FF;
--v-primary-base:#2F6BFF;
--v-primarydark-base:#0A1123;
--v-secondarylight-base:#BFE9FF;
--v-secondary-base:#2F6BFF;
--v-secondarydark-base:#123A9E;
}
:root {
--ink-900:#050912; --ink-850:#070C1A; --ink-800:#0A1123; --ink-700:#0D1730; --ink-600:#132043;
--line:rgba(122,157,255,.14); --line-strong:rgba(122,157,255,.28);
--blue-700:#1741C4; --blue-600:#1D4ED8; --blue-500:#2F6BFF; --blue-400:#5B8CFF; --blue-300:#93B4FF;
--cyan:#57D8FF; --mint:#4ADE9B; --amber:#FFC46B;
--text:#E6ECFB; --text-dim:#B7C4E0; --muted:#8B9BBE; --muted-2:#65739A;
--display:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
--body:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
--mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
--r-md:14px; --r-lg:20px; --r-xl:28px;
--shadow-lg:0 40px 90px -40px rgba(3,8,26,.9);
--shadow-blue:0 24px 60px -28px rgba(47,107,255,.55);
--ease:cubic-bezier(.22,.61,.36,1);
}
/* ---------- 2. Base ---------- */
html{scroll-behavior:smooth;scroll-padding-top:120px}
body,.m-application{font-family:var(--body);background:var(--ink-900);color:var(--text)}
.m-application.theme--dark,.theme--dark .m-content,#main-wrap{background:var(--ink-900);color:var(--text)}
.m-application h1,.m-application h2,.m-application h3,.m-application h4,.m-application h5,.m-application h6{
font-family:var(--display);font-weight:600;letter-spacing:-.03em;line-height:1.1;color:var(--text);margin:0}
.m-application p{font-family:var(--body)}
::selection{background:rgba(47,107,255,.35);color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
#main-wrap{position:relative}
#main-wrap::before{
content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
background:radial-gradient(1100px 620px at 78% -6%,rgba(47,107,255,.20),transparent 62%),
radial-gradient(900px 700px at 2% 10%,rgba(24,63,180,.16),transparent 60%);
}
.main-wrap{position:relative;z-index:1;background:transparent !important}
.m-application .container-wrap{background:transparent}
/* Kill the crypto-era decoration that ships with the template */
.invisible-deco,.hexa-wrap,.parallax-figure,.deco-title,.deco-banner,.deco-bottom,.deco-top,
.deco-promo,#banner .deco-bottom,.footer-counter .deco-top,.notification{display:none !important}
/* ---------- 3. Utility type ---------- */
.zp-eyebrow{
display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;
font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--blue-300)}
.zp-eyebrow::before{content:"";width:22px;height:1px;background:var(--blue-400);opacity:.75}
.m-application .zp-heading{letter-spacing:-.035em}
.zp-hero-title{font-size:clamp(38px,5.2vw,62px) !important;line-height:1.06 !important;letter-spacing:-.042em !important;margin-bottom:22px !important}
.zp-grad{background:linear-gradient(102deg,#fff 6%,var(--blue-300) 48%,var(--cyan) 96%);
-webkit-background-clip:text;background-clip:text;color:transparent}
.m-application .zp-sub{color:var(--text-dim);font-size:17px;line-height:1.65;max-width:64ch;margin-top:18px}
.zp-sub--wide{max-width:72ch}
.title-main.align-center + .zp-sub{margin-left:auto;margin-right:auto;text-align:center}
.zp-dash{color:var(--muted-2)}
/* Template title block, flattened */
.m-application .title-main{display:block;padding:0;margin:0 0 6px;min-height:0}
.m-application .title-main::before,.m-application .title-main::after{display:none}
.m-application .title-main.align-center{text-align:center}
.m-application .title-main .use-text-title2{font-size:clamp(27px,3.4vw,42px)}
/* ---------- 4. Sections ---------- */
.zp-section{position:relative;padding:clamp(60px,8vw,110px) 0}
.zp-section--tight{padding:clamp(36px,4vw,56px) 0}
.zp-section--alt{background:linear-gradient(180deg,transparent,rgba(13,23,48,.55) 22%,rgba(13,23,48,.55) 78%,transparent)}
.zp-section + .zp-section{border-top:1px solid rgba(122,157,255,.08)}
.zp-section .btn-area{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}
/* ---------- 5. Buttons ---------- */
.m-application .btn,.m-application .btn-large{
font-family:var(--body);font-weight:600;letter-spacing:.01em;text-transform:none;
border-radius:999px;box-shadow:none;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,border-color .25s,color .25s}
.m-application .btn:hover{transform:translateY(-2px)}
.money .btn.secondary,.m-application .btn.secondary.button{
background:linear-gradient(135deg,var(--blue-500),var(--blue-700)) !important;color:#fff !important;
box-shadow:var(--shadow-blue);border:0}
.money .btn.secondary:hover{box-shadow:0 30px 70px -26px rgba(47,107,255,.75)}
.m-application .btn-outlined,.m-application .btn.btn-outlined.invert{
border:1px solid var(--line-strong) !important;background:rgba(255,255,255,.03) !important;color:var(--text) !important}
.m-application .btn-outlined:hover{border-color:var(--blue-400) !important;background:rgba(47,107,255,.10) !important}
.m-application .btn-flat{color:var(--text-dim);text-transform:none;font-weight:550}
.m-application .btn-flat:hover{color:#fff;background:rgba(122,157,255,.08)}
.m-application .btn-large{height:52px;line-height:52px;padding:0 30px;font-size:15px}
.m-application .btn-floating.primary{background:linear-gradient(135deg,var(--blue-500),var(--blue-700)) !important}
/* ---------- 6. Ticker (template .market + slick) ---------- */
.market.zp-ticker{
height:40px;padding:0;background:rgba(6,11,24,.92);border-bottom:1px solid var(--line);
backdrop-filter:blur(10px)}
.market.zp-ticker{overflow:hidden;position:absolute;top:0;left:0;right:0;width:100%;
z-index:5;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.zp-ticker__track{display:flex;align-items:center;width:max-content;
animation:zp-marquee 52s linear infinite;will-change:transform}
.market.zp-ticker:hover .zp-ticker__track{animation-play-state:paused}
@keyframes zp-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.zp-tick{display:flex;align-items:center;gap:9px;height:40px;padding:0 26px;flex:none;
font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;white-space:nowrap}
.zp-tick__flag{font-size:14px}
.zp-tick__cur{color:var(--blue-300);font-weight:500}
.zp-tick__method{color:var(--muted);font-family:var(--body);letter-spacing:0;font-size:12px}
.zp-tick__state{color:var(--mint);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
padding-left:9px;border-left:1px solid var(--line)}
/* ---------- 7. Header ---------- */
.m-application .app-bar,.m-application header.header{background:transparent;box-shadow:none !important}
.m-application .header{
padding-top:0 !important;margin:0;top:0;background:transparent;
border-bottom:1px solid transparent;
transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}
@media (min-width:1280px){.m-application .header.header--offset{top:40px}}
.m-application .header.is-stuck{
top:0;background:rgba(6,11,24,.95) !important;
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
border-bottom-color:var(--line)}
.header .header-content{display:flex;align-items:center;gap:22px;min-height:72px}
.header .nav-logo{display:flex;align-items:center;gap:22px}
.header .divider{display:none}
.zp-logo{display:inline-flex;align-items:center;gap:10px;line-height:1}
.zp-mark{height:28px;width:auto;flex:none;display:block;object-fit:contain;
filter:drop-shadow(0 5px 14px rgba(47,107,255,.30))}
/* the template hard-sizes every .logo img to a 64px square — keep the mark's own aspect */
.header-content .logo img.zp-mark,#footer .logo img.zp-mark{
height:30px;width:auto;max-width:none;margin:0;display:block;object-fit:contain}
#footer .logo img.zp-mark{height:34px}
.header .logo,.header .logo a{display:flex;align-items:center}
#footer .logo{align-items:center}
.zp-logo__text{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.035em;color:#fff;
line-height:1;display:block}
.zp-logo__text em{font-style:normal;color:var(--blue-400)}
.zp-logo--footer .zp-logo__text{font-size:21px}
.header .logo{width:auto;height:auto;margin:0}
.header .logo a{display:inline-flex}
ul.zp-nav{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
ul.zp-nav .btn-flat{
padding:9px 14px;height:auto;line-height:1.4;border-radius:999px;font-size:14.5px;text-transform:none;
color:var(--text-dim)}
ul.zp-nav .btn-flat.active{color:#fff;background:rgba(47,107,255,.14)}
.header .nav-auth{justify-content:flex-end;flex:none;margin-left:auto;gap:10px;display:flex;align-items:center}
.header .nav-auth .btn-flat{padding:9px 16px;height:auto;line-height:1.4}
.header .nav-auth .btn.secondary{height:42px;line-height:42px;padding:0 22px;font-size:14.5px}
.header .mobile-menu{margin-right:6px}
/* ---------- 8. Banner ---------- */
#banner.zp-banner .root{height:auto;min-height:0;padding:clamp(92px,11vw,140px) 0 clamp(40px,5vw,64px)}
#banner.zp-banner .banner-wrap{padding:0}
.theme--dark #banner .canvas-wrap{
background:linear-gradient(160deg,#070E22 10%,#0C1A3C 55%,#050912 100%)}
#banner .canvas-wrap:after{background:rgba(5,9,18,.35)}
.theme--dark #banner .overlay-banner:before{background-color:transparent;opacity:1;
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 90% 70% at 50% 0%,#000 5%,transparent 72%);
mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 5%,transparent 72%)}
#banner .particle-background{height:100%;opacity:.5}
.zp-hero-note{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px 24px;font-size:13px;color:var(--muted)}
.zp-hero-note span{display:inline-flex;align-items:center;gap:8px}
.zp-hero-note span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px rgba(74,222,155,.16)}
/* ---------- 9. Corridor board ---------- */
.board{position:relative;border:1px solid var(--line-strong);border-radius:var(--r-xl);
background:linear-gradient(168deg,rgba(19,32,67,.94),rgba(7,12,26,.96));box-shadow:var(--shadow-lg);overflow:hidden}
.board::before{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(560px 200px at 82% 0%,rgba(47,107,255,.24),transparent 70%)}
.board__bar{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);position:relative}
.board__dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(74,222,155,.14);animation:zp-pulse 2.6s infinite}
@keyframes zp-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.board__title{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim)}
.board__meta{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--muted-2);letter-spacing:.12em}
.board__rows{position:relative;padding:8px}
.rail{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:13px 14px;border-radius:var(--r-md);transition:background .3s}
.rail + .rail{box-shadow:inset 0 1px 0 rgba(122,157,255,.09)}
.rail.is-live{background:rgba(47,107,255,.10)}
.rail__from,.rail__to{display:flex;align-items:center;gap:10px;min-width:0}
.rail__flag{font-size:19px;line-height:1}
.rail__stack{display:grid;gap:2px;min-width:0}
.rail__cur{display:block;font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.06em;line-height:1.2;color:var(--text)}
.rail__method{display:block;font-size:11.5px;line-height:1.25;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.rail__wire{position:relative;height:2px;border-radius:2px;overflow:hidden;
background:linear-gradient(90deg,rgba(122,157,255,.10),rgba(122,157,255,.28),rgba(122,157,255,.10))}
.rail__pulse{position:absolute;top:50%;left:0;width:34px;height:2px;border-radius:2px;transform:translate(-100%,-50%);opacity:0;
background:linear-gradient(90deg,transparent,var(--cyan),transparent)}
.rail.is-live .rail__pulse{animation:zp-travel 1.6s var(--ease) forwards}
@keyframes zp-travel{0%{left:0;opacity:0}14%{opacity:1}86%{opacity:1}100%{left:100%;opacity:0}}
.rail__badge{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
padding:5px 9px;border-radius:999px;border:1px solid rgba(74,222,155,.28);color:var(--mint);background:rgba(74,222,155,.08);white-space:nowrap}
.board__foot{display:flex;border-top:1px solid var(--line)}
.board__stat{flex:1;padding:16px 18px;min-width:0}
.board__stat + .board__stat{border-left:1px solid var(--line)}
.board__stat b{display:block;font-family:var(--display);font-size:21px;font-weight:600;letter-spacing:-.03em;color:#fff}
.board__stat span{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
/* ---------- 10. Cards (template .paper) ---------- */
.m-application .paper.zp-card,.m-application .paper.zp-solution,.m-application .paper.zp-dash,.m-application .paper.zp-console{
background:linear-gradient(165deg,rgba(19,32,67,.6),rgba(9,15,32,.66));
border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:none;color:var(--text)}
.zp-col{display:flex}
.zp-col > .paper{width:100%}
.m-application .paper.zp-solution{height:100%}
.m-application .paper.zp-card{padding:26px;transition:border-color .35s var(--ease),transform .35s var(--ease)}
.m-application .paper.zp-card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.zp-card__icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;
background:linear-gradient(150deg,rgba(47,107,255,.22),rgba(87,216,255,.10));border:1px solid rgba(122,157,255,.24)}
.zp-card__icon .material-icons{font-size:20px;color:var(--blue-300)}
.m-application .zp-card__title{font-size:18px;margin-bottom:9px}
.m-application .zp-card__text{color:var(--muted);font-size:14.5px;line-height:1.62}
.zp-card__link{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:13.5px;font-weight:600;color:var(--blue-300)}
.zp-card__link .material-icons{font-size:16px;transition:transform .3s var(--ease)}
.zp-card__link:hover{color:var(--cyan)}
.zp-card__link:hover .material-icons{transform:translateX(4px)}
.m-application .paper.zp-card--accent{background:linear-gradient(150deg,rgba(47,107,255,.16),rgba(9,15,32,.72));border-color:rgba(122,157,255,.3);padding:30px}
.m-application .paper.zp-solution{padding:30px;display:flex;flex-direction:column}
.zp-tag{align-self:flex-start;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
color:var(--blue-300);border:1px solid var(--line-strong);border-radius:999px;padding:5px 11px;margin-bottom:18px}
.m-application .zp-solution h5{font-size:22px;margin-bottom:10px;letter-spacing:-.03em}
.m-application .zp-solution > p{color:var(--muted);font-size:14.5px;line-height:1.6}
.zp-solution__foot{margin-top:auto;padding-top:22px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.zp-solution__foot .zp-card__link{margin-top:12px;flex-basis:100%}
.zp-chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;padding:6px 10px;border-radius:8px;
border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--text-dim)}
.zp-check{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:11px}
.zp-check li{display:flex;gap:11px;font-size:14px;color:var(--text-dim);line-height:1.5}
.zp-check li::before{content:"";flex:none;width:16px;height:16px;margin-top:3px;border-radius:5px;
background:rgba(47,107,255,.16);border:1px solid rgba(122,157,255,.3);
background-image:url("data:image/svg+xml;utf8,");
background-size:11px;background-repeat:no-repeat;background-position:center}
/* ---------- 11. Stats ---------- */
.zp-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);
border-radius:var(--r-lg);overflow:hidden;background:rgba(9,15,32,.55)}
.zp-stat{padding:28px 26px}
.zp-stat + .zp-stat{box-shadow:inset 1px 0 0 var(--line)}
.zp-stat b{display:block;font-family:var(--display);font-size:clamp(27px,3.2vw,36px);font-weight:600;letter-spacing:-.04em;line-height:1;color:#fff}
.zp-stat span{display:block;margin-top:10px;font-size:13px;color:var(--muted)}
@media (max-width:900px){.zp-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.zp-stat:nth-child(odd){box-shadow:none}.zp-stat:nth-child(n+3){box-shadow:inset 0 1px 0 var(--line)}
.zp-stat:nth-child(4){box-shadow:inset 1px 0 0 var(--line),inset 0 1px 0 var(--line)}}
@media (max-width:520px){.zp-stats{grid-template-columns:1fr}.zp-stat + .zp-stat{box-shadow:inset 0 1px 0 var(--line)}}
/* ---------- 12. Steps ---------- */
.zp-steps{counter-reset:zp-step;margin-top:26px}
.zp-step{counter-increment:zp-step;display:grid;grid-template-columns:58px minmax(0,1fr);gap:20px;
padding:24px 0;border-top:1px solid var(--line)}
.zp-step::before{content:counter(zp-step,decimal-leading-zero);font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--blue-400);padding-top:4px}
.m-application .zp-step h4{font-size:18px;margin-bottom:7px}
.m-application .zp-step p{color:var(--muted);font-size:14.5px;line-height:1.6}
/* ---------- 13. Coverage table ---------- */
.zp-filters{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:22px}
.m-application .btn-flat.zp-filter{
padding:9px 16px;height:auto;line-height:1.4;border-radius:999px;border:1px solid var(--line);
background:rgba(255,255,255,.02);font-size:13.5px;color:var(--text-dim);text-transform:none}
.m-application .btn-flat.zp-filter:hover{border-color:var(--line-strong);color:#fff}
.m-application .btn-flat.zp-filter.is-active{background:linear-gradient(135deg,var(--blue-500),var(--blue-700));border-color:transparent;color:#fff}
.zp-filters .search{position:relative;margin-left:auto;min-width:260px}
.zp-filters .search .material-icons{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--muted-2)}
.zp-filters .search input{width:100%;height:auto;box-sizing:border-box;margin:0;padding:11px 16px 11px 42px;
border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.02);color:var(--text);font-size:14px;font-family:var(--body)}
.zp-filters .search input:focus{outline:none;border-color:var(--blue-400);background:rgba(47,107,255,.07);box-shadow:none}
@media (max-width:760px){.zp-filters .search{margin-left:0;width:100%}}
.table-wrap{border:1px solid var(--line);border-radius:var(--r-lg);overflow-x:auto;background:rgba(9,15,32,.6)}
.table-wrap table{width:100%;border-collapse:collapse;min-width:900px;margin:0}
.table-wrap thead th{text-align:left;padding:15px 18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
text-transform:uppercase;color:var(--muted-2);border-bottom:1px solid var(--line);white-space:nowrap;background:rgba(13,23,48,.75)}
.table-wrap tbody td{padding:15px 18px;font-size:14px;color:var(--text-dim);border-bottom:1px solid rgba(122,157,255,.08);vertical-align:top}
.table-wrap tbody tr:last-child td{border-bottom:0}
.table-wrap tbody tr:hover{background:rgba(47,107,255,.06)}
.cell-country{display:flex;align-items:center;gap:11px;white-space:nowrap;color:var(--text);font-weight:600}
.cell-country i{font-style:normal;font-size:18px}
.cell-cur{font-family:var(--mono);font-size:12.5px;color:var(--blue-300);letter-spacing:.06em}
.cell-limit{font-family:var(--mono);font-size:12.5px;white-space:nowrap;color:var(--text-dim)}
.tag{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
padding:4px 8px;border-radius:6px;border:1px solid var(--line-strong);color:var(--muted)}
.tag--p2p{color:var(--mint);border-color:rgba(74,222,155,.3);background:rgba(74,222,155,.07)}
.tag--p2c{color:var(--cyan);border-color:rgba(87,216,255,.3);background:rgba(87,216,255,.07)}
.tag--ecom{color:var(--amber);border-color:rgba(255,196,107,.3);background:rgba(255,196,107,.07)}
.empty-row td{text-align:center;color:var(--muted);padding:40px 18px}
/* ---------- 14. Dashboard & console mocks ---------- */
.m-application .paper.zp-dash{padding:24px}
.zp-dash__row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.zp-dash__title{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)}
.zp-dash__amount{font-family:var(--display);font-size:32px;font-weight:600;letter-spacing:-.04em;color:#fff;margin-top:6px}
.zp-dash__chart{display:flex;align-items:flex-end;gap:7px;height:110px;margin-bottom:20px}
.zp-dash__chart i{flex:1;border-radius:4px 4px 2px 2px;transform-origin:bottom;
background:linear-gradient(180deg,var(--blue-400),rgba(47,107,255,.16));animation:zp-grow 1.1s var(--ease) backwards}
@keyframes zp-grow{from{transform:scaleY(.05);opacity:0}to{transform:scaleY(1);opacity:1}}
.zp-dash__legend{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding-top:18px;border-top:1px solid var(--line)}
.zp-dash__legend b{display:block;font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.02em;color:#fff}
.zp-dash__legend span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.m-application .paper.zp-console{padding:0;overflow:hidden;background:rgba(6,11,24,.94)}
.zp-console__bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid var(--line);background:rgba(13,23,48,.7)}
.zp-console__bar i{width:9px;height:9px;border-radius:50%;background:rgba(122,157,255,.25)}
.zp-console__bar span{margin-left:8px;font-family:var(--mono);font-size:11px;color:var(--muted-2)}
.zp-console pre{margin:0;padding:22px;overflow-x:auto;font-family:var(--mono);font-size:12.5px;line-height:1.85;color:var(--text-dim)}
.tok-key{color:var(--blue-300)}.tok-str{color:var(--mint)}.tok-num{color:var(--amber)}
.tok-com{color:var(--muted-2)}.tok-fn{color:var(--cyan)}
/* ---------- 15. Accordion (materialize collapsible) ---------- */
.zp-accordion .collapsible{border:0;box-shadow:none;margin:0}
.money .zp-accordion .collapsible li.accordion-content{
background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;margin:0}
.money .zp-accordion .collapsible-header{background:transparent;border:0;padding:22px 44px 22px 0;position:relative;color:var(--text)}
.money .zp-accordion .collapsible-header .heading{font-family:var(--display);font-size:17px;font-weight:550;letter-spacing:-.02em;margin:0;color:var(--text)}
.money .zp-accordion .collapsible-header .arrow{color:var(--blue-300);transition:transform .3s var(--ease)}
.money .zp-accordion .accordion-content.active .collapsible-header .arrow{transform:rotate(180deg)}
.money .zp-accordion .collapsible-body{border:0;padding:0 60px 24px 0;background:transparent}
.money .zp-accordion .collapsible-body p{color:var(--muted);font-size:14.5px;line-height:1.7}
/* ---------- 16. CTA ---------- */
.zp-cta{position:relative;border:1px solid var(--line-strong);border-radius:var(--r-xl);overflow:hidden;
padding:clamp(34px,5vw,62px);text-align:center;
background:linear-gradient(150deg,rgba(29,78,216,.26),rgba(7,12,26,.9) 62%)}
.zp-cta::before{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(600px 260px at 50% 0%,rgba(87,216,255,.16),transparent 70%)}
.zp-cta > *{position:relative}
.zp-cta .zp-sub{margin:16px auto 0;text-align:center}
.zp-cta .btn-area{justify-content:center}
/* ---------- 17. Interior page hero ---------- */
.zp-page-hero{padding:clamp(112px,12vw,164px) 0 clamp(20px,3vw,36px);position:relative}
.zp-page-hero + .zp-section{padding-top:clamp(34px,4vw,56px);border-top:0}
/* page that opens straight into a section, with no hero above it */
.zp-section--first{padding-top:clamp(118px,13vw,170px)}
.m-application .zp-section--first .use-text-title2{font-size:clamp(32px,4.6vw,54px);letter-spacing:-.04em;line-height:1.08}
.zp-page-hero .use-text-title{font-size:clamp(32px,4.6vw,54px);letter-spacing:-.04em;line-height:1.08}
.zp-page-hero .btn-area{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px}
/* ---------- 18. Forms ---------- */
.zp-form-panel{border:1px solid var(--line-strong);border-radius:var(--r-xl);
padding:clamp(24px,3.4vw,40px);background:linear-gradient(168deg,rgba(19,32,67,.75),rgba(7,12,26,.92));box-shadow:var(--shadow-lg)}
.m-application .zp-field{margin:0 0 20px;display:block}
.zp-label{display:block;margin-bottom:8px;font-size:13px;font-weight:600;color:var(--text-dim);
position:static;transform:none;font-family:var(--body)}
.m-application .zp-field input:not([type="checkbox"]),
.m-application .zp-field textarea,
.m-application .zp-field select{
box-sizing:border-box;width:100%;height:auto;margin:0;padding:13px 15px;
border:1px solid var(--line) !important;border-radius:var(--r-md);
background:rgba(255,255,255,.025) !important;color:var(--text);font-family:var(--body);font-size:14.5px;box-shadow:none !important}
.m-application .zp-field textarea{min-height:120px;line-height:1.6;resize:vertical}
.m-application .zp-field input:focus,.m-application .zp-field textarea:focus,.m-application .zp-field select:focus{
border-color:var(--blue-400) !important;background:rgba(47,107,255,.07) !important;outline:none}
.m-application .zp-field ::placeholder{color:var(--muted-2)}
.zp-field .zp-select{position:relative}
.m-application .zp-field select{appearance:none;-webkit-appearance:none;cursor:pointer;display:block;padding-right:42px;
background-image:url("data:image/svg+xml;utf8,") !important;
background-repeat:no-repeat !important;background-position:right 14px center !important;background-size:16px !important}
.m-application .zp-field select option{background:var(--ink-800);color:var(--text)}
.zp-hint{display:block;margin-top:7px;font-size:12px;color:var(--muted-2)}
.zp-form-status.is-error{color:#FF6B7A;border-color:rgba(255,107,122,.35);background:rgba(255,107,122,.07)}
.zp-field.has-error input,.zp-field.has-error textarea,.zp-field.has-error select{border-color:#FF6B7A !important;background:rgba(255,107,122,.06) !important}
.zp-consent{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:var(--muted);line-height:1.55;margin:6px 0 22px;cursor:pointer}
.zp-consent input{width:18px;height:18px;flex:none;margin-top:1px;accent-color:var(--blue-500);opacity:1;position:static;pointer-events:auto}
.zp-consent a{color:var(--blue-300);text-decoration:underline;text-underline-offset:2px}
.zp-consent.has-error{color:#FF8A96}
.zp-form-status{display:none;padding:16px 18px;border-radius:var(--r-md);font-size:14px;margin-top:20px;
border:1px solid rgba(74,222,155,.3);background:rgba(74,222,155,.08);color:#B6F2D3}
.zp-form-status.is-visible{display:block}
.zp-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
@media (max-width:680px){.zp-form-grid{grid-template-columns:1fr}}
.zp-form-grid .zp-field--full{grid-column:1 / -1}
/* ---------- 19. Auth pages ---------- */
.zp-auth{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,70px);align-items:center;
padding:clamp(110px,12vw,160px) 0 clamp(60px,7vw,90px)}
@media (max-width:960px){.zp-auth{grid-template-columns:1fr}.zp-auth__aside{display:none}}
.zp-auth__aside blockquote{margin:0;font-family:var(--display);font-size:clamp(21px,2.4vw,29px);font-weight:500;letter-spacing:-.03em;line-height:1.35;color:var(--text)}
.zp-auth__aside cite{display:block;margin-top:18px;font-style:normal;font-size:13.5px;color:var(--muted)}
.zp-auth__links{margin-top:18px;font-size:13.5px;color:var(--muted)}
.zp-auth__links a{color:var(--blue-300)}
/* ---------- 20. Footer ---------- */
.footer-counter{background:transparent;position:relative;padding-top:0}
.footer-counter .counter-wrap{padding:clamp(50px,6vw,80px) 0;text-align:center;background:transparent}
.m-application .counter-wrap .use-text-title{font-size:clamp(46px,6vw,74px);letter-spacing:-.05em;
background:linear-gradient(102deg,#fff,var(--blue-300) 60%,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.m-application .counter-wrap .use-text-subtitle{color:var(--muted);font-size:15px;margin-top:10px}
.counter-wrap .call-action{margin-top:34px}
.m-application .call-action .use-text-subtitle{font-size:19px;color:var(--text);font-family:var(--display);letter-spacing:-.02em}
.footer{background:rgba(6,11,24,.75);border-top:1px solid var(--line);padding-top:clamp(40px,5vw,60px)}
.footer .logo{display:block;margin-bottom:16px}
.footer .logo img{display:none}
.footer .logo .zp-mark{display:block}
.m-application .footer-desc{color:var(--muted);font-size:14px;max-width:40ch;line-height:1.65}
.m-application .footer .title-nav{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);font-weight:500}
.footer .quick-links ul,.zp-footer-list{list-style:none;padding:0;margin:0;columns:1}
.zp-footer-list{columns:1}
.footer .quick-links ul li a,.zp-footer-list li a{display:block;padding:5px 0;font-size:14px;color:var(--text-dim);transition:color .2s}
.footer .quick-links ul li a:hover,.zp-footer-list li a:hover{color:var(--blue-300)}
.footer .socmed{margin:20px 0 14px;display:flex;gap:8px}
.footer .socmed .btn-icon{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);
display:inline-flex;align-items:center;justify-content:center;color:var(--blue-300)}
.footer .socmed .btn-icon:hover{border-color:var(--blue-400);background:rgba(47,107,255,.1)}
.zp-copyright{color:var(--muted-2);font-size:12.5px;margin-top:14px}
.zp-legal-note{color:var(--muted-2);font-size:12px;line-height:1.7;border-top:1px solid var(--line);
margin-top:30px;padding:22px 0 26px}
.mt-4{margin-top:26px}
/* ---------- 21. Reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (max-width:1279px){
.m-application .header{top:0}
.zp-page-hero{padding-top:110px}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
.reveal{opacity:1;transform:none}
}
/* ---------- 22. Template leftovers, corrected ---------- */
.theme--dark #footer .footer-counter,
.theme--light #footer .footer-counter{
background:linear-gradient(-130deg,rgba(29,78,216,.20),transparent 58%),var(--ink-900);
padding-top:0}
@media (min-width:960px){#footer .footer-counter{padding-top:0}}
@media (min-width:1920px){#footer .footer-counter{padding-top:0}}
#faq .zp-accordion .active .collapsible-header{background:rgba(47,107,255,.10);color:var(--text)}
#faq .zp-accordion .active i.material-icons{color:var(--blue-300)}
#faq .zp-accordion .paper{margin-bottom:0;border-radius:0 !important;box-shadow:none !important}
#faq .zp-accordion .heading{padding:0;font-size:17px}
#faq .zp-accordion .collapsible-header{padding-left:20px;padding-right:52px;border-radius:12px}
#faq .zp-accordion .collapsible-body{padding-left:20px}
#faq .zp-accordion .content .icon,#faq .zp-accordion .arrow{position:absolute;top:22px;right:18px}
/* ---------- 23. Page-specific pieces ---------- */
.zp-facts{display:grid;gap:0;margin-top:18px}
.zp-facts > div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.zp-facts > div:last-child{border-bottom:1px solid var(--line)}
.zp-facts span{font-size:13px;color:var(--muted)}
.zp-facts b{font-family:var(--mono);font-size:13px;color:var(--text);letter-spacing:.04em;text-align:right}
.zp-card--accent .zp-solution__foot{padding-top:20px}
.zp-note{margin-top:20px;font-size:13px;color:var(--muted-2);line-height:1.7;max-width:90ch}
.zp-market-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.zp-market-grid .zp-chip{font-family:var(--body);font-size:13px;letter-spacing:0;padding:8px 12px;border-radius:10px}
.zp-legal{max-width:78ch;margin:0 auto}
/* ---------- Hairline rows (commitments, contact channels) ---------- */
.zp-rows{list-style:none;margin:clamp(26px,3.5vw,40px) 0 0;padding:0;border-top:1px solid var(--line)}
.zp-row{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;
gap:0 clamp(16px,2.6vw,34px);padding:clamp(18px,2.4vw,26px) 4px;
border-bottom:1px solid var(--line);
transition:background .3s var(--ease),padding-left .3s var(--ease)}
.zp-row:hover{background:linear-gradient(90deg,rgba(47,107,255,.06),transparent 70%);padding-left:12px}
.zp-rows--plain .zp-row{grid-template-columns:1fr auto}
.zp-row__no{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--muted-2)}
.zp-row:hover .zp-row__no{color:var(--blue-400)}
.m-application .zp-row__title{font-size:clamp(17px,1.9vw,20px);letter-spacing:-.025em;margin-bottom:5px}
.m-application .zp-row__text{color:var(--text-dim);font-size:14.5px;line-height:1.6;margin:0;max-width:60ch}
.zp-row__link{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--blue-300);
white-space:nowrap;transition:color .25s var(--ease)}
.zp-row__link:hover{color:var(--cyan)}
@media (max-width:767px){
.zp-row{grid-template-columns:auto 1fr;gap:0 14px}
.zp-rows--plain .zp-row{grid-template-columns:1fr}
.zp-row__link{grid-column:2;justify-self:start;margin-top:10px}
.zp-rows--plain .zp-row__link{grid-column:1}
}
/* ---------- Feature cards (platform) ---------- */
.zp-fcards{display:grid;gap:clamp(14px,1.6vw,20px);margin-top:clamp(28px,4vw,44px)}
.zp-fcards--3{grid-template-columns:repeat(3,1fr)}
.zp-fcard{position:relative;overflow:hidden;isolation:isolate;
padding:24px 26px 26px;border-radius:var(--r-lg);border:1px solid var(--line);
background:linear-gradient(158deg,rgba(19,32,67,.92) 0%,rgba(10,17,35,.96) 55%,rgba(7,12,26,.98) 100%);
transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.zp-fcard::before{content:"";position:absolute;z-index:-1;left:-40px;top:-60px;width:210px;height:210px;
border-radius:50%;background:radial-gradient(circle,rgba(47,107,255,.26),transparent 68%);
opacity:.7;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.zp-fcard:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:var(--shadow-blue)}
.zp-fcard:hover::before{opacity:1;transform:scale(1.1)}
.zp-fcard__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.zp-fcard__art{margin:0;flex:none;width:52px;height:52px;display:grid;place-items:center;
border-radius:15px;border:1px solid var(--line);background:rgba(47,107,255,.10);
transition:border-color .35s var(--ease),background .35s var(--ease)}
/* 36px on screen off a 320px source: the downscale is what hides the source's edges */
.zp-fcard__art img{width:36px;height:36px;object-fit:contain;display:block}
.zp-fcard:hover .zp-fcard__art{border-color:var(--line-strong);background:rgba(47,107,255,.16)}
.zp-fcard__tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
color:var(--blue-300);white-space:nowrap;padding:5px 10px;border:1px solid var(--line);
border-radius:999px;background:rgba(47,107,255,.08)}
.m-application .zp-fcard__title{font-size:clamp(19px,2vw,22px);letter-spacing:-.028em;margin-bottom:8px}
.m-application .zp-fcard__text{color:var(--text-dim);font-size:14.5px;line-height:1.6;margin:0}
@media (max-width:959px){.zp-fcards--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:599px){
.zp-fcards--3{grid-template-columns:1fr}
.zp-fcard{padding:22px}
}
/* ---------- Legal documents (offer, personal-data policy) ---------- */
.zp-doclinks{max-width:78ch;margin:0 auto clamp(34px,4vw,52px)}
.zp-doclinks p{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;
margin:0;padding:16px 0;border-bottom:1px solid var(--line)}
.zp-doclinks p:first-child{border-top:1px solid var(--line)}
.m-application .zp-doclinks a{font-family:var(--display);font-size:17px;font-weight:600;
letter-spacing:-.02em;color:var(--text);transition:color .25s var(--ease)}
.m-application .zp-doclinks a:hover{color:var(--blue-300)}
.zp-doclinks span{margin-left:auto;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
text-transform:uppercase;color:var(--muted-2)}
@media (max-width:599px){.zp-doclinks span{margin-left:0;width:100%}}
.zp-section--doc{padding-top:clamp(28px,3vw,44px)}
.zp-toc{max-width:78ch;margin:0 auto clamp(34px,4vw,52px);padding:22px 26px 8px;line-height:1.5;
border:1px solid var(--line);border-radius:var(--r-lg);background:rgba(13,23,48,.4)}
.zp-toc .title-nav{color:var(--blue-300);margin-bottom:14px}
.zp-toc ol{list-style:none;margin:0;padding:0;column-width:270px;column-gap:36px}
.zp-toc li{margin-bottom:9px;break-inside:avoid}
.zp-toc a{color:var(--text-dim);font-size:14.5px;transition:color .25s var(--ease)}
.zp-toc a:hover{color:#fff}
.zp-doc-body{max-width:78ch;margin:0 auto;counter-reset:doc}
.zp-doc{scroll-margin-top:140px}
.zp-doc + .zp-doc{margin-top:clamp(38px,4.5vw,58px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--line)}
.m-application .zp-doc h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:20px}
.m-application .zp-doc p{color:var(--text-dim);font-size:15px;line-height:1.75;margin-bottom:15px}
.zp-doc-no{color:var(--blue-300);font-family:var(--mono);font-size:13px;font-weight:500;margin-right:6px}
.zp-doc .zp-doc-list{list-style:none;margin:0 0 18px;padding:0}
.zp-doc .zp-doc-list li{position:relative;padding-left:22px;margin-bottom:11px;
color:var(--text-dim);font-size:15px;line-height:1.7}
.zp-doc .zp-doc-list li::before{content:"";position:absolute;left:2px;top:11px;width:6px;height:6px;
border-radius:50%;background:var(--blue-400);opacity:.8}
.zp-doc b{color:var(--text);font-weight:600}
.zp-doc a{color:var(--blue-300)}
.zp-doc a:hover{color:var(--cyan)}
/* a value that still has to come off the incorporation certificate */
.zp-fill{display:inline-block;padding:1px 8px;border-radius:6px;border:1px dashed rgba(255,196,107,.55);
background:rgba(255,196,107,.10);color:var(--amber);font-family:var(--mono);font-size:12.5px;
letter-spacing:.02em;white-space:nowrap}
@media (max-width:599px){
.zp-toc ol{column-width:auto}
}
.zp-legal + .zp-legal{margin-top:clamp(40px,5vw,64px);padding-top:clamp(34px,4vw,50px);border-top:1px solid var(--line)}
.m-application .zp-legal h2{font-size:clamp(24px,3vw,34px);margin-bottom:18px}
.m-application .zp-legal p{color:var(--text-dim);font-size:15px;line-height:1.75;margin-bottom:16px}
.zp-legal:target{scroll-margin-top:140px}
.zp-404{padding-top:clamp(140px,16vw,220px);text-align:center}
.m-application .zp-404__code{font-size:clamp(90px,18vw,190px);letter-spacing:-.06em;line-height:.9;
background:linear-gradient(102deg,#fff,var(--blue-300) 55%,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.zp-404 .zp-eyebrow,.zp-404 .zp-sub{justify-content:center;margin-left:auto;margin-right:auto;text-align:center}
.zp-404 .btn-area{justify-content:center}
.zp-form .btn.secondary{margin-top:6px}
.zp-form-panel .zp-heading{font-size:clamp(24px,2.8vw,32px)}
.zp-auth__form .zp-form-panel{padding:clamp(26px,3vw,40px)}
.zp-section#apply-form,.zp-section#contact-main{padding-top:clamp(20px,3vw,40px)}
#apply{scroll-margin-top:120px}
#requirements{scroll-margin-top:100px}
/* Interior pages get the same ambient wash as the banner */
.zp-page-hero::before{content:"";position:absolute;inset:-40px 0 auto;height:520px;pointer-events:none;z-index:-1;
background:radial-gradient(720px 320px at 20% 0%,rgba(47,107,255,.20),transparent 68%)}
/* ---------- 24. Materialize input overrides (specificity fixes) ---------- */
.m-application .zp-field > label.zp-label{
position:static !important;transform:none !important;top:auto !important;left:auto !important;
font-size:13px !important;color:var(--text-dim) !important;pointer-events:auto;width:auto}
.m-application .zp-field > input[type="text"],
.m-application .zp-field > input[type="email"],
.m-application .zp-field > input[type="password"],
.m-application .zp-field > input[type="tel"],
.m-application .zp-field > textarea{
border-bottom:1px solid var(--line) !important;height:auto !important}
.m-application .zp-consent input[type="checkbox"]:not(:checked),
.m-application .zp-consent input[type="checkbox"]:checked{
position:static !important;opacity:1 !important;pointer-events:auto;left:auto;width:18px;height:18px}
.m-application .zp-field select{display:block !important;height:auto !important}
.m-application .zp-field .select-wrapper{display:none}
.m-application .zp-consent [type="checkbox"] + span:not(.lever)::before,
.m-application .zp-consent [type="checkbox"] + span:not(.lever)::after{display:none !important;content:none !important}
.m-application .zp-consent [type="checkbox"] + span:not(.lever){padding-left:0 !important;height:auto;line-height:1.55}
.m-application .zp-accordion .collapsible-body,
.theme--dark .zp-accordion .collapsible-body,
.m-application .zp-accordion .collapsible{background-color:transparent !important;border:0 !important}
.m-application .zp-accordion li.accordion-content{background-color:transparent !important}
.m-application .zp-auth__aside blockquote{border-left:3px solid var(--blue-500);padding-left:22px;background:transparent}
@media (max-width:640px){
.zp-banner .btn-area,.zp-page-hero .btn-area,.zp-section .btn-area{justify-content:flex-start}
.zp-cta .btn-area{justify-content:center}
.m-application .btn-large{width:100%;justify-content:center}
.zp-cta .btn-large{width:auto}
.zp-hero-note{gap:8px 16px}
.board__stat b{font-size:18px}
.zp-section{padding:52px 0}
}
/* ---------- 25. Mobile sidenav ---------- */
.m-application .sidenav.mobile-nav{background:var(--ink-900) !important;border-right:1px solid var(--line);width:min(86vw,340px)}
.m-application .sidenav .collection{border:0;margin:0;background:transparent}
.m-application .sidenav .collection-item{background:transparent !important;border:0;padding:0}
.m-application .sidenav .menu-list{
display:block;padding:15px 22px;font-family:var(--display);font-size:19px;font-weight:500;
letter-spacing:-.02em;color:#EDF2FF !important;text-transform:none;line-height:1.3;height:auto}
.m-application .sidenav .menu-list:hover{background:rgba(47,107,255,.10) !important;color:#fff !important}
.m-application .sidenav .divider-sidebar{border:0;border-top:1px solid var(--line);margin:14px 22px}
.m-application .sidenav .collection:last-child .collection-item:last-child .menu-list{
margin:10px 22px 0;padding:13px 20px;border-radius:999px;text-align:center;color:#fff !important;
background:linear-gradient(135deg,var(--blue-500),var(--blue-700));font-size:16px}
.m-application .sidenav .menu{padding-top:70px}
/* ==========================================================================
26. Lean block layout — hero, industry rows, template illustrations
========================================================================== */
/* Hero: centred, text only (the art lives in the industry rows) */
.zp-hero{max-width:880px;margin-inline:auto;text-align:center}
.zp-hero .zp-sub{font-size:clamp(16px,1.5vw,19px);max-width:54ch;margin-inline:auto}
.zp-hero .btn-area{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
#banner.zp-banner .root{padding:clamp(158px,17vw,240px) 0 clamp(64px,7vw,96px)}
/* Kicker above an industry heading */
.zp-kicker{
display:inline-block;margin-bottom:14px;padding:6px 12px;border-radius:999px;
border:1px solid var(--line-strong);background:rgba(47,107,255,.08);
font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-300)}
.zp-section--row{padding:clamp(40px,5vw,72px) 0}
.zp-section--row + .zp-section--row{border-top:0}
.zp-section + .zp-section--row,.zp-section--row + .zp-section{border-top:0}
.zp-section--row .zp-sub{font-size:16px;margin-top:14px}
.m-application .zp-section--row .zp-heading{font-size:clamp(23px,2.8vw,34px)}
/* Template illustrations, shifted from the original green/orange into blue */
.zp-art{margin:0;display:flex;justify-content:center;position:relative}
.zp-art::before{
content:"";position:absolute;inset:14% 12%;border-radius:50%;z-index:0;
background:radial-gradient(circle,rgba(47,107,255,.28),transparent 68%);filter:blur(34px)}
.zp-art img{position:relative;z-index:1;max-width:min(100%,370px);height:auto}
.zp-art--blue img{filter:none}
/* Laptop mock from the template with a live console drawn over its screen */
.zp-laptop{margin:0;position:relative;max-width:520px;margin-inline:auto}
.zp-laptop > img{width:100%;height:auto;filter:brightness(.9)}
.zp-screen{
position:absolute;left:11.4%;top:3.6%;width:78.6%;height:75.4%;
background:linear-gradient(165deg,#0C1730,#070D1E);border-radius:2px;
display:flex;flex-direction:column;justify-content:center;gap:2px;padding:6px 10px;overflow:hidden}
.zp-screen__row{
display:grid;grid-template-columns:18px 42px 1fr auto;align-items:center;gap:8px;
padding:6px 8px;border-radius:6px;background:rgba(122,157,255,.05);
font-family:var(--mono);font-size:10px;letter-spacing:.04em}
.zp-screen__row i{font-style:normal;font-size:12px}
.zp-screen__row b{color:var(--blue-300);font-weight:500}
.zp-screen__row em{font-style:normal;color:var(--muted);font-family:var(--body);font-size:10.5px}
.zp-screen__row s{text-decoration:none;color:var(--mint);font-size:9px;letter-spacing:.14em;text-transform:uppercase}
.zp-screen__row:nth-child(3) s{color:var(--amber)}
@media (max-width:600px){.zp-screen__row em{display:none}}
/* Split CTA used by the trader block */
.zp-cta--split{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
gap:24px;text-align:left;padding:clamp(28px,4vw,44px)}
.zp-cta--split .zp-sub{margin:12px 0 0;text-align:left;max-width:52ch}
.zp-cta--split .btn-area{margin:0}
/* Footer, trimmed */
.zp-footer-bottom{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;
border-top:1px solid var(--line);margin-top:20px;padding:22px 0 26px;font-size:12.5px;color:var(--muted-2)}
.zp-footer-mail a{color:var(--blue-300)}
.footer .footer-desc{padding-bottom:0}
/* Hero backdrop must cover the whole banner, including the space under the fixed header */
#banner.zp-banner .canvas-wrap{position:absolute !important;top:0;left:0;right:0;bottom:0;width:100%;height:auto}
#banner.zp-banner .overlay-banner{position:absolute !important;inset:0;width:100%;height:100%}
#banner.zp-banner .particle-background{position:absolute;inset:0;width:100%;height:100%}
/* Hero backdrop fades downward: gradient, grid and particles dissolve into the page */
#banner.zp-banner .canvas-wrap{
bottom:-160px;overflow:visible;
-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 46%,rgba(0,0,0,.72) 68%,rgba(0,0,0,.32) 84%,transparent 100%);
mask-image:linear-gradient(180deg,#000 0%,#000 46%,rgba(0,0,0,.72) 68%,rgba(0,0,0,.32) 84%,transparent 100%);
}
.theme--dark #banner .canvas-wrap{
background:linear-gradient(178deg,#070E22 0%,#0C1A3C 42%,#081228 72%,#050912 100%)}
#banner .canvas-wrap:after{background:none}
.theme--dark #banner .overlay-banner:before{
-webkit-mask-image:radial-gradient(ellipse 95% 78% at 50% 6%,#000 10%,transparent 78%);
mask-image:radial-gradient(ellipse 95% 78% at 50% 6%,#000 10%,transparent 78%)}
#banner.zp-banner .particle-background{opacity:.55}
/* The block after the hero starts closer, so the seam reads as one surface */
.zp-section#industries{padding-top:clamp(20px,2.6vw,40px)}
/* ==========================================================================
27. Motion and finish
========================================================================== */
/* Page grain — adds depth to the flat navy without reading as texture */
body::after{
content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.028;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
}
/* Hero entrance — one orchestrated moment on load */
@keyframes zp-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.zp-hero h1{animation:zp-rise .85s var(--ease) backwards}
.zp-hero .zp-sub{animation:zp-rise .85s var(--ease) .12s backwards}
.zp-hero .btn-area{animation:zp-rise .85s var(--ease) .22s backwards}
.market.zp-ticker{animation:zp-rise .6s var(--ease) .35s backwards}
@media (prefers-reduced-motion:reduce){.zp-ticker__track{animation:none !important}}
/* Scroll reveal, staggered by JS */
.reveal{opacity:0;transform:translateY(24px);
transition:opacity .75s var(--ease),transform .75s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
/* Cards: cursor-tracked spotlight and a lit edge */
.m-application .paper.zp-card{position:relative;isolation:isolate;overflow:hidden}
.m-application .paper.zp-card::before{
content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .45s var(--ease);
background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(47,107,255,.20),transparent 62%)}
.m-application .paper.zp-card:hover::before{opacity:1}
.m-application .paper.zp-card::after{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
border:1px solid transparent;transition:border-color .45s var(--ease)}
.m-application .paper.zp-card:hover::after{border-color:rgba(122,157,255,.34)}
.m-application .paper.zp-card:hover .zp-card__icon{
border-color:rgba(122,157,255,.5);
box-shadow:0 8px 26px -12px rgba(47,107,255,.7)}
.zp-card__icon{transition:border-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease)}
.m-application .paper.zp-card:hover .zp-card__icon{transform:translateY(-2px)}
/* Primary button: a sheen that sweeps once on hover */
.money .btn.secondary{position:relative;overflow:hidden}
.money .btn.secondary::after{
content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;pointer-events:none;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.30),transparent);
transform:skewX(-18deg);opacity:0}
.money .btn.secondary:hover::after{animation:zp-sheen .85s var(--ease) forwards}
@keyframes zp-sheen{0%{left:-60%;opacity:1}100%{left:120%;opacity:0}}
/* Illustrations drift, with a glow that breathes underneath */
@keyframes zp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes zp-breathe{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.9;transform:scale(1.06)}}
.zp-art img{animation:zp-float 8s ease-in-out infinite}
.zp-art::before{animation:zp-breathe 8s ease-in-out infinite}
.zp-section--row:nth-of-type(even) .zp-art img{animation-delay:-2.5s}
/* Corridor board and console lift slightly on hover */
.board,.m-application .paper.zp-console,.zp-laptop{
transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.board:hover,.m-application .paper.zp-console:hover{
transform:translateY(-4px);box-shadow:0 50px 110px -50px rgba(3,8,26,.95),0 0 0 1px rgba(122,157,255,.18)}
/* Laptop console rows cascade in when the block arrives */
.zp-screen__row{opacity:0;transform:translateX(-8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.zp-laptop.is-in .zp-screen__row{opacity:1;transform:none}
.zp-laptop.is-in .zp-screen__row:nth-child(1){transition-delay:.10s}
.zp-laptop.is-in .zp-screen__row:nth-child(2){transition-delay:.22s}
.zp-laptop.is-in .zp-screen__row:nth-child(3){transition-delay:.34s}
.zp-laptop.is-in .zp-screen__row:nth-child(4){transition-delay:.46s}
/* Section eyebrow rule draws itself in */
.zp-eyebrow::before{transition:width .8s var(--ease) .1s}
.reveal .zp-eyebrow::before,.zp-eyebrow.reveal::before{width:0}
.reveal.is-in .zp-eyebrow::before,.zp-eyebrow.reveal.is-in::before{width:22px}
/* Links and rows */
.table-wrap tbody tr{transition:background .25s var(--ease),box-shadow .25s var(--ease)}
.table-wrap tbody tr:hover{box-shadow:inset 3px 0 0 var(--blue-500)}
.zp-chip{transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease)}
.zp-market-grid .zp-chip:hover{border-color:var(--blue-400);background:rgba(47,107,255,.10);transform:translateY(-2px)}
.footer .quick-links ul li a,.zp-footer-list li a{transition:color .25s var(--ease),transform .25s var(--ease)}
.footer .quick-links ul li a:hover,.zp-footer-list li a:hover{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
.zp-art img,.zp-art::before,.market.zp-ticker,.zp-hero h1,.zp-hero .zp-sub,.zp-hero .btn-area{animation:none !important}
.reveal{opacity:1 !important;transform:none !important}
.zp-screen__row{opacity:1 !important;transform:none !important}
}
.zp-field--conditional[hidden]{display:none !important}
.zp-field--conditional{animation:zp-rise .4s var(--ease)}
.m-application .zp-field > input[type="text"]{background:rgba(255,255,255,.025)}
/* ---------- 28. Back-to-top button ---------- */
.m-application .btn-floating,
.m-application .btn-floating.btn-large{
width:52px;height:52px;min-width:0;line-height:1;padding:0;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;overflow:visible;
box-shadow:0 18px 40px -18px rgba(47,107,255,.8)}
.m-application .btn-floating .material-icons,
.m-application .btn-floating .icon{font-size:22px;line-height:1;height:auto;width:auto;display:block}
.m-application .btn-floating:hover{transform:translateY(-3px);box-shadow:0 24px 50px -18px rgba(47,107,255,.95)}
.page-nav{opacity:0;transform:translateY(12px);pointer-events:none;
transition:opacity .35s var(--ease),transform .35s var(--ease)}
.page-nav.is-visible{opacity:1;transform:none;pointer-events:auto}
/* ---------- 29. Illustrated card icons ---------- */
.zp-card__icon--art{
width:60px;height:60px;border:0;background:none;border-radius:0;margin-bottom:18px;
display:block;position:relative}
.zp-card__icon--art::before{
content:"";position:absolute;inset:-14px;border-radius:50%;z-index:0;
background:radial-gradient(circle,rgba(47,107,255,.22),transparent 68%);
opacity:0;transition:opacity .45s var(--ease)}
.zp-card__icon--art img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;
transition:transform .45s var(--ease)}
.m-application .paper.zp-card:hover .zp-card__icon--art{box-shadow:none;transform:none}
.m-application .paper.zp-card:hover .zp-card__icon--art::before{opacity:1}
.m-application .paper.zp-card:hover .zp-card__icon--art img{transform:translateY(-3px) scale(1.04)}
/* ---------- 30. Verticals panel (replaces the card grid) ---------- */
.zp-verticals{
position:relative;border:1px solid var(--line-strong);border-radius:var(--r-xl);overflow:hidden;
background:linear-gradient(168deg,rgba(19,32,67,.9),rgba(7,12,26,.94));box-shadow:var(--shadow-lg)}
.zp-verticals::before{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(700px 220px at 50% 0%,rgba(47,107,255,.18),transparent 72%)}
.zp-verticals__bar{display:flex;align-items:center;gap:12px;padding:15px 22px;
border-bottom:1px solid var(--line);position:relative}
.zp-verticals__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative}
@media (max-width:900px){.zp-verticals__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.zp-verticals__grid{grid-template-columns:1fr}}
.zp-vert{
display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:52px auto;
grid-template-areas:"icon tag" "body body";align-items:start;
gap:6px 14px;padding:26px 24px 28px;position:relative;isolation:isolate;
transition:background .35s var(--ease)}
.zp-vert + .zp-vert{box-shadow:inset 1px 0 0 var(--line)}
@media (max-width:900px){
.zp-vert:nth-child(odd){box-shadow:none}
.zp-vert:nth-child(n+3){box-shadow:inset 0 1px 0 var(--line)}
.zp-vert:nth-child(4){box-shadow:inset 1px 0 0 var(--line),inset 0 1px 0 var(--line)}}
@media (max-width:560px){.zp-vert + .zp-vert{box-shadow:inset 0 1px 0 var(--line) !important}}
.zp-vert::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .35s var(--ease);
background:linear-gradient(180deg,rgba(47,107,255,.16),transparent 78%)}
.zp-vert:hover::before{opacity:1}
.zp-vert__icon{grid-area:icon;width:52px;height:52px;display:block}
.zp-vert__icon img{display:block;width:100%;height:100%;object-fit:contain}
.zp-vert__tag{grid-area:tag;justify-self:end;align-self:start;
font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);
border:1px solid var(--line);border-radius:999px;padding:4px 9px;transition:color .35s,border-color .35s}
.zp-vert__body{grid-area:body;display:block;margin-top:12px}
.zp-vert__name{display:block;font-family:var(--display);font-size:21px;font-weight:600;
letter-spacing:-.03em;color:var(--text);margin-bottom:6px}
.zp-vert__line{display:block;font-size:13.5px;line-height:1.5;color:var(--muted);max-width:26ch;min-height:2.9em}
@media (max-width:620px){.zp-verticals__bar .board__meta{display:none}
.zp-verticals__bar{padding:13px 18px}
.zp-vert{padding:22px 20px 24px}
.zp-vert__line{min-height:0}}