:root{
  --bg:#070713;
  --bg2:#0a0a1a;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.08);
  --text:#e9ecff;
  --muted:#aab0d6;
  --border:rgba(162,124,255,.18);
  --purple:#a27cff;
  --blue:#48b7ff;
  --cyan:#39f2ff;
  --green:#4dff9f;
  --shadow:0 24px 64px rgba(0,0,0,.55);
  --radius:18px;
  --max:1120px;
  --g1x:20%;
  --g1y:10%;
  --g2x:80%;
  --g2y:20%;
  --g3x:50%;
  --g3y:90%;
  --bg-mix:0;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:radial-gradient(1000px 500px at var(--g1x) var(--g1y), rgba(162,124,255, calc(.14 + var(--bg-mix) * .10)), transparent 60%),
             radial-gradient(900px 500px at var(--g2x) var(--g2y), rgba(72,183,255, calc(.10 + var(--bg-mix) * .10)), transparent 55%),
             radial-gradient(900px 500px at var(--g3x) var(--g3y), rgba(57,242,255, calc(.07 + var(--bg-mix) * .08)), transparent 55%),
             linear-gradient(180deg, var(--bg), var(--bg2));
  min-height:100vh;
  overflow-x:hidden;
}

.tap-magic{
  position:fixed;
  inset:0;
  background:linear-gradient(135deg, #070713 0%, #0a0a1a 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10000;
  cursor:pointer;
  transition:all 0.3s ease;
}

.tap-magic:hover{
  background:linear-gradient(135deg, #0a0a1a 0%, #0d0d20 100%);
}

.tap-container{
  text-align:center;
  position:relative;
}

.brand-text {
  font-family:'Poppins', sans-serif;
  font-weight:900;
  letter-spacing:-.02em;
  background:linear-gradient(45deg, 
    rgb(255,0,0), 
    rgb(255,127,0), 
    rgb(255,255,0), 
    rgb(0,255,0), 
    rgb(0,0,255), 
    rgb(75,0,130), 
    rgb(148,0,211));
  background-size:400% 400%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  font-size:1.8rem;
  margin-left:1px;
  animation:typewriterRgb 3s steps(14) 1s infinite normal,
             rgbFlow 3s linear infinite;
  overflow:hidden;
  white-space:nowrap;
}

@keyframes typewriterRgb{
  0% { width:0; }
  50% { width:100%; }
  100% { width:0; }
}

@keyframes rgbFlow {
  0% { background-position:0% 50%; filter: hue-rotate(0deg); }
  25% { background-position:25% 0%; filter: hue-rotate(90deg); }
  50% { background-position:50% 50%; filter: hue-rotate(180deg); }
  75% { background-position:75% 100%; filter: hue-rotate(270deg); }
  100% { background-position:100% 50%; filter: hue-rotate(360deg); }
}

@keyframes simpleBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.tap-text{
  font-size:3rem;
  font-weight:700;
  background:linear-gradient(45deg, var(--purple), var(--blue), var(--cyan));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:1rem;
  animation:glow 2s ease-in-out infinite alternate;
}

.tap-subtitle{
  font-size:1.2rem;
  color:var(--muted);
  margin-bottom:2rem;
}

.tap-pulse{
  width:80px;
  height:80px;
  border:2px solid var(--purple);
  border-radius:50%;
  margin:0 auto;
  position:relative;
  animation:pulse 2s infinite;
}

.tap-pulse::before{
  content:'';
  position:absolute;
  inset:-10px;
  border:2px solid var(--purple);
  border-radius:50%;
  opacity:0.5;
  animation:pulse 2s infinite 0.5s;
}

.tap-pulse::after{
  content:'';
  position:absolute;
  inset:-20px;
  border:2px solid var(--purple);
  border-radius:50%;
  opacity:0.3;
  animation:pulse 2s infinite 1s;
}

@keyframes pulse{
  0%, 100%{
    transform:scale(1);
    opacity:1;
  }
  50%{
    transform:scale(1.1);
    opacity:0.7;
  }
}

@keyframes glow{
  0%{
    filter:brightness(1);
  }
  100%{
    filter:brightness(1.2);
  }
}

.loading-screen{
  position:fixed;
  inset:0;
  background:linear-gradient(135deg, #070713 0%, #0a0a1a 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  opacity:1;
  transition:opacity 0.5s ease;
}

.loading-screen.fade-out{
  opacity:0;
  pointer-events:none;
}

.loading-container{
  text-align:center;
  color:var(--text);
}

.loading-circle{
  position:relative;
  width:200px;
  height:200px;
  margin:0 auto 40px;
}

.loading-ring{
  position:absolute;
  width:100%;
  height:100%;
  border:3px solid transparent;
  border-top:3px solid var(--purple);
  border-right:3px solid var(--blue);
  border-radius:50%;
  animation:spin 2s linear infinite;
}

.loading-ring:nth-child(1){
  animation-delay:0s;
  border-top-color:var(--purple);
  border-right-color:var(--blue);
}

.loading-ring:nth-child(2){
  animation-delay:0.3s;
  border-top-color:var(--blue);
  border-right-color:var(--cyan);
  width:80%;
  height:80%;
  top:10%;
  left:10%;
}

.loading-ring:nth-child(3){
  animation-delay:0.6s;
  border-top-color:var(--cyan);
  border-right-color:var(--purple);
  width:60%;
  height:60%;
  top:20%;
  left:20%;
}

@keyframes spin{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}

.loading-percentage{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  font-size:2rem;
  font-weight:700;
  color:var(--text);
  text-shadow:0 0 20px var(--purple);
  font-family:'JetBrains Mono', monospace;
}

.loading-text{
  font-size:1.2rem;
  font-weight:600;
  margin-bottom:10px;
  color:var(--purple);
  text-shadow:0 0 10px currentColor;
}

.loading-status{
  font-size:0.9rem;
  color:var(--muted);
  font-family:'JetBrains Mono', monospace;
  opacity:0.8;
}

.section{
  position:relative;
  transition:all 0.3s ease;
}

.card{
  transition:all 0.3s ease;
  position:relative;
  overflow:hidden;
}

.card::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(162,124,255,0.2), transparent);
  transition:left 0.5s ease;
}

.card:hover::before{
  left:100%;
}

.card:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 16px 40px rgba(162,124,255,0.2);
  border-color:var(--purple);
}

