:root { color-scheme:dark; --sky:#080b18; --surface:#17182b; --line:rgba(201,205,255,.17); --text:#f8f8ff; --muted:#b6bad5; --violet:#b0a5ff; --mint:#97edd0; font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--sky); color:var(--text); min-width:280px; } button,a { -webkit-tap-highlight-color:transparent; } a { color:inherit; } a:focus-visible,button:focus-visible { outline:2px solid var(--mint); outline-offset:4px; } button { font:inherit; cursor:pointer; } .journey-shell { width:min(1120px,calc(100% - 44px)); margin-inline:auto; }
.journey-skip { position:absolute; z-index:20; left:12px; top:-100px; background:#fff; color:#10101d; padding:12px; } .journey-skip:focus { top:12px; }
.journey-nav { position:relative; z-index:5; width:min(1180px,calc(100% - 44px)); margin:auto; min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); }
.journey-brand { display:inline-flex; align-items:center; gap:9px; font-size:20px; font-weight:760; text-decoration:none; letter-spacing:-.045em; white-space:nowrap; } .journey-brand b { color:var(--violet); } .journey-brand-orb { width:22px; height:22px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#f0e9ff 0,#a99eff 19%,#4d3eae 52%,#1d1846 78%); box-shadow:0 0 18px #8e80ff88; }
.journey-nav nav { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; } .journey-nav nav a { flex:none; border-radius:9px; color:var(--muted); text-decoration:none; font-size:11px; padding:7px; } .journey-nav nav a[aria-current=page] { color:var(--text); background:#8880ca33; } .journey-nav-cta { color:var(--text); font-size:12px; text-decoration:none; border:1px solid var(--line); border-radius:999px; padding:10px 14px; white-space:nowrap; transition:background .2s,transform .2s; } .journey-nav-cta:hover { background:#ffffff16; transform:translateY(-2px); }
.journey-hero { position:relative; overflow:hidden; min-height:min(770px,100svh); display:flex; align-items:center; isolation:isolate; } .journey-hero:before { content:""; position:absolute; inset:-20% -10%; z-index:-2; background:radial-gradient(ellipse at 75% 45%,#665fc53a,transparent 35%),radial-gradient(ellipse at 38% 20%,#4b59892b,transparent 38%); }
.journey-stars { position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5; background-image:radial-gradient(1px 1px at 12% 18%,#fff 95%,transparent),radial-gradient(1px 1px at 73% 23%,#d9ddff 95%,transparent),radial-gradient(2px 2px at 89% 62%,#fff 95%,transparent),radial-gradient(1px 1px at 33% 77%,#fff 95%,transparent),radial-gradient(1px 1px at 63% 83%,#d9ddff 95%,transparent); background-size:270px 290px; }
.journey-hero-grid { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); align-items:center; gap:clamp(24px,6vw,90px); padding-block:96px 115px; } .journey-eyebrow { color:var(--mint); letter-spacing:.19em; text-transform:uppercase; font-size:11px; font-weight:750; } h1,h2,h3,p { margin-top:0; } h1 { max-width:760px; font-size:clamp(40px,5.3vw,76px); letter-spacing:-.075em; line-height:1.04; margin-bottom:24px; text-wrap:balance; } .journey-lead { max-width:550px; color:var(--muted); font-size:clamp(16px,1.55vw,19px); line-height:1.7; } .journey-hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-top:32px; } .journey-button { display:inline-flex; align-items:center; justify-content:center; gap:24px; min-height:52px; padding:13px 20px; border-radius:15px; background:linear-gradient(115deg,#d6ccff,#93e3d2); color:#17142e; font-weight:800; text-decoration:none; box-shadow:0 12px 40px #9089ef2b; transition:transform .24s,box-shadow .24s; } .journey-button:hover { transform:translateY(-3px); box-shadow:0 18px 50px #9089ef45; } .journey-text-link { color:var(--muted); text-decoration:none; font-size:13px; } .journey-text-link:hover { color:var(--text); }
.journey-visual { position:relative; min-height:480px; display:grid; place-items:center; perspective:1100px; } .journey-orbit { position:absolute; width:min(100%,560px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 38% 28%,#ede8ff 0,#a394ed 13%,#54479f 36%,#1f2053 60%,transparent 68%); filter:drop-shadow(0 0 55px #756bdd55); opacity:.48; transform:translateY(var(--journey-lift,0px)); } .journey-orbit:before,.journey-orbit:after { content:""; position:absolute; inset:29%; border:1px solid #eee8ff66; border-radius:50%; transform:rotateX(70deg) rotate(-30deg) scale(2.6); } .journey-orbit:after { inset:16%; opacity:.5; transform:rotateX(66deg) rotate(30deg) scale(1.55); } .journey-orbit i { position:absolute; left:16%; top:28%; width:4px; height:4px; background:#fff; border-radius:50%; box-shadow:0 0 13px 3px #d2cbff; } .journey-orbit i+ i { left:83%; top:59%; }
.journey-demo { position:relative; z-index:1; width:min(100%,425px); border:1px solid #c2beff56; border-radius:28px; padding:clamp(16px,3vw,25px); background:linear-gradient(145deg,#22233ae8,#0e1228eb); box-shadow:0 25px 80px #03040b88,inset 0 1px #fff2; backdrop-filter:blur(15px); transform:rotateY(var(--journey-turn,0deg)) translateY(var(--journey-lift,0px)); transition:box-shadow .3s, border-color .3s; } .journey-demo:hover { box-shadow:0 30px 90px #03040bcc,0 0 45px #a295ff22; border-color:#c2beff99; }
.journey-demo-head,.journey-demo-result,.journey-document,.journey-invoice { display:flex; justify-content:space-between; align-items:center; gap:12px; } .journey-demo-head { color:var(--muted); font-size:12px; padding-bottom:16px; border-bottom:1px solid var(--line); } .journey-demo-head strong { color:var(--text); font-size:16px; } .journey-people { display:grid; gap:10px; padding-block:20px; } .journey-people>div { display:flex; align-items:center; gap:10px; font-size:14px; } .journey-people b { margin-inline-start:auto; } .journey-avatar { width:29px; height:29px; display:grid; place-items:center; border-radius:50%; background:#9b91ee55; color:#fff; font-weight:800; } .journey-demo-result { border-radius:14px; background:#9b91ee1c; border:1px solid #9b91ee39; padding:14px; font-size:13px; } .journey-demo-result strong { font-size:22px; font-variant-numeric:tabular-nums; } .journey-dispute { margin-top:14px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; border:1px solid #f7bf684c; background:#f7bf6811; border-radius:13px; padding:12px; font-size:12px; } .journey-dispute button,.journey-demo-action { color:var(--mint); background:#91efdb16; border:1px solid #91efdb55; border-radius:10px; padding:9px 11px; font-weight:700; transition:transform .2s,background .2s; } .journey-dispute button:hover,.journey-demo-action:hover { background:#91efdb29; transform:translateY(-2px); } .journey-demo-foot { margin:16px 0 0; color:var(--muted); font-size:11px; } .journey-document,.journey-invoice { min-height:58px; border-bottom:1px solid var(--line); font-size:13px; } .journey-invoice strong { font-size:25px; } .journey-document-icon { width:27px; height:32px; border:1px solid #ada3ff; border-radius:4px; background:linear-gradient(#b8adff44,#b8adff0a); } .journey-document-icon+span { margin-inline-end:auto; } .journey-demo-action { width:100%; margin-top:14px; min-height:46px; } .journey-status-dot { width:9px; height:9px; background:#e9bd77; border-radius:50%; box-shadow:0 0 14px #e9bd77; } .journey-demo-active .journey-status-dot { background:var(--mint); box-shadow:0 0 14px var(--mint); }
.journey-steps { padding-block:clamp(92px,12vw,170px); } .journey-steps h2,.journey-final h2 { max-width:710px; font-size:clamp(32px,4.4vw,58px); line-height:1.08; letter-spacing:-.065em; text-wrap:balance; } .journey-step-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; margin-top:55px; } .journey-step { min-height:220px; padding:27px; border-radius:22px; border:1px solid var(--line); background:radial-gradient(circle at 86% 12%,#8779d31e,transparent 38%),#15182a; box-shadow:inset 0 1px #fff1; } .journey-step span { color:var(--mint); font-size:12px; font-weight:800; letter-spacing:.1em; } .journey-step p { margin:48px 0 0; font-size:clamp(15px,1.5vw,18px); line-height:1.55; } .journey-final { display:flex; align-items:end; justify-content:space-between; gap:26px; margin-block:25px 125px; padding:clamp(26px,5vw,56px); border:1px solid #aaa5f85e; border-radius:32px; background:radial-gradient(ellipse at 85% 30%,#8580dd40,transparent 48%),#17192c; } .journey-final h2 { margin-bottom:15px; } .journey-final p:last-child { color:var(--muted); line-height:1.65; max-width:600px; } .journey-final .journey-button { flex:none; } .journey-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding-block:30px 45px; font-size:12px; } .journey-footer nav,.journey-footer div { display:flex; flex-wrap:wrap; gap:15px; } .journey-footer a { color:var(--muted); text-decoration:none; } .journey-footer a:hover { color:var(--text); }
html.journey-motion [data-reveal] { opacity:0; transform:translateY(24px) rotateX(4deg); transition:opacity .65s ease,transform .75s cubic-bezier(.2,.8,.2,1); } html.journey-motion [data-reveal].is-visible { opacity:1; transform:none; } html.journey-motion .journey-step:nth-child(2) { transition-delay:.08s; } html.journey-motion .journey-step:nth-child(3) { transition-delay:.16s; }
@media(max-width:760px) { .journey-nav { flex-wrap:wrap; padding-block:14px; gap:8px; } .journey-nav nav { order:3; width:100%; } .journey-hero { min-height:0; } .journey-hero-grid { grid-template-columns:1fr; padding-block:72px 95px; gap:18px; } .journey-visual { min-height:390px; } .journey-orbit { width:min(100%,450px); } .journey-step-grid { grid-template-columns:1fr; margin-top:35px; } .journey-step { min-height:160px; } .journey-step p { margin-top:25px; } .journey-final { flex-direction:column; align-items:start; } }
@media(max-width:380px) { .journey-shell,.journey-nav { width:calc(100% - 28px); } .journey-brand { font-size:17px; } .journey-nav-cta { font-size:11px; padding:9px 10px; } .journey-hero-grid { padding-top:54px; } h1 { font-size:clamp(35px,11vw,43px); } .journey-visual { min-height:340px; } .journey-demo { padding:14px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { transition-duration:.01ms!important; animation-duration:.01ms!important; } html.journey-motion [data-reveal] { opacity:1; transform:none; } .journey-demo,.journey-orbit { transform:none; } }