:root{
  --background: 0 0% 99%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;
  --primary: 217 91% 60%;
  --primary-foreground: 0 0% 98%;
  --primary-glow: 213 94% 68%;
  --secondary: 240 5% 96%;
  --secondary-foreground: 240 6% 10%;
  --muted: 240 5% 96%;
  --muted-foreground: 240 4% 46%;
  --accent: 217 91% 60%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 6% 90%;
  --input: 240 6% 90%;
  --ring: 217 91% 60%;
  --radius: 0.75rem;
  --hero-bg: 217 100% 97%;
  --section-bg: 0 0% 98%;
  --gradient-primary: linear-gradient(135deg, hsl(217 91% 60%) 0%, hsl(213 94% 68%) 100%);
  --gradient-hero: linear-gradient(135deg, hsl(217 100% 97%) 0%, hsl(213 100% 95%) 100%);
  --gradient-card: linear-gradient(135deg, hsl(0 0% 100%) 0%, hsl(240 5% 98%) 100%);
  --shadow-soft: 0 2px 8px -2px hsl(240 10% 3.9% / 0.1);
  --shadow-medium: 0 8px 30px -8px hsl(240 10% 3.9% / 0.15);
  --shadow-large: 0 20px 40px -12px hsl(240 10% 3.9% / 0.2);
  --shadow-glow: 0 0 40px hsl(217 91% 60% / 0.3);
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  /* Colors used by scroll-to-top button */
  --black: #000000;
  --white: #ffffff;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Inter',system-ui,-apple-system,sans-serif;background:hsl(var(--background));color:hsl(var(--foreground))}

.container{max-width:72rem;margin:0 auto;padding:0 1rem}
.center{text-align:center}
.small{font-size:.875rem}
.muted{color:hsl(var(--muted-foreground))}
.mb-6{margin-bottom:1.5rem}
.mt-12{margin-top:3rem}
.ml-2{margin-left:.5rem}

/* Navigation */
.nav{position:fixed;inset:0 auto auto 0;right:0;height:64px;backdrop-filter:saturate(180%) blur(12px);background:hsla(var(--card)/.8);border-bottom:1px solid hsl(var(--border));z-index:40}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-weight:800;font-size:1.125rem;background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;border:none;background-color:transparent;cursor:pointer}
.nav-desktop{display:none;gap:2rem}
.nav-link{position:relative;padding:.5rem 1rem;background:none;border:none;color:rgba(0,0,0,.8);cursor:pointer;transition:color .2s}
.nav-link.active{color:hsl(var(--primary))}
.nav-link.active::after{content:"";position:absolute;left:50%;bottom:0;width:.25rem;height:.25rem;background:hsl(var(--primary));border-radius:999px;transform:translateX(-50%)}
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:.5rem;border:none;background:transparent;color:inherit;cursor:pointer}
.nav-mobile[hidden]{display:none}
.nav-mobile{border-top:1px solid hsl(var(--border));background:hsl(var(--card));}
.nav-mobile-inner{display:grid;gap:.25rem;padding:.5rem 0}
.nav-mobile .nav-link{width:100%;text-align:left}

@media (min-width:768px){
  .nav-desktop{display:flex}
  .nav-toggle{display:none}
  .nav-mobile{display:none !important}
}

/* Sections */
.section{padding:5rem 0}
.section-hero{display:flex;align-items:center;min-height:100vh;background:var(--gradient-hero)}
.section-alt{background:hsl(var(--section-bg))}

.section-header{max-width:48rem;margin:0 auto 4rem auto;text-align:center}
.section-header h2{font-size:2rem;margin:.25rem 0}
.section-title{font-size:1.5rem;margin:0 0 2rem 0}
.section-sub{text-align:center;margin-top:3rem}
.section-sub h3{margin:0 0 1.5rem 0}

/* Hero */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-title{font-size:clamp(2.25rem,5vw,3.75rem);font-weight:800;line-height:1.1;margin:0 0 1rem 0}
.hero-subtitle{font-size:clamp(1.125rem,2.5vw,1.375rem);max-width:42rem;margin:0 0 2rem 0;color:hsl(var(--muted-foreground))}

.btn-hero{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:1rem 2rem;font-weight:700;font-size:1.125rem;color:#fff;background:var(--gradient-primary);border-radius:var(--radius);border:none;box-shadow:var(--shadow-medium);transition:var(--transition-smooth);cursor:pointer}
.btn-hero:hover{transform:translateY(-2px);box-shadow:var(--shadow-large)}
.btn-hero:active{transform:translateY(0)}

.scroll-indicator{margin-top:4rem;animation:bounce 1.5s infinite}
.mouse{width:24px;height:40px;border:2px solid hsl(var(--muted-foreground));border-radius:16px;display:flex;justify-content:center;margin:0 auto}
.wheel{width:4px;height:12px;background:hsl(var(--muted-foreground));border-radius:2px;margin-top:8px;animation:pulse 1.5s infinite}

@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes pulse{0%{opacity:1}50%{opacity:.4}100%{opacity:1}}

/* Text gradient */
.text-gradient{background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Cards grid */
.cards-grid{display:grid;gap:2rem}
.cards-grid.two-cols{grid-template-columns:repeat(1,minmax(0,1fr))}
.cards-grid.three-cols{grid-template-columns:repeat(1,minmax(0,1fr))}
@media (min-width:640px){
  .cards-grid.two-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards-grid.three-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .cards-grid.three-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
}

.card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:1rem;overflow:hidden;box-shadow:var(--shadow-soft);transition:var(--transition-smooth);cursor:pointer}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-large)}
.card img{display:block;width:100%;height:12rem;object-fit:cover;transition:transform .3s}
.card:hover img{transform:scale(1.05)}
.card-body{padding:1.5rem}
.card-title{display:flex;align-items:flex-start;justify-content:space-between;margin:0 0 .5rem 0}
.card-title h3{margin:0;font-size:1.125rem}
.icon-row{display:flex;gap:.5rem;opacity:0;transition:opacity .2s}
.card:hover .icon-row{opacity:1}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:.5rem;border:none;background:hsl(var(--secondary));color:inherit;cursor:pointer}
.card-desc{color:hsl(var(--muted-foreground));font-size:.9375rem;margin:.5rem 0 1rem 0}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.chip{padding:.25rem .5rem;border-radius:.5rem;font-size:.75rem;font-weight:600;background:hsl(var(--primary) / .1);color:hsl(var(--primary));border:1px solid hsl(var(--primary) / .2)}

