*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --background:#070709;
    --background-secondary:#0a0a0d;
    --surface:#0d0d11;
    --surface-hover:#111116;
    --surface-light:#15151b;

    --border:rgba(255,255,255,.075);
    --border-light:rgba(255,255,255,.045);

    --text:#f7f7f8;
    --text-secondary:#a0a0aa;
    --muted:#686873;
    --faint:#45454e;

    --accent:#9b7cff;
    --accent-rgb:155,124,255;
    --accent-soft:rgba(155,124,255,.11);
    --accent-border:rgba(155,124,255,.28);

    --success:#59d98e;
    --danger:#ff6666;

    --max-width:1180px;
}

html{
    scroll-behavior:smooth;
}

body{
    min-height:100vh;

    overflow-x:hidden;

    background:
        var(--background);

    color:
        var(--text);

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    -webkit-font-smoothing:
        antialiased;
}

body.menu-open{
    overflow:hidden;
}

button,
a{
    font:inherit;
}

button{
    outline:none;
}

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

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

::selection{
    background:
        rgba(var(--accent-rgb),.25);

    color:#fff;
}


/* BACKGROUND */

.background-effects{
    position:fixed;
    inset:0;

    z-index:-1;

    pointer-events:none;

    overflow:hidden;
}

.background-grid{
    position:absolute;
    inset:0;

    opacity:.12;

    background-image:
        linear-gradient(
            rgba(255,255,255,.03) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.03) 1px,
            transparent 1px
        );

    background-size:
        52px 52px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.65),
            transparent 75%
        );
}

.background-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(100px);

    opacity:.16;
}

.glow-one{
    width:620px;
    height:620px;

    left:50%;
    top:-390px;

    transform:
        translateX(-50%);

    background:
        var(--accent);
}

.glow-two{
    width:460px;
    height:460px;

    right:-280px;
    top:580px;

    background:
        var(--accent);
}


/* GENERAL */

.section{
    width:min(
        var(--max-width),
        calc(100% - 42px)
    );

    margin:0 auto;
}

.section-block{
    padding-top:112px;
}

.eyebrow{
    display:block;

    margin-bottom:12px;

    color:
        var(--accent);

    font-size:11px;
    font-weight:800;

    letter-spacing:1.7px;
}

.section-heading{
    max-width:650px;

    margin-bottom:38px;
}

.section-heading h2,
.download-content h2,
.account-copy h2,
.support-copy h2{
    color:#fff;

    font-size:
        clamp(
            32px,
            5vw,
            49px
        );

    font-weight:650;

    line-height:1.06;

    letter-spacing:-1.8px;
}

.section-heading h2 span,
.download-content h2 span,
.account-copy h2 span{
    color:
        var(--accent);
}

.section-heading p,
.download-content p,
.account-copy p,
.support-copy p{
    margin-top:15px;

    color:
        var(--muted);

    font-size:14px;

    line-height:1.75;
}


/* HEADER */

.header{
    position:fixed;

    left:0;
    top:0;

    z-index:1000;

    width:100%;

    border-bottom:
        1px solid
        transparent;

    transition:
        background .2s ease,
        border-color .2s ease,
        backdrop-filter .2s ease;
}

.header.scrolled{
    border-color:
        var(--border);

    background:
        rgba(7,7,9,.78);

    backdrop-filter:
        blur(18px);
}

.header-inner{
    width:min(
        var(--max-width),
        calc(100% - 42px)
    );

    height:72px;

    margin:0 auto;

    display:flex;
    align-items:center;
}

.brand{
    display:flex;
    align-items:center;

    gap:10px;
}

.brand-logo{
    position:relative;

    width:35px;
    height:35px;

    overflow:hidden;

    border-radius:9px;
}

.brand-logo img{
    position:absolute;

    left:50%;
    top:50%;

    width:100%;
    height:100%;

    object-fit:cover;

    transform:
        translate(-50%,-50%)
        scale(2.93);

    filter:
        invert(1)
        brightness(1.17)
        contrast(1.1);
}

.brand-text,
.footer-brand > div:last-child{
    display:flex;
    flex-direction:column;
}

.brand-text strong,
.footer-brand strong{
    color:#fff;

    font-size:13px;
    font-weight:700;
}

