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

*{

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

body{

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:

        linear-gradient(

            135deg,

            #f8fbff 0%,

            #eef4ff 100%
        );

    color:#0A2540;

    min-height:100vh;

    padding:40px;
}

/* ==========================================
   CONTAINER
========================================== */

.container{

    max-width:1400px;

    margin:auto;
}

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

.hero{

    text-align:center;

    margin-bottom:50px;

    animation:fadeIn 1s ease;
}

.hero h1{

    font-size:64px;

    font-weight:800;

    letter-spacing:-2px;

    margin-bottom:20px;

    background:

        linear-gradient(
            90deg,
            #0A2540,
            #0066ff
        );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;
}

.hero p{

    font-size:20px;

    color:#4f647d;

    max-width:700px;

    margin:auto;

    line-height:1.7;
}

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

.calculator-card,
.result-card{

    background:
        rgba(255,255,255,0.7);

    backdrop-filter:blur(14px);

    border:

        1px solid
        rgba(255,255,255,0.4);

    border-radius:30px;

    padding:40px;

    margin-bottom:35px;

    box-shadow:

        0 10px 40px
        rgba(0,0,0,0.08);

    animation:slideUp 0.8s ease;
}

/* ==========================================
   FORM
========================================== */

.calculator-card{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:25px;
}

.calculator-card label{

    font-weight:700;

    margin-bottom:10px;

    display:block;

    color:#0A2540;
}

.calculator-card input{

    width:100%;

    padding:18px;

    border-radius:16px;

    border:

        1px solid
        rgba(0,0,0,0.08);

    background:white;

    font-size:16px;

    transition:0.3s;
}

.calculator-card input:focus{

    outline:none;

    border-color:#0066ff;

    box-shadow:

        0 0 0 4px
        rgba(0,102,255,0.1);
}

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

button{

    background:

        linear-gradient(
            135deg,
            #0066ff,
            #0047b3
        );

    color:white;

    border:none;

    border-radius:18px;

    padding:18px 30px;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:0.3s;

    box-shadow:

        0 8px 20px
        rgba(0,102,255,0.25);
}

button:hover{

    transform:
        translateY(-3px);

    box-shadow:

        0 12px 25px
        rgba(0,102,255,0.35);
}

/* ==========================================
   FULL WIDTH BUTTON
========================================== */

.full-width{

    grid-column:1 / -1;
}

/* ==========================================
   RESULT TITLES
========================================== */

.result-card h2{

    font-size:34px;

    margin-bottom:25px;

    font-weight:800;

    color:#0A2540;
}

.result-card h3{

    margin-top:30px;

    margin-bottom:15px;

    font-size:24px;
}

/* ==========================================
   TABLES
========================================== */

.result-table{

    width:100%;

    border-collapse:collapse;

    overflow:hidden;

    border-radius:20px;

    background:white;
}

.result-table th{

    background:#0A2540;

    color:white;

    padding:18px;

    font-size:16px;

    text-align:center;
}

.result-table td{

    padding:18px;

    border-bottom:

        1px solid
        rgba(0,0,0,0.05);

    text-align:center;

    font-size:15px;
}

.result-table tr:nth-child(even){

    background:#f7faff;
}

.result-table tr:hover{

    background:#eef5ff;
}

/* ==========================================
   CHART
========================================== */

canvas{

    margin-top:20px;
}

/* ==========================================
   PDF BUTTON
========================================== */

.download-section{

    text-align:center;

    margin-top:40px;
}

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

@keyframes fadeIn{

    from{

        opacity:0;
    }

    to{

        opacity:1;
    }
}

@keyframes slideUp{

    from{

        opacity:0;

        transform:
            translateY(40px);
    }

    to{

        opacity:1;

        transform:
            translateY(0);
    }
}

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

@media(max-width:900px){

    .calculator-card{

        grid-template-columns:1fr;
    }

    .hero h1{

        font-size:42px;
    }

    body{

        padding:20px;
    }
}



.intro-text{

    font-size:20px;

    line-height:1.9;

    color:#31456A;

    margin-top:25px;

    font-weight:400;
}

.intro-text strong{

    color:#0066ff;

    font-weight:700;
}

canvas{

    max-width:100% !important;

    height:420px !important;
}

.chart-description{

    font-size:28px;

    line-height:1.9;

    color:#31456A;

    font-weight:400;
}