@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');







:root {



    --bg: #03070d;



    --bg-2: #07101a;



    --panel: rgba(9, 18, 29, 0.72);



    --panel-2: rgba(12, 24, 38, 0.82);







    --blue: #45bfff;



    --blue-light: #8cddff;



    --blue-dark: #087fc1;







    --text: #f4f9ff;



    --muted: #8090a2;







    --border: rgba(112, 203, 255, 0.12);



    --border-hover: rgba(91, 201, 255, 0.4);







    --nav-height: 82px;



}







* {



    margin: 0;



    padding: 0;



    box-sizing: border-box;



}







html {



    scroll-behavior: smooth;



}







body {



    min-height: 100vh;



    background:



        radial-gradient(circle at 70% 10%, rgba(25, 147, 224, 0.08), transparent 30%),



        radial-gradient(circle at 15% 40%, rgba(26, 118, 182, 0.05), transparent 30%),



        var(--bg);







    color: var(--text);



    font-family: "Inter", sans-serif;



    overflow-x: hidden;



}







a {



    color: inherit;



    text-decoration: none;



}







/* NAVBAR */







.navbar {



    height: var(--nav-height);



    position: fixed;



    top: 0;



    left: 0;



    right: 0;







    z-index: 1000;







    background: rgba(3, 7, 13, 0.72);



    backdrop-filter: blur(22px);



    border-bottom: 1px solid rgba(255,255,255,0.05);



}







.nav-container {



    max-width: 1380px;



    height: 100%;



    margin: auto;



    padding: 0 42px;







    display: flex;



    align-items: center;



    justify-content: space-between;



}







.brand {



    display: flex;



    align-items: center;



    gap: 12px;



}







.brand-icon {



    width: 42px;



    height: 42px;







    display: grid;



    place-items: center;







    border-radius: 11px;







    background:



        linear-gradient(



            145deg,



            rgba(100, 214, 255, 0.2),



            rgba(17, 109, 173, 0.1)



        );







    border: 1px solid rgba(100, 210, 255, 0.35);







    color: var(--blue-light);



    font-size: 22px;



    font-weight: 900;







    box-shadow:



        inset 0 0 20px rgba(80, 194, 255, 0.08),



        0 0 30px rgba(52, 176, 255, 0.08);



}







.brand-text {



    display: flex;



    flex-direction: column;



    line-height: 1;



}







.brand-text span {



    font-size: 15px;



    font-weight: 900;



    letter-spacing: 2px;



}







.brand-text strong {



    margin-top: 5px;



    color: var(--blue);



    font-size: 9px;



    letter-spacing: 4px;



}







.nav-links {



    display: flex;



    align-items: center;



    gap: 38px;



}







.nav-links a {



    position: relative;



    color: #8795a5;







    font-size: 13px;



    font-weight: 600;







    transition: 0.25s ease;



}







.nav-links a::after {



    content: "";







    position: absolute;



    left: 0;



    bottom: -9px;







    width: 0;



    height: 2px;







    background: var(--blue);



    box-shadow: 0 0 10px var(--blue);







    transition: 0.25s ease;



}







.nav-links a:hover {



    color: white;



}







.nav-links a:hover::after {



    width: 100%;



}







.nav-download {



    padding: 12px 19px;







    border-radius: 9px;



    border: 1px solid rgba(78, 196, 255, 0.4);







    color: var(--blue-light);



    background: rgba(48, 172, 239, 0.08);







    font-size: 12px;



    font-weight: 700;







    transition: 0.25s ease;



}







.nav-download:hover {



    transform: translateY(-2px);







    background: rgba(48, 172, 239, 0.15);







    box-shadow:



        0 0 25px rgba(44, 174, 246, 0.12);



}







/* HERO */







.hero {



    min-height: 100vh;







    max-width: 1500px;



    margin: auto;







    padding:



        calc(var(--nav-height) + 90px)



        55px



        100px;







    position: relative;







    display: grid;



    grid-template-columns: 0.9fr 1.1fr;



    align-items: center;



    gap: 70px;



}







