:root{
    --bg:#0b0e13;
    --bg-2:#0f141b;
    --text:#e8edf3;
    --muted:#9aa4b2;
    --brand:#6ee7ff;
    --brand-2:#a78bfa;
    --svc-icon:48px;
    --svc-icon-sm:40px;
    --border:#1f2733;
    --radius:16px;
    --shadow:0 20px 60px rgba(0,0,0,.45);
    --step--1:clamp(.85rem,.8rem + .25vw,.95rem);
    --step-0:clamp(1rem,.95rem + .4vw,1.125rem);
    --step-1:clamp(1.25rem,1.1rem + 1vw,1.5rem);
    --step-2:clamp(1.6rem,1.4rem + 1.6vw,2.1rem);
    --step-3:clamp(2.2rem,1.8rem + 2.8vw,3rem);
    --container:min(1120px,92vw);
    --gap:clamp(16px,2.5vw,28px);
}

*{
    /* layout */
    box-sizing:border-box
}

html,body{
    /* layout */
    height:100%
}

body{
    /* layout */
    margin:0;

    /* visual-typography-effects */
    font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:var(--step-0);
    line-height:1.55;
    color:var(--text);
    background:var(--bg) /* ✅ samo čista tamna pozadina */
}

.container{
    /* layout */
    width:var(--container);
    margin:0 auto;
    padding:0 var(--gap)
}

/* ===== Top nav (minimal) ===== */
header{
    /* positioning */
    position:sticky;
    top:0;
    z-index:10;

    /* visual-typography-effects */
    backdrop-filter:saturate(140%) blur(10px);
    background:color-mix(in srgb, var(--bg-2) 75%, transparent);
    border-bottom:1px solid var(--border)
}

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

.brand{
    /* layout */
    display:flex;
    align-items:center;
    gap:.7rem;

    /* visual-typography-effects */
    font-weight:800;
    letter-spacing:.2px
}

.badge{
    /* layout */
    width:36px;
    height:36px;
    
    /* visual-typography-effects */
    border-radius:10px;
    background:transparent; /* remove gradient so logo image shows clean */
    box-shadow:none; /* remove heavy shadow to keep icon crisp */
    transition:.12s ease;
    overflow:hidden;
    display:inline-block;
}

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

@media (max-width:480px){
    .badge{ width:28px; height:28px; border-radius:8px }
}

.nav a{
    /* layout */
    margin-left:1.2rem;
    text-decoration:none;

    /* visual-typography-effects */
    color:var(--muted);
    font-weight:600
}

.nav a:hover, .nav a[aria-current="page"]{
    /* visual-typography-effects */
    color:var(--text)
}

/* ===== Hero ===== */
.hero{
    /* positioning */
    position:relative;

    /* layout */
    padding:clamp(48px,6vw,96px) 0;
    overflow:hidden
}

.hero::after{
    /* positioning */
    position:absolute;
    inset:0;
    z-index:-1;
    top: -50px;

    /* layout */
    content:"";
    pointer-events:none;

    /* visual-typography-effects */
    background:radial-gradient(circle at 60% 10%, rgba(167, 139, 250, 0.19), transparent 70%);
    filter:blur(90px);
    transform:scale(0.8)
}

.hero-grid{
    /* layout */
    display:grid;
    gap:var(--gap);
    align-items:center;
    grid-template-columns:1.05fr .95fr
}

.eyebrow{
    /* visual-typography-effects */
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.12em;
    font-weight:700;
    font-size:var(--step--1)
}

h1{
    /* layout */
    margin:.35rem 0 .6rem;

    /* visual-typography-effects */
    font-size:var(--step-3);
    /* slightly larger by default for stronger hero presence */
    font-size: clamp(2.6rem, 3.2vw, 3.2rem);
    line-height:1.05;
    letter-spacing:-.5px
}

.lead{
    /* layout */
    margin:0 0 1.2rem;

    /* visual-typography-effects */
    font-size:var(--step-1);
    color:var(--muted)
}

.cta{
    /* layout */
    display:flex;
    gap:.8rem;
    flex-wrap:wrap
}

.btn{
    /* layout */
    padding:.95rem 1.25rem;
    text-decoration:none;

    /* visual-typography-effects */
    appearance:none;
    border:1px solid var(--border);
    border-radius:60px;
    font-weight:800;
    background:linear-gradient(135deg,var(--brand),var(--brand-2));
    color:#0b0e13;
    box-shadow:var(--shadow);
    transition: .1s ease;
}

