/* ==========================================================
   SENTRIX CYBER 2.0
   GLOBAL STYLE SHEET
   File : css/style.css
========================================================== */

/*=========================
        GOOGLE FONT
=========================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/*=========================
        VARIABLES
=========================*/

:root{

    --primary:#4F7CFF;
    --primary-light:#6A91FF;
    --secondary:#8B5CF6;
    --success:#2DD4BF;
    --danger:#FF4D67;
    --warning:#FBBF24;

    --bg:#050816;
    --bg-secondary:#0B1120;
    --bg-card:rgba(255,255,255,.05);

    --border:rgba(255,255,255,.08);

    --text:#FFFFFF;
    --text-light:#B8C1D1;
    --text-muted:#7A8499;

    --shadow-lg:
    0 30px 60px rgba(0,0,0,.45);

    --shadow-md:
    0 10px 35px rgba(0,0,0,.30);

    --radius:20px;

    --transition:.35s ease;

}

/*=========================
        RESET
=========================*/

*{

    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;

    min-height:100vh;

}

/*=========================
        SCROLLBAR
=========================*/

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#08111f;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:100px;

}

::-webkit-scrollbar-thumb:hover{

    background:#7396ff;

}

/*=========================
        LINKS
=========================*/

a{

    text-decoration:none;

    color:inherit;

}

/*=========================
        IMAGES
=========================*/

img{

    max-width:100%;

    display:block;

}

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

button{

    border:none;

    outline:none;

    cursor:pointer;

    transition:var(--transition);

    font-family:inherit;

}

/*=========================
        INPUTS
=========================*/

input,
textarea{

    border:none;

    outline:none;

    font-family:inherit;

}

/*=========================
        LISTS
=========================*/

ul{

    list-style:none;

}

/*=========================
        HEADINGS
=========================*/

h1{

    font-size:3rem;

    font-weight:800;

    line-height:1.1;

}

h2{

    font-size:2rem;

    font-weight:700;

}

h3{

    font-size:1.25rem;

    font-weight:700;

}

h4{

    font-size:1rem;

    font-weight:600;

}

p{

    color:var(--text-light);

    line-height:1.7;

}

/*=========================
      BACKGROUND EFFECTS
=========================*/

.background-grid{

    position:fixed;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    background-size:60px 60px;

    pointer-events:none;

    z-index:-3;

}

.background-glow{

    position:fixed;

    width:900px;

    height:900px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(79,124,255,.20),

    transparent 70%);

    top:-300px;

    right:-300px;

    filter:blur(60px);

    pointer-events:none;

    z-index:-2;

}

/*=========================
        MAIN
=========================*/

.main{

    margin-left:280px;

    padding:40px;

    min-height:100vh;

}

/*=========================
      SECTION TITLE
=========================*/

.section-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}

.section-header h2{

    margin-bottom:8px;

}

.section-header p{

    color:var(--text-muted);

}
/*=========================================================
    GLASS CARDS
=========================================================*/

.hero-card,
.trust-card,
.status-card,
.scanner-box,
.mission-card,
.achievement-card,
.family-card,
.scan-card,
.recommendation-card,
.panic-card{

    background:var(--bg-card);

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

    border-radius:var(--radius);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

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

    transition:var(--transition);

}

.hero-card:hover,
.trust-card:hover,
.status-card:hover,
.scanner-box:hover,
.mission-card:hover,
.achievement-card:hover,
.family-card:hover,
.scan-card:hover,
.recommendation-card:hover{

    transform:translateY(-6px);

    border-color:rgba(79,124,255,.45);

    box-shadow:0 20px 45px rgba(79,124,255,.15);

}

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

button{

    padding:14px 26px;

    border-radius:14px;

    font-weight:600;

    font-size:.95rem;

    transition:.35s;

}

button:hover{

    transform:translateY(-3px);

}

button:active{

    transform:scale(.97);

}

/* Primary */

.primary-btn,
#guardianButton,
#uploadButton,
#panicButton{

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

    color:#fff;

}

.primary-btn:hover,
#guardianButton:hover,
#uploadButton:hover,
#panicButton:hover{

    box-shadow:

    0 15px 40px rgba(79,124,255,.35);

}

/* Secondary */

.secondary-btn{

    background:#101A2F;

    color:#fff;

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

}

.secondary-btn:hover{

    background:#17233F;

}

/* Ghost */

.ghost-btn{

    background:transparent;

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

    color:var(--text);

}

.ghost-btn:hover{

    border-color:var(--primary);

    color:var(--primary);

}

/*=========================================================
        INPUTS
=========================================================*/

input,
textarea{

    width:100%;

    background:#0B1527;

    color:#fff;

    padding:18px 20px;

    border-radius:14px;

    border:1px solid rgba(255,255,255,.08);

    transition:.3s;

}

input::placeholder,
textarea::placeholder{

    color:#77839B;

}

input:focus,
textarea:focus{

    border-color:var(--primary);

    box-shadow:

    0 0 0 4px rgba(79,124,255,.18);

}

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

.upload-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin:25px 0;

}

.upload-buttons button{

    background:#0D1728;

    color:#fff;

    border:1px solid rgba(255,255,255,.08);

}

.upload-buttons button:hover{

    background:var(--primary);

}

/*=========================================================
        DROP ZONE
=========================================================*/

.dropzone{

    border:2px dashed rgba(255,255,255,.15);

    border-radius:20px;

    padding:70px 30px;

    text-align:center;

    transition:.35s;

}

