@font-face{font-family:Europa;src:url('assets/Europa-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Europa;src:url('assets/Europa-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
:root{--purple:#281e63;--violet:#7854ff;--coral:#f05e4f;--cream:#faf6f6;--mint:#29c39a}
*{box-sizing:border-box}html,body{margin:0;background:transparent;font-family:Europa,Arial,sans-serif}.creative{width:970px;height:250px;position:relative;overflow:hidden;color:#fff;background:linear-gradient(112deg,#281e63 0%,#342376 50%,#201752 100%);border-radius:0;isolation:isolate;cursor:default}.creative:after{content:"";position:absolute;inset:0;z-index:20;pointer-events:none;border:1px solid rgba(255,255,255,.15)}
.ambient{position:absolute;border-radius:50%;filter:blur(1px);opacity:.35;pointer-events:none}.ambient-one{width:340px;height:340px;right:235px;top:-240px;background:#7854ff}.ambient-two{width:260px;height:260px;left:-150px;bottom:-200px;background:#f05e4f}.message{position:absolute;z-index:5;left:31px;top:20px;width:455px}.brand-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}.brand{display:block;width:104px;height:auto;object-fit:contain}.badge{display:block;width:60px;height:auto;object-fit:contain}.eyebrow{display:inline-flex;align-items:center;height:21px;padding:1px 10px 0;border-radius:20px;background:rgba(240,94,79,.16);border:1px solid rgba(240,94,79,.68);color:#ffb1a9;font-size:10px;font-weight:700;letter-spacing:1.15px}.message h1{font-size:28px;line-height:30px;letter-spacing:-.7px;margin:7px 0 4px}.message h1 span{color:#ff8d81}.message p{width:420px;margin:0 0 9px;color:#ded9f0;font-size:12.5px;line-height:16px;white-space:nowrap;transition:opacity .18s,transform .18s}.message p.changing{opacity:0;transform:translateY(4px)}.cta{display:inline-flex;align-items:center;gap:11px;height:32px;padding:0 15px;border-radius:7px;background:var(--coral);box-shadow:0 7px 18px rgba(240,94,79,.28);color:#fff;text-decoration:none;font-size:12px;font-weight:700;transition:transform .18s,box-shadow .18s}.cta:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(240,94,79,.42)}.cta b{font-size:17px;line-height:1}
.experience{position:absolute;z-index:6;right:23px;top:13px;width:450px;height:224px}.hint{position:absolute;right:6px;top:0;color:#d9d3ef;font-size:10px;letter-spacing:.15px}.hint span{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--coral);margin-right:5px;box-shadow:0 0 0 0 rgba(240,94,79,.55);animation:pulse 1.8s infinite}.dashboard{position:absolute;right:0;top:21px;width:315px;height:145px;padding:35px 14px 12px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(244,241,255,.95));border:1px solid rgba(255,255,255,.65);border-radius:15px;box-shadow:0 20px 45px rgba(9,4,37,.38);overflow:hidden}.dashboard:after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;background:rgba(120,84,255,.08);right:-45px;bottom:-55px}.dash-top{position:absolute;display:flex;align-items:center;gap:5px;left:0;right:0;top:0;height:30px;padding:0 12px;border-bottom:1px solid #e7e3f2;color:var(--purple)}.dash-top i{width:5px;height:5px;border-radius:50%;background:#d8d2e8}.dash-top i:first-child{background:var(--coral)}.dash-top strong{margin-left:5px;font-size:10px}.dash-top em{margin-left:auto;padding:3px 5px;border-radius:4px;background:#daf8ed;color:#168563;font-size:7px;font-style:normal;font-weight:700}.screen{position:absolute;inset:38px 14px 12px;display:flex;opacity:0;transform:translateX(18px);pointer-events:none;transition:opacity .28s,transform .35s}.screen.active{opacity:1;transform:translateX(0);pointer-events:auto}.metric{width:105px;color:var(--purple);padding:8px 4px}.metric small,.warehouse small{display:block;color:#827b9f;font-size:9px}.metric b{display:block;margin:5px 0 3px;font-size:18px}.metric span{display:inline-block;padding:3px 6px;border-radius:10px;background:#dff8ef;color:#15916a;font-size:8px;font-weight:700}.chart{display:flex;align-items:end;gap:8px;width:165px;height:83px;padding:8px 10px 4px;border-left:1px solid #e6e1f0;border-bottom:1px solid #e6e1f0}.chart i{flex:1;height:var(--h);min-height:6px;border-radius:4px 4px 1px 1px;background:linear-gradient(#8a6bff,#5e40d9);animation:grow .7s ease both}.chart i:nth-child(4),.chart i:nth-child(6){background:linear-gradient(#ff8a7e,#f05e4f)}
.warehouse{width:120px;padding:8px 4px;color:var(--purple)}.warehouse b{display:block;margin:5px 0;font-size:16px}.warehouse span{font-size:8px;color:#168563;background:#dff8ef;border-radius:10px;padding:3px 6px}.stock-rows{width:155px;padding:2px 0}.stock-rows i{position:relative;display:block;height:23px;margin:4px 0;border-radius:6px;background:#eeebf8}.stock-rows b{position:absolute;left:7px;top:5px;width:13px;height:13px;border-radius:3px;background:var(--violet)}.stock-rows span{position:absolute;left:27px;right:8px;top:8px;height:6px;border-radius:5px;background:#d8d2eb}.stock-rows i:nth-child(2) b{background:var(--coral)}.stock-rows i:nth-child(3) b{background:var(--mint)}
.invoice-paper{position:relative;width:112px;height:88px;padding:10px;background:white;border-radius:7px;box-shadow:0 6px 16px rgba(40,30,99,.11);color:var(--purple)}.invoice-paper b{font-size:9px}.invoice-paper i{display:block;width:72px;height:5px;margin-top:7px;border-radius:4px;background:#e6e1f1}.invoice-paper i:nth-of-type(2){width:54px}.invoice-paper strong{position:absolute;right:9px;bottom:8px;font-size:11px}.sent{display:flex;align-items:center;gap:8px;margin:auto;color:var(--purple)}.sent>b{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#dff8ef;color:#168563}.sent span{font-size:10px;font-weight:700}.sent small{display:block;margin-top:3px;color:#81799c;font-size:7px;font-weight:400}
.feature-tabs{position:absolute;z-index:4;left:0;top:49px;display:flex;flex-direction:column;gap:5px}.tab{position:relative;width:123px;height:36px;display:flex;align-items:center;gap:7px;padding:3px 8px;border:1px solid rgba(255,255,255,.18);border-radius:9px;background:rgba(255,255,255,.08);color:#fff;font:700 10px Europa,Arial;cursor:pointer;text-align:left;transition:transform .2s,background .2s,border-color .2s}.tab img{width:27px;height:27px;object-fit:contain}.tab:hover,.tab.active{transform:translateX(-5px);background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5)}.tab.active:after{content:"";position:absolute;right:-8px;width:8px;height:1px;background:rgba(255,255,255,.55)}.replay{position:absolute;z-index:12;right:7px;bottom:5px;border:0;background:transparent;color:rgba(255,255,255,.55);font-size:14px;cursor:pointer}.replay:hover{color:#fff}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(240,94,79,0)}100%{box-shadow:0 0 0 0 rgba(240,94,79,0)}}@keyframes grow{from{height:0}}
@media(max-width:970px){body{overflow:hidden}.creative{transform-origin:top left;transform:scale(calc(100vw / 970))}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
