/* =====================================================
   ROOT
===================================================== */

:root {

    --background:
        #070910;

    --background-soft:
        #0b0f1a;

    --card:
        rgba(255, 255, 255, 0.045);

    --card-hover:
        rgba(255, 255, 255, 0.075);

    --border:
        rgba(255, 255, 255, 0.09);

    --border-bright:
        rgba(255, 255, 255, 0.16);

    --text:
        #f5f7fb;

    --text-soft:
        #aab3c3;

    --text-muted:
        #778196;

    --purple:
        #7c5cff;

    --purple-light:
        #a48cff;

    --cyan:
        #00d9ff;

    --pink:
        #ff5ca8;

    --green:
        #48e68b;

    --orange:
        #ff9f43;

    --radius:
        24px;

    --container:
        1180px;

}


/* =====================================================
   RESET
===================================================== */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    min-height: 100vh;

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

    color:
        var(--text);

    background:
        var(--background);

    line-height:
        1.7;

    overflow-x:
        hidden;

}


body::selection {

    background:
        var(--purple);

    color:
        white;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


button,
a {

    -webkit-tap-highlight-color:
        transparent;

}


.container {

    width:
        min(calc(100% - 40px),
            var(--container));

    margin:
        0 auto;

}


/* =====================================================
   BACKGROUND
===================================================== */

.background-effects {

    position:
        fixed;

    inset:
        0;

    pointer-events:
        none;

    overflow:
        hidden;

    z-index:
        -1;

}


.orb {

    position:
        absolute;

    border-radius:
        50%;

    filter:
        blur(100px);

    opacity:
        0.18;

}


.orb-one {

    width:
        450px;

    height:
        450px;

    top:
        -200px;

    left:
        -150px;

    background:
        var(--purple);

}


.orb-two {

    width:
        400px;

    height:
        400px;

    top:
        30%;

    right:
        -180px;

    background:
        var(--cyan);

}


.orb-three {

    width:
        350px;

    height:
        350px;

    bottom:
        -200px;

    left:
        35%;

    background:
        var(--pink);

}


/* =====================================================
   NAVBAR
===================================================== */

.navbar {

    position:
        sticky;

    top:
        0;

    z-index:
        100;

    height:
        76px;

    background:
        rgba(7, 9, 16, 0.72);

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

    backdrop-filter:
        blur(22px);

    -webkit-backdrop-filter:
        blur(22px);

}


.nav-container {

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

}


.logo {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

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

    font-weight:
        700;

    font-size:
        16px;

}


.logo-icon {

    width:
        39px;

    height:
        39px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        12px;

    background:
        linear-gradient(135deg,
            var(--purple),
            var(--cyan));

    box-shadow:
        0 8px 30px rgba(124, 92, 255, 0.25);

}


.logo-accent {

    color:
        var(--purple-light);

}


.desktop-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        34px;

}


.desktop-nav a {

    position:
        relative;

    color:
        var(--text-soft);

    font-size:
        14px;

    font-weight:
        600;

    transition:
        color 0.25s ease;

}


.desktop-nav a::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        -8px;

    height:
        2px;

    border-radius:
        2px;

    background:
        linear-gradient(90deg,
            var(--purple),
            var(--cyan));

    transform:
        scaleX(0);

    transition:
        transform 0.25s ease;

}


.desktop-nav a:hover {

    color:
        white;

}


.desktop-nav a:hover::after {

    transform:
        scaleX(1);

}


.nav-play-button {

    padding:
        9px 15px;

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

    border-radius:
        11px;

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

    font-size:
        13px;

    font-weight:
        600;

    transition:
        0.25s ease;

}


.nav-play-button span {

    margin-left:
        5px;

}


.nav-play-button:hover {

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

    transform:
        translateY(-2px);

}


/* =====================================================
   HERO
===================================================== */

.hero {

    position:
        relative;

    min-height:
        calc(100vh - 76px);

    display:
        flex;

    align-items:
        center;

    padding:
        90px 0;

}


.hero-container {

    display:
        grid;

    grid-template-columns:
        1.05fr 0.95fr;

    align-items:
        center;

    gap:
        70px;

}


.eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        8px 13px;

    margin-bottom:
        25px;

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

    border-radius:
        999px;

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

    color:
        var(--text-soft);

    font-size:
        12px;

    font-weight:
        600;

}


.status-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--green);

    box-shadow:
        0 0 14px var(--green);

}


