/* GENERAL */
body {
    margin: 0;
    font-family: 'EB Garamond', serif;
    background: url('img/pergamena.jpg');
    background-size: cover;
    color: #3a2a1a;
}

h1, h2, h3 {
    font-family: 'Cormorant Garamond', serif;
    color: #5a2a1e;
}

.section {
    padding: 60px 10%;
    max-width: 1200px;
    margin: auto;
}

/* NAVBAR */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10%;
    background: rgba(255, 248, 230, 0.95);
    border-bottom: 4px solid #7a1e1e;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar a {
    text-decoration: none;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    color: #5a2a1e;
    margin-left: 20px;
}

.navbar a:hover {
    color: #7a1e1e;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo span {
    font-size: 1.9rem;
    font-weight: 600;
    color: #7a1e1e; /* o il colore della tua navbar */
}

.nav-left .logo img {
    height: 48px;          /* dimensione consigliata */
    width: auto;           /* mantiene le proporzioni */
    display: block;        /* evita spazi indesiderati */
}

/* HERO */
.hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 80px 10%;
    background: rgba(255, 248, 230, 0.8);
    border-bottom: 4px solid #7a1e1e;
}

.hero-content {
    max-width: 600px;
}

.hero h1 {
    font-size: 8rem;
    margin: 0;
}

.tagline {
    font-size: 1.5rem;
    margin-top: -10px;
    color: #7a1e1e;
}

.pitch {
    margin: 20px 0;
    font-size: 1.2rem;
}

.hero-buttons .btn {
    display: inline-block;
    padding: 12px 24px;
    margin-right: 10px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
}

.btn.primary {
    background: #7a1e1e;
    color: #fff;
}

.btn.secondary {
    background: #c9a86a;
    color: #3a2a1a;
}

/* HERO IMAGE FRAME */
.hero-image-frame {
    position: relative;
    width: 600px;
    padding: 12px;
    background: #f4e7d3;
    border: 3px solid #c9a86a;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    overflow: hidden;
}

.hero-image-frame img {
    width: 100%;
    display: block;
    clip-path: polygon(
        5% 0%, 95% 0%, 
        100% 10%, 100% 90%, 
        95% 100%, 5% 100%, 
        0% 90%, 0% 10%
    );
    filter: contrast(1.05) saturate(1.1);
}

.hero-image-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('img/pergamena.png');
    opacity: 0.3;
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* WHAT IS LONEFORGE */
.what-is {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: space-between;
    gap: 60px;
}

.wil-left {
    flex: 1.2;
}

.wil-left h2 {
    font-size: 2.6rem;
    margin-bottom: 20px;
}

.wil-left p {
    font-size: 1.2rem;
    line-height: 1.6;
}

.wil-free {
    margin-top: 25px;
    padding: 18px 20px;
    background: rgba(255, 248, 230, 0.85);
    border-left: 4px solid #7a1e1e;
}

.wil-free h3 {
    margin: 0 0 8px 0;
    font-size: 1.6rem;
    color: #7a1e1e;
}

.wil-right {
    flex: 1;
    display: flex;
    justify-content: center;
}

.wil-image-frame {
    position: relative;
    width: 600px;
    padding: 12px;
    background: #f4e7d3;
    border: 3px solid #c9a86a;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    overflow: hidden;
}

.wil-image-frame img {
    width: 100%;
    display: block;
    clip-path: polygon(
        5% 0%, 95% 0%,
        100% 12%, 100% 88%,
        95% 100%, 5% 100%,
        0% 88%, 0% 12%
    );
    filter: contrast(1.05) saturate(1.1);
}

.wil-image-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('C:/Users/giuse/Documents/DnD/LoneForge/LoneForge website/img/pergamena.png');
    opacity: 0.3;
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* CORE FEATURES */
.core-features {
    text-align: center;
}

.cf-header h2 {
    font-size: 2.6rem;
    color: #5a2a1e;
}

