/* Base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Geist', system-ui, sans-serif;
    margin: 0;
    color: #111;
    background:#fdfdfd;
    -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
    .marquee { animation:none; }
}
img,video { max-width:100%; display:block; }
a { color: inherit; text-decoration:none; }

:root {
    --c-bg:#fdfdfd;
    --c-bg-alt:#ffffff;
    --c-bg-dark:#101012;
    --c-fg:#18181b;
    --c-fg-inv:#fcfcfc;
    --c-accent:#ff4d3d;
    --c-border:#e5e5e5;
    --radius:10px;
    --shadow:0 2px 4px -2px rgba(0,0,0,.08),0 6px 18px -6px rgba(0,0,0,.12);
}

/* Layout */
.container { width: min(1200px, 100% - 3rem); margin-inline:auto; }
.grid-two { display:grid; gap:4rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); align-items:start; }

/* Header */
.site-header { position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.8); backdrop-filter:blur(12px); border-bottom:1px solid var(--c-border); }
.nav { display:flex; align-items:center; justify-content:space-between; padding:.75rem 0; }
.logo { 
    font-weight:700; 
    letter-spacing:3px; 
    font-size:1rem; 
    text-transform:uppercase;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #1e3c72 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    transition: all 0.3s ease;
    animation: gradientShift 4s ease-in-out infinite;
    display: flex;
    align-items: center;
    gap: 8px;
}
.logo__accent {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #1e3c72 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 4s ease-in-out infinite, logoSpin 8s linear infinite;
    font-size: 0.8rem;
    transform-origin: center;
}
.logo::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -4px;
    right: -4px;
    bottom: -2px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #1e3c72 100%);
    background-size: 200% 200%;
    opacity: 0;
    border-radius: 6px;
    z-index: -1;
    transition: opacity 0.3s ease;
    animation: gradientShift 4s ease-in-out infinite;
}
.logo:hover::before {
    opacity: 0.15;
}
.logo:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
}
.logo:hover .logo__accent {
    animation-duration: 2s;
}
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
@keyframes logoSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.nav__list { list-style:none; display:flex; gap:1.75rem; margin:0; padding:0; }
.nav__list a { font-size:.9rem; position:relative; padding:.35rem .1rem; }
.nav__list a:after { content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--c-accent); transition:.35s; }
.nav__list a:hover:after, .nav__list a:focus-visible:after { width:100%; }
.nav__toggle { display:none; background:none; border:1px solid var(--c-border); font-size:1.15rem; padding:.4rem .7rem; border-radius:var(--radius); }

@media (max-width:820px){
    .nav__toggle { display:block; }
    .nav__list { position:fixed; inset:0 0 auto 0; top:3.5rem; flex-direction:column; background:var(--c-bg); padding:2rem 2rem 4rem; transform:translateY(-120%); transition:.5s cubic-bezier(.65,.05,.36,1); box-shadow:var(--shadow); }
    .nav__list.is-open { transform:translateY(0); }
}

/* Hero */
.hero { position:relative; min-height:100vh; display:grid; place-items:center; overflow:hidden; color: #fff; background: #000; }
.hero__bg { position:absolute; inset:0; z-index:0; overflow: hidden;}
.hero__bg-img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); filter: brightness(0.4) contrast(1.1) saturate(0.9); animation: heroZoom 30s ease-in-out infinite alternate; }
.hero__overlay { position:absolute; inset:0; background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.8) 100%); z-index:1; }