.hero h1 {

    max-width:
        720px;

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

    font-size:
        clamp(46px,
            6vw,
            76px);

    line-height:
        1.05;

    letter-spacing:
        -3.5px;

}


.gradient-text {

    background:
        linear-gradient(100deg,
            #ffffff 5%,
            var(--purple-light) 48%,
            var(--cyan) 100%);

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.hero-description {

    max-width:
        650px;

    margin-top:
        25px;

    color:
        var(--text-soft);

    font-size:
        17px;

}


.hero-buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        13px;

    margin-top:
        34px;

}


.button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    padding:
        13px 19px;

    border-radius:
        13px;

    font-size:
        13px;

    font-weight:
        700;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;

}


.button:hover {

    transform:
        translateY(-3px);

}


.button-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  overflow: hidden;
  border: 1px solid rgba(151, 255, 241, 0.35);
  border-radius: 14px;
  color: #06201f;
  background: linear-gradient(135deg, #75f6df 0%, #26c6c9 52%, #13a9c8 100%);
  box-shadow:
    0 14px 35px rgba(38, 198, 201, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  font: 700 0.95rem/1 "Outfit", sans-serif;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.button-primary::before {
  position: absolute;
  top: -60%;
  left: -75%;
  width: 45%;
  height: 220%;
  content: "";
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.5),
    transparent
  );
  transform: rotate(25deg);
  transition: left 0.65s ease;
}

.button-primary:hover {
  box-shadow:
    0 18px 45px rgba(38, 198, 201, 0.42),
    0 0 32px rgba(117, 246, 223, 0.25);
  filter: brightness(1.06) saturate(1.1);
  transform: translateY(-3px);
}

.button-primary:hover::before {
  left: 135%;
}

.button-primary:active {
  transform: translateY(0) scale(0.97);
}

.button-primary:focus-visible {
  outline: 3px solid rgba(117, 246, 223, 0.65);
  outline-offset: 4px;
}
.button-secondary {

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

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

}


.button-secondary:hover {

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

}


.hero-stats {

    display:
        flex;

    align-items:
        center;

    gap:
        25px;

    margin-top:
        55px;

}


.stat {

    display:
        flex;

    flex-direction:
        column;

}


.stat strong {

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

    font-size:
        20px;

}


.stat span {

    color:
        var(--text-muted);

    font-size:
        11px;

    text-transform:
        uppercase;

    letter-spacing:
        1px;

}


.stat-divider {

    width:
        1px;

    height:
        32px;

    background:
        var(--border);

}


/* =====================================================
   HERO PHONE
===================================================== */

.hero-visual {

    position:
        relative;

    min-height:
        530px;

    display:
        grid;

    place-items:
        center;

}


.phone-glow {

    position:
        absolute;

    width:
        350px;

    height:
        350px;

    border-radius:
        50%;

    background:
        linear-gradient(135deg,
            var(--purple),
            var(--cyan));

    filter:
        blur(90px);

    opacity:
        0.22;

}


.phone {

    position:
        relative;

    width:
        260px;

    height:
        500px;

    padding:
        9px;

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

    border-radius:
        39px;

    background:
        linear-gradient(145deg,
            #242938,
            #080a10);

    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.6),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);

    transform:
        rotate(3deg);

    animation:
        phoneFloat 6s ease-in-out infinite;

}


@keyframes phoneFloat {

    0%,
    100% {
        transform:
            translateY(0) rotate(3deg);
    }

    50% {
        transform:
            translateY(-12px) rotate(3deg);
    }

}


.phone-notch {

    position:
        absolute;

    z-index:
        3;

    top:
        17px;

    left:
        50%;

    transform:
        translateX(-50%);

    width:
        80px;

    height:
        23px;

    border-radius:
        20px;

    background:
        #05060a;

}


