*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:"Inter","Segoe UI",sans-serif;font-size:16px;line-height:1.6;color:#fff;background:#0a0a0a;overflow-x:hidden;position:relative;overflow:hidden}body::before{content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;background:linear-gradient(180deg, transparent 0%, rgba(0,255,136,0.03) 50%, transparent 100%);animation:matrix-rain 3s linear infinite}@keyframes matrix-rain{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}h1,h2,h3,h4,h5,h6{font-family:"JetBrains Mono","Fira Code",monospace;font-weight:700;line-height:1.2;margin-bottom:1rem;color:#fff;text-transform:uppercase;letter-spacing:2px}h1{font-size:48px}h2{font-size:32px}h3{font-size:24px}h4{font-size:18px}h5{font-size:16px}h6{font-size:14px}p{margin-bottom:1rem;color:#ccc}a{color:#0f8;text-decoration:none;transition:all 0.15s ease}a:hover{color:cyan;text-shadow:0 0 10px rgba(0,255,255,0.5)}.btn{background:transparent;border:2px solid #0f8;color:#0f8;padding:1rem 2rem;border-radius:8px;font-family:"JetBrains Mono","Fira Code",monospace;font-weight:600;text-transform:uppercase;letter-spacing:1px;transition:all 0.3s ease;position:relative;overflow:hidden;display:inline-block;cursor:pointer;text-align:center;border:none;outline:none;font-size:14px;font-weight:600}.btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(0,255,136,0.2), transparent);transition:left 0.3s ease}.btn:hover{background:#0f8;color:#0a0a0a;box-shadow:0 0 5px rgba(0,255,136,0.8),0 0 10px rgba(0,255,136,0.64),0 0 15px rgba(0,255,136,0.48),0 0 20px rgba(0,255,136,0.32)}.btn:hover::before{left:100%}.btn:active{transform:scale(0.98)}.btn.btn-primary{background:transparent;border:2px solid #0f8;color:#0f8;padding:1rem 2rem;border-radius:8px;font-family:"JetBrains Mono","Fira Code",monospace;font-weight:600;text-transform:uppercase;letter-spacing:1px;transition:all 0.3s ease;position:relative;overflow:hidden}.btn.btn-primary::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(0,255,136,0.2), transparent);transition:left 0.3s ease}.btn.btn-primary:hover{background:#0f8;color:#0a0a0a;box-shadow:0 0 5px rgba(0,255,136,0.8),0 0 10px rgba(0,255,136,0.64),0 0 15px rgba(0,255,136,0.48),0 0 20px rgba(0,255,136,0.32)}.btn.btn-primary:hover::before{left:100%}.btn.btn-primary:active{transform:scale(0.98)}.btn.btn-secondary{background:transparent;border:2px solid cyan;color:cyan;padding:1rem 2rem;border-radius:8px;font-family:"JetBrains Mono","Fira Code",monospace;font-weight:600;text-transform:uppercase;letter-spacing:1px;transition:all 0.3s ease;position:relative;overflow:hidden}.btn.btn-secondary::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(0,255,255,0.2), transparent);transition:left 0.3s ease}.btn.btn-secondary:hover{background:cyan;color:#0a0a0a;box-shadow:0 0 5px rgba(0,255,255,0.8),0 0 10px rgba(0,255,255,0.64),0 0 15px rgba(0,255,255,0.48),0 0 20px rgba(0,255,255,0.32)}.btn.btn-secondary:hover::before{left:100%}.btn.btn-secondary:active{transform:scale(0.98)}.btn.btn-danger{background:transparent;border:2px solid #f44;color:#f44;padding:1rem 2rem;border-radius:8px;font-family:"JetBrains Mono","Fira Code",monospace;font-weight:600;text-transform:uppercase;letter-spacing:1px;transition:all 0.3s ease;position:relative;overflow:hidden}.btn.btn-danger::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255,68,68,0.2), transparent);transition:left 0.3s ease}.btn.btn-danger:hover{background:#f44;color:#0a0a0a;box-shadow:0 0 5px rgba(255,68,68,0.8),0 0 10px rgba(255,68,68,0.64),0 0 15px rgba(255,68,68,0.48),0 0 20px rgba(255,68,68,0.32)}.btn.btn-danger:hover::before{left:100%}.btn.btn-danger:active{transform:scale(0.98)}.btn.btn-lg{padding:1.5rem 3rem;font-size:18px}.btn.btn-sm{padding:.5rem 1rem;font-size:14px}.form-control{background:rgba(42,42,42,0.8);border:2px solid rgba(0,255,136,0.3);border-radius:8px;color:#fff;padding:1rem;font-family:"Inter","Segoe UI",sans-serif;transition:all 0.3s ease}.form-control:focus{outline:none;border-color:#0f8;box-shadow:0 0 5px rgba(0,255,136,0.3),0 0 10px rgba(0,255,136,0.24),0 0 15px rgba(0,255,136,0.18),0 0 20px rgba(0,255,136,0.12);background:rgba(42,42,42,0.9)}.form-control::placeholder{color:#888}.form-group{margin-bottom:1.5rem}.form-label{display:block;margin-bottom:.5rem;font-family:"JetBrains Mono","Fira Code",monospace;color:#0f8;text-transform:uppercase;font-size:14px;letter-spacing:1px}.card{background:rgba(42,42,42,0.8);background:rgba(255,255,255,0.05);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.2);border-radius:12px;padding:2rem;margin-bottom:1.5rem;transition:all 0.3s ease}.card:hover{transform:translateY(-5px);box-shadow:0 0 5px rgba(0,255,136,0.3),0 0 10px rgba(0,255,136,0.24),0 0 15px rgba(0,255,136,0.18),0 0 20px rgba(0,255,136,0.12)}.card .card-header{border-bottom:1px solid rgba(0,255,136,0.3);padding-bottom:1rem;margin-bottom:1.5rem}.card .card-header h3,.card .card-header h4,.card .card-header h5{margin-bottom:0;color:cyan}.card .card-body{color:#ccc}.navbar{background:rgba(26,26,26,0.95);background:rgba(255,255,255,0.1);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.2);backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,255,136,0.3);padding:1rem 0}.navbar .navbar-brand{font-family:"JetBrains Mono","Fira Code",monospace;font-size:24px;font-weight:700;color:#0f8 !important;text-transform:uppercase;letter-spacing:2px}.navbar .navbar-brand:hover{color:cyan !important;text-shadow:0 0 15px rgba(0,255,255,0.5)}.navbar .navbar-nav .nav-link{color:#ccc !important;font-family:"JetBrains Mono","Fira Code",monospace;text-transform:uppercase;font-size:14px;letter-spacing:1px;padding:1rem 1.5rem;transition:all 0.15s ease}.navbar .navbar-nav .nav-link:hover{color:#0f8 !important;background:rgba(0,255,136,0.1);border-radius:8px}.navbar .navbar-nav .nav-link.active{color:cyan !important;background:rgba(0,255,255,0.1)}.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden}.hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at center, rgba(0,255,136,0.1) 0%, transparent 70%);animation:pulse 4s ease-in-out infinite}.hero .hero-content{position:relative;z-index:2;max-width:800px}.hero .hero-content h1{font-size:clamp(32px, 5vw, 72px);margin-bottom:1.5rem;font-family:"JetBrains Mono","Fira Code",monospace;color:#0f8;text-shadow:0 0 10px rgba(0,255,136,0.5);animation:fadeInUp 1s ease-out}.hero .hero-content h1.typing{border-right:2px solid #0f8;animation:blink 1s infinite}@keyframes blink{0%,50%{border-color:#0f8}51%,100%{border-color:transparent}}.hero .hero-content p{font-size:18px;margin-bottom:3rem;color:#ccc;animation:fadeInUp 1s ease-out 0.2s both}.hero .hero-content .cta-buttons{animation:fadeInUp 1s ease-out 0.4s both}.hero .hero-content .cta-buttons .btn+.btn{margin-left:1.5rem}@keyframes pulse{0%,100%{opacity:0.5}50%{opacity:1}}@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.section{padding:4rem 0;position:relative}.section .section-header{text-align:center;margin-bottom:4rem}.section .section-header h2{color:cyan;margin-bottom:1rem;position:relative;display:inline-block}.section .section-header h2::after{content:'';position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:60px;height:3px;background:linear-gradient(90deg, #0f8, cyan);border-radius:50%}.section .section-header p{max-width:600px;margin:0 auto;font-size:18px;color:#ccc}.back-to-top{position:fixed;bottom:2rem;right:2rem;width:50px;height:50px;background:rgba(26,26,26,0.9);background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.2);border:1px solid rgba(0,255,136,0.3);border-radius:50%;color:#0f8;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s ease;z-index:1030;opacity:0;visibility:hidden}.back-to-top:hover{background:rgba(0,255,136,0.1);box-shadow:0 0 5px rgba(0,255,136,0.5),0 0 10px rgba(0,255,136,0.4),0 0 15px rgba(0,255,136,0.3),0 0 20px rgba(0,255,136,0.2);transform:translateY(-2px)}.back-to-top.active{opacity:1;visibility:visible}.loading{display:inline-block;position:relative;color:#0f8;font-family:"JetBrains Mono","Fira Code",monospace}.loading::after{content:'';animation:loading-dots 1.5s infinite}@keyframes loading-dots{0%,20%{content:''}40%{content:'.'}60%{content:'..'}80%,100%{content:'...'}}@media (min-width: 768px){.hero .hero-content h1{font-size:57.6px}}@media (min-width: 992px){.hero .hero-content h1{font-size:72px}}.portfolio-item{background:rgba(42,42,42,0.8);background:rgba(255,255,255,0.05);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,0.2);border-radius:12px;overflow:hidden;transition:all 0.3s ease;margin-bottom:2rem}.portfolio-item:hover{transform:translateY(-5px);box-shadow:0 0 5px rgba(0,255,136,0.3),0 0 10px rgba(0,255,136,0.24),0 0 15px rgba(0,255,136,0.18),0 0 20px rgba(0,255,136,0.12)}.portfolio-item .portfolio-image{position:relative;overflow:hidden}.portfolio-item .portfolio-image img{width:100%;height:250px;object-fit:cover;transition:transform 0.3s ease}.portfolio-item .portfolio-image:hover img{transform:scale(1.05)}.portfolio-item .portfolio-image .portfolio-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg, rgba(0,255,136,0.1), rgba(0,255,255,0.1));display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s ease}.portfolio-item .portfolio-image .portfolio-overlay .portfolio-links{display:flex;gap:1rem}.portfolio-item .portfolio-image .portfolio-overlay .portfolio-links a{width:50px;height:50px;background:rgba(10,10,10,0.8);background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#0f8;transition:all 0.15s ease}.portfolio-item .portfolio-image .portfolio-overlay .portfolio-links a:hover{background:#0f8;color:#0a0a0a;transform:scale(1.1);box-shadow:0 0 5px rgba(0,255,136,0.5),0 0 10px rgba(0,255,136,0.4),0 0 15px rgba(0,255,136,0.3),0 0 20px rgba(0,255,136,0.2)}.portfolio-item .portfolio-image:hover .portfolio-overlay{opacity:1}.portfolio-item .portfolio-content{padding:2rem}.portfolio-item .portfolio-content .portfolio-title{font-size:18px;margin-bottom:1rem;color:cyan}.portfolio-item .portfolio-content .portfolio-title a:hover{color:#0f8}.portfolio-item .portfolio-content .portfolio-description{color:#ccc;margin-bottom:1.5rem;line-height:1.6}.portfolio-item .portfolio-content .portfolio-tech{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}.portfolio-item .portfolio-content .portfolio-tech .tech-tag{background:rgba(0,255,136,0.1);color:#0f8;padding:.25rem .5rem;border-radius:4px;font-size:14px;font-family:"JetBrains Mono","Fira Code",monospace;border:1px solid rgba(0,255,136,0.3);transition:all 0.15s ease}.portfolio-item .portfolio-content .portfolio-tech .tech-tag:hover{background:#0f8;color:#0a0a0a;box-shadow:0 0 5px rgba(0,255,136,0.3),0 0 10px rgba(0,255,136,0.24),0 0 15px rgba(0,255,136,0.18),0 0 20px rgba(0,255,136,0.12)}.portfolio-item .portfolio-content .portfolio-stats{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#888}.portfolio-item .portfolio-content .portfolio-stats .stat-item{display:flex;align-items:center;gap:.25rem}.portfolio-item .portfolio-content .portfolio-stats .stat-item i{color:#0f8}.blog-post{background:rgba(42,42,42,0.8);background:rgba(255,255,255,0.05);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,0.2);border-radius:12px;overflow:hidden;transition:all 0.3s ease;margin-bottom:2rem}.blog-post:hover{transform:translateY(-5px);box-shadow:0 0 5px rgba(0,255,136,0.3),0 0 10px rgba(0,255,136,0.24),0 0 15px rgba(0,255,136,0.18),0 0 20px rgba(0,255,136,0.12)}.blog-post .post-image{height:200px;overflow:hidden}.blog-post .post-image img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s ease}.blog-post .post-image:hover img{transform:scale(1.05)}.blog-post .post-content{padding:2rem}.blog-post .post-content .post-meta{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;font-size:14px;color:#888}.blog-post .post-content .post-meta .meta-item{display:flex;align-items:center;gap:.25rem}.blog-post .post-content .post-meta .meta-item i{color:#0f8}.blog-post .post-content .post-title{font-size:24px;margin-bottom:1rem}.blog-post .post-content .post-title a{color:cyan}.blog-post .post-content .post-title a:hover{color:#0f8;text-shadow:0 0 10px rgba(0,255,136,0.5)}.blog-post .post-content .post-excerpt{color:#ccc;line-height:1.6;margin-bottom:1.5rem}.blog-post .post-content .post-tags{display:flex;flex-wrap:wrap;gap:.5rem}.blog-post .post-content .post-tags .tag{background:rgba(0,255,255,0.1);color:cyan;padding:.25rem .5rem;border-radius:4px;font-size:14px;border:1px solid rgba(0,255,255,0.3);transition:all 0.15s ease}.blog-post .post-content .post-tags .tag:hover{background:cyan;color:#0a0a0a}.profile-card{background:rgba(42,42,42,0.8);background:rgba(255,255,255,0.05);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.2);border-radius:12px;padding:3rem;text-align:center;transition:all 0.3s ease}.profile-card:hover{transform:translateY(-5px);box-shadow:0 0 5px rgba(0,255,136,0.3),0 0 10px rgba(0,255,136,0.24),0 0 15px rgba(0,255,136,0.18),0 0 20px rgba(0,255,136,0.12)}.profile-card .profile-avatar{width:120px;height:120px;border-radius:50%;margin:0 auto 1.5rem;border:3px solid #0f8;overflow:hidden;box-shadow:0 0 5px rgba(0,255,136,0.3),0 0 10px rgba(0,255,136,0.24),0 0 15px rgba(0,255,136,0.18),0 0 20px rgba(0,255,136,0.12)}.profile-card .profile-avatar img{width:100%;height:100%;object-fit:cover}.profile-card .profile-name{font-size:24px;color:cyan;margin-bottom:.5rem}.profile-card .profile-role{color:#0f8;font-family:"JetBrains Mono","Fira Code",monospace;text-transform:uppercase;font-size:14px;letter-spacing:1px;margin-bottom:1.5rem}.profile-card .profile-bio{color:#ccc;margin-bottom:2rem;line-height:1.6}.profile-card .profile-social{display:flex;justify-content:center;gap:1rem}.profile-card .profile-social a{width:40px;height:40px;background:rgba(26,26,26,0.8);background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#0f8;transition:all 0.15s ease}.profile-card .profile-social a:hover{background:#0f8;color:#0a0a0a;transform:scale(1.1);box-shadow:0 0 5px rgba(0,255,136,0.5),0 0 10px rgba(0,255,136,0.4),0 0 15px rgba(0,255,136,0.3),0 0 20px rgba(0,255,136,0.2)}.search-container{background:rgba(42,42,42,0.8);background:rgba(255,255,255,0.05);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,0.2);border-radius:12px;padding:2rem;margin-bottom:3rem}.search-container .search-form{display:flex;gap:1rem;margin-bottom:1.5rem}.search-container .search-form .form-control{flex:1}.search-container .search-form .btn{white-space:nowrap}.search-container .filter-tags{display:flex;flex-wrap:wrap;gap:.5rem}.search-container .filter-tags .filter-tag{background:rgba(0,255,255,0.1);color:cyan;padding:.5rem 1rem;border-radius:8px;border:1px solid rgba(0,255,255,0.3);cursor:pointer;transition:all 0.15s ease;font-size:14px}.search-container .filter-tags .filter-tag:hover,.search-container .filter-tags .filter-tag.active{background:cyan;color:#0a0a0a;box-shadow:0 0 5px rgba(0,255,255,0.3),0 0 10px rgba(0,255,255,0.24),0 0 15px rgba(0,255,255,0.18),0 0 20px rgba(0,255,255,0.12)}.pagination{display:flex;justify-content:center;gap:.5rem;margin-top:3rem}.pagination .page-link{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:rgba(42,42,42,0.8);background:rgba(255,255,255,0.05);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.2);border:1px solid rgba(0,255,136,0.3);border-radius:8px;color:#ccc;text-decoration:none;transition:all 0.15s ease}.pagination .page-link:hover,.pagination .page-link.active{background:#0f8;color:#0a0a0a;border-color:#0f8;box-shadow:0 0 5px rgba(0,255,136,0.3),0 0 10px rgba(0,255,136,0.24),0 0 15px rgba(0,255,136,0.18),0 0 20px rgba(0,255,136,0.12)}.loading-spinner{display:inline-block;width:40px;height:40px;border:3px solid rgba(0,255,136,0.3);border-radius:50%;border-top-color:#0f8;animation:spin 1s ease-in-out infinite;margin:0 auto}@keyframes spin{to{transform:rotate(360deg)}}.modal-content{background:rgba(26,26,26,0.95);background:rgba(255,255,255,0.1);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.2);border:1px solid rgba(0,255,136,0.3);border-radius:12px;color:#fff}.modal-header{border-bottom:1px solid rgba(0,255,136,0.3);padding:2rem}.modal-header .modal-title{color:cyan;font-family:"JetBrains Mono","Fira Code",monospace}.modal-header .btn-close{background:transparent;border:none;color:#ccc;font-size:24px}.modal-header .btn-close:hover{color:#f44}.modal-body{padding:2rem;color:#ccc}.modal-footer{border-top:1px solid rgba(0,255,136,0.3);padding:2rem}.modal-footer .btn+.btn{margin-left:1rem}.alert{padding:1.5rem;border-radius:8px;margin-bottom:1.5rem;border:1px solid}.alert.alert-success{background:rgba(0,255,136,0.1);border-color:#0f8;color:#0f8}.alert.alert-error{background:rgba(255,68,68,0.1);border-color:#f44;color:#f44}.alert.alert-info{background:rgba(0,255,255,0.1);border-color:cyan;color:cyan}@media (min-width: 768px){.portfolio-item{display:flex}.portfolio-item .portfolio-image{flex:0 0 40%}.portfolio-item .portfolio-content{flex:1;display:flex;flex-direction:column;justify-content:center}.search-form{flex-direction:row}.search-form .form-control{flex:1}}.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}@media (min-width: 768px){.container{padding:0 2rem}}@media (min-width: 992px){.container{padding:0 3rem}}.container-fluid{width:100%;padding:0 1.5rem}@media (min-width: 768px){.container-fluid{padding:0 2rem}}.row{display:flex;flex-wrap:wrap;margin:-1rem}.row .col{flex:1;padding:0 1rem;margin-bottom:2rem}.row .col-1{flex:0 0 8.333%}.row .col-2{flex:0 0 16.667%}.row .col-3{flex:0 0 25%}.row .col-4{flex:0 0 33.333%}.row .col-6{flex:0 0 50%}.row .col-8{flex:0 0 66.667%}.row .col-9{flex:0 0 75%}.row .col-12{flex:0 0 100%}.d-flex{display:flex}.d-inline-flex{display:inline-flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.align-start{align-items:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-1{flex:1}.flex-grow-1{flex-grow:1}.flex-shrink-0{flex-shrink:0}.m-xs{margin:.25rem}.mt-xs{margin-top:.25rem}.mr-xs{margin-right:.25rem}.mb-xs{margin-bottom:.25rem}.ml-xs{margin-left:.25rem}.mx-xs{margin-left:.25rem;margin-right:.25rem}.my-xs{margin-top:.25rem;margin-bottom:.25rem}.m-sm{margin:.5rem}.mt-sm{margin-top:.5rem}.mr-sm{margin-right:.5rem}.mb-sm{margin-bottom:.5rem}.ml-sm{margin-left:.5rem}.mx-sm{margin-left:.5rem;margin-right:.5rem}.my-sm{margin-top:.5rem;margin-bottom:.5rem}.m-md{margin:1rem}.mt-md{margin-top:1rem}.mr-md{margin-right:1rem}.mb-md{margin-bottom:1rem}.ml-md{margin-left:1rem}.mx-md{margin-left:1rem;margin-right:1rem}.my-md{margin-top:1rem;margin-bottom:1rem}.m-lg{margin:1.5rem}.mt-lg{margin-top:1.5rem}.mr-lg{margin-right:1.5rem}.mb-lg{margin-bottom:1.5rem}.ml-lg{margin-left:1.5rem}.mx-lg{margin-left:1.5rem;margin-right:1.5rem}.my-lg{margin-top:1.5rem;margin-bottom:1.5rem}.m-xl{margin:2rem}.mt-xl{margin-top:2rem}.mr-xl{margin-right:2rem}.mb-xl{margin-bottom:2rem}.ml-xl{margin-left:2rem}.mx-xl{margin-left:2rem;margin-right:2rem}.my-xl{margin-top:2rem;margin-bottom:2rem}.m-2xl{margin:3rem}.mt-2xl{margin-top:3rem}.mr-2xl{margin-right:3rem}.mb-2xl{margin-bottom:3rem}.ml-2xl{margin-left:3rem}.mx-2xl{margin-left:3rem;margin-right:3rem}.my-2xl{margin-top:3rem;margin-bottom:3rem}.m-3xl{margin:4rem}.mt-3xl{margin-top:4rem}.mr-3xl{margin-right:4rem}.mb-3xl{margin-bottom:4rem}.ml-3xl{margin-left:4rem}.mx-3xl{margin-left:4rem;margin-right:4rem}.my-3xl{margin-top:4rem;margin-bottom:4rem}.p-xs{padding:.25rem}.pt-xs{padding-top:.25rem}.pr-xs{padding-right:.25rem}.pb-xs{padding-bottom:.25rem}.pl-xs{padding-left:.25rem}.px-xs{padding-left:.25rem;padding-right:.25rem}.py-xs{padding-top:.25rem;padding-bottom:.25rem}.p-sm{padding:.5rem}.pt-sm{padding-top:.5rem}.pr-sm{padding-right:.5rem}.pb-sm{padding-bottom:.5rem}.pl-sm{padding-left:.5rem}.px-sm{padding-left:.5rem;padding-right:.5rem}.py-sm{padding-top:.5rem;padding-bottom:.5rem}.p-md{padding:1rem}.pt-md{padding-top:1rem}.pr-md{padding-right:1rem}.pb-md{padding-bottom:1rem}.pl-md{padding-left:1rem}.px-md{padding-left:1rem;padding-right:1rem}.py-md{padding-top:1rem;padding-bottom:1rem}.p-lg{padding:1.5rem}.pt-lg{padding-top:1.5rem}.pr-lg{padding-right:1.5rem}.pb-lg{padding-bottom:1.5rem}.pl-lg{padding-left:1.5rem}.px-lg{padding-left:1.5rem;padding-right:1.5rem}.py-lg{padding-top:1.5rem;padding-bottom:1.5rem}.p-xl{padding:2rem}.pt-xl{padding-top:2rem}.pr-xl{padding-right:2rem}.pb-xl{padding-bottom:2rem}.pl-xl{padding-left:2rem}.px-xl{padding-left:2rem;padding-right:2rem}.py-xl{padding-top:2rem;padding-bottom:2rem}.p-2xl{padding:3rem}.pt-2xl{padding-top:3rem}.pr-2xl{padding-right:3rem}.pb-2xl{padding-bottom:3rem}.pl-2xl{padding-left:3rem}.px-2xl{padding-left:3rem;padding-right:3rem}.py-2xl{padding-top:3rem;padding-bottom:3rem}.p-3xl{padding:4rem}.pt-3xl{padding-top:4rem}.pr-3xl{padding-right:4rem}.pb-3xl{padding-bottom:4rem}.pl-3xl{padding-left:4rem}.px-3xl{padding-left:4rem;padding-right:4rem}.py-3xl{padding-top:4rem;padding-bottom:4rem}.d-none{display:none}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}@media (min-width: 768px){.d-md-none{display:none}.d-md-block{display:block}.d-md-flex{display:flex}}@media (min-width: 992px){.d-lg-none{display:none}.d-lg-block{display:block}.d-lg-flex{display:flex}}.position-static{position:static}.position-relative{position:relative}.position-absolute{position:absolute}.position-fixed{position:fixed}.position-sticky{position:sticky}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.text-primary{color:#fff}.text-secondary{color:#ccc}.text-muted{color:#888}.text-neon-green{color:#0f8}.text-neon-cyan{color:cyan}.text-neon-red{color:#f44}.bg-primary{background-color:#0a0a0a}.bg-secondary{background-color:#1a1a1a}.bg-tertiary{background-color:#2a2a2a}.bg-neon-green{background-color:#0f8}.bg-neon-cyan{background-color:cyan}.rounded{border-radius:8px}.rounded-sm{border-radius:4px}.rounded-lg{border-radius:12px}.rounded-xl{border-radius:16px}.rounded-full{border-radius:50%}.shadow-sm{box-shadow:0 2px 4px rgba(0,255,136,0.1)}.shadow-md{box-shadow:0 4px 8px rgba(0,255,136,0.15)}.shadow-lg{box-shadow:0 8px 16px rgba(0,255,136,0.2)}.shadow-glow{box-shadow:0 0 5px rgba(0,255,136,0.5),0 0 10px rgba(0,255,136,0.4),0 0 15px rgba(0,255,136,0.3),0 0 20px rgba(0,255,136,0.2)}.w-100{width:100%}.w-50{width:50%}.w-25{width:25%}.h-100{height:100%}.h-50{height:50%}.h-25{height:25%}.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.overflow-scroll{overflow:scroll}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.cyber-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));gap:1.5rem;gap:2rem}.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(400px, 1fr));gap:1.5rem;gap:2rem}.blog-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));gap:1.5rem;gap:2rem}.section-grid{display:grid;gap:4rem}.section-grid.section-2-col{grid-template-columns:1fr 1fr}@media (min-width: 768px){.section-grid.section-2-col{grid-template-columns:1fr}}.section-grid.section-3-col{grid-template-columns:repeat(3, 1fr)}@media (min-width: 992px){.section-grid.section-3-col{grid-template-columns:1fr}}@media (min-width: 768px){.section-grid.section-3-col{grid-template-columns:repeat(2, 1fr)}}.hero-grid{display:grid;place-items:center;min-height:100vh;text-align:center}.card-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:1.5rem;gap:1.5rem}.card-row{display:flex;gap:1.5rem;overflow-x:auto;padding-bottom:1rem}.card-row::-webkit-scrollbar{height:6px}.card-row::-webkit-scrollbar-track{background:rgba(42,42,42,0.5);border-radius:50%}.card-row::-webkit-scrollbar-thumb{background:#0f8;border-radius:50%}.card-row::-webkit-scrollbar-thumb:hover{background:cyan}.nav-grid{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2rem}.nav-grid .nav-brand{grid-column:1}.nav-grid .nav-menu{grid-column:2;justify-self:center}.nav-grid .nav-actions{grid-column:3;justify-self:end}.footer-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:3rem}@media (min-width: 768px){.row{margin:-1.5rem}.row .col{padding:0 1.5rem}.cyber-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:1.5rem}.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));gap:1.5rem}}@media (min-width: 992px){.cyber-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(400px, 1fr));gap:1.5rem}.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(450px, 1fr));gap:1.5rem}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#1a1a1a}::-webkit-scrollbar-thumb{background:#0f8;border-radius:50%}::-webkit-scrollbar-thumb:hover{background:cyan}::selection{background:rgba(0,255,136,0.3);color:#fff}::-moz-selection{background:rgba(0,255,136,0.3);color:#fff}*:focus{outline:2px solid #0f8;outline-offset:2px}@media print{body{background:white !important;color:black !important}.navbar,.back-to-top,.btn{display:none !important}}@media (prefers-contrast: high){:root{--neon-green: #00ff00;--neon-cyan: #00ffff;--text-primary: #ffffff;--text-secondary: #cccccc}}@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}

