:root{
  --bg:#0f1724;
  --card:#0b1220;
  --muted:#98a0b3;
  --accent:#6ee7b7;
  --glass: rgba(255,255,255,0.03);
  --radius: 15.4px;
  --container: 1210px;
  --glass-2: rgba(255,255,255,0.02);
}

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&display=swap');

/* Glassmorphism Skills Grid */
.skills-glass-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 28px;
  margin-top: 28px;
  justify-items: center;
}
.skill-glass-card {
  background: linear-gradient(120deg, rgba(110,231,183,0.13), rgba(59,130,246,0.11), rgba(139,92,246,0.10));
  border: 1.5px solid rgba(110,231,183,0.18);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(30,140,110,0.09);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 22px 0 16px 0;
  min-width: 120px;
  max-width: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity .6s cubic-bezier(.15,.85,.25,1), transform .6s cubic-bezier(.15,.85,.25,1), box-shadow .38s, border-color .38s;
  cursor: pointer;
  position: relative;
  opacity: 0;
  transform: translateY(35px) scale(0.94);
  will-change: opacity, transform;
}
.skill-glass-card:hover {
  box-shadow: 0 18px 44px rgba(59,130,246,0.18), 0 2px 12px rgba(110,231,183,0.13);
  border-color: var(--accent);
  transform: translateY(-8px) scale(1.05) !important;
}
.skill-glass-logo {
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.10);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  box-shadow: 0 2px 12px rgba(110,231,183,0.11);
  transition: box-shadow .3s;
}
.skill-glass-card:hover .skill-glass-logo {
  box-shadow: 0 6px 18px rgba(59,130,246,0.22);
}
.skill-glass-logo img {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 2px 4px rgba(59,130,246,0.13));
  transition: transform .5s cubic-bezier(.25,.8,.3,1);
}
.skill-glass-card:hover .skill-glass-logo img {
  transform: rotate(-18deg) scale(1.13);
}
.skill-glass-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.09rem;
  color: #f5f5f5;
  margin-top: 2px;
  letter-spacing: 0.04em;
  font-weight: 600;
  text-align: center;
  text-shadow: 0 2px 8px rgba(59,130,246,0.08);
}
.skill-more-card {
  background: linear-gradient(120deg, rgba(110,231,183,0.08), rgba(59,130,246,0.06), rgba(139,92,246,0.05));
  border-style: dashed;
}
.skill-more-logo {
  background: transparent !important;
  box-shadow: none !important;
}
.skill-more-card .skill-glass-name {
  font-size: 1.21rem;
  color: rgba(245,245,245,0.7);
}
.skill-more-card:hover .skill-glass-name {
  color: #f5f5f5;
}

*{box-sizing:border-box}
html,body{
  height:100%;
  overflow-x:hidden;
}
html{
  scroll-behavior:smooth;
  max-width:100%;
  font-size: 110%;
}
body{
  margin:0;
  font-family: "JetBrains Mono", monospace;
  background: linear-gradient(180deg,#061025 0%, #071126 50%, #04101a 100%);
  color:#f5f5f5;
  -webkit-font-smoothing:antialiased;
  line-height:1.45;
  width:100%;
  overflow-x:hidden;
}
.container{max-width:var(--container);margin:0 auto;padding:30.8px}

.nav{position:sticky;top:0;backdrop-filter: blur(6.6px);background:linear-gradient(180deg, rgba(2,6,12,0.45), rgba(2,6,12,0.18));border-bottom:1px solid rgba(255,255,255,0.02);z-index:60}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;letter-spacing:0.66px;color:var(--accent);text-decoration:none;font-size:1.21rem}

.language-switcher {
  display: flex;
  gap: 6.6px;
  margin-right: 15.4px;
}

.lang-btn {
  position: relative;
  background: transparent;
  border: 2px solid rgba(255,255,255,0.05);
  border-radius: 11px;
  padding: 8.8px 11px;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
  overflow: hidden;
  backdrop-filter: blur(6.6px);
  transform: translateZ(0);
}

.lang-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #6ee7b7, #3b82f6, #8b5cf6);
  opacity: 0;
  transition: all 0.4s ease;
  z-index: -1;
}

.lang-btn:hover::before {
  left: 0;
  opacity: 0.1;
}

.lang-btn:hover {
  border-color: rgba(110, 231, 183, 0.3);
  transform: translateY(-2.2px) scale(1.05);
  box-shadow: 0 11px 22px rgba(110, 231, 183, 0.15);
}

