/* --- 1. VARIABLES & CORE SETTINGS --- */
:root{
  --bg: #030305; /* Darker black to make the glow pop */
  --card: #0e1012;
  --accent-a: #2ea6ff;
  --accent-b: #ffffff;
  --accent-grad: linear-gradient(90deg,var(--accent-a),var(--accent-b));
  --radius: 16px; /* Slightly rounder for modern feel */
  --glass: rgba(255,255,255,0.03);
  --text: #eaf2ff;
  --soft: #9aa6b8;
  --border-light: rgba(255, 255, 255, 0.15);
  --border-dark: rgba(255, 255, 255, 0.05);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

body{
  font-family: 'Inter', system-ui, sans-serif;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.45;
  overflow-x: hidden;
  scroll-behavior: smooth;

  /* UPGRADE 1: GLOBAL SPOTLIGHT (The "Pro" Lighting) */
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(46, 166, 255, 0.15) 0%, transparent 60%),
    radial-gradient(circle at 85% 40%, rgba(46, 166, 255, 0.06) 0%, transparent 40%);
  background-attachment: fixed; /* Keeps the glow at top when scrolling */
}

/* --- 2. BACKGROUND CANVAS --- */
#particles-canvas{
  position:fixed; inset:0; z-index:-3; width:100%; height:100%;
  pointer-events:none; display:block;
}

/* Grid Overlay */
.bg-grid{
  position:fixed; inset:0; z-index:-2;
  background-image: 
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
  opacity: 0.3;
  pointer-events: none;
}

/* --- 3. NAVIGATION --- */
.topbar{
  position:sticky; top:0; z-index:60;
  background: rgba(3, 3, 5, 0.6);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-dark);
  transition: box-shadow .18s, background .18s;
}
.topbar.scrolled{
  box-shadow: 0 6px 30px rgba(0,0,0,0.5);
  background: rgba(3, 3, 5, 0.85);
}

.topbar-inner{max-width:980px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; gap:12px; justify-content:space-between;}
.logo-mini img{width:40px; height:40px; border-radius:50%; border: 1px solid var(--border-light);}

/* Hamburger */
.hamburger{width:48px; height:40px; border-radius:10px; border:1px solid var(--border-dark); display:flex; align-items:center; justify-content:center; background:transparent; cursor:pointer;}
.hamburger span{display:block; height:2px; width:20px; background:var(--soft); margin:4px 0; border-radius:2px; transition:0.2s;}
.hamburger.open{background: rgba(46, 166, 255, 0.1); border-color: var(--accent-a);}
.hamburger.open span{background: var(--accent-a);}
.hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* Menu Panel */
.menu-panel{
  position:absolute; right:16px; top:68px; 
  background: rgba(15, 15, 20, 0.9); backdrop-filter: blur(16px);
  padding:10px; border-radius:12px; min-width:180px;
  border:1px solid var(--border-light);
  box-shadow:0 18px 60px rgba(0,0,0,0.8);
  opacity:0; transform:translateY(10px); pointer-events:none; transition:0.2s ease;
}
.menu-panel.open{opacity:1; transform:translateY(0); pointer-events:auto;}
.menu-panel a{display:block; color:var(--soft); padding:10px 12px; border-radius:8px; text-decoration:none; font-weight: 500;}
.menu-panel a:hover{background:rgba(255,255,255,0.05); color:var(--accent-a);}

/* Main Layout */
main{max-width:980px; margin:0 auto; padding:14px 16px 80px;}

/* --- 4. HERO SECTION --- */
.hero{padding:60px 0 20px; text-align:center;}
.floating{animation:floaty 6s ease-in-out infinite;}
@keyframes floaty{0%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-12px) rotate(0.6deg)}100%{transform:translateY(0) rotate(0deg)}}

.logo-circle.big{
  width:140px; height:140px; border-radius:50%; overflow:hidden; margin:0 auto;
  border:1px solid var(--border-light);
  box-shadow: 0 0 80px rgba(46, 166, 255, 0.35); /* Enhanced Glow */
}
.logo-circle.big img{width:100%; height:100%; object-fit:cover;}

/* UPGRADE 3: GRADIENT TEXT */
.hero-name{
  font-size:3.5rem; margin-top:20px; font-weight:900; letter-spacing:-1px;
  background: linear-gradient(135deg, #fff 30%, var(--accent-a));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* --- 5. HOLOGRAPHIC CARDS (The "Glass" Look) --- */
.card, .sd-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius);
  padding: 24px; margin: 24px 0;
  
  /* The Glass Edge Trick: Top is lighter than bottom */
  border: 1px solid transparent;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-dark);
  border-left: 1px solid var(--border-dark);
  border-right: 1px solid var(--border-dark);
  
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.6);
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.card:hover, .sd-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 60px -15px rgba(46, 166, 255, 0.15);
  border-color: rgba(46, 166, 255, 0.3);
}

/* ShotDevs Specifics */
.sd-card{padding:28px; position: relative;}
.sd-badge{
  display:inline-block; padding:6px 14px; border-radius:20px;
  background: var(--accent-a); color: #030305;
  font-weight:800; font-size: 0.75rem; text-transform: uppercase;
  box-shadow: 0 0 20px rgba(46, 166, 255, 0.5);
  position: absolute; top:28px; right:28px;
}

