:root{
  --bg: #0a0e1a;
  --bg-panel: #10162a;
  --bg-panel-2: #0d1225;
  --border: #202a44;
  --text: #eef1f8;
  --text-dim: #8b93ab;
  --blue: #3b82f6;
  --blue-light: #60a5fa;
  --cyan: #22d3ee;
  --purple: #a78bfa;
  --green: #22c55e;
  --red: #ef4444;
}

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

body{
  background: radial-gradient(circle at 20% 0%, #101a35 0%, var(--bg) 45%);
  color: var(--text);
  font-family: 'Poppins', sans-serif;
  min-height: 100vh;
}

a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}

/* ================= NAVBAR ================= */
.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 20px 60px;
  border-bottom: 1px solid var(--border);
}
.navbar .logo{
  display:flex; align-items:center; gap:10px;
  font-weight:700; font-size:19px; color:var(--blue-light);
}
.navbar .logo i{font-size:20px;}
.navbar ul{
  display:flex; gap:32px;
}
.navbar ul li a{
  font-size:14.5px; color:var(--text-dim); font-weight:500;
  transition: color .2s;
}
.navbar ul li a:hover,
.navbar ul li a.active{color:var(--blue-light);}
.navbar .btn{
  background: linear-gradient(90deg, var(--blue), #2563eb);
  color:#fff; border:none;
  padding:11px 22px; border-radius:8px;
  font-size:14px; font-weight:600;
}

/* ================= HERO ================= */
.hero{
  display:flex; align-items:center; gap:40px;
  padding: 80px 60px;
  flex-wrap: wrap;
}
.hero .left{flex:1; min-width:340px;}
.hero h1{
  font-size:46px; line-height:1.2; font-weight:800; margin-bottom:20px;
}
.hero h1 span{color: var(--blue-light);}
.hero .left > p{
  color: var(--text-dim); font-size:16px; line-height:1.6;
  max-width:520px; margin-bottom:28px;
}
.buttons{display:flex; gap:14px; margin-bottom:44px;}
.buttons .primary{
  background: linear-gradient(90deg, var(--blue), #2563eb);
  color:#fff; border:none; padding:14px 26px; border-radius:10px;
  font-size:15px; font-weight:600;
}
.buttons .secondary{
  background: transparent; color:var(--text);
  border:1px solid var(--border); padding:14px 26px; border-radius:10px;
  font-size:15px; font-weight:600;
}
.stats{display:flex; gap:50px;}
.stats h2{font-size:26px; font-weight:800; color:var(--blue-light);}
.stats p{color:var(--text-dim); font-size:13px; margin-top:4px;}

.hero .right{
  flex:1; min-width:300px; display:flex; justify-content:center; position:relative;
}
.hero .right .circle{
  position:absolute; width:340px; height:340px; border-radius:50%;
  background: radial-gradient(circle, rgba(59,130,246,0.25), transparent 70%);
  filter: blur(10px);
  z-index:0;
}
.hero .right img{
  position:relative; z-index:1; max-width:100%; max-height:400px;
}

/* ================= DETECT SECTION ================= */
.detect{
  padding: 20px 60px 70px;
}
.detect-inner{
  display:flex; flex-wrap:wrap;
  background: var(--bg-panel);
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
}
.detect-col{
  flex:1; min-width:340px; padding:34px;
}
.upload-col{border-right:1px solid var(--border);}
.detect-col h3{
  font-size:19px; margin-bottom:6px; display:flex; align-items:center; gap:10px;
}
.detect-col .sub{color:var(--text-dim); font-size:13.5px; margin-bottom:22px;}

.dropzone{
  border:1.5px dashed var(--border);
  border-radius:14px; padding:46px 20px;
  text-align:center; cursor:pointer;
  transition: border-color .2s, background .2s;
  background: rgba(255,255,255,0.015);
}
.dropzone.drag{border-color:var(--blue); background: rgba(59,130,246,0.08);}
.dz-icon{font-size:34px; color:var(--blue-light); margin-bottom:14px; display:block;}
.dropzone .hint{color:var(--text-dim); font-size:12.5px; margin-top:14px; line-height:1.7;}
.dropzone input{display:none;}
.preview{max-width:100%; max-height:180px; border-radius:10px; margin-bottom:10px;}

.result-box{
  border:1px solid var(--border); border-radius:12px; padding:20px;
  display:flex; gap:14px; align-items:flex-start;
  min-height:110px;
}
.result-icon{
  width:40px; height:40px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:17px;
}
.result-icon.idle{background: rgba(139,148,171,0.12); color:var(--text-dim);}
.result-icon.real{background: rgba(34,197,94,0.15); color:var(--green);}
.result-icon.fake{background: rgba(239,68,68,0.15); color:var(--red);}
.result-title{font-size:18px; font-weight:700; letter-spacing:0.3px; color:var(--text-dim);}
.result-title.real{color:var(--green);}
.result-title.fake{color:var(--red);}
.result-desc{color:var(--text-dim); font-size:13.5px; margin:4px 0 12px;}
.conf-section{display:none;}
.conf-row{font-size:13px; margin-bottom:8px;}
.conf-track{background:#1a2136; height:8px; border-radius:6px; overflow:hidden;}
.conf-fill{height:100%; border-radius:6px; width:0; transition: width .6s ease; background: var(--blue);}
.conf-fill.real{background: linear-gradient(90deg,#16a34a,#22c55e);}
.conf-fill.fake{background: linear-gradient(90deg,#dc2626,#ef4444);}

.details-btn{
  margin-top:16px; width:100%; text-align:left;
  background:transparent; border:1px solid var(--border); color:var(--text);
  padding:12px 16px; border-radius:10px; font-size:14px;
  display:none; justify-content:space-between; align-items:center;
}
.details-btn:hover{border-color:var(--blue);}
.details-panel{
  margin-top:12px; padding:14px 16px; border-radius:10px;
  background: rgba(255,255,255,0.02); border:1px solid var(--border);
  font-size:13px; color:var(--text-dim); display:none; line-height:1.8;
}
.details-panel.open{display:block;}

.spinner{
  width:18px; height:18px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,0.15); border-top-color: var(--blue);
  animation: spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

@media(max-width:900px){
  .navbar{padding:16px 20px;} .navbar ul{display:none;}
  .hero{padding:40px 20px;} .hero h1{font-size:32px;}
  .detect{padding:10px 20px 40px;}
}

/* ================= PAGE HEADER (about/dashboard/live) ================= */
.page-header{
  padding: 60px 60px 20px;
  text-align:center;
}
.page-header h1{font-size:36px; font-weight:800; margin-bottom:10px;}
.page-header h1 span{color:var(--blue-light);}
.page-header p{color:var(--text-dim); font-size:15px;}

/* ================= ABOUT ================= */
.about-content{
  max-width:820px; margin:0 auto; padding:30px 20px 80px;
}
.about-block{
  background: var(--bg-panel); border:1px solid var(--border);
  border-radius:14px; padding:26px 30px; margin-bottom:20px;
}
.about-block h3{
  font-size:17px; margin-bottom:12px; display:flex; align-items:center; gap:10px; color:var(--blue-light);
}
.about-block p{color:var(--text-dim); font-size:14px; line-height:1.75; margin-bottom:10px;}
.about-block p:last-child{margin-bottom:0;}
.tech-list{list-style:none;}
.tech-list li{
  color:var(--text-dim); font-size:14px; padding:6px 0;
  display:flex; align-items:center; gap:10px;
}
.tech-list li i{color:var(--green);}

/* ================= DASHBOARD ================= */
.dash-stats{
  display:flex; gap:20px; padding: 10px 60px 30px; flex-wrap:wrap;
}
.dash-stat-card{
  flex:1; min-width:180px;
  background: var(--bg-panel); border:1px solid var(--border);
  border-radius:14px; padding:24px; text-align:center;
}
.dash-stat-card .num{font-size:30px; font-weight:800; color:var(--blue-light);}
.dash-stat-card .num.real{color:var(--green);}
.dash-stat-card .num.fake{color:var(--red);}
.dash-stat-card .lbl{color:var(--text-dim); font-size:13px; margin-top:6px;}

.dash-history{padding: 10px 60px 70px;}
.dash-history h3{font-size:18px; margin-bottom:16px;}
.history-table{
  width:100%; border-collapse:collapse;
  background: var(--bg-panel); border:1px solid var(--border); border-radius:14px; overflow:hidden;
}
.history-table th, .history-table td{
  padding:14px 18px; text-align:left; font-size:13.5px;
  border-bottom:1px solid var(--border);
}
.history-table th{color:var(--text-dim); font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:0.5px;}
.history-table tr:last-child td{border-bottom:none;}
.tag{
  padding:4px 10px; border-radius:20px; font-size:11.5px; font-weight:700; letter-spacing:0.5px;
}
.tag.real{background: rgba(34,197,94,0.15); color:var(--green);}
.tag.fake{background: rgba(239,68,68,0.15); color:var(--red);}
.empty-state{
  text-align:center; padding:50px 20px; color:var(--text-dim);
  background: var(--bg-panel); border:1px solid var(--border); border-radius:14px;
}
.empty-state i{font-size:30px; margin-bottom:12px; display:block; opacity:0.6;}
.empty-state a{color:var(--blue-light); font-weight:600;}

/* ================= LIVE ================= */
.live-section{
  max-width:700px; margin:0 auto; padding: 10px 20px 70px; text-align:center;
}
.live-video-wrap{
  position:relative; border-radius:16px; overflow:hidden;
  border:1px solid var(--border); background:#000;
  aspect-ratio: 4/3; max-height:480px; margin:0 auto 20px;
}
.live-video-wrap video{width:100%; height:100%; object-fit:cover;}
.live-badge{
  position:absolute; top:14px; left:14px;
  background: rgba(10,14,26,0.75); border:1px solid var(--border);
  padding:6px 12px; border-radius:20px; font-size:12.5px;
  display:flex; align-items:center; gap:8px;
}
.live-badge .dot{
  width:8px; height:8px; border-radius:50%; background:var(--text-dim); display:inline-block;
}
.live-badge .dot.live{background:var(--red); box-shadow:0 0 0 0 rgba(239,68,68,0.6); animation: pulse 1.4s infinite;}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(239,68,68,0.6);}
  70%{box-shadow:0 0 0 8px rgba(239,68,68,0);}
  100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}
}
.live-controls{display:flex; gap:14px; justify-content:center; margin-bottom:24px;}
.live-controls button{
  padding:12px 22px; border-radius:10px; font-size:14px; font-weight:600; border:none;
  display:flex; align-items:center; gap:8px;
}
.live-controls .primary{background: linear-gradient(90deg, var(--blue), #2563eb); color:#fff;}
.live-controls .primary:disabled{opacity:0.5; cursor:not-allowed;}
.live-controls .secondary{background:transparent; border:1px solid var(--border); color:var(--text);}
.live-controls .secondary:disabled{opacity:0.4; cursor:not-allowed;}
.live-result{text-align:left;}

/* ================= ANIMATIONS ================= */
.reveal-up{
  opacity:0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal-up.visible{opacity:1; transform:translateY(0);}
.reveal-up.d1{transition-delay:.05s;}
.reveal-up.d2{transition-delay:.15s;}
.reveal-up.d3{transition-delay:.25s;}
.reveal-up.d4{transition-delay:.35s;}

/* subtle lift on interactive cards/buttons */
.buttons .primary, .buttons .secondary,
.navbar .btn, .live-controls button,
.details-btn{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.buttons .primary:hover, .navbar .btn:hover, .live-controls .primary:not(:disabled):hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(59,130,246,0.35);
}
.buttons .secondary:hover, .details-btn:hover, .live-controls .secondary:not(:disabled):hover{
  transform: translateY(-2px);
}
.dash-stat-card, .about-block, .detect-inner{
  transition: transform .2s ease, border-color .2s ease;
}
.dash-stat-card:hover{transform: translateY(-4px); border-color: var(--blue);}
.about-block:hover{border-color: var(--blue);}
.dropzone{transition: border-color .2s ease, background .2s ease, transform .2s ease;}
.dropzone:hover{border-color: var(--blue-light); transform: translateY(-2px);}
.history-table tr{transition: background .15s ease;}
.history-table tbody tr:hover{background: rgba(59,130,246,0.06);}

/* result icon pop-in when a result renders */
.result-icon.real, .result-icon.fake{
  animation: popIn .35s ease;
}
@keyframes popIn{
  0%{transform:scale(0.6); opacity:0;}
  70%{transform:scale(1.08);}
  100%{transform:scale(1); opacity:1;}
}
.conf-fill{transition: width .8s cubic-bezier(.22,.9,.3,1);}

/* ================= HERO SCAN GRAPHIC ================= */
.scan-wrap{
  position:relative;
  width:320px; height:320px;
  display:flex; align-items:center; justify-content:center;
  z-index:1;
}
.scan-ring{
  position:absolute; border-radius:50%;
  border:1.5px solid rgba(96,165,250,0.35);
}
.scan-ring.ring1{
  width:100%; height:100%;
  animation: spinSlow 14s linear infinite;
  border-top-color: var(--blue-light);
  border-right-color: var(--blue-light);
}
.scan-ring.ring2{
  width:76%; height:76%;
  animation: spinSlow 10s linear infinite reverse;
  border-style:dashed;
}
@keyframes spinSlow{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
.scan-face{
  font-size:110px;
  color: rgba(96,165,250,0.85);
  filter: drop-shadow(0 0 22px rgba(59,130,246,0.5));
  animation: floatY 4s ease-in-out infinite;
}
@keyframes floatY{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}
.scan-line{
  position:absolute;
  left:14%; right:14%;
  height:2px;
  background: linear-gradient(90deg, transparent, var(--blue-light), transparent);
  box-shadow: 0 0 12px 2px rgba(96,165,250,0.7);
  animation: scanMove 3s ease-in-out infinite;
}
@keyframes scanMove{
  0%{top:20%; opacity:0;}
  10%{opacity:1;}
  50%{top:78%; opacity:1;}
  90%{opacity:1;}
  100%{top:20%; opacity:0;}
}
.scan-dot{
  position:absolute;
  width:7px; height:7px; border-radius:50%;
  background: var(--blue-light);
  box-shadow: 0 0 10px 2px rgba(96,165,250,0.8);
  animation: dotPulse 2.4s ease-in-out infinite;
}
.dot-a{top:18%; left:22%; animation-delay:0s;}
.dot-b{top:30%; right:16%; animation-delay:.7s;}
.dot-c{bottom:20%; left:32%; animation-delay:1.4s;}
@keyframes dotPulse{
  0%,100%{opacity:.3; transform:scale(0.8);}
  50%{opacity:1; transform:scale(1.3);}
}
.scan-readout{
  position:absolute;
  bottom:6%;
  background: rgba(10,14,26,0.75);
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 16px;
  text-align:center;
  backdrop-filter: blur(4px);
}
.scan-readout-label{
  display:block; font-size:10px; letter-spacing:1.5px; color:var(--blue-light); font-weight:600;
}
.scan-readout-value{
  display:block; font-size:18px; font-weight:800; color:var(--green);
}

@media(max-width:900px){
  .scan-wrap{width:230px; height:230px;}
  .scan-face{font-size:80px;}
}

/* ================= WELCOME SPLASH ================= */
body.welcome-active{overflow:hidden;}
.welcome-overlay{
  position:fixed; inset:0; z-index:999;
  display:flex; align-items:center; justify-content:center;
  background: rgba(4,6,14,0.88);
  backdrop-filter: blur(3px);
  animation: overlayIn .5s ease;
  padding:20px;
}
.welcome-overlay.hide{
  animation: overlayOut .6s ease forwards;
  pointer-events:none;
}
@keyframes overlayIn{
  from{opacity:0;}
  to{opacity:1;}
}
@keyframes overlayOut{
  from{opacity:1; transform:scale(1);}
  to{opacity:0; transform:scale(1.06);}
}

.welcome-card{
  position:relative;
  width:100%; max-width:460px;
  text-align:center;
  background: linear-gradient(160deg, rgba(16,22,42,0.92), rgba(10,14,26,0.95));
  border:1px solid var(--border);
  border-radius:22px;
  padding:44px 38px 38px;
  overflow:hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 60px rgba(59,130,246,0.08);
  animation: welcomeUp .7s cubic-bezier(.2,.9,.3,1.2);
  background-image:
    linear-gradient(160deg, rgba(16,22,42,0.92), rgba(10,14,26,0.95)),
    linear-gradient(rgba(96,165,250,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,165,250,0.05) 1px, transparent 1px);
  background-size: auto, 28px 28px, 28px 28px;
}
@keyframes welcomeUp{
  0%{opacity:0; transform:translateY(28px) scale(.94);}
  100%{opacity:1; transform:translateY(0) scale(1);}
}

.welcome-close{
  position:absolute; top:16px; right:16px;
  width:32px; height:32px; border-radius:8px;
  background: rgba(255,255,255,0.05); border:1px solid var(--border);
  color: var(--text-dim); font-size:14px;
  display:flex; align-items:center; justify-content:center;
  transition: background .15s ease, color .15s ease;
}
.welcome-close:hover{background: rgba(239,68,68,0.15); color:#fca5a5;}

.welcome-icon-ring{
  width:96px; height:96px;
  margin:0 auto 22px;
  border-radius:50%;
  border:1.5px solid rgba(167,139,250,0.4);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  animation: ringPulse 2.4s ease-in-out infinite;
}
.welcome-icon-ring::after{
  content:'';
  position:absolute; bottom:-4px; left:50%; margin-left:-4px;
  width:8px; height:8px; border-radius:50%;
  background: var(--cyan);
  box-shadow: 0 0 10px 2px rgba(34,211,238,0.8);
}
@keyframes ringPulse{
  0%,100%{box-shadow: 0 0 0 0 rgba(167,139,250,0.25);}
  50%{box-shadow: 0 0 0 10px rgba(167,139,250,0);}
}
.welcome-icon{
  width:66px; height:66px; border-radius:50%;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  display:flex; align-items:center; justify-content:center;
  font-size:26px; color:#fff;
  box-shadow: 0 0 30px rgba(139,92,246,0.5);
  animation: iconPulse 2.2s ease-in-out infinite;
}
@keyframes iconPulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.07);}
}

.welcome-title{
  font-size:34px; font-weight:800; margin-bottom:10px; letter-spacing:0.5px;
}
.welcome-title span{
  background: linear-gradient(90deg, var(--blue-light), var(--cyan), var(--purple));
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: gradientShift 5s ease infinite;
}
.welcome-tagline{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:11.5px; font-weight:700; letter-spacing:2.5px;
  color: var(--purple);
  margin-bottom:16px;
}
.tag-dot{
  width:5px; height:5px; border-radius:50%;
  background: var(--cyan);
  box-shadow: 0 0 8px 1px rgba(34,211,238,0.8);
}
.welcome-divider{
  width:70px; height:2px; margin:0 auto 20px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
}
.welcome-sub{
  color:var(--text-dim); font-size:14px; line-height:1.7; margin-bottom:28px;
  max-width:360px; margin-left:auto; margin-right:auto;
}
.welcome-actions{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}
.welcome-btn{
  border:none; border-radius:10px; padding:13px 24px;
  font-size:14px; font-weight:700; display:flex; align-items:center; gap:8px;
  font-family:'Poppins', sans-serif;
}
.welcome-btn.primary{
  background: linear-gradient(90deg, var(--purple), var(--blue));
  color:#fff;
  box-shadow: 0 10px 26px rgba(139,92,246,0.35);
}
.welcome-btn.secondary{
  background: rgba(255,255,255,0.04);
  border:1px solid var(--border);
  color:var(--text);
}
.welcome-btn.secondary i{color:var(--cyan);}
.welcome-btn:hover{transform: translateY(-2px);}

.welcome-accent-bar{
  position:absolute; bottom:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--cyan), var(--purple), var(--blue-light));
  background-size:200% 100%;
  animation: gradientShift 4s ease infinite;
}

/* ================= DIGITAL RAIN BACKGROUND ================= */
#rainCanvas{
  position:fixed;
  inset:0;
  z-index:-2;
  opacity:0.4;
  pointer-events:none;
}
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  background: radial-gradient(circle at 15% 0%, rgba(16,26,53,0.9) 0%, var(--bg) 55%);
  pointer-events:none;
}

/* ================= DRIFTING GLOW ORBS ================= */
.bg-orb{
  position:fixed;
  border-radius:50%;
  filter: blur(90px);
  z-index:-1;
  pointer-events:none;
  opacity:0.35;
}
.bg-orb.orb1{
  width:420px; height:420px;
  top:-10%; left:-8%;
  background: var(--blue);
  animation: driftOne 22s ease-in-out infinite;
}
.bg-orb.orb2{
  width:380px; height:380px;
  bottom:-12%; right:-6%;
  background: var(--cyan);
  animation: driftTwo 26s ease-in-out infinite;
}
.bg-orb.orb3{
  width:320px; height:320px;
  top:40%; left:50%;
  background: var(--purple);
  opacity:0.22;
  animation: driftThree 30s ease-in-out infinite;
}
@keyframes driftOne{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(60px,50px) scale(1.15);}
}
@keyframes driftTwo{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-50px,-40px) scale(1.1);}
}
@keyframes driftThree{
  0%,100%{transform:translate(-50%,-50%) scale(1);}
  50%{transform:translate(-45%,-55%) scale(1.2);}
}
@media(max-width:900px){
  .bg-orb{display:none;}
}