.brand-text span,
.footer-brand span{
    margin-top:3px;

    color:#696974;

    font-size:6px;
    font-weight:800;

    letter-spacing:1.3px;
}

.desktop-nav{
    margin-left:auto;

    display:flex;
    align-items:center;

    gap:29px;
}

.desktop-nav a,
.footer-links a{
    color:#7f7f89;

    font-size:12px;
    font-weight:500;

    transition:.15s ease;
}

.desktop-nav a:hover,
.desktop-nav a.active,
.footer-links a:hover{
    color:#fff;
}

.header-actions{
    margin-left:30px;

    display:flex;
    align-items:center;

    gap:8px;
}

.account-button,
.header-download{
    height:34px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:0 14px;

    border-radius:8px;

    font-size:11px;
    font-weight:600;

    cursor:pointer;

    transition:.15s ease;
}

.account-button{
    border:
        1px solid
        var(--border);

    background:
        rgba(255,255,255,.025);

    color:#9999a2;
}

.account-button:hover{
    color:#fff;

    border-color:
        rgba(255,255,255,.14);
}

.header-download{
    border:
        1px solid
        var(--accent-border);

    background:
        var(--accent-soft);

    color:
        var(--accent);
}

.header-download:hover{
    background:
        rgba(var(--accent-rgb),.17);
}

.mobile-menu-button{
    width:36px;
    height:34px;

    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:5px;

    border:
        1px solid
        var(--border);

    border-radius:8px;

    background:
        var(--surface);

    cursor:pointer;
}

.mobile-menu-button span{
    width:14px;
    height:1px;

    background:#bbb;

    transition:.2s ease;
}

.mobile-menu-button.open span:first-child{
    transform:
        translateY(3px)
        rotate(45deg);
}

.mobile-menu-button.open span:last-child{
    transform:
        translateY(-3px)
        rotate(-45deg);
}

.mobile-menu{
    display:none;
}


/* HERO */

.hero{
    min-height:760px;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(430px,1.05fr);

    align-items:center;

    gap:65px;

    padding-top:120px;
}

.hero-content{
    padding-bottom:20px;
}

.hero-badge{
    width:max-content;

    display:flex;
    align-items:center;

    gap:8px;

    padding:7px 10px;

    border:
        1px solid
        var(--border);

    border-radius:100px;

    background:
        rgba(255,255,255,.018);

    color:#80808a;

    font-size:10px;
}

.status-dot{
    width:6px;
    height:6px;

    border-radius:50%;

    background:#777;

    box-shadow:none;
}

.status-dot.online{
    background:
        var(--success);

    box-shadow:
        0 0 8px
        rgba(89,217,142,.55);
}

.status-dot.offline{
    background:
        var(--danger);
}

.hero h1{
    max-width:620px;

    margin-top:23px;

    color:#fff;

    font-size:
        clamp(
            52px,
            7vw,
            80px
        );

    line-height:.96;

    font-weight:650;

    letter-spacing:-4px;
}

.hero h1 span{
    display:block;

    color:
        var(--accent);
}

.hero-description{
    max-width:590px;

    margin-top:23px;

    color:#85858f;

    font-size:15px;

    line-height:1.75;
}

.hero-actions{
    display:flex;
    align-items:center;

    gap:9px;

    margin-top:30px;
}

.button{
    height:42px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    padding:0 17px;

    border:
        1px solid
        var(--border);

    border-radius:9px;

    font-size:11px;
    font-weight:650;

    transition:
        transform .15s ease,
        border-color .15s ease,
        background .15s ease;
}

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

.button svg{
    width:14px;
    height:14px;
}

.button-primary{
    border-color:
        var(--accent-border);

    background:
        var(--accent-soft);

    color:
        var(--accent);
}

.button-primary:hover{
    background:
        rgba(var(--accent-rgb),.18);
}

.button-secondary{
    background:
        rgba(255,255,255,.025);

    color:#aaaab3;
}

.button-secondary:hover{
    border-color:
        rgba(255,255,255,.14);

    color:#fff;
}

.hero-meta{
    display:flex;

    gap:33px;

    margin-top:38px;
}

.hero-meta div{
    display:flex;
    flex-direction:column;

    gap:5px;
}

.hero-meta span{
    color:#474750;

    font-size:7px;
    font-weight:800;

    letter-spacing:1px;
}