.phone-screen {

    height:
        100%;

    padding:
        55px 23px 25px;

    border-radius:
        31px;

    overflow:
        hidden;

    background:
        radial-gradient(circle at 80% 10%,
            rgba(0, 217, 255, 0.25),
            transparent 30%),
        linear-gradient(160deg,
            #151329,
            #090b13);

}


.screen-header {

    display:
        flex;

    justify-content:
        space-between;

    color:
        #aab1c4;

    font-size:
        10px;

    font-weight:
        600;

}


.screen-logo {

    width:
        72px;

    height:
        72px;

    display:
        grid;

    place-items:
        center;

    margin:
        75px auto 25px;

    border-radius:
        22px;

    font-size:
        31px;

    background:
        linear-gradient(135deg,
            var(--purple),
            var(--cyan));

    box-shadow:
        0 15px 40px rgba(124, 92, 255, 0.35);

}


.phone-screen h3 {

    text-align:
        center;

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

    font-size:
        21px;

    line-height:
        1.25;

}


.phone-screen h3 span {

    color:
        var(--purple-light);

}


.screen-bars {

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

    margin-top:
        30px;

}


.screen-bars span {

    height:
        7px;

    border-radius:
        10px;

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

}


.screen-bars span:nth-child(1) {

    width:
        100%;

}


.screen-bars span:nth-child(2) {

    width:
        75%;

}


.screen-bars span:nth-child(3) {

    width:
        55%;

}


.screen-button {

    margin-top:
        30px;

    padding:
        11px;

    text-align:
        center;

    border-radius:
        10px;

    background:
        var(--purple);

    font-size:
        10px;

    font-weight:
        700;

}


.floating-card {

    position:
        absolute;

    z-index:
        5;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        12px 15px;

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

    border-radius:
        15px;

    background:
        rgba(15, 18, 29, 0.78);

    backdrop-filter:
        blur(16px);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.35);

}


.floating-icon {

    width:
        35px;

    height:
        35px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        10px;

    background:
        rgba(124, 92, 255, 0.15);

}


.floating-card strong {

    display:
        block;

    font-size:
        12px;

}


.floating-card small {

    display:
        block;

    color:
        var(--text-muted);

    font-size:
        9px;

}


.card-one {

    left:
        0;

    top:
        115px;

    animation:
        cardFloat 5s ease-in-out infinite;

}


.card-two {

    right:
        -10px;

    bottom:
        100px;

    animation:
        cardFloat 6s ease-in-out infinite reverse;

}


@keyframes cardFloat {

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

    50% {
        transform:
            translateY(-10px);
    }

}


/* =====================================================
   SECTIONS
===================================================== */

.section {

    padding:
        120px 0;

}


.section-heading {

    max-width:
        700px;

    margin:
        0 auto 55px;

    text-align:
        center;

}


.section-label {

    margin-bottom:
        13px;

    color:
        var(--purple-light);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


.section-heading h2,
.about-content h2,
.contact-content h2 {

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

    font-size:
        clamp(34px,
            5vw,
            52px);

    line-height:
        1.1;

    letter-spacing:
        -2px;

}


.section-heading p {

    margin-top:
        17px;

    color:
        var(--text-soft);

}


/* =====================================================
   APP GRID
===================================================== */

.app-grid {

    display:
        grid;

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

    gap:
        18px;

}


.app-card {

    position:
        relative;

    min-height:
        300px;

    display:
        flex;

    flex-direction:
        column;

    padding:
        25px;

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

    border-radius:
        var(--radius);

    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.02));

    overflow:
        hidden;

    opacity:
        0;

    transform:
        translateY(25px);

    transition:
        transform 0.5s ease,
        opacity 0.5s ease,
        border-color 0.3s ease,
        background 0.3s ease;

}


.app-card.visible {

    opacity:
        1;

    transform:
        translateY(0);

}


.app-card::before {

    content:
        "";

    position:
        absolute;

    width:
        180px;

    height:
        180px;

    top:
        -100px;

    right:
        -100px;

    border-radius:
        50%;

    background:
        var(--purple);

    filter:
        blur(70px);

    opacity:
        0.15;

}


.app-card:hover {

    transform:
        translateY(-8px);

    border-color:
        var(--border-bright);

    background:
        var(--card-hover);

}


.app-card-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


.app-icon {

    width:
        58px;

    height:
        58px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        17px;

    font-size:
        26px;

    background:
        rgba(124, 92, 255, 0.12);

    border:
        1px solid rgba(124, 92, 255, 0.18);

}


.app-category {

    padding:
        5px 9px;

    border-radius:
        999px;

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

    color:
        var(--text-muted);

    font-size:
        9px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        0.7px;

}


.app-card-content {

    margin-top:
        28px;

}


.app-card h3 {

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

    font-size:
        19px;

    line-height:
        1.3;

}


.app-card p {

    margin-top:
        9px;

    color:
        var(--text-soft);

    font-size:
        13px;

}


.app-link {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-top:
        auto;

    padding-top:
        25px;

    color:
        #c6baff;

    font-size:
        12px;

    font-weight:
        700;

}