.hero::before {



    content: "";







    position: absolute;



    inset: 0;







    pointer-events: none;







    background-image:



        linear-gradient(rgba(93, 193, 255, 0.025) 1px, transparent 1px),



        linear-gradient(90deg, rgba(93, 193, 255, 0.025) 1px, transparent 1px);







    background-size: 55px 55px;







    mask-image:



        linear-gradient(



            to bottom,



            black,



            transparent 85%



        );



}







.hero-content {



    position: relative;



    z-index: 5;



}







.hero-badge {



    width: fit-content;







    display: flex;



    align-items: center;



    gap: 9px;







    padding: 8px 13px;







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



    border-radius: 100px;







    background: rgba(31, 137, 199, 0.05);







    color: #a9b7c5;







    font-size: 10px;



    font-weight: 700;



    letter-spacing: 1.5px;



}







.status-dot {



    width: 7px;



    height: 7px;







    border-radius: 50%;







    background: #45e589;







    box-shadow: 0 0 10px #45e589;



}







.hero h1 {



    margin-top: 28px;







    font-size: clamp(58px, 6.5vw, 105px);



    line-height: 0.87;







    letter-spacing: -6px;



    font-weight: 900;



}







.hero h1 span {



    color: transparent;







    background:



        linear-gradient(



            90deg,



            #2fa9f3,



            #8cddff



        );







    background-clip: text;



    -webkit-background-clip: text;







    filter:



        drop-shadow(



            0 0 28px rgba(58, 181, 255, 0.15)



        );



}







.hero-description {



    max-width: 600px;







    margin-top: 32px;







    color: #8595a6;







    font-size: 15px;



    line-height: 1.9;



}







.hero-buttons {



    margin-top: 36px;







    display: flex;



    align-items: center;



    gap: 13px;



}







.button {



    min-height: 51px;







    padding: 0 23px;







    display: inline-flex;



    align-items: center;



    justify-content: center;



    gap: 14px;







    border-radius: 9px;







    font-size: 12px;



    font-weight: 800;







    transition:



        transform 0.25s ease,



        box-shadow 0.25s ease,



        border 0.25s ease;



}







.button:hover {



    transform: translateY(-3px);



}







.button-primary {



    color: #00111d;







    background:



        linear-gradient(



            135deg,



            #79d5ff,



            #28a8f0



        );







    box-shadow:



        0 10px 35px rgba(35, 161, 232, 0.18);



}







.button-primary:hover {



    box-shadow:



        0 15px 45px rgba(35, 161, 232, 0.3);



}







.button-secondary {



    color: #c6d2dc;







    border: 1px solid rgba(255,255,255,0.09);







    background: rgba(255,255,255,0.025);



}







.button-secondary:hover {



    border-color: rgba(82, 194, 255, 0.25);



}







.hero-info {



    margin-top: 52px;







    display: flex;



    align-items: center;



    gap: 23px;



}







.hero-info div:not(.info-line) {



    display: flex;



    flex-direction: column;



    gap: 5px;



}







.hero-info strong {



    font-size: 12px;



    font-weight: 700;



}







.hero-info span {



    color: #687787;



    font-size: 9px;



    text-transform: uppercase;



    letter-spacing: 1.3px;



}







.info-line {



    width: 1px;



    height: 30px;



    background: rgba(255,255,255,0.08);



}







/* HERO GLOWS */







.hero-glow {



    position: absolute;







    border-radius: 50%;







    filter: blur(100px);







    pointer-events: none;



}







.hero-glow-one {



    width: 500px;



    height: 500px;







    right: 2%;



    top: 15%;







    background: rgba(28, 158, 235, 0.09);



}







.hero-glow-two {



    width: 300px;



    height: 300px;







    left: -10%;



    bottom: 5%;







    background: rgba(20, 120, 210, 0.05);



}







/* APP PREVIEW */







.app-preview {



    position: relative;







    z-index: 4;







    perspective: 1200px;



}







.preview-glow {



    position: absolute;







    width: 70%;



    height: 70%;







    left: 15%;



    top: 20%;







    border-radius: 50%;







    background: rgba(28, 159, 238, 0.16);







    filter: blur(90px);







    pointer-events: none;



}







