/* =========================================================
       CSS VARIABLES & RESET
       ========================================================= */
:root {
    --bg:          #07071a;
    --bg2:         #0f0f28;
    --bg3:         #141432;
    --card:        #12122a;
    --card2:       #1a1a38;
    --blue:        #0ea5e9;
    --cyan:        #22d3ee;
    --purple:      #818cf8;
    --gold:        #fbbf24;
    --green:       #10b981;
    --white:       #f0f6ff;
    --muted:       #7b8fb5;
    --dim:         #3d4f72;
    --glow-blue:   0 0 40px rgba(14,165,233,0.4);
    --glow-cyan:   0 0 40px rgba(34,211,238,0.4);
    --radius:      20px;
    --radius-sm:   12px;
}
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body {
    font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    background: var(--bg);
    color: var(--white);
    overflow-x: hidden;
    line-height: 1.6;
}
a { text-decoration:none; color:inherit; }
ul { list-style:none; }

/* =========================================================
   SCROLLBAR
   ========================================================= */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--blue); border-radius:999px; }

/* =========================================================
   FLOATING PARTICLES
   ========================================================= */
#particles {
    position:fixed; inset:0;
    pointer-events:none; z-index:0; overflow:hidden;
}
.particle {
    position:absolute; border-radius:50%;
    opacity:0; animation:particle-float linear infinite;
}
@keyframes particle-float {
    0%   { transform:translateY(100vh) scale(0); opacity:0; }
    10%  { opacity:0.6; }
    90%  { opacity:0.2; }
    100% { transform:translateY(-10vh) scale(1); opacity:0; }
}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal {
    opacity:0; transform:translateY(50px);
    transition: opacity .8s cubic-bezier(.22,1,.36,1),
    transform .8s cubic-bezier(.22,1,.36,1);
}
.reveal.from-left  { transform:translateX(-60px); }
.reveal.from-right { transform:translateX(60px); }
.reveal.from-scale { transform:scale(0.85); }
.reveal.visible { opacity:1; transform:none; }
.reveal-d1 { transition-delay:.1s; }
.reveal-d2 { transition-delay:.2s; }
.reveal-d3 { transition-delay:.3s; }
.reveal-d4 { transition-delay:.4s; }

/* =========================================================
   KEYFRAME ANIMATIONS
   ========================================================= */
@keyframes float {
    0%,100% { transform:translateY(0); }
    50%     { transform:translateY(-10px); }
}
@keyframes glow-pulse {
    0%,100% { box-shadow:var(--glow-blue); }
    50%     { box-shadow:0 0 70px rgba(14,165,233,.7); }
}
@keyframes fade-in {
    from { opacity:0; } to { opacity:1; }
}
@keyframes logo-pop {
    0%  { transform:scale(0) rotate(-180deg); opacity:0; }
    60% { transform:scale(1.2) rotate(20deg); opacity:1; }
    100%{ transform:scale(1) rotate(0); }
}
@keyframes shimmer {
    0%   { left:-100%; }
    100% { left:200%; }
}
@keyframes border-glow {
    0%,100% { border-color:rgba(14,165,233,.2); }
    50%     { border-color:rgba(34,211,238,.6); }
}

/* =========================================================
   UTILITIES
   ========================================================= */
.container { max-width:1400px; margin:0 auto; padding:0 2rem; }
.section    { padding:7rem 0; position:relative; z-index:1; }

.section-title {
    font-size:clamp(2rem,4vw,3.5rem); font-weight:900;
    text-align:center; margin-bottom:.8rem;
    background:linear-gradient(135deg,var(--cyan),var(--purple));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}