/* ============================================================
   HOME PAGE SECTIONS
   ============================================================ */

/* --- Body overflow fix --- */
body { overflow: auto; }

/* --- Slideshow Hero --- */
.hero-slideshow { position: relative; }
.slideshow-bg { position: absolute; inset: 0; z-index: 0; }
.slideshow-bg .slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.5s ease-in-out;
}
.slideshow-bg .slide.active { opacity: 1; }
.slideshow-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: rgba(5, 5, 5, 0.95);
}
.hero-slideshow .hero-content { z-index: 2; }
.hero-subtitle {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  color: #0f8 !important; font-size: 20px !important;
  letter-spacing: 1px; text-transform: uppercase;
}
.slide-indicators {
  position: absolute; bottom: 2rem; left: 50%;
  transform: translateX(-50%); z-index: 3;
  display: flex; gap: 0.75rem;
}
.slide-indicators .indicator {
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255,255,255,0.3); cursor: pointer;
  transition: all 0.3s ease; border: 1px solid rgba(0,255,136,0.3);
}
.slide-indicators .indicator.active {
  background: #0f8;
  box-shadow: 0 0 8px rgba(0,255,136,0.6);
}

/* --- Section base --- */
.home-section {
  padding: 5rem 0; position: relative; overflow: visible;
}
.home-section-alt {
  background: rgba(255,255,255,0.02);
  border-top: 1px solid rgba(0,255,136,0.1);
  border-bottom: 1px solid rgba(0,255,136,0.1);
}
.section-header {
  text-align: center; margin-bottom: 3.5rem;
}
.section-heading {
  font-size: 32px; color: #fff; margin-bottom: 0.75rem;
  display: inline-block;
}
.heading-line {
  width: 80px; height: 3px; margin: 0 auto 1.5rem;
  background: linear-gradient(90deg, #0f8, cyan);
  border-radius: 2px;
}
.section-desc {
  max-width: 650px; margin: 0 auto; color: #aaa; font-size: 16px;
}

/* --- About Section --- */
.about-lead {
  font-size: 18px; color: #ddd; line-height: 1.8;
  max-width: 800px; margin: 0 auto 1.5rem; text-align: center;
}
.about-content > p {
  max-width: 800px; margin: 0 auto 2rem; text-align: center;
  color: #aaa; line-height: 1.7;
}
.about-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem; margin-top: 2rem;
}
.highlight-card {
  display: flex; align-items: center; gap: 1rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(0,255,136,0.15);
  border-radius: 12px; padding: 1.25rem 1.5rem;
  transition: all 0.3s ease;
}
.highlight-card:hover {
  border-color: rgba(0,255,136,0.4);
  transform: translateY(-3px);
  box-shadow: 0 0 15px rgba(0,255,136,0.15);
}
.highlight-icon {
  width: 48px; height: 48px; min-width: 48px;
  background: rgba(0,255,136,0.1); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #0f8; font-size: 20px;
}
.highlight-text strong {
  display: block; color: cyan;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px; text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 0.2rem;
}
.highlight-text span { color: #ccc; font-size: 15px; }

/* --- Skills Section --- */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}
.skill-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(0,255,136,0.1);
  border-radius: 10px; padding: 1.25rem 1.5rem;
  transition: all 0.3s ease;
}
.skill-item:hover {
  border-color: rgba(0,255,136,0.3);
  box-shadow: 0 0 10px rgba(0,255,136,0.1);
}
.skill-header {
  display: flex; justify-content: space-between;
  align-items: center; margin-bottom: 0.75rem;
}
.skill-name {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px; color: #fff; text-transform: uppercase;
  letter-spacing: 0.5px;
}
.skill-level {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px; color: #0f8; text-transform: uppercase;
  background: rgba(0,255,136,0.1); padding: 0.2rem 0.6rem;
  border-radius: 4px; border: 1px solid rgba(0,255,136,0.2);
}
.skill-bar {
  height: 6px; background: rgba(255,255,255,0.08);
  border-radius: 3px; overflow: hidden;
}
.skill-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #0f8, cyan);
  border-radius: 3px;
  transition: width 1.2s ease-out;
}

