/* AeroInvoice homepage v4: z-axis cascade hero, sticky stack, asymmetric bento, hold-to-pay */

/* ---------- hero ---------- */
.hero{position:relative;min-height:100dvh;display:flex;flex-direction:column;padding-top:clamp(120px,16vh,170px)}
.hero-in{flex:1;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{font-size:clamp(2.8rem,6.6vw,6rem);max-width:12ch;letter-spacing:-.05em;line-height:.98}
.hero-k{margin-bottom:30px}
.hero-lede{max-width:46ch}
.hero-note{margin-top:22px;font-size:.88rem;color:var(--text-faint)}
.hero-note a{color:var(--text-secondary);text-decoration-color:rgba(255,255,255,.25);text-underline-offset:3px;transition:color .4s var(--spring)}
.hero-note a:hover{color:var(--warm)}
html.js .hero-copy>*{animation:heroin .3s var(--ease-out) both}

/* the cascade: physical plates at different depths */
.hero-stage{position:relative;height:min(600px,62dvh);min-height:440px;pointer-events:none}
.hs-layer{position:absolute;translate:var(--tx,0) var(--ty,0);transition:opacity 1.4s var(--spring),transform 1.6s var(--spring),translate 1.2s var(--spring)}
html.js .hero-stage:not(.in) .hs-layer{opacity:0;transform:translateY(90px) scale(.92)}
.hero-stage.settled .hs-layer{transition-delay:0s}
.hs-back{right:-2%;top:2%;width:84%;transition-delay:.25s}
.hs-mid{left:0;top:24%;width:40%;transition-delay:.4s}
.hs-front{right:6%;bottom:4%;width:min(320px,58%);transition-delay:.58s}
.hs-chip{left:-2%;top:8%;transition-delay:.75s}
.hs-back .bezel{rotate:3deg}
.hs-mid .bezel{rotate:-5deg}
.hs-front .bezel{rotate:-1.5deg}
.hs-layer img{width:100%;border-radius:calc(var(--r-core) - 2px)}
.hs-layer .bezel-core{padding:0;background:#f4f2ec}
.hs-float{animation:floaty 9s var(--ease-float) infinite alternate}
.hs-mid .hs-float{animation-duration:11s;animation-delay:-3s}
.hs-front .hs-float{animation-duration:7.5s;animation-delay:-5s}
.hs-chip .hs-float{animation-duration:6.5s;animation-delay:-2s}
@keyframes floaty{from{transform:translate3d(0,-10px,0)}to{transform:translate3d(0,12px,0)}}

.toast{padding:22px 22px 20px!important;background:linear-gradient(180deg,#18223e,#10182e)!important;color:var(--text-primary)}
.toast-top{display:flex;justify-content:space-between;align-items:center;font-size:.76rem;color:var(--text-faint);letter-spacing:.08em}
.toast-state{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;border-radius:999px;color:var(--text-secondary);box-shadow:inset 0 0 0 1px var(--line-strong);transition:color .5s var(--spring),box-shadow .5s var(--spring),background .5s var(--spring)}
.toast.paid .toast-state{color:#1a1206;background:var(--amber);box-shadow:none}
.toast-job{margin-top:14px;font-weight:600;font-size:.95rem}
.toast-amt{font-size:2rem;font-weight:600;letter-spacing:-.03em;margin-top:2px}
.toast-bar{height:4px;border-radius:9px;background:rgba(255,255,255,.07);overflow:hidden;margin-top:16px}
.toast-bar i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,.08));background:linear-gradient(90deg,var(--accent),var(--warm));transition:transform 1.1s var(--spring)}
.toast-steps{display:flex;justify-content:space-between;list-style:none;padding:0;margin:10px 0 0;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}
.toast-steps li{transition:color .5s var(--spring)}
.toast-steps li.on{color:var(--text-primary)}
.toast.paid{box-shadow:inset 0 1px 1px rgba(255,255,255,.08),inset 0 0 0 1px rgba(240,179,94,.45)!important}
.chip-pay{display:inline-flex;align-items:center;gap:10px;padding:12px 18px 12px 12px;border-radius:999px;background:rgba(18,26,48,.9);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),var(--hl),0 24px 50px -24px rgba(3,6,16,.9);font-size:.86rem;font-weight:500;white-space:nowrap}
.chip-pay svg{width:30px;height:30px;padding:7px;border-radius:50%;background:var(--accent-muted);color:var(--warm)}

.hero-marquee{padding:clamp(40px,6vh,72px) 0 28px}
html.js .hero-marquee{animation:herorise 1.4s var(--spring) .9s both}

@media(max-width:960px){
  .hero-in{grid-template-columns:minmax(0,1fr);gap:56px}
  .hero-stage{height:auto;min-height:0;display:grid;gap:20px;max-width:560px;width:100%;margin-inline:auto}
  .hs-layer{position:relative;inset:auto;width:100%}
  .hs-mid,.hs-chip{display:none}
  .hs-front{width:min(340px,86%);margin:-90px 0 0 auto}
}
@media(max-width:767px){
  .hero{padding-top:118px}
  .hs-back .bezel,.hs-mid .bezel,.hs-front .bezel{rotate:none}
  .hs-front{margin:0;width:100%}
  .hs-float{animation:none}
  .hero h1{font-size:clamp(2.6rem,12vw,3.6rem)}
}

/* ---------- the line: sticky stacking cards ---------- */
.stackline{display:grid;gap:32px;margin-top:72px}
.stack-card{position:sticky;top:calc(104px + var(--n) * 24px)}
.stack-card .bezel{transform-origin:50% 0;will-change:transform}
.stack-card .bezel::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;background:#050916;opacity:var(--dim,0);pointer-events:none}
.stack-core{display:grid;grid-template-columns:1fr 1.15fr;min-height:min(540px,68dvh)}
.stack-copy{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:center}
.stack-k{font-family:var(--font-display);font-stretch:125%;font-weight:800;letter-spacing:-.05em;line-height:.95;font-size:clamp(3rem,6.4vw,5.6rem);color:var(--text-primary)}
.stack-card:last-child .stack-k{color:var(--amber)}
.stack-copy h3{font-size:clamp(1.3rem,2vw,1.7rem);margin-top:22px}
.stack-copy .muted{margin-top:12px;max-width:40ch}
.stack-copy .link-arrow{margin-top:28px}
.stack-img{position:relative;overflow:hidden;background:radial-gradient(ellipse 80% 70% at 70% 30%,rgba(110,132,240,.12),transparent 70%),rgba(255,255,255,.02);border-left:1px solid var(--line)}
.stack-img img{position:absolute;left:10%;top:12%;width:110%;max-width:none;border-radius:16px;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 40px 80px -30px rgba(3,6,16,.9);transition:transform 1.4s var(--spring)}
.stack-img.tall img{left:16%;width:70%}
.stack-card:hover .stack-img img{transform:translate(-10px,-8px)}
@media(max-width:860px){
  .stack-core{grid-template-columns:1fr}
  .stack-img{min-height:320px;border-left:0;border-top:1px solid var(--line)}
  .stack-img.tall img{left:12%;width:76%}
}
@media(max-width:767px){
  .stack-card{position:relative;top:auto}
  .stack-card .bezel{transform:none!important}
  .stack-card .bezel::after{opacity:0!important}
}

/* ---------- asymmetric bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:64px}
.cell{display:block}
.cell-core{padding:32px;display:flex;flex-direction:column}
.cell-core h3{font-size:1.32rem;margin-top:20px}
.cell-copy h3{margin-top:0}
.cell-core p{color:var(--text-secondary);margin-top:10px;font-size:.96rem;max-width:46ch}
.cell-core .ticks{margin-top:18px;font-size:.92rem}
.cell-core .link-arrow{margin-top:auto;padding-top:22px}
.c-portal{grid-column:span 7;grid-row:span 2}
.c-draws,.c-off,.c-time{grid-column:span 5}
.c-fin{grid-column:span 7}
.cell-shot{margin:28px -32px -32px 32px;flex:1;position:relative;min-height:220px}
.cell-shot img{position:absolute;inset:0 auto auto 0;width:118%;max-width:none;border-radius:16px 0 0 0;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 -20px 60px -30px rgba(3,6,16,.8);transition:transform 1.4s var(--spring)}
.cell:hover .cell-shot img{transform:translate(-14px,-10px)}
.c-fin .cell-shot{min-height:200px}
.cell-big{font-size:clamp(3.4rem,6vw,5rem);font-weight:600;letter-spacing:-.05em;line-height:1;margin-top:auto!important;padding-top:24px;color:var(--text-primary)!important}
.cell-cap{font-size:.86rem!important;color:var(--text-faint)!important;margin-top:4px!important}
.signal{display:flex;align-items:flex-end;gap:6px;height:40px;margin-top:22px}
.signal i{width:10px;border-radius:3px;background:var(--warm);transform-origin:50% 100%;animation:sig 4.8s var(--ease-io) infinite}
.signal i:nth-child(1){height:25%}.signal i:nth-child(2){height:50%;animation-delay:.12s}.signal i:nth-child(3){height:75%;animation-delay:.24s}.signal i:nth-child(4){height:100%;animation-delay:.36s}
@keyframes sig{0%,18%{transform:scaleY(1);opacity:1}38%,58%{transform:scaleY(.16);opacity:.28}78%,100%{transform:scaleY(1);opacity:1}}
@media(max-width:1000px){
  .c-portal,.c-fin{grid-column:span 12;grid-row:auto}
  .c-draws,.c-off{grid-column:span 6}
  .c-time{grid-column:span 12}
}
@media(max-width:767px){
  .bento{grid-template-columns:1fr;gap:24px}
  .bento>*{grid-column:auto!important}
  .cell-core{padding:26px}
  .cell-shot{margin:24px -26px -26px 26px}
}

/* ---------- hold to pay ---------- */
.hold-demo{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,7vw,96px);align-items:center}
@media(max-width:900px){.hold-demo{grid-template-columns:1fr;gap:44px}}
.hold-copy h2{font-size:clamp(2.4rem,5vw,4.2rem)}
.hold-btn{margin-top:36px;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none;min-width:240px;isolation:isolate}
.hold-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.34);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.hold-btn.done{background:var(--panel-2);color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--accent-line)}
.hold-btn.done::before{transform:scaleX(0)}
.hold-hint{margin-top:16px;font-size:.84rem;color:var(--text-faint)}
.inv-shell{transition:transform 1s var(--spring)}
.inv{padding:clamp(26px,3.4vw,40px)!important;transition:box-shadow 1.2s var(--spring)}
.inv-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.inv-no{font-size:.78rem;color:var(--text-faint);letter-spacing:.12em}
.inv-client{font-weight:600;margin-top:4px}
.inv-amt{font-size:clamp(2.6rem,5.4vw,4rem);font-weight:600;letter-spacing:-.045em;margin:28px 0 6px}
.inv-bar{position:relative;height:12px;margin:34px 0 0;border-radius:99px;background:rgba(238,241,248,.07);box-shadow:inset 0 1px 2px rgba(3,6,16,.6),inset 0 0 0 1px rgba(147,163,255,.1)}
.inv-bar i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#3d52c8,var(--accent) 60%,#7d91f5);transform-origin:0 50%;transform:scaleX(var(--fill,0));transition:transform .45s var(--spring)}
.inv-bar.holding i{transition:none}
.inv-bar b{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#18223e;box-shadow:inset 0 0 0 2px rgba(147,163,255,.25);transition:background .4s var(--spring),box-shadow .4s var(--spring),transform .6s var(--spring)}
.inv-bar b:last-of-type{margin-left:-14px}
.inv-bar b.on{background:var(--accent);box-shadow:0 0 0 4px rgba(76,99,224,.18);transform:scale(1.1)}
.inv-pct{position:absolute;right:0;top:-26px;font-size:.72rem;letter-spacing:.08em;color:var(--text-faint);transition:color .4s}

.inv.paid .inv-bar i{background:linear-gradient(90deg,#c98a35,var(--amber));transition:transform .9s cubic-bezier(.3,1.35,.5,1)}
.inv.paid .inv-bar b{background:var(--amber);box-shadow:0 0 0 4px rgba(240,179,94,.18)}
.inv.paid .inv-pct{color:var(--amber)}
.inv-steps{display:flex;justify-content:space-between;list-style:none;padding:0;margin:16px 0 0;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.inv-steps li{transition:color .5s var(--spring),transform .7s var(--spring)}
.inv-steps li.on{color:var(--text-primary);transform:translateY(-2px)}
.inv-steps li:last-child.on{color:var(--amber)}
.inv-done{min-height:1.6em;margin-top:22px;font-weight:600;color:var(--amber);opacity:0;transform:translateY(10px);transition:opacity .8s var(--spring),transform .8s var(--spring)}
.inv.paid .inv-done{opacity:1;transform:none}
.inv.paid{box-shadow:inset 0 1px 1px rgba(255,255,255,.09),inset 0 0 0 1px rgba(240,179,94,.5)!important}
.inv.paid #inv-pill{color:#1a1206;background:var(--amber);box-shadow:none}
.payday.paid .inv-shell{transform:translateY(-6px)}

/* ---------- trades bento ---------- */
.tbento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(200px,20vw,260px);gap:24px;margin-top:64px}
.tb{display:block;text-decoration:none;color:inherit;grid-column:span 3}
.tb-0{grid-column:span 6;grid-row:span 2}
.tb-core{height:100%}
.tb-core img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.72) brightness(.8);transition:transform 1.6s var(--spring),filter 1s var(--spring)}
.tb:hover .tb-core img{transform:scale(1.07);filter:saturate(.95) brightness(.95)}
.tb-core::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 40%,rgba(7,11,24,.92))}
.tb-l{position:absolute;left:18px;right:18px;bottom:18px;z-index:2;display:flex;gap:12px;align-items:center;font-weight:620;font-size:1.04rem}
.tb-0 .tb-l{font-size:1.5rem;letter-spacing:-.02em;left:26px;bottom:26px;right:26px}
.tb-go{margin-left:auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);transform:translateX(-6px);opacity:0;transition:transform .8s var(--spring),opacity .6s var(--spring)}
.tb-go svg{width:16px;height:16px}
.tb:hover .tb-go{transform:none;opacity:1}
@media(max-width:900px){.tbento{grid-template-columns:repeat(2,1fr);grid-auto-rows:220px}.tb{grid-column:span 1}.tb-0{grid-column:span 2;grid-row:span 1}}
@media(max-width:767px){.tbento{grid-template-columns:1fr;grid-auto-rows:210px}.tb,.tb-0{grid-column:auto}.tb-go{opacity:1;transform:none}}

