:root{
      --brand: #17c964;           /* teal/green from the mock */
      --brand-dark: #12b157;
      --text: #2b2b2b;
      --muted: #7a7a7a;
      --line: #e9e9e9;
      --bg: #f7f8fa;
      --white: #fff;
      --radius: 10px;
      --shadow: 0 14px 28px rgba(0,0,0,.08), 0 10px 10px rgba(0,0,0,.04);
      --btn-shadow: 0 8px 18px rgba(23,201,100,.35);
      --gap: 28px;
    }

    * { box-sizing: border-box; }
    body{
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color: var(--text);
      background: var(--bg);
      line-height: 1.35;
      background-image: linear-gradient(120deg, #66a6ff 0%, #89f7fe 100%);
    }

    .page{
      padding: clamp(16px, 3vw, 32px);
      display: grid;
      place-items: start center;
      min-height: 100dvh;
      align-items: center;
    }

    .contact{
      width: min(1100px, 100%);
      /* background: var(--white); */
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      display: grid;
      grid-template-columns: 360px 1fr;
      overflow: hidden;
    }

    /* Left rail */
    .info{
      background: var(--brand);
      color: #eafff3;
      padding: 36px 28px;
      position: relative;
    }
    .info h2{
      margin: 0 0 6px 0;
      color: #fff;
      font-size: 28px;
      letter-spacing: .2px;
    }
    .info p.lead{
      margin: 8px 0 22px;
      opacity: .95;
    }
    .info-list{
      display: grid;
      gap: 18px;
      margin-top: 18px;
    }
    .info-item{
      display: grid;
      grid-template-columns: 44px 1fr;
      align-items: start;
      gap: 12px;
      padding: 10px 6px;
      border-radius: 12px;
    }
    .icon{
      height: 44px; width: 44px;
      border-radius: 50%;
      background: rgba(255,255,255,.14);
      display: grid; place-items: center;
      flex: 0 0 44px;
    }
    .icon svg{
      width: 22px; height: 22px;
      fill: #fff;
    }
    .info-item strong{
      display: block;
      color: #fff;
      font-weight: 600;
      margin-bottom: 4px;
    }
    .info-item span{
      display: block;
      color: #eafff3;
      opacity: .95;
    }

    /* Right form */
    .form{
      padding: 40px clamp(24px, 4vw, 56px);
      background: var(--white);

    }
    .form h3{
      margin: 2px 0 24px;
      font-size: 28px;
      font-weight: 700;
    }

    .grid{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--gap);
    }

    label{
      display: block;
      font-size: 11px;
      letter-spacing: .6px;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 10px;
    }

    .field{
      position: relative;
    }

    input[type="text"],
    input[type="email"],
    textarea{
      width: 100%;
      border: none;
      border-bottom: 2px solid var(--line);
      padding: 12px 0;
      font-size: 16px;
      outline: none;
      background: transparent;
      color: var(--text);
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    textarea{
      resize: vertical;
      min-height: 140px;
    }
    input::placeholder, textarea::placeholder{
      color: #b1b1b1;
    }
    input:focus, textarea:focus{
      border-bottom-color: var(--brand);
      box-shadow: 0 4px 0 -2px rgba(23,201,100,.2);
    }

    .row{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--gap);
    }

    .actions{
      margin-top: 28px;
    }
    .btn{
      display: inline-block;
      background: var(--brand);
      color: #fff;
      border: 0;
      padding: 12px 22px;
      border-radius: 10px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: var(--btn-shadow);
      transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
    }
    .btn:hover{ background: var(--brand-dark); }
    .btn:active{ transform: translateY(1px); }

    /* Divider line between panels (mimics the mock) */
    .contact::before{
      content:"";
      position: absolute;
      left: 360px;
      top: 0; bottom: 0;
      width: 1px;
      background: #f0f0f0;
    }
    .contact{ position: relative; }

    /* Responsive */
    @media (max-width: 900px){
      .contact{
        grid-template-columns: 1fr;
      }
      .contact::before{ display: none; }
      .info{ border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
      .grid, .row{ grid-template-columns: 1fr; }
    }