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

.hero{

    padding:80px 0;

}

.hero-box{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.hero h1{

    font-size:52px;

    line-height:1.2;

    margin-bottom:20px;

}

.hero h2{

    font-size:30px;

    color:var(--primary);

    margin-bottom:20px;

}

.hero p{

    color:var(--text-light);

    font-size:20px;

    margin-bottom:30px;

}

.hero-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-circle{

    width:380px;

    height:380px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    display:flex;

    align-items:center;

    justify-content:center;

    color:white;

    font-size:42px;

    font-weight:bold;

    box-shadow:var(--shadow-lg);

}

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

@media(max-width:900px){

.hero-box{

grid-template-columns:1fr;

text-align:center;

}

.hero h1{

font-size:38px;

}

.hero-circle{

width:260px;

height:260px;

font-size:30px;

}

}
/* ==========================
   HERO STATS
========================== */

.hero-stats{

display:flex;

gap:15px;

margin-top:35px;

flex-wrap:wrap;

}

.stat-card{

background:white;

padding:15px 20px;

border-radius:18px;

box-shadow:var(--shadow-sm);

display:flex;

align-items:center;

gap:10px;

transition:var(--transition);

}

.stat-card:hover{

transform:translateY(-5px);

box-shadow:var(--shadow-md);

}

.stat-card span{

font-size:24px;

}

.stat-card strong{

font-size:15px;

}
/* ===================================
   HERO ANIMATION
=================================== */

@keyframes floating {

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

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

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

}

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    background:
    radial-gradient(circle at top left,#E0F2FE 0%,transparent 35%),
    radial-gradient(circle at bottom right,#DBEAFE 0%,transparent 30%);

}
/* ===================================
   CALCULATOR
=================================== */

.calculator{

padding:100px 0;

}

.calculator-card{

max-width:900px;

margin:auto;

}

.section-title{

text-align:center;

margin-bottom:40px;

}

.section-title h2{

font-size:42px;

margin-bottom:10px;

}

.section-title p{

color:var(--text-light);

}

.calculator-grid{

display:grid;

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

gap:25px;

margin-bottom:35px;

}

.form-group{

display:flex;

flex-direction:column;

}

.form-group label{

margin-bottom:10px;

font-weight:700;

}

.form-group input{

padding:18px;

border-radius:14px;

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

font-size:18px;

transition:.3s;

}

.form-group input:focus{

outline:none;

border-color:var(--primary);

box-shadow:0 0 0 4px rgba(37,99,235,.15);

}

.calculator-btn{

width:100%;

font-size:20px;

padding:18px;

}

@media(max-width:768px){

.calculator-grid{

grid-template-columns:1fr;

}

}
/* ===================================
   RESULTS
=================================== */

.result-box .icon{

width:70px;
height:70px;

margin:0 auto 20px;

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

font-size:34px;

border-radius:50%;

background:#EEF4FF;

}
.profit .icon{

background:#DCFCE7;

}

.roi .icon{

background:#DBEAFE;

}

.investment .icon{

background:#F3E8FF;

}

.fees .icon{

background:#FEF3C7;

}
.result-box{

background:#fff;

border-radius:20px;

padding:30px;

text-align:center;

box-shadow:var(--shadow-sm);

transition:var(--transition);

}

.result-box:hover{

transform:translateY(-8px);

box-shadow:var(--shadow-lg);

}


.result-box h3{

margin-bottom:10px;

font-size:20px;

}

.result-box strong{

font-size:26px;

display:block;

color:var(--primary);

}

.profit{

border-top:5px solid #10B981;

}

.roi{

border-top:5px solid #2563EB;

}

.investment{

border-top:5px solid #8B5CF6;

}

.fees{

border-top:5px solid #F59E0B;

}


/* ===================================
   RESULTS DASHBOARD
=================================== */

.results-dashboard{

    display:grid;

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

    gap:20px;

    margin-top:45px;

}

@media(max-width:900px){

    .results-dashboard{

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

    }

}

@media(max-width:600px){

    .results-dashboard{

        grid-template-columns:1fr;

    }

}
/* رسالة التنبيه */

.message{

    margin-top:20px;

    text-align:center;

    font-weight:bold;

    min-height:30px;

}

.message.error{

    color:#EF4444;

}

.message.success{

    color:#10B981;

}
.btn:disabled{

    opacity:.7;

    cursor:not-allowed;

}
.result-box small{

    display:block;

    color:var(--text-light);

    font-size:14px;

    margin-bottom:12px;

}
/* ===============================
   DARK MODE BUTTON
================================ */

.theme-toggle{

position:fixed;

top:20px;

left:20px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#2563EB;

color:#fff;

font-size:24px;

cursor:pointer;

box-shadow:0 10px 25px rgba(0,0,0,.15);

z-index:999;

transition:.3s;

}

.theme-toggle:hover{

transform:scale(1.08);

}
/* ===========================
   DARK MODE
=========================== */

body.dark-mode{

background:#0F172A;

color:#F8FAFC;

}

body.dark-mode .card{

background:#1E293B;

}

body.dark-mode input{

background:#334155;

color:white;

border-color:#475569;

}

body.dark-mode .result-box{

background:#1E293B;

color:white;

}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode p,
body.dark-mode label,
body.dark-mode small,
body.dark-mode strong{

    color:#F8FAFC;

}
body.dark-mode .badge{

    background:#1E40AF;

    color:#fff;

}

body.dark-mode .stat-card{

    background:#1E293B;

    color:#fff;

}

body.dark-mode .stat-card strong{

    color:#fff;

}
body.dark-mode input::placeholder{

    color:#CBD5E1;

}
body.dark-mode .btn{

    color:white;

}
/* ===========================
   COPY BUTTON
=========================== */

.copy-btn{

margin-top:15px;

background:#10B981;

color:#fff;

}

.copy-btn:hover{

background:#059669;

}
/* PDF BUTTON */

.pdf-btn{

margin-top:15px;

background:#DC2626;

color:#fff;

}

.pdf-btn:hover{

background:#B91C1C;

}
/* ========================================
   Dark Mode
======================================== */

body{

    background:var(--background);

    color:var(--text);

    transition:.3s;

}

body.dark{

    background:#0f172a;

    color:#f8fafc;

}

body.dark .card{

    background:#1e293b;

    border-color:#334155;

}

body.dark .input{

    background:#0f172a;

    color:#fff;

    border-color:#334155;

}

body.dark .input-label{

    color:#fff;

}

body.dark .tool-subtitle{

    color:#cbd5e1;

}

body.dark .result-card{

    background:#0f172a;

    border-color:#334155;

}

body.dark .result-item{

    border-color:#334155;

}