/* ===========================================
   DigiPathform
=========================================== */

:root{
    --bg:#F8F8F5;
    --text:#101828;
    --muted:#7B8190;
    --accent:#3F5BA9;
}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    background:var(--bg);
    color:var(--text);
    overflow-x:hidden;
    position:relative;
}

/* ---------- Ambient Background ---------- */

.background{
    position:fixed;
    inset:0;
    z-index:-3;
    pointer-events:none;

    background:
    radial-gradient(circle at 12% 15%, rgba(79,108,255,.14), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(255,211,120,.10), transparent 28%),
    radial-gradient(circle at 55% 95%, rgba(135,214,255,.10), transparent 42%);
}

/* ---------- Network ---------- */

.background-grid{
    position:fixed;
    inset:0;
    z-index:-2;
    pointer-events:none;
    opacity:.45;
}

.background-grid svg{
    width:100%;
    height:100%;
}

.background-grid line{
    stroke:#A7B8FF;
    stroke-width:1.6;
    stroke-linecap:round;
    animation:fadeLine 10s ease-in-out infinite;
}

.background-grid circle{
    fill:#5A7BFF;
    animation:pulse 6s ease-in-out infinite;
}

@keyframes pulse{
    0%,100%{opacity:.35;}
    50%{opacity:1;}
}

@keyframes fadeLine{
    0%,100%{opacity:.35;}
    50%{opacity:.8;}
}

/* ---------- Layout ---------- */

.page{

    max-width:1100px;

    min-height:calc(100vh - 70px);

    margin:auto;

    padding:70px 60px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    position:relative;

}

/* ---------- Brand ---------- */

.brand{

    position:absolute;

    top:45px;

    left:60px;

    font-size:13px;

    letter-spacing:.45em;

    font-weight:600;

    color:var(--muted);

}

/* ---------- Hero ---------- */

.hero{
    max-width:820px;
}

.hero h1{

    font-size:clamp(60px,8vw,92px);

    font-weight:600;

    line-height:1.02;

    letter-spacing:-2px;

    margin-bottom:50px;

}

.hero h2{

    font-size:clamp(34px,5vw,54px);

    font-weight:300;

    color:var(--accent);

    line-height:1.2;

    margin-bottom:45px;

}

.subtitle{

    font-size:22px;

    color:var(--muted);

}

/* ---------- Footer ---------- */

.footer{

    border-top:1px solid rgba(16,24,40,.08);

}

.footer-content{

    max-width:1100px;

    margin:auto;

    padding:22px 60px;

}

.footer p{

    text-align:center;

    font-size:13px;

    color:var(--muted);

}

/* ---------- Fade Animation ---------- */

.brand,
.hero h1,
.hero h2,
.subtitle,
.footer{

    animation:fadeUp .8s ease both;

}

.hero h1{animation-delay:.15s;}
.hero h2{animation-delay:.35s;}
.subtitle{animation-delay:.55s;}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(18px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* ---------- Mobile ---------- */

@media(max-width:768px){

    .page{
        padding:120px 30px 60px;
    }

    .brand{
        left:30px;
        top:35px;
    }

    .hero h1{
        letter-spacing:-1px;
    }

    .footer-content{
        padding:20px 30px;
    }

}