.invoice-hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:6rem 2rem 4rem;overflow:hidden}@media (max-width:1024px){.invoice-hero{min-height:auto;padding:5rem 1.5rem 4rem;justify-content:flex-start}}.invoice-hero-content{position:relative;z-index:10;max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;padding-right:2rem}@media (max-width:1024px){.invoice-hero-content{grid-template-columns:1fr;text-align:center;gap:2.5rem;padding-right:0}}.invoice-hero-text{opacity:0;transform:translateY(30px);transition:all .8s cubic-bezier(.16,1,.3,1)}.invoice-hero-text.invoice-hero-visible{opacity:1;transform:translateY(0)}.invoice-hero-title{font-size:clamp(2.5rem,5vw,3.5rem);font-weight:800;color:white;line-height:1.1;margin-bottom:1.5rem}.invoice-hero-highlight{background:linear-gradient(135deg,#60a5fa,#93c5fd);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.invoice-hero-description{font-size:1.15rem;color:#cbd5e1;line-height:1.7;margin-bottom:2rem;max-width:500px}@media (max-width:1024px){.invoice-hero-description{max-width:100%;margin-left:auto;margin-right:auto}}.invoice-hero-cta{display:flex;gap:1rem;flex-wrap:wrap}@media (max-width:1024px){.invoice-hero-cta{justify-content:center}}@media (max-width:620px){.invoice-hero-cta{flex-direction:column;align-items:center}.invoice-hero-cta a{width:260px;justify-content:center;text-align:center}}.invoice-hero-visual{opacity:0;transform:translateY(30px);transition:all .8s cubic-bezier(.16,1,.3,1) .2s}.invoice-hero-visual.invoice-hero-visible{opacity:1;transform:translateY(0)}@media (max-width:1024px){.invoice-hero-visual{width:100%;max-width:550px;margin:0 auto}}@media (max-width:480px){.invoice-hero-visual{max-width:90%}}.inv-app-mockup,.invoice-hero-visual{position:relative}.inv-app-mockup{perspective:1000px}.inv-app-window{background:#1e293b;border-radius:1rem;overflow:hidden;box-shadow:0 25px 50px -12px rgba(0,0,0,.5);transform:rotateY(-5deg) rotateX(5deg);transition:transform .5s ease}.inv-app-window:hover{transform:rotateY(0) rotateX(0)}@media (max-width:1024px){.inv-app-window,.inv-app-window:hover{transform:none}}.inv-app-titlebar{display:flex;gap:.5rem;padding:.65rem 1rem;background:#0f172a;align-items:center}.inv-app-dots{display:flex;gap:6px}.inv-app-dots span{width:12px;height:12px;border-radius:50%;background:#334155}.inv-app-dots span:first-child{background:#ef4444}.inv-app-dots span:nth-child(2){background:#eab308}.inv-app-dots span:nth-child(3){background:#22c55e}.inv-app-title{display:flex;align-items:center;gap:.5rem;margin-left:.75rem;color:#cbd5e1;font-size:.875rem;font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;letter-spacing:.01em}.inv-app-logo-icon{width:22px;height:22px;background:linear-gradient(135deg,#3b82f6,#60a5fa);border-radius:.3rem;display:flex;align-items:center;justify-content:center}.inv-app-body{display:flex;min-height:300px}@media (max-width:1024px){.inv-app-body{min-height:200px}}@media (max-width:480px){.inv-app-body{min-height:150px}}.inv-app-sidebar{width:52px;background:#131b2e;border-right:1px solid rgba(255,255,255,.06);padding:.6rem 0;display:flex;flex-direction:column;gap:.25rem;flex-shrink:0}.inv-sidebar-item{display:flex;align-items:center;gap:.4rem;padding:.45rem .6rem;border-radius:.25rem;margin:0 .3rem;transition:background .2s}.inv-sidebar-item.active{background:rgba(59,130,246,.2)}.inv-sidebar-icon{width:14px;height:14px;background:rgba(255,255,255,.1);border-radius:3px;flex-shrink:0}.inv-sidebar-item.active .inv-sidebar-icon{background:rgba(59,130,246,.5)}.inv-sidebar-label{width:20px;height:5px;background:rgba(255,255,255,.06);border-radius:3px}.inv-sidebar-item.active .inv-sidebar-label{background:rgba(59,130,246,.25)}.inv-app-content{flex:1;position:relative;overflow:hidden}.inv-scroll-wrapper{overflow:hidden;height:300px}@media (max-width:1024px){.inv-scroll-wrapper{height:200px}}@media (max-width:480px){.inv-scroll-wrapper{height:150px}}.inv-scroll-content{padding:.75rem;display:flex;flex-direction:column;gap:.75rem;animation:inv-mockup-scroll 10s ease-in-out infinite}@keyframes inv-mockup-scroll{0%,12%{transform:translateY(0)}35%,50%{transform:translateY(-40%)}70%,82%{transform:translateY(-65%)}95%,to{transform:translateY(0)}}.inv-app-scrollbar{position:absolute;top:0;right:0;width:5px;height:100%;background:rgba(255,255,255,.04)}.inv-app-scrollbar-thumb{width:100%;height:25%;background:rgba(255,255,255,.12);border-radius:3px;animation:inv-scrollbar-move 10s ease-in-out infinite}@keyframes inv-scrollbar-move{0%,12%{transform:translateY(0)}35%,50%{transform:translateY(150%)}70%,82%{transform:translateY(280%)}95%,to{transform:translateY(0)}}.inv-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.inv-stat-card{background:rgba(255,255,255,.04);border-radius:.35rem;padding:.5rem;border:1px solid rgba(255,255,255,.06)}.inv-stat-value{width:40%;height:10px;border-radius:4px;margin-bottom:.3rem}.inv-stat-value.blue{background:rgba(59,130,246,.4)}.inv-stat-value.green{background:rgba(34,197,94,.4)}.inv-stat-value.amber{background:rgba(245,158,11,.4)}.inv-stat-label{width:65%;height:5px;background:rgba(255,255,255,.07);border-radius:3px}.inv-chart-area{background:rgba(255,255,255,.03);border-radius:.35rem;padding:.6rem;border:1px solid rgba(255,255,255,.06)}.inv-chart-title{width:30%;height:6px;background:rgba(255,255,255,.1);border-radius:3px;margin-bottom:.6rem}.inv-chart-bars{display:flex;align-items:flex-end;gap:.35rem;height:50px}.inv-chart-bar{flex:1;background:rgba(59,130,246,.2);border-radius:2px 2px 0 0;transition:height .3s}.inv-chart-bar.highlight{background:rgba(59,130,246,.5)}.inv-table{background:rgba(255,255,255,.03);border-radius:.35rem;overflow:hidden;border:1px solid rgba(255,255,255,.06)}.inv-table-header{display:grid;grid-template-columns:1.2fr 2fr 1.2fr 1fr;gap:.4rem;padding:.4rem .6rem;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.06)}.inv-table-header span{height:5px;background:rgba(255,255,255,.1);border-radius:3px}.inv-table-row{display:grid;grid-template-columns:1.2fr 2fr 1.2fr 1fr;gap:.4rem;padding:.35rem .6rem;border-bottom:1px solid rgba(255,255,255,.03);align-items:center}.inv-row-id{width:55%;background:rgba(255,255,255,.08)}.inv-row-id,.inv-row-name{height:5px;border-radius:3px}.inv-row-name{width:70%;background:rgba(255,255,255,.07)}.inv-row-amount{width:60%;height:5px;background:rgba(255,255,255,.08);border-radius:3px}.inv-row-badge{width:70%;height:8px;border-radius:4px}.inv-row-badge.paid{background:rgba(34,197,94,.25)}.inv-row-badge.open{background:rgba(245,158,11,.25)}.inv-form-preview{background:rgba(255,255,255,.03);border-radius:.35rem;padding:.75rem;border:1px solid rgba(255,255,255,.06)}.inv-form-title{width:35%;height:8px;background:rgba(255,255,255,.12);border-radius:4px;margin-bottom:.6rem}.inv-form-row{display:flex;gap:.5rem;margin-bottom:.5rem}.inv-form-field{flex:1;height:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:.2rem}.inv-form-field.wide{flex:1}.inv-form-btn{width:60px;height:14px;background:rgba(59,130,246,.35);border-radius:.2rem;margin-top:.3rem}@media (max-width:640px){.inv-app-sidebar{width:36px}.inv-sidebar-label{display:none}.inv-stats-row{grid-template-columns:repeat(2,1fr)}.inv-stats-row .inv-stat-card:last-child{display:none}.inv-table-header,.inv-table-row{grid-template-columns:1.5fr 2fr 1fr}.inv-row-badge,.inv-table-header span:last-child{display:none}}