/* ---------- pricing duo ---------- */
.duo{display:grid;grid-template-columns:1fr 1.08fr;gap:32px;max-width:940px;margin:64px auto 0;align-items:stretch}
.plan-k{color:var(--text-faint);font-size:.76rem;letter-spacing:.16em}
.duo .plan.hot .plan-k{color:var(--warm)}
@media(min-width:768px){.duo .plan.hot{transform:translateY(-12px)}}
@media(max-width:767px){.duo{grid-template-columns:1fr;max-width:540px}}

@media print{html.js .hero-stage:not(.in) .hs-layer{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .stack-card .bezel{transform:none!important}
  .stack-card .bezel::after{opacity:0!important}
  html.js .hero-stage:not(.in) .hs-layer{opacity:1;transform:none}
}

/* ---------- v5 hero: live WebGL night scene behind asymmetric copy ---------- */
.hero{isolation:isolate;overflow:clip}
.hero::before{content:"";position:absolute;inset:0;z-index:-3;background:radial-gradient(ellipse 60% 70% at 72% 55%,rgba(76,99,224,.22),transparent 65%),radial-gradient(ellipse 30% 30% at 70% 60%,rgba(240,179,94,.10),transparent 70%),linear-gradient(180deg,#0a1020,#0d1428)}
#scene{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block;opacity:0;transition:opacity 1.8s var(--ease-out)}
.hero.has-scene #scene{opacity:1}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(10,16,32,.92) 0%,rgba(10,16,32,.7) 32%,rgba(10,16,32,0) 58%),linear-gradient(180deg,rgba(10,16,32,0) 70%,rgba(10,16,32,.95) 100%)}
.hero-in{grid-template-columns:minmax(0,1fr)}
.hero-copy{max-width:640px}
.hero h1{max-width:13ch}
@media(max-width:960px){
  .hero::after{background:linear-gradient(180deg,rgba(10,16,32,.94) 0%,rgba(10,16,32,.82) 48%,rgba(10,16,32,.15) 72%,rgba(10,16,32,.95) 100%)}
  .hero{min-height:auto}
  .hero-in{padding-bottom:min(70vw,420px)}
}