/* Modern responsive site CSS (fluid, animated) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
:root{
    --bg:#010107;
    --muted:#8b8b8b;
    --accent:#c32aa3; /* magenta */
    --accent-2:#25d366; /* green */
    --accent-3:#1877f2; /* blue */
    --accent-4:#1da1f2; /* light blue */
    --glass: rgba(255,255,255,0.04);
}
*{box-sizing:border-box}
/* remove default underlines globally (specific components override when needed) */
a{text-decoration:none;color:inherit}
html,body{height:100%}
body{
    margin:0;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    background: radial-gradient(1200px 600px at 10% 10%, rgba(195,42,163,0.06), transparent), var(--bg);
    color:#fff;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.45;
    padding-top: 5px; /* space for sticky header */
}

/* Header / Nav */
header{
      background: rgba(0,0,0,0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position:sticky;
    top:0;
    z-index:40;
    background:transparent;
    padding:4px 6px; 
    margin: 0; /* tighter to move up */
    display:flex;
    align-items:center;
    justify-content:space-between;
    transition:transform .28s ease;
}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.brand img{width:56px;height:56px;border-radius:50%;border:4px solid rgba(255,255,255,0.06);object-fit:cover}
.brand h1{font-size:18px;margin:0;color:var(--muted);font-weight:600}
.language-switch{position:absolute;top:14px;right:14px;z-index:80;width:44px;height:44px;border-radius:8px;background:var(--glass);display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;transition:background .3s ease}
.language-switch:hover{background:rgba(255,255,255,0.06)}   

/* header hidden on scroll (mobile) */
header.hidden{transform:translateY(-110%)}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:56px;height:56px;border-radius:50%;border:4px solid rgba(255,255,255,0.06);object-fit:cover}
.brand h1{font-size:18px;margin:0;color:var(--muted);font-weight:600}

