:root {

    --bg-dark: #050816;
    --bg-panel: rgba(15, 22, 45, 0.75);

    --primary: #9dc44d;
    --secondary: #3a47d5;

    --text-main: #ffffff;
    --text-muted: rgba(255,255,255,.7);

    --glass-border: rgba(255,255,255,.12);

    --shadow-glow:
        0 0 40px rgba(0,217,255,.25);

    --transition:
        all .4s ease;

}


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


* {

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html {

    scroll-behavior:smooth;

}


body {

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

    background:
        var(--bg-dark);

    color:
        var(--text-main);

    overflow-x:hidden;

}



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


.fixed-bg {

    position:fixed;

    inset:0;

    width:100%;
    height:100%;


    background-image:
        url("../img/hatter1.jpg");

    background-size:
        cover;

    background-position:
        center center;

    background-repeat:
        no-repeat;


    z-index:-2;


}


/*
  Sötétítő réteg a háttér fölé
*/

.fixed-bg::after {

    content:"";

    position:absolute;

    inset:0;


    background:
        linear-gradient(
            180deg,
            rgba(5,8,22,.35),
            rgba(5,8,22,.85)
        );


}



/* ===========================
   GLOBAL SECTION
=========================== */


section {

    width:100%;

    position:relative;

}



img {

    max-width:100%;

    display:block;

}



h1,
h2,
h3 {

    font-weight:800;

    letter-spacing:-1px;

}



p {

    line-height:1.7;

    color:
        var(--text-muted);

}



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


.hero {

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:
        20px;


    background:
        transparent;


}



/* Hero tartalom */

.hero-content {

    max-width:1100px;

    display:flex;

    flex-direction:column;

    align-items:center;

}



/* Logo */


.hero-logo {

    width:min(45vw,420px);

    filter:
        drop-shadow(
            0 0 25px rgba(0,217,255,.05)
        );

}



/* Hero főcím */


.hero h1 {

    margin-top:40px;

    font-size:
        clamp(
            40px,
            6vw,
            90px
        );


    line-height:1.05;


    background:
        linear-gradient(
            90deg,
            #ffffff,
            var(--primary)
        );


    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;


    transform:
        translateY(40px);


}



/* Hero alcím */


.hero p {

    margin-top:25px;


    max-width:700px;


    font-size:
        clamp(
            16px,
            2vw,
            22px
        );


    transform:
        translateY(30px);


}

.hero-subtitle {

    margin-top:25px;

    font-size:20px;

    font-weight:600;

    letter-spacing:1px;

    color:var(--text-light);

    text-shadow:

        0 0 12px rgba(255,255,255,.15);


}

/* ===========================
   SCROLL INDICATOR
=========================== */


.scroll-indicator {


    margin-top:70px;
    display:flex;
    flex-direction:column;
    align-items:center;


    color:
        var(--text-muted);


    font-size:14px;


    letter-spacing:3px;


    text-transform:uppercase;


}



/*
   Kis animált vonal
*/


.scroll-indicator::after {


    content:"";


    margin-top:20px;


    width:2px;

    height:60px;


    background:
        linear-gradient(
            to bottom,
            var(--primary),
            transparent
        );


    animation:
        scrollLine 2s infinite;


}



@keyframes scrollLine {


    0% {

        transform:
            scaleY(0);

        transform-origin:
            top;

    }


    50% {

        transform:
            scaleY(1);

    }


    100% {

        transform:
            scaleY(0);

        transform-origin:
            bottom;

    }


}



/* ===========================
   GLASS PANEL ALAP
=========================== */


.glass {


    background:
        var(--bg-panel);


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


    backdrop-filter:
        blur(20px);


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


    box-shadow:
        var(--shadow-glow);


    border-radius:
        30px;


}


/* =====================================================
   STORY SECTION
===================================================== */


.story {

    position:relative;

    min-height:400vh;

}


/*
    A fixen maradó tartalom
*/

.story-wrapper {

    position:sticky;

    top:0;

    height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}


/*
    Egy bemutatkozó blokk
*/

.story-slide {

    position:absolute;

    width:100%;

    max-width:1400px;

    padding:40px;

    display:grid;

    grid-template-columns:1.2fr 0.8fr;

    gap:80px;

    align-items:center;

    opacity:0;

}


/*
    Kép / média rész
*/

.story-media {


    width:100%;

    aspect-ratio:1/1;


    overflow:hidden;


    border-radius:30px;


    /*box-shadow:

        0 0 60px color-mix(in srgb, var(--primary), transparent 90%); */


}


.story-media img {


    width:100%;

    height:100%;


    object-fit:cover;


    transform:scale(1.08);


}


/*
    Szöveges rész
*/

.story-text {


    max-width:520px;


}


.story-text h2 {

    margin-bottom:35px;

    font-size:
        clamp(
            36px,
            5vw,
            60px
        );

    line-height:1.1;


    color:#ffffff;


    text-shadow:

    0 0 8px var(--primary),
    0 0 20px rgba(0,255,120,.35);

}
.story-subtitle {

    margin-top:25px;

    font-size:20px;

    font-weight:600;

    letter-spacing:1px;

    color:var(--text-light);

    text-shadow:

        0 0 12px rgba(255,255,255,.15);


}


.story-body {


    color:var(--text-light);


}


.story-body p {

margin-top: 10px;
    font-size:18px;

    line-height:1.4;


    color:var(--text-muted);


}


/*
    Aktív slide
*/

.story-slide.active {


    opacity:1;


}



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


@media(max-width:900px){


    .story-slide {


        grid-template-columns:1fr;


        gap:40px;


        padding:30px;


    }



    .story-wrapper {


        align-items:flex-start;


        padding-top:80px;


    }



    .story-text {


        text-align:center;


        margin:auto;


    }


}
/* ===========================
   PORTFOLIO SECTION
=========================== */


.portfolio {

    min-height:100vh;

    padding:
        120px 60px;


    background:
        rgba(5,8,22,.65);


}



/* ===========================
   SECTION TITLE
=========================== */


.section-title {

    text-align:center;

    margin-bottom:80px;


}


.section-title h2 {


    color:#ffffff;

    background:none;

    -webkit-text-fill-color:#ffffff;

    text-shadow:
        0 0 15px var(--primary),
        0 0 35px color-mix(in srgb, var(--primary) 40%, transparent);

}



.section-title p {


    font-size:20px;


}



/* ===========================
   PORTFOLIO GRID
=========================== */


.portfolio-grid {


    width:100%;


    max-width:1400px;


    margin:
        0 auto;


    display:grid;


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


    gap:35px;


}



/* ===========================
   PORTFOLIO CARD
=========================== */


.portfolio-card {
    position:relative;
    overflow:hidden;
	border-radius:30px;
    background:
        rgba(15,22,45,.75);
    border:
        1px solid rgba(255,255,255,.12);
    backdrop-filter:
        blur(15px);
    -webkit-backdrop-filter:
        blur(15px);
    box-shadow:
        0 0 40px rgba(0,217,255,.12);
    opacity:0;
    transform:
        translateY(80px);
    transition:
        transform .5s ease,
        box-shadow .5s ease;



}



/*
    Hover
*/


.portfolio-card:hover {


    transform:
        translateY(-15px);



    box-shadow:


        0 20px 60px rgba(0,217,255,.25);



}



/* ===========================
   IMAGE
=========================== */


.portfolio-card img {


    width:100%;


    height:300px;


    object-fit:cover;


    transition:
        transform .8s ease;



}



.portfolio-card:hover img {


    transform:
        scale(1.12);


}



/*
    Kép fölötti fényréteg
*/


.portfolio-card::before {


    content:"";


    position:absolute;


    inset:0;


    background:


        linear-gradient(
            135deg,
            transparent,
            rgba(0,217,255,.15)
        );


    opacity:0;


    transition:
        opacity .4s ease;


    z-index:1;


}



.portfolio-card:hover::before {


    opacity:1;


}



/* ===========================
   CARD CONTENT
=========================== */


.portfolio-content {


    position:relative;


    padding:35px;


    z-index:2;


}



.portfolio-content h3 {


    font-size:28px;


    margin-bottom:15px;



}



.portfolio-content p {


    font-size:16px;


}



/* ===========================
   PORTFOLIO TAG
=========================== */


.portfolio-tag {


    position:absolute;


    top:25px;

    left:25px;


    z-index:3;


    padding:

        8px 18px;



    border-radius:30px;


    background:
        rgba(0,217,255,.15);



    border:

        1px solid rgba(0,217,255,.4);



    color:

        var(--primary);



    font-size:13px;


    letter-spacing:1px;


    text-transform:uppercase;


}



/* ===========================
   HOVER LIGHT EFFECT
=========================== */


.portfolio-card::after {


    content:"";


    position:absolute;


    width:150px;

    height:150px;


    top:-75px;

    right:-75px;


    background:

        radial-gradient(
            circle,
            rgba(0,217,255,.35),
            transparent 70%
        );



    opacity:0;


    transition:
        .5s;



}



.portfolio-card:hover::after {


    opacity:1;


}



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


@media(max-width:1100px){


    .portfolio {


        padding:

            100px 35px;


    }



    .portfolio-grid {


        grid-template-columns:

            repeat(
                2,
                1fr
            );


    }


}




/* ===========================
   MOBILE
=========================== */


@media(max-width:700px){


    .portfolio {


        padding:

            80px 20px;


    }



    .portfolio-grid {


        grid-template-columns:

            1fr;


        gap:25px;


    }



    .portfolio-card img {


        height:240px;


    }



    .portfolio-content {


        padding:25px;


    }



    .portfolio-content h3 {


        font-size:24px;


    }


}

}
/* =====================================================
   PORTFOLIO
===================================================== */


