:root{
  --bg:#050816;
  --bg2:#081326;
  --panel:rgba(10,20,40,.72);
  --panel2:rgba(255,255,255,.055);
  --line:rgba(255,255,255,.11);
  --text:#f6fbff;
  --muted:#9fb0c6;
  --cyan:#48d8ff;
  --blue:#4f7cff;
  --violet:#8f64ff;
  --green:#3ef0b2;
  --orange:#ffb66b;
  --shadow:0 22px 80px rgba(0,0,0,.34);
  --radius:28px;
  --max:1180px;
  --nav:rgba(5,8,22,.68);
}

[data-theme="light"]{
  --bg:#edf4ff;
  --bg2:#f8fbff;
  --panel:rgba(255,255,255,.76);
  --panel2:rgba(16,40,80,.05);
  --line:rgba(10,35,75,.12);
  --text:#0d1a2d;
  --muted:#607087;
  --shadow:0 22px 60px rgba(44,85,140,.15);
  --nav:rgba(245,249,255,.78);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 10% 0%, rgba(72,216,255,.16), transparent 25%),
    radial-gradient(circle at 90% 10%, rgba(143,100,255,.16), transparent 27%),
    radial-gradient(circle at 75% 78%, rgba(62,240,178,.10), transparent 28%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  color:var(--text);
  line-height:1.65;
  overflow-x:hidden;
}

body:before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 90%);
}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit}
.container{width:min(var(--max),calc(100% - 40px));margin-inline:auto}

.reveal{opacity:0;transform:translateY(24px);transition:.75s ease}
.reveal.show{opacity:1;transform:none}

.topbar{
  position:sticky;top:0;z-index:1000;
  backdrop-filter:blur(18px);
  background:var(--nav);
  border-bottom:1px solid var(--line);
}
.nav{
  min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:18px
}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.2px}
.brand-mark{
  width:43px;height:43px;border-radius:15px;display:grid;place-items:center;
  color:#04111c;background:linear-gradient(135deg,var(--cyan),var(--green));
  box-shadow:0 10px 30px rgba(72,216,255,.22)
}
.nav-links{display:flex;align-items:center;gap:22px;color:var(--muted);font-size:.93rem}
.nav-links a:hover{color:var(--text)}
.nav-actions{display:flex;align-items:center;gap:10px}
.icon-btn{
  width:42px;height:42px;border-radius:13px;border:1px solid var(--line);
  background:var(--panel2);color:var(--text);cursor:pointer
}
.nav-cta{
  min-height:42px;padding:0 15px;display:inline-flex;align-items:center;
  border-radius:13px;border:1px solid rgba(72,216,255,.28);
  background:rgba(72,216,255,.07);font-weight:800
}

.hero{padding:78px 0 66px;min-height:calc(100vh - 74px);display:grid;align-items:center}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}

.status{
  display:inline-flex;align-items:center;gap:10px;padding:8px 13px;border-radius:999px;
  border:1px solid rgba(62,240,178,.24);background:rgba(62,240,178,.07);
  color:#c5ffe9;font-size:.84rem;font-weight:800;margin-bottom:22px
}
.status-dot{
  width:9px;height:9px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 7px rgba(62,240,178,.10);
  animation:pulse 1.8s infinite
}
@keyframes pulse{50%{box-shadow:0 0 0 12px rgba(62,240,178,0)}}

