:root{
    --bg:#09060f;
    --bg-deep:#050309;
    --panel:#121019;
    --panel-soft:#17131f;
    --panel-raised:#1c1626;
    --line:rgba(255,255,255,0.09);
    --line-strong:rgba(166,94,255,0.28);
    --text:#f7f4fb;
    --muted:#b7afc1;
    --muted-2:#877e91;
    --primary:#9b4dff;
    --primary-bright:#b46cff;
    --primary-soft:rgba(155,77,255,0.14);
    --green:#4be2a0;
    --amber:#f6c45b;
    --danger:#ff6f8f;
    --shadow:0 30px 80px rgba(0,0,0,0.42);
    --radius:24px;
    --radius-small:15px;
    --shell:1180px;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    min-width:320px;
    color:var(--text);
    background:
        radial-gradient(
            circle at 75% 5%,
            rgba(116,49,190,0.12),
            transparent 26rem
        ),
        var(--bg);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}

body.menu-open{
    overflow:hidden;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input{
    font:inherit;
}

button{
    color:inherit;
}

img,
svg{
    display:block;
    max-width:100%;
}

.shell{
    width:min(
        calc(100% - 40px),
        var(--shell)
    );
    margin:0 auto;
}

.section{
    position:relative;
    padding:110px 0;
}

.skip-link{
    position:fixed;
    left:16px;
    top:16px;
    z-index:999;
    padding:10px 14px;
    border-radius:10px;
    color:#111;
    background:#fff;
    transform:translateY(-160%);
}

.skip-link:focus{
    transform:translateY(0);
}

.site-header{
    position:sticky;
    z-index:100;
    top:0;
    border-bottom:1px solid transparent;
    background:rgba(9,6,15,0.74);
    backdrop-filter:blur(20px);
    transition:
        background 180ms ease,
        border-color 180ms ease;
}

.site-header.scrolled{
    border-color:var(--line);
    background:rgba(9,6,15,0.92);
}

.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:74px;
    gap:28px;
}

.brand{
    display:inline-flex;
    align-items:center;
    gap:11px;
    flex-shrink:0;
}

.brand-mark{
    position:relative;
    display:grid;
    grid-template-columns:repeat(3,7px);
    align-items:end;
    gap:3px;
    width:31px;
    height:31px;
    padding:7px 5px;
    border:1px solid rgba(180,108,255,0.48);
    border-radius:10px;
    background:
        linear-gradient(
            145deg,
            rgba(180,108,255,0.23),
            rgba(91,37,156,0.08)
        );
    box-shadow:
        inset 0 0 18px rgba(155,77,255,0.1),
        0 8px 28px rgba(91,37,156,0.22);
}

.brand-mark span{
    display:block;
    border-radius:4px 4px 2px 2px;
    background:
        linear-gradient(
            180deg,
            var(--primary-bright),
            var(--primary)
        );
}

.brand-mark span:nth-child(1){
    height:8px;
}

.brand-mark span:nth-child(2){
    height:14px;
}

.brand-mark span:nth-child(3){
    height:11px;
}

.brand-name{
    color:#fff;
    font-size:19px;
    font-weight:800;
    letter-spacing:-0.04em;
}

.brand-name span{
    color:var(--primary-bright);
}

.desktop-nav{
    display:flex;
    align-items:center;
    gap:30px;
    color:var(--muted);
    font-size:14px;
    font-weight:650;
}

.desktop-nav a,
.text-link{
    transition:color 160ms ease;
}

.desktop-nav a:hover,
.text-link:hover{
    color:#fff;
}

.header-actions{
    display:flex;
    align-items:center;
    gap:20px;
}

.text-link{
    color:#d9d2e2;
    font-size:14px;
    font-weight:700;
}

.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:46px;
    padding:0 20px;
    border:1px solid transparent;
    border-radius:13px;
    font-size:14px;
    font-weight:800;
    line-height:1;
    transition:
        transform 160ms ease,
        border-color 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease;
}

.button:hover{
    transform:translateY(-2px);
}

.button-primary{
    color:#fff;
    border-color:rgba(197,145,255,0.28);
    background:
        linear-gradient(
            135deg,
            #a153ff,
            #7f31e3
        );
    box-shadow:
        0 14px 34px rgba(115,36,206,0.3),
        inset 0 1px 0 rgba(255,255,255,0.18);
}

.button-primary:hover{
    box-shadow:
        0 18px 40px rgba(115,36,206,0.42),
        inset 0 1px 0 rgba(255,255,255,0.2);
}

.button-secondary{
    color:#efeaf5;
    border-color:var(--line);
    background:rgba(255,255,255,0.035);
}

.button-secondary:hover{
    border-color:rgba(180,108,255,0.28);
    background:rgba(155,77,255,0.08);
}

.button-small{
    min-height:40px;
    padding:0 16px;
}

