:root{
    --primary:#6F6DFF;
    --secondary:#00D9FF;
    --bg:#070B1D;
    --text:#EAF2FF;
    --glass:rgba(255,255,255,0.06);
}
/* ==========================
   GOOGLE FONT
========================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

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

body{

    font-family:'Poppins',sans-serif;
    color:white;
    background:#070B1D;
    overflow-x:hidden;
}
body::before{

content:"";

position:fixed;

width:600px;

height:600px;

background:#6F6DFF;

filter:blur(220px);

opacity:.12;

top:-150px;

left:-150px;

z-index:-2;

}

body::after{

content:"";

position:fixed;

width:600px;

height:600px;

background:#00D9FF;

filter:blur(220px);

opacity:.12;

bottom:-200px;

right:-200px;

z-index:-2;

}
/* ==========================
   Animated Background
========================== */

.background{

    position:fixed;
    inset:0;

   background:
radial-gradient(circle at top left, rgba(111,109,255,0.25), transparent 40%),
radial-gradient(circle at bottom right, rgba(0,217,255,0.25), transparent 40%);

    z-index:-3;
}

/* Floating glowing circles */

.background::before{

content:"";

position:absolute;

width:500px;
height:500px;

left:-120px;
top:-120px;

background:#4d5cff;

border-radius:50%;

filter:blur(180px);

animation:float1 12s ease-in-out infinite;

opacity:.55;

}

.background::after{

content:"";

position:absolute;

width:450px;
height:450px;

right:-150px;
bottom:-100px;

background:#00d9ff;

border-radius:50%;

filter:blur(170px);

animation:float2 14s ease-in-out infinite;

opacity:.45;

}

@keyframes float1{

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

}

@keyframes float2{

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

}

/* ==========================
   Navbar
========================== */

nav{

position:fixed;

top:20px;

left:50%;

transform:translateX(-50%);

width:92%;

padding:18px 40px;

display:flex;

justify-content:space-between;

align-items:center;

background:rgba(255,255,255,.06);

backdrop-filter:blur(18px);

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

border-radius:60px;

z-index:1000;

}
nav a.active{

color:#00d9ff;

}
.logo{

display:flex;

align-items:center;

gap:12px;

}

.logo img{

width:45px;

}

.logo h2{

font-weight:700;

}

.logo span{

color:#6f6dff;

}

nav ul{

display:flex;

gap:35px;

list-style:none;

}

nav a{

color:white;

text-decoration:none;

font-weight:500;

transition:.35s;

}

nav a:hover{
    color:#00D9FF;
}
.themeBtn{

width:45px;

height:45px;

border:none;

border-radius:50%;

background:#6f6dff;

color:white;

cursor:pointer;

font-size:18px;

transition:.4s;

}

.themeBtn:hover{

transform:rotate(20deg) scale(1.1);

}

/* ==========================
   Hero Section
========================== */
.hero{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:170px 20px 100px;

}

.heroContent{

width:100%;

max-width:900px;

display:flex;

flex-direction:column;

align-items:center;

text-align:center;

}
.heroText h1{

font-size:64px;

font-weight:800;

line-height:1.15;

margin-bottom:25px;

}

