/* ------------------------------
   Base & Theme
------------------------------ */
    :root {
        --bg: #0f172a;
        --faded: #0f172a33;
        --surface: #132029;
        --panel: #1e2f38;
        --text: #f1f5f9;
        --muted: #94a3b8;
        --primary: #E5EAFA;
        --accent: #7fcdbb;
        --warn: #EFCB68;
        --pink: #f472b6;
        --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
        --radius: 18px;
    }

    * { 
        box-sizing: border-box; 
    }
    
    html, body { 
        height: 100%; 
        scroll-behavior: smooth;
    }
    
    body {
        margin: 0;
        font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
        background: var(--bg);
        color: var(--text);
        line-height: 1.6;
        scroll-behavior: smooth;
        overflow-x: hidden;
    }
    
    a { 
        color: var(--primary); 
        text-decoration: none; 
    }
    a:hover { 
        text-decoration: underline; 
    }
    
    img { 
        max-width: 100%; 
        display: block; 
    }
    
    button:hover {
        cursor: pointer;
    }

/* ------------------------------
   Layout Helpers
------------------------------ */
    .container { 
        width: min(1100px, 92%); 
        margin: 0 auto; 
    }
    
    .btn { 
        display: inline-flex; 
        align-items: center; 
        gap: .6rem; 
        padding: .8rem 1.2rem; 
        border-radius: 999px; 
        border: 1px solid #ffffff22; 
        background: var(--faded); 
        backdrop-filter: blur(6px); 
        box-shadow: var(--shadow); 
        transition: transform .15s ease, background .2s ease; 
        color: var(--primary);
    }
    
    .btn:hover { 
        transform: translateY(-2px); 
        background: #ffffff10; 
    }
    
    .btn.primary { 
        background: linear-gradient(135deg, #54877e, #34675e); 
        border: none; 
    }
    
    .chip { 
        display:inline-flex; 
        align-items:center; 
        gap:.4rem; 
        padding:.45rem .7rem; 
        border-radius:999px; 
        background:#ffffff10; 
        border:1px solid #ffffff1a; 
        font-size:.9rem 
    }
    
    .warn {
        color: var(--warn) !important;
    }
    
    .btn-warn {
        border: 1px solid var(--warn) !important;
    }

/* ------------------------------
   Sticky Nav
------------------------------ */
    .site-nav { 
        position: sticky; 
        top: 0; 
        z-index: 50; 
        background: linear-gradient(180deg, rgba(17,24,39,.9), rgba(17,24,39,.75)); 
        backdrop-filter: blur(6px); 
        border-bottom: 1px solid #ffffff15; 
    }
    .site-nav .inner { 
        display: flex; 
        align-items: center; 
        justify-content: space-between; 
        padding: .8rem 0; 
    }
    .nav-links { 
        display: flex; 
        gap: 1rem; 
        flex-wrap: wrap;
    }
    @media screen and (max-width:768px){ 
        .nav-links { 
            display:none; 
        }
    }
    .nav-links a { 
        padding:.5rem .8rem; 
        border-radius:999px; 
        border:1px solid transparent; 
        color: var(--text); 
    }
    .nav-links a:hover { 
        border-color:#ffffff22; 
        text-decoration:none 
    }

/* ------------------------------
   Hero
------------------------------ */
    header.hero {
      position: relative;
      min-height: 90vh;
      display: flex; 
      justify-content: center;
      align-items:center;
      text-align: center;
      background: radial-gradient(2000px 600px at 50% 0%, #34675e22, transparent 60%),
                  linear-gradient(135deg, #54877e, #14475e);
      overflow: hidden;
    }
    .hero .content { 
        position: relative; 
        z-index: 1; 
        padding: 5vh 0; 
    }
    .hero h1 { 
        font-size: clamp(2rem, 6vw, 4rem); 
        margin: 0 0 .6rem; 
        letter-spacing: .5px; 
    }
    .hero h1 span { 
        color: var(--warn);
    }
    .hero p.lead { 
        font-size: clamp(1rem, 2.6vw, 1.25rem); 
        color: #e5e7ebb3; 
        margin-bottom: 1.2rem; 
        color: var(--text); 
    }
    .actions { 
        display:flex; 
        gap:.8rem; 
        justify-content:center; 
        flex-wrap:wrap 
    }
    .actions a { 
        color: var(--text);
    }
    
    /* Generic fade+slide animation */
    @keyframes fadeUp {
        from {
            opacity: 0;
            transform: translateY(40px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Animate hero heading */
    .hero h1 {
        opacity: 0;
        animation: fadeUp 1s ease-out forwards;
        animation-delay: 0.1s;
    }

    /* Animate hero lead paragraph */
    .hero p.lead {
        opacity: 0;
        animation: fadeUp 1s ease-out forwards;
        animation-delay: 0.4s;
        max-width: 550px;
        margin: 0 auto 2rem auto;
    }

    /* Animate hero buttons with stagger */
    .hero .actions a {
        opacity: 0;
        animation: fadeUp 0.8s ease-out forwards;
    }
    .hero .actions a:nth-child(1) { 
        animation-delay: 0.7s; 
    }
    .hero .actions a:nth-child(2) { 
        animation-delay: 0.9s; 
    }
    .hero .actions a:nth-child(3) { 
        animation-delay: 1.1s; 
    }

    
    /* Three.js canvas holder */
    .threejs-wrap { 
        position: absolute; 
        inset: 0; 
        pointer-events: none; 
    }
    .threejs-shape { 
        position:absolute; 
        left:50%; 
        top:50%; 
        transform:translate(-50%,-50%); 
        width:100%; 
        height:100%; 
        opacity:.7; 
    }
    .threejs-shape canvas {
        background:transparent; 
        display:block; 
        width:100%; 
        height:100%; 
    }

/* ------------------------------
   Sections
------------------------------ */
    section { 
        padding: 84px 0; 
        position: relative; 
    }
    section .section-title { 
        text-align:center; 
        font-size: clamp(1.4rem, 3.6vw, 2rem); 
        margin: 0 0 24px; 
        color: var(--primary); 
    }
    section .section-sub { 
        text-align:center; 
        color: var(--muted); 
        margin: -6px auto 38px; 
        max-width: 65ch; 
    }

/* Stats */
    .stats { 
        display:grid; 
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
        gap: 18px; 
    }
    .stat { 
        background: var(--panel); 
        border-radius: var(--radius); 
        padding: 26px; 
        text-align:center; 
        box-shadow: var(--shadow); 
        border:1px solid #ffffff12; 
        transition: transform .2s ease; 
    }
    .stat:hover { 
        transform: translateY(-6px); 
    }
    .stat .num { 
        font-size: clamp(1.8rem, 4.8vw, 2.6rem); 
        font-weight: 800; 
        color: var(--warn); 
        letter-spacing: .5px; 
    }
    .stat .label { 
        color: var(--muted); 
    }

/* About */
    .about { 
        display:flex; 
        flex-direction: row; 
        justify-content:space-evenly; 
        gap: 24px; 
        align-items:center; 
        background: #0b1224; 
        border:1px solid #ffffff10; 
        border-radius: var(--radius); 
        padding: 24px; 
        box-shadow: var(--shadow); 
    }
    @media screen and (max-width:768px){ 
        .about { 
            flex-direction: column; 
        } 
    }
    .avatar {
        width: 45%;
        max-width: 300px;
        border-radius: 50%;
        background: linear-gradient(135deg, #34d39955, #38bdf855);
        border: 2px solid #ffffff22;
        display: grid;
        place-items: center;
        overflow: hidden;
        transition: transform 0.4s ease, box-shadow 0.4s ease;
    }
    
    .avatar:hover {
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(52, 211, 153, 0.4);
    }
    
    .avatar img {
        width: 100%;
        border-radius: 50%;
    }
    
    .highlight {
        color: var(--warn);
        font-weight: 600;
    }

/* Skills */
    .skills { 
        display:flex; 
        gap:.6rem; 
        flex-wrap:wrap; 
    }

/* Projects grid */
    .projects {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 24px;
    }

    .project-card {
        position: relative;
        border-radius: var(--radius);
        overflow: hidden;
        background: var(--panel);
        border: 1px solid #ffffff12;
        box-shadow: var(--shadow);
        display: flex;
        flex-direction: column;
        transition: transform .2s ease;
    }
    .project-card:hover {
        transform: translateY(-6px);
    }
    
    .project-thumb {
        aspect-ratio: 16/9;
        background: linear-gradient(135deg, #1f2937, #0f172a);
        height: 175px;
    }
    .project-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
    }
    
    .project-body {
        padding: 20px;
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: space-between;
        gap: 12px;
    }
    
    .project-body h3 {
        margin: 0 0 1rem 0;
        font-size: 1.2rem;
        color: var(--primary);
    }
    
    .project-tags {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
    }
    .project-tags span {
        font-size: .8rem;
        padding: .25rem .6rem;
        border-radius: 999px;
        background: #ffffff10;
        border: 1px solid #ffffff15;
    }
    
    .project-card .read-more {
        margin-top: 2rem;
    }
    
    .project-overlay {
        position: absolute;
        inset: 0;
        background: var(--panel);
        padding: 24px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transform: translateY(100%);
        transition: transform 0.4s ease;
        border-radius: var(--radius);
    }
    .project-card.open .project-overlay {
        transform: translateY(0);
    }
    .project-details {
        margin: 0.6rem 0 1rem;
        padding-left: 1.2rem;
        color: var(--text);
        font-size: .9rem;
        line-height: 1.4;
    }
    
    .project-details li {
        margin-bottom: .4rem;
        list-style: disc;
        color: var(--accent);
    }
    
    .project-overlay p {
        font-size: .95rem;
        color: var(--muted);
        line-height: 1.5;
        margin: 0;
    }
    
    .project-overlay .cta {
        display: flex;
        gap: .6rem;
        flex-wrap: wrap;
    }

/* Timeline */
    #experience li {
        list-style: none;
        position: relative;
        color: var(--muted);
    }
    #experience li::before {
        content: '';
        height: 2px;
        width: 10px;
        background: var(--muted);
        position: absolute;
        top: 12px;
        left: -17px;
        border-radius: 50%;
    }
    .timeline { 
        position: relative; 
    }
    .timeline::before { 
        content:""; 
        position:absolute; 
        left: 30px; 
        top:0; 
        bottom:0; 
        width:2px; 
        background:#ffffff1a; 
    }
    .tl-item { 
        position:relative; 
        padding-left: 36px; 
        margin-bottom: 18px; 
    }
    .tl-item::before { 
        content:""; 
        position:absolute; 
        left: 3px; 
        top:.4rem; 
        width: 16px; 
        height:16px; 
        border-radius:50%;
        background: var(--accent); 
        box-shadow: 0 0 0 4px rgba(52,211,153,.15);
        animation: breathe 2s ease-in-out infinite;
    }
    .tl-item .when { 
        color: var(--muted); 
        font-size:.9rem;
    }
    .tl-item .when ~ ul {
        margin-bottom: 0;
    }
    .more-content ul {
        margin: 0;
    }
    @keyframes breathe {
        0% {
            transform: scale(1);
            box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.15);
        }
        50% {
            transform: scale(1.1);
            box-shadow: 0 0 0 8px rgba(52, 211, 153, 0.15);
        }
        100% {
            transform: scale(1);
            box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.15);
        }
    }
    
    .tl-item .read-more {
        margin-top: 1rem;
    }
    
    .more-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease, opacity 0.5s ease;
        opacity: 0;
    }
    
    .more-content.show {
        max-height: 500px; /* adjust for content length */
        opacity: 1;
    }

/* Testimonials */
    .testimonials { 
        display:grid; 
        grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); 
        gap: 18px; 
    }
    .quote { 
        background:#0b1224; 
        border:1px solid #ffffff10; 
        border-radius: var(--radius); 
        padding: 20px; 
        box-shadow: var(--shadow); 
        transition: scale .2s ease;
    }
    .quote:hover {
        scale: 1.03;
    }
    .quote .who { 
        margin-top: 10px; 
        color: var(--muted); 
        font-size:.95rem 
    }

/* Carousel */
    .marquee {
        overflow: hidden;
        border-radius: var(--radius);
        border: 1px solid #ffffff12;
        background: #0b1224;
        padding: 18px 0;
        position: relative;
    }
    
    .marquee .track {
        display: flex;
        gap: 60px;
        width: max-content;
        will-change: transform;
    }
    
    a.logo-container,
    div.logo-container {
        position: relative;
        top: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: transform 0.3s ease;
        text-decoration: none;
        transition: top 0.3s ease;
    }
    
    .logo {
        height: 50px;
        max-width: 100px;
        opacity: 0.8;
        filter: grayscale(100%);
        transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
        text-decoration: none;
    }
    
    .logo-name {
        margin-top: 0;
        font-size: 0.85rem;
        color: #fff;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: opacity 0.3s ease, max-height 0.3s ease, margin-top 0.3s ease;
        text-align: center;
        white-space: nowrap;
        text-decoration: none;
    }
    
    .logo-container:hover {
        top: 0;
    }
    
    .logo-container:hover .logo {
        transform: scale(1.2);
        opacity: 1;
        filter: none;
        text-decoration: none;
    }
    
    .logo-container:hover .logo-name {
        opacity: 1;
        max-height: 2rem; /* adjust if names are longer */
        margin-top: 15px;
        text-decoration: none;
    }
    
/* Site Checker */
    #site-checker-form {
        display: flex;
        gap: 3rem;
    }
    
    #site-checker-form input[type="url"] {
        flex: 1 1 auto;
        padding: 0.75rem 1rem;
        border-radius: 8px;
        border: 1px solid #ccc;
    }
    
    #site-checker-form .btn.primary {
        margin: auto;
    }
    
    #site-checker-results {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        margin-top: 2rem;
    }
    
    .skeleton-card {
        position: relative;
        overflow: hidden;
        background: var(--surface);
        border-radius: 1rem;
        height: 150px;
        width: 100%;
    }
    
    .skeleton-card::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateX(-100%);
        background: linear-gradient(
            90deg,
            var(--surface) 0%,
            var(--panel) 50%,
            var(--surface) 100%
        );
        background-size: 100%;
        animation: shimmer 3s infinite;
        content: '';
    }
    
    @keyframes shimmer {
        100% {
            transform: translateX(100%);
        }
    }
    
    .result-card {
        background: var(--surface);
        color: var(--text);
        padding: 1rem 1.5rem;
        border-radius: 1rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        transition: transform 0.2s ease;
    }
    
    .result-card:last-child {
        grid-column: 1 / -1; /* span full width */
    }
    
    .result-card:hover {
        transform: translateY(-5px);
    }
    
    .result-card:not(.skeleton-card):last-child:hover {
        text-decoration: none;
        background: var(--panel);
    }
    
    .result-card h3 {
        margin-top: 0;
        margin-bottom: 0.5rem;
        font-size: 1.2rem;
    }
    
    .result-card ul {
        display: flex;
        flex-direction: column;
        gap: 0.5rem 1rem;
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .result-card li {
        display: flex;
        justify-content: space-between;
        background: rgba(0,0,0,0.03);
        padding: 0.4rem 0.6rem;
        border-radius: 6px;
        font-size: 0.95rem;
        border:1px solid var(--panel);
    }
    
    .result-card li::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text);
        margin-right: 0.5rem;
    }
    
    .result-score {
        font-weight: bold;
        padding: 0.2rem 0.5rem;
        border-radius: 0.5rem;
    }
    
    .score-good {
        background-color: #66CC66;
        color: var(--text);
        height: fit-content;
    }
    
    .score-warning {
        background-color: #FFCC33;
        color: var(--text);
        height: fit-content;
    }
    
    .score-bad {
        background-color: #FF6666;
        color: var(--text);
        height: fit-content;
    }
    
    @media screen and (max-width:768px){
        #site-checker-results {
            grid-template-columns: repeat(1, 1fr);
        }
    }

