/* Vasco.finance — temporary one-screen landing
   Colours: Meridian palette, dark theme (Vasco Brand Book v1.1, Part 03).
   Layout: desktop above 820px, mobile at 820px and below. */

@font-face{font-family:"Albert Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/albert-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Albert Sans";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/albert-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Albert Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/albert-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2")}

:root{
  --paper:#0D1520;--paper-2:#0A111A;--surface:#131D2B;
  --border:#273244;--border-strong:#364356;
  --ink:#F7F4EF;--ink-2:#A7B0BF;--ink-3:#7B8595;--ink-4:#4A5567;
  --signal:#F2622E;--signal-hi:#FF7A45;--signal-soft:#3A1E14;--on-signal:#0B1F3A;
  --danger:#E8654F;
  --ease:cubic-bezier(.2,.7,.2,1);
  --sans:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad-x:clamp(20px,5vw,72px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit}
button,input,select{font:inherit}
.caps{font-family:var(--mono);font-size:11px;line-height:1.4;letter-spacing:.12em;font-weight:500;text-transform:uppercase}
.sr-only,.hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- motion ---------- */
@keyframes up{from{opacity:0;transform:translateY(14px)}}
@keyframes sheetUp{from{opacity:0;transform:translateY(28px)}}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.3)}}
@keyframes pulse{from{transform:scale(.7);opacity:.9}to{transform:scale(2.6);opacity:0}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* one voyage = 18s: sail 0–86%, arrive, rest, leave again */
@keyframes sail{0%{offset-distance:0%;opacity:0}3%{opacity:1}86%{offset-distance:100%;opacity:1}90%,100%{offset-distance:100%;opacity:0}}
@keyframes arrive{0%,85.5%{opacity:0;transform:scale(.7)}86%{opacity:.9;transform:scale(.7)}97%,100%{opacity:0;transform:scale(2.8)}}
.in{animation:up .8s var(--ease) backwards}

/* ---------- shared chart pieces ---------- */
.gridline{fill:none;stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke;animation:fade 1.2s ease backwards}
.meridian{font-family:var(--mono);font-size:10px;letter-spacing:.1em;fill:var(--ink-4);animation:fade 1.2s ease .3s backwards}
.coast{fill:var(--surface);stroke:var(--ink-3);stroke-width:1.5;stroke-linejoin:round;animation:fade 1.2s ease .2s backwards}
.contour{fill:none;stroke:var(--ink-4);stroke-width:1;stroke-dasharray:2 5;stroke-linecap:round;animation:fade 1.2s ease .4s backwards}
.alt{fill:none;stroke:var(--border-strong);stroke-width:2;stroke-dasharray:3 9;stroke-linecap:round;animation:fade 1s ease 1.6s backwards}
.route{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.node{transform-box:fill-box;transform-origin:center;animation:pop .5s var(--ease) backwards}
.origin{fill:var(--ink)}
.arrival{fill:var(--signal)}
.dot{fill:var(--paper);stroke:var(--ink);stroke-width:3;transform-box:fill-box;transform-origin:center}
.ring,.arrive-ring{fill:none;stroke:var(--signal-hi);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.wp-lbl{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;fill:var(--ink-3);transition:fill .28s var(--ease)}
.end-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.12em;fill:var(--ink-3);animation:fade .8s ease 2.9s backwards}
.wp{cursor:pointer}
.hit{fill:transparent}
.vessel{fill:var(--signal-hi);stroke:var(--paper);stroke-width:2;offset-rotate:0deg}

.site[data-active="terminal"] .wp-terminal .wp-lbl,
.site[data-active="prime"] .wp-prime .wp-lbl,
.site[data-active="helm"] .wp-helm .wp-lbl{fill:var(--ink)}
.site[data-active="terminal"] .wp-terminal .ring,
.site[data-active="prime"] .wp-prime .ring,
.site[data-active="helm"] .wp-helm .ring{animation:pulse 2.2s ease-out infinite}

/* rotating word, panes, one-liners */
.stack{display:grid}
.word,.pane,.line{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease),visibility 0s linear .5s}
.site[data-active="terminal"] .is-terminal,
.site[data-active="prime"] .is-prime,
.site[data-active="helm"] .is-helm{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease) .12s,transform .5s var(--ease) .12s,visibility 0s}