.heroText span{

background:linear-gradient(90deg,#6F6DFF,#00D9FF);

-webkit-background-clip:text;
background-clip:text;
-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.heroText p{

max-width:700px;

font-size:20px;

line-height:35px;

color:#c8d5eb;

margin-bottom:40px;

}
/* ==========================
   Badges
========================== */

.badge{

padding:12px 22px;

background:rgba(255,255,255,.08);

backdrop-filter:blur(15px);

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

border-radius:40px;

display:flex;

align-items:center;

gap:10px;

transition:.4s;
display:flex;

gap:18px;

justify-content:center;

flex-wrap:wrap;

margin-bottom:50px;

}

.badge:hover{

transform:translateY(-6px);

background:#6f6dff;

}

.badge i{

color:#00d9ff;

}
.badge:nth-child(1){

background:#4633ff33;

border-color:#6f6dff;

}

.badge:nth-child(2){

background:#00cfff33;

border-color:#00d9ff;

}

.badge:nth-child(3){

background:#00ff9933;

border-color:#00ff99;

}

.badge:nth-child(4){

background:#ffb40033;

border-color:#ffc107;

}

.analyzerCard{

width:100%;

max-width:820px;

padding:40px;

}
.analyzerCard textarea{

height:230px;

}
.heroText{

animation:fadeUp 1s ease;

}


@media(max-width:768px){

.heroText h1{

font-size:42px;

}

.heroText p{

font-size:17px;

line-height:30px;

}

.analyzerCard{

padding:25px;

}

}
/* ==========================
   Glass Card
========================== */

.glass{

width:50%;

padding:40px;

background:rgba(255,255,255,.08);

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

backdrop-filter:blur(22px);

border-radius:30px;

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

transition:.45s;
 background: linear-gradient(
        135deg,
        rgba(255,255,255,0.08),
        rgba(255,255,255,0.03)
    );

    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(25px);

    border-radius: 28px;
    box-shadow:
        0 10px 40px rgba(0,0,0,0.4),
        inset 0 0 0 1px rgba(255,255,255,0.05);

    transition: 0.4s ease;

padding:45px;

background:linear-gradient(
145deg,
rgba(255,255,255,.08),
rgba(255,255,255,.03)
);

border-radius:30px;

box-shadow:

0 20px 60px rgba(0,0,0,.35),

0 0 60px rgba(111,109,255,.08);

}
.glass::after{

content:"";

position:absolute;

inset:-1px;

border-radius:inherit;

padding:1px;

background:linear-gradient(
135deg,
#6F6DFF,
transparent,
#00D9FF
);

mask:

linear-gradient(#fff 0 0) content-box,

linear-gradient(#fff 0 0);

-webkit-mask:

linear-gradient(#fff 0 0) content-box,

linear-gradient(#fff 0 0);

mask-composite:xor;

-webkit-mask-composite:xor;

pointer-events:none;

opacity:.45;

}


@keyframes fadeLeft{

from{

opacity:0;

transform:translateX(-40px);

}

to{

opacity:1;

transform:none;

}

}

@keyframes fadeRight{

from{

opacity:0;

transform:translateX(40px);

}

to{

opacity:1;

transform:none;

}

}
.glass:hover{

transform:translateY(-8px);

box-shadow:0 30px 80px rgba(90,90,255,.25);
 transform: translateY(-10px) scale(1.01);
    box-shadow:
        0 25px 70px rgba(0,0,0,0.6),
        0 0 60px rgba(111,109,255,0.15);

}

.glass h2{

font-size:32px;

margin-bottom:30px;

}

.glass textarea{

width:100%;

height:230px;

resize:none;

padding:22px;

font-size:16px;

font-family:Poppins;

border:none;

outline:none;

border-radius:18px;

background:

linear-gradient(
180deg,
rgba(12,25,52,.95),
rgba(18,35,70,.95)
);

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

color:white;

margin-bottom:25px;

}

.glass textarea::placeholder{

color:#9fb4d2;

}

/* ==========================
   Buttons
========================== */

.buttons{

display:flex;

gap:18px;

margin-bottom:25px;

}

.buttons button{


padding:18px 42px;

font-size:17px;

font-weight:700;

letter-spacing:.3px;


border:none;

border-radius:14px;

cursor:pointer;

font-size:16px;

font-weight:600;

transition:.35s;
position:relative;
    overflow:hidden;
    border-radius: 14px;
    transition: 0.3s ease;

}

.buttons button:first-child{

    background: linear-gradient(135deg, #6F6DFF, #00D9FF);
    color:white;

}

.buttons button:last-child{

background:#212e4c;

color:white;

}

.buttons button:hover{

transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);

}

/* ==========================
   Loader
========================== */

.loader{

display:none;

align-items:center;

gap:15px;

margin-top:20px;

}
#loaderText{
    color:#00D9FF;
    text-shadow:0 0 15px rgba(0,217,255,0.6);
    font-weight:500;
}
.spinner{

width:30px;

height:30px;

border:4px solid rgba(255,255,255,.2);

border-top:4px solid #6f6dff;

border-radius:50%;

animation:spin .8s linear infinite;

}
@keyframes popIn{
    from{
        transform:scale(0.9);
        opacity:0;
    }
    to{
        transform:scale(1);
        opacity:1;
    }
}


@keyframes popIn{

0%{

opacity:0;

transform:translateY(25px) scale(.95);

}

100%{

opacity:1;

transform:translateY(0) scale(1);

}

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

/* ==========================
   Result Card
========================== */

.resultCard{

display:none;

transition:0.6s ease;

margin-top:35px;

transform:translateY(30px);

    border-radius:22px;

    padding:25px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(20px);

}
.resultCard.show{

display:block;

opacity:1;

transform:translateY(0);

}
.resultCard h2{

margin-bottom:18px;

}


/* Real News */

.resultCard.real{

    background:rgba(0,255,136,.08);

    border:2px solid #00ff88;
    box-shadow: 0 0 40px rgba(0,255,136,0.15);

}

/* Fake News */

.resultCard.fake{

    background:rgba(255,59,59,.08);

    border:2px solid #ff4747;
 box-shadow: 0 0 40px rgba(255,75,75,0.15);
}

#predictionText{

    font-size:30px;

    font-weight:700;

    margin-bottom:15px;

}

#confidenceText{

    font-size:18px;

}

.resultHeader{

display:flex;

align-items:center;

gap:25px;

margin-bottom:30px;

}

.resultIconBox{

width:85px;

height:85px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:38px;

background:rgba(255,255,255,.08);

transition:.5s;

}

.resultIconBox i{

color:white;

}

#predictionLabel{

font-size:34px;

margin-bottom:8px;

}

#predictionDescription{

font-size:16px;

color:#c7d0e0;

line-height:28px;

}

.confidenceBox{

margin-top:20px;

}

.confidenceTitle{

display:flex;

justify-content:space-between;

font-weight:600;

margin-bottom:10px;

font-size:18px;

}

#confidencePercent{

color:#00D9FF;

font-weight:700;

}

.progress{

height:18px;

background:#23324d;

border-radius:30px;

overflow:hidden;

}

#progressBar{

width:0%;

height:100%;

transition:1.5s;

background:linear-gradient(
90deg,
#00ff88,
#00D9FF
);

}
.resultCard.real .resultIconBox{

background:rgba(0,255,136,.18);

box-shadow:

0 0 35px rgba(0,255,136,.35);

}

