:root{--st-bg:#080d1d;--st-bg-soft:#10172a;--st-card:rgba(255,255,255,.065);--st-border:rgba(255,255,255,.12);--st-text:#f8fafc;--st-muted:#a8b3c7;--st-accent:#00d4ff;--st-accent-2:#7c3aed;--st-radius:24px}html{scroll-behavior:smooth}body{background:var(--st-bg);color:var(--st-text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:var(--st-accent);text-decoration:none}.portfolio-navbar{background:rgba(8,13,29,.86);backdrop-filter:blur(18px);border-bottom:1px solid var(--st-border)}.navbar-brand img{max-height:42px;width:auto}.navbar .nav-link{color:var(--st-muted);font-weight:600;margin:0 .2rem}.navbar .nav-link:hover,.navbar .nav-link.active{color:#fff}.hero-section{min-height:100vh;padding:110px 0 70px;background:radial-gradient(circle at 15% 20%,rgba(0,212,255,.24),transparent 32%),radial-gradient(circle at 85% 75%,rgba(124,58,237,.24),transparent 34%),linear-gradient(120deg,#080d1d,#10172a)}.hero-badge,.section-kicker{display:inline-flex;align-items:center;border-radius:999px;padding:8px 14px;background:rgba(255,255,255,.08);border:1px solid var(--st-border);color:var(--st-muted);font-size:.9rem}.hero-roles{color:var(--st-accent);font-size:clamp(1.25rem,3vw,2rem);font-weight:800;min-height:2.7rem}.role-text{transition:opacity .22s ease}.hero-profile-card,.content-card,.service-card,.project-card,.blog-card{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.045));border:1px solid var(--st-border);border-radius:var(--st-radius);box-shadow:0 24px 70px rgba(0,0,0,.22);overflow:hidden}.hero-profile-card{padding:18px}.profile-placeholder{height:360px;border-radius:20px;background:linear-gradient(135deg,rgba(0,212,255,.18),rgba(124,58,237,.18));display:flex;align-items:center;justify-content:center}.profile-placeholder i{font-size:9rem;color:rgba(255,255,255,.72)}.hero-card-content{padding:22px 8px 4px}.text-secondary{color:var(--st-muted)!important}.section-padding{padding:90px 0}.section-soft{background:rgba(255,255,255,.03)}.section-heading h2{font-size:clamp(2rem,4vw,3rem);font-weight:900;margin-top:14px}.section-heading p{color:var(--st-muted);max-width:680px;margin:10px auto 0}.info-list{list-style:none;padding:0;margin:0}.info-list li{padding:10px 0;border-bottom:1px solid var(--st-border);color:var(--st-muted)}.info-list li:last-child{border-bottom:0}.service-card{padding:28px;transition:transform .25s ease,border-color .25s ease}.service-card:hover,.project-card:hover,.blog-card:hover{transform:translateY(-5px);border-color:rgba(0,212,255,.35)}.service-card i{width:54px;height:54px;display:inline-flex;align-items:center;justify-content:center;border-radius:18px;background:rgba(0,212,255,.12);color:var(--st-accent);font-size:1.7rem;margin-bottom:18px}.service-card h3,.project-card h3,.blog-card h3{font-size:1.25rem}.service-card p,.project-card p,.blog-card p{color:var(--st-muted)}.timeline{display:grid;gap:18px}.timeline-item{padding:22px;border-radius:20px;background:rgba(255,255,255,.055);border:1px solid var(--st-border)}.timeline-period{color:var(--st-accent);font-size:.85rem;font-weight:700}.skill-row{margin-bottom:18px}.progress{height:9px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;margin-top:8px}.progress-bar{background:linear-gradient(90deg,var(--st-accent),var(--st-accent-2))}.project-img,.blog-img{width:100%;height:230px;object-fit:cover}.project-body{padding:24px}.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.tag-list span{font-size:.75rem;color:var(--st-text);border-radius:999px;padding:6px 10px;background:rgba(0,212,255,.10);border:1px solid rgba(0,212,255,.18)}.read-more{font-weight:700}.post-meta{color:var(--st-muted);font-size:.875rem}.contact-links{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}.contact-links a,.social-links a{display:inline-flex;align-items:center;gap:8px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid var(--st-border);padding:10px 14px;color:var(--st-text)}.social-links a{width:44px;height:44px;justify-content:center;padding:0}.site-footer{background:#050816;border-top:1px solid var(--st-border);color:var(--st-muted)}.footer-menu li{display:inline-block;margin-left:12px}.main-page{padding-top:110px!important;min-height:80vh}.narrow-container{max-width:920px}@media(max-width:991px){.navbar-collapse{padding:18px 0}.hero-section{padding-top:95px;text-align:center}.hero-profile-card{max-width:420px;margin:0 auto}}@media(max-width:575px){.hero-section{min-height:auto;padding:92px 0 55px}.hero-badge{font-size:.78rem;line-height:1.4;justify-content:center;text-align:center}.hero-section h1{font-size:2.35rem}.hero-roles{min-height:4rem;font-size:1.2rem}.section-padding{padding:62px 0}.service-card,.project-body,.content-card{padding:22px}.contact-links{flex-direction:column}.profile-placeholder{height:260px}.profile-placeholder i{font-size:6rem}}

/* Premium SaaS hero profile card */
.hero-profile-card {
    position: relative;
    padding: 18px;
    border-radius: 32px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.045)),
        radial-gradient(circle at 20% 10%, rgba(0,212,255,.20), transparent 38%),
        radial-gradient(circle at 90% 90%, rgba(124,58,237,.24), transparent 42%);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow:
        0 28px 90px rgba(0,0,0,.36),
        0 0 0 1px rgba(255,255,255,.04) inset;
    backdrop-filter: blur(18px);
    overflow: hidden;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.hero-profile-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(0,212,255,.55), transparent 35%, rgba(124,58,237,.45));
    opacity: .38;
    z-index: 0;
    pointer-events: none;
}