.btn:hover{
    /* visual-typography-effects */
    border-radius: 12px;
}

.btn.ghost{
    /* visual-typography-effects */
    background:transparent;
    color:var(--text);
    transition:.1s
}

.btn.ghost:hover{
    /* visual-typography-effects */
    border-color:color-mix(in srgb, var(--brand) 100%, var(--border));
    border-radius:12px
}

.meta{
    /* layout */
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
    margin-top:1rem
}

.chip{
    /* layout */
    padding:.3rem .6rem;

    /* visual-typography-effects */
    font-size:var(--step--1);
    color:var(--muted);
    background:color-mix(in srgb, var(--brand) 10%, transparent);
    border:1px solid var(--border);
    border-radius:999px
}

/* ===== Photo card ===== */
.photo-card{
    /* positioning */
    position:relative;

    /* layout */
    padding:.75rem;
    overflow:hidden;
    aspect-ratio:8/10;
    max-width:400px;
    margin-left:auto;

    /* visual-typography-effects */
    border-radius:calc(var(--radius) + 6px);
    background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 40%),
    var(--bg-2);
    border:1px solid var(--border);
    transition:transform .3s ease;
    box-shadow:0 1px 0 rgba(255,255,255,.03), 0 18px 40px rgba(0,0,0,.35)
}

.photo-card::before{
    /* positioning */
    position:absolute;
    inset:-40% -30% auto -30%;

    /* layout */
    content:"";
    height:55%;
    pointer-events:none;

    /* visual-typography-effects */
    background:radial-gradient(60% 70% at 50% 100%, rgba(110,231,255,.18), transparent 70%);
    filter:blur(18px)
}

.photo-card:hover{
    /* visual-typography-effects */
    transform:scale(1.05)
}

.photo{
    /* layout */
    width:100%;
    height:100%;
    display:block;

    /* visual-typography-effects */
    object-fit:cover;
    border-radius:calc(var(--radius) + 2px);
    filter:contrast(1.02) saturate(1.02) brightness(.88)
}

/* ===== Sections ===== */
.section{
    /* layout */
    padding:clamp(36px,5vw,72px) 0
}

.section h2{
    /* layout */
    margin:0 0 .8rem;

    /* visual-typography-effects */
    font-size:var(--step-2);
    letter-spacing:-.3px
}

.section p{
    /* layout */
    margin:.3rem 0 0;

    /* visual-typography-effects */
    color:var(--muted)
}

/* ===== Footer ===== */
footer{
    /* layout */
    padding:28px 0 48px;

    /* visual-typography-effects */
    border-top:1px solid var(--border);
    color:var(--muted)
}

.foot{
    /* layout */
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    flex-wrap:wrap
}

/* ===== A11y focus ===== */
:where(a,button):focus-visible{
    /* visual-typography-effects */
    outline:2px solid color-mix(in srgb, var(--brand) 60%, white);
    outline-offset:3px;
    border-radius:8px
}


/* ===== SERVICES ===== *//* ===== SERVICES ===== *//* ===== SERVICES ===== */
/* ===== SERVICES ===== *//* ===== SERVICES ===== *//* ===== SERVICES ===== */
/* ===== SERVICES ===== *//* ===== SERVICES ===== *//* ===== SERVICES ===== */

/* ===== SERVICES SECTION ===== */

.services{
    /* a touch more vertical space to separate from hero */
    padding:clamp(56px,6.5vw,112px) 0;
    position:relative;
    overflow:hidden;
}

.services-title{
    /* stronger section heading to establish hierarchy above service cards */
    font-size: var(--step-3);
    margin:0 0 .6rem;
    letter-spacing:-.3px;
    font-weight:800;
    /* subtle brand tint */
    color: color-mix(in srgb, var(--brand-2) 36%, var(--text));
}

.services-sub{
    color:var(--muted);
    margin:0 0 1.6rem;
    max-width:620px;
    font-size:var(--step-0);
}

.services-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:calc(var(--gap) * 1.1);
}

.service-card{
    display:flex;
    flex-direction:column;
    padding:2.25rem;
    background:var(--bg-2);
    border:1px solid var(--border);
    border-radius:calc(var(--radius) + 6px);
    box-shadow:var(--shadow);
    position:relative;
    overflow:hidden;
    transition: .25s ease;
}

.service-card:hover{
    transform:translateY(-6px);
}