.hero-meta strong{
    color:#92929c;

    font-size:10px;
    font-weight:600;
}


/* APP PREVIEW */

.hero-preview{
    position:relative;
}

.preview-glow{
    position:absolute;

    left:50%;
    top:50%;

    width:80%;
    height:80%;

    transform:
        translate(-50%,-50%);

    border-radius:50%;

    background:
        rgba(var(--accent-rgb),.15);

    filter:
        blur(80px);

    pointer-events:none;
}

.app-preview{
    position:relative;

    height:425px;

    display:grid;

    grid-template-columns:
        142px 1fr;

    overflow:hidden;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius:15px;

    background:#08080a;

    box-shadow:
        0 40px 100px
        rgba(0,0,0,.55);

    transform:
        perspective(1100px)
        rotateY(-2deg)
        rotateX(1deg);
}

.preview-sidebar{
    position:relative;

    padding:13px 9px;

    border-right:
        1px solid
        rgba(255,255,255,.06);

    background:#08080a;
}

.preview-brand{
    display:flex;
    align-items:center;

    gap:6px;

    padding:3px 5px 14px;
}

.preview-brand-icon{
    position:relative;

    width:25px;
    height:25px;

    overflow:hidden;
}

.preview-brand-icon img{
    position:absolute;

    left:50%;
    top:50%;

    width:100%;
    height:100%;

    transform:
        translate(-50%,-50%)
        scale(2.93);

    filter:
        invert(1);
}

.preview-brand div:last-child{
    display:flex;
    flex-direction:column;
}

.preview-brand strong{
    font-size:8px;
}

.preview-brand span{
    margin-top:2px;

    color:#6f6f79;

    font-size:4px;
    letter-spacing:.8px;
}

.preview-label{
    display:block;

    padding:
        4px
        7px
        6px;

    color:#4f4f59;

    font-size:5px;
    font-weight:800;

    letter-spacing:.8px;
}

.preview-other{
    margin-top:9px;
}

.preview-nav{
    height:30px;

    display:flex;
    align-items:center;

    gap:7px;

    padding:0 7px;

    border-radius:6px;

    color:#777781;

    font-size:7px;
}

.preview-nav span{
    width:9px;

    color:#55555f;

    text-align:center;
}

.preview-nav.active{
    color:#fff;

    background:
        var(--accent-soft);
}

.preview-license{
    position:absolute;

    left:9px;
    right:9px;
    bottom:10px;

    padding:8px;

    border:
        1px solid
        var(--accent-border);

    border-radius:7px;

    background:
        rgba(var(--accent-rgb),.055);
}

.preview-license div{
    display:flex;
    align-items:center;

    gap:5px;

    color:#fff;

    font-size:6px;
    font-weight:800;
}

.preview-license-dot{
    width:4px;
    height:4px;

    border-radius:50%;

    background:
        var(--success);
}

.preview-license small{
    display:block;

    margin-top:4px;

    color:#777781;

    font-size:5px;
}

.preview-main{
    min-width:0;
}

.preview-topbar{
    height:39px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 14px;

    border-bottom:
        1px solid
        rgba(255,255,255,.055);
}

.preview-topbar strong{
    font-size:7px;
}

.preview-controls{
    display:flex;

    gap:11px;

    color:#777;

    font-size:7px;
}

.preview-content{
    padding:21px 18px;
}

.preview-content h3{
    font-size:17px;

    letter-spacing:-.5px;
}

.preview-content > p{
    margin-top:4px;

    color:#6c6c76;

    font-size:6px;
}

.preview-card{
    margin-top:16px;

    overflow:hidden;

    border:
        1px solid
        rgba(255,255,255,.075);

    border-radius:9px;

    background:#0e0e11;
}

.preview-card-row{
    min-height:59px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:15px;

    padding:10px 12px;

    border-top:
        1px solid
        rgba(255,255,255,.045);
}

.preview-card-row:first-child{
    border-top:0;
}

.preview-card-row > div:first-child{
    display:flex;
    flex-direction:column;

    gap:3px;
}

.preview-card-row strong{
    font-size:7px;
}

.preview-card-row span{
    color:#666670;

    font-size:5px;
}

.fake-switch{
    width:30px;
    height:17px;

    padding:2px;

    border-radius:20px;

    background:#202026;
}

