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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#07111f;
    color:white;
    overflow-x:hidden;
}

/* ====================================== */
/* SCROLLBAR */
/* ====================================== */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#07111f;
}

::-webkit-scrollbar-thumb{
    background:#17a2b8;
    border-radius:10px;
}

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

.hero{
    min-height:100vh;
    padding:40px 80px;

    background:
    radial-gradient(circle at top left, #0d6efd22, transparent 40%),
    radial-gradient(circle at bottom right, #17a2b822, transparent 40%),
    #07111f;
}

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

.navbar{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    margin-bottom:100px;
}

.logo img{
    width:250px;
    height:auto;
}

/* ====================================== */
/* NAV LINKS */
/* ====================================== */

.nav-links{
    display:flex;
    gap:40px;
    list-style:none;
}

.nav-links a{
    color:#b5c2d1;
    text-decoration:none;
    transition:0.3s;
}

.nav-links a:hover{
    color:#17a2b8;
}

/* ====================================== */
/* LANGUAGE SWITCH */
/* ====================================== */

.language-switch button{
    background:none;
    border:1px solid #17a2b8;
    color:white;
    padding:10px 18px;
    margin-left:10px;
    cursor:pointer;
    transition:0.3s;
}

.language-switch button:hover{
    background:#17a2b8;
}

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

.hero-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:100px;
}

/* ====================================== */
/* TEXT */
/* ====================================== */

.text-section{
    max-width:650px;
}

.text-section h1{
    font-size:72px;
    line-height:1.1;
    margin-bottom:30px;
}

.text-section p{
    font-size:24px;
    color:#b5c2d1;
    margin-bottom:40px;
    line-height:1.6;
}

/* ====================================== */
/* BUTTONS */
/* ====================================== */

.hero-buttons button{
    padding:16px 28px;
    margin-right:20px;
    border:none;
    cursor:pointer;
    font-size:16px;
    transition:0.3s;
}

.hero-buttons button:first-child{
    background:#17a2b8;
    color:white;
}

.hero-buttons button:last-child{
    background:transparent;
    border:1px solid #17a2b8;
    color:white;
}

.hero-buttons button:hover{
    transform:translateY(-4px);
}

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

.hero-visual{
    width:650px;
    height:650px;

    display:flex;
    justify-content:center;
    align-items:center;

    position:relative;
}

.pendulum-svg{
    width:100%;
    height:100%;
    overflow:visible;
}

/* ====================================== */
/* PENDULUM */
/* ====================================== */

.arc-dots{
    fill:none;

    stroke:#1cb5d8;

    stroke-width:5;

    stroke-linecap:round;

    stroke-dasharray:1 14;

    opacity:0.45;
}

.arc-line{
    fill:none;

    stroke:#0d6efd;

    stroke-width:6;

    stroke-linecap:round;

    stroke-dasharray:800;

    stroke-dashoffset:800;

    animation:drawArc 4s ease-in-out infinite alternate;
}

.pendulum-group{
    transform-origin:250px 120px;

    animation:swing 4s ease-in-out infinite alternate;
}

.pendulum-line{
    stroke:#0d6efd;
    stroke-width:5;
}

.pendulum-ball{
    fill:#0d6efd;

    filter:drop-shadow(0 0 18px #0d6efd);
}

/* ====================================== */
/* ANIMATIONS */
/* ====================================== */

@keyframes swing{

    0%{
        transform:rotate(-28deg);
    }

    100%{
        transform:rotate(28deg);
    }

}

@keyframes drawArc{

    0%{
        stroke-dashoffset:800;
        opacity:0.3;
    }

    100%{
        stroke-dashoffset:220;
        opacity:1;
    }

}

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

.content-section{
    padding:120px 80px;
}

.dark-section{
    background:#091726;
}

.content-section h2{
    font-size:48px;
    margin-bottom:40px;
    color:#17a2b8;
}

.content-section p{
    max-width:900px;
    color:#b5c2d1;
    line-height:1.8;
    margin-bottom:20px;
    font-size:18px;
}

/* ====================================== */
/* SERVICE CARDS */
/* ====================================== */

.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:30px;
}

.service-card{
    position:relative;

    width:100%;
    height:260px;

    perspective:1200px;
}

.card-front,
.card-back{

    position:absolute;

    width:100%;
    height:100%;

    backface-visibility:hidden;

    background:#0d1b2d;

    border:1px solid #16314a;

    padding:28px;

    transition:transform 0.8s ease;
}

.card-front{
    z-index:2;
}

.card-back{

    transform:rotateY(180deg);

    display:flex;
    align-items:center;
}

.service-card:hover .card-front{
    transform:rotateY(180deg);
}

.service-card:hover .card-back{
    transform:rotateY(360deg);
}

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

.hu-title{
    display:block;

    color:white;

    font-size:14px;

    letter-spacing:1px;

    margin-bottom:10px;

    text-transform:uppercase;
}

.en-subtitle{
    display:block;

    color:#17a2b8;

    font-size:12px;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:25px;
}

.service-title{
    font-size:34px;
    color:white;
    line-height:1.2;
}

.service-description{
    color:#17a2b8;
    line-height:1.8;
    font-size:16px;
    margin-top:18px;
}

/* ====================================== */
/* BULLET LIST */
/* ====================================== */

.card-back ul{
    list-style:none;
    width:100%;
}

.card-back li{

    margin-bottom:18px;

    color:#d7e2ee;

    position:relative;

    padding-left:24px;

    line-height:1.6;
}

.card-back li::before{

    content:"•";

    position:absolute;

    left:0;

    color:#17a2b8;

    font-size:22px;

    top:-2px;
}

/* ====================================== */
/* METHOD */
/* ====================================== */

.method-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:30px;
}