/* Glassy panels so the rain shows through subtly */
.navbar{
  background: rgba(10,14,26,0.55);
  backdrop-filter: blur(10px);
  position:sticky; top:0; z-index:50;
}
.detect-inner, .about-block, .dash-stat-card, .history-table,
.result-box, .welcome-box .welcome-icon, .live-video-wrap{
  backdrop-filter: blur(6px);
}
.detect-inner, .about-block, .dash-stat-card, .history-table{
  background: rgba(16,22,42,0.72);
}

/* extra glow flourish on primary buttons + hero */
.buttons .primary, .navbar .btn, .live-controls .primary{
  position:relative;
  overflow:hidden;
}
.buttons .primary::after, .navbar .btn::after, .live-controls .primary::after{
  content:'';
  position:absolute; top:0; left:-60%;
  width:40%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
}
.buttons .primary:hover::after, .navbar .btn:hover::after, .live-controls .primary:not(:disabled):hover::after{
  left: 130%;
}

.hero .right .circle{
  animation: circlePulse 5s ease-in-out infinite;
}
@keyframes circlePulse{
  0%,100%{opacity:0.7; transform:scale(1);}
  50%{opacity:1; transform:scale(1.08);}
}

/* ================= CHOOSE DETECTION TYPE (homepage) ================= */
.choose-header{text-align:center; padding: 10px 20px 30px;}
.choose-header h2{font-size:28px; font-weight:800; margin-bottom:8px;}
.choose-header p{color:var(--text-dim); font-size:14.5px;}