.hero__typography { position:absolute; inset:0; z-index:2; display:grid; place-items:center; pointer-events:none; overflow:hidden; }
.hero__bg-text { font-size:clamp(8rem, 20vw, 25rem); font-weight:900; line-height:0.8; letter-spacing:-0.05em; text-transform:uppercase; opacity:0.05; white-space:nowrap; transform:rotate(-5deg); font-family: 'Geist', system-ui, sans-serif; color:#fff; user-select:none; }

.hero__content { position:relative; z-index:5; width:100%; max-width:1400px; display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; padding:0 2rem; }
.hero__main { text-align:left; }
.hero__details { text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:2rem; }

.hero__name { font-size:clamp(3rem, 7vw, 8rem); line-height:0.85; font-weight:300; margin:0; letter-spacing:-0.02em; text-transform:uppercase; font-family: 'Geist', system-ui, sans-serif; }
.hero__brand { font-size:clamp(0.8rem, 1.5vw, 1.2rem); line-height:1; font-weight:600; margin:1rem 0 0; letter-spacing:0.3em; text-transform:uppercase; opacity:0.9; color:#fff; border-left:2px solid var(--c-accent); padding-left:1rem; }

.hero__subtitle { font-size:clamp(0.7rem, 1vw, 0.9rem); line-height:1.4; font-weight:400; margin:0 0 2rem; letter-spacing:0.2em; text-transform:uppercase; opacity:0.8; }
.hero__cta { display:flex; gap:1rem; flex-direction:column; }
.hero__scroll-cue { position:absolute; bottom:2rem; left:50%; translate:-50% 0; font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; opacity:0.6; animation:float 4s ease-in-out infinite; writing-mode:vertical-rl; }

@keyframes heroZoom { 0%{transform:scale(1.05);} 100%{transform:scale(1.1);} }
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }

@media (max-width:968px){
    .hero__content { grid-template-columns:1fr; gap:3rem; text-align:center; }
    .hero__details { align-items:center; }
    .hero__main { text-align:center; }
    .hero__bg-text { font-size:clamp(5rem, 15vw, 12rem); transform:rotate(-2deg); }
}

/* Buttons */
.btn { --_bg:var(--c-accent); --_fg:#fff; background:var(--_bg); color:var(--_fg); padding:.95rem 1.55rem; font-size:.8rem; font-weight:600; letter-spacing:1.2px; border:1px solid transparent; border-radius:999px; cursor:pointer; position:relative; overflow:hidden; transition:.4s cubic-bezier(.22,.95,.37,1); box-shadow:0 4px 18px -6px rgba(255, 77, 61, 0.5), 0 2px 4px -1px rgba(0,0,0,0.2); }
.btn:hover { transform:translateY(-3px); box-shadow:0 10px 28px -10px rgba(255, 77, 61, 0.5), 0 4px 8px -2px rgba(0,0,0,0.2); filter: brightness(1.05); }
.btn:active { transform:translateY(-1px); }
.btn--ghost { background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.3); box-shadow: none; backdrop-filter:blur(10px); }
.btn--ghost:hover { background:rgba(255,255,255,.2); border-color: rgba(255,255,255,.5); }
.btn--minimal { background:transparent; color:#fff; border:none; padding:0.8rem 0; font-size:0.75rem; font-weight:500; letter-spacing:0.3em; text-transform:uppercase; border-bottom:1px solid rgba(255,255,255,0.3); border-radius:0; box-shadow:none; transition:all 0.3s ease; }
.btn--minimal:hover { border-bottom-color:#fff; transform:none; filter:none; box-shadow:none; }

@media (max-width:580px){
    .hero__cta { flex-direction:column; }
    .hero__cta .btn { flex:1 1 auto; width:100%; }
}

/* Sections */
.section { padding:clamp(3rem, 8vw, 6rem) 0; }
.section--alt { background:var(--c-bg-alt); }
.section--dark { background:var(--c-bg-dark); color:var(--c-fg-inv); }
.section__title { font-size:clamp(1.9rem, 2.5vw, 2.6rem); margin:0 0 1.5rem; letter-spacing:.5px; }
.lead { max-width:62ch; margin:0 auto 2.5rem; opacity:.78; line-height:1.5; }

/* Tags */
.tags { list-style:none; padding:0; margin:1.6rem 0 0; display:flex; flex-wrap:wrap; gap:.6rem; }
.tags li { background:var(--c-bg); border:1px solid var(--c-border); padding:.45rem .8rem; font-size:.65rem; letter-spacing:1px; text-transform:uppercase; border-radius:2rem; font-weight:500; }

/* Stats */
.about__stats { display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
.stat { background:var(--c-bg); border:1px solid var(--c-border); padding:1.1rem .9rem; border-radius:var(--radius); text-align:center; position:relative; overflow:hidden; }
.stat__num { font-size:1.65rem; font-weight:600; display:block; line-height:1; }
.stat__label { font-size:.6rem; letter-spacing:1.5px; text-transform:uppercase; opacity:.6; }

/* Highlights */
.about__highlights { display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.highlight { background:var(--c-bg); border:1px solid var(--c-border); padding:1.5rem 1.2rem; border-radius:var(--radius); position:relative; overflow:hidden; transition:all 0.3s ease; }
.highlight:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.highlight h3 { font-size:0.9rem; font-weight:600; margin:0 0 0.5rem; letter-spacing:0.5px; text-transform:uppercase; color:var(--c-accent); }
.highlight p { font-size:0.8rem; line-height:1.4; margin:0; opacity:0.8; }

/* Gallery */
.section__head { display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:space-between; align-items:center; margin-bottom:1.8rem; }
.filters { display:flex; gap:.5rem; flex-wrap:wrap; }
.filter { font-size:.65rem; letter-spacing:1.2px; padding:.55rem .9rem; background:#fff; border:1px solid var(--c-border); border-radius:2rem; cursor:pointer; text-transform:uppercase; font-weight:600; transition:.35s; }
.filter:is(:hover,:focus-visible){ background:var(--c-accent); color:#fff; }
.filter.is-active { background:var(--c-accent); color:#fff; }

.gallery { 
    --gap: 1rem; 
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
}

.gallery__item { 
    margin: 0; 
    position: relative; 
    overflow: hidden; 
    border-radius: var(--radius); 
    box-shadow: var(--shadow); 
    background: #000; 
    aspect-ratio: 3/4; 
}
.gallery__item img { width:100%; height:100%; display:block; object-fit:cover; object-position:center; filter:brightness(.9) saturate(1.05); transition:.6s; }
.gallery__item:hover img { transform:scale(1.05); filter:brightness(1); }
.gallery__item figcaption { position:absolute; inset:auto 0 0 0; padding:.75rem .9rem; font-size:.6rem; letter-spacing:.5px; background:linear-gradient(to top, rgba(0,0,0,.65), transparent); color:#fff; }

.gallery__item--link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.gallery__item--link:hover figcaption {
    background: linear-gradient(to top, rgba(102, 51, 153, 0.8), transparent);
}

/* Gallery responsive */
@media (max-width: 1024px) {
    .gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .gallery {
        grid-template-columns: 1fr;
    }
}

/* Reel / Video */
.reel__thumb { position:relative; cursor:pointer; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow); }
.reel__thumb img { width:100%; height:auto; display:block; filter:brightness(.85); transition:.6s; }
.reel__thumb:hover img { filter:brightness(1); transform:scale(1.03); }
.reel__play { position:absolute; inset:0; display:grid; place-items:center; font-size:clamp(1.2rem,2vw,2rem); color:#fff; font-weight:600; letter-spacing:1.5px; text-shadow:0 6px 25px rgba(0,0,0,.45); background:linear-gradient(120deg,rgba(0,0,0,.55),rgba(0,0,0,.1)); backdrop-filter:blur(2px); }
.video-grid { display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin-top:2.5rem; }
.video-card { background:#18181b; border:1px solid #2a2a31; border-radius:var(--radius); overflow:hidden; cursor:pointer; transition:.4s; position:relative; }
.video-card img { width:100%; height:auto; display:block; }
.video-card h3 { font-size:.8rem; padding:.9rem 1rem 1.1rem; margin:0; letter-spacing:.5px; color:#fff; }
.video-card:hover { transform:translateY(-4px); box-shadow:0 10px 30px -10px rgba(0,0,0,.55); }

/* Projects */
.projects { display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:2.5rem; }
.project { background:#fff; border:1px solid var(--c-border); border-radius:var(--radius); padding:1.3rem 1.3rem 1.6rem; display:flex; flex-direction:column; gap:.9rem; position:relative; overflow:hidden; }
.project__media { 
    aspect-ratio: 16/9; 
    background: repeating-linear-gradient(45deg,#f2f2f2 0 14px,#e4e4e4 14px 28px); 
    border: 1px solid var(--c-border); 
    border-radius: calc(var(--radius) - 4px); 
    position: relative; 
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.project__media.ph:after { content:"Placeholder"; position:absolute; inset:0; display:grid; place-items:center; font-size:.6rem; letter-spacing:2px; text-transform:uppercase; color:#666; font-weight:600; mix-blend-mode:multiply; }
.project__media img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    object-position: center top;
    display: block; 
    background: #fff;
}
.project__head { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; }
.project__head h3 { margin:0; font-size:1rem; letter-spacing:.5px; }
.project__tags { font-size:.55rem; letter-spacing:1px; background:linear-gradient(135deg, rgba(255, 77, 61, 0.1), rgba(255, 119, 61, 0.05)); color:#ff4d3d; padding:.35rem .55rem; border-radius:1rem; text-transform:uppercase; border:1px solid rgba(255, 77, 61, 0.2); }
.project p { font-size:.75rem; line-height:1.45; margin:0; opacity:.75; }
.project__link { font-size:.7rem; text-transform:uppercase; letter-spacing:1.2px; font-weight:600; width:max-content; position:relative; }
.project__link:after { content:""; position:absolute; left:0; bottom:-2px; height:2px; width:100%; background:var(--c-accent); transform:scaleX(.25); transform-origin:left; transition:.4s; }
.project__link:hover:after { transform:scaleX(1); }

/* Scrapbook Masonry */
.masonry { columns:5 180px; column-gap:1rem; }
.masonry__item { width:100%; margin:0 0 1rem; border-radius:var(--radius); box-shadow:var(--shadow); filter:brightness(.92); transition:.5s; cursor:pointer; }
.masonry__item:hover { filter:brightness(1); transform:translateY(-4px); }

/* Enhanced Contact Section */
.section--contact {
    background: linear-gradient(180deg, #fff, #f0f0f3);
    padding: 4rem 0;
}

.contact-email {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.contact-email h3 {
    color: #1a1a1a;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    position: relative;
}

.contact-email h3::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #ff4d3d, #ff6b5b);
    border-radius: 1px;
}

.contact-email p {
    color: #666;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.email-obfuscated {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    background: rgba(255, 77, 61, 0.1);
    border: 2px solid rgba(255, 77, 61, 0.2);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin: 1rem 0;
    font-family: 'Geist', monospace;
    font-size: 1.1rem;
    font-weight: 600;
    color: #ff4d3d;
    text-transform: lowercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.email-obfuscated:hover {
    background: rgba(255, 77, 61, 0.15);
    border-color: rgba(255, 77, 61, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 77, 61, 0.2);
}

.email-part,
.email-at,
.email-domain {
    user-select: all;
    cursor: text;
}

.email-at {
    color: #666;
    font-weight: 400;
}

.email-note {
    font-size: 0.85rem;
    color: #888;
    font-style: italic;
    margin-top: 0.5rem;
    opacity: 0.8;
}

/* Contact section responsive styles */
@media (max-width: 768px) {
    .contact-email {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        max-width: 100%;
        margin-left: 1rem;
        margin-right: 1rem;
    }
    
    .contact-email h3 {
        font-size: 1.2rem;
    }
    
    .email-obfuscated {
        flex-direction: column;
        gap: 0.1rem;
        padding: 1.2rem;
        font-size: 1rem;
    }
    
    .email-at {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .contact-email {
        padding: 1rem;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        border-radius: 8px;
    }
    
    .contact-email h3 {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }
    
    .contact-email p {
        font-size: 0.9rem;
    }
    
    .email-obfuscated {
        padding: 1rem;
        font-size: 0.95rem;
        gap: 0.05rem;
    }
    
    .email-note {
        font-size: 0.8rem;
        margin-top: 0.75rem;
    }
}

/* Social Links Enhancement */
.social {
    display: flex;
    gap: 1rem;
    margin-top: 2.5rem;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
}

/* Tech Stats Animation Enhancement */
.tech-stats-numbers .stat-item {
    animation: statsFloat 3s ease-in-out infinite;
}

.tech-stats-numbers .stat-item:nth-child(1) {
    animation-delay: 0s;
}

.tech-stats-numbers .stat-item:nth-child(2) {
    animation-delay: 0.5s;
}

.tech-stats-numbers .stat-item:nth-child(3) {
    animation-delay: 1s;
}

@keyframes statsFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-3px);
    }
}

/* Stats number animation on scroll */
.stat-number {
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-number.animate {
    animation: numberPulse 0.8s ease-out;
}

@keyframes numberPulse {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Social links responsive styles */
@media (max-width: 768px) {
    .social {
        gap: 0.8rem;
        margin-top: 2rem;
        max-width: 100%;
        padding: 0 1rem;
    }
    
    .social a {
        width: 45px;
        height: 45px;
        font-size: 0.8rem;
        padding: 0.7rem 1rem;
    }
}

@media (max-width: 480px) {
    .social {
        gap: 0.6rem;
        margin-top: 1.5rem;
        padding: 0 0.5rem;
    }
    
    .social a {
        width: 42px;
        height: 42px;
        font-size: 0.75rem;
        padding: 0.6rem 0.9rem;
    }
}

@media (max-width: 360px) {
    .social {
        gap: 0.5rem;
    }
    
    .social a {
        width: 40px;
        height: 40px;
        font-size: 0.7rem;
        padding: 0.5rem 0.8rem;
    }
}

.social a {
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    padding: 0.8rem 1.2rem;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    position: relative;
    overflow: hidden;
}

.social a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #ff4d3d, #ff6b5b);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.social a:hover {
    color: white;
    border-color: #ff4d3d;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 77, 61, 0.3);
}

.social a:hover::before {
    opacity: 1;
}

/* Google Reviews Badge */
.google-reviews-badge {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.22, 0.95, 0.37, 1);
}

.google-reviews-badge.show {
    opacity: 1;
    transform: translateY(0);
}

.google-reviews-badge a {
    display: inline-flex;
    align-items: center;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
    border: 2px solid rgba(255, 77, 61, 0.2);
    border-radius: 12px;
    text-decoration: none;
    color: #333;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
}

.google-reviews-badge a:hover {
    background: linear-gradient(135deg, rgba(255, 77, 61, 0.1) 0%, rgba(255, 119, 61, 0.05) 100%);
    border-color: rgba(255, 77, 61, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 77, 61, 0.2);
}

.reviews-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.reviews-stars {
    font-size: 1.2rem;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.reviews-text {
    color: #ff4d3d;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.9rem;
}

/* Responsive adjustments for Google Reviews Badge */
@media (max-width: 768px) {
    .google-reviews-badge {
        margin: 1.5rem 0;
    }
    
    .google-reviews-badge a {
        padding: 0.8rem 1.2rem;
        font-size: 0.9rem;
    }
    
    .reviews-content {
        gap: 0.6rem;
    }
    
    .reviews-stars {
        font-size: 1.1rem;
    }
    
    .reviews-text {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .google-reviews-badge a {
        padding: 0.7rem 1rem;
    }
    
    .reviews-text {
        font-size: 0.8rem;
    }
    
    .reviews-stars {
        font-size: 1rem;
    }
}

/* Fixed Google Reviews Button */
.google-reviews-fixed {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 1000;
    animation: slideInLeft 0.6s ease-out 1s both;
}

.reviews-fixed-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
    border: 1px solid rgba(255, 77, 61, 0.2);
    border-radius: 25px;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    font-size: 0.8rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(255, 77, 61, 0.05);
    backdrop-filter: blur(15px);
    position: relative;
    overflow: hidden;
    min-width: 140px;
    justify-content: center;
}

.reviews-fixed-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 77, 61, 0.05), transparent);
    transition: left 0.4s ease;
}

.reviews-fixed-btn:hover::before {
    left: 100%;
}

.reviews-fixed-btn:hover {
    background: linear-gradient(135deg, rgba(255, 77, 61, 0.08) 0%, rgba(255, 119, 61, 0.03) 100%);
    border-color: rgba(255, 77, 61, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(255, 77, 61, 0.1);
    color: #ff4d3d;
}

.reviews-fixed-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}

.reviews-fixed-stars {
    font-size: 0.9rem;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
    transition: transform 0.3s ease;
}

.reviews-fixed-btn:hover .reviews-fixed-stars {
    transform: scale(1.05);
}

.reviews-fixed-text {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #ff4d3d;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.reviews-fixed-btn:hover .reviews-fixed-text {
    opacity: 1;
}

.reviews-fixed-icon {
    font-size: 1rem;
    color: #ff4d3d;
    transition: transform 0.3s ease;
    margin-left: 0.25rem;
}

.reviews-fixed-btn:hover .reviews-fixed-icon {
    transform: rotate(10deg) scale(1.1);
}

/* Pulse animation for attention */
@keyframes pulse {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(255, 77, 61, 0.05);
    }
    50% {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(255, 77, 61, 0.08), 0 0 0 6px rgba(255, 77, 61, 0.03);
    }
}

.reviews-fixed-btn {
    animation: pulse 4s ease-in-out infinite 2s;
}

/* Slide in animation */
@keyframes slideInLeft {
    0% {
        transform: translateX(-80px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Responsive adjustments for fixed button */
@media (max-width: 768px) {
    .google-reviews-fixed {
        bottom: 1.25rem;
        left: 1.25rem;
    }
    
    .reviews-fixed-btn {
        padding: 0.6rem 0.9rem;
        font-size: 0.75rem;
        gap: 0.4rem;
        min-width: 120px;
    }
    
    .reviews-fixed-content {
        gap: 0.05rem;
    }
    
    .reviews-fixed-stars {
        font-size: 0.8rem;
    }
    
    .reviews-fixed-text {
        font-size: 0.6rem;
    }
    
    .reviews-fixed-icon {
        font-size: 0.9rem;
        margin-left: 0.2rem;
    }
}

@media (max-width: 480px) {
    .google-reviews-fixed {
        bottom: 1rem;
        left: 1rem;
    }
    
    .reviews-fixed-btn {
        padding: 0.55rem 0.8rem;
        font-size: 0.7rem;
        min-width: 110px;
    }
    
    .reviews-fixed-stars {
        font-size: 0.75rem;
    }
    
    .reviews-fixed-text {
        font-size: 0.55rem;
    }
    
    .reviews-fixed-icon {
        font-size: 0.85rem;
        margin-left: 0.15rem;
    }
}

/* Hide on very small screens if needed */
@media (max-width: 360px) {
    .google-reviews-fixed {
        display: none;
    }
}

/* Footer */
.site-footer { background:#101012; color:#fff; padding:2.8rem 0 2.2rem; margin-top:4rem; font-size:.65rem; letter-spacing:.8px; }
.footer__inner { display:flex; gap:1.5rem; justify-content:space-between; flex-wrap:wrap; align-items:center; }
.to-top { background:#222; color:#fff; width:2.2rem; height:2.2rem; display:grid; place-items:center; border-radius:50%; font-size:1rem; border:1px solid #333; }
.to-top:hover { background:var(--c-accent); }

/* Modal */
.modal { position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.55); backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:.4s; padding:2rem; z-index:200;  justify-content: center; }
.modal.is-open { opacity:1; pointer-events:auto; }
.modal__dialog { width: min(100%, 960px); position:relative; background:#000; padding:0; border-radius:var(--radius); box-shadow:0 20px 60px -10px rgba(0,0,0,.65); overflow:hidden; }
.modal__close { position:absolute; top:.35rem; right:.35rem; background:rgba(0,0,0,.6); color:#fff; border:none; width:2rem; height:2rem; border-radius:50%; font-size:1.1rem; cursor:pointer; }
.modal__close:hover { background:var(--c-accent); }
.modal video { width:100%; height:auto; display:block; }

/* Ensure modal video/iframe fill fullscreen modal */
#videoModal .modal__dialog iframe,
#videoModal .modal__dialog video {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    display: block;
    object-fit: contain; /* use 'cover' if you prefer cropping to fill */
}

/* Force the video modal dialog to occupy the full viewport (override default dialog constraints) */
#videoModal {
    padding: 0; /* remove outer padding so dialog can be full-bleed */
}

#videoModal .modal__dialog {
    /* keep dialog full overlay but let inner frame size itself */
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    padding: 0;
    border-radius: 0;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    box-shadow: none;
}

/* Framed video container (slightly smaller than full screen) */
.video-frame {
    width: min(1100px, 85vw);
    max-width: 95vw;
    /* enforce a 16:9 frame so iframe has concrete height to fill */
    aspect-ratio: 16 / 9;
    height: auto;
    max-height: 80vh;
    background: #000;
    padding: 12px; /* frame thickness */
    box-sizing: border-box;
    border: 6px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-frame iframe,
.video-frame video {
    width: 100%;
    height: 100%;
    max-height: 80vh;
    display: block;
    background: #000;
}

@media (max-width: 720px) {
    .video-frame { width: calc(100vw - 24px); max-height: 70vh; padding: 10px; border-width: 4px; }
    .video-frame iframe, .video-frame video { max-height: 70vh; }
}

#videoModal .modal__dialog iframe,
#videoModal .modal__dialog video {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
}

/* Animations (attribute driven) */
[data-animate] { opacity:0; transform:translateY(24px); }
.in-view[data-animate] { opacity:1; transform:translateY(0); transition: .85s cubic-bezier(.22,.95,.37,1); }
.in-view[data-delay] { transition-delay: calc(var(--d, 0) * 1s); }

/* Force animations to be visible on mobile to prevent hiding content */
@media (max-width: 768px) {
    [data-animate] {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    
    /* Specific fix for programming section */
    #programming [data-animate],
    #programming .all-projects,
    #programming .projects-grid {
        opacity: 1 !important;
        transform: translateY(0) !important;
        visibility: visible !important;
        display: block !important;
    }
    
    #programming .projects-grid {
        display: grid !important;
    }
    
    /* Override GSAP animations on mobile */
    .section {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    
    /* Ensure all content is visible on mobile */
    #programming {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* Responsive Tweaks */
@media (max-width:620px){
    .hero__name { font-size:2.5rem; }
    .hero__brand { font-size:0.8rem; letter-spacing:0.2em; }
    .hero__bg-text { font-size:4rem; }
    .hero__content { padding:0 1rem; gap:2rem; }
    .section { padding:3.5rem 0; }
    .about__stats { grid-template-columns:repeat(2,1fr); }
}

/* Accessibility focus */
:focus-visible { outline:2px solid var(--c-accent); outline-offset:2px; }

/* Utility */
.hidden { display:none !important; }

/* Utility to avoid breaking grouped project items (keeps Topware items together) */
.no-break {
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
}

/* Scroll Progress */
#scrollProgress { position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg,var(--c-accent),#ffb347); z-index:120; box-shadow:0 0 0 1px rgba(0,0,0,.05),0 4px 12px -3px rgba(0,0,0,.35); transition:width .15s linear; }

/* Quote (SplitText animation target) */
.section--quote { background:#111; color:#fff; }
.quote { font-size:clamp(1.8rem,3vw,3rem); line-height:1.1; font-weight:500; max-width:20ch; margin:0 auto; text-align:center; position:relative; }
.quote .char { display:inline-block; }

/* Marquee */
.marquee { position:relative; overflow:hidden; background:#111; color:#fff; padding:.6rem 0; font-weight:500; letter-spacing:2px; font-size:.75rem; }
.marquee__track { display:inline-flex; white-space:nowrap; animation:marquee 22s linear infinite; }
.marquee__track span { padding-right:2rem; }
@keyframes marquee { 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }

/* Notebook modern grid */
.notebook__head { display:flex; gap:2.5rem; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; }
.nb-filters { display:flex; gap:.55rem; flex-wrap:wrap; }
.nb-filter { font-size:.6rem; letter-spacing:1.2px; padding:.55rem .85rem; border:1px solid var(--c-border); background:#fff; border-radius:2rem; cursor:pointer; text-transform:uppercase; font-weight:600; transition:.35s; }
.nb-filter:is(:hover,:focus-visible){ background:var(--c-accent); color:#fff; }
.nb-filter.is-active { background:var(--c-accent); color:#fff; }
.nb-grid { --min:240px; display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--min),1fr)); gap:1.2rem; margin-top:2.2rem; }
.nb-item { position:relative; background:#fff; border: 1px solid var(--c-border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); cursor:pointer; display:flex; flex-direction:column; }
.nb-item__media { position:relative; aspect-ratio:4/3; overflow:hidden; }
.nb-item__media img { width:100%; height:100%; object-fit:cover; display:block; filter:brightness(.95); transition:.6s; }
.nb-item:hover .nb-item__media img { transform:scale(1.06); filter:brightness(1); }
.nb-item__body { padding:.9rem 1rem 1.2rem; color:var(--c-fg); background: var(--c-bg-alt); }
.nb-item__tag { font-size:.55rem; letter-spacing:1.3px; text-transform:uppercase; background:var(--c-accent); color:#fff; padding:.3rem .55rem; border-radius:1rem; font-weight:600; }
.nb-item__title { font-size:.85rem; margin:.6rem 0 .4rem; letter-spacing:.4px; font-weight:600; }
.nb-item__desc { font-size:.65rem; line-height:1.4; opacity:.8; margin:0; }
.notebook__more { text-align:center; margin-top:2.4rem; }

/* ===============================
   THAILAND PORTFOLIO PAGE STYLES
   =============================== */

.portfolio-hero {
    padding: 12rem 0 8rem;
    background: linear-gradient(135deg, var(--dark) 0%, #1a1a2e 50%, var(--dark) 100%);
    color: var(--light);
    position: relative;
    overflow: hidden;
}

.portfolio-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 20%, rgba(102, 51, 153, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(51, 102, 204, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.portfolio-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    font-size: 0.9rem;
    opacity: 0.8;
}

.breadcrumb a {
    color: var(--light);
    text-decoration: none;
    transition: var(--transition);
}

.breadcrumb a:hover {
    color: var(--accent);
}

.portfolio-hero__title {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 200;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, var(--light) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.portfolio-hero__subtitle {
    font-size: 1.25rem;
    font-weight: 300;
    opacity: 0.9;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.portfolio-hero__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font-size: 0.9rem;
    opacity: 0.7;
    flex-wrap: wrap;
}

.thailand-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 4rem;
}

.thailand-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: var(--light);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
    cursor: pointer;
}

.thailand-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.thailand-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: var(--transition);
}

.thailand-item figcaption {
    padding: 1.5rem;
    font-size: 0.95rem;
    color: var(--dark);
    font-weight: 500;
    text-align: center;
    background: var(--light);
}

.portfolio-navigation {
    padding: 6rem 0;
    background: var(--gray-light);
}

.portfolio-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

/* Image Lightbox Modal - fullscreen centered */
.modal--image {
    background: rgba(0, 0, 0, 0.95);
}

.modal--image .modal__dialog {
    /* make the dialog cover the viewport so modal is truly fullscreen */
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.modal--image .imglightbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 0;
    backdrop-filter: blur(6px);
    text-align: center;
}

.modal--image .imglightbox img {
    max-width: 100%;
    max-height: calc(100vh - 120px); /* leave room for controls/caption */
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
    margin: 0 auto;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}

.modal--image .imglightbox figcaption {
    margin-top: 1rem;
    color: #fff;
    font-size: 1.05rem;
    padding: 0 1.5rem;
    max-width: 80ch;
    line-height: 1.4;
    opacity: 0.95;
}

.modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10001;
}

.modal__close:hover {
    background: var(--c-accent);
    border-color: var(--c-accent);
    transform: scale(1.1);
}

.modal__nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10002;
    backdrop-filter: blur(10px);
}

.modal__nav:hover {
    background: var(--c-accent);
    border-color: var(--c-accent);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 20px rgba(255, 119, 61, 0.5);
}

.modal__nav--prev {
    left: 2rem;
}

.modal__nav--next {
    right: 2rem;
}

/* Responsive adjustments for Thailand page */
@media (max-width: 768px) {
    .portfolio-hero {
        padding: 8rem 0 6rem;
    }
    
    .thailand-gallery {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-top: 3rem;
    }
    
    .thailand-item {
        margin: 0 1rem;
    }
    
    .portfolio-nav {
        flex-direction: column;
        text-align: center;
    }
    
    .portfolio-hero__meta {
        gap: 0.5rem;
    }
    
    .modal--image {
        padding: 1rem;
    }
    
    .modal__close {
        top: -40px;
        font-size: 1.5rem;
    }
    
    .modal__nav {
        width: 3rem;
        height: 3rem;
        font-size: 2rem;
    }
    
    .modal__nav--prev {
        left: 1rem;
    }
    
    .modal__nav--next {
        right: 1rem;
    }
}

@media (max-width: 480px) {
    .thailand-gallery {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .thailand-item {
        margin: 0;
    }
    
    .thailand-item img {
        height: 250px;
    }
    
    .thailand-item figcaption {
        padding: 1rem;
    }
}

/* ===============================
   YOUTUBE SECTION STYLES
   =============================== */

.youtube-channel-info {
    margin-bottom: 3rem;
}

.channel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(255, 77, 61, 0.15) 0%, rgba(102, 126, 234, 0.15) 100%);
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 2rem;
    backdrop-filter: blur(10px);
}

.channel-logo {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.channel-logo .logo__accent {
    font-size: 1.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #1e3c72 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.channel-details h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--c-fg-inv);
}

.channel-details p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--c-fg-inv);
    opacity: 0.9;
}

.featured-video {
    margin-bottom: 4rem;
}

.featured-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-align: center;
    color: var(--c-fg-inv);
}

.video-embed-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 45%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.video-embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
}

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

.video-item {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.video-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 77, 61, 0.3);
}

.video-thumbnail {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.video-thumbnail iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-info {
    padding: 1.5rem;
}

.video-info h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--c-fg-inv);
}

.video-info p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.8;
    color: var(--c-fg-inv);
    line-height: 1.4;
}

.channel-stats {
    margin-top: 3rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1.5rem;
    max-width: 600px;
    margin: 0 auto;
}

.stat-item {
    text-align: center;
    padding: 1.5rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 77, 61, 0.3);
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--c-fg-inv);
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #1e3c72 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--c-fg-inv);
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* More Videos Section */
.more-videos {
    margin-top: 4rem;
}

.more-videos .section-subtitle {
    display: block !important;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 2rem;
    color: var(--c-fg-inv);
    text-align: center;
}

.more-videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.compact-video {
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    aspect-ratio: 16/9;
}

.compact-video iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.compact-video:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 77, 61, 0.3);
}

.compact-video::after {
    content: attr(title);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: white;
    padding: 1rem 0.75rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 0 0 var(--radius) var(--radius);
    pointer-events: none;
    line-height: 1.2;
}

.compact-video:hover::after {
    opacity: 1;
}

/* Hide all section titles only in programming section - all projects are equal */
#programming .section-subtitle {
    display: none !important;
}

#programming .section-description {
    display: none !important;
}

/* Unified projects grid */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
    align-items: stretch;
    grid-auto-rows: 1fr;
}

/* Remove all project variants - unified styling */
.project--compact,
.project--small,
.project {
    padding: 1.5rem;
    background: var(--c-bg-alt);
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    position: relative;
    overflow: hidden;
    transform: none;
    opacity: 1;
    scale: 1;
}


@media (max-width: 768px) {
    .channel-header {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }
    
    .youtube-videos-grid {
        grid-template-columns: 1fr;
    }
    
    .more-videos-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .featured-title,
    .section-subtitle {
        font-size: 1.25rem;
    }
    
    .video-embed-container {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .video-info {
        padding: 1rem;
    }
    
    .channel-header {
        padding: 1.5rem;
    }
    
    .stat-number {
        font-size: 1.5rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .more-videos-grid {
        grid-template-columns: 1fr;
    }
    
    .section-subtitle {
        font-size: 1.1rem;
    }
}

/* Programming Section Styles */
.featured-projects .projects {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.project--featured {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.5rem;
    align-items: start;
    padding: 1.5rem;
    background: var(--c-bg-alt);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project--featured:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px -8px rgba(0,0,0,0.15);
}

.project__screenshot {
    width: 100%;
    height: 150px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border: 2px solid #e0e0e0;
}

.project__screenshot[data-url*="dlh.net"] {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

.project__screenshot[data-url*="oswiecimskie.pl"] {
    background: linear-gradient(135deg, #c31432 0%, #240b36 100%);
}

.project__screenshot[data-url*="eepshopping.de"] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.project__screenshot[data-url*="vendetta-game.com"] {
    background: linear-gradient(135deg, #2c1810 0%, #8b4513 50%, #daa520 100%);
}

.project__screenshot[data-url*="psi-key.com"] {
    background: linear-gradient(135deg, #4568dc 0%, #b06ab3 100%);
}

.project__screenshot[data-url*="commercial-investments.pl"] {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
}

.project__screenshot[data-url*="aleja51.pl"] {
    background: linear-gradient(135deg, #fc466b 0%, #3f5efb 100%);
}

.project__screenshot[data-url*="domyplaza.pl"] {
    background: linear-gradient(135deg, #fdbb2d 0%, #22c1c3 100%);
}

.project__screenshot[data-url*="zadyszka.org.pl"] {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
}

.project__screenshot[data-url*="developers.dlh.net"] {
    background: linear-gradient(135deg, #434343 0%, #000000 100%);
}

.project__screenshot[data-url="mining-crm"] {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 50%, #3498db 100%);
}

.screenshot-placeholder {
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
    text-align: center;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.project--compact {
    padding: 1.5rem;
    background: var(--c-bg-alt);
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    /* allow project cards to stretch to the grid row height instead of forcing a large min-height */
    min-height: 0;
    position: relative;
    overflow: hidden;
}

/* Project cards - all identical styling */
.project--compact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--c-accent), #ffb347);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.project--compact:hover::before,
.project--small:hover::before,
.project:hover::before {
    transform: scaleX(1);
}

.project--compact:hover,
.project--small:hover,
.project:hover {
    border-color: var(--c-accent);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* All project content layout identical */
.project--compact .project__media,
.project--small .project__media,
.project .project__media {
    margin-bottom: 1rem;
    flex-shrink: 0;
    width: 100%;
    height: 180px;
    border-radius: 8px;
    overflow: hidden;
}

.project--compact .project__head,
.project--small .project__head,
.project .project__head {
    margin-bottom: 1rem;
}

.project--compact .project__head h4,
.project--small .project__head h4,
.project .project__head h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    line-height: 1.3;
    color: #333;
}

.project--compact .project__tags,
.project--small .project__tags,
.project .project__tags {
    font-size: 0.8rem;
    color: var(--c-accent);
    background: rgba(255, 77, 61, 0.1);
    padding: 0.3rem 0.6rem;
    border-radius: 12px;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.project--compact p,
.project--small p,
.project p {
    flex-grow: 1;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.7);
}

.project--compact .project__link,
.project--compact .project__status,
.project--small .project__link,
.project--small .project__status,
.project .project__link,
.project .project__status {
    align-self: flex-start;
    margin-top: auto;
}

.project__link {
    color: var(--c-accent);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.project__link:hover {
    color: #d43f1a;
}

.project__status {
    background: var(--c-accent);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.project__status--confidential {
    background: var(--c-primary);
}

.project-screenshot {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

.section-description {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 1rem;
    font-style: italic;
}

.project__status {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: #f0f0f0;
    color: #666;
    border-radius: 20px;
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

.project__status--confidential {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 600;
}

.gaming-projects,
.realestate-projects,
.community-projects,
.tourism-projects {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--c-border);
    position: relative;
}

.gaming-projects::before,
.realestate-projects::before,
.community-projects::before,
.tourism-projects::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--c-accent), #ffb347);
}

.tech-stats {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--c-border);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.8) 100%);
    border-radius: 12px;
    padding: 3rem 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.tech-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    align-items: start;
}

.tech-category {
    background: rgba(255, 255, 255, 0.8);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.tech-stats-numbers {
    grid-column: 1 / -1;
    text-align: center;
    background: linear-gradient(135deg, rgba(255, 77, 61, 0.08) 0%, rgba(102, 126, 234, 0.05) 100%);
    padding: 2.5rem 2rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 77, 61, 0.1);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.tech-stats-numbers .stat-item {
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 1.5rem 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.tech-stats-numbers .stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.tech-stats-numbers .stat-item:hover::before {
    left: 100%;
}

.tech-stats-numbers .stat-item:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(102, 126, 234, 0.2);
}

.tech-stats-numbers .stat-number {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    margin-bottom: 0.8rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #ff4d3d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
}

.tech-stats-numbers .stat-label {
    font-size: clamp(0.8rem, 2.2vw, 1rem);
    color: #555;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    position: relative;
    z-index: 1;
    opacity: 0.8;
}

.tech-category:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.tech-category h4 {
    color: var(--c-accent);
    margin-bottom: 1rem;
    font-size: 1.1rem;
    position: relative;
}

.tech-category h4::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--c-accent);
}

.tech-category ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tech-category li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.9rem;
    position: relative;
    padding-left: 1rem;
}

.tech-category li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--c-accent);
    font-weight: bold;
}

.tech-category li:last-child {
    border-bottom: none;
}

/* Responsive adjustments for programming section */
@media (max-width: 1024px) {
    .featured-projects .projects {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .project--featured {
        grid-template-columns: 250px 1fr;
    }
    
    .tech-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .tech-stats-numbers {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        margin-top: 2rem;
        padding: 2rem 1.5rem;
    }
    
    .tech-stats-numbers .stat-item {
        padding: 1.2rem 0.8rem;
    }
    
    .tech-stats-numbers .stat-number {
        font-size: clamp(1.8rem, 4vw, 2.5rem);
        margin-bottom: 0.6rem;
    }
    
    .tech-stats-numbers .stat-label {
        font-size: clamp(0.75rem, 2vw, 0.9rem);
        letter-spacing: 1px;
    }
}

/* Medium tablets */
@media (max-width: 768px) {
    .tech-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .tech-stats-numbers {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.2rem;
        padding: 1.8rem 1.2rem;
        margin-top: 1.5rem;
    }
    
    .tech-stats-numbers .stat-item {
        padding: 1rem 0.6rem;
    }
    
    .tech-stats-numbers .stat-number {
        font-size: clamp(1.6rem, 4.5vw, 2.2rem);
        margin-bottom: 0.5rem;
    }
    
    .tech-stats-numbers .stat-label {
        font-size: clamp(0.7rem, 2.2vw, 0.85rem);
        letter-spacing: 0.8px;
    }
}

@media (max-width: 600px) {
    .featured-projects .projects {
        gap: 1.5rem;
    }
    
    .project--featured,
    .project--compact {
        padding: 1.5rem;
    }
    
    .project__screenshot {
        height: 150px;
    }
    
    .screenshot-placeholder {
        font-size: 1rem;
    }
    
    /* Tech grid becomes single column */
    .tech-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .tech-stats-numbers {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1.5rem 1rem;
        margin-top: 1.5rem;
    }
    
    .tech-stats-numbers .stat-item {
        padding: 1rem 0.5rem;
    }
    
    .tech-stats-numbers .stat-number {
        font-size: clamp(1.4rem, 5vw, 2rem);
        margin-bottom: 0.4rem;
    }
    
    .tech-stats-numbers .stat-label {
        font-size: clamp(0.65rem, 2.5vw, 0.8rem);
        letter-spacing: 0.6px;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .tech-stats-numbers {
        grid-template-columns: 1fr;
        gap: 1.2rem;
        padding: 1.3rem 0.8rem;
        margin-top: 1.2rem;
    }
    
    .tech-stats-numbers .stat-item {
        padding: 1.2rem 1rem;
        border-radius: 10px;
    }
    
    .tech-stats-numbers .stat-number {
        font-size: clamp(1.8rem, 8vw, 2.5rem);
        margin-bottom: 0.6rem;
    }
    
    .tech-stats-numbers .stat-label {
        font-size: clamp(0.8rem, 3vw, 1rem);
        letter-spacing: 1px;
    }
}

/* Extra small screens */
@media (max-width: 360px) {
    .tech-stats-numbers {
        padding: 1rem 0.6rem;
        gap: 1rem;
    }
    
    .tech-stats-numbers .stat-item {
        padding: 1rem 0.8rem;
    }
    
    .tech-stats-numbers .stat-number {
        font-size: clamp(1.6rem, 9vw, 2.2rem);
    }
    
    .tech-stats-numbers .stat-label {
        font-size: clamp(0.75rem, 3.5vw, 0.9rem);
        letter-spacing: 0.8px;
    }
}

/* Project screenshot styling */
.project-screenshot {
    width: 100%;
    height: 300px;
    border-radius: 8px;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background: #fff;
}

.project-screenshot:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Different sizes for different project types */
.project--featured .project-screenshot {
    height: 300px;
    object-fit: cover;
    object-position: center top;
}

.project--compact .project-screenshot {
    height: 180px;
    object-fit: cover;
    object-position: center top;
}

/* Real project screenshots */
.project--featured .project__screenshot {
    background: none;
}

/* Loading state for images */
.project-screenshot[src*="screenshots/"] {
    background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), 
                linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), 
                linear-gradient(45deg, transparent 75%, #f0f0f0 75%), 
                linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* Better container for compact projects */
.project--compact .project__media {
    background: #f8f8f8;
}

/* Responsive adjustments for screenshots */
@media (max-width: 768px) {
    .project-screenshot {
        height: 200px;
    }
    
    .project--compact .project-screenshot {
        height: 150px;
    }
    
    .projects-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .project--compact {
        min-height: auto;
        padding: 1.2rem;
    }
}

/* Mobile responsive for very small screens */
@media (max-width: 480px) {
    .projects-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-top: 1.5rem;
        /* Ensure grid is visible on mobile */
        display: grid !important;
        width: 100%;
    }
    
    .project--compact {
        padding: 1rem;
        min-height: auto;
        /* Ensure projects are visible */
        display: flex !important;
        width: 100%;
        box-sizing: border-box;
    }
    
    .project-screenshot {
        height: 120px;
    }
    
    /* Ensure all projects section is visible */
    .all-projects {
        display: block !important;
        width: 100%;
    }
    
    #programming {
        display: block !important;
    }
}

@media (max-width: 360px) {
    .projects-grid {
        gap: 0.8rem;
    }
    
    .project--compact {
        padding: 0.8rem;
    }
    
    .project-screenshot {
        height: 100px;
    }
}

/* Additional Projects List Section */
.additional-projects {
    margin-top: 3rem;
    margin-bottom: 3rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.additional-projects .section-subtitle {
    color: #1a1a1a;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    position: relative;
}

.additional-projects .section-subtitle::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, #ff4d3d, #ff6b5b);
    border-radius: 1px;
}

.additional-projects .section-description {
    color: #666;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    line-height: 1.4;
}

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

.project-list-item {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    padding: 1.2rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.project-list-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ff4d3d, #ff6b5b);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.project-list-item:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 77, 61, 0.2);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.project-list-item:hover::before {
    transform: scaleX(1);
}

.project-list-content h4 {
    color: #1a1a1a;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.4rem 0;
    line-height: 1.3;
}

.project-list-content .project__tags {
    color: #ff4d3d;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 0.6rem;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.project-list-content p {
    color: #555;
    line-height: 1.5;
    margin-bottom: 1rem;
    font-size: 0.85rem;
}

.project-list-content .project__link {
    color: #ff4d3d;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: all 0.3s ease;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.project-list-content .project__link:hover {
    color: #d43d2a;
    transform: translateX(3px);
}

.project-list-content .project__link::after {
    content: '→';
    transition: transform 0.3s ease;
}

.project-list-content .project__link:hover::after {
    transform: translateX(2px);
}

.project-list-content .project__status {
    color: #ff9800;
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.1), rgba(255, 152, 0, 0.05));
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    display: inline-block;
    margin-top: 0.5rem;
    border: 1px solid rgba(255, 152, 0, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.project-list-content .project__status--confidential {
    color: #f44336;
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.1), rgba(244, 67, 54, 0.05));
    border-color: rgba(244, 67, 54, 0.2);
}

/* Programming Section Animations */
@keyframes projectGlow {
    0%, 100% { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); }
    50% { box-shadow: 0 12px 40px rgba(255, 77, 61, 0.2); }
}

@keyframes techCategorySlide {
    0% { transform: translateY(20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes statCounter {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Enhanced project hover effects */
.project--compact:hover {
    animation: projectGlow 2s ease-in-out infinite;
}

.tech-category {
    animation: techCategorySlide 0.6s ease-out;
}

.tech-category:nth-child(1) { animation-delay: 0.1s; }
.tech-category:nth-child(2) { animation-delay: 0.2s; }
.tech-category:nth-child(3) { animation-delay: 0.3s; }
.tech-category:nth-child(4) { animation-delay: 0.4s; }

.tech-stats-numbers .stat-item {
    animation: statCounter 0.8s ease-out;
}

.tech-stats-numbers .stat-item:nth-child(1) { animation-delay: 0.1s; }
.tech-stats-numbers .stat-item:nth-child(2) { animation-delay: 0.2s; }
.tech-stats-numbers .stat-item:nth-child(3) { animation-delay: 0.3s; }

/* Selected Projects Notice */
.projects-notice {
    margin: 2rem 0;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(255, 77, 61, 0.05) 0%, rgba(255, 119, 61, 0.03) 100%);
    border-radius: 12px;
    border: 1px solid rgba(255, 77, 61, 0.1);
    text-align: center;
}

.notice-content {
    max-width: 800px;
    margin: 0 auto;
}

.notice-text {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
    font-style: italic;
}

.notice-icon {
    font-size: 1.2rem;
    margin-right: 0.5rem;
    display: inline-block;
}

.notice-text strong {
    color: #ff4d3d;
    font-weight: 600;
    font-style: normal;
}

/* Responsive adjustments for projects notice */
@media (max-width: 768px) {
    .projects-notice {
        margin: 1.5rem 0;
        padding: 1.2rem;
    }
    
    .notice-text {
        font-size: 0.9rem;
    }
    
    .notice-icon {
        font-size: 1.1rem;
    }
}