.nav{display:flex;gap:22px;align-items:center}
.nav a{color:#fff;text-decoration:none;font-weight:600;padding:8px 12px;border-radius:10px;transition:all .18s ease}
.nav a:hover{background:rgba(255,255,255,0.03);color:var(--accent)}
.cta{background:linear-gradient(90deg,var(--accent),#9b2a9a);padding:7px 14px;border-radius:12px}

/* Mobile menu */
.burger{display:none;width:40px;height:40px;border-radius:8px;background:var(--glass);align-items:center;justify-content:center;cursor:pointer}
.burger span{display:block;width:18px;height:2px;background:#fff;border-radius:2px;box-shadow:0 6px 0 #fff,0 -6px 0 #fff}

@media (max-width:820px){
    .nav{display:none}
    .burger{display:flex}
    .burger{position:fixed;top:14px;right:14px;z-index:80;width:44px;height:44px;align-items:center;justify-content:center}
}

/* Hero */
.container{max-width:1200px;margin:0 auto;padding:4vh 6vw;position:relative;z-index:2}
.main-spacer{margin-top:8px}
.hero{display:grid;grid-template-columns: 1fr 480px;gap:36px;align-items:center;padding-top:40px}
@media (max-width:980px){.hero{grid-template-columns:1fr;gap:18px}}

.intro{max-width:780px}
.intro h2{font-size:clamp(20px,4vw,34px);margin:0 0 8px;color:#fff}
.intro p.lead{color:var(--muted);margin:8px 0 20px}
.intro .badges{display:flex;gap:10px;flex-wrap:wrap}
.badge{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,0.03);font-weight:600;color:#fff}

.hero-right{position:relative;display:flex;align-items:center;justify-content:center}
.blob{width:360px;height:360px;border-radius:40% 60% 40% 60%;background:linear-gradient(135deg,var(--accent),#7b2fd8);filter:blur(30px);opacity:0.95;transform:rotate(10deg);}
.profile-card{position:absolute;inset:auto auto 28px 28px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border-radius:18px;padding:18px;width:320px;backdrop-filter: blur(8px);box-shadow:0 8px 30px rgba(0,0,0,0.6)}
.profile-card img{width:84px;height:84px;border-radius:50%;border:3px solid rgba(255,255,255,0.06);object-fit:cover}
.profile-card h3{margin:6px 0 0;font-size:18px}
.profile-card p{margin:6px 0 0;color:var(--muted);font-size:13px}

/* profile-card highlight similar to project cards */
.profile-card{transition:transform .35s cubic-bezier(.2,.9,.3,1),box-shadow .35s}
.profile-card:hover{transform:translateY(-10px) scale(1.02);box-shadow:0 20px 50px rgba(0,0,0,0.7)}
.profile-card:focus-within{transform:translateY(-6px);box-shadow:0 14px 40px rgba(0,0,0,0.55)}

/* Projects grid */
.projects{margin-top:44px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:18px;border-radius:12px;transition:transform .35s cubic-bezier(.2,.9,.3,1),box-shadow .35s;cursor:pointer}
.card:hover{transform:translateY(-10px) scale(1.02);box-shadow:0 18px 40px rgba(0,0,0,0.6)}
.card h4{margin:0 0 8px}
.card p{margin:0;color:var(--muted);font-size:14px}

/* Social boxes (contact) */
.social-row{display:flex;flex-direction:column;gap:18px;margin-top:18px;align-items:flex-start}
.social{display:flex;align-items:center;gap:12px;padding:8px;border-radius:14px;background:rgba(255,255,255,0.02);min-width:72px;width:72px;overflow:visible;transition:width .5s cubic-bezier(.22,.9,.3,1),box-shadow .45s ease,background .45s ease,transform .45s ease;text-decoration:none;flex:0 0 auto;height:72px}
.social .icon{width:56px;height:56px;border-radius:12px;display:grid;place-items:center;color:#fff;flex:0 0 56px}
.social .label{opacity:0;white-space:nowrap;margin-left:10px;transition:opacity .45s ease,transform .45s ease}
.social:hover{width:240px;box-shadow:0 22px 60px rgba(0,0,0,0.6);transform:translateX(4px)}
.social:hover .label{opacity:1;transform:translateX(0)}
.social.instagram .icon{background:linear-gradient(135deg,var(--accent),#b53a98)}
.social.whatsapp .icon{background:linear-gradient(135deg,var(--accent-2),#15b055)}
.social.mail .icon{background:linear-gradient(135deg,#6b8cff,#3aa2ff)}
.social.github .icon{background:linear-gradient(135deg,#333,#666)}

/* Footer */
footer{padding:28px 6vw;background:transparent;color:var(--muted);text-align:center;margin-top:48px}

/* tiny utility */
.muted{color:var(--muted)}

/* removed cursor dot and mouse-follow blob (kept decorative blobs in layout) */
.cursor{display:none !important}
.blob-follow{display:none !important}

/* Off-canvas menu (mobile) */
.offcanvas-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:70;opacity:0;pointer-events:none;transition:opacity .32s ease}
.offcanvas-backdrop.visible{opacity:1;pointer-events:auto}

@media (max-width:820px){
    .nav.offcanvas-nav{display:flex;flex-direction:column;gap:18px;padding:28px;width:320px;height:100%;position:fixed;top:0;right:-360px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);backdrop-filter: blur(6px);box-shadow:-24px 0 60px rgba(0,0,0,0.6);z-index:95;transition:right .36s cubic-bezier(.22,.9,.3,1)}
    .nav.offcanvas-nav.open{right:0}
    .nav.offcanvas-nav a{padding:18px 6px;border-radius:8px;display:block;pointer-events:auto;width:100%;text-align:center;font-size:20px}
}

/* small responsive tweaks */
.center{display:flex;flex-direction:column;align-items:center;gap:8px}

/* ensure hero/contact image doesn't get cut off */
.intro.center img{width:140px;height:140px;object-fit:cover;border-radius:18px}