/* Contact */
    .contact-container { 
        display: flex; 
        flex-direction: row; 
        gap: 24px; 
    }
    .contact-container > * { 
        flex: 1 1 0px; 
    }
    @media screen and (max-width:768px){ 
        .contact-container { 
            flex-direction: column-reverse; 
        } 
    }
    form.contact { 
        background: var(--panel); 
        border:1px solid #ffffff12; 
        border-radius: var(--radius); 
        padding: 20px; 
        box-shadow: var(--shadow); 
    }
    .field { 
        display:grid; 
        gap:6px; 
        margin-bottom: 12px; 
    }
    .field input, 
    .field textarea { 
        font-family: monospace;
        width:100%; 
        padding: .9rem 1rem; 
        border-radius: 12px; 
        border:1px solid #ffffff22; 
        background: #0b1224; 
        color: var(--text); 
    }
    .field textarea { 
        min-height: 120px; 
        resize: vertical;
    }

/* Footer */
    footer { 
        text-align:center;
        padding: 42px 0; 
        color: var(--muted); 
        border-top:1px solid #ffffff12; 
        background: #0b1224; 
    }

/* Reveal on scroll */
    .reveal { 
        opacity: 0; 
        transform: translateY(18px) scale(.98); 
        transition: opacity .6s ease, transform .6s ease; 
    }
    .reveal.visible { 
        opacity: 1; 
        transform: none; 
    }
    .reveal {
        background:#0b1224; 
        border: 1px solid #ffffff10; 
        border-radius: var(--radius); 
        padding: 20px; 
        box-shadow: var(--shadow)
    }
    
/* Back to top */
    #back-to-top {
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 40px;
        height: 40px;
        background-color: var(--accent);
        color: var(--bg);
        border: none;
        border-radius: 50%;
        font-size: 1.5rem;
        cursor: pointer;
        box-shadow: var(--shadow);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s, transform 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 100;
    }
    
    #back-to-top.show {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
    
    #back-to-top:hover {
        transform: translateY(-3px);
    }

/* Reduced motion */
    @media (prefers-reduced-motion: reduce) { 
        .marquee .track { 
            animation: none 
        } 
        .btn, 
        .stat:hover { 
            transform: none 
        } 
        .reveal {
            transition: none 
        } 
    }