/* Design tokens (HSL) */
:root{
  --primary: 188 95% 43%;
  --accent: 25 95% 53%;
  --bg: 220 10% 10%;
  --glass-bg: 220 8% 14%;
  --glass-border: 220 8% 24%;
  --radius: 14px;
  --transition: 0.28s cubic-bezier(.2,.9,.2,1);
  --container: 1100px;
  --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 20px 50px rgba(11, 197, 234, 0.1);
  color-scheme: dark;
}

/* Light theme */
:root.light{
  --bg: 210 20% 98%;
  --glass-bg: 210 100% 100%;
  --glass-border: 210 100% 94%;
  --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 50px rgba(11, 197, 234, 0.15);
  color-scheme: light;
}

:root.light body {
  color: hsl(220 10% 20% / 0.95);
}

:root.light .links a {
  opacity: 0.75;
}

:root.light .links a:hover {
  opacity: 1;
  color: hsl(var(--primary));
}

:root.light .icon-btn {
  color: hsl(220 10% 20%);
}

:root.light .brand .logo {
  color: hsl(220 10% 20%);
}

:root.light .glass {
  background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(255,255,255,0.5));
  border-color: rgba(11, 197, 234, 0.2);
}

:root.light .glass:hover {
  border-color: rgba(11, 197, 234, 0.4);
}

:root.light .btn-ghost {
  border-color: rgba(11, 197, 234, 0.4);
  color: hsl(220 10% 20%);
}

:root.light .btn-ghost:hover {
  background: rgba(11, 197, 234, 0.08);
  border-color: rgba(11, 197, 234, 0.6);
}

:root.light .skill-card {
  color: hsl(220 10% 20%);
}

:root.light .lead,
:root.light .meta,
:root.light .section-title {
  opacity: 0.85;
}

:root.light .timeline .line {
  background: linear-gradient(180deg, rgba(11,197,234,0.4), rgba(255,107,53,0.3));
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: linear-gradient(180deg, hsl(var(--bg) / 1), hsl(var(--bg) / 0.98));
  color: hsl(0 0% 100% / 0.95);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth;
  transition:background 300ms linear, color 300ms linear;
}

/* Container */
.container{max-width:var(--container);margin:0 auto;padding:0 1rem}

/* NAV */
.nav{
  position:fixed;left:0;right:0;top:18px;z-index:60;
  padding:10px 0;
  transition:var(--transition);
  backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); /* For Safari */

  backdrop-filter: blur(8px) saturate(120%);
}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.brand .logo{font-weight:700;text-decoration:none;color:inherit}
.brand .accent{
  background:linear-gradient(90deg,hsl(var(--primary)),hsl(var(--accent)));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.role{font-size:12px;opacity:0.75;margin-top:2px}

/* glass card base */
.glass{
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--radius);
  padding:12px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.glass:hover{
  border-color: rgba(255,255,255,0.15);
  box-shadow: var(--shadow-lg);
}

/* links */
.links a{
  margin-left:14px;
  text-decoration:none;
  color:inherit;
  font-weight:500;
  opacity:0.9;
  position:relative;
  transition: opacity var(--transition);
}
.links a::after{
  content:'';
  position:absolute;
  bottom:-4px;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg,hsl(var(--primary)),hsl(var(--accent)));
  transform:scaleX(0);
  transform-origin:right;
  transition:transform var(--transition);
}
.links a:hover::after{
  transform:scaleX(1);
  transform-origin:left;
}
.links a:hover{
  opacity:1;
}
.icon-btn{
  background:transparent;
  border:0;
  padding:6px;
  border-radius:8px;
  cursor:pointer;
  transition: transform var(--transition), opacity var(--transition);
  font-size:1.2rem;
}
.icon-btn:hover{
  transform:scale(1.15) rotate(20deg);
  opacity:1;
}

/* hamburger */
.hamburger{display:none;background:transparent;border:0;width:44px;height:36px}
.hamburger span{display:block;height:3px;background:rgba(255,255,255,0.8);margin:6px 0;border-radius:3px}