/* --- Resume Section --- */
.resume-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}
@media (max-width: 768px) {
  .resume-grid { grid-template-columns: 1fr; }
}
.resume-col-title {
  font-size: 20px; color: cyan; margin-bottom: 1.25rem;
  margin-top: 2rem; padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(0,255,255,0.2);
}
.resume-col-title:first-child { margin-top: 0; }
.resume-col-title i { margin-right: 0.5rem; color: #0f8; }
.resume-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(0,255,136,0.1);
  border-left: 3px solid #0f8;
  border-radius: 0 10px 10px 0;
  padding: 1.5rem; margin-bottom: 1.25rem;
  transition: all 0.3s ease;
}
.resume-card:hover {
  border-left-color: cyan;
  box-shadow: 0 0 12px rgba(0,255,136,0.1);
  transform: translateX(4px);
}
.resume-card h4 {
  font-size: 16px; color: #fff; margin-bottom: 0.5rem;
  text-transform: none; letter-spacing: 0;
}
.resume-date {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px; color: #0f8;
  background: rgba(0,255,136,0.1); padding: 0.2rem 0.7rem;
  border-radius: 4px; margin-bottom: 0.75rem;
}
.resume-place { color: #aaa; margin-bottom: 0.5rem; }
.resume-card ul {
  list-style: none; padding: 0; margin: 0.5rem 0 0;
}
.resume-card ul li {
  padding: 0.3rem 0 0.3rem 1.2rem; color: #ccc;
  position: relative; font-size: 14px; line-height: 1.6;
}
.resume-card ul li::before {
  content: "▹"; position: absolute; left: 0; color: #0f8;
}
.resume-card ul li i { color: #0f8; margin-right: 0.5rem; }

/* --- Services Section --- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.service-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(0,255,136,0.1);
  border-radius: 12px; padding: 2rem;
  text-align: center; transition: all 0.3s ease;
}
.service-card:hover {
  border-color: rgba(0,255,136,0.4);
  transform: translateY(-5px);
  box-shadow: 0 0 20px rgba(0,255,136,0.15);
}
.service-icon {
  width: 64px; height: 64px; margin: 0 auto 1.25rem;
  background: rgba(0,255,136,0.1); border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #0f8;
  transition: all 0.3s ease;
}
.service-card:hover .service-icon {
  background: #0f8; color: #0a0a0a;
  box-shadow: 0 0 15px rgba(0,255,136,0.5);
}
.service-card h4 {
  font-size: 16px; margin-bottom: 0.75rem; color: cyan;
  text-transform: none; letter-spacing: 0;
}
.service-card p { color: #aaa; font-size: 14px; margin: 0; line-height: 1.6; }

/* --- Contact Section --- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 3rem; align-items: start;
}
@media (max-width: 768px) {
  .contact-grid { grid-template-columns: 1fr; }
}
.contact-item {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.5rem;
}
.contact-item.card-style {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(0,255,136,0.15);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  transition: all 0.3s ease;
}
.contact-item.card-style:hover {
  border-color: rgba(0,255,136,0.4);
  transform: translateY(-3px);
  box-shadow: 0 0 15px rgba(0,255,136,0.15);
}
.contact-submit-btn {
  padding: 1.25rem;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  text-transform: none;
  letter-spacing: 0;
  border-color: cyan;
  color: cyan;
}
.contact-submit-btn:hover {
  background: cyan;
  color: #0a0a0a;
}
.contact-icon {
  width: 50px; height: 50px; min-width: 50px;
  background: rgba(0,255,136,0.1); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #0f8; font-size: 20px;
}
.contact-item h4 {
  font-size: 14px; color: cyan; margin-bottom: 0.2rem;
  text-transform: uppercase; letter-spacing: 1px;
}
.contact-item p { margin: 0; color: #ccc; }
.contact-form {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(0,255,136,0.15);
  border-radius: 12px; padding: 2rem;
}
.form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
}
.contact-form label {
  display: block; margin-bottom: 0.4rem;
  font-family: "JetBrains Mono", monospace;
  color: #0f8; text-transform: uppercase;
  font-size: 12px; letter-spacing: 1px;
}

/* --- Scroll Animations --- */
.fade-in {
  opacity: 0; transform: translateY(25px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.fade-in.visible {
  opacity: 1; transform: translateY(0);
}

/* --- Dropdown Menu Fix --- */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  display: none; position: absolute; top: 100%; right: 0;
  z-index: 1000; min-width: 12rem; padding: 0.5rem 0; margin: 0.5rem 0 0;
  background: rgba(26,26,26,0.95); border: 1px solid rgba(0,255,136,0.3);
  border-radius: 8px; box-shadow: 0 4px 12px rgba(0,255,136,0.15);
  list-style: none; backdrop-filter: blur(10px);
}
.dropdown-menu.show { display: block; }
.dropdown-item {
  display: block; width: 100%; padding: 0.6rem 1.2rem;
  font-family: "Inter", sans-serif; font-weight: 500; color: #ccc;
  text-decoration: none; transition: all 0.2s ease;
}
.dropdown-item:hover { color: #0f8; background-color: rgba(0,255,136,0.1); }
.dropdown-item i { margin-right: 8px; width: 16px; text-align: center; }
.dropdown-divider {
  height: 0; margin: 0.5rem 0; overflow: hidden;
  border-top: 1px solid rgba(0,255,136,0.2);
}

/* --- Form Field Fixes --- */
.form-control {
  width: 100%;
  display: block;
}

/* ============================================================
   MOBILE & TABLET RESPONSIVE FIXES
   ============================================================ */

/* ── Navbar: hamburger menu on mobile ─────────────────────── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px; height: 40px;
  background: rgba(0,255,136,0.08);
  border: 1px solid rgba(0,255,136,0.3);
  border-radius: 8px;
  cursor: pointer;
  gap: 5px;
  z-index: 1100;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block; width: 22px; height: 2px;
  background: #0f8; border-radius: 2px;
  transition: all 0.3s ease;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile nav drawer ─────────────────────────────────────── */
.mobile-nav-drawer {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(10,10,10,0.98);
  z-index: 1090;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
}
.mobile-nav-drawer.open { display: flex; }
.mobile-nav-drawer .nav-link {
  font-family: "JetBrains Mono", monospace;
  font-size: 18px; color: #ccc !important;
  text-transform: uppercase; letter-spacing: 2px;
  padding: 1rem 2rem; width: 100%; text-align: center;
  border: 1px solid rgba(0,255,136,0.1); border-radius: 8px;
  transition: all 0.2s ease;
}
.mobile-nav-drawer .nav-link:hover,
.mobile-nav-drawer .nav-link.active-page {
  color: #0f8 !important;
  background: rgba(0,255,136,0.08);
  border-color: rgba(0,255,136,0.3);
}
.mobile-nav-drawer .mobile-nav-close {
  position: absolute; top: 1.5rem; right: 1.5rem;
  background: none; border: none; color: #ccc;
  font-size: 28px; cursor: pointer; line-height: 1;
}
.mobile-nav-drawer .mobile-nav-close:hover { color: #f44; }

/* ── Small mobile (≤ 480px) ────────────────────────────────── */
@media (max-width: 480px) {

  /* Navbar */
  .floating-navbar {
    width: 96% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    border-radius: 16px !important;
  }
  .nav-grid {
    grid-template-columns: 1fr auto !important;
    gap: 0.5rem !important;
  }
  .nav-menu { display: none !important; }
  .nav-actions { display: none !important; }
  .nav-hamburger { display: flex !important; }

  /* Hero */
  .hero { min-height: 100svh; padding: 0 1rem; }
  .hero .hero-content { padding: 0 0.5rem; margin-top: 5rem !important; }
  .hero .hero-content h1 { font-size: clamp(26px, 8vw, 40px) !important; line-height: 1.2; }
  .hero-subtitle { font-size: 13px !important; }
  .hero .hero-content p { font-size: 14px; margin-bottom: 1.5rem; }
  .cta-buttons { display: flex; flex-direction: column; gap: 0.75rem; align-items: center; }
  .cta-buttons .btn { width: 100%; max-width: 280px; }
  .cta-buttons .btn + .btn { margin-left: 0 !important; }

  /* Sections */
  .home-section { padding: 3rem 0; }
  .section-header { margin-bottom: 2rem; }
  .section-heading { font-size: clamp(18px, 5vw, 26px) !important; }
  .section-desc { font-size: 14px; }

  /* About */
  .about-lead { font-size: 15px; line-height: 1.7; }
  .about-highlights {
    grid-template-columns: 1fr !important;
    gap: 0.75rem;
  }
  .highlight-card { padding: 1rem; }

  /* Skills */
  .skills-domains-grid { grid-template-columns: 1fr !important; gap: 1rem; }

  /* Resume */
  .resume-grid { grid-template-columns: 1fr !important; gap: 1.5rem; }
  .resume-card { padding: 1rem; }
  .resume-card h4 { font-size: 15px; }

  /* Blog grid — single column, full width */
  .blog-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem;
  }
  .blog-post .post-content { padding: 1.25rem; }
  .blog-post .post-content .post-title { font-size: 18px; }

  /* Services */
  .services-grid { grid-template-columns: 1fr !important; gap: 1rem; }
  .service-card { padding: 1.5rem; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr !important; gap: 1.5rem; }
  .form-row { grid-template-columns: 1fr !important; }
  .contact-form { padding: 1.25rem; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr !important; gap: 2rem; }
  .footer-bottom-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
  .footer-bottom-links a { margin: 0 !important; }

  /* Grids */
  .cyber-grid,
  .portfolio-grid,
  .card-grid { grid-template-columns: 1fr !important; }

  /* Section 2-col / 3-col — always single column on mobile */
  .section-grid.section-2-col,
  .section-grid.section-3-col { grid-template-columns: 1fr !important; }

  /* Buttons full-width in hero */
  .btn.btn-lg { padding: 0.85rem 1.5rem; font-size: 14px; }

  /* Back to top — keep away from edge */
  .back-to-top { bottom: 1.25rem; right: 1rem; width: 42px; height: 42px; }
}

/* ── Tablet (481px – 768px) ────────────────────────────────── */
@media (min-width: 481px) and (max-width: 768px) {

  /* Navbar */
  .floating-navbar {
    width: 95% !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  .nav-grid {
    grid-template-columns: 1fr auto !important;
    gap: 0.75rem !important;
  }
  .nav-menu { display: none !important; }
  .nav-actions { display: none !important; }
  .nav-hamburger { display: flex !important; }

  /* Hero */
  .hero .hero-content { margin-top: 5rem !important; }
  .hero .hero-content h1 { font-size: clamp(28px, 6vw, 44px) !important; }
  .hero-subtitle { font-size: 15px !important; }
  .cta-buttons { display: flex; flex-direction: column; gap: 0.75rem; align-items: center; }
  .cta-buttons .btn { width: 100%; max-width: 300px; }
  .cta-buttons .btn + .btn { margin-left: 0 !important; }

  /* Sections */
  .home-section { padding: 3.5rem 0; }
  .section-heading { font-size: clamp(20px, 4vw, 28px) !important; }

  /* About */
  .about-highlights { grid-template-columns: 1fr !important; }

  /* Skills */
  .skills-domains-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Resume */
  .resume-grid { grid-template-columns: 1fr !important; gap: 2rem; }

  /* Blog */
  .blog-grid { grid-template-columns: 1fr !important; }

  /* Services */
  .services-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr !important; gap: 2rem; }

  /* Footer */
  .footer-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 2rem; }

  /* Grids */
  .cyber-grid,
  .portfolio-grid { grid-template-columns: 1fr !important; }

  .section-grid.section-2-col,
  .section-grid.section-3-col { grid-template-columns: 1fr !important; }
}

/* ── Mid tablet (769px – 1024px) ───────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {

  /* Navbar — show links but tighter */
  .floating-navbar {
    width: 95% !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  .navbar .navbar-nav .nav-link {
    padding: 0.5rem 0.75rem !important;
    font-size: 12px !important;
  }
  .floating-navbar .navbar-brand { font-size: 16px !important; }

  /* Skills */
  .skills-domains-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Resume */
  .resume-grid { gap: 2rem; }

  /* Services */
  .services-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Blog */
  .blog-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Footer */
  .footer-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 2rem; }

  /* Fix inverted section-2-col */
  .section-grid.section-2-col { grid-template-columns: 1fr 1fr !important; }
  .section-grid.section-3-col { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Fix inverted section-grid breakpoints (desktop) ──────── */
/* The original CSS had these backwards — desktop got 1-col, mobile got 2-col */
@media (min-width: 1025px) {
  .section-grid.section-2-col { grid-template-columns: 1fr 1fr !important; }
  .section-grid.section-3-col { grid-template-columns: repeat(3, 1fr) !important; }
}