.fake-window {



    position: relative;







    overflow: hidden;







    min-height: 500px;







    border-radius: 14px;







    border: 1px solid rgba(91, 194, 255, 0.17);







    background: #07101a;







    box-shadow:



        0 50px 100px rgba(0,0,0,0.55),



        0 0 70px rgba(34, 163, 238, 0.07);







    transform:



        rotateY(-4deg)



        rotateX(2deg);



}







.window-topbar {



    height: 49px;







    padding: 0 17px;







    display: flex;



    align-items: center;



    justify-content: space-between;







    border-bottom: 1px solid rgba(255,255,255,0.05);







    background: #08121d;



}







.window-brand {



    display: flex;



    align-items: center;



    gap: 9px;







    color: #dce8f2;







    font-size: 9px;



    font-weight: 800;



    letter-spacing: 1.5px;



}







.mini-logo {



    width: 24px;



    height: 24px;







    display: grid;



    place-items: center;







    border-radius: 6px;







    color: var(--blue-light);







    border: 1px solid rgba(84, 197, 255, 0.25);







    background: rgba(67, 181, 239, 0.07);



}







.window-controls {



    display: flex;



    gap: 18px;







    color: #617080;







    font-size: 12px;



}







.window-body {



    min-height: 450px;







    display: grid;



    grid-template-columns: 67px 1fr;



}







.fake-sidebar {



    padding-top: 22px;







    display: flex;



    flex-direction: column;



    align-items: center;



    gap: 17px;







    background: #060d15;







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



}







.sidebar-logo {



    width: 31px;



    height: 31px;







    margin-bottom: 15px;







    display: grid;



    place-items: center;







    border-radius: 7px;







    color: var(--blue);







    font-size: 13px;



    font-weight: 900;







    border: 1px solid rgba(80, 194, 255, 0.2);



}







.sidebar-item {



    width: 25px;



    height: 25px;







    border-radius: 6px;







    background: rgba(255,255,255,0.035);



}







.sidebar-item.active {



    background: rgba(62, 181, 243, 0.13);







    border:



        1px solid rgba(69, 189, 250, 0.18);







    box-shadow:



        0 0 15px rgba(51, 177, 240, 0.05);



}







.fake-dashboard {



    padding: 31px;



}







.dashboard-title {



    display: flex;



    justify-content: space-between;



    align-items: center;



}







.dashboard-title span {



    color: var(--blue);







    font-size: 8px;



    font-weight: 800;







    letter-spacing: 2px;



}







.dashboard-title h3 {



    margin-top: 5px;







    font-size: 18px;



}







.online-pill {



    padding: 7px 10px;







    display: flex;



    align-items: center;



    gap: 6px;







    border-radius: 100px;







    color: #75e6a4;







    font-size: 7px;



    font-weight: 800;







    background: rgba(58, 211, 124, 0.05);







    border:



        1px solid rgba(66, 213, 128, 0.13);



}







.online-pill span {



    width: 5px;



    height: 5px;







    border-radius: 50%;







    background: #50df8d;







    box-shadow:



        0 0 7px #50df8d;



}







.dashboard-cards {



    margin-top: 27px;







    display: grid;



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



    gap: 10px;



}







.dashboard-card {



    min-height: 112px;







    padding: 15px;







    display: flex;



    flex-direction: column;







    border-radius: 9px;







    background:



        linear-gradient(



            145deg,



            rgba(15, 31, 48, 0.9),



            rgba(8, 19, 31, 0.9)



        );







    border:



        1px solid rgba(255,255,255,0.055);



}







.dashboard-card > span {



    color: #657789;







    font-size: 7px;



    font-weight: 700;







    letter-spacing: 1px;



}







.dashboard-card strong {



    margin-top: 13px;







    font-size: 14px;



}







.dashboard-card small {



    margin-top: 7px;







    color: #647486;







    font-size: 7px;



}







.card-status {



    width: fit-content;







    margin-top: 8px;



    padding: 4px 6px;







    border-radius: 4px;







    color: #5de99b;







    background: rgba(61, 221, 130, 0.06);







    font-size: 6px;



    font-weight: 800;



}