.app-link span {

    transition:
        transform 0.2s ease;

}


.app-link:hover span {

    transform:
        translate(3px, -3px);

}


/* App accent colors */

.app-cyan .app-icon {
    background:
        rgba(0, 217, 255, 0.1);
}

.app-pink .app-icon {
    background:
        rgba(255, 92, 168, 0.1);
}

.app-orange .app-icon {
    background:
        rgba(255, 159, 67, 0.1);
}

.app-green .app-icon {
    background:
        rgba(72, 230, 139, 0.1);
}


.apps-cta {

    display:
        flex;

    justify-content:
        center;

    margin-top:
        35px;

}


/* =====================================================
   ABOUT
===================================================== */

.about-section {

    background:
        linear-gradient(180deg,
            transparent,
            rgba(255, 255, 255, 0.018),
            transparent);

}


.about-grid {

    display:
        grid;

    grid-template-columns:
        0.85fr 1.15fr;

    align-items:
        center;

    gap:
        100px;

}


.about-visual {

    position:
        relative;

    min-height:
        400px;

    display:
        grid;

    place-items:
        center;

    opacity:
        0;

    transform:
        translateX(-30px);

    transition:
        0.8s ease;

}


.about-visual.visible {

    opacity:
        1;

    transform:
        translateX(0);

}


.about-glow {

    position:
        absolute;

    width:
        250px;

    height:
        250px;

    border-radius:
        50%;

    background:
        var(--purple);

    filter:
        blur(90px);

    opacity:
        0.2;

}


.about-card {

    width:
        230px;

    height:
        280px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        40px;

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

    border-radius:
        30px;

    background:
        linear-gradient(145deg,
            rgba(124, 92, 255, 0.14),
            rgba(0, 217, 255, 0.04));

    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.3);

    transform:
        rotate(-5deg);

}


.about-icon {

    width:
        90px;

    height:
        90px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        26px;

    background:
        linear-gradient(135deg,
            var(--purple),
            var(--cyan));

    font-size:
        40px;

    box-shadow:
        0 20px 50px rgba(124, 92, 255, 0.3);

}


.about-lines {

    width:
        130px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}


.about-lines span {

    height:
        7px;

    border-radius:
        10px;

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

}


.about-lines span:nth-child(2) {
    width:
        80%;
}

.about-lines span:nth-child(3) {
    width:
        60%;
}

.about-lines span:nth-child(4) {
    width:
        90%;
}


.mini-badge {

    position:
        absolute;

    padding:
        9px 13px;

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

    border-radius:
        10px;

    background:
        rgba(15, 18, 29, 0.75);

    backdrop-filter:
        blur(15px);

    color:
        var(--text-soft);

    font-size:
        10px;

    font-weight:
        700;

}


.badge-top {

    top:
        50px;

    right:
        10px;

}


.badge-bottom {

    bottom:
        50px;

    left:
        10px;

}


.about-content {

    opacity:
        0;

    transform:
        translateX(30px);

    transition:
        0.8s ease 0.1s;

}


.about-content.visible {

    opacity:
        1;

    transform:
        translateX(0);

}


.about-content>p {

    max-width:
        620px;

    margin-top:
        18px;

    color:
        var(--text-soft);

    font-size:
        15px;

}


.values {

    display:
        grid;

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

    gap:
        15px;

    margin-top:
        35px;

}


.value {

    padding:
        18px;

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

    border-radius:
        17px;

    background:
        var(--card);

}


.value-icon {

    margin-bottom:
        12px;

    font-size:
        20px;

}


.value h3 {

    font-size:
        13px;

}


.value p {

    margin-top:
        5px;

    color:
        var(--text-muted);

    font-size:
        10px;

    line-height:
        1.5;

}


/* =====================================================
   CONTACT
===================================================== */

.contact-section {

    padding-top:
        60px;

}


.contact-card {

    position:
        relative;

    min-height:
        390px;

    display:
        flex;

    align-items:
        center;

    padding:
        70px;

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

    border-radius:
        30px;

    overflow:
        hidden;

    background:
        linear-gradient(120deg,
            rgba(124, 92, 255, 0.1),
            rgba(0, 217, 255, 0.045));

    opacity:
        0;

    transform:
        translateY(25px);

    transition:
        0.8s ease;

}


.contact-card.visible {

    opacity:
        1;

    transform:
        translateY(0);

}