.sd-hero{display:flex; gap:16px; align-items:center; margin-top:10px;}
.sd-logo{width:72px; height:72px; border-radius:18px; overflow:hidden; border:1px solid var(--border-light);}
.sd-logo img{width:100%; height:100%; object-fit:cover;}

.sd-title-wrap h3{
  margin:0; font-size:1.8rem; font-weight:800;
  background: linear-gradient(90deg, #fff, #b0dfff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sd-sub{margin:4px 0 0; color:var(--soft); font-size:14px;}
.sd-desc{margin-top:20px; color:#becde3; font-size:15px; line-height:1.6;}

/* Features */
.sd-features{list-style:none; padding:16px 0 0; display:flex; flex-direction:column; gap:12px;}
.sd-features li{
  display:flex; gap:14px; align-items:center; padding:12px; 
  border-radius:12px; background:rgba(0,0,0,0.2); 
  border:1px solid var(--border-dark); transition:0.2s;
}
.sd-features li:hover{background:rgba(46, 166, 255, 0.05); border-color: var(--accent-a);}

.feat-icon{
  width:40px; height:40px; border-radius:10px; 
  display:flex; align-items:center; justify-content:center;
  background: rgba(46, 166, 255, 0.1); color: var(--accent-a);
  flex-shrink:0;
}

/* Actions */
.sd-actions{margin-top:24px; display:flex; gap:12px; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 20px; border-radius:10px; font-weight:700; cursor:pointer;
  text-decoration:none; transition:0.2s; font-size: 0.95rem;
}
.btn.primary{
  background: var(--accent-a); color: #030305;
  box-shadow: 0 0 25px rgba(46, 166, 255, 0.25);
}
.btn.primary:hover{background: #5cb6ff; box-shadow: 0 0 40px rgba(46, 166, 255, 0.5);}

.btn.secondary{background:transparent; border:1px solid var(--border-light); color:#fff;}
.btn.secondary:hover{background:rgba(255,255,255,0.1); border-color:#fff;}

/* --- 6. CONTENT SECTIONS --- */
.section-title{display:flex; align-items:center; gap:12px; font-size:1.4rem; font-weight:800; margin:0 0 20px; color: #fff;}
.icon-wrap{
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background: rgba(46, 166, 255, 0.1); color: var(--accent-a);
  box-shadow: 0 0 20px rgba(0,0,0,0.2); border: 1px solid rgba(46, 166, 255, 0.1);
}
.icon-wrap svg{width:20px; height:20px; stroke:currentColor; fill:none;}

/* Roles */
.roles-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px;}
.role{
  padding:20px; border-radius:14px; 
  background:rgba(0,0,0,0.2); border:1px solid var(--border-dark); 
  transition: transform 0.3s, border-color 0.3s;
}
.role:hover{transform:translateY(-5px); border-color: var(--accent-a);}
.role-icon{
  width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.03); color: var(--accent-a); margin-bottom:14px;
  border: 1px solid var(--border-dark);
}

/* Projects & Tags */
.project{padding:10px 0;}
.project-tags { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.tag {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.5px;
  background: rgba(46, 166, 255, 0.1); color: var(--accent-a);
  padding: 5px 10px; border-radius: 6px;
  border: 1px solid rgba(46, 166, 255, 0.25);
}

/* Skills (Button Style) */
.skill-list {
  list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px;
}
.skill-list li {
  padding: 10px 18px; border-radius: 100px;
  background: rgba(255,255,255,0.02);
  font-weight: 600; font-size: 0.9rem;
  border: 1px solid var(--border-dark);
  transition: 0.2s; cursor: default;
}
.skill-list li:hover {
  background: rgba(46, 166, 255, 0.15);
  color: var(--accent-a);
  border-color: var(--accent-a);
  box-shadow: 0 0 15px rgba(46, 166, 255, 0.2);
}

/* Contact & Footer */
.contact-icons{display:flex; gap:16px; margin-top:12px; flex-wrap:wrap;}
.c-icon{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.02); color:var(--soft); 
  border:1px solid var(--border-dark); transition:0.3s;
}
.c-icon svg{width:24px; height:24px; stroke:currentColor; fill:none;}
.c-icon:hover{
  transform:translateY(-6px); background:var(--accent-a); color:#030305;
  box-shadow:0 10px 40px rgba(46, 166, 255, 0.4); border-color:transparent;
}

.footer{padding:50px 0 20px; text-align:center; color:var(--soft); font-size:13px; opacity: 0.6;}

/* Go Top */
.go-top{
  position:fixed; right:20px; bottom:20px; width:50px; height:50px; border-radius:50%;
  background:var(--accent-a); display:flex; align-items:center; justify-content:center; color:#030305;
  box-shadow:0 0 30px rgba(46, 166, 255, 0.5);
  transform:translateY(20px); opacity:0; transition:0.3s; z-index:99;
}
.go-top.visible{transform:translateY(0); opacity:1;}

/* ANIMATIONS */
.reveal{opacity:0; transform:translateY(20px); transition: all 0.8s ease;}
.reveal.inview{opacity:1; transform:translateY(0);}
.reveal-item{opacity:0; transform:translateY(20px); transition: all 0.5s ease;}
.reveal-item.inview{opacity:1; transform:translateY(0);}

@media (max-width:760px){
  .hero-name{font-size:2.5rem;}
  .sd-hero{flex-direction:column; align-items:flex-start; gap:12px;}
  .sd-badge{top:20px; right:20px; font-size:0.7rem;}
}