/* ================================
   IVISOFT
   ================================ */

:root {

    --blue: #0198CD;
    --orange: #FD6A00;

    --text: #13233f;
    --muted: #718095;

    --line: #e4eaf1;

    --shadow:
        0 15px 35px rgba(20, 45, 80, 0.07);

    --header-height: 88px;

    --container: 1500px;
}


/* ================================
   ALAP
   ================================ */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    color: var(--text);

    background: #ffffff;

}

img {
    max-width: 100%;
}

a {

    color: inherit;

    text-decoration: none;

}

.container {

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

    margin-left: auto;
    margin-right: auto;

}


/* ================================
   FEJLÉC
   ================================ */

.site-header {

    position: sticky;

    top: 0;

    z-index: 1000;

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

    backdrop-filter:
        blur(10px);

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

}


.header-inner {

    min-height:
        var(--header-height);

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 30px;

}


/* LOGÓ */

.logo {

    display:
        inline-flex;

    align-items:
        center;

}

.logo-image {

    height: 62px;

    width: auto;

    display: block;

}


/* ================================
   MENÜ
   ================================ */

.main-nav {

    display: flex;

    align-items: center;

    gap: 42px;

}

.main-nav a {

    position: relative;

    padding:
        12px 0;

    font-size:
        18px;

    color:
        #243247;

    transition:
        color 0.2s ease;

}


.main-nav a:hover {

    color:
        var(--blue);

}


.main-nav a.active {

    color:
        var(--blue);

    font-weight:
        600;

}


.main-nav a.active::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: -15px;

    width: 52px;

    height: 4px;

    transform:
        translateX(-50%);

    border-radius:
        10px;

    background:
        var(--blue);

}


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

.hero {

    position: relative;

    overflow: hidden;

    min-height:
        calc(
            100vh - var(--header-height)
        );

    display: flex;

    align-items: center;

    padding:
        70px 0 100px;

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(1, 152, 205, 0.065),
            transparent 30%
        ),

        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfcfe 100%
        );

}


.hero-inner {

    position: relative;

    z-index: 10;

    display: grid;

    grid-template-columns:
        0.72fr 1.28fr;

    align-items: center;

    gap: 70px;

}


/* ================================
   HERO BAL OLDAL
   ================================ */

.hero-left {

    position: relative;

}


.hero-brand {

    margin-bottom:
        40px;

}


.hero-logo {

    width: 100%;

    max-width: 390px;

    height: auto;

    display: block;

}


.hero h1 {

    margin:
        0 0 30px;

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

    line-height:
        1.04;

    letter-spacing:
        -2px;

    font-weight:
        700;

    color:
        #10213d;

}


.accent-dot {

    color:
        var(--orange);

}


.hero-subtitle {

    margin:
        0 0 36px;

    color:
        var(--muted);

    font-size:
        clamp(
            20px,
            1.6vw,
            28px
        );

    line-height:
        1.45;

}


.hero-accent-line {

    width:
        86px;

    height:
        6px;

    border-radius:
        20px;

    background:
        var(--orange);

}


/* ================================
   KÉPERNYŐKÉP GRID
   ================================ */

.hero-right {

    width: 100%;

}


.screenshots-grid {

    width: 100%;

    display: grid;

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

    gap:
        28px;

}


/* KÉPERNYŐKÉP KÁRTYA */

.shot-card {

    aspect-ratio:
        16 / 11;

    min-height:
        310px;

    display: flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    padding:
        30px;

    text-align:
        center;

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

    border:
        1px solid #dce4ed;

    border-radius:
        24px;

    box-shadow:
        var(--shadow);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


.shot-card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 45px
        rgba(20, 45, 80, 0.11);

}


.shot-icon {

    width:
        82px;

    height:
        82px;

    margin-bottom:
        18px;

    color:
        #a9b5c4;

}


