:root{
  --bg:#f5f7fb;--surface:#ffffff;--surface2:#eef3f8;--text:#111827;--muted:#64748b;
  --line:#dbe3ec;--blue:#2f89ff;--blue2:#1769d3;--header:rgba(255,255,255,.94);
  --shadow:0 16px 44px rgba(15,23,42,.10);--radius:12px;
}
body.dark-mode{
  --bg:#050b12;--surface:#09131d;--surface2:#07111a;--text:#f6f8fb;--muted:#b5bfca;
  --line:#34404b;--blue:#4098ff;--blue2:#1d6ed0;--header:rgba(4,10,16,.94);
  --shadow:0 18px 50px rgba(0,0,0,.30);
}
html{scroll-padding-top:82px}
body{padding-top:82px;background:var(--bg);color:var(--text);transition:background .25s,color .25s}
body,section,#main{background-color:var(--bg)}
section{color:var(--text);transition:background .25s,color .25s}
.section-bg{background:var(--surface2)!important}
.section-title h2,.content h3,.resume .resume-title,.services .title a,.contact .info h4{color:var(--text)!important}
.section-title p,.section-title h3,.content,.resume .resume-item p,.services .description,.contact .info p{color:var(--muted)!important}
.section-title h2:after{background:var(--blue)}
#main{margin-left:0!important}

