:root{
        --bg-dark: #071024; /* deep navy */
        --panel: #0f1724;
        --muted: #9aa6b2;
        --text: #e6eef6;
        --gold: #c59d5f; /* primary luxury accent */
        --accent-2: #7ab7d7; /* secondary cool */
        --glass: rgba(255,255,255,0.04);
        --radius: 14px;
        --container: 1200px;
        --shadow-strong: 0 30px 60px rgba(2,6,23,0.45);
        --shadow-soft: 0 10px 30px rgba(2,6,23,0.28);
        --focus: 3px solid rgba(197,157,95,0.15);
    }

    /* Za webkit bazirane browser-e (Chrome, Edge, Safari) */
    ::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    ::-webkit-scrollbar-track {
        background: var(--panel); /* tamna pozadina šine */
        border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb {
        background: var(--gold);
        border-radius: 10px;
        border: 3px solid var(--panel); /* razmak oko klizača za "ubrizgavanje" efekta */
        transition: background-color 0.3s ease;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #b3882f; /* tamnija zlatna na hover */
    }

    *{
        box-sizing:border-box;
        scrollbar-width: thin;
        scrollbar-color: var(--gold) var(--panel);
    }

    html,body{
        height:100%;
    }

    body{
        overflow-x: hidden;
        margin:0;
        font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Arial;
        color:var(--text);
        background:linear-gradient(180deg,var(--bg-dark),#0b1420);
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        -webkit-font-smoothing:antialiased;
    }

    .container{
        max-width:var(--container);
        margin:0 auto;
        padding:0 1rem;
    }

    /* Accessibility */
    .skip-link{
        position:absolute;
        left:1rem;
        top:0;
        transform:translateY(-120%);
        background:#111;
        color:#fff;
        padding:.5rem .75rem;
        border-radius:6px;
        z-index:2000;
    }

    .skip-link:focus{
        transform:translateY(0);
    }

    .sr-only{
        position:absolute;
        width:1px;
        height:1px;
        padding:0;
        margin:-1px;
        overflow:hidden;
        clip:rect(0 0 0 0);
        white-space:nowrap;
        border:0;
    }

    /* Header */
    .header {
        position: fixed;
        inset: 0 0 auto 0;
        z-index: 1200;
        padding: 0.75rem 0;
        transition: backdrop-filter 0.24s ease, box-shadow 0.24s ease, background-color 0.24s ease;
        background: rgba(7, 16, 36, 0.1);
    }

    .header.scrolled {
        backdrop-filter: blur(12px);
        background: rgba(7, 16, 36, 0.85);
        box-shadow: 0 6px 30px rgba(2, 6, 23, 0.45);
    }

    .header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }

    .brand {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        z-index: 1201;
    }

    .brand__logo {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    }

    .brand__title {
        font-weight: 700;
        font-family: 'Playfair Display', serif;
        font-size: 1.125rem;
        color: var(--text);
    }

    .brand__tag {
        font-size: 0.78rem;
        color: var(--muted);
        display: block;
    }

    /* Navigation */
    .nav {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .nav-list {
        display: flex;
        gap: 0.75rem;
        list-style: none;
        margin: 0;
        padding: 0;
        align-items: center;
    }

    .nav-list a {
        color: var(--text);
        text-decoration: none;
        background: transparent;
        padding: 0.5rem 0.75rem;
        border-radius: 10px;
        font-weight: 500;
        opacity: 0.9;
        transition: all 0.3s ease;
        position: relative;
    }

    .nav-list a:hover {
        background: linear-gradient(90deg, rgba(197, 157, 95, 0.06), rgba(122, 183, 215, 0.03));
        box-shadow: var(--shadow-soft);
        transform: translateY(-2px);
        opacity: 1;
    }

    .nav-list a:focus-visible {
        outline: 2px solid var(--gold);
        outline-offset: 2px;
    }

    .nav-list.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Mobile Navigation Toggle */
    .nav-toggle {
        display: none;
        background: transparent;
        border: 0;
        color: var(--text);
        padding: 0.5rem;
        border-radius: 8px;
        cursor: pointer;
        z-index: 1201;
        transition: all 0.3s ease;
        position: relative;
        width: 44px;
        height: 44px;
        justify-content: center;
        align-items: center;
    }

    .nav-toggle:hover {
        background: rgba(255, 255, 255, 0.05);
    }

    .nav-toggle:focus-visible {
        outline: 2px solid var(--gold);
        outline-offset: 2px;
    }

    /* Hamburger Icon */
    .nav-toggle::before,
    .nav-toggle::after,
    .nav-toggle span {
        content: '';
        display: block;
        width: 20px;
        height: 2px;
        background: var(--text);
        transition: all 0.3s ease;
        position: absolute;
    }

    .nav-toggle span {
        opacity: 1;
    }

    .nav-toggle::before {
        transform: translateY(-6px);
    }

    .nav-toggle::after {
        transform: translateY(6px);
    }

    /* Hamburger Animation */
    .nav-toggle[aria-expanded="true"]::before {
        transform: rotate(45deg);
    }

    .nav-toggle[aria-expanded="true"]::after {
        transform: rotate(-45deg);
    }

    .nav-toggle[aria-expanded="true"] span {
        opacity: 0;
    }

    /* Header CTA */
    .header-cta .btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    .header.scrolled{
        backdrop-filter: blur(8px);
        box-shadow:0 6px 30px rgba(2,6,23,0.45);
    }

    .header-cta .btn{
        display:inline-flex;
        align-items:center;
        gap:.5rem;
    }

    /* Buttons */
    .btn{
        display:inline-block;
        padding:.7rem 1rem;
        border-radius:999px;
        text-decoration:none;
        border:0;cursor:pointer;
        font-weight:600;
    }

    .btn--primary{
        background:linear-gradient(90deg,var(--gold),#a97a3f);
        color:var(--panel);
        box-shadow:0 12px 40px rgba(197,157,95,0.12);
        transition:transform .28s cubic-bezier(.2,.9,.2,1),box-shadow .28s;
    }

    .btn--primary:hover{
        transform:translateY(-6px) scale(1.02);
        box-shadow:var(--shadow-strong);
    }

    .btn--secondary{
        background:transparent;
        border:1px solid rgba(255,255,255,0.06);
        color:var(--text);padding:.6rem .95rem;
    }

    .btn--muted{
        background:transparent;
        border:1px solid rgba(255,255,255,0.04);
        color:var(--muted);
    }

    /* Hero */
    .hero{
        position:relative;
        padding:7.5rem 0 3.5rem;
        overflow:visible;
    }

    .hero__bg{
        position:absolute;
        inset:0;
        z-index:0;
        pointer-events:none;
    }

    .hero__ornament{
        position:absolute;
        left:0;
        right:0;
        top:0;
        height:160px;
        opacity:.6;
        width: 100%;
        height: auto;
        display: block;
    }

    .orn-path{
        stroke-dasharray:1000;
        stroke-dashoffset:1000;
        animation:draw .9s ease-out forwards .2s;
    }

    @keyframes draw{to{stroke-dashoffset:0}}

    .hero__content{
        position:relative;
        display:grid;
        grid-template-columns:1fr 460px;
        gap:2.25rem;
        align-items:center;
        z-index:2;
    }

    .hero-title{
        font-family:'Playfair Display',serif;
        font-size:2.4rem;
        margin:0 0 .5rem;
        color:var(--text);
        letter-spacing:-0.02em;
    }

    .shimmer{
        background:linear-gradient(90deg,#fff,rgba(197,157,95,0.85),#fff);
        -webkit-background-clip:text;
        background-clip:text;
        color:transparent;
        position:relative;
        overflow: hidden;
    }

    .shimmer::after{
        content:'';
        position:absolute;
        left:-30%;
        top:0;
        width: 100%;
        height:100%;
        background:linear-gradient(90deg,transparent,rgba(255,255,255,0.6),transparent);
        transform:skewX(-15deg);
        animation:shimmer 2.8s linear infinite;
    }

    @keyframes shimmer {
    0% {
        transform: translateX(-150%);
    }
    100% {
        transform: translateX(150%);
    }
    }

    .lead{
        color:rgba(230,238,246,0.9);
        margin-bottom:1.25rem;
        font-size:1.05rem;
    }

    .hero__actions{
        display:flex;
        gap:1rem;
        margin-bottom:1rem;
    }

    .hero__meta{
        display:flex;
        gap:1rem;
        list-style:none;
        padding:0;
        margin-top:1rem;
        color:rgba(230,238,246,0.8);
    }

    .hero__figure{
        display:flex;
        justify-content:center;
        align-items:center;
    }

    #hero-image{
        width:420px;
        border-radius:12px;
        box-shadow:var(--shadow-strong);
        transform:translateY(0);
        transition:transform .6s cubic-bezier(.2,.9,.2,1);
    }

    .hero__badge{
        position:absolute;
        right:20px;
        bottom:10px;
        width:72px;
        height:72px;
        opacity:.9;
    }

    /* Sections */
    section{padding:4rem 0}
    h2{
        text-align:center;
        font-size:1.6rem;
        margin-bottom:1rem;
        color:var(--text)
    }

    /* About */
    .about__grid {
        display: flex;
        gap: 2rem;
        align-items: stretch;
    }

    .about__media {
        flex: 1;
        overflow: hidden;
        border-radius: var(--radius);
        display: flex;
    }

    .about__media img {
        width: 100%;
        max-height: 650px;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: var(--radius);
    }

    .about__body {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 1rem;
    }
    #toggle-about {
        margin-top: 1rem;
        font-weight: 600;
        cursor: pointer;
        user-select: none;
        transition: transform 0.3s ease;
    }

    #toggle-about[aria-expanded="true"] {
        transform: rotate(180deg);
    }


    #about-details {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease;
    }

    #about-details[hidden] {
        max-height: 0;
    }

    #about-details:not([hidden]) {
        max-height: 2000px;
    }

    /* Cards */
    .cards{
        display:grid;
        grid-template-columns:
        repeat(auto-fit,minmax(220px,1fr));
        gap:1rem;
    }

    .card{
        background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));
        padding:1.5rem;
        border-radius:12px;
        box-shadow:var(--shadow-soft);
        transition:transform .28s ease,box-shadow .28s;
    }

    .card:hover{
        transform:translateY(-8px);
        box-shadow:var(--shadow-strong);
    }

    .card__icon{
        width:56px;
        height:56px;
        border-radius:10px;
        background:linear-gradient(180deg,rgba(197,157,95,0.06),rgba(122,183,215,0.03));
        display:flex;
        align-items:center;
        justify-content:center;
        margin-bottom:.75rem;
        color:var(--gold);
    }

    /* Projects */
    /* Redesigned projects: responsive grid with overlay cards, sheen and modal preview */
    .projects__wrap{
        display:block;
        margin:0;
    }

    .projects__stage{
        display:grid;
        grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
        gap:1.25rem;
        padding:1rem;
        border-radius:12px;
        align-items:stretch;
    }

    .project-card{
        position: relative;
        overflow: hidden;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        background: linear-gradient(180deg,rgba(255, 255, 255, 0.02),rgba(255, 255, 255, 0.01));
        box-shadow: var(--shadow-soft);
        transition: transform 0.36s cubic-bezier(.2, .9, .2, 1), box-shadow 0.36s;
        min-height: 320px;
    }

    .project-card:hover{
        transform:translateY(-10px) scale(1.01);
        box-shadow:var(--shadow-strong)
    }

    .project-card::after{
        opacity: 0;
        transform: skewX(-15deg) translateX(-150%);
        transition: none;
    }

    .project-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.4s ease;
    }

    .project-card:hover img {
        transform: scale(1.05);
    }


    /* ==========================================================================
    PROJECT CARDS & MEDIA
    ========================================================================== */

    /* Media: enforce consistent aspect ratio and full-bleed cover */
    .project-card__media {
    width: 100%;
    aspect-ratio: 16/10;
    display: block;
    overflow: hidden;
    background: linear-gradient(180deg, #061026, #07162a);
    }

    .project-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.2, 1);
    will-change: transform;
    }

    .project-card:hover .project-card__media img {
    transform: scale(1.06);
    }

    /* Subtle metallic sheen animation for premium look */
    .project-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.03) 18%,
        rgba(197, 157, 95, 0.06) 30%,
        rgba(255, 255, 255, 0.02) 45%,
        rgba(0, 0, 0, 0) 70%
    );
    opacity: 0;
    transform: translateX(-30%);
    transition: opacity 0.6s ease, transform 0.8s ease;
    pointer-events: none;
    mix-blend-mode: overlay;
    }

    .project-card:hover::before {
    opacity: 1;
    transform: translateX(30%);
    }

    /* Overlay meta (title + description) - positioned over image */
    .project-card__meta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem;
    background: linear-gradient(180deg, transparent, rgba(7, 16, 36, 0.78));
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    }

    .project-card__meta h3 {
    font-size: 1.05rem;
    margin: 0;
    color: var(--text);
    line-height: 1.15;
    }

    .project-card__meta p {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.3;
    }

    .project-card .tag {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    display: inline-block;
    color: var(--muted);
    }

    /* Hide carousel navigation on large screens */
    .projects__nav {
    display: none;
    }

    /* ==========================================================================
    PROJECT MODAL
    ========================================================================== */

    .project-modal {
    opacity: 0;
    pointer-events: none;
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2, 6, 23, 0.7);
    z-index: 1400;
    padding: 2rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
    will-change: opacity, transform;
    }

    .project-modal.open {
    opacity: 1;
    pointer-events: auto;
    }

    .project-modal__inner {
    max-width: 1100px;
    width: 100%;
    background: linear-gradient(180deg, #071024, #0b1420);
    border-radius: 12px;
    box-shadow: var(--shadow-strong);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 380px;
    transform: translateY(8px) scale(0.99);
    opacity: 0;
    will-change: transform, opacity;
    transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.2, 1), opacity 0.28s;
    transform: translateY(8px) scale(0.99);
    }

    .project-modal.open .project-modal__inner {
    transform: translateY(0) scale(1);
    opacity: 1;
    }

    .project-modal:not(.open) .project-modal__inner {
    transform: translateY(8px) scale(0.99);
    }

    .project-modal__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    }

    .project-modal__content {
    padding: 1.25rem;
    color: var(--text);
    }

    .project-modal__close {
    position: absolute;
    right: 1rem;
    top: 1rem;
    background: transparent;
    border: 0;
    color: var(--text);
    font-size: 1.1rem;
    cursor: pointer;
    }

    /* Lock background scroll when modal is open */
    body.modal-open {
    overflow: hidden;
    }

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

    .contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
    }

    .contact-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    }

    .contact-card {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 1rem;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
    box-shadow: var(--shadow-soft);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;
    }

    .contact-card:hover {
    transform: translateY(-2px);
    }

    .contact-card .icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background: linear-gradient(
        180deg,
        rgba(197, 157, 95, 0.06),
        rgba(122, 183, 215, 0.03)
    );
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    flex-shrink: 0;
    }

    .contact-card .muted {
    color: var(--muted);
    margin: 0;
    }

    .contact-card div {
    min-width: 0;
    overflow-wrap: break-word;
    }

    /* Contact form */
    .contact-form {
    max-width: 760px;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
    padding: 1.25rem;
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
    }

    .contact-form label {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
    color: var(--muted);
    }

    .contact-form input,
    .contact-form textarea {
    width: 100%;
    padding: 0.9rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    background: transparent;
    color: var(--text);
    font-family: inherit;
    transition: border-color 0.2s ease;
    }

    .contact-form input:focus,
    .contact-form textarea:focus {
    outline: none;
    border-color: rgba(197, 157, 95, 0.3);
    }

    .contact-form textarea {
    resize: vertical;
    min-height: 120px;
    }

    /* Map placeholder */
    .contact-map {
    width: 100%;
    height: 220px;
    border-radius: 12px;
    background: linear-gradient(180deg, #061026, #07162a);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 0.95rem;
    }

    /* Form actions */
    .form-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1rem;
    }

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

    .site-footer {
    background: #04101a;
    color: var(--muted);
    padding: 2rem 0;
    margin-top: 4rem;
    }

    .footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    }

    .footer-nav a {
    color: var(--muted);
    margin-left: 1rem;
    text-decoration: none;
    transition: color 0.2s ease;
    }

    .footer-nav a:hover {
    color: var(--text);
    }

    /* ==========================================================================
    ANIMATIONS & EFFECTS
    ========================================================================== */

    /* Reveal animations */
    [data-reveal] {
    opacity: 0;
    transform: translateY(18px) scale(0.995);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.9, 0.2, 1);
    }

    [data-reveal].in-view {
    opacity: 1;
    transform: translateY(0) scale(1);
    }

    /* Stagger delays for sequential animations */
    [data-reveal].stagger-1 {
    transition-delay: 0.06s;
    }

    [data-reveal].stagger-2 {
    transition-delay: 0.12s;
    }

    [data-reveal].stagger-3 {
    transition-delay: 0.18s;
    }

    /* Parallax effect */
    .parallax {
    transform: translateY(var(--parallax, 0px));
    transition: transform 0.2s linear;
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
        .orn-path{animation:none}
        .shimmer::after{animation:none}
        [data-reveal]{transition:none}
    }

    /* Responsive */
    /* ===== RESPONSIVE MEDIA QUERIES ===== */

    /* Large Desktop (1400px+) */
    @media (min-width: 1400px) {
        .container {
            max-width: 1400px;
        }

        .hero-title {
            font-size: 3rem;
        }

        .hero__content {
            grid-template-columns: 1fr 520px;
            gap: 3rem;
        }

        #hero-image {
            width: 480px;
        }

        .projects__stage {
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 1.5rem;
        }
    }

    /* Desktop (1200px - 1399px) */
    @media (max-width: 1399px) {
        .container {
            max-width: 1200px;
        }
    }

    /* Large Tablet/Small Desktop (1000px - 1199px) */
    @media (max-width: 1199px) {
        .container {
            max-width: 1000px;
            padding: 0 1.5rem;
        }

        .hero__content {
            grid-template-columns: 1fr 400px;
            gap: 2rem;
        }

        #hero-image {
            width: 380px;
        }

        .hero-title {
            font-size: 2.2rem;
        }

        .contact-grid {
            grid-template-columns: 380px 1fr;
            gap: 1rem;
        }
    }

    /* Tablet (768px - 1000px) */
    @media (max-width: 1000px) {
        .nav-toggle {
            display: inline-flex;
        }

        .nav-list {
            display: none;
            height: 100vh;
            position: fixed;
            inset: 0;
            background: linear-gradient(180deg, rgba(7,16,36,0.95), rgba(12,24,45,0.98));
            backdrop-filter: blur(18px);
            flex-direction: column;
            width: 100%;
            justify-content: center;
            align-items: center;
            gap: 2.5rem;
            margin: 0;
            padding: 3rem 2rem;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10%);
            transition: opacity 0.4s cubic-bezier(0.2, 0.9, 0.2, 1), transform 0.4s cubic-bezier(0.2, 0.9, 0.2, 1);
            z-index: 1200;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: var(--gold) rgba(7,16,36,0.15);
        }

        .nav-list.open {
            display: flex;
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .nav-list a {
            font-family: 'Playfair Display', serif;
            font-size: 2rem;
            font-weight: 700;
            border: 1px solid rgba(197,157,95,0.2);
            background: rgba(197,157,95,0.1);
            letter-spacing: 0.05em;
            color: var(--gold);
            text-decoration: none;
            text-shadow: 0 0 4px rgba(197,157,95,0.9);
            transition: color 0.3s ease, text-shadow 0.3s ease;
        }

        .nav-list a:hover,
        .nav-list a:focus {
            color: #fff;
            text-shadow: 0 0 16px var(--gold);
            outline: none;
            transform: scale(1.05);
        }

        .header-cta {
            position: fixed;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1201;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease 0.2s;
        }

        .nav-list.open ~ .header-cta {
            opacity: 1;
            visibility: visible;
        }

        /* Prevent body scroll when menu is open */
        body.nav-open {
            overflow: hidden;
        }

        .hero {
            padding: 6rem 0 3rem;
        }

        .hero__content {
            grid-template-columns: 1fr;
            text-align: center;
            gap: 2.5rem;
        }

        #hero-image {
            width: 100%;
            max-width: 520px;
            margin: 0 auto;
        }

        .hero-title {
            font-size: 2rem;
        }

        .nav-list {
            display: none;
        }

        .nav-toggle {
            display: inline-flex;
            font-size: 1.2rem;
            padding: 0.5rem;
        }

        .shimmer::after{
            left:-20%;
            width: 60%;
        }

        .about__grid {
            flex-direction: column;
            gap: 1.5rem;
        }

        .about__media img {
            max-height: 400px;
        }

        .contact-grid {
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }

        .contact-map {
            height: 200px;
        }

        .projects__stage {
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 1rem;
            padding: 0.5rem;
        }

        .project-modal__inner {
            grid-template-columns: 1fr;
            max-width: 90vw;
        }

        .cards {
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
        }

        section {
            padding: 3rem 0;
        }
    }

    /* Small Tablet (600px - 767px) */
    @media (max-width: 767px) {
        .hero {
            padding: 5rem 0 2.5rem;
        }

        .hero-title {
            font-size: 1.8rem;
            line-height: 1.2;
        }

        .lead {
            font-size: 1rem;
        }

        .hero__actions {
            flex-direction: column;
            align-items: center;
            gap: 0.75rem;
        }

        .hero__meta {
            flex-direction: column;
            gap: 0.5rem;
            text-align: center;
        }

        .brand__title {
            font-size: 1rem;
        }

        .brand__tag {
            display: none;
        }

        .header {
            padding: 0.5rem 0;
        }

        .nav {
            gap: 0.5rem;
        }

        .btn {
            padding: 0.6rem 0.9rem;
            font-size: 0.9rem;
        }

        h2 {
            font-size: 1.4rem;
        }

        .cards {
            grid-template-columns: 1fr;
            gap: 0.75rem;
        }

        .card {
            padding: 1.25rem;
        }

        .projects__stage {
            grid-template-columns: 1fr;
            gap: 1rem;
        }

        .project-card {
            min-height: 280px;
        }

        .project-card__media {
            aspect-ratio: 16/9;
        }

        .contact-form {
            padding: 1rem;
        }

        .form-actions {
            flex-direction: column;
        }

        .footer-inner {
            flex-direction: column;
            text-align: center;
            gap: 1rem;
        }

        .footer-nav a {
            margin: 0 0.5rem;
        }

        section {
            padding: 2.5rem 0;
        }
    }

    /* Mobile (480px - 599px) */
    @media (max-width: 599px) {
        .brand__title {
            font-size: 1rem;
        }

        .brand__tag {
            display: none;
        }

        .brand__logo {
            width: 32px;
            height: 32px;
        }

        .header {
            padding: 0.5rem 0;
        }

        .nav-list a {
            font-size: 1.5rem;
            min-width: 180px;
        }

        .hero {
            padding: 4.5rem 0 2rem;
        }

        .hero-title {
            font-size: 1.6rem;
        }

        .hero__content {
            gap: 2rem;
        }

        .brand {
            gap: 0.5rem;
        }

        .brand__logo {
            width: 32px;
            height: 32px;
        }

        .project-card {
            min-height: 240px;
        }

        .project-card__meta {
            padding: 0.75rem;
        }

        .project-card__meta h3 {
            font-size: 0.95rem;
        }

        .project-card__meta p {
            font-size: 0.85rem;
        }

        .project-modal {
            padding: 1rem;
        }

        .project-modal__content {
            padding: 1rem;
        }

        .contact-card {
            flex-direction: column;
            text-align: center;
            gap: 0.5rem;
        }

        .contact-info .contact-card {
            flex-direction: row;
            text-align: left;
        }

        .contact-form input,
        .contact-form textarea {
            padding: 0.75rem;
        }
    }

    /* Small Mobile (320px - 479px) */
    @media (max-width: 479px) {
        .nav-toggle {
            width: 40px;
            height: 40px;
        }

        .nav-toggle::before,
        .nav-toggle::after,
        .nav-toggle span {
            width: 18px;
        }

        .hero {
            padding: 4rem 0 1.5rem;
        }

        .hero-title {
            font-size: 1.4rem;
            margin-bottom: 0.75rem;
        }

        .lead {
            font-size: 0.9rem;
            margin-bottom: 1rem;
        }

        .header {
            padding: 0.4rem 0;
        }

        .brand__title {
            font-size: 0.9rem;
        }

        .btn {
            padding: 0.55rem 0.8rem;
            font-size: 0.85rem;
        }

        h2 {
            font-size: 1.2rem;
        }

        .card {
            padding: 1rem;
        }

        .card__icon {
            width: 48px;
            height: 48px;
        }

        .project-card {
            min-height: 220px;
        }

        .project-card__meta {
            padding: 0.6rem;
        }

        .contact-form {
            padding: 0.75rem;
        }

        .contact-info .icon-wrap {
            width: 48px;
            height: 48px;
        }

        section {
            padding: 2rem 0;
        }

        .site-footer {
            padding: 1.5rem 0;
        }
    }

    /* Extra Small Mobile (max 320px) */
    @media (max-width: 320px) {
        .hero-title {
            font-size: 1.25rem;
        }

        .hero__actions {
            width: 100%;
        }

        .btn {
            width: 100%;
            text-align: center;
        }

        .project-card {
            min-height: 200px;
        }

        .project-modal {
            padding: 0.5rem;
        }
    }

    /* Landscape Mobile */
    @media (max-height: 500px) and (orientation: landscape) {
        .hero {
            padding: 3rem 0 2rem;
        }

        .hero-title {
            font-size: 1.5rem;
        }

        .hero__content {
            gap: 1.5rem;
        }

        section {
            padding: 2rem 0;
        }
    }

    /* High DPI/Retina Displays */
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        .hero__ornament {
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
        }

        .brand__logo {
            image-rendering: -webkit-optimize-contrast;
        }
    }

    /* Dark mode preference (optional enhancement) */
    @media (prefers-color-scheme: dark) {
        :root {
            --bg-dark: #050f1f;
            --panel: #0a1420;
        }
    }

    /* Reduced motion preferences */
    @media (prefers-reduced-motion: reduce) {
        .orn-path {
            animation: none;
            stroke-dashoffset: 0;
        }

        .shimmer::after {
            animation: none;
        }

        [data-reveal] {
            transition: none;
            opacity: 1;
            transform: none;
        }

        .project-card,
        .card,
        .btn--primary {
            transition: none;
        }

        .project-card:hover,
        .card:hover,
        .btn--primary:hover {
            transform: none;
        }
    }

    /* Print styles */
    @media print {
        .header,
        .nav,
        .hero__actions,
        .project-modal,
        .site-footer {
            display: none;
        }

        body {
            background: white;
            color: black;
        }

        .hero {
            padding: 1rem 0;
        }

        section {
            padding: 1rem 0;
            break-inside: avoid;
        }
    }

    /* Utility */
    .text-muted{
        color:var(--muted);
    }