.service-card::before{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(167,139,250,0.10), transparent 90%);
    filter:blur(70px);
    opacity:0; 
    transform:translate(-50%, -50%);
    pointer-events:none;
    transition:opacity .2s ease;
}

.service-card.hovering::before{
    opacity:1;
}

/* Responsive: three levels — desktop (default), tablet, and mobile.
   1) <=1120px (tablet): reduce gaps and photo size, keep two-column layout
   2) <=880px  (small tablets / large phones): stack into single column, center photo
   3) <=480px  (phones): tighten spacing and reduce heading/button sizes */

@media (max-width: 1120px) {
    .hero-grid{
        /* keep two columns but shift proportions slightly for narrower viewports */
        grid-template-columns: 1fr .85fr;
        gap: calc(var(--gap) * 0.75);
        align-items: center;
    }

    .photo-card{
        max-width: 360px;
        margin-left: auto;
    }

    h1{
        /* moderate reduction for tablet */
        font-size: clamp(1.9rem, 2.6vw, var(--step-3));
    }
}

@media (max-width: 880px) {
    /* stack into single column: text above, photo below */
    .hero-grid{
        grid-template-columns: 1fr;
        align-items: start;
    }

    .photo-card{
        max-width: 380px;
        width: 85%;
        margin: 1rem auto 0; /* center and add spacing above */
        aspect-ratio: auto 8 / 10; /* allow some flexibility on small viewports */
    }

    /* Center text column and its children when stacked */
    .hero-grid > div:first-child{
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    /* Make the main heading more prominent on stacked layout */
    h1{
        font-size: clamp(1.9rem, 6vw, 2.6rem);
        line-height:1.03;
    }

    /* Reduce the lead (subtext) a bit so it reads smaller relative to the heading */
    .lead{
        font-size: clamp(.95rem, 2.2vw, 1.05rem);
        color:var(--muted);
        max-width: 56ch;
    }

    /* Center CTAs and chips */
    .cta{ justify-content:center }
    .meta{ justify-content:center }
}

@media (max-width: 480px) {
    /* small phones - tighter layout */
    .photo-card{
        width: 92%;
        max-width: 320px;
        margin-top: .8rem;
    }

    /* Make heading more prominent on phones per design request */
    h1{
        /* larger minimum and larger maximum so title reads strong on small screens */
        font-size: clamp(1.8rem, 8.2vw, 2.6rem);
        line-height:1.06;
    }

    .cta .btn{
        padding: .7rem .9rem;
        font-size: 0.95rem;
    }

    .meta{ gap:.6rem }
}

/* Services tweaks for small screens */
@media (max-width: 480px){
    .services-title{ text-align:center }
    .services-sub{ margin-left:auto; margin-right:auto; text-align:center }
    .services-grid{ gap: calc(var(--gap) * 0.9) }
    .service-card{ padding:1.1rem }
    .service-icon{ width:40px; height:40px; font-size:1.1rem; border-radius:10px }
    .service-name{ font-size:var(--step-1) }
}

/* Mobile navigation: toggle via `.nav-open` class on the container `.nav` */
.menu-toggle{
    display:none; /* shown in media query below */
    appearance:none;
    border:1px solid transparent;
    background:transparent;
    color:var(--text);
    width:44px;
    height:44px;
    border-radius:10px;
    align-items:center;
    justify-content:center;
}

@media (max-width: 880px){
    /* show the toggle and hide native nav links until opened */
    .menu-toggle{ display:flex; margin-left: .6rem }

    /* hide nav by default on mobile — will be revealed when .nav.nav-open is set */
    .nav nav{ display:none }

    /* when user opens menu, display nav as column */
    .nav.nav-open nav{
        display:flex;
        flex-direction:column;
        gap:.6rem;
        position:absolute;
        top:64px;
        right:var(--gap);
        background:var(--bg-2);
        border:1px solid var(--border);
        padding: .9rem 1rem;
        border-radius:12px;
        box-shadow: 0 8px 30px rgba(0,0,0,.55);
        min-width:160px;
        z-index:40;
    }

    .nav.nav-open nav a{
        color:var(--text);
        padding:.35rem 0;
        display:block;
    }
}

    /* New icon treatment: soft ring + subtle gradient background, responsive size and hover */
    .service-icon{
        --size: var(--svc-icon);
        width: var(--size);
        height: var(--size);
        border-radius:50%;
        position:relative;
        display:inline-grid;
        place-items:center;
        margin-bottom:.8rem;
        background: linear-gradient(180deg, rgba(255,255,255,.02), color-mix(in srgb, var(--brand) 6%, transparent));
        box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 6px 18px rgba(0,0,0,.35);
        transition: transform .18s ease, box-shadow .18s ease;
    }

    .service-icon::before{
        content:"";
        position:absolute;
        inset: -6px;
        border-radius:50%;
        background: conic-gradient(from 200deg, var(--brand), var(--brand-2), var(--brand));
        opacity:.08;
        filter: blur(6px);
        transition: opacity .18s ease, transform .18s ease;
        pointer-events:none;
    }

    .service-icon > span{
        position:relative;
        z-index:1;
        font-size: calc(var(--size) * 0.55);
        line-height:1;
        transform: translateY(1px);
    }

    /* SVG inside icon: scale and color */
    .service-icon svg{
        position:relative;
        z-index:1;
        width:60%;
        height:60%;
        display:block;
        color: color-mix(in srgb, var(--brand) 60%, var(--text));
        stroke: currentColor;
        stroke-width: 1.25;
    }

    .service-icon:hover{
        transform: translateY(-4px) scale(1.04);
        box-shadow: 0 12px 30px rgba(0,0,0,.45);
    }

    .service-icon:hover::before{ opacity:.22; transform: scale(1.06); }

    @media (max-width:480px){
        .service-icon{ --size: var(--svc-icon-sm); }
        .service-icon > span{ font-size: calc(var(--svc-icon-sm) * 0.55); }
    }

.service-name{
    /* card title should be clearly below the section h2 */
    font-size:var(--step-1);
    margin:0 0 .5rem;
    font-weight:700;
    /* slight brand color to help hierarchy */
    color: color-mix(in srgb, var(--brand) 40%, var(--text));
}

.service-desc{
    color:var(--muted);
    margin:0 0 1.4rem;
    line-height:1.6;
    font-size: 15.5px;
    max-width: 60ch;
}

.service-list{
    list-style:none;
    padding:0;
    margin:0;
    margin-top:auto;
    display:flex;
    gap:1.8rem; /* increased gap so buttons are not touching */
    flex-wrap:wrap;
}

.service-list a{
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.3rem .6rem; /* reduced padding for a tighter look */
    border-radius:999px;
    background: transparent;
    color: color-mix(in srgb, var(--brand) 85%, var(--text));
    border:1px solid color-mix(in srgb, var(--brand) 14%, transparent);
    font-weight:700;
    font-size:var(--step--1);
    transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}

.service-list a:hover,
.service-list a:focus-visible{
    transform: translateY(-4px);
    background: color-mix(in srgb, var(--brand) 14%, transparent);
    color: var(--text);
    box-shadow: 0 8px 20px rgba(0,0,0,.35);
}

/* make the <li> elements inline so markup oddities render nicely */
.service-list li{
    /* keep markup quirks (anchor > li) harmless: make li inline and inherit styles from the anchor */
    display:inline;
    margin:0;
    padding:0;
    color:inherit;
}

/* Ensure buttons have vertical breathing room when wrapping (some browsers may not apply flex row-gap reliably) */
.service-list a{ margin-bottom:1rem; min-width: max-content }

/* hide leftover <br> tags in the markup so they don't interfere with spacing */
.service-list br{ display:none }

.service-card::before{
    left:var(--glow-x);
    top:var(--glow-y);
}

/* Responsive */
@media(max-width:780px){
    .services-grid{ grid-template-columns:1fr; }
}

/* slightly smaller inter-button gap on very small screens so wrapping looks balanced */
@media (max-width:480px){
    .service-list{ gap:1.2rem }
}

/* Small polish: hover graphic accent and stronger focus state for service links */
.service-card:focus-within{
    outline:2px solid color-mix(in srgb, var(--brand) 35%, transparent);
    outline-offset:6px;
}

.service-card:hover{ transform: translateY(-8px) }

/* ===== PORTFOLIO / MY WORK ===== */
.portfolio{
    padding:clamp(56px,6.5vw,112px) 0;
    position:relative;
    overflow:hidden;
}

.portfolio-title{
    /* match Services section h2 styling */
    font-size: var(--step-3);
    margin:0 0 .6rem;
    letter-spacing:-.3px;
    font-weight:800;
    /* subtle brand tint like Services title */
    color: color-mix(in srgb, var(--brand-2) 36%, var(--text));
}

.portfolio-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:calc(var(--gap) * 1.1);
    margin-top:2rem;
}