.portfolio{

    position:relative;

    padding:140px 7%;

    /* background:#070b18; */

}

/* -------------------------------------------------- */

.section-title{

    text-align:center;

    margin-bottom:80px;

}

.section-title h2{

    font-size:clamp(42px,5vw,64px);

    color:#ffffff;

    text-shadow:
        0 0 18px var(--primary);

}

.section-title p{

    margin-top:20px;

    color:var(--muted);

    font-size:20px;

}

/* -------------------------------------------------- */

.portfolio-grid{

    display:grid;

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

    gap:40px;

}

/* -------------------------------------------------- */

.portfolio-card{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    background:#0d1226;

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

    box-shadow:

        0 20px 50px rgba(0,0,0,.35),

        0 0 0 rgba(0,0,0,0);

}

.portfolio-card:hover{

    transform:

        translateY(-12px);

    box-shadow:

        0 35px 70px rgba(0,0,0,.45),

        0 0 35px color-mix(in srgb,var(--primary) 35%, transparent);

}

/* -------------------------------------------------- */

.portfolio-images{

    position:relative;

    width:100%;

    aspect-ratio:16/10;

    overflow:hidden;

}

/* -------------------------------------------------- */

.portfolio-images img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    opacity:0;

    transition:

        opacity .8s ease,

        transform 6s ease;

}