.cf-header p {
    font-size: 1.3rem;
    margin-top: 10px;
    line-height: 1.5;
}

.cf-grid {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 40px;
}

.cf-card {
    background: rgba(255, 248, 230, 0.85);
    border: 3px solid #c9a86a;
    border-radius: 6px;
    padding: 20px;
    text-align: left;
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
    position: relative;
}

.cf-card-header h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    color: #7a1e1e;
    margin-bottom: 10px;
}

/* SIDE IMAGES FOR FEATURES SECTION */
.core-features {
    position: relative;
}

.cf-side.cf-left{
    position: absolute;
    top: 35%;
    transform: translateY(-50%);
    opacity: 0.85;
    pointer-events: none; /* evita che interferiscano con i click */
}

.cf-side.cf-right{
    position: absolute;
    top: -20%;
    transform: translateY(-50%);
    opacity: 0.85;
    pointer-events: none; /* evita che interferiscano con i click */
}

.cf-side.cf-left img {
    width: 500px;
    max-width: 100%;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
}

.cf-side.cf-right img {
    width: 280px;
    max-width: 100%;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
}

/* Left image */
.cf-left {
    left: -80px; /* regola la distanza dal contenuto */
}

/* Right image */
.cf-right {
    right: -40px;
}

/* MOBILE: hide side images */
@media (max-width: 1200px) {
    .cf-side {
        display: none;
    }
}

/* SELECTOR (TABS) */
.cf-selector {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.cf-selector button {
    background: rgba(255, 248, 230, 0.85);
    border: 2px solid #c9a86a;
    padding: 10px 18px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 4px;
    color: #5a2a1e;
    transition: 0.2s;
}

.cf-selector button:hover {
    background: #f4e7d3;
}

.cf-selector button.active {
    background: #7a1e1e;
    color: #fff;
    border-color: #7a1e1e;
}

/* VIEWER */
.cf-viewer {
    margin-top: 40px;
    background: rgba(255, 248, 230, 0.9);
    border: 3px solid #c9a86a;
    border-radius: 6px;
    padding: 30px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    text-align: left;
}

.cf-viewer h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    color: #7a1e1e;
}

.cf-viewer p {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

/* Screenshot area */
.cf-screenshot {
    width: 100%;
    height: 700px;
    background: #e8dcc2;
    border: 2px solid #c9a86a;
    border-radius: 4px;
    overflow: hidden;
}

.cf-screenshot img {
    width: 100%;
    display: block;
    clip-path: polygon(
        5% 0%, 95% 0%,
        100% 12%, 100% 88%,
        95% 100%, 5% 100%,
        0% 88%, 0% 12%
    );
}

/* ROADMAP */
.roadmap-header {
    text-align: center;
    margin-bottom: 40px;
}

.roadmap-header h2 {
    font-size: 2.8rem;
    color: #5a2a1e;
    margin-bottom: 5px;
}

.roadmap-header h3 {
    font-size: 1.8rem;
    color: #7a1e1e;
    margin-bottom: 10px;
}

.roadmap-header p {
    font-size: 1.2rem;
    max-width: 700px;
    margin: auto;
    line-height: 1.5;
}

.roadmap-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 900px;
    margin: auto;
}

.roadmap-item {
    background: rgba(255, 248, 230, 0.9);
    border: 3px solid #c9a86a;
    border-radius: 6px;
    padding: 25px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
    position: relative;
}

.rm-status {
    position: absolute;
    top: -14px;
    left: 20px;
    padding: 4px 12px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    border-radius: 4px;
    color: #fff;
}

