:root{
    --bg:#050706;--bg2:#080b09;--panel:#0d110f;--text:#f5f7f3;
    --muted:#9aa39d;--lime:#b6ff00;--line:rgba(182,255,0,.18);
    --soft:rgba(255,255,255,.07);--max:1180px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--text);background:var(--bg);font-family:Inter,Arial,Helvetica,sans-serif;line-height:1.65}
a{text-decoration:none;color:inherit}
.wrap{width:min(92%,var(--max));margin:auto}
.site-header{position:sticky;top:0;z-index:30;border-bottom:1px solid var(--soft);background:rgba(5,7,6,.88);backdrop-filter:blur(16px)}
.nav{min-height:74px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.logo,.admin-brand{color:var(--lime);font-weight:900;font-size:1.8rem;font-style:italic;letter-spacing:-.1em}
.brand-copy{display:grid;line-height:1.05}.brand-copy strong{font-size:.88rem}.brand-copy small{margin-top:4px;color:var(--muted);font-size:.55rem;letter-spacing:.13em}
nav{display:flex;gap:24px}nav a{font-size:.84rem;color:#c1c8c3}nav a:hover{color:var(--lime)}
.top-cta{color:#050706;background:var(--lime);border-radius:999px;padding:10px 15px;font-size:.8rem;font-weight:800}
.hero{position:relative;min-height:88vh;display:grid;align-items:center;padding:90px 0;overflow:hidden}
.grid{position:absolute;inset:0;background-image:linear-gradient(rgba(182,255,0,.027) 1px,transparent 1px),linear-gradient(90deg,rgba(182,255,0,.027) 1px,transparent 1px);background-size:62px 62px}
.glow{position:absolute;width:520px;height:520px;border-radius:50%;background:rgba(182,255,0,.07);filter:blur(120px);right:3%;top:15%}
.hero-layout{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:70px;align-items:center}
.status{width:max-content;padding:7px 10px;border:1px solid var(--soft);border-radius:999px;color:#b6beb8;font-size:.66rem;letter-spacing:.13em}
.status i{display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime)}
.eyebrow,.section-label{margin-top:24px;color:var(--lime);font-size:.7rem;letter-spacing:.21em;font-weight:850}
h1{margin:8px 0 12px;font-size:clamp(3.8rem,8vw,7rem);line-height:.92;letter-spacing:-.065em}
.hero h2{font-size:clamp(1.35rem,2.5vw,2rem);line-height:1.25}.hero h2 span{color:var(--lime)}
.intro,.copy p,.muted{color:var(--muted)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0}
.btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:0 19px;border-radius:9px;border:1px solid transparent;font-weight:800;cursor:pointer}
.primary{background:var(--lime);color:#050706}.outline{border-color:var(--line)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:38px}
.stats div{padding:15px;border:1px solid var(--soft);border-radius:9px;background:rgba(255,255,255,.018)}.stats b,.stats span{display:block}.stats b{color:var(--lime);font-size:1.3rem}.stats span{color:var(--muted);font-size:.7rem}
.screen{min-height:430px;position:relative;padding:20px;border:1px solid var(--line);background:radial-gradient(circle at 50% 45%,rgba(182,255,0,.065),transparent 30%),#080a09;box-shadow:0 35px 100px rgba(0,0,0,.55)}
.screen-head{display:flex;justify-content:space-between;color:#717a74;font:.61rem ui-monospace,monospace;letter-spacing:.12em}.lime{color:var(--lime)}
.jd{color:var(--lime);text-align:center;font-size:8rem;font-weight:900;font-style:italic;letter-spacing:-.13em;line-height:1;margin-top:60px;text-shadow:0 0 38px rgba(182,255,0,.22)}
.screen>p{color:#939c95;text-align:center;font-size:.62rem;letter-spacing:.18em}
.terminal{position:absolute;left:20px;right:20px;bottom:20px;padding:12px;border:1px solid var(--soft);background:rgba(0,0,0,.45);color:#aab3ad;font:.66rem ui-monospace,monospace}.terminal em,.terminal strong{color:var(--lime);font-style:normal}
.section{padding:95px 0;border-top:1px solid rgba(255,255,255,.035)}.dark{background:var(--bg2)}
.section h2{margin:8px 0 25px;font-size:clamp(2.2rem,4.5vw,4.3rem);line-height:1.03;letter-spacing:-.055em}
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;margin-top:25px}.checks span{padding:8px 0;border-bottom:1px solid var(--soft);font-size:.85rem}
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:35px}.services article{min-height:230px;position:relative;padding:24px;border:1px solid var(--soft);border-radius:10px;background:var(--panel)}
.services article>span{position:absolute;top:14px;right:16px;color:#394139;font-size:1.8rem;font-weight:900}.services h3{margin-top:50px}.services p{color:var(--muted);font-size:.84rem}
.workflow{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:28px}.workflow span{padding:10px 13px;border:1px solid var(--line);border-radius:999px;font-size:.75rem;font-weight:800}.workflow b{color:var(--lime)}
.projects{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:35px}
.project{overflow:hidden;border:1px solid var(--soft);border-radius:10px;background:var(--panel)}
.project-media{height:320px;background:#070907;display:grid;place-items:center;overflow:hidden}
.project-media img,.project-media video{width:100%;height:100%;object-fit:cover}
.project-media video{background:#000}
.project-info{padding:20px}.project-info>span{color:var(--lime);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase}.project-info h3{margin:5px 0}.project-info p{color:var(--muted);font-size:.84rem}
.empty-portfolio{padding:35px;border:1px dashed var(--line);border-radius:10px;background:var(--panel)}.empty-portfolio p{color:var(--muted)}
.contact-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px}.contact-details{display:grid;gap:7px;margin-top:28px}.contact-details a{color:var(--lime)}
.contact-form,.admin-form{padding:22px;border:1px solid var(--soft);border-radius:10px;background:var(--panel)}
.form-head{display:flex;justify-content:space-between;padding-bottom:15px;margin-bottom:16px;border-bottom:1px solid var(--soft);font:.64rem ui-monospace,monospace;letter-spacing:.12em}
.contact-form label,.admin-form label{display:grid;gap:6px;margin-bottom:13px;color:#909890;font-size:.74rem}
input,textarea,select{width:100%;padding:12px;color:white;background:#070907;border:1px solid var(--soft);border-radius:7px;outline:none}
input:focus,textarea:focus,select:focus{border-color:rgba(182,255,0,.42)}textarea{resize:vertical}.full{width:100%}
.flash{margin-bottom:12px;padding:10px;border-radius:7px;font-size:.78rem}.flash.success{color:var(--lime);border:1px solid var(--line)}.flash.error{color:#ff9292;border:1px solid rgba(255,100,100,.2)}
footer{padding:28px 0;border-top:1px solid var(--soft)}.footer{display:flex;align-items:center;justify-content:space-between}.footer>div{display:grid}.footer strong{color:var(--lime)}.footer span,.footer p{color:#69716b;font-size:.7rem}

/* Admin */
.admin-body{background:#050706}
.admin-login{width:min(92%,480px);margin:9vh auto}.admin-login h1{font-size:2.4rem}.admin-back{display:block;margin-top:18px;color:var(--muted);font-size:.8rem}
.admin-header{border-bottom:1px solid var(--soft);background:#080b09}.admin-nav{min-height:64px;display:flex;align-items:center;justify-content:space-between}.admin-nav>div{display:flex;gap:18px}.admin-nav a{color:var(--lime);font-size:.8rem}
.admin-main{padding:50px 0 80px}.admin-main>h1{font-size:3.5rem}
.admin-panel{margin-top:22px;padding:24px;border:1px solid var(--soft);border-radius:12px;background:#0a0e0c}.admin-panel h2{margin-top:0}.upload-note{color:var(--muted);font-size:.78rem}
.inline-form{display:flex;gap:12px;align-items:center}.inline-form input{flex:1}
.admin-projects{display:grid;gap:8px}.admin-project{display:flex;align-items:center;justify-content:space-between;padding:13px;border:1px solid var(--soft);border-radius:8px;background:#070907}.admin-project>div{display:grid}.admin-project span{color:var(--lime);font-size:.65rem}.admin-project small{color:var(--muted)}
.delete-btn{background:transparent;color:#ff8f8f;border:1px solid rgba(255,100,100,.25);padding:8px 12px;border-radius:7px;cursor:pointer}
.inquiries{display:grid;gap:10px}.inquiries article{padding:14px;border:1px solid var(--soft);border-radius:8px;background:#070907}.inquiries article span,.inquiries article small{display:block;color:var(--muted);font-size:.72rem}.inquiries article p{color:#c3cbc5}

@media(max-width:900px){
    nav{display:none}.hero-layout,.split,.contact-layout{grid-template-columns:1fr}.services{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
    .brand-copy{display:none}.top-cta{font-size:.7rem;padding:9px 12px}.services,.projects,.checks{grid-template-columns:1fr}.footer{align-items:flex-start;flex-direction:column;gap:10px}.inline-form{flex-direction:column;align-items:stretch}.project-media{height:250px}
}

.custom-logo{width:46px;height:46px;object-fit:contain;display:block}.hero-logo-wrap{height:190px;display:grid;place-items:center;margin-top:25px}.hero-custom-logo{max-width:70%;max-height:170px;object-fit:contain;filter:drop-shadow(0 0 22px rgba(182,255,0,.16))}.current-logo{margin:14px 0;padding:18px;display:grid;place-items:center;min-height:120px;border:1px solid var(--soft);border-radius:10px;background:#070907}.current-logo img{max-width:220px;max-height:100px;object-fit:contain}.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:32px}.testimonial-card{padding:22px;border:1px solid var(--soft);border-radius:12px;background:var(--panel)}.testimonial-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.platform,.stars{color:var(--lime);font-size:.72rem}.testimonial-card blockquote{margin:22px 0;color:#e8eee9;font-size:1rem;line-height:1.75}.testimonial-meta{display:grid}.testimonial-meta span{color:var(--muted);font-size:.75rem}.proof{margin-top:16px}.proof summary{cursor:pointer;color:var(--muted);font-size:.75rem}.proof img{width:100%;margin-top:10px;border-radius:8px;border:1px solid var(--soft)}.source-link{display:inline-block;margin-top:14px;color:var(--lime);font-size:.75rem;font-weight:700}@media(max-width:900px){.testimonial-grid{grid-template-columns:1fr 1fr}}@media(max-width:620px){.testimonial-grid{grid-template-columns:1fr}.custom-logo{width:40px;height:40px}}


/* =========================================================
   JEFFDESIGN101 V4 — MOTION + FULL-SCREEN PROJECT VIEWER
   ========================================================= */

:root {
    --mouse-x: 50vw;
    --mouse-y: 30vh;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(420px circle at var(--mouse-x) var(--mouse-y),
        rgba(182,255,0,.045),
        transparent 62%);
}

/* Hero motion */
.logo,
.jd,
.custom-logo,
.hero-custom-logo {
    animation: neonBreath 3.6s ease-in-out infinite;
}

.grid {
    animation: gridDrift 22s linear infinite;
}

.glow {
    animation: glowFloat 8s ease-in-out infinite alternate;
}

.status i {
    animation: statusPulse 1.8s ease-out infinite;
}

@keyframes neonBreath {
    0%,100% { filter: drop-shadow(0 0 4px rgba(182,255,0,.12)); }
    50% { filter: drop-shadow(0 0 18px rgba(182,255,0,.30)); }
}

@keyframes gridDrift {
    from { background-position: 0 0, 0 0; }
    to { background-position: 62px 62px, 62px 62px; }
}

@keyframes glowFloat {
    from { transform: translate3d(-3%, -2%, 0) scale(.95); opacity: .72; }
    to { transform: translate3d(5%, 4%, 0) scale(1.08); opacity: 1; }
}

@keyframes statusPulse {
    0% { box-shadow: 0 0 0 0 rgba(182,255,0,.45); }
    70% { box-shadow: 0 0 0 9px rgba(182,255,0,0); }
    100% { box-shadow: 0 0 0 0 rgba(182,255,0,0); }
}

/* Scroll reveals */
.reveal,
.reveal-section {
    opacity: 0;
    transition:
        opacity .7s cubic-bezier(.2,.7,.2,1),
        transform .7s cubic-bezier(.2,.7,.2,1);
}

.reveal-up { transform: translateY(28px); }
.reveal-left { transform: translateX(-32px); }
.reveal-right { transform: translateX(32px); }
.reveal-section { transform: translateY(20px); }

.reveal.is-visible,
.reveal-section.is-visible {
    opacity: 1;
    transform: translate3d(0,0,0);
}

/* Cards */
.services article,
.project,
.testimonial-card {
    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}

.services article:hover,
.testimonial-card:hover {
    transform: translateY(-7px);
    border-color: rgba(182,255,0,.32);
    box-shadow: 0 18px 55px rgba(0,0,0,.28), 0 0 26px rgba(182,255,0,.035);
}

/* Clickable portfolio card */
.project-open {
    cursor: pointer;
    outline: none;
}

.project-open:hover,
.project-open:focus-visible {
    transform: translateY(-8px);
    border-color: rgba(182,255,0,.42);
    box-shadow: 0 24px 70px rgba(0,0,0,.38), 0 0 30px rgba(182,255,0,.055);
}

.project-open:focus-visible {
    box-shadow: 0 0 0 2px var(--lime), 0 24px 70px rgba(0,0,0,.38);
}

.project-media {
    position: relative;
}

.project-media img,
.project-media video {
    transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .4s ease;
}

.project-open:hover .project-media img,
.project-open:hover .project-media video {
    transform: scale(1.035);
    filter: brightness(.72);
}

.project-view-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 18px;
    opacity: 0;
    background: linear-gradient(to top, rgba(5,7,6,.94), rgba(5,7,6,.06) 65%);
    transition: opacity .28s ease;
    pointer-events: none;
}

.project-view-overlay span {
    color: var(--lime);
    font-size: .68rem;
    letter-spacing: .15em;
    font-weight: 900;
}

.project-view-overlay b {
    color: var(--lime);
    font-size: 1.35rem;
}

.project-open:hover .project-view-overlay,
.project-open:focus-visible .project-view-overlay {
    opacity: 1;
}

.project-hint {
    display: block;
    color: #69736c;
    margin-top: 12px;
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.video-play-badge {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%,-50%);
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    padding-left: 4px;
    color: #050706;
    background: var(--lime);
    box-shadow: 0 0 36px rgba(182,255,0,.20);
    pointer-events: none;
}

/* Full-screen modal */
.modal-open {
    overflow: hidden;
}

.project-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 28px;
    background: rgba(2,4,3,.94);
    backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

.project-modal.open {
    opacity: 1;
    visibility: visible;
}

.modal-shell {
    width: min(96vw, 1500px);
    height: min(91vh, 980px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    overflow: hidden;
    border: 1px solid rgba(182,255,0,.20);
    border-radius: 14px;
    background: #070907;
    box-shadow: 0 36px 120px rgba(0,0,0,.65), 0 0 50px rgba(182,255,0,.04);
    transform: scale(.97) translateY(10px);
    transition: transform .28s cubic-bezier(.2,.8,.2,1);
}

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

.modal-media {
    min-width: 0;
    min-height: 0;
    display: grid;
    place-items: center;
    overflow: auto;
    background:
        linear-gradient(rgba(182,255,0,.022) 1px, transparent 1px),
        linear-gradient(90deg,rgba(182,255,0,.022) 1px,transparent 1px),
        #030504;
    background-size: 36px 36px;
}

.modal-media img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* IMPORTANT: show the WHOLE image */
}

.modal-media video {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    background: #000;
}

.modal-details {
    padding: 34px 28px;
    overflow-y: auto;
    border-left: 1px solid var(--soft);
    background: #0a0e0c;
}

.modal-category {
    color: var(--lime);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.modal-details h2 {
    margin: 10px 0 16px;
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    line-height: 1.04;
    letter-spacing: -.045em;
}

.modal-details p {
    color: var(--muted);
    font-size: .9rem;
}

.modal-tip {
    margin-top: 30px;
    padding-top: 14px;
    border-top: 1px solid var(--soft);
    color: #667069;
    font-size: .66rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.modal-close {
    position: fixed;
    top: 20px;
    right: 22px;
    z-index: 1002;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(182,255,0,.28);
    border-radius: 50%;
    color: var(--lime);
    background: rgba(5,7,6,.92);
    font-size: 1.9rem;
    line-height: 1;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease;
}

.modal-close:hover {
    transform: rotate(90deg);
    background: rgba(182,255,0,.08);
}

/* Button glow */
.btn.primary,
.top-cta {
    position: relative;
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease;
}

.btn.primary:hover,
.top-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 28px rgba(182,255,0,.18);
}

/* Mobile modal */
@media (max-width: 850px) {
    .project-modal {
        padding: 12px;
    }

    .modal-shell {
        height: 94vh;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .modal-details {
        max-height: 34vh;
        border-left: 0;
        border-top: 1px solid var(--soft);
        padding: 20px;
    }

    .modal-close {
        top: 10px;
        right: 10px;
        width: 42px;
        height: 42px;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .reveal,
    .reveal-section {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* V5 — Reviews visibility + social/professional profile links */
.reviews-empty,
.profiles-empty {
    margin-top: 30px;
    padding: 34px;
    border: 1px dashed rgba(182,255,0,.24);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(182,255,0,.025), rgba(255,255,255,.01));
}

.reviews-empty strong,
.profiles-empty strong {
    display: block;
    font-size: 1.05rem;
}

.reviews-empty p,
.profiles-empty p {
    max-width: 720px;
    color: var(--muted);
    font-size: .85rem;
}

.reviews-empty-icon {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 15px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--lime);
    background: rgba(182,255,0,.04);
}

.profile-links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 30px;
}

.profile-link-card {
    min-height: 145px;
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 18px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(182,255,0,.035), transparent 45%),
        var(--panel);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.profile-link-card:hover {
    transform: translateY(-6px);
    border-color: rgba(182,255,0,.38);
    box-shadow: 0 22px 55px rgba(0,0,0,.32), 0 0 28px rgba(182,255,0,.04);
}

.profile-platform {
    grid-column: 1 / -1;
    color: var(--lime);
    font-size: .65rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.profile-link-main {
    display: grid;
}

.profile-link-main strong {
    font-size: .98rem;
}

.profile-link-main span {
    color: var(--muted);
    font-size: .75rem;
}

.profile-link-card > b {
    color: var(--lime);
    font-size: 1.4rem;
}

.social-admin-list {
    margin-top: 20px;
}

@media(max-width:900px) {
    .profile-links-grid { grid-template-columns: 1fr 1fr; }
}

@media(max-width:620px) {
    .profile-links-grid { grid-template-columns: 1fr; }
}