*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:Inter,Arial,sans-serif;background:#07111f;color:#edf4ff;line-height:1.6}a{color:inherit;text-decoration:none}.container{width:min(1120px,92%);margin:auto}.header{position:sticky;top:0;z-index:20;background:rgba(7,17,31,.86);backdrop-filter:blur(14px);border-bottom:1px solid #18304b}.nav{height:72px;display:flex;align-items:center;justify-content:space-between}.logo{font-size:1.8rem;font-weight:800;letter-spacing:-2px}.logo span,.eyebrow,.hero h1 span{color:#56c5ff}.nav-links{display:flex;gap:28px;font-size:.92rem;font-weight:600}.nav-links a{opacity:.78;transition:.2s}.nav-links a:hover{opacity:1;color:#56c5ff}.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:1.7rem}.hero{padding:105px 0 80px;background:radial-gradient(circle at 80% 20%,#103a5b 0,transparent 32%),linear-gradient(145deg,#07111f,#0a1829)}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:65px;align-items:center}.eyebrow{font-size:.76rem;font-weight:800;letter-spacing:2px;margin-bottom:16px}.hero h1{font-size:clamp(2.7rem,6vw,5rem);line-height:1.02;letter-spacing:-3px;max-width:750px}.lead{font-size:1.1rem;color:#aebed1;max-width:650px;margin:25px 0}.hero-actions{display:flex;gap:13px;flex-wrap:wrap}.btn{display:inline-flex;padding:13px 21px;border-radius:9px;font-weight:700;border:1px solid #2b4864;transition:.2s}.btn:hover{transform:translateY(-2px)}.primary{background:#56c5ff;color:#04101c;border-color:#56c5ff}.secondary{background:#0c1b2d}.quick-stats{display:flex;gap:28px;margin-top:45px;flex-wrap:wrap}.quick-stats strong,.quick-stats small{display:block}.quick-stats strong{font-size:.9rem}.quick-stats small{color:#8194aa;font-size:.75rem}.code-window{border:1px solid #244360;border-radius:14px;overflow:hidden;box-shadow:0 25px 70px #0008;background:#081522}.window-bar{height:42px;background:#0e2032;display:flex;align-items:center;gap:7px;padding:0 14px;color:#7890a8;font-size:.75rem}.window-bar i{width:9px;height:9px;border-radius:50%;background:#35516c}.window-bar span{margin-left:8px}.code-window pre{padding:28px 24px;overflow:auto;color:#bcd0e3;font:13px/1.9 ui-monospace,SFMono-Regular,Consolas,monospace}.kw{color:#c99cff}.str{color:#77e1a4}.section{padding:100px 0}.alt{background:#0a1727;border-top:1px solid #132a42;border-bottom:1px solid #132a42}.two-col{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.section-heading h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.1;letter-spacing:-1.5px}.section-heading>p:not(.eyebrow),.section-sub{color:#9dafc3;margin-top:18px;max-width:650px}.about-text>p{color:#aebed1;margin-bottom:18px}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}.info-grid div{border-top:1px solid #23415d;padding-top:12px}.info-grid span{display:block;color:#71869c;font-size:.72rem;text-transform:uppercase;letter-spacing:1px}.info-grid strong{font-size:.88rem}.centered{text-align:center}.centered>p:not(.eyebrow){margin-left:auto;margin-right:auto}.skills-grid,.projects-grid,.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:45px}.skill-card,.project-card,.service,.contact-card{background:#0c1b2d;border:1px solid #1b3852;border-radius:13px}.skill-card{padding:28px}.skill-icon{font-weight:800;color:#56c5ff;font-size:.78rem;margin-bottom:32px}.skill-card h3{font-size:1.1rem;margin-bottom:7px}.skill-card p,.service p,.project-body p{color:#8fa3b9;font-size:.9rem}.project-card{overflow:hidden}.project-visual{height:185px;display:grid;place-items:center;background:#102d46;border-bottom:1px solid #1b4666}.project-visual span{font:800 3rem ui-monospace,monospace;color:#56c5ff}.wordpress{background:#152c35}.cproject{background:#172a30}.project-body{padding:23px}.tag{font-size:.66rem;letter-spacing:1.4px;font-weight:800;color:#56c5ff}.project-body h3{margin:8px 0}.project-links{margin-top:20px;color:#d8eaff;font-size:.83rem;font-weight:700}.services-grid{grid-template-columns:repeat(4,1fr)}.service{padding:27px}.service b{color:#56c5ff;font-size:.75rem}.service h3{margin:25px 0 8px;font-size:1rem}.cta{padding:65px 0;background:#0d253a}.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}.cta h2{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.15}.contact-card{padding:10px}.contact-card>a{display:block;padding:19px;border-bottom:1px solid #1b3852}.contact-card>a:last-of-type{border:0}.contact-card span{display:block;color:#71869c;font-size:.72rem;text-transform:uppercase;letter-spacing:1px}.contact-card strong{font-size:.92rem}.contact-note{margin:10px;padding:16px;background:#091523;border-radius:8px;color:#8fa3b9;font-size:.8rem}footer{border-top:1px solid #18304b;padding:25px 0;color:#71869c;font-size:.75rem}.footer-inner{display:flex;justify-content:space-between}.reveal{opacity:0;transform:translateY(20px);transition:.65s ease}.reveal.visible{opacity:1;transform:none}@media(max-width:850px){.hero-grid,.two-col{grid-template-columns:1fr;gap:45px}.skills-grid,.projects-grid{grid-template-columns:1fr 1fr}.services-grid{grid-template-columns:1fr 1fr}.nav-links{display:none;position:absolute;top:72px;left:0;right:0;background:#07111f;padding:20px 4%;flex-direction:column;gap:18px;border-bottom:1px solid #18304b}.nav-links.open{display:flex}.menu-toggle{display:block}.hero{padding-top:75px}.two-col{gap:35px}}@media(max-width:550px){.skills-grid,.projects-grid,.services-grid,.info-grid{grid-template-columns:1fr}.hero h1{letter-spacing:-2px}.quick-stats{gap:18px}.cta-inner,.footer-inner{flex-direction:column;align-items:flex-start}.section{padding:75px 0}}
/* Real project cards + C Programming teaching gallery */
.project-visual { position:relative; overflow:hidden; }
.portfolio-project { padding:14px; background:linear-gradient(145deg,#07111f,#0d2942); }
.mock-browser { height:100%; border:1px solid #244360; border-radius:9px; overflow:hidden; background:#081522; box-shadow:0 12px 35px #0008; }
.mock-bar { height:24px; display:flex; align-items:center; gap:5px; padding:0 9px; background:#0e2032; color:#7890a8; font-size:8px; }
.mock-bar span { width:5px; height:5px; border-radius:50%; background:#35516c; }
.mock-bar b { margin-left:5px; font-weight:500; }
.mock-content { height:calc(100% - 24px); display:flex; flex-direction:column; justify-content:center; padding:14px; background:radial-gradient(circle at 85% 20%,#103a5b 0,transparent 38%); }
.mock-content small { color:#56c5ff; font-weight:800; font-size:9px; margin-bottom:10px; }
.mock-content strong { font-size:22px; line-height:1.05; letter-spacing:-1px; }
.mock-content em { color:#8194aa; font-size:7px; font-style:normal; letter-spacing:1px; margin-top:10px; }
.project-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.project-btn { display:inline-flex; align-items:center; justify-content:center; padding:9px 12px; border:1px solid #2b4864; border-radius:7px; color:#d8eaff; background:#091827; font-size:.78rem; font-weight:700; }
.project-btn:hover { border-color:#56c5ff; color:#56c5ff; }
.primary-project { border-color:#008fd1; color:#56c5ff; }
.project-url { display:block; margin-top:13px; color:#56c5ff; font-size:.76rem; text-decoration:underline; overflow-wrap:anywhere; }
.project-note { display:block; margin-top:12px; color:#71869c; font-size:.72rem; }
.training-cover img { width:100%; height:100%; object-fit:cover; display:block; opacity:.9; }
.cv-download-btn {
    display: inline-block;
    padding: 12px 24px;
    background: #2563eb;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}
/* C Programming Hub Project */
.project-card .project-tech {
  display: inline-block;
  margin-bottom: 15px;
  color: #4db8ff;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1px;
}

.project-card h3 {
  margin-bottom: 15px;
}

.project-card p {
  line-height: 1.7;
  margin-bottom: 25px;
}

.project-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.project-url {
  display: inline-block;
  word-break: break-word;
}

/* C Programming Hub browser preview */
.project-card .mock-content small {
  color: #4db8ff;
  font-weight: 700;
  font-size: 1.2rem;
}

.project-card .mock-content strong {
  display: block;
  margin: 15px 0;
  font-size: 1.8rem;
  line-height: 1.1;
}

.project-card .mock-content em {
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  font-style: normal;
}
.cv-download-btn:hover {
    background: #1d4ed8;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
}
.photo-label { position:absolute; left:12px; bottom:10px; padding:6px 9px; border-radius:6px; background:rgba(7,17,31,.86); border:1px solid #2b4864; color:#fff; font-size:.62rem; font-weight:800; letter-spacing:1px; }
.training-highlights { display:grid; grid-template-columns:1fr 1fr; gap:5px 12px; margin:13px 0; color:#b9cadb; font-size:.72rem; }
.training-gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:14px 0; }
.gallery-thumb { padding:0; border:1px solid #1b3852; border-radius:6px; overflow:hidden; background:#081522; cursor:pointer; aspect-ratio:1/1; }
.gallery-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease; }
.gallery-thumb:hover img { transform:scale(1.07); }
.lightbox { position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:20px; }
.lightbox.open { display:flex; }
.lightbox-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.9); backdrop-filter:blur(6px); }
.lightbox-dialog { position:relative; z-index:1; width:min(1000px,94vw); height:min(90vh,820px); display:flex; align-items:center; justify-content:center; }
.lightbox-image { max-width:88%; max-height:82vh; width:auto; height:auto; object-fit:contain; border-radius:10px; box-shadow:0 20px 80px rgba(0,0,0,.55); }
.lightbox-close,.lightbox-prev,.lightbox-next { position:absolute; z-index:2; border:1px solid #35516c; background:rgba(7,17,31,.9); color:#fff; cursor:pointer; display:grid; place-items:center; }
.lightbox-close { top:4px; right:4px; width:42px; height:42px; border-radius:50%; font-size:1.7rem; }
.lightbox-prev,.lightbox-next { top:50%; transform:translateY(-50%); width:44px; height:54px; border-radius:9px; font-size:2rem; }
.lightbox-prev { left:0; } .lightbox-next { right:0; }
.lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover { border-color:#56c5ff; color:#56c5ff; }
.lightbox-caption { position:absolute; bottom:4px; left:50%; transform:translateX(-50%); padding:7px 12px; border-radius:6px; background:rgba(7,17,31,.86); color:#d8eaff; font-size:.75rem; white-space:nowrap; }
@media(max-width:850px){.real-projects{grid-template-columns:1fr 1fr}.training-highlights{font-size:.68rem}}
@media(max-width:550px){.real-projects{grid-template-columns:1fr}.training-gallery{gap:5px}.lightbox-image{max-width:92%;max-height:78vh}.lightbox-prev,.lightbox-next{width:38px;height:48px}}