body {

    min-height:100vh;

    background:
            radial-gradient(
                    circle at top right,
                    rgba(59,130,246,.15),
                    transparent 35%
            ),
            var(--bg-primary);

    color:var(--text-primary);

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

}
main {
    margin-left:10px;
    margin-right:10px;

}

.hero {
    padding: 120px 0;
}

.hero h1 {
    margin-bottom: 20px;
}

section {
    margin-bottom: 80px;
}
:root {

    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;

    --card-bg: rgba(30,41,59,.75);

    --primary: #3b82f6;
    --primary-light: #60a5fa;

    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;

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

}
.section {

    padding:5rem 0;

}


.section-title {

    font-size:2.2rem;

    font-weight:700;

    margin-bottom:2rem;

}





.hero-section {

    min-height:70vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    margin-bottom: 0;

}



.hero-content {

    max-width:800px;

}



.hero-content h1 {

    font-size:4rem;

    font-weight:800;

}



.hero-content h2 {

    color:var(--primary-light);

}



.hero-content p {

    margin-top:1.5rem;

    color:var(--text-secondary);

    font-size:1.2rem;

}
.btn-main,
.btn-secondary {

    padding:.8rem 1.6rem;

    border-radius:14px;

    text-decoration:none;

    display:inline-flex;

    transition:.3s;

}


.btn-main {

    background:var(--primary);

    color:white;

}


.btn-main:hover {

    transform:translateY(-3px);

}



.btn-secondary {

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

    color:var(--text-primary);

}
.tech-grid {

    display:grid;

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

    gap:1.5rem;

}



.tech-card {

    background:var(--card-bg);

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

    border-radius:18px;

    padding:1.5rem;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:1rem;

}



.tech-card img {

    width:70px;

    height:70px;

    object-fit: contain;
}







.technology-badge {

    display:flex;

    align-items:center;

    gap:.5rem;

    padding:.4rem .8rem;

    border-radius: 50px;



    background:rgba(59,130,246,.12);

    color:var(--text-secondary);

    font-size:.85rem;

}



.technology-badge img {

    width:24px;

    height:24px;

    object-fit:contain;



}



.btn-primary-custom {

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    padding:.7rem 1.3rem;

    border-radius:12px;

    background:var(--primary);

    color:white;

    text-decoration:none;

    font-weight:600;

    transition:.25s ease;

}



.btn-primary-custom:hover {

    background:var(--primary-hover);

    transform:translateY(-2px);

    color:white;

}




.btn-secondary-custom {

    display:inline-flex;

    align-items:center;

    padding:.7rem 1.3rem;

    border-radius:12px;

    background:rgba(148,163,184,.15);

    color:var(--text-secondary);

    text-decoration:none;

    transition:.25s;

}



.btn-secondary-custom:hover {

    background:rgba(148,163,184,.3);

    color:white;

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


.main-footer {

    margin-top:5rem;

    padding:2rem 0;

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

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

    backdrop-filter:
            blur(12px);

}



.footer-container {

    max-width:1200px;

    margin:auto;

    padding:0 1.5rem;

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:var(--text-muted);

}



.footer-container p {

    margin:0;

}



.footer-links {

    display:flex;

    gap:1.5rem;

}



.footer-links a {

    color:var(--text-secondary);

    text-decoration:none;

    transition:.25s;

}



.footer-links a:hover {

    color:var(--primary-hover);

}



@media(max-width:768px){


    .footer-container {

        flex-direction:column;

        gap:1rem;

        text-align:center;

    }


}

img {
    max-width: 100%;
    height: auto;
    display: block;
}