.hero-profile-card::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -80px;
    top: -80px;
    background: radial-gradient(circle, rgba(0,212,255,.32), transparent 68%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

.hero-profile-card:hover {
    transform: translateY(-8px) scale(1.01);
    border-color: rgba(0,212,255,.38);
    box-shadow:
        0 36px 110px rgba(0,0,0,.46),
        0 0 45px rgba(0,212,255,.12);
}

.hero-profile-card .hero-profile-img,
.hero-profile-card .profile-placeholder,
.hero-profile-card .hero-card-content {
    position: relative;
    z-index: 2;
}

.hero-profile-img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 24px 60px rgba(0,0,0,.32);
}

.profile-placeholder {
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
}

.profile-placeholder i {
    font-size: 96px;
    color: rgba(255,255,255,.65);
}

.hero-card-content {
    margin-top: 16px;
    padding: 18px;
    border-radius: 22px;
    background: rgba(8,13,29,.52);
    border: 1px solid rgba(255,255,255,.10);
    text-align: center;
}

.hero-card-content h2 {
    margin: 0 0 6px;
    font-size: 1.55rem;
    font-weight: 900;
    letter-spacing: -.4px;
    color: #fff;
}

.hero-card-content p {
    margin: 0;
    color: #8ff3ff;
    font-weight: 700;
    letter-spacing: .2px;
}

@media (max-width: 991px) {
    .hero-profile-card {
        max-width: 420px;
        margin: 0 auto;
    }
}

@media (max-width: 575px) {
    .hero-profile-card {
        padding: 14px;
        border-radius: 26px;
    }

    .hero-profile-img,
    .profile-placeholder {
        border-radius: 20px;
    }

    .hero-card-content {
        padding: 14px;
        border-radius: 18px;
    }

    .hero-card-content h2 {
        font-size: 1.3rem;
    }

    .hero-card-content p {
        font-size: .95rem;
    }
}