.calculators-hero{
    position:relative;

    overflow:hidden;

    min-height:100vh;

    display:flex;

    align-items:center;

    padding:40px 0 80px;

    background:
    linear-gradient(135deg,#020617 0%,#0f172a 50%,#1e293b 100%);
}

/* GRID */

.grid-bg{
    position:absolute;

    inset:0;

    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);

    background-size:40px 40px;
}

/* ORBS */

.hero-orb{
    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:0.35;
}

.orb-one{
    width:320px;
    height:320px;

    background:#2563eb;

    top:-100px;
    left:-100px;
}

.orb-two{
    width:340px;
    height:340px;

    background:#06b6d4;

    bottom:-120px;
    right:-120px;
}

/* GRID */

.calculators-hero-grid{
    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:center;
}

/* LEFT */

.tools-badge{
    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 18px;

    border-radius:999px;

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

    color:white;

    font-weight:700;

    backdrop-filter:blur(14px);

    margin-bottom:24px;
}

.calculators-content h1{
    font-size:72px;

    line-height:1.02;

    color:white;

    margin-bottom:24px;
}

.calculators-content p{
    font-size:20px;

    line-height:1.7;

    color:rgba(255,255,255,0.8);

    margin-bottom:36px;

    max-width:620px;
}

/* PREVIEW */

.calculator-preview{
    position:relative;

    min-height:520px;
}

/* MAIN CARD */

.calculator-main-card{
    position:relative;

    z-index:2;

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

    border:1px solid rgba(255,255,255,0.1);

    backdrop-filter:blur(20px);

    border-radius:36px;

    padding:34px;

    color:white;

    box-shadow:
    0 20px 60px rgba(0,0,0,0.3);
}

.calculator-top{
    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:32px;
}

.calculator-icon{
    width:74px;
    height:74px;

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

    border-radius:24px;

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

    font-size:34px;
}

.calculator-status{
    padding:10px 16px;

    border-radius:999px;

    background:#22c55e;

    font-size:14px;

    font-weight:700;
}

/* FORMULAS */

.formula-line{
    font-size:26px;

    font-weight:600;

    margin-bottom:18px;

    color:#cbd5e1;
}

.calculator-display{
    margin-top:36px;

    background:#020617;

    border-radius:22px;

    padding:26px;

    font-size:38px;

    font-weight:700;

    letter-spacing:2px;

    color:#22c55e;
}

/* FLOATING */

.tool-card{
    position:absolute;

    z-index:5;

    width:200px;

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

    border:1px solid rgba(255,255,255,0.1);

    backdrop-filter:blur(18px);

    border-radius:28px;

    padding:22px;

    color:white;

    animation:toolFloat 6s ease-in-out infinite;
    cursor:pointer;
}

.tool-card span{
    font-size:34px;

    display:block;

    margin-bottom:14px;
}

.tool-card strong{
    display:block;

    font-size:22px;

    margin-bottom:8px;
}

.tool-card p{
    color:rgba(255,255,255,0.72);
}

/* POSITIONS */

.tool-one{
    top:-30px;
    right:140px;
}

.tool-two{
    top:160px;
    right:60px;

    animation-delay:2s;
}

.tool-three{
    top:350px;
    right:-20px;

    animation-delay:4s;
}

/* ANIMATION */

@keyframes toolFloat{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0px);
    }

}

/* MAIN CALCULATOR */

.main-calculator-section{
    background:#f8fafc;
}

.main-calculator-box{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

    align-items:center;

    background:white;

    border-radius:36px;

    padding:50px;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.05);
}

.small-label{
    display:inline-block;

    padding:8px 14px;

    border-radius:999px;

    background:#dbeafe;

    color:#2563eb;

    font-size:14px;

    font-weight:700;

    margin-bottom:20px;
}

.main-calculator-info h2{
    font-size:48px;

    line-height:1.1;

    margin-bottom:22px;
}

.main-calculator-info p{
    color:var(--muted);

    line-height:1.7;

    margin-bottom:34px;
}

/* MINI */

.mini-display{
    background:#0f172a;

    border-radius:32px;

    padding:30px;

    color:white;
    cursor:pointer;
}

.mini-screen{
    background:#020617;

    border-radius:20px;

    padding:26px;

    font-size:32px;

    text-align:center;

    margin-bottom:24px;

    color:#22c55e;
}

.mini-buttons{
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:14px;
}

.mini-buttons span{
    display:flex;

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

    background:#1e293b;

    border-radius:16px;

    padding:16px;

    font-weight:700;
}

/* CONVERTERS */

.converters-section{
    background:white;
}

.converters-grid{
    display:grid;

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

    gap:24px;
}

.converter-card{
    background:#f8fafc;

    border-radius:30px;

    padding:34px;

    transition:0.3s;
    cursor:pointer;
}

.converter-card:hover{
    transform:translateY(-8px);
}

.converter-icon{
    width:74px;
    height:74px;

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

    border-radius:24px;

    background:#dbeafe;

    font-size:34px;

    margin-bottom:24px;
}

.converter-card h3{
    font-size:30px;

    margin-bottom:14px;
}

.converter-card p{
    color:var(--muted);
}

/* CTA */

.calculators-cta{
    background:
    linear-gradient(135deg,#2563eb,#06b6d4);

    border-radius:40px;

    padding:80px 40px;

    text-align:center;

    color:white;
}

.calculators-cta h2{
    font-size:56px;

    margin-bottom:20px;
}

.calculators-cta p{
    font-size:20px;

    color:rgba(255,255,255,0.84);

    margin-bottom:36px;
}

/* MOBILE */

@media(max-width:980px){

    .calculators-hero-grid,
    .main-calculator-box{
        grid-template-columns:1fr;
    }

    .main-calculator-box{
        padding:20px;
    }

    .calculators-content h1{
        font-size:54px;
    }

}

@media(max-width:768px){

    html,
    body{
        overflow-x:hidden;
    }

    .calculators-hero{
        min-height:auto;

        padding:40px 0 50px;
    }

    .calculator-preview{
        min-height:400px;
    }

    .tool-card{
        width:170px;

        padding:18px;
    }

    .tool-one{
        top:-30px;
        right:90px;
    }

    .tool-two{
        top:130px;
        right:20px;
    }

    .tool-three{
        top:310px;
        right:-10px;
    }
    .calculator-status{
        transform:translate(30px,-20px);
    }

    .converter-card{
    border-radius:30px;

    padding:14px;
}

}

@media(max-width:640px){

    .calculators-content h1{
        font-size:40px;
        text-align: center;
    }

    .main-calculator-info h2,
    .calculators-cta h2{
        font-size:28px;
        text-align: center;
    }

    .formula-line{
        font-size:20px;
    }

    .calculator-display{
        font-size:28px;
    }

}