/* ═══════════════════════════════════════════════════════════════════
   MASTERMIND — Percorso di Eccellenza
   Design System
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --navy: #253564;
    --navy-deep: #1a2747;
    --navy-light: #2e4280;
    --gold: #3BB8B9;
    --gold-dark: #2d9a9b;
    --gold-light: #e8f8f8;
    --teal: #3BB8B9;
    --white: #ffffff;
    --light-bg: #f8f9fa;
    --warm-bg: #e8f8f8;
    --text-dark: #253564;
    --text-body: #4a5568;
    --text-gray: #5a6478;
    --text-light: #8a96a8;
    --border: #e2e6ef;
    --border-light: #f0f2f7;
    --green: #27AE60;
    --orange: #E67E22;
    --red: #E74C3C;
    --shadow-sm: 0 2px 12px rgba(37,53,100,.06);
    --shadow-md: 0 8px 32px rgba(37,53,100,.10);
    --shadow-lg: 0 20px 60px rgba(37,53,100,.15);
    --shadow-gold: 0 8px 24px rgba(59,184,185,.30);
    --radius: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --transition: all .35s cubic-bezier(.4,0,.2,1);
    --transition-fast: all .2s ease;
    --font-serif: 'Cormorant Garamond', Georgia, serif;
    --font-sans: 'Montserrat', -apple-system, sans-serif;
    --font-body: 'Lato', -apple-system, sans-serif;
}

/* ── Reset ─────────────────────────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:var(--font-body); color:var(--text-body); line-height:1.7; background:var(--white); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,h5 { font-family:var(--font-serif); color:var(--navy); line-height:1.25; font-weight:600; }
h1 { font-size:clamp(2.2rem,5vw,3.6rem); }
h2 { font-size:clamp(1.8rem,3.5vw,2.6rem); }
h3 { font-size:clamp(1.3rem,2.5vw,1.7rem); }
h4 { font-size:1.2rem; font-family:var(--font-sans); font-weight:600; }
p { margin-bottom:1rem; }
a { color:var(--gold-dark); text-decoration:none; transition:var(--transition-fast); }
a:hover { color:var(--gold); }
img { max-width:100%; height:auto; }
ul { padding-left:1.25rem; }
ul li { margin-bottom:.35rem; }

/* ── Layout ────────────────────────────────────────────────────── */
.container { max-width:1180px; margin:0 auto; padding:0 2rem; }
.container--narrow { max-width:860px; margin:0 auto; padding:0 2rem; }
.grid--2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.grid--3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.grid--4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }

/* ── Utility ───────────────────────────────────────────────────── */
.text-gold { color:var(--gold); }
.text-teal { color:var(--gold); }
.fade-up { opacity:1; transform:none; }

/* ── Eyebrow ───────────────────────────────────────────────────── */
.eyebrow {
    font-family:var(--font-sans); font-size:.72rem; font-weight:700;
    letter-spacing:.25em; text-transform:uppercase; color:var(--gold);
    display:flex; align-items:center; gap:.6rem; margin-bottom:1rem;
}
.eyebrow::before { content:''; display:inline-block; width:32px; height:2px; background:var(--gold); }
.eyebrow--center { justify-content:center; }
.eyebrow--white { color:rgba(255,255,255,.9); }
.eyebrow--white::before { background:rgba(255,255,255,.5); }

/* ── Section Header ────────────────────────────────────────────── */
.section-header { text-align:center; margin-bottom:3.5rem; }
.section-header .eyebrow { justify-content:center; }
.section-header h2 { margin-bottom:1rem; }
.section-header .divider { width:50px; height:3px; background:var(--gold); margin:1.2rem auto; border-radius:2px; }
.section-header p { max-width:620px; margin:0 auto; color:var(--text-gray); font-size:1.05rem; }