.button-large{
    min-height:54px;
    padding:0 24px;
    border-radius:15px;
    font-size:15px;
}

.button-full{
    width:100%;
}

.menu-button{
    display:none;
    width:44px;
    height:42px;
    padding:10px;
    border:1px solid var(--line);
    border-radius:12px;
    background:rgba(255,255,255,0.035);
    cursor:pointer;
}

.menu-button span{
    display:block;
    height:2px;
    margin:4px 0;
    border-radius:10px;
    background:#fff;
}

.mobile-menu{
    position:fixed;
    inset:74px 0 auto 0;
    z-index:90;
    padding:24px 20px 32px;
    border-bottom:1px solid var(--line);
    background:rgba(9,6,15,0.98);
    box-shadow:0 30px 50px rgba(0,0,0,0.38);
}

.mobile-menu a{
    display:block;
    padding:15px 10px;
    color:#eee9f4;
    border-bottom:1px solid rgba(255,255,255,0.06);
    font-weight:750;
}

.hero{
    overflow:hidden;
    padding-top:82px;
    padding-bottom:56px;
}

.hero-glow{
    position:absolute;
    pointer-events:none;
    border-radius:50%;
    filter:blur(10px);
}

.hero-glow-one{
    width:560px;
    height:560px;
    top:-300px;
    left:58%;
    background:
        radial-gradient(
            circle,
            rgba(155,77,255,0.22),
            rgba(155,77,255,0) 70%
        );
}

.hero-glow-two{
    width:380px;
    height:380px;
    left:-190px;
    top:310px;
    background:
        radial-gradient(
            circle,
            rgba(94,35,158,0.13),
            rgba(94,35,158,0) 72%
        );
}

.hero-grid{
    display:grid;
    grid-template-columns:minmax(0,0.88fr) minmax(560px,1.12fr);
    align-items:center;
    gap:58px;
}

.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-bottom:18px;
    color:#c894ff;
    font-size:12px;
    font-weight:850;
    letter-spacing:0.13em;
    text-transform:uppercase;
}

.eyebrow::before{
    content:"";
    width:28px;
    height:1px;
    background:
        linear-gradient(
            90deg,
            var(--primary),
            transparent
        );
}

.hero h1,
.section-heading h2,
.workflow-copy h2,
.printing-copy h2,
.final-cta h2{
    margin:0;
    color:#fff;
    font-weight:850;
    line-height:1.04;
    letter-spacing:-0.055em;
}

.hero h1{
    max-width:680px;
    font-size:clamp(3.2rem,6vw,5.45rem);
}

.hero h1 span{
    display:block;
    background:
        linear-gradient(
            90deg,
            #d6b1ff,
            #9b4dff 55%,
            #d8c1ed
        );
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.hero-lead{
    max-width:640px;
    margin:26px 0 0;
    color:#c7bfce;
    font-size:18px;
    line-height:1.72;
}

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:13px;
    margin-top:34px;
}

.hero-proof{
    display:flex;
    flex-wrap:wrap;
    gap:24px;
    margin-top:32px;
    color:var(--muted);
    font-size:13px;
}

.hero-proof span{
    display:inline-flex;
    align-items:center;
    gap:7px;
}

.hero-proof span::before{
    content:"✓";
    display:grid;
    place-items:center;
    width:19px;
    height:19px;
    color:var(--green);
    border:1px solid rgba(75,226,160,0.25);
    border-radius:50%;
    background:rgba(75,226,160,0.08);
    font-size:10px;
    font-weight:900;
}

.hero-proof strong{
    color:#f6f1fa;
}

.app-showcase{
    overflow:hidden;
    border:1px solid rgba(200,153,255,0.2);
    border-radius:24px;
    background:#100c16;
    box-shadow:
        0 40px 110px rgba(0,0,0,0.52),
        0 0 0 1px rgba(155,77,255,0.04),
        0 0 85px rgba(93,31,160,0.16);
    transform:perspective(1300px) rotateY(-3deg) rotateX(1deg);
}

.window-bar{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:20px;
    height:45px;
    padding:0 16px;
    border-bottom:1px solid rgba(255,255,255,0.06);
    background:#17111e;
}

.window-dots{
    display:flex;
    gap:6px;
}

.window-dots span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#574d61;
}

.window-dots span:nth-child(1){
    background:#ff6f8f;
}

.window-dots span:nth-child(2){
    background:#f6c45b;
}

.window-dots span:nth-child(3){
    background:#4be2a0;
}

.window-address{
    padding:5px 28px;
    color:#8f8499;
    border:1px solid rgba(255,255,255,0.045);
    border-radius:7px;
    background:#0d0912;
    font-size:9px;
}

.window-secure{
    justify-self:end;
    color:#65dca9;
    font-size:9px;
    font-weight:750;
}

.app-layout{
    display:grid;
    grid-template-columns:140px 1fr;
    min-height:470px;
}