/* ===== Top bar: matches the approved mockup ===== */
#header{position:fixed!important;left:0!important;right:0!important;top:0!important;bottom:auto!important;width:100%!important;height:82px!important;background:var(--header)!important;border-bottom:1px solid rgba(148,163,184,.18);padding:0 28px!important;z-index:9997;overflow:visible!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#header>.d-flex{max-width:1540px;height:100%;margin:auto;display:grid!important;grid-template-columns:minmax(250px,1fr) auto minmax(250px,1fr);align-items:center;gap:18px;flex-direction:row!important}
#header .profile{padding:0;margin:0;display:block;text-align:left;min-width:0}
#header .profile img,#header .profile .social-links{display:none!important}
#header .profile h1{margin:0;line-height:1;font-family:"Segoe Script","Brush Script MT",cursive;font-size:31px;font-weight:400;letter-spacing:.2px}
#header .profile h1 a{color:var(--text)!important}
.profile-role{margin-top:6px;font-size:11px;line-height:1;text-transform:uppercase;letter-spacing:.75px;color:var(--muted);white-space:nowrap}
#navbar{padding:0!important;display:block!important}
#navbar ul{display:flex!important;align-items:center;justify-content:center;gap:11px;margin:0;padding:0;background:transparent!important}
#navbar li{white-space:nowrap}
#navbar a,#navbar a:focus{display:flex!important;align-items:center!important;justify-content:center!important;height:82px;padding:0 13px!important;color:var(--text)!important;background:transparent!important;border:0!important;border-bottom:2px solid transparent!important;font-size:16px;font-weight:400}
#navbar a i{display:none!important}
#navbar a:hover,#navbar .active,#navbar .active:focus,#navbar li:hover>a{color:var(--blue)!important;border-bottom-color:var(--blue)!important}
#navbar li:last-child{display:none}
.theme-toggle-wrap{justify-self:end;display:flex;align-items:center}
.theme-toggle{min-height:48px;padding:8px 13px;border:1px solid rgba(148,163,184,.19);border-radius:10px;background:rgba(255,255,255,.025);color:var(--text);display:flex;align-items:center;gap:9px;cursor:pointer;font:500 13px "Open Sans",sans-serif;transition:.2s}
.theme-toggle:hover{border-color:var(--blue);transform:translateY(-1px)}
.theme-icon{font-size:20px;line-height:1}.theme-moon{font-size:18px}
.theme-track{width:43px;height:24px;padding:2px;border-radius:99px;background:#64748b;display:flex;align-items:center;transition:.25s;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.theme-knob{width:20px;height:20px;border-radius:50%;background:white;box-shadow:0 1px 5px rgba(0,0,0,.35);transition:transform .25s}
body.dark-mode .theme-track{background:linear-gradient(135deg,#337fdb,#4d9cff)}
body.dark-mode .theme-knob{transform:translateX(19px)}
body:not(.dark-mode) .theme-moon{opacity:.45}body.dark-mode .theme-sun{opacity:.72}

/* Hero keeps existing content but follows the new visual language */
#hero{height:calc(100vh - 82px)!important;min-height:640px!important;background-position:center!important;position:relative}
#hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,8,13,.82) 0%,rgba(3,8,13,.48) 45%,rgba(3,8,13,.15) 100%);z-index:1}
#hero .hero-container{position:relative;z-index:2}
#hero h1{font-size:58px;letter-spacing:-1px}#hero p{font-size:24px}

/* ===== Portfolio: exact direction of the approved mockup ===== */
#portfolio{padding:70px 0 84px!important;background:var(--bg)!important}
#portfolio .container{max-width:1540px!important;padding-left:15px;padding-right:15px}
#portfolio .section-title{padding-bottom:28px}
#portfolio .section-title h2{font-size:34px;margin-bottom:12px}
#portfolio .section-title h3{font-size:16px;line-height:1.7;font-weight:500;margin-bottom:8px}
#portfolio .section-title p{font-size:14px;line-height:1.85;max-width:1250px;margin-left:auto}
.portfolio #portfolio-flters{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;background:transparent!important;margin:0 auto 26px!important;padding:0!important}
.portfolio #portfolio-flters li{min-width:132px;height:46px;display:flex;align-items:center;justify-content:center;margin:0!important;padding:0 21px!important;border:1px solid rgba(148,163,184,.24);border-radius:8px!important;background:var(--surface);color:var(--text)!important;font-size:16px!important;font-weight:500!important;letter-spacing:.1px;box-shadow:none!important;transition:.2s}
.portfolio #portfolio-flters li:before{font-family:"bootstrap-icons";margin-right:11px;font-size:19px;line-height:1}
.portfolio #portfolio-flters li:nth-child(1):before{content:"\\f3fb"}.portfolio #portfolio-flters li:nth-child(2):before{content:"\\f3ca";color:#2dbb72}.portfolio #portfolio-flters li:nth-child(3):before{content:"</>";font-family:monospace;color:#a879ff;font-size:17px;font-weight:700}.portfolio #portfolio-flters li:nth-child(4):before{content:"\\f3ee";color:#428fff}.portfolio #portfolio-flters li:nth-child(5):before{content:"\\f2c8";color:#ff8a00}.portfolio #portfolio-flters li:nth-child(6):before{content:"\\f1f6";color:#17d3d5}.portfolio #portfolio-flters li:nth-child(7):before{content:"\\f425";color:#ffd000}
.portfolio #portfolio-flters li:hover,.portfolio #portfolio-flters li.filter-active{background:linear-gradient(135deg,#244c88,#1d3f76)!important;color:#fff!important;border-color:#4c9fff!important;box-shadow:inset 0 0 0 1px rgba(89,165,255,.18)!important}

.portfolio-container{margin-left:-6px!important;margin-right:-6px!important}
.portfolio-item{padding:6px!important;margin-bottom:12px!important}
.portfolio-feature-card .project-card{height:100%;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,#0a141e,#08111a);box-shadow:none;transition:transform .22s,border-color .22s,box-shadow .22s}
body:not(.dark-mode) .portfolio-feature-card .project-card{background:linear-gradient(180deg,#fff,#f7fafc)}
.portfolio-feature-card .project-card:hover{transform:translateY(-3px);border-color:#58708a;box-shadow:0 14px 34px rgba(0,0,0,.18)}
.project-visual{position:relative;height:350px;overflow:hidden;background:#050b12;border-bottom:1px solid rgba(148,163,184,.20)}
.project-visual img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s}
.project-card:hover .project-visual img{transform:scale(1.018)}
.project-badge{position:absolute;left:15px;top:15px;padding:6px 10px;border-radius:5px;color:#fff;font-size:13px;font-weight:700;line-height:1;box-shadow:0 5px 15px rgba(0,0,0,.35)}
.project-badge.erp{background:#b76800}.project-badge.nfc{background:#0d7778}.project-badge.shome{background:#8a7000}
.project-card-body{padding:17px 18px 19px;display:flex;flex-direction:column;flex:1}
.project-card h3{margin:0 0 3px;color:var(--text);font-size:21px;font-weight:700;line-height:1.35}
.project-subtitle{font-size:15px;font-weight:600;margin:0 0 11px}.project-subtitle.erp{color:#ff8d00}.project-subtitle.nfc{color:#12c7ca}.project-subtitle.shome{color:#ffd000}
.project-description{font-size:14px;line-height:1.65;color:var(--muted);margin:0 0 11px}
.project-features{list-style:none!important;margin:0 0 15px!important;padding:0!important}
.project-features li{display:flex;align-items:flex-start;gap:8px;padding:4px 0!important;color:var(--muted);font-size:13px;line-height:1.5}
.project-features li:before{display:none!important}.project-features i{font-size:13px;margin-top:3px;flex:0 0 auto}.project-features.erp i{color:#ff8d00}.project-features.nfc i{color:#12c7ca}.project-features.shome i{color:#ffd000}
.project-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:auto;padding-top:3px}
.project-btn{min-height:40px;padding:0 14px;display:inline-flex;align-items:center;gap:8px;border:1px solid #526170;border-radius:6px;background:transparent;color:var(--text)!important;font-size:13px;text-decoration:none!important}.project-btn:hover{border-color:var(--blue);color:var(--blue)!important}
.project-status{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:13px}.project-status.nfc{color:#15cfd1}.project-status.shome{color:#ffd000}

/* Existing project tiles are preserved, but visually fit the same grid */
.portfolio .portfolio-wrap{height:100%;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:none}
.portfolio .portfolio-wrap img{width:100%;height:350px;object-fit:cover}.portfolio .portfolio-wrap:before{background:rgba(3,9,15,.54)}

/* Dark treatment for the rest of the unchanged original content */
body.dark-mode .about .content ul i,body.dark-mode .resume .resume-item h4,body.dark-mode .resume .resume-item h5{color:var(--blue)}
body.dark-mode .skills .progress,body.dark-mode .contact .info,body.dark-mode .contact .php-email-form,body.dark-mode .services .icon-box,body.dark-mode .facts .count-box{background:var(--surface)!important;color:var(--text)!important}
body.dark-mode input,body.dark-mode textarea{background:#09131d!important;color:#fff!important;border-color:#34404b!important}
#footer{position:static!important;width:100%!important;margin:0!important;background:#03080d!important;border-top:1px solid rgba(148,163,184,.18)}

@media(max-width:1199px){
  body{padding-top:0}html{scroll-padding-top:0}
  #header{left:-300px!important;right:auto!important;top:0!important;bottom:0!important;width:300px!important;height:100vh!important;padding:0 15px!important;background:#06101a!important;overflow-y:auto!important}
  #header>.d-flex{height:auto;display:flex!important;flex-direction:column!important;gap:0;padding-top:28px}
  #header .profile{display:block!important;text-align:center!important;width:100%}#header .profile img{display:block!important;width:120px;margin:0 auto 15px}#header .profile h1{font-family:"Poppins",sans-serif;font-size:24px}#header .profile h1 a{color:#fff!important}.profile-role{text-align:center;color:#aab5c0;margin-top:7px}
  #header .profile .social-links{display:block!important}
  #navbar{width:100%;margin-top:18px}#navbar ul{display:block!important}#navbar a,#navbar a:focus{height:auto;padding:12px 15px!important;color:#a8a9b4!important;border:0!important;justify-content:flex-start!important}#navbar a i{display:inline!important;font-size:24px;padding-right:8px}#navbar li:last-child{display:block}
  .theme-toggle-wrap{width:100%;justify-content:center;margin:22px 0}.theme-toggle{color:#fff;background:#0b1824;border-color:#2c3d4e}
  .mobile-nav-active #header{left:0!important}
  #hero{height:100vh!important;min-height:620px!important}
  #portfolio .container{max-width:960px!important}.project-visual,.portfolio .portfolio-wrap img{height:300px}
}
@media(max-width:767px){
  #portfolio{padding:55px 0 65px!important}#portfolio .section-title h2{font-size:30px}
  .portfolio #portfolio-flters{gap:8px}.portfolio #portfolio-flters li{min-width:auto;height:40px;padding:0 12px!important;font-size:13px!important}.portfolio #portfolio-flters li:before{font-size:15px;margin-right:7px}
  .portfolio-item{padding:5px!important}.project-visual,.portfolio .portfolio-wrap img{height:auto;aspect-ratio:1.42/1}.project-card h3{font-size:19px}.project-card-body{padding:15px}.project-actions{gap:14px}
  #hero h1{font-size:38px}#hero p{font-size:20px}
}