.performance-panel {



    margin-top: 13px;







    min-height: 190px;







    padding: 20px;







    border-radius: 9px;







    border:



        1px solid rgba(255,255,255,0.05);







    background:



        linear-gradient(



            145deg,



            rgba(10, 23, 37, 0.9),



            rgba(6, 15, 25, 0.9)



        );



}







.panel-heading {



    display: flex;



    flex-direction: column;



    gap: 5px;



}







.panel-heading span {



    color: var(--blue);







    font-size: 7px;



    letter-spacing: 1.5px;



}







.panel-heading strong {



    font-size: 10px;



}







.performance-bars {



    margin-top: 25px;







    display: flex;



    flex-direction: column;



    gap: 16px;



}







.bar {



    height: 8px;







    overflow: hidden;







    border-radius: 100px;







    background: rgba(255,255,255,0.04);



}







.bar span {



    display: block;







    height: 100%;







    border-radius: inherit;







    background:



        linear-gradient(



            90deg,



            #168fda,



            #65caff



        );







    box-shadow:



        0 0 15px rgba(56, 181, 247, 0.3);



}







.bar:nth-child(1) span {



    width: 92%;



}







.bar:nth-child(2) span {



    width: 78%;



}







.bar:nth-child(3) span {



    width: 86%;



}







/* FEATURES */







.features {



    position: relative;







    max-width: 1250px;







    margin: auto;







    padding: 130px 40px;



}







.section-heading {



    max-width: 700px;







    margin-bottom: 60px;



}







.section-heading > span {



    color: var(--blue);







    font-size: 10px;



    font-weight: 800;







    letter-spacing: 2.5px;



}







.section-heading h2 {



    margin-top: 15px;







    font-size: clamp(37px, 4vw, 58px);







    line-height: 1.05;







    letter-spacing: -2.5px;



}







.section-heading p {



    margin-top: 20px;







    color: #7d8d9e;







    font-size: 14px;



}







.feature-grid {



    display: grid;



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







    gap: 14px;



}







.feature-card {



    position: relative;







    min-height: 245px;







    padding: 30px;







    overflow: hidden;







    border-radius: 12px;







    background:



        linear-gradient(



            145deg,



            rgba(10, 23, 37, 0.75),



            rgba(6, 14, 24, 0.75)



        );







    border:



        1px solid rgba(255,255,255,0.055);







    transition:



        transform 0.3s ease,



        border-color 0.3s ease,



        background 0.3s ease;



}







.feature-card::after {



    content: "";







    position: absolute;







    width: 130px;



    height: 130px;







    right: -60px;



    top: -60px;







    border-radius: 50%;







    background: rgba(49, 178, 246, 0.08);







    filter: blur(40px);







    opacity: 0;







    transition: opacity 0.3s ease;



}







.feature-card:hover {



    transform: translateY(-7px);







    border-color:



        rgba(72, 191, 252, 0.2);







    background:



        linear-gradient(



            145deg,



            rgba(12, 29, 47, 0.9),



            rgba(6, 15, 25, 0.9)



        );



}







.feature-card:hover::after {



    opacity: 1;



}







.feature-icon {



    width: 45px;



    height: 45px;







    display: grid;



    place-items: center;







    border-radius: 9px;







    color: var(--blue);







    font-size: 18px;







    border:



        1px solid rgba(80, 195, 255, 0.13);







    background:



        rgba(48, 174, 241, 0.06);



}







.feature-card h3 {



    margin-top: 27px;







    font-size: 17px;



}







.feature-card p {



    margin-top: 12px;







    color: #718294;







    font-size: 12px;



    line-height: 1.8;



}







/* DOWNLOAD */







.download-section {



    position: relative;







    max-width: 1250px;







    margin: auto;







    padding: 80px 40px 150px;



}







.download-box {



    position: relative;







    padding: 90px 40px;







    overflow: hidden;







    text-align: center;







    border-radius: 18px;







    border:



        1px solid rgba(70, 191, 252, 0.14);







    background:



        linear-gradient(



            145deg,



            rgba(11, 27, 44, 0.85),



            rgba(5, 14, 24, 0.9)



        );







    box-shadow:



        0 30px 100px rgba(0,0,0,0.25);



}