/* -------------------------------------------------- */

.portfolio-images img.active{

    opacity:1;

}

/* -------------------------------------------------- */

.portfolio-card:hover img.active{

    transform:scale(1.08);

}

/* -------------------------------------------------- */

.portfolio-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    background:
        rgba(0,0,0,.65);

    opacity:0;

    transition:
        opacity .45s ease;

    z-index:5;

}


/* Projekt cím */

.portfolio-overlay h3{

    color:#ffffff;

    font-size:32px;

    font-weight:700;

    margin:0;

    transform:translateY(25px);

    transition:
        transform .45s ease;

    text-shadow:
        0 0 20px var(--primary);

}


/* Megtekintés felirat */

.portfolio-overlay span{

    margin-top:15px;

    color:#ffffff;

    font-size:16px;

    opacity:.8;

    transform:translateY(25px);

    transition:
        transform .45s ease .1s;

}


/* Hover */

.portfolio-card:hover .portfolio-overlay{

    opacity:1;

}


.portfolio-card:hover .portfolio-overlay h3{

    transform:translateY(0);

}


.portfolio-card:hover .portfolio-overlay span{

    transform:translateY(0);

}

/* -------------------------------------------------- */

.portfolio-content{

    padding:28px;

}

.portfolio-content h3{


    color:#ffffff;

    font-size:28px;

    font-weight:700;

    margin-bottom:14px;

    text-shadow:
        0 0 15px rgba(0,255,120,.35);

}

.portfolio-content p{

    color:var(--muted);

    line-height:1.7;

}

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

@media(max-width:1100px){

    .portfolio-grid{

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

    }

}

@media(max-width:700px){

    .portfolio{

        padding:90px 20px;

    }

    .portfolio-grid{

        grid-template-columns:1fr;

        gap:30px;

    }

    .portfolio-content{

        padding:22px;

    }

}
/* =====================================================
   LIGHTBOX
===================================================== */


.lightbox{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.85);

    z-index:9999;

    opacity:0;

    visibility:hidden;

    transition:

        opacity .4s ease;

}


.lightbox.active{

    opacity:1;

    visibility:visible;

}



.lightbox img{

    max-width:85vw;

    max-height:80vh;

    border-radius:20px;

    box-shadow:

        0 0 50px rgba(0,0,0,.7),

        0 0 30px var(--primary);

}


/* gombok */

.lightbox button{

    position:absolute;

    background:none;

    border:none;

    color:white;

    font-size:50px;

    cursor:pointer;

}


.lightbox-close{

    top:30px;

    right:40px;

}


.lightbox-prev{

    left:40px;

}


.lightbox-next{

    right:40px;

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

.contact {

    padding:60px 20px 80px;

    background:#0b1020;

    text-align:center;

}


.contact-intro {

    max-width:800px;

    margin:0 auto 12px;

    color:#ffffff;

    font-size:clamp(28px,3vw,38px);

    font-weight:700;

    line-height:1.3;

    text-shadow:
        0 0 15px var(--primary),
        0 0 35px color-mix(in srgb, var(--primary) 40%, transparent);

}


.contact-subtitle {

    max-width:700px;

    margin:0 auto 40px;

    color:#bfbfbf;

    font-size:20px;

    line-height:1.6;

}


/* Elérhetőségek */

.contact-items {

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:15px;

}


/* Email és telefon */

.contact-items a {

    color:#ffffff;

    text-decoration:none;

    font-size:24px;

    font-weight:600;

    transition:

        color .3s ease,

        transform .3s ease;

}


.contact-items a:hover {

    color:var(--primary);

    transform:translateY(-4px);

}
.contact-items a::before {

    content:"→";

    color:var(--primary);

    margin-right:12px;

}



/* Mobil */

@media(max-width:768px){


    .contact {

        padding:50px 20px 60px;

    }


    .contact-subtitle {

        font-size:18px;

    }


    .contact-items a {

        font-size:20px;

    }

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

footer {

    padding:30px 20px;

    background:#070b16;

    text-align:center;

    color:#888;

    font-size:14px;

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

}


footer p {

    margin:0;

}