:root {
            --bg0: #070A12;
            --bg1: #0B1020;
            --card: rgba(255, 255, 255, .06);
            --card2: rgba(255, 255, 255, .08);
            --stroke: rgba(255, 255, 255, .10);
            --text: #EAF0FF;
            --muted: rgba(234, 240, 255, .72);
            --muted2: rgba(234, 240, 255, .55);
            --brand1: #7C3AED;
            --brand2: #22D3EE;
            --brand3: #F97316;
            --ok: #34D399;
            --warn: #FBBF24;
            --bad: #FB7185;
            --shadow: 0 18px 45px rgba(0, 0, 0, .35);
            --radius: 18px;
            --radius2: 26px;
            --max: 1140px;
            --ring: 0 0 0 6px rgba(124, 58, 237, .22);
        }

        * {
            box-sizing: border-box
        }

        html,
        body {
            height: 100%
        }

        body {
            margin: 0;
            font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
            color: var(--text);
            background:
                radial-gradient(1200px 800px at 25% 18%, rgba(124, 58, 237, .25), transparent 60%),
                radial-gradient(900px 700px at 80% 28%, rgba(34, 211, 238, .18), transparent 60%),
                radial-gradient(900px 700px at 55% 92%, rgba(249, 115, 22, .12), transparent 60%),
                linear-gradient(180deg, var(--bg0), var(--bg1));
            overflow-x: hidden;
        }

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

        .container {
            max-width: var(--max);
            margin: 0 auto;
            padding: 0 20px
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 12px 16px;
            min-height: 44px;
            border-radius: 14px;
            border: 1px solid var(--stroke);
            background: rgba(255, 255, 255, .05);
            color: var(--text);
            cursor: pointer;
            transition: .2s transform, .2s background, .2s border-color;
            user-select: none;
            font-weight: 750;
            letter-spacing: .2px;
            white-space: nowrap;
        }

        .btn:hover {
            transform: translateY(-1px);
            background: rgba(255, 255, 255, .08);
            border-color: rgba(255, 255, 255, .16)
        }

        .btn:focus {
            outline: none;
            box-shadow: var(--ring)
        }

        .btn.primary {
            background: linear-gradient(135deg, rgba(124, 58, 237, .98), rgba(34, 211, 238, .88));
            border-color: rgba(255, 255, 255, .14);
            box-shadow: 0 16px 40px rgba(124, 58, 237, .22);
        }

        .btn.primary:hover {
            background: linear-gradient(135deg, rgba(124, 58, 237, 1), rgba(34, 211, 238, .96))
        }

        .btn.ghost {
            background: transparent
        }

        .btn.small {
            padding: 10px 12px;
            min-height: 38px;
            font-size: 13.5px;
            border-radius: 12px
        }

        /* Header */
        header {
            position: sticky;
            top: 0;
            z-index: 50;
            backdrop-filter: blur(12px);
            background: rgba(7, 10, 18, .55);
            border-bottom: 1px solid rgba(255, 255, 255, .06);
        }

        .nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 0;
            gap: 14px;
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 900;
            letter-spacing: .2px;
            white-space: nowrap;
        }
        

        .logo {
            width: 36px;
            height: 36px;
            border-radius: 12px;
            background: linear-gradient(135deg, rgba(124, 58, 237, 1), rgba(34, 211, 238, 1));
            box-shadow: 0 14px 34px rgba(34, 211, 238, .12);
            position: relative;
            overflow: hidden;
            flex: 0 0 auto;
        }

        .logo:after {
            content: "";
            position: absolute;
            inset: -30% -30%;
            background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .52), transparent 45%);
            transform: rotate(18deg);
            opacity: .55;
        }

        nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            gap: 16px;
            align-items: center;
        }

        nav a {
            color: var(--muted);
            font-weight: 700;
            font-size: 14px;
            padding: 10px 10px;
            border-radius: 12px;
            transition: .2s background, .2s color;
            white-space: nowrap;
        }

        nav a:hover {
            background: rgba(255, 255, 255, .06);
            color: var(--text)
        }

        .navActions {
            display: flex;
            gap: 10px;
            align-items: center
        }

        .burger {
            display: none
        }

        .mobileMenu {
            display: none;
            padding: 10px 0 16px;
        }

        .mobileMenu a {
            display: block;
            padding: 12px 12px;
            border-radius: 12px;
            color: var(--muted);
            border: 1px solid rgba(255, 255, 255, .06);
            background: rgba(255, 255, 255, .03);
            margin-top: 10px;
            font-weight: 750;
        }

        /* Hero */
        .hero {
            padding: 56px 0 26px;
        }

        .heroGrid {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: 22px;
            align-items: stretch;
        }

        .pill {
            display: inline-flex;
            gap: 10px;
            align-items: center;
            padding: 8px 12px;
            border-radius: 999px;
            background: rgba(255, 255, 255, .06);
            border: 1px solid rgba(255, 255, 255, .10);
            color: var(--muted);
            font-size: 13px;
            letter-spacing: .2px;
        }

        .dot {
            width: 9px;
            height: 9px;
            border-radius: 99px;
            background: linear-gradient(135deg, var(--brand1), var(--brand2));
            box-shadow: 0 0 0 4px rgba(124, 58, 237, .15);
        }

        .h1 {
            font-size: clamp(34px, 4.6vw, 58px);
            line-height: 1.03;
            margin: 12px 0 14px;
            letter-spacing: -1.1px;
        }

        .lead {
            color: var(--muted);
            font-size: clamp(15px, 1.6vw, 18px);
            line-height: 1.7;
            margin: 0 0 16px;
            max-width: 62ch;
        }

        .heroActions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
            margin-top: 14px;
        }

        .miniNote {
            margin-top: 14px;
            display: flex;
            gap: 10px;
            align-items: flex-start;
            padding: 12px 12px;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, .10);
            background: rgba(255, 255, 255, .04);
            color: var(--muted);
            font-size: 13.5px;
            line-height: 1.55;
        }

        .miniNote i {
            width: 18px;
            height: 18px;
            border-radius: 6px;
            background: rgba(251, 191, 36, .14);
            border: 1px solid rgba(251, 191, 36, .20);
            display: grid;
            place-items: center;
            place-content: center;
            flex: 0 0 auto;
            margin-top: 1px;
            font-style: normal;
            font-weight: 900;
            color: rgba(255, 255, 255, .9);
        }

        /* Right card */
        .heroCard {
            border-radius: var(--radius2);
            border: 1px solid rgba(255, 255, 255, .10);
            background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
            box-shadow: var(--shadow);
            overflow: hidden;
        }

        .heroCardTop {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 14px 10px;
            border-bottom: 1px solid rgba(255, 255, 255, .08);
            background: rgba(255, 255, 255, .03);
        }

        .miniDots {
            display: flex;
            gap: 7px;
            align-items: center
        }

        .miniDots i {
            width: 10px;
            height: 10px;
            border-radius: 99px;
            display: inline-block;
            background: rgba(255, 255, 255, .14);
        }

        .heroCardBody {
            padding: 14px
        }

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

        .stat {
            border: 1px solid rgba(255, 255, 255, .10);
            background: rgba(255, 255, 255, .05);
            border-radius: 18px;
            padding: 12px;
            min-height: 92px;
        }

        .stat .t {
            color: var(--muted2);
            font-size: 12px;
            font-weight: 850
        }

        .stat .v {
            font-size: 22px;
            font-weight: 950;
            letter-spacing: -.6px;
            margin-top: 6px
        }

        .stat .d {
            color: var(--muted);
            font-size: 12.5px;
            line-height: 1.45;
            margin-top: 6px
        }

        .gradLine {
            height: 10px;
            border-radius: 999px;
            overflow: hidden;
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .10);
            margin-top: 10px;
        }

        .gradLine>div {
            height: 100%;
            width: 86%;
            background: linear-gradient(90deg, var(--brand1), var(--brand2));
            border-radius: 999px;
        }

        /* Sections */
        section {
            padding: 44px 0;
        }

        .sectionHead {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            gap: 18px;
            margin-bottom: 16px;
        }

        .sectionHead h2 {
            margin: 0;
            font-size: clamp(22px, 2.7vw, 34px);
            letter-spacing: -.6px;
        }

        .sectionHead p {
            margin: 0;
            color: var(--muted);
            max-width: 68ch;
            line-height: 1.65;
        }

        /* Feature lists (bullet cards) */
        .twoCol {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
            align-items: stretch;
        }

        .panel {
            border: 1px solid rgba(255, 255, 255, .10);
            background: rgba(255, 255, 255, .05);
            border-radius: var(--radius2);
            padding: 18px;
            box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
        }

        .panelTop {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 14px;
            margin-bottom: 12px;
        }

        .panelTop .cap {
            display: flex;
            gap: 10px;
            align-items: center;
            font-weight: 950;
            letter-spacing: -.2px;
        }

        .chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 999px;
            background: rgba(34, 211, 238, .12);
            border: 1px solid rgba(34, 211, 238, .22);
            color: rgba(234, 240, 255, .9);
            font-weight: 900;
            font-size: 12.5px;
            white-space: nowrap;
        }

        .ic {
            width: 40px;
            height: 40px;
            border-radius: 14px;
            background: rgba(124, 58, 237, .16);
            border: 1px solid rgba(124, 58, 237, .26);
            display: grid;
            place-items: center;
            flex: 0 0 auto;
        }

        .list {
            margin: 0;
            padding: 0;
            list-style: none;
            display: grid;
            gap: 10px;
            color: var(--muted);
            line-height: 1.65;
            font-size: 14.2px;
        }

        .list li {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            padding: 10px 10px;
            border-radius: 16px;
            background: rgba(255, 255, 255, .03);
            border: 1px solid rgba(255, 255, 255, .07);
        }

        .list i {
            width: 20px;
            height: 20px;
            border-radius: 7px;
            background: rgba(52, 211, 153, .14);
            border: 1px solid rgba(52, 211, 153, .22);
            display: grid;
            place-items: center;
            flex: 0 0 auto;
            margin-top: 2px;
            font-style: normal;
            font-weight: 900;
            place-content: center;
        }

        .list .sub {
            color: var(--muted2);
            font-size: 12.6px;
            margin-top: 4px;
            line-height: 1.55
        }

        /* Premium highlight */
        .highlight {
            border: 1px solid rgba(34, 211, 238, .22);
            background:
                radial-gradient(800px 500px at 15% 20%, rgba(34, 211, 238, .14), transparent 55%),
                radial-gradient(700px 460px at 85% 30%, rgba(124, 58, 237, .14), transparent 55%),
                rgba(255, 255, 255, .04);
            border-radius: var(--radius2);
            padding: 18px;
            box-shadow: var(--shadow);
            overflow: hidden;
            position: relative;
        }

        .highlight:after {
            content: "";
            position: absolute;
            inset: -30%;
            background: radial-gradient(circle at 60% 40%, rgba(255, 255, 255, .08), transparent 55%);
            transform: rotate(12deg);
            pointer-events: none;
            opacity: .8;
        }

        .highlightInner {
            position: relative;
            z-index: 1
        }

        .hlTop {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 14px;
            margin-bottom: 12px;
        }

        .hlTop h3 {
            margin: 0;
            font-size: 18px;
            letter-spacing: -.3px
        }

        .hlTop p {
            margin: 8px 0 0;
            color: var(--muted);
            line-height: 1.65;
            max-width: 70ch
        }

        .hlGrid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-top: 14px;
        }

        .hlItem {
            border: 1px solid rgba(255, 255, 255, .10);
            background: rgba(7, 10, 18, .20);
            border-radius: 18px;
            padding: 12px;
            color: var(--muted);
            line-height: 1.6;
            font-size: 14px;
            display: flex;
            gap: 10px;
            align-items: flex-start;
        }

        .hlItem b {
            color: var(--text)
        }

        .hlItem .bicon {
            width: 34px;
            height: 34px;
            border-radius: 14px;
            background: rgba(249, 115, 22, .12);
            border: 1px solid rgba(249, 115, 22, .22);
            display: grid;
            place-items: center;
            flex: 0 0 auto;
            margin-top: 1px;
        }

        /* Pricing (info only) */
        .pricingGrid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 14px;
            align-items: stretch;
        }

        .priceCard {
            border: 1px solid rgba(255, 255, 255, .10);
            background: rgba(255, 255, 255, .05);
            border-radius: var(--radius2);
            padding: 16px;
            box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
            position: relative;
            overflow: hidden;
            min-height: 220px;
            display: flex;
            flex-direction: column;
        }

        .priceCard.popular {
            border-color: rgba(34, 211, 238, .34);
            background: linear-gradient(180deg, rgba(34, 211, 238, .10), rgba(255, 255, 255, .04));
            box-shadow: 0 18px 44px rgba(34, 211, 238, .10);
        }

        .tag {
            position: absolute;
            top: 14px;
            right: 14px;
            padding: 8px 10px;
            border-radius: 999px;
            background: rgba(34, 211, 238, .14);
            border: 1px solid rgba(34, 211, 238, .24);
            color: rgba(234, 240, 255, .92);
            font-weight: 950;
            font-size: 12px;
            letter-spacing: .2px;
        }

        .priceCard h3 {
            margin: 0;
            font-size: 16px;
            letter-spacing: -.2px
        }

        .price {
            margin: 10px 0 10px;
            font-weight: 980;
            font-size: 28px;
            letter-spacing: -.9px
        }

        .pList {
            margin: 0;
            padding: 0;
            list-style: none;
            display: grid;
            gap: 8px;
            color: var(--muted);
            font-size: 13.7px;
            line-height: 1.55;
            flex: 1 1 auto;
        }

        .pList li {
            display: flex;
            gap: 10px;
            align-items: flex-start
        }

        .pList i {
            width: 18px;
            height: 18px;
            border-radius: 6px;
            background: rgba(52, 211, 153, .14);
            border: 1px solid rgba(52, 211, 153, .22);
            display: inline-grid;
            place-items: center;
            place-content: center;
            flex: 0 0 auto;
            margin-top: 2px;
            font-style: normal;
            font-weight: 900;
        }

        .priceFoot {
            margin-top: 12px;
            color: var(--muted2);
            font-size: 12.5px;
            line-height: 1.5;
        }

        /* Screenshots slider */
        .shotsWrap {
            display: grid;
            grid-template-columns: 1fr;
            gap: 14px;
            align-items: stretch;
        }

        .slider {
            border: 1px solid rgba(255, 255, 255, .10);
            background: rgba(255, 255, 255, .04);
            border-radius: var(--radius2);
            padding: 14px;
            box-shadow: var(--shadow);
        }

        .sliderTop {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 12px;
        }

        .sliderTop b {
            font-size: 16px;
            letter-spacing: -.2px
        }

        .counter {
            color: var(--muted2);
            font-weight: 850;
            font-size: 13px
        }

        .frame {
            width: min(360px, 100%);
            aspect-ratio: 9 / 16;
            /* 1080x1920 */
            border-radius: 28px;
            border: 1px solid rgba(255, 255, 255, .12);
            background: rgba(7, 10, 18, .35);
            overflow: hidden;
            margin: 0 auto;
            box-shadow: 0 18px 50px rgba(0, 0, 0, .42);
            position: relative;
        }

        .frame img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            opacity: 1;
            transition: .25s opacity;
        }

        .placeholder {
            position: absolute;
            inset: 0;
            display: grid;
            place-items: center;
            color: rgba(234, 240, 255, .55);
            font-weight: 900;
            text-align: center;
            padding: 16px;
            line-height: 1.55;
            background:
                radial-gradient(500px 300px at 50% 25%, rgba(124, 58, 237, .20), transparent 55%),
                radial-gradient(420px 280px at 70% 65%, rgba(34, 211, 238, .14), transparent 55%);
            border-radius: 28px;
        }

        .sliderControls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-top: 12px;
            flex-wrap: wrap;
        }

        .dots {
            display: flex;
            gap: 8px;
            align-items: center;
            justify-content: center;
        }

        .dots button {
            width: 10px;
            height: 10px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, .16);
            background: rgba(255, 255, 255, .08);
            cursor: pointer;
            padding: 0;
            transition: .2s transform, .2s background, .2s border-color;
        }

        .dots button.active {
            background: linear-gradient(135deg, rgba(124, 58, 237, 1), rgba(34, 211, 238, 1));
            border-color: rgba(255, 255, 255, .22);
            transform: scale(1.15);
        }

        .thumbs {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 8px;
            margin-top: 12px;
        }

        .thumb {
            aspect-ratio: 9/16;
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, .10);
            background: rgba(255, 255, 255, .04);
            overflow: hidden;
            cursor: pointer;
            transition: .18s transform, .18s border-color, .18s background;
            position: relative;
        }

        .thumb:hover {
            transform: translateY(-1px);
            border-color: rgba(255, 255, 255, .18);
            background: rgba(255, 255, 255, .06)
        }

        .thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            opacity: .95
        }

        .thumb.active {
            border-color: rgba(34, 211, 238, .34);
            box-shadow: 0 0 0 5px rgba(34, 211, 238, .12)
        }

        .thumb .ph {
            width: 100%;
            height: 100%;
            display: grid;
            place-items: center;
            color: rgba(234, 240, 255, .45);
            font-weight: 950;
            font-size: 12px;
            background: rgba(7, 10, 18, .25);
        }

        .vibeglow-bg{
         object-fit: cover;
         width: -webkit-fill-available;
        }

        /* Support */
        .supportGrid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 14px;
            align-items: stretch;
        }

        .supportCard {
            border: 1px solid rgba(255, 255, 255, .10);
            background: rgba(255, 255, 255, .05);
            border-radius: var(--radius2);
            padding: 18px;
            box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
        }

        .supportCard h3 {
            margin: 0;
            font-size: 18px;
            letter-spacing: -.2px
        }

        .supportCard p {
            margin: 8px 0 0;
            color: var(--muted);
            line-height: 1.65
        }

        .contact {
            margin-top: 14px;
            display: grid;
            gap: 10px;
        }

        .contact a {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 12px;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, .10);
            background: rgba(255, 255, 255, .04);
            transition: .18s transform, .18s background, .18s border-color;
            color: var(--muted);
            font-weight: 800;
        }

        .contact a:hover {
            transform: translateY(-1px);
            background: rgba(255, 255, 255, .06);
            border-color: rgba(255, 255, 255, .16);
            color: var(--text)
        }

        .cIc {
            width: 38px;
            height: 38px;
            border-radius: 14px;
            background: rgba(249, 115, 22, .12);
            border: 1px solid rgba(249, 115, 22, .22);
            display: grid;
            place-items: center;
            flex: 0 0 auto;
        }

        .smallPrint {
            color: var(--muted2);
            font-size: 12.7px;
            line-height: 1.6;
            margin-top: 12px
        }

        /* Footer */
        footer {
            padding: 28px 0 46px;
            border-top: 1px solid rgba(255, 255, 255, .06);
            background: rgba(7, 10, 18, .35);
        }

        .footGrid {
            display: grid;
            grid-template-columns: 1.2fr .8fr;
            gap: 14px;
            align-items: start;
        }

        .footLinks {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: flex-end;
        }

        .linkBtn {
            padding: 10px 12px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, .10);
            background: rgba(255, 255, 255, .03);
            color: var(--muted);
            font-weight: 800;
            font-size: 13px;
            cursor: pointer;
            transition: .2s background, .2s transform;
        }

        .linkBtn:hover {
            background: rgba(255, 255, 255, .06);
            transform: translateY(-1px)
        }

        .copy {
            color: var(--muted2);
            font-size: 13px;
            line-height: 1.65;
            margin-top: 10px
        }

        /* Modal */
        .modalBack {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .55);
            backdrop-filter: blur(10px);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            z-index: 100;
        }

        .modal {
            width: min(920px, 100%);
            max-height: 82vh;
            overflow: auto;
            border-radius: 22px;
            border: 1px solid rgba(255, 255, 255, .12);
            background: linear-gradient(180deg, rgba(16, 20, 36, .92), rgba(10, 12, 22, .92));
            box-shadow: var(--shadow);
        }

        .modalHead {
            position: sticky;
            top: 0;
            background: rgba(10, 12, 22, .92);
            border-bottom: 1px solid rgba(255, 255, 255, .08);
            padding: 14px 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            z-index: 1;
        }

        .modalHead b {
            font-size: 14px;
            letter-spacing: .2px
        }

        .closeBtn {
            border: 1px solid rgba(255, 255, 255, .10);
            background: rgba(255, 255, 255, .04);
            border-radius: 12px;
            width: 40px;
            height: 40px;
            display: grid;
            place-items: center;
            cursor: pointer;
            transition: .2s transform, .2s background;
            color: var(--text);
            font-weight: 900;
        }

        .closeBtn:hover {
            transform: translateY(-1px);
            background: rgba(255, 255, 255, .07)
        }

        .modalBody {
            padding: 16px 16px 18px;
            color: var(--muted);
            line-height: 1.75;
            font-size: 14px;
        }

        .modalBody h3 {
            margin: 16px 0 8px;
            color: var(--text);
            font-size: 15px;
            letter-spacing: .2px;
        }

        .modalBody ul {
            margin: 10px 0 10px 20px
        }

        .sep {
            height: 1px;
            background: rgba(255, 255, 255, .07);
            margin: 14px 0
        }

        /* Responsive */
        @media (max-width: 1040px) {
            .heroGrid {
                grid-template-columns: 1fr;
            }

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

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

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

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

            .footGrid {
                grid-template-columns: 1fr
            }

            .footLinks {
                justify-content: flex-start
            }

            .thumbs {
                grid-template-columns: repeat(4, 1fr)
            }
        }

        @media (max-width: 720px) {
            nav ul {
                display: none
            }

            .burger {
                display: inline-flex
            }

            .mobileMenu {
                display: block
            }

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

            .thumbs {
                grid-template-columns: repeat(4, 1fr)
            }

            .btn {
                width: 100%
            }

            .navActions {
                width: 100%;
                justify-content: flex-end
            }

            .nav {
                flex-wrap: wrap
            }
        }