/* Hero / one sale becomes one invoice. All motion is illustrative, never a live sales feed. */
.has-hero-next .navbar { width:1280px; padding-block:26px; gap:24px; }
.has-hero-next .navigation { gap:26px; }
.has-hero-next .navbar__actions .button { font-size:13px; height:40px; }
.has-hero-next .navbar__actions .button--outline { width:auto; padding-inline:16px; box-shadow:none; color:#aeb9cb; }
.has-hero-next .navbar__actions .button--primary { width:auto; padding-inline:18px; background:#171d28; color:#e7ecf6; border:1px solid #354052; font-weight:500; }
.hero-next { position:relative; isolation:isolate; padding:28px 0 38px; overflow:clip; }
.hero-next__light { position:absolute; z-index:-1; inset:-100px 0 -60px; pointer-events:none; background:radial-gradient(ellipse 46% 65% at 79% 42%,#39445c58,transparent 85%); mask-image:linear-gradient(180deg,transparent,#000 22%,#000 67%,transparent); }
.hero-next__layout { width:min(1280px,calc(100% - 96px)); margin:auto; display:grid; grid-template-columns:1fr 1.05fr; gap:16px; align-items:center; min-height:662px; }
.hero-next__copy { position:relative; z-index:2; padding:24px 0 48px; }
.hero-next__eyebrow { display:flex; gap:11px; align-items:center; margin:0 0 29px; color:#a4b0c4; font:400 12px/1.5 var(--font-label); letter-spacing:.11em; }
.hero-next__eyebrow>span { width:7px; height:7px; border-radius:50%; background:#808bff; box-shadow:0 0 14px #606bea75; }
.hero-next h1 { font:400 clamp(70px,6.7vw,100px)/.99 var(--font-body); letter-spacing:-.065em; margin:0; color:#f1f4fa; }
.hero-next h1>span { display:inline-block; padding-bottom:8px; color:#9caaff; background:linear-gradient(110deg,#d3dcff 0%,#8797ee 45%,#5a69ce 100%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.hero-next__description { margin:28px 0 28px; font-size:16px; line-height:1.75; color:#a2aec1; letter-spacing:-.01em; }
.hero-next__description strong { font-weight:400; color:#d5dce8; }
.hero-next__actions { display:flex; align-items:center; gap:25px; flex-wrap:wrap; }
.hero-next__cta { display:inline-flex; gap:22px; align-items:center; justify-content:center; min-height:54px; padding:0 21px; border-radius:8px; border:1px solid #8693ff99; font-size:14px; font-weight:500; transition:background .25s,box-shadow .25s,transform .25s; }
.hero-next__cta svg { width:19px; height:19px; transition:transform .25s; }
.hero-next__cta:hover svg { transform:translateX(3px); }
.hero-next__secondary { font-size:14px; display:inline-flex; align-items:center; gap:12px; }
.hero-next__assurance { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin:19px 0 0; font-size:12px; }
.hero-next__assurance>svg { width:15px; height:15px; color:#a6cabd; }
.hero-next__assurance>i { width:3px; height:3px; border-radius:50%; background:#465168; margin:0 2px; }
/* A document, not a dashboard: its sale data stays anchored through every state. */
.hero-demo { position:relative; width:100%; min-width:0; height:650px; margin:0; --doc-ink:#172136; --doc-muted:#626c7e; }
.hero-demo__legend { position:absolute; top:12px; right:30px; display:flex; align-items:center; gap:9px; color:#8290a9; font:400 10px/1.5 var(--font-label); letter-spacing:.12em; }
.hero-demo__live { width:5px; height:5px; background:#8ba799; border-radius:50%; }
.hero-demo__composition { position:absolute; width:630px; height:590px; left:50%; top:38px; transform:translateX(-50%); perspective:1400px; }
.hero-demo__orbit { position:absolute; width:560px; height:185px; bottom:1px; left:56px; border-radius:50%; background:radial-gradient(ellipse,#5b6e8c30,transparent 69%); transform:rotate(-12deg); filter:blur(13px); }
.hero-demo__echo { position:absolute; top:50px; left:190px; width:347px; height:450px; border:1px solid #98a8c319; border-radius:14px; transform:rotate(17deg) translate(28px,-7px); mask-image:linear-gradient(#000,transparent 80%); }
.hero-demo__echo--outer { transform:rotate(27deg) translate(39px,-10px); opacity:.48; }
.hero-demo__backplate { position:absolute; width:340px; height:458px; top:40px; left:158px; transform:rotate(-8deg); border-radius:14px; border:1px solid #93a1ec47; background:linear-gradient(115deg,#1a234b 0%,#414fac 29%,#202b6d 56%,#10172f 100%); box-shadow:inset 0 1px 0 #c1caff48,0 35px 55px #0009; }
.hero-demo__backplate>span { position:absolute; left:15px; top:38px; writing-mode:vertical-rl; transform:rotate(180deg); font:400 10px var(--font-label); letter-spacing:.2em; color:#b8c5ee; }
.hero-doc { position:absolute; left:210px; top:52px; width:340px; height:444px; padding:28px; border-radius:10px 32px 10px 10px; border:1px solid #f1f5ffb3; background:linear-gradient(120deg,#d6dce5 0%,#f2f3f7 25%,#bac5d6 68%,#d7dee9 100%); box-shadow:inset 0 0 0 1px #fafbff38,inset -4px 0 8px #74839d25,8px 22px 58px #0008; transform:rotateY(-12deg) rotateX(7deg) rotateZ(7deg); transform-origin:50% 65%; color:var(--doc-ink); overflow:hidden; transition:color 1.2s,border-color 1.2s,background 1.2s,transform 1.4s cubic-bezier(.22,1,.36,1); }
.hero-doc::after { content:""; position:absolute; inset:0; opacity:.14; pointer-events:none; background-image:url('assets/hero/grain.svg'); background-size:150px; mix-blend-mode:multiply; }
.hero-doc__shine { position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(113deg,transparent 32%,#ffffff52 47%,transparent 63%); transform:translateX(-120%); }
.hero-doc__header { display:flex; justify-content:space-between; align-items:center; padding-bottom:25px; border-bottom:1px solid #77849b3b; }
.hero-doc__brand { width:83px; height:auto; filter:brightness(0) saturate(100%); opacity:.86; transition:filter .8s; }
.hero-doc__serial { font:400 10px var(--font-label); color:var(--doc-muted); letter-spacing:.08em; }
.hero-doc__title { margin-top:23px; display:flex; flex-direction:column; align-items:flex-start; }
.hero-doc__overline { font:400 8px var(--font-label); letter-spacing:.13em; color:var(--doc-muted); }
.hero-doc__title>strong { font-size:34px; font-weight:500; line-height:1.25; letter-spacing:-.04em; margin:9px 0; }
.hero-doc__status { display:inline-flex; gap:5px; align-items:center; color:#375b51; font-size:10px; line-height:18px; }
.hero-doc__status svg { width:13px; height:13px; }
.hero-doc__details { display:grid; grid-template-columns:1fr 1fr; margin:27px 0 20px; gap:14px; }
.hero-doc__details>div { display:flex; flex-direction:column; gap:5px; }
.hero-doc__details span { font:400 8px var(--font-label); letter-spacing:.08em; color:var(--doc-muted); }
.hero-doc__details strong { font-size:11px; font-weight:400; }
.hero-doc__amount { border-top:1px solid #77849b3b; padding-top:17px; display:flex; flex-direction:column; gap:2px; }
.hero-doc__amount>span { color:var(--doc-muted); font-size:10px; }
.hero-doc__amount>strong { font-size:37px; font-weight:400; letter-spacing:-.05em; line-height:1.2; font-variant-numeric:tabular-nums; }
.hero-doc__footer { margin-top:22px; display:flex; justify-content:space-between; color:var(--doc-muted); font-size:8px; }
.hero-doc__footer>span:last-child { display:flex; align-items:center; gap:6px; }
.hero-doc__footer svg { width:12px; height:12px; }
.hero-doc__scan { position:absolute; inset:0 0 auto; height:2px; background:linear-gradient(90deg,transparent,#8597ff,#eff3ff,#8597ff,transparent); box-shadow:0 0 18px #6a82ffa3,0 -20px 32px #6a82ff24; transform:translateY(-20px); opacity:0; }
.hero-demo__sale { position:absolute; left:-65px; top:152px; width:274px; display:flex; align-items:center; gap:11px; padding:17px 16px; border:1px solid #6c7f9c69; border-radius:10px; background:linear-gradient(125deg,#263044e8,#111823f5); backdrop-filter:blur(12px); box-shadow:0 15px 36px #0008,inset 0 1px #b6c7e617; transform:rotate(-8deg); transition:transform 1.1s var(--ease-ui),opacity .7s,filter .7s; }
.hero-demo__sale-logo img { border-radius:8px; }
.hero-demo__sale>div { min-width:0; display:flex; flex-direction:column; gap:5px; }
.hero-demo__sale-title { font-size:12px; color:#e7edf8; }
.hero-demo__sale>div>span:last-child { display:flex; align-items:center; gap:6px; color:#95a7bf; font-size:10px; }
.hero-demo__sale b { font-weight:400; white-space:nowrap; }
.hero-demo__sale b[data-hero-platform-name] { max-width:95px; overflow:hidden; text-overflow:ellipsis; }
.hero-demo__sale i { font-style:normal; }
.hero-demo__sale-check { margin-left:auto; color:#a6cfbb; }
.hero-demo__sale-check svg { width:14px; height:14px; }
.hero-demo__seal { position:absolute; left:126px; top:333px; width:86px; height:86px; display:grid; place-items:center; border-radius:22px; border:1px solid #91a1e393; background:linear-gradient(140deg,#8b99ef 0%,#525fb8 30%,#343f80 68%,#6f7fce 100%); box-shadow:inset 0 1px 3px #fff6,inset 0 -3px 4px #121b54b3,0 15px 36px #0008; transform:rotate(-10deg); }
.hero-demo__seal>img { filter:brightness(0) invert(1); opacity:.92; }
.hero-demo__seal-ring { position:absolute; inset:-7px; border-radius:28px; border:1px solid #9cafe32d; }
.hero-demo__delivery { position:absolute; left:166px; top:455px; width:320px; border:1px solid #65758e73; background:linear-gradient(115deg,#2e3a4df0,#151f2deb); backdrop-filter:blur(16px); padding:17px 16px; border-radius:10px; box-shadow:0 16px 38px #0008,inset 0 1px #dce7ff17; display:flex; align-items:center; gap:11px; transform:rotate(-3deg); opacity:1; transition:opacity .65s,transform .8s var(--ease-ui),filter .65s; }
.hero-demo__delivery>span:nth-child(2) { display:flex; flex-direction:column; gap:3px; }
.hero-demo__delivery strong { font-size:12px; font-weight:400; color:#e6edf7; }
.hero-demo__delivery small { font-size:10px; color:#9cacbf; }
.hero-demo__delivery>svg { width:16px; height:16px; margin-left:auto; color:#acccbe; }
.hero-demo__delivery-icon { display:grid; place-items:center; width:32px; height:32px; border:1px solid #657c9691; border-radius:8px; color:#b9c8ed; }
.hero-demo__delivery-icon>svg { width:19px; height:19px; }
.hero-demo__caption { position:absolute; display:flex; align-items:center; gap:9px; bottom:8px; left:20px; right:8px; color:#bbc6d7; font-size:12px; }
.hero-demo__caption small { margin-left:auto; color:#6d7c93; font-size:10px; }
.hero-demo__caption-indicator { width:5px; height:5px; background:#8eb3a2; border-radius:50%; }
.hero-demo[data-phase="sale"] { --doc-ink:#e0e6f2; --doc-muted:#8c9ab1; }
.hero-demo[data-phase="sale"] .hero-doc { border-color:#65718a; transform:rotateY(-12deg) rotateX(7deg) rotateZ(3deg) translateY(5px); }
.hero-demo[data-phase="sale"] .hero-doc__brand { filter:brightness(0) invert(1); }
.hero-demo[data-phase="sale"] .hero-doc__status { color:#acccb8; }
.hero-demo[data-phase="sale"] .hero-doc__footer { opacity:.25; }
.hero-demo[data-phase="sale"] .hero-demo__sale { transform:rotate(-8deg) translate(-10px,0); }
.hero-demo[data-phase="sale"] .hero-demo__delivery,
.hero-demo[data-phase="issuing"] .hero-demo__delivery { opacity:0; transform:rotate(-3deg) translateY(20px); filter:blur(5px); }
.hero-demo[data-phase="issuing"] .hero-demo__sale { opacity:0; transform:translate(126px,54px) scale(.75) rotate(7deg); filter:blur(5px); }
.hero-demo[data-phase="issuing"] .hero-doc__scan { animation:hero-scan 1.9s cubic-bezier(.4,0,.2,1) both; }
.hero-demo[data-phase="issuing"] .hero-doc__shine { animation:hero-shine 2s ease both; }
.hero-demo[data-phase="sent"] .hero-demo__sale { opacity:.38; transform:translate(-16px,-12px) scale(.92) rotate(-8deg); filter:blur(1px); }
.hero-demo[data-phase="reset"] .hero-demo__composition { opacity:0; transition:opacity .5s; }
.hero-demo__composition { transition:opacity .7s; }
.hero-next__bottom { width:min(1280px,calc(100% - 96px)); margin:18px auto 0; padding:28px 0 12px; display:flex; justify-content:space-between; align-items:center; gap:30px; }
.hero-next__integrations { display:flex; gap:20px; align-items:center; }
.hero-next__platforms { display:flex; align-items:center; gap:6px; }
.hero-next__platforms img { border-radius:7px; }
.hero-next__platforms>span { width:34px; height:30px; border:1px solid #3c495e; border-radius:7px; display:grid; place-items:center; color:#b3c2d9; font-size:10px; }
.hero-next__integrations p { color:#8392a8; font-size:12px; line-height:1.7; margin:0; }
.hero-next__integrations strong { color:#bec9d9; font-weight:400; }
.hero-next__pricing { display:flex; flex-direction:column; gap:5px; }
.hero-next__pricing>span { color:#77889f; font:400 12px/1.5 var(--font-label); letter-spacing:.09em; }
.hero-next__pricing strong { display:flex; gap:5px; align-items:center; font-size:12px; color:#aab8cb; font-weight:400; }
.hero-next__pricing b { font-weight:500; font-size:17px; color:#e2e8f4; }
.hero-next__pricing svg { width:16px; height:16px; margin-left:13px; }
.hero-next__discover { display:flex; align-items:center; gap:18px; font-size:12px; color:#a6b3c8; }
.hero-next__scroll { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; border:1px solid #334054; font-size:19px; }
@keyframes hero-scan { 0% {transform:translateY(0);opacity:0} 10%,
85%{opacity:1} 100%{transform:translateY(444px);opacity:0} }
@keyframes hero-shine { to {transform:translateX(120%)} }
@media(min-width:1550px) { .hero-next__layout { min-height:720px; } .hero-demo__composition { transform:translateX(-50%) scale(1.07); } }
@media(max-width:1190px) and (min-width:901px) { .hero-next__layout,
.hero-next__bottom { width:calc(100% - 64px); } .hero-next h1 { font-size:76px; } .hero-demo__composition { transform:translateX(-50%) scale(.87); transform-origin:center; } .hero-next__actions { gap:18px; } .hero-next__secondary { font-size:13px; } .hero-demo__caption { flex-wrap:wrap; } .hero-demo__caption small { width:100%; margin-left:14px; } }
@media(max-width:900px) { .has-hero-next .navbar { padding-block:22px; } .has-hero-next .navigation { gap:17px; } .has-hero-next .navbar__actions .button--outline { display:none; } .hero-next { padding-top:32px; } .hero-next__layout { width:calc(100% - 48px); grid-template-columns:1fr; gap:0; min-height:0; } .hero-next__copy { padding:20px 0 0; } .hero-next h1 { font-size:clamp(72px,11vw,94px); } .hero-next__description { margin-top:25px; } .hero-demo { width:min(630px,100%); justify-self:center; height:610px; margin-top:32px; } .hero-demo__composition { top:26px; } .hero-demo__legend { top:0; right:30px; } .hero-next__bottom { width:calc(100% - 48px); flex-wrap:wrap; padding-top:26px; margin-top:20px; } .hero-next__discover { display:none; } }
@media(max-width:540px) { .has-hero-next .navbar { max-width:calc(100% - 40px); gap:20px; flex-wrap:nowrap; } .has-hero-next .navigation { display:none; } .has-hero-next .brand { gap:8px; } .has-hero-next .brand img:first-child { width:25px; } .has-hero-next .brand img:last-child { width:84px; } .has-hero-next .navbar__actions .button--primary { height:37px; font-size:12px; padding-inline:13px; } .hero-next { padding-top:23px; padding-bottom:20px; } .hero-next__layout,
.hero-next__bottom { width:calc(100% - 40px); } .hero-next__eyebrow { font-size:12px; letter-spacing:.08em; margin-bottom:24px; } .hero-next h1 { font-size:clamp(66px,16vw,86px); line-height:1; } .hero-next__description { font-size:14px; line-height:1.8; margin-block:23px 25px; } .hero-next__actions { gap:18px; flex-wrap:wrap; } .hero-next__cta { width:100%; min-height:53px; justify-content:space-between; font-size:14px; } .hero-next__secondary { font-size:13px; } .hero-next__assurance { margin-top:17px; font-size:12px; gap:7px; } .hero-demo { height:375px; margin-top:32px; } .hero-demo__composition { transform:translateX(-50%) scale(.56); transform-origin:50% 0; top:24px; margin-left:0; } .hero-demo__legend { left:0; right:auto; font-size:9px; } .hero-demo__caption { left:0; right:0; bottom:0; gap:7px; font-size:11px; flex-wrap:wrap; } .hero-demo__caption small { font-size:9px; width:100%; margin-left:12px; } .hero-next__bottom { gap:26px; margin-top:28px; } .hero-next__integrations { gap:14px; } .hero-next__pricing { border-top:1px solid #26314399; padding-top:18px; width:100%; } .hero-next__pricing>span { font-size:12px; } }

/* The transaction keeps the same fields; layout and material reveal the fiscal document. */
.hero-doc::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg,#263046,#192030 55%,#303b54); opacity:0; transition:opacity 1.25s; }
.hero-demo[data-phase="sale"] .hero-doc::before { opacity:1; }
.hero-doc__header,
.hero-doc__title,
.hero-doc__details,
.hero-doc__amount,
.hero-doc__footer { position:relative; z-index:2; }
.hero-doc__amount,
.hero-doc__details { transition:transform 1.35s cubic-bezier(.22,1,.36,1); }
.hero-demo[data-phase="sale"] .hero-doc__amount { transform:translateY(-87px); border-top-color:transparent; }
.hero-demo[data-phase="sale"] .hero-doc__details { transform:translateY(97px); }
.hero-doc__scan { z-index:4; }
.hero-doc__shine { z-index:3; }
.hero-next__eyebrow { animation:hero-arrive .8s .05s both; }
.hero-next h1 { animation:hero-arrive .95s .12s both; }
.hero-next__description { animation:hero-arrive .95s .24s both; }
.hero-next__actions,
.hero-next__assurance { animation:hero-arrive .95s .32s both; }
@keyframes hero-arrive { from { opacity:0; transform:translateY(16px); filter:blur(4px); } to { opacity:1; transform:translateY(0); filter:blur(0); } }

@media(min-width:541px) and (max-width:675px) { .hero-demo { height:535px; } .hero-demo__composition { transform:translateX(-50%) scale(.84); transform-origin:50% 0; } }
@media(max-width:350px) { .hero-demo { height:335px; } .hero-demo__composition { transform:translateX(-50%) scale(.48); } .hero-next__integrations { flex-wrap:wrap; } }

/* Fields leave the stage before crossing the amount; the final invoice settles first. */
.hero-doc__details { transition:transform 1.35s cubic-bezier(.22,1,.36,1),opacity .22s; }
.hero-demo[data-phase="issuing"] .hero-doc__details { opacity:0; }
.hero-demo__legend { font-size:12px; letter-spacing:.07em; }
.hero-demo__caption,
.hero-demo__caption small,
.hero-next__platforms>span { font-size:12px; }
@media(max-width:1190px) { .hero-demo__legend { right:0; } }
@media(max-width:540px) {
  .hero-demo { height:420px; }
  .hero-demo__legend { font-size:12px; }
  .hero-demo__sale { left:62px; top:530px; }
  .hero-demo[data-phase="sale"] .hero-demo__sale,
.hero-demo[data-phase="sent"] .hero-demo__sale { transform:none; }
  .hero-demo[data-phase="issuing"] .hero-demo__sale { transform:translateY(-55px) scale(.9); }
  .hero-demo__caption small { font-size:12px; }
}
@media(max-width:350px) { .hero-demo { height:375px; } }