:root{
  --bg:#030817;
  --bg2:#06112a;
  --panel:#09172f;
  --panel2:#0d1e3c;
  --text:#eef5ff;
  --muted:#91a1bb;
  --line:rgba(105,161,226,.18);
  --blue:#1689ff;
  --blue2:#48b7ff;
  --cyan:#38d5ff;
  --shadow:0 25px 70px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.navbar{
  background:rgba(3,8,23,.72);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.05);
  padding:14px 0;z-index:1000;
}
.navbar-brand{font-family:"Space Grotesk";font-weight:700;letter-spacing:.08em;font-size:.85rem}
.navbar-brand span{color:var(--blue);border:1px solid rgba(22,137,255,.5);padding:5px 7px;margin-right:7px;border-radius:6px}
.nav-link{color:#b9c8dc!important;font-size:.86rem}
.nav-link:hover{color:white!important}
.btn{border-radius:10px;font-weight:700;letter-spacing:.01em}
.btn-primary{background:linear-gradient(135deg,#0879ef,#21a5ff);border:1px solid rgba(94,190,255,.4);box-shadow:0 10px 30px rgba(22,137,255,.2)}
.btn-primary:hover{background:linear-gradient(135deg,#1290ff,#35b5ff);transform:translateY(-2px)}
.btn-ghost{border:1px solid rgba(123,174,230,.3);background:rgba(255,255,255,.025);color:#dce9f8}
.btn-ghost:hover{border-color:rgba(61,173,255,.75);color:#fff;background:rgba(22,137,255,.08);transform:translateY(-2px)}
.section-pad{padding:120px 0}
.section-dark{background:linear-gradient(180deg,rgba(5,16,39,.85),rgba(3,8,23,.98));border-top:1px solid rgba(91,146,214,.08);border-bottom:1px solid rgba(91,146,214,.08)}
.grid-bg{
  position:fixed;inset:0;pointer-events:none;opacity:.17;
  background-image:linear-gradient(rgba(37,120,202,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(37,120,202,.11) 1px,transparent 1px);
  background-size:70px 70px;mask-image:linear-gradient(to bottom,black,transparent 75%);z-index:-2
}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:20;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
.hero{min-height:100vh;display:flex;align-items:center;padding-top:150px;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;width:720px;height:720px;right:-260px;top:30px;background:radial-gradient(circle,rgba(0,115,255,.24),transparent 65%);filter:blur(10px)}
.hero-orb{position:absolute;border:1px solid rgba(37,154,255,.25);border-radius:50%;pointer-events:none}
.orb-one{width:620px;height:620px;right:-370px;top:80px}
.orb-two{width:390px;height:390px;right:-245px;top:195px;border-color:rgba(56,213,255,.18)}
.eyebrow{font-size:.72rem;letter-spacing:.19em;color:#70bbff;font-weight:800}
.pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 16px var(--cyan);margin-right:9px}
.display-title{font-family:"Space Grotesk";font-weight:700;font-size:clamp(3.4rem,7vw,6.8rem);line-height:.94;letter-spacing:-.065em;max-width:900px;margin:22px 0}
.display-title span{display:block;background:linear-gradient(90deg,#1591ff,#65d2ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy{max-width:700px;color:#aebdd1;font-size:1.12rem;line-height:1.75}
.hero-copy strong{color:#e9f5ff}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0}
.hero-stats{display:flex;gap:35px;margin-top:42px;padding-top:25px;border-top:1px solid var(--line)}
.hero-stats div{display:flex;flex-direction:column}
.hero-stats strong{font-family:"Space Grotesk";font-size:1.45rem}
.hero-stats span{font-size:.7rem;color:var(--muted);margin-top:3px}
.profile-card{
  position:relative;background:linear-gradient(145deg,rgba(15,35,70,.88),rgba(5,15,34,.9));
  border:1px solid rgba(79,162,237,.27);border-radius:28px;padding:28px;box-shadow:var(--shadow);overflow:hidden
}
.profile-card:after{content:"";position:absolute;inset:0;background:linear-gradient(130deg,rgba(42,164,255,.12),transparent 45%);pointer-events:none}
.profile-glow{position:absolute;width:180px;height:180px;background:var(--blue);filter:blur(90px);opacity:.18;right:-30px;top:-30px}
.profile-photo-wrap{width:142px;height:142px;aspect-ratio:1;margin:10px auto 24px;position:relative}
.profile-photo-wrap img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;border-radius:35px;border:1px solid rgba(88,190,255,.45);background:#07142c;box-shadow:0 0 45px rgba(0,126,255,.24)}
.status-dot{position:absolute;width:15px;height:15px;right:5px;bottom:6px;border-radius:50%;background:#39e58c;border:3px solid #07142c}
.mini-label{font-size:.62rem;letter-spacing:.2em;color:#67b9ff;font-weight:800}
.profile-meta{text-align:center}
.profile-meta h2{font-family:"Space Grotesk";font-size:1.55rem;line-height:1.1;margin:9px 0}
.profile-meta p{font-size:.83rem;line-height:1.6;color:var(--muted)}
.profile-links{display:grid;gap:9px;margin-top:23px;padding-top:18px;border-top:1px solid var(--line);font-size:.74rem;text-align:center}
.profile-links a{color:#9acbfa}.profile-links a:hover{color:#fff}
.scroll-hint{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-size:.55rem;letter-spacing:.25em;color:#526780;display:flex;gap:10px;align-items:center}
.scroll-hint span{width:40px;height:1px;background:#315273}
.section-heading{display:flex;gap:24px;align-items:flex-start;margin-bottom:65px}
.section-index{font-family:"Space Grotesk";font-size:.8rem;color:#319dff;border:1px solid rgba(49,157,255,.4);border-radius:8px;padding:7px 9px}
.section-heading h2{font-family:"Space Grotesk";font-size:clamp(2rem,4vw,3.6rem);letter-spacing:-.04em;line-height:1.05;max-width:780px;margin:12px 0 0}
.profile-text{font-size:1.02rem;line-height:1.85;color:#aebdd0}
.profile-text p{margin-bottom:20px}
.profile-text strong{color:#eaf4ff}
.principles-card{border:1px solid var(--line);border-radius:20px;background:rgba(9,23,47,.6);padding:7px}
.principle{display:grid;grid-template-columns:45px 1fr;gap:14px;padding:25px 22px;border-bottom:1px solid var(--line)}
.principle:last-child{border-bottom:0}
.principle>span{font-family:"Space Grotesk";font-size:.75rem;color:#3ea8ff}
.principle strong{font-family:"Space Grotesk";font-size:1.1rem}
.principle p{color:#8495ad;font-size:.82rem;line-height:1.6;margin:6px 0 0}
.experience-strip{display:grid;grid-template-columns:repeat(5,1fr);margin-top:60px;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.experience-strip div{padding:20px;border-right:1px solid var(--line);display:flex;align-items:center;gap:12px}
.experience-strip div:last-child{border-right:0}
.experience-strip span{font-family:"Space Grotesk";font-size:.72rem;color:#53b9ff;border:1px solid rgba(83,185,255,.3);padding:5px 6px;border-radius:6px}
.experience-strip p{margin:0;color:#93a3b9;font-size:.8rem}
.timeline{position:relative;max-width:980px;margin:auto}
.timeline:before{content:"";position:absolute;left:10px;top:0;bottom:35px;width:1px;background:linear-gradient(#238fe9,rgba(35,143,233,.08))}
.timeline-item{position:relative;display:grid;grid-template-columns:170px 1fr;gap:30px;padding:0 0 48px 0}
.timeline-dot{position:absolute;left:5px;top:4px;width:11px;height:11px;border-radius:50%;background:#0b162b;border:2px solid #2b9cff;box-shadow:0 0 20px rgba(43,156,255,.5)}
.timeline-date{padding-left:35px;font-size:.67rem;letter-spacing:.12em;color:#6f89a5;font-weight:700}
.timeline-content{border:1px solid var(--line);background:rgba(8,22,46,.48);border-radius:18px;padding:25px 28px;transition:.3s}
.timeline-content:hover{border-color:rgba(42,157,255,.45);transform:translateX(5px);background:rgba(10,29,59,.72)}
.job-top{display:flex;justify-content:space-between;gap:20px}
.job-type,.project-tag{font-size:.6rem;letter-spacing:.15em;color:#48adff;font-weight:800}
.timeline-content h3{font-family:"Space Grotesk";font-size:1.3rem;margin:7px 0}
.job-no{font-family:"Space Grotesk";color:#365475}
.timeline-content p{color:#93a5bd;font-size:.87rem;line-height:1.7;margin:10px 0 17px}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chips span{font-size:.63rem;padding:5px 8px;border-radius:6px;color:#b8dcfa;background:rgba(32,137,220,.1);border:1px solid rgba(32,137,220,.18)}
.older-exp{margin-left:200px;border:1px solid var(--line);border-radius:16px;background:rgba(8,20,41,.45)}
.older-exp summary{cursor:pointer;list-style:none;padding:18px 22px;color:#8db6dc;font-size:.8rem}
.older-exp summary::-webkit-details-marker{display:none}
.older-exp summary span{float:right;font-size:1.1rem}
.older-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;padding:0 22px 25px}
.older-grid>div{padding-top:15px;border-top:1px solid var(--line)}
.older-grid strong{font-family:"Space Grotesk";color:#4dafff}
.older-grid p{color:#71859f;font-size:.68rem;line-height:1.5}
.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.project-card{position:relative;min-height:290px;padding:30px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,rgba(11,31,63,.8),rgba(6,15,33,.75));overflow:hidden;transition:.3s}
.project-card:hover{transform:translateY(-5px);border-color:rgba(41,158,255,.4);box-shadow:0 20px 50px rgba(0,0,0,.2)}
.project-card:before{content:"";position:absolute;width:150px;height:150px;right:-60px;top:-60px;border-radius:50%;border:1px solid rgba(48,163,255,.16)}
.project-number{font-family:"Space Grotesk";font-size:.75rem;color:#4baeff;margin-bottom:30px}
.project-card h3{font-family:"Space Grotesk";font-size:1.55rem;max-width:500px;margin:10px 0}
.project-card p{color:#8ea1ba;font-size:.83rem;line-height:1.75;max-width:570px}
.project-tech{position:absolute;bottom:25px;left:30px;color:#68baff;font-size:.63rem;letter-spacing:.06em}
.project-main{grid-row:span 2;min-height:596px;display:flex;flex-direction:column;justify-content:flex-end}
.project-main h3{font-size:2.25rem}
.project-main .project-number{position:absolute;top:30px;left:30px}
.ai-project{background:radial-gradient(circle at 80% 10%,rgba(71,85,255,.16),transparent 35%),linear-gradient(145deg,rgba(11,31,63,.8),rgba(6,15,33,.75))}
.personal-project{margin-top:16px;border:1px solid rgba(54,167,255,.22);border-radius:18px;padding:25px 28px;display:flex;align-items:center;justify-content:space-between;gap:25px;background:rgba(22,137,255,.055)}
.personal-project h3{font-family:"Space Grotesk";margin:6px 0}
.personal-project p{color:#8498b0;font-size:.8rem;margin:0;max-width:720px}
.stack-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filter{border:1px solid var(--line);background:transparent;color:#849ab5;border-radius:8px;padding:8px 13px;font-size:.7rem;cursor:pointer}
.filter:hover,.filter.active{color:#fff;border-color:#2d9cff;background:rgba(22,137,255,.1)}
.stack-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stack-card{padding:23px;border:1px solid var(--line);border-radius:16px;background:rgba(7,19,39,.5);min-height:180px;transition:.3s}
.stack-card.hide{display:none}
.stack-card:hover{border-color:rgba(57,168,255,.4);transform:translateY(-3px)}
.stack-icon{display:inline-flex;min-width:38px;height:30px;padding:0 8px;align-items:center;justify-content:center;border:1px solid rgba(60,169,255,.35);border-radius:6px;color:#54b7ff;font-family:"Space Grotesk";font-size:.62rem;font-weight:700}
.stack-card h3{font-family:"Space Grotesk";font-size:1.05rem;margin:20px 0 8px}
.stack-card p{font-size:.7rem;line-height:1.7;color:#7489a4}
.languages{display:grid;grid-template-columns:1fr 1fr;margin-top:15px;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.languages div{padding:20px 24px;display:grid;gap:6px}
.languages div+div{border-left:1px solid var(--line)}
.languages span{font-size:.6rem;letter-spacing:.15em;color:#5e7b9e}
.languages strong{font-size:.78rem;color:#c2d2e6}
.education-card{height:100%;border:1px solid var(--line);border-radius:20px;padding:35px;background:linear-gradient(145deg,rgba(12,31,62,.8),rgba(6,16,34,.75))}
.education-card h3{font-family:"Space Grotesk";font-size:1.65rem;margin:20px 0 8px}
.education-card p{color:#8fa2ba;font-size:.82rem;line-height:1.7}
.edu-date{font-size:.65rem;color:#48aefc}
.cert-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.cert-grid div{padding:17px;border:1px solid var(--line);border-radius:12px;background:rgba(8,21,43,.5)}
.cert-grid span{font-size:.58rem;color:#47a9fa;display:block;margin-bottom:8px}
.cert-grid strong{font-family:"Space Grotesk";font-size:.8rem;display:block}
.cert-grid small{color:#71849d;font-size:.63rem}
.cta{background:radial-gradient(circle at 20% 30%,rgba(15,130,255,.12),transparent 40%),var(--bg)}
.cta-card{position:relative;overflow:hidden;border:1px solid rgba(48,164,255,.28);border-radius:28px;padding:55px 60px;background:linear-gradient(135deg,rgba(9,28,58,.96),rgba(4,12,29,.98));display:grid;grid-template-columns:1.2fr .8fr;gap:40px}
.cta-grid{position:absolute;inset:0;opacity:.22;background-image:linear-gradient(rgba(70,161,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(70,161,255,.12) 1px,transparent 1px);background-size:50px 50px;mask-image:linear-gradient(90deg,black,transparent)}
.cta-copy{position:relative;z-index:1}
.cta-copy h2{font-family:"Space Grotesk";font-size:clamp(2.5rem,5vw,4.5rem);letter-spacing:-.05em;line-height:.98;margin:15px 0}
.cta-copy h2 span{color:#43aeff}
.cta-copy p{max-width:600px;color:#8fa2b9;line-height:1.7;font-size:.9rem}
.cta-code{align-self:center;justify-self:end;font-family:monospace;color:#718eae;font-size:.85rem;line-height:2;position:relative;z-index:1}
.cta-code span{color:#4aaeff}.cta-code b{color:#9dd7ff;font-weight:400}.indent{padding-left:25px}
footer{padding:30px 0;border-top:1px solid var(--line);font-size:.68rem;color:#61748e}
footer a{color:#65baff}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .75s ease,transform .75s ease}
.reveal.visible{opacity:1;transform:none}
@media(max-width:991px){
  .hero{padding-top:130px}
  .display-title{font-size:clamp(3rem,10vw,5rem)}
  .profile-card{max-width:420px;margin:auto}
  .timeline-item{grid-template-columns:1fr;gap:10px;padding-left:35px}
  .timeline-date{padding-left:0}
  .older-exp{margin-left:35px}
  .older-grid{grid-template-columns:repeat(2,1fr)}
  .stack-grid{grid-template-columns:repeat(2,1fr)}
  .project-main{grid-row:auto;min-height:360px}
  .project-main h3{font-size:1.8rem}
  .cta-card{grid-template-columns:1fr}
  .cta-code{justify-self:start}
}
@media(max-width:767px){
  .section-pad{padding:85px 0}
  .hero-stats{gap:18px;flex-wrap:wrap}
  .experience-strip{grid-template-columns:repeat(2,1fr)}
  .experience-strip div:nth-child(2n){border-right:0}
  .experience-strip div{border-bottom:1px solid var(--line)}
  .project-grid{grid-template-columns:1fr}
  .stack-grid{grid-template-columns:1fr}
  .languages{grid-template-columns:1fr}
  .languages div+div{border-left:0;border-top:1px solid var(--line)}
  .cert-grid{grid-template-columns:1fr}
  .older-grid{grid-template-columns:1fr}
  .cta-card{padding:35px 25px}
  .personal-project{align-items:flex-start;flex-direction:column}
  .section-heading{gap:14px;margin-bottom:45px}
  .section-index{flex:0 0 auto}
}