:root{
    --bg:#0f1115;
    --card:#0f1720;
    --muted:#9aa4b2;
    --accent:#60a5fa;
    --glass-border: rgba(255,255,255,0.06);
    --glass-highlight: rgba(255,255,255,0.08);
    --glass-blur: 8px;
    --glass: rgba(255,255,255,0.04);
    --radius:12px;
    --max-width:1100px;
    --gap:20px;
    font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color-scheme: dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    background:linear-gradient(180deg,#071021 0%,#0d1220 100%);
    color:#e6eef8;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.45;
    padding-bottom:80px;
}

/* layout container */
.main-container{
    max-width:var(--max-width);
    margin: 60px auto;
    padding:30px;
}

/* NAV */
nav{position:fixed;top:12px;left:0;right:0;z-index:60}
.nav-container{
    max-width:var(--max-width);
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:var(--gap);
    padding:6px 18px;
    /* stronger frosted glass */
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.012));
    border-radius:16px;
    backdrop-filter: blur(calc(var(--glass-blur) + 2px)) saturate(140%);
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 2px)) saturate(140%);
    box-shadow: 0 10px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    position:relative;overflow:hidden;
}
.nav-container::before{
    /* subtle moving sheen across the nav */
    content:'';position:absolute;left:-40%;top:-10%;width:40%;height:120%;
    background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.08) 45%, rgba(255,255,255,0.02) 55%, transparent 100%);
    transform:skewX(-18deg) translateX(0);
    opacity:0.55;
    transition:transform 6s linear, opacity 420ms ease;
    pointer-events:none;
}
@keyframes nav-sheen{from{transform:translateX(-120%)}to{transform:translateX(220%)}}
@media (prefers-reduced-motion: no-preference){
    .nav-container::before{animation:nav-sheen 8s linear infinite}
}
.logo{
    position:relative;
    font-weight:700;
    letter-spacing:2px;
    color:var(--accent);
    transition: color 220ms ease, transform 220ms ease;
}

.logo::before{
    /* subtle inner highlight */
    content:'';position:absolute;left:0;right:0;top:4px;height:40%;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);pointer-events:none;border-radius:10px;opacity:0.6;mix-blend-mode:overlay
}

.logo::after{
    /* animated underline */
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg,var(--accent),#3b82f6);
    border-radius:2px;
    transition: width 260ms ease;
}

.logo:hover,
.logo:focus-within{
    color:#ffffff;
    transform: translateY(-2px);
}

.logo:hover::after,
.logo:focus-within::after{
    width: 70%;
}

/* Brand button inside logo to make it keyboard-focusable but visually plain */
.brand-btn{
    background:transparent;border:0;padding:0;margin:0;color:inherit;font-weight:700;font-size:1rem;cursor:pointer;position:relative;overflow:hidden;
}

.brand-btn:focus{outline:2px solid rgba(96,165,250,0.22);outline-offset:4px;border-radius:6px}
.links{display:flex;gap:14px}
.links a{color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:8px}
.links a{color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:8px;position:relative;overflow:hidden}
.links a::after{
    content:'';position:absolute;left:-60%;top:-20%;width:60%;height:140%;background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);transform:skewX(-18deg) translateX(0);opacity:0.6;pointer-events:none;transition:transform 420ms ease,opacity 250ms ease
}
.links a:hover{color:#fff;background:var(--glass)}
.links a:hover::after{transform:translateX(220%)}

/* mobile hamburger */
.hamburg{
    display:none;
    background:transparent;border:0;color:var(--muted);
    font-size:20px;padding:8px;border-radius:8px;position:relative;overflow:hidden;
}
.hamburg::after{content:'';position:absolute;left:-60%;top:-30%;width:60%;height:160%;background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);transform:skewX(-18deg) translateX(0);opacity:0.6;pointer-events:none;transition:transform 420ms ease}
.hamburg:hover::after{transform:translateX(220%)}
.dropdown{
    display:none;
    position:fixed;
    right:14px;
    top:70px;
    width:240px;
    background:linear-gradient(180deg,#08101a,#071018);
    border-radius:12px;
    padding:12px;
    box-shadow:0 10px 30px rgba(0,0,0,0.6);
}
.dropdown.open{display:flex;flex-direction:column;gap:8px}
.dropdown a{color:var(--muted);text-decoration:none;padding:10px;border-radius:8px}
.dropdown a:hover{background:var(--glass);color:#fff}
.cancel{background:transparent;border:0;color:var(--muted);align-self:flex-end;position:relative;overflow:hidden}

/* hero / home */
#home .main-container{display:flex;gap:32px;align-items:center}
.image img{width:320px;max-width:40vw;border-radius:16px;display:block;box-shadow:0 12px 40px rgba(2,8,23,0.7)}
.content{flex:1;min-width:240px}
.content h1{margin:0;font-size:34px;letter-spacing:0.6px}
.content h2{margin:12px 0;color:var(--muted);font-weight:500}
.content p{color:var(--muted);max-width:70%}

/* buttons / social */
.btn{
    display:inline-block;
    background:linear-gradient(90deg,var(--accent),#3b82f6);
    color:#fff;
    padding:10px 14px;
    border-radius:10px;
    text-decoration:none;
    border:0;
    box-shadow:0 6px 18px rgba(96,165,250,0.12);
    cursor:pointer;
    margin-right:8px;
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.04);
    backdrop-filter: blur(6px) saturate(120%);
}
/* neon-corner looping: adds animated corner glows on buttons */
@keyframes neon-loop{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1)}100%{transform:rotate(360deg) scale(1)}}