/* About */
.about-grid{display:grid;gap:3rem;align-items:center}
@media (min-width:1024px){.about-grid{grid-template-columns:1fr 1fr}}
.photo-wrap{position:relative;width:20rem;height:20rem;border-radius:1rem;overflow:hidden}
.photo-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.photo-overlay{position:absolute;inset:0;border-radius:1rem;background:linear-gradient(135deg, hsl(var(--primary)/.2), transparent)}
.about-content h3{margin:0 0 1rem 0}
.about-text{line-height:1.8}
.about-location{display:flex;align-items:center;gap:.5rem;margin-top:1rem}
.contact h4{margin:2rem 0 .75rem}
.contact-links{display:grid;gap:.75rem}
.contact-links a{display:flex;align-items:center;gap:.75rem;color:hsl(var(--muted-foreground));text-decoration:none;transition:color .2s}
.contact-links a:hover{color:hsl(var(--primary))}

/* Progress bars */
.progress{height:.5rem;background:hsl(var(--muted));border-radius:999px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(to right, hsl(var(--primary)), hsl(var(--primary-glow)));width:0;transition:width 1s ease-out}

/* Timeline */
.timeline{position:relative}
.timeline::before{content:"";position:absolute;left:2rem;top:0;bottom:0;width:1px;background:hsl(var(--border));display:none}
@media (min-width:768px){.timeline::before{display:block}}
.timeline-item{position:relative}
.timeline-dot{position:absolute;left:1.5rem;top:1.5rem;width:16px;height:16px;background:hsl(var(--primary));border-radius:999px;border:4px solid hsl(var(--background));display:none}
@media (min-width:768px){.timeline-dot{display:block}}
.timeline-card{margin-left:0;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:1rem;padding:1.5rem;box-shadow:var(--shadow-soft)}
@media (min-width:768px){.timeline-card{margin-left:4rem}}
.timeline-head{display:flex;flex-direction:column;gap:.25rem;margin-bottom:1rem}
@media (min-width:640px){.timeline-head{flex-direction:row;align-items:flex-start;justify-content:space-between}}
.company{display:flex;align-items:center;gap:.5rem;color:hsl(var(--primary));font-weight:700}
.pill{margin-left:.5rem;padding:.25rem .5rem;border-radius:999px;font-size:.75rem;background:hsl(var(--primary)/.1);color:hsl(var(--primary))}
.meta{color:hsl(var(--muted-foreground));font-size:.875rem}
.achievements{margin:1rem 0}
.achievements h4{margin:0 0 .5rem 0;font-size:.875rem}
.achievements ul{margin:0;padding:0;list-style:none;display:grid;gap:.25rem}
.achievements li{display:flex;align-items:flex-start;color:hsl(var(--muted-foreground));font-size:.875rem}
.achievements li .bullet{color:hsl(var(--primary));margin-right:.5rem;margin-top:.25rem}
.tech{display:flex;flex-wrap:wrap;gap:.5rem}
.badge{padding:.25rem .75rem;border-radius:999px;font-size:.75rem;font-weight:600;background:hsl(var(--primary)/.1);color:hsl(var(--primary));border:1px solid hsl(var(--primary)/.2)}

/* Buttons */
.btn-secondary{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-radius:.75rem;font-weight:600;text-decoration:none;background:hsl(var(--secondary));color:hsl(var(--secondary-foreground));transition:background .2s}
.btn-secondary:hover{background:hsl(var(--muted))}
.button-row{display:flex;flex-direction:column;gap:1rem}
@media (min-width:640px){.button-row{flex-direction:row;justify-content:center}}

/* Footer */
.footer{border-top:1px solid hsl(var(--border));padding:2rem 1rem;background:hsl(var(--card))}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:50}
.modal-overlay[hidden]{display:none !important}
.modal-content{position:relative;background:hsl(var(--card));border-radius:1rem;padding:2rem;max-width:42rem;width:100%;margin:0 1rem;box-shadow:var(--shadow-large);animation:slideUp .3s ease-out}
.modal-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1rem}
.modal-header h2{margin:0;font-size:1.5rem}
.modal-body{display:grid;gap:1.5rem}
.modal-body img{width:100%;height:16rem;object-fit:cover;border-radius:.75rem}
.modal-section h3{margin:.5rem 0}
.badges{display:flex;flex-wrap:wrap;gap:.5rem}



@keyframes slideUp{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}


.cursor {
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  z-index: 111;
  border: 1px solid #000000;
  transition: all 0.2s ease-out;
  animation: moveCursor1 .5s infinite alternate;
}

.expand {
  background: transparent;
  animation: moveCursor2 .5s forwards;
  border: 1px solid #000000;
}

/* Hide custom cursor on touch/coarse pointers (mobile/tablet) */
@media (hover: none), (pointer: coarse) {
  .cursor { display: none !important; }
}