:root{
      --max-w: 1100px;
      --accent: #0b72ff;
      --muted: #666;
      --bg: #ffffff;
      --card-bg: #f8f9fb;
      --font: "Helvetica Neue", Arial, sans-serif;
    }
    body{
      margin:0;
      font-family:var(--font);
      color:#222;
      background:var(--bg);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }
    .container{
      max-width:var(--max-w);
      margin:36px auto;
      padding:28px;
    }
    .card{
      background:var(--card-bg);
      border-radius:12px;
      box-shadow:0 6px 18px rgba(12,30,60,0.06);
      padding:28px;
      display:flex;
      gap:28px;
      align-items:flex-start;
      flex-wrap:wrap;
    }

    .image {
      flex:0 0 400px;
      width:400px;
      height:260px;
      border-radius:8px;
      background:#e6eefc;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
    }
    .image img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    .content{
      flex:1 1 420px;
      min-width:260px;
    }
    h1{
      margin:0 0 10px 0;
      font-size:28px;
      letter-spacing:0.2px;
    }
    p.intro{
      margin:0 0 16px 0;
      color:var(--muted);
      line-height:1.8;
    }

    .features{
      display:grid;
      grid-template-columns:repeat(2, minmax(180px,1fr));
      gap:12px 20px;
      margin-top:6px;
    }
    .feature{
      background:#fff;
      border-radius:8px;
      padding:12px 14px;
      box-shadow:0 3px 10px rgba(12,30,60,0.04);
      font-size:14px;
      color:#333;
    }
    .cta{
      margin-top:18px;
      display:flex;
      gap:12px;
      flex-wrap:wrap;
    }
    .btn{
      padding:10px 16px;
      border-radius:8px;
      text-decoration:none;
      font-weight:600;
      display:inline-block;
    }
    .btn-primary{
      background:var(--accent);
      color:#fff;
    }
    .btn-ghost{
      background:transparent;
      border:1px solid #d6dbe8;
      color:#222;
    }

    @media (max-width:880px){
      .card{ padding:18px; }
      .image{ flex:0 0 320px; width:320px; height:208px; }
      h1{ font-size:22px; }
      .features{ grid-template-columns:1fr; }
    }

    @media (max-width:520px){
      .image{ width:100%; height:200px; flex-basis:100%; }
      .content{ flex-basis:100%; }
    }