.resultCard.fake .resultIconBox{

background:rgba(255,75,75,.18);

box-shadow:

0 0 35px rgba(255,75,75,.35);

}

.realIcon{

color:#00ff88;

}

.fakeIcon{

color:#ff4747;

}


/* ===========================
   PREMIUM RESULT CARD
===========================*/

.resultTop{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

}

.predictionBadge{

display:flex;

align-items:center;

gap:12px;

padding:14px 24px;

border-radius:18px;

font-size:24px;

font-weight:700;

background:rgba(255,255,255,.08);

}

.predictionBadge.real{

background:rgba(0,255,136,.15);

color:#00ff88;

}

.predictionBadge.fake{

background:rgba(255,80,80,.15);

color:#ff5555;

}

#confidenceCircle{

position:relative;

width:120px;

height:120px;

}

#confidenceCircle svg{

transform:rotate(-90deg);

}

.bgCircle{

fill:none;

stroke:#253452;

stroke-width:10;

}

.progressCircle{

fill:none;

stroke:#00D9FF;

stroke-width:10;

stroke-linecap:round;

stroke-dasharray:314;

stroke-dashoffset:314;

transition:2s ease;

}

#confidencePercent{

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

font-size:24px;

font-weight:700;

}
/* ===========================
   Prediction Result
=========================== */

#predictionText{

display:flex;

align-items:center;