/* ── Buttons ───────────────────────────────────────────────────── */
.btn {
    display:inline-flex; align-items:center; gap:.6rem; padding:.85rem 2rem;
    border-radius:4px; font-family:var(--font-sans); font-size:.85rem; font-weight:600;
    letter-spacing:.04em; text-transform:uppercase; cursor:pointer;
    border:2px solid transparent; transition:var(--transition); text-decoration:none;
}
.btn--primary { background:var(--gold); color:var(--white); border-color:var(--gold); }
.btn--primary:hover { background:var(--gold-dark); border-color:var(--gold-dark); transform:translateY(-2px); box-shadow:var(--shadow-gold); color:var(--white); }
.btn--outline { background:transparent; color:var(--gold); border-color:var(--gold); }
.btn--outline:hover { background:var(--gold); color:var(--white); transform:translateY(-2px); }
.btn--outline-white { background:transparent; color:var(--white); border-color:rgba(255,255,255,.4); }
.btn--outline-white:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.7); color:var(--white); }
.btn--ghost { background:transparent; color:rgba(255,255,255,.8); border-color:transparent; }
.btn--ghost:hover { color:var(--gold); }
.btn--lg { padding:1.1rem 2.8rem; font-size:.92rem; }
.btn--sm { padding:.5rem 1.2rem; font-size:.75rem; }
.btn--block { width:100%; justify-content:center; }
.btn .arrow { transition:transform .3s ease; }
.btn:hover .arrow { transform:translateX(4px); }

/* ── Navbar ────────────────────────────────────────────────────── */
.navbar {
    position:fixed; top:0; left:0; right:0; z-index:1000;
    background:transparent; transition:var(--transition);
}
.navbar--scrolled {
    background:var(--white); box-shadow:var(--shadow-sm);
}
.navbar > .container {
    display:flex; align-items:center; justify-content:space-between; height:70px;
}
.navbar__logo {
    display:flex; align-items:center; gap:.75rem; text-decoration:none;
    color:var(--white); font-family:var(--font-serif); font-size:1.25rem; font-weight:600;
}
.navbar--scrolled .navbar__logo { color:var(--navy); }
.navbar__logo-icon { font-size:1.1rem; color:var(--gold); }
.navbar__links {
    display:flex; align-items:center; gap:.25rem;
}
.navbar__links a {
    padding:.5rem 1rem; font-family:var(--font-sans); font-size:.78rem; font-weight:600;
    letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.8);
    border-radius:var(--radius); transition:var(--transition-fast); text-decoration:none;
}
.navbar__links a:hover { color:var(--gold); background:rgba(59,184,185,.1); }
.navbar--scrolled .navbar__links a { color:var(--text-gray); }
.navbar--scrolled .navbar__links a:hover { color:var(--gold); background:var(--gold-light); }
.navbar__actions { display:flex; align-items:center; gap:.75rem; }
.navbar--scrolled .btn--ghost { color:var(--text-gray); }
.navbar__hamburger {
    display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; background:none; border:none;
}
.navbar__hamburger span {
    display:block; width:24px; height:2px; background:var(--white); transition:var(--transition-fast); border-radius:1px;
}
.navbar--scrolled .navbar__hamburger span { background:var(--navy); }

/* ── Hero ──────────────────────────────────────────────────────── */
.hero {
    min-height:92vh; display:flex; align-items:center; position:relative; overflow:hidden;
    background:linear-gradient(135deg, rgba(37,53,100,.97) 0%, rgba(37,53,100,.88) 40%, rgba(59,184,185,.20) 100%);
    padding-top:70px;
}
.hero::before {
    content:''; position:absolute; width:600px; height:600px; border-radius:50%;
    background:rgba(59,184,185,.08); top:-200px; right:-200px;
}
.hero::after {
    content:''; position:absolute; width:400px; height:400px; border-radius:50%;
    background:rgba(59,184,185,.05); bottom:-100px; left:-100px;
}
.hero__content { position:relative; z-index:2; max-width:720px; padding:4rem 0; }
.hero__claim {
    font-family:var(--font-serif); font-size:clamp(1rem,2vw,1.2rem);
    color:rgba(255,255,255,.7); font-style:italic; margin-bottom:1.5rem;
    background:rgba(255,255,255,.07); padding:.75rem 1.5rem; border-radius:var(--radius);
    display:inline-block;
}
.hero h1 { color:var(--white); margin-bottom:.75rem; font-weight:700; }
.hero h1 span { color:var(--gold); }
.hero__subtitle {
    font-family:var(--font-serif); font-size:clamp(1.2rem,2.5vw,1.6rem);
    color:rgba(255,255,255,.85); font-weight:300; margin-bottom:2rem; line-height:1.5;
}
.hero__description {
    color:rgba(255,255,255,.7); font-size:1.05rem; line-height:1.8;
    margin-bottom:2.5rem; max-width:560px;
}
.hero__actions { display:flex; gap:1rem; flex-wrap:wrap; }
.hero__scroll {
    position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:.5rem;
    color:rgba(255,255,255,.5); font-size:.7rem; font-family:var(--font-sans);
    letter-spacing:.15em; text-transform:uppercase; z-index:2;
}
.hero__scroll-line {
    width:1px; height:40px;
    background:linear-gradient(to bottom, rgba(59,184,185,.6), transparent);
    animation:scrollPulse 2s ease infinite;
}
@keyframes scrollPulse { 0%,100% { opacity:.4; } 50% { opacity:1; } }

