@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');
:root { --blue: #00A3E0; --dark: #0a0a0a; --gray: #151515; --text: #999; --light: #eee; }
body, html { margin: 0; padding: 0; font-family: 'Inter', sans-serif; background: var(--dark); color: var(--light); scroll-behavior: smooth; }
header { position: fixed; width: 100%; padding: 20px 5%; display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.95); backdrop-filter: blur(15px); z-index: 1000; box-sizing: border-box; border-bottom: 1px solid #222; }
.logo { font-weight: 900; font-size: 22px; text-transform: uppercase; color: white; text-decoration: none; }
.logo span { color: var(--blue); }
nav a { color: var(--light); text-decoration: none; margin-left: 20px; font-size: 13px; text-transform: uppercase; font-weight: 700; transition: 0.3s; }
nav a:hover, nav a.active { color: var(--blue); }
.page-header { padding: 150px 8% 80px; background: #050505; border-bottom: 1px solid #222; text-align: center; }
.page-header h1 { font-size: 48px; font-weight: 900; color: white; margin-bottom: 20px; text-transform: uppercase; letter-spacing: -1px; }
.page-header p { color: var(--blue); font-size: 16px; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; }
.content-section { padding: 80px 8%; max-width: 1200px; margin: auto; line-height: 1.8; color: #ccc; font-size: 18px; }
.content-section h2 { color: white; font-size: 32px; margin-bottom: 30px; border-left: 4px solid var(--blue); padding-left: 20px;}
.content-section h3 { color: var(--blue); font-size: 22px; margin-top: 40px; margin-bottom: 15px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
.hero { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('foto.jpg'); background-size: cover; background-position: center; }
.hero h1 { font-size: 7vw; font-weight: 900; margin: 0; line-height: 0.85; }
.hero p { color: var(--blue); margin-top: 25px; text-transform: uppercase; letter-spacing: 5px; font-weight: 700; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 25px; padding: 80px 8%; }
.card { background: var(--gray); padding: 40px; border: 1px solid #222; text-decoration: none; color: inherit; transition: 0.3s; display: block; }
.card:hover { border-color: var(--blue); transform: translateY(-5px); }
.card h4 { color: var(--blue); font-size: 11px; margin-bottom: 15px; letter-spacing: 2px; }
.card h3 { font-size: 24px; color: white; margin-bottom: 15px; }
.btn { display: inline-block; background: var(--blue); color: white; padding: 15px 30px; text-decoration: none; font-weight: bold; text-transform: uppercase; margin-top: 20px; transition: 0.3s; border: none; cursor: pointer;}
.btn:hover { background: white; color: var(--blue); }
ul.custom-list { list-style: none; padding: 0; }
ul.custom-list li { padding-left: 20px; position: relative; margin-bottom: 15px; }
ul.custom-list li::before { content: '■'; color: var(--blue); position: absolute; left: 0; top: 0; font-size: 12px; }
footer { padding: 40px 8%; background: #000; border-top: 1px solid #222; text-align: center; font-size: 12px; color: #555; }