*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,sans-serif;color:#fff;background:#07111f;min-height:100vh;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;background:linear-gradient(135deg,rgba(7,17,31,.92),rgba(12,44,60,.78)),url("profile.jpg") center/cover fixed;filter:blur(1px);z-index:-3}
body:after{content:"";position:fixed;inset:0;background:rgba(2,10,20,.54);z-index:-2}
.background{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(55px);opacity:.45}
.orb-1{width:360px;height:360px;background:#22d3ee;left:-100px;top:100px}
.orb-2{width:420px;height:420px;background:#8b5cf6;right:-130px;top:25%}
.orb-3{width:300px;height:300px;background:#06b6d4;left:38%;bottom:-130px}
.glass{background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.055));border:1px solid rgba(255,255,255,.22);box-shadow:0 18px 50px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.navbar{position:sticky;top:18px;z-index:20;width:min(1120px,calc(100% - 32px));margin:18px auto 0;padding:12px 16px;border-radius:22px;display:flex;align-items:center;justify-content:space-between}
.logo,.footer-logo{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;text-decoration:none;color:#fff;font-weight:800;font-size:21px;background:linear-gradient(135deg,#22d3ee,#6366f1);box-shadow:0 8px 25px rgba(34,211,238,.25)}
nav{display:flex;gap:8px}nav a{color:#fff;text-decoration:none;padding:11px 17px;border-radius:14px;font-size:14px;font-weight:600;transition:.25s}nav a:hover,nav a.active{background:rgba(255,255,255,.16)}
.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:25px}
.section{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:100px 0 20px}
.hero{min-height:calc(100vh - 90px);display:grid;grid-template-columns:1.12fr .88fr;gap:28px;align-items:center}
.hero-text{padding:48px;border-radius:30px}
.eyebrow,.section-heading span{font-size:12px;letter-spacing:3px;color:#67e8f9;font-weight:800}
h1{font-size:clamp(42px,6vw,72px);line-height:1.05;margin:17px 0}
h1 span{background:linear-gradient(90deg,#67e8f9,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-text>p{color:#d4deea;line-height:1.8;max-width:650px;font-size:16px}
.hero-buttons{display:flex;gap:12px;margin:28px 0}
.btn{display:inline-block;text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.25);padding:13px 21px;border-radius:14px;background:rgba(255,255,255,.09);font-weight:700;transition:.25s}
.btn:hover{transform:translateY(-3px);background:rgba(255,255,255,.17)}
.btn.primary{border:0;background:linear-gradient(135deg,#06b6d4,#6366f1);box-shadow:0 12px 30px rgba(6,182,212,.25)}
.mini-stats{display:flex;gap:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.13)}
.mini-stats div{display:grid;gap:4px}.mini-stats strong{font-size:20px}.mini-stats small{color:#aebdcd}
.profile-card{border-radius:30px;padding:20px;overflow:hidden}
.photo-wrap{position:relative;height:490px;border-radius:23px;overflow:hidden}
.photo-wrap:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.5))}
.photo-wrap img{width:100%;height:100%;object-fit:cover;object-position:center top}
.photo-badge{position:absolute;z-index:2;right:16px;top:16px;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-weight:800;background:rgba(8,18,31,.55);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(10px)}
.profile-info{padding:20px 8px 6px}.profile-info h2{font-size:25px}.profile-info p{color:#b9c8d8;margin:7px 0}.profile-info a,.email-link{color:#67e8f9;text-decoration:none;font-size:14px}
.section-heading{margin-bottom:28px}.section-heading h2{font-size:38px;margin-top:10px}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.about-card,.skills-card{padding:32px;border-radius:25px}.about-card h3,.skills-card h3,.service-card h3,.contact-card h3{font-size:22px;margin-bottom:15px}.about-card p{color:#c6d3e0;line-height:1.8;margin-bottom:14px}.email-link{display:inline-block;margin-top:10px}
.skill{margin:22px 0}.skill>div:first-child{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px}.skill b{color:#67e8f9}.bar{height:9px;border-radius:20px;background:rgba(255,255,255,.11);overflow:hidden}.bar i{display:block;height:100%;border-radius:20px;background:linear-gradient(90deg,#22d3ee,#818cf8)}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.service-card{padding:30px;border-radius:25px;transition:.3s}.service-card:hover{transform:translateY(-8px);border-color:rgba(103,232,249,.45)}.service-card p{color:#c2cfdd;line-height:1.75}.icon{width:55px;height:55px;display:grid;place-items:center;border-radius:17px;margin-bottom:20px;background:rgba(103,232,249,.13);border:1px solid rgba(103,232,249,.22);color:#67e8f9;font-weight:800;font-size:22px}
.contact-card{border-radius:25px;padding:30px;display:flex;align-items:center;justify-content:space-between;gap:20px}.contact-card p{color:#bdcbd9;line-height:1.7}
.footer{width:min(1120px,calc(100% - 32px));margin:100px auto 18px;border-radius:25px;padding:22px;display:flex;align-items:center;gap:15px}.footer-logo{width:42px;height:42px;border-radius:13px;font-size:17px}.footer h3{font-size:15px}.footer p{color:#aab9c9;font-size:12px;margin-top:3px}.footer-copy{margin-left:auto}
@media(max-width:800px){.menu-toggle{display:block}nav{display:none;position:absolute;top:78px;left:0;right:0;padding:12px;border-radius:20px;background:rgba(10,23,38,.88);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(18px);flex-direction:column}nav.open{display:flex}.hero{grid-template-columns:1fr;padding-top:60px}.hero-text{padding:30px}.photo-wrap{height:430px}.about-grid,.service-grid{grid-template-columns:1fr}.contact-card{flex-direction:column;align-items:flex-start}.footer{flex-wrap:wrap}.footer-copy{margin-left:0;width:100%;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}}
@media(max-width:480px){.section{padding-top:75px}.hero-text{padding:24px}.mini-stats{gap:15px}.mini-stats strong{font-size:17px}.mini-stats small{font-size:10px}h1{font-size:42px}.hero-buttons{flex-direction:column}.btn{text-align:center}.photo-wrap{height:380px}}