*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --black: #080808;
            --off-white: #f5f2ed;
            --muted: #888;
            --accent: #e8c96d;
            --accent-dim: rgba(232,201,109,0.15);
            --glass: rgba(255,255,255,0.04);
            --border: rgba(255,255,255,0.08);
            --card-bg: #111;
        }

        body {
            font-family: 'DM Sans', sans-serif;
            background: #fff;
            color: #111;
            line-height: 1.5;
        }

        /* ── NAVBAR ─────────────────────────────────── */
        .navbar {
            position: sticky; top: 0; width: 100%;
            background: #fff;
            border-bottom: 1px solid #e5e5e5;
            z-index: 1000;
        }
        .navbar-inner {
            max-width: 1200px; margin: 0 auto;
            display: flex; align-items: center;
            justify-content: space-between;
            padding: 1rem 1.5rem; gap: 2rem;
        }
        .brand {
            font-family: 'Syne', sans-serif;
            font-size: 1rem; font-weight: 800;
            letter-spacing: -0.02em; color: #080808;
            white-space: nowrap;
        }
        .nav-menu { display: flex; align-items: center; gap: 0.5rem; flex: 1; justify-content: center; }
        .nav-menu a {
            color: #565656; text-decoration: none;
            font-size: 0.9rem; padding: 0.5rem 0.75rem;
            border-radius: 0.375rem; transition: all 0.15s;
        }
        .nav-menu a:hover { color: #080808; background: #f0f0f0; }
        .button-cv {
            background: #080808; color: #fff;
            border: none; padding: 0.6rem 1.2rem;
            border-radius: 0.6rem; font-size: 0.88rem;
            font-weight: 600; cursor: pointer;
            transition: all 0.2s; white-space: nowrap;
            font-family: 'DM Sans', sans-serif;
        }
        .button-cv:hover { background: #333; }
        .mobile-toggle {
            display: none; background: none; border: none;
            color: #080808; cursor: pointer;
            font-size: 1.25rem; padding: 0.25rem;
        }

        /* ── HERO ────────────────────────────────────── */
        .hero {
            background: var(--black);
            color: var(--off-white);
            position: relative;
            overflow: hidden;
            min-height: 92vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        /* film grain overlay */
        .hero::before {
            content: '';
            position: absolute; inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
            background-size: 200px 200px;
            opacity: 0.35;
            pointer-events: none;
        }

        /* decorative film strip right side */
        .hero-strip {
            position: absolute; right: -2px; top: 0; bottom: 0;
            width: 60px;
            display: flex; flex-direction: column;
            gap: 0; pointer-events: none;
        }
        .hero-strip-hole {
            flex: 1;
            border-top: 1px solid rgba(255,255,255,0.06);
            display: flex; align-items: center; justify-content: center;
        }
        .hero-strip-hole::after {
            content: '';
            width: 18px; height: 14px;
            border: 1.5px solid rgba(255,255,255,0.1);
            border-radius: 3px;
        }

        /* ambient glow blobs */
        .hero-glow-1 {
            position: absolute; width: 500px; height: 500px;
            background: radial-gradient(circle, rgba(232,201,109,0.08) 0%, transparent 70%);
            top: -100px; right: 100px; pointer-events: none;
        }
        .hero-glow-2 {
            position: absolute; width: 400px; height: 400px;
            background: radial-gradient(circle, rgba(102,126,234,0.07) 0%, transparent 70%);
            bottom: -50px; left: -50px; pointer-events: none;
        }

        .hero-content {
            position: relative; z-index: 2;
            max-width: 1200px; margin: 0 auto;
            padding: 5rem 1.5rem 4rem;
            display: grid;
            grid-template-columns: 1fr 380px;
            gap: 4rem;
            align-items: center;
        }

        

        .hero-tag {
            display: inline-flex; align-items: center; gap: 8px;
            border: 1px solid rgba(232,201,109,0.3);
            color: var(--accent);
            padding: 0.35rem 0.9rem;
            border-radius: 999px;
            font-size: 0.78rem;
            font-weight: 500;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 2rem;
        }
        .hero-tag-dot {
            width: 6px; height: 6px;
            background: var(--accent);
            border-radius: 50%;
            animation: pulse-dot 2s ease-in-out infinite;
        }
        @keyframes pulse-dot {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(0.8); }
        }

        .hero-title {
            font-family: 'Syne', sans-serif;
            font-size: clamp(2.8rem, 5.5vw, 5rem);
            font-weight: 800;
            line-height: 1.0;
            letter-spacing: -0.03em;
            color: var(--off-white);
            margin-bottom: 1.5rem;
        }
        .hero-title .accent-word {
            color: var(--accent);
            font-style: italic;
        }

        .hero-desc {
            font-size: 1.05rem;
            color: rgba(245,242,237,0.55);
            line-height: 1.75;
            max-width: 480px;
            margin-bottom: 2.5rem;
            font-weight: 300;
        }

        .hero-actions {
            display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
        }
        .btn-hero-primary {
            background: var(--accent);
            color: var(--black);
            border: none;
            padding: 0.85rem 2rem;
            border-radius: 0.6rem;
            font-size: 0.95rem;
            font-weight: 700;
            cursor: pointer;
            font-family: 'DM Sans', sans-serif;
            transition: all 0.25s;
            display: inline-flex; align-items: center; gap: 8px;
        }
        .btn-hero-primary:hover { background: #f0d47a; transform: translateY(-2px); }

        .btn-hero-secondary {
            background: transparent;
            color: rgba(245,242,237,0.7);
            border: 1px solid rgba(255,255,255,0.15);
            padding: 0.85rem 2rem;
            border-radius: 0.6rem;
            font-size: 0.95rem;
            font-weight: 400;
            cursor: pointer;
            font-family: 'DM Sans', sans-serif;
            transition: all 0.25s;
        }
        .btn-hero-secondary:hover {
            border-color: rgba(255,255,255,0.35);
            color: var(--off-white);
        }

        /* hero right: stats card */
        
        .hero-stats-card {
            background: var(--glass);
            border: 1px solid var(--border);
            border-radius: 1.5rem;
            padding: 2rem;
            backdrop-filter: blur(10px);
        }
        .hero-stats-card-label {
            font-size: 0.72rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.35);
            margin-bottom: 1.5rem;
        }
        .hero-stat-row {
            display: flex; align-items: flex-end;
            justify-content: space-between;
            padding: 1.1rem 0;
            border-bottom: 1px solid var(--border);
        }
        .hero-stat-row:last-child { border-bottom: none; }
        .hero-stat-label {
            font-size: 0.85rem;
            color: rgba(245,242,237,0.5);
            font-weight: 300;
        }
        .hero-stat-value {
            font-family: 'Syne', sans-serif;
            font-size: 1.6rem;
            font-weight: 700;
            color: var(--off-white);
            line-height: 1;
        }
        .hero-stat-value span {
            font-size: 0.85rem;
            color: var(--accent);
            font-family: 'DM Sans', sans-serif;
            font-weight: 400;
            margin-left: 4px;
        }

        /* mini bars inside stat card */
        .hero-bar-group { display: flex; gap: 3px; align-items: flex-end; margin-top: 1.5rem; }
        .hero-bar {
            flex: 1; background: rgba(255,255,255,0.07);
            border-radius: 3px 3px 0 0;
            transition: background 0.2s;
        }
        .hero-bar.lit { background: var(--accent); opacity: 0.8; }

        /* hero bottom: feature pills */
        .hero-pills {
            position: relative; z-index: 2;
            max-width: 1200px; margin: 0 auto;
            padding: 0 1.5rem 4rem;
            display: flex; gap: 1rem; flex-wrap: wrap;
        }
        .hero-pill {
            display: flex; align-items: center; gap: 10px;
            background: var(--glass);
            border: 1px solid var(--border);
            border-radius: 0.75rem;
            padding: 0.75rem 1.25rem;
            color: rgba(245,242,237,0.75);
            font-size: 0.88rem;
        }
        .hero-pill-icon {
            width: 28px; height: 28px;
            background: var(--accent-dim);
            border-radius: 6px;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.9rem;
        }

        /* ── SERVICES (unchanged styling) ─────────────── */
        .services-section { max-width: 1200px; margin: 0 auto; padding: 5rem 1.5rem; }
        .section-title {
            font-family: 'Syne', sans-serif;
            font-size: clamp(1.8rem, 4vw, 2.5rem);
            font-weight: 800; text-align: center;
            margin-bottom: 1rem; letter-spacing: -0.03em;
        }
        .section-subtitle {
            color: #565656; font-size: 1rem; text-align: center;
            margin-bottom: 3rem; max-width: 600px;
            margin-left: auto; margin-right: auto;
            font-weight: 300;
        }
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 1.5rem; margin-top: 3rem;
        }
        .service-card {
            background: #fafafa;
            border: 1px solid #ebebeb;
            border-radius: 1.2rem;
            padding: 2rem 1.75rem; text-align: left;
            transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
            position: relative; overflow: hidden;
        }
        .service-card::after {
            content: ''; position: absolute;
            top: 0; left: 0; right: 0; height: 2px;
            background: linear-gradient(90deg, #667eea, #764ba2);
            transform: scaleX(0); transform-origin: left;
            transition: transform 0.35s ease;
        }
        .service-card:hover { transform: translateY(-5px); box-shadow: 0 14px 40px rgba(0,0,0,0.08); border-color: #d8d8d8; }
        .service-card:hover::after { transform: scaleX(1); }
        .service-icon-box {
            width: 44px; height: 44px;
            background: #111;
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.2rem; margin-bottom: 1.2rem;
        }
        .service-name { font-family: 'Syne', sans-serif; font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; color: #080808; }
        .service-description { font-size: 0.88rem; color: #666; line-height: 1.65; font-weight: 300; }

        /* ── PROJECTS ─────────────────────────────────── */
        .projects-section {
            background: #080808;
            padding: 6rem 1.5rem;
        }
        .projects-inner { max-width: 1200px; margin: 0 auto; }
        .projects-section .section-title { color: #f5f2ed; }
        .projects-section .section-subtitle { color: rgba(245,242,237,0.45); }

        .projects-filter {
            display: flex; gap: 0.5rem; justify-content: center;
            flex-wrap: wrap; margin-bottom: 3rem;
        }
        .filter-btn {
            background: transparent;
            border: 1px solid rgba(255,255,255,0.1);
            color: rgba(245,242,237,0.5);
            padding: 0.45rem 1rem;
            border-radius: 999px;
            font-size: 0.83rem;
            cursor: pointer;
            font-family: 'DM Sans', sans-serif;
            transition: all 0.2s;
        }
        .filter-btn:hover, .filter-btn.active {
            background: var(--accent);
            border-color: var(--accent);
            color: #080808;
            font-weight: 600;
        }

        .projects-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5px;
        }

        .project-card {
            position: relative;
            aspect-ratio: 16/10;
            overflow: hidden;
            background: #111;
            cursor: pointer;
        }

        /* thumbnail gradient backgrounds – each unique */
        .project-card:nth-child(1) .project-thumb { background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460); }
        .project-card:nth-child(2) .project-thumb { background: linear-gradient(135deg, #1e0a00, #3d1a00, #7a3500); }
        .project-card:nth-child(3) .project-thumb { background: linear-gradient(135deg, #001a1a, #003333, #004d40); }
        .project-card:nth-child(4) .project-thumb { background: linear-gradient(135deg, #1a001a, #330033, #4d0066); }
        .project-card:nth-child(5) .project-thumb { background: linear-gradient(135deg, #001a00, #003300, #004d00); }
        .project-card:nth-child(6) .project-thumb { background: linear-gradient(135deg, #1a1a00, #333300, #4d4d00); }

        .project-thumb {
            position: absolute; inset: 0;
            display: flex; align-items: center; justify-content: center;
            transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
        }
        .project-card:hover .project-thumb { transform: scale(1.08); }

        /* abstract film-reel icon */
        .project-thumb-icon {
            font-size: 3rem;
            opacity: 0.25;
            filter: grayscale(100%);
            transition: opacity 0.4s;
        }
        .project-card:hover .project-thumb-icon { opacity: 0; }

        /* scan line overlay */
        .project-scanlines {
            position: absolute; inset: 0; pointer-events: none;
            background: repeating-linear-gradient(
                0deg,
                transparent,
                transparent 2px,
                rgba(0,0,0,0.08) 2px,
                rgba(0,0,0,0.08) 4px
            );
        }

        /* hover overlay */
        .project-overlay {
            position: absolute; inset: 0;
            background: rgba(8,8,8,0.82);
            display: flex; flex-direction: column;
            justify-content: flex-end;
            padding: 1.5rem;
            opacity: 0;
            transition: opacity 0.35s ease;
        }
        .project-card:hover .project-overlay { opacity: 1; }

        /* always-visible bottom label */
        .project-label {
            position: absolute; bottom: 0; left: 0; right: 0;
            padding: 1rem 1.25rem 1rem;
            background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
            transition: opacity 0.3s;
        }
        .project-card:hover .project-label { opacity: 0; }

        .project-label-title {
            font-family: 'Syne', sans-serif;
            font-size: 0.95rem; font-weight: 700;
            color: #fff; margin-bottom: 0.25rem;
        }
        .project-label-sub {
            font-size: 0.75rem; color: rgba(255,255,255,0.5);
        }

        .project-overlay-title {
            font-family: 'Syne', sans-serif;
            font-size: 1.1rem; font-weight: 700;
            color: #fff; margin-bottom: 0.5rem;
        }
        .project-overlay-desc {
            font-size: 0.82rem; color: rgba(255,255,255,0.6);
            line-height: 1.55; margin-bottom: 1rem;
            font-weight: 300;
        }
        .project-tags {
            display: flex; gap: 0.4rem; flex-wrap: wrap;
            margin-bottom: 1rem;
        }
        .ptag {
            font-size: 0.72rem; font-weight: 600;
            letter-spacing: 0.05em;
            padding: 0.25rem 0.6rem;
            border-radius: 999px;
            background: rgba(232,201,109,0.15);
            color: var(--accent);
            border: 1px solid rgba(232,201,109,0.2);
        }
        .project-view-btn {
            display: inline-flex; align-items: center; gap: 6px;
            background: var(--accent);
            color: #080808; border: none;
            padding: 0.55rem 1rem;
            border-radius: 0.5rem;
            font-size: 0.82rem; font-weight: 700;
            cursor: pointer; font-family: 'DM Sans', sans-serif;
            transition: background 0.2s; width: fit-content;
        }
        .project-view-btn:hover { background: #f0d47a; }

        /* featured card (spans 2 cols) */
        .project-card.featured { grid-column: span 2; }

        /* ── SKILLS ───────────────────────────────────── */
        .skills-section { padding: 6rem 1.5rem; background: #fff; }
        .skills-inner { max-width: 1200px; margin: 0 auto; }

        .skills-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1.5rem;
            margin-top: 3rem;
        }

        .skill-card {
            background: #fafafa;
            border: 1px solid #ebebeb;
            border-radius: 1.2rem;
            padding: 2rem 1.75rem;
            transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
            position: relative;
            overflow: hidden;
        }
        .skill-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.08);
            border-color: #d0d0d0;
        }

        /* colored top accent per skill */
        .skill-card[data-color="blue"]  { --sk: #3b82f6; }
        .skill-card[data-color="red"]   { --sk: #ef4444; }
        .skill-card[data-color="amber"] { --sk: #e8c96d; }
        .skill-card[data-color="teal"]  { --sk: #14b8a6; }
        .skill-card[data-color="purple"]{ --sk: #8b5cf6; }

        .skill-card::before {
            content: '';
            position: absolute; top: 0; left: 0; right: 0; height: 3px;
            background: var(--sk, #ddd);
        }

        .skill-icon-wrap {
            width: 52px; height: 52px;
            background: var(--sk, #ddd);
            border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.5rem;
            margin-bottom: 1.25rem;
            opacity: 0.9;
        }

        .skill-name {
            font-family: 'Syne', sans-serif;
            font-size: 1rem; font-weight: 700;
            color: #080808; margin-bottom: 0.25rem;
        }
        .skill-level-label {
            font-size: 0.78rem; color: #999;
            margin-bottom: 1rem;
            display: flex; align-items: center; gap: 6px;
        }
        .skill-level-dot {
            width: 6px; height: 6px; border-radius: 50%;
            background: var(--sk, #ddd);
        }

        /* segmented progress bar */
        .skill-bar {
            display: flex; gap: 4px; margin-bottom: 1rem;
        }
        .skill-seg {
            height: 4px; border-radius: 999px; flex: 1;
            background: #e5e5e5;
            transition: background 0.4s;
        }
        .skill-seg.filled { background: var(--sk, #ddd); }

        .skill-desc {
            font-size: 0.84rem; color: #666;
            line-height: 1.6; font-weight: 300;
        }

        /* ── PRICING (light clean update) ────────────── */
        .pricing-section { max-width: 1200px; margin: 0 auto; padding: 5rem 1.5rem; }
        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem; margin-top: 3rem;
        }
        .pricing-card {
            border: 1px solid #ebebeb;
            border-radius: 1.2rem;
            padding: 2.5rem 2rem;
            background: #fafafa;
            transition: all 0.3s ease;
            position: relative;
        }
        .pricing-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.08); }
        .pricing-card.featured {
            background: #080808; color: #f5f2ed;
            border-color: #080808;
        }
        .pricing-card.featured::before {
            content: 'POPULAR';
            position: absolute; top: -12px; left: 50%;
            transform: translateX(-50%);
            background: var(--accent);
            color: #080808;
            padding: 0.35rem 0.9rem;
            border-radius: 999px;
            font-size: 0.7rem; font-weight: 800;
        }
        .pricing-name {
            font-family: 'Syne', sans-serif;
            font-size: 1.1rem; font-weight: 700;
            margin-bottom: 1rem;
        }
        .pricing-price {
            font-family: 'Syne', sans-serif;
            font-size: 2.8rem; font-weight: 800;
            letter-spacing: -0.03em;
            margin-bottom: 0.25rem;
        }
        .pricing-period { color: #999; font-size: 0.88rem; margin-bottom: 1.5rem; }
        .pricing-card.featured .pricing-period { color: rgba(255,255,255,0.4); }
        .pricing-features { list-style: none; margin: 1.5rem 0; }
        .pricing-features li {
            padding: 0.55rem 0;
            font-size: 0.88rem;
            color: #555;
            border-bottom: 1px solid #f0f0f0;
            display: flex; align-items: center; gap: 8px;
        }
        .pricing-card.featured .pricing-features li { color: rgba(245,242,237,0.65); border-color: rgba(255,255,255,0.08); }
        .pricing-features li::before { content: '✓'; font-weight: 700; color: #080808; font-size: 0.8rem; }
        .pricing-card.featured .pricing-features li::before { color: var(--accent); }
        .pricing-btn {
            width: 100%; padding: 0.85rem;
            margin-top: 1rem;
            background: #080808; color: #fff;
            border: none; border-radius: 0.7rem;
            font-weight: 700; cursor: pointer;
            font-family: 'DM Sans', sans-serif;
            font-size: 0.9rem; transition: background 0.2s;
        }
        .pricing-btn:hover { background: #333; }
        .pricing-card.featured .pricing-btn {
            background: var(--accent); color: #080808;
        }
        .pricing-card.featured .pricing-btn:hover { background: #f0d47a; }

        /* ── CONTACT ──────────────────────────────────── */
        .contact-section { background: #f5f2ed; padding: 5rem 1.5rem; }
        .contact-inner { max-width: 700px; margin: 3rem auto 0; }
        .contact-form {
            background: #fff; border: 1px solid #e5e5e5;
            border-radius: 1.2rem; padding: 2.5rem;
            margin-bottom: 2.5rem;
        }
        .form-group { margin-bottom: 1.4rem; }
        .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; font-size: 0.88rem; color: #111; }
        .form-group input, .form-group textarea {
            width: 100%; padding: 0.75rem;
            border: 1px solid #e0e0e0;
            border-radius: 0.65rem;
            font-family: inherit; font-size: 0.9rem;
            background: #fafafa;
            transition: border-color 0.2s;
        }
        .form-group input:focus, .form-group textarea:focus {
            outline: none; border-color: #080808;
        }
        .form-group textarea { resize: vertical; min-height: 120px; }
        .submit-btn {
            width: 100%; padding: 0.95rem;
            background: #080808; color: #fff;
            border: none; border-radius: 0.7rem;
            font-weight: 700; font-size: 0.95rem;
            cursor: pointer; font-family: 'DM Sans', sans-serif;
            transition: background 0.2s;
        }
        .submit-btn:hover { background: #333; }
        .social-text { text-align: center; color: #888; font-size: 0.9rem; margin-bottom: 1.5rem; }
        .social-links { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; }
        .social-link {
            display: inline-flex; align-items: center; justify-content: center;
            width: 44px; height: 44px;
            background: #fff; border: 1px solid #e0e0e0;
            border-radius: 0.5rem; color: #111;
            text-decoration: none; font-size: 1.1rem;
            transition: all 0.2s;
        }
        .social-link:hover { background: #080808; color: #fff; border-color: #080808; }

        /* ── FOOTER ───────────────────────────────────── */
        footer { background: #080808; color: #fff; padding: 3rem 1.5rem; }
        .footer-content {
            max-width: 1200px; margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 2rem; margin-bottom: 2rem;
        }
        .footer-section h3 {
            font-family: 'Syne', sans-serif;
            font-size: 0.95rem; font-weight: 700;
            margin-bottom: 1rem;
        }
        .footer-section ul { list-style: none; }
        .footer-section ul li { margin-bottom: 0.65rem; }
        .footer-section a { color: rgba(255,255,255,0.5); text-decoration: none; font-size: 0.88rem; transition: color 0.2s; }
        .footer-section a:hover { color: #fff; }
        .footer-section p { color: rgba(255,255,255,0.5); font-size: 0.88rem; line-height: 1.6; }
        .footer-divider { height: 1px; background: rgba(255,255,255,0.07); margin: 2rem 0; }
        .footer-bottom {
            max-width: 1200px; margin: 0 auto;
            display: flex; justify-content: space-between;
            align-items: center; flex-wrap: wrap; gap: 1rem;
        }
        .footer-copyright { font-size: 0.82rem; color: rgba(255,255,255,0.35); }
        .footer-social { display: flex; gap: 0.75rem; }
        .footer-social a {
            display: inline-flex; align-items: center; justify-content: center;
            width: 34px; height: 34px;
            background: rgba(255,255,255,0.07); border-radius: 0.375rem;
            color: #fff; text-decoration: none; font-size: 1rem;
            transition: background 0.2s;
        }
        .footer-social a:hover { background: rgba(255,255,255,0.15); }

        /* ── RESPONSIVE ───────────────────────────────── */
        @media (max-width: 900px) {
            .hero-content { grid-template-columns: 1fr; gap: 3rem; }
            .hero-right { display: none; }
            .projects-grid { grid-template-columns: repeat(2, 1fr); }
            .project-card.featured { grid-column: span 2; }
        }
        @media (max-width: 640px) {
            .navbar-inner { padding: 0.75rem 1rem; gap: 0.75rem; }
            .mobile-toggle { display: block; }
            .nav-menu {
                position: absolute; top: 100%; left: 0; right: 0;
                background: #fff; border-bottom: 1px solid #e5e5e5;
                flex-direction: column; align-items: stretch; gap: 0;
                display: none; padding: 0.5rem 0;
                justify-content: flex-start;
            }
            .nav-menu.show { display: flex; }
            .nav-menu a { text-align: left; padding: 0.75rem 1rem; border-radius: 0; }
            .button-cv { margin: 0.5rem 1rem; }
            .hero-content { padding: 3.5rem 1.25rem 2.5rem; }
            .hero-pills { padding: 0 1.25rem 3rem; }
            .projects-grid { grid-template-columns: 1fr; }
            .project-card.featured { grid-column: span 1; }
            .skills-grid { grid-template-columns: 1fr; }
            .pricing-grid { grid-template-columns: 1fr; }
            .footer-content { grid-template-columns: 1fr; }
            .footer-bottom { flex-direction: column; text-align: center; }
            .footer-social { justify-content: center; }
        }