#skills .card:hover{
  border-color:var(--blue);
  box-shadow:0 16px 40px rgba(72,183,255,0.2);
}

#education .t-item:hover{
  border-color:var(--cyan);
  box-shadow:0 16px 40px rgba(57,242,255,0.2);
  transform:translateY(-8px) scale(1.02);
}

#certifications .cert:hover{
  border-color:var(--green);
  box-shadow:0 16px 40px rgba(77,255,159,0.2);
  transform:translateY(-8px) scale(1.02);
}

#projects .project:hover{
  border-color:var(--purple);
  box-shadow:0 16px 40px rgba(162,124,255,0.2);
  transform:translateY(-8px) scale(1.02);
}

.skill{
  transition:all 0.3s ease;
}

.skill:hover .fill{
  box-shadow:0 0 20px currentColor;
}

.particles{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
  opacity:.95;
}

.header-photo-container{
  position:absolute;
  top:80px;
  right:20px;
  width:180px;
  height:180px;
  cursor:pointer;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}

.header-photo-container::after{
  content:'👁';
  position:absolute;
  top:8px;
  right:8px;
  font-size:14px;
  opacity:0;
  transition:opacity .2s ease;
  background:rgba(7,7,19,.8);
  width:24px;
  height:24px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(162,124,255,.3);
}

.header-photo-container:hover::after{
  opacity:1;
}

.header-photo-container:hover{
transform:scale(1.05);
box-shadow:0 8px 32px rgba(162,124,255,0.3);
}

.cert-view{
position:fixed;
inset:0;
display:none;
align-items:center;
justify-content:center;
z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1000;
}

.cert-view.active{
  display:flex;
}

.cert-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.8);
  backdrop-filter:blur(8px);
}

.cert-container{
  position:relative;
  width:min(900px, 90vw);
  height:min(600px, 80vh);
  background:rgba(7,7,19,.95);
  border:1px solid rgba(162,124,255,.18);
  border-radius:24px;
  box-shadow:0 30px 80px rgba(0,0,0,.60);
  overflow:hidden;
}

.cert-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(162,124,255,.14);
}

.cert-header h3{
  margin:0;
  font-size:18px;
  font-weight:600;
}

.cert-close{
  width:36px;
  height:36px;
  border:none;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(162,124,255,.16);
  border-radius:12px;
  color:var(--muted);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .2s ease;
}

.cert-close:hover{
  background:rgba(255,255,255,.10);
  color:var(--text);
  transform:scale(1.05);
}

.cert-content{
  height:calc(100% - 65px);
  padding:20px;
}

.cert-frame{
  width:100%;
  height:100%;
  border:none;
  border-radius:12px;
  background:white;
}

.photo-album-view{
  position:fixed;
  inset:0;
  z-index:9998;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s ease;
}

.photo-album-view.active{
  opacity:1;
  pointer-events:all;
}

.album-backdrop{
  position:absolute;
  inset:0;
  background:rgba(7,7,19,0.95);
  backdrop-filter:blur(20px);
}

.album-container{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  max-width:600px;
  width:90%;
  max-height:80vh;
  overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,0.55);
}

.album-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px;
  border-bottom:1px solid var(--border);
}

.album-header h3{
  margin:0;
  color:var(--text);
  font-size:1.2rem;
}

.album-close{
  background:none;
  border:none;
  color:var(--muted);
  font-size:1.2rem;
  cursor:pointer;
  padding:8px;
  border-radius:8px;
  transition:all 0.2s ease;
}