.fake-switch span{
    display:block;

    width:11px;
    height:11px;

    border-radius:50%;

    background:#73737e;
}

.fake-switch.active{
    background:
        var(--accent-soft);
}

.fake-switch.active span{
    margin-left:13px;

    background:
        var(--accent);
}

.fake-segment{
    display:flex;

    overflow:hidden;

    border:
        1px solid
        var(--border);

    border-radius:5px;
}

.fake-segment span{
    padding:6px 9px;

    color:#55555f;
}

.fake-segment .selected{
    background:
        var(--accent-soft);

    color:#fff;
}

.fake-slider{
    position:relative;

    width:105px;
    height:3px;

    border-radius:20px;

    background:#28282f;
}

.fake-slider span{
    position:absolute;

    left:55%;
    top:50%;

    width:9px;
    height:9px;

    transform:
        translate(-50%,-50%);

    border-radius:50%;

    background:#eee;
}

.preview-value{
    color:
        var(--accent);

    font-size:7px;
}


/* TRUST */

.trust-strip{
    min-height:100px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:33px;

    border-top:
        1px solid
        var(--border-light);

    border-bottom:
        1px solid
        var(--border-light);
}

.trust-item{
    display:flex;
    flex-direction:column;

    gap:4px;
}

.trust-item strong{
    color:#cfcfd4;

    font-size:11px;
}

.trust-item span{
    color:#55555f;

    font-size:9px;
}

.trust-divider{
    width:1px;
    height:28px;

    background:
        var(--border);
}


/* FEATURES */

.feature-grid{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:11px;
}

.feature-card{
    position:relative;

    min-height:270px;

    overflow:hidden;

    padding:21px;

    border:
        1px solid
        var(--border);

    border-radius:12px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.018),
            transparent 55%
        ),
        var(--surface);

    transition:
        transform .2s ease,
        border-color .2s ease;
}

.feature-card:hover{
    transform:
        translateY(-3px);

    border-color:
        rgba(255,255,255,.13);
}

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

.feature-icon{
    width:36px;
    height:36px;

    display:grid;
    place-items:center;

    margin-bottom:22px;

    border:
        1px solid
        var(--accent-border);

    border-radius:9px;

    background:
        var(--accent-soft);

    color:
        var(--accent);
}

.feature-icon svg{
    width:16px;
    height:16px;
}

.feature-tag{
    display:block;

    margin-bottom:8px;

    color:#55555f;

    font-size:7px;
    font-weight:800;

    letter-spacing:1px;
}

.feature-card h3{
    font-size:18px;
    font-weight:620;

    letter-spacing:-.4px;
}

.feature-card p{
    max-width:500px;

    margin-top:9px;

    color:#70707a;

    font-size:11px;

    line-height:1.65;
}

.feature-demo{
    width:max-content;

    display:flex;
    align-items:center;

    gap:17px;

    margin-top:22px;

    padding:10px;

    border:
        1px solid
        var(--border-light);

    border-radius:8px;

    background:
        var(--background-secondary);
}

.feature-demo > div:not(.feature-demo-arrow){
    display:flex;
    align-items:center;

    gap:10px;
}

.feature-demo span{
    color:#55555f;

    font-size:6px;
    font-weight:800;

    letter-spacing:.7px;
}

.feature-demo strong{
    min-width:27px;
    height:27px;

    display:grid;
    place-items:center;

    border:
        1px solid
        var(--accent-border);

    border-radius:5px;

    background:
        var(--accent-soft);

    color:
        var(--accent);

    font-size:9px;
}

.feature-demo-arrow{
    color:#45454e;
}

.config-example{
    margin-top:21px;

    padding:12px;

    overflow:hidden;

    border:
        1px solid
        var(--border-light);

    border-radius:8px;

    background:#09090c;

    color:#74747e;

    font-family:
        Consolas,
        monospace;

    font-size:8px;

    white-space:nowrap;

    text-overflow:ellipsis;
}


/* PRICING */

.pricing-grid{
    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:10px;
}

.pricing-card{
    position:relative;

    min-height:480px;

    display:flex;
    flex-direction:column;

    padding:20px;

    border:
        1px solid
        var(--border);

    border-radius:12px;

    background:
        var(--surface);
}