.method-item{
    border-left:2px solid #17a2b8;
    padding-left:20px;
}

.method-item span{
    font-size:42px;
    color:#17a2b8;
    display:block;
    margin-bottom:10px;
}

.method-item h3{
    margin-bottom:15px;
}

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

.contact-box{
    background:#0d1b2d;
    padding:40px;
    max-width:600px;
    border:1px solid #16314a;
}

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

footer{
    text-align:center;
    padding:40px;
    color:#6f8194;
    border-top:1px solid #13283f;
}

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

@media(max-width:1100px){

    .hero-content{
        flex-direction:column;
        text-align:center;
    }

    .navbar{
        flex-direction:column;
        gap:30px;
    }

    .nav-links{
        flex-wrap:wrap;
        justify-content:center;
    }

    .text-section h1{
        font-size:52px;
    }

    .hero-visual{
        width:420px;
        height:420px;
    }

}/* ====================================== */
/* TELJES PRICING CSS */
/* Ezt másold a style.css LEGVÉRE */
/* ====================================== */

.pricing-intro{

    max-width:900px;

    color:#b5c2d1;

    line-height:1.9;

    margin-bottom:60px;

}

.pricing-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit, minmax(260px,1fr));

    gap:30px;

}

.pricing-card{

    background:#0d1b2d;

    border:
    1px solid rgba(23,162,184,0.12);

    padding:35px;

    transition:
    transform 0.35s ease,
    border 0.35s ease,
    box-shadow 0.35s ease;

}

.pricing-card:hover{

    transform:translateY(-8px);

    border:
    1px solid rgba(23,162,184,0.32);

    box-shadow:
    0 0 25px rgba(23,162,184,0.08);

}
/* ====================================== */
/* MOBILE OPTIMIZATION */
/* ====================================== */

@media (max-width: 900px){

    body{
        overflow-x:hidden;
    }

    .hero{
        padding:30px 24px 80px;
    }

    .navbar{
        flex-direction:column;
        align-items:center;
        gap:25px;
        margin-bottom:40px;
    }

    .logo img{
        width:180px;
    }

    .nav-links{
        flex-wrap:wrap;
        justify-content:center;
        gap:18px;
    }

    .nav-links a{
        font-size:15px;
    }

    .language-switch{
        display:flex;
        gap:10px;
    }

    .hero-content{
        flex-direction:column;
        text-align:center;
        gap:40px;
    }

    .text-section{
        width:100%;
    }

    .text-section h1{
        font-size:54px;
        line-height:1.05;
        margin-bottom:25px;
    }

    .text-section p{
        font-size:20px;
    }

    .hero-buttons{
        display:flex;
        justify-content:center;
        flex-wrap:wrap;
        gap:15px;
    }

    .hero-buttons button{
        margin:0;
    }

    .hero-visual{
        width:320px;
        height:320px;
    }

    .pendulum-svg{
        width:100%;
        height:100%;
    }

    .content-section{
        padding:80px 24px;
    }

    .content-section h2{
        font-size:52px;
        text-align:center;
        margin-bottom:50px;
    }

    .content-section p{
        text-align:left;
    }

    .cards,
    .pricing-grid,
    .insights-grid,
    .method-grid{

        grid-template-columns:1fr;
    }

    .service-card,
    .pricing-card,
    .insight-card,
    .contact-box{

        width:100%;
        max-width:100%;
    }

    .service-card{
        height:320px;
    }

    .pricing-card,
    .insight-card{
        padding:32px;
    }

    .contact-box{
        padding:32px;
    }

}
.pricing-card h3{

    font-size:26px;

    margin-bottom:20px;

    color:white;

    line-height:1.3;

}

.pricing-card p{

    color:#17a2b8;

    line-height:1.8;

}

.pricing-cta{

    margin-top:70px;

    text-align:center;

}

.pricing-cta p{

    margin-bottom:30px;

    color:#c6d3df;

    line-height:1.9;

}

.pricing-cta button{

    padding:16px 32px;

    background:#17a2b8;

    color:white;

    border:none;

    cursor:pointer;

    font-size:16px;

    transition:0.3s;

}

.pricing-cta button:hover{

    transform:translateY(-4px);

    background:#1390a2;

}/* ========================= */
/* OPERATIONAL INSIGHTS */
/* ========================= */

.insights-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit, minmax(320px, 1fr));

    gap:30px;

    margin-top:50px;
}

.insight-card{

    background:#0d1b2d;

    border:1px solid #16314a;

    padding:40px;

    transition:0.35s;

    position:relative;

    overflow:hidden;
}

.insight-card:hover{

    transform:translateY(-8px);

    border-color:#17a2b8;

    box-shadow:
    0 0 30px #17a2b822;
}

.insight-category{

    display:block;

    color:#17a2b8;

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:2px;

    margin-bottom:18px;

    font-weight:700;
}

.insight-card h3{

    font-size:30px;

    margin-bottom:20px;

    line-height:1.3;
}

.insight-card p{

    color:#b5c2d1;

    line-height:1.8;

    font-size:17px;
}