/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
}

body {
    font-family: 'Poppins', sans-serif;
    background: #f9fafb;
    color: #1e293b;
    scroll-behavior: smooth;
}

/* =========================
   NAVBAR
========================= */

.navbar {
    position: fixed;
    width: 100%;
    top: 0;
    backdrop-filter: blur(15px);
    background: rgba(255,255,255,0.85);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 70px;
    transition: 0.3s ease;
    z-index: 1000;
}

.logo {
    font-weight: 700;
    font-size: 22px;
    text-decoration: none;
    background: linear-gradient(90deg, #2563eb, #7c3aed);
     background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav-links a {
    margin-left: 35px;
    text-decoration: none;
    color: #1e293b;
    position: relative;
    font-weight: 500;
}

.nav-links a::after {
    content: "";
    position: absolute;
    width: 0%;
    height: 2px;
    left: 0;
    bottom: -6px;
    background: linear-gradient(90deg, #2563eb, #7c3aed);
    transition: 0.3s;
}

.nav-links a:hover::after {
    width: 100%;
}

/* =========================
   HERO SECTION
========================= */

/* =========================
   UPDATED HERO STRUCTURE
========================= */

.hero-name {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 10px;

    background: linear-gradient(90deg, #2563eb, #7c3aed);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #1e293b;
}

.hero-description {
    font-size: 15px;
    line-height: 1.6;
    color: #475569;
    margin-bottom: 20px;
}

.hero {
    min-height: 100vh;
    padding: 150px 70px 100px;
    background: linear-gradient(135deg, #e0f2fe, #eef2ff);
    display: flex;
    align-items: center;
}

.hero-container {
    max-width: 1200px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
}

.hero-text {
    flex: 1;
    min-width: 300px;
}

.hero-text h1 {
    font-size: 44px;
    line-height: 1.2;
    margin-bottom: 20px;
}

.hero-text p {
    font-size: 16px;
    line-height: 1.7;
    color: #475569;
}

.hero-image {
    flex: 1;
    text-align: center;
}

.hero-image img {
    width: 360px;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}

/* BUTTONS */

.btn-primary {
    display: inline-block;
    margin-top: 25px;
    padding: 12px 28px;
    background: #2563eb;
    color: white;
    border-radius: 30px;
    text-decoration: none;
    transition: 0.3s ease;
}

.btn-primary:hover {
    background: #1d4ed8;
}

.btn-outline {
    display: inline-block;
    margin-top: 25px;
    padding: 12px 28px;
    border: 2px solid #2563eb;
    color: #2563eb;
    border-radius: 30px;
    text-decoration: none;
    transition: 0.3s ease;
}

.btn-outline:hover {
    background: #2563eb;
    color: white;
}

/* CONTACT INLINE */

.contact-inline {
    margin-top: 20px;
    font-size: 14px;
}

.contact-inline span {
    margin-right: 15px;
}

.contact-inline a {
    text-decoration: none;
    color: #2563eb;
    font-weight: 500;
}

.contact-inline a:hover {
    text-decoration: underline;
}

/* =========================
   STATS SECTION
========================= */

.stats {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 90px 20px;
    flex-wrap: wrap;
}

.stat-card {
    background: white;
    padding: 40px;
    width: 200px;
    border-radius: 18px;
    text-align: center;
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
    transition: 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(37,99,235,0.15);
}

.counter {
    font-size: 36px;
    color: #2563eb;
    font-weight: 700;
}

/* =========================
   ABOUT SECTION
========================= */

.about-section {
    padding: 100px 70px;
    background: white;
}

.about-container {
    max-width: 1100px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    gap: 80px;
    flex-wrap: wrap;
}

.about-left {
    flex: 1;
    min-width: 280px;
}

.about-tag {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #2563eb;
    margin-bottom: 15px;
}

.about-left h2 {
    font-size: 36px;
    line-height: 1.3;
}

.about-left h2 span {
    background: linear-gradient(90deg, #2563eb, #7c3aed);
     background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.about-right {
    flex: 1;
    min-width: 300px;
}

.about-right p {
    font-size: 16px;
    line-height: 1.7;
    color: #475569;
    margin-bottom: 20px;
}

.about-right span {
    font-weight: 600;
    color: #1e293b;
}

.about-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
}

.highlight {
    padding: 8px 18px;
    background: #eef2ff;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    color: #2563eb;
    transition: 0.3s ease;
}

.highlight:hover {
    background: linear-gradient(90deg, #2563eb, #7c3aed);
    color: white;
}

/* =========================
   EXPERIENCE SECTION
========================= */

.section {
    padding: 100px 70px;
    max-width: 1000px;
    margin: auto;
}

.exp-card {
    background: white;
    padding: 35px;
    margin: 40px 0;
    border-radius: 18px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
    border-left: 5px solid;
    border-image: linear-gradient(180deg, #2563eb, #7c3aed) 1;
    transition: 0.4s ease;
}

.exp-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(37,99,235,0.15);
}

.exp-meta{
    margin: 8px 0 12px 0;
    font-size: 15px;
    color: #475569;
}

.exp-card ul{
    margin-top: 10px;
    padding-left: 18px;
}

.exp-card li{
    margin-bottom: 6px;
    line-height: 1.6;
}

/* =========================
   CONTACT SECTION
========================= */

.contact-section {
    background: #eef2ff;
    padding: 120px 20px;
    display: flex;
    justify-content: center;
}

.contact-card {
    background: white;
    padding: 50px;
    border-radius: 20px;
    max-width: 700px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}

/* =========================
   FOOTER
========================= */

footer {
    text-align: center;
    padding: 20px;
    background: white;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
}
/* =========================
   MOBILE RESPONSIVE
========================= */

@media (max-width: 768px) {

    /* NAVBAR */
    .navbar {
        padding: 15px 20px;
    }

    .nav-links {
        display: none; /* hide menu on small screen */
    }

    /* HERO */
    .hero {
        padding: 120px 20px 40px;
        text-align: center;
    }

    .hero-container {
        flex-direction: column;
        gap: 30px;
    }

    .hero-name {
        font-size: 32px;
    }

    .hero-title {
        font-size: 16px;
    }

    .hero-description {
        font-size: 14px;
    }

    .hero-image img {
        width: 250px;
    }

    /* STATS */
    .stats-container {
        flex-direction: column;
        gap: 15px;
    }

    /* ABOUT */
    .about-container {
        flex-direction: column;
        gap: 25px;
    }

    /* EXPERIENCE */
    .experience-section {
        padding: 50px 20px;
    }

    .timeline {
        padding-left: 15px;
    }

    .timeline-dot {
        left: -25px;
    }

    /* CONTACT */
    .contact-section {
        padding: 50px 20px;
    }

}

/* Featured product */
#product { scroll-margin-top: 90px; }
.product-section { padding: 100px 32px; background: #f5f3ff; border-block: 1px solid #e4defa; }
.product-container { max-width: 1120px; margin: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 64px; align-items: start; }
.product-eyebrow { color: #6041c6; font-size: 12px; font-weight: 700; letter-spacing: 2px; margin-bottom: 16px; }
.product-copy h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.15; letter-spacing: -1.2px; margin-bottom: 16px; }
.product-headline { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.4; font-weight: 600; color: #5b3db4; margin-bottom: 20px; }
.product-summary, .product-details p, .product-steps { font-size: 15px; line-height: 1.8; color: #475569; }
.product-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 28px; }
.product-tags span { font-size: 11px; font-weight: 600; background: #fff; border: 1px solid #ded7f5; color: #5137a0; padding: 7px 11px; border-radius: 6px; }
.product-details h3 { font-size: 15px; margin: 22px 0 8px; }
.product-steps { padding-left: 20px; }
.product-steps li { padding-left: 4px; margin-bottom: 10px; }
.product-steps strong { color: #1e293b; }
.product-demo { width: 100%; margin: 0; background: #fff; padding: 18px; border: 1px solid #e4defa; border-radius: 22px; box-shadow: 0 18px 50px rgba(60, 40, 100, .08); }
.product-demo-heading { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; font-weight: 700; letter-spacing: 1px; color: #6041c6; padding: 2px 0 14px; }
.product-demo video { display: block; width: 100%; aspect-ratio: 1 / 2; background: #15132a; border-radius: 12px; }
.product-demo figcaption { font-size: 11px; color: #64748b; line-height: 1.7; margin-top: 14px; }
.product-hero-link { display: inline-block; color: #5b3db4; font-size: 14px; font-weight: 600; margin: 20px 0 0 18px; text-underline-offset: 5px; }
.product-section a:focus-visible, .product-demo video:focus-visible { outline: 3px solid #6041c6; outline-offset: 5px; }
@media (max-width: 850px) {
    .product-container { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .product-demo { max-width: 340px; justify-self: center; }
}
@media (max-width: 480px) {
    .product-section { padding: 64px 20px; }
    .product-hero-link { display: block; margin-left: 0; }
}

/* Resume download */
.cv-download { margin-left: 12px; }
.cv-download:focus-visible { outline: 3px solid #2563eb; outline-offset: 4px; }
@media (max-width: 380px) { .cv-download { margin-left: 0; } }

/* Clean professional hero actions */
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:26px; }
.hero-action { display:inline-flex; justify-content:center; align-items:center; gap:10px; min-height:46px; padding:12px 18px; border:1px solid transparent; border-radius:9px; font-size:14px; font-weight:600; line-height:1.4; text-decoration:none; transition:background .2s ease; }
.hero-action-primary { background:#2563eb; color:#fff; }
.hero-action-primary:hover { background:#1d4ed8; }
.hero-action-secondary { background:#fff; border-color:#c9d6e6; color:#233750; }
.hero-action-secondary:hover { background:#f1f5f9; }
.hero-action-link { padding-inline:4px; color:#305897; }
.hero-action-link:hover { text-decoration:underline; text-underline-offset:4px; }
.hero-action svg, .contact-inline svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.hero .contact-inline { display:flex; flex-wrap:wrap; gap:12px 22px; margin-top:24px; padding-top:18px; border-top:1px solid #d0deed; font-size:12px; }
.hero .contact-inline a { display:inline-flex; align-items:center; gap:7px; color:#536579; font-weight:400; min-height:32px; max-width:100%; }
.hero .contact-inline span { margin:0; overflow-wrap:anywhere; }
.hero-action:focus-visible, .contact-inline a:focus-visible { outline:3px solid #2563eb; outline-offset:4px; }
@media(max-width:768px) { .hero-actions, .hero .contact-inline { justify-content:center; } }
@media(max-width:380px) { .hero-action { padding-inline:14px; } }
/* CV-aligned expertise and credentials */
.hero .hero-tagline { font-size:21px; font-weight:600; line-height:1.5; color:#233750; margin-bottom:16px; }
.stats .stat-card h2 { font-size:36px; color:#2563eb; }
.content-wrap { max-width:1100px; margin:auto; }
.content-wrap > h2 { font-size:clamp(26px,3vw,36px); line-height:1.3; }
.expertise-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 48px; margin-top:36px; }
.expertise-grid h3, .education-grid h3, .toolkit h3 { font-size:17px; margin-bottom:10px; }
.expertise-grid p, .education-grid p { color:#475569; line-height:1.75; font-size:15px; }
.credentials-section { padding:80px 32px; background:#fff; }
.education-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; margin-top:36px; }
.education-grid article { border-top:2px solid #dbeafe; padding-top:20px; }
.education-grid .credential-date { color:#2563eb; font-size:13px; margin-bottom:10px; }
.career-progression { font-size:14px; color:#475569; margin-bottom:18px; }
.toolkit { border-top:1px solid #e2e8f0; margin-top:40px; padding-top:28px; }
@media(max-width:768px) {
 .expertise-grid, .education-grid { grid-template-columns:minmax(0,1fr); gap:26px; }
 .about-section, .section, .credentials-section { padding:60px 20px; }
 .exp-card { padding:24px; }
 .hero-text { min-width:0; }
 .hero-image img { max-width:100%; }
}