.pricing-card.featured{
    border-color:
        var(--accent-border);

    background:
        linear-gradient(
            180deg,
            rgba(var(--accent-rgb),.06),
            transparent 45%
        ),
        var(--surface);
}

.recommended{
    position:absolute;

    right:15px;
    top:15px;

    padding:5px 7px;

    border:
        1px solid
        var(--accent-border);

    border-radius:5px;

    background:
        var(--accent-soft);

    color:
        var(--accent);

    font-size:6px;
    font-weight:800;

    letter-spacing:.7px;
}

.plan-label{
    color:
        var(--accent);

    font-size:8px;
    font-weight:800;

    letter-spacing:1px;
}

.pricing-top h3{
    margin-top:11px;

    font-size:22px;
}

.pricing-top p{
    min-height:61px;

    margin-top:9px;

    color:#696973;

    font-size:10px;

    line-height:1.55;
}

.price{
    margin-top:21px;

    display:flex;
    flex-direction:column;

    gap:5px;
}

.price strong{
    font-size:29px;

    letter-spacing:-1px;
}

.price span{
    color:#55555f;

    font-size:8px;
}

.pricing-divider{
    height:1px;

    margin:20px 0;

    background:
        var(--border-light);
}

.pricing-card ul{
    list-style:none;

    display:flex;
    flex-direction:column;

    gap:12px;
}

.pricing-card li{
    position:relative;

    padding-left:17px;

    color:#82828c;

    font-size:9px;

    line-height:1.4;
}

.pricing-card li::before{
    content:"✓";

    position:absolute;

    left:0;

    color:
        var(--accent);

    font-size:8px;
}

.pricing-button{
    height:35px;

    margin-top:auto;

    display:flex;
    align-items:center;
    justify-content:center;

    border:
        1px solid
        var(--border);

    border-radius:8px;

    background:
        rgba(255,255,255,.02);

    color:#888892;

    font-size:9px;
    font-weight:650;

    transition:.15s ease;
}

.pricing-button:hover{
    color:#fff;

    border-color:
        rgba(255,255,255,.13);
}

.pricing-button.primary{
    border-color:
        var(--accent-border);

    background:
        var(--accent-soft);

    color:
        var(--accent);
}

.pricing-button.primary:hover{
    background:
        rgba(var(--accent-rgb),.17);
}


/* DOWNLOAD */

.download-card{
    position:relative;

    min-height:320px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:50px;

    overflow:hidden;

    padding:44px;

    border:
        1px solid
        var(--accent-border);

    border-radius:16px;

    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(var(--accent-rgb),.12),
            transparent 38%
        ),
        var(--surface);
}

.download-content{
    max-width:630px;
}

.download-meta{
    display:flex;

    gap:35px;

    margin-top:28px;
}

.download-meta div{
    display:flex;
    flex-direction:column;

    gap:5px;
}

.download-meta span{
    color:#4e4e57;

    font-size:7px;
    font-weight:800;

    letter-spacing:.9px;
}

.download-meta strong{
    color:#9999a3;

    font-size:10px;
}

.download-actions{
    min-width:220px;

    display:flex;
    flex-direction:column;

    align-items:stretch;

    gap:10px;
}

.download-main-button{
    width:100%;
}

.download-main-button.disabled{
    opacity:.45;

    pointer-events:none;
}

.download-note{
    color:#55555f;

    font-size:8px;

    text-align:center;

    line-height:1.5;
}


/* CHANGELOG */

.changelog-card{
    overflow:hidden;

    border:
        1px solid
        var(--border);

    border-radius:12px;

    background:
        var(--surface);
}

.changelog-header{
    min-height:95px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    padding:20px 22px;

    border-bottom:
        1px solid
        var(--border-light);
}

.changelog-version{
    color:
        var(--accent);

    font-size:7px;
    font-weight:800;

    letter-spacing:1px;
}

.changelog-header h3{
    margin-top:7px;

    font-size:18px;
}

.live-badge{
    padding:5px 7px;

    border:
        1px solid
        var(--border);

    border-radius:5px;

    color:#62626c;

    font-size:7px;
    font-weight:800;

    letter-spacing:.6px;
}

.live-badge.live{
    border-color:
        rgba(89,217,142,.23);

    background:
        rgba(89,217,142,.06);

    color:
        var(--success);
}