h1,h2,h3,p{margin-top:0}
h1{
  font-size:clamp(3.2rem,7vw,6.6rem);
  line-height:.9;letter-spacing:-.065em;margin-bottom:20px
}
.name-gradient{
  background:linear-gradient(90deg,#fff 0%,#a8eaff 35%,#b5a5ff 70%,#8affda 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.hero-role{
  font-size:clamp(1.2rem,2.2vw,1.55rem);font-weight:900;margin-bottom:12px
}
.hero-copy{max-width:720px;color:var(--muted);font-size:1.06rem;margin-bottom:28px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}
.btn{
  min-height:50px;padding:0 20px;border-radius:15px;font-weight:900;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:1px solid transparent;transition:.25s ease
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{color:#04111d;background:linear-gradient(135deg,var(--cyan),var(--green));box-shadow:0 14px 35px rgba(72,216,255,.20)}
.btn-secondary{border-color:var(--line);background:var(--panel2)}

.quick-meta{display:flex;flex-wrap:wrap;gap:10px}
.pill{
  padding:8px 11px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel2);font-size:.82rem;color:var(--muted)
}

.visual{position:relative;min-height:565px;display:grid;place-items:center}
.orbit{
  position:absolute;width:470px;height:470px;border-radius:50%;
  border:1px solid rgba(72,216,255,.18);animation:spin 18s linear infinite
}
.orbit:before,.orbit:after{
  content:"";position:absolute;width:14px;height:14px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 24px rgba(72,216,255,.7)
}
.orbit:before{top:28px;left:96px}
.orbit:after{bottom:46px;right:75px;background:var(--green)}
@keyframes spin{to{transform:rotate(360deg)}}

.portrait-shell{
  position:relative;width:min(430px,90%);padding:15px;border-radius:36px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.035));
  box-shadow:var(--shadow);backdrop-filter:blur(15px)
}
.portrait-shell img{
  width:100%;aspect-ratio:1/1.13;object-fit:cover;object-position:center top;border-radius:27px
}
.scan{
  position:absolute;left:22px;right:22px;height:2px;top:20%;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  box-shadow:0 0 18px rgba(72,216,255,.75);animation:scan 4s ease-in-out infinite
}
@keyframes scan{50%{top:78%}}
.float-a,.float-b{
  position:absolute;padding:14px 16px;border-radius:17px;border:1px solid var(--line);
  background:rgba(8,18,34,.82);backdrop-filter:blur(14px);box-shadow:var(--shadow)
}
[data-theme="light"] .float-a,[data-theme="light"] .float-b{background:rgba(255,255,255,.9)}
.float-a{left:-36px;bottom:56px}
.float-b{right:-28px;top:78px}
.float-a strong,.float-b strong{display:block}
.float-a span,.float-b span{font-size:.82rem;color:var(--muted)}

.section{padding:94px 0;position:relative}
.section-head{
  display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:34px
}
.kicker{font-size:.78rem;letter-spacing:.19em;text-transform:uppercase;color:var(--cyan);font-weight:900;margin-bottom:9px}
h2{font-size:clamp(2.2rem,5vw,3.8rem);letter-spacing:-.045em;line-height:1.02;margin-bottom:0}
.section-copy{max-width:650px;color:var(--muted);margin-bottom:0}

.card{
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,var(--panel),rgba(255,255,255,.028));
  box-shadow:var(--shadow);backdrop-filter:blur(15px)
}

.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.about-card{padding:30px}
.about-card p{color:var(--muted);margin-bottom:0}
.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.mini-stat{padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--panel2)}
.mini-stat strong{display:block;font-size:1.18rem}
.mini-stat span{color:var(--muted);font-size:.8rem}

.skills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.skill{padding:24px}
.skill-icon{
  width:46px;height:46px;border-radius:15px;display:grid;place-items:center;margin-bottom:17px;
  background:linear-gradient(135deg,rgba(72,216,255,.18),rgba(143,100,255,.18));
  border:1px solid var(--line);font-weight:900
}
.skill h3{margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:7px 10px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel2);font-size:.81rem;color:var(--muted)
}