.download-box::before {



    content: "";







    position: absolute;







    inset: 0;







    pointer-events: none;







    background:



        radial-gradient(



            circle at 50% 0%,



            rgba(48, 176, 245, 0.12),



            transparent 45%



        );



}







.download-label {



    position: relative;







    color: var(--blue);







    font-size: 9px;



    font-weight: 800;







    letter-spacing: 2.5px;



}







.download-box h2 {



    position: relative;







    margin-top: 17px;







    font-size: clamp(40px, 5vw, 67px);







    letter-spacing: -3px;



}







.download-box h2 span {



    color: var(--blue);



}







.download-box p {



    position: relative;







    max-width: 530px;







    margin: 20px auto 0;







    color: #7e8fa0;







    font-size: 13px;



    line-height: 1.8;



}







.download-button {



    position: relative;







    margin-top: 31px;



}







.download-details {



    position: relative;







    margin-top: 20px;







    color: #596a7a;







    font-size: 9px;



}







/* FOOTER */







footer {



    border-top:



        1px solid rgba(255,255,255,0.05);







    background: #02060b;



}







.footer-inner {



    max-width: 1250px;







    margin: auto;



    padding: 45px 40px;







    display: flex;



    align-items: center;



    justify-content: space-between;



}







.footer-brand {



    display: flex;



    align-items: center;



    gap: 12px;



}







.footer-brand > div:last-child {



    display: flex;



    flex-direction: column;



    gap: 5px;



}







.footer-brand strong {



    font-size: 11px;



    letter-spacing: 1px;



}







.footer-brand span {



    color: #5e6d7c;



    font-size: 8px;



}







.footer-links {



    display: flex;



    gap: 30px;



}







.footer-links a {



    color: #687889;







    font-size: 10px;







    transition: color 0.2s ease;



}







.footer-links a:hover {



    color: var(--blue);



}







.copyright {



    color: #465361;



    font-size: 9px;



}







/* RESPONSIVE */







@media (max-width: 1050px) {







    .hero {



        grid-template-columns: 1fr;







        padding-top:



            calc(var(--nav-height) + 80px);



    }







    .hero-content {



        max-width: 760px;



    }







    .app-preview {



        max-width: 800px;



    }







    .feature-grid {



        grid-template-columns:



            repeat(2, 1fr);



    }



}







@media (max-width: 750px) {







    .nav-container {



        padding: 0 20px;



    }







    .nav-links {



        display: none;



    }







    .hero {



        padding-left: 22px;



        padding-right: 22px;



    }







    .hero h1 {



        letter-spacing: -4px;



    }







    .hero-buttons {



        align-items: stretch;



        flex-direction: column;



    }







    .button {



        width: 100%;



    }







    .hero-info {



        gap: 14px;



    }







    .fake-window {



        min-height: 400px;



    }







    .window-body {



        grid-template-columns: 48px 1fr;



    }







    .fake-dashboard {



        padding: 18px;



    }







    .dashboard-cards {



        grid-template-columns: 1fr;



    }







    .dashboard-card:nth-child(2),



    .dashboard-card:nth-child(3),



    .performance-panel {



        display: none;



    }







    .feature-grid {



        grid-template-columns: 1fr;



    }







    .features,



    .download-section {



        padding-left: 22px;



        padding-right: 22px;



    }







    .download-box {



        padding: 65px 22px;



    }







    .footer-inner {



        align-items: flex-start;



        flex-direction: column;



        gap: 30px;







        padding-left: 22px;



        padding-right: 22px;



    }



}



/* REAL GXSTI APP PREVIEW */

.real-app-preview {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}



.real-app-window {

    position: relative;

    width: 100%;

    max-width: 820px;

    padding: 7px;

    border-radius: 17px;

    background: linear-gradient(145deg, rgba(55,191,255,.20), rgba(10,25,40,.10));

    border: 1px solid rgba(65,190,255,.30);

    box-shadow: 0 45px 100px rgba(0,0,0,.55), 0 0 80px rgba(31,164,239,.10);

    transform: perspective(1200px) rotateY(-3deg) rotateX(1deg);

    transition: transform .4s ease, box-shadow .4s ease;

}