.mock-sidebar{
    padding:20px 12px;
    border-right:1px solid rgba(255,255,255,0.055);
    background:#0b0810;
}

.mock-logo{
    display:flex;
    align-items:center;
    gap:7px;
    margin:0 8px 23px;
    color:#f0ebf4;
    font-size:10px;
    font-weight:800;
}

.mini-mark{
    width:17px;
    height:17px;
    border:1px solid rgba(180,108,255,0.35);
    border-radius:5px;
    background:
        linear-gradient(
            135deg,
            rgba(180,108,255,0.35),
            rgba(116,49,190,0.08)
        );
}

.mock-nav-item{
    display:flex;
    align-items:center;
    gap:9px;
    min-height:36px;
    margin:5px 0;
    padding:0 10px;
    color:#817888;
    border:1px solid transparent;
    border-radius:9px;
    font-size:9px;
    font-weight:650;
}

.mock-nav-item span{
    width:13px;
    text-align:center;
    color:#a694b6;
}

.mock-nav-item.active{
    color:#e9ddf5;
    border-color:rgba(167,91,255,0.16);
    background:rgba(155,77,255,0.1);
}

.mock-main{
    padding:20px;
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(112,44,176,0.1),
            transparent 210px
        ),
        #100c16;
}

.mock-topline,
.mock-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.mock-topline > div:first-child{
    display:flex;
    flex-direction:column;
}

.mock-kicker,
.mock-card-head span{
    color:#776d80;
    font-size:8px;
}

.mock-topline strong{
    margin-top:3px;
    font-size:15px;
}

.mock-avatar{
    display:grid;
    place-items:center;
    width:29px;
    height:29px;
    border:1px solid rgba(180,108,255,0.24);
    border-radius:10px;
    color:#d7b8f7;
    background:rgba(155,77,255,0.1);
    font-size:8px;
    font-weight:800;
}

.mock-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-top:17px;
}

.mock-stats article{
    min-height:85px;
    padding:13px;
    border:1px solid rgba(255,255,255,0.055);
    border-radius:12px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.025),
            rgba(255,255,255,0.009)
        );
}

.mock-stats span,
.mock-stats small{
    display:block;
    color:#7f7588;
    font-size:7px;
}

.mock-stats strong{
    display:block;
    margin:6px 0 2px;
    font-size:19px;
    letter-spacing:-0.04em;
}

.mock-stats .positive{
    color:#52dca0;
}

.mock-panels{
    display:grid;
    grid-template-columns:1.45fr 0.95fr;
    gap:10px;
    margin-top:10px;
}

.mock-chart-card,
.mock-activity-card{
    min-height:238px;
    padding:14px;
    border:1px solid rgba(255,255,255,0.055);
    border-radius:12px;
    background:rgba(255,255,255,0.018);
}

.mock-card-head > div:first-child{
    display:flex;
    flex-direction:column;
}

.mock-card-head strong{
    margin-top:2px;
    font-size:10px;
}

.mock-chip{
    padding:5px 7px;
    color:#b99fd3;
    border:1px solid rgba(180,108,255,0.13);
    border-radius:7px;
    background:rgba(155,77,255,0.07);
    font-size:6px;
}

.mock-chart{
    position:relative;
    height:155px;
    margin-top:22px;
    overflow:hidden;
    border-bottom:1px solid rgba(255,255,255,0.08);
    background:
        linear-gradient(
            rgba(255,255,255,0.04) 1px,
            transparent 1px
        );
    background-size:100% 38px;
}

.chart-fill{
    position:absolute;
    inset:38px 0 0;
    opacity:0.55;
    background:
        linear-gradient(
            180deg,
            rgba(155,77,255,0.22),
            rgba(155,77,255,0)
        );
    clip-path:polygon(
        0 73%,
        11% 62%,
        22% 65%,
        33% 46%,
        44% 53%,
        55% 31%,
        66% 39%,
        77% 14%,
        88% 24%,
        100% 2%,
        100% 100%,
        0 100%
    );
}

.chart-bars{
    position:absolute;
    inset:0;
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:5px;
}

.chart-bars span{
    width:7%;
    max-width:10px;
    border-radius:3px 3px 0 0;
    background:
        linear-gradient(
            180deg,
            rgba(180,108,255,0.9),
            rgba(111,43,179,0.33)
        );
}

.activity-row{
    display:grid;
    grid-template-columns:26px 1fr auto;
    align-items:center;
    gap:8px;
    margin-top:15px;
    padding-bottom:13px;
    border-bottom:1px solid rgba(255,255,255,0.055);
}

.activity-icon{
    display:grid;
    place-items:center;
    width:26px;
    height:26px;
    border-radius:8px;
    font-size:9px;
    font-weight:850;
}

.activity-icon.purple{
    color:#c692ff;
    background:rgba(155,77,255,0.12);
}

.activity-icon.green{
    color:#71e6b2;
    background:rgba(75,226,160,0.1);
}