/* progress bars: one fill per product, duration set from ROTATE_MS in site.js */
.bar{flex:1;height:2px;background:var(--border);position:relative;overflow:hidden;border-radius:2px}
.bar i{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left center}
.site[data-active="terminal"] .bar-terminal i,
.site[data-active="prime"] .bar-prime i,
.site[data-active="helm"] .bar-helm i{transform:scaleX(1)}
.site[data-auto="on"][data-active="terminal"] .bar-terminal i,
.site[data-auto="on"][data-active="prime"] .bar-prime i,
.site[data-auto="on"][data-active="helm"] .bar-helm i{animation:fill var(--rotate,5s) linear both}

/* controls */
.tab{font-size:14px;font-weight:500;height:36px;padding:0 14px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--ink-2);cursor:pointer;transition:color .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease)}
.tab:hover{color:var(--ink)}
.site[data-active="terminal"] .tab-terminal,
.site[data-active="prime"] .tab-prime,
.site[data-active="helm"] .tab-helm{color:var(--ink);background:var(--surface);border-color:var(--border-strong)}
.field{font-size:14px;height:40px;width:100%;padding:0 12px;border-radius:6px;border:1px solid var(--border-strong);background:var(--paper);color:var(--ink);outline:none;transition:border-color .12s var(--ease)}
.field::placeholder{color:var(--ink-3)}
.field:hover{border-color:var(--ink-3)}
.field:focus-visible{border:1.5px solid var(--ink);padding:0 11.5px}
.cta{font-size:15px;font-weight:600;height:44px;padding:0 22px;border-radius:6px;border:0;background:var(--signal);color:var(--on-signal);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:filter .18s var(--ease)}
.cta:hover{filter:brightness(1.1)}
.cta svg{transition:transform .18s var(--ease)}
.cta:hover svg{transform:translateX(3px)}
.cta[disabled]{opacity:.6;cursor:progress}
.ghost{font-size:14px;font-weight:500;height:40px;padding:0 16px;border-radius:6px;border:1px solid var(--border-strong);background:transparent;color:var(--ink);cursor:pointer}
.yt{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 14px 0 10px;border-radius:6px;border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);text-decoration:none;font-size:14px;font-weight:500;transition:border-color .18s var(--ease),transform .18s var(--ease)}
.yt:hover{border-color:var(--ink);transform:translateY(-1px)}
.soon{display:inline-flex;align-items:center;gap:8px;height:24px;padding:0 10px;border-radius:3px;background:var(--signal-soft);color:var(--signal)}
.soon i{width:6px;height:6px;border-radius:50%;background:var(--signal-hi);animation:blink 1.8s ease-in-out infinite}
.tab:focus-visible,.cta:focus-visible,.yt:focus-visible,.ghost:focus-visible,.step:focus-visible,.logo-link:focus-visible,.text-link:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.text-link{color:var(--signal);text-underline-offset:3px}

/* field validation */
.f{display:flex;flex-direction:column;gap:5px;min-width:0}
.f-err{display:none;font-size:12px;line-height:1.35;color:var(--danger)}
.f.invalid .f-err{display:block}
.f.invalid .field,.f.invalid .field:hover{border-color:var(--danger)}
.f.invalid .field:focus-visible{border:1.5px solid var(--danger)}
.m-fields .f{gap:4px}