/* ── Stats Band ────────────────────────────────────────────────── */
.stats-band { background:var(--navy); padding:2rem 0; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; text-align:center; }
.stat-item__number {
    font-family:var(--font-serif); font-size:2.4rem; font-weight:700; color:var(--gold);
}
.stat-item__label {
    font-family:var(--font-sans); font-size:.72rem; font-weight:600;
    letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-top:.25rem;
}

/* ── Section ───────────────────────────────────────────────────── */
.section { padding:90px 0; }
.section--light { background:var(--light-bg); }

/* ── Cards ─────────────────────────────────────────────────────── */
.card {
    background:var(--white); border-radius:var(--radius-lg);
    border:1px solid var(--border); transition:var(--transition); box-shadow:var(--shadow-sm);
}
.card:hover { box-shadow:var(--shadow-md); }

/* ── Area Cards ────────────────────────────────────────────────── */
.areas-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:1.5rem; }
.area-card {
    background:var(--white); border-radius:var(--radius-lg); padding:2rem;
    border:1px solid var(--border); transition:var(--transition); display:block; text-decoration:none; color:inherit;
}
.area-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); color:inherit; }
.area-card__icon {
    width:56px; height:56px; border-radius:12px; display:flex;
    align-items:center; justify-content:center; margin-bottom:1.25rem; font-size:1.4rem;
}
.area-card h4 { margin-bottom:.5rem; }
.area-card p { font-size:.92rem; color:var(--text-gray); margin-bottom:1rem; }
.area-card__symptoms { list-style:none; padding:0; }
.area-card__symptoms li {
    font-size:.85rem; color:var(--text-gray); padding:.35rem 0 .35rem 1.2rem; position:relative;
}
.area-card__symptoms li::before {
    content:''; position:absolute; left:0; top:.7rem; width:6px; height:6px;
    border-radius:50%; background:var(--gold);
}

/* ── Phase Cards / Journey ─────────────────────────────────────── */
.journey { display:grid; grid-template-columns:repeat(5,1fr); gap:1.25rem; position:relative; }
.journey::before {
    content:''; position:absolute; top:50px; left:10%; right:10%; height:2px;
    background:linear-gradient(to right, var(--gold), #E84393, #E86F51, #3498DB, #27AE60);
    opacity:.25; z-index:0;
}
.phase-card {
    background:var(--white); border-radius:var(--radius-lg); padding:2rem 1.5rem;
    text-align:center; position:relative; z-index:1; border:1px solid var(--border);
    transition:var(--transition);
}
.phase-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.phase-card__number {
    width:40px; height:40px; border-radius:50%; display:flex; align-items:center;
    justify-content:center; margin:0 auto 1.25rem; font-family:var(--font-sans);
    font-weight:800; font-size:1rem; color:var(--white);
}
.phase-card__icon {
    width:52px; height:52px; border-radius:12px; display:flex; align-items:center;
    justify-content:center; margin:0 auto 1rem; font-size:1.2rem;
}
.phase-card h4 { margin-bottom:.25rem; font-size:1.1rem; }
.phase-card__subtitle {
    font-family:var(--font-serif); font-style:italic; color:var(--text-light);
    font-size:.92rem; margin-bottom:.75rem;
}
.phase-card__duration {
    font-family:var(--font-sans); font-size:.7rem; font-weight:600;
    letter-spacing:.1em; text-transform:uppercase; padding:.3rem .8rem;
    border-radius:2rem; display:inline-block; margin-bottom:1rem;
}
.phase-card p { font-size:.92rem; color:var(--text-gray); line-height:1.6; }

/* ── Approach Cards ────────────────────────────────────────────── */
.approaches-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:1.5rem; }
.approach-card {
    background:var(--white); border-radius:var(--radius-lg); padding:2rem;
    border:1px solid var(--border); border-left:4px solid var(--gold); transition:var(--transition);
}
.approach-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.approach-card__sigla {
    font-family:var(--font-sans); font-size:.7rem; font-weight:800;
    letter-spacing:.15em; text-transform:uppercase; color:var(--gold); margin-bottom:.5rem;
}
.approach-card__focus {
    font-size:.85rem; color:var(--text-light); font-style:italic; margin-bottom:.75rem;
}