.terminal{
  overflow:hidden;padding:0
}
.term-head{
  display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.035)
}
.dots{display:flex;gap:7px}
.dots i{width:10px;height:10px;border-radius:50%;display:block}
.dots i:nth-child(1){background:#ff6f74}.dots i:nth-child(2){background:#ffcb63}.dots i:nth-child(3){background:#62e887}
.term-title{font-size:.8rem;color:var(--muted)}
.term-body{
  min-height:250px;padding:20px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:#bfefff;font-size:.92rem
}
.prompt{color:var(--green)}
.cursor{display:inline-block;width:8px;height:1em;background:var(--cyan);vertical-align:-2px;animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.topology{padding:26px;overflow:hidden}
.net-grid{display:grid;grid-template-columns:1fr .9fr;gap:22px;align-items:center}
.topology svg{width:100%;height:auto;overflow:visible}
.node{fill:rgba(72,216,255,.10);stroke:rgba(72,216,255,.72);stroke-width:2}
.node.green{fill:rgba(62,240,178,.09);stroke:rgba(62,240,178,.72)}
.node.violet{fill:rgba(143,100,255,.09);stroke:rgba(143,100,255,.72)}
.link{stroke:rgba(255,255,255,.24);stroke-width:2;stroke-dasharray:7 7;animation:dash 10s linear infinite}
@keyframes dash{to{stroke-dashoffset:-140}}
.net-label {
    fill: var(--text);
    font-size: 12px;
    font-weight: 800;

    /* Keep labels centered inside the circles */
    text-anchor: middle;
    dominant-baseline: middle;

    pointer-events: none;
}
.timeline{position:relative;display:grid;gap:22px}
.timeline:before{
  content:"";position:absolute;left:16px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(var(--cyan),var(--violet),var(--green))
}
.job{margin-left:54px;padding:28px;position:relative}
.job:before{
  content:"";position:absolute;left:-46px;top:33px;width:15px;height:15px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 0 7px rgba(72,216,255,.10)
}
.job:nth-child(2):before{background:var(--green)}
.job-top{display:flex;justify-content:space-between;gap:18px;align-items:start;margin-bottom:16px}
.job h3{font-size:1.3rem;margin-bottom:3px}
.company-role{color:var(--cyan);font-weight:900}
.period{
  padding:7px 10px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel2);font-size:.8rem;color:var(--muted);white-space:nowrap
}
.role-label{margin:18px 0 8px;font-weight:900}
.bullets{padding-left:20px;margin:0;color:var(--muted)}
.bullets li{margin:5px 0}


/* ===== WORK HISTORY / PHOTO GALLERY ===== */
.history-head-actions{
  display:flex;align-items:end;justify-content:flex-end;gap:18px;flex-wrap:wrap;
}
.history-add-btn{cursor:pointer;white-space:nowrap}
.history-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
}
.history-empty{grid-column:1/-1;padding:34px;text-align:center}
.history-empty-icon{
  width:58px;height:58px;margin:0 auto 16px;border-radius:18px;display:grid;place-items:center;
  font-size:1.7rem;font-weight:800;color:var(--cyan);
  border:1px dashed rgba(72,216,255,.38);background:rgba(72,216,255,.07);
}
.history-empty h3{margin-bottom:7px}
.history-empty p{color:var(--muted);margin-bottom:0}

.history-card{
  overflow:hidden;position:relative;transition:transform .25s ease,border-color .25s ease;
}
.history-card:hover{transform:translateY(-4px);border-color:rgba(72,216,255,.30)}
.history-photo{
  position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--panel2);cursor:zoom-in;
}
.history-photo img{
  width:100%;height:100%;object-fit:cover;transition:transform .35s ease;
}
.history-card:hover .history-photo img{transform:scale(1.035)}
.history-photo:after{
  content:"View Photo";position:absolute;right:12px;bottom:12px;padding:6px 9px;border-radius:999px;
  background:rgba(5,8,22,.72);color:#fff;font-size:.72rem;font-weight:800;
  opacity:0;transform:translateY(5px);transition:.2s ease;
}
.history-photo:hover:after{opacity:1;transform:none}
.history-content{padding:21px}
.history-date{
  display:inline-flex;margin-bottom:10px;color:var(--cyan);font-size:.78rem;font-weight:900;letter-spacing:.04em;
}
.history-content h3{margin-bottom:4px}
.history-location{color:var(--green);font-size:.84rem;font-weight:800;margin-bottom:10px}
.history-description{color:var(--muted);margin-bottom:0;white-space:pre-line}
.history-delete{
  position:absolute;top:12px;left:12px;width:34px;height:34px;border:1px solid rgba(255,255,255,.13);
  border-radius:11px;background:rgba(5,8,22,.74);color:#fff;display:grid;place-items:center;
  cursor:pointer;z-index:2;opacity:.15;transition:.2s ease;
}
.history-card:hover .history-delete{opacity:1}
.history-delete:hover{background:rgba(255,80,95,.90);border-color:transparent}