/* demo panel states */
.done,.err{display:none}
[data-state="sent"] form,[data-state="mail"] form{display:none}
[data-state="sent"] .done-sent,[data-state="mail"] .done-mail{display:flex}
[data-state="error"] .err{display:block}
.done{flex-direction:column;gap:12px;align-items:flex-start}
.done-title{font-size:24px;line-height:1.2;letter-spacing:-.02em;font-weight:600}
.done p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2)}
.mono-em{font-family:var(--mono);font-size:13px;color:var(--ink);overflow-wrap:anywhere}
.err{margin:0;font-size:13px;line-height:1.5;color:var(--signal)}

/* =========================================================
   DESKTOP
   ========================================================= */
.mob{display:none}
.desk{position:relative;display:flex;flex-direction:column;height:100vh;height:100dvh;min-height:640px;overflow:hidden}
.chart{position:absolute;inset:0;width:100%;height:100%}
.desk .route{stroke-dasharray:1060;animation:draw-d 2.4s cubic-bezier(.6,.1,.2,1) .5s backwards}
@keyframes draw-d{from{stroke-dashoffset:1060}}
.desk .vessel{offset-path:path('M762 740 V528 a28 28 0 0 1 28 -28 H974 a28 28 0 0 0 28 -28 V288 a28 28 0 0 1 28 -28 H1362');animation:sail 18s linear 3.2s infinite backwards}
.desk .arrive-ring{animation:arrive 18s linear 3.2s infinite}
@keyframes pass-d1{0%,9.7%{fill:var(--paper);transform:scale(1)}9.9%{fill:var(--ink);transform:scale(1.4)}13%{transform:scale(1)}86%{fill:var(--ink);transform:scale(1)}86.3%,100%{fill:var(--paper);transform:scale(1)}}
@keyframes pass-d2{0%,28.4%{fill:var(--paper);transform:scale(1)}28.6%{fill:var(--ink);transform:scale(1.4)}32%{transform:scale(1)}86%{fill:var(--ink);transform:scale(1)}86.3%,100%{fill:var(--paper);transform:scale(1)}}
@keyframes pass-d3{0%,47.2%{fill:var(--paper);transform:scale(1)}47.4%{fill:var(--ink);transform:scale(1.4)}51%{transform:scale(1)}86%{fill:var(--ink);transform:scale(1)}86.3%,100%{fill:var(--paper);transform:scale(1)}}
.desk .wp-terminal .dot{animation:pop .5s var(--ease) 1s backwards,pass-d1 18s linear 3.2s infinite}
.desk .wp-prime .dot{animation:pop .5s var(--ease) 1.5s backwards,pass-d2 18s linear 3.2s infinite}
.desk .wp-helm .dot{animation:pop .5s var(--ease) 2s backwards,pass-d3 18s linear 3.2s infinite}

.d-head{position:relative;z-index:2;flex:none;height:72px;padding:0 var(--pad-x);display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo-link{display:flex;align-items:center;text-decoration:none}
.d-head .logo{display:block;height:30px;width:auto}
.d-right{display:flex;align-items:center;gap:20px}
.d-nav{display:flex;align-items:center;gap:4px}
.yt-sub{color:var(--ink-3);font-weight:400}
.hdr-link{font-size:14px;font-weight:500;color:var(--ink-2);text-decoration:none;padding:8px 2px;transition:color .18s var(--ease)}
.hdr-link:hover{color:var(--ink)}
.hdr-link:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}

.d-main{position:relative;z-index:1;flex:1 1 auto;min-height:0;padding:0 var(--pad-x);display:flex;align-items:center}
.d-copy{width:100%;max-width:540px;display:flex;flex-direction:column;gap:clamp(14px,2.4vh,24px);padding:12px 0}
.d-eyebrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;animation-delay:.1s}
.d-eyebrow .caps:last-child{color:var(--ink-3)}
.d-h1{margin:0;font-size:clamp(36px,min(4.3vw,7.2vh),62px);line-height:1.05;letter-spacing:-.03em;font-weight:600;animation-delay:.2s}
.d-h1 .stack{color:var(--signal)}
.d-lede{margin:0;max-width:50ch;font-size:clamp(15px,1.25vw,18px);line-height:1.5;color:var(--ink-2);animation-delay:.35s}
.d-chips{display:none;flex-direction:column;gap:8px;animation-delay:.4s}
.d-chips-row{display:flex;gap:4px;flex-wrap:wrap}
.d-chips .tab{height:44px}
.d-chips .stack{font-size:14px;line-height:1.5;color:var(--ink-2)}

