:root{
      --bg:#f7faff;
      --card:#ffffff;
      --accent1:#0077ff;
      --accent2:#00c6ff;
      --muted:#666;
      --radius:14px;
      --max-width:1100px;
      --gap:50px;
      --transition:300ms ease;
      font-family: "Poppins", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    .careers-wrap{
      width:100%;
/*      max-width:var(--max-width);*/
      background: var(--card);
      border-radius:var(--radius);
      padding:60px;
      box-shadow: 0 12px 35px rgba(0,0,0,0.08);
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:var(--gap);
      align-items:start;
      position:relative;
      overflow:hidden;
      animation: fadeInUp 1s ease forwards;
    }

    @keyframes fadeInUp {
      from {opacity:0; transform:translateY(40px)}
      to {opacity:1; transform:translateY(0)}
    }

    /* Decorative shapes */
    .careers-wrap::before,
    .careers-wrap::after{
      content:'';
      position:absolute;
      border-radius:50%;
      opacity:0.08;
      z-index:0;
      animation: float 6s ease-in-out infinite;
    }
    .careers-wrap::before{
      width:300px;
      height:300px;
      background:var(--accent1);
      top:-100px;
      right:-100px;
    }
    .careers-wrap::after{
      width:200px;
      height:200px;
      background:var(--accent2);
      bottom:-80px;
      left:-80px;
    }
    @keyframes float {
      0%,100%{transform:translateY(0)}
      50%{transform:translateY(-20px)}
    }

    /* Left side */
    .careers-visual{
      display:flex;
      flex-direction:column;
      gap:20px;
      position:relative;
      z-index:1;
      animation: fadeInLeft 1s ease forwards;
    }
    @keyframes fadeInLeft {
      from {opacity:0; transform:translateX(-40px)}
      to {opacity:1; transform:translateX(0)}
    }

    .eyebrow{
      font-weight:600;
      color:var(--accent1);
      font-size:14px;
      letter-spacing:0.08em;
      text-transform:uppercase;
    }
    
    p.lead{
      margin:0;
      color:var(--muted);
      line-height:1.8;
      font-size:17px;
      font-weight:400;
    }

    /* Illustration */
    .careers-visual img{
      margin-top:20px;
      max-width:100%;
      border-radius:var(--radius);
      box-shadow:0 8px 20px rgba(0,0,0,0.08);
      transition: transform .6s ease;
    }
    .careers-visual img:hover{
      transform: scale(1.05);
    }

    /* Form */
    .careers-form{
      background: #fdfdfd;
      padding:40px 35px;
      border-radius:var(--radius);
      border:1px solid #eee;
      box-shadow: 0 8px 20px rgba(0,0,0,0.05);
      display:flex;
      flex-direction:column;
      gap:20px;
      position:relative;
      z-index:1;
      animation: fadeInRight 1s ease forwards;
    }
    @keyframes fadeInRight {
      from {opacity:0; transform:translateX(40px)}
      to {opacity:1; transform:translateX(0)}
    }

    .form-head h3{margin:0;font-size:26px;font-weight:600;color:#111}
    .form-sub{font-size:15px;color:var(--muted);font-weight:400}

    .label{display:block;font-size:14px;margin-bottom:8px;color:#333;font-weight:500}
    .input, .select {
      width:100%;
      padding:14px 16px;
      border-radius:var(--radius);
      border:1px solid #ccc;
      background:#fff;
      font-size:15px;
      font-family:"Poppins", sans-serif;
      transition: border var(--transition), box-shadow var(--transition);
    }
    .input:focus, .select:focus{
      border-color: var(--accent1);
      box-shadow: 0 0 0 4px rgba(0,119,255,0.15);
      outline:none;
    }

    .hint{font-size:13px;color:var(--muted)}

    /* Responsive */
    @media (max-width:900px){
      .careers-wrap{grid-template-columns:1fr; padding:30px}
    }