/* Reset & Basis */
* {margin:0; padding:0; box-sizing:border-box; font-family:'Arial',sans-serif;}
body {background:#f0f2f5; color:#222; line-height:1.6; scroll-behavior:smooth;}

/* Header */
header {
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 2rem; background:linear-gradient(90deg,#0057a7,#00aaff);
  color:#fff; position:sticky; top:0; z-index:1000; box-shadow:0 5px 15px rgba(0,0,0,0.2);
}
header .logo {display:flex; align-items:center;}
header .logo img {height:50px; margin-right:1rem;}
header nav ul {list-style:none; display:flex; gap:2rem;}
header nav a {color:#fff; text-decoration:none; font-weight:bold; transition:0.3s;}
header nav a:hover {color:#ffdd00; transform:scale(1.1);}

/* Hero */
.hero {display:flex; justify-content:center; align-items:center; text-align:center;
       padding:6rem 2rem; background:linear-gradient(135deg,#0071c5,#00aaff);
       border-radius:20px; margin:2rem auto; max-width:1200px; box-shadow:0 15px 30px rgba(0,0,0,0.2);}
.hero-content {max-width:800px;}
.hero h2 {font-size:3rem; margin-bottom:1rem; animation:slideInDown 1s ease-out;}
.hero p {font-size:1.2rem; margin-bottom:2rem; animation:slideInUp 1s ease-out;}
.hero .btn {padding:0.8rem 2rem; background:#ffdd00; color:#0057a7; font-weight:bold;
            border-radius:50px; text-decoration:none; transition:0.3s; box-shadow:0 5px 15px rgba(0,0,0,0.2);}
.hero .btn:hover {background:#ffd500; transform:scale(1.1) translateY(-3px);}

/* Sections */
section {padding:4rem 2rem; max-width:1100px; margin:0 auto;}
section h2 {text-align:center; font-size:2.5rem; margin-bottom:2rem; color:#0057a7; position:relative;}
section h2::after {content:""; width:80px; height:4px; background:#ffdd00; display:block; margin:0.5rem auto 0; border-radius:2px;}

/* Skills & Tools Grid */
.skills-grid, .tools-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:2rem;}
.skill, .tool {background:#fff; padding:2rem 1rem; border-radius:20px; text-align:center;
               box-shadow:0 10px 25px rgba(0,0,0,0.1); transition:0.4s;}
.skill img, .tool img {width:70px; height:70px; margin-bottom:1rem; transition:transform 0.4s;}
.skill:hover img, .tool:hover img {transform:rotate(20deg) scale(1.2);}
.skill:hover, .tool:hover {transform:translateY(-10px); box-shadow:0 15px 30px rgba(0,0,0,0.25);
                            background:linear-gradient(145deg,#e0f7ff,#ffffff);}

/* Kontakt */
#contact a {color:#0057a7; font-weight:bold; text-decoration:none; transition:0.3s;}
#contact a:hover {color:#ffdd00; text-decoration:underline;}

/* Footer */
footer {text-align:center; padding:2rem; background:#222; color:#fff; margin-top:3rem;}

/* Animations */
@keyframes fadeIn {from{opacity:0;}to{opacity:1;}}
@keyframes slideInDown {from{transform:translateY(-50px);opacity:0;}to{transform:translateY(0);opacity:1;}}
@keyframes slideInUp {from{transform:translateY(50px);opacity:0;}to{transform:translateY(0);opacity:1;}}

/* Scroll Animation */
.hidden {opacity:0; transform:translateY(50px); transition:all 1s ease-out;}
.animate {opacity:1; transform:translateY(0);}