.activity-icon.amber{
    color:#f4cc74;
    background:rgba(246,196,91,0.1);
}

.activity-row div{
    display:flex;
    flex-direction:column;
}

.activity-row strong{
    font-size:8px;
}

.activity-row small,
.activity-row time{
    color:#776d80;
    font-size:6px;
}

.marketplace-strip{
    display:flex;
    align-items:center;
    gap:38px;
    margin-top:75px;
    padding:22px 0 0;
    border-top:1px solid rgba(255,255,255,0.065);
    color:#7e7488;
    font-size:12px;
}

.marketplace-list{
    display:flex;
    flex:1;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    color:#9b91a5;
    font-size:12px;
}

.marketplace-list strong{
    font-weight:750;
}

.problem-section{
    padding-top:90px;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.012),
            transparent
        );
}

.section-heading{
    max-width:710px;
    margin-bottom:48px;
}

.section-heading.centred{
    margin-right:auto;
    margin-left:auto;
    text-align:center;
}

.section-heading.centred .eyebrow{
    justify-content:center;
}

.section-heading.centred .eyebrow::after{
    content:"";
    width:28px;
    height:1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--primary)
        );
}

.section-heading h2,
.workflow-copy h2,
.printing-copy h2,
.final-cta h2{
    font-size:clamp(2.35rem,4.5vw,4rem);
}

.section-heading p,
.workflow-copy > p,
.printing-copy > p,
.final-cta p{
    margin:20px 0 0;
    color:var(--muted);
    font-size:17px;
    line-height:1.72;
}

.problem-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.problem-card{
    position:relative;
    min-height:255px;
    padding:30px;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.033),
            rgba(255,255,255,0.012)
        );
}

.problem-card::after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    right:-95px;
    bottom:-100px;
    border-radius:50%;
    background:rgba(155,77,255,0.11);
    filter:blur(20px);
}

.problem-number{
    display:inline-flex;
    margin-bottom:42px;
    color:#b678fa;
    font-size:12px;
    font-weight:850;
    letter-spacing:0.1em;
}

.problem-card h3,
.feature-card h3,
.audience-card h3{
    margin:0;
    color:#fff;
    font-size:21px;
    line-height:1.3;
    letter-spacing:-0.025em;
}

.problem-card p,
.feature-card p,
.audience-card p{
    margin:13px 0 0;
    color:var(--muted);
    font-size:14px;
}

.features-section{
    background:
        radial-gradient(
            circle at 0 35%,
            rgba(96,35,166,0.08),
            transparent 480px
        );
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.feature-card{
    position:relative;
    min-height:300px;
    padding:28px;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:
        linear-gradient(
            150deg,
            rgba(255,255,255,0.032),
            rgba(255,255,255,0.01)
        );
    transition:
        transform 170ms ease,
        border-color 170ms ease;
}

.feature-card:hover{
    transform:translateY(-4px);
    border-color:rgba(180,108,255,0.24);
}

.feature-card-large{
    display:grid;
    grid-template-columns:minmax(0,0.92fr) minmax(270px,1.08fr);
    grid-column:span 2;
    gap:25px;
}

.feature-icon{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    margin-bottom:36px;
    border:1px solid rgba(180,108,255,0.2);
    border-radius:13px;
    background:rgba(155,77,255,0.09);
}

.feature-icon svg{
    width:22px;
    height:22px;
    fill:none;
    stroke:#bd82ff;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.feature-label{
    display:block;
    margin-bottom:10px;
    color:#9e8daa;
    font-size:11px;
    font-weight:800;
    letter-spacing:0.1em;
    text-transform:uppercase;
}

.mini-interface{
    align-self:end;
    min-height:220px;
    padding:18px;
    border:1px solid rgba(255,255,255,0.07);
    border-radius:17px;
    background:#0b0810;
    box-shadow:0 24px 60px rgba(0,0,0,0.25);
}

.mini-search{
    display:flex;
    align-items:center;
    gap:9px;
    min-height:38px;
    padding:0 12px;
    color:#8c8295;
    border:1px solid rgba(255,255,255,0.07);
    border-radius:10px;
    background:#14101a;
    font-size:10px;
}

.mini-result{
    display:grid;
    grid-template-columns:31px 1fr auto;
    align-items:center;
    gap:10px;
    margin-top:12px;
    padding:11px;
    border:1px solid rgba(255,255,255,0.055);
    border-radius:11px;
    background:rgba(255,255,255,0.02);
}

.mini-product-icon{
    display:grid;
    place-items:center;
    width:31px;
    height:31px;
    color:#bf8df4;
    border-radius:8px;
    background:rgba(155,77,255,0.1);
}

.mini-result div{
    display:flex;
    flex-direction:column;
}

.mini-result strong{
    font-size:9px;
}

.mini-result small{
    color:#756b7e;
    font-size:7px;
}

.location-pill{
    padding:5px 7px;
    color:#c99eff;
    border:1px solid rgba(180,108,255,0.14);
    border-radius:7px;
    background:rgba(155,77,255,0.08);
    font-size:7px;
    font-weight:800;
}

.dispatch-interface{
    position:relative;
}

.dispatch-toolbar{
    display:flex;
    justify-content:space-between;
    gap:20px;
    color:#7a7083;
    font-size:8px;
}

.dispatch-toolbar strong{
    color:#bc8cf2;
}

.dispatch-label{
    width:67%;
    min-height:170px;
    margin:16px auto 0;
    padding:13px;
    color:#111;
    border-radius:8px;
    background:#fff;
    transform:rotate(1.8deg);
    box-shadow:0 13px 35px rgba(0,0,0,0.35);
}

.label-address{
    display:flex;
    flex-direction:column;
    line-height:1.2;
}

.label-address small{
    font-size:5px;
    letter-spacing:0.12em;
}

.label-address strong{
    margin-top:4px;
    font-size:9px;
}

.label-address span{
    margin-top:2px;
    font-size:6px;
}

.label-barcode,
.printed-barcode{
    height:37px;
    margin:16px 0 8px;
    background:
        repeating-linear-gradient(
            90deg,
            #111 0 2px,
            transparent 2px 4px,
            #111 4px 5px,
            transparent 5px 8px
        );
}

.label-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:6px;
}