/* Add work history modal */
.history-modal{
  position:fixed;inset:0;z-index:2000;display:none;place-items:center;padding:24px;
}
.history-modal.open{display:grid}
.history-modal-backdrop{
  position:absolute;inset:0;background:rgba(1,5,15,.76);backdrop-filter:blur(8px);
}
.history-modal-panel{
  position:relative;z-index:1;width:min(700px,100%);max-height:min(90vh,820px);overflow:auto;padding:30px;
}
.history-close{
  position:absolute;top:15px;right:15px;width:39px;height:39px;border-radius:12px;border:1px solid var(--line);
  background:var(--panel2);color:var(--text);cursor:pointer;font-size:1.5rem;
}
.history-form{display:grid;gap:17px;margin-top:22px}
.history-form label{display:grid;gap:7px;color:var(--muted);font-size:.86rem;font-weight:800}
.history-form input,.history-form textarea{
  width:100%;color:var(--text);background:var(--panel2);border:1px solid var(--line);
  border-radius:14px;padding:13px 14px;outline:none;resize:vertical;
}
.history-form input:focus,.history-form textarea:focus{
  border-color:rgba(72,216,255,.48);box-shadow:0 0 0 3px rgba(72,216,255,.08);
}
.history-form-row{display:grid;grid-template-columns:1fr .7fr;gap:14px}
.history-upload input{position:absolute;opacity:0;pointer-events:none}
.history-upload-box{
  min-height:105px;border:1px dashed rgba(72,216,255,.35);border-radius:17px;
  display:grid;place-items:center;align-content:center;text-align:center;padding:17px;
  background:rgba(72,216,255,.045);cursor:pointer;transition:.2s ease;
}
.history-upload-box:hover{border-color:rgba(72,216,255,.70);background:rgba(72,216,255,.075)}
.history-upload-box strong{color:var(--text)}
.history-upload-box small{font-weight:500;color:var(--muted)}
.history-photo-preview:empty{display:none}
.history-photo-preview{
  overflow:hidden;border-radius:17px;border:1px solid var(--line);max-height:280px;
}
.history-photo-preview img{width:100%;max-height:280px;object-fit:cover}
.history-form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
.history-form-actions button{cursor:pointer}

/* Photo lightbox */
.history-lightbox{
  position:fixed;inset:0;z-index:2100;display:none;place-items:center;padding:30px;
}
.history-lightbox.open{display:grid}
.history-lightbox-backdrop{
  position:absolute;inset:0;background:rgba(0,3,10,.91);backdrop-filter:blur(7px);
}
.history-lightbox img{
  position:relative;z-index:1;max-width:min(1200px,94vw);max-height:88vh;border-radius:20px;
  box-shadow:0 28px 90px rgba(0,0,0,.5);
}
.history-lightbox-close{
  position:fixed;z-index:2;top:22px;right:22px;width:44px;height:44px;border-radius:14px;
  border:1px solid rgba(255,255,255,.15);background:rgba(10,20,40,.78);color:#fff;
  font-size:1.7rem;cursor:pointer;
}