.d-form-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:clamp(16px,2.2vh,22px) 22px;animation-delay:.5s}
.d-form{display:flex;flex-direction:column;gap:14px;margin:0}
.d-form-title{color:var(--ink-3)}
.d-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.d-fields .f{gap:4px}
.d-fields label{font-size:11px;line-height:1.4;color:var(--ink-2)}
.d-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.d-note{font-size:13px;line-height:1.5;color:var(--ink-3)}
.done .caps{color:var(--signal)}

.d-card{position:absolute;right:clamp(20px,3.4vw,48px);bottom:20px;width:340px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:18px;animation-delay:2.2s}
.d-card .pane{display:flex;flex-direction:column;gap:12px}
.d-card .caps{color:var(--ink-3)}
.d-card h2{margin:0;font-size:28px;line-height:1.15;letter-spacing:-.02em;font-weight:600}
.d-card p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-top:14px;border-top:1px solid var(--border)}
.facts div{display:flex;flex-direction:column;gap:2px}
.facts b{font-family:var(--mono);font-size:13px;font-weight:500}
.facts span{font-size:11px;line-height:1.4;color:var(--ink-3)}
.bars{display:flex;gap:6px}

.d-foot{position:relative;z-index:2;flex:none;min-height:48px;padding:8px var(--pad-x);display:flex;align-items:center;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;border-top:1px solid var(--border);color:var(--ink-3);background:var(--paper);animation-delay:.7s}
.d-foot-right{display:flex;gap:8px 24px;flex-wrap:wrap}
.foot-link{color:inherit;text-decoration:none}
.foot-link:hover{color:var(--ink)}
.foot-link:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