.workflow-section{
    overflow:hidden;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.015),
            transparent
        );
}

.workflow-grid{
    display:grid;
    grid-template-columns:minmax(0,0.9fr) minmax(460px,1.1fr);
    align-items:center;
    gap:86px;
}

.workflow-copy{
    max-width:560px;
}

.workflow-steps{
    display:grid;
    gap:10px;
    margin-top:38px;
}

.workflow-step{
    display:grid;
    grid-template-columns:37px 1fr;
    align-items:start;
    gap:15px;
    width:100%;
    padding:18px;
    color:var(--muted);
    border:1px solid transparent;
    border-radius:16px;
    background:transparent;
    text-align:left;
    cursor:pointer;
    transition:
        border-color 160ms ease,
        background 160ms ease;
}

.workflow-step > span{
    display:grid;
    place-items:center;
    width:37px;
    height:37px;
    color:#a88cbd;
    border:1px solid var(--line);
    border-radius:11px;
    background:rgba(255,255,255,0.025);
    font-size:12px;
    font-weight:850;
}

.workflow-step div{
    display:flex;
    flex-direction:column;
}

.workflow-step strong{
    color:#eee9f3;
    font-size:15px;
}

.workflow-step small{
    margin-top:5px;
    color:#948a9e;
    font-size:12px;
    line-height:1.6;
}

.workflow-step.active{
    border-color:rgba(180,108,255,0.18);
    background:rgba(155,77,255,0.07);
}

.workflow-step.active > span{
    color:#fff;
    border-color:rgba(192,132,255,0.28);
    background:
        linear-gradient(
            135deg,
            #a153ff,
            #7530cf
        );
}

.workflow-demo{
    position:relative;
    min-height:520px;
    padding:45px;
    border:1px solid rgba(180,108,255,0.16);
    border-radius:32px;
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(155,77,255,0.11),
            transparent 260px
        ),
        #100c16;
    box-shadow:var(--shadow);
}

.workflow-demo::before{
    content:"";
    position:absolute;
    z-index:-1;
    width:330px;
    height:330px;
    left:-110px;
    bottom:-110px;
    border-radius:50%;
    background:rgba(111,42,184,0.13);
    filter:blur(38px);
}

.workflow-screen{
    display:none;
    min-height:430px;
    padding:28px;
    border:1px solid rgba(255,255,255,0.07);
    border-radius:20px;
    background:#0b0810;
    animation:screenIn 220ms ease;
}

.workflow-screen.active{
    display:block;
}

@keyframes screenIn{
    from{
        opacity:0;
        transform:translateY(8px);
    }

    to{
        opacity:1;
        transform:none;
    }
}

.workflow-screen-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:28px;
}

.workflow-screen-head span{
    color:#817788;
    font-size:11px;
}

.workflow-screen-head strong{
    color:#be8df3;
    font-size:11px;
}

.workflow-screen label{
    display:flex;
    flex-direction:column;
    gap:8px;
    color:#8e8498;
    font-size:10px;
    font-weight:750;
}

.workflow-screen label > span,
.workflow-search{
    min-height:48px;
    padding:0 14px;
    display:flex;
    align-items:center;
    color:#f4eff7;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:12px;
    background:#17121d;
    font-size:12px;
}

.field-row{
    display:grid;
    grid-template-columns:0.75fr 1.25fr;
    gap:12px;
    margin-top:16px;
}

.workflow-option{
    display:flex;
    align-items:center;
    gap:11px;
    margin-top:24px;
    color:#b6acbf;
    font-size:11px;
}