.section-subtitle {
    text-align:center; color:var(--muted); font-size:1.05rem;
    margin-bottom:3.5rem;
}
.line-accent {
    display:block; width:80px; height:4px; border-radius:999px;
    background:linear-gradient(90deg,var(--blue),var(--cyan));
    margin:.6rem auto 1rem;
    animation:glow-pulse 3s ease-in-out infinite;
}
.tag {
    display:inline-flex; align-items:center; gap:.35rem;
    padding:.28rem .85rem; border-radius:999px;
    font-size:.78rem; font-weight:700;
    background:rgba(14,165,233,.15); color:var(--cyan);
    border:1px solid rgba(14,165,233,.3);
}
.tag-purple { background:rgba(129,140,248,.15); color:var(--purple); border-color:rgba(129,140,248,.3); }
.tag-gold   { background:rgba(251,191,36,.15);  color:var(--gold);   border-color:rgba(251,191,36,.3); }
.tag-green  { background:rgba(16,185,129,.15);  color:var(--green);  border-color:rgba(16,185,129,.3); }
.tag-red    { background:rgba(239,68,68,.15);   color:#f87171;       border-color:rgba(239,68,68,.3); }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
    display:inline-flex; align-items:center; gap:.6rem;
    padding:.95rem 2.2rem; border-radius:999px;
    font-size:1rem; font-weight:700; border:none;
    cursor:pointer; font-family:inherit;
    position:relative; overflow:hidden;
    transition:all .35s cubic-bezier(.22,1,.36,1);
    text-decoration:none;
}
.btn::after {
    content:''; position:absolute;
    top:0; left:-100%; width:60%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
    transition:left .5s ease;
}
.btn:hover::after { left:200%; }
.btn-primary  { background:linear-gradient(135deg,var(--blue),var(--cyan)); color:#fff; box-shadow:0 8px 30px rgba(14,165,233,.4); }
.btn-primary:hover  { transform:translateY(-3px) scale(1.04); box-shadow:0 16px 50px rgba(14,165,233,.6); }
.btn-outline  { background:transparent; color:var(--cyan); border:2px solid var(--cyan); }
.btn-outline:hover  { background:var(--cyan); color:var(--bg); transform:translateY(-3px); box-shadow:0 12px 40px rgba(34,211,238,.4); }
.btn-purple   { background:linear-gradient(135deg,var(--purple),#a78bfa); color:#fff; box-shadow:0 8px 30px rgba(129,140,248,.4); }
.btn-purple:hover   { transform:translateY(-3px) scale(1.04); box-shadow:0 16px 50px rgba(129,140,248,.6); }
.btn-sm { padding:.6rem 1.4rem; font-size:.88rem; }

/* =========================================================
   NAVBAR
   ========================================================= */
.navbar {
    position:fixed; top:0; left:0; right:0; height:75px; z-index:1000;
    backdrop-filter:blur(24px); background:rgba(7,7,26,.92);
    border-bottom:1px solid rgba(14,165,233,.2);
    transition:background .3s, box-shadow .3s, border-color .3s;
}
.navbar.scrolled {
    background:rgba(7,7,26,.98);
    box-shadow:0 10px 40px rgba(0,0,0,.6);
    border-bottom-color:rgba(14,165,233,.4);
}
.nav-container {
    height:100%; max-width:1400px; margin:0 auto; padding:0 2rem;
    display:flex; align-items:center; justify-content:space-between;
}
.logo {
    font-size:1.55rem; font-weight:900; letter-spacing:-.02em;
    background:linear-gradient(135deg,var(--cyan),var(--purple));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}
.nav-links { display:flex; gap:2.2rem; align-items:center; }
.nav-links a {
    color:var(--muted); font-weight:600; font-size:.93rem;
    position:relative; transition:color .3s;
}
.nav-links a::after {
    content:''; position:absolute; bottom:-5px; left:0; width:0; height:2px;
    background:linear-gradient(90deg,var(--blue),var(--cyan));
    border-radius:999px; transition:width .3s;
}
.nav-links a:hover { color:var(--white); }
.nav-links a:hover::after { width:100%; }
.linktree-pill {
    display:inline-flex; align-items:center; gap:.45rem;
    padding:.5rem 1.3rem; border-radius:999px;
    background:linear-gradient(135deg,#27ae60,#2ecc71); color:#fff;
    font-weight:700; font-size:.88rem;
    box-shadow:0 6px 20px rgba(46,204,113,.4);
    transition:all .3s ease; animation:float 4s ease-in-out infinite;
}
.linktree-pill:hover { transform:translateY(-3px) scale(1.05); box-shadow:0 12px 35px rgba(46,204,113,.6); }

/* Hamburger */
.hamburger {
    display:none; flex-direction:column; gap:5px;
    cursor:pointer; padding:.5rem;
}
.hamburger span {
    display:block; width:27px; height:2.5px;
    background:var(--white); border-radius:999px; transition:all .3s;
}
.hamburger.open span:nth-child(1) { transform:translateY(7.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg); }

.mobile-nav {
    display:none; position:fixed; top:75px; left:0; right:0;
    background:rgba(7,7,26,.98); backdrop-filter:blur(24px);
    border-bottom:1px solid rgba(14,165,233,.2);
    padding:1.5rem 2rem 2rem; flex-direction:column; gap:1.2rem; z-index:999;
}
.mobile-nav.open { display:flex; }
.mobile-nav a {
    font-size:1.1rem; font-weight:600; color:var(--muted);
    padding:.6rem 0; border-bottom:1px solid rgba(255,255,255,.05);
    transition:color .3s;
}
.mobile-nav a:hover { color:var(--cyan); }

/* =========================================================
   HERO SECTION
   ========================================================= */
.hero {
    min-height:100vh; display:flex; align-items:center;
    justify-content:center; padding-top:75px;
    position:relative; overflow:hidden;
}
.hero-glow {
    position:absolute; border-radius:50%;
    filter:blur(80px); pointer-events:none; z-index:0;
    animation:float 8s ease-in-out infinite;
}
.hero-glow-1 { width:600px; height:600px; background:rgba(14,165,233,.18); top:-100px; left:-150px; }
.hero-glow-2 { width:500px; height:500px; background:rgba(129,140,248,.15); bottom:-100px; right:-100px; animation-delay:-3s; }
.hero-glow-3 { width:300px; height:300px; background:rgba(251,191,36,.1); top:50%; right:10%; animation-delay:-6s; }

.hero-inner {
    position:relative; z-index:2;
    display:grid; grid-template-columns:1fr 420px; gap:4rem;
    align-items:center; max-width:1400px; padding:0 2rem; width:100%;
}
@media (max-width:1100px) {
    .hero-inner { grid-template-columns:1fr; text-align:center; }
    .hero-badge-row, .hero-buttons, .hero-meta { justify-content:center; }
    .hero-desc { margin:0 auto 2.5rem; }
}
.hero-badge-row {
    display:flex; gap:.7rem; flex-wrap:wrap; margin-bottom:1.5rem;
    animation:fade-in .8s ease both;
}
.hero-title {
    font-size:clamp(3.2rem,6vw,5.8rem); font-weight:900;
    line-height:1.05; letter-spacing:-.03em; margin-bottom:1.5rem;
    animation:fade-in .8s ease .1s both;
}
.hero-gradient {
    background:linear-gradient(135deg,var(--cyan) 0%,var(--purple) 50%,var(--gold) 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}
.hero-desc {
    font-size:1.15rem; color:var(--muted); max-width:560px;
    margin-bottom:2.5rem; line-height:1.75;
    animation:fade-in .8s ease .2s both;
}
.hero-buttons {
    display:flex; gap:1.2rem; flex-wrap:wrap; margin-bottom:3rem;
    animation:fade-in .8s ease .3s both;
}
.hero-meta { display:flex; gap:3rem; animation:fade-in .8s ease .4s both; }
.hero-stat strong {
    display:block; font-size:1.8rem; font-weight:900;
    background:linear-gradient(135deg,var(--cyan),var(--gold));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}
.hero-stat span {
    font-size:.82rem; color:var(--muted);
    text-transform:uppercase; letter-spacing:.06em; font-weight:600;
}

/* Profile card (right side of hero) */
.hero-card {
    background:linear-gradient(145deg,var(--card),var(--card2));
    border-radius:28px; padding:2.5rem 2rem;
    border:1px solid rgba(14,165,233,.25);
    box-shadow:0 30px 70px rgba(0,0,0,.5);
    position:relative; overflow:hidden;
    animation:float 6s ease-in-out infinite;
}
.hero-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,var(--blue),var(--cyan),var(--purple));
}

/* =========================================================
   PROFILE PICTURE — HERO CARD
   Replace 'profile.jpg' with your actual filename.
   The image should be square (same width & height).
   ========================================================= */
.hero-card-avatar {
    width:90px; height:90px; border-radius:50%;
    margin:0 auto 1.2rem; overflow:hidden;
    border:4px solid rgba(14,165,233,.4);
    box-shadow:0 12px 35px rgba(14,165,233,.5);
    background:linear-gradient(135deg,var(--blue),var(--purple));
    display:flex; align-items:center; justify-content:center;
    font-size:2.3rem; color:#fff;
}
.hero-card-avatar img {
    width:100%; height:100%; object-fit:cover; border-radius:50%; display:block;
}

.hero-card h3 { font-size:1.25rem; font-weight:800; text-align:center; margin-bottom:.25rem; }
.hero-card p  { color:var(--muted); text-align:center; font-size:.88rem; margin-bottom:1.5rem; }
.hero-card-stats { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.mini-stat {
    background:rgba(14,165,233,.1); border-radius:14px; padding:.9rem;
    border:1px solid rgba(14,165,233,.15); transition:all .3s ease;
}
.mini-stat:hover { background:rgba(14,165,233,.2); transform:translateY(-3px); }
.mini-stat strong { display:block; font-size:1.35rem; font-weight:900; color:var(--cyan); }
.mini-stat span   { font-size:.72rem; color:var(--muted); font-weight:600; text-transform:uppercase; }

/* =========================================================
   GAMES SECTION
   ========================================================= */
.games-grid {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:2.5rem;
}
.game-card {
    background:var(--card); border-radius:26px;
    border:1px solid rgba(14,165,233,.15);
    overflow:hidden; transition:all .45s cubic-bezier(.22,1,.36,1);
    position:relative; cursor:pointer;
    animation:border-glow 4s ease-in-out infinite;
}
.game-card::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg,rgba(14,165,233,.07),rgba(129,140,248,.07));
    opacity:0; transition:opacity .4s;
}
.game-card:hover::after { opacity:1; }
.game-card:hover {
    transform:translateY(-16px) scale(1.02);
    border-color:var(--cyan);
    box-shadow:0 30px 70px rgba(0,0,0,.5), 0 0 50px rgba(14,165,233,.25);
}

/* =========================================================
   GAME BANNERS — replace the filenames below with your own
   Recommended size: 800 × 400 px (landscape).

   How to change:
     donut-dash.jpg    → your Donut Dash banner file
     flappy-dog.jpg    → your Flappy Dog 2D banner file
     battle-royale.jpg → your Battle Royale banner file

   You can also use .png or .webp — just change the extension.
   ========================================================= */
.game-banner {
    width:100%; height:200px; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    position:relative;
}
.game-banner img {
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .5s ease;
}
.game-card:hover .game-banner img { transform:scale(1.07); }

/* Fallback gradient shown if image is missing */
.game-banner-donut   { background:linear-gradient(135deg,#1a0a2e,#2d1b69); }
.game-banner-flappy  { background:linear-gradient(135deg,#0a1a2e,#1a4a6e); }
.game-banner-br      { background:linear-gradient(135deg,#1a0a0a,#4a1a1a); }

.banner-fallback {
    position:absolute; font-size:4.5rem; z-index:2;
    /* hidden when image loads successfully */
}
.game-banner img.loaded + .banner-fallback { display:none; }

.wip-badge { position:absolute; top:1rem; right:1rem; z-index:3; }

.game-card-body { padding:1.8rem; position:relative; z-index:2; }
.game-card-title { font-size:1.55rem; font-weight:900; margin-bottom:.8rem; color:var(--cyan); }
.game-card-tags  { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.2rem; }
.game-card-desc  { color:var(--muted); font-size:.94rem; margin-bottom:1.8rem; line-height:1.7; }
.game-card-actions { display:flex; gap:.8rem; flex-wrap:wrap; }

/* =========================================================
   GAME MODALS
   ========================================================= */
.modal-overlay {
    position:fixed; inset:0;
    background:rgba(7,7,26,.93); backdrop-filter:blur(22px);
    display:flex; align-items:center; justify-content:center;
    z-index:9000; opacity:0; pointer-events:none;
    transition:opacity .4s ease; padding:1rem;
    overflow-y:auto;
}
.modal-overlay.active { opacity:1; pointer-events:all; }

.modal-box {
    background:var(--card2); border-radius:28px;
    max-width:1000px; width:100%; max-height:90vh; overflow-y:auto;
    border:1px solid rgba(14,165,233,.45);
    box-shadow:0 40px 100px rgba(0,0,0,.7), 0 0 80px rgba(14,165,233,.2);
    transform:scale(.88) translateY(30px);
    transition:all .5s cubic-bezier(.34,1.56,.64,1);
    overflow-x:hidden;
}
.modal-overlay.active .modal-box { transform:scale(1) translateY(0); }

.modal-top {
    display:flex; align-items:center; justify-content:space-between;
    padding:2rem 2.5rem 1.5rem;
    border-bottom:1px solid rgba(14,165,233,.2);
    position:sticky; top:0; background:var(--card2); z-index:2;
}
.modal-title-row { display:flex; align-items:center; gap:1.2rem; }

/* =========================================================
   MODAL GAME ICONS — place your logo files here too.
   Same approach: replace 'donut-dash-icon.png' etc.
   Recommended size: 128 × 128 px (square).
   ========================================================= */
.modal-icon {
    width:65px; height:65px; border-radius:18px; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    font-size:2.3rem; flex-shrink:0;
    animation:float 3s ease-in-out infinite;
}
.modal-icon img { width:100%; height:100%; object-fit:cover; border-radius:18px; }

.modal-top-title { font-size:1.55rem; font-weight:900; margin-bottom:.3rem; }
.modal-close-btn {
    width:46px; height:46px; border-radius:50%;
    background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15);
    color:var(--muted); font-size:1.35rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all .3s ease; flex-shrink:0;
}
.modal-close-btn:hover {
    background:rgba(14,165,233,.2); color:var(--white);
    border-color:var(--blue); transform:rotate(90deg) scale(1.1);
}
.modal-body { padding:2.5rem; }
.modal-two-col { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; }
@media (max-width:780px) { .modal-two-col { grid-template-columns:1fr; } }

.modal-desc { color:var(--muted); font-size:1rem; line-height:1.8; margin-bottom:1.2rem; }
.modal-features { display:flex; flex-direction:column; gap:.8rem; margin-bottom:1.5rem; }
.modal-feature {
    display:flex; align-items:flex-start; gap:1rem; padding:1rem 1.2rem;
    background:rgba(14,165,233,.07); border-radius:14px;
    border:1px solid rgba(14,165,233,.15); transition:all .3s ease;
}
.modal-feature:hover { background:rgba(14,165,233,.14); transform:translateX(6px); }
.modal-feature-icon {
    width:38px; height:38px; border-radius:10px; flex-shrink:0;
    background:linear-gradient(135deg,var(--blue),var(--cyan));
    display:flex; align-items:center; justify-content:center; font-size:1.05rem;
}
.modal-feature-text strong { display:block; font-size:.93rem; color:var(--white); }
.modal-feature-text span   { font-size:.83rem; color:var(--muted); }

.modal-right { display:flex; flex-direction:column; gap:1.5rem; }
.itch-box {
    background:rgba(14,165,233,.07); border-radius:18px;
    border:1px solid rgba(14,165,233,.2); padding:1.2rem; overflow:hidden;
}
.itch-box iframe { border-radius:12px; display:block; width:100%; max-width:100%; }
.modal-right iframe { width:100%; max-width:100%; height:auto; aspect-ratio:16/9; }

.modal-tech {
    background:rgba(129,140,248,.07); border-radius:18px;
    border:1px solid rgba(129,140,248,.2); padding:1.5rem;
}
.modal-tech h4 {
    font-size:.88rem; color:var(--purple); margin-bottom:1rem;
    font-weight:700; text-transform:uppercase; letter-spacing:.05em;
}
.tech-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:.52rem 0; border-bottom:1px solid rgba(255,255,255,.05);
    font-size:.88rem;
}
.tech-row:last-child { border-bottom:none; }
.tech-row span:first-child { color:var(--muted); }
.tech-row span:last-child  { color:var(--white); font-weight:600; }
.modal-btn-row {
    display:flex; gap:1rem; flex-wrap:wrap; margin-top:2rem;
    padding-top:2rem; border-top:1px solid rgba(14,165,233,.15);
}

/* =========================================================
   YOUTUBE SECTION
   ========================================================= */
.youtube-grid {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(295px,1fr)); gap:2rem;
}
.video-card {
    background:var(--card); border-radius:20px;
    border:1px solid rgba(14,165,233,.15); overflow:hidden;
    transition:all .4s ease;
}
.video-card:hover {
    transform:translateY(-8px); border-color:var(--cyan);
    box-shadow:0 20px 50px rgba(0,0,0,.4), 0 0 30px rgba(14,165,233,.2);
}
.video-card iframe { display:block; width:100%; height:195px; }
.video-info { padding:1.1rem 1.3rem; }
.video-title { font-weight:700; font-size:.97rem; margin-bottom:.35rem; line-height:1.4; }
.video-meta  { font-size:.8rem; color:var(--muted); }
.yt-cta { text-align:center; margin-top:3rem; }

/* =========================================================
   HIRE ME SECTION
   ========================================================= */
.hire-wrap { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
@media (max-width:900px) { .hire-wrap { grid-template-columns:1fr; } }

.hire-main {
    background:var(--card); border-radius:26px; padding:2.5rem;
    border:1px solid rgba(14,165,233,.2);
}

.hire-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

.hire-cards {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Mobile */
@media (max-width: 768px) {
    .hire-wrap {
        grid-template-columns: 1fr;
    }
}
.avail-badge {
    display:inline-flex; align-items:center; gap:.6rem;
    padding:.45rem 1.2rem; border-radius:999px;
    background:rgba(16,185,129,.15); color:var(--green);
    border:1px solid rgba(16,185,129,.3); font-size:.83rem;
    font-weight:700; margin-bottom:1.5rem;
}
.avail-dot {
    width:8px; height:8px; border-radius:50%;
    background:var(--green); animation:glow-pulse 2s ease-in-out infinite;
    box-shadow:0 0 6px var(--green);
}
.hire-title { font-size:1.9rem; font-weight:900; margin-bottom:1rem; }
.hire-desc  { color:var(--muted); margin-bottom:1.8rem; line-height:1.7; }

.services { display:flex; flex-direction:column; gap:.85rem; margin-bottom:2rem; }
.svc-item {
    display:flex; align-items:center; gap:1rem; padding:.9rem 1.1rem;
    background:rgba(14,165,233,.07); border-radius:14px;
    border:1px solid rgba(14,165,233,.12); font-size:.92rem;
    transition:all .3s ease;
}
.svc-item:hover { background:rgba(14,165,233,.15); transform:translateX(6px); }
.svc-item i { color:var(--cyan); width:18px; text-align:center; }

/* PDF project card */
.pdf-card {
    background:var(--card); border-radius:26px; padding:2.5rem;
    border:1px solid rgba(129,140,248,.25); position:relative; overflow:hidden;
}
.pdf-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,var(--purple),#a78bfa);
}
.pdf-head { display:flex; align-items:center; gap:1.2rem; margin-bottom:1.5rem; }
.pdf-icon {
    width:58px; height:58px; border-radius:16px; flex-shrink:0;
    background:linear-gradient(135deg,var(--purple),#a78bfa);
    display:flex; align-items:center; justify-content:center;
    font-size:1.7rem; animation:float 5s ease-in-out infinite;
}
.pdf-title    { font-size:1.25rem; font-weight:800; }
.pdf-subtitle { font-size:.83rem; color:var(--muted); }
.pdf-desc     { color:var(--muted); font-size:.93rem; line-height:1.7; margin-bottom:1.3rem; }
.pdf-feats    { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-bottom:1.3rem; }
.pdf-feat     { display:flex; align-items:center; gap:.55rem; font-size:.85rem; color:var(--muted); }
.pdf-feat i   { color:var(--purple); font-size:.85rem; }

/* =========================================================
   ABOUT SECTION
   ========================================================= */
.about-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center;
}
@media (max-width:900px) { .about-grid { grid-template-columns:1fr; text-align:center; } }

.about-card {
    background:var(--card); border-radius:26px; padding:2.5rem;
    border:1px solid rgba(14,165,233,.15);
}
.about-text { color:var(--muted); font-size:.98rem; margin-bottom:1.1rem; line-height:1.8; }
.about-text strong { color:var(--white); }
.skills-grid { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.5rem; }
.skill-chip {
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.42rem 1rem; border-radius:999px;
    background:rgba(14,165,233,.12); border:1px solid rgba(14,165,233,.25);
    color:var(--cyan); font-size:.82rem; font-weight:600;
    transition:all .3s ease;
}
.skill-chip:hover { background:rgba(14,165,233,.25); transform:translateY(-2px) scale(1.05); }

.about-side {
    background:linear-gradient(145deg,var(--card),var(--card2));
    border-radius:26px; padding:2.5rem; border:1px solid rgba(129,140,248,.2);
    text-align:center;
}

/* ── About Gallery ── */
.about-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 2.5rem;
}

.gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease, filter 0.4s ease;
    filter: brightness(0.85);
}

.gallery-item:hover img {
    transform: scale(1.05);
    filter: brightness(1);
}

 .gallery-caption {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     padding: .5rem .8rem;
     background: linear-gradient(transparent, rgba(0,0,0,0.75));
     color: #fff;
     font-size: .78rem;
     opacity: 1;
 }

.gallery-item a {
    display: block;
    width: 100%;
    height: 100%;
}

.gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease, filter 0.4s ease;
    filter: brightness(0.85);
}

.gallery-item:hover img {
    transform: scale(1.05);
    filter: brightness(1);
}

.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: .5rem .8rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: #fff;
    font-size: .78rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-caption {
    opacity: 1;
}

.lightbox {
    display: none;
    position: fixed;
    z-index: 1000;
    inset: 0;
    background: rgba(0,0,0,0.92);
    align-items: center;
    justify-content: center;
}

.lightbox.active { display: flex; }

.lightbox-content {
    max-width: 85%;
    max-height: 80%;
    border-radius: 8px;
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
    animation: lightboxFade 0.25s ease;
}

@keyframes lightboxFade {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    font-size: 2.5rem;
    color: #fff;
    cursor: pointer;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.lightbox-close:hover { opacity: 1; }

.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
    padding: 1rem;
    opacity: 0.7;
    transition: opacity 0.2s;
    user-select: none;
}

.lightbox-arrow:hover { opacity: 1; }
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }

.lightbox-caption {
    position: absolute;
    bottom: 2rem;
    left: 0;
    right: 0;
    text-align: center;
    color: #ccc;
    font-size: .9rem;
}

@media (max-width: 600px) {
    .lightbox-arrow { font-size: 1.5rem; padding: .6rem; }
    .lightbox-close { top: 1rem; right: 1rem; font-size: 2rem; }
}

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

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

/* =========================================================
   ABOUT PROFILE PICTURE
   Same image as the hero card — or a different one if you prefer.
   Replace 'profile.jpg' with your actual filename.
   ========================================================= */
.about-avatar {
    width:115px; height:115px; border-radius:50%; margin:0 auto 1.2rem;
    overflow:hidden; border:4px solid rgba(14,165,233,.35);
    box-shadow:0 20px 50px rgba(14,165,233,.5);
    background:linear-gradient(135deg,var(--blue),var(--purple));
    display:flex; align-items:center; justify-content:center;
    font-size:3.2rem; color:#fff;
    animation:float 5s ease-in-out infinite;
}
.about-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }

.about-name     { font-size:1.4rem; font-weight:900; margin-bottom:.25rem; }
.about-location { color:var(--muted); font-size:.88rem; margin-bottom:1.8rem; }

.timeline { display:flex; flex-direction:column; gap:.85rem; text-align:left; margin-top:1.5rem; }
.timeline-item {
    display:flex; gap:1rem; align-items:flex-start; padding:.85rem 1rem;
    border-radius:14px; background:rgba(14,165,233,.07);
    border:1px solid rgba(14,165,233,.12); transition:all .3s ease;
}
.timeline-item:hover { background:rgba(14,165,233,.14); transform:translateX(5px); }
.timeline-dot {
    width:10px; height:10px; border-radius:50%;
    background:var(--cyan); flex-shrink:0; margin-top:5px;
    box-shadow:0 0 8px var(--cyan);
}
.timeline-text strong { display:block; font-size:.88rem; color:var(--white); }
.timeline-text span   { font-size:.78rem; color:var(--muted); }

/* =========================================================
   CONTACT / SOCIALS
   ========================================================= */
.contact-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start;
}
@media (max-width:900px) { .contact-grid { grid-template-columns:1fr; } }