justify-content:center;

gap:12px;

font-size:32px;

font-weight:700;

margin-bottom:18px;

}

#predictionIcon{

font-size:34px;

transition:.4s;

}

.realIcon{

color:#00ff88;

text-shadow:

0 0 15px #00ff88,

0 0 35px #00ff88;

}

.fakeIcon{

color:#ff4b4b;

text-shadow:

0 0 15px #ff4b4b,

0 0 35px #ff4b4b;

}
/* =====================================
   FEATURES SECTION
=====================================*/

.features{

    width:90%;
    margin:120px auto;

}

.features h1{

    text-align:center;
    font-size:48px;
    margin-bottom:70px;
    font-weight:700;

}

.cards{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;

}

.card{

position:relative;

padding:40px 30px;

border-radius:28px;

background:rgba(255,255,255,.06);

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

backdrop-filter:blur(18px);

overflow:hidden;

transition:.45s;

cursor:pointer;

}
.iconBox{

width:90px;

height:90px;

margin:auto;

margin-bottom:25px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:

linear-gradient(
135deg,
#6F6DFF,
#00D9FF
);

box-shadow:

0 0 35px rgba(0,217,255,.35);

transition:.45s;

}

.iconBox i{

font-size:38px;

color:white;

}
.card:hover .iconBox{

transform:rotate(360deg);

}
.card:hover{

transform:

translateY(-12px)
scale(1.03);

border-color:#6F6DFF;

box-shadow:

0 25px 55px rgba(0,217,255,.18);

}

.card i{

    font-size:55px;
    color:#050180;
    margin-bottom:25px;

}

.card h3{

font-size:24px;

margin-bottom:18px;

font-weight:700;

}

.card p{

line-height:30px;

color:#C7D3EA;

font-size:16px;

}
.card::before{

content:"";

position:absolute;

left:-50%;

top:-50%;

width:200%;

height:200%;

background:

conic-gradient(

transparent,

rgba(0,217,255,.5),

transparent,

rgba(111,109,255,.5),

transparent

);

animation:rotateBorder 8s linear infinite;

opacity:0;

transition:.4s;

}
.card:hover::before{

opacity:.8;

}
.card>*{

position:relative;

z-index:2;

}
@keyframes rotateBorder{

100%{

transform:rotate(360deg);

}

}

#confidenceCircle{

position:relative;

width:120px;
height:120px;

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

}

#confidenceCircle svg{

transform:rotate(-90deg);

}

.bgCircle{

fill:none;

stroke:#23324d;

stroke-width:10;

}

.progressCircle{

fill:none;

stroke:#00ff88;

stroke-width:10;

stroke-linecap:round;

stroke-dasharray:314;

stroke-dashoffset:314;

transition:stroke-dashoffset 1.5s ease;

}

#confidencePercent{

position:absolute;

font-size:24px;

font-weight:700;

color:white;

}
.predictionBadge{

display:inline-flex;

align-items:center;

gap:10px;

padding:12px 24px;

border-radius:40px;

font-size:20px;

font-weight:700;

margin-bottom:20px;

transition:.4s;

}

.predictionBadge.real{

background:rgba(0,255,136,.15);

color:#00ff88;

border:2px solid #00ff88;

}

.predictionBadge.fake{

background:rgba(255,75,75,.15);

color:#ff4b4b;

border:2px solid #ff4b4b;

}
/* =====================================
   STATS SECTION
=====================================*/

.stats{

    width:90%;
    margin:120px auto;

}

.stats h1{

    text-align:center;
    font-size:48px;
    margin-bottom:60px;

}

.stat{

position:relative;

overflow:hidden;

padding:45px 30px;

border-radius:28px;

text-align:center;

background:

linear-gradient(
135deg,
rgba(255,255,255,.08),
rgba(255,255,255,.03)
);

backdrop-filter:blur(20px);

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

transition:.45s;

cursor:pointer;

}
.statIcon{

width:75px;

height:75px;

margin:auto;

margin-bottom:20px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

background:

linear-gradient(
135deg,
#6F6DFF,
#00D9FF
);

box-shadow:

0 0 30px rgba(0,217,255,.35);

transition:.4s;

}

