:root{--accent:#0d6efd;--dark:#0b1220;--muted:#64748b;--surface:#fff;--soft:#f6f8fc}
html{scroll-behavior:smooth}body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:#172033;background:#fff}.navbar{backdrop-filter:blur(12px);background:rgba(255,255,255,.92)!important}.navbar-brand{font-weight:800;letter-spacing:-.03em}.nav-link{font-weight:600}.hero{min-height:92vh;display:flex;align-items:center;padding:110px 0 70px;background:radial-gradient(circle at 80% 20%,rgba(13,110,253,.15),transparent 35%),linear-gradient(180deg,#fbfdff,#f5f8ff)}.eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .8rem;border-radius:999px;background:#eaf2ff;color:var(--accent);font-weight:700;font-size:.86rem}.hero h1{font-size:clamp(2.6rem,6vw,5.2rem);font-weight:850;letter-spacing:-.055em;line-height:.98}.hero h1 span{color:var(--accent)}.hero-copy{max-width:680px;color:var(--muted);font-size:1.1rem}.profile-wrap{position:relative;max-width:430px;margin:auto}.profile-card{background:#fff;border:1px solid #e8edf5;border-radius:32px;padding:16px;box-shadow:0 30px 70px rgba(22,40,80,.14);transform:rotate(2deg)}.profile-card img{width:100%;aspect-ratio:1/1.08;object-fit:cover;border-radius:24px;background:#e9eef7}.floating-badge{position:absolute;bottom:22px;left:-18px;background:#fff;border-radius:18px;padding:14px 18px;box-shadow:0 18px 40px rgba(22,40,80,.16);font-weight:700}.section{padding:90px 0}.section-soft{background:var(--soft)}.section-title{font-weight:850;letter-spacing:-.035em;font-size:clamp(2rem,4vw,3.2rem)}.section-subtitle{color:var(--muted);max-width:650px}.info-card,.service-card,.project-card,.skill-card,.contact-card{border:1px solid #e7ebf2;border-radius:22px;background:#fff;box-shadow:0 10px 28px rgba(27,45,80,.05);transition:.25s}.service-card:hover,.project-card:hover,.skill-card:hover{transform:translateY(-5px);box-shadow:0 20px 46px rgba(27,45,80,.1)}.icon-box{width:50px;height:50px;border-radius:14px;background:#eaf2ff;color:var(--accent);display:grid;place-items:center;font-size:1.45rem}.skill-card{padding:20px}.progress{height:9px;background:#e9eef7}.progress-bar{background:var(--accent)}.project-card{overflow:hidden;height:100%}.project-thumb{width:100%;aspect-ratio:16/10;object-fit:cover;background:#e9eef7}.project-body{padding:20px}.project-tag{font-size:.78rem;font-weight:700;color:var(--accent);background:#eaf2ff;padding:.35rem .6rem;border-radius:999px}.contact-list a{text-decoration:none;color:inherit}.contact-list .item{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid #edf0f5}.social-btn{width:42px;height:42px;border-radius:12px;display:inline-grid;place-items:center;border:1px solid #e1e7f0;text-decoration:none;color:#172033;transition:.2s}.social-btn:hover{background:var(--accent);color:white;border-color:var(--accent)}.btn{border-radius:12px;font-weight:700;padding:.72rem 1.05rem}.form-control,.form-select{border-radius:12px;padding:.78rem .9rem;border-color:#dce2eb}.form-control:focus{box-shadow:0 0 0 .22rem rgba(13,110,253,.12)}footer{background:#0b1220;color:#aab4c7}.back-top{position:fixed;right:20px;bottom:20px;width:46px;height:46px;border-radius:14px;display:none;place-items:center;background:var(--accent);color:#fff;text-decoration:none;z-index:50;box-shadow:0 12px 30px rgba(13,110,253,.3)}@media(max-width:991px){.hero{min-height:auto;padding-top:130px}.profile-wrap{margin-top:45px;max-width:360px}.floating-badge{left:5px}.section{padding:70px 0}}
.floating-whatsapp {
    position: fixed;
    left: 20px;
    bottom: 20px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    text-decoration: none;
    z-index: 9999;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
    transition: all 0.3s ease;
}

.floating-whatsapp:hover {
    color: #fff;
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

@media (max-width: 576px) {
    .floating-whatsapp {
        left: 15px;
        bottom: 15px;
        width: 52px;
        height: 52px;
        font-size: 27px;
    }
}