@media (max-width:1400px){
  .voyage{display:none} /* keeps the footer on one line */
}
@media (max-width:1180px){
  .d-card,.d-nav{display:none}
  .d-chips{display:flex}
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width:820px){
  .desk{display:none}
  .mob{display:flex}
}
.mob{position:relative;flex-direction:column;align-items:center;min-height:100vh;min-height:100dvh;overflow:hidden}
.m-grid{position:absolute;inset:0;opacity:.55;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:65px 65px;background-position:40px 9px;animation:fade 1.4s ease backwards}
.mob > :not(.m-grid){width:100%;max-width:560px}
.m-head{position:relative;z-index:2;flex:none;height:60px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.m-head .logo{display:block;height:24px;width:auto}
.m-head .soon{height:26px}
.m-h1{position:relative;z-index:2;flex:none;margin:0;padding:10px 20px 0;font-size:clamp(34px,10.6vw,46px);line-height:1.04;letter-spacing:-.035em;font-weight:600;animation-delay:.15s}
.m-h1 .stack{color:var(--signal)}
.m-chartwrap{position:relative;z-index:1;flex:1 1 auto;min-height:140px;animation-delay:.25s}
.m-chart{position:absolute;inset:0;width:100%;height:100%}
.mob .route{stroke-dasharray:490;animation:draw-m 2.2s cubic-bezier(.6,.1,.2,1) .4s backwards}
@keyframes draw-m{from{stroke-dashoffset:490}}
.mob .alt{stroke-width:1.5;stroke-dasharray:2 7}
.mob .end-lbl{font-size:9px;animation-delay:2.6s}
.mob .vessel{offset-path:path('M40 258 V196 a18 18 0 0 1 18 -18 H190 a18 18 0 0 0 18 -18 V92 a18 18 0 0 1 18 -18 H350');animation:sail 18s linear 3s infinite backwards}
.mob .arrive-ring{animation:arrive 18s linear 3s infinite}
@keyframes pass-m1{0%,5.9%{fill:var(--paper);transform:scale(1)}6.2%{fill:var(--ink);transform:scale(1.4)}10%{transform:scale(1)}86%{fill:var(--ink);transform:scale(1)}86.3%,100%{fill:var(--paper);transform:scale(1)}}
@keyframes pass-m2{0%,28.3%{fill:var(--paper);transform:scale(1)}28.6%{fill:var(--ink);transform:scale(1.4)}32%{transform:scale(1)}86%{fill:var(--ink);transform:scale(1)}86.3%,100%{fill:var(--paper);transform:scale(1)}}
@keyframes pass-m3{0%,51.6%{fill:var(--paper);transform:scale(1)}51.9%{fill:var(--ink);transform:scale(1.4)}55%{transform:scale(1)}86%{fill:var(--ink);transform:scale(1)}86.3%,100%{fill:var(--paper);transform:scale(1)}}
.mob .wp-terminal .dot{animation:pop .5s var(--ease) .9s backwards,pass-m1 18s linear 3s infinite}
.mob .wp-prime .dot{animation:pop .5s var(--ease) 1.3s backwards,pass-m2 18s linear 3s infinite}
.mob .wp-helm .dot{animation:pop .5s var(--ease) 1.7s backwards,pass-m3 18s linear 3s infinite}

.m-sheet{position:relative;z-index:2;flex:none;background:var(--surface);border-top:1px solid var(--border-strong);border-radius:20px 20px 0 0;padding:18px 20px calc(8px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px;animation:sheetUp .9s var(--ease) .35s backwards}
.m-steps{display:flex;gap:10px}
.step{flex:1 1 0;min-width:0;height:44px;padding:12px 0 0;border:0;background:transparent;text-align:left;cursor:pointer;position:relative;color:var(--ink-3);font-size:15px;line-height:1.3;font-weight:600;letter-spacing:-.01em;transition:color .18s var(--ease)}
.step .bar{position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px;background:var(--border-strong)}
.site[data-active="terminal"] .st-terminal,
.site[data-active="prime"] .st-prime,
.site[data-active="helm"] .st-helm{color:var(--ink)}
.m-lines{min-height:66px;margin-top:-8px}
.m-lines .line{margin:0;font-size:15px;line-height:1.45;color:var(--ink-2)}
.m-form{display:flex;flex-direction:column;gap:10px;margin:0}
.m-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.m-form .field{font-size:16px;height:44px}
.m-form .cta{width:100%;height:48px;font-size:16px}
.m-done{min-height:156px;justify-content:center}
.m-done .done-title{font-size:22px}
.m-done p{font-size:14px;line-height:1.5}
.m-note{margin:-2px 0 0;font-size:12px;line-height:1.4;color:var(--ink-3);text-align:center}
.m-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:-6px}
.m-yt{display:inline-flex;align-items:center;gap:8px;height:44px;color:var(--ink);text-decoration:none;font-size:14px;font-weight:500}
.m-copy{font-size:9px;color:var(--ink-3);text-align:right}

/* short phones (iPhone SE and similar) */
@media (max-width:820px) and (max-height:700px){
  .m-head{height:54px}
  .m-h1{font-size:32px;padding-top:2px}
  .m-chartwrap{min-height:96px}
  .m-sheet{gap:12px;padding-top:14px}
}

/* ---------- fallbacks ---------- */
@supports not (offset-path:path('M0 0')){
  .vessel,.arrive-ring{display:none}
}
@media (prefers-reduced-motion:reduce){
  .site *,.site *::before,.site *::after{animation:none !important}
  .vessel{display:none}
  .word,.pane,.line{transition:none}
}