*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#090a0c;--surface:#101216;--surface2:#15171b;--text:#f2f0ea;
  --muted:#a4a5aa;--line:#282a2f;--accent:#d7ff4f;--max:1200px;
}
html{scroll-behavior:smooth}
body{font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.06;background-image:linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(to bottom,black,transparent 80%);z-index:-1}
a{color:inherit;text-decoration:none}
.navbar{height:78px;position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;background:rgba(9,10,12,.78);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.07)}
.brand{font:700 30px "Space Grotesk";letter-spacing:-2px}.brand span{color:var(--accent)}
.navbar nav{display:flex;gap:28px}.navbar nav a{font-size:13px;color:#c5c6ca;transition:.25s}.navbar nav a:hover{color:var(--accent)}
.nav-cta{font-size:13px;border:1px solid #383a40;padding:9px 15px;border-radius:30px}.nav-cta span{color:var(--accent);margin-left:5px}
.section{max-width:var(--max);margin:auto;padding:125px 5vw;position:relative}
.hero{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;padding-top:150px}
.eyebrow{font-size:11px;letter-spacing:2.6px;color:var(--muted);font-weight:700;margin-bottom:22px}.dot{display:inline-block;width:7px;height:7px;background:var(--accent);border-radius:50%;margin-right:8px;box-shadow:0 0 15px rgba(215,255,79,.7)}
h1,h2,h3,.brand{font-family:"Space Grotesk",sans-serif}
h1{font-size:clamp(52px,7vw,95px);line-height:.95;letter-spacing:-5px;max-width:800px}
h1 em,h2 em{font-style:normal;color:var(--accent)}
.hero-text{max-width:570px;color:#aeb0b5;font-size:16px;margin:28px 0 32px}
.hero-actions{display:flex;gap:12px}.btn{display:inline-flex;align-items:center;gap:14px;padding:13px 20px;border-radius:5px;font-size:13px;font-weight:700;border:1px solid var(--line);transition:.25s}.btn span{color:var(--accent)}.btn.primary{background:var(--accent);color:#10120b;border-color:var(--accent)}.btn.primary span{color:#10120b}.btn.primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(215,255,79,.12)}.btn.secondary:hover{border-color:#777}
.quick-stats{display:flex;gap:48px;margin-top:55px}.quick-stats div{display:flex;flex-direction:column}.quick-stats strong{font:700 26px "Space Grotesk"}.quick-stats span{font-size:10px;color:#777;letter-spacing:1.5px;text-transform:uppercase}
.hero-visual{height:640px;position:relative;display:flex;justify-content:center;align-items:center}
.photo-frame{width:min(450px,75%);height:560px;position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.photo-frame:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 70%,var(--bg) 100%);pointer-events:none}
.photo-frame img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:saturate(.85) contrast(1.04);transform:scale(1.05)}
.orbit{position:absolute;border:1px solid rgba(215,255,79,.18);border-radius:50%;width:530px;height:530px;transform:rotate(-22deg)}.orbit-2{width:620px;height:230px;transform:rotate(-55deg);border-color:rgba(255,255,255,.08)}
.visual-grid{position:absolute;width:420px;height:500px;background:linear-gradient(90deg,rgba(215,255,79,.12) 1px,transparent 1px),linear-gradient(rgba(215,255,79,.12) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(circle,black,transparent 70%);opacity:.5}
.floating-card{position:absolute;z-index:4;background:rgba(15,17,20,.9);border:1px solid #303238;padding:14px 18px;backdrop-filter:blur(10px);box-shadow:0 15px 40px rgba(0,0,0,.3)}.floating-card span{font-size:9px;color:var(--accent)}.floating-card p{font:600 13px "Space Grotesk";line-height:1.25;margin-top:5px}.card-top{top:17%;right:3%}.card-bottom{bottom:12%;left:2%}
.section-heading{margin-bottom:60px}.section-heading h2{font-size:clamp(44px,6vw,75px);line-height:.98;letter-spacing:-3px}
.about{border-top:1px solid var(--line)}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px}.about-copy{max-width:590px}.about-copy p{color:#a8a9ae;font-size:15px;margin-bottom:20px}.about-copy .lead{font-size:21px;color:#e2e1dc;line-height:1.5}
.about-panel{border-top:1px solid var(--line)}.panel-row{padding:20px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;font-size:13px}.panel-row span{color:#777}.panel-row strong{font-weight:600;text-align:right}
.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.skill-card{padding:32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:205px;transition:.3s}.skill-card:hover{background:var(--surface);transform:translateY(-3px)}.skill-no{font-size:10px;color:var(--accent);letter-spacing:1px}.skill-card h3{font-size:24px;margin:25px 0 10px}.skill-card p{font-size:13px;color:#8e9096}
.experience{border-top:1px solid var(--line)}.timeline{border-top:1px solid var(--line)}.timeline-item{display:grid;grid-template-columns:120px 24px 1fr;gap:25px;padding:35px 0;border-bottom:1px solid var(--line)}.timeline-date{font-size:10px;letter-spacing:1.5px;color:#777;padding-top:4px}.timeline-marker{width:9px;height:9px;border:2px solid var(--accent);border-radius:50%;margin-top:5px;box-shadow:0 0 12px rgba(215,255,79,.3)}.timeline-content h3{font-size:25px}.role{color:var(--accent);font-size:12px;margin:4px 0 10px}.timeline-content>p:last-child{color:#96989e;font-size:14px;max-width:700px}
.projects{border-top:1px solid var(--line)}.project-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}.project-card{background:var(--surface);border:1px solid var(--line);min-height:500px;position:relative;overflow:hidden;transition:.35s}.project-card:hover{transform:translateY(-5px);border-color:#45474d}.project-card.featured{grid-row:span 2}.project-number{position:absolute;z-index:3;top:20px;left:20px;color:var(--accent);font-size:10px;letter-spacing:2px}.project-visual{height:320px;position:relative;overflow:hidden;background:radial-gradient(circle at center,#1d2025 0,#101216 60%,#0b0c0e 100%)}.project-info{padding:28px}.tag{font-size:9px;letter-spacing:2px;color:#777}.project-info h3{font-size:28px;margin:8px 0}.project-info>p:last-child{font-size:13px;color:#909198;max-width:650px}
.mechanism:before,.mechanism:after{content:"";position:absolute;border:1px solid rgba(215,255,79,.5);border-radius:50%}.mechanism:before{width:190px;height:190px;left:23%;top:20%}.mechanism:after{width:130px;height:130px;left:54%;top:34%}.gear{position:absolute;border:12px dotted rgba(255,255,255,.24);border-radius:50%;width:130px;height:130px;z-index:2}.gear-a{left:28%;top:30%}.gear-b{left:57%;top:37%;width:100px;height:100px}.shaft{position:absolute;width:250px;height:2px;background:var(--accent);left:30%;top:52%;transform:rotate(25deg);box-shadow:0 0 15px rgba(215,255,79,.35)}
.cube-scene,.city-scene{display:flex;align-items:center;justify-content:center}.cube{width:125px;height:125px;border:1px solid var(--accent);transform:rotate(35deg) skew(-8deg);box-shadow:0 0 60px rgba(215,255,79,.08)}.cube:after{content:"";position:absolute;inset:22px;border:1px solid rgba(255,255,255,.2)}.city-line{position:absolute;bottom:0;width:70px;border:1px solid #45474b;border-bottom:0}.line-a{height:160px;left:24%}.line-b{height:230px;left:43%;width:90px}.line-c{height:120px;left:65%;width:55px}.city-scene:after{content:"SMART CITY";position:absolute;letter-spacing:7px;font-size:11px;color:var(--accent);top:40%;opacity:.5}
.education-box{border:1px solid var(--line);background:var(--surface);padding:55px;display:flex;justify-content:space-between;align-items:end}.education-box h2{font-size:52px;line-height:1;letter-spacing:-2px}.edu-meta{display:flex;flex-direction:column;text-align:right;gap:6px}.edu-meta strong{font-size:12px;letter-spacing:2px}.edu-meta span{font-size:12px;color:#777}
.contact{padding-top:170px;padding-bottom:150px}.contact-inner{max-width:850px}.contact h2{font-size:clamp(52px,7vw,92px);line-height:.95;letter-spacing:-4px}.contact-text{font-size:16px;color:#92949a;max-width:600px;margin:28px 0}.contact-actions{display:flex;gap:12px}.replace-note{font-size:10px;color:#555;margin-top:25px}.replace-note strong{color:#777}
footer{border-top:1px solid var(--line);padding:25px 5vw;display:flex;justify-content:space-between;color:#5f6065;font-size:10px;letter-spacing:1px;text-transform:uppercase}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.12s}.delay-2{transition-delay:.24s}
.cursor-glow{position:fixed;width:260px;height:260px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(215,255,79,.055),transparent 65%);transform:translate(-50%,-50%);z-index:0}
@media(max-width:850px){.navbar nav{display:none}.hero{grid-template-columns:1fr;padding-top:125px}.hero-visual{height:530px;margin-top:30px}.photo-frame{height:500px}.about-grid{grid-template-columns:1fr;gap:50px}.skills-grid{grid-template-columns:1fr 1fr}.project-grid{grid-template-columns:1fr}.project-card.featured{grid-row:auto}.education-box{display:block}.edu-meta{text-align:left;margin-top:30px}.timeline-item{grid-template-columns:75px 18px 1fr;gap:15px}}
@media(max-width:560px){.navbar{padding:0 20px}.nav-cta{display:none}.section{padding:95px 20px}.hero{padding-top:115px}.hero h1{letter-spacing:-3px}.quick-stats{gap:25px}.hero-visual{height:440px}.photo-frame{height:430px;width:90%}.orbit{width:390px;height:390px}.orbit-2{width:440px;height:170px}.floating-card{display:none}.skills-grid{grid-template-columns:1fr}.skill-card{min-height:180px}.timeline-item{grid-template-columns:1fr;gap:7px}.timeline-marker{display:none}.timeline-date{order:-1}.education-box{padding:32px}.education-box h2{font-size:40px}.contact h2{letter-spacing:-3px}.contact-actions{flex-wrap:wrap}footer{flex-direction:column;gap:10px}}