.contact-card {
    background:var(--card); border-radius:26px; padding:2.5rem;
    border:1px solid rgba(14,165,233,.2);
}
.contact-intro { color:var(--muted); margin-bottom:1.8rem; line-height:1.7; }
.email-block {
    display:flex; align-items:center; gap:1rem; padding:1.1rem 1.4rem;
    background:rgba(14,165,233,.1); border-radius:16px;
    border:1px solid rgba(14,165,233,.25); margin-bottom:1.8rem;
    cursor:pointer; transition:all .3s ease;
}
.email-block:hover { background:rgba(14,165,233,.2); transform:translateX(5px); }
.email-icon {
    width:44px; height:44px; border-radius:12px; flex-shrink:0;
    background:linear-gradient(135deg,var(--blue),var(--cyan));
    display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.email-text strong { display:block; font-size:.98rem; color:var(--cyan); }
.email-text span   { font-size:.8rem; color:var(--muted); }

.socials-card {
    background:var(--card); border-radius:26px; padding:2.5rem;
    border:1px solid rgba(129,140,248,.2);
}
.social-buttons { display:flex; flex-direction:column; gap:.9rem; }
.social-btn {
    display:flex; align-items:center; gap:1.1rem; padding:.95rem 1.3rem;
    border-radius:16px; font-weight:700; font-size:.93rem;
    transition:all .3s cubic-bezier(.22,1,.36,1); border:1px solid transparent;
    position:relative; overflow:hidden;
}
.social-btn::after {
    content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
    transition:left .5s;
}
.social-btn:hover::after { left:200%; }
.social-btn:hover { transform:translateX(8px) scale(1.01); }
.s-icon { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:1.05rem; flex-shrink:0; }
.s-name    { flex:1; }
.s-count   { font-size:.78rem; color:var(--muted); font-weight:600; }
/* per-platform colors */
.s-yt      { background:rgba(255,0,0,.1);      border-color:rgba(255,0,0,.2);      color:#ff6b6b; }
.s-yt:hover{ background:rgba(255,0,0,.18); }
.s-yt .s-icon { background:#ff0000; color:#fff; }
.s-tt      { background:rgba(0,242,234,.07);    border-color:rgba(0,242,234,.2);    color:#aaf; }
.s-tt .s-icon { background:linear-gradient(135deg,#010101,#69c9d0); color:#fff; }
.s-ig      { background:rgba(225,48,108,.09);   border-color:rgba(225,48,108,.2);   color:#f79; }
.s-ig .s-icon { background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#bc1888); color:#fff; }
.s-it      { background:rgba(250,53,65,.09);    border-color:rgba(250,53,65,.2);    color:#fa3541; }
.s-it .s-icon { background:#fa3541; color:#fff; }
.s-tw      { background:rgba(145,70,255,.09);   border-color:rgba(145,70,255,.2);   color:#9146ff; }
.s-tw .s-icon { background:#9146ff; color:#fff; }
.s-lt      { background:rgba(67,185,109,.09);   border-color:rgba(67,185,109,.2);   color:#43b96d; }
.s-lt .s-icon { background:#43b96d; color:#fff; }

/* =========================================================
   LEGAL / IMPRESSUM SECTION
   ========================================================= */
.legal-section {
    background:rgba(0,0,0,.3); padding:5rem 0 4rem;
    border-top:1px solid rgba(14,165,233,.15);
    position:relative; z-index:1;
}
.legal-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start;
}
@media (max-width:900px) { .legal-grid { grid-template-columns:1fr; } }

.legal-card {
    background:var(--card); border-radius:24px; padding:2.2rem;
    border:1px solid rgba(14,165,233,.15);
}
.legal-card-red { border-color:rgba(239,68,68,.2); }
.legal-title {
    font-size:1.2rem; font-weight:800; margin-bottom:1.3rem;
    display:flex; align-items:center; gap:.7rem; color:var(--cyan);
}
.legal-title-red { color:#f87171; }
.legal-table { width:100%; border-collapse:collapse; }
.legal-table tr { border-bottom:1px solid rgba(255,255,255,.05); }
.legal-table tr:last-child { border-bottom:none; }
.legal-table td { padding:.6rem .4rem; font-size:.88rem; vertical-align:top; }
.legal-table td:first-child { color:var(--muted); width:38%; font-weight:600; white-space:nowrap; }
.legal-table td:last-child  { color:var(--white); }
.legal-table a { color:var(--cyan); }
.legal-block { margin-bottom:1.4rem; }
.legal-block h4 { font-size:.93rem; font-weight:700; color:var(--white); margin-bottom:.5rem; }
.legal-block p  { font-size:.84rem; color:var(--muted); line-height:1.7; }
.legal-block ul { padding-left:1rem; }
.legal-block ul li { font-size:.84rem; color:var(--muted); margin-bottom:.25rem; line-height:1.5; }
.legal-block ul li::marker { color:var(--blue); }
.legal-note {
    background:rgba(251,191,36,.08); border:1px solid rgba(251,191,36,.2);
    border-radius:12px; padding:1rem 1.2rem;
    font-size:.83rem; color:var(--muted); margin-top:1rem; line-height:1.6;
}
.legal-note strong { color:var(--gold); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
    padding:2.5rem 0 2rem; text-align:center;
    border-top:1px solid rgba(14,165,233,.12);
}
.footer-text { color:var(--muted); font-size:.88rem; }
.footer-text a { color:var(--cyan); }

/* =========================================================
   TOAST
   ========================================================= */
.toast {
    position:fixed; bottom:2rem; right:2rem;
    padding:1rem 1.8rem; border-radius:14px;
    background:var(--card2); border:1px solid var(--blue);
    color:var(--white); font-weight:600; font-size:.93rem;
    z-index:9999; transform:translateY(100px); opacity:0;
    transition:all .4s cubic-bezier(.22,1,.36,1);
    box-shadow:0 20px 50px rgba(0,0,0,.4), var(--glow-blue);
}
.toast.show { transform:translateY(0); opacity:1; }

/* =========================================================
   RESPONSIVE HELPERS
   ========================================================= */
@media (max-width:768px) {
    .nav-links { display:none; }
    .hamburger { display:flex; }
    .linktree-pill { display:none; }
    .games-grid { grid-template-columns:1fr; gap:2rem; }
    .youtube-grid { grid-template-columns:1fr; }
    .hero-meta { gap:2rem; flex-wrap:wrap; }
    .hero-buttons { flex-direction:column; align-items:center; }
    .section { padding:4.5rem 0; }

    /* ── Modal mobile fixes ── */
    .modal-overlay { padding:.5rem; align-items:flex-start; padding-top:1rem; }
    .modal-box { max-height:95vh; border-radius:20px; }
    .modal-top {
        padding:1.2rem 1rem 1rem;
        flex-wrap:wrap;
        gap:.8rem;
    }
    .modal-title-row {
        gap:.8rem;
        flex:1;
        min-width:0;
    }
    .modal-top-title {
        font-size:1.15rem;
        word-break:break-word;
    }
    .modal-icon {
        width:48px; height:48px;
        border-radius:14px;
    }
    .modal-close-btn {
        width:38px; height:38px;
        font-size:1.1rem;
        flex-shrink:0;
    }
    .modal-body { padding:1.2rem; }
    .modal-two-col { grid-template-columns:1fr; gap:1.5rem; }
    .modal-desc { font-size:.9rem; line-height:1.7; }
    .modal-feature { padding:.8rem; gap:.8rem; }
    .modal-feature-icon { width:32px; height:32px; font-size:.9rem; }
    .modal-feature-text strong { font-size:.85rem; }
    .modal-feature-text span { font-size:.78rem; }
    .modal-btn-row { flex-direction:column; }
    .modal-btn-row .btn { width:100%; justify-content:center; }
    .modal-tech { padding:1rem; }
    .modal-tech h4 { font-size:.8rem; }
    .tech-row { font-size:.8rem; }
    .itch-box { padding:.8rem; }
    .itch-box iframe { height:auto; min-height:140px; }
    .modal-right iframe { height:auto; aspect-ratio:16/9; }

    /* ── Hire section mobile fixes ── */
    .hire-main { padding:1.5rem; }
    .hire-title { font-size:1.5rem; }
    .svc-item { font-size:.84rem; padding:.7rem .9rem; }
    .pdf-card { padding:1.5rem; }
    .pdf-feats { grid-template-columns:1fr; }
    .pdf-head { flex-wrap:wrap; }

    /* ── About section mobile fixes ── */
    .about-card { padding:1.5rem; }
    .about-side { padding:1.5rem; }

    /* ── Contact section mobile fixes ── */
    .contact-card { padding:1.5rem; }
    .socials-card { padding:1.5rem; }
    .email-block { padding:.8rem 1rem; }
    .email-text strong { font-size:.85rem; word-break:break-all; }

    /* ── Legal section mobile fixes ── */
    .legal-card { padding:1.5rem; }
    .legal-table td:first-child { white-space:normal; width:35%; }
    .legal-table td { font-size:.82rem; padding:.5rem .3rem; }
    .legal-block p { font-size:.8rem; }
    .legal-block ul li { font-size:.8rem; }

    /* ── Footer mobile fix ── */
    .footer-text { font-size:.78rem; }

    /* ── Container mobile padding ── */
    .container { padding:0 1rem; }
}