.shot-icon svg {

    width:
        100%;

    height:
        100%;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        2.4;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


.shot-card p {

    margin: 0;

    font-size:
        20px;

    color:
        #9ca8b8;

}


/* ================================
   HÁTTÉR DÍSZÍTÉS
   ================================ */

.bg-shape {

    position:
        absolute;

    z-index: 1;

    pointer-events:
        none;

}


.bg-shape-1 {

    left:
        -230px;

    bottom:
        -310px;

    width:
        900px;

    height:
        600px;

    border-radius:
        50%;

    background:
        rgba(
            1,
            152,
            205,
            0.075
        );

}


.bg-shape-2 {

    left:
        -90px;

    bottom:
        -360px;

    width:
        1050px;

    height:
        520px;

    border-radius:
        50%;

    transform:
        rotate(-10deg);

    background:
        rgba(
            1,
            152,
            205,
            0.035
        );

}


/* PONTOK */

.bg-dot {

    position:
        absolute;

    z-index: 2;

    border-radius:
        50%;

    pointer-events:
        none;

}


.bg-dot-orange {

    left:
        25%;

    bottom:
        175px;

    width:
        30px;

    height:
        30px;

    background:
        rgba(
            253,
            106,
            0,
            0.85
        );

}


.bg-dot-blue {

    left:
        31%;

    bottom:
        115px;

    width:
        34px;

    height:
        34px;

    background:
        rgba(
            1,
            152,
            205,
            0.17
        );

}


/* ÍVEK */

.bg-curve {

    position:
        absolute;

    z-index: 2;

    left:
        -8%;

    width:
        60%;

    height:
        320px;

    border-radius:
        50%;

    pointer-events:
        none;

    transform:
        rotate(7deg);

}


.bg-curve-blue {

    bottom:
        60px;

    border:
        2px solid
        rgba(
            1,
            152,
            205,
            0.55
        );

    border-color:

        rgba(
            1,
            152,
            205,
            0.55
        )

        transparent

        transparent

        transparent;

}


.bg-curve-orange {

    bottom:
        0;

    width:
        66%;

    border:
        2px solid
        rgba(
            253,
            106,
            0,
            0.42
        );

    border-color:

        rgba(
            253,
            106,
            0,
            0.42
        )

        transparent

        transparent

        transparent;

}


/* ================================
   IDEIGLENES TARTALMAK
   ================================ */

.anchor-section {

    padding:
        80px 0;

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

    background:
        #ffffff;

}


.anchor-section h2 {

    margin:
        0 0 15px;

    font-size:
        40px;

}


.anchor-section p {

    margin: 0;

    color:
        var(--muted);

    font-size:
        18px;

}


/* ================================
   1350 PX
   ================================ */

@media
(max-width: 1350px) {

    .container {

        width:
            calc(100% - 60px);

    }

    .hero-inner {

        grid-template-columns:
            0.8fr 1.2fr;

        gap:
            45px;

    }

    .shot-card {

        min-height:
            260px;

    }

}


/* ================================
   TABLET
   ================================ */

@media
(max-width: 1000px) {

    .header-inner {

        padding:
            18px 0;

        flex-direction:
            column;

        align-items:
            flex-start;

    }

    .main-nav {

        gap:
            20px;

        flex-wrap:
            wrap;

    }


    .main-nav a.active::after {

        bottom:
            -8px;

    }


    .hero {

        min-height:
            auto;

    }


    .hero-inner {

        grid-template-columns:
            1fr;

        gap:
            55px;

    }


    .hero-logo {

        max-width:
            330px;

    }


    .screenshots-grid {

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

    }


    .shot-card {

        min-height:
            280px;

    }

}


/* ================================
   MOBIL
   ================================ */

@media
(max-width: 650px) {

    .container {

        width:
            calc(100% - 30px);

    }


    .logo-image {

        height:
            48px;

    }


    .main-nav {

        gap:
            12px 18px;

    }


    .main-nav a {

        font-size:
            15px;

    }


    .hero {

        padding:
            45px 0 70px;

    }


    .hero-logo {

        max-width:
            250px;

    }


    .hero-brand {

        margin-bottom:
            30px;

    }


    .hero h1 {

        font-size:
            40px;

        letter-spacing:
            -1.2px;

    }


    .hero-subtitle {

        font-size:
            19px;

    }


    .screenshots-grid {

        grid-template-columns:
            1fr;

        gap:
            20px;

    }


    .shot-card {

        min-height:
            230px;

        border-radius:
            20px;

    }


    .shot-card p {

        font-size:
            18px;

    }


    .bg-dot,
    .bg-shape,
    .bg-curve {

        opacity:
            0.65;

    }

}