.lang-btn.active {
  border-color: var(--accent);
  background: linear-gradient(90deg, rgba(110,231,183,0.15), rgba(59,130,246,0.15), rgba(139,92,246,0.15));
  transform: translateY(-1.1px);
  box-shadow: 0 8.8px 17.6px rgba(110, 231, 183, 0.2);
}

.lang-btn.active::before {
  left: 0;
  opacity: 0.2;
}

.flag-icon {
  font-size: 1.32rem;
  display: block;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 2.2px 4.4px rgba(0,0,0,0.3));
}

.lang-btn:hover .flag-icon {
  transform: scale(1.1) rotate(5deg);
}

.lang-btn.active .flag-icon {
  transform: scale(1.05);
}

.lang-btn:active {
  transform: translateY(0) scale(0.95);
}

.nav-links a {
  position: relative;
  color: rgba(245,245,245,0.7);
  margin-left: 19.8px;
  text-decoration: none;
  padding: 8.8px;
  border-radius: 11px;
  transition: color .3s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2.2px;
  width: 0%;
  background: linear-gradient(90deg, #6ee7b7, #3b82f6, #8b5cf6);
  transition: width .4s ease, opacity .4s ease;
  opacity: 0;
  border-radius: 11px;
}

.nav-links a:hover {
  background: linear-gradient(90deg, rgba(110,231,183,0.1), rgba(59,130,246,0.1), rgba(139,92,246,0.1));
  color: #fff;
}

.nav-links a:hover::after {
  width: 100%;
  opacity: 1;
}

.nav-links a.active {
  color: #fff;
}
.nav-links a.active::after {
  width: 100%;
  opacity: 1;
}

.menu-btn{display:none;background:none;border:0;color:var(--muted);font-size:1.43rem}

.hero{padding:70.4px 0}
.hero-grid{display:grid;grid-template-columns:1fr 462px;gap:30.8px;align-items:center}
.hero-left h1{
  font-size:2.64rem;
  margin:0 0 13.2px;
  background: linear-gradient(90deg, #6ee7b7, #3b82f6, #8b5cf6);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.accent{color:var(--accent);}
.lead{color:#f5f5f5;margin-bottom:19.8px;font-size:1.21rem}
.cta{display:flex;align-items:flex-end;gap:22px}
.cta .btn{margin-right:0}
.cta .btn.ghost{margin-top:8px}
.btn{display:inline-block;padding:11px 17.6px;border-radius:13.2px;background:linear-gradient(90deg,var(--accent), #4ad3a1);color:#052024;font-weight:600;text-decoration:none;box-shadow:0 8.8px 33px rgba(30,140,110,0.08);border:0}
.btn.ghost{position:relative;background:linear-gradient(90deg,#24292f,#0f1724);color:#fff;border:1px solid rgba(255,255,255,0.06);overflow:hidden;isolation:isolate;transition:all .35s cubic-bezier(.2,.9,.3,1)}
.btn.ghost::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(110,231,183,0.15),rgba(59,130,246,0.15),rgba(139,92,246,0.15));mix-blend-mode:overlay;opacity:0;transition:opacity .5s ease;z-index:1}
.btn.ghost span.sheen{position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(115deg,transparent,rgba(255,255,255,0.55),transparent);transform:skewX(-25deg);filter:blur(2px);opacity:0;z-index:2}
.btn.ghost:hover{background:linear-gradient(115deg,#2f3942,#162332);transform:translateY(-3px) scale(1.04);box-shadow:0 22px 44px -11px rgba(0,0,0,0.65)}
.btn.ghost:hover::after{opacity:1}
.btn.ghost:hover span.sheen{animation:sheenPass 1.2s cubic-bezier(.25,.8,.3,1) forwards}
.btn.ghost:active{transform:translateY(0) scale(.97)}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:19.8px;border-radius:var(--radius);box-shadow: 0 6.6px 33px rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.025)}
.floating-card{position:relative;overflow:hidden}
.card-header{display:flex;gap:13.2px;align-items:center}
.avatar{width:52.8px;height:52.8px;border-radius:13.2px;background:linear-gradient(135deg,#4ad3a1,#66f0c7);display:flex;align-items:center;justify-content:center;font-weight:700;color:#042;box-shadow:0 6.6px 22px rgba(0,0,0,0.45)}
.name{font-weight:700}
.subtitle{color:var(--muted);font-size:0.935rem}
.mini-stats{display:flex;gap:11px;margin-top:13.2px;font-size:0.99rem}
.mini-stats div span{display:block;color:var(--muted);font-size:0.935rem}

.blobs{position:absolute;right:-44px;top:-44px;pointer-events:none}
.blob{width:132px;height:132px;border-radius:50%;filter:blur(19.8px);opacity:0.9;mix-blend-mode:screen}
.b1{background:rgba(106,230,183,0.16);animation:float 7s ease-in-out infinite}
.b2{background:rgba(102,210,240,0.06);width:176px;height:176px;animation:float 10s ease-in-out infinite;animation-delay:-2s}
.b3{background:rgba(160,120,255,0.04);width:99px;height:99px;animation:float 8s ease-in-out infinite;animation-delay:-1s}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-15.4px)}100%{transform:translateY(0)}}

.about-section {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  backdrop-filter: blur(6px);
}
.about-box {
  padding: 44px;
  border-radius: 19.8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 22px 44px rgba(0,0,0,0.3);
  animation: fadeInAbout 1.6s ease;
}
.about-text {
  font-size: 1.155rem;
  color: #f5f5f5;
  line-height: 1.7;
}
.emoji { font-size: 1.54rem; margin-right: 6.6px; }
.flag { animation: wave 2s infinite ease-in-out; display: inline-block; transform-origin: 50% 60%; }
@keyframes fadeInAbout { from {opacity:0; transform:translateY(33px);} to {opacity:1; transform:translateY(0);} }
@keyframes wave { 0%,100%{transform:rotate(0deg);} 50%{transform:rotate(15deg);} }

.section{padding:70.4px 0}
.section.dark{background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);border-top:1px solid rgba(255,255,255,0.02)}
h2{
  margin:0 0 11px;
  font-size:1.595rem;
  background: linear-gradient(90deg, #6ee7b7, #3b82f6, #8b5cf6);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.muted{color: rgba(245,245,245,0.7);}
.projects-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:19.8px;margin-top:22px}
.project {
  opacity: 0;
  transform: translateY(35px) scale(0.94);
  transition: opacity .6s cubic-bezier(.15,.85,.25,1), transform .6s cubic-bezier(.15,.85,.25,1);
  will-change: opacity, transform;
}
.project.animate-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.project h3{
  background: linear-gradient(90deg, #6ee7b7, #3b82f6, #8b5cf6);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.project-image{height:132px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:11px;margin-bottom:13.2px;box-shadow:inset 0 -6.6px 22px rgba(0,0,0,0.35)}
/* Center any inline SVG logo inside project-image */
.project-image{display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.project-image .mc-logo{width:100%;height:auto;display:block;object-fit:cover;object-position:center}
.project-image .mc-logo [fill-opacity]{opacity:0.95}
.project-image.alt{background:linear-gradient(90deg, rgba(70,45,120,0.12), rgba(60,90,150,0.06))}
.project-image.alt2{background:linear-gradient(90deg, rgba(90,70,40,0.08), rgba(120,80,50,0.04))}
.project-tags{margin-top:13.2px}
.project-tags span{display:inline-block;background:var(--glass);padding:6.6px 8.8px;border-radius:999px;margin-right:8.8px;font-size:0.825rem;color:var(--muted)}

.skills-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15.4px;margin-top:13.2px}
.skill-head{display:flex;justify-content:space-between;margin-bottom:8.8px}
.progress{background:var(--glass-2);height:15.4px;border-radius:999px;overflow:hidden;border:1px solid rgba(255,255,255,0.02)}
.progress-fill{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,var(--accent), #59d6a0);transition:width 1200ms cubic-bezier(.2,.9,.3,1)}

.contact-section { background: radial-gradient(ellipse at top, rgba(110,231,183,0.06), rgba(255,255,255,0.01)); }
.contact-form { max-width: 770px; margin: 0 auto; display:flex;flex-direction:column;gap:17.6px;margin-top:19.8px;}
.contact-form .row { display:flex; gap:17.6px; flex-wrap:wrap; }
.field { position:relative; flex:1; min-width:220px; }
.field-wide { width:100%; }
.field-wide textarea { width:100%; }
.field input, .field textarea {
  flex:1;
  background:var(--glass);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:22px;
  padding:17.6px 19.8px;
  color:#f5f5f5;
  font-size:1.078rem;
  outline:none;
  transition:all 0.28s cubic-bezier(.2,.9,.3,1);
  box-shadow:inset 0 0 0 rgba(0,0,0,0);
  backdrop-filter:blur(6.6px);
}
.field input::placeholder,.field textarea::placeholder{color:rgba(245,245,245,0.4);opacity:1}
.field input:focus,.field textarea:focus{
  border-color:var(--accent);
  box-shadow:0 11px 33px rgba(110,231,183,0.12);
  background:rgba(255,255,255,0.03);
  transform:translateY(-4.4px);
}
.field label {
  position:absolute;
  top:50%;
  left:19.8px;
  transform:translateY(-50%);
  pointer-events:none;
  color:rgba(245,245,245,0.45);
  font-size:1.045rem;
  transition:all 0.22s cubic-bezier(.2,.9,.3,1);
  padding:0 6.6px;
  border-radius:8.8px;
}
.field input:focus ~ label,
.field input:not(:placeholder-shown) ~ label,
.field textarea:focus ~ label,
.field textarea:not(:placeholder-shown) ~ label {
  top:11px;
  font-size:0.858rem;
  color:var(--accent);
  background:rgba(15,23,36,0.9);
  transform:translateY(0);
}

.form-actions { display:flex; gap:13.2px; margin-top:6.6px; align-items:center; }
.form-actions.centered { justify-content:center; }

.hover-tilt{transform:translateZ(0);transition:transform .35s ease, box-shadow .35s}
.hover-tilt:hover{transform:translateY(-11px) rotateX(6deg) translateZ(6.6px);box-shadow:0 33px 66px rgba(20,40,60,0.45)}
.coming{opacity:0.95;filter:grayscale(0.2)}

.project-actions {
  margin-top: 15.4px;
  display: flex;
  justify-content: flex-end;
}

.btn-more {
  /* Doubled size of more button */
  font-size: 0.94rem; /* was 0.47rem */
  padding: 9.9px 15.4px; /* was 4.95px 7.7px */
  transform-origin: center;
  cursor: pointer;
}

.btn-more.disabled {
  background: var(--glass) !important;
  color: var(--muted) !important;
  cursor: not-allowed;
  box-shadow: none !important;
  opacity: 0.7;
  animation: none !important;
  /* Keep disabled button proportional (previously 0.5 when base was half size) */
  transform: scale(1) !important;
}

.btn-more.disabled:hover {
  transform: scale(0.5) !important;
  box-shadow: none !important;
  background: var(--glass) !important;
  color: var(--muted) !important;
}

.coming-soon {
  position: relative;
  opacity: 0.85;
}

.coming-soon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: var(--radius);
  pointer-events: none;
  z-index: 1;
}

.coming-soon .project-image {
  background: linear-gradient(135deg, rgba(110,231,183,0.08), rgba(59,130,246,0.08), rgba(139,92,246,0.08));
  position: relative;
}

.coming-soon .project-image::after {
  content: "🚀";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.64rem;
  opacity: 0.3;
  animation: float 3s ease-in-out infinite;
}

.reveal{opacity:0;transform:translateY(19.8px);transition:all 700ms cubic-bezier(.15,.85,.25,1)}
.reveal.show{opacity:1;transform:none}

.typewriter{
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
  border-right: .18em solid rgba(255,255,255,0.08);
  animation: typing 2.8s steps(24,end), blink-caret .8s step-end infinite;
}
@keyframes typing{from{width:0} to{width:100%}}
@keyframes blink-caret{50%{border-color:transparent}}

.site-footer{position:static;background:linear-gradient(180deg, rgba(1,4,8,0.8), rgba(1,4,8,0.95));padding:18px 0 12px;border-top:1px solid rgba(255,255,255,0.06);text-align:center;font-size:0.935rem;color:var(--muted);margin-top:0}

.site-footer .profile-links {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 0;
  margin-bottom: 12px;
  flex-wrap: wrap;
  padding: 0 22px;
}

.site-footer small {
  display: block;
}

@media (max-width:1078px){
  .hero-grid{grid-template-columns:1fr;gap:19.8px}
  .projects-grid{grid-template-columns:1fr}
  .nav-links{display:none}
  .menu-btn{display:block}
  .contact-form .row{flex-direction:column}
  .field { min-width: auto; }
  
  .language-switcher {
    margin-right: 11px;
  }
  
  .lang-btn {
    padding: 6.6px 8.8px;
  }
  
  .flag-icon {
    font-size: 1.21rem;
  }
}
@media (max-width:704px){
  .projects-grid{grid-template-columns:1fr}
  .skills-grid{grid-template-columns:1fr}
  .container{padding:19.8px}
  .card{padding:15.4px}
  .hero-left h1{font-size:1.98rem}
  .about-box{padding:22px}
  .contact-form{padding:0 11px}
}

#lang-swipe-overlay {
  position: fixed;
  top: 0; left: 0; bottom: 0; width: 100vw;
  pointer-events: none;
  z-index: 9999;
  background: linear-gradient(120deg, #6ee7b7 0%, #3b82f6 50%, #8b5cf6 100%);
  opacity: 0;
  transform: translateX(-110%) skewX(-12deg);
  will-change: transform, opacity;
}

#lang-swipe-overlay.run {
  opacity: 1;
  animation: langSwipe 0.9s cubic-bezier(.8,.2,.2,1) forwards;
}

@keyframes langSwipe {
  0% {
    transform: translateX(-110%) skewX(-12deg);
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translateX(150%) skewX(-12deg);
    opacity: 0;
  }
}

.btn.pulse {
  animation: pulseBtn 2.2s infinite;
}
@keyframes pulseBtn {
  0% { box-shadow: 0 0 0 0 rgba(110,231,183,0.25), 0 8.8px 33px rgba(30,140,110,0.08); }
  50% { box-shadow: 0 0 0 12px rgba(110,231,183,0.08), 0 8.8px 33px rgba(30,140,110,0.12); transform: scale(1.04); }
  100% { box-shadow: 0 0 0 0 rgba(110,231,183,0.25), 0 8.8px 33px rgba(30,140,110,0.08); }
}

.btn.pulse:hover {
  background: linear-gradient(90deg, #6ee7b7, #3b82f6, #8b5cf6);
  color: #fff;
  transform: scale(1.08) rotate(-2deg);
  box-shadow: 0 0 0 18px rgba(59,130,246,0.10), 0 16px 44px rgba(59,130,246,0.18);
}


.btn-more:hover {
  background: linear-gradient(90deg, #6ee7b7, #3b82f6, #8b5cf6);
  color: #fff;
  transform: scale(0.54) rotate(-2deg);
  box-shadow: 0 0 0 9px rgba(59,130,246,0.10), 0 6px 16.5px rgba(59,130,246,0.18);
}


.btn-more:active {
  transform: scale(0.48) rotate(2deg);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.12), 0 3px 8.25px rgba(139,92,246,0.18);
}

.btn.pulse:active {
  transform: scale(0.96) rotate(2deg);
  box-shadow: 0 0 0 8px rgba(139,92,246,0.12), 0 8px 22px rgba(139,92,246,0.18);
}

.btn.pulse.clicked {
  animation: none;
  background: linear-gradient(120deg, #6ee7b7 0%, #3b82f6 50%, #8b5cf6 100%);
  color: #fff;
  transform: scale(0.92) rotate(3deg);
  box-shadow: 0 0 0 24px rgba(139,92,246,0.18), 0 8px 22px rgba(139,92,246,0.18);
  transition: all 0.3s cubic-bezier(.7,.2,.3,1);
}

/* Remove animation and hover effects for coming-soon button only */
.coming-soon .btn-more,
.coming-soon .btn-more:hover,
.coming-soon .btn-more:active {
  transition: none !important;
  background: linear-gradient(90deg,var(--accent), #4ad3a1) !important;
  color: #052024 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Modal Styles */
.modal-overlay { position:fixed; inset:0; background:rgba(6,16,32,0.75); backdrop-filter:blur(9px); display:flex; align-items:center; justify-content:center; padding:44px 22px; opacity:0; visibility:hidden; transition:opacity .55s cubic-bezier(.22,.9,.3,1), visibility .55s; z-index:400; }
.modal-overlay.show { opacity:1; visibility:visible; }
.modal-dialog { width:100%; max-width:720px; background:linear-gradient(165deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.06); border-radius:28px; box-shadow:0 44px 88px -22px rgba(0,0,0,0.65), 0 11px 44px rgba(20,40,60,0.55); position:relative; padding:0; overflow:hidden; transform:translateY(24px) scale(.92) rotateX(8deg); opacity:0; }
.modal-overlay.animating-in .modal-dialog { animation: modalIn .68s cubic-bezier(.25,1.1,.3,1) forwards; }
.modal-overlay.animating-out .modal-dialog { animation: modalOut .48s cubic-bezier(.55,.1,.3,1) forwards; }
/* Ensure dialog stays visible after intro animation ends */
.modal-overlay.show:not(.animating-in) .modal-dialog { opacity:1; transform:translateY(0) scale(1) rotateX(0); filter:none; }
@keyframes modalIn { 0% { opacity:0; transform:translateY(34px) scale(.9) rotateX(14deg); filter:blur(6px);} 55% { filter:blur(0); } 100% { opacity:1; transform:translateY(0) scale(1) rotateX(0deg); filter:blur(0);} }
@keyframes modalOut { 0% { opacity:1; transform:translateY(0) scale(1) rotateX(0); filter:blur(0);} 100% { opacity:0; transform:translateY(26px) scale(.9) rotateX(10deg); filter:blur(8px);} }
.modal-dialog:focus { outline:2px solid var(--accent); outline-offset:3px; }
.modal-close { position:absolute; top:11px; right:11px; background:rgba(0,0,0,0.25); border:1px solid rgba(255,255,255,0.15); color:var(--muted); font-size:1.54rem; width:44px; height:44px; border-radius:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .3s cubic-bezier(.2,.9,.3,1); }
.modal-close:hover { background:rgba(255,255,255,0.08); color:#fff; transform:rotate(8deg); }
.modal-media { width:100%; aspect-ratio: 16 / 6.5; background:linear-gradient(120deg, rgba(110,231,183,0.18), rgba(59,130,246,0.18), rgba(139,92,246,0.18)); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; border-radius:28px; }
.modal-media::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0)); mix-blend-mode:overlay; }
.modal-media img { width:100%; height:100%; object-fit:cover; object-position:center; padding:0; filter:drop-shadow(0 11px 22px rgba(0,0,0,0.35)); border-radius:inherit; }
.modal-content { padding:33px 44px 44px; }
.modal-content h3 { margin:0 0 11px; font-size:1.98rem; }
.gradient-text { background: linear-gradient(90deg, #6ee7b7, #3b82f6, #8b5cf6); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.modal-desc { color:#f5f5f5; font-size:1.045rem; line-height:1.6; margin:0 0 19.8px; }
.feature-list { list-style:none; margin:0 0 26.4px; padding:0; display:grid; gap:8.8px; }
.feature-list li { position:relative; padding-left:26px; font-size:0.99rem; color:var(--muted); }
.feature-list li::before { content:""; position:absolute; left:0; top:11px; width:14px; height:14px; border-radius:4px; background:linear-gradient(135deg,var(--accent),#4ad3a1); box-shadow:0 0 0 4px rgba(110,231,183,0.15); animation: pulseDot 3s infinite; }
@keyframes pulseDot { 0%,100% { transform:scale(1); opacity:1;} 50% { transform:scale(.65); opacity:.6;} }
.modal-actions { display:flex; justify-content:flex-end; }
.github-btn { position:relative; padding-left:52px; background:linear-gradient(90deg,#24292f,#0f1724); color:#fff !important; box-shadow:0 11px 33px -6px rgba(0,0,0,0.6); overflow:hidden; isolation:isolate; }
.github-btn::before { content:""; position:absolute; left:17px; top:50%; transform:translateY(-50%); width:26px; height:26px; background:#fff; -webkit-mask:url('https://cdn.jsdelivr.net/npm/simple-icons@v13/icons/github.svg') center/contain no-repeat; mask:url('https://cdn.jsdelivr.net/npm/simple-icons@v13/icons/github.svg') center/contain no-repeat; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4)); z-index:2; }
.github-btn::after { content:""; position:absolute; inset:0; background: linear-gradient(110deg, rgba(110,231,183,0.15), rgba(59,130,246,0.15), rgba(139,92,246,0.15)); mix-blend-mode:overlay; opacity:0; transition:opacity .5s ease; z-index:1; }
.github-btn span.sheen {position:absolute; top:0; left:-60%; width:45%; height:100%; background:linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent); transform:skewX(-25deg); filter:blur(2px); opacity:0;}
.github-btn:hover { background:linear-gradient(115deg,#2f3942,#162332); transform:translateY(-3px) scale(1.04); box-shadow:0 22px 44px -11px rgba(0,0,0,0.65); }
.github-btn:hover::after { opacity:1; }
.github-btn:hover span.sheen { animation: sheenPass 1.2s cubic-bezier(.25,.8,.3,1) forwards; }
.github-btn:active { transform:translateY(0) scale(.97); }

.github-profile-btn { position:relative; padding-left:52px; }
.github-profile-btn::before { content:""; position:absolute; left:17px; top:50%; transform:translateY(-50%); width:26px; height:26px; background:#fff; -webkit-mask:url('https://cdn.jsdelivr.net/npm/simple-icons@v13/icons/github.svg') center/contain no-repeat; mask:url('https://cdn.jsdelivr.net/npm/simple-icons@v13/icons/github.svg') center/contain no-repeat; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4)); z-index:2; }

/* YouTube Button */
.youtube-profile-btn { position:relative; padding-left:52px; background:linear-gradient(90deg,#ff0000,#b31217); color:#fff !important; }
.youtube-profile-btn::before { content:""; position:absolute; left:17px; top:50%; transform:translateY(-50%); width:26px; height:26px; background:#fff; -webkit-mask:url('https://cdn.jsdelivr.net/npm/simple-icons@v13/icons/youtube.svg') center/contain no-repeat; mask:url('https://cdn.jsdelivr.net/npm/simple-icons@v13/icons/youtube.svg') center/contain no-repeat; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4)); z-index:2; }
.youtube-profile-btn::after { content:""; position:absolute; inset:0; background: linear-gradient(110deg, rgba(255,0,0,0.15), rgba(59,130,246,0.10), rgba(139,92,246,0.10)); mix-blend-mode:overlay; opacity:0; transition:opacity .5s ease; z-index:1; }
.youtube-profile-btn span.sheen {position:absolute; top:0; left:-60%; width:45%; height:100%; background:linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent); transform:skewX(-25deg); filter:blur(2px); opacity:0;}
.youtube-profile-btn:hover { background:linear-gradient(115deg,#ff3333,#b31217); transform:translateY(-3px) scale(1.04); box-shadow:0 22px 44px -11px rgba(255,0,0,0.25); }
.youtube-profile-btn:hover::after { opacity:1; }
.youtube-profile-btn:hover span.sheen { animation: sheenPass 1.2s cubic-bezier(.25,.8,.3,1) forwards; }
.youtube-profile-btn:active { transform:translateY(0) scale(.97); }

/* Twitch Button */
.twitch-profile-btn { position:relative; padding-left:52px; background:linear-gradient(90deg,#9147ff,#6441a5); color:#fff !important; }
.twitch-profile-btn::before { content:""; position:absolute; left:17px; top:50%; transform:translateY(-50%); width:26px; height:26px; background:#fff; -webkit-mask:url('https://cdn.jsdelivr.net/npm/simple-icons@v13/icons/twitch.svg') center/contain no-repeat; mask:url('https://cdn.jsdelivr.net/npm/simple-icons@v13/icons/twitch.svg') center/contain no-repeat; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4)); z-index:2; }
.twitch-profile-btn::after { content:""; position:absolute; inset:0; background: linear-gradient(110deg, rgba(145,71,255,0.15), rgba(59,130,246,0.10), rgba(139,92,246,0.10)); mix-blend-mode:overlay; opacity:0; transition:opacity .5s ease; z-index:1; }
.twitch-profile-btn span.sheen {position:absolute; top:0; left:-60%; width:45%; height:100%; background:linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent); transform:skewX(-25deg); filter:blur(2px); opacity:0;}
.twitch-profile-btn:hover { background:linear-gradient(115deg,#a970ff,#6441a5); transform:translateY(-3px) scale(1.04); box-shadow:0 22px 44px -11px rgba(145,71,255,0.25); }
.twitch-profile-btn:hover::after { opacity:1; }
.twitch-profile-btn:hover span.sheen { animation: sheenPass 1.2s cubic-bezier(.25,.8,.3,1) forwards; }
.twitch-profile-btn:active { transform:translateY(0) scale(.97); }

@keyframes sheenPass { 0% { left:-60%; opacity:0;} 15% { opacity:1;} 60% { left:120%; opacity:0.85;} 100% { left:140%; opacity:0;} }

@media (max-width:704px){
  .modal-dialog { border-radius:22px; }
  .modal-content { padding:26px 26px 33px; }
  .modal-content h3 { font-size:1.54rem; }
  .feature-list { gap:6.6px; }
  .github-btn { width:100%; justify-content:center; text-align:center; }
}