.album-close:hover{
  color:var(--text);
  background:var(--card2);
}

.album-content{
  padding:20px;
  display:flex;
  gap:30px;
  align-items:center;
}

.photo-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:25px;
  margin-bottom:30px;
}

.gallery-item{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--card);
  border: 4px solid transparent;
  background: linear-gradient(var(--card), var(--card)) padding-box,
              linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
  cursor:pointer;
  box-shadow: 
    0 0 0 4px rgba(255,0,0,0.2),
    0 0 0 8px rgba(255,127,0,0.15),
    0 0 0 12px rgba(255,255,0,0.1);
}

.gallery-item:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 16px 40px rgba(162,124,255,0.2);
  border-color:var(--purple);
  border-image: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3) 1;
  animation: borderFlow 0.8s linear infinite;
  filter: brightness(1.5) saturate(1.8);
}

.gallery-photo{
  width:100%;
  height:350px;
  object-fit:cover;
  transition:transform 0.3s ease;
}

.gallery-item:hover .gallery-photo{
  transform:scale(1.1);
}

.photo-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity 0.3s ease;
}

.gallery-item:hover .photo-overlay{
  opacity:1;
}

.photo-overlay i{
  font-size:24px;
  color:white;
  transform:scale(0);
  transition:transform 0.3s ease;
}

.gallery-item:hover .photo-overlay i{
  transform:scale(1);
}

.photo-info{
  flex:1;
}

.photo-info h4{
  margin:0 0 8px 0;
  color:var(--text);
  font-size:1.3rem;
}

.photo-info p{
  margin:0 0 20px 0;
  color:var(--muted);
}

.photo-meta{
  display:flex;
  gap:20px;
}

.photo-meta span{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:0.9rem;
}

.photo-meta i{
  color:var(--purple);
}

/* 3D Tilt Card Animations */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.6s ease-out;
  position: relative;
}

.tilt-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s ease-out;
}

.tilt-card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: var(--radius);
}

/* Apply tilt to cards */
.card {
  transform-style: preserve-3d;
  transition: transform 0.6s ease-out, box-shadow 0.6s ease-out;
  position: relative;
  overflow: hidden;
  border: 3px solid transparent;
  border-radius: var(--radius);
  background: linear-gradient(var(--card), var(--card)) padding-box,
              linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, 
    transparent 30%, 
    rgba(162,124,255,0.1) 50%, 
    transparent 70%);
  transform: translateZ(1px);
  opacity: 0;
  transition: opacity 0.6s ease-out;
  pointer-events: none;
}

.card.tilting::before {
  opacity: 1;
}

.card:hover {
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateZ(10px);
  box-shadow: 
    0 10px 20px rgba(162,124,255,0.2),
    0 0 30px rgba(162,124,255,0.05);
  border-image: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3) 1;
  animation: borderFlow 0.8s linear infinite;
}

@keyframes borderFlow {
  0% { 
    border-image-source: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3); 
    filter: brightness(1.2) saturate(1.3);
  }
  25% { 
    border-image-source: linear-gradient(135deg, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000); 
    filter: brightness(1.4) saturate(1.5);
  }
  50% { 
    border-image-source: linear-gradient(225deg, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000, #ff7f00); 
    filter: brightness(1.6) saturate(1.7);
  }
  75% { 
    border-image-source: linear-gradient(315deg, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000, #ff7f00, #ffff00); 
    filter: brightness(1.8) saturate(1.9);
  }
  100% { 
    border-image-source: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3); 
    filter: brightness(2.0) saturate(2.0);
  }
}

/* Specific card tilt effects */
#certifications .card:hover {
  box-shadow: 
    0 10px 20px rgba(77,255,159,0.2),
    0 0 30px rgba(77,255,159,0.05);
}

#skills .card:hover {
  box-shadow: 
    0 10px 20px rgba(72,183,255,0.2),
    0 0 30px rgba(72,183,255,0.05);
}

#projects .card:hover {
  box-shadow: 
    0 10px 20px rgba(162,124,255,0.2),
    0 0 30px rgba(162,124,255,0.05);
}

#education .t-item:hover {
  box-shadow: 
    0 10px 20px rgba(57,242,255,0.2),
    0 0 30px rgba(57,242,255,0.05);
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateZ(10px) translateY(-4px) scale(1.01);
}

/* Gallery tilt effects */
.gallery-item:hover {
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateZ(10px) translateY(-4px) scale(1.01);
  box-shadow: 
    0 10px 20px rgba(162,124,255,0.2),
    0 0 30px rgba(162,124,255,0.05);
}

