/* ==========================================
   ARVEX - Enterprise Network Solutions
   Main Stylesheet
   ========================================== */


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

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;

    background:
        radial-gradient(circle at top left,
        rgba(37,99,235,.18),
        transparent 35%),

        radial-gradient(circle at bottom right,
        rgba(59,130,246,.08),
        transparent 30%),

        linear-gradient(
        160deg,
        #0F172A 0%,
        #111827 55%,
        #020617 100%);

    color:#F8FAFC;

    min-height:100vh;

    overflow-x:hidden;
}


/* ========= COLORS ========= */

:root{

    --primary:#2563EB;
    --primary-hover:#3B82F6;

    --background:#0F172A;
    --surface:#1E293B;
    --surface-hover:#24364a;

    --text:#F8FAFC;
    --text-soft:#CBD5E1;

    --border:rgba(255,255,255,.08);

}


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

a{

    color:inherit;

    text-decoration:none;

}


/* ========= HEADER ========= */

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:82px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 60px;

    background:rgba(15,23,42,.88);

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.06);

    z-index:1000;

}


/* ========= LOGO ========= */

.logo{

    font-size:2rem;

    font-weight:900;

    letter-spacing:4px;

    color:white;

    transition:.25s;

}

.logo:hover{

    color:var(--primary);

}


/* ========= RIGHT SIDE ========= */

.header-right{

    display:flex;

    align-items:center;

}


/* ========= NAVIGATION ========= */

.nav-links{

    display:flex;

    align-items:center;

    height:82px;

    gap:0;

}


/* ========= MENU ========= */

.nav-link{

    display:flex;

    align-items:center;

    justify-content:center;

    height:82px;

    padding:0 26px;

    color:var(--text-soft);

    font-weight:600;

    font-size:.95rem;

    letter-spacing:.4px;

    border-bottom:3px solid transparent;

    transition:
        color .25s,
        background .25s,
        border-color .25s;

}

.nav-link:hover{

    color:white;

    background:rgba(37,99,235,.18);

    border-bottom:3px solid var(--primary);

}


/* ========= MAIN ========= */

.main{

    width:100%;

    padding-top:140px;

    padding-bottom:90px;

    display:flex;

    justify-content:center;

}


/* ========= PAGE WRAPPER ========= */

.page-content{

    width:1200px;

    max-width:92%;

}


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

.hero{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:60px;

    align-items:center;

    margin-bottom:90px;

}


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

.page-heading{

    font-size:4.2rem;

    line-height:1.05;

    font-weight:800;

    margin-bottom:28px;

}


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

.page-copy{

    color:var(--text-soft);

    font-size:1.15rem;

    line-height:1.9;

    max-width:700px;

}


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

.hero-buttons{

    margin-top:40px;

    display:flex;

    gap:18px;

}


/* ========= PRIMARY BUTTON ========= */

.btn{

    padding:15px 30px;

    border-radius:12px;

    font-weight:700;

    transition:.25s;

}


.btn-primary{

    background:var(--primary);

    color:white;

}

.btn-primary:hover{

    background:var(--primary-hover);

    transform:translateY(-2px);

}


/* ========= SECONDARY ========= */

.btn-secondary{

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

    background:rgba(255,255,255,.03);

    color:white;

}

.btn-secondary:hover{

    background:rgba(255,255,255,.06);

}

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

.section{

    margin:90px 0;

}

.section-title{

    font-size:2.3rem;

    font-weight:800;

    margin-bottom:20px;

    color:white;

}

.section-description{

    color:var(--text-soft);

    line-height:1.8;

    max-width:760px;

    margin-bottom:50px;

}


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

.section-grid{

    display:grid;

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

    gap:30px;

}


/* ==========================================
   FEATURE CARD
========================================== */

.feature-panel,
.card{

    position:relative;

    background:rgba(30,41,59,.92);

    border:1px solid rgba(255,255,255,.06);

    border-radius:22px;

    padding:34px;

    overflow:hidden;

    transition:
        transform .35s,
        border-color .35s,
        box-shadow .35s;

}


/* kis kék csík felül */

.feature-panel::before,
.card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        #2563EB,
        #60A5FA
    );

}


.feature-panel:hover,
.card:hover{

    transform:translateY(-8px);

    border-color:rgba(59,130,246,.45);

    box-shadow:

        0 18px 45px rgba(0,0,0,.30),

        0 0 25px rgba(37,99,235,.10);

}


/* ==========================================
   CARD TITLE
========================================== */

.feature-panel h3,
.card h3{

    font-size:1.3rem;

    color:white;

    margin-bottom:18px;

}


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

.feature-panel p,
.card p,
.card li,
.card dd{

    color:var(--text-soft);

    line-height:1.8;

}


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

.card-list{

    list-style:none;

    display:grid;

    gap:14px;

    margin-top:12px;

}


.card-list li{

    display:flex;

    align-items:center;

}


.card-list li::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:#3B82F6;

    margin-right:12px;

}


/* ==========================================
   HERO IMAGE PANEL
========================================== */

.hero-side{

    display:flex;

    justify-content:center;

    align-items:center;

}


.hero-box{

    width:100%;

    height:420px;

    border-radius:26px;

    background:

        linear-gradient(

            145deg,

            rgba(37,99,235,.18),

            rgba(255,255,255,.02)

        );

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

    backdrop-filter:blur(12px);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:7rem;

    color:#60A5FA;

}


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