.rm-status.complete { background: #3a7a3a; }
.rm-status.progress { background: #c97a1e; }
.rm-status.planned  { background: #7a1e1e; }

.roadmap-item h4 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem;
    color: #5a2a1e;
    margin-bottom: 10px;
}

.roadmap-item p {
    font-size: 1.1rem;
    line-height: 1.5;
}


* SIDE IMAGES FOR ROADMAP SECTION */
.roadmap {
    position: relative;
}

.r-side.r-left{
    position: absolute;
    top: 410%;
    transform: translateY(-50%);
    opacity: 0.85;
    pointer-events: none; /* evita che interferiscano con i click */
}

.r-side.r-right{
    position: absolute;
    top: 310%;
    transform: translateY(-50%);
    pointer-events: none; /* evita che interferiscano con i click */
}

.r-side.r-left img {
    width: 450px;
    max-width: 100%;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
}

.r-side.r-right img {
    width: 400px;
    max-width: 100%;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
}

/* Left image */
.r-left {
    left: -20px; /* regola la distanza dal contenuto */
}

/* Right image */
.r-right {
    right: 230px;
}

/* MOBILE: hide side images */
@media (max-width: 1200px) {
    .r-side {
        display: none;
    }
}


/* FOOTER */
footer {
    text-align: center;
    padding: 20px;
    background: rgba(255, 248, 230, 0.9);
    border-top: 4px solid #7a1e1e;
}

footer nav a {
    margin: 0 10px;
    text-decoration: none;
    color: #5a2a1e;
}

/* ─────────────────────────────────────────
   PAGE HEADER (features.html)
───────────────────────────────────────── */
.page-header {
    text-align: center;
    margin-bottom: 60px;
}

.page-header h1 {
    font-size: 5rem;
    color: #5a2a1e;
}

.page-header p {
    font-size: 2rem;
    margin-top: 10px;
}

/* FEATURE BLOCK */
.feature-block {
    width: 100%;
    margin-bottom: 100px;
    position: relative;
    overflow: hidden; /* ← aggiunto: contiene i float */
}

.feature-block::after {
    content: "";
    display: block;
    clear: both;
}

.feature-block:nth-child(even) {
    flex-direction: row-reverse;
}

.feature-text {
    flex: 1.2;
}

.feature-text h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.8rem;
    color: #7a1e1e;
    margin-bottom: 10px;
}

.feature-text p {
    font-size: 1.6rem;
    line-height: 1.6;
}

/* IMAGE INCORPORATA — float sul contenitore, non sull'img */
.feature-image {
    float: right;          /* ← spostato qui */
    width: 280px;
    margin: 0 0 20px 30px;
    shape-outside: polygon(
        4% 0%, 96% 0%,
        100% 10%, 100% 90%,
        96% 100%, 4% 100%,
        0% 90%, 0% 10%
    );
}

.feature-image img {
    width: 100%;           /* ← occupa tutto il contenitore floattato */
    display: block;
    clip-path: polygon(
        4% 0%, 96% 0%,
        100% 10%, 100% 90%,
        96% 100%, 4% 100%,
        0% 90%, 0% 10%
    );
    mix-blend-mode: multiply;
    opacity: 0.95;
    transform: rotate(-1deg);
}

/* Blocchi pari: immagine a sinistra */
.feature-block:nth-child(even) .feature-image {
    float: left;           /* ← anche qui sul contenitore */
    margin: 0 30px 20px 0;
}

.feature-block:nth-child(even) .feature-image img {
    transform: rotate(1deg);
}

/* Dimensioni personalizzate per ogni immagine */
.img-character { width: 420px; }
.img-bestiary { width: 620px; }
.img-npc { width: 480px; }
.img-oracle { width: 460px; }
.img-procedural { width: 620px; }
.img-items { width: 600px; }
.img-combat { width: 600px; }
.img-notes { width: 440px; }

* SIDE IMAGES FOR FEATURES PAGE */
.page-header {
    position: relative;
}

.ph-side.ph-left{
    position: absolute;
    top: 53%;
    transform: translateY(-50%);
    opacity: 0.85;
    pointer-events: none; /* evita che interferiscano con i click */
}

.ph-side.ph-right{
    position: absolute;
    top: 150%;
    transform: translateY(-50%);
    pointer-events: none; /* evita che interferiscano con i click */
}

.ph-side.ph-left img {
    width: 450px;
    max-width: 100%;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
}

.ph-side.ph-right img {
    width: 300px;
    max-width: 100%;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
}

/* Left image */
.ph-left {
    left: 20px; /* regola la distanza dal contenuto */
}

/* Right image */
.ph-right {
    right: 100px;
}

/* MOBILE: hide side images */
@media (max-width: 1200px) {
    .r-side {
        display: none;
    }
}

* SIDE IMAGES_2 FOR FEATURES PAGE */
.features-page {
    position: relative;
}

.fp-side.fp-left{
    position: absolute;
    top: 270%;
    transform: translateY(-50%);
    opacity: 0.85;
    pointer-events: none; /* evita che interferiscano con i click */
}

.fp-side.fp-right{
    position: absolute;
    top: 320%;
    transform: translateY(-50%);
    pointer-events: none; /* evita che interferiscano con i click */
}

.fp-side.fp-left img {
    width: 350px;
    max-width: 100%;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
}

.fp-side.fp-right img {
    width: 300px;
    max-width: 100%;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
}

/* Left image */
.fp-left {
    left: -40px; /* regola la distanza dal contenuto */
}

/* Right image */
.fp-right {
    right: 100px;
}

/* MOBILE: hide side images */
@media (max-width: 1200px) {
    .r-side {
        display: none;
    }
}



* SIDE IMAGES_3 FOR FEATURES PAGE */
.features-block {
    position: relative;
}

.fbp-side.fbp-left{
    position: absolute;
    top: 440%;
    transform: translateY(-50%);
    opacity: 0.85;
    pointer-events: none; /* evita che interferiscano con i click */
}

.fbp-side.fbp-right{
    position: absolute;
    top: 500%;
    transform: translateY(-50%);
    pointer-events: none; /* evita che interferiscano con i click */
}

.fbp-side.fbp-left img {
    width: 350px;
    max-width: 100%;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
}

.fbp-side.fbp-right img {
    width: 300px;
    max-width: 100%;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
}

/* Left image */
.fbp-left {
    left: -10px; /* regola la distanza dal contenuto */
}

/* Right image */
.fbp-right {
    right: 130px;
}

/* MOBILE: hide side images */
@media (max-width: 1200px) {
    .fbp-side {
        display: none;
    }
}


* SIDE IMAGES_4 FOR FEATURES PAGE */
.features-block {
    position: relative;
}

.fbp1-side.fbp1-left{
    position: absolute;
    top: 590%;
    transform: translateY(-50%);
    opacity: 0.85;
    pointer-events: none; /* evita che interferiscano con i click */
}

.fbp1-side.fbp1-right{
    position: absolute;
    top: 695%;
    transform: translateY(-50%);
    pointer-events: none; /* evita che interferiscano con i click */
}

.fbp1-side.fbp1-left img {
    width: 200px;
    max-width: 100%;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
}

.fbp1-side.fbp1-right img {
    width: 350px;
    max-width: 100%;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
}

/* Left image */
.fbp1-left {
    left: 70px; /* regola la distanza dal contenuto */
}

/* Right image */
.fbp1-right {
    right: 95px;
}

/* MOBILE: hide side images */
@media (max-width: 1200px) {
    .fbp1-side {
        display: none;
    }
}




/* ─────────────────────────────────────────
   HOW TO PLAY PAGE
───────────────────────────────────────── */

/* ─────────────────────────────────────────
   HOW TO PLAY SOLO — HEADER
───────────────────────────────────────── */

.solo-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-bottom: 60px;
    position: relative;
}

