* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
:root {
   --bg: #050816;
   --card: rgba(16, 24, 39, 0.65);
   --blue: #3b82f6;
   --text: #fff;
}
body {
   font-family: Arial, sans-serif;
   background: var(--bg);
   color: var(--text);
}
.bg {
   position: fixed;
   inset: 0;
   background:
      radial-gradient(
         circle at 20% 20%,
         rgba(59, 130, 246, 0.35),
         transparent 30%
      ),
      radial-gradient(
         circle at 80% 10%,
         rgba(0, 183, 255, 0.2),
         transparent 25%
      ),
      linear-gradient(#050816, #0f172a);
   z-index: -1;
}
.hero {
   max-width: 900px;
   margin: 60px auto;
   padding: 40px;
   text-align: center;
   background: var(--card);
   backdrop-filter: blur(14px);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 24px;
}
.logo {
   width: 110px;
   height: 110px;
   margin: auto;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 42px;
   font-weight: bold;
   background: linear-gradient(135deg, #2563eb, #60a5fa);
   box-shadow: 0 0 35px rgba(59, 130, 246, 0.6);
}
.tag {
   margin-top: 20px;
   color: #7dd3fc;
   letter-spacing: 3px;
}
h1 {
   font-size: 56px;
   margin: 10px 0;
}
.intro {
   max-width: 700px;
   margin: 20px auto;
   line-height: 1.8;
   color: #dbeafe;
}
.buttons {
   display: flex;
   justify-content: center;
   gap: 16px;
   flex-wrap: wrap;
   margin-top: 25px;
}
.buttons a {
   text-decoration: none;
   padding: 14px 24px;
   border-radius: 40px;
   background: #2563eb;
   color: #fff;
}
.secondary {
   background: #1f2937 !important;
}
.card,
.grid {
   max-width: 1000px;
   margin: 30px auto;
}
.card,
.box {
   background: var(--card);
   padding: 30px;
   border-radius: 24px;
   backdrop-filter: blur(12px);
}
.skill {
   margin: 20px 0;
}
.bar {
   height: 12px;
   background: #1f2937;
   border-radius: 10px;
   overflow: hidden;
   margin-top: 8px;
}
.bar div {
   height: 100%;
   background: linear-gradient(90deg, #2563eb, #60a5fa);
}
.grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: 20px;
}
.box p,
.box li {
   color: #dbeafe;
   line-height: 1.8;
}
footer {
   text-align: center;
   padding: 35px;
   color: #93c5fd;
}
@media (max-width: 768px) {
   h1 {
      font-size: 42px;
   }
   .hero {
      margin: 20px;
      padding: 25px;
   }
}