/* Header photo tilt */
.header-photo-container {
  transform-style: preserve-3d;
  transition: transform 0.6s ease-out, box-shadow 0.6s ease-out;
  border: 2px solid transparent;
  border-radius: 50%;
  background: linear-gradient(transparent, transparent) padding-box,
              linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 
    0 0 0 2px rgba(255,0,0,0.15),
    0 0 0 4px rgba(255,127,0,0.1),
    0 0 0 6px rgba(255,255,0,0.05);
}

.header-photo-container:hover {
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateZ(15px) scale(1.02);
  box-shadow: 
    0 12px 25px rgba(162,124,255,0.3),
    0 0 40px rgba(162,124,255,0.1);
  border-image: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3) 1;
  animation: borderFlow 0.8s linear infinite;
  filter: brightness(1.1) saturate(1.2);
}

/* Disable tilt on touch devices */
@media (hover: none) and (pointer: coarse) {
  .card, .gallery-item, .header-photo-container {
    transform: none !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .card, .gallery-item, .header-photo-container {
    transform: none !important;
    transition: none !important;
  }
}

/* Large Desktop - 1200px+ */
@media (min-width: 1200px) {
  .container { max-width: 1120px; }
  .hero-grid { grid-template-columns: 1.2fr 0.8fr; gap: 30px; }
  .cards-3 { grid-template-columns: repeat(3, 1fr); }
  .photo-gallery { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); }
}

/* Desktop - 992px to 1199px */
@media (min-width: 992px) and (max-width: 1199px) {
  .container { max-width: 960px; }
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 25px; }
  .cards-3 { grid-template-columns: repeat(3, 1fr); }
  .photo-gallery { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .hero-title { font-size: 42px; }
}