.contact-glow {

    position:
        absolute;

    width:
        400px;

    height:
        400px;

    right:
        -150px;

    top:
        -150px;

    border-radius:
        50%;

    background:
        var(--purple);

    filter:
        blur(100px);

    opacity:
        0.18;

}


.contact-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        650px;

}


.contact-content p {

    margin-top:
        18px;

    color:
        var(--text-soft);

    font-size:
        14px;

}


.email-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        30px;

    padding:
        13px 17px;

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

    border-radius:
        13px;

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

    color:
        #dcd8ff;

    font-size:
        12px;

    font-weight:
        700;

    transition:
        0.25s ease;

}


.email-button:hover {

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

    transform:
        translateY(-3px);

}


.contact-decoration {

    position:
        absolute;

    right:
        100px;

    display:
        flex;

    align-items:
        center;

    gap:
        25px;

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

    font-size:
        70px;

    transform:
        rotate(15deg);

}


/* =====================================================
   FOOTER
===================================================== */

footer {

    margin-top:
        100px;

    padding:
        50px 0;

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

    background:
        rgba(0, 0, 0, 0.2);

}


.footer-container {

    display:
        grid;

    grid-template-columns:
        1.2fr 1fr 0.7fr;

    align-items:
        center;

    gap:
        40px;

}


.footer-brand p {

    margin-top:
        9px;

    color:
        var(--text-muted);

    font-size:
        11px;

}


.footer-links {

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        center;

    gap:
        20px;

}


.footer-links a {

    color:
        var(--text-muted);

    font-size:
        11px;

    transition:
        color 0.2s ease;

}


.footer-links a:hover {

    color:
        white;

}


.footer-copy {

    color:
        var(--text-muted);

    text-align:
        right;

    font-size:
        10px;

    line-height:
        1.7;

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1000px) {

    .hero-container {

        grid-template-columns:
            1fr;

    }

    .hero-content {

        text-align:
            center;

    }

    .hero-description {

        margin-left:
            auto;

        margin-right:
            auto;

    }

    .hero-buttons {

        justify-content:
            center;

    }

    .hero-stats {

        justify-content:
            center;

    }

    .hero-visual {

        min-height:
            480px;

    }


    .about-grid {

        grid-template-columns:
            1fr;

        gap:
            60px;

    }

    .about-content {

        text-align:
            center;

    }

    .about-content>p {

        margin-left:
            auto;

        margin-right:
            auto;

    }

    .values {

        text-align:
            left;

    }


    .app-grid {

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

    }


    .footer-container {

        grid-template-columns:
            1fr;

        text-align:
            center;

    }

    .footer-brand .logo {

        justify-content:
            center;

    }

    .footer-links {

        justify-content:
            center;

    }

    .footer-copy {

        text-align:
            center;

    }

}


@media (max-width: 700px) {

    .container {

        width:
            calc(100% - 28px);

    }


    .desktop-nav {

        display:
            none;

    }


    .nav-play-button {

        display:
            none;

    }


    .hero {

        padding:
            70px 0;

    }


    .hero h1 {

        font-size:
            44px;

        letter-spacing:
            -2px;

    }


    .hero-description {

        font-size:
            14px;

    }


    .hero-stats {

        gap:
            15px;

    }


    .stat strong {

        font-size:
            16px;

    }


    .hero-visual {

        min-height:
            450px;

    }


    .phone {

        width:
            225px;

        height:
            430px;

    }


    .card-one {

        left:
            -5px;

        top:
            80px;

    }


    .card-two {

        right:
            -5px;

        bottom:
            70px;

    }


    .section {

        padding:
            80px 0;

    }


    .section-heading {

        margin-bottom:
            35px;

    }


    .section-heading h2,
    .about-content h2,
    .contact-content h2 {

        font-size:
            34px;

    }


    .app-grid {

        grid-template-columns:
            1fr;

    }


    .values {

        grid-template-columns:
            1fr;

    }


    .contact-card {

        padding:
            40px 25px;

    }


    .contact-decoration {

        display:
            none;

    }

}


@media (max-width: 420px) {

    .hero h1 {

        font-size:
            38px;

    }


    .hero-stats {

        gap:
            11px;

    }


    .stat-divider {

        height:
            25px;

    }


    .phone {

        width:
            205px;

        height:
            400px;

    }


    .floating-card {

        transform:
            scale(0.85);

    }


    .card-one {

        left:
            -25px;

    }


    .card-two {

        right:
            -25px;

    }


    .email-button {

        font-size:
            10px;

    }

}