.portfolio-card{
    display:flex;
    flex-direction:column;
    border-radius:calc(var(--radius) + 6px);
    overflow:hidden;
    background:var(--bg-2);
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    transition: transform .25s ease, box-shadow .25s ease;
    cursor:pointer;
}

.portfolio-card:hover{
    transform: translateY(-8px);
    /* base dark shadow + purple glow ring */
    box-shadow:
        0 12px 40px rgba(0,0,0,.45),
        0 0 36px color-mix(in srgb, var(--brand-2) 40%, transparent);
}

/* keyboard-accessible focus state (if cards are made focusable) */
.portfolio-card:focus-within,
.portfolio-card:focus{
    box-shadow:
        0 10px 30px rgba(0,0,0,.35),
        0 0 28px color-mix(in srgb, var(--brand-2) 36%, transparent);
    outline: none;
}

.portfolio-image{
    position:relative;
    width:100%;
    padding-bottom:100%; /* 1:1 aspect ratio */
    overflow:hidden;
    background:var(--bg);
}

.portfolio-image img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    filter:contrast(1.02) saturate(1.02) brightness(.88);
    transition: transform .3s ease;
}

.portfolio-card:hover .portfolio-image img{ transform: scale(1.05) }

.portfolio-name{
    font-size:var(--step-1);
    margin:0;
    padding:1rem;
    font-weight:700;
    color: color-mix(in srgb, var(--brand) 40%, var(--text));
    letter-spacing:-.3px;
}