.toggle{
    position:relative;
    width:35px;
    height:20px;
    border-radius:999px;
    background:#2b2432;
}

.toggle::after{
    content:"";
    position:absolute;
    width:14px;
    height:14px;
    left:3px;
    top:3px;
    border-radius:50%;
    background:#8a7c94;
}

.toggle.on{
    background:#7430ca;
}

.toggle.on::after{
    left:18px;
    background:#fff;
}

.workflow-submit{
    display:grid;
    place-items:center;
    min-height:48px;
    margin-top:25px;
    border:1px solid rgba(205,160,255,0.2);
    border-radius:12px;
    background:
        linear-gradient(
            135deg,
            #9949f8,
            #7130c7
        );
    font-size:12px;
    font-weight:850;
}

.workflow-search{
    gap:10px;
    margin-bottom:15px;
    color:#b6acbf;
}

.workflow-stock-row{
    display:grid;
    grid-template-columns:40px 1fr auto;
    align-items:center;
    gap:12px;
    margin-top:12px;
    padding:13px;
    border:1px solid rgba(255,255,255,0.06);
    border-radius:13px;
    background:#141018;
}

.stock-thumb{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    color:#c38ef8;
    border-radius:10px;
    background:rgba(155,77,255,0.1);
}

.workflow-stock-row div{
    display:flex;
    flex-direction:column;
}

.workflow-stock-row strong{
    font-size:11px;
}

.workflow-stock-row small{
    color:#7d7386;
    font-size:8px;
}

.workflow-stock-row button{
    min-height:30px;
    padding:0 10px;
    color:#c99df6;
    border:1px solid rgba(180,108,255,0.15);
    border-radius:8px;
    background:rgba(155,77,255,0.07);
    font-size:8px;
    font-weight:800;
}

.sale-summary{
    display:flex;
    align-items:end;
    justify-content:space-between;
    padding:22px 0;
    border-bottom:1px solid rgba(255,255,255,0.07);
}

.sale-summary span,
.sale-line span,
.sale-profit span{
    color:#8f8498;
    font-size:11px;
}

.sale-summary strong{
    font-size:34px;
    letter-spacing:-0.04em;
}

.sale-line,
.sale-profit{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 0;
    border-bottom:1px solid rgba(255,255,255,0.06);
}

.sale-line strong{
    color:#c2b8ca;
    font-size:12px;
}

.sale-profit strong{
    color:var(--green);
    font-size:17px;
}

.audience-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

.audience-card{
    min-height:250px;
    padding:27px;
    border-top:1px solid rgba(180,108,255,0.32);
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    border-left:1px solid var(--line);
    border-radius:0 0 20px 20px;
    background:rgba(255,255,255,0.018);
}

.audience-card > span{
    display:block;
    margin-bottom:58px;
    color:#9959db;
    font-size:11px;
    font-weight:850;
}

.pricing-section{
    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(112,41,181,0.1),
            transparent 520px
        );
}

.pricing-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    align-items:stretch;
    gap:13px;
}

.price-card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:555px;
    padding:27px;
    border:1px solid var(--line);
    border-radius:22px;
    background:
        linear-gradient(
            150deg,
            rgba(255,255,255,0.03),
            rgba(255,255,255,0.01)
        );
}

.price-card.featured{
    border-color:rgba(180,108,255,0.4);
    background:
        linear-gradient(
            150deg,
            rgba(155,77,255,0.11),
            rgba(255,255,255,0.012)
        );
    box-shadow:0 24px 80px rgba(77,20,135,0.18);
}

.popular-badge{
    position:absolute;
    top:0;
    left:50%;
    padding:7px 13px;
    color:#fff;
    border-radius:0 0 10px 10px;
    background:
        linear-gradient(
            135deg,
            #a153ff,
            #7b33d9
        );
    font-size:9px;
    font-weight:850;
    letter-spacing:0.07em;
    text-transform:uppercase;
    transform:translateX(-50%);
}

.plan-name{
    display:block;
    color:#fff;
    font-size:18px;
    font-weight:850;
}

.price-card-head p{
    min-height:76px;
    margin:12px 0 0;
    color:#918798;
    font-size:12px;
}

.price{
    display:flex;
    align-items:baseline;
    gap:5px;
    margin-top:20px;
}

.price strong{
    font-size:38px;
    line-height:1;
    letter-spacing:-0.06em;
}

.price span{
    color:#8c8295;
    font-size:11px;
}

.price-card ul{
    display:grid;
    gap:13px;
    flex:1;
    margin:30px 0;
    padding:25px 0 0;
    border-top:1px solid rgba(255,255,255,0.07);
    list-style:none;
}

.price-card li{
    position:relative;
    padding-left:22px;
    color:#b9b0c1;
    font-size:12px;
}

.price-card li::before{
    content:"✓";
    position:absolute;
    left:0;
    color:#b57aef;
    font-weight:900;
}