/* Ensure all interactive button-like controls have relative/overflow for pseudo elements */
.btn, .play-button, .brand-btn, .hamburg, .cancel, .skill-pill, .btn-small, .btn-telegram, .btn-whatsapp, .btn-email{
    position:relative;
    overflow:hidden;
}

/* rotating pseudo-element: circular neon motion using a conic-gradient */
.btn::before, .play-button::before, .brand-btn::before, .hamburg::before, .cancel::before, .skill-pill::before, .btn-small::before, .btn-telegram::before, .btn-whatsapp::before, .btn-email::before{
    content:'';
    position:absolute;
    left:-40%;top:-40%;width:180%;height:180%;
    pointer-events:none;
    mix-blend-mode:screen;
    opacity:0.6;
    background-repeat:no-repeat;
    /* single conic gradient that rotates to create circular neon motion */
    background: conic-gradient(from 0deg,
        rgba(96,165,250,0.85) 0deg 80deg,
        rgba(124,58,237,0.65) 80deg 160deg,
        rgba(16,160,72,0.65) 160deg 240deg,
        rgba(255,255,255,0.06) 240deg 320deg,
        rgba(96,165,250,0.65) 320deg 360deg);
    border-radius:50%;
    transform-origin:center center;
    transform:rotate(0deg);
    transition:opacity 200ms ease;
    animation: neon-rotate 4s linear infinite;
    filter: blur(8px);
}

@keyframes neon-rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* color-tint overrides so certain buttons emphasize their brand hue */
.btn-telegram::before{background: conic-gradient(from 0deg, rgba(0,136,204,0.85) 0deg 120deg, rgba(42,157,244,0.6) 120deg 240deg, rgba(255,255,255,0.04) 240deg 360deg)}
.btn-whatsapp::before{background: conic-gradient(from 0deg, rgba(22,163,74,0.85) 0deg 120deg, rgba(34,197,94,0.6) 120deg 240deg, rgba(255,255,255,0.04) 240deg 360deg)}
.btn-email::before{background: conic-gradient(from 0deg, rgba(124,58,237,0.85) 0deg 120deg, rgba(167,139,250,0.6) 120deg 240deg, rgba(255,255,255,0.04) 240deg 360deg)}

/* Slightly reduce opacity on disabled/muted buttons */
.btn.muted::before, .btn-email[disabled]::before, .btn-telegram[aria-disabled='true']::before, .btn-whatsapp[aria-disabled='true']::before{opacity:0.18}

/* make the neon more visible on hover for polish */
.btn:hover::before, .play-button:hover::before, .skill-pill:hover::before, .brand-btn:hover::before{opacity:0.95}

@media (prefers-reduced-motion: reduce){
    .btn::before, .play-button::before, .brand-btn::before, .hamburg::before, .cancel::before, .skill-pill::before, .btn-small::before, .btn-telegram::before, .btn-whatsapp::before, .btn-email::before{
        animation:none;opacity:0.35;transition:none;filter:none;background:none
    }
}
.btn::after{
    content:'';
    position:absolute;left:-60%;top:-30%;width:60%;height:160%;
    background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.12) 50%, transparent 100%);
    transform:skewX(-20deg) translateX(0);
    opacity:0.6;
    pointer-events:none;
    transition:transform 550ms ease, opacity 350ms ease;
}
.btn:hover::after{transform:translateX(220%)}