/* Hero */
.hero{min-height:88vh;display:flex;align-items:center;padding-top:44px}
.hero-inner{display:flex;gap:40px;align-items:center}
.hero-left{flex:1}
.hero-right{flex:1;display:flex;justify-content:center}
h1{font-size:44px;margin:0;line-height:1.02}
.name-gradient{
  background:linear-gradient(90deg,hsl(var(--primary)),hsl(var(--accent)));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lead{margin-top:12px;opacity:0.85;max-width:46ch}
.ctas{
  margin-top:20px;
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.btn{
  display:inline-block;
  padding:12px 24px;
  border-radius:10px;
  background:linear-gradient(90deg,hsl(var(--primary)),hsl(var(--accent)));
  color:#071019;
  font-weight:600;
  text-decoration:none;
  transition:transform var(--transition), box-shadow var(--transition), letter-spacing var(--transition);
  position:relative;
  overflow:hidden;
  letter-spacing:0.5px;
  height:fit-content;
}
.btn::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:rgba(255,255,255,0.2);
  transition:left var(--transition);
  z-index:0;
}
.btn span, .btn{
  position:relative;
  z-index:1;
}
.btn:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(11,197,234,0.3);
  letter-spacing:1px;
}
.btn:hover::before{
  left:100%;
}
.btn-ghost{
  background:transparent;
  border:2px solid rgba(255,255,255,0.3);
  color:inherit;
  box-shadow:none;
}
.btn-ghost:hover{
  background:rgba(255,255,255,0.05);
  border-color:rgba(255,255,255,0.6);
  box-shadow:0 8px 20px rgba(255,255,255,0.1);
}

/* profile card */
.profile-card{
  position:relative;
  width:320px;
  height:320px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:24px;
  border-radius:16px;
}
.profile-photo-wrap{
  width:120px;
  height:120px;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(11,197,234,0.15);
  border:2px solid rgba(11,197,234,0.2);
  background:linear-gradient(135deg, rgba(11,197,234,0.1), rgba(255,107,53,0.05));
}
.profile-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  animation:profileFadeIn 1s ease-out;
  -webkit-image-rendering: optimizeQuality;
  image-rendering: optimizeQuality;
}

/* floating geometry */
.geom{position:absolute;border-radius:12px;opacity:0.95;pointer-events:none}
.geom-1{width:160px;height:160px;left:-40px;top:-30px;background:linear-gradient(135deg, rgba(11,197,234,0.12), rgba(255,107,53,0.08))}
.geom-2{width:80px;height:80px;right:-20px;bottom:-20px;background:linear-gradient(135deg, rgba(255,107,53,0.14), rgba(11,197,234,0.06))}

/* scroll indicator */
.scroll-indicator{position:absolute;left:50%;transform:translateX(-50%);bottom:28px;background:rgba(255,255,255,0.03);padding:8px 12px;border-radius:20px}

/* Sections */
.section{padding:72px 0}
.section-title{font-size:26px;margin-bottom:18px}

/* grids */
.grid{display:grid;gap:16px}
.skills-grid{grid-template-columns:repeat(2,1fr)}
.projects-grid{grid-template-columns:1fr}
@media(min-width:700px){.skills-grid{grid-template-columns:repeat(3,1fr)}.projects-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.skills-grid{grid-template-columns:repeat(4,1fr)}.projects-grid{grid-template-columns:repeat(3,1fr)}}

/* skill card */
.skill-card{
  text-align:center;
  padding:24px;
  border-radius:12px;
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition);
  box-shadow:0 6px 20px rgba(11,197,234,0.03);
  position:relative;
  overflow:hidden;
}
.skill-card::before{
  content:'';
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:radial-gradient(circle, rgba(11,197,234,0.1) 0%, transparent 70%);
  opacity:0;
  transition:opacity var(--transition);
  pointer-events:none;
}
.skill-card:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 20px 40px rgba(11,197,234,0.12);
}
.skill-card:hover::before{
  opacity:1;
}
.skill-icon{
  font-size:2.5rem;
  margin-bottom:12px;
  display:inline-block;
  transition:transform var(--transition);
}
.skill-card:hover .skill-icon{
  transform:scale(1.2) rotate(-5deg);
}

/* timeline */
.timeline{
  position:relative;
  padding:20px;
}
.timeline .line{
  position:absolute;
  left:16px;
  width:3px;
  top:0;
  bottom:0;
  background:linear-gradient(180deg, rgba(11,197,234,0.6), rgba(255,107,53,0.4));
  border-radius:4px;
  box-shadow:0 0 20px rgba(11,197,234,0.3);
}
.timeline-item{
  display:flex;
  gap:28px;
  align-items:flex-start;
  padding:24px 0;
  position:relative;
  margin-left:0;
}
.timeline-item .dot{
  width:16px;
  height:16px;
  border-radius:50%;
  background:hsl(var(--primary));
  box-shadow:0 0 20px rgba(11,197,234,0.4), inset 0 0 10px rgba(255,255,255,0.3);
  animation:glow 3000ms ease-in-out infinite;
  flex-shrink:0;
  margin-top:4px;
  border:3px solid rgba(11,197,234,0.3);
}
.timeline-item .content{
  max-width:600px;
  animation:slideInContent 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity:0;
}
.timeline-item:nth-child(1) .content { animation-delay: 0.1s; }
.timeline-item:nth-child(2) .content { animation-delay: 0.3s; }
.timeline-item:nth-child(3) .content { animation-delay: 0.5s; }
.timeline-item:nth-child(4) .content { animation-delay: 0.7s; }
.timeline-item:nth-child(5) .content { animation-delay: 0.9s; }
.timeline-item:nth-child(n+6) .content { animation-delay: 1.1s; }
.timeline-item .content h3{
  margin:0 0 8px 0;
  font-size:1.15rem;
  font-weight:600;
}
.meta{
  font-size:13px;
  opacity:0.7;
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:8px;
}
.meta::before{
  content:'\2726';
  color:hsl(var(--accent));
}