.pricing-note{
    margin:24px 0 0;
    color:#7f7588;
    text-align:center;
    font-size:11px;
}

.printing-panel{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    align-items:center;
    gap:70px;
    min-height:510px;
    padding:65px;
    overflow:hidden;
    border:1px solid rgba(180,108,255,0.18);
    border-radius:32px;
    background:
        radial-gradient(
            circle at 90% 50%,
            rgba(155,77,255,0.15),
            transparent 330px
        ),
        linear-gradient(
            140deg,
            #15101d,
            #0d0912
        );
    box-shadow:var(--shadow);
}

.printing-copy{
    max-width:590px;
}

.printing-points{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    margin-top:28px;
}

.printing-points span{
    display:flex;
    flex-direction:column;
    min-width:160px;
    padding:15px 17px;
    border:1px solid rgba(255,255,255,0.07);
    border-radius:13px;
    background:rgba(255,255,255,0.025);
    color:#948a9e;
    font-size:11px;
}

.printing-points strong{
    color:#fff;
    font-size:19px;
}

.printer-visual{
    position:relative;
    width:min(100%,390px);
    height:370px;
    margin:0 auto;
}

.printer-top{
    position:absolute;
    z-index:3;
    width:70%;
    height:65px;
    top:45px;
    left:15%;
    border:1px solid rgba(255,255,255,0.1);
    border-radius:22px 22px 8px 8px;
    background:
        linear-gradient(
            180deg,
            #3b3540,
            #1b171f
        );
    box-shadow:0 18px 30px rgba(0,0,0,0.28);
}

.printer-top span{
    position:absolute;
    width:60%;
    height:8px;
    left:20%;
    top:20px;
    border-radius:8px;
    background:#100d13;
}

.printer-body{
    position:absolute;
    z-index:2;
    width:88%;
    height:145px;
    left:6%;
    top:95px;
    border:1px solid rgba(255,255,255,0.11);
    border-radius:25px;
    background:
        linear-gradient(
            155deg,
            #2a252f,
            #151118 70%
        );
    box-shadow:0 34px 70px rgba(0,0,0,0.38);
}

.printer-light{
    position:absolute;
    width:8px;
    height:8px;
    top:25px;
    right:30px;
    border-radius:50%;
    background:#56e3a6;
    box-shadow:0 0 14px rgba(86,227,166,0.7);
}

.printer-slot{
    position:absolute;
    width:72%;
    height:17px;
    left:14%;
    bottom:26px;
    border-radius:10px;
    background:#09070b;
    box-shadow:inset 0 3px 7px rgba(0,0,0,0.6);
}

.printed-label{
    position:absolute;
    z-index:1;
    width:58%;
    min-height:190px;
    left:21%;
    bottom:5px;
    padding:22px 19px;
    color:#111;
    border-radius:0 0 7px 7px;
    background:#fff;
    box-shadow:0 30px 55px rgba(0,0,0,0.32);
    animation:labelFloat 4s ease-in-out infinite;
}

@keyframes labelFloat{
    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(7px);
    }
}

.printed-label small{
    display:block;
    font-size:7px;
    letter-spacing:0.13em;
}

.printed-label strong{
    display:block;
    margin-top:10px;
    font-size:13px;
}

.printed-label span{
    display:block;
    text-align:center;
    font-size:8px;
    font-weight:850;
}

.faq-layout{
    display:grid;
    grid-template-columns:0.8fr 1.2fr;
    align-items:start;
    gap:90px;
}

.faq-list{
    display:grid;
    gap:10px;
}

.faq-item{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:16px;
    background:rgba(255,255,255,0.018);
}

.faq-item button{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    width:100%;
    min-height:70px;
    padding:0 20px;
    border:0;
    background:transparent;
    color:#eee9f4;
    text-align:left;
    cursor:pointer;
    font-size:14px;
    font-weight:750;
}

.faq-item button span{
    color:#a967ea;
    font-size:19px;
    transition:transform 160ms ease;
}

.faq-item button[aria-expanded="true"] span{
    transform:rotate(45deg);
}

.faq-answer{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows 190ms ease;
}

.faq-item.open .faq-answer{
    grid-template-rows:1fr;
}

.faq-answer p{
    overflow:hidden;
    margin:0;
    padding:0 20px;
    color:#9f95a8;
    font-size:13px;
    transition:padding 190ms ease;
}

.faq-item.open .faq-answer p{
    padding-bottom:20px;
}

.final-cta{
    padding-top:65px;
}

.final-cta-panel{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
    min-height:340px;
    padding:58px;
    overflow:hidden;
    border:1px solid rgba(180,108,255,0.22);
    border-radius:30px;
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(192,128,255,0.23),
            transparent 320px
        ),
        linear-gradient(
            135deg,
            #1a1124,
            #0f0a15
        );
    box-shadow:var(--shadow);
}