/* ── Score Bar ─────────────────────────────────────────────────── */
.score-bar { height:8px; background:var(--border-light); border-radius:4px; overflow:hidden; }
.score-bar__fill { height:100%; border-radius:4px; transition:width 1s ease; }

/* ── Tags ──────────────────────────────────────────────────────── */
.tag {
    display:inline-block; padding:.25rem .65rem; border-radius:2rem;
    font-family:var(--font-sans); font-size:.72rem; font-weight:600;
    letter-spacing:.04em; background:var(--light-bg); color:var(--text-gray);
}

/* ── Forms ──────────────────────────────────────────────────────── */
.form-group { margin-bottom:1.25rem; }
.form-group label {
    display:block; font-family:var(--font-sans); font-size:.85rem;
    font-weight:600; color:var(--text-dark); margin-bottom:.4rem;
}
.form-group input, .form-group select, .form-textarea, .form-select {
    width:100%; padding:.75rem 1rem; border:1px solid var(--border); border-radius:var(--radius);
    font-family:var(--font-body); font-size:.95rem; color:var(--text-dark);
    background:var(--white); transition:var(--transition-fast);
}
.form-group input:focus, .form-textarea:focus {
    outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(59,184,185,.15);
}
.form-hint { display:block; font-size:.8rem; color:var(--text-light); margin-top:.3rem; }

/* ── Assessment ────────────────────────────────────────────────── */
.assessment-progress__bar {
    height:6px; background:var(--border-light); border-radius:3px; overflow:hidden; margin-bottom:.5rem;
}
.assessment-progress__fill { height:100%; background:var(--gold); border-radius:3px; transition:width .5s ease; }
.assessment-progress__text { font-size:.8rem; color:var(--text-light); font-family:var(--font-sans); }
.question-block { padding:1.5rem 0; border-bottom:1px solid var(--border-light); }
.question-block__text { font-size:1rem; color:var(--text-dark); margin-bottom:1rem; font-weight:500; }
.question-block__options { display:flex; flex-direction:column; gap:.5rem; }
.radio-option {
    display:flex; align-items:center; gap:.75rem; padding:.6rem 1rem;
    border:1px solid var(--border); border-radius:var(--radius); cursor:pointer;
    transition:var(--transition-fast); font-size:.9rem;
}
.radio-option:hover { border-color:var(--gold); background:var(--gold-light); }
.radio-option input[type="radio"],
.radio-option input[type="checkbox"] { accent-color:var(--gold); }

/* ── CTA Section ───────────────────────────────────────────────── */
.cta-section {
    background:var(--navy); padding:80px 0; text-align:center; color:var(--white);
}
.cta-section h2 { color:var(--white); margin-bottom:1rem; }
.cta-section p { color:rgba(255,255,255,.7); max-width:560px; margin:0 auto 2rem; font-size:1.05rem; }

/* ── Modal ──────────────────────────────────────────────────────── */
.modal { display:none; position:fixed; inset:0; z-index:2000; align-items:center; justify-content:center; }
.modal.active { display:flex; }
.modal__backdrop { position:absolute; inset:0; background:rgba(0,0,0,.6); }
.modal__content {
    position:relative; background:var(--white); border-radius:var(--radius-lg);
    padding:2.5rem; max-width:440px; width:90%; box-shadow:var(--shadow-lg);
    animation:modalIn .3s ease;
}
@keyframes modalIn { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.modal__close { position:absolute; top:1rem; right:1rem; background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--text-light); }

/* ── Auth Tabs ─────────────────────────────────────────────────── */
.auth-tabs { display:flex; margin-bottom:1.5rem; border-bottom:2px solid var(--border); }
.auth-tab {
    flex:1; padding:.75rem; background:none; border:none; font-family:var(--font-sans);
    font-size:.85rem; font-weight:600; color:var(--text-light); cursor:pointer;
    border-bottom:2px solid transparent; margin-bottom:-2px; transition:var(--transition-fast);
}
.auth-tab.active { color:var(--gold); border-bottom-color:var(--gold); }