.real-app-window:hover {

    transform: perspective(1200px) rotateY(0) rotateX(0) translateY(-7px) scale(1.01);

    box-shadow: 0 55px 120px rgba(0,0,0,.60), 0 0 100px rgba(38,177,255,.18);

}



.dashboard-screenshot {

    position: relative;

    z-index: 2;

    display: block;

    width: 100%;

    height: auto;

    border-radius: 11px;

    user-select: none;

    pointer-events: none;

}



.app-preview-badge {

    position: absolute;

    z-index: 10;

    top: -17px;

    right: 22px;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 9px 13px;

    border-radius: 100px;

    background: rgba(4,15,25,.92);

    border: 1px solid rgba(61,213,139,.25);

    color: #69eaa4;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;

    backdrop-filter: blur(15px);

    box-shadow: 0 10px 30px rgba(0,0,0,.35);

}



.preview-bottom-glow {

    position: absolute;

    z-index: -1;

    width: 75%;

    height: 80px;

    left: 12.5%;

    bottom: -30px;

    background: rgba(35,173,247,.22);

    filter: blur(55px);

    border-radius: 50%;

    pointer-events: none;

}



@media (max-width: 750px) {

    .real-app-window {

        transform: none;

        padding: 4px;

        border-radius: 12px;

    }



    .real-app-window:hover {

        transform: translateY(-3px);

    }



    .dashboard-screenshot {

        border-radius: 8px;

    }



    .app-preview-badge {

        top: -14px;

        right: 10px;

        font-size: 7px;

        padding: 7px 10px;

    }

}

/* =========================================
   GXSTI BRAND LOGO
========================================= */

.brand-icon.brand-logo {
    overflow: hidden;
    padding: 3px;
    background:
        radial-gradient(circle at 50% 35%, rgba(100, 214, 255, 0.12), transparent 65%),
        rgba(5, 14, 24, 0.72);
}

.brand-icon.brand-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter:
        drop-shadow(0 0 8px rgba(69, 191, 255, 0.28))
        drop-shadow(0 0 18px rgba(69, 191, 255, 0.10));
    transition:
        transform 0.25s ease,
        filter 0.25s ease;
}

.brand:hover .brand-icon.brand-logo img,
.footer-brand:hover .brand-icon.brand-logo img {
    transform: scale(1.06);
    filter:
        drop-shadow(0 0 10px rgba(69, 191, 255, 0.42))
        drop-shadow(0 0 22px rgba(69, 191, 255, 0.16));
}

.footer-brand .brand-icon.brand-logo {
    flex: 0 0 auto;
}

/* =========================================
   FINAL ALIGNMENT + READABILITY FIX
========================================= */

#home {
    position: absolute;
    top: 0;
    left: 0;
}

.nav-container {
    width: 100%;
    max-width: 1380px;
    margin-left: auto;
    margin-right: auto;
}

.hero {
    width: 100%;
}

.hero-content {
    transform: none !important;
}

.brand,
.brand-text,
.nav-links,
.nav-download {
    transform: none;
}

.brand-text span,
.brand-text strong,
.nav-links a,
.nav-download,
.hero-badge,
.hero h1,
.hero-description,
.hero-info,
.section-heading,
.feature-card,
.download-box,
.footer-inner {
    font-style: normal;
}

.brand-text span,
.brand-text strong,
.nav-links a,
.nav-download,
.hero-badge,
.hero h1,
.hero-description,
.feature-card h3,
.feature-card p,
.download-box,
.footer-brand,
.footer-links {
    writing-mode: horizontal-tb;
}

.real-app-window {
    transform: none;
}

.real-app-window:hover {
    transform: translateY(-5px) scale(1.005);
}

.dashboard-screenshot {
    transform: none;
}

@media (min-width: 1051px) {
    .hero {
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    }

    .hero-content {
        width: 100%;
        max-width: 650px;
        justify-self: end;
    }

    .app-preview {
        width: 100%;
        max-width: 820px;
        justify-self: start;
    }
}

@media (max-width: 1050px) {
    .hero {
        text-align: center;
        justify-items: center;
    }

    .hero-content {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-badge {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons,
    .hero-info {
        justify-content: center;
    }

    .app-preview {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}