.portfolio-desc{
    font-size: 1rem; 
    margin:0;
    padding:1rem;
    font-weight:700;
    color: color-mix(in srgb, var(--brand) 40%, var(--text));
    letter-spacing:-.3px;
}

.portfolio a{
    text-decoration:none;
}

/* ===== CONTACT / LET'S WORK TOGETHER ===== */
.contact{
    padding:clamp(56px,6.5vw,112px) 0;
    position:relative;
    overflow:hidden;
}

.contact-title{
    /* Match Services/Portfolio/About h2 styling */
    font-size: var(--step-3);
    margin:0 0 .6rem;
    letter-spacing:-.3px;
    font-weight:800;
    /* Subtle brand-2 tint like other sections */
    color: color-mix(in srgb, var(--brand-2) 36%, var(--text));
}

.contact-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:calc(var(--gap) * 1.1);
}

.contact-item{
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    gap:1.2rem;
    padding:2.25rem;
    background:var(--bg-2);
    border:1px solid var(--border);
    border-radius:calc(var(--radius) + 6px);
    box-shadow:var(--shadow);
    text-decoration:none;
    color:inherit;
    transition: .25s ease;
    position:relative;
    overflow:hidden;
}

.contact-item:hover{
    transform:translateY(-6px);
}

.contact-item::before{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(167,139,250,0.10), transparent 90%);
    filter:blur(70px);
    opacity:0;
    transform:translate(-50%, -50%);
    pointer-events:none;
    transition:opacity .2s ease;
}

.contact-item.hovering::before{
    opacity:1;
}

.contact-icon{
    --size: 56px;
    width: var(--size);
    height: var(--size);
    border-radius:50%;
    position:relative;
    display:inline-grid;
    place-items:center;
    flex-shrink:0;
    background: linear-gradient(180deg, rgba(255,255,255,.02), color-mix(in srgb, var(--brand) 6%, transparent));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 6px 18px rgba(0,0,0,.35);
    transition: transform .18s ease, box-shadow .18s ease;
}