/* sheen for brand, hamburger, cancel and play controls */
.brand-btn::after,.play-button::after,.hamburg::after,.cancel::after{
    content:'';
    position:absolute;left:-60%;top:-30%;width:60%;height:160%;
    background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.12) 50%, transparent 100%);
    transform:skewX(-20deg) translateX(0);
    opacity:0.6;
    pointer-events:none;
    transition:transform 550ms ease, opacity 350ms ease;
}
.brand-btn:hover::after,.play-button:hover::after,.hamburg:hover::after,.cancel:hover::after{transform:translateX(220%)}

@media (prefers-reduced-motion: reduce){
    .nav-container::before{animation:none;transition:none;opacity:0}
    .btn::after, .brand-btn::after, .play-button::after, .hamburg::after, .cancel::after{transition:none;opacity:0}
}
.btn.outline{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}
.btn.muted{opacity:.6;pointer-events:none}
.social-links a{margin-right:10px;color:var(--muted);text-decoration:none;font-size:18px}
.social-links a:hover{color:#fff}

/* music controls & equalizer */
.music-buttons{margin-top:18px;display:flex;gap:8px;flex-wrap:wrap}
.play-button{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.03);padding:8px 12px;border-radius:10px;color:var(--muted);cursor:pointer;position:relative;overflow:hidden}
.play-button.playing{background:linear-gradient(90deg,#064e3b,#065f46);color:#fff}
.music-equalizer{display:flex;gap:6px;margin-top:14px;height:36px;align-items:end;width:120px}
.music-equalizer .bar{
    width:12px;background:linear-gradient(180deg,#4ade80,#16a34a);border-radius:4px;height:6px;opacity:0.18;transform-origin:bottom center;
}
.music-equalizer.playing .bar{opacity:1;animation:equal 600ms infinite ease-in-out}
.music-equalizer.playing .bar1{animation-delay:0ms}
.music-equalizer.playing .bar2{animation-delay:80ms}
.music-equalizer.playing .bar3{animation-delay:160ms}
.music-equalizer.playing .bar4{animation-delay:240ms}
.music-equalizer.playing .bar5{animation-delay:320ms}
@keyframes equal{
    0%{transform:scaleY(0.2)}
    50%{transform:scaleY(1)}
    100%{transform:scaleY(0.25)}
}

/* projects, skills and forms (concise) */
section{padding:36px 0}
h1{font-size:24px;margin-bottom:8px}
.section-subtitle{color:var(--muted);margin-bottom:18px}
.skill-group{background:var(--card);padding:12px;border-radius:12px;margin-bottom:12px}
.progress{height:10px;background:rgba(255,255,255,0.04);border-radius:999px;overflow:hidden}
.progress-value{height:100%;background:linear-gradient(90deg,#06b6d4,#06b6d4);border-radius:999px}

/* About section: when image removed, make text full width and centered */
.about-text.fullwidth{max-width:900px;margin:0 auto;text-align:center;padding:10px}
.about-text.fullwidth .about-actions{display:flex;gap:10px;justify-content:center;margin-top:14px}

/* About highlights list */
.about-highlights{
    list-style:none;
    display:block;
    margin:18px auto 0;
    padding:0;
    max-width:720px;
    text-align:left;
}

/* Skill pills (compact) */
.skill-pills{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.skill-pill{
    /* liquid-glass base */
    background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    color: #fff;
    border: 1px solid rgba(255,255,255,0.06);
    padding: 8px 12px;
    border-radius: 999px;
    cursor:default;
    font-weight:600;
    position:relative;
    overflow:hidden;
    backdrop-filter: blur(6px) saturate(120%);
    box-shadow: 0 6px 18px rgba(2,6,23,0.6);
    transition: transform 220ms ease, box-shadow 220ms ease;
}
.skill-pill:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(2,6,23,0.7)}
.skill-pill:focus{outline:3px solid rgba(99,102,241,0.18);outline-offset:3px}
.skill-pill[type="button"]{cursor:default}

/* sheen pseudo-element for skill pills */
.skill-pill::after{
    content:'';
    position:absolute;left:-60%;top:-20%;width:60%;height:140%;
    background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.12) 50%, transparent 100%);
    transform:skewX(-20deg) translateX(0);
    opacity:0.6;
    pointer-events:none;
    transition:transform 550ms ease, opacity 350ms ease;
}
.skill-pill:hover::after{transform:translateX(220%)}

@media (prefers-reduced-motion: reduce){
    .skill-pill::after{transition:none;opacity:0}
}

.about-highlights li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-bottom:10px;
    color:var(--muted);
    font-weight:500;
}
.about-highlights li i{
    color:var(--accent);
    min-width:20px;
    margin-top:4px;
}

@media (max-width:880px){
    .about-highlights{padding:0 12px}
    .about-text.fullwidth{padding:8px}
}

/* projects grid */
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.project-card{background:linear-gradient(180deg,#081016,#061018);padding:12px;border-radius:12px}
.project-thumb{width:100%;height:140px;object-fit:cover;border-radius:8px;margin-bottom:8px}

/* contact form */
.contact-form{max-width:640px;background:var(--card);padding:16px;border-radius:12px}
.contact-quick{margin:12px 0;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-start}
.contact-quick .btn{display:inline-flex;align-items:center;gap:8px}
.btn-telegram{background:linear-gradient(90deg,#0088cc,#2a9df4);box-shadow:0 6px 18px rgba(10,110,200,0.12)}
.btn-telegram:hover{transform:translateY(-2px)}
.btn-telegram:focus{outline:3px solid rgba(10,110,200,0.18);outline-offset:3px}
.btn-whatsapp{background:linear-gradient(90deg,#16a34a,#22c55e);box-shadow:0 6px 18px rgba(16,160,72,0.12)}
.btn-whatsapp:hover{transform:translateY(-2px)}
.btn-whatsapp:focus{outline:3px solid rgba(16,160,72,0.16);outline-offset:3px}
.btn-email{background:linear-gradient(90deg,#7c3aed,#a78bfa);box-shadow:0 6px 18px rgba(124,58,237,0.12)}
.btn-email:hover{transform:translateY(-2px)}
.btn-email:focus{outline:3px solid rgba(124,58,237,0.14);outline-offset:3px}
.btn-email[disabled],.btn-telegram[aria-disabled='true'],.btn-whatsapp[aria-disabled='true']{opacity:.6;pointer-events:none}
.form-group{margin-bottom:10px}
label{display:block;color:var(--muted);font-size:13px;margin-bottom:6px}
input,textarea{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:#fff}
button[type=submit]{margin-top:6px}

/* footer & back to top */
footer{position:relative;margin-top:40px}
.footer-container{max-width:var(--max-width);margin:30px auto;padding:18px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
/* Footer layout improvements */
.footer-left{display:flex;flex-direction:column;gap:6px}
.footer-left p{margin:0;color:var(--muted);font-size:14px}
.footer-contact a{color:var(--accent);text-decoration:none}
.footer-contact a:hover{text-decoration:underline}
.btn-small{padding:6px 8px;border-radius:8px;font-size:13px;margin-left:8px}
.footer-credit{color:var(--muted);font-size:13px;margin-top:6px}
.footer-links a{color:var(--muted);text-decoration:none;margin-left:10px}
.footer-links a:hover{color:#fff}
/* Back to top button: hidden by default, shown with .show */
#backToTop{
    position:fixed;
    right:18px;
    bottom:18px;
    background:var(--accent);
    border:0;
    padding:12px;
    border-radius:999px;
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:opacity 220ms ease, transform 220ms ease, visibility 220ms;
    cursor:pointer;
    box-shadow:0 8px 30px rgba(3,7,18,0.6);
}

#backToTop.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* Nav scrolled state */
.scrolled{
    box-shadow: 0 8px 30px rgba(2,6,23,0.6);
    transform: translateY(-2px);
}

/* Accessibility helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

a:focus,button:focus{outline:2px solid rgba(96,165,250,0.22);outline-offset:3px}

/* responsive */
@media (max-width:880px){
    .links{display:none}
    .hamburg{display:inline-block}
    #home .main-container{flex-direction:column;align-items:center;text-align:center}
    .image img{max-width:70vw}
    .content p{max-width:100%}
    .dropdown{right:12px;left:12px}
    .contact-form{padding:12px}
    .contact-quick{justify-content:center}
    .contact-quick .btn{flex:1 1 120px;justify-content:center}
    .skill-pills{justify-content:center}
    .footer-container{flex-direction:column;gap:10px;align-items:center}
    .footer-links a{margin-left:6px}
}