/* ── Alerts ────────────────────────────────────────────────────── */
.alerts-container { position:fixed; top:80px; right:2rem; z-index:1500; display:flex; flex-direction:column; gap:.5rem; }
.alert {
    padding:1rem 1.5rem; border-radius:var(--radius); font-size:.9rem;
    display:flex; align-items:center; justify-content:space-between; gap:1rem; box-shadow:var(--shadow-md);
}
.alert--success { background:#d4edda; color:#155724; border-left:4px solid var(--green); }
.alert--error,.alert--danger { background:#f8d7da; color:#721c24; border-left:4px solid var(--red); }
.alert--warning { background:#fff3cd; color:#856404; border-left:4px solid var(--orange); }
.alert__close { background:none; border:none; font-size:1.2rem; cursor:pointer; color:inherit; opacity:.6; }

/* ── Table ─────────────────────────────────────────────────────── */
.table { width:100%; border-collapse:collapse; font-size:.9rem; }
.table th {
    background:var(--light-bg); font-family:var(--font-sans); font-size:.75rem;
    font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    color:var(--text-light); padding:.75rem 1rem; text-align:left;
}
.table td { padding:.75rem 1rem; border-bottom:1px solid var(--border-light); }
.table tr:hover td { background:var(--light-bg); }

/* ── Footer ────────────────────────────────────────────────────── */
.footer { background:var(--navy); color:rgba(255,255,255,.7); padding:4rem 0 2rem; }
.footer__grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
.footer__brand h3 { color:var(--white); font-size:1.5rem; margin-bottom:1rem; }
.footer__brand p { font-size:.9rem; line-height:1.7; color:rgba(255,255,255,.6); }
.footer__links h4 {
    color:var(--gold); font-family:var(--font-sans); font-size:.75rem;
    font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:1rem;
}
.footer__links a { display:block; color:rgba(255,255,255,.6); font-size:.88rem; padding:.3rem 0; }
.footer__links a:hover { color:var(--gold); }
.footer__bottom {
    border-top:1px solid rgba(255,255,255,.1); padding-top:2rem; text-align:center; font-size:.82rem;
}
.footer__bottom p { margin-bottom:.25rem; color:rgba(255,255,255,.4); }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width:991px) {
    .navbar__links {
        display:none; position:absolute; top:70px; left:0; right:0;
        background:var(--white); flex-direction:column; padding:1rem 2rem; box-shadow:var(--shadow-md);
    }
    .navbar__links.active { display:flex; }
    .navbar__links a { color:var(--text-gray) !important; padding:.75rem 0; }
    .navbar__actions { display:none; }
    .navbar__hamburger { display:flex; }
    .journey { grid-template-columns:1fr; }
    .journey::before { display:none; }
    .grid--2,.grid--3,.grid--4 { grid-template-columns:1fr; }
    .footer__grid { grid-template-columns:1fr 1fr; gap:2rem; }
}

@media (max-width:575px) {
    .container,.container--narrow { padding:0 1.25rem; }
    .section { padding:60px 0; }
    .hero { min-height:85vh; }
    .hero__content { padding:2rem 0; }
    .hero__actions { flex-direction:column; }
    .areas-grid { grid-template-columns:1fr; }
    .footer__grid { grid-template-columns:1fr; }
    .stats-grid { grid-template-columns:repeat(2,1fr); }
}

/* ── Slide Viewer ──────────────────────────────────────────────── */
.video-slide-container { display: flex; gap: 20px; margin-bottom: 24px; align-items: stretch; }
.video-side { flex: 0 0 58%; min-width: 0; }
.slide-side { flex: 0 0 calc(42% - 20px); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.slide-viewer { background: linear-gradient(160deg, #1a2747, #253564); border-radius: 16px; overflow: hidden; flex: 1; display: flex; flex-direction: column; border: 1px solid rgba(59,184,185,0.15); }
.slide-display { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px; min-height: 200px; background: rgba(0,0,0,0.1); }
.slide-display img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); transition: opacity 0.3s; }
.slide-controls { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 12px; background: rgba(0,0,0,0.2); }
.slide-prev, .slide-next { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgba(59,184,185,0.4); background: rgba(59,184,185,0.1); color: rgba(59,184,185,0.9); font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s; }
.slide-prev:hover, .slide-next:hover { background: rgba(59,184,185,0.25); }
.slide-counter { font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.6); min-width: 60px; text-align: center; }
.slide-download-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; background: linear-gradient(135deg, #3BB8B9, #2d9a9b); color: #fff; border: none; border-radius: 12px; font-size: 0.82rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: all 0.3s; }
.slide-download-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(59,184,185,0.3); }
@media (max-width: 900px) { .video-slide-container { flex-direction: column; } .video-side, .slide-side { flex: none; width: 100%; } }