@import url(‘https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Mono:wght@300;400;500&display=swap’);

/* ── CSS Variables ── */
:root {
–purple-deep:   #1a0030;
–purple-dark:   #2d0050;
–purple-mid:    #6b21a8;
–purple-bright: #a855f7;
–purple-glow:   #d946ef;
–purple-light:  #e9d5ff;
–gold:          #fbbf24;
–white:         #faf5ff;
–text-muted:    #c4b5fd;
–font-display:  ‘Syne’, sans-serif;
–font-mono:     ‘DM Mono’, monospace;
}

/* ── Reset ── */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background: var(–purple-deep);
color: var(–white);
font-family: var(–font-mono);
overflow-x: hidden;
cursor: none;
}

a {
text-decoration: none;
color: inherit;
}

/* =========================================
CURSOR
========================================= */
.cursor {
width: 20px;
height: 20px;
border: 2px solid var(–purple-glow);
border-radius: 50%;
position: fixed;
pointer-events: none;
z-index: 9999;
transition: transform 0.1s ease, background 0.2s;
mix-blend-mode: screen;
}

.cursor-dot {
width: 6px;
height: 6px;
background: var(–gold);
border-radius: 50%;
position: fixed;
pointer-events: none;
z-index: 9999;
transition: transform 0.05s ease;
}

/* =========================================
BACKGROUND EFFECTS
========================================= */
.stars {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 0;
background-image:
radial-gradient(1px 1px at 10% 20%, rgba(168,85,247,0.6) 0%, transparent 100%),
radial-gradient(1px 1px at 30% 60%, rgba(217,70,239,0.5) 0%, transparent 100%),
radial-gradient(1px 1px at 60% 10%, rgba(251,191,36,0.4) 0%, transparent 100%),
radial-gradient(1px 1px at 80% 80%, rgba(168,85,247,0.6) 0%, transparent 100%),
radial-gradient(1px 1px at 50% 40%, white 0%, transparent 100%),
radial-gradient(1px 1px at 90% 30%, rgba(255,255,255,0.5) 0%, transparent 100%),
radial-gradient(1px 1px at 20% 85%, rgba(217,70,239,0.5) 0%, transparent 100%);
animation: twinkle 4s infinite alternate;
}

@keyframes twinkle {
0%   { opacity: 0.6; }
100% { opacity: 1; }
}

.mesh {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 0;
background:
radial-gradient(ellipse at 20% 50%, rgba(107,33,168,0.4) 0%, transparent 60%),
radial-gradient(ellipse at 80% 20%, rgba(217,70,239,0.3) 0%, transparent 50%),
radial-gradient(ellipse at 60% 80%, rgba(45,0,80,0.8) 0%, transparent 50%);
}

/* =========================================
NAVIGATION
========================================= */
nav {
position: fixed;
top: 0;
width: 100%;
padding: 20px 60px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
backdrop-filter: blur(12px);
background: rgba(26,0,48,0.6);
border-bottom: 1px solid rgba(168,85,247,0.2);
}

.logo {
font-family: var(–font-display);
font-size: 1.4rem;
font-weight: 800;
color: var(–gold);
letter-spacing: 2px;
}

.logo span {
color: var(–purple-bright);
}

nav ul {
list-style: none;
display: flex;
gap: 35px;
}

nav ul li a {
color: var(–text-muted);
font-size: 0.8rem;
letter-spacing: 1px;
transition: color 0.3s;
text-transform: uppercase;
}

nav ul li a:hover {
color: var(–purple-glow);
}

/* =========================================
SECTIONS BASE
========================================= */
section {
position: relative;
z-index: 1;
}

.section-tag {
font-size: 0.7rem;
letter-spacing: 4px;
text-transform: uppercase;
color: var(–purple-glow);
margin-bottom: 15px;
display: block;
}

h2 {
font-family: var(–font-display);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
margin-bottom: 20px;
line-height: 1.1;
}

/* =========================================
HERO SECTION
========================================= */
#hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
padding: 100px 20px 60px;
}