.final-cta-panel > div:first-child{
    max-width:690px;
}

.final-cta-actions{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    flex-shrink:0;
}

.site-footer{
    margin-top:70px;
    padding:65px 0 28px;
    border-top:1px solid var(--line);
    background:var(--bg-deep);
}

.footer-grid{
    display:grid;
    grid-template-columns:1fr auto;
    gap:70px;
}

.footer-brand{
    max-width:400px;
}

.footer-brand p{
    margin:19px 0 0;
    color:#827889;
    font-size:13px;
}

.footer-links{
    display:grid;
    grid-template-columns:repeat(2,minmax(130px,1fr));
    gap:65px;
}

.footer-links > div{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.footer-links strong{
    margin-bottom:6px;
    color:#eee9f4;
    font-size:12px;
}

.footer-links a{
    color:#847a8d;
    font-size:12px;
}

.footer-links a:hover{
    color:#fff;
}

.footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    margin-top:55px;
    padding-top:22px;
    border-top:1px solid rgba(255,255,255,0.06);
    color:#665e6d;
    font-size:10px;
}

.reveal{
    opacity:0;
    transform:translateY(18px);
    transition:
        opacity 600ms ease,
        transform 600ms ease;
}

.reveal.visible{
    opacity:1;
    transform:none;
}

.reveal-delay{
    transition-delay:100ms;
}

@media (max-width:1080px){
    .hero-grid{
        grid-template-columns:1fr;
    }

    .hero-copy{
        max-width:760px;
    }

    .app-showcase{
        max-width:790px;
        transform:none;
    }

    .feature-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .feature-card-large{
        grid-column:span 2;
    }

    .workflow-grid{
        gap:45px;
    }

    .pricing-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .audience-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:820px){
    .section{
        padding:82px 0;
    }

    .desktop-nav,
    .desktop-only{
        display:none;
    }

    .menu-button{
        display:block;
    }

    .hero{
        padding-top:58px;
    }

    .hero h1{
        font-size:clamp(2.85rem,11vw,4.7rem);
    }

    .marketplace-strip{
        align-items:flex-start;
        gap:20px;
        flex-direction:column;
    }

    .marketplace-list{
        flex-wrap:wrap;
        justify-content:flex-start;
    }

    .problem-grid,
    .feature-grid,
    .workflow-grid,
    .faq-layout{
        grid-template-columns:1fr;
    }

    .feature-card-large{
        grid-column:span 1;
        grid-template-columns:1fr;
    }

    .workflow-copy{
        max-width:none;
    }

    .printing-panel{
        grid-template-columns:1fr;
        gap:35px;
        padding:45px 32px;
    }

    .final-cta-panel{
        align-items:flex-start;
        flex-direction:column;
        padding:45px 32px;
    }

    .final-cta-actions{
        align-items:flex-start;
    }

    .footer-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width:600px){
    .shell{
        width:min(
            calc(100% - 28px),
            var(--shell)
        );
    }

    .header-inner{
        min-height:68px;
    }

    .mobile-menu{
        top:68px;
    }

    .header-actions{
        gap:10px;
    }

    .header-actions .button{
        display:none;
    }

    .hero-actions{
        flex-direction:column;
    }

    .hero-actions .button{
        width:100%;
    }

    .hero-proof{
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
    }

    .app-showcase{
        margin-right:-8px;
        margin-left:-8px;
    }

    .window-address{
        padding:5px 10px;
    }

    .app-layout{
        grid-template-columns:1fr;
        min-height:auto;
    }

    .mock-sidebar{
        display:none;
    }

    .mock-main{
        padding:14px;
    }

    .mock-stats{
        grid-template-columns:1fr 1fr;
    }

    .mock-stats article:nth-child(3){
        grid-column:span 2;
    }

    .mock-panels{
        grid-template-columns:1fr;
    }

    .mock-activity-card{
        display:none;
    }

    .problem-grid,
    .pricing-grid,
    .audience-grid{
        grid-template-columns:1fr;
    }

    .problem-card{
        min-height:220px;
    }

    .feature-card{
        padding:23px;
    }

    .mini-interface{
        padding:13px;
    }

    .dispatch-label{
        width:82%;
    }

    .workflow-demo{
        min-height:470px;
        padding:18px;
    }

    .workflow-screen{
        min-height:430px;
        padding:20px;
    }

    .workflow-step{
        padding:14px;
    }

    .printing-panel{
        padding:36px 22px;
    }

    .printer-visual{
        transform:scale(0.9);
        transform-origin:center top;
    }

    .price-card{
        min-height:auto;
    }

    .price-card-head p{
        min-height:auto;
    }

    .footer-links{
        gap:30px;
    }

    .footer-bottom{
        align-items:flex-start;
        flex-direction:column;
    }
}

@media (prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
    }

    .reveal{
        opacity:1;
        transform:none;
    }
}