.changelog-list{
    padding:0 22px;
}

.changelog-entry{
    position:relative;

    min-height:52px;

    display:flex;
    align-items:center;

    padding-left:17px;

    border-top:
        1px solid
        var(--border-light);

    color:#85858f;

    font-size:10px;

    line-height:1.5;
}

.changelog-entry:first-child{
    border-top:0;
}

.changelog-entry::before{
    content:"";

    position:absolute;

    left:0;

    width:5px;
    height:5px;

    border-radius:50%;

    background:
        var(--accent);
}


/* ACCOUNT */

.account-card{
    min-height:410px;

    display:grid;

    grid-template-columns:
        1.3fr .7fr;

    align-items:center;

    gap:70px;

    padding:45px;

    border:
        1px solid
        var(--border);

    border-radius:16px;

    background:
        linear-gradient(
            145deg,
            rgba(var(--accent-rgb),.05),
            transparent 55%
        ),
        var(--surface);
}

.account-copy{
    max-width:620px;
}

.account-features{
    display:flex;

    flex-wrap:wrap;

    gap:7px;

    margin-top:23px;
}

.account-features span{
    padding:7px 9px;

    border:
        1px solid
        var(--border);

    border-radius:6px;

    background:
        rgba(255,255,255,.018);

    color:#72727c;

    font-size:8px;
}

.account-preview{
    padding:18px;

    border:
        1px solid
        var(--border);

    border-radius:11px;

    background:
        var(--background-secondary);
}

.account-preview-top{
    display:flex;
    align-items:center;

    gap:10px;

    padding-bottom:17px;

    border-bottom:
        1px solid
        var(--border-light);
}

.account-preview-avatar{
    width:37px;
    height:37px;

    display:grid;
    place-items:center;

    border:
        1px solid
        var(--accent-border);

    border-radius:9px;

    background:
        var(--accent-soft);

    color:
        var(--accent);

    font-size:9px;
    font-weight:800;
}

.account-preview-top div:last-child{
    display:flex;
    flex-direction:column;

    gap:3px;
}

.account-preview-top strong{
    font-size:10px;
}

.account-preview-top span{
    color:#5e5e68;

    font-size:8px;
}

.account-preview-row{
    min-height:48px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border-bottom:
        1px solid
        var(--border-light);
}

.account-preview-row span{
    color:#55555f;

    font-size:7px;
    font-weight:800;

    letter-spacing:.8px;
}

.account-preview-row strong{
    color:#a2a2ac;

    font-size:9px;
}

.account-active{
    color:
        var(--success) !important;
}

.account-preview-button{
    width:100%;
    height:34px;

    margin-top:14px;

    border:
        1px solid
        var(--border);

    border-radius:7px;

    background:
        rgba(255,255,255,.02);

    color:#55555f;

    font-size:8px;
}


/* SUPPORT */

.support-card{
    min-height:180px;

    display:flex;
    align-items:center;

    gap:20px;

    padding:30px;

    border:
        1px solid
        var(--border);

    border-radius:14px;

    background:
        var(--surface);
}

.support-icon{
    width:47px;
    height:47px;

    flex:0 0 47px;

    display:grid;
    place-items:center;

    border:
        1px solid
        var(--accent-border);

    border-radius:11px;

    background:
        var(--accent-soft);

    color:
        var(--accent);
}

.support-icon svg{
    width:19px;
    height:19px;
}

.support-copy{
    flex:1;
}

.support-copy .eyebrow{
    margin-bottom:6px;
}

.support-copy h2{
    font-size:26px;

    letter-spacing:-.7px;
}

.support-copy p{
    margin-top:7px;

    font-size:11px;
}

.support-button{
    flex:0 0 auto;
}


/* FOOTER */

.footer{
    margin-top:120px;

    border-top:
        1px solid
        var(--border-light);
}

.footer-inner{
    width:min(
        var(--max-width),
        calc(100% - 42px)
    );

    min-height:120px;

    margin:0 auto;

    display:flex;
    align-items:center;
}

.footer-brand{
    display:flex;
    align-items:center;

    gap:9px;
}

.footer-brand .brand-logo{
    width:30px;
    height:30px;
}

.footer-links{
    margin-left:auto;

    display:flex;

    gap:24px;
}

