:root{
  --bg-1000:#0b0f16; --bg-900:#0f1725; --bg-800:#121d31; --bg-700:#17243b;
  --card:#0d1523; --text:#e6e9f0; --muted:#9aa7bc;
  --primary:#5da2ff; --primary-600:#4a8ef0; --chip:#22314e;
  --ring:rgba(93,162,255,.35);
  --soft-shadow:0 18px 40px rgba(0,0,0,.45);
  --soft-shadow-2:0 8px 24px rgba(0,0,0,.35);
}
 
html,body{height:100%}
body{background:var(--bg-1000);color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
 
/* Animated gradient background */
.bg-app{
  position:relative;overflow:hidden;
  background:
    radial-gradient(1200px 800px at 10% 10%, rgba(45,98,210,.18), transparent 60%),
    radial-gradient(1200px 800px at 90% 20%, rgba(0,173,181,.16), transparent 60%),
    linear-gradient(180deg,var(--bg-900),var(--bg-1000));
}
.bg-app::before,.bg-app::after{
  content:"";position:absolute;inset:-10%;
  background:radial-gradient(600px 400px at 70% 80%, rgba(93,162,255,.10), transparent 60%);
  animation:floatGrad 18s ease-in-out infinite alternate;pointer-events:none
}
.bg-app::after{animation-delay:6s;background:radial-gradient(700px 500px at 20% 30%, rgba(0,173,181,.08), transparent 60%)}
@keyframes floatGrad{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(0,-2%,0) scale(1.04)}}
 
.bg-subtle{background:linear-gradient(180deg,var(--bg-800),var(--bg-900))}
.bg-card{background:var(--card)}
.text-muted-2{color:var(--muted)!important}
.shadow-soft{box-shadow:var(--soft-shadow)}
.shadow-soft-2{box-shadow:var(--soft-shadow-2)}
.rounded-4{border-radius:1.25rem!important}
.py-6{padding:4rem 0}
.py-hero{padding-top:6rem;padding-bottom:5rem}
 
/* Glass & navbar */
.glass{background:linear-gradient(180deg, rgba(13,21,35,.75), rgba(13,21,35,.62));border:1px solid rgba(255,255,255,.06);backdrop-filter:blur(10px)}
.navbar{background:rgba(10,15,24,.72)!important;backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.navbar-brand{letter-spacing:.3px}
 
/* Buttons */
.btn-primary{background-color:var(--primary);border-color:var(--primary);box-shadow:0 6px 16px rgba(93,162,255,.25)}
.btn-primary:hover,.btn-filter.active{background-color:var(--primary-600);border-color:var(--primary-600);transform:translateY(-1px)}
.btn-outline-light{border-color:rgba(255,255,255,.35);color:var(--text)}
.btn-outline-light:hover{background:rgba(255, 255, 255, 0.08);color:var(--text)}
.btn-filter{--bs-btn-padding-y:.45rem;--bs-btn-padding-x:.9rem;--bs-btn-border-radius:999px;background:var(--chip);color:var(--text);border:1px solid rgba(255,255,255,.06)}
 
/* Badges & cards */
.bg-chip{background:var(--chip)!important;color:var(--text)!important;border:1px solid rgba(255,255,255,.06)}
.card.project{background:linear-gradient(180deg, rgba(13,21,35,.85), rgba(13,21,35,.75));border:1px solid rgba(255,255,255,.06);transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.card.project:hover{transform:translateY(-4px);box-shadow:var(--soft-shadow);border-color:rgba(93,162,255,.25)}
.card .tech-badge{font-size:.75rem;background:var(--chip);color:var(--text);border:1px solid rgba(255,255,255,.06)}
 
a,.link-light{color:#c9dcff;text-decoration:none}
a:hover,.link-light:hover{color:#e1ebff;text-decoration:underline}
 
/* Titles */
.section-title{font-weight:700;letter-spacing:.2px}
.section-title{background: linear-gradient(90deg,#00adb5,#4a8ef0);}
.gradient-title{background:linear-gradient(90deg,#cbd7ff 0%,#5da2ff 35%,#00adb5 80%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
 
/* Images */
.gallery-link img{object-fit:cover;width:100%;height:180px;border:1px solid rgba(255,255,255,.06)}
.project-thumb{width:100%;height:220px;object-fit:cover;border-bottom:1px solid rgba(255,255,255,.06)}
 
/* Scroll reveal */
[data-animate]{opacity:0;transform:translateY(6px);transition:opacity .6s ease, transform .6s ease}
[data-animate].in-view{opacity:1;transform:translateY(0)}
[data-animate="fade"]{transform:translateY(8px)}
[data-animate="fade-up"]{transform:translateY(14px)}
[data-animate="fade-right"]{transform:translateX(-14px)}
[data-animate="fade-right"].in-view{transform:translateX(0)}
[data-animate="fade-left"]{transform:translateX(14px)}
[data-animate="fade-left"].in-view{transform:translateX(0)}
[data-animate="rise"]{transform:translateY(20px) scale(.98)}
[data-animate="rise"].in-view{transform:translateY(0) scale(1)}
 
/* Focus ring */
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:.5rem}
 
/* Modal */
.modal-content{border:1px solid rgba(255,255,255,.08)}
 
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}
.mb-2{
    color: #6284ff;
}
.form-label{
  color: white;
}