:root {
            --bg: #0b0c10;
            --card: #111218;
            --text: #e8e8ea;
            --muted: #b6b6c2;
            --brand: #c4a86b;
            --brand-2: #2dd4bf;
            --shadow: 0 10px 30px rgba(0, 0, 0, .25);
            --shadow-soft: 0 14px 34px rgba(0, 0, 0, .28);
            --line: rgba(255, 255, 255, .1);
            --radius-xl: 18px;
            --radius-2xl: 26px;
            --maxw: 1200px;
            --header-height: 64px;
        }

        * {
            box-sizing: border-box
        }

        html,
        body {
            height: 100%
        }

        /* Single solid background color */
        body {
            margin: 0;
            font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
            background: var(--bg);
            color: var(--text);
            line-height: 1.6;
            padding-top: calc(env(safe-area-inset-top, 0) + var(--header-height));
        }
        
        /* RTL Support */
        [dir="rtl"] {
            font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        [dir="rtl"] .t-item {
            text-align: right;
        }
        
        [dir="rtl"] .t-item ul {
            padding-right: 20px;
            padding-left: 0;
        }

        a {
            color: var(--brand-2);
            text-decoration: none
        }

        a:hover {
            text-decoration: underline
        }

        .container {
            width: 100%;
            max-width: var(--maxw);
            margin: 0 auto;
            padding: 0 20px
        }

        .section {
            padding: 44px 0
        }

        .grid {
            display: grid;
            gap: 22px
        }

        .grid-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }

        .grid-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr))
        }

        /* Header */
        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 50;
            backdrop-filter: blur(12px);
            background: rgba(11, 12, 16, .92);
            border-bottom: 1px solid var(--line);
            transition: transform .25s ease;
        }

        @media (max-width: 980px) {
            /* Reduce expensive effects on lower-power devices */
            header {
                backdrop-filter: none;
            }
        }

        header.hidden {
            transform: translateY(-100%)
        }

        .nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 64px
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 700
        }

        .brand .dot {
            width: 12px;
            height: 12px;
            border-radius: 999px;
            background: linear-gradient(135deg, var(--brand), #e7d5a9);
            box-shadow: 0 0 20px rgba(196, 168, 107, .6)
        }

        .links a {
            color: var(--text);
            opacity: .9;
            padding: 8px 10px;
            border-radius: 10px;
            transition: background .2s ease, color .2s ease, opacity .2s ease;
        }

        .links a:hover {
            background: rgba(255, 255, 255, .06);
            text-decoration: none
        }

        .links a.active {
            background: rgba(45, 212, 191, .24);
            color: #eafffb;
            border: 1px solid rgba(45, 212, 191, .65);
            box-shadow: 0 0 0 1px rgba(45, 212, 191, .25) inset;
        }

        .icon {
            width: 18px;
            height: 18px;
            flex: 0 0 18px;
        }

        .nav-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }


        .scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 6px;
            z-index: 90;
            background: linear-gradient(90deg, var(--brand-2), var(--brand));
            box-shadow: 0 0 18px rgba(45, 212, 191, .7);
            transform-origin: 0 50%;
            transform: scaleX(0);
            will-change: transform;
            pointer-events: none;
        }

        .back-to-top {
            position: fixed;
            right: 20px;
            bottom: 22px;
            width: 54px;
            height: 54px;
            border-radius: 999px;
            border: 1px solid rgba(45, 212, 191, .55);
            background: linear-gradient(180deg, #1a1e28, #11141b);
            color: var(--text);
            font-size: 24px;
            font-weight: 700;
            cursor: pointer;
            z-index: 85;
            opacity: 0;
            transform: translateY(12px);
            pointer-events: none;
            transition: opacity .2s ease, transform .2s ease, border-color .2s ease, box-shadow .2s ease;
        }

        .back-to-top.show {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        .back-to-top:hover {
            border-color: rgba(45, 212, 191, .45);
            box-shadow: 0 0 18px rgba(45, 212, 191, .45);
        }

        .tag {
            transition: transform .2s ease, border-color .2s ease, background .2s ease;
        }

        .tag:hover {
            transform: translateY(-2px);
            border-color: rgba(45, 212, 191, .45);
            background: rgba(45, 212, 191, .12);
        }

        /* Mobile nav */
        .menu-btn {
            display: none;
            align-items: center;
            gap: 8px;
            padding: 8px 10px;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, .14);
            background: #14151b;
            color: var(--text);
            font-weight: 600;
            cursor: pointer;
        }

        /* Ensure the menu button is on top of nearby controls (language select) on small screens */
        .menu-btn { position: relative; z-index: 60; }
        .lang-select { position: relative; z-index: 50; }

        /* Compact mobile language button styles */
        .lang-btn {
            display: none; /* shown on small screens via media query */
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            border-radius: 10px;
            border: 1px solid rgba(255,255,255,.12);
            background: #14151b;
            color: var(--text);
            font-weight: 600;
            cursor: pointer;
        }

        .menu-icon {
            width: 18px;
            height: 2px;
            background: var(--text);
            position: relative;
            display: block
        }

        .menu-icon:before,
        .menu-icon:after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--text)
        }

        .menu-icon:before {
            top: -6px
        }

    .menu-icon:after {
        top: 6px
    }

    .mobile-menu {
        display: none;
        background: rgba(10, 11, 15, .98);
        border-bottom: 1px solid rgba(255, 255, 255, .06);
    }
    
    .mobile-controls {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    @media (min-width: 981px) {
        .mobile-controls {
            display: none;
        }
    }

    .mobile-menu.open {
        display: block
    }

        .mobile-menu a {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 20px;
            color: var(--text);
            border-top: 1px solid rgba(255, 255, 255, .04)
        }

        .mobile-menu a:hover {
            background: rgba(255, 255, 255, .06);
            text-decoration: none
        }

        /* Hero & Cards */
        .hero {
            padding: 96px 0 72px
        }

        .hero-wrap {
            display: grid;
            gap: 28px;
            grid-template-columns: 1.2fr .9fr;
            align-items: center
        }

        .hero h1 {
            font-size: 46px;
            line-height: 1.1;
            margin: 0 0 12px
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: var(--muted);
            letter-spacing: .12em;
            text-transform: uppercase
        }

        .eyebrow .chip {
            background: rgba(196, 168, 107, .12);
            color: #f7e7bf;
            padding: 6px 10px;
            border-radius: 999px;
            font-weight: 600;
            letter-spacing: .1em
        }

        .lead {
            font-size: 18px;
            color: var(--muted);
            max-width: 60ch
        }

        .cta {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            margin-top: 18px
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, .12);
            background: #14151b;
            color: var(--text);
            font-weight: 600;
            box-shadow: var(--shadow);
            cursor: pointer;
            transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
        }

        .btn.primary {
            background: linear-gradient(160deg, var(--brand), #e7d5a9);
            color: #1a1a1a;
            border: none
        }

        .btn:hover {
            transform: translateY(-2px);
            border-color: rgba(255, 255, 255, .2);
            box-shadow: var(--shadow-soft);
            text-decoration: none;
        }

        .social-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .social-link .icon {
            width: 14px;
            height: 14px;
            flex: 0 0 14px;
        }

        .service-title {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .card {
            background: #12131a;
            border: 1px solid var(--line);
            border-radius: var(--radius-2xl);
            padding: 22px;
            box-shadow: var(--shadow);
            transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
        }

        .card:hover {
            transform: translateY(-3px);
            border-color: rgba(255, 255, 255, .18);
            box-shadow: var(--shadow-soft);
        }

        .avatar {
            width: 120px;
            height: 120px;
            border-radius: 22px;
            background: linear-gradient(135deg, #1f2330, #0d0f14);
            border: 1px solid rgba(255, 255, 255, .08);
            display: grid;
            place-items: center;
            font-weight: 800;
            font-size: 36px;
            color: #f0f0f5
        }

        .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: inherit;
            display: block
        }

        .section h2 {
            font-size: 28px;
            margin: 0 0 10px;
            letter-spacing: .01em;
            color: var(--text);
        }

        .h2-ico {
            display: inline-flex;
            width: 26px;
            height: 26px;
            vertical-align: -4px;
            margin-right: 10px
        }

        .h2-ico svg {
            width: 100%;
            height: 100%
        }

        .section p.sub {
            color: var(--muted);
            margin: 0 0 26px
        }

        /* Education — stacked layout, aligned with project chips / accents */
        .edu-card {
            max-width: 560px;
        }

        .edu-head {
            display: flex;
            align-items: center;
            gap: 14px;
            margin: 0 0 18px;
            padding-bottom: 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }

        .edu-ico-wrap {
            width: 48px;
            height: 48px;
            border-radius: 14px;
            display: grid;
            place-items: center;
            flex-shrink: 0;
            background: rgba(45, 212, 191, 0.1);
            border: 1px solid rgba(45, 212, 191, 0.28);
        }

        .edu-ico {
            width: 24px;
            height: 24px;
            color: var(--brand-2);
        }

        .edu-title {
            margin: 0;
            font-size: 18px;
            font-weight: 700;
            color: var(--text);
        }

        .edu-body {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .edu-degree {
            margin: 0;
            font-size: 17px;
            font-weight: 700;
            line-height: 1.35;
            color: #e5e7eb;
        }

        .edu-meta-line {
            display: inline-flex;
            align-items: flex-start;
            gap: 10px;
            color: var(--muted);
            font-size: 15px;
            line-height: 1.45;
        }

        .edu-meta-ico {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
            margin-top: 2px;
            color: rgba(255, 255, 255, 0.42);
        }

        .edu-foot {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px 14px;
        }

        .edu-pill-label {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--muted);
        }

        .edu-pill {
            display: inline-flex;
            align-items: center;
            padding: 8px 14px;
            border-radius: 999px;
            font-weight: 600;
            font-size: 13px;
            background: rgba(45, 212, 191, 0.12);
            color: #2dd4bf;
            border: 1px solid rgba(45, 212, 191, 0.32);
        }

        [dir="rtl"] .edu-head,
        [dir="rtl"] .edu-meta-line {
            flex-direction: row-reverse;
        }

        [dir="rtl"] .edu-meta-line .edu-meta-ico {
            margin-top: 3px;
        }

        .tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px
        }

        .tag {
            padding: 8px 12px;
            border-radius: 999px;
            background: #15161c;
            border: 1px solid rgba(255, 255, 255, .08);
            font-weight: 600;
            font-size: 13px
        }

        /* Projects */
        .p-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 18px
        }

        .p-card {
            padding: 18px;
            border-radius: var(--radius-xl);
            background: #12131a;
            border: 1px solid var(--line);
            display: grid;
            gap: 10px;
            transition: transform .2s ease, box-shadow .2s ease
        }

        .p-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, .3)
        }

        .p-chip {
            display: inline-flex;
            align-items: center;
            height: 28px;
            padding: 0 12px;
            border-radius: 999px;
            font-weight: 700;
            font-size: 12px;
            letter-spacing: .06em;
            background: rgba(45, 212, 191, .14);
            color: #2dd4bf;
            border: 1px solid rgba(45, 212, 191, .35);
            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08)
        }

        .p-meta {
            color: var(--muted);
            font-size: 13px
        }

        .cat {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 26px 0 10px;
            font-weight: 800;
            letter-spacing: .02em;
            padding: 12px 16px;
            background: rgba(255, 255, 255, .02);
            border-radius: var(--radius-xl);
            border: 1px solid rgba(255, 255, 255, .06)
        }

        .cat .emoji {
            font-size: 20px
        }

        .cat .label {
            padding: 4px 10px;
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: 999px;
            background: #15161c;
            font-size: 12px;
            opacity: .9
        }

        /* Timeline */
        .timeline {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 18px
        }

        .timeline::before {
            display: none;
        }

        .t-item {
            padding: 18px;
            background: #12131a;
            border: 1px solid var(--line);
            border-radius: var(--radius-xl);
            display: grid;
            align-content: start;
            gap: 10px;
            transition: transform .2s ease, box-shadow .2s ease
        }

        .t-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, .3)
        }

        .t-item .dot {
            display: none;
        }

        .t-item h3 {
            margin: 0;
            font-size: 18px;
            line-height: 1.25;
            color: var(--text)
        }

        .t-item .meta {
            color: var(--muted);
            font-size: 13px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px
        }

        .t-item ul {
            margin: 0;
            padding-left: 20px
        }

        .t-item li {
            margin-bottom: 6px;
            line-height: 1.5
        }

        .t-item li:last-child {
            margin-bottom: 0
        }

        .certs {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px
        }

        /* Reveal animations */
        .reveal {
            opacity: 0;
            transform: translateY(14px);
            transition: opacity .6s ease, transform .6s ease
        }

        .reveal.in {
            opacity: 1;
            transform: translateY(0)
        }

        @media (prefers-reduced-motion: reduce) {
            .reveal,
            .reveal.in {
                transition: none;
                opacity: 1;
                transform: none
            }
        }

        .linkedin-posts {
            display: grid;
            gap: 18px;
            margin-top: 24px
        }

        .linkedin-post {
            background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02));
            border: 1px solid rgba(255, 255, 255, .08);
            border-radius: var(--radius-xl);
            padding: 20px;
            transition: transform .2s ease, border-color .2s ease
        }

        .linkedin-post:hover {
            transform: translateY(-2px);
            border-color: rgba(255, 255, 255, .14)
        }

        .linkedin-post-text {
            color: var(--text);
            line-height: 1.6;
            margin: 0 0 12px;
            white-space: pre-wrap;
            word-wrap: break-word
        }

        .linkedin-post-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            font-size: 13px;
            color: var(--muted);
            padding-top: 12px;
            border-top: 1px solid rgba(255, 255, 255, .06)
        }

        .linkedin-post-link {
            color: var(--brand-2);
            text-decoration: none;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 6px
        }

        .linkedin-post-link:hover {
            text-decoration: underline
        }

        .linkedin-loading,
        .linkedin-empty {
            text-align: center;
            padding: 40px 20px;
            color: var(--muted)
        }

        .linkedin-connect {
            text-align: center;
            padding: 40px 20px
        }

        .linkedin-connect-btn {
            display: inline-block;
            margin-top: 16px
        }

        .cert {
            display: grid;
            grid-template-columns: 52px 1fr;
            gap: 14px;
            align-items: start;
            padding: 16px;
            border-radius: var(--radius-xl);
            background: #12131a;
            border: 1px solid var(--line);
            transition: all .3s ease;
        }

        .cert:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, .3);
        }

        .cert-logo-wrap {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            background: rgba(255, 255, 255, .06);
            border: 1px solid rgba(255, 255, 255, .1);
            display: grid;
            place-items: center;
            flex-shrink: 0
        }

        .cert-logo-wrap--generic {
            opacity: .75
        }

        .cert-logo-wrap--generic .icon {
            width: 22px;
            height: 22px;
            flex: 0 0 22px;
            color: var(--muted)
        }

        .cert-logo {
            width: 40px;
            height: auto;
            object-fit: contain;
            filter: brightness(0) invert(1);
            opacity: .92
        }

        .cert-body strong {
            display: block;
            line-height: 1.35
        }

        .cert-body .p-meta {
            margin-top: 6px
        }

        /* Contact — right column matches form card surface; inner boxes slightly elevated */
        .card.contact-right {
            background: #0b1220;
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 20px;
            padding: 24px;
        }

        .contact-right h3 {
            color: #e5e7eb;
        }

        .contact-right p {
            color: #9ca3af;
        }

        .contact-title {
            margin: 0 0 8px;
            font-size: 18px;
            font-weight: 700;
        }

        .contact-intro {
            margin: 0 0 18px;
            font-size: 14px;
            line-height: 1.55;
        }

        .contact-cols {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
            align-items: stretch;
        }

        @media (max-width: 760px) {
            .contact-cols {
                grid-template-columns: 1fr;
            }
        }

        .contact-box {
            background: #0f172a;
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 14px;
            padding: 16px;
        }

        .contact-row {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 12px 0;
        }

        .contact-row-icon {
            width: 18px;
            height: 18px;
            flex: 0 0 18px;
            margin-top: 2px;
            color: #9ca3af;
        }

        .contact-row-text {
            min-width: 0;
            flex: 1;
            color: #9ca3af;
        }

        .contact-label {
            display: block;
            color: #9ca3af;
            font-size: 12px;
            letter-spacing: 1px;
            margin-bottom: 4px;
        }

        .contact-value {
            color: #22d3ee;
            font-weight: 500;
            text-decoration: none;
            font-size: 14px;
            word-break: break-word;
        }

        .contact-value:hover {
            color: #22d3ee;
            text-decoration: underline;
        }

        .divider {
            border: 0;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            margin: 0;
        }

        [dir="rtl"] .contact-row {
            flex-direction: row-reverse;
        }

        [dir="rtl"] .contact-row-text {
            text-align: right;
        }

        [dir="rtl"] .cert {
            grid-template-columns: 1fr 52px
        }

        [dir="rtl"] .cert-logo-wrap {
            order: 2
        }

        [dir="rtl"] .cert-body {
            order: 1;
            text-align: right
        }

        form {
            display: grid;
            gap: 12px
        }

        input,
        textarea {
            width: 100%;
            padding: 12px 14px;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, .12);
            background: #0f1117;
            color: var(--text);
            transition: border-color .2s ease, box-shadow .2s ease;
        }

        input:focus,
        textarea:focus {
            outline: none;
            border-color: rgba(45, 212, 191, .6);
            box-shadow: 0 0 0 3px rgba(45, 212, 191, .15);
        }

        textarea {
            min-height: 130px
        }

        footer {
            padding: 24px 0 80px;
            color: var(--muted);
            text-align: center
        }

        /* Smooth scroll only */
        html {
            scroll-behavior: smooth
        }

        /* ===== Mobile tweaks ===== */
        @media (max-width: 980px) {
            .links {
                display: none
            }

            .menu-btn {
                display: flex
            }

            .hero {
                padding: 60px 0 40px
            }

            .hero-wrap {
                grid-template-columns: 1fr;
                gap: 20px
            }

            .hero h1 {
                font-size: 32px;
                line-height: 1.2
            }

            .lead {
                font-size: 15px;
                line-height: 1.5
            }

            .grid-2,
            .grid-3,
            .certs {
                grid-template-columns: 1fr !important
            }

            .p-grid {
                grid-template-columns: 1fr !important;
                gap: 16px
            }

            .section {
                padding: 28px 0
            }

            .container {
                padding: 0 12px
            }

            .avatar {
                width: 80px;
                height: 80px;
                font-size: 24px
            }

            /* Fix horizontal overflow */
            body {
                overflow-x: hidden
            }

            .container {
                max-width: 100vw;
                box-sizing: border-box
            }

            /* Mobile timeline improvements */
            .timeline::before {
                display: none
            }

            .timeline {
                grid-template-columns: 1fr;
            }

            .t-item {
                padding: 16px;
                margin-bottom: 12px
            }

            .t-item .dot {
                display: none;
            }

            .t-item h3 {
                font-size: 15px;
                line-height: 1.3;
                margin-bottom: 4px;
            }

            .t-item .meta {
                font-size: 11px;
                flex-wrap: wrap;
                margin-bottom: 6px
            }

            .t-item ul {
                padding-left: 12px
            }

            .t-item li {
                font-size: 13px;
                margin-bottom: 6px;
                line-height: 1.4
            }

            /* Mobile project improvements */
            .p-card {
                padding: 18px;
                gap: 12px
            }

            .p-card h3 {
                font-size: 16px;
                line-height: 1.3
            }

            .p-meta {
                font-size: 13px;
                line-height: 1.4
            }

            .p-card ul {
                padding-left: 16px
            }

            .p-card li {
                font-size: 13px;
                margin-bottom: 6px;
                line-height: 1.4
            }

            .cat {
                margin: 16px 0 8px;
                padding: 8px 10px
            }

            .cat .emoji {
                font-size: 16px
            }

            .cat .label {
                font-size: 10px;
                padding: 2px 6px
            }

            /* Mobile hero improvements */
            .eyebrow {
                font-size: 11px
            }

            /* Show the language selector placed next to the menu button on small screens */
            /* show compact button on mobile, hide desktop select inside links */
            .lang-btn { display: inline-flex !important; }
            .links select#languageSelect { display: none !important; }

            .eyebrow .chip {
                padding: 4px 8px;
                font-size: 10px  
            }

            .cta {
                gap: 8px;
                margin-top: 16px
            }

            .btn {
                padding: 10px 12px;
                font-size: 13px
            }

            /* Mobile card improvements */
            .card {
                padding: 16px
            }

            .section h2 {
                font-size: 24px;
                margin-bottom: 8px
            }

            .section p.sub {
                font-size: 14px;
                margin-bottom: 20px
            }

            /* Mobile form improvements */
            input,
            textarea {
                padding: 10px 12px;
                font-size: 14px
            }

            textarea {
                min-height: 100px
            }
        }

        /* Extra small mobile */
        @media (max-width: 480px) {
            .hero h1 {
                font-size: 28px
            }

            .lead {
                font-size: 14px
            }

            .container {
                padding: 0 8px
            }

            .section {
                padding: 22px 0
            }

            .p-card {
                padding: 16px
            }

            .t-item {
                padding: 14px 10px
            }

            .btn {
                padding: 8px 10px;
                font-size: 12px
            }

            /* Extra small mobile project improvements */
            .p-card h3 {
                font-size: 15px
            }

            .p-meta {
                font-size: 12px
            }

            .p-card li {
                font-size: 12px
            }
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto
            }
        }