.choose-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;
  padding: 0 60px 20px;
}
.choose-card{
  background: rgba(16,22,42,0.72);
  border:1px solid var(--border);
  border-radius:16px;
  padding:30px 26px;
  text-decoration:none; color:var(--text);
  display:flex; flex-direction:column;
  backdrop-filter: blur(6px);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.choose-card:hover{
  transform: translateY(-6px);
  border-color: var(--blue);
  box-shadow: 0 16px 34px rgba(59,130,246,0.18);
}
.choose-icon{
  width:52px; height:52px; border-radius:14px;
  background: linear-gradient(135deg, var(--blue), #2563eb);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; color:#fff; margin-bottom:18px;
}
.choose-card.video .choose-icon{background: linear-gradient(135deg, var(--cyan), #0891b2);}
.choose-card.live .choose-icon{background: linear-gradient(135deg, var(--purple), #7c3aed);}
.choose-card.video:hover{border-color: var(--cyan); box-shadow: 0 16px 34px rgba(34,211,238,0.18);}
.choose-card.live:hover{border-color: var(--purple); box-shadow: 0 16px 34px rgba(167,139,250,0.18);}
.choose-card h3{font-size:18px; margin-bottom:8px;}
.choose-card p{color:var(--text-dim); font-size:13.5px; line-height:1.6; margin-bottom:18px; flex:1;}
.choose-link{
  color:var(--blue-light); font-size:13.5px; font-weight:600;
  display:flex; align-items:center; gap:8px;
}
.choose-card:hover .choose-link i{transform:translateX(4px);}
.choose-link i{transition: transform .2s ease;}

/* ================= WHY SECTION (homepage) ================= */
.why-section{padding: 40px 60px 80px;}
.why-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;
}
.why-card{
  background: rgba(16,22,42,0.72);
  border:1px solid var(--border);
  border-radius:14px; padding:24px;
  backdrop-filter: blur(6px);
  transition: transform .2s ease, border-color .2s ease;
}
.why-card:hover{transform: translateY(-4px); border-color: var(--blue);}
.why-icon{
  font-size:20px; color:var(--blue-light); margin-bottom:12px;
}
.why-card h4{font-size:15px; margin-bottom:8px;}
.why-card p{color:var(--text-dim); font-size:13px; line-height:1.6;}
.why-card p a{color:var(--blue-light); font-weight:600;}

@media(max-width:900px){
  .choose-grid, .why-grid{grid-template-columns:1fr; padding-left:20px; padding-right:20px;}
  .why-section{padding:30px 20px 60px;}
}

/* ================= NAVBAR RIGHT / USER BADGE ================= */
.nav-right{display:flex; align-items:center; gap:16px;}
.user-badge{
  display:flex; align-items:center; gap:8px;
  background: rgba(59,130,246,0.1); border:1px solid var(--border);
  padding:8px 12px; border-radius:20px; font-size:13px;
}
.user-badge i.fa-circle-user{color:var(--blue-light); font-size:16px;}
.user-badge span{color:var(--text); font-weight:600;}
.user-badge a{color:var(--text-dim); transition: color .15s ease;}
.user-badge a:hover{color:var(--red);}

/* ================= AUTH PAGES (login/signup) ================= */
.auth-wrap{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:40px 20px;
}
.auth-card{
  width:100%; max-width:400px;
  background: rgba(16,22,42,0.8);
  border:1px solid var(--border);
  border-radius:18px;
  padding:38px 34px;
  backdrop-filter: blur(8px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.auth-logo{
  display:flex; align-items:center; gap:10px;
  justify-content:center;
  font-weight:700; font-size:19px; color:var(--blue-light);
  margin-bottom:26px;
}
.auth-logo i{font-size:22px;}
.auth-card h2{font-size:22px; font-weight:800; text-align:center; margin-bottom:6px;}
.auth-sub{color:var(--text-dim); font-size:13.5px; text-align:center; margin-bottom:22px;}
.auth-error{
  background: rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.3);
  color:#fca5a5; font-size:13px; padding:10px 14px; border-radius:10px;
  margin-bottom:18px; display:flex; align-items:center; gap:8px;
}
.auth-form{display:flex; flex-direction:column; gap:6px;}
.auth-form label{font-size:12.5px; color:var(--text-dim); margin-top:12px; font-weight:600;}
.auth-form input{
  background: rgba(255,255,255,0.03); border:1px solid var(--border);
  border-radius:10px; padding:11px 14px; color:var(--text);
  font-family:'Poppins', sans-serif; font-size:14px;
  transition: border-color .15s ease;
}
.auth-form input:focus{outline:none; border-color: var(--blue);}
.auth-form button{
  margin-top:22px;
  background: linear-gradient(90deg, var(--blue), #2563eb);
  color:#fff; border:none; padding:13px; border-radius:10px;
  font-size:14.5px; font-weight:700;
}
.auth-form button:hover{opacity:0.95;}
.auth-switch{
  text-align:center; margin-top:20px; font-size:13.5px; color:var(--text-dim);
}
.auth-switch a{color:var(--blue-light); font-weight:600;}

/* ================= CURSOR GLOW ================= */
.cursor-glow{
  position:fixed;
  top:0; left:0;
  width:340px; height:340px;
  margin-left:-170px; margin-top:-170px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(59,130,246,0.14) 0%, transparent 70%);
  pointer-events:none;
  z-index:2;
  will-change: transform;
}
@media(max-width:900px){
  .cursor-glow{display:none;}
}

/* ================= CARD TILT ================= */
.choose-card, .dash-stat-card, .about-block, .why-card, .auth-card{
  transition: transform .15s ease-out, border-color .2s ease, box-shadow .2s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

/* ================= GRADIENT ANIMATED TEXT ================= */
.hero h1 span, .page-header h1 span, .welcome-title span{
  background: linear-gradient(90deg, var(--blue-light), var(--cyan), var(--purple), var(--blue-light));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientShift 6s ease infinite;
}
@keyframes gradientShift{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

/* ================= NAVBAR SCROLLED STATE ================= */
.navbar{
  transition: padding .25s ease, background .25s ease, box-shadow .25s ease;
}
.navbar.scrolled{
  padding-top:12px; padding-bottom:12px;
  background: rgba(8,11,22,0.85);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

/* ================= FLOATING 3D CUBES (hero) ================= */
.float-cube{
  position:absolute;
  width:44px; height:44px;
  border-radius:8px;
  transform-style: preserve-3d;
  animation: cubeFloat 7s ease-in-out infinite;
  opacity:0.85;
}
.float-cube::before{
  content:'';
  position:absolute; inset:0;
  border-radius:8px;
  background: inherit;
  filter: blur(0px);
  box-shadow: inset 0 0 14px rgba(255,255,255,0.25);
}
.cube1{
  top:8%; right:22%;
  background: linear-gradient(135deg, var(--cyan), #0891b2);
  animation-delay:0s;
}
.cube2{
  top:38%; right:4%;
  width:34px; height:34px;
  background: linear-gradient(135deg, var(--purple), #7c3aed);
  animation-delay:1.4s;
}
.cube3{
  bottom:14%; right:30%;
  width:28px; height:28px;
  background: linear-gradient(135deg, var(--blue-light), var(--blue));
  animation-delay:2.8s;
}
@keyframes cubeFloat{
  0%,100%{transform: translateY(0) rotate(0deg);}
  50%{transform: translateY(-22px) rotate(20deg);}
}
@media(max-width:900px){
  .float-cube{display:none;}
}

/* ================= FLOATING STAT CARDS (hero) ================= */
.float-stat-card{
  position:absolute;
  background: rgba(16,22,42,0.8);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 16px;
  backdrop-filter: blur(6px);
  animation: statBob 4.5s ease-in-out infinite;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.fs1{top:2%; left:-8%; animation-delay:0s;}
.fs2{bottom:6%; left:-4%; animation-delay:1.2s;}
@keyframes statBob{
  0%,100%{transform: translateY(0);}
  50%{transform: translateY(-10px);}
}
.fs-label{
  font-size:10px; letter-spacing:1px; color:var(--text-dim); font-weight:600;
  display:flex; align-items:center; gap:6px; margin-bottom:4px;
}
.fs-dot{
  width:6px; height:6px; border-radius:50%; background:var(--green);
  box-shadow:0 0 8px 1px rgba(34,197,94,0.7);
}
.fs-value{font-size:15px; font-weight:800; color:var(--text);}
.fs-value.ok{color:var(--green);}
@media(max-width:1100px){
  .float-stat-card{display:none;}
}

/* ================= AMBIENT PARTICLE CANVAS ================= */
#particleCanvas{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
}

/* ================= PAGE TRANSITION OVERLAY ================= */
#pageTransitionOverlay{
  position:fixed; inset:0; z-index:1000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px;
  background: rgba(4,6,14,0.92);
  backdrop-filter: blur(4px);
  opacity:0; pointer-events:none;
  transition: opacity .25s ease;
}
#pageTransitionOverlay.active{
  opacity:1; pointer-events:all;
}
.pt-ring{
  width:46px; height:46px;
  border-radius:50%;
  border:3px solid rgba(167,139,250,0.2);
  border-top-color: var(--purple);
  animation: ptSpin .7s linear infinite;
}
@keyframes ptSpin{
  to{transform: rotate(360deg);}
}
.pt-label{
  color:var(--text-dim); font-size:13px; letter-spacing:0.5px;
}