/* projects */
.project-card{
  padding:20px;
  border-radius:12px;
  position:relative;
  overflow:hidden;
  transition:transform var(--transition);
}
.project-card::after{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(135deg, rgba(11,197,234,0.1), transparent);
  opacity:0;
  transition:opacity var(--transition);
  pointer-events:none;
}
.project-card:hover{
  transform:translateY(-8px);
}
.project-card:hover::after{
  opacity:1;
}
.proj-hero{
  height:140px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  font-weight:700;
  background:linear-gradient(135deg,hsl(var(--primary)),hsl(var(--accent)));
  position:relative;
  overflow:hidden;
  margin-bottom:12px;
  transition:transform var(--transition);
  font-size:1.1rem;
}
.proj-hero::before{
  content:'';
  position:absolute;
  top:-50%;
  right:-50%;
  width:200%;
  height:200%;
  background:radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
  animation:shimmer 6s infinite;
}
.project-card:hover .proj-hero{
  transform:scale(1.05);
}
.proj-hero span{
  position:relative;
  z-index:2;
  font-size:3.5rem;
  display:inline-block;
  transition:transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.project-card:hover .proj-hero span{
  transform:scale(1.3) rotateY(360deg);
}
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.tags span{
  font-size:0.8rem;
  padding:4px 10px;
  border-radius:20px;
  background:rgba(11,197,234,0.15);
  border:1px solid rgba(11,197,234,0.3);
  transition:all var(--transition);
}
.project-card:hover .tags span{
  background:rgba(11,197,234,0.25);
  border-color:rgba(11,197,234,0.5);
}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr;gap:20px}
.contact-form input, .contact-form textarea{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit}
.form-row{display:flex;gap:12px;align-items:center;margin-top:8px}
.contact-info a{color:inherit;text-decoration:underline}

/* footer */
.footer{padding:28px 0;border-top:1px solid rgba(255,255,255,0.03);opacity:0.85;text-align:center}

/* reveal animations */
.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity 600ms var(--transition), transform 600ms var(--transition);
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
}
.reveal.delay-1{transition-delay:120ms}
.reveal.delay-2{transition-delay:240ms}
.reveal.delay-3{transition-delay:360ms}
.reveal.delay-4{transition-delay:480ms}
.reveal.delay-5{transition-delay:600ms}
.reveal.delay-6{transition-delay:720ms}
.reveal.delay-7{transition-delay:840ms}
.reveal.delay-8{transition-delay:960ms}
.reveal.delay-9{transition-delay:1080ms}

/* floating animation */
@keyframes float {
  0%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-16px) rotate(15deg)}
  100%{transform:translateY(0) rotate(0deg)}
}
.floating{animation:float 6s ease-in-out infinite}

/* glow */
@keyframes glow{
  0%{box-shadow:0 0 15px rgba(11,197,234,0.4), inset 0 0 10px rgba(255,255,255,0.1)}
  50%{box-shadow:0 0 30px rgba(11,197,234,0.6), inset 0 0 15px rgba(255,255,255,0.2)}
  100%{box-shadow:0 0 15px rgba(11,197,234,0.4), inset 0 0 10px rgba(255,255,255,0.1)}
}

/* shimmer effect */
@keyframes shimmer {
  0% { transform: translateX(-100%) translateY(-100%); }
  100% { transform: translateX(100%) translateY(100%); }
}

/* slideIn animation */
@keyframes slideInContent {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* pulse animation */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* gradient flow */
@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* small screens */
@media(max-width:900px){
  .header-inner{gap:10px}
  .links{display:none}
  .hamburger{display:block}
  .hero-inner{flex-direction:column}
  .hero-right{order:-1}
  .nav{top:8px}
}

/* accessibility focus */
a:focus, button:focus, input:focus, textarea:focus{
  outline:3px solid hsl(var(--accent) / 0.28);
  outline-offset:2px;
}

/* smooth scrolling for internal links */
html {
  scroll-behavior: smooth;
}

/* enhanced form inputs */
.contact-form input:focus,
.contact-form textarea:focus {
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.2);
  box-shadow:0 0 20px rgba(11,197,234,0.15);
}

/* profile photo enhanced animation */
.profile-photo {
  animation:profileFadeIn 0.8s ease-out;
}

@keyframes profileFadeIn {
  from {
    opacity: 0;
    filter: blur(3px) grayscale(50%);
  }
  to {
    opacity: 1;
    filter: blur(0) grayscale(0%);
  }
}