/* --- VARIABILI GLOBALI --- */
:root {
    --bg-color: #1a1a1a;
    --text-main: #f0f0f0;
    --text-muted: #888888;
    --accent-color: #d94a38;
    --font-sans: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* --- HERO (Tornata grande e normale) --- */
.hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    padding: 0 4rem;
    overflow: hidden;
}

/* Predisposizione Sfondo Scurito */
.hero-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #222; /* Diventerà la tua immagine in futuro */
    z-index: 1;
    opacity: 0.5; /* Per far leggere il testo quando metterai l'immagine */
}

.hero-content {
    position: relative;
    z-index: 2; /* Sta sopra lo sfondo */
}

.subtitle { font-family: var(--font-mono); color: var(--text-muted); margin-bottom: 1rem; font-size: 1rem; letter-spacing: 2px; }
.title { font-size: clamp(4rem, 8vw, 6rem); line-height: 1.1; font-weight: 400; margin-bottom: 1.5rem; }
.role { font-size: 1.5rem; font-weight: 300; color: var(--accent-color); margin-bottom: 1rem; }
.description { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 3rem; }
.contact-info p { font-size: 0.9rem; font-family: var(--font-mono); color: var(--text-muted); }

/* --- SEZIONI --- */
.section { padding: 4rem 4rem 0 4rem; display: flex; flex-direction: column; }
.section-content { margin-bottom: 8rem; }

/* I titoli rimangono fissati in alto dolcemente finché scorri la loro sezione */
.sticky-title {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: var(--bg-color);
    padding: 1.5rem 0 1rem 0;
    margin-bottom: 2rem;
    border-bottom: 1px solid #333;
}

.section-title { font-size: 1.5rem; font-family: var(--font-mono); color: var(--text-main); letter-spacing: 2px; }
.section-intro { font-size: 1.8rem; max-width: 800px; margin-bottom: 1.5rem; line-height: 1.4; }
.section-text { color: var(--text-muted); max-width: 800px; font-size: 1.1rem; }

/* --- GRIGLIE E COMPONENTI --- */
.process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 3rem; margin-top: 4rem; }
.process-step { border-left: 2px solid var(--text-muted); padding-left: 1.5rem; }
.step-num { color: var(--accent-color); font-family: var(--font-mono); font-size: 1.2rem; display: block; margin-bottom: 0.5rem; }
.process-step h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.process-step p { color: var(--text-muted); font-size: 0.95rem; }

.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-top: 3rem; }
.info-card { background-color: #222; padding: 2rem; border-radius: 4px; }
.info-card h3 { color: var(--accent-color); font-family: var(--font-mono); margin-bottom: 0.5rem; font-size: 1rem; }

.role-list { list-style: none; margin-top: 2rem; max-width: 800px; }
.role-list li { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #333; color: var(--text-muted); }
.role-list li strong { color: var(--text-main); display: block; font-family: var(--font-mono); margin-bottom: 0.2rem; }

.project-placeholder { width: 100%; height: 400px; background-color: #222; margin-top: 3rem; display: flex; align-items: center; justify-content: center; color: #555; font-family: var(--font-mono); border: 1px dashed #444; }

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .hero { padding: 0 2rem; }
    .section { padding: 2rem 2rem 0 2rem; }
    .section-intro { font-size: 1.4rem; }
}