.copyright{
    margin-left:35px;

    color:#44444d;

    font-size:8px;
}


/* TOAST */

.toast{
    position:fixed;

    left:50%;
    bottom:24px;

    z-index:5000;

    max-width:
        min(
            420px,
            calc(100vw - 30px)
        );

    padding:10px 14px;

    border:
        1px solid
        var(--accent-border);

    border-radius:8px;

    background:
        rgba(12,12,15,.96);

    color:#eee;

    font-size:10px;

    opacity:0;

    pointer-events:none;

    transform:
        translate(-50%,8px);

    transition:.18s ease;
}

.toast.show{
    opacity:1;

    transform:
        translate(-50%,0);
}


/* REVEALS */

.reveal{
    opacity:0;

    transform:
        translateY(16px);

    transition:
        opacity .55s ease,
        transform .55s ease;
}

.reveal.visible{
    opacity:1;

    transform:none;
}


/* RESPONSIVE */

@media(max-width:1050px){

    .hero{
        grid-template-columns:1fr;

        padding-top:150px;
        padding-bottom:80px;
    }

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

    .hero-preview{
        max-width:720px;
    }

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

    .feature-large{
        grid-column:
            span 1;
    }

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

}


@media(max-width:820px){

    .desktop-nav{
        display:none;
    }

    .account-button{
        display:none;
    }

    .mobile-menu-button{
        display:flex;
    }

    .mobile-menu{
        position:absolute;

        left:0;
        top:72px;

        width:100%;

        display:flex;
        flex-direction:column;

        gap:4px;

        padding:10px 21px 17px;

        border-bottom:
            1px solid
            var(--border);

        background:
            rgba(7,7,9,.96);

        backdrop-filter:
            blur(18px);

        opacity:0;
        visibility:hidden;

        transform:
            translateY(-7px);

        transition:.18s ease;
    }

    .mobile-menu.open{
        opacity:1;
        visibility:visible;

        transform:none;
    }

    .mobile-menu a{
        padding:12px 8px;

        border-radius:7px;

        color:#8a8a94;

        font-size:12px;
    }

    .mobile-menu a:hover{
        color:#fff;

        background:
            rgba(255,255,255,.025);
    }

    .trust-strip{
        display:grid;

        grid-template-columns:
            1fr 1fr;

        padding:28px 0;

        gap:25px;
    }

    .trust-divider{
        display:none;
    }

    .account-card{
        grid-template-columns:1fr;

        gap:40px;
    }

    .download-card{
        align-items:flex-start;

        flex-direction:column;
    }

    .download-actions{
        width:100%;
    }

}


@media(max-width:620px){

    .section{
        width:
            calc(100% - 28px);
    }

    .header-inner,
    .footer-inner{
        width:
            calc(100% - 28px);
    }

    .header-download{
        display:none;
    }

    .hero{
        min-height:0;

        padding-top:130px;
    }

    .hero h1{
        font-size:53px;

        letter-spacing:-3px;
    }

    .hero-description{
        font-size:13px;
    }

    .hero-actions{
        align-items:stretch;

        flex-direction:column;
    }

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

    .hero-meta{
        display:grid;

        grid-template-columns:
            1fr 1fr;

        gap:20px;
    }

    .app-preview{
        height:360px;

        grid-template-columns:
            110px 1fr;
    }

    .preview-nav{
        font-size:6px;
    }

    .preview-content{
        padding:
            17px
            12px;
    }

    .preview-card-row{
        min-height:53px;

        padding:8px;
    }

    .fake-slider{
        width:70px;
    }

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

    .feature-card{
        min-height:240px;
    }

    .download-card,
    .account-card{
        padding:26px 20px;
    }

    .download-meta{
        display:grid;

        grid-template-columns:
            1fr 1fr;

        gap:20px;
    }

    .support-card{
        align-items:flex-start;

        flex-wrap:wrap;
    }

    .support-copy{
        width:
            calc(100% - 70px);
    }

    .support-button{
        width:100%;
    }

    .footer-inner{
        padding:28px 0;

        flex-wrap:wrap;

        gap:24px;
    }

    .footer-links{
        width:100%;

        order:3;

        margin-left:0;

        flex-wrap:wrap;
    }

    .copyright{
        margin-left:auto;
    }

}