.statIcon i{

font-size:32px;

color:white;

}

.stat:hover .statIcon{

transform:

rotate(360deg);

}
.stat:hover{

transform:

translateY(-12px)
scale(1.03);

box-shadow:

0 25px 60px rgba(0,217,255,.20);

border-color:#6F6DFF;

}
.stat h2{

font-size:32px;

font-weight:700;

margin-bottom:12px;

background:

linear-gradient(
90deg,
#ffffff,
#00D9FF
);

-webkit-background-clip:text;
background-clip:text;

-webkit-text-fill-color:transparent;

text-shadow:

0 0 25px rgba(0,217,255,.25);

}

.stat:hover h2{

transform:scale(1.08);

text-shadow:

0 0 20px #00D9FF,

0 0 40px #00D9FF;

}

.stat p{

font-size:18px;

color:#D5DFF2;

margin-top:10px;

}
.stars{

margin-top:18px;

font-size:22px;

letter-spacing:4px;

color:#FFD700;

text-shadow:

0 0 18px gold;

animation:starGlow 2s infinite alternate;

}
.version{

display:inline-block;

margin-top:18px;

padding:8px 18px;

border-radius:30px;

background:

rgba(111,109,255,.18);

border:

1px solid rgba(111,109,255,.4);

font-size:14px;

color:#BFD7FF;

}
@keyframes starGlow{

0%{

opacity:.6;

}

100%{

opacity:1;

transform:scale(1.08);

}

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

.progress{

    width:100%;

    height:16px;

    border-radius:50px;

    overflow:hidden;

    background:#23324d;

    margin:20px 0;

}

#progressBar{

width:0;

height:100%;

border-radius:40px;

background:linear-gradient(
90deg,
#00ff88,
#00d9ff
);

transition:width 1.4s ease;

}

@keyframes moveGradient{

100%{

background-position:300%;

}

}


/* ==========================
   FOOTER
========================== */

footer{

margin-top:120px;

padding:70px 20px;

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

backdrop-filter:blur(18px);

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

text-align:center;

}

.footerContent{

max-width:900px;

margin:auto;

}

.footerContent h2{

font-size:40px;

font-weight:700;

margin-bottom:18px;

}

.footerContent h2 span{

color:#6F6DFF;

}

.footerDesc{

color:#C9D4E8;

font-size:17px;

line-height:30px;

max-width:700px;

margin:0 auto 35px;

}
.techStack{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

margin-bottom:40px;

}

.techStack span{

padding:10px 20px;

border-radius:30px;

background:rgba(255,255,255,.07);

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

color:#DDE7FF;

font-size:15px;

transition:.35s;

backdrop-filter:blur(15px);

}

.techStack span:hover{

background:linear-gradient(135deg,#6F6DFF,#00D9FF);

transform:translateY(-5px);

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

}
.footerIcons{

display:flex;

justify-content:center;

gap:20px;

margin-bottom:35px;

}

.footerIcons a{

text-decoration:none;

}

.footerIcons i{

width:55px;

height:55px;

display:flex;

justify-content:center;

align-items:center;

font-size:22px;

border-radius:50%;

background:rgba(255,255,255,.08);

color:white;

transition:.35s;

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

}

.footerIcons i:hover{

background:linear-gradient(135deg,#6F6DFF,#00D9FF);

transform:translateY(-8px) rotate(10deg);

box-shadow:0 12px 30px rgba(0,217,255,.35);

}
.copyright{

font-size:15px;

color:#9DB2CF;

margin-top:15px;

letter-spacing:.5px;

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:#5b5cff;

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#08101f;

}

/* =====================================
   GLOW EFFECTS
=====================================*/

.stat::before{

content:"";

position:absolute;

top:-150%;

left:-50%;

width:70%;

height:300%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.18),

transparent

);

transform:rotate(25deg);

transition:1s;

}