/* Tablet - 768px to 991px */
@media (min-width: 768px) and (max-width: 991px) {
  .container { max-width: 720px; padding: 0 16px; }
  .hero-grid { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .cards-2 { grid-template-columns: 1fr; }
  .cards-3 { grid-template-columns: repeat(2, 1fr); }
  .photo-gallery { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
  .hero-title { font-size: 38px; }
  .gallery-photo { height: 300px; }
  .brand-text { 
    display: inline-block !important; 
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
  }
  .brand {
    font-size: 16px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
  }
  .header-photo-container { 
    width: 120px; 
    height: 120px; 
    top: 60px; 
    right: 12px; 
  }
  .nav-menu { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* Mobile - 480px to 767px */
@media (min-width: 480px) and (max-width: 767px) {
  .container { max-width: 100%; padding: 0 12px; }
  .hero-grid { grid-template-columns: 1fr; gap: 16px; }
  .cards-2 { grid-template-columns: 1fr; }
  .cards-3 { grid-template-columns: 1fr; }
  .photo-gallery { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
  .hero-title { font-size: 32px; }
  .gallery-photo { height: 250px; }
  .section { padding: 60px 0; }
  .brand-text { 
    display: inline-block !important; 
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
  }
  .brand {
    font-size: 15px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
  }
  .header-photo-container { 
    width: 120px; 
    height: 120px; 
    top: 60px; 
    right: 12px; 
  }
  .nav-menu { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* Small Mobile - 320px to 479px */
@media (max-width: 479px) {
  .container { max-width: 100%; padding: 0 8px; }
  .hero-grid { grid-template-columns: 1fr; gap: 12px; }
  .cards-2 { grid-template-columns: 1fr; }
  .cards-3 { grid-template-columns: 1fr; }
  .photo-gallery { grid-template-columns: 1fr; gap: 12px; }
  .hero-title { font-size: 28px; line-height: 1.2; }
  .gallery-photo { height: 200px; }
  .section { padding: 40px 0; }
  .section-title { font-size: 28px; }
  .brand-text { 
    display: inline-block !important; 
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
  }
  .brand {
    font-size: 14px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
  }
  .header-photo-container { 
    width: 80px; 
    height: 80px; 
    top: 50px; 
    right: 8px; 
  }
  .nav-menu {
    position:fixed;
    left:12px;
    right:12px;
    top:70px;
    background:rgba(7,7,19,.95);
    border:1px solid rgba(162,124,255,.18);
    box-shadow:0 22px 60px rgba(0,0,0,.55);
    border-radius:18px;
    padding:12px;
    flex-direction:column;
    gap:8px;
    transform:translateY(-100px);
    opacity:0;
    pointer-events:none;
    transition:all 0.3s ease;
  }
  .nav-menu.open{
    transform:translateY(0);
    opacity:1;
    pointer-events:all;
  }
  .nav-link, .nav-cta{width:100%; text-align:left}
  .nav-cta{margin-left:0; text-align:center}
}

/* Landscape adjustments */
@media (max-width: 767px) and (orientation: landscape) {
  .header-photo-container { 
    top: auto; 
    bottom: 12px; 
    right: 12px; 
  }
}

/* Ultra-wide displays */
@media (min-width: 1400px) {
  .container { max-width: 1200px; }
  .hero-grid { grid-template-columns: 1.3fr 0.7fr; gap: 40px; }
  .photo-gallery { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .hero-title, .section-title { font-weight: 300; }
  .brand-text { font-weight: 600; }
}

.header-photo{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--purple);
}

.photo-container{
  display:block;
  width:260px;
  height:260px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px;
  margin:0 0 50px 300px;
  backdrop-filter:blur(10px);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
  transform:translateY(-10px);
}

.photo-container:hover{
  transform:translateY(-10px) scale(1.05);
  box-shadow:0 8px 32px rgba(162,124,255,0.3);
}

.profile-photo{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--purple);
}

.drive-gate{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background:radial-gradient(900px 500px at 50% 30%, rgba(57,242,255,.14), transparent 60%),
             radial-gradient(900px 500px at 50% 70%, rgba(162,124,255,.14), transparent 60%),
             rgba(7,7,19,.78);
  z-index:90;
  opacity:0;
  pointer-events:none;
  transition:opacity .45s ease;
}

.drive-gate.show{
  opacity:1;
  pointer-events:auto;
}

.drive-gate-inner{
  width:min(980px, calc(100% - 30px));
  border-radius:24px;
  padding:16px;
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25));
  border:1px solid rgba(57,242,255,.18);
  box-shadow:0 30px 80px rgba(0,0,0,.60);
}

.drive-gate-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:6px 6px 12px;
}

.drive-gate-title{
  font-weight:800;
  letter-spacing:-.02em;
}

.drive-gate-link{
  color:rgba(77,255,159,.92);
  font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12.5px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(77,255,159,.20);
  background:rgba(255,255,255,.03);
}

.drive-gate-frame{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(162,124,255,.16);
  background:rgba(0,0,0,.28);
}

.drive-gate-frame iframe{
  display:block;
  width:100%;
  height:min(70vh, 640px);
  border:0;
}

.drive-gate-actions{
  display:flex;
  justify-content:flex-end;
  padding:12px 6px 6px;
}

header, main, footer{position:relative; z-index:2}

.welcome{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background:radial-gradient(900px 500px at 50% 30%, rgba(162,124,255,.18), transparent 60%),
             radial-gradient(900px 500px at 50% 70%, rgba(72,183,255,.14), transparent 60%),
             rgba(7,7,19,.75);
  z-index:80;
  opacity:0;
  pointer-events:none;
  transition:opacity 2s ease;
}

.welcome.show{
  opacity:1;
  pointer-events:auto;
}

.welcome.hide{
  opacity:0;
  pointer-events:none;
}

.welcome-inner{
  width:min(720px, calc(100% - 34px));
  border-radius:24px;
  padding:26px 18px;
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.28));
  border:1px solid rgba(57,242,255,.18);
  box-shadow:0 30px 80px rgba(0,0,0,.60);
  text-align:center;
  transform:translateY(10px) scale(.98);
  animation:welcomeIn .5s ease forwards;
}

.welcome-kicker{
  color:rgba(77,255,159,.85);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:12px;
  font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.welcome-text{
  margin-top:10px;
  font-size:36px;
  font-weight:700;
  letter-spacing:-.02em;
  color:rgba(77,255,159,.96);
  text-shadow:0 0 22px rgba(77,255,159,.28);
  font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  display:inline-block;
  position:relative;
  transition:opacity 0.4s ease;
}

.welcome-text::after{
  content:"";
  display:inline-block;
  width:10px;
  height:1.15em;
  margin-left:8px;
  transform:translateY(3px);
  background:rgba(77,255,159,.85);
  box-shadow:0 0 16px rgba(77,255,159,.35);
  animation:blink 1.05s step-end infinite;
}

@keyframes welcomeIn{
  to{transform:translateY(0) scale(1)}
}

@keyframes welcomePulse{
  50%{filter:brightness(1.12)}
}

@media (max-width: 720px){
  .welcome-text{font-size:28px}
}

a{color:inherit; text-decoration:none}
a:hover{color:var(--cyan)}

.container{max-width:var(--max); margin:0 auto; padding:0 18px}
.section{padding:84px 0}

.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px}
.section-title{font-size:34px; margin:0; letter-spacing:-.03em}
.section-kicker{margin:0; color:var(--muted)}

.header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(7,7,19,.6);
  border-bottom:1px solid rgba(162,124,255,.10);
}

.nav{
  max-width:var(--max);
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  justify-content:space-between;
  gap:14px;
}

.brand{display:flex; align-items:center; gap:12px; min-width:max-content}
.brand-mark{
  width:38px; height:38px;
  display:grid; place-items:center;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(162,124,255,.25), rgba(72,183,255,.18));
  border:1px solid rgba(162,124,255,.25);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  font-weight:700;
  letter-spacing:.02em;
  animation:neon-blink-hk 2s infinite alternate;
  text-shadow:0 0 10px #fff,
               0 0 20px #fff,
               0 0 30px #fff,
               0 0 40px #48b7ff,
               0 0 70px #48b7ff,
               0 0 80px #48b7ff,
               0 0 100px #48b7ff,
               0 0 150px #48b7ff;
  overflow:hidden;
  border-right:3px solid #48b7ff;
  white-space:nowrap;
  animation:typewriter-hk 1s steps(2) 0.5s 1 normal both,
             neon-blink-hk 2s infinite alternate;
}

