/* ==========================================
   Landing Page (index.php)
========================================== */

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

:root{

    --primary:#ff0000;
    --primary-hover:#e00000;

    --bg:#0f172a;
    --card:#1e293b;

    --border:#334155;

    --text:#ffffff;
    --muted:#94a3b8;

    --success:#22c55e;

    --radius:18px;

}

html{

    font-size:16px;

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;

    background:var(--bg);

    color:var(--text);

    min-height:100vh;

    -webkit-font-smoothing:antialiased;

}

.wrapper{

    width:100%;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px 20px;

}

.card{

    width:100%;

    max-width:460px;

    background:var(--card);

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

    border-radius:22px;

    padding:38px 32px;

    text-align:center;

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

}

.logo{

    width:80px;

    height:80px;

    margin:auto;

    margin-bottom:22px;

    border-radius:22px;

    background:var(--primary);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    font-weight:bold;

}

h1{

    font-size:34px;

    line-height:46px;

    font-weight:700;

}

.highlight{

    color:#ff4040;

}

.subtitle{

    margin-top:20px;

    color:#cbd5e1;

    font-size:15px;

    line-height:30px;

}

.online{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin:28px 0;

    padding:12px 20px;

    border-radius:50px;

    background:#111827;

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

    color:var(--success);

    font-size:14px;

}

.btn{

    display:block;

    width:100%;

    text-decoration:none;

    padding:16px;

    border-radius:15px;

    font-size:16px;

    font-weight:600;

    transition:.25s;

}

.google{

    background:#fff;

    color:#111827;

}

.google:hover{

    transform:translateY(-2px);

}

.login{

    margin-top:18px;

    background:var(--primary);

    color:#fff;

}

.login:hover{

    background:var(--primary-hover);

}

.register{

    margin-top:15px;

    background:transparent;

    color:#fff;

    border:2px solid #475569;

}

.register:hover{

    border-color:var(--primary);

}

.or{

    position:relative;

    margin:24px 0;

    color:var(--muted);

    font-size:14px;

}

.or::before{

    content:"";

    position:absolute;

    left:0;

    top:50%;

    width:40%;

    height:1px;

    background:#334155;

}

.or::after{

    content:"";

    position:absolute;

    right:0;

    top:50%;

    width:40%;

    height:1px;

    background:#334155;

}

.features{

    margin-top:35px;

    text-align:left;

}

.features div{

    padding:14px 0;

    border-bottom:1px solid #334155;

    color:#e2e8f0;

    font-size:15px;

}

.footer{

    margin-top:35px;

    color:#64748b;

    font-size:13px;

    line-height:22px;

}

/* ===========================
   Tablet
=========================== */

@media (max-width:768px){

    .wrapper{

        align-items:flex-start;

        padding:25px 18px;

    }

    .card{

        max-width:100%;

        padding:30px 24px;

    }

    h1{

        font-size:30px;

        line-height:40px;

    }

}

/* ===========================
   Mobile
=========================== */

@media (max-width:480px){

    .wrapper{

        padding:15px;

    }

    .card{

        border-radius:18px;

        padding:24px 20px;

    }

    .logo{

        width:72px;

        height:72px;

        font-size:30px;

    }

    h1{

        font-size:28px;

        line-height:36px;

    }

    .subtitle{

        font-size:14px;

        line-height:26px;

    }

    .btn{

        padding:15px;

        font-size:15px;

    }

    .features div{

        font-size:14px;

    }

}

/* ===========================
   Small Mobile
=========================== */

@media (max-width:360px){

    .card{

        padding:20px 16px;

    }

    h1{

        font-size:24px;

        line-height:32px;

    }

    .subtitle{

        line-height:24px;

    }

}