.card,
.stat{

    position:relative;

    overflow:hidden;

}


.stat:hover::before{

left:180%;

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

.glass{

    animation:slideRight 1s ease;

}

@keyframes slideLeft{

from{

opacity:0;

transform:translateX(-60px);

}

to{

opacity:1;

transform:translateX(0);

}

}

@keyframes slideRight{

from{

opacity:0;

transform:translateX(60px);

}

to{

opacity:1;

transform:translateX(0);

}

}

/* =====================================
   TEXT GLOW
=====================================*/

.left span{

    text-shadow:

    0 0 15px #6f6dff,

    0 0 30px #6f6dff;

}

/* =====================================
   BUTTON GLOW
=====================================*/

.buttons button:first-child{

    box-shadow:

    0 10px 25px rgba(91,92,255,.40);

}


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

section{

    scroll-margin-top:120px;

}
/* ==========================================
   PART 2C
   Responsive Design + Dark Theme +
   Animations + Final Polish
==========================================*/

/* ---------- Selection ---------- */

::selection{
    background:#5B5CFF;
    color:white;
}

/* ---------- Smooth Fade ---------- */

html{
    scroll-behavior:smooth;
}

/* ---------- Floating Particles ---------- */

body::before,
body::after{

    content:"";

    position:fixed;

    width:12px;
    height:12px;

    border-radius:50%;

    background:#6F6DFF;

    opacity:.4;

    animation:particle1 18s linear infinite;

    z-index:-1;
}

body::after{

    width:18px;
    height:18px;

    right:10%;

    background:#00D9FF;

    animation:particle2 20s linear infinite;
}

@keyframes particle1{

0%{

left:5%;
top:110%;

}

100%{

left:80%;
top:-20%;

}

}

@keyframes particle2{

0%{

right:10%;
top:110%;

}

100%{

right:60%;
top:-20%;

}

}

/* ---------- Navbar Scroll Effect ---------- */

nav.scrolled{

    background:rgba(6,12,28,.95);

    backdrop-filter:blur(30px);

    box-shadow:0 12px 35px rgba(0,0,0,.45);

}

/* ---------- Mouse Glow ---------- */

.glass:hover{

    border-color:#6F6DFF;

}

.card:hover{

    cursor:pointer;

}

.stat:hover{

    cursor:pointer;

}

/* ---------- Text Animation ---------- */

.left h1{

    animation:titleAnimation 1.1s ease;

}

@keyframes titleAnimation{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}


/* ---------- Card Shine ---------- */

.card::after{

content:"";

position:absolute;

left:-150%;

top:0;

width:80px;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.25),

transparent);

transform:skewX(-20deg);

transition:1s;

}

.card:hover::after{

left:180%;

}

/* ---------- Buttons ---------- */

.buttons button{

    position:relative;

    overflow:hidden;

}

.buttons button::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

background:

rgba(255,255,255,.2);

transition:.5s;

}

.buttons button:hover::before{

left:100%;

}

/* ---------- Input ---------- */

textarea{

transition:.4s;

}

textarea:focus{
    outline:none;
    box-shadow: 0 0 0 3px rgba(111,109,255,0.25);
    border-color:#6F6DFF;

box-shadow:

0 0 25px rgba(111,109,255,.25);
}


/* ======================================
        MOBILE
======================================*/

@media(max-width:1100px){

.hero{

flex-direction:column;

text-align:center;

padding-top:150px;

}

.left{

width:100%;

}

.glass{

width:100%;

margin-top:40px;

}


.cards{

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

}

nav{

padding:15px 25px;

}

nav ul{

display:none;

}

}

/* ======================================
        TABLET
======================================*/

@media(max-width:800px){

.left h1{

font-size:42px;

line-height:55px;

}

.features h1,

.stats h1{

font-size:36px;

}

.badges{

justify-content:center;

}

}

/* ======================================
        MOBILE
======================================*/