.contact-box{

    display:flex;

    flex-direction:column;

    gap:10px;

}


.contact-title{

    font-size:1rem;

    font-weight:700;

    color:white;

}


.contact-value{

    color:var(--text-soft);

}


/* ==========================================
   FLASH MESSAGE
========================================== */

.flash-container{

    margin-top:110px;

    display:flex;

    justify-content:center;

}


.flash-message{

    padding:16px 26px;

    border-radius:14px;

    background:rgba(16,185,129,.15);

    color:#6EE7B7;

    border:1px solid rgba(16,185,129,.25);

}


/* ==========================================
   DIVIDER
========================================== */

.divider{

    width:100%;

    height:1px;

    margin:70px 0;

    background:rgba(255,255,255,.06);

}


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

.footer{

    margin-top:120px;

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

    padding:35px;

    text-align:center;

    color:#94A3B8;

}


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

::-webkit-scrollbar{

    width:11px;

}

::-webkit-scrollbar-track{

    background:#111827;

}

::-webkit-scrollbar-thumb{

    background:#2563EB;

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:#3B82F6;

}


/* ==========================================
   SELECTION
========================================== */

::selection{

    background:#2563EB;

    color:white;

}


/* ==========================================
   FADE ANIMATION
========================================== */

.fade-up{

    animation:fadeUp .8s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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


/* ========= LARGE SCREENS ========= */

@media (min-width:1400px){

    .page-content{

        width:1300px;

    }


    .page-heading{

        font-size:4.8rem;

    }

}



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

@media (max-width:1024px){


    .header{

        padding:0 30px;

    }


    .hero{

        grid-template-columns:1fr;

        gap:40px;

        text-align:center;

    }


    .page-copy{

        margin:auto;

    }


    .hero-buttons{

        justify-content:center;

    }


    .hero-side{

        order:-1;

    }


    .hero-box{

        height:320px;

        font-size:5rem;

    }


}



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

@media (max-width:720px){


    .header{

        height:auto;

        min-height:75px;

        padding:18px 20px;

        flex-direction:column;

        gap:15px;

    }


    .logo{

        font-size:1.7rem;

    }


    .header-right{

        width:100%;

    }


    .nav-links{

        width:100%;

        height:auto;

        justify-content:center;

        flex-wrap:wrap;

    }


    .nav-link{

        height:45px;

        padding:0 14px;

        font-size:.85rem;

    }



    .main{

        padding-top:160px;

        padding-bottom:60px;

    }


    .page-content{

        max-width:90%;

    }



    .page-heading{

        font-size:2.8rem;

    }


    .page-copy{

        font-size:1rem;

    }



    .hero-buttons{

        flex-direction:column;

        width:100%;

    }


    .btn{

        width:100%;

        text-align:center;

    }


    .section-title{

        font-size:1.9rem;

    }


    .feature-panel,
    .card{

        padding:25px;

    }


}



/* ==========================================
   MICRO INTERACTIONS
========================================== */


/* link underline animation */

.text-link{

    position:relative;

    color:#60A5FA;

}


.text-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-5px;

    width:0;

    height:2px;

    background:#3B82F6;

    transition:.25s;

}


.text-link:hover::after{

    width:100%;

}



/* floating effect */

.float{

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

}


@keyframes floating{


    0%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-12px);

    }


    100%{

        transform:translateY(0);

    }

}



/* ==========================================
   ICON STYLE
========================================== */


.icon{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:rgba(37,99,235,.15);

    color:#60A5FA;

    font-size:1.8rem;

    margin-bottom:22px;

}



/* ==========================================
   BADGE
========================================== */


.badge{

    display:inline-flex;

    align-items:center;

    padding:8px 16px;

    border-radius:50px;

    background:rgba(37,99,235,.15);

    border:1px solid rgba(59,130,246,.25);

    color:#93C5FD;

    font-size:.85rem;

    font-weight:700;

    margin-bottom:25px;

}



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


.hero-box::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    background:#2563EB;

    filter:blur(90px);

    opacity:.25;

}



/* ==========================================
   ACCESSIBILITY
========================================== */


button,
a{

    -webkit-tap-highlight-color:transparent;

}


:focus-visible{

    outline:2px solid #60A5FA;

    outline-offset:4px;

}

.language-switch {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-left: 28px;

}

.lang-link {

    text-decoration: none;

    color: #c7d5ea;

    font-weight: 700;

    font-size: .95rem;

    transition: .2s;

}

.lang-link:hover {

    color: #ffffff;

}

.lang-link.active {

    color: #4f8cff;

}

.lang-divider {

    color: rgba(255,255,255,.35);

}
/* ==========================
   Contact Form
   ========================== */

.contact-form-container {
    max-width: 700px;
    margin: 50px auto 0;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-weight: 600;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #d5d9e0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    box-sizing: border-box;
}

.form-group textarea {
    resize: vertical;
    min-height: 180px;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #1d4ed8;
}

.contact-submit {
    align-self: flex-start;
    padding: 13px 26px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
}

.form-errors {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-errors span {
    font-size: 0.9rem;
}

.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ==========================
   Contact Details
   ========================== */

.contact-details {
    max-width: 700px;
    margin: 40px auto 0;
    padding-top: 28px;
    border-top: 1px solid #e5e7eb;

    display: flex;
    justify-content: center;
    gap: 60px;
}

.contact-detail {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact-detail-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.contact-detail a {
    text-decoration: none;
}

.contact-detail a:hover {
    text-decoration: underline;
}