.solo-header .header-center {
    text-align: center;
}

.solo-header h1 {
    font-size: 5rem;
    color: #5a2a1e;
}

.solo-header p {
    font-size: 1.8rem;
    margin-top: 10px;
}

.header-img {
    width: 260px;
    opacity: 0.9;
}


/* ─────────────────────────────────────────
   GUIDE CHAPTERS
───────────────────────────────────────── */

.guide-chapter {
    margin-bottom: 80px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.guide-chapter h2 {
    font-size: 3rem;
    color: #7a1e1e;
    margin-bottom: 20px;
}

.guide-chapter h3 {
    font-size: 2rem;
    color: #5a2a1e;
    margin-top: 30px;
}

.guide-chapter p {
    font-size: 1.6rem;
    line-height: 1.7;
    margin-bottom: 20px;
}


* SIDE IMAGES FOR HOW TO PLAY PAGE */
.solo-guide {
    position: relative;
}

.sg-side.sg-left{
    position: absolute;
    top: 205%;
    transform: translateY(-50%);
    opacity: 0.85;
    pointer-events: none; /* evita che interferiscano con i click */
}

.sg-side.sg-right{
    position: absolute;
    top: 740%;
    transform: translateY(-50%);
    pointer-events: none; /* evita che interferiscano con i click */
}

.sg-side.sg-left img {
    width: 350px;
    max-width: 100%;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
}

.sg-side.sg-right img {
    width: 230px;
    max-width: 100%;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
}

/* Left image */
.sg-left {
    left: 150px; /* regola la distanza dal contenuto */
}

/* Right image */
.sg-right {
    right: 650px;
}

/* MOBILE: hide side images */
@media (max-width: 1200px) {
    .sg-side {
        display: none;
    }
}




.guide-chapter {
    position: relative;
}

.gc-side.gc-left{
    position: absolute;
    top: 33%;
    transform: translateY(-50%);
    opacity: 0.85;
    pointer-events: none; /* evita che interferiscano con i click */
}

.gc-side.gc-right{
    position: absolute;
    top: -20%;
    transform: translateY(-50%);
    pointer-events: none; /* evita che interferiscano con i click */
}

.gc-side.gc-left img {
    width: 350px;
    max-width: 100%;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
}

.gc-side.gc-right img {
    width: 350px;
    max-width: 100%;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
}

/* Left image */
.gc-left {
    left: -300px; /* regola la distanza dal contenuto */
}

/* Right image */
.gc-right {
    right: -250px;
}

/* MOBILE: hide side images */
@media (max-width: 1200px) {
    .gc-side {
        display: none;
    }
}


/* ─────────────────────────────────────────
   CHARACTER GALLERY
───────────────────────────────────────── */

.character-gallery {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px 0 40px;
}

.character-gallery img {
    width: 65%;
    border-radius: 6px;
    opacity: 0.95;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

@media (max-width: 900px) {
    .character-gallery {
        flex-direction: column;
        align-items: center;
    }

    .character-gallery img {
        width: 100%;
    }
}

/* ─────────────────────────────────────────
   EXAMPLE BOX
───────────────────────────────────────── */

.guide-example {
    background: rgba(255, 248, 230, 0.8);
    border-left: 4px solid #c9a86a;
    padding: 20px;
    margin-top: 20px;
    border-radius: 4px;
}

.chapter-images {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px 0 40px;
}

.chapter-images img {
    width: 45%;
    border-radius: 6px;
    opacity: 0.95;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}


@media (max-width: 900px) {
    .chapter-images {
        flex-direction: column;
        align-items: center;
    }

    .chapter-img {
        width: 70%;

    }
}



.chapter3-images {
    display: flex;
    justify-content: center;
    margin: 30px 0 40px;
}

.chapter3-images img {
    width: 70%;
    max-width: 700px;
    border-radius: 6px;
    opacity: 0.95;
}

@media (max-width: 900px) {
    .chapter3-images img {
        width: 90%;
        transform: none;
    }
}



.chapter4-images {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* ← permette altezze diverse */
    gap: 20px;
    margin: 30px 0 40px;
}

.chapter4-images img {
    max-width: 50%;      /* ← limite massimo, NON forza la larghezza */
    height: auto;        /* ← mantiene le proporzioni originali */
    border-radius: 6px;
    opacity: 0.95;
    object-fit: contain; /* ← evita distorsioni */
}

@media (max-width: 900px) {
    .chapter4-images {
        flex-direction: column;
        align-items: center;
    }

    .chapter4-images img {
        max-width: 80%;  /* più grande su mobile */
    }
}


.chapter6-image {
    display: flex;
    justify-content: center;
    margin: 30px 0 40px;
}

.chapter6-image img {
    width: 70%;
    max-width: 750px;
}

@media (max-width: 900px) {
    .chapter6-image img {
        width: 90%;
        transform: none;
    }
}

/* ─────────────────────────────────────────
   SUPPORT PAGE
───────────────────────────────────────── */



.support-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-bottom: 60px;
}

.support-page {
    max-width: 900px;
    margin: 0 auto;
}

.support-block {
    margin-bottom: 60px;
}

.support-block h2 {
    font-size: 3rem;
    color: #7a1e1e;
    margin-bottom: 20px;
}

.support-block p {
    font-size: 1.6rem;
    line-height: 1.7;
}

.donation-buttons {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.donate-btn {
    padding: 12px 24px;
    background: #7a1e1e;
    color: #fff;
    border-radius: 6px;
    font-size: 1.6rem;
    text-decoration: none;
    transition: 0.2s;
}

.donate-btn:hover {
    background: #5a1616;
}



/* ─────────────────────────────────────────
   TOOL PAGE
───────────────────────────────────────── */

.tool-header-center {
    text-align: center;
    margin-bottom: 10px;
}

.tool-header-center h1 {
    font-size: 4rem;
    margin-bottom: 10px;
}

.tool-header-center p {
    font-size: 2rem;
    opacity: 0.9;
}

.tool-page {
    max-width: 900px;
    margin: 0 auto;
}

.tool-block {
    margin-bottom: 60px;
}

.tool-block h2 {
    font-size: 3rem;
    color: #7a1e1e;
    margin-bottom: 20px;
}

.tool-block p {
    font-size: 1.6rem;
    line-height: 1.7;
}

.tool-buttons {
    margin-top: 20px;
}

.tool-buttons .btn {
    padding: 12px 24px;
    background: #7a1e1e;
    color: #fff;
    border-radius: 6px;
    font-size: 1.6rem;
    text-decoration: none;
    transition: 0.2s;
}

.tool-buttons .btn:hover {
    background: #5a1616;
}


/* SIDE IMAGES FOR TOOL PAGE */
.tool-page {
    position: relative;
}

.tp-side.tp-left{
    position: absolute;
    top: 15%;
    transform: translateY(-50%);
    opacity: 0.85;
    pointer-events: none; /* evita che interferiscano con i click */
}

.tp-side.tp-right{
    position: absolute;
    top: 70%;
    transform: translateY(-50%);
    pointer-events: none; /* evita che interferiscano con i click */
}

.tp-side.tp-left img {
    width: 350px;
    max-width: 100%;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
}

.tp-side.tp-right img {
    width: 350px;
    max-width: 100%;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
}

/* Left image */
.tp-left {
    left: -300px; /* regola la distanza dal contenuto */
}

/* Right image */
.tp-right {
    right: -300px;
}

/* MOBILE: hide side images */
@media (max-width: 1200px) {
    .tp-side {
        display: none;
    }
}



/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 900px) {
    /* su mobile i float si annullano e l'immagine
       va sopra il testo come un blocco normale */
    .feature-image,
    .feature-block:nth-child(even) .feature-image {
        float: none;
        width: 80%;
        margin: 0 auto 28px;
    }

    .feature-image img,
    .feature-block:nth-child(even) .feature-image img {
        transform: rotate(0deg);
        shape-outside: none;
    }

    .what-is {
        flex-direction: column;
        text-align: center;
    }

    .wil-right {
        margin-top: 30px;
    }

    .wil-image-frame {
        transform: rotate(0deg);
        width: 80%;
    }

    .cf-header h2 {
        font-size: 2.2rem;
    }
}

@media (max-width: 700px) {
    .roadmap-item {
        padding: 20px;
    }
    .rm-status {
        left: 15px;
    }
}