@keyframes typewriter-hk{
  from{width:0}
  to{width:38px}
}

@keyframes neon-blink-hk{
  0%, 18%, 22%, 25%, 53%, 57%, 100%{
    text-shadow:0 0 10px #fff,
                 0 0 20px #fff,
                 0 0 30px #fff,
                 0 0 40px #48b7ff,
                 0 0 70px #48b7ff,
                 0 0 80px #48b7ff,
                 0 0 100px #48b7ff,
                 0 0 150px #48b7ff;
    color:#fff;
  }
  20%, 24%, 55%{
    text-shadow:none;
    color:#39f2ff;
  }
}

.brand-text{
  overflow:hidden;
  white-space:nowrap;
  animation:typewriter 3s steps(14) 1s 1 normal both;
}

@keyframes typewriter{
  from{width:0}
  to{width:100%}
}

@keyframes neon-blink{
  0%, 18%, 22%, 25%, 53%, 57%, 100%{
    text-shadow:0 0 10px #fff,
                 0 0 20px #fff,
                 0 0 30px #fff,
                 0 0 40px #a27cff,
                 0 0 70px #a27cff,
                 0 0 80px #a27cff,
                 0 0 100px #a27cff,
                 0 0 150px #a27cff;
    color:#fff;
  }
  20%, 24%, 55%{
    text-shadow:none;
    color:#48b7ff;
  }
}

.nav-menu{display:flex; align-items:center; gap:10px}
.nav-link{
  padding:10px 12px;
  color:var(--muted);
  border-radius:12px;
  transition:transform .2s ease, background .2s ease, color .2s ease;
}
.nav-link:hover{background:rgba(255,255,255,.06); color:var(--text); transform:translateY(-1px)}
.nav-link.active{background:rgba(162,124,255,.14); color:var(--text); border:1px solid rgba(162,124,255,.16)}

.nav-cta{
  margin-left:8px;
  padding:10px 14px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(162,124,255,.26), rgba(72,183,255,.18));
  border:1px solid rgba(162,124,255,.22);
  box-shadow:0 16px 38px rgba(0,0,0,.45);
  transition:transform .2s ease, filter .2s ease;
}
.nav-cta:hover{filter:brightness(1.08); transform:translateY(-1px)}

.nav-toggle{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid rgba(162,124,255,.20);
  background:rgba(255,255,255,.04);
  padding:10px;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  height:2px;
  background:rgba(233,236,255,.88);
  border-radius:2px;
  margin:6px 0;
}

.hero{padding-top:54px}
.hero-grid{display:grid; grid-template-columns: 1.15fr .85fr; gap:22px; align-items:center}

.chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(162,124,255,.18);
  color:var(--muted);
}
.dot{
  width:10px; height:10px;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--cyan), var(--purple));
  box-shadow:0 0 18px rgba(57,242,255,.35);
}

.hero-title{font-size:46px; line-height:1.06; letter-spacing:-.04em; margin:14px 0 10px}
.gradient{
  background:linear-gradient(90deg, var(--purple), var(--blue), var(--cyan));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.rgb-blink{
  background:linear-gradient(45deg, 
    rgb(255,0,0), 
    rgb(255,127,0), 
    rgb(255,255,0), 
    rgb(0,255,0), 
    rgb(0,0,255), 
    rgb(75,0,130), 
    rgb(148,0,211));
  background-size:400% 400%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:rgbBlink 3s linear infinite;
}

@keyframes rgbBlink {
  0% { background-position:0% 50%; filter: hue-rotate(0deg); }
  25% { background-position:25% 0%; filter: hue-rotate(90deg); }
  50% { background-position:50% 50%; filter: hue-rotate(180deg); }
  75% { background-position:75% 100%; filter: hue-rotate(270deg); }
  100% { background-position:100% 50%; filter: hue-rotate(360deg); }
}
.hero-subtitle{color:var(--muted); font-size:16px; line-height:1.6; margin:0 0 18px}

.hero-actions{display:flex; gap:12px; flex-wrap:wrap}
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:11px 14px;
  border-radius:14px;
  border:1px solid rgba(162,124,255,.20);
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  transition:transform .2s ease, filter .2s ease, background .2s ease;
}
.btn:hover{transform:translateY(-1px); filter:brightness(1.08)}
.btn.primary{
  background:linear-gradient(135deg, rgba(162,124,255,.28), rgba(72,183,255,.18));
  border:1px solid rgba(162,124,255,.22);
  box-shadow:0 20px 46px rgba(0,0,0,.50);
}
.btn.ghost{background:rgba(255,255,255,.03)}