.badge {
display: inline-block;
background: rgba(168,85,247,0.2);
border: 1px solid var(–purple-bright);
color: var(–purple-bright);
padding: 6px 18px;
border-radius: 999px;
font-size: 0.75rem;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 30px;
animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
0%, 100% { box-shadow: 0 0 0 0 rgba(168,85,247,0.4); }
50%       { box-shadow: 0 0 0 8px rgba(168,85,247,0); }
}

/* Profile Picture */
.profile-pic-wrapper {
position: relative;
width: 160px;
height: 160px;
margin: 0 auto 30px;
}

.profile-pic-wrapper::before {
content: ‘’;
position: absolute;
inset: -4px;
border-radius: 50%;
background: conic-gradient(var(–purple-glow), var(–gold), var(–purple-bright), var(–purple-glow));
animation: spin 3s linear infinite;
z-index: -1;
}

@keyframes spin {
to { transform: rotate(360deg); }
}

.profile-pic {
width: 160px;
height: 160px;
border-radius: 50%;
object-fit: cover;
border: 4px solid var(–purple-deep);
display: block;
}

.pic-placeholder {
width: 160px;
height: 160px;
border-radius: 50%;
background: rgba(107,33,168,0.3);
border: 4px solid var(–purple-deep);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 0.65rem;
color: var(–text-muted);
text-align: center;
gap: 6px;
}

.pic-placeholder .emoji {
font-size: 2.5rem;
}

/* Hero Heading */
h1 {
font-family: var(–font-display);
font-size: clamp(3rem, 8vw, 7rem);
font-weight: 800;
line-height: 1;
margin-bottom: 10px;
background: linear-gradient(135deg, #fff 0%, var(–purple-bright) 50%, var(–gold) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradient-shift 4s ease infinite alternate;
background-size: 200%;
}

@keyframes gradient-shift {
0%   { background-position: 0%; }
100% { background-position: 100%; }
}

.glitch {
position: relative;
}

.glitch::before,
.glitch::after {
content: attr(data-text);
position: absolute;
top: 0; left: 0;
background: linear-gradient(135deg, #fff 0%, var(–purple-bright) 50%, var(–gold) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
background-size: 200%;
}

.glitch::before {
animation: glitch-1 4s infinite;
clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%);
}

.glitch::after {
animation: glitch-2 4s infinite;
clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
}

@keyframes glitch-1 {
0%, 92%, 100% { transform: translate(0); }
94%            { transform: translate(-3px, 2px); }
96%            { transform: translate(3px, -2px); }
}

@keyframes glitch-2 {
0%, 92%, 100% { transform: translate(0); }
94%            { transform: translate(3px, -2px); }
96%            { transform: translate(-3px, 2px); }
}

.subtitle {
font-size: clamp(0.9rem, 2vw, 1.1rem);
color: var(–text-muted);
margin-bottom: 10px;
letter-spacing: 1px;
}

.funny-line {
font-size: 0.85rem;
color: var(–gold);
margin-bottom: 40px;
font-style: italic;
}

/* Buttons */
.hero-btns {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}

.btn {
padding: 14px 32px;
border-radius: 8px;
font-family: var(–font-mono);
font-size: 0.85rem;
letter-spacing: 1px;
cursor: pointer;
text-decoration: none;
transition: all 0.3s;
text-transform: uppercase;
display: inline-block;
}

.btn-primary {
background: var(–purple-bright);
color: white;
border: none;
box-shadow: 0 0 30px rgba(168,85,247,0.4);
}

.btn-primary:hover {
background: var(–purple-glow);
box-shadow: 0 0 50px rgba(217,70,239,0.6);
transform: translateY(-2px);
}

.btn-outline {
background: transparent;
color: var(–purple-bright);
border: 1px solid var(–purple-bright);
}

.btn-outline:hover {
background: rgba(168,85,247,0.15);
transform: translateY(-2px);
}

/* =========================================
SCROLLING TICKER
========================================= */
.ticker {
background: rgba(107,33,168,0.3);
border-top: 1px solid rgba(168,85,247,0.3);
border-bottom: 1px solid rgba(168,85,247,0.3);
padding: 12px 0;
overflow: hidden;
white-space: nowrap;
}

.ticker-inner {
display: inline-block;
animation: ticker 18s linear infinite;
font-size: 0.78rem;
color: var(–purple-glow);
letter-spacing: 2px;
}

@keyframes ticker {
0%   { transform: translateX(0); }
100% { transform: translateX(-50%); }
}

.ticker-sep {
margin: 0 30px;
color: var(–gold);
}

/* =========================================
ABOUT SECTION
========================================= */
#about {
padding: 100px 10%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}

