:root{
      --bg: rgb(15, 23, 43);
      --accent: rgb(240, 177, 0);
      --card: rgba(30,42,74,0.75);
    }

    html,body{
      height:100%;
      margin:0;
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background-color: var(--bg);
      color: #fff;
    }
    body {
      background-image: url("./images/romanroads.jpeg");
      background-repeat: no-repeat;
      background-size: cover;
    }

    .center-wrap{
      min-height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:2rem;
    }

    .panel {
      max-width:960px;
      width:100%;
      background: linear-gradient(180deg, rgba(30,42,74,0.9), rgba(15,23,43,0.75));
      border-radius:12px;
      padding:2rem;
      box-shadow: 0 8px 30px rgba(0,0,0,0.6);
      text-align:center;
    }

    .visual {
      display:flex;
      gap:1.25rem;
      align-items:center;
      justify-content:center;
      flex-wrap:wrap;
    }

    .illustration {
      flex: 0 1 420px;
      max-width:420px;
      border-radius:8px;
      overflow:hidden;
      background: #111;
      padding:0.5rem;
    }

    .illustration img {
      display:block;
      width:100%;
      height:auto;
      border-radius:6px;
      box-shadow: 0 6px 20px rgba(0,0,0,0.6);
    }

    .text-block {
      flex: 1 1 320px;
      min-width:240px;
      text-align:left;
      color:#e6e9ee;
    }

    h1 {
      margin:0 0 0.25rem 0;
      color: var(--accent);
      font-size:1.9rem;
      letter-spacing:0.5px;
      text-shadow: 0 0 10px rgba(240,177,0,0.18);
    }

    p.lead {
      margin:0.25rem 0 1rem 0;
      color: #cfd6e3;
      font-size:1rem;
      line-height:1.45;
    }

    .btn-custom {
      background-color: var(--accent);
      color: #000;
      border: none;
      font-weight:600;
      padding:0.6rem 1rem;
      border-radius:8px;
    }
    .btn-custom:hover{
      background-color: rgb(220,160,0);
    }

    

    @media (max-width:720px){
      .panel{ padding:1.25rem; }
      .illustration { max-width:320px; }
      h1 { font-size:1.5rem; text-align:center; }
      .text-block { text-align:center; }
    }