.hero-meta{display:flex; gap:14px; flex-wrap:wrap; margin-top:16px}
.meta-item{display:flex; align-items:center; gap:10px; color:var(--muted)}
.meta-item i{color:rgba(72,183,255,.85)}

.social-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}
.social{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(162,124,255,.16);
  color:var(--muted);
  transition:transform .2s ease, background .2s ease, color .2s ease;
}
.social:hover{transform:translateY(-1px); background:rgba(255,255,255,.06); color:var(--text)}

.terminal{
  border-radius:var(--radius);
  overflow:hidden;
  background:rgba(9,9,22,.7);
  border:1px solid rgba(162,124,255,.18);
  box-shadow:var(--shadow);
}
.terminal-top{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 12px;
  background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(162,124,255,.14);
}
.t-dot{width:10px; height:10px; border-radius:50%}
.t-dot.red{background:#ff5f57}
.t-dot.yellow{background:#febc2e}
.t-dot.green{background:#28c840}
.terminal-title{margin-left:8px; color:var(--muted); font-size:12px}
.terminal-body{padding:14px 14px 16px; font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:12.5px; color:#dfe6ff}
.line{padding:5px 0; opacity:.95}
.prompt{color:var(--cyan)}
.path{color:rgba(162,124,255,.95)}
.ok{color:var(--green); font-weight:700}
.cursor{color:rgba(233,236,255,.8); animation:blink 1.1s step-end infinite}
@keyframes blink{50%{opacity:0}}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(162,124,255,.16);
  border-radius:var(--radius);
  box-shadow:0 18px 48px rgba(0,0,0,.45);
  padding:18px;
}
.card-title{display:flex; align-items:center; gap:10px; font-weight:600; margin-bottom:8px}
.card-title i{color:rgba(162,124,255,.95)}
.muted{color:var(--muted)}

.about-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:18px; align-items:start}
.about-text p{margin:0 0 14px; color:var(--muted); line-height:1.65}

.facts{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px}
.fact{display:flex; flex-direction:column; gap:6px; padding:12px; border-radius:16px; background:rgba(255,255,255,.03); border:1px solid rgba(162,124,255,.14)}
.fact-label{color:rgba(170,176,214,.85); font-size:12px}
.fact-value{color:var(--text); font-weight:600}

.about-badges{display:grid; grid-template-columns:1fr; gap:10px}
.badge-card{display:flex; align-items:center; gap:12px; padding:14px; border-radius:16px; background:rgba(255,255,255,.03); border:1px solid rgba(162,124,255,.14); transition:transform .2s ease, background .2s ease}
.badge-card i{font-size:18px; color:rgba(72,183,255,.95)}
.badge-card:hover{transform:translateY(-1px); background:rgba(255,255,255,.06)}
.badge-title{font-weight:700}
.badge-sub{color:var(--muted); font-size:13px; margin-top:2px}

.grid-2{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px}

.skill{margin-top:12px}
.skill-top{display:flex; justify-content:space-between; gap:10px; color:rgba(233,236,255,.92); font-weight:500}
.pct{color:rgba(170,176,214,.95)}
.bar{height:10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(162,124,255,.14); overflow:hidden; margin-top:10px}
.fill{height:100%; width:0%; border-radius:999px; background:linear-gradient(90deg, rgba(162,124,255,.95), rgba(72,183,255,.95), rgba(57,242,255,.95)); box-shadow:0 0 18px rgba(57,242,255,.20); transition:width 1.1s ease}

.languages-card{margin-top:14px}
.pill-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.pill{padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.03); border:1px solid rgba(162,124,255,.14); color:var(--muted)}

.timeline{display:grid; gap:12px}
.t-item{position:relative}
.t-head{display:flex; flex-direction:column; gap:6px}
.t-title{font-weight:700}
.t-sub{color:var(--muted)}

.cards-3{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px}
.cert{transition:transform .2s ease, background .2s ease, border-color .2s ease; cursor:pointer; position:relative}
.cert:hover{transform:translateY(-2px); border-color:rgba(57,242,255,.20); background:rgba(255,255,255,.06)}
.cert::after{content:'🔗'; position:absolute; top:8px; right:8px; font-size:12px; opacity:0; transition:opacity .2s ease}
.cert:hover::after{opacity:0.7}
.cert-top{display:flex; align-items:flex-start; gap:12px}
.cert-icon{
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(162,124,255,.16);
  color:rgba(57,242,255,.95);
}
.cert-title{margin:0; font-size:16px; letter-spacing:-.01em}
.cert.pursuing{border-color:rgba(77,255,159,.22)}

.cards-2{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px}
.project{transition:transform .2s ease, border-color .2s ease, background .2s ease; cursor:pointer;}
.project:hover{transform:translateY(-2px); border-color:rgba(72,183,255,.22); background:rgba(255,255,255,.06)}
.project-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.project-title{margin:0; font-size:18px; letter-spacing:-.01em}
.tag{padding:6px 10px; border-radius:999px; background:rgba(162,124,255,.14); border:1px solid rgba(162,124,255,.16); color:rgba(233,236,255,.92); font-size:12px}
.project-points{display:grid; gap:10px; margin-top:14px}
.p{display:flex; align-items:flex-start; gap:10px; color:var(--muted)}
.p i{color:rgba(57,242,255,.85); margin-top:2px}

.contact-grid{display:grid; grid-template-columns: .95fr 1.05fr; gap:14px; align-items:start}
.contact-lines{display:grid; gap:10px; margin-top:12px}
.c-line{display:flex; align-items:center; gap:10px; color:var(--muted)}
.c-line i{color:rgba(72,183,255,.9)}

.note{margin-top:14px; padding:12px; border-radius:16px; background:rgba(255,255,255,.03); border:1px solid rgba(162,124,255,.14)}
.note-title{font-weight:700}
.note-body{color:var(--muted); margin-top:6px; line-height:1.55}

.form{display:grid; gap:12px}
.field{display:grid; gap:8px}
label{color:rgba(233,236,255,.92); font-weight:500}
input, textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(162,124,255,.16);
  background:rgba(255,255,255,.03);
  color:var(--text);
  outline:none;
  font:inherit;
  transition:border-color .2s ease, box-shadow .2s ease;
}
input:focus, textarea:focus{border-color:rgba(57,242,255,.28); box-shadow:0 0 0 4px rgba(57,242,255,.08)}
textarea{resize:vertical; min-height:130px}
.error{min-height:16px; color:rgba(255,95,87,.95); font-size:12.5px}
.form-status{min-height:20px; color:rgba(77,255,159,.95); font-weight:600}