@media(max-width:600px){

.cards{

grid-template-columns:1fr;

}

.left h1{

font-size:34px;

line-height:46px;

}

.left p{

font-size:16px;

}

.glass{

padding:25px;

}

.glass textarea{

height:180px;

}

.buttons{

flex-direction:column;

}

.buttons button{

width:100%;

}

.logo h2{

font-size:20px;

}


}

/* ---------- Scroll Animation ---------- */

.fadeUp{

opacity:0;

transform:translateY(70px);

transition:1s;

}

.fadeUp.show{

opacity:1;

transform:translateY(0);

}

/* ---------- Glass Blur ---------- */

.glass{

box-shadow:

0 10px 40px rgba(0,0,0,.35),

0 0 50px rgba(91,92,255,.08);

}

/* ---------- Premium Glow ---------- */

.glass::before{

content:"";

position:absolute;

inset:0;

border-radius:inherit;

background:

linear-gradient(

135deg,

rgba(255,255,255,.08),

transparent);

pointer-events:none;

}

/* ---------- Hero Gradient ---------- */

.left h1{

background:

linear-gradient(

90deg,

white,

#9AD7FF,

#6F6DFF);

background-clip:text;

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

/* ---------- Navbar Hover ---------- */

nav a{

position:relative;

}

nav a::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:2px;

background:#6F6DFF;

transition:.4s;

}

nav a:hover::after{

width:100%;

}

/* ---------- Card Shadow ---------- */

.card{

box-shadow:

0 10px 30px rgba(0,0,0,.2);

}

/* ---------- Stats Shadow ---------- */

.stat{

box-shadow:

0 10px 25px rgba(0,0,0,.25);

}

/* ----------makes UI feel “alive”---------- */

.card, .stat, .badge{
    transition: transform 0.3s ease;
}

.card:hover, .stat:hover, .badge:hover{
    transform: translateY(-8px);
}

/* ----------AI typing effect---------- */

#typing{
    text-shadow: 0 0 20px rgba(111,109,255,0.6);
}

/* ---------- Cursor Glow ---------- */
#cursorGlow{

position:fixed;

width:250px;

height:250px;

border-radius:50%;

background:rgba(111,109,255,.12);

pointer-events:none;

filter:blur(90px);

z-index:-1;

}
/* ===========================
      Prediction History
=========================== */

.history{

width:90%;

margin:120px auto;

}

.history h1{

font-size:42px;

margin-bottom:35px;

text-align:center;

}
.historyHeader{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:35px;

}

.historyHeader button{

padding:12px 22px;

border:none;

border-radius:12px;

background:linear-gradient(135deg,#6F6DFF,#00D9FF);

color:white;

font-weight:600;

cursor:pointer;

transition:.35s;

}

.historyHeader button:hover{

transform:translateY(-4px);

box-shadow:0 12px 25px rgba(0,217,255,.25);

}
#historyList{

display:flex;

flex-direction:column;

gap:18px;

}

.historyItem{

display:flex;

justify-content:space-between;

align-items:center;

padding:22px;

background:rgba(255,255,255,.06);

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

border-radius:20px;

backdrop-filter:blur(20px);

transition:.35s;

}

.historyItem:hover{

transform:translateY(-5px);

box-shadow:0 15px 35px rgba(0,217,255,.15);

}

.historyLeft{

display:flex;

flex-direction:column;

gap:8px;

}

.historyTitle{

font-weight:600;

font-size:18px;

color:white;

}

.historyTime{

font-size:13px;

color:#9db2cf;

}

.historyRight{

text-align:right;

}

.historyBadge{

padding:8px 16px;

border-radius:25px;

font-size:14px;

font-weight:600;

display:inline-block;

margin-bottom:8px;

}

.historyBadge.real{

background:rgba(0,255,136,.15);

color:#00ff88;

}

.historyBadge.fake{

background:rgba(255,75,75,.15);

color:#ff4b4b;

}

.historyConfidence{

font-size:15px;

color:#c7d0e0;

}

.historyEmpty{

padding:40px;

text-align:center;

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

border-radius:20px;

color:#9fb4d2;

}
.history{

width:90%;

margin:100px auto;

}