.about-text {
color: var(–text-muted);
line-height: 1.8;
font-size: 0.9rem;
margin-bottom: 15px;
}

.fun-fact {
background: rgba(107,33,168,0.25);
border: 1px solid rgba(168,85,247,0.3);
border-radius: 12px;
padding: 20px;
margin-top: 20px;
font-size: 0.82rem;
color: var(–gold);
line-height: 1.6;
}

.fun-fact::before {
content: ’💡 Fun Fact: ’;
}

/* Stats Grid */
.stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}

.stat-card {
background: rgba(45,0,80,0.5);
border: 1px solid rgba(168,85,247,0.25);
border-radius: 16px;
padding: 28px 24px;
text-align: center;
transition: all 0.3s;
position: relative;
overflow: hidden;
}

.stat-card::after {
content: ‘’;
position: absolute;
top: 0; left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, var(–purple-bright), var(–purple-glow));
}

.stat-card:hover {
border-color: var(–purple-bright);
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(168,85,247,0.2);
}

.stat-num {
font-family: var(–font-display);
font-size: 2.5rem;
font-weight: 800;
color: var(–gold);
display: block;
}

.stat-label {
font-size: 0.75rem;
color: var(–text-muted);
letter-spacing: 1px;
margin-top: 5px;
}

/* =========================================
SKILLS SECTION
========================================= */
#skills {
padding: 100px 10%;
text-align: center;
}

.skills-intro {
color: var(–text-muted);
font-size: 0.9rem;
margin-bottom: 60px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}

.skills-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-top: 40px;
}

.skill-card {
background: rgba(45,0,80,0.5);
border: 1px solid rgba(168,85,247,0.2);
border-radius: 16px;
padding: 30px 20px;
transition: all 0.3s;
position: relative;
overflow: hidden;
cursor: default;
}

.skill-card:hover {
border-color: var(–purple-glow);
transform: translateY(-8px) rotate(-1deg);
box-shadow: 0 20px 50px rgba(217,70,239,0.2);
}

.skill-icon {
font-size: 2.5rem;
margin-bottom: 12px;
display: block;
}

.skill-name {
font-family: var(–font-display);
font-size: 1rem;
font-weight: 700;
margin-bottom: 6px;
}

.skill-desc {
font-size: 0.72rem;
color: var(–text-muted);
}

.skill-level {
height: 3px;
background: rgba(168,85,247,0.2);
border-radius: 99px;
margin-top: 15px;
overflow: hidden;
}

.skill-level-fill {
height: 100%;
background: linear-gradient(90deg, var(–purple-bright), var(–purple-glow));
border-radius: 99px;
width: 0;
transition: width 1.5s ease;
}

/* =========================================
PROJECTS SECTION
========================================= */
#projects {
padding: 100px 10%;
}

.projects-header {
text-align: center;
margin-bottom: 60px;
}

.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 25px;
}

.project-card {
background: rgba(45,0,80,0.5);
border: 1px solid rgba(168,85,247,0.2);
border-radius: 20px;
overflow: hidden;
transition: all 0.3s;
}

.project-card:hover {
border-color: var(–purple-bright);
transform: translateY(-8px);
box-shadow: 0 30px 60px rgba(168,85,247,0.2);
}