@media (max-width:950px){
  .history-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .history-head-actions{justify-content:flex-start;margin-top:14px}
}
@media (max-width:640px){
  .history-grid{grid-template-columns:1fr}
  .history-form-row{grid-template-columns:1fr}
  .history-modal{padding:12px}
  .history-modal-panel{padding:23px}
  .history-form-actions{flex-direction:column-reverse}
  .history-form-actions .btn{width:100%}
  .history-delete{opacity:.8}
}

.history-form-message{
  min-height:22px;
  font-size:.84rem;
  color:var(--muted);
}
.history-form-message.error{color:#ff8b94}
.history-form-message.success{color:var(--green)}

.projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.project{padding:24px;position:relative;overflow:hidden}
.project:after{
  content:"";position:absolute;width:130px;height:130px;border-radius:50%;
  right:-45px;top:-45px;background:radial-gradient(circle,rgba(72,216,255,.17),transparent 68%)
}
.project:nth-child(2):after{background:radial-gradient(circle,rgba(143,100,255,.17),transparent 68%)}
.project:nth-child(3):after{background:radial-gradient(circle,rgba(62,240,178,.17),transparent 68%)}
.project small{color:var(--cyan);font-weight:900;text-transform:uppercase;letter-spacing:.1em}
.project p{color:var(--muted)}
.project-tags{display:flex;gap:7px;flex-wrap:wrap}

.edu-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px}
.edu{padding:28px}
.badge{
  display:inline-flex;margin-top:14px;padding:7px 10px;border-radius:999px;
  border:1px solid rgba(255,182,107,.26);background:rgba(255,182,107,.08);
  color:var(--orange);font-size:.8rem;font-weight:900
}

.contact{padding:34px;overflow:hidden;position:relative}
.contact:before{
  content:"";position:absolute;width:350px;height:350px;border-radius:50%;
  right:-120px;top:-120px;background:radial-gradient(circle,rgba(72,216,255,.16),transparent 67%)
}
.contact-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:26px}
.contact-list{display:grid;gap:12px}
.contact-item{
  padding:16px 18px;border-radius:17px;border:1px solid var(--line);
  background:var(--panel2);display:flex;justify-content:space-between;gap:15px;align-items:center
}
.contact-item small{display:block;color:var(--muted)}
.contact-item strong{word-break:break-word}
.arrow{color:var(--cyan);font-size:1.2rem}

footer{padding:34px 0 46px;border-top:1px solid var(--line);color:var(--muted)}
.footer-row{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}

@media (max-width:950px){
  .nav-links{display:none}
  .hero-grid,.net-grid,.edu-grid,.contact-grid{grid-template-columns:1fr}
  .skills,.projects{grid-template-columns:repeat(2,minmax(0,1fr))}
  .visual{min-height:500px}
  .section-head{display:block}
  .section-copy{margin-top:12px}
}
@media (max-width:640px){

    .container{
        width:min(var(--max),calc(100% - 24px));
    }

    .hero{
        padding:52px 0 36px;
    }

    h1{
        font-size:clamp(3rem,18vw,4.8rem);
    }

    .grid-2,
    .skills,
    .projects,
    .mini-stats{
        grid-template-columns:1fr;
    }

    .nav-cta{
        display:none;
    }

    .visual{
        min-height:395px;
    }

    .orbit{
        width:345px;
        height:345px;
    }

    .float-a{
        left:0;
        bottom:12px;
    }

    .float-b{
        right:0;
        top:40px;
    }

    section{
        padding:70px 0;
    }

    /* WORK EXPERIENCE TIMELINE */
    .timeline{
        position:relative;
    }

    .job{
        position:relative;
        margin-left:38px;
        padding:22px;
    }

    .job::before{
        left:-34px;
        top:27px;
    }

    .job-top{
        display:block;
    }

    .period{
        display:inline-flex;
        margin-top:10px;
    }

    .contact{
        padding:24px;
    }
}
  .skill-description {
    font-size: 13px;
    line-height: 1.6;
    color: #8c98b2;
    margin: 10px 0 16px;
    padding-left: 10px;
    border-left: 2px solid #22d3ee;
}