.contact-icon::before{
    content:"";
    position:absolute;
    inset: -6px;
    border-radius:50%;
    background: conic-gradient(from 200deg, var(--brand), var(--brand-2), var(--brand));
    opacity:.08;
    filter: blur(6px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events:none;
}

.contact-icon svg{
    position:relative;
    z-index:1;
    width:60%;
    height:60%;
    display:block;
    color: color-mix(in srgb, var(--brand-2) 70%, var(--text));
    stroke: currentColor;
    stroke-width: 1.25;
}

.contact-item:hover .contact-icon{
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 12px 30px rgba(0,0,0,.45);
}

.contact-item:hover .contact-icon::before{ opacity:.22; transform: scale(1.06); }

.contact-text{
    display:flex;
    flex-direction:column;
    gap:.3rem;
}

.contact-name{
    font-size:var(--step-1);
    margin:0;
    font-weight:700;
    color: color-mix(in srgb, var(--brand) 40%, var(--text));
}

.contact-desc{
    margin:0;
    color:var(--muted);
    font-size: 15.5px;
    line-height:1.5;
}

.contact-item::before{
    left:var(--glow-x);
    top:var(--glow-y);
}

/* Responsive: tablet */
@media (max-width:1120px){
    .contact-grid{ gap:calc(var(--gap) * 0.9) }
}

/* Responsive: stacked */
@media (max-width:880px){
    .contact-grid{ grid-template-columns:1fr }
    .contact-item{ padding:1.5rem }
}

/* Responsive: phones */
@media (max-width:480px){
    .contact-title{ text-align:center }
    .contact-grid{ gap:calc(var(--gap) * 0.8) }
    .contact-item{ padding:1.1rem; gap:1rem }
    .contact-icon{ --size: 48px }
    .contact-name{ font-size:var(--step-0) }
    .contact-desc{ font-size:14px }
}

/* ===== PORTFOLIO / MY WORK ===== */
@media (max-width:1120px){
    .portfolio-grid{ grid-template-columns:repeat(3, 1fr) }
}

/* Responsive: stacked */
@media (max-width:880px){
    .portfolio-grid{ grid-template-columns:repeat(2, 1fr) }
}

/* Responsive: phones */
@media (max-width:480px){
    .portfolio-title{ text-align:center }
    .portfolio-grid{ grid-template-columns:1fr; gap:calc(var(--gap) * 0.9) }
}

/* Portfolio CTA (See more) */
.portfolio-cta{ margin-top:calc(var(--gap) * 0.8); }
.portfolio-cta .cta{ justify-content:center }
.portfolio-cta .btn{ padding:.85rem 1.35rem }

/* ===== ABOUT ME ===== */
.about{
    padding:clamp(56px,6.5vw,112px) 0;
    position:relative;
    overflow:hidden;
}

.about-title{
    /* match Services and Portfolio h2 styling */
    font-size: var(--step-3);
    margin:0 0 2.5rem;
    letter-spacing:-.3px;
    font-weight:800;
    color: color-mix(in srgb, var(--brand-2) 36%, var(--text));
}

.about-card{
    display:grid;
    grid-template-columns:200px 1fr;
    gap:3rem;
    align-items:start;
    background:var(--bg-2);
    border:1px solid var(--border);
    border-radius:calc(var(--radius) + 6px);
    padding:2.5rem;
    box-shadow:var(--shadow);
    transition: transform .3s ease, box-shadow .3s ease;
}

.about-card:hover{
    transform: translateY(-6px);
    box-shadow:
        0 12px 40px rgba(0,0,0,.45),
        0 0 36px color-mix(in srgb, var(--brand-2) 36%, transparent);
}

.about-avatar{
    position:relative;
    width:200px;
    height:200px;
    border-radius:50%;
    overflow:hidden;
    background:var(--bg);
    border:2px solid var(--border);
    flex-shrink:0;
    box-shadow: inset 0 1px 2px rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.4);
}

.about-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    filter:contrast(1.02) saturate(1.02) brightness(.9);
}

.about-info{
    display:flex;
    flex-direction:column;
    gap:1.5rem;
}

.about-name{
    font-size:var(--step-2);
    margin:0;
    font-weight:800;
    letter-spacing:-.3px;
    color:var(--text);
}

.about-role{
    margin:0;
    font-size:var(--step-0);
    color: color-mix(in srgb, var(--brand-2) 60%, var(--muted));
    font-weight:700;
}

.about-details{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.5rem 2rem;
}

.detail-item{
    display:flex;
    flex-direction:column;
    gap:.3rem;
}

.detail-label{
    font-size:var(--step--1);
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--muted);
    font-weight:700;
}

.detail-value{
    font-size:var(--step-0);
    color:var(--text);
    font-weight:700;
    color: color-mix(in srgb, var(--brand) 55%, var(--text));
}

.about-bio{
    margin:0;
    font-size:var(--step-0);
    line-height:1.7;
    color:var(--muted);
    max-width:65ch;
}

/* Responsive */
@media (max-width:880px){
    .about-card{
        grid-template-columns:1fr;
        gap:2rem;
    }

    .about-avatar{
        width:160px;
        height:160px;
        margin:0 auto;
    }

    .about-details{ grid-template-columns:1fr }
}

@media (max-width:480px){
    .about-title{ text-align:center }

    .about-card{
        padding:1.5rem;
        gap:1.5rem;
    }

    .about-avatar{ width:120px; height:120px }

    .about-name{ font-size:var(--step-1) }

    .about-details{ gap:1rem 1.5rem }
}