.project-img {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
}

.project-img-placeholder {
width: 100%;
height: 180px;
background: linear-gradient(135deg, rgba(107,33,168,0.4), rgba(217,70,239,0.2));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
color: var(–text-muted);
font-size: 0.7rem;
letter-spacing: 1px;
}

.project-img-placeholder .big-icon {
font-size: 2.5rem;
}

.project-body {
padding: 24px;
}

.project-tag {
font-size: 0.65rem;
letter-spacing: 2px;
text-transform: uppercase;
color: var(–purple-glow);
margin-bottom: 8px;
display: block;
}

.project-title {
font-family: var(–font-display);
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 10px;
}

.project-desc {
font-size: 0.78rem;
color: var(–text-muted);
line-height: 1.6;
margin-bottom: 15px;
}

.project-techs {
display: flex;
flex-wrap: wrap;
gap: 6px;
}

.tech-tag {
font-size: 0.65rem;
padding: 4px 10px;
background: rgba(168,85,247,0.2);
border: 1px solid rgba(168,85,247,0.3);
border-radius: 999px;
color: var(–purple-bright);
}

/* =========================================
CONTACT SECTION
========================================= */
#contact {
padding: 100px 10%;
text-align: center;
}

.contact-subtitle {
color: var(–text-muted);
font-size: 0.9rem;
margin-bottom: 60px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
line-height: 1.7;
}

.contact-links {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
margin-bottom: 50px;
}

.contact-card {
display: flex;
align-items: center;
gap: 14px;
background: rgba(45,0,80,0.5);
border: 1px solid rgba(168,85,247,0.2);
border-radius: 14px;
padding: 18px 28px;
color: var(–white);
transition: all 0.3s;
min-width: 220px;
}

.contact-card:hover {
border-color: var(–purple-glow);
background: rgba(107,33,168,0.3);
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(217,70,239,0.2);
}

.contact-icon {
font-size: 1.8rem;
}

.contact-info {
text-align: left;
}

.contact-type {
font-size: 0.65rem;
letter-spacing: 2px;
text-transform: uppercase;
color: var(–purple-glow);
margin-bottom: 3px;
}

.contact-value {
font-size: 0.85rem;
color: var(–text-muted);
font-family: var(–font-mono);
}

/* =========================================
FOOTER
========================================= */
footer {
padding: 40px;
text-align: center;
border-top: 1px solid rgba(168,85,247,0.2);
color: var(–text-muted);
font-size: 0.75rem;
letter-spacing: 1px;
}

footer .heart {
color: var(–purple-glow);
}

.float-badge {
position: fixed;
right: 30px;
bottom: 30px;
background: rgba(45,0,80,0.9);
border: 1px solid var(–purple-bright);
border-radius: 12px;
padding: 12px 18px;
font-size: 0.7rem;
color: white;
z-index: 100;
animation: float-up 3s ease-in-out infinite;
backdrop-filter: blur(10px);
line-height: 1.6;
}

@keyframes float-up {
0%, 100% { transform: translateY(0); }
50%       { transform: translateY(-8px); }
}


.text-glow   { color: var(–purple-glow); }
.text-gold   { color: var(–gold); }
.text-bright { color: var(–purple-bright); }

@media (max-width: 900px) {
#about {
grid-template-columns: 1fr;
gap: 40px;
padding: 80px 6%;
}
}

@media (max-width: 768px) {
nav {
padding: 15px 20px;
}

nav ul {
gap: 15px;
}

nav ul li a {
font-size: 0.7rem;
}

#skills,
#projects,
#contact {
padding: 80px 6%;
}

.stats-grid {
grid-template-columns: 1fr 1fr;
}

.contact-card {
min-width: 160px;
}

.float-badge {
right: 15px;
bottom: 15px;
font-size: 0.65rem;
}
}

@media (max-width: 480px) {
h1 {
font-size: 3rem;
}

nav ul {
gap: 10px;
}

.stats-grid {
grid-template-columns: 1fr;
}
}