.historyHeader{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

}

.historyHeader button{

padding:12px 20px;

background:#6F6DFF;

color:white;

border:none;

border-radius:12px;

cursor:pointer;

}

.historyItem{

display:flex;

justify-content:space-between;

align-items:center;

padding:22px;

margin-bottom:18px;

border-radius:20px;

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

backdrop-filter:blur(20px);

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

transition:.4s;

}

.historyItem:hover{

transform:translateY(-5px);

box-shadow:0 15px 40px rgba(0,0,0,.35);

}

.historyTitle{

font-weight:600;

margin-bottom:8px;

}

.historyTime{

font-size:14px;

color:#aaa;

}

.historyBadge{

padding:8px 16px;

border-radius:30px;

font-weight:700;

margin-bottom:8px;

text-align:center;

}

.historyBadge.real{

background:#00ff8820;

color:#00ff88;

}

.historyBadge.fake{

background:#ff4b4b20;

color:#ff4b4b;

}

.historyConfidence{

font-size:15px;

color:#ddd;

}

.historyEmpty{

text-align:center;

padding:40px;

opacity:.7;

}
.resultTop{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

}
/* ---------- HERO STATS---------- */
.heroStats{

display:flex;

gap:22px;

margin-top:45px;

flex-wrap:wrap;

}

.heroCard{

flex:1;

min-width:160px;

padding:28px;

border-radius:22px;

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

backdrop-filter:blur(20px);

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

transition:.35s;

}

.heroCard:hover{

transform:translateY(-8px);

box-shadow:0 20px 45px rgba(0,0,0,.35);

border-color:#6F6DFF;

}

.heroCard h2{

font-size:34px;

color:#00D9FF;

margin-bottom:10px;

}

.heroCard p{

color:#b9c8dd;

font-size:15px;

}
/* ===========================
   RESULT CARD
=========================== */

.resultCard{

margin-top:30px;

padding:25px;

border-radius:18px;

background:rgba(255,255,255,.08);

backdrop-filter:blur(12px);

text-align:center;

}

.resultHeader{

display:flex;

justify-content:center;

align-items:center;

gap:12px;

margin-bottom:20px;

}

.resultHeader h2{

font-size:30px;

font-weight:700;

}

.realIcon{

color:#00ff88;

font-size:35px;

}

.fakeIcon{

color:#ff4b4b;

font-size:35px;

}

.confidenceCircle{

position:relative;

width:130px;

height:130px;

margin:auto;

}

.circleBackground{

fill:none;

stroke:#444;

stroke-width:10;

}

.circleProgress{

fill:none;

stroke:#00ff88;

stroke-width:10;

stroke-linecap:round;

transform:rotate(-90deg);

transform-origin:50% 50%;

transition:.8s;

}

.circleText{

position:absolute;

left:0;

right:0;

top:40px;

font-size:28px;

font-weight:700;

}

.progressContainer{

width:100%;

height:12px;

background:#333;

border-radius:20px;

overflow:hidden;

margin-top:25px;

}

.progressBar{

height:100%;

width:0%;

background:linear-gradient(90deg,#00ff88,#00d4ff);

transition:1s;

border-radius:20px;

}

.resultCard.real{

border:2px solid #00ff88;

}

.resultCard.fake{

border:2px solid #ff4b4b;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:translateY(0);

}

}
.historyItem{

background:rgba(255,255,255,.06);

padding:15px;

margin-top:15px;

border-radius:12px;

border-left:4px solid #00d4ff;

}

.historyItem h4{

margin-bottom:8px;

}

.historyEmpty{

text-align:center;

padding:30px;

opacity:.7;

}
.resultCard{

transform:translateY(25px);


}

.resultCard.show{

opacity:1;

transform:translateY(0);

}
.resultCard{

    display:none;

    opacity:1;

    visibility:visible;

    transform:translateY(0);

    transition:.4s ease;

    margin-top:25px;

    padding:25px;

    border-radius:18px;

}
/* ---------- End ---------- */