.dropzone:hover{

    border-color:var(--primary);

    background:rgba(79,124,255,.05);

}

.upload-icon{

    font-size:60px;

    margin-bottom:20px;

}

/*=========================================================
        PROGRESS BAR
=========================================================*/

.progress{

    width:100%;

    height:12px;

    background:#132038;

    border-radius:100px;

    overflow:hidden;

    margin:18px 0;

}

.progress-fill{

    width:96%;

    height:100%;

    background:

    linear-gradient(

    90deg,

    #4F7CFF,

    #8B5CF6

    );

    border-radius:100px;

    animation:progressAnimation 2s ease;

}

/*=========================================================
        LIVE STATUS
=========================================================*/

.live-dot{

    width:12px;

    height:12px;

    display:inline-block;

    background:#00FF95;

    border-radius:50%;

    margin-right:8px;

    animation:pulse 2s infinite;

}

.online-dot{

    width:10px;

    height:10px;

    display:inline-block;

    border-radius:50%;

    background:#00FF95;

}

/*=========================================================
        UTILITIES
=========================================================*/

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}

.mt-20{

    margin-top:20px;

}

.mt-30{

    margin-top:30px;

}

.mt-50{

    margin-top:50px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-40{

    margin-bottom:40px;

}

.hidden{

    display:none;

}

.flex{

    display:flex;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.grid{

    display:grid;

    gap:25px;

}

/*=========================================================
        CONTAINERS
=========================================================*/

.container{

    width:min(1400px,95%);

    margin:auto;

}

.full-width{

    width:100%;

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

.hero-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:30px;

    margin-bottom:40px;

}

.hero-card{

    padding:50px;

    position:relative;

    overflow:hidden;

}

.hero-card::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    background:

    radial-gradient(circle,
    rgba(79,124,255,.30),
    transparent 70%);

    top:-220px;

    right:-180px;

    border-radius:50%;

}

.hero-card h1{

    margin:20px 0;

    max-width:700px;

}

.hero-card p{

    max-width:620px;

    margin-bottom:35px;

}

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

.trust-card{

    padding:35px;

}

.trust-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

#trustScore{

    font-size:3rem;

    color:var(--primary);

}

.trust-footer{

    display:grid;

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

    gap:20px;

    margin-top:30px;

}

.trust-footer h4{

    color:var(--text-muted);

    margin-bottom:10px;

}

.trust-footer p{

    color:#fff;

    font-size:1.4rem;

    font-weight:700;

}

/*=========================================================
            QUICK STATUS
=========================================================*/

.quick-status{

    display:grid;

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

    gap:25px;

    margin-bottom:50px;

}

.status-card{

    padding:30px;

}

.status-card h2{

    margin:15px 0;

    color:var(--success);

}

/*=========================================================
            SCANNER
=========================================================*/

.scanner-section{

    margin-bottom:60px;

}

.scanner-box{

    padding:40px;

}

#scannerInput{

    font-size:1rem;

    margin-bottom:20px;

}

/*=========================================================
            SECTION SPACING
=========================================================*/

.timeline-section,
.mission-section,
.achievement-section,
.family-section,
.threat-section,
.recommendation-section,
.guardian-section,
.scan-section,
.panic-section{

    margin-bottom:70px;

}

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

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

.hero-card{

    animation:float 8s ease-in-out infinite;

}

/*=========================================================
            PULSE
=========================================================*/

@keyframes pulse{

    0%{

        box-shadow:0 0 0 0 rgba(0,255,149,.8);

    }

    70%{

        box-shadow:0 0 0 18px rgba(0,255,149,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(0,255,149,0);

    }

}

/*=========================================================
        PROGRESS ANIMATION
=========================================================*/

@keyframes progressAnimation{

    from{

        width:0;

    }

}

/*=========================================================
            FADE IN
=========================================================*/

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.hero-card,
.trust-card,
.status-card,
.scanner-box{

    animation:fadeIn .8s ease;

}

/*=========================================================
            HOVER GLOW
=========================================================*/

.glow:hover{

    box-shadow:

    0 0 40px rgba(79,124,255,.35);

}

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

@media(max-width:1300px){

.hero-grid{

grid-template-columns:1fr;

}

.quick-status{

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

}

.main{

margin-left:90px;

}

}

@media(max-width:992px){

.main{

margin-left:0;

padding:25px;

}

.quick-status{

grid-template-columns:1fr 1fr;

}

.trust-footer{

grid-template-columns:1fr;

}

.section-header{

flex-direction:column;

align-items:flex-start;

gap:20px;

}

.hero-card{

padding:35px;

}

.hero-card h1{

font-size:2.2rem;

}

}

@media(max-width:768px){

.quick-status{

grid-template-columns:1fr;

}

.upload-buttons{

flex-direction:column;

}

.hero-card{

padding:30px;

}

.hero-card h1{

font-size:2rem;

}

h2{

font-size:1.5rem;

}

}

@media(max-width:480px){

.main{

padding:18px;

}

.hero-card{

padding:22px;

}

button{

width:100%;

}

input{

font-size:.9rem;

padding:16px;

}

.trust-footer{

gap:10px;

}

}

/*=========================================================
            4K DISPLAY
=========================================================*/

@media(min-width:1800px){

.main{

max-width:1800px;

margin-left:300px;

}

.hero-card{

padding:70px;

}

.hero-card h1{

font-size:4rem;

}

}

/*=========================================================
            END OF FILE
=========================================================*/