.footer{padding:34px 0 28px; border-top:1px solid rgba(162,124,255,.12); background:rgba(7,7,19,.45);}
.footer-grid{display:grid; grid-template-columns:1.2fr .8fr .6fr; gap:14px; align-items:center}
.footer-brand{font-weight:800; letter-spacing:-.02em}
.footer-links{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; color:var(--muted)}
.footer-links a{padding:8px 10px; border-radius:12px; transition:background .2s ease, color .2s ease}
.footer-links a:hover{background:rgba(255,255,255,.04); color:var(--text)}
.footer-social{display:flex; justify-content:flex-end; gap:10px}
.icon-btn{width:42px; height:42px; border-radius:14px; display:grid; place-items:center; border:1px solid rgba(162,124,255,.18); background:rgba(255,255,255,.03); color:rgba(233,236,255,.9); transition:transform .2s ease, background .2s ease}
.icon-btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.06)}
.footer-bottom{margin-top:16px; padding-top:16px; border-top:1px solid rgba(162,124,255,.10); display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}

.bg-grid{
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(to right, rgba(162,124,255,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(72,183,255,.06) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity:.20;
  pointer-events:none;
  z-index:1;
  mask-image: radial-gradient(600px 600px at 50% 30%, #000 40%, transparent 75%);
}
.bg-glow{position:fixed; width:520px; height:520px; border-radius:50%; filter:blur(60px); opacity:.25; pointer-events:none; z-index:1}
.bg-glow-1{left:-120px; top:120px; background:radial-gradient(circle at 30% 30%, rgba(162,124,255,.9), transparent 62%)}
.bg-glow-2{right:-150px; top:30px; background:radial-gradient(circle at 30% 30%, rgba(72,183,255,.9), transparent 62%)}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr; gap:16px}
  .about-grid{grid-template-columns:1fr;}
  .cards-3{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr; text-align:center}
  .footer-social{justify-content:center}
}

@media (max-width: 720px){
  .section{padding:64px 0}
  .section-head{flex-direction:column; align-items:flex-start}
  .section-title{font-size:30px}
  .hero-title{font-size:38px}
  .grid-2{grid-template-columns:1fr}
  .cards-2{grid-template-columns:1fr}
  .cards-3{grid-template-columns:1fr}

  .drive-gate-inner{padding:12px}
  .drive-gate-frame iframe{height:min(68vh, 520px)}

  .nav-toggle{display:inline-flex; align-items:center; justify-content:center}
  .nav-menu{
    position:fixed;
    left:12px;
    right:12px;
    top:68px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    padding:12px;
    border-radius:18px;
    background:rgba(10,10,26,.92);
    border:1px solid rgba(162,124,255,.18);
    box-shadow:0 22px 60px rgba(0,0,0,.55);
  }
  .nav-menu.open{display:flex}
  .nav-link, .nav-cta{width:100%; text-align:left}
  .nav-cta{margin-left:0; text-align:center}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .btn, .nav-link, .project, .cert, .badge-card, .icon-btn{transition:none}
  .cursor{animation:none}
  .fill{transition:none}
}